@xyflow/system 0.0.16 → 0.0.18

package/dist/esm/index.mjs

@@ -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);
@@ -539,10 +549,8 @@ function isInputDOMNode(event) {
     // using composed path for handling shadow dom
     const target = (event.composedPath?.()?.[0] || event.target);
     const isInput = inputTags.includes(target?.nodeName) || target?.hasAttribute('contenteditable');
-    // we want to be able to do a multi selection event if we are in an input field
-    const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
     // when an input field is focused we don't want to trigger deletion or movement of nodes
-    return (isInput && !isModifierKey) || !!target?.closest('.nokey');
+    return isInput || !!target?.closest('.nokey');
 }
 const isMouseEvent = (event) => 'clientX' in event;
 const getEventPosition = (event, bounds) => {
@@ -840,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;
         //    --->
         //    |
         // >---
@@ -985,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;
@@ -1028,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);
         }
@@ -1045,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];
@@ -1182,8 +1190,8 @@ function adoptUserProvidedNodes(nodes, nodeLookup, options = {
             ...n,
             computed: {
                 positionAbsolute: n.position,
-                width: n.computed?.width || currentStoreNode?.computed?.width,
-                height: n.computed?.height || currentStoreNode?.computed?.height,
+                width: n.computed?.width,
+                height: n.computed?.height,
             },
         };
         const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
@@ -1280,7 +1288,7 @@ function updateConnectionLookup(connectionLookup, edgeLookup, edges) {
         const targetKey = `${target}-target-${targetHandle}`;
         const prevSource = connectionLookup.get(sourceKey) || new Map();
         const prevTarget = connectionLookup.get(targetKey) || new Map();
-        const connection = { source, target, sourceHandle, targetHandle };
+        const connection = { edgeId: edge.id, source, target, sourceHandle, targetHandle };
         edgeLookup.set(edge.id, edge);
         connectionLookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
         connectionLookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
@@ -1361,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;
@@ -1418,16 +1426,19 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             if (!hasChange) {
                 return;
             }
-            updateNodePositions(dragItems, true, true);
-            const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
-            if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
+            updateNodePositions(dragItems, true);
+            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() {
@@ -1440,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);
@@ -1460,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 && (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()
@@ -1499,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,18 +1525,21 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             autoPanStarted = false;
             dragStarted = false;
             cancelAnimationFrame(autoPanId);
-            if (dragItems) {
+            if (dragItems.length > 0) {
                 const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
-                const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
-                updateNodePositions(dragItems, false, false);
-                if (onDragStop || onNodeOrSelectionDragStop) {
+                updateNodePositions(dragItems, false);
+                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);
+                    }
                 }
             }
         })
@@ -1536,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,
@@ -1563,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) {
@@ -1575,7 +1592,7 @@ function getClosestHandle(pos, connectionRadius, handles) {
             }
             minDistance = distance;
         }
-    });
+    }
     if (!closestHandles.length) {
         return null;
     }
@@ -1611,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) {
@@ -1639,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;
@@ -1707,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) {
@@ -1728,7 +1731,6 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         if (edgeUpdaterType) {
             onEdgeUpdateEnd?.(event);
         }
-        resetRecentHandle(prevActiveHandle, lib);
         cancelConnection();
         cancelAnimationFrame(autoPanId);
         autoPanStarted = false;
@@ -2240,65 +2242,183 @@ function getControlDirection(controlPosition) {
         affectsY,
     };
 }
+function getLowerExtentClamp(lowerExtent, lowerBound) {
+    return Math.max(0, lowerBound - lowerExtent);
+}
+function getUpperExtentClamp(upperExtent, upperBound) {
+    return Math.max(0, upperExtent - upperBound);
+}
+function getSizeClamp(size, minSize, maxSize) {
+    return Math.max(0, minSize - size, size - maxSize);
+}
+function xor(a, b) {
+    return a ? !b : b;
+}
 /**
- * Calculates new width & height of node after resize based on pointer position
+ * 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,
+ * 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!
+ * The way this is done is by determining how much each of these restricting actually restricts the resize and then applying the
+ * 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
  * @param boundaries - minimum and maximum dimensions of the node
  * @param keepAspectRatio - prevent changes of asprect ratio
- * @returns width: new width of node, height: new height of node
+ * @returns x, y, width and height of the node after resize
  */
-function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio) {
-    const { isHorizontal, isVertical, affectsX, affectsY } = controlDirection;
+function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, extent, childExtent) {
+    let { affectsX, affectsY } = controlDirection;
+    const { isHorizontal, isVertical } = controlDirection;
+    const isDiagonal = isHorizontal && isVertical;
     const { xSnapped, ySnapped } = pointerPosition;
     const { minWidth, maxWidth, minHeight, maxHeight } = boundaries;
-    const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
-    const distX = Math.floor(isHorizontal ? xSnapped - startX : 0);
-    const distY = Math.floor(isVertical ? ySnapped - startY : 0);
-    let width = clamp(startWidth + (affectsX ? -distX : distX), minWidth, maxWidth);
-    let height = clamp(startHeight + (affectsY ? -distY : distY), minHeight, maxHeight);
+    const { x: startX, y: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
+    let distX = Math.floor(isHorizontal ? xSnapped - startValues.pointerX : 0);
+    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);
+    // Check if extent is restricting the resize
+    if (extent) {
+        let xExtentClamp = 0;
+        let yExtentClamp = 0;
+        if (affectsX && distX < 0) {
+            xExtentClamp = getLowerExtentClamp(startX + distX + originOffsetX, extent[0][0]);
+        }
+        else if (!affectsX && distX > 0) {
+            xExtentClamp = getUpperExtentClamp(startX + newWidth + originOffsetX, extent[1][0]);
+        }
+        if (affectsY && distY < 0) {
+            yExtentClamp = getLowerExtentClamp(startY + distY + originOffsetY, extent[0][1]);
+        }
+        else if (!affectsY && distY > 0) {
+            yExtentClamp = getUpperExtentClamp(startY + newHeight + originOffsetY, extent[1][1]);
+        }
+        clampX = Math.max(clampX, xExtentClamp);
+        clampY = Math.max(clampY, yExtentClamp);
+    }
+    // Check if the child extent is restricting the resize
+    if (childExtent) {
+        let xExtentClamp = 0;
+        let yExtentClamp = 0;
+        if (affectsX && distX > 0) {
+            xExtentClamp = getUpperExtentClamp(startX + distX, childExtent[0][0]);
+        }
+        else if (!affectsX && distX < 0) {
+            xExtentClamp = getLowerExtentClamp(startX + newWidth, childExtent[1][0]);
+        }
+        if (affectsY && distY > 0) {
+            yExtentClamp = getUpperExtentClamp(startY + distY, childExtent[0][1]);
+        }
+        else if (!affectsY && distY < 0) {
+            yExtentClamp = getLowerExtentClamp(startY + newHeight, childExtent[1][1]);
+        }
+        clampX = Math.max(clampX, xExtentClamp);
+        clampY = Math.max(clampY, yExtentClamp);
+    }
+    // Check if the aspect ratio resizing of the other side is restricting the resize
     if (keepAspectRatio) {
-        const nextAspectRatio = width / height;
-        const isDiagonal = isHorizontal && isVertical;
-        const isOnlyHorizontal = isHorizontal && !isVertical;
-        const isOnlyVertical = isVertical && !isHorizontal;
-        width = (nextAspectRatio <= aspectRatio && isDiagonal) || isOnlyVertical ? height * aspectRatio : width;
-        height = (nextAspectRatio > aspectRatio && isDiagonal) || isOnlyHorizontal ? width / aspectRatio : height;
-        if (width >= maxWidth) {
-            width = maxWidth;
-            height = maxWidth / aspectRatio;
+        if (isHorizontal) {
+            // Check if the max dimensions might be restricting the resize
+            const aspectHeightClamp = getSizeClamp(newWidth / aspectRatio, minHeight, maxHeight) * aspectRatio;
+            clampX = Math.max(clampX, aspectHeightClamp);
+            // Check if the extent is restricting the resize
+            if (extent) {
+                let aspectExtentClamp = 0;
+                if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) {
+                    aspectExtentClamp =
+                        getUpperExtentClamp(startY + originOffsetY + newWidth / aspectRatio, extent[1][1]) * aspectRatio;
+                }
+                else {
+                    aspectExtentClamp =
+                        getLowerExtentClamp(startY + originOffsetY + (affectsX ? distX : -distX) / aspectRatio, extent[0][1]) *
+                            aspectRatio;
+                }
+                clampX = Math.max(clampX, aspectExtentClamp);
+            }
+            // Check if the child extent is restricting the resize
+            if (childExtent) {
+                let aspectExtentClamp = 0;
+                if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) {
+                    aspectExtentClamp = getLowerExtentClamp(startY + newWidth / aspectRatio, childExtent[1][1]) * aspectRatio;
+                }
+                else {
+                    aspectExtentClamp =
+                        getUpperExtentClamp(startY + (affectsX ? distX : -distX) / aspectRatio, childExtent[0][1]) * aspectRatio;
+                }
+                clampX = Math.max(clampX, aspectExtentClamp);
+            }
         }
-        else if (width <= minWidth) {
-            width = minWidth;
-            height = minWidth / aspectRatio;
+        // Do the same thing for vertical resizing
+        if (isVertical) {
+            const aspectWidthClamp = getSizeClamp(newHeight * aspectRatio, minWidth, maxWidth) / aspectRatio;
+            clampY = Math.max(clampY, aspectWidthClamp);
+            if (extent) {
+                let aspectExtentClamp = 0;
+                if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) {
+                    aspectExtentClamp =
+                        getUpperExtentClamp(startX + newHeight * aspectRatio + originOffsetX, extent[1][0]) / aspectRatio;
+                }
+                else {
+                    aspectExtentClamp =
+                        getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio + originOffsetX, extent[0][0]) /
+                            aspectRatio;
+                }
+                clampY = Math.max(clampY, aspectExtentClamp);
+            }
+            if (childExtent) {
+                let aspectExtentClamp = 0;
+                if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) {
+                    aspectExtentClamp = getLowerExtentClamp(startX + newHeight * aspectRatio, childExtent[1][0]) / aspectRatio;
+                }
+                else {
+                    aspectExtentClamp =
+                        getUpperExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio, childExtent[0][0]) / aspectRatio;
+                }
+                clampY = Math.max(clampY, aspectExtentClamp);
+            }
         }
-        if (height >= maxHeight) {
-            height = maxHeight;
-            width = maxHeight * aspectRatio;
+    }
+    distY = distY + (distY < 0 ? clampY : -clampY);
+    distX = distX + (distX < 0 ? clampX : -clampX);
+    if (keepAspectRatio) {
+        if (isDiagonal) {
+            if (newWidth > newHeight * aspectRatio) {
+                distY = (xor(affectsX, affectsY) ? -distX : distX) / aspectRatio;
+            }
+            else {
+                distX = (xor(affectsX, affectsY) ? -distY : distY) * aspectRatio;
+            }
         }
-        else if (height <= minHeight) {
-            height = minHeight;
-            width = minHeight * aspectRatio;
+        else {
+            if (isHorizontal) {
+                distY = distX / aspectRatio;
+                affectsY = affectsX;
+            }
+            else {
+                distX = distY * aspectRatio;
+                affectsX = affectsY;
+            }
         }
     }
+    const x = affectsX ? startX + distX : startX;
+    const y = affectsY ? startY + distY : startY;
     return {
-        width,
-        height,
-    };
-}
-/**
- * Determines new x & y position of node after resize based on new width & height
- * @param startValues - starting values of resize
- * @param controlDirection - dimensions affected by the resize
- * @param width - new width of node
- * @param height - new height of node
- * @returns x: new x position of node, y: new y position of node
- */
-function getPositionAfterResize(startValues, controlDirection, width, height) {
-    return {
-        x: controlDirection.affectsX ? startValues.x - (width - startValues.width) : startValues.x,
-        y: controlDirection.affectsY ? startValues.y - (height - startValues.height) : startValues.y,
+        width: startWidth + (affectsX ? -distX : distX),
+        height: startHeight + (affectsY ? -distY : distY),
+        x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x,
+        y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y,
     };
 }
 
@@ -2319,53 +2439,129 @@ const initChange = {
     isWidthChange: false,
     isHeightChange: false,
 };
+function nodeToParentExtent(node) {
+    return [
+        [0, 0],
+        [node.computed.width, node.computed.height],
+    ];
+}
+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 [
+        [x - originOffsetX, y - originOffsetY],
+        [x + width - originOffsetX, y + height - originOffsetY],
+    ];
+}
 function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
     const selection = select(domNode);
     function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
         let prevValues = { ...initPrevValues };
         let startValues = { ...initStartValues };
         const controlDirection = getControlDirection(controlPosition);
+        let node = undefined;
+        let childNodes = [];
+        let parentNode = undefined; // Needed to fix expandParent
+        let parentExtent = undefined;
+        let childExtent = undefined;
         const dragHandler = drag()
             .on('start', (event) => {
-            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
-            const node = nodeLookup.get(nodeId);
-            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            prevValues = {
-                width: node?.computed?.width ?? 0,
-                height: node?.computed?.height ?? 0,
-                x: node?.position.x ?? 0,
-                y: node?.position.y ?? 0,
-            };
-            startValues = {
-                ...prevValues,
-                pointerX: xSnapped,
-                pointerY: ySnapped,
-                aspectRatio: prevValues.width / prevValues.height,
-            };
-            onResizeStart?.(event, { ...prevValues });
+            const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
+            node = nodeLookup.get(nodeId);
+            if (node) {
+                const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+                prevValues = {
+                    width: node.computed?.width ?? 0,
+                    height: node.computed?.height ?? 0,
+                    x: node.position.x ?? 0,
+                    y: node.position.y ?? 0,
+                };
+                startValues = {
+                    ...prevValues,
+                    pointerX: xSnapped,
+                    pointerY: ySnapped,
+                    aspectRatio: prevValues.width / prevValues.height,
+                };
+                parentNode = undefined;
+                if (node.extent === 'parent' || node.expandParent) {
+                    parentNode = nodeLookup.get(node.parentNode);
+                    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;
+                for (const [childId, child] of nodeLookup) {
+                    if (child.parentNode === 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 (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 });
+            }
         })
             .on('drag', (event) => {
-            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
             const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            const node = nodeLookup.get(nodeId);
+            const childChanges = [];
             if (node) {
-                const change = { ...initChange };
                 const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
-                const { width, height } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio);
+                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 { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
-                    // only transform the node if the width or height changes
-                    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;
+                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) {
@@ -2373,8 +2569,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                     change.isHeightChange = isHeightChange;
                     change.width = width;
                     change.height = height;
-                    prevValues.width = width;
-                    prevValues.height = height;
+                    prevValues.width = change.width;
+                    prevValues.height = change.height;
                 }
                 if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
                     return;
@@ -2393,7 +2589,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                     return;
                 }
                 onResize?.(event, nextValues);
-                onChange(change);
+                onChange(change, childChanges);
             }
         })
             .on('end', (event) => {
@@ -2410,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 };