feat: 暴露afterRealCellRender，这样能够更灵活的使用datacell (#1970)

Co-authored-by: 杨骥 <[email protected]>
antvis · Dec 9, 2022 · 66c5ab9 · 66c5ab9 · vercel · Dec 9, 2022
1 parent 528d2b6
commit 66c5ab9
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 0 deletions.
diff --git a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
@@ -475,6 +475,19 @@ describe('PivotSheet Tests', () => {
     expect(afterRender).toHaveBeenCalledTimes(1);
   });
 
+  test('should emit after real dataCell render', () => {
+    const afterRealDataCellRender = jest.fn();
+    const sheet = new PivotSheet(container, dataCfg, s2Options);
+
+    sheet.on(
+      S2Event.LAYOUT_AFTER_REAL_DATA_CELL_RENDER,
+      afterRealDataCellRender,
+    );
+    sheet.render();
+
+    expect(afterRealDataCellRender).toHaveBeenCalledTimes(1);
+  });
+
   test('should updatePagination', () => {
     s2.updatePagination({
       current: 2,

diff --git a/packages/s2-core/src/common/constant/events/basic.ts b/packages/s2-core/src/common/constant/events/basic.ts
@@ -66,6 +66,7 @@ export enum S2Event {
   LAYOUT_PAGINATION = 'layout:pagination',
   LAYOUT_COLLAPSE_ROWS = 'layout:collapsed-rows',
   LAYOUT_AFTER_COLLAPSE_ROWS = 'layout:after-collapsed-rows',
+  LAYOUT_AFTER_REAL_DATA_CELL_RENDER = 'layout:after-real-data-cell-render',
   LAYOUT_TREE_ROWS_COLLAPSE_ALL = 'layout:toggle-collapse-all',
   LAYOUT_COLS_EXPANDED = 'layout:table-col-expanded',
   LAYOUT_COLS_HIDDEN = 'layout:table-col-hidden',

diff --git a/packages/s2-core/src/common/interface/emitter.ts b/packages/s2-core/src/common/interface/emitter.ts
@@ -1,4 +1,5 @@
 import type { Event as CanvasEvent } from '@antv/g-canvas';
+import type { SpreadSheet } from '../../sheet-type';
 import type { DataCell } from '../../cell/data-cell';
 import type { RowCell } from '../../cell/row-cell';
 import type { ColCell } from '../../cell/col-cell';
@@ -145,6 +146,11 @@ export interface EmitterType {
     current: number;
   }) => void;
   [S2Event.LAYOUT_AFTER_HEADER_LAYOUT]: (data: LayoutResult) => void;
+  [S2Event.LAYOUT_AFTER_REAL_DATA_CELL_RENDER]: (options: {
+    add: [number, number][];
+    remove: [number, number][];
+    spreadsheet: SpreadSheet;
+  }) => void;
   /** @deprecated 请使用 S2Event.GLOBAL_SCROLL 代替 */
   [S2Event.LAYOUT_CELL_SCROLL]: (position: CellScrollPosition) => void;
   [S2Event.LAYOUT_COLS_EXPANDED]: (expandedNode: Node) => void;

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -1066,6 +1066,11 @@ export abstract class BaseFacet {
       );
     });
     this.preCellIndexes = indexes;
+    this.spreadsheet.emit(S2Event.LAYOUT_AFTER_REAL_DATA_CELL_RENDER, {
+      add,
+      remove,
+      spreadsheet: this.spreadsheet,
+    });
   };
 
   protected init() {

diff --git a/packages/s2-react/src/hooks/useEvents.ts b/packages/s2-react/src/hooks/useEvents.ts
@@ -220,6 +220,11 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) {
   useS2Event(S2Event.GLOBAL_LINK_FIELD_JUMP, props.onLinkFieldJump, s2);
   useS2Event(S2Event.GLOBAL_SCROLL, props.onScroll, s2);
   // ============== Auto 自动生成的 ================
+  useS2Event(
+    S2Event.LAYOUT_AFTER_REAL_DATA_CELL_RENDER,
+    props.onLayoutAfterRealDataCellRender,
+    s2,
+  );
   useS2Event(
     S2Event.ROW_CELL_BRUSH_SELECTION,
     props.onRowCellBrushSelection,

diff --git a/packages/s2-shared/src/interface.ts b/packages/s2-shared/src/interface.ts
@@ -204,6 +204,11 @@ export interface BaseSheetComponentProps<
   onScroll?: (position: CellScrollPosition) => void;
 
   // ============== Auto 自动生成的 ================
+  onLayoutAfterRealDataCellRender?: (options: {
+    add: [number, number][];
+    remove: [number, number][];
+    spreadsheet: SpreadSheet;
+  }) => void;
   onRowCellBrushSelection?: (event: GEvent) => void;
   onColCellBrushSelection?: (event: GEvent) => void;
 }

diff --git a/packages/s2-vue/src/hooks/useEvents.ts b/packages/s2-vue/src/hooks/useEvents.ts
@@ -316,6 +316,12 @@ export const useEvents = (
     useS2Event(s2Ref, emit, S2Event.GLOBAL_SCROLL, 'scroll');
 
     // ============== Auto 自动生成的 ================
+    useS2Event(
+      s2Ref,
+      emit,
+      S2Event.LAYOUT_AFTER_REAL_DATA_CELL_RENDER,
+      'layoutAfterRealDataCellRender',
+    );
     useS2Event(
       s2Ref,
       emit,

diff --git a/packages/s2-vue/src/utils/initPropAndEmits.ts b/packages/s2-vue/src/utils/initPropAndEmits.ts
@@ -180,6 +180,7 @@ export const initBaseSheetEmits = () => {
     'scroll',
     'hover',
     // ============== Auto 自动生成的 ================
+    'layoutAfterRealDataCellRender',
     'rowCellBrushSelection',
     'colCellBrushSelection',
   ];

diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
@@ -91,6 +91,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => {
 | 名称                     | 事件名                             | 描述                                        |
 | ----------------------- | --------------------------------- | ------------------------------------------ |
 | 表头布局完成                 | `S2Event.LAYOUT_AFTER_HEADER_LAYOUT`     | 行头和列头布局完成后触发                  |
+| 数值单元格布局完成                | `S2Event.LAYOUT_AFTER_REAL_DATA_CELL_RENDER`  | 当前可视范围数值单元格渲染完成后触发 |
 | 单元格虚拟滚动                 | `S2Event.LAYOUT_CELL_SCROLL`       | 已废弃，请使用 `S2Event.GLOBAL_SCROLL` 替代               |
 | 分页                 | `S2Event.LAYOUT_PAGINATION`       | 分页事件           |
 | 收起行头                 | `S2Event.LAYOUT_COLLAPSE_ROWS`       |     树状模式下收起行头的事件回调           |