Merge pull request #2075 from VisActor/2073-feature-disable-enable-sc…

…roll

2073 feature disable enable scroll

common/changes/@visactor/vtable/2073-feature-disable-enable-scroll_2024-07-12-03-13.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add api disableScroll and enableScroll #2073\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

docs/assets/api/en/methods.md

@@ -1208,3 +1208,25 @@ Hide the highlight line of the moved column or row
 */
 hideMoverLine(col: number, row: number)
 ```
+
+## disableScroll(Function)
+
+Close the scrolling of the table. If you do not want the table content to scroll in the business scenario, you can call this method.
+
+```
+/** Turn off scrolling of the table */
+disableScroll() {
+this.eventManager.disableScroll();
+}
+```
+
+## enableScroll(Function)
+
+Enable scrolling of the table
+
+```
+/** Enable scrolling of the table */
+enableScroll() {
+this.eventManager.enableScroll();
+}
+```

docs/assets/api/zh/methods.md

@@ -1206,3 +1206,25 @@ interface ISortedMapItem {
    */
   hideMoverLine(col: number, row: number)
 ```
+
+## disableScroll(Function)
+
+关闭表格的滚动，业务场景中如果有不期望表格内容滚动的话，可以调用该方法。
+
+```
+  /** 关闭表格的滚动 */
+  disableScroll() {
+    this.eventManager.disableScroll();
+  }
+```
+
+## enableScroll(Function)
+
+开启表格的滚动
+
+```
+  /** 开启表格的滚动 */
+  enableScroll() {
+    this.eventManager.enableScroll();
+  }
+```

packages/vtable/examples/business/multiple-table.ts

@@ -111,7 +111,7 @@ export function createTable(container) {
   };
 
   const instance = new ListTable(option);
-
+  container === container2 && instance.disableScroll();
   // 只为了方便控制太调试用，不要拷贝
   window.tableInstance = instance;
 }

packages/vtable/src/core/BaseTable.ts

@@ -4311,4 +4311,12 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     this.scenegraph.component.hideMoveCol();
     this.scenegraph.renderSceneGraph();
   }
+  /** 关闭表格的滚动 */
+  disableScroll() {
+    this.eventManager.disableScroll();
+  }
+  /** 开启表格的滚动 */
+  enableScroll() {
+    this.eventManager.enableScroll();
+  }
 }

packages/vtable/src/event/event.ts

@@ -57,6 +57,8 @@ export class EventManager {
   inertiaScroll: InertiaScroll;
 
   bindSparklineHoverEvent: boolean;
+
+  _enableTableScroll: boolean = true;
   constructor(table: BaseTableAPI) {
     this.table = table;
     this.handleTextStickBindId = [];
@@ -682,4 +684,12 @@ export class EventManager {
     });
     this.globalEventListeners = [];
   }
+
+  enableScroll() {
+    this._enableTableScroll = true;
+  }
+
+  disableScroll() {
+    this._enableTableScroll = false;
+  }
 }

packages/vtable/src/event/listener/container-dom.ts

@@ -25,7 +25,9 @@ export function bindContainerDomListener(eventManager: EventManager) {
   });
 
   handler.on(table.getElement(), 'wheel', (e: WheelEvent) => {
-    handleWhell(e, stateManager);
+    if (table.eventManager._enableTableScroll) {
+      handleWhell(e, stateManager);
+    }
   });
 
   // 监听键盘事件
@@ -566,7 +568,12 @@ export function bindContainerDomListener(eventManager: EventManager) {
     }
     const isSelecting = table.stateManager.isSelecting();
 
-    if (eventManager.isDraging && isSelecting && table.stateManager.select.ranges?.length > 0) {
+    if (
+      eventManager._enableTableScroll &&
+      eventManager.isDraging &&
+      isSelecting &&
+      table.stateManager.select.ranges?.length > 0
+    ) {
       // 检测鼠标是否离开了table
       const drawRange = table.getDrawRange();
       // const element = table.getElement();

packages/vtable/src/event/listener/touch.ts

@@ -43,22 +43,23 @@ export function bindTouchListener(eventManager: EventManager) {
         y: e.changedTouches[0].pageY,
         timestamp: Date.now()
       });
+      if (eventManager._enableTableScroll) {
+        const deltaX =
+          -eventManager.touchMovePoints[eventManager.touchMovePoints.length - 1].x +
+          eventManager.touchMovePoints[eventManager.touchMovePoints.length - 2].x;
+        const deltaY =
+          -eventManager.touchMovePoints[eventManager.touchMovePoints.length - 1].y +
+          eventManager.touchMovePoints[eventManager.touchMovePoints.length - 2].y;
+        handleWhell({ deltaX, deltaY } as any, stateManager);
 
-      const deltaX =
-        -eventManager.touchMovePoints[eventManager.touchMovePoints.length - 1].x +
-        eventManager.touchMovePoints[eventManager.touchMovePoints.length - 2].x;
-      const deltaY =
-        -eventManager.touchMovePoints[eventManager.touchMovePoints.length - 1].y +
-        eventManager.touchMovePoints[eventManager.touchMovePoints.length - 2].y;
-      handleWhell({ deltaX, deltaY } as any, stateManager);
-
-      if (
-        e.cancelable &&
-        (table.internalProps.overscrollBehavior === 'none' ||
-          (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManager)) ||
-          (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManager)))
-      ) {
-        e.preventDefault();
+        if (
+          e.cancelable &&
+          (table.internalProps.overscrollBehavior === 'none' ||
+            (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManager)) ||
+            (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManager)))
+        ) {
+          e.preventDefault();
+        }
       }
     }
   };
@@ -89,15 +90,18 @@ export function bindTouchListener(eventManager: EventManager) {
           timestamp: Date.now()
         });
         // compute inertia parameter
-        const firstPoint = eventManager.touchMovePoints[0];
-        const lastPoint = eventManager.touchMovePoints[eventManager.touchMovePoints?.length - 1];
-        const vX = (lastPoint.x - firstPoint.x) / (lastPoint.timestamp - firstPoint.timestamp);
-        const vY = (lastPoint.y - firstPoint.y) / (lastPoint.timestamp - firstPoint.timestamp);
-        //开始惯性滚动
-        eventManager.inertiaScroll.startInertia(vX, vY, 0.95);
-        table.eventManager.inertiaScroll.setScrollHandle((dx: number, dy: number) => {
-          handleWhell({ deltaX: -dx, deltaY: -dy } as any, table.stateManager);
-        });
+
+        if (eventManager._enableTableScroll) {
+          const firstPoint = eventManager.touchMovePoints[0];
+          const lastPoint = eventManager.touchMovePoints[eventManager.touchMovePoints?.length - 1];
+          const vX = (lastPoint.x - firstPoint.x) / (lastPoint.timestamp - firstPoint.timestamp);
+          const vY = (lastPoint.y - firstPoint.y) / (lastPoint.timestamp - firstPoint.timestamp);
+          //开始惯性滚动
+          eventManager.inertiaScroll.startInertia(vX, vY, 0.95);
+          table.eventManager.inertiaScroll.setScrollHandle((dx: number, dy: number) => {
+            handleWhell({ deltaX: -dx, deltaY: -dy } as any, table.stateManager);
+          });
+        }
       }
     }
     eventManager.isTouchdown = false;

packages/vtable/src/ts-types/base-table.ts

@@ -845,6 +845,13 @@ export interface BaseTableAPI {
 
   bodyDomContainer?: HTMLElement;
   headerDomContainer?: HTMLElement;
+
+  showMoverLine: (col: number, row: number) => void;
+  hideMoverLine: (col: number, row: number) => void;
+  /** 关闭表格的滚动 */
+  disableScroll: () => void;
+  /** 开启表格的滚动 */
+  enableScroll: () => void;
 }
 export interface ListTableProtected extends IBaseTableProtected {
   /** 表格数据 */