chore(node-resizer): update

examples/react/src/examples/NodeResizer/index.tsx

@@ -32,96 +32,96 @@ const nodeStyle = {
 const initialEdges: Edge[] = [];
 
 const initialNodes: Node[] = [
-  {
+  // {
-    id: '1',
+  //   id: '1',
-    type: 'defaultResizer',
+  //   type: 'defaultResizer',
-    data: { label: 'default resizer' },
+  //   data: { label: 'default resizer' },
-    position: { x: 0, y: 0 },
+  //   position: { x: 0, y: 0 },
-    origin: [1, 1],
+  //   origin: [1, 1],
-    style: { ...nodeStyle },
+  //   style: { ...nodeStyle },
-  },
+  // },
-  {
+  // {
-    id: '1a',
+  //   id: '1a',
-    type: 'defaultResizer',
+  //   type: 'defaultResizer',
-    data: {
+  //   data: {
-      label: 'default resizer with min and max dimensions',
+  //     label: 'default resizer with min and max dimensions',
-      minWidth: 100,
+  //     minWidth: 100,
-      minHeight: 80,
+  //     minHeight: 80,
-      maxWidth: 200,
+  //     maxWidth: 200,
-      maxHeight: 200,
+  //     maxHeight: 200,
-    },
+  //   },
-    position: { x: 0, y: 60 },
+  //   position: { x: 0, y: 60 },
-    width: 100,
+  //   width: 100,
-    height: 80,
+  //   height: 80,
-    style: { ...nodeStyle },
+  //   style: { ...nodeStyle },
-  },
+  // },
-  {
+  // {
-    id: '1b',
+  //   id: '1b',
-    type: 'defaultResizer',
+  //   type: 'defaultResizer',
-    data: {
+  //   data: {
-      label: 'default resizer with initial size and aspect ratio',
+  //     label: 'default resizer with initial size and aspect ratio',
-      keepAspectRatio: true,
+  //     keepAspectRatio: true,
-      minWidth: 100,
+  //     minWidth: 100,
-      minHeight: 60,
+  //     minHeight: 60,
-      maxWidth: 400,
+  //     maxWidth: 400,
-      maxHeight: 400,
+  //     maxHeight: 400,
-    },
+  //   },
-    position: { x: 250, y: 0 },
+  //   position: { x: 250, y: 0 },
-    width: 174,
+  //   width: 174,
-    height: 123,
+  //   height: 123,
-    style: {
+  //   style: {
-      ...nodeStyle,
+  //     ...nodeStyle,
-    },
+  //   },
-  },
+  // },
-  {
+  // {
-    id: '2',
+  //   id: '2',
-    type: 'customResizer',
+  //   type: 'customResizer',
-    data: { label: 'custom resize icon' },
+  //   data: { label: 'custom resize icon' },
-    position: { x: 0, y: 200 },
+  //   position: { x: 0, y: 200 },
-    width: 100,
+  //   width: 100,
-    height: 60,
+  //   height: 60,
-    style: { ...nodeStyle },
+  //   style: { ...nodeStyle },
-  },
+  // },
-  {
+  // {
-    id: '3',
+  //   id: '3',
-    type: 'verticalResizer',
+  //   type: 'verticalResizer',
-    data: { label: 'vertical resizer' },
+  //   data: { label: 'vertical resizer' },
-    position: { x: 250, y: 200 },
+  //   position: { x: 250, y: 200 },
-    style: { ...nodeStyle },
+  //   style: { ...nodeStyle },
-  },
+  // },
-  {
+  // {
-    id: '3a',
+  //   id: '3a',
-    type: 'verticalResizer',
+  //   type: 'verticalResizer',
-    data: {
+  //   data: {
-      label: 'vertical resizer with min/maxHeight and aspect ratio',
+  //     label: 'vertical resizer with min/maxHeight and aspect ratio',
-      minHeight: 50,
+  //     minHeight: 50,
-      maxHeight: 200,
+  //     maxHeight: 200,
-      keepAspectRatio: true,
+  //     keepAspectRatio: true,
-    },
+  //   },
-    position: { x: 400, y: 200 },
+  //   position: { x: 400, y: 200 },
-    height: 50,
+  //   height: 50,
-    style: { ...nodeStyle },
+  //   style: { ...nodeStyle },
-  },
+  // },
-  {
+  // {
-    id: '4',
+  //   id: '4',
-    type: 'horizontalResizer',
+  //   type: 'horizontalResizer',
-    data: {
+  //   data: {
-      label: 'horizontal resizer with aspect ratio',
+  //     label: 'horizontal resizer with aspect ratio',
-      keepAspectRatio: true,
+  //     keepAspectRatio: true,
-      minHeight: 20,
+  //     minHeight: 20,
-      maxHeight: 80,
+  //     maxHeight: 80,
-      maxWidth: 300,
+  //     maxWidth: 300,
-    },
+  //   },
-    position: { x: 250, y: 300 },
+  //   position: { x: 250, y: 300 },
-    style: { ...nodeStyle },
+  //   style: { ...nodeStyle },
-  },
+  // },
-  {
+  // {
-    id: '4a',
+  //   id: '4a',
-    type: 'horizontalResizer',
+  //   type: 'horizontalResizer',
-    data: { label: 'horizontal resizer with maxWidth', maxWidth: 300 },
+  //   data: { label: 'horizontal resizer with maxWidth', maxWidth: 300 },
-    position: { x: 250, y: 400 },
+  //   position: { x: 250, y: 400 },
-    style: { ...nodeStyle },
+  //   style: { ...nodeStyle },
-  },
+  // },
   {
     id: '5',
     type: 'defaultResizer',
@@ -130,35 +130,36 @@ const initialNodes: Node[] = [
     width: 300,
     height: 400,
     style: { ...nodeStyle },
-    origin: [0, 0],
-  },
-  {
-    id: '5a',
-    type: 'defaultResizer',
-    data: {
-      label: 'Child with extent: parent',
-    },
-    position: { x: 50, y: 50 },
-    parentId: '5',
-    extent: 'parent',
-    width: 50,
-    height: 100,
-    style: { ...nodeStyle },
-  },
-  {
-    id: '5b',
-    type: 'defaultResizer',
-    data: { label: 'Child with expandParent' },
-    position: { x: 150, y: 100 },
-    parentId: '5',
-    expandParent: true,
-    style: { ...nodeStyle },
   },
+  // {
+  //   id: '5a',
+  //   type: 'defaultResizer',
+  //   data: {
+  //     label: 'Child with extent: parent',
+  //   },
+  //   position: { x: 50, y: 50 },
+  //   parentId: '5',
+  //   extent: 'parent',
+  //   width: 50,
+  //   height: 100,
+  //   style: { ...nodeStyle },
+  // },
+  // {
+  //   id: '5b',
+  //   type: 'defaultResizer',
+  //   data: { label: 'Child with expandParent' },
+  //   position: { x: 150, y: 100 },
+  //   parentId: '5',
+  //   expandParent: true,
+  //   style: { ...nodeStyle },
+  // },
   {
     id: '5c',
     type: 'defaultResizer',
-    data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true },
+    data: { label: 'Child with expandParent & keepAspectRatio' },
-    position: { x: 25, y: 200 },
+    position: { x: 250, y: 200 },
+    height: 100,
+    width: 100,
     parentId: '5',
     expandParent: true,
     style: { ...nodeStyle },

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

@@ -67,11 +67,10 @@ function ResizeControl({
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
           const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
-
           const changes: NodeChange[] = [];
           const nextPosition = { x: change.x, y: change.y };
-
           const node = nodeLookup.get(id);
+
           if (node && node.expandParent && node.parentId) {
             const origin = node.origin ?? nodeOrigin;
             const width = change.width ?? node.measured.width!;

packages/system/src/utils/store.ts

@@ -172,6 +172,7 @@ export function handleExpandParent(
       parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
 
     const expandedRect = getBoundsOfRects(parentRect, child.rect);
+
     parentExpansions.set(child.parentId, { expandedRect, parent });
   }
 

packages/system/src/xyresizer/XYResizer.ts

@@ -3,7 +3,15 @@ import { select } from 'd3-selection';
 
 import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils';
 import { getPointerPosition } from '../utils';
-import type { CoordinateExtent, NodeBase, NodeLookup, NodeOrigin, Transform, XYPosition } from '../types';
+import type {
+  CoordinateExtent,
+  InternalNodeBase,
+  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 };
@@ -100,9 +108,9 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
 
     const controlDirection = getControlDirection(controlPosition);
 
-    let node: NodeBase | undefined = undefined;
+    let node: InternalNodeBase | undefined = undefined;
     let childNodes: XYResizerChildChange[] = [];
-    let parentNode: NodeBase | undefined = undefined; // Needed to fix expandParent
+    let parentNode: InternalNodeBase | undefined = undefined; // Needed to fix expandParent
     let parentExtent: CoordinateExtent | undefined = undefined;
     let childExtent: CoordinateExtent | undefined = undefined;
 
@@ -118,8 +126,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
         const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
 
         prevValues = {
-          width: node.measured?.width ?? 0,
+          width: node.measured.width ?? 0,
-          height: node.measured?.height ?? 0,
+          height: node.measured.height ?? 0,
           x: node.position.x ?? 0,
           y: node.position.y ?? 0,
         };
@@ -132,11 +140,10 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
         };
 
         parentNode = undefined;
-        if (node.extent === 'parent' || node.expandParent) {
+
-          parentNode = nodeLookup.get(node.parentId!);
+        if (node.parentId && (node.extent === 'parent' || node.expandParent)) {
-          if (parentNode && node.extent === 'parent') {
+          parentNode = nodeLookup.get(node.parentId);
-            parentExtent = nodeToParentExtent(parentNode);
+          parentExtent = parentNode && node.extent === 'parent' ? nodeToParentExtent(parentNode) : undefined;
-          }
         }
 
         // Collect all child nodes to correct their relative positions when top/left changes
@@ -153,7 +160,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
             });
 
             if (child.extent === 'parent' || child.expandParent) {
-              const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
+              const extent = nodeToChildExtent(child, node, child.origin ?? nodeOrigin);
 
               if (childExtent) {
                 childExtent = [
@@ -202,7 +209,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
           return;
         }
 
-        if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
+        if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] === 1) {
           change.x = isXPosChange ? x : prevValues.x;
           change.y = isYPosChange ? y : prevValues.y;
 
@@ -222,6 +229,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
             }
           }
 
+          // when top/left changes, correct the relative positions of child nodes
+          // so that they stay in the same position
           if (childNodes.length > 0) {
             const xChange = x - prevX;
             const yChange = y - prevY;
@@ -243,6 +252,12 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
           prevValues.height = change.height;
         }
 
+        if (parentNode && node.expandParent) {
+          if (prevValues.x - (change?.width ?? 0) < 0) {
+            // console.log(1);
+          }
+        }
+
         const direction = getResizeDirection({
           width: prevValues.width,
           prevWidth,