UNPKG

react-threesixty

Version:

A Simple React 360 Library using threesixty.js

2 lines 54.3 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React);function ownKeys(t,e){var n,o=Object.keys(t);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(t),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),o.push.apply(o,n)),o}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(n),!0).forEach(function(e){_defineProperty(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ownKeys(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _iterableToArrayLimit(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,i,a=[],r=!0,s=!1;try{for(n=n.call(e);!(r=(o=n.next()).done)&&(a.push(o.value),!t||a.length!==t);r=!0);}catch(e){s=!0,i=e}finally{try{r||null==n.return||n.return()}finally{if(s)throw i}}return a}}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(n="Object"===n&&e.constructor?e.constructor.name:n)||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function unwrapExports(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function createCommonjsModule(e,t){return e(t={exports:{}},t.exports),t.exports}var threesixty=createCommonjsModule(function(e,t){window,e.exports=function(n){var o={};function i(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,i),t.l=!0,t.exports}return i.m=n,i.c=o,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=2)}([function(e,t){var n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,n,t){!function(e){function o(e,t){return(t=a(e=e,t,"get")).get?t.get.call(e):t.value}function i(e,t,n){return function(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=n}}(e,a(e,t,"set"),n),n}function a(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}var r=new WeakMap,s=new WeakMap,l=new WeakMap,t=(function(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(c.prototype,[{key:"destroy",value:function(){o(this,s).swipeTarget.removeEventListener("mousedown",o(this,l).container.mousedown),o(this,s).swipeTarget.removeEventListener("touchstart",o(this,l).container.touchstart),o(this,s).swipeTarget.removeEventListener("touchend",o(this,l).container.touchend),e.removeEventListener("mouseup",o(this,l).global.mouseup),e.removeEventListener("mousemove",o(this,l).global.mousemove),e.removeEventListener("touchmove",o(this,l).global.touchmove),e.removeEventListener("keydown",o(this,l).global.keydown),e.removeEventListener("keyup",o(this,l).global.keyup),o(this,s).prev&&(o(this,s).prev.removeEventListener("mousedown",o(this,l).prev.mousedown),o(this,s).prev.removeEventListener("mouseup",o(this,l).prev.mouseup),o(this,s).prev.removeEventListener("touchstart",o(this,l).prev.touchstart)),o(this,s).next&&(o(this,s).next.removeEventListener("mousedown",o(this,l).next.mousedown),o(this,s).next.removeEventListener("mouseup",o(this,l).next.mouseup),o(this,s).next.removeEventListener("touchstart",o(this,l).next.touchstart))}},{key:"_initEvents",value:function(){e.addEventListener("click",o(this,l).global.click),o(this,s).draggable&&(o(this,s).swipeTarget.addEventListener("mousedown",o(this,l).container.mousedown),e.addEventListener("mouseup",o(this,l).global.mouseup),e.addEventListener("mousemove",o(this,l).global.mousemove)),o(this,s).swipeable&&(o(this,s).swipeTarget.addEventListener("touchstart",o(this,l).container.touchstart),o(this,s).swipeTarget.addEventListener("touchend",o(this,l).container.touchend),e.addEventListener("touchmove",o(this,l).global.touchmove)),o(this,s).keys&&(e.addEventListener("keydown",o(this,l).global.keydown),e.addEventListener("keyup",o(this,l).global.keyup)),o(this,s).prev&&(o(this,s).prev.addEventListener("mousedown",o(this,l).prev.mousedown),o(this,s).prev.addEventListener("mouseup",o(this,l).prev.mouseup),o(this,s).prev.addEventListener("touchstart",o(this,l).prev.touchstart)),o(this,s).next&&(o(this,s).next.addEventListener("mousedown",o(this,l).next.mousedown),o(this,s).next.addEventListener("mouseup",o(this,l).next.mouseup),o(this,s).next.addEventListener("touchstart",o(this,l).next.touchstart))}}]),c);function c(t,e){var n=this;!function(e){if(!(e instanceof c))throw new TypeError("Cannot call a class as a function")}(this),r.set(this,{writable:!0,value:null}),s.set(this,{writable:!0,value:null}),l.set(this,{writable:!0,value:null}),i(this,s,e),i(this,l,{container:{mousedown:function(e){return i(n,r,e.pageX)},touchstart:function(e){return i(n,r,e.touches[0].clientX)},touchend:function(){return i(n,r,null)}},prev:{mousedown:function(e){e.preventDefault(),t.play(!0)},mouseup:function(e){e.preventDefault(),t.stop()},touchstart:function(e){e.preventDefault(),t.prev()}},next:{mousedown:function(e){e.preventDefault(),t.play()},mouseup:function(e){e.preventDefault(),t.stop()},touchstart:function(e){e.preventDefault(),t.next()}},global:{click:function(){t.click()},mouseup:function(){return i(n,r,null)},mousemove:function(e){o(n,r)&&Math.abs(o(n,r)-e.pageX)>o(n,s).dragTolerance&&(t.stop(),o(n,r)>e.pageX?t.prev():t.next(),i(n,r,e.pageX))},touchmove:function(e){o(n,r)&&Math.abs(o(n,r)-e.touches[0].clientX)>o(n,s).swipeTolerance&&(t.stop(),o(n,r)>e.touches[0].clientX?t.prev():t.next(),i(n,r,e.touches[0].clientX))},keydown:function(e){[37,39].includes(e.keyCode)&&t.play(37===e.keyCode)},keyup:function(e){[37,39].includes(e.keyCode)&&t.stop()}}}),this._initEvents()}n.a=t}.call(this,t(0))},function(e,g,b){b.r(g),function(n){var o=b(1);function t(t,e){var n,o=Object.keys(t);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(t),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),o.push.apply(o,n)),o}function i(o){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?t(Object(i),!0).forEach(function(e){var t,n;t=o,e=i[n=e],n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(i)):t(Object(i)).forEach(function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(i,e))})}return o}function a(e,t){return(t=s(e=e,t,"get")).get?t.get.call(e):t.value}function r(e,t,n){return function(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=n}}(e,s(e,t,"set"),n),n}function s(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}var e,l,c,u=new WeakMap,d=new WeakMap,p=new WeakMap,h=new WeakMap,m=new WeakMap,f=new WeakMap,c=(l=v,c=[{key:"isResponsive",get:function(){return 0<a(this,u).aspectRatio}},{key:"containerWidth",get:function(){return this.isResponsive?this.container.clientWidth:a(this,u).width}},{key:"containerHeight",get:function(){return this.isResponsive?this.container.clientWidth*a(this,u).aspectRatio:a(this,u).height}},{key:"index",get:function(){return a(this,d)}},{key:"looping",get:function(){return a(this,h)}},{key:"prevIndex",get:function(){var e=a(this,u).inverted?a(this,d)+1:a(this,d)-1;return(a(this,u).count+e)%a(this,u).count}},{key:"next",value:function(){a(this,m)&&this.goto(a(this,u).inverted?a(this,d)-1:a(this,d)+1)}},{key:"prev",value:function(){a(this,m)&&this.goto(a(this,u).inverted?a(this,d)+1:a(this,d)-1)}},{key:"goto",value:function(e){var t=a(this,d),t=document.querySelector("#".concat(a(this,u).containerName," > .reactThreesixtyImage_").concat(t));t&&(t.style.visibility="hidden"),r(this,d,(a(this,u).count+e)%a(this,u).count),this._update()}},{key:"play",value:function(e){this.looping||(this._loop(e),r(this,h,!0))}},{key:"stop",value:function(){this.looping&&(n.clearTimeout(a(this,p)),r(this,h,!1))}},{key:"click",value:function(){var e=new CustomEvent("".concat(a(this,u).containerName,"_image_clicked"),{detail:{image_index:a(this,d)}});document.dispatchEvent(e)}},{key:"toggle",value:function(e){this.looping?this.stop():this.play(e)}},{key:"destroy",value:function(){this.stop(),a(this,f).destroy(),this.container.style.width="",this.container.style.height="",this.isResponsive&&window.removeEventListener("resize",this._windowResizeListener)}},{key:"_loop",value:function(e){var t=this;e?this.prev():this.next(),r(this,p,n.setTimeout(function(){t._loop(e)},a(this,u).speed))}},{key:"_update",value:function(){var e,t=document.querySelector("#".concat(a(this,u).containerName," > .reactThreesixtyImage_").concat(a(this,d)));t&&(e=new CustomEvent("".concat(a(this,u).containerName,"_image_changed"),{detail:{image_index:a(this,d)}}),document.dispatchEvent(e),t.style.visibility="visible")}},{key:"_stopScroll",value:function(){r(this,m,!1)}},{key:"_allowScroll",value:(e=function(){r(this,m,!0)},y.toString=function(){return e.toString()},y)},{key:"_updateImage",value:function(e){r(this,u,i(i({},a(this,u)),{},{image:e})),this._initializeImage()}},{key:"_initializeImage",value:function(){var o=this;this.container.setAttribute("id","".concat(a(this,u).containerName)),this.container.setAttribute("class","".concat(a(this,u).containerName)),this.container.style.height="100%",this.container.style.width="100%";var e=this.container.querySelector(".extra_threesixty");this.container.innerHTML="",e&&(this.container.appendChild(e),"function"==typeof a(this,u).handleRenderExraElment&&a(this,u).handleRenderExraElment()),a(this,u).image.map(function(e,t){var n=document.createElement("img");n.setAttribute("style","visibility:".concat(t===a(o,d)?"visible":"hidden",";position:").concat(t?"absolute":"relative",";transform:").concat(a(o,u).isMobile?"initial":"translateX(-50%)",";max-width:100%;max-height:100%;left:").concat(a(o,u).isMobile?"0px":"50%",";width:").concat(a(o,u).isMobile?"100%":"auto",";height:").concat(a(o,u).isMobile?"auto":"100%",";top:0px;pointer-events: none;")),n.setAttribute("src","".concat(e)),n.setAttribute("class","reactThreesixtyImage_".concat(t)),o.container.appendChild(n)})}},{key:"_windowResizeListener",value:function(){this.container.style.height=this.containerHeight+"px",this._update()}},{key:"_initContainer",value:function(){this.isResponsive||(this.container.style.width=this.containerWidth+"px"),this.container.style.height=this.containerHeight+"px",this.isResponsive&&window.addEventListener("resize",this._windowResizeListener),this._initializeImage()}}],function(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(l.prototype,c),v);function v(e,t){!function(e){if(!(e instanceof v))throw new TypeError("Cannot call a class as a function")}(this),u.set(this,{writable:!0,value:null}),d.set(this,{writable:!0,value:0}),p.set(this,{writable:!0,value:null}),h.set(this,{writable:!0,value:!1}),m.set(this,{writable:!0,value:!1}),f.set(this,{writable:!0,value:null}),this.container=e,r(this,u,Object.assign({width:300,height:300,aspectRatio:0,count:0,perRow:0,speed:100,dragTolerance:10,swipeTolerance:10,draggable:!0,swipeable:!0,keys:!0,inverted:!1,containerName:"reactThreesixtyContainer"},t)),r(this,d,t.startIndex||0),a(this,u).swipeTarget=a(this,u).swipeTarget||this.container,a(this,u).count=a(this,u).image.length,Object.freeze(a(this,u)),r(this,f,new o.a(this,a(this,u))),this._windowResizeListener=this._windowResizeListener.bind(this),this._initContainer()}function y(){return e.apply(this,arguments)}g.default=c}.call(this,b(0))}]).default}),ThreeSixty=unwrapExports(threesixty);threesixty.ThreeSixty;var updateHotspots=function(e,o){function i(e){switch(e){case"front":return 0;case"left":return 90;case"right":return-90;case"back":return 180;default:return 0}}function a(e){return 45}function r(e,t,n){var o,i,a,r;return{x:(t=(o=s.x,i=s.y,a=e,r=t,e=n,t=Math.PI/180*e,n=Math.cos(t),e=Math.sin(t),t=n*(r-i)-e*(a-o)+i,{x:Number((n*(a-o)+e*(r-i)+o).toFixed(5)),y:Number(t.toFixed(5))})).x,y:t.y}}var s=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{x:.5,y:.5},l=180<o?o-360:o;return e.map(function(e){var t=i(e.position)-a(e.position),n=i(e.position)+a(e.position),t=180<o&&"back"===e.position?t<o&&o<n:t<l&&l<n,n=function(e,t){switch(e){case"front":return{x:s.x,y:s.y-t};case"left":return{x:s.x-t,y:s.y};case"right":return{x:s.x+t,y:s.y};case"back":return{x:s.x,y:t+s.y};default:return{x:s.x,y:s.y-t}}}(e.position,e.radius),n=r(n.x,n.y,-(l+e.dentAngle));return _objectSpread2(_objectSpread2({},e),{},{left:n.x,display:t||"upper"===e.position})})},style={wrapper:function(e,t){return _objectSpread2({position:"absolute",zIndex:1,top:"".concat(100*e.top,"%"),left:"".concat(100*e.left,"%"),display:e.display?"block":"none",transform:"translate(-50%, -50%)"},Object.assign({},t?{}:{content:"",width:"20px",height:"20px",borderRadius:"50%",backgroundColor:"blue"}))}},ThreeSixtyHotspots=function(e){var t=e.hotspots,n=e.clickHandler,o=e.renderUI;return t.map(function(e,t){return React__default.default.createElement("div",{key:t,style:style.wrapper(e,!!o),onClick:function(){return n&&n(e)}},o?o(e):React__default.default.createElement(React__default.default.Fragment,null))})},extendStatics=function(e,t){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function __extends(e,t){function n(){this.constructor=e}extendStatics(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var __assign=function(){return(__assign=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function __rest(e,t){var n={};for(i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,i=Object.getOwnPropertySymbols(e);o<i.length;o++)t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]]);return n}var initialState={wrapperComponent:null,contentComponent:null,previousScale:1,scale:1,positionX:0,positionY:0,options:{disabled:!1,transformEnabled:!0,minPositionX:null,maxPositionX:null,minPositionY:null,maxPositionY:null,minScale:1,maxScale:8,limitToBounds:!0,limitToWrapper:!1,centerContent:!0,wrapperClass:"",contentClass:""},wheel:{disabled:!1,step:5,wheelEnabled:!0,touchPadEnabled:!0,limitsOnWheel:!1},pan:{disabled:!1,panAnimationType:"linear",lockAxisX:!1,lockAxisY:!1,velocity:!0,velocityEqualToMove:!0,velocitySensitivity:2,velocityActiveScale:1,velocityMinSpeed:1,velocityBaseTime:1600,velocityAnimationType:"easeOutQuart",padding:!0,paddingSize:30,panReturnAnimationTime:400,panReturnAnimationType:"easeOut",disableOnTarget:[]},pinch:{disabled:!1},zoomIn:{disabled:!1,step:20,animation:!0,animationType:"easeOut",animationTime:200},zoomOut:{disabled:!1,step:20,animation:!0,animationType:"easeOut",animationTime:200},doubleClick:{disabled:!1,step:20,mode:"zoomIn",animation:!0,animationType:"easeOut",animationTime:200},reset:{disabled:!1,animation:!0,animationType:"easeOut",animationTime:200},scalePadding:{disabled:!1,size:.2,animationTime:200,animationType:"easeOut"}},roundNumber=function(e,t){return Number(e.toFixed(t))},checkIsNumber=function(e,t){return"number"==typeof e?e:t},boundLimiter=function(e,t,n,o){return roundNumber(o?e<t?t:n<e?n:e:e,2)},calculateBoundingArea=function(e,t,n,o,i,a,r){n=t<e?n*(r?1:.5):0,r=i<o?a*(r?1:.5):0;return{minPositionX:e-t-n,maxPositionX:n,minPositionY:o-i-r,maxPositionY:r}},getDistance=function(e,t){return Math.sqrt(Math.pow(e.pageX-t.pageX,2)+Math.pow(e.pageY-t.pageY,2))},deleteUndefinedProps=function(e){var t=__assign({},e);return Object.keys(t).forEach(function(e){return void 0===t[e]&&delete t[e]}),t},handleCallback=function(e,t){e&&"function"==typeof e&&e(t)},handleWheelStop=function(e,t,n){var o=n.scale,i=n.options,n=i.maxScale,i=i.minScale;return!!e&&(o<n||i<o||(Math.sign(e.deltaY)!==Math.sign(t.deltaY)||(0<e.deltaY&&e.deltaY<t.deltaY||(e.deltaY<0&&e.deltaY>t.deltaY||Math.sign(e.deltaY)!==Math.sign(t.deltaY)))))},mergeProps=function(n,o){return Object.keys(n).reduce(function(e,t){return"object"==typeof o[t]&&null!==o[t]?e[t]=__assign(__assign({},n[t]),o[t]):e[t]=(void 0===o[t]?n:o)[t],e},{})};function getWindowScaleY(e){return e?window.innerHeight/e.offsetHeight:0}function getWindowScaleX(e){return e?window.innerWidth/e.offsetWidth:0}var easeOut=function(e){return-Math.cos(e*Math.PI)/2+.5},linear=function(e){return e},easeInQuad=function(e){return e*e},easeOutQuad=function(e){return e*(2-e)},easeInOutQuad=function(e){return e<.5?2*e*e:(4-2*e)*e-1},easeInCubic=function(e){return e*e*e},easeOutCubic=function(e){return--e*e*e+1},easeInOutCubic=function(e){return e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},easeInQuart=function(e){return e*e*e*e},easeOutQuart=function(e){return 1- --e*e*e*e},easeInOutQuart=function(e){return e<.5?8*e*e*e*e:1-8*--e*e*e*e},easeInQuint=function(e){return e*e*e*e*e},easeOutQuint=function(e){return 1+--e*e*e*e*e},easeInOutQuint=function(e){return e<.5?16*e*e*e*e*e:1+16*--e*e*e*e*e},availableAnimations={easeOut:easeOut,linear:linear,easeInQuad:easeInQuad,easeOutQuad:easeOutQuad,easeInOutQuad:easeInOutQuad,easeInCubic:easeInCubic,easeOutCubic:easeOutCubic,easeInOutCubic:easeInOutCubic,easeInQuart:easeInQuart,easeOutQuart:easeOutQuart,easeInOutQuart:easeInOutQuart,easeInQuint:easeInQuint,easeOutQuint:easeOutQuint,easeInOutQuint:easeInOutQuint};function handleDisableAnimation(){this.mounted&&(this.animation&&cancelAnimationFrame(this.animation),this.animate=!1,this.animation=!1,this.velocity=!1)}function animate(n,o,i){var a,r=this;this.mounted&&(a=(new Date).getTime(),handleDisableAnimation.call(this),this.animation=function(){var e,t;r.animation&&r.mounted&&(e=(new Date).getTime()-a,t=(0,availableAnimations[n])(e/o),o<=e?(i(1),r.animation=null):(i(t),requestAnimationFrame(r.animation)))},requestAnimationFrame(this.animation))}function animateComponent(e){var t=this,n=e.targetState,o=e.speed,i=e.type,e=this.stateProvider,a=e.scale,r=e.positionX,s=e.positionY,l=n.scale-a,c=n.positionX-r,u=n.positionY-s;0===o?(this.stateProvider.previousScale=this.stateProvider.scale,this.stateProvider.scale=n.scale,this.stateProvider.positionX=n.positionX,this.stateProvider.positionY=n.positionY,this.applyTransformation()):animate.call(this,i,o,function(e){t.stateProvider.previousScale=t.stateProvider.scale,t.stateProvider.scale=a+l*e,t.stateProvider.positionX=r+c*e,t.stateProvider.positionY=s+u*e,t.applyTransformation()})}function checkZoomBounds(e,t,n,o,i){o=t-(i?o:0);return!isNaN(n)&&n<=e?n:!isNaN(t)&&e<=o?o:e}function checkPositionBounds(e,t,n,o,i,a){var r=n.minPositionX,s=n.minPositionY,l=n.maxPositionX,c=n.maxPositionY,n=a?i*a.offsetWidth/100:0,a=a?i*a.offsetHeight/100:0;return{x:boundLimiter(e,r-n,l+n,o),y:boundLimiter(t,s-a,c+a,o)}}function getDelta(e,t){e=e?e.deltaY<0?1:-1:0;return checkIsNumber(t,e)}function wheelMousePosition(e,t,n){var o=t.getBoundingClientRect(),t=(e.clientX-o.left)/n,n=(e.clientY-o.top)/n;return(isNaN(t)||isNaN(n))&&console.error("No mouse or touch offset found"),{mouseX:t,mouseY:n}}function getComponentsSizes(e,t,n){var o=e.offsetWidth,i=e.offsetHeight,e=t.offsetWidth*n,n=t.offsetHeight*n;return{wrapperWidth:o,wrapperHeight:i,newContentWidth:e,newDiffWidth:o-e,newContentHeight:n,newDiffHeight:i-n}}function handleCalculatePositions(e,t,n,o,i){var a=this.stateProvider,r=a.scale,s=a.positionX,l=a.positionY,a=a.options.transformEnabled,r=n-r;return"number"!=typeof e||"number"!=typeof t?console.error("Mouse X and Y position were not provided!"):a?checkPositionBounds(s-e*r,l-t*r,o,i,0,null):{newPositionX:s,newPositionY:l}}function getClientPosition(e){var t=e.touches;return t&&1===t.length?{clientX:t[0].clientX,clientY:t[0].clientY}:t?null:{clientX:e.clientX,clientY:e.clientY}}function handlePanning(e){var t=this.stateProvider,n=t.scale,o=t.positionX,i=t.positionY,a=t.options,r=a.limitToBounds,s=a.minScale,l=t.pan,c=l.lockAxisX,u=l.lockAxisY,d=l.padding,p=l.paddingSize,h=t.wrapperComponent;if(this.startCoords){a=this.startCoords,l=a.x,t=a.y,a=getClientPosition(e);if(!a)return console.error("Cannot find mouse client positions");e=a.clientX,a=a.clientY,l=c?o:e-l,t=u?i:a-t;l===o&&t===i||(h=checkPositionBounds(l,t,this.bounds,r,d&&s<=n?p:0,h),handlePaddingAnimation.call(this,h.x,h.y))}}function handlePanningAnimation(){var e=this.stateProvider,t=e.scale,n=e.options.minScale,o=e.pan,i=o.disabled,a=o.padding,e=o.panReturnAnimationTime,o=o.panReturnAnimationType;i||t<n||!a||(a=handlePanToBounds.call(this),animateComponent.call(this,{targetState:a,speed:e,type:o}))}function handlePanToBounds(){var e=this.stateProvider,t=e.positionX,n=e.positionY,o=e.scale,i=e.options,a=i.disabled,r=i.limitToBounds,s=i.limitToWrapper,l=this.state.wrapperComponent;if(!a){var c=this.bounds,e=c.maxPositionX,i=c.minPositionX,a=c.maxPositionY,c=c.minPositionY,i=e<t||t<i,c=a<n||n<c,e=e<t?l.offsetWidth:this.stateProvider.minPositionX||0,l=a<n?l.offsetHeight:this.stateProvider.minPositionY||0,r=handleCalculatePositions.call(this,e,l,o,this.bounds,r||s),s=r.x,r=r.y;return{scale:o,positionX:i?s:t,positionY:c?r:n}}}function handlePaddingAnimation(e,t){this.stateProvider.pan.padding&&(this.stateProvider.positionX=e,this.stateProvider.positionY=t,this.applyTransformation())}function handleCalculateZoom(e,t,n,o,i){var a=this.stateProvider,r=a.scale,s=a.options,l=s.maxScale,c=s.minScale,u=a.scalePadding,d=u.size,s=u.disabled,u=a.wrapperComponent,a=null;if(a=i?r+(t-t*(1e-4*window.innerWidth))*e*(r/(e<0?30:20)):(u=2-window.innerWidth/u.offsetWidth,r+t*e*((r-r*Math.max(.2,Math.min(.99,u)))/20)),o)return a;s=!n&&!s;return checkZoomBounds(roundNumber(a,3),c,l,d,s)}function handleCalculateBounds(e,t){var n=this.stateProvider,o=getComponentsSizes(n.wrapperComponent,n.contentComponent,e),i=o.wrapperWidth,a=o.wrapperHeight,r=o.newContentWidth,n=o.newDiffWidth,e=o.newContentHeight,o=o.newDiffHeight,t=calculateBoundingArea(i,r,n,a,e,o,t);return this.bounds=t}function handleWheelZoom(e){var t=this.stateProvider,n=t.scale,o=t.contentComponent,i=t.options.limitToBounds,a=t.scalePadding,r=a.size,s=a.disabled,l=t.wheel,a=l.step,t=l.limitsOnWheel;e.preventDefault(),e.stopPropagation();l=getDelta(e,null),l=handleCalculateZoom.call(this,l,a,!e.ctrlKey);n!==l&&(a=handleCalculateBounds.call(this,l,!t),o=(e=wheelMousePosition(e,o,n)).mouseX,e=e.mouseY,t=(r=handleCalculatePositions.call(this,o,e,l,a,i&&(s||0===r||t))).x,r=r.y,this.bounds=a,this.stateProvider.previousScale=n,this.stateProvider.scale=l,this.stateProvider.positionX=t,this.stateProvider.positionY=r,this.applyTransformation())}function handleZoomToPoint(e,t,n,o,i){var a=this.stateProvider,r=a.contentComponent,s=a.options,l=s.disabled,c=s.minScale,u=s.maxScale,a=s.limitToBounds,s=s.limitToWrapper;if(!l&&!e){u=checkZoomBounds(roundNumber(t,2),c,u,null,null),s=handleCalculateBounds.call(this,u,s),n=n,o=o;i&&(n=(t=wheelMousePosition(i,r,t)).mouseX,o=t.mouseY);a=handleCalculatePositions.call(this,n,o,u,s,a);return{scale:u,positionX:a.x,positionY:a.y}}}function handlePaddingAnimation$1(){var e=this.stateProvider,t=e.scale,n=e.wrapperComponent,o=e.options,i=o.minScale,a=o.limitToBounds,r=e.scalePadding,o=r.disabled,e=r.animationTime,r=r.animationType,o=o||i<=t;(1<=t||a)&&handlePanningAnimation.call(this),o||(o=n.offsetWidth/2,n=n.offsetHeight/2,n=handleZoomToPoint.call(this,!1,i,o,n,null),animateComponent.call(this,{targetState:n,speed:e,type:r}))}function handleDoubleClick(e){e.preventDefault(),e.stopPropagation();var t=this.stateProvider,n=t.contentComponent,o=t.scale,i=t.doubleClick,a=i.disabled,r=i.mode,s=i.step,l=i.animationTime,t=i.animationType;if("reset"===r)return resetTransformations.call(this,e,l);i="zoomOut"===r?-1:1,r=handleCalculateZoom.call(this,i,s,void 0,void 0,!0),e=wheelMousePosition(e,n,o),n=e.mouseX,e=e.mouseY,e=handleZoomToPoint.call(this,a,r,n,e);e.scale!==o&&(l=getButtonAnimationTime(handleCalculateZoom.call(this,i,s,!0,void 0,!0),r,l),animateComponent.call(this,{targetState:e,speed:l,type:t}))}function handleZoomControls(e,t){var n=this.stateProvider,o=n.scale,i=n.positionX,a=n.positionY,r=n.wrapperComponent,s=n.zoomIn,l=n.zoomOut,c=(r.offsetWidth/2-i)/o,u=(r.offsetHeight/2-a)/o,n=handleCalculateZoom.call(this,e,t,void 0,void 0,!0),i=o<n,r=(i?s:l).animationTime,a=(i?s:l).animationType,l=(i?s:l).disabled,u=handleZoomToPoint.call(this,l,n,c,u);u.scale!==o&&(r=getButtonAnimationTime(handleCalculateZoom.call(this,e,t,!0,void 0,!0),n,r),animateComponent.call(this,{targetState:u,speed:r,type:a}))}function resetTransformations(e){var t=this.props.defaultValues,n=t.defaultScale,o=t.defaultPositionX,i=t.defaultPositionY,a=this.stateProvider,r=a.scale,s=a.positionX,l=a.positionY,c=a.reset,u=a.options,d=u.disabled,t=u.limitToBounds,a=u.centerContent,u=u.limitToWrapper;d||c.disabled||r===n&&s===o&&l===i||(e="number"==typeof e?e:c.animationTime,n=checkIsNumber(n,initialState.scale),o=checkIsNumber(o,initialState.positionX),i=checkIsNumber(i,initialState.positionY),(t&&!u||a)&&(o=(u=handleCalculateBounds.call(this,n,u)).minPositionX,i=u.minPositionY),animateComponent.call(this,{targetState:{scale:n,positionX:o,positionY:i},speed:e,type:c.animationType}))}function getButtonAnimationTime(e,t,n){return n*(t/e)}function round(e,t){t=Math.pow(10,t);return Math.round(e*t)/t}function getCurrentDistance(e){return getDistance(e.touches[0],e.touches[1])}function checkIfInfinite(e){return e===1/0||e===-1/0}function calculatePinchZoom(e,t){var n=this.stateProvider,o=n.options,i=o.minScale,a=o.maxScale,o=n.scalePadding,n=o.size,o=o.disabled;if("number"!=typeof t||"number"!=typeof e)return console.error("Pinch touches distance was not provided");if(!(e<0)){t=e/t*this.pinchStartScale;return checkZoomBounds(roundNumber(t,2),i,a,n,!o)}}function calculateMidpoint(e,t,n){var o=n.getBoundingClientRect(),i=e.touches,n=round(i[0].clientX-o.left,5),e=round(i[0].clientY-o.top,5);return{mouseX:(n+round(i[1].clientX-o.left,5))/2/t,mouseY:(e+round(i[1].clientY-o.top,5))/2/t}}function handleZoomPinch(e){var t=this.stateProvider,n=t.scale,o=t.options,i=o.limitToBounds,a=o.limitToWrapper,r=t.scalePadding,s=r.disabled,l=r.size,c=t.wheel.limitsOnWheel,o=t.pinch,r=this.state.contentComponent;o.disabled||this.stateProvider.options.disabled||(e.cancelable&&(e.preventDefault(),e.stopPropagation()),null!==this.pinchStartDistance&&(o=(t=calculateMidpoint(e,n,r)).mouseX,r=t.mouseY,checkIfInfinite(o)||checkIfInfinite(r)||(t=getCurrentDistance(e),checkIfInfinite(e=calculatePinchZoom.call(this,t,this.pinchStartDistance))||e===n||(a=handleCalculateBounds.call(this,e,a),c=(l=handleCalculatePositions.call(this,o,r,e,a,i&&(s||0===l||c))).x,l=l.y,this.lastDistance=t,this.stateProvider.positionX=c,this.stateProvider.positionY=l,this.stateProvider.scale=e,this.stateProvider.previousScale=n,this.applyTransformation()))))}var throttleTime=30;function velocityTimeSpeed(e,t){return this.stateProvider.pan.velocityEqualToMove?t-t/Math.max(1,e):t}function handleEnableVelocity(){this.setState({startAnimation:!1})}function handleFireVelocity(){this.setState({startAnimation:!0})}function animateVelocity(){var o=this,e=this.stateProvider,i=e.positionX,a=e.positionY,r=e.options.limitToBounds,t=e.pan,n=t.velocityBaseTime,s=t.lockAxisX,l=t.lockAxisY,c=t.velocityAnimationType,u=t.panReturnAnimationTime,d=t.panReturnAnimationType,p=t.padding,h=t.paddingSize,m=e.wrapperComponent;if(this.mounted){if(!this.velocity||!this.bounds)return handleDisableAnimation.call(this);var f,v,y,g,b,P,w,_,S=this.bounds,C=S.maxPositionX,T=S.minPositionX,x=S.maxPositionY,k=S.minPositionY,t=this.velocity,e=t.velocityX,S=t.velocityY,t=t.velocity,n=velocityTimeSpeed.call(this,t,n);n?(f=e,v=S,S=u<n?n:u,n=p?h:0,p=m?n*m.offsetWidth/100:0,h=m?n*m.offsetHeight/100:0,y=C+p,g=T-p,b=x+h,P=k-h,w=checkPositionBounds(i,a,this.bounds,r,n,m),_=(new Date).getTime(),animate.call(this,c,S,function(e){var t=(new Date).getTime()-_,n=(0,availableAnimations[d])(t/u),t=getPosition(s,f,e,n=u<t||1<n||n===1/0||n===-1/0?1:n,T,C,r,i,w.x,g,y),n=getPosition(l,v,e,n,k,x,r,a,w.y,P,b);i===t&&a===n||(o.stateProvider.positionX=t,o.stateProvider.positionY=n,o.applyTransformation())})):handlePanningAnimation.call(this)}}function calculateVelocityStart(e){var t=this,n=this.stateProvider,o=n.scale,i=n.options.disabled,a=n.pan,r=a.velocity,s=a.velocitySensitivity,l=a.velocityActiveScale,c=a.velocityMinSpeed,u=n.wrapperComponent;if(!(!r||o<=l||i)){handleEnableVelocity.call(this);a=Date.now();if(this.lastMousePosition){n=getClientPosition(e);if(!n)return console.error("No mouse or touch position detected");r=n.clientX,l=n.clientY,i=r-this.lastMousePosition.clientX,n=l-this.lastMousePosition.clientY,r=a-this.velocityTime,l=2-u.offsetWidth/window.innerWidth,u=2-u.offsetHeight/window.innerHeight,l=i/r*s*o*(20*Math.max(c,Math.min(2,l))),u=n/r*s*o*(20*Math.max(c,Math.min(2,u))),s=Math.sqrt(i*i+n*n)/r*s;if(this.velocity&&s<this.velocity.velocity&&this.throttle)return;this.velocity={velocityX:l,velocityY:u,velocity:s},this.throttle&&clearTimeout(this.throttle),this.throttle=setTimeout(function(){t.mounted&&(t.throttle=!1)},throttleTime)}e=getClientPosition(e);this.lastMousePosition=e,this.velocityTime=a}}function getPosition(e,t,n,o,i,a,r,s,l,c,u){if(r){var d;if(i<l&&a<s)return u<(d=l-(l-a)*o)?u:d<a?a:d;if(l<i&&s<i)return(d=l-(l-i)*o)<c?c:i<d?i:d}return e?l:boundLimiter(s+t*n,i,a,r)}function makePassiveEventOption(e){return e}var propsList=["previousScale","scale","positionX","positionY","defaultPositionX","defaultPositionY","defaultScale","onWheelStart","onWheel","onWheelStop","onPanningStart","onPanning","onPanningStop","onPinchingStart","onPinching","onPinchingStop","onZoomChange","options","wheel","scalePadding","pan","pinch","zoomIn","zoomOut","doubleClick","reset"],getValidPropsFromObject=function(n){return Object.keys(n).reduce(function(e,t){return propsList.includes(t)&&(e[t]=n[t]),e},{})},Context=React__default.default.createContext({}),wheelStopEventTimer=null,wheelStopEventTime=180,wheelAnimationTimer=null,wheelAnimationTime=100,StateProvider=function(e){function t(){var p=null!==e&&e.apply(this,arguments)||this;return p.mounted=!0,p.state={wrapperComponent:void 0,contentComponent:void 0},p.stateProvider=__assign(__assign(__assign(__assign({},initialState),mergeProps(initialState,p.props.dynamicValues)),p.props.defaultValues),{previousScale:p.props.dynamicValues.scale||p.props.defaultValues.scale||initialState.scale}),p.windowToWrapperScaleX=0,p.windowToWrapperScaleY=0,p.startCoords=null,p.isDown=!1,p.pinchStartDistance=null,p.lastDistance=null,p.pinchStartScale=null,p.distance=null,p.bounds=null,p.velocityTime=null,p.lastMousePosition=null,p.velocity=null,p.offsetX=null,p.offsetY=null,p.throttle=!1,p.previousWheelEvent=null,p.lastScale=null,p.animate=null,p.animation=null,p.maxBounds=null,p.handleWheel=function(e){var t=p.stateProvider,n=t.scale,o=t.wheel,i=o.disabled,a=o.wheelEnabled,r=o.touchPadEnabled,s=p.props,l=s.onWheelStart,t=s.onWheel,c=s.onWheelStop,o=p.state,s=o.wrapperComponent,o=o.contentComponent;p.isDown||i||p.stateProvider.options.disabled||!s||!o||(a||e.ctrlKey)&&(!r&&e.ctrlKey||(wheelStopEventTimer||(p.lastScale=n,handleDisableAnimation.call(p),handleCallback(l,p.getCallbackProps())),handleWheelZoom.call(p,e),handleCallback(t,p.getCallbackProps()),p.applyTransformation(null,null,null),p.previousWheelEvent=e,handleWheelStop(p.previousWheelEvent,e,p.stateProvider)&&(clearTimeout(wheelStopEventTimer),wheelStopEventTimer=setTimeout(function(){p.mounted&&(handleCallback(c,p.getCallbackProps()),wheelStopEventTimer=null)},wheelStopEventTime)),p.animate=!1,p.lastScale=p.stateProvider.scale,clearTimeout(wheelAnimationTimer),wheelAnimationTimer=setTimeout(function(){p.mounted&&handlePaddingAnimation$1.call(p,e)},wheelAnimationTime)))},p.checkPanningTarget=function(t){var e=p.stateProvider.pan.disableOnTarget;return e.map(function(e){return e.toUpperCase()}).includes(t.target.tagName)||e.find(function(e){return t.target.classList.value.includes(e)})},p.checkIsPanningActive=function(e){var t=p.stateProvider.pan.disabled,n=p.state,o=n.wrapperComponent,n=n.contentComponent;return!p.isDown||t||p.stateProvider.options.disabled||e.touches&&(1!==e.touches.length||Math.abs(p.startCoords.x-e.touches[0].clientX)<1||Math.abs(p.startCoords.y-e.touches[0].clientY)<1)||!o||!n},p.handleSetUpPanning=function(e,t){var n=p.stateProvider,o=n.positionX,n=n.positionY;p.isDown=!0,p.startCoords={x:e-o,y:t-n},handleCallback(p.props.onPanningStart,p.getCallbackProps())},p.handleStartPanning=function(e){var t=p.stateProvider,n=t.wrapperComponent,o=t.scale,i=t.options,a=i.minScale,r=i.maxScale,s=i.limitToWrapper,l=t.pan.disabled,i=e.target,t=e.touches;l||p.stateProvider.options.disabled||n&&!n.contains(i)||p.checkPanningTarget(e)||o<a||r<o||(handleDisableAnimation.call(p),p.bounds=handleCalculateBounds.call(p,o,s),t&&1===t.length&&p.handleSetUpPanning(t[0].clientX,t[0].clientY),t||p.handleSetUpPanning(e.clientX,e.clientY))},p.handlePanning=function(e){p.isDown&&e.preventDefault(),p.checkIsPanningActive(e)||(e.stopPropagation(),calculateVelocityStart.call(p,e),handlePanning.call(p,e),handleCallback(p.props.onPanning,p.getCallbackProps()))},p.handleStopPanning=function(){var e,t;p.isDown&&(p.isDown=!1,p.animate=!1,p.animation=!1,handleFireVelocity.call(p),handleCallback(p.props.onPanningStop,p.getCallbackProps()),e=(t=p.stateProvider).pan.velocity,t=t.scale,(p.velocity&&e&&1<t?animateVelocity:handlePanningAnimation).call(p))},p.handlePinchStart=function(e){var t=p.stateProvider.scale;e.preventDefault(),e.stopPropagation(),handleDisableAnimation.call(p);e=getDistance(e.touches[0],e.touches[1]);p.pinchStartDistance=e,p.lastDistance=e,p.pinchStartScale=t,p.isDown=!1,handleCallback(p.props.onPinchingStart,p.getCallbackProps())},p.handlePinch=function(e){p.isDown=!1,handleZoomPinch.call(p,e),handleCallback(p.props.onPinching,p.getCallbackProps())},p.handlePinchStop=function(){"number"==typeof p.pinchStartScale&&(p.isDown=!1,p.velocity=null,p.lastDistance=null,p.pinchStartScale=null,p.pinchStartDistance=null,handlePaddingAnimation$1.call(p),handleCallback(p.props.onPinchingStop,p.getCallbackProps()))},p.handleTouchStart=function(e){var t=p.stateProvider,n=t.wrapperComponent,o=t.contentComponent,i=t.scale,a=t.options,r=a.disabled,t=a.minScale,a=e.touches;if(!r&&n&&o&&!(i<t))return handleDisableAnimation.call(p),a&&1===a.length?p.handleStartPanning(e):a&&2===a.length?p.handlePinchStart(e):void 0},p.handleTouch=function(e){var t=p.stateProvider,n=t.pan,o=t.pinch;if(!t.options.disabled)return n.disabled||1!==e.touches.length?o.disabled||2!==e.touches.length?void 0:p.handlePinch(e):p.handlePanning(e)},p.handleTouchStop=function(){p.handleStopPanning(),p.handlePinchStop()},p.zoomIn=function(e){var t=p.stateProvider,n=t.zoomIn,o=n.disabled,i=n.step,a=t.options,n=p.state,t=n.wrapperComponent,n=n.contentComponent;if(!e)throw Error("Zoom in function requires event prop");!o&&!a.disabled&&t&&n&&handleZoomControls.call(p,1,i)},p.zoomOut=function(e){var t=p.stateProvider,n=t.zoomOut,o=n.disabled,i=n.step,a=t.options,n=p.state,t=n.wrapperComponent,n=n.contentComponent;if(!e)throw Error("Zoom out function requires event prop");!o&&!a.disabled&&t&&n&&handleZoomControls.call(p,-1,i)},p.handleDbClick=function(e){var t=p.stateProvider,n=t.options,o=t.doubleClick,i=o.disabled,a=o.step,t=p.state,o=t.wrapperComponent,t=t.contentComponent;if(!e)throw Error("Double click function requires event prop");!i&&!n.disabled&&o&&t&&handleDoubleClick.call(p,e,1,a)},p.setScale=function(e,t,n){void 0===t&&(t=200),void 0===n&&(n="easeOut");var o=p.stateProvider,i=o.positionX,a=o.positionY,r=o.scale,s=o.options.disabled,l=p.state,o=l.wrapperComponent,l=l.contentComponent;!s&&o&&l&&(e={positionX:i,positionY:a,scale:isNaN(e)?r:e},animateComponent.call(p,{targetState:e,speed:t,type:n}))},p.setPositionX=function(e,t,n){void 0===t&&(t=200),void 0===n&&(n="easeOut");var o=p.stateProvider,i=o.positionX,a=o.positionY,r=o.scale,s=o.options,l=s.disabled,c=s.transformEnabled,o=p.state,s=o.wrapperComponent,o=o.contentComponent;!l&&c&&s&&o&&(r={positionX:isNaN(e)?i:e,positionY:a,scale:r},animateComponent.call(p,{targetState:r,speed:t,type:n}))},p.setPositionY=function(e,t,n){void 0===t&&(t=200),void 0===n&&(n="easeOut");var o=p.stateProvider,i=o.positionX,a=o.scale,r=o.positionY,s=o.options,l=s.disabled,c=s.transformEnabled,o=p.state,s=o.wrapperComponent,o=o.contentComponent;!l&&c&&s&&o&&(a={positionX:i,positionY:isNaN(e)?r:e,scale:a},animateComponent.call(p,{targetState:a,speed:t,type:n}))},p.setTransform=function(e,t,n,o,i){void 0===o&&(o=200),void 0===i&&(i="easeOut");var a=p.stateProvider,r=a.positionX,s=a.positionY,l=a.scale,c=a.options,u=c.disabled,d=c.transformEnabled,a=p.state,c=a.wrapperComponent,a=a.contentComponent;!u&&d&&c&&a&&(n={positionX:isNaN(e)?r:e,positionY:isNaN(t)?s:t,scale:isNaN(n)?l:n},animateComponent.call(p,{targetState:n,speed:o,type:i}))},p.resetTransform=function(){var e=p.stateProvider.options,t=e.disabled,e=e.transformEnabled;!t&&e&&resetTransformations.call(p)},p.setDefaultState=function(){p.animation=null,p.stateProvider=__assign(__assign(__assign({},p.stateProvider),{scale:initialState.scale,positionX:initialState.positionX,positionY:initialState.positionY}),p.props.defaultValues),p.forceUpdate()},p.setWrapperComponent=function(e){p.setState({wrapperComponent:e})},p.setContentComponent=function(c){p.setState({contentComponent:c},function(){var t,n,e=p.stateProvider,o=e.wrapperComponent,i=e.options,a=i.centerContent,r=i.limitToBounds,s=i.limitToWrapper,l=e.scale,i=p.props.defaultValues,e=i.positionX,i=i.positionY;r&&!s||a&&!e&&!i?(c.style.transform=i="translate(25%, 25%) scale("+l+")",c.style.WebkitTransform=i,p.forceUpdate(),t=(new Date).getTime(),n=setInterval(function(){var e;o.offsetWidth?(e=handleCalculateBounds.call(p,l,!1),p.stateProvider.positionX=e.minPositionX,p.stateProvider.positionY=e.minPositionY,p.applyTransformation(null,null,null),clearInterval(n),n=null):2e3<(new Date).getTime()-t&&(clearInterval(n),n=null)},20)):p.applyTransformation(null,null,null)})},p.applyTransformation=function(e,t,n){if(p.mounted){var o=p.state.contentComponent,i=p.props.onZoomChange,a=p.stateProvider,r=a.previousScale,s=a.scale,l=a.positionX,a=a.positionY;if(!o)return console.error("There is no content component");e="translate("+(t||l)+"px, "+(n||a)+"px) scale("+(e||s)+")";o.style.transform=e,o.style.WebkitTransform=e,p.forceUpdate(),i&&r!==s&&handleCallback(i,p.getCallbackProps())}},p.getCallbackProps=function(){return getValidPropsFromObject(p.stateProvider)},p}return __extends(t,e),t.prototype.componentDidMount=function(){var e=makePassiveEventOption(!1);window.addEventListener("mousedown",this.handleStartPanning,e),window.addEventListener("mousemove",this.handlePanning,e),window.addEventListener("mouseup",this.handleStopPanning,e)},t.prototype.componentWillUnmount=function(){var e=makePassiveEventOption(!1);window.removeEventListener("mousedown",this.handleStartPanning,e),window.removeEventListener("mousemove",this.handlePanning,e),window.removeEventListener("mouseup",this.handleStopPanning,e),handleDisableAnimation.call(this)},t.prototype.componentDidUpdate=function(e,t){var n=this.state,o=n.wrapperComponent,i=n.contentComponent,n=this.props.dynamicValues;!t.contentComponent&&i&&(this.stateProvider.contentComponent=i),!t.wrapperComponent&&o&&void 0!==o&&(this.stateProvider.wrapperComponent=o,this.windowToWrapperScaleX=getWindowScaleX(o),this.windowToWrapperScaleY=getWindowScaleY(o),t=makePassiveEventOption(!1),o.addEventListener("wheel",this.handleWheel,t),o.addEventListener("dblclick",this.handleDbClick,t),o.addEventListener("touchstart",this.handleTouchStart,t),o.addEventListener("touchmove",this.handleTouch,t),o.addEventListener("touchend",this.handleTouchStop,t)),(o&&i||e.dynamicValues!==n)&&(this.maxBounds=handleCalculateBounds.call(this,this.stateProvider.scale,this.stateProvider.options.limitToWrapper)),e.dynamicValues&&e.dynamicValues!==n&&(this.animation=null,this.stateProvider=__assign(__assign({},this.stateProvider),mergeProps(this.stateProvider,n)),this.applyTransformation(null,null,null))},t.prototype.render=function(){var e=this.state,t=e.wrapperComponent,e=e.contentComponent,t={loaded:Boolean(t&&e),state:this.getCallbackProps(),dispatch:{setScale:this.setScale,setPositionX:this.setPositionX,setPositionY:this.setPositionY,zoomIn:this.zoomIn,zoomOut:this.zoomOut,setTransform:this.setTransform,resetTransform:this.resetTransform,setDefaultState:this.setDefaultState},nodes:{setWrapperComponent:this.setWrapperComponent,setContentComponent:this.setContentComponent}},e=this.props.children,e="function"==typeof e?e(__assign(__assign({},t.state),t.dispatch)):e;return React__default.default.createElement(Context.Provider,{value:t},e)},t}(React.Component),TransformWrapper=function(e){var t=e.children,n=e.defaultPositionX,o=e.defaultPositionY,i=e.defaultScale,a=e.onWheelStart,r=e.onWheel,s=e.onWheelStop,l=e.onPanningStart,c=e.onPanning,u=e.onPanningStop,d=e.onPinchingStart,p=e.onPinching,h=e.onPinchingStop,m=e.onZoomChange,e=__rest(e,["children","defaultPositionX","defaultPositionY","defaultScale","onWheelStart","onWheel","onWheelStop","onPanningStart","onPanning","onPanningStop","onPinchingStart","onPinching","onPinchingStop","onZoomChange"]),e=__assign({},e);return e.options&&e.options.limitToWrapper&&(e.options.limitToBounds=!0),React__default.default.createElement(StateProvider,{defaultValues:deleteUndefinedProps({positionX:n,positionY:o,scale:i}),dynamicValues:deleteUndefinedProps(getValidPropsFromObject(e)),onWheelStart:a,onWheel:r,onWheelStop:s,onPanningStart:l,onPanning:c,onPanningStop:u,onPinchingStart:d,onPinching:p,onPinchingStop:h,onZoomChange:m},t)};function styleInject(e,t){var n,o=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(n=document.head||document.getElementsByTagName("head")[0],(t=document.createElement("style")).type="text/css","top"===o&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)))}var css=".TransformComponent-module_container__3NwNd {\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  overflow: hidden;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -khtml-user-select: none; /* Konqueror HTML */\n  -moz-user-select: none; /* Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none;\n  margin: 0;\n  padding: 0;\n}\n.TransformComponent-module_content__TZU5O {\n  display: flex;\n  flex-wrap: wrap;\n  width: fit-content;\n  height: fit-content;\n  margin: 0;\n  padding: 0;\n  transform-origin: 0% 0%;\n}\n.TransformComponent-module_content__TZU5O img {\n  pointer-events: none;\n}\n",styles$1={container:"TransformComponent-module_container__3NwNd",content:"TransformComponent-module_content__TZU5O"};styleInject(css);var TransformComponent=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.wrapperRef=React__default.default.createRef(),e.contentRef=React__default.default.createRef(),e}return __extends(e,t),e.prototype.componentDidMount=function(){var e=this.context.nodes;e.setWrapperComponent(this.wrapperRef.current),e.setContentComponent(this.contentRef.current)},e.prototype.render=function(){var e=this.props.children,t=this.context.state,n=t.positionX,o=t.positionY,i=t.scale,a=t.options,t=a.wrapperClass,a=a.contentClass;return React__default.default.createElement("div",{ref:this.wrapperRef,className:"react-transform-component "+styles$1.container+" "+t},React__default.default.createElement("div",{ref:this.contentRef,className:"react-transform-element "+styles$1.content+" "+a,style:{WebkitTransform:"translate("+n+"px, "+o+"px) scale("+i+")",transform:"translate("+n+"px, "+o+"px) scale("+i+")"}},e))},e}(React__default.default.Component);TransformComponent.contextType=Context;var ZoomPan=function(e){var t=e.handleZoomChange,n=e.isDesktop,o=e.isZoomIn,a=e.children,r=e.handleZoomAction,s=e.showZoomOption,l=e.styles,c=e.zoomButtonStyle;return n?React__default.default.createElement(TransformWrapper,{pan:{disabled:!o},zoomIn:{step:10},zoomOut:{step:10},pinch:{disabled:!0},wheel:{step:50,disabled:!0},doubleClick:{disabled:!0},defaultScale:1,defaultPositionX:0,defaultPositionY:0},function(e){var t=e.zoomIn,n=e.zoomOut,o=e.resetTransform,i=e.scale;return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(TransformComponent,null,a),s&&React__default.default.createElement("div",{style:l.zoomOption},React__default.default.createElement("button",{style:_objectSpread2(_objectSpread2({},l.zoomButton),c),onClick:function(e){t(e),r("zoom-in",i)}},"+"),React__default.default.createElement("button",{style:_objectSpread2(_objectSpread2({},l.zoomButton),c),onClick:function(e){n(e),setTimeout(function(){i<1.5&&n(e)}),r("zoom-out",i)}},"−"),React__default.default.createElement("button",{style:_objectSpread2(_objectSpread2({},l.zoomButton),c),onClick:function(e){o(e),setTimeout(function(){o(e)}),r("zoom-close",i)}},"×")))}):React__default.default.createElement(TransformWrapper,(_defineProperty(o={doubleClick:{disabled:!1},pan:{disabled:!o},zoomIn:{step:50},wheel:{step:50}},"doubleClick",{mode:"reset"}),_defineProperty(o,"defaultScale",1),_defineProperty(o,"defaultPositionX",0),_defineProperty(o,"defaultPositionY",0),_defineProperty(o,"onZoomChange",function(e){return t(e)}),o),React__default.default.createElement(TransformComponent,null,a))},styles={threeSixtyWrap:function(e){return{display:e?"block":"none",width:"100%",height:"100%",position:"relative"}},transformComponent:function(e,t,n,o){return _objectSpread2({width:"fit-content",height:n&&!o?"fit-content":"100%",visibility:e?"visible":"hidden",position:"relative",transform:"translateX(-50%)",maxWidth:"100%",maxHeight:"100%",left:"50%",overflow:"hidden",cursor:"url(".concat(t?"https://spinny-images.s3.ap-south-1.amazonaws.com/static-asset/icons/drag_cursor.svg":"https://spinny-images.s3.ap-south-1.amazonaws.com/static-asset/icons/cursor.svg","), auto")},Object.assign({},n&&!o?{margin:"auto"}:{}))},viewer:function(e,t){return{width:"100%",height:"100%",display:"flex",cursor:"url(".concat(t?"https://spinny-images.s3.ap-south-1.amazonaws.com/static-asset/icons/drag_cursor.svg":"https://spinny-images.s3.ap-south-1.amazonaws.com/static-asset/icons/cursor.svg","), auto"),visibility:e?"visible":"hidden"}},zoomOption:{position:"absolute",bottom:"1em",right:"1em",width:"2em",zIndex:"2"},zoomButton:{padding:"0px",width:"1.5em",height:"1.5em",fontSize:"20px",fontWeight:"500",cursor:"pointer"},loadingImgWrap:function(e,t,n,o){return{display:"block",position:"relative",width:"100%",height:"100%",left:"0px",top:"0px",backgroundPosition:"center",backgroundSize:"contain",backgroundRepeat:"no-repeat",backgroundImage:"url(".concat(t[n][o],")"),cursor:"not-allowed"}},loading:{position:"absolute",width:"100px",height:"100px",top:"calc(50% - 50px)",left:"calc(50% - 50px)"}},ThreeSixtyViewer=function(o){function e(e,o){var i=0,a=e.length;e.forEach(function(e){var t,n;t=e,n=function(){++i===a&&o()},(e=new Image).onload=n,e.src=t})}function t(){var e,t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null,n=S[t?t.detail.image_index:h].angle;null!==(e=o.hotspots)&&void 0!==e&&e.length&&D(function(e){return updateHotspots(e,n)}),t&&t.detail&&f&&f({index:t.detail.image_index,item:S[t.detail.image_index]})}function n(){O(!0)}function i(){O(!1)}function a(e){e.scale<=1?A&&(R(!1),v&&v(!1),k.current._allowScroll()):A||(R(!0),v&&v(!0),k.current._stopScroll(),L(k.current.index))}function r(e,t){"zoom-in"===e?A||(L(k.current.index),v&&v(!0),R(!0),k.current._stopScroll()):"zoom-out"===e?t<1.5&&A&&(v&&v(!1),R(!1),k.current._allowScroll()):A&&(v&&v(!1),R(!1),k.current._allowScroll())}var s=o.isMobile,l=void 0!==s&&s,s=o.imageKey,c=void 0===s?"image_url":s,s=o.zoomImageKey,u=void 0===s?"zoom_image_url":s,s=o.type,d=void 0===s?"exterior":s,p=o.autoPlay,s=o.startIndex,h=void 0===s?0:s,m=o.updateIndex,f=o.handleImageChange,v=o.handleZoomInOut,s=o.showZoomOption,y=void 0!==s&&s,s=o.containerName,g=void 0===s?"reactThreesixtyContainer":s,b=o.hotspotClickHandler,P=o.renderHotspotUI,w=o.renderExtraElement,_=o.noOuterMargin,S=o.imageArr,C=o.threeSixtyWrapStyle,T=o.zoomButtonStyle,x=React.useRef(null),k=React.useRef(null),s=_slicedToArray(React.useState(!1),2),E=s[0],O=s[1],s=_slicedToArray(React.useState([]),2),Y=s[0],X=s[1],s=_slicedToArray(React.useState(!1),2),W=s[0],I=s[1],s=_slicedToArray(React.useState(!1),2),A=s[0],R=s[1],s=_slicedToArray(React.useState(o.hotspots),2),j=s[0],D=s[1],L=function(n){var o=S[n][u]||S[n][c];S[n][u]&&e([o],function(){var e=S.map(function(e,t){return t===n?o:e[c]});k.current._updateImage(e)})};React.useEffect(function(){k.current&&0<=m&&m<S.length&&k.current.goto(m)},[m]),React.useEffect(function(){return document.addEventListener("".concat(g,"_image_changed"),t),x.current&&(x.current.addEventListener("mousedown",n),x.current.addEventListener("mouseup",i)),function(){document.removeEventListener("".concat(g,"_image_changed"),t),x.current&&(x.current.removeEventListener("mousedown",n),x.current.removeEventListener("mouseup",i))}},[d]),React.useEffect(function(){var e;k.current&&(e=S.map(function(e){return e[c]}),k.current._updateImage(e)),null!==(e=o.hotspots)&&void 0!==e&&e.length&&t()},[JSON.stringify(S)]),React.useEffect(function(){if(x&&x.current)return-1===Y.indexOf(d)&&I(!1),k.current=new ThreeSixty(x.current,_objectSpread2({image:S.map(function(e){return e[c]})},o)),e(S.map(function(e){return e[c]}),function(){p&&k.current.play(),X([].concat(_toConsumableArray(Y),[d])),I(!0),k.current._allowScroll()}),function(){x&&k.current.destroy()}},[d]);return React__default.default.createElement(React__default.default.Fragment,null,l?React__default.default.createElement("div",{style:_objectSpread2(_objectSpread2({},styles.threeSixtyWrap(W)),C)},React__default.default.createElement(ZoomPan,{handleZoomChange:a,isZoomIn:A,showZoomOption:y,styles:styles,zoomButtonStyle:T},React__default.default.createElement("div",{style:styles.transformComponent(W,E,l,_)},React__default.default.createElement("div",{ref:x,style:styles.viewer(W,E)},w&&React__default.default.createElement("div",{className:"extra_threesixty"},w())),0<(null==j?void 0:j.length)&&React__default.default.createElement(ThreeSixtyHotspots,{hotspots:j,renderUI:P,clickHandler:b})))):React__default.default.createElement("div",{style:_objectSpread2(_objectSpread2({},styles.threeSixtyWrap(W)),C)},React__default.default.createElement(ZoomPan,{isDesktop:!0,handleZoomAction:r,isZoomIn:A,showZoomOption:y,styles:styles,zoomButtonStyle:T},React__default.default.createElement("div",{style:styles.transformComponent(W,E)},React__default.default.createElement("div",{ref:x,style:styles.viewer(W,E)},w&&React__default.default.createElement("div",{className:"extra_threesixty"},w())),0<(null==j?void 0:j.length)&&React__default.default.createElement(ThreeSixtyHotspots,{hotspots:j,clickHandler:b,renderUI:P})))),!W&&React__default.default.createElement("div",{style:styles.loadingImgWrap(l,S,h,c)},React__default.default.createElement("div",{style:styles.loading},React__default.default.createElement("img",{src:"https://spinny-images.s3.ap-south-1.amazonaws.com/static-asset/icons/loader.gif",style:{width:"100%",height:"100%"}}))))},ThreeSixtyViewer$1=React.memo(ThreeSixtyViewer);exports.ThreeSixtyViewer=ThreeSixtyViewer$1,exports.ZoomPan=ZoomPan;