Виджеты

FlowCanvas

Канва pan/zoom с узлами и связями — мини-react-flow.

Канва pan/zoom с узлами и связями — мини-react-flow. Холст листается протяжкой, масштабируется колесом, узлы двигаются и липнут к сетке.

Установка

terminal

npx @toimetdev/pathlogs-ui add flow-canvas

Пример

Источник

Преобразование

Фильтр

Приёмник

100%

Тащите фон — холст листается. Колесо масштабирует. Узлы перетаскиваются и встают по сетке. Кнопка ⤢ вмещает всё в экран.

Пропсы

Проп	Тип	По умолчанию	Описание
`nodes`*	`N[]`	—	Узлы: id, x, y, width?, height?.
`renderNode`*	`(node, meta) => ReactNode`	—	Содержимое узла.
`edges`	`FlowEdge[]`	`[]`	Связи с необязательными сторонами портов.
`onNodesChange`	`(nodes) => void`	—	Новые позиции после перетаскивания. Без него узлы не двигаются.
`grid`	`number`	`20`	Шаг сетки для привязки и фона. 0 — без сетки.
`onSelect`	`(node \| null) => void`	—	Выбор узла или сброс по клику на фон.

nodes*N[]

Узлы: id, x, y, width?, height?.

renderNode*(node, meta) => ReactNode

Содержимое узла.

edgesFlowEdge[]

по умолчанию: []

Связи с необязательными сторонами портов.

onNodesChange(nodes) => void

Новые позиции после перетаскивания. Без него узлы не двигаются.

gridnumber

по умолчанию: 20

Шаг сетки для привязки и фона. 0 — без сетки.

onSelect(node | null) => void

Выбор узла или сброс по клику на фон.

Зум к курсору

Математика отдельно

tsx

import {
  worldToScreen, screenToWorld,  // взаимно обратные преобразования
  zoomAt,                        // зум с сохранением точки под курсором
  fitView,                       // камера, вмещающая всё в экран
  snapToGrid, portPoint, edgePath,
} from "@/components/ui/flow-canvas/viewport";