Merge pull request #4968 from xyflow/enhance/system-svelte5

Prepare system package for Svelte Flow 1.0.0-next.1

.changeset/spotty-pots-rest.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/system': patch
+---
+
+Make internal nodes immutable

packages/system/src/types/handles.ts

@@ -36,5 +36,5 @@ export type HandleProps = {
   /** Id of the handle
    * @remarks optional if there is only one handle of this type
    */
-  id?: string;
+  id?: string | null;
 };

packages/system/src/utils/store.ts

@@ -87,6 +87,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
   options?: UpdateNodesOptions<NodeType>
 ) {
   const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
+
   const tmpLookup = new Map(nodeLookup);
   const selectedNodeZ: number = _options?.elevateNodesOnSelect ? 1000 : 0;
 
@@ -173,11 +174,15 @@ function updateChildNode<NodeType extends NodeBase>(
   const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
 
   if (positionChanged || z !== node.internals.z) {
-    node.internals = {
+    // we create a new object to mark the node as updated
+    nodeLookup.set(node.id, {
+      ...node,
+      internals: {
         ...node.internals,
         positionAbsolute: positionChanged ? { x, y } : positionAbsolute,
         z,
-    };
+      },
+    });
   }
 }
 
@@ -333,12 +338,17 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
     }
 
     if (node.hidden) {
-      node.internals = {
+      nodeLookup.set(node.id, {
+        ...node,
+        internals: {
           ...node.internals,
           handleBounds: undefined,
-      };
+        },
+      });
       updatedInternals = true;
-    } else {
+      continue;
+    }
+
     const dimensions = getDimensions(update.nodeElement);
     const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
     const doUpdate = !!(
@@ -358,17 +368,23 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
         positionAbsolute = clampPosition(positionAbsolute, extent, dimensions);
       }
 
-        node.measured = dimensions;
-        node.internals = {
+      const newNode = {
+        ...node,
+        measured: dimensions,
+        internals: {
           ...node.internals,
           positionAbsolute,
           handleBounds: {
             source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),
             target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),
           },
+        },
       };
+
+      nodeLookup.set(node.id, newNode);
+
       if (node.parentId) {
-          updateChildNode(node, nodeLookup, parentLookup, { nodeOrigin });
+        updateChildNode(newNode, nodeLookup, parentLookup, { nodeOrigin });
       }
 
       updatedInternals = true;
@@ -384,13 +400,12 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
           parentExpandChildren.push({
             id: node.id,
             parentId: node.parentId,
-              rect: nodeToRect(node, nodeOrigin),
+            rect: nodeToRect(newNode, nodeOrigin),
           });
         }
       }
     }
   }
-  }
 
   if (parentExpandChildren.length > 0) {
     const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);