fix: 选中事件增加 event 信息 (#3021)

* fix: 选中事件增加 event 信息 * docs: 更新文档
antvis · Dec 9, 2024 · 291c727 · 291c727
1 parent 134d7df
commit 291c727
Show file tree

Hide file tree

Showing 22 changed files with 49 additions and 20 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/corner-spec.ts b/packages/s2-core/__tests__/spreadsheet/corner-spec.ts
@@ -275,6 +275,7 @@ describe('PivotSheet Corner Tests', () => {
       expect(selected).toHaveBeenCalledWith(s2.interaction.getActiveCells(), {
         interactionName: 'cornerCellClick',
         targetCell: expect.anything(),
+        event: expect.anything(),
       });
 
       // 取消选中
@@ -286,6 +287,7 @@ describe('PivotSheet Corner Tests', () => {
       expect(selected).toHaveBeenCalledWith([], {
         interactionName: 'cornerCellClick',
         targetCell: expect.anything(),
+        event: expect.anything(),
       });
 
       getCellSpy.mockClear();

diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/click/data-cell-click-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/click/data-cell-click-spec.ts
@@ -92,6 +92,7 @@ describe('Interaction Data Cell Click Tests', () => {
     expect(selected).toHaveBeenCalledWith([mockCellInfo.mockCell], {
       interactionName: 'dataCellClick',
       targetCell: s2.getCell(),
+      event: expect.anything(),
     });
   });
 
@@ -115,6 +116,7 @@ describe('Interaction Data Cell Click Tests', () => {
     expect(selected).toHaveBeenCalledWith([], {
       interactionName: 'dataCellClick',
       targetCell: s2.getCell(),
+      event: expect.anything(),
     });
   });
 

diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/click/row-column-click-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/click/row-column-click-spec.ts
@@ -179,6 +179,7 @@ describe('Interaction Row & Column Cell Click Tests', () => {
       expect(selected).toHaveBeenCalledWith([mockCell], {
         interactionName: 'rowCellClick',
         targetCell: s2.getCell(),
+        event: expect.anything(),
       });
 
       // 取消选中
@@ -189,7 +190,7 @@ describe('Interaction Row & Column Cell Click Tests', () => {
       expect(s2.interaction.getState().cells).toEqual([]);
       expect(s2.showTooltipWithInfo).toHaveBeenCalled();
       expect(selected).toHaveBeenCalled();
-      expect(s2.interaction.hasIntercepts([InterceptType.HOVER])).toBeFalse();
+      expect(s2.interaction.hasIntercepts([InterceptType.HOVER])).toBeFalsy();
 
       getInteractedCellsSpy.mockRestore();
     },
@@ -243,6 +244,7 @@ describe('Interaction Row & Column Cell Click Tests', () => {
       expect(selected).toHaveBeenCalledWith([mockCell], {
         interactionName: 'rowCellClick',
         targetCell: s2.getCell(),
+        event: expect.anything(),
       });
     },
   );

diff --git a/packages/s2-core/__tests__/unit/interaction/data-cell-multi-selection-spec.ts b/packages/s2-core/__tests__/unit/interaction/data-cell-multi-selection-spec.ts
@@ -121,6 +121,7 @@ describe('Interaction Data Cell Multi Selection Tests', () => {
         {
           interactionName: 'dataCellMultiSelection',
           targetCell: s2.getCell(),
+          event: expect.anything(),
         },
       );
 

diff --git a/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts b/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
@@ -573,6 +573,7 @@ describe('Interaction Event Controller Tests', () => {
     expect(selected).toHaveBeenCalledWith([], {
       interactionName: 'globalReset',
       targetCell: null,
+      event: expect.anything(),
     });
     expect(reset).toHaveBeenCalled();
     expect(spreadsheet.interaction.reset).toHaveBeenCalled();
@@ -600,6 +601,7 @@ describe('Interaction Event Controller Tests', () => {
     expect(selected).toHaveBeenCalledWith([], {
       interactionName: 'globalReset',
       targetCell: null,
+      event: expect.anything(),
     });
     expect(reset).toHaveBeenCalled();
     expect(spreadsheet.interaction.reset).toHaveBeenCalled();

diff --git a/packages/s2-core/__tests__/unit/interaction/range-selection-spec.ts b/packages/s2-core/__tests__/unit/interaction/range-selection-spec.ts
@@ -205,6 +205,7 @@ describe('Interaction Range Selection Tests', () => {
     expect(selected).toHaveBeenCalledWith(activeCells, {
       interactionName: 'rangeSelection',
       targetCell: s2.getCell(),
+      event: expect.anything(),
     });
     expect(
       s2.interaction.hasIntercepts([InterceptType.CLICK, InterceptType.HOVER]),
@@ -290,6 +291,7 @@ describe('Interaction Range Selection Tests', () => {
     expect(selected).toHaveBeenCalledWith(activeCells, {
       interactionName: 'rangeSelection',
       targetCell: s2.getCell(),
+      event: expect.anything(),
     });
     expect(
       s2.interaction.hasIntercepts([InterceptType.CLICK, InterceptType.HOVER]),

diff --git a/packages/s2-core/src/common/interface/emitter.ts b/packages/s2-core/src/common/interface/emitter.ts
@@ -44,10 +44,16 @@ export interface CellSelectedDetail {
    * 触发选中的交互名
    */
   interactionName?: `${InteractionName}`;
+
   /**
    * 触发选中的单元格
    */
   targetCell?: S2CellType | null;
+
+  /**
+   * 触发选中的事件对象
+   */
+  event?: CanvasEvent | KeyboardEvent | Event | null;
 }
 
 export type CellSelectedHandler = (

diff --git a/packages/s2-core/src/common/interface/interaction.ts b/packages/s2-core/src/common/interface/interaction.ts
@@ -116,6 +116,11 @@ export interface ChangeCellOptions extends CellScrollToOptions {
    * @default true
    */
   scrollIntoView?: boolean;
+
+  /**
+   * 触发事件对象
+   */
+  event?: FederatedPointerEvent;
 }
 
 export type InteractionConstructor = new (

diff --git a/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts
@@ -115,8 +115,9 @@ export class CornerCellClick extends BaseEvent implements BaseEventImplement {
     });
   }
 
-  private emitSelectEvent(targetCell: S2CellType) {
+  private emitSelectEvent(event: CanvasEvent, targetCell: S2CellType) {
     this.spreadsheet.interaction.emitSelectEvent({
+      event,
       targetCell,
       interactionName: InteractionName.CORNER_CELL_CLICK,
     });
@@ -130,7 +131,7 @@ export class CornerCellClick extends BaseEvent implements BaseEventImplement {
 
     if (sample && interaction.isSelectedCell(sample)) {
       interaction.reset();
-      this.emitSelectEvent(cornerCell);
+      this.emitSelectEvent(event, cornerCell);
 
       return;
     }
@@ -148,7 +149,7 @@ export class CornerCellClick extends BaseEvent implements BaseEventImplement {
     cornerCell?.updateByState(InteractionStateName.SELECTED);
 
     this.showTooltip(event);
-    this.emitSelectEvent(cornerCell);
+    this.emitSelectEvent(event, cornerCell);
   }
 
   private showTooltip(event: CanvasEvent) {

diff --git a/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts
@@ -60,6 +60,7 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
 
           // https://github.com/antvis/S2/issues/2447
           interaction.emitSelectEvent({
+            event,
             targetCell: cell,
             interactionName: InteractionName.DATA_CELL_CLICK,
           });
@@ -74,6 +75,7 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
         onUpdateCells: afterSelectDataCells,
       });
       interaction.emitSelectEvent({
+        event,
         targetCell: cell,
         interactionName: InteractionName.DATA_CELL_CLICK,
         cells: [cell],

diff --git a/packages/s2-core/src/interaction/base-interaction/click/row-column-click.ts b/packages/s2-core/src/interaction/base-interaction/click/row-column-click.ts
@@ -114,6 +114,7 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
         : InteractionName.COL_CELL_CLICK;
 
     const success = interaction.changeCell({
+      event,
       cell,
       isMultiSelection,
       interactionName: isMultiSelection

diff --git a/packages/s2-core/src/interaction/brush-selection/base-brush-selection.ts b/packages/s2-core/src/interaction/brush-selection/base-brush-selection.ts
@@ -698,7 +698,7 @@ export class BaseBrushSelection
 
       if (this.isValidBrushSelection()) {
         this.addBrushIntercepts();
-        this.updateSelectedCells();
+        this.updateSelectedCells(event);
 
         const tooltipData = getCellsTooltipData(this.spreadsheet);
 
@@ -819,7 +819,8 @@ export class BaseBrushSelection
 
   protected bindMouseMove() {}
 
-  protected updateSelectedCells() {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected updateSelectedCells(event: MouseEvent) {}
 
   protected getPrepareSelectMaskPosition(brushRange: BrushRange): PointLike {
     return {

diff --git a/packages/s2-core/src/interaction/brush-selection/col-brush-selection.ts b/packages/s2-core/src/interaction/brush-selection/col-brush-selection.ts
@@ -99,7 +99,7 @@ export class ColCellBrushSelection extends BaseBrushSelection {
   }
 
   // 最终刷选的 cell
-  protected updateSelectedCells() {
+  protected updateSelectedCells(event: MouseEvent) {
     const { interaction, facet } = this.spreadsheet;
 
     interaction.changeState({
@@ -114,6 +114,7 @@ export class ColCellBrushSelection extends BaseBrushSelection {
       S2Event.COL_CELL_BRUSH_SELECTION,
       this.brushRangeCells,
       {
+        event,
         targetCell: this.brushRangeCells[0],
         interactionName: InteractionName.COL_CELL_BRUSH_SELECTION,
       },

diff --git a/packages/s2-core/src/interaction/brush-selection/data-cell-brush-selection.ts b/packages/s2-core/src/interaction/brush-selection/data-cell-brush-selection.ts
@@ -100,7 +100,7 @@ export class DataCellBrushSelection extends BaseBrushSelection {
   };
 
   // 最终刷选的 cell
-  protected updateSelectedCells() {
+  protected updateSelectedCells(event: MouseEvent) {
     const brushRange = this.getBrushRange();
     const selectedCellMetas = this.getSelectedCellMetas(brushRange);
 
@@ -117,6 +117,7 @@ export class DataCellBrushSelection extends BaseBrushSelection {
       S2Event.DATA_CELL_BRUSH_SELECTION,
       scrollBrushRangeCells,
       {
+        event,
         targetCell: scrollBrushRangeCells[0],
         interactionName: InteractionName.DATA_CELL_BRUSH_SELECTION,
       },

diff --git a/packages/s2-core/src/interaction/brush-selection/row-brush-selection.ts b/packages/s2-core/src/interaction/brush-selection/row-brush-selection.ts
@@ -96,7 +96,7 @@ export class RowCellBrushSelection extends BaseBrushSelection {
   };
 
   // 最终刷选的 cells
-  protected updateSelectedCells() {
+  protected updateSelectedCells(event: MouseEvent) {
     const selectedRowNodes = this.getSelectedRowNodes();
     const scrollBrushRangeCells =
       this.getScrollBrushRangeCells(selectedRowNodes);
@@ -112,6 +112,7 @@ export class RowCellBrushSelection extends BaseBrushSelection {
       S2Event.ROW_CELL_BRUSH_SELECTION,
       scrollBrushRangeCells,
       {
+        event,
         targetCell: scrollBrushRangeCells[0],
         interactionName: InteractionName.ROW_CELL_BRUSH_SELECTION,
       },

diff --git a/packages/s2-core/src/interaction/data-cell-multi-selection.ts b/packages/s2-core/src/interaction/data-cell-multi-selection.ts
@@ -98,6 +98,7 @@ export class DataCellMultiSelection
           interaction.clearState();
           this.spreadsheet.hideTooltip();
           interaction.emitSelectEvent({
+            event,
             targetCell: cell,
             interactionName: InteractionName.DATA_CELL_MULTI_SELECTION,
           });
@@ -114,6 +115,7 @@ export class DataCellMultiSelection
           onUpdateCells: afterSelectDataCells,
         });
         interaction.emitSelectEvent({
+          event,
           targetCell: cell,
           interactionName: InteractionName.DATA_CELL_MULTI_SELECTION,
         });

diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
@@ -199,6 +199,7 @@ export class EventController {
       S2Event.GLOBAL_SELECTED,
       interaction.getActiveCells(),
       {
+        event,
         targetCell: null,
         interactionName: InteractionName.GLOBAL_RESET,
       },

diff --git a/packages/s2-core/src/interaction/range-selection.ts b/packages/s2-core/src/interaction/range-selection.ts
@@ -126,6 +126,7 @@ export class RangeSelection extends BaseEvent implements BaseEventImplement {
       );
       interaction.emitSelectEvent({
         targetCell: cell,
+        event,
         interactionName: InteractionName.RANGE_SELECTION,
       });
     });
@@ -189,8 +190,8 @@ export class RangeSelection extends BaseEvent implements BaseEventImplement {
         const selectedCellIds = groupSelectedCells(selectedCells);
 
         interaction.updateCells(facet.getHeaderCells(selectedCellIds));
-
         interaction.emitSelectEvent({
+          event,
           targetCell: cell,
           interactionName: InteractionName.RANGE_SELECTION,
         });

diff --git a/packages/s2-core/src/interaction/root.ts b/packages/s2-core/src/interaction/root.ts
@@ -581,6 +581,7 @@ export class RootInteraction {
    */
   public changeCell(options: ChangeCellOptions = {} as ChangeCellOptions) {
     const {
+      event,
       cell,
       stateName = InteractionStateName.SELECTED,
       interactionName,
@@ -628,6 +629,7 @@ export class RootInteraction {
     if (isEmpty(selectedCells)) {
       this.reset();
       this.emitSelectEvent({
+        event,
         targetCell: cell,
         interactionName,
       });
@@ -670,6 +672,7 @@ export class RootInteraction {
     // 由于绘制的顺序问题, 交互背景图层展示后, 会遮挡边框, 需要让边框展示在前面.
     this.spreadsheet.facet.centerFrame?.toFront();
     this.emitSelectEvent({
+      event,
       targetCell: cell,
       interactionName,
     });

diff --git a/packages/s2-core/src/interaction/selected-cell-move.ts b/packages/s2-core/src/interaction/selected-cell-move.ts
@@ -145,6 +145,7 @@ export class SelectedCellMove extends BaseEvent implements BaseEventImplement {
       cells: selectedCells,
     });
     spreadsheet.interaction.emitSelectEvent({
+      event,
       interactionName: InteractionName.SELECTED_CELL_MOVE,
     });
     this.spreadsheet.emit(S2Event.DATA_CELL_SELECT_MOVE, selectedCells);

diff --git a/packages/s2-core/src/utils/interaction/select-event.ts b/packages/s2-core/src/utils/interaction/select-event.ts
@@ -40,16 +40,6 @@ export const getCellMeta = (cell: S2CellType): CellMeta => {
   };
 };
 
-// export const selectCells = (spreadsheet: SpreadSheet, cells: CellMeta[]) => {
-//   const { interaction } = spreadsheet;
-
-//   interaction.changeState({
-//     stateName: InteractionStateName.SELECTED,
-//     cells,
-//   });
-//   spreadsheet.emit(S2Event.GLOBAL_SELECTED, interaction.getActiveCells());
-// };
-
 export function getRangeIndex<T extends CellMeta | ViewMeta | Node>(
   start: T,
   end: T,

diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
@@ -93,6 +93,7 @@ interface ScrollSpeedRatio {
 | -- | -- | -- | -- | --- |
 | interactionName | 触发选中的交互名 | [InteractionName](#interactionname) |  |  |
 | targetCell | 触发选中的单元格 | [S2CellType](/api/basic-class/base-cell) |  |  |
+| event | 触发选中的事件对象 | `FederatedPointerEvent \| Event \| KeyboardEvent` |  |  |
 
 ### InterceptType
-Original file line number
+Diff line change
@@ Expand Up @@
             {
               interactionName: 'dataCellMultiSelection',
               targetCell: s2.getCell(),
+              event: expect.anything(),
             },
           );
@@ Expand Down @@