Interface: FlowProps #

Table of contents #

Properties #

• applyDefault
• autoConnect
• autoPanOnConnect
• autoPanOnNodeDrag
• connectOnClick
• connectionLineOptions
• connectionLineStyle
• connectionLineType
• connectionMode
• connectionRadius
• defaultEdgeOptions
• defaultMarkerColor
• defaultViewport
• deleteKeyCode
• disableKeyboardA11y
• edgeTypes
• edgeUpdaterRadius
• edges
• edgesFocusable
• edgesUpdatable
• elementsSelectable
• elevateEdgesOnSelect
• elevateNodesOnSelect
• fitViewOnInit
• id
• isValidConnection
• maxZoom
• minZoom
• modelValue
• multiSelectionKeyCode
• noDragClassName
• noPanClassName
• noWheelClassName
• nodeExtent
• nodeTypes
• nodes
• nodesConnectable
• nodesDraggable
• nodesFocusable
• onlyRenderVisibleElements
• panActivationKeyCode
• panOnDrag
• panOnScroll
• panOnScrollMode
• panOnScrollSpeed
• preventScrolling
• selectNodesOnDrag
• selectionKeyCode
• selectionMode
• snapGrid
• snapToGrid
• translateExtent
• zoomActivationKeyCode
• zoomOnDoubleClick
• zoomOnPinch
• zoomOnScroll

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

autoConnect #

• Optional autoConnect: boolean | Connector

automatically create an edge when connection is triggered

autoPanOnConnect #

• Optional autoPanOnConnect: boolean

autoPanOnNodeDrag #

• Optional autoPanOnNodeDrag: boolean

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 style

connectionLineType #

• Optional connectionLineType: null | ConnectionLineType

Deprecated

use 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: 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<any, any>[]

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

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>

multiSelectionKeyCode #

• Optional multiSelectionKeyCode: null | KeyFilter

noDragClassName #

• Optional noDragClassName: string

noPanClassName #

• Optional noPanClassName: string

noWheelClassName #

• Optional noWheelClassName: string

nodeExtent #

• Optional nodeExtent: CoordinateExtent

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

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

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