fix element width

src/element/newElement.ts

@@ -217,7 +217,12 @@ const getAdjustedDimensions = (
     width: nextWidth,
     height: nextHeight,
     baseline: nextBaseline,
-  } = measureText(nextText, getFontString(element), element.lineHeight);
+  } = measureText(
+    nextText,
+    getFontString(element),
+    element.lineHeight,
+    container ? getMaxContainerWidth(container) : null,
+  );
   const { textAlign, verticalAlign } = element;
   let x: number;
   let y: number;

src/element/textElement.ts

@@ -76,6 +76,7 @@ export const redrawTextBoundingBox = (
     boundTextUpdates.text,
     getFontString(textElement),
     textElement.lineHeight,
+    maxWidth,
   );
 
   boundTextUpdates.width = metrics.width;
@@ -199,6 +200,7 @@ export const handleBindTextResize = (
         text,
         getFontString(textElement),
         textElement.lineHeight,
+        maxWidth,
       );
       nextHeight = metrics.height;
       nextWidth = metrics.width;
@@ -287,6 +289,7 @@ export const measureText = (
   text: string,
   font: FontString,
   lineHeight: ExcalidrawTextElement["lineHeight"],
+  maxWidth?: number | null,
 ) => {
   text = text
     .split("\n")
@@ -296,7 +299,10 @@ export const measureText = (
     .join("\n");
   const fontSize = parseFloat(font);
   const height = getTextHeight(text, fontSize, lineHeight);
-  const width = getTextWidth(text, font);
+  let width = getTextWidth(text, font);
+  if (maxWidth) {
+    width = Math.min(width, maxWidth);
+  }
   const baseline = measureBaseline(text, font, lineHeight);
   return { width, height, baseline };
 };
@@ -444,7 +450,6 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
     return text;
   }
-  console.log("TEXT =", text, maxWidth);
   const lines: Array<string> = [];
   const originalLines = text.split("\n");
 
@@ -471,7 +476,6 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
     }
 
     const words = parseTokens(originalLine);
-    console.log(words, "words");
     resetParams();
 
     let index = 0;
@@ -546,20 +550,10 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
           if (shouldAppendSpace && index < words.length) {
             currentLine += " ";
           }
-          console.log("currentLine", currentLine, currentLine.length, index);
           index++;
 
           // Push the word if appending space exceeds max width
           if (currentLineWidthTillNow >= maxWidth) {
-            // if (
-            //   currentLineWidthTillNow + spaceWidth === maxWidth &&
-            //   index < words.length &&
-            //   words[index] === ""
-            // ) {
-            //   currentLine += " ";
-            //   index++;
-            // }
-
             lines.push(currentLine);
             resetParams();
             break;
@@ -567,14 +561,12 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
         }
       }
     }
-    console.log("currentLine", currentLine);
     if (currentLine.slice(-1) === " ") {
       // only remove last trailing space which we have added when joining words
       currentLine = currentLine.slice(0, -1);
       push(currentLine);
     }
   });
-  console.log("TEXT Words", lines);
   return lines.join("\n");
 };
 

src/element/textWysiwyg.tsx

@@ -379,7 +379,12 @@ export const textWysiwyg = ({
           font,
           getMaxContainerWidth(container),
         );
-        const width = getTextWidth(wrappedText, font);
+        const { width } = measureText(
+          wrappedText,
+          font,
+          element.lineHeight,
+          getMaxContainerWidth(container),
+        );
         editable.style.width = `${width}px`;
       }
     };
@@ -400,6 +405,7 @@ export const textWysiwyg = ({
           wrappedText,
           font,
           updatedTextElement.lineHeight,
+          getMaxContainerWidth(container!),
         );
         editable.style.width = `${width}px`;
         editable.style.height = `${height}px`;

src/renderer/renderElement.ts

@@ -328,10 +328,6 @@ const drawElementOnCanvas = (
         context.fillStyle = element.strokeColor;
         context.textAlign = element.textAlign as CanvasTextAlign;
 
-        context.fillStyle = "yellow";
-        context.fillRect(0, 0, element.width, element.height);
-        context.fillStyle = element.strokeColor;
-
         // Canvas does not support multiline text by default
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
         const horizontalOffset =
@@ -345,19 +341,12 @@ const drawElementOnCanvas = (
           element.lineHeight,
         );
         const container = getContainerElement(element);
-        if (container) {
+
-          console.log(
-            "Element width = ",
-            element.width,
-            getMaxContainerWidth(container),
-          );
-        }
         const verticalOffset = element.height - element.baseline;
         for (let index = 0; index < lines.length; index++) {
           const trailingSpacesWidth =
             getLineWidth(lines[index], font) -
             getLineWidth(lines[index].trimEnd(), font);
-          console.log(trailingSpacesWidth, "width");
           const maxWidth = container
             ? getMaxContainerWidth(container)
             : element.width;
@@ -365,11 +354,13 @@ const drawElementOnCanvas = (
             maxWidth - getLineWidth(lines[index].trimEnd(), font);
           let spacesOffset = 0;
           if (element.textAlign === TEXT_ALIGN.CENTER) {
-            spacesOffset = -trailingSpacesWidth / 2;
+            spacesOffset = -Math.min(
+              trailingSpacesWidth / 2,
+              availableWidth / 2,
+            );
           } else if (element.textAlign === TEXT_ALIGN.RIGHT) {
             spacesOffset = -Math.min(availableWidth, trailingSpacesWidth);
           }
-          console.log(spacesOffset, "spacesOffset", trailingSpacesWidth);
           context.fillText(
             lines[index].trimEnd(),
             horizontalOffset + spacesOffset,