react-zoom-pan-pinch
Version:
Zoom and pan html elements in easy way.
1,098 lines (1,071 loc) • 119 kB
JavaScript
'use strict';
var React = require('react');
var jsxRuntime = require('react/jsx-runtime');
/**
* 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 typeof num === "number" ? num : 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.isAnimating = 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 setState = contextInstance.setState;
var _a = contextInstance.state, 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) {
setState(targetState.scale, targetState.positionX, targetState.positionY);
}
else {
// animation start timestamp
handleSetupAnimation(contextInstance, animationName, animationTime, function (step) {
if (step !== 1) {
contextInstance.isAnimating = true;
}
else {
contextInstance.isAnimating = false;
}
var newScale = scale + scaleDiff * step;
var newPositionX = positionX + positionXDiff * step;
var newPositionY = positionY + positionYDiff * step;
setState(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 ? 0.5 : 1)
: 0;
var scaleHeightFactor = wrapperHeight > newContentHeight
? diffHeight * (centerZoomedOut ? 0.5 : 1)
: 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,
scaleWidthFactor: scaleWidthFactor,
scaleHeightFactor: scaleHeightFactor,
};
};
var calculateBounds = function (contextInstance, newScale) {
var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
var _a = contextInstance.setup, centerZoomedOut = _a.centerZoomedOut, disablePadding = _a.disablePadding;
if (!wrapperComponent || !contentComponent) {
throw new Error("Components are not mounted");
}
var _b = getComponentsSizes(wrapperComponent, contentComponent, newScale), wrapperWidth = _b.wrapperWidth, wrapperHeight = _b.wrapperHeight, newContentWidth = _b.newContentWidth, newContentHeight = _b.newContentHeight, newDiffWidth = _b.newDiffWidth, newDiffHeight = _b.newDiffHeight;
var bounds = getBounds(wrapperWidth, newContentWidth, newDiffWidth, wrapperHeight, newContentHeight, newDiffHeight, Boolean(centerZoomedOut));
var contentFitsCompletely = wrapperWidth >= newContentWidth && wrapperHeight >= newContentHeight;
if (disablePadding && contentFitsCompletely && !centerZoomedOut) {
bounds.minPositionX = 0;
bounds.maxPositionX = 0;
bounds.minPositionY = 0;
bounds.maxPositionY = 0;
}
var _c = contextInstance.setup, propMinX = _c.minPositionX, propMaxX = _c.maxPositionX, propMinY = _c.minPositionY, propMaxY = _c.maxPositionY;
// Explicit position props define content-space boundaries at scale=1.
// Scale them so the same content region stays reachable at every zoom level.
if (propMinX != null) {
bounds.minPositionX = wrapperWidth * (1 - newScale) + propMinX * newScale;
}
if (propMaxX != null) {
bounds.maxPositionX = propMaxX * newScale;
}
if (propMinY != null) {
bounds.minPositionY = wrapperHeight * (1 - newScale) + propMinY * newScale;
}
if (propMaxY != null) {
bounds.maxPositionY = propMaxY * newScale;
}
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.state, 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;
}
var MIN_SAFE_SCALE = 1e-7;
function checkZoomBounds(zoom, minScale, maxScale, zoomPadding, enablePadding) {
var scalePadding = enablePadding ? zoomPadding : 0;
var minScaleWithPadding = Math.max(minScale - scalePadding, MIN_SAFE_SCALE);
var maxScaleWithPadding = maxScale + scalePadding;
if (!Number.isNaN(maxScale) && zoom >= maxScaleWithPadding)
return maxScaleWithPadding;
if (!Number.isNaN(minScale) && zoom <= minScaleWithPadding)
return minScaleWithPadding;
return Math.max(zoom, MIN_SAFE_SCALE);
}
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;
if (target.getAttribute("draggable") === "true" ||
target.getAttribute("contenteditable") === "true" ||
target.isContentEditable) {
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.state, 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.state, 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.state, 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.state, 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.setState(scale, x, y);
}
var getPanningClientPosition = function (contextInstance, clientX, clientY) {
var startCoords = contextInstance.startCoords, state = contextInstance.state;
var panning = contextInstance.setup.panning;
var lockAxisX = panning.lockAxisX, lockAxisY = panning.lockAxisY;
var positionX = state.positionX, positionY = state.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, explicitScale) {
var setup = contextInstance.setup, state = contextInstance.state;
var minScale = setup.minScale, disablePadding = setup.disablePadding, centerZoomedOut = setup.centerZoomedOut;
var scale = explicitScale !== null && explicitScale !== void 0 ? explicitScale : state.scale;
if (size > 0 && scale >= minScale && !disablePadding && !centerZoomedOut) {
return size;
}
return 0;
};
exports.DeviceType = void 0;
(function (DeviceType) {
DeviceType["TRACK_PAD"] = "track_pad";
DeviceType["MOUSE"] = "mouse";
DeviceType["TOUCH"] = "touch";
})(exports.DeviceType || (exports.DeviceType = {}));
var isVelocityCalculationAllowed = function (contextInstance) {
var mounted = contextInstance.mounted, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
var _a = contextInstance.setup, disabled = _a.disabled, velocityAnimation = _a.velocityAnimation, limitToBounds = _a.limitToBounds;
var scale = contextInstance.state.scale;
var disabledVelocity = velocityAnimation.disabled;
if (disabledVelocity || disabled || !mounted)
return false;
if (!wrapperComponent || !contentComponent)
return false;
if (!limitToBounds)
return true;
var contentOverflows = wrapperComponent.offsetWidth < contentComponent.offsetWidth * scale ||
wrapperComponent.offsetHeight < contentComponent.offsetHeight * scale;
return contentOverflows;
};
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 disabledVelocity = velocityAnimation.disabled;
var isAllowed = !disabledVelocity && !disabled && mounted;
if (!isAllowed)
return false;
if (!velocity || !bounds)
return false;
return true;
};
function getVelocityMoveTime(contextInstance, velocity) {
var velocityAnimation = contextInstance.setup.velocityAnimation;
var animationTime = velocityAnimation.animationTime, maxAnimationTime = velocityAnimation.maxAnimationTime, inertia = velocityAnimation.inertia;
return Math.min(animationTime * Math.max(1, Math.abs(velocity / inertia)), maxAnimationTime);
}
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);
}
/* eslint-disable no-param-reassign */
function getSizeMultiplier(wrapperComponent) {
var defaultMultiplier = 1;
var value = wrapperComponent.offsetWidth / window.innerWidth;
if (Number.isNaN(value)) {
return defaultMultiplier;
}
return Math.min(defaultMultiplier, value);
}
var getMinMaxVelocity = function (velocity, maxStrength, sensitivity) {
var defaultMultiplier = 0;
var value = velocity * sensitivity;
if (Number.isNaN(value)) {
return defaultMultiplier;
}
if (velocity < 0) {
return Math.max(value, -maxStrength);
}
return Math.min(value, maxStrength);
};
function handleCalculateVelocity(contextInstance, position, device) {
var _a, _b;
var isAllowed = isVelocityCalculationAllowed(contextInstance);
if (!isAllowed) {
return;
}
var lastMousePosition = contextInstance.lastMousePosition, velocityTime = contextInstance.velocityTime, setup = contextInstance.setup;
var wrapperComponent = contextInstance.wrapperComponent;
var _c = setup.velocityAnimation, maxStrengthMouse = _c.maxStrengthMouse, maxStrengthTouch = _c.maxStrengthTouch, sensitivityTouch = _c.sensitivityTouch, sensitivityMouse = _c.sensitivityMouse;
var now = Date.now();
if (lastMousePosition && velocityTime && wrapperComponent) {
var sizeMultiplier = getSizeMultiplier(wrapperComponent);
var sensitivity = (_a = {},
_a[exports.DeviceType.TOUCH] = sensitivityTouch,
_a[exports.DeviceType.MOUSE] = sensitivityMouse,
_a)[device];
var maxStrength = (_b = {},
_b[exports.DeviceType.TOUCH] = maxStrengthTouch,
_b[exports.DeviceType.MOUSE] = maxStrengthMouse,
_b)[device];
var distanceX = position.x - lastMousePosition.x;
var distanceY = position.y - lastMousePosition.y;
var velocityX = getMinMaxVelocity(distanceX / sizeMultiplier, maxStrength, sensitivity);
var velocityY = getMinMaxVelocity(distanceY / sizeMultiplier, maxStrength, sensitivity);
var interval = now - velocityTime;
var speed = distanceX * distanceX + distanceY * distanceY;
var velocity = getMinMaxVelocity(Math.sqrt(speed) / interval, maxStrength, sensitivity);
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, autoAlignment = setup.autoAlignment;
var zoomAnimation = setup.zoomAnimation, panning = setup.panning;
var lockAxisY = panning.lockAxisY, lockAxisX = panning.lockAxisX;
var animationType = zoomAnimation.animationType;
var sizeX = autoAlignment.sizeX, sizeY = autoAlignment.sizeY, velocityAlignmentTime = autoAlignment.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.state;
var startTime = new Date().getTime();
handleSetupAnimation(contextInstance, animationType, finalAnimationTime, function (step) {
var _a = contextInstance.state, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
var frameTime = new Date().getTime() - startTime;
var animationProgress = frameTime / alignAnimationTime;
var alignAnimation = animations[autoAlignment.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.setState(scale, currentPositionX, currentPositionY);
var onPanning = contextInstance.props.onPanning;
if (onPanning) {
onPanning(getContext(contextInstance), {});
}
}
});
}
function handlePanningStart(contextInstance, event) {
var _a = contextInstance.state, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
contextInstance.panStartPosition = { x: positionX, y: positionY };
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.state.scale;
var _a = contextInstance.setup, minScale = _a.minScale, autoAlignment = _a.autoAlignment;
var disabled = autoAlignment.disabled, sizeX = autoAlignment.sizeX, sizeY = autoAlignment.sizeY, animationTime = autoAlignment.animationTime, animationType = autoAlignment.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, device) {
var startCoords = contextInstance.startCoords, setup = contextInstance.setup;
var _a = setup.autoAlignment, 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 }, device);
handleNewPosition(contextInstance, x, y, paddingValueX, paddingValueY);
}
function handlePanningEnd(contextInstance, velocityDisabled) {
if (contextInstance.isPanning) {
var velocity = contextInstance.velocity, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
contextInstance.isPanning = false;
var _a = contextInstance.state, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;
var start = contextInstance.panStartPosition;
contextInstance.panStartPosition = null;
if (start) {
var dx = positionX - start.x;
var dy = positionY - start.y;
if (dx * dx + dy * dy <= 25)
return;
}
contextInstance.isAnimating = false;
contextInstance.animation = null;
var wrapperWidth = (wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.offsetWidth) || 0;
var wrapperHeight = (wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.offsetHeight) || 0;
var contentWidth = ((contentComponent === null || contentComponent === void 0 ? void 0 : contentComponent.offsetWidth) || 0) * scale;
var contentHeight = ((contentComponent === null || contentComponent === void 0 ? void 0 : contentComponent.offsetHeight) || 0) * scale;
var isContentOverflowing = !contextInstance.setup.limitToBounds ||
wrapperWidth < contentWidth ||
wrapperHeight < contentHeight;
var shouldAnimate = !velocityDisabled &&
velocity &&
velocity.total > 0.1 &&
isContentOverflowing;
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.state.scale;
var wrapperComponent = contextInstance.wrapperComponent;
var _a = contextInstance.setup, minScale = _a.minScale, maxScale = _a.maxScale, limitToBounds = _a.limitToBounds, zoomAnimation = _a.zoomAnimation;
var disabled = zoomAnimation.disabled, animationTime = zoomAnimation.animationTime, animationType = zoomAnimation.animationType;
var isWithinBounds = scale >= minScale && scale <= maxScale;
var isDisabled = disabled || isWithinBounds;
if (scale >= 1 || limitToBounds) {
handleAlignToBounds(contextInstance);
}
if (isDisabled || !wrapperComponent || !contextInstance.mounted)
return;
var mouseX = mousePositionX || wrapperComponent.offsetWidth / 2;
var mouseY = mousePositionY || wrapperComponent.offsetHeight / 2;
var targetScale = scale < minScale ? minScale : maxScale;
var targetState = handleZoomToPoint(contextInstance, targetScale, 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.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
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 __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
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 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 = {
previousScale: 1,
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,
detached: false,
wheel: {
step: 0.015,
disabled: false,
wheelDisabled: false,
touchPadDisabled: false,
activationKeys: [],
excluded: [],
},
trackPadPanning: {
disabled: true,
velocityDisabled: false,
lockAxisX: false,
lockAxisY: false,
activationKeys: [],
excluded: [],
},
panning: {
disabled: false,
velocityDisabled: false,
lockAxisX: false,
lockAxisY: false,
allowLeftClickPan: true,
allowMiddleClickPan: true,
allowRightClickPan: true,
activationKeys: [],
excluded: [],
},
pinch: {
step: 5,
disabled: false,
allowPanning: true,
excluded: [],
},
doubleClick: {
disabled: false,
step: 0.7,
mode: "zoomIn",
animationType: "easeOut",
animationTime: 200,
excluded: [],
},
zoomAnimation: {
disabled: false,
size: 0.4,
animationTime: 200,
animationType: "easeOut",
},
autoAlignment: {
disabled: false,
sizeX: 100,
sizeY: 100,
animationTime: 200,
velocityAlignmentTime: 400,
animationType: "easeOut",
},
velocityAnimation: {
disabled: false,
sensitivityMouse: 1,
sensitivityTouch: 1.2,
maxStrengthMouse: 20,
maxStrengthTouch: 40,
inertia: 1,
animationTime: 300,
maxAnimationTime: 800,
animationType: "easeOut",
},
};
var baseClasses = {
wrapperClass: "react-transform-wrapper",
contentClass: "react-transform-component",
};
var createState = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
var minScale = Math.max((_a = props.minScale) !== null && _a !== void 0 ? _a : initialSetup.minScale, 1e-7);
var maxScale = (_b = props.maxScale) !== null && _b !== void 0 ? _b : initialSetup.maxScale;
var rawScale = (_c = props.initialScale) !== null && _c !== void 0 ? _c : initialState.scale;
var scale = Math.min(Math.max(rawScale, minScale), maxScale);
var positionX = boundLimiter((_d = props.initialPositionX) !== null && _d !== void 0 ? _d : initialState.positionX, (_e = props.minPositionX) !== null && _e !== void 0 ? _e : -Infinity, (_f = props.maxPositionX) !== null && _f !== void 0 ? _f : Infinity, props.minPositionX != null || props.maxPositionX != null);
var positionY = boundLimiter((_g = props.initialPositionY) !== null && _g !== void 0 ? _g : initialState.positionY, (_h = props.minPositionY) !== null && _h !== void 0 ? _h : -Infinity, (_j = props.maxPositionY) !== null && _j !== void 0 ? _j : Infinity, props.minPositionY != null || props.maxPositionY != null);
return {
previousScale: scale,
scale: scale,
positionX: positionX,
positionY: positionY,
};
};
var createSetup = function (props) {
var newSetup = __assign({}, initialSetup);
Object.keys(props).forEach(function (key) {
var k = key;
var validValue = typeof props[k] !== "undefined";
var validParameter = typeof initialSetup[k] !== "undefined";
if (validParameter && validValue) {
var dataType = Object.prototype.toString.call(initialSetup[k]);
var isObject = dataType === "[object Object]";
var isArray = dataType === "[object Array]";
if (isObject) {
newSetup[k] = __assign(__assign({}, initialSetup[k]), props[k]);
}
else if (isArray) {
newSetup[k] = __spreadArray(__spreadArray([], initialSetup[k], true), props[k], true);
}
else {
newSetup[k] = props[k];
}
}
});
if (newSetup.minScale <= 0) {
newSetup.minScale = 1e-7;
}
return newSetup;
};
var handleCalculateButtonZoom = function (contextInstance, delta, step) {
var scale = contextInstance.state.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 _a, _b;
var wrapperComponent = contextInstance.wrapperComponent;
var _c = contextInstance.state, scale = _c.scale, positionX = _c.positionX, positionY = _c.positionY;
var zoomAnimation = contextInstance.setup.zoomAnimation;
if (!wrapperComponent)
return console.error("No WrapperComponent found");
var effectiveAnimationTime = zoomAnimation.disabled ? 0 : animationTime;
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.");
}
var _d = contextInstance.props, onZoomStart = _d.onZoomStart, onZoom = _d.onZoom, onZoomStop = _d.onZoomStop;
var event = new MouseEvent("mousemove", { bubbles: true });
var ctx = getContext(contextInstance);
handleCallback(ctx, event, onZoomStart);
handleCallback(ctx, event, onZoom);
animate(contextInstance, targetState, effectiveAnimationTime, animationType);
var win = (_b = (_a = wrapperComponent.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) !== null && _b !== void 0 ? _b : (typeof window !== "undefined" ? window : null);
if (win) {
win.setTimeout(function () {
if (!contextInstance.mounted)
return;
handleCallback(getContext(contextInstance), event, onZoomStop);
}, effectiveAnimationTime);
}
}
function resetTransformations(contextInstance, animationTime, animationType, onResetTransformation) {
var _a, _b;
var setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
var limitToBounds = setup.limitToBounds, centerOnInit = setup.centerOnInit;
var initialTransformation = createState(contextInstance.props);
var _c = contextInstance.state, scale = _c.scale, positionX = _c.positionX, positionY = _c.positionY;
if (!wrapperComponent)
return;
var targetPositionX = initialTransformation.positionX;
var targetPositionY = initialTransformation.positionY;
if (centerOnInit && contentComponent) {
var centered = getCenterPosition(initialTransformation.scale, wrapperComponent, contentComponent);
targetPositionX = centered.positionX;
targetPositionY = centered.positionY;
}
var newBounds = calculateBounds(contextInstance, initialTransformation.scale);
var boundedPositions = getMouseBoundedPosition(targetPositionX, targetPositionY, 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();
var _d = contextInstance.props, onZoomStart = _d.onZoomStart, onZoom = _d.onZoom, onZoomStop = _d.onZoomStop;
var event = new MouseEvent("mousemove", { bubbles: true });
var ctx = getContext(contextInstance);
handleCallback(ctx, event, onZoomStart);
handleCallback(ctx, event, onZoom);
animate(contextInstance, newState, animationTime, animationType);
var win = (_b = (_a = wrapperComponent.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) !== null && _b !== void 0 ? _b : (typeof window !== "undefined" ? window : null);
if (win) {
win.setTimeout(function () {
if (!contextInstance.mounted)
return;
handleCallback(getContext(contextInstance), event, onZoomStop);
}, animationTime);
}
}
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, customOffsetX, customOffsetY) {
if (customOffsetX === void 0) { customOffsetX = 0; }
if (customOffsetY === void 0) { customOffsetY = 0; }
var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent, state = contextInstance.state;
var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, minScale = _a.minScale, maxScale = _a.maxScale;
if (!wrapperComponent || !contentComponent)
return state;
var wrapperRect = wrapperComponent.getBoundingClientRect();
var nodeRect = node.getBoundingClientRect();
var nodeOffset = getOffset(node, wrapperComponent, contentComponent, state);
var nodeLeft = nodeOffset.x;
var nodeTop = nodeOffset.y;
var nodeWidth = nodeRect.width / state.scale;
var nodeHeight = nodeRect.height / state.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 + customOffsetX;
var newPositionY = (wrapperRect.top - nodeTop) * newScale + offsetY + customOffsetY;
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.state, 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 state = contextInstance.state, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
if (wrapperComponent && contentComponent) {
var targetState = getCenterPosition(scale || state.scale, wrapperComponent, contentComponent);
animate(contextInstance, targetState, animationTime, animationType);
}
};
};
var zoomToElement = function (contextInstance) {
return function (node, scale, animationTime, animationType, offsetX, offsetY) {
if (animationTime === void 0) { animationTime = 600; }
if (animationType === void 0) { animationType = "easeOut"; }
if (offsetX === void 0) { offsetX = 0; }
if (offsetY === void 0) { offsetY = 0; }
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, offsetX, offsetY);
animate(contextInstance, targetState, animationTime, animationType);
}
};
};
var getControls = function (contextInstance) {
return {
instance: contextInstance,
state: contextInstance.state,
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.state,
};
};
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