fix: parse int scroll offset for resolve text shake close #20

packages/s2-core/package.json

@@ -25,7 +25,7 @@
     "dist": "webpack --config webpack.config.js --mode production",
     "cpx:svg": "cpx \"src/**/*.svg\" lib; cpx \"src/**/*.svg\" esm",
     "cpx:less": "cpx \"src/**/*.less\" lib; cpx \"src/**/*.less\" esm",
-    "test-live": "DEBUG_MODE=1 jest __tests__/spreadsheet/spread-sheet-spec.tsx",
+    "test-live": "DEBUG_MODE=1 jest __tests__/spreadsheet/spread-sheet-spec.tsx --watch",
     "start": "webpack --config webpack-dev.config.js --mode development --progress"
   },
   "commitlint": {

packages/s2-core/src/facet/index.ts

@@ -1,4 +1,4 @@
-import { BBox } from '@antv/g-canvas';
+import type { BBox } from '@antv/g-canvas';
 import { Wheel } from '@antv/g-gesture';
 import { ScrollBar } from '../ui/scrollbar';
 import { interpolateArray } from 'd3-interpolate';
@@ -13,6 +13,7 @@ import {
   isNil,
   forEach,
   isUndefined,
+  debounce,
 } from 'lodash';
 import {
   calculateInViewIndexes,
@@ -80,8 +81,6 @@ export class SpreadsheetFacet extends BaseFacet {
 
   protected preHideScrollBarHandler;
 
-  protected preRenderHandler;
-
   protected preIndexes: Indexes;
 
   protected realCornerWidth: number;
@@ -495,7 +494,6 @@ export class SpreadsheetFacet extends BaseFacet {
     const [scrollX, scrollY, rowScrollX] = this.getScrollOffset();
     const { width, height } = this.viewportBBox;
     const realWidth = this.layoutResult.colsHierarchy.width;
-    // const realHeight = this.layoutResult.rowsHierarchy.height;
     const realHeight = this.getRealHeight();
 
     // scroll row header separate from the whole canvas
@@ -848,8 +846,10 @@ export class SpreadsheetFacet extends BaseFacet {
         MIN_SCROLL_BAR_HEIGHT,
       );
       const getOffsetTop = (scrollTop: number) =>
-        (scrollTop / (height - thumbHeight)) *
-        (realHeight - this.viewportBBox.height);
+        Math.floor(
+          (scrollTop / (height - thumbHeight)) *
+            (realHeight - this.viewportBBox.height),
+        );
 
       this.vScrollBar = new ScrollBar({
         isHorizontal: false,
@@ -998,7 +998,7 @@ export class SpreadsheetFacet extends BaseFacet {
   }
 
   private shouldPreventWheelEvent(x: number, y: number) {
-    const near = (current, offset): boolean => {
+    const near = (current: number, offset: number): boolean => {
       // 精度问题，所以取 0.99， 0.01
       return (offset > 0 && current >= 0.99) || (offset < 0 && current <= 0.01);
     };
@@ -1024,17 +1024,13 @@ export class SpreadsheetFacet extends BaseFacet {
 
     if (x > 0) {
       // 左滑，显示横向滑动条
-      if (this.hRowScrollBar) {
-        this.hRowScrollBar.updateTheme(this.scrollBarTouchTheme);
-      }
-      if (this.hScrollBar) {
-        this.hScrollBar.updateTheme(this.scrollBarTouchTheme);
-      }
+      this.hRowScrollBar?.updateTheme(this.scrollBarTouchTheme);
+      this.hScrollBar?.updateTheme(this.scrollBarTouchTheme);
     }
 
-    if (y > 0 && this.vScrollBar) {
+    if (y > 0) {
       // 上滑，显示横向滚动条
-      this.vScrollBar.updateTheme(this.scrollBarTouchTheme);
+      this.vScrollBar?.updateTheme(this.scrollBarTouchTheme);
     }
     // 将偏移设置到滚动条中
     // 降低滚轮速度
@@ -1074,26 +1070,19 @@ export class SpreadsheetFacet extends BaseFacet {
     );
   };
 
-  private hideScrollBar() {
+  private hideScrollBar = debounce(() => {
+    // only work in mobile
     if (isMobile()) {
-      // only work in mobile
-      clearTimeout(this.preHideScrollBarHandler);
-      this.preHideScrollBarHandler = setTimeout(() => {
-        this.hRowScrollBar?.updateTheme(this.scrollBarTheme);
-        this.hScrollBar?.updateTheme(this.scrollBarTheme);
-        this.vScrollBar?.updateTheme(this.scrollBarTheme);
-      }, 1000);
+      this.hRowScrollBar?.updateTheme(this.scrollBarTheme);
+      this.hScrollBar?.updateTheme(this.scrollBarTheme);
+      this.vScrollBar?.updateTheme(this.scrollBarTheme);
     }
-  }
+  }, 1000);
 
-  private renderAfterScroll() {
-    clearTimeout(this.preRenderHandler);
-    // 200ms内没有发生滚动，就重新渲染
-    this.preRenderHandler = setTimeout(() => {
-      this.spreadsheet.needUseCacheMeta = true;
-      this.dynamicRender(false);
-    }, 200);
-  }
+  private renderAfterScroll = debounce(() => {
+    this.spreadsheet.needUseCacheMeta = true;
+    this.dynamicRender(false);
+  }, 200);
 
   private getRealScrollX(scrollX: number, hRowScroll = 0) {
     return this.cfg.spreadsheet.isScrollContainsRowHeader()

packages/s2-core/src/ui/scrollbar/index.ts

@@ -1,4 +1,5 @@
-import { Event, IGroup, Group, IShape } from '@antv/g-canvas';
+import { Event, Group } from '@antv/g-canvas';
+import type { IShape, IElement, IGroup } from '@antv/g-canvas';
 import { merge, clamp, get, each } from 'lodash';
 import { PointObject, ScrollBarCfg, ScrollBarTheme } from './interface';
 import { DEFAULT_THEME } from './style';
@@ -92,11 +93,9 @@ export class ScrollBar extends Group {
     const newOffset = newTrackLen * offsetRate;
     this.trackLen = newTrackLen;
 
-    if (this.isHorizontal) {
-      this.trackShape.attr('x2', newTrackLen);
-    } else {
-      this.trackShape.attr('y2', newTrackLen);
-    }
+    const coordinate = this.isHorizontal ? 'x2' : 'y2';
+    this.trackShape.attr(coordinate, newTrackLen);
+
     this.updateThumbLen(newThumbLen);
     this.updateThumbOffset(newOffset);
     this.renderNewScrollBar();
@@ -112,11 +111,8 @@ export class ScrollBar extends Group {
       return;
     }
     this.thumbLen = newThumbLen;
-    if (this.isHorizontal) {
-      this.thumbShape.attr('x2', this.thumbOffset + newThumbLen);
-    } else {
-      this.thumbShape.attr('y2', this.thumbOffset + newThumbLen);
-    }
+    const coordinate = this.isHorizontal ? 'x2' : 'y2';
+    this.thumbShape.attr(coordinate, this.thumbOffset + newThumbLen);
     this.renderNewScrollBar();
   }
 
@@ -168,9 +164,7 @@ export class ScrollBar extends Group {
       });
     }
     // 渲染
-    if (this.get('canvas')) {
-      this.get('canvas').draw();
-    }
+    this.get('canvas')?.draw();
   }
 
   /**
@@ -314,7 +308,11 @@ export class ScrollBar extends Group {
     this.bindLaterEvent();
   };
 
-  protected addEvent(target, eventType, handler) {
+  protected addEvent(
+    target: IElement,
+    eventType: keyof HTMLElementEventMap,
+    handler: (e: MouseEvent) => void,
+  ) {
     target.on(eventType, handler);
     this.eventHandlers.push({ target, type: eventType, handler });
   }
@@ -354,7 +352,7 @@ export class ScrollBar extends Group {
   }
 
   // 点击滑道的事件回调,移动滑块位置
-  private onTrackClick = (e) => {
+  private onTrackClick = (e: MouseEvent) => {
     const containerDOM = this.get('canvas').get('container');
     const rect = containerDOM.getBoundingClientRect();
     const { clientX, clientY } = e;
@@ -368,7 +366,7 @@ export class ScrollBar extends Group {
 
   // 拖拽滑块的事件回调
   // 这里是 dom 原生事件，绑定在 dom 元素上的
-  private onMouseMove = (e) => {
+  private onMouseMove = (e: MouseEvent) => {
     e.preventDefault();
 
     const event = this.isMobile ? get(e, 'touches.0', e) : e;
@@ -387,21 +385,21 @@ export class ScrollBar extends Group {
   };
 
   // 滑块鼠标松开事件回调
-  private onMouseUp = (e) => {
+  private onMouseUp = (e: MouseEvent) => {
     this.emit('scroll-finish', {});
     // 松开鼠标时，清除所有事件
     e.preventDefault();
     this.clearEvents();
   };
 
-  private onTrackMouseOver = (e) => {
+  private onTrackMouseOver = (e: MouseEvent) => {
     const { thumbColor } = this.theme.hover;
     this.thumbShape.attr('stroke', thumbColor);
     this.get('canvas').draw();
     console.debug(e);
   };
 
-  private onTrackMouseOut = (e) => {
+  private onTrackMouseOut = (e: MouseEvent) => {
     const { thumbColor } = this.theme.default;
     this.thumbShape.attr('stroke', thumbColor);
     this.get('canvas').draw();