@dwelle/excalidraw 0.5.0-3bc80da → 0.5.0-3f1f8dd

package/dist/excalidraw/element/newElement.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement, ElementsMap } from "./types";
-import { AppState } from "../types";
-import { MarkOptional, Mutable } from "../utility-types";
+import type { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement, ElementsMap } from "./types";
+import type { AppState } from "../types";
+import type { MarkOptional, Mutable } from "../utility-types";
 export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "index" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity" | "customData">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
@@ -19,6 +19,7 @@ export declare const newMagicFrameElement: (opts: {
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawMagicFrameElement>;
 export declare const newTextElement: (opts: {
     text: string;
+    originalText?: string;
     fontSize?: number;
     fontFamily?: FontFamilyValues;
     textAlign?: TextAlign;
@@ -26,6 +27,7 @@ export declare const newTextElement: (opts: {
     containerId?: ExcalidrawTextContainer["id"] | null;
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
+    autoResize?: ExcalidrawTextElement["autoResize"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, container: ExcalidrawTextContainer | null, elementsMap: ElementsMap, text?: string) => {
     x: number;
@@ -34,11 +36,6 @@ export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement,
     height: number;
     text: string;
 } | undefined;
-export declare const updateTextElement: (textElement: ExcalidrawTextElement, container: ExcalidrawTextContainer | null, elementsMap: ElementsMap, { text, isDeleted, originalText, }: {
-    text: string;
-    isDeleted?: boolean | undefined;
-    originalText: string;
-}) => ExcalidrawTextElement;
 export declare const newFreeDrawElement: (opts: {
     type: "freedraw";
     points?: ExcalidrawFreeDrawElement["points"];

package/dist/excalidraw/element/newElement.js

@@ -85,7 +85,7 @@ export const newTextElement = (opts) => {
     const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
     const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
     const offsets = getTextElementPositionOffsets({ textAlign, verticalAlign }, metrics);
-    const textElement = newElementWith({
+    const textElementProps = {
         ..._newElementBase("text", opts),
         text,
         fontSize,
@@ -97,19 +97,26 @@ export const newTextElement = (opts) => {
         width: metrics.width,
         height: metrics.height,
         containerId: opts.containerId || null,
-        originalText: text,
+        originalText: opts.originalText ?? text,
+        autoResize: opts.autoResize ?? true,
         lineHeight,
-    }, {});
+    };
+    const textElement = newElementWith(textElementProps, {});
     return textElement;
 };
 const getAdjustedDimensions = (element, elementsMap, nextText) => {
-    const { width: nextWidth, height: nextHeight } = measureText(nextText, getFontString(element), element.lineHeight);
+    let { width: nextWidth, height: nextHeight } = measureText(nextText, getFontString(element), element.lineHeight);
+    // wrapped text
+    if (!element.autoResize) {
+        nextWidth = element.width;
+    }
     const { textAlign, verticalAlign } = element;
     let x;
     let y;
     if (textAlign === "center" &&
         verticalAlign === VERTICAL_ALIGN.MIDDLE &&
-        !element.containerId) {
+        !element.containerId &&
+        element.autoResize) {
         const prevMetrics = measureText(element.text, getFontString(element), element.lineHeight);
         const offsets = getTextElementPositionOffsets(element, {
             width: nextWidth - prevMetrics.width,
@@ -142,19 +149,14 @@ export const refreshTextDimensions = (textElement, container, elementsMap, text
     if (textElement.isDeleted) {
         return;
     }
-    if (container) {
-        text = wrapText(text, getFontString(textElement), getBoundTextMaxWidth(container, textElement));
+    if (container || !textElement.autoResize) {
+        text = wrapText(text, getFontString(textElement), container
+            ? getBoundTextMaxWidth(container, textElement)
+            : textElement.width);
     }
     const dimensions = getAdjustedDimensions(textElement, elementsMap, text);
     return { text, ...dimensions };
 };
-export const updateTextElement = (textElement, container, elementsMap, { text, isDeleted, originalText, }) => {
-    return newElementWith(textElement, {
-        originalText,
-        isDeleted: isDeleted ?? textElement.isDeleted,
-        ...refreshTextDimensions(textElement, container, elementsMap, originalText),
-    });
-};
 export const newFreeDrawElement = (opts) => {
     return {
         ..._newElementBase(opts.type, opts),

package/dist/excalidraw/element/resizeElements.d.ts

@@ -1,9 +1,9 @@
-import { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, ElementsMap } from "./types";
-import { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
-import { PointerDownState } from "../types";
+import type { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, ElementsMap } from "./types";
+import type { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
+import type { PointerDownState } from "../types";
 export declare const normalizeAngle: (angle: number) => number;
 export declare const transformElements: (originalElements: PointerDownState["originalElements"], transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
 export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
-export declare const resizeMultipleElements: (originalElements: PointerDownState["originalElements"], selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, transformHandleType: "nw" | "ne" | "sw" | "se", shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
+export declare const resizeMultipleElements: (originalElements: PointerDownState["originalElements"], selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, transformHandleType: TransformHandleDirection, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number) => void;
 export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap, x: number, y: number) => [number, number];
 export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<ExcalidrawLinearElement>) => "origin" | "end";

package/dist/excalidraw/element/resizeElements.js

@@ -1,14 +1,15 @@
 import { MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";
-import { rotate, adjustXYWithRotation, centerPoint, rotatePoint, } from "../math";
-import { getElementAbsoluteCoords, getCommonBounds, getResizedElementAbsoluteCoords, getCommonBoundingBox, getElementPointsCoords, } from "./bounds";
+import { rotate, centerPoint, rotatePoint } from "../math";
+import { getElementAbsoluteCoords, getCommonBounds, getResizedElementAbsoluteCoords, getCommonBoundingBox, } from "./bounds";
 import { isArrowElement, isBoundToContainer, isFrameLikeElement, isFreeDrawElement, isImageElement, isLinearElement, isTextElement, } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getFontString } from "../utils";
 import { updateBoundElements } from "./binding";
 import Scene from "../scene/Scene";
-import { getApproxMinLineWidth, getBoundTextElement, getBoundTextElementId, getContainerElement, handleBindTextResize, getBoundTextMaxWidth, getApproxMinLineHeight, } from "./textElement";
+import { getApproxMinLineWidth, getBoundTextElement, getBoundTextElementId, getContainerElement, handleBindTextResize, getBoundTextMaxWidth, getApproxMinLineHeight, wrapText, measureText, getMinTextElementWidth, } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
+import { isInGroup } from "../groups";
 export const normalizeAngle = (angle) => {
     if (angle < 0) {
         return angle + 2 * Math.PI;
@@ -26,12 +27,8 @@ export const transformElements = (originalElements, transformHandleType, selecte
             rotateSingleElement(element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle);
             updateBoundElements(element, elementsMap);
         }
-        else if (isTextElement(element) &&
-            (transformHandleType === "nw" ||
-                transformHandleType === "ne" ||
-                transformHandleType === "sw" ||
-                transformHandleType === "se")) {
-            resizeSingleTextElement(element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
+        else if (isTextElement(element) && transformHandleType) {
+            resizeSingleTextElement(originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
             updateBoundElements(element, elementsMap);
         }
         else if (transformHandleType) {
@@ -44,11 +41,8 @@ export const transformElements = (originalElements, transformHandleType, selecte
             rotateMultipleElements(originalElements, selectedElements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY);
             return true;
         }
-        else if (transformHandleType === "nw" ||
-            transformHandleType === "ne" ||
-            transformHandleType === "sw" ||
-            transformHandleType === "se") {
-            resizeMultipleElements(originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
+        else if (transformHandleType) {
+            resizeMultipleElements(originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY);
             return true;
         }
     }
@@ -102,39 +96,27 @@ const measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {
         size: nextFontSize,
     };
 };
-const getSidesForTransformHandle = (transformHandleType, shouldResizeFromCenter) => {
-    return {
-        n: /^(n|ne|nw)$/.test(transformHandleType) ||
-            (shouldResizeFromCenter && /^(s|se|sw)$/.test(transformHandleType)),
-        s: /^(s|se|sw)$/.test(transformHandleType) ||
-            (shouldResizeFromCenter && /^(n|ne|nw)$/.test(transformHandleType)),
-        w: /^(w|nw|sw)$/.test(transformHandleType) ||
-            (shouldResizeFromCenter && /^(e|ne|se)$/.test(transformHandleType)),
-        e: /^(e|ne|se)$/.test(transformHandleType) ||
-            (shouldResizeFromCenter && /^(w|nw|sw)$/.test(transformHandleType)),
-    };
-};
-const resizeSingleTextElement = (element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-    const cx = (x1 + x2) / 2;
-    const cy = (y1 + y2) / 2;
+const resizeSingleTextElement = (originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {
+    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap);
     // rotation pointer with reverse angle
     const [rotatedX, rotatedY] = rotate(pointerX, pointerY, cx, cy, -element.angle);
-    let scale;
-    switch (transformHandleType) {
-        case "se":
-            scale = Math.max((rotatedX - x1) / (x2 - x1), (rotatedY - y1) / (y2 - y1));
-            break;
-        case "nw":
-            scale = Math.max((x2 - rotatedX) / (x2 - x1), (y2 - rotatedY) / (y2 - y1));
-            break;
-        case "ne":
-            scale = Math.max((rotatedX - x1) / (x2 - x1), (y2 - rotatedY) / (y2 - y1));
-            break;
-        case "sw":
-            scale = Math.max((x2 - rotatedX) / (x2 - x1), (rotatedY - y1) / (y2 - y1));
-            break;
+    let scaleX = 0;
+    let scaleY = 0;
+    if (transformHandleType !== "e" && transformHandleType !== "w") {
+        if (transformHandleType.includes("e")) {
+            scaleX = (rotatedX - x1) / (x2 - x1);
+        }
+        if (transformHandleType.includes("w")) {
+            scaleX = (x2 - rotatedX) / (x2 - x1);
+        }
+        if (transformHandleType.includes("n")) {
+            scaleY = (y2 - rotatedY) / (y2 - y1);
+        }
+        if (transformHandleType.includes("s")) {
+            scaleY = (rotatedY - y1) / (y2 - y1);
+        }
     }
+    const scale = Math.max(scaleX, scaleY);
     if (scale > 0) {
         const nextWidth = element.width * scale;
         const nextHeight = element.height * scale;
@@ -142,20 +124,105 @@ const resizeSingleTextElement = (element, elementsMap, transformHandleType, shou
         if (metrics === null) {
             return;
         }
-        const [nextX1, nextY1, nextX2, nextY2] = getResizedElementAbsoluteCoords(element, nextWidth, nextHeight, false);
-        const deltaX1 = (x1 - nextX1) / 2;
-        const deltaY1 = (y1 - nextY1) / 2;
-        const deltaX2 = (x2 - nextX2) / 2;
-        const deltaY2 = (y2 - nextY2) / 2;
-        const [nextElementX, nextElementY] = adjustXYWithRotation(getSidesForTransformHandle(transformHandleType, shouldResizeFromCenter), element.x, element.y, element.angle, deltaX1, deltaY1, deltaX2, deltaY2);
+        const startTopLeft = [x1, y1];
+        const startBottomRight = [x2, y2];
+        const startCenter = [cx, cy];
+        let newTopLeft = [x1, y1];
+        if (["n", "w", "nw"].includes(transformHandleType)) {
+            newTopLeft = [
+                startBottomRight[0] - Math.abs(nextWidth),
+                startBottomRight[1] - Math.abs(nextHeight),
+            ];
+        }
+        if (transformHandleType === "ne") {
+            const bottomLeft = [startTopLeft[0], startBottomRight[1]];
+            newTopLeft = [bottomLeft[0], bottomLeft[1] - Math.abs(nextHeight)];
+        }
+        if (transformHandleType === "sw") {
+            const topRight = [startBottomRight[0], startTopLeft[1]];
+            newTopLeft = [topRight[0] - Math.abs(nextWidth), topRight[1]];
+        }
+        if (["s", "n"].includes(transformHandleType)) {
+            newTopLeft[0] = startCenter[0] - nextWidth / 2;
+        }
+        if (["e", "w"].includes(transformHandleType)) {
+            newTopLeft[1] = startCenter[1] - nextHeight / 2;
+        }
+        if (shouldResizeFromCenter) {
+            newTopLeft[0] = startCenter[0] - Math.abs(nextWidth) / 2;
+            newTopLeft[1] = startCenter[1] - Math.abs(nextHeight) / 2;
+        }
+        const angle = element.angle;
+        const rotatedTopLeft = rotatePoint(newTopLeft, [cx, cy], angle);
+        const newCenter = [
+            newTopLeft[0] + Math.abs(nextWidth) / 2,
+            newTopLeft[1] + Math.abs(nextHeight) / 2,
+        ];
+        const rotatedNewCenter = rotatePoint(newCenter, [cx, cy], angle);
+        newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle);
+        const [nextX, nextY] = newTopLeft;
         mutateElement(element, {
             fontSize: metrics.size,
             width: nextWidth,
             height: nextHeight,
-            x: nextElementX,
-            y: nextElementY,
+            x: nextX,
+            y: nextY,
         });
     }
+    if (transformHandleType === "e" || transformHandleType === "w") {
+        const stateAtResizeStart = originalElements.get(element.id);
+        const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);
+        const startTopLeft = [x1, y1];
+        const startBottomRight = [x2, y2];
+        const startCenter = centerPoint(startTopLeft, startBottomRight);
+        const rotatedPointer = rotatePoint([pointerX, pointerY], startCenter, -stateAtResizeStart.angle);
+        const [esx1, , esx2] = getResizedElementAbsoluteCoords(element, element.width, element.height, true);
+        const boundsCurrentWidth = esx2 - esx1;
+        const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];
+        const minWidth = getMinTextElementWidth(getFontString({
+            fontSize: element.fontSize,
+            fontFamily: element.fontFamily,
+        }), element.lineHeight);
+        let scaleX = atStartBoundsWidth / boundsCurrentWidth;
+        if (transformHandleType.includes("e")) {
+            scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
+        }
+        if (transformHandleType.includes("w")) {
+            scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;
+        }
+        const newWidth = element.width * scaleX < minWidth ? minWidth : element.width * scaleX;
+        const text = wrapText(element.originalText, getFontString(element), Math.abs(newWidth));
+        const metrics = measureText(text, getFontString(element), element.lineHeight);
+        const eleNewHeight = metrics.height;
+        const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = getResizedElementAbsoluteCoords(stateAtResizeStart, newWidth, eleNewHeight, true);
+        const newBoundsWidth = newBoundsX2 - newBoundsX1;
+        const newBoundsHeight = newBoundsY2 - newBoundsY1;
+        let newTopLeft = [...startTopLeft];
+        if (["n", "w", "nw"].includes(transformHandleType)) {
+            newTopLeft = [
+                startBottomRight[0] - Math.abs(newBoundsWidth),
+                startTopLeft[1],
+            ];
+        }
+        // adjust topLeft to new rotation point
+        const angle = stateAtResizeStart.angle;
+        const rotatedTopLeft = rotatePoint(newTopLeft, startCenter, angle);
+        const newCenter = [
+            newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
+            newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
+        ];
+        const rotatedNewCenter = rotatePoint(newCenter, startCenter, angle);
+        newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle);
+        const resizedElement = {
+            width: Math.abs(newWidth),
+            height: Math.abs(metrics.height),
+            x: newTopLeft[0],
+            y: newTopLeft[1],
+            text,
+            autoResize: false,
+        };
+        mutateElement(element, resizedElement);
+    }
 };
 export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleDirection, shouldResizeFromCenter, pointerX, pointerY) => {
     const stateAtResizeStart = originalElements.get(element.id);
@@ -364,7 +431,7 @@ export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio,
         handleBindTextResize(element, elementsMap, transformHandleDirection, shouldMaintainAspectRatio);
     }
 };
-export const resizeMultipleElements = (originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {
+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
@@ -396,29 +463,54 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
         return [...acc, { ...text, ...xy }];
     }, []);
     const { minX, minY, maxX, maxY, midX, midY } = getCommonBoundingBox(targetElements.map(({ orig }) => orig).concat(boundTextElements));
-    // const originalHeight = maxY - minY;
-    // const originalWidth = maxX - minX;
+    const width = maxX - minX;
+    const height = maxY - minY;
     const direction = transformHandleType;
-    const mapDirectionsToAnchors = {
+    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]
-        : mapDirectionsToAnchors[direction];
-    const scale = Math.max(Math.abs(pointerX - anchorX) / (maxX - minX) || 0, Math.abs(pointerY - anchorY) / (maxY - minY) || 0) * (shouldResizeFromCenter ? 2 : 1);
+        : anchorsMap[direction];
+    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;
     }
-    const mapDirectionsToPointerPositions = {
-        ne: [pointerX >= anchorX, pointerY <= anchorY],
-        se: [pointerX >= anchorX, pointerY >= anchorY],
-        sw: [pointerX <= anchorX, pointerY >= anchorY],
-        nw: [pointerX <= anchorX, pointerY <= anchorY],
+    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;
+    }
+    const flipConditionsMap = {
+        ne: [pointerX < anchorX, pointerY > anchorY],
+        se: [pointerX < anchorX, pointerY < anchorY],
+        sw: [pointerX > anchorX, pointerY < anchorY],
+        nw: [pointerX > anchorX, pointerY > anchorY],
+        // e.g. when resizing from the "e" side, we do not need to consider changes in the `y` direction
+        //      and therefore, we do not need to flip in the `y` direction at all
+        e: [pointerX < anchorX, false],
+        w: [pointerX > anchorX, false],
+        n: [false, pointerY > anchorY],
+        s: [false, pointerY < anchorY],
     };
     /**
      * to flip an element:
@@ -428,7 +520,7 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
      *    mirror points in the case of linear & freedraw elemenets
      * 3. adjust element angle
      */
-    const [flipFactorX, flipFactorY] = mapDirectionsToPointerPositions[direction].map((condition) => (condition ? 1 : -1));
+    const [flipFactorX, flipFactorY] = flipConditionsMap[direction].map((condition) => (condition ? -1 : 1));
     const isFlippedByX = flipFactorX < 0;
     const isFlippedByY = flipFactorY < 0;
     const elementsAndUpdates = [];
@@ -437,16 +529,16 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
         if (isTextElement(orig) && isBoundToContainer(orig)) {
             continue;
         }
-        const width = orig.width * scale;
-        const height = orig.height * scale;
+        const width = orig.width * scaleX;
+        const height = orig.height * scaleY;
         const angle = normalizeAngle(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 * scale + shiftX);
-        const y = anchorY + flipFactorY * (offsetY * scale + shiftY);
+        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,
@@ -456,30 +548,9 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
             angle,
             ...rescaledPoints,
         };
-        if (isImageElement(orig) && targetElements.length === 1) {
+        if (isImageElement(orig)) {
             update.scale = [orig.scale[0] * flipFactorX, orig.scale[1] * flipFactorY];
         }
-        if (isLinearElement(orig) && (isFlippedByX || isFlippedByY)) {
-            const origBounds = getElementPointsCoords(orig, orig.points);
-            const newBounds = getElementPointsCoords({ ...orig, x, y }, rescaledPoints.points);
-            const origXY = [orig.x, orig.y];
-            const newXY = [x, y];
-            const linearShift = (axis) => {
-                const i = axis === "x" ? 0 : 1;
-                return ((newBounds[i + 2] -
-                    newXY[i] -
-                    (origXY[i] - origBounds[i]) * scale +
-                    (origBounds[i + 2] - origXY[i]) * scale -
-                    (newXY[i] - newBounds[i])) /
-                    2);
-            };
-            if (isFlippedByX) {
-                update.x -= linearShift("x");
-            }
-            if (isFlippedByY) {
-                update.y -= linearShift("y");
-            }
-        }
         if (isTextElement(orig)) {
             const metrics = measureFontSizeFromWidth(orig, elementsMap, width);
             if (!metrics) {
@@ -489,11 +560,16 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
         }
         const boundTextElement = originalElements.get(getBoundTextElementId(orig) ?? "");
         if (boundTextElement) {
-            const newFontSize = boundTextElement.fontSize * scale;
-            if (newFontSize < MIN_FONT_SIZE) {
-                return;
+            if (keepAspectRatio) {
+                const newFontSize = boundTextElement.fontSize * scale;
+                if (newFontSize < MIN_FONT_SIZE) {
+                    return;
+                }
+                update.boundTextFontSize = newFontSize;
+            }
+            else {
+                update.boundTextFontSize = boundTextElement.fontSize;
             }
-            update.boundTextFontSize = newFontSize;
         }
         elementsAndUpdates.push({
             element: latest,
@@ -517,7 +593,7 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
             handleBindTextResize(element, elementsMap, transformHandleType, true);
         }
     }
-    Scene.getScene(elementsAndUpdates[0].element)?.informMutation();
+    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);
@@ -550,7 +626,7 @@ const rotateMultipleElements = (originalElements, elements, elementsMap, pointer
             }, false);
         }
     });
-    Scene.getScene(elements[0])?.informMutation();
+    Scene.getScene(elements[0])?.triggerUpdate();
 };
 export const getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x, y) => {
     const [x1, y1, x2, y2] = selectedElements.length === 1

package/dist/excalidraw/element/resizeTest.d.ts

@@ -1,13 +1,13 @@
-import { ExcalidrawElement, PointerType, NonDeletedExcalidrawElement, ElementsMap } from "./types";
-import { MaybeTransformHandleType } from "./transformHandles";
-import { AppState, Zoom } from "../types";
-import { Bounds } from "./bounds";
-export declare const resizeTest: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, x: number, y: number, zoom: Zoom, pointerType: PointerType) => MaybeTransformHandleType;
-export declare const getElementWithTransformHandleType: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType, elementsMap: ElementsMap) => {
+import type { ExcalidrawElement, PointerType, NonDeletedExcalidrawElement, ElementsMap } from "./types";
+import type { MaybeTransformHandleType } from "./transformHandles";
+import type { AppState, Device, Zoom } from "../types";
+import type { Bounds } from "./bounds";
+export declare const resizeTest: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, x: number, y: number, zoom: Zoom, pointerType: PointerType, device: Device) => MaybeTransformHandleType;
+export declare const getElementWithTransformHandleType: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType, elementsMap: ElementsMap, device: Device) => {
     element: NonDeletedExcalidrawElement;
     transformHandleType: MaybeTransformHandleType;
 } | null;
-export declare const getTransformHandleTypeFromCoords: ([x1, y1, x2, y2]: Bounds, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType) => MaybeTransformHandleType;
+export declare const getTransformHandleTypeFromCoords: ([x1, y1, x2, y2]: Bounds, scenePointerX: number, scenePointerY: number, zoom: Zoom, pointerType: PointerType, device: Device) => MaybeTransformHandleType;
 export declare const getCursorForResizingElement: (resizingElement: {
     element?: ExcalidrawElement;
     transformHandleType: MaybeTransformHandleType;

package/dist/excalidraw/element/resizeTest.js

@@ -1,13 +1,17 @@
-import { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
+import { getTransformHandlesFromCoords, getTransformHandles, getOmitSidesForDevice, canResizeFromSides, } from "./transformHandles";
+import { getElementAbsoluteCoords } from "./bounds";
+import { SIDE_RESIZING_THRESHOLD } from "../constants";
+import { angleToDegrees, pointOnLine, pointRotate, } from "../../utils/geometry/geometry";
+import { isLinearElement } from "./typeChecks";
 const isInsideTransformHandle = (transformHandle, x, y) => x >= transformHandle[0] &&
     x <= transformHandle[0] + transformHandle[2] &&
     y >= transformHandle[1] &&
     y <= transformHandle[1] + transformHandle[3];
-export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType) => {
+export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, device) => {
     if (!appState.selectedElementIds[element.id]) {
         return false;
     }
-    const { rotation: rotationTransformHandle, ...transformHandles } = getTransformHandles(element, zoom, elementsMap, pointerType);
+    const { rotation: rotationTransformHandle, ...transformHandles } = getTransformHandles(element, zoom, elementsMap, pointerType, getOmitSidesForDevice(device));
     if (rotationTransformHandle &&
         isInsideTransformHandle(rotationTransformHandle, x, y)) {
         return "rotation";
@@ -22,25 +26,54 @@ export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerTy
     if (filter.length > 0) {
         return filter[0];
     }
+    if (canResizeFromSides(device)) {
+        const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap);
+        // do not resize from the sides for linear elements with only two points
+        if (!(isLinearElement(element) && element.points.length <= 2)) {
+            const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
+            const sides = getSelectionBorders([x1 - SPACING, y1 - SPACING], [x2 + SPACING, y2 + SPACING], [cx, cy], angleToDegrees(element.angle));
+            for (const [dir, side] of Object.entries(sides)) {
+                // test to see if x, y are on the line segment
+                if (pointOnLine([x, y], side, SPACING)) {
+                    return dir;
+                }
+            }
+        }
+    }
     return false;
 };
-export const getElementWithTransformHandleType = (elements, appState, scenePointerX, scenePointerY, zoom, pointerType, elementsMap) => {
+export const getElementWithTransformHandleType = (elements, appState, scenePointerX, scenePointerY, zoom, pointerType, elementsMap, device) => {
     return elements.reduce((result, element) => {
         if (result) {
             return result;
         }
-        const transformHandleType = resizeTest(element, elementsMap, appState, scenePointerX, scenePointerY, zoom, pointerType);
+        const transformHandleType = resizeTest(element, elementsMap, appState, scenePointerX, scenePointerY, zoom, pointerType, device);
         return transformHandleType ? { element, transformHandleType } : null;
     }, null);
 };
-export const getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePointerY, zoom, pointerType) => {
-    const transformHandles = getTransformHandlesFromCoords([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, zoom, pointerType, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);
+export const getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePointerY, zoom, pointerType, device) => {
+    const transformHandles = getTransformHandlesFromCoords([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, zoom, pointerType, getOmitSidesForDevice(device));
     const found = Object.keys(transformHandles).find((key) => {
         const transformHandle = transformHandles[key];
         return (transformHandle &&
             isInsideTransformHandle(transformHandle, scenePointerX, scenePointerY));
     });
-    return (found || false);
+    if (found) {
+        return found;
+    }
+    if (canResizeFromSides(device)) {
+        const cx = (x1 + x2) / 2;
+        const cy = (y1 + y2) / 2;
+        const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
+        const sides = getSelectionBorders([x1 - SPACING, y1 - SPACING], [x2 + SPACING, y2 + SPACING], [cx, cy], angleToDegrees(0));
+        for (const [dir, side] of Object.entries(sides)) {
+            // test to see if x, y are on the line segment
+            if (pointOnLine([scenePointerX, scenePointerY], side, SPACING)) {
+                return dir;
+            }
+        }
+    }
+    return false;
 };
 const RESIZE_CURSORS = ["ns", "nesw", "ew", "nwse"];
 const rotateResizeCursor = (cursor, angle) => {
@@ -93,3 +126,15 @@ export const getCursorForResizingElement = (resizingElement) => {
     }
     return cursor ? `${cursor}-resize` : "";
 };
+const getSelectionBorders = ([x1, y1], [x2, y2], center, angleInDegrees) => {
+    const topLeft = pointRotate([x1, y1], angleInDegrees, center);
+    const topRight = pointRotate([x2, y1], angleInDegrees, center);
+    const bottomLeft = pointRotate([x1, y2], angleInDegrees, center);
+    const bottomRight = pointRotate([x2, y2], angleInDegrees, center);
+    return {
+        n: [topLeft, topRight],
+        e: [topRight, bottomRight],
+        s: [bottomRight, bottomLeft],
+        w: [bottomLeft, topLeft],
+    };
+};

package/dist/excalidraw/element/showSelectedShapeActions.d.ts

@@ -1,3 +1,3 @@
-import { NonDeletedExcalidrawElement } from "./types";
-import { UIAppState } from "../types";
+import type { NonDeletedExcalidrawElement } from "./types";
+import type { UIAppState } from "../types";
 export declare const showSelectedShapeActions: (appState: UIAppState, elements: readonly NonDeletedExcalidrawElement[]) => boolean;

package/dist/excalidraw/element/sizeHelpers.d.ts

@@ -1,5 +1,5 @@
-import { ElementsMap, ExcalidrawElement } from "./types";
-import { AppState, Zoom } from "../types";
+import type { ElementsMap, ExcalidrawElement } from "./types";
+import type { AppState, Zoom } from "../types";
 export declare const isInvisiblySmallElement: (element: ExcalidrawElement) => boolean;
 export declare const isElementInViewport: (element: ExcalidrawElement, width: number, height: number, viewTransformations: {
     zoom: Zoom;