@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/element/resizeElements.js

@@ -1,49 +1,72 @@
 import { MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";
-import { getElementAbsoluteCoords, getCommonBounds, getResizedElementAbsoluteCoords, getCommonBoundingBox, } from "./bounds";
+import { getElementAbsoluteCoords, getCommonBounds, getResizedElementAbsoluteCoords, getCommonBoundingBox, getElementBounds, } from "./bounds";
 import { isArrowElement, isBoundToContainer, isElbowArrow, isFrameLikeElement, isFreeDrawElement, isImageElement, isLinearElement, isTextElement, } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getFontString } from "../utils";
 import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
-import Scene from "../scene/Scene";
 import { getApproxMinLineWidth, getBoundTextElement, getBoundTextElementId, getContainerElement, handleBindTextResize, getBoundTextMaxWidth, getApproxMinLineHeight, measureText, getMinTextElementWidth, } from "./textElement";
 import { wrapText } from "./textWrapping";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isInGroup } from "../groups";
-import { mutateElbowArrow } from "./routing";
 import { pointCenter, normalizeRadians, pointFrom, pointFromPair, pointRotateRads, } from "../../math";
 // Returns true when transform (resizing/rotation) happened
-export const transformElements = (originalElements, transformHandleType, selectedElements, elementsMap, shouldRotateWithDiscreteAngle, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, centerX, centerY) => {
+export const transformElements = (originalElements, transformHandleType, selectedElements, elementsMap, scene, shouldRotateWithDiscreteAngle, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, centerX, centerY) => {
     if (selectedElements.length === 1) {
         const [element] = selectedElements;
         if (transformHandleType === "rotation") {
             if (!isElbowArrow(element)) {
-                rotateSingleElement(element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle);
+                rotateSingleElement(element, elementsMap, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle);
                 updateBoundElements(element, elementsMap);
             }
         }
         else if (isTextElement(element) && transformHandleType) {
             resizeSingleTextElement(originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
             updateBoundElements(element, elementsMap);
+            return true;
         }
         else if (transformHandleType) {
-            resizeSingleElement(originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
+            const elementId = selectedElements[0].id;
+            const latestElement = elementsMap.get(elementId);
+            const origElement = originalElements.get(elementId);
+            if (latestElement && origElement) {
+                const { nextWidth, nextHeight } = getNextSingleWidthAndHeightFromPointer(latestElement, origElement, elementsMap, originalElements, transformHandleType, pointerX, pointerY, {
+                    shouldMaintainAspectRatio,
+                    shouldResizeFromCenter,
+                });
+                resizeSingleElement(nextWidth, nextHeight, latestElement, origElement, elementsMap, originalElements, transformHandleType, {
+                    shouldMaintainAspectRatio,
+                    shouldResizeFromCenter,
+                });
+            }
         }
         return true;
     }
     else if (selectedElements.length > 1) {
         if (transformHandleType === "rotation") {
-            rotateMultipleElements(originalElements, selectedElements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY);
+            rotateMultipleElements(originalElements, selectedElements, elementsMap, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY);
             return true;
         }
         else if (transformHandleType) {
-            resizeMultipleElements(originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY);
+            const { nextWidth, nextHeight, flipByX, flipByY, originalBoundingBox } = getNextMultipleWidthAndHeightFromPointer(selectedElements, originalElements, elementsMap, transformHandleType, pointerX, pointerY, {
+                shouldMaintainAspectRatio,
+                shouldResizeFromCenter,
+            });
+            resizeMultipleElements(selectedElements, elementsMap, transformHandleType, scene, originalElements, {
+                shouldResizeFromCenter,
+                shouldMaintainAspectRatio,
+                flipByX,
+                flipByY,
+                nextWidth,
+                nextHeight,
+                originalBoundingBox,
+            });
             return true;
         }
     }
     return false;
 };
-const rotateSingleElement = (element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle) => {
+const rotateSingleElement = (element, elementsMap, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle) => {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
@@ -63,7 +86,7 @@ const rotateSingleElement = (element, elementsMap, pointerX, pointerY, shouldRot
     const boundTextElementId = getBoundTextElementId(element);
     mutateElement(element, { angle });
     if (boundTextElementId) {
-        const textElement = Scene.getScene(element)?.getElement(boundTextElementId);
+        const textElement = scene.getElement(boundTextElementId);
         if (textElement && !isArrowElement(element)) {
             mutateElement(textElement, { angle });
         }
@@ -211,67 +234,203 @@ const resizeSingleTextElement = (originalElements, element, elementsMap, transfo
         mutateElement(element, resizedElement);
     }
 };
-export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleDirection, shouldResizeFromCenter, pointerX, pointerY) => {
-    const stateAtResizeStart = originalElements.get(element.id);
-    // Gets bounds corners
-    const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);
-    const startTopLeft = pointFrom(x1, y1);
-    const startBottomRight = pointFrom(x2, y2);
-    const startCenter = pointCenter(startTopLeft, startBottomRight);
-    // Calculate new dimensions based on cursor position
-    const rotatedPointer = pointRotateRads(pointFrom(pointerX, pointerY), startCenter, -stateAtResizeStart.angle);
-    // Get bounds corners rendered on screen
-    const [esx1, esy1, esx2, esy2] = getResizedElementAbsoluteCoords(element, element.width, element.height, true);
-    const boundsCurrentWidth = esx2 - esx1;
-    const boundsCurrentHeight = esy2 - esy1;
-    // It's important we set the initial scale value based on the width and height at resize start,
-    // otherwise previous dimensions affected by modifiers will be taken into account.
-    const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];
-    const atStartBoundsHeight = startBottomRight[1] - startTopLeft[1];
-    let scaleX = atStartBoundsWidth / boundsCurrentWidth;
-    let scaleY = atStartBoundsHeight / boundsCurrentHeight;
-    let boundTextFont = {};
-    const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (transformHandleDirection.includes("e")) {
-        scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
-    }
-    if (transformHandleDirection.includes("s")) {
-        scaleY = (rotatedPointer[1] - startTopLeft[1]) / boundsCurrentHeight;
+const rotateMultipleElements = (originalElements, elements, elementsMap, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY) => {
+    let centerAngle = (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
+    if (shouldRotateWithDiscreteAngle) {
+        centerAngle += SHIFT_LOCKING_ANGLE / 2;
+        centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
     }
-    if (transformHandleDirection.includes("w")) {
-        scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;
+    for (const element of elements) {
+        if (!isFrameLikeElement(element)) {
+            const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+            const cx = (x1 + x2) / 2;
+            const cy = (y1 + y2) / 2;
+            const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
+            const [rotatedCX, rotatedCY] = pointRotateRads(pointFrom(cx, cy), pointFrom(centerX, centerY), (centerAngle + origAngle - element.angle));
+            if (isElbowArrow(element)) {
+                // Needed to re-route the arrow
+                mutateElement(element, {
+                    points: getArrowLocalFixedPoints(element, elementsMap),
+                });
+            }
+            else {
+                mutateElement(element, {
+                    x: element.x + (rotatedCX - cx),
+                    y: element.y + (rotatedCY - cy),
+                    angle: normalizeRadians((centerAngle + origAngle)),
+                }, false);
+            }
+            updateBoundElements(element, elementsMap, {
+                simultaneouslyUpdated: elements,
+            });
+            const boundText = getBoundTextElement(element, elementsMap);
+            if (boundText && !isArrowElement(element)) {
+                mutateElement(boundText, {
+                    x: boundText.x + (rotatedCX - cx),
+                    y: boundText.y + (rotatedCY - cy),
+                    angle: normalizeRadians((centerAngle + origAngle)),
+                }, false);
+            }
+        }
     }
-    if (transformHandleDirection.includes("n")) {
-        scaleY = (startBottomRight[1] - rotatedPointer[1]) / boundsCurrentHeight;
+    scene.triggerUpdate();
+};
+export const getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x, y) => {
+    const [x1, y1, x2, y2] = selectedElements.length === 1
+        ? getElementAbsoluteCoords(selectedElements[0], elementsMap)
+        : getCommonBounds(selectedElements);
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+    const angle = (selectedElements.length === 1 ? selectedElements[0].angle : 0);
+    [x, y] = pointRotateRads(pointFrom(x, y), pointFrom(cx, cy), -angle);
+    switch (transformHandleType) {
+        case "n":
+            return pointRotateRads(pointFrom(x - (x1 + x2) / 2, y - y1), pointFrom(0, 0), angle);
+        case "s":
+            return pointRotateRads(pointFrom(x - (x1 + x2) / 2, y - y2), pointFrom(0, 0), angle);
+        case "w":
+            return pointRotateRads(pointFrom(x - x1, y - (y1 + y2) / 2), pointFrom(0, 0), angle);
+        case "e":
+            return pointRotateRads(pointFrom(x - x2, y - (y1 + y2) / 2), pointFrom(0, 0), angle);
+        case "nw":
+            return pointRotateRads(pointFrom(x - x1, y - y1), pointFrom(0, 0), angle);
+        case "ne":
+            return pointRotateRads(pointFrom(x - x2, y - y1), pointFrom(0, 0), angle);
+        case "sw":
+            return pointRotateRads(pointFrom(x - x1, y - y2), pointFrom(0, 0), angle);
+        case "se":
+            return pointRotateRads(pointFrom(x - x2, y - y2), pointFrom(0, 0), angle);
+        default:
+            return [0, 0];
     }
-    // Linear elements dimensions differ from bounds dimensions
-    const eleInitialWidth = stateAtResizeStart.width;
-    const eleInitialHeight = stateAtResizeStart.height;
-    // We have to use dimensions of element on screen, otherwise the scaling of the
-    // dimensions won't match the cursor for linear elements.
-    let eleNewWidth = element.width * scaleX;
-    let eleNewHeight = element.height * scaleY;
-    // adjust dimensions for resizing from center
+};
+export const getResizeArrowDirection = (transformHandleType, element) => {
+    const [, [px, py]] = element.points;
+    const isResizeEnd = (transformHandleType === "nw" && (px < 0 || py < 0)) ||
+        (transformHandleType === "ne" && px >= 0) ||
+        (transformHandleType === "sw" && px <= 0) ||
+        (transformHandleType === "se" && (px > 0 || py > 0));
+    return isResizeEnd ? "end" : "origin";
+};
+const getResizeAnchor = (handleDirection, shouldMaintainAspectRatio, shouldResizeFromCenter) => {
     if (shouldResizeFromCenter) {
-        eleNewWidth = 2 * eleNewWidth - eleInitialWidth;
-        eleNewHeight = 2 * eleNewHeight - eleInitialHeight;
+        return "center";
     }
-    // adjust dimensions to keep sides ratio
     if (shouldMaintainAspectRatio) {
-        const widthRatio = Math.abs(eleNewWidth) / eleInitialWidth;
-        const heightRatio = Math.abs(eleNewHeight) / eleInitialHeight;
-        if (transformHandleDirection.length === 1) {
-            eleNewHeight *= widthRatio;
-            eleNewWidth *= heightRatio;
-        }
-        if (transformHandleDirection.length === 2) {
-            const ratio = Math.max(widthRatio, heightRatio);
-            eleNewWidth = eleInitialWidth * ratio * Math.sign(eleNewWidth);
-            eleNewHeight = eleInitialHeight * ratio * Math.sign(eleNewHeight);
-        }
+        switch (handleDirection) {
+            case "n":
+                return "south-side";
+            case "e": {
+                return "west-side";
+            }
+            case "s":
+                return "north-side";
+            case "w":
+                return "east-side";
+            case "ne":
+                return "bottom-left";
+            case "nw":
+                return "bottom-right";
+            case "se":
+                return "top-left";
+            case "sw":
+                return "top-right";
+        }
+    }
+    if (["e", "se", "s"].includes(handleDirection)) {
+        return "top-left";
+    }
+    else if (["n", "nw", "w"].includes(handleDirection)) {
+        return "bottom-right";
+    }
+    else if (handleDirection === "ne") {
+        return "bottom-left";
+    }
+    return "top-right";
+};
+const getResizedOrigin = (prevOrigin, prevWidth, prevHeight, newWidth, newHeight, angle, handleDirection, shouldMaintainAspectRatio, shouldResizeFromCenter) => {
+    const anchor = getResizeAnchor(handleDirection, shouldMaintainAspectRatio, shouldResizeFromCenter);
+    const [x, y] = prevOrigin;
+    switch (anchor) {
+        case "top-left":
+            return {
+                x: x +
+                    (prevWidth - newWidth) / 2 +
+                    ((newWidth - prevWidth) / 2) * Math.cos(angle) +
+                    ((prevHeight - newHeight) / 2) * Math.sin(angle),
+                y: y +
+                    (prevHeight - newHeight) / 2 +
+                    ((newWidth - prevWidth) / 2) * Math.sin(angle) +
+                    ((newHeight - prevHeight) / 2) * Math.cos(angle),
+            };
+        case "top-right":
+            return {
+                x: x +
+                    ((prevWidth - newWidth) / 2) * (Math.cos(angle) + 1) +
+                    ((prevHeight - newHeight) / 2) * Math.sin(angle),
+                y: y +
+                    (prevHeight - newHeight) / 2 +
+                    ((prevWidth - newWidth) / 2) * Math.sin(angle) +
+                    ((newHeight - prevHeight) / 2) * Math.cos(angle),
+            };
+        case "bottom-left":
+            return {
+                x: x +
+                    ((prevWidth - newWidth) / 2) * (1 - Math.cos(angle)) +
+                    ((newHeight - prevHeight) / 2) * Math.sin(angle),
+                y: y +
+                    ((prevHeight - newHeight) / 2) * (Math.cos(angle) + 1) +
+                    ((newWidth - prevWidth) / 2) * Math.sin(angle),
+            };
+        case "bottom-right":
+            return {
+                x: x +
+                    ((prevWidth - newWidth) / 2) * (Math.cos(angle) + 1) +
+                    ((newHeight - prevHeight) / 2) * Math.sin(angle),
+                y: y +
+                    ((prevHeight - newHeight) / 2) * (Math.cos(angle) + 1) +
+                    ((prevWidth - newWidth) / 2) * Math.sin(angle),
+            };
+        case "center":
+            return {
+                x: x - (newWidth - prevWidth) / 2,
+                y: y - (newHeight - prevHeight) / 2,
+            };
+        case "east-side":
+            return {
+                x: x + ((prevWidth - newWidth) / 2) * (Math.cos(angle) + 1),
+                y: y +
+                    ((prevWidth - newWidth) / 2) * Math.sin(angle) +
+                    (prevHeight - newHeight) / 2,
+            };
+        case "west-side":
+            return {
+                x: x + ((prevWidth - newWidth) / 2) * (1 - Math.cos(angle)),
+                y: y +
+                    ((newWidth - prevWidth) / 2) * Math.sin(angle) +
+                    (prevHeight - newHeight) / 2,
+            };
+        case "north-side":
+            return {
+                x: x +
+                    (prevWidth - newWidth) / 2 +
+                    ((prevHeight - newHeight) / 2) * Math.sin(angle),
+                y: y + ((newHeight - prevHeight) / 2) * (Math.cos(angle) - 1),
+            };
+        case "south-side":
+            return {
+                x: x +
+                    (prevWidth - newWidth) / 2 +
+                    ((newHeight - prevHeight) / 2) * Math.sin(angle),
+                y: y + ((prevHeight - newHeight) / 2) * (Math.cos(angle) + 1),
+            };
     }
+};
+export const resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, elementsMap, originalElementsMap, handleDirection, { shouldInformMutation = true, shouldMaintainAspectRatio = false, shouldResizeFromCenter = false, } = {}) => {
+    let boundTextFont = {};
+    const boundTextElement = getBoundTextElement(latestElement, elementsMap);
     if (boundTextElement) {
-        const stateOfBoundTextElementAtResize = originalElements.get(boundTextElement.id);
+        const stateOfBoundTextElementAtResize = originalElementsMap.get(boundTextElement.id);
         if (stateOfBoundTextElementAtResize) {
             boundTextFont = {
                 fontSize: stateOfBoundTextElementAtResize.fontSize,
@@ -279,9 +438,9 @@ export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio,
         }
         if (shouldMaintainAspectRatio) {
             const updatedElement = {
-                ...element,
-                width: eleNewWidth,
-                height: eleNewHeight,
+                ...latestElement,
+                width: nextWidth,
+                height: nextHeight,
             };
             const nextFont = measureFontSizeFromWidth(boundTextElement, elementsMap, getBoundTextMaxWidth(updatedElement, boundTextElement));
             if (nextFont === null) {
@@ -294,147 +453,140 @@ export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio,
         else {
             const minWidth = getApproxMinLineWidth(getFontString(boundTextElement), boundTextElement.lineHeight);
             const minHeight = getApproxMinLineHeight(boundTextElement.fontSize, boundTextElement.lineHeight);
-            eleNewWidth = Math.max(eleNewWidth, minWidth);
-            eleNewHeight = Math.max(eleNewHeight, minHeight);
-        }
-    }
-    const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = getResizedElementAbsoluteCoords(stateAtResizeStart, eleNewWidth, eleNewHeight, true);
-    const newBoundsWidth = newBoundsX2 - newBoundsX1;
-    const newBoundsHeight = newBoundsY2 - newBoundsY1;
-    // Calculate new topLeft based on fixed corner during resize
-    let newTopLeft = [...startTopLeft];
-    if (["n", "w", "nw"].includes(transformHandleDirection)) {
-        newTopLeft = [
-            startBottomRight[0] - Math.abs(newBoundsWidth),
-            startBottomRight[1] - Math.abs(newBoundsHeight),
-        ];
-    }
-    if (transformHandleDirection === "ne") {
-        const bottomLeft = [startTopLeft[0], startBottomRight[1]];
-        newTopLeft = [bottomLeft[0], bottomLeft[1] - Math.abs(newBoundsHeight)];
-    }
-    if (transformHandleDirection === "sw") {
-        const topRight = [startBottomRight[0], startTopLeft[1]];
-        newTopLeft = [topRight[0] - Math.abs(newBoundsWidth), topRight[1]];
-    }
-    // Keeps opposite handle fixed during resize
-    if (shouldMaintainAspectRatio) {
-        if (["s", "n"].includes(transformHandleDirection)) {
-            newTopLeft[0] = startCenter[0] - newBoundsWidth / 2;
-        }
-        if (["e", "w"].includes(transformHandleDirection)) {
-            newTopLeft[1] = startCenter[1] - newBoundsHeight / 2;
-        }
-    }
-    const flipX = eleNewWidth < 0;
-    const flipY = eleNewHeight < 0;
-    // Flip horizontally
-    if (flipX) {
-        if (transformHandleDirection.includes("e")) {
-            newTopLeft[0] -= Math.abs(newBoundsWidth);
-        }
-        if (transformHandleDirection.includes("w")) {
-            newTopLeft[0] += Math.abs(newBoundsWidth);
-        }
-    }
-    // Flip vertically
-    if (flipY) {
-        if (transformHandleDirection.includes("s")) {
-            newTopLeft[1] -= Math.abs(newBoundsHeight);
-        }
-        if (transformHandleDirection.includes("n")) {
-            newTopLeft[1] += Math.abs(newBoundsHeight);
-        }
-    }
-    if (shouldResizeFromCenter) {
-        newTopLeft[0] = startCenter[0] - Math.abs(newBoundsWidth) / 2;
-        newTopLeft[1] = startCenter[1] - Math.abs(newBoundsHeight) / 2;
-    }
-    // adjust topLeft to new rotation point
-    const angle = stateAtResizeStart.angle;
-    const rotatedTopLeft = pointRotateRads(pointFromPair(newTopLeft), startCenter, angle);
-    const newCenter = pointFrom(newTopLeft[0] + Math.abs(newBoundsWidth) / 2, newTopLeft[1] + Math.abs(newBoundsHeight) / 2);
-    const rotatedNewCenter = pointRotateRads(newCenter, startCenter, angle);
-    newTopLeft = pointRotateRads(rotatedTopLeft, rotatedNewCenter, -angle);
-    // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner
-    // So we need to readjust (x,y) to be where the first point should be
-    const newOrigin = [...newTopLeft];
-    const linearElementXOffset = stateAtResizeStart.x - newBoundsX1;
-    const linearElementYOffset = stateAtResizeStart.y - newBoundsY1;
-    newOrigin[0] += linearElementXOffset;
-    newOrigin[1] += linearElementYOffset;
-    const nextX = newOrigin[0];
-    const nextY = newOrigin[1];
-    // Readjust points for linear elements
-    let rescaledElementPointsY;
-    let rescaledPoints;
-    if (isLinearElement(element) || isFreeDrawElement(element)) {
-        rescaledElementPointsY = rescalePoints(1, eleNewHeight, stateAtResizeStart.points, true);
-        rescaledPoints = rescalePoints(0, eleNewWidth, rescaledElementPointsY, true);
-    }
-    const resizedElement = {
-        width: Math.abs(eleNewWidth),
-        height: Math.abs(eleNewHeight),
-        x: nextX,
-        y: nextY,
-        points: rescaledPoints,
-    };
-    if ("scale" in element && "scale" in stateAtResizeStart) {
-        mutateElement(element, {
+            nextWidth = Math.max(nextWidth, minWidth);
+            nextHeight = Math.max(nextHeight, minHeight);
+        }
+    }
+    const rescaledPoints = rescalePointsInElement(origElement, nextWidth, nextHeight, true);
+    let previousOrigin = pointFrom(origElement.x, origElement.y);
+    if (isLinearElement(origElement)) {
+        const [x1, y1] = getElementBounds(origElement, originalElementsMap);
+        previousOrigin = pointFrom(x1, y1);
+    }
+    const newOrigin = getResizedOrigin(previousOrigin, origElement.width, origElement.height, nextWidth, nextHeight, origElement.angle, handleDirection, shouldMaintainAspectRatio, shouldResizeFromCenter);
+    if (isLinearElement(origElement) && rescaledPoints.points) {
+        const offsetX = origElement.x - previousOrigin[0];
+        const offsetY = origElement.y - previousOrigin[1];
+        newOrigin.x += offsetX;
+        newOrigin.y += offsetY;
+        const scaledX = rescaledPoints.points[0][0];
+        const scaledY = rescaledPoints.points[0][1];
+        newOrigin.x += scaledX;
+        newOrigin.y += scaledY;
+        rescaledPoints.points = rescaledPoints.points.map((p) => pointFrom(p[0] - scaledX, p[1] - scaledY));
+    }
+    // flipping
+    if (nextWidth < 0) {
+        newOrigin.x = newOrigin.x + nextWidth;
+    }
+    if (nextHeight < 0) {
+        newOrigin.y = newOrigin.y + nextHeight;
+    }
+    if ("scale" in latestElement && "scale" in origElement) {
+        mutateElement(latestElement, {
             scale: [
                 // defaulting because scaleX/Y can be 0/-0
-                (Math.sign(newBoundsX2 - stateAtResizeStart.x) ||
-                    stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0],
-                (Math.sign(newBoundsY2 - stateAtResizeStart.y) ||
-                    stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1],
+                (Math.sign(nextWidth) || origElement.scale[0]) * origElement.scale[0],
+                (Math.sign(nextHeight) || origElement.scale[1]) * origElement.scale[1],
             ],
         });
     }
-    if (isArrowElement(element) &&
+    if (isArrowElement(latestElement) &&
         boundTextElement &&
         shouldMaintainAspectRatio) {
-        const fontSize = (resizedElement.width / element.width) * boundTextElement.fontSize;
+        const fontSize = (nextWidth / latestElement.width) * boundTextElement.fontSize;
         if (fontSize < MIN_FONT_SIZE) {
             return;
         }
         boundTextFont.fontSize = fontSize;
     }
-    if (resizedElement.width !== 0 &&
-        resizedElement.height !== 0 &&
-        Number.isFinite(resizedElement.x) &&
-        Number.isFinite(resizedElement.y)) {
-        mutateElement(element, resizedElement);
-        updateBoundElements(element, elementsMap, {
-            newSize: {
-                width: resizedElement.width,
-                height: resizedElement.height,
-            },
+    if (nextWidth !== 0 &&
+        nextHeight !== 0 &&
+        Number.isFinite(newOrigin.x) &&
+        Number.isFinite(newOrigin.y)) {
+        const updates = {
+            ...newOrigin,
+            width: Math.abs(nextWidth),
+            height: Math.abs(nextHeight),
+            ...rescaledPoints,
+        };
+        mutateElement(latestElement, updates, shouldInformMutation);
+        updateBoundElements(latestElement, elementsMap, {
+            // TODO: confirm with MARK if this actually makes sense
+            newSize: { width: nextWidth, height: nextHeight },
         });
         if (boundTextElement && boundTextFont != null) {
             mutateElement(boundTextElement, {
                 fontSize: boundTextFont.fontSize,
             });
         }
-        handleBindTextResize(element, elementsMap, transformHandleDirection, shouldMaintainAspectRatio);
+        handleBindTextResize(latestElement, elementsMap, handleDirection, shouldMaintainAspectRatio);
     }
 };
-export const resizeMultipleElements = (originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY) => {
-    // map selected elements to the original elements. While it never should
-    // happen that pointerDownState.originalElements won't contain the selected
-    // elements during resize, this coupling isn't guaranteed, so to ensure
-    // type safety we need to transform only those elements we filter.
-    const targetElements = selectedElements.reduce((acc, element) => {
-        const origElement = originalElements.get(element.id);
-        if (origElement) {
-            acc.push({ orig: origElement, latest: element });
+const getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, elementsMap, originalElementsMap, handleDirection, pointerX, pointerY, { shouldMaintainAspectRatio = false, shouldResizeFromCenter = false, } = {}) => {
+    // Gets bounds corners
+    const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(origElement, origElement.width, origElement.height, true);
+    const startTopLeft = pointFrom(x1, y1);
+    const startBottomRight = pointFrom(x2, y2);
+    const startCenter = pointCenter(startTopLeft, startBottomRight);
+    // Calculate new dimensions based on cursor position
+    const rotatedPointer = pointRotateRads(pointFrom(pointerX, pointerY), startCenter, -origElement.angle);
+    // Get bounds corners rendered on screen
+    const [esx1, esy1, esx2, esy2] = getResizedElementAbsoluteCoords(latestElement, latestElement.width, latestElement.height, true);
+    const boundsCurrentWidth = esx2 - esx1;
+    const boundsCurrentHeight = esy2 - esy1;
+    // It's important we set the initial scale value based on the width and height at resize start,
+    // otherwise previous dimensions affected by modifiers will be taken into account.
+    const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];
+    const atStartBoundsHeight = startBottomRight[1] - startTopLeft[1];
+    let scaleX = atStartBoundsWidth / boundsCurrentWidth;
+    let scaleY = atStartBoundsHeight / boundsCurrentHeight;
+    if (handleDirection.includes("e")) {
+        scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
+    }
+    if (handleDirection.includes("s")) {
+        scaleY = (rotatedPointer[1] - startTopLeft[1]) / boundsCurrentHeight;
+    }
+    if (handleDirection.includes("w")) {
+        scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;
+    }
+    if (handleDirection.includes("n")) {
+        scaleY = (startBottomRight[1] - rotatedPointer[1]) / boundsCurrentHeight;
+    }
+    // We have to use dimensions of element on screen, otherwise the scaling of the
+    // dimensions won't match the cursor for linear elements.
+    let nextWidth = latestElement.width * scaleX;
+    let nextHeight = latestElement.height * scaleY;
+    if (shouldResizeFromCenter) {
+        nextWidth = 2 * nextWidth - origElement.width;
+        nextHeight = 2 * nextHeight - origElement.height;
+    }
+    // adjust dimensions to keep sides ratio
+    if (shouldMaintainAspectRatio) {
+        const widthRatio = Math.abs(nextWidth) / origElement.width;
+        const heightRatio = Math.abs(nextHeight) / origElement.height;
+        if (handleDirection.length === 1) {
+            nextHeight *= widthRatio;
+            nextWidth *= heightRatio;
         }
-        return acc;
-    }, []);
+        if (handleDirection.length === 2) {
+            const ratio = Math.max(widthRatio, heightRatio);
+            nextWidth = origElement.width * ratio * Math.sign(nextWidth);
+            nextHeight = origElement.height * ratio * Math.sign(nextHeight);
+        }
+    }
+    return {
+        nextWidth,
+        nextHeight,
+    };
+};
+const getNextMultipleWidthAndHeightFromPointer = (selectedElements, originalElementsMap, elementsMap, handleDirection, pointerX, pointerY, { shouldMaintainAspectRatio = false, shouldResizeFromCenter = false, } = {}) => {
+    const originalElementsArray = selectedElements.map((el) => originalElementsMap.get(el.id));
     // getCommonBoundingBox() uses getBoundTextElement() which returns null for
     // original elements from pointerDownState, so we have to find and add these
     // bound text elements manually. Additionally, the coordinates of bound text
     // elements aren't always up to date.
-    const boundTextElements = targetElements.reduce((acc, { orig }) => {
+    const boundTextElements = originalElementsArray.reduce((acc, orig) => {
         if (!isLinearElement(orig)) {
             return acc;
         }
@@ -442,50 +594,48 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
         if (!textId) {
             return acc;
         }
-        const text = originalElements.get(textId) ?? null;
+        const text = originalElementsMap.get(textId) ?? null;
         if (!isBoundToContainer(text)) {
             return acc;
         }
-        const xy = LinearElementEditor.getBoundTextElementPosition(orig, text, elementsMap);
-        return [...acc, { ...text, ...xy }];
+        return [
+            ...acc,
+            {
+                ...text,
+                ...LinearElementEditor.getBoundTextElementPosition(orig, text, elementsMap),
+            },
+        ];
     }, []);
-    const { minX, minY, maxX, maxY, midX, midY } = getCommonBoundingBox(targetElements.map(({ orig }) => orig).concat(boundTextElements));
+    const originalBoundingBox = getCommonBoundingBox(originalElementsArray.map((orig) => orig).concat(boundTextElements));
+    const { minX, minY, maxX, maxY, midX, midY } = originalBoundingBox;
     const width = maxX - minX;
     const height = maxY - minY;
-    const direction = transformHandleType;
     const anchorsMap = {
-        ne: pointFrom(minX, maxY),
-        se: pointFrom(minX, minY),
-        sw: pointFrom(maxX, minY),
-        nw: pointFrom(maxX, maxY),
-        e: pointFrom(minX, minY + height / 2),
-        w: pointFrom(maxX, minY + height / 2),
-        n: pointFrom(minX + width / 2, maxY),
-        s: pointFrom(minX + width / 2, minY),
+        ne: [minX, maxY],
+        se: [minX, minY],
+        sw: [maxX, minY],
+        nw: [maxX, maxY],
+        e: [minX, minY + height / 2],
+        w: [maxX, minY + height / 2],
+        n: [minX + width / 2, maxY],
+        s: [minX + width / 2, minY],
     };
     // anchor point must be on the opposite side of the dragged selection handle
     // or be the center of the selection if shouldResizeFromCenter
     const [anchorX, anchorY] = shouldResizeFromCenter
-        ? pointFrom(midX, midY)
-        : anchorsMap[direction];
+        ? [midX, midY]
+        : anchorsMap[handleDirection];
     const resizeFromCenterScale = shouldResizeFromCenter ? 2 : 1;
     const scale = Math.max(Math.abs(pointerX - anchorX) / width || 0, Math.abs(pointerY - anchorY) / height || 0) * resizeFromCenterScale;
-    if (scale === 0) {
-        return;
-    }
-    let scaleX = direction.includes("e") || direction.includes("w")
-        ? (Math.abs(pointerX - anchorX) / width) * resizeFromCenterScale
-        : 1;
-    let scaleY = direction.includes("n") || direction.includes("s")
-        ? (Math.abs(pointerY - anchorY) / height) * resizeFromCenterScale
-        : 1;
-    const keepAspectRatio = shouldMaintainAspectRatio ||
-        targetElements.some((item) => item.latest.angle !== 0 ||
-            isTextElement(item.latest) ||
-            isInGroup(item.latest));
-    if (keepAspectRatio) {
-        scaleX = scale;
-        scaleY = scale;
+    let nextWidth = handleDirection.includes("e") || handleDirection.includes("w")
+        ? Math.abs(pointerX - anchorX) * resizeFromCenterScale
+        : width;
+    let nextHeight = handleDirection.includes("n") || handleDirection.includes("s")
+        ? Math.abs(pointerY - anchorY) * resizeFromCenterScale
+        : height;
+    if (shouldMaintainAspectRatio) {
+        nextWidth = width * scale * Math.sign(pointerX - anchorX);
+        nextHeight = height * scale * Math.sign(pointerY - anchorY);
     }
     const flipConditionsMap = {
         ne: [pointerX < anchorX, pointerY > anchorY],
@@ -499,162 +649,244 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
         n: [false, pointerY > anchorY],
         s: [false, pointerY < anchorY],
     };
-    /**
-     * to flip an element:
-     * 1. determine over which axis is the element being flipped
-     *    (could be x, y, or both) indicated by `flipFactorX` & `flipFactorY`
-     * 2. shift element's position by the amount of width or height (or both) or
-     *    mirror points in the case of linear & freedraw elemenets
-     * 3. adjust element angle
-     */
-    const [flipFactorX, flipFactorY] = flipConditionsMap[direction].map((condition) => (condition ? -1 : 1));
-    const isFlippedByX = flipFactorX < 0;
-    const isFlippedByY = flipFactorY < 0;
-    const elementsAndUpdates = [];
-    for (const { orig, latest } of targetElements) {
-        // bounded text elements are updated along with their container elements
-        if (isTextElement(orig) && isBoundToContainer(orig)) {
-            continue;
-        }
-        const width = orig.width * scaleX;
-        const height = orig.height * scaleY;
-        const angle = normalizeRadians((orig.angle * flipFactorX * flipFactorY));
-        const isLinearOrFreeDraw = isLinearElement(orig) || isFreeDrawElement(orig);
-        const offsetX = orig.x - anchorX;
-        const offsetY = orig.y - anchorY;
-        const shiftX = isFlippedByX && !isLinearOrFreeDraw ? width : 0;
-        const shiftY = isFlippedByY && !isLinearOrFreeDraw ? height : 0;
-        const x = anchorX + flipFactorX * (offsetX * scaleX + shiftX);
-        const y = anchorY + flipFactorY * (offsetY * scaleY + shiftY);
-        const rescaledPoints = rescalePointsInElement(orig, width * flipFactorX, height * flipFactorY, false);
-        const update = {
-            x,
-            y,
-            width,
-            height,
-            angle,
-            ...rescaledPoints,
-        };
-        if (isImageElement(orig)) {
-            update.scale = [orig.scale[0] * flipFactorX, orig.scale[1] * flipFactorY];
+    const [flipByX, flipByY] = flipConditionsMap[handleDirection].map((condition) => condition);
+    return {
+        originalBoundingBox,
+        nextWidth,
+        nextHeight,
+        flipByX,
+        flipByY,
+    };
+};
+export const resizeMultipleElements = (selectedElements, elementsMap, handleDirection, scene, originalElementsMap, { shouldMaintainAspectRatio = false, shouldResizeFromCenter = false, flipByX = false, flipByY = false, nextHeight, nextWidth, originalBoundingBox, } = {}) => {
+    // in the case of just flipping, there is no need to specify the next width and height
+    if (nextWidth === undefined &&
+        nextHeight === undefined &&
+        flipByX === undefined &&
+        flipByY === undefined) {
+        return;
+    }
+    // do not allow next width or height to be 0
+    if (nextHeight === 0 || nextWidth === 0) {
+        return;
+    }
+    if (!originalElementsMap) {
+        originalElementsMap = elementsMap;
+    }
+    const targetElements = selectedElements.reduce((acc, element) => {
+        const origElement = originalElementsMap.get(element.id);
+        if (origElement) {
+            acc.push({ orig: origElement, latest: element });
         }
-        if (isTextElement(orig)) {
-            const metrics = measureFontSizeFromWidth(orig, elementsMap, width);
-            if (!metrics) {
-                return;
+        return acc;
+    }, []);
+    let boundingBox;
+    if (originalBoundingBox) {
+        boundingBox = originalBoundingBox;
+    }
+    else {
+        const boundTextElements = targetElements.reduce((acc, { orig }) => {
+            if (!isLinearElement(orig)) {
+                return acc;
+            }
+            const textId = getBoundTextElementId(orig);
+            if (!textId) {
+                return acc;
+            }
+            const text = originalElementsMap.get(textId) ?? null;
+            if (!isBoundToContainer(text)) {
+                return acc;
             }
-            update.fontSize = metrics.size;
+            return [
+                ...acc,
+                {
+                    ...text,
+                    ...LinearElementEditor.getBoundTextElementPosition(orig, text, elementsMap),
+                },
+            ];
+        }, []);
+        boundingBox = getCommonBoundingBox(targetElements.map(({ orig }) => orig).concat(boundTextElements));
+    }
+    const { minX, minY, maxX, maxY, midX, midY } = boundingBox;
+    const width = maxX - minX;
+    const height = maxY - minY;
+    if (nextWidth === undefined && nextHeight === undefined) {
+        nextWidth = width;
+        nextHeight = height;
+    }
+    if (shouldMaintainAspectRatio) {
+        if (nextWidth === undefined) {
+            nextWidth = nextHeight * (width / height);
+        }
+        else if (nextHeight === undefined) {
+            nextHeight = nextWidth * (height / width);
+        }
+        else if (Math.abs(nextWidth / nextHeight - width / height) > 0.001) {
+            nextWidth = nextHeight * (width / height);
+        }
+    }
+    if (nextWidth && nextHeight) {
+        let scaleX = handleDirection.includes("e") || handleDirection.includes("w")
+            ? Math.abs(nextWidth) / width
+            : 1;
+        let scaleY = handleDirection.includes("n") || handleDirection.includes("s")
+            ? Math.abs(nextHeight) / height
+            : 1;
+        let scale;
+        if (handleDirection.length === 1) {
+            scale =
+                handleDirection.includes("e") || handleDirection.includes("w")
+                    ? scaleX
+                    : scaleY;
         }
-        const boundTextElement = originalElements.get(getBoundTextElementId(orig) ?? "");
-        if (boundTextElement) {
-            if (keepAspectRatio) {
-                const newFontSize = boundTextElement.fontSize * scale;
-                if (newFontSize < MIN_FONT_SIZE) {
+        else {
+            scale = Math.max(Math.abs(nextWidth) / width || 0, Math.abs(nextHeight) / height || 0);
+        }
+        const anchorsMap = {
+            ne: [minX, maxY],
+            se: [minX, minY],
+            sw: [maxX, minY],
+            nw: [maxX, maxY],
+            e: [minX, minY + height / 2],
+            w: [maxX, minY + height / 2],
+            n: [minX + width / 2, maxY],
+            s: [minX + width / 2, minY],
+        };
+        // anchor point must be on the opposite side of the dragged selection handle
+        // or be the center of the selection if shouldResizeFromCenter
+        const [anchorX, anchorY] = shouldResizeFromCenter
+            ? [midX, midY]
+            : anchorsMap[handleDirection];
+        const keepAspectRatio = shouldMaintainAspectRatio ||
+            targetElements.some((item) => item.latest.angle !== 0 ||
+                isTextElement(item.latest) ||
+                isInGroup(item.latest));
+        if (keepAspectRatio) {
+            scaleX = scale;
+            scaleY = scale;
+        }
+        /**
+         * to flip an element:
+         * 1. determine over which axis is the element being flipped
+         *    (could be x, y, or both) indicated by `flipFactorX` & `flipFactorY`
+         * 2. shift element's position by the amount of width or height (or both) or
+         *    mirror points in the case of linear & freedraw elemenets
+         * 3. adjust element angle
+         */
+        const [flipFactorX, flipFactorY] = [flipByX ? -1 : 1, flipByY ? -1 : 1];
+        const elementsAndUpdates = [];
+        for (const { orig, latest } of targetElements) {
+            // bounded text elements are updated along with their container elements
+            if (isTextElement(orig) && isBoundToContainer(orig)) {
+                continue;
+            }
+            const width = orig.width * scaleX;
+            const height = orig.height * scaleY;
+            const angle = normalizeRadians((orig.angle * flipFactorX * flipFactorY));
+            const isLinearOrFreeDraw = isLinearElement(orig) || isFreeDrawElement(orig);
+            const offsetX = orig.x - anchorX;
+            const offsetY = orig.y - anchorY;
+            const shiftX = flipByX && !isLinearOrFreeDraw ? width : 0;
+            const shiftY = flipByY && !isLinearOrFreeDraw ? height : 0;
+            const x = anchorX + flipFactorX * (offsetX * scaleX + shiftX);
+            const y = anchorY + flipFactorY * (offsetY * scaleY + shiftY);
+            const rescaledPoints = rescalePointsInElement(orig, width * flipFactorX, height * flipFactorY, false);
+            const update = {
+                x,
+                y,
+                width,
+                height,
+                angle,
+                ...rescaledPoints,
+            };
+            if (isElbowArrow(orig)) {
+                // Mirror fixed point binding for elbow arrows
+                // when resize goes into the negative direction
+                if (orig.startBinding) {
+                    update.startBinding = {
+                        ...orig.startBinding,
+                        fixedPoint: [
+                            flipByX
+                                ? -orig.startBinding.fixedPoint[0] + 1
+                                : orig.startBinding.fixedPoint[0],
+                            flipByY
+                                ? -orig.startBinding.fixedPoint[1] + 1
+                                : orig.startBinding.fixedPoint[1],
+                        ],
+                    };
+                }
+                if (orig.endBinding) {
+                    update.endBinding = {
+                        ...orig.endBinding,
+                        fixedPoint: [
+                            flipByX
+                                ? -orig.endBinding.fixedPoint[0] + 1
+                                : orig.endBinding.fixedPoint[0],
+                            flipByY
+                                ? -orig.endBinding.fixedPoint[1] + 1
+                                : orig.endBinding.fixedPoint[1],
+                        ],
+                    };
+                }
+                if (orig.fixedSegments && rescaledPoints.points) {
+                    update.fixedSegments = orig.fixedSegments.map((segment) => ({
+                        ...segment,
+                        start: rescaledPoints.points[segment.index - 1],
+                        end: rescaledPoints.points[segment.index],
+                    }));
+                }
+            }
+            if (isImageElement(orig)) {
+                update.scale = [
+                    orig.scale[0] * flipFactorX,
+                    orig.scale[1] * flipFactorY,
+                ];
+            }
+            if (isTextElement(orig)) {
+                const metrics = measureFontSizeFromWidth(orig, elementsMap, width);
+                if (!metrics) {
                     return;
                 }
-                update.boundTextFontSize = newFontSize;
+                update.fontSize = metrics.size;
             }
-            else {
-                update.boundTextFontSize = boundTextElement.fontSize;
+            const boundTextElement = originalElementsMap.get(getBoundTextElementId(orig) ?? "");
+            if (boundTextElement) {
+                if (keepAspectRatio) {
+                    const newFontSize = boundTextElement.fontSize * scale;
+                    if (newFontSize < MIN_FONT_SIZE) {
+                        return;
+                    }
+                    update.boundTextFontSize = newFontSize;
+                }
+                else {
+                    update.boundTextFontSize = boundTextElement.fontSize;
+                }
             }
+            elementsAndUpdates.push({
+                element: latest,
+                update,
+            });
         }
-        elementsAndUpdates.push({
-            element: latest,
-            update,
-        });
-    }
-    const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
-    for (const { element, update: { boundTextFontSize, ...update }, } of elementsAndUpdates) {
-        const { angle, width: newWidth, height: newHeight } = update;
-        mutateElement(element, update, false);
-        updateBoundElements(element, elementsMap, {
-            simultaneouslyUpdated: elementsToUpdate,
-            newSize: { width: newWidth, height: newHeight },
-        });
-        const boundTextElement = getBoundTextElement(element, elementsMap);
-        if (boundTextElement && boundTextFontSize) {
-            mutateElement(boundTextElement, {
-                fontSize: boundTextFontSize,
-                angle: isLinearElement(element) ? undefined : angle,
-            }, false);
-            handleBindTextResize(element, elementsMap, transformHandleType, true);
+        const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
+        for (const { element, update: { boundTextFontSize, ...update }, } of elementsAndUpdates) {
+            const { width, height, angle } = update;
+            mutateElement(element, update, false, {
+                // needed for the fixed binding point udpate to take effect
+                isDragging: true,
+            });
+            updateBoundElements(element, elementsMap, {
+                simultaneouslyUpdated: elementsToUpdate,
+                newSize: { width, height },
+            });
+            const boundTextElement = getBoundTextElement(element, elementsMap);
+            if (boundTextElement && boundTextFontSize) {
+                mutateElement(boundTextElement, {
+                    fontSize: boundTextFontSize,
+                    angle: isLinearElement(element) ? undefined : angle,
+                }, false);
+                handleBindTextResize(element, elementsMap, handleDirection, true);
+            }
         }
+        scene.triggerUpdate();
     }
-    Scene.getScene(elementsAndUpdates[0].element)?.triggerUpdate();
-};
-const rotateMultipleElements = (originalElements, elements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY) => {
-    let centerAngle = (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
-    if (shouldRotateWithDiscreteAngle) {
-        centerAngle += SHIFT_LOCKING_ANGLE / 2;
-        centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
-    }
-    elements
-        .filter((element) => !isFrameLikeElement(element))
-        .forEach((element) => {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-        const cx = (x1 + x2) / 2;
-        const cy = (y1 + y2) / 2;
-        const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
-        const [rotatedCX, rotatedCY] = pointRotateRads(pointFrom(cx, cy), pointFrom(centerX, centerY), (centerAngle + origAngle - element.angle));
-        if (isElbowArrow(element)) {
-            const points = getArrowLocalFixedPoints(element, elementsMap);
-            mutateElbowArrow(element, elementsMap, points);
-        }
-        else {
-            mutateElement(element, {
-                x: element.x + (rotatedCX - cx),
-                y: element.y + (rotatedCY - cy),
-                angle: normalizeRadians((centerAngle + origAngle)),
-            }, false);
-        }
-        updateBoundElements(element, elementsMap, {
-            simultaneouslyUpdated: elements,
-        });
-        const boundText = getBoundTextElement(element, elementsMap);
-        if (boundText && !isArrowElement(element)) {
-            mutateElement(boundText, {
-                x: boundText.x + (rotatedCX - cx),
-                y: boundText.y + (rotatedCY - cy),
-                angle: normalizeRadians((centerAngle + origAngle)),
-            }, false);
-        }
-    });
-    Scene.getScene(elements[0])?.triggerUpdate();
-};
-export const getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x, y) => {
-    const [x1, y1, x2, y2] = selectedElements.length === 1
-        ? getElementAbsoluteCoords(selectedElements[0], elementsMap)
-        : getCommonBounds(selectedElements);
-    const cx = (x1 + x2) / 2;
-    const cy = (y1 + y2) / 2;
-    const angle = (selectedElements.length === 1 ? selectedElements[0].angle : 0);
-    [x, y] = pointRotateRads(pointFrom(x, y), pointFrom(cx, cy), -angle);
-    switch (transformHandleType) {
-        case "n":
-            return pointRotateRads(pointFrom(x - (x1 + x2) / 2, y - y1), pointFrom(0, 0), angle);
-        case "s":
-            return pointRotateRads(pointFrom(x - (x1 + x2) / 2, y - y2), pointFrom(0, 0), angle);
-        case "w":
-            return pointRotateRads(pointFrom(x - x1, y - (y1 + y2) / 2), pointFrom(0, 0), angle);
-        case "e":
-            return pointRotateRads(pointFrom(x - x2, y - (y1 + y2) / 2), pointFrom(0, 0), angle);
-        case "nw":
-            return pointRotateRads(pointFrom(x - x1, y - y1), pointFrom(0, 0), angle);
-        case "ne":
-            return pointRotateRads(pointFrom(x - x2, y - y1), pointFrom(0, 0), angle);
-        case "sw":
-            return pointRotateRads(pointFrom(x - x1, y - y2), pointFrom(0, 0), angle);
-        case "se":
-            return pointRotateRads(pointFrom(x - x2, y - y2), pointFrom(0, 0), angle);
-        default:
-            return [0, 0];
-    }
-};
-export const getResizeArrowDirection = (transformHandleType, element) => {
-    const [, [px, py]] = element.points;
-    const isResizeEnd = (transformHandleType === "nw" && (px < 0 || py < 0)) ||
-        (transformHandleType === "ne" && px >= 0) ||
-        (transformHandleType === "sw" && px <= 0) ||
-        (transformHandleType === "se" && (px > 0 || py > 0));
-    return isResizeEnd ? "end" : "origin";
 };