Merge branch 'next' into refactor/xy-drag-use-map

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -9,6 +9,10 @@ import {
   type NodeChange,
   type NodeDimensionChange,
   type NodePositionChange,
+  handleExpandParent,
+  evaluateAbsolutePosition,
+  ParentExpandChild,
+  XYPosition,
 } from '@xyflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -62,24 +66,49 @@ function ResizeControl({
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
-          const { triggerNodeChanges } = store.getState();
+          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
 
           const changes: NodeChange[] = [];
+          const nextPosition = { x: change.x, y: change.y };
 
-          if (change.isXPosChange || change.isYPosChange) {
+          const node = nodeLookup.get(id);
-            const positionChange: NodePositionChange = {
+          if (node && node.expandParent && node.parentId) {
-              id,
+            const child: ParentExpandChild = {
-              type: 'position',
+              id: node.id,
-              position: {
+              parentId: node.parentId,
-                x: change.x,
+              rect: {
-                y: change.y,
+                width: change.width ?? node.measured.width!,
+                height: change.height ?? node.measured.height!,
+                ...evaluateAbsolutePosition(
+                  {
+                    x: change.x ?? node.position.x,
+                    y: change.y ?? node.position.y,
+                  },
+                  node.parentId,
+                  nodeLookup,
+                  node.origin ?? nodeOrigin
+                ),
               },
             };
 
+            const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
+            changes.push(...parentExpandChanges);
+
+            // when the parent was expanded by the child node, its position will be clamped at 0,0
+            nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
+            nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
+          }
+
+          if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
+            const positionChange: NodePositionChange = {
+              id,
+              type: 'position',
+              position: { ...(nextPosition as XYPosition) },
+            };
             changes.push(positionChange);
           }
 
-          if (change.isWidthChange || change.isHeightChange) {
+          if (change.width !== undefined && change.height !== undefined) {
             const dimensionChange: NodeDimensionChange = {
               id,
               type: 'dimensions',

packages/react/src/components/NodeWrapper/index.tsx

@@ -42,21 +42,14 @@ export function NodeWrapper<NodeType extends Node>({
   nodeOrigin,
   onError,
 }: NodeWrapperProps<NodeType>) {
-  const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
+  const { node, internals, isParent } = useStore((s) => {
     const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
-
+    const isParent = s.parentLookup.has(id);
-    const positionAbsolute = nodeExtent
-      ? clampPosition(node.internals.positionAbsolute, nodeExtent)
-      : node.internals.positionAbsolute || { x: 0, y: 0 };
 
     return {
       node,
-      // we are mutating positionAbsolute, z and isParent attributes for sub flows
+      internals: node.internals,
-      // so we we need to force a re-render when some change
+      isParent,
-      positionAbsoluteX: positionAbsolute.x,
-      positionAbsoluteY: positionAbsolute.y,
-      zIndex: node.internals.z,
-      isParent: node.internals.isParent,
     };
   }, shallow);
 
@@ -140,10 +133,15 @@ export function NodeWrapper<NodeType extends Node>({
     return null;
   }
 
-  const positionAbsoluteOrigin = getPositionWithOrigin({
+  const positionAbsolute = nodeExtent
-    x: positionAbsoluteX,
+    ? clampPosition(node.internals.positionAbsolute, nodeExtent)
-    y: positionAbsoluteY,
+    : node.internals.positionAbsolute || { x: 0, y: 0 };
-    ...nodeDimensions,
+
+  const positionWithOrigin = getPositionWithOrigin({
+    x: positionAbsolute.x,
+    y: positionAbsolute.y,
+    width: nodeDimensions.width,
+    height: nodeDimensions.height,
     origin: node.origin || nodeOrigin,
   });
   const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
@@ -190,7 +188,7 @@ export function NodeWrapper<NodeType extends Node>({
       store.setState({
         ariaLiveMessage: `Moved selected node ${event.key
           .replace('Arrow', '')
-          .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
+          .toLowerCase()}. New position, x: ${~~positionAbsolute.x}, y: ${~~positionAbsolute.y}`,
       });
 
       moveSelectedNodes({
@@ -220,8 +218,8 @@ export function NodeWrapper<NodeType extends Node>({
       ])}
       ref={nodeRef}
       style={{
-        zIndex,
+        zIndex: internals.z,
-        transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+        transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
         pointerEvents: hasPointerEvents ? 'all' : 'none',
         visibility: initialized ? 'visible' : 'hidden',
         ...node.style,
@@ -246,15 +244,15 @@ export function NodeWrapper<NodeType extends Node>({
           id={id}
           data={node.data}
           type={nodeType}
-          positionAbsoluteX={positionAbsoluteX}
+          positionAbsoluteX={positionAbsolute.x}
-          positionAbsoluteY={positionAbsoluteY}
+          positionAbsoluteY={positionAbsolute.y}
           selected={node.selected}
           isConnectable={isConnectable}
           sourcePosition={node.sourcePosition}
           targetPosition={node.targetPosition}
           dragging={dragging}
           dragHandle={node.dragHandle}
-          zIndex={zIndex}
+          zIndex={internals.z}
           {...nodeDimensions}
         />
       </Provider>

packages/react/src/hooks/useReactFlow.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import {
-  evaluateNodePosition,
+  evaluateAbsolutePosition,
   getElementsToRemove,
   getOverlappingArea,
   isRectObject,
@@ -232,10 +232,21 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
   const getNodeRect = useCallback((node: NodeType | { id: string }): Rect | null => {
     const { nodeLookup, nodeOrigin } = store.getState();
-    const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id)!;
-    const nodeWithPos = evaluateNodePosition(nodeToUse, nodeLookup, nodeOrigin);
 
-    return nodeWithPos ? nodeToRect(nodeWithPos) : null;
+    const nodeToUse = isNode<NodeType>(node) ? node : nodeLookup.get(node.id)!;
+    const position = nodeToUse.parentId
+      ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
+      : nodeToUse.position;
+
+    const nodeWithPosition = {
+      id: nodeToUse.id,
+      position,
+      width: nodeToUse.measured?.width ?? nodeToUse.width,
+      height: nodeToUse.measured?.height ?? nodeToUse.height,
+      data: nodeToUse.data,
+    };
+
+    return nodeToRect(nodeWithPosition);
   }, []);
 
   const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(

packages/react/src/store/index.ts

@@ -7,10 +7,11 @@ import {
   panBy as panBySystem,
   updateNodeInternals as updateNodeInternalsSystem,
   updateConnectionLookup,
-  handleParentExpand,
+  handleExpandParent,
   NodeChange,
   EdgeSelectionChange,
   NodeSelectionChange,
+  ParentExpandChild,
 } from '@xyflow/system';
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -38,14 +39,14 @@ const createRFStore = ({
     (set, get) => ({
       ...getInitialState({ nodes, edges, width, height, fitView, defaultNodes, defaultEdges }),
       setNodes: (nodes: Node[]) => {
-        const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
+        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
         // - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
         // - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        adoptUserNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
+        adoptUserNodes(nodes, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: true });
 
         set({ nodes });
       },
@@ -76,6 +77,7 @@ const createRFStore = ({
           onNodesChange,
           fitView,
           nodeLookup,
+          parentLookup,
           fitViewOnInit,
           fitViewDone,
           fitViewOnInitOptions,
@@ -84,7 +86,13 @@ const createRFStore = ({
           debug,
         } = get();
 
-        const { changes, updatedInternals } = updateNodeInternalsSystem(updates, nodeLookup, domNode, nodeOrigin);
+        const { changes, updatedInternals } = updateNodeInternalsSystem(
+          updates,
+          nodeLookup,
+          parentLookup,
+          domNode,
+          nodeOrigin
+        );
 
         if (!updatedInternals) {
           return;
@@ -116,8 +124,8 @@ const createRFStore = ({
         }
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {
-        const { nodeLookup } = get();
+        const { nodeLookup, parentLookup } = get();
-        const triggerChangeNodes: InternalNode[] = [];
+        const parentExpandChildren: ParentExpandChild[] = [];
 
         const changes: NodeChange[] = nodeDragItems.map((node) => {
           // @todo add expandParent to drag item so that we can get rid of the look up here
@@ -129,13 +137,14 @@ const createRFStore = ({
             dragging,
           };
 
-          if (internalNode?.expandParent && change.position) {
+          if (internalNode?.expandParent && internalNode?.parentId && change.position) {
-            triggerChangeNodes.push({
+            parentExpandChildren.push({
-              ...internalNode,
+              id: internalNode.id,
-              position: change.position,
+              parentId: internalNode.parentId,
-              internals: {
+              rect: {
-                ...internalNode.internals,
+                ...node.internals.positionAbsolute,
-                positionAbsolute: node.internals.positionAbsolute,
+                width: internalNode.measured.width!,
+                height: internalNode.measured.height!,
               },
             });
 
@@ -146,8 +155,8 @@ const createRFStore = ({
           return change;
         });
 
-        if (triggerChangeNodes.length > 0) {
+        if (parentExpandChildren.length > 0) {
-          const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+          const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
           changes.push(...parentExpandChanges);
         }
 

packages/react/src/store/initialState.ts

@@ -29,13 +29,14 @@ const getInitialState = ({
   fitView?: boolean;
 } = {}): ReactFlowStore => {
   const nodeLookup = new Map();
+  const parentLookup = new Map();
   const connectionLookup = new Map();
   const edgeLookup = new Map();
   const storeEdges = defaultEdges ?? edges ?? [];
   const storeNodes = defaultNodes ?? nodes ?? [];
 
   updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-  adoptUserNodes(storeNodes, nodeLookup, {
+  adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false,
   });
@@ -59,6 +60,7 @@ const getInitialState = ({
     transform,
     nodes: storeNodes,
     nodeLookup,
+    parentLookup,
     edges: storeEdges,
     edgeLookup,
     connectionLookup,

packages/react/src/types/store.ts

@@ -54,6 +54,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   transform: Transform;
   nodes: NodeType[];
   nodeLookup: NodeLookup<InternalNode<NodeType>>;
+  parentLookup: Map<string, InternalNode<NodeType>[]>;
   edges: Edge[];
   edgeLookup: EdgeLookup<EdgeType>;
   connectionLookup: ConnectionLookup;

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) {
+          if (!node) {
-            node.height = change.isHeightChange ? change.height : node.height;
+            return;
-            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 (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

packages/system/src/types/nodes.ts

@@ -73,8 +73,6 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
   internals: {
     positionAbsolute: XYPosition;
     z: number;
-    // @todo should we rename this to "handles" and use same type as node.handles?
-    isParent: boolean;
     /** Holds a reference to the original node object provided by the user.
      * Used as an optimization to avoid certain operations. */
     userNode: NodeType;
@@ -144,3 +142,4 @@ export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
 export type Align = 'center' | 'start' | 'end';
 
 export type NodeLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType>;
+export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType[]>;

packages/system/src/utils/general.ts

@@ -226,31 +226,27 @@ export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: No
 }
 
 /**
- * Helper to calculate the absolute position of a node
+ * Convert child position to aboslute position
  *
  * @internal
- * @param node
+ * @param position
+ * @param parentId
  * @param nodeLookup
  * @param nodeOrigin
  * @returns an internal node with an absolute position
  */
-export function evaluateNodePosition(
+export function evaluateAbsolutePosition(
-  node: NodeBase | InternalNodeBase,
+  position: XYPosition,
+  parentId: string,
   nodeLookup: NodeLookup,
   nodeOrigin: NodeOrigin = [0, 0]
-): InternalNodeBase | null {
+): XYPosition {
-  const internalNode = nodeLookup.get(node.id);
+  let nextParentId: string | undefined = parentId;
+  const positionAbsolute = { ...position };
 
-  if (!internalNode) {
+  while (nextParentId) {
-    return null;
-  }
-
-  let parentId = internalNode.parentId;
-  const positionAbsolute = { ...node.position };
-
-  while (parentId) {
     const parent = nodeLookup.get(parentId);
-    parentId = parent?.parentId;
+    nextParentId = parent?.parentId;
 
     if (parent) {
       const origin = parent.origin || nodeOrigin;
@@ -261,11 +257,5 @@ export function evaluateNodePosition(
     }
   }
 
-  return {
+  return positionAbsolute;
-    ...internalNode,
-    internals: {
-      ...internalNode.internals,
-      positionAbsolute,
-    },
-  };
 }

packages/system/src/utils/store.ts

@@ -15,10 +15,12 @@ import {
   Rect,
   NodeDimensionChange,
   NodePositionChange,
+  ParentLookup,
 } from '../types';
 import { getDimensions, getHandleBounds } from './dom';
 import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './general';
 import { getNodePositionWithOrigin } from './graph';
+import { ParentExpandChild } from './types';
 
 export function updateAbsolutePositions<NodeType extends NodeBase>(
   nodeLookup: Map<string, InternalNodeBase<NodeType>>,
@@ -26,41 +28,41 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
     nodeOrigin: [0, 0] as NodeOrigin,
     elevateNodesOnSelect: true,
     defaults: {},
-  },
+  }
-  parentNodeIds?: Set<string>
 ) {
   const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
 
-  for (const [id, node] of nodeLookup) {
+  for (const [, node] of nodeLookup) {
     const parentId = node.parentId;
 
-    if (parentId && !nodeLookup.has(parentId)) {
+    if (!parentId) {
+      continue;
+    }
+
+    if (!nodeLookup.has(parentId)) {
       throw new Error(`Parent node ${parentId} not found`);
     }
 
-    if (parentId || node.internals.isParent || parentNodeIds?.has(id)) {
+    const parentNode = nodeLookup.get(parentId);
-      const parentNode = parentId ? nodeLookup.get(parentId) : null;
+    const { x, y, z } = calculateXYZPosition(
-      const { x, y, z } = calculateXYZPosition(
+      node,
-        node,
+      nodeLookup,
-        nodeLookup,
+      {
-        {
+        ...node.position,
-          ...node.position,
+        z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
-          z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
+      },
-        },
+      parentNode?.origin ?? options.nodeOrigin
-        parentNode?.origin || options.nodeOrigin
+    );
-      );
 
-      const currPosition = node.internals.positionAbsolute;
+    const currPosition = node.internals.positionAbsolute;
-      const positionChanged = x !== currPosition.x || y !== currPosition.y;
+    const positionChanged = x !== currPosition.x || y !== currPosition.y;
 
-      node.internals.positionAbsolute = positionChanged ? { x, y } : currPosition;
+    if (positionChanged || z !== node.internals.z) {
-      node.internals.z = z;
+      node.internals = {
-
+        ...node.internals,
-      if (parentNodeIds !== undefined) {
+        positionAbsolute: positionChanged ? { x, y } : currPosition,
-        node.internals.isParent = !!parentNodeIds?.has(id);
+        z,
-      }
+      };
-
-      nodeLookup.set(id, node);
     }
   }
 }
@@ -75,6 +77,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
 export function adoptUserNodes<NodeType extends NodeBase>(
   nodes: NodeType[],
   nodeLookup: Map<string, InternalNodeBase<NodeType>>,
+  parentLookup: Map<string, InternalNodeBase<NodeType>[]>,
   options: UpdateNodesOptions<NodeType> = {
     nodeOrigin: [0, 0] as NodeOrigin,
     elevateNodesOnSelect: true,
@@ -84,20 +87,18 @@ export function adoptUserNodes<NodeType extends NodeBase>(
 ) {
   const tmpLookup = new Map(nodeLookup);
   nodeLookup.clear();
+  parentLookup.clear();
+
   const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
-  const parentNodeIds = new Set<string>();
 
   nodes.forEach((userNode) => {
     const currentStoreNode = tmpLookup.get(userNode.id);
 
-    if (userNode.parentId) {
+    let internalNode = currentStoreNode!;
-      parentNodeIds.add(userNode.parentId);
-    }
-
     if (options.checkEquality && userNode === currentStoreNode?.internals.userNode) {
       nodeLookup.set(userNode.id, currentStoreNode);
     } else {
-      nodeLookup.set(userNode.id, {
+      internalNode = {
         ...options.defaults,
         ...userNode,
         measured: {
@@ -109,14 +110,23 @@ export function adoptUserNodes<NodeType extends NodeBase>(
           handleBounds: currentStoreNode?.internals.handleBounds,
           z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
           userNode,
-          isParent: false,
         },
-      });
+      };
+      nodeLookup.set(userNode.id, internalNode);
+    }
+
+    if (userNode.parentId) {
+      const childNodes = parentLookup.get(userNode.parentId);
+      if (childNodes) {
+        childNodes.push(internalNode);
+      } else {
+        parentLookup.set(userNode.parentId, [internalNode]);
+      }
     }
   });
 
-  if (parentNodeIds.size > 0) {
+  if (parentLookup.size > 0) {
-    updateAbsolutePositions(nodeLookup, options, parentNodeIds);
+    updateAbsolutePositions(nodeLookup, options);
   }
 }
 
@@ -145,38 +155,40 @@ function calculateXYZPosition<NodeType extends NodeBase>(
   );
 }
 
-export function handleParentExpand(
+export function handleExpandParent(
-  nodes: InternalNodeBase[],
+  children: ParentExpandChild[],
-  nodeLookup: NodeLookup
+  nodeLookup: NodeLookup,
+  parentLookup: ParentLookup,
+  nodeOrigin?: NodeOrigin
 ): (NodeDimensionChange | NodePositionChange)[] {
   const changes: (NodeDimensionChange | NodePositionChange)[] = [];
-  const chilNodeRects = new Map<string, Rect>();
+  const parentExpansions = new Map<string, { expandedRect: Rect; parent: InternalNodeBase }>();
 
-  nodes.forEach((node) => {
+  // determine the expanded rectangle the child nodes would take for each parent
-    const parentId = node.parentId;
+  for (const child of children) {
-    if (node.expandParent && parentId) {
+    const parent = nodeLookup.get(child.parentId);
-      const parentNode = nodeLookup.get(parentId);
+    if (!parent) {
-
+      continue;
-      if (parentNode) {
-        const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin);
-        const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
-        chilNodeRects.set(parentId, expandedRect);
-      }
     }
-  });
 
-  if (chilNodeRects.size > 0) {
+    const parentRect =
-    chilNodeRects.forEach((rect, id) => {
+      parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
-      const origParent = nodeLookup.get(id)!;
+    const expandedRect = getBoundsOfRects(parentRect, child.rect);
-      const { position } = getNodePositionWithOrigin(origParent, origParent.origin);
+    parentExpansions.set(child.parentId, { expandedRect, parent });
-      const dimensions = getNodeDimensions(origParent);
+  }
 
-      if (rect.x < position.x || rect.y < position.y) {
+  if (parentExpansions.size > 0) {
-        const xChange = Math.round(Math.abs(position.x - rect.x));
+    parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
-        const yChange = Math.round(Math.abs(position.y - rect.y));
+      // determine the position & dimensions of the parent
+      const { position } = getNodePositionWithOrigin(parent, parent.origin);
+      const dimensions = getNodeDimensions(parent);
 
+      // determine how much the parent expands by moving the position
+      let xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
+      let yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
+      if (xChange > 0 || yChange > 0) {
         changes.push({
-          id,
+          id: parentId,
           type: 'position',
           position: {
             x: position.x - xChange,
@@ -184,25 +196,31 @@ export function handleParentExpand(
           },
         });
 
-        changes.push({
+        // We move all child nodes in the oppsite direction
-          id,
+        // so the x,y changes of the parent do not move the children
-          type: 'dimensions',
+        const childNodes = parentLookup.get(parentId);
-          resizing: true,
+        childNodes?.forEach((childNode) => {
-          dimensions: {
+          if (!children.some((child) => child.id === childNode.id)) {
-            width: dimensions.width + xChange,
+            changes.push({
-            height: dimensions.height + yChange,
+              id: childNode.id,
-          },
+              type: 'position',
+              position: {
+                x: childNode.position.x + xChange,
+                y: childNode.position.y + yChange,
+              },
+            });
+          }
         });
+      }
 
-        // @todo we need to reset child node positions if < 0
+      if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
-      } else if (dimensions.width < rect.width || dimensions.height < rect.height) {
         changes.push({
-          id,
+          id: parentId,
           type: 'dimensions',
           resizing: true,
           dimensions: {
-            width: Math.max(dimensions.width, rect.width),
+            width: Math.max(dimensions.width, Math.round(expandedRect.width)),
-            height: Math.max(dimensions.height, rect.height),
+            height: Math.max(dimensions.height, Math.round(expandedRect.height)),
           },
         });
       }
@@ -214,7 +232,8 @@ export function handleParentExpand(
 
 export function updateNodeInternals<NodeType extends InternalNodeBase>(
   updates: Map<string, InternalNodeUpdate>,
-  nodeLookup: Map<string, NodeType>,
+  nodeLookup: NodeLookup<NodeType>,
+  parentLookup: ParentLookup<NodeType>,
   domNode: HTMLElement | null,
   nodeOrigin?: NodeOrigin
 ): { changes: (NodeDimensionChange | NodePositionChange)[]; updatedInternals: boolean } {
@@ -229,7 +248,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
   const style = window.getComputedStyle(viewportNode);
   const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
   // in this array we collect nodes, that might trigger changes (like expanding parent)
-  const triggerChangeNodes: NodeType[] = [];
+  const parentExpandChildren: ParentExpandChild[] = [];
 
   updates.forEach((update) => {
     const node = nodeLookup.get(update.id);
@@ -275,16 +294,20 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
             dimensions,
           });
 
-          if (newNode.expandParent) {
+          if (newNode.expandParent && newNode.parentId) {
-            triggerChangeNodes.push(newNode);
+            parentExpandChildren.push({
+              id: newNode.id,
+              parentId: newNode.parentId,
+              rect: nodeToRect(newNode, newNode.origin || nodeOrigin),
+            });
           }
         }
       }
     }
   });
 
-  if (triggerChangeNodes.length > 0) {
+  if (parentExpandChildren.length > 0) {
-    const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+    const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
     changes.push(...parentExpandChanges);
   }
 

packages/system/src/utils/types.ts

@@ -1 +1,5 @@
+import { Rect } from '../types';
+
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type ParentExpandChild = { id: string; parentId: string; rect: Rect };

packages/system/src/xyresizer/XYResizer.ts

@@ -15,19 +15,13 @@ const initStartValues = {
   aspectRatio: 1,
 };
 
-const initChange = {
+export type XYResizerChange = {
-  x: 0,
+  x?: number;
-  y: 0,
+  y?: number;
-  width: 0,
+  width?: number;
-  height: 0,
+  height?: number;
-  isXPosChange: false,
-  isYPosChange: false,
-  isWidthChange: false,
-  isHeightChange: false,
 };
 
-export type XYResizerChange = typeof initChange;
-
 export type XYResizerChildChange = {
   id: string;
   position: XYPosition;
@@ -117,158 +111,157 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
         const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
         node = nodeLookup.get(nodeId);
 
-        if (node) {
+        if (!node) {
-          const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+          return;
+        }
 
-          prevValues = {
+        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            width: node.measured?.width ?? 0,
-            height: node.measured?.height ?? 0,
-            x: node.position.x ?? 0,
-            y: node.position.y ?? 0,
-          };
 
-          startValues = {
+        prevValues = {
-            ...prevValues,
+          width: node.measured?.width ?? 0,
-            pointerX: xSnapped,
+          height: node.measured?.height ?? 0,
-            pointerY: ySnapped,
+          x: node.position.x ?? 0,
-            aspectRatio: prevValues.width / prevValues.height,
+          y: node.position.y ?? 0,
-          };
+        };
 
-          parentNode = undefined;
+        startValues = {
-          if (node.extent === 'parent' || node.expandParent) {
+          ...prevValues,
-            parentNode = nodeLookup.get(node.parentId!);
+          pointerX: xSnapped,
-            if (parentNode && node.extent === 'parent') {
+          pointerY: ySnapped,
-              parentExtent = nodeToParentExtent(parentNode);
+          aspectRatio: prevValues.width / prevValues.height,
-            }
+        };
+
+        parentNode = undefined;
+        if (node.extent === 'parent' || node.expandParent) {
+          parentNode = nodeLookup.get(node.parentId!);
+          if (parentNode && node.extent === 'parent') {
+            parentExtent = nodeToParentExtent(parentNode);
           }
+        }
 
-          // Collect all child nodes to correct their relative positions when top/left changes
+        // Collect all child nodes to correct their relative positions when top/left changes
-          // Determine largest minimal extent the parent node is allowed to resize to
+        // Determine largest minimal extent the parent node is allowed to resize to
-          childNodes = [];
+        childNodes = [];
-          childExtent = undefined;
+        childExtent = undefined;
 
-          for (const [childId, child] of nodeLookup) {
+        for (const [childId, child] of nodeLookup) {
-            if (child.parentId === nodeId) {
+          if (child.parentId === nodeId) {
-              childNodes.push({
+            childNodes.push({
-                id: childId,
+              id: childId,
-                position: { ...child.position },
+              position: { ...child.position },
-                extent: child.extent,
+              extent: child.extent,
-              });
+            });
 
-              if (child.extent === 'parent' || child.expandParent) {
+            if (child.extent === 'parent' || child.expandParent) {
-                const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
+              const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
 
-                if (childExtent) {
+              if (childExtent) {
-                  childExtent = [
+                childExtent = [
-                    [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],
+                  [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],
-                    [Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],
+                  [Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],
-                  ];
+                ];
-                } else {
+              } else {
-                  childExtent = extent;
+                childExtent = extent;
-                }
               }
             }
           }
-
-          onResizeStart?.(event, { ...prevValues });
         }
+
+        onResizeStart?.(event, { ...prevValues });
       })
       .on('drag', (event: ResizeDragEvent) => {
         const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
         const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
         const childChanges: XYResizerChildChange[] = [];
 
-        if (node) {
+        if (!node) {
-          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+          return;
-          const change = { ...initChange };
-          const nodeOrigin = node.origin ?? storeNodeOrigin;
-
-          const { width, height, x, y } = getDimensionsAfterResize(
-            startValues,
-            controlDirection,
-            pointerPosition,
-            boundaries,
-            keepAspectRatio,
-            nodeOrigin,
-            parentExtent,
-            childExtent
-          );
-
-          const isWidthChange = width !== prevWidth;
-          const isHeightChange = height !== prevHeight;
-
-          const isXPosChange = x !== prevX && isWidthChange;
-          const isYPosChange = y !== prevY && isHeightChange;
-
-          if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
-            change.isXPosChange = isXPosChange;
-            change.isYPosChange = isYPosChange;
-            change.x = isXPosChange ? x : prevX;
-            change.y = isYPosChange ? y : prevY;
-
-            prevValues.x = change.x;
-            prevValues.y = change.y;
-
-            // Fix expandParent when resizing from top/left
-            if (parentNode && node.expandParent) {
-              if (change.x < 0) {
-                prevValues.x = 0;
-                startValues.x = startValues.x - change.x;
-              }
-
-              if (change.y < 0) {
-                prevValues.y = 0;
-                startValues.y = startValues.y - change.y;
-              }
-            }
-
-            if (childNodes.length > 0) {
-              const xChange = x - prevX;
-              const yChange = y - prevY;
-
-              for (const childNode of childNodes) {
-                childNode.position = {
-                  x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
-                  y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
-                };
-                childChanges.push(childNode);
-              }
-            }
-          }
-
-          if (isWidthChange || isHeightChange) {
-            change.isWidthChange = isWidthChange;
-            change.isHeightChange = isHeightChange;
-            change.width = width;
-            change.height = height;
-            prevValues.width = change.width;
-            prevValues.height = change.height;
-          }
-
-          if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
-            return;
-          }
-
-          const direction = getResizeDirection({
-            width: prevValues.width,
-            prevWidth,
-            height: prevValues.height,
-            prevHeight,
-            affectsX: controlDirection.affectsX,
-            affectsY: controlDirection.affectsY,
-          });
-
-          const nextValues = { ...prevValues, direction };
-
-          const callResize = shouldResize?.(event, nextValues);
-
-          if (callResize === false) {
-            return;
-          }
-
-          onResize?.(event, nextValues);
-          onChange(change, childChanges);
         }
+        const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+        const change: XYResizerChange = {};
+        const nodeOrigin = node.origin ?? storeNodeOrigin;
+
+        const { width, height, x, y } = getDimensionsAfterResize(
+          startValues,
+          controlDirection,
+          pointerPosition,
+          boundaries,
+          keepAspectRatio,
+          nodeOrigin,
+          parentExtent,
+          childExtent
+        );
+
+        const isWidthChange = width !== prevWidth;
+        const isHeightChange = height !== prevHeight;
+
+        const isXPosChange = x !== prevX && isWidthChange;
+        const isYPosChange = y !== prevY && isHeightChange;
+
+        if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) {
+          return;
+        }
+
+        if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
+          change.x = isXPosChange ? x : prevValues.x;
+          change.y = isYPosChange ? y : prevValues.y;
+
+          prevValues.x = change.x;
+          prevValues.y = change.y;
+
+          // Fix expandParent when resizing from top/left
+          if (parentNode && node.expandParent) {
+            if (change.x && change.x < 0) {
+              prevValues.x = 0;
+              startValues.x = startValues.x - change.x;
+            }
+
+            if (change.y && change.y < 0) {
+              prevValues.y = 0;
+              startValues.y = startValues.y - change.y;
+            }
+          }
+
+          if (childNodes.length > 0) {
+            const xChange = x - prevX;
+            const yChange = y - prevY;
+
+            for (const childNode of childNodes) {
+              childNode.position = {
+                x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
+                y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
+              };
+              childChanges.push(childNode);
+            }
+          }
+        }
+
+        if (isWidthChange || isHeightChange) {
+          change.width = isWidthChange ? width : prevValues.width;
+          change.height = isHeightChange ? height : prevValues.height;
+          prevValues.width = change.width;
+          prevValues.height = change.height;
+        }
+
+        const direction = getResizeDirection({
+          width: prevValues.width,
+          prevWidth,
+          height: prevValues.height,
+          prevHeight,
+          affectsX: controlDirection.affectsX,
+          affectsY: controlDirection.affectsY,
+        });
+
+        const nextValues = { ...prevValues, direction };
+
+        const callResize = shouldResize?.(event, nextValues);
+
+        if (callResize === false) {
+          return;
+        }
+
+        onResize?.(event, nextValues);
+        onChange(change, childChanges);
       })
       .on('end', (event: ResizeDragEvent) => {
         onResizeEnd?.(event, { ...prevValues });