Merge pull request #538 from VisActor/535-feature-overscroll-behavior

535 feature overscroll behavior
VisActor · Nov 7, 2023 · 425f6e7 · 425f6e7
2 parents 89824b7 + 8d4a70e
commit 425f6e7
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 54 deletions.
diff --git a/common/changes/@visactor/vtable/535-feature-overscroll-behavior_2023-11-07-08-51.json b/common/changes/@visactor/vtable/535-feature-overscroll-behavior_2023-11-07-08-51.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add option overscrollBehavior\n\n",
+      "type": "patch",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/docs/package.json b/docs/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@arco-design/web-react": "2.46.1",
     "@visactor/vtable": "workspace:*",
-    "@visactor/vchart": "1.5.3",
+    "@visactor/vchart": "1.6.0",
     "markdown-it": "^13.0.0",
     "highlight.js": "^11.8.0",
     "axios": "^1.4.0",
@@ -38,4 +38,4 @@
     "globby": "11.1.0",
     "chokidar": "^3.5.0"
   }
-}
+}
diff --git a/packages/vtable/package.json b/packages/vtable/package.json
@@ -49,16 +49,16 @@
     "test-nodejs": "ts-node --transpileOnly --skipProject ./nodejs/index.ts"
   },
   "dependencies": {
-    "@visactor/vrender": "0.16.11",
-    "@visactor/vrender-components": "0.16.11",
+    "@visactor/vrender": "0.16.12",
+    "@visactor/vrender-components": "0.16.12",
     "@visactor/vutils-extension": "1.5.1-alpha.0",
     "@visactor/vutils": "0.16.6",
     "@visactor/vscale": "0.16.0",
     "@visactor/vdataset": "~0.15.7",
     "cssfontparser": "^1.2.1"
   },
   "devDependencies": {
-    "@visactor/vchart": "1.5.3",
+    "@visactor/vchart": "1.6.0",
     "@internal/bundler": "workspace:*",
     "@internal/eslint-config": "workspace:*",
     "@internal/ts-config": "workspace:*",
@@ -114,4 +114,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -189,7 +189,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
       mode,
       modeParams,
       canvasWidth,
-      canvasHeight
+      canvasHeight,
+      overscrollBehavior
     } = options;
     this.container = container;
     this.options = options;
@@ -254,7 +255,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     internalProps.dragHeaderMode = dragHeaderMode;
     internalProps.renderChartAsync = renderChartAsync;
     setBatchRenderChartCount(renderChartAsyncBatchCount);
-
+    internalProps.overscrollBehavior = overscrollBehavior ?? 'auto';
     internalProps._rowHeightsMap = new NumberMap();
     internalProps._rowRangeHeightsMap = new Map();
     internalProps._colRangeWidthsMap = new Map();
@@ -1812,7 +1813,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
       autoFillHeight,
       customRender,
       renderChartAsync,
-      renderChartAsyncBatchCount
+      renderChartAsyncBatchCount,
+      overscrollBehavior
     } = options;
     if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
       this.internalProps.pixelRatio = pixelRatio;
@@ -1870,7 +1872,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     internalProps.dragHeaderMode = dragHeaderMode;
     internalProps.renderChartAsync = renderChartAsync;
     setBatchRenderChartCount(renderChartAsyncBatchCount);
-
+    internalProps.overscrollBehavior = overscrollBehavior ?? 'auto';
     internalProps.cellTextOverflows = {};
     internalProps._rowHeightsMap = new NumberMap();
     internalProps._rowRangeHeightsMap = new Map();

diff --git a/packages/vtable/src/event/listener/touch.ts b/packages/vtable/src/event/listener/touch.ts
@@ -52,7 +52,8 @@ export function bindTouchListener(eventManeger: EventManeger) {
 
       if (
         e.cancelable &&
-        ((Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManeger)) ||
+        (table.internalProps.overscrollBehavior === 'none' ||
+          (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManeger)) ||
           (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManeger)))
       ) {
         e.preventDefault();

diff --git a/packages/vtable/src/event/scroll.ts b/packages/vtable/src/event/scroll.ts
@@ -27,7 +27,8 @@ export function handleWhell(event: WheelEvent, state: StateManeger) {
   state.resetInteractionState();
   if (
     event.cancelable &&
-    ((Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) ||
+    (state.table.internalProps.overscrollBehavior === 'none' ||
+      (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) ||
       (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, state)))
   ) {
     event.preventDefault();

diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts
@@ -187,6 +187,12 @@ export interface IBaseTableProtected {
   renderChartAsync?: boolean;
   // // 开启图表异步渲染 每批次渐进渲染图表个数
   // renderChartAsyncBatchCount?: number;
+
+  /**
+   * 'auto':和浏览器滚动行为一致 表格滚动到顶部/底部时 触发浏览器默认行为;
+   *  设置为 'none' 时, 表格滚动到顶部/底部时, 不再触发父容器滚动
+   * */
+  overscrollBehavior?: 'auto' | 'none';
 }
 export interface BaseTableConstructorOptions {
   // /** 指定表格的行数 */
@@ -333,6 +339,11 @@ export interface BaseTableConstructorOptions {
   modeParams?: any;
   canvasWidth?: number;
   canvasHeight?: number;
+  /**
+   * 'auto':和浏览器滚动行为一致 表格滚动到顶部/底部时 触发浏览器默认行为;
+   *  设置为 'none' 时, 表格滚动到顶部/底部时, 不再触发父容器滚动
+   * */
+  overscrollBehavior?: 'auto' | 'none';
 }
 export interface BaseTableAPI {
   /** 表格的行数 */