@xyflow/system 0.0.23 → 0.0.24

package/dist/esm/index.mjs

@@ -161,33 +161,20 @@ const getIncomers = (node, nodes, edges) => {
     return nodes.filter((n) => incomersIds.has(n.id));
 };
 const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
-    if (!node) {
-        return {
-            position: {
-                x: 0,
-                y: 0,
-            },
-            positionAbsolute: {
-                x: 0,
-                y: 0,
-            },
-        };
-    }
     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,
-    };
+    const positionAbsolute = 'internals' in node ? node.internals.positionAbsolute : node.position;
+    const origin = node.origin || nodeOrigin;
+    const offsetX = width * origin[0];
+    const offsetY = height * origin[1];
     return {
-        position,
-        positionAbsolute: 'internals' in node
-            ? {
-                x: node.internals.positionAbsolute.x - offsetX,
-                y: node.internals.positionAbsolute.y - offsetY,
-            }
-            : position,
+        position: {
+            x: node.position.x - offsetX,
+            y: node.position.y - offsetY,
+        },
+        positionAbsolute: {
+            x: positionAbsolute.x - offsetX,
+            y: positionAbsolute.y - offsetY,
+        },
     };
 };
 /**
@@ -196,20 +183,15 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * @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
- * @param params.useRelativePosition - Whether to use the relative or absolute node positions
  * @returns Bounding box enclosing all nodes
  */
-// @todo how to handle this if users do not have absolute positions?
-const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], useRelativePosition: false }) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
     if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
     const box = nodes.reduce((currBox, node) => {
-        const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
-        return getBoundsOfBoxes(currBox, rectToBox({
-            ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
-            ...getNodeDimensions(node),
-        }));
+        const nodeBox = nodeToBox(node, params.nodeOrigin);
+        return getBoundsOfBoxes(currBox, nodeBox);
     }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
     return boxToRect(box);
 };
@@ -219,7 +201,6 @@ const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], useRelativePositio
  */
 const getInternalNodesBounds = (nodeLookup, params = {
     nodeOrigin: [0, 0],
-    useRelativePosition: false,
 }) => {
     if (nodeLookup.size === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
@@ -227,16 +208,13 @@ const getInternalNodesBounds = (nodeLookup, params = {
     let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
     nodeLookup.forEach((node) => {
         if (params.filter == undefined || params.filter(node)) {
-            const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
-            box = getBoundsOfBoxes(box, rectToBox({
-                ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
-                ...getNodeDimensions(node),
-            }));
+            const nodeBox = nodeToBox(node, params.nodeOrigin);
+            box = getBoundsOfBoxes(box, nodeBox);
         }
     });
     return boxToRect(box);
 };
-const getNodesInside = (nodeLookup, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, 
+const getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, 
 // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
 excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
     const paneRect = {
@@ -245,7 +223,7 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
         height: rect.height / tScale,
     };
     const visibleNodes = [];
-    for (const [, node] of nodeLookup) {
+    for (const [, node] of nodes) {
         const { measured, selectable = true, hidden = false } = node;
         const width = measured.width ?? node.width ?? node.initialWidth ?? null;
         const height = measured.height ?? node.height ?? node.initialHeight ?? null;
@@ -278,11 +256,10 @@ const getConnectedEdges = (nodes, edges) => {
 };
 function fitView({ nodeLookup, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
     const filteredNodes = [];
+    const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
     nodeLookup.forEach((n) => {
         const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
-        // TODO: this remove options.nodes.some with a Set
-        if (isVisible &&
-            (!options?.nodes || (options?.nodes.length && options?.nodes.some((optionNode) => optionNode.id === n.id)))) {
+        if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
             filteredNodes.push(n);
         }
     });
@@ -453,19 +430,21 @@ const boxToRect = ({ x, y, x2, y2 }) => ({
     height: y2 - y,
 });
 const nodeToRect = (node, nodeOrigin = [0, 0]) => {
-    const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+    const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
     return {
-        ...positionAbsolute,
+        x,
+        y,
         width: node.measured?.width ?? node.width ?? 0,
         height: node.measured?.height ?? node.height ?? 0,
     };
 };
 const nodeToBox = (node, nodeOrigin = [0, 0]) => {
-    const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+    const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
     return {
-        ...positionAbsolute,
-        x2: positionAbsolute.x + (node.measured?.width ?? node.width ?? 0),
-        y2: positionAbsolute.y + (node.measured?.height ?? node.height ?? 0),
+        x,
+        y,
+        x2: x + (node.measured?.width ?? node.width ?? 0),
+        y2: y + (node.measured?.height ?? node.height ?? 0),
     };
 };
 const getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
@@ -553,6 +532,32 @@ function nodeHasDimensions(node) {
     return ((node.measured?.width ?? node.width ?? node.initialWidth) !== undefined &&
         (node.measured?.height ?? node.height ?? node.initialHeight) !== undefined);
 }
+/**
+ * Convert child position to aboslute position
+ *
+ * @internal
+ * @param position
+ * @param parentId
+ * @param nodeLookup
+ * @param nodeOrigin
+ * @returns an internal node with an absolute position
+ */
+function evaluateAbsolutePosition(position, parentId, nodeLookup, nodeOrigin = [0, 0]) {
+    let nextParentId = parentId;
+    const positionAbsolute = { ...position };
+    while (nextParentId) {
+        const parent = nodeLookup.get(parentId);
+        nextParentId = parent?.parentId;
+        if (parent) {
+            const origin = parent.origin || nodeOrigin;
+            const xOffset = (parent.measured.width ?? 0) * origin[0];
+            const yOffset = (parent.measured.height ?? 0) * origin[1];
+            positionAbsolute.x += parent.position.x - xOffset;
+            positionAbsolute.y += parent.position.y - yOffset;
+        }
+    }
+    return positionAbsolute;
+}
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform }) {
     const { x, y } = getEventPosition(event);
@@ -1175,31 +1180,33 @@ function updateAbsolutePositions(nodeLookup, options = {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: true,
     defaults: {},
-}, parentNodeIds) {
+}) {
     const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
-    for (const [id, node] of nodeLookup) {
+    for (const [, node] of nodeLookup) {
         const parentId = node.parentId;
-        if (parentId && !nodeLookup.has(parentId)) {
+        if (!parentId) {
+            continue;
+        }
+        if (!nodeLookup.has(parentId)) {
             throw new Error(`Parent node ${parentId} not found`);
         }
-        if (parentId || node.internals.isParent || parentNodeIds?.has(id)) {
-            const parentNode = parentId ? nodeLookup.get(parentId) : null;
-            const { x, y, z } = calculateXYZPosition(node, nodeLookup, {
-                ...node.position,
-                z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
-            }, parentNode?.origin || options.nodeOrigin);
-            const currPosition = node.internals.positionAbsolute;
-            const positionChanged = x !== currPosition.x || y !== currPosition.y;
-            node.internals.positionAbsolute = positionChanged ? { x, y } : currPosition;
-            node.internals.z = z;
-            if (parentNodeIds !== undefined) {
-                node.internals.isParent = !!parentNodeIds?.has(id);
-            }
-            nodeLookup.set(id, node);
+        const parentNode = nodeLookup.get(parentId);
+        const { x, y, z } = calculateXYZPosition(node, nodeLookup, {
+            ...node.position,
+            z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
+        }, parentNode?.origin ?? options.nodeOrigin);
+        const currPosition = node.internals.positionAbsolute;
+        const positionChanged = x !== currPosition.x || y !== currPosition.y;
+        if (positionChanged || z !== node.internals.z) {
+            node.internals = {
+                ...node.internals,
+                positionAbsolute: positionChanged ? { x, y } : currPosition,
+                z,
+            };
         }
     }
 }
-function adoptUserNodes(nodes, nodeLookup, options = {
+function adoptUserNodes(nodes, nodeLookup, parentLookup, options = {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: true,
     defaults: {},
@@ -1207,18 +1214,15 @@ function adoptUserNodes(nodes, nodeLookup, options = {
 }) {
     const tmpLookup = new Map(nodeLookup);
     nodeLookup.clear();
+    parentLookup.clear();
     const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
-    const parentNodeIds = new Set();
     nodes.forEach((userNode) => {
-        const currentStoreNode = tmpLookup.get(userNode.id);
-        if (userNode.parentId) {
-            parentNodeIds.add(userNode.parentId);
-        }
-        if (options.checkEquality && userNode === currentStoreNode?.internals.userNode) {
-            nodeLookup.set(userNode.id, currentStoreNode);
+        let internalNode = tmpLookup.get(userNode.id);
+        if (options.checkEquality && userNode === internalNode?.internals.userNode) {
+            nodeLookup.set(userNode.id, internalNode);
         }
         else {
-            nodeLookup.set(userNode.id, {
+            internalNode = {
                 ...options.defaults,
                 ...userNode,
                 measured: {
@@ -1227,79 +1231,93 @@ function adoptUserNodes(nodes, nodeLookup, options = {
                 },
                 internals: {
                     positionAbsolute: userNode.position,
-                    handleBounds: currentStoreNode?.internals.handleBounds,
+                    handleBounds: internalNode?.internals.handleBounds,
                     z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
                     userNode,
-                    isParent: false,
                 },
-            });
+            };
+            nodeLookup.set(userNode.id, internalNode);
+        }
+        if (userNode.parentId) {
+            const childNodes = parentLookup.get(userNode.parentId);
+            if (childNodes) {
+                childNodes.push(internalNode);
+            }
+            else {
+                parentLookup.set(userNode.parentId, [internalNode]);
+            }
         }
     });
-    if (parentNodeIds.size > 0) {
-        updateAbsolutePositions(nodeLookup, options, parentNodeIds);
+    if (parentLookup.size > 0) {
+        updateAbsolutePositions(nodeLookup, options);
     }
 }
 function calculateXYZPosition(node, nodeLookup, result, nodeOrigin = [0, 0]) {
     if (!node.parentId) {
         return result;
     }
-    const parentNode = nodeLookup.get(node.parentId);
-    const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
-    return calculateXYZPosition(parentNode, nodeLookup, {
-        x: (result.x ?? 0) + parentNodePosition.x,
-        y: (result.y ?? 0) + parentNodePosition.y,
-        z: (parentNode.internals.z ?? 0) > (result.z ?? 0) ? parentNode.internals.z ?? 0 : result.z ?? 0,
-    }, parentNode.origin || nodeOrigin);
-}
-function handleParentExpand(nodes, nodeLookup) {
+    const parent = nodeLookup.get(node.parentId);
+    const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin).position;
+    return calculateXYZPosition(parent, nodeLookup, {
+        x: (result.x ?? 0) + parentPosition.x,
+        y: (result.y ?? 0) + parentPosition.y,
+        z: (parent.internals.z ?? 0) > (result.z ?? 0) ? parent.internals.z ?? 0 : result.z ?? 0,
+    }, parent.origin || nodeOrigin);
+}
+function handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin) {
     const changes = [];
-    const chilNodeRects = new Map();
-    nodes.forEach((node) => {
-        const parentId = node.parentId;
-        if (node.expandParent && parentId) {
-            const parentNode = nodeLookup.get(parentId);
-            if (parentNode) {
-                const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin);
-                const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
-                chilNodeRects.set(parentId, expandedRect);
-            }
+    const parentExpansions = new Map();
+    // determine the expanded rectangle the child nodes would take for each parent
+    for (const child of children) {
+        const parent = nodeLookup.get(child.parentId);
+        if (!parent) {
+            continue;
         }
-    });
-    if (chilNodeRects.size > 0) {
-        chilNodeRects.forEach((rect, id) => {
-            const origParent = nodeLookup.get(id);
-            const { position } = getNodePositionWithOrigin(origParent, origParent.origin);
-            const dimensions = getNodeDimensions(origParent);
-            if (rect.x < position.x || rect.y < position.y) {
-                const xChange = Math.round(Math.abs(position.x - rect.x));
-                const yChange = Math.round(Math.abs(position.y - rect.y));
+        const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
+        const expandedRect = getBoundsOfRects(parentRect, child.rect);
+        parentExpansions.set(child.parentId, { expandedRect, parent });
+    }
+    if (parentExpansions.size > 0) {
+        parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
+            // determine the position & dimensions of the parent
+            const { position } = getNodePositionWithOrigin(parent, parent.origin);
+            const dimensions = getNodeDimensions(parent);
+            // determine how much the parent expands by moving the position
+            const xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
+            const yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
+            if (xChange > 0 || yChange > 0) {
                 changes.push({
-                    id,
+                    id: parentId,
                     type: 'position',
                     position: {
                         x: position.x - xChange,
                         y: position.y - yChange,
                     },
                 });
-                changes.push({
-                    id,
-                    type: 'dimensions',
-                    resizing: true,
-                    dimensions: {
-                        width: dimensions.width + xChange,
-                        height: dimensions.height + yChange,
-                    },
+                // We move all child nodes in the oppsite direction
+                // so the x,y changes of the parent do not move the children
+                const childNodes = parentLookup.get(parentId);
+                childNodes?.forEach((childNode) => {
+                    if (!children.some((child) => child.id === childNode.id)) {
+                        changes.push({
+                            id: childNode.id,
+                            type: 'position',
+                            position: {
+                                x: childNode.position.x + xChange,
+                                y: childNode.position.y + yChange,
+                            },
+                        });
+                    }
                 });
-                // @todo we need to reset child node positions if < 0
             }
-            else if (dimensions.width < rect.width || dimensions.height < rect.height) {
+            if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
                 changes.push({
-                    id,
+                    id: parentId,
                     type: 'dimensions',
-                    resizing: true,
+                    setAttributes: true,
                     dimensions: {
-                        width: Math.max(dimensions.width, rect.width),
-                        height: Math.max(dimensions.height, rect.height),
+                        width: Math.max(dimensions.width, Math.round(expandedRect.width)),
+                        height: Math.max(dimensions.height, Math.round(expandedRect.height)),
                     },
                 });
             }
@@ -1307,7 +1325,7 @@ function handleParentExpand(nodes, nodeLookup) {
     }
     return changes;
 }
-function updateNodeInternals(updates, nodeLookup, domNode, nodeOrigin) {
+function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin) {
     const viewportNode = domNode?.querySelector('.xyflow__viewport');
     let updatedInternals = false;
     if (!viewportNode) {
@@ -1317,7 +1335,7 @@ function updateNodeInternals(updates, nodeLookup, domNode, nodeOrigin) {
     const style = window.getComputedStyle(viewportNode);
     const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
     // in this array we collect nodes, that might trigger changes (like expanding parent)
-    const triggerChangeNodes = [];
+    const parentExpandChildren = [];
     updates.forEach((update) => {
         const node = nodeLookup.get(update.id);
         if (node?.hidden) {
@@ -1356,15 +1374,19 @@ function updateNodeInternals(updates, nodeLookup, domNode, nodeOrigin) {
                         type: 'dimensions',
                         dimensions,
                     });
-                    if (newNode.expandParent) {
-                        triggerChangeNodes.push(newNode);
+                    if (newNode.expandParent && newNode.parentId) {
+                        parentExpandChildren.push({
+                            id: newNode.id,
+                            parentId: newNode.parentId,
+                            rect: nodeToRect(newNode, newNode.origin || nodeOrigin),
+                        });
                     }
                 }
             }
         }
     });
-    if (triggerChangeNodes.length > 0) {
-        const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+    if (parentExpandChildren.length > 0) {
+        const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
         changes.push(...parentExpandChanges);
     }
     return { changes, updatedInternals };
@@ -1418,9 +1440,6 @@ function shallowNodeData(a, b) {
     return true;
 }
 
-function wrapSelectionDragFunc(selectionFunc) {
-    return (event, _, nodes) => selectionFunc?.(event, nodes);
-}
 function isParentSelected(node, nodeLookup) {
     if (!node.parentId) {
         return false;
@@ -1447,31 +1466,33 @@ function hasSelector(target, selector, domNode) {
 }
 // looks for all selected nodes and created a NodeDragItem for each of them
 function getDragItems(nodeLookup, nodesDraggable, mousePos, nodeId) {
-    const dragItems = [];
+    const dragItems = new Map();
     for (const [id, node] of nodeLookup) {
         if ((node.selected || node.id === nodeId) &&
             (!node.parentId || !isParentSelected(node, nodeLookup)) &&
             (node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))) {
             const internalNode = nodeLookup.get(id);
-            dragItems.push({
-                id: internalNode.id,
-                position: internalNode.position || { x: 0, y: 0 },
-                distance: {
-                    x: mousePos.x - internalNode.internals.positionAbsolute.x,
-                    y: mousePos.y - internalNode.internals.positionAbsolute.y,
-                },
-                extent: internalNode.extent,
-                parentId: internalNode.parentId,
-                origin: internalNode.origin,
-                expandParent: internalNode.expandParent,
-                internals: {
-                    positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
-                },
-                measured: {
-                    width: internalNode.measured.width || 0,
-                    height: internalNode.measured.height || 0,
-                },
-            });
+            if (internalNode) {
+                dragItems.set(id, {
+                    id,
+                    position: internalNode.position || { x: 0, y: 0 },
+                    distance: {
+                        x: mousePos.x - internalNode.internals.positionAbsolute.x,
+                        y: mousePos.y - internalNode.internals.positionAbsolute.y,
+                    },
+                    extent: internalNode.extent,
+                    parentId: internalNode.parentId,
+                    origin: internalNode.origin,
+                    expandParent: internalNode.expandParent,
+                    internals: {
+                        positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
+                    },
+                    measured: {
+                        width: internalNode.measured.width ?? 0,
+                        height: internalNode.measured.height ?? 0,
+                    },
+                });
+            }
         }
     }
     return dragItems;
@@ -1480,24 +1501,34 @@ function getDragItems(nodeLookup, nodesDraggable, mousePos, nodeId) {
 // 1. the dragged node (or the first of the list, if we are dragging a node selection)
 // 2. array of selected nodes (for multi selections)
 function getEventHandlerParams({ nodeId, dragItems, nodeLookup, }) {
-    const nodesFromDragItems = dragItems.map((n) => {
-        const node = nodeLookup.get(n.id);
-        return {
+    const nodesFromDragItems = [];
+    for (const [id, dragItem] of dragItems) {
+        const node = nodeLookup.get(id);
+        if (node) {
+            nodesFromDragItems.push({
+                ...node,
+                position: dragItem.position,
+            });
+        }
+    }
+    if (!nodeId) {
+        return [nodesFromDragItems[0], nodesFromDragItems];
+    }
+    const node = nodeLookup.get(nodeId);
+    return [
+        {
             ...node,
-            position: n.position,
-            measured: {
-                ...n.measured,
-            },
-        };
-    });
-    return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId) : nodesFromDragItems[0], nodesFromDragItems];
+            position: dragItems.get(nodeId)?.position || node.position,
+        },
+        nodesFromDragItems,
+    ];
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
     let lastPos = { x: null, y: null };
     let autoPanId = 0;
-    let dragItems = [];
+    let dragItems = new Map();
     let autoPanStarted = false;
     let mousePosition = { x: 0, y: 0 };
     let containerBounds = null;
@@ -1511,12 +1542,12 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             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 });
+            if (dragItems.size > 1 && nodeExtent) {
+                const rect = getInternalNodesBounds(dragItems, { nodeOrigin });
                 nodesBox = rectToBox(rect);
             }
-            dragItems = dragItems.map((n) => {
-                let nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
+            for (const [id, dragItem] of dragItems) {
+                let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
                 if (snapToGrid) {
                     nextPosition = snapPosition(nextPosition, snapGrid);
                 }
@@ -1526,19 +1557,19 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                     [nodeExtent[0][0], nodeExtent[0][1]],
                     [nodeExtent[1][0], nodeExtent[1][1]],
                 ];
-                if (dragItems.length > 1 && nodeExtent && !n.extent) {
-                    const { positionAbsolute } = n.internals;
+                if (dragItems.size > 1 && nodeExtent && !dragItem.extent) {
+                    const { positionAbsolute } = dragItem.internals;
                     const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
-                    const x2 = positionAbsolute.x + (n.measured?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
+                    const x2 = positionAbsolute.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0];
                     const y1 = positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
-                    const y2 = positionAbsolute.y + (n.measured?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
+                    const y2 = positionAbsolute.y + dragItem.measured.height - nodesBox.y2 + nodeExtent[1][1];
                     adjustedNodeExtent = [
                         [x1, y1],
                         [x2, y2],
                     ];
                 }
                 const { position, positionAbsolute } = calculateNodePosition({
-                    nodeId: n.id,
+                    nodeId: id,
                     nextPosition,
                     nodeLookup,
                     nodeExtent: adjustedNodeExtent,
@@ -1546,11 +1577,10 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                     onError,
                 });
                 // we want to make sure that we only fire a change event when there is a change
-                hasChange = hasChange || n.position.x !== position.x || n.position.y !== position.y;
-                n.position = position;
-                n.internals.positionAbsolute = positionAbsolute;
-                return n;
-            });
+                hasChange = hasChange || dragItem.position.x !== position.x || dragItem.position.y !== position.y;
+                dragItem.position = position;
+                dragItem.internals.positionAbsolute = positionAbsolute;
+            }
             if (!hasChange) {
                 return;
             }
@@ -1564,8 +1594,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 onDrag?.(dragEvent, dragItems, currentNode, currentNodes);
                 onNodeDrag?.(dragEvent, currentNode, currentNodes);
                 if (!nodeId) {
-                    const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag);
-                    _onSelectionDrag(dragEvent, currentNode, currentNodes);
+                    onSelectionDrag?.(dragEvent, currentNodes);
                 }
             }
         }
@@ -1599,7 +1628,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
             lastPos = pointerPos;
             dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId);
-            if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
+            if (dragItems.size > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
                     nodeId,
                     dragItems,
@@ -1608,8 +1637,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 onDragStart?.(event.sourceEvent, dragItems, currentNode, currentNodes);
                 onNodeDragStart?.(event.sourceEvent, currentNode, currentNodes);
                 if (!nodeId) {
-                    const _onSelectionDragStart = wrapSelectionDragFunc(onSelectionDragStart);
-                    _onSelectionDragStart(event.sourceEvent, currentNode, currentNodes);
+                    onSelectionDragStart?.(event.sourceEvent, currentNodes);
                 }
             }
         }
@@ -1653,7 +1681,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             autoPanStarted = false;
             dragStarted = false;
             cancelAnimationFrame(autoPanId);
-            if (dragItems.length > 0) {
+            if (dragItems.size > 0) {
                 const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
                 updateNodePositions(dragItems, false);
                 if (onDragStop || onNodeDragStop || (!nodeId && onSelectionDragStop)) {
@@ -1665,8 +1693,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                     onDragStop?.(event.sourceEvent, dragItems, currentNode, currentNodes);
                     onNodeDragStop?.(event.sourceEvent, currentNode, currentNodes);
                     if (!nodeId) {
-                        const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop);
-                        _onSelectionDragStop(event.sourceEvent, currentNode, currentNodes);
+                        onSelectionDragStop?.(event.sourceEvent, currentNodes);
                     }
                 }
             }
@@ -1945,15 +1972,30 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
             const nextZoom = transform[2] * Math.pow(2, pinchDelta);
             panZoom.scaleTo(nextZoom);
         };
+        let panStart = [0, 0];
+        const panStartHandler = (event) => {
+            if (event.sourceEvent.type === 'mousedown' || event.sourceEvent.type === 'touchstart') {
+                panStart = [
+                    event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,
+                    event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,
+                ];
+            }
+        };
         const panHandler = (event) => {
             const transform = getTransform();
-            if (event.sourceEvent.type !== 'mousemove' || !panZoom) {
+            if ((event.sourceEvent.type !== 'mousemove' && event.sourceEvent.type !== 'touchmove') || !panZoom) {
                 return;
             }
+            const panCurrent = [
+                event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,
+                event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,
+            ];
+            const panDelta = [panCurrent[0] - panStart[0], panCurrent[1] - panStart[1]];
+            panStart = panCurrent;
             const moveScale = getViewScale() * Math.max(transform[2], Math.log(transform[2])) * (inversePan ? -1 : 1);
             const position = {
-                x: transform[0] - event.sourceEvent.movementX * moveScale,
-                y: transform[1] - event.sourceEvent.movementY * moveScale,
+                x: transform[0] - panDelta[0] * moveScale,
+                y: transform[1] - panDelta[1] * moveScale,
             };
             const extent = [
                 [0, 0],
@@ -1966,6 +2008,7 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
             }, extent, translateExtent);
         };
         const zoomAndPanHandler = zoom()
+            .on('start', panStartHandler)
             // @ts-ignore
             .on('zoom', pannable ? panHandler : null)
             // @ts-ignore
@@ -2565,16 +2608,6 @@ const initStartValues = {
     pointerY: 0,
     aspectRatio: 1,
 };
-const initChange = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    isXPosChange: false,
-    isYPosChange: false,
-    isWidthChange: false,
-    isHeightChange: false,
-};
 function nodeToParentExtent(node) {
     return [
         [0, 0],
@@ -2593,7 +2626,7 @@ function nodeToChildExtent(child, parent, nodeOrigin) {
         [x + width - originOffsetX, y + height - originOffsetY],
     ];
 }
-function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
+function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     const selection = select(domNode);
     function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
         let prevValues = { ...initPrevValues };
@@ -2608,128 +2641,127 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
             .on('start', (event) => {
             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.measured?.width ?? 0,
-                    height: node.measured?.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.parentId);
-                    if (parentNode && node.extent === 'parent') {
-                        parentExtent = nodeToParentExtent(parentNode);
-                    }
+            if (!node) {
+                return;
+            }
+            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            prevValues = {
+                width: node.measured?.width ?? 0,
+                height: node.measured?.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.parentId);
+                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.parentId === 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;
-                            }
+            }
+            // 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.parentId === 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 });
             }
+            onResizeStart?.(event, { ...prevValues });
         })
             .on('drag', (event) => {
             const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
             const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
             const childChanges = [];
-            if (node) {
-                const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
-                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;
-                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 (!node) {
+                return;
+            }
+            const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+            const change = {};
+            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;
+            const isXPosChange = x !== prevX && isWidthChange;
+            const isYPosChange = y !== prevY && isHeightChange;
+            if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) {
+                return;
+            }
+            if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
+                change.x = isXPosChange ? x : prevValues.x;
+                change.y = isYPosChange ? y : prevValues.y;
+                prevValues.x = change.x;
+                prevValues.y = change.y;
+                // Fix expandParent when resizing from top/left
+                if (parentNode && node.expandParent) {
+                    if (change.x && change.x < 0) {
+                        prevValues.x = 0;
+                        startValues.x = startValues.x - change.x;
                     }
-                    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 (change.y && change.y < 0) {
+                        prevValues.y = 0;
+                        startValues.y = startValues.y - change.y;
                     }
                 }
-                if (isWidthChange || isHeightChange) {
-                    change.isWidthChange = isWidthChange;
-                    change.isHeightChange = isHeightChange;
-                    change.width = width;
-                    change.height = height;
-                    prevValues.width = change.width;
-                    prevValues.height = change.height;
-                }
-                if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
-                    return;
-                }
-                const direction = getResizeDirection({
-                    width: prevValues.width,
-                    prevWidth,
-                    height: prevValues.height,
-                    prevHeight,
-                    affectsX: controlDirection.affectsX,
-                    affectsY: controlDirection.affectsY,
-                });
-                const nextValues = { ...prevValues, direction };
-                const callResize = shouldResize?.(event, nextValues);
-                if (callResize === false) {
-                    return;
+                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);
+                    }
                 }
-                onResize?.(event, nextValues);
-                onChange(change, childChanges);
             }
+            if (isWidthChange || isHeightChange) {
+                change.width = isWidthChange ? width : prevValues.width;
+                change.height = isHeightChange ? height : prevValues.height;
+                prevValues.width = change.width;
+                prevValues.height = change.height;
+            }
+            const direction = getResizeDirection({
+                width: prevValues.width,
+                prevWidth,
+                height: prevValues.height,
+                prevHeight,
+                affectsX: controlDirection.affectsX,
+                affectsY: controlDirection.affectsY,
+            });
+            const nextValues = { ...prevValues, direction };
+            const callResize = shouldResize?.(event, nextValues);
+            if (callResize === false) {
+                return;
+            }
+            onResize?.(event, nextValues);
+            onChange(change, childChanges);
         })
             .on('end', (event) => {
             onResizeEnd?.(event, { ...prevValues });
+            onEnd?.();
         });
         selection.call(dragHandler);
     }
@@ -2742,4 +2774,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, adoptUserNodes, 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, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleParentExpand, infiniteExtent, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, 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, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, updateNodeInternals };