FlowCanvas
The pan/zoom canvas pane — a single CSS-transformed layer driven by the viewport signal.
Category: display · WCAG 2.1-AA · flow, canvas, viewport, pan, zoom
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Background, nodes, edges. |
viewport | { x: number; y: number; zoom: number } | — | Controlled viewport. |
onViewportChange | (viewport: Viewport) => void | — | Viewport change callback. |
minZoom | number | 0.2 | Lower bound for the viewport zoom level. |
maxZoom | number | 2 | Upper bound for the viewport zoom level. |
panOnDrag | boolean | true | Drag the empty pane to pan the viewport. |
zoomOnScroll | boolean | true | Wheel or pinch to zoom the viewport. |
fitView | boolean | false | Frame the whole graph once on mount. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-bg--cascivo-radius-surface
When to use
- Hosting a hand-composed flow from low-level FlowNode/FlowEdge primitives
- When you need direct control of the viewport, pan, and zoom
When not to use
- For the common case — prefer the declarative <Flow nodes edges /> instead
Examples
Empty canvas with a background
() => (
<FlowCanvas style={{ height: 240 }}>
<FlowBackground />
</FlowCanvas>
)Related components
- Flow — The declarative data-driven wrapper.
- FlowBackground — A common child.