From f63bfa2a0e95c8c42c064d0e2e56ce9550ac50c6 Mon Sep 17 00:00:00 2001
From: serializedowen <wjh199455@gmail.com>
Date: Wed, 27 Jul 2022 10:58:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81resize=E6=9C=80?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7column=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 支持resize最右侧column

* fix: 添加testing-library/dom dep

* fix: npm源

* fix: npm源

* fix: 切换成dispatchEvent

* fix: testcase fix

Co-authored-by: owen.wjh <owen.wjh@antgroup.com>
---
 .../__tests__/spreadsheet/table-sheet-spec.ts | 36 +++++++++++++++++++
 packages/s2-core/package.json                 |  8 +++--
 .../src/interaction/event-controller.ts       | 17 +++++++++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
index c61f81c780..c91a6f1800 100644
--- a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
@@ -97,6 +97,7 @@ const options: S2Options = {
 };
 
 describe('TableSheet normal spec', () => {
+
   test('scrollWithAnimation with duration and callback', async () => {
     const s2 = new TableSheet(getContainer(), dataCfg, options);
     s2.render();
@@ -151,6 +152,41 @@ describe('TableSheet normal spec', () => {
     expect(firstColCell.shouldAddVerticalResizeArea()).toBe(true)
     expect(firstColCell.getVerticalResizeAreaOffset()).toEqual({ x: 80, y: 0 })
 
+    s2.destroy();
+  });
+
+  test('should be able to resize last column', async () => {
+    const s2 = new TableSheet(getContainer(), dataCfg, options);
+    s2.render();
+
+    await sleep(30);
+
+    const { x, width, top } = s2.getCanvasElement().getBoundingClientRect()
+    s2.getCanvasElement().dispatchEvent(new MouseEvent('mousedown', {
+      clientX: x + width - 1,
+      clientY: top + 25,
+    }))
+
+
+    window.dispatchEvent(new MouseEvent('mousemove', {
+      clientX: x+ width + 100,
+      clientY: top + 25,
+
+    }))
+    await sleep(300);
+
+    window.dispatchEvent(new MouseEvent('mouseup', {
+      clientX: x + width + 100,
+      clientY: top + 25
+    }))
+
+    await sleep(300);
+
+    const columnNodes = s2.getColumnNodes()
+    const lastColumnCell = columnNodes[columnNodes.length - 1].belongsCell as ColCell
+    
+    expect(lastColumnCell.getMeta().width).toBe(199)
   });
 
+
 });
diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json
index 167d27722b..cd1c2b7e87 100644
--- a/packages/s2-core/package.json
+++ b/packages/s2-core/package.json
@@ -69,13 +69,15 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "csstype": "^3.0.11",
+    "@testing-library/dom": "^8.16.0",
     "@types/d3-interpolate": "^3.0.1",
     "@types/d3-timer": "^3.0.0",
+    "csstype": "^3.0.11",
+    
     "d3-dsv": "^1.1.1",
-    "tinycolor2": "^1.4.2",
     "inquirer": "^8.2.0",
-    "inquirer-autocomplete-prompt": "^2.0.0"
+    "inquirer-autocomplete-prompt": "^2.0.0",
+    "tinycolor2": "^1.4.2"
   },
   "sideEffects": [
     "*.css",
diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
index d2d81f8229..3390a14936 100644
--- a/packages/s2-core/src/interaction/event-controller.ts
+++ b/packages/s2-core/src/interaction/event-controller.ts
@@ -268,6 +268,23 @@ export class EventController {
 
     if (this.isResizeArea(event)) {
       this.spreadsheet.emit(S2Event.LAYOUT_RESIZE_MOUSE_DOWN, event);
+      
+      // 仅捕获在canvas之外触发的事件     https://github.com/antvis/S2/issues/1592
+      const resizeMouseMoveCapture = (mouseEvent: MouseEvent) => {
+        if (!this.spreadsheet.getCanvasElement()) return false;
+        if (this.spreadsheet.getCanvasElement() !== mouseEvent.target) {
+
+          event.clientX = mouseEvent.clientX;
+          event.clientY = mouseEvent.clientY;
+          event.originalEvent = mouseEvent
+          this.spreadsheet.emit(S2Event.LAYOUT_RESIZE_MOUSE_MOVE, event);
+        }
+      }
+
+      window.addEventListener('mousemove', resizeMouseMoveCapture);
+      window.addEventListener('mouseup', () => {
+        window.removeEventListener('mousemove', resizeMouseMoveCapture)
+      }, { once: true })
       return;
     }