Appearance
@vue-flow/monorepo • Docs
Interface: State
Extends
Omit<FlowProps,"id"|"modelValue">
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
15Overrides
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
readonlyd3Selection:null|D3Selection
d3Zoom
readonlyd3Zoom:null|D3Zoom
d3ZoomHandler
readonlyd3ZoomHandler: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
readonlydimensions: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?
optionaledgeTypes: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
readonlyhooks: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?
optionalnodeTypes: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
0Overrides
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
readonlyviewport: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