fix: improve text wrapping inside rhombus and more fixes (#6265)

* fix: improve text wrapping inside rhombus

* Add comments

* specs

* fix: shift resize and multiple element regression for ellipse and rhombus

* use container width for scaling font size

* fix

* fix multiple resize

* lint

* redraw on submit

* redraw only newly pasted elements

* no padding when center

* fix tests

* fix

* dont add padding in rhombus when aligning

* refactor

* fix

* move getMaxContainerHeight and getMaxContainerWidth to textElement.ts

* Add specs

src/element/textElement.test.ts

@@ -3,6 +3,8 @@ import { API } from "../tests/helpers/api";
 import {
   computeContainerHeightForBoundText,
   getContainerCoords,
+  getMaxContainerWidth,
+  getMaxContainerHeight,
   measureText,
   wrapText,
 } from "./textElement";
@@ -202,24 +204,37 @@ describe("Test measureText", () => {
 
   describe("Test getContainerCoords", () => {
     const params = { width: 200, height: 100, x: 10, y: 20 };
+
     it("should compute coords correctly when ellipse", () => {
-      const ellipse = API.createElement({
+      const element = API.createElement({
         type: "ellipse",
         ...params,
       });
-      expect(getContainerCoords(ellipse)).toEqual({
+      expect(getContainerCoords(element)).toEqual({
         x: 44.2893218813452455,
         y: 39.64466094067262,
       });
     });
+
     it("should compute coords correctly when rectangle", () => {
-      const rectangle = API.createElement({
+      const element = API.createElement({
         type: "rectangle",
         ...params,
       });
-      expect(getContainerCoords(rectangle)).toEqual({
-        x: 10,
-        y: 20,
+      expect(getContainerCoords(element)).toEqual({
+        x: 15,
+        y: 25,
+      });
+    });
+
+    it("should compute coords correctly when diamond", () => {
+      const element = API.createElement({
+        type: "diamond",
+        ...params,
+      });
+      expect(getContainerCoords(element)).toEqual({
+        x: 65,
+        y: 50,
       });
     });
   });
@@ -229,6 +244,7 @@ describe("Test measureText", () => {
       width: 178,
       height: 194,
     };
+
     it("should compute container height correctly for rectangle", () => {
       const element = API.createElement({
         type: "rectangle",
@@ -236,6 +252,7 @@ describe("Test measureText", () => {
       });
       expect(computeContainerHeightForBoundText(element, 150)).toEqual(160);
     });
+
     it("should compute container height correctly for ellipse", () => {
       const element = API.createElement({
         type: "ellipse",
@@ -243,5 +260,57 @@ describe("Test measureText", () => {
       });
       expect(computeContainerHeightForBoundText(element, 150)).toEqual(212);
     });
+
+    it("should compute container height correctly for diamond", () => {
+      const element = API.createElement({
+        type: "diamond",
+        ...params,
+      });
+      expect(computeContainerHeightForBoundText(element, 150)).toEqual(300);
+    });
+  });
+
+  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);
+    });
   });
 });