@xyflow/system 0.0.41 → 0.0.43

package/dist/esm/index.js

@@ -192,19 +192,31 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
     };
 };
 /**
- * Determines a bounding box that contains all given nodes in an array
+ * Internal function for determining a bounding box that contains all given nodes in an array.
  * @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 params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
  * @returns Bounding box enclosing all nodes
  */
-const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: undefined }) => {
+    if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
+        console.warn('Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.');
+    }
     if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
-    const box = nodes.reduce((currBox, node) => {
-        const nodeBox = nodeToBox(node, params.nodeOrigin);
+    const box = nodes.reduce((currBox, nodeOrId) => {
+        const isId = typeof nodeOrId === 'string';
+        let currentNode = !params.nodeLookup && !isId ? nodeOrId : undefined;
+        if (params.nodeLookup) {
+            currentNode = isId
+                ? params.nodeLookup.get(nodeOrId)
+                : !isInternalNodeBase(nodeOrId)
+                    ? params.nodeLookup.get(nodeOrId.id)
+                    : nodeOrId;
+        }
+        const nodeBox = currentNode ? nodeToBox(currentNode, params.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
         return getBoundsOfBoxes(currBox, nodeBox);
     }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
     return boxToRect(box);
@@ -286,20 +298,6 @@ async function fitView({ nodes, width, height, panZoom, minZoom, maxZoom }, opti
     await panZoom.setViewport(viewport, { duration: options?.duration });
     return Promise.resolve(true);
 }
-/**
- * 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.measured?.width ?? 0), extent[1][1] - (node.measured?.height ?? 0)]];
-}
 /**
  * This function calculates the next position of a node, taking into account the node's extent, parent node, and origin.
  *
@@ -311,36 +309,33 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
     const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
     const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
     const origin = node.origin ?? nodeOrigin;
-    let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
+    let extent = nodeExtent;
     if (node.extent === 'parent' && !node.expandParent) {
         if (!parentNode) {
             onError?.('005', errorMessages['error005']());
         }
         else {
-            const nodeWidth = node.measured.width;
-            const nodeHeight = node.measured.height;
             const parentWidth = parentNode.measured.width;
             const parentHeight = parentNode.measured.height;
-            if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
-                currentExtent = [
+            if (parentWidth && parentHeight) {
+                extent = [
                     [parentX, parentY],
-                    [parentX + parentWidth - nodeWidth, parentY + parentHeight - nodeHeight],
+                    [parentX + parentWidth, parentY + parentHeight],
                 ];
             }
         }
     }
     else if (parentNode && isCoordinateExtent(node.extent)) {
-        currentExtent = [
+        extent = [
             [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
             [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
         ];
     }
-    const positionAbsolute = isCoordinateExtent(currentExtent)
-        ? clampPosition(nextPosition, currentExtent)
+    const positionAbsolute = isCoordinateExtent(extent)
+        ? clampPosition(nextPosition, extent, node.measured)
         : nextPosition;
     return {
         position: {
-            // TODO: is there a better way to do this?
             x: positionAbsolute.x - parentX + node.measured.width * origin[0],
             y: positionAbsolute.y - parentY + node.measured.height * origin[1],
         },
@@ -397,10 +392,18 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
 }
 
 const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max);
-const clampPosition = (position = { x: 0, y: 0 }, extent) => ({
-    x: clamp(position.x, extent[0][0], extent[1][0]),
-    y: clamp(position.y, extent[0][1], extent[1][1]),
+const clampPosition = (position = { x: 0, y: 0 }, extent, dimensions) => ({
+    x: clamp(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0)),
+    y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0)),
 });
+function clampPositionToParent(childPosition, childDimensions, parent) {
+    const { width: parentWidth, height: parentHeight } = getNodeDimensions(parent);
+    const { x: parentX, y: parentY } = parent.internals.positionAbsolute;
+    return clampPosition(childPosition, [
+        [parentX, parentY],
+        [parentX + parentWidth, parentY + parentHeight],
+    ], childDimensions);
+}
 /**
  * Calculates the velocity of panning when the mouse is close to the edge of the canvas
  * @internal
@@ -1182,6 +1185,7 @@ function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
 
 const defaultOptions = {
     nodeOrigin: [0, 0],
+    nodeExtent: infiniteExtent,
     elevateNodesOnSelect: true,
     defaults: {},
 };
@@ -1189,27 +1193,45 @@ const adoptUserNodesDefaultOptions = {
     ...defaultOptions,
     checkEquality: true,
 };
+function mergeObjects(base, incoming) {
+    const result = { ...base };
+    for (const key in incoming) {
+        if (incoming[key] !== undefined) {
+            // typecast is safe here, because we check for undefined
+            result[key] = incoming[key];
+        }
+    }
+    return result;
+}
 function updateAbsolutePositions(nodeLookup, parentLookup, options) {
-    const _options = { ...defaultOptions, ...options };
+    const _options = mergeObjects(defaultOptions, options);
     for (const node of nodeLookup.values()) {
-        if (!node.parentId) {
-            continue;
+        if (node.parentId) {
+            updateChildNode(node, nodeLookup, parentLookup, _options);
+        }
+        else {
+            const positionWithOrigin = getNodePositionWithOrigin(node, _options.nodeOrigin);
+            const extent = isCoordinateExtent(node.extent) ? node.extent : _options.nodeExtent;
+            const clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(node));
+            node.internals.positionAbsolute = clampedPosition;
         }
-        updateChildPosition(node, nodeLookup, parentLookup, _options);
     }
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
-    const _options = { ...adoptUserNodesDefaultOptions, ...options };
+    const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
     const tmpLookup = new Map(nodeLookup);
+    const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
     nodeLookup.clear();
     parentLookup.clear();
-    const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
     for (const userNode of nodes) {
         let internalNode = tmpLookup.get(userNode.id);
         if (_options.checkEquality && userNode === internalNode?.internals.userNode) {
             nodeLookup.set(userNode.id, internalNode);
         }
         else {
+            const positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin);
+            const extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent;
+            const clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));
             internalNode = {
                 ..._options.defaults,
                 ...userNode,
@@ -1218,7 +1240,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
                     height: userNode.measured?.height,
                 },
                 internals: {
-                    positionAbsolute: getNodePositionWithOrigin(userNode, _options.nodeOrigin),
+                    positionAbsolute: clampedPosition,
                     // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
                     handleBounds: !userNode.measured ? undefined : internalNode?.internals.handleBounds,
                     z: calculateZ(userNode, selectedNodeZ),
@@ -1228,34 +1250,42 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
             nodeLookup.set(userNode.id, internalNode);
         }
         if (userNode.parentId) {
-            updateChildPosition(internalNode, nodeLookup, parentLookup, options);
+            updateChildNode(internalNode, nodeLookup, parentLookup, options);
         }
     }
 }
-function updateChildPosition(node, nodeLookup, parentLookup, options) {
-    const _options = { ...defaultOptions, ...options };
-    const parentId = node.parentId;
-    const parentNode = nodeLookup.get(parentId);
-    if (!parentNode) {
-        console.warn(`Parent node ${parentId} not found. Please make sure that parent nodes are in front of their child nodes in the nodes array.`);
+function updateParentLookup(node, parentLookup) {
+    if (!node.parentId) {
         return;
     }
-    // update the parentLookup
-    const childNodes = parentLookup.get(parentId);
+    const childNodes = parentLookup.get(node.parentId);
     if (childNodes) {
         childNodes.set(node.id, node);
     }
     else {
-        parentLookup.set(parentId, new Map([[node.id, node]]));
+        parentLookup.set(node.parentId, new Map([[node.id, node]]));
+    }
+}
+/**
+ * Updates positionAbsolute and zIndex of a child node and the parentLookup.
+ */
+function updateChildNode(node, nodeLookup, parentLookup, options) {
+    const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options);
+    const parentId = node.parentId;
+    const parentNode = nodeLookup.get(parentId);
+    if (!parentNode) {
+        console.warn(`Parent node ${parentId} not found. Please make sure that parent nodes are in front of their child nodes in the nodes array.`);
+        return;
     }
-    const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
-    const { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin, selectedNodeZ);
-    const currPosition = node.internals.positionAbsolute;
-    const positionChanged = x !== currPosition.x || y !== currPosition.y;
+    updateParentLookup(node, parentLookup);
+    const selectedNodeZ = elevateNodesOnSelect ? 1000 : 0;
+    const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ);
+    const { positionAbsolute } = node.internals;
+    const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
     if (positionChanged || z !== node.internals.z) {
         node.internals = {
             ...node.internals,
-            positionAbsolute: positionChanged ? { x, y } : currPosition,
+            positionAbsolute: positionChanged ? { x, y } : positionAbsolute,
             z,
         };
     }
@@ -1263,13 +1293,22 @@ function updateChildPosition(node, nodeLookup, parentLookup, options) {
 function calculateZ(node, selectedNodeZ) {
     return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
 }
-function calculateChildXYZ(childNode, parentNode, nodeOrigin, selectedNodeZ) {
-    const position = getNodePositionWithOrigin(childNode, nodeOrigin);
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ) {
+    const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute;
+    const childDimensions = getNodeDimensions(childNode);
+    const positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin);
+    const clampedPosition = isCoordinateExtent(childNode.extent)
+        ? clampPosition(positionWithOrigin, childNode.extent, childDimensions)
+        : positionWithOrigin;
+    let absolutePosition = clampPosition({ x: parentX + clampedPosition.x, y: parentY + clampedPosition.y }, nodeExtent, childDimensions);
+    if (childNode.extent === 'parent') {
+        absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode);
+    }
     const childZ = calculateZ(childNode, selectedNodeZ);
     const parentZ = parentNode.internals.z ?? 0;
     return {
-        x: parentNode.internals.positionAbsolute.x + position.x,
-        y: parentNode.internals.positionAbsolute.y + position.y,
+        x: absolutePosition.x,
+        y: absolutePosition.y,
         z: parentZ > childZ ? parentZ : childZ,
     };
 }
@@ -1340,7 +1379,7 @@ function handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin = [0,
     }
     return changes;
 }
-function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin) {
+function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent) {
     const viewportNode = domNode?.querySelector('.xyflow__viewport');
     let updatedInternals = false;
     if (!viewportNode) {
@@ -1371,17 +1410,25 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
                 (dimensionChanged || !node.internals.handleBounds || update.force));
             if (doUpdate) {
                 const nodeBounds = update.nodeElement.getBoundingClientRect();
+                const extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent;
+                let { positionAbsolute } = node.internals;
+                if (node.parentId && node.extent === 'parent') {
+                    positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId));
+                }
+                else if (extent) {
+                    positionAbsolute = clampPosition(positionAbsolute, extent, dimensions);
+                }
                 node.measured = dimensions;
                 node.internals = {
                     ...node.internals,
-                    positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
+                    positionAbsolute,
                     handleBounds: {
                         source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),
                         target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),
                     },
                 };
                 if (node.parentId) {
-                    updateChildPosition(node, nodeLookup, parentLookup, { nodeOrigin });
+                    updateChildNode(node, nodeLookup, parentLookup, { nodeOrigin });
                 }
                 updatedInternals = true;
                 if (dimensionChanged) {
@@ -1566,6 +1613,11 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 nodesBox = rectToBox(rect);
             }
             for (const [id, dragItem] of dragItems) {
+                if (!nodeLookup.has(id)) {
+                    // if the node is not in the nodeLookup anymore, it was probably deleted while dragging
+                    // and we don't need to update it anymore
+                    continue;
+                }
                 let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
                 if (snapToGrid) {
                     nextPosition = snapPosition(nextPosition, snapGrid);
@@ -1674,9 +1726,11 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             mousePosition = getEventPosition(event.sourceEvent, containerBounds);
         })
             .on('drag', (event) => {
-            const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold } = getStoreItems();
+            const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems();
             const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            if (event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) {
+            if ((event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) ||
+                // if user deletes a node while dragging, we need to abort the drag to prevent errors
+                (nodeId && !nodeLookup.has(nodeId))) {
                 abortDrag = true;
             }
             if (abortDrag) {
@@ -2874,4 +2928,4 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getFitViewNodes, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getFitViewNodes, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals };