From dd55598141828c0badb640d838a67ec181f30568 Mon Sep 17 00:00:00 2001 From: wang1212 Date: Thu, 26 Dec 2024 20:37:38 +0800 Subject: [PATCH 1/2] fix: text wrapping boundary cases --- .changeset/ten-impalas-type.md | 5 +++++ packages/g-lite/src/services/TextService.ts | 13 +++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 .changeset/ten-impalas-type.md diff --git a/.changeset/ten-impalas-type.md b/.changeset/ten-impalas-type.md new file mode 100644 index 000000000..75f7a1d86 --- /dev/null +++ b/.changeset/ten-impalas-type.md @@ -0,0 +1,5 @@ +--- +'@antv/g-lite': patch +--- + +fix: text wrapping boundary cases diff --git a/packages/g-lite/src/services/TextService.ts b/packages/g-lite/src/services/TextService.ts index 8a0ccc056..82b392d74 100644 --- a/packages/g-lite/src/services/TextService.ts +++ b/packages/g-lite/src/services/TextService.ts @@ -204,6 +204,7 @@ export class TextService { const context = this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas); context.font = font; + console.log(font); // no overflowing by default parsedStyle.isOverflowing = false; @@ -391,7 +392,7 @@ export class TextService { textCharIndex += 1; txt += chars[textCharIndex]; } - while (calcWidth(txt) > widthThreshold) { + while (calcWidth(txt) > widthThreshold && textCharIndex > 0) { textCharIndex -= 1; txt = txt.slice(0, -1); } @@ -436,7 +437,7 @@ export class TextService { parsedStyle.isOverflowing = true; if (i < chars.length - 1) { - appendEllipsis(currentLineIndex, i); + appendEllipsis(currentLineIndex, i - 1); } break; @@ -452,17 +453,17 @@ export class TextService { if (currentLineWidth > 0 && currentLineWidth + charWidth > maxWidth) { const result = findCharIndexClosestWidthThreshold( lines[currentLineIndex], - i, + i - 1, maxWidth, ); - if (result.textCharIndex !== i) { + if (result.textCharIndex !== i - 1) { lines[currentLineIndex] = result.txt; if (result.textCharIndex === chars.length - 1) { break; } - i = result.textCharIndex; + i = result.textCharIndex + 1; char = chars[i]; prevChar = chars[i - 1]; nextChar = chars[i + 1]; @@ -472,7 +473,7 @@ export class TextService { if (currentLineIndex + 1 >= maxLines) { parsedStyle.isOverflowing = true; - appendEllipsis(currentLineIndex, i); + appendEllipsis(currentLineIndex, i - 1); break; } From 7a888b2287fc8e0763138acab6dfa52f786e1434 Mon Sep 17 00:00:00 2001 From: wang1212 Date: Thu, 26 Dec 2024 20:41:28 +0800 Subject: [PATCH 2/2] chore: remove log --- packages/g-lite/src/services/TextService.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/g-lite/src/services/TextService.ts b/packages/g-lite/src/services/TextService.ts index 82b392d74..412b5b7fa 100644 --- a/packages/g-lite/src/services/TextService.ts +++ b/packages/g-lite/src/services/TextService.ts @@ -204,7 +204,6 @@ export class TextService { const context = this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas); context.font = font; - console.log(font); // no overflowing by default parsedStyle.isOverflowing = false;