@excalidraw/excalidraw 0.17.1-1ed53b1 → 0.17.1-22b3927

package/dist/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -9,7 +9,7 @@ type StaticCanvasProps = {
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: StaticCanvasAppState;

package/dist/excalidraw/components/canvases/StaticCanvas.js

@@ -70,10 +70,10 @@ const getRelevantAppStateProps = (appState) => ({
     editingGroupId: appState.editingGroupId,
 });
 const areEqual = (prevProps, nextProps) => {
-    if (prevProps.versionNonce !== nextProps.versionNonce ||
+    if (prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements) {

package/dist/excalidraw/components/icons.js

@@ -126,12 +126,16 @@ const arrownNarrowUpJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path"
 export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
 export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
     ...tablerIconProps,
-    transform: "rotate(180)",
+    style: {
+        transform: "rotate(180deg)",
+    },
 });
 export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
 export const SendToBackIcon = createIcon(arrowBarToTopJSX, {
     ...tablerIconProps,
-    transform: "rotate(180)",
+    style: {
+        transform: "rotate(180deg)",
+    },
 });
 //
 // Align action icons created from scratch to match those of z-index actions

package/dist/excalidraw/constants.d.ts

@@ -10,6 +10,7 @@ export declare const isIOS: boolean;
 export declare const isBrave: () => boolean;
 export declare const supportsResizeObserver: boolean;
 export declare const APP_NAME = "Excalidraw";
+export declare const TEXT_AUTOWRAP_THRESHOLD = 36;
 export declare const DRAGGING_THRESHOLD = 10;
 export declare const LINE_CONFIRM_THRESHOLD = 8;
 export declare const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;

package/dist/excalidraw/constants.js

@@ -15,6 +15,11 @@ export const isIOS = /iPad|iPhone/.test(navigator.platform) ||
 export const isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
 export const supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 export const APP_NAME = "Excalidraw";
+// distance when creating text before it's considered `autoResize: false`
+// we're using higher threshold so that clicks that end up being drags
+// don't unintentionally create text elements that are wrapped to a few chars
+// (happens a lot with fast clicks with the text tool)
+export const TEXT_AUTOWRAP_THRESHOLD = 36; // px
 export const DRAGGING_THRESHOLD = 10; // px
 export const LINE_CONFIRM_THRESHOLD = 8; // px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;

package/dist/excalidraw/data/restore.js

@@ -10,6 +10,7 @@ import { arrayToMap } from "../utils";
 import { detectLineHeight, getContainerElement, getDefaultLineHeight, } from "../element/textElement";
 import { normalizeLink } from "./url";
 import { syncInvalidIndices } from "../fractionalIndex";
+import { getSizeFromPoints } from "../points";
 export const AllowedExcalidrawActiveTools = {
     selection: true,
     text: true,
@@ -124,6 +125,7 @@ const restoreElement = (element) => {
                 verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
                 containerId: element.containerId ?? null,
                 originalText: element.originalText || text,
+                autoResize: element.autoResize ?? true,
                 lineHeight,
             });
             // if empty text, mark as deleted. We keep in array
@@ -177,6 +179,7 @@ const restoreElement = (element) => {
                 points,
                 x,
                 y,
+                ...getSizeFromPoints(points),
             });
         }
         // generic elements

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

@@ -1,5 +1,5 @@
 import type { NonDeletedExcalidrawElement } from "./types";
-import type { AppState, PointerDownState } from "../types";
+import type { AppState, NormalizedZoomValue, PointerDownState } from "../types";
 import type Scene from "../scene/Scene";
 export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], offset: {
     x: number;
@@ -9,7 +9,7 @@ export declare const dragSelectedElements: (pointerDownState: PointerDownState,
     y: number;
 }, gridSize: AppState["gridSize"]) => void;
 export declare const getDragOffsetXY: (selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
-export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, widthAspectRatio?: number | null, originOffset?: {
+export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, zoom: NormalizedZoomValue, widthAspectRatio?: number | null, originOffset?: {
     x: number;
     y: number;
 } | null) => void;

package/dist/excalidraw/element/dragElements.js

@@ -2,9 +2,11 @@ import { updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
-import { getBoundTextElement } from "./textElement";
+import { getBoundTextElement, getMinTextElementWidth } from "./textElement";
 import { getGridPoint } from "../math";
-import { isArrowElement, isFrameLikeElement } from "./typeChecks";
+import { isArrowElement, isFrameLikeElement, isTextElement, } from "./typeChecks";
+import { getFontString } from "../utils";
+import { TEXT_AUTOWRAP_THRESHOLD } from "../constants";
 export const dragSelectedElements = (pointerDownState, selectedElements, offset, appState, scene, snapOffset, gridSize) => {
     // we do not want a frame and its elements to be selected at the same time
     // but when it happens (due to some bug), we want to avoid updating element
@@ -68,7 +70,7 @@ export const getDragOffsetXY = (selectedElements, x, y) => {
     const [x1, y1] = getCommonBounds(selectedElements);
     return [x - x1, y - y1];
 };
-export const dragNewElement = (draggingElement, elementType, originX, originY, x, y, width, height, shouldMaintainAspectRatio, shouldResizeFromCenter, 
+export const dragNewElement = (draggingElement, elementType, originX, originY, x, y, width, height, shouldMaintainAspectRatio, shouldResizeFromCenter, zoom, 
 /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
     true */
 widthAspectRatio, originOffset = null) => {
@@ -99,12 +101,34 @@ widthAspectRatio, originOffset = null) => {
         newX = originX - width / 2;
         newY = originY - height / 2;
     }
+    let textAutoResize = null;
+    // NOTE this should apply only to creating text elements, not existing
+    // (once we rewrite appState.draggingElement to actually mean dragging
+    // elements)
+    if (isTextElement(draggingElement)) {
+        height = draggingElement.height;
+        const minWidth = getMinTextElementWidth(getFontString({
+            fontSize: draggingElement.fontSize,
+            fontFamily: draggingElement.fontFamily,
+        }), draggingElement.lineHeight);
+        width = Math.max(width, minWidth);
+        if (Math.abs(x - originX) > TEXT_AUTOWRAP_THRESHOLD / zoom) {
+            textAutoResize = {
+                autoResize: false,
+            };
+        }
+        newY = originY;
+        if (shouldResizeFromCenter) {
+            newX = originX - width / 2;
+        }
+    }
     if (width !== 0 && height !== 0) {
         mutateElement(draggingElement, {
             x: newX + (originOffset?.x ?? 0),
             y: newY + (originOffset?.y ?? 0),
             width,
             height,
+            ...textAutoResize,
         });
     }
 };

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

@@ -167,7 +167,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
 } & {
     keyTest?: undefined;

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

@@ -1,5 +1,5 @@
 import type { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
-export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+export { newElement, newTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";

package/dist/excalidraw/element/index.js

@@ -1,6 +1,6 @@
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
-export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+export { newElement, newTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";

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

@@ -2,7 +2,7 @@ import type { ExcalidrawElement } from "./types";
 import type { Mutable } from "../utility-types";
 export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce" | "updated">;
 export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
-export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>) => TElement;
+export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>, force?: boolean) => TElement;
 /**
  * Mutates element, bumping `version`, `versionNonce`, and `updated`.
  *

package/dist/excalidraw/element/mutateElement.js

@@ -71,11 +71,13 @@ export const mutateElement = (element, updates, informMutation = true) => {
     element.versionNonce = randomInteger();
     element.updated = getUpdatedTimestamp();
     if (informMutation) {
-        Scene.getScene(element)?.informMutation();
+        Scene.getScene(element)?.triggerUpdate();
     }
     return element;
 };
-export const newElementWith = (element, updates) => {
+export const newElementWith = (element, updates, 
+/** pass `true` to always regenerate */
+force = false) => {
     let didChange = false;
     for (const key in updates) {
         const value = updates[key];
@@ -88,7 +90,7 @@ export const newElementWith = (element, updates) => {
             didChange = true;
         }
     }
-    if (!didChange) {
+    if (!didChange && !force) {
         return element;
     }
     return {

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

@@ -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.js

@@ -7,7 +7,7 @@ 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) => {
@@ -27,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) {
@@ -100,23 +96,25 @@ const measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {
         size: nextFontSize,
     };
 };
-const resizeSingleTextElement = (element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {
+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 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);
+    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) {
@@ -171,6 +169,60 @@ const resizeSingleTextElement = (element, elementsMap, transformHandleType, shou
             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);
@@ -541,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);
@@ -574,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.js

@@ -28,10 +28,8 @@ export const resizeTest = (element, elementsMap, appState, x, y, zoom, pointerTy
     }
     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)) {
+        // 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)) {

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

@@ -87,4 +87,5 @@ export declare const FONT_METRICS: Record<number, {
 export declare const getDefaultLineHeight: (fontFamily: FontFamilyValues) => number & {
     _brand: "unitlessLineHeight";
 };
+export declare const getMinTextElementWidth: (font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export {};

package/dist/excalidraw/element/textElement.js

@@ -24,12 +24,17 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap, infor
         angle: container?.angle ?? textElement.angle,
     };
     boundTextUpdates.text = textElement.text;
-    if (container) {
-        maxWidth = getBoundTextMaxWidth(container, textElement);
+    if (container || !textElement.autoResize) {
+        maxWidth = container
+            ? getBoundTextMaxWidth(container, textElement)
+            : textElement.width;
         boundTextUpdates.text = wrapText(textElement.originalText, getFontString(textElement), maxWidth);
     }
     const metrics = measureText(boundTextUpdates.text, getFontString(textElement), textElement.lineHeight);
-    boundTextUpdates.width = metrics.width;
+    // Note: only update width for unwrapped text and bound texts (which always have autoResize set to true)
+    if (textElement.autoResize) {
+        boundTextUpdates.width = metrics.width;
+    }
     boundTextUpdates.height = metrics.height;
     if (container) {
         const maxContainerHeight = getBoundTextMaxHeight(container, textElement);
@@ -661,3 +666,6 @@ export const getDefaultLineHeight = (fontFamily) => {
     }
     return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
 };
+export const getMinTextElementWidth = (font, lineHeight) => {
+    return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
+};

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

@@ -1,16 +1,22 @@
 import type { ExcalidrawElement, ExcalidrawTextElement } from "./types";
 import type App from "../components/App";
-export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
+export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect, }: {
     id: ExcalidrawElement["id"];
-    onChange?: ((text: string) => void) | undefined;
+    /**
+     * textWysiwyg only deals with `originalText`
+     *
+     * Note: `text`, which can be wrapped and therefore different from `originalText`,
+     *       is derived from `originalText`
+     */
+    onChange?: ((nextOriginalText: string) => void) | undefined;
     onSubmit: (data: {
-        text: string;
         viaKeyboard: boolean;
-        originalText: string;
+        nextOriginalText: string;
     }) => void;
     getViewportCoords: (x: number, y: number) => [number, number];
     element: ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
     excalidrawContainer: HTMLDivElement | null;
     app: App;
+    autoSelect?: boolean | undefined;
 }) => void;