Как редактор кода может эффективно подсказывать на уровне вложенности кода - без использования отступов? [закрыто]

Я написал текстовый редактор XML, который предоставляет 2 варианта просмотра для одного и того же текста XML, один с отступом (виртуально), другой с выравниванием по левому краю. Мотивация для выравнивания по левому краю состоит в том, чтобы помочь пользователям «увидеть» пробельные символы, которые они используют для отступа в виде простого текста или кода XPath, без вмешательства отступа, который является автоматическим побочным эффектом контекста XML.

Я хочу предоставить визуальные подсказки (в нередактируемой части редактора) для выровненного по левому краю режима, который поможет пользователю, но не слишком усложняется.

Я пытался просто использовать соединительные линии, но это казалось слишком занятым. Лучшее, что я придумала до сих пор, показано на макете скриншота редактора ниже, но я ищу лучшие / более простые альтернативы (которые не требуют слишком много кода).

[Редактировать]

Принимая идею тепловой карты (из: @jimp), я получаю это и 3 варианта - помеченные a, b и c:

Следующий раздел описывает принятый ответ как предложение, объединяя идеи из ряда других ответов и комментариев. Поскольку этот вопрос теперь является вики-сообществом, пожалуйста, обновите его.

NestView

Имя для этой идеи, которая предоставляет визуальный метод для улучшения читаемости вложенного кода без использования отступов.

Контурные линии

Название для разноцветных линий в NestView

На изображении выше показан NestView, используемый для визуализации фрагмента XML. Хотя для этой иллюстрации используется XML, любой другой синтаксис кода, который использует вложение, мог бы использоваться для этой иллюстрации.

Обзор:

1. Контурные линии затенены (как в тепловой карте), чтобы передать уровень вложенности

2. Линии контура расположены под углом, чтобы показать, когда уровень вложенности открывается или закрывается.

3. Контурная линия связывает начало уровня вложенности с соответствующим концом.

4. Объединенная ширина контурных линий в дополнение к тепловой карте дает визуальное представление об уровне вложенности.

5. Ширина NestView может быть изменена вручную, но не должна изменяться при изменении кода. Контурные линии могут быть сжаты или усечены, чтобы сохранить это.

6. Пустые строки иногда используют код, чтобы разбить текст на более усваиваемые куски. Такие строки могут вызывать особое поведение в NestView. Например, тепловая карта может быть сброшена или использована контурная линия цвета фона, или и то, и другое.

7. Можно выделить одну или несколько линий контура, связанных с текущим выбранным кодом. Контурная линия, связанная с выбранным уровнем кода, будет выделена больше всего, но другие контурные линии также могут «загореться» в дополнение, чтобы помочь выделить вложенную вложенную группу.

8. Различное поведение (например, свертывание кода или выбор кода) может быть связано с щелчком / двойным щелчком по линии контура.

9. Различные части линии контура (передний, средний или задний край) могут иметь разные динамические поведения.

10. Подсказки могут отображаться при наведении курсора мыши на линию контура

11. NestView постоянно обновляется по мере редактирования кода. Там, где вложение не сбалансировано, могут быть сделаны предположения о том, где должен заканчиваться уровень вложения, но соответствующие временные контурные линии должны быть выделены каким-либо образом в качестве предупреждения.

12. Перетаскивание поведения линий контура может поддерживаться. Поведение может варьироваться в зависимости от части перетаскиваемой контурной линии.

13. Функции, обычно встречающиеся в левом поле, такие как нумерация строк и выделение цветом для ошибок и изменения состояния, могут перекрывать NestView.

Дополнительная функциональность

Предложение затрагивает ряд дополнительных вопросов - многие из них выходят за рамки первоначального вопроса, но являются полезным побочным эффектом.

Визуально связывает начало и конец вложенной области

Контурные линии соединяют начало и конец каждого вложенного уровня

Выделение контекста текущей выбранной строки

Когда код выбран, соответствующий уровень гнезда в NestView может быть выделен

Различение областей кода на одном уровне вложенности

В случае XML разные оттенки могут использоваться для разных пространств имен. Языки программирования (такие как c #) поддерживают именованные области, которые можно использовать аналогичным образом.

Разделение областей в пределах области вложенности на разные визуальные блоки

Дополнительные строки часто вставляются в код для удобства чтения. Такие пустые линии можно использовать для сброса уровня насыщенности контурных линий NestView.

Многоколонный просмотр кода

Код без отступов делает использование многостолбцового представления более эффективным, поскольку менее вероятно, что потребуется перенос по словам или горизонтальная прокрутка. В этом представлении, как только код достигнет нижней части одного столбца, он переходит в следующий:

Использование за пределами простого предоставления визуальной помощи

Как предложено в обзоре, NestView может предоставить ряд функций редактирования и выбора, которые будут в целом соответствовать тому, что ожидается от элемента управления TreeView. Основное отличие состоит в том, что типичный узел TreeView состоит из 2 частей: расширителя и значка узла. Контурная линия NestView может состоять из трех частей: открыватель (наклонный), соединитель (вертикальный) и закрывающий (наклонный).

На отступе

NestView, представленный вместе с не отступным кодом, дополняет, но вряд ли заменит традиционное представление с отступом.

Вполне вероятно, что любые решения, использующие NestView, будут обеспечивать метод для плавного переключения между представлениями кода с отступом и без отступа, не затрагивая при этом ни сам текст кода, включая пробельные символы. Одним из методов для представления с отступом будет «Виртуальное форматирование», где вместо символов табуляции или пробела используется динамическое левое поле. Те же данные уровня вложенности, которые используются для динамического рендеринга NestView, могут также использоваться для более традиционного вида отступа.

печать

Отступ будет важен для читабельности напечатанного кода. Здесь отсутствие символов табуляции / пробела и динамического левого поля означает, что текст может переноситься с правого поля и при этом сохранять целостность отступа. Номера строк могут использоваться в качестве визуальных маркеров, которые указывают, где код обернут в слово, а также точное положение отступа:

Экран Недвижимость: квартира против отступа

Решение вопроса о том, использует ли NestView ценную недвижимость на экране:

Контурные линии хорошо работают с шириной, равной ширине символа редактора кода. Поэтому ширина NestView в 12 символов может вместить 12 уровней вложенности до того, как контурные линии будут обрезаны / сжаты.

Если представление с отступом использует 3 ширины символов для каждого уровня вложенности, то пространство сохраняется до тех пор, пока вложенность не достигнет 4 уровней вложенности, после этого уровня вложенности плоский вид имеет преимущество в экономии места, которое увеличивается с каждым уровнем вложенности.

Примечание. Для кода часто рекомендуется минимальный отступ в 4 символа, однако XML часто обходится с меньшими затратами. Кроме того, виртуальное форматирование позволяет использовать меньше отступов, потому что нет риска проблем с выравниванием

Сравнение двух видов показано ниже:

Исходя из вышесказанного, вероятно, справедливо будет сделать вывод, что выбор стиля представления будет зависеть от других факторов, помимо экранной недвижимости. Единственное исключение - это то, где место на экране имеет преимущество, например, на нетбуке / планшете или когда открыто несколько окон кода. В этих случаях NestView с изменяемым размером может показаться очевидным победителем.

Сценарии использования

Примеры реальных примеров, где NestView может быть полезной опцией:

1. Где экранная недвижимость стоит дороже

   а. На таких устройствах, как планшеты, блокноты и смартфоны

   б. При отображении кода на веб-сайтах

   с. Когда несколько окон кода должны быть видны на рабочем столе одновременно

2. Там, где согласованный отступ текста в коде является приоритетом

3. Для просмотра глубоко вложенного кода. Например, когда подъязыки (например, Linq в C # или XPath в XSLT) могут вызывать высокий уровень вложенности.

доступность

Должны быть предусмотрены варианты изменения размера и цвета для помощи людям с нарушениями зрения, а также для соответствия условиям окружающей среды и личным предпочтениям:

Совместимость редактируемого кода с другими системами

Решение, включающее опцию NestView, в идеале должно быть способно удалять начальные символы табуляции и пробела (идентифицированные как имеющие только роль форматирования) из импортированного кода. Затем, после удаления код можно аккуратно отобразить в лево-выровненных и отступах без изменений. Для многих пользователей, использующих системы, такие как инструменты слияния и сравнения, которые не знают пробелов, это будет серьезной проблемой (если не полной демонстрацией пробок).

Другие работы:

Визуализация перекрывающейся разметки

Опубликованное исследование Уэнделла Пиза , датированное 2004 годом, посвящено проблеме визуализации перекрывающейся разметки, в частности LMNL . Это включает SVG-графику со значительным сходством с предложением NestView, поэтому они признаны здесь.

Визуальные различия четко видны на изображениях (ниже), ключевое функциональное различие заключается в том, что NestView предназначен только для хорошо вложенного XML или кода, тогда как графика Уэнделла Пиза предназначена для представления перекрывающихся вложений.

Графики выше были воспроизведены - с любезного разрешения - с http://www.piez.org

Источники:

1. На пути к герменевтической разметке
2. Полшага к LMNL

Я попытался ответить на свой вопрос здесь, но это включает идею тепловой карты из @jimp, а также идею «сделать его более XML-ишным» из @Andrea:

Надеемся, что цвета на тепловой карте вместе с угловыми линиями помогают нарисовать глаз между начальным и конечным тегами; Удаление горизонтальных линейных разделителей улучшает «поток» от начала до конца. Когда пользователь выбирает с помощью элемента, соответствующая часть на тепловой карте может быть подсвечена каким-то образом - возможно, со светящейся границей (как показано).

Править Решено пойти с этим, вероятно, должны быть пользовательские параметры для цветов. Скриншот "готов к производству":

И для сравнения ... альтернативный вид с отступом:

Изменить сейчас, для более сложного случая - тестирование моих навыков рисования ...

Одной из идей может быть попытка добавить 3D к тексту. Увеличивайте / уменьшайте размер шрифта в зависимости от того, на каком уровне он находится.

Например, этот код:

Будет выглядеть так:

Это может раздражать, так как теряет фиксированное выравнивание по размеру текста на разных уровнях. Другая идея; изменить насыщенность каждого уровня:

Насколько хорошо это выдерживает что-то действительно глубокое? Точно сказать не могу...

Мне действительно очень нравится ваша идея визуализации желоба; легко группировать вещи вместе. Может быть, в сочетании с одной из этих идей это будет выглядеть еще лучше или намного более хрупким. ;)

Некоторое время назад я сделал тепловую карту, показывающую область видимости в C. Может быть интересно посмотреть на мозговой штурм:

Унифицированные налево:

Просто настройте свою оригинальную идею и переключайтесь с квадратов на капсулы. Я думаю, что эти версии (включая вашу оригинальную) легче читать, потому что они менее сложны, чем та, которая показывает вложение через элементы отображения. Я думаю, что элементы дерева передают информацию более простым и интуитивно понятным способом.

Я думаю, что левый отлично подходит для непосредственного отображения отступов, а правый лучше для передачи вложенных отношений.

Моя идея:

Вложенность больше похожа на вложение. Горизонтальная ширина каждого слоя не должна быть такой широкой.

Я люблю эту идею. Мое предложение сохранить "занятость" было бы использовать градиенты вместо квадратов. Это сократило бы линии. Возможно разные цвета для экстремального отступа.

Я бы сказал, что все, что у вас есть, великолепно, хотя и немного на мой вкус.

Мои комментарии: я постоянно боролся с тем, как Visual Studio IDE выполняет отступы. Я хотел бы использовать что-то подобное или вариацию.

Итак, представьте, что ссылка без строк и соответствует вашему текущему xml / коду.

Поскольку вы сказали, что визуализация должна существовать с нередактируемым (левым?) Полем, я считаю, что это означает, что визуализация не может быть перепутана или скрыта за кодом.

Возможно, тепловая карта в левом столбце с более яркими цветами, указывающими на более глубокие отступы? Сделайте поле фиксированного размера с такой визуализацией, как у вас (ожидайте, что вы идете слева направо, как отступ), которая динамически использует все пространство, заданное в соответствии с максимальным отступом, определяемым глубиной DOM.

Если бы вы были готовы перейти в область редактора, я бы предложил нечто очень похожее, но в качестве фона документа. Затененная область будет там, где будут пробелы , если отступ будет включен. В этом случае я бы использовал сплошной светлый цвет, контрастирующий с подсветкой текста.

jGRASP делает это с помощью визуального маркера на полях:

Он даже распознает, когда вы используете цикл, и использует другой тип линии для представления этого внутреннего цикла.

Просто подумал, что укажу, как это делает существующий редактор.

Неплохая идея, но необходимость ссылаться на левое поле, чтобы ясно видеть мои блоки, может немного раздражать. Это даже не думает о недвижимости на экране или о том, как все может выглядеть, если структура станет очень глубокой.

Поскольку мотивация состоит в том, чтобы помочь пользователям «видеть» символы пробела, которые они используют для отступа, вы можете просто показать им символы пробела.

Я не говорю о специальных визуальных символах, таких как маркеры абзацев, просто выделение. Пробелы в желтом, вкладки в зеленом (или что-то еще)

Для вопроса о марже / вложенности вы можете просто переместить маржу для каждого блока. Ничто не говорит о том, что маржа должна быть прямой линией.

Я уверен, что это не новая идея.

Что-то вроде этого:

Почему бы не открывать и закрывать скобки?

1. Отступ означает сдерживание: (и) означает именно это для программистов.
2. (и) каждый символ один: левая полоса останется очень тонкой.
3. Пустые элементы легко обнаруживаются: используйте () в той же строке.
4. Содержимое элемента не нуждается в визуальной подсказке: пробел намного лучше.
5. Положение курсора справа может совпадать с содержащим блоком слева: динамически добавлять цвет к символам в столбце с помощью (и)
6. Вы можете сделать его более XML-с помощью <и>, которые на расстоянии выглядят лучше.

Vim уже может делать нечто подобное, хотя и не так красиво.

В Vim есть разные способы «сворачивания кода». Один из них основан на правилах свертывания синтаксиса. Когда это сделано, код может быть свернут с использованием вложенной структуры контура, и «FoldColumn» может использоваться для графического (на самом деле «символьного» с символами '|' и '-') представления "foldlevel" ,

Сгиб столбца может дать представление о вложенности независимо от метода сгиба, но метод, основанный на синтаксисе, является тем, который, вероятно, подойдет для того, что вы хотите. Я не уверен, есть ли где-нибудь заранее подготовленные правила свертывания на основе синтаксиса для xml, я думаю, что это может быть.

Я думаю, что вы находитесь на правильном пути с опциями B и C: включите ширину и цветовую карту. Мне нравится вариант B больше, чем C на данный момент, потому что он менее навязчивый (либо широкий и разбавленный, либо узкий и интенсивный, чем очень тяжелый блок в середине C). Одним из недостатков является то, что с этим вариантом вам придется перестроить весь график, если вы вставите уровень где-нибудь. Я думаю, что вы могли бы сделать блоки намного меньше, 1 или 2 px, вероятно, будет достаточно. Это не должно быть много, это только должно быть различимо. Особенно, когда от людей ожидают многократного использования редактора, с ненавязчивыми, более тонкими эффектами легче работать, потому что они не слишком отвлекают.

Одна вещь, которая важна при использовании своего рода редактора, это выделение текущей области: при выборе строки в редакторе вам нужно точно знать, какие элементы она содержит и где она останавливается. Вы даже можете выделить дерево вверх (от каких элементов оно является потомком). Я думаю, что это отдельная проблема, которая требует рассмотрения и обдумывания и будет иметь большее влияние на то, как пользователи будут оценивать свой опыт работы с редактором.

Одна вещь, которую я не упомянул, это то, что вы можете сделать с оттенком поверх эффекта насыщения, на котором вы, кажется, остановились. Я предлагаю изменить цвет гнезда, в котором лежит указатель. Это облегчило бы пользователю различать, какие линии являются частью гнезда, а не братьев и сестер на этом пути.

При реализации материала на основе оттенков, пожалуйста, учитывайте дальтонизм и выбирайте цвета, которые являются универсально различимыми, или предлагайте людям несколько вариантов выбора.

Один из вариантов, который до сих пор можно было использовать вместе с другими предложениями, заключается в использовании всплывающей подсказки на левом поле, которая показывает путь к линии с использованием нотации XPath. Инструменты браузера для проверки элементов (например, Firebug, встроенный в Chrome) часто делают что-то подобное, но в строке состояния.

Возможно, вы могли бы иметь свернутое представление для тепловой карты (из исходного сообщения) только с одним столбцом цветов и чисел глубины. Это позволит им узнать, насколько они глубоки, и даст им больше пространства для экрана для XML. Похоже, победа победа для меня.

Меня беспокоит, хватит ли различий в цвете, чтобы глубоко вложить вещи.