fix(table-sheet): 修复明细表配置自定义行高后展示异常 close #2501 (#2521)

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

@@ -0,0 +1,63 @@
+/**
+ * @description spec for issue #2501
+ * https://github.com/antvis/S2/issues/2501
+ */
+
+import type { TableFacet } from '../../src/facet';
+import * as mockDataConfig from '../data/simple-table-data.json';
+import { getContainer } from '../util/helpers';
+import type { SpreadSheet, S2DataConfig, S2Options } from '@/index';
+import { TableSheet } from '@/sheet-type';
+
+const s2DataConfig: S2DataConfig = {
+  ...mockDataConfig,
+};
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 400,
+  style: {
+    rowCfg: {
+      heightByField: {
+        '0': 100,
+        '1': 150,
+      },
+    },
+  },
+};
+
+describe('Table Sheet Row Offsets Tests', () => {
+  let s2: SpreadSheet;
+
+  beforeEach(() => {
+    s2 = new TableSheet(getContainer(), s2DataConfig, s2Options);
+
+    s2.render();
+  });
+
+  test('should get correctly row offset data', () => {
+    expect((s2.facet as TableFacet).rowOffsets).toMatchInlineSnapshot(`
+      Array [
+        0,
+        100,
+        250,
+        280,
+      ]
+    `);
+  });
+
+  test('should get correctly data cell offset for heightByField', () => {
+    const { getCellOffsetY, getTotalHeight } = s2.facet.getViewCellHeights();
+
+    expect(getCellOffsetY(0)).toEqual(0);
+    expect(getCellOffsetY(1)).toEqual(100);
+    expect(getCellOffsetY(2)).toEqual(250);
+    expect(getTotalHeight()).toEqual(280);
+  });
+
+  test('should get correctly row layout for heightByField', () => {
+    const { getTotalLength } = s2.facet.getViewCellHeights();
+
+    expect(getTotalLength()).toEqual(3);
+  });
+});

packages/s2-core/src/facet/base-facet.ts

@@ -131,7 +131,7 @@ export abstract class BaseFacet {
   public abstract getContentHeight(): number;
 
   public abstract getViewCellHeights(
-    layoutResult: LayoutResult,
+    layoutResult?: LayoutResult,
   ): ViewCellHeights;
 
   protected scrollFrameId: ReturnType<typeof requestAnimationFrame> = null;

packages/s2-core/src/facet/frozen-facet.ts

@@ -634,9 +634,8 @@ export abstract class FrozenFacet extends BaseFacet {
     });
   }
 
-  protected init(): void {
+  protected init() {
     super.init();
-    this.initRowOffsets();
   }
 
   public render(): void {
@@ -689,27 +688,6 @@ export abstract class FrozenFacet extends BaseFacet {
     return { colCount, trailingColCount };
   };
 
-  private initRowOffsets() {
-    const { dataSet } = this.cfg;
-    const heightByField = get(
-      this.spreadsheet,
-      'options.style.rowCfg.heightByField',
-      {},
-    );
-    if (Object.keys(heightByField).length) {
-      const data = dataSet.getDisplayDataSet();
-      this.rowOffsets = [0];
-      let lastOffset = 0;
-      data.forEach((_, idx) => {
-        const currentHeight =
-          heightByField?.[String(idx)] ?? this.getDefaultCellHeight();
-        const currentOffset = lastOffset + currentHeight;
-        this.rowOffsets.push(currentOffset);
-        lastOffset = currentOffset;
-      });
-    }
-  }
-
   public getTotalHeightForRange = (start: number, end: number) => {
     if (start < 0 || end < 0) {
       return 0;

packages/s2-core/src/facet/table-facet.ts

@@ -487,15 +487,31 @@ export class TableFacet extends FrozenFacet {
     return colWidth;
   }
 
-  public getCellHeight(index: number) {
+  private initRowOffsets() {
+    const { dataSet } = this.cfg;
+    const { heightByField = {} } = this.spreadsheet.options.style?.rowCfg || {};
+
+    if (Object.keys(heightByField).length) {
+      const data = dataSet.getDisplayDataSet();
+      this.rowOffsets = [0];
+      let lastOffset = 0;
+
+      data.forEach((_, idx) => {
+        const currentHeight =
+          heightByField?.[String(idx)] ?? this.getDefaultCellHeight();
+        const currentOffset = lastOffset + currentHeight;
+        this.rowOffsets.push(currentOffset);
+        lastOffset = currentOffset;
+      });
+    }
+  }
+
+  public getCellHeight(rowIndex: number) {
     if (this.rowOffsets) {
-      const heightByField = get(
-        this.spreadsheet,
-        'options.style.rowCfg.heightByField',
-        {},
-      );
+      const { heightByField = {} } =
+        this.spreadsheet.options.style?.rowCfg || {};
+      const customHeight = heightByField?.[String(rowIndex)];
 
-      const customHeight = heightByField?.[String(index)];
       if (isNumber(customHeight)) {
         return customHeight;
       }
@@ -611,7 +627,9 @@ export class TableFacet extends FrozenFacet {
   };
 
   public init() {
+    this.initRowOffsets();
     super.init();
+
     const { width, height } = this.panelBBox;
     this.spreadsheet.panelGroup.setClip({
       type: 'rect',