FlowNode
An HTML node box positioned in the viewport pane — draggable, selectable, with arbitrary children.
Category: display · WCAG 2.1-AA · flow, node, draggable, graph
States
- default
- dragging
- selected
- focus
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Stable node id. |
position | { x: number; y: number } | — | Position in flow coords (controllable). |
defaultPosition | XYPosition | — | Initial position for an uncontrolled node — the node then owns its own position as it is dragged. Pass `position` instead to control it. |
onPositionChange | (position: XYPosition) => void | — | Fired while dragging. |
zoom | number | 1 | Current zoom (drag deltas are divided by it). |
selected | boolean | false | Whether the node is rendered as selected. |
draggable | boolean | true | Whether the node can be dragged. |
interactive | boolean | true | When false, the node is view-only: not draggable, selectable, or focusable. |
onSelect | (id: string) => void | — | Called with the selected value. |
children | ReactNode | — | Any cascivo content. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-radius-md--cascivo-shadow-sm
When to use
- Representing a unit in a graph that holds arbitrary themed content
- When you hand-compose a flow and need draggable, selectable boxes
When not to use
- For the common case — the declarative <Flow> renders nodes for you
Examples
A draggable node
() => (
<div style={{ position: 'relative', height: 160 }}>
<FlowNode id="a" defaultPosition={{ x: 40, y: 50 }}>Service A</FlowNode>
</div>
)Related components
- FlowHandle — Connection ports live inside a node.
- FlowEdge — Edges route between nodes.