From 97ba27b697bd0128ca8bf8e0312ee646352ce178 Mon Sep 17 00:00:00 2001
From: xuying <33517362+tangying1027@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:38:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0onRangeChange?=
 =?UTF-8?q?=E5=9B=9E=E8=B0=83=E5=87=BD=E6=95=B0=20(#2005)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
---
 packages/f2/src/components/zoom/index.tsx | 53 +++++++----------------
 1 file changed, 15 insertions(+), 38 deletions(-)

diff --git a/packages/f2/src/components/zoom/index.tsx b/packages/f2/src/components/zoom/index.tsx
index cff386a50..92e8c7b89 100644
--- a/packages/f2/src/components/zoom/index.tsx
+++ b/packages/f2/src/components/zoom/index.tsx
@@ -69,6 +69,7 @@ export interface ZoomProps {
   onPanEnd?: Function;
   onPinchEnd?: Function;
   onInit?: Function;
+  onChange?: Function;
   /**
    * 自动同步 x/y 的坐标值
    */
@@ -239,17 +240,13 @@ export default (View) => {
 
     onPanStart = () => {
       const { scale } = this;
-      const {
-        onPanStart,
-      } = this.props;
+      const { onPanStart } = this.props;
       this.onStart();
       onPanStart?.({ scale });
-    }
+    };
 
     onPan = (ev) => {
-      const {
-        onPan,
-      } = this.props;
+      const { onPan } = this.props;
       const { dims } = this;
 
       const range = {};
@@ -268,28 +265,21 @@ export default (View) => {
       onPan?.(ev);
     };
 
-
     onPanEnd = () => {
       const { scale } = this;
-      const {
-        onPanEnd,
-      } = this.props;
+      const { onPanEnd } = this.props;
       this.onEnd();
       onPanEnd?.({ scale });
-    }
+    };
 
     onPinchStart = () => {
-      const {
-        onPinchStart,
-      } = this.props;
+      const { onPinchStart } = this.props;
       this.onStart();
       onPinchStart?.();
-    }
+    };
 
     onPinch = (ev) => {
-      const {
-        onPinch,
-      } = this.props;
+      const { onPinch } = this.props;
       const { dims } = this;
       const range = {};
       each(dims, (dim) => {
@@ -308,20 +298,13 @@ export default (View) => {
 
     onPinchEnd = () => {
       const { scale } = this;
-      const {
-        onPinchEnd,
-      } = this.props;
+      const { onPinchEnd } = this.props;
       this.onEnd();
       onPinchEnd?.({ scale });
-    }
+    };
 
     _bindEvents() {
-      const {
-        chart,
-        pan,
-        pinch,
-        swipe,
-      } = this.props;
+      const { chart, pan, pinch, swipe } = this.props;
 
       // 统一绑定事件
       if (pan !== false) {
@@ -342,12 +325,7 @@ export default (View) => {
     }
 
     _unBindEvents() {
-      const {
-        chart,
-        pan,
-        pinch,
-        swipe,
-      } = this.props;
+      const { chart, pan, pinch, swipe } = this.props;
 
       // 统一绑定事件
       if (pan !== false) {
@@ -374,7 +352,6 @@ export default (View) => {
       this._cancelAnimationFrame();
     };
 
-  
     update() {
       const { startX, startY, endX, endY } = this.swipeEnd;
       const x = lerp(startX, endX, 0.05);
@@ -483,7 +460,6 @@ export default (View) => {
       this.update();
     };
 
-   
     onEnd = () => {
       this.startRange = null;
     };
@@ -645,7 +621,8 @@ export default (View) => {
     renderRange(range) {
       const { state, props } = this;
       if (isEqualRange(range, state.range)) return;
-      const { chart } = props;
+      const { chart, onChange } = props;
+      onChange && onChange({ range });
       // 手势变化不执行动画
       const { animate } = chart;
       chart.setAnimate(false);