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

233

Я написал текстовый редактор 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
pgfearo
источник
6
У меня нет для тебя реального ответа, только мнение. Глядя на ваши примеры, B - мой предпочтительный выбор. Это выделяется для меня, потому что «тепловая карта» на самом деле следует за отступом, а не отражает его, как в первом примере, и Си делает. A также следует за фактическим отступом, но B больше похож на то, что вы увидите, когда фактический xml будет с отступом. Второй пример просто «солидный» на мой взгляд.
Марьян Венема
4
Я бы предпочел код с отступом сам. Не уверен, какая польза от этого будет? Я что-то упускаю из виду? (На самом деле не намерены, чтобы это звучало негативно.)
Крис
9
Я не вижу, как получить огромный запас на 100% линий лучше, чем взять столько, сколько нужно каждой строке.
Джон Гитцен
1
@ Джон Гитцен. Цель состоит не в том, чтобы сохранить экранную недвижимость (хотя это может быть во многих случаях). Это важно для более строгого контроля над символами пробелов, когда это важно - все равно будет предоставлено отступное представление (но виртуальное, без использования дополнительных символов).
pgfearo
3
Я голосую, чтобы закрыть этот вопрос как не по теме, потому что это вопрос UX, но он слишком стар для миграции.
фрик с трещоткой

Ответы:

104

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

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

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

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

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

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

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

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

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

pgfearo
источник
1
Это здорово выглядит ! Отличная работа. Но как это будет выглядеть, когда будет больше отступов?
Лоик Лопес
1
@ Louhike Спасибо! Да, он максимально увеличен на 4 уровнях, и я не хочу растягивать левое поле еще больше - поэтому я буду все больше сжимать ширину вертикальных полос на более высоких уровнях вложенности - немного как контурная карта, надеюсь.
pgfearo
2
@Louhike. Я добавил дополнительное изображение, чтобы показать, как все может выглядеть с 9 уровнями вложенности - после примерно 15 уровней, возможно, будет необходимо объединить средние полосы, возможно, используя градиентную заливку.
pgfearo
10
Это просто потрясающе. +1 за перевод кода и пользовательского интерфейса на следующий уровень. Кто-то с учетной записью должен опубликовать это в Hacker News, /.или r / программировании.
Конрад Рудольф
2
Интересно, как бы это выглядело, если бы боковая панель была перевернута горизонтально ... imgur.com/u5mNi
chanux
24

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

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

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

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

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

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

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

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

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


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

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

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

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

Дейв Галлахер
источник
2
Это заманчиво сделать что-то с текстом, но это трудно сделать, не отвлекая разработчика во время ввода текста или сразу после него. Изменения, которые влияют на высоту шрифта, вызывают проблемы - возможно, мы допустим, чтобы наш код шел вверх и вниз даже меньше, чем из стороны в сторону. Мне нравится ваша идея затенения кода, но это должно быть тонко, так как я хочу, чтобы все выглядело беспорядочно.
pgfearo
2
но это было бы здорово для учебной среды!
Jcolebrand
Предложение размера шрифта странно убедительно - хотя я вижу его недостатки. Почему бы не сделать шрифт меньше, так как область действия более глубоко вложена - это поможет предотвратить глубокое вложение (хотя это вызовет проблемы, когда глубокое вложение действительно является разумным решением)
Peter
2
тепловая карта на самом деле намного лучше визуализирует область видимости, чем визуализация с выравниванием по левому краю (решение @ pfgearo)
Sandeep
@Sandeep. Я согласен, что во многих случаях это лучшее решение, особенно при рассмотрении кода, а не его редактировании. Технические ограничения (как мы надеемся объяснить в этом вопросе) затрудняют мне изменение цвета фона с использованием текущего элемента управления, который я использую. По сути, я использовал левую часть тепловой карты в этом ответе, но с краями, наклоненными к редактируемой области, чтобы помочь привлечь внимание. Одна проблема с цветным фоном текста заключается в том, что читаемость / контраст теряются при более высоком уровни вложенности.
pgfearo
21

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

капсулы

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

Джереми Гиберсон
источник
2
Я предпочитаю мягкость ваших капсул, однако они кажутся слишком оторванными от текста, мне нужно что-то более связное и дающее более четкое представление о том, какие части содержат.
pgfearo
9

Моя идея:

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

broc7
источник
Я думаю, то, что вы предлагаете, по сути совпадает с ответом (вдохновленным другими), который я дал, но без наклонных линий. Я думаю, что наклонные линии помогают лучше видеть глаз между открытием и закрытием. Ширина не является реальной проблемой, потому что (как показано на изображении с 9 уровнями) ширина вертикальной линии не зависит от ширины наклонной линии, поэтому вертикальные линии могут быть сжаты.
pgfearo
Да, я заметил это после того, как написал. Они топографически идентичны - чтобы придумать это. Полагаю, это дело вкуса, но моя версия просто кричит мне «вложение» так, как ваша версия не делает. Может быть, эта функция может поддерживать оба и позволить пользователю выбирать.
broc7
8

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

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

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

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

Gauthier
источник
Да, идеи все еще развиваются. Изображения в ответе, который я отправил (а не на мой вопрос), являются менее блочными, потому что они имеют начальные / конечные наклоны, я рассматриваю возможность использования градиентов (но немного по-другому), чтобы немного смягчить ситуацию. Я с вами на разных цветах, для большого отступа, но и для выделения таких вещей, как комментарии или ошибки. И затем есть динамическое выделение, для показа текущего контекста / отладки ... трудность будет заключаться в том, чтобы определить, когда остановиться.
pgfearo
5

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

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

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

скудный
источник
@jimp Да, визуализация не может быть за или за кодом - как бы мне ни хотелось попробовать, мои навыки / платформа кодирования сделали бы это слишком сложным. Цвета фона в самом редакторе снова сложны, но это дает мне идею, что я могу попробовать разные цветовые тона переднего плана. Я попробую столбик слева направо и тепловую карту также, как вы предлагаете.
pgfearo
+1 для идеи тепловой карты (Y) .. и я могу предложить уровень вложенности внутри цвета для людей с особыми визуальными потребностями (например, дальтонизмом).
М.Самир
@jimp. Обновил мой вопрос, чтобы проиллюстрировать вашу идею
тепловой карты
@pgfearo Я рад, что мои идеи были полезны! Исходя из того, что я вижу, вы сделали, я думаю, что мне больше нравится L & F справа налево. Извините, у меня не было возможности проверить это раньше (занятые выходные). Поскольку вы достигли такого большого прогресса, я просто прокомментирую ответ, который вы опубликовали выше.
Jimp
@pgfearo Ой, у меня недостаточно репутации, чтобы комментировать ваш ответ! Я опубликую некоторые мысли о вашем ответе, как только получу эту привилегию, надеюсь, скоро!
Jimp
3

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

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

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

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

золы
источник
5
Слишком шумно, на мой взгляд, но все еще хорошая идея.
Конрад Рудольф
Я посмотрел это, и документ сайта указывает на то, что скриншот сделан из программы просмотра кода, а не из редактора кода. Кроме того, при условии, что нет никаких дополнительных символов, но это все еще вид с отступом. Я ищу простые решения, которые не требуют отступов кода по причинам, указанным в вопросе. Тем не менее, JGrasp выглядит как отличный инструмент для улучшения понимания кода.
pgfearo
Предполагается, что в моей школе JGrasp был редактором кода, который мы использовали в нашем введении в урок информатики, это был рекомендуемый редактор кода. В нем есть инструменты, помогающие компилировать и запускать вашу программу, но она не так хороша, как Eclipse или Netbeans. Но он немного отличается от того, что вы описали как его не совсем общее назначение, и он действительно знает только синтаксис Java.
пепел
3

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

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

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

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

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

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

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

Джастин ом
источник
С учетом отступа план состоит в том, чтобы динамически осветить пробелы, аналогично вашей идее. Кроме того, помните, что в плоском представлении 30 уровней вложенности занимают то же пространство, что и 1 уровень, с отступом, это будет за краем экрана, это одна из причин, по которой разработчикам предоставляется выбор видов.
pgfearo
1
Да, именно поэтому я сказал, что это не новая идея. Однако, если уровень отступа является логарифмическим или динамическим в зависимости от уровня, который я сейчас редактирую, у вас не возникнет проблемы, о которой вы говорите. Даже если бы он был просто зафиксирован в 1 пробел, он не был бы за кадром. Вы не будете даже на полпути через даже старый 80-символьный дисплей. Да, с некоторыми из этих идей 30 уровней занимают то же пространство, что и 1 уровень, но когда вы смотрите на некоторые из них, не экономите место только на отступах, они просто делают отступы целиком и добавляют немного причудливой графики.
Джастин Омс
Ома. Теперь есть вопрос о недвижимости на экране в вопросе (это вики сообщества и все), это включает в себя сравнение скриншотов. Если бы вы могли обновить этот раздел своими наблюдениями, это было бы здорово. Примите, пожалуйста, к сведению, что я мега-фанат с отступами (работаю в мире XML и т. Д.), Поэтому я потратил последние 6 месяцев или больше на совершенствование технологии виртуального форматирования, где отступы управляются системой. Хотя есть одна вещь, которую я узнал, это то, что разработчикам нравится выбор - отсюда и плоский взгляд.
pgfearo
При первом чтении я упустил ваши идеи о динамической ширине отступа - это может быть мощной функцией. Это повышает вероятность даже того, что какой-то код имеет отступ с отступом, в то время как остальная часть является плоской, не уверен, как это будет работать на практике, но это легко проверить - в моем проекте логика отступа по-прежнему вызывается даже для плоского представления, просто множитель установлен на 0. Так что это просто этот множитель, который нуждается в корректировке. Хороший звонок.
pgfearo
2

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

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

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

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

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

Герберт Ситц
источник
Редактор, который я разрабатываю, должен быть интегрирован в гораздо большую систему с графическим интерфейсом, где Vim, или какой-либо сторонний инструмент, не рассматривается по техническим причинам и причинам лицензирования. Тем не менее, меня интересует, как Vim решит эту проблему, поэтому проведу расследование - надеюсь, у них есть скриншоты в документации. Да, графика на основе символов может работать до некоторой степени - я разработал ее для исследования. Свертывание кода можно выполнить с левого поля, но также предоставляется синхронизированное представление дерева контуров.
pgfearo
@pgfearo: Вы можете взглянуть на протокол Vim NetBeans. Он предназначен для встраивания Vim в IDE без каких-либо проблем с лицензированием.
Greyfade
@greyfade - я боюсь, что есть проблемы с лицензированием, по крайней мере, с моим текущим проектом, потому что это закрытый источник, и мне понадобится возможность (даже если я его не использовал) изменить источник Vim без проблем GPL. Кроме того, протокол выглядит интересно.
pgfearo
1

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

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

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

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

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

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

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

Питер Тейлор
источник
Я просто сконцентрировался на этом элементе управления, но «XPath Location Bar» с навигатором «breadcrumb» работает и встроен в редактор, как и древовидное представление синхронизированных элементов.
pgfearo
0

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

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

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