<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 />。

<SvelteFlow />组件