Node Canvas

Бесконечный холст нод: типизированные порты, связи, группы, мини-карта, выполнение графа. Pro · Изображения и генерация › Нод-граф

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add node-canvas

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { NodeCanvas } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`editor`	`NodeGraphEditor`		State from `useNodeGraph`, shared with NodeInspector, NodeLibrary… Without it the canvas keeps its own.
`types`	`readonly NodeTypeDef[]`		Node type registry (when no `editor` is passed).
`graph`	`NodeGraph`		Controlled graph (when no `editor` is passed).
`defaultGraph`	`NodeGraph`		Initial `graph` when uncontrolled.
`onGraphChange`	`(graph: NodeGraph) => void`		Called with the new `graph` when it changes.
`execution`	`Readonly<Record<string, NodeExecutionState>>`	`NO_EXECUTION`	Run state per node id: status, progress, error, output images.
`errors`	`readonly GraphError[]`	`NO_ERRORS`	Validation problems to show: missing inputs get a red port and an error badge.
`viewport`	`Viewport`		Controlled `viewport`; use with `onViewportChange`.
`defaultViewport`	`Viewport`		Initial `viewport` when uncontrolled.
`onViewportChange`	`(viewport: Viewport) => void`		Called with the new `viewport` when it changes.
`fitViewOnMount`	`boolean`	`true`	Fits the graph into view on mount (ignored with a controlled `viewport`).
`minFitZoom`	`number`	`0.75`	Smallest zoom the fit on mount settles on, so ports and widgets stay readable. A graph that does not fit at it opens at its left and top edges, clear of the controls and minimap, moved just enough to show the selection; its right / bottom end is cut. The Fit button and `apiRef.fitView()` still show the whole graph.
`minZoom`	`number`	`0.1`	Smallest zoom factor reachable by wheel, pinch, the zoom buttons and fit. @default 0.1
`maxZoom`	`number`	`2.5`	Largest zoom factor reachable by wheel, pinch and the zoom buttons; fit never zooms past 1. @default 2.5
`gridSize`	`number`	`20`	Grid spacing in canvas units, also the snap step. @default 20
`snapToGrid`	`boolean`		Controlled `snapToGrid`; use with `onSnapToGridChange`.
`defaultSnapToGrid`	`boolean`	`false`	Initial `snapToGrid` when uncontrolled.
`onSnapToGridChange`	`(snap: boolean) => void`		Called with the new `snapToGrid` when it changes.
`locked`	`boolean`		Locked: pan, zoom and select only.
`defaultLocked`	`boolean`	`false`	Initial `locked` when uncontrolled.
`onLockedChange`	`(locked: boolean) => void`		Called with the new `locked` when it changes.
`minimap`	`boolean`	`true`	Overview map in the corner; click or drag in it to move the view. Hidden while the canvas is under 640 px wide or 360 px tall.
`controls`	`boolean`	`true`	Zoom, fit, snap and lock buttons. @default true
`portTypes`	`PortTypeStyles`		Wire colour / display name per socket type; defaults come from the theme's wire palette.
`children`	`ReactNode`		Rendered over the canvas, e.g. a floating toolbar or run button.
`locale`	`string`		Number formatting in widgets. Defaults to the ThemeProvider locale.
`labels`	`Partial<NodeCanvasLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`widgetLabels`	`Partial<NodeWidgetLabels>`		Text of the built-in node widgets: number steppers, seed controls and image upload.
`apiRef`	`Ref<NodeCanvasApi>`		Imperative fit / zoom / focus.

Node Canvas

Установка

Пропсы

Похожие компоненты