react-zoom-pan-pinch - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

dist/index.es.js

@@ -83,2 +83,4 @@ import React, { Component } from 'react';
         disabled: false,
+        panPaddingShiftTime: 50,
+        panAnimationType: "easeOut",
         lockAxisX: false,
@@ -90,17 +92,17 @@ lockAxisY: false,
         velocityActiveScale: 1,
-        velocityMinSpeed: 1.8,
+        velocityMinSpeed: 0.2,
         velocityBaseTime: 1800,
         limitToWrapperBounds: false,
         padding: true,
-        paddingSize: 6,
+        paddingSize: 60,
         animationTime: 200,
         animationType: "easeOut",
+        disableOnTarget: [],
     },
     pinch: {
         disabled: false,
-        step: 1,
     },
     zoomIn: {
         disabled: false,
-        step: 40,
+        step: 60,
         animation: true,
@@ -112,3 +114,3 @@ animationType: "easeOut",
         disabled: false,
-        step: 40,
+        step: 60,
         animation: true,
@@ -120,3 +122,3 @@ animationType: "easeOut",
         disabled: false,
-        step: 40,
+        step: 60,
         mode: "zoomIn",
@@ -129,3 +131,2 @@ animation: true,
         disabled: false,
-        step: 40,
         animation: true,
@@ -325,2 +326,3 @@ animationType: "easeOut",
     }
+    this.animate = false;
     this.animation = false;
@@ -361,11 +363,19 @@ this.velocity = null;
     var positionYDiff = targetState.positionY - positionY;
-    // animation start timestamp
-    animate.call(this, type, speed, function (step) {
-        _this.stateProvider.previousScale = _this.stateProvider.scale;
-        _this.stateProvider.scale = scale + scaleDiff * step;
-        _this.stateProvider.positionX = positionX + positionXDiff * step;
-        _this.stateProvider.positionY = positionY + positionYDiff * step;
-        // apply animation changes
-        _this.setContentComponentTransformation();
-    });
+    if (speed === 0) {
+        this.stateProvider.previousScale = this.stateProvider.scale;
+        this.stateProvider.scale = targetState.scale;
+        this.stateProvider.positionX = targetState.positionX;
+        this.stateProvider.positionY = targetState.positionY;
+    }
+    else {
+        // animation start timestamp
+        animate.call(this, type, speed, function (step) {
+            _this.stateProvider.previousScale = _this.stateProvider.scale;
+            _this.stateProvider.scale = scale + scaleDiff * step;
+            _this.stateProvider.positionX = positionX + positionXDiff * step;
+            _this.stateProvider.positionY = positionY + positionYDiff * step;
+            // apply animation changes
+            _this.setContentComponentTransformation();
+        });
+    }
 }
@@ -460,6 +470,3 @@
     // Save panned position
-    this.stateProvider.positionX = calculatedPosition.x;
-    this.stateProvider.positionY = calculatedPosition.y;
-    // update component transformation
-    this.setContentComponentTransformation();
+    handlePaddingAnimation.call(this, calculatedPosition.x, calculatedPosition.y);
 }
@@ -486,8 +493,4 @@ function handlePanningAnimation() {
     var yChanged = positionY > maxPositionY || positionY < minPositionY;
-    var mouseX = positionX > maxPositionX
-        ? wrapperComponent.offsetWidth
-        : this.stateProvider.minPositionX || 0;
-    var mouseY = positionY > maxPositionY
-        ? wrapperComponent.offsetHeight
-        : this.stateProvider.minPositionY || 0;
+    var mouseX = positionX > maxPositionX ? wrapperComponent.offsetWidth : this.stateProvider.minPositionX || 0;
+    var mouseY = positionY > maxPositionY ? wrapperComponent.offsetHeight : this.stateProvider.minPositionY || 0;
     var mousePosX = mouseX;
@@ -502,6 +505,35 @@ var mousePosY = mouseY;
 }
+function handlePaddingAnimation(positionX, positionY) {
+    var _a = this.stateProvider, scale = _a.scale, _b = _a.pan, paddingSize = _b.paddingSize, panPaddingShiftTime = _b.panPaddingShiftTime, panAnimationType = _b.panAnimationType;
+    var _c = this.bounds, maxPositionX = _c.maxPositionX, maxPositionY = _c.maxPositionY, minPositionX = _c.minPositionX, minPositionY = _c.minPositionY;
+    var time = 0;
+    var baseTime = panPaddingShiftTime;
+    if (positionX < minPositionX || positionX > maxPositionX) {
+        var multiplier = getAnimationTimeMultiplier(Math.abs(positionX - minPositionX), paddingSize);
+        var newTime = baseTime * multiplier;
+        if (newTime > time)
+            time = newTime;
+    }
+    if (positionY < minPositionY || positionY > maxPositionY) {
+        var multiplier = getAnimationTimeMultiplier(Math.abs(positionY - minPositionY), paddingSize);
+        var newTime = baseTime * multiplier;
+        if (newTime > time)
+            time = newTime;
+    }
+    //animate padding
+    animateComponent.call(this, {
+        targetState: { scale: scale, positionX: positionX, positionY: positionY },
+        speed: time,
+        type: panAnimationType,
+    });
+}
+function getAnimationTimeMultiplier(padding, maxPadding) {
+    return Math.min(padding / maxPadding, 1);
+}
 
-function handleCalculateZoom(delta, step, disablePadding) {
+function handleCalculateZoom(delta, step, disablePadding, getTarget) {
     var _a = this.stateProvider, scale = _a.scale, _b = _a.options, maxScale = _b.maxScale, minScale = _b.minScale, _c = _a.scalePadding, size = _c.size, disabled = _c.disabled;
     var targetScale = scale + step * delta * (scale / 100);
+    if (getTarget)
+        return targetScale;
     var paddingEnabled = disablePadding ? false : !disabled;
@@ -547,3 +579,3 @@ var newScale = checkZoomBounds(roundNumber(targetScale, 2), minScale, maxScale, size, paddingEnabled);
     var _d = wheelMousePosition(event, contentComponent, scale), mouseX = _d.mouseX, mouseY = _d.mouseY;
-    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || disableLimitsOnWheel);
+    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || !disableLimitsOnWheel);
     var _e = handleCalculatePositions.call(this, mouseX, mouseY, newScale, bounds, isLimitedToBounds), x = _e.x, y = _e.y;
@@ -576,6 +608,6 @@ this.bounds = bounds;
 }
-function handlePaddingAnimation() {
+function handlePaddingAnimation$1() {
     var _a = this.stateProvider, scale = _a.scale, wrapperComponent = _a.wrapperComponent, minScale = _a.options.minScale, _b = _a.scalePadding, disabled = _b.disabled, animationTime = _b.animationTime, animationType = _b.animationType;
-    var isDisabled = disabled || scale > minScale;
-    if (scale > minScale) {
+    var isDisabled = disabled || scale >= minScale;
+    if (scale >= minScale) {
         // fire fit to bounds animation
@@ -599,2 +631,3 @@ handlePanningAnimation.call(this);
 function handleDoubleClick(event) {
+    var _this = this;
     event.preventDefault();
@@ -610,7 +643,13 @@ event.stopPropagation();
     var targetState = handleZoomToPoint.call(this, disabled, newScale, mouseX, mouseY);
-    animateComponent.call(this, {
-        targetState: targetState,
-        speed: animationTime,
-        type: animationType,
-    });
+    if (targetState.scale === scale)
+        return;
+    var targetScale = handleCalculateZoom.call(this, delta, step, true);
+    var time = getButtonAnimationTime(targetScale, newScale, animationTime);
+    setTimeout(function () {
+        animateComponent.call(_this, {
+            targetState: targetState,
+            speed: time,
+            type: animationType,
+        });
+    }, this.stateProvider.pan.panPaddingShiftTime + 30);
 }
@@ -625,13 +664,13 @@ function handleZoomControls(customDelta, customStep) {
     var isZoomIn = newScale > scale;
-    var animationSpeed = isZoomIn
-        ? zoomIn.animationTime
-        : zoomOut.animationTime;
+    var animationSpeed = isZoomIn ? zoomIn.animationTime : zoomOut.animationTime;
     var animationType = isZoomIn ? zoomIn.animationType : zoomOut.animationType;
     var isDisabled = isZoomIn ? zoomIn.disabled : zoomOut.disabled;
     var targetState = handleZoomToPoint.call(this, isDisabled, newScale, mouseX, mouseY);
-    if (targetState === scale)
+    if (targetState.scale === scale)
         return;
+    var targetScale = handleCalculateZoom.call(this, customDelta, customStep, true);
+    var time = getButtonAnimationTime(targetScale, newScale, animationSpeed);
     animateComponent.call(this, {
         targetState: targetState,
-        speed: animationSpeed,
+        speed: time,
         type: animationType,
@@ -645,5 +684,3 @@ });
         return;
-    if (scale === defaultScale &&
-        positionX === defaultPositionX &&
-        positionY === defaultPositionY)
+    if (scale === defaultScale && positionX === defaultPositionX && positionY === defaultPositionY)
         return;
@@ -665,2 +702,5 @@ var speed = typeof animationSpeed === "number" ? animationSpeed : reset.animationTime;
 }
+function getButtonAnimationTime(targetScale, newScale, time) {
+    return time * (newScale / targetScale);
+}
 
@@ -679,4 +719,3 @@ function round(number, decimal) {
     var _a = this.stateProvider, _b = _a.options, minScale = _b.minScale, maxScale = _b.maxScale, _c = _a.scalePadding, size = _c.size, disabled = _c.disabled;
-    if (typeof pinchStartDistance !== "number" ||
-        typeof currentDistance !== "number")
+    if (typeof pinchStartDistance !== "number" || typeof currentDistance !== "number")
         return console.error("Pinch touches distance was not provided");
@@ -725,3 +764,3 @@ if (currentDistance < 0)
     // Calculate transformations
-    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || disableLimitsOnWheel);
+    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || !disableLimitsOnWheel);
     var _d = handleCalculatePositions.call(this, mouseX, mouseY, newScale, bounds, isLimitedToBounds), x = _d.x, y = _d.y;
@@ -737,3 +776,3 @@ this.lastDistance = currentDistance;
 
-var throttleTime = 40;
+var throttleTime = 10;
 function velocityTimeSpeed(speed, animationTime) {
@@ -765,8 +804,4 @@ var velocityEqualToMove = this.stateProvider.pan.velocityEqualToMove;
     animate.call(this, "easeOut", animationTime, function (step) {
-        var currentPositionX = lockAxisX
-            ? positionX
-            : _this.offsetX + targetX - targetX * step;
-        var currentPositionY = lockAxisY
-            ? positionY
-            : _this.offsetY + targetY - targetY * step;
+        var currentPositionX = lockAxisX ? positionX : _this.offsetX + targetX - targetX * step;
+        var currentPositionY = lockAxisY ? positionY : _this.offsetY + targetY - targetY * step;
         var calculatedPosition = checkPositionBounds(currentPositionX, currentPositionY, _this.maxBounds, limitToBounds, 0);
@@ -799,4 +834,3 @@ _this.offsetX = calculatedPosition.x;
         var velocityY = (distanceY / interval) * velocitySensitivity;
-        var velocity_1 = (Math.sqrt(distanceX * distanceX + distanceY * distanceY) / interval) *
-            velocitySensitivity;
+        var velocity_1 = (Math.sqrt(distanceX * distanceX + distanceY * distanceY) / interval) * velocitySensitivity;
         if (this.velocity && velocity_1 < this.velocity.velocity && this.throttle)
@@ -870,5 +904,3 @@ return;
         };
-        _this.stateProvider = __assign(__assign(__assign(__assign({}, initialState), mergeProps(initialState, _this.props.dynamicValues)), _this.props.defaultValues), { previousScale: _this.props.dynamicValues.scale ||
-                _this.props.defaultValues.scale ||
-                initialState.scale });
+        _this.stateProvider = __assign(__assign(__assign(__assign({}, initialState), mergeProps(initialState, _this.props.dynamicValues)), _this.props.defaultValues), { previousScale: _this.props.dynamicValues.scale || _this.props.defaultValues.scale || initialState.scale });
         // panning helpers
@@ -938,7 +970,7 @@ _this.startCoords = null;
             // fire animation
-            if (_this.lastScale !== scale) {
-                _this.lastScale = scale;
+            if (_this.lastScale !== _this.stateProvider.scale) {
+                _this.lastScale = _this.stateProvider.scale;
                 clearTimeout(wheelAnimationTimer);
                 wheelAnimationTimer = setTimeout(function () {
-                    handlePaddingAnimation.call(_this, event);
+                    handlePaddingAnimation$1.call(_this, event);
                 }, wheelAnimationTime);
@@ -950,2 +982,7 @@ }
         //////////
+        _this.checkPanningTarget = function (event) {
+            var disableOnTarget = _this.stateProvider.pan.disableOnTarget;
+            return (disableOnTarget.map(function (tag) { return tag.toUpperCase(); }).includes(event.target.tagName) ||
+                disableOnTarget.find(function (element) { return event.target.classList.value.includes(element); }));
+        };
         _this.checkIsPanningActive = function (event) {
@@ -975,3 +1012,4 @@ var disabled = _this.stateProvider.pan.disabled;
                 (wrapperComponent && !wrapperComponent.contains(target)) ||
-                scale < minScale)
+                scale < minScale ||
+                _this.checkPanningTarget(event))
                 return;
@@ -990,5 +1028,5 @@ handleDisableAnimation.call(_this);
         _this.handlePanning = function (event) {
-            event.preventDefault();
             if (_this.checkIsPanningActive(event))
                 return;
+            event.preventDefault();
             event.stopPropagation();
@@ -1004,4 +1042,4 @@ calculateVelocityStart.call(_this, event);
                 handleCallback(_this.props.onPanningStop, _this.getCallbackProps());
-                var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY;
-                var _b = _this.bounds, minPositionX = _b.minPositionX, minPositionY = _b.minPositionY, maxPositionX = _b.maxPositionX, maxPositionY = _b.maxPositionY;
+                var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY, _b = _a.pan, panPaddingShiftTime = _b.panPaddingShiftTime, velocity = _b.velocity;
+                var _c = _this.bounds, minPositionX = _c.minPositionX, minPositionY = _c.minPositionY, maxPositionX = _c.maxPositionX, maxPositionY = _c.maxPositionY;
                 var isInsideBounds = positionX > minPositionX &&
@@ -1012,8 +1050,10 @@ positionY > minPositionY &&
                 // start velocity animation
-                if (_this.velocity && _this.stateProvider.pan.velocity && isInsideBounds) {
+                if (_this.velocity && velocity && isInsideBounds) {
                     animateVelocity.call(_this);
                 }
                 else {
-                    // fire fit to bounds animation
-                    handlePanningAnimation.call(_this);
+                    setTimeout(function () {
+                        // fire fit to bounds animation
+                        handlePanningAnimation.call(_this);
+                    }, panPaddingShiftTime + 30);
                 }
@@ -1045,3 +1085,3 @@ }
                 _this.pinchStartScale = null;
-                handlePaddingAnimation.call(_this);
+                handlePaddingAnimation$1.call(_this);
                 handleCallback(_this.props.onPinchingStop, _this.getCallbackProps());
@@ -1149,2 +1189,7 @@ }
         };
+        _this.setDefaultState = function () {
+            _this.animation = null;
+            _this.stateProvider = __assign(__assign(__assign({}, _this.stateProvider), { scale: initialState.scale, positionX: initialState.positionX, positionY: initialState.positionY }), _this.props.defaultValues);
+            _this.forceUpdate();
+        };
         //////////
@@ -1171,7 +1216,6 @@ // Setters
                 return console.error("There is no content component");
-            var transform = "translate(" + (posX ||
-                _this.stateProvider.positionX) + "px, " + (posY ||
-                _this.stateProvider.positionY) + "px) scale(" + (scale ||
-                _this.stateProvider.scale) + ")";
+            var transform = "translate(" + (posX || _this.stateProvider.positionX) + "px, " + (posY ||
+                _this.stateProvider.positionY) + "px) scale(" + (scale || _this.stateProvider.scale) + ")";
             contentComponent.style.transform = transform;
+            contentComponent.style.WebkitTransform = transform;
             // force update to inject state to the context
@@ -1205,5 +1249,3 @@ _this.forceUpdate();
         }
-        if (!oldState.wrapperComponent &&
-            wrapperComponent &&
-            wrapperComponent !== undefined) {
+        if (!oldState.wrapperComponent && wrapperComponent && wrapperComponent !== undefined) {
             this.stateProvider.wrapperComponent = wrapperComponent;
@@ -1219,8 +1261,7 @@ // Zooming events on wrapper
         // set bound for animations
-        if ((wrapperComponent && contentComponent) ||
-            oldProps.dynamicValues !== dynamicValues) {
+        if ((wrapperComponent && contentComponent) || oldProps.dynamicValues !== dynamicValues) {
             this.maxBounds = handleCalculateBounds.call(this, this.stateProvider.scale, this.stateProvider.pan.limitToWrapperBounds);
         }
         // must be at the end of the update function, updates
-        if (oldProps.dynamicValues !== dynamicValues) {
+        if (oldProps.dynamicValues && oldProps.dynamicValues !== dynamicValues) {
             this.animation = null;
@@ -1245,2 +1286,3 @@ this.stateProvider = __assign(__assign({}, this.stateProvider), mergeProps(this.stateProvider, dynamicValues));
                 resetTransform: this.resetTransform,
+                setDefaultState: this.setDefaultState,
             },
@@ -1253,5 +1295,3 @@ nodes: {
         var children = this.props.children;
-        var content = typeof children === "function"
-            ? children(__assign(__assign({}, value.state), value.dispatch))
-            : children;
+        var content = typeof children === "function" ? children(__assign(__assign({}, value.state), value.dispatch)) : children;
         return React.createElement(Context.Provider, { value: value }, content);
@@ -1258,0 +1298,0 @@ };

dist/index.js

@@ -90,2 +90,4 @@ 'use strict';
         disabled: false,
+        panPaddingShiftTime: 50,
+        panAnimationType: "easeOut",
         lockAxisX: false,
@@ -97,17 +99,17 @@ lockAxisY: false,
         velocityActiveScale: 1,
-        velocityMinSpeed: 1.8,
+        velocityMinSpeed: 0.2,
         velocityBaseTime: 1800,
         limitToWrapperBounds: false,
         padding: true,
-        paddingSize: 6,
+        paddingSize: 60,
         animationTime: 200,
         animationType: "easeOut",
+        disableOnTarget: [],
     },
     pinch: {
         disabled: false,
-        step: 1,
     },
     zoomIn: {
         disabled: false,
-        step: 40,
+        step: 60,
         animation: true,
@@ -119,3 +121,3 @@ animationType: "easeOut",
         disabled: false,
-        step: 40,
+        step: 60,
         animation: true,
@@ -127,3 +129,3 @@ animationType: "easeOut",
         disabled: false,
-        step: 40,
+        step: 60,
         mode: "zoomIn",
@@ -136,3 +138,2 @@ animation: true,
         disabled: false,
-        step: 40,
         animation: true,
@@ -332,2 +333,3 @@ animationType: "easeOut",
     }
+    this.animate = false;
     this.animation = false;
@@ -368,11 +370,19 @@ this.velocity = null;
     var positionYDiff = targetState.positionY - positionY;
-    // animation start timestamp
-    animate.call(this, type, speed, function (step) {
-        _this.stateProvider.previousScale = _this.stateProvider.scale;
-        _this.stateProvider.scale = scale + scaleDiff * step;
-        _this.stateProvider.positionX = positionX + positionXDiff * step;
-        _this.stateProvider.positionY = positionY + positionYDiff * step;
-        // apply animation changes
-        _this.setContentComponentTransformation();
-    });
+    if (speed === 0) {
+        this.stateProvider.previousScale = this.stateProvider.scale;
+        this.stateProvider.scale = targetState.scale;
+        this.stateProvider.positionX = targetState.positionX;
+        this.stateProvider.positionY = targetState.positionY;
+    }
+    else {
+        // animation start timestamp
+        animate.call(this, type, speed, function (step) {
+            _this.stateProvider.previousScale = _this.stateProvider.scale;
+            _this.stateProvider.scale = scale + scaleDiff * step;
+            _this.stateProvider.positionX = positionX + positionXDiff * step;
+            _this.stateProvider.positionY = positionY + positionYDiff * step;
+            // apply animation changes
+            _this.setContentComponentTransformation();
+        });
+    }
 }
@@ -467,6 +477,3 @@
     // Save panned position
-    this.stateProvider.positionX = calculatedPosition.x;
-    this.stateProvider.positionY = calculatedPosition.y;
-    // update component transformation
-    this.setContentComponentTransformation();
+    handlePaddingAnimation.call(this, calculatedPosition.x, calculatedPosition.y);
 }
@@ -493,8 +500,4 @@ function handlePanningAnimation() {
     var yChanged = positionY > maxPositionY || positionY < minPositionY;
-    var mouseX = positionX > maxPositionX
-        ? wrapperComponent.offsetWidth
-        : this.stateProvider.minPositionX || 0;
-    var mouseY = positionY > maxPositionY
-        ? wrapperComponent.offsetHeight
-        : this.stateProvider.minPositionY || 0;
+    var mouseX = positionX > maxPositionX ? wrapperComponent.offsetWidth : this.stateProvider.minPositionX || 0;
+    var mouseY = positionY > maxPositionY ? wrapperComponent.offsetHeight : this.stateProvider.minPositionY || 0;
     var mousePosX = mouseX;
@@ -509,6 +512,35 @@ var mousePosY = mouseY;
 }
+function handlePaddingAnimation(positionX, positionY) {
+    var _a = this.stateProvider, scale = _a.scale, _b = _a.pan, paddingSize = _b.paddingSize, panPaddingShiftTime = _b.panPaddingShiftTime, panAnimationType = _b.panAnimationType;
+    var _c = this.bounds, maxPositionX = _c.maxPositionX, maxPositionY = _c.maxPositionY, minPositionX = _c.minPositionX, minPositionY = _c.minPositionY;
+    var time = 0;
+    var baseTime = panPaddingShiftTime;
+    if (positionX < minPositionX || positionX > maxPositionX) {
+        var multiplier = getAnimationTimeMultiplier(Math.abs(positionX - minPositionX), paddingSize);
+        var newTime = baseTime * multiplier;
+        if (newTime > time)
+            time = newTime;
+    }
+    if (positionY < minPositionY || positionY > maxPositionY) {
+        var multiplier = getAnimationTimeMultiplier(Math.abs(positionY - minPositionY), paddingSize);
+        var newTime = baseTime * multiplier;
+        if (newTime > time)
+            time = newTime;
+    }
+    //animate padding
+    animateComponent.call(this, {
+        targetState: { scale: scale, positionX: positionX, positionY: positionY },
+        speed: time,
+        type: panAnimationType,
+    });
+}
+function getAnimationTimeMultiplier(padding, maxPadding) {
+    return Math.min(padding / maxPadding, 1);
+}
 
-function handleCalculateZoom(delta, step, disablePadding) {
+function handleCalculateZoom(delta, step, disablePadding, getTarget) {
     var _a = this.stateProvider, scale = _a.scale, _b = _a.options, maxScale = _b.maxScale, minScale = _b.minScale, _c = _a.scalePadding, size = _c.size, disabled = _c.disabled;
     var targetScale = scale + step * delta * (scale / 100);
+    if (getTarget)
+        return targetScale;
     var paddingEnabled = disablePadding ? false : !disabled;
@@ -554,3 +586,3 @@ var newScale = checkZoomBounds(roundNumber(targetScale, 2), minScale, maxScale, size, paddingEnabled);
     var _d = wheelMousePosition(event, contentComponent, scale), mouseX = _d.mouseX, mouseY = _d.mouseY;
-    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || disableLimitsOnWheel);
+    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || !disableLimitsOnWheel);
     var _e = handleCalculatePositions.call(this, mouseX, mouseY, newScale, bounds, isLimitedToBounds), x = _e.x, y = _e.y;
@@ -583,6 +615,6 @@ this.bounds = bounds;
 }
-function handlePaddingAnimation() {
+function handlePaddingAnimation$1() {
     var _a = this.stateProvider, scale = _a.scale, wrapperComponent = _a.wrapperComponent, minScale = _a.options.minScale, _b = _a.scalePadding, disabled = _b.disabled, animationTime = _b.animationTime, animationType = _b.animationType;
-    var isDisabled = disabled || scale > minScale;
-    if (scale > minScale) {
+    var isDisabled = disabled || scale >= minScale;
+    if (scale >= minScale) {
         // fire fit to bounds animation
@@ -606,2 +638,3 @@ handlePanningAnimation.call(this);
 function handleDoubleClick(event) {
+    var _this = this;
     event.preventDefault();
@@ -617,7 +650,13 @@ event.stopPropagation();
     var targetState = handleZoomToPoint.call(this, disabled, newScale, mouseX, mouseY);
-    animateComponent.call(this, {
-        targetState: targetState,
-        speed: animationTime,
-        type: animationType,
-    });
+    if (targetState.scale === scale)
+        return;
+    var targetScale = handleCalculateZoom.call(this, delta, step, true);
+    var time = getButtonAnimationTime(targetScale, newScale, animationTime);
+    setTimeout(function () {
+        animateComponent.call(_this, {
+            targetState: targetState,
+            speed: time,
+            type: animationType,
+        });
+    }, this.stateProvider.pan.panPaddingShiftTime + 30);
 }
@@ -632,13 +671,13 @@ function handleZoomControls(customDelta, customStep) {
     var isZoomIn = newScale > scale;
-    var animationSpeed = isZoomIn
-        ? zoomIn.animationTime
-        : zoomOut.animationTime;
+    var animationSpeed = isZoomIn ? zoomIn.animationTime : zoomOut.animationTime;
     var animationType = isZoomIn ? zoomIn.animationType : zoomOut.animationType;
     var isDisabled = isZoomIn ? zoomIn.disabled : zoomOut.disabled;
     var targetState = handleZoomToPoint.call(this, isDisabled, newScale, mouseX, mouseY);
-    if (targetState === scale)
+    if (targetState.scale === scale)
         return;
+    var targetScale = handleCalculateZoom.call(this, customDelta, customStep, true);
+    var time = getButtonAnimationTime(targetScale, newScale, animationSpeed);
     animateComponent.call(this, {
         targetState: targetState,
-        speed: animationSpeed,
+        speed: time,
         type: animationType,
@@ -652,5 +691,3 @@ });
         return;
-    if (scale === defaultScale &&
-        positionX === defaultPositionX &&
-        positionY === defaultPositionY)
+    if (scale === defaultScale && positionX === defaultPositionX && positionY === defaultPositionY)
         return;
@@ -672,2 +709,5 @@ var speed = typeof animationSpeed === "number" ? animationSpeed : reset.animationTime;
 }
+function getButtonAnimationTime(targetScale, newScale, time) {
+    return time * (newScale / targetScale);
+}
 
@@ -686,4 +726,3 @@ function round(number, decimal) {
     var _a = this.stateProvider, _b = _a.options, minScale = _b.minScale, maxScale = _b.maxScale, _c = _a.scalePadding, size = _c.size, disabled = _c.disabled;
-    if (typeof pinchStartDistance !== "number" ||
-        typeof currentDistance !== "number")
+    if (typeof pinchStartDistance !== "number" || typeof currentDistance !== "number")
         return console.error("Pinch touches distance was not provided");
@@ -732,3 +771,3 @@ if (currentDistance < 0)
     // Calculate transformations
-    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || disableLimitsOnWheel);
+    var isLimitedToBounds = limitToBounds && (disabled || size === 0 || !disableLimitsOnWheel);
     var _d = handleCalculatePositions.call(this, mouseX, mouseY, newScale, bounds, isLimitedToBounds), x = _d.x, y = _d.y;
@@ -744,3 +783,3 @@ this.lastDistance = currentDistance;
 
-var throttleTime = 40;
+var throttleTime = 10;
 function velocityTimeSpeed(speed, animationTime) {
@@ -772,8 +811,4 @@ var velocityEqualToMove = this.stateProvider.pan.velocityEqualToMove;
     animate.call(this, "easeOut", animationTime, function (step) {
-        var currentPositionX = lockAxisX
-            ? positionX
-            : _this.offsetX + targetX - targetX * step;
-        var currentPositionY = lockAxisY
-            ? positionY
-            : _this.offsetY + targetY - targetY * step;
+        var currentPositionX = lockAxisX ? positionX : _this.offsetX + targetX - targetX * step;
+        var currentPositionY = lockAxisY ? positionY : _this.offsetY + targetY - targetY * step;
         var calculatedPosition = checkPositionBounds(currentPositionX, currentPositionY, _this.maxBounds, limitToBounds, 0);
@@ -806,4 +841,3 @@ _this.offsetX = calculatedPosition.x;
         var velocityY = (distanceY / interval) * velocitySensitivity;
-        var velocity_1 = (Math.sqrt(distanceX * distanceX + distanceY * distanceY) / interval) *
-            velocitySensitivity;
+        var velocity_1 = (Math.sqrt(distanceX * distanceX + distanceY * distanceY) / interval) * velocitySensitivity;
         if (this.velocity && velocity_1 < this.velocity.velocity && this.throttle)
@@ -877,5 +911,3 @@ return;
         };
-        _this.stateProvider = __assign(__assign(__assign(__assign({}, initialState), mergeProps(initialState, _this.props.dynamicValues)), _this.props.defaultValues), { previousScale: _this.props.dynamicValues.scale ||
-                _this.props.defaultValues.scale ||
-                initialState.scale });
+        _this.stateProvider = __assign(__assign(__assign(__assign({}, initialState), mergeProps(initialState, _this.props.dynamicValues)), _this.props.defaultValues), { previousScale: _this.props.dynamicValues.scale || _this.props.defaultValues.scale || initialState.scale });
         // panning helpers
@@ -945,7 +977,7 @@ _this.startCoords = null;
             // fire animation
-            if (_this.lastScale !== scale) {
-                _this.lastScale = scale;
+            if (_this.lastScale !== _this.stateProvider.scale) {
+                _this.lastScale = _this.stateProvider.scale;
                 clearTimeout(wheelAnimationTimer);
                 wheelAnimationTimer = setTimeout(function () {
-                    handlePaddingAnimation.call(_this, event);
+                    handlePaddingAnimation$1.call(_this, event);
                 }, wheelAnimationTime);
@@ -957,2 +989,7 @@ }
         //////////
+        _this.checkPanningTarget = function (event) {
+            var disableOnTarget = _this.stateProvider.pan.disableOnTarget;
+            return (disableOnTarget.map(function (tag) { return tag.toUpperCase(); }).includes(event.target.tagName) ||
+                disableOnTarget.find(function (element) { return event.target.classList.value.includes(element); }));
+        };
         _this.checkIsPanningActive = function (event) {
@@ -982,3 +1019,4 @@ var disabled = _this.stateProvider.pan.disabled;
                 (wrapperComponent && !wrapperComponent.contains(target)) ||
-                scale < minScale)
+                scale < minScale ||
+                _this.checkPanningTarget(event))
                 return;
@@ -997,5 +1035,5 @@ handleDisableAnimation.call(_this);
         _this.handlePanning = function (event) {
-            event.preventDefault();
             if (_this.checkIsPanningActive(event))
                 return;
+            event.preventDefault();
             event.stopPropagation();
@@ -1011,4 +1049,4 @@ calculateVelocityStart.call(_this, event);
                 handleCallback(_this.props.onPanningStop, _this.getCallbackProps());
-                var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY;
-                var _b = _this.bounds, minPositionX = _b.minPositionX, minPositionY = _b.minPositionY, maxPositionX = _b.maxPositionX, maxPositionY = _b.maxPositionY;
+                var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY, _b = _a.pan, panPaddingShiftTime = _b.panPaddingShiftTime, velocity = _b.velocity;
+                var _c = _this.bounds, minPositionX = _c.minPositionX, minPositionY = _c.minPositionY, maxPositionX = _c.maxPositionX, maxPositionY = _c.maxPositionY;
                 var isInsideBounds = positionX > minPositionX &&
@@ -1019,8 +1057,10 @@ positionY > minPositionY &&
                 // start velocity animation
-                if (_this.velocity && _this.stateProvider.pan.velocity && isInsideBounds) {
+                if (_this.velocity && velocity && isInsideBounds) {
                     animateVelocity.call(_this);
                 }
                 else {
-                    // fire fit to bounds animation
-                    handlePanningAnimation.call(_this);
+                    setTimeout(function () {
+                        // fire fit to bounds animation
+                        handlePanningAnimation.call(_this);
+                    }, panPaddingShiftTime + 30);
                 }
@@ -1052,3 +1092,3 @@ }
                 _this.pinchStartScale = null;
-                handlePaddingAnimation.call(_this);
+                handlePaddingAnimation$1.call(_this);
                 handleCallback(_this.props.onPinchingStop, _this.getCallbackProps());
@@ -1156,2 +1196,7 @@ }
         };
+        _this.setDefaultState = function () {
+            _this.animation = null;
+            _this.stateProvider = __assign(__assign(__assign({}, _this.stateProvider), { scale: initialState.scale, positionX: initialState.positionX, positionY: initialState.positionY }), _this.props.defaultValues);
+            _this.forceUpdate();
+        };
         //////////
@@ -1178,7 +1223,6 @@ // Setters
                 return console.error("There is no content component");
-            var transform = "translate(" + (posX ||
-                _this.stateProvider.positionX) + "px, " + (posY ||
-                _this.stateProvider.positionY) + "px) scale(" + (scale ||
-                _this.stateProvider.scale) + ")";
+            var transform = "translate(" + (posX || _this.stateProvider.positionX) + "px, " + (posY ||
+                _this.stateProvider.positionY) + "px) scale(" + (scale || _this.stateProvider.scale) + ")";
             contentComponent.style.transform = transform;
+            contentComponent.style.WebkitTransform = transform;
             // force update to inject state to the context
@@ -1212,5 +1256,3 @@ _this.forceUpdate();
         }
-        if (!oldState.wrapperComponent &&
-            wrapperComponent &&
-            wrapperComponent !== undefined) {
+        if (!oldState.wrapperComponent && wrapperComponent && wrapperComponent !== undefined) {
             this.stateProvider.wrapperComponent = wrapperComponent;
@@ -1226,8 +1268,7 @@ // Zooming events on wrapper
         // set bound for animations
-        if ((wrapperComponent && contentComponent) ||
-            oldProps.dynamicValues !== dynamicValues) {
+        if ((wrapperComponent && contentComponent) || oldProps.dynamicValues !== dynamicValues) {
             this.maxBounds = handleCalculateBounds.call(this, this.stateProvider.scale, this.stateProvider.pan.limitToWrapperBounds);
         }
         // must be at the end of the update function, updates
-        if (oldProps.dynamicValues !== dynamicValues) {
+        if (oldProps.dynamicValues && oldProps.dynamicValues !== dynamicValues) {
             this.animation = null;
@@ -1252,2 +1293,3 @@ this.stateProvider = __assign(__assign({}, this.stateProvider), mergeProps(this.stateProvider, dynamicValues));
                 resetTransform: this.resetTransform,
+                setDefaultState: this.setDefaultState,
             },
@@ -1260,5 +1302,3 @@ nodes: {
         var children = this.props.children;
-        var content = typeof children === "function"
-            ? children(__assign(__assign({}, value.state), value.dispatch))
-            : children;
+        var content = typeof children === "function" ? children(__assign(__assign({}, value.state), value.dispatch)) : children;
         return React__default.createElement(Context.Provider, { value: value }, content);
@@ -1265,0 +1305,0 @@ };

dist/store/InitialState.d.ts

@@ -29,2 +29,4 @@ export declare const initialState: {
         disabled: boolean;
+        panPaddingShiftTime: number;
+        panAnimationType: string;
         lockAxisX: boolean;
@@ -43,6 +45,6 @@ lockAxisY: boolean;
         animationType: string;
+        disableOnTarget: any[];
     };
     pinch: {
         disabled: boolean;
-        step: number;
     };
@@ -73,3 +75,2 @@ zoomIn: {
         disabled: boolean;
-        step: number;
         animation: boolean;
@@ -76,0 +77,0 @@ animationType: string;

dist/store/interfaces/propsInterface.d.ts

@@ -33,2 +33,4 @@ export interface PropsList {
         velocity: boolean;
+        panPaddingShiftTime: number;
+        panAnimationType: string;
         velocityEqualToMove: boolean;
@@ -35,0 +37,0 @@ velocitySensitivity: number;

dist/store/StateContext.d.ts

@@ -37,2 +37,4 @@ import React, { Component } from "react";
             disabled: boolean;
+            panPaddingShiftTime: number;
+            panAnimationType: string;
             lockAxisX: boolean;
@@ -51,6 +53,6 @@ lockAxisY: boolean;
             animationType: string;
+            disableOnTarget: any[];
         };
         pinch: {
             disabled: boolean;
-            step: number;
         };
@@ -81,3 +83,2 @@ zoomIn: {
             disabled: boolean;
-            step: number;
             animation: boolean;
@@ -116,2 +117,3 @@ animationType: string;
     handleWheel: (event: any) => void;
+    checkPanningTarget: (event: any) => any;
     checkIsPanningActive: (event: any) => boolean;
@@ -136,2 +138,3 @@ handleSetUpPanning: (x: any, y: any) => void;
     resetTransform: () => void;
+    setDefaultState: () => void;
     setWrapperComponent: (wrapperComponent: any) => void;
@@ -138,0 +141,0 @@ setContentComponent: (contentComponent: any) => void;

package.json

 {
   "name": "react-zoom-pan-pinch",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Zoom and pan html elements in easy way",
@@ -5,0 +5,0 @@ "author": "prc5",

README.md

@@ -11,4 +11,3 @@ # react-zoom-pan-pinch
 
-> Super fast and light react npm package for zooming, panning and pinching html
-> elements in easy way
+> Super fast and light react npm package for zooming, panning and pinching html elements in easy way
 
@@ -70,7 +69,3 @@ ## Features
     return (
-      <TransformWrapper
-        defaultScale={1}
-        defaultPositionX={200}
-        defaultPositionY={100}
-      >
+      <TransformWrapper defaultScale={1} defaultPositionX={200} defaultPositionY={100}>
         {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
@@ -99,3 +94,2 @@ <React.Fragment>
 | :--------------- | :-----: | -------: |
-| previousScale    |    1    |   number |
 | scale            |    1    |   number |
@@ -164,18 +158,20 @@ | positionX        |  auto   |   number |
 
-| Props                | Default |    Type |
-| :------------------- | :-----: | ------: |
-| disabled             |  false  | boolean |
-| lockAxisX            |  false  | boolean |
-| lockAxisY            |  false  | boolean |
-| velocity             |  false  | boolean |
-| velocityEqualToMove  |  false  | boolean |
-| velocitySensitivity  |    1    |  number |
-| velocityActiveScale  |    1    |  number |
-| velocityMinSpeed     |   1.8   |  number |
-| velocityBaseTime     |  1800   |  number |
-| limitToWrapperBounds |  false  | boolean |
-| padding              |  true   | boolean |
-| paddingSize          |    6    |  number |
-| animationTime        |   200   |  number |
-| animationType        | easeOut |  string |
+| Props                | Default |                                            Type |
+| :------------------- | :-----: | ----------------------------------------------: |
+| disabled             |  false  |                                         boolean |
+| disableOnTarget      |   []    | array of class names or node tags (div,span...) |
+| lockAxisX            |  false  |                                         boolean |
+| lockAxisY            |  false  |                                         boolean |
+| panPaddingShiftTime  |   50    |                                          number |
+| panAnimationType     | easeOut |                                          string |
+| velocity             |  false  |                                         boolean |
+| velocityEqualToMove  |  false  |                                         boolean |
+| velocitySensitivity  |    1    |                                          number |
+| velocityMinSpeed     |   0.2   |                                          number |
+| velocityBaseTime     |  1800   |                                          number |
+| limitToWrapperBounds |  false  |                                         boolean |
+| padding              |  true   |                                         boolean |
+| paddingSize          |    6    |                                          number |
+| animationTime        |   200   |                                          number |
+| animationType        | easeOut |                                          string |
 
@@ -187,3 +183,2 @@ #### Pinch prop elements
 | disabled |  false  | boolean |
-| step     |    1    |  number |
 
@@ -195,3 +190,3 @@ #### zoomIn prop elements
 | disabled      |  false  | boolean |
-| step          |   40    |  number |
+| step          |   60    |  number |
 | animation     |  true   | boolean |
@@ -206,3 +201,3 @@ | animationTime |   200   |  number |
 | disabled      |  false  | boolean |
-| step          |   40    |  number |
+| step          |   60    |  number |
 | animation     |  true   | boolean |
@@ -214,9 +209,10 @@ | animationTime |   200   |  number |
 
-| Props         | Default |    Type |
-| :------------ | :-----: | ------: |
-| disabled      |  false  | boolean |
-| step          |   40    |  number |
-| animation     |  true   | boolean |
-| animationTime |   200   |  number |
-| animationType | easeOut |  string |
+| Props         | Default |                     Type |
+| :------------ | :-----: | -----------------------: |
+| disabled      |  false  |                  boolean |
+| step          |   60    |                   number |
+| animation     |  true   |                  boolean |
+| animationTime |   200   |                   number |
+| animationType | easeOut |                   string |
+| mode          | zoomIn  | zoomIn / zoomOut / reset |
 
@@ -228,3 +224,2 @@ #### reset prop elements
 | disabled      |  false  | boolean |
-| step          |   40    |  number |
 | animation     |  true   | boolean |
@@ -272,4 +267,3 @@ | animationTime |   200   |  number |
 
-Thanks goes to these wonderful people
-([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
@@ -290,4 +284,3 @@ <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 
-This project follows the
-[all-contributors](https://github.com/all-contributors/all-contributors)
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
 specification. Contributions of any kind welcome!

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

378482

increased by4.65%

Lines of code

3154

increased by2.8%

Worsened metrics

Number of lines in readme file

276

decreased by-2.47%

No dependency changes