fix: 明细表存在横向滚动条时多列头文本不居中 close #2199 (#2200)

Co-authored-by: Jinke Li <[email protected]>

Author: wywppkd

packages/s2-core/__tests__/bugs/issue-2199-spec.ts

@@ -0,0 +1,32 @@
+/**
+ * @description spec for issue #2199
+ * https://github.com/antvis/S2/issues/2199
+ * 明细表: 当有冻结列 + 列分组的情况下, 会出现列头文本不居中现象
+ */
+import { getContainer } from 'tests/util/helpers';
+import dataCfg from '../data/data-issue-2199.json';
+import { TableSheet } from '@/sheet-type';
+import type { S2Options } from '@/common/interface';
+
+const s2Options: S2Options = {
+  width: 300,
+  height: 480,
+  showSeriesNumber: true,
+  frozenColCount: 1,
+};
+
+describe('ColCell Text Center Tests', () => {
+  test('should draw text centered in cell', () => {
+    const s2 = new TableSheet(getContainer(), dataCfg, s2Options);
+    s2.render();
+
+    s2.facet.updateScrollOffset({ offsetX: { value: 500, animate: false } });
+
+    const node = s2.getColumnNodes(0).slice(-1)?.[0];
+    const cell = node?.belongsCell;
+    const { width: nodeWidth, x: nodeX } = node;
+    const { width: textWidth, x: textXActual } = cell.getContentArea();
+    const textXCalc = nodeX + (nodeWidth - textWidth) / 2;
+    expect(textXCalc).toBeCloseTo(textXActual);
+  });
+});

packages/s2-core/__tests__/data/data-issue-2199.json

@@ -0,0 +1,147 @@
+{
+  "fields": {
+    "columns": [
+      {
+        "key": "area",
+        "children": ["province", "city"]
+      },
+      "type",
+      {
+        "key": "money",
+        "children": [
+          {
+            "key": "price"
+          }
+        ]
+      }
+    ]
+  },
+  "meta": [
+    {
+      "field": "province",
+      "name": "省份"
+    },
+    {
+      "field": "city",
+      "name": "城市"
+    },
+    {
+      "field": "type",
+      "name": "商品类别"
+    },
+    {
+      "field": "price",
+      "name": "价格"
+    },
+    {
+      "field": "cost",
+      "name": "成本"
+    },
+    {
+      "field": "area",
+      "name": "位置"
+    },
+    {
+      "field": "money",
+      "name": "金额"
+    }
+  ],
+  "data": [
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "笔",
+      "price": 1
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "纸张",
+      "price": 2
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "笔",
+      "price": 17
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "纸张",
+      "price": 6
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "笔",
+      "price": 8
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "笔",
+      "price": 12
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "纸张",
+      "price": 3
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "纸张",
+      "price": 25
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "笔",
+      "price": 20
+    },
+    {
+      "province": "浙江",
+      "city": "杭州",
+      "type": "纸张",
+      "price": 10
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "笔",
+      "price": 15
+    },
+    {
+      "province": "浙江",
+      "city": "舟山",
+      "type": "纸张",
+      "price": 2
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "笔",
+      "price": 15
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "笔",
+      "price": 30
+    },
+    {
+      "province": "吉林",
+      "city": "长春",
+      "type": "纸张",
+      "price": 40
+    },
+    {
+      "province": "吉林",
+      "city": "白山",
+      "type": "纸张",
+      "price": 50
+    }
+  ]
+}

packages/s2-core/src/cell/col-cell.ts

@@ -202,8 +202,6 @@ export class ColCell extends HeaderCell {
       width: width + (scrollContainsRowHeader ? cornerWidth : 0),
     };
 
-    this.handleViewport(viewport);
-
     const { textAlign } = this.getTextStyle();
     const adjustedViewport = adjustColHeaderScrollingViewport(
       viewport,
@@ -521,13 +519,4 @@ export class ColCell extends HeaderCell {
   protected isLastColumn() {
     return isLastColumnAfterHidden(this.spreadsheet, this.meta.id);
   }
-
-  /**
-   * 计算文本位置时候需要，留给后代根据情况（固定列）覆盖
-   * @param viewport
-   * @returns viewport
-   */
-  protected handleViewport(viewport: AreaRange): AreaRange {
-    return viewport;
-  }
 }

packages/s2-core/src/cell/table-col-cell.ts

@@ -137,11 +137,4 @@ export class TableColCell extends ColCell {
       fill: backgroundColor,
     });
   }
-
-  protected handleViewport(viewport: AreaRange): AreaRange {
-    if (this.isFrozenCell()) {
-      viewport.start = 0;
-    }
-    return viewport;
-  }
 }