From 0e95e2b3867c63a90f8878c74e86653e07520ed5 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Thu, 23 Feb 2023 17:39:02 +0530
Subject: [PATCH] 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 |  4 +-
 src/element/textElement.ts      |  8 +++-
 src/tests/clipboard.test.tsx    | 70 +++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/src/element/textElement.test.ts b/src/element/textElement.test.ts
index 6ea7f2ba..87219b29 100644
--- a/src/element/textElement.test.ts
+++ b/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);
     });
   });
 
diff --git a/src/element/textElement.ts b/src/element/textElement.ts
index e5451bc4..4d9fa5eb 100644
--- a/src/element/textElement.ts
+++ b/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;
 };
diff --git a/src/tests/clipboard.test.tsx b/src/tests/clipboard.test.tsx
index 66e5ce74..26fcf4f0 100644
--- a/src/tests/clipboard.test.tsx
+++ b/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);
+    });
+  });
+});