Merge pull request #1064 from VisActor/fix/debounce-error

fix(debounce): dataZoom and scrollbar and brush debounce leads to rem…
VisActor · Mar 12, 2024 · f63a666 · f63a666
2 parents 852f1d1 + c0bfdec
commit f63a666
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 21 deletions.
diff --git a/common/changes/@visactor/vrender-components/fix-debounce-error_2024-03-12-11-42.json b/common/changes/@visactor/vrender-components/fix-debounce-error_2024-03-12-11-42.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix(debounce): dataZoom and scrollbar and brush debounce leads to remove event fail",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}
diff --git a/packages/vrender-components/__tests__/browser/examples/brush.ts b/packages/vrender-components/__tests__/browser/examples/brush.ts
@@ -16,7 +16,7 @@ export function run() {
     yRange0: 0,
     yRange1: 500,
     delayType: 'throttle',
-    delayTime: 10,
+    delayTime: 100,
     interactiveRangeY1: 0,
     interactiveRangeY2: 5000,
     interactiveRangeX1: 0,
@@ -57,11 +57,8 @@ export function run() {
       fillOpacity: 0.2,
       stroke: '#B0C8F9',
       strokeWidth: 2
-    }
-  });
-
-  brush.setUpdateDragMaskCallback(a => {
-    console.log(a);
+    },
+    delayTime: 100
   });
 
   const brush2 = new Brush({

diff --git a/packages/vrender-components/__tests__/browser/examples/data-zoom.ts b/packages/vrender-components/__tests__/browser/examples/data-zoom.ts
@@ -19,7 +19,7 @@ export function run() {
       height: 30
     },
     showDetail: false,
-    // delayTime: 100,
+    delayTime: 1000,
     // brushSelect: false,
     backgroundChartStyle: {
       line: {

diff --git a/packages/vrender-components/__tests__/browser/examples/scrollbar.ts b/packages/vrender-components/__tests__/browser/examples/scrollbar.ts
@@ -1,8 +1,7 @@
 import '@visactor/vrender';
 import render from '../../util/render';
-import { ScrollBar, loadScrollbar } from '../../../src';
+import { ScrollBar } from '../../../src';
 import { createGroup, createRect } from '@visactor/vrender';
-loadScrollbar();
 
 export function run() {
   console.log('SCROLLBAR');
@@ -18,7 +17,7 @@ export function run() {
       fill: 'rgba(0, 0, 0, .1)'
     },
     range: [0, 0.05],
-    delayTime: 10
+    delayTime: 0
     // scrollRange: [0.4, 0.8]
   });
 
@@ -30,7 +29,7 @@ export function run() {
     width: 12,
     height: 500,
     padding: [0, 2],
-    delayTime: 110,
+    delayTime: 0,
     railStyle: {
       fill: 'rgba(0, 0, 0, .1)'
       //

diff --git a/packages/vrender-components/src/brush/brush.ts b/packages/vrender-components/src/brush/brush.ts
@@ -50,8 +50,6 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
       return;
     }
     const {
-      delayType = 'throttle',
-      delayTime = 0,
       trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
       updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
       endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
@@ -60,7 +58,7 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
     // 拖拽绘制开始
     this.stage.addEventListener(trigger, this._onBrushStart as EventListener);
     // 拖拽绘制时
-    this.stage.addEventListener(updateTrigger, delayMap[delayType](this._onBrushing, delayTime) as EventListener);
+    this.stage.addEventListener(updateTrigger, this._onBrushingWithDelay as EventListener);
     // 拖拽绘制结束
     this.stage.addEventListener(endTrigger, this._onBrushEnd as EventListener);
     this.stage.addEventListener(resetTrigger, this._onBrushEnd as EventListener);
@@ -127,6 +125,11 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
     this._activeMoveState && this._moving(e);
   };
 
+  private _onBrushingWithDelay =
+    this.attribute.delayTime === 0
+      ? this._onBrushing
+      : delayMap[this.attribute.delayType](this._onBrushing, this.attribute.delayTime);
+
   /**
    * 结束绘制 和 移动
    * @description 取消绘制 和 移动 状态
@@ -411,7 +414,7 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
       resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
     } = this.attribute as BrushAttributes;
     this.stage.removeEventListener(trigger, this._onBrushStart as EventListener);
-    this.stage.removeEventListener(updateTrigger, delayMap[delayType](this._onBrushing, delayTime) as EventListener);
+    this.stage.removeEventListener(updateTrigger, this._onBrushingWithDelay as EventListener);
     this.stage.removeEventListener(endTrigger, this._onBrushEnd as EventListener);
     this.stage.removeEventListener(resetTrigger, this._onBrushEnd as EventListener);
   }

diff --git a/packages/vrender-components/src/scrollbar/scrollbar.ts b/packages/vrender-components/src/scrollbar/scrollbar.ts
@@ -314,10 +314,10 @@ export class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>>
       event: e
     });
     if (vglobal.env === 'browser') {
-      vglobal.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+      vglobal.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
       vglobal.addEventListener('pointerup', this._onSliderPointerUp);
     } else {
-      this.stage.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+      this.stage.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
       this.stage.addEventListener('pointerup', this._onSliderPointerUp);
       this.stage.addEventListener('pointerupoutside', this._onSliderPointerUp);
     }
@@ -342,13 +342,18 @@ export class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>>
     return [currentPos, currentScrollValue];
   };
 
-  private _onSliderPointerMove = delayMap[this.attribute.delayType]((e: any) => {
+  private _onSliderPointerMove = (e: any) => {
     e.stopPropagation();
     const preScrollRange = this.getScrollRange();
     const [currentPos, currentScrollValue] = this._computeScrollValue(e);
     this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);
     this._prePos = currentPos;
-  }, this.attribute.delayTime);
+  };
+
+  private _onSliderPointerMoveWithDelay =
+    this.attribute.delayTime === 0
+      ? this._onSliderPointerMove
+      : delayMap[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);
 
   private _onSliderPointerUp = (e: any) => {
     e.preventDefault();
@@ -363,10 +368,10 @@ export class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>>
       value: clampRange(range, limitRange[0], limitRange[1])
     });
     if (vglobal.env === 'browser') {
-      vglobal.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+      vglobal.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
       vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
     } else {
-      this.stage.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+      this.stage.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
       this.stage.removeEventListener('pointerup', this._onSliderPointerUp);
       this.stage.removeEventListener('pointerupoutside', this._onSliderPointerUp);
     }