Геометрия направляющих линий

О чём эта страница

showLine добавляет к строкам связки иерархии. Геометрия вычисляется один раз в lib/guide.ts и зависит только от иерархии, но не от состояния свёртки, — поэтому каждый узел считается один раз, а прокрутка, развёртывание и свёртывание её не обесценивают.

У каждого узла появляются три поля:

• isLastChild: последний ли это потомок родителя;
• guideMask: битовая маска продолжения столбцов отступа — установленный бит i означает, что «предок на глубине i не последний потомок», то есть в этом столбце нужна сплошная линия;
• markerLine: вертикальный отрезок в маркерном столбце (ячейка со стрелкой или значком).

Параметры

prop	Тип	По умолчанию	Описание
showLine	boolean | ShowLineOptions	false	false выключает; true включает значения по умолчанию; объект задаёт форму, цвет и толщину

ShowLineOptions

Поле	Тип	По умолчанию	Описание
style	'solid' | 'dashed' | 'dotted'	'solid'	Форма линии
color	string	'#d0d4dc'	Любой допустимый CSS-цвет
width	number	1	Пиксели, положительное число

Три формы:

• 'solid' (по умолчанию): непрерывная линия, самый частый вариант связки;
• 'dashed': linear-gradient чередует штрих 4px и пропуск 4px;
• 'dotted': radial-gradient плотно укладывает точку в сетке 4×4 — удобно для тёмных тем и плотных иерархий.

Исторические написания ('line', 'dot') и другие некорректные значения откатываются к 'solid', а не молча рисуют неверную форму.

Правила геометрии

• Связку с родителем в маркерном столбце (ячейка со стрелкой) рисуют только листья; ветви показывают лишь стрелку, без связки.
• Ячейки отступа рисуют вертикальную линию на всю высоту для каждого столбца-предка, у которого ещё есть последующие братья, — так структура связывается воедино.
• Форма связки листа зависит от его позиции среди братьев и различается для верхнего и внутренних уровней:

Позиция	Верхний уровень	Внутренний уровень
Первый лист	┌ (нижняя половина)	├ (на всю высоту)
Средний лист	├	├
Последний лист	└ (верхняя половина)	└
Единственный ребёнок	—	└

Только самый верхний первый лист открывается символом ┌; у внутреннего первого листа сверху уже идёт вертикаль отступа, поэтому используется ├.

Использование

<VueGiantTree :tree="rows" root="root" :show-line="true" />

<VueGiantTree
  :tree="rows"
  root="root"
  :show-line="{ style: 'dotted', color: '#3b82f6', width: 2 }"
/>

Попробуйте

В этом демо направляющие линии уже включены. Переключите «Размер данных» на small и разверните всё, чтобы сверить таблицу выше построчно.