fix: ellipses are not displayed when the text contains line breaks (#…

…1835)

* fix: ellipses are not displayed when the text contains line breaks

* fix: edge cases for adding ellipsis to text wrapping

* fix: code modifications missed in the previous version

.changeset/cyan-bottles-complain.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-canvas-renderer': patch
+---
+
+fix: code modifications missed in the previous version

.changeset/dirty-balloons-prove.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-lite': patch
+---
+
+fix: ellipses are not displayed when the text contains line breaks

__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';

__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);
+}

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;
         }

packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts

@@ -49,6 +49,7 @@ export class ImageRenderer extends DefaultRenderer {
         .createDownSampledImage(src, object)
         .then((res) => {
           // rerender
+          // object.dirty();
           object.renderable.dirty = true;
           object.ownerDocument.defaultView.context.renderingService.dirtify();
         })
@@ -87,12 +88,17 @@ export class ImageRenderer extends DefaultRenderer {
 
     if (!imageCache?.gridSize) {
       this.imagePool
-        .createImageTiles(src, [], object)
-        .then(() => {
-          // rerender
-          object.renderable.dirty = true;
-          object.ownerDocument.defaultView.context.renderingService.dirtify();
-        })
+        .createImageTiles(
+          src,
+          [],
+          () => {
+            // rerender
+            // object.dirty();
+            object.renderable.dirty = true;
+            object.ownerDocument.defaultView.context.renderingService.dirtify();
+          },
+          object,
+        )
         .catch(() => {
           //
         });