react-threesixty
Version:
A Simple React 360 Library using threesixty.js
2 lines (1 loc) • 48.8 kB
JavaScript
import t,{Component as e,memo as n,useRef as i,useState as o,useEffect as a}from"react";function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function s(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?r(Object(n),!0).forEach((function(e){l(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function l(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function c(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var i,o,a=[],r=!0,s=!1;try{for(n=n.call(t);!(r=(i=n.next()).done)&&(a.push(i.value),!e||a.length!==e);r=!0);}catch(t){s=!0,o=t}finally{try{r||null==n.return||n.return()}finally{if(s)throw o}}return a}(t,e)||p(t,e)||function(){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 u(t){return function(t){if(Array.isArray(t))return d(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||p(t)||function(){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 p(t,e){if(t){if("string"==typeof t)return d(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(t,e):void 0}}function d(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}var h,m=function(t,e){return t(e={exports:{}},e.exports),e.exports}((function(t,e){window,t.exports=function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){(function(t){function n(t,e){return function(t,e){return e.get?e.get.call(t):e.value}(t,o(t,e,"get"))}function i(t,e,n){return function(t,e,n){if(e.set)e.set.call(t,n);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=n}}(t,o(t,e,"set"),n),n}function o(t,e,n){if(!e.has(t))throw new TypeError("attempted to "+n+" private field on non-instance");return e.get(t)}var a=new WeakMap,r=new WeakMap,s=new WeakMap,l=function(){function e(t,o){var l=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),a.set(this,{writable:!0,value:null}),r.set(this,{writable:!0,value:null}),s.set(this,{writable:!0,value:null}),i(this,r,o),i(this,s,{container:{mousedown:function(t){return i(l,a,t.pageX)},touchstart:function(t){return i(l,a,t.touches[0].clientX)},touchend:function(){return i(l,a,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(l,a,null)},mousemove:function(e){n(l,a)&&Math.abs(n(l,a)-e.pageX)>n(l,r).dragTolerance&&(t.stop(),n(l,a)>e.pageX?t.prev():t.next(),i(l,a,e.pageX))},touchmove:function(e){n(l,a)&&Math.abs(n(l,a)-e.touches[0].clientX)>n(l,r).swipeTolerance&&(t.stop(),n(l,a)>e.touches[0].clientX?t.prev():t.next(),i(l,a,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()}var o;return(o=[{key:"destroy",value:function(){n(this,r).swipeTarget.removeEventListener("mousedown",n(this,s).container.mousedown),n(this,r).swipeTarget.removeEventListener("touchstart",n(this,s).container.touchstart),n(this,r).swipeTarget.removeEventListener("touchend",n(this,s).container.touchend),t.removeEventListener("mouseup",n(this,s).global.mouseup),t.removeEventListener("mousemove",n(this,s).global.mousemove),t.removeEventListener("touchmove",n(this,s).global.touchmove),t.removeEventListener("keydown",n(this,s).global.keydown),t.removeEventListener("keyup",n(this,s).global.keyup),n(this,r).prev&&(n(this,r).prev.removeEventListener("mousedown",n(this,s).prev.mousedown),n(this,r).prev.removeEventListener("mouseup",n(this,s).prev.mouseup),n(this,r).prev.removeEventListener("touchstart",n(this,s).prev.touchstart)),n(this,r).next&&(n(this,r).next.removeEventListener("mousedown",n(this,s).next.mousedown),n(this,r).next.removeEventListener("mouseup",n(this,s).next.mouseup),n(this,r).next.removeEventListener("touchstart",n(this,s).next.touchstart))}},{key:"_initEvents",value:function(){t.addEventListener("click",n(this,s).global.click),n(this,r).draggable&&(n(this,r).swipeTarget.addEventListener("mousedown",n(this,s).container.mousedown),t.addEventListener("mouseup",n(this,s).global.mouseup),t.addEventListener("mousemove",n(this,s).global.mousemove)),n(this,r).swipeable&&(n(this,r).swipeTarget.addEventListener("touchstart",n(this,s).container.touchstart),n(this,r).swipeTarget.addEventListener("touchend",n(this,s).container.touchend),t.addEventListener("touchmove",n(this,s).global.touchmove)),n(this,r).keys&&(t.addEventListener("keydown",n(this,s).global.keydown),t.addEventListener("keyup",n(this,s).global.keyup)),n(this,r).prev&&(n(this,r).prev.addEventListener("mousedown",n(this,s).prev.mousedown),n(this,r).prev.addEventListener("mouseup",n(this,s).prev.mouseup),n(this,r).prev.addEventListener("touchstart",n(this,s).prev.touchstart)),n(this,r).next&&(n(this,r).next.addEventListener("mousedown",n(this,s).next.mousedown),n(this,r).next.addEventListener("mouseup",n(this,s).next.mouseup),n(this,r).next.addEventListener("touchstart",n(this,s).next.touchstart))}}])&&function(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}(e.prototype,o),e}();e.a=l}).call(this,n(0))},function(t,e,n){n.r(e),function(t){var i=n(1);function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function a(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){r(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){return function(t,e){return e.get?e.get.call(t):e.value}(t,c(t,e,"get"))}function l(t,e,n){return function(t,e,n){if(e.set)e.set.call(t,n);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=n}}(t,c(t,e,"set"),n),n}function c(t,e,n){if(!e.has(t))throw new TypeError("attempted to "+n+" private field on non-instance");return e.get(t)}var u=new WeakMap,p=new WeakMap,d=new WeakMap,h=new WeakMap,m=new WeakMap,f=new WeakMap,v=function(){function e(t,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),u.set(this,{writable:!0,value:null}),p.set(this,{writable:!0,value:0}),d.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=t,l(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"},n)),l(this,p,n.startIndex?n.startIndex:0),s(this,u).swipeTarget=s(this,u).swipeTarget||this.container,s(this,u).count=s(this,u).image.length,Object.freeze(s(this,u)),l(this,f,new i.a(this,s(this,u))),this._windowResizeListener=this._windowResizeListener.bind(this),this._initContainer()}var n,o;return n=e,(o=[{key:"isResponsive",get:function(){return s(this,u).aspectRatio>0}},{key:"containerWidth",get:function(){return this.isResponsive?this.container.clientWidth:s(this,u).width}},{key:"containerHeight",get:function(){return this.isResponsive?this.container.clientWidth*s(this,u).aspectRatio:s(this,u).height}},{key:"index",get:function(){return s(this,p)}},{key:"looping",get:function(){return s(this,h)}},{key:"prevIndex",get:function(){var t=s(this,u).inverted?s(this,p)+1:s(this,p)-1;return(s(this,u).count+t)%s(this,u).count}},{key:"next",value:function(){s(this,m)&&this.goto(s(this,u).inverted?s(this,p)-1:s(this,p)+1)}},{key:"prev",value:function(){s(this,m)&&this.goto(s(this,u).inverted?s(this,p)+1:s(this,p)-1)}},{key:"goto",value:function(t){var e=s(this,p),n=document.querySelector("#".concat(s(this,u).containerName," > .reactThreesixtyImage_").concat(e));n&&(n.style.visibility="hidden"),l(this,p,(s(this,u).count+t)%s(this,u).count),this._update()}},{key:"play",value:function(t){this.looping||(this._loop(t),l(this,h,!0))}},{key:"stop",value:function(){this.looping&&(t.clearTimeout(s(this,d)),l(this,h,!1))}},{key:"click",value:function(){var t=new CustomEvent("".concat(s(this,u).containerName,"_image_clicked"),{detail:{image_index:s(this,p)}});document.dispatchEvent(t)}},{key:"toggle",value:function(t){this.looping?this.stop():this.play(t)}},{key:"destroy",value:function(){this.stop(),s(this,f).destroy(),this.container.style.width="",this.container.style.height="",this.isResponsive&&window.removeEventListener("resize",this._windowResizeListener)}},{key:"_loop",value:function(e){var n=this;e?this.prev():this.next(),l(this,d,t.setTimeout((function(){n._loop(e)}),s(this,u).speed))}},{key:"_update",value:function(){var t=document.querySelector("#".concat(s(this,u).containerName," > .reactThreesixtyImage_").concat(s(this,p)));if(t){var e=new CustomEvent("".concat(s(this,u).containerName,"_image_changed"),{detail:{image_index:s(this,p)}});document.dispatchEvent(e),t.style.visibility="visible"}}},{key:"_stopScroll",value:function(){l(this,m,!1)}},{key:"_allowScroll",value:function(t){function e(){return t.apply(this,arguments)}return e.toString=function(){return t.toString()},e}((function(){l(this,m,!0)}))},{key:"_updateImage",value:function(t){l(this,u,a(a({},s(this,u)),{},{image:t})),this._initializeImage()}},{key:"_initializeImage",value:function(){var t=this;this.container.setAttribute("id","".concat(s(this,u).containerName)),this.container.setAttribute("class","".concat(s(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 s(this,u).handleRenderExraElment&&s(this,u).handleRenderExraElment()),s(this,u).image.map((function(e,n){var i=document.createElement("img");i.setAttribute("style","visibility:".concat(n===s(t,p)?"visible":"hidden",";position:").concat(n?"absolute":"relative",";transform:").concat(s(t,u).isMobile?"initial":"translateX(-50%)",";max-width:100%;max-height:100%;left:").concat(s(t,u).isMobile?"0px":"50%",";width:").concat(s(t,u).isMobile?"100%":"auto",";height:").concat(s(t,u).isMobile?"auto":"100%",";top:0px;pointer-events: none;")),i.setAttribute("src","".concat(e)),i.setAttribute("class","reactThreesixtyImage_".concat(n)),t.container.appendChild(i)}))}},{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(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}(n.prototype,o),e}();e.default=v}.call(this,n(0))}]).default})),f=(h=m)&&h.__esModule&&Object.prototype.hasOwnProperty.call(h,"default")?h.default:h;m.ThreeSixty;var v=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{x:.5,y:.5},i=e>180?e-360:e,o=function(t){switch(t){case"front":return 0;case"left":return 90;case"right":return-90;case"back":return 180;default:return 0}},a=function(t){return 45},r=function(t,e){switch(t){case"front":return{x:n.x,y:n.y-e};case"left":return{x:n.x-e,y:n.y};case"right":return{x:n.x+e,y:n.y};case"back":return{x:n.x,y:e+n.y};case"upper":default:return{x:n.x,y:n.y-e}}},l=function(t,e,n,i,o){var a=Math.PI/180*o,r=Math.cos(a),s=Math.sin(a),l=r*(i-e)-s*(n-t)+e;return{x:Number((r*(n-t)+s*(i-e)+t).toFixed(5)),y:Number(l.toFixed(5))}},c=function(t,e,i){var o=l(n.x,n.y,t,e,i);return{x:o.x,y:o.y}};return t.map((function(t){var n,l,u;n=o(t.position)-a(t.position),l=o(t.position)+a(t.position),u=e>180&&"back"===t.position?e>n&&e<l:i>n&&i<l;var p=r(t.position,t.radius),d=c(p.x,p.y,-(i+t.dentAngle));return s(s({},t),{},{left:d.x,display:u||"upper"===t.position})}))},y=function(t,e){return s({position:"absolute",zIndex:1,top:"".concat(100*t.top,"%"),left:"".concat(100*t.left,"%"),display:t.display?"block":"none",transform:"translate(-50%, -50%)"},Object.assign({},e?{}:{content:"",width:"20px",height:"20px",borderRadius:"50%",backgroundColor:"blue"}))},g=function(e){var n=e.hotspots,i=e.clickHandler,o=e.renderUI;return n.map((function(e,n){return t.createElement("div",{key:n,style:y(e,!!o),onClick:function(){return i&&i(e)}},o?o(e):t.createElement(t.Fragment,null))}))},w=function(t,e){return(w=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function b(t,e){function n(){this.constructor=t}w(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var P=function(){return(P=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var S={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"}},x=function(t,e){return Number(t.toFixed(e))},T=function(t,e){return"number"==typeof t?t:e},C=function(t,e,n,i){return x(i?t<e?e:t>n?n:t:t,2)},E=function(t,e){return Math.sqrt(Math.pow(t.pageX-e.pageX,2)+Math.pow(t.pageY-e.pageY,2))},k=function(t){var e=P({},t);return Object.keys(e).forEach((function(t){return void 0===e[t]&&delete e[t]})),e},O=function(t,e){t&&"function"==typeof t&&t(e)},Y=function(t,e,n){var i=n.scale,o=n.options,a=o.maxScale,r=o.minScale;return!!t&&(i<a||i>r||(Math.sign(t.deltaY)!==Math.sign(e.deltaY)||(t.deltaY>0&&t.deltaY<e.deltaY||(t.deltaY<0&&t.deltaY>e.deltaY||Math.sign(t.deltaY)!==Math.sign(e.deltaY)))))},X=function(t,e){return Object.keys(t).reduce((function(n,i){return"object"==typeof e[i]&&null!==e[i]?n[i]=P(P({},t[i]),e[i]):n[i]=void 0===e[i]?t[i]:e[i],n}),{})};var W={easeOut:function(t){return-Math.cos(t*Math.PI)/2+.5},linear:function(t){return t},easeInQuad:function(t){return t*t},easeOutQuad:function(t){return t*(2-t)},easeInOutQuad:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easeInCubic:function(t){return t*t*t},easeOutCubic:function(t){return--t*t*t+1},easeInOutCubic:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easeInQuart:function(t){return t*t*t*t},easeOutQuart:function(t){return 1- --t*t*t*t},easeInOutQuart:function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},easeInQuint:function(t){return t*t*t*t*t},easeOutQuint:function(t){return 1+--t*t*t*t*t},easeInOutQuint:function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t}};function _(){this.mounted&&(this.animation&&cancelAnimationFrame(this.animation),this.animate=!1,this.animation=!1,this.velocity=!1)}function z(t,e,n){var i=this;if(this.mounted){var o=(new Date).getTime();_.call(this),this.animation=function(){if(i.animation&&i.mounted){var a=(new Date).getTime()-o,r=(0,W[t])(a/e);a>=e?(n(1),i.animation=null):(n(r),requestAnimationFrame(i.animation))}},requestAnimationFrame(this.animation)}}function I(t){var e=this,n=t.targetState,i=t.speed,o=t.type,a=this.stateProvider,r=a.scale,s=a.positionX,l=a.positionY,c=n.scale-r,u=n.positionX-s,p=n.positionY-l;0===i?(this.stateProvider.previousScale=this.stateProvider.scale,this.stateProvider.scale=n.scale,this.stateProvider.positionX=n.positionX,this.stateProvider.positionY=n.positionY,this.applyTransformation()):z.call(this,o,i,(function(t){e.stateProvider.previousScale=e.stateProvider.scale,e.stateProvider.scale=r+c*t,e.stateProvider.positionX=s+u*t,e.stateProvider.positionY=l+p*t,e.applyTransformation()}))}function M(t,e,n,i,o){var a=e-(o?i:0);return!isNaN(n)&&t>=n?n:!isNaN(e)&&t<=a?a:t}function D(t,e,n,i,o,a){var r=n.minPositionX,s=n.minPositionY,l=n.maxPositionX,c=n.maxPositionY,u=a?o*a.offsetWidth/100:0,p=a?o*a.offsetHeight/100:0;return{x:C(t,r-u,l+u,i),y:C(e,s-p,c+p,i)}}function L(t,e,n){var i=e.getBoundingClientRect(),o=(t.clientX-i.left)/n,a=(t.clientY-i.top)/n;return(isNaN(o)||isNaN(a))&&console.error("No mouse or touch offset found"),{mouseX:o,mouseY:a}}function j(t,e,n,i,o){var a=this.stateProvider,r=a.scale,s=a.positionX,l=a.positionY,c=a.options.transformEnabled,u=n-r;return"number"!=typeof t||"number"!=typeof e?console.error("Mouse X and Y position were not provided!"):c?D(s-t*u,l-e*u,i,o,0,null):{newPositionX:s,newPositionY:l}}function N(t){var e=t.touches;return e&&1===e.length?{clientX:e[0].clientX,clientY:e[0].clientY}:e?null:{clientX:t.clientX,clientY:t.clientY}}function A(t){var e=this.stateProvider,n=e.scale,i=e.positionX,o=e.positionY,a=e.options,r=a.limitToBounds,s=a.minScale,l=e.pan,c=l.lockAxisX,u=l.lockAxisY,p=l.padding,d=l.paddingSize,h=e.wrapperComponent;if(this.startCoords){var m=this.startCoords,f=m.x,v=m.y,y=N(t);if(!y)return console.error("Cannot find mouse client positions");var g=y.clientX,w=y.clientY,b=c?i:g-f,P=u?o:w-v,S=p&&n>=s?d:0;if(b!==i||P!==o){var x=D(b,P,this.bounds,r,S,h);H.call(this,x.x,x.y)}}}function R(){var t=this.stateProvider,e=t.scale,n=t.options.minScale,i=t.pan,o=i.disabled,a=i.padding,r=i.panReturnAnimationTime,s=i.panReturnAnimationType;if(!(o||e<n||!a)){var l=B.call(this);I.call(this,{targetState:l,speed:r,type:s})}}function B(){var t=this.stateProvider,e=t.positionX,n=t.positionY,i=t.scale,o=t.options,a=o.disabled,r=o.limitToBounds,s=o.limitToWrapper,l=this.state.wrapperComponent;if(!a){var c=this.bounds,u=c.maxPositionX,p=c.minPositionX,d=c.maxPositionY,h=c.minPositionY,m=e>u||e<p,f=n>d||n<h,v=e>u?l.offsetWidth:this.stateProvider.minPositionX||0,y=n>d?l.offsetHeight:this.stateProvider.minPositionY||0,g=j.call(this,v,y,i,this.bounds,r||s),w=g.x,b=g.y;return{scale:i,positionX:m?w:e,positionY:f?b:n}}}function H(t,e){this.stateProvider.pan.padding&&(this.stateProvider.positionX=t,this.stateProvider.positionY=e,this.applyTransformation())}function Z(t,e,n,i,o){var a=this.stateProvider,r=a.scale,s=a.options,l=s.maxScale,c=s.minScale,u=a.scalePadding,p=u.size,d=u.disabled,h=a.wrapperComponent,m=null;if(o){m=r+(e-e*(1e-4*window.innerWidth))*t*(r/(t<0?30:20))}else{var f=2-window.innerWidth/h.offsetWidth;m=r+e*t*((r-r*Math.max(.2,Math.min(.99,f)))/20)}if(i)return m;var v=!n&&!d;return M(x(m,3),c,l,p,v)}function U(t,e){var n=this.stateProvider,i=function(t,e,n){var i=t.offsetWidth,o=t.offsetHeight,a=e.offsetWidth*n,r=e.offsetHeight*n;return{wrapperWidth:i,wrapperHeight:o,newContentWidth:a,newDiffWidth:i-a,newContentHeight:r,newDiffHeight:o-r}}(n.wrapperComponent,n.contentComponent,t),o=i.wrapperWidth,a=i.wrapperHeight,r=function(t,e,n,i,o,a,r){var s=t>e?n*(r?1:.5):0,l=i>o?a*(r?1:.5):0;return{minPositionX:t-e-s,maxPositionX:s,minPositionY:i-o-l,maxPositionY:l}}(o,i.newContentWidth,i.newDiffWidth,a,i.newContentHeight,i.newDiffHeight,e);return this.bounds=r,r}function V(t){var e=this.stateProvider,n=e.scale,i=e.contentComponent,o=e.options.limitToBounds,a=e.scalePadding,r=a.size,s=a.disabled,l=e.wheel,c=l.step,u=l.limitsOnWheel;t.preventDefault(),t.stopPropagation();var p=function(t,e){var n=t?t.deltaY<0?1:-1:0;return T(e,n)}(t,null),d=Z.call(this,p,c,!t.ctrlKey);if(n!==d){var h=U.call(this,d,!u),m=L(t,i,n),f=m.mouseX,v=m.mouseY,y=o&&(s||0===r||u),g=j.call(this,f,v,d,h,y),w=g.x,b=g.y;this.bounds=h,this.stateProvider.previousScale=n,this.stateProvider.scale=d,this.stateProvider.positionX=w,this.stateProvider.positionY=b,this.applyTransformation()}}function q(t,e,n,i,o){var a=this.stateProvider,r=a.contentComponent,s=a.options,l=s.disabled,c=s.minScale,u=s.maxScale,p=s.limitToBounds,d=s.limitToWrapper;if(!l&&!t){var h=M(x(e,2),c,u,null,null),m=U.call(this,h,d),f=n,v=i;if(o){var y=L(o,r,e);f=y.mouseX,v=y.mouseY}var g=j.call(this,f,v,h,m,p);return{scale:h,positionX:g.x,positionY:g.y}}}function F(){var t=this.stateProvider,e=t.scale,n=t.wrapperComponent,i=t.options,o=i.minScale,a=i.limitToBounds,r=t.scalePadding,s=r.disabled,l=r.animationTime,c=r.animationType,u=s||e>=o;if((e>=1||a)&&R.call(this),!u){var p=n.offsetWidth/2,d=n.offsetHeight/2,h=q.call(this,!1,o,p,d,null);I.call(this,{targetState:h,speed:l,type:c})}}function Q(t){t.preventDefault(),t.stopPropagation();var e=this.stateProvider,n=e.contentComponent,i=e.scale,o=e.doubleClick,a=o.disabled,r=o.mode,s=o.step,l=o.animationTime,c=o.animationType;if("reset"===r)return J.call(this,t,l);var u="zoomOut"===r?-1:1,p=Z.call(this,u,s,void 0,void 0,!0),d=L(t,n,i),h=d.mouseX,m=d.mouseY,f=q.call(this,a,p,h,m);if(f.scale!==i){var v=$(Z.call(this,u,s,!0,void 0,!0),p,l);I.call(this,{targetState:f,speed:v,type:c})}}function K(t,e){var n=this.stateProvider,i=n.scale,o=n.positionX,a=n.positionY,r=n.wrapperComponent,s=n.zoomIn,l=n.zoomOut,c=(r.offsetWidth/2-o)/i,u=(r.offsetHeight/2-a)/i,p=Z.call(this,t,e,void 0,void 0,!0),d=p>i,h=d?s.animationTime:l.animationTime,m=d?s.animationType:l.animationType,f=d?s.disabled:l.disabled,v=q.call(this,f,p,c,u);if(v.scale!==i){var y=$(Z.call(this,t,e,!0,void 0,!0),p,h);I.call(this,{targetState:v,speed:y,type:m})}}function J(t){var e=this.props.defaultValues,n=e.defaultScale,i=e.defaultPositionX,o=e.defaultPositionY,a=this.stateProvider,r=a.scale,s=a.positionX,l=a.positionY,c=a.reset,u=a.options,p=u.disabled,d=u.limitToBounds,h=u.centerContent,m=u.limitToWrapper;if(!(p||c.disabled||r===n&&s===i&&l===o)){var f="number"==typeof t?t:c.animationTime,v=T(n,S.scale),y=T(i,S.positionX),g=T(o,S.positionY);if(d&&!m||h){var w=U.call(this,v,m);y=w.minPositionX,g=w.minPositionY}var b={scale:v,positionX:y,positionY:g};I.call(this,{targetState:b,speed:f,type:c.animationType})}}function $(t,e,n){return n*(e/t)}function G(t,e){var n=Math.pow(10,e);return Math.round(t*n)/n}function tt(t){return t===1/0||t===-1/0}function et(t,e){var n=this.stateProvider,i=n.options,o=i.minScale,a=i.maxScale,r=n.scalePadding,s=r.size,l=r.disabled;if("number"!=typeof e||"number"!=typeof t)return console.error("Pinch touches distance was not provided");if(!(t<0)){var c=t/e*this.pinchStartScale;return M(x(c,2),o,a,s,!l)}}function nt(t){var e=this.stateProvider,n=e.scale,i=e.options,o=i.limitToBounds,a=i.limitToWrapper,r=e.scalePadding,s=r.disabled,l=r.size,c=e.wheel.limitsOnWheel,u=e.pinch,p=this.state.contentComponent;if(!u.disabled&&!this.stateProvider.options.disabled&&(t.cancelable&&(t.preventDefault(),t.stopPropagation()),null!==this.pinchStartDistance)){var d=function(t,e,n){var i=n.getBoundingClientRect(),o=t.touches,a=G(o[0].clientX-i.left,5),r=G(o[0].clientY-i.top,5);return{mouseX:(a+G(o[1].clientX-i.left,5))/2/e,mouseY:(r+G(o[1].clientY-i.top,5))/2/e}}(t,n,p),h=d.mouseX,m=d.mouseY;if(!tt(h)&&!tt(m)){var f=function(t){return E(t.touches[0],t.touches[1])}(t),v=et.call(this,f,this.pinchStartDistance);if(!tt(v)&&v!==n){var y=U.call(this,v,a),g=o&&(s||0===l||c),w=j.call(this,h,m,v,y,g),b=w.x,P=w.y;this.lastDistance=f,this.stateProvider.positionX=b,this.stateProvider.positionY=P,this.stateProvider.scale=v,this.stateProvider.previousScale=n,this.applyTransformation()}}}}function it(t,e){return this.stateProvider.pan.velocityEqualToMove?e-e/Math.max(1,t):e}function ot(){this.setState({startAnimation:!1})}function at(){this.setState({startAnimation:!0})}function rt(){var t=this,e=this.stateProvider,n=e.positionX,i=e.positionY,o=e.options.limitToBounds,a=e.pan,r=a.velocityBaseTime,s=a.lockAxisX,l=a.lockAxisY,c=a.velocityAnimationType,u=a.panReturnAnimationTime,p=a.panReturnAnimationType,d=a.padding,h=a.paddingSize,m=e.wrapperComponent;if(this.mounted){if(!this.velocity||!this.bounds)return _.call(this);var f=this.bounds,v=f.maxPositionX,y=f.minPositionX,g=f.maxPositionY,w=f.minPositionY,b=this.velocity,P=b.velocityX,S=b.velocityY,x=b.velocity,T=it.call(this,x,r);if(T){var C=P,E=S,k=T>u?T:u,O=d?h:0,Y=m?O*m.offsetWidth/100:0,X=m?O*m.offsetHeight/100:0,I=v+Y,M=y-Y,L=g+X,j=w-X,N=D(n,i,this.bounds,o,O,m),A=(new Date).getTime();z.call(this,c,k,(function(e){var a=(new Date).getTime()-A,r=(0,W[p])(a/u);(a>u||r>1||r===1/0||r===-1/0)&&(r=1);var c=lt(s,C,e,r,y,v,o,n,N.x,M,I),d=lt(l,E,e,r,w,g,o,i,N.y,j,L);n===c&&i===d||(t.stateProvider.positionX=c,t.stateProvider.positionY=d,t.applyTransformation())}))}else R.call(this)}}function st(t){var e=this,n=this.stateProvider,i=n.scale,o=n.options.disabled,a=n.pan,r=a.velocity,s=a.velocitySensitivity,l=a.velocityActiveScale,c=a.velocityMinSpeed,u=n.wrapperComponent;if(!(!r||l>=i||o)){ot.call(this);var p=Date.now();if(this.lastMousePosition){var d=N(t);if(!d)return console.error("No mouse or touch position detected");var h=d.clientX,m=d.clientY,f=h-this.lastMousePosition.clientX,v=m-this.lastMousePosition.clientY,y=p-this.velocityTime,g=2-u.offsetWidth/window.innerWidth,w=2-u.offsetHeight/window.innerHeight,b=f/y*s*i*(20*Math.max(c,Math.min(2,g))),P=v/y*s*i*(20*Math.max(c,Math.min(2,w))),S=f*f+v*v,x=Math.sqrt(S)/y*s;if(this.velocity&&x<this.velocity.velocity&&this.throttle)return;this.velocity={velocityX:b,velocityY:P,velocity:x},this.throttle&&clearTimeout(this.throttle),this.throttle=setTimeout((function(){e.mounted&&(e.throttle=!1)}),30)}var T=N(t);this.lastMousePosition=T,this.velocityTime=p}}function lt(t,e,n,i,o,a,r,s,l,c,u){if(r){var p;if(l>o&&s>a)return(p=l-(l-a)*i)>u?u:p<a?a:p;if(l<o&&s<o)return(p=l-(l-o)*i)<c?c:p>o?o:p}return t?l:C(s+e*n,o,a,r)}var ct=["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"],ut=function(t){return Object.keys(t).reduce((function(e,n){return ct.includes(n)&&(e[n]=t[n]),e}),{})},pt=t.createContext({}),dt=null,ht=null,mt=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.mounted=!0,t.state={wrapperComponent:void 0,contentComponent:void 0},t.stateProvider=P(P(P(P({},S),X(S,t.props.dynamicValues)),t.props.defaultValues),{previousScale:t.props.dynamicValues.scale||t.props.defaultValues.scale||S.scale}),t.windowToWrapperScaleX=0,t.windowToWrapperScaleY=0,t.startCoords=null,t.isDown=!1,t.pinchStartDistance=null,t.lastDistance=null,t.pinchStartScale=null,t.distance=null,t.bounds=null,t.velocityTime=null,t.lastMousePosition=null,t.velocity=null,t.offsetX=null,t.offsetY=null,t.throttle=!1,t.previousWheelEvent=null,t.lastScale=null,t.animate=null,t.animation=null,t.maxBounds=null,t.handleWheel=function(e){var n=t.stateProvider,i=n.scale,o=n.wheel,a=o.disabled,r=o.wheelEnabled,s=o.touchPadEnabled,l=t.props,c=l.onWheelStart,u=l.onWheel,p=l.onWheelStop,d=t.state,h=d.wrapperComponent,m=d.contentComponent;t.isDown||a||t.stateProvider.options.disabled||!h||!m||(r||e.ctrlKey)&&(!s&&e.ctrlKey||(dt||(t.lastScale=i,_.call(t),O(c,t.getCallbackProps())),V.call(t,e),O(u,t.getCallbackProps()),t.applyTransformation(null,null,null),t.previousWheelEvent=e,Y(t.previousWheelEvent,e,t.stateProvider)&&(clearTimeout(dt),dt=setTimeout((function(){t.mounted&&(O(p,t.getCallbackProps()),dt=null)}),180)),t.animate=!1,t.lastScale=t.stateProvider.scale,clearTimeout(ht),ht=setTimeout((function(){t.mounted&&F.call(t,e)}),100)))},t.checkPanningTarget=function(e){var n=t.stateProvider.pan.disableOnTarget;return n.map((function(t){return t.toUpperCase()})).includes(e.target.tagName)||n.find((function(t){return e.target.classList.value.includes(t)}))},t.checkIsPanningActive=function(e){var n=t.stateProvider.pan.disabled,i=t.state,o=i.wrapperComponent,a=i.contentComponent;return!t.isDown||n||t.stateProvider.options.disabled||e.touches&&(1!==e.touches.length||Math.abs(t.startCoords.x-e.touches[0].clientX)<1||Math.abs(t.startCoords.y-e.touches[0].clientY)<1)||!o||!a},t.handleSetUpPanning=function(e,n){var i=t.stateProvider,o=i.positionX,a=i.positionY;t.isDown=!0,t.startCoords={x:e-o,y:n-a},O(t.props.onPanningStart,t.getCallbackProps())},t.handleStartPanning=function(e){var n=t.stateProvider,i=n.wrapperComponent,o=n.scale,a=n.options,r=a.minScale,s=a.maxScale,l=a.limitToWrapper,c=n.pan.disabled,u=e.target,p=e.touches;c||t.stateProvider.options.disabled||i&&!i.contains(u)||t.checkPanningTarget(e)||o<r||o>s||(_.call(t),t.bounds=U.call(t,o,l),p&&1===p.length&&t.handleSetUpPanning(p[0].clientX,p[0].clientY),p||t.handleSetUpPanning(e.clientX,e.clientY))},t.handlePanning=function(e){t.isDown&&e.preventDefault(),t.checkIsPanningActive(e)||(e.stopPropagation(),st.call(t,e),A.call(t,e),O(t.props.onPanning,t.getCallbackProps()))},t.handleStopPanning=function(){if(t.isDown){t.isDown=!1,t.animate=!1,t.animation=!1,at.call(t),O(t.props.onPanningStop,t.getCallbackProps());var e=t.stateProvider,n=e.pan.velocity,i=e.scale;t.velocity&&n&&i>1?rt.call(t):R.call(t)}},t.handlePinchStart=function(e){var n=t.stateProvider.scale;e.preventDefault(),e.stopPropagation(),_.call(t);var i=E(e.touches[0],e.touches[1]);t.pinchStartDistance=i,t.lastDistance=i,t.pinchStartScale=n,t.isDown=!1,O(t.props.onPinchingStart,t.getCallbackProps())},t.handlePinch=function(e){t.isDown=!1,nt.call(t,e),O(t.props.onPinching,t.getCallbackProps())},t.handlePinchStop=function(){"number"==typeof t.pinchStartScale&&(t.isDown=!1,t.velocity=null,t.lastDistance=null,t.pinchStartScale=null,t.pinchStartDistance=null,F.call(t),O(t.props.onPinchingStop,t.getCallbackProps()))},t.handleTouchStart=function(e){var n=t.stateProvider,i=n.wrapperComponent,o=n.contentComponent,a=n.scale,r=n.options,s=r.disabled,l=r.minScale,c=e.touches;if(!s&&i&&o&&!(a<l))return _.call(t),c&&1===c.length?t.handleStartPanning(e):c&&2===c.length?t.handlePinchStart(e):void 0},t.handleTouch=function(e){var n=t.stateProvider,i=n.pan,o=n.pinch;if(!n.options.disabled)return i.disabled||1!==e.touches.length?o.disabled||2!==e.touches.length?void 0:t.handlePinch(e):t.handlePanning(e)},t.handleTouchStop=function(){t.handleStopPanning(),t.handlePinchStop()},t.zoomIn=function(e){var n=t.stateProvider,i=n.zoomIn,o=i.disabled,a=i.step,r=n.options,s=t.state,l=s.wrapperComponent,c=s.contentComponent;if(!e)throw Error("Zoom in function requires event prop");!o&&!r.disabled&&l&&c&&K.call(t,1,a)},t.zoomOut=function(e){var n=t.stateProvider,i=n.zoomOut,o=i.disabled,a=i.step,r=n.options,s=t.state,l=s.wrapperComponent,c=s.contentComponent;if(!e)throw Error("Zoom out function requires event prop");!o&&!r.disabled&&l&&c&&K.call(t,-1,a)},t.handleDbClick=function(e){var n=t.stateProvider,i=n.options,o=n.doubleClick,a=o.disabled,r=o.step,s=t.state,l=s.wrapperComponent,c=s.contentComponent;if(!e)throw Error("Double click function requires event prop");!a&&!i.disabled&&l&&c&&Q.call(t,e,1,r)},t.setScale=function(e,n,i){void 0===n&&(n=200),void 0===i&&(i="easeOut");var o=t.stateProvider,a=o.positionX,r=o.positionY,s=o.scale,l=o.options.disabled,c=t.state,u=c.wrapperComponent,p=c.contentComponent;if(!l&&u&&p){var d={positionX:a,positionY:r,scale:isNaN(e)?s:e};I.call(t,{targetState:d,speed:n,type:i})}},t.setPositionX=function(e,n,i){void 0===n&&(n=200),void 0===i&&(i="easeOut");var o=t.stateProvider,a=o.positionX,r=o.positionY,s=o.scale,l=o.options,c=l.disabled,u=l.transformEnabled,p=t.state,d=p.wrapperComponent,h=p.contentComponent;if(!c&&u&&d&&h){var m={positionX:isNaN(e)?a:e,positionY:r,scale:s};I.call(t,{targetState:m,speed:n,type:i})}},t.setPositionY=function(e,n,i){void 0===n&&(n=200),void 0===i&&(i="easeOut");var o=t.stateProvider,a=o.positionX,r=o.scale,s=o.positionY,l=o.options,c=l.disabled,u=l.transformEnabled,p=t.state,d=p.wrapperComponent,h=p.contentComponent;if(!c&&u&&d&&h){var m={positionX:a,positionY:isNaN(e)?s:e,scale:r};I.call(t,{targetState:m,speed:n,type:i})}},t.setTransform=function(e,n,i,o,a){void 0===o&&(o=200),void 0===a&&(a="easeOut");var r=t.stateProvider,s=r.positionX,l=r.positionY,c=r.scale,u=r.options,p=u.disabled,d=u.transformEnabled,h=t.state,m=h.wrapperComponent,f=h.contentComponent;if(!p&&d&&m&&f){var v={positionX:isNaN(e)?s:e,positionY:isNaN(n)?l:n,scale:isNaN(i)?c:i};I.call(t,{targetState:v,speed:o,type:a})}},t.resetTransform=function(){var e=t.stateProvider.options,n=e.disabled,i=e.transformEnabled;!n&&i&&J.call(t)},t.setDefaultState=function(){t.animation=null,t.stateProvider=P(P(P({},t.stateProvider),{scale:S.scale,positionX:S.positionX,positionY:S.positionY}),t.props.defaultValues),t.forceUpdate()},t.setWrapperComponent=function(e){t.setState({wrapperComponent:e})},t.setContentComponent=function(e){t.setState({contentComponent:e},(function(){var n=t.stateProvider,i=n.wrapperComponent,o=n.options,a=o.centerContent,r=o.limitToBounds,s=o.limitToWrapper,l=n.scale,c=t.props.defaultValues,u=c.positionX,p=c.positionY;if(r&&!s||a&&!u&&!p){var d="translate(25%, 25%) scale("+l+")";e.style.transform=d,e.style.WebkitTransform=d,t.forceUpdate();var h=(new Date).getTime(),m=setInterval((function(){if(i.offsetWidth){var e=U.call(t,l,!1);t.stateProvider.positionX=e.minPositionX,t.stateProvider.positionY=e.minPositionY,t.applyTransformation(null,null,null),clearInterval(m),m=null}else(new Date).getTime()-h>2e3&&(clearInterval(m),m=null)}),20)}else t.applyTransformation(null,null,null)}))},t.applyTransformation=function(e,n,i){if(t.mounted){var o=t.state.contentComponent,a=t.props.onZoomChange,r=t.stateProvider,s=r.previousScale,l=r.scale,c=r.positionX,u=r.positionY;if(!o)return console.error("There is no content component");var p="translate("+(n||c)+"px, "+(i||u)+"px) scale("+(e||l)+")";o.style.transform=p,o.style.WebkitTransform=p,t.forceUpdate(),a&&s!==l&&O(a,t.getCallbackProps())}},t.getCallbackProps=function(){return ut(t.stateProvider)},t}return b(n,e),n.prototype.componentDidMount=function(){window.addEventListener("mousedown",this.handleStartPanning,!1),window.addEventListener("mousemove",this.handlePanning,!1),window.addEventListener("mouseup",this.handleStopPanning,!1)},n.prototype.componentWillUnmount=function(){window.removeEventListener("mousedown",this.handleStartPanning,!1),window.removeEventListener("mousemove",this.handlePanning,!1),window.removeEventListener("mouseup",this.handleStopPanning,!1),_.call(this)},n.prototype.componentDidUpdate=function(t,e){var n,i=this.state,o=i.wrapperComponent,a=i.contentComponent,r=this.props.dynamicValues;if(!e.contentComponent&&a&&(this.stateProvider.contentComponent=a),!e.wrapperComponent&&o&&void 0!==o){this.stateProvider.wrapperComponent=o,this.windowToWrapperScaleX=(n=o)?window.innerWidth/n.offsetWidth:0,this.windowToWrapperScaleY=function(t){return t?window.innerHeight/t.offsetHeight:0}(o);o.addEventListener("wheel",this.handleWheel,!1),o.addEventListener("dblclick",this.handleDbClick,!1),o.addEventListener("touchstart",this.handleTouchStart,!1),o.addEventListener("touchmove",this.handleTouch,!1),o.addEventListener("touchend",this.handleTouchStop,!1)}(o&&a||t.dynamicValues!==r)&&(this.maxBounds=U.call(this,this.stateProvider.scale,this.stateProvider.options.limitToWrapper)),t.dynamicValues&&t.dynamicValues!==r&&(this.animation=null,this.stateProvider=P(P({},this.stateProvider),X(this.stateProvider,r)),this.applyTransformation(null,null,null))},n.prototype.render=function(){var e=this.state,n=e.wrapperComponent,i=e.contentComponent,o={loaded:Boolean(n&&i),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}},a=this.props.children,r="function"==typeof a?a(P(P({},o.state),o.dispatch)):a;return t.createElement(pt.Provider,{value:o},r)},n}(e),ft=function(e){var n=e.children,i=e.defaultPositionX,o=e.defaultPositionY,a=e.defaultScale,r=e.onWheelStart,s=e.onWheel,l=e.onWheelStop,c=e.onPanningStart,u=e.onPanning,p=e.onPanningStop,d=e.onPinchingStart,h=e.onPinching,m=e.onPinchingStop,f=e.onZoomChange,v=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(t);o<i.length;o++)e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(t,i[o])&&(n[i[o]]=t[i[o]])}return n}(e,["children","defaultPositionX","defaultPositionY","defaultScale","onWheelStart","onWheel","onWheelStop","onPanningStart","onPanning","onPanningStop","onPinchingStart","onPinching","onPinchingStop","onZoomChange"]),y=P({},v);return y.options&&y.options.limitToWrapper&&(y.options.limitToBounds=!0),t.createElement(mt,{defaultValues:k({positionX:i,positionY:o,scale:a}),dynamicValues:k(ut(y)),onWheelStart:r,onWheel:s,onWheelStop:l,onPanningStart:c,onPanning:u,onPanningStop:p,onPinchingStart:d,onPinching:h,onPinchingStop:m,onZoomChange:f},n)};var vt="TransformComponent-module_container__3NwNd",yt="TransformComponent-module_content__TZU5O";!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}(".TransformComponent-module_container__3NwNd {\n position: relative;\n width: fit-content;\n height: fit-content;\n overflow: hidden;\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none;\n margin: 0;\n padding: 0;\n}\n.TransformComponent-module_content__TZU5O {\n display: flex;\n flex-wrap: wrap;\n width: fit-content;\n height: fit-content;\n margin: 0;\n padding: 0;\n transform-origin: 0% 0%;\n}\n.TransformComponent-module_content__TZU5O img {\n pointer-events: none;\n}\n");var gt=function(e){function n(){var n=null!==e&&e.apply(this,arguments)||this;return n.wrapperRef=t.createRef(),n.contentRef=t.createRef(),n}return b(n,e),n.prototype.componentDidMount=function(){var t=this.context.nodes;t.setWrapperComponent(this.wrapperRef.current),t.setContentComponent(this.contentRef.current)},n.prototype.render=function(){var e=this.props.children,n=this.context.state,i=n.positionX,o=n.positionY,a=n.scale,r=n.options,s=r.wrapperClass,l=r.contentClass,c={WebkitTransform:"translate("+i+"px, "+o+"px) scale("+a+")",transform:"translate("+i+"px, "+o+"px) scale("+a+")"};return t.createElement("div",{ref:this.wrapperRef,className:"react-transform-component "+vt+" "+s},t.createElement("div",{ref:this.contentRef,className:"react-transform-element "+yt+" "+l,style:c},e))},n}(t.Component);gt.contextType=pt;var wt=function(e){var n,i=e.handleZoomChange,o=e.isDesktop,a=e.isZoomIn,r=e.children,c=e.handleZoomAction,u=e.showZoomOption,p=e.styles,d=e.zoomButtonStyle;return o?t.createElement(ft,{pan:{disabled:!a},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 n=e.zoomIn,i=e.zoomOut,o=e.resetTransform,a=e.scale;return t.createElement(t.Fragment,null,t.createElement(gt,null,r),u&&t.createElement("div",{style:p.zoomOption},t.createElement("button",{style:s(s({},p.zoomButton),d),onClick:function(t){n(t),c("zoom-in",a)}},"+"),t.createElement("button",{style:s(s({},p.zoomButton),d),onClick:function(t){i(t),setTimeout((function(){a<1.5&&i(t)})),c("zoom-out",a)}},"−"),t.createElement("button",{style:s(s({},p.zoomButton),d),onClick:function(t){o(t),setTimeout((function(){o(t)})),c("zoom-close",a)}},"×")))})):t.createElement(ft,(l(n={doubleClick:{disabled:!1},pan:{disabled:!a},zoomIn:{step:50},wheel:{step:50}},"doubleClick",{mode:"reset"}),l(n,"defaultScale",1),l(n,"defaultPositionX",0),l(n,"defaultPositionY",0),l(n,"onZoomChange",(function(t){return i(t)})),n),t.createElement(gt,null,r))},bt={threeSixtyWrap:function(t){return{display:t?"block":"none",width:"100%",height:"100%",position:"relative"}},transformComponent:function(t,e,n,i){return s({width:"fit-content",height:n&&!i?"fit-content":"100%",visibility:t?"visible":"hidden",position:"relative",transform:"translateX(-50%)",maxWidth:"100%",maxHeight:"100%",left:"50%",overflow:"hidden",cursor:"url(".concat(e?"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&&!i?{margin:"auto"}:{}))},viewer:function(t,e){return{width:"100%",height:"100%",display:"flex",cursor:"url(".concat(e?"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:t?"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(t,e,n,i){return{display:"block",position:"relative",width:"100%",height:"100%",left:"0px",top:"0px",backgroundPosition:"center",backgroundSize:"contain",backgroundRepeat:"no-repeat",backgroundImage:"url(".concat(e[n][i],")"),cursor:"not-allowed"}},loading:{position:"absolute",width:"100px",height:"100px",top:"calc(50% - 50px)",left:"calc(50% - 50px)"}},Pt=n((function(e){var n=e.isMobile,r=void 0!==n&&n,l=e.imageKey,p=void 0===l?"image_url":l,d=e.zoomImageKey,h=void 0===d?"zoom_image_url":d,m=e.type,y=void 0===m?"exterior":m,w=e.autoPlay,b=e.startIndex,P=void 0===b?0:b,S=e.updateIndex,x=e.handleImageChange,T=e.handleZoomInOut,C=e.showZoomOption,E=void 0!==C&&C,k=e.containerName,O=void 0===k?"reactThreesixtyContainer":k,Y=e.hotspotClickHandler,X=e.renderHotspotUI,W=e.renderExtraElement,_=e.noOuterMargin,z=e.imageArr,I=e.threeSixtyWrapStyle,M=e.zoomButtonStyle,D=i(null),L=i(null),j=c(o(!1),2),N=j[0],A=j[1],R=c(o([]),2),B=R[0],H=R[1],Z=c(o(!1),2),U=Z[0],V=Z[1],q=c(o(!1),2),F=q[0],Q=q[1],K=c(o(e.hotspots),2),J=K[0],$=K[1],G=function(t,e){var n=0,i=t.length;t.forEach((function(t){!function(t,e){var n=new Image;n.onload=e,n.src=t}(t,(function(){++n===i&&e()}))}))},tt=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=z[n?n.detail.image_index:P].angle;(null===(t=e.hotspots)||void 0===t?void 0:t.length)&&$((function(t){return v(t,i)})),n&&n.detail&&x&&x({index:n.detail.image_index,item:z[n.detail.image_index]})},et=function(){A(!0)},nt=function(){A(!1)},it=function(t){var e=z[t][h]?z[t][h]:z[t][p];z[t][h]&&G([e],(function(){var n=z.map((function(n,i){return i===t?e:n[p]}));L.current._updateImage(n)}))},ot=function(t){t.scale<=1?F&&(Q(!1),T&&T(!1),L.current._allowScroll()):F||(Q(!0),T&&T(!0),L.current._stopScroll(),it(L.current.index))},at=function(t,e){"zoom-in"===t?F||(it(L.current.index),T&&T(!0),Q(!0),L.current._stopScroll()):"zoom-out"===t?e<1.5&&F&&(T&&T(!1),Q(!1),L.current._allowScroll()):F&&(T&&T(!1),Q(!1),L.current._allowScroll())};a((function(){L.current&&S>=0&&S<z.length&&L.current.goto(S)}),[S]),a((function(){return document.addEventListener("".concat(O,"_image_changed"),tt),D.current&&(D.current.addEventListener("mousedown",et),D.current.addEventListener("mouseup",nt)),function(){document.removeEventListener("".concat(O,"_image_changed"),tt),D.current&&(D.current.removeEventListener("mousedown",et),D.current.removeEventListener("mouseup",nt))}}),[y]),a((function(){var t;if(L.current){var n=z.map((function(t){return t[p]}));L.current._updateImage(n)}(null===(t=e.hotspots)||void 0===t?void 0:t.length)&&tt()}),[JSON.stringify(z)]),a((function(){if(D&&D.current)return-1===B.indexOf(y)&&V(!1),L.current=new f(D.current,s({image:z.map((function(t){return t[p]}))},e)),G(z.map((function(t){return t[p]})),(function(){w&&L.current.play(),H([].concat(u(B),[y])),V(!0),L.current._allowScroll()})),function(){D&&L.current.destroy()}}),[y]);return t.createElement(t.Fragment,null,r?t.createElement("div",{style:s(s({},bt.threeSixtyWrap(U)),I)},t.createElement(wt,{handleZoomChange:ot,isZoomIn:F,showZoomOption:E,styles:bt,zoomButtonStyle:M},t.createElement("div",{style:bt.transformComponent(U,N,r,_)},t.createElement("div",{ref:D,style:bt.viewer(U,N)},W&&t.createElement("div",{className:"extra_threesixty"},W())),(null==J?void 0:J.length)>0&&t.createElement(g,{hotspots:J,renderUI:X,clickHandler:Y})))):t.createElement("div",{style:s(s({},bt.threeSixtyWrap(U)),I)},t.createElement(wt,{isDesktop:!0,handleZoomAction:at,isZoomIn:F,showZoomOption:E,styles:bt,zoomButtonStyle:M},t.createElement("div",{style:bt.transformComponent(U,N)},t.createElement("div",{ref:D,style:bt.viewer(U,N)},W&&t.createElement("div",{className:"extra_threesixty"},W())),(null==J?void 0:J.length)>0&&t.createElement(g,{hotspots:J,clickHandler:Y,renderUI:X})))),!U&&t.createElement("div",{style:bt.loadingImgWrap(r,z,P,p)},t.createElement("div",{style:bt.loading},t.createElement("img",{src:"https://spinny-images.s3.ap-south-1.amazonaws.com/static-asset/icons/loader.gif",style:{width:"100%",height:"100%"}}))))}));export{Pt as ThreeSixtyViewer,wt as ZoomPan};