useSvelteFlow

このフックは、ビューポートの更新、位置の変換、ノードの交差の取得などを行う関数を返します。

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

シグネチャ

名前	型
#戻り値
#`getNode`	`(id: 文字列) => Node \| 未定義` idでノードを返します。
#`getNodes`	`(nodeIds?: 文字列[]) => Node[]` idが渡されなければ全てのノードを、idが渡されれば渡されたidのノードを返します。
#`getInternalNode`	`(id: 文字列) => InternalNode \| 未定義` idで内部ノードを返します。
#`getEdge`	`(id: 文字列) => Edge \| 未定義` idでエッジを返します。
#`getEdges`	`(edgeIds?: 文字列[]) => Node[]` idが渡されなければ全てのエッジを、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`	`非同期 ({ 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) => Partial<Node>, options?: { 置換: 論理値 }) => void` ノードを更新するための関数。渡されたノードまたは関数の結果は、既存のノードにマージされます。`options.replace = true` を渡すことで、この動作を変更し、ノードを置き換えることができます。
#`updateNodeData`	`(id: 文字列, データ: オブジェクト \| (ノード: Node) => オブジェクト, options?: { 置換: 論理値 }) => void` ノードデータを更新するための関数。渡されたデータまたは関数の結果は、既存のノードデータにマージされます。`options.replace = true` を渡すことで、この動作を変更し、ノードを置き換えることができます。
#`toObject`	`() => { nodes: Node[]; edges: Edge[]; viewport: Viewport };` この関数は、現在のSvelte FlowグラフのJSON表現を返します。
#`getHandleConnections`	`({ タイプ, nodeId, id }: { タイプ: HandleType, nodeId: 文字列, id?: 文字列 \| null }) => HandleConnection[]` 特定のノードに属するハンドルのすべての接続を取得します。typeパラメータは 'source' または 'target' のいずれかになります。

フック