fix: 修复紧凑模式文本出现省略号的问题

antvis · Nov 13, 2024 · db3d5f4 · db3d5f4
1 parent c0875ac
commit db3d5f4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 18 deletions.
diff --git a/packages/s2-core/__tests__/data/data-issue-2385.json b/packages/s2-core/__tests__/data/data-issue-2385.json
@@ -11,7 +11,7 @@
       "province": "浙江",
       "city": "杭州",
       "type": "纸张",
-      "price": "哈哈哈\n哈哈哈",
+      "price": "哈哈哈",
       "cost": "1.5"
     },
     {

diff --git a/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts b/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts
@@ -55,13 +55,15 @@ describe('Compare Layout Tests', () => {
 
       const colLeafNodes = s2.facet.getColLeafNodes();
 
-      expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(122);
-      expect(Math.floor(colLeafNodes[1].width)).toEqual(95);
+      expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(133);
+      expect(Math.floor(colLeafNodes[1].width)).toEqual(
+        options.showDefaultHeaderActionIcon ? 71 : 66,
+      );
       expectTextOverflowing(s2);
     },
   );
 
-  // 覆盖 (数值/中文/英文) 三种场景
+  // 覆盖 (数值/中文) 等场景
   test.each([
     { showDefaultHeaderActionIcon: true, fontSize: 20 },
     { showDefaultHeaderActionIcon: true, fontSize: 12 },
@@ -82,14 +84,15 @@ describe('Compare Layout Tests', () => {
     });
     await s2.render();
 
+    const expectWidth = options.showDefaultHeaderActionIcon ? 71 : 66;
     const isLargeFontSize = options.fontSize === 20;
     const colLeafNodes = s2.facet.getColLeafNodes();
 
     expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(
-      isLargeFontSize ? 191 : 122,
+      isLargeFontSize ? 209 : 133,
     );
     expect(Math.floor(colLeafNodes[1].width)).toEqual(
-      isLargeFontSize ? 145 : 95,
+      isLargeFontSize ? 97 : expectWidth,
     );
     expectTextOverflowing(s2);
   });
@@ -120,7 +123,7 @@ describe('Compare Layout Tests', () => {
 
     const colLeafNodes = s2.facet.getColLeafNodes();
     const { dataCellWidthList, colLeafNodeWidthList } = mapWidthList(s2);
-    const expectWidth = 183;
+    const expectWidth = 207;
 
     expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(expectWidth);
     expect(
@@ -168,11 +171,11 @@ describe('Compare Layout Tests', () => {
 
       expect(dataCellWidthList).toEqual(
         options.showDefaultHeaderActionIcon
-          ? [209, 209, 209, 209, 163, 163, 163, 163, 85, 85, 85, 85]
-          : [209, 209, 209, 209, 163, 163, 163, 163, 69, 69, 69, 69],
+          ? [227, 227, 227, 227, 115, 115, 115, 115, 93, 93, 93, 93]
+          : [227, 227, 227, 227, 115, 115, 115, 115, 71, 71, 71, 71],
       );
       expect(colLeafNodeWidthList).toEqual(
-        options.showDefaultHeaderActionIcon ? [209, 163, 85] : [209, 163, 69],
+        options.showDefaultHeaderActionIcon ? [227, 115, 93] : [227, 115, 71],
       );
       expectTextOverflowing(s2);
     },

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -2294,12 +2294,25 @@ export abstract class BaseFacet {
   /**
    * @tip 和 this.spreadsheet.measureTextWidth() 的区别在于:
    * 1. 额外添加一像素余量，防止 maxLabel 有多个同样长度情况下，一些 label 不能展示完全, 出现省略号
-   * 2. 测量时, 文本宽度向上取整, 避免子像素的不一致性
+   * 2. 测量时, 文本宽度取整, 避免子像素的不一致性
+   * 3. TODO: 由于 G 测量文本是一个一个字符进行计算, 在数字/英文等场景会有较大误差, 这里为了防止紧凑模式出现省略号, 暂时保持一样的策略
    */
-  protected measureTextWidth(text: SimpleData, font: unknown): number {
+  protected measureTextWidth(
+    text: SimpleData,
+    font: unknown,
+    roughly = true,
+  ): number {
     const EXTRA_PIXEL = 1;
-    const defaultWidth = this.spreadsheet.measureTextWidth(text, font);
 
-    return Math.ceil(defaultWidth) + EXTRA_PIXEL;
+    if (roughly) {
+      return (
+        Math.ceil(this.spreadsheet.measureTextWidthRoughly(text, font)) +
+        EXTRA_PIXEL
+      );
+    }
+
+    return (
+      Math.ceil(this.spreadsheet.measureTextWidth(text, font)) + EXTRA_PIXEL
+    );
   }
 }
diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
@@ -806,7 +806,7 @@ export class PivotFacet extends FrozenFacet {
      * 额外增加 1，当内容和容器宽度恰好相等时会出现换行
      */
     const maxLabelWidth =
-      this.measureTextWidth(treeHeaderLabel, cornerCellTextStyle) +
+      this.measureTextWidth(treeHeaderLabel, cornerCellTextStyle, false) +
       cornerIconStyle.size * 2 +
       cornerIconStyle.margin?.left +
       cornerIconStyle.margin?.right +

diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts
@@ -117,7 +117,7 @@ export class TableFacet extends FrozenFacet {
     const iconX = viewportWidth / 2 - icon.width / 2;
     const iconY = height / 2 + maxY - icon.height / 2 + icon.margin.top;
     const text = empty?.description ?? i18n('暂无数据');
-    const descWidth = this.measureTextWidth(text, description);
+    const descWidth = this.measureTextWidth(text, description, false);
     const descX = viewportWidth / 2 - descWidth / 2;
     const descY = iconY + icon.height + icon.margin.bottom;
 

diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -817,7 +817,10 @@ export abstract class SpreadSheet extends EE {
    * @param font 文本 css 样式
    * @returns 文本宽度
    */
-  public measureTextWidthRoughly = (text: any, font: any = {}): number => {
+  public measureTextWidthRoughly = (
+    text: SimpleData,
+    font: unknown,
+  ): number => {
     const alphaWidth = this.measureTextWidth('a', font);
     const chineseWidth = this.measureTextWidth('蚂', font);
 
@@ -828,7 +831,7 @@ export abstract class SpreadSheet extends EE {
     }
 
     // eslint-disable-next-line no-restricted-syntax
-    for (const char of text) {
+    for (const char of String(text)) {
       const code = char.charCodeAt(0);
 
       // /[\u0000-\u00ff]/