fix: 修复父容器存在 transform 缩放时单元格刷选偏移 close #2553 (#2565)

* fix: 修复父容器存在 transform 缩放时单元格刷选偏移 close #2553

* test: 修复单测

* test: 修复单测

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

@@ -13,6 +13,7 @@ import {
   type OriginalEvent,
   type S2DataConfig,
   type ViewMeta,
+  EventController,
 } from '@/index';
 import { RootInteraction } from '@/interaction/root';
 
@@ -61,6 +62,13 @@ describe('Interaction Base Cell Brush Selection Tests', () => {
     await s2.render();
 
     mockRootInteraction = new MockRootInteraction(s2);
+    mockRootInteraction.eventController = new EventController(s2);
+    mockRootInteraction.eventController.getViewportPoint = (event) => {
+      return s2.container.client2Viewport({
+        x: event.clientX,
+        y: event.clientY,
+      });
+    };
     mockRootInteraction.getBrushSelection = () => {
       return {
         dataCell: true,

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

@@ -11,6 +11,7 @@ import {
   SpreadSheet,
   type OriginalEvent,
   type S2DataConfig,
+  EventController,
 } from '@/index';
 
 jest.mock('@/interaction/event-controller');
@@ -72,6 +73,13 @@ describe('Interaction Col Cell Brush Selection Tests', () => {
 
     s2.showTooltipWithInfo = jest.fn();
     mockRootInteraction = new MockRootInteraction(s2);
+    mockRootInteraction.eventController = new EventController(s2);
+    mockRootInteraction.eventController.getViewportPoint = (event) => {
+      return s2.container.client2Viewport({
+        x: event.clientX,
+        y: event.clientY,
+      });
+    };
     s2.getCell = jest.fn(() => startBrushColCell) as any;
     mockRootInteraction.getBrushSelection = () => {
       return {
@@ -212,7 +220,7 @@ describe('Interaction Col Cell Brush Selection Tests', () => {
     expect(brushSelectionFn).toHaveBeenCalledTimes(1);
   });
 
-  test('should not emit brush secletion event', () => {
+  test('should not emit brush selection event', () => {
     mockRootInteraction.getBrushSelection = () => ({
       dataCell: true,
       rowCell: true,

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

@@ -7,19 +7,20 @@ import {
   CellType,
   DataCellBrushSelection,
   FrozenGroupType,
-  getScrollOffsetForCol,
-  getScrollOffsetForRow,
   InteractionBrushSelectionStage,
   Node,
   PivotSheet,
   S2Event,
   ScrollDirection,
   SpreadSheet,
+  getScrollOffsetForCol,
+  getScrollOffsetForRow,
   type LayoutResult,
   type OriginalEvent,
   type S2DataConfig,
   type S2Options,
   type ViewMeta,
+  EventController,
 } from '@/index';
 import { RootInteraction } from '@/interaction/root';
 
@@ -118,6 +119,13 @@ describe('Interaction Data Cell Brush Selection Tests', () => {
     await s2.render();
 
     mockRootInteraction = new MockRootInteraction(s2);
+    mockRootInteraction.eventController = new EventController(s2);
+    mockRootInteraction.eventController.getViewportPoint = (event) => {
+      return s2.container.client2Viewport({
+        x: event.clientX,
+        y: event.clientY,
+      });
+    };
     s2.getCell = jest.fn(() => startBrushDataCell) as any;
     s2.showTooltipWithInfo = jest.fn();
     mockRootInteraction.getSelectedCellHighlight = () => {

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

@@ -11,6 +11,7 @@ import {
   SpreadSheet,
   type OriginalEvent,
   type S2DataConfig,
+  EventController,
 } from '@/index';
 
 jest.mock('@/interaction/event-controller');
@@ -73,6 +74,13 @@ describe('Interaction Row Cell Brush Selection Tests', () => {
     s2.showTooltipWithInfo = jest.fn();
     s2.getCell = jest.fn(() => startBrushRowCell) as any;
     mockRootInteraction = new MockRootInteraction(s2);
+    mockRootInteraction.eventController = new EventController(s2);
+    mockRootInteraction.eventController.getViewportPoint = (event) => {
+      return s2.container.client2Viewport({
+        x: event.clientX,
+        y: event.clientY,
+      });
+    };
     mockRootInteraction.getBrushSelection = () => {
       return {
         dataCell: true,
@@ -259,7 +267,7 @@ describe('Interaction Row Cell Brush Selection Tests', () => {
     expect(brushSelectionInstance.brushRangeCells.length).toEqual(8);
   });
 
-  test('should not emit brush secletion event', () => {
+  test('should not emit brush selection event', () => {
     mockRootInteraction.getBrushSelection = () => ({
       dataCell: true,
       rowCell: false,

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

@@ -1004,20 +1004,51 @@ describe('Interaction Event Controller Tests', () => {
     spreadsheet.on(S2Event.GLOBAL_RESET, reset);
 
     const pointInCanvas = getClientPointOnCanvas(spreadsheet.container, 10, 10);
-    const evt = new window.CustomEvent('click');
+    const event = new window.CustomEvent('click');
 
-    Object.defineProperties(evt, {
+    Object.defineProperties(event, {
       clientX: {
         value: pointInCanvas.clientX,
       },
       clientY: {
         value: pointInCanvas.clientY,
       },
     });
-    spreadsheet.getCanvasElement().dispatchEvent(evt);
+    spreadsheet.getCanvasElement().dispatchEvent(event);
 
     expect(eventController.isCanvasEffect).toBe(true);
     expect(reset).not.toHaveBeenCalled();
     expect(spreadsheet.interaction.reset).not.toHaveBeenCalled();
   });
+
+  // https://github.com/antvis/S2/issues/2553
+  test('should use offset point if enable supportsCSSTransform', () => {
+    jest.spyOn(spreadsheet, 'getCanvasConfig').mockImplementationOnce(() => {
+      return {
+        supportsCSSTransform: true,
+      };
+    });
+
+    const event = new MouseEvent('click');
+
+    Object.defineProperties(event, {
+      offsetX: {
+        value: 100,
+      },
+      offsetY: {
+        value: 200,
+      },
+      clientX: {
+        value: 300,
+      },
+      clientY: {
+        value: 400,
+      },
+    });
+
+    expect(eventController.getViewportPoint(event)).toStrictEqual({
+      x: 100,
+      y: 200,
+    });
+  });
 });

packages/s2-core/__tests__/util/helpers.ts

@@ -14,7 +14,13 @@ import { omit } from 'lodash';
 import * as simpleDataConfig from 'tests/data/simple-data.json';
 import * as dataConfig from 'tests/data/mock-dataset.json';
 import { Renderer } from '@antv/g-canvas';
-import { getTheme, type BaseDataSet, type Node, Hierarchy } from '../../src';
+import {
+  getTheme,
+  type BaseDataSet,
+  type Node,
+  Hierarchy,
+  EventController,
+} from '../../src';
 
 import { assembleOptions, assembleDataCfg } from '.';
 import { RootInteraction } from '@/interaction/root';
@@ -148,6 +154,7 @@ export const createFakeSpreadSheet = (config?: {
       [FrozenGroupType.FROZEN_TRAILING_COL]: {},
     },
     cornerBBox: {},
+    destroy: jest.fn(),
   } as unknown as BaseFacet;
   s2.container.render = jest.fn();
   s2.store = new Store();
@@ -173,6 +180,7 @@ export const createFakeSpreadSheet = (config?: {
   s2.facet.getCells = jest.fn().mockReturnValue([]);
   s2.getCanvasElement = () =>
     s2.container.getContextService().getDomElement() as HTMLCanvasElement;
+  s2.getCanvasConfig = () => s2.container.getConfig();
   s2.isCustomHeaderFields = jest.fn(() => false);
   s2.isCustomRowFields = jest.fn(() => false);
   s2.isCustomColumnFields = jest.fn(() => false);
@@ -193,6 +201,7 @@ export const createFakeSpreadSheet = (config?: {
   const interaction = new RootInteraction(s2 as unknown as SpreadSheet);
 
   s2.interaction = interaction;
+  s2.interaction.eventController = new EventController(s2);
 
   return s2;
 };

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

@@ -1,4 +1,4 @@
-import type { FederatedPointerEvent as Event } from '@antv/g';
+import type { FederatedPointerEvent as Event, PointLike } from '@antv/g';
 import type { DataCell, MergedCell } from '../../cell';
 import type {
   CustomTreeNode,
@@ -507,9 +507,6 @@ export interface GridInfo {
   rows: number[];
 }
 
-export interface Point {
-  x: number;
-  y: number;
-}
+export interface Point extends PointLike {}
 
 export type RowData = Data | CellData[];

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

@@ -1,6 +1,6 @@
-import type { FederatedPointerEvent as CanvasEvent } from '@antv/g';
+import type { FederatedPointerEvent as CanvasEvent, PointLike } from '@antv/g';
 import type * as CSS from 'csstype';
-import type { Point, S2CellType, ViewMetaData } from '../../common/interface';
+import type { S2CellType, ViewMetaData } from '../../common/interface';
 import type { SpreadSheet } from '../../sheet-type';
 import type { BaseTooltip } from '../../ui/tooltip';
 
@@ -66,7 +66,7 @@ export interface TooltipOperatorOptions<Menu = BaseTooltipOperatorMenuOptions> {
   menu?: Menu;
 }
 
-export type TooltipPosition = Point;
+export type TooltipPosition = PointLike;
 
 export type TooltipDetailListItem = {
   name: string;

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

@@ -115,7 +115,10 @@ export class BaseBrushSelection
     const { minX, minY } = this.spreadsheet.facet.panelBBox;
 
     return (
-      point.x > minX && point.x < width && point.y > minY && point.y < height
+      point?.x > minX &&
+      point?.x < width &&
+      point?.y > minY &&
+      point?.y < height
     );
   }
 

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

@@ -1,4 +1,4 @@
-import type { FederatedPointerEvent as CanvasEvent } from '@antv/g';
+import type { FederatedPointerEvent as CanvasEvent, PointLike } from '@antv/g';
 import { isEmpty, map } from 'lodash';
 import type { ColCell } from '../../cell/col-cell';
 import { InterceptType, S2Event } from '../../common/constant';
@@ -34,7 +34,7 @@ export class ColCellBrushSelection extends BaseBrushSelection {
     });
   }
 
-  protected isPointInCanvas(point: { x: number; y: number }) {
+  protected isPointInCanvas(point: PointLike) {
     // 获取列头的区域范围
     const { width: maxX } = this.spreadsheet.facet.getCanvasSize();
     const { width: minX, minY, maxY } = this.spreadsheet.facet.cornerBBox;
@@ -54,10 +54,8 @@ export class ColCellBrushSelection extends BaseBrushSelection {
 
       this.setBrushSelectionStage(InteractionBrushSelectionStage.DRAGGED);
 
-      const pointInCanvas = this.spreadsheet.container.client2Viewport({
-        x: event.clientX,
-        y: event.clientY,
-      });
+      const pointInCanvas =
+        this.spreadsheet.interaction.eventController?.getViewportPoint(event);
 
       if (!this.isPointInCanvas(pointInCanvas)) {
         return;

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

@@ -1,3 +1,4 @@
+import type { PointLike } from '@antv/g';
 import { isEmpty, range } from 'lodash';
 import type { DataCell } from '../../cell/data-cell';
 import { S2Event } from '../../common/constant';
@@ -6,12 +7,7 @@ import {
   InteractionBrushSelectionStage,
   InteractionStateName,
 } from '../../common/constant/interaction';
-import type {
-  BrushRange,
-  CellMeta,
-  Point,
-  ViewMeta,
-} from '../../common/interface';
+import type { BrushRange, CellMeta, ViewMeta } from '../../common/interface';
 import { afterSelectDataCells } from '../../utils/interaction/select-event';
 import { BaseBrushSelection } from './base-brush-selection';
 
@@ -40,10 +36,8 @@ export class DataCellBrushSelection extends BaseBrushSelection {
       }
 
       this.setBrushSelectionStage(InteractionBrushSelectionStage.DRAGGED);
-      const pointInCanvas = this.spreadsheet.container.client2Viewport({
-        x: event.clientX,
-        y: event.clientY,
-      });
+      const pointInCanvas =
+        this.spreadsheet.interaction.eventController.getViewportPoint(event);
 
       if (this.autoBrushScroll(pointInCanvas)) {
         return;
@@ -150,7 +144,7 @@ export class DataCellBrushSelection extends BaseBrushSelection {
     super.bindMouseUp(true);
   }
 
-  protected getPrepareSelectMaskPosition(brushRange: BrushRange): Point {
+  protected getPrepareSelectMaskPosition(brushRange: BrushRange): PointLike {
     const { minX, minY } = this.spreadsheet.facet.panelBBox;
     const x = Math.max(brushRange.start.x, minX);
     const y = Math.max(brushRange.start.y, minY);

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

@@ -1,3 +1,4 @@
+import type { PointLike } from '@antv/g';
 import { isNil, last, map } from 'lodash';
 import { RowCell } from '../../cell';
 import { InterceptType, S2Event } from '../../common/constant';
@@ -9,7 +10,6 @@ import {
 import type {
   BrushRange,
   OnUpdateCells,
-  Point,
   ViewMeta,
 } from '../../common/interface';
 import type { BBox } from '../../engine';
@@ -32,7 +32,7 @@ export class RowCellBrushSelection extends BaseBrushSelection {
     });
   }
 
-  protected isPointInCanvas(point: Point) {
+  protected isPointInCanvas(point: PointLike) {
     // 获取行头的区域范围
     const { height: maxY } = this.spreadsheet.facet.getCanvasSize();
     const { minX, height: minY, maxX } = this.spreadsheet.facet.cornerBBox;
@@ -52,10 +52,8 @@ export class RowCellBrushSelection extends BaseBrushSelection {
 
       this.setBrushSelectionStage(InteractionBrushSelectionStage.DRAGGED);
 
-      const pointInCanvas = this.spreadsheet.container.client2Viewport({
-        x: event.clientX,
-        y: event.clientY,
-      });
+      const pointInCanvas =
+        this.spreadsheet.interaction.eventController.getViewportPoint(event);
 
       if (this.autoBrushScroll(pointInCanvas, true)) {
         return;
@@ -182,7 +180,7 @@ export class RowCellBrushSelection extends BaseBrushSelection {
     return this.validateYIndex(nextRowIndex);
   };
 
-  protected getPrepareSelectMaskPosition(brushRange: BrushRange): Point {
+  protected getPrepareSelectMaskPosition(brushRange: BrushRange): PointLike {
     const { minY } = this.spreadsheet.facet.panelBBox;
     const x = brushRange.start.x;
     const y = Math.max(brushRange.start.y, minY);