fix: Reduce padding to 5px for bounded text (#4530)

* fix: Reduce padding to 5px

* reduce width by 50 to fix tests

* Push the word if appending space exceeds max width when breaking words

* fix spec

src/constants.ts

@@ -182,4 +182,4 @@ export const VERSIONS = {
   excalidrawLibrary: 2,
 } as const;
 
-export const BOUND_TEXT_PADDING = 30;
+export const BOUND_TEXT_PADDING = 5;

src/element/textElement.test.ts

@@ -9,14 +9,14 @@ describe("Test wrapText", () => {
     [
       {
         desc: "break all words when width of each word is less than container width",
-        width: 140,
+        width: 90,
         res: `Hello 
 whats 
 up`,
       },
       {
         desc: "break all characters when width of each character is less than container width",
-        width: 75,
+        width: 25,
         res: `H
 e
 l
@@ -33,7 +33,7 @@ p`,
       {
         desc: "break words as per the width",
 
-        width: 200,
+        width: 150,
         res: `Hello whats 
 up`,
       },
@@ -56,14 +56,14 @@ whats up`;
     [
       {
         desc: "break all words when width of each word is less than container width",
-        width: 140,
+        width: 90,
         res: `Hello
 whats 
 up`,
       },
       {
         desc: "break all characters when width of each character is less than container width",
-        width: 75,
+        width: 25,
         res: `H
 e
 l
@@ -80,7 +80,7 @@ p`,
       {
         desc: "break words as per the width",
 
-        width: 200,
+        width: 150,
         res: `Hello
 whats up`,
       },
@@ -103,7 +103,7 @@ whats up`,
     [
       {
         desc: "fit characters of long string as per container width",
-        width: 220,
+        width: 170,
         res: `hellolongtextth
 isiswhatsupwith
 youIamtypingggg
@@ -114,19 +114,19 @@ break it now`,
       {
         desc: "fit characters of long string as per container width and break words as per the width",
 
-        width: 180,
+        width: 130,
         res: `hellolongte
 xtthisiswha
 tsupwithyou
 Iamtypinggg
 ggandtyping
-gg break it 
+gg break it
 now`,
       },
       {
         desc: "fit the long text when container width is greater than text length and move the rest to next line",
 
-        width: 650,
+        width: 600,
         res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg 
 break it now`,
       },

src/element/textElement.ts

@@ -22,7 +22,6 @@ export const redrawTextBoundingBox = (
     ? container.width - BOUND_TEXT_PADDING * 2
     : undefined;
   let text = element.originalText;
-
   // Call wrapText only when updating text properties
   // By clicking on the container
   if (container && !isTextElement(appState.editingElement)) {
@@ -112,20 +111,12 @@ export const handleBindTextResize = (
         let containerHeight = element.height;
         let nextBaseLine = textElement.baseline;
         if (transformHandleType !== "n" && transformHandleType !== "s") {
-          let minCharWidthTillNow = 0;
           if (text) {
-            minCharWidthTillNow = getMinCharWidth(getFontString(textElement));
-            // check if the diff has exceeded min char width needed
-            const diff = Math.abs(
-              element.width - textElement.width + BOUND_TEXT_PADDING * 2,
+            text = wrapText(
+              textElement.originalText,
+              getFontString(textElement),
+              element.width,
             );
-            if (diff >= minCharWidthTillNow) {
-              text = wrapText(
-                textElement.originalText,
-                getFontString(textElement),
-                element.width,
-              );
-            }
           }
 
           const dimensions = measureText(
@@ -293,7 +284,7 @@ export const wrapText = (
             }
           }
           // push current line if appending space exceeds max width
-          if (currentLineWidthTillNow + spaceWidth > maxWidth) {
+          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
             lines.push(currentLine);
             currentLine = "";
             currentLineWidthTillNow = 0;
@@ -321,8 +312,15 @@ export const wrapText = (
             }
             index++;
             currentLine += `${word} `;
-          }
 
+            // Push the word if appending space exceeds max width
+            if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+              lines.push(currentLine.slice(0, -1));
+              currentLine = "";
+              currentLineWidthTillNow = 0;
+              break;
+            }
+          }
           if (currentLineWidthTillNow === maxWidth) {
             currentLine = "";
             currentLineWidthTillNow = 0;