HTMLGraph | Edge Shape

Orthogonal Edge Shape

The Orthogonal 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;orthogonal&#34;,
        hasTargetArrow: true,
      },
    },
  })
  .build();

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

    
import { OrthogonalEdgeShape } 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 OrthogonalEdgeShape({ 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`
`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`
`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 Orthogonal shape to a specific edge using the addEdge and updateEdge methods.

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

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

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