Merge pull request #4146 from xyflow/internal-fix-resizer

Fix NodeResizer, handleParentExpand & add parentLookup

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

@@ -10,7 +10,8 @@
     nodesDraggable,
     nodesConnectable,
     elementsSelectable,
-    updateNodeInternals
+    updateNodeInternals,
+    parentLookup
   } = useStore();
 
   const resizeObserver: ResizeObserver | null =
@@ -65,7 +66,7 @@
       positionY={node.internals.positionAbsolute.y}
       positionOriginX={posOrigin.x ?? 0}
       positionOriginY={posOrigin.y ?? 0}
-      isParent={!!node.internals.isParent}
+      isParent={$parentLookup.has(node.id)}
       style={node.style}
       class={node.class}
       type={node.type ?? 'default'}

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -70,23 +70,27 @@
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
           const node = $nodeLookup.get(id)?.internals.userNode;
-          if (node) {
-            node.height = change.isHeightChange ? change.height : node.height;
-            node.width = change.isWidthChange ? change.width : node.width;
-            node.position =
-              change.isXPosChange || change.isYPosChange
-                ? { x: change.x, y: change.y }
-                : node.position;
-
-            for (const childChange of childChanges) {
-              const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
-              if (childNode) {
-                childNode.position = childChange.position;
-              }
-            }
-
-            $nodes = $nodes;
+          if (!node) {
+            return;
           }
+
+          if (change.x !== undefined && change.y !== undefined) {
+            node.position = { x: change.x, y: change.y };
+          }
+
+          if (change.width !== undefined && change.height !== undefined) {
+            node.width = change.width;
+            node.height = change.height;
+          }
+
+          for (const childChange of childChanges) {
+            const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
+            if (childNode) {
+              childNode.position = childChange.position;
+            }
+          }
+
+          $nodes = $nodes;
         }
       });
     }

packages/svelte/src/lib/store/index.ts

@@ -83,6 +83,7 @@ export function createStore({
     const { changes, updatedInternals } = updateNodeInternalsSystem(
       updates,
       nodeLookup,
+      get(store.parentLookup),
       get(store.domNode),
       get(store.nodeOrigin)
     );

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

@@ -81,7 +81,8 @@ export const getInitialStore = ({
   fitView?: boolean;
 }) => {
   const nodeLookup: NodeLookup = new Map();
-  adoptUserNodes(nodes, nodeLookup, {
+  const parentLookup = new Map();
+  adoptUserNodes(nodes, nodeLookup, parentLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false,
     checkEquality: false
@@ -104,8 +105,9 @@ export const getInitialStore = ({
 
   return {
     flowId: writable<string | null>(null),
-    nodes: createNodesStore(nodes, nodeLookup),
+    nodes: createNodesStore(nodes, nodeLookup, parentLookup),
     nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
+    parentLookup: readable<Map<string, InternalNode[]>>(parentLookup),
     edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
     visibleNodes: readable<InternalNode[]>([]),
     edges: createEdgesStore(edges, connectionLookup, edgeLookup),

packages/svelte/src/lib/store/utils.ts

@@ -127,7 +127,8 @@ export type NodeStoreOptions = {
 // The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
 export const createNodesStore = (
   nodes: Node[],
-  nodeLookup: NodeLookup<InternalNode>
+  nodeLookup: NodeLookup<InternalNode>,
+  parentLookup: Map<string, InternalNode[]>
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
@@ -141,7 +142,7 @@ export const createNodesStore = (
   let elevateNodesOnSelect = true;
 
   const _set = (nds: Node[]): Node[] => {
-    adoptUserNodes(nds, nodeLookup, {
+    adoptUserNodes(nds, nodeLookup, parentLookup, {
       elevateNodesOnSelect,
       defaults,
       checkEquality: false