react-pic-gallery 1.5.6 → 1.5.10

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, { Component, useState, useEffect, useCallback } from "react";
+import React, { useState, useImperativeHandle, Component, useContext, useRef, useEffect, useCallback } from "react";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /*
@@ -130,12 +130,14 @@ var extendStatics = function(d, b) {
     d2.__proto__ = b2;
   } || function(d2, b2) {
     for (var p2 in b2)
-      if (b2.hasOwnProperty(p2))
+      if (Object.prototype.hasOwnProperty.call(b2, 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;
@@ -154,183 +156,28 @@ var __assign = function() {
   };
   return __assign.apply(this, arguments);
 };
-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]];
+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];
+      }
     }
-  return t;
+  return to.concat(ar || from);
 }
-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 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) {
+var handleCallback = function(context, event, callback) {
   if (callback && typeof callback === "function") {
-    callback(props);
+    callback(context, event);
   }
 };
-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;
 };
@@ -373,7 +220,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 availableAnimations = {
+var animations = {
   easeOut,
   linear,
   easeInQuad,
@@ -389,98 +236,69 @@ var availableAnimations = {
   easeOutQuint,
   easeInOutQuint
 };
-function handleDisableAnimation() {
-  if (!this.mounted)
-    return;
-  if (this.animation) {
-    cancelAnimationFrame(this.animation);
+var handleCancelAnimationFrame = function(animation) {
+  if (typeof animation === "number") {
+    cancelAnimationFrame(animation);
   }
-  this.animate = false;
-  this.animation = false;
-  this.velocity = false;
-}
-function animate(animationName, animationTime, callback) {
-  var _this = this;
-  if (!this.mounted)
+};
+var handleCancelAnimation = function(contextInstance) {
+  if (!contextInstance.mounted)
+    return;
+  handleCancelAnimationFrame(contextInstance.animation);
+  contextInstance.animate = false;
+  contextInstance.animation = null;
+  contextInstance.velocity = null;
+};
+function handleSetupAnimation(contextInstance, animationName, animationTime, callback) {
+  if (!contextInstance.mounted)
     return;
   var startTime = new Date().getTime();
   var lastStep = 1;
-  handleDisableAnimation.call(this);
-  this.animation = function() {
-    if (!_this.animation || !_this.mounted)
-      return;
+  handleCancelAnimation(contextInstance);
+  contextInstance.animation = function() {
+    if (!contextInstance.mounted) {
+      return handleCancelAnimationFrame(contextInstance.animation);
+    }
     var frameTime = new Date().getTime() - startTime;
     var animationProgress = frameTime / animationTime;
-    var animationType = availableAnimations[animationName];
+    var animationType = animations[animationName];
     var step = animationType(animationProgress);
     if (frameTime >= animationTime) {
       callback(lastStep);
-      _this.animation = null;
-    } else {
+      contextInstance.animation = null;
+    } else if (contextInstance.animation) {
       callback(step);
-      requestAnimationFrame(_this.animation);
+      requestAnimationFrame(contextInstance.animation);
     }
   };
-  requestAnimationFrame(this.animation);
+  requestAnimationFrame(contextInstance.animation);
 }
-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;
+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;
   var scaleDiff = targetState.scale - scale;
   var positionXDiff = targetState.positionX - positionX;
   var positionYDiff = targetState.positionY - 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();
+  if (animationTime === 0) {
+    setTransformState(targetState.scale, targetState.positionX, targetState.positionY);
   } else {
-    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();
+    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);
     });
   }
 }
-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 isValidTargetState(targetState) {
+  var scale = targetState.scale, positionX = targetState.positionX, positionY = targetState.positionY;
+  if (isNaN(scale) || isNaN(positionX) || isNaN(positionY)) {
+    return false;
+  }
+  return true;
 }
 function getComponentsSizes(wrapperComponent, contentComponent, newScale) {
   var wrapperWidth = wrapperComponent.offsetWidth;
@@ -500,920 +318,1330 @@ function getComponentsSizes(wrapperComponent, contentComponent, newScale) {
     newDiffHeight
   };
 }
-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 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;
   var scaleDifference = newScale - scale;
-  if (typeof mouseX !== "number" || typeof mouseY !== "number")
-    return console.error("Mouse X and Y position were not provided!");
-  if (!transformEnabled)
+  if (typeof mouseX !== "number" || typeof mouseY !== "number") {
+    console.error("Mouse X and Y position were not provided!");
     return {
-      newPositionX: positionX,
-      newPositionY: positionY
+      x: positionX,
+      y: positionY
     };
+  }
   var calculatedPositionX = positionX - mouseX * scaleDifference;
   var calculatedPositionY = positionY - mouseY * scaleDifference;
-  var newPositions = checkPositionBounds(calculatedPositionX, calculatedPositionY, bounds, limitToBounds, 0, null);
+  var newPositions = getMouseBoundedPosition(calculatedPositionX, calculatedPositionY, bounds, limitToBounds, 0, 0, null);
   return newPositions;
 }
-function getClientPosition(event) {
+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) {
   var touches = event.touches;
-  if (touches && touches.length === 1) {
-    return {
-      clientX: touches[0].clientX,
-      clientY: touches[0].clientY
-    };
-  }
-  if (!touches) {
-    return {
-      clientX: event.clientX,
-      clientY: event.clientY
+  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
     };
   }
-  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 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)
+};
+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)
     return;
-  var _c = this.bounds, maxPositionX = _c.maxPositionX, minPositionX = _c.minPositionX, maxPositionY = _c.maxPositionY, minPositionY = _c.minPositionY;
+  var _c = contextInstance.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 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;
+  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;
   return {
     scale,
     positionX: xChanged ? x : positionX,
     positionY: yChanged ? y : positionY
   };
 }
-function handlePaddingAnimation(positionX, positionY) {
-  var padding = this.stateProvider.pan.padding;
-  if (!padding)
+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) {
+    return;
+  }
+  var _b = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent), x = _b.x, y = _b.y;
+  contextInstance.setTransformState(scale, x, y);
+}
+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
+    };
+  }
+  var mouseX = clientX - startCoords.x;
+  var mouseY = clientY - startCoords.y;
+  var newPositionX = lockAxisX ? positionX : mouseX;
+  var newPositionY = lockAxisY ? positionY : mouseY;
+  return {
+    x: newPositionX,
+    y: newPositionY
+  };
+};
+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;
+    }
+  }
+  if (isLocked)
+    return startPosition;
+  return boundLimiter(newPosition, minPosition, maxPosition, limitToBounds);
+}
+function getSizeMultiplier(wrapperComponent, equalToMove) {
+  var defaultMultiplier = 1;
+  if (equalToMove) {
+    return Math.min(defaultMultiplier, wrapperComponent.offsetWidth / window.innerWidth);
+  }
+  return defaultMultiplier;
+}
+function handleCalculateVelocity(contextInstance, position) {
+  var isAllowed = isVelocityCalculationAllowed(contextInstance);
+  if (!isAllowed) {
     return;
-  this.stateProvider.positionX = positionX;
-  this.stateProvider.positionY = positionY;
-  this.applyTransformation();
+  }
+  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;
 }
-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);
+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) {
+    return;
+  }
+  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);
+    }
+  });
+}
+function handlePanningStart(contextInstance, event) {
+  var scale = contextInstance.transformState.scale;
+  handleCancelAnimation(contextInstance);
+  handleCalculateBounds(contextInstance, scale);
+  if (event.touches) {
+    handleTouchPanningSetup(contextInstance, event);
   } 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);
+    handlePanningSetup(contextInstance, event);
   }
-  if (getTarget)
-    return targetScale;
-  var paddingEnabled = disablePadding ? false : !disabled;
-  var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, paddingEnabled);
-  return newScale;
 }
-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 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 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)
+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 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 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();
+  var targetState = handlePanToBounds(contextInstance);
+  if (targetState) {
+    animate(contextInstance, targetState, animationTime, animationType);
+  }
 }
-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)
+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)
     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 = 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 _c = handleCalculatePositions.call(this, mousePosX, mousePosY, newScale, bounds, limitToBounds), x = _c.x, y = _c.y;
+}
+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;
   return {
     scale: newScale,
     positionX: x,
     positionY: y
   };
 }
-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);
+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
   }
-  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
+};
+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];
+      }
+    }
   });
-}
-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 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 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 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 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 = 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 targetScale = handleCalculateZoom.call(this, customDelta, customStep, true, void 0, true);
-  var time = getButtonAnimationTime(targetScale, newScale, animationSpeed);
-  animateComponent.call(this, {
-    targetState,
-    speed: time,
-    type: animationType
-  });
+  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.");
+  }
+  animate(contextInstance, targetState, animationTime, animationType);
 }
-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)
+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)
     return;
-  if (scale === defaultScale && positionX === defaultPositionX && positionY === defaultPositionY)
+  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) {
     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 targetState = {
-    scale: targetScale,
-    positionX: newPositionX,
-    positionY: newPositionY
+  animate(contextInstance, newState, animationTime, animationType);
+}
+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
   };
-  animateComponent.call(this, {
-    targetState,
-    speed,
-    type: reset.animationType
-  });
 }
-function getButtonAnimationTime(targetScale, newScale, time) {
-  return time * (newScale / targetScale);
+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 round(number, decimal) {
-  var roundNumber2 = Math.pow(10, decimal);
-  return Math.round(number * roundNumber2) / roundNumber2;
+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;
+  }
+  return true;
 }
-function getCurrentDistance(event) {
-  return getDistance(event.touches[0], event.touches[1]);
+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 _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)
+      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;
+      }
+    };
+    return options;
+  } catch (err) {
+    passiveSupported = false;
+    return passiveSupported;
+  }
 }
-function checkIfInfinite(number) {
-  return number === Infinity || number === -Infinity;
+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);
+  }
+};
+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;
 }
-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 touchProportion = currentDistance / pinchStartDistance;
-  var scaleDifference = touchProportion * this.pinchStartScale;
-  return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale, size, !disabled);
+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 calculateMidpoint(event, scale, contentComponent) {
+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 = 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);
+  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 {
-    mouseX: (firstPointX + secondPointX) / 2 / scale,
-    mouseY: (firstPointY + secondPointY) / 2 / scale
+    x: (firstPointX + secondPointX) / 2 / scale,
+    y: (firstPointY + secondPointY) / 2 / scale
   };
-}
-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();
+};
+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 (this.pinchStartDistance === null)
-    return;
-  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)
+  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 wheelStopEventTime = 160;
+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.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);
+  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);
   }
-  return animationTime;
-}
-function handleEnableVelocity() {
-  this.setState({
-    startAnimation: false
-  });
-}
-function handleFireVelocity() {
-  this.setState({
-    startAnimation: true
-  });
-}
-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)
+};
+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;
-  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);
+  var midPoint = calculateTouchMidPoint(event, scale, contentComponent);
+  if (!isFinite(midPoint.x) || !isFinite(midPoint.y))
     return;
-  }
-  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();
-    }
-  });
-}
-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)
+  var currentDistance = getTouchDistance(event);
+  var newScale = calculatePinchZoom(contextInstance, currentDistance);
+  if (newScale === scale)
     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;
-    this.velocity = {
-      velocityX,
-      velocityY,
-      velocity: velocity_1
-    };
-    if (this.throttle)
-      clearTimeout(this.throttle);
-    this.throttle = setTimeout(function() {
-      if (_this.mounted)
-        _this.throttle = false;
-    }, throttleTime);
+  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 position = getClientPosition(event);
-  this.lastMousePosition = position;
-  this.velocityTime = now;
-}
-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 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.");
   }
-  if (isLocked)
-    return startPosition;
-  var offsetPosition = offset + target * step;
-  return boundLimiter(offsetPosition, minBound, maxBound, limitToBounds);
-}
-function makePassiveEventOption(passive) {
-  return passive;
+  animate(contextInstance, targetState, animationTime, animationType);
 }
-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 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({});
-var wheelStopEventTimer = null;
-var wheelStopEventTime = 180;
-var wheelAnimationTimer = null;
-var wheelAnimationTime = 100;
-var StateProvider = function(_super) {
-  __extends(StateProvider2, _super);
-  function StateProvider2() {
+var Context = React.createContext(contextInitialState);
+var TransformContext = function(_super) {
+  __extends(TransformContext2, _super);
+  function TransformContext2() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
     _this.mounted = true;
-    _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.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.startCoords = null;
-    _this.isDown = false;
-    _this.pinchStartDistance = null;
+    _this.lastTouch = null;
+    _this.distance = null;
     _this.lastDistance = null;
+    _this.pinchStartDistance = null;
     _this.pinchStartScale = null;
-    _this.distance = null;
-    _this.bounds = null;
+    _this.pinchMidpoint = null;
+    _this.velocity = null;
     _this.velocityTime = null;
     _this.lastMousePosition = null;
-    _this.velocity = null;
-    _this.offsetX = null;
-    _this.offsetY = null;
-    _this.throttle = false;
-    _this.previousWheelEvent = null;
-    _this.lastScale = null;
-    _this.animate = null;
+    _this.animate = false;
     _this.animation = null;
     _this.maxBounds = null;
-    _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)
+    _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)
         return;
-      if (!wheelEnabled && !event.ctrlKey)
+      var isAllowed = isWheelAllowed(_this, event);
+      if (!isAllowed)
         return;
-      if (!touchPadEnabled && event.ctrlKey)
+      var keysPressed = _this.isPressingKeys(_this.setup.wheel.activationKeys);
+      if (!keysPressed)
         return;
-      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.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);
-      });
+      handleWheelStart(_this, event);
+      handleWheelZoom(_this, event);
+      handleWheelStop(_this, event);
     };
-    _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)
+    _this.onPanningStart = function(event) {
+      var disabled = _this.setup.disabled;
+      var onPanningStart = _this.props.onPanningStart;
+      if (disabled)
         return;
-      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))
+      var isAllowed = isPanningStartAllowed(_this, event);
+      if (!isAllowed)
         return;
+      var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);
+      if (!keysPressed)
+        return;
+      event.preventDefault();
       event.stopPropagation();
-      calculateVelocityStart.call(_this, event);
-      handlePanning.call(_this, event);
-      handleCallback(_this.props.onPanning, _this.getCallbackProps());
+      handleCancelAnimation(_this);
+      handlePanningStart(_this, event);
+      handleCallback(getContext(_this), event, onPanningStart);
     };
-    _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.handlePinchStart = function(event) {
-      var scale = _this.stateProvider.scale;
+    _this.onPanning = function(event) {
+      var disabled = _this.setup.disabled;
+      var onPanning = _this.props.onPanning;
+      if (disabled)
+        return;
+      var isAllowed = isPanningAllowed(_this);
+      if (!isAllowed)
+        return;
+      var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);
+      if (!keysPressed)
+        return;
       event.preventDefault();
       event.stopPropagation();
-      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());
+      handlePanning(_this, event.clientX, event.clientY);
+      handleCallback(getContext(_this), event, onPanning);
     };
-    _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.onPanningStop = function(event) {
+      var onPanningStop = _this.props.onPanningStop;
+      if (_this.isPanning) {
+        handlePanningEnd(_this);
+        handleCallback(getContext(_this), event, onPanningStop);
       }
     };
-    _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;
-      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)
+    _this.onPinchStart = function(event) {
+      var disabled = _this.setup.disabled;
+      var _a = _this.props, onPinchingStart = _a.onPinchingStart, onZoomStart = _a.onZoomStart;
+      if (disabled)
         return;
-      if (!pan.disabled && event.touches.length === 1)
-        return _this.handlePanning(event);
-      if (!pinch.disabled && event.touches.length === 2)
-        return _this.handlePinch(event);
-    };
-    _this.handleTouchStop = function() {
-      _this.handleStopPanning();
-      _this.handlePinchStop();
-    };
-    _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)
+      var isAllowed = isPinchStartAllowed(_this, event);
+      if (!isAllowed)
         return;
-      handleZoomControls.call(_this, 1, step);
+      handlePinchStart(_this, event);
+      handleCancelAnimation(_this);
+      handleCallback(getContext(_this), event, onPinchingStart);
+      handleCallback(getContext(_this), event, onZoomStart);
     };
-    _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)
+    _this.onPinch = function(event) {
+      var disabled = _this.setup.disabled;
+      var _a = _this.props, onPinching = _a.onPinching, onZoom = _a.onZoom;
+      if (disabled)
         return;
-      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)
+      var isAllowed = isPinchAllowed(_this);
+      if (!isAllowed)
         return;
-      handleDoubleClick.call(_this, event, 1, step);
+      event.preventDefault();
+      event.stopPropagation();
+      handlePinchZoom(_this, event);
+      handleCallback(getContext(_this), event, onPinching);
+      handleCallback(getContext(_this), event, onZoom);
     };
-    _this.setScale = function(newScale, speed, type) {
-      if (speed === void 0) {
-        speed = 200;
+    _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);
       }
-      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.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)
+    _this.onTouchPanningStart = function(event) {
+      var disabled = _this.setup.disabled;
+      var onPanningStart = _this.props.onPanningStart;
+      if (disabled)
         return;
-      var targetState = {
-        positionX: isNaN(newPosX) ? positionX : newPosX,
-        positionY,
-        scale
-      };
-      animateComponent.call(_this, {
-        targetState,
-        speed,
-        type
-      });
-    };
-    _this.setPositionY = function(newPosY, speed, type) {
-      if (speed === void 0) {
-        speed = 200;
+      var isAllowed = isPanningStartAllowed(_this, event);
+      if (!isAllowed)
+        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 (type === void 0) {
-        type = "easeOut";
+    };
+    _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);
       }
-      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)
+    };
+    _this.onTouchPanningStop = function(event) {
+      _this.onPanningStop(event);
+      _this.onPinchStop(event);
+    };
+    _this.onDoubleClick = function(event) {
+      var disabled = _this.setup.disabled;
+      if (disabled)
         return;
-      var targetState = {
-        positionX,
-        positionY: isNaN(newPosY) ? positionY : newPosY,
-        scale
-      };
-      animateComponent.call(_this, {
-        targetState,
-        speed,
-        type
-      });
+      var isAllowed = isDoubleClickAllowed(_this, event);
+      if (!isAllowed)
+        return;
+      handleDoubleClick(_this, event);
     };
-    _this.setTransform = function(newPosX, newPosY, newScale, speed, type) {
-      if (speed === void 0) {
-        speed = 200;
-      }
-      if (type === void 0) {
-        type = "easeOut";
+    _this.clearPanning = function(event) {
+      if (_this.isPanning) {
+        _this.onPanningStop(event);
       }
-      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.resetTransform = function() {
-      var _a = _this.stateProvider.options, disabled = _a.disabled, transformEnabled = _a.transformEnabled;
-      if (disabled || !transformEnabled)
-        return;
-      resetTransformations.call(_this);
+    _this.setKeyPressed = function(e) {
+      _this.pressedKeys[e.key] = true;
     };
-    _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.setKeyUnPressed = function(e) {
+      _this.pressedKeys[e.key] = false;
     };
-    _this.setWrapperComponent = function(wrapperComponent) {
-      _this.setState({
-        wrapperComponent
-      });
+    _this.isPressingKeys = function(keys) {
+      if (!keys.length) {
+        return true;
+      }
+      return Boolean(keys.find(function(key) {
+        return _this.pressedKeys[key];
+      }));
     };
-    _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.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.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.applyTransformation = function(newScale, posX, posY) {
-      if (!_this.mounted)
-        return;
-      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.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.getCallbackProps = function() {
-      return getValidPropsFromObject(_this.stateProvider);
+    _this.applyTransformation = function() {
+      if (!_this.mounted || !_this.contentComponent)
+        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();
+    };
+    _this.handleRef = function() {
+      _this.props.setRef(getContext(_this));
     };
     return _this;
   }
-  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.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.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.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.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.componentDidUpdate = function(oldProps) {
+    if (oldProps !== this.props) {
+      handleCalculateBounds(this, this.transformState.scale);
+      this.setup = createSetup(this.props);
     }
   };
-  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
-      }
-    };
+  TransformContext2.prototype.render = function() {
+    var value = getContext(this);
     var children = this.props.children;
-    var content = typeof children === "function" ? children(__assign(__assign({}, value.state), value.dispatch)) : children;
+    var content = typeof children === "function" ? children(value) : children;
     return /* @__PURE__ */ jsx(Context.Provider, {
-      value,
+      value: __assign(__assign({}, this.transformState), {
+        setComponents: this.setComponents,
+        contextInstance: this
+      }),
       children: content
     });
   };
-  return StateProvider2;
+  return TransformContext2;
 }(Component);
-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) {
+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) {
   if (ref === void 0)
     ref = {};
   var insertAt = ref.insertAt;
-  if (!css2 || typeof document === "undefined") {
+  if (!css || typeof document === "undefined") {
     return;
   }
   var head = document.head || document.getElementsByTagName("head")[0];
@@ -1429,91 +1657,41 @@ function styleInject(css2, ref) {
     head.appendChild(style);
   }
   if (style.styleSheet) {
-    style.styleSheet.cssText = css2;
+    style.styleSheet.cssText = css;
   } else {
-    style.appendChild(document.createTextNode(css2));
+    style.appendChild(document.createTextNode(css));
   }
 }
-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 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 styles$1 = {
-  "container": "TransformComponent-module_container__3NwNd",
-  "content": "TransformComponent-module_content__TZU5O"
+  "wrapper": "transform-component-module_wrapper__1_Fgj",
+  "content": "transform-component-module_content__2jYgh"
 };
-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;
-  width: 40px;
-  height: 40px;
-}
-.lds-dual-ring:after {
-  content: " ";
-  display: block;
-  width: 32px;
-  height: 32px;
-  margin: 8px;
-  border-radius: 50%;
-  border: 3px solid rgba(185, 185, 185, 0.466);
-  border-color: rgba(185, 185, 185, 0.466) transparent rgba(185, 185, 185, 0.466) transparent;
-  animation: lds-dual-ring 1.2s linear infinite;
-}
-@keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-`;
-function CircularLoading() {
-  const styleTag = document.querySelector("#react-pic-style");
-  if (!styleTag) {
-    const sheet = document.createElement("style");
-    sheet.id = "react-pic-style";
-    sheet.innerHTML = extraStyle;
-    document.body.appendChild(sheet);
-  } else {
-    styleTag.innerHTML = styleTag.innerHTML + extraStyle;
-  }
+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", {
-    className: "lds-dual-ring"
+    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
+    })
   });
-}
+};
 let styles = {};
 styles.lightbox = {
   position: "fixed",
@@ -1571,20 +1749,106 @@ styles.Grid = {
   width: "100%",
   height: "auto"
 };
-const ImgLightbox = (props) => {
-  var _a, _b, _c, _d, _e;
+const extraStyle = `
+.lds-dual-ring {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 3px solid rgba(185, 185, 185, 0.466);
+  border-color: rgba(185, 185, 185, 0.466) transparent rgba(185, 185, 185, 0.466) transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+`;
+function CircularLoading() {
+  useEffect(() => {
+    const styleTag = document.querySelector("#react-pic-style");
+    if (!styleTag) {
+      const sheet = document.createElement("style");
+      sheet.id = "react-pic-style";
+      sheet.innerHTML = extraStyle;
+      document.body.appendChild(sheet);
+    } else {
+      styleTag.innerHTML = styleTag.innerHTML + extraStyle;
+    }
+    return () => {
+      var _a;
+      (_a = document.querySelector("#react-pic-style")) == null ? void 0 : _a.remove();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", {
+    className: "lds-dual-ring"
+  });
+}
+const ImgLazyLoading = (props) => {
+  var _a;
   const [imgSrcUrl, setImgSrcUrl] = React.useState("");
   const Loading = ((_a = props.options) == null ? void 0 : _a.customLoadComponent) !== void 0 ? props.options.customLoadComponent : CircularLoading;
+  const [loadingState, setLoadingState] = useState(true);
   React.useEffect(() => {
-    var _a2, _b2;
-    const imgSrc = ((_a2 = props.imgObj) == null ? void 0 : _a2.fullSrc) ? props.imgObj.fullSrc : ((_b2 = props.imgObj) == null ? void 0 : _b2.thumbnailSrc) ? props.imgObj.thumbnailSrc : null;
-    if (imgSrc) {
-      fetch(imgSrc).then((response) => response.blob()).then((blob) => {
+    setLoadingState(true);
+    const ac = new AbortController();
+    if (props.imgSrc) {
+      fetch(props.imgSrc).then((response) => response.blob()).then((blob) => {
         setImgSrcUrl(URL.createObjectURL(blob));
+        setLoadingState(false);
       });
     }
+    return () => {
+      ac.abort();
+    };
+  }, [props.imgSrc]);
+  if (loadingState) {
+    return /* @__PURE__ */ jsx("div", {
+      style: {
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        alignContent: "center",
+        justifyContent: "center",
+        background: !props.lightboxMode ? "rgba(0, 0, 0, 0.157)" : "",
+        border: !props.lightboxMode ? "1px solid rgba(0, 0, 0,0.3)" : ""
+      },
+      children: /* @__PURE__ */ jsx(Loading, {})
+    });
+  }
+  return /* @__PURE__ */ jsx("img", {
+    src: imgSrcUrl,
+    alt: "",
+    id: props.id,
+    style: __spreadValues({}, props.style),
+    onClick: props.onClick
+  });
+};
+const ImgLightbox = (props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const [imgSrcUrl, setImgSrcUrl] = useState("");
+  const [modalImgIndex, setModalImgIndex] = useState(props.currentImgIndex);
+  useCallback(() => setModalImgIndex(modalImgIndex + 1), [modalImgIndex]);
+  useCallback(() => setModalImgIndex(modalImgIndex - 1), [modalImgIndex]);
+  React.useEffect(() => {
+    var _a2, _b2;
+    const imgSrc = ((_a2 = props.imgList[modalImgIndex]) == null ? void 0 : _a2.fullSrc) ? props.imgList[modalImgIndex].fullSrc : ((_b2 = props.imgList[modalImgIndex]) == null ? void 0 : _b2.thumbnailSrc) ? props.imgList[modalImgIndex].thumbnailSrc : null;
+    if (imgSrc)
+      setImgSrcUrl(imgSrc);
     document.body.style.overflow = "hidden";
-  }, [props.imgObj]);
+  }, [modalImgIndex]);
   return /* @__PURE__ */ jsxs("div", {
     className: "reactPic-lightbox",
     style: styles.lightbox,
@@ -1598,22 +1862,19 @@ const ImgLightbox = (props) => {
     children: [/* @__PURE__ */ jsx("div", {
       style: styles.topCustomContent,
       className: "reactPic-topCustomContent",
-      children: (_b = props.topCustomContent) == null ? void 0 : _b.call(props, {
+      children: (_a = props.topCustomContent) == null ? void 0 : _a.call(props, {
         closeLightbox: props.onClose,
-        imgObject: props.imgObj
+        imgObject: props.imgList[modalImgIndex]
       })
-    }), imgSrcUrl === "" ? /* @__PURE__ */ jsx("div", {
-      style: {
-        display: "block",
-        margin: "auto"
-      },
-      children: /* @__PURE__ */ jsx(Loading, {})
-    }) : /* @__PURE__ */ jsxs("div", {
+    }), /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx(TransformWrapper, {
         children: /* @__PURE__ */ jsx(TransformComponent, {
-          children: /* @__PURE__ */ jsx("img", {
-            src: imgSrcUrl,
-            alt: "",
+          wrapperStyle: {
+            overflow: "visible"
+          },
+          children: /* @__PURE__ */ jsx(ImgLazyLoading, {
+            lightboxMode: true,
+            imgSrc: imgSrcUrl,
             id: "lightboxImg",
             style: {
               maxWidth: "80vw",
@@ -1623,85 +1884,48 @@ const ImgLightbox = (props) => {
             }
           })
         })
-      }), props.onClickPrevious && /* @__PURE__ */ jsx("div", {
+      }), modalImgIndex - 1 >= 0 && !((_b = props.options) == null ? void 0 : _b.hidePagination) && /* @__PURE__ */ jsx("div", {
         className: "react-lightbox-prevBtn",
         style: {
           position: "absolute",
           left: 20,
-          top: "50%",
+          height: 50,
+          top: "calc(50% - 50px)",
           fontSize: 50,
           cursor: "pointer",
           color: "white",
           display: ((_c = props.options) == null ? void 0 : _c.hidePagination) ? "none" : "inherit"
         },
-        onClick: props.onClickPrevious,
+        onClick: modalImgIndex - 1 >= 0 ? () => setModalImgIndex(modalImgIndex - 1) : void 0,
         children: "\u2039"
-      }), props.onClickNext && /* @__PURE__ */ jsx("div", {
+      }), modalImgIndex + 1 < props.imgList.length && !((_d = props.options) == null ? void 0 : _d.hidePagination) && /* @__PURE__ */ jsx("div", {
         className: "react-lightbox-nextBtn",
         style: {
           position: "absolute",
           right: 20,
-          top: "50%",
+          height: 50,
+          top: "calc(50% - 50px)",
           fontSize: 50,
           cursor: "pointer",
           color: "white",
-          display: ((_d = props.options) == null ? void 0 : _d.hidePagination) ? "none" : "inherit"
+          display: ((_e = props.options) == null ? void 0 : _e.hidePagination) ? "none" : "inherit"
         },
-        onClick: props.onClickNext,
+        onClick: modalImgIndex + 1 < props.imgList.length ? () => setModalImgIndex(modalImgIndex + 1) : void 0,
         children: "\u203A"
       })]
     }), /* @__PURE__ */ jsx("div", {
       style: styles.bottomCustomContent,
       className: "reactPic-bottomCustomContent",
-      children: (_e = props.bottomCustomContent) == null ? void 0 : _e.call(props, {
+      children: (_f = props.bottomCustomContent) == null ? void 0 : _f.call(props, {
         closeLightbox: props.onClose,
-        imgObject: props.imgObj
+        imgObject: props.imgList[modalImgIndex]
       })
     })]
   });
 };
-const ImgLazyLoading = (props) => {
-  var _a;
-  const [imgSrcUrl, setImgSrcUrl] = React.useState("");
-  const Loading = ((_a = props.options) == null ? void 0 : _a.customLoadComponent) !== void 0 ? props.options.customLoadComponent : CircularLoading;
-  React.useEffect(() => {
-    const ac = new AbortController();
-    if (props.imgSrc) {
-      fetch(props.imgSrc).then((response) => response.blob()).then((blob) => {
-        setImgSrcUrl(URL.createObjectURL(blob));
-      });
-    }
-    return () => {
-      ac.abort();
-    };
-  }, [props.imgSrc]);
-  if (imgSrcUrl) {
-    return /* @__PURE__ */ jsx("img", {
-      src: imgSrcUrl,
-      alt: "",
-      style: __spreadValues({}, props.style),
-      onClick: () => {
-        props.onClick();
-      }
-    });
-  } else {
-    return /* @__PURE__ */ jsx("div", {
-      style: {
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        alignContent: "center",
-        justifyContent: "center",
-        background: "rgba(0, 0, 0, 0.157)",
-        border: "1px solid rgba(0, 0, 0,0.3)"
-      },
-      children: /* @__PURE__ */ jsx(Loading, {})
-    });
-  }
-};
 function ImgGallery(props) {
   var _a;
+  const onOpen = useCallback((index) => () => props.onOpen(index), []);
   return /* @__PURE__ */ jsx("div", {
     className: "reactPic-grid",
     style: __spreadProps(__spreadValues({}, styles.Grid), {
@@ -1736,7 +1960,7 @@ function ImgGallery(props) {
               minWidth: "100%",
               minHeight: "100%"
             },
-            onClick: () => props.onOpen(index)
+            onClick: onOpen(index)
           })
         })
       }, element.thumbnailSrc ? element.thumbnailSrc : element.fullSrc);
@@ -1758,11 +1982,13 @@ function PicGallery(props) {
     if (typeof props.setExtLightboxChildren == "function") {
       if (open) {
         props.setExtLightboxChildren(/* @__PURE__ */ jsx(ImgLightbox, {
-          imgObj: props.imgList[modalImgIndex],
+          open,
+          currentImgIndex: modalImgIndex,
+          imgList: props.imgList,
+          topCustomContent: props.topCustomContent,
+          bottomCustomContent: props.bottomCustomContent,
           options,
-          onClose: () => {
-            setOpen(false);
-          }
+          onClose: () => setOpen(false)
         }));
       } else {
         props.setExtLightboxChildren(void 0);
@@ -1773,17 +1999,20 @@ function PicGallery(props) {
     setModalImgIndex(count);
     setOpen(true);
   }, []);
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
   return /* @__PURE__ */ jsxs("div", {
     className: "reactPic-wrapper",
     style: styles.Wrapper,
     children: [open && !((_a = props.options) == null ? void 0 : _a.externalLightbox) ? /* @__PURE__ */ jsx(ImgLightbox, {
-      imgObj: props.imgList[modalImgIndex],
+      open,
+      currentImgIndex: modalImgIndex,
+      imgList: props.imgList,
       topCustomContent: props.topCustomContent,
       bottomCustomContent: props.bottomCustomContent,
       options,
-      onClose: () => setOpen(false),
-      onClickPrevious: modalImgIndex - 1 >= 0 ? () => setModalImgIndex(modalImgIndex - 1) : void 0,
-      onClickNext: modalImgIndex + 1 < props.imgList.length ? () => setModalImgIndex(modalImgIndex + 1) : void 0
+      onClose
     }) : null, /* @__PURE__ */ jsx(ImgGallery$1, {
       options: props.options,
       imgList: props.imgList,