\r\n \r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable react/no-unknown-property */\r\n/* eslint-disable max-len */\r\nimport React from 'react';\r\n\r\nconst IconPlayStop = () => (\r\n \r\n);\r\n\r\nexport default IconPlayStop;\r\n","import React, { useRef, useImperativeHandle, useEffect, useContext, useLayoutEffect, useState, useCallback, useMemo } from 'react';\n\n/**\n * Rounds number to given decimal\n * eg. roundNumber(2.34343, 1) => 2.3\n */\nvar roundNumber = function (num, decimal) {\n return Number(num.toFixed(decimal));\n};\n/**\n * Checks if value is number, if not it returns default value\n * 1# eg. checkIsNumber(2, 30) => 2\n * 2# eg. checkIsNumber(null, 30) => 30\n */\nvar checkIsNumber = function (num, defaultValue) {\n return typeof num === \"number\" ? num : defaultValue;\n};\n\nvar handleCallback = function (context, event, callback) {\n if (callback && typeof callback === \"function\") {\n callback(context, event);\n }\n};\n\n/* eslint-disable no-plusplus */\n/* eslint-disable no-param-reassign */\n/**\n * Functions should return denominator of the target value, which is the next animation step.\n * t is a value from 0 to 1, reflecting the percentage of animation status.\n */\nvar easeOut = function (t) {\n return -Math.cos(t * Math.PI) / 2 + 0.5;\n};\n// linear\nvar linear = function (t) {\n return t;\n};\n// accelerating from zero velocity\nvar easeInQuad = function (t) {\n return t * t;\n};\n// decelerating to zero velocity\nvar easeOutQuad = function (t) {\n return t * (2 - t);\n};\n// acceleration until halfway, then deceleration\nvar easeInOutQuad = function (t) {\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n};\n// accelerating from zero velocity\nvar easeInCubic = function (t) {\n return t * t * t;\n};\n// decelerating to zero velocity\nvar easeOutCubic = function (t) {\n return --t * t * t + 1;\n};\n// acceleration until halfway, then deceleration\nvar easeInOutCubic = function (t) {\n return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;\n};\n// accelerating from zero velocity\nvar easeInQuart = function (t) {\n return t * t * t * t;\n};\n// decelerating to zero velocity\nvar easeOutQuart = function (t) {\n return 1 - --t * t * t * t;\n};\n// acceleration until halfway, then deceleration\nvar easeInOutQuart = function (t) {\n return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;\n};\n// accelerating from zero velocity\nvar easeInQuint = function (t) {\n return t * t * t * t * t;\n};\n// decelerating to zero velocity\nvar easeOutQuint = function (t) {\n return 1 + --t * t * t * t * t;\n};\n// acceleration until halfway, then deceleration\nvar easeInOutQuint = function (t) {\n return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;\n};\nvar animations = {\n easeOut: easeOut,\n linear: linear,\n easeInQuad: easeInQuad,\n easeOutQuad: easeOutQuad,\n easeInOutQuad: easeInOutQuad,\n easeInCubic: easeInCubic,\n easeOutCubic: easeOutCubic,\n easeInOutCubic: easeInOutCubic,\n easeInQuart: easeInQuart,\n easeOutQuart: easeOutQuart,\n easeInOutQuart: easeInOutQuart,\n easeInQuint: easeInQuint,\n easeOutQuint: easeOutQuint,\n easeInOutQuint: easeInOutQuint,\n};\n\n/* eslint-disable no-param-reassign */\nvar handleCancelAnimationFrame = function (animation) {\n if (typeof animation === \"number\") {\n cancelAnimationFrame(animation);\n }\n};\nvar handleCancelAnimation = function (contextInstance) {\n if (!contextInstance.mounted)\n return;\n handleCancelAnimationFrame(contextInstance.animation);\n // Clear animation state\n contextInstance.animate = false;\n contextInstance.animation = null;\n contextInstance.velocity = null;\n};\nfunction handleSetupAnimation(contextInstance, animationName, animationTime, callback) {\n if (!contextInstance.mounted)\n return;\n var startTime = new Date().getTime();\n var lastStep = 1;\n // if another animation is active\n handleCancelAnimation(contextInstance);\n // new animation\n contextInstance.animation = function () {\n if (!contextInstance.mounted) {\n return handleCancelAnimationFrame(contextInstance.animation);\n }\n var frameTime = new Date().getTime() - startTime;\n var animationProgress = frameTime / animationTime;\n var animationType = animations[animationName];\n var step = animationType(animationProgress);\n if (frameTime >= animationTime) {\n callback(lastStep);\n contextInstance.animation = null;\n }\n else if (contextInstance.animation) {\n callback(step);\n requestAnimationFrame(contextInstance.animation);\n }\n };\n requestAnimationFrame(contextInstance.animation);\n}\nfunction isValidTargetState(targetState) {\n var scale = targetState.scale, positionX = targetState.positionX, positionY = targetState.positionY;\n if (Number.isNaN(scale) ||\n Number.isNaN(positionX) ||\n Number.isNaN(positionY)) {\n return false;\n }\n return true;\n}\nfunction animate(contextInstance, targetState, animationTime, animationName) {\n var isValid = isValidTargetState(targetState);\n if (!contextInstance.mounted || !isValid)\n return;\n var setTransformState = contextInstance.setTransformState;\n var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;\n var scaleDiff = targetState.scale - scale;\n var positionXDiff = targetState.positionX - positionX;\n var positionYDiff = targetState.positionY - positionY;\n if (animationTime === 0) {\n setTransformState(targetState.scale, targetState.positionX, targetState.positionY);\n }\n else {\n // animation start timestamp\n handleSetupAnimation(contextInstance, animationName, animationTime, function (step) {\n var newScale = scale + scaleDiff * step;\n var newPositionX = positionX + positionXDiff * step;\n var newPositionY = positionY + positionYDiff * step;\n setTransformState(newScale, newPositionX, newPositionY);\n });\n }\n}\n\n/* eslint-disable no-param-reassign */\nfunction getComponentsSizes(wrapperComponent, contentComponent, newScale) {\n var wrapperWidth = wrapperComponent.offsetWidth;\n var wrapperHeight = wrapperComponent.offsetHeight;\n var contentWidth = contentComponent.offsetWidth;\n var contentHeight = contentComponent.offsetHeight;\n var newContentWidth = contentWidth * newScale;\n var newContentHeight = contentHeight * newScale;\n var newDiffWidth = wrapperWidth - newContentWidth;\n var newDiffHeight = wrapperHeight - newContentHeight;\n return {\n wrapperWidth: wrapperWidth,\n wrapperHeight: wrapperHeight,\n newContentWidth: newContentWidth,\n newDiffWidth: newDiffWidth,\n newContentHeight: newContentHeight,\n newDiffHeight: newDiffHeight,\n };\n}\nvar getBounds = function (wrapperWidth, newContentWidth, diffWidth, wrapperHeight, newContentHeight, diffHeight, centerZoomedOut) {\n var scaleWidthFactor = wrapperWidth > newContentWidth\n ? diffWidth * (centerZoomedOut ? 1 : 0.5)\n : 0;\n var scaleHeightFactor = wrapperHeight > newContentHeight\n ? diffHeight * (centerZoomedOut ? 1 : 0.5)\n : 0;\n var minPositionX = wrapperWidth - newContentWidth - scaleWidthFactor;\n var maxPositionX = scaleWidthFactor;\n var minPositionY = wrapperHeight - newContentHeight - scaleHeightFactor;\n var maxPositionY = scaleHeightFactor;\n return { minPositionX: minPositionX, maxPositionX: maxPositionX, minPositionY: minPositionY, maxPositionY: maxPositionY };\n};\nvar calculateBounds = function (contextInstance, newScale) {\n var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;\n var centerZoomedOut = contextInstance.setup.centerZoomedOut;\n if (!wrapperComponent || !contentComponent) {\n throw new Error(\"Components are not mounted\");\n }\n var _a = getComponentsSizes(wrapperComponent, contentComponent, newScale), wrapperWidth = _a.wrapperWidth, wrapperHeight = _a.wrapperHeight, newContentWidth = _a.newContentWidth, newDiffWidth = _a.newDiffWidth, newContentHeight = _a.newContentHeight, newDiffHeight = _a.newDiffHeight;\n var bounds = getBounds(wrapperWidth, newContentWidth, newDiffWidth, wrapperHeight, newContentHeight, newDiffHeight, Boolean(centerZoomedOut));\n return bounds;\n};\n/**\n * Keeps value between given bounds, used for limiting view to given boundaries\n * 1# eg. boundLimiter(2, 0, 3, true) => 2\n * 2# eg. boundLimiter(4, 0, 3, true) => 3\n * 3# eg. boundLimiter(-2, 0, 3, true) => 0\n * 4# eg. boundLimiter(10, 0, 3, false) => 10\n */\nvar boundLimiter = function (value, minBound, maxBound, isActive) {\n if (!isActive)\n return roundNumber(value, 2);\n if (value < minBound)\n return roundNumber(minBound, 2);\n if (value > maxBound)\n return roundNumber(maxBound, 2);\n return roundNumber(value, 2);\n};\nvar handleCalculateBounds = function (contextInstance, newScale) {\n var bounds = calculateBounds(contextInstance, newScale);\n // Save bounds\n contextInstance.bounds = bounds;\n return bounds;\n};\nfunction getMouseBoundedPosition(positionX, positionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent) {\n var minPositionX = bounds.minPositionX, minPositionY = bounds.minPositionY, maxPositionX = bounds.maxPositionX, maxPositionY = bounds.maxPositionY;\n var paddingX = 0;\n var paddingY = 0;\n if (wrapperComponent) {\n paddingX = paddingValueX;\n paddingY = paddingValueY;\n }\n var x = boundLimiter(positionX, minPositionX - paddingX, maxPositionX + paddingX, limitToBounds);\n var y = boundLimiter(positionY, minPositionY - paddingY, maxPositionY + paddingY, limitToBounds);\n return { x: x, y: y };\n}\n\nfunction handleCalculateZoomPositions(contextInstance, mouseX, mouseY, newScale, bounds, limitToBounds) {\n var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;\n var scaleDifference = newScale - scale;\n if (typeof mouseX !== \"number\" || typeof mouseY !== \"number\") {\n console.error(\"Mouse X and Y position were not provided!\");\n return { x: positionX, y: positionY };\n }\n var calculatedPositionX = positionX - mouseX * scaleDifference;\n var calculatedPositionY = positionY - mouseY * scaleDifference;\n // do not limit to bounds when there is padding animation,\n // it causes animation strange behaviour\n var newPositions = getMouseBoundedPosition(calculatedPositionX, calculatedPositionY, bounds, limitToBounds, 0, 0, null);\n return newPositions;\n}\nfunction checkZoomBounds(zoom, minScale, maxScale, zoomPadding, enablePadding) {\n var scalePadding = enablePadding ? zoomPadding : 0;\n var minScaleWithPadding = minScale - scalePadding;\n if (!Number.isNaN(maxScale) && zoom >= maxScale)\n return maxScale;\n if (!Number.isNaN(minScale) && zoom <= minScaleWithPadding)\n return minScaleWithPadding;\n return zoom;\n}\n\nvar isPanningStartAllowed = function (contextInstance, event) {\n var excluded = contextInstance.setup.panning.excluded;\n var isInitialized = contextInstance.isInitialized, wrapperComponent = contextInstance.wrapperComponent;\n var target = event.target;\n var targetIsShadowDom = \"shadowRoot\" in target && \"composedPath\" in event;\n var isWrapperChild = targetIsShadowDom\n ? event.composedPath().some(function (el) {\n if (!(el instanceof Element)) {\n return false;\n }\n return wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(el);\n })\n : wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(target);\n var isAllowed = isInitialized && target && isWrapperChild;\n if (!isAllowed)\n return false;\n var isExcluded = isExcludedNode(target, excluded);\n if (isExcluded)\n return false;\n return true;\n};\nvar isPanningAllowed = function (contextInstance) {\n var isInitialized = contextInstance.isInitialized, isPanning = contextInstance.isPanning, setup = contextInstance.setup;\n var disabled = setup.panning.disabled;\n var isAllowed = isInitialized && isPanning && !disabled;\n if (!isAllowed)\n return false;\n return true;\n};\nvar handlePanningSetup = function (contextInstance, event) {\n var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY;\n contextInstance.isPanning = true;\n // Panning with mouse\n var x = event.clientX;\n var y = event.clientY;\n contextInstance.startCoords = { x: x - positionX, y: y - positionY };\n};\nvar handleTouchPanningSetup = function (contextInstance, event) {\n var touches = event.touches;\n var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY;\n contextInstance.isPanning = true;\n // Panning with touch\n var oneFingerTouch = touches.length === 1;\n if (oneFingerTouch) {\n var x = touches[0].clientX;\n var y = touches[0].clientY;\n contextInstance.startCoords = { x: x - positionX, y: y - positionY };\n }\n};\nfunction handlePanToBounds(contextInstance) {\n var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;\n var _b = contextInstance.setup, disabled = _b.disabled, limitToBounds = _b.limitToBounds, centerZoomedOut = _b.centerZoomedOut;\n var wrapperComponent = contextInstance.wrapperComponent;\n if (disabled || !wrapperComponent || !contextInstance.bounds)\n return;\n var _c = contextInstance.bounds, maxPositionX = _c.maxPositionX, minPositionX = _c.minPositionX, maxPositionY = _c.maxPositionY, minPositionY = _c.minPositionY;\n var xChanged = positionX > maxPositionX || positionX < minPositionX;\n var yChanged = positionY > maxPositionY || positionY < minPositionY;\n var mousePosX = positionX > maxPositionX\n ? wrapperComponent.offsetWidth\n : contextInstance.setup.minPositionX || 0;\n var mousePosY = positionY > maxPositionY\n ? wrapperComponent.offsetHeight\n : contextInstance.setup.minPositionY || 0;\n var _d = handleCalculateZoomPositions(contextInstance, mousePosX, mousePosY, scale, contextInstance.bounds, limitToBounds || centerZoomedOut), x = _d.x, y = _d.y;\n return {\n scale: scale,\n positionX: xChanged ? x : positionX,\n positionY: yChanged ? y : positionY,\n };\n}\nfunction handleNewPosition(contextInstance, newPositionX, newPositionY, paddingValueX, paddingValueY) {\n var limitToBounds = contextInstance.setup.limitToBounds;\n var wrapperComponent = contextInstance.wrapperComponent, bounds = contextInstance.bounds;\n var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;\n if (wrapperComponent === null ||\n bounds === null ||\n (newPositionX === positionX && newPositionY === positionY)) {\n return;\n }\n var _b = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent), x = _b.x, y = _b.y;\n contextInstance.setTransformState(scale, x, y);\n}\nvar getPanningClientPosition = function (contextInstance, clientX, clientY) {\n var startCoords = contextInstance.startCoords, transformState = contextInstance.transformState;\n var panning = contextInstance.setup.panning;\n var lockAxisX = panning.lockAxisX, lockAxisY = panning.lockAxisY;\n var positionX = transformState.positionX, positionY = transformState.positionY;\n if (!startCoords) {\n return { x: positionX, y: positionY };\n }\n var mouseX = clientX - startCoords.x;\n var mouseY = clientY - startCoords.y;\n var newPositionX = lockAxisX ? positionX : mouseX;\n var newPositionY = lockAxisY ? positionY : mouseY;\n return { x: newPositionX, y: newPositionY };\n};\nvar getPaddingValue = function (contextInstance, size) {\n var setup = contextInstance.setup, transformState = contextInstance.transformState;\n var scale = transformState.scale;\n var minScale = setup.minScale, disablePadding = setup.disablePadding;\n if (size > 0 && scale >= minScale && !disablePadding) {\n return size;\n }\n return 0;\n};\n\nvar isVelocityCalculationAllowed = function (contextInstance) {\n var mounted = contextInstance.mounted;\n var _a = contextInstance.setup, disabled = _a.disabled, velocityAnimation = _a.velocityAnimation;\n var scale = contextInstance.transformState.scale;\n var disabledVelocity = velocityAnimation.disabled;\n var isAllowed = !disabledVelocity || scale > 1 || !disabled || mounted;\n if (!isAllowed)\n return false;\n return true;\n};\nvar isVelocityAllowed = function (contextInstance) {\n var mounted = contextInstance.mounted, velocity = contextInstance.velocity, bounds = contextInstance.bounds;\n var _a = contextInstance.setup, disabled = _a.disabled, velocityAnimation = _a.velocityAnimation;\n var scale = contextInstance.transformState.scale;\n var disabledVelocity = velocityAnimation.disabled;\n var isAllowed = !disabledVelocity || scale > 1 || !disabled || mounted;\n if (!isAllowed)\n return false;\n if (!velocity || !bounds)\n return false;\n return true;\n};\nfunction getVelocityMoveTime(contextInstance, velocity) {\n var velocityAnimation = contextInstance.setup.velocityAnimation;\n var equalToMove = velocityAnimation.equalToMove, animationTime = velocityAnimation.animationTime, sensitivity = velocityAnimation.sensitivity;\n if (equalToMove) {\n return animationTime * velocity * sensitivity;\n }\n return animationTime;\n}\nfunction getVelocityPosition(newPosition, startPosition, currentPosition, isLocked, limitToBounds, minPosition, maxPosition, minTarget, maxTarget, step) {\n if (limitToBounds) {\n if (startPosition > maxPosition && currentPosition > maxPosition) {\n var calculatedPosition = maxPosition + (newPosition - maxPosition) * step;\n if (calculatedPosition > maxTarget)\n return maxTarget;\n if (calculatedPosition < maxPosition)\n return maxPosition;\n return calculatedPosition;\n }\n if (startPosition < minPosition && currentPosition < minPosition) {\n var calculatedPosition = minPosition + (newPosition - minPosition) * step;\n if (calculatedPosition < minTarget)\n return minTarget;\n if (calculatedPosition > minPosition)\n return minPosition;\n return calculatedPosition;\n }\n }\n if (isLocked)\n return startPosition;\n return boundLimiter(newPosition, minPosition, maxPosition, limitToBounds);\n}\n\nfunction getSizeMultiplier(wrapperComponent, equalToMove) {\n var defaultMultiplier = 1;\n if (equalToMove) {\n return Math.min(defaultMultiplier, wrapperComponent.offsetWidth / window.innerWidth);\n }\n return defaultMultiplier;\n}\nfunction handleCalculateVelocity(contextInstance, position) {\n var isAllowed = isVelocityCalculationAllowed(contextInstance);\n if (!isAllowed) {\n return;\n }\n var lastMousePosition = contextInstance.lastMousePosition, velocityTime = contextInstance.velocityTime, setup = contextInstance.setup;\n var wrapperComponent = contextInstance.wrapperComponent;\n var equalToMove = setup.velocityAnimation.equalToMove;\n var now = Date.now();\n if (lastMousePosition && velocityTime && wrapperComponent) {\n var sizeMultiplier = getSizeMultiplier(wrapperComponent, equalToMove);\n var distanceX = position.x - lastMousePosition.x;\n var distanceY = position.y - lastMousePosition.y;\n var velocityX = distanceX / sizeMultiplier;\n var velocityY = distanceY / sizeMultiplier;\n var interval = now - velocityTime;\n var speed = distanceX * distanceX + distanceY * distanceY;\n var velocity = Math.sqrt(speed) / interval;\n contextInstance.velocity = { velocityX: velocityX, velocityY: velocityY, total: velocity };\n }\n contextInstance.lastMousePosition = position;\n contextInstance.velocityTime = now;\n}\nfunction handleVelocityPanning(contextInstance) {\n var velocity = contextInstance.velocity, bounds = contextInstance.bounds, setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;\n var isAllowed = isVelocityAllowed(contextInstance);\n if (!isAllowed || !velocity || !bounds || !wrapperComponent) {\n return;\n }\n var velocityX = velocity.velocityX, velocityY = velocity.velocityY, total = velocity.total;\n var maxPositionX = bounds.maxPositionX, minPositionX = bounds.minPositionX, maxPositionY = bounds.maxPositionY, minPositionY = bounds.minPositionY;\n var limitToBounds = setup.limitToBounds, alignmentAnimation = setup.alignmentAnimation;\n var zoomAnimation = setup.zoomAnimation, panning = setup.panning;\n var lockAxisY = panning.lockAxisY, lockAxisX = panning.lockAxisX;\n var animationType = zoomAnimation.animationType;\n var sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY, velocityAlignmentTime = alignmentAnimation.velocityAlignmentTime;\n var alignAnimationTime = velocityAlignmentTime;\n var moveAnimationTime = getVelocityMoveTime(contextInstance, total);\n var finalAnimationTime = Math.max(moveAnimationTime, alignAnimationTime);\n var paddingValueX = getPaddingValue(contextInstance, sizeX);\n var paddingValueY = getPaddingValue(contextInstance, sizeY);\n var paddingX = (paddingValueX * wrapperComponent.offsetWidth) / 100;\n var paddingY = (paddingValueY * wrapperComponent.offsetHeight) / 100;\n var maxTargetX = maxPositionX + paddingX;\n var minTargetX = minPositionX - paddingX;\n var maxTargetY = maxPositionY + paddingY;\n var minTargetY = minPositionY - paddingY;\n var startState = contextInstance.transformState;\n var startTime = new Date().getTime();\n handleSetupAnimation(contextInstance, animationType, finalAnimationTime, function (step) {\n var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;\n var frameTime = new Date().getTime() - startTime;\n var animationProgress = frameTime / alignAnimationTime;\n var alignAnimation = animations[alignmentAnimation.animationType];\n var alignStep = 1 - alignAnimation(Math.min(1, animationProgress));\n var customStep = 1 - step;\n var newPositionX = positionX + velocityX * customStep;\n var newPositionY = positionY + velocityY * customStep;\n var currentPositionX = getVelocityPosition(newPositionX, startState.positionX, positionX, lockAxisX, limitToBounds, minPositionX, maxPositionX, minTargetX, maxTargetX, alignStep);\n var currentPositionY = getVelocityPosition(newPositionY, startState.positionY, positionY, lockAxisY, limitToBounds, minPositionY, maxPositionY, minTargetY, maxTargetY, alignStep);\n if (positionX !== newPositionX || positionY !== newPositionY) {\n contextInstance.setTransformState(scale, currentPositionX, currentPositionY);\n }\n });\n}\n\nfunction handlePanningStart(contextInstance, event) {\n var scale = contextInstance.transformState.scale;\n handleCancelAnimation(contextInstance);\n handleCalculateBounds(contextInstance, scale);\n if (window.TouchEvent !== undefined && event instanceof TouchEvent) {\n handleTouchPanningSetup(contextInstance, event);\n }\n else {\n handlePanningSetup(contextInstance, event);\n }\n}\nfunction handleAlignToBounds(contextInstance) {\n var scale = contextInstance.transformState.scale;\n var _a = contextInstance.setup, minScale = _a.minScale, alignmentAnimation = _a.alignmentAnimation;\n var disabled = alignmentAnimation.disabled, sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY, animationTime = alignmentAnimation.animationTime, animationType = alignmentAnimation.animationType;\n var isDisabled = disabled || scale < minScale || (!sizeX && !sizeY);\n if (isDisabled)\n return;\n var targetState = handlePanToBounds(contextInstance);\n if (targetState) {\n animate(contextInstance, targetState, animationTime, animationType);\n }\n}\nfunction handlePanning(contextInstance, clientX, clientY) {\n var startCoords = contextInstance.startCoords, setup = contextInstance.setup;\n var _a = setup.alignmentAnimation, sizeX = _a.sizeX, sizeY = _a.sizeY;\n if (!startCoords)\n return;\n var _b = getPanningClientPosition(contextInstance, clientX, clientY), x = _b.x, y = _b.y;\n var paddingValueX = getPaddingValue(contextInstance, sizeX);\n var paddingValueY = getPaddingValue(contextInstance, sizeY);\n handleCalculateVelocity(contextInstance, { x: x, y: y });\n handleNewPosition(contextInstance, x, y, paddingValueX, paddingValueY);\n}\nfunction handlePanningEnd(contextInstance) {\n if (contextInstance.isPanning) {\n var velocityDisabled = contextInstance.setup.panning.velocityDisabled;\n var velocity = contextInstance.velocity, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;\n contextInstance.isPanning = false;\n contextInstance.animate = false;\n contextInstance.animation = null;\n var wrapperRect = wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.getBoundingClientRect();\n var contentRect = contentComponent === null || contentComponent === void 0 ? void 0 : contentComponent.getBoundingClientRect();\n var wrapperWidth = (wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.width) || 0;\n var wrapperHeight = (wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.height) || 0;\n var contentWidth = (contentRect === null || contentRect === void 0 ? void 0 : contentRect.width) || 0;\n var contentHeight = (contentRect === null || contentRect === void 0 ? void 0 : contentRect.height) || 0;\n var isZoomed = wrapperWidth < contentWidth || wrapperHeight < contentHeight;\n var shouldAnimate = !velocityDisabled && velocity && (velocity === null || velocity === void 0 ? void 0 : velocity.total) > 0.1 && isZoomed;\n if (shouldAnimate) {\n handleVelocityPanning(contextInstance);\n }\n else {\n handleAlignToBounds(contextInstance);\n }\n }\n}\n\nfunction handleZoomToPoint(contextInstance, scale, mouseX, mouseY) {\n var _a = contextInstance.setup, minScale = _a.minScale, maxScale = _a.maxScale, limitToBounds = _a.limitToBounds;\n var newScale = checkZoomBounds(roundNumber(scale, 2), minScale, maxScale, 0, false);\n var bounds = handleCalculateBounds(contextInstance, newScale);\n var _b = handleCalculateZoomPositions(contextInstance, mouseX, mouseY, newScale, bounds, limitToBounds), x = _b.x, y = _b.y;\n return { scale: newScale, positionX: x, positionY: y };\n}\nfunction handleAlignToScaleBounds(contextInstance, mousePositionX, mousePositionY) {\n var scale = contextInstance.transformState.scale;\n var wrapperComponent = contextInstance.wrapperComponent;\n var _a = contextInstance.setup, minScale = _a.minScale, limitToBounds = _a.limitToBounds, zoomAnimation = _a.zoomAnimation;\n var disabled = zoomAnimation.disabled, animationTime = zoomAnimation.animationTime, animationType = zoomAnimation.animationType;\n var isDisabled = disabled || scale >= minScale;\n if (scale >= 1 || limitToBounds) {\n // fire fit to bounds animation\n handleAlignToBounds(contextInstance);\n }\n if (isDisabled || !wrapperComponent || !contextInstance.mounted)\n return;\n var mouseX = mousePositionX || wrapperComponent.offsetWidth / 2;\n var mouseY = mousePositionY || wrapperComponent.offsetHeight / 2;\n var targetState = handleZoomToPoint(contextInstance, minScale, mouseX, mouseY);\n if (targetState) {\n animate(contextInstance, targetState, animationTime, animationType);\n }\n}\n\n/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n\r\nvar __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n };\r\n return __assign.apply(this, arguments);\r\n};\r\n\r\nfunction __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nfunction __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\n\nvar initialState = {\n previousScale: 1,\n scale: 1,\n positionX: 0,\n positionY: 0,\n};\nvar initialSetup = {\n disabled: false,\n minPositionX: null,\n maxPositionX: null,\n minPositionY: null,\n maxPositionY: null,\n minScale: 1,\n maxScale: 8,\n limitToBounds: true,\n centerZoomedOut: false,\n centerOnInit: false,\n disablePadding: false,\n smooth: true,\n wheel: {\n step: 0.2,\n disabled: false,\n smoothStep: 0.001,\n wheelDisabled: false,\n touchPadDisabled: false,\n activationKeys: [],\n excluded: [],\n },\n panning: {\n disabled: false,\n velocityDisabled: false,\n lockAxisX: false,\n lockAxisY: false,\n allowLeftClickPan: true,\n allowMiddleClickPan: true,\n allowRightClickPan: true,\n wheelPanning: false,\n activationKeys: [],\n excluded: [],\n },\n pinch: {\n step: 5,\n disabled: false,\n excluded: [],\n },\n doubleClick: {\n disabled: false,\n step: 0.7,\n mode: \"zoomIn\",\n animationType: \"easeOut\",\n animationTime: 200,\n excluded: [],\n },\n zoomAnimation: {\n disabled: false,\n size: 0.4,\n animationTime: 200,\n animationType: \"easeOut\",\n },\n alignmentAnimation: {\n disabled: false,\n sizeX: 100,\n sizeY: 100,\n animationTime: 200,\n velocityAlignmentTime: 400,\n animationType: \"easeOut\",\n },\n velocityAnimation: {\n disabled: false,\n sensitivity: 1,\n animationTime: 400,\n animationType: \"easeOut\",\n equalToMove: true,\n },\n};\n\nvar createState = function (props) {\n var _a, _b, _c, _d;\n return {\n previousScale: (_a = props.initialScale) !== null && _a !== void 0 ? _a : initialState.scale,\n scale: (_b = props.initialScale) !== null && _b !== void 0 ? _b : initialState.scale,\n positionX: (_c = props.initialPositionX) !== null && _c !== void 0 ? _c : initialState.positionX,\n positionY: (_d = props.initialPositionY) !== null && _d !== void 0 ? _d : initialState.positionY,\n };\n};\nvar createSetup = function (props) {\n var newSetup = __assign({}, initialSetup);\n Object.keys(props).forEach(function (key) {\n var validValue = typeof props[key] !== \"undefined\";\n var validParameter = typeof initialSetup[key] !== \"undefined\";\n if (validParameter && validValue) {\n var dataType = Object.prototype.toString.call(initialSetup[key]);\n var isObject = dataType === \"[object Object]\";\n var isArray = dataType === \"[object Array]\";\n if (isObject) {\n newSetup[key] = __assign(__assign({}, initialSetup[key]), props[key]);\n }\n else if (isArray) {\n newSetup[key] = __spreadArray(__spreadArray([], initialSetup[key], true), props[key], true);\n }\n else {\n newSetup[key] = props[key];\n }\n }\n });\n return newSetup;\n};\n\nvar handleCalculateButtonZoom = function (contextInstance, delta, step) {\n var scale = contextInstance.transformState.scale;\n var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;\n var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, smooth = setup.smooth;\n var size = zoomAnimation.size;\n if (!wrapperComponent) {\n throw new Error(\"Wrapper is not mounted\");\n }\n var targetScale = smooth\n ? scale * Math.exp(delta * step)\n : scale + delta * step;\n var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, false);\n return newScale;\n};\nfunction handleZoomToViewCenter(contextInstance, delta, step, animationTime, animationType) {\n var wrapperComponent = contextInstance.wrapperComponent;\n var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;\n if (!wrapperComponent)\n return console.error(\"No WrapperComponent found\");\n var wrapperWidth = wrapperComponent.offsetWidth;\n var wrapperHeight = wrapperComponent.offsetHeight;\n var mouseX = (wrapperWidth / 2 - positionX) / scale;\n var mouseY = (wrapperHeight / 2 - positionY) / scale;\n var newScale = handleCalculateButtonZoom(contextInstance, delta, step);\n var targetState = handleZoomToPoint(contextInstance, newScale, mouseX, mouseY);\n if (!targetState) {\n return console.error(\"Error during zoom event. New transformation state was not calculated.\");\n }\n animate(contextInstance, targetState, animationTime, animationType);\n}\nfunction resetTransformations(contextInstance, animationTime, animationType, onResetTransformation) {\n var setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;\n var limitToBounds = setup.limitToBounds;\n var initialTransformation = createState(contextInstance.props);\n var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;\n if (!wrapperComponent)\n return;\n var newBounds = calculateBounds(contextInstance, initialTransformation.scale);\n var boundedPositions = getMouseBoundedPosition(initialTransformation.positionX, initialTransformation.positionY, newBounds, limitToBounds, 0, 0, wrapperComponent);\n var newState = {\n scale: initialTransformation.scale,\n positionX: boundedPositions.x,\n positionY: boundedPositions.y,\n };\n if (scale === initialTransformation.scale &&\n positionX === initialTransformation.positionX &&\n positionY === initialTransformation.positionY) {\n return;\n }\n onResetTransformation === null || onResetTransformation === void 0 ? void 0 : onResetTransformation();\n animate(contextInstance, newState, animationTime, animationType);\n}\nfunction getOffset(element, wrapper, content, state) {\n var offset = element.getBoundingClientRect();\n var wrapperOffset = wrapper.getBoundingClientRect();\n var contentOffset = content.getBoundingClientRect();\n var xOff = wrapperOffset.x * state.scale;\n var yOff = wrapperOffset.y * state.scale;\n return {\n x: (offset.x - contentOffset.x + xOff) / state.scale,\n y: (offset.y - contentOffset.y + yOff) / state.scale,\n };\n}\nfunction calculateZoomToNode(contextInstance, node, customZoom) {\n var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent, transformState = contextInstance.transformState;\n var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, minScale = _a.minScale, maxScale = _a.maxScale;\n if (!wrapperComponent || !contentComponent)\n return transformState;\n var wrapperRect = wrapperComponent.getBoundingClientRect();\n var nodeRect = node.getBoundingClientRect();\n var nodeOffset = getOffset(node, wrapperComponent, contentComponent, transformState);\n var nodeLeft = nodeOffset.x;\n var nodeTop = nodeOffset.y;\n var nodeWidth = nodeRect.width / transformState.scale;\n var nodeHeight = nodeRect.height / transformState.scale;\n var scaleX = wrapperComponent.offsetWidth / nodeWidth;\n var scaleY = wrapperComponent.offsetHeight / nodeHeight;\n var newScale = checkZoomBounds(customZoom || Math.min(scaleX, scaleY), minScale, maxScale, 0, false);\n var offsetX = (wrapperRect.width - nodeWidth * newScale) / 2;\n var offsetY = (wrapperRect.height - nodeHeight * newScale) / 2;\n var newPositionX = (wrapperRect.left - nodeLeft) * newScale + offsetX;\n var newPositionY = (wrapperRect.top - nodeTop) * newScale + offsetY;\n var bounds = calculateBounds(contextInstance, newScale);\n var _b = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, 0, 0, wrapperComponent), x = _b.x, y = _b.y;\n return { positionX: x, positionY: y, scale: newScale };\n}\n\nvar zoomIn = function (contextInstance) {\n return function (step, animationTime, animationType) {\n if (step === void 0) { step = 0.5; }\n if (animationTime === void 0) { animationTime = 300; }\n if (animationType === void 0) { animationType = \"easeOut\"; }\n handleZoomToViewCenter(contextInstance, 1, step, animationTime, animationType);\n };\n};\nvar zoomOut = function (contextInstance) {\n return function (step, animationTime, animationType) {\n if (step === void 0) { step = 0.5; }\n if (animationTime === void 0) { animationTime = 300; }\n if (animationType === void 0) { animationType = \"easeOut\"; }\n handleZoomToViewCenter(contextInstance, -1, step, animationTime, animationType);\n };\n};\nvar setTransform = function (contextInstance) {\n return function (newPositionX, newPositionY, newScale, animationTime, animationType) {\n if (animationTime === void 0) { animationTime = 300; }\n if (animationType === void 0) { animationType = \"easeOut\"; }\n var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;\n var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;\n var disabled = contextInstance.setup.disabled;\n if (disabled || !wrapperComponent || !contentComponent)\n return;\n var targetState = {\n positionX: Number.isNaN(newPositionX) ? positionX : newPositionX,\n positionY: Number.isNaN(newPositionY) ? positionY : newPositionY,\n scale: Number.isNaN(newScale) ? scale : newScale,\n };\n animate(contextInstance, targetState, animationTime, animationType);\n };\n};\nvar resetTransform = function (contextInstance) {\n return function (animationTime, animationType) {\n if (animationTime === void 0) { animationTime = 200; }\n if (animationType === void 0) { animationType = \"easeOut\"; }\n resetTransformations(contextInstance, animationTime, animationType);\n };\n};\nvar centerView = function (contextInstance) {\n return function (scale, animationTime, animationType) {\n if (animationTime === void 0) { animationTime = 200; }\n if (animationType === void 0) { animationType = \"easeOut\"; }\n var transformState = contextInstance.transformState, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;\n if (wrapperComponent && contentComponent) {\n var targetState = getCenterPosition(scale || transformState.scale, wrapperComponent, contentComponent);\n animate(contextInstance, targetState, animationTime, animationType);\n }\n };\n};\nvar zoomToElement = function (contextInstance) {\n return function (node, scale, animationTime, animationType) {\n if (animationTime === void 0) { animationTime = 600; }\n if (animationType === void 0) { animationType = \"easeOut\"; }\n handleCancelAnimation(contextInstance);\n var wrapperComponent = contextInstance.wrapperComponent;\n var target = typeof node === \"string\" ? document.getElementById(node) : node;\n if (wrapperComponent && target && wrapperComponent.contains(target)) {\n var targetState = calculateZoomToNode(contextInstance, target, scale);\n animate(contextInstance, targetState, animationTime, animationType);\n }\n };\n};\n\nvar getControls = function (contextInstance) {\n return {\n instance: contextInstance,\n zoomIn: zoomIn(contextInstance),\n zoomOut: zoomOut(contextInstance),\n setTransform: setTransform(contextInstance),\n resetTransform: resetTransform(contextInstance),\n centerView: centerView(contextInstance),\n zoomToElement: zoomToElement(contextInstance),\n };\n};\nvar getState = function (contextInstance) {\n return {\n instance: contextInstance,\n state: contextInstance.transformState,\n };\n};\nvar getContext = function (contextInstance) {\n var ref = {};\n Object.assign(ref, getState(contextInstance));\n Object.assign(ref, getControls(contextInstance));\n return ref;\n};\n\n// We want to make event listeners non-passive, and to do so have to check\n// that browsers support EventListenerOptions in the first place.\n// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support\nvar passiveSupported = false;\nfunction makePassiveEventOption() {\n try {\n var options = {\n get passive() {\n // This function will be called when the browser\n // attempts to access the passive property.\n passiveSupported = true;\n return false;\n },\n };\n return options;\n }\n catch (err) {\n passiveSupported = false;\n return passiveSupported;\n }\n}\n\nvar isExcludedNode = function (node, excluded) {\n return excluded.some(function (exclude) {\n return node.matches(\"\".concat(exclude, \", .\").concat(exclude, \", \").concat(exclude, \" *, .\").concat(exclude, \" *\"));\n });\n};\nvar cancelTimeout = function (timeout) {\n if (timeout) {\n clearTimeout(timeout);\n }\n};\n\nvar getTransformStyles = function (x, y, scale) {\n // Standard translate prevents blurry svg on the safari\n return \"translate(\".concat(x, \"px, \").concat(y, \"px) scale(\").concat(scale, \")\");\n};\nvar getMatrixTransformStyles = function (x, y, scale) {\n // The shorthand for matrix does not work for Safari hence the need to explicitly use matrix3d\n // Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix\n var a = scale;\n var b = 0;\n var c = 0;\n var d = scale;\n var tx = x;\n var ty = y;\n return \"matrix3d(\".concat(a, \", \").concat(b, \", 0, 0, \").concat(c, \", \").concat(d, \", 0, 0, 0, 0, 1, 0, \").concat(tx, \", \").concat(ty, \", 0, 1)\");\n};\nvar getCenterPosition = function (scale, wrapperComponent, contentComponent) {\n var contentWidth = contentComponent.offsetWidth * scale;\n var contentHeight = contentComponent.offsetHeight * scale;\n var centerPositionX = (wrapperComponent.offsetWidth - contentWidth) / 2;\n var centerPositionY = (wrapperComponent.offsetHeight - contentHeight) / 2;\n return {\n scale: scale,\n positionX: centerPositionX,\n positionY: centerPositionY,\n };\n};\n\nfunction mergeRefs(refs) {\n return function (value) {\n refs.forEach(function (ref) {\n if (typeof ref === \"function\") {\n ref(value);\n }\n else if (ref != null) {\n ref.current = value;\n }\n });\n };\n}\n\nvar isWheelAllowed = function (contextInstance, event) {\n var _a = contextInstance.setup.wheel, disabled = _a.disabled, wheelDisabled = _a.wheelDisabled, touchPadDisabled = _a.touchPadDisabled, excluded = _a.excluded;\n var isInitialized = contextInstance.isInitialized, isPanning = contextInstance.isPanning;\n var target = event.target;\n var isAllowed = isInitialized && !isPanning && !disabled && target;\n if (!isAllowed)\n return false;\n // Event ctrlKey detects if touchpad action is executing wheel or pinch gesture\n if (wheelDisabled && !event.ctrlKey)\n return false;\n if (touchPadDisabled && event.ctrlKey)\n return false;\n var isExcluded = isExcludedNode(target, excluded);\n if (isExcluded)\n return false;\n return true;\n};\nvar getDeltaY = function (event) {\n if (event) {\n return event.deltaY < 0 ? 1 : -1;\n }\n return 0;\n};\nfunction getDelta(event, customDelta) {\n var deltaY = getDeltaY(event);\n var delta = checkIsNumber(customDelta, deltaY);\n return delta;\n}\nfunction getMousePosition(event, contentComponent, scale) {\n var contentRect = contentComponent.getBoundingClientRect();\n var mouseX = 0;\n var mouseY = 0;\n if (\"clientX\" in event) {\n // mouse position x, y over wrapper component\n mouseX = (event.clientX - contentRect.left) / scale;\n mouseY = (event.clientY - contentRect.top) / scale;\n }\n else {\n var touch = event.touches[0];\n mouseX = (touch.clientX - contentRect.left) / scale;\n mouseY = (touch.clientY - contentRect.top) / scale;\n }\n if (Number.isNaN(mouseX) || Number.isNaN(mouseY))\n console.error(\"No mouse or touch offset found\");\n return {\n x: mouseX,\n y: mouseY,\n };\n}\nvar handleCalculateWheelZoom = function (contextInstance, delta, step, disable, getTarget) {\n var scale = contextInstance.transformState.scale;\n var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;\n var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, disablePadding = setup.disablePadding;\n var size = zoomAnimation.size, disabled = zoomAnimation.disabled;\n if (!wrapperComponent) {\n throw new Error(\"Wrapper is not mounted\");\n }\n var targetScale = scale + delta * step;\n if (getTarget)\n return targetScale;\n var paddingEnabled = disable ? false : !disabled;\n var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, paddingEnabled && !disablePadding);\n return newScale;\n};\nvar handleWheelZoomStop = function (contextInstance, event) {\n var previousWheelEvent = contextInstance.previousWheelEvent;\n var scale = contextInstance.transformState.scale;\n var _a = contextInstance.setup, maxScale = _a.maxScale, minScale = _a.minScale;\n if (!previousWheelEvent)\n return false;\n if (scale < maxScale || scale > minScale)\n return true;\n if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))\n return true;\n if (previousWheelEvent.deltaY > 0 && previousWheelEvent.deltaY < event.deltaY)\n return true;\n if (previousWheelEvent.deltaY < 0 && previousWheelEvent.deltaY > event.deltaY)\n return true;\n if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))\n return true;\n return false;\n};\n\nvar isPinchStartAllowed = function (contextInstance, event) {\n var _a = contextInstance.setup.pinch, disabled = _a.disabled, excluded = _a.excluded;\n var isInitialized = contextInstance.isInitialized;\n var target = event.target;\n var isAllowed = isInitialized && !disabled && target;\n if (!isAllowed)\n return false;\n var isExcluded = isExcludedNode(target, excluded);\n if (isExcluded)\n return false;\n return true;\n};\nvar isPinchAllowed = function (contextInstance) {\n var disabled = contextInstance.setup.pinch.disabled;\n var isInitialized = contextInstance.isInitialized, pinchStartDistance = contextInstance.pinchStartDistance;\n var isAllowed = isInitialized && !disabled && pinchStartDistance;\n if (!isAllowed)\n return false;\n return true;\n};\nvar calculateTouchMidPoint = function (event, scale, contentComponent) {\n var contentRect = contentComponent.getBoundingClientRect();\n var touches = event.touches;\n var firstPointX = roundNumber(touches[0].clientX - contentRect.left, 5);\n var firstPointY = roundNumber(touches[0].clientY - contentRect.top, 5);\n var secondPointX = roundNumber(touches[1].clientX - contentRect.left, 5);\n var secondPointY = roundNumber(touches[1].clientY - contentRect.top, 5);\n return {\n x: (firstPointX + secondPointX) / 2 / scale,\n y: (firstPointY + secondPointY) / 2 / scale,\n };\n};\nvar getTouchDistance = function (event) {\n return Math.sqrt(Math.pow((event.touches[0].pageX - event.touches[1].pageX), 2) +\n Math.pow((event.touches[0].pageY - event.touches[1].pageY), 2));\n};\nvar calculatePinchZoom = function (contextInstance, currentDistance) {\n var pinchStartScale = contextInstance.pinchStartScale, pinchStartDistance = contextInstance.pinchStartDistance, setup = contextInstance.setup;\n var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, disablePadding = setup.disablePadding;\n var size = zoomAnimation.size, disabled = zoomAnimation.disabled;\n if (!pinchStartScale || pinchStartDistance === null || !currentDistance) {\n throw new Error(\"Pinch touches distance was not provided\");\n }\n if (currentDistance < 0) {\n return contextInstance.transformState.scale;\n }\n var touchProportion = currentDistance / pinchStartDistance;\n var scaleDifference = touchProportion * pinchStartScale;\n return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale, size, !disabled && !disablePadding);\n};\n\nvar wheelStopEventTime = 160;\nvar wheelAnimationTime = 100;\nvar handleWheelStart = function (contextInstance, event) {\n var _a = contextInstance.props, onWheelStart = _a.onWheelStart, onZoomStart = _a.onZoomStart;\n if (!contextInstance.wheelStopEventTimer) {\n handleCancelAnimation(contextInstance);\n handleCallback(getContext(contextInstance), event, onWheelStart);\n handleCallback(getContext(contextInstance), event, onZoomStart);\n }\n};\nvar handleWheelZoom = function (contextInstance, event) {\n var _a = contextInstance.props, onWheel = _a.onWheel, onZoom = _a.onZoom;\n var contentComponent = contextInstance.contentComponent, setup = contextInstance.setup, transformState = contextInstance.transformState;\n var scale = transformState.scale;\n var limitToBounds = setup.limitToBounds, centerZoomedOut = setup.centerZoomedOut, zoomAnimation = setup.zoomAnimation, wheel = setup.wheel, disablePadding = setup.disablePadding, smooth = setup.smooth;\n var size = zoomAnimation.size, disabled = zoomAnimation.disabled;\n var step = wheel.step, smoothStep = wheel.smoothStep;\n if (!contentComponent) {\n throw new Error(\"Component not mounted\");\n }\n event.preventDefault();\n event.stopPropagation();\n var delta = getDelta(event, null);\n var zoomStep = smooth ? smoothStep * Math.abs(event.deltaY) : step;\n var newScale = handleCalculateWheelZoom(contextInstance, delta, zoomStep, !event.ctrlKey);\n // if scale not change\n if (scale === newScale)\n return;\n var bounds = handleCalculateBounds(contextInstance, newScale);\n var mousePosition = getMousePosition(event, contentComponent, scale);\n var isPaddingDisabled = disabled || size === 0 || centerZoomedOut || disablePadding;\n var isLimitedToBounds = limitToBounds && isPaddingDisabled;\n var _b = handleCalculateZoomPositions(contextInstance, mousePosition.x, mousePosition.y, newScale, bounds, isLimitedToBounds), x = _b.x, y = _b.y;\n contextInstance.previousWheelEvent = event;\n contextInstance.setTransformState(newScale, x, y);\n handleCallback(getContext(contextInstance), event, onWheel);\n handleCallback(getContext(contextInstance), event, onZoom);\n};\nvar handleWheelStop = function (contextInstance, event) {\n var _a = contextInstance.props, onWheelStop = _a.onWheelStop, onZoomStop = _a.onZoomStop;\n // fire animation\n cancelTimeout(contextInstance.wheelAnimationTimer);\n contextInstance.wheelAnimationTimer = setTimeout(function () {\n if (!contextInstance.mounted)\n return;\n handleAlignToScaleBounds(contextInstance, event.x, event.y);\n contextInstance.wheelAnimationTimer = null;\n }, wheelAnimationTime);\n // Wheel stop event\n var hasStoppedZooming = handleWheelZoomStop(contextInstance, event);\n if (hasStoppedZooming) {\n cancelTimeout(contextInstance.wheelStopEventTimer);\n contextInstance.wheelStopEventTimer = setTimeout(function () {\n if (!contextInstance.mounted)\n return;\n contextInstance.wheelStopEventTimer = null;\n handleCallback(getContext(contextInstance), event, onWheelStop);\n handleCallback(getContext(contextInstance), event, onZoomStop);\n }, wheelStopEventTime);\n }\n};\n\nvar handlePinchStart = function (contextInstance, event) {\n var distance = getTouchDistance(event);\n contextInstance.pinchStartDistance = distance;\n contextInstance.lastDistance = distance;\n contextInstance.pinchStartScale = contextInstance.transformState.scale;\n contextInstance.isPanning = false;\n handleCancelAnimation(contextInstance);\n};\nvar handlePinchZoom = function (contextInstance, event) {\n var contentComponent = contextInstance.contentComponent, pinchStartDistance = contextInstance.pinchStartDistance;\n var scale = contextInstance.transformState.scale;\n var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, centerZoomedOut = _a.centerZoomedOut, zoomAnimation = _a.zoomAnimation;\n var disabled = zoomAnimation.disabled, size = zoomAnimation.size;\n // if one finger starts from outside of wrapper\n if (pinchStartDistance === null || !contentComponent)\n return;\n var midPoint = calculateTouchMidPoint(event, scale, contentComponent);\n // if touches goes off of the wrapper element\n if (!Number.isFinite(midPoint.x) || !Number.isFinite(midPoint.y))\n return;\n var currentDistance = getTouchDistance(event);\n var newScale = calculatePinchZoom(contextInstance, currentDistance);\n if (newScale === scale)\n return;\n var bounds = handleCalculateBounds(contextInstance, newScale);\n var isPaddingDisabled = disabled || size === 0 || centerZoomedOut;\n var isLimitedToBounds = limitToBounds && isPaddingDisabled;\n var _b = handleCalculateZoomPositions(contextInstance, midPoint.x, midPoint.y, newScale, bounds, isLimitedToBounds), x = _b.x, y = _b.y;\n contextInstance.pinchMidpoint = midPoint;\n contextInstance.lastDistance = currentDistance;\n contextInstance.setTransformState(newScale, x, y);\n};\nvar handlePinchStop = function (contextInstance) {\n var pinchMidpoint = contextInstance.pinchMidpoint;\n contextInstance.velocity = null;\n contextInstance.lastDistance = null;\n contextInstance.pinchMidpoint = null;\n contextInstance.pinchStartScale = null;\n contextInstance.pinchStartDistance = null;\n handleAlignToScaleBounds(contextInstance, pinchMidpoint === null || pinchMidpoint === void 0 ? void 0 : pinchMidpoint.x, pinchMidpoint === null || pinchMidpoint === void 0 ? void 0 : pinchMidpoint.y);\n};\n\nvar handleDoubleClickStop = function (contextInstance, event) {\n var onZoomStop = contextInstance.props.onZoomStop;\n var animationTime = contextInstance.setup.doubleClick.animationTime;\n cancelTimeout(contextInstance.doubleClickStopEventTimer);\n contextInstance.doubleClickStopEventTimer = setTimeout(function () {\n contextInstance.doubleClickStopEventTimer = null;\n handleCallback(getContext(contextInstance), event, onZoomStop);\n }, animationTime);\n};\nvar handleDoubleClickResetMode = function (contextInstance, event) {\n var _a = contextInstance.props, onZoomStart = _a.onZoomStart, onZoom = _a.onZoom;\n var _b = contextInstance.setup.doubleClick, animationTime = _b.animationTime, animationType = _b.animationType;\n handleCallback(getContext(contextInstance), event, onZoomStart);\n resetTransformations(contextInstance, animationTime, animationType, function () {\n return handleCallback(getContext(contextInstance), event, onZoom);\n });\n handleDoubleClickStop(contextInstance, event);\n};\nfunction getDoubleClickScale(mode, scale) {\n if (mode === \"toggle\") {\n return scale === 1 ? 1 : -1;\n }\n return mode === \"zoomOut\" ? -1 : 1;\n}\nfunction handleDoubleClick(contextInstance, event) {\n var setup = contextInstance.setup, doubleClickStopEventTimer = contextInstance.doubleClickStopEventTimer, transformState = contextInstance.transformState, contentComponent = contextInstance.contentComponent;\n var scale = transformState.scale;\n var _a = contextInstance.props, onZoomStart = _a.onZoomStart, onZoom = _a.onZoom;\n var _b = setup.doubleClick, disabled = _b.disabled, mode = _b.mode, step = _b.step, animationTime = _b.animationTime, animationType = _b.animationType;\n if (disabled)\n return;\n if (doubleClickStopEventTimer)\n return;\n if (mode === \"reset\") {\n return handleDoubleClickResetMode(contextInstance, event);\n }\n if (!contentComponent)\n return console.error(\"No ContentComponent found\");\n var delta = getDoubleClickScale(mode, contextInstance.transformState.scale);\n var newScale = handleCalculateButtonZoom(contextInstance, delta, step);\n // stop execution when scale didn't change\n if (scale === newScale)\n return;\n handleCallback(getContext(contextInstance), event, onZoomStart);\n var mousePosition = getMousePosition(event, contentComponent, scale);\n var targetState = handleZoomToPoint(contextInstance, newScale, mousePosition.x, mousePosition.y);\n if (!targetState) {\n return console.error(\"Error during zoom event. New transformation state was not calculated.\");\n }\n handleCallback(getContext(contextInstance), event, onZoom);\n animate(contextInstance, targetState, animationTime, animationType);\n handleDoubleClickStop(contextInstance, event);\n}\nvar isDoubleClickAllowed = function (contextInstance, event) {\n var isInitialized = contextInstance.isInitialized, setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;\n var _a = setup.doubleClick, disabled = _a.disabled, excluded = _a.excluded;\n var target = event.target;\n var isWrapperChild = wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(target);\n var isAllowed = isInitialized && target && isWrapperChild && !disabled;\n if (!isAllowed)\n return false;\n var isExcluded = isExcludedNode(target, excluded);\n if (isExcluded)\n return false;\n return true;\n};\n\nvar ZoomPanPinch = /** @class */ (function () {\n function ZoomPanPinch(props) {\n var _this = this;\n this.mounted = true;\n this.onChangeCallbacks = new Set();\n this.onInitCallbacks = new Set();\n // Components\n this.wrapperComponent = null;\n this.contentComponent = null;\n // Initialization\n this.isInitialized = false;\n this.bounds = null;\n // wheel helpers\n this.previousWheelEvent = null;\n this.wheelStopEventTimer = null;\n this.wheelAnimationTimer = null;\n // panning helpers\n this.isPanning = false;\n this.isWheelPanning = false;\n this.startCoords = null;\n this.lastTouch = null;\n // pinch helpers\n this.distance = null;\n this.lastDistance = null;\n this.pinchStartDistance = null;\n this.pinchStartScale = null;\n this.pinchMidpoint = null;\n // double click helpers\n this.doubleClickStopEventTimer = null;\n // velocity helpers\n this.velocity = null;\n this.velocityTime = null;\n this.lastMousePosition = null;\n // animations helpers\n this.animate = false;\n this.animation = null;\n this.maxBounds = null;\n // key press\n this.pressedKeys = {};\n this.mount = function () {\n _this.initializeWindowEvents();\n };\n this.unmount = function () {\n _this.cleanupWindowEvents();\n };\n this.update = function (newProps) {\n _this.props = newProps;\n handleCalculateBounds(_this, _this.transformState.scale);\n _this.setup = createSetup(newProps);\n };\n this.initializeWindowEvents = function () {\n var _a, _b;\n var passive = makePassiveEventOption();\n var currentDocument = (_a = _this.wrapperComponent) === null || _a === void 0 ? void 0 : _a.ownerDocument;\n var currentWindow = currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.defaultView;\n (_b = _this.wrapperComponent) === null || _b === void 0 ? void 0 : _b.addEventListener(\"wheel\", _this.onWheelPanning, passive);\n // Panning on window to allow panning when mouse is out of component wrapper\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener(\"mousedown\", _this.onPanningStart, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener(\"mousemove\", _this.onPanning, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener(\"mouseup\", _this.onPanningStop, passive);\n currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.addEventListener(\"mouseleave\", _this.clearPanning, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener(\"keyup\", _this.setKeyUnPressed, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener(\"keydown\", _this.setKeyPressed, passive);\n };\n this.cleanupWindowEvents = function () {\n var _a, _b;\n var passive = makePassiveEventOption();\n var currentDocument = (_a = _this.wrapperComponent) === null || _a === void 0 ? void 0 : _a.ownerDocument;\n var currentWindow = currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.defaultView;\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener(\"mousedown\", _this.onPanningStart, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener(\"mousemove\", _this.onPanning, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener(\"mouseup\", _this.onPanningStop, passive);\n currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.removeEventListener(\"mouseleave\", _this.clearPanning, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener(\"keyup\", _this.setKeyUnPressed, passive);\n currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener(\"keydown\", _this.setKeyPressed, passive);\n document.removeEventListener(\"mouseleave\", _this.clearPanning, passive);\n handleCancelAnimation(_this);\n (_b = _this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();\n };\n this.handleInitializeWrapperEvents = function (wrapper) {\n // Zooming events on wrapper\n var passive = makePassiveEventOption();\n wrapper.addEventListener(\"wheel\", _this.onWheelZoom, passive);\n wrapper.addEventListener(\"dblclick\", _this.onDoubleClick, passive);\n wrapper.addEventListener(\"touchstart\", _this.onTouchPanningStart, passive);\n wrapper.addEventListener(\"touchmove\", _this.onTouchPanning, passive);\n wrapper.addEventListener(\"touchend\", _this.onTouchPanningStop, passive);\n };\n this.handleInitialize = function (contentComponent) {\n var centerOnInit = _this.setup.centerOnInit;\n _this.applyTransformation();\n _this.onInitCallbacks.forEach(function (callback) { return callback(getContext(_this)); });\n if (centerOnInit) {\n _this.setCenter();\n _this.observer = new ResizeObserver(function () {\n var _a;\n var currentWidth = contentComponent.offsetWidth;\n var currentHeight = contentComponent.offsetHeight;\n if (currentWidth > 0 || currentHeight > 0) {\n _this.onInitCallbacks.forEach(function (callback) { return callback(getContext(_this)); });\n _this.setCenter();\n (_a = _this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();\n }\n });\n // if nothing about the contentComponent has changed after 5 seconds, disconnect the observer\n setTimeout(function () {\n var _a;\n (_a = _this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();\n }, 5000);\n // Start observing the target node for configured mutations\n _this.observer.observe(contentComponent);\n }\n };\n /// ///////\n // Zoom\n /// ///////\n this.onWheelZoom = function (event) {\n var disabled = _this.setup.disabled;\n if (disabled)\n return;\n var isAllowed = isWheelAllowed(_this, event);\n if (!isAllowed)\n return;\n var keysPressed = _this.isPressingKeys(_this.setup.wheel.activationKeys);\n if (!keysPressed)\n return;\n handleWheelStart(_this, event);\n handleWheelZoom(_this, event);\n handleWheelStop(_this, event);\n };\n /// ///////\n // Pan\n /// ///////\n this.onWheelPanning = function (event) {\n var _a = _this.setup, disabled = _a.disabled, wheel = _a.wheel, panning = _a.panning;\n if (!_this.wrapperComponent ||\n !_this.contentComponent ||\n disabled ||\n !wheel.wheelDisabled ||\n panning.disabled ||\n !panning.wheelPanning ||\n event.ctrlKey) {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n var _b = _this.transformState, positionX = _b.positionX, positionY = _b.positionY;\n var mouseX = positionX - event.deltaX;\n var mouseY = positionY - event.deltaY;\n var newPositionX = panning.lockAxisX ? positionX : mouseX;\n var newPositionY = panning.lockAxisY ? positionY : mouseY;\n var _c = _this.setup.alignmentAnimation, sizeX = _c.sizeX, sizeY = _c.sizeY;\n var paddingValueX = getPaddingValue(_this, sizeX);\n var paddingValueY = getPaddingValue(_this, sizeY);\n if (newPositionX === positionX && newPositionY === positionY)\n return;\n handleNewPosition(_this, newPositionX, newPositionY, paddingValueX, paddingValueY);\n };\n this.onPanningStart = function (event) {\n var disabled = _this.setup.disabled;\n var onPanningStart = _this.props.onPanningStart;\n if (disabled)\n return;\n var isAllowed = isPanningStartAllowed(_this, event);\n if (!isAllowed)\n return;\n var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);\n if (!keysPressed)\n return;\n if (event.button === 0 && !_this.setup.panning.allowLeftClickPan)\n return;\n if (event.button === 1 && !_this.setup.panning.allowMiddleClickPan)\n return;\n if (event.button === 2 && !_this.setup.panning.allowRightClickPan)\n return;\n event.preventDefault();\n event.stopPropagation();\n handleCancelAnimation(_this);\n handlePanningStart(_this, event);\n handleCallback(getContext(_this), event, onPanningStart);\n };\n this.onPanning = function (event) {\n var disabled = _this.setup.disabled;\n var onPanning = _this.props.onPanning;\n if (disabled)\n return;\n var isAllowed = isPanningAllowed(_this);\n if (!isAllowed)\n return;\n var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);\n if (!keysPressed)\n return;\n event.preventDefault();\n event.stopPropagation();\n handlePanning(_this, event.clientX, event.clientY);\n handleCallback(getContext(_this), event, onPanning);\n };\n this.onPanningStop = function (event) {\n var onPanningStop = _this.props.onPanningStop;\n if (_this.isPanning) {\n handlePanningEnd(_this);\n handleCallback(getContext(_this), event, onPanningStop);\n }\n };\n /// ///////\n // Pinch\n /// ///////\n this.onPinchStart = function (event) {\n var disabled = _this.setup.disabled;\n var _a = _this.props, onPinchingStart = _a.onPinchingStart, onZoomStart = _a.onZoomStart;\n if (disabled)\n return;\n var isAllowed = isPinchStartAllowed(_this, event);\n if (!isAllowed)\n return;\n handlePinchStart(_this, event);\n handleCancelAnimation(_this);\n handleCallback(getContext(_this), event, onPinchingStart);\n handleCallback(getContext(_this), event, onZoomStart);\n };\n this.onPinch = function (event) {\n var disabled = _this.setup.disabled;\n var _a = _this.props, onPinching = _a.onPinching, onZoom = _a.onZoom;\n if (disabled)\n return;\n var isAllowed = isPinchAllowed(_this);\n if (!isAllowed)\n return;\n event.preventDefault();\n event.stopPropagation();\n handlePinchZoom(_this, event);\n handleCallback(getContext(_this), event, onPinching);\n handleCallback(getContext(_this), event, onZoom);\n };\n this.onPinchStop = function (event) {\n var _a = _this.props, onPinchingStop = _a.onPinchingStop, onZoomStop = _a.onZoomStop;\n if (_this.pinchStartScale) {\n handlePinchStop(_this);\n handleCallback(getContext(_this), event, onPinchingStop);\n handleCallback(getContext(_this), event, onZoomStop);\n }\n };\n /// ///////\n // Touch\n /// ///////\n this.onTouchPanningStart = function (event) {\n var disabled = _this.setup.disabled;\n var onPanningStart = _this.props.onPanningStart;\n if (disabled)\n return;\n var isAllowed = isPanningStartAllowed(_this, event);\n if (!isAllowed)\n return;\n var isDoubleTap = _this.lastTouch && +new Date() - _this.lastTouch < 200;\n if (isDoubleTap && event.touches.length === 1) {\n _this.onDoubleClick(event);\n }\n else {\n _this.lastTouch = +new Date();\n handleCancelAnimation(_this);\n var touches = event.touches;\n var isPanningAction = touches.length === 1;\n var isPinchAction = touches.length === 2;\n if (isPanningAction) {\n handleCancelAnimation(_this);\n handlePanningStart(_this, event);\n handleCallback(getContext(_this), event, onPanningStart);\n }\n if (isPinchAction) {\n _this.onPinchStart(event);\n }\n }\n };\n this.onTouchPanning = function (event) {\n var disabled = _this.setup.disabled;\n var onPanning = _this.props.onPanning;\n if (_this.isPanning && event.touches.length === 1) {\n if (disabled)\n return;\n var isAllowed = isPanningAllowed(_this);\n if (!isAllowed)\n return;\n event.preventDefault();\n event.stopPropagation();\n var touch = event.touches[0];\n handlePanning(_this, touch.clientX, touch.clientY);\n handleCallback(getContext(_this), event, onPanning);\n }\n else if (event.touches.length > 1) {\n _this.onPinch(event);\n }\n };\n this.onTouchPanningStop = function (event) {\n _this.onPanningStop(event);\n _this.onPinchStop(event);\n };\n /// ///////\n // Double Click\n /// ///////\n this.onDoubleClick = function (event) {\n var disabled = _this.setup.disabled;\n if (disabled)\n return;\n var isAllowed = isDoubleClickAllowed(_this, event);\n if (!isAllowed)\n return;\n handleDoubleClick(_this, event);\n };\n /// ///////\n // Helpers\n /// ///////\n this.clearPanning = function (event) {\n if (_this.isPanning) {\n _this.onPanningStop(event);\n }\n };\n this.setKeyPressed = function (e) {\n _this.pressedKeys[e.key] = true;\n };\n this.setKeyUnPressed = function (e) {\n _this.pressedKeys[e.key] = false;\n };\n this.isPressingKeys = function (keys) {\n if (!keys.length) {\n return true;\n }\n return Boolean(keys.find(function (key) { return _this.pressedKeys[key]; }));\n };\n this.setTransformState = function (scale, positionX, positionY) {\n var onTransformed = _this.props.onTransformed;\n if (!Number.isNaN(scale) &&\n !Number.isNaN(positionX) &&\n !Number.isNaN(positionY)) {\n if (scale !== _this.transformState.scale) {\n _this.transformState.previousScale = _this.transformState.scale;\n _this.transformState.scale = scale;\n }\n _this.transformState.positionX = positionX;\n _this.transformState.positionY = positionY;\n _this.applyTransformation();\n var ctx_1 = getContext(_this);\n _this.onChangeCallbacks.forEach(function (callback) { return callback(ctx_1); });\n handleCallback(ctx_1, { scale: scale, positionX: positionX, positionY: positionY }, onTransformed);\n }\n else {\n console.error(\"Detected NaN set state values\");\n }\n };\n this.setCenter = function () {\n if (_this.wrapperComponent && _this.contentComponent) {\n var targetState = getCenterPosition(_this.transformState.scale, _this.wrapperComponent, _this.contentComponent);\n _this.setTransformState(targetState.scale, targetState.positionX, targetState.positionY);\n }\n };\n this.handleTransformStyles = function (x, y, scale) {\n if (_this.props.customTransform) {\n return _this.props.customTransform(x, y, scale);\n }\n return getTransformStyles(x, y, scale);\n };\n this.applyTransformation = function () {\n if (!_this.mounted || !_this.contentComponent)\n return;\n var _a = _this.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;\n var transform = _this.handleTransformStyles(positionX, positionY, scale);\n _this.contentComponent.style.transform = transform;\n };\n this.getContext = function () {\n return getContext(_this);\n };\n /**\n * Hooks\n */\n this.onChange = function (callback) {\n if (!_this.onChangeCallbacks.has(callback)) {\n _this.onChangeCallbacks.add(callback);\n }\n return function () {\n _this.onChangeCallbacks.delete(callback);\n };\n };\n this.onInit = function (callback) {\n if (!_this.onInitCallbacks.has(callback)) {\n _this.onInitCallbacks.add(callback);\n }\n return function () {\n _this.onInitCallbacks.delete(callback);\n };\n };\n /**\n * Initialization\n */\n this.init = function (wrapperComponent, contentComponent) {\n _this.cleanupWindowEvents();\n _this.wrapperComponent = wrapperComponent;\n _this.contentComponent = contentComponent;\n handleCalculateBounds(_this, _this.transformState.scale);\n _this.handleInitializeWrapperEvents(wrapperComponent);\n _this.handleInitialize(contentComponent);\n _this.initializeWindowEvents();\n _this.isInitialized = true;\n var ctx = getContext(_this);\n handleCallback(ctx, undefined, _this.props.onInit);\n };\n this.props = props;\n this.setup = createSetup(this.props);\n this.transformState = createState(this.props);\n }\n return ZoomPanPinch;\n}());\n\nvar Context = React.createContext(null);\nvar getContent = function (children, ctx) {\n if (typeof children === \"function\") {\n return children(ctx);\n }\n return children;\n};\nvar TransformWrapper = React.forwardRef(function (props, ref) {\n var instance = useRef(new ZoomPanPinch(props)).current;\n var content = getContent(props.children, getControls(instance));\n useImperativeHandle(ref, function () { return getControls(instance); }, [instance]);\n useEffect(function () {\n instance.update(props);\n }, [instance, props]);\n return React.createElement(Context.Provider, { value: instance }, content);\n});\n\nvar KeepScale = React.forwardRef(function (props, ref) {\n var localRef = useRef(null);\n var instance = useContext(Context);\n useEffect(function () {\n return instance.onChange(function (ctx) {\n if (localRef.current) {\n var positionX = 0;\n var positionY = 0;\n localRef.current.style.transform = instance.handleTransformStyles(positionX, positionY, 1 / ctx.instance.transformState.scale);\n }\n });\n }, [instance]);\n return React.createElement(\"div\", __assign({}, props, { ref: mergeRefs([localRef, ref]) }));\n});\n\nvar initialElementRect = {\n width: 0,\n height: 0,\n y: 0,\n x: 0,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n};\nvar useResize = function (ref, onResize, dependencies) {\n var resizeObserverRef = useRef();\n var rectRef = useRef(initialElementRect);\n var didUnmount = useRef(false);\n useLayoutEffect(function () {\n var _a;\n didUnmount.current = false;\n if (!(\"ResizeObserver\" in window)) {\n return;\n }\n if (ref) {\n resizeObserverRef.current = new ResizeObserver(function (entries) {\n var newSize = ref.getBoundingClientRect();\n if (!Array.isArray(entries) ||\n !entries.length ||\n didUnmount.current ||\n (newSize.width === rectRef.current.width &&\n newSize.height === rectRef.current.height))\n return;\n onResize(newSize, ref);\n rectRef.current = newSize;\n });\n (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(ref);\n }\n return function () {\n var _a;\n didUnmount.current = true;\n if (ref) {\n (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(ref);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, __spreadArray([onResize, ref], dependencies, true));\n};\n\nvar previewStyles = {\n position: \"absolute\",\n zIndex: 2,\n top: \"0px\",\n left: \"0px\",\n boxSizing: \"border-box\",\n border: \"3px solid red\",\n transformOrigin: \"0% 0%\",\n boxShadow: \"rgba(0,0,0,0.2) 0 0 0 10000000px\",\n};\nvar MiniMap = function (_a) {\n var _b = _a.width, width = _b === void 0 ? 200 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? \"red\" : _d, children = _a.children, rest = __rest(_a, [\"width\", \"height\", \"borderColor\", \"children\"]);\n var _e = useState(false), initialized = _e[0], setInitialized = _e[1];\n var instance = useTransformContext();\n var miniMapInstance = useRef(null);\n var mainRef = useRef(null);\n var wrapperRef = useRef(null);\n var previewRef = useRef(null);\n var getContentSize = useCallback(function () {\n if (instance.contentComponent) {\n var rect = instance.contentComponent.getBoundingClientRect();\n return {\n width: rect.width / instance.transformState.scale,\n height: rect.height / instance.transformState.scale,\n };\n }\n return {\n width: 0,\n height: 0,\n };\n }, [instance.contentComponent, instance.transformState.scale]);\n var computeMiniMapScale = useCallback(function () {\n var contentSize = getContentSize();\n var scaleX = width / contentSize.width;\n var scaleY = height / contentSize.height;\n var scale = scaleY > scaleX ? scaleX : scaleY;\n return scale;\n }, [getContentSize, height, width]);\n var computeMiniMapSize = function () {\n var contentSize = getContentSize();\n var scaleX = width / contentSize.width;\n var scaleY = height / contentSize.height;\n if (scaleY > scaleX) {\n return { width: width, height: contentSize.height * scaleX };\n }\n return { width: contentSize.width * scaleY, height: height };\n };\n var computeMiniMapStyle = function () {\n var scale = computeMiniMapScale();\n var style = {\n transform: \"scale(\".concat(scale || 1, \")\"),\n transformOrigin: \"0% 0%\",\n position: \"absolute\",\n boxSizing: \"border-box\",\n zIndex: 1,\n overflow: \"hidden\",\n };\n Object.keys(style).forEach(function (key) {\n if (wrapperRef.current) {\n wrapperRef.current.style[key] = style[key];\n }\n });\n };\n var transformMiniMap = function () {\n computeMiniMapStyle();\n var miniSize = computeMiniMapSize();\n var wrapSize = getContentSize();\n if (wrapperRef.current) {\n wrapperRef.current.style.width = \"\".concat(wrapSize.width, \"px\");\n wrapperRef.current.style.height = \"\".concat(wrapSize.height, \"px\");\n }\n if (mainRef.current) {\n mainRef.current.style.width = \"\".concat(miniSize.width, \"px\");\n mainRef.current.style.height = \"\".concat(miniSize.height, \"px\");\n }\n if (previewRef.current) {\n var size = getContentSize();\n var scale = computeMiniMapScale();\n var previewScale = scale * (1 / instance.transformState.scale);\n var transform = instance.handleTransformStyles(-instance.transformState.positionX * previewScale, -instance.transformState.positionY * previewScale, 1);\n previewRef.current.style.transform = transform;\n previewRef.current.style.width = \"\".concat(size.width * previewScale, \"px\");\n previewRef.current.style.height = \"\".concat(size.height * previewScale, \"px\");\n }\n };\n var initialize = function () {\n transformMiniMap();\n };\n useTransformEffect(function () {\n transformMiniMap();\n });\n useTransformInit(function () {\n initialize();\n setInitialized(true);\n });\n useResize(instance.contentComponent, initialize, [initialized]);\n useEffect(function () {\n return instance.onChange(function (zpp) {\n var scale = computeMiniMapScale();\n if (miniMapInstance.current) {\n miniMapInstance.current.instance.transformState.scale =\n zpp.instance.transformState.scale;\n miniMapInstance.current.instance.transformState.positionX =\n zpp.instance.transformState.positionX * scale;\n miniMapInstance.current.instance.transformState.positionY =\n zpp.instance.transformState.positionY * scale;\n }\n });\n }, [computeMiniMapScale, instance, miniMapInstance]);\n var wrapperStyle = useMemo(function () {\n return {\n position: \"relative\",\n zIndex: 2,\n overflow: \"hidden\",\n };\n }, []);\n return (React.createElement(\"div\", __assign({}, rest, { ref: mainRef, style: wrapperStyle, className: \"rzpp-mini-map \".concat(rest.className || \"\") }),\n React.createElement(\"div\", __assign({}, rest, { ref: wrapperRef, className: \"rzpp-wrapper\" }), children),\n React.createElement(\"div\", { className: \"rzpp-preview\", ref: previewRef, style: __assign(__assign({}, previewStyles), { borderColor: borderColor }) })));\n};\n\nfunction styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nvar 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}\\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\";\nvar styles = {\"wrapper\":\"transform-component-module_wrapper__SPB86\",\"content\":\"transform-component-module_content__FBWxo\"};\nstyleInject(css_248z);\n\nvar TransformComponent = function (_a) {\n 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;\n var _f = useContext(Context), init = _f.init, cleanupWindowEvents = _f.cleanupWindowEvents;\n var wrapperRef = useRef(null);\n var contentRef = useRef(null);\n useEffect(function () {\n var wrapper = wrapperRef.current;\n var content = contentRef.current;\n if (wrapper !== null && content !== null && init) {\n init === null || init === void 0 ? void 0 : init(wrapper, content);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return function () {\n cleanupWindowEvents === null || cleanupWindowEvents === void 0 ? void 0 : cleanupWindowEvents();\n };\n }, []);\n return (React.createElement(\"div\", __assign({}, wrapperProps, { ref: wrapperRef, className: \"react-transform-wrapper \".concat(styles.wrapper, \" \").concat(wrapperClass), style: wrapperStyle }),\n React.createElement(\"div\", __assign({}, contentProps, { ref: contentRef, className: \"react-transform-component \".concat(styles.content, \" \").concat(contentClass), style: contentStyle }), children)));\n};\n\nvar useTransformContext = function () {\n var libraryContext = useContext(Context);\n if (!libraryContext) {\n throw new Error(\"Transform context must be placed inside TransformWrapper\");\n }\n return libraryContext;\n};\n\nvar useControls = function () {\n var libraryContext = useTransformContext();\n return getControls(libraryContext);\n};\n\nvar useTransformInit = function (callback) {\n var libraryContext = useTransformContext();\n useEffect(function () {\n var unmountCallback;\n var unmount;\n if (libraryContext.contentComponent && libraryContext.wrapperComponent) {\n unmountCallback = callback(getState(libraryContext));\n }\n else {\n unmount = libraryContext.onInit(function (ref) {\n unmountCallback = callback(getState(ref.instance));\n });\n }\n return function () {\n unmount === null || unmount === void 0 ? void 0 : unmount();\n unmountCallback === null || unmountCallback === void 0 ? void 0 : unmountCallback();\n };\n }, []);\n};\n\nvar useTransformEffect = function (callback) {\n var libraryContext = useTransformContext();\n useEffect(function () {\n var unmountCallback;\n var unmount = libraryContext.onChange(function (ref) {\n unmountCallback = callback(getState(ref.instance));\n });\n return function () {\n unmount();\n unmountCallback === null || unmountCallback === void 0 ? void 0 : unmountCallback();\n };\n }, [callback, libraryContext]);\n};\n\nexport { Context, KeepScale, MiniMap, TransformComponent, TransformWrapper, getCenterPosition, getMatrixTransformStyles, getTransformStyles, useControls, useTransformContext, useTransformEffect, useTransformInit };\n//# sourceMappingURL=index.esm.js.map\n","import { IGeneralData } from './generalData';\r\nimport * as helper from './scs-html-helper';\r\n\r\nexport class ImageController {\r\n private static _instance: ImageController;\r\n\r\n // This const affects rotation sensitivity dragging with mouse, higher value make's it less sensitive.\r\n private readonly pixelsPerDegree = 3;\r\n\r\n static get instance() {\r\n return this._instance || (this._instance = new this());\r\n }\r\n\r\n public getRotatedImageIndex(currentPositionX: number, animationSequenceLength: number,\r\n dragStartScreenX: number, dragStartImageIndex: number): number {\r\n let result = 0;\r\n \r\n const numImages = animationSequenceLength;\r\n const pixelsPerImage = this.pixelsPerDegree * (50 / numImages);\r\n\r\n // Pixels moved:\r\n const dx: number = (currentPositionX - dragStartScreenX) / pixelsPerImage;\r\n let index = Math.floor(dx) % numImages;\r\n\r\n // Setting rotation direction: +- x\r\n index = numImages - index;\r\n\r\n // Calculate real index in the boundaries of 3d images length:\r\n result = (index + dragStartImageIndex) % numImages;\r\n\r\n return result;\r\n }\r\n\r\n public getImageHeight(generalData: IGeneralData): number {\r\n let newImageHeight;\r\n let currentWindowWidth = helper.isMobileShop() ? window.outerWidth : window.innerWidth;\r\n \r\n // for zoom in browser feature\r\n if(window.devicePixelRatio > 1 && !helper.isMobileShop() && !helper.isTabletView())\r\n currentWindowWidth = currentWindowWidth / window.devicePixelRatio;\r\n\r\n if (currentWindowWidth < generalData.breakPointMobile) {\r\n newImageHeight = generalData.imageHeightMobile;\r\n }\r\n else if (currentWindowWidth < generalData.breakPointTablet) {\r\n newImageHeight = generalData.imageHeightTablet;\r\n }\r\n else if (currentWindowWidth < generalData.breakPointDesktopMin) {\r\n newImageHeight = generalData.imageHeightDesktopMin;\r\n }\r\n else {\r\n // greater then 1200\r\n newImageHeight = generalData.imageHeightDesktopMax;\r\n }\r\n\r\n return newImageHeight;\r\n }\r\n}\r\n","import React, { ReactNode } from 'react';\r\nimport { IThreeSixtyAnimationProps, IThreeSixtyAnimationState } from './threeSixtyAnimation.d';\r\nimport IconZoomOut from '../../Assets/svg/icon_zoom_out';\r\nimport IconZoomIn from '../../Assets/svg/icon_zoom_in';\r\nimport * as helper from '../common/scs-html-helper';\r\nimport './threeSixtyAnimation.scss';\r\nimport { SCSScrollLock } from '../common/scs-scrollLock';\r\nimport LoadingSpinner from '../common/loadingSpinner/loadingSpinner';\r\nimport IconPlayStop from '../../Assets/svg/icon_play_stop';\r\nimport { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';\r\n\r\nimport {ImageController} from '../common/imageController';\r\n\r\nconst minZoomLevel = 0;\r\nconst maxZoomLevel = 2;\r\n\r\nexport default class ThreeSixtyAnimation extends React.Component\r\n {this.getImageElements()}\r\n
\r\n : {this.getImageElements()}
\r\n );\r\n }\r\n\r\n private handleImageLoaded(): void {\r\n this.imageLoadedProgress++;\r\n\r\n if (this.props.imageUrlArray.length === this.imageLoadedProgress)\r\n {\r\n // reset load process counter:\r\n this.imageLoadedProgress = 0;\r\n \r\n this.setState({\r\n animationIsLoaded: true\r\n }, ()=> {\r\n // start/restart animation rotation if only it was not stopped bus user before:\r\n if (!this.props.preventAutoPlay)\r\n this.playStopAnimation(true);\r\n\r\n if(window.shell)\r\n window.shell.publishTo('SCS.Animation.WasLoaded', {\r\n containerId: this.props.containerId});\r\n });\r\n }\r\n }\r\n\r\n private getAltTag(): string {\r\n if (!this.props.productInfo)\r\n return '';\r\n const categoryName = \r\n this.props.productInfo.categoryName ? ', ' + this.props.productInfo.categoryName : '';\r\n const designation = \r\n this.props.productInfo.designation ? ', ' + this.props.productInfo.designation : '';\r\n const colorName = \r\n this.props.productInfo.colorName ? ', ' + this.props.productInfo.colorName : '';\r\n return this.props.productInfo.l10n.localizationKey + categoryName + designation + colorName;\r\n }\r\n\r\n private getImageElements(): ReactNode {\r\n return this.state.loadAnimation ?\r\n this.props.imageUrlArray.map((imgUrl, imageIndex) => {\r\n const newIndex: number = imageIndex + 1;\r\n\r\n return 
\r\n })\r\n :\r\n <>\r\n }\r\n\r\n private getImageUrl(imgUrl: string, index: number): string {\r\n let imgHeight = this.state.imageHeight;\r\n\r\n if (this.state.zoomedImageIndex && this.state.zoomedImageIndex === index) {\r\n imgHeight = this.state.zoomedImageHeight ?? this.state.currentImageHeight;\r\n }\r\n\r\n return [imgUrl, '&height=', imgHeight].join('');\r\n }\r\n\r\n public playStopAnimation(play: boolean): void {\r\n this.setState({ playAnimation: play }, () => {\r\n if (play)\r\n this.playAnimation(this.state.imageIndex, this.state.animationSequenceIndex);\r\n });\r\n }\r\n\r\n public restartAnimation(playAnimation: boolean): void {\r\n this.setState({\r\n dragging: false,\r\n imageIndex: 1,\r\n animationSequenceIndex: 1,\r\n dragStartImageIndex: 0,\r\n playAnimation: playAnimation,\r\n dragStartScreenX: 0,\r\n imageMovementIsEnabled: false\r\n }, () => {\r\n // restore zoomed image state:\r\n this.resetDefaultImageSize();\r\n\r\n // reset load process counter:\r\n this.imageLoadedProgress = 0;\r\n this.playStopAnimation(playAnimation);\r\n });\r\n }\r\n\r\n private zoomButtonsClass(): string {\r\n return this.props.hasThreeSixtyThumbnails\r\n ? ['zoom_buttons'].join(' ')\r\n : ['zoom_buttons', 'tdi_full_width'].join(' ');\r\n }\r\n\r\n private threeDImagesClass(): string {\r\n const tdiClassName = this.props.hasThreeSixtyThumbnails ? '' : 'tdi_full_width';\r\n\r\n return this.state.animationIsLoaded\r\n ? [tdiClassName, 'three_d_images', 'show_td_images'].join(' ')\r\n : [tdiClassName, 'three_d_images'].join(' ');\r\n }\r\n\r\n private threeDImageClass(renderableImageIndex: number): string {\r\n return this.state.imageIndex == renderableImageIndex || this.props.imageUrlArray.length == 1\r\n ? ['three_d_image', 'active_image'].join(' ') : 'three_d_image';\r\n } \r\n\r\n private zoomOutBtnStyleClass(): string {\r\n return this.state.zoomInLevel === minZoomLevel ? 'zoom_out_btn inactive' : 'zoom_out_btn';\r\n }\r\n\r\n private zoomInBtnStyleClass(): string {\r\n return this.state.zoomInLevel === maxZoomLevel ? 'zoom_in_btn inactive' : 'zoom_in_btn';\r\n }\r\n\r\n private onPinchingStart(ref: ReactZoomPanPinchRef): void {\r\n if(ref.state.scale === 1) {\r\n ref.instance.setup.panning.disabled = false;\r\n this.playStopAnimation(false);\r\n this.setState({imageMovementIsEnabled: true});\r\n }\r\n\r\n this.activeImageContainer = this.animationRef.current.querySelector('.active_image');\r\n }\r\n\r\n private onPinchingStop(ref: ReactZoomPanPinchRef): void {\r\n if(ref.state.scale <= 1) {\r\n ref.instance.setup.panning.disabled = true;\r\n this.resetDefaultImageSize();\r\n }\r\n else {\r\n this.setState({\r\n zoomInLevel: ref.state.scale,\r\n zoomedImageHeight: Math.round(this.state.currentImageHeight * ref.state.scale),\r\n zoomedImageIndex: parseInt(this.activeImageContainer.dataset.index)\r\n });\r\n }\r\n }\r\n\r\n private handleOnInit(ref: ReactZoomPanPinchRef): void {\r\n this.reactZoomPanPinchRef = ref;\r\n ref.instance.setup.panning.disabled = true;\r\n ref.instance.setup.doubleClick.disabled = true;\r\n }\r\n\r\n private onEnterViewport(): void {\r\n if (!this.animationRef.current) {\r\n return;\r\n } else {\r\n const top = this.animationRef.current.getBoundingClientRect().top;\r\n const viewportReached = top + this.offset >= 0 && top - this.offset <= window.innerHeight;\r\n\r\n if (viewportReached && top > 0) {\r\n this.setState({\r\n loadContentAfterPageLoad: true,\r\n loadAnimation: true\r\n });\r\n\r\n document.removeEventListener('scroll', this.onEnterViewport, true);\r\n }\r\n }\r\n }\r\n\r\n private handleKeyDown(event): void {\r\n // prevent page jump down when 3dG is closed with Space btn., click\r\n if (event.code === 'Space')\r\n event.preventDefault();\r\n\r\n if(!window.shell.tabNav)\r\n return;\r\n\r\n if (event.code === 'ArrowRight' && event.target.nextSibling) {\r\n window.shell.tabNav.focus(event.target.nextSibling);\r\n }\r\n\r\n if (event.code === 'ArrowLeft' && event.target.previousSibling) {\r\n window.shell.tabNav.focus(event.target.previousSibling);\r\n }\r\n }\r\n\r\n public render() {\r\n return (\r\n \r\n {\r\n (helper.isMobileShop() && this.props.showOverlayAnimation) ?\r\n \r\n \r\n {this.renderElementsForThreeSixtyView()}\r\n \r\n \r\n : \r\n this.renderElementsForThreeSixtyView()\r\n }\r\n
\r\n );\r\n }\r\n}\r\n","// extracted by mini-css-extract-plugin\nexport default {\"breakpointDesktopMinWidth\":\"1200px\",\"dpWhite\":\"#fff\",\"dpGainsboro\":\"#e6e6e6\",\"three_sixty_thumbnails_container\":\"three_sixty_thumbnails_container\",\"t_arrow_left\":\"t_arrow_left\",\"t_arrow_right\":\"t_arrow_right\",\"three_sixty_thumbnails\":\"three_sixty_thumbnails\",\"thumbnail_slot\":\"thumbnail_slot\",\"t_slot_image_container\":\"t_slot_image_container\",\"selected\":\"selected\",\"t_slot_image\":\"t_slot_image\",\"t_slot_label\":\"t_slot_label\"};","import React from 'react';\r\n\r\nconst ArrowUp = () => (\r\n \r\n
\r\n }\r\n this.setFocusAtt(el, index + 1)}\r\n data-testid={'thumbnail_slot'}\r\n key={index} className={'thumbnail_slot'}\r\n onClick={() => this.handleThreeSixtyThumbnailSelected(threeSixty, index)}\r\n onKeyDown={this.handleOnKeyDown}>\r\n
\r\n );\r\n })\r\n );\r\n }\r\n\r\n public render() {\r\n return (\r\n (this.state.displayThreeSixtyOverlay && \r\n this.props.threeSixtyThumbnails.length && this.props.threeSixtyThumbnails.length > 0) ?\r\n \r\n }/)
\r\n
\r\n \r\n {tsLabel}\r\n
\r\n this.setGroupAtt(el)}>\r\n {this.renderControls() &&\r\n
: <>\r\n );\r\n }\r\n}\r\n","// extracted by mini-css-extract-plugin\nexport default {\"breakpointDesktopMinWidth\":\"1200px\",\"dpWhite\":\"#fff\",\"dpGainsboro\":\"#e6e6e6\",\"showcase-container\":\"showcase-container\",\"no_background\":\"no_background\",\"fall_back_img\":\"fall_back_img\",\"fbi_show\":\"fbi_show\",\"three_sixty_view\":\"three_sixty_view\",\"three_sixty_container\":\"three_sixty_container\",\"three_sixty_animation\":\"three_sixty_animation\",\"three_d_images\":\"three_d_images\",\"three_d_image\":\"three_d_image\",\"gallery_buttons\":\"gallery_buttons\",\"close_g3d_overlay_btn\":\"close_g3d_overlay_btn\",\"border\":\"border\",\"mobile_gallery_buttons\":\"mobile_gallery_buttons\"};","/* eslint-disable max-len */\r\nimport React from 'react';\r\n\r\nconst Icon_Close_Large = () => (\r\n \r\n);\r\n\r\nexport default Icon_Close_Large;\r\n","import React from 'react';\r\nimport ThreeSixtyThumbnails from '../threeSixtyThumbnails/threeSixtyThumbnails';\r\nimport './threeSixtyView.scss';\r\nimport { IResponseData } from '../../types/VariantSelection';\r\nimport * as helper from '../common/scs-html-helper';\r\nimport CloseIconLarge from '../../Assets/svg/icon_close_large';\r\nimport { IThreeSixtyViewProps, IThreeSixtyOverlayState } from './threeSixtyView.d';\r\nimport { ThreeSixtyViewDataController } from '../common/threeSixtyViewDataController';\r\nimport ThreeSixtyAnimation from '../threeSixtyAnimation/threeSixtyAnimation';\r\nimport { IThreeSixtyAnimationProps } from '../threeSixtyAnimation/threeSixtyAnimation.d';\r\n\r\nexport default class ThreeSixtyView extends React.Component\r\n
}\r\n this.setGroupAtt(el)}>\r\n {this.renderThumbnails()}\r\n
\r\n {this.renderControls() &&\r\n \r\n
}\r\n {this.setGroupAtt(el); this.setModalAtt(el);}}>\r\n
\r\n :\r\n <>\r\n {\r\n (this.props.showOverlayAnimation && helper.isMobileShop()) &&\r\n this.setGroupAtt(el)}>\r\n
\r\n {\r\n // prevent page jump down when 3dG is closed with Space btn., click\r\n if (event.code === 'Space')\r\n event.preventDefault(); \r\n }}\r\n data-testid={'close_g3d_overlay_btn'} ref={(el)=> this.setFocusAtt(el, 1)}>\r\n
\r\n this.setGroupAtt(el)}>\r\n
\r\n \r\n
\r\n }\r\n {\r\n this.state.threeDIsAvailable &&\r\n \r\n
\r\n