SvelteFlowStore

The SvelteFlowStore type is the structure of the internal Svelte Flow Store, that you can access via the useStore hook.

The internal Svelte Flow store should only be used for advanced use cases. It’s not recommended to be used directly.

Fields

Name	Type	Default
`flowId`	`string`
`domNode`	`HTMLDivElement \| null`
`panZoom`	`PanZoomInstance \| null`
`width`	`number`
`height`	`number`
`nodesInitialized`	`boolean`
`viewportInitialized`	`boolean`
`_edges`	`EdgeType[]`
`nodes`	`NodeType[]`
`edges`	`EdgeType[]`
`_prevSelectedNodes`	`NodeType[]`
`_prevSelectedNodeIds`	`Set<string>`
`selectedNodes`	`NodeType[]`
`_prevSelectedEdges`	`EdgeType[]`
`_prevSelectedEdgeIds`	`Set<string>`
`selectedEdges`	`EdgeType[]`
`selectionChangedHandlers`	`Map<symbol, OnSelectionChanged<NodeType, EdgeType>>`
`nodeLookup`	`NodeLookup<InternalNode<NodeType>>`
`parentLookup`	`ParentLookup<InternalNode<NodeType>>`
`connectionLookup`	`ConnectionLookup`
`edgeLookup`	`EdgeLookup<EdgeType>`
`_prevVisibleEdges`	`Map<string, EdgeLayouted<EdgeType>>`
`visible`	`{ nodes: Map<string, InternalNode<NodeType>>; edges: Map<string, EdgeLayouted<EdgeType>>; }`
`nodesDraggable`	`boolean`
`nodesConnectable`	`boolean`
`elementsSelectable`	`boolean`
`nodesFocusable`	`boolean`
`edgesFocusable`	`boolean`
`disableKeyboardA11y`	`boolean`
`minZoom`	`number`
`maxZoom`	`number`
`nodeOrigin`	`NodeOrigin`
`nodeExtent`	`CoordinateExtent`
`translateExtent`	`CoordinateExtent`
`defaultEdgeOptions`	`Partial<Edge>`
`nodeDragThreshold`	`number`
`autoPanOnNodeDrag`	`boolean`
`autoPanOnConnect`	`boolean`
`fitViewQueued`	`boolean`
`fitViewOptions`	`FitViewOptions \| undefined`
`fitViewResolver`	`PromiseWithResolvers<boolean> \| null`
`snapGrid`	`SnapGrid \| null`
`dragging`	`boolean`
`selectionRect`	`SelectionRect \| null`
`selectionKeyPressed`	`boolean`
`multiselectionKeyPressed`	`boolean`
`deleteKeyPressed`	`boolean`
`panActivationKeyPressed`	`boolean`
`zoomActivationKeyPressed`	`boolean`
`selectionRectMode`	`string \| null`
`ariaLiveMessage`	`string`
`selectionMode`	`SelectionMode`
`nodeTypes`	`NodeTypes`
`edgeTypes`	`EdgeTypes`
`noPanClass`	`string`
`noDragClass`	`string`
`noWheelClass`	`string`
`_viewport`	`Viewport`
`viewport`	`Viewport`
`_connection`	`ConnectionState`
`connection`	`ConnectionState`
`connectionMode`	`ConnectionMode`
`connectionRadius`	`number`
`isValidConnection`	`IsValidConnection`
`selectNodesOnDrag`	`boolean`
`defaultMarkerColor`	`string`
`markers`	`MarkerProps[]`
`onlyRenderVisibleElements`	`boolean`
`onerror`	`OnError`
`ondelete`	`OnDelete<NodeType, EdgeType>`
`onbeforedelete`	`OnBeforeDelete<NodeType, EdgeType>`
`onbeforeconnect`	`OnBeforeConnect`
`onconnect`	`OnConnect`
`onconnectstart`	`OnConnectStart`
`onconnectend`	`OnConnectEnd`
`onbeforereconnect`	`OnBeforeReconnect<EdgeType>`
`onreconnect`	`any`
`onreconnectstart`	`any`
`onreconnectend`	`any`
`clickConnect`	`boolean`
`onclickconnectstart`	`OnConnectStart`
`onclickconnectend`	`OnConnectEnd`
`clickConnectStartHandle`	`Pick<Handle, "id" \| "type" \| "nodeId"> \| null`
`resolveFitView`	`() => Promise<void>`
`_prefersDark`	`MediaQuery`
`colorMode`	`ColorModeClass`
`resetStoreValues`	`() => void`
`setNodeTypes`	`(nodeTypes: NodeTypes) => void`
`setEdgeTypes`	`(edgeTypes: EdgeTypes) => void`
`addEdge`	`(edge: EdgeType \| Connection) => void`
`zoomIn`	`(options?: ViewportHelperFunctionOptions \| undefined) => Promise<boolean>`
`zoomOut`	`(options?: ViewportHelperFunctionOptions \| undefined) => Promise<boolean>`
`setMinZoom`	`(minZoom: number) => void`
`setMaxZoom`	`(maxZoom: number) => void`
`setTranslateExtent`	`(extent: CoordinateExtent) => void`
`setPaneClickDistance`	`(distance: number) => void`
`fitView`	`(options?: FitViewOptions \| undefined) => Promise<boolean>`
`updateNodePositions`	`UpdateNodePositions`
`updateNodeInternals`	`(updates: Map<string, InternalNodeUpdate>) => void`
`unselectNodesAndEdges`	`(params?: { nodes?: NodeType[]; edges?: EdgeType[]; } \| undefined) => void`
`addSelectedNodes`	`(ids: string[]) => void`
`addSelectedEdges`	`(ids: string[]) => void`
`handleNodeSelection`	`(id: string, unselect?: boolean \| undefined, nodeRef?: HTMLDivElement \| null \| undefined) => void`
`handleEdgeSelection`	`(id: string) => void`
`moveSelectedNodes`	`(direction: XYPosition, factor: number) => void`
`panBy`	`(delta: XYPosition) => Promise<boolean>`
`updateConnection`	`UpdateConnection`
`cancelConnection`	`() => void`
`reset`	`() => void`