Маршрутизация и пересечения

Две опции делают диаграммы smoothstep аккуратнее: линии можно прокладывать в обход других блоков вместо того, чтобы вести сквозь них, а там, где две линии всё же пересекаются, одна может перепрыгнуть другую. Обе опции действуют только на curve: 'smoothstep' — линии bezier и straight они не затрагивают.

const linker = createVisualLinker(el, {
  lines: {
    curve: 'smoothstep',
    routing: { avoidObstacles: true, padding: 12 }, // прокладывать в обход других блоков, держа 12px зазора
    jumps: true, // перепрыгивать через пересекаемые линии
  },
})

Маршрутизация в обход блоков

По умолчанию линия smoothstep идёт напрямик через любой блок, оказавшийся между её концами. С routing.avoidObstacles она прокладывается в обход других блоков — это поиск A* по расширенным краям блоков, который предпочитает наименьшее число поворотов, — и перестраивается на лету при перетаскивании блоков.

• Линия, у которой обычный маршрут уже свободен, остаётся ровно такой, какой была.
• Блоки на концах самой линии, а также блоки, которые содержат один из них или лежат внутри него, препятствиями не считаются.
• Если маршрута нет, остаётся обычный, поэтому линия не пропадает.
• Учитываются только блоки в пределах примерно 240px от линии. Очень длинный обход вокруг далёких блоков всё же может их пересечь.
• Маршрут выходит из начала и приходит в конец по короткому прямому отрезку вдоль нормали стороны. Если блок стоит к порту ближе, чем позволяют зазор и отрезок, они сокращаются ступенями.
• Скругление углов, стволы и ответвления групп, подписи и событие layout работают на проложенной линии так же, как на обычной.

routing.avoidObstacles

boolean · по умолчанию: false

В группе lines конфигурации, для каждого соединения smoothstep. Соединение переопределяет его через style.routing.avoidObstacles (false исключает одно соединение).

routing.padding

number · по умолчанию: 12

Зазор между проложенной линией и каждым другим блоком, в px. Соединение может задать свой в style.routing.padding.

Мостики на пересечениях

Там, где линия пересекает линию другого соединения, она делает небольшую полукруглую дугу — как на электрических схемах. Через вертикальный отрезок перепрыгивает линия с горизонтальным участком.

Не трогаются:

• Линии, идущие вдоль друг друга: общий ствол пересечением не считается.
• Т-образные соединения, где одна линия заканчивается на другой.
• Пересечения слишком близко к повороту, где дуга не поместилась бы.
• Вторая дуга ближе, чем ширина одной дуги.

Линия прыгает, только если включён её собственный jumps, но через любую линию можно перепрыгнуть независимо от её настройки.

jumps

boolean | { radius?: number } · по умолчанию: false

В группе lines конфигурации. true берёт радиус по умолчанию — 5 px, объект задаёт его. Соединение переопределяет опцию через style.jumps — false исключает одно соединение.

createVisualLinker(el, { lines: { jumps: { radius: 8 } } })

linker.setConnections([
  { id: 'a-b', from, to, style: { curve: 'smoothstep', jumps: false } }, // это соединение никогда не прыгает
])

Совместное использование

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

В Vue передавайте их через config — <VisualLinker :config="{ lines: { routing: { avoidObstacles: true }, jumps: true } }"> — а в Nuxt задавайте в ключе lines у visualLinker.