From b502547f8c9333979709409e8910e88e24d826b8 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Wed, 25 Oct 2023 09:10:20 +0200
Subject: [PATCH 1/2] feat(svelte) added toObject() on useSvelteFlow

---
 packages/svelte/src/lib/hooks/useSvelteFlow.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index 756b856c..fd20d61b 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -51,6 +51,7 @@ export function useSvelteFlow(): {
   getConnectedEdges: (id: string | (Partial<Node> & { id: Node['id'] })[]) => Edge[];
   getIncomers: (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
   getOutgoers: (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
+  toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
 } {
   const {
     zoomIn,
@@ -263,6 +264,17 @@ export function useSvelteFlow(): {
 
       return getOutgoersBase(_node, get(nodes), get(edges));
     },
+    toObject: () => {
+      const _nodes = get(nodes);
+      const _edges = get(edges);
+      const _viewport = get(viewport);
+
+      return {
+        nodes: { ..._nodes },
+        edges: { ..._edges },
+        viewport: { ..._viewport }
+      };
+    },
     viewport
   };
 }

From e899c379d027650edd6e400c0e24f4f4ae34fb79 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 30 Oct 2023 11:52:50 +0100
Subject: [PATCH 2/2] chore(svelte): cleanup useSvelteFlow

---
 .../src/routes/usesvelteflow/Sidebar.svelte      | 12 ++++++++++--
 packages/svelte/src/lib/hooks/useSvelteFlow.ts   | 16 +++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte
index 5b81fa4f..a195cf1c 100644
--- a/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte
+++ b/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useSvelteFlow } from '@xyflow/svelte';
+	import { useNodes, useSvelteFlow } from '@xyflow/svelte';
 
 	const {
 		zoomIn,
@@ -10,8 +10,10 @@
 		setViewport,
 		getViewport,
 		viewport,
-		nodes
+		toObject
 	} = useSvelteFlow();
+
+	const nodes = useNodes();
 </script>
 
 <aside>
@@ -23,6 +25,12 @@
 	<button on:click={() => setCenter(0, 0)}>setCenter 0, 0</button>
 	<button on:click={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button on:click={() => console.log(getViewport())}>getViewport</button>
+	<button
+		on:click={() => {
+			const { nodes, edges, viewport } = toObject();
+			console.log(nodes, edges, viewport);
+		}}>toObject</button
+	>
 
 	<div class="label">Nodes:</div>
 	{#each $nodes as node (node.id)}
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index fd20d61b..abe097bb 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -265,14 +265,16 @@ export function useSvelteFlow(): {
       return getOutgoersBase(_node, get(nodes), get(edges));
     },
     toObject: () => {
-      const _nodes = get(nodes);
-      const _edges = get(edges);
-      const _viewport = get(viewport);
-
       return {
-        nodes: { ..._nodes },
-        edges: { ..._edges },
-        viewport: { ..._viewport }
+        nodes: get(nodes).map((node) => ({
+          ...node,
+          // we want to make sure that changes to the nodes object that gets returned by toObject
+          // do not affect the nodes object
+          position: { ...node.position },
+          data: { ...node.data }
+        })),
+        edges: get(edges).map((edge) => ({ ...edge })),
+        viewport: { ...get(viewport) }
       };
     },
     viewport