Control flow - Rete.js

Control flow

Не знайомі з концепцією Control flow? Перегляньте статтю Control flow, щоб прискоритись

Control flowПлагін

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

bash
npm i rete rete-engine

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

Розглянемо простий приклад графа з двома типами вузлів: Log і Delay. Ці вузли можуть виконувати певні операції та певним чином передавати керування вихідним вузлам.

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

Визначення класу вузла, який реєструє повідомлення та передає керування вихідним вузлам через порт exec:

ts
const socket = new ClassicPreset.Socket("socket"); class Log extends ClassicPreset.Node { constructor(public message: string) { super("Log"); this.addInput("exec", new ClassicPreset.Input(socket, "Exec", true)); this.addOutput("exec", new ClassicPreset.Output(socket, "Exec")); } execute(input: "exec", forward: (output: "exec") => void) { console.log(this.message); forward("exec"); } }

Визначення класу, який обробляє затримку, де єдиною метою є передача керування вихідним вузлам через порт exec після визначеного часу очікування:

ts
class Delay extends ClassicPreset.Node { constructor(private seconds: number) { super("Delay"); this.addInput("exec", new ClassicPreset.Input(socket, "Exec", true)); this.addOutput("exec", new ClassicPreset.Output(socket, "Exec")); } execute(input: "exec" | undefined, forward: (output: "exec") => void) { setTimeout(() => forward("exec"), seconds * 1000) } } class Connection<A extends NodeProps, B extends NodeProps> extends ClassicPreset.Connection<A, B> {} type NodeProps = Start | Log | Delay; type ConnProps = | Connection<Start, Log> | Connection<Delay, Log> | Connection<Log, Delay> | Connection<Log, Log> | Connection<Delay, Delay>; type Schemes = GetSchemes<NodeProps, ConnProps>;

Під'єднання

ts
import { ControlFlowEngine } from "rete-engine"; import { NodeEditor } from "rete"; const editor = new NodeEditor<Schemes>(); const engine = new ControlFlowEngine<Schemes>(); editor.use(engine);

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

Давайте додамо послідовність вузлів у формі Log -> Delay -> Log

ts
const log1 = new Log("log before delay"); const delay = new Delay(2); const log2 = new Log("log after delay"); const con2 = new Connection(log1, "exec", delay, "exec"); const con3 = new Connection(delay, "exec", log2, "exec"); await editor.addNode(log1); await editor.addNode(delay); await editor.addNode(log2); await editor.addConnection(con2); await editor.addConnection(con3);

Виконання

Вузол log1 служить початковою точкою для виконання графа.

ts
engine.execute(log1.id);

Ця операція запускає метод execute класу Log з undefined як параметр input, оскільки вузол був викликаний безпосередньо, без передачі від вхідного вузла.

Потім виклик forward("exec") передає керування всім вихідним вузлам. У нашому випадку вузол Delay робить те саме, але після затримки з використанням setTimeout.

Логи:

log
"log before delay" // delay for 2 seconds "log after delay"

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