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

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

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

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

указатель уровня отображения редактора кода

[изменить]

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

Начальные идеи

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


NestView

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

Линии контура

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

введите описание изображения здесь>> </p>

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

<div class=

Обзор:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дифференциация между областями кода на том же уровне вложенности

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

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

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

Multi-ColumnПросмотр кода

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

введите описание изображения здесь>> </p>

<div class=

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

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


В отступе

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

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

Печать

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

введите описание изображения здесь

Экран Real Estate: Flat Vs Indented

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

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

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

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

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

введите описание изображения здесь>> </p>

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

<div class=

Использовать случаи

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

  1. Если экранная недвижимость находится в отличном состоянии

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

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

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

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

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

Доступность

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

введите описание изображения здесь>> </p>

<div class=

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

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


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

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

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

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

введите описание изображения здесь>> </p>

<p>  Изображения, приведенные выше, были воспроизведены - с любезного разрешения - от  <a href= http://www.piez.org

Источники:

  1. На пути к герменевтической разметке
  2. Половина шагов к LMNL
user-interface indentation
оригинал
232 голоса | спросил 35 revs, 2 users 100%
pgfearo
1 Jam1000000amThu, 01 Jan 1970 03:00:00 +030070 1970, 03:00:00

14 ответов


104

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

введите описание изображения здесь

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

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

введите описание изображения здесь>> </p>

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

<p> <img src =

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
24

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

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

введите описание изображения здесь>> </p>

<p> Будет выглядеть так: </p>

<p> <img src =

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

введите описание изображения здесь>> </p>

<p> Насколько хорошо это держится за что-то действительно глубокое? Не уверен ... </p>

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

<hr>
<p> Некоторое время назад я сделал тепловую карту, показывающую сферу действия на C. Возможно, интересно посмотреть на мозговой штурм: </p>

<p> <img src =

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
21

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

capsules

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
9

Моя идея:

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
8

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

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

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

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
5

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

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

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
3

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

введите описание изображения здесь

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

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
3

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

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

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

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

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

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

образец xml, показывающий перемещение левого поля и выделенного пробела

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
2

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

  1. Отступ означает сдерживание: (и) означает именно то, что программистам.
  2. (и) - каждый символ: левая панель остается очень тонкой.
  3. Пустые элементы легко распознаются: use () в одной строке.
  4. Содержимое элемента не нуждается в визуальной подсказке: пробел намного лучше.
  5. Позиция курсора справа может быть сопоставлена ​​содержащим блоком слева: динамически добавлять цвет в символы в столбце с (и)
  6. Вы можете сделать его более XML-ишем, используя <и & gt ;, которые выглядят лучше на расстоянии.
ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
2

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

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

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
1

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

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
1

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

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
0

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25
0

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

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

ответил fijiaaron 8 FebruaryEurope/MoscowbMon, 08 Feb 2016 22:33:25 +0300000000pmMon, 08 Feb 2016 22:33:25 +030016 2016, 22:33:25

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132