From 39930e705ddb7047561b80dde057de216eab1141 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 17 Dec 2024 17:37:26 +0100
Subject: [PATCH] port more updates

---
 .../node-toolbar/SelectedNodesToolbar.svelte  |  2 +-
 .../src/routes/examples/reset/+page.svelte    |  9 +++--
 .../src/routes/examples/stress/+page.svelte   |  1 -
 .../routes/examples/usesvelteflow/Flow.svelte |  7 ++--
 .../examples/usesvelteflow/Sidebar.svelte     | 27 +++++++++------
 .../useupdatenodeinternals/Flow.svelte        |  7 ++--
 .../components/EdgeWrapper/EdgeWrapper.svelte |  2 ++
 .../EdgeRenderer/EdgeRenderer.svelte          |  2 +-
 ...lte.ts => useNodesEdgesViewport.svelte.ts} | 19 +++++++++--
 ...eSvelteFlow.ts => useSvelteFlow.svelte.ts} |  2 +-
 ...ls.ts => useUpdateNodeInternals.svelte.ts} |  5 ++-
 packages/svelte/src/lib/index.ts              |  6 ++--
 .../plugins/NodeResizer/ResizeControl.svelte  | 34 ++++++++-----------
 .../plugins/NodeToolbar/NodeToolbar.svelte    |  2 +-
 14 files changed, 68 insertions(+), 57 deletions(-)
 rename packages/svelte/src/lib/hooks/{useNodesEdges.svelte.ts => useNodesEdgesViewport.svelte.ts} (55%)
 rename packages/svelte/src/lib/hooks/{useSvelteFlow.ts => useSvelteFlow.svelte.ts} (99%)
 rename packages/svelte/src/lib/hooks/{useUpdateNodeInternals.ts => useUpdateNodeInternals.svelte.ts} (84%)

diff --git a/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte b/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
index e75ca6c8..d2761880 100644
--- a/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
+++ b/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { NodeToolbar, useNodes } from '@xyflow/svelte';
 
-	const nodes = useNodes();
+	let nodes = useNodes();
 
 	let selectedNodeIds = $derived(
 		nodes.current.filter((node) => node.selected).map((node) => node.id)
diff --git a/examples/svelte/src/routes/examples/reset/+page.svelte b/examples/svelte/src/routes/examples/reset/+page.svelte
index 0c67256c..bec87718 100644
--- a/examples/svelte/src/routes/examples/reset/+page.svelte
+++ b/examples/svelte/src/routes/examples/reset/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SvelteFlow, Controls, Background, MiniMap, type Node, type Edge } from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable<Node[]>([]);
-	const edges = writable<Edge[]>([]);
+	let nodes = $state.raw<Node[]>([]);
+	let edges = $state.raw<Edge[]>([]);
 
 	const resetNodesArray = () => {
 		const node1: Node = {
@@ -20,14 +19,14 @@
 			position: { x: 100, y: 0 }
 		};
 
-		$nodes = [node1, node2];
+		nodes = [node1, node2];
 	};
 </script>
 
 <button onclick={resetNodesArray}> Reset </button>
 
 <div style:height="100vh">
-	<SvelteFlow {nodes} {edges} fitView>
+	<SvelteFlow bind:nodes bind:edges fitView>
 		<Controls />
 		<Background />
 		<MiniMap />
diff --git a/examples/svelte/src/routes/examples/stress/+page.svelte b/examples/svelte/src/routes/examples/stress/+page.svelte
index 13b7ea89..b5d3ef1c 100644
--- a/examples/svelte/src/routes/examples/stress/+page.svelte
+++ b/examples/svelte/src/routes/examples/stress/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
index 2ba652a4..aa37a49a 100644
--- a/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
+++ b/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '@xyflow/svelte';
 
 	import Sidebar from './Sidebar.svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -27,7 +26,7 @@
 		}
 	]);
 
-	const edges = writable([
+	let edges = $state.raw([
 		{
 			id: '1-2',
 			type: 'default',
@@ -45,7 +44,7 @@
 </script>
 
 <main>
-	<SvelteFlow {nodes} {edges} fitView>
+	<SvelteFlow bind:nodes bind:edges fitView>
 		<Controls />
 		<Background variant={BackgroundVariant.Dots} />
 		<MiniMap />
diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
index ca5c3ef2..24ccbf8d 100644
--- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
+++ b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useEdges, useNodes, useSvelteFlow } from '@xyflow/svelte';
+	import { useEdges, useNodes, useSvelteFlow, useViewport } from '@xyflow/svelte';
 
 	const {
 		zoomIn,
@@ -9,17 +9,18 @@
 		setCenter,
 		setViewport,
 		getViewport,
-		viewport,
 		toObject,
 		deleteElements
 	} = useSvelteFlow();
 
-	const nodes = useNodes();
-	const edges = useEdges();
+	let nodes = useNodes();
+	let edges = useEdges();
+	let viewport = useViewport();
 
 	const deleteNode = () => {
-		$nodes.shift();
-		$nodes = $nodes;
+		//TODO: do we really want to allow this?
+		// nodes.shift();
+		// nodes = nodes;
 	};
 </script>
 
@@ -33,11 +34,13 @@
 	<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button onclick={() => console.log(getViewport())}>getViewport</button>
 
-	<button onclick={() => deleteElements({ edges: $edges.map((edge) => ({ id: edge.id })) })}
+	<button onclick={() => deleteElements({ edges: edges.current.map((edge) => ({ id: edge.id })) })}
 		>delete edges</button
 	>
-	<button onclick={() => deleteElements({ nodes: [{ id: $nodes[0].id }] })}>delete node</button>
-	<button onclick={() => deleteElements({ nodes: $nodes.map((node) => ({ id: node.id })) })}
+	<button onclick={() => deleteElements({ nodes: [{ id: nodes.current[0].id }] })}
+		>delete node</button
+	>
+	<button onclick={() => deleteElements({ nodes: nodes.current.map((node) => ({ id: node.id })) })}
 		>deleteElements</button
 	>
 	<button onclick={() => deleteNode()}>delete via store</button>
@@ -49,13 +52,15 @@
 	>
 
 	<div class="label">Nodes:</div>
-	{#each $nodes as node (node.id)}
+	{#each nodes.current 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)}
+		x: {viewport.current.x.toFixed(1)} y: {viewport.current.y.toFixed(1)} zoom: {viewport.current.zoom.toFixed(
+			1
+		)}
 	</div>
 </aside>
 
diff --git a/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
index e8275d72..0212db60 100644
--- a/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
+++ b/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -19,7 +18,7 @@
 		custom: CustomNode
 	};
 
-	const nodes = writable([
+	const nodes = $state.raw([
 		{
 			id: '1',
 			type: 'custom',
@@ -40,7 +39,7 @@
 		}
 	]);
 
-	const edges = writable([
+	const edges = $state.raw([
 		{
 			id: '1-2',
 			source: '1',
@@ -53,7 +52,7 @@
 		}
 	]);
 
-	const { updateNode } = useSvelteFlow();
+	const { updateNode } = $derived(useSvelteFlow());
 
 	const updateNodePosition = () => {
 		updateNode('1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index faad3aec..16d52534 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -19,6 +19,8 @@
     onedgemouseleave
   }: { store: SvelteFlowStore; edge: EdgeLayouted } & EdgeEvents = $props();
 
+  $inspect(edge);
+
   let {
     source,
     target,
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index f785b648..170cd020 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -36,7 +36,7 @@
       const previous = previousLayoutedEdges.get(edge.id);
       if (
         previous &&
-        edge == previous.edge &&
+        edge === previous.edge &&
         sourceNode == previous.sourceNode &&
         targetNode == previous.targetNode
       ) {
diff --git a/packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts b/packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts
similarity index 55%
rename from packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts
rename to packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts
index cae79855..210ac5f4 100644
--- a/packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts
+++ b/packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts
@@ -4,7 +4,7 @@ import { useStore } from '$lib/store';
  * Hook for getting the current nodes from the store.
  *
  * @public
- * @returns store with an array of nodes
+ * @returns reactive signal of the current edges
  */
 export function useNodes() {
   const { nodes } = $derived(useStore());
@@ -19,7 +19,7 @@ export function useNodes() {
  * Hook for getting the current edges from the store.
  *
  * @public
- * @returns store with an array of edges
+ * @returns reactive signal of the current edges
  */
 export function useEdges() {
   const { edges } = $derived(useStore());
@@ -29,3 +29,18 @@ export function useEdges() {
     }
   };
 }
+
+/**
+ * Hook for getting the current viewport from the store.
+ *
+ * @public
+ * @returns reactive signal of the current viewport
+ */
+export function useViewport() {
+  const { viewport } = $derived(useStore());
+  return {
+    get current() {
+      return viewport;
+    }
+  };
+}
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
similarity index 99%
rename from packages/svelte/src/lib/hooks/useSvelteFlow.ts
rename to packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
index 94a11387..51e8a201 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
@@ -370,7 +370,7 @@ export function useSvelteFlow(): {
 
       return Promise.resolve(true);
     },
-    getViewport: () => store.viewport,
+    getViewport: () => $state.snapshot(store.viewport),
     setCenter: async (x, y, options) => {
       const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom;
       const currentPanZoom = store.panZoom;
diff --git a/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts b/packages/svelte/src/lib/hooks/useUpdateNodeInternals.svelte.ts
similarity index 84%
rename from packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
rename to packages/svelte/src/lib/hooks/useUpdateNodeInternals.svelte.ts
index 489dec0b..4b5ea5f5 100644
--- a/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
+++ b/packages/svelte/src/lib/hooks/useUpdateNodeInternals.svelte.ts
@@ -1,4 +1,3 @@
-import { get } from 'svelte/store';
 import type { UpdateNodeInternals } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -10,7 +9,7 @@ import { useStore } from '$lib/store';
  * @returns function for updating node internals
  */
 export function useUpdateNodeInternals(): UpdateNodeInternals {
-  const { domNode, updateNodeInternals } = useStore();
+  const { domNode, updateNodeInternals } = $derived(useStore());
 
   // @todo: do we want to add this to system?
   const updateInternals = (id: string | string[]) => {
@@ -18,7 +17,7 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
     const updates = new Map();
 
     updateIds.forEach((updateId) => {
-      const nodeElement = get(domNode)?.querySelector(
+      const nodeElement = domNode?.querySelector(
         `.svelte-flow__node[data-id="${updateId}"]`
       ) as HTMLDivElement;
 
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 13a08fe6..397b6e23 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -31,10 +31,10 @@ export { useStore } from '$lib/store';
 export * from '$lib/utils';
 
 //hooks
-export * from '$lib/hooks/useSvelteFlow';
-export * from '$lib/hooks/useUpdateNodeInternals';
+export * from '$lib/hooks/useSvelteFlow.svelte';
+export * from '$lib/hooks/useUpdateNodeInternals.svelte';
 export * from '$lib/hooks/useConnection.svelte';
-export * from '$lib/hooks/useNodesEdges.svelte';
+export * from '$lib/hooks/useNodesEdgesViewport.svelte';
 export * from '$lib/hooks/useHandleConnections.svelte';
 export * from '$lib/hooks/useNodesData';
 export * from '$lib/hooks/useInternalNode';
diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
index f81af6d1..a962d083 100644
--- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
@@ -11,7 +11,7 @@
     type XYResizerChildChange
   } from '@xyflow/system';
   import type { ResizeControlProps } from './types';
-  import { get } from 'svelte/store';
+  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
 
   let {
     nodeId,
@@ -34,6 +34,8 @@
 
   const store = useStore();
 
+  const { updateNode } = useSvelteFlow();
+
   let id = $derived(
     typeof nodeId === 'string' ? nodeId : getContext<string>('svelteflow__node_id')
   );
@@ -72,28 +74,20 @@
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
-          const node = store.nodeLookup.get(id)?.internals.userNode;
-          if (!node) {
-            return;
-          }
-
-          if (change.x !== undefined && change.y !== undefined) {
-            node.position = { x: change.x, y: change.y };
-          }
-
-          if (change.width !== undefined && change.height !== undefined) {
-            node.width = change.width;
-            node.height = change.height;
-          }
+          updateNode(id, (node) => ({
+            ...node,
+            position: { x: change.x ?? node.position.x, y: change.y ?? node.position.y },
+            width: change.width ?? node.width,
+            height: change.height ?? node.height
+          }));
 
+          // TODO: performance?
           for (const childChange of childChanges) {
-            const childNode = store.nodeLookup.get(childChange.id)?.internals.userNode;
-            if (childNode) {
-              childNode.position = childChange.position;
-            }
+            updateNode(childChange.id, (node) => ({
+              ...node,
+              position: childChange.position
+            }));
           }
-
-          // store.nodes.set(get(store.nodes));
         }
       });
     }
diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
index ab7c2b57..422d4394 100644
--- a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
@@ -4,7 +4,7 @@
 
   import portal from '$lib/actions/portal';
   import { useStore } from '$lib/store';
-  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow';
+  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
 
   import type { InternalNode } from '$lib/types';
   import type { NodeToolbarProps } from './types';