HTMLGraph logo HTMLGraph

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"),
});

  
Custom Edge with Label