From 6d0138f7f5c29370f0d53fe4753c8913727dae81 Mon Sep 17 00:00:00 2001
From: wang1212 <mrwang1212@126.com>
Date: Thu, 23 Jan 2025 15:11:50 +0800
Subject: [PATCH] fix: abnormal word breaking in text

---
 .changeset/config.json                      |  2 +-
 .changeset/ten-toes-whisper.md              |  5 ++++
 __tests__/demos/bugfix/textWordWrap.ts      | 33 +++++++++++++++++++++
 packages/g-lite/src/services/TextService.ts |  7 ++---
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/ten-toes-whisper.md

diff --git a/.changeset/config.json b/.changeset/config.json
index 6c21048bb..2197cb753 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -5,7 +5,7 @@
   "fixed": [],
   "linked": [],
   "access": "restricted",
-  "baseBranch": "next",
+  "baseBranch": "master",
   "updateInternalDependencies": "patch",
   "ignore": []
 }
diff --git a/.changeset/ten-toes-whisper.md b/.changeset/ten-toes-whisper.md
new file mode 100644
index 000000000..5662c341d
--- /dev/null
+++ b/.changeset/ten-toes-whisper.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-lite': patch
+---
+
+fix: abnormal word breaking in text
diff --git a/__tests__/demos/bugfix/textWordWrap.ts b/__tests__/demos/bugfix/textWordWrap.ts
index 243a97519..06715c903 100644
--- a/__tests__/demos/bugfix/textWordWrap.ts
+++ b/__tests__/demos/bugfix/textWordWrap.ts
@@ -132,6 +132,37 @@ export async function textWordWrap(context: { canvas: Canvas }) {
     },
   });
 
+  const text4 = new Text({
+    style: {
+      x: 100,
+      y: 400,
+      wordWrap: true,
+      wordWrapWidth: 2210,
+      maxLines: 10,
+      textOverflow: 'ellipsis',
+      fontFamily:
+        'Roboto, PingFangSC, BlinkMacSystemFont, Microsoft YaHei, Arial, sans-serif',
+      fontSize: 12,
+      fontWeight: 700,
+      fill: '#000000',
+      opacity: 1,
+      textAlign: 'center',
+      textBaseline: 'middle',
+      linkTextFill: '#326EF4',
+      text: '{"acodeList":"[4419, 4413]","roadList":"[122702094, 121224203, 122702115, 98717265, 122702113, 98718278, 98718270, 98718271, 124670851, 98719406, 122702114, 98719557, 121323912, 122702093, 98718269]","高低标准标签":"高普","isFilter":"否","质量标准":"模型类","标准编号":"","客户标签":"","高速误报率":"","普通路误报率":"","cityName":"东莞市","adcode":"441302","hfc":"3","errorOriginLabel":"虚拟"}',
+    },
+  });
+  console.log(text4);
+  const rect4 = new Rect({
+    style: {
+      x: text4.style.x,
+      y: text4.style.y,
+      width: text4.style.wordWrapWidth,
+      height: +text4.style.fontSize * text4.style.maxLines,
+      stroke: '#000000',
+    },
+  });
+
   canvas.appendChild(text0);
   canvas.appendChild(rect0);
   canvas.appendChild(text1);
@@ -140,6 +171,8 @@ export async function textWordWrap(context: { canvas: Canvas }) {
   canvas.appendChild(rect2);
   canvas.appendChild(text3);
   canvas.appendChild(rect3);
+  canvas.appendChild(text4);
+  canvas.appendChild(rect4);
 
   // benchmark
   // ----------
diff --git a/packages/g-lite/src/services/TextService.ts b/packages/g-lite/src/services/TextService.ts
index 323c500d7..37a887e0e 100644
--- a/packages/g-lite/src/services/TextService.ts
+++ b/packages/g-lite/src/services/TextService.ts
@@ -503,7 +503,7 @@ export class TextService {
           lines = this.trimToBreakable(lines);
           currentLineWidth = this.sumTextWidthByCache(
             lines[currentLineIndex] || '',
-            cache,
+            calcWidth,
           );
         }
 
@@ -588,11 +588,10 @@ export class TextService {
 
   private sumTextWidthByCache(
     text: string,
-    cache: { [key in string]: number },
+    calcWidthWithCache: (txt: string) => number,
   ) {
     return text.split('').reduce((sum: number, c) => {
-      if (!cache[c]) throw Error('cannot count the word without cache');
-      return sum + cache[c];
+      return sum + calcWidthWithCache(c);
     }, 0);
   }