Update textWysiwyg.tsx

src/element/resizeElements.ts

@@ -43,9 +43,9 @@ import {
   getApproxMinLineWidth,
   getBoundTextElement,
   getBoundTextElementId,
+  getContainerElement,
   handleBindTextResize,
   getMaxContainerWidth,
-  getContainerElement,
 } from "./textElement";
 
 export const normalizeAngle = (angle: number): number => {
@@ -414,12 +414,30 @@ export const resizeSingleElement = (
         fontSize: stateOfBoundTextElementAtResize.fontSize,
       };
     }
+    if (shouldMaintainAspectRatio) {
+      const updatedElement = {
+        ...element,
+        width: eleNewWidth,
+        height: eleNewHeight,
+      };
 
+      const nextFontSize = measureFontSizeFromWidth(
+        boundTextElement,
+        getMaxContainerWidth(updatedElement),
+      );
+      if (nextFontSize === null) {
+        return;
+      }
+      boundTextFont = {
+        fontSize: nextFontSize,
+      };
+    } else {
       const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
       const minHeight = getApproxMinLineHeight(getFontString(boundTextElement));
       eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
       eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
     }
+  }
 
   const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] =
     getResizedElementAbsoluteCoords(
@@ -551,11 +569,7 @@ export const resizeSingleElement = (
     if (boundTextElement && boundTextFont) {
       mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
     }
-    handleBindTextResize(
+    handleBindTextResize(element, transformHandleDirection);
-      element,
-      transformHandleDirection,
-      shouldMaintainAspectRatio,
-    );
   }
 };
 

src/element/textElement.test.ts

@@ -2,11 +2,10 @@ import { BOUND_TEXT_PADDING } from "../constants";
 import { API } from "../tests/helpers/api";
 import {
   computeContainerDimensionForBoundText,
-  computeBoundTextElementCoords,
+  getContainerCoords,
   getMaxContainerWidth,
   getMaxContainerHeight,
   wrapText,
-  computeContainerCoords,
 } from "./textElement";
 import { FontString } from "./types";
 
@@ -178,7 +177,8 @@ break it now`,
   });
 });
 
-describe("Test computeBoundTextElementCoords", () => {
+describe("Test measureText", () => {
+  describe("Test getContainerCoords", () => {
     const params = { width: 200, height: 100, x: 10, y: 20 };
 
     it("should compute coords correctly when ellipse", () => {
@@ -186,7 +186,7 @@ describe("Test computeBoundTextElementCoords", () => {
         type: "ellipse",
         ...params,
       });
-    expect(computeBoundTextElementCoords(element)).toEqual({
+      expect(getContainerCoords(element)).toEqual({
         x: 44.2893218813452455,
         y: 39.64466094067262,
       });
@@ -197,7 +197,7 @@ describe("Test computeBoundTextElementCoords", () => {
         type: "rectangle",
         ...params,
       });
-    expect(computeBoundTextElementCoords(element)).toEqual({
+      expect(getContainerCoords(element)).toEqual({
         x: 15,
         y: 25,
       });
@@ -208,44 +208,14 @@ describe("Test computeBoundTextElementCoords", () => {
         type: "diamond",
         ...params,
       });
-    expect(computeBoundTextElementCoords(element)).toEqual({
+      expect(getContainerCoords(element)).toEqual({
         x: 65,
         y: 50,
       });
     });
-});
-
-describe("Test computeContainerCoords", () => {
-  const boundTextElement = API.createElement({
-    type: "text",
-    width: 200,
-    height: 100,
-    x: 10,
-    y: 20,
-  });
-  it("should compute coords correctly when ellipse", () => {
-    expect(computeContainerCoords(boundTextElement, "ellipse")).toEqual({
-      x: -24.289321881345245,
-      y: 0.3553390593273775,
-    });
   });
 
-  it("should compute coords correctly when rectangle", () => {
+  describe("Test computeContainerDimensionForBoundText", () => {
-    expect(computeContainerCoords(boundTextElement, "rectangle")).toEqual({
-      x: 5,
-      y: 15,
-    });
-  });
-
-  it("should compute coords correctly when diamond", () => {
-    expect(computeContainerCoords(boundTextElement, "diamond")).toEqual({
-      x: -45,
-      y: -10,
-    });
-  });
-});
-
-describe("Test computeContainerDimensionForBoundText", () => {
     const params = {
       width: 178,
       height: 194,
@@ -280,9 +250,9 @@ describe("Test computeContainerDimensionForBoundText", () => {
         320,
       );
     });
-});
+  });
 
-describe("Test getMaxContainerWidth", () => {
+  describe("Test getMaxContainerWidth", () => {
     const params = {
       width: 178,
       height: 194,
@@ -302,9 +272,9 @@ describe("Test getMaxContainerWidth", () => {
       const container = API.createElement({ type: "diamond", ...params });
       expect(getMaxContainerWidth(container)).toBe(79);
     });
-});
+  });
 
-describe("Test getMaxContainerHeight", () => {
+  describe("Test getMaxContainerHeight", () => {
     const params = {
       width: 178,
       height: 194,
@@ -324,4 +294,5 @@ describe("Test getMaxContainerHeight", () => {
       const container = API.createElement({ type: "diamond", ...params });
       expect(getMaxContainerHeight(container)).toBe(87);
     });
+  });
 });

src/element/textElement.ts

@@ -147,7 +147,6 @@ export const bindTextToShapeAfterDuplication = (
 export const handleBindTextResize = (
   container: NonDeletedExcalidrawElement,
   transformHandleType: MaybeTransformHandleType,
-  shouldMaintainAspectRatio = false,
 ) => {
   const boundTextElementId = getBoundTextElementId(container);
   if (!boundTextElementId) {
@@ -185,7 +184,7 @@ export const handleBindTextResize = (
       nextWidth = dimensions.width;
     }
     // increase height in case text element height exceeds
-    if (!shouldMaintainAspectRatio && nextHeight > maxHeight) {
+    if (nextHeight > maxHeight) {
       containerHeight = computeContainerDimensionForBoundText(
         nextHeight,
         container.type,
@@ -206,53 +205,6 @@ export const handleBindTextResize = (
       });
     }
 
-    if (
-      shouldMaintainAspectRatio &&
-      (nextHeight > maxHeight || nextWidth > maxWidth)
-    ) {
-      let height = containerDims.height;
-      let width = containerDims.width;
-      let x = container.x;
-      let y = container.y;
-
-      if (nextHeight > maxHeight) {
-        height = computeContainerDimensionForBoundText(
-          nextHeight,
-          container.type,
-        );
-      }
-      if (nextWidth > maxWidth) {
-        width = computeContainerDimensionForBoundText(
-          nextWidth,
-          container.type,
-        );
-      }
-      const diffX = width - containerDims.width;
-      const diffY = height - containerDims.height;
-
-      if (transformHandleType === "n") {
-        y = container.y - diffY;
-      } else if (
-        transformHandleType === "e" ||
-        transformHandleType === "w" ||
-        transformHandleType === "ne" ||
-        transformHandleType === "nw"
-      ) {
-        y = container.y - diffY / 2;
-      }
-
-      if (transformHandleType === "s" || transformHandleType === "n") {
-        x = container.x - diffX / 2;
-      }
-
-      mutateElement(container, {
-        height,
-        width,
-        x,
-        y,
-      });
-    }
-
     mutateElement(textElement, {
       text,
       width: nextWidth,
@@ -275,7 +227,7 @@ const computeBoundTextPosition = (
   container: ExcalidrawElement,
   boundTextElement: ExcalidrawTextElementWithContainer,
 ) => {
-  const containerCoords = computeBoundTextElementCoords(container);
+  const containerCoords = getContainerCoords(container);
   const maxContainerHeight = getMaxContainerHeight(container);
   const maxContainerWidth = getMaxContainerWidth(container);
 
@@ -644,9 +596,7 @@ export const getContainerCenter = (
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
 };
 
-export const computeBoundTextElementCoords = (
+export const getContainerCoords = (container: NonDeletedExcalidrawElement) => {
-  container: NonDeletedExcalidrawElement,
-) => {
   let offsetX = BOUND_TEXT_PADDING;
   let offsetY = BOUND_TEXT_PADDING;
 
@@ -666,27 +616,6 @@ export const computeBoundTextElementCoords = (
   };
 };
 
-export const computeContainerCoords = (
-  boundTextElement: ExcalidrawTextElement,
-  containerType: string,
-) => {
-  let offsetX = BOUND_TEXT_PADDING;
-  let offsetY = BOUND_TEXT_PADDING;
-
-  if (containerType === "ellipse") {
-    offsetX += (boundTextElement.width / 2) * (1 - Math.sqrt(2) / 2);
-    offsetY += (boundTextElement.height / 2) * (1 - Math.sqrt(2) / 2);
-  }
-  if (containerType === "diamond") {
-    offsetX += boundTextElement.width / 4;
-    offsetY += boundTextElement.height / 4;
-  }
-  return {
-    x: boundTextElement.x - offsetX,
-    y: boundTextElement.y - offsetY,
-  };
-};
-
 export const getTextElementAngle = (textElement: ExcalidrawTextElement) => {
   const container = getContainerElement(textElement);
   if (!container || isArrowElement(container)) {

src/element/textWysiwyg.test.tsx

@@ -989,136 +989,26 @@ describe("textWysiwyg", () => {
       ]);
     });
 
-    describe.only("when using shift resize", () => {
+    it("should scale font size correctly when resizing using shift", async () => {
-      it("should wrap text correctly when resizing using shift from 'ne' handle", async () => {
       Keyboard.keyPress(KEYS.ENTER);
 
       const editor = document.querySelector(
         ".excalidraw-textEditorContainer > textarea",
       ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
-        fireEvent.change(editor, {
+      fireEvent.change(editor, { target: { value: "Hello" } });
-          target: { value: "Excalidraw is an opensource virtual whiteboard" },
-        });
       editor.blur();
       const textElement = h.elements[1] as ExcalidrawTextElement;
       expect(rectangle.width).toBe(90);
-        expect(rectangle.height).toBe(202);
+      expect(rectangle.height).toBe(75);
       expect(textElement.fontSize).toBe(20);
-        expect(textElement.text).toBe(
-          `Excalid
-raw is 
-an 
-opensou
-rce 
-virtual
-whitebo
-ard`,
-        );
 
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 50], {
         shift: true,
       });
       expect(rectangle.width).toBe(200);
-        expect(rectangle.height).toBe(449);
+      expect(rectangle.height).toBe(166.66666666666669);
-        expect(textElement.fontSize).toBe(20);
+      expect(textElement.fontSize).toBe(47.5);
-        expect(textElement.text).toBe(
-          `Excalidraw is an 
-opensource virtual
-whiteboard`,
-        );
-      });
-
-      it("should wrap text correctly when resizing using shift vertically using 'n' handle", async () => {
-        Keyboard.keyPress(KEYS.ENTER);
-
-        const editor = document.querySelector(
-          ".excalidraw-textEditorContainer > textarea",
-        ) as HTMLTextAreaElement;
-        await new Promise((r) => setTimeout(r, 0));
-        fireEvent.change(editor, {
-          target: { value: "Excalidraw is an opensource virtual whiteboard" },
-        });
-        editor.blur();
-        const textElement = h.elements[1] as ExcalidrawTextElement;
-        expect(rectangle.width).toBe(90);
-        expect(rectangle.height).toBe(202);
-        expect(textElement.fontSize).toBe(20);
-        expect(textElement.text).toBe(
-          `Excalid
-raw is 
-an 
-opensou
-rce 
-virtual
-whitebo
-ard`,
-        );
-
-        resize(rectangle, "n", [rectangle.x + 30, rectangle.y - 50], {
-          shift: true,
-        });
-        expect(rectangle.width).toBe(104);
-        expect(rectangle.height).toBe(232);
-        expect(textElement.fontSize).toBe(20);
-        expect(textElement.text).toBe(
-          `Excalid
-raw is 
-an 
-opensou
-rce 
-virtual
-whitebo
-ard`,
-        );
-      });
-
-      it("should wrap text correctly when resizing using shift horizontally and text overflows", async () => {
-        Keyboard.keyPress(KEYS.ENTER);
-
-        const editor = document.querySelector(
-          ".excalidraw-textEditorContainer > textarea",
-        ) as HTMLTextAreaElement;
-        await new Promise((r) => setTimeout(r, 0));
-        fireEvent.change(editor, {
-          target: { value: "Excalidraw is an opensource virtual whiteboard" },
-        });
-        editor.blur();
-        const textElement = h.elements[1] as ExcalidrawTextElement;
-        expect(rectangle.width).toBe(90);
-        expect(rectangle.height).toBe(202);
-        expect(rectangle.y).toBe(20);
-        expect(textElement.fontSize).toBe(20);
-        expect(textElement.text).toBe(
-          `Excalid
-raw is 
-an 
-opensou
-rce 
-virtual
-whitebo
-ard`,
-        );
-
-        resize(rectangle, "e", [rectangle.x - 30, rectangle.y + 30], {
-          shift: true,
-        });
-        expect(rectangle.width).toBe(70);
-        expect(rectangle.height).toBe(226);
-        expect(rectangle.y).toBe(8);
-        expect(textElement.fontSize).toBe(20);
-        expect(textElement.text).toBe(
-          `Excal
-idraw
-is an
-opens
-ource
-virtu
-al 
-white
-board`,
-        );
-      });
     });
 
     it("should bind text correctly when container duplicated with alt-drag", async () => {

src/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isFirefox, isSafari, VERTICAL_ALIGN } from "../constants";
+import { CLASSES, VERTICAL_ALIGN } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -24,7 +24,7 @@ import { mutateElement } from "./mutateElement";
 import {
   getApproxLineHeight,
   getBoundTextElementId,
-  computeBoundTextElementCoords,
+  getContainerCoords,
   getContainerDims,
   getContainerElement,
   getTextElementAngle,
@@ -233,7 +233,7 @@ export const textWysiwyg = ({
         // Start pushing text upward until a diff of 30px (padding)
         // is reached
         else {
-          const containerCoords = computeBoundTextElementCoords(container);
+          const containerCoords = getContainerCoords(container);
 
           // vertically center align the text
           if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
@@ -270,12 +270,10 @@ export const textWysiwyg = ({
       const lineHeight = updatedTextElement.containerId
         ? approxLineHeight
         : updatedTextElement.height / lines.length;
+
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
         textElementWidth = Math.min(textElementWidth, maxWidth);
-      } else if (isFirefox || isSafari) {
-        // As firefox, Safari needs little higher dimensions on DOM
-        textElementWidth += 0.5;
       }
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
@@ -348,7 +346,32 @@ export const textWysiwyg = ({
     overflowWrap: "break-word",
     boxSizing: "content-box",
   });
+
+  const magicOffset =
+    (excalidrawContainer
+      ? parseFloat(getComputedStyle(excalidrawContainer).fontSize)
+      : 16) / 16;
+
+  const onEditableInput = () => {
+    const updatedTextElement = Scene.getScene(element)?.getElement(
+      id,
+    ) as ExcalidrawTextElement;
+    const font = getFontString(updatedTextElement);
+    if (isBoundToContainer(element)) {
+      const container = getContainerElement(element);
+      const wrappedText = wrapText(
+        normalizeText(editable.value),
+        font,
+        getMaxContainerWidth(container!),
+      );
+      const { width, height } = measureText(wrappedText, font);
+      editable.style.width = `${width + magicOffset}px`;
+      editable.style.height = `${height}px`;
+    }
+  };
+
   updateWysiwygStyle();
+  onEditableInput();
 
   if (onChange) {
     editable.onpaste = async (event) => {
@@ -378,21 +401,7 @@ export const textWysiwyg = ({
     };
 
     editable.oninput = () => {
-      const updatedTextElement = Scene.getScene(element)?.getElement(
+      onEditableInput();
-        id,
-      ) as ExcalidrawTextElement;
-      const font = getFontString(updatedTextElement);
-      if (isBoundToContainer(element)) {
-        const container = getContainerElement(element);
-        const wrappedText = wrapText(
-          normalizeText(editable.value),
-          font,
-          getMaxContainerWidth(container!),
-        );
-        const { width, height } = measureText(wrappedText, font);
-        editable.style.width = `${width}px`;
-        editable.style.height = `${height}px`;
-      }
       onChange(normalizeText(editable.value));
     };
   }

src/renderer/renderElement.ts

@@ -42,7 +42,7 @@ import { getStroke, StrokeOptions } from "perfect-freehand";
 import {
   getApproxLineHeight,
   getBoundTextElement,
-  computeBoundTextElementCoords,
+  getContainerCoords,
   getContainerElement,
   getMaxContainerHeight,
   getMaxContainerWidth,
@@ -820,7 +820,7 @@ const drawElementFromCanvas = (
       process.env.REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX &&
       hasBoundTextElement(element)
     ) {
-      const coords = computeBoundTextElementCoords(element);
+      const coords = getContainerCoords(element);
       context.strokeStyle = "#c92a2a";
       context.lineWidth = 3;
       context.strokeRect(