@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-1ed53b1

package/dist/excalidraw/element/resizeElements.js

@@ -1,7 +1,7 @@
 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";
@@ -9,6 +9,7 @@ import { updateBoundElements } from "./binding";
 import Scene from "../scene/Scene";
 import { getApproxMinLineWidth, getBoundTextElement, getBoundTextElementId, getContainerElement, handleBindTextResize, getBoundTextMaxWidth, getApproxMinLineHeight, } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
+import { isInGroup } from "../groups";
 export const normalizeAngle = (angle) => {
     if (angle < 0) {
         return angle + 2 * Math.PI;
@@ -44,11 +45,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 +100,25 @@ 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 [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.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,18 +126,49 @@ 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,
         });
     }
 };
@@ -364,7 +379,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 +411,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 +468,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 +477,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 +496,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 +508,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,

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,56 @@ 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);
+        // Note that for a text element, when "resized" from the side
+        // we should make it wrap/unwrap
+        if (element.type !== "text" &&
+            !(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 +128,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;

package/dist/excalidraw/element/sizeHelpers.js

@@ -3,6 +3,9 @@ import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
 import { getElementBounds } from "./bounds";
 import { viewportCoordsToSceneCoords } from "../utils";
+// TODO:  remove invisible elements consistently actions, so that invisible elements are not recorded by the store, exported, broadcasted or persisted
+//        - perhaps could be as part of a standalone 'cleanup' action, in addition to 'finalize'
+//        - could also be part of `_clearElements`
 export const isInvisiblySmallElement = (element) => {
     if (isLinearElement(element) || isFreeDrawElement(element)) {
         return element.points.length < 2;

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

@@ -1,2 +1,2 @@
-import { ExcalidrawElement } from "./types";
+import type { ExcalidrawElement } from "./types";
 export declare const normalizeElementOrder: (elements: readonly ExcalidrawElement[]) => readonly ExcalidrawElement[];

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

@@ -1,9 +1,9 @@
-import { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
-import { MaybeTransformHandleType } from "./transformHandles";
-import { AppState } from "../types";
-import { ExtractSetType, MakeBrand } from "../utility-types";
+import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
+import type { MaybeTransformHandleType } from "./transformHandles";
+import type { AppState } from "../types";
+import type { ExtractSetType, MakeBrand } from "../utility-types";
 export declare const normalizeText: (text: string) => string;
-export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap) => void;
+export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap, informMutation?: boolean) => void;
 export declare const bindTextToShapeAfterDuplication: (newElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare const handleBindTextResize: (container: NonDeletedExcalidrawElement, elementsMap: ElementsMap, transformHandleType: MaybeTransformHandleType, shouldMaintainAspectRatio?: boolean) => void;
 export declare const computeBoundTextPosition: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer, elementsMap: ElementsMap) => {
@@ -61,7 +61,6 @@ export declare const getBoundTextElementPosition: (container: ExcalidrawElement,
 } | undefined;
 export declare const shouldAllowVerticalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
 export declare const suppportsHorizontalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
-export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number, elementsMap: ElementsMap) => ExcalidrawTextContainer | null;
 declare const VALID_CONTAINER_TYPES: Set<string>;
 export declare const isValidTextContainer: (element: {
     type: ExcalidrawElementType;

package/dist/excalidraw/element/textElement.js

@@ -4,10 +4,6 @@ import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, B
 import { isTextElement } from ".";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
-import { isTextBindableContainer } from "./typeChecks";
-import { getElementAbsoluteCoords } from ".";
-import { getSelectedElements } from "../scene";
-import { isHittingElementNotConsideringBoundingBox } from "./collision";
 import { resetOriginalContainerCache, updateOriginalContainerCache, } from "./containerCache";
 export const normalizeText = (text) => {
     return (normalizeEOL(text)
@@ -17,7 +13,7 @@ export const normalizeText = (text) => {
 const splitIntoLines = (text) => {
     return normalizeText(text).split("\n");
 };
-export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
+export const redrawTextBoundingBox = (textElement, container, elementsMap, informMutation = true) => {
     let maxWidth = undefined;
     const boundTextUpdates = {
         x: textElement.x,
@@ -25,6 +21,7 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
         text: textElement.text,
         width: textElement.width,
         height: textElement.height,
+        angle: container?.angle ?? textElement.angle,
     };
     boundTextUpdates.text = textElement.text;
     if (container) {
@@ -39,12 +36,12 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
         const maxContainerWidth = getBoundTextMaxWidth(container, textElement);
         if (!isArrowElement(container) && metrics.height > maxContainerHeight) {
             const nextHeight = computeContainerDimensionForBoundText(metrics.height, container.type);
-            mutateElement(container, { height: nextHeight });
+            mutateElement(container, { height: nextHeight }, informMutation);
             updateOriginalContainerCache(container.id, nextHeight);
         }
         if (metrics.width > maxContainerWidth) {
             const nextWidth = computeContainerDimensionForBoundText(metrics.width, container.type);
-            mutateElement(container, { width: nextWidth });
+            mutateElement(container, { width: nextWidth }, informMutation);
         }
         const updatedTextElement = {
             ...textElement,
@@ -54,7 +51,7 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
         boundTextUpdates.x = x;
         boundTextUpdates.y = y;
     }
-    mutateElement(textElement, boundTextUpdates);
+    mutateElement(textElement, boundTextUpdates, informMutation);
 };
 export const bindTextToShapeAfterDuplication = (newElements, oldElements, oldIdToDuplicatedId) => {
     const newElementsMap = arrayToMap(newElements);
@@ -540,32 +537,6 @@ export const suppportsHorizontalAlign = (selectedElements, elementsMap) => {
         return isTextElement(element);
     });
 };
-export const getTextBindableContainerAtPosition = (elements, appState, x, y, elementsMap) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    if (selectedElements.length === 1) {
-        return isTextBindableContainer(selectedElements[0], false)
-            ? selectedElements[0]
-            : null;
-    }
-    let hitElement = null;
-    // We need to to hit testing from front (end of the array) to back (beginning of the array)
-    for (let index = elements.length - 1; index >= 0; --index) {
-        if (elements[index].isDeleted) {
-            continue;
-        }
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index], elementsMap);
-        if (isArrowElement(elements[index]) &&
-            isHittingElementNotConsideringBoundingBox(elements[index], appState, null, [x, y], elementsMap)) {
-            hitElement = elements[index];
-            break;
-        }
-        else if (x1 < x && x < x2 && y1 < y && y < y2) {
-            hitElement = elements[index];
-            break;
-        }
-    }
-    return isTextBindableContainer(hitElement, false) ? hitElement : null;
-};
 const VALID_CONTAINER_TYPES = new Set([
     "rectangle",
     "ellipse",

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

@@ -1,5 +1,5 @@
-import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
-import App from "../components/App";
+import type { ExcalidrawElement, ExcalidrawTextElement } from "./types";
+import type App from "../components/App";
 export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
     id: ExcalidrawElement["id"];
     onChange?: ((text: string) => void) | undefined;

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

@@ -1,6 +1,6 @@
-import { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
-import { Bounds } from "./bounds";
-import { InteractiveCanvasAppState, Zoom } from "../types";
+import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
+import type { Bounds } from "./bounds";
+import type { Device, InteractiveCanvasAppState, Zoom } from "../types";
 export type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
 export type TransformHandleType = TransformHandleDirection | "rotation";
 export type TransformHandle = Bounds;
@@ -8,6 +8,12 @@ export type TransformHandles = Partial<{
     [T in TransformHandleType]: TransformHandle;
 }>;
 export type MaybeTransformHandleType = TransformHandleType | false;
+export declare const DEFAULT_OMIT_SIDES: {
+    e: boolean;
+    s: boolean;
+    n: boolean;
+    w: boolean;
+};
 export declare const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS: {
     e: boolean;
     s: boolean;
@@ -21,16 +27,28 @@ export declare const OMIT_SIDES_FOR_FRAME: {
     w: boolean;
     rotation: boolean;
 };
+export declare const canResizeFromSides: (device: Device) => boolean;
+export declare const getOmitSidesForDevice: (device: Device) => {};
 export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number], angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
     s?: boolean | undefined;
-    n?: boolean | undefined;
-    w?: boolean | undefined;
     e?: boolean | undefined;
+    w?: boolean | undefined;
+    n?: boolean | undefined;
     nw?: boolean | undefined;
     ne?: boolean | undefined;
     sw?: boolean | undefined;
     se?: boolean | undefined;
     rotation?: boolean | undefined;
 }, margin?: number) => TransformHandles;
-export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, elementsMap: ElementsMap, pointerType?: PointerType) => TransformHandles;
+export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, elementsMap: ElementsMap, pointerType?: PointerType, omitSides?: {
+    s?: boolean | undefined;
+    e?: boolean | undefined;
+    w?: boolean | undefined;
+    n?: boolean | undefined;
+    nw?: boolean | undefined;
+    ne?: boolean | undefined;
+    sw?: boolean | undefined;
+    se?: boolean | undefined;
+    rotation?: boolean | undefined;
+}) => TransformHandles;
 export declare const shouldShowBoundingBox: (elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState) => boolean;