Структури даних

Подібно до графа, цей фреймворк містить дані у вигляді вузлів і ребер. Одне зауваження: у термінології редактора, ребра графа відомі як з’єднання.

Екземпляр NodeEditor зберігає ці дані в нормалізованому форматі, зокрема у вигляді двох окремих списків, що містять об’єкти такого типу:

{ id: <string> } для вузлів
{ id: <string>, source: <string>, target: <string> } для з’єднань

Ініціалізація редактора передбачає використання базової схеми без будь-яких додаткових полів для початку:

import { NodeEditor, BaseSchemes, getUID } from 'rete'

const editor = new NodeEditor<BaseSchemes>()

Додавання вузлів та з’єднан

Маючи справу з даними графа, у вас є можливість створювати довільні ідентифікатори для вузлів і з’єднань або використовувати існуючі.

const a = { id: getUID() }
const b = { id: getUID() }
const connection = { id: getUID(), source: a.id, target: b.id }

await editor.addNode(a)
await editor.addNode(b)
await editor.addConnection(connection)

Отримання вузлів та з’єднань

Тепер ми можемо отримати список щойно доданих вузлів і з’єднань

editor.getNodes() // returns [a, b]
editor.getConnections() // returns [connection]

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

Вхідні/вихідні з'єднання

Наступний код показує, як отримати список вхідних і вихідних з’єднань для node:

const connections = editor.getConnections()

const incomingConnections = connections.filter(connection => connection.target === node.id)
const outgoingConnections = connections.filter(connection => connection.source === node.id)

Вхідні/вихідні вузли

Ми можемо використовувати змінні з попереднього розділу для отримання вхідних або вихідних вузлів:

const incomers = incomingConnections.map(connection => editor.getNode(connection.source))
const outgoers = outgoingConnections.map(connection => editor.getNode(connection.target))

Взагалі-то цього достатньо для простих випадків, але якщо між вузлами існує більше одного з’єднання, нам доведеться видалити дублікати:

Array.from(new Set(incomers))
Array.from(new Set(outgoers))

Просунуті методи

Зазначені вище підходи досить гнучкі, але вимагають самостійної імплементації більш складних методів. На щастя, пакет rete-structures пропонує такі методи, розділені на 4 категорії:

Маппінг: ітерація списку вузлів під час його перетворення або фільтрації
Множини: техніки роботи з графами як множинами, включаючи об’єднання, різницю та перетин.
Підграф: графи, які мають зв’язки «батько-дитина» між вузлами.
Траверс: обхід вузлів за їхніми з’єднаннями, наприклад отримання лише вхідних вузлів або всіх попередників.

Використання

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

bash

npm i rete-structures

Використовуйте наступний оператор імпорту та декларацію

import { structures } from 'rete-structures'

const graph = structures(editor)

graph.nodes()
graph.connections()

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

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