@xyflow/system 0.0.15 → 0.0.17

package/dist/esm/index.js

@@ -163,8 +163,10 @@ const getIncomers = (node, nodes, edges) => {
 const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
     if (!node) {
         return {
-            x: 0,
-            y: 0,
+            position: {
+                x: 0,
+                y: 0,
+            },
             positionAbsolute: {
                 x: 0,
                 y: 0,
@@ -178,7 +180,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
         y: node.position.y - offsetY,
     };
     return {
-        ...position,
+        position,
         positionAbsolute: node.computed?.positionAbsolute
             ? {
                 x: node.computed.positionAbsolute.x - offsetX,
@@ -192,18 +194,18 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
  * @param nodes - Nodes to calculate the bounds for
- * @param nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
+ * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
+ * @param params.useRelativePosition - Whether to use the relative or absolute node positions
  * @returns Bounding box enclosing all nodes
  */
-const getNodesBounds = (nodes, nodeOrigin = [0, 0]) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], useRelativePosition: false }) => {
     if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
     const box = nodes.reduce((currBox, node) => {
-        const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+        const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
         return getBoundsOfBoxes(currBox, rectToBox({
-            x,
-            y,
+            ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
             width: node.computed?.width ?? node.width ?? 0,
             height: node.computed?.height ?? node.height ?? 0,
         }));
@@ -259,64 +261,73 @@ function fitView({ nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin =
         return isVisible;
     });
     if (filteredNodes.length > 0) {
-        const bounds = getNodesBounds(filteredNodes, nodeOrigin);
+        const bounds = getNodesBounds(filteredNodes, { nodeOrigin });
         const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
         panZoom.setViewport(viewport, { duration: options?.duration });
         return true;
     }
     return false;
 }
+/**
+ * This function clamps the passed extend by the node's width and height.
+ * This is needed to prevent the node from being dragged outside of its extent.
+ *
+ * @param node
+ * @param extent
+ * @returns
+ */
 function clampNodeExtent(node, extent) {
     if (!extent || extent === 'parent') {
         return extent;
     }
     return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
 }
-function calcNextPosition(node, nextPosition, nodes, nodeExtent, nodeOrigin = [0, 0], onError) {
-    const clampedNodeExtent = clampNodeExtent(node, node.extent || nodeExtent);
-    let currentExtent = clampedNodeExtent;
-    let parentNode = null;
-    let parentPos = { x: 0, y: 0 };
-    if (node.parentNode) {
-        parentNode = nodes.find((n) => n.id === node.parentNode) || null;
-        parentPos = parentNode
-            ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
-            : parentPos;
-    }
+/**
+ * This function calculates the next position of a node, taking into account the node's extent, parent node, and origin.
+ *
+ * @internal
+ * @returns position, positionAbsolute
+ */
+function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError, }) {
+    const node = nodeLookup.get(nodeId);
+    const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : undefined;
+    const { x: parentX, y: parentY } = parentNode
+        ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
+        : { x: 0, y: 0 };
+    let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
     if (node.extent === 'parent' && !node.expandParent) {
-        const nodeWidth = node.computed?.width;
-        const nodeHeight = node.computed?.height;
-        if (node.parentNode && nodeWidth && nodeHeight) {
-            const currNodeOrigin = node.origin || nodeOrigin;
-            currentExtent =
-                parentNode && isNumeric(parentNode.computed?.width) && isNumeric(parentNode.computed?.height)
-                    ? [
-                        [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
-                        [
-                            parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0],
-                            parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1],
-                        ],
-                    ]
-                    : currentExtent;
+        if (!parentNode) {
+            onError?.('005', errorMessages['error005']());
         }
         else {
-            onError?.('005', errorMessages['error005']());
-            currentExtent = clampedNodeExtent;
+            const nodeWidth = node.computed?.width;
+            const nodeHeight = node.computed?.height;
+            const parentWidth = parentNode?.computed?.width;
+            const parentHeight = parentNode?.computed?.height;
+            if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
+                const currNodeOrigin = node.origin || nodeOrigin;
+                const extentX = parentX + nodeWidth * currNodeOrigin[0];
+                const extentY = parentY + nodeHeight * currNodeOrigin[1];
+                currentExtent = [
+                    [extentX, extentY],
+                    [extentX + parentWidth - nodeWidth, extentY + parentHeight - nodeHeight],
+                ];
+            }
         }
     }
-    else if (node.extent && node.parentNode && node.extent !== 'parent') {
+    else if (parentNode && isCoordinateExtent(node.extent)) {
         currentExtent = [
-            [node.extent[0][0] + parentPos.x, node.extent[0][1] + parentPos.y],
-            [node.extent[1][0] + parentPos.x, node.extent[1][1] + parentPos.y],
+            [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
+            [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
         ];
     }
-    const positionAbsolute = currentExtent && currentExtent !== 'parent'
+    const positionAbsolute = isCoordinateExtent(currentExtent)
         ? clampPosition(nextPosition, currentExtent)
         : nextPosition;
     return {
         position: {
-            x: positionAbsolute.x - parentPos.x,
-            y: positionAbsolute.y - parentPos.y,
+            x: positionAbsolute.x - parentX,
+            y: positionAbsolute.y - parentY,
         },
         positionAbsolute,
     };
@@ -503,6 +514,9 @@ const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding)
     return { x, y, zoom: clampedZoom };
 };
 const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
+function isCoordinateExtent(extent) {
+    return extent !== undefined && extent !== 'parent';
+}
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform }) {
     const { x, y } = getEventPosition(event);
@@ -525,10 +539,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) => {
@@ -1048,13 +1060,8 @@ function getHandle(bounds, handleId) {
     if (!bounds) {
         return null;
     }
-    if (bounds.length === 1 || !handleId) {
-        return bounds[0];
-    }
-    else if (handleId) {
-        return bounds.find((d) => d.id === handleId) || null;
-    }
-    return null;
+    // if no handleId is given, we use the first handle, otherwise we check for the id
+    return (!handleId ? bounds[0] : bounds.find((d) => d.id === handleId)) || null;
 }
 
 function getMarkerId(marker, id) {
@@ -1070,16 +1077,16 @@ function getMarkerId(marker, id) {
         .map((key) => `${key}=${marker[key]}`)
         .join('&')}`;
 }
-function createMarkerIds(edges, { id, defaultColor }) {
-    const ids = [];
+function createMarkerIds(edges, { id, defaultColor, defaultMarkerStart, defaultMarkerEnd, }) {
+    const ids = new Set();
     return edges
         .reduce((markers, edge) => {
-        [edge.markerStart, edge.markerEnd].forEach((marker) => {
+        [edge.markerStart || defaultMarkerStart, edge.markerEnd || defaultMarkerEnd].forEach((marker) => {
             if (marker && typeof marker === 'object') {
                 const markerId = getMarkerId(marker, id);
-                if (!ids.includes(markerId)) {
+                if (!ids.has(markerId)) {
                     markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
-                    ids.push(markerId);
+                    ids.add(markerId);
                 }
             }
         });
@@ -1173,8 +1180,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);
@@ -1201,7 +1208,7 @@ function calculateXYZPosition(node, nodes, nodeLookup, result, nodeOrigin) {
         return result;
     }
     const parentNode = nodeLookup.get(node.parentNode);
-    const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
+    const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
     return calculateXYZPosition(parentNode, nodes, nodeLookup, {
         x: (result.x ?? 0) + parentNodePosition.x,
         y: (result.y ?? 0) + parentNodePosition.y,
@@ -1271,7 +1278,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));
@@ -1351,6 +1358,7 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, }) {
     return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId) : nodesFromDragItems[0], nodesFromDragItems];
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
     let lastPos = { x: null, y: null };
     let autoPanId = 0;
@@ -1364,12 +1372,12 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
     // public functions
     function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }) {
         function updateNodes({ x, y }) {
-            const { nodes, nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
+            const { nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
             lastPos = { x, y };
             let hasChange = false;
             let nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
             if (dragItems.length > 1 && nodeExtent) {
-                const rect = getNodesBounds(dragItems, nodeOrigin);
+                const rect = getNodesBounds(dragItems, { nodeOrigin });
                 nodesBox = rectToBox(rect);
             }
             dragItems = dragItems.map((n) => {
@@ -1391,17 +1399,24 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
                     adjustedNodeExtent[1][1] =
                         n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
                 }
-                const updatedPos = calcNextPosition(n, nextPosition, nodes, adjustedNodeExtent, nodeOrigin, onError);
+                const { position, positionAbsolute } = calculateNodePosition({
+                    nodeId: n.id,
+                    nextPosition,
+                    nodeLookup,
+                    nodeExtent: adjustedNodeExtent,
+                    nodeOrigin,
+                    onError,
+                });
                 // we want to make sure that we only fire a change event when there is a change
-                hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
-                n.position = updatedPos.position;
-                n.computed.positionAbsolute = updatedPos.positionAbsolute;
+                hasChange = hasChange || n.position.x !== position.x || n.position.y !== position.y;
+                n.position = position;
+                n.computed.positionAbsolute = positionAbsolute;
                 return n;
             });
             if (!hasChange) {
                 return;
             }
-            updateNodePositions(dragItems, true, true);
+            updateNodePositions(dragItems, true);
             const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
             if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
@@ -1444,7 +1459,7 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             lastPos = pointerPos;
             dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
             const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
-            if (dragItems && (onDragStart || onNodeOrSelectionDragStart)) {
+            if (dragItems.length > 0 && (onDragStart || onNodeOrSelectionDragStart)) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
                     nodeId,
                     dragItems,
@@ -1494,10 +1509,10 @@ 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);
+                updateNodePositions(dragItems, false);
                 if (onDragStop || onNodeOrSelectionDragStop) {
                     const [currentNode, currentNodes] = getEventHandlerParams({
                         nodeId,
@@ -1732,7 +1747,9 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
 function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, }) {
     const isTarget = fromType === 'target';
-    const handleDomNode = doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`);
+    const handleDomNode = handle
+        ? doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`)
+        : null;
     const { x, y } = getEventPosition(event);
     const handleBelow = doc.elementFromPoint(x, y);
     // we always want to prioritize the handle below the mouse cursor over the closest distance handle,
@@ -2221,65 +2238,173 @@ 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.
  * @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, 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);
+    // 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, extent[0][0]);
+        }
+        else if (!affectsX && distX > 0) {
+            xExtentClamp = getUpperExtentClamp(startX + newWidth, extent[1][0]);
+        }
+        if (affectsY && distY < 0) {
+            yExtentClamp = getLowerExtentClamp(startY + distY, extent[0][1]);
+        }
+        else if (!affectsY && distY > 0) {
+            yExtentClamp = getUpperExtentClamp(startY + newHeight, 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 + newWidth / aspectRatio, extent[1][1]) * aspectRatio;
+                }
+                else {
+                    aspectExtentClamp =
+                        getLowerExtentClamp(startY + (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, extent[1][0]) / aspectRatio;
+                }
+                else {
+                    aspectExtentClamp =
+                        getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio, 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;
+            }
         }
     }
     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: affectsX ? startX + distX : startX,
+        y: affectsY ? startY + distY : startY,
     };
 }
 
@@ -2300,44 +2425,96 @@ const initChange = {
     isWidthChange: false,
     isHeightChange: false,
 };
+function nodeToParentExtent(node) {
+    return [
+        [0, 0],
+        [node.computed.width, node.computed.height],
+    ];
+}
+function nodeToChildExtent(child, parent) {
+    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,
+        ],
+    ];
+}
 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 });
+            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);
+                            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 } = 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 { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, 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) {
@@ -2347,6 +2524,28 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                         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,
+                                y: childNode.position.y - yChange,
+                            };
+                            childChanges.push(childNode);
+                        }
                     }
                 }
                 if (isWidthChange || isHeightChange) {
@@ -2354,8 +2553,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;
@@ -2374,7 +2573,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                     return;
                 }
                 onResize?.(event, nextValues);
-                onChange(change);
+                onChange(change, childChanges);
             }
         })
             .on('end', (event) => {
@@ -2391,4 +2590,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, calcNextPosition, 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, 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, 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 };