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.

Property

Value

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.

Property

Value

number

·Source port center X (pre-measured)

number

·Source port center Y (pre-measured)

number

·Target port center X (pre-measured)

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

Canvas editor

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.

Wiring Modal

Use computeBezierFromPoints. Port positions are measured from the DOM using getBoundingClientRect(), so you already have the exact center coordinates. Pass them straight in.

Don't mix them

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.

Data Display Wiring Modal