From afb059a63c9802466086232aeb9d4935583a566a Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Mon, 23 Oct 2023 14:10:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(interaction):=20=E4=BF=AE=E5=A4=8D=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=E6=B0=B4=E5=B9=B3=E6=BB=9A=E5=8A=A8=E6=9D=A1=E5=90=8E?=
 =?UTF-8?q?=E5=8D=95=E5=85=83=E6=A0=BC=E9=80=89=E4=B8=AD=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E8=A2=AB=E9=87=8D=E7=BD=AE=20close=20#2376?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/spreadsheet/scroll-spec.ts      | 50 ++++++++++++++++++-
 .../src/interaction/event-controller.ts       | 17 +++++--
 packages/s2-react/playground/config.ts        |  1 +
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts b/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts
index bf4fad922e..b634849f5a 100644
--- a/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts
+++ b/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();
+    },
+  );
 });
diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
index f9d54c4851..a1258710b1 100644
--- a/packages/s2-core/src/interaction/event-controller.ts
+++ b/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),
     };
   }
 
diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
index 52719ad7ee..d7601cd540 100644
--- a/packages/s2-react/playground/config.ts
+++ b/packages/s2-react/playground/config.ts
@@ -110,6 +110,7 @@ export const s2Options: SheetComponentOptions = {
     },
     cellCfg: {
       height: 50,
+      width: 200,
     },
   },
 };