Svelte рендер

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

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

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

Підтримує останні версії Svelte: 5, 4 та 3

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

bash

npm i rete-svelte-plugin rete-render-utils sass

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

import { AreaPlugin } from "rete-area-plugin";
import { SveltePlugin, Presets, SvelteArea2D } from "rete-svelte-plugin/5"; // або "rete-svelte-plugin" для старіших версій

type AreaExtra = SvelteArea2D<Schemes>;

// ....

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

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

area.use(render);

Зверніть увагу, що цей плагін призначений лише для використання на стороні клієнта. Таким чином, модулі, які використовують його у ваших модулях *.svelte, мають бути динамічно імпортовані.

onMount(async () => {
  const { createEditor } = await import("./editor");
})

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

Контроли

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

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.svelte'

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.svelte

svelte

<button
  on:pointerdown|stopPropagation={() => null}
  on:click="data.onClick"
>
  {data.label}
</button>

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

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

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

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

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

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

import CustomNode from './CustomNode.svelte'

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

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

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

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

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.svelte як відправну точку з presets/classic/components директорії вихідного коду плагіна.

import CustomConnection from './CustomConnection.svelte'

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

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

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

import CustomSocket from './CustomSocket.svelte'

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;
  }
}

Інші пресети

Перегляньте повний результат на сторінці прикладу Кастомізація для Svelte.

Документація