improve zoom gesture

* simplify implementation by using scale factor
* scroll during zooming to keep zoom focus at the same place instead of top-left corner

Author: octocorvus

app/src/main/java/app/grapheneos/pdfviewer/GestureHelper.java

@@ -14,9 +14,7 @@
 class GestureHelper {
     public interface GestureListener {
         boolean onTapUp();
-        // Can be replaced with ratio when supported
-        void onZoomIn(float value);
-        void onZoomOut(float value);
+        void onZoom(float scaleFactor, float focusX, float focusY);
         void onZoomEnd();
     }
 
@@ -33,29 +31,10 @@ public boolean onSingleTapUp(MotionEvent motionEvent) {
 
         final ScaleGestureDetector scaleDetector = new ScaleGestureDetector(context,
                 new ScaleGestureDetector.SimpleOnScaleGestureListener() {
-                    final float SPAN_RATIO = 600;
-                    float initialSpan;
-                    float prevNbStep;
-
-                    @Override
-                    public boolean onScaleBegin(ScaleGestureDetector detector) {
-                        initialSpan = detector.getCurrentSpan();
-                        prevNbStep = 0;
-                        return true;
-                    }
-
                     @Override
                     public boolean onScale(ScaleGestureDetector detector) {
-                        float spanDiff = initialSpan - detector.getCurrentSpan();
-                        float curNbStep = spanDiff / SPAN_RATIO;
-
-                        float stepDiff = curNbStep - prevNbStep;
-                        if (stepDiff > 0) {
-                            listener.onZoomOut(stepDiff);
-                        } else {
-                            listener.onZoomIn(Math.abs(stepDiff));
-                        }
-                        prevNbStep = curNbStep;
+                        listener.onZoom(detector.getScaleFactor(), detector.getFocusX(),
+                                detector.getFocusY());
 
                         return true;
                     }

app/src/main/java/app/grapheneos/pdfviewer/PdfViewer.java

@@ -120,6 +120,8 @@ public class PdfViewer extends AppCompatActivity implements LoaderManager.Loader
     public int mPage;
     public int mNumPages;
     private float mZoomRatio = 1f;
+    private float mZoomFocusX = 0f;
+    private float mZoomFocusY = 0f;
     private int mDocumentOrientationDegrees;
     private int mDocumentState;
     private String mEncryptedDocumentPassword;
@@ -177,6 +179,16 @@ public void setZoomRatio(final float ratio) {
             mZoomRatio = Math.max(Math.min(ratio, MAX_ZOOM_RATIO), MIN_ZOOM_RATIO);
         }
 
+        @JavascriptInterface
+        public float getZoomFocusX() {
+            return mZoomFocusX;
+        }
+
+        @JavascriptInterface
+        public float getZoomFocusY() {
+            return mZoomFocusY;
+        }
+
         @JavascriptInterface
         public float getMinZoomRatio() {
             return MIN_ZOOM_RATIO;
@@ -363,13 +375,8 @@ public boolean onTapUp() {
                     }
 
                     @Override
-                    public void onZoomIn(float value) {
-                        zoomIn(value, false);
-                    }
-
-                    @Override
-                    public void onZoomOut(float value) {
-                        zoomOut(value, false);
+                    public void onZoom(float scaleFactor, float focusX, float focusY) {
+                        zoom(scaleFactor, focusX, focusY, false);
                     }
 
                     @Override
@@ -559,20 +566,12 @@ private void shareDocument() {
         }
     }
 
-    private void zoomIn(float value, boolean end) {
-        if (mZoomRatio < MAX_ZOOM_RATIO) {
-            mZoomRatio = Math.min(mZoomRatio + value, MAX_ZOOM_RATIO);
-            renderPage(end ? 1 : 2);
-            invalidateOptionsMenu();
-        }
-    }
-
-    private void zoomOut(float value, boolean end) {
-        if (mZoomRatio > MIN_ZOOM_RATIO) {
-            mZoomRatio = Math.max(mZoomRatio - value, MIN_ZOOM_RATIO);
-            renderPage(end ? 1 : 2);
-            invalidateOptionsMenu();
-        }
+    private void zoom(float scaleFactor, float focusX, float focusY, boolean end) {
+        mZoomRatio = Math.min(Math.max(mZoomRatio * scaleFactor, MIN_ZOOM_RATIO), MAX_ZOOM_RATIO);
+        mZoomFocusX = focusX;
+        mZoomFocusY = focusY;
+        renderPage(end ? 1 : 2);
+        invalidateOptionsMenu();
     }
 
     private void zoomEnd() {

viewer/js/index.js

@@ -131,6 +131,9 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
 
         const viewport = page.getViewport({scale: newZoomRatio, rotation: orientationDegrees});
 
+        const scaleFactor = newZoomRatio / zoomRatio;
+        const ratio = globalThis.devicePixelRatio;
+
         if (useRender) {
             if (newZoomRatio !== zoomRatio) {
                 canvas.style.height = viewport.height + "px";
@@ -142,11 +145,20 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
         if (zoom === 2) {
             textLayerDiv.hidden = true;
             pageRendering = false;
+
+            // zoom focus relative to page origin, rather than screen origin
+            const globalFocusX = channel.getZoomFocusX() / ratio + globalThis.scrollX;
+            const globalFocusY = channel.getZoomFocusY() / ratio + globalThis.scrollY;
+
+            const translationFactor = scaleFactor - 1;
+            const scrollX = globalFocusX * translationFactor;
+            const scrollY = globalFocusY * translationFactor;
+            scrollBy(scrollX, scrollY);
+
             return;
         }
 
         const newCanvas = document.createElement("canvas");
-        const ratio = globalThis.devicePixelRatio;
         newCanvas.height = viewport.height * ratio;
         newCanvas.width = viewport.width * ratio;
         newCanvas.style.height = viewport.height + "px";