Vue.js рендер

Цей гайд є розширенням гайду Базовий редактор і містить інструкції щодо використання rete-vue-plugin замість rete-react-plugin

Базовий Кастомізація Контроли Плагін Vue.js Контекстне меню Міні-карта Зміна маршруту

Цей плагін пропонує класичний пресет, який містить візуальні компоненти для вузлів, з’єднань, сокетів і елементів керування введенням.

Підтримує обидві версії Vue.js: 2 і 3

Ви можете використовувати цей плагін у будь-якому додатку, незалежно від стеку (React.js, Vue.js, Angular). Однак для використання SFC потрібен бандлер із встановленим відповідним компілятором шаблонів, що є окремою темою для обговорення.

Встановити залежності

bash

npm i rete-vue-plugin rete-render-utils

Підключення планіга

import { AreaPlugin } from "rete-area-plugin";
import { VuePlugin, Presets, VueArea2D } from "rete-vue-plugin";

type AreaExtra = VueArea2D<Schemes>;

// ....

const render = new VuePlugin<Schemes, AreaExtra>();

render.addPreset(Presets.classic.setup());

area.use(render);

Перегляньте сторінку Vue, щоб отримати приклад використання цього рендер плагіна.

Використання Vue.js 2

Щоб використовувати плагін із Vue 2, додайте /vue2 до імпорту.

import { VuePlugin, Presets, VueArea2D } from "rete-vue-plugin/vue2";

Контроли

Цей плагін містить вбудовані елементи керування, які відображаються на основі таких об’єктів:

ClassicPreset.InputControl як <input type="number" /> або <input type="text" />

Просто додайте контрол до вузла

node.addControl('my-control', new ClassicPreset.InputControl("number", {
  initial: 0,
  readonly: false,
  change(value) { }
}))

Якщо ви хочете додати різні типи контролів, ви можете повернути необхідний функціональний компонент в обробнику control властивості customize.

tsx

import MyButton from './MyButton.vue'

render.addPreset(Presets.classic.setup({
  customize: {
    control(context) {
      if (context.payload.isButton) {
        return MyButton
      }
      if (context.payload instanceof ClassicPreset.InputControl) { // не забудьте явно вказати вбудований Presets.classic.Control
        return Presets.classic.Control;
      }
    }
  }
}));

node.addControl('my-button', { isButton: true, label: 'Click', onClick() {} })

MyButton.vue

vue

<template>
<button
  @pointerdown.stop=""
  @click="data.onClick"
>{{data.label}}</button>
</template>

Це спрощена версія, яка підходить для ознайомлення. Для проектів рекомендується дотримуватися підходу, продемонстрованого в прикладі

Обов’язково вкажіть @pointerdown.stop, щоб запобігти перехопленню областю таких подій, як click.

Кастомізація

Подібно до підходу, описаному вище, ви можете замінити компоненти вузла, з’єднання або сокета.

Кастомізація всіх вузлів

Якщо ви хочете повністю змінити структуру вузла, ви можете реалізувати власний компонент, подібний до Node.vue із класичного пресету

import CustomNode from './CustomNode.vue'

render.addPreset(Presets.classic.setup({
  customize: {
    node() {
      return CustomNode
    }
  }
}))

Реалізація CustomNode доступна у файлі CustomNode.vue прикладу Кастомізація для Vue.js.

Специфічні вузли

Ви можете додати умову для застосування цього компонента лише до певних вузлів.

render.addPreset(Presets.classic.setup({
  customize: {
    node(context) {
      if (context.payload.label === "Custom") {
        return CustomNode;
      }
      return Presets.classic.Node;
    }
  }
}))

await editor.addNode(new ClassicPreset.Node('White'))

Кастомізація з'єднань

Використовуйте Connection.vue як відправну точку з presets/classic/components директорії вихідного коду плагіна.

import CustomConnection from './CustomConnection.vue'

render.addPreset(Presets.classic.setup({
  customize: {
    connection() {
      return CustomConnection
    }
  }
}))

Кастомізація сокета

Використовуйте Socket.vue як відправну точку з presets/classic/components директорії вихідного коду плагіна.

import CustomSocket from './CustomSocket.vue'

render.addPreset(Presets.classic.setup({
  customize: {
    socket() {
      return CustomSocket
    }
  }
}))

Щоб кастомізувати контекстне меню для цього рендерінг плагіна, можна перевизначати стилі за допомогою селекторів (і важливо враховувати специфіку селекторів у CSS)

scss

[rete-context-menu] {
  width: 320px !important;
  .block:first-child input {
    background: grey;
  }
  .block.item {
    background: grey;
  }
}

Використання Vue.js плагінів

Оскільки rete-vue-plugin створює незалежний екземпляр Vue.js для вузлів, сокетів, контролів тощо, він не успадковує плагіни з основного екземпляра Vue вашого проекту. Щоб заповнити цей пробіл, плагін пропонує рішення: впровадження власного екземпляра додатку Vue. Ця можливість забезпечує доступність будь-яких плагінів Vue або глобальних компонентів, які ви бажаєте використовувати в компонентах Vue, специфічних для Rete, тим самим забезпечуючи безперешкодне спільне використання між вашим додатком Vue.js та редактором Rete.js.

Vue.js 3

Наступний приклад демонструє, як налаштувати власний екземпляр Vue.js 3:

import { Presets, VuePlugin } from "rete-vue-plugin";
import { createApp } from "vue";

const render = new VuePlugin<Schemes, AreaExtra>({
  setup(context) {
    const app = createApp(context);

    app.use(yourPlugin);

    return app;
  },
});

де yourPlugin це екземпляр будь-якого плагіна (наприклад, Vuetify або Vue I18N)

Vue.js 2

Оскільки ініціалізація для Vue.js 2 трохи відрізняється, давайте розглянемо наступний приклад:

import { Presets, VuePlugin } from "rete-vue-plugin";
import Vue from "vue";

const render = new VuePlugin<Schemes, AreaExtra>({
  setup(context) {
    const app = new Vue({ ...context, yourPlugin });

    return app;
  },
});