@braks/vue-flow / FlowProps

Interface: FlowProps

Table of contents

Properties

• applyDefault
• autoConnect
• connectOnClick
• connectionLineOptions
• connectionLineStyle
• connectionLineType
• connectionMode
• defaultEdgeOptions
• defaultMarkerColor
• defaultPosition
• defaultZoom
• deleteKeyCode
• edgeTypes
• edgeUpdaterRadius
• edges
• edgesUpdatable
• elementsSelectable
• elevateEdgesOnSelect
• fitViewOnInit
• id
• maxZoom
• minZoom
• modelValue
• multiSelectionKeyCode
• noDragClassName
• noPanClassName
• noWheelClassName
• nodeExtent
• nodeTypes
• nodes
• nodesConnectable
• nodesDraggable
• onlyRenderVisibleElements
• panOnDrag
• panOnScroll
• panOnScrollMode
• panOnScrollSpeed
• preventScrolling
• selectNodesOnDrag
• selectionKeyCode
• 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

---

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