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

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

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

Edit Решили пойти с этим, вероятно, должны быть пользовательские опции для цветов. «Готовый к производству» скриншот:

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

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

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

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

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

Моя идея:

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

Мне нравится идея. Мое предложение сохранить «занятый» вниз было бы использовать градиенты вместо квадратов. Это сократилось бы на линии. Возможно, разные цвета для крайнего отступа.

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

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

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

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

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

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

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

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

Просто подумал, что я хотел бы указать, как это делает существующий редактор.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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