@xyflow/system 0.0.13 → 0.0.15

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2023 webkid GmbH
+Copyright (c) 2019-2024 webkid GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/esm/index.d.ts

@@ -5,4 +5,5 @@ export * from './xydrag';
 export * from './xyhandle';
 export * from './xyminimap';
 export * from './xypanzoom';
+export * from './xyresizer';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

package/dist/esm/index.js

@@ -128,7 +128,7 @@ const isNodeBase = (element) => 'id' in element && !('source' in element) && !('
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the source is the given node
  */
-const getOutgoersBase = (node, nodes, edges) => {
+const getOutgoers = (node, nodes, edges) => {
     if (!node.id) {
         return [];
     }
@@ -148,7 +148,7 @@ const getOutgoersBase = (node, nodes, edges) => {
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the target is the given node
  */
-const getIncomersBase = (node, nodes, edges) => {
+const getIncomers = (node, nodes, edges) => {
     if (!node.id) {
         return [];
     }
@@ -200,7 +200,7 @@ const getNodesBounds = (nodes, nodeOrigin = [0, 0]) => {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
     const box = nodes.reduce((currBox, node) => {
-        const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
+        const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
         return getBoundsOfBoxes(currBox, rectToBox({
             x,
             y,
@@ -243,7 +243,7 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
  * @param edges - All edges
  * @returns Array of edges that connect any of the given nodes with each other
  */
-const getConnectedEdgesBase = (nodes, edges) => {
+const getConnectedEdges = (nodes, edges) => {
     const nodeIds = new Set();
     nodes.forEach((node) => {
         nodeIds.add(node.id);
@@ -346,7 +346,7 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
     }
     const edgeIds = edgesToRemove.map((edge) => edge.id);
     const deletableEdges = edges.filter((edge) => edge.deletable !== false);
-    const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+    const connectedEdges = getConnectedEdges(matchingNodes, deletableEdges);
     const matchingEdges = connectedEdges;
     for (const edge of deletableEdges) {
         const isIncluded = edgeIds.includes(edge.id);
@@ -700,7 +700,7 @@ const connectionExists = (edge, edges) => {
  * @param edges -  The array of all current edges
  * @returns A new array of edges with the new edge added
  */
-const addEdgeBase = (edgeParams, edges) => {
+const addEdge = (edgeParams, edges) => {
     if (!edgeParams.source || !edgeParams.target) {
         devWarn('006', errorMessages['error006']());
         return edges;
@@ -734,7 +734,7 @@ const addEdgeBase = (edgeParams, edges) => {
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
  */
-const updateEdgeBase = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+const updateEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
     const { id: oldEdgeId, ...rest } = oldEdge;
     if (!newConnection.source || !newConnection.target) {
         devWarn('006', errorMessages['error006']());
@@ -1610,7 +1610,7 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
 
 const alwaysValid = () => true;
 let connectionStartHandle = null;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
@@ -1674,6 +1674,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             isValidConnection,
             doc,
             lib,
+            flowId,
         });
         handleDomNode = result.handleDomNode;
         connection = result.connection;
@@ -1729,9 +1730,9 @@ 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, isValidConnection = alwaysValid, }) {
+function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, }) {
     const isTarget = fromType === 'target';
-    const handleDomNode = doc.querySelector(`.${lib}-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`);
+    const handleDomNode = doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`);
     const { x, y } = getEventPosition(event);
     const handleBelow = doc.elementFromPoint(x, y);
     // we always want to prioritize the handle below the mouse cursor over the closest distance handle,
@@ -2173,4 +2174,221 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };
+var ResizeControlVariant;
+(function (ResizeControlVariant) {
+    ResizeControlVariant["Line"] = "line";
+    ResizeControlVariant["Handle"] = "handle";
+})(ResizeControlVariant || (ResizeControlVariant = {}));
+const XY_RESIZER_HANDLE_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const XY_RESIZER_LINE_POSITIONS = ['top', 'right', 'bottom', 'left'];
+
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param width - new width of the node
+ * @param prevWidth - previous width of the node
+ * @param height - new height of the node
+ * @param prevHeight - previous height of the node
+ * @param affectsX - whether to invert the resize direction for the x axis
+ * @param affectsY - whether to invert the resize direction for the y axis
+ * @returns array of two numbers representing the direction of the resize for each axis, 0 = no change, 1 = increase, -1 = decrease
+ */
+function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY, }) {
+    const deltaWidth = width - prevWidth;
+    const deltaHeight = height - prevHeight;
+    const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
+    if (deltaWidth && affectsX) {
+        direction[0] = direction[0] * -1;
+    }
+    if (deltaHeight && affectsY) {
+        direction[1] = direction[1] * -1;
+    }
+    return direction;
+}
+/**
+ * Parses the control position that is being dragged to dimensions that are being resized
+ * @param controlPosition - position of the control that is being dragged
+ * @returns isHorizontal, isVertical, affectsX, affectsY,
+ */
+function getControlDirection(controlPosition) {
+    const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
+    const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
+    const affectsX = controlPosition.includes('left');
+    const affectsY = controlPosition.includes('top');
+    return {
+        isHorizontal,
+        isVertical,
+        affectsX,
+        affectsY,
+    };
+}
+/**
+ * Calculates new width & height of node after resize based on pointer position
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param pointerPosition - the current pointer position corrected for snapping
+ * @param boundaries - minimum and maximum dimensions of the node
+ * @param keepAspectRatio - prevent changes of asprect ratio
+ * @returns width: new width of node, height: new height of node
+ */
+function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio) {
+    const { isHorizontal, isVertical, affectsX, affectsY } = controlDirection;
+    const { xSnapped, ySnapped } = pointerPosition;
+    const { minWidth, maxWidth, minHeight, maxHeight } = boundaries;
+    const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
+    const distX = Math.floor(isHorizontal ? xSnapped - startX : 0);
+    const distY = Math.floor(isVertical ? ySnapped - startY : 0);
+    let width = clamp(startWidth + (affectsX ? -distX : distX), minWidth, maxWidth);
+    let height = clamp(startHeight + (affectsY ? -distY : distY), minHeight, maxHeight);
+    if (keepAspectRatio) {
+        const nextAspectRatio = width / height;
+        const isDiagonal = isHorizontal && isVertical;
+        const isOnlyHorizontal = isHorizontal && !isVertical;
+        const isOnlyVertical = isVertical && !isHorizontal;
+        width = (nextAspectRatio <= aspectRatio && isDiagonal) || isOnlyVertical ? height * aspectRatio : width;
+        height = (nextAspectRatio > aspectRatio && isDiagonal) || isOnlyHorizontal ? width / aspectRatio : height;
+        if (width >= maxWidth) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+        }
+        else if (width <= minWidth) {
+            width = minWidth;
+            height = minWidth / aspectRatio;
+        }
+        if (height >= maxHeight) {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+        }
+        else if (height <= minHeight) {
+            height = minHeight;
+            width = minHeight * aspectRatio;
+        }
+    }
+    return {
+        width,
+        height,
+    };
+}
+/**
+ * Determines new x & y position of node after resize based on new width & height
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param width - new width of node
+ * @param height - new height of node
+ * @returns x: new x position of node, y: new y position of node
+ */
+function getPositionAfterResize(startValues, controlDirection, width, height) {
+    return {
+        x: controlDirection.affectsX ? startValues.x - (width - startValues.width) : startValues.x,
+        y: controlDirection.affectsY ? startValues.y - (height - startValues.height) : startValues.y,
+    };
+}
+
+const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
+const initStartValues = {
+    ...initPrevValues,
+    pointerX: 0,
+    pointerY: 0,
+    aspectRatio: 1,
+};
+const initChange = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    isXPosChange: false,
+    isYPosChange: false,
+    isWidthChange: false,
+    isHeightChange: false,
+};
+function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
+    const selection = select(domNode);
+    function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
+        let prevValues = { ...initPrevValues };
+        let startValues = { ...initStartValues };
+        const controlDirection = getControlDirection(controlPosition);
+        const dragHandler = drag()
+            .on('start', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const node = nodeLookup.get(nodeId);
+            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            prevValues = {
+                width: node?.computed?.width ?? 0,
+                height: node?.computed?.height ?? 0,
+                x: node?.position.x ?? 0,
+                y: node?.position.y ?? 0,
+            };
+            startValues = {
+                ...prevValues,
+                pointerX: xSnapped,
+                pointerY: ySnapped,
+                aspectRatio: prevValues.width / prevValues.height,
+            };
+            onResizeStart?.(event, { ...prevValues });
+        })
+            .on('drag', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            const node = nodeLookup.get(nodeId);
+            if (node) {
+                const change = { ...initChange };
+                const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+                const { width, height } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio);
+                const isWidthChange = width !== prevWidth;
+                const isHeightChange = height !== prevHeight;
+                if (controlDirection.affectsX || controlDirection.affectsY) {
+                    const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
+                    // only transform the node if the width or height changes
+                    const isXPosChange = x !== prevX && isWidthChange;
+                    const isYPosChange = y !== prevY && isHeightChange;
+                    if (isXPosChange || isYPosChange) {
+                        change.isXPosChange = isXPosChange;
+                        change.isYPosChange = isYPosChange;
+                        change.x = isXPosChange ? x : prevX;
+                        change.y = isYPosChange ? y : prevY;
+                        prevValues.x = change.x;
+                        prevValues.y = change.y;
+                    }
+                }
+                if (isWidthChange || isHeightChange) {
+                    change.isWidthChange = isWidthChange;
+                    change.isHeightChange = isHeightChange;
+                    change.width = width;
+                    change.height = height;
+                    prevValues.width = width;
+                    prevValues.height = height;
+                }
+                if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
+                    return;
+                }
+                const direction = getResizeDirection({
+                    width: prevValues.width,
+                    prevWidth,
+                    height: prevValues.height,
+                    prevHeight,
+                    affectsX: controlDirection.affectsX,
+                    affectsY: controlDirection.affectsY,
+                });
+                const nextValues = { ...prevValues, direction };
+                const callResize = shouldResize?.(event, nextValues);
+                if (callResize === false) {
+                    return;
+                }
+                onResize?.(event, nextValues);
+                onChange(change);
+            }
+        })
+            .on('end', (event) => {
+            onResizeEnd?.(event, { ...prevValues });
+        });
+        selection.call(dragHandler);
+    }
+    function destroy() {
+        selection.on('.drag', null);
+    }
+    return {
+        update,
+        destroy,
+    };
+}
+
+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, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, updateNodeDimensions };

package/dist/esm/index.mjs

@@ -128,7 +128,7 @@ const isNodeBase = (element) => 'id' in element && !('source' in element) && !('
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the source is the given node
  */
-const getOutgoersBase = (node, nodes, edges) => {
+const getOutgoers = (node, nodes, edges) => {
     if (!node.id) {
         return [];
     }
@@ -148,7 +148,7 @@ const getOutgoersBase = (node, nodes, edges) => {
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the target is the given node
  */
-const getIncomersBase = (node, nodes, edges) => {
+const getIncomers = (node, nodes, edges) => {
     if (!node.id) {
         return [];
     }
@@ -200,7 +200,7 @@ const getNodesBounds = (nodes, nodeOrigin = [0, 0]) => {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
     const box = nodes.reduce((currBox, node) => {
-        const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
+        const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
         return getBoundsOfBoxes(currBox, rectToBox({
             x,
             y,
@@ -243,7 +243,7 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
  * @param edges - All edges
  * @returns Array of edges that connect any of the given nodes with each other
  */
-const getConnectedEdgesBase = (nodes, edges) => {
+const getConnectedEdges = (nodes, edges) => {
     const nodeIds = new Set();
     nodes.forEach((node) => {
         nodeIds.add(node.id);
@@ -346,7 +346,7 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
     }
     const edgeIds = edgesToRemove.map((edge) => edge.id);
     const deletableEdges = edges.filter((edge) => edge.deletable !== false);
-    const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+    const connectedEdges = getConnectedEdges(matchingNodes, deletableEdges);
     const matchingEdges = connectedEdges;
     for (const edge of deletableEdges) {
         const isIncluded = edgeIds.includes(edge.id);
@@ -700,7 +700,7 @@ const connectionExists = (edge, edges) => {
  * @param edges -  The array of all current edges
  * @returns A new array of edges with the new edge added
  */
-const addEdgeBase = (edgeParams, edges) => {
+const addEdge = (edgeParams, edges) => {
     if (!edgeParams.source || !edgeParams.target) {
         devWarn('006', errorMessages['error006']());
         return edges;
@@ -734,7 +734,7 @@ const addEdgeBase = (edgeParams, edges) => {
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
  */
-const updateEdgeBase = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+const updateEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
     const { id: oldEdgeId, ...rest } = oldEdge;
     if (!newConnection.source || !newConnection.target) {
         devWarn('006', errorMessages['error006']());
@@ -1610,7 +1610,7 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
 
 const alwaysValid = () => true;
 let connectionStartHandle = null;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
@@ -1674,6 +1674,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             isValidConnection,
             doc,
             lib,
+            flowId,
         });
         handleDomNode = result.handleDomNode;
         connection = result.connection;
@@ -1729,9 +1730,9 @@ 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, isValidConnection = alwaysValid, }) {
+function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, }) {
     const isTarget = fromType === 'target';
-    const handleDomNode = doc.querySelector(`.${lib}-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`);
+    const handleDomNode = doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`);
     const { x, y } = getEventPosition(event);
     const handleBelow = doc.elementFromPoint(x, y);
     // we always want to prioritize the handle below the mouse cursor over the closest distance handle,
@@ -2173,4 +2174,221 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };
+var ResizeControlVariant;
+(function (ResizeControlVariant) {
+    ResizeControlVariant["Line"] = "line";
+    ResizeControlVariant["Handle"] = "handle";
+})(ResizeControlVariant || (ResizeControlVariant = {}));
+const XY_RESIZER_HANDLE_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const XY_RESIZER_LINE_POSITIONS = ['top', 'right', 'bottom', 'left'];
+
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param width - new width of the node
+ * @param prevWidth - previous width of the node
+ * @param height - new height of the node
+ * @param prevHeight - previous height of the node
+ * @param affectsX - whether to invert the resize direction for the x axis
+ * @param affectsY - whether to invert the resize direction for the y axis
+ * @returns array of two numbers representing the direction of the resize for each axis, 0 = no change, 1 = increase, -1 = decrease
+ */
+function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY, }) {
+    const deltaWidth = width - prevWidth;
+    const deltaHeight = height - prevHeight;
+    const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
+    if (deltaWidth && affectsX) {
+        direction[0] = direction[0] * -1;
+    }
+    if (deltaHeight && affectsY) {
+        direction[1] = direction[1] * -1;
+    }
+    return direction;
+}
+/**
+ * Parses the control position that is being dragged to dimensions that are being resized
+ * @param controlPosition - position of the control that is being dragged
+ * @returns isHorizontal, isVertical, affectsX, affectsY,
+ */
+function getControlDirection(controlPosition) {
+    const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
+    const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
+    const affectsX = controlPosition.includes('left');
+    const affectsY = controlPosition.includes('top');
+    return {
+        isHorizontal,
+        isVertical,
+        affectsX,
+        affectsY,
+    };
+}
+/**
+ * Calculates new width & height of node after resize based on pointer position
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param pointerPosition - the current pointer position corrected for snapping
+ * @param boundaries - minimum and maximum dimensions of the node
+ * @param keepAspectRatio - prevent changes of asprect ratio
+ * @returns width: new width of node, height: new height of node
+ */
+function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio) {
+    const { isHorizontal, isVertical, affectsX, affectsY } = controlDirection;
+    const { xSnapped, ySnapped } = pointerPosition;
+    const { minWidth, maxWidth, minHeight, maxHeight } = boundaries;
+    const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
+    const distX = Math.floor(isHorizontal ? xSnapped - startX : 0);
+    const distY = Math.floor(isVertical ? ySnapped - startY : 0);
+    let width = clamp(startWidth + (affectsX ? -distX : distX), minWidth, maxWidth);
+    let height = clamp(startHeight + (affectsY ? -distY : distY), minHeight, maxHeight);
+    if (keepAspectRatio) {
+        const nextAspectRatio = width / height;
+        const isDiagonal = isHorizontal && isVertical;
+        const isOnlyHorizontal = isHorizontal && !isVertical;
+        const isOnlyVertical = isVertical && !isHorizontal;
+        width = (nextAspectRatio <= aspectRatio && isDiagonal) || isOnlyVertical ? height * aspectRatio : width;
+        height = (nextAspectRatio > aspectRatio && isDiagonal) || isOnlyHorizontal ? width / aspectRatio : height;
+        if (width >= maxWidth) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+        }
+        else if (width <= minWidth) {
+            width = minWidth;
+            height = minWidth / aspectRatio;
+        }
+        if (height >= maxHeight) {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+        }
+        else if (height <= minHeight) {
+            height = minHeight;
+            width = minHeight * aspectRatio;
+        }
+    }
+    return {
+        width,
+        height,
+    };
+}
+/**
+ * Determines new x & y position of node after resize based on new width & height
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param width - new width of node
+ * @param height - new height of node
+ * @returns x: new x position of node, y: new y position of node
+ */
+function getPositionAfterResize(startValues, controlDirection, width, height) {
+    return {
+        x: controlDirection.affectsX ? startValues.x - (width - startValues.width) : startValues.x,
+        y: controlDirection.affectsY ? startValues.y - (height - startValues.height) : startValues.y,
+    };
+}
+
+const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
+const initStartValues = {
+    ...initPrevValues,
+    pointerX: 0,
+    pointerY: 0,
+    aspectRatio: 1,
+};
+const initChange = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    isXPosChange: false,
+    isYPosChange: false,
+    isWidthChange: false,
+    isHeightChange: false,
+};
+function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
+    const selection = select(domNode);
+    function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
+        let prevValues = { ...initPrevValues };
+        let startValues = { ...initStartValues };
+        const controlDirection = getControlDirection(controlPosition);
+        const dragHandler = drag()
+            .on('start', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const node = nodeLookup.get(nodeId);
+            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            prevValues = {
+                width: node?.computed?.width ?? 0,
+                height: node?.computed?.height ?? 0,
+                x: node?.position.x ?? 0,
+                y: node?.position.y ?? 0,
+            };
+            startValues = {
+                ...prevValues,
+                pointerX: xSnapped,
+                pointerY: ySnapped,
+                aspectRatio: prevValues.width / prevValues.height,
+            };
+            onResizeStart?.(event, { ...prevValues });
+        })
+            .on('drag', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            const node = nodeLookup.get(nodeId);
+            if (node) {
+                const change = { ...initChange };
+                const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+                const { width, height } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio);
+                const isWidthChange = width !== prevWidth;
+                const isHeightChange = height !== prevHeight;
+                if (controlDirection.affectsX || controlDirection.affectsY) {
+                    const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
+                    // only transform the node if the width or height changes
+                    const isXPosChange = x !== prevX && isWidthChange;
+                    const isYPosChange = y !== prevY && isHeightChange;
+                    if (isXPosChange || isYPosChange) {
+                        change.isXPosChange = isXPosChange;
+                        change.isYPosChange = isYPosChange;
+                        change.x = isXPosChange ? x : prevX;
+                        change.y = isYPosChange ? y : prevY;
+                        prevValues.x = change.x;
+                        prevValues.y = change.y;
+                    }
+                }
+                if (isWidthChange || isHeightChange) {
+                    change.isWidthChange = isWidthChange;
+                    change.isHeightChange = isHeightChange;
+                    change.width = width;
+                    change.height = height;
+                    prevValues.width = width;
+                    prevValues.height = height;
+                }
+                if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
+                    return;
+                }
+                const direction = getResizeDirection({
+                    width: prevValues.width,
+                    prevWidth,
+                    height: prevValues.height,
+                    prevHeight,
+                    affectsX: controlDirection.affectsX,
+                    affectsY: controlDirection.affectsY,
+                });
+                const nextValues = { ...prevValues, direction };
+                const callResize = shouldResize?.(event, nextValues);
+                if (callResize === false) {
+                    return;
+                }
+                onResize?.(event, nextValues);
+                onChange(change);
+            }
+        })
+            .on('end', (event) => {
+            onResizeEnd?.(event, { ...prevValues });
+        });
+        selection.call(dragHandler);
+    }
+    function destroy() {
+        selection.on('.drag', null);
+    }
+    return {
+        update,
+        destroy,
+    };
+}
+
+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, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, updateNodeDimensions };