From 33edf3d6b5d30bcd6cd5a0f845ed4e741d9d2a94 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Tue, 16 Mar 2021 18:03:47 +0800 Subject: [PATCH] fix: parse int scroll offset for resolve text shake close #20 --- packages/s2-core/package.json | 2 +- packages/s2-core/src/facet/index.ts | 53 +++++++++------------- packages/s2-core/src/ui/scrollbar/index.ts | 38 ++++++++-------- 3 files changed, 40 insertions(+), 53 deletions(-) diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json index e322c5fc58..5cf4efd4e3 100644 --- a/packages/s2-core/package.json +++ b/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": { diff --git a/packages/s2-core/src/facet/index.ts b/packages/s2-core/src/facet/index.ts index d5a79710f6..1819c581cc 100644 --- a/packages/s2-core/src/facet/index.ts +++ b/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() diff --git a/packages/s2-core/src/ui/scrollbar/index.ts b/packages/s2-core/src/ui/scrollbar/index.ts index bb8e1b6eba..7512c7fb5e 100644 --- a/packages/s2-core/src/ui/scrollbar/index.ts +++ b/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();