Interface: State #

Hierarchy #

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

  ↳ State

Table of contents #

Properties #

• applyDefault
• ariaLiveMessage
• autoConnect
• autoPanOnConnect
• autoPanOnNodeDrag
• connectOnClick
• connectionClickStartHandle
• connectionLineOptions
• connectionLineStyle
• connectionLineType
• connectionMode
• connectionPosition
• connectionRadius
• connectionStartHandle
• connectionStatus
• d3Selection
• d3Zoom
• d3ZoomHandler
• defaultEdgeOptions
• defaultMarkerColor
• defaultViewport
• deleteKeyCode
• dimensions
• disableKeyboardA11y
• edgeTypes
• edgeUpdaterRadius
• edges
• edgesFocusable
• edgesUpdatable
• elementsSelectable
• elevateEdgesOnSelect
• elevateNodesOnSelect
• fitViewOnInit
• hooks
• initialized
• isValidConnection
• maxZoom
• minZoom
• multiSelectionActive
• multiSelectionKeyCode
• noDragClassName
• noPanClassName
• noWheelClassName
• nodeExtent
• nodeTypes
• nodes
• nodesConnectable
• nodesDraggable
• nodesFocusable
• nodesSelectionActive
• onlyRenderVisibleElements
• panActivationKeyCode
• panOnDrag
• panOnScroll
• panOnScrollMode
• panOnScrollSpeed
• paneDragging
• preventScrolling
• selectNodesOnDrag
• selectionKeyCode
• selectionMode
• snapGrid
• snapToGrid
• translateExtent
• userSelectionActive
• userSelectionRect
• viewport
• viewportRef
• vueFlowRef
• vueFlowVersion
• zoomActivationKeyCode
• zoomOnDoubleClick
• zoomOnPinch
• zoomOnScroll

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