refector viewport to use signals

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -28,9 +28,6 @@
   }: BackgroundProps = $props();
 
   const store = useStore();
-  const { viewport } = store;
-
-  $inspect($viewport);
 
   const patternSize = size ?? defaultSize[variant!];
   const isDots = variant === BackgroundVariant.Dots;
@@ -38,8 +35,11 @@
   const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
 
   let patternId = $derived(`background-pattern-${store.flowId}-${id ?? ''}`);
-  let scaledGap = $derived([gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1]);
-  let scaledSize = $derived(patternSize * $viewport.zoom);
+  let scaledGap = $derived([
+    gapXY[0] * store.viewport.zoom || 1,
+    gapXY[1] * store.viewport.zoom || 1
+  ]);
+  let scaledSize = $derived(patternSize * store.viewport.zoom);
   let patternDimensions = $derived(
     (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number]
   );
@@ -56,8 +56,8 @@
 >
   <pattern
     id={patternId}
-    x={$viewport.x % scaledGap[0]}
-    y={$viewport.y % scaledGap[1]}
+    x={store.viewport.x % scaledGap[0]}
+    y={store.viewport.y % scaledGap[1]}
     width={scaledGap[0]}
     height={scaledGap[1]}
     patternUnits="userSpaceOnUse"

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -33,7 +33,6 @@
   }: ControlsProps = $props();
 
   const store = useStore();
-  const { viewport } = store;
 
   const buttonProps = {
     bgColor: buttonBgColor,
@@ -46,8 +45,8 @@
   let isInteractive = $state(
     store.nodesDraggable || store.nodesConnectable || store.elementsSelectable
   );
-  let minZoomReached = $derived($viewport.zoom <= store.minZoom);
-  let maxZoomReached = $derived($viewport.zoom >= store.maxZoom);
+  let minZoomReached = $derived(store.viewport.zoom <= store.minZoom);
+  let maxZoomReached = $derived(store.viewport.zoom >= store.maxZoom);
   let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
 
   const onZoomInHandler = () => {

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -43,7 +43,6 @@
   }: MiniMapProps = $props();
 
   let store = useStore();
-  const { viewport } = store;
 
   let nodes = $derived(store.nodes);
 
@@ -58,10 +57,10 @@
 
   // TODO: simplify this
   let viewBB = $derived({
-    x: -$viewport.x / $viewport.zoom,
-    y: -$viewport.y / $viewport.zoom,
-    width: store.width / $viewport.zoom,
-    height: store.height / $viewport.zoom
+    x: -store.viewport.x / store.viewport.zoom,
+    y: -store.viewport.y / store.viewport.zoom,
+    width: store.width / store.viewport.zoom,
+    height: store.height / store.viewport.zoom
   });
   let boundingRect = $derived(
     store.nodeLookup.size > 0
@@ -102,8 +101,8 @@
         ? maskStrokeWidth * viewScale
         : undefined}
       use:interactive={{
+        store,
         panZoom: store.panZoom,
-        viewport: store.viewport,
         getViewScale,
         translateExtent: store.translateExtent,
         width: store.width,

packages/svelte/src/lib/plugins/Minimap/interactive.ts

@@ -1,14 +1,9 @@
-import { get, type Writable } from 'svelte/store';
-import {
-  XYMinimap,
-  type PanZoomInstance,
-  type Viewport,
-  type XYMinimapUpdate
-} from '@xyflow/system';
+import { XYMinimap, type PanZoomInstance, type XYMinimapUpdate } from '@xyflow/system';
+import type { SvelteFlowStore } from '$lib/store/types';
 
 export type UseInteractiveParams = {
   panZoom: PanZoomInstance;
-  viewport: Writable<Viewport>;
+  store: SvelteFlowStore;
   getViewScale: () => number;
 } & XYMinimapUpdate;
 
@@ -17,7 +12,7 @@ export default function interactive(domNode: Element, params: UseInteractivePara
     domNode,
     panZoom: params.panZoom,
     getTransform: () => {
-      const viewport = get(params.viewport);
+      const { viewport } = params.store;
       return [viewport.x, viewport.y, viewport.zoom];
     },
     getViewScale: params.getViewScale

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -11,6 +11,7 @@
     type XYResizerChildChange
   } from '@xyflow/system';
   import type { ResizeControlProps } from './types';
+  import { get } from 'svelte/store';
 
   let {
     nodeId,
@@ -31,7 +32,7 @@
     children
   }: ResizeControlProps = $props();
 
-  const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin, domNode } = useStore();
+  const store = useStore();
 
   let id = $derived(
     typeof nodeId === 'string' ? nodeId : getContext<string>('svelteflow__node_id')
@@ -62,16 +63,16 @@
         nodeId: id,
         getStoreItems: () => {
           return {
-            nodeLookup: $nodeLookup,
-            transform: [$viewport.x, $viewport.y, $viewport.zoom],
-            snapGrid: $snapGrid ?? undefined,
-            snapToGrid: !!$snapGrid,
-            nodeOrigin: $nodeOrigin,
-            paneDomNode: $domNode
+            nodeLookup: store.nodeLookup,
+            transform: [store.viewport.x, store.viewport.y, store.viewport.zoom],
+            snapGrid: store.snapGrid ?? undefined,
+            snapToGrid: !!store.snapGrid,
+            nodeOrigin: store.nodeOrigin,
+            paneDomNode: store.domNode
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
-          const node = $nodeLookup.get(id)?.internals.userNode;
+          const node = store.nodeLookup.get(id)?.internals.userNode;
           if (!node) {
             return;
           }
@@ -86,13 +87,13 @@
           }
 
           for (const childChange of childChanges) {
-            const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
+            const childNode = store.nodeLookup.get(childChange.id)?.internals.userNode;
             if (childNode) {
               childNode.position = childChange.position;
             }
           }
 
-          $nodes = $nodes;
+          store.nodes.set(get(store.nodes));
         }
       });
     }

packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte

@@ -18,7 +18,8 @@
     children
   }: NodeToolbarProps = $props();
 
-  const { domNode, viewport, nodeLookup, nodes } = useStore();
+  const store = useStore();
+  const { nodes } = store;
   const { getNodesBounds } = useSvelteFlow();
   const contextNodeId = getContext<string>('svelteflow__node_id');
 
@@ -28,7 +29,7 @@
     const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId ?? contextNodeId];
 
     return nodeIds.reduce<InternalNode[]>((res, nodeId) => {
-      const node = $nodeLookup.get(nodeId);
+      const node = store.nodeLookup.get(nodeId);
 
       if (node) {
         res.push(node);
@@ -41,7 +42,7 @@
   let transform: string = $derived.by(() => {
     const nodeRect = getNodesBounds(toolbarNodes);
     if (nodeRect) {
-      return getNodeToolbarTransform(nodeRect, $viewport, position, offset, align);
+      return getNodeToolbarTransform(nodeRect, store.viewport, position, offset, align);
     }
     return '';
   });
@@ -63,11 +64,11 @@
   );
 </script>
 
-{#if $domNode && isActive && toolbarNodes}
+{#if store.domNode && isActive && toolbarNodes}
   <div
     data-id={toolbarNodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
     class="svelte-flow__node-toolbar"
-    use:portal={{ domNode: $domNode }}
+    use:portal={{ domNode: store.domNode }}
     style:position="absolute"
     style:transform
     style:z-index={zIndex}