HTMLGraph | Interactive Edges | Changing Edge Color

Changing Edge Color

Edge color can be dynamically modified using --edge-color CSS variable for edge svg element, as shown in the example below.

This example demonstrates how to change edge color on mouse hover, using InteractiveEdgeShape decorator.

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

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

        interactiveShape.handle.addEventListener(&#34;mouseenter&#34;, () =&gt; {
          interactiveShape.svg.style.setProperty(&#34;--edge-color&#34;, &#34;#f9880e&#34;);
        });

        interactiveShape.handle.addEventListener(&#34;mouseleave&#34;, () =&gt; {
          interactiveShape.svg.style.setProperty(&#34;--edge-color&#34;, &#34;#777777&#34;);
        });

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

Changing edge color on mouse hover