fix: boundingRect.x of text is incorrect when overflow: 'truncate'.

memo info: This code used to be modified in commit bd2642e and bd2642e , where the `boundingRect.width` was modified from `style.width` to `innerWith` and then `outerWith`, but the `boundingRect.x` was not modified correspondingly. Related issue: apache/echarts#18306 . And #1091 located the problematic code successfully but the fix was not entirely correct.
ecomfe · Nov 16, 2024 · ecff1a8 · ecff1a8
1 parent e4766d8
commit ecff1a8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 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
@@ -32,7 +32,7 @@
         fixedLineHeight: false,
         lineHeight: 14,
         rich: true,
-        breakAll: false
+        overflow: 'break'
     }
 
 
@@ -72,23 +72,20 @@
 
     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
-            }
-        } : null;
-
         [enText, cnText].forEach((text, idx) => {
-            text.style.fontSize = cnText.style.fontSize = config.fontSize;
+            text.style.fontSize = config.fontSize;
+            text.style.width = config.width;
+            text.style.height = config.height;
+            text.style.overflow = config.overflow;
+            text.style.rich = config.rich ? {
+                highlight: {
+                    // padding: 4,
+                    backgroundColor: 'yellow',
+                    fontSize: 20
+                }
+            } : null;
 
             if (config.search) {
                 text.style.text = TEXTS[idx].replace(
@@ -121,7 +118,7 @@
     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);
+    gui.add(config, 'overflow', ['break', 'breakAll', 'truncate', 'none']).onChange(update);
 
     update();
     </script>