Установка

Требования

Окружение	Минимальная версия
Node.js	18+
vue	3.3.0+ (только для @macrulez/visual-linker-vue)
nuxt	3.9.0+ или 4.0.0+ (только для @macrulez/visual-linker-nuxt)

У @macrulez/visual-linker-core вообще нет зависимости от фреймворка.

Установка

npm install @macrulez/visual-linker-core

Для Vue 3 — включает все экспорты ядра в виде реэкспорта, так что этого пакета достаточно, отдельно ядро ставить не нужно:

npm install @macrulez/visual-linker-vue

Для Nuxt — оборачивает Vue-пакет и добавляет автоимпорты:

npm install @macrulez/visual-linker-nuxt

Быстрый старт: Vanilla JS

import { createVisualLinker } from '@macrulez/visual-linker-core'

const container = document.querySelector<HTMLElement>('#diagram')!
const linker = createVisualLinker(container, { lines: { curve: 'smoothstep' } })

linker.setBlocks([
  { id: 'a', el: document.querySelector<HTMLElement>('#block-a')! },
  { id: 'b', el: document.querySelector<HTMLElement>('#block-b')! },
])
linker.setConnections([{ id: 'a-b', from: { blockId: 'a' }, to: { blockId: 'b' } }])

Движок сам задаёт container позиционирующий контекст (position: relative, только если его вычисленная позиция была static), чтобы созданный им SVG-слой совпадал с блоками внутри — вручную задавать CSS не нужно.

Быстрый старт: Vue 3

<script setup lang="ts">
import { VisualLinker, vVlBlock } from '@macrulez/visual-linker-vue'

const blocks = [{ id: 'a' }, { id: 'b' }]
const connections = [{ id: 'a-b', from: { blockId: 'a' }, to: { blockId: 'b' } }]
</script>

<template>
  <VisualLinker :connections="connections">
    <div v-for="b in blocks" :key="b.id" v-vl-block="b.id" class="card">{{ b.id }}</div>
  </VisualLinker>
</template>

Чтобы зарегистрировать <VisualLinker> и директивы v-vl-block/v-vl-port глобально, а не импортировать их в каждом компоненте:

import { createApp } from 'vue'
import { VisualLinkerPlugin } from '@macrulez/visual-linker-vue'

createApp(App).use(VisualLinkerPlugin).mount('#app')

Быстрый старт: Nuxt

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

<template>
  <VisualLinker :connections="connections">
    <div v-for="b in blocks" :key="b.id" v-vl-block="b.id" class="card">{{ b.id }}</div>
  </VisualLinker>
</template>

<VisualLinker>, useVisualLinker и директивы v-vl-block/v-vl-port регистрируются модулем — явный импорт не нужен.