react-native-pdf-light - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

lib/commonjs/ZoomPdfView.js

@@ -54,19 +54,9 @@ "use strict";
 }
+/**
+ * Bind an animated value for sync reads.
+ */
 
-function useZoomGesture(pdfSize, viewSize, maxScale, hScrollRef, vScrollRef, onZoomIn, onZoomReset) {
-  // Limits.
-  const minScale = 1;
-  const overshoot = 0.1;
-  const hardMinScale = minScale * (1 - overshoot);
-  const hardMaxScale = maxScale * (1 + overshoot);
-  const [isZoomed, setIsZoomed] = (0, _react.useState)(false);
-  const gestureRef = (0, _react.useRef)(); // Resolution to render.
 
-  const containerScale = (0, _react.useRef)({
-    animated: new _reactNative.Animated.Value(1),
-    static: 1
-  }).current;
-  const pinchScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current; // Current scroll position.
-
-  const contentOffset = (0, _react.useRef)({
+function useSyncAnimatedXY() {
+  const varXY = (0, _react.useRef)({
     animated: new _reactNative.Animated.ValueXY({
@@ -85,5 +75,5 @@ x: 0,
       animated
-    } = contentOffset;
+    } = varXY;
     const handle = animated.addListener(value => {
-      contentOffset.static = value;
+      varXY.static = value;
     });
@@ -93,4 +83,23 @@ return () => {
     };
-  }, [contentOffset]); // Centering buffers.
+  }, [varXY]);
+  return varXY;
+}
 
+function useZoomGesture(pdfSize, viewSize, maxScale, hScrollRef, vScrollRef, onZoomIn, onZoomReset) {
+  // Limits.
+  const minScale = 1;
+  const overshoot = 0.1;
+  const hardMinScale = minScale * (1 - overshoot);
+  const hardMaxScale = maxScale * (1 + overshoot);
+  const [isZoomed, setIsZoomed] = (0, _react.useState)(false);
+  const gestureRef = (0, _react.useRef)(); // Resolution to render.
+
+  const containerScale = (0, _react.useRef)({
+    animated: new _reactNative.Animated.Value(1),
+    static: 1
+  }).current;
+  const pinchScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current; // Current scroll position.
+
+  const contentOffset = useSyncAnimatedXY(); // Centering buffers.
+
   const bufferSize = (0, _react.useRef)(new _reactNative.Animated.ValueXY({
@@ -111,3 +120,11 @@ x: 0,
     });
-  }, [bufferSize, containerScale, pdfSize, viewSize]); // Pixel interpolation scale. Input driver `pinchScale` is shaped to allow
+  }, [bufferSize, containerScale, pdfSize, viewSize]); // Origin point of pinch gesture.
+
+  const focalPoint = useSyncAnimatedXY();
+  (0, _react.useEffect)(() => {
+    focalPoint.animated.setValue({
+      x: viewSize.width / 2,
+      y: viewSize.height / 2
+    });
+  }, [focalPoint, viewSize]); // Pixel interpolation scale. Input driver `pinchScale` is shaped to allow
   // some bounce past min/max thresholds.
@@ -123,3 +140,6 @@ // TODO: Is it possible to use easing instead of clamp? Or maybe more
   const gestureHandler = (0, _react.useMemo)(() => {
-    return _reactNativeGestureHandler.Gesture.Pinch().withRef(gestureRef).onUpdate(e => pinchScale.setValue(e.scale)).onEnd(e => {
+    return _reactNativeGestureHandler.Gesture.Pinch().withRef(gestureRef).onStart(e => focalPoint.animated.setValue({
+      x: e.focalX,
+      y: e.focalY
+    })).onUpdate(e => pinchScale.setValue(e.scale)).onEnd(e => {
       // Spring back to scale bounds, if gesture overshot.
@@ -178,4 +198,4 @@ const targetScale = Math.max(minScale, Math.min(maxScale, e.scale * containerScale.static));
           // Adjust scroll views to apply scaling in correct location.
-          const targetX = targetScale / prevScale * (contentOffset.static.x - prevBufferX + viewSize.width / 2) - viewSize.width / 2;
-          const targetY = targetScale / prevScale * (contentOffset.static.y + viewSize.height / 2) - viewSize.height / 2;
+          const targetX = targetScale / prevScale * (contentOffset.static.x - prevBufferX + focalPoint.static.x) - focalPoint.static.x;
+          const targetY = targetScale / prevScale * (contentOffset.static.y + focalPoint.static.y) - focalPoint.static.y;
           await sleepToNextFrame();
@@ -193,3 +213,3 @@ (_hScrollRef$current2 = hScrollRef.current) === null || _hScrollRef$current2 === void 0 ? void 0 : _hScrollRef$current2.scrollTo({
     });
-  }, [bufferSize, containerScale, contentOffset, hScrollRef, gestureRef, maxScale, onZoomIn, onZoomReset, pdfSize, pinchScale, setIsZoomed, vScrollRef, viewSize]);
+  }, [bufferSize, containerScale, contentOffset, focalPoint, hScrollRef, gestureRef, maxScale, onZoomIn, onZoomReset, pdfSize, pinchScale, setIsZoomed, vScrollRef, viewSize]);
   const zoomStyle = (0, _react.useMemo)(() => {
@@ -203,11 +223,11 @@ const {
 
-    const centerRatioX = _reactNative.Animated.divide(pdfViewWidth, _reactNative.Animated.add(_reactNative.Animated.subtract(contentOffset.animated.x, bufferSize.x), viewSize.width / 2));
+    const centerRatioX = _reactNative.Animated.divide(_reactNative.Animated.add(_reactNative.Animated.subtract(contentOffset.animated.x, bufferSize.x), focalPoint.animated.x), pdfViewWidth);
 
-    const translateX = _reactNative.Animated.multiply(_reactNative.Animated.multiply(pdfViewWidth, _reactNative.Animated.subtract(scale, 1)), _reactNative.Animated.subtract(0.5, _reactNative.Animated.divide(1, centerRatioX)));
+    const translateX = _reactNative.Animated.multiply(_reactNative.Animated.multiply(pdfViewWidth, _reactNative.Animated.subtract(scale, 1)), _reactNative.Animated.subtract(0.5, centerRatioX));
 
     const pdfViewHeight = _reactNative.Animated.multiply(containerScale.animated, viewHeight);
 
-    const centerRatioY = _reactNative.Animated.divide(pdfViewHeight, _reactNative.Animated.add(contentOffset.animated.y, viewSize.height / 2));
+    const centerRatioY = _reactNative.Animated.divide(_reactNative.Animated.add(contentOffset.animated.y, focalPoint.animated.y), pdfViewHeight);
 
-    const translateY = _reactNative.Animated.multiply(_reactNative.Animated.multiply(pdfViewHeight, _reactNative.Animated.subtract(scale, 1)), _reactNative.Animated.subtract(0.5, _reactNative.Animated.divide(1, centerRatioY))); // Allow height to be manged by native pdf component.
+    const translateY = _reactNative.Animated.multiply(_reactNative.Animated.multiply(pdfViewHeight, _reactNative.Animated.subtract(scale, 1)), _reactNative.Animated.subtract(0.5, centerRatioY)); // Allow height to be manged by native pdf component.
 
@@ -225,3 +245,3 @@
     };
-  }, [bufferSize, contentOffset, containerScale, pdfSize, scale, viewSize]);
+  }, [bufferSize, contentOffset, containerScale, focalPoint, pdfSize, scale, viewSize]);
   return {
@@ -228,0 +248,0 @@ bufferSize,

lib/module/ZoomPdfView.js

@@ -39,19 +39,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 }
+/**
+ * Bind an animated value for sync reads.
+ */
 
-function useZoomGesture(pdfSize, viewSize, maxScale, hScrollRef, vScrollRef, onZoomIn, onZoomReset) {
-  // Limits.
-  const minScale = 1;
-  const overshoot = 0.1;
-  const hardMinScale = minScale * (1 - overshoot);
-  const hardMaxScale = maxScale * (1 + overshoot);
-  const [isZoomed, setIsZoomed] = useState(false);
-  const gestureRef = useRef(); // Resolution to render.
 
-  const containerScale = useRef({
-    animated: new Animated.Value(1),
-    static: 1
-  }).current;
-  const pinchScale = useRef(new Animated.Value(1)).current; // Current scroll position.
-
-  const contentOffset = useRef({
+function useSyncAnimatedXY() {
+  const varXY = useRef({
     animated: new Animated.ValueXY({
@@ -70,5 +60,5 @@ x: 0,
       animated
-    } = contentOffset;
+    } = varXY;
     const handle = animated.addListener(value => {
-      contentOffset.static = value;
+      varXY.static = value;
     });
@@ -78,4 +68,23 @@ return () => {
     };
-  }, [contentOffset]); // Centering buffers.
+  }, [varXY]);
+  return varXY;
+}
 
+function useZoomGesture(pdfSize, viewSize, maxScale, hScrollRef, vScrollRef, onZoomIn, onZoomReset) {
+  // Limits.
+  const minScale = 1;
+  const overshoot = 0.1;
+  const hardMinScale = minScale * (1 - overshoot);
+  const hardMaxScale = maxScale * (1 + overshoot);
+  const [isZoomed, setIsZoomed] = useState(false);
+  const gestureRef = useRef(); // Resolution to render.
+
+  const containerScale = useRef({
+    animated: new Animated.Value(1),
+    static: 1
+  }).current;
+  const pinchScale = useRef(new Animated.Value(1)).current; // Current scroll position.
+
+  const contentOffset = useSyncAnimatedXY(); // Centering buffers.
+
   const bufferSize = useRef(new Animated.ValueXY({
@@ -96,3 +105,11 @@ x: 0,
     });
-  }, [bufferSize, containerScale, pdfSize, viewSize]); // Pixel interpolation scale. Input driver `pinchScale` is shaped to allow
+  }, [bufferSize, containerScale, pdfSize, viewSize]); // Origin point of pinch gesture.
+
+  const focalPoint = useSyncAnimatedXY();
+  useEffect(() => {
+    focalPoint.animated.setValue({
+      x: viewSize.width / 2,
+      y: viewSize.height / 2
+    });
+  }, [focalPoint, viewSize]); // Pixel interpolation scale. Input driver `pinchScale` is shaped to allow
   // some bounce past min/max thresholds.
@@ -108,3 +125,6 @@ // TODO: Is it possible to use easing instead of clamp? Or maybe more
   const gestureHandler = useMemo(() => {
-    return Gesture.Pinch().withRef(gestureRef).onUpdate(e => pinchScale.setValue(e.scale)).onEnd(e => {
+    return Gesture.Pinch().withRef(gestureRef).onStart(e => focalPoint.animated.setValue({
+      x: e.focalX,
+      y: e.focalY
+    })).onUpdate(e => pinchScale.setValue(e.scale)).onEnd(e => {
       // Spring back to scale bounds, if gesture overshot.
@@ -162,4 +182,4 @@ const targetScale = Math.max(minScale, Math.min(maxScale, e.scale * containerScale.static));
           // Adjust scroll views to apply scaling in correct location.
-          const targetX = targetScale / prevScale * (contentOffset.static.x - prevBufferX + viewSize.width / 2) - viewSize.width / 2;
-          const targetY = targetScale / prevScale * (contentOffset.static.y + viewSize.height / 2) - viewSize.height / 2;
+          const targetX = targetScale / prevScale * (contentOffset.static.x - prevBufferX + focalPoint.static.x) - focalPoint.static.x;
+          const targetY = targetScale / prevScale * (contentOffset.static.y + focalPoint.static.y) - focalPoint.static.y;
           await sleepToNextFrame();
@@ -177,3 +197,3 @@ (_hScrollRef$current2 = hScrollRef.current) === null || _hScrollRef$current2 === void 0 ? void 0 : _hScrollRef$current2.scrollTo({
     });
-  }, [bufferSize, containerScale, contentOffset, hScrollRef, gestureRef, maxScale, onZoomIn, onZoomReset, pdfSize, pinchScale, setIsZoomed, vScrollRef, viewSize]);
+  }, [bufferSize, containerScale, contentOffset, focalPoint, hScrollRef, gestureRef, maxScale, onZoomIn, onZoomReset, pdfSize, pinchScale, setIsZoomed, vScrollRef, viewSize]);
   const zoomStyle = useMemo(() => {
@@ -185,7 +205,7 @@ const {
     const pdfViewWidth = Animated.multiply(containerScale.animated, viewWidth);
-    const centerRatioX = Animated.divide(pdfViewWidth, Animated.add(Animated.subtract(contentOffset.animated.x, bufferSize.x), viewSize.width / 2));
-    const translateX = Animated.multiply(Animated.multiply(pdfViewWidth, Animated.subtract(scale, 1)), Animated.subtract(0.5, Animated.divide(1, centerRatioX)));
+    const centerRatioX = Animated.divide(Animated.add(Animated.subtract(contentOffset.animated.x, bufferSize.x), focalPoint.animated.x), pdfViewWidth);
+    const translateX = Animated.multiply(Animated.multiply(pdfViewWidth, Animated.subtract(scale, 1)), Animated.subtract(0.5, centerRatioX));
     const pdfViewHeight = Animated.multiply(containerScale.animated, viewHeight);
-    const centerRatioY = Animated.divide(pdfViewHeight, Animated.add(contentOffset.animated.y, viewSize.height / 2));
-    const translateY = Animated.multiply(Animated.multiply(pdfViewHeight, Animated.subtract(scale, 1)), Animated.subtract(0.5, Animated.divide(1, centerRatioY))); // Allow height to be manged by native pdf component.
+    const centerRatioY = Animated.divide(Animated.add(contentOffset.animated.y, focalPoint.animated.y), pdfViewHeight);
+    const translateY = Animated.multiply(Animated.multiply(pdfViewHeight, Animated.subtract(scale, 1)), Animated.subtract(0.5, centerRatioY)); // Allow height to be manged by native pdf component.
 
@@ -202,3 +222,3 @@ return {
     };
-  }, [bufferSize, contentOffset, containerScale, pdfSize, scale, viewSize]);
+  }, [bufferSize, contentOffset, containerScale, focalPoint, pdfSize, scale, viewSize]);
   return {
@@ -205,0 +225,0 @@ bufferSize,

package.json

 {
   "name": "react-native-pdf-light",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Minimalist PDF viewer for React Native",
@@ -5,0 +5,0 @@ "main": "lib/commonjs/index",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

237897

increased by1.44%

Lines of code

2376

increased by2.59%

No dependency changes