HTMLGraph | Tutorials | 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; {
        const baseShape = new BezierEdgeShape({
          hasTargetArrow: true,
        });

        return baseShape;
      },
    },
  })
  .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.svg.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	`{}`

`InteractiveParams`

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:

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

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

        // ... event handlers ...

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