useSvelteFlow

此钩子返回用于更新视窗、转换位置或获取节点交集等功能的函数。

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

签名

名称	类型
#返回值
#`getNode`	`(id: 字符串) => Node \| 未定义` 通过 id 返回节点。
#`getNodes`	`(nodeIds?: 字符串[]) => Node[]` 如果未传递 id，则返回所有节点，否则返回传递的 id 的节点。
#`getInternalNode`	`(id: 字符串) => InternalNode \| 未定义` 通过 id 返回内部节点。
#`getEdge`	`(id: 字符串) => Edge \| 未定义` 通过 id 返回边。
#`getEdges`	`(edgeIds?: 字符串[]) => Node[]` 如果未传递 id，则返回所有边，否则返回传递的 id 的边。
#`zoomIn`	`函数`
#`zoomIn`	`函数`
#`zoomOut`	`函数`
#`setZoom`	`(zoomLevel: 数字, options?: ViewportHelperFunctionOptions) => void`
#`getZoom`	`() => 数字`
#`setCenter`	`(x: 数字, y: 数字, options?: SetCenterOptions) => void`
#`setViewport`	`(viewport: Viewport, options?: ViewportHelperFunctionOptions) => void`
#`getViewport`	`() => Viewport`
#`fitView`	`(options?: FitViewOptions) => void`
#`getNodesBounds`	`(nodes: (NodeType \| InternalNode \| 字符串)[]) => Rect` 返回给定节点或节点 id 的边界。
#`getIntersectingNodes`	`( nodeOrRect: Node \| { id: 字符串 } \| Rect, partially?: 布尔值, nodesToIntersect?: Node[] ) => Node[]`
#`isNodeIntersecting`	`( nodeOrRect: Node \| { id: 字符串 } \| Rect, area: Rect, partially?: 布尔值 ) => 布尔值`
#`fitBounds`	`(bounds: Rect, options?: FitBoundsOptions) => void`
#`deleteElements`	`async ({ nodes, edges }: { nodes?: Node[] \| { id: 字符串 }[], edges?: Edge[] \| { id: 字符串 }[] }) => { deletedNodes: Node[]; deletedEdges: Edge[] }` 辅助函数，用于删除节点和边，同时删除连接的边和子节点。
#`screenToFlowPosition`	`(position: XYPosition) => XYPosition` 将屏幕位置转换为 Svelte 位置。
#`flowToScreenPosition`	`(position: XYPosition) => XYPosition` 将 Svelte 位置转换为屏幕位置。
#`updateNode`	`(id: 字符串, node: Node \| (node: Node) => Partial<Node>, options?: { replace: 布尔值 }) => void` 用于更新节点的函数。传递的节点或函数结果会合并到现有节点中。您可以更改此行为，通过传递 `options.replace = true` 来替换节点。
#`updateNodeData`	`(id: 字符串, data: 对象 \| (node: Node) => 对象, options?: { replace: 布尔值 }) => void` 用于更新节点数据的函数。传递的数据或函数结果会合并到现有节点数据中。您可以更改此行为，通过传递 `options.replace = true` 来替换节点。
#`toObject`	`() => { nodes: Node[]; edges: Edge[]; viewport: Viewport };` 此函数返回当前 Svelte Flow 图的 JSON 表示形式。
#`getHandleConnections`	`({ 类型, nodeId, id }: { 类型: HandleType, nodeId: 字符串, id?: 字符串 \| null }) => HandleConnection[]` 获取属于特定节点的句柄的所有连接。类型参数可以是 'source' 或 'target'。

钩子