fix: 蜡烛图切换销毁scrollbar时移除对应事件 (#1920)

* fix: 蜡烛图切换销毁scrollbar时移除对应事件

* feat: 重新实现

---------

Co-authored-by: 兵人 <xuezhiqiang.xzq@antgroup.com>

packages/f2/src/components/zoom/index.tsx

@@ -220,6 +220,7 @@ export default (View) => {
 
     didUnmount(): void {
       this._cancelAnimationFrame();
+      this._unBindEvents();
     }
 
     _requestAnimationFrame(calllback: Function) {
@@ -236,82 +237,144 @@ export default (View) => {
       }
     }
 
-    _bindEvents() {
+    onPanStart = () => {
       const { scale } = this;
       const {
-        chart,
-        onPinchStart,
         onPanStart,
+      } = this.props;
+      this.onStart();
+      onPanStart?.({ scale });
+    }
+
+    onPan = (ev) => {
+      const {
+        onPan,
+      } = this.props;
+      const { dims } = this;
+
+      const range = {};
+      each(dims, (dim) => {
+        if (dim === 'x') {
+          range['x'] = this._doXPan(ev);
+          return;
+        }
+        if (dim === 'y') {
+          range['y'] = this._doYPan(ev);
+          return;
+        }
+      });
+
+      this.renderRange(range);
+      onPan?.(ev);
+    };
+
+
+    onPanEnd = () => {
+      const { scale } = this;
+      const {
         onPanEnd,
+      } = this.props;
+      this.onEnd();
+      onPanEnd?.({ scale });
+    }
+
+    onPinchStart = () => {
+      const {
+        onPinchStart,
+      } = this.props;
+      this.onStart();
+      onPinchStart?.();
+    }
+
+    onPinch = (ev) => {
+      const {
+        onPinch,
+      } = this.props;
+      const { dims } = this;
+      const range = {};
+      each(dims, (dim) => {
+        if (dim === 'x') {
+          range['x'] = this._doXPinch(ev);
+          return;
+        }
+        if (dim === 'y') {
+          range['y'] = this._doYPinch(ev);
+          return;
+        }
+      });
+      this.renderRange(range);
+      onPinch?.(ev);
+    };
+
+    onPinchEnd = () => {
+      const { scale } = this;
+      const {
+        onPinchEnd,
+      } = this.props;
+      this.onEnd();
+      onPinchEnd?.({ scale });
+    }
+
+    _bindEvents() {
+      const {
+        chart,
         pan,
         pinch,
         swipe,
-        onPan,
-        onPinch,
-        onPinchEnd,
       } = this.props;
 
       // 统一绑定事件
       if (pan !== false) {
-        chart.on('panstart', () => {
-          this.onStart();
-          onPanStart({ scale });
-        });
-        chart.on('pan', (ev) => {
-          this.onPan(ev);
-          onPan(ev);
-        });
-        chart.on('panend', () => {
-          this.onEnd();
-          onPanEnd({ scale });
-        });
+        chart.on('panstart', this.onPanStart);
+        chart.on('pan', this.onPan);
+        chart.on('panend', this.onPanEnd);
       }
 
       if (pinch !== false) {
-        chart.on('pinchstart', () => {
-          this.onStart();
-          onPinchStart();
-        });
-        chart.on('pinch', (ev) => {
-          this.onPinch(ev);
-          onPinch(ev);
-        });
-        chart.on('pinchend', () => {
-          this.onEnd();
-          onPinchEnd({ scale });
-        });
+        chart.on('pinch', this.onPinch);
+        chart.on('pinchstart', this.onPinchStart);
+        chart.on('pinchend', this.onPinchEnd);
       }
 
       if (swipe !== false) {
         chart.on('swipe', this.onSwipe);
       }
     }
 
+    _unBindEvents() {
+      const {
+        chart,
+        pan,
+        pinch,
+        swipe,
+      } = this.props;
+
+      // 统一绑定事件
+      if (pan !== false) {
+        chart.off('panstart', this.onPanStart);
+        chart.off('pan', this.onPan);
+        chart.off('panend', this.onPanEnd);
+      }
+
+      if (pinch !== false) {
+        chart.off('pinch', this.onPinch);
+        chart.off('pinchstart', this.onPinchStart);
+        chart.off('pinchend', this.onPinchEnd);
+      }
+
+      if (swipe !== false) {
+        chart.off('swipe', this.onSwipe);
+      }
+    }
+
     onStart = () => {
       const { state } = this;
       const { range } = state;
       this.startRange = range;
       this._cancelAnimationFrame();
     };
 
-    onPan = (ev) => {
-      const { dims } = this;
-
-      const range = {};
-      each(dims, (dim) => {
-        if (dim === 'x') {
-          range['x'] = this._doXPan(ev);
-          return;
-        }
-        if (dim === 'y') {
-          range['y'] = this._doYPan(ev);
-          return;
-        }
-      });
-
-      this.renderRange(range);
-    };
-
+
     update() {
       const { startX, startY, endX, endY } = this.swipeEnd;
       const x = lerp(startX, endX, 0.05);
@@ -420,22 +483,7 @@ export default (View) => {
       this.update();
     };
 
-    onPinch = (ev) => {
-      const { dims } = this;
-      const range = {};
-      each(dims, (dim) => {
-        if (dim === 'x') {
-          range['x'] = this._doXPinch(ev);
-          return;
-        }
-        if (dim === 'y') {
-          range['y'] = this._doYPinch(ev);
-          return;
-        }
-      });
-      this.renderRange(range);
-    };
-
+
     onEnd = () => {
       this.startRange = null;
     };