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

Name	Type
#Returns
#`zoomIn`	`Function`
#`zoomOut`	`Function`
#`setZoom`	`(zoomLevel: number, options?: ViewportHelperFunctionOptions) => void`
#`getZoom`	`() => number`
#`setCenter`	`(x: number, y: number, options?: SetCenterOptions) => void`
#`setViewport`	`(viewport: Viewport, options?: ViewportHelperFunctionOptions) => void`
#`getViewport`	`() => Viewport`
#`fitView`	`(options?: FitViewOptions) => void`
#`getIntersectingNodes`	`( nodeOrRect: Node \| { id: Node['id'] } \| Rect, partially?: boolean, nodesToIntersect?: Node[] ) => Node[]`
#`isNodeIntersecting`	`( nodeOrRect: Node \| { id: Node['id'] } \| Rect, area: Rect, partially?: boolean ) => boolean`
#`fitBounds`	`(bounds: Rect, options?: FitBoundsOptions) => void`
#`deleteElements`	`( nodesToRemove?: (Node \| { id: Node['id'] })[], edgesToRemove?: (Edge \| { id: Edge['id'] })[] ) => { deletedNodes: Node[]; deletedEdges: Edge[] }`
#`screenToFlowPosition`	`(position: XYPosition) => XYPosition` Transforms a screen position to a Svelte position.
#`flowToScreenPosition`	`(position: XYPosition) => XYPosition` Transforms a Svelte position to a screen position.
#`getConnectedEdges`	`(id: string \| (Node \| { id: Node['id'] })[]) => Edge[]`
#`getIncomers`	`(node: string \| Node \| { id: Node['id'] }) => Node[]`
#`getOutgoers`	`(node: string \| Node \| { id: Node['id'] }) => Node[]`