Interface State

Hierarchy

Properties

__experimentalFeatures?: {
    nestedFlow?: boolean;
}

Type declaration

  • Optional nestedFlow?: boolean
applyDefault: boolean
ariaLiveMessage: string
autoConnect: boolean | Connector
autoPanOnConnect: boolean
autoPanOnNodeDrag: boolean
connectOnClick: boolean
connectionClickStartHandle: null | ConnectingHandle
connectionEndHandle: null | ConnectingHandle
connectionLineOptions: ConnectionLineOptions
connectionLineStyle: null | CSSProperties

Deprecated

use style

connectionLineType: null | ConnectionLineType

Deprecated

use type

connectionMode: ConnectionMode
connectionPosition: XYPosition
connectionRadius: number
connectionStartHandle: null | ConnectingHandle
connectionStatus: null | ConnectionStatus
d3Selection: null | D3Selection
d3Zoom: null | D3Zoom
d3ZoomHandler: null | D3ZoomHandler
defaultEdgeOptions: undefined | DefaultEdgeOptions
defaultMarkerColor: string
defaultViewport: Partial<ViewportTransform>
deleteKeyCode: null | KeyFilter
dimensions: Dimensions

viewport dimensions - do not change!

disableKeyboardA11y: boolean
edgeTypes?: EdgeTypesObject

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

edgeUpdaterRadius: number
edges: GraphEdge<any, any, string>[]

all stored edges

edgesFocusable: boolean
edgesUpdatable: EdgeUpdatable
elementsSelectable: boolean
elevateEdgesOnSelect: boolean
elevateNodesOnSelect: boolean
fitViewOnInit: boolean
hooks: Readonly<{
    clickConnectEnd: EventHook<undefined | MouseEvent | TouchEvent>;
    clickConnectStart: EventHook<{
        event?: MouseEvent | TouchEvent;
    } & OnConnectStartParams>;
    connect: EventHook<Connection>;
    connectEnd: EventHook<undefined | MouseEvent | TouchEvent>;
    connectStart: EventHook<{
        event?: MouseEvent | TouchEvent;
    } & OnConnectStartParams>;
    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[]>;
    error: EventHook<VueFlowError<ErrorCode>>;
    miniMapNodeClick: EventHook<NodeMouseEvent>;
    miniMapNodeDoubleClick: EventHook<NodeMouseEvent>;
    miniMapNodeMouseEnter: EventHook<NodeMouseEvent>;
    miniMapNodeMouseLeave: EventHook<NodeMouseEvent>;
    miniMapNodeMouseMove: EventHook<NodeMouseEvent>;
    move: EventHook<{
        event: D3ZoomEvent<HTMLDivElement, any>;
        flowTransform: ViewportTransform;
    }>;
    moveEnd: EventHook<{
        event: D3ZoomEvent<HTMLDivElement, any>;
        flowTransform: ViewportTransform;
    }>;
    moveStart: EventHook<{
        event: D3ZoomEvent<HTMLDivElement, any>;
        flowTransform: ViewportTransform;
    }>;
    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[]>;
    nodesInitialized: EventHook<GraphNode<any, any, string>[]>;
    paneClick: EventHook<MouseEvent>;
    paneContextMenu: EventHook<MouseEvent>;
    paneMouseEnter: EventHook<MouseEvent>;
    paneMouseLeave: EventHook<MouseEvent>;
    paneMouseMove: EventHook<MouseEvent>;
    paneReady: EventHook<VueFlowStore>;
    paneScroll: EventHook<undefined | WheelEvent>;
    selectionContextMenu: EventHook<{
        event: MouseEvent;
        nodes: GraphNode<any, any, string>[];
    }>;
    selectionDrag: EventHook<NodeDragEvent>;
    selectionDragStart: EventHook<NodeDragEvent>;
    selectionDragStop: EventHook<NodeDragEvent>;
    selectionEnd: EventHook<MouseEvent>;
    selectionStart: EventHook<MouseEvent>;
    updateNodeInternals: EventHook<string[]>;
    viewportChange: EventHook<ViewportTransform>;
    viewportChangeEnd: EventHook<ViewportTransform>;
    viewportChangeStart: EventHook<ViewportTransform>;
}>

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

initialized: boolean
isValidConnection: null | ValidConnectionFunc
maxZoom: number

use setMaxZoom action to change maxZoom

minZoom: number

use setMinZoom action to change minZoom

multiSelectionActive: boolean
multiSelectionKeyCode: null | KeyFilter
noDragClassName: string
noPanClassName: string
noWheelClassName: string
nodeTypes?: NodeTypesObject

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

nodes: GraphNode<any, any, string>[]

all stored nodes

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

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

panActivationKeyCode: null | KeyFilter
panOnDrag: boolean | number[]
panOnScroll: boolean
panOnScrollMode: PanOnScrollMode
panOnScrollSpeed: number
paneDragging: boolean
preventScrolling: boolean
selectNodesOnDrag: boolean
selectionKeyCode: null | KeyFilter
selectionMode: SelectionMode
snapGrid: SnapGrid
snapToGrid: boolean
translateExtent: CoordinateExtent

use setTranslateExtent action to change translateExtent

userSelectionActive: boolean
userSelectionRect: null | SelectionRect

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

viewportRef: null | HTMLDivElement

Vue flow viewport element

vueFlowRef: null | HTMLDivElement

Vue flow element ref

zoomActivationKeyCode: null | KeyFilter
zoomOnDoubleClick: boolean
zoomOnPinch: boolean
zoomOnScroll: boolean

Generated using TypeDoc