@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