HTMLGraph | Edge Shape

Straight Edge Shape

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

In addition to type: "straight", 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`
`detourDirection`	`number`	Node cycle detour direction	no	`-Math.PI/2`

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

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

All parameters are the same as specified in the table.

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

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

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

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