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;,
      },
    },
  })
  .build();

In addition to type: "direct", the following 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`

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();

All parameters are the same as specified in the table.

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 such a function that positions arrows near the border of a rectangular port:

    
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,
  }),
});

boxPortOffsetFn is built into the library for direct edges:

    
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;,
  }),
});