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
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