FlowCanvas
The node canvas on its own: pan and zoom, drag to connect nodes, an actions panel to add steps, an inspector for the selected node, undo and redo. Takes no props; state lives in the exported `flow` store. Needs a container with an explicit height.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { FlowCanvas } from '@fractaldesign/machines-ui';Preview
<div class="canvas-host">
<FlowCanvas />
</div>API
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| PaletteDrag | type | {
kind: ActionKind;
clientX: number;
clientY: number;
grabX: number;
grabY: number;
snap: OpenPort | null;
placement: Point | null;
} |
| LinkDrag | type | {
source: string;
port: PortId | null;
pointer: Point;
target: string | null;
} |
| PointerEnd | type | (event: PointerEvent, cancelled: boolean) => void |
src/lib/components/flow/canvas/flow-canvas.svelte