Canvas Utilities
Two helper functions that draw the curved lines connecting nodes. They produce the same visual result but expect different inputs — pick the one that matches where you are working.
Interactive Preview
computeBezierPath — Adjust position to see the curve adapt
Props
Node spacing
160px
Vertical offset
0px
Functions
| Function | Used in | Input |
|---|---|---|
computeBezierPath | Workflow canvas | Node top-left position + dimensions |
computeBezierFromPoints | Wiring Modal | Pre-measured port center coordinates |
computeBezierPath
Used in the workflow canvas. Pass each node's top-left position and dimensions — the function calculates where the connection point is on each node and draws the curve. Also returns the four endpoint coordinates so you can position labels.
| Parameter | Type | Description |
|---|---|---|
source | { x, y } | Node top-left position on the canvas |
target | { x, y } | Node top-left position on the canvas |
nodeWidth | number | Node width in px — used to find right-edge port center |
nodeHeight | number | Node height in px — used to find vertical center |
returns | { path, sx, sy, tx, ty } | SVG path string + four computed coordinates |
computeBezierFromPoints
Used in the Wiring Modal. Pass the exact screen coordinates of each port — measured with getBoundingClientRect() — and get back the path string. No offset calculation happens here.
| Parameter | Type | Description |
|---|---|---|
x1 | number | Source port center X (pre-measured) |
y1 | number | Source port center Y (pre-measured) |
x2 | number | Target port center X (pre-measured) |
y2 | number | Target port center Y (pre-measured) |
returns | string | SVG path string — M x1 y1 C midX y1, midX y2, x2 y2 |
When to Use
Use computeBezierPath. Node positions in the canvas are stored as top-left coordinates. Pass those in and the function works out where the connection point sits on each node.
Use computeBezierFromPoints. Port positions are measured from the DOM using getBoundingClientRect(), so you already have the exact center coordinates. Pass them straight in.
computeBezierPath adds a nodeWidth offset to find the port. If you pass pre-measured port coordinates to it, every line will be shifted by that amount. computeBezierFromPoints skips the offset, so passing node positions will miss the actual ports.