react-prismazoom - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

CHANGELOG.md

 # Changelog
 
+## [3.0.1] - 2022-04-17
+- Fix zooming on mobile when pan is disabled
+
 ## [3.0.0] - 2022-01-24
@@ -4,0 +7,0 @@ - Replace locked prop with allowZoom and allowPan to handle zooming and panning events separately (thanks joshuacerdenia)

dist/index.js

@@ -317,8 +317,16 @@ "use strict";
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTouchStart", function (event) {
-      if (!_this.props.allowTouchEvents) {
+      var _this$props2 = _this.props,
+          allowTouchEvents = _this$props2.allowTouchEvents,
+          allowZoom = _this$props2.allowZoom,
+          allowPan = _this$props2.allowPan,
+          minZoom = _this$props2.minZoom;
+
+      var isDoubleTapping = _this.isDoubleTapping();
+
+      var isMultiTouch = event.touches.length > 1;
+
+      if (!allowTouchEvents) {
         event.preventDefault();
       }
 
-      if (!_this.props.allowPan) return;
-
       if (_this.lastRequestAnimationId) {
@@ -332,23 +340,27 @@ cancelAnimationFrame(_this.lastRequestAnimationId);
 
-      if (event.touches.length === 1) {
-        // Check if it is a double tap
-        var touchTime = new Date().getTime();
+      if (isMultiTouch) {
+        _this.lastTouch = {
+          posX: posX,
+          posY: posY
+        };
+        return;
+      }
 
-        if (touchTime - _this.lastTouchTime < _this.props.doubleTouchMaxDelay && touchTime - _this.lastDoubleTapTime > _this.props.doubleTouchMaxDelay) {
-          if (_this.state.zoom === _this.props.minZoom) {
-            _this.fullZoomInOnPosition(posX, posY);
-          } else {
-            _this.reset();
-          }
-
-          _this.lastDoubleTapTime = touchTime;
+      if (isDoubleTapping && allowZoom) {
+        if (_this.state.zoom === minZoom) {
+          _this.fullZoomInOnPosition(posX, posY);
+        } else {
+          _this.reset();
         }
 
-        _this.lastTouchTime = touchTime;
+        return;
+      } // Don't save the last touch if we are starting a simple touch move while panning is disabled
+
+
+      if (allowPan) {
+        _this.lastTouch = {
+          posX: posX,
+          posY: posY
+        };
       }
-
-      _this.lastTouch = {
-        posX: posX,
-        posY: posY
-      };
     });
@@ -360,6 +372,6 @@ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTouchMove", function (event) {
 
-      if (!_this.props.allowPan || !_this.lastTouch) return;
-      var _this$props2 = _this.props,
-          maxZoom = _this$props2.maxZoom,
-          minZoom = _this$props2.minZoom;
+      if (!_this.lastTouch) return;
+      var _this$props3 = _this.props,
+          maxZoom = _this$props3.maxZoom,
+          minZoom = _this$props3.minZoom;
       var zoom = _this.state.zoom;
@@ -398,8 +410,10 @@
         if (_this.lastTouchDistance && distance && distance !== _this.lastTouchDistance) {
-          zoom += (distance - _this.lastTouchDistance) / 100;
+          if (_this.props.allowZoom) {
+            zoom += (distance - _this.lastTouchDistance) / 100;
 
-          if (zoom > maxZoom) {
-            zoom = maxZoom;
-          } else if (zoom < minZoom) {
-            zoom = minZoom;
+            if (zoom > maxZoom) {
+              zoom = maxZoom;
+            } else if (zoom < minZoom) {
+              zoom = minZoom;
+            }
           } // Change position using the center point between the two fingers
@@ -524,2 +538,14 @@
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDoubleTapping", function () {
+      var touchTime = new Date().getTime();
+      var isDoubleTap = touchTime - _this.lastTouchTime < _this.props.doubleTouchMaxDelay && touchTime - _this.lastDoubleTapTime > _this.props.doubleTouchMaxDelay;
+
+      if (isDoubleTap) {
+        _this.lastDoubleTapTime = touchTime;
+        return true;
+      }
+
+      _this.lastTouchTime = touchTime;
+      return false;
+    });
     _this.ref = /*#__PURE__*/(0, _react.createRef)(); // Last cursor position
@@ -625,6 +651,6 @@
     value: function render() {
-      var _this$props3 = this.props,
-          className = _this$props3.className,
-          style = _this$props3.style,
-          children = _this$props3.children;
+      var _this$props4 = this.props,
+          className = _this$props4.className,
+          style = _this$props4.style,
+          children = _this$props4.children;
       var _this$state6 = this.state,
@@ -631,0 +657,0 @@ zoom = _this$state6.zoom,

package.json

 {
   "name": "react-prismazoom",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A pan and zoom component for React, using CSS transformations.",
@@ -5,0 +5,0 @@ "author": "Sylvain DUBUS <[e-mail]>",

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

38178

increased by2.15%

Lines of code

615

increased by3.71%

No dependency changes