fix: compute container height from bound text correctly (#6273)

* fix: compute container height from bound text correctly

* fix specs

* Add tests

src/element/textElement.test.ts

@@ -233,7 +233,7 @@ describe("Test measureText", () => {
         type: "ellipse",
         ...params,
       });
-      expect(computeContainerHeightForBoundText(element, 150)).toEqual(212);
+      expect(computeContainerHeightForBoundText(element, 150)).toEqual(226);
     });
 
     it("should compute container height correctly for diamond", () => {
@@ -241,7 +241,7 @@ describe("Test measureText", () => {
         type: "diamond",
         ...params,
       });
-      expect(computeContainerHeightForBoundText(element, 150)).toEqual(300);
+      expect(computeContainerHeightForBoundText(element, 150)).toEqual(320);
     });
   });
 

src/element/textElement.ts

@@ -280,6 +280,8 @@ export const getApproxLineHeight = (font: FontString) => {
     return cacheApproxLineHeight[font];
   }
   const fontSize = parseInt(font);
+
+  // Calculate line height relative to font size
   cacheApproxLineHeight[font] = fontSize * 1.2;
   return cacheApproxLineHeight[font];
 };
@@ -727,13 +729,15 @@ export const computeContainerHeightForBoundText = (
   boundTextElementHeight: number,
 ) => {
   if (container.type === "ellipse") {
-    return Math.round((boundTextElementHeight / Math.sqrt(2)) * 2);
+    return Math.round(
+      ((boundTextElementHeight + BOUND_TEXT_PADDING * 2) / Math.sqrt(2)) * 2,
+    );
   }
   if (isArrowElement(container)) {
     return boundTextElementHeight + BOUND_TEXT_PADDING * 8 * 2;
   }
   if (container.type === "diamond") {
-    return 2 * boundTextElementHeight;
+    return 2 * (boundTextElementHeight + BOUND_TEXT_PADDING * 2);
   }
   return boundTextElementHeight + BOUND_TEXT_PADDING * 2;
 };

src/tests/clipboard.test.tsx

@@ -182,3 +182,73 @@ describe("paste text as a single element", () => {
     });
   });
 });
+
+describe("Paste bound text container", () => {
+  const container = {
+    type: "ellipse",
+    id: "container-id",
+    x: 554.984375,
+    y: 196.0234375,
+    width: 166,
+    height: 187.01953125,
+    roundness: { type: 2 },
+    boundElements: [{ type: "text", id: "text-id" }],
+  };
+  const textElement = {
+    type: "text",
+    id: "text-id",
+    x: 560.51171875,
+    y: 202.033203125,
+    width: 154,
+    height: 175,
+    fontSize: 20,
+    fontFamily: 1,
+    text: "Excalidraw is a\nvirtual \nopensource \nwhiteboard for \nsketching \nhand-drawn like\ndiagrams",
+    baseline: 168,
+    textAlign: "center",
+    verticalAlign: "middle",
+    containerId: container.id,
+    originalText:
+      "Excalidraw is a virtual opensource whiteboard for sketching hand-drawn like diagrams",
+  };
+
+  it("should fix ellipse bounding box", async () => {
+    const data = JSON.stringify({
+      type: "excalidraw/clipboard",
+      elements: [container, textElement],
+    });
+    setClipboardText(data);
+    pasteWithCtrlCmdShiftV();
+
+    await waitFor(async () => {
+      await sleep(1);
+      expect(h.elements.length).toEqual(2);
+      const container = h.elements[0];
+      expect(container.height).toBe(354);
+      expect(container.width).toBe(166);
+    });
+  });
+
+  it("should fix diamond bounding box", async () => {
+    const data = JSON.stringify({
+      type: "excalidraw/clipboard",
+      elements: [
+        {
+          ...container,
+          type: "diamond",
+        },
+        textElement,
+      ],
+    });
+    setClipboardText(data);
+    pasteWithCtrlCmdShiftV();
+
+    await waitFor(async () => {
+      await sleep(1);
+      expect(h.elements.length).toEqual(2);
+      const container = h.elements[0];
+      expect(container.height).toBe(740);
+      expect(container.width).toBe(166);
+    });
+  });
+});