diff --git a/src/element/newElement.ts b/src/element/newElement.ts index 36c8cc0e0..dc6046154 100644 --- a/src/element/newElement.ts +++ b/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; diff --git a/src/element/textElement.ts b/src/element/textElement.ts index d851afe54..3eea27df6 100644 --- a/src/element/textElement.ts +++ b/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 = []; 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"); }; diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index ef4f7c926..efe03917a 100644 --- a/src/element/textWysiwyg.tsx +++ b/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`; diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 619c76e74..acb7bb417 100644 --- a/src/renderer/renderElement.ts +++ b/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,