Разведение соединений по порту

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

linker.setBlocks([
  { id: 'hub', el: hubEl, portSpread: { gap: 24, padding: 8 } }, // каждая сторона портов этого блока
  { id: 'list', el: listEl, ports: [{ id: 'out', spread: true }] }, // только один порт
])

const linker = createVisualLinker(el, { ports: { spread: true } }) // все блоки; `spread: false` исключает порт

Виртуальные порты центрируются на собственной точке порта, стоят на расстоянии gap px друг от друга и упорядочены по положению другого конца каждого соединения — поэтому линии не пересекаются. При перетаскивании блоков порядок обновляется на лету. Если ряд виртуальных портов не помещается в сторону за вычетом padding с обоих концов, промежуток уменьшается, пока ряд не поместится. На горизонтальных и вертикальных сторонах это работает одинаково.

Где задавать

Три уровня, побеждает ближайший: spread порта, затем portSpread его блока, затем ports.spread конфигурации. false на любом уровне отключает унаследованную настройку.

spread

boolean | { gap?: number; padding?: number } · по умолчанию: — (не задано, берётся от блока)

На порту (PortDescriptor.spread). true включает разведение с настройками по умолчанию, объект настраивает его, false исключает этот порт, даже если его блок разводит соединения.

portSpread

boolean | { gap?: number; padding?: number } · по умолчанию: — (не задано, берётся от ports.spread)

На блоке (BlockDescriptor.portSpread). Действует на каждый порт блока, включая его собственную границу, когда у соединения нет portId.

ports.spread

boolean | { gap?: number; padding?: number } · по умолчанию: — (не задано, соединения сходятся в одной точке)

Значение по умолчанию для всех блоков, в группе ports конфигурации.

Параметры разведения

PortSpreadOptions

gap

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

Расстояние между соседними виртуальными портами, в px.

padding

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

Минимальное расстояние от крайних виртуальных портов до концов стороны (углов блока), в px.

В Vue

• <VisualLinker> принимает те же поля в элементах blocks (portSpread, а у порта spread) и в config.ports.spread.
• v-vl-block принимает portSpread, а v-vl-port принимает spread.
• Без JavaScript отметьте элемент атрибутом data-vl-port-spread (блок) или data-vl-spread (порт): "" или "true" включает, "false" выключает, "24" задаёт промежуток, "24 4" — промежуток и отступ.

См. Разметка блоков и портов. В Nuxt задайте ports.spread в ключе visualLinker.