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: 數字, 選項?: ViewportHelperFunctionOptions) => void`
#`getZoom`	`() => 數字`
#`setCenter`	`(x: 數字, y: 數字, 選項?: SetCenterOptions) => void`
#`setViewport`	`(viewport: Viewport, 選項?: ViewportHelperFunctionOptions) => void`
#`getViewport`	`() => Viewport`
#`fitView`	`(選項?: 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, 選項?: 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>, 選項?: { replace: 布林值 }) => void` 用於更新節點的函式。傳遞的節點或函式結果會合併到現有的節點中。您可以通過傳遞 `options.replace = true` 來更改此行為並替換節點。
#`updateNodeData`	`(id: 字串, data: 物件 \| (node: Node) => 物件, 選項?: { replace: 布林值 }) => void` 用於更新節點資料的函式。傳遞的資料或函式結果會合併到現有的節點資料中。您可以通過傳遞 `options.replace = true` 來更改此行為並替換節點。
#`toObject`	`() => { nodes: Node[]; edges: Edge[]; viewport: Viewport };` 此函式會返回您目前 Svelte Flow 圖形的 JSON 表示法。
#`getHandleConnections`	`({ type, nodeId, id }: { type: HandleType, nodeId: 字串, id?: 字串 \| null }) => HandleConnection[]` 取得屬於特定節點的 handle 的所有連線。類型參數可以是 'source' 或 'target'。

鉤子 (Hooks)