Шлях з'єднання

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

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

bash

npm i rete-connection-path-plugin d3-shape

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

У цьому прикладі для всіх з’єднань використовується метод curveStep. Майте на увазі, що плагін має бути підключений до модулю візуалізації, який має видавати подію connectionpath.

import { ConnectionPathPlugin } from "rete-connection-path-plugin";
import { curveStep } from "d3-shape";

const pathPlugin = new ConnectionPathPlugin<Schemes, Area2D<Schemes>>({
  curve: () => curveStep
});

render.use(pathPlugin);

Шлях для конкретного з'єднання

Опція curve приймає функцію зворотного виклику з екземпляром підключення як перший параметр, що дозволяє вам налаштувати тип шляху.

import { curveStep, curveMonotoneX, curveLinear, CurveFactory } from "d3-shape";

class Connection extends ClassicPreset.Connection<
  ClassicPreset.Node,
  ClassicPreset.Node
> {
  curve?: CurveFactory;
}

const pathPlugin = new ConnectionPathPlugin<Schemes, Area2D<Schemes>>({
  curve: (connection) => connection.curve || curveStep
});

const monotoneConnection = new Connection(a, "port", b, "port");
const linearConnection = new Connection(a, "port", b, "port");

monotoneConnection.curve = curveMonotoneX;
linearConnection.curve = curveLinear;

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

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

Шлях з'єднання

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

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

Шлях для конкретного з'єднання