VueCraft NPM

Общая конфигурация ​

Конфигурация, общая для всех диаграмм приложения Vue или проекта Nuxt: задайте тему и внешний вид один раз, и каждый <VisualLinker> и useVisualLinker() начнёт с неё. Это реактивный объект, который принадлежит приложению: глобального состояния нет, поэтому несколько приложений на одной странице не мешают друг другу, а изменение конфигурации обновляет все диаграммы сразу.

Как её предоставить ​

С плагином передайте конфигурацию опцией:

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

createApp(App)
  .use(VisualLinkerPlugin, { config: { theme: darkTheme, lines: { curve: 'smoothstep' } } })
  .mount('#app')

Плагин заодно регистрирует <VisualLinker> и две директивы. С модулем Nuxt ключ visualLinker в nuxt.config.ts становится общей конфигурацией без единой строки кода.

Как ею пользоваться ​

Каждая диаграмма сливает общую конфигурацию под своим config по полям, и побеждает собственный config. Диаграмма, которая задаёт только lines.width, всё равно получает общую тему и все остальные настройки.

vue
<template>
  <VisualLinker :connections="connections" :config="{ lines: { width: 3 } }">…</VisualLinker>
</template>

Переключение темы ​

useVisualLinkerConfig() возвращает саму общую конфигурацию — реактивный объект. Присвойте ему значение, и все диаграммы на странице перерисуются:

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

const shared = useVisualLinkerConfig()

function toggleTheme(dark: boolean) {
  shared.theme = dark ? darkTheme : lightTheme
}

Так можно изменить любое поле — shared.lines = { ...shared.lines, curve: 'straight' }, — а поле удаляется через delete shared.theme.

Конфигурация для поддерева ​

provideVisualLinkerConfig(initial?) предоставляет конфигурацию компонентам ниже того, что её вызывает. Они используют её вместо конфигурации уровня приложения; с ней она не сливается.

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

const sidebarConfig = provideVisualLinkerConfig({ theme: darkTheme })

Функция возвращает реактивный объект, поэтому поддерево можно менять так же.

Функции ​

  • VisualLinkerPlugin — app.use(plugin, { config? }). Предоставляет приложению общую конфигурацию и регистрирует компонент и директивы.
  • useVisualLinkerConfig() — возвращает действующую общую конфигурацию. Если её никто не предоставляет, бросает ошибку с пояснением, чего не хватает: установите плагин или вызовите provideVisualLinkerConfig().
  • provideVisualLinkerConfig(initial?) — предоставляет поддереву новую реактивную конфигурацию и возвращает её. Вызывайте в setup().
  • installVisualLinkerConfig(app, initial?) — то же для всего приложения, для интеграций, которые устанавливают её сами, как модуль Nuxt.
  • createSharedConfig(initial?) — создаёт реактивный объект, не предоставляя его.
  • VISUAL_LINKER_CONFIG_KEY — ключ внедрения, чтобы предоставить конфигурацию вручную (app.provide(VISUAL_LINKER_CONFIG_KEY, config)).

Компоненты, над которыми нет провайдера, используют только свой config.