antvis · wang1212 · Nov 14, 2024 · Nov 14, 2024 · Nov 14, 2024
diff --git a/__tests__/demos/bugfix/index.ts b/__tests__/demos/bugfix/index.ts
@@ -8,3 +8,4 @@ export { gradient_text } from './1572';
 export { zoom } from './1667';
 export { test_pick } from './1747';
 export { issue_1760 } from './1760';
+export { textWordWrap } from './textWordWrap';
diff --git a/__tests__/demos/bugfix/textWordWrap.ts b/__tests__/demos/bugfix/textWordWrap.ts
@@ -0,0 +1,108 @@
+import { Canvas, Text, Rect } from '@antv/g';
+
+export async function textWordWrap(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  // fontSize: 12
+  const text0 = new Text({
+    style: {
+      x: 100,
+      y: 100,
+      fill: '#000000',
+      fontFamily: 'Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif',
+      // bold 12px Roboto, PingFangSC, "Microsoft YaHei", Arial, sans-serif
+      fontSize: 12,
+      fontWeight: 'normal',
+      linkTextFill: '#326EF4',
+      maxLines: 1,
+      opacity: 1,
+      // text: "哈哈哈哈哈哈哈哈",
+      text: '11111111',
+      // textAlign: "right",
+      textBaseline: 'top',
+      textOverflow: 'ellipsis',
+      wordWrap: true,
+      wordWrapWidth: 52,
+    },
+  });
+  const rect0 = new Rect({
+    style: {
+      x: text0.style.x,
+      y: text0.style.y,
+      width: text0.style.wordWrapWidth,
+      height: text0.style.fontSize,
+      stroke: '#000000',
+    },
+  });
+
+  // fontSize: 20
+  const text1 = new Text({
+    style: {
+      x: 100,
+      y: 300,
+      fill: '#000000',
+      fontFamily: 'Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif',
+      // bold 12px Roboto, PingFangSC, "Microsoft YaHei", Arial, sans-serif
+      fontSize: 20,
+      fontWeight: 'normal',
+      linkTextFill: '#326EF4',
+      maxLines: 1,
+      opacity: 1,
+      // text: '哈哈哈哈哈哈哈哈',
+      text: '11111111111111111',
+      // textAlign: "right",
+      textBaseline: 'top',
+      textOverflow: 'ellipsis',
+      wordWrap: true,
+      wordWrapWidth: 167,
+    },
+  });
+  const rect1 = new Rect({
+    style: {
+      x: text1.style.x,
+      y: text1.style.y,
+      width: text1.style.wordWrapWidth,
+      height: text1.style.fontSize,
+      stroke: '#000000',
+    },
+  });
+
+  // BUG: If there is a line break, no ellipsis will appear
+  const text2 = new Text({
+    style: {
+      x: 200,
+      y: 200,
+      fill: '#000000',
+      fontFamily: 'Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif',
+      // bold 12px Roboto, PingFangSC, "Microsoft YaHei", Arial, sans-serif
+      fontSize: 12,
+      fontWeight: 'normal',
+      linkTextFill: '#326EF4',
+      maxLines: 3,
+      opacity: 1,
+      text: '哈哈哈哈\n哈哈哈哈\n哈哈哈哈\n',
+      // textAlign: 'right',
+      textBaseline: 'top',
+      textOverflow: 'ellipsis',
+      wordWrap: true,
+      wordWrapWidth: 84,
+    },
+  });
+  const rect2 = new Rect({
+    style: {
+      x: text2.style.x,
+      y: text2.style.y,
+      width: text2.style.wordWrapWidth,
+      height: +text2.style.fontSize * text2.style.maxLines,
+      stroke: '#000000',
+    },
+  });
+
+  canvas.appendChild(text0);
+  canvas.appendChild(rect0);
+  canvas.appendChild(text1);
+  canvas.appendChild(rect1);
+  canvas.appendChild(text2);
+  canvas.appendChild(rect2);
+}
diff --git a/packages/g-camera-api/CHANGELOG.md b/packages/g-camera-api/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-camera-api
 
+## 2.0.22
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+
 ## 2.0.21
 
 ### Patch Changes

diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-camera-api",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "description": "A simple implementation of Camera API.",
   "keywords": [
     "antv",

diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @antv/g-canvas
 
+## 2.0.26
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+
 ## 2.0.25
 
 ### Patch Changes

diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",

diff --git a/packages/g-canvaskit/CHANGELOG.md b/packages/g-canvaskit/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @antv/g-canvaskit
 
+## 1.0.25
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+    -   @antv/[email protected]
+
 ## 1.0.24
 
 ### Patch Changes

diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",

diff --git a/packages/g-components/CHANGELOG.md b/packages/g-components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-components
 
+## 2.0.19
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+
 ## 2.0.18
 
 ### Patch Changes

diff --git a/packages/g-components/package.json b/packages/g-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-components",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "description": "Components for g",
   "keywords": [
     "antv",

diff --git a/packages/g-dom-mutation-observer-api/CHANGELOG.md b/packages/g-dom-mutation-observer-api/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-dom-mutation-observer-api
 
+## 2.0.19
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+
 ## 2.0.18
 
 ### Patch Changes

diff --git a/packages/g-dom-mutation-observer-api/package.json b/packages/g-dom-mutation-observer-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-dom-mutation-observer-api",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "description": "A simple implementation of DOM MutationObserver API.",
   "keywords": [
     "antv",

diff --git a/packages/g-gesture/CHANGELOG.md b/packages/g-gesture/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-gesture
 
+## 3.0.19
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+
 ## 3.0.18
 
 ### Patch Changes

diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "3.0.18",
+  "version": "3.0.19",
   "description": "G Gesture",
   "keywords": [
     "antv",

diff --git a/packages/g-image-exporter/CHANGELOG.md b/packages/g-image-exporter/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-image-exporter
 
+## 1.0.19
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+
 ## 1.0.18
 
 ### Patch Changes

diff --git a/packages/g-image-exporter/package.json b/packages/g-image-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-image-exporter",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "A image exporter for G using DOM API",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/CHANGELOG.md b/packages/g-lite/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-lite
 
+## 2.2.3
+
+### Patch Changes
+
+-   ad11268d: fix: ellipses are not displayed when the text contains line breaks
+
 ## 2.2.2
 
 ### Patch Changes

diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/src/services/TextService.ts b/packages/g-lite/src/services/TextService.ts
@@ -333,8 +333,6 @@ export class TextService {
     }
   }
 
-  private setGraphemeOnPath() {}
-
   private wordWrap(
     text: string,
     parsedStyle: ParsedTextStyleProps,
@@ -374,6 +372,31 @@ export class TextService {
       return prev + calcWidth(cur);
     }, 0);
 
+    function appendEllipsis(lineIndex: number) {
+      // If there is not enough space to display the string itself, it is clipped.
+      // @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#values
+      if (ellipsisWidth <= 0 || ellipsisWidth > maxWidth) {
+        return;
+      }
+
+      // Backspace from line's end.
+      const currentLineLength = lines[lineIndex].length;
+      let lastLineWidth = 0;
+      let lastLineIndex = currentLineLength;
+      for (let i = 0; i < currentLineLength; i++) {
+        const width = calcWidth(lines[lineIndex][i]);
+        if (lastLineWidth + width + ellipsisWidth > maxWidth) {
+          lastLineIndex = i;
+          break;
+        }
+
+        lastLineWidth += width;
+      }
+
+      lines[lineIndex] =
+        (lines[lineIndex] || '').slice(0, lastLineIndex) + ellipsis;
+    }
+
     const chars = Array.from(text);
     for (let i = 0; i < chars.length; i++) {
       const char = chars[i];
@@ -388,6 +411,11 @@ export class TextService {
         // exceed maxLines, break immediately
         if (currentIndex >= maxLines) {
           parsedStyle.isOverflowing = true;
+
+          if (i < chars.length - 1) {
+            appendEllipsis(currentIndex - 1);
+          }
+
           break;
         }
 
@@ -400,26 +428,7 @@ export class TextService {
         if (currentIndex + 1 >= maxLines) {
           parsedStyle.isOverflowing = true;
 
-          // If there is not enough space to display the string itself, it is clipped.
-          // @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#values
-          if (ellipsisWidth > 0 && ellipsisWidth <= maxWidth) {
-            // Backspace from line's end.
-            const currentLineLength = lines[currentIndex].length;
-            let lastLineWidth = 0;
-            let lastLineIndex = currentLineLength;
-            for (let i = 0; i < currentLineLength; i++) {
-              const width = calcWidth(lines[currentIndex][i]);
-              if (lastLineWidth + width + ellipsisWidth > maxWidth) {
-                lastLineIndex = i;
-                break;
-              }
-
-              lastLineWidth += width;
-            }
-
-            lines[currentIndex] =
-              (lines[currentIndex] || '').slice(0, lastLineIndex) + ellipsis;
-          }
+          appendEllipsis(currentIndex);
 
           break;
         }

diff --git a/packages/g-lottie-player/CHANGELOG.md b/packages/g-lottie-player/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-lottie-player
 
+## 1.0.19
+
+### Patch Changes
+
+-   Updated dependencies [ad11268d]
+    -   @antv/[email protected]
+
 ## 1.0.18
 
 ### Patch Changes

diff --git a/packages/g-lottie-player/package.json b/packages/g-lottie-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lottie-player",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "A lottie player for G",
   "keywords": [
     "antv",