VueCraft NPM

Анимированный поток ​

По соединению может бежать узор из штрихов или точек — от from к to. Это удобно для живого трафика, статуса пайплайна или просто чтобы показать направление.

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 } }) // все линии; `animated: false` исключает одну

Узор рисуется отдельным оверлеем прямо перед линией, поэтому он сочетается с dashed, визуальными состояниями и маркерами. Это чистый CSS — на каждом кадре JavaScript ничего не делает, — и он отключается для пользователей, которые предпочитают сниженное движение. Оверлей остаётся рядом со своей линией, когда линия поднимается при наведении или выделении, и исчезает вместе с соединением.

Два вида ​

По умолчанию узор берёт цвет самой линии, а линия под ним притушена, поэтому бегущие штрихи читаются на любом фоне. Это вид «тонировка». Если задать color, узор рисуется этим цветом поверх нетронутой линии; выбирайте цвет, контрастный линии.

Как включить ​

animated ​

boolean | ConnectionFlow · по умолчанию: — (выключено или lines.animated конфигурации)

В style соединения. true берёт значения по умолчанию, объект настраивает их, false отключает унаследованный lines.animated. См. Стилизация соединений.

lines.animated ​

boolean | ConnectionFlow · по умолчанию: — (выключено)

Значение по умолчанию для каждого соединения, в группе lines конфигурации. Соединение может его переопределить или отказаться.

Опции потока ​

ConnectionFlow

speed ​

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

Скорость узора в px в секунду — не за цикл, поэтому длинные и короткие линии движутся одинаково.

direction ​

'forward' | 'backward' · по умолчанию: 'forward'

'forward' идёт от from к to.

shape ​

'dashes' | 'dots' · по умолчанию: 'dashes'

Штрихи или круглые точки.

dash ​

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

Длина штриха в px. Для точек игнорируется.

gap ​

number · по умолчанию: 14 (12 для точек)

Расстояние между штрихами или точками в px.

color ​

string · по умолчанию: — (не задано, вид «тонировка»)

Цвет узора. Если задан, узор рисуется этим цветом поверх нетронутой линии.

width ​

number · по умолчанию: ширина линии в виде «тонировка»; с явным color — 60% от неё (у точек 120%, не меньше 2.5px)

Толщина штриха узора в px.