fix(core): 调用 setOptions 设置 brushSelection (#2257)

antvis · Jul 13, 2023 · f610514 · f610514 · vercel · Jul 13, 2023
1 parent 00cb47d
commit f610514
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 0 deletions.
diff --git a/packages/s2-core/__tests__/unit/interaction/brush-selection/base-brush-selection-spec.ts b/packages/s2-core/__tests__/unit/interaction/brush-selection/base-brush-selection-spec.ts
@@ -64,6 +64,11 @@ describe('Interaction Base Cell Brush Selection Tests', () => {
     mockSpreadSheetInstance.foregroundGroup = new Group('');
     mockSpreadSheetInstance.showTooltipWithInfo = jest.fn();
     mockSpreadSheetInstance.interaction = mockRootInteraction;
+    mockRootInteraction.getBrushSelection = () => ({
+      data: true,
+      row: true,
+      col: true,
+    });
     mockSpreadSheetInstance.render();
     brushSelectionInstance = new DataCellBrushSelection(
       mockSpreadSheetInstance,

diff --git a/packages/s2-core/__tests__/unit/interaction/brush-selection/col-brush-selection-spec.ts b/packages/s2-core/__tests__/unit/interaction/brush-selection/col-brush-selection-spec.ts
@@ -97,6 +97,11 @@ describe('Interaction Col Cell Brush Selection Tests', () => {
     mockRootInteraction.getAllColHeaderCells = () =>
       allColHeaderCells as unknown as ColCell[];
     mockSpreadSheetInstance.interaction = mockRootInteraction;
+    mockRootInteraction.getBrushSelection = () => ({
+      data: true,
+      row: true,
+      col: true,
+    });
     mockSpreadSheetInstance.render();
     brushSelectionInstance = new ColBrushSelection(mockSpreadSheetInstance);
 
@@ -227,4 +232,33 @@ describe('Interaction Col Cell Brush Selection Tests', () => {
     expect(selectedFn).toHaveBeenCalledTimes(1);
     expect(brushSelectionFn).toHaveBeenCalledTimes(1);
   });
+
+  test('should not emit brush secletion event', () => {
+    mockRootInteraction.getBrushSelection = () => ({
+      data: true,
+      row: true,
+      col: false,
+    });
+
+    const brushSelectionFn = jest.fn();
+
+    mockSpreadSheetInstance.on(
+      S2Event.COL_CELL_BRUSH_SELECTION,
+      brushSelectionFn,
+    );
+
+    // ================== mouse down ==================
+    emitEvent(S2Event.COL_CELL_MOUSE_DOWN, { x: 200, y: 0 });
+
+    // ================== mouse move ==================
+    emitEvent(S2Event.COL_CELL_MOUSE_MOVE, {
+      clientX: 600,
+      clientY: 90,
+    });
+
+    // ================== mouse up ==================
+    emitEvent(S2Event.GLOBAL_MOUSE_UP, {});
+    // emit event
+    expect(brushSelectionFn).toHaveBeenCalledTimes(0);
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/interaction/brush-selection/data-brush-selection-spec.ts b/packages/s2-core/__tests__/unit/interaction/brush-selection/data-brush-selection-spec.ts
@@ -102,6 +102,11 @@ describe('Interaction Data Cell Brush Selection Tests', () => {
       currentCol: false,
     });
     mockSpreadSheetInstance.interaction = mockRootInteraction;
+    mockRootInteraction.getBrushSelection = () => ({
+      data: true,
+      row: true,
+      col: true,
+    });
     mockSpreadSheetInstance.render();
     mockSpreadSheetInstance.facet.layoutResult.colLeafNodes = Array.from(
       new Array(10),
@@ -567,4 +572,33 @@ describe('Interaction Data Cell Brush Selection Tests', () => {
     expect(validateXIndex(8)).toBe(null);
     expect(validateXIndex(7)).toBe(7);
   });
+
+  test('should not emit brush secletion event', () => {
+    mockRootInteraction.getBrushSelection = () => ({
+      data: false,
+      row: true,
+      col: true,
+    });
+
+    const brushSelectionFn = jest.fn();
+
+    mockSpreadSheetInstance.on(
+      S2Event.DATA_CELL_BRUSH_SELECTION,
+      brushSelectionFn,
+    );
+
+    // ================== mouse down ==================
+    emitEvent(S2Event.DATA_CELL_MOUSE_DOWN, { x: 10, y: 20 });
+
+    // ================== mouse move ==================
+    emitGlobalEvent(S2Event.GLOBAL_MOUSE_MOVE, {
+      clientX: 100,
+      clientY: 200,
+    });
+
+    // ================== mouse up ==================
+    emitEvent(S2Event.GLOBAL_MOUSE_UP, {});
+    // emit event
+    expect(brushSelectionFn).toHaveBeenCalledTimes(0);
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/interaction/brush-selection/row-brush-selection-spec.ts b/packages/s2-core/__tests__/unit/interaction/brush-selection/row-brush-selection-spec.ts
@@ -94,6 +94,11 @@ describe('Interaction Row Cell Brush Selection Tests', () => {
     mockSpreadSheetInstance.getCell = jest.fn(() => startBrushRowCell) as any;
     mockRootInteraction.getAllRowHeaderCells = () => allRowHeaderCells;
     mockSpreadSheetInstance.interaction = mockRootInteraction;
+    mockRootInteraction.getBrushSelection = () => ({
+      data: true,
+      row: true,
+      col: true,
+    });
     mockSpreadSheetInstance.render();
     brushSelectionInstance = new RowBrushSelection(mockSpreadSheetInstance);
 
@@ -280,4 +285,31 @@ describe('Interaction Row Cell Brush Selection Tests', () => {
       currentRow.length / 2,
     );
   });
+
+  test('should not emit brush secletion event', () => {
+    mockRootInteraction.getBrushSelection = () => ({
+      data: true,
+      row: false,
+      col: true,
+    });
+
+    const brushSelectionFn = jest.fn();
+
+    mockSpreadSheetInstance.on(
+      S2Event.ROW_CELL_BRUSH_SELECTION,
+      brushSelectionFn,
+    );
+
+    // ================== mouse down ==================
+    emitEvent(S2Event.ROW_CELL_MOUSE_DOWN, { x: 10, y: 90 });
+
+    mockSpreadSheetInstance.getCell = jest.fn(() => endBrushRowCell) as any;
+    // ================== mouse move ==================
+    emitEvent(S2Event.GLOBAL_MOUSE_MOVE, { clientX: 180, clientY: 400 });
+
+    // ================== mouse up ==================
+    emitEvent(S2Event.GLOBAL_MOUSE_UP, {});
+    // emit event
+    expect(brushSelectionFn).toHaveBeenCalledTimes(0);
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
@@ -472,6 +472,36 @@ describe('PivotSheet Tests', () => {
     expect(s2.tooltip).toBeInstanceOf(CustomTooltip);
   });
 
+  test('should refresh brush selection info', () => {
+    s2.setOptions({
+      interaction: {
+        brushSelection: true,
+      },
+    });
+
+    expect(s2.interaction.getBrushSelection()).toStrictEqual({
+      data: true,
+      row: true,
+      col: true,
+    });
+
+    s2.setOptions({
+      interaction: {
+        brushSelection: {
+          data: true,
+          row: false,
+          col: false,
+        },
+      },
+    });
+
+    expect(s2.interaction.getBrushSelection()).toStrictEqual({
+      data: true,
+      row: false,
+      col: false,
+    });
+  });
+
   test('should render sheet', () => {
     const facetRenderSpy = jest
       .spyOn(s2, 'buildFacet' as any)

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
@@ -25,6 +25,10 @@ export class ColBrushSelection extends BaseBrushSelection {
 
   protected bindMouseDown() {
     this.spreadsheet.on(S2Event.COL_CELL_MOUSE_DOWN, (event) => {
+      if (!this.spreadsheet.interaction.getBrushSelection().col) {
+        return;
+      }
+
       super.mouseDown(event);
     });
   }

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
@@ -19,6 +19,10 @@ export class DataCellBrushSelection extends BaseBrushSelection {
 
   protected bindMouseDown() {
     this.spreadsheet.on(S2Event.DATA_CELL_MOUSE_DOWN, (event) => {
+      if (!this.spreadsheet.interaction.getBrushSelection().data) {
+        return;
+      }
+
       super.mouseDown(event);
       this.resetScrollDelta();
     });

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
@@ -19,6 +19,10 @@ import { BaseBrushSelection } from './base-brush-selection';
 export class RowBrushSelection extends BaseBrushSelection {
   protected bindMouseDown() {
     this.spreadsheet.on(S2Event.ROW_CELL_MOUSE_DOWN, (event) => {
+      if (!this.spreadsheet.interaction.getBrushSelection().row) {
+        return;
+      }
+
       super.mouseDown(event);
     });
   }

diff --git a/packages/s2-core/src/interaction/root.ts b/packages/s2-core/src/interaction/root.ts
@@ -626,4 +626,24 @@ export class RootInteraction {
       currentCol,
     };
   }
+
+  public getBrushSelection(): BrushSelection {
+    const { brushSelection } = this.spreadsheet.options.interaction;
+
+    if (isBoolean(brushSelection)) {
+      return {
+        data: brushSelection,
+        row: brushSelection,
+        col: brushSelection,
+      };
+    }
+
+    const { data = false, row = false, col = false } = brushSelection ?? {};
+
+    return {
+      data,
+      row,
+      col,
+    };
+  }
 }
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -6,6 +6,7 @@ import {
   get,
   includes,
   isEmpty,
+  isEqual,
   isFunction,
   isString,
   memoize,
@@ -215,6 +216,7 @@ export abstract class SpreadSheet extends EE {
   }
 
   private initInteraction() {
+    this.interaction?.destroy?.();
     this.interaction = new RootInteraction(this);
   }
 
@@ -377,6 +379,7 @@ export abstract class SpreadSheet extends EE {
 
   public setOptions(options: Partial<S2Options>, reset?: boolean) {
     this.hideTooltip();
+
     if (reset) {
       this.options = getSafetyOptions(options);
     } else {

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -474,6 +474,21 @@ function MainLayout() {
                 >
                   自定义 Tooltip (s2.setOptions)
                 </Button>
+
+                <Button
+                  size="small"
+                  onClick={() => {
+                    s2Ref.current?.setOptions({
+                      interaction: {
+                        brushSelection: false,
+                      },
+                    });
+                    s2Ref.current?.render();
+                  }}
+                >
+                  禁用刷选 (s2.setOptions)
+                </Button>
+
                 <Popover
                   placement="bottomRight"
                   content={