Merge pull request #1100 from ecomfe/fix-text-truncate

fix: `boundingRect.x` of text is incorrect when `overflow: 'truncate'`.
ecomfe · Nov 20, 2024 · 4055b18 · 4055b18
2 parents e4766d8 + f7cf14f
commit 4055b18
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 64 deletions.
diff --git a/src/graphic/Text.ts b/src/graphic/Text.ts
@@ -602,7 +602,7 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
 
             if (fixedBoundingRect) {
                 el.setBoundingRect(new BoundingRect(
-                    adjustTextX(subElStyle.x, style.width, subElStyle.textAlign as TextAlign),
+                    adjustTextX(subElStyle.x, contentWidth, subElStyle.textAlign as TextAlign),
                     adjustTextY(subElStyle.y, calculatedLineHeight, subElStyle.textBaseline as TextVerticalAlign),
                     /**
                      * Text boundary should be the real text width.

diff --git a/test/text-overflow.html b/test/text-overflow.html
@@ -24,79 +24,90 @@
     var zr = zrender.init(document.getElementById('main'), {
         renderer: window.__ZRENDER__DEFAULT__RENDERER__
     });
+
     const config = {
         search: '',
-        width: 400,
+        width: 200,
         height: 400,
         fontSize: 13,
         fixedLineHeight: false,
         lineHeight: 14,
         rich: true,
-        breakAll: false
+        overflow: 'break',
+        lineOverflow: 'truncate',
+        align: null
     }
 
-
-    var enText = new zrender.Text({
-        style: {
-            text: LARGE_TEXT_EN,
-            fontSize: config.fontSize,
-            width: config.width,
-            padding: 10,
-            borderColor: '#000',
-            borderWidth: 1,
-
-            overflow: 'break',
-            lineOverflow: 'truncate',
-            ellipsis: '…'
-        }
-    });
-    zr.add(enText);
-
-    var cnText = new zrender.Text({
-        style: {
-            text: LARGE_TEXT_ZH,
-            fontSize: config.fontSize,
-            width: config.width,
-            padding: 10,
-            borderColor: '#000',
-            borderWidth: 1,
-
-            overflow: 'break',
-            lineOverflow: 'truncate',
-            ellipsis: '…',
-
-            x: config.width + 100
-        }
+    const gui = new dat.GUI();
+    gui.add(config, 'search').onChange(update);
+    gui.add(config, 'width', 10, 300).onChange(update);
+    gui.add(config, 'height', 10, 1600).onChange(update);
+    gui.add(config, 'fontSize', 1, 30).onChange(update);
+    gui.add(config, 'fixedLineHeight').onChange(update);
+    gui.add(config, 'lineHeight', 12, 50).onChange(update);
+    gui.add(config, 'rich').onChange(update);
+    gui.add(config, 'overflow', ['break', 'breakAll', 'truncate', 'none']).onChange(update);
+    gui.add(config, 'lineOverflow', ['truncate', null]).onChange(update);
+    gui.add(config, 'align', [null, 'left', 'center', 'right']).onChange(update);
+
+    const texts = [
+        LARGE_TEXT_EN,
+        LARGE_TEXT_ZH,
+        'abcde',
+        '红黄蓝'
+    ];
+    const textElementList = [];
+    texts.forEach(text => {
+        var el = new zrender.Text({
+            style: {
+                text: text,
+            }
+        });
+        zr.add(el);
+        textElementList.push(el);
     });
-    zr.add(cnText);
 
-    const TEXTS = [LARGE_TEXT_EN, LARGE_TEXT_ZH];
     function update() {
-        enText.style.width = cnText.style.width = config.width;
-        enText.style.height = cnText.style.height = config.height;
-
-        enText.style.overflow = config.breakAll ? 'breakAll' : 'break';
-
-        cnText.style.x = config.width + 100;
-
-        enText.style.rich = cnText.style.rich = config.rich ? {
-            highlight: {
-                // padding: 4,
-                backgroundColor: 'yellow',
-                fontSize: 20
+        let lastTextElement = null;
+
+        textElementList.forEach((text, idx) => {
+
+            text.style.padding = 10;
+            text.style.borderColor = '#000';
+            text.style.borderWidth = 1;
+            text.style.ellipsis = '…';
+
+            text.style.fontSize = config.fontSize;
+            text.style.width = config.width;
+            text.style.height = config.height;
+            text.style.overflow = config.overflow;
+            text.style.lineOverflow = config.lineOverflow;
+            text.style.align = config.align;
+
+            text.style.rich = config.rich ? {
+                highlight: {
+                    // padding: 4,
+                    backgroundColor: 'yellow',
+                    fontSize: 20
+                }
+            } : null;
+
+            text.style.x = lastTextElement
+                ? lastTextElement.style.x + lastTextElement.style.width + 50
+                : 0;
+            lastTextElement = text;
+
+            if (text.style.__originalText == null) {
+                text.style.__originalText = text.style.text;
             }
-        } : null;
-
-        [enText, cnText].forEach((text, idx) => {
-            text.style.fontSize = cnText.style.fontSize = config.fontSize;
 
             if (config.search) {
-                text.style.text = TEXTS[idx].replace(
+                text.style.text = text.style.__originalText.replace(
                     new RegExp(config.search, 'g'), `{highlight|${config.search}}`
                 );
             }
             else {
-                text.style.text = TEXTS[idx];
+                text.style.text = text.style.__originalText;
             }
 
             if (!config.fixedLineHeight) {
@@ -113,15 +124,6 @@
         zr.refreshImmediately();
         console.timeEnd('render');
     }
-    const gui = new dat.GUI();
-    gui.add(config, 'search').onChange(update);
-    gui.add(config, 'width', 100, 700).onChange(update);
-    gui.add(config, 'height', 10, 1600).onChange(update);
-    gui.add(config, 'fontSize', 1, 30).onChange(update);
-    gui.add(config, 'fixedLineHeight').onChange(update);
-    gui.add(config, 'lineHeight', 12, 50).onChange(update);
-    gui.add(config, 'rich').onChange(update);
-    gui.add(config, 'breakAll').onChange(update);
 
     update();
     </script>