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

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(
-  node: NodeBase | InternalNodeBase,
+export function evaluateAbsolutePosition(
+  position: XYPosition,
+  parentId: string,
   nodeLookup: NodeLookup,
   nodeOrigin: NodeOrigin = [0, 0]
-): InternalNodeBase | null {
-  const internalNode = nodeLookup.get(node.id);
+): XYPosition {
+  let nextParentId: string | undefined = parentId;
+  const positionAbsolute = { ...position };
 
-  if (!internalNode) {
-    return null;
-  }
-
-  let parentId = internalNode.parentId;
-  const positionAbsolute = { ...node.position };
-
-  while (parentId) {
+  while (nextParentId) {
     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 {
-    ...internalNode,
-    internals: {
-      ...internalNode.internals,
-      positionAbsolute,
-    },
-  };
+  return 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 = parentId ? nodeLookup.get(parentId) : null;
-      const { x, y, z } = calculateXYZPosition(
-        node,
-        nodeLookup,
-        {
-          ...node.position,
-          z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
-        },
-        parentNode?.origin || options.nodeOrigin
-      );
+    const parentNode = nodeLookup.get(parentId);
+    const { x, y, z } = calculateXYZPosition(
+      node,
+      nodeLookup,
+      {
+        ...node.position,
+        z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
+      },
+      parentNode?.origin ?? options.nodeOrigin
+    );
 
-      const currPosition = node.internals.positionAbsolute;
-      const positionChanged = x !== currPosition.x || y !== currPosition.y;
+    const currPosition = node.internals.positionAbsolute;
+    const positionChanged = x !== currPosition.x || y !== currPosition.y;
 
-      node.internals.positionAbsolute = positionChanged ? { x, y } : currPosition;
-      node.internals.z = z;
-
-      if (parentNodeIds !== undefined) {
-        node.internals.isParent = !!parentNodeIds?.has(id);
-      }
-
-      nodeLookup.set(id, node);
+    if (positionChanged || z !== node.internals.z) {
+      node.internals = {
+        ...node.internals,
+        positionAbsolute: positionChanged ? { x, y } : currPosition,
+        z,
+      };
     }
   }
 }
@@ -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) {
-      parentNodeIds.add(userNode.parentId);
-    }
-
+    let internalNode = currentStoreNode!;
     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) {
-    updateAbsolutePositions(nodeLookup, options, parentNodeIds);
+  if (parentLookup.size > 0) {
+    updateAbsolutePositions(nodeLookup, options);
   }
 }
 
@@ -145,38 +155,40 @@ function calculateXYZPosition<NodeType extends NodeBase>(
   );
 }
 
-export function handleParentExpand(
-  nodes: InternalNodeBase[],
-  nodeLookup: NodeLookup
+export function handleExpandParent(
+  children: ParentExpandChild[],
+  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) => {
-    const parentId = node.parentId;
-    if (node.expandParent && parentId) {
-      const parentNode = nodeLookup.get(parentId);
-
-      if (parentNode) {
-        const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin);
-        const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
-        chilNodeRects.set(parentId, expandedRect);
-      }
+  // determine the expanded rectangle the child nodes would take for each parent
+  for (const child of children) {
+    const parent = nodeLookup.get(child.parentId);
+    if (!parent) {
+      continue;
     }
-  });
 
-  if (chilNodeRects.size > 0) {
-    chilNodeRects.forEach((rect, id) => {
-      const origParent = nodeLookup.get(id)!;
-      const { position } = getNodePositionWithOrigin(origParent, origParent.origin);
-      const dimensions = getNodeDimensions(origParent);
+    const parentRect =
+      parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
+    const expandedRect = getBoundsOfRects(parentRect, child.rect);
+    parentExpansions.set(child.parentId, { expandedRect, parent });
+  }
 
-      if (rect.x < position.x || rect.y < position.y) {
-        const xChange = Math.round(Math.abs(position.x - rect.x));
-        const yChange = Math.round(Math.abs(position.y - rect.y));
+  if (parentExpansions.size > 0) {
+    parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
+      // 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({
-          id,
-          type: 'dimensions',
-          resizing: true,
-          dimensions: {
-            width: dimensions.width + xChange,
-            height: dimensions.height + yChange,
-          },
+        // We move all child nodes in the oppsite direction
+        // so the x,y changes of the parent do not move the children
+        const childNodes = parentLookup.get(parentId);
+        childNodes?.forEach((childNode) => {
+          if (!children.some((child) => child.id === childNode.id)) {
+            changes.push({
+              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
-      } else if (dimensions.width < rect.width || dimensions.height < rect.height) {
+      if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
         changes.push({
-          id,
+          id: parentId,
           type: 'dimensions',
           resizing: true,
           dimensions: {
-            width: Math.max(dimensions.width, rect.width),
-            height: Math.max(dimensions.height, rect.height),
+            width: Math.max(dimensions.width, Math.round(expandedRect.width)),
+            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) {
-            triggerChangeNodes.push(newNode);
+          if (newNode.expandParent && newNode.parentId) {
+            parentExpandChildren.push({
+              id: newNode.id,
+              parentId: newNode.parentId,
+              rect: nodeToRect(newNode, newNode.origin || nodeOrigin),
+            });
           }
         }
       }
     }
   });
 
-  if (triggerChangeNodes.length > 0) {
-    const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+  if (parentExpandChildren.length > 0) {
+    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 = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  isXPosChange: false,
-  isYPosChange: false,
-  isWidthChange: false,
-  isHeightChange: false,
+export type XYResizerChange = {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
 };
 
-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) {
-          const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+        if (!node) {
+          return;
+        }
 
-          prevValues = {
-            width: node.measured?.width ?? 0,
-            height: node.measured?.height ?? 0,
-            x: node.position.x ?? 0,
-            y: node.position.y ?? 0,
-          };
+        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
 
-          startValues = {
-            ...prevValues,
-            pointerX: xSnapped,
-            pointerY: ySnapped,
-            aspectRatio: prevValues.width / prevValues.height,
-          };
+        prevValues = {
+          width: node.measured?.width ?? 0,
+          height: node.measured?.height ?? 0,
+          x: node.position.x ?? 0,
+          y: node.position.y ?? 0,
+        };
 
-          parentNode = undefined;
-          if (node.extent === 'parent' || node.expandParent) {
-            parentNode = nodeLookup.get(node.parentId!);
-            if (parentNode && node.extent === 'parent') {
-              parentExtent = nodeToParentExtent(parentNode);
-            }
+        startValues = {
+          ...prevValues,
+          pointerX: xSnapped,
+          pointerY: ySnapped,
+          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
-          // Determine largest minimal extent the parent node is allowed to resize to
-          childNodes = [];
-          childExtent = undefined;
+        // 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
+        childNodes = [];
+        childExtent = undefined;
 
-          for (const [childId, child] of nodeLookup) {
-            if (child.parentId === nodeId) {
-              childNodes.push({
-                id: childId,
-                position: { ...child.position },
-                extent: child.extent,
-              });
+        for (const [childId, child] of nodeLookup) {
+          if (child.parentId === nodeId) {
+            childNodes.push({
+              id: childId,
+              position: { ...child.position },
+              extent: child.extent,
+            });
 
-              if (child.extent === 'parent' || child.expandParent) {
-                const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
+            if (child.extent === 'parent' || child.expandParent) {
+              const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
 
-                if (childExtent) {
-                  childExtent = [
-                    [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])],
-                  ];
-                } else {
-                  childExtent = extent;
-                }
+              if (childExtent) {
+                childExtent = [
+                  [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])],
+                ];
+              } else {
+                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) {
-          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
-          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);
+        if (!node) {
+          return;
         }
+        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 });