@xyflow/system 0.0.17 → 0.0.18

package/dist/esm/index.js

@@ -173,8 +173,9 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
             },
         };
     }
-    const offsetX = (node.computed?.width ?? node.width ?? 0) * nodeOrigin[0];
-    const offsetY = (node.computed?.height ?? node.height ?? 0) * nodeOrigin[1];
+    const { width, height } = getNodeDimensions(node);
+    const offsetX = width * nodeOrigin[0];
+    const offsetY = height * nodeOrigin[1];
     const position = {
         x: node.position.x - offsetX,
         y: node.position.y - offsetY,
@@ -206,8 +207,7 @@ const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], useRelativePositio
         const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
         return getBoundsOfBoxes(currBox, rectToBox({
             ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
-            width: node.computed?.width ?? node.width ?? 0,
-            height: node.computed?.height ?? node.height ?? 0,
+            ...getNodeDimensions(node),
         }));
     }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
     return boxToRect(box);
@@ -222,8 +222,8 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
     };
     const visibleNodes = nodes.reduce((res, node) => {
         const { computed, selectable = true, hidden = false } = node;
-        const width = computed?.width ?? node.width ?? null;
-        const height = computed?.height ?? node.height ?? null;
+        const width = computed?.width ?? node.width ?? node.initialWidth ?? null;
+        const height = computed?.height ?? node.height ?? node.initialHeight ?? null;
         if ((excludeNonSelectableNodes && !selectable) || hidden) {
             return res;
         }
@@ -517,6 +517,16 @@ const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.
 function isCoordinateExtent(extent) {
     return extent !== undefined && extent !== 'parent';
 }
+function getNodeDimensions(node) {
+    return {
+        width: node.computed?.width ?? node.width ?? node.initialWidth ?? 0,
+        height: node.computed?.height ?? node.height ?? node.initialHeight ?? 0,
+    };
+}
+function nodeHasDimensions(node) {
+    return ((node.computed?.width ?? node.width ?? node.initialWidth) !== undefined &&
+        (node.computed?.height ?? node.height ?? node.initialHeight) !== undefined);
+}
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform }) {
     const { x, y } = getEventPosition(event);
@@ -838,8 +848,8 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     });
     // opposite handle positions, default case
     if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-        centerX = center.x || defaultCenterX;
-        centerY = center.y || defaultCenterY;
+        centerX = center.x ?? defaultCenterX;
+        centerY = center.y ?? defaultCenterY;
         //    --->
         //    |
         // >---
@@ -983,7 +993,8 @@ function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom,
 }
 
 function isNodeInitialized(node) {
-    return !!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) && !!(node?.computed?.width || node?.width);
+    return (!!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) &&
+        !!(node?.computed?.width || node?.width || node?.initialWidth));
 }
 function getEdgePosition(params) {
     const { sourceNode, targetNode } = params;
@@ -1026,8 +1037,8 @@ function toHandleBounds(handles) {
     const source = [];
     const target = [];
     for (const handle of handles) {
-        handle.width = handle.width || 1;
-        handle.height = handle.height || 1;
+        handle.width = handle.width ?? 1;
+        handle.height = handle.height ?? 1;
         if (handle.type === 'source') {
             source.push(handle);
         }
@@ -1043,8 +1054,7 @@ function toHandleBounds(handles) {
 function getHandlePosition(position, node, handle = null) {
     const x = (handle?.x ?? 0) + (node.computed?.positionAbsolute?.x ?? 0);
     const y = (handle?.y ?? 0) + (node.computed?.positionAbsolute?.y ?? 0);
-    const width = handle?.width || (node?.computed?.width ?? node?.width ?? 0);
-    const height = handle?.height || (node?.computed?.height ?? node?.height ?? 0);
+    const { width, height } = handle ?? getNodeDimensions(node);
     switch (position) {
         case Position.Top:
             return [x + width / 2, y];
@@ -1359,19 +1369,19 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, }) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
+function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
     let lastPos = { x: null, y: null };
     let autoPanId = 0;
     let dragItems = [];
     let autoPanStarted = false;
     let mousePosition = { x: 0, y: 0 };
-    let dragEvent = null;
     let containerBounds = null;
     let dragStarted = false;
-    const d3Selection = select(domNode);
+    let d3Selection = null;
     // public functions
     function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }) {
-        function updateNodes({ x, y }) {
+        d3Selection = select(domNode);
+        function updateNodes({ x, y }, dragEvent) {
             const { nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
             lastPos = { x, y };
             let hasChange = false;
@@ -1417,15 +1427,18 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
                 return;
             }
             updateNodePositions(dragItems, true);
-            const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
-            if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
+            if (dragEvent && (onDrag || onNodeDrag || (!nodeId && onSelectionDrag))) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
                     nodeId,
                     dragItems,
                     nodeLookup,
                 });
                 onDrag?.(dragEvent, dragItems, currentNode, currentNodes);
-                onNodeOrSelectionDrag?.(dragEvent, currentNode, currentNodes);
+                onNodeDrag?.(dragEvent, currentNode, currentNodes);
+                if (!nodeId) {
+                    const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag);
+                    _onSelectionDrag(dragEvent, currentNode, currentNodes);
+                }
             }
         }
         function autoPan() {
@@ -1438,7 +1451,7 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
                 lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
                 lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
                 if (panBy({ x: xMovement, y: yMovement })) {
-                    updateNodes(lastPos);
+                    updateNodes(lastPos, null);
                 }
             }
             autoPanId = requestAnimationFrame(autoPan);
@@ -1458,15 +1471,18 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
             lastPos = pointerPos;
             dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
-            const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
-            if (dragItems.length > 0 && (onDragStart || onNodeOrSelectionDragStart)) {
+            if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
                     nodeId,
                     dragItems,
                     nodeLookup,
                 });
                 onDragStart?.(event.sourceEvent, dragItems, currentNode, currentNodes);
-                onNodeOrSelectionDragStart?.(event.sourceEvent, currentNode, currentNodes);
+                onNodeDragStart?.(event.sourceEvent, currentNode, currentNodes);
+                if (!nodeId) {
+                    const _onSelectionDragStart = wrapSelectionDragFunc(onSelectionDragStart);
+                    _onSelectionDragStart(event.sourceEvent, currentNode, currentNodes);
+                }
             }
         }
         const d3DragInstance = drag()
@@ -1497,9 +1513,9 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             }
             // skip events without movement
             if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {
-                dragEvent = event.sourceEvent;
+                // dragEvent = event.sourceEvent as MouseEvent;
                 mousePosition = getEventPosition(event.sourceEvent, containerBounds);
-                updateNodes(pointerPos);
+                updateNodes(pointerPos, event.sourceEvent);
             }
         })
             .on('end', (event) => {
@@ -1511,16 +1527,19 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             cancelAnimationFrame(autoPanId);
             if (dragItems.length > 0) {
                 const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
-                const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
                 updateNodePositions(dragItems, false);
-                if (onDragStop || onNodeOrSelectionDragStop) {
+                if (onDragStop || onNodeDragStop || (!nodeId && onSelectionDragStop)) {
                     const [currentNode, currentNodes] = getEventHandlerParams({
                         nodeId,
                         dragItems,
                         nodeLookup,
                     });
                     onDragStop?.(event.sourceEvent, dragItems, currentNode, currentNodes);
-                    onNodeOrSelectionDragStop?.(event.sourceEvent, currentNode, currentNodes);
+                    onNodeDragStop?.(event.sourceEvent, currentNode, currentNodes);
+                    if (!nodeId) {
+                        const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop);
+                        _onSelectionDragStop(event.sourceEvent, currentNode, currentNodes);
+                    }
                 }
             }
         })
@@ -1534,7 +1553,7 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
         d3Selection.call(d3DragInstance);
     }
     function destroy() {
-        d3Selection.on('.drag', null);
+        d3Selection?.on('.drag', null);
     }
     return {
         update,
@@ -1561,7 +1580,7 @@ function getHandles(node, handleBounds, type, currentHandle) {
 function getClosestHandle(pos, connectionRadius, handles) {
     let closestHandles = [];
     let minDistance = Infinity;
-    handles.forEach((handle) => {
+    for (const handle of handles) {
         const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
         if (distance <= connectionRadius) {
             if (distance < minDistance) {
@@ -1573,7 +1592,7 @@ function getClosestHandle(pos, connectionRadius, handles) {
             }
             minDistance = distance;
         }
-    });
+    }
     if (!closestHandles.length) {
         return null;
     }
@@ -1609,9 +1628,6 @@ function getHandleType(edgeUpdaterType, handleDomNode) {
     }
     return null;
 }
-function resetRecentHandle(handleDomNode, lib) {
-    handleDomNode?.classList.remove('valid', 'connecting', `${lib}-flow__handle-valid`, `${lib}-flow__handle-connecting`);
-}
 function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
     let connectionStatus = null;
     if (isHandleValid) {
@@ -1637,7 +1653,6 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     if (!containerBounds || !handleType) {
         return;
     }
-    let prevActiveHandle;
     let connectionPosition = getEventPosition(event, containerBounds);
     let autoPanStarted = false;
     let connection = null;
@@ -1705,16 +1720,6 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             connectionStatus: getConnectionStatus(!!closestHandle, isValid),
             connectionEndHandle: result.endHandle,
         });
-        if (!closestHandle && !isValid && !handleDomNode) {
-            return resetRecentHandle(prevActiveHandle, lib);
-        }
-        if (connection?.source !== connection?.target && handleDomNode) {
-            resetRecentHandle(prevActiveHandle, lib);
-            prevActiveHandle = handleDomNode;
-            handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`);
-            handleDomNode.classList.toggle('valid', isValid);
-            handleDomNode.classList.toggle(`${lib}-flow__handle-valid`, isValid);
-        }
     }
     function onPointerUp(event) {
         if ((closestHandle || handleDomNode) && connection && isValid) {
@@ -1726,7 +1731,6 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         if (edgeUpdaterType) {
             onEdgeUpdateEnd?.(event);
         }
-        resetRecentHandle(prevActiveHandle, lib);
         cancelConnection();
         cancelAnimationFrame(autoPanId);
         autoPanStarted = false;
@@ -2252,7 +2256,7 @@ function xor(a, b) {
 }
 /**
  * Calculates new width & height and x & y of node after resize based on pointer position
- * @description - Buckle up, this is a chunky one! If you want to determine the new dimensions of a node after a resize,
+ * @description - Buckle up, this is a chunky one... If you want to determine the new dimensions of a node after a resize,
  * you have to account for all possible restrictions: min/max width/height of the node, the maximum extent the node is allowed
  * to move in (in this case: resize into) determined by the parent node, the minimal extent determined by child nodes
  * with expandParent or extent: 'parent' set and oh yeah, these things also have to work with keepAspectRatio!
@@ -2260,6 +2264,8 @@ function xor(a, b) {
  * strongest restriction. Because the resize affects x, y and width, height and width, height of a opposing side with keepAspectRatio,
  * the resize amount is always kept in distX & distY amount (the distance in mouse movement)
  * Instead of clamping each value, we first calculate the biggest 'clamp' (for the lack of a better name) and then apply it to all values.
+ * To complicate things nodeOrigin has to be taken into account as well. This is done by offsetting the nodes as if their origin is [0, 0],
+ * then calculating the restrictions as usual
  * @param startValues - starting values of resize
  * @param controlDirection - dimensions affected by the resize
  * @param pointerPosition - the current pointer position corrected for snapping
@@ -2267,7 +2273,7 @@ function xor(a, b) {
  * @param keepAspectRatio - prevent changes of asprect ratio
  * @returns x, y, width and height of the node after resize
  */
-function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, extent, childExtent) {
+function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, extent, childExtent) {
     let { affectsX, affectsY } = controlDirection;
     const { isHorizontal, isVertical } = controlDirection;
     const isDiagonal = isHorizontal && isVertical;
@@ -2278,6 +2284,8 @@ function getDimensionsAfterResize(startValues, controlDirection, pointerPosition
     let distY = Math.floor(isVertical ? ySnapped - startValues.pointerY : 0);
     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);
@@ -2286,16 +2294,16 @@ function getDimensionsAfterResize(startValues, controlDirection, pointerPosition
         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);
         clampY = Math.max(clampY, yExtentClamp);
@@ -2329,11 +2337,13 @@ function getDimensionsAfterResize(startValues, controlDirection, pointerPosition
             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);
             }
@@ -2357,11 +2367,13 @@ function getDimensionsAfterResize(startValues, controlDirection, pointerPosition
             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);
             }
@@ -2400,11 +2412,13 @@ function getDimensionsAfterResize(startValues, controlDirection, pointerPosition
             }
         }
     }
+    const x = affectsX ? startX + distX : startX;
+    const y = affectsY ? startY + distY : startY;
     return {
         width: startWidth + (affectsX ? -distX : distX),
         height: startHeight + (affectsY ? -distY : distY),
-        x: affectsX ? startX + distX : startX,
-        y: affectsY ? startY + distY : startY,
+        x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x,
+        y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y,
     };
 }
 
@@ -2431,13 +2445,16 @@ function nodeToParentExtent(node) {
         [node.computed.width, node.computed.height],
     ];
 }
-function nodeToChildExtent(child, parent) {
+function nodeToChildExtent(child, parent, nodeOrigin) {
+    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],
-        [
-            parent.position.x + child.position.x + child.computed.width,
-            parent.position.y + child.position.y + child.computed.height,
-        ],
+        [x - originOffsetX, y - originOffsetY],
+        [x + width - originOffsetX, y + height - originOffsetY],
     ];
 }
 function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
@@ -2453,7 +2470,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
         let childExtent = undefined;
         const dragHandler = drag()
             .on('start', (event) => {
-            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
             node = nodeLookup.get(nodeId);
             if (node) {
                 const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
@@ -2488,7 +2505,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                             extent: child.extent,
                         });
                         if (child.extent === 'parent' || child.expandParent) {
-                            const extent = nodeToChildExtent(child, node);
+                            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])],
@@ -2505,35 +2522,34 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
             }
         })
             .on('drag', (event) => {
-            const { transform, snapGrid, snapToGrid } = getStoreItems();
+            const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
             const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
             const childChanges = [];
             if (node) {
-                const change = { ...initChange };
                 const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
-                const { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, parentExtent, childExtent);
+                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;
-                if (controlDirection.affectsX || controlDirection.affectsY) {
-                    const isXPosChange = x !== prevX && isWidthChange;
-                    const isYPosChange = y !== prevY && isHeightChange;
-                    if (isXPosChange || isYPosChange) {
-                        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;
-                            }
+                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) {
@@ -2541,8 +2557,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                         const yChange = y - prevY;
                         for (const childNode of childNodes) {
                             childNode.position = {
-                                x: childNode.position.x - xChange,
-                                y: childNode.position.y - yChange,
+                                x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
+                                y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
                             };
                             childChanges.push(childNode);
                         }
@@ -2590,4 +2606,4 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, updateNodeDimensions };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, updateNodeDimensions };