fix(interaction): 修复拖动水平滚动条后单元格选中状态被重置 close #2376 (#2380)

packages/s2-core/__tests__/spreadsheet/scroll-spec.ts

@@ -1,7 +1,7 @@
 /* eslint-disable jest/no-conditional-expect */
 import * as mockDataConfig from 'tests/data/simple-data.json';
 import { createMockCellInfo, getContainer, sleep } from 'tests/util/helpers';
-import { ScrollType } from '../../src/ui/scrollbar';
+import { ScrollBar, ScrollType } from '../../src/ui/scrollbar';
 import type { CellScrollPosition } from './../../src/common/interface/scroll';
 import { PivotSheet, SpreadSheet } from '@/sheet-type';
 import type {
@@ -880,4 +880,52 @@ describe('Scroll Tests', () => {
 
     expect(errorSpy).toBeCalledTimes(1);
   });
+
+  // https://github.com/antvis/S2/issues/2376
+  test.each(['hScrollBar', 'hRowScrollBar'])(
+    'should not reset interaction state after %s scrollbar thumb or track clicked',
+    (scrollbarName) => {
+      const containsMock = jest
+        .spyOn(HTMLElement.prototype, 'contains')
+        .mockImplementation(() => true);
+
+      const reset = jest.fn();
+
+      const scrollbar = s2.facet[scrollbarName] as ScrollBar;
+      const colCell = s2.getColumnLeafNodes()[0].belongsCell;
+
+      s2.on(S2Event.GLOBAL_RESET, reset);
+      s2.interaction.selectHeaderCell({
+        cell: colCell,
+      });
+
+      expect(s2.interaction.isSelectedState()).toBeTruthy();
+
+      const { maxX, maxY } = s2.facet?.panelBBox || {};
+      const { x, y } = canvas.getBoundingClientRect() || {};
+
+      // 滚动条
+      window.dispatchEvent(
+        new MouseEvent('click', {
+          clientX: x + scrollbar.position.x,
+          // 在滚动条内点击
+          clientY: y + scrollbar.position.y + scrollbar.theme.size - 2,
+        } as MouseEventInit),
+      );
+
+      // 滑动轨道
+      window.dispatchEvent(
+        new MouseEvent('click', {
+          // 右下角滑道点击
+          clientX: x + maxX - 2,
+          clientY: y + maxY + 2,
+        } as MouseEventInit),
+      );
+
+      expect(s2.interaction.isSelectedState()).toBeTruthy();
+      expect(reset).not.toHaveBeenCalled();
+
+      containsMock.mockReset();
+    },
+  );
 });

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

@@ -207,21 +207,32 @@ export class EventController {
       // 比如实际 400 * 300 => hd (800 * 600)
       // 从视觉来看, 虽然点击了空白处, 但其实还是处于 放大后的 canvas 区域, 所以还需要额外判断一下坐标
       const { width, height } = this.getContainerRect();
+
       return (
         canvas.contains(event.target as HTMLElement) &&
         event.clientX <= x + width &&
         event.clientY <= y + height
       );
     }
+
     return false;
   }
 
   private getContainerRect() {
-    const { maxX, maxY } = this.spreadsheet.facet?.panelBBox || {};
-    const { width, height } = this.spreadsheet.options;
+    const { facet, options } = this.spreadsheet;
+    const scrollBar = facet.hRowScrollBar || facet.hScrollBar;
+    const { maxX, maxY } = facet?.panelBBox || {};
+    const { width, height } = options;
+
+    /**
+     * https://github.com/antvis/S2/issues/2376
+     * 横向的滚动条在表格外 (Canvas 内), 点击滚动条(含滑道区域) 不应该重置交互
+     */
+    const trackHeight = scrollBar?.theme?.size || 0;
+
     return {
       width: Math.min(width, maxX),
-      height: Math.min(height, maxY),
+      height: Math.min(height, maxY + trackHeight),
     };
   }
 

packages/s2-react/playground/config.ts

@@ -110,6 +110,7 @@ export const s2Options: SheetComponentOptions = {
     },
     cellCfg: {
       height: 50,
+      width: 200,
     },
   },
 };