@btst/stack 5.2.0 → 6.0.0-beta.0

package/dist/node_modules/.pnpm/react-zoom-pan-pinch@3.7.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/react-zoom-pan-pinch/dist/index.esm.mjs

@@ -1,1854 +0,0 @@
-import React__default, { useRef, useImperativeHandle, useEffect, useContext } from 'react';
-
-/**
- * Rounds number to given decimal
- * eg. roundNumber(2.34343, 1) => 2.3
- */
-var roundNumber = function (num, decimal) {
-    return Number(num.toFixed(decimal));
-};
-/**
- * Checks if value is number, if not it returns default value
- * 1# eg. checkIsNumber(2, 30) => 2
- * 2# eg. checkIsNumber(null, 30) => 30
- */
-var checkIsNumber = function (num, defaultValue) {
-    return defaultValue;
-};
-
-var handleCallback = function (context, event, callback) {
-    if (callback && typeof callback === "function") {
-        callback(context, event);
-    }
-};
-
-/* eslint-disable no-plusplus */
-/* eslint-disable no-param-reassign */
-/**
- * Functions should return denominator of the target value, which is the next animation step.
- * t is a value from 0 to 1, reflecting the percentage of animation status.
- */
-var easeOut = function (t) {
-    return -Math.cos(t * Math.PI) / 2 + 0.5;
-};
-// linear
-var linear = function (t) {
-    return t;
-};
-// accelerating from zero velocity
-var easeInQuad = function (t) {
-    return t * t;
-};
-// decelerating to zero velocity
-var easeOutQuad = function (t) {
-    return t * (2 - t);
-};
-// acceleration until halfway, then deceleration
-var easeInOutQuad = function (t) {
-    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-};
-// accelerating from zero velocity
-var easeInCubic = function (t) {
-    return t * t * t;
-};
-// decelerating to zero velocity
-var easeOutCubic = function (t) {
-    return --t * t * t + 1;
-};
-// acceleration until halfway, then deceleration
-var easeInOutCubic = function (t) {
-    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-};
-// accelerating from zero velocity
-var easeInQuart = function (t) {
-    return t * t * t * t;
-};
-// decelerating to zero velocity
-var easeOutQuart = function (t) {
-    return 1 - --t * t * t * t;
-};
-// acceleration until halfway, then deceleration
-var easeInOutQuart = function (t) {
-    return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
-};
-// accelerating from zero velocity
-var easeInQuint = function (t) {
-    return t * t * t * t * t;
-};
-// decelerating to zero velocity
-var easeOutQuint = function (t) {
-    return 1 + --t * t * t * t * t;
-};
-// acceleration until halfway, then deceleration
-var easeInOutQuint = function (t) {
-    return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
-};
-var animations = {
-    easeOut: easeOut,
-    linear: linear,
-    easeInQuad: easeInQuad,
-    easeOutQuad: easeOutQuad,
-    easeInOutQuad: easeInOutQuad,
-    easeInCubic: easeInCubic,
-    easeOutCubic: easeOutCubic,
-    easeInOutCubic: easeInOutCubic,
-    easeInQuart: easeInQuart,
-    easeOutQuart: easeOutQuart,
-    easeInOutQuart: easeInOutQuart,
-    easeInQuint: easeInQuint,
-    easeOutQuint: easeOutQuint,
-    easeInOutQuint: easeInOutQuint,
-};
-
-/* eslint-disable no-param-reassign */
-var handleCancelAnimationFrame = function (animation) {
-    if (typeof animation === "number") {
-        cancelAnimationFrame(animation);
-    }
-};
-var handleCancelAnimation = function (contextInstance) {
-    if (!contextInstance.mounted)
-        return;
-    handleCancelAnimationFrame(contextInstance.animation);
-    // Clear animation state
-    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;
-    // if another animation is active
-    handleCancelAnimation(contextInstance);
-    // new animation
-    contextInstance.animation = function () {
-        if (!contextInstance.mounted) {
-            return handleCancelAnimationFrame(contextInstance.animation);
-        }
-        var frameTime = new Date().getTime() - startTime;
-        var animationProgress = frameTime / animationTime;
-        var animationType = animations[animationName];
-        var step = animationType(animationProgress);
-        if (frameTime >= animationTime) {
-            callback(lastStep);
-            contextInstance.animation = null;
-        }
-        else if (contextInstance.animation) {
-            callback(step);
-            requestAnimationFrame(contextInstance.animation);
-        }
-    };
-    requestAnimationFrame(contextInstance.animation);
-}
-function isValidTargetState(targetState) {
-    var scale = targetState.scale, positionX = targetState.positionX, positionY = targetState.positionY;
-    if (Number.isNaN(scale) ||
-        Number.isNaN(positionX) ||
-        Number.isNaN(positionY)) {
-        return false;
-    }
-    return true;
-}
-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 (animationTime === 0) {
-        setTransformState(targetState.scale, targetState.positionX, targetState.positionY);
-    }
-    else {
-        // animation start timestamp
-        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);
-        });
-    }
-}
-
-/* eslint-disable no-param-reassign */
-function getComponentsSizes(wrapperComponent, contentComponent, newScale) {
-    var wrapperWidth = wrapperComponent.offsetWidth;
-    var wrapperHeight = wrapperComponent.offsetHeight;
-    var contentWidth = contentComponent.offsetWidth;
-    var contentHeight = contentComponent.offsetHeight;
-    var newContentWidth = contentWidth * newScale;
-    var newContentHeight = contentHeight * newScale;
-    var newDiffWidth = wrapperWidth - newContentWidth;
-    var newDiffHeight = wrapperHeight - newContentHeight;
-    return {
-        wrapperWidth: wrapperWidth,
-        wrapperHeight: wrapperHeight,
-        newContentWidth: newContentWidth,
-        newDiffWidth: newDiffWidth,
-        newContentHeight: newContentHeight,
-        newDiffHeight: newDiffHeight,
-    };
-}
-var getBounds = function (wrapperWidth, newContentWidth, diffWidth, wrapperHeight, newContentHeight, diffHeight, centerZoomedOut) {
-    var scaleWidthFactor = wrapperWidth > newContentWidth
-        ? diffWidth * (centerZoomedOut ? 1 : 0.5)
-        : 0;
-    var scaleHeightFactor = wrapperHeight > newContentHeight
-        ? diffHeight * (centerZoomedOut ? 1 : 0.5)
-        : 0;
-    var minPositionX = wrapperWidth - newContentWidth - scaleWidthFactor;
-    var maxPositionX = scaleWidthFactor;
-    var minPositionY = wrapperHeight - newContentHeight - scaleHeightFactor;
-    var maxPositionY = scaleHeightFactor;
-    return { minPositionX: minPositionX, maxPositionX: maxPositionX, minPositionY: minPositionY, maxPositionY: 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;
-};
-/**
- * Keeps value between given bounds, used for limiting view to given boundaries
- * 1# eg. boundLimiter(2, 0, 3, true) => 2
- * 2# eg. boundLimiter(4, 0, 3, true) => 3
- * 3# eg. boundLimiter(-2, 0, 3, true) => 0
- * 4# eg. boundLimiter(10, 0, 3, false) => 10
- */
-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 handleCalculateBounds = function (contextInstance, newScale) {
-    var bounds = calculateBounds(contextInstance, newScale);
-    // Save bounds
-    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: x, y: y };
-}
-
-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") {
-        console.error("Mouse X and Y position were not provided!");
-        return { x: positionX, y: positionY };
-    }
-    var calculatedPositionX = positionX - mouseX * scaleDifference;
-    var calculatedPositionY = positionY - mouseY * scaleDifference;
-    // do not limit to bounds when there is padding animation,
-    // it causes animation strange behaviour
-    var newPositions = getMouseBoundedPosition(calculatedPositionX, calculatedPositionY, bounds, limitToBounds, 0, 0, null);
-    return newPositions;
-}
-function checkZoomBounds(zoom, minScale, maxScale, zoomPadding, enablePadding) {
-    var scalePadding = enablePadding ? zoomPadding : 0;
-    var minScaleWithPadding = minScale - scalePadding;
-    if (!Number.isNaN(maxScale) && zoom >= maxScale)
-        return maxScale;
-    if (!Number.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 targetIsShadowDom = "shadowRoot" in target && "composedPath" in event;
-    var isWrapperChild = targetIsShadowDom
-        ? event.composedPath().some(function (el) {
-            if (!(el instanceof Element)) {
-                return false;
-            }
-            return wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(el);
-        })
-        : 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;
-    // Panning with mouse
-    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;
-    var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY;
-    contextInstance.isPanning = true;
-    // Panning with touch
-    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 };
-    }
-};
-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 = 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 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: scale,
-        positionX: xChanged ? x : positionX,
-        positionY: yChanged ? y : positionY,
-    };
-}
-function handleNewPosition(contextInstance, newPositionX, newPositionY, paddingValueX, paddingValueY) {
-    var limitToBounds = contextInstance.setup.limitToBounds;
-    var wrapperComponent = contextInstance.wrapperComponent, bounds = contextInstance.bounds;
-    var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-    if (wrapperComponent === null ||
-        bounds === null ||
-        (newPositionX === positionX && newPositionY === positionY)) {
-        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, disablePadding = setup.disablePadding;
-    if (size > 0 && scale >= minScale && !disablePadding) {
-        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;
-    }
-    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: velocityX, velocityY: velocityY, total: velocity };
-    }
-    contextInstance.lastMousePosition = position;
-    contextInstance.velocityTime = now;
-}
-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 (window.TouchEvent !== undefined && event instanceof TouchEvent) {
-        handleTouchPanningSetup(contextInstance, event);
-    }
-    else {
-        handlePanningSetup(contextInstance, event);
-    }
-}
-function handleAlignToBounds(contextInstance, customAnimationTime) {
-    var scale = contextInstance.transformState.scale;
-    var _a = contextInstance.setup, minScale = _a.minScale, alignmentAnimation = _a.alignmentAnimation;
-    var disabled = alignmentAnimation.disabled, sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY, animationTime = alignmentAnimation.animationTime, animationType = alignmentAnimation.animationType;
-    var isDisabled = disabled || scale < minScale || (!sizeX && !sizeY);
-    if (isDisabled)
-        return;
-    var targetState = handlePanToBounds(contextInstance);
-    if (targetState) {
-        animate(contextInstance, targetState, customAnimationTime !== null && customAnimationTime !== void 0 ? customAnimationTime : animationTime, animationType);
-    }
-}
-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: x, y: y });
-    handleNewPosition(contextInstance, x, y, paddingValueX, paddingValueY);
-}
-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 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 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) {
-        // fire fit to bounds animation
-        handleAlignToBounds(contextInstance);
-    }
-    if (isDisabled || !wrapperComponent || !contextInstance.mounted)
-        return;
-    var mouseX = mousePositionX || wrapperComponent.offsetWidth / 2;
-    var mouseY = mousePositionY || wrapperComponent.offsetHeight / 2;
-    var targetState = handleZoomToPoint(contextInstance, minScale, mouseX, mouseY);
-    if (targetState) {
-        animate(contextInstance, targetState, animationTime, animationType);
-    }
-}
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __spreadArray(to, from, pack) {
-    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 to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var initialState = {
-    scale: 1,
-    positionX: 0,
-    positionY: 0,
-};
-var initialSetup = {
-    disabled: false,
-    minPositionX: null,
-    maxPositionX: null,
-    minPositionY: null,
-    maxPositionY: null,
-    minScale: 1,
-    maxScale: 8,
-    limitToBounds: true,
-    centerZoomedOut: false,
-    centerOnInit: false,
-    disablePadding: false,
-    smooth: true,
-    wheel: {
-        step: 0.2,
-        disabled: false,
-        smoothStep: 0.001,
-        wheelDisabled: false,
-        touchPadDisabled: false,
-        activationKeys: [],
-        excluded: [],
-    },
-    panning: {
-        disabled: false,
-        velocityDisabled: false,
-        lockAxisX: false,
-        lockAxisY: false,
-        allowLeftClickPan: true,
-        allowMiddleClickPan: true,
-        allowRightClickPan: true,
-        wheelPanning: false,
-        activationKeys: [],
-        excluded: [],
-    },
-    pinch: {
-        step: 5,
-        disabled: false,
-        excluded: [],
-    },
-    doubleClick: {
-        disabled: false,
-        step: 0.7,
-        mode: "zoomIn",
-        animationType: "easeOut",
-        animationTime: 200,
-        excluded: [],
-    },
-    zoomAnimation: {
-        disabled: false,
-        size: 0.4,
-        animationTime: 200,
-        animationType: "easeOut",
-    },
-    alignmentAnimation: {
-        disabled: false,
-        sizeX: 100,
-        sizeY: 100,
-        animationTime: 200,
-        velocityAlignmentTime: 400,
-        animationType: "easeOut",
-    },
-    velocityAnimation: {
-        disabled: false,
-        sensitivity: 1,
-        animationTime: 400,
-        animationType: "easeOut",
-        equalToMove: true,
-    },
-};
-var baseClasses = {
-    wrapperClass: "react-transform-wrapper",
-    contentClass: "react-transform-component",
-};
-
-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], true), props[key]);
-            }
-            else {
-                newSetup[key] = props[key];
-            }
-        }
-    });
-    return newSetup;
-};
-
-var handleCalculateButtonZoom = function (contextInstance, delta, step) {
-    var scale = contextInstance.transformState.scale;
-    var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;
-    var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, smooth = setup.smooth;
-    var size = zoomAnimation.size;
-    if (!wrapperComponent) {
-        throw new Error("Wrapper is not mounted");
-    }
-    var targetScale = smooth
-        ? scale * Math.exp(delta * step)
-        : scale + delta * step;
-    var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, false);
-    return newScale;
-};
-function handleZoomToViewCenter(contextInstance, delta, step, animationTime, animationType) {
-    var wrapperComponent = contextInstance.wrapperComponent;
-    var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-    if (!wrapperComponent)
-        return console.error("No WrapperComponent found");
-    var wrapperWidth = wrapperComponent.offsetWidth;
-    var wrapperHeight = wrapperComponent.offsetHeight;
-    var mouseX = (wrapperWidth / 2 - positionX) / scale;
-    var mouseY = (wrapperHeight / 2 - positionY) / scale;
-    var newScale = handleCalculateButtonZoom(contextInstance, delta, step);
-    var targetState = handleZoomToPoint(contextInstance, newScale, mouseX, mouseY);
-    if (!targetState) {
-        return console.error("Error during zoom event. New transformation state was not calculated.");
-    }
-    animate(contextInstance, targetState, animationTime, animationType);
-}
-function resetTransformations(contextInstance, animationTime, animationType, onResetTransformation) {
-    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;
-    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;
-    }
-    onResetTransformation === null || onResetTransformation === void 0 ? void 0 : onResetTransformation();
-    animate(contextInstance, newState, animationTime, animationType);
-}
-function getOffset(element, wrapper, content, state) {
-    var offset = element.getBoundingClientRect();
-    var wrapperOffset = wrapper.getBoundingClientRect();
-    var contentOffset = content.getBoundingClientRect();
-    var xOff = wrapperOffset.x * state.scale;
-    var yOff = wrapperOffset.y * state.scale;
-    return {
-        x: (offset.x - contentOffset.x + xOff) / state.scale,
-        y: (offset.y - contentOffset.y + yOff) / state.scale,
-    };
-}
-function calculateZoomToNode(contextInstance, node, customZoom) {
-    var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent, transformState = contextInstance.transformState;
-    var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, minScale = _a.minScale, maxScale = _a.maxScale;
-    if (!wrapperComponent || !contentComponent)
-        return transformState;
-    var wrapperRect = wrapperComponent.getBoundingClientRect();
-    var nodeRect = node.getBoundingClientRect();
-    var nodeOffset = getOffset(node, wrapperComponent, contentComponent, transformState);
-    var nodeLeft = nodeOffset.x;
-    var nodeTop = nodeOffset.y;
-    var nodeWidth = nodeRect.width / transformState.scale;
-    var nodeHeight = nodeRect.height / transformState.scale;
-    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 };
-}
-
-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: Number.isNaN(newPositionX) ? positionX : newPositionX,
-            positionY: Number.isNaN(newPositionY) ? positionY : newPositionY,
-            scale: Number.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 && target && wrapperComponent.contains(target)) {
-            var targetState = calculateZoomToNode(contextInstance, target, scale);
-            animate(contextInstance, targetState, animationTime, animationType);
-        }
-    };
-};
-
-var getControls = function (contextInstance) {
-    return {
-        instance: contextInstance,
-        zoomIn: zoomIn(contextInstance),
-        zoomOut: zoomOut(contextInstance),
-        setTransform: setTransform(contextInstance),
-        resetTransform: resetTransform(contextInstance),
-        centerView: centerView(contextInstance),
-        zoomToElement: zoomToElement(contextInstance),
-    };
-};
-var getState = function (contextInstance) {
-    return {
-        instance: contextInstance,
-        state: contextInstance.transformState,
-    };
-};
-var getContext = function (contextInstance) {
-    var ref = {};
-    Object.assign(ref, getState(contextInstance));
-    Object.assign(ref, getControls(contextInstance));
-    return ref;
-};
-
-// We want to make event listeners non-passive, and to do so have to check
-// that browsers support EventListenerOptions in the first place.
-// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
-var passiveSupported = false;
-function makePassiveEventOption() {
-    try {
-        var options = {
-            get passive() {
-                // This function will be called when the browser
-                //   attempts to access the passive property.
-                passiveSupported = true;
-                return false;
-            },
-        };
-        return options;
-    }
-    catch (err) {
-        passiveSupported = false;
-        return passiveSupported;
-    }
-}
-
-var matchPrefix = ".".concat(baseClasses.wrapperClass);
-var isExcludedNode = function (node, excluded) {
-    return excluded.some(function (exclude) {
-        return node.matches("".concat(matchPrefix, " ").concat(exclude, ", ").concat(matchPrefix, " .").concat(exclude, ", ").concat(matchPrefix, " ").concat(exclude, " *, ").concat(matchPrefix, " .").concat(exclude, " *"));
-    });
-};
-var cancelTimeout = function (timeout) {
-    if (timeout) {
-        clearTimeout(timeout);
-    }
-};
-
-var getTransformStyles = function (x, y, scale) {
-    // Standard translate prevents blurry svg on the safari
-    return "translate(".concat(x, "px, ").concat(y, "px) scale(").concat(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: scale,
-        positionX: centerPositionX,
-        positionY: centerPositionY,
-    };
-};
-
-function mergeRefs(refs) {
-    return function (value) {
-        refs.forEach(function (ref) {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref != null) {
-                ref.current = value;
-            }
-        });
-    };
-}
-
-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;
-    // Event ctrlKey detects if touchpad action is executing wheel or pinch gesture
-    if (wheelDisabled && !event.ctrlKey)
-        return false;
-    if (touchPadDisabled && event.ctrlKey)
-        return false;
-    var isExcluded = isExcludedNode(target, excluded);
-    if (isExcluded)
-        return false;
-    return true;
-};
-var getDeltaY = function (event) {
-    if (event) {
-        return event.deltaY < 0 ? 1 : -1;
-    }
-    return 0;
-};
-function getDelta(event, customDelta) {
-    var deltaY = getDeltaY(event);
-    var delta = checkIsNumber(customDelta, deltaY);
-    return delta;
-}
-function getMousePosition(event, contentComponent, scale) {
-    var contentRect = contentComponent.getBoundingClientRect();
-    var mouseX = 0;
-    var mouseY = 0;
-    if ("clientX" in event) {
-        // mouse position x, y over wrapper component
-        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 (Number.isNaN(mouseX) || Number.isNaN(mouseY))
-        console.error("No mouse or touch offset found");
-    return {
-        x: mouseX,
-        y: mouseY,
-    };
-}
-var handleCalculateWheelZoom = function (contextInstance, delta, step, disable, getTarget) {
-    var scale = contextInstance.transformState.scale;
-    var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;
-    var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, disablePadding = setup.disablePadding;
-    var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-    if (!wrapperComponent) {
-        throw new Error("Wrapper is not mounted");
-    }
-    var targetScale = scale + delta * step;
-    var paddingEnabled = disable ? false : !disabled;
-    var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, paddingEnabled && !disablePadding);
-    return newScale;
-};
-var handleWheelZoomStop = function (contextInstance, event) {
-    var previousWheelEvent = contextInstance.previousWheelEvent;
-    var scale = contextInstance.transformState.scale;
-    var _a = contextInstance.setup, maxScale = _a.maxScale, minScale = _a.minScale;
-    if (!previousWheelEvent)
-        return false;
-    if (scale < maxScale || scale > minScale)
-        return true;
-    if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))
-        return true;
-    if (previousWheelEvent.deltaY > 0 && previousWheelEvent.deltaY < event.deltaY)
-        return true;
-    if (previousWheelEvent.deltaY < 0 && previousWheelEvent.deltaY > event.deltaY)
-        return true;
-    if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))
-        return true;
-    return false;
-};
-
-var isPinchStartAllowed = function (contextInstance, event) {
-    var _a = contextInstance.setup.pinch, disabled = _a.disabled, excluded = _a.excluded;
-    var isInitialized = contextInstance.isInitialized;
-    var target = event.target;
-    var isAllowed = isInitialized && !disabled && target;
-    if (!isAllowed)
-        return false;
-    var isExcluded = isExcludedNode(target, excluded);
-    if (isExcluded)
-        return false;
-    return true;
-};
-var isPinchAllowed = function (contextInstance) {
-    var disabled = contextInstance.setup.pinch.disabled;
-    var isInitialized = contextInstance.isInitialized, pinchStartDistance = contextInstance.pinchStartDistance;
-    var isAllowed = isInitialized && !disabled && pinchStartDistance;
-    if (!isAllowed)
-        return false;
-    return true;
-};
-var calculateTouchMidPoint = function (event, scale, contentComponent) {
-    var contentRect = contentComponent.getBoundingClientRect();
-    var touches = event.touches;
-    var firstPointX = roundNumber(touches[0].clientX - contentRect.left, 5);
-    var firstPointY = roundNumber(touches[0].clientY - contentRect.top, 5);
-    var secondPointX = roundNumber(touches[1].clientX - contentRect.left, 5);
-    var secondPointY = roundNumber(touches[1].clientY - contentRect.top, 5);
-    return {
-        x: (firstPointX + secondPointX) / 2 / scale,
-        y: (firstPointY + secondPointY) / 2 / scale,
-    };
-};
-var getTouchDistance = function (event) {
-    return Math.sqrt(Math.pow((event.touches[0].pageX - event.touches[1].pageX), 2) +
-        Math.pow((event.touches[0].pageY - event.touches[1].pageY), 2));
-};
-var calculatePinchZoom = function (contextInstance, currentDistance) {
-    var pinchStartScale = contextInstance.pinchStartScale, pinchStartDistance = contextInstance.pinchStartDistance, setup = contextInstance.setup;
-    var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, disablePadding = setup.disablePadding;
-    var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-    if (!pinchStartScale || pinchStartDistance === null || !currentDistance) {
-        throw new Error("Pinch touches distance was not provided");
-    }
-    if (currentDistance < 0) {
-        return contextInstance.transformState.scale;
-    }
-    var touchProportion = currentDistance / pinchStartDistance;
-    var scaleDifference = touchProportion * pinchStartScale;
-    return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale, size, !disabled && !disablePadding);
-};
-
-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, disablePadding = setup.disablePadding, smooth = setup.smooth;
-    var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-    var step = wheel.step, smoothStep = wheel.smoothStep;
-    if (!contentComponent) {
-        throw new Error("Component not mounted");
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    var delta = getDelta(event, null);
-    var zoomStep = smooth ? smoothStep * Math.abs(event.deltaY) : step;
-    var newScale = handleCalculateWheelZoom(contextInstance, delta, zoomStep, !event.ctrlKey);
-    // if scale not change
-    if (scale === newScale)
-        return;
-    var bounds = handleCalculateBounds(contextInstance, newScale);
-    var mousePosition = getMousePosition(event, contentComponent, scale);
-    var isPaddingDisabled = disabled || size === 0 || centerZoomedOut || disablePadding;
-    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;
-    // fire animation
-    cancelTimeout(contextInstance.wheelAnimationTimer);
-    contextInstance.wheelAnimationTimer = setTimeout(function () {
-        if (!contextInstance.mounted)
-            return;
-        handleAlignToScaleBounds(contextInstance, event.x, event.y);
-        contextInstance.wheelAnimationTimer = null;
-    }, wheelAnimationTime);
-    // Wheel stop event
-    var hasStoppedZooming = handleWheelZoomStop(contextInstance, event);
-    if (hasStoppedZooming) {
-        cancelTimeout(contextInstance.wheelStopEventTimer);
-        contextInstance.wheelStopEventTimer = setTimeout(function () {
-            if (!contextInstance.mounted)
-                return;
-            contextInstance.wheelStopEventTimer = null;
-            handleCallback(getContext(contextInstance), event, onWheelStop);
-            handleCallback(getContext(contextInstance), event, onZoomStop);
-        }, wheelStopEventTime);
-    }
-};
-
-var getTouchCenter = function (event) {
-    var totalX = 0;
-    var totalY = 0;
-    // Sum up the positions of all touches
-    for (var i = 0; i < 2; i += 1) {
-        totalX += event.touches[i].clientX;
-        totalY += event.touches[i].clientY;
-    }
-    // Calculate the average position
-    var x = totalX / 2;
-    var y = totalY / 2;
-    return { x: x, y: y };
-};
-var handlePinchStart = function (contextInstance, event) {
-    var distance = getTouchDistance(event);
-    contextInstance.pinchStartDistance = distance;
-    contextInstance.lastDistance = distance;
-    contextInstance.pinchStartScale = contextInstance.transformState.scale;
-    contextInstance.isPanning = false;
-    var center = getTouchCenter(event);
-    contextInstance.pinchLastCenterX = center.x;
-    contextInstance.pinchLastCenterY = center.y;
-    handleCancelAnimation(contextInstance);
-};
-var handlePinchZoom = function (contextInstance, event) {
-    var contentComponent = contextInstance.contentComponent, pinchStartDistance = contextInstance.pinchStartDistance, wrapperComponent = contextInstance.wrapperComponent;
-    var scale = contextInstance.transformState.scale;
-    var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, centerZoomedOut = _a.centerZoomedOut, zoomAnimation = _a.zoomAnimation, alignmentAnimation = _a.alignmentAnimation;
-    var disabled = zoomAnimation.disabled, size = zoomAnimation.size;
-    // if one finger starts from outside of wrapper
-    if (pinchStartDistance === null || !contentComponent)
-        return;
-    var midPoint = calculateTouchMidPoint(event, scale, contentComponent);
-    // if touches goes off of the wrapper element
-    if (!Number.isFinite(midPoint.x) || !Number.isFinite(midPoint.y))
-        return;
-    var currentDistance = getTouchDistance(event);
-    var newScale = calculatePinchZoom(contextInstance, currentDistance);
-    var center = getTouchCenter(event);
-    // pan should be scale invariant.
-    var panX = center.x - (contextInstance.pinchLastCenterX || 0);
-    var panY = center.y - (contextInstance.pinchLastCenterY || 0);
-    if (newScale === scale && panX === 0 && panY === 0)
-        return;
-    contextInstance.pinchLastCenterX = center.x;
-    contextInstance.pinchLastCenterY = center.y;
-    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;
-    var sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY;
-    var paddingValueX = getPaddingValue(contextInstance, sizeX);
-    var paddingValueY = getPaddingValue(contextInstance, sizeY);
-    var newPositionX = x + panX;
-    var newPositionY = y + panY;
-    var _c = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent), finalX = _c.x, finalY = _c.y;
-    contextInstance.setTransformState(newScale, finalX, finalY);
-};
-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);
-};
-
-var handleDoubleClickStop = function (contextInstance, event) {
-    var onZoomStop = contextInstance.props.onZoomStop;
-    var animationTime = contextInstance.setup.doubleClick.animationTime;
-    cancelTimeout(contextInstance.doubleClickStopEventTimer);
-    contextInstance.doubleClickStopEventTimer = setTimeout(function () {
-        contextInstance.doubleClickStopEventTimer = null;
-        handleCallback(getContext(contextInstance), event, onZoomStop);
-    }, animationTime);
-};
-var handleDoubleClickResetMode = function (contextInstance, event) {
-    var _a = contextInstance.props, onZoomStart = _a.onZoomStart, onZoom = _a.onZoom;
-    var _b = contextInstance.setup.doubleClick, animationTime = _b.animationTime, animationType = _b.animationType;
-    handleCallback(getContext(contextInstance), event, onZoomStart);
-    resetTransformations(contextInstance, animationTime, animationType, function () {
-        return handleCallback(getContext(contextInstance), event, onZoom);
-    });
-    handleDoubleClickStop(contextInstance, event);
-};
-function getDoubleClickScale(mode, scale) {
-    if (mode === "toggle") {
-        return scale === 1 ? 1 : -1;
-    }
-    return mode === "zoomOut" ? -1 : 1;
-}
-function handleDoubleClick(contextInstance, event) {
-    var setup = contextInstance.setup, doubleClickStopEventTimer = contextInstance.doubleClickStopEventTimer, transformState = contextInstance.transformState, contentComponent = contextInstance.contentComponent;
-    var scale = transformState.scale;
-    var _a = contextInstance.props, onZoomStart = _a.onZoomStart, onZoom = _a.onZoom;
-    var _b = setup.doubleClick, disabled = _b.disabled, mode = _b.mode, step = _b.step, animationTime = _b.animationTime, animationType = _b.animationType;
-    if (disabled)
-        return;
-    if (doubleClickStopEventTimer)
-        return;
-    if (mode === "reset") {
-        return handleDoubleClickResetMode(contextInstance, event);
-    }
-    if (!contentComponent)
-        return console.error("No ContentComponent found");
-    var delta = getDoubleClickScale(mode, contextInstance.transformState.scale);
-    var newScale = handleCalculateButtonZoom(contextInstance, delta, step);
-    // stop execution when scale didn't change
-    if (scale === newScale)
-        return;
-    handleCallback(getContext(contextInstance), event, onZoomStart);
-    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.");
-    }
-    handleCallback(getContext(contextInstance), event, onZoom);
-    animate(contextInstance, targetState, animationTime, animationType);
-    handleDoubleClickStop(contextInstance, event);
-}
-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;
-    return true;
-};
-
-var ZoomPanPinch = /** @class */ (function () {
-    function ZoomPanPinch(props) {
-        var _this = this;
-        this.mounted = true;
-        this.pinchLastCenterX = null;
-        this.pinchLastCenterY = null;
-        this.onChangeCallbacks = new Set();
-        this.onInitCallbacks = new Set();
-        // Components
-        this.wrapperComponent = null;
-        this.contentComponent = null;
-        // Initialization
-        this.isInitialized = false;
-        this.bounds = null;
-        // wheel helpers
-        this.previousWheelEvent = null;
-        this.wheelStopEventTimer = null;
-        this.wheelAnimationTimer = null;
-        // panning helpers
-        this.isPanning = false;
-        this.isWheelPanning = false;
-        this.startCoords = null;
-        this.lastTouch = null;
-        // pinch helpers
-        this.distance = null;
-        this.lastDistance = null;
-        this.pinchStartDistance = null;
-        this.pinchStartScale = null;
-        this.pinchMidpoint = null;
-        // double click helpers
-        this.doubleClickStopEventTimer = null;
-        // velocity helpers
-        this.velocity = null;
-        this.velocityTime = null;
-        this.lastMousePosition = null;
-        // animations helpers
-        this.animate = false;
-        this.animation = null;
-        this.maxBounds = null;
-        // key press
-        this.pressedKeys = {};
-        this.mount = function () {
-            _this.initializeWindowEvents();
-        };
-        this.unmount = function () {
-            _this.cleanupWindowEvents();
-        };
-        this.update = function (newProps) {
-            _this.props = newProps;
-            handleCalculateBounds(_this, _this.transformState.scale);
-            _this.setup = createSetup(newProps);
-        };
-        this.initializeWindowEvents = function () {
-            var _a, _b;
-            var passive = makePassiveEventOption();
-            var currentDocument = (_a = _this.wrapperComponent) === null || _a === void 0 ? void 0 : _a.ownerDocument;
-            var currentWindow = currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.defaultView;
-            (_b = _this.wrapperComponent) === null || _b === void 0 ? void 0 : _b.addEventListener("wheel", _this.onWheelPanning, passive);
-            // Panning on window to allow panning when mouse is out of component wrapper
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("mousedown", _this.onPanningStart, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("mousemove", _this.onPanning, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("mouseup", _this.onPanningStop, passive);
-            currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.addEventListener("mouseleave", _this.clearPanning, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("keyup", _this.setKeyUnPressed, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("keydown", _this.setKeyPressed, passive);
-        };
-        this.cleanupWindowEvents = function () {
-            var _a, _b;
-            var passive = makePassiveEventOption();
-            var currentDocument = (_a = _this.wrapperComponent) === null || _a === void 0 ? void 0 : _a.ownerDocument;
-            var currentWindow = currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.defaultView;
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("mousedown", _this.onPanningStart, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("mousemove", _this.onPanning, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("mouseup", _this.onPanningStop, passive);
-            currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.removeEventListener("mouseleave", _this.clearPanning, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("keyup", _this.setKeyUnPressed, passive);
-            currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("keydown", _this.setKeyPressed, passive);
-            document.removeEventListener("mouseleave", _this.clearPanning, passive);
-            handleCancelAnimation(_this);
-            (_b = _this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
-        };
-        this.handleInitializeWrapperEvents = function (wrapper) {
-            // Zooming events on 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 (wrapper, contentComponent) {
-            var isCentered = false;
-            var centerOnInit = _this.setup.centerOnInit;
-            var hasTarget = function (entries, target) {
-                // eslint-disable-next-line no-restricted-syntax
-                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-                    var entry = entries_1[_i];
-                    if (entry.target === target) {
-                        return true;
-                    }
-                }
-                return false;
-            };
-            _this.applyTransformation();
-            _this.onInitCallbacks.forEach(function (callback) {
-                callback(getContext(_this));
-            });
-            _this.observer = new ResizeObserver(function (entries) {
-                if (hasTarget(entries, wrapper) || hasTarget(entries, contentComponent)) {
-                    if (centerOnInit && !isCentered) {
-                        var currentWidth = contentComponent.offsetWidth;
-                        var currentHeight = contentComponent.offsetHeight;
-                        if (currentWidth > 0 || currentHeight > 0) {
-                            isCentered = true;
-                            _this.setCenter();
-                        }
-                    }
-                    else {
-                        handleCancelAnimation(_this);
-                        handleCalculateBounds(_this, _this.transformState.scale);
-                        handleAlignToBounds(_this, 0);
-                    }
-                }
-            });
-            // Start observing the target node for configured mutations
-            _this.observer.observe(wrapper);
-            _this.observer.observe(contentComponent);
-        };
-        /// ///////
-        // Zoom
-        /// ///////
-        this.onWheelZoom = function (event) {
-            var disabled = _this.setup.disabled;
-            if (disabled)
-                return;
-            var isAllowed = isWheelAllowed(_this, event);
-            if (!isAllowed)
-                return;
-            var keysPressed = _this.isPressingKeys(_this.setup.wheel.activationKeys);
-            if (!keysPressed)
-                return;
-            handleWheelStart(_this, event);
-            handleWheelZoom(_this, event);
-            handleWheelStop(_this, event);
-        };
-        /// ///////
-        // Pan
-        /// ///////
-        this.onWheelPanning = function (event) {
-            var _a = _this.setup, disabled = _a.disabled, wheel = _a.wheel, panning = _a.panning;
-            if (!_this.wrapperComponent ||
-                !_this.contentComponent ||
-                disabled ||
-                !wheel.wheelDisabled ||
-                panning.disabled ||
-                !panning.wheelPanning ||
-                event.ctrlKey) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            var _b = _this.transformState, positionX = _b.positionX, positionY = _b.positionY;
-            var mouseX = positionX - event.deltaX;
-            var mouseY = positionY - event.deltaY;
-            var newPositionX = panning.lockAxisX ? positionX : mouseX;
-            var newPositionY = panning.lockAxisY ? positionY : mouseY;
-            var _c = _this.setup.alignmentAnimation, sizeX = _c.sizeX, sizeY = _c.sizeY;
-            var paddingValueX = getPaddingValue(_this, sizeX);
-            var paddingValueY = getPaddingValue(_this, sizeY);
-            if (newPositionX === positionX && newPositionY === positionY)
-                return;
-            handleNewPosition(_this, newPositionX, newPositionY, paddingValueX, paddingValueY);
-        };
-        this.onPanningStart = function (event) {
-            var disabled = _this.setup.disabled;
-            var onPanningStart = _this.props.onPanningStart;
-            if (disabled)
-                return;
-            var isAllowed = isPanningStartAllowed(_this, event);
-            if (!isAllowed)
-                return;
-            var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);
-            if (!keysPressed)
-                return;
-            if (event.button === 0 && !_this.setup.panning.allowLeftClickPan)
-                return;
-            if (event.button === 1 && !_this.setup.panning.allowMiddleClickPan)
-                return;
-            if (event.button === 2 && !_this.setup.panning.allowRightClickPan)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            handleCancelAnimation(_this);
-            handlePanningStart(_this, event);
-            handleCallback(getContext(_this), event, onPanningStart);
-        };
-        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();
-            handlePanning(_this, event.clientX, event.clientY);
-            handleCallback(getContext(_this), event, onPanning);
-        };
-        this.onPanningStop = function (event) {
-            var onPanningStop = _this.props.onPanningStop;
-            if (_this.isPanning) {
-                handlePanningEnd(_this);
-                handleCallback(getContext(_this), event, onPanningStop);
-            }
-        };
-        /// ///////
-        // Pinch
-        /// ///////
-        this.onPinchStart = function (event) {
-            var disabled = _this.setup.disabled;
-            var _a = _this.props, onPinchingStart = _a.onPinchingStart, onZoomStart = _a.onZoomStart;
-            if (disabled)
-                return;
-            var isAllowed = isPinchStartAllowed(_this, event);
-            if (!isAllowed)
-                return;
-            handlePinchStart(_this, event);
-            handleCancelAnimation(_this);
-            handleCallback(getContext(_this), event, onPinchingStart);
-            handleCallback(getContext(_this), event, onZoomStart);
-        };
-        this.onPinch = function (event) {
-            var disabled = _this.setup.disabled;
-            var _a = _this.props, onPinching = _a.onPinching, onZoom = _a.onZoom;
-            if (disabled)
-                return;
-            var isAllowed = isPinchAllowed(_this);
-            if (!isAllowed)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            handlePinchZoom(_this, event);
-            handleCallback(getContext(_this), event, onPinching);
-            handleCallback(getContext(_this), event, onZoom);
-        };
-        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);
-            }
-        };
-        /// ///////
-        // Touch
-        /// ///////
-        this.onTouchPanningStart = function (event) {
-            var disabled = _this.setup.disabled;
-            var onPanningStart = _this.props.onPanningStart;
-            if (disabled)
-                return;
-            var isAllowed = isPanningStartAllowed(_this, event);
-            if (!isAllowed)
-                return;
-            var isDoubleTap = _this.lastTouch &&
-                +new Date() - _this.lastTouch < 200 &&
-                event.touches.length === 1;
-            if (!isDoubleTap) {
-                _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);
-                }
-            }
-        };
-        this.onTouchPanning = function (event) {
-            var disabled = _this.setup.disabled;
-            var onPanning = _this.props.onPanning;
-            if (_this.isPanning && event.touches.length === 1) {
-                if (disabled)
-                    return;
-                var isAllowed = isPanningAllowed(_this);
-                if (!isAllowed)
-                    return;
-                event.preventDefault();
-                event.stopPropagation();
-                var touch = event.touches[0];
-                handlePanning(_this, touch.clientX, touch.clientY);
-                handleCallback(getContext(_this), event, onPanning);
-            }
-            else if (event.touches.length > 1) {
-                _this.onPinch(event);
-            }
-        };
-        this.onTouchPanningStop = function (event) {
-            _this.onPanningStop(event);
-            _this.onPinchStop(event);
-        };
-        /// ///////
-        // Double Click
-        /// ///////
-        this.onDoubleClick = function (event) {
-            var disabled = _this.setup.disabled;
-            if (disabled)
-                return;
-            var isAllowed = isDoubleClickAllowed(_this, event);
-            if (!isAllowed)
-                return;
-            handleDoubleClick(_this, event);
-        };
-        /// ///////
-        // Helpers
-        /// ///////
-        this.clearPanning = function (event) {
-            if (_this.isPanning) {
-                _this.onPanningStop(event);
-            }
-        };
-        this.setKeyPressed = function (e) {
-            _this.pressedKeys[e.key] = true;
-        };
-        this.setKeyUnPressed = function (e) {
-            _this.pressedKeys[e.key] = false;
-        };
-        this.isPressingKeys = function (keys) {
-            if (!keys.length) {
-                return true;
-            }
-            return Boolean(keys.find(function (key) { return _this.pressedKeys[key]; }));
-        };
-        this.setTransformState = function (scale, positionX, positionY) {
-            var onTransformed = _this.props.onTransformed;
-            if (!Number.isNaN(scale) &&
-                !Number.isNaN(positionX) &&
-                !Number.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();
-                var ctx_1 = getContext(_this);
-                _this.onChangeCallbacks.forEach(function (callback) { return callback(ctx_1); });
-                handleCallback(ctx_1, { scale: scale, positionX: positionX, positionY: positionY }, onTransformed);
-            }
-            else {
-                console.error("Detected NaN set state values");
-            }
-        };
-        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.handleTransformStyles = function (x, y, scale) {
-            if (_this.props.customTransform) {
-                return _this.props.customTransform(x, y, scale);
-            }
-            return getTransformStyles(x, y, scale);
-        };
-        this.applyTransformation = function () {
-            if (!_this.mounted || !_this.contentComponent)
-                return;
-            var _a = _this.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-            var transform = _this.handleTransformStyles(positionX, positionY, scale);
-            _this.contentComponent.style.transform = transform;
-        };
-        this.getContext = function () {
-            return getContext(_this);
-        };
-        /**
-         * Hooks
-         */
-        this.onChange = function (callback) {
-            if (!_this.onChangeCallbacks.has(callback)) {
-                _this.onChangeCallbacks.add(callback);
-            }
-            return function () {
-                _this.onChangeCallbacks.delete(callback);
-            };
-        };
-        this.onInit = function (callback) {
-            if (!_this.onInitCallbacks.has(callback)) {
-                _this.onInitCallbacks.add(callback);
-            }
-            return function () {
-                _this.onInitCallbacks.delete(callback);
-            };
-        };
-        /**
-         * Initialization
-         */
-        this.init = function (wrapperComponent, contentComponent) {
-            _this.cleanupWindowEvents();
-            _this.wrapperComponent = wrapperComponent;
-            _this.contentComponent = contentComponent;
-            handleCalculateBounds(_this, _this.transformState.scale);
-            _this.handleInitializeWrapperEvents(wrapperComponent);
-            _this.handleInitialize(wrapperComponent, contentComponent);
-            _this.initializeWindowEvents();
-            _this.isInitialized = true;
-            var ctx = getContext(_this);
-            handleCallback(ctx, undefined, _this.props.onInit);
-        };
-        this.props = props;
-        this.setup = createSetup(this.props);
-        this.transformState = createState(this.props);
-    }
-    return ZoomPanPinch;
-}());
-
-var Context = React__default.createContext(null);
-var getContent = function (children, ctx) {
-    if (typeof children === "function") {
-        return children(ctx);
-    }
-    return children;
-};
-var TransformWrapper = React__default.forwardRef(function (props, ref) {
-    var instance = useRef(new ZoomPanPinch(props)).current;
-    var content = getContent(props.children, getControls(instance));
-    useImperativeHandle(ref, function () { return getControls(instance); }, [instance]);
-    useEffect(function () {
-        instance.update(props);
-    }, [instance, props]);
-    return React__default.createElement(Context.Provider, { value: instance }, content);
-});
-
-React__default.forwardRef(function (props, ref) {
-    var localRef = useRef(null);
-    var instance = useContext(Context);
-    useEffect(function () {
-        return instance.onChange(function (ctx) {
-            if (localRef.current) {
-                var positionX = 0;
-                var positionY = 0;
-                localRef.current.style.transform = instance.handleTransformStyles(positionX, positionY, 1 / ctx.instance.transformState.scale);
-            }
-        });
-    }, [instance]);
-    return React__default.createElement("div", __assign({}, props, { ref: mergeRefs([localRef, ref]) }));
-});
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".transform-component-module_wrapper__SPB86 {\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  transform: translate3d(0, 0, 0);\n}\n.transform-component-module_content__FBWxo {\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__FBWxo img {\n  pointer-events: none;\n}\n";
-var styles = {"wrapper":"transform-component-module_wrapper__SPB86","content":"transform-component-module_content__FBWxo"};
-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, _d = _a.wrapperProps, wrapperProps = _d === void 0 ? {} : _d, _e = _a.contentProps, contentProps = _e === void 0 ? {} : _e;
-    var _f = useContext(Context), init = _f.init, cleanupWindowEvents = _f.cleanupWindowEvents;
-    var wrapperRef = useRef(null);
-    var contentRef = useRef(null);
-    useEffect(function () {
-        var wrapper = wrapperRef.current;
-        var content = contentRef.current;
-        if (wrapper !== null && content !== null && init) {
-            init === null || init === void 0 ? void 0 : init(wrapper, content);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        return function () {
-            cleanupWindowEvents === null || cleanupWindowEvents === void 0 ? void 0 : cleanupWindowEvents();
-        };
-    }, []);
-    return (React__default.createElement("div", __assign({}, wrapperProps, { ref: wrapperRef, className: "".concat(baseClasses.wrapperClass, " ").concat(styles.wrapper, " ").concat(wrapperClass), style: wrapperStyle }),
-        React__default.createElement("div", __assign({}, contentProps, { ref: contentRef, className: "".concat(baseClasses.contentClass, " ").concat(styles.content, " ").concat(contentClass), style: contentStyle }), children)));
-};
-
-var useTransformContext = function () {
-    var libraryContext = useContext(Context);
-    if (!libraryContext) {
-        throw new Error("Transform context must be placed inside TransformWrapper");
-    }
-    return libraryContext;
-};
-
-var useControls = function () {
-    var libraryContext = useTransformContext();
-    return getControls(libraryContext);
-};
-
-var useTransformEffect = function (callback) {
-    var libraryContext = useTransformContext();
-    useEffect(function () {
-        var unmountCallback;
-        var unmount = libraryContext.onChange(function (ref) {
-            unmountCallback = callback(getState(ref.instance));
-        });
-        return function () {
-            unmount();
-            unmountCallback === null || unmountCallback === void 0 ? void 0 : unmountCallback();
-        };
-    }, [callback, libraryContext]);
-};
-
-export { Context, TransformComponent, TransformWrapper, getCenterPosition, getTransformStyles, useControls, useTransformContext, useTransformEffect };