HTMLGraph | Advanced Edges | Interactive Edges

Interactive Edges

By default, edges in the graph are not interactive. To enable interaction with edges, you need to use the InteractiveEdgeShape decorator.

First, create a canvas with desired edge shape using factory function:

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

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

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shape: () =&gt; {
        return new BezierEdgeShape({
          hasTargetArrow: true,
        });
      },
    },
  })
  .build();

Then use the InteractiveEdgeShape decorator to create invisible interaction area around the visible edge. This example shows how to handle click event for an edge:

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

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

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

        const interactiveShape = new InteractiveEdgeShape(baseShape, {
          distance: 20,
        });

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

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

Decorator Parameters

Name	Type	Description	Required	Default
baseShape	StructuredEdgeShape	The shape to make interactive	Yes
interactiveParameters	InteractiveParams	Configuration for interactive behavior	No	`{}`

Interactive Parameters

Name	Type	Description	Required	Default
distance	number	Distance of the interactive area from the edge	No	`10`

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

Interactive edges

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,
    },
    edges: {
      priority: 0,
      shape: (edgeId) =&gt; {
        const baseShape = new BezierEdgeShape({
          hasTargetArrow: true,
        });

        const interactiveShape = new InteractiveEdgeShape(baseShape, {
          distance: 10,
        });

        // ... event handlers ...

        return interactiveShape;
      },
    },
  })
  .enableUserDraggableNodes({
    moveEdgesOnTop: false,
  })
  .enableUserTransformableViewport()
  .enableBackground()
  .build();

Key configuration:

Nodes: priority: 1 (higher z-index)
Edges: priority: 0 (lower z-index)
Draggable nodes: moveEdgesOnTop: false keeps edges under nodes during node dragging