Області видимості

Області видимостіУпорядкування вузлівПлагін

Плагін rete-scopes-plugin надає функції для створення редактора вузлів із вкладеними вузлами, також відомими як підграф. Цей плагін відноситься до категорії просунутий.

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

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

npm i rete-scopes-plugin

Підготовка вузлів

Плагін вимагає явно зазначених розмірів вузла:

class Node extends ClassicPreset.Node {
  width = 190;
  height = 120;
  parent?: string
}
class Connection<N extends Node> extends ClassicPreset.Connection<N, N> {}

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

Метою цього є задіяння динамічної зміни розмірів вузла, якщо він має вкладені вузли.

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

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

import { ScopesPlugin, Presets as ScopesPresets } from 'rete-scopes-plugin'

const scopes = new ScopesPlugin<Schemes>()

scopes.addPreset(ScopesPresets.classic.setup())

area.use(scopes)

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

Додавання вузлів

Давайте додамо пару вузлів, один з яких буде батьківським:

const node1 = new Node('A');
const parent1 = new Node('Parent');

node1.parent = parent1.id; // вказати node1 як вкладений у parent1

await editor.addNode(parent1); // переконайтеся, що додали батьківський вузол перед додаванням його дочірнього вузла
await editor.addNode(node1);

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

За замовчуванням плагін налаштовано на використання власного порядку вузлів. Якщо ви дотримувалися гайду Базовий редактор, вам потрібно видалити AreaExtensions.simpleNodesOrder

AreaExtensions.simpleNodesOrder(area);

Порядок вкладених вузлів дещо інший, оскільки батьківські вузли не повинні перекривати дочірні вузли. Під час виведення вузла на передній план або додавання до нього дочірніх вузлів порядок дочірніх вузлів адаптується (подією reordered)

Упорядкування вузлів

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

Динамічно змінені зв'язки

Після того, як вузли були додані в редактор, щоб змінити з'вязки між візлами, окрім зміни node.parent вам потрібно явно викликати оновлення батьківського вузла

// раніше був призначений parent1.id
node1.parent = undefined;
await scopes.update(parent1.id)

Зміна відступів від батьківського вузла

За замовчуванням всі вузли мають однакові відступи. Ці значенням ви можете знайти в документації до АПІ. Відступи можуть бути налаштованы для кожного вузла окремо, використовуючи опцію padding.

const scopes = new ScopesPlugin<Schemes>({
  padding: nodeId => ({ top: 40, left: 20, right: 20, bottom: 20 })
});

Виключення вузлів

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

const scopes = new ScopesPlugin<Schemes>({
  exclude: nodeId => excludedNodes.includes(nodeId)
});

Зміна розмірів батьківських вузлів

Сформовані розміри батьківських вузлів можна кастомізувати для окремо обраних вузлів через опцію size. Ця функціональність корисна, наприклад, коли дочірні вузли були видалені, і необхідно задати новий розмір для відображення компонування правильно.

const scopes = new ScopesPlugin<Schemes>({
  size: (nodeId, size) => ({ width: size.width, height: 100 })
});

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