Skip to content
On this page

Interface: State ​

Hierarchy ​

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


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 style

Overrides ​

Omit.connectionLineStyle


connectionLineType ​

• connectionLineType: null | ConnectionLineType

Deprecated

use type

Overrides ​

Omit.connectionLineType


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: 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<any, any, string>[]

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


hooks ​

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


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


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.