feat: 增加不同类型单元格的选中事件 & 支持识别事件来源 (#2956)

* feat: 增加不同类型单元格的选中事件 & 支持识别事件来源 * test: 修复单测
antvis · Nov 1, 2024 · 69f6479 · 69f6479
1 parent a4ae432
commit 69f6479
Show file tree

Hide file tree

Showing 49 changed files with 636 additions and 217 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/corner-spec.ts b/packages/s2-core/__tests__/spreadsheet/corner-spec.ts
@@ -1,5 +1,6 @@
 import * as simpleDataConfig from 'tests/data/simple-data.json';
 import {
+  CellType,
   CornerNodeType,
   DEFAULT_STYLE,
   EXTRA_FIELD,
@@ -251,13 +252,15 @@ describe('PivotSheet Corner Tests', () => {
 
       const getCellSpy = jest.spyOn(s2, 'getCell').mockImplementation(() => {
         return {
+          cellType: CellType.CORNER_CELL,
           getMeta: () => ({
             ...node,
             cornerType: CornerNodeType.Row,
           }),
           updateByState: jest.fn(),
         } as unknown as S2CellType;
       });
+
       const selected = jest.fn();
 
       s2.on(S2Event.GLOBAL_SELECTED, selected);
@@ -269,15 +272,21 @@ describe('PivotSheet Corner Tests', () => {
       expect(s2.interaction.getCells().map((meta) => meta.id)).toEqual(
         selectedIds,
       );
-      expect(selected).toHaveBeenCalledWith(s2.interaction.getActiveCells());
+      expect(selected).toHaveBeenCalledWith(s2.interaction.getActiveCells(), {
+        interactionName: 'cornerCellClick',
+        targetCell: expect.anything(),
+      });
 
       // 取消选中
       s2.emit(S2Event.CORNER_CELL_CLICK, {} as unknown as GEvent);
 
       expect(s2.tooltip.visible).toBeFalsy();
       expect(s2.interaction.isSelectedState()).toBeFalsy();
       expect(s2.interaction.getCells()).toEqual([]);
-      expect(selected).toHaveBeenCalledWith([]);
+      expect(selected).toHaveBeenCalledWith([], {
+        interactionName: 'cornerCellClick',
+        targetCell: expect.anything(),
+      });
 
       getCellSpy.mockClear();
     },

diff --git a/packages/s2-core/__tests__/spreadsheet/interaction-cell-selected-event-spec.ts b/packages/s2-core/__tests__/spreadsheet/interaction-cell-selected-event-spec.ts
@@ -0,0 +1,57 @@
+import { S2Event } from '@/common/constant';
+import { type S2Options } from '@/common/interface';
+import { SpreadSheet } from '@/sheet-type';
+import { createPivotSheet } from 'tests/util/helpers';
+import { CellType } from '../../src';
+
+const s2Options: S2Options = {
+  width: 600,
+  height: 400,
+};
+
+describe('Interaction Cell Selected Event Tests', () => {
+  let s2: SpreadSheet;
+
+  beforeEach(async () => {
+    s2 = createPivotSheet(s2Options);
+    await s2.render();
+  });
+
+  afterEach(() => {
+    s2.destroy();
+  });
+
+  test.each`
+    cellType                | event
+    ${CellType.CORNER_CELL} | ${S2Event.CORNER_CELL_SELECTED}
+    ${CellType.ROW_CELL}    | ${S2Event.ROW_CELL_SELECTED}
+    ${CellType.COL_CELL}    | ${S2Event.COL_CELL_SELECTED}
+    ${CellType.DATA_CELL}   | ${S2Event.DATA_CELL_SELECTED}
+  `(
+    'should get $cellType detail when $event is triggered',
+    ({ cellType, event }) => {
+      const fn = jest.fn();
+      const onSelected = jest.fn();
+
+      s2.on(event, fn);
+      s2.on(S2Event.GLOBAL_SELECTED, onSelected);
+
+      s2.interaction.emitSelectEvent({
+        targetCell: {
+          cellType,
+        },
+      });
+
+      expect(onSelected).toHaveBeenCalledWith(expect.anything(), {
+        targetCell: {
+          cellType,
+        },
+      });
+      expect(fn).toHaveBeenCalledWith(expect.anything(), {
+        targetCell: {
+          cellType,
+        },
+      });
+    },
+  );
+});
diff --git a/packages/s2-core/__tests__/spreadsheet/interaction-multi-selection-spec.ts b/packages/s2-core/__tests__/spreadsheet/interaction-multi-selection-spec.ts
@@ -8,7 +8,12 @@ import {
   getContainer,
   sleep,
 } from 'tests/util/helpers';
-import { CellType, InteractionStateName, RootInteraction } from '../../src';
+import {
+  CellType,
+  InteractionStateName,
+  RootInteraction,
+  S2Event,
+} from '../../src';
 import {
   expectHighlightActiveNodes,
   getSelectedCount,
@@ -349,4 +354,37 @@ describe('Interaction Multi Selection Tests', () => {
       expect(interactedCells).toHaveLength(2);
     },
   );
+
+  test('should emit select event', async () => {
+    const onSelected = jest.fn();
+    const onColCellSelected = jest.fn();
+
+    s2.setOptions({
+      hierarchyType: 'grid',
+    });
+
+    s2.on(S2Event.GLOBAL_SELECTED, onSelected);
+    s2.on(S2Event.COL_CELL_SELECTED, onColCellSelected);
+
+    await s2.render(false);
+
+    const colRootCell = s2.facet.getColCells()[0];
+
+    // 选中
+    s2.interaction.changeCell({
+      cell: colRootCell,
+    });
+
+    expect(onSelected).toHaveBeenCalledTimes(1);
+    expect(onColCellSelected).toHaveBeenCalledTimes(1);
+
+    // 取消选中
+    s2.interaction.changeCell({
+      cell: colRootCell,
+    });
+
+    expect(s2.interaction.getActiveCells()).toHaveLength(0);
+    expect(onSelected).toHaveBeenCalledTimes(2);
+    expect(onColCellSelected).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
@@ -662,7 +662,7 @@ describe('Data Cell Tests', () => {
         (cell: S2CellType) => cell.cellType === CellType.COL_CELL,
       );
 
-      expect(interactedCells.length).toBe(8);
+      expect(interactedCells.length).toBe(7);
       expect(firstColCell!.getMeta().id).toBe(mockCell.getMeta().id);
     });
 

diff --git a/packages/s2-core/__tests__/unit/interaction/__snapshots__/root-spec.ts.snap b/packages/s2-core/__tests__/unit/interaction/__snapshots__/root-spec.ts.snap
@@ -23,6 +23,8 @@ Object {
 }
 `;
 
+exports[`RootInteraction Tests should register default interaction 1`] = `Object {}`;
+
 exports[`RootInteraction Tests should selected header cell 1`] = `
 Object {
   "cells": Array [

diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/click/corner-cell-click-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/click/corner-cell-click-spec.ts
@@ -9,6 +9,7 @@ import {
   sleep,
 } from 'tests/util/helpers';
 import {
+  CellType,
   CornerNodeType,
   InteractionStateName,
   type Node,
@@ -20,6 +21,7 @@ describe('Interaction Corner Cell Click Tests', () => {
   let s2: SpreadSheet;
   const mockCellInfo = createMockCellInfo('testId', {
     cornerType: CornerNodeType.Row,
+    cellType: CellType.CORNER_CELL,
   });
   let cornerCellClick: CornerCellClick;
 

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
@@ -14,12 +14,15 @@ import {
   createMockCellInfo,
   sleep,
 } from 'tests/util/helpers';
+import { CellType } from '../../../../../src';
 
 jest.mock('@/interaction/event-controller');
 
 describe('Interaction Data Cell Click Tests', () => {
   let s2: SpreadSheet;
-  const mockCellInfo = createMockCellInfo('testId');
+  const mockCellInfo = createMockCellInfo('testId', {
+    cellType: CellType.DATA_CELL,
+  });
 
   beforeEach(() => {
     s2 = createFakeSpreadSheet();
@@ -86,7 +89,10 @@ describe('Interaction Data Cell Click Tests', () => {
       stopPropagation() {},
     } as unknown as GEvent);
 
-    expect(selected).toHaveBeenCalledWith([mockCellInfo.mockCell]);
+    expect(selected).toHaveBeenCalledWith([mockCellInfo.mockCell], {
+      interactionName: 'dataCellClick',
+      targetCell: s2.getCell(),
+    });
   });
 
   // https://github.com/antvis/S2/issues/2447
@@ -106,7 +112,10 @@ describe('Interaction Data Cell Click Tests', () => {
       },
     } as unknown as GEvent);
 
-    expect(selected).toHaveBeenCalledWith([]);
+    expect(selected).toHaveBeenCalledWith([], {
+      interactionName: 'dataCellClick',
+      targetCell: s2.getCell(),
+    });
   });
 
   test('should emit link field jump event when link field text click and not show tooltip', () => {

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
@@ -17,6 +17,7 @@ import { RowColumnClick } from '@/interaction/base-interaction/click';
 import type { SpreadSheet } from '@/sheet-type';
 import { omit } from 'lodash';
 import { createFakeSpreadSheet, createMockCellInfo } from 'tests/util/helpers';
+import { CellType } from '../../../../../src';
 
 jest.mock('@/interaction/event-controller');
 
@@ -30,14 +31,15 @@ describe('Interaction Row & Column Cell Click Tests', () => {
     id: '1',
     colIndex: 0,
     rowIndex: 0,
-    type: undefined,
     x: 1,
+    type: CellType.ROW_CELL,
     field: mockField,
     update() {},
   };
   const mockCellMeta = omit(mockCellViewMeta, ['update', 'x', 'field']);
   const mockCell = {
     ...mockCellViewMeta,
+    cellType: CellType.ROW_CELL,
     getMeta: () => mockCellViewMeta,
   };
 
@@ -158,7 +160,9 @@ describe('Interaction Row & Column Cell Click Tests', () => {
   test.each([S2Event.ROW_CELL_CLICK, S2Event.COL_CELL_CLICK])(
     'should unselected current cell when toggle %s clicked',
     (event) => {
-      const mockCellA = createMockCellInfo('cellA');
+      const mockCellA = createMockCellInfo('cellA', {
+        cellType: CellType.ROW_CELL,
+      });
       const getInteractedCellsSpy = jest
         .spyOn(s2.interaction, 'getInteractedCells')
         .mockImplementation(() => [mockCellA.mockCell]);
@@ -171,7 +175,11 @@ describe('Interaction Row & Column Cell Click Tests', () => {
       s2.emit(event, {
         stopPropagation() {},
       } as unknown as GEvent);
-      expect(selected).toHaveBeenCalledWith([mockCell]);
+
+      expect(selected).toHaveBeenCalledWith([mockCell], {
+        interactionName: 'rowCellClick',
+        targetCell: s2.getCell(),
+      });
 
       // 取消选中
       s2.emit(event, {
@@ -231,7 +239,11 @@ describe('Interaction Row & Column Cell Click Tests', () => {
       s2.emit(event, {
         stopPropagation() {},
       } as unknown as GEvent);
-      expect(selected).toHaveBeenCalledWith([mockCell]);
+
+      expect(selected).toHaveBeenCalledWith([mockCell], {
+        interactionName: 'rowCellClick',
+        targetCell: s2.getCell(),
+      });
     },
   );
 
@@ -258,7 +270,7 @@ describe('Interaction Row & Column Cell Click Tests', () => {
     },
   ])(
     'should emit cell selected event when %s clicked with multi selection',
-    ({ event, enableMultiSelection, result }) => {
+    ({ event, enableMultiSelection }) => {
       s2.options.interaction!.multiSelection = enableMultiSelection;
 
       const changeCellSpy = jest
@@ -274,11 +286,7 @@ describe('Interaction Row & Column Cell Click Tests', () => {
         stopPropagation() {},
       } as unknown as GEvent);
 
-      expect(changeCellSpy).toHaveBeenCalledWith({
-        cell: expect.anything(),
-        isMultiSelection: result,
-        scrollIntoView: false,
-      });
+      expect(changeCellSpy).toHaveBeenCalled();
     },
   );
 

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
@@ -9,6 +9,7 @@ import type { GEvent } from '@/index';
 import { DataCellMultiSelection } from '@/interaction/data-cell-multi-selection';
 import type { SpreadSheet } from '@/sheet-type';
 import { createFakeSpreadSheet, createMockCellInfo } from 'tests/util/helpers';
+import { CellType } from '../../../src';
 
 jest.mock('@/interaction/event-controller');
 jest.mock('@/ui/hd-adapter');
@@ -18,7 +19,9 @@ describe('Interaction Data Cell Multi Selection Tests', () => {
   let s2: SpreadSheet;
 
   beforeEach(() => {
-    const mockCell = createMockCellInfo('testId1').mockCell as any;
+    const mockCell = createMockCellInfo('testId1', {
+      cellType: CellType.DATA_CELL,
+    }).mockCell as any;
 
     s2 = createFakeSpreadSheet();
     s2.getCell = () => mockCell;
@@ -89,13 +92,15 @@ describe('Interaction Data Cell Multi Selection Tests', () => {
       const mockCellA = createMockCellInfo('testId2', {
         rowIndex: 0,
         colIndex: 0,
+        cellType: CellType.DATA_CELL,
       });
 
       s2.interaction.getCells = () => [mockCellA.mockCellMeta as CellMeta];
 
       const mockCellB = createMockCellInfo('testId3', {
         rowIndex: 1,
         colIndex: 1,
+        cellType: CellType.DATA_CELL,
       });
 
       s2.getCell = () => mockCellB.mockCell as any;
@@ -111,10 +116,13 @@ describe('Interaction Data Cell Multi Selection Tests', () => {
         stopPropagation() {},
       } as unknown as GEvent);
 
-      expect(selected).toHaveBeenCalledWith([
-        mockCellA.mockCell,
-        mockCellB.mockCell,
-      ]);
+      expect(selected).toHaveBeenCalledWith(
+        [mockCellA.mockCell, mockCellB.mockCell],
+        {
+          interactionName: 'dataCellMultiSelection',
+          targetCell: s2.getCell(),
+        },
+      );
 
       expect(s2.interaction.getState()).toEqual({
         cells: [mockCellA.mockCellMeta, mockCellB.mockCellMeta],

diff --git a/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts b/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
@@ -570,7 +570,10 @@ describe('Interaction Event Controller Tests', () => {
       } as MouseEventInit),
     );
 
-    expect(selected).toHaveBeenCalledWith([]);
+    expect(selected).toHaveBeenCalledWith([], {
+      interactionName: 'globalReset',
+      targetCell: null,
+    });
     expect(reset).toHaveBeenCalled();
     expect(spreadsheet.interaction.reset).toHaveBeenCalled();
   });
@@ -594,7 +597,10 @@ describe('Interaction Event Controller Tests', () => {
       new KeyboardEvent('keydown', { key: InteractionKeyboardKey.ESC }),
     );
 
-    expect(selected).toHaveBeenCalledWith([]);
+    expect(selected).toHaveBeenCalledWith([], {
+      interactionName: 'globalReset',
+      targetCell: null,
+    });
     expect(reset).toHaveBeenCalled();
     expect(spreadsheet.interaction.reset).toHaveBeenCalled();
   });