@xyflow/system 0.0.21 → 0.0.22

package/dist/esm/index.js

@@ -17,7 +17,6 @@ const errorMessages = {
     error011: (edgeType) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
     error012: (id) => `Node with id "${id}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
 };
-const internalsSymbol = Symbol.for('internals');
 const infiniteExtent = [
     [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
     [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
@@ -120,6 +119,7 @@ const isEdgeBase = (element) => 'id' in element && 'source' in element && 'targe
  * @returns A boolean indicating whether the element is an Node
  */
 const isNodeBase = (element) => 'id' in element && 'position' in element && !('source' in element) && !('target' in element);
+const isInternalNodeBase = (element) => 'id' in element && 'internals' in element && !('source' in element) && !('target' in element);
 /**
  * Pass in a node, and get connected nodes where edge.source === node.id
  * @public
@@ -182,10 +182,10 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
     };
     return {
         position,
-        positionAbsolute: node.computed?.positionAbsolute
+        positionAbsolute: 'internals' in node
             ? {
-                x: node.computed.positionAbsolute.x - offsetX,
-                y: node.computed.positionAbsolute.y - offsetY,
+                x: node.internals.positionAbsolute.x - offsetX,
+                y: node.internals.positionAbsolute.y - offsetY,
             }
             : position,
     };
@@ -199,6 +199,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * @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 }) => {
     if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
@@ -212,7 +213,30 @@ const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], useRelativePositio
     }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
     return boxToRect(box);
 };
-const getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, 
+/**
+ * Determines a bounding box that contains all given nodes in an array
+ * @internal
+ */
+const getInternalNodesBounds = (nodeLookup, params = {
+    nodeOrigin: [0, 0],
+    useRelativePosition: false,
+}) => {
+    if (nodeLookup.size === 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    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),
+            }));
+        }
+    });
+    return boxToRect(box);
+};
+const getNodesInside = (nodeLookup, 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 = {
@@ -220,12 +244,13 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
         width: rect.width / tScale,
         height: rect.height / tScale,
     };
-    const visibleNodes = nodes.reduce((res, node) => {
-        const { computed, selectable = true, hidden = false } = node;
-        const width = computed?.width ?? node.width ?? node.initialWidth ?? null;
-        const height = computed?.height ?? node.height ?? node.initialHeight ?? null;
+    const visibleNodes = [];
+    for (const [, node] of nodeLookup) {
+        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;
         if ((excludeNonSelectableNodes && !selectable) || hidden) {
-            return res;
+            continue;
         }
         const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
         const notInitialized = width === null || height === null;
@@ -233,10 +258,9 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
         const area = (width ?? 0) * (height ?? 0);
         const isVisible = notInitialized || partiallyVisible || overlappingArea >= area;
         if (isVisible || node.dragging) {
-            res.push(node);
+            visibleNodes.push(node);
         }
-        return res;
-    }, []);
+    }
     return visibleNodes;
 };
 /**
@@ -252,13 +276,14 @@ const getConnectedEdges = (nodes, edges) => {
     });
     return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
 };
-function fitView({ nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
-    const filteredNodes = nodes.filter((n) => {
-        const isVisible = n.computed?.width && n.computed?.height && (options?.includeHiddenNodes || !n.hidden);
-        if (options?.nodes?.length) {
-            return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
+function fitView({ nodeLookup, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
+    const filteredNodes = [];
+    nodeLookup.forEach((n) => {
+        const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
+        if (isVisible &&
+            (!options?.nodes || (options?.nodes.length && options?.nodes.some((optionNode) => optionNode.id === n.id)))) {
+            filteredNodes.push(n);
         }
-        return isVisible;
     });
     if (filteredNodes.length > 0) {
         const bounds = getNodesBounds(filteredNodes, { nodeOrigin });
@@ -280,7 +305,7 @@ function clampNodeExtent(node, extent) {
     if (!extent || extent === 'parent') {
         return extent;
     }
-    return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
+    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.
@@ -290,7 +315,7 @@ function clampNodeExtent(node, extent) {
  */
 function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError, }) {
     const node = nodeLookup.get(nodeId);
-    const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : undefined;
+    const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
     const { x: parentX, y: parentY } = parentNode
         ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
         : { x: 0, y: 0 };
@@ -300,10 +325,10 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
             onError?.('005', errorMessages['error005']());
         }
         else {
-            const nodeWidth = node.computed?.width;
-            const nodeHeight = node.computed?.height;
-            const parentWidth = parentNode?.computed?.width;
-            const parentHeight = parentNode?.computed?.height;
+            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) {
                 const currNodeOrigin = node.origin || nodeOrigin;
                 const extentX = parentX + nodeWidth * currNodeOrigin[0];
@@ -350,7 +375,7 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
             continue;
         }
         const isIncluded = nodeIds.includes(node.id);
-        const parentHit = !isIncluded && node.parentNode && matchingNodes.find((n) => n.id === node.parentNode);
+        const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId);
         if (isIncluded || parentHit) {
             matchingNodes.push(node);
         }
@@ -430,16 +455,16 @@ const nodeToRect = (node, nodeOrigin = [0, 0]) => {
     const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
     return {
         ...positionAbsolute,
-        width: node.computed?.width ?? node.width ?? 0,
-        height: node.computed?.height ?? node.height ?? 0,
+        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);
     return {
         ...positionAbsolute,
-        x2: positionAbsolute.x + (node.computed?.width ?? node.width ?? 0),
-        y2: positionAbsolute.y + (node.computed?.height ?? node.height ?? 0),
+        x2: positionAbsolute.x + (node.measured?.width ?? node.width ?? 0),
+        y2: positionAbsolute.y + (node.measured?.height ?? node.height ?? 0),
     };
 };
 const getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
@@ -519,13 +544,13 @@ function isCoordinateExtent(extent) {
 }
 function getNodeDimensions(node) {
     return {
-        width: node.computed?.width ?? node.width ?? node.initialWidth ?? 0,
-        height: node.computed?.height ?? node.height ?? node.initialHeight ?? 0,
+        width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
+        height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
     };
 }
 function nodeHasDimensions(node) {
-    return ((node.computed?.width ?? node.width ?? node.initialWidth) !== undefined &&
-        (node.computed?.height ?? node.height ?? node.initialHeight) !== undefined);
+    return ((node.measured?.width ?? node.width ?? node.initialWidth) !== undefined &&
+        (node.measured?.height ?? node.height ?? node.initialHeight) !== undefined);
 }
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform }) {
@@ -688,7 +713,7 @@ function getElevatedEdgeZIndex({ sourceNode, targetNode, selected = false, zInde
         return zIndex;
     }
     const edgeOrConnectedNodeSelected = selected || targetNode.selected || sourceNode.selected;
-    const selectedZIndex = Math.max(sourceNode[internalsSymbol]?.z || 0, targetNode[internalsSymbol]?.z || 0, 1000);
+    const selectedZIndex = Math.max(sourceNode.internals.z || 0, targetNode.internals.z || 0, 1000);
     return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
@@ -993,16 +1018,17 @@ function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom,
 }
 
 function isNodeInitialized(node) {
-    return (!!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) &&
-        !!(node?.computed?.width || node?.width || node?.initialWidth));
+    return (node &&
+        !!(node.internals.handleBounds || node.handles?.length) &&
+        !!(node.measured.width || node.width || node.initialWidth));
 }
 function getEdgePosition(params) {
     const { sourceNode, targetNode } = params;
     if (!isNodeInitialized(sourceNode) || !isNodeInitialized(targetNode)) {
         return null;
     }
-    const sourceHandleBounds = sourceNode[internalsSymbol]?.handleBounds || toHandleBounds(sourceNode.handles);
-    const targetHandleBounds = targetNode[internalsSymbol]?.handleBounds || toHandleBounds(targetNode.handles);
+    const sourceHandleBounds = sourceNode.internals.handleBounds || toHandleBounds(sourceNode.handles);
+    const targetHandleBounds = targetNode.internals.handleBounds || toHandleBounds(targetNode.handles);
     const sourceHandle = getHandle(sourceHandleBounds?.source ?? [], params.sourceHandle);
     const targetHandle = getHandle(
     // when connection type is loose we can define all handles as sources and connect source -> source
@@ -1052,8 +1078,8 @@ function toHandleBounds(handles) {
     };
 }
 function getHandlePosition(position, node, handle = null) {
-    const x = (handle?.x ?? 0) + (node.computed?.positionAbsolute?.x ?? 0);
-    const y = (handle?.y ?? 0) + (node.computed?.positionAbsolute?.y ?? 0);
+    const x = (handle?.x ?? 0) + (node.internals.positionAbsolute?.x ?? 0);
+    const y = (handle?.y ?? 0) + (node.internals.positionAbsolute?.y ?? 0);
     const { width, height } = handle ?? getNodeDimensions(node);
     switch (position) {
         case Position.Top:
@@ -1144,111 +1170,176 @@ function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
     return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
 }
 
-function updateAbsolutePositions(nodes, nodeLookup, nodeOrigin = [0, 0], parentNodes) {
-    return nodes.map((node) => {
-        if (node.parentNode && !nodeLookup.has(node.parentNode)) {
-            throw new Error(`Parent node ${node.parentNode} not found`);
-        }
-        if (node.parentNode || parentNodes?.[node.id]) {
-            const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : null;
-            const { x, y, z } = calculateXYZPosition(node, nodes, nodeLookup, {
+function updateAbsolutePositions(nodeLookup, options = {
+    nodeOrigin: [0, 0],
+    elevateNodesOnSelect: true,
+    defaults: {},
+}, parentNodeIds) {
+    const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
+    for (const [id, node] of nodeLookup) {
+        const parentId = node.parentId;
+        if (parentId && !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: node[internalsSymbol]?.z ?? 0,
-            }, parentNode?.origin || nodeOrigin);
-            const positionChanged = x !== node.computed?.positionAbsolute?.x || y !== node.computed?.positionAbsolute?.y;
-            node.computed.positionAbsolute = positionChanged
-                ? {
-                    x,
-                    y,
-                }
-                : node.computed?.positionAbsolute;
-            node[internalsSymbol].z = z;
-            if (parentNodes?.[node.id]) {
-                node[internalsSymbol].isParent = true;
+                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);
         }
-        return node;
-    });
+    }
 }
-function adoptUserProvidedNodes(nodes, nodeLookup, options = {
+function adoptUserNodes(nodes, nodeLookup, options = {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: true,
     defaults: {},
 }) {
     const tmpLookup = new Map(nodeLookup);
     nodeLookup.clear();
-    const parentNodes = {};
     const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
-    const nextNodes = nodes.map((n) => {
-        const currentStoreNode = tmpLookup.get(n.id);
-        if (n === currentStoreNode?.[internalsSymbol]?.userProvidedNode) {
-            nodeLookup.set(n.id, currentStoreNode);
-            return currentStoreNode;
-        }
-        const node = {
-            ...options.defaults,
-            ...n,
-            computed: {
-                positionAbsolute: n.position,
-                width: n.computed?.width,
-                height: n.computed?.height,
-            },
-        };
-        const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
-        const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol];
-        if (node.parentNode) {
-            parentNodes[node.parentNode] = true;
-        }
-        Object.defineProperty(node, internalsSymbol, {
-            enumerable: false,
-            value: {
-                handleBounds: currInternals?.handleBounds,
-                z,
-                userProvidedNode: n,
-            },
-        });
-        nodeLookup.set(node.id, node);
-        return node;
+    const parentNodeIds = new Set();
+    nodes.forEach((userNode) => {
+        const currentStoreNode = tmpLookup.get(userNode.id);
+        if (userNode.parentId) {
+            parentNodeIds.add(userNode.parentId);
+        }
+        if (userNode === currentStoreNode?.internals.userNode) {
+            nodeLookup.set(userNode.id, currentStoreNode);
+        }
+        else {
+            nodeLookup.set(userNode.id, {
+                ...options.defaults,
+                ...userNode,
+                measured: {
+                    width: userNode.measured?.width,
+                    height: userNode.measured?.height,
+                },
+                internals: {
+                    positionAbsolute: userNode.position,
+                    handleBounds: currentStoreNode?.internals?.handleBounds,
+                    z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
+                    userNode,
+                    isParent: false,
+                },
+            });
+        }
     });
-    const nodesWithPositions = updateAbsolutePositions(nextNodes, nodeLookup, options.nodeOrigin, parentNodes);
-    return nodesWithPositions;
+    if (parentNodeIds.size > 0) {
+        updateAbsolutePositions(nodeLookup, options, parentNodeIds);
+    }
 }
-function calculateXYZPosition(node, nodes, nodeLookup, result, nodeOrigin) {
-    if (!node.parentNode) {
+function calculateXYZPosition(node, nodeLookup, result, nodeOrigin = [0, 0]) {
+    if (!node.parentId) {
         return result;
     }
-    const parentNode = nodeLookup.get(node.parentNode);
+    const parentNode = nodeLookup.get(node.parentId);
     const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
-    return calculateXYZPosition(parentNode, nodes, nodeLookup, {
+    return calculateXYZPosition(parentNode, nodeLookup, {
         x: (result.x ?? 0) + parentNodePosition.x,
         y: (result.y ?? 0) + parentNodePosition.y,
-        z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+        z: (parentNode.internals.z ?? 0) > (result.z ?? 0) ? parentNode.internals.z ?? 0 : result.z ?? 0,
     }, parentNode.origin || nodeOrigin);
 }
-function updateNodeDimensions(updates, nodes, nodeLookup, domNode, nodeOrigin, onUpdate) {
+function handleParentExpand(nodes, nodeLookup) {
+    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);
+            }
+        }
+    });
+    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));
+                changes.push({
+                    id,
+                    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,
+                    },
+                });
+                // @todo we need to reset child node positions if < 0
+            }
+            else if (dimensions.width < rect.width || dimensions.height < rect.height) {
+                changes.push({
+                    id,
+                    type: 'dimensions',
+                    resizing: true,
+                    dimensions: {
+                        width: Math.max(dimensions.width, rect.width),
+                        height: Math.max(dimensions.height, rect.height),
+                    },
+                });
+            }
+        });
+    }
+    return changes;
+}
+function updateNodeDimensions(updates, nodeLookup, domNode, nodeOrigin) {
     const viewportNode = domNode?.querySelector('.xyflow__viewport');
     if (!viewportNode) {
-        return null;
+        return [];
     }
+    const changes = [];
     const style = window.getComputedStyle(viewportNode);
     const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
-    const nextNodes = nodes.map((node) => {
-        const update = updates.get(node.id);
-        if (update) {
+    // in this array we collect nodes, that might trigger changes (like expanding parent)
+    const triggerChangeNodes = [];
+    updates.forEach((update) => {
+        const node = nodeLookup.get(update.id);
+        if (node?.hidden) {
+            nodeLookup.set(node.id, {
+                ...node,
+                internals: {
+                    ...node.internals,
+                    handleBounds: undefined,
+                },
+            });
+        }
+        else if (node) {
             const dimensions = getDimensions(update.nodeElement);
             const doUpdate = !!(dimensions.width &&
                 dimensions.height &&
-                (node.computed?.width !== dimensions.width || node.computed?.height !== dimensions.height || update.forceUpdate));
+                (node.measured?.width !== dimensions.width || node.measured?.height !== dimensions.height || update.force));
             if (doUpdate) {
-                onUpdate?.(node.id, dimensions);
                 const newNode = {
                     ...node,
-                    computed: {
-                        ...node.computed,
+                    measured: {
+                        ...node.measured,
                         ...dimensions,
                     },
-                    [internalsSymbol]: {
-                        ...node[internalsSymbol],
+                    internals: {
+                        ...node.internals,
                         handleBounds: {
                             source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
                             target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
@@ -1256,12 +1347,22 @@ function updateNodeDimensions(updates, nodes, nodeLookup, domNode, nodeOrigin, o
                     },
                 };
                 nodeLookup.set(node.id, newNode);
-                return newNode;
+                changes.push({
+                    id: newNode.id,
+                    type: 'dimensions',
+                    dimensions,
+                });
+                if (newNode.expandParent) {
+                    triggerChangeNodes.push(newNode);
+                }
             }
         }
-        return node;
     });
-    return nextNodes;
+    if (triggerChangeNodes.length > 0) {
+        const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+        changes.push(...parentExpandChanges);
+    }
+    return changes;
 }
 function panBy({ delta, panZoom, transform, translateExtent, width, height, }) {
     if (!panZoom || (!delta.x && !delta.y)) {
@@ -1315,18 +1416,18 @@ function shallowNodeData(a, b) {
 function wrapSelectionDragFunc(selectionFunc) {
     return (event, _, nodes) => selectionFunc?.(event, nodes);
 }
-function isParentSelected(node, nodes) {
-    if (!node.parentNode) {
+function isParentSelected(node, nodeLookup) {
+    if (!node.parentId) {
         return false;
     }
-    const parentNode = nodes.find((node) => node.id === node.parentNode);
+    const parentNode = nodeLookup.get(node.parentId);
     if (!parentNode) {
         return false;
     }
     if (parentNode.selected) {
         return true;
     }
-    return isParentSelected(parentNode, nodes);
+    return isParentSelected(parentNode, nodeLookup);
 }
 function hasSelector(target, selector, domNode) {
     let current = target;
@@ -1340,32 +1441,35 @@ function hasSelector(target, selector, domNode) {
     return false;
 }
 // looks for all selected nodes and created a NodeDragItem for each of them
-function getDragItems(nodes, nodesDraggable, mousePos, nodeId) {
-    return nodes
-        .filter((n) => (n.selected || n.id === nodeId) &&
-        (!n.parentNode || !isParentSelected(n, nodes)) &&
-        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')))
-        .map((n) => ({
-        id: n.id,
-        position: n.position || { x: 0, y: 0 },
-        distance: {
-            x: mousePos.x - (n.computed?.positionAbsolute?.x ?? 0),
-            y: mousePos.y - (n.computed?.positionAbsolute?.y ?? 0),
-        },
-        delta: {
-            x: 0,
-            y: 0,
-        },
-        extent: n.extent,
-        parentNode: n.parentNode,
-        origin: n.origin,
-        expandParent: n.expandParent,
-        computed: {
-            positionAbsolute: n.computed?.positionAbsolute || { x: 0, y: 0 },
-            width: n.computed?.width || 0,
-            height: n.computed?.height || 0,
-        },
-    }));
+function getDragItems(nodeLookup, nodesDraggable, mousePos, nodeId) {
+    const dragItems = [];
+    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 ?? 0),
+                    y: mousePos.y - (internalNode.internals.positionAbsolute?.y ?? 0),
+                },
+                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;
 }
 // returns two params:
 // 1. the dragged node (or the first of the list, if we are dragging a node selection)
@@ -1376,9 +1480,8 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, }) {
         return {
             ...node,
             position: n.position,
-            computed: {
-                ...n.computed,
-                positionAbsolute: n.computed.positionAbsolute,
+            measured: {
+                ...n.measured,
             },
         };
     });
@@ -1414,17 +1517,20 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 }
                 // if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
                 // based on its position so that the node stays at it's position relative to the selection.
-                const adjustedNodeExtent = [
+                let adjustedNodeExtent = [
                     [nodeExtent[0][0], nodeExtent[0][1]],
                     [nodeExtent[1][0], nodeExtent[1][1]],
                 ];
                 if (dragItems.length > 1 && nodeExtent && !n.extent) {
-                    adjustedNodeExtent[0][0] = n.computed.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
-                    adjustedNodeExtent[1][0] =
-                        n.computed.positionAbsolute.x + (n.computed?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
-                    adjustedNodeExtent[0][1] = n.computed.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
-                    adjustedNodeExtent[1][1] =
-                        n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
+                    const { positionAbsolute } = n.internals;
+                    const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
+                    const x2 = positionAbsolute.x + (n.measured?.width ?? 0) - 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];
+                    adjustedNodeExtent = [
+                        [x1, y1],
+                        [x2, y2],
+                    ];
                 }
                 const { position, positionAbsolute } = calculateNodePosition({
                     nodeId: n.id,
@@ -1437,7 +1543,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 // 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.computed.positionAbsolute = positionAbsolute;
+                n.internals.positionAbsolute = positionAbsolute;
                 return n;
             });
             if (!hasChange) {
@@ -1474,7 +1580,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             autoPanId = requestAnimationFrame(autoPan);
         }
         function startDrag(event) {
-            const { nodes, nodeLookup, multiSelectionActive, nodesDraggable, transform, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges, } = getStoreItems();
+            const { nodeLookup, multiSelectionActive, nodesDraggable, transform, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges, } = getStoreItems();
             dragStarted = true;
             if ((!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId) {
                 if (!nodeLookup.get(nodeId)?.selected) {
@@ -1487,7 +1593,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             }
             const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
             lastPos = pointerPos;
-            dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
+            dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId);
             if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
                     nodeId,
@@ -1587,8 +1693,8 @@ function getHandles(node, handleBounds, type, currentHandle) {
                 id: h.id || null,
                 type,
                 nodeId: node.id,
-                x: (node.computed?.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
-                y: (node.computed?.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
+                x: (node.internals.positionAbsolute.x ?? 0) + h.x + h.width / 2,
+                y: (node.internals.positionAbsolute.y ?? 0) + h.y + h.height / 2,
             });
         }
         return res;
@@ -1618,20 +1724,17 @@ function getClosestHandle(pos, connectionRadius, handles) {
         : // if multiple handles are layouted on top of each other we take the one with type = target because it's more likely that the user wants to connect to this one
             closestHandles.find((handle) => handle.type === 'target') || closestHandles[0];
 }
-function getHandleLookup({ nodes, nodeId, handleId, handleType }) {
-    return nodes.reduce((res, node) => {
-        if (node[internalsSymbol]) {
-            const { handleBounds } = node[internalsSymbol];
-            let sourceHandles = [];
-            let targetHandles = [];
-            if (handleBounds) {
-                sourceHandles = getHandles(node, handleBounds, 'source', `${nodeId}-${handleId}-${handleType}`);
-                targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`);
-            }
-            res.push(...sourceHandles, ...targetHandles);
+function getHandleLookup({ nodeLookup, nodeId, handleId, handleType, }) {
+    const connectionHandles = [];
+    for (const [, node] of nodeLookup) {
+        if (node.internals.handleBounds) {
+            const id = `${nodeId}-${handleId}-${handleType}`;
+            const sourceHandles = getHandles(node, node.internals.handleBounds, 'source', id);
+            const targetHandles = getHandles(node, node.internals.handleBounds, 'target', id);
+            connectionHandles.push(...sourceHandles, ...targetHandles);
         }
-        return res;
-    }, []);
+    }
+    return connectionHandles;
 }
 function getHandleType(edgeUpdaterType, handleDomNode) {
     if (edgeUpdaterType) {
@@ -1658,7 +1761,7 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
 
 const alwaysValid = () => true;
 let connectionStartHandle = null;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, getConnectionStartHandle, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, getConnectionStartHandle, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
@@ -1676,7 +1779,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     let isValid = false;
     let handleDomNode = null;
     const handleLookup = getHandleLookup({
-        nodes,
+        nodeLookup,
         nodeId,
         handleId,
         handleType,
@@ -2021,10 +2124,6 @@ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, pan
         if (userSelectionActive) {
             return false;
         }
-        // if zoom on double click is disabled, we prevent the double click event
-        if (!zoomOnDoubleClick && event.type === 'dblclick') {
-            return false;
-        }
         // if the target element is inside an element with the nowheel class, we prevent zooming
         if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
             return false;
@@ -2080,6 +2179,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
         [bbox.width, bbox.height],
     ], translateExtent);
     const d3ZoomHandler = d3Selection.on('wheel.zoom');
+    const d3DblClickZoomHandler = d3Selection.on('dblclick.zoom');
     d3ZoomInstance.wheelDelta(wheelDelta);
     function setTransform(transform, options) {
         if (d3Selection) {
@@ -2152,6 +2252,15 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
             lib,
         });
         d3ZoomInstance.filter(filter);
+        // We cannot add zoomOnDoubleClick to the filter above because
+        // double tapping on touch screens circumvents the filter and
+        // dblclick.zoom is fired on the selection directly
+        if (zoomOnDoubleClick) {
+            d3Selection.on('dblclick.zoom', d3DblClickZoomHandler);
+        }
+        else {
+            d3Selection.on('dblclick.zoom', null);
+        }
     }
     function destroy() {
         d3ZoomInstance.on('zoom', null);
@@ -2462,14 +2571,14 @@ const initChange = {
 function nodeToParentExtent(node) {
     return [
         [0, 0],
-        [node.computed.width, node.computed.height],
+        [node.measured.width, node.measured.height],
     ];
 }
 function nodeToChildExtent(child, parent, nodeOrigin) {
     const x = parent.position.x + child.position.x;
     const y = parent.position.y + child.position.y;
-    const width = child.computed.width ?? 0;
-    const height = child.computed.height ?? 0;
+    const width = child.measured.width ?? 0;
+    const height = child.measured.height ?? 0;
     const originOffsetX = nodeOrigin[0] * width;
     const originOffsetY = nodeOrigin[1] * height;
     return [
@@ -2495,8 +2604,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
             if (node) {
                 const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
                 prevValues = {
-                    width: node.computed?.width ?? 0,
-                    height: node.computed?.height ?? 0,
+                    width: node.measured?.width ?? 0,
+                    height: node.measured?.height ?? 0,
                     x: node.position.x ?? 0,
                     y: node.position.y ?? 0,
                 };
@@ -2508,7 +2617,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                 };
                 parentNode = undefined;
                 if (node.extent === 'parent' || node.expandParent) {
-                    parentNode = nodeLookup.get(node.parentNode);
+                    parentNode = nodeLookup.get(node.parentId);
                     if (parentNode && node.extent === 'parent') {
                         parentExtent = nodeToParentExtent(parentNode);
                     }
@@ -2518,7 +2627,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
                 childNodes = [];
                 childExtent = undefined;
                 for (const [childId, child] of nodeLookup) {
-                    if (child.parentNode === nodeId) {
+                    if (child.parentId === nodeId) {
                         childNodes.push({
                             id: childId,
                             position: { ...child.position },
@@ -2626,4 +2735,4 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, updateNodeDimensions };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, 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, updateNodeDimensions };