@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

package/dist/excalidraw/element/resizeElements.js

@@ -2,14 +2,15 @@ import { MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";
 import { rotate, centerPoint, rotatePoint } from "../math";
 import { getElementAbsoluteCoords, getCommonBounds, getResizedElementAbsoluteCoords, getCommonBoundingBox, } from "./bounds";
-import { isArrowElement, isBoundToContainer, isFrameLikeElement, isFreeDrawElement, isImageElement, isLinearElement, isTextElement, } from "./typeChecks";
+import { isArrowElement, isBoundToContainer, isElbowArrow, isFrameLikeElement, isFreeDrawElement, isImageElement, isLinearElement, isTextElement, } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getFontString } from "../utils";
-import { updateBoundElements } from "./binding";
+import { getArrowLocalFixedPoints, 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";
+import { mutateElbowArrow } from "./routing";
 export const normalizeAngle = (angle) => {
     if (angle < 0) {
         return angle + 2 * Math.PI;
@@ -20,33 +21,31 @@ export const normalizeAngle = (angle) => {
     return angle;
 };
 // Returns true when transform (resizing/rotation) happened
-export const transformElements = (originalElements, transformHandleType, selectedElements, elementsMap, shouldRotateWithDiscreteAngle, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, centerX, centerY) => {
+export const transformElements = (originalElements, transformHandleType, selectedElements, elementsMap, shouldRotateWithDiscreteAngle, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, centerX, centerY, scene) => {
     if (selectedElements.length === 1) {
         const [element] = selectedElements;
         if (transformHandleType === "rotation") {
-            rotateSingleElement(element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle);
-            updateBoundElements(element, elementsMap);
+            if (!isElbowArrow(element)) {
+                rotateSingleElement(element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle);
+                updateBoundElements(element, elementsMap, scene);
+            }
         }
-        else if (isTextElement(element) &&
-            (transformHandleType === "nw" ||
-                transformHandleType === "ne" ||
-                transformHandleType === "sw" ||
-                transformHandleType === "se")) {
-            resizeSingleTextElement(element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
-            updateBoundElements(element, elementsMap);
+        else if (isTextElement(element) && transformHandleType) {
+            resizeSingleTextElement(originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
+            updateBoundElements(element, elementsMap, scene);
         }
         else if (transformHandleType) {
-            resizeSingleElement(originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);
+            resizeSingleElement(originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY, scene);
         }
         return true;
     }
     else if (selectedElements.length > 1) {
         if (transformHandleType === "rotation") {
-            rotateMultipleElements(originalElements, selectedElements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY);
+            rotateMultipleElements(originalElements, selectedElements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY, scene);
             return true;
         }
         else if (transformHandleType) {
-            resizeMultipleElements(originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY);
+            resizeMultipleElements(originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, scene);
             return true;
         }
     }
@@ -77,12 +76,12 @@ const rotateSingleElement = (element, elementsMap, pointerX, pointerY, shouldRot
         }
     }
 };
-const rescalePointsInElement = (element, width, height, normalizePoints) => isLinearElement(element) || isFreeDrawElement(element)
+export const rescalePointsInElement = (element, width, height, normalizePoints) => isLinearElement(element) || isFreeDrawElement(element)
     ? {
         points: rescalePoints(0, width, rescalePoints(1, height, element.points, normalizePoints), normalizePoints),
     }
     : {};
-const measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {
+export const measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {
     // We only use width to scale font on resize
     let width = element.width;
     const hasContainer = isBoundToContainer(element);
@@ -100,23 +99,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,8 +172,68 @@ 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) => {
+export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleDirection, shouldResizeFromCenter, pointerX, pointerY, scene) => {
+    // Elbow arrows cannot be resized when bound on either end
+    if (isArrowElement(element) &&
+        isElbowArrow(element) &&
+        (element.startBinding || element.endBinding)) {
+        return;
+    }
     const stateAtResizeStart = originalElements.get(element.id);
     // Gets bounds corners
     const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);
@@ -368,8 +429,11 @@ export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio,
         Number.isFinite(resizedElement.x) &&
         Number.isFinite(resizedElement.y)) {
         mutateElement(element, resizedElement);
-        updateBoundElements(element, elementsMap, {
-            newSize: { width: resizedElement.width, height: resizedElement.height },
+        updateBoundElements(element, elementsMap, scene, {
+            oldSize: {
+                width: stateAtResizeStart.width,
+                height: stateAtResizeStart.height,
+            },
         });
         if (boundTextElement && boundTextFont != null) {
             mutateElement(boundTextElement, {
@@ -379,7 +443,7 @@ export const resizeSingleElement = (originalElements, shouldMaintainAspectRatio,
         handleBindTextResize(element, elementsMap, transformHandleDirection, shouldMaintainAspectRatio);
     }
 };
-export const resizeMultipleElements = (originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY) => {
+export const resizeMultipleElements = (originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, scene) => {
     // 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
@@ -526,11 +590,17 @@ export const resizeMultipleElements = (originalElements, selectedElements, eleme
     }
     const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
     for (const { element, update: { boundTextFontSize, ...update }, } of elementsAndUpdates) {
-        const { width, height, angle } = update;
+        const { angle } = update;
+        const { width: oldWidth, height: oldHeight } = element;
         mutateElement(element, update, false);
-        updateBoundElements(element, elementsMap, {
+        if (isArrowElement(element) && isElbowArrow(element)) {
+            mutateElbowArrow(element, scene, element.points, undefined, undefined, {
+                informMutation: false,
+            });
+        }
+        updateBoundElements(element, elementsMap, scene, {
             simultaneouslyUpdated: elementsToUpdate,
-            newSize: { width, height },
+            oldSize: { width: oldWidth, height: oldHeight },
         });
         const boundTextElement = getBoundTextElement(element, elementsMap);
         if (boundTextElement && boundTextFontSize) {
@@ -541,9 +611,9 @@ 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) => {
+const rotateMultipleElements = (originalElements, elements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY, scene) => {
     let centerAngle = (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
     if (shouldRotateWithDiscreteAngle) {
         centerAngle += SHIFT_LOCKING_ANGLE / 2;
@@ -557,12 +627,18 @@ const rotateMultipleElements = (originalElements, elements, elementsMap, pointer
         const cy = (y1 + y2) / 2;
         const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
         const [rotatedCX, rotatedCY] = rotate(cx, cy, centerX, centerY, centerAngle + origAngle - element.angle);
-        mutateElement(element, {
-            x: element.x + (rotatedCX - cx),
-            y: element.y + (rotatedCY - cy),
-            angle: normalizeAngle(centerAngle + origAngle),
-        }, false);
-        updateBoundElements(element, elementsMap, {
+        if (isArrowElement(element) && isElbowArrow(element)) {
+            const points = getArrowLocalFixedPoints(element, elementsMap);
+            mutateElbowArrow(element, scene, points);
+        }
+        else {
+            mutateElement(element, {
+                x: element.x + (rotatedCX - cx),
+                y: element.y + (rotatedCY - cy),
+                angle: normalizeAngle(centerAngle + origAngle),
+            }, false);
+        }
+        updateBoundElements(element, elementsMap, scene, {
             simultaneouslyUpdated: elements,
         });
         const boundText = getBoundTextElement(element, elementsMap);
@@ -574,7 +650,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,7 +1,7 @@
-import { ExcalidrawElement, PointerType, NonDeletedExcalidrawElement, ElementsMap } from "./types";
-import { MaybeTransformHandleType } from "./transformHandles";
-import { AppState, Device, Zoom } from "../types";
-import { Bounds } from "./bounds";
+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;

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/routing.d.ts

@@ -0,0 +1,13 @@
+import type Scene from "../scene/Scene";
+import type { Point } from "../types";
+import type { ExcalidrawElbowArrowElement, FixedPointBinding } from "./types";
+import type { OrderedExcalidrawElement } from "./types";
+export declare const mutateElbowArrow: (arrow: ExcalidrawElbowArrowElement, scene: Scene, nextPoints: readonly Point[], offset?: Point, otherUpdates?: {
+    startBinding?: FixedPointBinding | null;
+    endBinding?: FixedPointBinding | null;
+}, options?: {
+    changedElements?: Map<string, OrderedExcalidrawElement>;
+    isDragging?: boolean;
+    disableBinding?: boolean;
+    informMutation?: boolean;
+}) => void;