react-pic-gallery 1.5.2 → 1.5.6

package/dist/react-pic-gallery.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import React, { useState, useImperativeHandle, Component, useContext, useRef, useEffect, useCallback } from "react";
+import React, { Component, useState, useEffect, useCallback } from "react";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /*
@@ -130,14 +130,12 @@ var extendStatics = function(d, b) {
     d2.__proto__ = b2;
   } || function(d2, b2) {
     for (var p2 in b2)
-      if (Object.prototype.hasOwnProperty.call(b2, p2))
+      if (b2.hasOwnProperty(p2))
         d2[p2] = b2[p2];
   };
   return extendStatics(d, b);
 };
 function __extends(d, b) {
-  if (typeof b !== "function" && b !== null)
-    throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
   extendStatics(d, b);
   function __() {
     this.constructor = d;
@@ -156,28 +154,183 @@ var __assign = function() {
   };
   return __assign.apply(this, arguments);
 };
-function __spreadArray(to, from, pack) {
-  if (pack || arguments.length === 2)
-    for (var i = 0, l = from.length, ar; i < l; i++) {
-      if (ar || !(i in from)) {
-        if (!ar)
-          ar = Array.prototype.slice.call(from, 0, i);
-        ar[i] = from[i];
-      }
+function __rest(s, e) {
+  var t = {};
+  for (var p2 in s)
+    if (Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0)
+      t[p2] = s[p2];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++) {
+      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]))
+        t[p2[i]] = s[p2[i]];
     }
-  return to.concat(ar || from);
+  return t;
 }
+var initialState = {
+  wrapperComponent: null,
+  contentComponent: null,
+  previousScale: 1,
+  scale: 1,
+  positionX: 0,
+  positionY: 0,
+  options: {
+    disabled: false,
+    transformEnabled: true,
+    minPositionX: null,
+    maxPositionX: null,
+    minPositionY: null,
+    maxPositionY: null,
+    minScale: 1,
+    maxScale: 8,
+    limitToBounds: true,
+    limitToWrapper: false,
+    centerContent: true,
+    wrapperClass: "",
+    contentClass: ""
+  },
+  wheel: {
+    disabled: false,
+    step: 5,
+    wheelEnabled: true,
+    touchPadEnabled: true,
+    limitsOnWheel: false
+  },
+  pan: {
+    disabled: false,
+    panAnimationType: "linear",
+    lockAxisX: false,
+    lockAxisY: false,
+    velocity: true,
+    velocityEqualToMove: true,
+    velocitySensitivity: 2,
+    velocityActiveScale: 1,
+    velocityMinSpeed: 1,
+    velocityBaseTime: 1600,
+    velocityAnimationType: "easeOutQuart",
+    padding: true,
+    paddingSize: 30,
+    panReturnAnimationTime: 400,
+    panReturnAnimationType: "easeOut",
+    disableOnTarget: []
+  },
+  pinch: {
+    disabled: false
+  },
+  zoomIn: {
+    disabled: false,
+    step: 20,
+    animation: true,
+    animationType: "easeOut",
+    animationTime: 200
+  },
+  zoomOut: {
+    disabled: false,
+    step: 20,
+    animation: true,
+    animationType: "easeOut",
+    animationTime: 200
+  },
+  doubleClick: {
+    disabled: false,
+    step: 20,
+    mode: "zoomIn",
+    animation: true,
+    animationType: "easeOut",
+    animationTime: 200
+  },
+  reset: {
+    disabled: false,
+    animation: true,
+    animationType: "easeOut",
+    animationTime: 200
+  },
+  scalePadding: {
+    disabled: false,
+    size: 0.2,
+    animationTime: 200,
+    animationType: "easeOut"
+  }
+};
 var roundNumber = function(num, decimal) {
   return Number(num.toFixed(decimal));
 };
 var checkIsNumber = function(num, defaultValue) {
   return typeof num === "number" ? num : defaultValue;
 };
-var handleCallback = function(context, event, callback) {
+var boundLimiter = function(value, minBound, maxBound, isActive) {
+  if (!isActive)
+    return roundNumber(value, 2);
+  if (value < minBound)
+    return roundNumber(minBound, 2);
+  if (value > maxBound)
+    return roundNumber(maxBound, 2);
+  return roundNumber(value, 2);
+};
+var calculateBoundingArea = function(wrapperWidth, newContentWidth, diffWidth, wrapperHeight, newContentHeight, diffHeight, limitToWrapper) {
+  var scaleWidthFactor = wrapperWidth > newContentWidth ? diffWidth * (limitToWrapper ? 1 : 0.5) : 0;
+  var scaleHeightFactor = wrapperHeight > newContentHeight ? diffHeight * (limitToWrapper ? 1 : 0.5) : 0;
+  var minPositionX = wrapperWidth - newContentWidth - scaleWidthFactor;
+  var maxPositionX = scaleWidthFactor;
+  var minPositionY = wrapperHeight - newContentHeight - scaleHeightFactor;
+  var maxPositionY = scaleHeightFactor;
+  return {
+    minPositionX,
+    maxPositionX,
+    minPositionY,
+    maxPositionY
+  };
+};
+var getDistance = function(firstPoint, secondPoint) {
+  return Math.sqrt(Math.pow(firstPoint.pageX - secondPoint.pageX, 2) + Math.pow(firstPoint.pageY - secondPoint.pageY, 2));
+};
+var deleteUndefinedProps = function(value) {
+  var newObject = __assign({}, value);
+  Object.keys(newObject).forEach(function(key) {
+    return newObject[key] === void 0 && delete newObject[key];
+  });
+  return newObject;
+};
+var handleCallback = function(callback, props) {
   if (callback && typeof callback === "function") {
-    callback(context, event);
+    callback(props);
   }
 };
+var handleWheelStop = function(previousEvent, event, stateProvider) {
+  var scale = stateProvider.scale, _a = stateProvider.options, maxScale = _a.maxScale, minScale = _a.minScale;
+  if (!previousEvent)
+    return false;
+  if (scale < maxScale || scale > minScale)
+    return true;
+  if (Math.sign(previousEvent.deltaY) !== Math.sign(event.deltaY))
+    return true;
+  if (previousEvent.deltaY > 0 && previousEvent.deltaY < event.deltaY)
+    return true;
+  if (previousEvent.deltaY < 0 && previousEvent.deltaY > event.deltaY)
+    return true;
+  if (Math.sign(previousEvent.deltaY) !== Math.sign(event.deltaY))
+    return true;
+  return false;
+};
+var mergeProps = function(initialState2, dynamicProps) {
+  return Object.keys(initialState2).reduce(function(acc, curr) {
+    if (typeof dynamicProps[curr] === "object" && dynamicProps[curr] !== null) {
+      acc[curr] = __assign(__assign({}, initialState2[curr]), dynamicProps[curr]);
+    } else {
+      acc[curr] = dynamicProps[curr] === void 0 ? initialState2[curr] : dynamicProps[curr];
+    }
+    return acc;
+  }, {});
+};
+function getWindowScaleY(wrapper) {
+  if (!wrapper)
+    return 0;
+  return window.innerHeight / wrapper.offsetHeight;
+}
+function getWindowScaleX(wrapper) {
+  if (!wrapper)
+    return 0;
+  return window.innerWidth / wrapper.offsetWidth;
+}
 var easeOut = function(t) {
   return -Math.cos(t * Math.PI) / 2 + 0.5;
 };
@@ -220,7 +373,7 @@ var easeOutQuint = function(t) {
 var easeInOutQuint = function(t) {
   return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
 };
-var animations = {
+var availableAnimations = {
   easeOut,
   linear,
   easeInQuad,
@@ -236,69 +389,98 @@ var animations = {
   easeOutQuint,
   easeInOutQuint
 };
-var handleCancelAnimationFrame = function(animation) {
-  if (typeof animation === "number") {
-    cancelAnimationFrame(animation);
-  }
-};
-var handleCancelAnimation = function(contextInstance) {
-  if (!contextInstance.mounted)
+function handleDisableAnimation() {
+  if (!this.mounted)
     return;
-  handleCancelAnimationFrame(contextInstance.animation);
-  contextInstance.animate = false;
-  contextInstance.animation = null;
-  contextInstance.velocity = null;
-};
-function handleSetupAnimation(contextInstance, animationName, animationTime, callback) {
-  if (!contextInstance.mounted)
+  if (this.animation) {
+    cancelAnimationFrame(this.animation);
+  }
+  this.animate = false;
+  this.animation = false;
+  this.velocity = false;
+}
+function animate(animationName, animationTime, callback) {
+  var _this = this;
+  if (!this.mounted)
     return;
   var startTime = new Date().getTime();
   var lastStep = 1;
-  handleCancelAnimation(contextInstance);
-  contextInstance.animation = function() {
-    if (!contextInstance.mounted) {
-      return handleCancelAnimationFrame(contextInstance.animation);
-    }
+  handleDisableAnimation.call(this);
+  this.animation = function() {
+    if (!_this.animation || !_this.mounted)
+      return;
     var frameTime = new Date().getTime() - startTime;
     var animationProgress = frameTime / animationTime;
-    var animationType = animations[animationName];
+    var animationType = availableAnimations[animationName];
     var step = animationType(animationProgress);
     if (frameTime >= animationTime) {
       callback(lastStep);
-      contextInstance.animation = null;
-    } else if (contextInstance.animation) {
+      _this.animation = null;
+    } else {
       callback(step);
-      requestAnimationFrame(contextInstance.animation);
+      requestAnimationFrame(_this.animation);
     }
   };
-  requestAnimationFrame(contextInstance.animation);
+  requestAnimationFrame(this.animation);
 }
-function animate(contextInstance, targetState, animationTime, animationName) {
-  var isValid = isValidTargetState(targetState);
-  if (!contextInstance.mounted || !isValid)
-    return;
-  var setTransformState = contextInstance.setTransformState;
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
+function animateComponent(_a) {
+  var _this = this;
+  var targetState = _a.targetState, speed = _a.speed, type = _a.type;
+  var _b = this.stateProvider, scale = _b.scale, positionX = _b.positionX, positionY = _b.positionY;
   var scaleDiff = targetState.scale - scale;
   var positionXDiff = targetState.positionX - positionX;
   var positionYDiff = targetState.positionY - positionY;
-  if (animationTime === 0) {
-    setTransformState(targetState.scale, targetState.positionX, targetState.positionY);
+  if (speed === 0) {
+    this.stateProvider.previousScale = this.stateProvider.scale;
+    this.stateProvider.scale = targetState.scale;
+    this.stateProvider.positionX = targetState.positionX;
+    this.stateProvider.positionY = targetState.positionY;
+    this.applyTransformation();
   } else {
-    handleSetupAnimation(contextInstance, animationName, animationTime, function(step) {
-      var newScale = scale + scaleDiff * step;
-      var newPositionX = positionX + positionXDiff * step;
-      var newPositionY = positionY + positionYDiff * step;
-      setTransformState(newScale, newPositionX, newPositionY);
+    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;
+      _this.applyTransformation();
     });
   }
 }
-function isValidTargetState(targetState) {
-  var scale = targetState.scale, positionX = targetState.positionX, positionY = targetState.positionY;
-  if (isNaN(scale) || isNaN(positionX) || isNaN(positionY)) {
-    return false;
-  }
-  return true;
+function checkZoomBounds(zoom, minScale, maxScale, zoomPadding, enablePadding) {
+  var scalePadding = enablePadding ? zoomPadding : 0;
+  var minScaleWithPadding = minScale - scalePadding;
+  if (!isNaN(maxScale) && zoom >= maxScale)
+    return maxScale;
+  if (!isNaN(minScale) && zoom <= minScaleWithPadding)
+    return minScaleWithPadding;
+  return zoom;
+}
+function checkPositionBounds(positionX, positionY, bounds, limitToBounds, paddingValue, wrapperComponent) {
+  var minPositionX = bounds.minPositionX, minPositionY = bounds.minPositionY, maxPositionX = bounds.maxPositionX, maxPositionY = bounds.maxPositionY;
+  var paddingX = wrapperComponent ? paddingValue * wrapperComponent.offsetWidth / 100 : 0;
+  var paddingY = wrapperComponent ? paddingValue * wrapperComponent.offsetHeight / 100 : 0;
+  var x = boundLimiter(positionX, minPositionX - paddingX, maxPositionX + paddingX, limitToBounds);
+  var y = boundLimiter(positionY, minPositionY - paddingY, maxPositionY + paddingY, limitToBounds);
+  return {
+    x,
+    y
+  };
+}
+function getDelta(event, customDelta) {
+  var deltaY = event ? event.deltaY < 0 ? 1 : -1 : 0;
+  var delta = checkIsNumber(customDelta, deltaY);
+  return delta;
+}
+function wheelMousePosition(event, contentComponent, scale) {
+  var contentRect = contentComponent.getBoundingClientRect();
+  var mouseX = (event.clientX - contentRect.left) / scale;
+  var mouseY = (event.clientY - contentRect.top) / scale;
+  if (isNaN(mouseX) || isNaN(mouseY))
+    console.error("No mouse or touch offset found");
+  return {
+    mouseX,
+    mouseY
+  };
 }
 function getComponentsSizes(wrapperComponent, contentComponent, newScale) {
   var wrapperWidth = wrapperComponent.offsetWidth;
@@ -318,1330 +500,920 @@ function getComponentsSizes(wrapperComponent, contentComponent, newScale) {
     newDiffHeight
   };
 }
-var getBounds = function(wrapperWidth, newContentWidth, diffWidth, wrapperHeight, newContentHeight, diffHeight, centerZoomedOut) {
-  var scaleWidthFactor = wrapperWidth > newContentWidth ? diffWidth * (centerZoomedOut ? 1 : 0.5) : 0;
-  var scaleHeightFactor = wrapperHeight > newContentHeight ? diffHeight * (centerZoomedOut ? 1 : 0.5) : 0;
-  var minPositionX = wrapperWidth - newContentWidth - scaleWidthFactor;
-  var maxPositionX = scaleWidthFactor;
-  var minPositionY = wrapperHeight - newContentHeight - scaleHeightFactor;
-  var maxPositionY = scaleHeightFactor;
-  return {
-    minPositionX,
-    maxPositionX,
-    minPositionY,
-    maxPositionY
-  };
-};
-var calculateBounds = function(contextInstance, newScale) {
-  var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-  var centerZoomedOut = contextInstance.setup.centerZoomedOut;
-  if (!wrapperComponent || !contentComponent) {
-    throw new Error("Components are not mounted");
-  }
-  var _a = getComponentsSizes(wrapperComponent, contentComponent, newScale), wrapperWidth = _a.wrapperWidth, wrapperHeight = _a.wrapperHeight, newContentWidth = _a.newContentWidth, newDiffWidth = _a.newDiffWidth, newContentHeight = _a.newContentHeight, newDiffHeight = _a.newDiffHeight;
-  var bounds = getBounds(wrapperWidth, newContentWidth, newDiffWidth, wrapperHeight, newContentHeight, newDiffHeight, Boolean(centerZoomedOut));
-  return bounds;
-};
-var handleCalculateBounds = function(contextInstance, newScale) {
-  var bounds = calculateBounds(contextInstance, newScale);
-  contextInstance.bounds = bounds;
-  return bounds;
-};
-function getMouseBoundedPosition(positionX, positionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent) {
-  var minPositionX = bounds.minPositionX, minPositionY = bounds.minPositionY, maxPositionX = bounds.maxPositionX, maxPositionY = bounds.maxPositionY;
-  var paddingX = 0;
-  var paddingY = 0;
-  if (wrapperComponent) {
-    paddingX = paddingValueX;
-    paddingY = paddingValueY;
-  }
-  var x = boundLimiter(positionX, minPositionX - paddingX, maxPositionX + paddingX, limitToBounds);
-  var y = boundLimiter(positionY, minPositionY - paddingY, maxPositionY + paddingY, limitToBounds);
-  return {
-    x,
-    y
-  };
-}
-var boundLimiter = function(value, minBound, maxBound, isActive) {
-  if (!isActive)
-    return roundNumber(value, 2);
-  if (value < minBound)
-    return roundNumber(minBound, 2);
-  if (value > maxBound)
-    return roundNumber(maxBound, 2);
-  return roundNumber(value, 2);
-};
-function handleCalculateZoomPositions(contextInstance, mouseX, mouseY, newScale, bounds, limitToBounds) {
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
+function handleCalculatePositions(mouseX, mouseY, newScale, bounds, limitToBounds) {
+  var _a = this.stateProvider, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY, transformEnabled = _a.options.transformEnabled;
   var scaleDifference = newScale - scale;
-  if (typeof mouseX !== "number" || typeof mouseY !== "number") {
-    console.error("Mouse X and Y position were not provided!");
+  if (typeof mouseX !== "number" || typeof mouseY !== "number")
+    return console.error("Mouse X and Y position were not provided!");
+  if (!transformEnabled)
     return {
-      x: positionX,
-      y: positionY
+      newPositionX: positionX,
+      newPositionY: positionY
     };
-  }
   var calculatedPositionX = positionX - mouseX * scaleDifference;
   var calculatedPositionY = positionY - mouseY * scaleDifference;
-  var newPositions = getMouseBoundedPosition(calculatedPositionX, calculatedPositionY, bounds, limitToBounds, 0, 0, null);
+  var newPositions = checkPositionBounds(calculatedPositionX, calculatedPositionY, bounds, limitToBounds, 0, null);
   return newPositions;
 }
-function checkZoomBounds(zoom, minScale, maxScale, zoomPadding, enablePadding) {
-  var scalePadding = enablePadding ? zoomPadding : 0;
-  var minScaleWithPadding = minScale - scalePadding;
-  if (!isNaN(maxScale) && zoom >= maxScale)
-    return maxScale;
-  if (!isNaN(minScale) && zoom <= minScaleWithPadding)
-    return minScaleWithPadding;
-  return zoom;
-}
-var isPanningStartAllowed = function(contextInstance, event) {
-  var excluded = contextInstance.setup.panning.excluded;
-  var isInitialized = contextInstance.isInitialized, wrapperComponent = contextInstance.wrapperComponent;
-  var target = event.target;
-  var isWrapperChild = wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(target);
-  var isAllowed = isInitialized && target && isWrapperChild;
-  if (!isAllowed)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  return true;
-};
-var isPanningAllowed = function(contextInstance) {
-  var isInitialized = contextInstance.isInitialized, isPanning = contextInstance.isPanning, setup = contextInstance.setup;
-  var disabled = setup.panning.disabled;
-  var isAllowed = isInitialized && isPanning && !disabled;
-  if (!isAllowed)
-    return false;
-  return true;
-};
-var handlePanningSetup = function(contextInstance, event) {
-  var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY;
-  contextInstance.isPanning = true;
-  var x = event.clientX;
-  var y = event.clientY;
-  contextInstance.startCoords = {
-    x: x - positionX,
-    y: y - positionY
-  };
-};
-var handleTouchPanningSetup = function(contextInstance, event) {
+function getClientPosition(event) {
   var touches = event.touches;
-  var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY;
-  contextInstance.isPanning = true;
-  var oneFingerTouch = touches.length === 1;
-  if (oneFingerTouch) {
-    var x = touches[0].clientX;
-    var y = touches[0].clientY;
-    contextInstance.startCoords = {
-      x: x - positionX,
-      y: y - positionY
+  if (touches && touches.length === 1) {
+    return {
+      clientX: touches[0].clientX,
+      clientY: touches[0].clientY
     };
   }
-};
-function handlePanToBounds(contextInstance) {
-  var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;
-  var _b = contextInstance.setup, disabled = _b.disabled, limitToBounds = _b.limitToBounds, centerZoomedOut = _b.centerZoomedOut;
-  var wrapperComponent = contextInstance.wrapperComponent;
-  if (disabled || !wrapperComponent || !contextInstance.bounds)
+  if (!touches) {
+    return {
+      clientX: event.clientX,
+      clientY: event.clientY
+    };
+  }
+  return null;
+}
+function handlePanning(event) {
+  var _a = this.stateProvider, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY, _b = _a.options, limitToBounds = _b.limitToBounds, minScale = _b.minScale, _c = _a.pan, lockAxisX = _c.lockAxisX, lockAxisY = _c.lockAxisY, padding = _c.padding, paddingSize = _c.paddingSize, wrapperComponent = _a.wrapperComponent;
+  if (!this.startCoords)
+    return;
+  var _d = this.startCoords, x = _d.x, y = _d.y;
+  var positions = getClientPosition(event);
+  if (!positions)
+    return console.error("Cannot find mouse client positions");
+  var clientX = positions.clientX, clientY = positions.clientY;
+  var mouseX = clientX - x;
+  var mouseY = clientY - y;
+  var newPositionX = lockAxisX ? positionX : mouseX;
+  var newPositionY = lockAxisY ? positionY : mouseY;
+  var paddingValue = padding && scale >= minScale ? paddingSize : 0;
+  if (newPositionX === positionX && newPositionY === positionY)
+    return;
+  var calculatedPosition = checkPositionBounds(newPositionX, newPositionY, this.bounds, limitToBounds, paddingValue, wrapperComponent);
+  handlePaddingAnimation.call(this, calculatedPosition.x, calculatedPosition.y);
+}
+function handlePanningAnimation() {
+  var _a = this.stateProvider, scale = _a.scale, minScale = _a.options.minScale, _b = _a.pan, disabled = _b.disabled, padding = _b.padding, panReturnAnimationTime = _b.panReturnAnimationTime, panReturnAnimationType = _b.panReturnAnimationType;
+  var isDisabled = disabled || scale < minScale || !padding;
+  if (isDisabled)
     return;
-  var _c = contextInstance.bounds, maxPositionX = _c.maxPositionX, minPositionX = _c.minPositionX, maxPositionY = _c.maxPositionY, minPositionY = _c.minPositionY;
+  var targetState = handlePanToBounds.call(this);
+  animateComponent.call(this, {
+    targetState,
+    speed: panReturnAnimationTime,
+    type: panReturnAnimationType
+  });
+}
+function handlePanToBounds() {
+  var _a = this.stateProvider, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale, _b = _a.options, disabled = _b.disabled, limitToBounds = _b.limitToBounds, limitToWrapper = _b.limitToWrapper;
+  var wrapperComponent = this.state.wrapperComponent;
+  if (disabled)
+    return;
+  var _c = this.bounds, maxPositionX = _c.maxPositionX, minPositionX = _c.minPositionX, maxPositionY = _c.maxPositionY, minPositionY = _c.minPositionY;
   var xChanged = positionX > maxPositionX || positionX < minPositionX;
   var yChanged = positionY > maxPositionY || positionY < minPositionY;
-  var mousePosX = positionX > maxPositionX ? wrapperComponent.offsetWidth : contextInstance.setup.minPositionX || 0;
-  var mousePosY = positionY > maxPositionY ? wrapperComponent.offsetHeight : contextInstance.setup.minPositionY || 0;
-  var _d = handleCalculateZoomPositions(contextInstance, mousePosX, mousePosY, scale, contextInstance.bounds, limitToBounds || centerZoomedOut), x = _d.x, y = _d.y;
+  var mouseX = positionX > maxPositionX ? wrapperComponent.offsetWidth : this.stateProvider.minPositionX || 0;
+  var mouseY = positionY > maxPositionY ? wrapperComponent.offsetHeight : this.stateProvider.minPositionY || 0;
+  var mousePosX = mouseX;
+  var mousePosY = mouseY;
+  var _d = handleCalculatePositions.call(this, mousePosX, mousePosY, scale, this.bounds, limitToBounds || limitToWrapper), x = _d.x, y = _d.y;
   return {
     scale,
     positionX: xChanged ? x : positionX,
     positionY: yChanged ? y : positionY
   };
 }
-function handleNewPosition(contextInstance, newPositionX, newPositionY, paddingValueX, paddingValueY) {
-  var limitToBounds = contextInstance.setup.limitToBounds;
-  var wrapperComponent = contextInstance.wrapperComponent, bounds = contextInstance.bounds;
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  var hasPositionXChanged = newPositionX !== positionX;
-  var hasPositionYChanged = newPositionY !== positionY;
-  var hasNewPosition = !hasPositionXChanged || !hasPositionYChanged;
-  if (!wrapperComponent || hasNewPosition || !bounds) {
+function handlePaddingAnimation(positionX, positionY) {
+  var padding = this.stateProvider.pan.padding;
+  if (!padding)
     return;
+  this.stateProvider.positionX = positionX;
+  this.stateProvider.positionY = positionY;
+  this.applyTransformation();
+}
+function handleCalculateZoom(delta, step, disablePadding, getTarget, isBtnFunction) {
+  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, wrapperComponent = _a.wrapperComponent;
+  var targetScale = null;
+  if (isBtnFunction) {
+    var scaleFactor = window.innerWidth * 1e-4;
+    var zoomFactor = delta < 0 ? 30 : 20;
+    targetScale = scale + (step - step * scaleFactor) * delta * (scale / zoomFactor);
+  } else {
+    var wrapperToWindowScale = 2 - window.innerWidth / wrapperComponent.offsetWidth;
+    var scaleFactor = Math.max(0.2, Math.min(0.99, wrapperToWindowScale));
+    var zoomFactor = 20;
+    targetScale = scale + step * delta * ((scale - scale * scaleFactor) / zoomFactor);
   }
-  var _b = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent), x = _b.x, y = _b.y;
-  contextInstance.setTransformState(scale, x, y);
+  if (getTarget)
+    return targetScale;
+  var paddingEnabled = disablePadding ? false : !disabled;
+  var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, paddingEnabled);
+  return newScale;
 }
-var getPanningClientPosition = function(contextInstance, clientX, clientY) {
-  var startCoords = contextInstance.startCoords, transformState = contextInstance.transformState;
-  var panning = contextInstance.setup.panning;
-  var lockAxisX = panning.lockAxisX, lockAxisY = panning.lockAxisY;
-  var positionX = transformState.positionX, positionY = transformState.positionY;
-  if (!startCoords) {
-    return {
-      x: positionX,
-      y: positionY
-    };
+function handleCalculateBounds(newScale, limitToWrapper) {
+  var _a = this.stateProvider, wrapperComponent = _a.wrapperComponent, contentComponent = _a.contentComponent;
+  var _b = getComponentsSizes(wrapperComponent, contentComponent, newScale), wrapperWidth = _b.wrapperWidth, wrapperHeight = _b.wrapperHeight, newContentWidth = _b.newContentWidth, newDiffWidth = _b.newDiffWidth, newContentHeight = _b.newContentHeight, newDiffHeight = _b.newDiffHeight;
+  var bounds = calculateBoundingArea(wrapperWidth, newContentWidth, newDiffWidth, wrapperHeight, newContentHeight, newDiffHeight, limitToWrapper);
+  this.bounds = bounds;
+  return bounds;
+}
+function handleWheelZoom(event) {
+  var _a = this.stateProvider, scale = _a.scale, contentComponent = _a.contentComponent, limitToBounds = _a.options.limitToBounds, _b = _a.scalePadding, size = _b.size, disabled = _b.disabled, _c = _a.wheel, step = _c.step, limitsOnWheel = _c.limitsOnWheel;
+  event.preventDefault();
+  event.stopPropagation();
+  var delta = getDelta(event, null);
+  var newScale = handleCalculateZoom.call(this, delta, step, !event.ctrlKey);
+  if (scale === newScale)
+    return;
+  var bounds = handleCalculateBounds.call(this, newScale, !limitsOnWheel);
+  var _d = wheelMousePosition(event, contentComponent, scale), mouseX = _d.mouseX, mouseY = _d.mouseY;
+  var isLimitedToBounds = limitToBounds && (disabled || size === 0 || limitsOnWheel);
+  var _e = handleCalculatePositions.call(this, mouseX, mouseY, newScale, bounds, isLimitedToBounds), x = _e.x, y = _e.y;
+  this.bounds = bounds;
+  this.stateProvider.previousScale = scale;
+  this.stateProvider.scale = newScale;
+  this.stateProvider.positionX = x;
+  this.stateProvider.positionY = y;
+  this.applyTransformation();
+}
+function handleZoomToPoint(isDisabled, scale, mouseX, mouseY, event) {
+  var _a = this.stateProvider, contentComponent = _a.contentComponent, _b = _a.options, disabled = _b.disabled, minScale = _b.minScale, maxScale = _b.maxScale, limitToBounds = _b.limitToBounds, limitToWrapper = _b.limitToWrapper;
+  if (disabled || isDisabled)
+    return;
+  var newScale = checkZoomBounds(roundNumber(scale, 2), minScale, maxScale, null, null);
+  var bounds = handleCalculateBounds.call(this, newScale, limitToWrapper);
+  var mousePosX = mouseX;
+  var mousePosY = mouseY;
+  if (event) {
+    var mousePosition = wheelMousePosition(event, contentComponent, scale);
+    mousePosX = mousePosition.mouseX;
+    mousePosY = mousePosition.mouseY;
   }
-  var mouseX = clientX - startCoords.x;
-  var mouseY = clientY - startCoords.y;
-  var newPositionX = lockAxisX ? positionX : mouseX;
-  var newPositionY = lockAxisY ? positionY : mouseY;
+  var _c = handleCalculatePositions.call(this, mousePosX, mousePosY, newScale, bounds, limitToBounds), x = _c.x, y = _c.y;
   return {
-    x: newPositionX,
-    y: newPositionY
+    scale: newScale,
+    positionX: x,
+    positionY: y
   };
-};
-var getPaddingValue = function(contextInstance, size) {
-  var setup = contextInstance.setup, transformState = contextInstance.transformState;
-  var scale = transformState.scale;
-  var minScale = setup.minScale;
-  if (size > 0 && scale >= minScale) {
-    return size;
-  }
-  return 0;
-};
-var isVelocityCalculationAllowed = function(contextInstance) {
-  var mounted = contextInstance.mounted;
-  var _a = contextInstance.setup, disabled = _a.disabled, velocityAnimation = _a.velocityAnimation;
-  var scale = contextInstance.transformState.scale;
-  var disabledVelocity = velocityAnimation.disabled;
-  var isAllowed = !disabledVelocity || scale > 1 || !disabled || mounted;
-  if (!isAllowed)
-    return false;
-  return true;
-};
-var isVelocityAllowed = function(contextInstance) {
-  var mounted = contextInstance.mounted, velocity = contextInstance.velocity, bounds = contextInstance.bounds;
-  var _a = contextInstance.setup, disabled = _a.disabled, velocityAnimation = _a.velocityAnimation;
-  var scale = contextInstance.transformState.scale;
-  var disabledVelocity = velocityAnimation.disabled;
-  var isAllowed = !disabledVelocity || scale > 1 || !disabled || mounted;
-  if (!isAllowed)
-    return false;
-  if (!velocity || !bounds)
-    return false;
-  return true;
-};
-function getVelocityMoveTime(contextInstance, velocity) {
-  var velocityAnimation = contextInstance.setup.velocityAnimation;
-  var equalToMove = velocityAnimation.equalToMove, animationTime = velocityAnimation.animationTime, sensitivity = velocityAnimation.sensitivity;
-  if (equalToMove) {
-    return animationTime * velocity * sensitivity;
-  }
-  return animationTime;
 }
-function getVelocityPosition(newPosition, startPosition, currentPosition, isLocked, limitToBounds, minPosition, maxPosition, minTarget, maxTarget, step) {
-  if (limitToBounds) {
-    if (startPosition > maxPosition && currentPosition > maxPosition) {
-      var calculatedPosition = maxPosition + (newPosition - maxPosition) * step;
-      if (calculatedPosition > maxTarget)
-        return maxTarget;
-      if (calculatedPosition < maxPosition)
-        return maxPosition;
-      return calculatedPosition;
-    }
-    if (startPosition < minPosition && currentPosition < minPosition) {
-      var calculatedPosition = minPosition + (newPosition - minPosition) * step;
-      if (calculatedPosition < minTarget)
-        return minTarget;
-      if (calculatedPosition > minPosition)
-        return minPosition;
-      return calculatedPosition;
-    }
+function handlePaddingAnimation$1() {
+  var _a = this.stateProvider, scale = _a.scale, wrapperComponent = _a.wrapperComponent, _b = _a.options, minScale = _b.minScale, limitToBounds = _b.limitToBounds, _c = _a.scalePadding, disabled = _c.disabled, animationTime = _c.animationTime, animationType = _c.animationType;
+  var isDisabled = disabled || scale >= minScale;
+  if (scale >= 1 || limitToBounds) {
+    handlePanningAnimation.call(this);
   }
-  if (isLocked)
-    return startPosition;
-  return boundLimiter(newPosition, minPosition, maxPosition, limitToBounds);
+  if (isDisabled)
+    return;
+  var mouseX = wrapperComponent.offsetWidth / 2;
+  var mouseY = wrapperComponent.offsetHeight / 2;
+  var targetState = handleZoomToPoint.call(this, false, minScale, mouseX, mouseY, null);
+  animateComponent.call(this, {
+    targetState,
+    speed: animationTime,
+    type: animationType
+  });
 }
-function getSizeMultiplier(wrapperComponent, equalToMove) {
-  var defaultMultiplier = 1;
-  if (equalToMove) {
-    return Math.min(defaultMultiplier, wrapperComponent.offsetWidth / window.innerWidth);
+function handleDoubleClick(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  var _a = this.stateProvider, contentComponent = _a.contentComponent, scale = _a.scale, _b = _a.doubleClick, disabled = _b.disabled, mode = _b.mode, step = _b.step, animationTime = _b.animationTime, animationType = _b.animationType;
+  if (mode === "reset") {
+    return resetTransformations.call(this, event, animationTime);
   }
-  return defaultMultiplier;
+  var delta = mode === "zoomOut" ? -1 : 1;
+  var newScale = handleCalculateZoom.call(this, delta, step, void 0, void 0, true);
+  var _c = wheelMousePosition(event, contentComponent, scale), mouseX = _c.mouseX, mouseY = _c.mouseY;
+  var targetState = handleZoomToPoint.call(this, disabled, newScale, mouseX, mouseY);
+  if (targetState.scale === scale)
+    return;
+  var targetScale = handleCalculateZoom.call(this, delta, step, true, void 0, true);
+  var time = getButtonAnimationTime(targetScale, newScale, animationTime);
+  animateComponent.call(this, {
+    targetState,
+    speed: time,
+    type: animationType
+  });
 }
-function handleCalculateVelocity(contextInstance, position) {
-  var isAllowed = isVelocityCalculationAllowed(contextInstance);
-  if (!isAllowed) {
+function handleZoomControls(customDelta, customStep) {
+  var _a = this.stateProvider, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY, wrapperComponent = _a.wrapperComponent, zoomIn = _a.zoomIn, zoomOut = _a.zoomOut;
+  var wrapperWidth = wrapperComponent.offsetWidth;
+  var wrapperHeight = wrapperComponent.offsetHeight;
+  var mouseX = (wrapperWidth / 2 - positionX) / scale;
+  var mouseY = (wrapperHeight / 2 - positionY) / scale;
+  var newScale = handleCalculateZoom.call(this, customDelta, customStep, void 0, void 0, true);
+  var isZoomIn = newScale > scale;
+  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 === scale)
     return;
-  }
-  var lastMousePosition = contextInstance.lastMousePosition, velocityTime = contextInstance.velocityTime, setup = contextInstance.setup;
-  var wrapperComponent = contextInstance.wrapperComponent;
-  var equalToMove = setup.velocityAnimation.equalToMove;
-  var now = Date.now();
-  if (lastMousePosition && velocityTime && wrapperComponent) {
-    var sizeMultiplier = getSizeMultiplier(wrapperComponent, equalToMove);
-    var distanceX = position.x - lastMousePosition.x;
-    var distanceY = position.y - lastMousePosition.y;
-    var velocityX = distanceX / sizeMultiplier;
-    var velocityY = distanceY / sizeMultiplier;
-    var interval = now - velocityTime;
-    var speed = distanceX * distanceX + distanceY * distanceY;
-    var velocity = Math.sqrt(speed) / interval;
-    contextInstance.velocity = {
-      velocityX,
-      velocityY,
-      total: velocity
-    };
-  }
-  contextInstance.lastMousePosition = position;
-  contextInstance.velocityTime = now;
+  var targetScale = handleCalculateZoom.call(this, customDelta, customStep, true, void 0, true);
+  var time = getButtonAnimationTime(targetScale, newScale, animationSpeed);
+  animateComponent.call(this, {
+    targetState,
+    speed: time,
+    type: animationType
+  });
 }
-function handleVelocityPanning(contextInstance) {
-  var velocity = contextInstance.velocity, bounds = contextInstance.bounds, setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;
-  var isAllowed = isVelocityAllowed(contextInstance);
-  if (!isAllowed || !velocity || !bounds || !wrapperComponent) {
+function resetTransformations(animationSpeed) {
+  var _a = this.props.defaultValues, defaultScale = _a.defaultScale, defaultPositionX = _a.defaultPositionX, defaultPositionY = _a.defaultPositionY;
+  var _b = this.stateProvider, scale = _b.scale, positionX = _b.positionX, positionY = _b.positionY, reset = _b.reset, _c = _b.options, disabled = _c.disabled, limitToBounds = _c.limitToBounds, centerContent = _c.centerContent, limitToWrapper = _c.limitToWrapper;
+  if (disabled || reset.disabled)
+    return;
+  if (scale === defaultScale && positionX === defaultPositionX && positionY === defaultPositionY)
     return;
+  var speed = typeof animationSpeed === "number" ? animationSpeed : reset.animationTime;
+  var targetScale = checkIsNumber(defaultScale, initialState.scale);
+  var newPositionX = checkIsNumber(defaultPositionX, initialState.positionX);
+  var newPositionY = checkIsNumber(defaultPositionY, initialState.positionY);
+  if (limitToBounds && !limitToWrapper || centerContent) {
+    var bounds = handleCalculateBounds.call(this, targetScale, limitToWrapper);
+    newPositionX = bounds.minPositionX;
+    newPositionY = bounds.minPositionY;
   }
-  var velocityX = velocity.velocityX, velocityY = velocity.velocityY, total = velocity.total;
-  var maxPositionX = bounds.maxPositionX, minPositionX = bounds.minPositionX, maxPositionY = bounds.maxPositionY, minPositionY = bounds.minPositionY;
-  var limitToBounds = setup.limitToBounds, alignmentAnimation = setup.alignmentAnimation;
-  var zoomAnimation = setup.zoomAnimation, panning = setup.panning;
-  var lockAxisY = panning.lockAxisY, lockAxisX = panning.lockAxisX;
-  var animationType = zoomAnimation.animationType;
-  var sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY, velocityAlignmentTime = alignmentAnimation.velocityAlignmentTime;
-  var alignAnimationTime = velocityAlignmentTime;
-  var moveAnimationTime = getVelocityMoveTime(contextInstance, total);
-  var finalAnimationTime = Math.max(moveAnimationTime, alignAnimationTime);
-  var paddingValueX = getPaddingValue(contextInstance, sizeX);
-  var paddingValueY = getPaddingValue(contextInstance, sizeY);
-  var paddingX = paddingValueX * wrapperComponent.offsetWidth / 100;
-  var paddingY = paddingValueY * wrapperComponent.offsetHeight / 100;
-  var maxTargetX = maxPositionX + paddingX;
-  var minTargetX = minPositionX - paddingX;
-  var maxTargetY = maxPositionY + paddingY;
-  var minTargetY = minPositionY - paddingY;
-  var startState = contextInstance.transformState;
-  var startTime = new Date().getTime();
-  handleSetupAnimation(contextInstance, animationType, finalAnimationTime, function(step) {
-    var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-    var frameTime = new Date().getTime() - startTime;
-    var animationProgress = frameTime / alignAnimationTime;
-    var alignAnimation = animations[alignmentAnimation.animationType];
-    var alignStep = 1 - alignAnimation(Math.min(1, animationProgress));
-    var customStep = 1 - step;
-    var newPositionX = positionX + velocityX * customStep;
-    var newPositionY = positionY + velocityY * customStep;
-    var currentPositionX = getVelocityPosition(newPositionX, startState.positionX, positionX, lockAxisX, limitToBounds, minPositionX, maxPositionX, minTargetX, maxTargetX, alignStep);
-    var currentPositionY = getVelocityPosition(newPositionY, startState.positionY, positionY, lockAxisY, limitToBounds, minPositionY, maxPositionY, minTargetY, maxTargetY, alignStep);
-    if (positionX !== newPositionX || positionY !== newPositionY) {
-      contextInstance.setTransformState(scale, currentPositionX, currentPositionY);
-    }
+  var targetState = {
+    scale: targetScale,
+    positionX: newPositionX,
+    positionY: newPositionY
+  };
+  animateComponent.call(this, {
+    targetState,
+    speed,
+    type: reset.animationType
   });
 }
-function handlePanningStart(contextInstance, event) {
-  var scale = contextInstance.transformState.scale;
-  handleCancelAnimation(contextInstance);
-  handleCalculateBounds(contextInstance, scale);
-  if (event.touches) {
-    handleTouchPanningSetup(contextInstance, event);
-  } else {
-    handlePanningSetup(contextInstance, event);
-  }
+function getButtonAnimationTime(targetScale, newScale, time) {
+  return time * (newScale / targetScale);
 }
-function handlePanning(contextInstance, clientX, clientY) {
-  var startCoords = contextInstance.startCoords, setup = contextInstance.setup;
-  var _a = setup.alignmentAnimation, sizeX = _a.sizeX, sizeY = _a.sizeY;
-  if (!startCoords)
-    return;
-  var _b = getPanningClientPosition(contextInstance, clientX, clientY), x = _b.x, y = _b.y;
-  var paddingValueX = getPaddingValue(contextInstance, sizeX);
-  var paddingValueY = getPaddingValue(contextInstance, sizeY);
-  handleCalculateVelocity(contextInstance, {
-    x,
-    y
-  });
-  handleNewPosition(contextInstance, x, y, paddingValueX, paddingValueY);
+function round(number, decimal) {
+  var roundNumber2 = Math.pow(10, decimal);
+  return Math.round(number * roundNumber2) / roundNumber2;
 }
-function handlePanningEnd(contextInstance) {
-  if (contextInstance.isPanning) {
-    var velocityDisabled = contextInstance.setup.panning.velocityDisabled;
-    var velocity = contextInstance.velocity, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-    contextInstance.isPanning = false;
-    contextInstance.animate = false;
-    contextInstance.animation = null;
-    var wrapperRect = wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.getBoundingClientRect();
-    var contentRect = contentComponent === null || contentComponent === void 0 ? void 0 : contentComponent.getBoundingClientRect();
-    var wrapperWidth = (wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.width) || 0;
-    var wrapperHeight = (wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.height) || 0;
-    var contentWidth = (contentRect === null || contentRect === void 0 ? void 0 : contentRect.width) || 0;
-    var contentHeight = (contentRect === null || contentRect === void 0 ? void 0 : contentRect.height) || 0;
-    var isZoomed = wrapperWidth < contentWidth || wrapperHeight < contentHeight;
-    var shouldAnimate = !velocityDisabled && velocity && (velocity === null || velocity === void 0 ? void 0 : velocity.total) > 0.1 && isZoomed;
-    if (shouldAnimate) {
-      handleVelocityPanning(contextInstance);
-    } else {
-      handleAlignToBounds(contextInstance);
-    }
-  }
+function getCurrentDistance(event) {
+  return getDistance(event.touches[0], event.touches[1]);
 }
-function handleAlignToBounds(contextInstance) {
-  var scale = contextInstance.transformState.scale;
-  var _a = contextInstance.setup, minScale = _a.minScale, alignmentAnimation = _a.alignmentAnimation;
-  var disabled = alignmentAnimation.disabled, sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY, animationTime = alignmentAnimation.animationTime, animationType = alignmentAnimation.animationType;
-  var isDisabled = disabled || scale < minScale || !sizeX && !sizeY;
-  if (isDisabled)
-    return;
-  var targetState = handlePanToBounds(contextInstance);
-  if (targetState) {
-    animate(contextInstance, targetState, animationTime, animationType);
-  }
+function checkIfInfinite(number) {
+  return number === Infinity || number === -Infinity;
 }
-function handleAlignToScaleBounds(contextInstance, mousePositionX, mousePositionY) {
-  var scale = contextInstance.transformState.scale;
-  var wrapperComponent = contextInstance.wrapperComponent;
-  var _a = contextInstance.setup, minScale = _a.minScale, limitToBounds = _a.limitToBounds, zoomAnimation = _a.zoomAnimation;
-  var disabled = zoomAnimation.disabled, animationTime = zoomAnimation.animationTime, animationType = zoomAnimation.animationType;
-  var isDisabled = disabled || scale >= minScale;
-  if (scale >= 1 || limitToBounds) {
-    handleAlignToBounds(contextInstance);
-  }
-  if (isDisabled || !wrapperComponent || !contextInstance.mounted)
+function calculatePinchZoom(currentDistance, pinchStartDistance) {
+  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")
+    return console.error("Pinch touches distance was not provided");
+  if (currentDistance < 0)
     return;
-  var mouseX = mousePositionX || wrapperComponent.offsetWidth / 2;
-  var mouseY = mousePositionY || wrapperComponent.offsetHeight / 2;
-  var targetState = handleZoomToPoint(contextInstance, minScale, mouseX, mouseY);
-  if (targetState) {
-    animate(contextInstance, targetState, animationTime, animationType);
-  }
+  var touchProportion = currentDistance / pinchStartDistance;
+  var scaleDifference = touchProportion * this.pinchStartScale;
+  return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale, size, !disabled);
 }
-function handleZoomToPoint(contextInstance, scale, mouseX, mouseY) {
-  var _a = contextInstance.setup, minScale = _a.minScale, maxScale = _a.maxScale, limitToBounds = _a.limitToBounds;
-  var newScale = checkZoomBounds(roundNumber(scale, 2), minScale, maxScale, 0, false);
-  var bounds = handleCalculateBounds(contextInstance, newScale);
-  var _b = handleCalculateZoomPositions(contextInstance, mouseX, mouseY, newScale, bounds, limitToBounds), x = _b.x, y = _b.y;
+function calculateMidpoint(event, scale, contentComponent) {
+  var contentRect = contentComponent.getBoundingClientRect();
+  var touches = event.touches;
+  var firstPointX = round(touches[0].clientX - contentRect.left, 5);
+  var firstPointY = round(touches[0].clientY - contentRect.top, 5);
+  var secondPointX = round(touches[1].clientX - contentRect.left, 5);
+  var secondPointY = round(touches[1].clientY - contentRect.top, 5);
   return {
-    scale: newScale,
-    positionX: x,
-    positionY: y
+    mouseX: (firstPointX + secondPointX) / 2 / scale,
+    mouseY: (firstPointY + secondPointY) / 2 / scale
   };
 }
-var initialState = {
-  previousScale: 1,
-  scale: 1,
-  positionX: 0,
-  positionY: 0
-};
-var contextInitialState = __assign(__assign({}, initialState), {
-  setComponents: function() {
-    return void 0;
-  },
-  contextInstance: null
-});
-var initialSetup = {
-  disabled: false,
-  minPositionX: null,
-  maxPositionX: null,
-  minPositionY: null,
-  maxPositionY: null,
-  minScale: 1,
-  maxScale: 8,
-  limitToBounds: true,
-  centerZoomedOut: false,
-  centerOnInit: false,
-  wheel: {
-    step: 0.2,
-    disabled: false,
-    wheelDisabled: false,
-    touchPadDisabled: false,
-    activationKeys: [],
-    excluded: []
-  },
-  panning: {
-    disabled: false,
-    velocityDisabled: false,
-    lockAxisX: false,
-    lockAxisY: false,
-    activationKeys: [],
-    excluded: []
-  },
-  pinch: {
-    step: 5,
-    disabled: false,
-    excluded: []
-  },
-  doubleClick: {
-    disabled: false,
-    step: 0.7,
-    mode: "zoomIn",
-    animationType: "easeOut",
-    animationTime: 200,
-    excluded: []
-  },
-  zoomAnimation: {
-    disabled: false,
-    size: 0.4,
-    animationTime: 200,
-    animationType: "easeOut"
-  },
-  alignmentAnimation: {
-    disabled: false,
-    sizeX: 100,
-    sizeY: 100,
-    animationTime: 200,
-    velocityAlignmentTime: 400,
-    animationType: "easeOut"
-  },
-  velocityAnimation: {
-    disabled: false,
-    sensitivity: 1,
-    animationTime: 400,
-    animationType: "easeOut",
-    equalToMove: true
-  }
-};
-var createState = function(props) {
-  var _a, _b, _c, _d;
-  return {
-    previousScale: (_a = props.initialScale) !== null && _a !== void 0 ? _a : initialState.scale,
-    scale: (_b = props.initialScale) !== null && _b !== void 0 ? _b : initialState.scale,
-    positionX: (_c = props.initialPositionX) !== null && _c !== void 0 ? _c : initialState.positionX,
-    positionY: (_d = props.initialPositionY) !== null && _d !== void 0 ? _d : initialState.positionY
-  };
-};
-var createSetup = function(props) {
-  var newSetup = __assign({}, initialSetup);
-  Object.keys(props).forEach(function(key) {
-    var validValue = typeof props[key] !== "undefined";
-    var validParameter = typeof initialSetup[key] !== "undefined";
-    if (validParameter && validValue) {
-      var dataType = Object.prototype.toString.call(initialSetup[key]);
-      var isObject = dataType === "[object Object]";
-      var isArray = dataType === "[object Array]";
-      if (isObject) {
-        newSetup[key] = __assign(__assign({}, initialSetup[key]), props[key]);
-      } else if (isArray) {
-        newSetup[key] = __spreadArray(__spreadArray([], initialSetup[key]), props[key]);
-      } else {
-        newSetup[key] = props[key];
-      }
-    }
-  });
-  return newSetup;
-};
-var handleCalculateButtonZoom = function(contextInstance, delta, step) {
-  var scale = contextInstance.transformState.scale;
-  var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;
-  var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation;
-  var size = zoomAnimation.size;
-  if (!wrapperComponent) {
-    throw new Error("Wrapper is not mounted");
-  }
-  var targetScale = scale * Math.exp(delta * step);
-  var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, false);
-  return newScale;
-};
-function handleZoomToViewCenter(contextInstance, delta, step, animationTime, animationType) {
-  var wrapperComponent = contextInstance.wrapperComponent;
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  if (!wrapperComponent)
-    return console.error("No WrapperComponent found");
-  var wrapperWidth = wrapperComponent.offsetWidth;
-  var wrapperHeight = wrapperComponent.offsetHeight;
-  var mouseX = (wrapperWidth / 2 - positionX) / scale;
-  var mouseY = (wrapperHeight / 2 - positionY) / scale;
-  var newScale = handleCalculateButtonZoom(contextInstance, delta, step);
-  var targetState = handleZoomToPoint(contextInstance, newScale, mouseX, mouseY);
-  if (!targetState) {
-    return console.error("Error during zoom event. New transformation state was not calculated.");
+function handleZoomPinch(event) {
+  var _a = this.stateProvider, scale = _a.scale, _b = _a.options, limitToBounds = _b.limitToBounds, limitToWrapper = _b.limitToWrapper, _c = _a.scalePadding, disabled = _c.disabled, size = _c.size, limitsOnWheel = _a.wheel.limitsOnWheel, pinch = _a.pinch;
+  var contentComponent = this.state.contentComponent;
+  if (pinch.disabled || this.stateProvider.options.disabled)
+    return;
+  if (event.cancelable) {
+    event.preventDefault();
+    event.stopPropagation();
   }
-  animate(contextInstance, targetState, animationTime, animationType);
-}
-function resetTransformations(contextInstance, animationTime, animationType) {
-  var setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;
-  var limitToBounds = setup.limitToBounds;
-  var initialTransformation = createState(contextInstance.props);
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  if (!wrapperComponent)
+  if (this.pinchStartDistance === null)
     return;
-  var newBounds = calculateBounds(contextInstance, initialTransformation.scale);
-  var boundedPositions = getMouseBoundedPosition(initialTransformation.positionX, initialTransformation.positionY, newBounds, limitToBounds, 0, 0, wrapperComponent);
-  var newState = {
-    scale: initialTransformation.scale,
-    positionX: boundedPositions.x,
-    positionY: boundedPositions.y
-  };
-  if (scale === initialTransformation.scale && positionX === initialTransformation.positionX && positionY === initialTransformation.positionY) {
+  var _d = calculateMidpoint(event, scale, contentComponent), mouseX = _d.mouseX, mouseY = _d.mouseY;
+  if (checkIfInfinite(mouseX) || checkIfInfinite(mouseY))
+    return;
+  var currentDistance = getCurrentDistance(event);
+  var newScale = calculatePinchZoom.call(this, currentDistance, this.pinchStartDistance);
+  if (checkIfInfinite(newScale) || newScale === scale)
     return;
+  var bounds = handleCalculateBounds.call(this, newScale, limitToWrapper);
+  var isLimitedToBounds = limitToBounds && (disabled || size === 0 || limitsOnWheel);
+  var _e = handleCalculatePositions.call(this, mouseX, mouseY, newScale, bounds, isLimitedToBounds), x = _e.x, y = _e.y;
+  this.lastDistance = currentDistance;
+  this.stateProvider.positionX = x;
+  this.stateProvider.positionY = y;
+  this.stateProvider.scale = newScale;
+  this.stateProvider.previousScale = scale;
+  this.applyTransformation();
+}
+var throttleTime = 30;
+function velocityTimeSpeed(speed, animationTime) {
+  var velocityEqualToMove = this.stateProvider.pan.velocityEqualToMove;
+  if (velocityEqualToMove) {
+    return animationTime - animationTime / Math.max(1, speed);
   }
-  animate(contextInstance, newState, animationTime, animationType);
+  return animationTime;
 }
-function calculateZoomToNode(contextInstance, node, customZoom) {
-  var wrapperComponent = contextInstance.wrapperComponent;
-  var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, minScale = _a.minScale, maxScale = _a.maxScale;
-  if (!wrapperComponent)
-    return initialState;
-  var wrapperRect = wrapperComponent.getBoundingClientRect();
-  var nodeRect = getOffset(node);
-  var nodeLeft = nodeRect.x;
-  var nodeTop = nodeRect.y;
-  var nodeWidth = node.offsetWidth;
-  var nodeHeight = node.offsetHeight;
-  var scaleX = wrapperComponent.offsetWidth / nodeWidth;
-  var scaleY = wrapperComponent.offsetHeight / nodeHeight;
-  var newScale = checkZoomBounds(customZoom || Math.min(scaleX, scaleY), minScale, maxScale, 0, false);
-  var offsetX = (wrapperRect.width - nodeWidth * newScale) / 2;
-  var offsetY = (wrapperRect.height - nodeHeight * newScale) / 2;
-  var newPositionX = (wrapperRect.left - nodeLeft) * newScale + offsetX;
-  var newPositionY = (wrapperRect.top - nodeTop) * newScale + offsetY;
-  var bounds = calculateBounds(contextInstance, newScale);
-  var _b = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, 0, 0, wrapperComponent), x = _b.x, y = _b.y;
-  return {
-    positionX: x,
-    positionY: y,
-    scale: newScale
-  };
+function handleEnableVelocity() {
+  this.setState({
+    startAnimation: false
+  });
 }
-function getOffset(element) {
-  var el = element;
-  var offsetLeft = 0;
-  var offsetTop = 0;
-  while (el) {
-    offsetLeft += el.offsetLeft;
-    offsetTop += el.offsetTop;
-    el = el.offsetParent;
-  }
-  return {
-    x: offsetLeft,
-    y: offsetTop
-  };
+function handleFireVelocity() {
+  this.setState({
+    startAnimation: true
+  });
 }
-function isValidZoomNode(node) {
-  if (!node) {
-    console.error("Zoom node not found");
-    return false;
-  } else if ((node === null || node === void 0 ? void 0 : node.offsetWidth) === void 0 || (node === null || node === void 0 ? void 0 : node.offsetHeight) === void 0) {
-    console.error("Zoom node is not valid - it must contain offsetWidth and offsetHeight");
-    return false;
+function animateVelocity() {
+  var _this = this;
+  var _a = this.stateProvider, positionX = _a.positionX, positionY = _a.positionY, limitToBounds = _a.options.limitToBounds, _b = _a.pan, velocityBaseTime = _b.velocityBaseTime, lockAxisX = _b.lockAxisX, lockAxisY = _b.lockAxisY, velocityAnimationType = _b.velocityAnimationType, panReturnAnimationTime = _b.panReturnAnimationTime, panReturnAnimationType = _b.panReturnAnimationType, padding = _b.padding, paddingSize = _b.paddingSize, wrapperComponent = _a.wrapperComponent;
+  if (!this.mounted)
+    return;
+  if (!this.velocity || !this.bounds)
+    return handleDisableAnimation.call(this);
+  var _c = this.bounds, maxPositionX = _c.maxPositionX, minPositionX = _c.minPositionX, maxPositionY = _c.maxPositionY, minPositionY = _c.minPositionY;
+  var _d = this.velocity, velocityX = _d.velocityX, velocityY = _d.velocityY, velocity = _d.velocity;
+  var animationTime = velocityTimeSpeed.call(this, velocity, velocityBaseTime);
+  if (!animationTime) {
+    handlePanningAnimation.call(this);
+    return;
   }
-  return true;
-}
-var zoomIn = function(contextInstance) {
-  return function(step, animationTime, animationType) {
-    if (step === void 0) {
-      step = 0.5;
-    }
-    if (animationTime === void 0) {
-      animationTime = 300;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    handleZoomToViewCenter(contextInstance, 1, step, animationTime, animationType);
-  };
-};
-var zoomOut = function(contextInstance) {
-  return function(step, animationTime, animationType) {
-    if (step === void 0) {
-      step = 0.5;
-    }
-    if (animationTime === void 0) {
-      animationTime = 300;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    handleZoomToViewCenter(contextInstance, -1, step, animationTime, animationType);
-  };
-};
-var setTransform = function(contextInstance) {
-  return function(newPositionX, newPositionY, newScale, animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 300;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
+  var targetX = velocityX;
+  var targetY = velocityY;
+  var newAnimationTime = animationTime > panReturnAnimationTime ? animationTime : panReturnAnimationTime;
+  var paddingValue = padding ? paddingSize : 0;
+  var paddingX = wrapperComponent ? paddingValue * wrapperComponent.offsetWidth / 100 : 0;
+  var paddingY = wrapperComponent ? paddingValue * wrapperComponent.offsetHeight / 100 : 0;
+  var maxTargetX = maxPositionX + paddingX;
+  var minTargetX = minPositionX - paddingX;
+  var maxTargetY = maxPositionY + paddingY;
+  var minTargetY = minPositionY - paddingY;
+  var startPosition = checkPositionBounds(positionX, positionY, this.bounds, limitToBounds, paddingValue, wrapperComponent);
+  var startTime = new Date().getTime();
+  animate.call(this, velocityAnimationType, newAnimationTime, function(step) {
+    var frameTime = new Date().getTime() - startTime;
+    var animationProgress = frameTime / panReturnAnimationTime;
+    var returnAnimation = availableAnimations[panReturnAnimationType];
+    var customReturnStep = returnAnimation(animationProgress);
+    if (frameTime > panReturnAnimationTime || customReturnStep > 1 || customReturnStep === Infinity || customReturnStep === -Infinity)
+      customReturnStep = 1;
+    var currentPositionX = getPosition(lockAxisX, targetX, step, customReturnStep, minPositionX, maxPositionX, limitToBounds, positionX, startPosition.x, minTargetX, maxTargetX);
+    var currentPositionY = getPosition(lockAxisY, targetY, step, customReturnStep, minPositionY, maxPositionY, limitToBounds, positionY, startPosition.y, minTargetY, maxTargetY);
+    if (positionX !== currentPositionX || positionY !== currentPositionY) {
+      _this.stateProvider.positionX = currentPositionX;
+      _this.stateProvider.positionY = currentPositionY;
+      _this.applyTransformation();
     }
-    var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;
-    var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-    var disabled = contextInstance.setup.disabled;
-    if (disabled || !wrapperComponent || !contentComponent)
+  });
+}
+function calculateVelocityStart(event) {
+  var _this = this;
+  var _a = this.stateProvider, scale = _a.scale, disabled = _a.options.disabled, _b = _a.pan, velocity = _b.velocity, velocitySensitivity = _b.velocitySensitivity, velocityActiveScale = _b.velocityActiveScale, velocityMinSpeed = _b.velocityMinSpeed, wrapperComponent = _a.wrapperComponent;
+  if (!velocity || velocityActiveScale >= scale || disabled)
+    return;
+  handleEnableVelocity.call(this);
+  var now = Date.now();
+  if (this.lastMousePosition) {
+    var position_1 = getClientPosition(event);
+    if (!position_1)
+      return console.error("No mouse or touch position detected");
+    var clientX = position_1.clientX, clientY = position_1.clientY;
+    var distanceX = clientX - this.lastMousePosition.clientX;
+    var distanceY = clientY - this.lastMousePosition.clientY;
+    var interval = now - this.velocityTime;
+    var wrapperToWindowScaleX = 2 - wrapperComponent.offsetWidth / window.innerWidth;
+    var wrapperToWindowScaleY = 2 - wrapperComponent.offsetHeight / window.innerHeight;
+    var scaledX = 20 * Math.max(velocityMinSpeed, Math.min(2, wrapperToWindowScaleX));
+    var scaledY = 20 * Math.max(velocityMinSpeed, Math.min(2, wrapperToWindowScaleY));
+    var velocityX = distanceX / interval * velocitySensitivity * scale * scaledX;
+    var velocityY = distanceY / interval * velocitySensitivity * scale * scaledY;
+    var speed = distanceX * distanceX + distanceY * distanceY;
+    var velocity_1 = Math.sqrt(speed) / interval * velocitySensitivity;
+    if (this.velocity && velocity_1 < this.velocity.velocity && this.throttle)
       return;
-    var targetState = {
-      positionX: isNaN(newPositionX) ? positionX : newPositionX,
-      positionY: isNaN(newPositionY) ? positionY : newPositionY,
-      scale: isNaN(newScale) ? scale : newScale
-    };
-    animate(contextInstance, targetState, animationTime, animationType);
-  };
-};
-var resetTransform = function(contextInstance) {
-  return function(animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 200;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    resetTransformations(contextInstance, animationTime, animationType);
-  };
-};
-var centerView = function(contextInstance) {
-  return function(scale, animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 200;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    var transformState = contextInstance.transformState, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-    if (wrapperComponent && contentComponent) {
-      var targetState = getCenterPosition(scale || transformState.scale, wrapperComponent, contentComponent);
-      animate(contextInstance, targetState, animationTime, animationType);
-    }
-  };
-};
-var zoomToElement = function(contextInstance) {
-  return function(node, scale, animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 600;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    handleCancelAnimation(contextInstance);
-    var wrapperComponent = contextInstance.wrapperComponent;
-    var target = typeof node === "string" ? document.getElementById(node) : node;
-    if (wrapperComponent && isValidZoomNode(target) && target && wrapperComponent.contains(target)) {
-      var targetState = calculateZoomToNode(contextInstance, target, scale);
-      animate(contextInstance, targetState, animationTime, animationType);
-    }
-  };
-};
-var getContext = function(contextInstance) {
-  return {
-    instance: contextInstance,
-    state: contextInstance.transformState,
-    zoomIn: zoomIn(contextInstance),
-    zoomOut: zoomOut(contextInstance),
-    setTransform: setTransform(contextInstance),
-    resetTransform: resetTransform(contextInstance),
-    centerView: centerView(contextInstance),
-    zoomToElement: zoomToElement(contextInstance)
-  };
-};
-var passiveSupported = false;
-function makePassiveEventOption() {
-  try {
-    var options = {
-      get passive() {
-        passiveSupported = true;
-        return false;
-      }
+    this.velocity = {
+      velocityX,
+      velocityY,
+      velocity: velocity_1
     };
-    return options;
-  } catch (err) {
-    passiveSupported = false;
-    return passiveSupported;
+    if (this.throttle)
+      clearTimeout(this.throttle);
+    this.throttle = setTimeout(function() {
+      if (_this.mounted)
+        _this.throttle = false;
+    }, throttleTime);
   }
+  var position = getClientPosition(event);
+  this.lastMousePosition = position;
+  this.velocityTime = now;
 }
-var isExcludedNode = function(node, excluded) {
-  var targetTagName = node.tagName.toUpperCase();
-  var isExcludedTag = excluded.find(function(tag) {
-    return tag.toUpperCase() === targetTagName;
-  });
-  if (isExcludedTag)
-    return true;
-  var isExcludedClassName = excluded.find(function(className) {
-    return node.classList.contains(className);
-  });
-  if (isExcludedClassName)
-    return true;
-  return false;
-};
-var cancelTimeout = function(timeout) {
-  if (timeout) {
-    clearTimeout(timeout);
+function getPosition(isLocked, target, step, panReturnStep, minBound, maxBound, limitToBounds, offset, startPosition, minTarget, maxTarget) {
+  if (limitToBounds) {
+    if (startPosition > minBound && offset > maxBound) {
+      var newPosition = startPosition - (startPosition - maxBound) * panReturnStep;
+      if (newPosition > maxTarget)
+        return maxTarget;
+      if (newPosition < maxBound)
+        return maxBound;
+      return newPosition;
+    }
+    if (startPosition < minBound && offset < minBound) {
+      var newPosition = startPosition - (startPosition - minBound) * panReturnStep;
+      if (newPosition < minTarget)
+        return minTarget;
+      if (newPosition > minBound)
+        return minBound;
+      return newPosition;
+    }
   }
-};
-var getTransformStyles = function(x, y, scale) {
-  return "translate3d(" + x + "px, " + y + "px, 0) scale(" + scale + ")";
-};
-var getCenterPosition = function(scale, wrapperComponent, contentComponent) {
-  var contentWidth = contentComponent.offsetWidth * scale;
-  var contentHeight = contentComponent.offsetHeight * scale;
-  var centerPositionX = (wrapperComponent.offsetWidth - contentWidth) / 2;
-  var centerPositionY = (wrapperComponent.offsetHeight - contentHeight) / 2;
-  return {
-    scale,
-    positionX: centerPositionX,
-    positionY: centerPositionY
-  };
-};
-var isWheelAllowed = function(contextInstance, event) {
-  var _a = contextInstance.setup.wheel, disabled = _a.disabled, wheelDisabled = _a.wheelDisabled, touchPadDisabled = _a.touchPadDisabled, excluded = _a.excluded;
-  var isInitialized = contextInstance.isInitialized, isPanning = contextInstance.isPanning;
-  var target = event.target;
-  var isAllowed = isInitialized && !isPanning && !disabled && target;
-  if (!isAllowed)
-    return false;
-  if (wheelDisabled && !event.ctrlKey)
-    return false;
-  if (touchPadDisabled && event.ctrlKey)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  return true;
-};
-function getDelta(event, customDelta) {
-  var deltaY = event ? event.deltaY < 0 ? 1 : -1 : 0;
-  var delta = checkIsNumber(customDelta, deltaY);
-  return delta;
+  if (isLocked)
+    return startPosition;
+  var offsetPosition = offset + target * step;
+  return boundLimiter(offsetPosition, minBound, maxBound, limitToBounds);
 }
-function getMousePosition(event, contentComponent, scale) {
-  var contentRect = contentComponent.getBoundingClientRect();
-  var mouseX = 0;
-  var mouseY = 0;
-  if ("clientX" in event) {
-    mouseX = (event.clientX - contentRect.left) / scale;
-    mouseY = (event.clientY - contentRect.top) / scale;
-  } else {
-    var touch = event.touches[0];
-    mouseX = (touch.clientX - contentRect.left) / scale;
-    mouseY = (touch.clientY - contentRect.top) / scale;
-  }
-  if (isNaN(mouseX) || isNaN(mouseY))
-    console.error("No mouse or touch offset found");
-  return {
-    x: mouseX,
-    y: mouseY
-  };
+function makePassiveEventOption(passive) {
+  return passive;
 }
-var handleCalculateWheelZoom = function(contextInstance, delta, step, disablePadding, getTarget) {
-  var scale = contextInstance.transformState.scale;
-  var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;
-  var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation;
-  var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-  if (!wrapperComponent) {
-    throw new Error("Wrapper is not mounted");
-  }
-  var targetScale = scale + delta * (scale - scale * step) * step;
-  if (getTarget)
-    return targetScale;
-  var paddingEnabled = disablePadding ? false : !disabled;
-  var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, paddingEnabled);
-  return newScale;
-};
-var handleWheelZoomStop = function(contextInstance, event) {
-  var previousWheelEvent = contextInstance.previousWheelEvent;
-  var scale = contextInstance.transformState.scale;
-  var _a = contextInstance.setup, maxScale = _a.maxScale, minScale = _a.minScale;
-  if (!previousWheelEvent)
-    return false;
-  if (scale < maxScale || scale > minScale)
-    return true;
-  if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))
-    return true;
-  if (previousWheelEvent.deltaY > 0 && previousWheelEvent.deltaY < event.deltaY)
-    return true;
-  if (previousWheelEvent.deltaY < 0 && previousWheelEvent.deltaY > event.deltaY)
-    return true;
-  if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))
-    return true;
-  return false;
-};
-var isPinchStartAllowed = function(contextInstance, event) {
-  var _a = contextInstance.setup.pinch, disabled = _a.disabled, excluded = _a.excluded;
-  var isInitialized = contextInstance.isInitialized;
-  var target = event.target;
-  var isAllowed = isInitialized && !disabled && target;
-  if (!isAllowed)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  return true;
-};
-var isPinchAllowed = function(contextInstance) {
-  var disabled = contextInstance.setup.pinch.disabled;
-  var isInitialized = contextInstance.isInitialized, pinchStartDistance = contextInstance.pinchStartDistance;
-  var isAllowed = isInitialized && !disabled && pinchStartDistance;
-  if (!isAllowed)
-    return false;
-  return true;
-};
-var calculateTouchMidPoint = function(event, scale, contentComponent) {
-  var contentRect = contentComponent.getBoundingClientRect();
-  var touches = event.touches;
-  var firstPointX = roundNumber(touches[0].clientX - contentRect.left, 5);
-  var firstPointY = roundNumber(touches[0].clientY - contentRect.top, 5);
-  var secondPointX = roundNumber(touches[1].clientX - contentRect.left, 5);
-  var secondPointY = roundNumber(touches[1].clientY - contentRect.top, 5);
-  return {
-    x: (firstPointX + secondPointX) / 2 / scale,
-    y: (firstPointY + secondPointY) / 2 / scale
-  };
-};
-var getTouchDistance = function(event) {
-  return Math.sqrt(Math.pow(event.touches[0].pageX - event.touches[1].pageX, 2) + Math.pow(event.touches[0].pageY - event.touches[1].pageY, 2));
-};
-var calculatePinchZoom = function(contextInstance, currentDistance) {
-  var pinchStartScale = contextInstance.pinchStartScale, pinchStartDistance = contextInstance.pinchStartDistance, setup = contextInstance.setup;
-  var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation;
-  var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-  if (!pinchStartScale || pinchStartDistance === null || !currentDistance) {
-    throw new Error("Pinch touches distance was not provided");
-  }
-  if (currentDistance < 0) {
-    return contextInstance.transformState.scale;
-  }
-  var touchProportion = currentDistance / pinchStartDistance;
-  var scaleDifference = touchProportion * pinchStartScale;
-  return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale, size, !disabled);
+var propsList = ["previousScale", "scale", "positionX", "positionY", "defaultPositionX", "defaultPositionY", "defaultScale", "onWheelStart", "onWheel", "onWheelStop", "onPanningStart", "onPanning", "onPanningStop", "onPinchingStart", "onPinching", "onPinchingStop", "onZoomChange", "options", "wheel", "scalePadding", "pan", "pinch", "zoomIn", "zoomOut", "doubleClick", "reset"];
+var getValidPropsFromObject = function(props) {
+  return Object.keys(props).reduce(function(acc, key) {
+    if (propsList.includes(key)) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
 };
-var wheelStopEventTime = 160;
+var Context = React.createContext({});
+var wheelStopEventTimer = null;
+var wheelStopEventTime = 180;
+var wheelAnimationTimer = null;
 var wheelAnimationTime = 100;
-var handleWheelStart = function(contextInstance, event) {
-  var _a = contextInstance.props, onWheelStart = _a.onWheelStart, onZoomStart = _a.onZoomStart;
-  if (!contextInstance.wheelStopEventTimer) {
-    handleCancelAnimation(contextInstance);
-    handleCallback(getContext(contextInstance), event, onWheelStart);
-    handleCallback(getContext(contextInstance), event, onZoomStart);
-  }
-};
-var handleWheelZoom = function(contextInstance, event) {
-  var _a = contextInstance.props, onWheel = _a.onWheel, onZoom = _a.onZoom;
-  var contentComponent = contextInstance.contentComponent, setup = contextInstance.setup, transformState = contextInstance.transformState;
-  var scale = transformState.scale;
-  var limitToBounds = setup.limitToBounds, centerZoomedOut = setup.centerZoomedOut, zoomAnimation = setup.zoomAnimation, wheel = setup.wheel;
-  var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-  var step = wheel.step;
-  if (!contentComponent) {
-    throw new Error("Component not mounted");
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  var delta = getDelta(event, null);
-  var newScale = handleCalculateWheelZoom(contextInstance, delta, step, !event.ctrlKey);
-  if (scale === newScale)
-    return;
-  var bounds = handleCalculateBounds(contextInstance, newScale);
-  var mousePosition = getMousePosition(event, contentComponent, scale);
-  var isPaddingDisabled = disabled || size === 0 || centerZoomedOut;
-  var isLimitedToBounds = limitToBounds && isPaddingDisabled;
-  var _b = handleCalculateZoomPositions(contextInstance, mousePosition.x, mousePosition.y, newScale, bounds, isLimitedToBounds), x = _b.x, y = _b.y;
-  contextInstance.previousWheelEvent = event;
-  contextInstance.setTransformState(newScale, x, y);
-  handleCallback(getContext(contextInstance), event, onWheel);
-  handleCallback(getContext(contextInstance), event, onZoom);
-};
-var handleWheelStop = function(contextInstance, event) {
-  var _a = contextInstance.props, onWheelStop = _a.onWheelStop, onZoomStop = _a.onZoomStop;
-  cancelTimeout(contextInstance.wheelAnimationTimer);
-  contextInstance.wheelAnimationTimer = setTimeout(function() {
-    if (!contextInstance.mounted)
-      return;
-    handleAlignToScaleBounds(contextInstance, event.x, event.y);
-    contextInstance.wheelAnimationTimer = null;
-  }, wheelAnimationTime);
-  var hasStoppedZooming = handleWheelZoomStop(contextInstance, event);
-  if (hasStoppedZooming) {
-    cancelTimeout(contextInstance.wheelStopEventTimer);
-    contextInstance.wheelStopEventTimer = setTimeout(function() {
-      if (!contextInstance.mounted)
-        return;
-      contextInstance.wheelStopEventTimer = null;
-      handleCallback(getContext(contextInstance), event, onWheelStop);
-      handleCallback(getContext(contextInstance), event, onZoomStop);
-    }, wheelStopEventTime);
-  }
-};
-var handlePinchStart = function(contextInstance, event) {
-  var distance = getTouchDistance(event);
-  contextInstance.pinchStartDistance = distance;
-  contextInstance.lastDistance = distance;
-  contextInstance.pinchStartScale = contextInstance.transformState.scale;
-  contextInstance.isPanning = false;
-  handleCancelAnimation(contextInstance);
-};
-var handlePinchZoom = function(contextInstance, event) {
-  var contentComponent = contextInstance.contentComponent, pinchStartDistance = contextInstance.pinchStartDistance;
-  var scale = contextInstance.transformState.scale;
-  var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, centerZoomedOut = _a.centerZoomedOut, zoomAnimation = _a.zoomAnimation;
-  var disabled = zoomAnimation.disabled, size = zoomAnimation.size;
-  if (pinchStartDistance === null || !contentComponent)
-    return;
-  var midPoint = calculateTouchMidPoint(event, scale, contentComponent);
-  if (!isFinite(midPoint.x) || !isFinite(midPoint.y))
-    return;
-  var currentDistance = getTouchDistance(event);
-  var newScale = calculatePinchZoom(contextInstance, currentDistance);
-  if (newScale === scale)
-    return;
-  var bounds = handleCalculateBounds(contextInstance, newScale);
-  var isPaddingDisabled = disabled || size === 0 || centerZoomedOut;
-  var isLimitedToBounds = limitToBounds && isPaddingDisabled;
-  var _b = handleCalculateZoomPositions(contextInstance, midPoint.x, midPoint.y, newScale, bounds, isLimitedToBounds), x = _b.x, y = _b.y;
-  contextInstance.pinchMidpoint = midPoint;
-  contextInstance.lastDistance = currentDistance;
-  contextInstance.setTransformState(newScale, x, y);
-};
-var handlePinchStop = function(contextInstance) {
-  var pinchMidpoint = contextInstance.pinchMidpoint;
-  contextInstance.velocity = null;
-  contextInstance.lastDistance = null;
-  contextInstance.pinchMidpoint = null;
-  contextInstance.pinchStartScale = null;
-  contextInstance.pinchStartDistance = null;
-  handleAlignToScaleBounds(contextInstance, pinchMidpoint === null || pinchMidpoint === void 0 ? void 0 : pinchMidpoint.x, pinchMidpoint === null || pinchMidpoint === void 0 ? void 0 : pinchMidpoint.y);
-};
-function handleDoubleClick(contextInstance, event) {
-  var _a = contextInstance.setup.doubleClick, disabled = _a.disabled, mode = _a.mode, step = _a.step, animationTime = _a.animationTime, animationType = _a.animationType;
-  if (disabled)
-    return;
-  if (mode === "reset") {
-    return resetTransformations(contextInstance, animationTime, animationType);
-  }
-  var scale = contextInstance.transformState.scale;
-  var contentComponent = contextInstance.contentComponent;
-  if (!contentComponent)
-    return console.error("No ContentComponent found");
-  var delta = mode === "zoomOut" ? -1 : 1;
-  var newScale = handleCalculateButtonZoom(contextInstance, delta, step);
-  var mousePosition = getMousePosition(event, contentComponent, scale);
-  var targetState = handleZoomToPoint(contextInstance, newScale, mousePosition.x, mousePosition.y);
-  if (!targetState) {
-    return console.error("Error during zoom event. New transformation state was not calculated.");
-  }
-  animate(contextInstance, targetState, animationTime, animationType);
-}
-var isDoubleClickAllowed = function(contextInstance, event) {
-  var isInitialized = contextInstance.isInitialized, setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;
-  var _a = setup.doubleClick, disabled = _a.disabled, excluded = _a.excluded;
-  var target = event.target;
-  var isWrapperChild = wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(target);
-  var isAllowed = isInitialized && target && isWrapperChild && !disabled;
-  if (!isAllowed)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  if (!isAllowed)
-    return false;
-  return true;
-};
-var Context = React.createContext(contextInitialState);
-var TransformContext = function(_super) {
-  __extends(TransformContext2, _super);
-  function TransformContext2() {
+var StateProvider = function(_super) {
+  __extends(StateProvider2, _super);
+  function StateProvider2() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
     _this.mounted = true;
-    _this.transformState = createState(_this.props);
-    _this.setup = createSetup(_this.props);
-    _this.wrapperComponent = null;
-    _this.contentComponent = null;
-    _this.isInitialized = false;
-    _this.bounds = null;
-    _this.previousWheelEvent = null;
-    _this.wheelStopEventTimer = null;
-    _this.wheelAnimationTimer = null;
-    _this.isPanning = false;
+    _this.state = {
+      wrapperComponent: void 0,
+      contentComponent: void 0
+    };
+    _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.windowToWrapperScaleX = 0;
+    _this.windowToWrapperScaleY = 0;
     _this.startCoords = null;
-    _this.lastTouch = null;
-    _this.distance = null;
-    _this.lastDistance = null;
+    _this.isDown = false;
     _this.pinchStartDistance = null;
+    _this.lastDistance = null;
     _this.pinchStartScale = null;
-    _this.pinchMidpoint = null;
-    _this.velocity = null;
+    _this.distance = null;
+    _this.bounds = null;
     _this.velocityTime = null;
     _this.lastMousePosition = null;
-    _this.animate = false;
+    _this.velocity = null;
+    _this.offsetX = null;
+    _this.offsetY = null;
+    _this.throttle = false;
+    _this.previousWheelEvent = null;
+    _this.lastScale = null;
+    _this.animate = null;
     _this.animation = null;
     _this.maxBounds = null;
-    _this.pressedKeys = {};
-    _this.handleInitializeWrapperEvents = function(wrapper) {
-      var passive = makePassiveEventOption();
-      wrapper.addEventListener("wheel", _this.onWheelZoom, passive);
-      wrapper.addEventListener("dblclick", _this.onDoubleClick, passive);
-      wrapper.addEventListener("touchstart", _this.onTouchPanningStart, passive);
-      wrapper.addEventListener("touchmove", _this.onTouchPanning, passive);
-      wrapper.addEventListener("touchend", _this.onTouchPanningStop, passive);
-    };
-    _this.handleInitialize = function() {
-      var centerOnInit = _this.setup.centerOnInit;
-      _this.applyTransformation();
-      _this.forceUpdate();
-      if (centerOnInit) {
-        setTimeout(function() {
-          if (_this.mounted) {
-            _this.setCenter();
-          }
-        }, 50);
-        setTimeout(function() {
-          if (_this.mounted) {
-            _this.setCenter();
-          }
-        }, 100);
-        setTimeout(function() {
-          if (_this.mounted) {
-            _this.setCenter();
-          }
-        }, 200);
-      }
-    };
-    _this.onWheelZoom = function(event) {
-      var disabled = _this.setup.disabled;
-      if (disabled)
+    _this.handleWheel = function(event) {
+      var _a = _this.stateProvider, scale = _a.scale, _b = _a.wheel, disabled = _b.disabled, wheelEnabled = _b.wheelEnabled, touchPadEnabled = _b.touchPadEnabled;
+      var _c = _this.props, onWheelStart = _c.onWheelStart, onWheel = _c.onWheel, onWheelStop = _c.onWheelStop;
+      var _d = _this.state, wrapperComponent = _d.wrapperComponent, contentComponent = _d.contentComponent;
+      if (_this.isDown || disabled || _this.stateProvider.options.disabled || !wrapperComponent || !contentComponent)
         return;
-      var isAllowed = isWheelAllowed(_this, event);
-      if (!isAllowed)
+      if (!wheelEnabled && !event.ctrlKey)
         return;
-      var keysPressed = _this.isPressingKeys(_this.setup.wheel.activationKeys);
-      if (!keysPressed)
+      if (!touchPadEnabled && event.ctrlKey)
         return;
-      handleWheelStart(_this, event);
-      handleWheelZoom(_this, event);
-      handleWheelStop(_this, event);
+      if (!wheelStopEventTimer) {
+        _this.lastScale = scale;
+        handleDisableAnimation.call(_this);
+        handleCallback(onWheelStart, _this.getCallbackProps());
+      }
+      handleWheelZoom.call(_this, event);
+      handleCallback(onWheel, _this.getCallbackProps());
+      _this.applyTransformation(null, null, null);
+      _this.previousWheelEvent = event;
+      if (handleWheelStop(_this.previousWheelEvent, event, _this.stateProvider)) {
+        clearTimeout(wheelStopEventTimer);
+        wheelStopEventTimer = setTimeout(function() {
+          if (!_this.mounted)
+            return;
+          handleCallback(onWheelStop, _this.getCallbackProps());
+          wheelStopEventTimer = null;
+        }, wheelStopEventTime);
+      }
+      _this.animate = false;
+      _this.lastScale = _this.stateProvider.scale;
+      clearTimeout(wheelAnimationTimer);
+      wheelAnimationTimer = setTimeout(function() {
+        if (!_this.mounted)
+          return;
+        handlePaddingAnimation$1.call(_this, event);
+      }, wheelAnimationTime);
     };
-    _this.onPanningStart = function(event) {
-      var disabled = _this.setup.disabled;
-      var onPanningStart = _this.props.onPanningStart;
-      if (disabled)
-        return;
-      var isAllowed = isPanningStartAllowed(_this, event);
-      if (!isAllowed)
-        return;
-      var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);
-      if (!keysPressed)
-        return;
-      event.preventDefault();
-      event.stopPropagation();
-      handleCancelAnimation(_this);
-      handlePanningStart(_this, event);
-      handleCallback(getContext(_this), event, onPanningStart);
+    _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.onPanning = function(event) {
-      var disabled = _this.setup.disabled;
-      var onPanning = _this.props.onPanning;
-      if (disabled)
-        return;
-      var isAllowed = isPanningAllowed(_this);
-      if (!isAllowed)
+    _this.checkIsPanningActive = function(event) {
+      var disabled = _this.stateProvider.pan.disabled;
+      var _a = _this.state, wrapperComponent = _a.wrapperComponent, contentComponent = _a.contentComponent;
+      return !_this.isDown || disabled || _this.stateProvider.options.disabled || event.touches && (event.touches.length !== 1 || Math.abs(_this.startCoords.x - event.touches[0].clientX) < 1 || Math.abs(_this.startCoords.y - event.touches[0].clientY) < 1) || !wrapperComponent || !contentComponent;
+    };
+    _this.handleSetUpPanning = function(x, y) {
+      var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY;
+      _this.isDown = true;
+      _this.startCoords = {
+        x: x - positionX,
+        y: y - positionY
+      };
+      handleCallback(_this.props.onPanningStart, _this.getCallbackProps());
+    };
+    _this.handleStartPanning = function(event) {
+      var _a = _this.stateProvider, wrapperComponent = _a.wrapperComponent, scale = _a.scale, _b = _a.options, minScale = _b.minScale, maxScale = _b.maxScale, limitToWrapper = _b.limitToWrapper, disabled = _a.pan.disabled;
+      var target = event.target, touches = event.touches;
+      if (disabled || _this.stateProvider.options.disabled || wrapperComponent && !wrapperComponent.contains(target) || _this.checkPanningTarget(event) || scale < minScale || scale > maxScale)
         return;
-      var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);
-      if (!keysPressed)
+      handleDisableAnimation.call(_this);
+      _this.bounds = handleCalculateBounds.call(_this, scale, limitToWrapper);
+      if (touches && touches.length === 1) {
+        _this.handleSetUpPanning(touches[0].clientX, touches[0].clientY);
+      }
+      if (!touches) {
+        _this.handleSetUpPanning(event.clientX, event.clientY);
+      }
+    };
+    _this.handlePanning = function(event) {
+      if (_this.isDown)
+        event.preventDefault();
+      if (_this.checkIsPanningActive(event))
         return;
-      event.preventDefault();
       event.stopPropagation();
-      handlePanning(_this, event.clientX, event.clientY);
-      handleCallback(getContext(_this), event, onPanning);
+      calculateVelocityStart.call(_this, event);
+      handlePanning.call(_this, event);
+      handleCallback(_this.props.onPanning, _this.getCallbackProps());
     };
-    _this.onPanningStop = function(event) {
-      var onPanningStop = _this.props.onPanningStop;
-      if (_this.isPanning) {
-        handlePanningEnd(_this);
-        handleCallback(getContext(_this), event, onPanningStop);
+    _this.handleStopPanning = function() {
+      if (_this.isDown) {
+        _this.isDown = false;
+        _this.animate = false;
+        _this.animation = false;
+        handleFireVelocity.call(_this);
+        handleCallback(_this.props.onPanningStop, _this.getCallbackProps());
+        var _a = _this.stateProvider, velocity = _a.pan.velocity, scale = _a.scale;
+        if (_this.velocity && velocity && scale > 1) {
+          animateVelocity.call(_this);
+        } else {
+          handlePanningAnimation.call(_this);
+        }
       }
     };
-    _this.onPinchStart = function(event) {
-      var disabled = _this.setup.disabled;
-      var _a = _this.props, onPinchingStart = _a.onPinchingStart, onZoomStart = _a.onZoomStart;
-      if (disabled)
-        return;
-      var isAllowed = isPinchStartAllowed(_this, event);
-      if (!isAllowed)
-        return;
-      handlePinchStart(_this, event);
-      handleCancelAnimation(_this);
-      handleCallback(getContext(_this), event, onPinchingStart);
-      handleCallback(getContext(_this), event, onZoomStart);
-    };
-    _this.onPinch = function(event) {
-      var disabled = _this.setup.disabled;
-      var _a = _this.props, onPinching = _a.onPinching, onZoom = _a.onZoom;
-      if (disabled)
-        return;
-      var isAllowed = isPinchAllowed(_this);
-      if (!isAllowed)
-        return;
+    _this.handlePinchStart = function(event) {
+      var scale = _this.stateProvider.scale;
       event.preventDefault();
       event.stopPropagation();
-      handlePinchZoom(_this, event);
-      handleCallback(getContext(_this), event, onPinching);
-      handleCallback(getContext(_this), event, onZoom);
+      handleDisableAnimation.call(_this);
+      var distance = getDistance(event.touches[0], event.touches[1]);
+      _this.pinchStartDistance = distance;
+      _this.lastDistance = distance;
+      _this.pinchStartScale = scale;
+      _this.isDown = false;
+      handleCallback(_this.props.onPinchingStart, _this.getCallbackProps());
     };
-    _this.onPinchStop = function(event) {
-      var _a = _this.props, onPinchingStop = _a.onPinchingStop, onZoomStop = _a.onZoomStop;
-      if (_this.pinchStartScale) {
-        handlePinchStop(_this);
-        handleCallback(getContext(_this), event, onPinchingStop);
-        handleCallback(getContext(_this), event, onZoomStop);
+    _this.handlePinch = function(event) {
+      _this.isDown = false;
+      handleZoomPinch.call(_this, event);
+      handleCallback(_this.props.onPinching, _this.getCallbackProps());
+    };
+    _this.handlePinchStop = function() {
+      if (typeof _this.pinchStartScale === "number") {
+        _this.isDown = false;
+        _this.velocity = null;
+        _this.lastDistance = null;
+        _this.pinchStartScale = null;
+        _this.pinchStartDistance = null;
+        handlePaddingAnimation$1.call(_this);
+        handleCallback(_this.props.onPinchingStop, _this.getCallbackProps());
       }
     };
-    _this.onTouchPanningStart = function(event) {
-      var disabled = _this.setup.disabled;
-      var onPanningStart = _this.props.onPanningStart;
-      if (disabled)
+    _this.handleTouchStart = function(event) {
+      var _a = _this.stateProvider, wrapperComponent = _a.wrapperComponent, contentComponent = _a.contentComponent, scale = _a.scale, _b = _a.options, disabled = _b.disabled, minScale = _b.minScale;
+      var touches = event.touches;
+      if (disabled || !wrapperComponent || !contentComponent || scale < minScale)
         return;
-      var isAllowed = isPanningStartAllowed(_this, event);
-      if (!isAllowed)
+      handleDisableAnimation.call(_this);
+      if (touches && touches.length === 1)
+        return _this.handleStartPanning(event);
+      if (touches && touches.length === 2)
+        return _this.handlePinchStart(event);
+    };
+    _this.handleTouch = function(event) {
+      var _a = _this.stateProvider, pan = _a.pan, pinch = _a.pinch, options = _a.options;
+      if (options.disabled)
         return;
-      var isDoubleTap = _this.lastTouch && +new Date() - _this.lastTouch < 200;
-      if (isDoubleTap && event.touches.length === 1) {
-        _this.onDoubleClick(event);
-      } else {
-        _this.lastTouch = +new Date();
-        handleCancelAnimation(_this);
-        var touches = event.touches;
-        var isPanningAction = touches.length === 1;
-        var isPinchAction = touches.length === 2;
-        if (isPanningAction) {
-          handleCancelAnimation(_this);
-          handlePanningStart(_this, event);
-          handleCallback(getContext(_this), event, onPanningStart);
-        }
-        if (isPinchAction) {
-          _this.onPinchStart(event);
-        }
-      }
+      if (!pan.disabled && event.touches.length === 1)
+        return _this.handlePanning(event);
+      if (!pinch.disabled && event.touches.length === 2)
+        return _this.handlePinch(event);
     };
-    _this.onTouchPanning = function(event) {
-      var disabled = _this.setup.disabled;
-      var onPanning = _this.props.onPanning;
-      if (_this.isPanning && event.touches.length === 1) {
-        if (disabled)
-          return;
-        var isAllowed = isPanningAllowed(_this);
-        if (!isAllowed)
-          return;
-        event.preventDefault();
-        event.stopPropagation();
-        var touch = event.touches[0];
-        handlePanning(_this, touch.clientX, touch.clientY);
-        handleCallback(getContext(_this), event, onPanning);
-      } else if (event.touches.length > 1) {
-        _this.onPinch(event);
-      }
+    _this.handleTouchStop = function() {
+      _this.handleStopPanning();
+      _this.handlePinchStop();
     };
-    _this.onTouchPanningStop = function(event) {
-      _this.onPanningStop(event);
-      _this.onPinchStop(event);
+    _this.zoomIn = function(event) {
+      var _a = _this.stateProvider, _b = _a.zoomIn, disabled = _b.disabled, step = _b.step, options = _a.options;
+      var _c = _this.state, wrapperComponent = _c.wrapperComponent, contentComponent = _c.contentComponent;
+      if (!event)
+        throw Error("Zoom in function requires event prop");
+      if (disabled || options.disabled || !wrapperComponent || !contentComponent)
+        return;
+      handleZoomControls.call(_this, 1, step);
     };
-    _this.onDoubleClick = function(event) {
-      var disabled = _this.setup.disabled;
-      if (disabled)
+    _this.zoomOut = function(event) {
+      var _a = _this.stateProvider, _b = _a.zoomOut, disabled = _b.disabled, step = _b.step, options = _a.options;
+      var _c = _this.state, wrapperComponent = _c.wrapperComponent, contentComponent = _c.contentComponent;
+      if (!event)
+        throw Error("Zoom out function requires event prop");
+      if (disabled || options.disabled || !wrapperComponent || !contentComponent)
         return;
-      var isAllowed = isDoubleClickAllowed(_this, event);
-      if (!isAllowed)
+      handleZoomControls.call(_this, -1, step);
+    };
+    _this.handleDbClick = function(event) {
+      var _a = _this.stateProvider, options = _a.options, _b = _a.doubleClick, disabled = _b.disabled, step = _b.step;
+      var _c = _this.state, wrapperComponent = _c.wrapperComponent, contentComponent = _c.contentComponent;
+      if (!event)
+        throw Error("Double click function requires event prop");
+      if (disabled || options.disabled || !wrapperComponent || !contentComponent)
         return;
-      handleDoubleClick(_this, event);
+      handleDoubleClick.call(_this, event, 1, step);
     };
-    _this.clearPanning = function(event) {
-      if (_this.isPanning) {
-        _this.onPanningStop(event);
+    _this.setScale = function(newScale, speed, type) {
+      if (speed === void 0) {
+        speed = 200;
+      }
+      if (type === void 0) {
+        type = "easeOut";
       }
+      var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale, disabled = _a.options.disabled;
+      var _b = _this.state, wrapperComponent = _b.wrapperComponent, contentComponent = _b.contentComponent;
+      if (disabled || !wrapperComponent || !contentComponent)
+        return;
+      var targetState = {
+        positionX,
+        positionY,
+        scale: isNaN(newScale) ? scale : newScale
+      };
+      animateComponent.call(_this, {
+        targetState,
+        speed,
+        type
+      });
     };
-    _this.setKeyPressed = function(e) {
-      _this.pressedKeys[e.key] = true;
+    _this.setPositionX = function(newPosX, speed, type) {
+      if (speed === void 0) {
+        speed = 200;
+      }
+      if (type === void 0) {
+        type = "easeOut";
+      }
+      var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale, _b = _a.options, disabled = _b.disabled, transformEnabled = _b.transformEnabled;
+      var _c = _this.state, wrapperComponent = _c.wrapperComponent, contentComponent = _c.contentComponent;
+      if (disabled || !transformEnabled || !wrapperComponent || !contentComponent)
+        return;
+      var targetState = {
+        positionX: isNaN(newPosX) ? positionX : newPosX,
+        positionY,
+        scale
+      };
+      animateComponent.call(_this, {
+        targetState,
+        speed,
+        type
+      });
     };
-    _this.setKeyUnPressed = function(e) {
-      _this.pressedKeys[e.key] = false;
+    _this.setPositionY = function(newPosY, speed, type) {
+      if (speed === void 0) {
+        speed = 200;
+      }
+      if (type === void 0) {
+        type = "easeOut";
+      }
+      var _a = _this.stateProvider, positionX = _a.positionX, scale = _a.scale, positionY = _a.positionY, _b = _a.options, disabled = _b.disabled, transformEnabled = _b.transformEnabled;
+      var _c = _this.state, wrapperComponent = _c.wrapperComponent, contentComponent = _c.contentComponent;
+      if (disabled || !transformEnabled || !wrapperComponent || !contentComponent)
+        return;
+      var targetState = {
+        positionX,
+        positionY: isNaN(newPosY) ? positionY : newPosY,
+        scale
+      };
+      animateComponent.call(_this, {
+        targetState,
+        speed,
+        type
+      });
     };
-    _this.isPressingKeys = function(keys) {
-      if (!keys.length) {
-        return true;
+    _this.setTransform = function(newPosX, newPosY, newScale, speed, type) {
+      if (speed === void 0) {
+        speed = 200;
       }
-      return Boolean(keys.find(function(key) {
-        return _this.pressedKeys[key];
-      }));
+      if (type === void 0) {
+        type = "easeOut";
+      }
+      var _a = _this.stateProvider, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale, _b = _a.options, disabled = _b.disabled, transformEnabled = _b.transformEnabled;
+      var _c = _this.state, wrapperComponent = _c.wrapperComponent, contentComponent = _c.contentComponent;
+      if (disabled || !transformEnabled || !wrapperComponent || !contentComponent)
+        return;
+      var targetState = {
+        positionX: isNaN(newPosX) ? positionX : newPosX,
+        positionY: isNaN(newPosY) ? positionY : newPosY,
+        scale: isNaN(newScale) ? scale : newScale
+      };
+      animateComponent.call(_this, {
+        targetState,
+        speed,
+        type
+      });
     };
-    _this.setComponents = function(wrapperComponent, contentComponent) {
-      _this.wrapperComponent = wrapperComponent;
-      _this.contentComponent = contentComponent;
-      handleCalculateBounds(_this, _this.transformState.scale);
-      _this.handleInitializeWrapperEvents(wrapperComponent);
-      _this.handleInitialize();
-      _this.handleRef();
-      _this.isInitialized = true;
-      handleCallback(getContext(_this), void 0, _this.props.onInit);
+    _this.resetTransform = function() {
+      var _a = _this.stateProvider.options, disabled = _a.disabled, transformEnabled = _a.transformEnabled;
+      if (disabled || !transformEnabled)
+        return;
+      resetTransformations.call(_this);
     };
-    _this.setTransformState = function(scale, positionX, positionY) {
-      if (!isNaN(scale) && !isNaN(positionX) && !isNaN(positionY)) {
-        if (scale !== _this.transformState.scale) {
-          _this.transformState.previousScale = _this.transformState.scale;
-          _this.transformState.scale = scale;
-        }
-        _this.transformState.positionX = positionX;
-        _this.transformState.positionY = positionY;
-        _this.applyTransformation();
-      } else {
-        console.error("Detected NaN set state values");
-      }
+    _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();
     };
-    _this.setCenter = function() {
-      if (_this.wrapperComponent && _this.contentComponent) {
-        var targetState = getCenterPosition(_this.transformState.scale, _this.wrapperComponent, _this.contentComponent);
-        _this.setTransformState(targetState.scale, targetState.positionX, targetState.positionY);
-      }
+    _this.setWrapperComponent = function(wrapperComponent) {
+      _this.setState({
+        wrapperComponent
+      });
     };
-    _this.applyTransformation = function() {
-      if (!_this.mounted || !_this.contentComponent)
+    _this.setContentComponent = function(contentComponent) {
+      _this.setState({
+        contentComponent
+      }, function() {
+        var _a = _this.stateProvider, wrapperComponent = _a.wrapperComponent, _b = _a.options, centerContent = _b.centerContent, limitToBounds = _b.limitToBounds, limitToWrapper = _b.limitToWrapper, scale = _a.scale;
+        var _c = _this.props.defaultValues, positionX = _c.positionX, positionY = _c.positionY;
+        if (limitToBounds && !limitToWrapper || centerContent && !positionX && !positionY) {
+          var transform = "translate(25%, 25%) scale(" + scale + ")";
+          contentComponent.style.transform = transform;
+          contentComponent.style.WebkitTransform = transform;
+          _this.forceUpdate();
+          var startTime_1 = new Date().getTime();
+          var maxTimeWait_1 = 2e3;
+          var interval_1 = setInterval(function() {
+            if (wrapperComponent.offsetWidth) {
+              var bounds = handleCalculateBounds.call(_this, scale, false);
+              _this.stateProvider.positionX = bounds.minPositionX;
+              _this.stateProvider.positionY = bounds.minPositionY;
+              _this.applyTransformation(null, null, null);
+              clearInterval(interval_1);
+              interval_1 = null;
+            } else if (new Date().getTime() - startTime_1 > maxTimeWait_1) {
+              clearInterval(interval_1);
+              interval_1 = null;
+            }
+          }, 20);
+        } else {
+          _this.applyTransformation(null, null, null);
+        }
+      });
+    };
+    _this.applyTransformation = function(newScale, posX, posY) {
+      if (!_this.mounted)
         return;
-      var _a = _this.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-      var transform = getTransformStyles(positionX, positionY, scale);
-      _this.contentComponent.style.transform = transform;
-      _this.handleRef();
+      var contentComponent = _this.state.contentComponent;
+      var onZoomChange = _this.props.onZoomChange;
+      var _a = _this.stateProvider, previousScale = _a.previousScale, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
+      if (!contentComponent)
+        return console.error("There is no content component");
+      var transform = "translate(" + (posX || positionX) + "px, " + (posY || positionY) + "px) scale(" + (newScale || scale) + ")";
+      contentComponent.style.transform = transform;
+      contentComponent.style.WebkitTransform = transform;
+      _this.forceUpdate();
+      if (onZoomChange && previousScale !== scale) {
+        handleCallback(onZoomChange, _this.getCallbackProps());
+      }
     };
-    _this.handleRef = function() {
-      _this.props.setRef(getContext(_this));
+    _this.getCallbackProps = function() {
+      return getValidPropsFromObject(_this.stateProvider);
     };
     return _this;
   }
-  TransformContext2.prototype.componentDidMount = function() {
-    var passive = makePassiveEventOption();
-    window.addEventListener("mousedown", this.onPanningStart, passive);
-    window.addEventListener("mousemove", this.onPanning, passive);
-    window.addEventListener("mouseup", this.onPanningStop, passive);
-    document.addEventListener("mouseleave", this.clearPanning, passive);
-    window.addEventListener("keyup", this.setKeyUnPressed, passive);
-    window.addEventListener("keydown", this.setKeyPressed, passive);
-    this.handleRef();
+  StateProvider2.prototype.componentDidMount = function() {
+    var passiveOption = makePassiveEventOption(false);
+    window.addEventListener("mousedown", this.handleStartPanning, passiveOption);
+    window.addEventListener("mousemove", this.handlePanning, passiveOption);
+    window.addEventListener("mouseup", this.handleStopPanning, passiveOption);
   };
-  TransformContext2.prototype.componentWillUnmount = function() {
-    var passive = makePassiveEventOption();
-    window.removeEventListener("mousedown", this.onPanningStart, passive);
-    window.removeEventListener("mousemove", this.onPanning, passive);
-    window.removeEventListener("mouseup", this.onPanningStop, passive);
-    window.removeEventListener("keyup", this.setKeyUnPressed, passive);
-    window.removeEventListener("keydown", this.setKeyPressed, passive);
-    handleCancelAnimation(this);
+  StateProvider2.prototype.componentWillUnmount = function() {
+    var passiveOption = makePassiveEventOption(false);
+    window.removeEventListener("mousedown", this.handleStartPanning, passiveOption);
+    window.removeEventListener("mousemove", this.handlePanning, passiveOption);
+    window.removeEventListener("mouseup", this.handleStopPanning, passiveOption);
+    handleDisableAnimation.call(this);
   };
-  TransformContext2.prototype.componentDidUpdate = function(oldProps) {
-    if (oldProps !== this.props) {
-      handleCalculateBounds(this, this.transformState.scale);
-      this.setup = createSetup(this.props);
+  StateProvider2.prototype.componentDidUpdate = function(oldProps, oldState) {
+    var _a = this.state, wrapperComponent = _a.wrapperComponent, contentComponent = _a.contentComponent;
+    var dynamicValues = this.props.dynamicValues;
+    if (!oldState.contentComponent && contentComponent) {
+      this.stateProvider.contentComponent = contentComponent;
+    }
+    if (!oldState.wrapperComponent && wrapperComponent && wrapperComponent !== void 0) {
+      this.stateProvider.wrapperComponent = wrapperComponent;
+      this.windowToWrapperScaleX = getWindowScaleX(wrapperComponent);
+      this.windowToWrapperScaleY = getWindowScaleY(wrapperComponent);
+      var passiveOption = makePassiveEventOption(false);
+      wrapperComponent.addEventListener("wheel", this.handleWheel, passiveOption);
+      wrapperComponent.addEventListener("dblclick", this.handleDbClick, passiveOption);
+      wrapperComponent.addEventListener("touchstart", this.handleTouchStart, passiveOption);
+      wrapperComponent.addEventListener("touchmove", this.handleTouch, passiveOption);
+      wrapperComponent.addEventListener("touchend", this.handleTouchStop, passiveOption);
+    }
+    if (wrapperComponent && contentComponent || oldProps.dynamicValues !== dynamicValues) {
+      this.maxBounds = handleCalculateBounds.call(this, this.stateProvider.scale, this.stateProvider.options.limitToWrapper);
+    }
+    if (oldProps.dynamicValues && oldProps.dynamicValues !== dynamicValues) {
+      this.animation = null;
+      this.stateProvider = __assign(__assign({}, this.stateProvider), mergeProps(this.stateProvider, dynamicValues));
+      this.applyTransformation(null, null, null);
     }
   };
-  TransformContext2.prototype.render = function() {
-    var value = getContext(this);
+  StateProvider2.prototype.render = function() {
+    var _a = this.state, wrapperComponent = _a.wrapperComponent, contentComponent = _a.contentComponent;
+    var value = {
+      loaded: Boolean(wrapperComponent && contentComponent),
+      state: this.getCallbackProps(),
+      dispatch: {
+        setScale: this.setScale,
+        setPositionX: this.setPositionX,
+        setPositionY: this.setPositionY,
+        zoomIn: this.zoomIn,
+        zoomOut: this.zoomOut,
+        setTransform: this.setTransform,
+        resetTransform: this.resetTransform,
+        setDefaultState: this.setDefaultState
+      },
+      nodes: {
+        setWrapperComponent: this.setWrapperComponent,
+        setContentComponent: this.setContentComponent
+      }
+    };
     var children = this.props.children;
-    var content = typeof children === "function" ? children(value) : children;
+    var content = typeof children === "function" ? children(__assign(__assign({}, value.state), value.dispatch)) : children;
     return /* @__PURE__ */ jsx(Context.Provider, {
-      value: __assign(__assign({}, this.transformState), {
-        setComponents: this.setComponents,
-        contextInstance: this
-      }),
+      value,
       children: content
     });
   };
-  return TransformContext2;
+  return StateProvider2;
 }(Component);
-var TransformWrapper = React.forwardRef(function(props, ref) {
-  var _a = useState(null), innerRef = _a[0], setRef = _a[1];
-  useImperativeHandle(ref, function() {
-    return innerRef;
-  }, [innerRef]);
-  return /* @__PURE__ */ jsx(TransformContext, __spreadValues({}, __assign({}, props, {
-    setRef
-  })));
-});
-function styleInject(css, ref) {
+var TransformWrapper = function(_a) {
+  var children = _a.children, defaultPositionX = _a.defaultPositionX, defaultPositionY = _a.defaultPositionY, defaultScale = _a.defaultScale, onWheelStart = _a.onWheelStart, onWheel = _a.onWheel, onWheelStop = _a.onWheelStop, onPanningStart = _a.onPanningStart, onPanning = _a.onPanning, onPanningStop = _a.onPanningStop, onPinchingStart = _a.onPinchingStart, onPinching = _a.onPinching, onPinchingStop = _a.onPinchingStop, onZoomChange = _a.onZoomChange, rest = __rest(_a, ["children", "defaultPositionX", "defaultPositionY", "defaultScale", "onWheelStart", "onWheel", "onWheelStop", "onPanningStart", "onPanning", "onPanningStop", "onPinchingStart", "onPinching", "onPinchingStop", "onZoomChange"]);
+  var props = __assign({}, rest);
+  if (props.options && props.options.limitToWrapper) {
+    props.options.limitToBounds = true;
+  }
+  return /* @__PURE__ */ jsx(StateProvider, {
+    defaultValues: deleteUndefinedProps({
+      positionX: defaultPositionX,
+      positionY: defaultPositionY,
+      scale: defaultScale
+    }),
+    dynamicValues: deleteUndefinedProps(getValidPropsFromObject(props)),
+    onWheelStart,
+    onWheel,
+    onWheelStop,
+    onPanningStart,
+    onPanning,
+    onPanningStop,
+    onPinchingStart,
+    onPinching,
+    onPinchingStop,
+    onZoomChange,
+    children
+  });
+};
+function styleInject(css2, ref) {
   if (ref === void 0)
     ref = {};
   var insertAt = ref.insertAt;
-  if (!css || typeof document === "undefined") {
+  if (!css2 || typeof document === "undefined") {
     return;
   }
   var head = document.head || document.getElementsByTagName("head")[0];
@@ -1657,41 +1429,51 @@ function styleInject(css, ref) {
     head.appendChild(style);
   }
   if (style.styleSheet) {
-    style.styleSheet.cssText = css;
+    style.styleSheet.cssText = css2;
   } else {
-    style.appendChild(document.createTextNode(css));
+    style.appendChild(document.createTextNode(css2));
   }
 }
-var css_248z = ".transform-component-module_wrapper__1_Fgj {\n  position: relative;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  overflow: hidden;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -khtml-user-select: none; /* Konqueror HTML */\n  -moz-user-select: none; /* Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none;\n  margin: 0;\n  padding: 0;\n}\n.transform-component-module_content__2jYgh {\n  display: flex;\n  flex-wrap: wrap;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  margin: 0;\n  padding: 0;\n  transform-origin: 0% 0%;\n}\n.transform-component-module_content__2jYgh img {\n  pointer-events: none;\n}\n";
+var css = ".TransformComponent-module_container__3NwNd {\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  overflow: hidden;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -khtml-user-select: none; /* Konqueror HTML */\n  -moz-user-select: none; /* Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none;\n  margin: 0;\n  padding: 0;\n}\n.TransformComponent-module_content__TZU5O {\n  display: flex;\n  flex-wrap: wrap;\n  width: fit-content;\n  height: fit-content;\n  margin: 0;\n  padding: 0;\n  transform-origin: 0% 0%;\n}\n.TransformComponent-module_content__TZU5O img {\n  pointer-events: none;\n}\n";
 var styles$1 = {
-  "wrapper": "transform-component-module_wrapper__1_Fgj",
-  "content": "transform-component-module_content__2jYgh"
-};
-styleInject(css_248z);
-var TransformComponent = function(_a) {
-  var children = _a.children, _b = _a.wrapperClass, wrapperClass = _b === void 0 ? "" : _b, _c = _a.contentClass, contentClass = _c === void 0 ? "" : _c, wrapperStyle = _a.wrapperStyle, contentStyle = _a.contentStyle;
-  var setComponents = useContext(Context).setComponents;
-  var wrapperRef = useRef(null);
-  var contentRef = useRef(null);
-  useEffect(function() {
-    var wrapper = wrapperRef.current;
-    var content = contentRef.current;
-    if (wrapper !== null && content !== null && setComponents) {
-      setComponents(wrapper, content);
-    }
-  }, []);
-  return /* @__PURE__ */ jsx("div", {
-    ref: wrapperRef,
-    className: "react-transform-wrapper " + styles$1.wrapper + " " + wrapperClass,
-    style: wrapperStyle,
-    children: /* @__PURE__ */ jsx("div", {
-      ref: contentRef,
-      className: "react-transform-component " + styles$1.content + " " + contentClass,
-      style: contentStyle,
-      children
-    })
-  });
+  "container": "TransformComponent-module_container__3NwNd",
+  "content": "TransformComponent-module_content__TZU5O"
 };
+styleInject(css);
+var TransformComponent = function(_super) {
+  __extends(TransformComponent2, _super);
+  function TransformComponent2() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.wrapperRef = React.createRef();
+    _this.contentRef = React.createRef();
+    return _this;
+  }
+  TransformComponent2.prototype.componentDidMount = function() {
+    var nodes = this.context.nodes;
+    nodes.setWrapperComponent(this.wrapperRef.current);
+    nodes.setContentComponent(this.contentRef.current);
+  };
+  TransformComponent2.prototype.render = function() {
+    var children = this.props.children;
+    var _a = this.context.state, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale, _b = _a.options, wrapperClass = _b.wrapperClass, contentClass = _b.contentClass;
+    var style = {
+      WebkitTransform: "translate(" + positionX + "px, " + positionY + "px) scale(" + scale + ")",
+      transform: "translate(" + positionX + "px, " + positionY + "px) scale(" + scale + ")"
+    };
+    return /* @__PURE__ */ jsx("div", {
+      ref: this.wrapperRef,
+      className: "react-transform-component " + styles$1.container + " " + wrapperClass,
+      children: /* @__PURE__ */ jsx("div", {
+        ref: this.contentRef,
+        className: "react-transform-element " + styles$1.content + " " + contentClass,
+        style,
+        children
+      })
+    });
+  };
+  return TransformComponent2;
+}(React.Component);
+TransformComponent.contextType = Context;
 const extraStyle = `
 .lds-dual-ring {
   display: inline-block;
@@ -1925,7 +1707,7 @@ function ImgGallery(props) {
     style: __spreadProps(__spreadValues({}, styles.Grid), {
       gridTemplateColumns: `repeat(${((_a = props.options) == null ? void 0 : _a.picsPerRow) ? props.options.picsPerRow : "3"}, 1fr)`
     }),
-    children: props.imgList.map((element, index2) => {
+    children: props.imgList.map((element, index) => {
       var _a2;
       return /* @__PURE__ */ jsx("div", {
         className: "reactPic-imgDiv",
@@ -1954,7 +1736,7 @@ function ImgGallery(props) {
               minWidth: "100%",
               minHeight: "100%"
             },
-            onClick: () => props.onOpen(index2)
+            onClick: () => props.onOpen(index)
           })
         })
       }, element.thumbnailSrc ? element.thumbnailSrc : element.fullSrc);
@@ -1969,8 +1751,8 @@ const defaultOptions = {
 };
 function PicGallery(props) {
   var _a;
-  const [open, setOpen] = React.useState(false);
-  const [modalImgIndex, setModalImgIndex] = React.useState(0);
+  const [open, setOpen] = useState(false);
+  const [modalImgIndex, setModalImgIndex] = useState(0);
   const options = __spreadValues(__spreadValues({}, defaultOptions), props.options);
   useEffect(() => {
     if (typeof props.setExtLightboxChildren == "function") {
@@ -2009,5 +1791,4 @@ function PicGallery(props) {
     })]
   });
 }
-var index = React.memo(PicGallery);
-export { index as default };
+export { PicGallery as default };