HTMLGraph | 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();

The InteractiveEdgeShape decorator provides an invisible interaction area around the visible edge. This example shows how to handle mouse and touch events:

    
import {
  CanvasBuilder,
  BezierEdgeShape,
  InteractiveEdgeShape,
} from &#34;@html-grapg/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 interactiveEdge = new InteractiveEdgeShape(baseShape, {
          width: 20,
        });

        const handler = () =&gt; {
            console.log(`clicked on edge with id: ${edgeId}`);
        };

        interactiveEdge.handle.addEventListener(&#34;mousedown&#34;, (event) =&gt; {
          event.stopPropagation();
          handler();
        });

        interactiveEdge.handle.addEventListener(&#34;touchstart&#34;, (event) =&gt; {
          event.stopPropagation();
          handler();
        });

        return interactiveEdge;
      },
    },
  })
  .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
width	number	Width of the interactive area	No	`10`

Try out this demo to understand the mechanics of edge interaction:

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 interactiveEdge = new InteractiveEdgeShape(baseShape, {
          width: 10,
        });

        // ... event handlers ...

        return interactiveEdge;
      },
    },
  })
  .enableUserDraggableNodes({
    moveOnTop: false,
  })
  .enableUserTransformableViewport()
  .enableBackground()
  .build();

Key configuration:

Nodes: priority: 1 (higher z-index)
Edges: priority: 0 (lower z-index)
Draggable nodes: moveOnTop: false maintains priority order during interaction