VueCraft NPM

Стилизация соединений ​

Всё, что определяет внешний вид одного соединения, лежит в его style (ConnectionStyle). style имеет ту же форму, что и группа lines конфигурации, плюс поле markers для концов. Поле, которое не задано, берётся из группы lines конфигурации, затем из темы, затем из встроенного значения.

ts
linker.setConnections([
  {
    id: 'a-b',
    from: { blockId: 'a' },
    to: { blockId: 'b' },
    style: {
      color: '#6366f1',
      width: 2,
      hover: { width: 3 },
      markers: { end: { shape: 'arrow', size: 8 } },
    },
  },
])

Стилизация соединения ​

ConnectionStyle

curve ​

'bezier' | 'straight' | 'smoothstep' · по умолчанию: берётся из lines.curve ('bezier')

Что делает каждый тип кривой, смотрите на странице Соединения.

color ​

string · по умолчанию: берётся из lines.color, затем из line темы ('#2e8b57')

width ​

number · по умолчанию: берётся из lines.width (1.5)

dashed ​

boolean · по умолчанию: берётся из lines.dashed (false)

opacity ​

number, от 0 до 1 · по умолчанию: берётся из lines.opacity (1)

Прозрачность линии. Маркеры без собственной прозрачности бледнеют вместе с ней.

highlight, hover, selected, focus ​

{ color?; width?; dashed?; opacity? } · по умолчанию: берётся из той же корзины lines

Поля, которые меняются, пока соединение находится в этом состоянии; каждое возвращается к значению ниже, если не задано. Что означают четыре состояния и как они складываются, смотрите на странице Визуальные состояния. hover и highlight действуют, только пока включены interaction.hover и interaction.highlight.

bezier ​

{ curvature?; minReach?; maxReach?; angleBlend?; angleMaxOffset? } · по умолчанию: берётся из lines.bezier

Форма кривой bezier — curvature (0.5), minReach (24), maxReach (160), angleBlend (0.55) и angleMaxOffset (30, в градусах). Каждое поле описано в Структуре конфигурации. Только для curve: 'bezier'.

smoothstep ​

{ cornerRadius?; maxTrunkReach? } · по умолчанию: берётся из lines.smoothstep

Форма линии smoothstep — cornerRadius (8) скругляет изгибы и точку ветвления, где соединения с общим портом отделяются от ствола, а maxTrunkReach (48) ограничивает, насколько далеко идёт такой ствол. Если у соседей разные maxTrunkReach, группа использует наименьшее значение. Только для curve: 'smoothstep'.

routing ​

{ avoidObstacles?; padding? } · по умолчанию: берётся из lines.routing

Прокладывает это соединение smoothstep в обход других блоков; avoidObstacles: false исключает его из настройки, сделанной для всех линий. См. Маршрутизация и пересечения.

jumps ​

boolean | { radius?: number } · по умолчанию: берётся из lines.jumps

Заставляет это соединение smoothstep перепрыгивать через линии, которые оно пересекает; false исключает его. См. Маршрутизация и пересечения.

animated ​

boolean | ConnectionFlow · по умолчанию: берётся из lines.animated (выключено)

Пускает вдоль линии узор из штрихов или точек, от from к to. true берёт значения по умолчанию, объект настраивает их (speed, direction, shape, dash, gap, color, width), false отключает настройку, сделанную для всех линий. См. Анимированный поток.

markers ​

{ start?: MarkerInput; end?: MarkerInput } · по умолчанию: берётся из markers.start и markers.end конфигурации, иначе встроенная точка порта

Маркеры на двух концах линии. MarkerInput — это false, название формы (сокращение для { shape }) или конфигурация маркера. false убирает даже встроенную точку порта на этом конце, оставляя голую точку, — для случая, когда единственным, что там рисуется, должен быть слот Vue #marker или ничего. Конфигурация маркера, заданная здесь, сливается по полям с маркером того же конца из конфигурации. 'arrow' на конце показывает направление соединения. Поля описаны ниже в разделе про формы маркеров.

Пример — все поля сразу:

ts
linker.setConnections([
  {
    id: 'a-b', // собственный id этого соединения
    from: { blockId: 'a' }, // начинается на границе блока "a"
    to: { blockId: 'b' }, // заканчивается на границе блока "b"
    style: {
      curve: 'smoothstep', // ортогональная трассировка вместо дефолтного bezier
      color: '#6366f1', // индиго вместо зелёного по умолчанию
      width: 2, // чуть толще дефолтных 1.5px
      dashed: false, // сплошная линия
      opacity: 0.8, // в покое чуть приглушена
      bezier: { curvature: 0.6, minReach: 24, maxReach: 160, angleBlend: 0.55, angleMaxOffset: 30 }, // здесь не действует, curve равен 'smoothstep'
      smoothstep: { cornerRadius: 12, maxTrunkReach: 60 }, // более круглые изгибы, чуть длиннее общий ствол
      routing: { avoidObstacles: true, padding: 12 }, // обходить другие блоки
      jumps: { radius: 6 }, // перепрыгивать через линии, которые это соединение пересекает
      animated: { shape: 'dashes', speed: 60, direction: 'forward' }, // узор бежит от a к b
      highlight: { width: 2.5 }, // наведённый блок слегка подсвечивает эту линию
      hover: { color: '#312e81', width: 3, opacity: 1 }, // под курсором темнее, толще и полностью непрозрачна
      selected: { color: '#1f6feb' }, // нужен interaction.selectable
      focus: { width: 4 }, // клавиатурный фокус
      markers: {
        start: false, // ни точки, ни маркера на этом конце
        end: { shape: 'arrow', size: 8, hover: { size: 11 } }, // более крупная стрелка, которая при наведении растёт ещё сильнее
      },
    },
  },
])

Формы маркеров ​

MarkerConfig

Полная форма маркера: используется для markers.start и markers.end здесь и в группе markers конфигурации. Голое имя формы (например, 'arrow') — это сокращение для { shape: 'arrow' }.

shape ​

'circle' | 'square' | 'diamond' | 'arrow' · по умолчанию: 'circle'

Игнорируется, если задан svg.

size ​

number · по умолчанию: размер для этой формы из markers.sizes (6)

Размер маркера как множитель текущей толщины линии соединения — так он масштабируется вместе с более толстой или подсвеченной линией.

color ​

string · по умолчанию: берётся из цвета линии соединения на данный момент

Цвет заливки для встроенной формы. Игнорируется для 'arrow' (заливки нет — см. strokeColor).

strokeColor ​

string · по умолчанию: — (без обводки)

Цвет обводки для встроенных форм 'circle'/'square'/'diamond'. Не влияет на 'arrow', который уже использует color как единственный штрих.

strokeWidth ​

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

Толщина обводки в собственных единицах viewBox маркера. Игнорируется, если strokeColor не задан.

opacity ​

number, от 0 до 1 · по умолчанию: берётся из opacity соединения

className ​

string · по умолчанию: — (не задано)

CSS-класс, который добавляется к корневому SVG-элементу маркера, для полной стилизации через внешний CSS.

svg ​

string · по умолчанию: — (не задано)

Сырая внутренняя SVG-разметка для полностью своего маркера (переопределяет shape), рисуется во viewBox 0 0 20 20 с центром в конечной точке соединения.

Вставляется как есть — передавайте только разметку, которой доверяете, никогда не пропускайте через это непроверенный пользовательский ввод.

orient ​

'auto' | 'fixed' · по умолчанию: зависит от shape ('auto' для встроенной 'arrow', иначе 'fixed')

'auto' поворачивает маркер вслед за направлением линии; 'fixed' оставляет его прямым. Всегда 'auto', когда задан arrow.

arrow ​

boolean | MarkerArrowConfig · по умолчанию: — (без стрелки)

Дополнительно рисует на линии прямо перед фигурой стрелку, кончик которой упирается ровно во внешний край фигуры (вместе с обводкой) — точка порта и стрелка направления в одном маркере вместо двух перекрывающихся. true использует значения по умолчанию ниже. Игнорируется, если shape сам равен 'arrow'.

MarkerArrowConfig

color ​

string · по умолчанию: берётся из цвета линии соединения (а не из заливки фигуры)

gap ​

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

Дополнительный зазор между кончиком стрелки и краем фигуры в 20-единичном viewBox маркера. Для собственного svg-маркера, край которого измерить нельзя, это расстояние от самой конечной точки.

highlight, hover, selected, focus ​

Partial<MarkerConfig> · по умолчанию: — (не задано, маркер выглядит одинаково во всех состояниях)

Поля, которые меняются, пока соединение маркера находится в этом состоянии. Маркер может сменить shape, size, цвета или целый собственный svg. См. Визуальные состояния.

Пример — фигура, которая меняется при наведении и выделении:

ts
markers: {
  end: {
    shape: 'circle',
    size: 6,
    hover: { shape: 'diamond', size: 10, strokeColor: '#ffffff', strokeWidth: 1 }, // под курсором — ромб с обводкой
    selected: { svg: '<path d="M4,4 L16,10 L4,16 L8,10 Z" fill="#1f6feb" />' }, // после выделения — собственная фигура
  },
}

Пример — фигура со стрелкой:

ts
markers: {
  end: {
    shape: 'circle', // точка остаётся на конечной точке
    color: '#ffffff', // белая заливка
    strokeColor: '#6366f1', // индиго-обводка — кончик стрелки упирается в её внешний край
    strokeWidth: 2,
    arrow: { color: '#e0526c', gap: 1 }, // свой цвет, 1 единица viewBox воздуха перед обводкой
  },
}

Пример — все поля сразу:

ts
markers: {
  end: {
    shape: 'diamond', // одна из 'circle' | 'square' | 'diamond' | 'arrow' — игнорируется, если задан svg
    size: 8, // крупнее дефолтных 6× толщины линии
    color: '#f59e0b', // янтарная заливка вместо цвета линии
    strokeColor: '#78350f', // тёмно-янтарная обводка вокруг фигуры
    strokeWidth: 1.5, // толщина обводки в собственных единицах viewBox маркера
    opacity: 0.9, // чуть прозрачнее
    className: 'vl-marker--priority', // зацепка для дополнительного CSS, который вы контролируете снаружи
    orient: 'fixed', // остаётся прямым вместо поворота вслед за направлением линии
  },
}

Если вместо shape задать svg: '<path d="..." />', эта разметка рисуется напрямую и полностью переопределяет shape и встроенные формы — полезно для маркера, который не покрывает ни одна встроенная форма (своя иконка, логотип компании).