fix element width

This commit is contained in:
Aakansha Doshi 2023-04-20 21:45:59 +05:30
parent caf0a904db
commit c21fecde40
4 changed files with 25 additions and 31 deletions

View File

@ -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;

View File

@ -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");
};

View File

@ -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`;

View File

@ -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,