From 9e5d94291ce20f7196d2fbb0c51614cde8cecd54 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 17 Aug 2023 10:55:17 +0200
Subject: [PATCH] refactor(svelte): prevent unnecessary re-renders for node
 updates, selected always boolean #3336

---
 .../container/NodeRenderer/NodeRenderer.svelte |  2 +-
 .../svelte/src/lib/container/Pane/Pane.svelte  | 18 ++++++++++++++++--
 packages/svelte/src/lib/store/index.ts         |  9 +++++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index 48e7ff9e..154e5578 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -42,7 +42,7 @@
     <NodeWrapper
       id={node.id}
       data={node.data}
-      selected={node.selected}
+      selected={!!node.selected}
       draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
       selectable={!!(
         node.selectable ||
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 04a3c739..dc9772e7 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -114,6 +114,8 @@
       width: Math.abs(mousePos.x - startX),
       height: Math.abs(mousePos.y - startY)
     };
+    const prevSelectedNodeIds = selectedNodes.map((n) => n.id);
+    const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
 
     selectedNodes = getNodesInside<Node>(
       $nodes,
@@ -125,8 +127,20 @@
     const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
     const selectedNodeIds = selectedNodes.map((n) => n.id);
 
-    nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
-    edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
+    // this prevents unnecessary updates while updating the selection rectangle
+    if (
+      prevSelectedNodeIds.length !== selectedNodeIds.length ||
+      selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id))
+    ) {
+      nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
+    }
+
+    if (
+      prevSelectedEdgeIds.length !== selectedEdgeIds.length ||
+      selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id))
+    ) {
+      edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
+    }
 
     selectionRectMode.set('user');
     selectionRect.set(nextUserSelectRect);
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index b548f257..5c41413e 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -174,8 +174,13 @@ export function createStore(): SvelteFlowStore {
   }
 
   function unselectNodesAndEdges() {
-    store.nodes.update((ns) => ns.map(resetSelectedItem));
-    store.edges.update((es) => es.map(resetSelectedItem));
+    if (get(store.nodes).some((node) => node.selected)) {
+      store.nodes.update((ns) => ns.map(resetSelectedItem));
+    }
+
+    if (get(store.edges).some((edge) => edge.selected)) {
+      store.edges.update((es) => es.map(resetSelectedItem));
+    }
   }
 
   store.deleteKeyPressed.subscribe((deleteKeyPressed) => {