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, excalidrawLibrary: 2,
} as const; } as const;
export const BOUND_TEXT_PADDING = 30; export const BOUND_TEXT_PADDING = 5;

20
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", desc: "break all words when width of each word is less than container width",
width: 140, width: 90,
res: `Hello res: `Hello
whats whats
up`, up`,
}, },
{ {
desc: "break all characters when width of each character is less than container width", desc: "break all characters when width of each character is less than container width",
width: 75, width: 25,
res: `H res: `H
e e
l l
@ -33,7 +33,7 @@ p`,
{ {
desc: "break words as per the width", desc: "break words as per the width",
width: 200, width: 150,
res: `Hello whats res: `Hello whats
up`, up`,
}, },
@ -56,14 +56,14 @@ whats up`;
[ [
{ {
desc: "break all words when width of each word is less than container width", desc: "break all words when width of each word is less than container width",
width: 140, width: 90,
res: `Hello res: `Hello
whats whats
up`, up`,
}, },
{ {
desc: "break all characters when width of each character is less than container width", desc: "break all characters when width of each character is less than container width",
width: 75, width: 25,
res: `H res: `H
e e
l l
@ -80,7 +80,7 @@ p`,
{ {
desc: "break words as per the width", desc: "break words as per the width",
width: 200, width: 150,
res: `Hello res: `Hello
whats up`, whats up`,
}, },
@ -103,7 +103,7 @@ whats up`,
[ [
{ {
desc: "fit characters of long string as per container width", desc: "fit characters of long string as per container width",
width: 220, width: 170,
res: `hellolongtextth res: `hellolongtextth
isiswhatsupwith isiswhatsupwith
youIamtypingggg 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", desc: "fit characters of long string as per container width and break words as per the width",
width: 180, width: 130,
res: `hellolongte res: `hellolongte
xtthisiswha xtthisiswha
tsupwithyou tsupwithyou
Iamtypinggg Iamtypinggg
ggandtyping ggandtyping
gg break it gg break it
now`, now`,
}, },
{ {
desc: "fit the long text when container width is greater than text length and move the rest to next line", 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 res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg
break it now`, break it now`,
}, },

28
src/element/textElement.ts
View File

@ -22,7 +22,6 @@ export const redrawTextBoundingBox = (
? container.width - BOUND_TEXT_PADDING * 2 ? container.width - BOUND_TEXT_PADDING * 2
: undefined; : undefined;
let text = element.originalText; let text = element.originalText;
// Call wrapText only when updating text properties // Call wrapText only when updating text properties
// By clicking on the container // By clicking on the container
if (container && !isTextElement(appState.editingElement)) { if (container && !isTextElement(appState.editingElement)) {
@ -112,20 +111,12 @@ export const handleBindTextResize = (
let containerHeight = element.height; let containerHeight = element.height;
let nextBaseLine = textElement.baseline; let nextBaseLine = textElement.baseline;
if (transformHandleType !== "n" && transformHandleType !== "s") { if (transformHandleType !== "n" && transformHandleType !== "s") {
let minCharWidthTillNow = 0;
if (text) { if (text) {
minCharWidthTillNow = getMinCharWidth(getFontString(textElement)); text = wrapText(
// check if the diff has exceeded min char width needed textElement.originalText,
const diff = Math.abs( getFontString(textElement),
element.width - textElement.width + BOUND_TEXT_PADDING * 2, element.width,
); );
if (diff >= minCharWidthTillNow) {
text = wrapText(
textElement.originalText,
getFontString(textElement),
element.width,
);
}
} }
const dimensions = measureText( const dimensions = measureText(
@ -293,7 +284,7 @@ export const wrapText = (
} }
} }
// push current line if appending space exceeds max width // push current line if appending space exceeds max width
if (currentLineWidthTillNow + spaceWidth > maxWidth) { if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
lines.push(currentLine); lines.push(currentLine);
currentLine = ""; currentLine = "";
currentLineWidthTillNow = 0; currentLineWidthTillNow = 0;
@ -321,8 +312,15 @@ export const wrapText = (
} }
index++; index++;
currentLine += `${word} `; 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) { if (currentLineWidthTillNow === maxWidth) {
currentLine = ""; currentLine = "";
currentLineWidthTillNow = 0; currentLineWidthTillNow = 0;