chore(svelte): revise useSvelteFlow example

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -42,7 +42,6 @@
     nodes,
     edges,
     transform,
-    nodeOrigin,
     dragging,
     selectionRect,
     selectionRectMode,
@@ -117,8 +116,7 @@
       nextUserSelectRect,
       $transform,
       selectionMode === SelectionMode.Partial,
-      true,
-      $nodeOrigin
+      true
     );
     const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
     const selectedNodeIds = selectedNodes.map((n) => n.id);

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -1,19 +1,42 @@
-import type { ZoomInOut } from '@reactflow/system';
+import type { Viewport, ZoomInOut } from '@reactflow/system';
 
 import { useStore } from '$lib/store';
 import type { FitViewOptions } from '$lib/types';
+import { get, writable, type Writable } from 'svelte/store';
+import type { SvelteFlowStore } from '$lib/store/types';
 
 export function useSvelteFlow(): {
   zoomIn: ZoomInOut;
   zoomOut: ZoomInOut;
   fitView: (options?: FitViewOptions) => void;
+  viewport: Writable<Viewport>;
+  nodes: SvelteFlowStore['nodes'];
+  edges: SvelteFlowStore['edges'];
 } {
   // how to get the new context here? fit view doesn't work, because the store is not updated (uses old nodes store)
-  const { zoomIn, zoomOut, fitView } = useStore();
+  const { zoomIn, zoomOut, fitView, transform, nodes, edges } = useStore();
+
+  const transformValues = get(transform);
+  const viewportWritable = writable({
+    x: transformValues[0],
+    y: transformValues[1],
+    zoom: transformValues[2]
+  });
+
+  transform.subscribe((ts) =>
+    viewportWritable.set({
+      x: ts[0],
+      y: ts[1],
+      zoom: ts[2]
+    })
+  );
 
   return {
     zoomIn,
     zoomOut,
-    fitView
+    fitView,
+    nodes,
+    edges,
+    viewport: viewportWritable
   };
 }

packages/svelte/src/lib/store/edges-layouted.ts

@@ -27,8 +27,6 @@ export function getEdgesLayouted(store: SvelteFlowStoreState) {
         const sourcePosition = sourceHandle?.position || Position.Bottom;
         const targetPosition = targetHandle?.position || Position.Top;
 
-        console.log(sourceNodeRect);
-
         if (!sourceHandle || !targetHandle) {
           return null;
         }

packages/svelte/src/lib/utils/index.ts

@@ -1,4 +1,3 @@
-import type { HandleElement, Position } from '@reactflow/system';
 import {
   isNodeBase,
   isEdgeBase,
@@ -6,8 +5,7 @@ import {
   getOutgoersBase,
   getIncomersBase,
   updateEdgeBase,
-  getConnectedEdgesBase,
-  getDimensions
+  getConnectedEdgesBase
 } from '@reactflow/utils';
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 import { writable, type Writable } from 'svelte/store';

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>