VueCraft NPM

Port Spreading ​

By default every connection attached to the same port side meets at one point. Port spreading gives each of them its own virtual port along that side, so a block with many connections stays readable.

ts
linker.setBlocks([
  { id: 'hub', el: hubEl, portSpread: { gap: 24, padding: 8 } }, // every port side of this block
  { id: 'list', el: listEl, ports: [{ id: 'out', spread: true }] }, // one port only
])

const linker = createVisualLinker(el, { ports: { spread: true } }) // every block; `spread: false` opts a port out

The virtual ports are centered on the port's own point, gap px apart, and ordered by where each connection's other end is — so the lines don't cross. They re-order live as blocks are dragged. If the row of virtual ports wouldn't fit inside the side minus padding at both ends, the gap shrinks until it does. It works the same on horizontal and vertical sides.

Where to set it ​

Three levels, the closest one wins: a port's spread, then its block's portSpread, then the configuration's ports.spread. false at any level switches an inherited setting off.

spread ​

boolean | { gap?: number; padding?: number } · default: — (unset, follows the block)

On a port (PortDescriptor.spread). true spreads with the defaults, an object tunes them, false opts this port out even when its block spreads.

portSpread ​

boolean | { gap?: number; padding?: number } · default: — (unset, follows ports.spread)

On a block (BlockDescriptor.portSpread). Applies to every port of the block, including its own border when a connection has no portId.

ports.spread ​

boolean | { gap?: number; padding?: number } · default: — (unset, connections share one point)

The default for every block, in the ports group of the configuration.

Spread options ​

PortSpreadOptions

gap ​

number · default: 16

Distance between neighbouring virtual ports, in px.

padding ​

number · default: 8

Minimum distance from the outermost virtual ports to the ends of the side (the block's corners), in px.

In Vue ​

  • <VisualLinker> takes the same fields on its blocks entries (portSpread, and spread on a port) and in config.ports.spread.
  • v-vl-block accepts portSpread, and v-vl-port accepts spread.
  • Without JavaScript, mark an element with data-vl-port-spread (a block) or data-vl-spread (a port): "" or "true" turns it on, "false" off, "24" sets the gap, "24 4" the gap and the padding.

See Marking Blocks & Ports. In Nuxt, set ports.spread under the visualLinker key.