Horizontal Edge Shape
The Horizontal edge shape can be configured by calling the setDefaults method on CanvasBuilder.
const element = document.getElementById('canvas');
const canvas = new CanvasBuilder()
.setElement(element)
.setDefaults({
edges: {
shape: {
type: "horizontal",
},
},
})
.build();
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 |
| arrowLength | number | Full length of the arrow | no | 15 |
| arrowWidth | number | Width of the arrow from center to side | no | 4 |
| 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 Horizontal shape by passing a factory function into the configuration.
import { HorizontalEdgeShape } from "@html-graph/html-graph";
const element = document.getElementById('canvas');
const canvas = new CanvasBuilder()
.setElement(element)
.setDefaults({
edges: {
shape: () => 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 "@html-graph/html-graph";
canvas.addEdge({
from: "port-1",
to: "port-2",
shape: new HorizontalEdgeShape(),
})
canvas.updateEdge("edge-1", {
from: "port-3",
to: "port-4",
shape: new HorizontalEdgeShape(),
})