VueCraft NPM

Animated Flow ​

A pattern of dashes or dots can travel along a connection, from from towards to — handy for live traffic, pipeline status, or just showing a direction.

ts
linker.setConnections([
  { id: 'a-b', from: { blockId: 'a' }, to: { blockId: 'b' }, style: { animated: true } },
  {
    id: 'a-c',
    from: { blockId: 'a' },
    to: { blockId: 'c' },
    style: { animated: { shape: 'dots', speed: 50, direction: 'forward' } },
  },
])

const linker = createVisualLinker(el, { lines: { animated: true } }) // every line; `animated: false` opts one out

The pattern is drawn as a separate overlay right in front of the line, so it composes with dashed, the visual states and markers. It is pure CSS — nothing runs per frame in JavaScript — and it is switched off for users who prefer reduced motion. The overlay follows its line when the line is raised on hover or selection, and disappears with the connection.

Two looks ​

By default the pattern takes the line's own color and the line underneath is dimmed, so the moving dashes read on any background. This is the "tint" look. Give color and the pattern is drawn in that color over the unchanged line instead; pick one that contrasts with the line.

Turning it on ​

animated ​

boolean | ConnectionFlow · default: — (off, or lines.animated of the configuration)

On a connection's style. true takes the defaults, an object tunes them, false turns off an inherited lines.animated. See Connection Styling.

lines.animated ​

boolean | ConnectionFlow · default: — (off)

The default for every connection, in the lines group of the configuration. A connection can override or opt out of it.

Flow options ​

ConnectionFlow

speed ​

number · default: 60

Pattern speed, in px per second — not per cycle, so long and short lines move at the same pace.

direction ​

'forward' | 'backward' · default: 'forward'

'forward' runs from from to to.

shape ​

'dashes' | 'dots' · default: 'dashes'

Dashes, or round dots.

dash ​

number · default: 8

Dash length, in px. Ignored for dots.

gap ​

number · default: 14 (12 for dots)

Distance between dashes or dots, in px.

color ​

string · default: — (unset, the tint look)

The pattern's color. Set, it is drawn over the unchanged line in this color.

width ​

number · default: the line's width in the tint look; with an explicit color, 60% of it (dots 120%, at least 2.5px)

The stroke width of the pattern, in px.