Редактор

NodeEditor — це клас, який реалізує інтерфейс для взаємодії з графом. Подібно до інших модулів, він розширює Scope: може створювати сигнали та надає можливість підключати плагіни.

import { NodeEditor, BaseSchemes } from 'rete'

type Schemes = BaseSchemes // має Node { id: string } та Connection { id: string, source: string, target: string }

const editor = new NodeEditor<Schemes>()

Тип Schemes буде використано для подальших цілей виведення типів.

Існує класичний пресет, який надає інтерфейси для створення вузлів.

Редактор може бути застосовний як на стороні клієнта, так і на стороні сервера. На стороні клієнта він може надавати дані для візуалізації. На стороні сервера він може надавати дані для обробки графіків, наприклад, через rete-engine або інші взаємодії за допомогою rete-structures.

Керування вузлом і з’єднанням

Ми можемо додавати вузли як звичайний об’єкт із обов’язковим полем id або як вузли з ClassicPreset

import { ClassicPreset } from 'rete'

const node = new ClassicPreset.Node('Label')

node.addOutput('output', new ClassicPreset.Output(socket, 'Title'))

await editor.addNode(node)

Видалення можна здійснити за допомогою id

await editor.removeNode(node.id)

Щоб створити з’єднання, ви можете використовувати базовий об’єкт із обов’язковими полями (id, source, target) або класичний пресет, який вимагає передачі вихідного та цільового вузлів для перевірки типів TypeScript.

import { ClassicPreset } from 'rete'

const connection = new ClassicPreset.Connection(sourceNode, 'portKey', targetNode, 'portKey')

await editor.addConnection(connection)

Видалення підключення по id

await editor.removeConnection(connection.id)

Створення 2D області

Для візуалізації на HTML необхідний rete-area-plugin. Цей плагін відповідає за основні функції, такі як масштабування та перетягування, і служить точкою входу для інших плагінів для візуалізації та взаємодії з користувачами

import { AreaPlugin } from 'rete-area-plugin'

const area = new AreaPlugin<Schemes, AreaExtra>(container) // container це HTMLElement куди буде вставлено область

Тип AreaExtra необхідний для включення інших типів сигналів, таких як рендеринг різних типів елементів, окрім node і connection

Цей плагін містить розширення. Деякі з них реалізують функціональність версії 1, але з однією суттєвою відмінністю - вони є необов'язковими. Наприклад, розширення вибору вузлів не тільки підтримує вибір вузла, а може бути розширений іншими типами елементів (перегляньте приклад Коментарі), або його також можна замінити альтернативною реалізацією.

import { AreaExtensions } from 'rete-area-plugin'

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

Взаємодія зі з'єднаннями

Плагін rete-connection-plugin відповідає за взаємодію користувача зі з'єднаннями (створення, видалення)

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

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

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

На відміну від Rete.js першої версії, цей плагін не займається рендерінгом з'єднань.

Рендерінг

Візуалізація інтерфейсу користувача обробляється виключно плагінами візуалізації (за кількома винятками), які надають пресети для різних видів функціональності.

Давайте подивимося на приклад використання rete-react-plugin

import { ReactArea2D, ReactPlugin, Presets as ReactPresets } from 'rete-react-plugin'
import { MinimapExtra } from 'rete-minimap-plugin'
import { ContextMenuExtra } from 'rete-context-menu-plugin'

type AreaExtra =
  | ReactArea2D<Schemes>
  | ContextMenuExtra
  | MinimapExtra

const reactPlugin = new ReactPlugin<Schemes, AreaExtra>()

reactPlugin.addPreset(ReactPresets.classic.setup())
reactPlugin.addPreset(ReactPresets.contextMenu.setup())
reactPlugin.addPreset(ReactPresets.minimap.setup())

area.use(reactPlugin)

Кожен елемент у редакторі, такие як вузол, елемент керування, сокет або з'єднання, технічно є незалежним деревом елементів, що пропонує гнучкість у поєднанні різних фреймворків візуалізації. Додаткову інформацію можна знайти в статті Інтеграція.