Defaults
Use the setDefaults method of CanvasBuilder to establish base visualization settings.
These defaults apply to all graph entities (nodes, ports, and edges) when no explicit values are provided.
Nodes #
const element = document.getElementById('canvas');
const canvas = new CanvasBuilder(element)
.setDefaults({
nodes: {
centerFn: (w, h) => ({ x: w / 2, y: h / 2 }),
priority: "incremental",
},
})
.build();
NodesConfig Fields
| Name | Type | Description | Required | Default |
|---|
| centerFn | function | Default function to determine the node’s center | no | (w, h) => ({ x: w/2, y: h/2 }) |
| priority | Priority | Default node priority | no | 0 |
Priority Options
| Type | Description | Example |
|---|
number | Each node is assigned a constant Z-index | 5 |
"incremental" | Each subsequent node receives an incremented Z-index | "incremental" |
() => number | Z-index is determined by a specified function | () => 10 + i++; |
Ports #
const element = document.getElementById('canvas');
const canvas = new CanvasBuilder(element)
.setDefaults({
ports: {
direction: -Math.PI,
},
})
.build();
PortsConfig Fields
| Name | Type | Description | Required | Default |
|---|
| direction | number | Default port direction | no | 0 |
Edges #
const element = document.getElementById('canvas');
const canvas = new CanvasBuilder(element)
.setDefaults({
edges: {
shape: {
type: "bezier",
color: "#000",
hasTargetArrow: true,
},
priority: "incremental",
},
})
.build();
EdgesConfig Fields
| Name | Type | Description | Required | Default |
|---|
| shape | EdgeShapeConfig | Default edge shape configuration | no | {} |
| priority | Priority | Default edge priority | no | 0 |
Priority Options
| Type | Description | Example |
|---|
number | Each edge is assigned a constant Z-index | 5 |
"incremental" | Each subsequent edge receives an incremented Z-index | "incremental" |
function | Z-index is determined by a specified function | () => 10 + i++; |
