npm i rete-connection-path-plugin d3-shape
The curveStep method is used for all connections in this example. Keep in mind that the plugin must be linked to the render plugin, which must emit the connectionpath event.
import { ConnectionPathPlugin } from "rete-connection-path-plugin";
import { curveStep } from "d3-shape";
const pathPlugin = new ConnectionPathPlugin<Schemes, Area2D<Schemes>>({
curve: () => curveStep
});
render.use(pathPlugin);
The curve option takes a callback function with the connection instance as the first parameter, allowing you to customize the path type.
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;
Check out the complete result on the Connection path example page.