feat: 增加所有单元格的渲染完成事件

packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts

@@ -3,7 +3,7 @@ import { Canvas, CanvasEvent } from '@antv/g';
 import { cloneDeep, get, last } from 'lodash';
 import dataCfg from 'tests/data/simple-data.json';
 import { waitForRender } from 'tests/util';
-import { getContainer } from 'tests/util/helpers';
+import { createPivotSheet, getContainer } from 'tests/util/helpers';
 import type {
   BaseEvent,
   BaseTooltipOperatorMenuOptions,
@@ -498,7 +498,7 @@ describe('PivotSheet Tests', () => {
     expect(afterRender).toHaveBeenCalledTimes(1);
   });
 
-  test('should emit after real dataCell render', async () => {
+  test('should emit after real dataCell render event', async () => {
     const afterRealDataCellRender = jest.fn();
     const sheet = new PivotSheet(container, dataCfg, s2Options);
 
@@ -511,6 +511,35 @@ describe('PivotSheet Tests', () => {
     expect(afterRealDataCellRender).toHaveBeenCalledTimes(1);
   });
 
+  test('should emit data cell render event', async () => {
+    const cornerCellRender = jest.fn();
+    const rowCellRender = jest.fn();
+    const colCellRender = jest.fn();
+    const dataCellRender = jest.fn();
+    const seriesNumberCellRender = jest.fn();
+    const layoutCellRender = jest.fn();
+
+    const sheet = createPivotSheet(
+      {
+        ...s2Options,
+        showSeriesNumber: true,
+      },
+      { useSimpleData: false },
+    );
+
+    sheet.on(S2Event.CORNER_CELL_RENDER, cornerCellRender);
+    sheet.on(S2Event.ROW_CELL_RENDER, rowCellRender);
+    sheet.on(S2Event.COL_CELL_RENDER, colCellRender);
+    sheet.on(S2Event.DATA_CELL_RENDER, dataCellRender);
+    sheet.on(S2Event.SERIES_NUMBER_CELL_RENDER, seriesNumberCellRender);
+    sheet.on(S2Event.LAYOUT_CELL_RENDER, layoutCellRender);
+
+    await sheet.render();
+
+    expect(dataCellRender).toHaveBeenCalledTimes(8);
+    expect(layoutCellRender).toHaveBeenCalledTimes(20);
+  });
+
   test('should updatePagination', () => {
     s2.updatePagination({
       current: 2,

packages/s2-core/src/common/constant/events/basic.ts

@@ -11,6 +11,8 @@ export enum S2Event {
   ROW_CELL_BRUSH_SELECTION = 'row-cell:brush-selection',
   ROW_CELL_COLLAPSED = 'row-cell:collapsed',
   ROW_CELL_ALL_COLLAPSED = 'row-cell:all-collapsed',
+  ROW_CELL_RENDER = 'row-cell:render',
+
   // 内部用来通信的 event
   ROW_CELL_COLLAPSED__PRIVATE = 'row-cell:collapsed__private',
   ROW_CELL_ALL_COLLAPSED__PRIVATE = 'row-cell:all-collapsed__private',
@@ -26,6 +28,7 @@ export enum S2Event {
   COL_CELL_BRUSH_SELECTION = 'col-cell:brush-selection',
   COL_CELL_EXPANDED = 'col-cell:expanded',
   COL_CELL_HIDDEN = 'col-cell:hidden',
+  COL_CELL_RENDER = 'col-cell:render',
 
   /** ================ Data Cell ================  */
   DATA_CELL_HOVER = 'data-cell:hover',
@@ -47,6 +50,7 @@ export enum S2Event {
   CORNER_CELL_MOUSE_DOWN = 'corner-cell:mouse-down',
   CORNER_CELL_MOUSE_UP = 'corner-cell:mouse-up',
   CORNER_CELL_MOUSE_MOVE = 'corner-cell:mouse-move',
+  CORNER_CELL_RENDER = 'corner-cell:render',
 
   /** ================ Merged Cells ================  */
   MERGED_CELLS_HOVER = 'merged-cells:hover',
@@ -56,6 +60,10 @@ export enum S2Event {
   MERGED_CELLS_MOUSE_DOWN = 'merged-cells:mouse-down',
   MERGED_CELLS_MOUSE_UP = 'merged-cells:mouse-up',
   MERGED_CELLS_MOUSE_MOVE = 'merged-cells:mouse-move',
+  MERGED_CELLS_RENDER = 'merged-cells:render',
+
+  /** ================ SeriesNumber Cell ================  */
+  SERIES_NUMBER_CELL_RENDER = 'series-number-cell:render',
 
   /** ================ Sort ================  */
   RANGE_SORT = 'sort:range-sort',
@@ -67,7 +75,7 @@ export enum S2Event {
 
   /** ================ Table Layout ================  */
   LAYOUT_AFTER_HEADER_LAYOUT = 'layout:after-header-layout',
-  LAYOUT_CELL_MOUNTED = 'layout:cell-mounted',
+  LAYOUT_CELL_RENDER = 'layout:cell-render',
   LAYOUT_PAGINATION = 'layout:pagination',
   LAYOUT_AFTER_REAL_DATA_CELL_RENDER = 'layout:after-real-data-cell-render',
   LAYOUT_AFTER_RENDER = 'layout:after-render',

packages/s2-core/src/common/interface/basic.ts

@@ -370,11 +370,11 @@ export interface InternalFullyHeaderActionIcon extends HeaderActionIcon {
   isSortIcon?: boolean;
 }
 
-export type CellCallback<T extends BaseHeaderConfig> = (
+export type CellCallback<T extends BaseHeaderConfig, K extends S2CellType> = (
   node: Node,
   spreadsheet: SpreadSheet,
   headerConfig: T,
-) => S2CellType;
+) => K;
 
 export type DataCellCallback = (viewMeta: ViewMeta) => DataCell;
 

packages/s2-core/src/common/interface/emitter.ts

@@ -17,6 +17,7 @@ import type { FilterParam, SortParams, S2Style } from '../../common/interface';
 import type { RawData } from '../../common/interface/s2DataConfig';
 import type { CopyableList } from '../../utils/export/interface';
 import type { Node } from '../../facet/layout/node';
+import type { CornerCell, MergedCell, SeriesNumberCell } from '../../cell';
 import type { ResizeInfo } from './resize';
 
 type CanvasEventHandler = (event: CanvasEvent) => void;
@@ -94,6 +95,7 @@ export interface EmitterType {
   [S2Event.ROW_CELL_COLLAPSED__PRIVATE]: (data: RowCellCollapsedParams) => void;
   [S2Event.ROW_CELL_ALL_COLLAPSED]: (isCollapsed: boolean) => void;
   [S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE]: (isCollapsed: boolean) => void;
+  [S2Event.ROW_CELL_RENDER]: (cell: RowCell) => void;
 
   /** ================ Col Cell ================  */
   [S2Event.COL_CELL_MOUSE_DOWN]: CanvasEventHandler;
@@ -109,6 +111,7 @@ export interface EmitterType {
     currentHiddenColumnsInfo: HiddenColumnsInfo,
     hiddenColumnsDetail: HiddenColumnsInfo[],
   ) => void;
+  [S2Event.COL_CELL_RENDER]: (cell: ColCell) => void;
 
   /** ================ Corner Cell ================  */
   [S2Event.CORNER_CELL_MOUSE_MOVE]: CanvasEventHandler;
@@ -118,6 +121,7 @@ export interface EmitterType {
   [S2Event.CORNER_CELL_DOUBLE_CLICK]: CanvasEventHandler;
   [S2Event.CORNER_CELL_CONTEXT_MENU]: CanvasEventHandler;
   [S2Event.CORNER_CELL_MOUSE_UP]: CanvasEventHandler;
+  [S2Event.CORNER_CELL_RENDER]: (cell: CornerCell) => void;
 
   /** ================ Merged Cells ================  */
   [S2Event.MERGED_CELLS_MOUSE_DOWN]: CanvasEventHandler;
@@ -127,6 +131,10 @@ export interface EmitterType {
   [S2Event.MERGED_CELLS_CLICK]: CanvasEventHandler;
   [S2Event.MERGED_CELLS_CONTEXT_MENU]: CanvasEventHandler;
   [S2Event.MERGED_CELLS_DOUBLE_CLICK]: CanvasEventHandler;
+  [S2Event.MERGED_CELLS_RENDER]: (cell: MergedCell) => void;
+
+  /** ================ SeriesNumber Cell ================  */
+  [S2Event.SERIES_NUMBER_CELL_RENDER]: (cell: SeriesNumberCell) => void;
 
   /** ================ Layout ================  */
   [S2Event.LAYOUT_PAGINATION]: (data: {
@@ -141,7 +149,7 @@ export interface EmitterType {
     remove: [number, number][];
     spreadsheet: SpreadSheet;
   }) => void;
-  [S2Event.LAYOUT_CELL_MOUNTED]: (cell: S2CellType) => void;
+  [S2Event.LAYOUT_CELL_RENDER]: <T extends S2CellType>(cell: T) => void;
   [S2Event.LAYOUT_BEFORE_RENDER]: () => void;
   [S2Event.LAYOUT_AFTER_RENDER]: () => void;
   [S2Event.LAYOUT_DESTROY]: () => void;

packages/s2-core/src/common/interface/s2Options.ts

@@ -1,4 +1,5 @@
 import type { CanvasConfig } from '@antv/g';
+import type { CornerCell, RowCell, SeriesNumberCell } from '../../cell';
 import type {
   CellCallback,
   CornerHeaderCallback,
@@ -27,7 +28,7 @@ import type {
 import type { SpreadSheet } from '../../sheet-type';
 import type { CustomSVGIcon, HeaderActionIcon } from './basic';
 import type { Conditions } from './condition';
-import type { InteractionOptions } from './interaction';
+import type { InteractionOptions, S2CellType } from './interaction';
 import type { S2Style } from './style';
 import type {
   BaseTooltipOperatorMenuOptions,
@@ -164,25 +165,25 @@ export interface S2BasicOptions<
    * 自定义角头单元格
    * @see https://s2.antv.antgroup.com/examples/custom/custom-cell#corner-cell
    */
-  cornerCell?: CellCallback<CornerHeaderConfig>;
+  cornerCell?: CellCallback<CornerHeaderConfig, CornerCell>;
 
   /**
    * 自定义序号单元格
    * @see https://s2.antv.antgroup.com/examples/custom/custom-cell#series-number-cell
    */
-  seriesNumberCell?: CellCallback<BaseHeaderConfig>;
+  seriesNumberCell?: CellCallback<BaseHeaderConfig, SeriesNumberCell>;
 
   /**
    * 自定义行头单元格
    * @see https://s2.antv.antgroup.com/examples/custom/custom-cell#row-cell
    */
-  rowCell?: CellCallback<RowHeaderConfig>;
+  rowCell?: CellCallback<RowHeaderConfig, RowCell>;
 
   /**
    * 自定义列头单元格
    * @see https://s2.antv.antgroup.com/examples/custom/custom-cell#col-cell
    */
-  colCell?: CellCallback<ColHeaderConfig>;
+  colCell?: CellCallback<ColHeaderConfig, S2CellType>;
 
   /**
    * 自定义合并单元格

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

@@ -1278,7 +1278,7 @@ export abstract class BaseFacet {
   addDataCell = (cell: DataCell) => {
     this.panelScrollGroup?.appendChild(cell);
     this.spreadsheet.emit(S2Event.DATA_CELL_RENDER, cell);
-    this.spreadsheet.emit(S2Event.LAYOUT_CELL_MOUNTED, cell);
+    this.spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
   };
 
   realDataCellRender = (scrollX: number, scrollY: number) => {

packages/s2-core/src/facet/header/col.ts

@@ -4,8 +4,8 @@ import { ColCell } from '../../cell/col-cell';
 import {
   FRONT_GROUND_GROUP_COL_SCROLL_Z_INDEX,
   KEY_GROUP_COL_SCROLL,
+  S2Event,
 } from '../../common/constant';
-import type { S2CellType } from '../../common/interface';
 import type { Node } from '../layout/node';
 import { translateGroupX } from '../utils';
 import { BaseHeader } from './base';
@@ -25,7 +25,7 @@ export class ColHeader extends BaseHeader<ColHeaderConfig> {
     this.initScrollGroup();
   }
 
-  protected getCellInstance(node: Node): S2CellType {
+  protected getCellInstance(node: Node) {
     const { spreadsheet } = this.getHeaderConfig();
     const { colCell } = spreadsheet.options;
 
@@ -97,7 +97,7 @@ export class ColHeader extends BaseHeader<ColHeaderConfig> {
   }
 
   protected layout() {
-    const { nodes } = this.getHeaderConfig();
+    const { nodes, spreadsheet } = this.getHeaderConfig();
 
     each(nodes, (node) => {
       if (this.isColCellInRect(node)) {
@@ -108,6 +108,8 @@ export class ColHeader extends BaseHeader<ColHeaderConfig> {
         const group = this.getCellGroup(node);
 
         group?.appendChild(cell);
+        spreadsheet.emit(S2Event.COL_CELL_RENDER, cell as ColCell);
+        spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
       }
     });
   }

packages/s2-core/src/facet/header/corner.ts

@@ -7,6 +7,7 @@ import type { CornerBBox } from '../bbox/cornerBBox';
 import type { PanelBBox } from '../bbox/panelBBox';
 import { Node } from '../layout/node';
 import { translateGroupX } from '../utils';
+import { S2Event } from '../../common';
 import {
   getDefaultCornerText,
   getDefaultSeriesNumberText,
@@ -22,7 +23,7 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
     super(config);
   }
 
-  protected getCellInstance(node: Node): S2CellType {
+  protected getCellInstance(node: Node): CornerCell {
     const headerConfig = this.getHeaderConfig();
     const { spreadsheet } = headerConfig;
     const { cornerCell } = spreadsheet.options;
@@ -259,6 +260,8 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
       const cell = this.getCellInstance(node);
 
       this.appendChild(cell);
+      spreadsheet.emit(S2Event.CORNER_CELL_RENDER, cell);
+      spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
     });
   }
 

packages/s2-core/src/facet/header/row.ts

@@ -1,9 +1,9 @@
 import { Rect } from '@antv/g';
 import { each, isEmpty } from 'lodash';
 import { RowCell } from '../../cell';
-import type { S2CellType } from '../../common/interface';
 import type { Node } from '../layout/node';
 import { translateGroup } from '../utils';
+import { S2Event } from '../../common';
 import { BaseHeader } from './base';
 import type { RowHeaderConfig } from './interface';
 
@@ -15,7 +15,7 @@ export class RowHeader extends BaseHeader<RowHeaderConfig> {
     super(config);
   }
 
-  protected getCellInstance(node: Node): S2CellType {
+  protected getCellInstance(node: Node): RowCell {
     const headerConfig = this.getHeaderConfig();
     const { spreadsheet } = headerConfig;
     const { rowCell } = spreadsheet.options;
@@ -54,7 +54,7 @@ export class RowHeader extends BaseHeader<RowHeaderConfig> {
 
     each(nodes, (node) => {
       if (rowCellInRect(node) && node.height !== 0) {
-        let cell: S2CellType | null = null;
+        let cell: RowCell | null = null;
 
         // 首先由外部控制UI展示
         if (rowCell) {
@@ -70,6 +70,8 @@ export class RowHeader extends BaseHeader<RowHeaderConfig> {
 
         if (cell) {
           this.appendChild(cell);
+          spreadsheet.emit(S2Event.ROW_CELL_RENDER, cell);
+          spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
         }
       }
     });

packages/s2-core/src/facet/header/series-number.ts

@@ -1,12 +1,12 @@
 import { Rect } from '@antv/g';
 import { each } from 'lodash';
 import { SeriesNumberCell } from '../../cell/series-number-cell';
-import type { S2CellType } from '../../common/interface';
 import type { SpreadSheet } from '../../sheet-type/index';
 import type { PanelBBox } from '../bbox/panelBBox';
 import type { Hierarchy } from '../layout/hierarchy';
 import type { Node } from '../layout/node';
 import { translateGroup } from '../utils';
+import { S2Event } from '../../common';
 import { BaseHeader } from './base';
 import type { BaseHeaderConfig } from './interface';
 import { getSeriesNumberNodes } from './util';
@@ -16,7 +16,7 @@ export class SeriesNumberHeader extends BaseHeader<BaseHeaderConfig> {
     super(config);
   }
 
-  protected getCellInstance(node: Node): S2CellType {
+  protected getCellInstance(node: Node) {
     const headerConfig = this.getHeaderConfig();
     const { spreadsheet } = headerConfig;
     const { seriesNumberCell } = spreadsheet.options;
@@ -78,7 +78,12 @@ export class SeriesNumberHeader extends BaseHeader<BaseHeaderConfig> {
   }
 
   public layout() {
-    const { nodes, scrollY = 0, viewportHeight } = this.getHeaderConfig();
+    const {
+      nodes,
+      scrollY = 0,
+      viewportHeight,
+      spreadsheet,
+    } = this.getHeaderConfig();
 
     each(nodes, (node) => {
       const { y, height: cellHeight } = node;
@@ -97,6 +102,8 @@ export class SeriesNumberHeader extends BaseHeader<BaseHeaderConfig> {
 
       node.belongsCell = cell;
       this.appendChild(cell);
+      spreadsheet.emit(S2Event.SERIES_NUMBER_CELL_RENDER, cell);
+      spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
     });
   }
 

packages/s2-core/src/group/panel-scroll-group.ts

@@ -2,6 +2,7 @@ import { Group } from '@antv/g';
 import type { GridInfo } from '../common/interface';
 import type { GridGroupConstructorParameters } from '../common/interface/group';
 import { updateMergedCells } from '../utils/interaction/merge-cell';
+import { S2Event } from '../common';
 import type { MergedCell } from './../cell/merged-cell';
 import { KEY_GROUP_MERGED_CELLS } from './../common/constant/basic';
 import { GridGroup } from './grid-group';
@@ -36,8 +37,10 @@ export class PanelScrollGroup extends GridGroup {
     this.mergedCellsGroup.toFront();
   }
 
-  addMergeCell(mergeCell: MergedCell) {
-    this.mergedCellsGroup?.appendChild(mergeCell);
+  addMergeCell(mergedCell: MergedCell) {
+    this.mergedCellsGroup?.appendChild(mergedCell);
+    this.s2.emit(S2Event.MERGED_CELLS_RENDER, mergedCell);
+    this.s2.emit(S2Event.LAYOUT_CELL_RENDER, mergedCell);
   }
 
   update(gridInfo: GridInfo) {