@braks/vue-flow / State

Interface: State

Hierarchy

Table of contents

Properties

Properties

applyDefault

applyDefault: boolean

Overrides

Omit.applyDefault


autoConnect

autoConnect: boolean | Connector

Overrides

Omit.autoConnect


connectOnClick

connectOnClick: boolean

Overrides

Omit.connectOnClick


connectionHandleId

connectionHandleId: null | string


connectionHandleType

connectionHandleType: null | HandleType


connectionLineOptions

connectionLineOptions: ConnectionLineOptions

Overrides

Omit.connectionLineOptions


connectionLineStyle

connectionLineStyle: null | CSSProperties

deprecated use ConnectionLineOptions.style

Overrides

Omit.connectionLineStyle


connectionLineType

connectionLineType: ConnectionLineType

deprecated use ConnectionLineOptions.type

Overrides

Omit.connectionLineType


connectionMode

connectionMode: ConnectionMode

Overrides

Omit.connectionMode


connectionNodeId

connectionNodeId: null | string


connectionPosition

connectionPosition: XYPosition


connectionStartHandle

connectionStartHandle: null | StartHandle


d3Selection

Readonly d3Selection: null | D3Selection


d3Zoom

Readonly d3Zoom: null | D3Zoom


d3ZoomHandler

Readonly d3ZoomHandler: null | D3ZoomHandler


defaultEdgeOptions

Optional defaultEdgeOptions: DefaultEdgeOptions

Overrides

Omit.defaultEdgeOptions


defaultMarkerColor

defaultMarkerColor: string

Overrides

Omit.defaultMarkerColor


defaultPosition

defaultPosition: [number, number]

Overrides

Omit.defaultPosition


defaultZoom

defaultZoom: number

Overrides

Omit.defaultZoom


deleteKeyCode

deleteKeyCode: KeyCode

Overrides

Omit.deleteKeyCode


dimensions

Readonly dimensions: Dimensions

viewport dimensions - do not change!


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">)

Inherited from

Omit.edgeTypes


edgeUpdaterRadius

edgeUpdaterRadius: number

Overrides

Omit.edgeUpdaterRadius


edges

edges: GraphEdge<any, any>[]

all stored edges

Overrides

Omit.edges


edgesUpdatable

edgesUpdatable: boolean

Overrides

Omit.edgesUpdatable


elementsSelectable

elementsSelectable: boolean

Overrides

Omit.elementsSelectable


elevateEdgesOnSelect

Optional elevateEdgesOnSelect: boolean

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

Inherited from

Omit.elevateEdgesOnSelect


fitViewOnInit

Optional fitViewOnInit: boolean

Overrides

Omit.fitViewOnInit


hooks

Readonly hooks: Readonly<{ connect: EventHook<Connection> ; connectEnd: EventHook<MouseEvent> ; connectStart: EventHook<{ event: MouseEvent } & OnConnectStartParams> ; connectStop: EventHook<MouseEvent> ; edgeClick: EventHook<EdgeMouseEvent> ; edgeContextMenu: EventHook<EdgeMouseEvent> ; edgeDoubleClick: EventHook<EdgeMouseEvent> ; edgeMouseEnter: EventHook<EdgeMouseEvent> ; edgeMouseLeave: EventHook<EdgeMouseEvent> ; edgeMouseMove: EventHook<EdgeMouseEvent> ; edgeUpdate: EventHook<EdgeUpdateEvent> ; edgeUpdateEnd: EventHook<EdgeMouseEvent> ; edgeUpdateStart: EventHook<EdgeMouseEvent> ; edgesChange: EventHook<EdgeChange[]> ; miniMapNodeClick: EventHook<NodeMouseEvent> ; miniMapNodeDoubleClick: EventHook<NodeMouseEvent> ; miniMapNodeMouseEnter: EventHook<NodeMouseEvent> ; miniMapNodeMouseLeave: EventHook<NodeMouseEvent> ; miniMapNodeMouseMove: EventHook<NodeMouseEvent> ; move: EventHook<{ event: D3ZoomEvent<HTMLDivElement, any> ; flowTransform: ViewpaneTransform }> ; moveEnd: EventHook<{ event: D3ZoomEvent<HTMLDivElement, any> ; flowTransform: ViewpaneTransform }> ; moveStart: EventHook<{ event: D3ZoomEvent<HTMLDivElement, any> ; flowTransform: ViewpaneTransform }> ; nodeClick: EventHook<NodeMouseEvent> ; nodeContextMenu: EventHook<NodeMouseEvent> ; nodeDoubleClick: EventHook<NodeMouseEvent> ; nodeDrag: EventHook<NodeDragEvent> ; nodeDragStart: EventHook<NodeDragEvent> ; nodeDragStop: EventHook<NodeDragEvent> ; nodeMouseEnter: EventHook<NodeMouseEvent> ; nodeMouseLeave: EventHook<NodeMouseEvent> ; nodeMouseMove: EventHook<NodeMouseEvent> ; nodesChange: EventHook<NodeChange[]> ; paneClick: EventHook<MouseEvent> ; paneContextMenu: EventHook<MouseEvent> ; paneReady: EventHook<VueFlowStore> ; paneScroll: EventHook<undefined | WheelEvent> ; selectionContextMenu: EventHook<{ event: MouseEvent ; nodes: GraphNode<any, any>[] }> ; selectionDrag: EventHook<NodeDragEvent> ; selectionDragStart: EventHook<NodeDragEvent> ; selectionDragStop: EventHook<NodeDragEvent> ; updateNodeInternals: EventHook<string[]> }>

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


initialized

initialized: boolean


maxZoom

maxZoom: number

use setMaxZoom action to change maxZoom

Overrides

Omit.maxZoom


minZoom

minZoom: number

use setMinZoom action to change minZoom

Overrides

Omit.minZoom


multiSelectionActive

multiSelectionActive: boolean


multiSelectionKeyCode

multiSelectionKeyCode: KeyCode

Overrides

Omit.multiSelectionKeyCode


noDragClassName

Optional noDragClassName: string

Overrides

Omit.noDragClassName


noPanClassName

Optional noPanClassName: string

Overrides

Omit.noPanClassName


noWheelClassName

Optional noWheelClassName: string

Overrides

Omit.noWheelClassName


nodeExtent

nodeExtent: CoordinateExtent

Overrides

Omit.nodeExtent


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">)

Inherited from

Omit.nodeTypes


nodes

nodes: GraphNode<any, any>[]

all stored nodes

Overrides

Omit.nodes


nodesConnectable

nodesConnectable: boolean

Overrides

Omit.nodesConnectable


nodesDraggable

nodesDraggable: boolean

Overrides

Omit.nodesDraggable


nodesSelectionActive

nodesSelectionActive: boolean


onlyRenderVisibleElements

onlyRenderVisibleElements: boolean

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

Overrides

Omit.onlyRenderVisibleElements


panOnDrag

panOnDrag: boolean

Overrides

Omit.panOnDrag


panOnScroll

panOnScroll: boolean

Overrides

Omit.panOnScroll


panOnScrollMode

panOnScrollMode: PanOnScrollMode

Overrides

Omit.panOnScrollMode


panOnScrollSpeed

panOnScrollSpeed: number

Overrides

Omit.panOnScrollSpeed


preventScrolling

preventScrolling: boolean

Overrides

Omit.preventScrolling


selectNodesOnDrag

selectNodesOnDrag: boolean

Overrides

Omit.selectNodesOnDrag


selectionKeyCode

selectionKeyCode: KeyCode

Overrides

Omit.selectionKeyCode


snapGrid

snapGrid: SnapGrid

Overrides

Omit.snapGrid


snapToGrid

snapToGrid: boolean

Overrides

Omit.snapToGrid


translateExtent

translateExtent: CoordinateExtent

use setTranslateExtent action to change translateExtent

Overrides

Omit.translateExtent


userSelectionActive

userSelectionActive: boolean


viewport

Readonly viewport: Viewport

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


vueFlowVersion

Readonly vueFlowVersion: string

current vue flow version you're using


zoomActivationKeyCode

zoomActivationKeyCode: KeyCode

Overrides

Omit.zoomActivationKeyCode


zoomOnDoubleClick

zoomOnDoubleClick: boolean

Overrides

Omit.zoomOnDoubleClick


zoomOnPinch

zoomOnPinch: boolean

Overrides

Omit.zoomOnPinch


zoomOnScroll

zoomOnScroll: boolean

Overrides

Omit.zoomOnScroll