Структура конфигурации

Всё настраивается одним объектом — VisualLinkerConfig. Он разбит на группы по тому, что именно они оформляют, поэтому нужная настройка всегда лежит там, где вы её будете искать. Этот же объект принимают createVisualLinker(), проп config у <VisualLinker>, useVisualLinker() и ключ visualLinker у модуля Nuxt.

const linker = createVisualLinker(el, {
  theme: darkTheme,
  lines: {
    curve: 'smoothstep',
    color: '#6fcf97',
    width: 2,
    hover: { width: 3 },
    bezier: { curvature: 0.5 },
    smoothstep: { cornerRadius: 8 },
    routing: { avoidObstacles: true, padding: 12 },
    jumps: { radius: 6 },
    animated: { shape: 'dots', speed: 50 },
  },
  markers: { end: { shape: 'arrow', hover: { size: 10 } }, sizes: { arrow: 8 } },
  ports: { show: true, radius: 4, hover: { radius: 6 }, spread: { gap: 16 } },
  labels: { background: '#fff', fontSize: 11 },
  blocks: { draggable: true, drag: { grid: 20, bounds: 'container' } },
  interaction: { hover: true, highlight: true, selectable: true, clipToScrollParents: 'pin' },
})

Каждое поле необязательно. Если поле не задано, действует встроенное значение, поэтому пустой конфиг {} — это полная и допустимая конфигурация.

Откуда берётся значение

Для любой визуальной настройки побеждает первое из списка, где есть значение:

Поле на самой сущности: style соединения, порт, блок, подпись.
Подходящая группа конфигурации, переданной движку.
Общая конфигурация приложения Vue или проекта Nuxt, если она есть (см. Общая конфигурация).
Токен темы.
CSS-переменная, которую задаёт ваша таблица стилей.
Встроенное значение.

Конфигурации из нескольких слоёв сливаются по полям и по состояниям, а не заменяются целиком: если lines.hover.width задан в одном месте, а lines.hover.color в другом, то у состояния наведения будут оба поля.

style соединения имеет ту же форму, что и группа lines, плюс markers: { start, end }. Всё, что можно задать для всех линий, можно задать и для одной — теми же словами.

Линии

Группа lines задаёт внешний вид и маршрутизацию по умолчанию для каждого соединения. Её поля:

curve — 'bezier' | 'straight' | 'smoothstep' · по умолчанию: 'bezier'. См. Соединения.
color — string · по умолчанию: '#2e8b57' или line из темы.
width — number · по умолчанию: 1.5.
dashed — boolean · по умолчанию: false.
opacity — number, от 0 до 1 · по умолчанию: 1.
highlight, hover, selected, focus — те же поля, которые действуют в этом состоянии. См. Визуальные состояния.
animated — boolean | ConnectionFlow · по умолчанию: выключено. См. Анимированный поток.
bezier — { curvature, minReach, maxReach, angleBlend, angleMaxOffset } · форма кривых bezier, см. ниже.
smoothstep — { cornerRadius, maxTrunkReach } · форма линий smoothstep, см. ниже.
routing — { avoidObstacles, padding } · см. Маршрутизация и пересечения.
jumps — boolean | { radius } · по умолчанию: выключено. См. Маршрутизация и пересечения.

Группа bezier, только для curve: 'bezier':

curvature — number · по умолчанию: 0.5. Вылет контрольных точек как доля расстояния между концами, до ограничения минимумом и максимумом.
minReach — number · по умолчанию: 24. Нижняя граница вылета контрольных точек в px при любом расстоянии.
maxReach — number · по умолчанию: 160. Верхняя граница вылета в px — главная настройка того, насколько сильно выгибается длинное соединение.
angleBlend — number, от 0 до 1 · по умолчанию: 0.55. Насколько угол выхода и входа отклоняется в сторону другого конца вместо того, чтобы оставаться перпендикулярным границе; 0 отключает отклонение.
angleMaxOffset — number, в градусах · по умолчанию: 30. Абсолютный потолок этого отклонения.

Группа smoothstep, только для curve: 'smoothstep':

cornerRadius — number · по умолчанию: 8. Радиус скруглённых изгибов под 90°, включая точки ветвления.
maxTrunkReach — number · по умолчанию: 48. Только для соединений с общим портом и стороной: ограничивает, насколько далеко идёт их общий ствол до разделения. Если значения у соседей разные, берётся наименьшее.

Группа routing, только для smoothstep:

avoidObstacles — boolean · по умолчанию: false.
padding — number · по умолчанию: 12. Зазор до любого другого блока, в px.

Маркеры

Группа markers задаёт маркеры на концах каждого соединения и размер по умолчанию для каждой встроенной формы.

start, end — false | MarkerShape | MarkerConfig · по умолчанию: не задано, показывается встроенная точка порта. Название формы — сокращение для { shape }; false убирает и точку, оставляя голую точку. Маркер, заданный здесь, заменяет точку на этом конце у каждого соединения. Поля маркера и его состояния описаны в Стилизация соединений.
sizes — { circle, square, diamond, arrow } · по умолчанию: по 6 для каждой. Размер маркера этой формы, у которого нет своего size, как кратность текущей толщины линии.

Порты

Группа ports задаёт встроенную точку, которая рисуется на каждом порту, и значения по умолчанию для портов.

show — boolean · по умолчанию: true. Рисует точку. Слот #port и событие layout работают в любом случае.
radius — number · по умолчанию: 4.
fill — string · по умолчанию: '#ffffff' или portFill из темы.
stroke — string · по умолчанию: цвет линии или portStroke из темы.
strokeWidth — number · по умолчанию: 1.5.
opacity — number, от 0 до 1 · по умолчанию: 1.
highlight, hover, selected, focus — те же поля в этом состоянии соединения точки.
side — 'auto' | FixedSide | FixedSide[] · по умолчанию: 'auto'. Сторона для каждого порта, у которого нет своей.
offset — number, от 0 до 1 · по умолчанию: 0.5. Положение вдоль этой стороны для каждого порта, у которого нет своего.
spread — boolean | { gap, padding } · по умолчанию: выключено. См. Разведение соединений по порту.

Подписи

Группа labels задаёт вид каждой подписи, которую библиотека рисует сама, — то есть подписи с text. См. Подписи соединений.

background — string · по умолчанию: '#ffffff' или labelBackground из темы.
border — string · по умолчанию: цвет линии или labelBorder из темы.
color — string · по умолчанию: '#1c1e2b' или labelText из темы.
fontSize — number, px · по умолчанию: 11.
paddingX, paddingY — number, px · по умолчанию: 6 и 3.
opacity — number, от 0 до 1 · по умолчанию: 1.
highlight, hover, selected, focus — те же поля в этом состоянии соединения подписи.

Блоки

Группа blocks задаёт, как можно перетаскивать блоки. См. Перетаскивание.

draggable — boolean · по умолчанию: false. Собственный draggable блока его переопределяет.
drag — { grid, bounds }.
- grid — number, px · по умолчанию: не задано, свободное движение. Положение блока на странице привязывается к этой сетке.
- bounds — 'container' | HTMLElement | DragBoundsInset · по умолчанию: не задано, без ограничений. Собственный dragBounds блока его переопределяет.

Взаимодействие

Группа interaction включает поведение, которое выходит за рамки рисования.

hover — boolean · по умолчанию: false. Курсор над линией переводит её в состояние hover и показывает курсор-указатель. См. Визуальные состояния.
highlight — boolean · по умолчанию: false. Курсор над блоком переводит его соединения в состояние highlight. См. Визуальные состояния.
selectable — boolean · по умолчанию: false. См. Выделение и доступность.
clipToScrollParents — boolean | 'pin' | 'hide' · по умолчанию: 'pin'. См. Прокручиваемые контейнеры.

Тема

Поле theme хранит токены цветов — одно место для цветов линий, портов и подписей, которые записываются в CSS-переменные. См. Темы.

Строки и enum'ы

Фиксированные варианты — тип кривой, форма маркера, сторона порта, ориентация маркера — записываются обычными строками:

lines: { curve: 'smoothstep' },
markers: { end: { shape: 'arrow', orient: 'fixed' } },

side порта принимает те же строки ('left', 'right', 'top', 'bottom', 'auto'). Пакет также экспортирует enum для каждого выбора — VLConnectionCurveEnum, VLMarkerShapeEnum, VLFixedSideEnum и VLOrientEnum — и член вроде VLMarkerShapeEnum.ARROW принимается везде, где принимается его строка, с тем же значением. Используйте то, что удобнее: строкам не нужен импорт, а enum'ы дают подсказки по именам.

Изменение конфигурации во время работы

Движок принимает новую конфигурацию в любой момент и всё перерисовывает:

linker.setConfig({ lines: { color: '#e0526c' } }) // сливается с текущей
linker.setConfig({ lines: { color: undefined } }) // undefined удаляет ключ
linker.replaceConfig(nextConfig) // заменяет всё
const current = linker.getConfig() // копия того, что действует

setConfig(patch) глубоко сливает патч с текущей конфигурацией. Ключ со значением undefined удаляется, так что настройку можно снова снять.
replaceConfig(next) заменяет конфигурацию целиком.
getConfig() возвращает копию; изменение копии движок не меняет.

Настройки, которые подключают слушатели, подхватываются сразу: выключение blocks.draggable делает блоки неперетаскиваемыми, а выключение interaction.selectable снимает выделение и превращает линии обратно в обычную графику. В Vue меняйте проп config или ref — см. Компонент VisualLinker.

Структура конфигурации ​

Откуда берётся значение ​

Линии ​

Маркеры ​

Порты ​

Подписи ​

Блоки ​

Взаимодействие ​

Тема ​

Строки и enum'ы ​

Изменение конфигурации во время работы ​