Widgets
FlowCanvas
A pan/zoom canvas with nodes and edges — a small react-flow.
A pan/zoom canvas with nodes and edges — a small react-flow. The canvas pans by dragging, zooms with the wheel, and nodes move and snap to the grid.
Installation
npx @toimetdev/pathlogs-ui add flow-canvasExample
Источник
Преобразование
Фильтр
Приёмник
<FlowCanvas
nodes={nodes}
onNodesChange={setNodes}
edges={edges}
renderNode={(node) => <div>{node.label}</div>}
/>Drag the background and the canvas pans. The wheel zooms. Nodes drag and land on the grid. The ⤢ button fits everything into view.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes* | N[] | — | The nodes: id, x, y, width?, height?. |
renderNode* | (node, meta) => ReactNode | — | A node's contents. |
edges | FlowEdge[] | [] | Links, with optional port sides. |
onNodesChange | (nodes) => void | — | The new positions after a drag. Without it nodes do not move. |
grid | number | 20 | The grid step for snapping and the background. 0 disables the grid. |
onSelect | (node | null) => void | — | Selecting a node, or clearing it by clicking the background. |
nodes*N[]The nodes: id, x, y, width?, height?.
renderNode*(node, meta) => ReactNodeA node's contents.
edgesFlowEdge[]defaults to: []
Links, with optional port sides.
onNodesChange(nodes) => voidThe new positions after a drag. Without it nodes do not move.
gridnumberdefaults to: 20
The grid step for snapping and the background. 0 disables the grid.
onSelect(node | null) => voidSelecting a node, or clearing it by clicking the background.
Zooming to the cursor
The maths, separately
import {
worldToScreen, screenToWorld, // mutually inverse transforms
zoomAt, // zoom that preserves the point under the cursor
fitView, // a camera that fits everything on screen
snapToGrid, portPoint, edgePath,
} from "@/components/ui/flow-canvas/viewport";