VueCraft NPM

Низкоуровневый composable ​

useVisualLinker(container, options?) — низкоуровневый composable, подключённый напрямую к элементу-контейнеру, который вы рендерите сами. Ни директив, ни автообнаружения, ни собственного слоя отрисовки: движок рисует прямо внутри container, а блоки берутся только из реактивной опции blocks (или ваших собственных вызовов setBlocks()).

ts
function useVisualLinker(
  container: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options?: UseVisualLinkerOptions,
): UseVisualLinkerReturn

Создаёт движок при монтировании и автоматически уничтожает его при размонтировании.

Опции ​

У UseVisualLinkerOptions три реактивных поля:

config ​

MaybeRefOrGetter<VisualLinkerConfig> · по умолчанию: {}

Конфигурация диаграммы. Ref, геттер или обычный объект; когда она меняется, движок принимает новую конфигурацию и перерисовывается. Она сливается поверх общей конфигурации приложения, если та есть, и побеждает её.

blocks ​

MaybeRefOrGetter<RefFriendlyBlock[]> · по умолчанию: — (не задано, вызывайте setBlocks() движка вручную)

RefFriendlyBlock — это BlockDescriptor ядра, у которого el (а также dragHandle/dragBounds/target/anchorEl порта) дополнительно принимает Vue ref/getter, а не только обычный элемент или CSS-селектор — блок, у которого el изначально null (его template ref ещё не смонтирован), синхронизируется автоматически, как только разрешится.

connections ​

MaybeRefOrGetter<ConnectionDescriptor[]> · по умолчанию: — (не задано, вызывайте setConnections() движка вручную)

Отслеживается с deep: true — изменение style существующего соединения «на месте» тоже вызывает повторный рендер, не только замена всего массива.

Возвращаемое значение ​

engine ​

ShallowRef<VisualLinker | null>

Инстанс движка (смотрите API движка) — null, пока компонент не смонтируется и container не разрешится в реальный элемент. Используйте это для всего, что не покрывают реактивные опции blocks/connections: addConnection/removeConnection, refresh(), on(), либо для вызова setBlocks/setConnections вручную вместо передачи реактивных опций.

Пример:

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

const containerEl = ref<HTMLElement | null>(null)
const blockAEl = ref<HTMLElement | null>(null)
const blockBEl = ref<HTMLElement | null>(null)

const blocks = computed(() => [
  { id: 'a', el: blockAEl },
  { id: 'b', el: blockBEl },
])
const connections = ref([{ id: 'a-b', from: { blockId: 'a' }, to: { blockId: 'b' } }])

const config = ref({ lines: { curve: 'smoothstep' } }) // измените позже, и диаграмма последует за этим

const { engine } = useVisualLinker(containerEl, { blocks, connections, config })
</script>

<template>
  <div ref="containerEl" style="position: relative">
    <div ref="blockAEl">A</div>
    <div ref="blockBEl">B</div>
  </div>
</template>