refactor(svelte): simplify nodes and edges store handling

packages/svelte/src/routes/overview/+page.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
     Panel,
-    createNodes,
-    createEdges,
-    type NodeTypes,
     SelectionMode,
+    type NodeTypes,
     type EdgeTypes
   } from '../../lib/index';
   import { CustomNode } from './CustomNode';
@@ -23,7 +22,7 @@
     custom: CustomEdge
   };
 
-  const nodes = createNodes([
+  const nodes = writable([
     {
       id: '1',
       type: 'input',
@@ -70,9 +69,9 @@
       data: { label: 'Custom Node' },
       position: { x: 150, y: 300 }
     }
-  ], { style: 'width: 125px;' });
+  ]);
 
-  const edges = createEdges([
+  const edges = writable([
     {
       id: '1-2',
       type: 'default',
@@ -93,7 +92,7 @@
       source: '2',
       target: '4',
     }
-  ], { animated: true });
+  ]);
 
   function updateNode() {
     nodes.update(nds => nds.map(n => {
@@ -113,37 +112,34 @@
   }
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  {nodeTypes}
+  {edgeTypes}
+  fitView
+  minZoom={0.1}
+  maxZoom={2.5}
+  selectionMode={SelectionMode.Full}
+  initialViewport={{ x: 100, y: 100, zoom: 2 }}
+  snapGrid={[25, 25]}
+  on:node:click={(event) => console.log('on node click', event)}
+  on:node:mouseenter={(event) => console.log('on node enter', event)} 
+  on:node:mouseleave={(event) => console.log('on node leave', event)}
+  on:edge:click={(event) => console.log('edge click', event)}
+  on:connect:start={(event) => console.log('on connect start', event)}
+  on:connect={(event) => console.log('on connect', event)}
+  on:connect:end={(event) => console.log('on connect end', event)}
+  on:pane:click={(event) => console.log('on pane click', event)}
+  on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
 >
-  <SvelteFlow
-    {nodeTypes}
-    {edgeTypes}
-    fitView
-    minZoom={0.1}
-    maxZoom={2.5}
-    selectionMode={SelectionMode.Full}
-    initialViewport={{ x: 100, y: 100, zoom: 2 }}
-    snapGrid={[25, 25]}
-    on:node:click={(event) => console.log('on node click', event)}
-    on:node:mouseenter={(event) => console.log('on node enter', event)} 
-    on:node:mouseleave={(event) => console.log('on node leave', event)}
-    on:edge:click={(event) => console.log('edge click', event)}
-    on:connect:start={(event) => console.log('on connect start', event)}
-    on:connect={(event) => console.log('on connect', event)}
-    on:connect:end={(event) => console.log('on connect end', event)}
-    on:pane:click={(event) => console.log('on pane click', event)}
-    on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-    <MiniMap />
-    <Panel position="top-right">
-      <button on:click={updateNode}>update node pos</button>
-    </Panel>
-  </SvelteFlow>
-</SvelteFlowProvider>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+  <MiniMap />
+  <Panel position="top-right">
+    <button on:click={updateNode}>update node pos</button>
+  </Panel>
+</SvelteFlow>
 
 <style>
   :global(.svelte-flow .custom-style) {