Dataflow

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

Dataflow 3D Конфігуратор Allmatter Плагін

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

bash

npm i rete rete-engine

Давайте подивимося на спрощений приклад графа з двома типами вузлів: NumberNode і AddNode. Ці вузли створені виключно для обробки (наприклад, на стороні сервера) і не мають жодної інтеграції з інтерфейсом користувача. Ви можете знайти посилання на повний приклад з інтерфейсом користувача в кінці статті.

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

class NumberNode extends ClassicPreset.Node {
  constructor(public value: number) {
    super("Number");
    this.addOutput("value", new ClassicPreset.Output(socket, "Number"));
  }

  data(): { value: number } {
    return { value: this.value };
  }
}

class AddNode extends ClassicPreset.Node {
  constructor() {
    super("Add");
    this.addInput("left", new ClassicPreset.Input(socket, "Left"));
    this.addInput("right", new ClassicPreset.Input(socket, "Right"));
    this.addOutput("value", new ClassicPreset.Output(socket, "Number"));
  }

  data(inputs: { left?: number[]; right?: number[] }): { value: number } {
    const { left, right } = inputs;
    const value = (left && left[0] || 0) + (right && right[0] || 0)

    return { value };
  }
}

class Connection<
  A extends Node,
  B extends Node
> extends ClassicPreset.Connection<A, B> {}

type Node = NumberNode | AddNode;
type ConnProps = Connection<NumberNode, AddNode> | Connection<AddNode, AddNode>;
type Schemes = GetSchemes<Node, ConnProps>;

Підключення

import { DataflowEngine } from "rete-engine";
import { NodeEditor } from "rete";

const editor = new NodeEditor<Schemes>();
const engine = new DataflowEngine<Schemes>();

editor.use(engine);

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

const a = new NumberNode(1);
const b = new NumberNode(1);
const sum = new AddNode();

const con1 = new Connection(a, "value", c, "left");
const con2 = new Connection(b, "value", c, "right");

await editor.addNode(a);
await editor.addNode(b);
await editor.addNode(sum);

await editor.addConnection(con1);
await editor.addConnection(con2);

Початок обробки

Отримуємо вихідні дані з вузла sum.

const result = await engine.fetch(sum.id)

Значення result буде { value: 2 }, яке є сумою початкових вхідних значень вузла sum.

Якщо ви хочете змінити a.value або b.value, вам потрібно очистити кеш перед повторною обробкою графа. Вихідні значення вузлів кешуються, щоб уникнути повторного виконання вузла.

engine.reset() // скинути всі вузли
// або певні вузли
engine.reset(a.id)
engine.reset(b.id)

Крім того, методи data можуть бути асинхронними. У таких випадках вузол sum чекатиме завершення виконання методів data його вхідних вузлів. Після того, як усі вони повернуть значення, двигун виконає метод data вузла sum

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

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

Dataflow

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

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

Підключення

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

Початок обробки