HTMLGraph | Edge Shape

Horizontal Edge Shape

The Horizontal 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;horizontal&#34;,
      },
    },
  })
  .build();

Horizontal Edge

In addition to type: "horizontal", 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`
arrowOffset	number	Offset from the arrow to the edge bend	no	`15`
hasSourceArrow	boolean	Draw an arrow near the source port	no	`false`
hasTargetArrow	boolean	Draw an arrow near the target port	no	`false`
cycleSquareSide	number	Port cycle square side size	no	`30`
roundness	number	Roundness of the line angles	no	`10`
detourDistance	number	Node cycle detour distance	no	`100`

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

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

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

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

All parameters are the same as specified in the table.

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

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

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

    
canvas.updateEdge(&#34;edge-1&#34;, {
  from: &#34;port-3&#34;,
  to: &#34;port-4&#34;,
  shape: new HorizontalEdgeShape(),
});