Vue Flow

Appearance

Interface: FlowProps ​

Table of contents ​

Properties ​

Properties ​

applyDefault ​

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

autoConnect ​

• Optional autoConnect: boolean | Connector

automatically create an edge when connection is triggered

Deprecated

  • will be removed in the next major version

autoPanOnConnect ​

• Optional autoPanOnConnect: boolean

autoPanOnNodeDrag ​

• Optional autoPanOnNodeDrag: boolean

autoPanSpeed ​

• Optional autoPanSpeed: number

connectOnClick ​

• Optional connectOnClick: boolean

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

connectionLineOptions ​

• Optional connectionLineOptions: ConnectionLineOptions

connectionLineStyle ​

• Optional connectionLineStyle: null | CSSProperties

Deprecated

use ConnectionLineOptions.style

connectionLineType ​

• Optional connectionLineType: null | ConnectionLineType

Deprecated

use ConnectionLineOptions.type

connectionMode ​

• Optional connectionMode: ConnectionMode

connectionRadius ​

• Optional connectionRadius: number

defaultEdgeOptions ​

• Optional defaultEdgeOptions: DefaultEdgeOptions

does not work for the addEdge utility!

defaultMarkerColor ​

• Optional defaultMarkerColor: string

defaultViewport ​

• Optional defaultViewport: Partial<ViewportTransform>

deleteKeyCode ​

• Optional deleteKeyCode: null | KeyFilter

disableKeyboardA11y ​

• Optional disableKeyboardA11y: boolean

edgeTypes ​

• Optional edgeTypes: EdgeTypesObject

either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">)

edgeUpdaterRadius ​

• Optional edgeUpdaterRadius: number

edges ​

• Optional edges: Edge[]

edgesFocusable ​

• Optional edgesFocusable: boolean

edgesUpdatable ​

• Optional edgesUpdatable: EdgeUpdatable

elementsSelectable ​

• Optional elementsSelectable: boolean

elevateEdgesOnSelect ​

• Optional elevateEdgesOnSelect: boolean

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

elevateNodesOnSelect ​

• Optional elevateNodesOnSelect: boolean

elevates nodes when selected and applies z-Index + 1000

fitViewOnInit ​

• Optional fitViewOnInit: boolean

will be renamed to fitView

id ​

• Optional id: string

isValidConnection ​

• Optional isValidConnection: null | ValidConnectionFunc

maxZoom ​

• Optional maxZoom: number

minZoom ​

• Optional minZoom: number

modelValue ​

• Optional modelValue: Elements<any, any, any, any>

all elements (nodes + edges)

Deprecated

use FlowProps.nodes & FlowProps.nodes instead

multiSelectionKeyCode ​

• Optional multiSelectionKeyCode: null | KeyFilter

noDragClassName ​

• Optional noDragClassName: string

noPanClassName ​

• Optional noPanClassName: string

noWheelClassName ​

• Optional noWheelClassName: string

nodeDragThreshold ​

• Optional nodeDragThreshold: number

nodeExtent ​

• Optional nodeExtent: CoordinateExtent | CoordinateExtentRange

nodeTypes ​

• Optional nodeTypes: NodeTypesObject

either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">)

nodes ​

• Optional nodes: Node<any, any, string>[]

nodesConnectable ​

• Optional nodesConnectable: boolean

nodesDraggable ​

• Optional nodesDraggable: boolean

nodesFocusable ​

• Optional nodesFocusable: boolean

onlyRenderVisibleElements ​

• Optional onlyRenderVisibleElements: boolean

panActivationKeyCode ​

• Optional panActivationKeyCode: null | KeyFilter

panOnDrag ​

• Optional panOnDrag: boolean | number[]

move pane on drag, replaced prop paneMovable

panOnScroll ​

• Optional panOnScroll: boolean

panOnScrollMode ​

• Optional panOnScrollMode: PanOnScrollMode

panOnScrollSpeed ​

• Optional panOnScrollSpeed: number

paneClickDistance ​

• Optional paneClickDistance: number

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

Default

ts
0

preventScrolling ​

• Optional preventScrolling: boolean

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

selectNodesOnDrag ​

• Optional selectNodesOnDrag: boolean

selectionKeyCode ​

• Optional selectionKeyCode: null | KeyFilter

selectionMode ​

• Optional selectionMode: SelectionMode

snapGrid ​

• Optional snapGrid: SnapGrid

snapToGrid ​

• Optional snapToGrid: boolean

translateExtent ​

• Optional translateExtent: CoordinateExtent

zoomActivationKeyCode ​

• Optional zoomActivationKeyCode: null | KeyFilter

zoomOnDoubleClick ​

• Optional zoomOnDoubleClick: boolean

zoomOnPinch ​

• Optional zoomOnPinch: boolean

zoomOnScroll ​

• Optional zoomOnScroll: boolean

Released under the MIT License.

Copyright © 2021-present Burak Cakmakoglu