State | @braks/vue-flow

Hierarchy

Omit<FlowOptions, "id" | "modelValue">
- State

Index

Properties

applyDefault

applyDefault: boolean

connectOnClick

connectOnClick: boolean

connectionHandleId

connectionHandleId: null | string

connectionHandleType

connectionHandleType: null | HandleType

connectionLineStyle

connectionLineStyle: null | CSSProperties

connectionLineType

connectionLineType: ConnectionLineType

connectionMode

connectionMode: ConnectionMode

connectionNodeId

connectionNodeId: null | string

connectionPosition

connectionPosition: XYPosition

connectionStartHandle

connectionStartHandle: null | StartHandle

Readonly d3Selection

d3Selection: null | D3Selection

Readonly d3Zoom

d3Zoom: null | D3Zoom

Readonly d3ZoomHandler

d3ZoomHandler: null | D3ZoomHandler

Optional defaultEdgeOptions

defaultEdgeOptions?: DefaultEdgeOptions

defaultMarkerColor

defaultMarkerColor: string

defaultPosition

defaultPosition: [number, number]

defaultZoom

defaultZoom: number

deleteKeyCode

deleteKeyCode: KeyCode

Readonly dimensions

dimensions: Dimensions

viewport dimensions - do not change!

Optional edgeTypes

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

either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">)

edgeUpdaterRadius

edgeUpdaterRadius: number

edges

edges: GraphEdge<any>[]

all stored edges

edgesUpdatable

edgesUpdatable: boolean

elementsSelectable

elementsSelectable: boolean

Optional fitViewOnInit

fitViewOnInit?: boolean

Readonly hooks

hooks: Readonly<{ connect: EventHook<Connection>; connectEnd: EventHook<MouseEvent>; connectStart: EventHook<{ event: MouseEvent } & OnConnectStartParams>; connectStop: EventHook<MouseEvent>; edgeClick: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgeContextMenu: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgeDoubleClick: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgeMouseEnter: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgeMouseLeave: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgeMouseMove: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgeUpdate: EventHook<{ connection: Connection; edge: GraphEdge<any> }>; edgeUpdateEnd: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgeUpdateStart: EventHook<{ edge: GraphEdge<any>; event: MouseEvent }>; edgesChange: EventHook<EdgeChange[]>; miniMapNodeClick: EventHook<{ event: MouseTouchEvent; node: GraphNode<any> }>; miniMapNodeDoubleClick: EventHook<{ event: MouseTouchEvent; node: GraphNode<any> }>; move: EventHook<{ event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }>; moveEnd: EventHook<{ event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }>; moveStart: EventHook<{ event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }>; nodeClick: EventHook<{ event: MouseTouchEvent; node: GraphNode<any> }>; nodeContextMenu: EventHook<{ event: MouseEvent; node: GraphNode<any> }>; nodeDoubleClick: EventHook<{ event: MouseTouchEvent; node: GraphNode<any> }>; nodeDrag: EventHook<{ event: MouseTouchEvent; node: GraphNode<any> }>; nodeDragStart: EventHook<{ event: MouseTouchEvent; node: GraphNode<any> }>; nodeDragStop: EventHook<{ event: MouseTouchEvent; node: GraphNode<any> }>; nodeMouseEnter: EventHook<{ event: MouseEvent; node: GraphNode<any> }>; nodeMouseLeave: EventHook<{ event: MouseEvent; node: GraphNode<any> }>; nodeMouseMove: EventHook<{ event: MouseEvent; node: GraphNode<any> }>; nodesChange: EventHook<NodeChange[]>; paneClick: EventHook<MouseEvent>; paneContextMenu: EventHook<MouseEvent>; paneReady: EventHook<FlowInstance>; paneScroll: EventHook<undefined | WheelEvent>; selectionContextMenu: EventHook<{ event: MouseEvent; nodes: GraphNode<any>[] }>; selectionDrag: EventHook<{ event: MouseTouchEvent; nodes: GraphNode<any>[] }>; selectionDragStart: EventHook<{ event: MouseTouchEvent; nodes: GraphNode<any>[] }>; selectionDragStop: EventHook<{ event: MouseTouchEvent; nodes: GraphNode<any>[] }> }>

Event hooks, you can manipulate the triggers at your own peril

initialized

initialized: boolean

Readonly instance

instance: null | FlowInstance

maxZoom

maxZoom: number

use setMaxZoom action to change maxZoom

minZoom

minZoom: number

use setMinZoom action to change minZoom

multiSelectionActive

multiSelectionActive: boolean

multiSelectionKeyCode

multiSelectionKeyCode: KeyCode

Optional noDragClassName

noDragClassName?: string

Optional noPanClassName

noPanClassName?: string

Optional noWheelClassName

noWheelClassName?: string

nodeExtent

nodeExtent: CoordinateExtent

Optional nodeTypes

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

either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">)

nodes

nodes: GraphNode<any>[]

all stored nodes

nodesConnectable

nodesConnectable: boolean

nodesDraggable

nodesDraggable: boolean

nodesSelectionActive

nodesSelectionActive: boolean

onlyRenderVisibleElements

onlyRenderVisibleElements: boolean

if true will skip rendering any elements currently not inside viewport until they become visible

panOnDrag

panOnDrag: boolean

panOnScroll

panOnScroll: boolean

panOnScrollMode

panOnScrollMode: PanOnScrollMode

panOnScrollSpeed

panOnScrollSpeed: number

preventScrolling

preventScrolling: boolean

selectNodesOnDrag

selectNodesOnDrag: boolean

selectedNodesBbox

selectedNodesBbox: Rect

selectionKeyCode

selectionKeyCode: KeyCode

snapGrid

snapGrid: SnapGrid

snapToGrid

snapToGrid: boolean

translateExtent

translateExtent: CoordinateExtent

use setTranslateExtent action to change translateExtent

userSelectionActive

userSelectionActive: boolean

Readonly viewport

viewport: Viewport

viewport transform x, y, z - do not change!

Readonly vueFlowVersion

vueFlowVersion: string

current vue flow version you're using

zoomActivationKeyCode

zoomActivationKeyCode: KeyCode

zoomOnDoubleClick

zoomOnDoubleClick: boolean

zoomOnPinch

zoomOnPinch: boolean

zoomOnScroll

zoomOnScroll: boolean