feat: 支持resize最右侧column (#1611)

* feat: 支持resize最右侧column * fix: 添加testing-library/dom dep * fix: npm源 * fix: npm源 * fix: 切换成dispatchEvent * fix: testcase fix Co-authored-by: owen.wjh <[email protected]>
antvis · Jul 27, 2022 · f63bfa2 · f63bfa2 · vercel · Jul 27, 2022
1 parent 8f13911
commit f63bfa2
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;
     }