Routing and Crossings

Two options make smoothstep diagrams tidier: lines can be routed around other blocks instead of through them, and where two lines still cross, one can hop over the other. Both apply to curve: 'smoothstep' only — bezier and straight lines are not affected.

const linker = createVisualLinker(el, {
  lines: {
    curve: 'smoothstep',
    routing: { avoidObstacles: true, padding: 12 }, // route around other blocks, keeping 12px clear
    jumps: true, // hop over crossing lines
  },
})

Routing around blocks

By default a smoothstep line runs straight through any block that happens to lie between its ends. With routing.avoidObstacles it is routed around the other blocks instead — an A* search over the blocks' padded edges that prefers the fewest turns — and is re-routed live while blocks are dragged.

• A line whose plain route is already clear is left exactly as it was.
• The blocks at the line's own ends, and the blocks that contain or sit inside one of them, are not obstacles.
• When no route exists, the plain one is kept, so a line never disappears.
• Only blocks within about 240px of a line are considered. A very long detour around far-away blocks can still cross them.
• The route leaves its start and arrives at its end in a short straight stub along the side's normal. If a block sits closer to a port than the padding and the stub allow, they shrink step by step.
• Corner rounding, group trunks and branches, labels and the layout event work on the routed line exactly as on a plain one.

routing.avoidObstacles

boolean · default: false

In the lines group of the configuration, for every smoothstep connection. A connection overrides it with style.routing.avoidObstacles (false opts one out).

routing.padding

number · default: 12

Clearance kept between a routed line and every other block, in px. A connection can set its own in style.routing.padding.

Hops at crossings

Where a line crosses another connection's line, it makes a small semicircular hop, as on electrical schematics. The line with the horizontal stretch hops over the vertical one.

These are left alone:

• Lines that run along each other — a shared trunk is not a crossing.
• T-junctions, where one line ends on another.
• Crossings too close to a bend, where the arc wouldn't fit.
• A second arc closer than the width of one arc.

A line only hops when its own jumps is on, but any line can be hopped over, whatever its own setting.

jumps

boolean | { radius?: number } · default: false

In the lines group of the configuration. true takes the default radius of 5 px, an object sets it. A connection overrides it with style.jumps — false opts one out.

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

linker.setConnections([
  { id: 'a-b', from, to, style: { curve: 'smoothstep', jumps: false } }, // this one never hops
])

Using both

Routing around blocks and hops work together: first the lines are routed, then the crossings between the routed lines are found. The hit area and the animated flow follow the same path, hops included.

In Vue pass them through config — <VisualLinker :config="{ lines: { routing: { avoidObstacles: true }, jumps: true } }"> — or, in Nuxt, under the lines key of visualLinker.