refactor(interaction): simplify logic (#414)

.github/workflows/release-notify.yml

@@ -0,0 +1,16 @@
+name: 🎉  Release Notify
+
+on:
+  release:
+    types: [published, edited]
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: visiky/dingtalk-release-notify@main
+        with:
+          DING_TALK_TOKEN: ${{ secrets.DING_TALK_GROUP_TOKEN }}
+          notify_title: '🎉 @antv/s2 发布新版本 {release_tag} 🎉'
+          notify_footer: '> 前往 [**@antv/s2 Releases**]({ release_url }) 查看完整信息.'
+          at_all: false

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd ./packages/s2-core && yarn tsc
+yarn tsc

packages/s2-core/__tests__/spreadsheet/custom/custom-interaction.tsx

@@ -17,7 +17,7 @@ export class CustomHover extends BaseEvent {
     this.spreadsheet.on(S2Event.DATA_CELL_HOVER, (event: Event) => {
       const cell = this.spreadsheet.getCell(event.target) as S2CellType;
       if (isEmpty(cell)) return;
-      this.interaction.changeState({
+      this.spreadsheet.interaction.changeState({
         cells: [getCellMeta(cell)],
         stateName: InteractionStateName.HOVER,
       });
@@ -26,7 +26,5 @@ export class CustomHover extends BaseEvent {
   }
 }
 
-export const CustomInteraction = (
-  spreadsheet: SpreadSheet,
-  interaction: RootInteraction,
-) => new CustomHover(spreadsheet, interaction);
+export const CustomInteraction = (spreadsheet: SpreadSheet) =>
+  new CustomHover(spreadsheet);

packages/s2-core/__tests__/unit/interaction/base-event-spec.ts

@@ -1,4 +1,3 @@
-import { RootInteraction } from '@/interaction/root';
 import { SpreadSheet } from '@/index';
 import { BaseEvent } from '@/interaction/base-event';
 
@@ -7,21 +6,17 @@ jest.mock('@/index');
 const MockSpreadSheet = SpreadSheet as unknown as jest.Mock<SpreadSheet>;
 
 describe('Base Interaction Event Test', () => {
-  test('should get interaction and spreadsheet instance and call the bind function', () => {
+  test('should get spreadsheet instance and call the bind function', () => {
     const bindEventsImpl = jest.fn();
     class MyInteraction extends BaseEvent {
       bindEvents() {
         bindEventsImpl();
       }
     }
 
-    const myInteraction = new MyInteraction(
-      new MockSpreadSheet(),
-      new RootInteraction(new MockSpreadSheet()),
-    );
+    const myInteraction = new MyInteraction(new MockSpreadSheet());
     expect(myInteraction).toBeDefined();
     expect(myInteraction.spreadsheet).toBeInstanceOf(SpreadSheet);
-    expect(myInteraction.interaction).toBeInstanceOf(RootInteraction);
     expect(bindEventsImpl).toHaveBeenCalledTimes(1);
   });
 });

packages/s2-core/__tests__/unit/interaction/base-interaction/click/data-cell-click-spec.ts

@@ -26,10 +26,7 @@ describe('Interaction Data Cell Click Tests', () => {
   beforeEach(() => {
     s2 = createFakeSpreadSheet();
     s2.getCell = () => mockCell as any;
-    dataCellClick = new DataCellClick(
-      s2 as unknown as SpreadSheet,
-      s2.interaction,
-    );
+    dataCellClick = new DataCellClick(s2 as unknown as SpreadSheet);
     s2.options = {
       tooltip: {
         operation: {

packages/s2-core/__tests__/unit/interaction/base-interaction/click/row-column-click-spec.ts

@@ -37,10 +37,7 @@ describe('Interaction Data Cell Click Tests', () => {
     s2.interaction.getActiveCells = () => [mockCell] as unknown as S2CellType[];
     s2.interaction.getRowColActiveCells = () =>
       [mockCell] as unknown as S2CellType[];
-    rowColumnClick = new RowColumnClick(
-      s2 as unknown as SpreadSheet,
-      s2.interaction,
-    );
+    rowColumnClick = new RowColumnClick(s2 as unknown as SpreadSheet);
     s2.isHierarchyTreeType = () => false;
     s2.options = {
       hiddenColumnFields: ['a'],

packages/s2-core/__tests__/unit/interaction/base-interaction/click/row-text-click-spec.ts

@@ -27,10 +27,7 @@ describe('Interaction Row Text Click Tests', () => {
 
   beforeEach(() => {
     s2 = createFakeSpreadSheet();
-    rowTextClick = new RowTextClick(
-      s2 as unknown as SpreadSheet,
-      s2.interaction,
-    );
+    rowTextClick = new RowTextClick(s2 as unknown as SpreadSheet);
     s2.options = {
       hierarchyType: 'grid',
     } as S2Options;

packages/s2-core/__tests__/unit/interaction/base-interaction/hover-spec.ts

@@ -28,7 +28,7 @@ describe('Interaction Hover Tests', () => {
         update: mockCellUpdate,
         getMeta: () => mockCell,
       } as any);
-    hoverEvent = new HoverEvent(s2 as unknown as SpreadSheet, s2.interaction);
+    hoverEvent = new HoverEvent(s2 as unknown as SpreadSheet);
     s2.options = {
       hoverHighlight: true,
     } as S2Options;

packages/s2-core/__tests__/unit/interaction/brush-selection-spec.ts

@@ -85,10 +85,8 @@ describe('Interaction Brush Selection Tests', () => {
     mockSpreadSheetInstance.showTooltipWithInfo = jest.fn();
     mockRootInteraction.getPanelGroupAllDataCells = () =>
       panelGroupAllDataCells;
-    brushSelectionInstance = new BrushSelection(
-      mockSpreadSheetInstance,
-      mockRootInteraction,
-    );
+    mockSpreadSheetInstance.interaction = mockRootInteraction;
+    brushSelectionInstance = new BrushSelection(mockSpreadSheetInstance);
     brushSelectionInstance.brushSelectionStage =
       InteractionBrushSelectionStage.UN_DRAGGED;
     brushSelectionInstance.hidePrepareSelectMaskShape = jest.fn();
@@ -151,7 +149,7 @@ describe('Interaction Brush Selection Tests', () => {
       InteractionBrushSelectionStage.UN_DRAGGED,
     );
     expect(
-      brushSelectionInstance.interaction.hasIntercepts([
+      brushSelectionInstance.spreadsheet.interaction.hasIntercepts([
         InterceptType.BRUSH_SELECTION,
       ]),
     ).toBeFalsy();
@@ -171,7 +169,9 @@ describe('Interaction Brush Selection Tests', () => {
     expect(brushSelectionInstance.endBrushPoint).not.toBeDefined();
     expect(brushSelectionInstance.brushRangeDataCells).toHaveLength(0);
     expect(
-      brushSelectionInstance.interaction.hasIntercepts([InterceptType.HOVER]),
+      brushSelectionInstance.spreadsheet.interaction.hasIntercepts([
+        InterceptType.HOVER,
+      ]),
     ).toBeFalsy();
   });
 

packages/s2-core/src/common/interface/interaction.ts

@@ -38,7 +38,6 @@ export interface InteractionStateInfo {
 
 export type InteractionConstructor = new (
   spreadsheet: SpreadSheet,
-  interaction: RootInteraction,
 ) => BaseEvent;
 
 export interface CustomInteraction {

packages/s2-core/src/interaction/base-event.ts

@@ -1,4 +1,3 @@
-import { RootInteraction } from './root';
 import { SpreadSheet } from '@/sheet-type';
 
 export interface BaseEventImplement {
@@ -8,11 +7,8 @@ export interface BaseEventImplement {
 export abstract class BaseEvent {
   public spreadsheet: SpreadSheet;
 
-  public interaction: RootInteraction;
-
-  constructor(spreadsheet: SpreadSheet, interaction: RootInteraction) {
+  constructor(spreadsheet: SpreadSheet) {
     this.spreadsheet = spreadsheet;
-    this.interaction = interaction;
     this.bindEvents();
   }
 

packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts

@@ -24,7 +24,8 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
   private bindDataCellClick() {
     this.spreadsheet.on(S2Event.DATA_CELL_CLICK, (event: CanvasEvent) => {
       event.stopPropagation();
-      if (this.interaction.hasIntercepts([InterceptType.CLICK])) {
+      const { interaction } = this.spreadsheet;
+      if (interaction.hasIntercepts([InterceptType.CLICK])) {
         return;
       }
 
@@ -37,14 +38,14 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
         return;
       }
 
-      this.interaction.addIntercepts([InterceptType.HOVER]);
-      if (this.interaction.isSelectedCell(cell)) {
-        this.interaction.reset();
+      interaction.addIntercepts([InterceptType.HOVER]);
+      if (interaction.isSelectedCell(cell)) {
+        interaction.reset();
         return;
       }
 
-      this.interaction.clearState();
-      this.interaction.changeState({
+      interaction.clearState();
+      interaction.changeState({
         cells: [getCellMeta(cell)],
         stateName: InteractionStateName.SELECTED,
       });

packages/s2-core/src/interaction/base-interaction/click/row-column-click.ts

@@ -40,7 +40,7 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
     this.spreadsheet.on(S2Event.GLOBAL_KEYBOARD_UP, (event: KeyboardEvent) => {
       if (event.key === InteractionKeyboardKey.SHIFT) {
         this.isMultiSelection = false;
-        this.interaction.removeIntercepts([InterceptType.CLICK]);
+        this.spreadsheet.interaction.removeIntercepts([InterceptType.CLICK]);
       }
     });
   }
@@ -117,7 +117,7 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
       }
       this.spreadsheet.emit(
         S2Event.GLOBAL_SELECTED,
-        this.interaction.getActiveCells(),
+        interaction.getActiveCells(),
       );
       this.showTooltip(event);
     }

packages/s2-core/src/interaction/base-interaction/hover.ts

@@ -23,11 +23,12 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
 
   public updateRowColCells(meta: ViewMeta) {
     const { rowId, colId } = meta;
+    const { interaction } = this.spreadsheet;
     if (colId) {
       // update colHeader cells
       const allColHeaderCells = getActiveHoverRowColCells(
         colId,
-        this.interaction.getAllColHeaderCells(),
+        interaction.getAllColHeaderCells(),
       );
       forEach(allColHeaderCells, (cell: ColCell) => {
         cell.updateByState(InteractionStateName.HOVER);
@@ -38,7 +39,7 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
       // update rowHeader cells
       const allRowHeaderCells = getActiveHoverRowColCells(
         rowId,
-        this.interaction.getAllRowHeaderCells(),
+        interaction.getAllRowHeaderCells(),
         this.spreadsheet.isHierarchyTreeType(),
       );
       forEach(allRowHeaderCells, (cell: RowCell) => {
@@ -58,8 +59,9 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
     event: CanvasEvent,
     meta: ViewMeta,
   ) {
-    this.interaction.hoverTimer = window.setTimeout(() => {
-      this.interaction.changeState({
+    const { interaction } = this.spreadsheet;
+    interaction.hoverTimer = window.setTimeout(() => {
+      interaction.changeState({
         cells: [getCellMeta(cell)],
         stateName: InteractionStateName.HOVER_FOCUS,
       });
@@ -84,13 +86,14 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
     if (isEmpty(cell)) {
       return;
     }
-    const activeCells = this.interaction.getActiveCells();
+    const { interaction } = this.spreadsheet;
+    const activeCells = interaction.getActiveCells();
     // 避免在统一单元格内鼠标移动造成的多次渲染
     if (isEqual(activeCells?.[0], cell)) {
       return;
     }
     const meta = cell.getMeta() as ViewMeta;
-    this.interaction.changeState({
+    interaction.changeState({
       cells: [getCellMeta(cell)],
       stateName: InteractionStateName.HOVER,
     });
@@ -141,18 +144,18 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
       if (isEmpty(cell)) {
         return;
       }
-
+      const { interaction } = this.spreadsheet;
       const meta = cell?.getMeta() as ViewMeta;
-      this.interaction.changeState({
+      interaction.changeState({
         cells: [getCellMeta(cell)],
         stateName: InteractionStateName.HOVER,
       });
 
       if (this.spreadsheet.options.hoverHighlight) {
         // highlight all the row and column cells which the cell belongs to
         this.updateRowColCells(meta);
-        if (this.interaction.hoverTimer) {
-          window.clearTimeout(this.interaction.hoverTimer);
+        if (interaction.hoverTimer) {
+          window.clearTimeout(interaction.hoverTimer);
         }
         this.changeStateToHoverFocus(cell, event, meta);
       }

packages/s2-core/src/interaction/brush-selection.ts

@@ -75,7 +75,7 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
   private bindMouseDown() {
     this.spreadsheet.on(S2Event.DATA_CELL_MOUSE_DOWN, (event: CanvasEvent) => {
       event.preventDefault();
-      if (this.interaction.hasIntercepts([InterceptType.CLICK])) {
+      if (this.spreadsheet.interaction.hasIntercepts([InterceptType.CLICK])) {
         return;
       }
       this.setBrushSelectionStage(InteractionBrushSelectionStage.CLICK);
@@ -94,11 +94,11 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
       ) {
         return;
       }
-
+      const { interaction } = this.spreadsheet;
       this.setBrushSelectionStage(InteractionBrushSelectionStage.DRAGGED);
-      this.interaction.addIntercepts([InterceptType.HOVER]);
       this.endBrushPoint = this.getBrushPoint(event);
-      this.interaction.clearStyleIndependent();
+      interaction.addIntercepts([InterceptType.HOVER]);
+      interaction.clearStyleIndependent();
       this.updatePrepareSelectMask();
       this.showPrepareSelectedCells();
     });
@@ -110,7 +110,9 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
       event.preventDefault();
 
       if (this.isValidBrushSelection()) {
-        this.interaction.addIntercepts([InterceptType.BRUSH_SELECTION]);
+        this.spreadsheet.interaction.addIntercepts([
+          InterceptType.BRUSH_SELECTION,
+        ]);
         this.updateSelectedCells();
         this.spreadsheet.showTooltipWithInfo(
           event,
@@ -135,7 +137,8 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
   }
 
   private setDisplayedDataCells() {
-    this.displayedDataCells = this.interaction.getPanelGroupAllDataCells();
+    this.displayedDataCells =
+      this.spreadsheet.interaction.getPanelGroupAllDataCells();
   }
 
   private updatePrepareSelectMask() {
@@ -232,7 +235,7 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
   // 刷选过程中高亮的cell
   private showPrepareSelectedCells = () => {
     const brushRangeDataCells = this.getBrushRangeDataCells();
-    this.interaction.changeState({
+    this.spreadsheet.interaction.changeState({
       cells: brushRangeDataCells.map((item) => getCellMeta(item)),
       stateName: InteractionStateName.PREPARE_SELECT,
       // 刷选首先会经过 hover => mousedown => mousemove, hover时会将当前行全部高亮 (row cell + data cell)
@@ -245,7 +248,8 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
 
   // 最终刷选的cell
   private updateSelectedCells() {
-    this.interaction.changeState({
+    const { interaction } = this.spreadsheet;
+    interaction.changeState({
       cells: this.brushRangeDataCells.map((item) => getCellMeta(item)),
       stateName: InteractionStateName.SELECTED,
     });
@@ -256,7 +260,7 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
     this.spreadsheet.emit(S2Event.GLOBAL_SELECTED, this.brushRangeDataCells);
     // 未刷选到有效格子, 允许 hover
     if (isEmpty(this.brushRangeDataCells)) {
-      this.interaction.removeIntercepts([InterceptType.HOVER]);
+      interaction.removeIntercepts([InterceptType.HOVER]);
     }
   }
 }