Add tests

src/element/textElement.test.ts

@@ -6,6 +6,7 @@ import {
   getMaxContainerWidth,
   getMaxContainerHeight,
   wrapText,
+  computeContainerCoords,
 } from "./textElement";
 import { FontString } from "./types";
 
@@ -177,122 +178,150 @@ break it now`,
   });
 });
 
-describe("Test measureText", () => {
+describe("Test computeBoundTextElementCoords", () => {
-  describe("Test computeBoundTextElementCoords", () => {
+  const params = { width: 200, height: 100, x: 10, y: 20 };
-    const params = { width: 200, height: 100, x: 10, y: 20 };
 
-    it("should compute coords correctly when ellipse", () => {
+  it("should compute coords correctly when ellipse", () => {
-      const element = API.createElement({
+    const element = API.createElement({
-        type: "ellipse",
+      type: "ellipse",
-        ...params,
+      ...params,
-      });
-      expect(computeBoundTextElementCoords(element)).toEqual({
-        x: 44.2893218813452455,
-        y: 39.64466094067262,
-      });
     });
-
+    expect(computeBoundTextElementCoords(element)).toEqual({
-    it("should compute coords correctly when rectangle", () => {
+      x: 44.2893218813452455,
-      const element = API.createElement({
+      y: 39.64466094067262,
-        type: "rectangle",
-        ...params,
-      });
-      expect(computeBoundTextElementCoords(element)).toEqual({
-        x: 15,
-        y: 25,
-      });
-    });
-
-    it("should compute coords correctly when diamond", () => {
-      const element = API.createElement({
-        type: "diamond",
-        ...params,
-      });
-      expect(computeBoundTextElementCoords(element)).toEqual({
-        x: 65,
-        y: 50,
-      });
     });
   });
 
-  describe("Test computeContainerDimensionForBoundText", () => {
+  it("should compute coords correctly when rectangle", () => {
-    const params = {
+    const element = API.createElement({
-      width: 178,
+      type: "rectangle",
-      height: 194,
+      ...params,
-    };
-
-    it("should compute container height correctly for rectangle", () => {
-      const element = API.createElement({
-        type: "rectangle",
-        ...params,
-      });
-      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
-        160,
-      );
     });
-
+    expect(computeBoundTextElementCoords(element)).toEqual({
-    it("should compute container height correctly for ellipse", () => {
+      x: 15,
-      const element = API.createElement({
+      y: 25,
-        type: "ellipse",
-        ...params,
-      });
-      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
-        226,
-      );
-    });
-
-    it("should compute container height correctly for diamond", () => {
-      const element = API.createElement({
-        type: "diamond",
-        ...params,
-      });
-      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
-        320,
-      );
     });
   });
 
-  describe("Test getMaxContainerWidth", () => {
+  it("should compute coords correctly when diamond", () => {
-    const params = {
+    const element = API.createElement({
-      width: 178,
+      type: "diamond",
-      height: 194,
+      ...params,
-    };
-
-    it("should return max width when container is rectangle", () => {
-      const container = API.createElement({ type: "rectangle", ...params });
-      expect(getMaxContainerWidth(container)).toBe(168);
     });
-
+    expect(computeBoundTextElementCoords(element)).toEqual({
-    it("should return max width when container is ellipse", () => {
+      x: 65,
-      const container = API.createElement({ type: "ellipse", ...params });
+      y: 50,
-      expect(getMaxContainerWidth(container)).toBe(116);
-    });
-
-    it("should return max width when container is diamond", () => {
-      const container = API.createElement({ type: "diamond", ...params });
-      expect(getMaxContainerWidth(container)).toBe(79);
-    });
-  });
-
-  describe("Test getMaxContainerHeight", () => {
-    const params = {
-      width: 178,
-      height: 194,
-    };
-
-    it("should return max height when container is rectangle", () => {
-      const container = API.createElement({ type: "rectangle", ...params });
-      expect(getMaxContainerHeight(container)).toBe(184);
-    });
-
-    it("should return max height when container is ellipse", () => {
-      const container = API.createElement({ type: "ellipse", ...params });
-      expect(getMaxContainerHeight(container)).toBe(127);
-    });
-
-    it("should return max height when container is diamond", () => {
-      const container = API.createElement({ type: "diamond", ...params });
-      expect(getMaxContainerHeight(container)).toBe(87);
     });
   });
 });
+
+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", () => {
+    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,
+  };
+
+  it("should compute container height correctly for rectangle", () => {
+    const element = API.createElement({
+      type: "rectangle",
+      ...params,
+    });
+    expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
+      160,
+    );
+  });
+
+  it("should compute container height correctly for ellipse", () => {
+    const element = API.createElement({
+      type: "ellipse",
+      ...params,
+    });
+    expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
+      226,
+    );
+  });
+
+  it("should compute container height correctly for diamond", () => {
+    const element = API.createElement({
+      type: "diamond",
+      ...params,
+    });
+    expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
+      320,
+    );
+  });
+});
+
+describe("Test getMaxContainerWidth", () => {
+  const params = {
+    width: 178,
+    height: 194,
+  };
+
+  it("should return max width when container is rectangle", () => {
+    const container = API.createElement({ type: "rectangle", ...params });
+    expect(getMaxContainerWidth(container)).toBe(168);
+  });
+
+  it("should return max width when container is ellipse", () => {
+    const container = API.createElement({ type: "ellipse", ...params });
+    expect(getMaxContainerWidth(container)).toBe(116);
+  });
+
+  it("should return max width when container is diamond", () => {
+    const container = API.createElement({ type: "diamond", ...params });
+    expect(getMaxContainerWidth(container)).toBe(79);
+  });
+});
+
+describe("Test getMaxContainerHeight", () => {
+  const params = {
+    width: 178,
+    height: 194,
+  };
+
+  it("should return max height when container is rectangle", () => {
+    const container = API.createElement({ type: "rectangle", ...params });
+    expect(getMaxContainerHeight(container)).toBe(184);
+  });
+
+  it("should return max height when container is ellipse", () => {
+    const container = API.createElement({ type: "ellipse", ...params });
+    expect(getMaxContainerHeight(container)).toBe(127);
+  });
+
+  it("should return max height when container is diamond", () => {
+    const container = API.createElement({ type: "diamond", ...params });
+    expect(getMaxContainerHeight(container)).toBe(87);
+  });
+});

src/element/textWysiwyg.test.tsx

@@ -989,6 +989,136 @@ describe("textWysiwyg", () => {
       ]);
     });
 
+    describe.only("when using shift resize", () => {
+      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, {
+          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, "ne", [rectangle.x + 100, rectangle.y - 50], {
+          shift: true,
+        });
+        expect(rectangle.width).toBe(200);
+        expect(rectangle.height).toBe(449);
+        expect(textElement.fontSize).toBe(20);
+        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(
+          `Excalidra
+w is an 
+opensourc
+e virtual
+whiteboar
+d`,
+        );
+      });
+
+      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 () => {
       Keyboard.keyPress(KEYS.ENTER);