VueCraft NPM

Подписи соединений ​

У соединения может быть любое число подписей в любом месте линии. Подпись с text рисует сама библиотека, а подпись без него — просто позиция для содержимого, которое вы рендерите сами.

ts
linker.setConnections([
  {
    id: 'a-b',
    from: { blockId: 'a' },
    to: { blockId: 'b' },
    labels: [
      { id: 'method', position: 'start', text: 'POST' },
      { id: 'name', position: 0.5, text: 'идёт вдоль линии', rotate: true, offset: -14 },
      { id: 'custom', position: 'end' }, // без text: только позиция для вашего содержимого
    ],
  },
])

Подпись, которую рисует библиотека, — это SVG-«таблетка»: скруглённый прямоугольник по размеру текста с текстом сверху. Без labels слот Vue #connection-label работает как раньше: одна подпись посередине линии.

Описание подписи ​

ConnectionLabel

id ​

string

Уникален в пределах соединения.

position ​

'start' | 'middle' | 'end' | number

Где на линии. 'start' и 'end' стоят на небольшом расстоянии (24px, не больше половины линии) от своего конца, чтобы не закрывать маркер. 'middle' — посередине. Число — доля длины линии, 0..1.

offset ​

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

Расстояние от линии, в px, вдоль её нормали. Положительное значение — справа по ходу линии, то есть под линией, идущей слева направо.

text ​

string · по умолчанию: — (не задано, подпись вы рендерите сами)

Текст подписи, которую рисует библиотека.

className ​

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

CSS-класс, который добавляется к <g> подписи, нарисованной библиотекой.

rotate ​

boolean · по умолчанию: false

Поворачивает подпись вдоль линии. Она всегда остаётся «вверх головой» — никогда не переворачивается.

Позиции на линии ​

Точка ищется по длине вдоль настоящего пути: по кривой для bezier, по маршруту для smoothstep (меряется до углов, до скругления). Рассчитанная позиция каждой подписи приходит в ConnectionLayout.labels события layout, по одному LabelLayout на подпись:

  • id — id подписи.
  • point — где её центрировать, с уже применённым offset.
  • angle — направление хода линии в этой точке, в градусах.
  • rotation — угол, на который повернуть подпись: «прямая» версия angle при rotate, иначе 0.
  • text, className — копируются из подписи.

Библиотека не защищает подписи от наложения друг на друга: подписи, расположенные рядом, вы разносите сами.

Оформление подписи, нарисованной библиотекой ​

Вид всех подписей, которые рисует библиотека, задаётся в группе labels конфигурации: background, border, color, fontSize, paddingX, paddingY и opacity, и каждое поле доступно также в состояниях highlight, hover, selected и focus соединения подписи. Цвета по умолчанию берутся из токенов темы labelBackground, labelBorder и labelText (--vl-label-bg, --vl-label-border, --vl-label-color).

Для остального дайте подписи className и оформите части: .vl-label-bg для «таблетки» и .vl-label-text для текста. Все подписи экземпляра лежат в одной группе, которая всегда рисуется последней, поэтому линия никогда не закрывает подпись.

Подписи в Vue ​

#connection-label вызывается по одному разу на каждую подпись без text с { connection, label, point, angle, rotation, from, to }; подписи с text рисует движок. Для соединения без labels слот вызывается один раз, посередине, как раньше. См. Компонент VisualLinker.

vue
<VisualLinker :connections="connections">
  <template #connection-label="{ label }">
    <span class="badge">{{ label?.id }}</span>
  </template>
</VisualLinker>