import type { CSSProperties, ComputedRef, ToRefs } from 'vue' import type { KeyFilter } from '@vueuse/core' import type { Dimensions, ElementData, Elements, FlowElements, FlowExportObject, FlowOptions, Rect, SelectionMode, SelectionRect, SnapGrid, XYPosition, } from './flow' import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components' import type { Connection, ConnectionLineOptions, ConnectionLineType, ConnectionMode, ConnectionStatus, Connector, } from './connection' import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge' import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node } from './node' import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, ViewportFunctions, ViewportTransform } from './zoom' import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks' import type { EdgeChange, NodeChange, NodeDragItem } from './changes' import type { ConnectingHandle, ValidConnectionFunc } from './handle' export interface UpdateNodeDimensionsParams { id: string nodeElement: HTMLDivElement forceUpdate?: boolean } export interface State extends Omit { /** Vue flow element ref */ vueFlowRef: HTMLDivElement | null /** Vue flow viewport element */ viewportRef: HTMLDivElement | null /** Event hooks, you can manipulate the triggers at your own peril */ readonly hooks: FlowHooks /** all stored nodes */ nodes: GraphNode[] /** all stored edges */ edges: GraphEdge[] readonly d3Zoom: D3Zoom | null readonly d3Selection: D3Selection | null readonly d3ZoomHandler: D3ZoomHandler | null /** use setMinZoom action to change minZoom */ minZoom: number /** use setMaxZoom action to change maxZoom */ maxZoom: number defaultViewport: Partial /** use setTranslateExtent action to change translateExtent */ translateExtent: CoordinateExtent nodeExtent: CoordinateExtent | CoordinateExtentRange /** viewport dimensions - do not change! */ readonly dimensions: Dimensions /** viewport transform x, y, z - do not change! */ readonly viewport: ViewportTransform /** if true will skip rendering any elements currently not inside viewport until they become visible */ onlyRenderVisibleElements: boolean nodesSelectionActive: boolean userSelectionActive: boolean multiSelectionActive: boolean deleteKeyCode: KeyFilter | null selectionKeyCode: KeyFilter | null multiSelectionKeyCode: KeyFilter | null zoomActivationKeyCode: KeyFilter | null panActivationKeyCode: KeyFilter | null connectionMode: ConnectionMode connectionLineOptions: ConnectionLineOptions /** @deprecated use {@link ConnectionLineOptions.type} */ connectionLineType: ConnectionLineType | null /** @deprecated use {@link ConnectionLineOptions.style} */ connectionLineStyle: CSSProperties | null connectionStartHandle: ConnectingHandle | null connectionEndHandle: ConnectingHandle | null connectionClickStartHandle: ConnectingHandle | null connectionPosition: XYPosition connectionRadius: number connectionStatus: ConnectionStatus | null isValidConnection: ValidConnectionFunc | null connectOnClick: boolean edgeUpdaterRadius: number snapToGrid: boolean snapGrid: SnapGrid defaultMarkerColor: string edgesUpdatable: EdgeUpdatable edgesFocusable: boolean nodesFocusable: boolean nodesDraggable: boolean nodesConnectable: boolean nodeDragThreshold: number elementsSelectable: boolean selectNodesOnDrag: boolean userSelectionRect: SelectionRect | null selectionMode: SelectionMode panOnDrag: boolean | number[] zoomOnScroll: boolean zoomOnPinch: boolean panOnScroll: boolean panOnScrollSpeed: number panOnScrollMode: PanOnScrollMode zoomOnDoubleClick: boolean preventScrolling: boolean paneDragging: boolean initialized: boolean applyDefault: boolean autoConnect: boolean | Connector fitViewOnInit: boolean noDragClassName: 'nodrag' | string noWheelClassName: 'nowheel' | string noPanClassName: 'nopan' | string defaultEdgeOptions: DefaultEdgeOptions | undefined elevateEdgesOnSelect: boolean elevateNodesOnSelect: boolean autoPanOnConnect: boolean autoPanOnNodeDrag: boolean disableKeyboardA11y: boolean ariaLiveMessage: string } export type SetElements = (elements: Elements | ((elements: FlowElements) => Elements)) => void export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void export type SetEdges = (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void export type AddNodes = (nodes: Node | Node[] | ((nodes: GraphNode[]) => Node | Node[])) => void export type RemoveNodes = ( nodes: (string | Node) | (Node | string)[] | ((nodes: GraphNode[]) => (string | Node) | (Node | string)[]), removeConnectedEdges?: boolean, removeChildren?: boolean, ) => void export type RemoveEdges = ( edges: (string | Edge) | (Edge | string)[] | ((edges: GraphEdge[]) => (string | Edge) | (Edge | string)[]), ) => void export type AddEdges = ( edgesOrConnections: | (Edge | Connection) | (Edge | Connection)[] | ((edges: GraphEdge[]) => (Edge | Connection) | (Edge | Connection)[]), ) => void export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection, shouldReplaceId?: boolean) => GraphEdge | false export type SetState = ( state: | Partial> | ((state: State) => Partial>), ) => void export type UpdateNodePosition = (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => void export type UpdateNodeInternals = (nodeIds?: string[]) => void export type FindNode = = any>( id: string | undefined | null, ) => GraphNode | undefined export type FindEdge = = any>( id: string | undefined | null, ) => GraphEdge | undefined export type GetIntersectingNodes = ( node: | (Partial & { id: Node['id'] }) | Rect, partially?: boolean, nodes?: GraphNode[], ) => GraphNode[] export type IsNodeIntersecting = ( node: | (Partial & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean, ) => boolean export interface Actions extends ViewportFunctions { /** parses elements (nodes + edges) and re-sets the state */ setElements: SetElements /** parses nodes and re-sets the state */ setNodes: SetNodes /** parses edges and re-sets the state */ setEdges: SetEdges /** parses nodes and adds to state */ addNodes: AddNodes /** parses edges and adds to state */ addEdges: AddEdges /** remove nodes (and possibly connected edges and children) from state */ removeNodes: RemoveNodes /** remove edges from state */ removeEdges: RemoveEdges /** find a node by id */ findNode: FindNode /** find an edge by id */ findEdge: FindEdge /** updates an edge */ updateEdge: UpdateEdge /** applies default edge change handler */ applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[] /** applies default node change handler */ applyNodeChanges: (changes: NodeChange[]) => GraphNode[] /** manually select elements and add to state */ addSelectedElements: (elements: FlowElements) => void /** manually select edges and add to state */ addSelectedEdges: (edges: GraphEdge[]) => void /** manually select nodes and add to state */ addSelectedNodes: (nodes: GraphNode[]) => void /** manually unselect edges and remove from state */ removeSelectedEdges: (edges: GraphEdge[]) => void /** manually unselect nodes and remove from state */ removeSelectedNodes: (nodes: GraphNode[]) => void /** unselect selected elements (if none are passed, all elements are unselected) */ removeSelectedElements: (elements?: Elements) => void /** apply min zoom value to d3 */ setMinZoom: (zoom: number) => void /** apply max zoom value to d3 */ setMaxZoom: (zoom: number) => void /** apply translate extent to d3 */ setTranslateExtent: (translateExtent: CoordinateExtent) => void /** apply extent to nodes */ setNodeExtent: (nodeExtent: CoordinateExtent | CoordinateExtentRange) => void /** enable/disable node interaction (dragging, selecting etc) */ setInteractive: (isInteractive: boolean) => void /** set new state */ setState: SetState /** return an object of graph values (elements, viewport transform) for storage and re-loading a graph */ toObject: () => FlowExportObject /** load graph from export obj */ fromObject: (obj: FlowExportObject) => Promise /** force update node internal data, if handle bounds are incorrect, you might want to use this */ updateNodeInternals: UpdateNodeInternals /** start a connection */ startConnection: ( startHandle: ConnectingHandle, position?: XYPosition, event?: MouseEvent | TouchEvent, isClick?: boolean, ) => void /** update connection position */ updateConnection: (position: XYPosition, result?: ConnectingHandle | null, status?: ConnectionStatus | null) => void /** end (or cancel) a connection */ endConnection: (event?: MouseEvent | TouchEvent, isClick?: boolean) => void /** internal position updater, you probably don't want to use this */ updateNodePositions: UpdateNodePosition /** internal dimensions' updater, you probably don't want to use this */ updateNodeDimensions: UpdateNodeDimensions /** returns all node intersections */ getIntersectingNodes: GetIntersectingNodes /** check if a node is intersecting with a defined area */ isNodeIntersecting: IsNodeIntersecting /** get a node's incomers */ getIncomers: (nodeOrId: Node | string) => GraphNode[] /** get a node's outgoers */ getOutgoers: (nodeOrId: Node | string) => GraphNode[] /** get a node's connected edges */ getConnectedEdges: (nodesOrId: Node[] | string) => GraphEdge[] /** pan the viewport; return indicates if a transform has happened or not */ panBy: (delta: XYPosition) => boolean /** reset state to defaults */ $reset: () => void /** remove store instance from global storage and destroy it (will invalidate effect scopes) */ $destroy: () => void } export interface Getters { /** returns object containing current edge types */ getEdgeTypes: Record /** returns object containing current node types */ getNodeTypes: Record /** get all elements (filters hidden elements) */ getElements: FlowElements /** filters hidden nodes */ getNodes: GraphNode[] /** filters hidden edges */ getEdges: GraphEdge[] /** @deprecated use {@link Actions.findNode} instead; returns a node by id */ getNode: (id: string) => GraphNode | undefined /** @deprecated use {@link Actions.findEdge} instead; returns an edge by id */ getEdge: (id: string) => GraphEdge | undefined /** returns all currently selected elements */ getSelectedElements: FlowElements /** returns all currently selected nodes */ getSelectedNodes: GraphNode[] /** returns all currently selected edges */ getSelectedEdges: GraphEdge[] /** returns all nodes that are initialized, i.e. they have actual dimensions */ getNodesInitialized: GraphNode[] /** returns a boolean flag whether all current nodes are initialized */ areNodesInitialized: boolean } export type ComputedGetters = { [key in keyof Getters]: ComputedRef } export type VueFlowStore = { readonly id: string readonly emits: FlowHooksEmit /** current vue flow version you're using */ readonly vueFlowVersion: string } & FlowHooksOn & ToRefs & Readonly & Readonly