Fixed rerendering of edges & simplified rerendering of nodes

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -28,10 +28,17 @@
         continue;
       }
 
-      // we reuse the previous edge object if the source and target node are the same as before
-      // references to internalNodes that haven't changed stay the same
+      // we reuse the previous edge object if
+      // the current and previous edge are the same
+      // and the source and target node are the same
+      // and references to internalNodes are the same
       const previous = previousLayoutedEdges.get(edge.id);
-      if (previous && sourceNode == previous.sourceNode && targetNode == previous.targetNode) {
+      if (
+        previous &&
+        edge == previous.edge &&
+        sourceNode == previous.sourceNode &&
+        targetNode == previous.targetNode
+      ) {
         layoutedEdges.set(edge.id, previous);
         continue;
       }
@@ -58,7 +65,8 @@
           }),
           ...edgePosition,
           sourceNode,
-          targetNode
+          targetNode,
+          edge
         });
       }
     }

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -3,8 +3,9 @@
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
 
-  import type { NodeEvents } from '$lib/types';
+  import type { Node, NodeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
+  import type { NodeLookup } from '@xyflow/system';
 
   let {
     store,
@@ -41,10 +42,15 @@
   onDestroy(() => {
     resizeObserver?.disconnect();
   });
+
+  // We pass an unused reference to nodes to trigger a re-render
+  function getNodes(nodeLookup: NodeLookup, nodes: Node[]) {
+    return nodeLookup.values();
+  }
 </script>
 
 <div class="svelte-flow__nodes">
-  {#each store.nodes as node (node.id)}
+  {#each getNodes(store.nodeLookup, store.nodes) as node (node.id)}
     <NodeWrapper
       {store}
       {node}