Custom Edge Shape
A custom edge shape can be defined by providing a factory function in the setDefaults method of CanvasBuilder.
const element = document.getElementById('canvas');
const canvas = new CanvasBuilder(element)
.setDefaults({
edges: {
shape: (edgeId) => new MyCustomEdgeShape(`Edge ${edgeId}`),
},
})
.build();
You can also apply a custom shape to a specific edge using the addEdge and updateEdge methods.
canvas.addEdge({
from: "port-1",
to: "port-2",
shape: new MyCustomEdgeShape("Edge 1"),
});
canvas.updateEdge("edge-1", {
from: "port-3",
to: "port-4",
shape: new MyCustomEdgeShape("Edge 2"),
});