Как редактор кода эффективно подсказывает уровень вложенности кода - без использования отступов? [закрыто]
Я написал текстовый редактор XML , который предоставляет 2 опции просмотра для одного и того же текста XML, один отступ (фактически) , а другая - влево. Мотивация для лево-обоснованного представления заключается в том, чтобы помочь пользователям «видеть» символы пробелов, которые они используют для отступов текста с открытым текстом или XPath без помех от отступа, который является автоматическим побочным эффектом контекста XML.
Я хочу предоставить визуальные подсказки (в нередактируемой части редактора) для режима с левым выравниванием, который поможет пользователю, но не будет слишком сложным.
Я пробовал просто использовать соединительные линии, но это казалось слишком занятым. Самое лучшее, что я придумал до сих пор, показано в скриншоте редактора ниже, но я ищу лучшие /более простые альтернативы (которые не требуют слишком большого количества кода).
[изменить]
Взяв идею Heatmap (от: @jimp), я получаю это и 3 альтернативы - помечены a, b и c:
В следующем разделе описывается принятый ответ в виде предложения, объединяющий идеи из ряда других ответов и комментариев. Поскольку этот вопрос теперь является вики-сообществом сообщества, не стесняйтесь обновлять его.
NestView
Название этой идеи, которая предоставляет визуальный метод для улучшения читаемости вложенного кода без использования отступов.
Линии контура
Название для затененных линий в NestView
Обзор:
-
Контурные линии затенены (как в тепловой карте), чтобы передать уровень вложенности
-
Контурные линии наклонены, чтобы показать, когда уровень вложенности открыт или закрыт.
-
Контурная линия связывает начало уровня вложенности с соответствующим концом.
-
Объединенная ширина контурных линий дает визуальное представление о уровне гнездования в дополнение к тепловой карте.
-
Ширина NestView может быть изменена вручную, но не должна меняться при изменении кода. Контурные линии могут быть сжаты или усечены, чтобы сохранить это.
-
Пустые строки иногда используются для разбивки текста на более усваиваемые фрагменты. Такие строки могут вызвать специальное поведение в NestView. Например, тепловая карта может быть сброшена или использована линия контура цвет фона, или и то, и другое.
-
Можно выделить одну или несколько контурных линий, связанных с текущим выбранным кодом. Контурная линия, связанная с выбранным уровнем кода, будет подчеркнута больше всего, но другие контурные линии также могут «загораться» в дополнение к тому, чтобы помочь выделить содержащую вложенную группу.
-
Различные типы поведения (например, сворачивание кода или выбор кода) могут быть связаны с нажатием /двойным щелчком по контурной линии.
-
Различные части контурной линии (ведущий, средний или задний фронт) могут иметь разные динамические поведения.
-
Подсказки могут отображаться в событии наведения мыши по контурной линии
-
NestView постоянно обновляется по мере редактирования кода. Если вложенность не является сбалансированным, могут быть сделаны предположения, где уровень вложенности должен заканчиваться, но связанные временные контурные линии должны быть каким-то образом выделены в качестве предупреждения.
-
Могут поддерживаться операции перетаскивания линий Contour Lines. Поведение может варьироваться в зависимости от того, какая часть линии контура перетаскивается.
-
Возможности, обычно встречающиеся в левом поле, такие как нумерация строк и выделение цвета для ошибок, а состояние изменения может перекрывать NestView.
Дополнительная функциональность
В предложении рассматривается ряд дополнительных вопросов - многие из них выходят за рамки исходного вопроса, но являются полезным побочным эффектом.
Визуальное связывание начала и конца вложенной области
Контурные линии связывают начало и конец каждого вложенного уровня
Выделение контекста текущей выделенной строки
Когда выбран код, связанный уровень гнезда в NestView можно выделить
Дифференциация между областями кода на том же уровне вложенности
В случае XML различные оттенки могут использоваться для разных пространств имен. Языки программирования (например, c #) поддерживают именованные области, которые могут использоваться аналогичным образом.
Разделение областей внутри области вложенности на разные визуальные блоки
Дополнительные строки часто вставляются в код, чтобы облегчить читаемость. Такие пустые строки можно использовать для сброса уровня насыщенности контурных линий NestView.
Multi-ColumnПросмотр кода
Код без отступов делает использование многостолбцового представления более эффективным, поскольку сглаживание слов или горизонтальная прокрутка менее вероятны. В этом представлении, когда код достиг дна одного столбца, он переходит в следующий:
Использование за пределами простого визуального сопровождения
Как было предложено в обзоре, NestView может предоставлять ряд функций редактирования и выбора, которые в целом согласуются с тем, что ожидается от элемента управления TreeView. Главное отличие состоит в том, что обычный узел TreeView имеет две части: расширитель и значок узла. Контурная линия NestView может содержать до 3 частей: открыватель (наклон), коннектор (вертикальный) и закрыть (наклон) .
В отступе
NestView представлен рядом с дополнением без отступов, но вряд ли заменит обычный условный вид кода.
Вероятно, что любые решения, принимающие NestView, предоставят метод для плавного переключения между представлениями с отступом и без отступов, не затрагивая ни одного текста кода - включая пробельные символы. Один из методов для отступов - это «Виртуальное форматирование», в котором вместо символов табуляции или пробела используется динамический левый край. Те же данные уровня вложенности, используемые для динамического рендеринга NestView, могут также использоваться для более условного вида с отступом.
Печать
Отступы будут важны для читаемости печатного кода. Здесь отсутствие символов табуляции /пробела и динамический левый край означает, что текст может обертываться с правым краем и по-прежнему поддерживать целостность отступов. Номера строк могут использоваться как визуальные маркеры, которые указывают, где код обернут словами, а также точное положение отступа:
Экран Real Estate: Flat Vs Indented
Обращаясь к вопросу о том, использует ли NestView ценную экранную недвижимость:
Контурные линии хорошо работают с шириной, аналогичной ширине символа редактора кода. Таким образом, ширина NestView шириной 12 символов может содержать 12 уровней вложенности до того, как контурные линии будут усечены /сжаты.
Если в виде отступов используется 3 ширины символов для каждого уровня вложенности, тогда пространство сохраняется до тех пор, пока nesting не достигнет 4 уровней вложенности. После этого уровня вложенности плоское представление имеет экономию пространства, которое увеличивается с каждым уровнем вложенности.
Примечание. Для кода часто рекомендуется минимальный отступ шириной в 4 символа, однако XML часто управляется с меньшим количеством. Кроме того, виртуальное форматирование позволяет использовать меньше отступов, поскольку нет риска проблем с выравниванием.
Сравнение двух видов показано ниже: