Skip to content

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.