Vue Flow

Appearance

@vue-flow/monorepo • Docs

Interface: State ​

Extends ​

Properties ​

applyDefault ​

applyDefault: boolean

apply default change handlers for position, dimensions, adding/removing nodes. set this to false if you want to apply the changes manually

Deprecated ​

  • will be removed in the next major version, changes will not be auto applied in the future

Overrides ​

Omit.applyDefault

ariaLiveMessage ​

ariaLiveMessage: string

autoConnect ​

autoConnect: boolean | Connector

automatically create an edge when connection is triggered

Deprecated ​

  • will be removed in the next major version

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

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

connectOnClick ​

connectOnClick: boolean

allow connection with click handlers, i.e. support touch devices

Overrides ​

Omit.connectOnClick

d3Selection ​

readonly d3Selection: null | D3Selection

d3Zoom ​

readonly d3Zoom: null | D3Zoom

d3ZoomHandler ​

readonly d3ZoomHandler: null | D3ZoomHandler

defaultEdgeOptions ​

defaultEdgeOptions: undefined | DefaultEdgeOptions

does not work for the addEdge utility!

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

edges ​

edges: GraphEdge[]

all stored edges

Overrides ​

Omit.edges

edgesFocusable ​

edgesFocusable: boolean

Overrides ​

Omit.edgesFocusable

edgesUpdatable ​

edgesUpdatable: EdgeUpdatable

Overrides ​

Omit.edgesUpdatable

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

elementsSelectable ​

elementsSelectable: boolean

Overrides ​

Omit.elementsSelectable

elevateEdgesOnSelect ​

elevateEdgesOnSelect: boolean

elevates edges when selected and applies z-Index to put them above their nodes

Overrides ​

Omit.elevateEdgesOnSelect

elevateNodesOnSelect ​

elevateNodesOnSelect: boolean

elevates nodes when selected and applies z-Index + 1000

Overrides ​

Omit.elevateNodesOnSelect

fitViewOnInit ​

fitViewOnInit: boolean

will be renamed to fitView

Overrides ​

Omit.fitViewOnInit

fitViewOnInitDone ​

fitViewOnInitDone: boolean

hooks ​

readonly hooks: Readonly<object>

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

Type declaration ​

clickConnectEnd ​

clickConnectEnd: EventHookExtended<undefined | MouseEvent | TouchEvent>

clickConnectStart ​

clickConnectStart: EventHookExtended<object & OnConnectStartParams>

connect ​

connect: EventHookExtended<Connection>

connectEnd ​

connectEnd: EventHookExtended<undefined | MouseEvent | TouchEvent>

connectStart ​

connectStart: EventHookExtended<object & OnConnectStartParams>

edgeClick ​

edgeClick: EventHookExtended<EdgeMouseEvent>

edgeContextMenu ​

edgeContextMenu: EventHookExtended<EdgeMouseEvent>

edgeDoubleClick ​

edgeDoubleClick: EventHookExtended<EdgeMouseEvent>

edgeMouseEnter ​

edgeMouseEnter: EventHookExtended<EdgeMouseEvent>

edgeMouseLeave ​

edgeMouseLeave: EventHookExtended<EdgeMouseEvent>

edgeMouseMove ​

edgeMouseMove: EventHookExtended<EdgeMouseEvent>

edgesChange ​

edgesChange: EventHookExtended<EdgeChange[]>

edgeUpdate ​

edgeUpdate: EventHookExtended<EdgeUpdateEvent>

edgeUpdateEnd ​

edgeUpdateEnd: EventHookExtended<EdgeMouseEvent>

edgeUpdateStart ​

edgeUpdateStart: EventHookExtended<EdgeMouseEvent>

error ​

error: EventHookExtended<VueFlowError<ErrorCode, [] | [string] | [null | string] | [string, string] | [string] | [string] | [string] | [string, string] | [string, string] | [string] | [string, string, string] | [string, string, string] | [string] | [string]>>

init ​

init: EventHookExtended<VueFlowStore>

miniMapNodeClick ​

miniMapNodeClick: EventHookExtended<NodeMouseEvent>

miniMapNodeDoubleClick ​

miniMapNodeDoubleClick: EventHookExtended<NodeMouseEvent>

miniMapNodeMouseEnter ​

miniMapNodeMouseEnter: EventHookExtended<NodeMouseEvent>

miniMapNodeMouseLeave ​

miniMapNodeMouseLeave: EventHookExtended<NodeMouseEvent>

miniMapNodeMouseMove ​

miniMapNodeMouseMove: EventHookExtended<NodeMouseEvent>

move ​

move: EventHookExtended<object>

Type declaration ​
event ​

event: WheelEvent | D3ZoomEvent<HTMLDivElement, any>

flowTransform ​

flowTransform: ViewportTransform

moveEnd ​

moveEnd: EventHookExtended<object>

Type declaration ​
event ​

event: WheelEvent | D3ZoomEvent<HTMLDivElement, any>

flowTransform ​

flowTransform: ViewportTransform

moveStart ​

moveStart: EventHookExtended<object>

Type declaration ​
event ​

event: WheelEvent | D3ZoomEvent<HTMLDivElement, any>

flowTransform ​

flowTransform: ViewportTransform

nodeClick ​

nodeClick: EventHookExtended<NodeMouseEvent>

nodeContextMenu ​

nodeContextMenu: EventHookExtended<NodeMouseEvent>

nodeDoubleClick ​

nodeDoubleClick: EventHookExtended<NodeMouseEvent>

nodeDrag ​

nodeDrag: EventHookExtended<NodeDragEvent>

nodeDragStart ​

nodeDragStart: EventHookExtended<NodeDragEvent>

nodeDragStop ​

nodeDragStop: EventHookExtended<NodeDragEvent>

nodeMouseEnter ​

nodeMouseEnter: EventHookExtended<NodeMouseEvent>

nodeMouseLeave ​

nodeMouseLeave: EventHookExtended<NodeMouseEvent>

nodeMouseMove ​

nodeMouseMove: EventHookExtended<NodeMouseEvent>

nodesChange ​

nodesChange: EventHookExtended<NodeChange[]>

nodesInitialized ​

nodesInitialized: EventHookExtended<GraphNode<any, any, string>[]>

paneClick ​

paneClick: EventHookExtended<MouseEvent>

paneContextMenu ​

paneContextMenu: EventHookExtended<MouseEvent>

paneMouseEnter ​

paneMouseEnter: EventHookExtended<PointerEvent>

paneMouseLeave ​

paneMouseLeave: EventHookExtended<PointerEvent>

paneMouseMove ​

paneMouseMove: EventHookExtended<PointerEvent>

paneReady ​

paneReady: EventHookExtended<VueFlowStore>

Deprecated ​

use init instead

paneScroll ​

paneScroll: EventHookExtended<undefined | WheelEvent>

selectionContextMenu ​

selectionContextMenu: EventHookExtended<object>

Type declaration ​
event ​

event: MouseEvent

nodes ​

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

selectionDrag ​

selectionDrag: EventHookExtended<NodeDragEvent>

selectionDragStart ​

selectionDragStart: EventHookExtended<NodeDragEvent>

selectionDragStop ​

selectionDragStop: EventHookExtended<NodeDragEvent>

selectionEnd ​

selectionEnd: EventHookExtended<MouseEvent>

selectionStart ​

selectionStart: EventHookExtended<MouseEvent>

updateNodeInternals ​

updateNodeInternals: EventHookExtended<string[]>

viewportChange ​

viewportChange: EventHookExtended<ViewportTransform>

viewportChangeEnd ​

viewportChangeEnd: EventHookExtended<ViewportTransform>

viewportChangeStart ​

viewportChangeStart: EventHookExtended<ViewportTransform>

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

nodeDragThreshold ​

nodeDragThreshold: number

Overrides ​

Omit.nodeDragThreshold

nodeExtent ​

nodeExtent: CoordinateExtent | CoordinateExtentRange

Overrides ​

Omit.nodeExtent

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

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

noDragClassName ​

noDragClassName: string

Overrides ​

Omit.noDragClassName

noPanClassName ​

noPanClassName: string

Overrides ​

Omit.noPanClassName

noWheelClassName ​

noWheelClassName: string

Overrides ​

Omit.noWheelClassName

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

paneClickDistance ​

paneClickDistance: number

Distance that the mouse can move between mousedown/up that will trigger a click

Default ​

ts
0

Overrides ​

Omit.paneClickDistance

paneDragging ​

paneDragging: boolean

panOnDrag ​

panOnDrag: boolean | number[]

move pane on drag, replaced prop paneMovable

Overrides ​

Omit.panOnDrag

panOnScroll ​

panOnScroll: boolean

Overrides ​

Omit.panOnScroll

panOnScrollMode ​

panOnScrollMode: PanOnScrollMode

Overrides ​

Omit.panOnScrollMode

panOnScrollSpeed ​

panOnScrollSpeed: number

Overrides ​

Omit.panOnScrollSpeed

preventScrolling ​

preventScrolling: boolean

If set to false, scrolling inside the viewport will be disabled and instead the page scroll will be used

Overrides ​

Omit.preventScrolling

selectionKeyCode ​

selectionKeyCode: null | false | KeyFilter

Overrides ​

Omit.selectionKeyCode

selectionMode ​

selectionMode: SelectionMode

Overrides ​

Omit.selectionMode

selectNodesOnDrag ​

selectNodesOnDrag: boolean

Overrides ​

Omit.selectNodesOnDrag

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