Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface State

Hierarchy

Index

Properties

applyDefault: boolean
connectOnClick: boolean
connectionHandleId: null | string
connectionHandleType: null | HandleType
connectionLineStyle: null | CSSProperties
connectionLineType: ConnectionLineType
connectionMode: ConnectionMode
connectionNodeId: null | string
connectionPosition: XYPosition
connectionStartHandle: null | StartHandle
d3Selection: null | D3Selection
d3Zoom: null | D3Zoom
d3ZoomHandler: null | D3ZoomHandler
defaultEdgeOptions?: DefaultEdgeOptions
defaultMarkerColor: string
defaultPosition: [number, number]
defaultZoom: number
deleteKeyCode: KeyCode
dimensions: Dimensions

viewport dimensions - do not change!

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: number
edges: GraphEdge<any>[]

all stored edges

edgesUpdatable: boolean
elementsSelectable: boolean
fitViewOnInit?: boolean
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: boolean
instance: null | FlowInstance
maxZoom: number

use setMaxZoom action to change maxZoom

minZoom: number

use setMinZoom action to change minZoom

multiSelectionActive: boolean
multiSelectionKeyCode: KeyCode
noDragClassName?: string
noPanClassName?: string
noWheelClassName?: string
nodeExtent: CoordinateExtent
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: GraphNode<any>[]

all stored nodes

nodesConnectable: boolean
nodesDraggable: boolean
nodesSelectionActive: boolean
onlyRenderVisibleElements: boolean

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

panOnDrag: boolean
panOnScroll: boolean
panOnScrollMode: PanOnScrollMode
panOnScrollSpeed: number
preventScrolling: boolean
selectNodesOnDrag: boolean
selectedNodesBbox: Rect
selectionKeyCode: KeyCode
snapGrid: SnapGrid
snapToGrid: boolean
translateExtent: CoordinateExtent

use setTranslateExtent action to change translateExtent

userSelectionActive: boolean
viewport: Viewport

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

vueFlowVersion: string

current vue flow version you're using

zoomActivationKeyCode: KeyCode
zoomOnDoubleClick: boolean
zoomOnPinch: boolean
zoomOnScroll: boolean

Generated using TypeDoc