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 centerX = width / 2;
    const centerY = height / 2;
    const flipX = centerFrom.x &lt;= centerTo.x ? 1 : -1;
    const flipY = centerFrom.y &lt;= centerTo.y ? 1 : -1;

    const fromX = centerX - centerX * flipX;
    const fromY = centerY - centerY * flipY;
    const toX = centerX + centerX * flipX;
    const toY = centerY + centerY * flipY;

    const linePath = `M ${fromX} ${fromY} L ${toX} ${toY}`;

    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(&#39;canvas&#39;);

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shape: () =&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;, {
  from: &#34;port-3&#34;,
  to: &#34;port-4&#34;,
  shape: new MyCustomEdgeShape(),
});