Vue Flow

Appearance

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.

Copyright © 2021-present Burak Cakmakoglu