HTMLGraph | Edge Shape

Bezier Edge Shape

The Bezier shape is used by default, but it can also be explicitly set using the setDefaults method on CanvasBuilder.

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

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

Bezier Edge

In addition to type: "bezier", 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`
curvature	number	Bezier curvature	no	`90`
hasSourceArrow	boolean	Draw an arrow near the source port	no	`false`
hasTargetArrow	boolean	Draw an arrow near the target port	no	`false`
cycleRadius	number	Port cycle line radius	no	`30`
smallCycleRadius	number	Port-cycle radius near the port	no	`15`
detourDistance	number	Node cycle detour distance	no	`100`
detourDirection	number	Node cycle detour direction	no	`-Math.PI/2`

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

    
import { BezierEdgeShape } 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 BezierEdgeShape({ hasTargetArrow: true })
    },
  })
  .build();

All parameters are the same as specified in the table.

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

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

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

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