Interface State

Hierarchy

Properties

__experimentalFeatures? applyDefault ariaLiveMessage autoConnect autoPanOnConnect autoPanOnNodeDrag connectOnClick connectionClickStartHandle connectionEndHandle connectionLineOptions connectionLineStyle connectionLineType connectionMode connectionPosition connectionRadius connectionStartHandle connectionStatus d3Selection d3Zoom d3ZoomHandler defaultEdgeOptions defaultMarkerColor defaultViewport deleteKeyCode dimensions disableKeyboardA11y edgeTypes? edgeUpdaterRadius edges edgesFocusable edgesUpdatable elementsSelectable elevateEdgesOnSelect elevateNodesOnSelect fitViewOnInit hooks initialized isValidConnection maxZoom minZoom multiSelectionActive multiSelectionKeyCode noDragClassName noPanClassName noWheelClassName nodeExtent nodeTypes? nodes nodesConnectable nodesDraggable nodesFocusable nodesSelectionActive onlyRenderVisibleElements panActivationKeyCode panOnDrag panOnScroll panOnScrollMode panOnScrollSpeed paneDragging preventScrolling selectNodesOnDrag selectionKeyCode selectionMode snapGrid snapToGrid translateExtent userSelectionActive userSelectionRect viewport viewportRef vueFlowRef zoomActivationKeyCode zoomOnDoubleClick zoomOnPinch zoomOnScroll

Properties

Optional __experimentalFeatures

__experimentalFeatures?: {
    nestedFlow?: boolean;
}

Type declaration

  • Optional nestedFlow?: boolean

applyDefault

applyDefault: boolean

ariaLiveMessage

ariaLiveMessage: string

autoConnect

autoConnect: boolean | Connector

autoPanOnConnect

autoPanOnConnect: boolean

autoPanOnNodeDrag

autoPanOnNodeDrag: boolean

connectOnClick

connectOnClick: boolean

connectionClickStartHandle

connectionClickStartHandle: null | ConnectingHandle

connectionEndHandle

connectionEndHandle: null | ConnectingHandle

connectionLineOptions

connectionLineOptions: ConnectionLineOptions

connectionLineStyle

connectionLineStyle: null | CSSProperties

Deprecated

use style

connectionLineType

connectionLineType: null | ConnectionLineType

Deprecated

use type

connectionMode

connectionMode: ConnectionMode

connectionPosition

connectionPosition: XYPosition

connectionRadius

connectionRadius: number

connectionStartHandle

connectionStartHandle: null | ConnectingHandle

connectionStatus

connectionStatus: null | ConnectionStatus

Readonly d3Selection

d3Selection: null | D3Selection

Readonly d3Zoom

d3Zoom: null | D3Zoom

Readonly d3ZoomHandler

d3ZoomHandler: null | D3ZoomHandler

defaultEdgeOptions

defaultEdgeOptions: undefined | DefaultEdgeOptions

defaultMarkerColor

defaultMarkerColor: string

defaultViewport

defaultViewport: Partial<ViewportTransform>

deleteKeyCode

deleteKeyCode: null | KeyFilter

Readonly dimensions

dimensions: Dimensions

viewport dimensions - do not change!

disableKeyboardA11y

disableKeyboardA11y: boolean

Optional edgeTypes

edgeTypes?: EdgeTypesObject

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

edgeUpdaterRadius

edgeUpdaterRadius: number

edges

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

all stored edges

edgesFocusable

edgesFocusable: boolean

edgesUpdatable

edgesUpdatable: EdgeUpdatable

elementsSelectable

elementsSelectable: boolean

elevateEdgesOnSelect

elevateEdgesOnSelect: boolean

elevateNodesOnSelect

elevateNodesOnSelect: boolean

fitViewOnInit

fitViewOnInit: boolean

Readonly hooks

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

initialized: boolean

isValidConnection

isValidConnection: null | ValidConnectionFunc

maxZoom

maxZoom: number

use setMaxZoom action to change maxZoom

minZoom

minZoom: number

use setMinZoom action to change minZoom

multiSelectionActive

multiSelectionActive: boolean

multiSelectionKeyCode

multiSelectionKeyCode: null | KeyFilter

noDragClassName

noDragClassName: string

noPanClassName

noPanClassName: string

noWheelClassName

noWheelClassName: string

nodeExtent

nodeExtent: CoordinateExtent | CoordinateExtentRange

Optional nodeTypes

nodeTypes?: NodeTypesObject

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

nodes

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

all stored nodes

nodesConnectable

nodesConnectable: boolean

nodesDraggable

nodesDraggable: boolean

nodesFocusable

nodesFocusable: boolean

nodesSelectionActive

nodesSelectionActive: boolean

onlyRenderVisibleElements

onlyRenderVisibleElements: boolean

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

panActivationKeyCode

panActivationKeyCode: null | KeyFilter

panOnDrag

panOnDrag: boolean | number[]

panOnScroll

panOnScroll: boolean

panOnScrollMode

panOnScrollMode: PanOnScrollMode

panOnScrollSpeed

panOnScrollSpeed: number

paneDragging

paneDragging: boolean

preventScrolling

preventScrolling: boolean

selectNodesOnDrag

selectNodesOnDrag: boolean

selectionKeyCode

selectionKeyCode: null | KeyFilter

selectionMode

selectionMode: SelectionMode

snapGrid

snapGrid: SnapGrid

snapToGrid

snapToGrid: boolean

translateExtent

translateExtent: CoordinateExtent

use setTranslateExtent action to change translateExtent

userSelectionActive

userSelectionActive: boolean

userSelectionRect

userSelectionRect: null | SelectionRect

Readonly viewport

viewport: ViewportTransform

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

viewportRef

viewportRef: null | HTMLDivElement

Vue flow viewport element

vueFlowRef

vueFlowRef: null | HTMLDivElement

Vue flow element ref

zoomActivationKeyCode

zoomActivationKeyCode: null | KeyFilter

zoomOnDoubleClick

zoomOnDoubleClick: boolean

zoomOnPinch

zoomOnPinch: boolean

zoomOnScroll

zoomOnScroll: boolean

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc