<SvelteFlowProvider />
<SvelteFlowProvider /> コンポーネントは、子ノードを Svelte コンテキストでラップします。これにより、<SvelteFlow /> コンポーネントの外部からフローの内部状態にアクセスできます。提供するフックの多くは、このコンポーネントが機能するために依存しています。
App.svelte
<script>
import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte';
import Sidebar from './Sidebar.svelte';
</script>
<SvelteFlowProvider>
<SvelteFlow nodes={...} edges={...} />
<Sidebar />
</SvelteFlowProvider>Sidebar.svelte
<script>
import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte'
// This hook will only work if the component it's used in is a child of a
// <SvelteFlowProvider />.
const nodes = useNodes()
</script>
<aside>
{#each $nodes as node (node.id)}
<div key={node.id}>
Node {node.id} -
x: {node.position.x.toFixed(2)},
y: {node.position.y.toFixed(2)}
</div>
{/each}
</aside>注記
- ルーターを使用していて、フローの状態をルート間で永続させたい場合は、
<SvelteFlowProvider />コンポーネントをルーターの*外部*に配置することが重要です。 - 同じページに複数のフローがある場合は、別々の
<SvelteFlowProvider />を使用する必要があります。