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++; |
