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';