@xyflow/system 0.0.29 → 0.0.31

package/dist/esm/index.mjs

@@ -39,6 +39,18 @@ var SelectionMode;
     SelectionMode["Partial"] = "partial";
     SelectionMode["Full"] = "full";
 })(SelectionMode || (SelectionMode = {}));
+const initialConnection = {
+    inProgress: false,
+    isValid: null,
+    from: null,
+    fromHandle: null,
+    fromPosition: null,
+    fromNode: null,
+    to: null,
+    toHandle: null,
+    toPosition: null,
+    toNode: null,
+};
 
 var ConnectionLineType;
 (function (ConnectionLineType) {
@@ -61,6 +73,12 @@ var Position;
     Position["Right"] = "right";
     Position["Bottom"] = "bottom";
 })(Position || (Position = {}));
+const oppositePosition = {
+    [Position.Left]: Position.Right,
+    [Position.Right]: Position.Left,
+    [Position.Top]: Position.Bottom,
+    [Position.Bottom]: Position.Top,
+};
 
 /**
  * @internal
@@ -101,6 +119,9 @@ function handleConnectionChange(a, b, cb) {
         cb(diff);
     }
 }
+function getConnectionStatus(isValid) {
+    return isValid === null ? null : isValid ? 'valid' : 'invalid';
+}
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -162,19 +183,12 @@ const getIncomers = (node, nodes, edges) => {
 };
 const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
     const { width, height } = getNodeDimensions(node);
-    const positionAbsolute = 'internals' in node ? node.internals.positionAbsolute : node.position;
-    const origin = node.origin || nodeOrigin;
+    const origin = node.origin ?? nodeOrigin;
     const offsetX = width * origin[0];
     const offsetY = height * origin[1];
     return {
-        position: {
-            x: node.position.x - offsetX,
-            y: node.position.y - offsetY,
-        },
-        positionAbsolute: {
-            x: positionAbsolute.x - offsetX,
-            y: positionAbsolute.y - offsetY,
-        },
+        x: node.position.x - offsetX,
+        y: node.position.y - offsetY,
     };
 };
 /**
@@ -199,16 +213,14 @@ const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
  * Determines a bounding box that contains all given nodes in an array
  * @internal
  */
-const getInternalNodesBounds = (nodeLookup, params = {
-    nodeOrigin: [0, 0],
-}) => {
+const getInternalNodesBounds = (nodeLookup, params = {}) => {
     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 nodeBox = nodeToBox(node, params.nodeOrigin);
+        if (params.filter === undefined || params.filter(node)) {
+            const nodeBox = nodeToBox(node);
             box = getBoundsOfBoxes(box, nodeBox);
         }
     });
@@ -216,7 +228,7 @@ const getInternalNodesBounds = (nodeLookup, params = {
 };
 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]) => {
+excludeNonSelectableNodes = false) => {
     const paneRect = {
         ...pointToRendererPoint(rect, [tx, ty, tScale]),
         width: rect.width / tScale,
@@ -230,7 +242,7 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
         if ((excludeNonSelectableNodes && !selectable) || hidden) {
             continue;
         }
-        const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
+        const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node));
         const notInitialized = width === null || height === null;
         const partiallyVisible = partially && overlappingArea > 0;
         const area = (width ?? 0) * (height ?? 0);
@@ -254,17 +266,17 @@ const getConnectedEdges = (nodes, edges) => {
     });
     return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
 };
-function fitView({ nodeLookup, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
-    const filteredNodes = [];
+function fitView({ nodeLookup, width, height, panZoom, minZoom, maxZoom }, options) {
+    const filteredNodes = new Map();
     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);
         if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
-            filteredNodes.push(n);
+            filteredNodes.set(n.id, n);
         }
     });
-    if (filteredNodes.length > 0) {
-        const bounds = getNodesBounds(filteredNodes, { nodeOrigin });
+    if (filteredNodes.size > 0) {
+        const bounds = getInternalNodesBounds(filteredNodes);
         const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
         panZoom.setViewport(viewport, { duration: options?.duration });
         return true;
@@ -294,9 +306,8 @@ function clampNodeExtent(node, extent) {
 function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError, }) {
     const node = nodeLookup.get(nodeId);
     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 };
+    const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
+    const origin = node.origin ?? nodeOrigin;
     let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
     if (node.extent === 'parent' && !node.expandParent) {
         if (!parentNode) {
@@ -308,12 +319,9 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
             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];
-                const extentY = parentY + nodeHeight * currNodeOrigin[1];
                 currentExtent = [
-                    [extentX, extentY],
-                    [extentX + parentWidth - nodeWidth, extentY + parentHeight - nodeHeight],
+                    [parentX, parentY],
+                    [parentX + parentWidth - nodeWidth, parentY + parentHeight - nodeHeight],
                 ];
             }
         }
@@ -329,8 +337,9 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
         : nextPosition;
     return {
         position: {
-            x: positionAbsolute.x - parentX,
-            y: positionAbsolute.y - parentY,
+            // TODO: is there a better way to do this?
+            x: positionAbsolute.x - parentX + node.measured.width * origin[0],
+            y: positionAbsolute.y - parentY + node.measured.height * origin[1],
         },
         positionAbsolute,
     };
@@ -430,21 +439,25 @@ const boxToRect = ({ x, y, x2, y2 }) => ({
     height: y2 - y,
 });
 const nodeToRect = (node, nodeOrigin = [0, 0]) => {
-    const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+    const { x, y } = isInternalNodeBase(node)
+        ? node.internals.positionAbsolute
+        : getNodePositionWithOrigin(node, nodeOrigin);
     return {
         x,
         y,
-        width: node.measured?.width ?? node.width ?? 0,
-        height: node.measured?.height ?? node.height ?? 0,
+        width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
+        height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
     };
 };
 const nodeToBox = (node, nodeOrigin = [0, 0]) => {
-    const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+    const { x, y } = isInternalNodeBase(node)
+        ? node.internals.positionAbsolute
+        : getNodePositionWithOrigin(node, nodeOrigin);
     return {
         x,
         y,
-        x2: x + (node.measured?.width ?? node.width ?? 0),
-        y2: y + (node.measured?.height ?? node.height ?? 0),
+        x2: x + (node.measured?.width ?? node.width ?? node.initialWidth ?? 0),
+        y2: y + (node.measured?.height ?? node.height ?? node.initialHeight ?? 0),
     };
 };
 const getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
@@ -463,15 +476,6 @@ const devWarn = (id, message) => {
         console.warn(`[React Flow]: ${message} Help: https://reactflow.dev/error#${id}`);
     }
 };
-const getPositionWithOrigin = ({ x, y, width, height, origin = [0, 0], }) => {
-    if (!width || !height || origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
-        return { x, y };
-    }
-    return {
-        x: x - width * origin[0],
-        y: y - height * origin[1],
-    };
-};
 const snapPosition = (position, snapGrid = [1, 1]) => {
     return {
         x: snapGrid[0] * Math.round(position.x / snapGrid[0]),
@@ -542,7 +546,7 @@ function nodeHasDimensions(node) {
  * @param nodeOrigin
  * @returns an internal node with an absolute position
  */
-function evaluateAbsolutePosition(position, parentId, nodeLookup, nodeOrigin = [0, 0]) {
+function evaluateAbsolutePosition(position, dimensions = { width: 0, height: 0 }, parentId, nodeLookup, nodeOrigin) {
     let nextParentId = parentId;
     const positionAbsolute = { ...position };
     while (nextParentId) {
@@ -550,10 +554,8 @@ function evaluateAbsolutePosition(position, parentId, nodeLookup, nodeOrigin = [
         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;
+            positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0];
+            positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
         }
     }
     return positionAbsolute;
@@ -596,23 +598,20 @@ const getEventPosition = (event, bounds) => {
 // The handle bounds are calculated relative to the node element.
 // We store them in the internals object of the node in order to avoid
 // unnecessary recalculations.
-const getHandleBounds = (selector, nodeElement, nodeBounds, zoom, nodeOrigin = [0, 0]) => {
-    const handles = nodeElement.querySelectorAll(selector);
+const getHandleBounds = (type, nodeElement, nodeBounds, zoom, nodeId) => {
+    const handles = nodeElement.querySelectorAll(`.${type}`);
     if (!handles || !handles.length) {
         return null;
     }
-    const handlesArray = Array.from(handles);
-    const nodeOffset = {
-        x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
-        y: nodeBounds.top + nodeBounds.height * nodeOrigin[1],
-    };
-    return handlesArray.map((handle) => {
+    return Array.from(handles).map((handle) => {
         const handleBounds = handle.getBoundingClientRect();
         return {
             id: handle.getAttribute('data-handleid'),
+            type,
+            nodeId,
             position: handle.getAttribute('data-handlepos'),
-            x: (handleBounds.left - nodeOffset.x) / zoom,
-            y: (handleBounds.top - nodeOffset.y) / zoom,
+            x: (handleBounds.left - nodeBounds.left) / zoom,
+            y: (handleBounds.top - nodeBounds.top) / zoom,
             ...getDimensions(handle),
         };
     });
@@ -778,14 +777,14 @@ const addEdge = (edgeParams, edges) => {
     return edges.concat(edge);
 };
 /**
- * A handy utility to update an existing Edge with new properties
+ * A handy utility to reconnect an existing edge with new properties
  * @param oldEdge - The edge you want to update
  * @param newConnection - The new connection you want to update the edge with
  * @param edges - The array of all current edges
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
  */
-const updateEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
     const { id: oldEdgeId, ...rest } = oldEdge;
     if (!newConnection.source || !newConnection.target) {
         devWarn('006', errorMessages['error006']());
@@ -1039,8 +1038,6 @@ function getEdgePosition(params) {
     params.connectionMode === ConnectionMode.Strict
         ? targetHandleBounds?.target ?? []
         : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []), params.targetHandle);
-    const sourcePosition = sourceHandle?.position || Position.Bottom;
-    const targetPosition = targetHandle?.position || Position.Top;
     if (!sourceHandle || !targetHandle) {
         params.onError?.('008', errorMessages['error008'](!sourceHandle ? 'source' : 'target', {
             id: params.id,
@@ -1049,13 +1046,15 @@ function getEdgePosition(params) {
         }));
         return null;
     }
-    const [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
-    const [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
+    const sourcePosition = sourceHandle?.position || Position.Bottom;
+    const targetPosition = targetHandle?.position || Position.Top;
+    const source = getHandlePosition(sourceNode, sourceHandle, sourcePosition);
+    const target = getHandlePosition(targetNode, targetHandle, targetPosition);
     return {
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
+        sourceX: source.x,
+        sourceY: source.y,
+        targetX: target.x,
+        targetY: target.y,
         sourcePosition,
         targetPosition,
     };
@@ -1081,19 +1080,23 @@ function toHandleBounds(handles) {
         target,
     };
 }
-function getHandlePosition(position, node, handle = null) {
+function getHandlePosition(node, handle, fallbackPosition = Position.Left, center = false) {
     const x = (handle?.x ?? 0) + node.internals.positionAbsolute.x;
     const y = (handle?.y ?? 0) + node.internals.positionAbsolute.y;
     const { width, height } = handle ?? getNodeDimensions(node);
+    if (center) {
+        return { x: x + width / 2, y: y + height / 2 };
+    }
+    const position = handle?.position ?? fallbackPosition;
     switch (position) {
         case Position.Top:
-            return [x + width / 2, y];
+            return { x: x + width / 2, y };
         case Position.Right:
-            return [x + width, y + height / 2];
+            return { x: x + width, y: y + height / 2 };
         case Position.Bottom:
-            return [x + width / 2, y + height];
+            return { x: x + width / 2, y: y + height };
         case Position.Left:
-            return [x, y + height / 2];
+            return { x, y: y + height / 2 };
     }
 }
 function getHandle(bounds, handleId) {
@@ -1174,95 +1177,98 @@ function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
     return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
 }
 
-function updateAbsolutePositions(nodeLookup, options = {
+const defaultOptions = {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: true,
     defaults: {},
-}) {
-    const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
-    for (const [, node] of nodeLookup) {
-        const parentId = node.parentId;
-        if (!parentId) {
+};
+const adoptUserNodesDefaultOptions = {
+    ...defaultOptions,
+    checkEquality: true,
+};
+function updateAbsolutePositions(nodeLookup, parentLookup, options) {
+    const _options = { ...defaultOptions, ...options };
+    for (const node of nodeLookup.values()) {
+        if (!node.parentId) {
             continue;
         }
-        if (!nodeLookup.has(parentId)) {
-            throw new Error(`Parent node ${parentId} not found`);
-        }
-        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,
-            };
-        }
+        updateChildPosition(node, nodeLookup, parentLookup, _options);
     }
 }
-function adoptUserNodes(nodes, nodeLookup, parentLookup, options = {
-    nodeOrigin: [0, 0],
-    elevateNodesOnSelect: true,
-    defaults: {},
-    checkEquality: true,
-}) {
+function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
+    const _options = { ...adoptUserNodesDefaultOptions, ...options };
     const tmpLookup = new Map(nodeLookup);
     nodeLookup.clear();
     parentLookup.clear();
     const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
-    nodes.forEach((userNode) => {
+    for (const userNode of nodes) {
         let internalNode = tmpLookup.get(userNode.id);
-        if (options.checkEquality && userNode === internalNode?.internals.userNode) {
+        if (_options.checkEquality && userNode === internalNode?.internals.userNode) {
             nodeLookup.set(userNode.id, internalNode);
         }
         else {
             internalNode = {
-                ...options.defaults,
+                ..._options.defaults,
                 ...userNode,
                 measured: {
                     width: userNode.measured?.width,
                     height: userNode.measured?.height,
                 },
                 internals: {
-                    positionAbsolute: userNode.position,
+                    positionAbsolute: getNodePositionWithOrigin(userNode, _options.nodeOrigin),
                     handleBounds: internalNode?.internals.handleBounds,
-                    z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
+                    z: calculateZ(userNode, selectedNodeZ),
                     userNode,
                 },
             };
             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]);
-            }
+            updateChildPosition(internalNode, nodeLookup, parentLookup, options);
         }
-    });
-    if (parentLookup.size > 0) {
-        updateAbsolutePositions(nodeLookup, options);
     }
 }
-function calculateXYZPosition(node, nodeLookup, result, nodeOrigin = [0, 0]) {
-    if (!node.parentId) {
-        return result;
+function updateChildPosition(node, nodeLookup, parentLookup, options) {
+    const _options = { ...defaultOptions, ...options };
+    const parentId = node.parentId;
+    const parentNode = nodeLookup.get(parentId);
+    if (!parentNode) {
+        throw new Error(`Parent node ${parentId} not found`);
+    }
+    // update the parentLookup
+    const childNodes = parentLookup.get(parentId);
+    if (childNodes) {
+        childNodes.set(node.id, node);
+    }
+    else {
+        parentLookup.set(parentId, new Map([[node.id, node]]));
+    }
+    const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
+    const { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin, selectedNodeZ);
+    const currPosition = node.internals.positionAbsolute;
+    const positionChanged = x !== currPosition.x || y !== currPosition.y;
+    if (positionChanged || z !== node.internals.z) {
+        node.internals = {
+            ...node.internals,
+            positionAbsolute: positionChanged ? { x, y } : currPosition,
+            z,
+        };
     }
-    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) {
+function calculateZ(node, selectedNodeZ) {
+    return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
+}
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, selectedNodeZ) {
+    const position = getNodePositionWithOrigin(childNode, nodeOrigin);
+    const childZ = calculateZ(childNode, selectedNodeZ);
+    const parentZ = parentNode.internals.z ?? 0;
+    return {
+        x: parentNode.internals.positionAbsolute.x + position.x,
+        y: parentNode.internals.positionAbsolute.y + position.y,
+        z: parentZ > childZ ? parentZ : childZ,
+    };
+}
+function handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin = [0, 0]) {
     const changes = [];
     const parentExpansions = new Map();
     // determine the expanded rectangle the child nodes would take for each parent
@@ -1271,31 +1277,36 @@ function handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin) {
         if (!parent) {
             continue;
         }
-        const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
+        const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent);
         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 positionAbsolute = parent.internals.positionAbsolute;
             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) {
+            const origin = parent.origin ?? nodeOrigin;
+            // determine how much the parent expands in width and position
+            const xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0;
+            const yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0;
+            const newWidth = Math.max(dimensions.width, Math.round(expandedRect.width));
+            const newHeight = Math.max(dimensions.height, Math.round(expandedRect.height));
+            const widthChange = (newWidth - dimensions.width) * origin[0];
+            const heightChange = (newHeight - dimensions.height) * origin[1];
+            // We need to correct the position of the parent node if the origin is not [0,0]
+            if (xChange > 0 || yChange > 0 || widthChange || heightChange) {
                 changes.push({
                     id: parentId,
                     type: 'position',
                     position: {
-                        x: position.x - xChange,
-                        y: position.y - yChange,
+                        x: parent.position.x - xChange + widthChange,
+                        y: parent.position.y - yChange + heightChange,
                     },
                 });
                 // 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) => {
+                parentLookup.get(parentId)?.forEach((childNode) => {
                     if (!children.some((child) => child.id === childNode.id)) {
                         changes.push({
                             id: childNode.id,
@@ -1308,14 +1319,15 @@ function handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin) {
                     }
                 });
             }
-            if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
+            // We need to correct the dimensions of the parent node if the origin is not [0,0]
+            if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) {
                 changes.push({
                     id: parentId,
                     type: 'dimensions',
                     setAttributes: true,
                     dimensions: {
-                        width: Math.max(dimensions.width, Math.round(expandedRect.width)),
-                        height: Math.max(dimensions.height, Math.round(expandedRect.height)),
+                        width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),
+                        height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0),
                     },
                 });
             }
@@ -1334,16 +1346,19 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
     const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
     // in this array we collect nodes, that might trigger changes (like expanding parent)
     const parentExpandChildren = [];
-    updates.forEach((update) => {
+    for (const update of updates.values()) {
         const node = nodeLookup.get(update.id);
-        if (node?.hidden) {
+        if (!node) {
+            continue;
+        }
+        if (node.hidden) {
             node.internals = {
                 ...node.internals,
                 handleBounds: undefined,
             };
             updatedInternals = true;
         }
-        else if (node) {
+        else {
             const dimensions = getDimensions(update.nodeElement);
             const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
             const doUpdate = !!(dimensions.width &&
@@ -1354,11 +1369,15 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
                 node.measured = dimensions;
                 node.internals = {
                     ...node.internals,
+                    positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
                     handleBounds: {
-                        source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
-                        target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
+                        source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),
+                        target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),
                     },
                 };
+                if (node.parentId) {
+                    updateChildPosition(node, nodeLookup, parentLookup, { nodeOrigin });
+                }
                 updatedInternals = true;
                 if (dimensionChanged) {
                     changes.push({
@@ -1376,7 +1395,7 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
                 }
             }
         }
-    });
+    }
     if (parentExpandChildren.length > 0) {
         const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
         changes.push(...parentExpandChanges);
@@ -1536,7 +1555,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             let hasChange = false;
             let nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
             if (dragItems.size > 1 && nodeExtent) {
-                const rect = getInternalNodesBounds(dragItems, { nodeOrigin });
+                const rect = getInternalNodesBounds(dragItems);
                 nodesBox = rectToBox(rect);
             }
             for (const [id, dragItem] of dragItems) {
@@ -1719,18 +1738,18 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
 // this functions collects all handles and adds an absolute position
 // so that we can later find the closest handle to the mouse position
 function getHandles(node, handleBounds, type, currentHandle) {
-    return (handleBounds[type] || []).reduce((res, h) => {
-        if (`${node.id}-${h.id}-${type}` !== currentHandle) {
-            res.push({
-                id: h.id || null,
-                type,
-                nodeId: node.id,
-                x: node.internals.positionAbsolute.x + h.x + h.width / 2,
-                y: node.internals.positionAbsolute.y + h.y + h.height / 2,
-            });
+    let excludedHandle = null;
+    const handles = (handleBounds[type] || []).reduce((res, handle) => {
+        if (node.id === currentHandle.nodeId && type === currentHandle.handleType && handle.id === currentHandle.handleId) {
+            excludedHandle = handle;
+        }
+        else {
+            const handleXY = getHandlePosition(node, handle, handle.position, true);
+            res.push({ ...handle, ...handleXY });
         }
         return res;
     }, []);
+    return [handles, excludedHandle];
 }
 function getClosestHandle(pos, connectionRadius, handles) {
     let closestHandles = [];
@@ -1758,15 +1777,17 @@ function getClosestHandle(pos, connectionRadius, handles) {
 }
 function getHandleLookup({ nodeLookup, nodeId, handleId, handleType, }) {
     const connectionHandles = [];
-    for (const [, node] of nodeLookup) {
+    const currentHandle = { nodeId, handleId, handleType };
+    let excludedHandle = null;
+    for (const node of nodeLookup.values()) {
         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);
+            const [sourceHandles, excludedSource] = getHandles(node, node.internals.handleBounds, 'source', currentHandle);
+            const [targetHandles, excludedTarget] = getHandles(node, node.internals.handleBounds, 'target', currentHandle);
+            excludedHandle = excludedHandle ? excludedHandle : excludedSource ?? excludedTarget;
             connectionHandles.push(...sourceHandles, ...targetHandles);
         }
     }
-    return connectionHandles;
+    return [connectionHandles, excludedHandle];
 }
 function getHandleType(edgeUpdaterType, handleDomNode) {
     if (edgeUpdaterType) {
@@ -1780,20 +1801,19 @@ function getHandleType(edgeUpdaterType, handleDomNode) {
     }
     return null;
 }
-function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
-    let connectionStatus = null;
+function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
+    let isValid = null;
     if (isHandleValid) {
-        connectionStatus = 'valid';
+        isValid = true;
     }
     else if (isInsideConnectionRadius && !isHandleValid) {
-        connectionStatus = 'invalid';
+        isValid = false;
     }
-    return connectionStatus;
+    return isValid;
 }
 
 const alwaysValid = () => true;
-let connectionStartHandle = null;
-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, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
@@ -1805,12 +1825,12 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     if (!containerBounds || !handleType) {
         return;
     }
-    let connectionPosition = getEventPosition(event, containerBounds);
+    let position = getEventPosition(event, containerBounds);
     let autoPanStarted = false;
     let connection = null;
     let isValid = false;
     let handleDomNode = null;
-    const handleLookup = getHandleLookup({
+    const [handleLookup, fromHandleInternal] = getHandleLookup({
         nodeLookup,
         nodeId,
         handleId,
@@ -1821,31 +1841,42 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         if (!autoPanOnConnect || !containerBounds) {
             return;
         }
-        const [x, y] = calcAutoPan(connectionPosition, containerBounds);
+        const [x, y] = calcAutoPan(position, containerBounds);
         panBy({ x, y });
         autoPanId = requestAnimationFrame(autoPan);
     }
     // Stays the same for all consecutive pointermove events
-    connectionStartHandle = {
+    const fromHandle = {
+        ...fromHandleInternal,
         nodeId,
-        handleId,
         type: handleType,
+        position: fromHandleInternal.position,
     };
-    updateConnection({
-        connectionPosition,
-        connectionStatus: null,
-        // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
-        connectionStartHandle,
-        connectionEndHandle: null,
-    });
+    const fromNodeInternal = nodeLookup.get(nodeId);
+    const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true);
+    const newConnection = {
+        inProgress: true,
+        isValid: null,
+        from,
+        fromHandle,
+        fromPosition: fromHandle.position,
+        fromNode: fromNodeInternal.internals.userNode,
+        to: position,
+        toHandle: null,
+        toPosition: oppositePosition[fromHandle.position],
+        toNode: null,
+    };
+    updateConnection(newConnection);
+    let previousConnection = newConnection;
     onConnectStart?.(event, { nodeId, handleId, handleType });
     function onPointerMove(event) {
-        if (!getConnectionStartHandle()) {
+        if (!getFromHandle() || !fromHandle) {
             onPointerUp(event);
+            return;
         }
         const transform = getTransform();
-        connectionPosition = getEventPosition(event, containerBounds);
-        closestHandle = getClosestHandle(pointToRendererPoint(connectionPosition, transform, false, [1, 1]), connectionRadius, handleLookup);
+        position = getEventPosition(event, containerBounds);
+        closestHandle = getClosestHandle(pointToRendererPoint(position, transform, false, [1, 1]), connectionRadius, handleLookup);
         if (!autoPanStarted) {
             autoPan();
             autoPanStarted = true;
@@ -1860,21 +1891,35 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             doc,
             lib,
             flowId,
+            handleLookup,
         });
         handleDomNode = result.handleDomNode;
         connection = result.connection;
-        isValid = result.isValid;
-        updateConnection({
-            connectionStartHandle,
-            connectionPosition: closestHandle && isValid
-                ? rendererPointToPoint({
-                    x: closestHandle.x,
-                    y: closestHandle.y,
-                }, transform)
-                : connectionPosition,
-            connectionStatus: getConnectionStatus(!!closestHandle, isValid),
-            connectionEndHandle: result.endHandle,
-        });
+        isValid = isConnectionValid(!!closestHandle, result.isValid);
+        const newConnection = {
+            // from stays the same
+            ...previousConnection,
+            isValid,
+            to: closestHandle && isValid
+                ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, transform)
+                : position,
+            toHandle: result.toHandle,
+            toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
+            toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId).internals.userNode : null,
+        };
+        // we don't want to trigger an update when the connection
+        // is snapped to the same handle as before
+        if (isValid &&
+            closestHandle &&
+            previousConnection.toHandle &&
+            newConnection.toHandle &&
+            previousConnection.toHandle.type === newConnection.toHandle.type &&
+            previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId &&
+            previousConnection.toHandle.id === newConnection.toHandle.id) {
+            return;
+        }
+        updateConnection(newConnection);
+        previousConnection = newConnection;
     }
     function onPointerUp(event) {
         if ((closestHandle || handleDomNode) && connection && isValid) {
@@ -1884,7 +1929,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         // in order to get the latest state of onConnectEnd
         onConnectEnd?.(event);
         if (edgeUpdaterType) {
-            onEdgeUpdateEnd?.(event);
+            onReconnectEnd?.(event);
         }
         cancelConnection();
         cancelAnimationFrame(autoPanId);
@@ -1892,7 +1937,6 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         isValid = false;
         connection = null;
         handleDomNode = null;
-        connectionStartHandle = null;
         doc.removeEventListener('mousemove', onPointerMove);
         doc.removeEventListener('mouseup', onPointerUp);
         doc.removeEventListener('touchmove', onPointerMove);
@@ -1904,7 +1948,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     doc.addEventListener('touchend', onPointerUp);
 }
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
-function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, }) {
+function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, handleLookup, }) {
     const isTarget = fromType === 'target';
     const handleDomNode = handle
         ? doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`)
@@ -1918,7 +1962,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
         handleDomNode: handleToCheck,
         isValid: false,
         connection: null,
-        endHandle: null,
+        toHandle: null,
     };
     if (handleToCheck) {
         const handleType = getHandleType(undefined, handleToCheck);
@@ -1942,13 +1986,14 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
             (connectionMode === ConnectionMode.Strict
                 ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
                 : handleNodeId !== fromNodeId || handleId !== fromHandleId);
-        if (isValid) {
-            result.endHandle = {
-                nodeId: handleNodeId,
-                handleId,
-                type: handleType,
-            };
-            result.isValid = isValidConnection(connection);
+        result.isValid = isValid && isValidConnection(connection);
+        if (handleLookup) {
+            const toHandle = handleLookup.find((h) => h.id === handleId && h.nodeId === handleNodeId && h.type === handleType);
+            if (toHandle) {
+                result.toHandle = {
+                    ...toHandle,
+                };
+            }
         }
     }
     return result;
@@ -1961,6 +2006,7 @@ const XYHandle = {
 function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
     const selection = select(domNode);
     function update({ translateExtent, width, height, zoomStep = 10, pannable = true, zoomable = true, inversePan = false, }) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const zoomHandler = (event) => {
             const transform = getTransform();
             if (event.sourceEvent.type !== 'wheel' || !panZoom) {
@@ -1973,6 +2019,7 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
             panZoom.scaleTo(nextZoom);
         };
         let panStart = [0, 0];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const panStartHandler = (event) => {
             if (event.sourceEvent.type === 'mousedown' || event.sourceEvent.type === 'touchstart') {
                 panStart = [
@@ -1981,6 +2028,7 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
                 ];
             }
         };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const panHandler = (event) => {
             const transform = getTransform();
             if ((event.sourceEvent.type !== 'mousemove' && event.sourceEvent.type !== 'touchmove') || !panZoom) {
@@ -2009,8 +2057,10 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
         };
         const zoomAndPanHandler = zoom()
             .on('start', panStartHandler)
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             .on('zoom', pannable ? panHandler : null)
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             .on('zoom.wheel', zoomable ? zoomHandler : null);
         selection.call(zoomAndPanHandler, {});
@@ -2649,8 +2699,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             }
             const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
             prevValues = {
-                width: node.measured?.width ?? 0,
-                height: node.measured?.height ?? 0,
+                width: node.measured.width ?? 0,
+                height: node.measured.height ?? 0,
                 x: node.position.x ?? 0,
                 y: node.position.y ?? 0,
             };
@@ -2661,11 +2711,9 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 aspectRatio: prevValues.width / prevValues.height,
             };
             parentNode = undefined;
-            if (node.extent === 'parent' || node.expandParent) {
+            if (node.parentId && (node.extent === 'parent' || node.expandParent)) {
                 parentNode = nodeLookup.get(node.parentId);
-                if (parentNode && node.extent === 'parent') {
-                    parentExtent = nodeToParentExtent(parentNode);
-                }
+                parentExtent = parentNode && node.extent === 'parent' ? nodeToParentExtent(parentNode) : undefined;
             }
             // 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
@@ -2712,22 +2760,13 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) {
                 return;
             }
-            if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
+            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 (change.y && change.y < 0) {
-                        prevValues.y = 0;
-                        startValues.y = startValues.y - change.y;
-                    }
-                }
+                // when top/left changes, correct the relative positions of child nodes
+                // so that they stay in the same position
                 if (childNodes.length > 0) {
                     const xChange = x - prevX;
                     const yChange = y - prevY;
@@ -2746,6 +2785,19 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 prevValues.width = change.width;
                 prevValues.height = change.height;
             }
+            // Fix expandParent when resizing from top/left
+            if (parentNode && node.expandParent) {
+                const xLimit = nodeOrigin[0] * (change.width ?? 0);
+                if (change.x && change.x < xLimit) {
+                    prevValues.x = xLimit;
+                    startValues.x = startValues.x - (change.x - xLimit);
+                }
+                const yLimit = nodeOrigin[1] * (change.height ?? 0);
+                if (change.y && change.y < yLimit) {
+                    prevValues.y = yLimit;
+                    startValues.y = startValues.y - (change.y - yLimit);
+                }
+            }
             const direction = getResizeDirection({
                 width: prevValues.width,
                 prevWidth,
@@ -2777,4 +2829,4 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, 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 };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals };