HTMLGraph | Edge Shape

Direct Edge Shape

The Direct edge shape can be configured by calling the setDefaults method on CanvasBuilder.

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

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shape: {
        type: &#34;direct&#34;,
        hasTargetArrow: true,
      },
    },
  })
  .build();

Alternatively, you can create a Direct shape by passing a factory function into the configuration.

    
import { DirectEdgeShape } from &#34;@html-graph/html-graph&#34;;

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

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

The following configuration options are available:

Name	Type	Description	Required	Default
`color`	`string`	Color of the line and arrows	no	`"#777777"`
`width`	`number`	Line width	no	`1`
`arrowRenderer`	`ArrowRenderer`	Arrow shape	no	`{}`
`arrowLength`	`number`	Full length of the arrow	no	`20`
`sourceOffset`	`number \| “box” \| PortOffsetFn`	Empty space distance from source port to an edge	no	`0`
`targetOffset`	`number \| “box” \| PortOffsetFn`	Empty space distance from target port to an edge	no	`0`
`hasSourceArrow`	`boolean`	Draw an arrow near the source port	no	`false`
`hasTargetArrow`	`boolean`	Draw an arrow near the target port	no	`false`
`midpointElement`	`HTMLElement \| SVGElement`	Element to place in the middle	no	`undefined`
`interactiveDistance`	`number`	Distance of the interactive area	no	`0`

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

    
import { DirectEdgeShape } from &#34;@html-graph/html-graph&#34;;

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

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

`PortOffsetFn`

PortOffsetFn is a function that calculates the arrow offset distance based on edge direction and port parameters. This determines how far from the port center the arrow should be placed.

Here is an example of a PortOffsetFn configuration that positions arrows near the border of a rectangular port:

    
canvas.addEdge({
  from: &#34;port-1&#34;,
  to: &#34;port-2&#34;,
  shape: new DirectEdgeShape({
    hasSourceArrow: true,
    hasTargetArrow: true,
    sourceOffset: &#34;box&#34;,
    targetOffset: &#34;box&#34;,
  }),
});

You can also provide a custom PortOffsetFn.

As a starting point you can take a look at the implementation of the "box" PortOffsetFn:

    
const boxPortOffsetFn = (params) =&gt; {
  const { direction, radius } = params;
  const { x, y } = direction; // the direction vector of direct edge
  const { horizontal, vertical } = radius; // half of port element width and height
  const tg = y / x;

  const horX = Math.abs(vertical / tg);
  const vertY = Math.abs(horizontal * tg);

  const minX = Math.min(horizontal, horX);
  const minY = Math.min(vertical, vertY);

  return Math.sqrt(minX * minX + minY * minY);
};

canvas.addEdge({
  from: &#34;port-1&#34;,
  to: &#34;port-2&#34;,
  shape: new DirectEdgeShape({
    hasSourceArrow: true,
    hasTargetArrow: true,
    sourceOffset: boxPortOffsetFn,
    targetOffset: boxPortOffsetFn,
  }),
});