diff --git a/dist/veloxi.js b/dist/veloxi.js index c296b11..33b491f 100644 --- a/dist/veloxi.js +++ b/dist/veloxi.js @@ -1576,7 +1576,7 @@ class pe { a(this, "_elementReader"); a(this, "_temporaryView"); a(this, "_inverseEffect"); - this.id = pt(), this.name = e, this.element = t, this._elementReader = $(t), this._previousRect = this._elementReader.rect, this._viewProps = new ge(this), this._skipFirstRenderFrame = !0, this._layoutId = t.dataset.velLayoutId, this._layoutTransition = !!this._layoutId, this._registry = i, this.element.dataset.velViewId = this.id, this._temporaryView = !1, this._inverseEffect = !1; + this.id = pt(), this.name = e, this.element = t, this._elementReader = $(t), this._previousRect = this._elementReader.rect, this._viewProps = new ge(this), this._skipFirstRenderFrame = !0, this._layoutId = t.dataset.velLayoutId, this._layoutTransition = !1, this._registry = i, this.element.dataset.velViewId = this.id, this._temporaryView = !1, this._inverseEffect = !1; } destroy() { this.element.removeAttribute("data-vel-view-id"), this.element.removeAttribute("data-vel-plugin-id"); diff --git a/dist/veloxi.min.js b/dist/veloxi.min.js index f0120d1..71f591f 100644 --- a/dist/veloxi.min.js +++ b/dist/veloxi.min.js @@ -1,3 +1,3 @@ -(function(g,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(g=typeof globalThis<"u"?globalThis:g||self,f(g.Veloxi={}))})(this,function(g){"use strict";var xe=Object.defineProperty;var Ae=(g,f,V)=>f in g?xe(g,f,{enumerable:!0,configurable:!0,writable:!0,value:V}):g[f]=V;var a=(g,f,V)=>(Ae(g,typeof f!="symbol"?f+"":f,V),V);class f{constructor(t){a(this,"x");a(this,"y");a(this,"target");this.x=t.x,this.y=t.y,this.target=t.target}}class V extends f{}class T extends f{}class C extends f{}class I extends f{}class O{constructor(t){a(this,"pluginId");a(this,"pluginName");a(this,"viewName");a(this,"dataName");a(this,"dataValue");this.event=t,this.pluginId=t.pluginId,this.pluginName=t.pluginName,this.viewName=t.viewName,this.dataName=t.dataName,this.dataValue=t.dataValue}}function xt(u){return u.replace(/(?:^\w|[A-Z]|\b\w)/g,function(t,e){return e===0?t.toLowerCase():t.toUpperCase()}).replace(/\s+/g,"").replace(/-+/g,"")}function At(u){return u.split("").map((t,e)=>t.toUpperCase()===t?`${e!==0?"-":""}${t.toLowerCase()}`:t).join("")}class M{constructor(t){a(this,"node");this.node=t.node}}class z{constructor(t){a(this,"node");this.node=t.node}}class Tt{constructor(t){a(this,"_eventBus");a(this,"_observer");this._eventBus=t,this._observer=new MutationObserver(this._handler.bind(this)),this._observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0})}_handler(t){t.forEach(e=>{e.addedNodes.forEach(n=>{if(!(n instanceof HTMLElement)||n.dataset.velViewId||n.parentElement&&typeof n.parentElement.dataset.velAdded<"u")return;let r=n;if(n.dataset.velView||(r=n.querySelector("[data-vel-view][data-vel-plugin]")),!r)return;this._eventBus.emitEvent(M,{node:r});const o=r.querySelectorAll("[data-vel-plugin]");o.length&&o.forEach(h=>{this._eventBus.emitEvent(M,{node:h})})}),e.removedNodes.forEach(n=>{if(!(n instanceof HTMLElement)||typeof n.dataset.velProcessing<"u")return;const r=n.querySelectorAll("[data-vel-plugin]");r.length&&r.forEach(o=>{this._eventBus.emitEvent(z,{node:o})}),this._eventBus.emitEvent(z,{node:n})});const i=e.attributeName;if(i&&/data-vel-data-.+/gi.test(i)){const n=e.target,r=n.dataset.velPluginId||"",o=n.dataset.velPlugin||"",h=n.dataset.velView||"",c=n.getAttribute(i);if(c&&c!==e.oldValue){const d=xt(i.replace("data-vel-data-",""));this._eventBus.emitEvent(O,{pluginId:r,pluginName:o,viewName:h,dataName:d,dataValue:c})}}})}}class Ct{execute(t){this.call(t)}}class tt extends Ct{constructor(e){super();a(this,"_handler");this._handler=e}call(e){this._handler(e)}}class N{constructor(){a(this,"_listeners",new Map);a(this,"_keyedListeners",new Map)}subscribeToEvent(t,e,i){if(i){this._subscribeToKeyedEvent(t,e,i);return}let s=this._listeners.get(t);s||(s=[],this._listeners.set(t,s)),s.push(new tt(e))}_subscribeToKeyedEvent(t,e,i){let s=this._keyedListeners.get(t);s||(s=new Map,this._keyedListeners.set(t,s));let n=s.get(i);n||(n=[],s.set(i,n)),n.push(new tt(e))}emitEvent(t,e,i){if(i){this._emitKeyedEvent(t,e,i);return}const s=this._listeners.get(t);s&&s.forEach(n=>{n.execute(e)})}_emitKeyedEvent(t,e,i){const s=this._keyedListeners.get(t);if(!s)return;const n=s.get(i);n&&n.forEach(r=>{r.execute(e)})}_convertListener(t){return e=>t(e)}subscribeToPluginReadyEvent(t,e,i=!1){if(i){this.subscribeToEvent(lt,this._convertListener(t),e);return}this.subscribeToEvent(ut,this._convertListener(t),e)}emitPluginReadyEvent(t,e,i=!1){if(i){this.emitEvent(lt,e,t);return}this.emitEvent(ut,e,t)}reset(){this._listeners.clear()}}let It=0;function et(){return It+++""}class it{constructor(t,e,i,s,n,r,o){a(this,"_registry");a(this,"_eventBus");a(this,"_appEventBus");a(this,"_internalEventBus");a(this,"_initialized",!1);a(this,"_config");a(this,"_pluginFactory");a(this,"_pluginName");a(this,"_id");a(this,"_pluginKey");a(this,"_layoutIdViewMapWaitingToEnter");a(this,"_apiData");a(this,"_isReady",!1);this._id=et(),this._pluginFactory=t,this._pluginName=e,this._registry=i,this._eventBus=s,this._appEventBus=n,this._internalEventBus=new N,this._config=r,this._layoutIdViewMapWaitingToEnter=new Map,this._pluginKey=o,this._apiData={},this._appEventBus.subscribeToPluginReadyEvent(()=>{this._isReady=!0},this._pluginName,!0)}get api(){return this._apiData}_setApi(t){this._apiData=t}get pluginName(){return this._pluginName}get pluginFactory(){return this._pluginFactory}get pluginKey(){return this._pluginKey}get id(){return this._id}get config(){return{...this._config}}getViews(t){return t?this._registry.getViewsByNameForPlugin(this,t):this._registry.getViewsForPlugin(this)}getView(t){return t?this._registry.getViewsByNameForPlugin(this,t)[0]:this._registry.getViewsForPlugin(this)[0]}getViewById(t){return this._registry.getViewById(t)}addView(t){this._registry.assignViewToPlugin(t,this)}setInternalEventBus(t){this._internalEventBus=t}get internalBusEvent(){return this._internalEventBus}emit(t,e){this._internalEventBus.emitEvent(t,e)}on(t,e){this._internalEventBus.subscribeToEvent(t,e)}useEventPlugin(t,e={}){const i=this._registry.createPlugin(t,this._eventBus,e);return this._registry.associateEventPluginWithPlugin(this.id,i.id),i}notifyAboutDataChanged(t){this.onDataChanged(t)}onDataChanged(t){}removeView(t){t.onRemoveCallback?this._invokeRemoveCallback(t):this._deleteView(t),this.onViewRemoved(t)}_invokeRemoveCallback(t){const e=this._createTemporaryView(t);requestAnimationFrame(()=>{var i;(i=e.onRemoveCallback)==null||i.call(e,e,()=>{var s,n;if((s=t.onAddCallbacks)!=null&&s.afterRemoved&&t.layoutId){const r=this._layoutIdViewMapWaitingToEnter.get(t.layoutId);(n=r==null?void 0:r.onAddCallbacks)==null||n.afterEnter(r),this._layoutIdViewMapWaitingToEnter.delete(t.layoutId)}this._deleteView(e,!0)}),setTimeout(()=>{e.element.parentElement&&this._deleteView(e,!0)},1e4)})}_deleteView(t,e=!1){(e||!t.layoutId)&&(this._registry.removeViewById(t.id,this.id),t.element.remove())}_createTemporaryView(t){const e=t.previousRect.viewportOffset,i=t.previousRect.size,s=t.rotation.degrees<0?0:Math.sin(t.rotation.radians)*i.height*t.scale.y,n=t.rotation.degrees>0?0:Math.sin(t.rotation.radians)*i.width*t.scale.y,r=t.element.cloneNode(!0);t.element.remove(),r.style.cssText="",r.style.position="absolute",r.style.left=`${e.left+s}px`,r.style.top=`${e.top-n}px`,r.style.width=`${i.width}px`,r.style.height=`${i.height}px`,r.style.transform=` +(function(_,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(_=typeof globalThis<"u"?globalThis:_||self,f(_.Veloxi={}))})(this,function(_){"use strict";var xe=Object.defineProperty;var Ae=(_,f,V)=>f in _?xe(_,f,{enumerable:!0,configurable:!0,writable:!0,value:V}):_[f]=V;var a=(_,f,V)=>(Ae(_,typeof f!="symbol"?f+"":f,V),V);class f{constructor(t){a(this,"x");a(this,"y");a(this,"target");this.x=t.x,this.y=t.y,this.target=t.target}}class V extends f{}class T extends f{}class C extends f{}class I extends f{}class O{constructor(t){a(this,"pluginId");a(this,"pluginName");a(this,"viewName");a(this,"dataName");a(this,"dataValue");this.event=t,this.pluginId=t.pluginId,this.pluginName=t.pluginName,this.viewName=t.viewName,this.dataName=t.dataName,this.dataValue=t.dataValue}}function xt(u){return u.replace(/(?:^\w|[A-Z]|\b\w)/g,function(t,e){return e===0?t.toLowerCase():t.toUpperCase()}).replace(/\s+/g,"").replace(/-+/g,"")}function At(u){return u.split("").map((t,e)=>t.toUpperCase()===t?`${e!==0?"-":""}${t.toLowerCase()}`:t).join("")}class M{constructor(t){a(this,"node");this.node=t.node}}class z{constructor(t){a(this,"node");this.node=t.node}}class Tt{constructor(t){a(this,"_eventBus");a(this,"_observer");this._eventBus=t,this._observer=new MutationObserver(this._handler.bind(this)),this._observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0})}_handler(t){t.forEach(e=>{e.addedNodes.forEach(n=>{if(!(n instanceof HTMLElement)||n.dataset.velViewId||n.parentElement&&typeof n.parentElement.dataset.velAdded<"u")return;let r=n;if(n.dataset.velView||(r=n.querySelector("[data-vel-view][data-vel-plugin]")),!r)return;this._eventBus.emitEvent(M,{node:r});const o=r.querySelectorAll("[data-vel-plugin]");o.length&&o.forEach(h=>{this._eventBus.emitEvent(M,{node:h})})}),e.removedNodes.forEach(n=>{if(!(n instanceof HTMLElement)||typeof n.dataset.velProcessing<"u")return;const r=n.querySelectorAll("[data-vel-plugin]");r.length&&r.forEach(o=>{this._eventBus.emitEvent(z,{node:o})}),this._eventBus.emitEvent(z,{node:n})});const i=e.attributeName;if(i&&/data-vel-data-.+/gi.test(i)){const n=e.target,r=n.dataset.velPluginId||"",o=n.dataset.velPlugin||"",h=n.dataset.velView||"",c=n.getAttribute(i);if(c&&c!==e.oldValue){const d=xt(i.replace("data-vel-data-",""));this._eventBus.emitEvent(O,{pluginId:r,pluginName:o,viewName:h,dataName:d,dataValue:c})}}})}}class Ct{execute(t){this.call(t)}}class tt extends Ct{constructor(e){super();a(this,"_handler");this._handler=e}call(e){this._handler(e)}}class N{constructor(){a(this,"_listeners",new Map);a(this,"_keyedListeners",new Map)}subscribeToEvent(t,e,i){if(i){this._subscribeToKeyedEvent(t,e,i);return}let s=this._listeners.get(t);s||(s=[],this._listeners.set(t,s)),s.push(new tt(e))}_subscribeToKeyedEvent(t,e,i){let s=this._keyedListeners.get(t);s||(s=new Map,this._keyedListeners.set(t,s));let n=s.get(i);n||(n=[],s.set(i,n)),n.push(new tt(e))}emitEvent(t,e,i){if(i){this._emitKeyedEvent(t,e,i);return}const s=this._listeners.get(t);s&&s.forEach(n=>{n.execute(e)})}_emitKeyedEvent(t,e,i){const s=this._keyedListeners.get(t);if(!s)return;const n=s.get(i);n&&n.forEach(r=>{r.execute(e)})}_convertListener(t){return e=>t(e)}subscribeToPluginReadyEvent(t,e,i=!1){if(i){this.subscribeToEvent(lt,this._convertListener(t),e);return}this.subscribeToEvent(ut,this._convertListener(t),e)}emitPluginReadyEvent(t,e,i=!1){if(i){this.emitEvent(lt,e,t);return}this.emitEvent(ut,e,t)}reset(){this._listeners.clear()}}let It=0;function et(){return It+++""}class it{constructor(t,e,i,s,n,r,o){a(this,"_registry");a(this,"_eventBus");a(this,"_appEventBus");a(this,"_internalEventBus");a(this,"_initialized",!1);a(this,"_config");a(this,"_pluginFactory");a(this,"_pluginName");a(this,"_id");a(this,"_pluginKey");a(this,"_layoutIdViewMapWaitingToEnter");a(this,"_apiData");a(this,"_isReady",!1);this._id=et(),this._pluginFactory=t,this._pluginName=e,this._registry=i,this._eventBus=s,this._appEventBus=n,this._internalEventBus=new N,this._config=r,this._layoutIdViewMapWaitingToEnter=new Map,this._pluginKey=o,this._apiData={},this._appEventBus.subscribeToPluginReadyEvent(()=>{this._isReady=!0},this._pluginName,!0)}get api(){return this._apiData}_setApi(t){this._apiData=t}get pluginName(){return this._pluginName}get pluginFactory(){return this._pluginFactory}get pluginKey(){return this._pluginKey}get id(){return this._id}get config(){return{...this._config}}getViews(t){return t?this._registry.getViewsByNameForPlugin(this,t):this._registry.getViewsForPlugin(this)}getView(t){return t?this._registry.getViewsByNameForPlugin(this,t)[0]:this._registry.getViewsForPlugin(this)[0]}getViewById(t){return this._registry.getViewById(t)}addView(t){this._registry.assignViewToPlugin(t,this)}setInternalEventBus(t){this._internalEventBus=t}get internalBusEvent(){return this._internalEventBus}emit(t,e){this._internalEventBus.emitEvent(t,e)}on(t,e){this._internalEventBus.subscribeToEvent(t,e)}useEventPlugin(t,e={}){const i=this._registry.createPlugin(t,this._eventBus,e);return this._registry.associateEventPluginWithPlugin(this.id,i.id),i}notifyAboutDataChanged(t){this.onDataChanged(t)}onDataChanged(t){}removeView(t){t.onRemoveCallback?this._invokeRemoveCallback(t):this._deleteView(t),this.onViewRemoved(t)}_invokeRemoveCallback(t){const e=this._createTemporaryView(t);requestAnimationFrame(()=>{var i;(i=e.onRemoveCallback)==null||i.call(e,e,()=>{var s,n;if((s=t.onAddCallbacks)!=null&&s.afterRemoved&&t.layoutId){const r=this._layoutIdViewMapWaitingToEnter.get(t.layoutId);(n=r==null?void 0:r.onAddCallbacks)==null||n.afterEnter(r),this._layoutIdViewMapWaitingToEnter.delete(t.layoutId)}this._deleteView(e,!0)}),setTimeout(()=>{e.element.parentElement&&this._deleteView(e,!0)},1e4)})}_deleteView(t,e=!1){(e||!t.layoutId)&&(this._registry.removeViewById(t.id,this.id),t.element.remove())}_createTemporaryView(t){const e=t.previousRect.viewportOffset,i=t.previousRect.size,s=t.rotation.degrees<0?0:Math.sin(t.rotation.radians)*i.height*t.scale.y,n=t.rotation.degrees>0?0:Math.sin(t.rotation.radians)*i.width*t.scale.y,r=t.element.cloneNode(!0);t.element.remove(),r.style.cssText="",r.style.position="absolute",r.style.left=`${e.left+s}px`,r.style.top=`${e.top-n}px`,r.style.width=`${i.width}px`,r.style.height=`${i.height}px`,r.style.transform=` scale3d(${t.scale.x}, ${t.scale.y}, 1) rotate(${t.rotation.degrees}deg) - `,r.style.pointerEvents="none",r.dataset.velRemoved="",document.body.appendChild(r);const o=this._registry.createView(r,t.name);return o.setAsTemporaryView(),o.styles.position="absolute",o.styles.left=`${e.left+s}px`,o.styles.top=`${e.top-n}px`,o.rotation.setDegrees(t.rotation.degrees,!1),o.scale.set({x:t.scale.x,y:t.scale.y},!1),o.size.set({width:t.size.width,height:t.size.height},!1),t._copyAnimatorsToAnotherView(o),t.onRemoveCallback&&o.onRemove(t.onRemoveCallback),o}onViewRemoved(t){}notifyAboutViewAdded(t){this.onViewAdded(t),this._invokeAddCallbacks(t)}_invokeAddCallbacks(t){var e,i,s;!((e=t.onAddCallbacks)!=null&&e.onInitialLoad)&&!this._initialized||((i=t.onAddCallbacks)==null||i.beforeEnter(t),!((s=t.onAddCallbacks)!=null&&s.afterRemoved)||!this._initialized?requestAnimationFrame(()=>{var n;(n=t.onAddCallbacks)==null||n.afterEnter(t)}):t.layoutId&&this._layoutIdViewMapWaitingToEnter.set(t.layoutId,t))}onViewAdded(t){}init(){!this._initialized&&this._isReady&&(this.setup(),this._initialized=!0)}setup(){}subscribeToEvents(t){}}class st extends it{isRenderable(){return!0}isInitialized(){return this._initialized}update(t,e){}render(){}addView(t){t.setPluginId(this.id),super.addView(t)}}class B extends it{isRenderable(){return!1}}class nt{constructor(t){a(this,"_plugin");this._plugin=t}get initialized(){return this._plugin.isInitialized()}get config(){return this._plugin.config}setup(t){this._plugin.setup=t}api(t){this._plugin._setApi(t)}update(t){this._plugin.update=t}render(t){this._plugin.render=t}getViews(t){return this._plugin.getViews(t)}getView(t){return this._plugin.getView(t)}getViewById(t){return this._plugin.getViewById(t)}useEventPlugin(t,e={}){return this._plugin.useEventPlugin(t,e)}emit(t,e){this._plugin.emit(t,e)}on(t,e){this._plugin.on(t,e)}onDataChanged(t){this._plugin.onDataChanged=t}onViewRemoved(t){this._plugin.onViewRemoved=t}onViewAdded(t){this._plugin.onViewAdded=t}subscribeToEvents(t){this._plugin.subscribeToEvents=t}}function rt(u,t,e,i,s,n){if(Nt(u))return new u(u,u.pluginName,t,e,i,s,n);const r=new st(u,u.pluginName,t,e,i,s,n),o=new nt(r);return u(o),r}function Nt(u){var t;return((t=u.prototype)==null?void 0:t.constructor.toString().indexOf("class "))===0}class l{constructor(t,e){a(this,"x");a(this,"y");this.x=t,this.y=e}get magnitudeSquared(){return this.x*this.x+this.y*this.y}get magnitude(){return Math.sqrt(this.x*this.x+this.y*this.y)}get unitVector(){const t=new l(0,0),e=this.magnitude;return e!==0&&(t.x=this.x/e,t.y=this.y/e),t}add(t){this.x+=t.x,this.y+=t.y}sub(t){this.x-=t.x,this.y-=t.y}scale(t){this.x*=t,this.y*=t}dot(t){return this.x*t.x+this.y*t.y}equals(t){return this.x===t.x&&this.y===t.y}clone(){return new l(this.x,this.y)}static scale(t,e){return new l(t.x*e,t.y*e)}static sub(t,e){return new l(t.x-e.x,t.y-e.y)}static add(t,e){return new l(t.x+e.x,t.y+e.y)}}function Bt(u,t,e){return Math.min(Math.max(u,t),e)}function Lt(u,t,e){return u+(t-u)*e}function w(u,t){const i=u-t;return Math.abs(i)<=.01}function m(u){let t=u.match(/^([\d.]+)([a-zA-Z%]*)$/);t||(t="0px".match(/^([\d.]+)([a-zA-Z%]*)$/));const e=parseFloat(t[1]),i=t[2];return{value:e,unit:i,valueWithUnit:u}}function St(u,t,e=!1){if(u===t)return!0;if(u.length!==t.length)return!1;for(let i=0;im(i)),e={value:0,unit:"",valueWithUnit:"0"};switch(t.length){case 1:return new x(t[0],t[0],t[0],t[0]);case 2:return new x(t[0],t[1],t[0],t[1]);case 3:return new x(t[0],t[1],t[2],t[1]);case 4:return new x(t[0],t[1],t[3],t[2]);default:return new x(e,e,e,e)}}function Ft(u,t){const e=r(u.topLeft,t),i=r(u.topRight,t),s=r(u.bottomLeft,t),n=r(u.bottomRight,t);return{v:{topLeft:e.v,topRight:i.v,bottomRight:n.v,bottomLeft:s.v},h:{topLeft:e.h,topRight:i.h,bottomRight:n.h,bottomLeft:s.h}};function r(o,h){if(o.unit==="%")return{h:m(`${o.value}%`),v:m(`${o.value}%`)};const c=o.value/h.width*100,d=o.value/h.height*100;return{h:m(`${c}%`),v:m(`${d}%`)}}}class $t{constructor(t){a(this,"_value");this._value=t}get value(){return this._value}equals(t){return w(this.value,t.value)}}function Dt(u){return new $t(parseFloat(u))}class kt{constructor(t,e){a(this,"_x");a(this,"_y");this._x=t,this._y=e}get value(){return new l(this._x,this._y)}}function Ot(u,t){const[e,i]=u.split(" "),s=m(e),n=m(i);return new kt(s.value/t.width,n.value/t.height)}function Mt(u){const t=zt(u),e=Ut(u);return{viewportOffset:{left:Math.round(t.left),top:Math.round(t.top),right:Math.round(t.right),bottom:Math.round(t.bottom)},pageOffset:{top:e.top,left:e.left},size:{width:u.offsetWidth,height:u.offsetHeight}}}function zt(u){const t=u.getBoundingClientRect();return{left:t.left,top:t.top,right:t.right,bottom:t.bottom,width:t.width,height:t.height}}function Ut(u){let t=u,e=0,i=0;for(;t;)e+=t.offsetTop,i+=t.offsetLeft,t=t.offsetParent;return{top:e,left:i}}class qt{constructor(t){a(this,"_rect");a(this,"_computedStyle");this._rect=Mt(t),this._computedStyle=getComputedStyle(t)}read(t){switch(t){case"opacity":return this.opacity;case"borderRadius":return this.borderRadius}}get rect(){return this._rect}get opacity(){return Dt(this._computedStyle.opacity)}get borderRadius(){return U(this._computedStyle.borderRadius)}get origin(){return Ot(this._computedStyle.transformOrigin,this._rect.size)}}function q(u){return new qt(u)}const E=.01,W={speed:15};class Y{constructor(t){a(this,"name","dynamic");a(this,"_config");this._config=t}get config(){return this._config}}class Wt extends Y{update({animatorProp:t,current:e,target:i,dt:s}){const n=l.sub(i,e),r=l.scale(n,this._config.speed);let o=l.add(e,l.scale(r,s));return this._shouldFinish(i,e,r)&&(o=i,requestAnimationFrame(()=>{t.callCompleteCallback()})),t.callUpdateCallback(),o}_shouldFinish(t,e,i){return l.sub(t,e).magnitude{t.callCompleteCallback()})),t.callUpdateCallback(),o}_shouldFinish(t,e,i){return Math.abs(t-e){const o=e[r],h=n.value===0?o.unit:n.unit,d=(n.value-o.value)*this._config.speed,p=o.value+d*s;let _=m(`${p}${h}`);return this._shouldFinish(n.value,o.value,d)&&(_=n,requestAnimationFrame(()=>{t.callCompleteCallback()})),t.callUpdateCallback(),_})}_shouldFinish(t,e,i){return Math.abs(t-e){t.animatorProp.callCompleteCallback()}),t.target}}const j={stiffness:.5,damping:.75,speed:10},R=.01;class H{constructor(t){a(this,"name","spring");a(this,"_config");this._config=t}get config(){return this._config}}class jt extends H{constructor(){super(...arguments);a(this,"_velocity",new l(0,0))}update({animatorProp:e,current:i,target:s,dt:n}){const r=l.scale(l.scale(l.sub(i,s),-1),this._config.stiffness);this._velocity=l.add(this._velocity,r),this._velocity=l.scale(this._velocity,this._config.damping);let o=l.add(i,l.scale(this._velocity,n*this._config.speed));return this._shouldFinish(s,i)&&(o=s,requestAnimationFrame(()=>{e.callCompleteCallback()})),o}_shouldFinish(e,i){return l.sub(e,i).magnitude{e.callCompleteCallback()})),o}_shouldFinish(e,i){return Math.abs(e-i){const h=i[o],c=r.value===0?h.unit:r.unit,d=-(h.value-r.value)*this._config.stiffness;this._velocity+=d,this._velocity*=this._config.damping;const p=h.value+this._velocity*n*this._config.speed;let _=m(`${p}${c}`);return this._shouldFinish(r.value,h.value)&&(_=r,requestAnimationFrame(()=>{e.callCompleteCallback()})),_})}_shouldFinish(e,i){return Math.abs(e-i){t.callCompleteCallback()}),i):l.add(e,l.scale(l.sub(i,e),this._config.ease(n)))}}class Jt extends G{update({animatorProp:t,initial:e,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return w(n,1)?(requestAnimationFrame(()=>{t.callCompleteCallback()}),i):e.map((r,o)=>{const h=i[o],c=h.value===0?r.unit:h.unit,d=r.value+this._config.ease(n)*(i[o].value-r.value);return m(`${d}${c}`)})}}class Qt extends G{update({animatorProp:t,initial:e,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return w(n,1)?(requestAnimationFrame(()=>{t.callCompleteCallback()}),i):e+(i-e)*this._config.ease(n)}}class Z{createAnimatorByName(t,e){switch(t){case"instant":return this.createInstantAnimator();case"dynamic":return this.createDynamicAnimator(e);case"tween":return this.createTweenAnimator(e);case"spring":return this.createSpringAnimator(e)}return this.createInstantAnimator()}}class L extends Z{createInstantAnimator(){return new X}createTweenAnimator(t){return new Zt({...K,...t})}createDynamicAnimator(t){return new Wt({...W,...t})}createSpringAnimator(t){return new jt({...j,...t})}}class te extends Z{createInstantAnimator(){return new X}createTweenAnimator(t){return new Jt({...K,...t})}createDynamicAnimator(t){return new Xt({...W,...t})}createSpringAnimator(t){return new Kt({...j,...t})}}class ot extends Z{createInstantAnimator(){return new X}createDynamicAnimator(t){return new Yt({...W,...t})}createTweenAnimator(t){return new Qt({...K,...t})}createSpringAnimator(t){return new Ht({...j,...t})}}function A(u){return structuredClone(u)}class ee{constructor(t){a(this,"_viewProp");a(this,"_completeCallback");a(this,"_updateCallback");a(this,"_isAnimating");this._viewProp=t,this._isAnimating=!1}set(t,e){this._viewProp.setAnimator(t,e)}get name(){return this._viewProp.getAnimator().name}onComplete(t){this._completeCallback=t}get isAnimating(){return this._isAnimating}markAsAnimating(){this._isAnimating=!0}callCompleteCallback(){var t;(t=this._completeCallback)==null||t.call(this),this._isAnimating=!1}onUpdate(t){this._updateCallback=t}callUpdateCallback(){var t;(t=this._updateCallback)==null||t.call(this)}}class b{constructor(t,e,i){a(this,"_animatorProp");a(this,"_animator");a(this,"_initialValue");a(this,"_previousValue");a(this,"_targetValue");a(this,"_currentValue");a(this,"_hasChanged");a(this,"_view");a(this,"_animatorFactory");this._animatorProp=new ee(this),this._animatorFactory=t,this._initialValue=A(e),this._previousValue=A(e),this._targetValue=A(e),this._currentValue=A(e),this._hasChanged=!1,this._view=i,this._animator=this._animatorFactory.createInstantAnimator()}get isAnimating(){return this.animator.isAnimating}getAnimator(){return this._animator}get animator(){return this._animatorProp}get _rect(){return this._view.rect}get _previousRect(){return this._view.previousRect}setAnimator(t,e){this._animator=this._animatorFactory.createAnimatorByName(t,e)}_setTarget(t,e=!0){var i,s;this._previousValue=A(this._currentValue),this._targetValue=t,e?((s=(i=this._animator).reset)==null||s.call(i),this.animator.markAsAnimating()):this._currentValue=t,this._hasChanged=!0}hasChanged(){return this._hasChanged}update(t,e){}}class ie extends b{constructor(){super(...arguments);a(this,"_invertedBorderRadius");a(this,"_forceStyleUpdateThisFrame",!1)}setFromElementPropValue(e){this._setTarget([e.value.topLeft,e.value.topRight,e.value.bottomRight,e.value.bottomLeft],!0)}get value(){return{topLeft:this._currentValue[0],topRight:this._currentValue[1],bottomRight:this._currentValue[2],bottomLeft:this._currentValue[3]}}get invertedBorderRadius(){return this._invertedBorderRadius}set(e,i=!0){let s;if(typeof e=="string"){const c=U(e.trim());s={topLeft:c.value.topLeft.valueWithUnit,topRight:c.value.topRight.valueWithUnit,bottomRight:c.value.bottomRight.valueWithUnit,bottomLeft:c.value.bottomLeft.valueWithUnit}}else s=e;const n=s.topLeft?m(s.topLeft):this._currentValue[0],r=s.topRight?m(s.topRight):this._currentValue[1],o=s.bottomRight?m(s.bottomRight):this._currentValue[2],h=s.bottomLeft?m(s.bottomLeft):this._currentValue[3];this._setTarget([n,r,o,h],i)}reset(e=!0){this._setTarget(this._initialValue,e)}update(e,i){if(this._forceStyleUpdateThisFrame)this._hasChanged=!0,this._forceStyleUpdateThisFrame=!1;else if(this._view.scale.isAnimating)this._hasChanged=!0;else if(at(this._targetValue,this._currentValue)){this._hasChanged=!at(this._targetValue,this._initialValue);return}this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:this._previousValue,ts:e,dt:i}),this._applyScaleInverse()}applyScaleInverse(){this._forceStyleUpdateThisFrame=!0}_applyScaleInverse(){const e=this._rect.size.width*this._view.scale.x,i=this._rect.size.height*this._view.scale.y;this._invertedBorderRadius=Ft(U(`${this._currentValue[0].valueWithUnit} ${this._currentValue[1].valueWithUnit} ${this._currentValue[2].valueWithUnit} ${this._currentValue[3].valueWithUnit}`).value,{width:e,height:i})}projectStyles(){return this.invertedBorderRadius?`border-radius: ${this.invertedBorderRadius.h.topLeft.valueWithUnit} ${this.invertedBorderRadius.h.topRight.valueWithUnit} ${this.invertedBorderRadius.h.bottomRight.valueWithUnit} ${this.invertedBorderRadius.h.bottomLeft.valueWithUnit} / ${this.invertedBorderRadius.v.topLeft.valueWithUnit} ${this.invertedBorderRadius.v.topRight.valueWithUnit} ${this.invertedBorderRadius.v.bottomRight.valueWithUnit} ${this.invertedBorderRadius.v.bottomLeft.valueWithUnit};`:`border-radius: ${this.value.topLeft.valueWithUnit} ${this.value.topRight.valueWithUnit} ${this.value.bottomRight.valueWithUnit} ${this.value.bottomLeft.valueWithUnit};`}isTransform(){return!1}}class se extends b{setFromElementPropValue(t){this._setTarget(t.value,!0)}get value(){return this._currentValue}set(t,e=!0){this._setTarget(t,e)}reset(t=!0){this._setTarget(1,t)}update(t,e){if(w(this._targetValue,this._currentValue)){this._hasChanged=!w(this._targetValue,this._initialValue);return}this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:this._previousValue,ts:t,dt:e})}projectStyles(){return`opacity: ${this.value};`}isTransform(){return!1}}class ne extends b{get x(){return this._currentValue.x}get y(){return this._currentValue.y}set(t){const i={...{x:this.x,y:this.y},...t};if(i.x<0||i.x>1){console.log(`%c WARNING: ${this._view.name}.origin.x property can only be a value from 0 to 1`,"background: #885500");return}if(i.y<0||i.y>1){console.log(`%c WARNING: ${this._view.name}.origin.y property can only be a value from 0 to 1`,"background: #885500");return}this._setTarget(new l(i.x,i.y),!1)}reset(){this._setTarget(this._initialValue,!1)}projectStyles(){return`transform-origin: ${this.x*100}% ${this.y*100}%;`}isTransform(){return!1}}class re extends b{constructor(){super(...arguments);a(this,"_animateLayoutUpdateNextFrame",!1);a(this,"_parentScaleInverse",new l(1,1))}get x(){return this._currentValue.x+this._rect.pageOffset.left}get y(){return this._currentValue.y+this._rect.pageOffset.top}get initialX(){return this._rect.pageOffset.left}get initialY(){return this._rect.pageOffset.top}progressTo(e){const i=typeof e.x>"u"?this.initialX:e.x,s=typeof e.y>"u"?this.initialY:e.y,n=new l(i,s),r=new l(this.initialX,this.initialY),o=new l(this.x,this.y),h=l.sub(o,r),c=l.sub(n,r);return 1-l.sub(c,h).magnitude/c.magnitude}set(e,i=!0){const n={...{x:this.x,y:this.y},...e};this._setTarget(new l(n.x-this._rect.pageOffset.left,n.y-this._rect.pageOffset.top),i)}reset(e=!0){this._setTarget(new l(0,0),e)}update(e,i){if((this._view.isInverseEffectEnabled||this._view.isLayoutTransitionEnabled)&&!this._view.isTemporaryView&&this._runLayoutTransition(),this._view.isInverseEffectEnabled){const c=this._view._parent,d=c?c.scale.x:1,p=c?c.scale.y:1;this._parentScaleInverse=new l(1/d,1/p),this._parentScaleInverse.equals(new l(1,1))||(this._hasChanged=!0)}if(this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y)return;const s=this._view._parent,n=s?s.scale.x:1,r=s?s.scale.y:1,o=s?s.scale._previousValue.x:1,h=s?s.scale._previousValue.y:1;this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:new l(this._currentValue.x*n,this._currentValue.y*r),target:this._targetValue,initial:new l(this._previousValue.x*o,this._previousValue.y*h),ts:e,dt:i}),this._currentValue=new l(this._currentValue.x/n,this._currentValue.y/r)}_runLayoutTransition(){const e=!(this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y),i=!(this._view.scale._targetValue.x===this._view.scale._currentValue.x&&this._view.scale._targetValue.y===this._view.scale._currentValue.y),s=e||i,n=this._rect.pageOffset.left-this._previousRect.pageOffset.left,r=this._rect.pageOffset.top-this._previousRect.pageOffset.top,o=this._previousRect.size.width/this._rect.size.width,h=this._previousRect.size.height/this._rect.size.height;let c=!1;if(n!==0||r!==0||!Number.isNaN(o)&&o!==1||!Number.isNaN(h)&&h!==1?c=!0:c=(()=>{const d=this._view._parents;for(let p=0;pe.dataset.velViewId).filter(e=>e&&typeof e=="string").map(e=>this._registry.getViewById(e)).filter(e=>!!e)}get _parent(){var i;const t=this.element.parentElement;if(!t)return;const e=t.closest("[data-vel-view-id]");if((i=e==null?void 0:e.dataset)!=null&&i.velViewId)return this._registry.getViewById(e.dataset.velViewId)}get _parents(){var i;const t=[];let e=this.element.parentElement;if(!e)return t;for(e=e.closest("[data-vel-view-id]");e;){const s=e.dataset.velViewId;if(s){const n=this._registry.getViewById(s);n&&t.push(n)}e=(i=e.parentElement)==null?void 0:i.closest("[data-vel-view-id]")}return t}get rotation(){return this._viewProps.rotation}get size(){return this._viewProps.size}get opacity(){return this._viewProps.opacity}get borderRadius(){return this._viewProps.borderRadius}get origin(){return this._viewProps.origin}get data(){const t=this.element.dataset;return Object.keys(t).filter(s=>s.includes("velData")).map(s=>s.replace("velData","")).map(s=>`${s[0].toLowerCase()}${s.slice(1)}`).reduce((s,n)=>{const r=t[`velData${n[0].toUpperCase()}${n.slice(1)}`];return!s[n]&&r&&(s[n]=r),s},{})}get onAddCallbacks(){return this._onAddCallbacks}get onRemoveCallback(){return this._onRemoveCallback}get isLayoutTransitionEnabled(){return this._layoutTransition}get hasLayoutTransitionEnabledForParents(){return this._parents.some(t=>t.isLayoutTransitionEnabled)}get isInverseEffectEnabled(){return this._parents.some(t=>t._inverseEffect)}layoutTransition(t){this._layoutTransition=t,this.inverseEffect(t)}inverseEffect(t){this._inverseEffect=t,t&&this._children.forEach(e=>{if(e.position.animator.name==="instant"){const i=this.viewProps.position.getAnimator();e.position.setAnimator(i.name,i.config)}if(e.scale.animator.name==="instant"){const i=this.viewProps.scale.getAnimator();e.scale.setAnimator(i.name,i.config)}})}setAnimatorsFromParent(){let t=this._parent;for(;t&&!t._inverseEffect;)t=t._parent;if(t){if(this.position.animator.name==="instant"){const e=t.viewProps.position.getAnimator();this.position.setAnimator(e.name,e.config)}if(this.scale.animator.name==="instant"){const e=t.viewProps.scale.getAnimator();this.scale.setAnimator(e.name,e.config)}}}get _isRemoved(){return!this._registry.getViewById(this.id)}setPluginId(t){this.element.dataset.velPluginId=t}hasElement(t){return this.element.contains(t)}getScroll(){let t=this.element,e=0,i=0;for(;t;)e+=t.scrollTop,i+=t.scrollLeft,t=t.offsetParent;return i+=window.scrollX,e+=window.scrollY,{y:e,x:i}}intersects(t,e){const i=this.getScroll(),s={x:this.position.x-i.x,y:this.position.y-i.y};return t>=s.x&&t<=s.x+this.size.widthAfterScale&&e>=s.y&&e<=s.y+this.size.heightAfterScale}overlapsWith(t){const e=t.size.width*t.scale.x,i=t.size.height*t.scale.y,s=this.size.width*this.scale.x,n=this.size.height*this.scale.y;return this.position.xt.position.x&&this.position.yt.position.y}distanceTo(t){const e=new l(this.position.x,this.position.y),i=new l(t.position.x,t.position.y);return l.sub(i,e).magnitude}read(){this._elementReader=q(this.element)}get rect(){return this._elementReader.rect}get previousRect(){return this._previousRect}update(t,e){this._viewProps.allProps().forEach(i=>i.update(t,e))}_updatePreviousRect(){this._previousRect=this._elementReader.rect}setAsTemporaryView(){this._temporaryView=!0}get isTemporaryView(){return this._temporaryView}render(){if(this._isRemoved&&this._skipFirstRenderFrame){this._skipFirstRenderFrame=!1;return}let t="";const e=this._viewProps.allProps(),i=e.filter(n=>n.isTransform()),s=e.filter(n=>!n.isTransform());if(i.some(n=>n.hasChanged())){const n=i.reduce((r,o,h)=>(r+=o.projectStyles(),h===i.length-1&&(r+=";"),r),"transform: ");t+=n}s.forEach(n=>{n.hasChanged()&&(t+=n.projectStyles())}),t+=this._getUserStyles(),this.element.style.cssText=t}_getUserStyles(){return Object.keys(this.styles).reduce((t,e)=>e?t+`${At(e)}: ${this.styles[e]};`:t,"")}markAsAdded(){delete this.element.dataset.velProcessing}onAdd(t){this._onAddCallbacks=t}onRemove(t){this._onRemoveCallback=t}get viewProps(){return this._viewProps}getPropByName(t){return this._viewProps.getPropByName(t)}_copyAnimatorsToAnotherView(t){t.viewProps.allPropNames().forEach(e=>{var s,n;const i=(s=this.viewProps.getPropByName(e))==null?void 0:s.getAnimator();i&&((n=t.viewProps.getPropByName(e))==null||n.setAnimator(i.name,i.config))})}}class ce{constructor(t,e){a(this,"_appEventBus");a(this,"_eventBus");a(this,"_plugins",[]);a(this,"_views",[]);a(this,"_viewsPerPlugin",new Map);a(this,"_viewsToBeCreated",[]);a(this,"_viewsToBeRemoved",[]);a(this,"_viewsCreatedInPreviousFrame",[]);a(this,"_layoutIdToViewMap",new Map);a(this,"_eventPluginsPerPlugin",new Map);this._appEventBus=t,this._eventBus=e}update(){this._handleRemovedViews(),this._handleAddedViews()}associateEventPluginWithPlugin(t,e){let i=this._eventPluginsPerPlugin.get(t);i||(i=[],this._eventPluginsPerPlugin.set(t,i)),i.push(e)}_handleRemovedViews(){const t=this._viewsToBeRemoved.filter(e=>e.dataset.velViewId);t.length&&(t.forEach(e=>{const i=e.dataset.velViewId;i&&this._handleRemoveView(i)}),this._viewsToBeRemoved=[])}_getPluginNameForElement(t){const e=t.dataset.velPlugin;if(e&&e.length>0)return e;const i=t.closest("[data-vel-plugin]");if(i)return i.dataset.velPlugin}_handleAddedViews(){this._viewsCreatedInPreviousFrame.forEach(e=>{e.markAsAdded()}),this._viewsCreatedInPreviousFrame=[];const t=this._viewsToBeCreated.filter(e=>{const i=this._getPluginNameForElement(e);return i?this.getPluginByName(i):!1});t.length!==0&&(t.forEach(e=>{const i=this._getPluginNameForElement(e),s=e.dataset.velView,n=e.dataset.velLayoutId;if(!s||!i)return;const r=this.getPluginByName(i);if(!r)return;let o;n&&this._layoutIdToViewMap.has(n)?(o=this._layoutIdToViewMap.get(n),o.setElement(e),o.setPluginId(r.id),this._createChildrenForView(o,r)):o=this._createNewView(e,s,r),o.isInverseEffectEnabled&&o.setAnimatorsFromParent(),r.notifyAboutViewAdded(o)}),this._viewsToBeCreated=[])}_createNewView(t,e,i){const s=this.createView(t,e);return i.addView(s),s.layoutId&&this._layoutIdToViewMap.set(s.layoutId,s),this._createChildrenForView(s,i),this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api,!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api)})}),s}_createChildrenForView(t,e){const i=t.element.querySelectorAll("*");if(!i.length)return;Array.from(i).filter(n=>{const r=n,o=r.dataset.velPlugin;if(!r.dataset.velView||!o)return!0}).forEach(n=>{const r=n,o=r.dataset.velView?r.dataset.velView:`${t.name}-child`,h=this.createView(n,o);e.addView(h),e.notifyAboutViewAdded(h)})}_handleRemoveView(t){this._plugins.forEach(e=>{if(!this._viewsPerPlugin.get(e.id))return;const s=this._getPluginViewById(e,t);s&&e.removeView(s)})}removeViewById(t,e){this._unassignViewFromPlugin(t,e),this._views=this._views.filter(i=>i.id!==t)}_unassignViewFromPlugin(t,e){const i=this._viewsPerPlugin.get(e);if(!i)return;const s=i.indexOf(t);s!==-1&&i.splice(s,1)}getViewById(t){return this._views.find(e=>e.id===t)}_getPluginById(t){return this._plugins.find(e=>e.id===t)}_getPluginViewById(t,e){return this.getViewsForPlugin(t).find(i=>i.id===e)}destroy(t,e){if(!t){this._destroyAll();return}let i=[];if(t&&t.length>0){const s=this.getPluginByName(t);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(o=>this._getPluginById(o)).filter(o=>typeof o<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._destroyPlugin(s)}),requestAnimationFrame(()=>{e==null||e()})})}_destroyPlugin(t){const e=this.getViewsForPlugin(t);e.forEach(i=>{i.layoutId&&this._layoutIdToViewMap.delete(i.layoutId),i.destroy()}),this._views=this._views.filter(i=>!e.find(s=>s.id===i.id)),this._viewsPerPlugin.delete(t.id),this._plugins=this._plugins.filter(i=>i.id!==t.id)}_destroyAll(){this._plugins=[],this._views=[],this._viewsPerPlugin.clear(),this._viewsToBeCreated=[],this._viewsToBeRemoved=[],this._viewsCreatedInPreviousFrame=[],this._layoutIdToViewMap.clear(),this._eventPluginsPerPlugin.clear()}reset(t,e){let i=[];if(t&&t.length>0){const s=this.getPluginByName(t);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(o=>this._getPluginById(o)).filter(o=>typeof o<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._resetPlugin(s)}),requestAnimationFrame(()=>{e==null||e()})})}_resetPlugin(t){const e=t.config,i=t.pluginFactory,s=t.internalBusEvent,n=!t.isRenderable(),r=this.getViewsForPlugin(t);r.forEach(o=>{o.layoutId&&this._layoutIdToViewMap.delete(o.layoutId),o.destroy()}),this._views=this._views.filter(o=>!r.find(h=>h.id===o.id)),this._viewsPerPlugin.delete(t.id),this._plugins=this._plugins.filter(o=>o.id!==t.id),n||requestAnimationFrame(()=>{this.createPlugin(i,this._eventBus,e).setInternalEventBus(s)})}queueNodeToBeCreated(t){this._viewsToBeCreated.push(t)}queueNodeToBeRemoved(t){this._viewsToBeRemoved.push(t)}notifyPluginAboutDataChange(t){const e=this._plugins.filter(i=>i.id===t.pluginId);!e||!e.length||e.forEach(i=>{i.notifyAboutDataChanged({dataName:t.dataName,dataValue:t.dataValue,viewName:t.viewName})})}getPlugins(){return this._plugins}getRenderablePlugins(){function t(e){return e.isRenderable()}return this._plugins.filter(t)}getPluginByName(t,e){return this._plugins.find(i=>e?i.pluginKey===e&&i.pluginName===t:i.pluginName===t)}getPluginsByName(t,e){return this._plugins.filter(i=>e?i.pluginKey===e&&i.pluginName===t:i.pluginName===t)}hasPlugin(t){return t.pluginName?!!this.getPluginByName(t.pluginName):!1}createPlugin(t,e,i={}){if(!t.pluginName)throw Error(`Plugin ${t.name} must contain a pluginName field`);let s=[];if(t.scope){const o=document.querySelectorAll(`[data-vel-plugin=${t.pluginName}][data-vel-view=${t.scope}]`);o?s=Array.from(o):s=[document.documentElement]}else s=[document.documentElement];const n=s.map(o=>{const h=o.dataset.velPluginKey,c=rt(t,this,e,this._appEventBus,i,h);this._plugins.push(c);let d=[];o!==document.documentElement&&d.push(o);const p=o.querySelectorAll(`[data-vel-plugin=${c.pluginName}]`);return d=[...d,...p],d.length&&d.forEach(_=>{const v=_.dataset.velView;if(!v)return;const y=this._createNewView(_,v,c);c.notifyAboutViewAdded(y)}),c});if(n&&n.length>0)return n[0];const r=rt(t,this,e,this._appEventBus,i);return console.log(`%c WARNING: The plugin "${r.pluginName}" is created but there are no elements using it on the page`,"background: #885500"),r}getViews(){return this._views}createView(t,e){const i=new he(t,e,this);return this._views.push(i),this._viewsCreatedInPreviousFrame.push(i),i}assignViewToPlugin(t,e){this._viewsPerPlugin.has(e.id)||this._viewsPerPlugin.set(e.id,[]);const i=this._viewsPerPlugin.get(e.id);i.includes(t.id)||i.push(t.id)}getViewsForPlugin(t){const e=this._viewsPerPlugin.get(t.id);return e?e.map(s=>this._views.find(n=>n.id===s)).filter(s=>!!s):[]}getViewsByNameForPlugin(t,e){return this.getViewsForPlugin(t).filter(i=>i.name===e)}}class ut{constructor(t){a(this,"pluginApi");this.pluginApi=t.pluginApi}}class lt{constructor(t){a(this,"pluginApi");this.pluginApi=t.pluginApi}}class J{constructor(){a(this,"_previousTime",0);a(this,"_registry");a(this,"_eventBus");a(this,"_appEventBus");this._eventBus=new N,this._appEventBus=new N,this._registry=new ce(this._appEventBus,this._eventBus),new Tt(this._eventBus)}static create(){return new J}addPlugin(t,e={}){this._registry.hasPlugin(t)||this._registry.createPlugin(t,this._eventBus,e)}reset(t,e){this._registry.reset(t,e)}destroy(t,e){this._registry.destroy(t,e)}getPlugin(t,e){let i=typeof t=="string"?t:t.pluginName;const s=this._registry.getPluginByName(i,e);if(!s)throw new Error(`You can't call getPlugin for ${i} with key: ${e} because it does not exist in your app`);return s.api}getPlugins(t,e){let i=typeof t=="string"?t:t.pluginName;const s=this._registry.getPluginsByName(i,e);if(s.length===0)throw new Error(`You can't call getPlugins for ${i} with key: ${e} because they don't exist in your app`);return s.map(n=>n.api)}onPluginEvent(t,e,i){const s=this._registry.getPluginByName(t.pluginName);s&&s.on(e,i)}run(){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",this._start.bind(this)):this._start()}ready(t,e){this._appEventBus.subscribeToPluginReadyEvent(e,t)}_start(){this._setup(),requestAnimationFrame(this._tick.bind(this))}_setup(){this._listenToNativeEvents(),this._subscribeToEvents()}_listenToNativeEvents(){document.addEventListener("click",t=>{this._eventBus.emitEvent(V,{x:t.clientX,y:t.clientY,target:t.target})}),document.addEventListener("pointermove",t=>{this._eventBus.emitEvent(T,{x:t.clientX,y:t.clientY,target:t.target})}),document.addEventListener("pointerdown",t=>{this._eventBus.emitEvent(C,{x:t.clientX,y:t.clientY,target:t.target})}),document.addEventListener("pointerup",t=>{this._eventBus.emitEvent(I,{x:t.clientX,y:t.clientY,target:t.target})})}_tick(t){let e=(t-this._previousTime)/1e3;e>.016&&(e=1/60),this._previousTime=t,this._eventBus.reset(),this._subscribeToEvents(),this._read(),this._update(t,e),this._render(),requestAnimationFrame(this._tick.bind(this))}_subscribeToEvents(){this._eventBus.subscribeToEvent(M,this._onNodeAdded.bind(this)),this._eventBus.subscribeToEvent(z,this._onNodeRemoved.bind(this)),this._eventBus.subscribeToEvent(O,this._onDataChanged.bind(this)),this._registry.getPlugins().forEach(t=>{t.subscribeToEvents(this._eventBus)})}_onNodeAdded({node:t}){this._registry.queueNodeToBeCreated(t)}_onNodeRemoved({node:t}){this._registry.queueNodeToBeRemoved(t)}_onDataChanged(t){this._registry.notifyPluginAboutDataChange(t)}_read(){this._registry.getViews().forEach(t=>{t.read()})}_update(t,e){this._registry.update(),this._registry.getPlugins().slice().reverse().forEach(i=>{i.init()}),this._registry.getRenderablePlugins().forEach(i=>{i.update(t,e)}),this._registry.getViews().forEach(i=>{i.update(t,e)}),this._registry.getViews().forEach(i=>{i._updatePreviousRect()})}_render(){this._registry.getRenderablePlugins().forEach(t=>{t.render()}),this._registry.getViews().forEach(t=>{t.render()})}}function de(){return J.create()}class ht{constructor(t){a(this,"view");a(this,"previousX");a(this,"previousY");a(this,"x");a(this,"y");a(this,"isDragging");a(this,"target");a(this,"directions",[]);a(this,"width");a(this,"height");this.props=t,this.previousX=t.previousX,this.previousY=t.previousY,this.x=t.x,this.y=t.y,this.width=t.width,this.height=t.height,this.view=t.view,this.isDragging=t.isDragging,this.target=t.target,this.directions=t.directions}}class ct extends B{constructor(){super(...arguments);a(this,"_pointerX",0);a(this,"_pointerY",0);a(this,"_initialPointer",new l(0,0));a(this,"_initialPointerPerView",new Map);a(this,"_pointerDownPerView",new Map);a(this,"_targetPerView",new Map);a(this,"_viewPointerPositionLog",new Map)}setup(){document.addEventListener("selectstart",this.onSelect.bind(this))}onSelect(e){this._isDragging&&e.preventDefault()}get _isDragging(){return Array.from(this._pointerDownPerView.values()).some(e=>!!e)}subscribeToEvents(e){e.subscribeToEvent(C,({x:i,y:s,target:n})=>{this._initialPointer=new l(i,s),this.getViews().forEach(r=>{this._pointerDownPerView.set(r.id,r.intersects(i,s)),this._targetPerView.set(r.id,n);const o=new l(i-r.position.x,s-r.position.y);this._pointerX=i,this._pointerY=s,this._initialPointerPerView.set(r.id,o)})}),e.subscribeToEvent(I,()=>{this.getViews().forEach(i=>{this._pointerDownPerView.get(i.id)&&this._initialPointerPerView.get(i.id)&&(this._pointerDownPerView.set(i.id,!1),this._emitEvent(i,[]))})}),e.subscribeToEvent(T,({x:i,y:s})=>{this._pointerX=i,this._pointerY=s,this.getViews().forEach(n=>{if(this._pointerDownPerView.get(n.id)&&this._initialPointerPerView.get(n.id)){this._viewPointerPositionLog.has(n.id)||this._viewPointerPositionLog.set(n.id,[]);const r=new l(i,s),o=this._viewPointerPositionLog.get(n.id);o&&o.push(new l(i,s));const h=o&&o.length>=2?o[o.length-2]:r.clone(),c=this._calculateDirections(h,r);this._emitEvent(n,c)}})})}_emitEvent(e,i){const s=this._viewPointerPositionLog.get(e.id),n=s&&s.length>=2?s[s.length-2]:null,r=this._pointerX-this._initialPointerPerView.get(e.id).x,o=this._pointerY-this._initialPointerPerView.get(e.id).y,h=n?n.x-this._initialPointerPerView.get(e.id).x:r,c=n?n.y-this._initialPointerPerView.get(e.id).y:o,d=this._pointerY-this._initialPointer.y,p=this._pointerX-this._initialPointer.x,_=this._targetPerView.get(e.id);if(!_||!e.hasElement(_))return;const v=this._pointerDownPerView.get(e.id)===!0;v||this._viewPointerPositionLog.clear();const y={view:e,target:_,previousX:h,previousY:c,x:r,y:o,width:p,height:d,isDragging:v,directions:i};this.emit(ht,y)}_calculateDirections(e,i){const s={up:l.sub(new l(e.x,e.y-1),e),down:l.sub(new l(e.x,e.y+1),e),left:l.sub(new l(e.x-1,e.y),e),right:l.sub(new l(e.x+1,e.y),e)},n=l.sub(i,e).unitVector;return[{direction:"up",projection:n.dot(s.up)},{direction:"down",projection:n.dot(s.down)},{direction:"left",projection:n.dot(s.left)},{direction:"right",projection:n.dot(s.right)}].filter(h=>h.projection>0).map(h=>h.direction)}}a(ct,"pluginName","DragEventPlugin");class dt{constructor(t){a(this,"view");a(this,"direction");this.props=t,this.view=t.view,this.direction=t.direction}}class _t extends B{constructor(){super(...arguments);a(this,"_viewIsPointerDownMap",new Map);a(this,"_viewPointerPositionLog",new Map);a(this,"_targetPerView",new Map)}subscribeToEvents(e){e.subscribeToEvent(C,({x:i,y:s,target:n})=>{this.getViews().forEach(r=>{this._targetPerView.set(r.id,n),r.intersects(i,s)&&this._viewIsPointerDownMap.set(r.id,!0)})}),e.subscribeToEvent(T,({x:i,y:s})=>{this.getViews().forEach(n=>{if(!this._viewIsPointerDownMap.get(n.id))return;this._viewPointerPositionLog.has(n.id)||this._viewPointerPositionLog.set(n.id,[]),this._viewPointerPositionLog.get(n.id).push(new l(i,s))})}),e.subscribeToEvent(I,({x:i,y:s})=>{this.getViews().forEach(r=>{if(!this._viewIsPointerDownMap.get(r.id)||!this._viewPointerPositionLog.has(r.id))return;const o=new l(i,s),h=this._viewPointerPositionLog.get(r.id),c=h[h.length-2]||o.clone(),d=this._targetPerView.get(r.id),p=n(c,o);d&&r.hasElement(d)&&p.hasSwiped&&this.emit(dt,{view:r,direction:p.direction}),this._viewPointerPositionLog.set(r.id,[]),this._viewIsPointerDownMap.set(r.id,!1)});function n(r,o){const h={up:l.sub(new l(r.x,r.y-1),r),down:l.sub(new l(r.x,r.y+1),r),left:l.sub(new l(r.x-1,r.y),r),right:l.sub(new l(r.x+1,r.y),r)},c=l.sub(o,r).unitVector,d=["up","down","left","right"],p=[c.dot(h.up),c.dot(h.down),c.dot(h.left),c.dot(h.right)],_=Math.max(...p),v=p.indexOf(_),y=d[v],S=l.sub(o,r).magnitude;return{hasSwiped:c.dot(h[y])*S>30,direction:y}}})}}a(_t,"pluginName","SwipeEventPlugin");class gt{constructor(t){a(this,"view");this.props=t,this.view=t.view}}class pt extends B{subscribeToEvents(t){t.subscribeToEvent(V,({x:e,y:i,target:s})=>{this.getViews().forEach(n=>{const r=s,o=n.element===r||n.element.contains(r);n.intersects(e,i)&&o&&this.emit(gt,{view:n})})})}}a(pt,"pluginName","ClickEventPlugin");function _e(u,t){const e=u.map(t),i=Math.min(...e),s=e.indexOf(i);return u[s]}const ge=Object.freeze(Object.defineProperty({__proto__:null,clamp:Bt,minBy:_e,valueAtPercentage:Lt},Symbol.toStringTag,{value:"Module"})),pe=Object.freeze(Object.defineProperty({__proto__:null,PointerClickEvent:V,PointerDownEvent:C,PointerMoveEvent:T,PointerUpEvent:I},Symbol.toStringTag,{value:"Module"}));g.ClickEvent=gt,g.ClickEventPlugin=pt,g.DataChangedEvent=O,g.DragEvent=ht,g.DragEventPlugin=ct,g.EventBus=N,g.EventPlugin=B,g.Events=pe,g.Plugin=st,g.PluginContext=nt,g.SwipeEvent=dt,g.SwipeEventPlugin=_t,g.Utils=ge,g.createApp=de,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}); + `,r.style.pointerEvents="none",r.dataset.velRemoved="",document.body.appendChild(r);const o=this._registry.createView(r,t.name);return o.setAsTemporaryView(),o.styles.position="absolute",o.styles.left=`${e.left+s}px`,o.styles.top=`${e.top-n}px`,o.rotation.setDegrees(t.rotation.degrees,!1),o.scale.set({x:t.scale.x,y:t.scale.y},!1),o.size.set({width:t.size.width,height:t.size.height},!1),t._copyAnimatorsToAnotherView(o),t.onRemoveCallback&&o.onRemove(t.onRemoveCallback),o}onViewRemoved(t){}notifyAboutViewAdded(t){this.onViewAdded(t),this._invokeAddCallbacks(t)}_invokeAddCallbacks(t){var e,i,s;!((e=t.onAddCallbacks)!=null&&e.onInitialLoad)&&!this._initialized||((i=t.onAddCallbacks)==null||i.beforeEnter(t),!((s=t.onAddCallbacks)!=null&&s.afterRemoved)||!this._initialized?requestAnimationFrame(()=>{var n;(n=t.onAddCallbacks)==null||n.afterEnter(t)}):t.layoutId&&this._layoutIdViewMapWaitingToEnter.set(t.layoutId,t))}onViewAdded(t){}init(){!this._initialized&&this._isReady&&(this.setup(),this._initialized=!0)}setup(){}subscribeToEvents(t){}}class st extends it{isRenderable(){return!0}isInitialized(){return this._initialized}update(t,e){}render(){}addView(t){t.setPluginId(this.id),super.addView(t)}}class B extends it{isRenderable(){return!1}}class nt{constructor(t){a(this,"_plugin");this._plugin=t}get initialized(){return this._plugin.isInitialized()}get config(){return this._plugin.config}setup(t){this._plugin.setup=t}api(t){this._plugin._setApi(t)}update(t){this._plugin.update=t}render(t){this._plugin.render=t}getViews(t){return this._plugin.getViews(t)}getView(t){return this._plugin.getView(t)}getViewById(t){return this._plugin.getViewById(t)}useEventPlugin(t,e={}){return this._plugin.useEventPlugin(t,e)}emit(t,e){this._plugin.emit(t,e)}on(t,e){this._plugin.on(t,e)}onDataChanged(t){this._plugin.onDataChanged=t}onViewRemoved(t){this._plugin.onViewRemoved=t}onViewAdded(t){this._plugin.onViewAdded=t}subscribeToEvents(t){this._plugin.subscribeToEvents=t}}function rt(u,t,e,i,s,n){if(Nt(u))return new u(u,u.pluginName,t,e,i,s,n);const r=new st(u,u.pluginName,t,e,i,s,n),o=new nt(r);return u(o),r}function Nt(u){var t;return((t=u.prototype)==null?void 0:t.constructor.toString().indexOf("class "))===0}class l{constructor(t,e){a(this,"x");a(this,"y");this.x=t,this.y=e}get magnitudeSquared(){return this.x*this.x+this.y*this.y}get magnitude(){return Math.sqrt(this.x*this.x+this.y*this.y)}get unitVector(){const t=new l(0,0),e=this.magnitude;return e!==0&&(t.x=this.x/e,t.y=this.y/e),t}add(t){this.x+=t.x,this.y+=t.y}sub(t){this.x-=t.x,this.y-=t.y}scale(t){this.x*=t,this.y*=t}dot(t){return this.x*t.x+this.y*t.y}equals(t){return this.x===t.x&&this.y===t.y}clone(){return new l(this.x,this.y)}static scale(t,e){return new l(t.x*e,t.y*e)}static sub(t,e){return new l(t.x-e.x,t.y-e.y)}static add(t,e){return new l(t.x+e.x,t.y+e.y)}}function Bt(u,t,e){return Math.min(Math.max(u,t),e)}function Lt(u,t,e){return u+(t-u)*e}function w(u,t){const i=u-t;return Math.abs(i)<=.01}function m(u){let t=u.match(/^([\d.]+)([a-zA-Z%]*)$/);t||(t="0px".match(/^([\d.]+)([a-zA-Z%]*)$/));const e=parseFloat(t[1]),i=t[2];return{value:e,unit:i,valueWithUnit:u}}function St(u,t,e=!1){if(u===t)return!0;if(u.length!==t.length)return!1;for(let i=0;im(i)),e={value:0,unit:"",valueWithUnit:"0"};switch(t.length){case 1:return new x(t[0],t[0],t[0],t[0]);case 2:return new x(t[0],t[1],t[0],t[1]);case 3:return new x(t[0],t[1],t[2],t[1]);case 4:return new x(t[0],t[1],t[3],t[2]);default:return new x(e,e,e,e)}}function Ft(u,t){const e=r(u.topLeft,t),i=r(u.topRight,t),s=r(u.bottomLeft,t),n=r(u.bottomRight,t);return{v:{topLeft:e.v,topRight:i.v,bottomRight:n.v,bottomLeft:s.v},h:{topLeft:e.h,topRight:i.h,bottomRight:n.h,bottomLeft:s.h}};function r(o,h){if(o.unit==="%")return{h:m(`${o.value}%`),v:m(`${o.value}%`)};const c=o.value/h.width*100,d=o.value/h.height*100;return{h:m(`${c}%`),v:m(`${d}%`)}}}class $t{constructor(t){a(this,"_value");this._value=t}get value(){return this._value}equals(t){return w(this.value,t.value)}}function Dt(u){return new $t(parseFloat(u))}class kt{constructor(t,e){a(this,"_x");a(this,"_y");this._x=t,this._y=e}get value(){return new l(this._x,this._y)}}function Ot(u,t){const[e,i]=u.split(" "),s=m(e),n=m(i);return new kt(s.value/t.width,n.value/t.height)}function Mt(u){const t=zt(u),e=Ut(u);return{viewportOffset:{left:Math.round(t.left),top:Math.round(t.top),right:Math.round(t.right),bottom:Math.round(t.bottom)},pageOffset:{top:e.top,left:e.left},size:{width:u.offsetWidth,height:u.offsetHeight}}}function zt(u){const t=u.getBoundingClientRect();return{left:t.left,top:t.top,right:t.right,bottom:t.bottom,width:t.width,height:t.height}}function Ut(u){let t=u,e=0,i=0;for(;t;)e+=t.offsetTop,i+=t.offsetLeft,t=t.offsetParent;return{top:e,left:i}}class qt{constructor(t){a(this,"_rect");a(this,"_computedStyle");this._rect=Mt(t),this._computedStyle=getComputedStyle(t)}read(t){switch(t){case"opacity":return this.opacity;case"borderRadius":return this.borderRadius}}get rect(){return this._rect}get opacity(){return Dt(this._computedStyle.opacity)}get borderRadius(){return U(this._computedStyle.borderRadius)}get origin(){return Ot(this._computedStyle.transformOrigin,this._rect.size)}}function q(u){return new qt(u)}const E=.01,W={speed:15};class Y{constructor(t){a(this,"name","dynamic");a(this,"_config");this._config=t}get config(){return this._config}}class Wt extends Y{update({animatorProp:t,current:e,target:i,dt:s}){const n=l.sub(i,e),r=l.scale(n,this._config.speed);let o=l.add(e,l.scale(r,s));return this._shouldFinish(i,e,r)&&(o=i,requestAnimationFrame(()=>{t.callCompleteCallback()})),t.callUpdateCallback(),o}_shouldFinish(t,e,i){return l.sub(t,e).magnitude{t.callCompleteCallback()})),t.callUpdateCallback(),o}_shouldFinish(t,e,i){return Math.abs(t-e){const o=e[r],h=n.value===0?o.unit:n.unit,d=(n.value-o.value)*this._config.speed,p=o.value+d*s;let g=m(`${p}${h}`);return this._shouldFinish(n.value,o.value,d)&&(g=n,requestAnimationFrame(()=>{t.callCompleteCallback()})),t.callUpdateCallback(),g})}_shouldFinish(t,e,i){return Math.abs(t-e){t.animatorProp.callCompleteCallback()}),t.target}}const j={stiffness:.5,damping:.75,speed:10},R=.01;class H{constructor(t){a(this,"name","spring");a(this,"_config");this._config=t}get config(){return this._config}}class jt extends H{constructor(){super(...arguments);a(this,"_velocity",new l(0,0))}update({animatorProp:e,current:i,target:s,dt:n}){const r=l.scale(l.scale(l.sub(i,s),-1),this._config.stiffness);this._velocity=l.add(this._velocity,r),this._velocity=l.scale(this._velocity,this._config.damping);let o=l.add(i,l.scale(this._velocity,n*this._config.speed));return this._shouldFinish(s,i)&&(o=s,requestAnimationFrame(()=>{e.callCompleteCallback()})),o}_shouldFinish(e,i){return l.sub(e,i).magnitude{e.callCompleteCallback()})),o}_shouldFinish(e,i){return Math.abs(e-i){const h=i[o],c=r.value===0?h.unit:r.unit,d=-(h.value-r.value)*this._config.stiffness;this._velocity+=d,this._velocity*=this._config.damping;const p=h.value+this._velocity*n*this._config.speed;let g=m(`${p}${c}`);return this._shouldFinish(r.value,h.value)&&(g=r,requestAnimationFrame(()=>{e.callCompleteCallback()})),g})}_shouldFinish(e,i){return Math.abs(e-i){t.callCompleteCallback()}),i):l.add(e,l.scale(l.sub(i,e),this._config.ease(n)))}}class Jt extends G{update({animatorProp:t,initial:e,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return w(n,1)?(requestAnimationFrame(()=>{t.callCompleteCallback()}),i):e.map((r,o)=>{const h=i[o],c=h.value===0?r.unit:h.unit,d=r.value+this._config.ease(n)*(i[o].value-r.value);return m(`${d}${c}`)})}}class Qt extends G{update({animatorProp:t,initial:e,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return w(n,1)?(requestAnimationFrame(()=>{t.callCompleteCallback()}),i):e+(i-e)*this._config.ease(n)}}class Z{createAnimatorByName(t,e){switch(t){case"instant":return this.createInstantAnimator();case"dynamic":return this.createDynamicAnimator(e);case"tween":return this.createTweenAnimator(e);case"spring":return this.createSpringAnimator(e)}return this.createInstantAnimator()}}class L extends Z{createInstantAnimator(){return new X}createTweenAnimator(t){return new Zt({...K,...t})}createDynamicAnimator(t){return new Wt({...W,...t})}createSpringAnimator(t){return new jt({...j,...t})}}class te extends Z{createInstantAnimator(){return new X}createTweenAnimator(t){return new Jt({...K,...t})}createDynamicAnimator(t){return new Xt({...W,...t})}createSpringAnimator(t){return new Kt({...j,...t})}}class ot extends Z{createInstantAnimator(){return new X}createDynamicAnimator(t){return new Yt({...W,...t})}createTweenAnimator(t){return new Qt({...K,...t})}createSpringAnimator(t){return new Ht({...j,...t})}}function A(u){return structuredClone(u)}class ee{constructor(t){a(this,"_viewProp");a(this,"_completeCallback");a(this,"_updateCallback");a(this,"_isAnimating");this._viewProp=t,this._isAnimating=!1}set(t,e){this._viewProp.setAnimator(t,e)}get name(){return this._viewProp.getAnimator().name}onComplete(t){this._completeCallback=t}get isAnimating(){return this._isAnimating}markAsAnimating(){this._isAnimating=!0}callCompleteCallback(){var t;(t=this._completeCallback)==null||t.call(this),this._isAnimating=!1}onUpdate(t){this._updateCallback=t}callUpdateCallback(){var t;(t=this._updateCallback)==null||t.call(this)}}class b{constructor(t,e,i){a(this,"_animatorProp");a(this,"_animator");a(this,"_initialValue");a(this,"_previousValue");a(this,"_targetValue");a(this,"_currentValue");a(this,"_hasChanged");a(this,"_view");a(this,"_animatorFactory");this._animatorProp=new ee(this),this._animatorFactory=t,this._initialValue=A(e),this._previousValue=A(e),this._targetValue=A(e),this._currentValue=A(e),this._hasChanged=!1,this._view=i,this._animator=this._animatorFactory.createInstantAnimator()}get isAnimating(){return this.animator.isAnimating}getAnimator(){return this._animator}get animator(){return this._animatorProp}get _rect(){return this._view.rect}get _previousRect(){return this._view.previousRect}setAnimator(t,e){this._animator=this._animatorFactory.createAnimatorByName(t,e)}_setTarget(t,e=!0){var i,s;this._previousValue=A(this._currentValue),this._targetValue=t,e?((s=(i=this._animator).reset)==null||s.call(i),this.animator.markAsAnimating()):this._currentValue=t,this._hasChanged=!0}hasChanged(){return this._hasChanged}update(t,e){}}class ie extends b{constructor(){super(...arguments);a(this,"_invertedBorderRadius");a(this,"_forceStyleUpdateThisFrame",!1)}setFromElementPropValue(e){this._setTarget([e.value.topLeft,e.value.topRight,e.value.bottomRight,e.value.bottomLeft],!0)}get value(){return{topLeft:this._currentValue[0],topRight:this._currentValue[1],bottomRight:this._currentValue[2],bottomLeft:this._currentValue[3]}}get invertedBorderRadius(){return this._invertedBorderRadius}set(e,i=!0){let s;if(typeof e=="string"){const c=U(e.trim());s={topLeft:c.value.topLeft.valueWithUnit,topRight:c.value.topRight.valueWithUnit,bottomRight:c.value.bottomRight.valueWithUnit,bottomLeft:c.value.bottomLeft.valueWithUnit}}else s=e;const n=s.topLeft?m(s.topLeft):this._currentValue[0],r=s.topRight?m(s.topRight):this._currentValue[1],o=s.bottomRight?m(s.bottomRight):this._currentValue[2],h=s.bottomLeft?m(s.bottomLeft):this._currentValue[3];this._setTarget([n,r,o,h],i)}reset(e=!0){this._setTarget(this._initialValue,e)}update(e,i){if(this._forceStyleUpdateThisFrame)this._hasChanged=!0,this._forceStyleUpdateThisFrame=!1;else if(this._view.scale.isAnimating)this._hasChanged=!0;else if(at(this._targetValue,this._currentValue)){this._hasChanged=!at(this._targetValue,this._initialValue);return}this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:this._previousValue,ts:e,dt:i}),this._applyScaleInverse()}applyScaleInverse(){this._forceStyleUpdateThisFrame=!0}_applyScaleInverse(){const e=this._rect.size.width*this._view.scale.x,i=this._rect.size.height*this._view.scale.y;this._invertedBorderRadius=Ft(U(`${this._currentValue[0].valueWithUnit} ${this._currentValue[1].valueWithUnit} ${this._currentValue[2].valueWithUnit} ${this._currentValue[3].valueWithUnit}`).value,{width:e,height:i})}projectStyles(){return this.invertedBorderRadius?`border-radius: ${this.invertedBorderRadius.h.topLeft.valueWithUnit} ${this.invertedBorderRadius.h.topRight.valueWithUnit} ${this.invertedBorderRadius.h.bottomRight.valueWithUnit} ${this.invertedBorderRadius.h.bottomLeft.valueWithUnit} / ${this.invertedBorderRadius.v.topLeft.valueWithUnit} ${this.invertedBorderRadius.v.topRight.valueWithUnit} ${this.invertedBorderRadius.v.bottomRight.valueWithUnit} ${this.invertedBorderRadius.v.bottomLeft.valueWithUnit};`:`border-radius: ${this.value.topLeft.valueWithUnit} ${this.value.topRight.valueWithUnit} ${this.value.bottomRight.valueWithUnit} ${this.value.bottomLeft.valueWithUnit};`}isTransform(){return!1}}class se extends b{setFromElementPropValue(t){this._setTarget(t.value,!0)}get value(){return this._currentValue}set(t,e=!0){this._setTarget(t,e)}reset(t=!0){this._setTarget(1,t)}update(t,e){if(w(this._targetValue,this._currentValue)){this._hasChanged=!w(this._targetValue,this._initialValue);return}this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:this._previousValue,ts:t,dt:e})}projectStyles(){return`opacity: ${this.value};`}isTransform(){return!1}}class ne extends b{get x(){return this._currentValue.x}get y(){return this._currentValue.y}set(t){const i={...{x:this.x,y:this.y},...t};if(i.x<0||i.x>1){console.log(`%c WARNING: ${this._view.name}.origin.x property can only be a value from 0 to 1`,"background: #885500");return}if(i.y<0||i.y>1){console.log(`%c WARNING: ${this._view.name}.origin.y property can only be a value from 0 to 1`,"background: #885500");return}this._setTarget(new l(i.x,i.y),!1)}reset(){this._setTarget(this._initialValue,!1)}projectStyles(){return`transform-origin: ${this.x*100}% ${this.y*100}%;`}isTransform(){return!1}}class re extends b{constructor(){super(...arguments);a(this,"_animateLayoutUpdateNextFrame",!1);a(this,"_parentScaleInverse",new l(1,1))}get x(){return this._currentValue.x+this._rect.pageOffset.left}get y(){return this._currentValue.y+this._rect.pageOffset.top}get initialX(){return this._rect.pageOffset.left}get initialY(){return this._rect.pageOffset.top}progressTo(e){const i=typeof e.x>"u"?this.initialX:e.x,s=typeof e.y>"u"?this.initialY:e.y,n=new l(i,s),r=new l(this.initialX,this.initialY),o=new l(this.x,this.y),h=l.sub(o,r),c=l.sub(n,r);return 1-l.sub(c,h).magnitude/c.magnitude}set(e,i=!0){const n={...{x:this.x,y:this.y},...e};this._setTarget(new l(n.x-this._rect.pageOffset.left,n.y-this._rect.pageOffset.top),i)}reset(e=!0){this._setTarget(new l(0,0),e)}update(e,i){if((this._view.isInverseEffectEnabled||this._view.isLayoutTransitionEnabled)&&!this._view.isTemporaryView&&this._runLayoutTransition(),this._view.isInverseEffectEnabled){const c=this._view._parent,d=c?c.scale.x:1,p=c?c.scale.y:1;this._parentScaleInverse=new l(1/d,1/p),this._parentScaleInverse.equals(new l(1,1))||(this._hasChanged=!0)}if(this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y)return;const s=this._view._parent,n=s?s.scale.x:1,r=s?s.scale.y:1,o=s?s.scale._previousValue.x:1,h=s?s.scale._previousValue.y:1;this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:new l(this._currentValue.x*n,this._currentValue.y*r),target:this._targetValue,initial:new l(this._previousValue.x*o,this._previousValue.y*h),ts:e,dt:i}),this._currentValue=new l(this._currentValue.x/n,this._currentValue.y/r)}_runLayoutTransition(){const e=!(this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y),i=!(this._view.scale._targetValue.x===this._view.scale._currentValue.x&&this._view.scale._targetValue.y===this._view.scale._currentValue.y),s=e||i,n=this._rect.pageOffset.left-this._previousRect.pageOffset.left,r=this._rect.pageOffset.top-this._previousRect.pageOffset.top,o=this._previousRect.size.width/this._rect.size.width,h=this._previousRect.size.height/this._rect.size.height;let c=!1;if(n!==0||r!==0||!Number.isNaN(o)&&o!==1||!Number.isNaN(h)&&h!==1?c=!0:c=(()=>{const d=this._view._parents;for(let p=0;pe.dataset.velViewId).filter(e=>e&&typeof e=="string").map(e=>this._registry.getViewById(e)).filter(e=>!!e)}get _parent(){var i;const t=this.element.parentElement;if(!t)return;const e=t.closest("[data-vel-view-id]");if((i=e==null?void 0:e.dataset)!=null&&i.velViewId)return this._registry.getViewById(e.dataset.velViewId)}get _parents(){var i;const t=[];let e=this.element.parentElement;if(!e)return t;for(e=e.closest("[data-vel-view-id]");e;){const s=e.dataset.velViewId;if(s){const n=this._registry.getViewById(s);n&&t.push(n)}e=(i=e.parentElement)==null?void 0:i.closest("[data-vel-view-id]")}return t}get rotation(){return this._viewProps.rotation}get size(){return this._viewProps.size}get opacity(){return this._viewProps.opacity}get borderRadius(){return this._viewProps.borderRadius}get origin(){return this._viewProps.origin}get data(){const t=this.element.dataset;return Object.keys(t).filter(s=>s.includes("velData")).map(s=>s.replace("velData","")).map(s=>`${s[0].toLowerCase()}${s.slice(1)}`).reduce((s,n)=>{const r=t[`velData${n[0].toUpperCase()}${n.slice(1)}`];return!s[n]&&r&&(s[n]=r),s},{})}get onAddCallbacks(){return this._onAddCallbacks}get onRemoveCallback(){return this._onRemoveCallback}get isLayoutTransitionEnabled(){return this._layoutTransition}get hasLayoutTransitionEnabledForParents(){return this._parents.some(t=>t.isLayoutTransitionEnabled)}get isInverseEffectEnabled(){return this._parents.some(t=>t._inverseEffect)}layoutTransition(t){this._layoutTransition=t,this.inverseEffect(t)}inverseEffect(t){this._inverseEffect=t,t&&this._children.forEach(e=>{if(e.position.animator.name==="instant"){const i=this.viewProps.position.getAnimator();e.position.setAnimator(i.name,i.config)}if(e.scale.animator.name==="instant"){const i=this.viewProps.scale.getAnimator();e.scale.setAnimator(i.name,i.config)}})}setAnimatorsFromParent(){let t=this._parent;for(;t&&!t._inverseEffect;)t=t._parent;if(t){if(this.position.animator.name==="instant"){const e=t.viewProps.position.getAnimator();this.position.setAnimator(e.name,e.config)}if(this.scale.animator.name==="instant"){const e=t.viewProps.scale.getAnimator();this.scale.setAnimator(e.name,e.config)}}}get _isRemoved(){return!this._registry.getViewById(this.id)}setPluginId(t){this.element.dataset.velPluginId=t}hasElement(t){return this.element.contains(t)}getScroll(){let t=this.element,e=0,i=0;for(;t;)e+=t.scrollTop,i+=t.scrollLeft,t=t.offsetParent;return i+=window.scrollX,e+=window.scrollY,{y:e,x:i}}intersects(t,e){const i=this.getScroll(),s={x:this.position.x-i.x,y:this.position.y-i.y};return t>=s.x&&t<=s.x+this.size.widthAfterScale&&e>=s.y&&e<=s.y+this.size.heightAfterScale}overlapsWith(t){const e=t.size.width*t.scale.x,i=t.size.height*t.scale.y,s=this.size.width*this.scale.x,n=this.size.height*this.scale.y;return this.position.xt.position.x&&this.position.yt.position.y}distanceTo(t){const e=new l(this.position.x,this.position.y),i=new l(t.position.x,t.position.y);return l.sub(i,e).magnitude}read(){this._elementReader=q(this.element)}get rect(){return this._elementReader.rect}get previousRect(){return this._previousRect}update(t,e){this._viewProps.allProps().forEach(i=>i.update(t,e))}_updatePreviousRect(){this._previousRect=this._elementReader.rect}setAsTemporaryView(){this._temporaryView=!0}get isTemporaryView(){return this._temporaryView}render(){if(this._isRemoved&&this._skipFirstRenderFrame){this._skipFirstRenderFrame=!1;return}let t="";const e=this._viewProps.allProps(),i=e.filter(n=>n.isTransform()),s=e.filter(n=>!n.isTransform());if(i.some(n=>n.hasChanged())){const n=i.reduce((r,o,h)=>(r+=o.projectStyles(),h===i.length-1&&(r+=";"),r),"transform: ");t+=n}s.forEach(n=>{n.hasChanged()&&(t+=n.projectStyles())}),t+=this._getUserStyles(),this.element.style.cssText=t}_getUserStyles(){return Object.keys(this.styles).reduce((t,e)=>e?t+`${At(e)}: ${this.styles[e]};`:t,"")}markAsAdded(){delete this.element.dataset.velProcessing}onAdd(t){this._onAddCallbacks=t}onRemove(t){this._onRemoveCallback=t}get viewProps(){return this._viewProps}getPropByName(t){return this._viewProps.getPropByName(t)}_copyAnimatorsToAnotherView(t){t.viewProps.allPropNames().forEach(e=>{var s,n;const i=(s=this.viewProps.getPropByName(e))==null?void 0:s.getAnimator();i&&((n=t.viewProps.getPropByName(e))==null||n.setAnimator(i.name,i.config))})}}class ce{constructor(t,e){a(this,"_appEventBus");a(this,"_eventBus");a(this,"_plugins",[]);a(this,"_views",[]);a(this,"_viewsPerPlugin",new Map);a(this,"_viewsToBeCreated",[]);a(this,"_viewsToBeRemoved",[]);a(this,"_viewsCreatedInPreviousFrame",[]);a(this,"_layoutIdToViewMap",new Map);a(this,"_eventPluginsPerPlugin",new Map);this._appEventBus=t,this._eventBus=e}update(){this._handleRemovedViews(),this._handleAddedViews()}associateEventPluginWithPlugin(t,e){let i=this._eventPluginsPerPlugin.get(t);i||(i=[],this._eventPluginsPerPlugin.set(t,i)),i.push(e)}_handleRemovedViews(){const t=this._viewsToBeRemoved.filter(e=>e.dataset.velViewId);t.length&&(t.forEach(e=>{const i=e.dataset.velViewId;i&&this._handleRemoveView(i)}),this._viewsToBeRemoved=[])}_getPluginNameForElement(t){const e=t.dataset.velPlugin;if(e&&e.length>0)return e;const i=t.closest("[data-vel-plugin]");if(i)return i.dataset.velPlugin}_handleAddedViews(){this._viewsCreatedInPreviousFrame.forEach(e=>{e.markAsAdded()}),this._viewsCreatedInPreviousFrame=[];const t=this._viewsToBeCreated.filter(e=>{const i=this._getPluginNameForElement(e);return i?this.getPluginByName(i):!1});t.length!==0&&(t.forEach(e=>{const i=this._getPluginNameForElement(e),s=e.dataset.velView,n=e.dataset.velLayoutId;if(!s||!i)return;const r=this.getPluginByName(i);if(!r)return;let o;n&&this._layoutIdToViewMap.has(n)?(o=this._layoutIdToViewMap.get(n),o.setElement(e),o.setPluginId(r.id),this._createChildrenForView(o,r)):o=this._createNewView(e,s,r),o.isInverseEffectEnabled&&o.setAnimatorsFromParent(),r.notifyAboutViewAdded(o)}),this._viewsToBeCreated=[])}_createNewView(t,e,i){const s=this.createView(t,e);return i.addView(s),s.layoutId&&this._layoutIdToViewMap.set(s.layoutId,s),this._createChildrenForView(s,i),this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api,!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api)})}),s}_createChildrenForView(t,e){const i=t.element.querySelectorAll("*");if(!i.length)return;Array.from(i).filter(n=>{const r=n,o=r.dataset.velPlugin;if(!r.dataset.velView||!o)return!0}).forEach(n=>{const r=n,o=r.dataset.velView?r.dataset.velView:`${t.name}-child`,h=this.createView(n,o);e.addView(h),e.notifyAboutViewAdded(h)})}_handleRemoveView(t){this._plugins.forEach(e=>{if(!this._viewsPerPlugin.get(e.id))return;const s=this._getPluginViewById(e,t);s&&e.removeView(s)})}removeViewById(t,e){this._unassignViewFromPlugin(t,e),this._views=this._views.filter(i=>i.id!==t)}_unassignViewFromPlugin(t,e){const i=this._viewsPerPlugin.get(e);if(!i)return;const s=i.indexOf(t);s!==-1&&i.splice(s,1)}getViewById(t){return this._views.find(e=>e.id===t)}_getPluginById(t){return this._plugins.find(e=>e.id===t)}_getPluginViewById(t,e){return this.getViewsForPlugin(t).find(i=>i.id===e)}destroy(t,e){if(!t){this._destroyAll();return}let i=[];if(t&&t.length>0){const s=this.getPluginByName(t);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(o=>this._getPluginById(o)).filter(o=>typeof o<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._destroyPlugin(s)}),requestAnimationFrame(()=>{e==null||e()})})}_destroyPlugin(t){const e=this.getViewsForPlugin(t);e.forEach(i=>{i.layoutId&&this._layoutIdToViewMap.delete(i.layoutId),i.destroy()}),this._views=this._views.filter(i=>!e.find(s=>s.id===i.id)),this._viewsPerPlugin.delete(t.id),this._plugins=this._plugins.filter(i=>i.id!==t.id)}_destroyAll(){this._plugins=[],this._views=[],this._viewsPerPlugin.clear(),this._viewsToBeCreated=[],this._viewsToBeRemoved=[],this._viewsCreatedInPreviousFrame=[],this._layoutIdToViewMap.clear(),this._eventPluginsPerPlugin.clear()}reset(t,e){let i=[];if(t&&t.length>0){const s=this.getPluginByName(t);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(o=>this._getPluginById(o)).filter(o=>typeof o<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._resetPlugin(s)}),requestAnimationFrame(()=>{e==null||e()})})}_resetPlugin(t){const e=t.config,i=t.pluginFactory,s=t.internalBusEvent,n=!t.isRenderable(),r=this.getViewsForPlugin(t);r.forEach(o=>{o.layoutId&&this._layoutIdToViewMap.delete(o.layoutId),o.destroy()}),this._views=this._views.filter(o=>!r.find(h=>h.id===o.id)),this._viewsPerPlugin.delete(t.id),this._plugins=this._plugins.filter(o=>o.id!==t.id),n||requestAnimationFrame(()=>{this.createPlugin(i,this._eventBus,e).setInternalEventBus(s)})}queueNodeToBeCreated(t){this._viewsToBeCreated.push(t)}queueNodeToBeRemoved(t){this._viewsToBeRemoved.push(t)}notifyPluginAboutDataChange(t){const e=this._plugins.filter(i=>i.id===t.pluginId);!e||!e.length||e.forEach(i=>{i.notifyAboutDataChanged({dataName:t.dataName,dataValue:t.dataValue,viewName:t.viewName})})}getPlugins(){return this._plugins}getRenderablePlugins(){function t(e){return e.isRenderable()}return this._plugins.filter(t)}getPluginByName(t,e){return this._plugins.find(i=>e?i.pluginKey===e&&i.pluginName===t:i.pluginName===t)}getPluginsByName(t,e){return this._plugins.filter(i=>e?i.pluginKey===e&&i.pluginName===t:i.pluginName===t)}hasPlugin(t){return t.pluginName?!!this.getPluginByName(t.pluginName):!1}createPlugin(t,e,i={}){if(!t.pluginName)throw Error(`Plugin ${t.name} must contain a pluginName field`);let s=[];if(t.scope){const o=document.querySelectorAll(`[data-vel-plugin=${t.pluginName}][data-vel-view=${t.scope}]`);o?s=Array.from(o):s=[document.documentElement]}else s=[document.documentElement];const n=s.map(o=>{const h=o.dataset.velPluginKey,c=rt(t,this,e,this._appEventBus,i,h);this._plugins.push(c);let d=[];o!==document.documentElement&&d.push(o);const p=o.querySelectorAll(`[data-vel-plugin=${c.pluginName}]`);return d=[...d,...p],d.length&&d.forEach(g=>{const v=g.dataset.velView;if(!v)return;const y=this._createNewView(g,v,c);c.notifyAboutViewAdded(y)}),c});if(n&&n.length>0)return n[0];const r=rt(t,this,e,this._appEventBus,i);return console.log(`%c WARNING: The plugin "${r.pluginName}" is created but there are no elements using it on the page`,"background: #885500"),r}getViews(){return this._views}createView(t,e){const i=new he(t,e,this);return this._views.push(i),this._viewsCreatedInPreviousFrame.push(i),i}assignViewToPlugin(t,e){this._viewsPerPlugin.has(e.id)||this._viewsPerPlugin.set(e.id,[]);const i=this._viewsPerPlugin.get(e.id);i.includes(t.id)||i.push(t.id)}getViewsForPlugin(t){const e=this._viewsPerPlugin.get(t.id);return e?e.map(s=>this._views.find(n=>n.id===s)).filter(s=>!!s):[]}getViewsByNameForPlugin(t,e){return this.getViewsForPlugin(t).filter(i=>i.name===e)}}class ut{constructor(t){a(this,"pluginApi");this.pluginApi=t.pluginApi}}class lt{constructor(t){a(this,"pluginApi");this.pluginApi=t.pluginApi}}class J{constructor(){a(this,"_previousTime",0);a(this,"_registry");a(this,"_eventBus");a(this,"_appEventBus");this._eventBus=new N,this._appEventBus=new N,this._registry=new ce(this._appEventBus,this._eventBus),new Tt(this._eventBus)}static create(){return new J}addPlugin(t,e={}){this._registry.hasPlugin(t)||this._registry.createPlugin(t,this._eventBus,e)}reset(t,e){this._registry.reset(t,e)}destroy(t,e){this._registry.destroy(t,e)}getPlugin(t,e){let i=typeof t=="string"?t:t.pluginName;const s=this._registry.getPluginByName(i,e);if(!s)throw new Error(`You can't call getPlugin for ${i} with key: ${e} because it does not exist in your app`);return s.api}getPlugins(t,e){let i=typeof t=="string"?t:t.pluginName;const s=this._registry.getPluginsByName(i,e);if(s.length===0)throw new Error(`You can't call getPlugins for ${i} with key: ${e} because they don't exist in your app`);return s.map(n=>n.api)}onPluginEvent(t,e,i){const s=this._registry.getPluginByName(t.pluginName);s&&s.on(e,i)}run(){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",this._start.bind(this)):this._start()}ready(t,e){this._appEventBus.subscribeToPluginReadyEvent(e,t)}_start(){this._setup(),requestAnimationFrame(this._tick.bind(this))}_setup(){this._listenToNativeEvents(),this._subscribeToEvents()}_listenToNativeEvents(){document.addEventListener("click",t=>{this._eventBus.emitEvent(V,{x:t.clientX,y:t.clientY,target:t.target})}),document.addEventListener("pointermove",t=>{this._eventBus.emitEvent(T,{x:t.clientX,y:t.clientY,target:t.target})}),document.addEventListener("pointerdown",t=>{this._eventBus.emitEvent(C,{x:t.clientX,y:t.clientY,target:t.target})}),document.addEventListener("pointerup",t=>{this._eventBus.emitEvent(I,{x:t.clientX,y:t.clientY,target:t.target})})}_tick(t){let e=(t-this._previousTime)/1e3;e>.016&&(e=1/60),this._previousTime=t,this._eventBus.reset(),this._subscribeToEvents(),this._read(),this._update(t,e),this._render(),requestAnimationFrame(this._tick.bind(this))}_subscribeToEvents(){this._eventBus.subscribeToEvent(M,this._onNodeAdded.bind(this)),this._eventBus.subscribeToEvent(z,this._onNodeRemoved.bind(this)),this._eventBus.subscribeToEvent(O,this._onDataChanged.bind(this)),this._registry.getPlugins().forEach(t=>{t.subscribeToEvents(this._eventBus)})}_onNodeAdded({node:t}){this._registry.queueNodeToBeCreated(t)}_onNodeRemoved({node:t}){this._registry.queueNodeToBeRemoved(t)}_onDataChanged(t){this._registry.notifyPluginAboutDataChange(t)}_read(){this._registry.getViews().forEach(t=>{t.read()})}_update(t,e){this._registry.update(),this._registry.getPlugins().slice().reverse().forEach(i=>{i.init()}),this._registry.getRenderablePlugins().forEach(i=>{i.update(t,e)}),this._registry.getViews().forEach(i=>{i.update(t,e)}),this._registry.getViews().forEach(i=>{i._updatePreviousRect()})}_render(){this._registry.getRenderablePlugins().forEach(t=>{t.render()}),this._registry.getViews().forEach(t=>{t.render()})}}function de(){return J.create()}class ht{constructor(t){a(this,"view");a(this,"previousX");a(this,"previousY");a(this,"x");a(this,"y");a(this,"isDragging");a(this,"target");a(this,"directions",[]);a(this,"width");a(this,"height");this.props=t,this.previousX=t.previousX,this.previousY=t.previousY,this.x=t.x,this.y=t.y,this.width=t.width,this.height=t.height,this.view=t.view,this.isDragging=t.isDragging,this.target=t.target,this.directions=t.directions}}class ct extends B{constructor(){super(...arguments);a(this,"_pointerX",0);a(this,"_pointerY",0);a(this,"_initialPointer",new l(0,0));a(this,"_initialPointerPerView",new Map);a(this,"_pointerDownPerView",new Map);a(this,"_targetPerView",new Map);a(this,"_viewPointerPositionLog",new Map)}setup(){document.addEventListener("selectstart",this.onSelect.bind(this))}onSelect(e){this._isDragging&&e.preventDefault()}get _isDragging(){return Array.from(this._pointerDownPerView.values()).some(e=>!!e)}subscribeToEvents(e){e.subscribeToEvent(C,({x:i,y:s,target:n})=>{this._initialPointer=new l(i,s),this.getViews().forEach(r=>{this._pointerDownPerView.set(r.id,r.intersects(i,s)),this._targetPerView.set(r.id,n);const o=new l(i-r.position.x,s-r.position.y);this._pointerX=i,this._pointerY=s,this._initialPointerPerView.set(r.id,o)})}),e.subscribeToEvent(I,()=>{this.getViews().forEach(i=>{this._pointerDownPerView.get(i.id)&&this._initialPointerPerView.get(i.id)&&(this._pointerDownPerView.set(i.id,!1),this._emitEvent(i,[]))})}),e.subscribeToEvent(T,({x:i,y:s})=>{this._pointerX=i,this._pointerY=s,this.getViews().forEach(n=>{if(this._pointerDownPerView.get(n.id)&&this._initialPointerPerView.get(n.id)){this._viewPointerPositionLog.has(n.id)||this._viewPointerPositionLog.set(n.id,[]);const r=new l(i,s),o=this._viewPointerPositionLog.get(n.id);o&&o.push(new l(i,s));const h=o&&o.length>=2?o[o.length-2]:r.clone(),c=this._calculateDirections(h,r);this._emitEvent(n,c)}})})}_emitEvent(e,i){const s=this._viewPointerPositionLog.get(e.id),n=s&&s.length>=2?s[s.length-2]:null,r=this._pointerX-this._initialPointerPerView.get(e.id).x,o=this._pointerY-this._initialPointerPerView.get(e.id).y,h=n?n.x-this._initialPointerPerView.get(e.id).x:r,c=n?n.y-this._initialPointerPerView.get(e.id).y:o,d=this._pointerY-this._initialPointer.y,p=this._pointerX-this._initialPointer.x,g=this._targetPerView.get(e.id);if(!g||!e.hasElement(g))return;const v=this._pointerDownPerView.get(e.id)===!0;v||this._viewPointerPositionLog.clear();const y={view:e,target:g,previousX:h,previousY:c,x:r,y:o,width:p,height:d,isDragging:v,directions:i};this.emit(ht,y)}_calculateDirections(e,i){const s={up:l.sub(new l(e.x,e.y-1),e),down:l.sub(new l(e.x,e.y+1),e),left:l.sub(new l(e.x-1,e.y),e),right:l.sub(new l(e.x+1,e.y),e)},n=l.sub(i,e).unitVector;return[{direction:"up",projection:n.dot(s.up)},{direction:"down",projection:n.dot(s.down)},{direction:"left",projection:n.dot(s.left)},{direction:"right",projection:n.dot(s.right)}].filter(h=>h.projection>0).map(h=>h.direction)}}a(ct,"pluginName","DragEventPlugin");class dt{constructor(t){a(this,"view");a(this,"direction");this.props=t,this.view=t.view,this.direction=t.direction}}class gt extends B{constructor(){super(...arguments);a(this,"_viewIsPointerDownMap",new Map);a(this,"_viewPointerPositionLog",new Map);a(this,"_targetPerView",new Map)}subscribeToEvents(e){e.subscribeToEvent(C,({x:i,y:s,target:n})=>{this.getViews().forEach(r=>{this._targetPerView.set(r.id,n),r.intersects(i,s)&&this._viewIsPointerDownMap.set(r.id,!0)})}),e.subscribeToEvent(T,({x:i,y:s})=>{this.getViews().forEach(n=>{if(!this._viewIsPointerDownMap.get(n.id))return;this._viewPointerPositionLog.has(n.id)||this._viewPointerPositionLog.set(n.id,[]),this._viewPointerPositionLog.get(n.id).push(new l(i,s))})}),e.subscribeToEvent(I,({x:i,y:s})=>{this.getViews().forEach(r=>{if(!this._viewIsPointerDownMap.get(r.id)||!this._viewPointerPositionLog.has(r.id))return;const o=new l(i,s),h=this._viewPointerPositionLog.get(r.id),c=h[h.length-2]||o.clone(),d=this._targetPerView.get(r.id),p=n(c,o);d&&r.hasElement(d)&&p.hasSwiped&&this.emit(dt,{view:r,direction:p.direction}),this._viewPointerPositionLog.set(r.id,[]),this._viewIsPointerDownMap.set(r.id,!1)});function n(r,o){const h={up:l.sub(new l(r.x,r.y-1),r),down:l.sub(new l(r.x,r.y+1),r),left:l.sub(new l(r.x-1,r.y),r),right:l.sub(new l(r.x+1,r.y),r)},c=l.sub(o,r).unitVector,d=["up","down","left","right"],p=[c.dot(h.up),c.dot(h.down),c.dot(h.left),c.dot(h.right)],g=Math.max(...p),v=p.indexOf(g),y=d[v],S=l.sub(o,r).magnitude;return{hasSwiped:c.dot(h[y])*S>30,direction:y}}})}}a(gt,"pluginName","SwipeEventPlugin");class _t{constructor(t){a(this,"view");this.props=t,this.view=t.view}}class pt extends B{subscribeToEvents(t){t.subscribeToEvent(V,({x:e,y:i,target:s})=>{this.getViews().forEach(n=>{const r=s,o=n.element===r||n.element.contains(r);n.intersects(e,i)&&o&&this.emit(_t,{view:n})})})}}a(pt,"pluginName","ClickEventPlugin");function ge(u,t){const e=u.map(t),i=Math.min(...e),s=e.indexOf(i);return u[s]}const _e=Object.freeze(Object.defineProperty({__proto__:null,clamp:Bt,minBy:ge,valueAtPercentage:Lt},Symbol.toStringTag,{value:"Module"})),pe=Object.freeze(Object.defineProperty({__proto__:null,PointerClickEvent:V,PointerDownEvent:C,PointerMoveEvent:T,PointerUpEvent:I},Symbol.toStringTag,{value:"Module"}));_.ClickEvent=_t,_.ClickEventPlugin=pt,_.DataChangedEvent=O,_.DragEvent=ht,_.DragEventPlugin=ct,_.EventBus=N,_.EventPlugin=B,_.Events=pe,_.Plugin=st,_.PluginContext=nt,_.SwipeEvent=dt,_.SwipeEventPlugin=gt,_.Utils=_e,_.createApp=de,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})}); diff --git a/package.json b/package.json index adc9ca7..91ad799 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "veloxi", "author": "Taha Shashtari (taha@tahazsh.com)", - "version": "0.4.1", + "version": "0.4.2", "private": false, "type": "module", "main": "./dist/veloxi.min.js",