Defaults
Use the setDefaults method of CanvasBuilder to establish base visualization settings.
These defaults apply 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
| 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
| 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
| Name | Type | Description | Required | Default |
|---|
shape | EdgeShapeConfig | Default edge shape configuration | no | { type: "bezier" } |
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++; |
Focus #
Configures canvas.focus() default parameters
const element = document.getElementById("canvas");
const canvas = new CanvasBuilder(element)
.setDefaults({
focus: {
minContentScale: 0.5,
contentPadding: 200,
animationDuration: 150,
},
})
.build();
FocusConfig
| Name | Type | Description | Required | Default |
|---|
minContentScale | number | When all nodes don’t fit, the content scale gets smaller to fit all nodes. But minimum scaling value can be specified using this argument | no | 0 |
contentPadding | number | Extra space between viewport border and graph nodes | no | 100 |
animationDuration | number | Duration of transition animation (milliseconds) | no | 0 |
