fix: 系统拦截快捷键后多选交互异常 (#2191)

* fix: 系统拦截快捷键后多选交互异常 * test: 增加测试用例 --------- Co-authored-by: 沫君 <[email protected]>
antvis · May 12, 2023 · 6a8b85a · 6a8b85a · vercel · May 12, 2023
1 parent ce9dcab
commit 6a8b85a
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 7 deletions.
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
@@ -9,7 +9,12 @@ import type {
   ViewMeta,
 } from '@/common/interface';
 import type { SpreadSheet } from '@/sheet-type';
-import { InteractionStateName, S2Event } from '@/common/constant';
+import {
+  InteractionKeyboardKey,
+  InteractionStateName,
+  InterceptType,
+  S2Event,
+} from '@/common/constant';
 import type { Node } from '@/facet/layout/node';
 
 jest.mock('@/interaction/event-controller');
@@ -84,6 +89,42 @@ describe('Interaction Row & Column Cell Click Tests', () => {
     expect(rowColumnClick.bindEvents).toBeDefined();
   });
 
+  test.each([InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL])(
+    'should add click intercept when %s keydown',
+    (key) => {
+      s2.emit(S2Event.GLOBAL_KEYBOARD_DOWN, {
+        key,
+      } as KeyboardEvent);
+
+      expect(s2.interaction.hasIntercepts([InterceptType.CLICK])).toBeTruthy();
+    },
+  );
+
+  test.each([InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL])(
+    'should remove click intercept when %s keyup',
+    (key) => {
+      s2.interaction.addIntercepts([InterceptType.CLICK]);
+      s2.emit(S2Event.GLOBAL_KEYBOARD_UP, {
+        key,
+      } as KeyboardEvent);
+
+      expect(s2.interaction.hasIntercepts([InterceptType.CLICK])).toBeFalsy();
+    },
+  );
+
+  test.each([InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL])(
+    'should remove click intercept when %s released',
+    () => {
+      Object.defineProperty(rowColumnClick, 'isMultiSelection', {
+        value: true,
+      });
+      s2.interaction.addIntercepts([InterceptType.CLICK]);
+      s2.emit(S2Event.GLOBAL_MOUSE_MOVE, {} as MouseEvent);
+
+      expect(s2.interaction.hasIntercepts([InterceptType.CLICK])).toBeFalsy();
+    },
+  );
+
   // https://github.com/antvis/S2/issues/1243
   test.each([S2Event.ROW_CELL_CLICK, S2Event.COL_CELL_CLICK])(
     'should selected cell when %s cell clicked',

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
@@ -47,7 +47,7 @@ describe('Interaction Data Cell Multi Selection Tests', () => {
   });
 
   test.each([InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL])(
-    'should add click intercept when keydown',
+    'should add click intercept when %s keydown',
     (key) => {
       s2.emit(S2Event.GLOBAL_KEYBOARD_DOWN, {
         key,
@@ -58,8 +58,9 @@ describe('Interaction Data Cell Multi Selection Tests', () => {
   );
 
   test.each([InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL])(
-    'should remove click intercept when  keyup',
+    'should remove click intercept when %s keyup',
     (key) => {
+      s2.interaction.addIntercepts([InterceptType.CLICK]);
       s2.emit(S2Event.GLOBAL_KEYBOARD_UP, {
         key,
       } as KeyboardEvent);
@@ -68,6 +69,19 @@ describe('Interaction Data Cell Multi Selection Tests', () => {
     },
   );
 
+  test.each([InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL])(
+    'should remove click intercept when %s released',
+    () => {
+      Object.defineProperty(dataCellMultiSelection, 'isMultiSelection', {
+        value: true,
+      });
+      s2.interaction.addIntercepts([InterceptType.CLICK]);
+      s2.emit(S2Event.GLOBAL_MOUSE_MOVE, {} as MouseEvent);
+
+      expect(s2.interaction.hasIntercepts([InterceptType.CLICK])).toBeFalsy();
+    },
+  );
+
   test.each([InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL])(
     'should select multiple data cell',
     (key) => {

diff --git a/packages/s2-core/__tests__/unit/interaction/range-selection-spec.ts b/packages/s2-core/__tests__/unit/interaction/range-selection-spec.ts
@@ -54,13 +54,24 @@ describe('Interaction Range Selection Tests', () => {
   });
 
   test('should remove click intercept when shift keyup', () => {
+    s2.interaction.addIntercepts([InterceptType.CLICK]);
     s2.emit(S2Event.GLOBAL_KEYBOARD_UP, {
       key: InteractionKeyboardKey.SHIFT,
     } as KeyboardEvent);
 
     expect(s2.interaction.hasIntercepts([InterceptType.CLICK])).toBeFalsy();
   });
 
+  test('should remove click intercept when shift released', () => {
+    Object.defineProperty(rangeSelection, 'isRangeSelection', {
+      value: true,
+    });
+    s2.interaction.addIntercepts([InterceptType.CLICK]);
+    s2.emit(S2Event.GLOBAL_MOUSE_MOVE, {} as MouseEvent);
+
+    expect(s2.interaction.hasIntercepts([InterceptType.CLICK])).toBeFalsy();
+  });
+
   test('should set last clicked cell', () => {
     s2.interaction.changeState({
       cells: [],

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
@@ -20,7 +20,10 @@ import {
   hideColumnsByThunkGroup,
   isEqualDisplaySiblingNodeId,
 } from '../../../utils/hide-columns';
-import { isMultiSelectionKey } from '../../../utils/interaction/select-event';
+import {
+  isMouseEventWithMeta,
+  isMultiSelectionKey,
+} from '../../../utils/interaction/select-event';
 import {
   getTooltipOptions,
   getTooltipVisibleOperator,
@@ -36,6 +39,12 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
     this.bindColCellClick();
     this.bindRowCellClick();
     this.bindTableColExpand();
+    this.bindMouseMove();
+  }
+
+  public reset() {
+    this.isMultiSelection = false;
+    this.spreadsheet.interaction.removeIntercepts([InterceptType.CLICK]);
   }
 
   private bindKeyboardDown() {
@@ -52,8 +61,16 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
   private bindKeyboardUp() {
     this.spreadsheet.on(S2Event.GLOBAL_KEYBOARD_UP, (event: KeyboardEvent) => {
       if (isMultiSelectionKey(event)) {
-        this.isMultiSelection = false;
-        this.spreadsheet.interaction.removeIntercepts([InterceptType.CLICK]);
+        this.reset();
+      }
+    });
+  }
+
+  private bindMouseMove() {
+    this.spreadsheet.on(S2Event.GLOBAL_MOUSE_MOVE, (event) => {
+      // 当快捷键被系统拦截后，按需补充调用一次 reset
+      if (this.isMultiSelection && !isMouseEventWithMeta(event)) {
+        this.reset();
       }
     });
   }

diff --git a/packages/s2-core/src/interaction/data-cell-multi-selection.ts b/packages/s2-core/src/interaction/data-cell-multi-selection.ts
@@ -11,7 +11,7 @@ import type { CellMeta, S2CellType, ViewMeta } from '../common/interface';
 import {
   getCellMeta,
   isMultiSelectionKey,
-  getInteractionCellsBySelectedCells,
+  isMouseEventWithMeta,
 } from '../utils/interaction/select-event';
 import { getCellsTooltipData } from '../utils/tooltip';
 import { afterSelectDataCells } from '../utils/interaction/select-event';
@@ -27,6 +27,7 @@ export class DataCellMultiSelection
     this.bindKeyboardDown();
     this.bindDataCellClick();
     this.bindKeyboardUp();
+    this.bindMouseMove();
   }
 
   public reset() {
@@ -54,6 +55,15 @@ export class DataCellMultiSelection
     });
   }
 
+  private bindMouseMove() {
+    this.spreadsheet.on(S2Event.GLOBAL_MOUSE_MOVE, (event) => {
+      // 当快捷键被系统拦截后，按需补充调用一次 reset
+      if (this.isMultiSelection && !isMouseEventWithMeta(event)) {
+        this.reset();
+      }
+    });
+  }
+
   private getSelectedCells(cell: S2CellType<ViewMeta>) {
     const id = cell.getMeta().id;
     const { interaction } = this.spreadsheet;

diff --git a/packages/s2-core/src/interaction/range-selection.ts b/packages/s2-core/src/interaction/range-selection.ts
@@ -22,6 +22,7 @@ export class RangeSelection extends BaseEvent implements BaseEventImplement {
     this.bindDataCellClick();
     this.bindColCellClick();
     this.bindKeyboardUp();
+    this.bindMouseMove();
   }
 
   public reset() {
@@ -49,6 +50,15 @@ export class RangeSelection extends BaseEvent implements BaseEventImplement {
     });
   }
 
+  private bindMouseMove() {
+    // 当快捷键被系统拦截后，按需补充调用一次 reset
+    this.spreadsheet.on(S2Event.GLOBAL_MOUSE_MOVE, (event) => {
+      if (this.isRangeSelection && !event.shiftKey) {
+        this.reset();
+      }
+    });
+  }
+
   private bindColCellClick() {
     if (this.spreadsheet.isTableMode()) {
       // series-number click

diff --git a/packages/s2-core/src/utils/interaction/select-event.ts b/packages/s2-core/src/utils/interaction/select-event.ts
@@ -25,6 +25,10 @@ export const isMultiSelectionKey = (e: KeyboardEvent) => {
   );
 };
 
+export const isMouseEventWithMeta = (e: MouseEvent) => {
+  return e.ctrlKey || e.metaKey;
+};
+
 export const getCellMeta = (cell: S2CellType): CellMeta => {
   const meta = cell.getMeta();
   const { id, colIndex, rowIndex, rowQuery } = meta || {};