HTMLGraph | Edge Shape

Direct Edge Shape

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

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

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

Direct Edge

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`
arrowLength	number	Full length of the arrow	no	`15`
arrowWidth	number	Width of the arrow from center to side	no	`4`
sourceOffset	number	Empty space distance from source port to an edge	no	`0`
targetOffset	number	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(&#39;canvas&#39;);

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