Як редактор коду може ефективно натякати на рівень введення коду - без використання відступів? [зачинено]

Я написав текстовий редактор XML, який пропонує 2 варіанти перегляду одного й того ж XML-тексту, один з відступом (практично), а другий з обґрунтуванням зліва. Мотивація виправданого перегляду ліворуч полягає в тому, щоб допомогти користувачам "бачити" символи пробілів, які вони використовують для відступу простого тексту або коду XPath без втручання з відступу, що є автоматизованим побічним ефектом контексту XML.

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

Я намагався просто використовувати з'єднувальні лінії, але це здавалося занадто зайнятим. Найкраще, що я придумав дотепер, показано на макетному екрані редактора нижче, але я шукаю кращі / простіші альтернативи (для яких не потрібно занадто багато коду).

[Редагувати]

Беручи ідею теплової карти (від: @jimp), я отримую цю та три альтернативи - з позначкою 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 може містити до 3 частин: відкривач (похилий), з'єднувач (вертикальний) і закриваючий (похилий).

Про відступ

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

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

Друк

Відступ буде важливим для читабельності друкованого коду. Тут відсутність символів табуляції та пробілів та динамічного лівого поля означає, що текст може загортатись у правій межі та зберігати цілісність відведеного подання. Номери рядків можуть бути використані як візуальні маркери, які вказують, де кодується слово, а також точне положення відступу:

Екранна нерухомість: Плоскі проти відступів

Вирішуючи питання про те, чи NestView використовує цінні екранні нерухомості:

Лінії контуру добре працюють із шириною, такою ж, як і ширина символу редактора коду. Таким чином, ширина NestView шириною 12 символів може вмістити 12 рівнів вкладення, перш ніж контурні лінії будуть усічені / стиснуті.

Якщо в розрізаному представленні використовується 3 ширини символів для кожного рівня гніздування, то простір зберігається, поки гніздування не досягне 4 рівнів вкладення, після цього рівня гніздування плоский вид має перевагу в економії місця, яка збільшується з кожним рівнем введення.

Примітка: Для коду часто рекомендується мінімальний відступ у ширину 4 символів, однак XML часто керується меншим розміром. Також віртуальне форматування дозволяє використовувати менше відступів, оскільки немає ризику вирівнювання

Порівняння двох поглядів показано нижче:

Виходячи з вищесказаного, можливо, справедливо зробити висновок, що вибір стилю перегляду буде ґрунтуватися на факторах, відмінних від екрану нерухомості. Єдиним винятком є ​​те, що екран на екрані розширюється, наприклад, на Netbook / Tablet або коли відкрито кілька вікон коду. У цих випадках зміна розміру NestView, здавалося б, є явним переможцем.

Використовуйте випадки

Приклади реальних прикладів, коли NestView може бути корисним варіантом:

1. Там, де екранна нерухомість перевага

   а. На таких пристроях, як планшети, блокноти та смартфони

   б. Під час показу коду на веб-сайтах

   c. Коли на робочому столі одночасно потрібно бачити кілька вікон коду

2. Якщо послідовне відступ тексту в коді є пріоритетним

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

Доступність

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

Порівнюваність відредагованого коду з іншими системами

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

Інші роботи:

Візуалізація розмітки, що перекривається

Опубліковане дослідження Венделла П'єза , датоване 2004 року, стосується питання візуалізації розмітки, що перекривається, зокрема LMNL . Сюди входить SVG-графіка зі значною схожістю з пропозицією NestView, як така, вони тут визнані.

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

Наведена вище графіка - з доброго дозволу - від http://www.piez.org

Джерела:

1. Назустріч герменутичній розмітці
2. На півкроку до LMNL

Я намагався відповісти на власне запитання тут, але це включає ідею теплової карти від @jimp, а також ідею "зробити це більш XML-ish" від @Andrea:

Сподіваємось, кольори на тепловій карті разом з кутовими лініями допомагають намалювати око між початковою та кінцевою мітками; видалення розділювачів горизонтальної лінії покращує «потік» від початку до кінця. Оскільки користувач вибирає за допомогою елемента, відповідна частина теплової карти може бути виділена певним чином - можливо, із світиться рамкою (як показано).

Редагувати Вирішили піти з цим, мабуть, повинні бути користувацькі варіанти кольорів. Скріншот "готового до виробництва":

І для порівняння ... альтернативний вид з відступом:

Редагувати зараз для більш сильно вкладеного випадку - тестування моїх навичок малювання ...

Можливо, спробувати додати 3D-текст до тексту. Збільшення / зменшення розміру шрифту залежно від рівня, на якому він знаходиться.

Наприклад, цей код:

Виглядав би так:

Це може бути прикро для роботи, оскільки воно втрачає фіксовану вирівнювання розміру тексту на різних рівнях. Інша ідея; змінити насиченість кожного рівня:

Наскільки добре це тримається за щось дійсно глибоке? Не впевнений...

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

Трохи назад я зробив теплову карту, що показує масштаби в C. Можливо, буде цікаво шукати мозковий штурм:

Вирівняно зліва:

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

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

Моя ідея:

Гніздування більше схоже на гніздування. Горизонтальна ширина кожного шару не повинна бути такою широкою.

Мені подобається ідея. Моя пропозиція не запускати "зайнятий" - використовувати градієнти замість квадратів. Це було б скорочено по лініях. Можливо, різні кольори для крайнього відступу.

Я б сказав, що все, що у вас є, - це чудово, хоч і трохи блокує мої смаки.

Мої коментарі: Я постійно боровся з тим, як Visual Studio IDE робить відступи. Я хотів би використовувати щось подібне або варіацію.

Тож уявіть це посилання без рядків та вкажіть свій поточний xml / код.

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

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

Якби ви хотіли покластись на регіон редактора, я б запропонував щось дуже схоже, але як тло документа. Затінене місце було б там, де було б пробіл , якби ввімкнено відступ. У цьому випадку я б використав суцільний світлий колір, який контрастує з виділенням тексту.

jGRASP робить це, використовуючи візуальний маркер у полі:

Він навіть розпізнає, коли ви використовуєте цикл і використовує інший тип рядка для представлення цього внутрішнього циклу.

Просто думав, що я зазначу, як це робить існуючий редактор.

Непогана ідея, але необхідність посилання на лівий край, щоб чітко побачити мої блоки, може стати трохи роздратованим. Це навіть не думати про екранну нерухомість або про те, що може почати виглядати, якщо структура стане дуже глибокою.

Оскільки мотивація полягає у тому, щоб допомогти користувачам «побачити» символи пробілів, які вони використовують для відступу, ви можете просто показати їм символи пробілу.

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

Для питання щодо поля / гніздування ви можете просто перемістити поле для кожного блоку дюйма. Ніщо не говорить про те, що поле має бути прямою лінією.

Я впевнений, що це не нова ідея.

Щось на зразок цього:

Чому б не відкривати і закривати дужки?

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

Vim вже може зробити щось подібне, хоча і не настільки гарне.

У Vim існують різні способи "складання коду". Одне з них засноване на правилах складання синтаксису. Коли це зроблено, код можна скласти за допомогою вкладеної структури контуру, а "FoldColumn" можна використовувати для надання графічного (фактично "на основі символів" з "|" та "-" символами) подання "foldlevel" .

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

Я думаю, що ви на правильному шляху з варіантами B і C: включіть і ширину, і розмальовку теплової карти. На даний момент мені подобається варіант B більше, ніж C, тому що він менш нав'язливий (або широкий, і розбавлений, або вузький і інтенсивний, а не дуже важкий блок в середині С). відновити весь графік, якщо десь вставити рівень. Я думаю, ви могли б зробити блоки набагато меншими, 1 або 2 пікселів, ймовірно, буде достатньо. Це не повинно бути великим, його потрібно лише розрізнити. Особливо, коли від людей, які очікують багато разів використовувати редактор, ненав’язливіші, тонкіші ефекти легше працювати, оскільки вони не так відволікають.

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

Я не бачив однієї речі, що ви можете зробити з відтінком поверх ефекту насичення, на який, здається, ви влаштувались. Моя пропозиція - змінити колір гнізда, в якому лежить вказівник. Це полегшило б користувачеві розрізнити, які лінії є частиною гнізда, а не побратими до нього по дорозі.

Реалізуючи матеріали на основі відтінку, будь ласка, пам’ятайте про дальтонізм та вибирайте кольори, які можна виділити універсально, або пропонуйте людям кілька варіантів.

Одним з варіантів, який можна було б використовувати разом з іншими пропозиціями, було б використовувати підказку зліва на полі, яка показує шлях до лінії за допомогою позначення XPath. Інструменти "перевіряти елемент" браузера (наприклад, Firebug, вбудований у Chrome) часто роблять щось подібне, але в рядку стану.

Можливо, у вас може бути збір подання для теплової карти (з оригінальної публікації), що містить лише один стовпчик кольорів та цифри глибини. Це дозволить їм знати, наскільки вони глибокі, і надати їм більше нерухомості екрана для xml. Мені це здається виграшним виграшем.

Мене хвилює, чи буде достатньо різниці кольорів, щоб глибоко гніздити речі.