fixed NodeResizer for various NodeOrigins

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

@@ -50,12 +50,13 @@ function ResizeControl({
         domNode: resizeControlRef.current,
         nodeId: id,
         getStoreItems: () => {
-          const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
+          const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState();
           return {
             nodeLookup,
             transform,
             snapGrid,
             snapToGrid,
+            nodeOrigin,
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {

packages/system/src/xyresizer/XYResizer.ts

@@ -3,7 +3,7 @@ import { select } from 'd3-selection';
 
 import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils';
 import { getPointerPosition } from '../utils';
-import type { CoordinateExtent, NodeBase, NodeLookup, Transform, XYPosition } from '../types';
+import type { CoordinateExtent, NodeBase, NodeLookup, NodeOrigin, Transform, XYPosition } from '../types';
 import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types';
 
 const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
@@ -42,6 +42,7 @@ type XYResizerParams = {
     transform: Transform;
     snapGrid?: [number, number];
     snapToGrid: boolean;
+    nodeOrigin: NodeOrigin;
   };
   onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => void;
   onEnd?: () => void;
@@ -74,13 +75,17 @@ function nodeToParentExtent(node: NodeBase): CoordinateExtent {
   ];
 }
 
-function nodeToChildExtent(child: NodeBase, parent: NodeBase): CoordinateExtent {
+function nodeToChildExtent(child: NodeBase, parent: NodeBase, nodeOrigin: NodeOrigin): CoordinateExtent {
+  const x = parent.position.x + child.position.x;
+  const y = parent.position.y + child.position.y;
+  const width = child.computed!.width! ?? 0;
+  const height = child.computed!.height! ?? 0;
+  const originOffsetX = nodeOrigin[0] * width;
+  const originOffsetY = nodeOrigin[1] * height;
+
   return [
-    [parent.position.x + child.position.x, parent.position.y + child.position.y],
+    [x - originOffsetX, y - originOffsetY],
-    [
+    [x + width - originOffsetX, y + height - originOffsetY],
-      parent.position.x + child.position.x + child.computed!.width!,
-      parent.position.y + child.position.y + child.computed!.height!,
-    ],
   ];
 }
 
@@ -109,7 +114,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
 
     const dragHandler = drag<HTMLDivElement, unknown>()
       .on('start', (event: ResizeDragEvent) => {
-        const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+        const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
         node = nodeLookup.get(nodeId);
 
         if (node) {
@@ -151,7 +156,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
               });
 
               if (child.extent === 'parent' || child.expandParent) {
-                const extent = nodeToChildExtent(child, node!);
+                const extent = nodeToChildExtent(child, node!, nodeOrigin);
 
                 if (childExtent) {
                   childExtent = [
@@ -169,7 +174,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
         }
       })
       .on('drag', (event: ResizeDragEvent) => {
-        const { transform, snapGrid, snapToGrid } = getStoreItems();
+        const { transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
         const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
         const childChanges: XYResizerChildChange[] = [];
 
@@ -184,6 +189,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
             pointerPosition,
             boundaries,
             keepAspectRatio,
+            nodeOrigin,
             parentExtent,
             childExtent
           );
@@ -191,40 +197,39 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
           const isWidthChange = width !== prevWidth;
           const isHeightChange = height !== prevHeight;
 
-          if (controlDirection.affectsX || controlDirection.affectsY) {
+          const isXPosChange = x !== prevX && isWidthChange;
-            const isXPosChange = x !== prevX && isWidthChange;
+          const isYPosChange = y !== prevY && isHeightChange;
-            const isYPosChange = y !== prevY && isHeightChange;
 
-            if (isXPosChange || isYPosChange) {
+          if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
-              change.isXPosChange = isXPosChange;
+            change.isXPosChange = isXPosChange;
-              change.isYPosChange = isYPosChange;
+            change.isYPosChange = isYPosChange;
-              change.x = isXPosChange ? x : prevX;
+            change.x = isXPosChange ? x : prevX;
-              change.y = isYPosChange ? y : prevY;
+            change.y = isYPosChange ? y : prevY;
 
-              prevValues.x = change.x;
+            prevValues.x = change.x;
-              prevValues.y = change.y;
+            prevValues.y = change.y;
 
-              // Fix expandParent when resizing from top/left
+            // Fix expandParent when resizing from top/left
-              if (parentNode && node.expandParent) {
+            if (parentNode && node.expandParent) {
-                if (change.x < 0) {
+              if (change.x < 0) {
-                  prevValues.x = 0;
+                prevValues.x = 0;
-                  startValues.x = startValues.x - change.x;
+                startValues.x = startValues.x - change.x;
-                }
+              }
 
-                if (change.y < 0) {
+              if (change.y < 0) {
-                  prevValues.y = 0;
+                prevValues.y = 0;
-                  startValues.y = startValues.y - change.y;
+                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,
+                  x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
-                  y: childNode.position.y - yChange,
+                  y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
                 };
                 childChanges.push(childNode);
               }

packages/system/src/xyresizer/utils.ts

@@ -1,4 +1,4 @@
-import { CoordinateExtent } from '../types';
+import { CoordinateExtent, NodeOrigin } from '../types';
 import { getPointerPosition } from '../utils';
 import { ControlPosition } from './types';
 
@@ -115,6 +115,7 @@ export function getDimensionsAfterResize(
   pointerPosition: ReturnType<typeof getPointerPosition>,
   boundaries: { minWidth: number; maxWidth: number; minHeight: number; maxHeight: number },
   keepAspectRatio: boolean,
+  nodeOrigin: NodeOrigin,
   extent?: CoordinateExtent,
   childExtent?: CoordinateExtent
 ) {
@@ -132,6 +133,9 @@ export function getDimensionsAfterResize(
   const newWidth = startWidth + (affectsX ? -distX : distX);
   const newHeight = startHeight + (affectsY ? -distY : distY);
 
+  const originOffsetX = -nodeOrigin[0] * startWidth;
+  const originOffsetY = -nodeOrigin[1] * startHeight;
+
   // Check if maxWidth, minWWidth, maxHeight, minHeight are restricting the resize
   let clampX = getSizeClamp(newWidth, minWidth, maxWidth);
   let clampY = getSizeClamp(newHeight, minHeight, maxHeight);
@@ -141,15 +145,15 @@ export function getDimensionsAfterResize(
     let xExtentClamp = 0;
     let yExtentClamp = 0;
     if (affectsX && distX < 0) {
-      xExtentClamp = getLowerExtentClamp(startX + distX, extent[0][0]);
+      xExtentClamp = getLowerExtentClamp(startX + distX + originOffsetX, extent[0][0]);
     } else if (!affectsX && distX > 0) {
-      xExtentClamp = getUpperExtentClamp(startX + newWidth, extent[1][0]);
+      xExtentClamp = getUpperExtentClamp(startX + newWidth + originOffsetX, extent[1][0]);
     }
 
     if (affectsY && distY < 0) {
-      yExtentClamp = getLowerExtentClamp(startY + distY, extent[0][1]);
+      yExtentClamp = getLowerExtentClamp(startY + distY + originOffsetY, extent[0][1]);
     } else if (!affectsY && distY > 0) {
-      yExtentClamp = getUpperExtentClamp(startY + newHeight, extent[1][1]);
+      yExtentClamp = getUpperExtentClamp(startY + newHeight + originOffsetY, extent[1][1]);
     }
 
     clampX = Math.max(clampX, xExtentClamp);
@@ -187,10 +191,12 @@ export function getDimensionsAfterResize(
       if (extent) {
         let aspectExtentClamp = 0;
         if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) {
-          aspectExtentClamp = getUpperExtentClamp(startY + newWidth / aspectRatio, extent[1][1]) * aspectRatio;
+          aspectExtentClamp =
+            getUpperExtentClamp(startY + originOffsetY + newWidth / aspectRatio, extent[1][1]) * aspectRatio;
         } else {
           aspectExtentClamp =
-            getLowerExtentClamp(startY + (affectsX ? distX : -distX) / aspectRatio, extent[0][1]) * aspectRatio;
+            getLowerExtentClamp(startY + originOffsetY + (affectsX ? distX : -distX) / aspectRatio, extent[0][1]) *
+            aspectRatio;
         }
         clampX = Math.max(clampX, aspectExtentClamp);
       }
@@ -216,10 +222,12 @@ export function getDimensionsAfterResize(
       if (extent) {
         let aspectExtentClamp = 0;
         if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) {
-          aspectExtentClamp = getUpperExtentClamp(startX + newHeight * aspectRatio, extent[1][0]) / aspectRatio;
+          aspectExtentClamp =
+            getUpperExtentClamp(startX + newHeight * aspectRatio + originOffsetX, extent[1][0]) / aspectRatio;
         } else {
           aspectExtentClamp =
-            getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio, extent[0][0]) / aspectRatio;
+            getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio + originOffsetX, extent[0][0]) /
+            aspectRatio;
         }
         clampY = Math.max(clampY, aspectExtentClamp);
       }
@@ -258,10 +266,16 @@ export function getDimensionsAfterResize(
     }
   }
 
+  const width = startWidth + (affectsX ? -distX : distX);
+  const height = startHeight + (affectsY ? -distY : distY);
+
+  const x = affectsX ? startX + distX : startX;
+  const y = affectsY ? startY + distY : startY;
+
   return {
-    width: startWidth + (affectsX ? -distX : distX),
+    width: width,
-    height: startHeight + (affectsY ? -distY : distY),
+    height: height,
-    x: affectsX ? startX + distX : startX,
+    x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x,
-    y: affectsY ? startY + distY : startY,
+    y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y,
   };
 }