@xyflow/system 0.0.16 → 0.0.17

package/dist/esm/index.js

@@ -539,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) => {
@@ -1182,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);
@@ -1280,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));
@@ -1418,7 +1416,7 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             if (!hasChange) {
                 return;
             }
-            updateNodePositions(dragItems, true, true);
+            updateNodePositions(dragItems, true);
             const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
             if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
@@ -1461,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,
@@ -1511,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,
@@ -2240,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,
     };
 }
 
@@ -2319,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) {
@@ -2366,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) {
@@ -2373,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;
@@ -2393,7 +2573,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                     return;
                 }
                 onResize?.(event, nextValues);
-                onChange(change);
+                onChange(change, childChanges);
             }
         })
             .on('end', (event) => {