chore(svelte): revise useSvelteFlow example

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

@@ -1,32 +1,31 @@
 <script lang="ts">
-  import {
-    createEdges,
-    createNodes,
-    SvelteFlowProvider,
-  } from '../../lib/index';
+  import { createNodes, createEdges, SvelteFlowProvider } from '../../lib/index';
 
   import Flow from './Flow.svelte';
-
-  const nodes = createNodes([
-    {
-      id: '1',
-      type: 'input',
-      data: { label: 'Input Node' },
-      position: { x: 150, y: 5 }
-    },
-    {
-      id: '2',
-      type: 'default',
-      data: { label: 'Node' },
-      position: { x: 0, y: 150 }
-    },
-    {
-      id: '3',
-      type: 'output',
-      data: { label: 'Output Node' },
-      position: { x: 300, y: 150 }
-    }
-  ], { origin: [0.5, 0.5] });
+  
+  const nodes = createNodes(
+    [
+      {
+        id: '1',
+        type: 'input',
+        data: { label: 'Input Node' },
+        position: { x: 150, y: 5 }
+      },
+      {
+        id: '2',
+        type: 'default',
+        data: { label: 'Node' },
+        position: { x: 0, y: 150 }
+      },
+      {
+        id: '3',
+        type: 'output',
+        data: { label: 'Output Node' },
+        position: { x: 300, y: 150 }
+      }
+    ],
+    { origin: [0.5, 0.5] }
+  );
 
   const edges = createEdges([
     {

packages/svelte/src/routes/usesvelteflow/Flow.svelte

@@ -4,20 +4,24 @@
     Background,
     BackgroundVariant,
     Minimap,
-    Panel,
-    useSvelteFlow
   } from '../../lib/index';
- 
-  const svelteFlow = useSvelteFlow();
+  import Sidebar from './Sidebar.svelte';
 </script>
 
-<SvelteFlow>
-  <Controls />
-  <Background variant={BackgroundVariant.Dots} />
-  <Minimap />
-  <Panel position="top-right">
-    <button on:click={() => svelteFlow.zoomIn()}>zoom in</button>
-    <button on:click={() => svelteFlow.zoomOut({ duration: 1000 })}>zoom out transition</button>
-    <button on:click={() => svelteFlow.fitView()}>fitView</button>
-  </Panel>
-</SvelteFlow>
+<main>
+  <SvelteFlow
+    fitView
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+  <Sidebar />
+</main>
+
+<style>
+  main {
+    height: 100%;
+    display: flex;
+  }
+</style>

packages/svelte/src/routes/usesvelteflow/Sidebar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import {
+    useSvelteFlow
+  } from '../../lib/index';
+
+  const { zoomIn, zoomOut, fitView, viewport, nodes } = useSvelteFlow();
+</script>
+
+<aside>
+  <div class="label">Functions:</div>
+  <button on:click={() => zoomIn()}>zoom in</button>
+  <button on:click={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
+  <button on:click={() => fitView()}>fitView</button>
+
+  <div class="label">Nodes:</div>
+  {#each $nodes as node (node.id)}
+    <div>id: {node.id} | x: {node.position.x.toFixed(1)} y: {node.position.y.toFixed(1)}</div>
+  {/each}
+
+  <div class="label">Viewport:</div>
+  <div>x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}</div>
+</aside>
+
+<style>
+  .label {
+    font-weight: 700;
+    margin: 0.5rem 0 .25rem 0;
+  }
+
+  aside {
+    width: 20vw;
+    background: #f4f4f4;
+    padding: 0.4rem 0.8rem;
+    font-size: 12px;
+  }
+
+  button {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 12px;
+  }
+</style>