VueCraft NPM

Соединения ​

Соединение связывает две конечные точки блоков и рисуется как SVG-путь между их посчитанными портами.

Описание соединения ​

ConnectionDescriptor

id ​

string

Уникальный id соединения.

from ​

ConnectionEndpoint

Начальная конечная точка соединения — смотрите «Конечные точки соединения» ниже.

to ​

ConnectionEndpoint

Конечная точка соединения — смотрите «Конечные точки соединения» ниже.

style ​

ConnectionStyle · по умолчанию: — (не задано, используются настройки по умолчанию уровня инстанса)

Переопределения кривой/цвета/маркеров для конкретного соединения — смотрите Стилизация соединений.

hoverable ​

boolean · по умолчанию: берётся из interaction.hover

Включает или выключает состояние hover и курсор-указатель только для этого соединения; локальное значение сильнее глобального. См. Визуальные состояния.

ariaLabel ​

string · по умолчанию: "Connection: {id блока from} → {id блока to}"

Доступное имя линии — её aria-label. См. Выделение и доступность.

labels ​

ConnectionLabel[] · по умолчанию: — (не задано, в Vue один слот #connection-label посередине)

Подписи вдоль линии — любое число и в любом месте. Подпись с text рисует библиотека, подпись без него — позиция для вашего содержимого. См. Подписи соединений.

Пример — все поля сразу:

ts
linker.setConnections([
  {
    id: 'task1-task2', // уникальный id
    from: { blockId: 'task-1', portId: 'output' }, // начинается на порту "output" блока "task-1"
    to: { blockId: 'task-2' }, // заканчивается на границе блока "task-2" — без portId, значит side: 'auto'
    style: { curve: 'smoothstep', color: '#6366f1' }, // опционально — см. «Стилизация соединений»
    ariaLabel: 'Задача 1 передаёт данные задаче 2', // опционально — доступное имя линии
    labels: [{ id: 'kind', position: 'middle', text: 'передаёт' }], // опционально — любое число подписей вдоль линии
  },
])

Конечные точки соединения ​

ConnectionEndpoint

blockId ​

string

Должен совпадать с id зарегистрированного блока.

portId ​

string · по умолчанию: — (не задано, граница блока с side: 'auto')

Должен совпадать с одним из ports[].id этого блока — смотрите Блоки и порты.

Пример:

ts
{
  from: { blockId: 'a', portId: 'output' }, // выходит с блока "a" именно через порт "output"
  to: { blockId: 'b' }, // приходит на границу блока "b" — у b нет массива ports, так что это единственный вариант
}

Типы кривых ​

Задаётся для всех соединений через lines.curve в конфигурации, либо для конкретного соединения через style.curve (побеждает, если задано):

  • bezier (по умолчанию) — плавная кубическая кривая: curvature/curveMinReach/curveMaxReach управляют тем, насколько сильно она выгибается, а curveAngleBlend/curveAngleMaxOffset — насколько угол входа/выхода наклоняется в сторону второго конца вместо того, чтобы оставаться перпендикулярным границе блока.
  • smoothstep — ортогональная трассировка (строго горизонтальные/вертикальные сегменты со скруглёнными углами), учитывающая соседние соединения, которые делят один и тот же порт и сторону: они расходятся веером от общей скруглённой точки ветвления вместо того, чтобы накладываться друг на друга. cornerRadius управляет радиусом изгиба, maxTrunkReach ограничивает, как далеко тянется общий ствол перед разветвлением.
  • straight — обычная прямая линия между двумя посчитанными точками, без какой-либо геометрии кривой.
ts
linker.setConnections([
  { id: 'c1', from: { blockId: 'a' }, to: { blockId: 'b' } }, // bezier — дефолт, style не нужен
  { id: 'c2', from: { blockId: 'a' }, to: { blockId: 'c' }, style: { curve: 'smoothstep' } }, // ортогональная трассировка
  { id: 'c3', from: { blockId: 'a' }, to: { blockId: 'd' }, style: { curve: 'straight' } }, // обычная прямая линия
])

Все поля геометрии кривой, упомянутые выше, находятся в ConnectionStyle — смотрите Стилизация соединений.