Дерево всех узлов показывается в виде отдельной страницы, которая открывается при нажатии на иконку дерева сверху слева от названия Блокнотика.
Дерево представляет все узлы в виде открытого графа с линиями, показывающими связи родительского зла с дочерними.
Нет никакого ограничения на число деревьев (корневых узлов) и количество дочерних.
Поэтому это представление удобно для конечного показа разветвленных отношений, скажем, генеалогического дерева.
Страницу можно прокручивать мышью как это делается пальцем в мобильнике.
Первоначально все узлы располагаются автоматически, но автор может вручную перетаскивать их в более подходящее место. Для этого нужно нажать кнопку мыши и подержать ее 0,5 секунды, пока узел не станет фиолетовым и начнет отбрасывать крестообразную тень для удобства позиционирования. Теперь узел можно перетащить на новое место и отпустить кнопку мыши.
Справа вверху страницы в небольшом белом прямоугольнике будет предложено перерисовать страницу с новыми данными, нажав кнопку. Но можно сначала перетащить и другие узлы.
Если страница очень широка, то узел бывает удобнее не перетаскивать, а просто задать новые координаты. Для этого нужно знать номер узла: навести на него мышь и запомнить цифру слева сверху. В нужном месте нужно щелкнуть мышью на поле, где должен быть левый верхний угол узла. В белом прямоугольнике появится диалог свойств, где нужно возможность ввести номер узла и нажать кнопку для перемещения.
После перемещений узлов авторы будут видеть красную кнопочку на прямоугольнике, с помощью которой можно отменить все сделанные перемещения и вернуться в исходный вид. Тогда появится еще одна кнопочка с крестиком, но асфальтового цвета – для восстановления удаленных ручных позиций.
Создание новых разделов в определенном месте
Если в диалоге свойств (который появляется справа вверху при щелчке мышью на поле между узлами) не вставить номер, то при нажатии кнопки ОК будет предложено создать новый узел: посредине страницы возникнет диалог свойств нового узла.
Нужно ввести номер узла, который будет более главным. Если не ввести, то новый узел станет самым главным (с него можно начинать новое дерево).
Так же нужно ввести название узла. Если его не ввести узел получит название: “Без названия”.
Можно сразу ввести и текст узла, но пока только в простой форме (без форматирования), потом его можно будет как угодно редактировать,но не в дереве, а в редакторе Блокнотика.
Осталось нажать на кнопку: “Создать новый узел”, страница перезагрузится с уже новым созданным узлом.
При щелчке на каком-то узле возникнет диалог для изменения имени узла или его родителя (более старшего узла или 0 если нужно сделать узел корневым, без родителя).
Так можно довольно оперативно формировать дерево.
Стрелки сделаны на HTML5, канва которого имеет ограничение по размеру 32000 точек в ширину или высоту, что для большинства случаев достаточно. В тех случаях, когда дерево оказывается больше, там остаются узлы, но уже не показываются соединяющие линии.