Базовий редактор

Цей гайд містить rete-react-plugin. Ви можете використовувати його в будь-якому додатку, незалежно від фреймворку, який ви використовуєте (React.js, Vue.js, Angular, Svelte тощо).

Слідуйте цьому гайду, щоб використовувати відповідний плагін візуалізації у своєму Angular, Svelte або Vue.js додатку, з посиланням на відповідні гайди для Angular, Svelte, Vue.js тощо.

Базовий Структури даних Core Плагін області Плагін з'єднань

Щоб виконати цей гайд, ви можете створити додаток на Codesandbox, вибравши будь-який шаблон клієнтського додатку, або створити додаток локально.

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

bash

npm i rete rete-area-plugin rete-connection-plugin rete-react-plugin rete-render-utils styled-components react@18 react-dom@18

Визначення типів та ініціалізація екземпляра редактора

import { NodeEditor, GetSchemes, ClassicPreset } from "rete";

type Schemes = GetSchemes<
  ClassicPreset.Node,
  ClassicPreset.Connection<ClassicPreset.Node, ClassicPreset.Node>
>;

const editor = new NodeEditor<Schemes>();

де Schemes — це тип, який допоможе вам з виведенням типів під час налаштування плагіна. Для більш складних прикладів може знадобитися розширити класи ClassicPreset.Node і ClassicPreset.Connection.

Додайте довільний вузол

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

const socket = new ClassicPreset.Socket("socket");

const nodeA = new ClassicPreset.Node("A");
nodeA.addControl("a", new ClassicPreset.InputControl("text", {}));
nodeA.addOutput("a", new ClassicPreset.Output(socket));
await editor.addNode(nodeA);

Створіть область для рендерінгу за допомогою React.js

Розмістіть цей код перед викликом addNode:

import { createRoot } from "react-dom/client";
import { AreaPlugin } from "rete-area-plugin";
import { ReactPlugin, Presets, ReactArea2D } from "rete-react-plugin";

type AreaExtra = ReactArea2D<Schemes>;

const area = new AreaPlugin<Schemes, AreaExtra>(container);
const render = new ReactPlugin<Schemes, AreaExtra>({ createRoot });

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

editor.use(area);
area.use(render);

де

container - це HTMLElement, де буде розміщено редактор
тип AreaExtra дозволяє включати спеціальні візуальні елементи, оскільки за замовчуванням доступні лише node і connection

Додавання ще одного вузла

const nodeB = new ClassicPreset.Node("B");
nodeB.addControl("b", new ClassicPreset.InputControl("text", {}));
nodeB.addInput("b", new ClassicPreset.Input(socket));
await editor.addNode(nodeB);

Давайте встановимо зв'язок між цими вузлами

await editor.addConnection(new ClassicPreset.Connection(nodeA, "a", nodeB, "b"));

Позиціонування вузла

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

await area.translate(nodeB.id, { x: 270, y: 0 });

Інтерактивні зв'язки

Ця функція дозволяє користувачам взаємодіяти з вузлами.

import { ConnectionPlugin, Presets as ConnectionPresets } from "rete-connection-plugin"

const connection = new ConnectionPlugin<Schemes, AreaExtra>();

connection.addPreset(ConnectionPresets.classic.setup())

area.use(connection);

Пристосувати в’юпорт

Використовуйте розширення zoomAt, щоб автоматично пристосувати в’юпорт відповідно до всіх вузлів.

import { AreaExtensions } from "rete-area-plugin";

AreaExtensions.zoomAt(area, editor.getNodes());

За замовчуванням розміри вузла обчислюються за допомогою clientWidth/clientHeight. Якщо цей метод викликається відразу після додавання вузлів, він може не працювати належним чином, доки елемент не буде видно на екрані. Натомість ви можете вказати властивості width/height у класі вузла, як продемонстровано на цьому кроці.

Вибір вузлів

Крім того, розширення пропонують різні можливості, як-от можливість вибору вузлів користувачем.

AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
  accumulating: AreaExtensions.accumulateOnCtrl()
});

Для отримання додаткової інформації перегляньте гайд Вибір.

Порядок вузлів

Якщо ваш додаток дозволяє вибирати вузли, користувачі можуть захотіти переглядати вибрані вузли без будь-яких візуальних перешкод. Для полегшення цього передбачено додаткове розширення, яке автоматично виводить вибраний вузол на передній план.

AreaExtensions.simpleNodesOrder(area);

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

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

Базовий редактор