From 382cab728b6c4a294b8b4acb52522d3765a6284e Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 28 Feb 2024 17:42:33 +0100
Subject: [PATCH] fixed resetting nodes in svelte

---
 .../src/components/Header/Header.svelte       |  3 +-
 .../src/routes/examples/reset/+page.svelte    | 43 +++++++++++++++++++
 .../components/NodeWrapper/NodeWrapper.svelte | 25 ++++++++---
 3 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 examples/svelte/src/routes/examples/reset/+page.svelte

diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index 90cdc62b..007d8ded 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -23,7 +23,8 @@
 		'usenodesdata',
 		'usesvelteflow',
 		'useupdatenodeinternals',
-		'validation'
+		'validation',
+		'reset'
 	];
 
 	const onChange = (event: Event) => {
diff --git a/examples/svelte/src/routes/examples/reset/+page.svelte b/examples/svelte/src/routes/examples/reset/+page.svelte
new file mode 100644
index 00000000..78b1b245
--- /dev/null
+++ b/examples/svelte/src/routes/examples/reset/+page.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Controls,
+		Background,
+		MiniMap,
+		type Node,
+		type Edge,
+		type NodeTypes
+	} from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodes = writable<Node[]>([]);
+	const edges = writable<Edge[]>([]);
+
+	const resetNodesArray = () => {
+		const node1: Node = {
+			id: 'c1',
+			data: { label: '1' },
+			position: { x: 0, y: 0 }
+		};
+
+		const node2: Node = {
+			id: 'c2',
+			data: { label: '2' },
+			position: { x: 100, y: 0 }
+		};
+
+		$nodes = [node1, node2];
+	};
+</script>
+
+<button on:click={resetNodesArray}> Reset </button>
+
+<div style:height="100vh">
+	<SvelteFlow {nodes} {edges} fitView>
+		<Controls />
+		<Background />
+		<MiniMap />
+	</SvelteFlow>
+</div>
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 91027f53..a8b4f895 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -1,7 +1,13 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import { createEventDispatcher, setContext, SvelteComponent, type ComponentType } from 'svelte';
+  import {
+    createEventDispatcher,
+    setContext,
+    SvelteComponent,
+    type ComponentType,
+    onDestroy
+  } from 'svelte';
   import { get, writable } from 'svelte/store';
   import cc from 'classcat';
   import { errorMessages, Position, type NodeProps } from '@xyflow/system';
@@ -129,15 +135,22 @@
   setContext('svelteflow__node_connectable', connectableStore);
 
   $: {
-    // hiding the noder removes html element is removed from the dom
     if (nodeRef) {
-      resizeObserver?.observe(nodeRef);
-      prevNodeRef = nodeRef;
-    } else if (prevNodeRef) {
-      resizeObserver?.unobserve(prevNodeRef);
+      if (!prevNodeRef) {
+        resizeObserver?.observe(nodeRef);
+        prevNodeRef = nodeRef;
+      } else if (prevNodeRef !== nodeRef || (!computedWidth && !computedHeight)) {
+        resizeObserver?.unobserve(prevNodeRef);
+        resizeObserver?.observe(nodeRef);
+        prevNodeRef = nodeRef;
+      }
     }
   }
 
+  onDestroy(() => {
+    resizeObserver?.unobserve(nodeRef);
+  });
+
   function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
     if (selectable && (!get(selectNodesOnDrag) || !draggable || get(nodeDragThreshold) > 0)) {
       // this handler gets called by XYDrag on drag start when selectNodesOnDrag=true