feat(interaction): 添加 onDataCellSelectMove 事件 (#1468)

* feat: 添加 selectmove 事件 * feat: 添加文档
antvis · Jun 21, 2022 · da2a78e · da2a78e
1 parent 4fd0653
commit da2a78e
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 0 deletions.
diff --git a/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts b/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts
@@ -219,11 +219,13 @@ describe('Interaction Keyboard Move Tests', () => {
   });
 
   test('should move selected with shift', () => {
+    const callback = jest.fn(() => {});
     s2.interaction.changeState = jest.fn((state) => {});
     s2.interaction.getCells = () => [mockCell00.mockCell as any];
     // select cell
     keyboardMove.startCell = mockCell00.mockCell;
     keyboardMove.endCell = mockCell00.mockCell;
+    s2.on(S2Event.DATE_CELL_SELECT_MOVE, callback);
     s2.emit(S2Event.GLOBAL_KEYBOARD_DOWN, {
       key: InteractionKeyboardKey.ARROW_RIGHT,
       shiftKey: true,
@@ -251,6 +253,7 @@ describe('Interaction Keyboard Move Tests', () => {
       ],
       stateName: 'selected',
     });
+    expect(callback).toBeCalled();
   });
 
   test('should move selected with shift and meta', () => {

diff --git a/packages/s2-core/src/common/constant/events/basic.ts b/packages/s2-core/src/common/constant/events/basic.ts
@@ -28,6 +28,7 @@ export enum S2Event {
   DATA_CELL_MOUSE_MOVE = 'data-cell:mouse-move',
   DATA_CELL_TREND_ICON_CLICK = 'data-cell:trend-icon-click',
   DATE_CELL_BRUSH_SELECTION = 'data-cell:brush-selection',
+  DATE_CELL_SELECT_MOVE = 'data-cell:select-move',
 
   /** ================ Corner Cell ================  */
   CORNER_CELL_HOVER = 'corner-cell:hover',

diff --git a/packages/s2-core/src/common/interface/emitter.ts b/packages/s2-core/src/common/interface/emitter.ts
@@ -2,6 +2,7 @@ import type { Event as CanvasEvent } from '@antv/g-canvas';
 import type { DataCell } from '../../cell/data-cell';
 import type { S2Event } from '../../common/constant';
 import type {
+  CellMeta,
   CellScrollPosition,
   HiddenColumnsInfo,
   LayoutResult,
@@ -85,6 +86,7 @@ export interface EmitterType {
   [S2Event.DATA_CELL_CONTEXT_MENU]: CanvasEventHandler;
   [S2Event.DATA_CELL_TREND_ICON_CLICK]: (data: ViewMeta) => void;
   [S2Event.DATE_CELL_BRUSH_SELECTION]: (cells: DataCell[]) => void;
+  [S2Event.DATE_CELL_SELECT_MOVE]: (metas: CellMeta[]) => void;
 
   /** ================ Row Cell ================  */
   [S2Event.ROW_CELL_MOUSE_DOWN]: CanvasEventHandler;

diff --git a/packages/s2-core/src/interaction/selected-cell-move.ts b/packages/s2-core/src/interaction/selected-cell-move.ts
@@ -117,6 +117,7 @@ export class SelectedCellMove extends BaseEvent implements BaseEventImplement {
       this.startCell = movedCell;
     }
     this.endCell = movedCell;
+    this.spreadsheet.emit(S2Event.DATE_CELL_SELECT_MOVE, selectedCells);
   }
 
   private generateCellMeta(spreadsheet: SpreadSheet, row: number, col: number) {

diff --git a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts
@@ -247,6 +247,14 @@ const cellEventCases = [
     event: S2Event.DATA_CELL_MOUSE_MOVE,
     name: 'onDataCellMouseMove',
   },
+  {
+    event: S2Event.DATE_CELL_BRUSH_SELECTION,
+    name: 'onDataCellBrushSelection',
+  },
+  {
+    event: S2Event.DATE_CELL_SELECT_MOVE,
+    name: 'onDataCellSelectMove',
+  },
   {
     event: S2Event.CORNER_CELL_HOVER,
     name: 'onCornerCellHover',

diff --git a/packages/s2-react/src/hooks/useEvents.ts b/packages/s2-react/src/hooks/useEvents.ts
@@ -84,6 +84,7 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) {
     props.onDataCellBrushSelection,
     s2,
   );
+  useS2Event(S2Event.DATE_CELL_SELECT_MOVE, props.onDataCellSelectMove, s2);
 
   // ============== Corner Cell ====================
   useCellEvent(S2Event.CORNER_CELL_HOVER, props.onCornerCellHover, s2);

diff --git a/packages/s2-shared/__tests__/utils/options-spec.ts b/packages/s2-shared/__tests__/utils/options-spec.ts
@@ -41,6 +41,7 @@ describe('Options Tests', () => {
         },
         eventListenerOptions: false,
         overscrollBehavior: 'auto',
+        selectedCellHighlight: false,
       },
       showSeriesNumber: false,
       customSVGIcons: [],

diff --git a/packages/s2-shared/src/interface.ts b/packages/s2-shared/src/interface.ts
@@ -21,6 +21,7 @@ import type {
   TooltipOperatorOptions,
   S2RenderOptions,
   S2MountContainer,
+  CellMeta,
 } from '@antv/s2';
 
 // 是否开启自适应宽高，并指定容器
@@ -97,6 +98,7 @@ export interface BaseSheetComponentProps<
   onDataCellMouseMove?: (data: TargetCellInfo) => void;
   onDataCellTrendIconClick?: (meta: ViewMeta) => void;
   onDataCellBrushSelection?: (brushRangeDataCells: DataCell[]) => void;
+  onDataCellSelectMove?: (metas: CellMeta[]) => void;
 
   // ============== Corner Cell ====================
   onCornerCellHover?: (data: TargetCellInfo) => void;

diff --git a/packages/s2-vue/src/hooks/useEvents.ts b/packages/s2-vue/src/hooks/useEvents.ts
@@ -120,6 +120,12 @@ export const useEvents = (
       S2Event.DATE_CELL_BRUSH_SELECTION,
       'dataCellBrushSelection',
     );
+    useS2Event(
+      s2Ref,
+      emit,
+      S2Event.DATE_CELL_SELECT_MOVE,
+      'dataCellSelectMove',
+    );
 
     // ============== Corner Cell ====================
     useCellEvent(s2Ref, emit, S2Event.CORNER_CELL_HOVER, 'cornerCellHover');

diff --git a/packages/s2-vue/src/utils/initPropAndEmits.ts b/packages/s2-vue/src/utils/initPropAndEmits.ts
@@ -68,6 +68,7 @@ export const initBaseSheetEmits = () => {
     'dataCellMouseMove',
     'dataCellTrendIconClick',
     'dataCellBrushSelection',
+    'dataCellSelectMove',
 
     // ============== Corner Cell ====================
     'cornerCellHover',

diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md
@@ -47,6 +47,7 @@ order: 0
 | onDataCellMouseMove | 数值单元格鼠标移动事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onDataCellTrendIconClick | 趋势图 icon 点击事件 | (meta: [ViewMeta](/zh/docs/api/basic-class/node)) => void |  |  |
 | onDataCellBrushSelection | 单元格刷选事件 | (brushRangeDataCells: DataCell[]) => void |  |  |
+| onDataCellSelectMove | 单元格键盘方向键移动事件 | (metas: CellMeta[]) => void |  |  |
 | onCornerCellHover | 角头鼠标悬停事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onCornerCellClick | 角头鼠标单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onCornerCellDoubleClick | 角头鼠标双击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |