diff --git a/404.html b/404.html index 65bc6c79..2ff07ac4 100644 --- a/404.html +++ b/404.html @@ -5,13 +5,13 @@ Page Not Found | Axes - - + +
-
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+ + \ No newline at end of file diff --git a/Home.html b/Home.html index bd07f991..73bb9208 100644 --- a/Home.html +++ b/Home.html @@ -5,13 +5,13 @@ Axes - - + +
-
Skip to main content
Axes
npm (scoped)LicenseTypescriptGitHub Repo stars
npm install @egjs/axes
You can easily create a UI that responds to user actions.
🚀 Get Started✨ Demos

Framework Ready

Use Axes in your favorite framework!

Demos
- - +
Skip to main content
Axes
npm (scoped)LicenseTypescriptGitHub Repo stars
npm install @egjs/axes
You can easily create a UI that responds to user actions.
🚀 Get Started✨ Demos

Framework Ready

Use Axes in your favorite framework!

Demos
+ + \ No newline at end of file diff --git a/Options.html b/Options.html index 3ca7d389..8e5da8c0 100644 --- a/Options.html +++ b/Options.html @@ -5,8 +5,8 @@ Options | Axes - - + +
@@ -15,8 +15,8 @@ If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.

x: {
  circular: false,
},
y: {
  circular: false,
},
x: 0 y: 0
x: {
  circular: true,
},
y: {
  circular: true,
},
x: 0 y: 0

startPos​

The coordinates to be moved when creating an instance.

x: {
  startPos: 0,
},
y: {
  startPos: 60,
},
x: 0.1 y: 60
x: {
  startPos: 100,
},
y: {
  startPos: 60,
},
x: 100 y: 60

Axes Options​

easing​

The easing function to apply to an animation.

easing: x => 1 - Math.pow(1 - x, 3)
x: 0 y: 0
easing: x => x
x: 0 y: 0

maximumDuration​

Maximum duration of the animation. (milisecond)

maximumDuration: 5000
x: 0 y: 0
maximumDuration: 500
x: 0 y: 0

minimumDuration​

Minimum duration of the animation. (milisecond)

minimumDuration: 0
x: 0 y: 0
minimumDuration: 2000
x: 0 y: 0

deceleration​

Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time.

deceleration: 0.0006
x: 0 y: 0
deceleration: 0.0015
x: 0 y: 0

interruptable​

Indicates whether an animation is interruptible.

interruptable: true
x: 0 y: 0
interruptable: false
x: 0 y: 0

round​

Rounding unit. For example, 0.1 rounds to 0.1 decimal point(6.1234 => 6.1), 5 rounds to 5 (93 => 95)

round: 1
x: 0 y: 0
round: 20
x: 0 y: 0

nested​

Whether the event propagates to other instances when the coordinates reach the end of the movable area.

nested: false
x: 0 y: 0
nested: true
x: 0 y: 0

PanInput Options​

scale​

Coordinate scale that a user can move.

scale: [1, 1]
x: 0 y: 0
scale: [3, 3]
x: 0 y: 0

inputType​

Types of input devices.

inputType: ["mouse"]
x: 0 y: 0
inputType: ["touch"]
x: 0 y: 0

inputKey​

List of key combinations to allow input

inputKey: ["any"]
x: 0 y: 0
inputKey: ["ctrl"]
x: 0 y: 0

inputButton​

List of buttons to allow input.

inputButton: ["left", "right"]
x: 0 y: 0
inputButton: ["right"]
x: 0 y: 0

thresholdAngle​

The threshold value that determines whether user action is horizontal or vertical (0~90).

info

Hint: These examples only have a x-axis. Try using the input direction similar to y-axis.

thresholdAngle: 15
x: 0 y: 0
thresholdAngle: 75
x: 0 y: 0

threshold​

Minimal pan distance required before recognizing.

threshold: 0
x: 0 y: 0
threshold: 30
x: 0 y: 0

preventClickOnDrag​

Whether to cancel the click event when the user finishes dragging more than 1 pixel.

preventClickOnDrag: false
x: 0 y: 0
preventClickOnDrag: true
x: 0 y: 0

preventDefaultOnDrag​

Whether to use the preventDefault when the user starts dragging.

info

Hint: These examples only have a x-axis. Try using the input direction similar to y-axis.

preventDefaultOnDrag: false
x: 0 y: 0
Clickable Link
preventDefaultOnDrag: true
x: 0 y: 0
Clickable Link

iOSEdgeSwipeThreshold​

Area (px) that can go to the next page when swiping the right edge in iOS safari.

iOSEdgeSwipeThreshold: 30
x: 0 y: 0
iOSEdgeSwipeThreshold: 120
x: 0 y: 0

releaseOnScroll​

Whether to release input when a native event with cancelable: false occurs while user input.

releaseOnScroll: false
x: 0 y: 0
releaseOnScroll: true
x: 0 y: 0

touchAction​

Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis.

info

Hint: These examples only have a x-axis. Try using the input direction similar to y-axis in mobile device.

touchAction: "none"
x: 0 y: 0
touchAction: "pan-y"
x: 0 y: 0

WheelInput Options​

inputKey​

List of key combinations to allow input

inputKey: ["any"]
x: 0 y: 0
inputKey: ["ctrl"]
x: 0 y: 0

scale​

Coordinate scale that a user can move.

scale: 5
x: 0 y: 0
scale: 20
x: 0 y: 0

releaseDelay​

Millisecond that trigger release event after last input.

releaseDelay: 300
x: 0 y: 0
releaseDelay: 2000
x: 0 y: 0

useAnimation​

Whether to process coordinate changes through the mouse wheel as a continuous animation.

useAnimation: false
x: 0 y: 0
useAnimation: true
x: 0 y: 0

MoveKeyInput Options​

scale​

Coordinate scale that a user can move.

scale: [5, -5]
x: 0 y: 0
scale: [20, -20]
x: 0 y: 0

PinchInput Options​

info

Hint: You can compare the action of PinchInput on mobile device.

scale​

Coordinate scale that a user can move.

scale: 4
x: 0 y: 0
scale: 10
x: 0 y: 0

threshold​

Minimal scale before recognizing.

threshold: 0
x: 0 y: 0
threshold: 5
x: 0 y: 0

inputType​

Types of input devices

inputType: ["touch"]
x: 0 y: 0
inputType: ["touch", "pointer"]
x: 0 y: 0

touchAction​

Value that overrides the element's "touch-action" css property. -It is set to "none" to prevent scrolling during touch.

touchAction: "none"
x: 0 y: 0
touchAction: "pan-y"
x: 0 y: 0
- - +It is set to "none" to prevent scrolling during touch.

touchAction: "none"
x: 0 y: 0
touchAction: "pan-y"
x: 0 y: 0
+ + \ No newline at end of file diff --git a/assets/js/04301205.6729f7b0.js b/assets/js/04301205.6729f7b0.js new file mode 100644 index 00000000..1b0c89df --- /dev/null +++ b/assets/js/04301205.6729f7b0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[6118],{3566:(t,e,n)=>{n.d(e,{q:()=>s});var i=n(5362),r=n(2784);function s(t,e){var n=(0,r.useRef)(!0),s=(0,r.useMemo)((function(){return(0,i.tG)(t,e)}),[]),o=s.state(),a=(0,i.XP)(o),u=(0,r.useState)({})[0],h=function(t){var e=(0,r.useState)((function(){return o[t]}));u[t]={getter:!1,set:e[1],value:e[0]}};for(var c in o)h(c);n.current=!0;var l=(0,r.useMemo)((function(){return s.methods()}),[]);(0,r.useEffect)((function(){n.current=!1})),(0,r.useEffect)((function(){s.mounted();var t=s.instance();return a.forEach((function(e){t.subscribe(e,(function(t){u[e].value=t,u[e].getter&&u[e].set(t)}))})),s.init(),function(){s.destroy()}}),[]);var v=a.reduce((function(t,e){return l[e]||Object.defineProperty(t,e,{enumerable:!0,get:function(){return n.current&&(u[e].getter=!0),u[e].value}}),t}),{});return s.events().forEach((function(t){v[(0,i._A)("on ".concat(t))]=function(e,n){var i=(0,r.useMemo)((function(){return s.on(t,e),e}),n);(0,r.useEffect)((function(){return s.off(t,i),s.on(t,i),function(){s.off(t,i)}}),[i])}})),(0,i.XP)(l).forEach((function(t){v[t]=l[t]})),v}},4458:(t,e,n)=>{n.d(e,{HA:()=>dt,Ju:()=>ct,ZP:()=>gt,cD:()=>_t,f3:()=>ft,nj:()=>vt,zV:()=>lt});var i=n(5161),r=n(1588),s=n(5362),o=function(t,e){return o=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])},o(t,e)};function a(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var u,h=function(){return h=Object.assign||function(t){for(var e,n=1,i=arguments.length;n=0;a--)(r=t[a])&&(o=(s<3?r(o):s>3?r(e,n,o):r(e,n))||o);return s>3&&o&&Object.defineProperty(e,n,o),o}u="undefined"==typeof window?{navigator:{userAgent:""}}:window;var l=24,v="left",d="right",f="middle",_={1:v,2:f,3:d},g="any",p="ontouchstart"in u&&"safari"===(0,i.ZP)().browser.name,m=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=t,n=x(i.childNodes)}else n=x(document.querySelectorAll(t));e||(n=n.length>=1?n[0]:void 0)}else t===u?n=t:"value"in t||"current"in t?n=t.value||t.current:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in u&&t instanceof jQuery||t.constructor.prototype.jquery?n=e?t.toArray():t.get(0):Array.isArray(t)&&(n=t.map((function(t){return y(t)})),e||(n=n.length>=1?n[0]:void 0)):n=t;return n},b=u.requestAnimationFrame||u.webkitRequestAnimationFrame,M=u.cancelAnimationFrame||u.webkitCancelAnimationFrame;if(b&&!M){var P={},w=b;b=function(t){var e=w((function(n){P[e]&&t(n)}));return P[e]=!0,e},M=function(t){delete P[t]}}else b&&M||(b=function(t){return u.setTimeout((function(){t(u.performance&&u.performance.now&&u.performance.now()||(new Date).getTime())}),16)},M=u.clearTimeout);var O=function(t,e){var n={};for(var i in t)i&&(n[i]=e(t[i],i));return n},T=function(t,e){var n={};for(var i in t)i&&e(t[i],i)&&(n[i]=t[i]);return n},D=function(t,e){for(var n in t)if(n&&!e(t[n],n))return!1;return!0},A=function(t,e){return D(t,(function(t,n){return t===e[n]}))},C={},I=function(t,e){return C[e]||(C[e]=k(e)),C[e](t)},R=function(t,e){return t&&e?O(t,(function(t,n){return I(t,"number"==typeof e?e:e[n])})):t},S=function(t){if(!isFinite(t))return 0;var e="".concat(t);if(e.indexOf("e")>=0){for(var n=0,i=1;Math.round(t*i)/i!==t;)i*=10,n++;return n}return e.indexOf(".")>=0?e.length-e.indexOf(".")-1:0},k=function(t){var e=t<1?Math.pow(10,S(t)):1;return function(n){return 0===t?0:Math.round(Math.round(n/t)*t*e)/e}},L=function(t,e){return 180*Math.atan2(e,t)/Math.PI},B=function(t){var e=!0;return Object.keys(E).forEach((function(n){t&&t[n]===E[n]||(e=!1)})),e},X=function(t,e){return t&&e?30:t?6:e?l:1},Y=function(t,e,n){return n?!!(30===e||e&t&&n&t):!!(e&t)},j=function(t,e,n){var i,r=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),s={};if(t&&t.style){var o=e.touchAction?e.touchAction:r[n],a=h(h({},E),{"touch-action":"none"===t.style["touch-action"]?"none":o});Object.keys(a).forEach((function(e){s[e]=t.style[e]})),Object.keys(a).forEach((function(e){t.style[e]=a[e]}))}return s},K=function(t,e){t&&t.style&&e&&Object.keys(e).forEach((function(n){t.style[n]=e[n]}))},F=function(){function t(t){this._axes=t,this.holdingCount=0}var e=t.prototype;return e.hold=function(t,e){var n=this._getRoundPos(t).roundPos;this._axes.trigger(new r.L("hold",{pos:n,input:e.input||null,inputEvent:e.event||null,isTrusted:!0}))},e.triggerRelease=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration),this._axes.trigger(new r.L("release",h(h({},t),{bounceRatio:this._getBounceRatio(n)})))},e.triggerChange=function(t,e,n,i){var o=this;void 0===i&&(i=!1);var a=this.animationManager,u=a.axisManager,h=a.getEventInfo(),c=this._getRoundPos(t,e),l=c.roundPos,v=c.roundDepa,d=u.moveTo(l,v),f=(null==n?void 0:n.event)||(null==h?void 0:h.event)||null,_={pos:d.pos,delta:d.delta,bounceRatio:this._getBounceRatio(d.pos),holding:i,inputEvent:f,isTrusted:!!f,input:(null==n?void 0:n.input)||(null==h?void 0:h.input)||null,set:f?this._createUserControll(d.pos):function(){}},g=new r.L("change",_);return this._axes.trigger(g),Object.keys(d.pos).forEach((function(t){var e=d.pos[t];(0,s.CV)(o._axes,t,e).current=e})),f&&u.set(_.set().destPos),!g.isCanceled()},e.triggerAnimationStart=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration);var s=new r.L("animationStart",t);return this._axes.trigger(s),!s.isCanceled()},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("animationEnd",{isTrusted:t}))},e.triggerFinish=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("finish",{isTrusted:t}))},e.setAnimationManager=function(t){this.animationManager=t},e.destroy=function(){this._axes.off()},e._createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:h({},t),duration:e};return function(t,e){return t&&(n.destPos=h({},t)),void 0!==e&&(n.duration=e),n}},e._getRoundPos=function(t,e){var n=this._axes.options.round;return{roundPos:R(t,n),roundDepa:R(e,n)}},e._getBounceRatio=function(t){return this._axes.axisManager.map(t,(function(t,e){return te.range[1]&&0!==e.bounce[1]?(t-e.range[1])/e.bounce[1]:0}))},c([s.cn],t.prototype,"holdingCount",void 0),t}(),N=function(){function t(t){this._options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this._options.interruptable||this._prevented},e.isInterrupted=function(){return!this._options.interruptable&&this._prevented},e.setInterrupt=function(t){this._options.interruptable||(this._prevented=t)},t}(),V=function(t,e,n,i){var r=t,s=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return r=Math.max(s[0],r),r=Math.min(s[1],r)},W=function(t,e){return te[1]},U=function(t,e,n){return n[1]&&t>e[1]||n[0]&&ts&&(i=(i-s)%o+r),n[0]&&t-1||e.indexOf("none")>-1&&!t.shiftKey&&!t.ctrlKey&&!t.altKey&&!t.metaKey||e.indexOf("shift")>-1&&t.shiftKey||e.indexOf("ctrl")>-1&&t.ctrlKey||e.indexOf("alt")>-1&&t.altKey||e.indexOf("meta")>-1&&t.metaKey)},G=function(){function t(){var t=this;this._stopContextMenu=function(e){e.preventDefault(),u.removeEventListener("contextmenu",t._stopContextMenu)}}var e=t.prototype;return e.extendEvent=function(t){var e,n=this.prevEvent,i=this._getCenter(t),r=n?this._getMovement(t):{x:0,y:0},s=n?this._getScale(t):1,o=n?L(i.x-n.center.x,i.y-n.center.y):0,a=n?n.deltaX+r.x:r.x,u=n?n.deltaY+r.y:r.y,h=r.x,c=r.y,l=this._latestInterval,v=Date.now(),d=l?v-l.timestamp:0,f=n?n.velocityX:0,_=n?n.velocityY:0;return(!l||d>=16)&&(l&&(f=(e=[(a-l.deltaX)/d,(u-l.deltaY)/d])[0],_=e[1]),this._latestInterval={timestamp:v,deltaX:a,deltaY:u}),{srcEvent:t,scale:s,angle:o,center:i,deltaX:a,deltaY:u,offsetX:h,offsetY:c,velocityX:f,velocityY:_,preventSystemEvent:!0}},e._getDistance=function(t,e){var n=e.clientX-t.clientX,i=e.clientY-t.clientY;return Math.sqrt(n*n+i*i)},e._getButton=function(t){var e={1:v,2:d,4:f},n=this._isTouchEvent(t)?v:e[t.buttons];return n||null},e._isTouchEvent=function(t){return t.type&&t.type.indexOf("touch")>-1},e._isValidButton=function(t,e){return e.indexOf(t)>-1},e._isValidEvent=function(t,e,n){return(!e||Z(t,e))&&(!n||this._isValidButton(this._getButton(t),n))},e._preventMouseButton=function(t,e){e===d?u.addEventListener("contextmenu",this._stopContextMenu):e===f&&t.preventDefault()},t}(),J=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown"],e.move=["mousemove"],e.end=["mouseup"],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(t,e){return e&&this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},e}(G),tt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["touchstart"],e.move=["touchmove"],e.end=["touchend","touchcancel"],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e){return this._baseTouches=t.touches,this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventMove=function(t,e){return this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventEnd=function(t){this._baseTouches=t.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t){return t.touches.length},n._getScale=function(t){return 2!==t.touches.length||this._baseTouches.length<2?null:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(t){return{x:t.touches[0].clientX,y:t.touches[0].clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.touches[0].identifier!==e.touches[0].identifier?{x:0,y:0}:{x:t.touches[0].clientX-e.touches[0].clientX,y:t.touches[0].clientY-e.touches[0].clientY}},e}(G),et=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=$?["pointerdown"]:["MSPointerDown"],e.move=$?["pointermove"]:["MSPointerMove"],e.end=$?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],e._firstInputs=[],e._recentInputs=[],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?(this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventEnd=function(t){this._removePointerEvent(t)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.pointerId!==e.pointerId?{x:0,y:0}:{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},n._updatePointerEvent=function(t){var e=this,n=!1;this._recentInputs.forEach((function(i,r){i.pointerId===t.pointerId&&(n=!0,e._recentInputs[r]=t)})),n||(this._firstInputs.push(t),this._recentInputs.push(t))},n._removePointerEvent=function(t){this._firstInputs=this._firstInputs.filter((function(e){return e.pointerId!==t.pointerId})),this._recentInputs=this._recentInputs.filter((function(e){return e.pointerId!==t.pointerId}))},e}(G),nt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown","touchstart"],e.move=["mousemove","touchmove"],e.end=["mouseup","touchend","touchcancel"],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isTouchEvent(t)&&(this._baseTouches=t.touches),this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(t){this._isTouchEvent(t)&&(this._baseTouches=t.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t,e){return this._isTouchEvent(t)?t.touches.length:this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(t){return this._isTouchEvent(t)?2!==t.touches.length||this._baseTouches.length<2?1:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(t){return this._isTouchEvent(t)?{x:t.touches[0].clientX,y:t.touches[0].clientY}:{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this,n=[t,this.prevEvent.srcEvent].map((function(t){return e._isTouchEvent(t)?{id:t.touches[0].identifier,x:t.touches[0].clientX,y:t.touches[0].clientY}:{id:null,x:t.clientX,y:t.clientY}})),i=n[0],r=n[1];return i.id===r.id?{x:i.x-r.x,y:i.y-r.y}:{x:0,y:0}},e}(G),it=function(t,e){return e.reduce((function(e,n,i){return t[i]&&(e[t[i]]=n),e}),{})},rt=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach((function(t){switch(t){case"mouse":n=!0;break;case"touch":e=Q;break;case"pointer":i=H}})),i?new et:e&&n?new nt:e?new tt:n?new J:null};function st(t){return t.indexOf("touch")>-1&&{passive:!1}}var ot=function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager,s=t.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=e,this._interruptManager=n,this._eventManager=i,this._axisManager=r,this._animationManager=s}var e=t.prototype;return e.get=function(t){return this._axisManager.get(t.axes)},e.hold=function(t,e){if(!this._interruptManager.isInterrupted()&&t.axes.length){var n={input:t,event:e};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(t.axes),this._moveDistance=this._axisManager.get(t.axes)}},e.change=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(t){return 0===t}))){var r=e.srcEvent?e.srcEvent:e;if(!r.__childrenAxesAlreadyChanged){var s,o=this._moveDistance||this._axisManager.get(t.axes);s=O(o,(function(t,e){return t+(n[e]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(s,(function(t,e){var n=e.circular,i=e.range;return n&&(n[0]||n[1])?q(t,i,n):t}))),this._isOutside&&this._axisManager.every(o,(function(t,e){return!W(t,e.range)}))&&(this._isOutside=!1),o=this._atOutside(o),s=this._atOutside(s),this.options.nested&&this._isEndofAxis(n,o,s)||(r.__childrenAxesAlreadyChanged=!0);var a={input:t,event:e};if(i){var u=this._animationManager.getDuration(s,o);this._animationManager.animateTo(s,u,a)}else{!this._eventManager.triggerChange(s,o,a,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},e.release=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var r=e.srcEvent?e.srcEvent:e;r.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var s=this._axisManager.get(t.axes),o=this._axisManager.get(),a=this._animationManager.getDisplacement(n),u=it(t.axes,a),c=this._axisManager.get(this._axisManager.map(u,(function(t,e,n){return e.circular&&(e.circular[0]||e.circular[1])?s[n]+t:V(s[n]+t,e.range,e.circular,e.bounce)})));r.__childrenAxesAlreadyReleased=!0;var l=this._animationManager.getDuration(c,s,i);0===l&&(c=h({},o));var v={depaPos:o,destPos:c,duration:l,delta:this._axisManager.getDelta(o,c),inputEvent:e,input:t,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(v),0===this._eventManager.holdingCount&&(this._moveDistance=null);var d=this._animationManager.getUserControl(v),f=A(d.destPos,o),_={input:t,event:e};f||0===d.duration?(f||this._eventManager.triggerChange(d.destPos,o,_,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(_):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(d.destPos,d.duration,_)}},e._atOutside=function(t){var e=this;return this._isOutside?this._axisManager.map(t,(function(t,e){var n=e.range[0]-e.bounce[0],i=e.range[1]+e.bounce[1];return t>i?i:tr?t:tr?r+e._animationManager.interpolate(t-r,s[1]):t}))},e._isEndofAxis=function(t,e,n){return this._axisManager.every(e,(function(i,r,s){return 0===t[s]||e[s]===n[s]&&(o=i,a=r.range,u=r.bounce,!(h=r.circular)[0]&&o===a[0]-u[0]||!h[1]&&o===a[1]+u[1]);var o,a,u,h}))},t}(),at=function(t,e,n){return Math.max(Math.min(t,n),e)},ut=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._useDuration=!0,e}a(e,t);var n=e.prototype;return n.interpolate=function(t,e){var n=this._easing(1e-5)/1e-5;return this._easing(t/(e*n))*e},n.updateAnimation=function(t){var e,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,r=(null==t?void 0:t.destPos)||n.destPos,s=null!==(e=null==t?void 0:t.duration)&&void 0!==e?e:n.duration;if((null==t?void 0:t.restart)||s<=i)this.setTo(r,s-i);else{if(null==t?void 0:t.destPos){var o=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(o,r),n.destPos=r}if(null==t?void 0:t.duration){var a=(i+this._durationOffset)/n.duration;this._durationOffset=a*s-i,n.duration=s}}}},n._initState=function(t){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:t.depaPos,easingPer:0,finished:!1}},n._getNextState=function(t){var e=this,n=this._animateParam,i=t.pos,r=n.destPos,s=O(i,(function(t,e){return t<=r[e]?1:-1})),o=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,a=this._easing(o),u=this.axisManager.map(i,(function(t,u,h){var c=o>=1?r[h]:t+n.delta[h]*(a-e._prevEasingPer)/(1-e._initialEasingPer),l=q(c,u.range,u.circular);if(c!==l){var v=s[h]*(u.range[1]-u.range[0]);r[h]-=v,i[h]-=v}return l}));return this._prevEasingPer=a,{pos:u,easingPer:a,finished:a>=1}},n._easing=function(t){return t>1?1:this._options.easing(t)},e}(function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager;this._options=e,this.interruptManager=n,this.eventManager=i,this.axisManager=r,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(t,e,n){var i,r=this;if(void 0!==n)i=n;else{var s=O(e,(function(e,n){return function(t,e){var n=Math.sqrt(t/e*2);return n<100?0:n}(Math.abs(e-t[n]),r._options.deceleration)}));i=Object.keys(s).reduce((function(t,e){return Math.max(t,s[e])}),-1/0)}return at(i,this._options.minimumDuration,this._options.maximumDuration)},e.getDisplacement=function(t){var e=Math.pow(t.reduce((function(t,e){return t+e*e}),0),1/t.length),n=Math.abs(e/-this._options.deceleration);return t.map((function(t){return t/2*n}))},e.stopAnimation=function(t){if(this._animateParam){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}));D(n,(function(t,n){return e[n]===t}))||this.eventManager.triggerChange(n,e,t,!!t),this._animateParam=null,this._raf&&(i=this._raf,M(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==t?void 0:t.event))}var i},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return Math.min(e.range[1],Math.max(e.range[0],t))}));this.stopAnimation(),this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axisManager.filter(this.axisManager.get(),(function(t,e){return U(t,e.range,e.circular)}));Object.keys(e).length>0&&this.setTo(this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!t),this.axisManager.isOutside()?this.restore(t):this.finish(!!t)},e.finish=function(t){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(t)},e.getUserControl=function(t){var e=t.setTo();return e.destPos=this.axisManager.get(e.destPos),e.duration=at(e.duration,this._options.minimumDuration,this._options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this;this.stopAnimation();var r=this._createAnimationParam(t,e,n),s=h({},r.depaPos),o=this.eventManager.triggerAnimationStart(r),a=this.getUserControl(r);if(!o&&this.axisManager.every(a.destPos,(function(t,e){return U(t,e.range,e.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),o&&!A(a.destPos,s)){var u=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:s,destPos:a.destPos,duration:a.duration,delta:this.axisManager.getDelta(s,a.destPos),isTrusted:!!u,inputEvent:u,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},e.setTo=function(t,e){void 0===e&&(e=0);var n=Object.keys(t),i=this.axisManager.get(n);if(A(t,i))return this;this.interruptManager.setInterrupt(!0);var r=T(t,(function(t,e){return i[e]!==t}));return Object.keys(r).length?(r=this.axisManager.map(r,(function(t,e){var n=e.range,i=e.circular;return i&&(i[0]||i[1])?t:V(t,n,i)})),A(r,i)||(e>0?this.animateTo(r,e):(this.stopAnimation(),this.eventManager.triggerChange(r),this.finish(!1))),this):this},e.setBy=function(t,e){return void 0===e&&(e=0),this.setTo(O(this.axisManager.get(Object.keys(t)),(function(e,n){return e+t[n]})),e)},e.setOptions=function(t){this._options=h(h({},this._options),t)},e._createAnimationParam=function(t,e,n){var i=this.axisManager.get(),r=t,s=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:r,duration:at(e,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,r),inputEvent:s,input:(null==n?void 0:n.input)||null,isTrusted:!!s,done:this.animationEnd}},e._animateLoop=function(t,e){var n=this;if(t.duration){this._animateParam=h(h({},t),{startTime:(new Date).getTime()});var i=O(t.destPos,(function(t){return t})),r=this._initState(this._animateParam),s=function(){n._raf=null;var t=n._animateParam,o=n._getNextState(r),a=!n.eventManager.triggerChange(o.pos,r.pos);if(r=o,o.finished)return t.destPos=n._getFinalPos(t.destPos,i),A(t.destPos,n.axisManager.get(Object.keys(t.destPos)))||n.eventManager.triggerChange(t.destPos,o.pos),void e();a?n.finish(!1):n._raf=b(s)};s()}else this.eventManager.triggerChange(t.destPos),e()},e._getFinalPos=function(t,e){var n=this,i=1e-6;return O(t,(function(t,r){if(t>=e[r]-i&&t<=e[r]+i)return e[r];var s=n._getRoundUnit(t,r);return I(t,s)}))},e._getRoundUnit=function(t,e){var n,i=this._options.round,r=null;if(!i){var s=this.axisManager.getAxisOptions(e);n=Math.max(S(s.range[0]),S(s.range[1]),S(t)),r=1/Math.pow(10,n)}return r||i},t}()),ht=function(t){function e(e,n,i){void 0===e&&(e={}),void 0===n&&(n={}),void 0===i&&(i={});var r=t.call(this)||this;return r.axis=e,r._inputs=[],r.options=h({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(t){r.axis[t].startPos=i[t]})),r.interruptManager=new N(r.options),r.axisManager=new z(r.axis),r.eventManager=new F(r),r.animationManager=new ut(r),r.inputObserver=new ot(r),r.eventManager.setAnimationManager(r.animationManager),r.eventManager.triggerChange(r.axisManager.get()),r}a(e,t);var n=e.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(t,e){var n;return n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),e.mapAxes(n),e.connect(this.inputObserver),this._inputs.push(e),this},n.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);e>=0&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach((function(t){return t.disconnect()})),this._inputs=[];return this},n.get=function(t){return this.axisManager.get(t)},n.setTo=function(t,e){return void 0===e&&(e=0),this.animationManager.setTo(t,e),this},n.setBy=function(t,e){return void 0===e&&(e=0),this.animationManager.setBy(t,e),this},n.setOptions=function(t){return this.options=h(h({},this.options),t),this.animationManager.setOptions(t),this},n.setAxis=function(t){return this.axisManager.setAxis(t),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(t){return this.animationManager.updateAnimation(t),this},n.isBounceArea=function(t){return this.axisManager.isOutside(t)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},e.VERSION="3.9.1",e.TRANSFORM=m,e.DIRECTION_NONE=1,e.DIRECTION_LEFT=2,e.DIRECTION_RIGHT=4,e.DIRECTION_UP=8,e.DIRECTION_DOWN=16,e.DIRECTION_HORIZONTAL=6,e.DIRECTION_VERTICAL=l,e.DIRECTION_ALL=30,c([s.D0],e.prototype,"holding",null),e=c([s.kU],e)}(r.Z),ct=function(){function t(t,e){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(t){n._dragged&&(t.preventDefault(),t.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=y(t),this.options=h({inputType:["touch","mouse","pointer"],inputKey:[g],inputButton:[v],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},e),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=X(!!t[0],!!t[1]),this.axes=t},e.connect=function(t){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(t),this},e.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=j(this.element,this.options,this._direction)),this},e.disable=function(){return this._enabled&&(this._enabled=!1,B(this._originalCssProps)||K(this.element,this._originalCssProps)),this},e.isEnabled=function(){return this._enabled},e.release=function(){var t=this._activeEvent,e=t.prevEvent;return t.onRelease(),this._observer.release(this,e,[0,0]),this._detachWindowEvent(t),this},e._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=e.preventDefaultOnDrag,s=this._activeEvent,o=s.onEventStart(t,n,i);if(o&&this._enabled&&!(s.getTouches(t,i)>1)&&!1!==o.srcEvent.cancelable){var a=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,o),this._atRightEdge=p&&o.center.x>window.innerWidth-a,this._attachWindowEvent(s),r&&"touchstart"!==o.srcEvent.type&&o.srcEvent.preventDefault(),s.prevEvent=o}},e._onPanmove=function(t){var e=this,n=this.options,i=n.iOSEdgeSwipeThreshold,r=n.preventClickOnDrag,s=n.releaseOnScroll,o=n.inputKey,a=n.inputButton,u=n.threshold,h=n.thresholdAngle,c=this._activeEvent,v=c.onEventMove(t,o,a),d=c.getTouches(t,a);if(0===d||s&&v&&!v.srcEvent.cancelable)this._onPanend(t);else if(v&&this._enabled&&!(d>1)){var f=function(t,e){if(e<0||e>90)return 1;var n=Math.abs(t);return n>e&&n<180-e?l:6}(v.angle,h),_=Y(6,this._direction,f),g=Y(l,this._direction,f);if(c.prevEvent&&p){if(v.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),v.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return e.release()}),100))}var m=this._getDistance([v.deltaX,v.deltaY],[_,g]),E=this._getOffset([v.offsetX,v.offsetY],[_,g]),x=E.some((function(t){return 0!==t}));x&&(!1!==v.srcEvent.cancelable&&v.srcEvent.preventDefault(),v.srcEvent.stopPropagation()),v.preventSystemEvent=x,x&&(this._isOverThreshold||m>=u)&&(this._dragged=r,this._isOverThreshold=!0,this._observer.change(this,v,it(this.axes,E))),c.prevEvent=v}},e._onPanend=function(t){var e=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(t),this._enabled&&0===n.getTouches(t,e)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,r=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[Y(6,this._direction),Y(l,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,r)}},e._attachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.addEventListener(t,e._onPanmove,st(t))})),null==t||t.end.forEach((function(t){window.addEventListener(t,e._onPanend,st(t))}))},e._detachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.removeEventListener(t,e._onPanmove)})),null==t||t.end.forEach((function(t){window.removeEventListener(t,e._onPanend)}))},e._getOffset=function(t,e){var n=this.options.scale;return[e[0]?t[0]*n[0]:0,e[1]?t[1]*n[1]:0]},e._getDistance=function(t,e){return Math.sqrt(Number(e[0])*Math.pow(t[0],2)+Number(e[1])*Math.pow(t[1],2))},e._attachElementEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(t){i.addEventListener(t,e._onPanstart)})),n.move.forEach((function(t){i.addEventListener(t,e._voidFunction)}))}},e._detachElementEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPanstart)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._voidFunction)}))),this.disable(),this._observer=null},t}(),lt=function(t){function e(e,n){var i=t.call(this,e,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}a(e,t);var n=e.prototype;return n.mapAxes=function(t){this._direction=ht.DIRECTION_ALL,this.axes=t},n._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventStart(t,n,i);if(s&&this.isEnabled()){var o=this.element.getBoundingClientRect();this._observer.hold(this,s),this._attachWindowEvent(r),this._coefficientForDistanceToAngle=360/(o.width*Math.PI),this._rotateOrigin=[o.left+(o.width-1)/2,o.top+(o.height-1)/2],this._prevAngle=null,this._triggerChange(s),r.prevEvent=s}},n._onPanmove=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventMove(t,n,i);s&&this.isEnabled()&&(!1!==s.srcEvent.cancelable&&s.srcEvent.preventDefault(),s.srcEvent.stopPropagation(),this._triggerChange(s),r.prevEvent=s)},n._onPanend=function(t){var e=this._activeEvent;if(e.onEventEnd(t),this.isEnabled()){var n=e.prevEvent;this._triggerChange(n);var i=n.velocityX,r=n.velocityY,s=Math.sqrt(i*i+r*r)*(this._lastDiff>0?-1:1);e.onRelease(),this._observer.release(this,n,[s*this._coefficientForDistanceToAngle]),this._detachWindowEvent(e)}},n._triggerChange=function(t){var e=this._getPosFromOrigin(t.center.x,t.center.y),n=e.x,i=e.y,r=L(n,i),s=r<0?360+r:r,o=this._getQuadrant(t.center.x,t.center.y),a=this._getDifference(this._prevAngle,s,this._prevQuadrant,o);this._prevAngle=s,this._prevQuadrant=o,0!==a&&(this._lastDiff=a,this._observer.change(this,t,it(this.axes,[-a])))},n._getDifference=function(t,e,n,i){return null===t?0:1===n&&4===i?-t-(360-e):4===n&&1===i?360-t+e:e-t},n._getPosFromOrigin=function(t,e){return{x:t-this._rotateOrigin[0],y:this._rotateOrigin[1]-e}},n._getQuadrant=function(t,e){var n=this._getPosFromOrigin(t,e),i=n.x,r=n.y,s=0;return i>=0&&r>=0?s=1:i<0&&r>=0?s=2:i<0&&r<0?s=3:i>=0&&r<0&&(s=4),s},e}(ct),vt=function(){function t(t,e){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=y(t),this.options=h({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},e),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._activeEvent&&this._detachEvent(),this._attachEvent(t),this._originalCssProps=j(this.element,this.options,30),this},e.disconnect=function(){return this._detachEvent(),B(this._originalCssProps)||K(this.element,this._originalCssProps),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onPinchStart=function(t){var e=this._activeEvent,n=e.onEventStart(t);n&&this._enabled&&2===e.getTouches(t)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,t),this._pinchFlag=!0,this._isOverThreshold=!1,e.prevEvent=n)},e._onPinchMove=function(t){var e=this.options.threshold,n=this._activeEvent,i=n.onEventMove(t);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(t)){var r=this._getDistance(i.scale),s=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||r>=e)&&(this._isOverThreshold=!0,this._observer.change(this,t,it(this.axes,[s]))),n.prevEvent=i}},e._onPinchEnd=function(t){var e=this._activeEvent;e.onEventEnd(t),!this._pinchFlag||!this._enabled||e.getTouches(t)>=2||(e.onRelease(),this._observer.release(this,t,[0],0),this._baseValue=null,this._pinchFlag=!1)},e._attachEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(t){i.addEventListener(t,e._onPinchStart,!1)})),n.move.forEach((function(t){i.addEventListener(t,e._onPinchMove,!1)})),n.end.forEach((function(t){i.addEventListener(t,e._onPinchEnd,!1)}))}},e._detachEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPinchStart,!1)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._onPinchMove,!1)})),null==e||e.end.forEach((function(e){n.removeEventListener(e,t._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},e._getOffset=function(t,e){return void 0===e&&(e=1),this._baseValue*(t-e)*this.options.scale},e._getDistance=function(t){return Math.abs(t-1)},t}(),dt=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({inputKey:[g],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},e),this._onWheel=this._onWheel.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=X(!!t[1],!!t[0]),this.axes=t},e.connect=function(t){return this._detachEvent(),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onWheel=function(t){var e=this;if(this._enabled&&Z(t,this.options.inputKey)){var n=this._getOffset([t.deltaY,t.deltaX],[Y(l,this._direction),Y(6,this._direction)]);0===n[0]&&0===n[1]||(t.preventDefault(),this._holding||(this._observer.hold(this,t),this._holding=!0),this._observer.change(this,t,it(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){e._holding&&(e._holding=!1,e._observer.release(e,t,[0]))}),this.options.releaseDelay))}},e._getOffset=function(t,e){var n=this.options.scale,i=this.options.useNormalized;return[e[0]&&t[0]?(t[0]>0?-1:1)*(i?1:Math.abs(t[0]))*n:0,e[1]&&t[1]?(t[1]>0?-1:1)*(i?1:Math.abs(t[1]))*n:0]},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("wheel",this._onWheel),this._enabled=!0},e._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},t}(),ft=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({scale:[1,1]},e),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onKeydown=function(t){if(this._enabled){var e=!0,n=1,i=-1;switch(t.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:e=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(e=!1),e){t.preventDefault();var r=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,t),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,t,it(this.axes,r))}}},e._onKeyup=function(t){var e=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){e._observer.release(e,t,[0,0]),e._holding=!1}),80))},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("keydown",this._onKeydown,!1),e.addEventListener("keypress",this._onKeydown,!1),e.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},e._detachEvent=function(){var t=this.element;t&&(t.removeEventListener("keydown",this._onKeydown,!1),t.removeEventListener("keypress",this._onKeydown,!1),t.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},t}(),_t={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(t){return new ht(t.axis,t.options)},on:function(t,e,n){t.on(e,n)},off:function(t,e,n){t.off(e,n)},destroy:function(t){t.destroy()}};const gt=ht},4605:(t,e,n)=>{n.r(e),n.d(e,{default:()=>o});var i=n(2784),r=n(2359),s=n(4458);function o(){const[t,e]=(0,i.useState)(0),[n,o]=(0,i.useState)(0),[a,u]=(0,i.useState)([0,0]),h=1280,c=1677,l=1.31015625,{connect:v,setAxis:d,rawX:f,rawY:_}=(0,r.eD)({rawX:{range:[0,0],bounce:100},rawY:{range:[0,0],bounce:100}},{deceleration:.0024});return(0,i.useEffect)((()=>{const t=document.getElementById("imageView"),n=t.getBoundingClientRect(),i=t.getBoundingClientRect().width,r=i*l,a=document.getElementById("minimap").getBoundingClientRect(),f=document.getElementById("minimap-pointer").getBoundingClientRect();v("rawX rawY",new s.Ju(t,{scale:[-1,-1]})),v("rawX rawY",new s.f3(t,{scale:[10,-10]})),v("rawY rawX",new s.HA(t,{scale:-30,useNormalized:!0})),e(r),o(i/h*128),u([(a.width-f.width)/h,(a.height-f.height)/c]),d({rawX:{range:[0,h-n.width]},rawY:{range:[0,c-r]}})}),[]),i.createElement("div",null,i.createElement("p",null,"You can create a scrollable minimap using two axes."),i.createElement("div",{style:{position:"relative"}},i.createElement("div",{id:"imageView",style:{height:`${t}px`}},i.createElement("div",{id:"rawImage",style:{transform:`translate3d(${-f}px, ${-_}px, 0)`}})),i.createElement("div",{id:"minimap"},i.createElement("div",{id:"minimap-pointer",style:{width:`${n}px`,height:n*l+"px",transform:`translate3d(${f*a[0]}px, ${_*a[1]}px, 0)`}}))))}},2359:(t,e,n)=>{n.d(e,{eD:()=>o});var i=n(4458),r=n(3566),s=function(){return s=Object.assign||function(t){for(var e,n=1,i=arguments.length;n{n.d(e,{q:()=>s});var i=n(5362),r=n(2784);function s(t,e){var n=(0,r.useRef)(!0),s=(0,r.useMemo)((function(){return(0,i.tG)(t,e)}),[]),a=s.state(),o=(0,i.XP)(a),u=(0,r.useState)({})[0],h=function(t){var e=(0,r.useState)((function(){return a[t]}));u[t]={getter:!1,set:e[1],value:e[0]}};for(var c in a)h(c);n.current=!0;var l=(0,r.useMemo)((function(){return s.methods()}),[]);(0,r.useEffect)((function(){n.current=!1})),(0,r.useEffect)((function(){s.mounted();var t=s.instance();return o.forEach((function(e){t.subscribe(e,(function(t){u[e].value=t,u[e].getter&&u[e].set(t)}))})),s.init(),function(){s.destroy()}}),[]);var v=o.reduce((function(t,e){return l[e]||Object.defineProperty(t,e,{enumerable:!0,get:function(){return n.current&&(u[e].getter=!0),u[e].value}}),t}),{});return s.events().forEach((function(t){v[(0,i._A)("on ".concat(t))]=function(e,n){var i=(0,r.useMemo)((function(){return s.on(t,e),e}),n);(0,r.useEffect)((function(){return s.off(t,i),s.on(t,i),function(){s.off(t,i)}}),[i])}})),(0,i.XP)(l).forEach((function(t){v[t]=l[t]})),v}},4458:(t,e,n)=>{n.d(e,{HA:()=>ft,Ju:()=>ct,ZP:()=>gt,cD:()=>_t,f3:()=>dt,nj:()=>vt,zV:()=>lt});var i=n(5161),r=n(1588),s=n(5362),a=function(t,e){return a=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])},a(t,e)};function o(t,e){function n(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var u,h=function(){return h=Object.assign||function(t){for(var e,n=1,i=arguments.length;n=0;o--)(r=t[o])&&(a=(s<3?r(a):s>3?r(e,n,a):r(e,n))||a);return s>3&&a&&Object.defineProperty(e,n,a),a}u="undefined"==typeof window?{navigator:{userAgent:""}}:window;var l=24,v="left",f="right",d="middle",_={1:v,2:d,3:f},g="any",p="ontouchstart"in u&&"safari"===(0,i.ZP)().browser.name,m=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=t,n=x(i.childNodes)}else n=x(document.querySelectorAll(t));e||(n=n.length>=1?n[0]:void 0)}else t===u?n=t:"value"in t||"current"in t?n=t.value||t.current:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in u&&t instanceof jQuery||t.constructor.prototype.jquery?n=e?t.toArray():t.get(0):Array.isArray(t)&&(n=t.map((function(t){return y(t)})),e||(n=n.length>=1?n[0]:void 0)):n=t;return n},b=u.requestAnimationFrame||u.webkitRequestAnimationFrame,M=u.cancelAnimationFrame||u.webkitCancelAnimationFrame;if(b&&!M){var P={},O=b;b=function(t){var e=O((function(n){P[e]&&t(n)}));return P[e]=!0,e},M=function(t){delete P[t]}}else b&&M||(b=function(t){return u.setTimeout((function(){t(u.performance&&u.performance.now&&u.performance.now()||(new Date).getTime())}),16)},M=u.clearTimeout);var T=function(t,e){var n={};for(var i in t)i&&(n[i]=e(t[i],i));return n},w=function(t,e){var n={};for(var i in t)i&&e(t[i],i)&&(n[i]=t[i]);return n},D=function(t,e){for(var n in t)if(n&&!e(t[n],n))return!1;return!0},A=function(t,e){return D(t,(function(t,n){return t===e[n]}))},C={},I=function(t,e){return C[e]||(C[e]=k(e)),C[e](t)},R=function(t,e){return t&&e?T(t,(function(t,n){return I(t,"number"==typeof e?e:e[n])})):t},S=function(t){if(!isFinite(t))return 0;var e="".concat(t);if(e.indexOf("e")>=0){for(var n=0,i=1;Math.round(t*i)/i!==t;)i*=10,n++;return n}return e.indexOf(".")>=0?e.length-e.indexOf(".")-1:0},k=function(t){var e=t<1?Math.pow(10,S(t)):1;return function(n){return 0===t?0:Math.round(Math.round(n/t)*t*e)/e}},X=function(t,e){return 180*Math.atan2(e,t)/Math.PI},L=function(t){var e=!0;return Object.keys(E).forEach((function(n){t&&t[n]===E[n]||(e=!1)})),e},Y=function(t,e){return t&&e?30:t?6:e?l:1},B=function(t,e,n){return n?!!(30===e||e&t&&n&t):!!(e&t)},j=function(t,e,n){var i,r=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),s={};if(t&&t.style){var a=e.touchAction?e.touchAction:r[n],o=h(h({},E),{"touch-action":"none"===t.style["touch-action"]?"none":a});Object.keys(o).forEach((function(e){s[e]=t.style[e]})),Object.keys(o).forEach((function(e){t.style[e]=o[e]}))}return s},N=function(t,e){t&&t.style&&e&&Object.keys(e).forEach((function(n){t.style[n]=e[n]}))},K=function(){function t(t){this._axes=t,this.holdingCount=0}var e=t.prototype;return e.hold=function(t,e){var n=this._getRoundPos(t).roundPos;this._axes.trigger(new r.L("hold",{pos:n,input:e.input||null,inputEvent:e.event||null,isTrusted:!0}))},e.triggerRelease=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration),this._axes.trigger(new r.L("release",h(h({},t),{bounceRatio:this._getBounceRatio(n)})))},e.triggerChange=function(t,e,n,i){var a=this;void 0===i&&(i=!1);var o=this.animationManager,u=o.axisManager,h=o.getEventInfo(),c=this._getRoundPos(t,e),l=c.roundPos,v=c.roundDepa,f=u.moveTo(l,v),d=(null==n?void 0:n.event)||(null==h?void 0:h.event)||null,_={pos:f.pos,delta:f.delta,bounceRatio:this._getBounceRatio(f.pos),holding:i,inputEvent:d,isTrusted:!!d,input:(null==n?void 0:n.input)||(null==h?void 0:h.input)||null,set:d?this._createUserControll(f.pos):function(){}},g=new r.L("change",_);return this._axes.trigger(g),Object.keys(f.pos).forEach((function(t){var e=f.pos[t];(0,s.CV)(a._axes,t,e).current=e})),d&&u.set(_.set().destPos),!g.isCanceled()},e.triggerAnimationStart=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration);var s=new r.L("animationStart",t);return this._axes.trigger(s),!s.isCanceled()},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("animationEnd",{isTrusted:t}))},e.triggerFinish=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("finish",{isTrusted:t}))},e.setAnimationManager=function(t){this.animationManager=t},e.destroy=function(){this._axes.off()},e._createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:h({},t),duration:e};return function(t,e){return t&&(n.destPos=h({},t)),void 0!==e&&(n.duration=e),n}},e._getRoundPos=function(t,e){var n=this._axes.options.round;return{roundPos:R(t,n),roundDepa:R(e,n)}},e._getBounceRatio=function(t){return this._axes.axisManager.map(t,(function(t,e){return te.range[1]&&0!==e.bounce[1]?(t-e.range[1])/e.bounce[1]:0}))},c([s.cn],t.prototype,"holdingCount",void 0),t}(),F=function(){function t(t){this._options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this._options.interruptable||this._prevented},e.isInterrupted=function(){return!this._options.interruptable&&this._prevented},e.setInterrupt=function(t){this._options.interruptable||(this._prevented=t)},t}(),V=function(t,e,n,i){var r=t,s=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return r=Math.max(s[0],r),r=Math.min(s[1],r)},W=function(t,e){return te[1]},U=function(t,e,n){return n[1]&&t>e[1]||n[0]&&ts&&(i=(i-s)%a+r),n[0]&&t-1||e.indexOf("none")>-1&&!t.shiftKey&&!t.ctrlKey&&!t.altKey&&!t.metaKey||e.indexOf("shift")>-1&&t.shiftKey||e.indexOf("ctrl")>-1&&t.ctrlKey||e.indexOf("alt")>-1&&t.altKey||e.indexOf("meta")>-1&&t.metaKey)},J=function(){function t(){var t=this;this._stopContextMenu=function(e){e.preventDefault(),u.removeEventListener("contextmenu",t._stopContextMenu)}}var e=t.prototype;return e.extendEvent=function(t){var e,n=this.prevEvent,i=this._getCenter(t),r=n?this._getMovement(t):{x:0,y:0},s=n?this._getScale(t):1,a=n?X(i.x-n.center.x,i.y-n.center.y):0,o=n?n.deltaX+r.x:r.x,u=n?n.deltaY+r.y:r.y,h=r.x,c=r.y,l=this._latestInterval,v=Date.now(),f=l?v-l.timestamp:0,d=n?n.velocityX:0,_=n?n.velocityY:0;return(!l||f>=16)&&(l&&(d=(e=[(o-l.deltaX)/f,(u-l.deltaY)/f])[0],_=e[1]),this._latestInterval={timestamp:v,deltaX:o,deltaY:u}),{srcEvent:t,scale:s,angle:a,center:i,deltaX:o,deltaY:u,offsetX:h,offsetY:c,velocityX:d,velocityY:_,preventSystemEvent:!0}},e._getDistance=function(t,e){var n=e.clientX-t.clientX,i=e.clientY-t.clientY;return Math.sqrt(n*n+i*i)},e._getButton=function(t){var e={1:v,2:f,4:d},n=this._isTouchEvent(t)?v:e[t.buttons];return n||null},e._isTouchEvent=function(t){return t.type&&t.type.indexOf("touch")>-1},e._isValidButton=function(t,e){return e.indexOf(t)>-1},e._isValidEvent=function(t,e,n){return(!e||$(t,e))&&(!n||this._isValidButton(this._getButton(t),n))},e._preventMouseButton=function(t,e){e===f?u.addEventListener("contextmenu",this._stopContextMenu):e===d&&t.preventDefault()},t}(),G=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown"],e.move=["mousemove"],e.end=["mouseup"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(t,e){return e&&this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},e}(J),tt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["touchstart"],e.move=["touchmove"],e.end=["touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e){return this._baseTouches=t.touches,this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventMove=function(t,e){return this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventEnd=function(t){this._baseTouches=t.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t){return t.touches.length},n._getScale=function(t){return 2!==t.touches.length||this._baseTouches.length<2?null:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(t){return{x:t.touches[0].clientX,y:t.touches[0].clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.touches[0].identifier!==e.touches[0].identifier?{x:0,y:0}:{x:t.touches[0].clientX-e.touches[0].clientX,y:t.touches[0].clientY-e.touches[0].clientY}},e}(J),et=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=H?["pointerdown"]:["MSPointerDown"],e.move=H?["pointermove"]:["MSPointerMove"],e.end=H?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],e._firstInputs=[],e._recentInputs=[],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?(this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventEnd=function(t){this._removePointerEvent(t)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.pointerId!==e.pointerId?{x:0,y:0}:{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},n._updatePointerEvent=function(t){var e=this,n=!1;this._recentInputs.forEach((function(i,r){i.pointerId===t.pointerId&&(n=!0,e._recentInputs[r]=t)})),n||(this._firstInputs.push(t),this._recentInputs.push(t))},n._removePointerEvent=function(t){this._firstInputs=this._firstInputs.filter((function(e){return e.pointerId!==t.pointerId})),this._recentInputs=this._recentInputs.filter((function(e){return e.pointerId!==t.pointerId}))},e}(J),nt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown","touchstart"],e.move=["mousemove","touchmove"],e.end=["mouseup","touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isTouchEvent(t)&&(this._baseTouches=t.touches),this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(t){this._isTouchEvent(t)&&(this._baseTouches=t.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t,e){return this._isTouchEvent(t)?t.touches.length:this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(t){return this._isTouchEvent(t)?2!==t.touches.length||this._baseTouches.length<2?1:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(t){return this._isTouchEvent(t)?{x:t.touches[0].clientX,y:t.touches[0].clientY}:{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this,n=[t,this.prevEvent.srcEvent].map((function(t){return e._isTouchEvent(t)?{id:t.touches[0].identifier,x:t.touches[0].clientX,y:t.touches[0].clientY}:{id:null,x:t.clientX,y:t.clientY}})),i=n[0],r=n[1];return i.id===r.id?{x:i.x-r.x,y:i.y-r.y}:{x:0,y:0}},e}(J),it=function(t,e){return e.reduce((function(e,n,i){return t[i]&&(e[t[i]]=n),e}),{})},rt=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach((function(t){switch(t){case"mouse":n=!0;break;case"touch":e=z;break;case"pointer":i=Z}})),i?new et:e&&n?new nt:e?new tt:n?new G:null};function st(t){return t.indexOf("touch")>-1&&{passive:!1}}var at=function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager,s=t.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=e,this._interruptManager=n,this._eventManager=i,this._axisManager=r,this._animationManager=s}var e=t.prototype;return e.get=function(t){return this._axisManager.get(t.axes)},e.hold=function(t,e){if(!this._interruptManager.isInterrupted()&&t.axes.length){var n={input:t,event:e};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(t.axes),this._moveDistance=this._axisManager.get(t.axes)}},e.change=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(t){return 0===t}))){var r=e.srcEvent?e.srcEvent:e;if(!r.__childrenAxesAlreadyChanged){var s,a=this._moveDistance||this._axisManager.get(t.axes);s=T(a,(function(t,e){return t+(n[e]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(s,(function(t,e){var n=e.circular,i=e.range;return n&&(n[0]||n[1])?q(t,i,n):t}))),this._isOutside&&this._axisManager.every(a,(function(t,e){return!W(t,e.range)}))&&(this._isOutside=!1),a=this._atOutside(a),s=this._atOutside(s),this.options.nested&&this._isEndofAxis(n,a,s)||(r.__childrenAxesAlreadyChanged=!0);var o={input:t,event:e};if(i){var u=this._animationManager.getDuration(s,a);this._animationManager.animateTo(s,u,o)}else{!this._eventManager.triggerChange(s,a,o,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},e.release=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var r=e.srcEvent?e.srcEvent:e;r.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var s=this._axisManager.get(t.axes),a=this._axisManager.get(),o=this._animationManager.getDisplacement(n),u=it(t.axes,o),c=this._axisManager.get(this._axisManager.map(u,(function(t,e,n){return e.circular&&(e.circular[0]||e.circular[1])?s[n]+t:V(s[n]+t,e.range,e.circular,e.bounce)})));r.__childrenAxesAlreadyReleased=!0;var l=this._animationManager.getDuration(c,s,i);0===l&&(c=h({},a));var v={depaPos:a,destPos:c,duration:l,delta:this._axisManager.getDelta(a,c),inputEvent:e,input:t,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(v),0===this._eventManager.holdingCount&&(this._moveDistance=null);var f=this._animationManager.getUserControl(v),d=A(f.destPos,a),_={input:t,event:e};d||0===f.duration?(d||this._eventManager.triggerChange(f.destPos,a,_,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(_):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(f.destPos,f.duration,_)}},e._atOutside=function(t){var e=this;return this._isOutside?this._axisManager.map(t,(function(t,e){var n=e.range[0]-e.bounce[0],i=e.range[1]+e.bounce[1];return t>i?i:tr?t:tr?r+e._animationManager.interpolate(t-r,s[1]):t}))},e._isEndofAxis=function(t,e,n){return this._axisManager.every(e,(function(i,r,s){return 0===t[s]||e[s]===n[s]&&(a=i,o=r.range,u=r.bounce,!(h=r.circular)[0]&&a===o[0]-u[0]||!h[1]&&a===o[1]+u[1]);var a,o,u,h}))},t}(),ot=function(t,e,n){return Math.max(Math.min(t,n),e)},ut=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._useDuration=!0,e}o(e,t);var n=e.prototype;return n.interpolate=function(t,e){var n=this._easing(1e-5)/1e-5;return this._easing(t/(e*n))*e},n.updateAnimation=function(t){var e,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,r=(null==t?void 0:t.destPos)||n.destPos,s=null!==(e=null==t?void 0:t.duration)&&void 0!==e?e:n.duration;if((null==t?void 0:t.restart)||s<=i)this.setTo(r,s-i);else{if(null==t?void 0:t.destPos){var a=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(a,r),n.destPos=r}if(null==t?void 0:t.duration){var o=(i+this._durationOffset)/n.duration;this._durationOffset=o*s-i,n.duration=s}}}},n._initState=function(t){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:t.depaPos,easingPer:0,finished:!1}},n._getNextState=function(t){var e=this,n=this._animateParam,i=t.pos,r=n.destPos,s=T(i,(function(t,e){return t<=r[e]?1:-1})),a=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,o=this._easing(a),u=this.axisManager.map(i,(function(t,u,h){var c=a>=1?r[h]:t+n.delta[h]*(o-e._prevEasingPer)/(1-e._initialEasingPer),l=q(c,u.range,u.circular);if(c!==l){var v=s[h]*(u.range[1]-u.range[0]);r[h]-=v,i[h]-=v}return l}));return this._prevEasingPer=o,{pos:u,easingPer:o,finished:o>=1}},n._easing=function(t){return t>1?1:this._options.easing(t)},e}(function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager;this._options=e,this.interruptManager=n,this.eventManager=i,this.axisManager=r,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(t,e,n){var i,r=this;if(void 0!==n)i=n;else{var s=T(e,(function(e,n){return function(t,e){var n=Math.sqrt(t/e*2);return n<100?0:n}(Math.abs(e-t[n]),r._options.deceleration)}));i=Object.keys(s).reduce((function(t,e){return Math.max(t,s[e])}),-1/0)}return ot(i,this._options.minimumDuration,this._options.maximumDuration)},e.getDisplacement=function(t){var e=Math.pow(t.reduce((function(t,e){return t+e*e}),0),1/t.length),n=Math.abs(e/-this._options.deceleration);return t.map((function(t){return t/2*n}))},e.stopAnimation=function(t){if(this._animateParam){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}));D(n,(function(t,n){return e[n]===t}))||this.eventManager.triggerChange(n,e,t,!!t),this._animateParam=null,this._raf&&(i=this._raf,M(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==t?void 0:t.event))}var i},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return Math.min(e.range[1],Math.max(e.range[0],t))}));this.stopAnimation(),this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axisManager.filter(this.axisManager.get(),(function(t,e){return U(t,e.range,e.circular)}));Object.keys(e).length>0&&this.setTo(this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!t),this.axisManager.isOutside()?this.restore(t):this.finish(!!t)},e.finish=function(t){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(t)},e.getUserControl=function(t){var e=t.setTo();return e.destPos=this.axisManager.get(e.destPos),e.duration=ot(e.duration,this._options.minimumDuration,this._options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this;this.stopAnimation();var r=this._createAnimationParam(t,e,n),s=h({},r.depaPos),a=this.eventManager.triggerAnimationStart(r),o=this.getUserControl(r);if(!a&&this.axisManager.every(o.destPos,(function(t,e){return U(t,e.range,e.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),a&&!A(o.destPos,s)){var u=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:s,destPos:o.destPos,duration:o.duration,delta:this.axisManager.getDelta(s,o.destPos),isTrusted:!!u,inputEvent:u,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},e.setTo=function(t,e){void 0===e&&(e=0);var n=Object.keys(t),i=this.axisManager.get(n);if(A(t,i))return this;this.interruptManager.setInterrupt(!0);var r=w(t,(function(t,e){return i[e]!==t}));return Object.keys(r).length?(r=this.axisManager.map(r,(function(t,e){var n=e.range,i=e.circular;return i&&(i[0]||i[1])?t:V(t,n,i)})),A(r,i)||(e>0?this.animateTo(r,e):(this.stopAnimation(),this.eventManager.triggerChange(r),this.finish(!1))),this):this},e.setBy=function(t,e){return void 0===e&&(e=0),this.setTo(T(this.axisManager.get(Object.keys(t)),(function(e,n){return e+t[n]})),e)},e.setOptions=function(t){this._options=h(h({},this._options),t)},e._createAnimationParam=function(t,e,n){var i=this.axisManager.get(),r=t,s=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:r,duration:ot(e,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,r),inputEvent:s,input:(null==n?void 0:n.input)||null,isTrusted:!!s,done:this.animationEnd}},e._animateLoop=function(t,e){var n=this;if(t.duration){this._animateParam=h(h({},t),{startTime:(new Date).getTime()});var i=T(t.destPos,(function(t){return t})),r=this._initState(this._animateParam),s=function(){n._raf=null;var t=n._animateParam,a=n._getNextState(r),o=!n.eventManager.triggerChange(a.pos,r.pos);if(r=a,a.finished)return t.destPos=n._getFinalPos(t.destPos,i),A(t.destPos,n.axisManager.get(Object.keys(t.destPos)))||n.eventManager.triggerChange(t.destPos,a.pos),void e();o?n.finish(!1):n._raf=b(s)};s()}else this.eventManager.triggerChange(t.destPos),e()},e._getFinalPos=function(t,e){var n=this,i=1e-6;return T(t,(function(t,r){if(t>=e[r]-i&&t<=e[r]+i)return e[r];var s=n._getRoundUnit(t,r);return I(t,s)}))},e._getRoundUnit=function(t,e){var n,i=this._options.round,r=null;if(!i){var s=this.axisManager.getAxisOptions(e);n=Math.max(S(s.range[0]),S(s.range[1]),S(t)),r=1/Math.pow(10,n)}return r||i},t}()),ht=function(t){function e(e,n,i){void 0===e&&(e={}),void 0===n&&(n={}),void 0===i&&(i={});var r=t.call(this)||this;return r.axis=e,r._inputs=[],r.options=h({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(t){r.axis[t].startPos=i[t]})),r.interruptManager=new F(r.options),r.axisManager=new Q(r.axis),r.eventManager=new K(r),r.animationManager=new ut(r),r.inputObserver=new at(r),r.eventManager.setAnimationManager(r.animationManager),r.eventManager.triggerChange(r.axisManager.get()),r}o(e,t);var n=e.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(t,e){var n;return n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),e.mapAxes(n),e.connect(this.inputObserver),this._inputs.push(e),this},n.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);e>=0&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach((function(t){return t.disconnect()})),this._inputs=[];return this},n.get=function(t){return this.axisManager.get(t)},n.setTo=function(t,e){return void 0===e&&(e=0),this.animationManager.setTo(t,e),this},n.setBy=function(t,e){return void 0===e&&(e=0),this.animationManager.setBy(t,e),this},n.setOptions=function(t){return this.options=h(h({},this.options),t),this.animationManager.setOptions(t),this},n.setAxis=function(t){return this.axisManager.setAxis(t),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(t){return this.animationManager.updateAnimation(t),this},n.isBounceArea=function(t){return this.axisManager.isOutside(t)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},e.VERSION="3.9.1",e.TRANSFORM=m,e.DIRECTION_NONE=1,e.DIRECTION_LEFT=2,e.DIRECTION_RIGHT=4,e.DIRECTION_UP=8,e.DIRECTION_DOWN=16,e.DIRECTION_HORIZONTAL=6,e.DIRECTION_VERTICAL=l,e.DIRECTION_ALL=30,c([s.D0],e.prototype,"holding",null),e=c([s.kU],e)}(r.Z),ct=function(){function t(t,e){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(t){n._dragged&&(t.preventDefault(),t.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=y(t),this.options=h({inputType:["touch","mouse","pointer"],inputKey:[g],inputButton:[v],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},e),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=Y(!!t[0],!!t[1]),this.axes=t},e.connect=function(t){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(t),this},e.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=j(this.element,this.options,this._direction)),this},e.disable=function(){return this._enabled&&(this._enabled=!1,L(this._originalCssProps)||N(this.element,this._originalCssProps)),this},e.isEnabled=function(){return this._enabled},e.release=function(){var t=this._activeEvent,e=t.prevEvent;return t.onRelease(),this._observer.release(this,e,[0,0]),this._detachWindowEvent(t),this},e._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=e.preventDefaultOnDrag,s=this._activeEvent,a=s.onEventStart(t,n,i);if(a&&this._enabled&&!(s.getTouches(t,i)>1)&&!1!==a.srcEvent.cancelable){var o=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,a),this._atRightEdge=p&&a.center.x>window.innerWidth-o,this._attachWindowEvent(s),r&&"touchstart"!==a.srcEvent.type&&a.srcEvent.preventDefault(),s.prevEvent=a}},e._onPanmove=function(t){var e=this,n=this.options,i=n.iOSEdgeSwipeThreshold,r=n.preventClickOnDrag,s=n.releaseOnScroll,a=n.inputKey,o=n.inputButton,u=n.threshold,h=n.thresholdAngle,c=this._activeEvent,v=c.onEventMove(t,a,o),f=c.getTouches(t,o);if(0===f||s&&v&&!v.srcEvent.cancelable)this._onPanend(t);else if(v&&this._enabled&&!(f>1)){var d=function(t,e){if(e<0||e>90)return 1;var n=Math.abs(t);return n>e&&n<180-e?l:6}(v.angle,h),_=B(6,this._direction,d),g=B(l,this._direction,d);if(c.prevEvent&&p){if(v.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),v.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return e.release()}),100))}var m=this._getDistance([v.deltaX,v.deltaY],[_,g]),E=this._getOffset([v.offsetX,v.offsetY],[_,g]),x=E.some((function(t){return 0!==t}));x&&(!1!==v.srcEvent.cancelable&&v.srcEvent.preventDefault(),v.srcEvent.stopPropagation()),v.preventSystemEvent=x,x&&(this._isOverThreshold||m>=u)&&(this._dragged=r,this._isOverThreshold=!0,this._observer.change(this,v,it(this.axes,E))),c.prevEvent=v}},e._onPanend=function(t){var e=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(t),this._enabled&&0===n.getTouches(t,e)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,r=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[B(6,this._direction),B(l,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,r)}},e._attachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.addEventListener(t,e._onPanmove,st(t))})),null==t||t.end.forEach((function(t){window.addEventListener(t,e._onPanend,st(t))}))},e._detachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.removeEventListener(t,e._onPanmove)})),null==t||t.end.forEach((function(t){window.removeEventListener(t,e._onPanend)}))},e._getOffset=function(t,e){var n=this.options.scale;return[e[0]?t[0]*n[0]:0,e[1]?t[1]*n[1]:0]},e._getDistance=function(t,e){return Math.sqrt(Number(e[0])*Math.pow(t[0],2)+Number(e[1])*Math.pow(t[1],2))},e._attachElementEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(t){i.addEventListener(t,e._onPanstart)})),n.move.forEach((function(t){i.addEventListener(t,e._voidFunction)}))}},e._detachElementEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPanstart)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._voidFunction)}))),this.disable(),this._observer=null},t}(),lt=function(t){function e(e,n){var i=t.call(this,e,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}o(e,t);var n=e.prototype;return n.mapAxes=function(t){this._direction=ht.DIRECTION_ALL,this.axes=t},n._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventStart(t,n,i);if(s&&this.isEnabled()){var a=this.element.getBoundingClientRect();this._observer.hold(this,s),this._attachWindowEvent(r),this._coefficientForDistanceToAngle=360/(a.width*Math.PI),this._rotateOrigin=[a.left+(a.width-1)/2,a.top+(a.height-1)/2],this._prevAngle=null,this._triggerChange(s),r.prevEvent=s}},n._onPanmove=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventMove(t,n,i);s&&this.isEnabled()&&(!1!==s.srcEvent.cancelable&&s.srcEvent.preventDefault(),s.srcEvent.stopPropagation(),this._triggerChange(s),r.prevEvent=s)},n._onPanend=function(t){var e=this._activeEvent;if(e.onEventEnd(t),this.isEnabled()){var n=e.prevEvent;this._triggerChange(n);var i=n.velocityX,r=n.velocityY,s=Math.sqrt(i*i+r*r)*(this._lastDiff>0?-1:1);e.onRelease(),this._observer.release(this,n,[s*this._coefficientForDistanceToAngle]),this._detachWindowEvent(e)}},n._triggerChange=function(t){var e=this._getPosFromOrigin(t.center.x,t.center.y),n=e.x,i=e.y,r=X(n,i),s=r<0?360+r:r,a=this._getQuadrant(t.center.x,t.center.y),o=this._getDifference(this._prevAngle,s,this._prevQuadrant,a);this._prevAngle=s,this._prevQuadrant=a,0!==o&&(this._lastDiff=o,this._observer.change(this,t,it(this.axes,[-o])))},n._getDifference=function(t,e,n,i){return null===t?0:1===n&&4===i?-t-(360-e):4===n&&1===i?360-t+e:e-t},n._getPosFromOrigin=function(t,e){return{x:t-this._rotateOrigin[0],y:this._rotateOrigin[1]-e}},n._getQuadrant=function(t,e){var n=this._getPosFromOrigin(t,e),i=n.x,r=n.y,s=0;return i>=0&&r>=0?s=1:i<0&&r>=0?s=2:i<0&&r<0?s=3:i>=0&&r<0&&(s=4),s},e}(ct),vt=function(){function t(t,e){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=y(t),this.options=h({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},e),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._activeEvent&&this._detachEvent(),this._attachEvent(t),this._originalCssProps=j(this.element,this.options,30),this},e.disconnect=function(){return this._detachEvent(),L(this._originalCssProps)||N(this.element,this._originalCssProps),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onPinchStart=function(t){var e=this._activeEvent,n=e.onEventStart(t);n&&this._enabled&&2===e.getTouches(t)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,t),this._pinchFlag=!0,this._isOverThreshold=!1,e.prevEvent=n)},e._onPinchMove=function(t){var e=this.options.threshold,n=this._activeEvent,i=n.onEventMove(t);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(t)){var r=this._getDistance(i.scale),s=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||r>=e)&&(this._isOverThreshold=!0,this._observer.change(this,t,it(this.axes,[s]))),n.prevEvent=i}},e._onPinchEnd=function(t){var e=this._activeEvent;e.onEventEnd(t),!this._pinchFlag||!this._enabled||e.getTouches(t)>=2||(e.onRelease(),this._observer.release(this,t,[0],0),this._baseValue=null,this._pinchFlag=!1)},e._attachEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(t){i.addEventListener(t,e._onPinchStart,!1)})),n.move.forEach((function(t){i.addEventListener(t,e._onPinchMove,!1)})),n.end.forEach((function(t){i.addEventListener(t,e._onPinchEnd,!1)}))}},e._detachEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPinchStart,!1)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._onPinchMove,!1)})),null==e||e.end.forEach((function(e){n.removeEventListener(e,t._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},e._getOffset=function(t,e){return void 0===e&&(e=1),this._baseValue*(t-e)*this.options.scale},e._getDistance=function(t){return Math.abs(t-1)},t}(),ft=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({inputKey:[g],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},e),this._onWheel=this._onWheel.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=Y(!!t[1],!!t[0]),this.axes=t},e.connect=function(t){return this._detachEvent(),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onWheel=function(t){var e=this;if(this._enabled&&$(t,this.options.inputKey)){var n=this._getOffset([t.deltaY,t.deltaX],[B(l,this._direction),B(6,this._direction)]);0===n[0]&&0===n[1]||(t.preventDefault(),this._holding||(this._observer.hold(this,t),this._holding=!0),this._observer.change(this,t,it(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){e._holding&&(e._holding=!1,e._observer.release(e,t,[0]))}),this.options.releaseDelay))}},e._getOffset=function(t,e){var n=this.options.scale,i=this.options.useNormalized;return[e[0]&&t[0]?(t[0]>0?-1:1)*(i?1:Math.abs(t[0]))*n:0,e[1]&&t[1]?(t[1]>0?-1:1)*(i?1:Math.abs(t[1]))*n:0]},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("wheel",this._onWheel),this._enabled=!0},e._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},t}(),dt=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({scale:[1,1]},e),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onKeydown=function(t){if(this._enabled){var e=!0,n=1,i=-1;switch(t.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:e=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(e=!1),e){t.preventDefault();var r=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,t),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,t,it(this.axes,r))}}},e._onKeyup=function(t){var e=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){e._observer.release(e,t,[0,0]),e._holding=!1}),80))},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("keydown",this._onKeydown,!1),e.addEventListener("keypress",this._onKeydown,!1),e.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},e._detachEvent=function(){var t=this.element;t&&(t.removeEventListener("keydown",this._onKeydown,!1),t.removeEventListener("keypress",this._onKeydown,!1),t.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},t}(),_t={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(t){return new ht(t.axis,t.options)},on:function(t,e,n){t.on(e,n)},off:function(t,e,n){t.off(e,n)},destroy:function(t){t.destroy()}};const gt=ht},1091:(t,e,n)=>{n.r(e),n.d(e,{default:()=>a});var i=n(2784),r=n(2359),s=n(4458);function a(){const{connect:t,setAxis:e,offsetX:n,offsetY:a,rotateX:o,rotateY:u}=(0,r.eD)({offsetX:{range:[0,0],startPos:0},offsetY:{range:[-25,25],startPos:0},rotateX:{range:[0,360],circular:!0,startPos:40},rotateY:{range:[0,360],circular:!0,startPos:315}},{deceleration:.0024});return(0,i.useEffect)((()=>{const n=document.getElementById("area").getBoundingClientRect().width;e({offsetX:{range:[-n/4,n/4]}}),t("offsetX offsetY",new s.Ju("#area",{inputButton:["right"]})),t("rotateX rotateY",new s.Ju("#area")),t("rotateX rotateY",new s.f3("#area",{scale:[10,-10]}))}),[]),i.createElement("div",null,i.createElement("p",null,"You can rotate the cube using two axes."),i.createElement("div",{id:"area"},i.createElement("div",{id:"container",style:{transform:`translate3d(${n}px, ${a}px, 0)`}},i.createElement("div",{id:"box",style:{transform:`rotateY(${o}deg) rotateX(${u}deg)`}},i.createElement("div",{className:"face metal-linear",style:{transform:"rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px)"}},"1"),i.createElement("div",{className:"face metal-linear",style:{transform:"rotateY(-90deg) translate3d(0px,-50px,100px)"}},"2"),i.createElement("div",{className:"face metal-linear",style:{transform:"rotateY(90deg) translate3d(0px,-50px,0px)"}},"3"),i.createElement("div",{className:"face metal-linear",style:{transform:"rotateX(90deg) translate3d(-50px,0px,100px)"}},"4"),i.createElement("div",{className:"face metal-linear",style:{transform:"rotateY(180deg) translate3d(50px,-50px,50px)"}},"5"),i.createElement("div",{className:"face metal-linear",style:{transform:"rotateX(-90deg) translate3d(-50px,0px,0px)"}},"6")))))}},2359:(t,e,n)=>{n.d(e,{eD:()=>a});var i=n(4458),r=n(3566),s=function(){return s=Object.assign||function(t){for(var e,n=1,i=arguments.length;n{n.d(e,{HA:()=>vt,Ju:()=>ct,ZP:()=>pt,cD:()=>_t,f3:()=>ft,nj:()=>dt,zV:()=>lt});var i=n(5161),s=n(1588),r=n(5362),a=function(t,e){return a=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])},a(t,e)};function o(t,e){function n(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var h,u=function(){return u=Object.assign||function(t){for(var e,n=1,i=arguments.length;n=0;o--)(s=t[o])&&(a=(r<3?s(a):r>3?s(e,n,a):s(e,n))||a);return r>3&&a&&Object.defineProperty(e,n,a),a}h="undefined"==typeof window?{navigator:{userAgent:""}}:window;var l=24,d="left",v="right",f="middle",_={1:d,2:f,3:v},p="any",g="ontouchstart"in h&&"safari"===(0,i.ZP)().browser.name,m=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=t,n=x(i.childNodes)}else n=x(document.querySelectorAll(t));e||(n=n.length>=1?n[0]:void 0)}else t===h?n=t:"value"in t||"current"in t?n=t.value||t.current:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in h&&t instanceof jQuery||t.constructor.prototype.jquery?n=e?t.toArray():t.get(0):Array.isArray(t)&&(n=t.map((function(t){return b(t)})),e||(n=n.length>=1?n[0]:void 0)):n=t;return n},y=h.requestAnimationFrame||h.webkitRequestAnimationFrame,M=h.cancelAnimationFrame||h.webkitCancelAnimationFrame;if(y&&!M){var P={},T=y;y=function(t){var e=T((function(n){P[e]&&t(n)}));return P[e]=!0,e},M=function(t){delete P[t]}}else y&&M||(y=function(t){return h.setTimeout((function(){t(h.performance&&h.performance.now&&h.performance.now()||(new Date).getTime())}),16)},M=h.clearTimeout);var w=function(t,e){var n={};for(var i in t)i&&(n[i]=e(t[i],i));return n},O=function(t,e){var n={};for(var i in t)i&&e(t[i],i)&&(n[i]=t[i]);return n},D=function(t,e){for(var n in t)if(n&&!e(t[n],n))return!1;return!0},A=function(t,e){return D(t,(function(t,n){return t===e[n]}))},I={},C=function(t,e){return I[e]||(I[e]=Y(e)),I[e](t)},k=function(t,e){return t&&e?w(t,(function(t,n){return C(t,"number"==typeof e?e:e[n])})):t},S=function(t){if(!isFinite(t))return 0;var e="".concat(t);if(e.indexOf("e")>=0){for(var n=0,i=1;Math.round(t*i)/i!==t;)i*=10,n++;return n}return e.indexOf(".")>=0?e.length-e.indexOf(".")-1:0},Y=function(t){var e=t<1?Math.pow(10,S(t)):1;return function(n){return 0===t?0:Math.round(Math.round(n/t)*t*e)/e}},R=function(t,e){return 180*Math.atan2(e,t)/Math.PI},X=function(t){var e=!0;return Object.keys(E).forEach((function(n){t&&t[n]===E[n]||(e=!1)})),e},L=function(t,e){return t&&e?30:t?6:e?l:1},B=function(t,e,n){return n?!!(30===e||e&t&&n&t):!!(e&t)},N=function(t,e,n){var i,s=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),r={};if(t&&t.style){var a=e.touchAction?e.touchAction:s[n],o=u(u({},E),{"touch-action":"none"===t.style["touch-action"]?"none":a});Object.keys(o).forEach((function(e){r[e]=t.style[e]})),Object.keys(o).forEach((function(e){t.style[e]=o[e]}))}return r},F=function(t,e){t&&t.style&&e&&Object.keys(e).forEach((function(n){t.style[n]=e[n]}))},j=function(){function t(t){this._axes=t,this.holdingCount=0}var e=t.prototype;return e.hold=function(t,e){var n=this._getRoundPos(t).roundPos;this._axes.trigger(new s.L("hold",{pos:n,input:e.input||null,inputEvent:e.event||null,isTrusted:!0}))},e.triggerRelease=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration),this._axes.trigger(new s.L("release",u(u({},t),{bounceRatio:this._getBounceRatio(n)})))},e.triggerChange=function(t,e,n,i){var a=this;void 0===i&&(i=!1);var o=this.animationManager,h=o.axisManager,u=o.getEventInfo(),c=this._getRoundPos(t,e),l=c.roundPos,d=c.roundDepa,v=h.moveTo(l,d),f=(null==n?void 0:n.event)||(null==u?void 0:u.event)||null,_={pos:v.pos,delta:v.delta,bounceRatio:this._getBounceRatio(v.pos),holding:i,inputEvent:f,isTrusted:!!f,input:(null==n?void 0:n.input)||(null==u?void 0:u.input)||null,set:f?this._createUserControll(v.pos):function(){}},p=new s.L("change",_);return this._axes.trigger(p),Object.keys(v.pos).forEach((function(t){var e=v.pos[t];(0,r.CV)(a._axes,t,e).current=e})),f&&h.set(_.set().destPos),!p.isCanceled()},e.triggerAnimationStart=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration);var r=new s.L("animationStart",t);return this._axes.trigger(r),!r.isCanceled()},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this._axes.trigger(new s.L("animationEnd",{isTrusted:t}))},e.triggerFinish=function(t){void 0===t&&(t=!1),this._axes.trigger(new s.L("finish",{isTrusted:t}))},e.setAnimationManager=function(t){this.animationManager=t},e.destroy=function(){this._axes.off()},e._createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:u({},t),duration:e};return function(t,e){return t&&(n.destPos=u({},t)),void 0!==e&&(n.duration=e),n}},e._getRoundPos=function(t,e){var n=this._axes.options.round;return{roundPos:k(t,n),roundDepa:k(e,n)}},e._getBounceRatio=function(t){return this._axes.axisManager.map(t,(function(t,e){return te.range[1]&&0!==e.bounce[1]?(t-e.range[1])/e.bounce[1]:0}))},c([r.cn],t.prototype,"holdingCount",void 0),t}(),z=function(){function t(t){this._options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this._options.interruptable||this._prevented},e.isInterrupted=function(){return!this._options.interruptable&&this._prevented},e.setInterrupt=function(t){this._options.interruptable||(this._prevented=t)},t}(),K=function(t,e,n,i){var s=t,r=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return s=Math.max(r[0],s),s=Math.min(r[1],s)},W=function(t,e){return te[1]},V=function(t,e,n){return n[1]&&t>e[1]||n[0]&&tr&&(i=(i-r)%a+s),n[0]&&t-1||e.indexOf("none")>-1&&!t.shiftKey&&!t.ctrlKey&&!t.altKey&&!t.metaKey||e.indexOf("shift")>-1&&t.shiftKey||e.indexOf("ctrl")>-1&&t.ctrlKey||e.indexOf("alt")>-1&&t.altKey||e.indexOf("meta")>-1&&t.metaKey)},G=function(){function t(){var t=this;this._stopContextMenu=function(e){e.preventDefault(),h.removeEventListener("contextmenu",t._stopContextMenu)}}var e=t.prototype;return e.extendEvent=function(t){var e,n=this.prevEvent,i=this._getCenter(t),s=n?this._getMovement(t):{x:0,y:0},r=n?this._getScale(t):1,a=n?R(i.x-n.center.x,i.y-n.center.y):0,o=n?n.deltaX+s.x:s.x,h=n?n.deltaY+s.y:s.y,u=s.x,c=s.y,l=this._latestInterval,d=Date.now(),v=l?d-l.timestamp:0,f=n?n.velocityX:0,_=n?n.velocityY:0;return(!l||v>=16)&&(l&&(f=(e=[(o-l.deltaX)/v,(h-l.deltaY)/v])[0],_=e[1]),this._latestInterval={timestamp:d,deltaX:o,deltaY:h}),{srcEvent:t,scale:r,angle:a,center:i,deltaX:o,deltaY:h,offsetX:u,offsetY:c,velocityX:f,velocityY:_,preventSystemEvent:!0}},e._getDistance=function(t,e){var n=e.clientX-t.clientX,i=e.clientY-t.clientY;return Math.sqrt(n*n+i*i)},e._getButton=function(t){var e={1:d,2:v,4:f},n=this._isTouchEvent(t)?d:e[t.buttons];return n||null},e._isTouchEvent=function(t){return t.type&&t.type.indexOf("touch")>-1},e._isValidButton=function(t,e){return e.indexOf(t)>-1},e._isValidEvent=function(t,e,n){return(!e||H(t,e))&&(!n||this._isValidButton(this._getButton(t),n))},e._preventMouseButton=function(t,e){e===v?h.addEventListener("contextmenu",this._stopContextMenu):e===f&&t.preventDefault()},t}(),J=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown"],e.move=["mousemove"],e.end=["mouseup"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(t,e){return e&&this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},e}(G),tt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["touchstart"],e.move=["touchmove"],e.end=["touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e){return this._baseTouches=t.touches,this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventMove=function(t,e){return this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventEnd=function(t){this._baseTouches=t.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t){return t.touches.length},n._getScale=function(t){return 2!==t.touches.length||this._baseTouches.length<2?null:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(t){return{x:t.touches[0].clientX,y:t.touches[0].clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.touches[0].identifier!==e.touches[0].identifier?{x:0,y:0}:{x:t.touches[0].clientX-e.touches[0].clientX,y:t.touches[0].clientY-e.touches[0].clientY}},e}(G),et=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=Z?["pointerdown"]:["MSPointerDown"],e.move=Z?["pointermove"]:["MSPointerMove"],e.end=Z?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],e._firstInputs=[],e._recentInputs=[],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?(this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventEnd=function(t){this._removePointerEvent(t)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.pointerId!==e.pointerId?{x:0,y:0}:{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},n._updatePointerEvent=function(t){var e=this,n=!1;this._recentInputs.forEach((function(i,s){i.pointerId===t.pointerId&&(n=!0,e._recentInputs[s]=t)})),n||(this._firstInputs.push(t),this._recentInputs.push(t))},n._removePointerEvent=function(t){this._firstInputs=this._firstInputs.filter((function(e){return e.pointerId!==t.pointerId})),this._recentInputs=this._recentInputs.filter((function(e){return e.pointerId!==t.pointerId}))},e}(G),nt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown","touchstart"],e.move=["mousemove","touchmove"],e.end=["mouseup","touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isTouchEvent(t)&&(this._baseTouches=t.touches),this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(t){this._isTouchEvent(t)&&(this._baseTouches=t.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t,e){return this._isTouchEvent(t)?t.touches.length:this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(t){return this._isTouchEvent(t)?2!==t.touches.length||this._baseTouches.length<2?1:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(t){return this._isTouchEvent(t)?{x:t.touches[0].clientX,y:t.touches[0].clientY}:{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this,n=[t,this.prevEvent.srcEvent].map((function(t){return e._isTouchEvent(t)?{id:t.touches[0].identifier,x:t.touches[0].clientX,y:t.touches[0].clientY}:{id:null,x:t.clientX,y:t.clientY}})),i=n[0],s=n[1];return i.id===s.id?{x:i.x-s.x,y:i.y-s.y}:{x:0,y:0}},e}(G),it=function(t,e){return e.reduce((function(e,n,i){return t[i]&&(e[t[i]]=n),e}),{})},st=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach((function(t){switch(t){case"mouse":n=!0;break;case"touch":e=Q;break;case"pointer":i=$}})),i?new et:e&&n?new nt:e?new tt:n?new J:null};function rt(t){return t.indexOf("touch")>-1&&{passive:!1}}var at=function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,s=t.axisManager,r=t.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=e,this._interruptManager=n,this._eventManager=i,this._axisManager=s,this._animationManager=r}var e=t.prototype;return e.get=function(t){return this._axisManager.get(t.axes)},e.hold=function(t,e){if(!this._interruptManager.isInterrupted()&&t.axes.length){var n={input:t,event:e};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(t.axes),this._moveDistance=this._axisManager.get(t.axes)}},e.change=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(t){return 0===t}))){var s=e.srcEvent?e.srcEvent:e;if(!s.__childrenAxesAlreadyChanged){var r,a=this._moveDistance||this._axisManager.get(t.axes);r=w(a,(function(t,e){return t+(n[e]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(r,(function(t,e){var n=e.circular,i=e.range;return n&&(n[0]||n[1])?U(t,i,n):t}))),this._isOutside&&this._axisManager.every(a,(function(t,e){return!W(t,e.range)}))&&(this._isOutside=!1),a=this._atOutside(a),r=this._atOutside(r),this.options.nested&&this._isEndofAxis(n,a,r)||(s.__childrenAxesAlreadyChanged=!0);var o={input:t,event:e};if(i){var h=this._animationManager.getDuration(r,a);this._animationManager.animateTo(r,h,o)}else{!this._eventManager.triggerChange(r,a,o,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},e.release=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var s=e.srcEvent?e.srcEvent:e;s.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var r=this._axisManager.get(t.axes),a=this._axisManager.get(),o=this._animationManager.getDisplacement(n),h=it(t.axes,o),c=this._axisManager.get(this._axisManager.map(h,(function(t,e,n){return e.circular&&(e.circular[0]||e.circular[1])?r[n]+t:K(r[n]+t,e.range,e.circular,e.bounce)})));s.__childrenAxesAlreadyReleased=!0;var l=this._animationManager.getDuration(c,r,i);0===l&&(c=u({},a));var d={depaPos:a,destPos:c,duration:l,delta:this._axisManager.getDelta(a,c),inputEvent:e,input:t,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(d),0===this._eventManager.holdingCount&&(this._moveDistance=null);var v=this._animationManager.getUserControl(d),f=A(v.destPos,a),_={input:t,event:e};f||0===v.duration?(f||this._eventManager.triggerChange(v.destPos,a,_,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(_):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(v.destPos,v.duration,_)}},e._atOutside=function(t){var e=this;return this._isOutside?this._axisManager.map(t,(function(t,e){var n=e.range[0]-e.bounce[0],i=e.range[1]+e.bounce[1];return t>i?i:ts?t:ts?s+e._animationManager.interpolate(t-s,r[1]):t}))},e._isEndofAxis=function(t,e,n){return this._axisManager.every(e,(function(i,s,r){return 0===t[r]||e[r]===n[r]&&(a=i,o=s.range,h=s.bounce,!(u=s.circular)[0]&&a===o[0]-h[0]||!u[1]&&a===o[1]+h[1]);var a,o,h,u}))},t}(),ot=function(t,e,n){return Math.max(Math.min(t,n),e)},ht=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._useDuration=!0,e}o(e,t);var n=e.prototype;return n.interpolate=function(t,e){var n=this._easing(1e-5)/1e-5;return this._easing(t/(e*n))*e},n.updateAnimation=function(t){var e,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,s=(null==t?void 0:t.destPos)||n.destPos,r=null!==(e=null==t?void 0:t.duration)&&void 0!==e?e:n.duration;if((null==t?void 0:t.restart)||r<=i)this.setTo(s,r-i);else{if(null==t?void 0:t.destPos){var a=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(a,s),n.destPos=s}if(null==t?void 0:t.duration){var o=(i+this._durationOffset)/n.duration;this._durationOffset=o*r-i,n.duration=r}}}},n._initState=function(t){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:t.depaPos,easingPer:0,finished:!1}},n._getNextState=function(t){var e=this,n=this._animateParam,i=t.pos,s=n.destPos,r=w(i,(function(t,e){return t<=s[e]?1:-1})),a=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,o=this._easing(a),h=this.axisManager.map(i,(function(t,h,u){var c=a>=1?s[u]:t+n.delta[u]*(o-e._prevEasingPer)/(1-e._initialEasingPer),l=U(c,h.range,h.circular);if(c!==l){var d=r[u]*(h.range[1]-h.range[0]);s[u]-=d,i[u]-=d}return l}));return this._prevEasingPer=o,{pos:h,easingPer:o,finished:o>=1}},n._easing=function(t){return t>1?1:this._options.easing(t)},e}(function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,s=t.axisManager;this._options=e,this.interruptManager=n,this.eventManager=i,this.axisManager=s,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(t,e,n){var i,s=this;if(void 0!==n)i=n;else{var r=w(e,(function(e,n){return function(t,e){var n=Math.sqrt(t/e*2);return n<100?0:n}(Math.abs(e-t[n]),s._options.deceleration)}));i=Object.keys(r).reduce((function(t,e){return Math.max(t,r[e])}),-1/0)}return ot(i,this._options.minimumDuration,this._options.maximumDuration)},e.getDisplacement=function(t){var e=Math.pow(t.reduce((function(t,e){return t+e*e}),0),1/t.length),n=Math.abs(e/-this._options.deceleration);return t.map((function(t){return t/2*n}))},e.stopAnimation=function(t){if(this._animateParam){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return U(t,e.range,e.circular)}));D(n,(function(t,n){return e[n]===t}))||this.eventManager.triggerChange(n,e,t,!!t),this._animateParam=null,this._raf&&(i=this._raf,M(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==t?void 0:t.event))}var i},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return Math.min(e.range[1],Math.max(e.range[0],t))}));this.stopAnimation(),this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axisManager.filter(this.axisManager.get(),(function(t,e){return V(t,e.range,e.circular)}));Object.keys(e).length>0&&this.setTo(this.axisManager.map(e,(function(t,e){return U(t,e.range,e.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!t),this.axisManager.isOutside()?this.restore(t):this.finish(!!t)},e.finish=function(t){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(t)},e.getUserControl=function(t){var e=t.setTo();return e.destPos=this.axisManager.get(e.destPos),e.duration=ot(e.duration,this._options.minimumDuration,this._options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this;this.stopAnimation();var s=this._createAnimationParam(t,e,n),r=u({},s.depaPos),a=this.eventManager.triggerAnimationStart(s),o=this.getUserControl(s);if(!a&&this.axisManager.every(o.destPos,(function(t,e){return V(t,e.range,e.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),a&&!A(o.destPos,r)){var h=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:r,destPos:o.destPos,duration:o.duration,delta:this.axisManager.getDelta(r,o.destPos),isTrusted:!!h,inputEvent:h,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},e.setTo=function(t,e){void 0===e&&(e=0);var n=Object.keys(t),i=this.axisManager.get(n);if(A(t,i))return this;this.interruptManager.setInterrupt(!0);var s=O(t,(function(t,e){return i[e]!==t}));return Object.keys(s).length?(s=this.axisManager.map(s,(function(t,e){var n=e.range,i=e.circular;return i&&(i[0]||i[1])?t:K(t,n,i)})),A(s,i)||(e>0?this.animateTo(s,e):(this.stopAnimation(),this.eventManager.triggerChange(s),this.finish(!1))),this):this},e.setBy=function(t,e){return void 0===e&&(e=0),this.setTo(w(this.axisManager.get(Object.keys(t)),(function(e,n){return e+t[n]})),e)},e.setOptions=function(t){this._options=u(u({},this._options),t)},e._createAnimationParam=function(t,e,n){var i=this.axisManager.get(),s=t,r=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:s,duration:ot(e,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,s),inputEvent:r,input:(null==n?void 0:n.input)||null,isTrusted:!!r,done:this.animationEnd}},e._animateLoop=function(t,e){var n=this;if(t.duration){this._animateParam=u(u({},t),{startTime:(new Date).getTime()});var i=w(t.destPos,(function(t){return t})),s=this._initState(this._animateParam),r=function(){n._raf=null;var t=n._animateParam,a=n._getNextState(s),o=!n.eventManager.triggerChange(a.pos,s.pos);if(s=a,a.finished)return t.destPos=n._getFinalPos(t.destPos,i),A(t.destPos,n.axisManager.get(Object.keys(t.destPos)))||n.eventManager.triggerChange(t.destPos,a.pos),void e();o?n.finish(!1):n._raf=y(r)};r()}else this.eventManager.triggerChange(t.destPos),e()},e._getFinalPos=function(t,e){var n=this,i=1e-6;return w(t,(function(t,s){if(t>=e[s]-i&&t<=e[s]+i)return e[s];var r=n._getRoundUnit(t,s);return C(t,r)}))},e._getRoundUnit=function(t,e){var n,i=this._options.round,s=null;if(!i){var r=this.axisManager.getAxisOptions(e);n=Math.max(S(r.range[0]),S(r.range[1]),S(t)),s=1/Math.pow(10,n)}return s||i},t}()),ut=function(t){function e(e,n,i){void 0===e&&(e={}),void 0===n&&(n={}),void 0===i&&(i={});var s=t.call(this)||this;return s.axis=e,s._inputs=[],s.options=u({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(t){s.axis[t].startPos=i[t]})),s.interruptManager=new z(s.options),s.axisManager=new q(s.axis),s.eventManager=new j(s),s.animationManager=new ht(s),s.inputObserver=new at(s),s.eventManager.setAnimationManager(s.animationManager),s.eventManager.triggerChange(s.axisManager.get()),s}o(e,t);var n=e.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(t,e){var n;return n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),e.mapAxes(n),e.connect(this.inputObserver),this._inputs.push(e),this},n.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);e>=0&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach((function(t){return t.disconnect()})),this._inputs=[];return this},n.get=function(t){return this.axisManager.get(t)},n.setTo=function(t,e){return void 0===e&&(e=0),this.animationManager.setTo(t,e),this},n.setBy=function(t,e){return void 0===e&&(e=0),this.animationManager.setBy(t,e),this},n.setOptions=function(t){return this.options=u(u({},this.options),t),this.animationManager.setOptions(t),this},n.setAxis=function(t){return this.axisManager.setAxis(t),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(t){return this.animationManager.updateAnimation(t),this},n.isBounceArea=function(t){return this.axisManager.isOutside(t)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},e.VERSION="3.9.1",e.TRANSFORM=m,e.DIRECTION_NONE=1,e.DIRECTION_LEFT=2,e.DIRECTION_RIGHT=4,e.DIRECTION_UP=8,e.DIRECTION_DOWN=16,e.DIRECTION_HORIZONTAL=6,e.DIRECTION_VERTICAL=l,e.DIRECTION_ALL=30,c([r.D0],e.prototype,"holding",null),e=c([r.kU],e)}(s.Z),ct=function(){function t(t,e){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(t){n._dragged&&(t.preventDefault(),t.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=b(t),this.options=u({inputType:["touch","mouse","pointer"],inputKey:[p],inputButton:[d],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},e),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=L(!!t[0],!!t[1]),this.axes=t},e.connect=function(t){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(t),this},e.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=N(this.element,this.options,this._direction)),this},e.disable=function(){return this._enabled&&(this._enabled=!1,X(this._originalCssProps)||F(this.element,this._originalCssProps)),this},e.isEnabled=function(){return this._enabled},e.release=function(){var t=this._activeEvent,e=t.prevEvent;return t.onRelease(),this._observer.release(this,e,[0,0]),this._detachWindowEvent(t),this},e._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,s=e.preventDefaultOnDrag,r=this._activeEvent,a=r.onEventStart(t,n,i);if(a&&this._enabled&&!(r.getTouches(t,i)>1)&&!1!==a.srcEvent.cancelable){var o=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,a),this._atRightEdge=g&&a.center.x>window.innerWidth-o,this._attachWindowEvent(r),s&&"touchstart"!==a.srcEvent.type&&a.srcEvent.preventDefault(),r.prevEvent=a}},e._onPanmove=function(t){var e=this,n=this.options,i=n.iOSEdgeSwipeThreshold,s=n.preventClickOnDrag,r=n.releaseOnScroll,a=n.inputKey,o=n.inputButton,h=n.threshold,u=n.thresholdAngle,c=this._activeEvent,d=c.onEventMove(t,a,o),v=c.getTouches(t,o);if(0===v||r&&d&&!d.srcEvent.cancelable)this._onPanend(t);else if(d&&this._enabled&&!(v>1)){var f=function(t,e){if(e<0||e>90)return 1;var n=Math.abs(t);return n>e&&n<180-e?l:6}(d.angle,u),_=B(6,this._direction,f),p=B(l,this._direction,f);if(c.prevEvent&&g){if(d.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),d.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return e.release()}),100))}var m=this._getDistance([d.deltaX,d.deltaY],[_,p]),E=this._getOffset([d.offsetX,d.offsetY],[_,p]),x=E.some((function(t){return 0!==t}));x&&(!1!==d.srcEvent.cancelable&&d.srcEvent.preventDefault(),d.srcEvent.stopPropagation()),d.preventSystemEvent=x,x&&(this._isOverThreshold||m>=h)&&(this._dragged=s,this._isOverThreshold=!0,this._observer.change(this,d,it(this.axes,E))),c.prevEvent=d}},e._onPanend=function(t){var e=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(t),this._enabled&&0===n.getTouches(t,e)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,s=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[B(6,this._direction),B(l,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,s)}},e._attachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.addEventListener(t,e._onPanmove,rt(t))})),null==t||t.end.forEach((function(t){window.addEventListener(t,e._onPanend,rt(t))}))},e._detachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.removeEventListener(t,e._onPanmove)})),null==t||t.end.forEach((function(t){window.removeEventListener(t,e._onPanend)}))},e._getOffset=function(t,e){var n=this.options.scale;return[e[0]?t[0]*n[0]:0,e[1]?t[1]*n[1]:0]},e._getDistance=function(t,e){return Math.sqrt(Number(e[0])*Math.pow(t[0],2)+Number(e[1])*Math.pow(t[1],2))},e._attachElementEvent=function(t){var e=this,n=st(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(t){i.addEventListener(t,e._onPanstart)})),n.move.forEach((function(t){i.addEventListener(t,e._voidFunction)}))}},e._detachElementEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPanstart)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._voidFunction)}))),this.disable(),this._observer=null},t}(),lt=function(t){function e(e,n){var i=t.call(this,e,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}o(e,t);var n=e.prototype;return n.mapAxes=function(t){this._direction=ut.DIRECTION_ALL,this.axes=t},n._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,s=this._activeEvent,r=s.onEventStart(t,n,i);if(r&&this.isEnabled()){var a=this.element.getBoundingClientRect();this._observer.hold(this,r),this._attachWindowEvent(s),this._coefficientForDistanceToAngle=360/(a.width*Math.PI),this._rotateOrigin=[a.left+(a.width-1)/2,a.top+(a.height-1)/2],this._prevAngle=null,this._triggerChange(r),s.prevEvent=r}},n._onPanmove=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,s=this._activeEvent,r=s.onEventMove(t,n,i);r&&this.isEnabled()&&(!1!==r.srcEvent.cancelable&&r.srcEvent.preventDefault(),r.srcEvent.stopPropagation(),this._triggerChange(r),s.prevEvent=r)},n._onPanend=function(t){var e=this._activeEvent;if(e.onEventEnd(t),this.isEnabled()){var n=e.prevEvent;this._triggerChange(n);var i=n.velocityX,s=n.velocityY,r=Math.sqrt(i*i+s*s)*(this._lastDiff>0?-1:1);e.onRelease(),this._observer.release(this,n,[r*this._coefficientForDistanceToAngle]),this._detachWindowEvent(e)}},n._triggerChange=function(t){var e=this._getPosFromOrigin(t.center.x,t.center.y),n=e.x,i=e.y,s=R(n,i),r=s<0?360+s:s,a=this._getQuadrant(t.center.x,t.center.y),o=this._getDifference(this._prevAngle,r,this._prevQuadrant,a);this._prevAngle=r,this._prevQuadrant=a,0!==o&&(this._lastDiff=o,this._observer.change(this,t,it(this.axes,[-o])))},n._getDifference=function(t,e,n,i){return null===t?0:1===n&&4===i?-t-(360-e):4===n&&1===i?360-t+e:e-t},n._getPosFromOrigin=function(t,e){return{x:t-this._rotateOrigin[0],y:this._rotateOrigin[1]-e}},n._getQuadrant=function(t,e){var n=this._getPosFromOrigin(t,e),i=n.x,s=n.y,r=0;return i>=0&&s>=0?r=1:i<0&&s>=0?r=2:i<0&&s<0?r=3:i>=0&&s<0&&(r=4),r},e}(ct),dt=function(){function t(t,e){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=b(t),this.options=u({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},e),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._activeEvent&&this._detachEvent(),this._attachEvent(t),this._originalCssProps=N(this.element,this.options,30),this},e.disconnect=function(){return this._detachEvent(),X(this._originalCssProps)||F(this.element,this._originalCssProps),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onPinchStart=function(t){var e=this._activeEvent,n=e.onEventStart(t);n&&this._enabled&&2===e.getTouches(t)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,t),this._pinchFlag=!0,this._isOverThreshold=!1,e.prevEvent=n)},e._onPinchMove=function(t){var e=this.options.threshold,n=this._activeEvent,i=n.onEventMove(t);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(t)){var s=this._getDistance(i.scale),r=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||s>=e)&&(this._isOverThreshold=!0,this._observer.change(this,t,it(this.axes,[r]))),n.prevEvent=i}},e._onPinchEnd=function(t){var e=this._activeEvent;e.onEventEnd(t),!this._pinchFlag||!this._enabled||e.getTouches(t)>=2||(e.onRelease(),this._observer.release(this,t,[0],0),this._baseValue=null,this._pinchFlag=!1)},e._attachEvent=function(t){var e=this,n=st(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(t){i.addEventListener(t,e._onPinchStart,!1)})),n.move.forEach((function(t){i.addEventListener(t,e._onPinchMove,!1)})),n.end.forEach((function(t){i.addEventListener(t,e._onPinchEnd,!1)}))}},e._detachEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPinchStart,!1)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._onPinchMove,!1)})),null==e||e.end.forEach((function(e){n.removeEventListener(e,t._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},e._getOffset=function(t,e){return void 0===e&&(e=1),this._baseValue*(t-e)*this.options.scale},e._getDistance=function(t){return Math.abs(t-1)},t}(),vt=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=b(t),this.options=u({inputKey:[p],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},e),this._onWheel=this._onWheel.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=L(!!t[1],!!t[0]),this.axes=t},e.connect=function(t){return this._detachEvent(),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onWheel=function(t){var e=this;if(this._enabled&&H(t,this.options.inputKey)){var n=this._getOffset([t.deltaY,t.deltaX],[B(l,this._direction),B(6,this._direction)]);0===n[0]&&0===n[1]||(t.preventDefault(),this._holding||(this._observer.hold(this,t),this._holding=!0),this._observer.change(this,t,it(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){e._holding&&(e._holding=!1,e._observer.release(e,t,[0]))}),this.options.releaseDelay))}},e._getOffset=function(t,e){var n=this.options.scale,i=this.options.useNormalized;return[e[0]&&t[0]?(t[0]>0?-1:1)*(i?1:Math.abs(t[0]))*n:0,e[1]&&t[1]?(t[1]>0?-1:1)*(i?1:Math.abs(t[1]))*n:0]},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("wheel",this._onWheel),this._enabled=!0},e._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},t}(),ft=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=b(t),this.options=u({scale:[1,1]},e),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onKeydown=function(t){if(this._enabled){var e=!0,n=1,i=-1;switch(t.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:e=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(e=!1),e){t.preventDefault();var s=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,t),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,t,it(this.axes,s))}}},e._onKeyup=function(t){var e=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){e._observer.release(e,t,[0,0]),e._holding=!1}),80))},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("keydown",this._onKeydown,!1),e.addEventListener("keypress",this._onKeydown,!1),e.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},e._detachEvent=function(){var t=this.element;t&&(t.removeEventListener("keydown",this._onKeydown,!1),t.removeEventListener("keypress",this._onKeydown,!1),t.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},t}(),_t={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(t){return new ut(t.axis,t.options)},on:function(t,e,n){t.on(e,n)},off:function(t,e,n){t.off(e,n)},destroy:function(t){t.destroy()}};const pt=ut},3943:(t,e,n)=>{n.r(e),n.d(e,{default:()=>f});var i,s,r,a,o,h,u,c=n(2784),l=n(4458);function d(){return d=Object.assign?Object.assign.bind():function(t){for(var e=1;e{let{title:e,titleId:n,...l}=t;return c.createElement("svg",d({id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:0,y:0,viewBox:"0 0 61.2 101",style:{enableBackground:"new 0 0 61.2 101"},xmlSpace:"preserve","aria-labelledby":n},l),e?c.createElement("title",{id:n},e):null,i||(i=c.createElement("style",null,".st0{fill:#fff}.st1{fill:#f5c720}")),s||(s=c.createElement("path",{className:"st0",d:"M17.4 91.9c-.8 1.1-2.1 1.8-3.6 1.8-2 0-3.4-1.2-3.7-3.2h9.5v-.1c0-4.4-3.1-6.7-6.2-6.7-1.5 0-3 .6-4.2 1.7-1.2 1.1-1.9 2.7-1.9 4.5 0 3.6 2.7 6.1 6.4 6.1 2.5 0 4.5-1.1 5.8-3l.1-.1-2.2-1zm-7.2-3.3c.4-1.7 1.6-2.8 3.3-2.8 1.7 0 3.1 1.2 3.5 2.8h-6.8zM31.1 85.4c-1.2-1.1-2.4-1.6-3.9-1.6-3.2 0-5.8 2.7-5.8 6.2s2.4 6 5.7 6c1.5 0 3-.7 4-1.7v1.4c0 2.4-2.2 3.1-3.5 3.1-1.1 0-2.2-.4-3.1-1.1l-.1-.1-1.6 1.8.1.1c1.5 1.1 2.8 1.5 4.5 1.5 2.9 0 6.2-1.4 6.2-5.4v-9.3h2V84h-4.5v1.4zm-3.5 8.3c-2 0-3.4-1.6-3.4-3.8 0-2.1 1.5-3.8 3.5-3.8s3.5 1.6 3.5 3.8c-.1 2.2-1.6 3.8-3.6 3.8z"})),r||(r=c.createElement("path",{className:"st1",d:"M37.8 86.2h1.8v9.9c0 1.6-.5 2.2-1.9 2.2-.4 0-.6 0-1.1-.1h-.2v2.3h.1c.5.1.9.1 1.3.1 4.2 0 4.2-2.9 4.2-5.3V84h-4.3v2.2z"})),a||(a=c.createElement("circle",{className:"st1",cx:40.7,cy:80.3,r:1.5})),o||(o=c.createElement("path",{className:"st1",d:"M52.9 89.8c-.9-.9-2.4-1.1-3.7-1.3-1.5-.2-2.5-.4-2.5-1.2 0-.8.7-1.3 1.9-1.3 1.1 0 1.9.4 2.5 1.3v.7h2.2v-4h-2.2v.4c-.7-.4-1.7-.6-2.6-.6-2.4 0-4.1 1.5-4.1 3.5 0 .8.3 1.7.9 2.3 1.1 1.1 2.6 1.3 3.8 1.5 1.5.2 2.3.4 2.3 1.3 0 .8-.9 1.3-2.2 1.3-1.4 0-2.4-.7-2.6-1.7v-.5h-2.3v4.2h2.3v-.5c.8.5 1.7.7 2.8.7 2.7 0 4.5-1.4 4.5-3.6 0-1-.3-1.9-1-2.5zM32.5 15.2c.2-1.5-.1-3.1-.8-4.5l-1.2-2.2c-1.1-2-.4-4.4 1.6-5.5.8-.4 1.1-1.4.6-2.2-.4-.8-1.4-1.1-2.2-.6-3.5 1.9-4.8 6.4-2.8 9.9l1.2 2.2c.5.9.6 2 .4 3 .5.1.9.2 1.4.4.5-.3 1.2-.4 1.8-.5zM22.2 65c-.1.6-.2 1.3-.2 1.9 0 4.7 3.8 8.5 8.5 8.5s8.5-3.8 8.5-8.5c0-.6-.1-1.2-.2-1.8-2.5 1.2-5.3 1.8-8.2 1.8-3 0-5.9-.6-8.4-1.9zM6.5 28.5c-.3 0-.5-.1-.8-.1-3.1 0-5.7 2.5-5.7 5.7 0 3.1 2.5 5.7 5.7 5.7.3 0 .6 0 .8-.1-.5-1.8-.8-3.7-.8-5.6 0-2 .3-3.9.8-5.6zM55.6 28.4c-.3 0-.6 0-.8.1.5 1.8.8 3.7.8 5.6 0 1.9-.3 3.8-.8 5.6.3 0 .5.1.8.1 3.1 0 5.7-2.5 5.7-5.7-.1-3.2-2.6-5.7-5.7-5.7zM47.6 34.1c0-6.3-5.1-11.3-11.3-11.3-2.1 0-4 .6-5.7 1.5-1.7-1-3.6-1.5-5.7-1.5-6.3 0-11.3 5.1-11.3 11.3 0 4.4 2.5 8.2 6.2 10.1-.4 1.1-.5 2.3-.5 3.5C19.3 54 24.4 59 30.6 59 36.9 59 42 53.9 42 47.7c0-1.2-.2-2.4-.5-3.5 3.6-1.9 6.1-5.7 6.1-10.1z"})),h||(h=c.createElement("circle",{cx:36.3,cy:37.5,r:1.1})),u||(u=c.createElement("circle",{cx:24.9,cy:37.5,r:1.1})))},f=()=>((0,c.useEffect)((()=>{function t(t,e,n,i){this.container=t,this.axisX=e,this.axisY=n,this.axisZoom=i,this.canvas=document.createElement("canvas"),this.canvas.width=e.range[1]-e.range[0]+e.bounce[0]+e.bounce[1],this.canvas.height=n.range[1]-n.range[0]+n.bounce[0]+n.bounce[1],this.ctx=this.canvas.getContext("2d"),this.container.appendChild(this.canvas),this.render(e.range[0],e.range[0])}t.prototype.render=function(t,e,n){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this._renderGrid(),this._renderPoint(t,e,n)},t.prototype._renderGrid=function(){const t=this.ctx,e=this.canvas,n=[this.axisX.bounce[0],this.axisY.bounce[0],e.width-this.axisX.bounce[0],e.height-this.axisY.bounce[0]];let i;for(t.fillStyle="#e6e6e6",t.fillRect(0,0,e.width,e.height),t.fillStyle="#fff",t.fillRect(n[0],n[1],n[2]-this.axisX.bounce[1],n[3]-this.axisY.bounce[1]),t.beginPath(),t.lineWidth=.25,i=0;i{t?(t.delta.panX||t.delta.panY||o.classList.remove("blinking"),t.delta.zoom||setTimeout((()=>h.classList.remove("blinking")),300)):(o.classList.remove("blinking"),setTimeout((()=>h.classList.remove("blinking")),300))},n="ontouchstart"in window,i=document.getElementById("delegateTarget"),s=(()=>{const t=document.getElementById("inputTypeWrapper").getBoundingClientRect().width,e=t<600?[t-40,t/3*2-40]:[t/2-50,t/3*2/2],n=document.getElementById("uiWrapper");return n.style.width=e[0]+40+"px",n.style.height=e[1]+"px",t>600&&(n.style.marginRight="20px",n.style.marginTop="20px"),e})(),r=uiWrapper.querySelector(".ui"),a=document.getElementById("inputType");a.className=n?"touch":"mouse";const o=a.querySelector(".pan"),h=a.querySelector(".zoom"),u=new l.ZP({panX:{range:[0,s[0]],bounce:20},panY:{range:[0,s[1]],bounce:20},zoom:{range:[1,5],bounce:1}},{minimumDuration:300}),c=new t(document.getElementById("grid"),u.axis.panX,u.axis.panY,u.axis.zoom);u.on({hold:t=>o.classList.add("blinking"),change:t=>{const e=t.pos,n=t.delta,i=t.holding;(n.panX||n.panY)&&(o.textContent=`panX: ${+e.panX.toFixed(0)}, panY: ${+e.panY.toFixed(0)}`,!t.inputEvent||"keydown"!==t.inputEvent.type&&"keyup"!==t.inputEvent.type?o.classList.remove("keyboard"):o.classList.add("keyboard"),i&&!o.classList.contains("blinking")&&o.classList.add("blinking")),n.zoom&&(h.textContent=`zoom: ${e.zoom.toFixed(2)}`,!h.classList.contains("blinking")&&h.classList.add("blinking")),c.render(e.panX,e.panY,e.zoom),r.style[l.ZP.TRANSFORM]=`translate3d(${e.panX}px, ${e.panY}px, 0) scale(${e.zoom})`},release:t=>e(t),animationEnd:()=>e()}),u.connect("panX panY",new l.Ju(i)),u.connect("panX panY",new l.f3(i,{scale:[5,-5]})).connect("zoom",n?new l.nj(i):new l.HA(i)),u.setTo({panX:s[0]/2+20,panY:s[1]/2})}),[]),c.createElement("div",{className:"demobox"},c.createElement("p",null,"You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs."),c.createElement("div",{id:"inputTypeWrapper"},c.createElement("div",{id:"inputType"},c.createElement("div",{className:"pan"}),c.createElement("div",{className:"zoom"},"zoom: 1.00"))),c.createElement("div",{id:"delegateTarget"},c.createElement("div",{id:"uiWrapper"},c.createElement("div",{className:"ui"},c.createElement(v,{style:{height:"75px"}}))),c.createElement("div",{id:"grid"})),c.createElement("div",{style:{clear:"both"}})))}}]); \ No newline at end of file diff --git a/assets/js/1d9f82ac.9ddd6641.js b/assets/js/1d9f82ac.9ddd6641.js new file mode 100644 index 00000000..d7939592 --- /dev/null +++ b/assets/js/1d9f82ac.9ddd6641.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[7983,1094],{876:(t,e,n)=>{n.d(e,{Zo:()=>c,kt:()=>f});var i=n(2784);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){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 o(t){for(var e=1;e=0||(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var u=i.createContext({}),h=function(t){var e=i.useContext(u),n=e;return t&&(n="function"==typeof t?t(e):o(o({},e),t)),n},c=function(t){var e=h(t.components);return i.createElement(u.Provider,{value:e},t.children)},l="mdxType",d={inlineCode:"code",wrapper:function(t){var e=t.children;return i.createElement(i.Fragment,{},e)}},v=i.forwardRef((function(t,e){var n=t.components,r=t.mdxType,s=t.originalType,u=t.parentName,c=a(t,["components","mdxType","originalType","parentName"]),l=h(n),v=r,f=l["".concat(u,".").concat(v)]||l[v]||d[v]||s;return n?i.createElement(f,o(o({ref:e},c),{},{components:n})):i.createElement(f,o({ref:e},c))}));function f(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var s=n.length,o=new Array(s);o[0]=v;var a={};for(var u in e)hasOwnProperty.call(e,u)&&(a[u]=e[u]);a.originalType=t,a[l]="string"==typeof t?t:r,o[1]=a;for(var h=2;h{n.d(e,{HA:()=>vt,Ju:()=>ct,ZP:()=>pt,cD:()=>_t,f3:()=>ft,nj:()=>dt,zV:()=>lt});var i=n(5161),r=n(1588),s=n(5362),o=function(t,e){return o=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])},o(t,e)};function a(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var u,h=function(){return h=Object.assign||function(t){for(var e,n=1,i=arguments.length;n=0;a--)(r=t[a])&&(o=(s<3?r(o):s>3?r(e,n,o):r(e,n))||o);return s>3&&o&&Object.defineProperty(e,n,o),o}u="undefined"==typeof window?{navigator:{userAgent:""}}:window;var l=24,d="left",v="right",f="middle",_={1:d,2:f,3:v},p="any",g="ontouchstart"in u&&"safari"===(0,i.ZP)().browser.name,m=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=t,n=b(i.childNodes)}else n=b(document.querySelectorAll(t));e||(n=n.length>=1?n[0]:void 0)}else t===u?n=t:"value"in t||"current"in t?n=t.value||t.current:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in u&&t instanceof jQuery||t.constructor.prototype.jquery?n=e?t.toArray():t.get(0):Array.isArray(t)&&(n=t.map((function(t){return y(t)})),e||(n=n.length>=1?n[0]:void 0)):n=t;return n},x=u.requestAnimationFrame||u.webkitRequestAnimationFrame,M=u.cancelAnimationFrame||u.webkitCancelAnimationFrame;if(x&&!M){var P={},O=x;x=function(t){var e=O((function(n){P[e]&&t(n)}));return P[e]=!0,e},M=function(t){delete P[t]}}else x&&M||(x=function(t){return u.setTimeout((function(){t(u.performance&&u.performance.now&&u.performance.now()||(new Date).getTime())}),16)},M=u.clearTimeout);var T=function(t,e){var n={};for(var i in t)i&&(n[i]=e(t[i],i));return n},w=function(t,e){var n={};for(var i in t)i&&e(t[i],i)&&(n[i]=t[i]);return n},D=function(t,e){for(var n in t)if(n&&!e(t[n],n))return!1;return!0},A=function(t,e){return D(t,(function(t,n){return t===e[n]}))},I={},C=function(t,e){return I[e]||(I[e]=R(e)),I[e](t)},k=function(t,e){return t&&e?T(t,(function(t,n){return C(t,"number"==typeof e?e:e[n])})):t},S=function(t){if(!isFinite(t))return 0;var e="".concat(t);if(e.indexOf("e")>=0){for(var n=0,i=1;Math.round(t*i)/i!==t;)i*=10,n++;return n}return e.indexOf(".")>=0?e.length-e.indexOf(".")-1:0},R=function(t){var e=t<1?Math.pow(10,S(t)):1;return function(n){return 0===t?0:Math.round(Math.round(n/t)*t*e)/e}},j=function(t,e){return 180*Math.atan2(e,t)/Math.PI},L=function(t){var e=!0;return Object.keys(E).forEach((function(n){t&&t[n]===E[n]||(e=!1)})),e},B=function(t,e){return t&&e?30:t?6:e?l:1},N=function(t,e,n){return n?!!(30===e||e&t&&n&t):!!(e&t)},X=function(t,e,n){var i,r=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),s={};if(t&&t.style){var o=e.touchAction?e.touchAction:r[n],a=h(h({},E),{"touch-action":"none"===t.style["touch-action"]?"none":o});Object.keys(a).forEach((function(e){s[e]=t.style[e]})),Object.keys(a).forEach((function(e){t.style[e]=a[e]}))}return s},Y=function(t,e){t&&t.style&&e&&Object.keys(e).forEach((function(n){t.style[n]=e[n]}))},K=function(){function t(t){this._axes=t,this.holdingCount=0}var e=t.prototype;return e.hold=function(t,e){var n=this._getRoundPos(t).roundPos;this._axes.trigger(new r.L("hold",{pos:n,input:e.input||null,inputEvent:e.event||null,isTrusted:!0}))},e.triggerRelease=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration),this._axes.trigger(new r.L("release",h(h({},t),{bounceRatio:this._getBounceRatio(n)})))},e.triggerChange=function(t,e,n,i){var o=this;void 0===i&&(i=!1);var a=this.animationManager,u=a.axisManager,h=a.getEventInfo(),c=this._getRoundPos(t,e),l=c.roundPos,d=c.roundDepa,v=u.moveTo(l,d),f=(null==n?void 0:n.event)||(null==h?void 0:h.event)||null,_={pos:v.pos,delta:v.delta,bounceRatio:this._getBounceRatio(v.pos),holding:i,inputEvent:f,isTrusted:!!f,input:(null==n?void 0:n.input)||(null==h?void 0:h.input)||null,set:f?this._createUserControll(v.pos):function(){}},p=new r.L("change",_);return this._axes.trigger(p),Object.keys(v.pos).forEach((function(t){var e=v.pos[t];(0,s.CV)(o._axes,t,e).current=e})),f&&u.set(_.set().destPos),!p.isCanceled()},e.triggerAnimationStart=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration);var s=new r.L("animationStart",t);return this._axes.trigger(s),!s.isCanceled()},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("animationEnd",{isTrusted:t}))},e.triggerFinish=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("finish",{isTrusted:t}))},e.setAnimationManager=function(t){this.animationManager=t},e.destroy=function(){this._axes.off()},e._createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:h({},t),duration:e};return function(t,e){return t&&(n.destPos=h({},t)),void 0!==e&&(n.duration=e),n}},e._getRoundPos=function(t,e){var n=this._axes.options.round;return{roundPos:k(t,n),roundDepa:k(e,n)}},e._getBounceRatio=function(t){return this._axes.axisManager.map(t,(function(t,e){return te.range[1]&&0!==e.bounce[1]?(t-e.range[1])/e.bounce[1]:0}))},c([s.cn],t.prototype,"holdingCount",void 0),t}(),F=function(){function t(t){this._options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this._options.interruptable||this._prevented},e.isInterrupted=function(){return!this._options.interruptable&&this._prevented},e.setInterrupt=function(t){this._options.interruptable||(this._prevented=t)},t}(),V=function(t,e,n,i){var r=t,s=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return r=Math.max(s[0],r),r=Math.min(s[1],r)},W=function(t,e){return te[1]},U=function(t,e,n){return n[1]&&t>e[1]||n[0]&&ts&&(i=(i-s)%o+r),n[0]&&t-1||e.indexOf("none")>-1&&!t.shiftKey&&!t.ctrlKey&&!t.altKey&&!t.metaKey||e.indexOf("shift")>-1&&t.shiftKey||e.indexOf("ctrl")>-1&&t.ctrlKey||e.indexOf("alt")>-1&&t.altKey||e.indexOf("meta")>-1&&t.metaKey)},J=function(){function t(){var t=this;this._stopContextMenu=function(e){e.preventDefault(),u.removeEventListener("contextmenu",t._stopContextMenu)}}var e=t.prototype;return e.extendEvent=function(t){var e,n=this.prevEvent,i=this._getCenter(t),r=n?this._getMovement(t):{x:0,y:0},s=n?this._getScale(t):1,o=n?j(i.x-n.center.x,i.y-n.center.y):0,a=n?n.deltaX+r.x:r.x,u=n?n.deltaY+r.y:r.y,h=r.x,c=r.y,l=this._latestInterval,d=Date.now(),v=l?d-l.timestamp:0,f=n?n.velocityX:0,_=n?n.velocityY:0;return(!l||v>=16)&&(l&&(f=(e=[(a-l.deltaX)/v,(u-l.deltaY)/v])[0],_=e[1]),this._latestInterval={timestamp:d,deltaX:a,deltaY:u}),{srcEvent:t,scale:s,angle:o,center:i,deltaX:a,deltaY:u,offsetX:h,offsetY:c,velocityX:f,velocityY:_,preventSystemEvent:!0}},e._getDistance=function(t,e){var n=e.clientX-t.clientX,i=e.clientY-t.clientY;return Math.sqrt(n*n+i*i)},e._getButton=function(t){var e={1:d,2:v,4:f},n=this._isTouchEvent(t)?d:e[t.buttons];return n||null},e._isTouchEvent=function(t){return t.type&&t.type.indexOf("touch")>-1},e._isValidButton=function(t,e){return e.indexOf(t)>-1},e._isValidEvent=function(t,e,n){return(!e||G(t,e))&&(!n||this._isValidButton(this._getButton(t),n))},e._preventMouseButton=function(t,e){e===v?u.addEventListener("contextmenu",this._stopContextMenu):e===f&&t.preventDefault()},t}(),$=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown"],e.move=["mousemove"],e.end=["mouseup"],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(t,e){return e&&this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},e}(J),tt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["touchstart"],e.move=["touchmove"],e.end=["touchend","touchcancel"],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e){return this._baseTouches=t.touches,this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventMove=function(t,e){return this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventEnd=function(t){this._baseTouches=t.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t){return t.touches.length},n._getScale=function(t){return 2!==t.touches.length||this._baseTouches.length<2?null:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(t){return{x:t.touches[0].clientX,y:t.touches[0].clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.touches[0].identifier!==e.touches[0].identifier?{x:0,y:0}:{x:t.touches[0].clientX-e.touches[0].clientX,y:t.touches[0].clientY-e.touches[0].clientY}},e}(J),et=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=Z?["pointerdown"]:["MSPointerDown"],e.move=Z?["pointermove"]:["MSPointerMove"],e.end=Z?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],e._firstInputs=[],e._recentInputs=[],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?(this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventEnd=function(t){this._removePointerEvent(t)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.pointerId!==e.pointerId?{x:0,y:0}:{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},n._updatePointerEvent=function(t){var e=this,n=!1;this._recentInputs.forEach((function(i,r){i.pointerId===t.pointerId&&(n=!0,e._recentInputs[r]=t)})),n||(this._firstInputs.push(t),this._recentInputs.push(t))},n._removePointerEvent=function(t){this._firstInputs=this._firstInputs.filter((function(e){return e.pointerId!==t.pointerId})),this._recentInputs=this._recentInputs.filter((function(e){return e.pointerId!==t.pointerId}))},e}(J),nt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown","touchstart"],e.move=["mousemove","touchmove"],e.end=["mouseup","touchend","touchcancel"],e}a(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isTouchEvent(t)&&(this._baseTouches=t.touches),this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(t){this._isTouchEvent(t)&&(this._baseTouches=t.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t,e){return this._isTouchEvent(t)?t.touches.length:this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(t){return this._isTouchEvent(t)?2!==t.touches.length||this._baseTouches.length<2?1:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(t){return this._isTouchEvent(t)?{x:t.touches[0].clientX,y:t.touches[0].clientY}:{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this,n=[t,this.prevEvent.srcEvent].map((function(t){return e._isTouchEvent(t)?{id:t.touches[0].identifier,x:t.touches[0].clientX,y:t.touches[0].clientY}:{id:null,x:t.clientX,y:t.clientY}})),i=n[0],r=n[1];return i.id===r.id?{x:i.x-r.x,y:i.y-r.y}:{x:0,y:0}},e}(J),it=function(t,e){return e.reduce((function(e,n,i){return t[i]&&(e[t[i]]=n),e}),{})},rt=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach((function(t){switch(t){case"mouse":n=!0;break;case"touch":e=Q;break;case"pointer":i=H}})),i?new et:e&&n?new nt:e?new tt:n?new $:null};function st(t){return t.indexOf("touch")>-1&&{passive:!1}}var ot=function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager,s=t.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=e,this._interruptManager=n,this._eventManager=i,this._axisManager=r,this._animationManager=s}var e=t.prototype;return e.get=function(t){return this._axisManager.get(t.axes)},e.hold=function(t,e){if(!this._interruptManager.isInterrupted()&&t.axes.length){var n={input:t,event:e};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(t.axes),this._moveDistance=this._axisManager.get(t.axes)}},e.change=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(t){return 0===t}))){var r=e.srcEvent?e.srcEvent:e;if(!r.__childrenAxesAlreadyChanged){var s,o=this._moveDistance||this._axisManager.get(t.axes);s=T(o,(function(t,e){return t+(n[e]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(s,(function(t,e){var n=e.circular,i=e.range;return n&&(n[0]||n[1])?z(t,i,n):t}))),this._isOutside&&this._axisManager.every(o,(function(t,e){return!W(t,e.range)}))&&(this._isOutside=!1),o=this._atOutside(o),s=this._atOutside(s),this.options.nested&&this._isEndofAxis(n,o,s)||(r.__childrenAxesAlreadyChanged=!0);var a={input:t,event:e};if(i){var u=this._animationManager.getDuration(s,o);this._animationManager.animateTo(s,u,a)}else{!this._eventManager.triggerChange(s,o,a,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},e.release=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var r=e.srcEvent?e.srcEvent:e;r.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var s=this._axisManager.get(t.axes),o=this._axisManager.get(),a=this._animationManager.getDisplacement(n),u=it(t.axes,a),c=this._axisManager.get(this._axisManager.map(u,(function(t,e,n){return e.circular&&(e.circular[0]||e.circular[1])?s[n]+t:V(s[n]+t,e.range,e.circular,e.bounce)})));r.__childrenAxesAlreadyReleased=!0;var l=this._animationManager.getDuration(c,s,i);0===l&&(c=h({},o));var d={depaPos:o,destPos:c,duration:l,delta:this._axisManager.getDelta(o,c),inputEvent:e,input:t,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(d),0===this._eventManager.holdingCount&&(this._moveDistance=null);var v=this._animationManager.getUserControl(d),f=A(v.destPos,o),_={input:t,event:e};f||0===v.duration?(f||this._eventManager.triggerChange(v.destPos,o,_,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(_):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(v.destPos,v.duration,_)}},e._atOutside=function(t){var e=this;return this._isOutside?this._axisManager.map(t,(function(t,e){var n=e.range[0]-e.bounce[0],i=e.range[1]+e.bounce[1];return t>i?i:tr?t:tr?r+e._animationManager.interpolate(t-r,s[1]):t}))},e._isEndofAxis=function(t,e,n){return this._axisManager.every(e,(function(i,r,s){return 0===t[s]||e[s]===n[s]&&(o=i,a=r.range,u=r.bounce,!(h=r.circular)[0]&&o===a[0]-u[0]||!h[1]&&o===a[1]+u[1]);var o,a,u,h}))},t}(),at=function(t,e,n){return Math.max(Math.min(t,n),e)},ut=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._useDuration=!0,e}a(e,t);var n=e.prototype;return n.interpolate=function(t,e){var n=this._easing(1e-5)/1e-5;return this._easing(t/(e*n))*e},n.updateAnimation=function(t){var e,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,r=(null==t?void 0:t.destPos)||n.destPos,s=null!==(e=null==t?void 0:t.duration)&&void 0!==e?e:n.duration;if((null==t?void 0:t.restart)||s<=i)this.setTo(r,s-i);else{if(null==t?void 0:t.destPos){var o=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(o,r),n.destPos=r}if(null==t?void 0:t.duration){var a=(i+this._durationOffset)/n.duration;this._durationOffset=a*s-i,n.duration=s}}}},n._initState=function(t){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:t.depaPos,easingPer:0,finished:!1}},n._getNextState=function(t){var e=this,n=this._animateParam,i=t.pos,r=n.destPos,s=T(i,(function(t,e){return t<=r[e]?1:-1})),o=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,a=this._easing(o),u=this.axisManager.map(i,(function(t,u,h){var c=o>=1?r[h]:t+n.delta[h]*(a-e._prevEasingPer)/(1-e._initialEasingPer),l=z(c,u.range,u.circular);if(c!==l){var d=s[h]*(u.range[1]-u.range[0]);r[h]-=d,i[h]-=d}return l}));return this._prevEasingPer=a,{pos:u,easingPer:a,finished:a>=1}},n._easing=function(t){return t>1?1:this._options.easing(t)},e}(function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager;this._options=e,this.interruptManager=n,this.eventManager=i,this.axisManager=r,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(t,e,n){var i,r=this;if(void 0!==n)i=n;else{var s=T(e,(function(e,n){return function(t,e){var n=Math.sqrt(t/e*2);return n<100?0:n}(Math.abs(e-t[n]),r._options.deceleration)}));i=Object.keys(s).reduce((function(t,e){return Math.max(t,s[e])}),-1/0)}return at(i,this._options.minimumDuration,this._options.maximumDuration)},e.getDisplacement=function(t){var e=Math.pow(t.reduce((function(t,e){return t+e*e}),0),1/t.length),n=Math.abs(e/-this._options.deceleration);return t.map((function(t){return t/2*n}))},e.stopAnimation=function(t){if(this._animateParam){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return z(t,e.range,e.circular)}));D(n,(function(t,n){return e[n]===t}))||this.eventManager.triggerChange(n,e,t,!!t),this._animateParam=null,this._raf&&(i=this._raf,M(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==t?void 0:t.event))}var i},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return Math.min(e.range[1],Math.max(e.range[0],t))}));this.stopAnimation(),this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axisManager.filter(this.axisManager.get(),(function(t,e){return U(t,e.range,e.circular)}));Object.keys(e).length>0&&this.setTo(this.axisManager.map(e,(function(t,e){return z(t,e.range,e.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!t),this.axisManager.isOutside()?this.restore(t):this.finish(!!t)},e.finish=function(t){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(t)},e.getUserControl=function(t){var e=t.setTo();return e.destPos=this.axisManager.get(e.destPos),e.duration=at(e.duration,this._options.minimumDuration,this._options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this;this.stopAnimation();var r=this._createAnimationParam(t,e,n),s=h({},r.depaPos),o=this.eventManager.triggerAnimationStart(r),a=this.getUserControl(r);if(!o&&this.axisManager.every(a.destPos,(function(t,e){return U(t,e.range,e.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),o&&!A(a.destPos,s)){var u=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:s,destPos:a.destPos,duration:a.duration,delta:this.axisManager.getDelta(s,a.destPos),isTrusted:!!u,inputEvent:u,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},e.setTo=function(t,e){void 0===e&&(e=0);var n=Object.keys(t),i=this.axisManager.get(n);if(A(t,i))return this;this.interruptManager.setInterrupt(!0);var r=w(t,(function(t,e){return i[e]!==t}));return Object.keys(r).length?(r=this.axisManager.map(r,(function(t,e){var n=e.range,i=e.circular;return i&&(i[0]||i[1])?t:V(t,n,i)})),A(r,i)||(e>0?this.animateTo(r,e):(this.stopAnimation(),this.eventManager.triggerChange(r),this.finish(!1))),this):this},e.setBy=function(t,e){return void 0===e&&(e=0),this.setTo(T(this.axisManager.get(Object.keys(t)),(function(e,n){return e+t[n]})),e)},e.setOptions=function(t){this._options=h(h({},this._options),t)},e._createAnimationParam=function(t,e,n){var i=this.axisManager.get(),r=t,s=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:r,duration:at(e,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,r),inputEvent:s,input:(null==n?void 0:n.input)||null,isTrusted:!!s,done:this.animationEnd}},e._animateLoop=function(t,e){var n=this;if(t.duration){this._animateParam=h(h({},t),{startTime:(new Date).getTime()});var i=T(t.destPos,(function(t){return t})),r=this._initState(this._animateParam),s=function(){n._raf=null;var t=n._animateParam,o=n._getNextState(r),a=!n.eventManager.triggerChange(o.pos,r.pos);if(r=o,o.finished)return t.destPos=n._getFinalPos(t.destPos,i),A(t.destPos,n.axisManager.get(Object.keys(t.destPos)))||n.eventManager.triggerChange(t.destPos,o.pos),void e();a?n.finish(!1):n._raf=x(s)};s()}else this.eventManager.triggerChange(t.destPos),e()},e._getFinalPos=function(t,e){var n=this,i=1e-6;return T(t,(function(t,r){if(t>=e[r]-i&&t<=e[r]+i)return e[r];var s=n._getRoundUnit(t,r);return C(t,s)}))},e._getRoundUnit=function(t,e){var n,i=this._options.round,r=null;if(!i){var s=this.axisManager.getAxisOptions(e);n=Math.max(S(s.range[0]),S(s.range[1]),S(t)),r=1/Math.pow(10,n)}return r||i},t}()),ht=function(t){function e(e,n,i){void 0===e&&(e={}),void 0===n&&(n={}),void 0===i&&(i={});var r=t.call(this)||this;return r.axis=e,r._inputs=[],r.options=h({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(t){r.axis[t].startPos=i[t]})),r.interruptManager=new F(r.options),r.axisManager=new q(r.axis),r.eventManager=new K(r),r.animationManager=new ut(r),r.inputObserver=new ot(r),r.eventManager.setAnimationManager(r.animationManager),r.eventManager.triggerChange(r.axisManager.get()),r}a(e,t);var n=e.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(t,e){var n;return n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),e.mapAxes(n),e.connect(this.inputObserver),this._inputs.push(e),this},n.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);e>=0&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach((function(t){return t.disconnect()})),this._inputs=[];return this},n.get=function(t){return this.axisManager.get(t)},n.setTo=function(t,e){return void 0===e&&(e=0),this.animationManager.setTo(t,e),this},n.setBy=function(t,e){return void 0===e&&(e=0),this.animationManager.setBy(t,e),this},n.setOptions=function(t){return this.options=h(h({},this.options),t),this.animationManager.setOptions(t),this},n.setAxis=function(t){return this.axisManager.setAxis(t),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(t){return this.animationManager.updateAnimation(t),this},n.isBounceArea=function(t){return this.axisManager.isOutside(t)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},e.VERSION="3.9.1",e.TRANSFORM=m,e.DIRECTION_NONE=1,e.DIRECTION_LEFT=2,e.DIRECTION_RIGHT=4,e.DIRECTION_UP=8,e.DIRECTION_DOWN=16,e.DIRECTION_HORIZONTAL=6,e.DIRECTION_VERTICAL=l,e.DIRECTION_ALL=30,c([s.D0],e.prototype,"holding",null),e=c([s.kU],e)}(r.Z),ct=function(){function t(t,e){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(t){n._dragged&&(t.preventDefault(),t.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=y(t),this.options=h({inputType:["touch","mouse","pointer"],inputKey:[p],inputButton:[d],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},e),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=B(!!t[0],!!t[1]),this.axes=t},e.connect=function(t){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(t),this},e.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=X(this.element,this.options,this._direction)),this},e.disable=function(){return this._enabled&&(this._enabled=!1,L(this._originalCssProps)||Y(this.element,this._originalCssProps)),this},e.isEnabled=function(){return this._enabled},e.release=function(){var t=this._activeEvent,e=t.prevEvent;return t.onRelease(),this._observer.release(this,e,[0,0]),this._detachWindowEvent(t),this},e._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=e.preventDefaultOnDrag,s=this._activeEvent,o=s.onEventStart(t,n,i);if(o&&this._enabled&&!(s.getTouches(t,i)>1)&&!1!==o.srcEvent.cancelable){var a=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,o),this._atRightEdge=g&&o.center.x>window.innerWidth-a,this._attachWindowEvent(s),r&&"touchstart"!==o.srcEvent.type&&o.srcEvent.preventDefault(),s.prevEvent=o}},e._onPanmove=function(t){var e=this,n=this.options,i=n.iOSEdgeSwipeThreshold,r=n.preventClickOnDrag,s=n.releaseOnScroll,o=n.inputKey,a=n.inputButton,u=n.threshold,h=n.thresholdAngle,c=this._activeEvent,d=c.onEventMove(t,o,a),v=c.getTouches(t,a);if(0===v||s&&d&&!d.srcEvent.cancelable)this._onPanend(t);else if(d&&this._enabled&&!(v>1)){var f=function(t,e){if(e<0||e>90)return 1;var n=Math.abs(t);return n>e&&n<180-e?l:6}(d.angle,h),_=N(6,this._direction,f),p=N(l,this._direction,f);if(c.prevEvent&&g){if(d.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),d.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return e.release()}),100))}var m=this._getDistance([d.deltaX,d.deltaY],[_,p]),E=this._getOffset([d.offsetX,d.offsetY],[_,p]),b=E.some((function(t){return 0!==t}));b&&(!1!==d.srcEvent.cancelable&&d.srcEvent.preventDefault(),d.srcEvent.stopPropagation()),d.preventSystemEvent=b,b&&(this._isOverThreshold||m>=u)&&(this._dragged=r,this._isOverThreshold=!0,this._observer.change(this,d,it(this.axes,E))),c.prevEvent=d}},e._onPanend=function(t){var e=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(t),this._enabled&&0===n.getTouches(t,e)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,r=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[N(6,this._direction),N(l,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,r)}},e._attachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.addEventListener(t,e._onPanmove,st(t))})),null==t||t.end.forEach((function(t){window.addEventListener(t,e._onPanend,st(t))}))},e._detachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.removeEventListener(t,e._onPanmove)})),null==t||t.end.forEach((function(t){window.removeEventListener(t,e._onPanend)}))},e._getOffset=function(t,e){var n=this.options.scale;return[e[0]?t[0]*n[0]:0,e[1]?t[1]*n[1]:0]},e._getDistance=function(t,e){return Math.sqrt(Number(e[0])*Math.pow(t[0],2)+Number(e[1])*Math.pow(t[1],2))},e._attachElementEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(t){i.addEventListener(t,e._onPanstart)})),n.move.forEach((function(t){i.addEventListener(t,e._voidFunction)}))}},e._detachElementEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPanstart)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._voidFunction)}))),this.disable(),this._observer=null},t}(),lt=function(t){function e(e,n){var i=t.call(this,e,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}a(e,t);var n=e.prototype;return n.mapAxes=function(t){this._direction=ht.DIRECTION_ALL,this.axes=t},n._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventStart(t,n,i);if(s&&this.isEnabled()){var o=this.element.getBoundingClientRect();this._observer.hold(this,s),this._attachWindowEvent(r),this._coefficientForDistanceToAngle=360/(o.width*Math.PI),this._rotateOrigin=[o.left+(o.width-1)/2,o.top+(o.height-1)/2],this._prevAngle=null,this._triggerChange(s),r.prevEvent=s}},n._onPanmove=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventMove(t,n,i);s&&this.isEnabled()&&(!1!==s.srcEvent.cancelable&&s.srcEvent.preventDefault(),s.srcEvent.stopPropagation(),this._triggerChange(s),r.prevEvent=s)},n._onPanend=function(t){var e=this._activeEvent;if(e.onEventEnd(t),this.isEnabled()){var n=e.prevEvent;this._triggerChange(n);var i=n.velocityX,r=n.velocityY,s=Math.sqrt(i*i+r*r)*(this._lastDiff>0?-1:1);e.onRelease(),this._observer.release(this,n,[s*this._coefficientForDistanceToAngle]),this._detachWindowEvent(e)}},n._triggerChange=function(t){var e=this._getPosFromOrigin(t.center.x,t.center.y),n=e.x,i=e.y,r=j(n,i),s=r<0?360+r:r,o=this._getQuadrant(t.center.x,t.center.y),a=this._getDifference(this._prevAngle,s,this._prevQuadrant,o);this._prevAngle=s,this._prevQuadrant=o,0!==a&&(this._lastDiff=a,this._observer.change(this,t,it(this.axes,[-a])))},n._getDifference=function(t,e,n,i){return null===t?0:1===n&&4===i?-t-(360-e):4===n&&1===i?360-t+e:e-t},n._getPosFromOrigin=function(t,e){return{x:t-this._rotateOrigin[0],y:this._rotateOrigin[1]-e}},n._getQuadrant=function(t,e){var n=this._getPosFromOrigin(t,e),i=n.x,r=n.y,s=0;return i>=0&&r>=0?s=1:i<0&&r>=0?s=2:i<0&&r<0?s=3:i>=0&&r<0&&(s=4),s},e}(ct),dt=function(){function t(t,e){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=y(t),this.options=h({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},e),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._activeEvent&&this._detachEvent(),this._attachEvent(t),this._originalCssProps=X(this.element,this.options,30),this},e.disconnect=function(){return this._detachEvent(),L(this._originalCssProps)||Y(this.element,this._originalCssProps),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onPinchStart=function(t){var e=this._activeEvent,n=e.onEventStart(t);n&&this._enabled&&2===e.getTouches(t)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,t),this._pinchFlag=!0,this._isOverThreshold=!1,e.prevEvent=n)},e._onPinchMove=function(t){var e=this.options.threshold,n=this._activeEvent,i=n.onEventMove(t);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(t)){var r=this._getDistance(i.scale),s=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||r>=e)&&(this._isOverThreshold=!0,this._observer.change(this,t,it(this.axes,[s]))),n.prevEvent=i}},e._onPinchEnd=function(t){var e=this._activeEvent;e.onEventEnd(t),!this._pinchFlag||!this._enabled||e.getTouches(t)>=2||(e.onRelease(),this._observer.release(this,t,[0],0),this._baseValue=null,this._pinchFlag=!1)},e._attachEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(t){i.addEventListener(t,e._onPinchStart,!1)})),n.move.forEach((function(t){i.addEventListener(t,e._onPinchMove,!1)})),n.end.forEach((function(t){i.addEventListener(t,e._onPinchEnd,!1)}))}},e._detachEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPinchStart,!1)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._onPinchMove,!1)})),null==e||e.end.forEach((function(e){n.removeEventListener(e,t._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},e._getOffset=function(t,e){return void 0===e&&(e=1),this._baseValue*(t-e)*this.options.scale},e._getDistance=function(t){return Math.abs(t-1)},t}(),vt=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({inputKey:[p],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},e),this._onWheel=this._onWheel.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=B(!!t[1],!!t[0]),this.axes=t},e.connect=function(t){return this._detachEvent(),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onWheel=function(t){var e=this;if(this._enabled&&G(t,this.options.inputKey)){var n=this._getOffset([t.deltaY,t.deltaX],[N(l,this._direction),N(6,this._direction)]);0===n[0]&&0===n[1]||(t.preventDefault(),this._holding||(this._observer.hold(this,t),this._holding=!0),this._observer.change(this,t,it(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){e._holding&&(e._holding=!1,e._observer.release(e,t,[0]))}),this.options.releaseDelay))}},e._getOffset=function(t,e){var n=this.options.scale,i=this.options.useNormalized;return[e[0]&&t[0]?(t[0]>0?-1:1)*(i?1:Math.abs(t[0]))*n:0,e[1]&&t[1]?(t[1]>0?-1:1)*(i?1:Math.abs(t[1]))*n:0]},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("wheel",this._onWheel),this._enabled=!0},e._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},t}(),ft=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({scale:[1,1]},e),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onKeydown=function(t){if(this._enabled){var e=!0,n=1,i=-1;switch(t.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:e=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(e=!1),e){t.preventDefault();var r=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,t),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,t,it(this.axes,r))}}},e._onKeyup=function(t){var e=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){e._observer.release(e,t,[0,0]),e._holding=!1}),80))},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("keydown",this._onKeydown,!1),e.addEventListener("keypress",this._onKeydown,!1),e.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},e._detachEvent=function(){var t=this.element;t&&(t.removeEventListener("keydown",this._onKeydown,!1),t.removeEventListener("keypress",this._onKeydown,!1),t.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},t}(),_t={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(t){return new ht(t.axis,t.options)},on:function(t,e,n){t.on(e,n)},off:function(t,e,n){t.off(e,n)},destroy:function(t){t.destroy()}};const pt=ht},1768:(t,e,n)=>{n.r(e),n.d(e,{default:()=>s});var i=n(2784),r=n(4458);const s=()=>((0,i.useEffect)((()=>{var t=document.querySelector(".bubbles");function e(){var e,n,i=document.createElement("div"),s=parseInt(80*Math.random()+60),o=parseInt(220*Math.random()+15,10),a=parseInt(220*Math.random()+15,10),u=parseInt(220*Math.random()+15,10),h=parseInt(85*Math.random()+5,10),c=parseInt(85*Math.random()+5,10);i.className="bubble",i.style.width=s+"px",i.style.height=s+"px",i.style.background="rgb("+o+","+a+","+u+")",i.style.left=h+"%",i.style.top=c+"%",t.appendChild(i),e=i,(n=new r.ZP({zoom:{range:[.5,3]}},{deceleration:.01},{zoom:1})).on("change",(function(t){var n=t.pos;e.style.transform="scale("+n.zoom+")"})),n.connect("zoom",new r.nj(e)).connect("zoom",new r.HA(e,{scale:.3}))}document.querySelector(".add").addEventListener("click",e),e()}),[]),i.createElement("div",{className:"demobox"},i.createElement("p",null,"You can create bubble that can zoom using pinch(touch) or wheel."),i.createElement("div",{id:"wrapper"},i.createElement("button",{className:"add"}),i.createElement("div",{className:"bubbles"}))))},4977:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>h,contentTitle:()=>a,default:()=>v,frontMatter:()=>o,metadata:()=>u,toc:()=>c});var i=n(7896),r=(n(2784),n(876)),s=n(1768);const o={title:"Bubble",id:"bubble",slug:"/bubble",sidebar_position:9},a=void 0,u={unversionedId:"demos/bubble",id:"demos/bubble",title:"Bubble",description:"",source:"@site/docs/demos/bubble.mdx",sourceDirName:"demos",slug:"/bubble",permalink:"/egjs-axes/docs/bubble",editUrl:"https://github.com/naver/egjs-axes/edit/master/packages/demo/docs/demos/bubble.mdx",tags:[],version:"current",sidebarPosition:9,frontMatter:{title:"Bubble",id:"bubble",slug:"/bubble",sidebar_position:9},sidebar:"demos",previous:{title:"Subway",permalink:"/egjs-axes/docs/subway"},next:{title:"Schedule",permalink:"/egjs-axes/docs/schedule"}},h={},c=[],l={toc:c},d="wrapper";function v(t){let{components:e,...n}=t;return(0,r.kt)(d,(0,i.Z)({},l,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)(s.default,{mdxType:"Bubble"}))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1df93b7f.4e18d20a.js b/assets/js/1df93b7f.4e18d20a.js new file mode 100644 index 00000000..54e0d941 --- /dev/null +++ b/assets/js/1df93b7f.4e18d20a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[3237,891,2435],{4458:(e,t,n)=>{n.d(t,{HA:()=>ve,Ju:()=>le,ZP:()=>ge,cD:()=>fe,f3:()=>me,nj:()=>de,zV:()=>he});var i=n(5161),s=n(1588),r=n(5362),a=function(e,t){return a=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])},a(e,t)};function o(e,t){function n(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var c,u=function(){return u=Object.assign||function(e){for(var t,n=1,i=arguments.length;n=0;o--)(s=e[o])&&(a=(r<3?s(a):r>3?s(t,n,a):s(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a}c="undefined"==typeof window?{navigator:{userAgent:""}}:window;var h=24,d="left",v="right",m="middle",f={1:d,2:m,3:v},g="any",p="ontouchstart"in c&&"safari"===(0,i.ZP)().browser.name,_=function(){if("undefined"==typeof document)return"";for(var e=(document.head||document.getElementsByTagName("head")[0]).style,t=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=t.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=e,n=x(i.childNodes)}else n=x(document.querySelectorAll(e));t||(n=n.length>=1?n[0]:void 0)}else e===c?n=e:"value"in e||"current"in e?n=e.value||e.current:!e.nodeName||1!==e.nodeType&&9!==e.nodeType?"jQuery"in c&&e instanceof jQuery||e.constructor.prototype.jquery?n=t?e.toArray():e.get(0):Array.isArray(e)&&(n=e.map((function(e){return b(e)})),t||(n=n.length>=1?n[0]:void 0)):n=e;return n},y=c.requestAnimationFrame||c.webkitRequestAnimationFrame,M=c.cancelAnimationFrame||c.webkitCancelAnimationFrame;if(y&&!M){var w={},P=y;y=function(e){var t=P((function(n){w[t]&&e(n)}));return w[t]=!0,t},M=function(e){delete w[e]}}else y&&M||(y=function(e){return c.setTimeout((function(){e(c.performance&&c.performance.now&&c.performance.now()||(new Date).getTime())}),16)},M=c.clearTimeout);var O=function(e,t){var n={};for(var i in e)i&&(n[i]=t(e[i],i));return n},T=function(e,t){var n={};for(var i in e)i&&t(e[i],i)&&(n[i]=e[i]);return n},D=function(e,t){for(var n in e)if(n&&!t(e[n],n))return!1;return!0},A=function(e,t){return D(e,(function(e,n){return e===t[n]}))},N={},k=function(e,t){return N[t]||(N[t]=I(t)),N[t](e)},j=function(e,t){return e&&t?O(e,(function(e,n){return k(e,"number"==typeof t?t:t[n])})):e},C=function(e){if(!isFinite(e))return 0;var t="".concat(e);if(t.indexOf("e")>=0){for(var n=0,i=1;Math.round(e*i)/i!==e;)i*=10,n++;return n}return t.indexOf(".")>=0?t.length-t.indexOf(".")-1:0},I=function(e){var t=e<1?Math.pow(10,C(e)):1;return function(n){return 0===e?0:Math.round(Math.round(n/e)*e*t)/t}},S=function(e,t){return 180*Math.atan2(t,e)/Math.PI},R=function(e){var t=!0;return Object.keys(E).forEach((function(n){e&&e[n]===E[n]||(t=!1)})),t},L=function(e,t){return e&&t?30:e?6:t?h:1},B=function(e,t,n){return n?!!(30===t||t&e&&n&e):!!(t&e)},Y=function(e,t,n){var i,s=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),r={};if(e&&e.style){var a=t.touchAction?t.touchAction:s[n],o=u(u({},E),{"touch-action":"none"===e.style["touch-action"]?"none":a});Object.keys(o).forEach((function(t){r[t]=e.style[t]})),Object.keys(o).forEach((function(t){e.style[t]=o[t]}))}return r},X=function(e,t){e&&e.style&&t&&Object.keys(t).forEach((function(n){e.style[n]=t[n]}))},Z=function(){function e(e){this._axes=e,this.holdingCount=0}var t=e.prototype;return t.hold=function(e,t){var n=this._getRoundPos(e).roundPos;this._axes.trigger(new s.L("hold",{pos:n,input:t.input||null,inputEvent:t.event||null,isTrusted:!0}))},t.triggerRelease=function(e){var t=this._getRoundPos(e.destPos,e.depaPos),n=t.roundPos,i=t.roundDepa;e.destPos=n,e.depaPos=i,e.setTo=this._createUserControll(e.destPos,e.duration),this._axes.trigger(new s.L("release",u(u({},e),{bounceRatio:this._getBounceRatio(n)})))},t.triggerChange=function(e,t,n,i){var a=this;void 0===i&&(i=!1);var o=this.animationManager,c=o.axisManager,u=o.getEventInfo(),l=this._getRoundPos(e,t),h=l.roundPos,d=l.roundDepa,v=c.moveTo(h,d),m=(null==n?void 0:n.event)||(null==u?void 0:u.event)||null,f={pos:v.pos,delta:v.delta,bounceRatio:this._getBounceRatio(v.pos),holding:i,inputEvent:m,isTrusted:!!m,input:(null==n?void 0:n.input)||(null==u?void 0:u.input)||null,set:m?this._createUserControll(v.pos):function(){}},g=new s.L("change",f);return this._axes.trigger(g),Object.keys(v.pos).forEach((function(e){var t=v.pos[e];(0,r.CV)(a._axes,e,t).current=t})),m&&c.set(f.set().destPos),!g.isCanceled()},t.triggerAnimationStart=function(e){var t=this._getRoundPos(e.destPos,e.depaPos),n=t.roundPos,i=t.roundDepa;e.destPos=n,e.depaPos=i,e.setTo=this._createUserControll(e.destPos,e.duration);var r=new s.L("animationStart",e);return this._axes.trigger(r),!r.isCanceled()},t.triggerAnimationEnd=function(e){void 0===e&&(e=!1),this._axes.trigger(new s.L("animationEnd",{isTrusted:e}))},t.triggerFinish=function(e){void 0===e&&(e=!1),this._axes.trigger(new s.L("finish",{isTrusted:e}))},t.setAnimationManager=function(e){this.animationManager=e},t.destroy=function(){this._axes.off()},t._createUserControll=function(e,t){void 0===t&&(t=0);var n={destPos:u({},e),duration:t};return function(e,t){return e&&(n.destPos=u({},e)),void 0!==t&&(n.duration=t),n}},t._getRoundPos=function(e,t){var n=this._axes.options.round;return{roundPos:j(e,n),roundDepa:j(t,n)}},t._getBounceRatio=function(e){return this._axes.axisManager.map(e,(function(e,t){return et.range[1]&&0!==t.bounce[1]?(e-t.range[1])/t.bounce[1]:0}))},l([r.cn],e.prototype,"holdingCount",void 0),e}(),K=function(){function e(e){this._options=e,this._prevented=!1}var t=e.prototype;return t.isInterrupting=function(){return this._options.interruptable||this._prevented},t.isInterrupted=function(){return!this._options.interruptable&&this._prevented},t.setInterrupt=function(e){this._options.interruptable||(this._prevented=e)},e}(),W=function(e,t,n,i){var s=e,r=[n[0]?t[0]:i?t[0]-i[0]:t[0],n[1]?t[1]:i?t[1]+i[1]:t[1]];return s=Math.max(r[0],s),s=Math.min(r[1],s)},F=function(e,t){return et[1]},V=function(e,t,n){return n[1]&&e>t[1]||n[0]&&er&&(i=(i-r)%a+s),n[0]&&e-1||t.indexOf("none")>-1&&!e.shiftKey&&!e.ctrlKey&&!e.altKey&&!e.metaKey||t.indexOf("shift")>-1&&e.shiftKey||t.indexOf("ctrl")>-1&&e.ctrlKey||t.indexOf("alt")>-1&&e.altKey||t.indexOf("meta")>-1&&e.metaKey)},Q=function(){function e(){var e=this;this._stopContextMenu=function(t){t.preventDefault(),c.removeEventListener("contextmenu",e._stopContextMenu)}}var t=e.prototype;return t.extendEvent=function(e){var t,n=this.prevEvent,i=this._getCenter(e),s=n?this._getMovement(e):{x:0,y:0},r=n?this._getScale(e):1,a=n?S(i.x-n.center.x,i.y-n.center.y):0,o=n?n.deltaX+s.x:s.x,c=n?n.deltaY+s.y:s.y,u=s.x,l=s.y,h=this._latestInterval,d=Date.now(),v=h?d-h.timestamp:0,m=n?n.velocityX:0,f=n?n.velocityY:0;return(!h||v>=16)&&(h&&(m=(t=[(o-h.deltaX)/v,(c-h.deltaY)/v])[0],f=t[1]),this._latestInterval={timestamp:d,deltaX:o,deltaY:c}),{srcEvent:e,scale:r,angle:a,center:i,deltaX:o,deltaY:c,offsetX:u,offsetY:l,velocityX:m,velocityY:f,preventSystemEvent:!0}},t._getDistance=function(e,t){var n=t.clientX-e.clientX,i=t.clientY-e.clientY;return Math.sqrt(n*n+i*i)},t._getButton=function(e){var t={1:d,2:v,4:m},n=this._isTouchEvent(e)?d:t[e.buttons];return n||null},t._isTouchEvent=function(e){return e.type&&e.type.indexOf("touch")>-1},t._isValidButton=function(e,t){return t.indexOf(e)>-1},t._isValidEvent=function(e,t,n){return(!t||J(e,t))&&(!n||this._isValidButton(this._getButton(e),n))},t._preventMouseButton=function(e,t){t===v?c.addEventListener("contextmenu",this._stopContextMenu):t===m&&e.preventDefault()},e}(),G=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=["mousedown"],t.move=["mousemove"],t.end=["mouseup"],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t,n){var i=this._getButton(e);return this._isValidEvent(e,t,n)?(this._preventMouseButton(e,i),this.extendEvent(e)):null},n.onEventMove=function(e,t,n){return this._isValidEvent(e,t,n)?this.extendEvent(e):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(e,t){return t&&this._isValidButton(f[e.which],t)&&-1===this.end.indexOf(e.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(e){return{x:e.clientX,y:e.clientY}},n._getMovement=function(e){var t=this.prevEvent.srcEvent;return{x:e.clientX-t.clientX,y:e.clientY-t.clientY}},t}(Q),ee=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=["touchstart"],t.move=["touchmove"],t.end=["touchend","touchcancel"],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t){return this._baseTouches=e.touches,this._isValidEvent(e,t)?this.extendEvent(e):null},n.onEventMove=function(e,t){return this._isValidEvent(e,t)?this.extendEvent(e):null},n.onEventEnd=function(e){this._baseTouches=e.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(e){return e.touches.length},n._getScale=function(e){return 2!==e.touches.length||this._baseTouches.length<2?null:this._getDistance(e.touches[0],e.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(e){return{x:e.touches[0].clientX,y:e.touches[0].clientY}},n._getMovement=function(e){var t=this.prevEvent.srcEvent;return e.touches[0].identifier!==t.touches[0].identifier?{x:0,y:0}:{x:e.touches[0].clientX-t.touches[0].clientX,y:e.touches[0].clientY-t.touches[0].clientY}},t}(Q),te=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=q?["pointerdown"]:["MSPointerDown"],t.move=q?["pointermove"]:["MSPointerMove"],t.end=q?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],t._firstInputs=[],t._recentInputs=[],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t,n){var i=this._getButton(e);return this._isValidEvent(e,t,n)?(this._preventMouseButton(e,i),this._updatePointerEvent(e),this.extendEvent(e)):null},n.onEventMove=function(e,t,n){return this._isValidEvent(e,t,n)?(this._updatePointerEvent(e),this.extendEvent(e)):null},n.onEventEnd=function(e){this._removePointerEvent(e)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(e){return{x:e.clientX,y:e.clientY}},n._getMovement=function(e){var t=this.prevEvent.srcEvent;return e.pointerId!==t.pointerId?{x:0,y:0}:{x:e.clientX-t.clientX,y:e.clientY-t.clientY}},n._updatePointerEvent=function(e){var t=this,n=!1;this._recentInputs.forEach((function(i,s){i.pointerId===e.pointerId&&(n=!0,t._recentInputs[s]=e)})),n||(this._firstInputs.push(e),this._recentInputs.push(e))},n._removePointerEvent=function(e){this._firstInputs=this._firstInputs.filter((function(t){return t.pointerId!==e.pointerId})),this._recentInputs=this._recentInputs.filter((function(t){return t.pointerId!==e.pointerId}))},t}(Q),ne=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=["mousedown","touchstart"],t.move=["mousemove","touchmove"],t.end=["mouseup","touchend","touchcancel"],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t,n){var i=this._getButton(e);return this._isTouchEvent(e)&&(this._baseTouches=e.touches),this._isValidEvent(e,t,n)?(this._preventMouseButton(e,i),this.extendEvent(e)):null},n.onEventMove=function(e,t,n){return this._isValidEvent(e,t,n)?this.extendEvent(e):null},n.onEventEnd=function(e){this._isTouchEvent(e)&&(this._baseTouches=e.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(e,t){return this._isTouchEvent(e)?e.touches.length:this._isValidButton(f[e.which],t)&&-1===this.end.indexOf(e.type)?1:0},n._getScale=function(e){return this._isTouchEvent(e)?2!==e.touches.length||this._baseTouches.length<2?1:this._getDistance(e.touches[0],e.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(e){return this._isTouchEvent(e)?{x:e.touches[0].clientX,y:e.touches[0].clientY}:{x:e.clientX,y:e.clientY}},n._getMovement=function(e){var t=this,n=[e,this.prevEvent.srcEvent].map((function(e){return t._isTouchEvent(e)?{id:e.touches[0].identifier,x:e.touches[0].clientX,y:e.touches[0].clientY}:{id:null,x:e.clientX,y:e.clientY}})),i=n[0],s=n[1];return i.id===s.id?{x:i.x-s.x,y:i.y-s.y}:{x:0,y:0}},t}(Q),ie=function(e,t){return t.reduce((function(t,n,i){return e[i]&&(t[e[i]]=n),t}),{})},se=function(e){void 0===e&&(e=[]);var t=!1,n=!1,i=!1;return e.forEach((function(e){switch(e){case"mouse":n=!0;break;case"touch":t=$;break;case"pointer":i=H}})),i?new te:t&&n?new ne:t?new ee:n?new G:null};function re(e){return e.indexOf("touch")>-1&&{passive:!1}}var ae=function(){function e(e){var t=e.options,n=e.interruptManager,i=e.eventManager,s=e.axisManager,r=e.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=t,this._interruptManager=n,this._eventManager=i,this._axisManager=s,this._animationManager=r}var t=e.prototype;return t.get=function(e){return this._axisManager.get(e.axes)},t.hold=function(e,t){if(!this._interruptManager.isInterrupted()&&e.axes.length){var n={input:e,event:t};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(e.axes),this._moveDistance=this._axisManager.get(e.axes)}},t.change=function(e,t,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(e){return 0===e}))){var s=t.srcEvent?t.srcEvent:t;if(!s.__childrenAxesAlreadyChanged){var r,a=this._moveDistance||this._axisManager.get(e.axes);r=O(a,(function(e,t){return e+(n[t]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(r,(function(e,t){var n=t.circular,i=t.range;return n&&(n[0]||n[1])?z(e,i,n):e}))),this._isOutside&&this._axisManager.every(a,(function(e,t){return!F(e,t.range)}))&&(this._isOutside=!1),a=this._atOutside(a),r=this._atOutside(r),this.options.nested&&this._isEndofAxis(n,a,r)||(s.__childrenAxesAlreadyChanged=!0);var o={input:e,event:t};if(i){var c=this._animationManager.getDuration(r,a);this._animationManager.animateTo(r,c,o)}else{!this._eventManager.triggerChange(r,a,o,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},t.release=function(e,t,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var s=t.srcEvent?t.srcEvent:t;s.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var r=this._axisManager.get(e.axes),a=this._axisManager.get(),o=this._animationManager.getDisplacement(n),c=ie(e.axes,o),l=this._axisManager.get(this._axisManager.map(c,(function(e,t,n){return t.circular&&(t.circular[0]||t.circular[1])?r[n]+e:W(r[n]+e,t.range,t.circular,t.bounce)})));s.__childrenAxesAlreadyReleased=!0;var h=this._animationManager.getDuration(l,r,i);0===h&&(l=u({},a));var d={depaPos:a,destPos:l,duration:h,delta:this._axisManager.getDelta(a,l),inputEvent:t,input:e,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(d),0===this._eventManager.holdingCount&&(this._moveDistance=null);var v=this._animationManager.getUserControl(d),m=A(v.destPos,a),f={input:e,event:t};m||0===v.duration?(m||this._eventManager.triggerChange(v.destPos,a,f,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(f):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(v.destPos,v.duration,f)}},t._atOutside=function(e){var t=this;return this._isOutside?this._axisManager.map(e,(function(e,t){var n=t.range[0]-t.bounce[0],i=t.range[1]+t.bounce[1];return e>i?i:es?e:es?s+t._animationManager.interpolate(e-s,r[1]):e}))},t._isEndofAxis=function(e,t,n){return this._axisManager.every(t,(function(i,s,r){return 0===e[r]||t[r]===n[r]&&(a=i,o=s.range,c=s.bounce,!(u=s.circular)[0]&&a===o[0]-c[0]||!u[1]&&a===o[1]+c[1]);var a,o,c,u}))},e}(),oe=function(e,t,n){return Math.max(Math.min(e,n),t)},ce=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t._useDuration=!0,t}o(t,e);var n=t.prototype;return n.interpolate=function(e,t){var n=this._easing(1e-5)/1e-5;return this._easing(e/(t*n))*t},n.updateAnimation=function(e){var t,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,s=(null==e?void 0:e.destPos)||n.destPos,r=null!==(t=null==e?void 0:e.duration)&&void 0!==t?t:n.duration;if((null==e?void 0:e.restart)||r<=i)this.setTo(s,r-i);else{if(null==e?void 0:e.destPos){var a=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(a,s),n.destPos=s}if(null==e?void 0:e.duration){var o=(i+this._durationOffset)/n.duration;this._durationOffset=o*r-i,n.duration=r}}}},n._initState=function(e){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:e.depaPos,easingPer:0,finished:!1}},n._getNextState=function(e){var t=this,n=this._animateParam,i=e.pos,s=n.destPos,r=O(i,(function(e,t){return e<=s[t]?1:-1})),a=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,o=this._easing(a),c=this.axisManager.map(i,(function(e,c,u){var l=a>=1?s[u]:e+n.delta[u]*(o-t._prevEasingPer)/(1-t._initialEasingPer),h=z(l,c.range,c.circular);if(l!==h){var d=r[u]*(c.range[1]-c.range[0]);s[u]-=d,i[u]-=d}return h}));return this._prevEasingPer=o,{pos:c,easingPer:o,finished:o>=1}},n._easing=function(e){return e>1?1:this._options.easing(e)},t}(function(){function e(e){var t=e.options,n=e.interruptManager,i=e.eventManager,s=e.axisManager;this._options=t,this.interruptManager=n,this.eventManager=i,this.axisManager=s,this.animationEnd=this.animationEnd.bind(this)}var t=e.prototype;return t.getDuration=function(e,t,n){var i,s=this;if(void 0!==n)i=n;else{var r=O(t,(function(t,n){return function(e,t){var n=Math.sqrt(e/t*2);return n<100?0:n}(Math.abs(t-e[n]),s._options.deceleration)}));i=Object.keys(r).reduce((function(e,t){return Math.max(e,r[t])}),-1/0)}return oe(i,this._options.minimumDuration,this._options.maximumDuration)},t.getDisplacement=function(e){var t=Math.pow(e.reduce((function(e,t){return e+t*t}),0),1/e.length),n=Math.abs(t/-this._options.deceleration);return e.map((function(e){return e/2*n}))},t.stopAnimation=function(e){if(this._animateParam){var t=this.axisManager.get(),n=this.axisManager.map(t,(function(e,t){return z(e,t.range,t.circular)}));D(n,(function(e,n){return t[n]===e}))||this.eventManager.triggerChange(n,t,e,!!e),this._animateParam=null,this._raf&&(i=this._raf,M(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==e?void 0:e.event))}var i},t.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},t.restore=function(e){var t=this.axisManager.get(),n=this.axisManager.map(t,(function(e,t){return Math.min(t.range[1],Math.max(t.range[0],e))}));this.stopAnimation(),this.animateTo(n,this.getDuration(t,n),e)},t.animationEnd=function(){var e=this.getEventInfo();this._animateParam=null;var t=this.axisManager.filter(this.axisManager.get(),(function(e,t){return V(e,t.range,t.circular)}));Object.keys(t).length>0&&this.setTo(this.axisManager.map(t,(function(e,t){return z(e,t.range,t.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!e),this.axisManager.isOutside()?this.restore(e):this.finish(!!e)},t.finish=function(e){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(e)},t.getUserControl=function(e){var t=e.setTo();return t.destPos=this.axisManager.get(t.destPos),t.duration=oe(t.duration,this._options.minimumDuration,this._options.maximumDuration),t},t.animateTo=function(e,t,n){var i=this;this.stopAnimation();var s=this._createAnimationParam(e,t,n),r=u({},s.depaPos),a=this.eventManager.triggerAnimationStart(s),o=this.getUserControl(s);if(!a&&this.axisManager.every(o.destPos,(function(e,t){return V(e,t.range,t.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),a&&!A(o.destPos,r)){var c=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:r,destPos:o.destPos,duration:o.duration,delta:this.axisManager.getDelta(r,o.destPos),isTrusted:!!c,inputEvent:c,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},t.setTo=function(e,t){void 0===t&&(t=0);var n=Object.keys(e),i=this.axisManager.get(n);if(A(e,i))return this;this.interruptManager.setInterrupt(!0);var s=T(e,(function(e,t){return i[t]!==e}));return Object.keys(s).length?(s=this.axisManager.map(s,(function(e,t){var n=t.range,i=t.circular;return i&&(i[0]||i[1])?e:W(e,n,i)})),A(s,i)||(t>0?this.animateTo(s,t):(this.stopAnimation(),this.eventManager.triggerChange(s),this.finish(!1))),this):this},t.setBy=function(e,t){return void 0===t&&(t=0),this.setTo(O(this.axisManager.get(Object.keys(e)),(function(t,n){return t+e[n]})),t)},t.setOptions=function(e){this._options=u(u({},this._options),e)},t._createAnimationParam=function(e,t,n){var i=this.axisManager.get(),s=e,r=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:s,duration:oe(t,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,s),inputEvent:r,input:(null==n?void 0:n.input)||null,isTrusted:!!r,done:this.animationEnd}},t._animateLoop=function(e,t){var n=this;if(e.duration){this._animateParam=u(u({},e),{startTime:(new Date).getTime()});var i=O(e.destPos,(function(e){return e})),s=this._initState(this._animateParam),r=function(){n._raf=null;var e=n._animateParam,a=n._getNextState(s),o=!n.eventManager.triggerChange(a.pos,s.pos);if(s=a,a.finished)return e.destPos=n._getFinalPos(e.destPos,i),A(e.destPos,n.axisManager.get(Object.keys(e.destPos)))||n.eventManager.triggerChange(e.destPos,a.pos),void t();o?n.finish(!1):n._raf=y(r)};r()}else this.eventManager.triggerChange(e.destPos),t()},t._getFinalPos=function(e,t){var n=this,i=1e-6;return O(e,(function(e,s){if(e>=t[s]-i&&e<=t[s]+i)return t[s];var r=n._getRoundUnit(e,s);return k(e,r)}))},t._getRoundUnit=function(e,t){var n,i=this._options.round,s=null;if(!i){var r=this.axisManager.getAxisOptions(t);n=Math.max(C(r.range[0]),C(r.range[1]),C(e)),s=1/Math.pow(10,n)}return s||i},e}()),ue=function(e){function t(t,n,i){void 0===t&&(t={}),void 0===n&&(n={}),void 0===i&&(i={});var s=e.call(this)||this;return s.axis=t,s._inputs=[],s.options=u({easing:function(e){return 1-Math.pow(1-e,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(e){s.axis[e].startPos=i[e]})),s.interruptManager=new K(s.options),s.axisManager=new U(s.axis),s.eventManager=new Z(s),s.animationManager=new ce(s),s.inputObserver=new ae(s),s.eventManager.setAnimationManager(s.animationManager),s.eventManager.triggerChange(s.axisManager.get()),s}o(t,e);var n=t.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(e,t){var n;return n="string"==typeof e?e.split(" "):e.concat(),~this._inputs.indexOf(t)&&this.disconnect(t),t.mapAxes(n),t.connect(this.inputObserver),this._inputs.push(t),this},n.disconnect=function(e){if(e){var t=this._inputs.indexOf(e);t>=0&&(this._inputs[t].disconnect(),this._inputs.splice(t,1))}else this._inputs.forEach((function(e){return e.disconnect()})),this._inputs=[];return this},n.get=function(e){return this.axisManager.get(e)},n.setTo=function(e,t){return void 0===t&&(t=0),this.animationManager.setTo(e,t),this},n.setBy=function(e,t){return void 0===t&&(t=0),this.animationManager.setBy(e,t),this},n.setOptions=function(e){return this.options=u(u({},this.options),e),this.animationManager.setOptions(e),this},n.setAxis=function(e){return this.axisManager.setAxis(e),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(e){return this.animationManager.updateAnimation(e),this},n.isBounceArea=function(e){return this.axisManager.isOutside(e)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},t.VERSION="3.9.1",t.TRANSFORM=_,t.DIRECTION_NONE=1,t.DIRECTION_LEFT=2,t.DIRECTION_RIGHT=4,t.DIRECTION_UP=8,t.DIRECTION_DOWN=16,t.DIRECTION_HORIZONTAL=6,t.DIRECTION_VERTICAL=h,t.DIRECTION_ALL=30,l([r.D0],t.prototype,"holding",null),t=l([r.kU],t)}(s.Z),le=function(){function e(e,t){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(e){n._dragged&&(e.preventDefault(),e.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=b(e),this.options=u({inputType:["touch","mouse","pointer"],inputKey:[g],inputButton:[d],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},t),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this._direction=L(!!e[0],!!e[1]),this.axes=e},t.connect=function(e){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(e),this},t.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=Y(this.element,this.options,this._direction)),this},t.disable=function(){return this._enabled&&(this._enabled=!1,R(this._originalCssProps)||X(this.element,this._originalCssProps)),this},t.isEnabled=function(){return this._enabled},t.release=function(){var e=this._activeEvent,t=e.prevEvent;return e.onRelease(),this._observer.release(this,t,[0,0]),this._detachWindowEvent(e),this},t._onPanstart=function(e){var t=this.options,n=t.inputKey,i=t.inputButton,s=t.preventDefaultOnDrag,r=this._activeEvent,a=r.onEventStart(e,n,i);if(a&&this._enabled&&!(r.getTouches(e,i)>1)&&!1!==a.srcEvent.cancelable){var o=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,a),this._atRightEdge=p&&a.center.x>window.innerWidth-o,this._attachWindowEvent(r),s&&"touchstart"!==a.srcEvent.type&&a.srcEvent.preventDefault(),r.prevEvent=a}},t._onPanmove=function(e){var t=this,n=this.options,i=n.iOSEdgeSwipeThreshold,s=n.preventClickOnDrag,r=n.releaseOnScroll,a=n.inputKey,o=n.inputButton,c=n.threshold,u=n.thresholdAngle,l=this._activeEvent,d=l.onEventMove(e,a,o),v=l.getTouches(e,o);if(0===v||r&&d&&!d.srcEvent.cancelable)this._onPanend(e);else if(d&&this._enabled&&!(v>1)){var m=function(e,t){if(t<0||t>90)return 1;var n=Math.abs(e);return n>t&&n<180-t?h:6}(d.angle,u),f=B(6,this._direction,m),g=B(h,this._direction,m);if(l.prevEvent&&p){if(d.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),d.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return t.release()}),100))}var _=this._getDistance([d.deltaX,d.deltaY],[f,g]),E=this._getOffset([d.offsetX,d.offsetY],[f,g]),x=E.some((function(e){return 0!==e}));x&&(!1!==d.srcEvent.cancelable&&d.srcEvent.preventDefault(),d.srcEvent.stopPropagation()),d.preventSystemEvent=x,x&&(this._isOverThreshold||_>=c)&&(this._dragged=s,this._isOverThreshold=!0,this._observer.change(this,d,ie(this.axes,E))),l.prevEvent=d}},t._onPanend=function(e){var t=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(e),this._enabled&&0===n.getTouches(e,t)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,s=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[B(6,this._direction),B(h,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,s)}},t._attachWindowEvent=function(e){var t=this;null==e||e.move.forEach((function(e){window.addEventListener(e,t._onPanmove,re(e))})),null==e||e.end.forEach((function(e){window.addEventListener(e,t._onPanend,re(e))}))},t._detachWindowEvent=function(e){var t=this;null==e||e.move.forEach((function(e){window.removeEventListener(e,t._onPanmove)})),null==e||e.end.forEach((function(e){window.removeEventListener(e,t._onPanend)}))},t._getOffset=function(e,t){var n=this.options.scale;return[t[0]?e[0]*n[0]:0,t[1]?e[1]*n[1]:0]},t._getDistance=function(e,t){return Math.sqrt(Number(t[0])*Math.pow(e[0],2)+Number(t[1])*Math.pow(e[1],2))},t._attachElementEvent=function(e){var t=this,n=se(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=e,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(e){i.addEventListener(e,t._onPanstart)})),n.move.forEach((function(e){i.addEventListener(e,t._voidFunction)}))}},t._detachElementEvent=function(){var e=this,t=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==t||t.start.forEach((function(t){n.removeEventListener(t,e._onPanstart)})),null==t||t.move.forEach((function(t){n.removeEventListener(t,e._voidFunction)}))),this.disable(),this._observer=null},e}(),he=function(e){function t(t,n){var i=e.call(this,t,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}o(t,e);var n=t.prototype;return n.mapAxes=function(e){this._direction=ue.DIRECTION_ALL,this.axes=e},n._onPanstart=function(e){var t=this.options,n=t.inputKey,i=t.inputButton,s=this._activeEvent,r=s.onEventStart(e,n,i);if(r&&this.isEnabled()){var a=this.element.getBoundingClientRect();this._observer.hold(this,r),this._attachWindowEvent(s),this._coefficientForDistanceToAngle=360/(a.width*Math.PI),this._rotateOrigin=[a.left+(a.width-1)/2,a.top+(a.height-1)/2],this._prevAngle=null,this._triggerChange(r),s.prevEvent=r}},n._onPanmove=function(e){var t=this.options,n=t.inputKey,i=t.inputButton,s=this._activeEvent,r=s.onEventMove(e,n,i);r&&this.isEnabled()&&(!1!==r.srcEvent.cancelable&&r.srcEvent.preventDefault(),r.srcEvent.stopPropagation(),this._triggerChange(r),s.prevEvent=r)},n._onPanend=function(e){var t=this._activeEvent;if(t.onEventEnd(e),this.isEnabled()){var n=t.prevEvent;this._triggerChange(n);var i=n.velocityX,s=n.velocityY,r=Math.sqrt(i*i+s*s)*(this._lastDiff>0?-1:1);t.onRelease(),this._observer.release(this,n,[r*this._coefficientForDistanceToAngle]),this._detachWindowEvent(t)}},n._triggerChange=function(e){var t=this._getPosFromOrigin(e.center.x,e.center.y),n=t.x,i=t.y,s=S(n,i),r=s<0?360+s:s,a=this._getQuadrant(e.center.x,e.center.y),o=this._getDifference(this._prevAngle,r,this._prevQuadrant,a);this._prevAngle=r,this._prevQuadrant=a,0!==o&&(this._lastDiff=o,this._observer.change(this,e,ie(this.axes,[-o])))},n._getDifference=function(e,t,n,i){return null===e?0:1===n&&4===i?-e-(360-t):4===n&&1===i?360-e+t:t-e},n._getPosFromOrigin=function(e,t){return{x:e-this._rotateOrigin[0],y:this._rotateOrigin[1]-t}},n._getQuadrant=function(e,t){var n=this._getPosFromOrigin(e,t),i=n.x,s=n.y,r=0;return i>=0&&s>=0?r=1:i<0&&s>=0?r=2:i<0&&s<0?r=3:i>=0&&s<0&&(r=4),r},t}(le),de=function(){function e(e,t){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=b(e),this.options=u({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},t),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this.axes=e},t.connect=function(e){return this._activeEvent&&this._detachEvent(),this._attachEvent(e),this._originalCssProps=Y(this.element,this.options,30),this},t.disconnect=function(){return this._detachEvent(),R(this._originalCssProps)||X(this.element,this._originalCssProps),this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled=!0,this},t.disable=function(){return this._enabled=!1,this},t.isEnabled=function(){return this._enabled},t._onPinchStart=function(e){var t=this._activeEvent,n=t.onEventStart(e);n&&this._enabled&&2===t.getTouches(e)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,e),this._pinchFlag=!0,this._isOverThreshold=!1,t.prevEvent=n)},t._onPinchMove=function(e){var t=this.options.threshold,n=this._activeEvent,i=n.onEventMove(e);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(e)){var s=this._getDistance(i.scale),r=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||s>=t)&&(this._isOverThreshold=!0,this._observer.change(this,e,ie(this.axes,[r]))),n.prevEvent=i}},t._onPinchEnd=function(e){var t=this._activeEvent;t.onEventEnd(e),!this._pinchFlag||!this._enabled||t.getTouches(e)>=2||(t.onRelease(),this._observer.release(this,e,[0],0),this._baseValue=null,this._pinchFlag=!1)},t._attachEvent=function(e){var t=this,n=se(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=e,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(e){i.addEventListener(e,t._onPinchStart,!1)})),n.move.forEach((function(e){i.addEventListener(e,t._onPinchMove,!1)})),n.end.forEach((function(e){i.addEventListener(e,t._onPinchEnd,!1)}))}},t._detachEvent=function(){var e=this,t=this._activeEvent,n=this.element;n&&(null==t||t.start.forEach((function(t){n.removeEventListener(t,e._onPinchStart,!1)})),null==t||t.move.forEach((function(t){n.removeEventListener(t,e._onPinchMove,!1)})),null==t||t.end.forEach((function(t){n.removeEventListener(t,e._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},t._getOffset=function(e,t){return void 0===t&&(t=1),this._baseValue*(e-t)*this.options.scale},t._getDistance=function(e){return Math.abs(e-1)},e}(),ve=function(){function e(e,t){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=b(e),this.options=u({inputKey:[g],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},t),this._onWheel=this._onWheel.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this._direction=L(!!e[1],!!e[0]),this.axes=e},t.connect=function(e){return this._detachEvent(),this._attachEvent(e),this},t.disconnect=function(){return this._detachEvent(),this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled=!0,this},t.disable=function(){return this._enabled=!1,this},t.isEnabled=function(){return this._enabled},t._onWheel=function(e){var t=this;if(this._enabled&&J(e,this.options.inputKey)){var n=this._getOffset([e.deltaY,e.deltaX],[B(h,this._direction),B(6,this._direction)]);0===n[0]&&0===n[1]||(e.preventDefault(),this._holding||(this._observer.hold(this,e),this._holding=!0),this._observer.change(this,e,ie(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){t._holding&&(t._holding=!1,t._observer.release(t,e,[0]))}),this.options.releaseDelay))}},t._getOffset=function(e,t){var n=this.options.scale,i=this.options.useNormalized;return[t[0]&&e[0]?(e[0]>0?-1:1)*(i?1:Math.abs(e[0]))*n:0,t[1]&&e[1]?(e[1]>0?-1:1)*(i?1:Math.abs(e[1]))*n:0]},t._attachEvent=function(e){var t=this.element;if(!t)throw new Error("Element to connect input does not exist.");this._observer=e,t.addEventListener("wheel",this._onWheel),this._enabled=!0},t._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},e}(),me=function(){function e(e,t){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=b(e),this.options=u({scale:[1,1]},t),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this.axes=e},t.connect=function(e){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(e),this},t.disconnect=function(){return this._detachEvent(),this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled=!0,this},t.disable=function(){return this._enabled=!1,this},t.isEnabled=function(){return this._enabled},t._onKeydown=function(e){if(this._enabled){var t=!0,n=1,i=-1;switch(e.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:t=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(t=!1),t){e.preventDefault();var s=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,e),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,e,ie(this.axes,s))}}},t._onKeyup=function(e){var t=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){t._observer.release(t,e,[0,0]),t._holding=!1}),80))},t._attachEvent=function(e){var t=this.element;if(!t)throw new Error("Element to connect input does not exist.");this._observer=e,t.addEventListener("keydown",this._onKeydown,!1),t.addEventListener("keypress",this._onKeydown,!1),t.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},t._detachEvent=function(){var e=this.element;e&&(e.removeEventListener("keydown",this._onKeydown,!1),e.removeEventListener("keypress",this._onKeydown,!1),e.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},e}(),fe={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(e){return new ue(e.axis,e.options)},on:function(e,t,n){e.on(t,n)},off:function(e,t,n){e.off(t,n)},destroy:function(e){e.destroy()}};const ge=ue},4209:(e,t,n)=>{n.r(t),n.d(t,{default:()=>f});var i=n(2784),s=n(6277),r=n(6380),a=n(9817),o=n(2676),c=n(1100),u=n(4336);const l="max400_OcVf",h="packageName_fLHg",d="badges_vovK",v="btnsWrapper_Sf2B";class m extends i.Component{render(){return i.createElement(r.Z,null,i.createElement("div",{className:"container pb-6"},i.createElement("div",{className:l},i.createElement(u.default,null)),i.createElement("section",{className:"py-4"},i.createElement("div",{className:(0,s.Z)(h,"is-size-1","has-text-centered","mb-4")},"Axes"),i.createElement("div",{className:(0,s.Z)(d,"mb-2")},i.createElement("img",{alt:"npm (scoped)",src:"https://img.shields.io/npm/v/@egjs/axes?logo=npm"}),i.createElement("img",{alt:"License",src:"https://img.shields.io/github/license/naver/egjs-axes"}),i.createElement("img",{alt:"Typescript",src:"https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript"}),i.createElement("img",{alt:"GitHub Repo stars",src:"https://img.shields.io/github/stars/naver/egjs-axes?style=social"})),i.createElement(o.Z,{className:(0,s.Z)(l,"language-shell")},"npm install @egjs/axes"),i.createElement("div",{className:"subtitle has-text-centered"},"You can easily create a UI that responds to user actions."),i.createElement("div",{className:v},i.createElement(a.Z,{className:"button mr-2",to:"/docs"},"\ud83d\ude80 Get Started"),i.createElement(a.Z,{className:"button",to:"/docs/axes"},"\u2728 Demos"))),i.createElement("section",{className:"py-6"},i.createElement("p",{className:"title"},"Framework Ready"),i.createElement("p",{className:"subtitle"},"Use Axes in your favorite framework!"),i.createElement(c.default,null)),i.createElement("section",{className:"py-6"},i.createElement("div",{className:"title mb-6 has-text-centered"},"Demos"),i.createElement("ul",{className:"demo-list"},i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/axes"},i.createElement("p",null,i.createElement("img",{src:n(9380).Z})),i.createElement("p",null,"What is eg.Axes?"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/car360viewer"},i.createElement("p",null,i.createElement("img",{src:n(326).Z})),i.createElement("p",null,"Car 360\xba Viewer"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/cube"},i.createElement("p",null,i.createElement("img",{src:n(4045).Z})),i.createElement("p",null,"Rotate a Cube"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/3dcarousel"},i.createElement("p",null,i.createElement("img",{src:n(8523).Z})),i.createElement("p",null,"3D Carousel"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/cardinhand"},i.createElement("p",null,i.createElement("img",{src:n(9672).Z})),i.createElement("p",null,"Cards in hands"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/pulltorefresh"},i.createElement("p",null,i.createElement("img",{src:n(7041).Z})),i.createElement("p",null,"Pull to Refresh"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/minimap"},i.createElement("p",null,i.createElement("img",{src:n(7588).Z})),i.createElement("p",null,"Mini Map"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/bubble"},i.createElement("p",null,i.createElement("img",{src:n(871).Z})),i.createElement("p",null,"Bubble"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/subway"},i.createElement("p",null,i.createElement("img",{src:n(7521).Z})),i.createElement("p",null,"Subway"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/schedule"},i.createElement("p",null,i.createElement("img",{src:n(4236).Z})),i.createElement("p",null,"Schedule"))),i.createElement("li",{className:"demo-item"},i.createElement("a",{href:"docs/nestedaxes"},i.createElement("p",null,i.createElement("img",{src:n(4430).Z})),i.createElement("p",null,"Nested Axes")))))))}}const f=m},4336:(e,t,n)=>{n.r(t),n.d(t,{default:()=>w});var i,s=n(2784),r=n(2359),a=n(4458);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...r}=e;return s.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",viewBox:"21 29 65 65","aria-labelledby":n},r),t?s.createElement("title",{id:n},t):null,i||(i=s.createElement("path",{d:"M21 61.5V94l32.3-.2 32.2-.3.3-32.3L86 29H21v32.5zm60.8-.3-.3 28.3-28.2.3L25 90V33h57l-.2 28.2z"})))};var u;function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...i}=e;return s.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",viewBox:"16.1 135 73.61 63.84","aria-labelledby":n},i),t?s.createElement("title",{id:n},t):null,u||(u=s.createElement("path",{d:"m34.3 166.8-18.2 31.7 36.6.3c20.1.1 36.8 0 37-.2.5-.5-35.9-63.6-36.6-63.6-.3 0-8.8 14.3-18.8 31.8zm34.1 1.8c8.1 14.1 14.6 25.8 14.3 26-.2.2-13.7.3-30.1.2l-29.6-.3 14.7-25.7c8.2-14.2 15.1-25.7 15.4-25.8.3 0 7.2 11.5 15.3 25.6z"})))};var d;function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...i}=e;return s.createElement("svg",v({xmlns:"http://www.w3.org/2000/svg",viewBox:"18.69 243.57 68.93 68.93","aria-labelledby":n},i),t?s.createElement("title",{id:n},t):null,d||(d=s.createElement("path",{d:"M46 244.4c-11.3 2.5-19.8 9.5-24.6 20.1-2.3 4.9-2.8 7.4-2.7 13.5.1 14.2 7.3 25.9 19.8 31.7 5.2 2.4 7.2 2.8 15 2.8 8.1-.1 9.6-.4 15-3.2 7.6-4 12.6-9.2 16.2-16.8 3.7-7.9 3.9-20.3.5-27.8-7-15.6-23.1-23.9-39.2-20.3zm17 4.8c8.7 2.4 16.8 11 19.6 20.5 5.9 20.4-10.7 40.8-32 39.1-20.9-1.7-34.2-24-25.4-42.9C32 251 46.7 244.5 63 249.2z"})))};var f;function g(){return g=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...i}=e;return s.createElement("svg",g({xmlns:"http://www.w3.org/2000/svg",viewBox:"288.6 147.27 33.4 29.73","aria-labelledby":n},i),t?s.createElement("title",{id:n},t):null,f||(f=s.createElement("path",{d:"M299.3 148.2c-2.9 1.4-2.9 1.4.4 8.8l2.6 6.1-6.9 7-6.8 6.9h4.6c4.2 0 4.9-.4 8.1-4.2l3.5-4.2 2.1 4.2c2 3.9 2.5 4.2 6.1 4.2 2.2 0 4-.2 4-.5s-1.1-2.7-2.4-5.3c-4.3-8.7-4.3-8.6 1.8-15.6 3.1-3.5 5.6-6.7 5.6-7 0-.3-1.7-.6-3.7-.6-3.2.1-4.3.7-6.8 4-1.6 2.1-3.2 3.9-3.6 4-.3 0-1.5-2-2.7-4.5-2.3-4.8-2.5-4.9-5.9-3.3z"})))};var _;function E(){return E=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...i}=e;return s.createElement("svg",E({xmlns:"http://www.w3.org/2000/svg",viewBox:"290.1 152 31.9 48","aria-labelledby":n},i),t?s.createElement("title",{id:n},t):null,_||(_=s.createElement("path",{d:"m303.5 154-4 1.7-1.9 10.7c-1.5 8.4-1.7 11.2-.8 13.1 1.5 3.2 4.8 4.5 8.5 3.4 2.8-.8 2.8-.7 2.1 2.4-1.2 5.8-3.2 8.7-6.1 8.7-1.5 0-3.5-.8-4.5-1.7-1.8-1.6-2-1.6-4.3 1.2l-2.4 3 2 1.7c1.4 1.2 3.8 1.8 7 1.8 4 0 5.4-.5 8.4-3.1 2-1.8 4.2-4.4 5-5.9 1.6-3.1 9.5-33.8 9.5-37v-2l-4 2c-3.8 1.9-4 2.3-5.7 10.2-1.3 6.4-2.4 9-4.6 11.2-4.7 4.8-5.3 2.3-2.2-10.4 1.4-6.1 2.5-11.5 2.3-11.9-.2-.5-2.1-.1-4.3.9z"})))};var b;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...i}=e;return s.createElement("svg",y({xmlns:"http://www.w3.org/2000/svg",viewBox:"293.48 264 24.17 29","aria-labelledby":n},i),t?s.createElement("title",{id:n},t):null,b||(b=s.createElement("path",{d:"M299 265.9c0 1.1-.3 2.6-.6 3.5-.5 1.3.2 1.6 4 1.6 2.5 0 4.6.3 4.6.7 0 .5-3.2 4.6-7 9.2-4.1 4.9-6.8 9.1-6.5 9.9.3.7.5 1.6.5 1.8 0 .2 4.7.4 10.5.4H315v-3c0-1.7.1-3.3.3-3.7.1-.4-2.4-.6-5.5-.4-3.2.1-5.8-.1-5.8-.5s2.6-3.9 5.8-7.7c8-9.9 8.3-10.3 7.6-12.1-.5-1.3-2.3-1.6-9.5-1.6-8.1 0-8.9.2-8.9 1.9z"})))};function w(){const[e,t]=(0,s.useState)(null),[n,i]=(0,s.useState)(null),o=25,u=(0,r.eD)({x:{range:[-200,150],startPos:-125},y:{range:[0,275],startPos:55}}),l=(0,r.eD)({x:{range:[-200,150],startPos:-125},y:{range:[0,275],startPos:135}}),d=(0,r.eD)({x:{range:[-200,150],startPos:-125},y:{range:[0,275],startPos:215}}),v=(0,r.eD)({x:{range:[-200,150],startPos:75},y:{range:[0,275],startPos:55}}),f=(0,r.eD)({x:{range:[-200,150],startPos:75},y:{range:[0,275],startPos:135}}),g=(0,r.eD)({x:{range:[-200,150],startPos:75},y:{range:[0,275],startPos:215}});return(0,s.useEffect)((()=>{const e=document.getElementById("logo-container").getBoundingClientRect().width;t(60+e/2),i(e/2),u.connect("x y",new a.Ju("#square")),l.connect("x y",new a.Ju("#triangle")),d.connect("x y",new a.Ju("#circle")),v.connect("x y",new a.Ju("#x")),f.connect("x y",new a.Ju("#y")),g.connect("x y",new a.Ju("#z")),[u,l,d,v,f,v].forEach((t=>{t.setAxis({x:{range:[-e/2+10,e/2-60]}})}))}),[]),s.createElement("div",null,s.createElement("div",{id:"logo-container",style:{opacity:""+(e?"1":"0")}},s.createElement("div",{id:"square",className:"item",style:{transform:`translateX(${u.x}px) translateY(${u.y}px)`}},s.createElement(c,null)),s.createElement("div",{id:"triangle",className:"item light",style:{transform:`translateX(${l.x}px) translateY(${l.y}px)`}},s.createElement(h,null)),s.createElement("div",{id:"circle",className:"item",style:{transform:`translateX(${d.x}px) translateY(${d.y}px)`}},s.createElement(m,null)),s.createElement("div",{id:"x",className:"item bold",style:{transform:`translateX(${v.x}px) translateY(${v.y}px)`}},s.createElement(p,null)),s.createElement("div",{id:"y",className:"item",style:{transform:`translateX(${f.x}px) translateY(${f.y}px)`}},s.createElement(x,null)),s.createElement("div",{id:"z",className:"item bold",style:{transform:`translateX(${g.x}px) translateY(${g.y}px)`}},s.createElement(M,null)),s.createElement("svg",{className:"line"},s.createElement("line",{x1:e+u.x,y1:o+u.y,x2:n+v.x,y2:o+v.y,strokeWidth:"4"})),s.createElement("svg",{className:"line"},s.createElement("line",{x1:e+u.x,y1:o+u.y,x2:n+f.x,y2:o+f.y,strokeWidth:"4"})),s.createElement("svg",{className:"line"},s.createElement("line",{x1:e+l.x,y1:o+l.y,x2:n+v.x,y2:o+v.y,strokeWidth:"4"})),s.createElement("svg",{className:"line"},s.createElement("line",{x1:e+l.x,y1:o+l.y,x2:n+f.x,y2:o+f.y,strokeWidth:"4"})),s.createElement("svg",{className:"line"},s.createElement("line",{x1:e+l.x,y1:o+l.y,x2:n+g.x,y2:o+g.y,strokeWidth:"4"})),s.createElement("svg",{className:"line"},s.createElement("line",{x1:e+d.x,y1:o+d.y,x2:n+f.x,y2:o+f.y,strokeWidth:"4"})),s.createElement("svg",{className:"line"},s.createElement("line",{x1:e+d.x,y1:o+d.y,x2:n+g.x,y2:o+g.y,strokeWidth:"4"}))))}},7483:(e,t,n)=>{n.r(t),n.d(t,{default:()=>r});var i=n(2784),s=n(4209);function r(){return i.createElement(s.default,null)}},1100:(e,t,n)=>{n.r(t),n.d(t,{default:()=>o});var i=n(2784),s=n(2179),r=n(7492);const a="is-vue3_bD0B",o=()=>{const e=[new r.il];return i.createElement(s.Co,{className:"mb-2",plugins:e,align:"prev",circular:!0},i.createElement("div",{className:"framework-logo button mr-2 is-info"},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/react.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/react-axes",target:"_blank"},"@egjs/react-axes")),i.createElement("div",{className:"framework-logo button mr-2 is-success"},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/vue.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/vue-axes",target:"_blank"},"@egjs/vue-axes")),i.createElement("div",{className:"framework-logo button mr-2 is-light"},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/svelte.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/svelte-axes",target:"_blank"},"@egjs/svelte-axes")),i.createElement("div",{className:`framework-logo button mr-2 ${a}`},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/vue.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/vue2-axes",target:"_blank"},"@egjs/vue2-axes")),i.createElement("div",{className:"framework-logo button mr-2 is-info"},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/react.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/react-axes",target:"_blank"},"@egjs/react-axes")),i.createElement("div",{className:"framework-logo button mr-2 is-success"},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/vue.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/vue-axes",target:"_blank"},"@egjs/vue-axes")),i.createElement("div",{className:"framework-logo button mr-2 is-light"},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/svelte.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/svelte-axes",target:"_blank"},"@egjs/svelte-axes")),i.createElement("div",{className:`framework-logo button mr-2 ${a}`},i.createElement("div",{className:"framework-logo-wrapper mr-2"},i.createElement("img",{src:"icon/vue.svg"})),i.createElement("a",{href:"https://npmjs.com/@egjs/vue2-axes",target:"_blank"},"@egjs/vue2-axes")))}},2359:(e,t,n)=>{n.d(t,{eD:()=>a});var i=n(4458),s=n(3566),r=function(){return r=Object.assign||function(e){for(var t,n=1,i=arguments.length;n{n.d(t,{Z:()=>i});const i=n.p+"assets/images/3dcarousel-c26d6f525bc990118b26e43d7945bd34.gif"},9380:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/axes-4a2cf07748b35dc49ab13fc31f9da298.gif"},871:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/bubble-3dc0bbe615cd40d19e6bc8f81b96834a.gif"},326:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/car360viewer-d277517758ffda9e592ff70fff4b0280.gif"},9672:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/cardinhand-00c709d2fa762fbecd99b1d770e44878.gif"},4045:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/cube-d46dc806c71ad337595250cedbf19067.gif"},7588:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/minimap-30da6f1d0d1ef37631de2db4ea70c24f.gif"},4430:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/nestedaxes-454958ecc10bae370ba6168aa3902563.gif"},7041:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/pulltorefresh-16db3a253dec235ae527ace907cc0469.gif"},4236:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/schedule-75bcd287a204db7f6b5cc4581dac21e5.gif"},7521:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/subway-41a57b06d987c29180b3f594ea01d061.gif"}}]); \ No newline at end of file diff --git a/assets/js/1eb4b2b4.29947bf3.js b/assets/js/1eb4b2b4.29947bf3.js new file mode 100644 index 00000000..1b36d636 --- /dev/null +++ b/assets/js/1eb4b2b4.29947bf3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[4953],{3566:(t,e,n)=>{n.d(e,{q:()=>s});var i=n(5362),r=n(2784);function s(t,e){var n=(0,r.useRef)(!0),s=(0,r.useMemo)((function(){return(0,i.tG)(t,e)}),[]),a=s.state(),o=(0,i.XP)(a),u=(0,r.useState)({})[0],h=function(t){var e=(0,r.useState)((function(){return a[t]}));u[t]={getter:!1,set:e[1],value:e[0]}};for(var c in a)h(c);n.current=!0;var l=(0,r.useMemo)((function(){return s.methods()}),[]);(0,r.useEffect)((function(){n.current=!1})),(0,r.useEffect)((function(){s.mounted();var t=s.instance();return o.forEach((function(e){t.subscribe(e,(function(t){u[e].value=t,u[e].getter&&u[e].set(t)}))})),s.init(),function(){s.destroy()}}),[]);var v=o.reduce((function(t,e){return l[e]||Object.defineProperty(t,e,{enumerable:!0,get:function(){return n.current&&(u[e].getter=!0),u[e].value}}),t}),{});return s.events().forEach((function(t){v[(0,i._A)("on ".concat(t))]=function(e,n){var i=(0,r.useMemo)((function(){return s.on(t,e),e}),n);(0,r.useEffect)((function(){return s.off(t,i),s.on(t,i),function(){s.off(t,i)}}),[i])}})),(0,i.XP)(l).forEach((function(t){v[t]=l[t]})),v}},4458:(t,e,n)=>{n.d(e,{HA:()=>dt,Ju:()=>ct,ZP:()=>gt,cD:()=>_t,f3:()=>ft,nj:()=>vt,zV:()=>lt});var i=n(5161),r=n(1588),s=n(5362),a=function(t,e){return a=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])},a(t,e)};function o(t,e){function n(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var u,h=function(){return h=Object.assign||function(t){for(var e,n=1,i=arguments.length;n=0;o--)(r=t[o])&&(a=(s<3?r(a):s>3?r(e,n,a):r(e,n))||a);return s>3&&a&&Object.defineProperty(e,n,a),a}u="undefined"==typeof window?{navigator:{userAgent:""}}:window;var l=24,v="left",d="right",f="middle",_={1:v,2:f,3:d},g="any",p="ontouchstart"in u&&"safari"===(0,i.ZP)().browser.name,m=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=t,n=x(i.childNodes)}else n=x(document.querySelectorAll(t));e||(n=n.length>=1?n[0]:void 0)}else t===u?n=t:"value"in t||"current"in t?n=t.value||t.current:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in u&&t instanceof jQuery||t.constructor.prototype.jquery?n=e?t.toArray():t.get(0):Array.isArray(t)&&(n=t.map((function(t){return y(t)})),e||(n=n.length>=1?n[0]:void 0)):n=t;return n},b=u.requestAnimationFrame||u.webkitRequestAnimationFrame,M=u.cancelAnimationFrame||u.webkitCancelAnimationFrame;if(b&&!M){var P={},w=b;b=function(t){var e=w((function(n){P[e]&&t(n)}));return P[e]=!0,e},M=function(t){delete P[t]}}else b&&M||(b=function(t){return u.setTimeout((function(){t(u.performance&&u.performance.now&&u.performance.now()||(new Date).getTime())}),16)},M=u.clearTimeout);var O=function(t,e){var n={};for(var i in t)i&&(n[i]=e(t[i],i));return n},T=function(t,e){var n={};for(var i in t)i&&e(t[i],i)&&(n[i]=t[i]);return n},D=function(t,e){for(var n in t)if(n&&!e(t[n],n))return!1;return!0},A=function(t,e){return D(t,(function(t,n){return t===e[n]}))},I={},C=function(t,e){return I[e]||(I[e]=R(e)),I[e](t)},k=function(t,e){return t&&e?O(t,(function(t,n){return C(t,"number"==typeof e?e:e[n])})):t},S=function(t){if(!isFinite(t))return 0;var e="".concat(t);if(e.indexOf("e")>=0){for(var n=0,i=1;Math.round(t*i)/i!==t;)i*=10,n++;return n}return e.indexOf(".")>=0?e.length-e.indexOf(".")-1:0},R=function(t){var e=t<1?Math.pow(10,S(t)):1;return function(n){return 0===t?0:Math.round(Math.round(n/t)*t*e)/e}},j=function(t,e){return 180*Math.atan2(e,t)/Math.PI},L=function(t){var e=!0;return Object.keys(E).forEach((function(n){t&&t[n]===E[n]||(e=!1)})),e},B=function(t,e){return t&&e?30:t?6:e?l:1},N=function(t,e,n){return n?!!(30===e||e&t&&n&t):!!(e&t)},X=function(t,e,n){var i,r=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),s={};if(t&&t.style){var a=e.touchAction?e.touchAction:r[n],o=h(h({},E),{"touch-action":"none"===t.style["touch-action"]?"none":a});Object.keys(o).forEach((function(e){s[e]=t.style[e]})),Object.keys(o).forEach((function(e){t.style[e]=o[e]}))}return s},Y=function(t,e){t&&t.style&&e&&Object.keys(e).forEach((function(n){t.style[n]=e[n]}))},K=function(){function t(t){this._axes=t,this.holdingCount=0}var e=t.prototype;return e.hold=function(t,e){var n=this._getRoundPos(t).roundPos;this._axes.trigger(new r.L("hold",{pos:n,input:e.input||null,inputEvent:e.event||null,isTrusted:!0}))},e.triggerRelease=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration),this._axes.trigger(new r.L("release",h(h({},t),{bounceRatio:this._getBounceRatio(n)})))},e.triggerChange=function(t,e,n,i){var a=this;void 0===i&&(i=!1);var o=this.animationManager,u=o.axisManager,h=o.getEventInfo(),c=this._getRoundPos(t,e),l=c.roundPos,v=c.roundDepa,d=u.moveTo(l,v),f=(null==n?void 0:n.event)||(null==h?void 0:h.event)||null,_={pos:d.pos,delta:d.delta,bounceRatio:this._getBounceRatio(d.pos),holding:i,inputEvent:f,isTrusted:!!f,input:(null==n?void 0:n.input)||(null==h?void 0:h.input)||null,set:f?this._createUserControll(d.pos):function(){}},g=new r.L("change",_);return this._axes.trigger(g),Object.keys(d.pos).forEach((function(t){var e=d.pos[t];(0,s.CV)(a._axes,t,e).current=e})),f&&u.set(_.set().destPos),!g.isCanceled()},e.triggerAnimationStart=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration);var s=new r.L("animationStart",t);return this._axes.trigger(s),!s.isCanceled()},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("animationEnd",{isTrusted:t}))},e.triggerFinish=function(t){void 0===t&&(t=!1),this._axes.trigger(new r.L("finish",{isTrusted:t}))},e.setAnimationManager=function(t){this.animationManager=t},e.destroy=function(){this._axes.off()},e._createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:h({},t),duration:e};return function(t,e){return t&&(n.destPos=h({},t)),void 0!==e&&(n.duration=e),n}},e._getRoundPos=function(t,e){var n=this._axes.options.round;return{roundPos:k(t,n),roundDepa:k(e,n)}},e._getBounceRatio=function(t){return this._axes.axisManager.map(t,(function(t,e){return te.range[1]&&0!==e.bounce[1]?(t-e.range[1])/e.bounce[1]:0}))},c([s.cn],t.prototype,"holdingCount",void 0),t}(),W=function(){function t(t){this._options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this._options.interruptable||this._prevented},e.isInterrupted=function(){return!this._options.interruptable&&this._prevented},e.setInterrupt=function(t){this._options.interruptable||(this._prevented=t)},t}(),F=function(t,e,n,i){var r=t,s=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return r=Math.max(s[0],r),r=Math.min(s[1],r)},V=function(t,e){return te[1]},z=function(t,e,n){return n[1]&&t>e[1]||n[0]&&ts&&(i=(i-s)%a+r),n[0]&&t-1||e.indexOf("none")>-1&&!t.shiftKey&&!t.ctrlKey&&!t.altKey&&!t.metaKey||e.indexOf("shift")>-1&&t.shiftKey||e.indexOf("ctrl")>-1&&t.ctrlKey||e.indexOf("alt")>-1&&t.altKey||e.indexOf("meta")>-1&&t.metaKey)},Z=function(){function t(){var t=this;this._stopContextMenu=function(e){e.preventDefault(),u.removeEventListener("contextmenu",t._stopContextMenu)}}var e=t.prototype;return e.extendEvent=function(t){var e,n=this.prevEvent,i=this._getCenter(t),r=n?this._getMovement(t):{x:0,y:0},s=n?this._getScale(t):1,a=n?j(i.x-n.center.x,i.y-n.center.y):0,o=n?n.deltaX+r.x:r.x,u=n?n.deltaY+r.y:r.y,h=r.x,c=r.y,l=this._latestInterval,v=Date.now(),d=l?v-l.timestamp:0,f=n?n.velocityX:0,_=n?n.velocityY:0;return(!l||d>=16)&&(l&&(f=(e=[(o-l.deltaX)/d,(u-l.deltaY)/d])[0],_=e[1]),this._latestInterval={timestamp:v,deltaX:o,deltaY:u}),{srcEvent:t,scale:s,angle:a,center:i,deltaX:o,deltaY:u,offsetX:h,offsetY:c,velocityX:f,velocityY:_,preventSystemEvent:!0}},e._getDistance=function(t,e){var n=e.clientX-t.clientX,i=e.clientY-t.clientY;return Math.sqrt(n*n+i*i)},e._getButton=function(t){var e={1:v,2:d,4:f},n=this._isTouchEvent(t)?v:e[t.buttons];return n||null},e._isTouchEvent=function(t){return t.type&&t.type.indexOf("touch")>-1},e._isValidButton=function(t,e){return e.indexOf(t)>-1},e._isValidEvent=function(t,e,n){return(!e||H(t,e))&&(!n||this._isValidButton(this._getButton(t),n))},e._preventMouseButton=function(t,e){e===d?u.addEventListener("contextmenu",this._stopContextMenu):e===f&&t.preventDefault()},t}(),G=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown"],e.move=["mousemove"],e.end=["mouseup"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(t,e){return e&&this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},e}(Z),tt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["touchstart"],e.move=["touchmove"],e.end=["touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e){return this._baseTouches=t.touches,this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventMove=function(t,e){return this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventEnd=function(t){this._baseTouches=t.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t){return t.touches.length},n._getScale=function(t){return 2!==t.touches.length||this._baseTouches.length<2?null:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(t){return{x:t.touches[0].clientX,y:t.touches[0].clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.touches[0].identifier!==e.touches[0].identifier?{x:0,y:0}:{x:t.touches[0].clientX-e.touches[0].clientX,y:t.touches[0].clientY-e.touches[0].clientY}},e}(Z),et=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=J?["pointerdown"]:["MSPointerDown"],e.move=J?["pointermove"]:["MSPointerMove"],e.end=J?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],e._firstInputs=[],e._recentInputs=[],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?(this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventEnd=function(t){this._removePointerEvent(t)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.pointerId!==e.pointerId?{x:0,y:0}:{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},n._updatePointerEvent=function(t){var e=this,n=!1;this._recentInputs.forEach((function(i,r){i.pointerId===t.pointerId&&(n=!0,e._recentInputs[r]=t)})),n||(this._firstInputs.push(t),this._recentInputs.push(t))},n._removePointerEvent=function(t){this._firstInputs=this._firstInputs.filter((function(e){return e.pointerId!==t.pointerId})),this._recentInputs=this._recentInputs.filter((function(e){return e.pointerId!==t.pointerId}))},e}(Z),nt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown","touchstart"],e.move=["mousemove","touchmove"],e.end=["mouseup","touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isTouchEvent(t)&&(this._baseTouches=t.touches),this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(t){this._isTouchEvent(t)&&(this._baseTouches=t.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t,e){return this._isTouchEvent(t)?t.touches.length:this._isValidButton(_[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(t){return this._isTouchEvent(t)?2!==t.touches.length||this._baseTouches.length<2?1:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(t){return this._isTouchEvent(t)?{x:t.touches[0].clientX,y:t.touches[0].clientY}:{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this,n=[t,this.prevEvent.srcEvent].map((function(t){return e._isTouchEvent(t)?{id:t.touches[0].identifier,x:t.touches[0].clientX,y:t.touches[0].clientY}:{id:null,x:t.clientX,y:t.clientY}})),i=n[0],r=n[1];return i.id===r.id?{x:i.x-r.x,y:i.y-r.y}:{x:0,y:0}},e}(Z),it=function(t,e){return e.reduce((function(e,n,i){return t[i]&&(e[t[i]]=n),e}),{})},rt=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach((function(t){switch(t){case"mouse":n=!0;break;case"touch":e=$;break;case"pointer":i=Q}})),i?new et:e&&n?new nt:e?new tt:n?new G:null};function st(t){return t.indexOf("touch")>-1&&{passive:!1}}var at=function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager,s=t.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=e,this._interruptManager=n,this._eventManager=i,this._axisManager=r,this._animationManager=s}var e=t.prototype;return e.get=function(t){return this._axisManager.get(t.axes)},e.hold=function(t,e){if(!this._interruptManager.isInterrupted()&&t.axes.length){var n={input:t,event:e};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(t.axes),this._moveDistance=this._axisManager.get(t.axes)}},e.change=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(t){return 0===t}))){var r=e.srcEvent?e.srcEvent:e;if(!r.__childrenAxesAlreadyChanged){var s,a=this._moveDistance||this._axisManager.get(t.axes);s=O(a,(function(t,e){return t+(n[e]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(s,(function(t,e){var n=e.circular,i=e.range;return n&&(n[0]||n[1])?q(t,i,n):t}))),this._isOutside&&this._axisManager.every(a,(function(t,e){return!V(t,e.range)}))&&(this._isOutside=!1),a=this._atOutside(a),s=this._atOutside(s),this.options.nested&&this._isEndofAxis(n,a,s)||(r.__childrenAxesAlreadyChanged=!0);var o={input:t,event:e};if(i){var u=this._animationManager.getDuration(s,a);this._animationManager.animateTo(s,u,o)}else{!this._eventManager.triggerChange(s,a,o,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},e.release=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var r=e.srcEvent?e.srcEvent:e;r.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var s=this._axisManager.get(t.axes),a=this._axisManager.get(),o=this._animationManager.getDisplacement(n),u=it(t.axes,o),c=this._axisManager.get(this._axisManager.map(u,(function(t,e,n){return e.circular&&(e.circular[0]||e.circular[1])?s[n]+t:F(s[n]+t,e.range,e.circular,e.bounce)})));r.__childrenAxesAlreadyReleased=!0;var l=this._animationManager.getDuration(c,s,i);0===l&&(c=h({},a));var v={depaPos:a,destPos:c,duration:l,delta:this._axisManager.getDelta(a,c),inputEvent:e,input:t,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(v),0===this._eventManager.holdingCount&&(this._moveDistance=null);var d=this._animationManager.getUserControl(v),f=A(d.destPos,a),_={input:t,event:e};f||0===d.duration?(f||this._eventManager.triggerChange(d.destPos,a,_,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(_):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(d.destPos,d.duration,_)}},e._atOutside=function(t){var e=this;return this._isOutside?this._axisManager.map(t,(function(t,e){var n=e.range[0]-e.bounce[0],i=e.range[1]+e.bounce[1];return t>i?i:tr?t:tr?r+e._animationManager.interpolate(t-r,s[1]):t}))},e._isEndofAxis=function(t,e,n){return this._axisManager.every(e,(function(i,r,s){return 0===t[s]||e[s]===n[s]&&(a=i,o=r.range,u=r.bounce,!(h=r.circular)[0]&&a===o[0]-u[0]||!h[1]&&a===o[1]+u[1]);var a,o,u,h}))},t}(),ot=function(t,e,n){return Math.max(Math.min(t,n),e)},ut=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._useDuration=!0,e}o(e,t);var n=e.prototype;return n.interpolate=function(t,e){var n=this._easing(1e-5)/1e-5;return this._easing(t/(e*n))*e},n.updateAnimation=function(t){var e,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,r=(null==t?void 0:t.destPos)||n.destPos,s=null!==(e=null==t?void 0:t.duration)&&void 0!==e?e:n.duration;if((null==t?void 0:t.restart)||s<=i)this.setTo(r,s-i);else{if(null==t?void 0:t.destPos){var a=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(a,r),n.destPos=r}if(null==t?void 0:t.duration){var o=(i+this._durationOffset)/n.duration;this._durationOffset=o*s-i,n.duration=s}}}},n._initState=function(t){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:t.depaPos,easingPer:0,finished:!1}},n._getNextState=function(t){var e=this,n=this._animateParam,i=t.pos,r=n.destPos,s=O(i,(function(t,e){return t<=r[e]?1:-1})),a=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,o=this._easing(a),u=this.axisManager.map(i,(function(t,u,h){var c=a>=1?r[h]:t+n.delta[h]*(o-e._prevEasingPer)/(1-e._initialEasingPer),l=q(c,u.range,u.circular);if(c!==l){var v=s[h]*(u.range[1]-u.range[0]);r[h]-=v,i[h]-=v}return l}));return this._prevEasingPer=o,{pos:u,easingPer:o,finished:o>=1}},n._easing=function(t){return t>1?1:this._options.easing(t)},e}(function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,r=t.axisManager;this._options=e,this.interruptManager=n,this.eventManager=i,this.axisManager=r,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(t,e,n){var i,r=this;if(void 0!==n)i=n;else{var s=O(e,(function(e,n){return function(t,e){var n=Math.sqrt(t/e*2);return n<100?0:n}(Math.abs(e-t[n]),r._options.deceleration)}));i=Object.keys(s).reduce((function(t,e){return Math.max(t,s[e])}),-1/0)}return ot(i,this._options.minimumDuration,this._options.maximumDuration)},e.getDisplacement=function(t){var e=Math.pow(t.reduce((function(t,e){return t+e*e}),0),1/t.length),n=Math.abs(e/-this._options.deceleration);return t.map((function(t){return t/2*n}))},e.stopAnimation=function(t){if(this._animateParam){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}));D(n,(function(t,n){return e[n]===t}))||this.eventManager.triggerChange(n,e,t,!!t),this._animateParam=null,this._raf&&(i=this._raf,M(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==t?void 0:t.event))}var i},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return Math.min(e.range[1],Math.max(e.range[0],t))}));this.stopAnimation(),this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axisManager.filter(this.axisManager.get(),(function(t,e){return z(t,e.range,e.circular)}));Object.keys(e).length>0&&this.setTo(this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!t),this.axisManager.isOutside()?this.restore(t):this.finish(!!t)},e.finish=function(t){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(t)},e.getUserControl=function(t){var e=t.setTo();return e.destPos=this.axisManager.get(e.destPos),e.duration=ot(e.duration,this._options.minimumDuration,this._options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this;this.stopAnimation();var r=this._createAnimationParam(t,e,n),s=h({},r.depaPos),a=this.eventManager.triggerAnimationStart(r),o=this.getUserControl(r);if(!a&&this.axisManager.every(o.destPos,(function(t,e){return z(t,e.range,e.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),a&&!A(o.destPos,s)){var u=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:s,destPos:o.destPos,duration:o.duration,delta:this.axisManager.getDelta(s,o.destPos),isTrusted:!!u,inputEvent:u,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},e.setTo=function(t,e){void 0===e&&(e=0);var n=Object.keys(t),i=this.axisManager.get(n);if(A(t,i))return this;this.interruptManager.setInterrupt(!0);var r=T(t,(function(t,e){return i[e]!==t}));return Object.keys(r).length?(r=this.axisManager.map(r,(function(t,e){var n=e.range,i=e.circular;return i&&(i[0]||i[1])?t:F(t,n,i)})),A(r,i)||(e>0?this.animateTo(r,e):(this.stopAnimation(),this.eventManager.triggerChange(r),this.finish(!1))),this):this},e.setBy=function(t,e){return void 0===e&&(e=0),this.setTo(O(this.axisManager.get(Object.keys(t)),(function(e,n){return e+t[n]})),e)},e.setOptions=function(t){this._options=h(h({},this._options),t)},e._createAnimationParam=function(t,e,n){var i=this.axisManager.get(),r=t,s=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:r,duration:ot(e,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,r),inputEvent:s,input:(null==n?void 0:n.input)||null,isTrusted:!!s,done:this.animationEnd}},e._animateLoop=function(t,e){var n=this;if(t.duration){this._animateParam=h(h({},t),{startTime:(new Date).getTime()});var i=O(t.destPos,(function(t){return t})),r=this._initState(this._animateParam),s=function(){n._raf=null;var t=n._animateParam,a=n._getNextState(r),o=!n.eventManager.triggerChange(a.pos,r.pos);if(r=a,a.finished)return t.destPos=n._getFinalPos(t.destPos,i),A(t.destPos,n.axisManager.get(Object.keys(t.destPos)))||n.eventManager.triggerChange(t.destPos,a.pos),void e();o?n.finish(!1):n._raf=b(s)};s()}else this.eventManager.triggerChange(t.destPos),e()},e._getFinalPos=function(t,e){var n=this,i=1e-6;return O(t,(function(t,r){if(t>=e[r]-i&&t<=e[r]+i)return e[r];var s=n._getRoundUnit(t,r);return C(t,s)}))},e._getRoundUnit=function(t,e){var n,i=this._options.round,r=null;if(!i){var s=this.axisManager.getAxisOptions(e);n=Math.max(S(s.range[0]),S(s.range[1]),S(t)),r=1/Math.pow(10,n)}return r||i},t}()),ht=function(t){function e(e,n,i){void 0===e&&(e={}),void 0===n&&(n={}),void 0===i&&(i={});var r=t.call(this)||this;return r.axis=e,r._inputs=[],r.options=h({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(t){r.axis[t].startPos=i[t]})),r.interruptManager=new W(r.options),r.axisManager=new U(r.axis),r.eventManager=new K(r),r.animationManager=new ut(r),r.inputObserver=new at(r),r.eventManager.setAnimationManager(r.animationManager),r.eventManager.triggerChange(r.axisManager.get()),r}o(e,t);var n=e.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(t,e){var n;return n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),e.mapAxes(n),e.connect(this.inputObserver),this._inputs.push(e),this},n.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);e>=0&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach((function(t){return t.disconnect()})),this._inputs=[];return this},n.get=function(t){return this.axisManager.get(t)},n.setTo=function(t,e){return void 0===e&&(e=0),this.animationManager.setTo(t,e),this},n.setBy=function(t,e){return void 0===e&&(e=0),this.animationManager.setBy(t,e),this},n.setOptions=function(t){return this.options=h(h({},this.options),t),this.animationManager.setOptions(t),this},n.setAxis=function(t){return this.axisManager.setAxis(t),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(t){return this.animationManager.updateAnimation(t),this},n.isBounceArea=function(t){return this.axisManager.isOutside(t)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},e.VERSION="3.9.1",e.TRANSFORM=m,e.DIRECTION_NONE=1,e.DIRECTION_LEFT=2,e.DIRECTION_RIGHT=4,e.DIRECTION_UP=8,e.DIRECTION_DOWN=16,e.DIRECTION_HORIZONTAL=6,e.DIRECTION_VERTICAL=l,e.DIRECTION_ALL=30,c([s.D0],e.prototype,"holding",null),e=c([s.kU],e)}(r.Z),ct=function(){function t(t,e){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(t){n._dragged&&(t.preventDefault(),t.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=y(t),this.options=h({inputType:["touch","mouse","pointer"],inputKey:[g],inputButton:[v],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},e),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=B(!!t[0],!!t[1]),this.axes=t},e.connect=function(t){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(t),this},e.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=X(this.element,this.options,this._direction)),this},e.disable=function(){return this._enabled&&(this._enabled=!1,L(this._originalCssProps)||Y(this.element,this._originalCssProps)),this},e.isEnabled=function(){return this._enabled},e.release=function(){var t=this._activeEvent,e=t.prevEvent;return t.onRelease(),this._observer.release(this,e,[0,0]),this._detachWindowEvent(t),this},e._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=e.preventDefaultOnDrag,s=this._activeEvent,a=s.onEventStart(t,n,i);if(a&&this._enabled&&!(s.getTouches(t,i)>1)&&!1!==a.srcEvent.cancelable){var o=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,a),this._atRightEdge=p&&a.center.x>window.innerWidth-o,this._attachWindowEvent(s),r&&"touchstart"!==a.srcEvent.type&&a.srcEvent.preventDefault(),s.prevEvent=a}},e._onPanmove=function(t){var e=this,n=this.options,i=n.iOSEdgeSwipeThreshold,r=n.preventClickOnDrag,s=n.releaseOnScroll,a=n.inputKey,o=n.inputButton,u=n.threshold,h=n.thresholdAngle,c=this._activeEvent,v=c.onEventMove(t,a,o),d=c.getTouches(t,o);if(0===d||s&&v&&!v.srcEvent.cancelable)this._onPanend(t);else if(v&&this._enabled&&!(d>1)){var f=function(t,e){if(e<0||e>90)return 1;var n=Math.abs(t);return n>e&&n<180-e?l:6}(v.angle,h),_=N(6,this._direction,f),g=N(l,this._direction,f);if(c.prevEvent&&p){if(v.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),v.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return e.release()}),100))}var m=this._getDistance([v.deltaX,v.deltaY],[_,g]),E=this._getOffset([v.offsetX,v.offsetY],[_,g]),x=E.some((function(t){return 0!==t}));x&&(!1!==v.srcEvent.cancelable&&v.srcEvent.preventDefault(),v.srcEvent.stopPropagation()),v.preventSystemEvent=x,x&&(this._isOverThreshold||m>=u)&&(this._dragged=r,this._isOverThreshold=!0,this._observer.change(this,v,it(this.axes,E))),c.prevEvent=v}},e._onPanend=function(t){var e=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(t),this._enabled&&0===n.getTouches(t,e)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,r=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[N(6,this._direction),N(l,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,r)}},e._attachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.addEventListener(t,e._onPanmove,st(t))})),null==t||t.end.forEach((function(t){window.addEventListener(t,e._onPanend,st(t))}))},e._detachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.removeEventListener(t,e._onPanmove)})),null==t||t.end.forEach((function(t){window.removeEventListener(t,e._onPanend)}))},e._getOffset=function(t,e){var n=this.options.scale;return[e[0]?t[0]*n[0]:0,e[1]?t[1]*n[1]:0]},e._getDistance=function(t,e){return Math.sqrt(Number(e[0])*Math.pow(t[0],2)+Number(e[1])*Math.pow(t[1],2))},e._attachElementEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(t){i.addEventListener(t,e._onPanstart)})),n.move.forEach((function(t){i.addEventListener(t,e._voidFunction)}))}},e._detachElementEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPanstart)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._voidFunction)}))),this.disable(),this._observer=null},t}(),lt=function(t){function e(e,n){var i=t.call(this,e,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}o(e,t);var n=e.prototype;return n.mapAxes=function(t){this._direction=ht.DIRECTION_ALL,this.axes=t},n._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventStart(t,n,i);if(s&&this.isEnabled()){var a=this.element.getBoundingClientRect();this._observer.hold(this,s),this._attachWindowEvent(r),this._coefficientForDistanceToAngle=360/(a.width*Math.PI),this._rotateOrigin=[a.left+(a.width-1)/2,a.top+(a.height-1)/2],this._prevAngle=null,this._triggerChange(s),r.prevEvent=s}},n._onPanmove=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,r=this._activeEvent,s=r.onEventMove(t,n,i);s&&this.isEnabled()&&(!1!==s.srcEvent.cancelable&&s.srcEvent.preventDefault(),s.srcEvent.stopPropagation(),this._triggerChange(s),r.prevEvent=s)},n._onPanend=function(t){var e=this._activeEvent;if(e.onEventEnd(t),this.isEnabled()){var n=e.prevEvent;this._triggerChange(n);var i=n.velocityX,r=n.velocityY,s=Math.sqrt(i*i+r*r)*(this._lastDiff>0?-1:1);e.onRelease(),this._observer.release(this,n,[s*this._coefficientForDistanceToAngle]),this._detachWindowEvent(e)}},n._triggerChange=function(t){var e=this._getPosFromOrigin(t.center.x,t.center.y),n=e.x,i=e.y,r=j(n,i),s=r<0?360+r:r,a=this._getQuadrant(t.center.x,t.center.y),o=this._getDifference(this._prevAngle,s,this._prevQuadrant,a);this._prevAngle=s,this._prevQuadrant=a,0!==o&&(this._lastDiff=o,this._observer.change(this,t,it(this.axes,[-o])))},n._getDifference=function(t,e,n,i){return null===t?0:1===n&&4===i?-t-(360-e):4===n&&1===i?360-t+e:e-t},n._getPosFromOrigin=function(t,e){return{x:t-this._rotateOrigin[0],y:this._rotateOrigin[1]-e}},n._getQuadrant=function(t,e){var n=this._getPosFromOrigin(t,e),i=n.x,r=n.y,s=0;return i>=0&&r>=0?s=1:i<0&&r>=0?s=2:i<0&&r<0?s=3:i>=0&&r<0&&(s=4),s},e}(ct),vt=function(){function t(t,e){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=y(t),this.options=h({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},e),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._activeEvent&&this._detachEvent(),this._attachEvent(t),this._originalCssProps=X(this.element,this.options,30),this},e.disconnect=function(){return this._detachEvent(),L(this._originalCssProps)||Y(this.element,this._originalCssProps),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onPinchStart=function(t){var e=this._activeEvent,n=e.onEventStart(t);n&&this._enabled&&2===e.getTouches(t)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,t),this._pinchFlag=!0,this._isOverThreshold=!1,e.prevEvent=n)},e._onPinchMove=function(t){var e=this.options.threshold,n=this._activeEvent,i=n.onEventMove(t);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(t)){var r=this._getDistance(i.scale),s=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||r>=e)&&(this._isOverThreshold=!0,this._observer.change(this,t,it(this.axes,[s]))),n.prevEvent=i}},e._onPinchEnd=function(t){var e=this._activeEvent;e.onEventEnd(t),!this._pinchFlag||!this._enabled||e.getTouches(t)>=2||(e.onRelease(),this._observer.release(this,t,[0],0),this._baseValue=null,this._pinchFlag=!1)},e._attachEvent=function(t){var e=this,n=rt(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(t){i.addEventListener(t,e._onPinchStart,!1)})),n.move.forEach((function(t){i.addEventListener(t,e._onPinchMove,!1)})),n.end.forEach((function(t){i.addEventListener(t,e._onPinchEnd,!1)}))}},e._detachEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPinchStart,!1)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._onPinchMove,!1)})),null==e||e.end.forEach((function(e){n.removeEventListener(e,t._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},e._getOffset=function(t,e){return void 0===e&&(e=1),this._baseValue*(t-e)*this.options.scale},e._getDistance=function(t){return Math.abs(t-1)},t}(),dt=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({inputKey:[g],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},e),this._onWheel=this._onWheel.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=B(!!t[1],!!t[0]),this.axes=t},e.connect=function(t){return this._detachEvent(),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onWheel=function(t){var e=this;if(this._enabled&&H(t,this.options.inputKey)){var n=this._getOffset([t.deltaY,t.deltaX],[N(l,this._direction),N(6,this._direction)]);0===n[0]&&0===n[1]||(t.preventDefault(),this._holding||(this._observer.hold(this,t),this._holding=!0),this._observer.change(this,t,it(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){e._holding&&(e._holding=!1,e._observer.release(e,t,[0]))}),this.options.releaseDelay))}},e._getOffset=function(t,e){var n=this.options.scale,i=this.options.useNormalized;return[e[0]&&t[0]?(t[0]>0?-1:1)*(i?1:Math.abs(t[0]))*n:0,e[1]&&t[1]?(t[1]>0?-1:1)*(i?1:Math.abs(t[1]))*n:0]},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("wheel",this._onWheel),this._enabled=!0},e._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},t}(),ft=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(t),this.options=h({scale:[1,1]},e),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onKeydown=function(t){if(this._enabled){var e=!0,n=1,i=-1;switch(t.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:e=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(e=!1),e){t.preventDefault();var r=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,t),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,t,it(this.axes,r))}}},e._onKeyup=function(t){var e=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){e._observer.release(e,t,[0,0]),e._holding=!1}),80))},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("keydown",this._onKeydown,!1),e.addEventListener("keypress",this._onKeydown,!1),e.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},e._detachEvent=function(){var t=this.element;t&&(t.removeEventListener("keydown",this._onKeydown,!1),t.removeEventListener("keypress",this._onKeydown,!1),t.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},t}(),_t={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(t){return new ht(t.axis,t.options)},on:function(t,e,n){t.on(e,n)},off:function(t,e,n){t.off(e,n)},destroy:function(t){t.destroy()}};const gt=ht},4336:(t,e,n)=>{n.r(e),n.d(e,{default:()=>P});var i,r=n(2784),s=n(2359),a=n(4458);function o(){return o=Object.assign?Object.assign.bind():function(t){for(var e=1;e{let{title:e,titleId:n,...s}=t;return r.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",viewBox:"21 29 65 65","aria-labelledby":n},s),e?r.createElement("title",{id:n},e):null,i||(i=r.createElement("path",{d:"M21 61.5V94l32.3-.2 32.2-.3.3-32.3L86 29H21v32.5zm60.8-.3-.3 28.3-28.2.3L25 90V33h57l-.2 28.2z"})))};var h;function c(){return c=Object.assign?Object.assign.bind():function(t){for(var e=1;e{let{title:e,titleId:n,...i}=t;return r.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",viewBox:"16.1 135 73.61 63.84","aria-labelledby":n},i),e?r.createElement("title",{id:n},e):null,h||(h=r.createElement("path",{d:"m34.3 166.8-18.2 31.7 36.6.3c20.1.1 36.8 0 37-.2.5-.5-35.9-63.6-36.6-63.6-.3 0-8.8 14.3-18.8 31.8zm34.1 1.8c8.1 14.1 14.6 25.8 14.3 26-.2.2-13.7.3-30.1.2l-29.6-.3 14.7-25.7c8.2-14.2 15.1-25.7 15.4-25.8.3 0 7.2 11.5 15.3 25.6z"})))};var v;function d(){return d=Object.assign?Object.assign.bind():function(t){for(var e=1;e{let{title:e,titleId:n,...i}=t;return r.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",viewBox:"18.69 243.57 68.93 68.93","aria-labelledby":n},i),e?r.createElement("title",{id:n},e):null,v||(v=r.createElement("path",{d:"M46 244.4c-11.3 2.5-19.8 9.5-24.6 20.1-2.3 4.9-2.8 7.4-2.7 13.5.1 14.2 7.3 25.9 19.8 31.7 5.2 2.4 7.2 2.8 15 2.8 8.1-.1 9.6-.4 15-3.2 7.6-4 12.6-9.2 16.2-16.8 3.7-7.9 3.9-20.3.5-27.8-7-15.6-23.1-23.9-39.2-20.3zm17 4.8c8.7 2.4 16.8 11 19.6 20.5 5.9 20.4-10.7 40.8-32 39.1-20.9-1.7-34.2-24-25.4-42.9C32 251 46.7 244.5 63 249.2z"})))};var _;function g(){return g=Object.assign?Object.assign.bind():function(t){for(var e=1;e{let{title:e,titleId:n,...i}=t;return r.createElement("svg",g({xmlns:"http://www.w3.org/2000/svg",viewBox:"288.6 147.27 33.4 29.73","aria-labelledby":n},i),e?r.createElement("title",{id:n},e):null,_||(_=r.createElement("path",{d:"M299.3 148.2c-2.9 1.4-2.9 1.4.4 8.8l2.6 6.1-6.9 7-6.8 6.9h4.6c4.2 0 4.9-.4 8.1-4.2l3.5-4.2 2.1 4.2c2 3.9 2.5 4.2 6.1 4.2 2.2 0 4-.2 4-.5s-1.1-2.7-2.4-5.3c-4.3-8.7-4.3-8.6 1.8-15.6 3.1-3.5 5.6-6.7 5.6-7 0-.3-1.7-.6-3.7-.6-3.2.1-4.3.7-6.8 4-1.6 2.1-3.2 3.9-3.6 4-.3 0-1.5-2-2.7-4.5-2.3-4.8-2.5-4.9-5.9-3.3z"})))};var m;function E(){return E=Object.assign?Object.assign.bind():function(t){for(var e=1;e{let{title:e,titleId:n,...i}=t;return r.createElement("svg",E({xmlns:"http://www.w3.org/2000/svg",viewBox:"290.1 152 31.9 48","aria-labelledby":n},i),e?r.createElement("title",{id:n},e):null,m||(m=r.createElement("path",{d:"m303.5 154-4 1.7-1.9 10.7c-1.5 8.4-1.7 11.2-.8 13.1 1.5 3.2 4.8 4.5 8.5 3.4 2.8-.8 2.8-.7 2.1 2.4-1.2 5.8-3.2 8.7-6.1 8.7-1.5 0-3.5-.8-4.5-1.7-1.8-1.6-2-1.6-4.3 1.2l-2.4 3 2 1.7c1.4 1.2 3.8 1.8 7 1.8 4 0 5.4-.5 8.4-3.1 2-1.8 4.2-4.4 5-5.9 1.6-3.1 9.5-33.8 9.5-37v-2l-4 2c-3.8 1.9-4 2.3-5.7 10.2-1.3 6.4-2.4 9-4.6 11.2-4.7 4.8-5.3 2.3-2.2-10.4 1.4-6.1 2.5-11.5 2.3-11.9-.2-.5-2.1-.1-4.3.9z"})))};var y;function b(){return b=Object.assign?Object.assign.bind():function(t){for(var e=1;e{let{title:e,titleId:n,...i}=t;return r.createElement("svg",b({xmlns:"http://www.w3.org/2000/svg",viewBox:"293.48 264 24.17 29","aria-labelledby":n},i),e?r.createElement("title",{id:n},e):null,y||(y=r.createElement("path",{d:"M299 265.9c0 1.1-.3 2.6-.6 3.5-.5 1.3.2 1.6 4 1.6 2.5 0 4.6.3 4.6.7 0 .5-3.2 4.6-7 9.2-4.1 4.9-6.8 9.1-6.5 9.9.3.7.5 1.6.5 1.8 0 .2 4.7.4 10.5.4H315v-3c0-1.7.1-3.3.3-3.7.1-.4-2.4-.6-5.5-.4-3.2.1-5.8-.1-5.8-.5s2.6-3.9 5.8-7.7c8-9.9 8.3-10.3 7.6-12.1-.5-1.3-2.3-1.6-9.5-1.6-8.1 0-8.9.2-8.9 1.9z"})))};function P(){const[t,e]=(0,r.useState)(null),[n,i]=(0,r.useState)(null),o=25,h=(0,s.eD)({x:{range:[-200,150],startPos:-125},y:{range:[0,275],startPos:55}}),c=(0,s.eD)({x:{range:[-200,150],startPos:-125},y:{range:[0,275],startPos:135}}),v=(0,s.eD)({x:{range:[-200,150],startPos:-125},y:{range:[0,275],startPos:215}}),d=(0,s.eD)({x:{range:[-200,150],startPos:75},y:{range:[0,275],startPos:55}}),_=(0,s.eD)({x:{range:[-200,150],startPos:75},y:{range:[0,275],startPos:135}}),g=(0,s.eD)({x:{range:[-200,150],startPos:75},y:{range:[0,275],startPos:215}});return(0,r.useEffect)((()=>{const t=document.getElementById("logo-container").getBoundingClientRect().width;e(60+t/2),i(t/2),h.connect("x y",new a.Ju("#square")),c.connect("x y",new a.Ju("#triangle")),v.connect("x y",new a.Ju("#circle")),d.connect("x y",new a.Ju("#x")),_.connect("x y",new a.Ju("#y")),g.connect("x y",new a.Ju("#z")),[h,c,v,d,_,d].forEach((e=>{e.setAxis({x:{range:[-t/2+10,t/2-60]}})}))}),[]),r.createElement("div",null,r.createElement("div",{id:"logo-container",style:{opacity:""+(t?"1":"0")}},r.createElement("div",{id:"square",className:"item",style:{transform:`translateX(${h.x}px) translateY(${h.y}px)`}},r.createElement(u,null)),r.createElement("div",{id:"triangle",className:"item light",style:{transform:`translateX(${c.x}px) translateY(${c.y}px)`}},r.createElement(l,null)),r.createElement("div",{id:"circle",className:"item",style:{transform:`translateX(${v.x}px) translateY(${v.y}px)`}},r.createElement(f,null)),r.createElement("div",{id:"x",className:"item bold",style:{transform:`translateX(${d.x}px) translateY(${d.y}px)`}},r.createElement(p,null)),r.createElement("div",{id:"y",className:"item",style:{transform:`translateX(${_.x}px) translateY(${_.y}px)`}},r.createElement(x,null)),r.createElement("div",{id:"z",className:"item bold",style:{transform:`translateX(${g.x}px) translateY(${g.y}px)`}},r.createElement(M,null)),r.createElement("svg",{className:"line"},r.createElement("line",{x1:t+h.x,y1:o+h.y,x2:n+d.x,y2:o+d.y,strokeWidth:"4"})),r.createElement("svg",{className:"line"},r.createElement("line",{x1:t+h.x,y1:o+h.y,x2:n+_.x,y2:o+_.y,strokeWidth:"4"})),r.createElement("svg",{className:"line"},r.createElement("line",{x1:t+c.x,y1:o+c.y,x2:n+d.x,y2:o+d.y,strokeWidth:"4"})),r.createElement("svg",{className:"line"},r.createElement("line",{x1:t+c.x,y1:o+c.y,x2:n+_.x,y2:o+_.y,strokeWidth:"4"})),r.createElement("svg",{className:"line"},r.createElement("line",{x1:t+c.x,y1:o+c.y,x2:n+g.x,y2:o+g.y,strokeWidth:"4"})),r.createElement("svg",{className:"line"},r.createElement("line",{x1:t+v.x,y1:o+v.y,x2:n+_.x,y2:o+_.y,strokeWidth:"4"})),r.createElement("svg",{className:"line"},r.createElement("line",{x1:t+v.x,y1:o+v.y,x2:n+g.x,y2:o+g.y,strokeWidth:"4"}))))}},2359:(t,e,n)=>{n.d(e,{eD:()=>a});var i=n(4458),r=n(3566),s=function(){return s=Object.assign||function(t){for(var e,n=1,i=arguments.length;n{"use strict";n.d(e,{q:()=>r});var i=n(5362),s=n(2784);function r(t,e){var n=(0,s.useRef)(!0),r=(0,s.useMemo)((function(){return(0,i.tG)(t,e)}),[]),a=r.state(),o=(0,i.XP)(a),u=(0,s.useState)({})[0],c=function(t){var e=(0,s.useState)((function(){return a[t]}));u[t]={getter:!1,set:e[1],value:e[0]}};for(var h in a)c(h);n.current=!0;var d=(0,s.useMemo)((function(){return r.methods()}),[]);(0,s.useEffect)((function(){n.current=!1})),(0,s.useEffect)((function(){r.mounted();var t=r.instance();return o.forEach((function(e){t.subscribe(e,(function(t){u[e].value=t,u[e].getter&&u[e].set(t)}))})),r.init(),function(){r.destroy()}}),[]);var l=o.reduce((function(t,e){return d[e]||Object.defineProperty(t,e,{enumerable:!0,get:function(){return n.current&&(u[e].getter=!0),u[e].value}}),t}),{});return r.events().forEach((function(t){l[(0,i._A)("on ".concat(t))]=function(e,n){var i=(0,s.useMemo)((function(){return r.on(t,e),e}),n);(0,s.useEffect)((function(){return r.off(t,i),r.on(t,i),function(){r.off(t,i)}}),[i])}})),(0,i.XP)(d).forEach((function(t){l[t]=d[t]})),l}},4458:(t,e,n)=>{"use strict";n.d(e,{HA:()=>ft,Ju:()=>ht,ZP:()=>gt,cD:()=>vt,f3:()=>pt,nj:()=>lt,zV:()=>dt});var i=n(5161),s=n(1588),r=n(5362),a=function(t,e){return a=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])},a(t,e)};function o(t,e){function n(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var u,c=function(){return c=Object.assign||function(t){for(var e,n=1,i=arguments.length;n=0;o--)(s=t[o])&&(a=(r<3?s(a):r>3?s(e,n,a):s(e,n))||a);return r>3&&a&&Object.defineProperty(e,n,a),a}u="undefined"==typeof window?{navigator:{userAgent:""}}:window;var d=24,l="left",f="right",p="middle",v={1:l,2:p,3:f},g="any",_="ontouchstart"in u&&"safari"===(0,i.ZP)().browser.name,m=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=t,n=b(i.childNodes)}else n=b(document.querySelectorAll(t));e||(n=n.length>=1?n[0]:void 0)}else t===u?n=t:"value"in t||"current"in t?n=t.value||t.current:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in u&&t instanceof jQuery||t.constructor.prototype.jquery?n=e?t.toArray():t.get(0):Array.isArray(t)&&(n=t.map((function(t){return x(t)})),e||(n=n.length>=1?n[0]:void 0)):n=t;return n},y=u.requestAnimationFrame||u.webkitRequestAnimationFrame,M=u.cancelAnimationFrame||u.webkitCancelAnimationFrame;if(y&&!M){var P={},j=y;y=function(t){var e=j((function(n){P[e]&&t(n)}));return P[e]=!0,e},M=function(t){delete P[t]}}else y&&M||(y=function(t){return u.setTimeout((function(){t(u.performance&&u.performance.now&&u.performance.now()||(new Date).getTime())}),16)},M=u.clearTimeout);var T=function(t,e){var n={};for(var i in t)i&&(n[i]=e(t[i],i));return n},O=function(t,e){var n={};for(var i in t)i&&e(t[i],i)&&(n[i]=t[i]);return n},w=function(t,e){for(var n in t)if(n&&!e(t[n],n))return!1;return!0},D=function(t,e){return w(t,(function(t,n){return t===e[n]}))},A={},C=function(t,e){return A[e]||(A[e]=S(e)),A[e](t)},I=function(t,e){return t&&e?T(t,(function(t,n){return C(t,"number"==typeof e?e:e[n])})):t},R=function(t){if(!isFinite(t))return 0;var e="".concat(t);if(e.indexOf("e")>=0){for(var n=0,i=1;Math.round(t*i)/i!==t;)i*=10,n++;return n}return e.indexOf(".")>=0?e.length-e.indexOf(".")-1:0},S=function(t){var e=t<1?Math.pow(10,R(t)):1;return function(n){return 0===t?0:Math.round(Math.round(n/t)*t*e)/e}},k=function(t,e){return 180*Math.atan2(e,t)/Math.PI},L=function(t){var e=!0;return Object.keys(E).forEach((function(n){t&&t[n]===E[n]||(e=!1)})),e},B=function(t,e){return t&&e?30:t?6:e?d:1},N=function(t,e,n){return n?!!(30===e||e&t&&n&t):!!(e&t)},X=function(t,e,n){var i,s=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),r={};if(t&&t.style){var a=e.touchAction?e.touchAction:s[n],o=c(c({},E),{"touch-action":"none"===t.style["touch-action"]?"none":a});Object.keys(o).forEach((function(e){r[e]=t.style[e]})),Object.keys(o).forEach((function(e){t.style[e]=o[e]}))}return r},Y=function(t,e){t&&t.style&&e&&Object.keys(e).forEach((function(n){t.style[n]=e[n]}))},K=function(){function t(t){this._axes=t,this.holdingCount=0}var e=t.prototype;return e.hold=function(t,e){var n=this._getRoundPos(t).roundPos;this._axes.trigger(new s.L("hold",{pos:n,input:e.input||null,inputEvent:e.event||null,isTrusted:!0}))},e.triggerRelease=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration),this._axes.trigger(new s.L("release",c(c({},t),{bounceRatio:this._getBounceRatio(n)})))},e.triggerChange=function(t,e,n,i){var a=this;void 0===i&&(i=!1);var o=this.animationManager,u=o.axisManager,c=o.getEventInfo(),h=this._getRoundPos(t,e),d=h.roundPos,l=h.roundDepa,f=u.moveTo(d,l),p=(null==n?void 0:n.event)||(null==c?void 0:c.event)||null,v={pos:f.pos,delta:f.delta,bounceRatio:this._getBounceRatio(f.pos),holding:i,inputEvent:p,isTrusted:!!p,input:(null==n?void 0:n.input)||(null==c?void 0:c.input)||null,set:p?this._createUserControll(f.pos):function(){}},g=new s.L("change",v);return this._axes.trigger(g),Object.keys(f.pos).forEach((function(t){var e=f.pos[t];(0,r.CV)(a._axes,t,e).current=e})),p&&u.set(v.set().destPos),!g.isCanceled()},e.triggerAnimationStart=function(t){var e=this._getRoundPos(t.destPos,t.depaPos),n=e.roundPos,i=e.roundDepa;t.destPos=n,t.depaPos=i,t.setTo=this._createUserControll(t.destPos,t.duration);var r=new s.L("animationStart",t);return this._axes.trigger(r),!r.isCanceled()},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this._axes.trigger(new s.L("animationEnd",{isTrusted:t}))},e.triggerFinish=function(t){void 0===t&&(t=!1),this._axes.trigger(new s.L("finish",{isTrusted:t}))},e.setAnimationManager=function(t){this.animationManager=t},e.destroy=function(){this._axes.off()},e._createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:c({},t),duration:e};return function(t,e){return t&&(n.destPos=c({},t)),void 0!==e&&(n.duration=e),n}},e._getRoundPos=function(t,e){var n=this._axes.options.round;return{roundPos:I(t,n),roundDepa:I(e,n)}},e._getBounceRatio=function(t){return this._axes.axisManager.map(t,(function(t,e){return te.range[1]&&0!==e.bounce[1]?(t-e.range[1])/e.bounce[1]:0}))},h([r.cn],t.prototype,"holdingCount",void 0),t}(),F=function(){function t(t){this._options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this._options.interruptable||this._prevented},e.isInterrupted=function(){return!this._options.interruptable&&this._prevented},e.setInterrupt=function(t){this._options.interruptable||(this._prevented=t)},t}(),W=function(t,e,n,i){var s=t,r=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return s=Math.max(r[0],s),s=Math.min(r[1],s)},V=function(t,e){return te[1]},U=function(t,e,n){return n[1]&&t>e[1]||n[0]&&tr&&(i=(i-r)%a+s),n[0]&&t-1||e.indexOf("none")>-1&&!t.shiftKey&&!t.ctrlKey&&!t.altKey&&!t.metaKey||e.indexOf("shift")>-1&&t.shiftKey||e.indexOf("ctrl")>-1&&t.ctrlKey||e.indexOf("alt")>-1&&t.altKey||e.indexOf("meta")>-1&&t.metaKey)},G=function(){function t(){var t=this;this._stopContextMenu=function(e){e.preventDefault(),u.removeEventListener("contextmenu",t._stopContextMenu)}}var e=t.prototype;return e.extendEvent=function(t){var e,n=this.prevEvent,i=this._getCenter(t),s=n?this._getMovement(t):{x:0,y:0},r=n?this._getScale(t):1,a=n?k(i.x-n.center.x,i.y-n.center.y):0,o=n?n.deltaX+s.x:s.x,u=n?n.deltaY+s.y:s.y,c=s.x,h=s.y,d=this._latestInterval,l=Date.now(),f=d?l-d.timestamp:0,p=n?n.velocityX:0,v=n?n.velocityY:0;return(!d||f>=16)&&(d&&(p=(e=[(o-d.deltaX)/f,(u-d.deltaY)/f])[0],v=e[1]),this._latestInterval={timestamp:l,deltaX:o,deltaY:u}),{srcEvent:t,scale:r,angle:a,center:i,deltaX:o,deltaY:u,offsetX:c,offsetY:h,velocityX:p,velocityY:v,preventSystemEvent:!0}},e._getDistance=function(t,e){var n=e.clientX-t.clientX,i=e.clientY-t.clientY;return Math.sqrt(n*n+i*i)},e._getButton=function(t){var e={1:l,2:f,4:p},n=this._isTouchEvent(t)?l:e[t.buttons];return n||null},e._isTouchEvent=function(t){return t.type&&t.type.indexOf("touch")>-1},e._isValidButton=function(t,e){return e.indexOf(t)>-1},e._isValidEvent=function(t,e,n){return(!e||J(t,e))&&(!n||this._isValidButton(this._getButton(t),n))},e._preventMouseButton=function(t,e){e===f?u.addEventListener("contextmenu",this._stopContextMenu):e===p&&t.preventDefault()},t}(),$=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown"],e.move=["mousemove"],e.end=["mouseup"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(t,e){return e&&this._isValidButton(v[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},e}(G),tt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["touchstart"],e.move=["touchmove"],e.end=["touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e){return this._baseTouches=t.touches,this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventMove=function(t,e){return this._isValidEvent(t,e)?this.extendEvent(t):null},n.onEventEnd=function(t){this._baseTouches=t.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t){return t.touches.length},n._getScale=function(t){return 2!==t.touches.length||this._baseTouches.length<2?null:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(t){return{x:t.touches[0].clientX,y:t.touches[0].clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.touches[0].identifier!==e.touches[0].identifier?{x:0,y:0}:{x:t.touches[0].clientX-e.touches[0].clientX,y:t.touches[0].clientY-e.touches[0].clientY}},e}(G),et=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=H?["pointerdown"]:["MSPointerDown"],e.move=H?["pointermove"]:["MSPointerMove"],e.end=H?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],e._firstInputs=[],e._recentInputs=[],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?(this._updatePointerEvent(t),this.extendEvent(t)):null},n.onEventEnd=function(t){this._removePointerEvent(t)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(t){return{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this.prevEvent.srcEvent;return t.pointerId!==e.pointerId?{x:0,y:0}:{x:t.clientX-e.clientX,y:t.clientY-e.clientY}},n._updatePointerEvent=function(t){var e=this,n=!1;this._recentInputs.forEach((function(i,s){i.pointerId===t.pointerId&&(n=!0,e._recentInputs[s]=t)})),n||(this._firstInputs.push(t),this._recentInputs.push(t))},n._removePointerEvent=function(t){this._firstInputs=this._firstInputs.filter((function(e){return e.pointerId!==t.pointerId})),this._recentInputs=this._recentInputs.filter((function(e){return e.pointerId!==t.pointerId}))},e}(G),nt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.start=["mousedown","touchstart"],e.move=["mousemove","touchmove"],e.end=["mouseup","touchend","touchcancel"],e}o(e,t);var n=e.prototype;return n.onEventStart=function(t,e,n){var i=this._getButton(t);return this._isTouchEvent(t)&&(this._baseTouches=t.touches),this._isValidEvent(t,e,n)?(this._preventMouseButton(t,i),this.extendEvent(t)):null},n.onEventMove=function(t,e,n){return this._isValidEvent(t,e,n)?this.extendEvent(t):null},n.onEventEnd=function(t){this._isTouchEvent(t)&&(this._baseTouches=t.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(t,e){return this._isTouchEvent(t)?t.touches.length:this._isValidButton(v[t.which],e)&&-1===this.end.indexOf(t.type)?1:0},n._getScale=function(t){return this._isTouchEvent(t)?2!==t.touches.length||this._baseTouches.length<2?1:this._getDistance(t.touches[0],t.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(t){return this._isTouchEvent(t)?{x:t.touches[0].clientX,y:t.touches[0].clientY}:{x:t.clientX,y:t.clientY}},n._getMovement=function(t){var e=this,n=[t,this.prevEvent.srcEvent].map((function(t){return e._isTouchEvent(t)?{id:t.touches[0].identifier,x:t.touches[0].clientX,y:t.touches[0].clientY}:{id:null,x:t.clientX,y:t.clientY}})),i=n[0],s=n[1];return i.id===s.id?{x:i.x-s.x,y:i.y-s.y}:{x:0,y:0}},e}(G),it=function(t,e){return e.reduce((function(e,n,i){return t[i]&&(e[t[i]]=n),e}),{})},st=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach((function(t){switch(t){case"mouse":n=!0;break;case"touch":e=z;break;case"pointer":i=Z}})),i?new et:e&&n?new nt:e?new tt:n?new $:null};function rt(t){return t.indexOf("touch")>-1&&{passive:!1}}var at=function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,s=t.axisManager,r=t.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=e,this._interruptManager=n,this._eventManager=i,this._axisManager=s,this._animationManager=r}var e=t.prototype;return e.get=function(t){return this._axisManager.get(t.axes)},e.hold=function(t,e){if(!this._interruptManager.isInterrupted()&&t.axes.length){var n={input:t,event:e};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(t.axes),this._moveDistance=this._axisManager.get(t.axes)}},e.change=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(t){return 0===t}))){var s=e.srcEvent?e.srcEvent:e;if(!s.__childrenAxesAlreadyChanged){var r,a=this._moveDistance||this._axisManager.get(t.axes);r=T(a,(function(t,e){return t+(n[e]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(r,(function(t,e){var n=e.circular,i=e.range;return n&&(n[0]||n[1])?q(t,i,n):t}))),this._isOutside&&this._axisManager.every(a,(function(t,e){return!V(t,e.range)}))&&(this._isOutside=!1),a=this._atOutside(a),r=this._atOutside(r),this.options.nested&&this._isEndofAxis(n,a,r)||(s.__childrenAxesAlreadyChanged=!0);var o={input:t,event:e};if(i){var u=this._animationManager.getDuration(r,a);this._animationManager.animateTo(r,u,o)}else{!this._eventManager.triggerChange(r,a,o,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},e.release=function(t,e,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var s=e.srcEvent?e.srcEvent:e;s.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var r=this._axisManager.get(t.axes),a=this._axisManager.get(),o=this._animationManager.getDisplacement(n),u=it(t.axes,o),h=this._axisManager.get(this._axisManager.map(u,(function(t,e,n){return e.circular&&(e.circular[0]||e.circular[1])?r[n]+t:W(r[n]+t,e.range,e.circular,e.bounce)})));s.__childrenAxesAlreadyReleased=!0;var d=this._animationManager.getDuration(h,r,i);0===d&&(h=c({},a));var l={depaPos:a,destPos:h,duration:d,delta:this._axisManager.getDelta(a,h),inputEvent:e,input:t,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(l),0===this._eventManager.holdingCount&&(this._moveDistance=null);var f=this._animationManager.getUserControl(l),p=D(f.destPos,a),v={input:t,event:e};p||0===f.duration?(p||this._eventManager.triggerChange(f.destPos,a,v,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(v):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(f.destPos,f.duration,v)}},e._atOutside=function(t){var e=this;return this._isOutside?this._axisManager.map(t,(function(t,e){var n=e.range[0]-e.bounce[0],i=e.range[1]+e.bounce[1];return t>i?i:ts?t:ts?s+e._animationManager.interpolate(t-s,r[1]):t}))},e._isEndofAxis=function(t,e,n){return this._axisManager.every(e,(function(i,s,r){return 0===t[r]||e[r]===n[r]&&(a=i,o=s.range,u=s.bounce,!(c=s.circular)[0]&&a===o[0]-u[0]||!c[1]&&a===o[1]+u[1]);var a,o,u,c}))},t}(),ot=function(t,e,n){return Math.max(Math.min(t,n),e)},ut=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._useDuration=!0,e}o(e,t);var n=e.prototype;return n.interpolate=function(t,e){var n=this._easing(1e-5)/1e-5;return this._easing(t/(e*n))*e},n.updateAnimation=function(t){var e,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,s=(null==t?void 0:t.destPos)||n.destPos,r=null!==(e=null==t?void 0:t.duration)&&void 0!==e?e:n.duration;if((null==t?void 0:t.restart)||r<=i)this.setTo(s,r-i);else{if(null==t?void 0:t.destPos){var a=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(a,s),n.destPos=s}if(null==t?void 0:t.duration){var o=(i+this._durationOffset)/n.duration;this._durationOffset=o*r-i,n.duration=r}}}},n._initState=function(t){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:t.depaPos,easingPer:0,finished:!1}},n._getNextState=function(t){var e=this,n=this._animateParam,i=t.pos,s=n.destPos,r=T(i,(function(t,e){return t<=s[e]?1:-1})),a=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,o=this._easing(a),u=this.axisManager.map(i,(function(t,u,c){var h=a>=1?s[c]:t+n.delta[c]*(o-e._prevEasingPer)/(1-e._initialEasingPer),d=q(h,u.range,u.circular);if(h!==d){var l=r[c]*(u.range[1]-u.range[0]);s[c]-=l,i[c]-=l}return d}));return this._prevEasingPer=o,{pos:u,easingPer:o,finished:o>=1}},n._easing=function(t){return t>1?1:this._options.easing(t)},e}(function(){function t(t){var e=t.options,n=t.interruptManager,i=t.eventManager,s=t.axisManager;this._options=e,this.interruptManager=n,this.eventManager=i,this.axisManager=s,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(t,e,n){var i,s=this;if(void 0!==n)i=n;else{var r=T(e,(function(e,n){return function(t,e){var n=Math.sqrt(t/e*2);return n<100?0:n}(Math.abs(e-t[n]),s._options.deceleration)}));i=Object.keys(r).reduce((function(t,e){return Math.max(t,r[e])}),-1/0)}return ot(i,this._options.minimumDuration,this._options.maximumDuration)},e.getDisplacement=function(t){var e=Math.pow(t.reduce((function(t,e){return t+e*e}),0),1/t.length),n=Math.abs(e/-this._options.deceleration);return t.map((function(t){return t/2*n}))},e.stopAnimation=function(t){if(this._animateParam){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}));w(n,(function(t,n){return e[n]===t}))||this.eventManager.triggerChange(n,e,t,!!t),this._animateParam=null,this._raf&&(i=this._raf,M(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==t?void 0:t.event))}var i},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axisManager.get(),n=this.axisManager.map(e,(function(t,e){return Math.min(e.range[1],Math.max(e.range[0],t))}));this.stopAnimation(),this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axisManager.filter(this.axisManager.get(),(function(t,e){return U(t,e.range,e.circular)}));Object.keys(e).length>0&&this.setTo(this.axisManager.map(e,(function(t,e){return q(t,e.range,e.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!t),this.axisManager.isOutside()?this.restore(t):this.finish(!!t)},e.finish=function(t){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(t)},e.getUserControl=function(t){var e=t.setTo();return e.destPos=this.axisManager.get(e.destPos),e.duration=ot(e.duration,this._options.minimumDuration,this._options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this;this.stopAnimation();var s=this._createAnimationParam(t,e,n),r=c({},s.depaPos),a=this.eventManager.triggerAnimationStart(s),o=this.getUserControl(s);if(!a&&this.axisManager.every(o.destPos,(function(t,e){return U(t,e.range,e.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),a&&!D(o.destPos,r)){var u=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:r,destPos:o.destPos,duration:o.duration,delta:this.axisManager.getDelta(r,o.destPos),isTrusted:!!u,inputEvent:u,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},e.setTo=function(t,e){void 0===e&&(e=0);var n=Object.keys(t),i=this.axisManager.get(n);if(D(t,i))return this;this.interruptManager.setInterrupt(!0);var s=O(t,(function(t,e){return i[e]!==t}));return Object.keys(s).length?(s=this.axisManager.map(s,(function(t,e){var n=e.range,i=e.circular;return i&&(i[0]||i[1])?t:W(t,n,i)})),D(s,i)||(e>0?this.animateTo(s,e):(this.stopAnimation(),this.eventManager.triggerChange(s),this.finish(!1))),this):this},e.setBy=function(t,e){return void 0===e&&(e=0),this.setTo(T(this.axisManager.get(Object.keys(t)),(function(e,n){return e+t[n]})),e)},e.setOptions=function(t){this._options=c(c({},this._options),t)},e._createAnimationParam=function(t,e,n){var i=this.axisManager.get(),s=t,r=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:s,duration:ot(e,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,s),inputEvent:r,input:(null==n?void 0:n.input)||null,isTrusted:!!r,done:this.animationEnd}},e._animateLoop=function(t,e){var n=this;if(t.duration){this._animateParam=c(c({},t),{startTime:(new Date).getTime()});var i=T(t.destPos,(function(t){return t})),s=this._initState(this._animateParam),r=function(){n._raf=null;var t=n._animateParam,a=n._getNextState(s),o=!n.eventManager.triggerChange(a.pos,s.pos);if(s=a,a.finished)return t.destPos=n._getFinalPos(t.destPos,i),D(t.destPos,n.axisManager.get(Object.keys(t.destPos)))||n.eventManager.triggerChange(t.destPos,a.pos),void e();o?n.finish(!1):n._raf=y(r)};r()}else this.eventManager.triggerChange(t.destPos),e()},e._getFinalPos=function(t,e){var n=this,i=1e-6;return T(t,(function(t,s){if(t>=e[s]-i&&t<=e[s]+i)return e[s];var r=n._getRoundUnit(t,s);return C(t,r)}))},e._getRoundUnit=function(t,e){var n,i=this._options.round,s=null;if(!i){var r=this.axisManager.getAxisOptions(e);n=Math.max(R(r.range[0]),R(r.range[1]),R(t)),s=1/Math.pow(10,n)}return s||i},t}()),ct=function(t){function e(e,n,i){void 0===e&&(e={}),void 0===n&&(n={}),void 0===i&&(i={});var s=t.call(this)||this;return s.axis=e,s._inputs=[],s.options=c({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(t){s.axis[t].startPos=i[t]})),s.interruptManager=new F(s.options),s.axisManager=new Q(s.axis),s.eventManager=new K(s),s.animationManager=new ut(s),s.inputObserver=new at(s),s.eventManager.setAnimationManager(s.animationManager),s.eventManager.triggerChange(s.axisManager.get()),s}o(e,t);var n=e.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(t,e){var n;return n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),e.mapAxes(n),e.connect(this.inputObserver),this._inputs.push(e),this},n.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);e>=0&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach((function(t){return t.disconnect()})),this._inputs=[];return this},n.get=function(t){return this.axisManager.get(t)},n.setTo=function(t,e){return void 0===e&&(e=0),this.animationManager.setTo(t,e),this},n.setBy=function(t,e){return void 0===e&&(e=0),this.animationManager.setBy(t,e),this},n.setOptions=function(t){return this.options=c(c({},this.options),t),this.animationManager.setOptions(t),this},n.setAxis=function(t){return this.axisManager.setAxis(t),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(t){return this.animationManager.updateAnimation(t),this},n.isBounceArea=function(t){return this.axisManager.isOutside(t)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},e.VERSION="3.9.1",e.TRANSFORM=m,e.DIRECTION_NONE=1,e.DIRECTION_LEFT=2,e.DIRECTION_RIGHT=4,e.DIRECTION_UP=8,e.DIRECTION_DOWN=16,e.DIRECTION_HORIZONTAL=6,e.DIRECTION_VERTICAL=d,e.DIRECTION_ALL=30,h([r.D0],e.prototype,"holding",null),e=h([r.kU],e)}(s.Z),ht=function(){function t(t,e){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(t){n._dragged&&(t.preventDefault(),t.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=x(t),this.options=c({inputType:["touch","mouse","pointer"],inputKey:[g],inputButton:[l],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},e),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=B(!!t[0],!!t[1]),this.axes=t},e.connect=function(t){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(t),this},e.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=X(this.element,this.options,this._direction)),this},e.disable=function(){return this._enabled&&(this._enabled=!1,L(this._originalCssProps)||Y(this.element,this._originalCssProps)),this},e.isEnabled=function(){return this._enabled},e.release=function(){var t=this._activeEvent,e=t.prevEvent;return t.onRelease(),this._observer.release(this,e,[0,0]),this._detachWindowEvent(t),this},e._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,s=e.preventDefaultOnDrag,r=this._activeEvent,a=r.onEventStart(t,n,i);if(a&&this._enabled&&!(r.getTouches(t,i)>1)&&!1!==a.srcEvent.cancelable){var o=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,a),this._atRightEdge=_&&a.center.x>window.innerWidth-o,this._attachWindowEvent(r),s&&"touchstart"!==a.srcEvent.type&&a.srcEvent.preventDefault(),r.prevEvent=a}},e._onPanmove=function(t){var e=this,n=this.options,i=n.iOSEdgeSwipeThreshold,s=n.preventClickOnDrag,r=n.releaseOnScroll,a=n.inputKey,o=n.inputButton,u=n.threshold,c=n.thresholdAngle,h=this._activeEvent,l=h.onEventMove(t,a,o),f=h.getTouches(t,o);if(0===f||r&&l&&!l.srcEvent.cancelable)this._onPanend(t);else if(l&&this._enabled&&!(f>1)){var p=function(t,e){if(e<0||e>90)return 1;var n=Math.abs(t);return n>e&&n<180-e?d:6}(l.angle,c),v=N(6,this._direction,p),g=N(d,this._direction,p);if(h.prevEvent&&_){if(l.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),l.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return e.release()}),100))}var m=this._getDistance([l.deltaX,l.deltaY],[v,g]),E=this._getOffset([l.offsetX,l.offsetY],[v,g]),b=E.some((function(t){return 0!==t}));b&&(!1!==l.srcEvent.cancelable&&l.srcEvent.preventDefault(),l.srcEvent.stopPropagation()),l.preventSystemEvent=b,b&&(this._isOverThreshold||m>=u)&&(this._dragged=s,this._isOverThreshold=!0,this._observer.change(this,l,it(this.axes,E))),h.prevEvent=l}},e._onPanend=function(t){var e=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(t),this._enabled&&0===n.getTouches(t,e)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,s=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[N(6,this._direction),N(d,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,s)}},e._attachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.addEventListener(t,e._onPanmove,rt(t))})),null==t||t.end.forEach((function(t){window.addEventListener(t,e._onPanend,rt(t))}))},e._detachWindowEvent=function(t){var e=this;null==t||t.move.forEach((function(t){window.removeEventListener(t,e._onPanmove)})),null==t||t.end.forEach((function(t){window.removeEventListener(t,e._onPanend)}))},e._getOffset=function(t,e){var n=this.options.scale;return[e[0]?t[0]*n[0]:0,e[1]?t[1]*n[1]:0]},e._getDistance=function(t,e){return Math.sqrt(Number(e[0])*Math.pow(t[0],2)+Number(e[1])*Math.pow(t[1],2))},e._attachElementEvent=function(t){var e=this,n=st(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(t){i.addEventListener(t,e._onPanstart)})),n.move.forEach((function(t){i.addEventListener(t,e._voidFunction)}))}},e._detachElementEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPanstart)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._voidFunction)}))),this.disable(),this._observer=null},t}(),dt=function(t){function e(e,n){var i=t.call(this,e,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}o(e,t);var n=e.prototype;return n.mapAxes=function(t){this._direction=ct.DIRECTION_ALL,this.axes=t},n._onPanstart=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,s=this._activeEvent,r=s.onEventStart(t,n,i);if(r&&this.isEnabled()){var a=this.element.getBoundingClientRect();this._observer.hold(this,r),this._attachWindowEvent(s),this._coefficientForDistanceToAngle=360/(a.width*Math.PI),this._rotateOrigin=[a.left+(a.width-1)/2,a.top+(a.height-1)/2],this._prevAngle=null,this._triggerChange(r),s.prevEvent=r}},n._onPanmove=function(t){var e=this.options,n=e.inputKey,i=e.inputButton,s=this._activeEvent,r=s.onEventMove(t,n,i);r&&this.isEnabled()&&(!1!==r.srcEvent.cancelable&&r.srcEvent.preventDefault(),r.srcEvent.stopPropagation(),this._triggerChange(r),s.prevEvent=r)},n._onPanend=function(t){var e=this._activeEvent;if(e.onEventEnd(t),this.isEnabled()){var n=e.prevEvent;this._triggerChange(n);var i=n.velocityX,s=n.velocityY,r=Math.sqrt(i*i+s*s)*(this._lastDiff>0?-1:1);e.onRelease(),this._observer.release(this,n,[r*this._coefficientForDistanceToAngle]),this._detachWindowEvent(e)}},n._triggerChange=function(t){var e=this._getPosFromOrigin(t.center.x,t.center.y),n=e.x,i=e.y,s=k(n,i),r=s<0?360+s:s,a=this._getQuadrant(t.center.x,t.center.y),o=this._getDifference(this._prevAngle,r,this._prevQuadrant,a);this._prevAngle=r,this._prevQuadrant=a,0!==o&&(this._lastDiff=o,this._observer.change(this,t,it(this.axes,[-o])))},n._getDifference=function(t,e,n,i){return null===t?0:1===n&&4===i?-t-(360-e):4===n&&1===i?360-t+e:e-t},n._getPosFromOrigin=function(t,e){return{x:t-this._rotateOrigin[0],y:this._rotateOrigin[1]-e}},n._getQuadrant=function(t,e){var n=this._getPosFromOrigin(t,e),i=n.x,s=n.y,r=0;return i>=0&&s>=0?r=1:i<0&&s>=0?r=2:i<0&&s<0?r=3:i>=0&&s<0&&(r=4),r},e}(ht),lt=function(){function t(t,e){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=x(t),this.options=c({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},e),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._activeEvent&&this._detachEvent(),this._attachEvent(t),this._originalCssProps=X(this.element,this.options,30),this},e.disconnect=function(){return this._detachEvent(),L(this._originalCssProps)||Y(this.element,this._originalCssProps),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onPinchStart=function(t){var e=this._activeEvent,n=e.onEventStart(t);n&&this._enabled&&2===e.getTouches(t)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,t),this._pinchFlag=!0,this._isOverThreshold=!1,e.prevEvent=n)},e._onPinchMove=function(t){var e=this.options.threshold,n=this._activeEvent,i=n.onEventMove(t);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(t)){var s=this._getDistance(i.scale),r=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||s>=e)&&(this._isOverThreshold=!0,this._observer.change(this,t,it(this.axes,[r]))),n.prevEvent=i}},e._onPinchEnd=function(t){var e=this._activeEvent;e.onEventEnd(t),!this._pinchFlag||!this._enabled||e.getTouches(t)>=2||(e.onRelease(),this._observer.release(this,t,[0],0),this._baseValue=null,this._pinchFlag=!1)},e._attachEvent=function(t){var e=this,n=st(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=t,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(t){i.addEventListener(t,e._onPinchStart,!1)})),n.move.forEach((function(t){i.addEventListener(t,e._onPinchMove,!1)})),n.end.forEach((function(t){i.addEventListener(t,e._onPinchEnd,!1)}))}},e._detachEvent=function(){var t=this,e=this._activeEvent,n=this.element;n&&(null==e||e.start.forEach((function(e){n.removeEventListener(e,t._onPinchStart,!1)})),null==e||e.move.forEach((function(e){n.removeEventListener(e,t._onPinchMove,!1)})),null==e||e.end.forEach((function(e){n.removeEventListener(e,t._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},e._getOffset=function(t,e){return void 0===e&&(e=1),this._baseValue*(t-e)*this.options.scale},e._getDistance=function(t){return Math.abs(t-1)},t}(),ft=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=x(t),this.options=c({inputKey:[g],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},e),this._onWheel=this._onWheel.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this._direction=B(!!t[1],!!t[0]),this.axes=t},e.connect=function(t){return this._detachEvent(),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onWheel=function(t){var e=this;if(this._enabled&&J(t,this.options.inputKey)){var n=this._getOffset([t.deltaY,t.deltaX],[N(d,this._direction),N(6,this._direction)]);0===n[0]&&0===n[1]||(t.preventDefault(),this._holding||(this._observer.hold(this,t),this._holding=!0),this._observer.change(this,t,it(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){e._holding&&(e._holding=!1,e._observer.release(e,t,[0]))}),this.options.releaseDelay))}},e._getOffset=function(t,e){var n=this.options.scale,i=this.options.useNormalized;return[e[0]&&t[0]?(t[0]>0?-1:1)*(i?1:Math.abs(t[0]))*n:0,e[1]&&t[1]?(t[1]>0?-1:1)*(i?1:Math.abs(t[1]))*n:0]},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("wheel",this._onWheel),this._enabled=!0},e._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},t}(),pt=function(){function t(t,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=x(t),this.options=c({scale:[1,1]},e),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var e=t.prototype;return e.mapAxes=function(t){this.axes=t},e.connect=function(t){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(t),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onKeydown=function(t){if(this._enabled){var e=!0,n=1,i=-1;switch(t.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:e=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(e=!1),e){t.preventDefault();var s=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,t),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,t,it(this.axes,s))}}},e._onKeyup=function(t){var e=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){e._observer.release(e,t,[0,0]),e._holding=!1}),80))},e._attachEvent=function(t){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=t,e.addEventListener("keydown",this._onKeydown,!1),e.addEventListener("keypress",this._onKeydown,!1),e.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},e._detachEvent=function(){var t=this.element;t&&(t.removeEventListener("keydown",this._onKeydown,!1),t.removeEventListener("keypress",this._onKeydown,!1),t.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},t}(),vt={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(t){return new ct(t.axis,t.options)},on:function(t,e,n){t.on(e,n)},off:function(t,e,n){t.off(e,n)},destroy:function(t){t.destroy()}};const gt=ct},5059:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>a});var i=n(2784),s=n(2359),r=n(4458);function a(){const[t,e]=(0,i.useState)([1,2,3,4,5,6,7,8,9,10]),[a,o]=(0,i.useState)(0),u=(0,i.useRef)(null),c=(0,i.useRef)(null),{connect:h,setAxis:d,setTo:l,onChange:f,onRelease:p,isBounceArea:v,scroll:g}=(0,s.eD)({scroll:{range:[0,0],bounce:120}}),_=(t,e)=>t.getBoundingClientRect().height-e.getBoundingClientRect().height;f((t=>{let{pos:e}=t;const n=document.getElementById("prepend"),i=document.getElementById("append");if(v()){const t=m(e.scroll);t.isAdd?t.isTop?n.innerText="Release to prepend":i.innerText="Release to append":t.isTop?n.innerText="Pull to prepend":i.innerText="Pull to append"}})),p((n=>{let{depaPos:i}=n;if(v()){const n=m(i.scroll);if(n.isAdd){const i=Math.floor(50*Math.random()+1);n.isTop?(e([i,...t]),l({scroll:0})):e([...t,i]),d({scroll:{range:[0,_(c.current,u.current)]}})}}}));const m=t=>({isAdd:(t>0?(t-a)/120:-t/120)>.8,isTop:t<0});return(0,i.useEffect)((()=>{const t=_(c.current,u.current);o(t),d({scroll:{range:[0,t]}}),h(["","scroll"],new r.Ju(u,{scale:[0,-1]}))}),[]),i.createElement("div",null,i.createElement("p",null,"You can create a pull-to-refresh UI using one axis."),i.createElement("div",{id:"pull-contentWrapper",ref:u},i.createElement("div",{id:"prepend"},"Pull to prepend"),i.createElement("ul",{id:"pull-content",style:{transform:`translate3d(0, ${-g}px, 0)`},ref:c},t.map(((t,e)=>i.createElement("li",{className:"pull_drw",key:e},i.createElement("div",{className:"pull_im"},i.createElement("img",{src:n(9913)(`./${t}.jpg`).default,width:"110"})),i.createElement("div",{className:"pull_tx"},i.createElement("span",{className:"pull_tit"},"egjs is Javascript components group that brings easiest and fastest way to build a web application in your way")))))),i.createElement("div",{id:"append"},"Pull to append")),i.createElement("div",{className:"bottomWapper"}))}},2359:(t,e,n)=>{"use strict";n.d(e,{eD:()=>a});var i=n(4458),s=n(3566),r=function(){return r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/1-678a5c68d9ac7a26dc269150429c596d.jpg"},5852:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/10-444ae8ae4e1b0e2da7255b86033f2746.jpg"},2314:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/11-ccb16594650ba223280b7fc6ab9c6f33.jpg"},4997:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/12-1d5ee5e9b9d4c4988987af3363d693f8.jpg"},8599:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/13-f2fe4bb3326ebf512a356f8b97626531.jpg"},2297:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/14-79ee85233eecc7214c482429f42d4dfb.jpg"},3617:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/15-d7dcf5c569ea997fe85c903bd13d07a8.jpg"},7173:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/16-3bc0e3812dbe2f8b14570dc45f2367ab.jpg"},2634:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/17-79a3d079480197d7400e2782d177d029.jpg"},1165:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/18-4f969193573ee29fbf560342116ab755.jpg"},4573:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/19-0303a57aaaab15ae0962291cf702f625.jpg"},7220:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/2-0b19bfb5a6c83fe732a09f42299efa6b.jpg"},323:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/20-12ae23a7e94ebca16e7ff50018caeb7f.jpg"},4316:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/21-480f063b893d5df8d288d99060cdb360.jpg"},859:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/22-6ac99e9833a54254c9f8d81597bb409f.jpg"},6823:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/23-2adaceb4f6378d2b289192e4a622e8c4.jpg"},2094:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/24-de543a82d9a29632662e3eff3f492816.jpg"},3159:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/25-02e1a7f90fd3c728c7b2987198146c39.jpg"},6011:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/26-6417b88f2a9ee06ffa0a6c3fd48786eb.jpg"},3085:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/27-b83acd807e00434823420b4e1dcce4a9.jpg"},3682:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/28-233180a939eda0d0e7e076de2f1b0489.jpg"},8145:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/29-40db14e164e73b98279109d6e745a861.jpg"},5057:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/3-676c078a02438932f2c2d3419c040f32.jpg"},8026:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/30-a229b6685c92fdce571d3f5836fe1d83.jpg"},57:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/31-9fe5c33e2730919226241be7e1c26645.jpg"},5102:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/32-1e42ef8b554ae42685302ccc7d0dbc05.jpg"},1871:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/33-b4528227c55ff03d3bb215553c3f28e1.jpg"},4732:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/34-072d97c85255fd657c0ab4f23f9f139a.jpg"},4344:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/35-c35baedab3e6923625e5a2505c228755.jpg"},5718:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/36-069dc542867179fe0743c3363b1c5041.jpg"},8714:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/37-2546121d4d8323a3cd905b5402ad04f2.jpg"},1729:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/38-f72a8b0868a34c32bffd2559b3b77171.jpg"},7711:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/39-3a813c876f6ed93c76190c19a32aacb0.jpg"},7799:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/4-7133214bd4e9dd8d1beb17695003ae77.jpg"},1292:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/40-ebd63603ca0a173e075d33d6b3a4a336.jpg"},5386:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/41-f21feaaaa1aab2a7f8b285f4b2356020.jpg"},383:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/42-a7f7da9b992e95b7dcf26ba3c664d2e9.jpg"},8268:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/43-775caf6e678060bed3be4bf668226183.jpg"},1106:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/44-e860ff0dcb8ca7554ed94a294cc014c6.jpg"},9353:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/45-3d1cae96476f1de9b0a6c53be62a502f.jpg"},480:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/46-f71b4e869cd3008653472b5ecd0031e6.jpg"},9010:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/47-b82444c6317cb04c4e936cfdc88b8cf5.jpg"},9933:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/48-9e7190e1defd8c9fd2a2bb848a084c54.jpg"},4464:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/49-e3bf1c476eb1c9f8fc1d6e6d9666c2cb.jpg"},5188:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/5-8493131583356e9c5d153d622726ca7a.jpg"},4619:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/50-c52aa08a9663215d9a8bec969ebd00d4.jpg"},5239:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/6-ec89af05609c1c3d4ee5771623e2f219.jpg"},541:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/7-94e63021dae29c5b2790369b13bcf938.jpg"},8715:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/8-79afa58c76332cbf19b4bf4a872d25bf.jpg"},537:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i=n.p+"assets/images/9-4f969193573ee29fbf560342116ab755.jpg"},9913:(t,e,n)=>{var i={"./1.jpg":4277,"./10.jpg":5852,"./11.jpg":2314,"./12.jpg":4997,"./13.jpg":8599,"./14.jpg":2297,"./15.jpg":3617,"./16.jpg":7173,"./17.jpg":2634,"./18.jpg":1165,"./19.jpg":4573,"./2.jpg":7220,"./20.jpg":323,"./21.jpg":4316,"./22.jpg":859,"./23.jpg":6823,"./24.jpg":2094,"./25.jpg":3159,"./26.jpg":6011,"./27.jpg":3085,"./28.jpg":3682,"./29.jpg":8145,"./3.jpg":5057,"./30.jpg":8026,"./31.jpg":57,"./32.jpg":5102,"./33.jpg":1871,"./34.jpg":4732,"./35.jpg":4344,"./36.jpg":5718,"./37.jpg":8714,"./38.jpg":1729,"./39.jpg":7711,"./4.jpg":7799,"./40.jpg":1292,"./41.jpg":5386,"./42.jpg":383,"./43.jpg":8268,"./44.jpg":1106,"./45.jpg":9353,"./46.jpg":480,"./47.jpg":9010,"./48.jpg":9933,"./49.jpg":4464,"./5.jpg":5188,"./50.jpg":4619,"./6.jpg":5239,"./7.jpg":541,"./8.jpg":8715,"./9.jpg":537};function s(t){var e=r(t);return n(e)}function r(t){if(!n.o(i,t)){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}return i[t]}s.keys=function(){return Object.keys(i)},s.resolve=r,t.exports=s,s.id=9913}}]); \ No newline at end of file diff --git a/assets/js/29a9755a.d8665d00.js b/assets/js/29a9755a.d8665d00.js new file mode 100644 index 00000000..2eb7984c --- /dev/null +++ b/assets/js/29a9755a.d8665d00.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[8138,825],{3566:(e,t,n)=>{n.d(t,{q:()=>s});var i=n(5362),a=n(2784);function s(e,t){var n=(0,a.useRef)(!0),s=(0,a.useMemo)((function(){return(0,i.tG)(e,t)}),[]),r=s.state(),o=(0,i.XP)(r),u=(0,a.useState)({})[0],l=function(e){var t=(0,a.useState)((function(){return r[e]}));u[e]={getter:!1,set:t[1],value:t[0]}};for(var c in r)l(c);n.current=!0;var h=(0,a.useMemo)((function(){return s.methods()}),[]);(0,a.useEffect)((function(){n.current=!1})),(0,a.useEffect)((function(){s.mounted();var e=s.instance();return o.forEach((function(t){e.subscribe(t,(function(e){u[t].value=e,u[t].getter&&u[t].set(e)}))})),s.init(),function(){s.destroy()}}),[]);var d=o.reduce((function(e,t){return h[t]||Object.defineProperty(e,t,{enumerable:!0,get:function(){return n.current&&(u[t].getter=!0),u[t].value}}),e}),{});return s.events().forEach((function(e){d[(0,i._A)("on ".concat(e))]=function(t,n){var i=(0,a.useMemo)((function(){return s.on(e,t),t}),n);(0,a.useEffect)((function(){return s.off(e,i),s.on(e,i),function(){s.off(e,i)}}),[i])}})),(0,i.XP)(h).forEach((function(e){d[e]=h[e]})),d}},876:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>v});var i=n(2784);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function r(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=i.createContext({}),l=function(e){var t=i.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},c=function(e){var t=l(e.components);return i.createElement(u.Provider,{value:t},e.children)},h="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},p=i.forwardRef((function(e,t){var n=e.components,a=e.mdxType,s=e.originalType,u=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),h=l(n),p=a,v=h["".concat(u,".").concat(p)]||h[p]||d[p]||s;return n?i.createElement(v,r(r({ref:t},c),{},{components:n})):i.createElement(v,r({ref:t},c))}));function v(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var s=n.length,r=new Array(s);r[0]=p;var o={};for(var u in t)hasOwnProperty.call(t,u)&&(o[u]=t[u]);o.originalType=e,o[h]="string"==typeof e?e:a,r[1]=o;for(var l=2;l{n.r(t),n.d(t,{contentTitle:()=>o,default:()=>d,frontMatter:()=>r,metadata:()=>u,toc:()=>l});var i=n(7896),a=(n(2784),n(876)),s=n(5002);const r={title:"Options",custom_edit_url:null},o="Options",u={type:"mdx",permalink:"/egjs-axes/Options",source:"@site/src/pages/Options.mdx",title:"Options",description:"Axis Options",frontMatter:{title:"Options",custom_edit_url:null}},l=[{value:"Axis Options",id:"axis-options",level:2},{value:"range",id:"range",level:3},{value:"bounce",id:"bounce",level:3},{value:"circular",id:"circular",level:3},{value:"startPos",id:"startpos",level:3},{value:"Axes Options",id:"axes-options",level:2},{value:"easing",id:"easing",level:3},{value:"maximumDuration",id:"maximumduration",level:3},{value:"minimumDuration",id:"minimumduration",level:3},{value:"deceleration",id:"deceleration",level:3},{value:"interruptable",id:"interruptable",level:3},{value:"round",id:"round",level:3},{value:"nested",id:"nested",level:3},{value:"PanInput Options",id:"paninput-options",level:2},{value:"scale",id:"scale",level:3},{value:"inputType",id:"inputtype",level:3},{value:"inputKey",id:"inputkey",level:3},{value:"inputButton",id:"inputbutton",level:3},{value:"thresholdAngle",id:"thresholdangle",level:3},{value:"threshold",id:"threshold",level:3},{value:"preventClickOnDrag",id:"preventclickondrag",level:3},{value:"preventDefaultOnDrag",id:"preventdefaultondrag",level:3},{value:"iOSEdgeSwipeThreshold",id:"iosedgeswipethreshold",level:3},{value:"releaseOnScroll",id:"releaseonscroll",level:3},{value:"touchAction",id:"touchaction",level:3},{value:"WheelInput Options",id:"wheelinput-options",level:2},{value:"inputKey",id:"inputkey-1",level:3},{value:"scale",id:"scale-1",level:3},{value:"releaseDelay",id:"releasedelay",level:3},{value:"useAnimation",id:"useanimation",level:3},{value:"MoveKeyInput Options",id:"movekeyinput-options",level:2},{value:"scale",id:"scale-2",level:3},{value:"PinchInput Options",id:"pinchinput-options",level:2},{value:"scale",id:"scale-3",level:3},{value:"threshold",id:"threshold-1",level:3},{value:"inputType",id:"inputtype-1",level:3},{value:"touchAction",id:"touchaction-1",level:3}],c={toc:l},h="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(h,(0,i.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"options"},"Options"),(0,a.kt)("h2",{id:"axis-options"},"Axis Options"),(0,a.kt)("h3",{id:"range"},"range"),(0,a.kt)("p",null,"The range of coordinate."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n range: [0, width],\n},\ny: {\n range: [0, height],\n},\n"))),(0,a.kt)(s.default,{mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n range: [0, width / 2],\n},\ny: {\n range: [0, height / 2],\n},\n"))),(0,a.kt)(s.default,{axis:{x:{range:[0,.5]},y:{range:[0,.5]}},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"bounce"},"bounce"),(0,a.kt)("p",null,"The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action.\nIf the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n bounce: 10,\n},\ny: {\n bounce: 10,\n},\n"))),(0,a.kt)(s.default,{axis:{x:{bounce:10},y:{bounce:10}},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n bounce: 20,\n},\ny: {\n bounce: 20,\n},\n"))),(0,a.kt)(s.default,{axis:{x:{bounce:20},y:{bounce:20}},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"circular"},"circular"),(0,a.kt)("p",null,'Indicates whether a circular element is available.\nIf it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.'),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n circular: false,\n},\ny: {\n circular: false,\n},\n"))),(0,a.kt)(s.default,{axis:{x:{circular:!1},y:{circular:!1}},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n circular: true,\n},\ny: {\n circular: true,\n},\n"))),(0,a.kt)(s.default,{axis:{x:{circular:!0},y:{circular:!0}},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"startpos"},"startPos"),(0,a.kt)("p",null,"The coordinates to be moved when creating an instance."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n startPos: 0,\n},\ny: {\n startPos: 60,\n},\n"))),(0,a.kt)(s.default,{axis:{x:{startPos:.1},y:{startPos:60}},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"x: {\n startPos: 100,\n},\ny: {\n startPos: 60,\n},\n"))),(0,a.kt)(s.default,{axis:{x:{startPos:100},y:{startPos:60}},mdxType:"AxesBoard"}))),(0,a.kt)("h2",{id:"axes-options"},"Axes Options"),(0,a.kt)("h3",{id:"easing"},"easing"),(0,a.kt)("p",null,"The easing function to apply to an animation."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"easing: x => 1 - Math.pow(1 - x, 3)\n"))),(0,a.kt)(s.default,{options:{easing:e=>1-Math.pow(1-e,3)},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"easing: x => x\n"))),(0,a.kt)(s.default,{options:{easing:e=>e},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"maximumduration"},"maximumDuration"),(0,a.kt)("p",null,"Maximum duration of the animation. (milisecond)"),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"maximumDuration: 5000\n"))),(0,a.kt)(s.default,{options:{maximumDuration:5e3},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"maximumDuration: 500\n"))),(0,a.kt)(s.default,{options:{maximumDuration:500},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"minimumduration"},"minimumDuration"),(0,a.kt)("p",null,"Minimum duration of the animation. (milisecond)"),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"minimumDuration: 0\n"))),(0,a.kt)(s.default,{options:{minimumDuration:0},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"minimumDuration: 2000\n"))),(0,a.kt)(s.default,{options:{minimumDuration:2e3},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"deceleration"},"deceleration"),(0,a.kt)("p",null,"Deceleration of the animation where acceleration is manually enabled by user.\nA higher value indicates shorter running time."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"deceleration: 0.0006\n"))),(0,a.kt)(s.default,{options:{deceleration:6e-4},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"deceleration: 0.0015\n"))),(0,a.kt)(s.default,{options:{deceleration:.0015},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"interruptable"},"interruptable"),(0,a.kt)("p",null,"Indicates whether an animation is interruptible."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"true: It can be paused or stopped by user action or the API."),(0,a.kt)("li",{parentName:"ul"},"false: It cannot be paused or stopped by user action or the API while it is running.")),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"interruptable: true\n"))),(0,a.kt)(s.default,{options:{interruptable:!0},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"interruptable: false\n"))),(0,a.kt)(s.default,{options:{interruptable:!1},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"round"},"round"),(0,a.kt)("p",null,"Rounding unit. For example, 0.1 rounds to 0.1 decimal point(6.1234 => 6.1), 5 rounds to 5 (93 => 95)"),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"round: 1\n"))),(0,a.kt)(s.default,{options:{round:1},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"round: 20\n"))),(0,a.kt)(s.default,{options:{round:20},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"nested"},"nested"),(0,a.kt)("p",null,"Whether the event propagates to other instances when the coordinates reach the end of the movable area."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"nested: false\n"))),(0,a.kt)(s.default,{options:{nested:!0},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"nested: true\n"))),(0,a.kt)(s.default,{options:{nested:!0},demoType:"nested",mdxType:"AxesBoard"}))),(0,a.kt)("h2",{id:"paninput-options"},"PanInput Options"),(0,a.kt)("h3",{id:"scale"},"scale"),(0,a.kt)("p",null,"Coordinate scale that a user can move."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: [1, 1]\n"))),(0,a.kt)(s.default,{panInputOptions:{scale:[1,1]},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: [3, 3]\n"))),(0,a.kt)(s.default,{panInputOptions:{scale:[3,3]},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"inputtype"},"inputType"),(0,a.kt)("p",null,"Types of input devices."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"touch: Touch screen"),(0,a.kt)("li",{parentName:"ul"},"mouse: Mouse"),(0,a.kt)("li",{parentName:"ul"},"pointer: Mouse and touch")),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputType: ["mouse"]\n'))),(0,a.kt)(s.default,{panInputOptions:{inputType:["mouse"]},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputType: ["touch"]\n'))),(0,a.kt)(s.default,{panInputOptions:{inputType:["touch"]},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"inputkey"},"inputKey"),(0,a.kt)("p",null,"List of key combinations to allow input"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"any: any key"),(0,a.kt)("li",{parentName:"ul"},"shift: shift key"),(0,a.kt)("li",{parentName:"ul"},"ctrl: ctrl key and pinch gesture on the trackpad"),(0,a.kt)("li",{parentName:"ul"},"alt: alt key"),(0,a.kt)("li",{parentName:"ul"},"meta: meta key"),(0,a.kt)("li",{parentName:"ul"},"none: none of these keys are pressed")),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputKey: ["any"]\n'))),(0,a.kt)(s.default,{panInputOptions:{inputKey:[]},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputKey: ["ctrl"]\n'))),(0,a.kt)(s.default,{panInputOptions:{inputKey:["ctrl"]},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"inputbutton"},"inputButton"),(0,a.kt)("p",null,"List of buttons to allow input."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"left: Left mouse button and normal touch"),(0,a.kt)("li",{parentName:"ul"},"middle: Mouse wheel press"),(0,a.kt)("li",{parentName:"ul"},"right: Right mouse button")),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputButton: ["left", "right"]\n'))),(0,a.kt)(s.default,{panInputOptions:{inputButton:["left","right"]},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputButton: ["right"]\n'))),(0,a.kt)(s.default,{panInputOptions:{inputButton:["right"]},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"thresholdangle"},"thresholdAngle"),(0,a.kt)("p",null,"The threshold value that determines whether user action is horizontal or vertical (0~90)."),(0,a.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,a.kt)("div",{parentName:"div",className:"admonition-heading"},(0,a.kt)("h5",{parentName:"div"},(0,a.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,a.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,a.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,a.kt)("div",{parentName:"div",className:"admonition-content"},(0,a.kt)("p",{parentName:"div"},"Hint: These examples only have a x-axis. Try using the input direction similar to y-axis."))),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"thresholdAngle: 15\n"))),(0,a.kt)(s.default,{panInputOptions:{thresholdAngle:15},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"thresholdAngle: 75\n"))),(0,a.kt)(s.default,{panInputOptions:{thresholdAngle:75},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"threshold"},"threshold"),(0,a.kt)("p",null,"Minimal pan distance required before recognizing."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"threshold: 0\n"))),(0,a.kt)(s.default,{panInputOptions:{threshold:0},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"threshold: 30\n"))),(0,a.kt)(s.default,{panInputOptions:{threshold:30},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"preventclickondrag"},"preventClickOnDrag"),(0,a.kt)("p",null,"Whether to cancel the click event when the user finishes dragging more than 1 pixel."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"preventClickOnDrag: false\n"))),(0,a.kt)(s.default,{panInputOptions:{preventClickOnDrag:!1},demoType:"preventClickOnDrag",mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"preventClickOnDrag: true\n"))),(0,a.kt)(s.default,{panInputOptions:{preventClickOnDrag:!0},demoType:"preventClickOnDrag",mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"preventdefaultondrag"},"preventDefaultOnDrag"),(0,a.kt)("p",null,"Whether to use the preventDefault when the user starts dragging."),(0,a.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,a.kt)("div",{parentName:"div",className:"admonition-heading"},(0,a.kt)("h5",{parentName:"div"},(0,a.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,a.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,a.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,a.kt)("div",{parentName:"div",className:"admonition-content"},(0,a.kt)("p",{parentName:"div"},"Hint: These examples only have a x-axis. Try using the input direction similar to y-axis."))),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"preventDefaultOnDrag: false\n"))),(0,a.kt)(s.default,{panInputOptions:{thresholdAngle:45,preventDefaultOnDrag:!1},demoType:"preventDefaultOnDrag",mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"preventDefaultOnDrag: true\n"))),(0,a.kt)(s.default,{panInputOptions:{thresholdAngle:45,preventDefaultOnDrag:!0},demoType:"preventDefaultOnDrag",mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"iosedgeswipethreshold"},"iOSEdgeSwipeThreshold"),(0,a.kt)("p",null,"Area (px) that can go to the next page when swiping the right edge in iOS safari."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"iOSEdgeSwipeThreshold: 30\n"))),(0,a.kt)(s.default,{panInputOptions:{iOSEdgeSwipeThreshold:30},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"iOSEdgeSwipeThreshold: 120\n"))),(0,a.kt)(s.default,{panInputOptions:{iOSEdgeSwipeThreshold:120},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"releaseonscroll"},"releaseOnScroll"),(0,a.kt)("p",null,"Whether to release input when a native event with ",(0,a.kt)("inlineCode",{parentName:"p"},"cancelable: false")," occurs while user input."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"releaseOnScroll: false\n"))),(0,a.kt)(s.default,{panInputOptions:{releaseOnScroll:!1},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"releaseOnScroll: true\n"))),(0,a.kt)(s.default,{panInputOptions:{releaseOnScroll:!0},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"touchaction"},"touchAction"),(0,a.kt)("p",null,'Value that overrides the element\'s "touch-action" css property.\nIf set to null, it is automatically set to prevent scrolling in the direction of the connected axis.'),(0,a.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,a.kt)("div",{parentName:"div",className:"admonition-heading"},(0,a.kt)("h5",{parentName:"div"},(0,a.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,a.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,a.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,a.kt)("div",{parentName:"div",className:"admonition-content"},(0,a.kt)("p",{parentName:"div"},"Hint: These examples only have a x-axis. Try using the input direction similar to y-axis in mobile device."))),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'touchAction: "none"\n'))),(0,a.kt)(s.default,{panInputOptions:{thresholdAngle:45,touchAction:"none"},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'touchAction: "pan-y"\n'))),(0,a.kt)(s.default,{panInputOptions:{thresholdAngle:45,touchAction:"pan-y"},mdxType:"AxesBoard"}))),(0,a.kt)("h2",{id:"wheelinput-options"},"WheelInput Options"),(0,a.kt)("h3",{id:"inputkey-1"},"inputKey"),(0,a.kt)("p",null,"List of key combinations to allow input"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"any: any key"),(0,a.kt)("li",{parentName:"ul"},"shift: shift key"),(0,a.kt)("li",{parentName:"ul"},"ctrl: ctrl key and pinch gesture on the trackpad"),(0,a.kt)("li",{parentName:"ul"},"alt: alt key"),(0,a.kt)("li",{parentName:"ul"},"meta: meta key"),(0,a.kt)("li",{parentName:"ul"},"none: none of these keys are pressed")),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputKey: ["any"]\n'))),(0,a.kt)(s.default,{wheelInputOptions:{inputKey:["any"]},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputKey: ["ctrl"]\n'))),(0,a.kt)(s.default,{wheelInputOptions:{inputKey:["ctrl"]},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"scale-1"},"scale"),(0,a.kt)("p",null,"Coordinate scale that a user can move."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: 5\n"))),(0,a.kt)(s.default,{wheelInputOptions:{scale:5},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: 20\n"))),(0,a.kt)(s.default,{wheelInputOptions:{scale:20},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"releasedelay"},"releaseDelay"),(0,a.kt)("p",null,"Millisecond that trigger release event after last input."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"releaseDelay: 300\n"))),(0,a.kt)(s.default,{wheelInputOptions:{releaseDelay:300},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"releaseDelay: 2000\n"))),(0,a.kt)(s.default,{wheelInputOptions:{releaseDelay:2e3},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"useanimation"},"useAnimation"),(0,a.kt)("p",null,"Whether to process coordinate changes through the mouse wheel as a continuous animation."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"useAnimation: false\n"))),(0,a.kt)(s.default,{wheelInputOptions:{scale:10,useAnimation:!1},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"useAnimation: true\n"))),(0,a.kt)(s.default,{wheelInputOptions:{scale:10,useAnimation:!0},mdxType:"AxesBoard"}))),(0,a.kt)("h2",{id:"movekeyinput-options"},"MoveKeyInput Options"),(0,a.kt)("h3",{id:"scale-2"},"scale"),(0,a.kt)("p",null,"Coordinate scale that a user can move."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: [5, -5]\n"))),(0,a.kt)(s.default,{moveKeyInputOptions:{scale:[5,-5]},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: [20, -20]\n"))),(0,a.kt)(s.default,{moveKeyInputOptions:{scale:[20,-20]},mdxType:"AxesBoard"}))),(0,a.kt)("h2",{id:"pinchinput-options"},"PinchInput Options"),(0,a.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,a.kt)("div",{parentName:"div",className:"admonition-heading"},(0,a.kt)("h5",{parentName:"div"},(0,a.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,a.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,a.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,a.kt)("div",{parentName:"div",className:"admonition-content"},(0,a.kt)("p",{parentName:"div"},"Hint: You can compare the action of PinchInput on mobile device."))),(0,a.kt)("h3",{id:"scale-3"},"scale"),(0,a.kt)("p",null,"Coordinate scale that a user can move."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: 4\n"))),(0,a.kt)(s.default,{pinchInputOptions:{scale:4},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"scale: 10\n"))),(0,a.kt)(s.default,{pinchInputOptions:{scale:10},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"threshold-1"},"threshold"),(0,a.kt)("p",null,"Minimal scale before recognizing."),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"threshold: 0\n"))),(0,a.kt)(s.default,{pinchInputOptions:{threshold:0},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"threshold: 5\n"))),(0,a.kt)(s.default,{pinchInputOptions:{threshold:5},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"inputtype-1"},"inputType"),(0,a.kt)("p",null,"Types of input devices"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"touch: Touch screen"),(0,a.kt)("li",{parentName:"ul"},"pointer: Mouse and touch")),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputType: ["touch"]\n'))),(0,a.kt)(s.default,{pinchInputOptions:{inputType:["touch"]},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'inputType: ["touch", "pointer"]\n'))),(0,a.kt)(s.default,{pinchInputOptions:{inputType:["touch","pointer"]},mdxType:"AxesBoard"}))),(0,a.kt)("h3",{id:"touchaction-1"},"touchAction"),(0,a.kt)("p",null,'Value that overrides the element\'s "touch-action" css property.\nIt is set to "none" to prevent scrolling during touch.'),(0,a.kt)("div",{className:"columns"},(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'touchAction: "none"\n'))),(0,a.kt)(s.default,{pinchInputOptions:{touchAction:"none"},mdxType:"AxesBoard"})),(0,a.kt)("div",{className:"column is-6"},(0,a.kt)("div",null,(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'touchAction: "pan-y"\n'))),(0,a.kt)(s.default,{pinchInputOptions:{touchAction:"pan-y"},mdxType:"AxesBoard"}))))}d.isMDXComponent=!0},4458:(e,t,n)=>{n.d(t,{HA:()=>pe,Ju:()=>ce,ZP:()=>ge,cD:()=>me,f3:()=>ve,nj:()=>de,zV:()=>he});var i=n(5161),a=n(1588),s=n(5362),r=function(e,t){return r=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])},r(e,t)};function o(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var u,l=function(){return l=Object.assign||function(e){for(var t,n=1,i=arguments.length;n=0;o--)(a=e[o])&&(r=(s<3?a(r):s>3?a(t,n,r):a(t,n))||r);return s>3&&r&&Object.defineProperty(t,n,r),r}u="undefined"==typeof window?{navigator:{userAgent:""}}:window;var h=24,d="left",p="right",v="middle",m={1:d,2:v,3:p},g="any",f="ontouchstart"in u&&"safari"===(0,i.ZP)().browser.name,_=function(){if("undefined"==typeof document)return"";for(var e=(document.head||document.getElementsByTagName("head")[0]).style,t=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=t.length;n]*)>/)){var i=document.createElement("div");i.innerHTML=e,n=x(i.childNodes)}else n=x(document.querySelectorAll(e));t||(n=n.length>=1?n[0]:void 0)}else e===u?n=e:"value"in e||"current"in e?n=e.value||e.current:!e.nodeName||1!==e.nodeType&&9!==e.nodeType?"jQuery"in u&&e instanceof jQuery||e.constructor.prototype.jquery?n=t?e.toArray():e.get(0):Array.isArray(e)&&(n=e.map((function(e){return y(e)})),t||(n=n.length>=1?n[0]:void 0)):n=e;return n},N=u.requestAnimationFrame||u.webkitRequestAnimationFrame,E=u.cancelAnimationFrame||u.webkitCancelAnimationFrame;if(N&&!E){var b={},O=N;N=function(e){var t=O((function(n){b[t]&&e(n)}));return b[t]=!0,t},E=function(e){delete b[e]}}else N&&E||(N=function(e){return u.setTimeout((function(){e(u.performance&&u.performance.now&&u.performance.now()||(new Date).getTime())}),16)},E=u.clearTimeout);var T=function(e,t){var n={};for(var i in e)i&&(n[i]=t(e[i],i));return n},M=function(e,t){var n={};for(var i in e)i&&t(e[i],i)&&(n[i]=e[i]);return n},w=function(e,t){for(var n in e)if(n&&!t(e[n],n))return!1;return!0},P=function(e,t){return w(e,(function(e,n){return e===t[n]}))},A={},D=function(e,t){return A[t]||(A[t]=B(t)),A[t](e)},I=function(e,t){return e&&t?T(e,(function(e,n){return D(e,"number"==typeof t?t:t[n])})):e},j=function(e){if(!isFinite(e))return 0;var t="".concat(e);if(t.indexOf("e")>=0){for(var n=0,i=1;Math.round(e*i)/i!==e;)i*=10,n++;return n}return t.indexOf(".")>=0?t.length-t.indexOf(".")-1:0},B=function(e){var t=e<1?Math.pow(10,j(e)):1;return function(n){return 0===e?0:Math.round(Math.round(n/e)*e*t)/t}},C=function(e,t){return 180*Math.atan2(t,e)/Math.PI},S=function(e){var t=!0;return Object.keys(k).forEach((function(n){e&&e[n]===k[n]||(t=!1)})),t},R=function(e,t){return e&&t?30:e?6:t?h:1},L=function(e,t,n){return n?!!(30===t||t&e&&n&e):!!(t&e)},K=function(e,t,n){var i,a=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),s={};if(e&&e.style){var r=t.touchAction?t.touchAction:a[n],o=l(l({},k),{"touch-action":"none"===e.style["touch-action"]?"none":r});Object.keys(o).forEach((function(t){s[t]=e.style[t]})),Object.keys(o).forEach((function(t){e.style[t]=o[t]}))}return s},X=function(e,t){e&&e.style&&t&&Object.keys(t).forEach((function(n){e.style[n]=t[n]}))},Y=function(){function e(e){this._axes=e,this.holdingCount=0}var t=e.prototype;return t.hold=function(e,t){var n=this._getRoundPos(e).roundPos;this._axes.trigger(new a.L("hold",{pos:n,input:t.input||null,inputEvent:t.event||null,isTrusted:!0}))},t.triggerRelease=function(e){var t=this._getRoundPos(e.destPos,e.depaPos),n=t.roundPos,i=t.roundDepa;e.destPos=n,e.depaPos=i,e.setTo=this._createUserControll(e.destPos,e.duration),this._axes.trigger(new a.L("release",l(l({},e),{bounceRatio:this._getBounceRatio(n)})))},t.triggerChange=function(e,t,n,i){var r=this;void 0===i&&(i=!1);var o=this.animationManager,u=o.axisManager,l=o.getEventInfo(),c=this._getRoundPos(e,t),h=c.roundPos,d=c.roundDepa,p=u.moveTo(h,d),v=(null==n?void 0:n.event)||(null==l?void 0:l.event)||null,m={pos:p.pos,delta:p.delta,bounceRatio:this._getBounceRatio(p.pos),holding:i,inputEvent:v,isTrusted:!!v,input:(null==n?void 0:n.input)||(null==l?void 0:l.input)||null,set:v?this._createUserControll(p.pos):function(){}},g=new a.L("change",m);return this._axes.trigger(g),Object.keys(p.pos).forEach((function(e){var t=p.pos[e];(0,s.CV)(r._axes,e,t).current=t})),v&&u.set(m.set().destPos),!g.isCanceled()},t.triggerAnimationStart=function(e){var t=this._getRoundPos(e.destPos,e.depaPos),n=t.roundPos,i=t.roundDepa;e.destPos=n,e.depaPos=i,e.setTo=this._createUserControll(e.destPos,e.duration);var s=new a.L("animationStart",e);return this._axes.trigger(s),!s.isCanceled()},t.triggerAnimationEnd=function(e){void 0===e&&(e=!1),this._axes.trigger(new a.L("animationEnd",{isTrusted:e}))},t.triggerFinish=function(e){void 0===e&&(e=!1),this._axes.trigger(new a.L("finish",{isTrusted:e}))},t.setAnimationManager=function(e){this.animationManager=e},t.destroy=function(){this._axes.off()},t._createUserControll=function(e,t){void 0===t&&(t=0);var n={destPos:l({},e),duration:t};return function(e,t){return e&&(n.destPos=l({},e)),void 0!==t&&(n.duration=t),n}},t._getRoundPos=function(e,t){var n=this._axes.options.round;return{roundPos:I(e,n),roundDepa:I(t,n)}},t._getBounceRatio=function(e){return this._axes.axisManager.map(e,(function(e,t){return et.range[1]&&0!==t.bounce[1]?(e-t.range[1])/t.bounce[1]:0}))},c([s.cn],e.prototype,"holdingCount",void 0),e}(),z=function(){function e(e){this._options=e,this._prevented=!1}var t=e.prototype;return t.isInterrupting=function(){return this._options.interruptable||this._prevented},t.isInterrupted=function(){return!this._options.interruptable&&this._prevented},t.setInterrupt=function(e){this._options.interruptable||(this._prevented=e)},e}(),F=function(e,t,n,i){var a=e,s=[n[0]?t[0]:i?t[0]-i[0]:t[0],n[1]?t[1]:i?t[1]+i[1]:t[1]];return a=Math.max(s[0],a),a=Math.min(s[1],a)},V=function(e,t){return et[1]},W=function(e,t,n){return n[1]&&e>t[1]||n[0]&&es&&(i=(i-s)%r+a),n[0]&&e-1||t.indexOf("none")>-1&&!e.shiftKey&&!e.ctrlKey&&!e.altKey&&!e.metaKey||t.indexOf("shift")>-1&&e.shiftKey||t.indexOf("ctrl")>-1&&e.ctrlKey||t.indexOf("alt")>-1&&e.altKey||t.indexOf("meta")>-1&&e.metaKey)},J=function(){function e(){var e=this;this._stopContextMenu=function(t){t.preventDefault(),u.removeEventListener("contextmenu",e._stopContextMenu)}}var t=e.prototype;return t.extendEvent=function(e){var t,n=this.prevEvent,i=this._getCenter(e),a=n?this._getMovement(e):{x:0,y:0},s=n?this._getScale(e):1,r=n?C(i.x-n.center.x,i.y-n.center.y):0,o=n?n.deltaX+a.x:a.x,u=n?n.deltaY+a.y:a.y,l=a.x,c=a.y,h=this._latestInterval,d=Date.now(),p=h?d-h.timestamp:0,v=n?n.velocityX:0,m=n?n.velocityY:0;return(!h||p>=16)&&(h&&(v=(t=[(o-h.deltaX)/p,(u-h.deltaY)/p])[0],m=t[1]),this._latestInterval={timestamp:d,deltaX:o,deltaY:u}),{srcEvent:e,scale:s,angle:r,center:i,deltaX:o,deltaY:u,offsetX:l,offsetY:c,velocityX:v,velocityY:m,preventSystemEvent:!0}},t._getDistance=function(e,t){var n=t.clientX-e.clientX,i=t.clientY-e.clientY;return Math.sqrt(n*n+i*i)},t._getButton=function(e){var t={1:d,2:p,4:v},n=this._isTouchEvent(e)?d:t[e.buttons];return n||null},t._isTouchEvent=function(e){return e.type&&e.type.indexOf("touch")>-1},t._isValidButton=function(e,t){return t.indexOf(e)>-1},t._isValidEvent=function(e,t,n){return(!t||Q(e,t))&&(!n||this._isValidButton(this._getButton(e),n))},t._preventMouseButton=function(e,t){t===p?u.addEventListener("contextmenu",this._stopContextMenu):t===v&&e.preventDefault()},e}(),G=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=["mousedown"],t.move=["mousemove"],t.end=["mouseup"],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t,n){var i=this._getButton(e);return this._isValidEvent(e,t,n)?(this._preventMouseButton(e,i),this.extendEvent(e)):null},n.onEventMove=function(e,t,n){return this._isValidEvent(e,t,n)?this.extendEvent(e):null},n.onEventEnd=function(){},n.onRelease=function(){this.prevEvent=null},n.getTouches=function(e,t){return t&&this._isValidButton(m[e.which],t)&&-1===this.end.indexOf(e.type)?1:0},n._getScale=function(){return 1},n._getCenter=function(e){return{x:e.clientX,y:e.clientY}},n._getMovement=function(e){var t=this.prevEvent.srcEvent;return{x:e.clientX-t.clientX,y:e.clientY-t.clientY}},t}(J),ee=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=["touchstart"],t.move=["touchmove"],t.end=["touchend","touchcancel"],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t){return this._baseTouches=e.touches,this._isValidEvent(e,t)?this.extendEvent(e):null},n.onEventMove=function(e,t){return this._isValidEvent(e,t)?this.extendEvent(e):null},n.onEventEnd=function(e){this._baseTouches=e.touches},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(e){return e.touches.length},n._getScale=function(e){return 2!==e.touches.length||this._baseTouches.length<2?null:this._getDistance(e.touches[0],e.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},n._getCenter=function(e){return{x:e.touches[0].clientX,y:e.touches[0].clientY}},n._getMovement=function(e){var t=this.prevEvent.srcEvent;return e.touches[0].identifier!==t.touches[0].identifier?{x:0,y:0}:{x:e.touches[0].clientX-t.touches[0].clientX,y:e.touches[0].clientY-t.touches[0].clientY}},t}(J),te=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=Z?["pointerdown"]:["MSPointerDown"],t.move=Z?["pointermove"]:["MSPointerMove"],t.end=Z?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],t._firstInputs=[],t._recentInputs=[],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t,n){var i=this._getButton(e);return this._isValidEvent(e,t,n)?(this._preventMouseButton(e,i),this._updatePointerEvent(e),this.extendEvent(e)):null},n.onEventMove=function(e,t,n){return this._isValidEvent(e,t,n)?(this._updatePointerEvent(e),this.extendEvent(e)):null},n.onEventEnd=function(e){this._removePointerEvent(e)},n.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},n.getTouches=function(){return this._recentInputs.length},n._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},n._getCenter=function(e){return{x:e.clientX,y:e.clientY}},n._getMovement=function(e){var t=this.prevEvent.srcEvent;return e.pointerId!==t.pointerId?{x:0,y:0}:{x:e.clientX-t.clientX,y:e.clientY-t.clientY}},n._updatePointerEvent=function(e){var t=this,n=!1;this._recentInputs.forEach((function(i,a){i.pointerId===e.pointerId&&(n=!0,t._recentInputs[a]=e)})),n||(this._firstInputs.push(e),this._recentInputs.push(e))},n._removePointerEvent=function(e){this._firstInputs=this._firstInputs.filter((function(t){return t.pointerId!==e.pointerId})),this._recentInputs=this._recentInputs.filter((function(t){return t.pointerId!==e.pointerId}))},t}(J),ne=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.start=["mousedown","touchstart"],t.move=["mousemove","touchmove"],t.end=["mouseup","touchend","touchcancel"],t}o(t,e);var n=t.prototype;return n.onEventStart=function(e,t,n){var i=this._getButton(e);return this._isTouchEvent(e)&&(this._baseTouches=e.touches),this._isValidEvent(e,t,n)?(this._preventMouseButton(e,i),this.extendEvent(e)):null},n.onEventMove=function(e,t,n){return this._isValidEvent(e,t,n)?this.extendEvent(e):null},n.onEventEnd=function(e){this._isTouchEvent(e)&&(this._baseTouches=e.touches)},n.onRelease=function(){this.prevEvent=null,this._baseTouches=null},n.getTouches=function(e,t){return this._isTouchEvent(e)?e.touches.length:this._isValidButton(m[e.which],t)&&-1===this.end.indexOf(e.type)?1:0},n._getScale=function(e){return this._isTouchEvent(e)?2!==e.touches.length||this._baseTouches.length<2?1:this._getDistance(e.touches[0],e.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},n._getCenter=function(e){return this._isTouchEvent(e)?{x:e.touches[0].clientX,y:e.touches[0].clientY}:{x:e.clientX,y:e.clientY}},n._getMovement=function(e){var t=this,n=[e,this.prevEvent.srcEvent].map((function(e){return t._isTouchEvent(e)?{id:e.touches[0].identifier,x:e.touches[0].clientX,y:e.touches[0].clientY}:{id:null,x:e.clientX,y:e.clientY}})),i=n[0],a=n[1];return i.id===a.id?{x:i.x-a.x,y:i.y-a.y}:{x:0,y:0}},t}(J),ie=function(e,t){return t.reduce((function(t,n,i){return e[i]&&(t[e[i]]=n),t}),{})},ae=function(e){void 0===e&&(e=[]);var t=!1,n=!1,i=!1;return e.forEach((function(e){switch(e){case"mouse":n=!0;break;case"touch":t=q;break;case"pointer":i=$}})),i?new te:t&&n?new ne:t?new ee:n?new G:null};function se(e){return e.indexOf("touch")>-1&&{passive:!1}}var re=function(){function e(e){var t=e.options,n=e.interruptManager,i=e.eventManager,a=e.axisManager,s=e.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=t,this._interruptManager=n,this._eventManager=i,this._axisManager=a,this._animationManager=s}var t=e.prototype;return t.get=function(e){return this._axisManager.get(e.axes)},t.hold=function(e,t){if(!this._interruptManager.isInterrupted()&&e.axes.length){var n={input:e,event:t};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(n),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),n),this._isOutside=this._axisManager.isOutside(e.axes),this._moveDistance=this._axisManager.get(e.axes)}},t.change=function(e,t,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(n,(function(e){return 0===e}))){var a=t.srcEvent?t.srcEvent:t;if(!a.__childrenAxesAlreadyChanged){var s,r=this._moveDistance||this._axisManager.get(e.axes);s=T(r,(function(e,t){return e+(n[t]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(s,(function(e,t){var n=t.circular,i=t.range;return n&&(n[0]||n[1])?H(e,i,n):e}))),this._isOutside&&this._axisManager.every(r,(function(e,t){return!V(e,t.range)}))&&(this._isOutside=!1),r=this._atOutside(r),s=this._atOutside(s),this.options.nested&&this._isEndofAxis(n,r,s)||(a.__childrenAxesAlreadyChanged=!0);var o={input:e,event:t};if(i){var u=this._animationManager.getDuration(s,r);this._animationManager.animateTo(s,u,o)}else{!this._eventManager.triggerChange(s,r,o,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},t.release=function(e,t,n,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var a=t.srcEvent?t.srcEvent:t;a.__childrenAxesAlreadyReleased&&(n=n.map((function(){return 0})));var s=this._axisManager.get(e.axes),r=this._axisManager.get(),o=this._animationManager.getDisplacement(n),u=ie(e.axes,o),c=this._axisManager.get(this._axisManager.map(u,(function(e,t,n){return t.circular&&(t.circular[0]||t.circular[1])?s[n]+e:F(s[n]+e,t.range,t.circular,t.bounce)})));a.__childrenAxesAlreadyReleased=!0;var h=this._animationManager.getDuration(c,s,i);0===h&&(c=l({},r));var d={depaPos:r,destPos:c,duration:h,delta:this._axisManager.getDelta(r,c),inputEvent:t,input:e,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(d),0===this._eventManager.holdingCount&&(this._moveDistance=null);var p=this._animationManager.getUserControl(d),v=P(p.destPos,r),m={input:e,event:t};v||0===p.duration?(v||this._eventManager.triggerChange(p.destPos,r,m,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(m):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(p.destPos,p.duration,m)}},t._atOutside=function(e){var t=this;return this._isOutside?this._axisManager.map(e,(function(e,t){var n=t.range[0]-t.bounce[0],i=t.range[1]+t.bounce[1];return e>i?i:ea?e:ea?a+t._animationManager.interpolate(e-a,s[1]):e}))},t._isEndofAxis=function(e,t,n){return this._axisManager.every(t,(function(i,a,s){return 0===e[s]||t[s]===n[s]&&(r=i,o=a.range,u=a.bounce,!(l=a.circular)[0]&&r===o[0]-u[0]||!l[1]&&r===o[1]+u[1]);var r,o,u,l}))},e}(),oe=function(e,t,n){return Math.max(Math.min(e,n),t)},ue=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t._useDuration=!0,t}o(t,e);var n=t.prototype;return n.interpolate=function(e,t){var n=this._easing(1e-5)/1e-5;return this._easing(e/(t*n))*t},n.updateAnimation=function(e){var t,n=this._animateParam;if(n){var i=(new Date).getTime()-n.startTime,a=(null==e?void 0:e.destPos)||n.destPos,s=null!==(t=null==e?void 0:e.duration)&&void 0!==t?t:n.duration;if((null==e?void 0:e.restart)||s<=i)this.setTo(a,s-i);else{if(null==e?void 0:e.destPos){var r=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,n.delta=this.axisManager.getDelta(r,a),n.destPos=a}if(null==e?void 0:e.duration){var o=(i+this._durationOffset)/n.duration;this._durationOffset=o*s-i,n.duration=s}}}},n._initState=function(e){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:e.depaPos,easingPer:0,finished:!1}},n._getNextState=function(e){var t=this,n=this._animateParam,i=e.pos,a=n.destPos,s=T(i,(function(e,t){return e<=a[t]?1:-1})),r=((new Date).getTime()-n.startTime+this._durationOffset)/n.duration,o=this._easing(r),u=this.axisManager.map(i,(function(e,u,l){var c=r>=1?a[l]:e+n.delta[l]*(o-t._prevEasingPer)/(1-t._initialEasingPer),h=H(c,u.range,u.circular);if(c!==h){var d=s[l]*(u.range[1]-u.range[0]);a[l]-=d,i[l]-=d}return h}));return this._prevEasingPer=o,{pos:u,easingPer:o,finished:o>=1}},n._easing=function(e){return e>1?1:this._options.easing(e)},t}(function(){function e(e){var t=e.options,n=e.interruptManager,i=e.eventManager,a=e.axisManager;this._options=t,this.interruptManager=n,this.eventManager=i,this.axisManager=a,this.animationEnd=this.animationEnd.bind(this)}var t=e.prototype;return t.getDuration=function(e,t,n){var i,a=this;if(void 0!==n)i=n;else{var s=T(t,(function(t,n){return function(e,t){var n=Math.sqrt(e/t*2);return n<100?0:n}(Math.abs(t-e[n]),a._options.deceleration)}));i=Object.keys(s).reduce((function(e,t){return Math.max(e,s[t])}),-1/0)}return oe(i,this._options.minimumDuration,this._options.maximumDuration)},t.getDisplacement=function(e){var t=Math.pow(e.reduce((function(e,t){return e+t*t}),0),1/e.length),n=Math.abs(t/-this._options.deceleration);return e.map((function(e){return e/2*n}))},t.stopAnimation=function(e){if(this._animateParam){var t=this.axisManager.get(),n=this.axisManager.map(t,(function(e,t){return H(e,t.range,t.circular)}));w(n,(function(e,n){return t[n]===e}))||this.eventManager.triggerChange(n,t,e,!!e),this._animateParam=null,this._raf&&(i=this._raf,E(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==e?void 0:e.event))}var i},t.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},t.restore=function(e){var t=this.axisManager.get(),n=this.axisManager.map(t,(function(e,t){return Math.min(t.range[1],Math.max(t.range[0],e))}));this.stopAnimation(),this.animateTo(n,this.getDuration(t,n),e)},t.animationEnd=function(){var e=this.getEventInfo();this._animateParam=null;var t=this.axisManager.filter(this.axisManager.get(),(function(e,t){return W(e,t.range,t.circular)}));Object.keys(t).length>0&&this.setTo(this.axisManager.map(t,(function(e,t){return H(e,t.range,t.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!e),this.axisManager.isOutside()?this.restore(e):this.finish(!!e)},t.finish=function(e){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(e)},t.getUserControl=function(e){var t=e.setTo();return t.destPos=this.axisManager.get(t.destPos),t.duration=oe(t.duration,this._options.minimumDuration,this._options.maximumDuration),t},t.animateTo=function(e,t,n){var i=this;this.stopAnimation();var a=this._createAnimationParam(e,t,n),s=l({},a.depaPos),r=this.eventManager.triggerAnimationStart(a),o=this.getUserControl(a);if(!r&&this.axisManager.every(o.destPos,(function(e,t){return W(e,t.range,t.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),r&&!P(o.destPos,s)){var u=(null==n?void 0:n.event)||null;this._animateLoop({depaPos:s,destPos:o.destPos,duration:o.duration,delta:this.axisManager.getDelta(s,o.destPos),isTrusted:!!u,inputEvent:u,input:(null==n?void 0:n.input)||null},(function(){return i.animationEnd()}))}},t.setTo=function(e,t){void 0===t&&(t=0);var n=Object.keys(e),i=this.axisManager.get(n);if(P(e,i))return this;this.interruptManager.setInterrupt(!0);var a=M(e,(function(e,t){return i[t]!==e}));return Object.keys(a).length?(a=this.axisManager.map(a,(function(e,t){var n=t.range,i=t.circular;return i&&(i[0]||i[1])?e:F(e,n,i)})),P(a,i)||(t>0?this.animateTo(a,t):(this.stopAnimation(),this.eventManager.triggerChange(a),this.finish(!1))),this):this},t.setBy=function(e,t){return void 0===t&&(t=0),this.setTo(T(this.axisManager.get(Object.keys(e)),(function(t,n){return t+e[n]})),t)},t.setOptions=function(e){this._options=l(l({},this._options),e)},t._createAnimationParam=function(e,t,n){var i=this.axisManager.get(),a=e,s=(null==n?void 0:n.event)||null;return{depaPos:i,destPos:a,duration:oe(t,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,a),inputEvent:s,input:(null==n?void 0:n.input)||null,isTrusted:!!s,done:this.animationEnd}},t._animateLoop=function(e,t){var n=this;if(e.duration){this._animateParam=l(l({},e),{startTime:(new Date).getTime()});var i=T(e.destPos,(function(e){return e})),a=this._initState(this._animateParam),s=function(){n._raf=null;var e=n._animateParam,r=n._getNextState(a),o=!n.eventManager.triggerChange(r.pos,a.pos);if(a=r,r.finished)return e.destPos=n._getFinalPos(e.destPos,i),P(e.destPos,n.axisManager.get(Object.keys(e.destPos)))||n.eventManager.triggerChange(e.destPos,r.pos),void t();o?n.finish(!1):n._raf=N(s)};s()}else this.eventManager.triggerChange(e.destPos),t()},t._getFinalPos=function(e,t){var n=this,i=1e-6;return T(e,(function(e,a){if(e>=t[a]-i&&e<=t[a]+i)return t[a];var s=n._getRoundUnit(e,a);return D(e,s)}))},t._getRoundUnit=function(e,t){var n,i=this._options.round,a=null;if(!i){var s=this.axisManager.getAxisOptions(t);n=Math.max(j(s.range[0]),j(s.range[1]),j(e)),a=1/Math.pow(10,n)}return a||i},e}()),le=function(e){function t(t,n,i){void 0===t&&(t={}),void 0===n&&(n={}),void 0===i&&(i={});var a=e.call(this)||this;return a.axis=t,a._inputs=[],a.options=l({easing:function(e){return 1-Math.pow(1-e,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},n),Object.keys(i).forEach((function(e){a.axis[e].startPos=i[e]})),a.interruptManager=new z(a.options),a.axisManager=new U(a.axis),a.eventManager=new Y(a),a.animationManager=new ue(a),a.inputObserver=new re(a),a.eventManager.setAnimationManager(a.animationManager),a.eventManager.triggerChange(a.axisManager.get()),a}o(t,e);var n=t.prototype;return Object.defineProperty(n,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),n.connect=function(e,t){var n;return n="string"==typeof e?e.split(" "):e.concat(),~this._inputs.indexOf(t)&&this.disconnect(t),t.mapAxes(n),t.connect(this.inputObserver),this._inputs.push(t),this},n.disconnect=function(e){if(e){var t=this._inputs.indexOf(e);t>=0&&(this._inputs[t].disconnect(),this._inputs.splice(t,1))}else this._inputs.forEach((function(e){return e.disconnect()})),this._inputs=[];return this},n.get=function(e){return this.axisManager.get(e)},n.setTo=function(e,t){return void 0===t&&(t=0),this.animationManager.setTo(e,t),this},n.setBy=function(e,t){return void 0===t&&(t=0),this.animationManager.setBy(e,t),this},n.setOptions=function(e){return this.options=l(l({},this.options),e),this.animationManager.setOptions(e),this},n.setAxis=function(e){return this.axisManager.setAxis(e),this},n.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},n.updateAnimation=function(e){return this.animationManager.updateAnimation(e),this},n.isBounceArea=function(e){return this.axisManager.isOutside(e)},n.destroy=function(){this.disconnect(),this.eventManager.destroy()},t.VERSION="3.9.1",t.TRANSFORM=_,t.DIRECTION_NONE=1,t.DIRECTION_LEFT=2,t.DIRECTION_RIGHT=4,t.DIRECTION_UP=8,t.DIRECTION_DOWN=16,t.DIRECTION_HORIZONTAL=6,t.DIRECTION_VERTICAL=h,t.DIRECTION_ALL=30,c([s.D0],t.prototype,"holding",null),t=c([s.kU],t)}(a.Z),ce=function(){function e(e,t){var n=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(e){n._dragged&&(e.preventDefault(),e.stopPropagation()),n._dragged=!1},this._voidFunction=function(){},this.element=y(e),this.options=l({inputType:["touch","mouse","pointer"],inputKey:[g],inputButton:[d],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},t),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this._direction=R(!!e[0],!!e[1]),this.axes=e},t.connect=function(e){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(e),this},t.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=K(this.element,this.options,this._direction)),this},t.disable=function(){return this._enabled&&(this._enabled=!1,S(this._originalCssProps)||X(this.element,this._originalCssProps)),this},t.isEnabled=function(){return this._enabled},t.release=function(){var e=this._activeEvent,t=e.prevEvent;return e.onRelease(),this._observer.release(this,t,[0,0]),this._detachWindowEvent(e),this},t._onPanstart=function(e){var t=this.options,n=t.inputKey,i=t.inputButton,a=t.preventDefaultOnDrag,s=this._activeEvent,r=s.onEventStart(e,n,i);if(r&&this._enabled&&!(s.getTouches(e,i)>1)&&!1!==r.srcEvent.cancelable){var o=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,r),this._atRightEdge=f&&r.center.x>window.innerWidth-o,this._attachWindowEvent(s),a&&"touchstart"!==r.srcEvent.type&&r.srcEvent.preventDefault(),s.prevEvent=r}},t._onPanmove=function(e){var t=this,n=this.options,i=n.iOSEdgeSwipeThreshold,a=n.preventClickOnDrag,s=n.releaseOnScroll,r=n.inputKey,o=n.inputButton,u=n.threshold,l=n.thresholdAngle,c=this._activeEvent,d=c.onEventMove(e,r,o),p=c.getTouches(e,o);if(0===p||s&&d&&!d.srcEvent.cancelable)this._onPanend(e);else if(d&&this._enabled&&!(p>1)){var v=function(e,t){if(t<0||t>90)return 1;var n=Math.abs(e);return n>t&&n<180-t?h:6}(d.angle,l),m=L(6,this._direction,v),g=L(h,this._direction,v);if(c.prevEvent&&f){if(d.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),d.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return t.release()}),100))}var _=this._getDistance([d.deltaX,d.deltaY],[m,g]),k=this._getOffset([d.offsetX,d.offsetY],[m,g]),x=k.some((function(e){return 0!==e}));x&&(!1!==d.srcEvent.cancelable&&d.srcEvent.preventDefault(),d.srcEvent.stopPropagation()),d.preventSystemEvent=x,x&&(this._isOverThreshold||_>=u)&&(this._dragged=a,this._isOverThreshold=!0,this._observer.change(this,d,ie(this.axes,k))),c.prevEvent=d}},t._onPanend=function(e){var t=this.options.inputButton,n=this._activeEvent;if(n.onEventEnd(e),this._enabled&&0===n.getTouches(e,t)){this._detachWindowEvent(n),clearTimeout(this._rightEdgeTimer);var i=n.prevEvent,a=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[L(6,this._direction),L(h,this._direction)]):[0,0];n.onRelease(),this._observer.release(this,i,a)}},t._attachWindowEvent=function(e){var t=this;null==e||e.move.forEach((function(e){window.addEventListener(e,t._onPanmove,se(e))})),null==e||e.end.forEach((function(e){window.addEventListener(e,t._onPanend,se(e))}))},t._detachWindowEvent=function(e){var t=this;null==e||e.move.forEach((function(e){window.removeEventListener(e,t._onPanmove)})),null==e||e.end.forEach((function(e){window.removeEventListener(e,t._onPanend)}))},t._getOffset=function(e,t){var n=this.options.scale;return[t[0]?e[0]*n[0]:0,t[1]?e[1]*n[1]:0]},t._getDistance=function(e,t){return Math.sqrt(Number(t[0])*Math.pow(e[0],2)+Number(t[1])*Math.pow(e[1],2))},t._attachElementEvent=function(e){var t=this,n=ae(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=e,this.enable(),this._activeEvent=n,i.addEventListener("click",this._preventClickWhenDragged,!0),n.start.forEach((function(e){i.addEventListener(e,t._onPanstart)})),n.move.forEach((function(e){i.addEventListener(e,t._voidFunction)}))}},t._detachElementEvent=function(){var e=this,t=this._activeEvent,n=this.element;n&&(n.removeEventListener("click",this._preventClickWhenDragged,!0),null==t||t.start.forEach((function(t){n.removeEventListener(t,e._onPanstart)})),null==t||t.move.forEach((function(t){n.removeEventListener(t,e._voidFunction)}))),this.disable(),this._observer=null},e}(),he=function(e){function t(t,n){var i=e.call(this,t,n)||this;return i._prevQuadrant=null,i._lastDiff=0,i}o(t,e);var n=t.prototype;return n.mapAxes=function(e){this._direction=le.DIRECTION_ALL,this.axes=e},n._onPanstart=function(e){var t=this.options,n=t.inputKey,i=t.inputButton,a=this._activeEvent,s=a.onEventStart(e,n,i);if(s&&this.isEnabled()){var r=this.element.getBoundingClientRect();this._observer.hold(this,s),this._attachWindowEvent(a),this._coefficientForDistanceToAngle=360/(r.width*Math.PI),this._rotateOrigin=[r.left+(r.width-1)/2,r.top+(r.height-1)/2],this._prevAngle=null,this._triggerChange(s),a.prevEvent=s}},n._onPanmove=function(e){var t=this.options,n=t.inputKey,i=t.inputButton,a=this._activeEvent,s=a.onEventMove(e,n,i);s&&this.isEnabled()&&(!1!==s.srcEvent.cancelable&&s.srcEvent.preventDefault(),s.srcEvent.stopPropagation(),this._triggerChange(s),a.prevEvent=s)},n._onPanend=function(e){var t=this._activeEvent;if(t.onEventEnd(e),this.isEnabled()){var n=t.prevEvent;this._triggerChange(n);var i=n.velocityX,a=n.velocityY,s=Math.sqrt(i*i+a*a)*(this._lastDiff>0?-1:1);t.onRelease(),this._observer.release(this,n,[s*this._coefficientForDistanceToAngle]),this._detachWindowEvent(t)}},n._triggerChange=function(e){var t=this._getPosFromOrigin(e.center.x,e.center.y),n=t.x,i=t.y,a=C(n,i),s=a<0?360+a:a,r=this._getQuadrant(e.center.x,e.center.y),o=this._getDifference(this._prevAngle,s,this._prevQuadrant,r);this._prevAngle=s,this._prevQuadrant=r,0!==o&&(this._lastDiff=o,this._observer.change(this,e,ie(this.axes,[-o])))},n._getDifference=function(e,t,n,i){return null===e?0:1===n&&4===i?-e-(360-t):4===n&&1===i?360-e+t:t-e},n._getPosFromOrigin=function(e,t){return{x:e-this._rotateOrigin[0],y:this._rotateOrigin[1]-t}},n._getQuadrant=function(e,t){var n=this._getPosFromOrigin(e,t),i=n.x,a=n.y,s=0;return i>=0&&a>=0?s=1:i<0&&a>=0?s=2:i<0&&a<0?s=3:i>=0&&a<0&&(s=4),s},t}(ce),de=function(){function e(e,t){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=y(e),this.options=l({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},t),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this.axes=e},t.connect=function(e){return this._activeEvent&&this._detachEvent(),this._attachEvent(e),this._originalCssProps=K(this.element,this.options,30),this},t.disconnect=function(){return this._detachEvent(),S(this._originalCssProps)||X(this.element,this._originalCssProps),this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled=!0,this},t.disable=function(){return this._enabled=!1,this},t.isEnabled=function(){return this._enabled},t._onPinchStart=function(e){var t=this._activeEvent,n=t.onEventStart(e);n&&this._enabled&&2===t.getTouches(e)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,e),this._pinchFlag=!0,this._isOverThreshold=!1,t.prevEvent=n)},t._onPinchMove=function(e){var t=this.options.threshold,n=this._activeEvent,i=n.onEventMove(e);if(i&&this._pinchFlag&&this._enabled&&2===n.getTouches(e)){var a=this._getDistance(i.scale),s=this._getOffset(i.scale,n.prevEvent.scale);(this._isOverThreshold||a>=t)&&(this._isOverThreshold=!0,this._observer.change(this,e,ie(this.axes,[s]))),n.prevEvent=i}},t._onPinchEnd=function(e){var t=this._activeEvent;t.onEventEnd(e),!this._pinchFlag||!this._enabled||t.getTouches(e)>=2||(t.onRelease(),this._observer.release(this,e,[0],0),this._baseValue=null,this._pinchFlag=!1)},t._attachEvent=function(e){var t=this,n=ae(this.options.inputType),i=this.element;if(n){if(!i)throw new Error("Element to connect input does not exist.");this._observer=e,this._enabled=!0,this._activeEvent=n,n.start.forEach((function(e){i.addEventListener(e,t._onPinchStart,!1)})),n.move.forEach((function(e){i.addEventListener(e,t._onPinchMove,!1)})),n.end.forEach((function(e){i.addEventListener(e,t._onPinchEnd,!1)}))}},t._detachEvent=function(){var e=this,t=this._activeEvent,n=this.element;n&&(null==t||t.start.forEach((function(t){n.removeEventListener(t,e._onPinchStart,!1)})),null==t||t.move.forEach((function(t){n.removeEventListener(t,e._onPinchMove,!1)})),null==t||t.end.forEach((function(t){n.removeEventListener(t,e._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},t._getOffset=function(e,t){return void 0===t&&(t=1),this._baseValue*(e-t)*this.options.scale},t._getDistance=function(e){return Math.abs(e-1)},e}(),pe=function(){function e(e,t){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(e),this.options=l({inputKey:[g],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},t),this._onWheel=this._onWheel.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this._direction=R(!!e[1],!!e[0]),this.axes=e},t.connect=function(e){return this._detachEvent(),this._attachEvent(e),this},t.disconnect=function(){return this._detachEvent(),this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled=!0,this},t.disable=function(){return this._enabled=!1,this},t.isEnabled=function(){return this._enabled},t._onWheel=function(e){var t=this;if(this._enabled&&Q(e,this.options.inputKey)){var n=this._getOffset([e.deltaY,e.deltaX],[L(h,this._direction),L(6,this._direction)]);0===n[0]&&0===n[1]||(e.preventDefault(),this._holding||(this._observer.hold(this,e),this._holding=!0),this._observer.change(this,e,ie(this.axes,n),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){t._holding&&(t._holding=!1,t._observer.release(t,e,[0]))}),this.options.releaseDelay))}},t._getOffset=function(e,t){var n=this.options.scale,i=this.options.useNormalized;return[t[0]&&e[0]?(e[0]>0?-1:1)*(i?1:Math.abs(e[0]))*n:0,t[1]&&e[1]?(e[1]>0?-1:1)*(i?1:Math.abs(e[1]))*n:0]},t._attachEvent=function(e){var t=this.element;if(!t)throw new Error("Element to connect input does not exist.");this._observer=e,t.addEventListener("wheel",this._onWheel),this._enabled=!0},t._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},e}(),ve=function(){function e(e,t){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=y(e),this.options=l({scale:[1,1]},t),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var t=e.prototype;return t.mapAxes=function(e){this.axes=e},t.connect=function(e){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(e),this},t.disconnect=function(){return this._detachEvent(),this},t.destroy=function(){this.disconnect(),this.element=null},t.enable=function(){return this._enabled=!0,this},t.disable=function(){return this._enabled=!1,this},t.isEnabled=function(){return this._enabled},t._onKeydown=function(e){if(this._enabled){var t=!0,n=1,i=-1;switch(e.keyCode){case 37:case 65:n=-1;break;case 39:case 68:break;case 40:case 83:n=-1,i=1;break;case 38:case 87:i=1;break;default:t=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(t=!1),t){e.preventDefault();var a=-1===i?[+this.options.scale[0]*n,0]:[0,+this.options.scale[1]*n];this._holding||(this._observer.hold(this,e),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,e,ie(this.axes,a))}}},t._onKeyup=function(e){var t=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){t._observer.release(t,e,[0,0]),t._holding=!1}),80))},t._attachEvent=function(e){var t=this.element;if(!t)throw new Error("Element to connect input does not exist.");this._observer=e,t.addEventListener("keydown",this._onKeydown,!1),t.addEventListener("keypress",this._onKeydown,!1),t.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},t._detachEvent=function(){var e=this.element;e&&(e.removeEventListener("keydown",this._onKeydown,!1),e.removeEventListener("keypress",this._onKeydown,!1),e.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},e}(),me={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(e){return new le(e.axis,e.options)},on:function(e,t,n){e.on(t,n)},off:function(e,t,n){e.off(t,n)},destroy:function(e){e.destroy()}};const ge=le},5002:(e,t,n)=>{n.r(t),n.d(t,{default:()=>r});var i=n(2784),a=n(2359),s=n(4458);function r(e){let{axis:t,demoType:r,options:o,panInputOptions:u,pinchInputOptions:l,moveKeyInputOptions:c,wheelInputOptions:h}=e;const d=(0,i.useRef)(null),p=(0,i.useRef)(null),v=(0,i.useRef)(null),{connect:m,setAxis:g,setTo:f,x:_,y:k,zoom:x}=(0,a.eD)({x:{range:[0,100],startPos:0,...t&&t.x},y:{range:[0,100],startPos:0,...t&&t.y},zoom:{range:[20,100],startPos:100,...t&&t.zoom}},{round:.1,...o,nested:!("nested"!==r)}),y=(0,a.eD)({innerX:{range:[0,100],startPos:0},innerY:{range:[0,100],startPos:0}},{round:.1});return(0,i.useEffect)((()=>{const e=o?.nested,n=d.current.getBoundingClientRect().width,i=d.current.getBoundingClientRect().height,a=v.current.getBoundingClientRect().width,r=v.current.getBoundingClientRect().height,_=n-a,k=i-r,x=t&&t.x&&t.x.range&&t.x.range[1],N=t&&t.y&&t.y.range&&t.y.range[1];if(e){const e=p.current.getBoundingClientRect().width,t=p.current.getBoundingClientRect().height,o=n-e,l=i-t;y.setAxis({innerX:{range:[0,o]},innerY:{range:[0,l]}}),y.setTo({innerX:o/2,innerY:l/2}),g({x:{range:[0,e-a]},y:{range:[0,t-r]}}),f({x:(e-a)/2,y:(t-r)/2}),y.connect(["innerX","innerY"],new s.Ju(d,u)),y.connect(["innerX","innerY"],new s.f3(d,{scale:[5,-5],...c}))}else g({x:{range:[0,x?x*_:_]},y:{range:[0,N?N*k:k]}}),t?.x?.startPos||t?.y?.startPos||f({x:_/2,y:k/2});m("zoom",new s.nj(e?p:d,{scale:4,...l})),h&&m(["y","x"],new s.HA(e?p:d,{scale:5,...h})),m(["x","y"],new s.f3(e?p:d,{scale:[5,-5],...c})),m(u?.thresholdAngle?["x",""]:["x","y"],new s.Ju(e?p:d,u))}),[]),o?.nested?i.createElement("div",{className:"board",ref:d},i.createElement("div",{className:"info"},"x: ",_," y: ",k),i.createElement("div",{className:"nestedboard",ref:p,style:{transform:`translate3d(${y.innerX}px, ${y.innerY}px, 0)`}},i.createElement("div",{className:"target",ref:v,style:{transform:`translate3d(${_}px, ${k}px, 0) scale(${x/100})`}},i.createElement("img",{draggable:"false",className:"egjsicon",src:n(3266).Z,width:"110"})))):i.createElement("div",{className:"board",ref:d},i.createElement("div",{className:"info"},"x: ",_," y: ",k),i.createElement("div",{className:"target",ref:v,style:{transform:`translate3d(${_}px, ${k}px, 0) scale(${x/100})`},onClick:()=>{"preventClickOnDrag"===r&&window.open("https://www.naver.com/")}},"preventDefaultOnDrag"===r&&i.createElement("a",{className:"link",href:"https://www.naver.com/"},"Clickable Link"),i.createElement("img",{draggable:"preventDefaultOnDrag"===r,className:"egjsicon",src:n(3266).Z,width:"110"})))}},2359:(e,t,n)=>{n.d(t,{eD:()=>r});var i=n(4458),a=n(3566),s=function(){return s=Object.assign||function(e){for(var t,n=1,i=arguments.length;n{n.d(t,{Z:()=>i});const i=n.p+"assets/images/favicon-c1a5c9083cb4abba49a4fafe79973528.ico"}}]); \ No newline at end of file diff --git a/assets/js/2c695997.2d8975a5.js b/assets/js/2c695997.2d8975a5.js new file mode 100644 index 00000000..e270361c --- /dev/null +++ b/assets/js/2c695997.2d8975a5.js @@ -0,0 +1 @@ +(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[4041,2548],{3566:(n,e,t)=>{"use strict";t.d(e,{q:()=>s});var i=t(5362),a=t(2784);function s(n,e){var t=(0,a.useRef)(!0),s=(0,a.useMemo)((function(){return(0,i.tG)(n,e)}),[]),r=s.state(),o=(0,i.XP)(r),c=(0,a.useState)({})[0],d=function(n){var e=(0,a.useState)((function(){return r[n]}));c[n]={getter:!1,set:e[1],value:e[0]}};for(var l in r)d(l);t.current=!0;var u=(0,a.useMemo)((function(){return s.methods()}),[]);(0,a.useEffect)((function(){t.current=!1})),(0,a.useEffect)((function(){s.mounted();var n=s.instance();return o.forEach((function(e){n.subscribe(e,(function(n){c[e].value=n,c[e].getter&&c[e].set(n)}))})),s.init(),function(){s.destroy()}}),[]);var p=o.reduce((function(n,e){return u[e]||Object.defineProperty(n,e,{enumerable:!0,get:function(){return t.current&&(c[e].getter=!0),c[e].value}}),n}),{});return s.events().forEach((function(n){p[(0,i._A)("on ".concat(n))]=function(e,t){var i=(0,a.useMemo)((function(){return s.on(n,e),e}),t);(0,a.useEffect)((function(){return s.off(n,i),s.on(n,i),function(){s.off(n,i)}}),[i])}})),(0,i.XP)(u).forEach((function(n){p[n]=u[n]})),p}},4458:(n,e,t)=>{"use strict";t.d(e,{HA:()=>gn,Ju:()=>un,ZP:()=>fn,cD:()=>mn,f3:()=>vn,nj:()=>hn,zV:()=>pn});var i=t(5161),a=t(1588),s=t(5362),r=function(n,e){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,e){n.__proto__=e}||function(n,e){for(var t in e)e.hasOwnProperty(t)&&(n[t]=e[t])},r(n,e)};function o(n,e){function t(){this.constructor=n}r(n,e),n.prototype=null===e?Object.create(e):(t.prototype=e.prototype,new t)}var c,d=function(){return d=Object.assign||function(n){for(var e,t=1,i=arguments.length;t=0;o--)(a=n[o])&&(r=(s<3?a(r):s>3?a(e,t,r):a(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r}c="undefined"==typeof window?{navigator:{userAgent:""}}:window;var u=24,p="left",h="right",g="middle",v={1:p,2:g,3:h},m="any",f="ontouchstart"in c&&"safari"===(0,i.ZP)().browser.name,_=function(){if("undefined"==typeof document)return"";for(var n=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],t=0,i=e.length;t]*)>/)){var i=document.createElement("div");i.innerHTML=n,t=y(i.childNodes)}else t=y(document.querySelectorAll(n));e||(t=t.length>=1?t[0]:void 0)}else n===c?t=n:"value"in n||"current"in n?t=n.value||n.current:!n.nodeName||1!==n.nodeType&&9!==n.nodeType?"jQuery"in c&&n instanceof jQuery||n.constructor.prototype.jquery?t=e?n.toArray():n.get(0):Array.isArray(n)&&(t=n.map((function(n){return b(n)})),e||(t=t.length>=1?t[0]:void 0)):t=n;return t},w=c.requestAnimationFrame||c.webkitRequestAnimationFrame,E=c.cancelAnimationFrame||c.webkitCancelAnimationFrame;if(w&&!E){var M={},A=w;w=function(n){var e=A((function(t){M[e]&&n(t)}));return M[e]=!0,e},E=function(n){delete M[n]}}else w&&E||(w=function(n){return c.setTimeout((function(){n(c.performance&&c.performance.now&&c.performance.now()||(new Date).getTime())}),16)},E=c.clearTimeout);var I=function(n,e){var t={};for(var i in n)i&&(t[i]=e(n[i],i));return t},T=function(n,e){var t={};for(var i in n)i&&e(n[i],i)&&(t[i]=n[i]);return t},R=function(n,e){for(var t in n)if(t&&!e(n[t],t))return!1;return!0},P=function(n,e){return R(n,(function(n,t){return n===e[t]}))},C={},O=function(n,e){return C[e]||(C[e]=D(e)),C[e](n)},Y=function(n,e){return n&&e?I(n,(function(n,t){return O(n,"number"==typeof e?e:e[t])})):n},W=function(n){if(!isFinite(n))return 0;var e="".concat(n);if(e.indexOf("e")>=0){for(var t=0,i=1;Math.round(n*i)/i!==n;)i*=10,t++;return t}return e.indexOf(".")>=0?e.length-e.indexOf(".")-1:0},D=function(n){var e=n<1?Math.pow(10,W(n)):1;return function(t){return 0===n?0:Math.round(Math.round(t/n)*n*e)/e}},X=function(n,e){return 180*Math.atan2(e,n)/Math.PI},S=function(n){var e=!0;return Object.keys(x).forEach((function(t){n&&n[t]===x[t]||(e=!1)})),e},j=function(n,e){return n&&e?30:n?6:e?u:1},B=function(n,e,t){return t?!!(30===e||e&n&&t&n):!!(e&n)},z=function(n,e,t){var i,a=((i={})[1]="auto",i[30]="none",i[24]="pan-x",i[6]="pan-y",i),s={};if(n&&n.style){var r=e.touchAction?e.touchAction:a[t],o=d(d({},x),{"touch-action":"none"===n.style["touch-action"]?"none":r});Object.keys(o).forEach((function(e){s[e]=n.style[e]})),Object.keys(o).forEach((function(e){n.style[e]=o[e]}))}return s},k=function(n,e){n&&n.style&&e&&Object.keys(e).forEach((function(t){n.style[t]=e[t]}))},H=function(){function n(n){this._axes=n,this.holdingCount=0}var e=n.prototype;return e.hold=function(n,e){var t=this._getRoundPos(n).roundPos;this._axes.trigger(new a.L("hold",{pos:t,input:e.input||null,inputEvent:e.event||null,isTrusted:!0}))},e.triggerRelease=function(n){var e=this._getRoundPos(n.destPos,n.depaPos),t=e.roundPos,i=e.roundDepa;n.destPos=t,n.depaPos=i,n.setTo=this._createUserControll(n.destPos,n.duration),this._axes.trigger(new a.L("release",d(d({},n),{bounceRatio:this._getBounceRatio(t)})))},e.triggerChange=function(n,e,t,i){var r=this;void 0===i&&(i=!1);var o=this.animationManager,c=o.axisManager,d=o.getEventInfo(),l=this._getRoundPos(n,e),u=l.roundPos,p=l.roundDepa,h=c.moveTo(u,p),g=(null==t?void 0:t.event)||(null==d?void 0:d.event)||null,v={pos:h.pos,delta:h.delta,bounceRatio:this._getBounceRatio(h.pos),holding:i,inputEvent:g,isTrusted:!!g,input:(null==t?void 0:t.input)||(null==d?void 0:d.input)||null,set:g?this._createUserControll(h.pos):function(){}},m=new a.L("change",v);return this._axes.trigger(m),Object.keys(h.pos).forEach((function(n){var e=h.pos[n];(0,s.CV)(r._axes,n,e).current=e})),g&&c.set(v.set().destPos),!m.isCanceled()},e.triggerAnimationStart=function(n){var e=this._getRoundPos(n.destPos,n.depaPos),t=e.roundPos,i=e.roundDepa;n.destPos=t,n.depaPos=i,n.setTo=this._createUserControll(n.destPos,n.duration);var s=new a.L("animationStart",n);return this._axes.trigger(s),!s.isCanceled()},e.triggerAnimationEnd=function(n){void 0===n&&(n=!1),this._axes.trigger(new a.L("animationEnd",{isTrusted:n}))},e.triggerFinish=function(n){void 0===n&&(n=!1),this._axes.trigger(new a.L("finish",{isTrusted:n}))},e.setAnimationManager=function(n){this.animationManager=n},e.destroy=function(){this._axes.off()},e._createUserControll=function(n,e){void 0===e&&(e=0);var t={destPos:d({},n),duration:e};return function(n,e){return n&&(t.destPos=d({},n)),void 0!==e&&(t.duration=e),t}},e._getRoundPos=function(n,e){var t=this._axes.options.round;return{roundPos:Y(n,t),roundDepa:Y(e,t)}},e._getBounceRatio=function(n){return this._axes.axisManager.map(n,(function(n,e){return ne.range[1]&&0!==e.bounce[1]?(n-e.range[1])/e.bounce[1]:0}))},l([s.cn],n.prototype,"holdingCount",void 0),n}(),N=function(){function n(n){this._options=n,this._prevented=!1}var e=n.prototype;return e.isInterrupting=function(){return this._options.interruptable||this._prevented},e.isInterrupted=function(){return!this._options.interruptable&&this._prevented},e.setInterrupt=function(n){this._options.interruptable||(this._prevented=n)},n}(),Z=function(n,e,t,i){var a=n,s=[t[0]?e[0]:i?e[0]-i[0]:e[0],t[1]?e[1]:i?e[1]+i[1]:e[1]];return a=Math.max(s[0],a),a=Math.min(s[1],a)},$=function(n,e){return ne[1]},U=function(n,e,t){return t[1]&&n>e[1]||t[0]&&ns&&(i=(i-s)%r+a),t[0]&&n-1||e.indexOf("none")>-1&&!n.shiftKey&&!n.ctrlKey&&!n.altKey&&!n.metaKey||e.indexOf("shift")>-1&&n.shiftKey||e.indexOf("ctrl")>-1&&n.ctrlKey||e.indexOf("alt")>-1&&n.altKey||e.indexOf("meta")>-1&&n.metaKey)},J=function(){function n(){var n=this;this._stopContextMenu=function(e){e.preventDefault(),c.removeEventListener("contextmenu",n._stopContextMenu)}}var e=n.prototype;return e.extendEvent=function(n){var e,t=this.prevEvent,i=this._getCenter(n),a=t?this._getMovement(n):{x:0,y:0},s=t?this._getScale(n):1,r=t?X(i.x-t.center.x,i.y-t.center.y):0,o=t?t.deltaX+a.x:a.x,c=t?t.deltaY+a.y:a.y,d=a.x,l=a.y,u=this._latestInterval,p=Date.now(),h=u?p-u.timestamp:0,g=t?t.velocityX:0,v=t?t.velocityY:0;return(!u||h>=16)&&(u&&(g=(e=[(o-u.deltaX)/h,(c-u.deltaY)/h])[0],v=e[1]),this._latestInterval={timestamp:p,deltaX:o,deltaY:c}),{srcEvent:n,scale:s,angle:r,center:i,deltaX:o,deltaY:c,offsetX:d,offsetY:l,velocityX:g,velocityY:v,preventSystemEvent:!0}},e._getDistance=function(n,e){var t=e.clientX-n.clientX,i=e.clientY-n.clientY;return Math.sqrt(t*t+i*i)},e._getButton=function(n){var e={1:p,2:h,4:g},t=this._isTouchEvent(n)?p:e[n.buttons];return t||null},e._isTouchEvent=function(n){return n.type&&n.type.indexOf("touch")>-1},e._isValidButton=function(n,e){return e.indexOf(n)>-1},e._isValidEvent=function(n,e,t){return(!e||V(n,e))&&(!t||this._isValidButton(this._getButton(n),t))},e._preventMouseButton=function(n,e){e===h?c.addEventListener("contextmenu",this._stopContextMenu):e===g&&n.preventDefault()},n}(),Q=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.start=["mousedown"],e.move=["mousemove"],e.end=["mouseup"],e}o(e,n);var t=e.prototype;return t.onEventStart=function(n,e,t){var i=this._getButton(n);return this._isValidEvent(n,e,t)?(this._preventMouseButton(n,i),this.extendEvent(n)):null},t.onEventMove=function(n,e,t){return this._isValidEvent(n,e,t)?this.extendEvent(n):null},t.onEventEnd=function(){},t.onRelease=function(){this.prevEvent=null},t.getTouches=function(n,e){return e&&this._isValidButton(v[n.which],e)&&-1===this.end.indexOf(n.type)?1:0},t._getScale=function(){return 1},t._getCenter=function(n){return{x:n.clientX,y:n.clientY}},t._getMovement=function(n){var e=this.prevEvent.srcEvent;return{x:n.clientX-e.clientX,y:n.clientY-e.clientY}},e}(J),nn=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.start=["touchstart"],e.move=["touchmove"],e.end=["touchend","touchcancel"],e}o(e,n);var t=e.prototype;return t.onEventStart=function(n,e){return this._baseTouches=n.touches,this._isValidEvent(n,e)?this.extendEvent(n):null},t.onEventMove=function(n,e){return this._isValidEvent(n,e)?this.extendEvent(n):null},t.onEventEnd=function(n){this._baseTouches=n.touches},t.onRelease=function(){this.prevEvent=null,this._baseTouches=null},t.getTouches=function(n){return n.touches.length},t._getScale=function(n){return 2!==n.touches.length||this._baseTouches.length<2?null:this._getDistance(n.touches[0],n.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1])},t._getCenter=function(n){return{x:n.touches[0].clientX,y:n.touches[0].clientY}},t._getMovement=function(n){var e=this.prevEvent.srcEvent;return n.touches[0].identifier!==e.touches[0].identifier?{x:0,y:0}:{x:n.touches[0].clientX-e.touches[0].clientX,y:n.touches[0].clientY-e.touches[0].clientY}},e}(J),en=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.start=K?["pointerdown"]:["MSPointerDown"],e.move=K?["pointermove"]:["MSPointerMove"],e.end=K?["pointerup","pointercancel"]:["MSPointerUp","MSPointerCancel"],e._firstInputs=[],e._recentInputs=[],e}o(e,n);var t=e.prototype;return t.onEventStart=function(n,e,t){var i=this._getButton(n);return this._isValidEvent(n,e,t)?(this._preventMouseButton(n,i),this._updatePointerEvent(n),this.extendEvent(n)):null},t.onEventMove=function(n,e,t){return this._isValidEvent(n,e,t)?(this._updatePointerEvent(n),this.extendEvent(n)):null},t.onEventEnd=function(n){this._removePointerEvent(n)},t.onRelease=function(){this.prevEvent=null,this._firstInputs=[],this._recentInputs=[]},t.getTouches=function(){return this._recentInputs.length},t._getScale=function(){return 2!==this._recentInputs.length?null:this._getDistance(this._recentInputs[0],this._recentInputs[1])/this._getDistance(this._firstInputs[0],this._firstInputs[1])},t._getCenter=function(n){return{x:n.clientX,y:n.clientY}},t._getMovement=function(n){var e=this.prevEvent.srcEvent;return n.pointerId!==e.pointerId?{x:0,y:0}:{x:n.clientX-e.clientX,y:n.clientY-e.clientY}},t._updatePointerEvent=function(n){var e=this,t=!1;this._recentInputs.forEach((function(i,a){i.pointerId===n.pointerId&&(t=!0,e._recentInputs[a]=n)})),t||(this._firstInputs.push(n),this._recentInputs.push(n))},t._removePointerEvent=function(n){this._firstInputs=this._firstInputs.filter((function(e){return e.pointerId!==n.pointerId})),this._recentInputs=this._recentInputs.filter((function(e){return e.pointerId!==n.pointerId}))},e}(J),tn=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.start=["mousedown","touchstart"],e.move=["mousemove","touchmove"],e.end=["mouseup","touchend","touchcancel"],e}o(e,n);var t=e.prototype;return t.onEventStart=function(n,e,t){var i=this._getButton(n);return this._isTouchEvent(n)&&(this._baseTouches=n.touches),this._isValidEvent(n,e,t)?(this._preventMouseButton(n,i),this.extendEvent(n)):null},t.onEventMove=function(n,e,t){return this._isValidEvent(n,e,t)?this.extendEvent(n):null},t.onEventEnd=function(n){this._isTouchEvent(n)&&(this._baseTouches=n.touches)},t.onRelease=function(){this.prevEvent=null,this._baseTouches=null},t.getTouches=function(n,e){return this._isTouchEvent(n)?n.touches.length:this._isValidButton(v[n.which],e)&&-1===this.end.indexOf(n.type)?1:0},t._getScale=function(n){return this._isTouchEvent(n)?2!==n.touches.length||this._baseTouches.length<2?1:this._getDistance(n.touches[0],n.touches[1])/this._getDistance(this._baseTouches[0],this._baseTouches[1]):this.prevEvent.scale},t._getCenter=function(n){return this._isTouchEvent(n)?{x:n.touches[0].clientX,y:n.touches[0].clientY}:{x:n.clientX,y:n.clientY}},t._getMovement=function(n){var e=this,t=[n,this.prevEvent.srcEvent].map((function(n){return e._isTouchEvent(n)?{id:n.touches[0].identifier,x:n.touches[0].clientX,y:n.touches[0].clientY}:{id:null,x:n.clientX,y:n.clientY}})),i=t[0],a=t[1];return i.id===a.id?{x:i.x-a.x,y:i.y-a.y}:{x:0,y:0}},e}(J),an=function(n,e){return e.reduce((function(e,t,i){return n[i]&&(e[n[i]]=t),e}),{})},sn=function(n){void 0===n&&(n=[]);var e=!1,t=!1,i=!1;return n.forEach((function(n){switch(n){case"mouse":t=!0;break;case"touch":e=F;break;case"pointer":i=q}})),i?new en:e&&t?new tn:e?new nn:t?new Q:null};function rn(n){return n.indexOf("touch")>-1&&{passive:!1}}var on=function(){function n(n){var e=n.options,t=n.interruptManager,i=n.eventManager,a=n.axisManager,s=n.animationManager;this._isOutside=!1,this._moveDistance=null,this._isStopped=!1,this.options=e,this._interruptManager=t,this._eventManager=i,this._axisManager=a,this._animationManager=s}var e=n.prototype;return e.get=function(n){return this._axisManager.get(n.axes)},e.hold=function(n,e){if(!this._interruptManager.isInterrupted()&&n.axes.length){var t={input:n,event:e};this._isStopped=!1,this._interruptManager.setInterrupt(!0),this._animationManager.stopAnimation(t),++this._eventManager.holdingCount,this._moveDistance||this._eventManager.hold(this._axisManager.get(),t),this._isOutside=this._axisManager.isOutside(n.axes),this._moveDistance=this._axisManager.get(n.axes)}},e.change=function(n,e,t,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&!this._axisManager.every(t,(function(n){return 0===n}))){var a=e.srcEvent?e.srcEvent:e;if(!a.__childrenAxesAlreadyChanged){var s,r=this._moveDistance||this._axisManager.get(n.axes);s=I(r,(function(n,e){return n+(t[e]||0)})),this._moveDistance&&(this._moveDistance=this._axisManager.map(s,(function(n,e){var t=e.circular,i=e.range;return t&&(t[0]||t[1])?G(n,i,t):n}))),this._isOutside&&this._axisManager.every(r,(function(n,e){return!$(n,e.range)}))&&(this._isOutside=!1),r=this._atOutside(r),s=this._atOutside(s),this.options.nested&&this._isEndofAxis(t,r,s)||(a.__childrenAxesAlreadyChanged=!0);var o={input:n,event:e};if(i){var c=this._animationManager.getDuration(s,r);this._animationManager.animateTo(s,c,o)}else{!this._eventManager.triggerChange(s,r,o,!0)&&(this._isStopped=!0,this._moveDistance=null,this._animationManager.finish(!1))}}}},e.release=function(n,e,t,i){if(!this._isStopped&&this._interruptManager.isInterrupting()&&this._moveDistance){var a=e.srcEvent?e.srcEvent:e;a.__childrenAxesAlreadyReleased&&(t=t.map((function(){return 0})));var s=this._axisManager.get(n.axes),r=this._axisManager.get(),o=this._animationManager.getDisplacement(t),c=an(n.axes,o),l=this._axisManager.get(this._axisManager.map(c,(function(n,e,t){return e.circular&&(e.circular[0]||e.circular[1])?s[t]+n:Z(s[t]+n,e.range,e.circular,e.bounce)})));a.__childrenAxesAlreadyReleased=!0;var u=this._animationManager.getDuration(l,s,i);0===u&&(l=d({},r));var p={depaPos:r,destPos:l,duration:u,delta:this._axisManager.getDelta(r,l),inputEvent:e,input:n,isTrusted:!0};--this._eventManager.holdingCount,this._eventManager.triggerRelease(p),0===this._eventManager.holdingCount&&(this._moveDistance=null);var h=this._animationManager.getUserControl(p),g=P(h.destPos,r),v={input:n,event:e};g||0===h.duration?(g||this._eventManager.triggerChange(h.destPos,r,v,!0),this._interruptManager.setInterrupt(!1),this._axisManager.isOutside()?this._animationManager.restore(v):this._eventManager.triggerFinish(!0)):this._animationManager.animateTo(h.destPos,h.duration,v)}},e._atOutside=function(n){var e=this;return this._isOutside?this._axisManager.map(n,(function(n,e){var t=e.range[0]-e.bounce[0],i=e.range[1]+e.bounce[1];return n>i?i:na?n:na?a+e._animationManager.interpolate(n-a,s[1]):n}))},e._isEndofAxis=function(n,e,t){return this._axisManager.every(e,(function(i,a,s){return 0===n[s]||e[s]===t[s]&&(r=i,o=a.range,c=a.bounce,!(d=a.circular)[0]&&r===o[0]-c[0]||!d[1]&&r===o[1]+c[1]);var r,o,c,d}))},n}(),cn=function(n,e,t){return Math.max(Math.min(n,t),e)},dn=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e._useDuration=!0,e}o(e,n);var t=e.prototype;return t.interpolate=function(n,e){var t=this._easing(1e-5)/1e-5;return this._easing(n/(e*t))*e},t.updateAnimation=function(n){var e,t=this._animateParam;if(t){var i=(new Date).getTime()-t.startTime,a=(null==n?void 0:n.destPos)||t.destPos,s=null!==(e=null==n?void 0:n.duration)&&void 0!==e?e:t.duration;if((null==n?void 0:n.restart)||s<=i)this.setTo(a,s-i);else{if(null==n?void 0:n.destPos){var r=this.axisManager.get();this._initialEasingPer=this._prevEasingPer,t.delta=this.axisManager.getDelta(r,a),t.destPos=a}if(null==n?void 0:n.duration){var o=(i+this._durationOffset)/t.duration;this._durationOffset=o*s-i,t.duration=s}}}},t._initState=function(n){return this._initialEasingPer=0,this._prevEasingPer=0,this._durationOffset=0,{pos:n.depaPos,easingPer:0,finished:!1}},t._getNextState=function(n){var e=this,t=this._animateParam,i=n.pos,a=t.destPos,s=I(i,(function(n,e){return n<=a[e]?1:-1})),r=((new Date).getTime()-t.startTime+this._durationOffset)/t.duration,o=this._easing(r),c=this.axisManager.map(i,(function(n,c,d){var l=r>=1?a[d]:n+t.delta[d]*(o-e._prevEasingPer)/(1-e._initialEasingPer),u=G(l,c.range,c.circular);if(l!==u){var p=s[d]*(c.range[1]-c.range[0]);a[d]-=p,i[d]-=p}return u}));return this._prevEasingPer=o,{pos:c,easingPer:o,finished:o>=1}},t._easing=function(n){return n>1?1:this._options.easing(n)},e}(function(){function n(n){var e=n.options,t=n.interruptManager,i=n.eventManager,a=n.axisManager;this._options=e,this.interruptManager=t,this.eventManager=i,this.axisManager=a,this.animationEnd=this.animationEnd.bind(this)}var e=n.prototype;return e.getDuration=function(n,e,t){var i,a=this;if(void 0!==t)i=t;else{var s=I(e,(function(e,t){return function(n,e){var t=Math.sqrt(n/e*2);return t<100?0:t}(Math.abs(e-n[t]),a._options.deceleration)}));i=Object.keys(s).reduce((function(n,e){return Math.max(n,s[e])}),-1/0)}return cn(i,this._options.minimumDuration,this._options.maximumDuration)},e.getDisplacement=function(n){var e=Math.pow(n.reduce((function(n,e){return n+e*e}),0),1/n.length),t=Math.abs(e/-this._options.deceleration);return n.map((function(n){return n/2*t}))},e.stopAnimation=function(n){if(this._animateParam){var e=this.axisManager.get(),t=this.axisManager.map(e,(function(n,e){return G(n,e.range,e.circular)}));R(t,(function(n,t){return e[t]===n}))||this.eventManager.triggerChange(t,e,n,!!n),this._animateParam=null,this._raf&&(i=this._raf,E(i)),this._raf=null,this.eventManager.triggerAnimationEnd(!!(null==n?void 0:n.event))}var i},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(n){var e=this.axisManager.get(),t=this.axisManager.map(e,(function(n,e){return Math.min(e.range[1],Math.max(e.range[0],n))}));this.stopAnimation(),this.animateTo(t,this.getDuration(e,t),n)},e.animationEnd=function(){var n=this.getEventInfo();this._animateParam=null;var e=this.axisManager.filter(this.axisManager.get(),(function(n,e){return U(n,e.range,e.circular)}));Object.keys(e).length>0&&this.setTo(this.axisManager.map(e,(function(n,e){return G(n,e.range,e.circular)}))),this.interruptManager.setInterrupt(!1),this.eventManager.triggerAnimationEnd(!!n),this.axisManager.isOutside()?this.restore(n):this.finish(!!n)},e.finish=function(n){this._animateParam=null,this.interruptManager.setInterrupt(!1),this.eventManager.triggerFinish(n)},e.getUserControl=function(n){var e=n.setTo();return e.destPos=this.axisManager.get(e.destPos),e.duration=cn(e.duration,this._options.minimumDuration,this._options.maximumDuration),e},e.animateTo=function(n,e,t){var i=this;this.stopAnimation();var a=this._createAnimationParam(n,e,t),s=d({},a.depaPos),r=this.eventManager.triggerAnimationStart(a),o=this.getUserControl(a);if(!r&&this.axisManager.every(o.destPos,(function(n,e){return U(n,e.range,e.circular)}))&&console.warn("You can't stop the 'animation' event when 'circular' is true."),r&&!P(o.destPos,s)){var c=(null==t?void 0:t.event)||null;this._animateLoop({depaPos:s,destPos:o.destPos,duration:o.duration,delta:this.axisManager.getDelta(s,o.destPos),isTrusted:!!c,inputEvent:c,input:(null==t?void 0:t.input)||null},(function(){return i.animationEnd()}))}},e.setTo=function(n,e){void 0===e&&(e=0);var t=Object.keys(n),i=this.axisManager.get(t);if(P(n,i))return this;this.interruptManager.setInterrupt(!0);var a=T(n,(function(n,e){return i[e]!==n}));return Object.keys(a).length?(a=this.axisManager.map(a,(function(n,e){var t=e.range,i=e.circular;return i&&(i[0]||i[1])?n:Z(n,t,i)})),P(a,i)||(e>0?this.animateTo(a,e):(this.stopAnimation(),this.eventManager.triggerChange(a),this.finish(!1))),this):this},e.setBy=function(n,e){return void 0===e&&(e=0),this.setTo(I(this.axisManager.get(Object.keys(n)),(function(e,t){return e+n[t]})),e)},e.setOptions=function(n){this._options=d(d({},this._options),n)},e._createAnimationParam=function(n,e,t){var i=this.axisManager.get(),a=n,s=(null==t?void 0:t.event)||null;return{depaPos:i,destPos:a,duration:cn(e,this._options.minimumDuration,this._options.maximumDuration),delta:this.axisManager.getDelta(i,a),inputEvent:s,input:(null==t?void 0:t.input)||null,isTrusted:!!s,done:this.animationEnd}},e._animateLoop=function(n,e){var t=this;if(n.duration){this._animateParam=d(d({},n),{startTime:(new Date).getTime()});var i=I(n.destPos,(function(n){return n})),a=this._initState(this._animateParam),s=function(){t._raf=null;var n=t._animateParam,r=t._getNextState(a),o=!t.eventManager.triggerChange(r.pos,a.pos);if(a=r,r.finished)return n.destPos=t._getFinalPos(n.destPos,i),P(n.destPos,t.axisManager.get(Object.keys(n.destPos)))||t.eventManager.triggerChange(n.destPos,r.pos),void e();o?t.finish(!1):t._raf=w(s)};s()}else this.eventManager.triggerChange(n.destPos),e()},e._getFinalPos=function(n,e){var t=this,i=1e-6;return I(n,(function(n,a){if(n>=e[a]-i&&n<=e[a]+i)return e[a];var s=t._getRoundUnit(n,a);return O(n,s)}))},e._getRoundUnit=function(n,e){var t,i=this._options.round,a=null;if(!i){var s=this.axisManager.getAxisOptions(e);t=Math.max(W(s.range[0]),W(s.range[1]),W(n)),a=1/Math.pow(10,t)}return a||i},n}()),ln=function(n){function e(e,t,i){void 0===e&&(e={}),void 0===t&&(t={}),void 0===i&&(i={});var a=n.call(this)||this;return a.axis=e,a._inputs=[],a.options=d({easing:function(n){return 1-Math.pow(1-n,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4,round:null,nested:!1},t),Object.keys(i).forEach((function(n){a.axis[n].startPos=i[n]})),a.interruptManager=new N(a.options),a.axisManager=new L(a.axis),a.eventManager=new H(a),a.animationManager=new dn(a),a.inputObserver=new on(a),a.eventManager.setAnimationManager(a.animationManager),a.eventManager.triggerChange(a.axisManager.get()),a}o(e,n);var t=e.prototype;return Object.defineProperty(t,"holding",{get:function(){return this.eventManager.holdingCount>0},enumerable:!1,configurable:!0}),t.connect=function(n,e){var t;return t="string"==typeof n?n.split(" "):n.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),e.mapAxes(t),e.connect(this.inputObserver),this._inputs.push(e),this},t.disconnect=function(n){if(n){var e=this._inputs.indexOf(n);e>=0&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach((function(n){return n.disconnect()})),this._inputs=[];return this},t.get=function(n){return this.axisManager.get(n)},t.setTo=function(n,e){return void 0===e&&(e=0),this.animationManager.setTo(n,e),this},t.setBy=function(n,e){return void 0===e&&(e=0),this.animationManager.setBy(n,e),this},t.setOptions=function(n){return this.options=d(d({},this.options),n),this.animationManager.setOptions(n),this},t.setAxis=function(n){return this.axisManager.setAxis(n),this},t.stopAnimation=function(){return this.animationManager.stopAnimation(),this.animationManager.finish(!1),this},t.updateAnimation=function(n){return this.animationManager.updateAnimation(n),this},t.isBounceArea=function(n){return this.axisManager.isOutside(n)},t.destroy=function(){this.disconnect(),this.eventManager.destroy()},e.VERSION="3.9.1",e.TRANSFORM=_,e.DIRECTION_NONE=1,e.DIRECTION_LEFT=2,e.DIRECTION_RIGHT=4,e.DIRECTION_UP=8,e.DIRECTION_DOWN=16,e.DIRECTION_HORIZONTAL=6,e.DIRECTION_VERTICAL=u,e.DIRECTION_ALL=30,l([s.D0],e.prototype,"holding",null),e=l([s.kU],e)}(a.Z),un=function(){function n(n,e){var t=this;this.axes=[],this.element=null,this._enabled=!1,this._activeEvent=null,this._atRightEdge=!1,this._rightEdgeTimer=0,this._dragged=!1,this._isOverThreshold=!1,this._preventClickWhenDragged=function(n){t._dragged&&(n.preventDefault(),n.stopPropagation()),t._dragged=!1},this._voidFunction=function(){},this.element=b(n),this.options=d({inputType:["touch","mouse","pointer"],inputKey:[m],inputButton:[p],scale:[1,1],thresholdAngle:45,threshold:0,preventClickOnDrag:!1,preventDefaultOnDrag:!1,iOSEdgeSwipeThreshold:30,releaseOnScroll:!1,touchAction:null},e),this._onPanstart=this._onPanstart.bind(this),this._onPanmove=this._onPanmove.bind(this),this._onPanend=this._onPanend.bind(this)}var e=n.prototype;return e.mapAxes=function(n){this._direction=j(!!n[0],!!n[1]),this.axes=n},e.connect=function(n){return this._activeEvent&&(this._detachElementEvent(),this._detachWindowEvent(this._activeEvent)),this._attachElementEvent(n),this},e.disconnect=function(){return this._detachElementEvent(),this._detachWindowEvent(this._activeEvent),this._direction=1,this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled||(this._enabled=!0,this._originalCssProps=z(this.element,this.options,this._direction)),this},e.disable=function(){return this._enabled&&(this._enabled=!1,S(this._originalCssProps)||k(this.element,this._originalCssProps)),this},e.isEnabled=function(){return this._enabled},e.release=function(){var n=this._activeEvent,e=n.prevEvent;return n.onRelease(),this._observer.release(this,e,[0,0]),this._detachWindowEvent(n),this},e._onPanstart=function(n){var e=this.options,t=e.inputKey,i=e.inputButton,a=e.preventDefaultOnDrag,s=this._activeEvent,r=s.onEventStart(n,t,i);if(r&&this._enabled&&!(s.getTouches(n,i)>1)&&!1!==r.srcEvent.cancelable){var o=this.options.iOSEdgeSwipeThreshold;this._dragged=!1,this._isOverThreshold=!1,this._observer.hold(this,r),this._atRightEdge=f&&r.center.x>window.innerWidth-o,this._attachWindowEvent(s),a&&"touchstart"!==r.srcEvent.type&&r.srcEvent.preventDefault(),s.prevEvent=r}},e._onPanmove=function(n){var e=this,t=this.options,i=t.iOSEdgeSwipeThreshold,a=t.preventClickOnDrag,s=t.releaseOnScroll,r=t.inputKey,o=t.inputButton,c=t.threshold,d=t.thresholdAngle,l=this._activeEvent,p=l.onEventMove(n,r,o),h=l.getTouches(n,o);if(0===h||s&&p&&!p.srcEvent.cancelable)this._onPanend(n);else if(p&&this._enabled&&!(h>1)){var g=function(n,e){if(e<0||e>90)return 1;var t=Math.abs(n);return t>e&&t<180-e?u:6}(p.angle,d),v=B(6,this._direction,g),m=B(u,this._direction,g);if(l.prevEvent&&f){if(p.center.x<0)return void this.release();this._atRightEdge&&(clearTimeout(this._rightEdgeTimer),p.deltaX<-i?this._atRightEdge=!1:this._rightEdgeTimer=window.setTimeout((function(){return e.release()}),100))}var _=this._getDistance([p.deltaX,p.deltaY],[v,m]),x=this._getOffset([p.offsetX,p.offsetY],[v,m]),y=x.some((function(n){return 0!==n}));y&&(!1!==p.srcEvent.cancelable&&p.srcEvent.preventDefault(),p.srcEvent.stopPropagation()),p.preventSystemEvent=y,y&&(this._isOverThreshold||_>=c)&&(this._dragged=a,this._isOverThreshold=!0,this._observer.change(this,p,an(this.axes,x))),l.prevEvent=p}},e._onPanend=function(n){var e=this.options.inputButton,t=this._activeEvent;if(t.onEventEnd(n),this._enabled&&0===t.getTouches(n,e)){this._detachWindowEvent(t),clearTimeout(this._rightEdgeTimer);var i=t.prevEvent,a=this._isOverThreshold?this._getOffset([Math.abs(i.velocityX)*(i.offsetX<0?-1:1),Math.abs(i.velocityY)*(i.offsetY<0?-1:1)],[B(6,this._direction),B(u,this._direction)]):[0,0];t.onRelease(),this._observer.release(this,i,a)}},e._attachWindowEvent=function(n){var e=this;null==n||n.move.forEach((function(n){window.addEventListener(n,e._onPanmove,rn(n))})),null==n||n.end.forEach((function(n){window.addEventListener(n,e._onPanend,rn(n))}))},e._detachWindowEvent=function(n){var e=this;null==n||n.move.forEach((function(n){window.removeEventListener(n,e._onPanmove)})),null==n||n.end.forEach((function(n){window.removeEventListener(n,e._onPanend)}))},e._getOffset=function(n,e){var t=this.options.scale;return[e[0]?n[0]*t[0]:0,e[1]?n[1]*t[1]:0]},e._getDistance=function(n,e){return Math.sqrt(Number(e[0])*Math.pow(n[0],2)+Number(e[1])*Math.pow(n[1],2))},e._attachElementEvent=function(n){var e=this,t=sn(this.options.inputType),i=this.element;if(t){if(!i)throw new Error("Element to connect input does not exist.");this._observer=n,this.enable(),this._activeEvent=t,i.addEventListener("click",this._preventClickWhenDragged,!0),t.start.forEach((function(n){i.addEventListener(n,e._onPanstart)})),t.move.forEach((function(n){i.addEventListener(n,e._voidFunction)}))}},e._detachElementEvent=function(){var n=this,e=this._activeEvent,t=this.element;t&&(t.removeEventListener("click",this._preventClickWhenDragged,!0),null==e||e.start.forEach((function(e){t.removeEventListener(e,n._onPanstart)})),null==e||e.move.forEach((function(e){t.removeEventListener(e,n._voidFunction)}))),this.disable(),this._observer=null},n}(),pn=function(n){function e(e,t){var i=n.call(this,e,t)||this;return i._prevQuadrant=null,i._lastDiff=0,i}o(e,n);var t=e.prototype;return t.mapAxes=function(n){this._direction=ln.DIRECTION_ALL,this.axes=n},t._onPanstart=function(n){var e=this.options,t=e.inputKey,i=e.inputButton,a=this._activeEvent,s=a.onEventStart(n,t,i);if(s&&this.isEnabled()){var r=this.element.getBoundingClientRect();this._observer.hold(this,s),this._attachWindowEvent(a),this._coefficientForDistanceToAngle=360/(r.width*Math.PI),this._rotateOrigin=[r.left+(r.width-1)/2,r.top+(r.height-1)/2],this._prevAngle=null,this._triggerChange(s),a.prevEvent=s}},t._onPanmove=function(n){var e=this.options,t=e.inputKey,i=e.inputButton,a=this._activeEvent,s=a.onEventMove(n,t,i);s&&this.isEnabled()&&(!1!==s.srcEvent.cancelable&&s.srcEvent.preventDefault(),s.srcEvent.stopPropagation(),this._triggerChange(s),a.prevEvent=s)},t._onPanend=function(n){var e=this._activeEvent;if(e.onEventEnd(n),this.isEnabled()){var t=e.prevEvent;this._triggerChange(t);var i=t.velocityX,a=t.velocityY,s=Math.sqrt(i*i+a*a)*(this._lastDiff>0?-1:1);e.onRelease(),this._observer.release(this,t,[s*this._coefficientForDistanceToAngle]),this._detachWindowEvent(e)}},t._triggerChange=function(n){var e=this._getPosFromOrigin(n.center.x,n.center.y),t=e.x,i=e.y,a=X(t,i),s=a<0?360+a:a,r=this._getQuadrant(n.center.x,n.center.y),o=this._getDifference(this._prevAngle,s,this._prevQuadrant,r);this._prevAngle=s,this._prevQuadrant=r,0!==o&&(this._lastDiff=o,this._observer.change(this,n,an(this.axes,[-o])))},t._getDifference=function(n,e,t,i){return null===n?0:1===t&&4===i?-n-(360-e):4===t&&1===i?360-n+e:e-n},t._getPosFromOrigin=function(n,e){return{x:n-this._rotateOrigin[0],y:this._rotateOrigin[1]-e}},t._getQuadrant=function(n,e){var t=this._getPosFromOrigin(n,e),i=t.x,a=t.y,s=0;return i>=0&&a>=0?s=1:i<0&&a>=0?s=2:i<0&&a<0?s=3:i>=0&&a<0&&(s=4),s},e}(un),hn=function(){function n(n,e){this.axes=[],this.element=null,this._pinchFlag=!1,this._enabled=!1,this._activeEvent=null,this._isOverThreshold=!1,this.element=b(n),this.options=d({scale:1,threshold:0,inputType:["touch","pointer"],touchAction:"none"},e),this._onPinchStart=this._onPinchStart.bind(this),this._onPinchMove=this._onPinchMove.bind(this),this._onPinchEnd=this._onPinchEnd.bind(this)}var e=n.prototype;return e.mapAxes=function(n){this.axes=n},e.connect=function(n){return this._activeEvent&&this._detachEvent(),this._attachEvent(n),this._originalCssProps=z(this.element,this.options,30),this},e.disconnect=function(){return this._detachEvent(),S(this._originalCssProps)||k(this.element,this._originalCssProps),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onPinchStart=function(n){var e=this._activeEvent,t=e.onEventStart(n);t&&this._enabled&&2===e.getTouches(n)&&(this._baseValue=this._observer.get(this)[this.axes[0]],this._observer.hold(this,n),this._pinchFlag=!0,this._isOverThreshold=!1,e.prevEvent=t)},e._onPinchMove=function(n){var e=this.options.threshold,t=this._activeEvent,i=t.onEventMove(n);if(i&&this._pinchFlag&&this._enabled&&2===t.getTouches(n)){var a=this._getDistance(i.scale),s=this._getOffset(i.scale,t.prevEvent.scale);(this._isOverThreshold||a>=e)&&(this._isOverThreshold=!0,this._observer.change(this,n,an(this.axes,[s]))),t.prevEvent=i}},e._onPinchEnd=function(n){var e=this._activeEvent;e.onEventEnd(n),!this._pinchFlag||!this._enabled||e.getTouches(n)>=2||(e.onRelease(),this._observer.release(this,n,[0],0),this._baseValue=null,this._pinchFlag=!1)},e._attachEvent=function(n){var e=this,t=sn(this.options.inputType),i=this.element;if(t){if(!i)throw new Error("Element to connect input does not exist.");this._observer=n,this._enabled=!0,this._activeEvent=t,t.start.forEach((function(n){i.addEventListener(n,e._onPinchStart,!1)})),t.move.forEach((function(n){i.addEventListener(n,e._onPinchMove,!1)})),t.end.forEach((function(n){i.addEventListener(n,e._onPinchEnd,!1)}))}},e._detachEvent=function(){var n=this,e=this._activeEvent,t=this.element;t&&(null==e||e.start.forEach((function(e){t.removeEventListener(e,n._onPinchStart,!1)})),null==e||e.move.forEach((function(e){t.removeEventListener(e,n._onPinchMove,!1)})),null==e||e.end.forEach((function(e){t.removeEventListener(e,n._onPinchEnd,!1)}))),this._enabled=!1,this._observer=null},e._getOffset=function(n,e){return void 0===e&&(e=1),this._baseValue*(n-e)*this.options.scale},e._getDistance=function(n){return Math.abs(n-1)},n}(),gn=function(){function n(n,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=b(n),this.options=d({inputKey:[m],scale:1,releaseDelay:300,useNormalized:!0,useAnimation:!1},e),this._onWheel=this._onWheel.bind(this)}var e=n.prototype;return e.mapAxes=function(n){this._direction=j(!!n[1],!!n[0]),this.axes=n},e.connect=function(n){return this._detachEvent(),this._attachEvent(n),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onWheel=function(n){var e=this;if(this._enabled&&V(n,this.options.inputKey)){var t=this._getOffset([n.deltaY,n.deltaX],[B(u,this._direction),B(6,this._direction)]);0===t[0]&&0===t[1]||(n.preventDefault(),this._holding||(this._observer.hold(this,n),this._holding=!0),this._observer.change(this,n,an(this.axes,t),this.options.useAnimation),clearTimeout(this._timer),this._timer=setTimeout((function(){e._holding&&(e._holding=!1,e._observer.release(e,n,[0]))}),this.options.releaseDelay))}},e._getOffset=function(n,e){var t=this.options.scale,i=this.options.useNormalized;return[e[0]&&n[0]?(n[0]>0?-1:1)*(i?1:Math.abs(n[0]))*t:0,e[1]&&n[1]?(n[1]>0?-1:1)*(i?1:Math.abs(n[1]))*t:0]},e._attachEvent=function(n){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=n,e.addEventListener("wheel",this._onWheel),this._enabled=!0},e._detachEvent=function(){this.element&&this.element.removeEventListener("wheel",this._onWheel),this._enabled=!1,this._observer=null,this._timer&&(clearTimeout(this._timer),this._timer=null)},n}(),vn=function(){function n(n,e){this.axes=[],this.element=null,this._enabled=!1,this._holding=!1,this._timer=null,this.element=b(n),this.options=d({scale:[1,1]},e),this._onKeydown=this._onKeydown.bind(this),this._onKeyup=this._onKeyup.bind(this)}var e=n.prototype;return e.mapAxes=function(n){this.axes=n},e.connect=function(n){return this._detachEvent(),"0"!==this.element.getAttribute("tabindex")&&this.element.setAttribute("tabindex","0"),this._attachEvent(n),this},e.disconnect=function(){return this._detachEvent(),this},e.destroy=function(){this.disconnect(),this.element=null},e.enable=function(){return this._enabled=!0,this},e.disable=function(){return this._enabled=!1,this},e.isEnabled=function(){return this._enabled},e._onKeydown=function(n){if(this._enabled){var e=!0,t=1,i=-1;switch(n.keyCode){case 37:case 65:t=-1;break;case 39:case 68:break;case 40:case 83:t=-1,i=1;break;case 38:case 87:i=1;break;default:e=!1}if((-1===i&&!this.axes[0]||1===i&&!this.axes[1])&&(e=!1),e){n.preventDefault();var a=-1===i?[+this.options.scale[0]*t,0]:[0,+this.options.scale[1]*t];this._holding||(this._observer.hold(this,n),this._holding=!0),clearTimeout(this._timer),this._observer.change(this,n,an(this.axes,a))}}},e._onKeyup=function(n){var e=this;this._holding&&(clearTimeout(this._timer),this._timer=setTimeout((function(){e._observer.release(e,n,[0,0]),e._holding=!1}),80))},e._attachEvent=function(n){var e=this.element;if(!e)throw new Error("Element to connect input does not exist.");this._observer=n,e.addEventListener("keydown",this._onKeydown,!1),e.addEventListener("keypress",this._onKeydown,!1),e.addEventListener("keyup",this._onKeyup,!1),this._enabled=!0},e._detachEvent=function(){var n=this.element;n&&(n.removeEventListener("keydown",this._onKeydown,!1),n.removeEventListener("keypress",this._onKeydown,!1),n.removeEventListener("keyup",this._onKeyup,!1)),this._enabled=!1,this._observer=null},n}(),mn={methods:["connect","disconnect","get","setTo","setBy","setOptions","setAxis","stopAnimation","updateAnimation","isBounceArea"],events:["hold","release","change","animationStart","animationEnd","finish"],created:function(n){return new ln(n.axis,n.options)},on:function(n,e,t){n.on(e,t)},off:function(n,e,t){n.off(e,t)},destroy:function(n){n.destroy()}};const fn=ln},3376:(n,e,t)=>{"use strict";t.d(e,{C:()=>o});var i=t(2784),a=t(4034),s=t(1846),r=t(2676);const o=n=>{const e=t(3224)(`./${n.folder}/html.txt`).default,o=t(3405)(`./${n.folder}/js.txt`).default,c=n.reactCode?n.reactCode:t(291)(`./${n.folder}/react.txt`).default,d=t(6145)(`./${n.folder}/vue.txt`).default,l=d.replace("vue-axes","vue2-axes").replace('from "vue"','from "@vue/composition-api"');const u=t(4676)(`./${n.folder}/svelte.txt`).default;return i.createElement(a.Z,{groupId:"cfc",defaultValue:"js",values:[{label:"JavaScript",value:"js"},{label:"React",value:"react"},{label:"Vue@2",value:"vue2"},{label:"Vue@3",value:"vue"},{label:"Svelte",value:"svelte"}]},i.createElement(s.Z,{value:"js"},i.createElement(r.Z,{className:"language-html"},e),i.createElement(r.Z,{className:"language-js"},o)),i.createElement(s.Z,{value:"react"},i.createElement(r.Z,{className:"language-jsx"},c)),i.createElement(s.Z,{value:"vue2"},i.createElement(r.Z,{className:"language-html"},l)),i.createElement(s.Z,{value:"vue"},i.createElement(r.Z,{className:"language-html"},d)),i.createElement(s.Z,{value:"svelte"},i.createElement(r.Z,{className:"language-html"},u)))}},7693:(n,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>r});var i=t(2784),a=t(2359),s=t(4458);const r=()=>{const n=Array.from({length:36},((n,e)=>e+1)),{connect:e,angle:r}=(0,a.eD)({angle:{range:[0,360],circular:!0}},{deceleration:.01});return(0,i.useEffect)((()=>{e("angle",new s.Ju(".car_rotate"))}),[]),i.createElement("div",null,i.createElement("p",null,"You can create a viewer that can rotate 360 \u200b\u200bdegrees using one axis."),i.createElement("div",{className:"car_spot"},i.createElement("div",{className:"car_rotate"},i.createElement("div",{className:"img_cont",style:{position:"relative",zIndex:10}},n.map((n=>i.createElement("img",{key:n,src:t(2850)(`./beatle (${n}).png`).default,style:{display:Math.floor(r%360/10+1)===n?"inline-block":"none"}})))),i.createElement("div",{className:"ratate_bg"}))))}},2359:(n,e,t)=>{"use strict";t.d(e,{eD:()=>r});var i=t(4458),a=t(3566),s=function(){return s=Object.assign||function(n){for(var e,t=1,i=arguments.length;t{"use strict";t.r(e),t.d(e,{assets:()=>l,contentTitle:()=>c,default:()=>g,frontMatter:()=>o,metadata:()=>d,toc:()=>u});var i=t(7896),a=(t(2784),t(876)),s=t(3376),r=t(7693);const o={title:"Car 360\xba Viewer",id:"car360viewer",slug:"/car360viewer",sidebar_position:2},c=void 0,d={unversionedId:"demos/car360viewer",id:"demos/car360viewer",title:"Car 360\xba Viewer",description:"",source:"@site/docs/demos/car360viewer.mdx",sourceDirName:"demos",slug:"/car360viewer",permalink:"/egjs-axes/docs/car360viewer",editUrl:"https://github.com/naver/egjs-axes/edit/master/packages/demo/docs/demos/car360viewer.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Car 360\xba Viewer",id:"car360viewer",slug:"/car360viewer",sidebar_position:2},sidebar:"demos",previous:{title:"What is the eg.Axes?",permalink:"/egjs-axes/docs/axes"},next:{title:"Rotate a Cube",permalink:"/egjs-axes/docs/cube"}},l={},u=[],p={toc:u},h="wrapper";function g(n){let{components:e,...o}=n;return(0,a.kt)(h,(0,i.Z)({},p,o,{components:e,mdxType:"MDXLayout"}),(0,a.kt)(r.default,{mdxType:"Car360viewer"}),(0,a.kt)(s.C,{folder:"Car360viewer",reactCode:t(2058).Z,mdxType:"CodeTabs"}))}g.isMDXComponent=!0},8356:(n,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>i});const i='
\n

You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.

\n
\n
\n
\n \n
\n
\n
\n
\n'},2301:(n,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>i});const i='const SUPPORT_TOUCH = "ontouchstart" in window;\nconst delegateTarget = document.getElementById("delegateTarget");\nconst uiWrapper = document.getElementById("uiWrapper");\nconst uiWidth = uiWrapper.getBoundingClientRect().width;\nconst uiHeight = uiWrapper.getBoundingClientRect().height;\nconst ui = uiWrapper.querySelector(".ui");\n\n// 1. Initialize eg.Axes\nconst axes = new eg.Axes({\n panX: {\n range: [0, uiWidth],\n bounce: 20\n },\n panY: {\n range: [0, uiHeight],\n bounce: 20\n },\n zoom: {\n range: [1, 5],\n bounce: 1\n }\n}, {\n minimumDuration: 300\n});\n\n// 2. attach event handler\naxes.on({\n "change": function (e) {\n var pos = e.pos;\n ui.style[eg.Axes.TRANSFORM] =\n `translate3d(${pos.panX}px, ${pos.panY}px, 0) scale(${pos.zoom})`;\n },\n});\n\n// 3. Initialize inputTypes and connect it\naxes.connect("panX panY", new eg.Axes.PanInput(delegateTarget))\naxes.connect("panX panY", new eg.Axes.MoveKeyInput(delegateTarget, {\n scale: [5, -5]\n})).connect("zoom", SUPPORT_TOUCH ?\n new eg.Axes.PinchInput(delegateTarget) :\n new eg.Axes.WheelInput(delegateTarget));\n\n// 4. move to position\naxes.setTo({panX: uiWidth/2 + 20, panY: uiHeight/2});\n'},6081:(n,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>i});const i='import React, { useEffect } from "react";\n\nimport { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/react-axes";\nimport Icon from "../../../static/img/demos/axes/logo.svg";\nimport "../../css/demos/axes.css";\n\nexport default function AxesDemo() {\n const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(\n {\n panX: {\n range: [0, 0],\n bounce: 20,\n },\n panY: {\n range: [0, 0],\n bounce: 20,\n },\n zoom: {\n range: [1, 5],\n bounce: 1,\n },\n },\n {\n minimumDuration: 300,\n }\n );\n\n useEffect(() => {\n const SUPPORT_TOUCH = "ontouchstart" in window;\n const delegateTarget = document.getElementById("delegateTarget");\n const uiWrapper = document.getElementById("uiWrapper");\n const uiWidth = uiWrapper.getBoundingClientRect().width;\n const uiHeight = uiWrapper.getBoundingClientRect().height;\n\n setAxis({\n panX: {\n range: [0, uiWidth],\n },\n panY: {\n range: [0, uiHeight],\n },\n });\n connect("panX panY", new PanInput(delegateTarget));\n connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));\n connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));\n\n setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });\n }, []);\n\n return (\n
\n

\n You can change the value of the axis and apply it to the UI via the\n touch screen, mouse, or various other inputs.\n

\n
\n
\n
\n \n
\n
\n
\n
\n
\n );\n};\n'},4374:(n,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>i});const i='
-

Archive

Archive

- - +

Archive

Archive

+ + \ No newline at end of file diff --git a/demos/3dcarousel.html b/demos/3dcarousel.html index cc325fbf..604b723a 100644 --- a/demos/3dcarousel.html +++ b/demos/3dcarousel.html @@ -5,13 +5,13 @@ - - + +

You can create a carousel by controlling the animation.

- - + + \ No newline at end of file diff --git a/demos/axes.html b/demos/axes.html index 2791471d..53529dfe 100644 --- a/demos/axes.html +++ b/demos/axes.html @@ -5,13 +5,13 @@ - - + +

You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.

zoom: 1.00
- - + + \ No newline at end of file diff --git a/demos/axesboard.html b/demos/axesboard.html index 707191e9..5952ee7a 100644 --- a/demos/axesboard.html +++ b/demos/axesboard.html @@ -5,13 +5,13 @@ - - + +
x: 0 y: 0
- - + + \ No newline at end of file diff --git a/demos/bubble.html b/demos/bubble.html index 3c9fc9fa..c759c835 100644 --- a/demos/bubble.html +++ b/demos/bubble.html @@ -5,13 +5,13 @@ - - + +

You can create bubble that can zoom using pinch(touch) or wheel.

- - + + \ No newline at end of file diff --git a/demos/car360viewer.html b/demos/car360viewer.html index 1fa9961f..fa62bf2f 100644 --- a/demos/car360viewer.html +++ b/demos/car360viewer.html @@ -5,13 +5,13 @@ - - + +

You can create a viewer that can rotate 360 ​​degrees using one axis.

- - + + \ No newline at end of file diff --git a/demos/cardinhand.html b/demos/cardinhand.html index 20e463fd..7e284754 100644 --- a/demos/cardinhand.html +++ b/demos/cardinhand.html @@ -5,13 +5,13 @@ - - + +

You can create a UI that responds to user input using two axes.

- - + + \ No newline at end of file diff --git a/demos/cube.html b/demos/cube.html index 93fb6db7..ac198a3f 100644 --- a/demos/cube.html +++ b/demos/cube.html @@ -5,13 +5,13 @@ - - + +

You can rotate the cube using two axes.

1
2
3
4
5
6
- - + + \ No newline at end of file diff --git a/demos/logo.html b/demos/logo.html index b9291932..34036843 100644 --- a/demos/logo.html +++ b/demos/logo.html @@ -5,13 +5,13 @@ - - + +
- - + + \ No newline at end of file diff --git a/demos/minimap.html b/demos/minimap.html index d8342d4f..bc36dcc5 100644 --- a/demos/minimap.html +++ b/demos/minimap.html @@ -5,13 +5,13 @@ - - + +

You can create a scrollable minimap using two axes.

- - + + \ No newline at end of file diff --git a/demos/nestedaxes.html b/demos/nestedaxes.html index 9d3dc715..69a774d1 100644 --- a/demos/nestedaxes.html +++ b/demos/nestedaxes.html @@ -5,13 +5,13 @@ - - + +

You can place Axes in another Axes.

- - + + \ No newline at end of file diff --git a/demos/pulltorefresh.html b/demos/pulltorefresh.html index f79da690..541fb89f 100644 --- a/demos/pulltorefresh.html +++ b/demos/pulltorefresh.html @@ -5,13 +5,13 @@ - - + +

You can create a pull-to-refresh UI using one axis.

Pull to prepend
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
Pull to append
- - + + \ No newline at end of file diff --git a/demos/schedule.html b/demos/schedule.html index ef79c5a6..fd910dc8 100644 --- a/demos/schedule.html +++ b/demos/schedule.html @@ -5,13 +5,13 @@ - - + +

You can control animation while it is playing.

Animation Speed

Run Animation

Update Animation

- - + + \ No newline at end of file diff --git a/demos/subway.html b/demos/subway.html index bf667083..7548728a 100644 --- a/demos/subway.html +++ b/demos/subway.html @@ -5,13 +5,13 @@ - - + +

You can create maps that can zoom using three axes.

- - + + \ No newline at end of file diff --git a/docs.html b/docs.html index 07820090..2947623a 100644 --- a/docs.html +++ b/docs.html @@ -5,13 +5,13 @@ Installation | Axes - - + +
-

Installation

📦 Package managers (recommended)​

You can easily install @egjs/axes with package managers like npm or yarn

npm​

npm install @egjs/axes

yarn​

yarn add @egjs/axes

🔗 CDN Links​

Minified & Packaged (with dependencies)​

https://unpkg.com/@egjs/axes@latest/dist/axes.pkgd.min.js

Packaged (with dependencies)​

https://unpkg.com/@egjs/axes@latest/dist/axes.pkgd.js
- - +

Installation

📦 Package managers (recommended)​

You can easily install @egjs/axes with package managers like npm or yarn

npm​

npm install @egjs/axes

yarn​

yarn add @egjs/axes

🔗 CDN Links​

Minified & Packaged (with dependencies)​

https://unpkg.com/@egjs/axes@latest/dist/axes.pkgd.min.js

Packaged (with dependencies)​

https://unpkg.com/@egjs/axes@latest/dist/axes.pkgd.js
+ + \ No newline at end of file diff --git a/docs/3dcarousel.html b/docs/3dcarousel.html index bf544aba..ee584520 100644 --- a/docs/3dcarousel.html +++ b/docs/3dcarousel.html @@ -5,13 +5,13 @@ 3D Carousel | Axes - - + +
-

3D Carousel

You can create a carousel by controlling the animation.

<div>
  <p>You can create a carousel by controlling the animation.</p>
  <div id="carouselWrapper">
    <div class="list_container">
      <div id="carousel" style="transform: translateZ(-253px);">
        <figure style="transform: rotateY(0deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music1-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Too Much</div>
          <div id="list_cd_artist">Loco</div>
        </figure>
        <figure style="transform: rotateY(45deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music2-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Woo ah</div>
          <div id="list_cd_artist">Crush</div>
        </figure>
        <figure style="transform: rotateY(90deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music3-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Man In The Mirror</div>
          <div id="list_cd_artist">Micheal Jackson</div>
        </figure>
        <figure style="transform: rotateY(135deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music4-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Adult</div>
          <div id="list_cd_artist">GiriBoy</div>
        </figure>
        <figure style="transform: rotateY(180deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music5-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Always Awake</div>
          <div id="list_cd_artist">Beenzino</div>
        </figure>
        <figure style="transform: rotateY(225deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music6-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">City Burns</div>
          <div id="list_cd_artist">Andra Day</div>
        </figure>
        <figure style="transform: rotateY(270deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music7-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Get Some Air</div>
          <div id="list_cd_artist">Gary</div>
        </figure>
        <figure style="transform: rotateY(315deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music8-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Hold Me Tight</div>
          <div id="list_cd_artist">Loco</div>
        </figure>
      </div>
    </div>
  </div>
</div>
var carousel = document.getElementById("carousel");
var COUNT = 8;
var ANGLE = 360 / COUNT;

// 1. Initialize eg.Axes
var axes = new eg.Axes({
  rotate: {
    range: [0, 360],
    circular: true
  }
});

// 2. attach event handler
axes.on({
  "change": function(e) {
    var pos = e.pos;

    carousel.style[eg.Axes.TRANSFORM] = "translateZ(-253px) rotateY(" + (pos.rotate) + "deg)";
  },
  "release": function (e) {
    var destPos = e.destPos;

    e.setTo({"rotate": Math.round(destPos.rotate/ANGLE) * ANGLE }, 500);
  }
});

// 3. Initialize a inputType and connect it
axes.connect("rotate", new eg.Axes.PanInput("#carouselWrapper")).connect("rotate", new eg.Axes.WheelInput("#carouselWrapper", {useNormalized: false}));
- - +

3D Carousel

You can create a carousel by controlling the animation.

<div>
  <p>You can create a carousel by controlling the animation.</p>
  <div id="carouselWrapper">
    <div class="list_container">
      <div id="carousel" style="transform: translateZ(-253px);">
        <figure style="transform: rotateY(0deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music1-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Too Much</div>
          <div id="list_cd_artist">Loco</div>
        </figure>
        <figure style="transform: rotateY(45deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music2-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Woo ah</div>
          <div id="list_cd_artist">Crush</div>
        </figure>
        <figure style="transform: rotateY(90deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music3-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Man In The Mirror</div>
          <div id="list_cd_artist">Micheal Jackson</div>
        </figure>
        <figure style="transform: rotateY(135deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music4-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Adult</div>
          <div id="list_cd_artist">GiriBoy</div>
        </figure>
        <figure style="transform: rotateY(180deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music5-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Always Awake</div>
          <div id="list_cd_artist">Beenzino</div>
        </figure>
        <figure style="transform: rotateY(225deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music6-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">City Burns</div>
          <div id="list_cd_artist">Andra Day</div>
        </figure>
        <figure style="transform: rotateY(270deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music7-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Get Some Air</div>
          <div id="list_cd_artist">Gary</div>
        </figure>
        <figure style="transform: rotateY(315deg) translateZ(253px);">
          <div id="list_cd" style="background-image:url('../image/3dcarousel/music8-min.jpg')">
            <div id="list_cd_hole"></div>
          </div>
          <div id="list_cd_title">Hold Me Tight</div>
          <div id="list_cd_artist">Loco</div>
        </figure>
      </div>
    </div>
  </div>
</div>
var carousel = document.getElementById("carousel");
var COUNT = 8;
var ANGLE = 360 / COUNT;

// 1. Initialize eg.Axes
var axes = new eg.Axes({
  rotate: {
    range: [0, 360],
    circular: true
  }
});

// 2. attach event handler
axes.on({
  "change": function(e) {
    var pos = e.pos;

    carousel.style[eg.Axes.TRANSFORM] = "translateZ(-253px) rotateY(" + (pos.rotate) + "deg)";
  },
  "release": function (e) {
    var destPos = e.destPos;

    e.setTo({"rotate": Math.round(destPos.rotate/ANGLE) * ANGLE }, 500);
  }
});

// 3. Initialize a inputType and connect it
axes.connect("rotate", new eg.Axes.PanInput("#carouselWrapper")).connect("rotate", new eg.Axes.WheelInput("#carouselWrapper", {useNormalized: false}));
+ + \ No newline at end of file diff --git a/docs/api/Axes.html b/docs/api/Axes.html index 4ff09a37..36da79a0 100644 --- a/docs/api/Axes.html +++ b/docs/api/Axes.html @@ -5,13 +5,13 @@ Axes | Axes - - + +
-

Axes

class Axes extends eg.Component

A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.

Properties
Methods
Events
holding
connect
disconnect
get
setTo
setBy
setOptions
setAxis
stopAnimation
updateAnimation
isBounceArea
destroy
hold
release
change
animationStart
animationEnd
finish

constructor​

new Axes(axis, options, startPos)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axisObject<string, AxisOption>Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.
optionsAxesOption✔️{}The option object of the eg.Axes module
startPosObject<string, number>✔️{}The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.
// 1. Initialize eg.Axes
const axes = new eg.Axes({
 something1: {
   range: [0, 150],
   bounce: 50
 },
 something2: {
   range: [0, 200],
   bounce: 100
 },
 somethingN: {
   range: [1, 10],
 }
}, {
 deceleration : 0.0024
});

// 2. attach event handler
axes.on({
 "hold" : function(evt) {
 },
 "release" : function(evt) {
 },
 "animationStart" : function(evt) {
 },
 "animationEnd" : function(evt) {
 },
 "change" : function(evt) {
 }
});

// 3. Initialize inputTypes
const panInputArea = new eg.Axes.PanInput("#area", {
 scale: [0.5, 1]
});
const panInputHmove = new eg.Axes.PanInput("#hmove");
const panInputVmove = new eg.Axes.PanInput("#vmove");
const pinchInputArea = new eg.Axes.PinchInput("#area", {
 scale: 1.5
});

// 4. Connect eg.Axes and InputTypes
// [PanInput] When the mouse or touchscreen is down and moved.
// Connect the 'something2' axis to the mouse or touchscreen x position and
// connect the 'somethingN' axis to the mouse or touchscreen y position.
axes.connect(["something2", "somethingN"], panInputArea); // or axes.connect("something2 somethingN", panInputArea);

// Connect only one 'something1' axis to the mouse or touchscreen x position.
axes.connect(["something1"], panInputHmove); // or axes.connect("something1", panInputHmove);

// Connect only one 'something2' axis to the mouse or touchscreen y position.
axes.connect(["", "something2"], panInputVmove); // or axes.connect(" something2", panInputVmove);

// [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
axes.connect("something2", pinchInputArea);

Properties​

holding​

readonly

Returns true if at least one input is in progress.

Type: boolean

const axes = new eg.Axes({
 x: {
   range: [0, 100],
 },
});

axes.holding

Methods​

connect​

Connect the axis of eg.Axes to the inputType.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesArray<String> | StringThe name of the axis to associate with inputType
inputTypeObjectThe inputType instance to associate with the axis of eg.Axes
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  }
});

axes.connect("x", new eg.Axes.PanInput("#area1"))
   .connect("x xOther", new eg.Axes.PanInput("#area2"))
   .connect(" xOther", new eg.Axes.PanInput("#area3"))
   .connect(["x"], new eg.Axes.PanInput("#area4"))
   .connect(["xOther", "x"], new eg.Axes.PanInput("#area5"))
   .connect(["", "xOther"], new eg.Axes.PanInput("#area6"));

disconnect​

Disconnect the axis of eg.Axes from the inputType.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
inputTypeObject✔️An inputType instance associated with the axis of eg.Axes
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  }
});

const input1 = new eg.Axes.PanInput("#area1");
const input2 = new eg.Axes.PanInput("#area2");
const input3 = new eg.Axes.PanInput("#area3");

axes.connect("x", input1);
   .connect("x xOther", input2)
   .connect(["xOther", "x"], input3);

axes.disconnect(input1); // disconnects input1
axes.disconnect(); // disconnects all of them

get​

Returns the current position of the coordinates.

Returns: Object<string, number>

  • Axis coordinate information
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesObject✔️The names of the axis
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.get(); // {"x": 0, "xOther": -100, "zoom": 50}
axes.get(["x", "zoom"]); // {"x": 0, "zoom": 50}

setTo​

Moves an axis to specific coordinates.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posObject<string, number>The coordinate to move to
durationNumber✔️0Duration of the animation (unit: ms)
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.setTo({"x": 30, "zoom": 60});
axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}

axes.setTo({"x": 100, "xOther": 60}, 1000); // animatation

// after 1000 ms
axes.get(); // {"x": 100, "xOther": 60, "zoom": 60}

setBy​

Moves an axis from the current coordinates to specific coordinates.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posObject<string, number>The coordinate to move to
durationNumber✔️0Duration of the animation (unit: ms)
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.setBy({"x": 30, "zoom": 10});
axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}

axes.setBy({"x": 70, "xOther": 60}, 1000); // animatation

// after 1000 ms
axes.get(); // {"x": 100, "xOther": -40, "zoom": 60}

setOptions​

Change the options of Axes instance.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsAxesOptionAxes options to change
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
}, {
  round: 10,
});

axes.setTo({"x": 48});
axes.get(); // {"x": 50}

axes.setOptions({
  round: 1,
});

axes.setTo({"x": 48});
axes.get(); // {"x": 48}

setAxis​

Change the information of an existing axis.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axisObject<string, AxisOption>Axis options to change
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
});

axes.setTo({"x": 150});
axes.get(); // {"x": 100}

axes.setAxis({
  "x": {
     range: [0, 200]
  },
});

axes.setTo({"x": 150});
axes.get(); // {"x": 150}

stopAnimation​

Stop an animation in progress.

Returns: eg.Axes

  • An instance of a module itself
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
});

axes.setTo({"x": 10}, 1000); // start animatation

// after 500 ms
axes.stopAnimation(); // stop animation during movement.

updateAnimation​

Change the destination of an animation in progress.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posUpdateAnimationOptionThe coordinate to move to
const axes = new eg.Axes({
  "x": {
     range: [0, 200]
  },
  "y": {
     range: [0, 200]
  }
});

axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo

// after 500 ms
axes.updateAnimation({destPos: {"x": 100, "y": 100}}); // animation will end after 500 ms, at {"x": 100, "y": 100}

// after 500 ms
axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo

// after 700 ms
axes.updateAnimation({destPos: {"x": 100, "y": 100}, duration: 1500, restart: true}); // this works same as axes.setTo({"x": 100, "y": 100}, 800) since restart is true.

isBounceArea​

Returns whether there is a coordinate in the bounce area of ​​the target axis.

Returns: Boolen

  • Whether the bounce area exists.
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesObject✔️The names of the axis
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.isBounceArea(["x"]);
axes.isBounceArea(["x", "zoom"]);
axes.isBounceArea();

destroy​

Destroys properties, and events used in a module and disconnect all connections to inputTypes.

Events​

hold​

This event is fired when a user holds an element on the screen of the device.

Type: object

PROPERTYTYPEDESCRIPTION
posObject<string, number>coordinate
inputObjectThe instance of inputType where the event occurred
inputEventObjectThe event object received from inputType
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("hold", function(event) {
  // event.pos
  // event.input
  // event.inputEvent
  // isTrusted
});

release​

This event is fired when a user release an element on the screen of the device.

Type: object

PROPERTYTYPEDESCRIPTION
depaPosObject<string, number>The coordinates when releasing an element
destPosObject<string, number>The coordinates to move to after releasing an element
deltaObject<string, number>The movement variation of coordinate
bounceRatioObject<string, number>If the coordinates at the time of release are in the bounce area, the current bounce value divided by the maximum bounce value
inputEventObjectThe event object received from inputType
inputObjectThe instance of inputType where the event occurred
setTosetToSpecifies the animation coordinates to move after the event
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("release", function(event) {
  // event.depaPos
  // event.destPos
  // event.delta
  // event.input
  // event.inputEvent
  // event.setTo
  // event.isTrusted

  // if you want to change the animation coordinates to move after the 'release' event.
  event.setTo({x: 10}, 2000);
});

change​

This event is fired when coordinate changes.

Type: object

PROPERTYTYPEDESCRIPTION
posObject<string, number>The coordinate
deltaObject<string, number>The movement variation of coordinate
bounceRatioObject<string, number>If the current coordinates are in the bounce area, the current bounce value divided by the maximum bounce value
holdingBooleanIndicates whether a user holds an element on the screen of the device.
inputObjectThe instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEventObjectThe event object received from inputType. If the value is changed by animation, it returns 'null'.
setsetSpecifies the coordinates to move after the event. It works when the holding value is true
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("change", function(event) {
  // event.pos
  // event.delta
  // event.input
  // event.inputEvent
  // event.holding
  // event.set
  // event.isTrusted

  // if you want to change the coordinates to move after the 'change' event.
  // it works when the holding value of the change event is true.
  event.holding && event.set({x: 10});
});

animationStart​

This event is fired when animation starts.

Type: object

PROPERTYTYPEDESCRIPTION
depaPosObject<string, number>The coordinates when animation starts
destPosObject<string, number>The coordinates to move to. If you change this value, you can run the animation
deltaObject<string, number>The movement variation of coordinate
durationNumberDuration of the animation (unit: ms). If you change this value, you can control the animation duration time.
inputObjectThe instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEventObjectThe event object received from inputType
setTosetToSpecifies the animation coordinates to move after the event
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("release", function(event) {
  // event.depaPos
  // event.destPos
  // event.delta
  // event.input
  // event.inputEvent
  // event.setTo
  // event.isTrusted

  // if you want to change the animation coordinates to move after the 'animationStart' event.
  event.setTo({x: 10}, 2000);
});

animationEnd​

This event is fired when animation ends.

Type: object

PROPERTYTYPEDESCRIPTION
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("animationEnd", function(event) {
  // event.isTrusted
});

finish​

This event is fired when all actions have been completed.

Type: object

PROPERTYTYPEDESCRIPTION
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("finish", function(event) {
  // event.isTrusted
});
- - +

Axes

class Axes extends eg.Component

A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.

Properties
Methods
Events
holding
connect
disconnect
get
setTo
setBy
setOptions
setAxis
stopAnimation
updateAnimation
isBounceArea
destroy
hold
release
change
animationStart
animationEnd
finish

constructor​

new Axes(axis, options, startPos)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axisObject<string, AxisOption>Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.
optionsAxesOption✔️{}The option object of the eg.Axes module
startPosObject<string, number>✔️{}The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.
// 1. Initialize eg.Axes
const axes = new eg.Axes({
 something1: {
   range: [0, 150],
   bounce: 50
 },
 something2: {
   range: [0, 200],
   bounce: 100
 },
 somethingN: {
   range: [1, 10],
 }
}, {
 deceleration : 0.0024
});

// 2. attach event handler
axes.on({
 "hold" : function(evt) {
 },
 "release" : function(evt) {
 },
 "animationStart" : function(evt) {
 },
 "animationEnd" : function(evt) {
 },
 "change" : function(evt) {
 }
});

// 3. Initialize inputTypes
const panInputArea = new eg.Axes.PanInput("#area", {
 scale: [0.5, 1]
});
const panInputHmove = new eg.Axes.PanInput("#hmove");
const panInputVmove = new eg.Axes.PanInput("#vmove");
const pinchInputArea = new eg.Axes.PinchInput("#area", {
 scale: 1.5
});

// 4. Connect eg.Axes and InputTypes
// [PanInput] When the mouse or touchscreen is down and moved.
// Connect the 'something2' axis to the mouse or touchscreen x position and
// connect the 'somethingN' axis to the mouse or touchscreen y position.
axes.connect(["something2", "somethingN"], panInputArea); // or axes.connect("something2 somethingN", panInputArea);

// Connect only one 'something1' axis to the mouse or touchscreen x position.
axes.connect(["something1"], panInputHmove); // or axes.connect("something1", panInputHmove);

// Connect only one 'something2' axis to the mouse or touchscreen y position.
axes.connect(["", "something2"], panInputVmove); // or axes.connect(" something2", panInputVmove);

// [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
axes.connect("something2", pinchInputArea);

Properties​

holding​

readonly

Returns true if at least one input is in progress.

Type: boolean

const axes = new eg.Axes({
 x: {
   range: [0, 100],
 },
});

axes.holding

Methods​

connect​

Connect the axis of eg.Axes to the inputType.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesArray<String> | StringThe name of the axis to associate with inputType
inputTypeObjectThe inputType instance to associate with the axis of eg.Axes
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  }
});

axes.connect("x", new eg.Axes.PanInput("#area1"))
   .connect("x xOther", new eg.Axes.PanInput("#area2"))
   .connect(" xOther", new eg.Axes.PanInput("#area3"))
   .connect(["x"], new eg.Axes.PanInput("#area4"))
   .connect(["xOther", "x"], new eg.Axes.PanInput("#area5"))
   .connect(["", "xOther"], new eg.Axes.PanInput("#area6"));

disconnect​

Disconnect the axis of eg.Axes from the inputType.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
inputTypeObject✔️An inputType instance associated with the axis of eg.Axes
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  }
});

const input1 = new eg.Axes.PanInput("#area1");
const input2 = new eg.Axes.PanInput("#area2");
const input3 = new eg.Axes.PanInput("#area3");

axes.connect("x", input1);
   .connect("x xOther", input2)
   .connect(["xOther", "x"], input3);

axes.disconnect(input1); // disconnects input1
axes.disconnect(); // disconnects all of them

get​

Returns the current position of the coordinates.

Returns: Object<string, number>

  • Axis coordinate information
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesObject✔️The names of the axis
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.get(); // {"x": 0, "xOther": -100, "zoom": 50}
axes.get(["x", "zoom"]); // {"x": 0, "zoom": 50}

setTo​

Moves an axis to specific coordinates.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posObject<string, number>The coordinate to move to
durationNumber✔️0Duration of the animation (unit: ms)
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.setTo({"x": 30, "zoom": 60});
axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}

axes.setTo({"x": 100, "xOther": 60}, 1000); // animatation

// after 1000 ms
axes.get(); // {"x": 100, "xOther": 60, "zoom": 60}

setBy​

Moves an axis from the current coordinates to specific coordinates.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posObject<string, number>The coordinate to move to
durationNumber✔️0Duration of the animation (unit: ms)
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.setBy({"x": 30, "zoom": 10});
axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}

axes.setBy({"x": 70, "xOther": 60}, 1000); // animatation

// after 1000 ms
axes.get(); // {"x": 100, "xOther": -40, "zoom": 60}

setOptions​

Change the options of Axes instance.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsAxesOptionAxes options to change
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
}, {
  round: 10,
});

axes.setTo({"x": 48});
axes.get(); // {"x": 50}

axes.setOptions({
  round: 1,
});

axes.setTo({"x": 48});
axes.get(); // {"x": 48}

setAxis​

Change the information of an existing axis.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axisObject<string, AxisOption>Axis options to change
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
});

axes.setTo({"x": 150});
axes.get(); // {"x": 100}

axes.setAxis({
  "x": {
     range: [0, 200]
  },
});

axes.setTo({"x": 150});
axes.get(); // {"x": 150}

stopAnimation​

Stop an animation in progress.

Returns: eg.Axes

  • An instance of a module itself
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
});

axes.setTo({"x": 10}, 1000); // start animatation

// after 500 ms
axes.stopAnimation(); // stop animation during movement.

updateAnimation​

Change the destination of an animation in progress.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posUpdateAnimationOptionThe coordinate to move to
const axes = new eg.Axes({
  "x": {
     range: [0, 200]
  },
  "y": {
     range: [0, 200]
  }
});

axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo

// after 500 ms
axes.updateAnimation({destPos: {"x": 100, "y": 100}}); // animation will end after 500 ms, at {"x": 100, "y": 100}

// after 500 ms
axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo

// after 700 ms
axes.updateAnimation({destPos: {"x": 100, "y": 100}, duration: 1500, restart: true}); // this works same as axes.setTo({"x": 100, "y": 100}, 800) since restart is true.

isBounceArea​

Returns whether there is a coordinate in the bounce area of ​​the target axis.

Returns: Boolen

  • Whether the bounce area exists.
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesObject✔️The names of the axis
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.isBounceArea(["x"]);
axes.isBounceArea(["x", "zoom"]);
axes.isBounceArea();

destroy​

Destroys properties, and events used in a module and disconnect all connections to inputTypes.

Events​

hold​

This event is fired when a user holds an element on the screen of the device.

Type: object

PROPERTYTYPEDESCRIPTION
posObject<string, number>coordinate
inputObjectThe instance of inputType where the event occurred
inputEventObjectThe event object received from inputType
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("hold", function(event) {
  // event.pos
  // event.input
  // event.inputEvent
  // isTrusted
});

release​

This event is fired when a user release an element on the screen of the device.

Type: object

PROPERTYTYPEDESCRIPTION
depaPosObject<string, number>The coordinates when releasing an element
destPosObject<string, number>The coordinates to move to after releasing an element
deltaObject<string, number>The movement variation of coordinate
bounceRatioObject<string, number>If the coordinates at the time of release are in the bounce area, the current bounce value divided by the maximum bounce value
inputEventObjectThe event object received from inputType
inputObjectThe instance of inputType where the event occurred
setTosetToSpecifies the animation coordinates to move after the event
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("release", function(event) {
  // event.depaPos
  // event.destPos
  // event.delta
  // event.input
  // event.inputEvent
  // event.setTo
  // event.isTrusted

  // if you want to change the animation coordinates to move after the 'release' event.
  event.setTo({x: 10}, 2000);
});

change​

This event is fired when coordinate changes.

Type: object

PROPERTYTYPEDESCRIPTION
posObject<string, number>The coordinate
deltaObject<string, number>The movement variation of coordinate
bounceRatioObject<string, number>If the current coordinates are in the bounce area, the current bounce value divided by the maximum bounce value
holdingBooleanIndicates whether a user holds an element on the screen of the device.
inputObjectThe instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEventObjectThe event object received from inputType. If the value is changed by animation, it returns 'null'.
setsetSpecifies the coordinates to move after the event. It works when the holding value is true
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("change", function(event) {
  // event.pos
  // event.delta
  // event.input
  // event.inputEvent
  // event.holding
  // event.set
  // event.isTrusted

  // if you want to change the coordinates to move after the 'change' event.
  // it works when the holding value of the change event is true.
  event.holding && event.set({x: 10});
});

animationStart​

This event is fired when animation starts.

Type: object

PROPERTYTYPEDESCRIPTION
depaPosObject<string, number>The coordinates when animation starts
destPosObject<string, number>The coordinates to move to. If you change this value, you can run the animation
deltaObject<string, number>The movement variation of coordinate
durationNumberDuration of the animation (unit: ms). If you change this value, you can control the animation duration time.
inputObjectThe instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEventObjectThe event object received from inputType
setTosetToSpecifies the animation coordinates to move after the event
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("release", function(event) {
  // event.depaPos
  // event.destPos
  // event.delta
  // event.input
  // event.inputEvent
  // event.setTo
  // event.isTrusted

  // if you want to change the animation coordinates to move after the 'animationStart' event.
  event.setTo({x: 10}, 2000);
});

animationEnd​

This event is fired when animation ends.

Type: object

PROPERTYTYPEDESCRIPTION
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("animationEnd", function(event) {
  // event.isTrusted
});

finish​

This event is fired when all actions have been completed.

Type: object

PROPERTYTYPEDESCRIPTION
isTrustedBooleanReturns true if an event was generated by the user action, or false if it was caused by a script or API call
const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("finish", function(event) {
  // event.isTrusted
});
+ + \ No newline at end of file diff --git a/docs/api/AxesOption.html b/docs/api/AxesOption.html index 09f31ea4..4c643c16 100644 --- a/docs/api/AxesOption.html +++ b/docs/api/AxesOption.html @@ -5,13 +5,13 @@ AxesOption | Axes - - + +
-

AxesOption

The option object of the eg.Axes module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
easingfunction✔️easing.easeOutCubicThe easing function to apply to an animation
maximumDurationNumber✔️InfinityMaximum duration of the animation
minimumDurationNumber✔️0Minimum duration of the animation
decelerationNumber✔️0.0006Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time.
interruptableBoolean✔️trueIndicates whether an animation is interruptible.
- true: It can be paused or stopped by user action or the API.
- false: It cannot be paused or stopped by user action or the API while it is running.
roundNumber✔️[object Object]Rounding unit. For example, 0.1 rounds to 0.1 decimal point(6.1234 => 6.1), 5 rounds to 5 (93 => 95)
Details
nestedBoolean✔️falseWhether the event propagates to other instances when the coordinates reach the end of the movable area
- - +

AxesOption

The option object of the eg.Axes module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
easingfunction✔️easing.easeOutCubicThe easing function to apply to an animation
maximumDurationNumber✔️InfinityMaximum duration of the animation
minimumDurationNumber✔️0Minimum duration of the animation
decelerationNumber✔️0.0006Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time.
interruptableBoolean✔️trueIndicates whether an animation is interruptible.
- true: It can be paused or stopped by user action or the API.
- false: It cannot be paused or stopped by user action or the API while it is running.
roundNumber✔️[object Object]Rounding unit. For example, 0.1 rounds to 0.1 decimal point(6.1234 => 6.1), 5 rounds to 5 (93 => 95)
Details
nestedBoolean✔️falseWhether the event propagates to other instances when the coordinates reach the end of the movable area
+ + \ No newline at end of file diff --git a/docs/api/AxisOption.html b/docs/api/AxisOption.html index 3a0f9d31..e52871f2 100644 --- a/docs/api/AxisOption.html +++ b/docs/api/AxisOption.html @@ -5,13 +5,13 @@ AxisOption | Axes - - + +
-

AxisOption

The Axis information. The key of the axis specifies the name to use as the logical virtual coordinate system.

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
rangeArray<Number>✔️The range of coordinate
range[0]Number✔️0The coordinate of the minimum
range[1]Number✔️0The coordinate of the maximum
startPosNumber✔️range[0]The coordinates to be moved when creating an instance
bounceArray<Number>✔️The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action. If the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area
bounce[0]Number✔️0The size of coordinate of the minimum area
bounce[1]Number✔️0The size of coordinate of the maximum area
circularArray<Boolean>✔️Indicates whether a circular element is available. If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.
circular[0]Boolean✔️falseIndicates whether to circulate to the coordinate of the minimum
circular[1]Boolean✔️falseIndicates whether to circulate to the coordinate of the maximum
- - +

AxisOption

The Axis information. The key of the axis specifies the name to use as the logical virtual coordinate system.

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
rangeArray<Number>✔️The range of coordinate
range[0]Number✔️0The coordinate of the minimum
range[1]Number✔️0The coordinate of the maximum
startPosNumber✔️range[0]The coordinates to be moved when creating an instance
bounceArray<Number>✔️The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action. If the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area
bounce[0]Number✔️0The size of coordinate of the minimum area
bounce[1]Number✔️0The size of coordinate of the maximum area
circularArray<Boolean>✔️Indicates whether a circular element is available. If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.
circular[0]Boolean✔️falseIndicates whether to circulate to the coordinate of the minimum
circular[1]Boolean✔️falseIndicates whether to circulate to the coordinate of the maximum
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_ALL.html b/docs/api/DIRECTION_ALL.html index e5aad941..ce1721fb 100644 --- a/docs/api/DIRECTION_ALL.html +++ b/docs/api/DIRECTION_ALL.html @@ -5,13 +5,13 @@ DIRECTION_ALL | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_DOWN.html b/docs/api/DIRECTION_DOWN.html index 36105cb6..dbe96d76 100644 --- a/docs/api/DIRECTION_DOWN.html +++ b/docs/api/DIRECTION_DOWN.html @@ -5,13 +5,13 @@ DIRECTION_DOWN | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_HORIZONTAL.html b/docs/api/DIRECTION_HORIZONTAL.html index 0fa664f2..b13fa31b 100644 --- a/docs/api/DIRECTION_HORIZONTAL.html +++ b/docs/api/DIRECTION_HORIZONTAL.html @@ -5,13 +5,13 @@ DIRECTION_HORIZONTAL | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_LEFT.html b/docs/api/DIRECTION_LEFT.html index 17b59af2..f04f325b 100644 --- a/docs/api/DIRECTION_LEFT.html +++ b/docs/api/DIRECTION_LEFT.html @@ -5,13 +5,13 @@ DIRECTION_LEFT | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_NONE.html b/docs/api/DIRECTION_NONE.html index 56cd28cd..4098c7b0 100644 --- a/docs/api/DIRECTION_NONE.html +++ b/docs/api/DIRECTION_NONE.html @@ -5,13 +5,13 @@ DIRECTION_NONE | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_RIGHT.html b/docs/api/DIRECTION_RIGHT.html index 7b8fdf12..25b46935 100644 --- a/docs/api/DIRECTION_RIGHT.html +++ b/docs/api/DIRECTION_RIGHT.html @@ -5,13 +5,13 @@ DIRECTION_RIGHT | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_UP.html b/docs/api/DIRECTION_UP.html index 777930f8..9412d892 100644 --- a/docs/api/DIRECTION_UP.html +++ b/docs/api/DIRECTION_UP.html @@ -5,13 +5,13 @@ DIRECTION_UP | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/DIRECTION_VERTICAL.html b/docs/api/DIRECTION_VERTICAL.html index ae842f5e..544471e6 100644 --- a/docs/api/DIRECTION_VERTICAL.html +++ b/docs/api/DIRECTION_VERTICAL.html @@ -5,13 +5,13 @@ DIRECTION_VERTICAL | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/MoveKeyInput.html b/docs/api/MoveKeyInput.html index 6fcdee53..7ef4897e 100644 --- a/docs/api/MoveKeyInput.html +++ b/docs/api/MoveKeyInput.html @@ -5,13 +5,13 @@ MoveKeyInput | Axes - - + +
-

MoveKeyInput

class MoveKeyInput

A module that passes the amount of change to eg.Axes when the move key stroke is occured. use two axis.

Methods
destroy
enable
disable
isEnabled

constructor​

new MoveKeyInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.MoveKeyInput module
optionsMoveKeyInputOption✔️The option object of the eg.Axes.MoveKeyInput module
const moveKey = new eg.Axes.MoveKeyInput("#area", {
    scale: [1, 1]
});

// Connect 'x', 'y' axes when the moveKey is pressed.
axes.connect(["x", "y"], moveKey);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: MoveKeyInput

  • An instance of a module itself

disable​

Disables input devices

Returns: MoveKeyInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device
- - +

MoveKeyInput

class MoveKeyInput

A module that passes the amount of change to eg.Axes when the move key stroke is occured. use two axis.

Methods
destroy
enable
disable
isEnabled

constructor​

new MoveKeyInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.MoveKeyInput module
optionsMoveKeyInputOption✔️The option object of the eg.Axes.MoveKeyInput module
const moveKey = new eg.Axes.MoveKeyInput("#area", {
    scale: [1, 1]
});

// Connect 'x', 'y' axes when the moveKey is pressed.
axes.connect(["x", "y"], moveKey);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: MoveKeyInput

  • An instance of a module itself

disable​

Disables input devices

Returns: MoveKeyInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device
+ + \ No newline at end of file diff --git a/docs/api/MoveKeyInputOption.html b/docs/api/MoveKeyInputOption.html index 2944aa85..d588474c 100644 --- a/docs/api/MoveKeyInputOption.html +++ b/docs/api/MoveKeyInputOption.html @@ -5,13 +5,13 @@ MoveKeyInputOption | Axes - - + +
-

MoveKeyInputOption

The option object of the eg.Axes.MoveKeyInput module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
scaleArray<Number>✔️Coordinate scale that a user can move
scale[0]Number✔️1Coordinate scale for the first axis
scale[1]Number✔️1Coordinate scale for the decond axis
- - +

MoveKeyInputOption

The option object of the eg.Axes.MoveKeyInput module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
scaleArray<Number>✔️Coordinate scale that a user can move
scale[0]Number✔️1Coordinate scale for the first axis
scale[1]Number✔️1Coordinate scale for the decond axis
+ + \ No newline at end of file diff --git a/docs/api/PanInput.html b/docs/api/PanInput.html index 23772565..a57365f1 100644 --- a/docs/api/PanInput.html +++ b/docs/api/PanInput.html @@ -5,13 +5,13 @@ PanInput | Axes - - + +
-

PanInput

class PanInput

A module that passes the amount of change to eg.Axes when the mouse or touchscreen is down and moved. use less than two axes.

Methods
destroy
enable
disable
isEnabled
release

constructor​

new PanInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementString | HTMLElement | Ref.<HTMLElement> | jQueryAn element to use the eg.Axes.PanInput module
optionsPanInputOption✔️{}The option object of the eg.Axes.PanInput module
const pan = new eg.Axes.PanInput("#area", {
    inputType: ["touch"],
    scale: [1, 1.3],
});

// Connect the 'something2' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
// Connect the 'somethingN' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
axes.connect(["something2", "somethingN"], pan); // or axes.connect("something2 somethingN", pan);

// Connect only one 'something1' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
axes.connect(["something1"], pan); // or axes.connect("something1", pan);

// Connect only one 'something2' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
axes.connect(["", "something2"], pan); // or axes.connect(" something2", pan);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: PanInput

  • An instance of a module itself

disable​

Disables input devices

Returns: PanInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device

release​

Releases current user input.

Returns: PanInput

  • An instance of a module itself
- - +

PanInput

class PanInput

A module that passes the amount of change to eg.Axes when the mouse or touchscreen is down and moved. use less than two axes.

Methods
destroy
enable
disable
isEnabled
release

constructor​

new PanInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementString | HTMLElement | Ref.<HTMLElement> | jQueryAn element to use the eg.Axes.PanInput module
optionsPanInputOption✔️{}The option object of the eg.Axes.PanInput module
const pan = new eg.Axes.PanInput("#area", {
    inputType: ["touch"],
    scale: [1, 1.3],
});

// Connect the 'something2' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
// Connect the 'somethingN' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
axes.connect(["something2", "somethingN"], pan); // or axes.connect("something2 somethingN", pan);

// Connect only one 'something1' axis to the mouse or touchscreen x position when the mouse or touchscreen is down and moved.
axes.connect(["something1"], pan); // or axes.connect("something1", pan);

// Connect only one 'something2' axis to the mouse or touchscreen y position when the mouse or touchscreen is down and moved.
axes.connect(["", "something2"], pan); // or axes.connect(" something2", pan);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: PanInput

  • An instance of a module itself

disable​

Disables input devices

Returns: PanInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device

release​

Releases current user input.

Returns: PanInput

  • An instance of a module itself
+ + \ No newline at end of file diff --git a/docs/api/PanInputOption.html b/docs/api/PanInputOption.html index c7e06e2f..df82aaf1 100644 --- a/docs/api/PanInputOption.html +++ b/docs/api/PanInputOption.html @@ -5,13 +5,13 @@ PanInputOption | Axes - - + +
-

PanInputOption

The option object of the eg.Axes.PanInput module.

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
inputTypeArray<String>✔️["touch", "mouse", "pointer"]Types of input devices
- touch: Touch screen
- mouse: Mouse
- pointer: Mouse and touch
inputKeyArray<String>✔️["any"]List of key combinations to allow input
- any: any key
- shift: shift key
- ctrl: ctrl key and pinch gesture on the trackpad
- alt: alt key
- meta: meta key
- none: none of these keys are pressed
inputButtonArray<String>✔️["left"]List of buttons to allow input
- left: Left mouse button and normal touch
- middle: Mouse wheel press
- right: Right mouse button
scaleArray<Number>✔️Coordinate scale that a user can move
scale[0]Number✔️1horizontal axis scale
scale[1]Number✔️1vertical axis scale
thresholdAngleNumber✔️45The threshold value that determines whether user action is horizontal or vertical (0~90)
thresholdNumber✔️0Minimal pan distance required before recognizing
preventClickOnDragBoolean✔️falseWhether to cancel the click event when the user finishes dragging more than 1 pixel
preventDefaultOnDragBoolean✔️falseWhether to use the preventDefault when the user starts dragging
iOSEdgeSwipeThresholdNumber✔️30Area (px) that can go to the next page when swiping the right edge in iOS safari
touchActionString✔️[object Object]Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis.
- - +

PanInputOption

The option object of the eg.Axes.PanInput module.

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
inputTypeArray<String>✔️["touch", "mouse", "pointer"]Types of input devices
- touch: Touch screen
- mouse: Mouse
- pointer: Mouse and touch
inputKeyArray<String>✔️["any"]List of key combinations to allow input
- any: any key
- shift: shift key
- ctrl: ctrl key and pinch gesture on the trackpad
- alt: alt key
- meta: meta key
- none: none of these keys are pressed
inputButtonArray<String>✔️["left"]List of buttons to allow input
- left: Left mouse button and normal touch
- middle: Mouse wheel press
- right: Right mouse button
scaleArray<Number>✔️Coordinate scale that a user can move
scale[0]Number✔️1horizontal axis scale
scale[1]Number✔️1vertical axis scale
thresholdAngleNumber✔️45The threshold value that determines whether user action is horizontal or vertical (0~90)
thresholdNumber✔️0Minimal pan distance required before recognizing
preventClickOnDragBoolean✔️falseWhether to cancel the click event when the user finishes dragging more than 1 pixel
preventDefaultOnDragBoolean✔️falseWhether to use the preventDefault when the user starts dragging
iOSEdgeSwipeThresholdNumber✔️30Area (px) that can go to the next page when swiping the right edge in iOS safari
touchActionString✔️[object Object]Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis.
+ + \ No newline at end of file diff --git a/docs/api/PinchInput.html b/docs/api/PinchInput.html index 0fbb07ef..7a107787 100644 --- a/docs/api/PinchInput.html +++ b/docs/api/PinchInput.html @@ -5,13 +5,13 @@ PinchInput | Axes - - + +
-

PinchInput

class PinchInput

A module that passes the amount of change to eg.Axes when two pointers are moving toward (zoom-in) or away from each other (zoom-out). use one axis.

Methods
destroy
enable
disable
isEnabled

constructor​

new PinchInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.PinchInput module
optionsPinchInputOption✔️The option object of the eg.Axes.PinchInput module
const pinch = new eg.Axes.PinchInput("#area", {
  scale: 1
});

// Connect 'something' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
axes.connect("something", pinch);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: PinchInput

  • An instance of a module itself

disable​

Disables input devices

Returns: PinchInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device
- - +

PinchInput

class PinchInput

A module that passes the amount of change to eg.Axes when two pointers are moving toward (zoom-in) or away from each other (zoom-out). use one axis.

Methods
destroy
enable
disable
isEnabled

constructor​

new PinchInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.PinchInput module
optionsPinchInputOption✔️The option object of the eg.Axes.PinchInput module
const pinch = new eg.Axes.PinchInput("#area", {
  scale: 1
});

// Connect 'something' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
axes.connect("something", pinch);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: PinchInput

  • An instance of a module itself

disable​

Disables input devices

Returns: PinchInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device
+ + \ No newline at end of file diff --git a/docs/api/PinchInputOption.html b/docs/api/PinchInputOption.html index d0dd01dd..a86cf3f6 100644 --- a/docs/api/PinchInputOption.html +++ b/docs/api/PinchInputOption.html @@ -5,13 +5,13 @@ PinchInputOption | Axes - - + +
-

PinchInputOption

The option object of the eg.Axes.PinchInput module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
scaleNumber✔️1Coordinate scale that a user can move
thresholdNumber✔️0Minimal scale before recognizing
inputTypeArray<String>✔️["touch", "pointer"]Types of input devices
- touch: Touch screen
- pointer: Mouse and touch
touchActionString✔️"none"Value that overrides the element's "touch-action" css property. It is set to "none" to prevent scrolling during touch.
- - +

PinchInputOption

The option object of the eg.Axes.PinchInput module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
scaleNumber✔️1Coordinate scale that a user can move
thresholdNumber✔️0Minimal scale before recognizing
inputTypeArray<String>✔️["touch", "pointer"]Types of input devices
- touch: Touch screen
- pointer: Mouse and touch
touchActionString✔️"none"Value that overrides the element's "touch-action" css property. It is set to "none" to prevent scrolling during touch.
+ + \ No newline at end of file diff --git a/docs/api/RotatePanInput.html b/docs/api/RotatePanInput.html index 909a96d8..4445ef5a 100644 --- a/docs/api/RotatePanInput.html +++ b/docs/api/RotatePanInput.html @@ -5,13 +5,13 @@ RotatePanInput | Axes - - + +
-

RotatePanInput

class RotatePanInput extends PanInput

A module that passes the angle moved by touch to Axes and uses one axis of rotation.
Details

Methods
destroy
enable
disable
isEnabled
release

constructor​

new RotatePanInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.RotatePanInput module
optionsPanInputOption✔️The option object of the eg.Axes.PanInput module
const input = new eg.Axes.RotatePanInput("#area");

var axes = new eg.Axes({
    // property name('angle') could be anything you want (eg. x, y, z...)
    angle: {
        range: [-180, 180] // from -180deg to 180deg
    }
});

axes.connect("angle", input)

Methods​

destroy​

inherited

Destroys elements, properties, and events used in a module.

enable​

inherited

Enables input devices

Returns: PanInput

  • An instance of a module itself

disable​

inherited

Disables input devices

Returns: PanInput

  • An instance of a module itself

isEnabled​

inherited

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device

release​

inherited

Releases current user input.

Returns: PanInput

  • An instance of a module itself
- - +

RotatePanInput

class RotatePanInput extends PanInput

A module that passes the angle moved by touch to Axes and uses one axis of rotation.
Details

Methods
destroy
enable
disable
isEnabled
release

constructor​

new RotatePanInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.RotatePanInput module
optionsPanInputOption✔️The option object of the eg.Axes.PanInput module
const input = new eg.Axes.RotatePanInput("#area");

var axes = new eg.Axes({
    // property name('angle') could be anything you want (eg. x, y, z...)
    angle: {
        range: [-180, 180] // from -180deg to 180deg
    }
});

axes.connect("angle", input)

Methods​

destroy​

inherited

Destroys elements, properties, and events used in a module.

enable​

inherited

Enables input devices

Returns: PanInput

  • An instance of a module itself

disable​

inherited

Disables input devices

Returns: PanInput

  • An instance of a module itself

isEnabled​

inherited

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device

release​

inherited

Releases current user input.

Returns: PanInput

  • An instance of a module itself
+ + \ No newline at end of file diff --git a/docs/api/TRANSFORM.html b/docs/api/TRANSFORM.html index 20f30447..c900a72a 100644 --- a/docs/api/TRANSFORM.html +++ b/docs/api/TRANSFORM.html @@ -5,13 +5,13 @@ TRANSFORM | Axes - - + +
-

TRANSFORM

const TRANSFORM

Returns the transform attribute with CSS vendor prefixes.

Type: String

eg.Axes.TRANSFORM; // "transform" or "webkitTransform"
- - +

TRANSFORM

const TRANSFORM

Returns the transform attribute with CSS vendor prefixes.

Type: String

eg.Axes.TRANSFORM; // "transform" or "webkitTransform"
+ + \ No newline at end of file diff --git a/docs/api/VERSION.html b/docs/api/VERSION.html index fa42fa76..41c02768 100644 --- a/docs/api/VERSION.html +++ b/docs/api/VERSION.html @@ -5,13 +5,13 @@ VERSION | Axes - - + +
-

VERSION

const VERSION

Version info string

Type: String

eg.Axes.VERSION;  // ex) 3.3.3
- - +

VERSION

const VERSION

Version info string

Type: String

eg.Axes.VERSION;  // ex) 3.3.3
+ + \ No newline at end of file diff --git a/docs/api/WheelInput.html b/docs/api/WheelInput.html index cb0587c6..61506a3e 100644 --- a/docs/api/WheelInput.html +++ b/docs/api/WheelInput.html @@ -5,13 +5,13 @@ WheelInput | Axes - - + +
-

WheelInput

class WheelInput

A module that passes the amount of change to eg.Axes when the mouse wheel is moved. use one axis.

Methods
destroy
enable
disable
isEnabled

constructor​

new WheelInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.WheelInput module
optionsWheelInputOption✔️The option object of the eg.Axes.WheelInput module
const wheel = new eg.Axes.WheelInput("#area", {
    scale: 1
});

// Connect only one 'something1' axis to the vertical mouse wheel.
axes.connect(["something1"], wheel); // or axes.connect("something1", wheel);

// Connect only one 'something2' axis to the horizontal mouse wheel.
axes.connect(["", "something2"], wheel); // or axes.connect(" something2", pan);

// Connect the 'something1' axis to the vertical mouse wheel.
// Connect the 'something2' axis to the horizontal mouse wheel.
axes.connect(["something1", "something2"], wheel);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: WheelInput

  • An instance of a module itself

disable​

Disables input devices

Returns: WheelInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device
- - +

WheelInput

class WheelInput

A module that passes the amount of change to eg.Axes when the mouse wheel is moved. use one axis.

Methods
destroy
enable
disable
isEnabled

constructor​

new WheelInput(element, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement | String | jQueryAn element to use the eg.Axes.WheelInput module
optionsWheelInputOption✔️The option object of the eg.Axes.WheelInput module
const wheel = new eg.Axes.WheelInput("#area", {
    scale: 1
});

// Connect only one 'something1' axis to the vertical mouse wheel.
axes.connect(["something1"], wheel); // or axes.connect("something1", wheel);

// Connect only one 'something2' axis to the horizontal mouse wheel.
axes.connect(["", "something2"], wheel); // or axes.connect(" something2", pan);

// Connect the 'something1' axis to the vertical mouse wheel.
// Connect the 'something2' axis to the horizontal mouse wheel.
axes.connect(["something1", "something2"], wheel);

Methods​

destroy​

Destroys elements, properties, and events used in a module.

enable​

Enables input devices

Returns: WheelInput

  • An instance of a module itself

disable​

Disables input devices

Returns: WheelInput

  • An instance of a module itself

isEnabled​

Returns whether to use an input device

Returns: Boolean

  • Whether to use an input device
+ + \ No newline at end of file diff --git a/docs/api/WheelInputOption.html b/docs/api/WheelInputOption.html index 4e7f7e88..a11acde9 100644 --- a/docs/api/WheelInputOption.html +++ b/docs/api/WheelInputOption.html @@ -5,13 +5,13 @@ WheelInputOption | Axes - - + +
-

WheelInputOption

The option object of the eg.Axes.WheelInput module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
inputKeyArray<String>✔️["any"]List of key combinations to allow input
- any: any key
- shift: shift key
- ctrl: ctrl key and pinch gesture on the trackpad
- alt: alt key
- meta: meta key
- none: none of these keys are pressed
scaleNumber✔️1Coordinate scale that a user can move
releaseDelayNumber✔️300Millisecond that trigger release event after last input
useNormalizedBoolean✔️trueWhether to calculate scroll speed the same in all browsers
useAnimationBoolean✔️falseWhether to process coordinate changes through the mouse wheel as a continuous animation
- - +

WheelInputOption

The option object of the eg.Axes.WheelInput module

Type: Object

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
inputKeyArray<String>✔️["any"]List of key combinations to allow input
- any: any key
- shift: shift key
- ctrl: ctrl key and pinch gesture on the trackpad
- alt: alt key
- meta: meta key
- none: none of these keys are pressed
scaleNumber✔️1Coordinate scale that a user can move
releaseDelayNumber✔️300Millisecond that trigger release event after last input
useNormalizedBoolean✔️trueWhether to calculate scroll speed the same in all browsers
useAnimationBoolean✔️falseWhether to process coordinate changes through the mouse wheel as a continuous animation
+ + \ No newline at end of file diff --git a/docs/api/cancelAnimationFrame.html b/docs/api/cancelAnimationFrame.html index 6e467095..a064b31e 100644 --- a/docs/api/cancelAnimationFrame.html +++ b/docs/api/cancelAnimationFrame.html @@ -5,13 +5,13 @@ cancelAnimationFrame | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/api/requestAnimationFrame.html b/docs/api/requestAnimationFrame.html index 728b5774..f4683cc8 100644 --- a/docs/api/requestAnimationFrame.html +++ b/docs/api/requestAnimationFrame.html @@ -5,13 +5,13 @@ requestAnimationFrame | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/axes.html b/docs/axes.html index 5397978c..ef53f24a 100644 --- a/docs/axes.html +++ b/docs/axes.html @@ -5,13 +5,13 @@ What is the eg.Axes? | Axes - - + +
-

What is the eg.Axes?

You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.

zoom: 1.00
<div>
  <p>You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.</p>
  <div id="delegateTarget">
    <div id="uiWrapper">
      <div class="ui">
        <img src="../image/axes/logo.svg"/>
      </div>
    </div>
  </div>
</div>
const SUPPORT_TOUCH = "ontouchstart" in window;
const delegateTarget = document.getElementById("delegateTarget");
const uiWrapper = document.getElementById("uiWrapper");
const uiWidth = uiWrapper.getBoundingClientRect().width;
const uiHeight = uiWrapper.getBoundingClientRect().height;
const ui = uiWrapper.querySelector(".ui");

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  panX: {
    range: [0, uiWidth],
    bounce: 20
  },
  panY: {
    range: [0, uiHeight],
    bounce: 20
  },
  zoom: {
    range: [1, 5],
    bounce: 1
  }
}, {
  minimumDuration: 300
});

// 2. attach event handler
axes.on({
  "change": function (e) {
    var pos = e.pos;
    ui.style[eg.Axes.TRANSFORM] =
      `translate3d(${pos.panX}px, ${pos.panY}px, 0) scale(${pos.zoom})`;
  },
});

// 3. Initialize inputTypes and connect it
axes.connect("panX panY", new eg.Axes.PanInput(delegateTarget))
axes.connect("panX panY", new eg.Axes.MoveKeyInput(delegateTarget, {
  scale: [5, -5]
})).connect("zoom", SUPPORT_TOUCH ?
  new eg.Axes.PinchInput(delegateTarget) :
  new eg.Axes.WheelInput(delegateTarget));

// 4. move to position
axes.setTo({panX: uiWidth/2 + 20, panY: uiHeight/2});
- - +

What is the eg.Axes?

You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.

zoom: 1.00
<div>
  <p>You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.</p>
  <div id="delegateTarget">
    <div id="uiWrapper">
      <div class="ui">
        <img src="../image/axes/logo.svg"/>
      </div>
    </div>
  </div>
</div>
const SUPPORT_TOUCH = "ontouchstart" in window;
const delegateTarget = document.getElementById("delegateTarget");
const uiWrapper = document.getElementById("uiWrapper");
const uiWidth = uiWrapper.getBoundingClientRect().width;
const uiHeight = uiWrapper.getBoundingClientRect().height;
const ui = uiWrapper.querySelector(".ui");

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  panX: {
    range: [0, uiWidth],
    bounce: 20
  },
  panY: {
    range: [0, uiHeight],
    bounce: 20
  },
  zoom: {
    range: [1, 5],
    bounce: 1
  }
}, {
  minimumDuration: 300
});

// 2. attach event handler
axes.on({
  "change": function (e) {
    var pos = e.pos;
    ui.style[eg.Axes.TRANSFORM] =
      `translate3d(${pos.panX}px, ${pos.panY}px, 0) scale(${pos.zoom})`;
  },
});

// 3. Initialize inputTypes and connect it
axes.connect("panX panY", new eg.Axes.PanInput(delegateTarget))
axes.connect("panX panY", new eg.Axes.MoveKeyInput(delegateTarget, {
  scale: [5, -5]
})).connect("zoom", SUPPORT_TOUCH ?
  new eg.Axes.PinchInput(delegateTarget) :
  new eg.Axes.WheelInput(delegateTarget));

// 4. move to position
axes.setTo({panX: uiWidth/2 + 20, panY: uiHeight/2});
+ + \ No newline at end of file diff --git a/docs/bubble.html b/docs/bubble.html index 49c32d00..0d9144b4 100644 --- a/docs/bubble.html +++ b/docs/bubble.html @@ -5,13 +5,13 @@ Bubble | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/car360viewer.html b/docs/car360viewer.html index 96be0372..237c7ad9 100644 --- a/docs/car360viewer.html +++ b/docs/car360viewer.html @@ -5,13 +5,13 @@ Car 360º Viewer | Axes - - + +
-

Car 360º Viewer

You can create a viewer that can rotate 360 ​​degrees using one axis.

<div>
  <p>You can create a viewer that can rotate 360 ​​degrees using one axis.</p>
  <div class="car_spot">
    <div class="car_rotate">
      <div class="img_cont" style="position:relative;z-index:10">
        <img height="150" src="./../image/car360/beatle (1).png">
        <img height="150" src="./../image/car360/beatle (2).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (3).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (4).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (5).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (6).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (7).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (8).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (9).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (10).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (11).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (12).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (13).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (14).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (15).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (16).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (17).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (18).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (19).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (20).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (21).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (22).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (23).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (24).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (25).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (26).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (27).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (28).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (29).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (30).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (31).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (32).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (33).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (34).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (35).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (36).png" style="display:none">
      </div>
      <div class="ratate_bg"></div>
    </div>
  </div>
</div>
const images = Array.prototype.slice.call(document.querySelectorAll(
  ".car_rotate img"));
const imagesNum = images.length;
const ape = 360 / imagesNum; // angle per each

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  angle: {
    range: [0, 360],
    circular: true
  }
}, {
  deceleration: 0.01
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  const index = Math.min(Math.round(pos.angle % 360 / ape), imagesNum - 1);
  images.map((v, i) => {
    v.style.display = i === index ? "inline-block" : "none";
  });
});

// 3. Initialize a inputType and connect it
axes.connect("angle", new eg.Axes.PanInput(".car_rotate"));
- - +

Car 360º Viewer

You can create a viewer that can rotate 360 ​​degrees using one axis.

<div>
  <p>You can create a viewer that can rotate 360 ​​degrees using one axis.</p>
  <div class="car_spot">
    <div class="car_rotate">
      <div class="img_cont" style="position:relative;z-index:10">
        <img height="150" src="./../image/car360/beatle (1).png">
        <img height="150" src="./../image/car360/beatle (2).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (3).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (4).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (5).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (6).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (7).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (8).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (9).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (10).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (11).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (12).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (13).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (14).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (15).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (16).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (17).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (18).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (19).png" style="display:none;">
        <img height="150" src="./../image/car360/beatle (20).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (21).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (22).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (23).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (24).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (25).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (26).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (27).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (28).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (29).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (30).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (31).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (32).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (33).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (34).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (35).png" style="display:none">
        <img height="150" src="./../image/car360/beatle (36).png" style="display:none">
      </div>
      <div class="ratate_bg"></div>
    </div>
  </div>
</div>
const images = Array.prototype.slice.call(document.querySelectorAll(
  ".car_rotate img"));
const imagesNum = images.length;
const ape = 360 / imagesNum; // angle per each

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  angle: {
    range: [0, 360],
    circular: true
  }
}, {
  deceleration: 0.01
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  const index = Math.min(Math.round(pos.angle % 360 / ape), imagesNum - 1);
  images.map((v, i) => {
    v.style.display = i === index ? "inline-block" : "none";
  });
});

// 3. Initialize a inputType and connect it
axes.connect("angle", new eg.Axes.PanInput(".car_rotate"));
+ + \ No newline at end of file diff --git a/docs/cardinhand.html b/docs/cardinhand.html index 33ec5abe..b34601f6 100644 --- a/docs/cardinhand.html +++ b/docs/cardinhand.html @@ -5,13 +5,13 @@ Cards in hands | Axes - - + +
-

Cards in hands

You can create a UI that responds to user input using two axes.

<div>
  <p>You can create a UI that responds to user input using two axes.</p>
  <div id="showcase">
    <div class="showcase-item">
      <div class="showcase-content">
        <div id="movableCoordWrapper">
          <div class="hand">
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
          </div>
        </div>
        <div id="dot" class="movableDot"></div>
      </div>
    </div>
    <div class="codepen"></div>
  </div>
</div>
const transform = eg.Axes.TRANSFORM;
const dot = document.getElementById("dot");
const hand = document.querySelector(".hand");
const cards = Array.prototype.slice.apply(document.querySelectorAll(".handcard"));
const HAND_RADIUS = parseInt(window.getComputedStyle(hand).width) / 2;
const CARD_OFFSET = -300;
let handRotMin = null;
let handRotMax = null;

function getCardDistance(card, hand) {
  const handRect = hand.getBoundingClientRect();
  const handCenterY = (handRect.top + handRect.bottom) / 2;
  const handCenterX = (handRect.left + handRect.right) / 2
  const cardRect = card.getBoundingClientRect();
  const cardCenterY = (cardRect.top + cardRect.bottom) / 2;
  const cardCenterX = (cardRect.left + cardRect.right) / 2;
  const deltaX = handCenterX - cardCenterX;
  const deltaY = handCenterY - cardCenterY;
  const cardDistance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  const cardTilt = (Math.atan(deltaX / deltaY) * -1)/Math.PI * 180;
  return {
    distance: cardDistance,
    tilt: cardTilt
  };
}

function setCardOnHand(card) {
  const distance = getCardDistance(card, hand);
  const cardTilt = distance.tilt;
  const cardDistance = distance.distance;
  const cardOffset = cardDistance - CARD_OFFSET - HAND_RADIUS;

  if (handRotMin === null) {
    handRotMin = cardTilt;
  } else if (cardTilt < handRotMin) {
    handRotMin = cardTilt;
  }
  if (handRotMax === null) {
    handRotMax = cardTilt;
  } else if (cardTilt > handRotMax) {
    handRotMax = cardTilt;
  }
  card.style[eg.Axes.TRANSFORM] =
    `rotateZ(${cardTilt}deg) translateY(${cardOffset}px)`;
  card.setAttribute("data-cardOffset", cardOffset);
}

cards.forEach(function (v) {
  setCardOnHand(v);
});

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  hand: {
    range: [handRotMin, handRotMax],
    bounce: 15
  },
  top: {
    range: [0, 0],
    bounce: [100, 160]
  },
}, {
  deceleration: 0.00034
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  dot.style["bottom"] = `${-1.4 * pos.top}px`;
  dot.style[transform] = `translateX(${pos.hand * 2.3}px)`;
  hand.style[transform] = `rotateZ(${pos.hand}deg)`;
  cards.forEach((v) => {
    v.style[transform] =
      `${v.style[transform].split("translateY")[0]} translateY(${parseFloat(v.getAttribute("data-cardOffset")) + pos.top}px)`;
  });
});

// 3. Initialize a inputType and connect it
axes.connect("hand top", new eg.Axes.PanInput(hand, {
  scale: [0.3, 0.8]
}));
- - +

Cards in hands

You can create a UI that responds to user input using two axes.

<div>
  <p>You can create a UI that responds to user input using two axes.</p>
  <div id="showcase">
    <div class="showcase-item">
      <div class="showcase-content">
        <div id="movableCoordWrapper">
          <div class="hand">
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
            <div class="handcard" style=""><img class="logo_mono" src="../../common/image/logo_mono.svg"></div>
          </div>
        </div>
        <div id="dot" class="movableDot"></div>
      </div>
    </div>
    <div class="codepen"></div>
  </div>
</div>
const transform = eg.Axes.TRANSFORM;
const dot = document.getElementById("dot");
const hand = document.querySelector(".hand");
const cards = Array.prototype.slice.apply(document.querySelectorAll(".handcard"));
const HAND_RADIUS = parseInt(window.getComputedStyle(hand).width) / 2;
const CARD_OFFSET = -300;
let handRotMin = null;
let handRotMax = null;

function getCardDistance(card, hand) {
  const handRect = hand.getBoundingClientRect();
  const handCenterY = (handRect.top + handRect.bottom) / 2;
  const handCenterX = (handRect.left + handRect.right) / 2
  const cardRect = card.getBoundingClientRect();
  const cardCenterY = (cardRect.top + cardRect.bottom) / 2;
  const cardCenterX = (cardRect.left + cardRect.right) / 2;
  const deltaX = handCenterX - cardCenterX;
  const deltaY = handCenterY - cardCenterY;
  const cardDistance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  const cardTilt = (Math.atan(deltaX / deltaY) * -1)/Math.PI * 180;
  return {
    distance: cardDistance,
    tilt: cardTilt
  };
}

function setCardOnHand(card) {
  const distance = getCardDistance(card, hand);
  const cardTilt = distance.tilt;
  const cardDistance = distance.distance;
  const cardOffset = cardDistance - CARD_OFFSET - HAND_RADIUS;

  if (handRotMin === null) {
    handRotMin = cardTilt;
  } else if (cardTilt < handRotMin) {
    handRotMin = cardTilt;
  }
  if (handRotMax === null) {
    handRotMax = cardTilt;
  } else if (cardTilt > handRotMax) {
    handRotMax = cardTilt;
  }
  card.style[eg.Axes.TRANSFORM] =
    `rotateZ(${cardTilt}deg) translateY(${cardOffset}px)`;
  card.setAttribute("data-cardOffset", cardOffset);
}

cards.forEach(function (v) {
  setCardOnHand(v);
});

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  hand: {
    range: [handRotMin, handRotMax],
    bounce: 15
  },
  top: {
    range: [0, 0],
    bounce: [100, 160]
  },
}, {
  deceleration: 0.00034
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  dot.style["bottom"] = `${-1.4 * pos.top}px`;
  dot.style[transform] = `translateX(${pos.hand * 2.3}px)`;
  hand.style[transform] = `rotateZ(${pos.hand}deg)`;
  cards.forEach((v) => {
    v.style[transform] =
      `${v.style[transform].split("translateY")[0]} translateY(${parseFloat(v.getAttribute("data-cardOffset")) + pos.top}px)`;
  });
});

// 3. Initialize a inputType and connect it
axes.connect("hand top", new eg.Axes.PanInput(hand, {
  scale: [0.3, 0.8]
}));
+ + \ No newline at end of file diff --git a/docs/cube.html b/docs/cube.html index c885fab6..6a99e0b7 100644 --- a/docs/cube.html +++ b/docs/cube.html @@ -5,13 +5,13 @@ Rotate a Cube | Axes - - + +
-

Rotate a Cube

You can rotate the cube using two axes.

1
2
3
4
5
6
<div>
  <p>You can rotate the cube using two axes.</p>
  <div id="area">
    <div id="box">
      <div class="face metal-linear" style="-webkit-transform:rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px);">1</div>
      <div class="face metal-linear" style="-webkit-transform:rotateY(-90deg) translate3d(0px,-50px,100px);">2</div>
      <div class="face metal-linear" style="-webkit-transform:rotateY(90deg) translate3d(0px,-50px,0px);">3</div>
      <div class="face metal-linear" style="-webkit-transform:rotateX(90deg) translate3d(-50px,0px,100px);">4</div>
      <div class="face metal-linear" style="-webkit-transform:rotateY(180deg) translate3d(50px,-50px,50px);">5</div>
      <div class="face metal-linear" style="-webkit-transform:rotateX(-90deg) translate3d(-50px,0px,0px);">6</div>
    </div>
  </div>
</div>
const box = document.getElementById("box");

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  rotateX: {
    range: [0, 360],
    circular: true
  },
  rotateY: {
    range: [0, 360],
    circular: true
  }
}, {
  deceleration: 0.0024
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  box.style[eg.Axes.TRANSFORM] =
    `rotateY(${pos.rotateX}deg) rotateX(${pos.rotateY}deg)`;
});

// 3. Initialize a inputType and connect it
axes.connect("rotateX rotateY", new eg.Axes.PanInput("#area")).connect("rotateX rotateY", new eg.Axes.MoveKeyInput("#area", {scale: [10, -10]}));

// 4. move to position
axes.setTo({
  "rotateX": 40,
  "rotateY": 315
}, 100);
- - +

Rotate a Cube

You can rotate the cube using two axes.

1
2
3
4
5
6
<div>
  <p>You can rotate the cube using two axes.</p>
  <div id="area">
    <div id="box">
      <div class="face metal-linear" style="-webkit-transform:rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px);">1</div>
      <div class="face metal-linear" style="-webkit-transform:rotateY(-90deg) translate3d(0px,-50px,100px);">2</div>
      <div class="face metal-linear" style="-webkit-transform:rotateY(90deg) translate3d(0px,-50px,0px);">3</div>
      <div class="face metal-linear" style="-webkit-transform:rotateX(90deg) translate3d(-50px,0px,100px);">4</div>
      <div class="face metal-linear" style="-webkit-transform:rotateY(180deg) translate3d(50px,-50px,50px);">5</div>
      <div class="face metal-linear" style="-webkit-transform:rotateX(-90deg) translate3d(-50px,0px,0px);">6</div>
    </div>
  </div>
</div>
const box = document.getElementById("box");

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  rotateX: {
    range: [0, 360],
    circular: true
  },
  rotateY: {
    range: [0, 360],
    circular: true
  }
}, {
  deceleration: 0.0024
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  box.style[eg.Axes.TRANSFORM] =
    `rotateY(${pos.rotateX}deg) rotateX(${pos.rotateY}deg)`;
});

// 3. Initialize a inputType and connect it
axes.connect("rotateX rotateY", new eg.Axes.PanInput("#area")).connect("rotateX rotateY", new eg.Axes.MoveKeyInput("#area", {scale: [10, -10]}));

// 4. move to position
axes.setTo({
  "rotateX": 40,
  "rotateY": 315
}, 100);
+ + \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 38e8482a..734e4f78 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -5,14 +5,14 @@ Getting Started | Axes - - + +

Getting Started

Browser support​

IE 10+, latest of Chrome/FF/Safari, iOS 7+ and Android 2.3+ (except 3.x)

Quick steps to use:​

1. Set up your HTML​

<div id="area"></div>

2. Load files or import library​

ES5​
<script src="//naver.github.io/egjs-axes/release/latest/axes.pkgd.js"></script>
var Axes = eg.Axes;
var PanInput = Axes.PanInput;
var PinchInput = Axes.PinchInput;
var WheelInput = Axes.WheelInput;
var MoveKeyInput = Axes.MoveKeyInput;
ES6+​
import Axes, {PanInput, PinchInput, WheelInput, MoveKeyInput} from "@egjs/axes";

3. Initialize Axes​

Initialize Axes. specify the axis to be used. -The key of the axis specifies the name to use as the logical virtual coordinate system.

// create eg.Axes with option
const axes = new Axes({
  something1: { range: [0, 100] },
  something2: { range: [0, 100] },
  somethingN: { range: [-200, 200] }
});

4. Attach event handlers​

Axes provides six events.

axes.on({
 "change": evt => /* ... */
});

5. Initialize InputTypes to use​

Create an InputType to associate with the axis of eg.Axes.

Axes provides five inputTypes.

// create inputTypes to use
const panInput = new PanInput("#area");
const wheelInput = new WheelInput("#wArea");
const pinchInput = new PinchInput("#pArea");
const movekeyInput = new MoveKeyInput("#mArea");

6. Connect eg.Axes and InputTypes​

/**
 * [PanInput] When the mouse or touchscreen is down and moved.
 *
 * Connect the 'something2' axis to the mouse or touchscreen x position and
 * connect the 'somethingN' axis to the mouse or touchscreen y position.
 **/
axes.connect(["something2", "somethingN"], panInput); // or axes.connect("something2 somethingN", panInput);
// Connect only one 'something1' axis to the mouse or touchscreen x position.
axes.connect(["something1"], panInput); // or axes.connect("something1", panInput);
// Connect only one 'something2' axis to the mouse or touchscreen y position.
axes.connect(["", "something2"], panInput); // or axes.connect(" something2", panInput);

// [WheelInput] Connect 'something1' axis when the mousewheel is moved.
axes.connect(["something1"], wheelInput); // or axes.connect("something1", wheelInput);

// [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
axes.connect(["something2"], pinchInput); // or axes.connect("something2", pinchInput);

// Connect 'something1' axis to left-right arrow key and 'something2' axis to top-bottom key
axes.connect(["something1", "something2"], movekeyInput); // or axes.connect("something1 something2", panInput);

7. Enjoy!​

You can change the value of the axis through touch screen, mouse or anything else.

- - +The key of the axis specifies the name to use as the logical virtual coordinate system.

// create eg.Axes with option
const axes = new Axes({
  something1: { range: [0, 100] },
  something2: { range: [0, 100] },
  somethingN: { range: [-200, 200] }
});

4. Attach event handlers​

Axes provides six events.

axes.on({
 "change": evt => /* ... */
});

5. Initialize InputTypes to use​

Create an InputType to associate with the axis of eg.Axes.

Axes provides five inputTypes.

// create inputTypes to use
const panInput = new PanInput("#area");
const wheelInput = new WheelInput("#wArea");
const pinchInput = new PinchInput("#pArea");
const movekeyInput = new MoveKeyInput("#mArea");

6. Connect eg.Axes and InputTypes​

/**
 * [PanInput] When the mouse or touchscreen is down and moved.
 *
 * Connect the 'something2' axis to the mouse or touchscreen x position and
 * connect the 'somethingN' axis to the mouse or touchscreen y position.
 **/
axes.connect(["something2", "somethingN"], panInput); // or axes.connect("something2 somethingN", panInput);
// Connect only one 'something1' axis to the mouse or touchscreen x position.
axes.connect(["something1"], panInput); // or axes.connect("something1", panInput);
// Connect only one 'something2' axis to the mouse or touchscreen y position.
axes.connect(["", "something2"], panInput); // or axes.connect(" something2", panInput);

// [WheelInput] Connect 'something1' axis when the mousewheel is moved.
axes.connect(["something1"], wheelInput); // or axes.connect("something1", wheelInput);

// [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
axes.connect(["something2"], pinchInput); // or axes.connect("something2", pinchInput);

// Connect 'something1' axis to left-right arrow key and 'something2' axis to top-bottom key
axes.connect(["something1", "something2"], movekeyInput); // or axes.connect("something1 something2", panInput);

7. Enjoy!​

You can change the value of the axis through touch screen, mouse or anything else.

+ + \ No newline at end of file diff --git a/docs/minimap.html b/docs/minimap.html index 3f9f99f3..39fb562c 100644 --- a/docs/minimap.html +++ b/docs/minimap.html @@ -5,13 +5,13 @@ Mini Map | Axes - - + +
-

Mini Map

You can create a scrollable minimap using two axes.

<div>
  <p>You can create a scrollable minimap using two axes.</p>
  <div style="position:relative">
    <div id="imageView">
      <div id="rawImage"></div>
    </div>
    <div id="minimap">
      <div id="minimap-pointer"></div>
    </div>
  </div>
</div>
// raw-image 1280 * 1677
const RAW_IMAGE_WIDTH = 1280;
const RAW_IMAGE_HEIGHT = 1677;
// mini-map 128 * 167.7
const MINIMAP_WIDTH = 128;
const IMAGE_RATE = RAW_IMAGE_HEIGHT / RAW_IMAGE_WIDTH;

const painting = document.getElementById("rawImage");
const view = document.getElementById("imageView");
const viewWidth = view.getBoundingClientRect().width;
view.style.height = (viewWidth * IMAGE_RATE) + "px";
const viewRect = view.getBoundingClientRect();
const minimap = document.getElementById("minimap"); // 1/10
const minimapRect = minimap.getBoundingClientRect();
const pointer = document.getElementById("minimap-pointer");
const pointerWidth = viewWidth/RAW_IMAGE_WIDTH * MINIMAP_WIDTH;
pointer.style.width = pointerWidth + "px";
pointer.style.height = (pointerWidth * IMAGE_RATE) + "px";
const pointerRect = pointer.getBoundingClientRect();
const scale = [
  (minimapRect.width - pointerRect.width) / (RAW_IMAGE_WIDTH - viewRect.width),
  (minimapRect.height - pointerRect.height) / (RAW_IMAGE_HEIGHT - viewRect.height)
];

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  rawX: {
    range: [0, RAW_IMAGE_WIDTH - viewRect.width],
    bounce: 100
  },
  rawY: {
    range: [0, RAW_IMAGE_HEIGHT - viewRect.height],
    bounce: 100
  }
}, {
  deceleration: 0.0024
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  painting.style[eg.Axes.TRANSFORM] = `translate3d(${-pos.rawX}px, ${-pos.rawY}px, 0)`;
  pointer.style[eg.Axes.TRANSFORM]
    = `translate3d(${pos.rawX * scale[0]}px, ${pos.rawY * scale[1]}px, 0)`;
});

// 3. Initialize a inputType and connect it
axes.connect("rawX rawY", new eg.Axes.PanInput(view, {
  scale: [-1, -1]
})).connect("rawX rawY", new eg.Axes.MoveKeyInput(view, {scale: [10, -10]}));
- - +

Mini Map

You can create a scrollable minimap using two axes.

<div>
  <p>You can create a scrollable minimap using two axes.</p>
  <div style="position:relative">
    <div id="imageView">
      <div id="rawImage"></div>
    </div>
    <div id="minimap">
      <div id="minimap-pointer"></div>
    </div>
  </div>
</div>
// raw-image 1280 * 1677
const RAW_IMAGE_WIDTH = 1280;
const RAW_IMAGE_HEIGHT = 1677;
// mini-map 128 * 167.7
const MINIMAP_WIDTH = 128;
const IMAGE_RATE = RAW_IMAGE_HEIGHT / RAW_IMAGE_WIDTH;

const painting = document.getElementById("rawImage");
const view = document.getElementById("imageView");
const viewWidth = view.getBoundingClientRect().width;
view.style.height = (viewWidth * IMAGE_RATE) + "px";
const viewRect = view.getBoundingClientRect();
const minimap = document.getElementById("minimap"); // 1/10
const minimapRect = minimap.getBoundingClientRect();
const pointer = document.getElementById("minimap-pointer");
const pointerWidth = viewWidth/RAW_IMAGE_WIDTH * MINIMAP_WIDTH;
pointer.style.width = pointerWidth + "px";
pointer.style.height = (pointerWidth * IMAGE_RATE) + "px";
const pointerRect = pointer.getBoundingClientRect();
const scale = [
  (minimapRect.width - pointerRect.width) / (RAW_IMAGE_WIDTH - viewRect.width),
  (minimapRect.height - pointerRect.height) / (RAW_IMAGE_HEIGHT - viewRect.height)
];

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  rawX: {
    range: [0, RAW_IMAGE_WIDTH - viewRect.width],
    bounce: 100
  },
  rawY: {
    range: [0, RAW_IMAGE_HEIGHT - viewRect.height],
    bounce: 100
  }
}, {
  deceleration: 0.0024
});

// 2. attach event handler
axes.on("change", ({pos}) => {
  painting.style[eg.Axes.TRANSFORM] = `translate3d(${-pos.rawX}px, ${-pos.rawY}px, 0)`;
  pointer.style[eg.Axes.TRANSFORM]
    = `translate3d(${pos.rawX * scale[0]}px, ${pos.rawY * scale[1]}px, 0)`;
});

// 3. Initialize a inputType and connect it
axes.connect("rawX rawY", new eg.Axes.PanInput(view, {
  scale: [-1, -1]
})).connect("rawX rawY", new eg.Axes.MoveKeyInput(view, {scale: [10, -10]}));
+ + \ No newline at end of file diff --git a/docs/nestedaxes.html b/docs/nestedaxes.html index 03c12baa..5ff1f97d 100644 --- a/docs/nestedaxes.html +++ b/docs/nestedaxes.html @@ -5,13 +5,13 @@ Nested Axes | Axes - - + +
-
- - +
+ + \ No newline at end of file diff --git a/docs/pulltorefresh.html b/docs/pulltorefresh.html index 3acfa220..7f404ed4 100644 --- a/docs/pulltorefresh.html +++ b/docs/pulltorefresh.html @@ -5,13 +5,13 @@ Pull to Refresh | Axes - - + +
-

Pull to Refresh

You can create a pull-to-refresh UI using one axis.

Pull to prepend
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
Pull to append
<div>
  <p>You can create a pull-to-refresh UI using one axis.</p>
  <div id="pull-contentWrapper">
    <div id="prepend">Pull to prepend</div>
    <ul id="pull-content">
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/1.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/2.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/3.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/4.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/5.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>

      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/6.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/7.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/8.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/9.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/10.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
    </ul>
    <div id="append">Pull to append</div>
  </div>
  <div class="bottomWapper"></div>
</div>
const contentWrapper = document.getElementById("pull-contentWrapper");
const content = document.getElementById("pull-content");
const prepend = document.getElementById("prepend");
const append = document.getElementById("append");

function getInfo(pos) {
  const state = pos > 0 ? (pos - axes.axis.scroll.range[1])/100 : -pos/100;
  return {
    isAdd: state > 0.8,
    isTop: pos < 0,
  };
}

function getMaxRange() {
  return content.getBoundingClientRect().height - contentWrapper.getBoundingClientRect().height
}

function getItem() {
  const el = document.createElement("li");
  el.className = "pull_drw addblinking";
  el.innerHTML = `<div class="pull_im">
      <img src="../image/pulltorefresh/${Math.floor((Math.random() * 50) + 1)}.jpg" width="110"/>
    </div>
    <div class="pull_tx">
      <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
    </div>`;
    return el;
}

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  scroll: {
    range: [0, getMaxRange()],
    bounce: 100
  }
});

// 2. attach event handler
axes.on({
  "change": ({pos}) => {
    content.style[eg.Axes.TRANSFORM] = `translate3d(0, ${-pos.scroll}px, 0)`;
    if (axes.isBounceArea()) {
      const info = getInfo(pos.scroll);
      if (info.isAdd) {
        info.isTop ? (prepend.innerText = "Release to prepend") :
          (append.innerText = "Release to append");
      } else {
        info.isTop ? (prepend.innerText = "Pull to prepend") :
          (append.innerText = "Pull to append");
      }
    }
  },
  "release" : ({depaPos}) => {
    if (axes.isBounceArea()) {
      const info = getInfo(depaPos.scroll);
      if (info.isAdd) {
        const el = getItem();
        info.isTop ?
          content.insertBefore(el, content.firstChild) :
          content.appendChild(el);
        axes.axis.scroll.range[1] = getMaxRange();
      }
    }
  }
});

// 3. Initialize inputTypes and connect it
axes.connect(["", "scroll"], new eg.Axes.PanInput(contentWrapper, {
  scale : [0, -1]
}));
- - +

Pull to Refresh

You can create a pull-to-refresh UI using one axis.

Pull to prepend
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
  • egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
Pull to append
<div>
  <p>You can create a pull-to-refresh UI using one axis.</p>
  <div id="pull-contentWrapper">
    <div id="prepend">Pull to prepend</div>
    <ul id="pull-content">
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/1.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/2.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/3.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/4.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/5.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>

      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/6.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/7.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/8.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/9.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/10.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
    </ul>
    <div id="append">Pull to append</div>
  </div>
  <div class="bottomWapper"></div>
</div>
const contentWrapper = document.getElementById("pull-contentWrapper");
const content = document.getElementById("pull-content");
const prepend = document.getElementById("prepend");
const append = document.getElementById("append");

function getInfo(pos) {
  const state = pos > 0 ? (pos - axes.axis.scroll.range[1])/100 : -pos/100;
  return {
    isAdd: state > 0.8,
    isTop: pos < 0,
  };
}

function getMaxRange() {
  return content.getBoundingClientRect().height - contentWrapper.getBoundingClientRect().height
}

function getItem() {
  const el = document.createElement("li");
  el.className = "pull_drw addblinking";
  el.innerHTML = `<div class="pull_im">
      <img src="../image/pulltorefresh/${Math.floor((Math.random() * 50) + 1)}.jpg" width="110"/>
    </div>
    <div class="pull_tx">
      <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
    </div>`;
    return el;
}

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  scroll: {
    range: [0, getMaxRange()],
    bounce: 100
  }
});

// 2. attach event handler
axes.on({
  "change": ({pos}) => {
    content.style[eg.Axes.TRANSFORM] = `translate3d(0, ${-pos.scroll}px, 0)`;
    if (axes.isBounceArea()) {
      const info = getInfo(pos.scroll);
      if (info.isAdd) {
        info.isTop ? (prepend.innerText = "Release to prepend") :
          (append.innerText = "Release to append");
      } else {
        info.isTop ? (prepend.innerText = "Pull to prepend") :
          (append.innerText = "Pull to append");
      }
    }
  },
  "release" : ({depaPos}) => {
    if (axes.isBounceArea()) {
      const info = getInfo(depaPos.scroll);
      if (info.isAdd) {
        const el = getItem();
        info.isTop ?
          content.insertBefore(el, content.firstChild) :
          content.appendChild(el);
        axes.axis.scroll.range[1] = getMaxRange();
      }
    }
  }
});

// 3. Initialize inputTypes and connect it
axes.connect(["", "scroll"], new eg.Axes.PanInput(contentWrapper, {
  scale : [0, -1]
}));
+ + \ No newline at end of file diff --git a/docs/schedule.html b/docs/schedule.html index 2b3701c5..70ca69a9 100644 --- a/docs/schedule.html +++ b/docs/schedule.html @@ -5,13 +5,13 @@ Schedule | Axes - - + +
-

Schedule

You can control animation while it is playing.

Animation Speed

Run Animation

Update Animation

- - +

Schedule

You can control animation while it is playing.

Animation Speed

Run Animation

Update Animation

+ + \ No newline at end of file diff --git a/docs/subway.html b/docs/subway.html index 8caaa8bc..dc7dfc36 100644 --- a/docs/subway.html +++ b/docs/subway.html @@ -5,13 +5,13 @@ Subway | Axes - - + +
-

Subway

You can create maps that can zoom using three axes.

<div>
  <p>You can create maps that can zoom using three axes.</p>
  <div id="zoomWrapper">
    <img id="subway" src="../image/subway/subway.png"/>
  </div>
</div>
function getZoomedOffset(value, zoom, beforeZoom) {
  return -(value/zoom - value/beforeZoom);
}
const SUPPORT_TOUCH = "ontouchstart" in window;
const IMAGE_SIZE = 3000;
const wrapper = document.getElementById("zoomWrapper");
const wrapperSize = wrapper.getBoundingClientRect().width;
wrapper.style.height = wrapperSize + "px";
const imageView = document.getElementById("subway");
const baseScale = wrapperSize / IMAGE_SIZE;

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  x: {
    range: [0, 0],
    bounce: 100
  },
  y: {
    range: [0, 0],
    bounce: 100
  },
  zoom: {
    range: [baseScale, 1]
  }
}, {
  deceleration: 0.003,
  interrutable: false
}, {
  zoom: baseScale
});

// 2. attach event handler
axes.on("change", ({pos, delta, inputEvent, set}) => {
  if(inputEvent && delta.zoom) {
    const center = SUPPORT_TOUCH ? inputEvent.center : {
      x: inputEvent.layerX,
      y: inputEvent.layerY
    };

    const beforeZoom = pos.zoom - delta.zoom;
    const newX = pos.x + getZoomedOffset(center.x, pos.zoom, beforeZoom);
    const newY = pos.y + getZoomedOffset(center.y, pos.zoom, beforeZoom);
    set({x: newX, y: newY});
    imageView.style[eg.Axes.TRANSFORM] =
      `scale(${pos.zoom}) translate3d(${-newX}px, ${-newY}px, 0)`;

    // change view
    axes.axis.y.range[1] = axes.axis.x.range[1] =
      axes.axis.x.range[1] + getZoomedOffset(wrapperSize, pos.zoom, beforeZoom);
  } else {
    imageView.style[eg.Axes.TRANSFORM] =
      `scale(${pos.zoom}) translate3d(${-pos.x}px, ${-pos.y}px, 0)`;
  }
});

// 3. Initialize inputTypes and connect it
axes.connect("zoom", SUPPORT_TOUCH ?
  new eg.Axes.PinchInput(wrapper) :
  new eg.Axes.WheelInput(wrapper, {
    scale: Math.abs(baseScale)
  })
).connect("x y", new eg.Axes.PanInput(wrapper, {
  scale: [-1, -1]
}));
- - +

Subway

You can create maps that can zoom using three axes.

<div>
  <p>You can create maps that can zoom using three axes.</p>
  <div id="zoomWrapper">
    <img id="subway" src="../image/subway/subway.png"/>
  </div>
</div>
function getZoomedOffset(value, zoom, beforeZoom) {
  return -(value/zoom - value/beforeZoom);
}
const SUPPORT_TOUCH = "ontouchstart" in window;
const IMAGE_SIZE = 3000;
const wrapper = document.getElementById("zoomWrapper");
const wrapperSize = wrapper.getBoundingClientRect().width;
wrapper.style.height = wrapperSize + "px";
const imageView = document.getElementById("subway");
const baseScale = wrapperSize / IMAGE_SIZE;

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  x: {
    range: [0, 0],
    bounce: 100
  },
  y: {
    range: [0, 0],
    bounce: 100
  },
  zoom: {
    range: [baseScale, 1]
  }
}, {
  deceleration: 0.003,
  interrutable: false
}, {
  zoom: baseScale
});

// 2. attach event handler
axes.on("change", ({pos, delta, inputEvent, set}) => {
  if(inputEvent && delta.zoom) {
    const center = SUPPORT_TOUCH ? inputEvent.center : {
      x: inputEvent.layerX,
      y: inputEvent.layerY
    };

    const beforeZoom = pos.zoom - delta.zoom;
    const newX = pos.x + getZoomedOffset(center.x, pos.zoom, beforeZoom);
    const newY = pos.y + getZoomedOffset(center.y, pos.zoom, beforeZoom);
    set({x: newX, y: newY});
    imageView.style[eg.Axes.TRANSFORM] =
      `scale(${pos.zoom}) translate3d(${-newX}px, ${-newY}px, 0)`;

    // change view
    axes.axis.y.range[1] = axes.axis.x.range[1] =
      axes.axis.x.range[1] + getZoomedOffset(wrapperSize, pos.zoom, beforeZoom);
  } else {
    imageView.style[eg.Axes.TRANSFORM] =
      `scale(${pos.zoom}) translate3d(${-pos.x}px, ${-pos.y}px, 0)`;
  }
});

// 3. Initialize inputTypes and connect it
axes.connect("zoom", SUPPORT_TOUCH ?
  new eg.Axes.PinchInput(wrapper) :
  new eg.Axes.WheelInput(wrapper, {
    scale: Math.abs(baseScale)
  })
).connect("x y", new eg.Axes.PanInput(wrapper, {
  scale: [-1, -1]
}));
+ + \ No newline at end of file diff --git a/index.html b/index.html index 0e77c57f..642e85d9 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ Axes - - + +
-
Axes
npm (scoped)LicenseTypescriptGitHub Repo stars
npm install @egjs/axes
You can easily create a UI that responds to user actions.
🚀 Get Started✨ Demos

Framework Ready

Use Axes in your favorite framework!

Demos
- - +
Axes
npm (scoped)LicenseTypescriptGitHub Repo stars
npm install @egjs/axes
You can easily create a UI that responds to user actions.
🚀 Get Started✨ Demos

Framework Ready

Use Axes in your favorite framework!

Demos
+ + \ No newline at end of file diff --git a/main/Frameworks.html b/main/Frameworks.html index 021ff9fe..f03b115d 100644 --- a/main/Frameworks.html +++ b/main/Frameworks.html @@ -5,13 +5,13 @@ - - + +
- - + + \ No newline at end of file diff --git a/search.html b/search.html index ad4894e4..197e5487 100644 --- a/search.html +++ b/search.html @@ -5,13 +5,13 @@ Search the documentation | Axes - - + +
-

Search the documentation

- - +

Search the documentation

+ + \ No newline at end of file