From 832ed8053471ae23f7ed409627d8dbb36a2acb2f Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Wed, 29 Nov 2023 19:25:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=89=80=E6=9C=89?= =?UTF-8?q?=E5=8D=95=E5=85=83=E6=A0=BC=E7=9A=84=E6=B8=B2=E6=9F=93=E5=AE=8C?= =?UTF-8?q?=E6=88=90=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../unit/sheet-type/pivot-sheet-spec.ts | 33 +++++++++++++++-- .../src/common/constant/events/basic.ts | 10 +++++- .../s2-core/src/common/interface/basic.ts | 4 +-- .../s2-core/src/common/interface/emitter.ts | 10 +++++- .../s2-core/src/common/interface/s2Options.ts | 11 +++--- packages/s2-core/src/facet/base-facet.ts | 2 +- packages/s2-core/src/facet/header/col.ts | 8 +++-- packages/s2-core/src/facet/header/corner.ts | 5 ++- packages/s2-core/src/facet/header/row.ts | 8 +++-- .../s2-core/src/facet/header/series-number.ts | 13 +++++-- .../s2-core/src/group/panel-scroll-group.ts | 7 ++-- .../__tests__/unit/hooks/useEvents-spec.ts | 35 +++++++++++++++++-- .../playground/components/ChartSheet.tsx | 13 +------ .../components/sheets/chart-sheet/index.tsx | 15 ++++++-- packages/s2-react/src/hooks/useEvents.ts | 14 ++++++-- packages/s2-shared/src/interface.ts | 16 +++++++-- .../docs/api/components/sheet-component.en.md | 4 +-- .../docs/api/components/sheet-component.zh.md | 6 ++-- s2-site/docs/api/general/S2Event.zh.md | 32 ++++++++++++++--- 19 files changed, 192 insertions(+), 54 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 index 1b02c7e310..7b9fde6396 100644 --- a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts +++ b/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, diff --git a/packages/s2-core/src/common/constant/events/basic.ts b/packages/s2-core/src/common/constant/events/basic.ts index 9a1335845a..fcda31b006 100644 --- a/packages/s2-core/src/common/constant/events/basic.ts +++ b/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', diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts index 9d9736a636..65b1d3ac64 100644 --- a/packages/s2-core/src/common/interface/basic.ts +++ b/packages/s2-core/src/common/interface/basic.ts @@ -370,11 +370,11 @@ export interface InternalFullyHeaderActionIcon extends HeaderActionIcon { isSortIcon?: boolean; } -export type CellCallback = ( +export type CellCallback = ( node: Node, spreadsheet: SpreadSheet, headerConfig: T, -) => S2CellType; +) => K; export type DataCellCallback = (viewMeta: ViewMeta) => DataCell; diff --git a/packages/s2-core/src/common/interface/emitter.ts b/packages/s2-core/src/common/interface/emitter.ts index d6a51ae0c8..9d22472eee 100644 --- a/packages/s2-core/src/common/interface/emitter.ts +++ b/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]: (cell: T) => void; [S2Event.LAYOUT_BEFORE_RENDER]: () => void; [S2Event.LAYOUT_AFTER_RENDER]: () => void; [S2Event.LAYOUT_DESTROY]: () => void; diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts index a238332d3c..8531a8ce5c 100644 --- a/packages/s2-core/src/common/interface/s2Options.ts +++ b/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; + cornerCell?: CellCallback; /** * 自定义序号单元格 * @see https://s2.antv.antgroup.com/examples/custom/custom-cell#series-number-cell */ - seriesNumberCell?: CellCallback; + seriesNumberCell?: CellCallback; /** * 自定义行头单元格 * @see https://s2.antv.antgroup.com/examples/custom/custom-cell#row-cell */ - rowCell?: CellCallback; + rowCell?: CellCallback; /** * 自定义列头单元格 * @see https://s2.antv.antgroup.com/examples/custom/custom-cell#col-cell */ - colCell?: CellCallback; + colCell?: CellCallback; /** * 自定义合并单元格 diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts index 97c85a4748..3a7009eade 100644 --- a/packages/s2-core/src/facet/base-facet.ts +++ b/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) => { diff --git a/packages/s2-core/src/facet/header/col.ts b/packages/s2-core/src/facet/header/col.ts index e043204c0a..6f5f2c9ab5 100644 --- a/packages/s2-core/src/facet/header/col.ts +++ b/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 { 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 { } 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 { const group = this.getCellGroup(node); group?.appendChild(cell); + spreadsheet.emit(S2Event.COL_CELL_RENDER, cell as ColCell); + spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell); } }); } diff --git a/packages/s2-core/src/facet/header/corner.ts b/packages/s2-core/src/facet/header/corner.ts index 0309060a90..0b7cb4f848 100644 --- a/packages/s2-core/src/facet/header/corner.ts +++ b/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 { 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 { const cell = this.getCellInstance(node); this.appendChild(cell); + spreadsheet.emit(S2Event.CORNER_CELL_RENDER, cell); + spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell); }); } diff --git a/packages/s2-core/src/facet/header/row.ts b/packages/s2-core/src/facet/header/row.ts index 149bbda705..dafbd5eaf2 100644 --- a/packages/s2-core/src/facet/header/row.ts +++ b/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 { 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 { 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 { if (cell) { this.appendChild(cell); + spreadsheet.emit(S2Event.ROW_CELL_RENDER, cell); + spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell); } } }); diff --git a/packages/s2-core/src/facet/header/series-number.ts b/packages/s2-core/src/facet/header/series-number.ts index cf09e628e6..768ee4a14e 100644 --- a/packages/s2-core/src/facet/header/series-number.ts +++ b/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 { 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 { } 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 { node.belongsCell = cell; this.appendChild(cell); + spreadsheet.emit(S2Event.SERIES_NUMBER_CELL_RENDER, cell); + spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell); }); } diff --git a/packages/s2-core/src/group/panel-scroll-group.ts b/packages/s2-core/src/group/panel-scroll-group.ts index db203ead07..315355e3b7 100644 --- a/packages/s2-core/src/group/panel-scroll-group.ts +++ b/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) { diff --git a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts index cd34d114af..9ab2db6c48 100644 --- a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts +++ b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts @@ -48,8 +48,8 @@ const S2EventCases: Array<{ event: S2Event; name: string }> = [ name: 'onRangeFiltered', }, { - event: S2Event.LAYOUT_CELL_MOUNTED, - name: 'onLayoutCellMounted', + event: S2Event.LAYOUT_CELL_RENDER, + name: 'onLayoutCellRender', }, { event: S2Event.LAYOUT_AFTER_HEADER_LAYOUT, @@ -161,6 +161,7 @@ const S2EventCases: Array<{ event: S2Event; name: string }> = [ }); const cellEventCases = [ + // ============== Row Cell ==================== { event: S2Event.ROW_CELL_HOVER, name: 'onRowCellHover', @@ -185,6 +186,12 @@ const cellEventCases = [ event: S2Event.ROW_CELL_MOUSE_MOVE, name: 'onRowCellMouseMove', }, + { + event: S2Event.ROW_CELL_RENDER, + name: 'onRowCellRender', + }, + + // ============== Col Cell ==================== { event: S2Event.COL_CELL_HOVER, name: 'onColCellHover', @@ -217,6 +224,12 @@ const cellEventCases = [ event: S2Event.COL_CELL_HIDDEN, name: 'onColCellHidden', }, + { + event: S2Event.COL_CELL_RENDER, + name: 'onColCellRender', + }, + + // ============== Data Cell ==================== { event: S2Event.DATA_CELL_HOVER, name: 'onDataCellHover', @@ -253,6 +266,8 @@ const cellEventCases = [ event: S2Event.DATA_CELL_RENDER, name: 'onDataCellRender', }, + + // ============== Corner Cell ==================== { event: S2Event.CORNER_CELL_HOVER, name: 'onCornerCellHover', @@ -277,6 +292,12 @@ const cellEventCases = [ event: S2Event.CORNER_CELL_MOUSE_MOVE, name: 'onCornerCellMouseMove', }, + { + event: S2Event.CORNER_CELL_RENDER, + name: 'onCornerCellRender', + }, + + // ============== Merged Cells ==================== { event: S2Event.MERGED_CELLS_HOVER, name: 'onMergedCellsHover', @@ -301,6 +322,16 @@ const cellEventCases = [ event: S2Event.MERGED_CELLS_MOUSE_MOVE, name: 'onMergedCellsMouseMove', }, + { + event: S2Event.MERGED_CELLS_RENDER, + name: 'onMergedCellsRender', + }, + + // ============== SeriesNumber Cell ==================== + { + event: S2Event.SERIES_NUMBER_CELL_RENDER, + name: 'onSeriesNumberCellRender', + }, ].map((i) => { return { ...i, diff --git a/packages/s2-react/playground/components/ChartSheet.tsx b/packages/s2-react/playground/components/ChartSheet.tsx index a22de24439..8603af3228 100644 --- a/packages/s2-react/playground/components/ChartSheet.tsx +++ b/packages/s2-react/playground/components/ChartSheet.tsx @@ -27,18 +27,7 @@ const options: SheetComponentOptions = { multiSelection: true, overscrollBehavior: 'none', }, - style: { - colCell: { - hideValue: true, - }, - rowCell: { - width: 100, - }, - dataCell: { - width: 500, - height: 400, - }, - }, + style: {}, }; const onDataCellRender: SheetComponentsProps['onDataCellRender'] = (cell) => { diff --git a/packages/s2-react/src/components/sheets/chart-sheet/index.tsx b/packages/s2-react/src/components/sheets/chart-sheet/index.tsx index f4af23b0b1..ad7d9b1559 100644 --- a/packages/s2-react/src/components/sheets/chart-sheet/index.tsx +++ b/packages/s2-react/src/components/sheets/chart-sheet/index.tsx @@ -15,6 +15,18 @@ export const ChartSheet: React.FC = React.memo( interaction: { hoverFocus: false, }, + style: { + colCell: { + hideValue: true, + }, + rowCell: { + width: 100, + }, + dataCell: { + width: 400, + height: 400, + }, + }, // TODO: 刷选时获取不到正确的 tooltip 配置 tooltip: { // cornerCell: { @@ -28,9 +40,6 @@ export const ChartSheet: React.FC = React.memo( // }, // enable: false, enable: true, - dataCell: { - enable: false, - }, }, }; diff --git a/packages/s2-react/src/hooks/useEvents.ts b/packages/s2-react/src/hooks/useEvents.ts index 60af60c9a5..3232e3f75a 100644 --- a/packages/s2-react/src/hooks/useEvents.ts +++ b/packages/s2-react/src/hooks/useEvents.ts @@ -63,6 +63,7 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) { useS2Event(S2Event.ROW_CELL_SCROLL, props.onRowCellScroll, s2); useS2Event(S2Event.ROW_CELL_COLLAPSED, props.onRowCellCollapsed, s2); useS2Event(S2Event.ROW_CELL_ALL_COLLAPSED, props.onRowCellAllCollapsed, s2); + useS2Event(S2Event.ROW_CELL_RENDER, props.onRowCellRender, s2); // ============== Col Cell ==================== useCellEvent(S2Event.COL_CELL_HOVER, props.onColCellHover, s2); @@ -74,6 +75,7 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) { useCellEvent(S2Event.COL_CELL_MOUSE_MOVE, props.onColCellMouseMove, s2); useS2Event(S2Event.COL_CELL_EXPANDED, props.onColCellExpanded, s2); useS2Event(S2Event.COL_CELL_HIDDEN, props.onColCellHidden, s2); + useS2Event(S2Event.COL_CELL_RENDER, props.onColCellRender, s2); // ============== Data Cell ==================== useCellEvent(S2Event.DATA_CELL_HOVER, props.onDataCellHover, s2); @@ -107,6 +109,7 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) { useCellEvent(S2Event.CORNER_CELL_MOUSE_DOWN, props.onCornerCellMouseDown, s2); useCellEvent(S2Event.CORNER_CELL_MOUSE_UP, props.onCornerCellMouseUp, s2); useCellEvent(S2Event.CORNER_CELL_MOUSE_MOVE, props.onCornerCellMouseMove, s2); + useS2Event(S2Event.CORNER_CELL_RENDER, props.onCornerCellRender, s2); // ============== Merged Cells ==================== useCellEvent(S2Event.MERGED_CELLS_HOVER, props.onMergedCellsHover, s2); @@ -121,7 +124,6 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) { props.onMergedCellsContextMenu, s2, ); - useCellEvent( S2Event.MERGED_CELLS_MOUSE_DOWN, props.onMergedCellsMouseDown, @@ -133,6 +135,14 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) { props.onMergedCellsMouseMove, s2, ); + useS2Event(S2Event.MERGED_CELLS_RENDER, props.onMergedCellsRender, s2); + + /** ================ SeriesNumber Cell ================ */ + useS2Event( + S2Event.SERIES_NUMBER_CELL_RENDER, + props.onSeriesNumberCellRender, + s2, + ); // ============== Sort ==================== useS2Event(S2Event.RANGE_SORT, props.onRangeSort, s2); @@ -149,7 +159,7 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) { s2, ); useS2Event(S2Event.LAYOUT_PAGINATION, props.onLayoutPagination, s2); - useS2Event(S2Event.LAYOUT_CELL_MOUNTED, props.onLayoutCellMounted, s2); + useS2Event(S2Event.LAYOUT_CELL_RENDER, props.onLayoutCellRender, s2); useS2Event(S2Event.LAYOUT_BEFORE_RENDER, props.onBeforeRender, s2); useS2Event(S2Event.LAYOUT_AFTER_RENDER, props.onAfterRender, s2); useS2Event(S2Event.LAYOUT_DESTROY, props.onDestroy, s2, true); diff --git a/packages/s2-shared/src/interface.ts b/packages/s2-shared/src/interface.ts index 42c65aa1bb..a5c343847d 100644 --- a/packages/s2-shared/src/interface.ts +++ b/packages/s2-shared/src/interface.ts @@ -1,11 +1,14 @@ import type { BaseTooltipOperatorMenuOptions, CellScrollPosition, + ColCell, + CornerCell, DataCell, GEvent, HeaderActionIcon, HiddenColumnsInfo, LayoutResult, + MergedCell, Node, Pagination, RawData, @@ -17,6 +20,7 @@ import type { S2MountContainer, S2Options, S2RenderOptions, + SeriesNumberCell, SortParams, SpreadSheet, TargetCellInfo, @@ -91,6 +95,7 @@ export interface BaseSheetComponentProps< onRowCellCollapsed?: (params: RowCellCollapsedParams) => void; onRowCellAllCollapsed?: (isCollapsed: boolean) => void; onRowCellScroll?: (position: CellScrollPosition) => void; + onRowCellRender?: (cell: ColCell) => void; // ============== Col Cell ==================== onColCellHover?: (data: TargetCellInfo) => void; @@ -106,6 +111,8 @@ export interface BaseSheetComponentProps< hiddenColumnsDetail: HiddenColumnsInfo[]; }) => void; + onColCellRender?: (cell: ColCell) => void; + // ============== Data Cell ==================== onDataCellHover?: (data: TargetCellInfo) => void; onDataCellClick?: (data: TargetCellInfo) => void; @@ -116,7 +123,7 @@ export interface BaseSheetComponentProps< onDataCellMouseMove?: (data: TargetCellInfo) => void; onDataCellBrushSelection?: (brushRangeDataCells: DataCell[]) => void; onDataCellSelectMove?: (metaList: ViewMetaData[]) => void; - onDataCellRender?: (dataCell: DataCell) => void; + onDataCellRender?: (cell: DataCell) => void; // ============== Corner Cell ==================== onCornerCellHover?: (data: TargetCellInfo) => void; @@ -126,6 +133,7 @@ export interface BaseSheetComponentProps< onCornerCellMouseDown?: (data: TargetCellInfo) => void; onCornerCellMouseUp?: (data: TargetCellInfo) => void; onCornerCellMouseMove?: (data: TargetCellInfo) => void; + onCornerCellRender?: (cell: CornerCell) => void; // ============== Merged Cells ==================== onMergedCellsHover?: (data: TargetCellInfo) => void; @@ -135,6 +143,10 @@ export interface BaseSheetComponentProps< onMergedCellsMouseDown?: (data: TargetCellInfo) => void; onMergedCellsMouseUp?: (data: TargetCellInfo) => void; onMergedCellsMouseMove?: (data: TargetCellInfo) => void; + onMergedCellsRender?: (cell: MergedCell) => void; + + /** ================ SeriesNumber Cell ================ */ + onSeriesNumberCellRender?: (cell: SeriesNumberCell) => void; // ============== Sort ==================== onRangeSort?: (params: SortParams) => void; @@ -150,7 +162,7 @@ export interface BaseSheetComponentProps< // ============== Layout ==================== onLayoutAfterHeaderLayout?: (layoutResult: LayoutResult) => void; onLayoutPagination?: (data: LayoutPaginationParams) => void; - onLayoutCellMounted?: (cell: S2CellType) => void; + onLayoutCellRender?: (cell: T) => void; onBeforeRender?: () => void; onAfterRender?: () => void; onMounted?: (spreadsheet: SpreadSheet) => void; diff --git a/s2-site/docs/api/components/sheet-component.en.md b/s2-site/docs/api/components/sheet-component.en.md index 8cd7b6fe08..b3e33898e4 100644 --- a/s2-site/docs/api/components/sheet-component.en.md +++ b/s2-site/docs/api/components/sheet-component.en.md @@ -65,7 +65,7 @@ Function description: The props parameter of the React SheetComponent component | onRangeSorted | A callback event is triggered when the sorting in the group ends (for now, only pivot tables are supported) | (event: CanvasEvent ) => void; | | | | onRangeFilter | Trigger callback event when filtering | (data: { filterKey: string; filteredValues: string[] } ) => void; | | | | onRangeFiltered | Trigger callback event after filtering | (data: DataType[] ) => void; | | | -| onLayoutCellMounted | The header layout cell mount completed event | cell: S2CellType | | | +| onLayoutCellRender | The header layout cell mount completed event | cell: S2CellType | | | | onLayoutAfterHeaderLayout | Header layout structure preparation completion event | (layoutResult: [LayoutResult](/zh/docs/api/general/S2Options/#layoutresult) ) => void; | | | | onLayoutPagination | pagination event | ({ pageSize: number; pageCount: number; total: number; current: number;} ) => void; | | | | onLayoutCellScroll | Cell scroll event (**Deprecated, please use `onScroll` instead**) | ({position: [CellScrollPosition](#cellscrollposition)} ) => void; | | | @@ -178,7 +178,7 @@ Function description: The props of the Vue SheetComponent component, such as ` void; | | | | onRangeFilter | Trigger callback event when filtering | (data: { filterKey: string; filteredValues: string[] } ) => void; | | | | onRangeFiltered | Trigger callback event after filtering | (data: DataType[] ) => void; | | | -| onLayoutCellMounted | The header layout cell mount completed event | cell: S2CellType | | | +| onLayoutCellRender | The header layout cell mount completed event | cell: S2CellType | | | | onLayoutAfterHeaderLayout | Header layout structure preparation completion event | (layoutResult: [LayoutResult](/zh/docs/api/general/S2Options/#layoutresult) ) => void; | | | | onLayoutPagination | pagination event | ({ pageSize: number; pageCount: number; total: number; current: number;} ) => void; | | | | onLayoutCellScroll | Cell scroll event (**Deprecated, please use `onScroll` instead**) | ({position: [CellScrollPosition](#cellscrollposition)} ) => void; | | | diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md index cd217852e9..c7e1ff872e 100644 --- a/s2-site/docs/api/components/sheet-component.zh.md +++ b/s2-site/docs/api/components/sheet-component.zh.md @@ -65,7 +65,7 @@ order: 0 | onRangeSorted | 组内排序结束触发回调事件（暂只支持透视表） | (event: CanvasEvent ) => void; | | | | onRangeFilter | 筛选时触发回调事件 | (data: { filterKey: string; filteredValues: string[] } ) => void; | | | | onRangeFiltered | 筛选结束触发回调事件 | (data: DataType[] ) => void; | | | -| onLayoutCellMounted | 表头布局单元格挂载完成事件 | cell: S2CellType | | | +| onLayoutCellRender | 单个单元格布局渲染完成事件 | cell: [S2CellType](/docs/api/basic-class/base-cell) | | | | onLayoutAfterHeaderLayout | 表头布局结构准备完成事件 | (layoutResult: [LayoutResult](/zh/docs/api/general/S2Options/#layoutresult) ) => void; | | | | onLayoutPagination | 分页事件 | ({ pageSize: number; pageCount: number; total: number; current: number;} ) => void; | | | | onLayoutCellScroll | 单元格滚动事件 (**已废弃，请使用 `onScroll` 代替**) | ({position: [CellScrollPosition](#cellscrollposition)} ) => void; | | | @@ -94,7 +94,7 @@ order: 0 | onMouseUp | 表格鼠标松开事件 | (event: CanvasEvent) => void | | | | onSelected | 单元格选中事件 | (cells: ( [Cell](/docs/api/basic-class/base-cell)[] ) => void | | | | onReset | 交互状态重置事件 | (event: KeyboardEvent) => void | | | -| onLinkFieldJump | 链接字段跳转事件 (cellData: @antv/s2 1.37.0 新增) | (data: { key: string; cellData: [Node](/docs/api/basic-class/node); record: [Data](/docs/api/general/S2DataConfig#data) }) => void | | | +| onLinkFieldJump | 链接字段跳转事件 (cellData: @antv/s2 1.37.0 新增） | (data: { key: string; cellData: [Node](/docs/api/basic-class/node); record: [Data](/docs/api/general/S2DataConfig#data) }) => void | | | | onScroll | 单元格滚动事件 （含行头和数值单元格） | ({position: [CellScrollPosition](#cellscrollposition)} ) => void; | | | | onColCellBrushSelection | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: [ColCell](/docs/api/basic-class/base-cell)[]) => void; | | | | onRowCellBrushSelection | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: [RowCell](/docs/api/basic-class/base-cell)[]) => void; | | | @@ -214,7 +214,7 @@ type SheetComponentOptions = S2Options< | mouseUp | 表格鼠标松开事件 | (event: CanvasEvent) => void | | | | selected | 单元格选中事件 | ( cells: ([Cell](/docs/api/basic-class/base-cell)[] ) => void | | | | reset | 交互状态重置事件 | (event: KeyboardEvent) => void | | | -| linkFieldJump | 链接字段跳转事件 (cellData: @antv/s2 1.37.0 新增) | (data: { key: string; cellData: [Node](/docs/api/basic-class/node); record: [Data](/docs/api/general/S2DataConfig#data) }) => void | | | +| linkFieldJump | 链接字段跳转事件 (cellData: @antv/s2 1.37.0 新增） | (data: { key: string; cellData: [Node](/docs/api/basic-class/node); record: [Data](/docs/api/general/S2DataConfig#data) }) => void | | | | scroll | 单元格滚动事件 （含行头和数值单元格） | ({position: [CellScrollPosition](#cellscrollposition)} ) => void; | | | | colCellBrushSelection | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: ColCell[]) => void; | | | | rowCellBrushSelection | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | (cells: RowCell[]) => void; | | | diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md index 8d3184122d..7cb09b1a4c 100644 --- a/s2-site/docs/api/general/S2Event.zh.md +++ b/s2-site/docs/api/general/S2Event.zh.md @@ -17,7 +17,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { }); ``` -### 行头 +### 行头单元格 (RowCell) | 名称 | 事件名 | 描述 | | ----------- | ------------------------------------ | ------------------------- | @@ -32,8 +32,9 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { | 鼠标松开 | `S2Event.ROW_CELL_MOUSE_UP` | 行头单元格鼠标松开 | | 滚动 | `S2Event.ROW_CELL_SCROLL` | 行头单元格滚动 | | 行头刷选 | `S2Event.ROW_CELL_BRUSH_SELECTION` | 批量选中刷选范围内的行头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | +| 单元格渲染 | `S2Event.ROW_CELL_RENDER` | 行头单元格布局渲染完成事件 | -### 列头 +### 列头单元格 (ColCell) | 名称 | 事件名 | 描述 | | ------- | ------------------------------ | ----------------- | @@ -45,8 +46,9 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { | 鼠标移动 | `S2Event.COL_CELL_MOUSE_MOVE` | 列头单元格鼠标移动 | | 鼠标松开 | `S2Event.COL_CELL_MOUSE_UP` | 列头单元格鼠标松开 | | 列头刷选 | `S2Event.COL_CELL_BRUSH_SELECTION` | 批量选中刷选范围内的列头单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息（仅支持透视表） | +| 单元格渲染 | `S2Event.COL_CELL_RENDER` | 列头单元格布局渲染完成事件 | -### 数值单元格 +### 数值单元格 (DataCell) | 名称 | 事件名 | 描述 | | ------------- | ----------------------------------- | -------------------------------------- | @@ -58,8 +60,9 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { | 鼠标移动 | `S2Event.DATA_CELL_MOUSE_MOVE` | 数值单元格鼠标移动 | | 鼠标松开 | `S2Event.DATA_CELL_MOUSE_UP` | 数值单元格鼠标松开 | | 刷选 | `S2Event.DATA_CELL_BRUSH_SELECTION` | 数值单元格刷选 | +| 单元格渲染 | `S2Event.DATA_CELL_RENDER` | 数值单元格布局渲染完成事件 | -### 角头 +### 角头单元格 (CornerCell) | 名称 | 事件名 | 描述 | | ------- | --------------------------------- | ----------------- | @@ -70,6 +73,26 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { | 鼠标按下 | `S2Event.CORNER_CELL_MOUSE_DOWN` | 角头单元格鼠标按下 | | 鼠标移动 | `S2Event.CORNER_CELL_MOUSE_MOVE` | 角头单元格鼠标移动 | | 鼠标松开 | `S2Event.CORNER_CELL_MOUSE_UP` | 角头单元格鼠标松开 | +| 单元格渲染 | `S2Event.CORNER_CELL_RENDER` | 角头单元格布局渲染完成事件 | + +### 合并单元格 (MergedCells) + +| 名称 | 事件名 | 描述 | +| ------- | --------------------------------- | ----------------- | +| 点击 | `S2Event.CORNER_CELL_CLICK` | 合并单元格点击 | +| 双击 | `S2Event.CORNER_CELL_DOUBLE_CLICK` | 合并单元格双击 | +| 右键 | `S2Event.CORNER_CELL_CONTEXT_MENU` | 合并单元格右键 | +| 悬停 | `S2Event.CORNER_CELL_HOVER` | 合并单元格悬停 | +| 鼠标按下 | `S2Event.CORNER_CELL_MOUSE_DOWN` | 合并单元格鼠标按下 | +| 鼠标移动 | `S2Event.CORNER_CELL_MOUSE_MOVE` | 合并单元格鼠标移动 | +| 鼠标松开 | `S2Event.CORNER_CELL_MOUSE_UP` | 合并单元格鼠标松开 | +| 单元格渲染 | `S2Event.MERGED_CELLS_RENDER` | 合并单元格布局渲染完成事件 | + +### 序号单元格 (SeriesNumberCell) + +| 名称 | 事件名 | 描述 | +| ------- | --------------------------------- | ----------------- | +| 单元格渲染 | `S2Event.SERIES_NUMBER_CELL_RENDER` | 序号单元格布局渲染完成事件 | ### 宽高拖拽调整 @@ -98,6 +121,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { | 开始渲染 | `S2Event.LAYOUT_BEFORE_RENDER` | 开始 render 前的事件，即 `s2.render()` | | 渲染完成 | `S2Event.LAYOUT_AFTER_RENDER` | render 完成的事件，即 `s2.render()` | | 表格销毁 | `S2Event.LAYOUT_DESTROY` | 表格销毁后或 调用 `s2.destroy()` 触发 | +| 单元格渲染 | `S2Event.LAYOUT_CELL_RENDER` | 单个单元格布局渲染完成事件 | ### 全局