fix: abnormal word breaking in text

antvis · Jan 23, 2025 · 6d0138f · 6d0138f
1 parent 81bdf2f
commit 6d0138f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
   }