Allow changing zoom level without interfering with pan offsets (#130)

* fix * doc * version * simpler --------- Co-authored-by: thomasvo <[email protected]>
openspacelabs · Jan 10, 2025 · b175c42 · b175c42
1 parent be3572b
commit b175c42
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 73 deletions.
diff --git a/lib/commonjs/ReactNativeZoomableView.js b/lib/commonjs/ReactNativeZoomableView.js
diff --git a/lib/commonjs/ReactNativeZoomableView.js.map b/lib/commonjs/ReactNativeZoomableView.js.map
diff --git a/lib/module/ReactNativeZoomableView.js b/lib/module/ReactNativeZoomableView.js
diff --git a/lib/module/ReactNativeZoomableView.js.map b/lib/module/ReactNativeZoomableView.js.map
diff --git a/lib/typescript/ReactNativeZoomableView.d.ts b/lib/typescript/ReactNativeZoomableView.d.ts
@@ -203,12 +203,9 @@ declare class ReactNativeZoomableView extends Component<ReactNativeZoomableViewP
      * { x: 0, y: 0 } is the very center of the zoom subject.
      *
      * @param newZoomLevel
-     * @param zoomCenter relative coords compared to the zoom subject. Default to the center.
+     * @param zoomCenter - If not supplied, the container's center is the zoom center
      */
-    zoomTo(newZoomLevel: number, zoomCenter?: {
-        x: number;
-        y: number;
-    }): boolean;
+    zoomTo(newZoomLevel: number, zoomCenter?: Vec2D): boolean;
     /**
      * Zooms in or out by a specified change level
      * Use a positive number for `zoomLevelChange` to zoom in

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openspacelabs/react-native-zoomable-view",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/ReactNativeZoomableView.tsx b/src/ReactNativeZoomableView.tsx
@@ -1093,41 +1093,46 @@ class ReactNativeZoomableView extends Component<
    * { x: 0, y: 0 } is the very center of the zoom subject.
    *
    * @param newZoomLevel
-   * @param zoomCenter relative coords compared to the zoom subject. Default to the center.
+   * @param zoomCenter - If not supplied, the container's center is the zoom center
    */
-  zoomTo(newZoomLevel: number, zoomCenter = { x: 0, y: 0 }) {
+  zoomTo(newZoomLevel: number, zoomCenter?: Vec2D) {
     if (!this.props.zoomEnabled) return false;
     if (this.props.maxZoom && newZoomLevel > this.props.maxZoom) return false;
     if (this.props.minZoom && newZoomLevel < this.props.minZoom) return false;
 
     this.props.onZoomBefore?.(null, null, this._getZoomableViewEventObject());
 
-    // == Perform Zoom Animation ==
-    // Calculates panAnim values based on changes in zoomAnim.
-    let prevScale = this.zoomLevel;
-    // Since zoomAnim is calculated in native driver,
-    //  it will jitter panAnim once in a while,
-    //  because here panAnim is being calculated in js.
-    // However the jittering should mostly occur in simulator.
-    const listenerId = this.zoomAnim.addListener(({ value: newScale }) => {
-      this.panAnim.setValue({
-        x: calcNewScaledOffsetForZoomCentering(
-          this.offsetX,
-          this.state.originalWidth,
-          prevScale,
-          newScale,
-          zoomCenter.x
-        ),
-        y: calcNewScaledOffsetForZoomCentering(
-          this.offsetY,
-          this.state.originalHeight,
-          prevScale,
-          newScale,
-          zoomCenter.y
-        ),
+    // == Perform Pan Animation to preserve the zoom center while zooming ==
+    let listenerId = '';
+    if (zoomCenter) {
+      // Calculates panAnim values based on changes in zoomAnim.
+      let prevScale = this.zoomLevel;
+      // Since zoomAnim is calculated in native driver,
+      //  it will jitter panAnim once in a while,
+      //  because here panAnim is being calculated in js.
+      // However the jittering should mostly occur in simulator.
+      listenerId = this.zoomAnim.addListener(({ value: newScale }) => {
+        this.panAnim.setValue({
+          x: calcNewScaledOffsetForZoomCentering(
+            this.offsetX,
+            this.state.originalWidth,
+            prevScale,
+            newScale,
+            zoomCenter.x
+          ),
+          y: calcNewScaledOffsetForZoomCentering(
+            this.offsetY,
+            this.state.originalHeight,
+            prevScale,
+            newScale,
+            zoomCenter.y
+          ),
+        });
+        prevScale = newScale;
       });
-      prevScale = newScale;
-    });
+    }
+
+    // == Perform Zoom Animation ==
     getZoomToAnimation(this.zoomAnim, newZoomLevel).start(() => {
       this.zoomAnim.removeListener(listenerId);
     });