@braks/vue-flow / FlowProps

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


autoConnect

Optional autoConnect: boolean | Connector

automatically create an edge when connection is triggered


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

deprecated use ConnectionLineOptions.type


connectionMode

Optional connectionMode: ConnectionMode


defaultEdgeOptions

Optional defaultEdgeOptions: DefaultEdgeOptions

does not work for the addEdge utility!


defaultMarkerColor

Optional defaultMarkerColor: string


defaultPosition

Optional defaultPosition: [number, number]


defaultZoom

Optional defaultZoom: number


deleteKeyCode

Optional deleteKeyCode: KeyCode


edgeTypes

Optional edgeTypes: { default: undefined | EdgeComponent ; simplebezier: undefined | EdgeComponent ; smoothstep: undefined | EdgeComponent ; step: undefined | EdgeComponent ; straight: undefined | EdgeComponent } & Record<string, EdgeComponent>

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


edgesUpdatable

Optional edgesUpdatable: boolean


elementsSelectable

Optional elementsSelectable: boolean


elevateEdgesOnSelect

Optional elevateEdgesOnSelect: boolean

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


fitViewOnInit

Optional fitViewOnInit: boolean


id

Optional id: string


maxZoom

Optional maxZoom: number


minZoom

Optional minZoom: number


modelValue

Optional modelValue: Elements<any>


multiSelectionKeyCode

Optional multiSelectionKeyCode: KeyCode


noDragClassName

Optional noDragClassName: string


noPanClassName

Optional noPanClassName: string


noWheelClassName

Optional noWheelClassName: string


nodeExtent

Optional nodeExtent: CoordinateExtent


nodeTypes

Optional nodeTypes: { default: undefined | NodeComponent ; input: undefined | NodeComponent ; output: undefined | NodeComponent } & Record<string, NodeComponent>

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


onlyRenderVisibleElements

Optional onlyRenderVisibleElements: boolean


panOnDrag

Optional panOnDrag: boolean

move pane on drag, replaced prop paneMovable


panOnScroll

Optional panOnScroll: boolean


panOnScrollMode

Optional panOnScrollMode: PanOnScrollMode


panOnScrollSpeed

Optional panOnScrollSpeed: number


preventScrolling

Optional preventScrolling: boolean

enable this to prevent vue flow from scrolling inside the container, i.e. allow for the page to scroll


selectNodesOnDrag

Optional selectNodesOnDrag: boolean


selectionKeyCode

Optional selectionKeyCode: KeyCode


snapGrid

Optional snapGrid: SnapGrid


snapToGrid

Optional snapToGrid: boolean


translateExtent

Optional translateExtent: CoordinateExtent


zoomActivationKeyCode

Optional zoomActivationKeyCode: KeyCode


zoomOnDoubleClick

Optional zoomOnDoubleClick: boolean


zoomOnPinch

Optional zoomOnPinch: boolean


zoomOnScroll

Optional zoomOnScroll: boolean