HTMLGraph | Tutorials | Interactive Edges

Interactive Edges

By default, edges in the graph are not interactive. To enable interaction with edges, you can pass the interactiveDistance parameter to the edge shape constructor.

This example shows how to handle click event for an edge:

    
import { CanvasBuilder, BezierEdgeShape } from &#34;@html-graph/html-graph&#34;;

const element = document.getElementById(&#34;canvas&#34;);

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shapeFactory: (edgeId) =&gt; {
        const shape = new BezierEdgeShape({
          hasTargetArrow: true,
          interactiveDistance: 10,
        });

        shape.element.addEventListener(&#34;click&#34;, (event) =&gt; {
          console.log(`clicked on edge with id: ${edgeId}`);
        });

        return shape;
      },
    },
  })
  .build();

Try out this demo, which toggles edge line animated dash on edge click:

When used with connectable ports it is recommended to set edge priority below node priority to ensure ports remain accessible:

    
const canvas = new CanvasBuilder(element)
  .setDefaults({
    nodes: {
      priority: 1, // higher z-index
    },
    edges: {
      priority: 0, // lower z-index
      shapeFactory: (edgeId) =&gt; {
        const shape = new BezierEdgeShape({
          hasTargetArrow: true,
          interactiveDistance: 10,
        });

        // ... event handlers ...

        return shape;
      },
    },
  })
  .enableUserDraggableNodes({
    moveEdgesOnTop: false, // keeps edges under nodes during node dragging
  })
  .enableUserTransformableViewport()
  .enableBackground()
  .build();

Related Pages