VueCraft NPM

Модуль Nuxt ​

Оборачивает @macrulez/visual-linker-vue для Nuxt — автоимпортирует <VisualLinker> и useVisualLinker, регистрирует директивы v-vl-block/v-vl-port и делает ключ visualLinker в nuxt.config.ts общей конфигурацией всех диаграмм проекта.

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/visual-linker-nuxt'],

  visualLinker: {
    theme: { line: '#6366f1', lineHover: '#312e81' },
    lines: { curve: 'smoothstep', jumps: true },
    markers: { end: { shape: 'arrow', hover: { size: 10 } } },
    blocks: { draggable: true, drag: { grid: 20 } },
  },
})

Опции модуля — это в точности конфигурация движка; чтобы менять её, пока приложение работает, см. Общая конфигурация.

Конфигурация ​

Ключ visualLinker — это VisualLinkerConfig, тот же объект, который принимают createVisualLinker() и проп config у <VisualLinker>, поэтому отдельного списка имён, свойственных только модулю, учить не нужно. Его группы:

  • theme — токены цветов, которые записываются в CSS-переменные. См. Темы.
  • lines — кривая, цвет, толщина, штриховка, прозрачность, визуальные состояния, bezier, smoothstep, routing, jumps, animated.
  • markers — маркеры start и end с их состояниями и размеры sizes по формам.
  • ports — встроенная точка (show, radius, fill, stroke, состояния), side и offset по умолчанию, а также spread.
  • labels — вид подписей соединений, которые рисует библиотека, с состояниями.
  • blocks — draggable и drag: { grid, bounds }.
  • interaction — hover, highlight, selectable и clipToScrollParents.

Каждая группа и каждое поле описаны в Структуре конфигурации. Всё необязательно, и модуль не зашивает собственных значений по умолчанию: пропущенное поле берёт встроенное значение движка, так что будущее изменение дефолта ядра никогда не будет незаметно перекрыто слоем Nuxt.

Опции передаются через runtimeConfig.public.visualLinker, поэтому должны быть простыми JSON-данными: строки, числа, булевы значения, объекты и массивы. Для blocks.drag.bounds это означает 'container' или объект отступов, а не HTMLElement — элемент по-прежнему можно передать одной диаграмме через её собственный config или блок.

Пример — все группы сразу:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/visual-linker-nuxt'],

  visualLinker: {
    theme: { line: '#6366f1', lineHover: '#312e81', portFill: '#ffffff' }, // цвета в одном месте
    lines: {
      curve: 'smoothstep', // ортогональная трассировка для каждого соединения
      width: 2,
      hover: { width: 3 }, // под курсором толще
      smoothstep: { cornerRadius: 10 }, // более круглые изгибы, чем дефолтные 8px
      routing: { avoidObstacles: true, padding: 12 }, // обходить другие блоки
      jumps: { radius: 6 }, // перепрыгивать через пересекаемые линии
      animated: { shape: 'dots', speed: 50 }, // по каждой линии бежит точечный узор
    },
    markers: {
      end: { shape: 'arrow', hover: { size: 10 } }, // стрелка, которая растёт при наведении
      sizes: { arrow: 8 }, // стрелки чуть крупнее остальных форм
    },
    ports: { radius: 5, hover: { radius: 7 }, spread: { gap: 16, padding: 8 } }, // более крупные точки, разведение по общей стороне
    labels: { background: '#ffffff', fontSize: 12 }, // «таблетка» за текстом подписи
    blocks: { draggable: true, drag: { grid: 20, bounds: 'container' } }, // любой блок можно перетаскивать
    interaction: { hover: true, highlight: true, selectable: true, clipToScrollParents: 'pin' }, // линии реагируют и доступны с клавиатуры
  },
})

Изменение во время работы ​

Модуль устанавливает конфигурацию как общую конфигурацию приложения — реактивный объект, — поэтому любой компонент может её изменить, и все диаграммы последуют за ней, например чтобы переключить тему:

ts
import { darkTheme, useVisualLinkerConfig } from '@macrulez/visual-linker-vue'

const shared = useVisualLinkerConfig()
shared.theme = darkTheme

Собственный config места вызова по-прежнему побеждает её, по полям.

Регистрация ​

Модуль автоматически:

  • Регистрирует <VisualLinker> как глобальный компонент
  • Автоимпортирует useVisualLinker
  • Регистрирует директивы v-vl-block/v-vl-port в универсальном плагине — в том числе на сервере, так что атрибуты обнаружения data-vl-* уже есть в отрендеренном сервером HTML
  • Устанавливает конфигурацию visualLinker в том же плагине как общую конфигурацию для каждого вызова <VisualLinker>/useVisualLinker(), которые сливают её под своим config

<VisualLinker> и useVisualLinker уже безопасны для SSR на сервере — движок и его слой рисования существуют только на клиенте, после монтирования. Оборачивать что-либо в <ClientOnly> нигде не нужно.