Skip to content

Interface: State ​

Hierarchy ​

  • Omit<FlowProps, "id" | "modelValue">

    ↳ State

Table of contents ​

Properties ​

Properties ​

applyDefault ​

• applyDefault: boolean

Overrides ​

Omit.applyDefault


ariaLiveMessage ​

• ariaLiveMessage: string


autoConnect ​

• autoConnect: boolean | Connector

Overrides ​

Omit.autoConnect


autoPanOnConnect ​

• autoPanOnConnect: boolean

Overrides ​

Omit.autoPanOnConnect


autoPanOnNodeDrag ​

• autoPanOnNodeDrag: boolean

Overrides ​

Omit.autoPanOnNodeDrag


autoPanSpeed ​

• autoPanSpeed: number

The speed at which the viewport pans while dragging a node or a selection box.

Default

ts
15

Overrides ​

Omit.autoPanSpeed


connectOnClick ​

• connectOnClick: boolean

Overrides ​

Omit.connectOnClick


connectionClickStartHandle ​

• connectionClickStartHandle: null | ConnectingHandle


connectionEndHandle ​

• connectionEndHandle: null | ConnectingHandle


connectionLineOptions ​

• connectionLineOptions: ConnectionLineOptions

Overrides ​

Omit.connectionLineOptions


connectionLineStyle ​

• connectionLineStyle: null | CSSProperties

Deprecated

use ConnectionLineOptions.style

Overrides ​

Omit.connectionLineStyle


connectionLineType ​

• connectionLineType: null | ConnectionLineType

Deprecated

use ConnectionLineOptions.type

Overrides ​

Omit.connectionLineType


connectionLookup ​

• connectionLookup: ConnectionLookup


connectionMode ​

• connectionMode: ConnectionMode

Overrides ​

Omit.connectionMode


connectionPosition ​

• connectionPosition: XYPosition


connectionRadius ​

• connectionRadius: number

Overrides ​

Omit.connectionRadius


connectionStartHandle ​

• connectionStartHandle: null | ConnectingHandle


connectionStatus ​

• connectionStatus: null | ConnectionStatus


d3Selection ​

• Readonly d3Selection: null | D3Selection


d3Zoom ​

• Readonly d3Zoom: null | D3Zoom


d3ZoomHandler ​

• Readonly d3ZoomHandler: null | D3ZoomHandler


defaultEdgeOptions ​

• defaultEdgeOptions: undefined | DefaultEdgeOptions

Overrides ​

Omit.defaultEdgeOptions


defaultMarkerColor ​

• defaultMarkerColor: string

Overrides ​

Omit.defaultMarkerColor


defaultViewport ​

• defaultViewport: Partial<ViewportTransform>

Overrides ​

Omit.defaultViewport


deleteKeyCode ​

• deleteKeyCode: null | KeyFilter

Overrides ​

Omit.deleteKeyCode


dimensions ​

• Readonly dimensions: Dimensions

viewport dimensions - do not change!


disableKeyboardA11y ​

• disableKeyboardA11y: boolean

Overrides ​

Omit.disableKeyboardA11y


edgeTypes ​

• Optional edgeTypes: EdgeTypesObject

either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">)

Inherited from ​

Omit.edgeTypes


edgeUpdaterRadius ​

• edgeUpdaterRadius: number

Overrides ​

Omit.edgeUpdaterRadius


edges ​

• edges: GraphEdge[]

all stored edges

Overrides ​

Omit.edges


edgesFocusable ​

• edgesFocusable: boolean

Overrides ​

Omit.edgesFocusable


edgesUpdatable ​

• edgesUpdatable: EdgeUpdatable

Overrides ​

Omit.edgesUpdatable


elementsSelectable ​

• elementsSelectable: boolean

Overrides ​

Omit.elementsSelectable


elevateEdgesOnSelect ​

• elevateEdgesOnSelect: boolean

Overrides ​

Omit.elevateEdgesOnSelect


elevateNodesOnSelect ​

• elevateNodesOnSelect: boolean

Overrides ​

Omit.elevateNodesOnSelect


fitViewOnInit ​

• fitViewOnInit: boolean

Overrides ​

Omit.fitViewOnInit


fitViewOnInitDone ​

• fitViewOnInitDone: boolean


hooks ​

• Readonly hooks: Readonly<{ clickConnectEnd: EventHookExtended<undefined | MouseEvent | TouchEvent> ; clickConnectStart: EventHookExtended<{ event?: MouseEvent | TouchEvent } & OnConnectStartParams> ; connect: EventHookExtended<Connection> ; connectEnd: EventHookExtended<undefined | MouseEvent | TouchEvent> ; connectStart: EventHookExtended<{ event?: MouseEvent | TouchEvent } & OnConnectStartParams> ; edgeClick: EventHookExtended<EdgeMouseEvent> ; edgeContextMenu: EventHookExtended<EdgeMouseEvent> ; edgeDoubleClick: EventHookExtended<EdgeMouseEvent> ; edgeMouseEnter: EventHookExtended<EdgeMouseEvent> ; edgeMouseLeave: EventHookExtended<EdgeMouseEvent> ; edgeMouseMove: EventHookExtended<EdgeMouseEvent> ; edgeUpdate: EventHookExtended<EdgeUpdateEvent> ; edgeUpdateEnd: EventHookExtended<EdgeMouseEvent> ; edgeUpdateStart: EventHookExtended<EdgeMouseEvent> ; edgesChange: EventHookExtended<EdgeChange[]> ; error: EventHookExtended<VueFlowError<ErrorCode, [] | [id?: string] | [id: null | string] | [id: string, parentId: string] | [type: string] | [id: string] | [id: string] | [id: string, source: string] | [id: string, target: string] | [type: string] | [id: string, source: string, target: string] | [id: string, source: string, target: string] | [id: string] | [id: string]>> ; init: EventHookExtended<VueFlowStore> ; miniMapNodeClick: EventHookExtended<NodeMouseEvent> ; miniMapNodeDoubleClick: EventHookExtended<NodeMouseEvent> ; miniMapNodeMouseEnter: EventHookExtended<NodeMouseEvent> ; miniMapNodeMouseLeave: EventHookExtended<NodeMouseEvent> ; miniMapNodeMouseMove: EventHookExtended<NodeMouseEvent> ; move: EventHookExtended<{ event: WheelEvent | D3ZoomEvent<HTMLDivElement, any> ; flowTransform: ViewportTransform }> ; moveEnd: EventHookExtended<{ event: WheelEvent | D3ZoomEvent<HTMLDivElement, any> ; flowTransform: ViewportTransform }> ; moveStart: EventHookExtended<{ event: WheelEvent | D3ZoomEvent<HTMLDivElement, any> ; flowTransform: ViewportTransform }> ; nodeClick: EventHookExtended<NodeMouseEvent> ; nodeContextMenu: EventHookExtended<NodeMouseEvent> ; nodeDoubleClick: EventHookExtended<NodeMouseEvent> ; nodeDrag: EventHookExtended<NodeDragEvent> ; nodeDragStart: EventHookExtended<NodeDragEvent> ; nodeDragStop: EventHookExtended<NodeDragEvent> ; nodeMouseEnter: EventHookExtended<NodeMouseEvent> ; nodeMouseLeave: EventHookExtended<NodeMouseEvent> ; nodeMouseMove: EventHookExtended<NodeMouseEvent> ; nodesChange: EventHookExtended<NodeChange[]> ; nodesInitialized: EventHookExtended<GraphNode<any, any, string>[]> ; paneClick: EventHookExtended<MouseEvent> ; paneContextMenu: EventHookExtended<MouseEvent> ; paneMouseEnter: EventHookExtended<PointerEvent> ; paneMouseLeave: EventHookExtended<PointerEvent> ; paneMouseMove: EventHookExtended<PointerEvent> ; paneReady: EventHookExtended<VueFlowStore> ; paneScroll: EventHookExtended<undefined | WheelEvent> ; selectionContextMenu: EventHookExtended<{ event: MouseEvent ; nodes: GraphNode<any, any, string>[] }> ; selectionDrag: EventHookExtended<NodeDragEvent> ; selectionDragStart: EventHookExtended<NodeDragEvent> ; selectionDragStop: EventHookExtended<NodeDragEvent> ; selectionEnd: EventHookExtended<MouseEvent> ; selectionStart: EventHookExtended<MouseEvent> ; updateNodeInternals: EventHookExtended<string[]> ; viewportChange: EventHookExtended<ViewportTransform> ; viewportChangeEnd: EventHookExtended<ViewportTransform> ; viewportChangeStart: EventHookExtended<ViewportTransform> }>

Event hooks, you can manipulate the triggers at your own peril


initialized ​

• initialized: boolean


isValidConnection ​

• isValidConnection: null | ValidConnectionFunc

Overrides ​

Omit.isValidConnection


maxZoom ​

• maxZoom: number

use setMaxZoom action to change maxZoom

Overrides ​

Omit.maxZoom


minZoom ​

• minZoom: number

use setMinZoom action to change minZoom

Overrides ​

Omit.minZoom


multiSelectionActive ​

• multiSelectionActive: boolean


multiSelectionKeyCode ​

• multiSelectionKeyCode: null | KeyFilter

Overrides ​

Omit.multiSelectionKeyCode


noDragClassName ​

• noDragClassName: string

Overrides ​

Omit.noDragClassName


noPanClassName ​

• noPanClassName: string

Overrides ​

Omit.noPanClassName


noWheelClassName ​

• noWheelClassName: string

Overrides ​

Omit.noWheelClassName


nodeDragThreshold ​

• nodeDragThreshold: number

Overrides ​

Omit.nodeDragThreshold


nodeExtent ​

• nodeExtent: CoordinateExtent | CoordinateExtentRange

Overrides ​

Omit.nodeExtent


nodeTypes ​

• Optional nodeTypes: NodeTypesObject

either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">)

Inherited from ​

Omit.nodeTypes


nodes ​

• nodes: GraphNode<any, any, string>[]

all stored nodes

Overrides ​

Omit.nodes


nodesConnectable ​

• nodesConnectable: boolean

Overrides ​

Omit.nodesConnectable


nodesDraggable ​

• nodesDraggable: boolean

Overrides ​

Omit.nodesDraggable


nodesFocusable ​

• nodesFocusable: boolean

Overrides ​

Omit.nodesFocusable


nodesSelectionActive ​

• nodesSelectionActive: boolean


onlyRenderVisibleElements ​

• onlyRenderVisibleElements: boolean

if true will skip rendering any elements currently not inside viewport until they become visible

Overrides ​

Omit.onlyRenderVisibleElements


panActivationKeyCode ​

• panActivationKeyCode: null | KeyFilter

Overrides ​

Omit.panActivationKeyCode


panOnDrag ​

• panOnDrag: boolean | number[]

Overrides ​

Omit.panOnDrag


panOnScroll ​

• panOnScroll: boolean

Overrides ​

Omit.panOnScroll


panOnScrollMode ​

• panOnScrollMode: PanOnScrollMode

Overrides ​

Omit.panOnScrollMode


panOnScrollSpeed ​

• panOnScrollSpeed: number

Overrides ​

Omit.panOnScrollSpeed


paneClickDistance ​

• paneClickDistance: number

Overrides ​

Omit.paneClickDistance


paneDragging ​

• paneDragging: boolean


preventScrolling ​

• preventScrolling: boolean

Overrides ​

Omit.preventScrolling


selectNodesOnDrag ​

• selectNodesOnDrag: boolean

Overrides ​

Omit.selectNodesOnDrag


selectionKeyCode ​

• selectionKeyCode: null | KeyFilter

Overrides ​

Omit.selectionKeyCode


selectionMode ​

• selectionMode: SelectionMode

Overrides ​

Omit.selectionMode


snapGrid ​

• snapGrid: SnapGrid

Overrides ​

Omit.snapGrid


snapToGrid ​

• snapToGrid: boolean

Overrides ​

Omit.snapToGrid


translateExtent ​

• translateExtent: CoordinateExtent

use setTranslateExtent action to change translateExtent

Overrides ​

Omit.translateExtent


userSelectionActive ​

• userSelectionActive: boolean


userSelectionRect ​

• userSelectionRect: null | SelectionRect


viewport ​

• Readonly viewport: ViewportTransform

viewport transform x, y, z - do not change!


viewportRef ​

• viewportRef: null | HTMLDivElement

Vue flow viewport element


vueFlowRef ​

• vueFlowRef: null | HTMLDivElement

Vue flow element ref


zoomActivationKeyCode ​

• zoomActivationKeyCode: null | KeyFilter

Overrides ​

Omit.zoomActivationKeyCode


zoomOnDoubleClick ​

• zoomOnDoubleClick: boolean

Overrides ​

Omit.zoomOnDoubleClick


zoomOnPinch ​

• zoomOnPinch: boolean

Overrides ​

Omit.zoomOnPinch


zoomOnScroll ​

• zoomOnScroll: boolean

Overrides ​

Omit.zoomOnScroll

Released under the MIT License.