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 | StartHandle


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 | StartHandle


connectionStatus

• connectionStatus: null | ConnectionStatus


d3Selection

• Readonly d3Selection: null | D3Selection


d3Zoom

• Readonly d3Zoom: null | D3Zoom


d3ZoomHandler

• Readonly d3ZoomHandler: null | D3ZoomHandler


defaultEdgeOptions

• Optional defaultEdgeOptions: 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<{ 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

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


vueFlowVersion

• Readonly vueFlowVersion: string

current vue flow version you're using


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.