Skip to content

@vue-flow/monorepoDocs


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

VueFlow v1.42 中文网 - 粤ICP备13048890号