fix: 修复列等宽布局模式下角头出现省略号 close #2726 (#2732)

* fix: 修复列等宽布局模式下角头出现省略号 close #2726 * test: 更新快照
antvis · May 17, 2024 · b4e07b9 · b4e07b9
1 parent 439162d
commit b4e07b9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 13 deletions.
diff --git a/packages/s2-core/__tests__/bugs/issue-2726-spec.ts b/packages/s2-core/__tests__/bugs/issue-2726-spec.ts
@@ -0,0 +1,50 @@
+/**
+ * @description spec for issue #2726
+ * https://github.com/antvis/S2/issues/2726
+ */
+import { LayoutWidthType, type S2Options } from '../../src';
+import { createPivotSheet } from '../util/helpers';
+import { SpreadSheet } from '@/sheet-type';
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 600,
+  style: {
+    layoutWidthType: LayoutWidthType.ColAdaptive,
+  },
+  showDefaultHeaderActionIcon: false,
+};
+
+describe('Col Adaptive Layout Tests', () => {
+  const expectTextOverflowing = (s2: SpreadSheet) => {
+    s2.facet.getCells().forEach((cell) => {
+      expect(cell.getTextShape().isOverflowing()).toBeFalsy();
+    });
+  };
+
+  test('should get max row header width by corner cell width', async () => {
+    const s2 = createPivotSheet(s2Options);
+
+    s2.setDataCfg({
+      meta: [
+        {
+          field: 'province',
+          name: '省份省份省份省份省份省份省份',
+        },
+        {
+          field: 'city',
+          name: '城市城市城市城市城市',
+        },
+      ],
+    });
+
+    await s2.render();
+
+    const cornerNodeWidthList = s2.facet
+      .getCornerNodes()
+      .map((node) => Math.floor(node.width));
+
+    expect(cornerNodeWidthList).toEqual([184, 136, 320]);
+    expectTextOverflowing(s2);
+  });
+});
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
@@ -8125,8 +8125,8 @@ Array [
     "actualTextWidth": 100,
     "height": 30,
     "multiLineActualTexts": Array [
-      "236723672361",
-      "111",
+      "2367236723611",
+      "11",
     ],
     "originalText": "236723672361111",
     "width": 103,
@@ -8405,9 +8405,9 @@ Array [
     "actualTextWidth": 189,
     "height": 56,
     "multiLineActualTexts": Array [
-      "778977897789",
-      "778977897789",
-      "7789",
+      "7789778977897",
+      "7897789778977",
+      "89",
     ],
     "originalText": "7789778977897789778977897789",
     "width": 103,
@@ -12871,8 +12871,8 @@ Array [
     "actualTextWidth": 188,
     "height": 61,
     "multiLineActualTexts": Array [
-      "778977897789778977",
-      "8977897789",
+      "7789778977897789778",
+      "977897789",
     ],
     "originalText": "7789778977897789778977897789",
     "width": 143.8,
@@ -29722,8 +29722,8 @@ Array [
     "actualTextWidth": 188,
     "height": 61,
     "multiLineActualTexts": Array [
-      "778977897789778977",
-      "8977897789",
+      "7789778977897789778",
+      "977897789",
     ],
     "originalText": "7789778977897789778977897789",
     "width": 143.8,

diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
@@ -470,8 +470,10 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
   }
 
   public drawTextShape() {
-    // G 遵循浏览器的规范, 空间不足以展示省略号时, 会裁剪文字, 而不是展示省略号 https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#ellipsis
-    const maxTextWidth = Math.max(this.getMaxTextWidth(), 0);
+    // 额外添加一像素余量，防止出现省略号 (文本和省略后的宽度一致): https://github.com/antvis/S2/issues/2726
+    const EXTRA_PIXEL = 1;
+    // G 遵循浏览器的规范, 空间不足以展示省略号时, 会裁剪文字, 而不是展示省略号: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#ellipsis
+    const maxTextWidth = Math.max(this.getMaxTextWidth(), 0) + EXTRA_PIXEL;
     const textStyle = this.getTextStyle();
 
     // 在坐标计算 (getTextPosition) 之前, 预渲染一次, 提前生成 textShape, 获得文字宽度, 用于计算 icon 绘制坐标

diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
@@ -725,8 +725,7 @@ export class PivotFacet extends FrozenFacet {
   }
 
   /**
-   *  计算平铺模式等宽条件下的列宽
-   * @returns number
+   * 计算平铺模式等宽条件下的列宽
    */
   private getAdaptGridColWidth(colLeafNodes: Node[], rowHeaderWidth?: number) {
     const { rows = [] } = this.spreadsheet.dataSet.fields;