useSvelteFlow()

This hook returns functions to update the viewport, transform positions or get node intersections for example.


<script lang="ts">
  import { useSvelteFlow } from '@xyflow/svelte';
 
  const { screenToFlowPosition, zoomIn } = useSvelteFlow();
</script>

Signature

Parameters:

This function does not accept any parameters.

Returns:

A set of helper functions

Name	Type
`zoomIn`	`ZoomInOut` Zooms viewport in by 1.2.
`zoomOut`	`ZoomInOut` Zooms viewport out by 1 / 1.2.
`getInternalNode`	`(id: string) => InternalNode<NodeType> \| undefined` Returns an internal node by id.
`getNode`	`(id: string) => NodeType \| undefined` Returns a node by id.
`getNodes`	`(ids?: string[] \| undefined) => NodeType[]` Returns nodes.
`getEdge`	`(id: string) => EdgeType \| undefined` Returns an edge by id.
`getEdges`	`(ids?: string[] \| undefined) => EdgeType[]` Returns edges.
`setZoom`	`(zoomLevel: number, options?: ViewportHelperFunctionOptions \| undefined) => Promise<boolean>` Sets the current zoom level.
`getZoom`	`() => number` Returns the current zoom level.
`setCenter`	`(x: number, y: number, options?: SetCenterOptions \| undefined) => Promise<boolean>` Sets the center of the view to the given position.
`setViewport`	`(viewport: Viewport, options?: ViewportHelperFunctionOptions \| undefined) => Promise<boolean>` Sets the current viewport.
`getViewport`	`() => Viewport` Returns the current viewport.
`fitView`	`(options?: FitViewOptions \| undefined) => Promise<boolean>` Fits the view.
`getIntersectingNodes`	`(nodeOrRect: NodeType \| { id: NodeType["id"]; } \| Rect, partially?: boolean \| undefined, nodesToIntersect?: NodeType[] \| undefined) => NodeType[]` Returns all nodes that intersect with the given node or rect.
`isNodeIntersecting`	`(nodeOrRect: NodeType \| Rect \| { id: NodeType["id"]; }, area: Rect, partially?: boolean \| undefined) => boolean` Checks if the given node or rect intersects with the passed rect.
`fitBounds`	`(bounds: Rect, options?: FitBoundsOptions \| undefined) => Promise<boolean>` Fits the view to the given bounds .
`deleteElements`	`({ nodes, edges }: { nodes?: (Partial<NodeType> & { id: string; })[]; edges?: (Partial<EdgeType> & { id: string; })[]; }) => Promise<{ deletedNodes: NodeType[]; deletedEdges: EdgeType[]; }>` Deletes nodes and edges.
`screenToFlowPosition`	`(clientPosition: XYPosition, options?: { snapToGrid: boolean; } \| undefined) => XYPosition` Converts a screen / client position to a flow position.
`flowToScreenPosition`	`(flowPosition: XYPosition) => XYPosition` Converts a flow position to a screen / client position.
`updateNode`	`(id: string, nodeUpdate: Partial<NodeType> \| ((node: NodeType) => Partial<NodeType>), options?: { replace: boolean; } \| undefined) => void` Updates a node.
`updateNodeData`	`(id: string, dataUpdate: Partial<NodeType["data"]> \| ((node: NodeType) => Partial<NodeType["data"]>), options?: { replace: boolean; } \| undefined) => void` Updates the data attribute of a node.
`updateEdge`	`(id: string, edgeUpdate: Partial<EdgeType> \| ((edge: EdgeType) => Partial<EdgeType>), options?: { replace: boolean; } \| undefined) => void` Updates an edge.
`toObject`	`() => { nodes: NodeType[]; edges: EdgeType[]; viewport: Viewport; }`
`getNodesBounds`	`(nodes: (string \| NodeType \| InternalNode<NodeType>)[]) => Rect` Returns the bounds of the given nodes or node ids.
`getHandleConnections`	`({ type, id, nodeId }: { type: HandleType; nodeId: string; id?: string \| null; }) => HandleConnection[]` Gets all connections for a given handle belonging to a specific node.