Vue Flow

Appearance

@vue-flow/monorepo • Docs

Interface: Actions ​

Extends ​

  • Omit<ViewportHelper, "viewportInitialized">

Properties ​

$destroy() ​

$destroy: () => void

remove store instance from global storage and destroy it (will invalidate effect scopes)

Returns ​

void

$reset() ​

$reset: () => void

reset state to defaults

Returns ​

void

addEdges ​

addEdges: AddEdges

parses edges and adds to state

addNodes ​

addNodes: AddNodes

parses nodes and adds to state

addSelectedEdges() ​

addSelectedEdges: (edges) => void

manually select edges and add to state

Parameters ​

• edges: GraphEdge[]

Returns ​

void

addSelectedElements() ​

addSelectedElements: (elements) => void

manually select elements and add to state

Parameters ​

• elements: FlowElements

Returns ​

void

Deprecated ​

will be removed in the next major, use Actions.addSelectedNodes or Actions.addSelectedEdges instead

addSelectedNodes() ​

addSelectedNodes: (nodes) => void

manually select nodes and add to state

Parameters ​

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

Returns ​

void

applyEdgeChanges() ​

applyEdgeChanges: (changes) => GraphEdge[]

applies default edge change handler

Parameters ​

• changes: EdgeChange[]

Returns ​

GraphEdge[]

applyNodeChanges() ​

applyNodeChanges: (changes) => GraphNode<any, any, string>[]

applies default node change handler

Parameters ​

• changes: NodeChange[]

Returns ​

GraphNode<any, any, string>[]

endConnection() ​

endConnection: (event?, isClick?) => void

end (or cancel) a connection

Parameters ​

• event?: MouseEvent | TouchEvent

• isClick?: boolean

Returns ​

void

findEdge ​

findEdge: FindEdge

find an edge by id

findNode ​

findNode: FindNode

find a node by id

fitBounds ​

fitBounds: FitBounds

Inherited from ​

Omit.fitBounds

fitView ​

fitView: FitView

Inherited from ​

Omit.fitView

flowToScreenCoordinate ​

flowToScreenCoordinate: Project

Inherited from ​

Omit.flowToScreenCoordinate

fromObject() ​

fromObject: (obj) => Promise<boolean>

load graph from export obj

Parameters ​

• obj: FlowExportObject

Returns ​

Promise<boolean>

getConnectedEdges() ​

getConnectedEdges: (nodesOrId) => GraphEdge[]

get a node's connected edges

Parameters ​

• nodesOrId: string | Node<any, any, string>[]

Returns ​

GraphEdge[]

getHandleConnections() ​

getHandleConnections: (__namedParameters) => HandleConnection[]

get all connections of a handle belonging to a node

Parameters ​

• __namedParameters

• __namedParameters.id?: null | string

• __namedParameters.nodeId: string

• __namedParameters.type: HandleType

Returns ​

HandleConnection[]

getIncomers() ​

getIncomers: (nodeOrId) => GraphNode<any, any, string>[]

get a node's incomers

Parameters ​

• nodeOrId: string | Node<any, any, string>

Returns ​

GraphNode<any, any, string>[]

getIntersectingNodes ​

getIntersectingNodes: GetIntersectingNodes

returns all node intersections

getOutgoers() ​

getOutgoers: (nodeOrId) => GraphNode<any, any, string>[]

get a node's outgoers

Parameters ​

• nodeOrId: string | Node<any, any, string>

Returns ​

GraphNode<any, any, string>[]

getTransform ​

getTransform: GetViewport

Deprecated ​

use getViewport instead

Inherited from ​

Omit.getTransform

getViewport ​

getViewport: GetViewport

Inherited from ​

Omit.getViewport

isNodeIntersecting ​

isNodeIntersecting: IsNodeIntersecting

check if a node is intersecting with a defined area

panBy() ​

panBy: (delta) => boolean

pan the viewport; return indicates if a transform has happened or not

Parameters ​

• delta: XYPosition

Returns ​

boolean

project ​

project: Project

Inherited from ​

Omit.project

removeEdges ​

removeEdges: RemoveEdges

remove edges from state

removeNodes ​

removeNodes: RemoveNodes

remove nodes (and possibly connected edges and children) from state

removeSelectedEdges() ​

removeSelectedEdges: (edges) => void

manually unselect edges and remove from state

Parameters ​

• edges: GraphEdge[]

Returns ​

void

removeSelectedElements() ​

removeSelectedElements: (elements?) => void

unselect selected elements (if none are passed, all elements are unselected)

Parameters ​

• elements?: Elements

Returns ​

void

removeSelectedNodes() ​

removeSelectedNodes: (nodes) => void

manually unselect nodes and remove from state

Parameters ​

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

Returns ​

void

screenToFlowCoordinate ​

screenToFlowCoordinate: Project

Inherited from ​

Omit.screenToFlowCoordinate

setCenter ​

setCenter: SetCenter

Inherited from ​

Omit.setCenter

setEdges ​

setEdges: SetEdges

parses edges and re-sets the state

setElements ​

setElements: SetElements

parses elements (nodes + edges) and re-sets the state

setInteractive() ​

setInteractive: (isInteractive) => void

enable/disable node interaction (dragging, selecting etc)

Parameters ​

• isInteractive: boolean

Returns ​

void

setMaxZoom() ​

setMaxZoom: (zoom) => void

apply max zoom value to d3

Parameters ​

• zoom: number

Returns ​

void

setMinZoom() ​

setMinZoom: (zoom) => void

apply min zoom value to d3

Parameters ​

• zoom: number

Returns ​

void

setNodeExtent() ​

setNodeExtent: (nodeExtent) => void

apply extent to nodes

Parameters ​

• nodeExtent: CoordinateExtent | CoordinateExtentRange

Returns ​

void

setNodes ​

setNodes: SetNodes

parses nodes and re-sets the state

setPaneClickDistance() ​

setPaneClickDistance: (distance) => void

Parameters ​

• distance: number

Returns ​

void

setState ​

setState: SetState

set new state

setTransform ​

setTransform: SetViewport

Deprecated ​

use setViewport instead

Inherited from ​

Omit.setTransform

setTranslateExtent() ​

setTranslateExtent: (translateExtent) => void

apply translate extent to d3

Parameters ​

• translateExtent: CoordinateExtent

Returns ​

void

setViewport ​

setViewport: SetViewport

Inherited from ​

Omit.setViewport

startConnection() ​

startConnection: (startHandle, position?, isClick?) => void

start a connection

Parameters ​

• startHandle: ConnectingHandle

• position?: XYPosition

• isClick?: boolean

Returns ​

void

toObject() ​

toObject: () => FlowExportObject

return an object of graph values (elements, viewport transform) for storage and re-loading a graph

Returns ​

FlowExportObject

updateConnection() ​

updateConnection: (position, result?, status?) => void

update connection position

Parameters ​

• position: XYPosition

• result?: null | ConnectingHandle

• status?: null | ConnectionStatus

Returns ​

void

updateEdge ​

updateEdge: UpdateEdge

updates an edge

updateEdgeData ​

updateEdgeData: UpdateEdgeData

updates the data of an edge

updateNode ​

updateNode: UpdateNode

updates a node

updateNodeData ​

updateNodeData: UpdateNodeData

updates the data of a node

updateNodeDimensions ​

updateNodeDimensions: UpdateNodeDimensions

internal dimensions' updater, you probably don't want to use this

updateNodeInternals ​

updateNodeInternals: UpdateNodeInternals

force update node internal data, if handle bounds are incorrect, you might want to use this

updateNodePositions ​

updateNodePositions: UpdateNodePosition

internal position updater, you probably don't want to use this

viewportHelper ​

viewportHelper: ComputedRef<ViewportHelper>

viewport helper instance

zoomIn ​

zoomIn: ZoomInOut

Inherited from ​

Omit.zoomIn

zoomOut ​

zoomOut: ZoomInOut

Inherited from ​

Omit.zoomOut

zoomTo ​

zoomTo: ZoomTo

Inherited from ​

Omit.zoomTo

Released under the MIT License.

Copyright © 2021-present Burak Cakmakoglu