sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Aakansha Doshi 2022-01-03 17:59:26 +05:30 committed by GitHub
parent 28546fbb55
commit 5c67329be6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/constants.ts
View File

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

18
src/element/textElement.test.ts
View File

@ -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,7 +114,7 @@ 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
@ -126,7 +126,7 @@ 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`,
},

20
src/element/textElement.ts
View File

@ -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,21 +111,13 @@ 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,
);
if (diff >= minCharWidthTillNow) {
text = wrapText(
textElement.originalText,
getFontString(textElement),
element.width,
);
}
}
const dimensions = measureText(
text,
@ -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;