HTMLGraph | Edge Shape | Custom Edge Shape (advanced)

Custom Edge Shape (advanced)

When built-in edge shapes are insufficent, it is possible to provide a custom edge shape.

The following example demonstrates implementation of a custom edge shape using TypeScript.

    
import { EdgeShape, EdgeRenderParams } from &#34;@html-graph/html-graph&#34;;

class MyCustomEdgeShape implements EdgeShape {
  readonly svg: SVGSVGElement;

  private readonly line: SVGPathElement;

  constructor() {
    this.svg = document.createElementNS(
      &#34;http://www.w3.org/2000/svg&#34;,
      &#34;svg&#34;,
    );

    this.svg.style.pointerEvents = &#34;none&#34;;
    this.svg.style.position = &#34;absolute&#34;;
    this.svg.style.top = &#34;0&#34;;
    this.svg.style.left = &#34;0&#34;;
    this.svg.style.overflow = &#34;visible&#34;;

    this.line = document.createElementNS(
      &#34;http://www.w3.org/2000/svg&#34;,
      &#34;path&#34;,
    );

    this.line.setAttribute(&#34;stroke&#34;, &#34;#777777&#34;);
    this.line.setAttribute(&#34;stroke-width&#34;, &#34;1&#34;);
    this.line.setAttribute(&#34;fill&#34;, &#34;none&#34;);
    this.line.classList.add(&#34;custom-line&#34;);

    this.svg.appendChild(this.line);
  }

  render(params: EdgeRenderParams): void {
    const { from, to } = params;

    const centerFrom = {
      x: from.x + from.width / 2,
      y: from.y + from.height / 2,
    };

    const centerTo = {
      x: to.x + to.width / 2,
      y: to.y + to.height / 2,
    };

    const x = Math.min(centerFrom.x, centerTo.x);
    const y = Math.min(centerFrom.y, centerTo.y);
    const width = Math.abs(centerTo.x - centerFrom.x);
    const height = Math.abs(centerTo.y - centerFrom.y);

    this.svg.style.width = `${width}px`;
    this.svg.style.height = `${height}px`;
    this.svg.style.transform = `translate(${x}px, ${y}px)`;

    const fromPoint = { x: centerFrom.x - x, y: centerFrom.y - y };
    const toPoint = { x: centerTo.x - x, y: centerTo.y - y };

    const linePath = `M ${fromPoint.x} ${fromPoint.y} L ${toPoint.x} ${toPoint.y}`;

    this.line.setAttribute(&#34;d&#34;, linePath);
  }
}

As shown above, any custom edge shape must implement the EdgeShape interface.

This interface requires:

public property svg, which stores edge svg element
method render, which updates svg property based on provided parameters

A custom edge shape can be provided via a factory function in the setDefaults method of CanvasBuilder.

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

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shape: (edgeId) =&gt; new MyCustomEdgeShape(),
    },
  })
  .build();

You can also apply a custom shape to a specific edge using the addEdge and updateEdge methods.

    
canvas.addEdge({
  from: &#34;port-1&#34;,
  to: &#34;port-2&#34;,
  shape: new MyCustomEdgeShape(),
});

    
canvas.updateEdge(&#34;edge-1&#34;, {
  shape: new MyCustomEdgeShape(),
});