diff --git a/src/constants.ts b/src/constants.ts index dfa579d2..38fd6222 100644 --- a/src/constants.ts +++ b/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; diff --git a/src/element/textElement.test.ts b/src/element/textElement.test.ts index 3c08b279..56bc7f6f 100644 --- a/src/element/textElement.test.ts +++ b/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`, }, diff --git a/src/element/textElement.ts b/src/element/textElement.ts index e6bd6193..d1f598ed 100644 --- a/src/element/textElement.ts +++ b/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;