Fixed rerendering of edges & simplified rerendering of nodes

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -45,7 +45,11 @@
     initialHeight,
     width,
     height,
-    dragHandle
+    dragHandle,
+    internals: {
+      z: zIndex = 0,
+      positionAbsolute: { x: positionX, y: positionY }
+    }
   } = $derived(node);
 
   let { id } = node;
@@ -55,19 +59,6 @@
   let connectable = $derived(_connectable ?? store.nodesConnectable);
   let initialized = $derived(nodeHasDimensions(node));
 
-  // we also pass store.nodes to this function to rerender when a node changes
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function getInternalNode(node: Node, nodes: Node[]) {
-    return { ...store.nodeLookup.get(node.id)! };
-  }
-
-  let {
-    internals: {
-      z: zIndex = 0,
-      positionAbsolute: { x: positionX, y: positionY }
-    }
-  } = $derived(getInternalNode(node, store.nodes));
-
   function isInParentLookup(id: string) {
     return store.parentLookup.has(id);
   }

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -1,12 +1,12 @@
 import type { SvelteFlowStore } from '$lib/store/types';
-import type { Node } from '$lib/types';
+import type { InternalNode } from '$lib/types';
 
 export type ConnectableContext = {
   value: boolean;
 };
 
 export type NodeWrapperProps = {
-  node: Node;
+  node: InternalNode;
   store: SvelteFlowStore;
   nodeClickDistance?: number;
   resizeObserver?: ResizeObserver | null;

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
+      // we reuse the previous edge object if
-      // references to internalNodes that haven't changed stay the same
+      // 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}

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -91,13 +91,14 @@ export const getInitialStore = (signals: StoreSignals) => {
     connectionLookup: ConnectionLookup = new Map();
     edgeLookup: EdgeLookup = new Map();
 
-    adoptNodes: Set<string> = $derived.by(() => {
+    adoptNodes: true = $derived.by(() => {
-      return adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
+      adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
         nodeExtent: this.nodeExtent,
         nodeOrigin: this.nodeOrigin,
         elevateNodesOnSelect: false,
         checkEquality: true
       });
+      return true;
     });
     adoptEdges: true = $derived.by(() => {
       updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);

packages/svelte/src/lib/types/edges.ts

@@ -176,4 +176,5 @@ export type EdgeLayouted = Pick<
     targetNode?: Node;
     sourceHandleId?: string | null;
     targetHandleId?: string | null;
+    edge: Edge;
   };