From 127b8ca087c34062e9cc02be5d642a368942523a Mon Sep 17 00:00:00 2001 From: Taha Shashtari Date: Sat, 29 Jun 2024 18:06:27 +0300 Subject: [PATCH] v0.9.0 --- dist/veloxi.d.ts | 8 +- dist/veloxi.js | 396 +++++++++++++++++++++++---------------------- dist/veloxi.min.js | 4 +- package.json | 2 +- 4 files changed, 213 insertions(+), 197 deletions(-) diff --git a/dist/veloxi.d.ts b/dist/veloxi.d.ts index 4c7d1fa..45735bf 100644 --- a/dist/veloxi.d.ts +++ b/dist/veloxi.d.ts @@ -239,6 +239,8 @@ declare type Direction = 'up' | 'down' | 'left' | 'right'; declare type Direction_2 = 'up' | 'down' | 'left' | 'right'; +declare function distanceBetweenTwoPoints(pointA: Point, pointB: Point): number; + declare class DragEvent_2 { props: { view: View; @@ -248,6 +250,7 @@ declare class DragEvent_2 { y: number; width: number; height: number; + distance: number; isDragging: boolean; target: EventTarget | null; directions: Array; @@ -262,6 +265,7 @@ declare class DragEvent_2 { directions: Array; width: number; height: number; + distance: number; constructor(props: { view: View; previousX: number; @@ -270,6 +274,7 @@ declare class DragEvent_2 { y: number; width: number; height: number; + distance: number; isDragging: boolean; target: EventTarget | null; directions: Array; @@ -735,7 +740,8 @@ declare namespace Utils { valueAtPercentage, remap, pointToViewProgress, - randomNumber + randomNumber, + distanceBetweenTwoPoints } } export { Utils } diff --git a/dist/veloxi.js b/dist/veloxi.js index f210586..f826ee3 100644 --- a/dist/veloxi.js +++ b/dist/veloxi.js @@ -1,6 +1,6 @@ -var Ie = Object.defineProperty; -var Ce = (a, e, t) => e in a ? Ie(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t; -var o = (a, e, t) => (Ce(a, typeof e != "symbol" ? e + "" : e, t), t); +var Ce = Object.defineProperty; +var Le = (a, e, t) => e in a ? Ce(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t; +var o = (a, e, t) => (Le(a, typeof e != "symbol" ? e + "" : e, t), t); class C { constructor(e) { o(this, "x"); @@ -27,12 +27,12 @@ class fe { this.event = e, this.pluginId = e.pluginId, this.pluginName = e.pluginName, this.viewName = e.viewName, this.dataName = e.dataName, this.dataValue = e.dataValue; } } -function Le(a) { +function Be(a) { return a.replace(/(?:^\w|[A-Z]|\b\w)/g, function(e, t) { return t === 0 ? e.toLowerCase() : e.toUpperCase(); }).replace(/\s+/g, "").replace(/-+/g, ""); } -function Be(a) { +function Se(a) { return a.split("").map((e, t) => e.toUpperCase() === e ? `${t !== 0 ? "-" : ""}${e.toLowerCase()}` : e).join(""); } class D { @@ -47,7 +47,7 @@ class O { this.node = e.node; } } -class Se { +class Fe { constructor(e) { o(this, "_eventBus"); o(this, "_observer"); @@ -83,14 +83,14 @@ class Se { if (i && /data-vel-data-.+/gi.test(i)) { const n = t.target, r = n.dataset.velPluginId || "", u = n.dataset.velPlugin || "", h = n.dataset.velView || "", c = n.getAttribute(i); if (c && c !== t.oldValue) { - const g = Le( + const d = Be( i.replace("data-vel-data-", "") ); this._eventBus.emitEvent(fe, { pluginId: r, pluginName: u, viewName: h, - dataName: g, + dataName: d, dataValue: c }); } @@ -98,12 +98,12 @@ class Se { }); } } -class Fe { +class Me { execute(e) { this.call(e); } } -class he extends Fe { +class he extends Me { constructor(t) { super(); o(this, "_handler"); @@ -210,9 +210,9 @@ class k { this._listeners.clear(); } } -let Me = 0; +let $e = 0; function me() { - return Me++ + ""; + return $e++ + ""; } class ve { constructor(e, t, i, s, n, r, u) { @@ -361,7 +361,7 @@ class ve { subscribeToEvents(e) { } } -class $e extends ve { +class De extends ve { isRenderable() { return !0; } @@ -385,7 +385,7 @@ class q extends ve { return !1; } } -class De { +class Oe { constructor(e) { o(this, "_plugin"); this._plugin = e; @@ -440,7 +440,7 @@ class De { } } function M(a, e, t, i, s, n) { - if (Oe(a)) + if (ke(a)) return new a( a, a.pluginName, @@ -450,7 +450,7 @@ function M(a, e, t, i, s, n) { s, n ); - const r = new $e( + const r = new De( a, a.pluginName, e, @@ -458,10 +458,10 @@ function M(a, e, t, i, s, n) { i, s, n - ), u = new De(r); + ), u = new Oe(r); return a(u), r; } -function Oe(a) { +function ke(a) { var e; return ((e = a.prototype) == null ? void 0 : e.constructor.toString().indexOf("class ")) === 0; } @@ -512,30 +512,34 @@ class l { function we(a, e, t) { return Math.min(Math.max(a, e), t); } -function ke(a, e) { +function ze(a, e) { return Math.floor(Math.random() * (e - a + 1) + a); } -function ze(a, e, t) { +function ye(a, e) { + const t = e.x - a.x, i = e.y - a.y; + return Math.sqrt(t * t + i * i); +} +function We(a, e, t) { return a + (e - a) * t; } function p(a, e) { const i = a - e; return Math.abs(i) <= 0.01; } -function We(a, e, t, i, s) { +function Ue(a, e, t, i, s) { return (a - e) / (t - e) * (s - i) + i; } -function Ue(a, e, t) { - const i = e.getScroll(), s = e.position.x - i.x, n = e.position.y - i.y, r = a.x || s, u = a.y || n, h = Math.abs(s - r), c = Math.abs(n - u), g = Math.sqrt(h * h + c * c); - return 1 - we(0, g / t, 1); +function qe(a, e, t) { + const i = e.getScroll(), s = e.position.x - i.x, n = e.position.y - i.y, r = a.x || s, u = a.y || n, h = Math.abs(s - r), c = Math.abs(n - u), d = Math.sqrt(h * h + c * c); + return 1 - we(0, d / t, 1); } -function m(a) { +function v(a) { let e = a.match(/^([\d.]+)([a-zA-Z%]*)$/); e || (e = "0px".match(/^([\d.]+)([a-zA-Z%]*)$/)); const t = parseFloat(e[1]), i = e[2]; return { value: t, unit: i, valueWithUnit: a }; } -function qe(a, e, t = !1) { +function Ye(a, e, t = !1) { if (a === e) return !0; if (a.length !== e.length) @@ -549,7 +553,7 @@ function qe(a, e, t = !1) { return !0; } function ce(a, e) { - return qe(a, e, !0); + return Ye(a, e, !0); } class R { constructor(e, t, i, s) { @@ -582,7 +586,7 @@ class R { } } function z(a) { - const e = a.split(" ").map((i) => m(i)), t = { + const e = a.split(" ").map((i) => v(i)), t = { value: 0, unit: "", valueWithUnit: "0" @@ -605,7 +609,7 @@ function z(a) { ); } } -function Ye(a, e) { +function Xe(a, e) { const t = r(a.topLeft, e), i = r(a.topRight, e), s = r(a.bottomLeft, e), n = r(a.bottomRight, e); return { v: { @@ -624,17 +628,17 @@ function Ye(a, e) { function r(u, h) { if (u.unit === "%") return { - h: m(`${u.value}%`), - v: m(`${u.value}%`) + h: v(`${u.value}%`), + v: v(`${u.value}%`) }; - const c = u.value / h.width * 100, g = u.value / h.height * 100; - return { h: m(`${c}%`), v: m(`${g}%`) }; + const c = u.value / h.width * 100, d = u.value / h.height * 100; + return { h: v(`${c}%`), v: v(`${d}%`) }; } } function de(a, e) { return p(a.topLeft.value, e.topLeft.value) && p(a.topRight.value, e.topRight.value) && p(a.bottomRight.value, e.bottomRight.value) && p(a.bottomLeft.value, e.bottomLeft.value); } -class Xe { +class je { constructor(e) { o(this, "_value"); this._value = e; @@ -646,10 +650,10 @@ class Xe { return p(this.value, e.value); } } -function je(a) { - return new Xe(parseFloat(a)); +function He(a) { + return new je(parseFloat(a)); } -class He { +class Ke { constructor(e, t) { o(this, "_x"); o(this, "_y"); @@ -659,15 +663,15 @@ class He { return new l(this._x, this._y); } } -function Ke(a, e) { - const [t, i] = a.split(" "), s = m(t), n = m(i); - return new He( +function Ge(a, e) { + const [t, i] = a.split(" "), s = v(t), n = v(i); + return new Ke( s.value / e.width, n.value / e.height ); } -function Ge(a) { - const e = Ze(a), t = Je(a); +function Ze(a) { + const e = Je(a), t = Qe(a); return { viewportOffset: { left: Math.round(e.left), @@ -685,7 +689,7 @@ function Ge(a) { } }; } -function Ze(a) { +function Je(a) { const e = a.getBoundingClientRect(); return { left: e.left, @@ -696,18 +700,18 @@ function Ze(a) { height: e.height }; } -function Je(a) { +function Qe(a) { let e = a, t = 0, i = 0; for (; e; ) t += e.offsetTop, i += e.offsetLeft, e = e.offsetParent; return { top: t, left: i }; } -class Qe { +class et { constructor(e) { o(this, "_element"); o(this, "_rect"); o(this, "_computedStyle"); - this._rect = Ge(e), this._computedStyle = getComputedStyle(e), this._element = e; + this._rect = Ze(e), this._computedStyle = getComputedStyle(e), this._element = e; } read(e) { switch (e) { @@ -721,13 +725,13 @@ class Qe { return this._rect; } get opacity() { - return je(this._computedStyle.opacity); + return He(this._computedStyle.opacity); } get borderRadius() { return z(this._computedStyle.borderRadius); } get origin() { - return Ke( + return Ge( this._computedStyle.transformOrigin, this._rect.size ); @@ -740,7 +744,7 @@ class Qe { } } function $(a) { - return new Qe(a); + return new et(a); } function W(a, e) { const t = { @@ -762,7 +766,7 @@ class X { return this._config; } } -class et extends X { +class tt extends X { update({ animatorProp: e, current: t, target: i, dt: s }) { const n = l.sub(i, t), r = l.scale(n, this._config.speed); let u = l.add(t, l.scale(r, s)); @@ -774,7 +778,7 @@ class et extends X { return l.sub(e, t).magnitude < P && i.magnitude < P; } } -class tt extends X { +class it extends X { update({ animatorProp: e, current: t, target: i, dt: s }) { const r = (i - t) * this._config.speed; let u = t + r * s; @@ -786,14 +790,14 @@ class tt extends X { return Math.abs(e - t) < P && Math.abs(i) < P; } } -class it extends X { +class st extends X { update({ animatorProp: e, current: t, target: i, dt: s }) { return i.map((n, r) => { - const u = t[r], h = n.value === 0 ? u.unit : n.unit, g = (n.value - u.value) * this._config.speed, _ = u.value + g * s; - let d = m(`${_}${h}`); - return this._shouldFinish(n.value, u.value, g) && (d = n, requestAnimationFrame(() => { + const u = t[r], h = n.value === 0 ? u.unit : n.unit, d = (n.value - u.value) * this._config.speed, _ = u.value + d * s; + let g = v(`${_}${h}`); + return this._shouldFinish(n.value, u.value, d) && (g = n, requestAnimationFrame(() => { e.callCompleteCallback(); - })), e.callUpdateCallback(), d; + })), e.callUpdateCallback(), g; }); } _shouldFinish(e, t, i) { @@ -829,7 +833,7 @@ class K { return this._config; } } -class st extends K { +class nt extends K { constructor() { super(...arguments); o(this, "_velocity", new l(0, 0)); @@ -852,7 +856,7 @@ class st extends K { return l.sub(t, i).magnitude < b && this._velocity.magnitude < b; } } -class nt extends K { +class rt extends K { constructor() { super(...arguments); o(this, "_velocity", 0); @@ -869,32 +873,32 @@ class nt extends K { return Math.abs(t - i) < b && Math.abs(this._velocity) < b; } } -class rt extends K { +class at extends K { constructor() { super(...arguments); o(this, "_velocity", 0); } update({ animatorProp: t, current: i, target: s, dt: n }) { return s.map((r, u) => { - const h = i[u], c = r.value === 0 ? h.unit : r.unit, g = -(h.value - r.value) * this._config.stiffness; - this._velocity += g, this._velocity *= this._config.damping; + const h = i[u], 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 _ = h.value + this._velocity * n * this._config.speed; - let d = m(`${_}${c}`); - return this._shouldFinish(r.value, h.value) && (d = r, requestAnimationFrame(() => { + let g = v(`${_}${c}`); + return this._shouldFinish(r.value, h.value) && (g = r, requestAnimationFrame(() => { t.callCompleteCallback(); - })), d; + })), g; }); } _shouldFinish(t, i) { return Math.abs(t - i) < b && Math.abs(this._velocity) < b; } } -function at(a) { +function ot(a) { return a; } const G = { duration: 350, - ease: at + ease: ot }; class Z { constructor(e) { @@ -910,7 +914,7 @@ class Z { this._startTime = void 0; } } -class ot extends Z { +class ut extends Z { update({ animatorProp: e, initial: t, target: i, ts: s }) { this._startTime || (this._startTime = s); const n = Math.min(1, (s - this._startTime) / this._config.duration); @@ -922,19 +926,19 @@ class ot extends Z { ); } } -class ut extends Z { +class lt extends Z { update({ animatorProp: e, initial: t, target: i, ts: s }) { this._startTime || (this._startTime = s); const n = Math.min(1, (s - this._startTime) / this._config.duration); return p(n, 1) ? (requestAnimationFrame(() => { e.callCompleteCallback(); }), i) : t.map((r, u) => { - const h = i[u], c = h.value === 0 ? r.unit : h.unit, g = r.value + this._config.ease(n) * (i[u].value - r.value); - return m(`${g}${c}`); + const h = i[u], c = h.value === 0 ? r.unit : h.unit, d = r.value + this._config.ease(n) * (i[u].value - r.value); + return v(`${d}${c}`); }); } } -class lt extends Z { +class ht extends Z { update({ animatorProp: e, initial: t, target: i, ts: s }) { this._startTime || (this._startTime = s); const n = Math.min(1, (s - this._startTime) / this._config.duration); @@ -963,30 +967,30 @@ class I extends J { return new j(); } createTweenAnimator(e) { - return new ot({ ...G, ...e }); + return new ut({ ...G, ...e }); } createDynamicAnimator(e) { - return new et({ ...Y, ...e }); + return new tt({ ...Y, ...e }); } createSpringAnimator(e) { - return new st({ ...H, ...e }); + return new nt({ ...H, ...e }); } } -class ht extends J { +class ct extends J { createInstantAnimator() { return new j(); } createTweenAnimator(e) { - return new ut({ ...G, ...e }); + return new lt({ ...G, ...e }); } createDynamicAnimator(e) { - return new it({ + return new st({ ...Y, ...e }); } createSpringAnimator(e) { - return new rt({ ...H, ...e }); + return new at({ ...H, ...e }); } } class ge extends J { @@ -994,19 +998,19 @@ class ge extends J { return new j(); } createDynamicAnimator(e) { - return new tt({ ...Y, ...e }); + return new it({ ...Y, ...e }); } createTweenAnimator(e) { - return new lt({ ...G, ...e }); + return new ht({ ...G, ...e }); } createSpringAnimator(e) { - return new nt({ ...H, ...e }); + return new rt({ ...H, ...e }); } } function x(a) { return structuredClone(a); } -class ct { +class dt { constructor(e) { o(this, "_viewProp"); o(this, "_completeCallback"); @@ -1053,7 +1057,7 @@ class V { o(this, "_view"); o(this, "_animatorFactory"); o(this, "_previousRenderValue"); - this._animatorProp = new ct(this), this._animatorFactory = e, this._initialValue = x(t), this._previousValue = x(t), this._targetValue = x(t), this._currentValue = x(t), this._hasChanged = !1, this._previousRenderValue = void 0, this._view = i, this._animator = this._animatorFactory.createInstantAnimator(); + this._animatorProp = new dt(this), this._animatorFactory = e, this._initialValue = x(t), this._previousValue = x(t), this._targetValue = x(t), this._currentValue = x(t), this._hasChanged = !1, this._previousRenderValue = void 0, this._view = i, this._animator = this._animatorFactory.createInstantAnimator(); } get shouldRender() { return !0; @@ -1093,7 +1097,7 @@ class V { update(e, t) { } } -class dt extends V { +class gt extends V { constructor() { super(...arguments); o(this, "_invertedBorderRadius"); @@ -1140,7 +1144,7 @@ class dt extends V { }; } else s = t; - const n = s.topLeft ? m(s.topLeft) : this._currentValue[0], r = s.topRight ? m(s.topRight) : this._currentValue[1], u = s.bottomRight ? m(s.bottomRight) : this._currentValue[2], h = s.bottomLeft ? m(s.bottomLeft) : this._currentValue[3]; + const n = s.topLeft ? v(s.topLeft) : this._currentValue[0], r = s.topRight ? v(s.topRight) : this._currentValue[1], u = s.bottomRight ? v(s.bottomRight) : this._currentValue[2], h = s.bottomLeft ? v(s.bottomLeft) : this._currentValue[3]; this._setTarget([n, r, u, h], i); } reset(t = !0) { @@ -1174,7 +1178,7 @@ class dt extends V { if (p(this._view.scale.x, 1) && p(this._view.scale.y, 1)) return; const t = this._rect.size.width * this._view.scale.x, i = this._rect.size.height * this._view.scale.y; - this._invertedBorderRadius = Ye( + this._invertedBorderRadius = Xe( z( `${this._currentValue[0].valueWithUnit} ${this._currentValue[1].valueWithUnit} ${this._currentValue[2].valueWithUnit} ${this._currentValue[3].valueWithUnit}` ).value, @@ -1227,7 +1231,7 @@ class dt extends V { return !1; } } -class gt extends V { +class _t extends V { setFromElementPropValue(e) { this._setTarget(e.value, !0); } @@ -1268,7 +1272,7 @@ class gt extends V { return !1; } } -class _t extends V { +class pt extends V { get x() { return this._currentValue.x; } @@ -1315,7 +1319,7 @@ class _t extends V { return !1; } } -class pt extends V { +class ft extends V { constructor() { super(...arguments); o(this, "_animateLayoutUpdateNextFrame", !1); @@ -1363,8 +1367,8 @@ class pt extends V { } update(t, i) { if ((this._view.isInverseEffectEnabled || this._view.isLayoutTransitionEnabled) && !this._view.isTemporaryView && this._runLayoutTransition(), this._view.isInverseEffectEnabled) { - const c = this._view._parent, g = c ? c.scale.x : 1, _ = c ? c.scale.y : 1; - this._parentScaleInverse = new l(1 / g, 1 / _), this._parentScaleInverse.equals(new l(1, 1)) || (this._hasChanged = !0); + const c = this._view._parent, d = c ? c.scale.x : 1, _ = c ? c.scale.y : 1; + this._parentScaleInverse = new l(1 / d, 1 / _), this._parentScaleInverse.equals(new l(1, 1)) || (this._hasChanged = !0); } if (this._targetValue.x === this._currentValue.x && this._targetValue.y === this._currentValue.y) return; @@ -1391,10 +1395,10 @@ class pt extends V { const t = !(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 = t || i, n = this._rect.pageOffset.left - this._previousRect.pageOffset.left, r = this._rect.pageOffset.top - this._previousRect.pageOffset.top, u = 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(u) && u !== 1 || !Number.isNaN(h) && h !== 1 ? c = !0 : c = (() => { - const g = this._view._parents; - for (let _ = 0; _ < g.length; _++) { - const d = g[_], f = d.previousRect.size.width / d.rect.size.width, v = d.previousRect.size.height / d.rect.size.height; - if (f !== 1 || v !== 1) + const d = this._view._parents; + for (let _ = 0; _ < d.length; _++) { + const g = d[_], f = g.previousRect.size.width / g.rect.size.width, m = g.previousRect.size.height / g.rect.size.height; + if (f !== 1 || m !== 1) return !0; } return !1; @@ -1408,38 +1412,38 @@ class pt extends V { ); return; } - const w = this._view._parent, ie = this._rect.pageOffset, se = this._view.getScroll(), E = { + const y = this._view._parent, ie = this._rect.pageOffset, se = this._view.getScroll(), E = { left: this._previousRect.viewportOffset.left + se.x, top: this._previousRect.viewportOffset.top + se.y - }, Ee = E.left - ie.left, Te = E.top - ie.top; + }, Te = E.left - ie.left, Ae = E.top - ie.top; let ne = 0, re = 0, ae = 0, oe = 0; - if (w && w.position.animator.name !== "instant") { - const T = w.rect.pageOffset, A = w.getScroll(), N = { - left: w.previousRect.viewportOffset.left + A.x, - top: w.previousRect.viewportOffset.top + A.y + if (y && y.position.animator.name !== "instant") { + const T = y.rect.pageOffset, A = y.getScroll(), N = { + left: y.previousRect.viewportOffset.left + A.x, + top: y.previousRect.viewportOffset.top + A.y }; ne = N.left - T.left, re = N.top - T.top; - const ue = E.top - N.top, le = E.left - N.left, Ae = w.scale.y * ue; - ae = (ue - Ae) / w.scale.y; - const Ne = w.scale.x * le; - oe = (le - Ne) / w.scale.x; + const ue = E.top - N.top, le = E.left - N.left, Ne = y.scale.y * ue; + ae = (ue - Ne) / y.scale.y; + const Ie = y.scale.x * le; + oe = (le - Ie) / y.scale.x; } this._setTarget( - new l(Ee - ne + oe, Te - re + ae), + new l(Te - ne + oe, Ae - re + ae), !1 ), s && (this._animateLayoutUpdateNextFrame = !0); return; } this._animateLayoutUpdateNextFrame = !0; - const g = this._previousRect, _ = this._rect, d = this._view._parent; - let f = 0, v = 0; - d && d.position.animator.name !== "instant" && (f = d.previousRect.viewportOffset.left - d.rect.viewportOffset.left), d && d.position.animator.name !== "instant" && (v = d.previousRect.viewportOffset.top - d.rect.viewportOffset.top); - let y = 1, F = 1; - d && d.scale.animator.name !== "instant" && (y = d.previousRect.size.width / d.rect.size.width, F = d.previousRect.size.height / d.rect.size.height); - const ye = d && d.position.animator.name !== "instant" ? d.previousRect.viewportOffset.left : 0, Ve = d && d.position.animator.name !== "instant" ? d.previousRect.viewportOffset.top : 0, ee = g.viewportOffset.left - ye, te = g.viewportOffset.top - Ve, Pe = ee / y - ee, be = te / F - te; - let Re = g.viewportOffset.left - _.viewportOffset.left - f + Pe; - const xe = g.viewportOffset.top - _.viewportOffset.top - v + be; - this._setTarget(new l(Re, xe), !1); + const d = this._previousRect, _ = this._rect, g = this._view._parent; + let f = 0, m = 0; + g && g.position.animator.name !== "instant" && (f = g.previousRect.viewportOffset.left - g.rect.viewportOffset.left), g && g.position.animator.name !== "instant" && (m = g.previousRect.viewportOffset.top - g.rect.viewportOffset.top); + let w = 1, F = 1; + g && g.scale.animator.name !== "instant" && (w = g.previousRect.size.width / g.rect.size.width, F = g.previousRect.size.height / g.rect.size.height); + const Ve = g && g.position.animator.name !== "instant" ? g.previousRect.viewportOffset.left : 0, Pe = g && g.position.animator.name !== "instant" ? g.previousRect.viewportOffset.top : 0, ee = d.viewportOffset.left - Ve, te = d.viewportOffset.top - Pe, be = ee / w - ee, Re = te / F - te; + let xe = d.viewportOffset.left - _.viewportOffset.left - f + be; + const Ee = d.viewportOffset.top - _.viewportOffset.top - m + Re; + this._setTarget(new l(xe, Ee), !1); } else this._animateLayoutUpdateNextFrame && (this._setTarget(this._initialValue, !0), this._animateLayoutUpdateNextFrame = !1); } @@ -1466,7 +1470,7 @@ class pt extends V { return !0; } } -class ft extends V { +class mt extends V { constructor() { super(...arguments); o(this, "_unit", "deg"); @@ -1517,7 +1521,7 @@ class ft extends V { return !0; } } -class mt extends V { +class vt extends V { constructor() { super(...arguments); o(this, "_animateLayoutUpdateNextFrame", !1); @@ -1560,9 +1564,9 @@ class mt extends V { let n = !1; if ((!Number.isNaN(i) && i !== 1 || !Number.isNaN(s) && s !== 1) && (n = !0), n) { if (this._currentValue.x !== 1 || this._currentValue.y !== 1) { - const g = this._view.previousRect.size.width / this._view.rect.size.width, _ = this._view.previousRect.size.height / this._view.rect.size.height; + const d = this._view.previousRect.size.width / this._view.rect.size.width, _ = this._view.previousRect.size.height / this._view.rect.size.height; this._setTarget( - new l(this._currentValue.x * g, this._currentValue.y * _), + new l(this._currentValue.x * d, this._currentValue.y * _), !1 ), t && (this._animateLayoutUpdateNextFrame = !0); return; @@ -1592,7 +1596,7 @@ class mt extends V { return !0; } } -class vt extends V { +class wt extends V { get width() { return this._view.rect.size.width; } @@ -1675,36 +1679,36 @@ class vt extends V { return !1; } } -class wt { +class yt { constructor(e) { o(this, "_props", /* @__PURE__ */ new Map()); this._props.set( "position", - new pt(new I(), new l(0, 0), e) + new ft(new I(), new l(0, 0), e) ), this._props.set( "scale", - new mt(new I(), new l(1, 1), e) + new vt(new I(), new l(1, 1), e) ), this._props.set( "rotation", - new ft(new ge(), 0, e) + new mt(new ge(), 0, e) ), this._props.set( "size", - new vt( + new wt( new I(), new l(e.rect.size.width, e.rect.size.height), e ) ), this._props.set( "opacity", - new gt( + new _t( new ge(), e.elementReader.opacity.value, e ) ), this._props.set( "borderRadius", - new dt( - new ht(), + new gt( + new ct(), [ e.elementReader.borderRadius.value.topLeft, e.elementReader.borderRadius.value.topRight, @@ -1715,7 +1719,7 @@ class wt { ) ), this._props.set( "origin", - new _t( + new pt( new I(), e.elementReader.origin.value, e @@ -1753,7 +1757,7 @@ class wt { return this._props.get("origin"); } } -class yt { +class Vt { constructor(e, t, i, s) { o(this, "id"); o(this, "name"); @@ -1771,7 +1775,7 @@ class yt { o(this, "_temporaryView"); o(this, "_inverseEffect"); o(this, "_renderNextTick"); - this.id = me(), this.name = t, this.element = e, this._elementReader = $(e), this._previousRect = this._elementReader.rect, this._viewProps = new wt(this), this._skipFirstRenderFrame = !0, this._layoutId = s, this._layoutTransition = !1, this._registry = i, this.element.dataset.velViewId = this.id, this._temporaryView = !1, this._inverseEffect = !1, this.styles = W(this.styles, () => { + this.id = me(), this.name = t, this.element = e, this._elementReader = $(e), this._previousRect = this._elementReader.rect, this._viewProps = new yt(this), this._skipFirstRenderFrame = !0, this._layoutId = s, this._layoutTransition = !1, this._registry = i, this.element.dataset.velViewId = this.id, this._temporaryView = !1, this._inverseEffect = !1, this.styles = W(this.styles, () => { this._renderNextTick = !0; }), this._renderNextTick = !1; } @@ -1969,7 +1973,7 @@ class yt { }), e += this._getUserStyles(), this.element.style.cssText = e, this._renderNextTick = !1; } _getUserStyles() { - return Object.keys(this.styles).reduce((e, t) => t ? e + `${Be(t)}: ${this.styles[t]};` : e, ""); + return Object.keys(this.styles).reduce((e, t) => t ? e + `${Se(t)}: ${this.styles[t]};` : e, ""); } markAsAdded() { delete this.element.dataset.velProcessing; @@ -1994,7 +1998,7 @@ class yt { }); } } -class Vt { +class Pt { constructor(e, t) { o(this, "_appEventBus"); o(this, "_eventBus"); @@ -2069,7 +2073,7 @@ class Vt { h ); this._plugins.push(c); - const g = s.dataset.velView, _ = this._createNewView(s, g, c); + const d = s.dataset.velView, _ = this._createNewView(s, d, c); _.isInverseEffectEnabled && _.setAnimatorsFromParent(), c.notifyAboutViewAdded(_); }); const i = t.filter((s) => !!this._getPluginIdForElement(s)); @@ -2272,24 +2276,24 @@ class Vt { h ); this._plugins.push(c); - let g = []; - u !== document.documentElement && g.push(u); + let d = []; + u !== document.documentElement && d.push(u); const _ = u.querySelectorAll( `[data-vel-plugin=${c.pluginName}]` ); - g = [...g, ..._]; - const d = g.filter((f) => { + d = [...d, ..._]; + const g = d.filter((f) => { if (!f.parentElement) return !0; - const y = this._getPluginNameForElement(f.parentElement); - return !(y && y.length > 0); + const w = this._getPluginNameForElement(f.parentElement); + return !(w && w.length > 0); }); - return d.length && d.forEach((f) => { - const v = f.dataset.velView; - if (!v) + return g.length && g.forEach((f) => { + const m = f.dataset.velView; + if (!m) return; - const y = this._createNewView(f, v, c); - c.notifyAboutViewAdded(y); + const w = this._createNewView(f, m, c); + c.notifyAboutViewAdded(w); }), c; }); if (n && n.length > 0) @@ -2310,7 +2314,7 @@ class Vt { return this._views; } createView(e, t, i) { - const s = new yt(e, t, this, i); + const s = new Vt(e, t, this, i); return this._views.push(s), this._viewsCreatedInPreviousFrame.push(s), s; } assignViewToPlugin(e, t) { @@ -2346,7 +2350,7 @@ class Q { o(this, "_registry"); o(this, "_eventBus"); o(this, "_appEventBus"); - this._eventBus = new k(), this._appEventBus = new k(), this._registry = new Vt(this._appEventBus, this._eventBus), new Se(this._eventBus); + this._eventBus = new k(), this._appEventBus = new k(), this._registry = new Pt(this._appEventBus, this._eventBus), new Fe(this._eventBus); } static create() { return new Q(); @@ -2476,10 +2480,10 @@ class Q { }); } } -function Lt() { +function Bt() { return Q.create(); } -class Pt { +class bt { constructor(e) { o(this, "view"); o(this, "previousX"); @@ -2491,10 +2495,11 @@ class Pt { o(this, "directions", []); o(this, "width"); o(this, "height"); - this.props = e, this.previousX = e.previousX, this.previousY = e.previousY, this.x = e.x, this.y = e.y, this.width = e.width, this.height = e.height, this.view = e.view, this.isDragging = e.isDragging, this.target = e.target, this.directions = e.directions; + o(this, "distance"); + this.props = e, this.previousX = e.previousX, this.previousY = e.previousY, this.x = e.x, this.y = e.y, this.width = e.width, this.height = e.height, this.distance = e.distance, this.view = e.view, this.isDragging = e.isDragging, this.target = e.target, this.directions = e.directions; } } -class bt extends q { +class Rt extends q { constructor() { super(...arguments); o(this, "_pointerX", 0); @@ -2546,24 +2551,28 @@ class bt extends q { }); } _emitEvent(t, i) { - const s = this._viewPointerPositionLog.get(t.id), n = s && s.length >= 2 ? s[s.length - 2] : null, r = this._pointerX - this._initialPointerPerView.get(t.id).x, u = this._pointerY - this._initialPointerPerView.get(t.id).y, h = n ? n.x - this._initialPointerPerView.get(t.id).x : r, c = n ? n.y - this._initialPointerPerView.get(t.id).y : u, g = this._pointerY - this._initialPointer.y, _ = this._pointerX - this._initialPointer.x, d = this._targetPerView.get(t.id); - if (!d || !t.hasElement(d)) + const s = this._viewPointerPositionLog.get(t.id), n = s && s.length >= 2 ? s[s.length - 2] : null, r = this._pointerX - this._initialPointerPerView.get(t.id).x, u = this._pointerY - this._initialPointerPerView.get(t.id).y, h = n ? n.x - this._initialPointerPerView.get(t.id).x : r, c = n ? n.y - this._initialPointerPerView.get(t.id).y : u, d = this._pointerY - this._initialPointer.y, _ = this._pointerX - this._initialPointer.x, g = ye(this._initialPointer, { + x: this._pointerX, + y: this._pointerY + }), f = this._targetPerView.get(t.id); + if (!f || !t.hasElement(f)) return; - const f = this._pointerDownPerView.get(t.id) === !0; - f || this._viewPointerPositionLog.clear(); - const v = { + const m = this._pointerDownPerView.get(t.id) === !0; + m || this._viewPointerPositionLog.clear(); + const w = { view: t, - target: d, + target: f, previousX: h, previousY: c, x: r, y: u, + distance: g, width: _, - height: g, - isDragging: f, + height: d, + isDragging: m, directions: i }; - this.emit(Pt, v); + this.emit(bt, w); } _calculateDirections(t, i) { const s = { @@ -2593,15 +2602,15 @@ class bt extends q { ); } } -o(bt, "pluginName", "DragEventPlugin"); -class Rt { +o(Rt, "pluginName", "DragEventPlugin"); +class xt { constructor(e) { o(this, "view"); o(this, "direction"); this.props = e, this.view = e.view, this.direction = e.direction; } } -class xt extends q { +class Et extends q { constructor() { super(...arguments); o(this, "_viewIsPointerDownMap", /* @__PURE__ */ new Map()); @@ -2623,8 +2632,8 @@ class xt extends q { this.getViews().forEach((r) => { if (!this._viewIsPointerDownMap.get(r.id) || !this._viewPointerPositionLog.has(r.id)) return; - const u = new l(i, s), h = this._viewPointerPositionLog.get(r.id), c = h[h.length - 2] || u.clone(), g = this._targetPerView.get(r.id), _ = n(c, u); - g && r.hasElement(g) && _.hasSwiped && this.emit(Rt, { + const u = new l(i, s), h = this._viewPointerPositionLog.get(r.id), c = h[h.length - 2] || u.clone(), d = this._targetPerView.get(r.id), _ = n(c, u); + d && r.hasElement(d) && _.hasSwiped && this.emit(xt, { view: r, direction: _.direction }), this._viewPointerPositionLog.set(r.id, []), this._viewIsPointerDownMap.set(r.id, !1); @@ -2635,7 +2644,7 @@ class xt extends q { 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(u, r).unitVector, g = [ + }, c = l.sub(u, r).unitVector, d = [ "up", "down", "left", @@ -2645,48 +2654,49 @@ class xt extends q { c.dot(h.down), c.dot(h.left), c.dot(h.right) - ], d = Math.max(..._), f = _.indexOf(d), v = g[f], y = l.sub(u, r).magnitude; + ], g = Math.max(..._), f = _.indexOf(g), m = d[f], w = l.sub(u, r).magnitude; return { - hasSwiped: c.dot(h[v]) * y > 30, - direction: v + hasSwiped: c.dot(h[m]) * w > 30, + direction: m }; } }); } } -o(xt, "pluginName", "SwipeEventPlugin"); -class Et { +o(Et, "pluginName", "SwipeEventPlugin"); +class Tt { constructor(e) { o(this, "view"); this.props = e, this.view = e.view; } } -class Tt extends q { +class At extends q { subscribeToEvents(e) { e.subscribeToEvent(U, ({ x: t, y: i, target: s }) => { this.getViews().forEach((n) => { const r = s, u = n.element === r || n.element.contains(r); - n.intersects(t, i) && u && this.emit(Et, { + n.intersects(t, i) && u && this.emit(Tt, { view: n }); }); }); } } -o(Tt, "pluginName", "ClickEventPlugin"); -function At(a, e) { +o(At, "pluginName", "ClickEventPlugin"); +function Nt(a, e) { const t = a.map(e), i = Math.min(...t), s = t.indexOf(i); return a[s]; } -const Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +const St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, clamp: we, - minBy: At, - pointToViewProgress: Ue, - randomNumber: ke, - remap: We, - valueAtPercentage: ze -}, Symbol.toStringTag, { value: "Module" })), St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + distanceBetweenTwoPoints: ye, + minBy: Nt, + pointToViewProgress: qe, + randomNumber: ze, + remap: Ue, + valueAtPercentage: We +}, Symbol.toStringTag, { value: "Module" })), Ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, PointerClickEvent: U, PointerDownEvent: B, @@ -2694,18 +2704,18 @@ const Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ PointerUpEvent: S }, Symbol.toStringTag, { value: "Module" })); export { - Et as ClickEvent, - Tt as ClickEventPlugin, + Tt as ClickEvent, + At as ClickEventPlugin, fe as DataChangedEvent, - Pt as DragEvent, - bt as DragEventPlugin, + bt as DragEvent, + Rt as DragEventPlugin, k as EventBus, q as EventPlugin, - St as Events, - $e as Plugin, - De as PluginContext, - Rt as SwipeEvent, - xt as SwipeEventPlugin, - Bt as Utils, - Lt as createApp + Ft as Events, + De as Plugin, + Oe as PluginContext, + xt as SwipeEvent, + Et as SwipeEventPlugin, + St as Utils, + Bt as createApp }; diff --git a/dist/veloxi.min.js b/dist/veloxi.min.js index c6d4c4c..8e659eb 100644 --- a/dist/veloxi.min.js +++ b/dist/veloxi.min.js @@ -1,3 +1,3 @@ -(function(f,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(f=typeof globalThis<"u"?globalThis:f||self,m(f.Veloxi={}))})(this,function(f){"use strict";var Ct=Object.defineProperty;var Lt=(f,m,P)=>m in f?Ct(f,m,{enumerable:!0,configurable:!0,writable:!0,value:P}):f[m]=P;var a=(f,m,P)=>(Lt(f,typeof m!="symbol"?m+"":m,P),P);class m{constructor(e){a(this,"x");a(this,"y");a(this,"target");this.x=e.x,this.y=e.y,this.target=e.target}}class P extends m{}class N extends m{}class I extends m{}class C extends m{}class O{constructor(e){a(this,"pluginId");a(this,"pluginName");a(this,"viewName");a(this,"dataName");a(this,"dataValue");this.event=e,this.pluginId=e.pluginId,this.pluginName=e.pluginName,this.viewName=e.viewName,this.dataName=e.dataName,this.dataValue=e.dataValue}}function Ne(o){return o.replace(/(?:^\w|[A-Z]|\b\w)/g,function(e,t){return t===0?e.toLowerCase():e.toUpperCase()}).replace(/\s+/g,"").replace(/-+/g,"")}function Ie(o){return o.split("").map((e,t)=>e.toUpperCase()===e?`${t!==0?"-":""}${e.toLowerCase()}`:e).join("")}class k{constructor(e){a(this,"node");this.node=e.node}}class z{constructor(e){a(this,"node");this.node=e.node}}class Ce{constructor(e){a(this,"_eventBus");a(this,"_observer");this._eventBus=e,this._observer=new MutationObserver(this._handler.bind(this)),this._observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0})}_handler(e){e.forEach(t=>{t.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(k,{node:r});const u=r.querySelectorAll("[data-vel-plugin]");u.length&&u.forEach(h=>{this._eventBus.emitEvent(k,{node:h})})}),t.removedNodes.forEach(n=>{if(!(n instanceof HTMLElement)||typeof n.dataset.velProcessing<"u")return;const r=n.querySelectorAll("[data-vel-plugin]");r.length&&r.forEach(u=>{this._eventBus.emitEvent(z,{node:u})}),this._eventBus.emitEvent(z,{node:n})});const i=t.attributeName;if(i&&/data-vel-data-.+/gi.test(i)){const n=t.target,r=n.dataset.velPluginId||"",u=n.dataset.velPlugin||"",h=n.dataset.velView||"",c=n.getAttribute(i);if(c&&c!==t.oldValue){const g=Ne(i.replace("data-vel-data-",""));this._eventBus.emitEvent(O,{pluginId:r,pluginName:u,viewName:h,dataName:g,dataValue:c})}}})}}class Le{execute(e){this.call(e)}}class ie extends Le{constructor(t){super();a(this,"_handler");this._handler=t}getHandler(){return this._handler}call(t){this._handler(t)}}class L{constructor(){a(this,"_listeners",new Map);a(this,"_keyedListeners",new Map)}subscribeToEvent(e,t,i){if(i){this._subscribeToKeyedEvent(e,t,i);return}let s=this._listeners.get(e);s||(s=[],this._listeners.set(e,s)),s.push(new ie(t))}removeEventListener(e,t,i){if(i){this._removeKeyedEventListener(e,t,i);return}let s=this._listeners.get(e);s&&(s=s.filter(n=>n.getHandler()!==t),this._listeners.set(e,s))}_subscribeToKeyedEvent(e,t,i){let s=this._keyedListeners.get(e);s||(s=new Map,this._keyedListeners.set(e,s));let n=s.get(i);n||(n=[],s.set(i,n)),n.push(new ie(t))}_removeKeyedEventListener(e,t,i){let s=this._keyedListeners.get(e);if(!s)return;let n=s.get(i);n&&(n=n.filter(r=>r.getHandler()!==t),s.set(i,n))}emitEvent(e,t,i){if(i){this._emitKeyedEvent(e,t,i);return}const s=this._listeners.get(e);s&&s.forEach(n=>{n.execute(t)})}_emitKeyedEvent(e,t,i){const s=this._keyedListeners.get(e);if(!s)return;const n=s.get(i);n&&n.forEach(r=>{r.execute(t)})}_convertListener(e){return t=>e(t)}subscribeToPluginReadyEvent(e,t,i=!1){if(i){this.subscribeToEvent(de,this._convertListener(e),t);return}this.subscribeToEvent(ce,this._convertListener(e),t)}emitPluginReadyEvent(e,t,i=!1){if(i){this.emitEvent(de,t,e);return}this.emitEvent(ce,t,e)}reset(){this._listeners.clear()}}let Be=0;function se(){return Be+++""}class ne{constructor(e,t,i,s,n,r,u){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=se(),this._pluginFactory=e,this._pluginName=t,this._registry=i,this._eventBus=s,this._appEventBus=n,this._internalEventBus=new L,this._config=r,this._layoutIdViewMapWaitingToEnter=new Map,this._pluginKey=u,this._apiData={},this._appEventBus.subscribeToPluginReadyEvent(()=>{this._isReady=!0},this._pluginName,!0)}get api(){return this._apiData}_setApi(e){this._apiData=e}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(e){return e?this._registry.getViewsByNameForPlugin(this,e):this._registry.getViewsForPlugin(this)}getView(e){return e?this._registry.getViewsByNameForPlugin(this,e)[0]:this._registry.getViewsForPlugin(this)[0]}getViewById(e){return this._registry.getViewById(e)}addView(e){this._registry.assignViewToPlugin(e,this)}setInternalEventBus(e){this._internalEventBus=e}get internalBusEvent(){return this._internalEventBus}emit(e,t){this._internalEventBus.emitEvent(e,t)}on(e,t){this._internalEventBus.subscribeToEvent(e,t)}removeListener(e,t){this._internalEventBus.removeEventListener(e,t)}useEventPlugin(e,t={}){const i=this._registry.createPlugin(e,this._eventBus,t);return this._registry.associateEventPluginWithPlugin(this.id,i.id),i}notifyAboutDataChanged(e){this.onDataChanged(e)}onDataChanged(e){}removeView(e){e.onRemoveCallback?this._invokeRemoveCallback(e):this._deleteView(e),this.onViewRemoved(e)}_invokeRemoveCallback(e){const t=this._createTemporaryView(e);requestAnimationFrame(()=>{var i;(i=t.onRemoveCallback)==null||i.call(t,t,()=>{var s,n;if((s=e.onAddCallbacks)!=null&&s.afterRemoved&&e.layoutId){const r=this._layoutIdViewMapWaitingToEnter.get(e.layoutId);(n=r==null?void 0:r.onAddCallbacks)==null||n.afterEnter(r),this._layoutIdViewMapWaitingToEnter.delete(e.layoutId)}this._deleteView(t,!0)}),setTimeout(()=>{t.element.parentElement&&this._deleteView(t,!0)},1e4)})}_deleteView(e,t=!1){(t||!e.layoutId)&&(this._registry.removeViewById(e.id,this.id),e.element.remove())}_createTemporaryView(e){const t=e.previousRect.viewportOffset,i=e.previousRect.size,s=e.rotation.degrees<0?0:Math.sin(e.rotation.radians)*i.height*e.scale.y,n=e.rotation.degrees>0?0:Math.sin(e.rotation.radians)*i.width*e.scale.y,r=e.element.cloneNode(!0);e.element.remove(),r.style.cssText="",r.style.position="absolute",r.style.left=`${t.left+s}px`,r.style.top=`${t.top-n}px`,r.style.width=`${i.width}px`,r.style.height=`${i.height}px`,r.style.transform=` +(function(f,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(f=typeof globalThis<"u"?globalThis:f||self,m(f.Veloxi={}))})(this,function(f){"use strict";var Lt=Object.defineProperty;var Bt=(f,m,b)=>m in f?Lt(f,m,{enumerable:!0,configurable:!0,writable:!0,value:b}):f[m]=b;var a=(f,m,b)=>(Bt(f,typeof m!="symbol"?m+"":m,b),b);class m{constructor(e){a(this,"x");a(this,"y");a(this,"target");this.x=e.x,this.y=e.y,this.target=e.target}}class b extends m{}class N extends m{}class I extends m{}class C extends m{}class O{constructor(e){a(this,"pluginId");a(this,"pluginName");a(this,"viewName");a(this,"dataName");a(this,"dataValue");this.event=e,this.pluginId=e.pluginId,this.pluginName=e.pluginName,this.viewName=e.viewName,this.dataName=e.dataName,this.dataValue=e.dataValue}}function Ie(o){return o.replace(/(?:^\w|[A-Z]|\b\w)/g,function(e,t){return t===0?e.toLowerCase():e.toUpperCase()}).replace(/\s+/g,"").replace(/-+/g,"")}function Ce(o){return o.split("").map((e,t)=>e.toUpperCase()===e?`${t!==0?"-":""}${e.toLowerCase()}`:e).join("")}class k{constructor(e){a(this,"node");this.node=e.node}}class z{constructor(e){a(this,"node");this.node=e.node}}class Le{constructor(e){a(this,"_eventBus");a(this,"_observer");this._eventBus=e,this._observer=new MutationObserver(this._handler.bind(this)),this._observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0})}_handler(e){e.forEach(t=>{t.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(k,{node:r});const u=r.querySelectorAll("[data-vel-plugin]");u.length&&u.forEach(h=>{this._eventBus.emitEvent(k,{node:h})})}),t.removedNodes.forEach(n=>{if(!(n instanceof HTMLElement)||typeof n.dataset.velProcessing<"u")return;const r=n.querySelectorAll("[data-vel-plugin]");r.length&&r.forEach(u=>{this._eventBus.emitEvent(z,{node:u})}),this._eventBus.emitEvent(z,{node:n})});const i=t.attributeName;if(i&&/data-vel-data-.+/gi.test(i)){const n=t.target,r=n.dataset.velPluginId||"",u=n.dataset.velPlugin||"",h=n.dataset.velView||"",c=n.getAttribute(i);if(c&&c!==t.oldValue){const d=Ie(i.replace("data-vel-data-",""));this._eventBus.emitEvent(O,{pluginId:r,pluginName:u,viewName:h,dataName:d,dataValue:c})}}})}}class Be{execute(e){this.call(e)}}class ie extends Be{constructor(t){super();a(this,"_handler");this._handler=t}getHandler(){return this._handler}call(t){this._handler(t)}}class L{constructor(){a(this,"_listeners",new Map);a(this,"_keyedListeners",new Map)}subscribeToEvent(e,t,i){if(i){this._subscribeToKeyedEvent(e,t,i);return}let s=this._listeners.get(e);s||(s=[],this._listeners.set(e,s)),s.push(new ie(t))}removeEventListener(e,t,i){if(i){this._removeKeyedEventListener(e,t,i);return}let s=this._listeners.get(e);s&&(s=s.filter(n=>n.getHandler()!==t),this._listeners.set(e,s))}_subscribeToKeyedEvent(e,t,i){let s=this._keyedListeners.get(e);s||(s=new Map,this._keyedListeners.set(e,s));let n=s.get(i);n||(n=[],s.set(i,n)),n.push(new ie(t))}_removeKeyedEventListener(e,t,i){let s=this._keyedListeners.get(e);if(!s)return;let n=s.get(i);n&&(n=n.filter(r=>r.getHandler()!==t),s.set(i,n))}emitEvent(e,t,i){if(i){this._emitKeyedEvent(e,t,i);return}const s=this._listeners.get(e);s&&s.forEach(n=>{n.execute(t)})}_emitKeyedEvent(e,t,i){const s=this._keyedListeners.get(e);if(!s)return;const n=s.get(i);n&&n.forEach(r=>{r.execute(t)})}_convertListener(e){return t=>e(t)}subscribeToPluginReadyEvent(e,t,i=!1){if(i){this.subscribeToEvent(ge,this._convertListener(e),t);return}this.subscribeToEvent(de,this._convertListener(e),t)}emitPluginReadyEvent(e,t,i=!1){if(i){this.emitEvent(ge,t,e);return}this.emitEvent(de,t,e)}reset(){this._listeners.clear()}}let Se=0;function se(){return Se+++""}class ne{constructor(e,t,i,s,n,r,u){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=se(),this._pluginFactory=e,this._pluginName=t,this._registry=i,this._eventBus=s,this._appEventBus=n,this._internalEventBus=new L,this._config=r,this._layoutIdViewMapWaitingToEnter=new Map,this._pluginKey=u,this._apiData={},this._appEventBus.subscribeToPluginReadyEvent(()=>{this._isReady=!0},this._pluginName,!0)}get api(){return this._apiData}_setApi(e){this._apiData=e}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(e){return e?this._registry.getViewsByNameForPlugin(this,e):this._registry.getViewsForPlugin(this)}getView(e){return e?this._registry.getViewsByNameForPlugin(this,e)[0]:this._registry.getViewsForPlugin(this)[0]}getViewById(e){return this._registry.getViewById(e)}addView(e){this._registry.assignViewToPlugin(e,this)}setInternalEventBus(e){this._internalEventBus=e}get internalBusEvent(){return this._internalEventBus}emit(e,t){this._internalEventBus.emitEvent(e,t)}on(e,t){this._internalEventBus.subscribeToEvent(e,t)}removeListener(e,t){this._internalEventBus.removeEventListener(e,t)}useEventPlugin(e,t={}){const i=this._registry.createPlugin(e,this._eventBus,t);return this._registry.associateEventPluginWithPlugin(this.id,i.id),i}notifyAboutDataChanged(e){this.onDataChanged(e)}onDataChanged(e){}removeView(e){e.onRemoveCallback?this._invokeRemoveCallback(e):this._deleteView(e),this.onViewRemoved(e)}_invokeRemoveCallback(e){const t=this._createTemporaryView(e);requestAnimationFrame(()=>{var i;(i=t.onRemoveCallback)==null||i.call(t,t,()=>{var s,n;if((s=e.onAddCallbacks)!=null&&s.afterRemoved&&e.layoutId){const r=this._layoutIdViewMapWaitingToEnter.get(e.layoutId);(n=r==null?void 0:r.onAddCallbacks)==null||n.afterEnter(r),this._layoutIdViewMapWaitingToEnter.delete(e.layoutId)}this._deleteView(t,!0)}),setTimeout(()=>{t.element.parentElement&&this._deleteView(t,!0)},1e4)})}_deleteView(e,t=!1){(t||!e.layoutId)&&(this._registry.removeViewById(e.id,this.id),e.element.remove())}_createTemporaryView(e){const t=e.previousRect.viewportOffset,i=e.previousRect.size,s=e.rotation.degrees<0?0:Math.sin(e.rotation.radians)*i.height*e.scale.y,n=e.rotation.degrees>0?0:Math.sin(e.rotation.radians)*i.width*e.scale.y,r=e.element.cloneNode(!0);e.element.remove(),r.style.cssText="",r.style.position="absolute",r.style.left=`${t.left+s}px`,r.style.top=`${t.top-n}px`,r.style.width=`${i.width}px`,r.style.height=`${i.height}px`,r.style.transform=` scale3d(${e.scale.x}, ${e.scale.y}, 1) rotate(${e.rotation.degrees}deg) - `,r.style.pointerEvents="none",r.dataset.velRemoved="",document.body.appendChild(r);const u=this._registry.createView(r,e.name);return u.setAsTemporaryView(),u.styles.position="absolute",u.styles.left=`${t.left+s}px`,u.styles.top=`${t.top-n}px`,u.rotation.setDegrees(e.rotation.degrees,!1),u.scale.set({x:e.scale.x,y:e.scale.y},!1),u.size.set({width:e._localWidth,height:e._localHeight},!1),e._copyAnimatorsToAnotherView(u),e.onRemoveCallback&&u.onRemove(e.onRemoveCallback),u}onViewRemoved(e){}notifyAboutViewAdded(e){this.onViewAdded(e),this._invokeAddCallbacks(e)}_invokeAddCallbacks(e){var t,i,s;!((t=e.onAddCallbacks)!=null&&t.onInitialLoad)&&!this._initialized||((i=e.onAddCallbacks)==null||i.beforeEnter(e),!((s=e.onAddCallbacks)!=null&&s.afterRemoved)||!this._initialized?requestAnimationFrame(()=>{var n;(n=e.onAddCallbacks)==null||n.afterEnter(e)}):e.layoutId&&this._layoutIdViewMapWaitingToEnter.set(e.layoutId,e))}onViewAdded(e){}init(){!this._initialized&&this._isReady&&(this.setup(),this._initialized=!0)}setup(){}subscribeToEvents(e){}}class re extends ne{isRenderable(){return!0}isInitialized(){return this._initialized}get initialized(){return this._initialized}update(e,t){}render(){}addView(e){e.setPluginId(this.id),super.addView(e)}}class B extends ne{isRenderable(){return!1}}class ae{constructor(e){a(this,"_plugin");this._plugin=e}get initialized(){return this._plugin.isInitialized()}get config(){return this._plugin.config}setup(e){this._plugin.setup=e}api(e){this._plugin._setApi(e)}update(e){this._plugin.update=e}render(e){this._plugin.render=e}getViews(e){return this._plugin.getViews(e)}getView(e){return this._plugin.getView(e)}getViewById(e){return this._plugin.getViewById(e)}useEventPlugin(e,t={}){return this._plugin.useEventPlugin(e,t)}emit(e,t){this._plugin.emit(e,t)}on(e,t){this._plugin.on(e,t)}onDataChanged(e){this._plugin.onDataChanged=e}onViewRemoved(e){this._plugin.onViewRemoved=e}onViewAdded(e){this._plugin.onViewAdded=e}subscribeToEvents(e){this._plugin.subscribeToEvents=e}}function W(o,e,t,i,s,n){if(Se(o))return new o(o,o.pluginName,e,t,i,s,n);const r=new re(o,o.pluginName,e,t,i,s,n),u=new ae(r);return o(u),r}function Se(o){var e;return((e=o.prototype)==null?void 0:e.constructor.toString().indexOf("class "))===0}class l{constructor(e,t){a(this,"x");a(this,"y");this.x=e,this.y=t}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 e=new l(0,0),t=this.magnitude;return t!==0&&(e.x=this.x/t,e.y=this.y/t),e}add(e){this.x+=e.x,this.y+=e.y}sub(e){this.x-=e.x,this.y-=e.y}scale(e){this.x*=e,this.y*=e}dot(e){return this.x*e.x+this.y*e.y}equals(e){return this.x===e.x&&this.y===e.y}clone(){return new l(this.x,this.y)}static scale(e,t){return new l(e.x*t,e.y*t)}static sub(e,t){return new l(e.x-t.x,e.y-t.y)}static add(e,t){return new l(e.x+t.x,e.y+t.y)}}function oe(o,e,t){return Math.min(Math.max(o,e),t)}function Fe(o,e){return Math.floor(Math.random()*(e-o+1)+o)}function Me(o,e,t){return o+(e-o)*t}function p(o,e){const i=o-e;return Math.abs(i)<=.01}function De(o,e,t,i,s){return(o-e)/(t-e)*(s-i)+i}function $e(o,e,t){const i=e.getScroll(),s=e.position.x-i.x,n=e.position.y-i.y,r=o.x||s,u=o.y||n,h=Math.abs(s-r),c=Math.abs(n-u),g=Math.sqrt(h*h+c*c);return 1-oe(0,g/t,1)}function w(o){let e=o.match(/^([\d.]+)([a-zA-Z%]*)$/);e||(e="0px".match(/^([\d.]+)([a-zA-Z%]*)$/));const t=parseFloat(e[1]),i=e[2];return{value:t,unit:i,valueWithUnit:o}}function Oe(o,e,t=!1){if(o===e)return!0;if(o.length!==e.length)return!1;for(let i=0;iw(i)),t={value:0,unit:"",valueWithUnit:"0"};switch(e.length){case 1:return new T(e[0],e[0],e[0],e[0]);case 2:return new T(e[0],e[1],e[0],e[1]);case 3:return new T(e[0],e[1],e[2],e[1]);case 4:return new T(e[0],e[1],e[3],e[2]);default:return new T(t,t,t,t)}}function ke(o,e){const t=r(o.topLeft,e),i=r(o.topRight,e),s=r(o.bottomLeft,e),n=r(o.bottomRight,e);return{v:{topLeft:t.v,topRight:i.v,bottomRight:n.v,bottomLeft:s.v},h:{topLeft:t.h,topRight:i.h,bottomRight:n.h,bottomLeft:s.h}};function r(u,h){if(u.unit==="%")return{h:w(`${u.value}%`),v:w(`${u.value}%`)};const c=u.value/h.width*100,g=u.value/h.height*100;return{h:w(`${c}%`),v:w(`${g}%`)}}}function le(o,e){return p(o.topLeft.value,e.topLeft.value)&&p(o.topRight.value,e.topRight.value)&&p(o.bottomRight.value,e.bottomRight.value)&&p(o.bottomLeft.value,e.bottomLeft.value)}class ze{constructor(e){a(this,"_value");this._value=e}get value(){return this._value}equals(e){return p(this.value,e.value)}}function We(o){return new ze(parseFloat(o))}class Ue{constructor(e,t){a(this,"_x");a(this,"_y");this._x=e,this._y=t}get value(){return new l(this._x,this._y)}}function qe(o,e){const[t,i]=o.split(" "),s=w(t),n=w(i);return new Ue(s.value/e.width,n.value/e.height)}function Ye(o){const e=Xe(o),t=je(o);return{viewportOffset:{left:Math.round(e.left),top:Math.round(e.top),right:Math.round(e.right),bottom:Math.round(e.bottom)},pageOffset:{top:t.top,left:t.left},size:{width:o.offsetWidth,height:o.offsetHeight}}}function Xe(o){const e=o.getBoundingClientRect();return{left:e.left,top:e.top,right:e.right,bottom:e.bottom,width:e.width,height:e.height}}function je(o){let e=o,t=0,i=0;for(;e;)t+=e.offsetTop,i+=e.offsetLeft,e=e.offsetParent;return{top:t,left:i}}class He{constructor(e){a(this,"_element");a(this,"_rect");a(this,"_computedStyle");this._rect=Ye(e),this._computedStyle=getComputedStyle(e),this._element=e}read(e){switch(e){case"opacity":return this.opacity;case"borderRadius":return this.borderRadius}}get rect(){return this._rect}get opacity(){return We(this._computedStyle.opacity)}get borderRadius(){return U(this._computedStyle.borderRadius)}get origin(){return qe(this._computedStyle.transformOrigin,this._rect.size)}get scroll(){let e=this._element,t=0,i=0;for(;e;)t+=e.scrollTop,i+=e.scrollLeft,e=e.offsetParent;return i+=window.scrollX,t+=window.scrollY,{y:t,x:i}}}function q(o){return new He(o)}function Y(o,e){const t={set:(i,s,n)=>(typeof i[s]=="object"&&i[s]!==null?i[s]=Y(n,e):(e(),i[s]=n),!0),get:(i,s)=>typeof i[s]=="object"&&i[s]!==null?Y(i[s],e):i[s]};return new Proxy(o,t)}const E=.01,X={speed:15};class j{constructor(e){a(this,"name","dynamic");a(this,"_config");this._config=e}get config(){return this._config}}class Ke extends j{update({animatorProp:e,current:t,target:i,dt:s}){const n=l.sub(i,t),r=l.scale(n,this._config.speed);let u=l.add(t,l.scale(r,s));return this._shouldFinish(i,t,r)&&(u=i,requestAnimationFrame(()=>{e.callCompleteCallback()})),e.callUpdateCallback(),u}_shouldFinish(e,t,i){return l.sub(e,t).magnitude{e.callCompleteCallback()})),e.callUpdateCallback(),u}_shouldFinish(e,t,i){return Math.abs(e-t){const u=t[r],h=n.value===0?u.unit:n.unit,g=(n.value-u.value)*this._config.speed,_=u.value+g*s;let d=w(`${_}${h}`);return this._shouldFinish(n.value,u.value,g)&&(d=n,requestAnimationFrame(()=>{e.callCompleteCallback()})),e.callUpdateCallback(),d})}_shouldFinish(e,t,i){return Math.abs(e-t){e.animatorProp.callCompleteCallback()}),e.target}}const K={stiffness:.5,damping:.75,speed:10},x=.01;class G{constructor(e){a(this,"name","spring");a(this,"_config");this._config=e}get config(){return this._config}}class Je extends G{constructor(){super(...arguments);a(this,"_velocity",new l(0,0))}update({animatorProp:t,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 u=l.add(i,l.scale(this._velocity,n*this._config.speed));return this._shouldFinish(s,i)&&(u=s,requestAnimationFrame(()=>{t.callCompleteCallback()})),u}_shouldFinish(t,i){return l.sub(t,i).magnitude{t.callCompleteCallback()})),u}_shouldFinish(t,i){return Math.abs(t-i){const h=i[u],c=r.value===0?h.unit:r.unit,g=-(h.value-r.value)*this._config.stiffness;this._velocity+=g,this._velocity*=this._config.damping;const _=h.value+this._velocity*n*this._config.speed;let d=w(`${_}${c}`);return this._shouldFinish(r.value,h.value)&&(d=r,requestAnimationFrame(()=>{t.callCompleteCallback()})),d})}_shouldFinish(t,i){return Math.abs(t-i){e.callCompleteCallback()}),i):l.add(t,l.scale(l.sub(i,t),this._config.ease(n)))}}class st extends J{update({animatorProp:e,initial:t,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return p(n,1)?(requestAnimationFrame(()=>{e.callCompleteCallback()}),i):t.map((r,u)=>{const h=i[u],c=h.value===0?r.unit:h.unit,g=r.value+this._config.ease(n)*(i[u].value-r.value);return w(`${g}${c}`)})}}class nt extends J{update({animatorProp:e,initial:t,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return p(n,1)?(requestAnimationFrame(()=>{e.callCompleteCallback()}),i):t+(i-t)*this._config.ease(n)}}class Q{createAnimatorByName(e,t){switch(e){case"instant":return this.createInstantAnimator();case"dynamic":return this.createDynamicAnimator(t);case"tween":return this.createTweenAnimator(t);case"spring":return this.createSpringAnimator(t)}return this.createInstantAnimator()}}class S extends Q{createInstantAnimator(){return new H}createTweenAnimator(e){return new it({...Z,...e})}createDynamicAnimator(e){return new Ke({...X,...e})}createSpringAnimator(e){return new Je({...K,...e})}}class rt extends Q{createInstantAnimator(){return new H}createTweenAnimator(e){return new st({...Z,...e})}createDynamicAnimator(e){return new Ze({...X,...e})}createSpringAnimator(e){return new et({...K,...e})}}class he extends Q{createInstantAnimator(){return new H}createDynamicAnimator(e){return new Ge({...X,...e})}createTweenAnimator(e){return new nt({...Z,...e})}createSpringAnimator(e){return new Qe({...K,...e})}}function A(o){return structuredClone(o)}class at{constructor(e){a(this,"_viewProp");a(this,"_completeCallback");a(this,"_updateCallback");a(this,"_isAnimating");this._viewProp=e,this._isAnimating=!1}set(e,t){this._viewProp.setAnimator(e,t)}get name(){return this._viewProp.getAnimator().name}onComplete(e){this._completeCallback=e}get isAnimating(){return this._isAnimating}markAsAnimating(){this._isAnimating=!0}callCompleteCallback(){var e;(e=this._completeCallback)==null||e.call(this),this._isAnimating=!1}onUpdate(e){this._updateCallback=e}callUpdateCallback(){var e;(e=this._updateCallback)==null||e.call(this)}}class R{constructor(e,t,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");a(this,"_previousRenderValue");this._animatorProp=new at(this),this._animatorFactory=e,this._initialValue=A(t),this._previousValue=A(t),this._targetValue=A(t),this._currentValue=A(t),this._hasChanged=!1,this._previousRenderValue=void 0,this._view=i,this._animator=this._animatorFactory.createInstantAnimator()}get shouldRender(){return!0}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(e,t){this._animator=this._animatorFactory.createAnimatorByName(e,t)}_setTarget(e,t=!0){var i,s;this._previousValue=A(this._currentValue),this._targetValue=e,t?((s=(i=this._animator).reset)==null||s.call(i),this.animator.markAsAnimating()):this._currentValue=e,this._hasChanged=!0}hasChanged(){return this._hasChanged}destroy(){this._hasChanged=!1}update(e,t){}}class ot extends R{constructor(){super(...arguments);a(this,"_invertedBorderRadius");a(this,"_forceStyleUpdateThisFrame",!1);a(this,"_updateWithScale",!1)}setFromElementPropValue(t){this._setTarget([t.value.topLeft,t.value.topRight,t.value.bottomRight,t.value.bottomLeft],!0)}enableUpdateWithScale(){this._updateWithScale=!0}disableUpdateWithScale(){this._updateWithScale=!1}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(t,i=!0){let s;if(typeof t=="string"){const c=U(t.trim());s={topLeft:c.value.topLeft.valueWithUnit,topRight:c.value.topRight.valueWithUnit,bottomRight:c.value.bottomRight.valueWithUnit,bottomLeft:c.value.bottomLeft.valueWithUnit}}else s=t;const n=s.topLeft?w(s.topLeft):this._currentValue[0],r=s.topRight?w(s.topRight):this._currentValue[1],u=s.bottomRight?w(s.bottomRight):this._currentValue[2],h=s.bottomLeft?w(s.bottomLeft):this._currentValue[3];this._setTarget([n,r,u,h],i)}reset(t=!0){this._setTarget(this._initialValue,t)}update(t,i){if(this._forceStyleUpdateThisFrame)this._hasChanged=!0,this._forceStyleUpdateThisFrame=!1;else if(this._view.scale.isAnimating&&this._updateWithScale)this._hasChanged=!0;else if(ue(this._targetValue,this._currentValue)){this._hasChanged=!ue(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:i}),this._updateWithScale&&this._applyScaleInverse()}applyScaleInverse(){this._updateWithScale&&(this._forceStyleUpdateThisFrame=!0)}_applyScaleInverse(){if(p(this._view.scale.x,1)&&p(this._view.scale.y,1))return;const t=this._rect.size.width*this._view.scale.x,i=this._rect.size.height*this._view.scale.y;this._invertedBorderRadius=ke(U(`${this._currentValue[0].valueWithUnit} ${this._currentValue[1].valueWithUnit} ${this._currentValue[2].valueWithUnit} ${this._currentValue[3].valueWithUnit}`).value,{width:t,height:i})}get shouldRender(){return this._hasChanged?this._previousRenderValue?!(le(this.renderValue.v,this._previousRenderValue.v)&&le(this.renderValue.h,this._previousRenderValue.h)):!0:!1}get renderValue(){return this.invertedBorderRadius?{v:{topLeft:this.invertedBorderRadius.v.topLeft,topRight:this.invertedBorderRadius.v.topRight,bottomLeft:this.invertedBorderRadius.v.bottomLeft,bottomRight:this.invertedBorderRadius.v.bottomRight},h:{topLeft:this.invertedBorderRadius.h.topLeft,topRight:this.invertedBorderRadius.h.topRight,bottomLeft:this.invertedBorderRadius.h.bottomLeft,bottomRight:this.invertedBorderRadius.h.bottomRight}}:{v:{topLeft:this.value.topLeft,topRight:this.value.topRight,bottomLeft:this.value.bottomLeft,bottomRight:this.value.bottomRight},h:{topLeft:this.value.topLeft,topRight:this.value.topRight,bottomLeft:this.value.bottomLeft,bottomRight:this.value.bottomRight}}}projectStyles(){const t=this.renderValue,i=`border-radius: ${t.h.topLeft.valueWithUnit} ${t.h.topRight.valueWithUnit} ${t.h.bottomRight.valueWithUnit} ${t.h.bottomLeft.valueWithUnit} / ${t.v.topLeft.valueWithUnit} ${t.v.topRight.valueWithUnit} ${t.v.bottomRight.valueWithUnit} ${t.v.bottomLeft.valueWithUnit};`;return this._previousRenderValue=t,i}isTransform(){return!1}}class ut extends R{setFromElementPropValue(e){this._setTarget(e.value,!0)}get value(){return this._currentValue}set(e,t=!0){this._setTarget(e,t)}reset(e=!0){this._setTarget(1,e)}update(e,t){if(p(this._targetValue,this._currentValue)){this._hasChanged=!p(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:t})}get shouldRender(){return this._hasChanged?typeof this._previousRenderValue>"u"?!0:this.renderValue!==this._previousRenderValue:!1}get renderValue(){return this.value}projectStyles(){const e=this.renderValue,t=`opacity: ${e};`;return this._previousRenderValue=e,t}isTransform(){return!1}}class lt extends R{get x(){return this._currentValue.x}get y(){return this._currentValue.y}set(e){const i={...{x:this.x,y:this.y},...e};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)}get shouldRender(){if(!this._hasChanged)return!1;if(!this._previousRenderValue)return!0;const e=this.renderValue;return!(p(e.x,this._previousRenderValue.x)&&p(e.y,this._previousRenderValue.y))}get renderValue(){return new l(this.x*100,this.y*100)}projectStyles(){const e=this.renderValue,t=`transform-origin: ${e.x}% ${e.y}%;`;return this._previousRenderValue=e,t}isTransform(){return!1}}class ht extends R{constructor(){super(...arguments);a(this,"_animateLayoutUpdateNextFrame",!1);a(this,"_parentScaleInverse",new l(1,1))}get _parentDiff(){let t=this._view._parent,i=0,s=0;if(t){const n=t.rect.pageOffset,r=t.getScroll(),u={left:t.previousRect.viewportOffset.left+r.x,top:t.previousRect.viewportOffset.top+r.y};i=u.left-n.left,s=u.top-n.top}return{parentDx:i,parentDy:s}}get x(){return this._currentValue.x+this._rect.pageOffset.left+this._parentDiff.parentDx}get y(){return this._currentValue.y+this._rect.pageOffset.top+this._parentDiff.parentDy}get initialX(){return this._rect.pageOffset.left}get initialY(){return this._rect.pageOffset.top}progressTo(t){const i=typeof t.x>"u"?this.initialX:t.x,s=typeof t.y>"u"?this.initialY:t.y,n=new l(i,s),r=new l(this.initialX,this.initialY),u=new l(this.x,this.y),h=l.sub(u,r),c=l.sub(n,r);return 1-l.sub(c,h).magnitude/c.magnitude}set(t,i=!0){const n={...{x:this.x,y:this.y},...t};this._setTarget(new l(n.x-this._rect.pageOffset.left,n.y-this._rect.pageOffset.top),i)}reset(t=!0){this._setTarget(new l(0,0),t)}update(t,i){if((this._view.isInverseEffectEnabled||this._view.isLayoutTransitionEnabled)&&!this._view.isTemporaryView&&this._runLayoutTransition(),this._view.isInverseEffectEnabled){const c=this._view._parent,g=c?c.scale.x:1,_=c?c.scale.y:1;this._parentScaleInverse=new l(1/g,1/_),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,u=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*u,this._previousValue.y*h),ts:t,dt:i}),this._currentValue=new l(this._currentValue.x/n,this._currentValue.y/r)}_runLayoutTransition(){const t=!(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=t||i,n=this._rect.pageOffset.left-this._previousRect.pageOffset.left,r=this._rect.pageOffset.top-this._previousRect.pageOffset.top,u=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(u)&&u!==1||!Number.isNaN(h)&&h!==1?c=!0:c=(()=>{const g=this._view._parents;for(let _=0;_"u")return!0;const t=this.renderValue;return!p(t,this._previousRenderValue)}get renderValue(){return this._currentValue}projectStyles(){const t=this.renderValue,i=`rotate(${t}${this._unit})`;return this._previousRenderValue=t,i}isTransform(){return!0}}class dt extends R{constructor(){super(...arguments);a(this,"_animateLayoutUpdateNextFrame",!1)}get x(){return this._currentValue.x}get y(){return this._currentValue.y}set(t,i=!0){const r={...{x:this._currentValue.x,y:this._currentValue.y},...typeof t=="number"?{x:t,y:t}:t};this._setTarget(new l(r.x,r.y),i)}setWithSize(t,i=!0){let s=this._currentValue.x,n=this._currentValue.y;t.width&&(s=t.width/this._rect.size.width),t.height&&(n=t.height/this._rect.size.height),!t.width&&t.height&&(s=n),!t.height&&t.width&&(n=s);const r={x:s,y:n};this._setTarget(new l(r.x,r.y),i)}reset(t=!0){this._setTarget(new l(1,1),t)}update(t,i){if((this._view.isInverseEffectEnabled||this._view.isLayoutTransitionEnabled)&&!this._view.isTemporaryView&&this._runLayoutTransition(),this._view.isInverseEffectEnabled){const s=this._view._parent,n=s?s.scale.x:1,r=s?s.scale.y:1;this._hasChanged=n!==1||r!==1}this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y||(this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:new l(this._previousValue.x,this._previousValue.y),ts:t,dt:i}))}_runLayoutTransition(){const t=!(this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y),i=this._previousRect.size.width/this._rect.size.width,s=this._previousRect.size.height/this._rect.size.height;let n=!1;if((!Number.isNaN(i)&&i!==1||!Number.isNaN(s)&&s!==1)&&(n=!0),n){if(this._currentValue.x!==1||this._currentValue.y!==1){const g=this._view.previousRect.size.width/this._view.rect.size.width,_=this._view.previousRect.size.height/this._view.rect.size.height;this._setTarget(new l(this._currentValue.x*g,this._currentValue.y*_),!1),t&&(this._animateLayoutUpdateNextFrame=!0);return}const r=this._previousRect.size.width/this._rect.size.width,u=this._previousRect.size.height/this._rect.size.height,h=r,c=u;this._view.viewProps.borderRadius.applyScaleInverse(),this._setTarget(new l(h,c),!1),this._animateLayoutUpdateNextFrame=!0}else this._animateLayoutUpdateNextFrame&&(this._setTarget(this._initialValue,!0),this._animateLayoutUpdateNextFrame=!1)}get shouldRender(){if(!this._hasChanged)return!1;if(!this._previousRenderValue)return!0;const t=this.renderValue;return!(p(t.x,this._previousRenderValue.x)&&p(t.y,this._previousRenderValue.y))}get renderValue(){const t=this._view._parent?this._view._parent.scale.x:1,i=this._view._parent?this._view._parent.scale.y:1,s=this._currentValue.x/t,n=this._currentValue.y/i;return new l(s,n)}projectStyles(){const t=this.renderValue,i=`scale3d(${t.x}, ${t.y}, 1)`;return this._previousRenderValue=t,i}isTransform(){return!0}}class gt extends R{get width(){return this._view.rect.size.width}get height(){return this._view.rect.size.height}get localWidth(){return this._currentValue.x}get localHeight(){return this._currentValue.y}get widthAfterScale(){const e=this._view.scale.x;return this.localWidth*e}get heightAfterScale(){const e=this._view.scale.y;return this.localHeight*e}get initialWidth(){return this._initialValue.x}get initialHeight(){return this._initialValue.y}set(e,t=!0){const s={...{width:this._currentValue.x,height:this._currentValue.y},...e};this._setTarget(new l(s.width,s.height),t)}setWidth(e,t=!0){const s={...{width:this._currentValue.x,height:this._currentValue.y},width:e};this._setTarget(new l(s.width,s.height),t)}setHeight(e,t=!0){const s={...{width:this._currentValue.x,height:this._currentValue.y},height:e};this._setTarget(new l(s.width,s.height),t)}reset(e=!0){this._setTarget(new l(this.initialWidth,this.initialHeight),e)}update(e,t){this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y||(this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:this._previousValue,ts:e,dt:t}))}get shouldRender(){if(!this._hasChanged)return!1;if(!this._previousRenderValue)return!0;const e=this.renderValue;return!(p(e.x,this._previousRenderValue.x)&&p(e.y,this._previousRenderValue.y))}get renderValue(){return new l(this._currentValue.x,this._currentValue.y)}projectStyles(){const e=this.renderValue,t=`width: ${e.x}px; height: ${e.y}px;`;return this._previousRenderValue=e,t}isTransform(){return!1}}class _t{constructor(e){a(this,"_props",new Map);this._props.set("position",new ht(new S,new l(0,0),e)),this._props.set("scale",new dt(new S,new l(1,1),e)),this._props.set("rotation",new ct(new he,0,e)),this._props.set("size",new gt(new S,new l(e.rect.size.width,e.rect.size.height),e)),this._props.set("opacity",new ut(new he,e.elementReader.opacity.value,e)),this._props.set("borderRadius",new ot(new rt,[e.elementReader.borderRadius.value.topLeft,e.elementReader.borderRadius.value.topRight,e.elementReader.borderRadius.value.bottomRight,e.elementReader.borderRadius.value.bottomLeft],e)),this._props.set("origin",new lt(new S,e.elementReader.origin.value,e))}allProps(){return Array.from(this._props.values())}allPropNames(){return Array.from(this._props.keys())}getPropByName(e){return this._props.get(e)}get position(){return this._props.get("position")}get scale(){return this._props.get("scale")}get rotation(){return this._props.get("rotation")}get size(){return this._props.get("size")}get opacity(){return this._props.get("opacity")}get borderRadius(){return this._props.get("borderRadius")}get origin(){return this._props.get("origin")}}class pt{constructor(e,t,i,s){a(this,"id");a(this,"name");a(this,"element");a(this,"styles",{});a(this,"_viewProps");a(this,"_previousRect");a(this,"_onAddCallbacks");a(this,"_onRemoveCallback");a(this,"_skipFirstRenderFrame");a(this,"_layoutTransition");a(this,"_registry");a(this,"_layoutId");a(this,"_elementReader");a(this,"_temporaryView");a(this,"_inverseEffect");a(this,"_renderNextTick");this.id=se(),this.name=t,this.element=e,this._elementReader=q(e),this._previousRect=this._elementReader.rect,this._viewProps=new _t(this),this._skipFirstRenderFrame=!0,this._layoutId=s,this._layoutTransition=!1,this._registry=i,this.element.dataset.velViewId=this.id,this._temporaryView=!1,this._inverseEffect=!1,this.styles=Y(this.styles,()=>{this._renderNextTick=!0}),this._renderNextTick=!1}destroy(){this._viewProps.allProps().forEach(e=>e.destroy()),this.element.removeAttribute("data-vel-view-id"),this.element.removeAttribute("data-vel-plugin-id"),this._renderNextTick=!0}get elementReader(){return this._elementReader}setElement(e){this.element=e,this._elementReader=q(this.element),this.element.dataset.velViewId=this.id}get layoutId(){return this._layoutId}get position(){return this._viewProps.position}get scale(){return this._viewProps.scale}get _children(){return Array.from(this.element.children).map(t=>t.dataset.velViewId).filter(t=>t&&typeof t=="string").map(t=>this._registry.getViewById(t)).filter(t=>!!t)}get _parent(){var i;const e=this.element.parentElement;if(!e)return;const t=e.closest("[data-vel-view-id]");if((i=t==null?void 0:t.dataset)!=null&&i.velViewId)return this._registry.getViewById(t.dataset.velViewId)}get _parents(){var i;const e=[];let t=this.element.parentElement;if(!t)return e;for(t=t.closest("[data-vel-view-id]");t;){const s=t.dataset.velViewId;if(s){const n=this._registry.getViewById(s);n&&e.push(n)}t=(i=t.parentElement)==null?void 0:i.closest("[data-vel-view-id]")}return e}get rotation(){return this._viewProps.rotation}get size(){return this._viewProps.size}get _localWidth(){return this._viewProps.size.localWidth}get _localHeight(){return this._viewProps.size.localHeight}get opacity(){return this._viewProps.opacity}get borderRadius(){return this._viewProps.borderRadius}get origin(){return this._viewProps.origin}get data(){const e=this.element.dataset;return Object.keys(e).filter(s=>s.includes("velData")).map(s=>s.replace("velData","")).map(s=>`${s[0].toLowerCase()}${s.slice(1)}`).reduce((s,n)=>{const r=e[`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(e=>e.isLayoutTransitionEnabled)}get isInverseEffectEnabled(){return this._parents.some(e=>e._inverseEffect)}layoutTransition(e){this._layoutTransition=e,this.inverseEffect(e)}inverseEffect(e){this._inverseEffect=e,e&&this._children.forEach(t=>{if(t.position.animator.name==="instant"){const i=this.viewProps.position.getAnimator();t.position.setAnimator(i.name,i.config)}if(t.scale.animator.name==="instant"){const i=this.viewProps.scale.getAnimator();t.scale.setAnimator(i.name,i.config)}})}setAnimatorsFromParent(){let e=this._parent;for(;e&&!e._inverseEffect;)e=e._parent;if(e){if(this.position.animator.name==="instant"){const t=e.viewProps.position.getAnimator();this.position.setAnimator(t.name,t.config)}if(this.scale.animator.name==="instant"){const t=e.viewProps.scale.getAnimator();this.scale.setAnimator(t.name,t.config)}}}get _isRemoved(){return!this._registry.getViewById(this.id)}setPluginId(e){this.element.dataset.velPluginId=e}hasElement(e){return this.element.contains(e)}getScroll(){return this._elementReader.scroll}intersects(e,t){const i={x:this.rect.viewportOffset.left,y:this.rect.viewportOffset.top};return e>=i.x&&e<=i.x+this.size.width&&t>=i.y&&t<=i.y+this.size.height}overlapsWith(e){const t=e._localWidth*e.scale.x,i=e._localHeight*e.scale.y,s=this._localWidth*this.scale.x,n=this._localHeight*this.scale.y;return this.position.xe.position.x&&this.position.ye.position.y}distanceTo(e){const t=new l(this.position.x,this.position.y),i=new l(e.position.x,e.position.y);return l.sub(i,t).magnitude}read(){this._elementReader=q(this.element)}get rect(){return this._elementReader.rect}get previousRect(){return this._previousRect}update(e,t){this._viewProps.allProps().forEach(i=>i.update(e,t))}_updatePreviousRect(){this._previousRect=this._elementReader.rect}setAsTemporaryView(){this._temporaryView=!0}get isTemporaryView(){return this._temporaryView}get shouldRender(){return this._renderNextTick||this._viewProps.allProps().some(e=>e.shouldRender)}render(){if(!this.shouldRender)return;if(this._isRemoved&&this._skipFirstRenderFrame){this._skipFirstRenderFrame=!1;return}let e="";const t=this._viewProps.allProps(),i=t.filter(n=>n.isTransform()),s=t.filter(n=>!n.isTransform());if(i.some(n=>n.hasChanged())){const n=i.reduce((r,u,h)=>(r+=u.projectStyles(),h===i.length-1&&(r+=";"),r),"transform: ");e+=n}s.forEach(n=>{n.hasChanged()&&(e+=n.projectStyles())}),e+=this._getUserStyles(),this.element.style.cssText=e,this._renderNextTick=!1}_getUserStyles(){return Object.keys(this.styles).reduce((e,t)=>t?e+`${Ie(t)}: ${this.styles[t]};`:e,"")}markAsAdded(){delete this.element.dataset.velProcessing}onAdd(e){this._onAddCallbacks=e}onRemove(e){this._onRemoveCallback=e}get viewProps(){return this._viewProps}getPropByName(e){return this._viewProps.getPropByName(e)}_copyAnimatorsToAnotherView(e){e.viewProps.allPropNames().forEach(t=>{var s,n;const i=(s=this.viewProps.getPropByName(t))==null?void 0:s.getAnimator();i&&((n=e.viewProps.getPropByName(t))==null||n.setAnimator(i.name,i.config))})}}class ft{constructor(e,t){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);a(this,"_pluginNameToPluginFactoryMap",new Map);a(this,"_pluginNameToPluginConfigMap",new Map);this._appEventBus=e,this._eventBus=t}update(){this._handleRemovedViews(),this._handleAddedViews()}associateEventPluginWithPlugin(e,t){let i=this._eventPluginsPerPlugin.get(e);i||(i=[],this._eventPluginsPerPlugin.set(e,i)),i.push(t)}_handleRemovedViews(){const e=this._viewsToBeRemoved.filter(t=>t.dataset.velViewId);e.length&&(e.forEach(t=>{const i=t.dataset.velViewId;i&&this._handleRemoveView(i)}),this._viewsToBeRemoved=[])}_getPluginNameForElement(e){const t=e.dataset.velPlugin;if(t&&t.length>0)return t;const i=e.closest("[data-vel-plugin]");if(i)return i.dataset.velPlugin}_getPluginIdForElement(e){const t=this._getPluginNameForElement(e);if(!t)return;const i=e.closest("[data-vel-plugin-id]");if(i)return i.dataset.velPluginId;const s=this.getPluginByName(t);if(s)return s.id}_isScopedElement(e){const t=this._getPluginNameForElement(e);if(!t)return!1;const i=this._pluginNameToPluginFactoryMap.get(t),s=i==null?void 0:i.scope;return e.dataset.velView===s}_handleAddedViews(){this._viewsCreatedInPreviousFrame.forEach(s=>{s.markAsAdded()}),this._viewsCreatedInPreviousFrame=[];const e=this._viewsToBeCreated.filter(s=>this._isScopedElement(s)),t=this._viewsToBeCreated.filter(s=>!this._isScopedElement(s));this._viewsToBeCreated=[],e.forEach(s=>{const n=this._getPluginNameForElement(s),r=this._pluginNameToPluginFactoryMap.get(n),u=this._pluginNameToPluginConfigMap.get(n),h=s.dataset.velPluginKey,c=W(r,this,this._eventBus,this._appEventBus,u,h);this._plugins.push(c);const g=s.dataset.velView,_=this._createNewView(s,g,c);_.isInverseEffectEnabled&&_.setAnimatorsFromParent(),c.notifyAboutViewAdded(_)});const i=t.filter(s=>!!this._getPluginIdForElement(s));i.length!==0&&i.forEach(s=>{const n=this._getPluginIdForElement(s),r=s.dataset.velView;if(!r||!n)return;const u=this._getPluginById(n);if(!u)return;const h=this._getLayoutIdForElement(s,u);let c;h&&this._layoutIdToViewMap.has(h)?(c=this._layoutIdToViewMap.get(h),c.setElement(s),c.setPluginId(u.id),this._createChildrenForView(c,u)):c=this._createNewView(s,r,u),c.isInverseEffectEnabled&&c.setAnimatorsFromParent(),u.notifyAboutViewAdded(c)})}_getLayoutIdForElement(e,t){const i=e.dataset.velLayoutId;if(i)return`${i}-${t.id}`}_createNewView(e,t,i){const s=this._getLayoutIdForElement(e,i),n=this.createView(e,t,s);return i.addView(n),n.layoutId&&this._layoutIdToViewMap.set(n.layoutId,n),this._createChildrenForView(n,i),this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api,!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api)})}),n}_createChildrenForView(e,t){const i=e.element.querySelectorAll("*");if(i.length){if(Array.from(i).some(s=>this._getPluginNameForElement(s)!==t.pluginName)){console.log(`%c WARNING: The plugin "${t.pluginName}" has view(s) created for a different plugin. Make sure all views inside that plugin don't have data-vel-plugin set or the pluginName is set to "${t.pluginName}"`,"background: #885500");return}Array.from(i).forEach(s=>{const n=s,r=n.dataset.velView?n.dataset.velView:`${e.name}-child`,u=this._getLayoutIdForElement(n,t),h=this.createView(n,r,u);u&&!this._layoutIdToViewMap.has(u)&&this._layoutIdToViewMap.set(u,h),t.addView(h),t.notifyAboutViewAdded(h)})}}_handleRemoveView(e){this._plugins.forEach(t=>{if(!this._viewsPerPlugin.get(t.id))return;const s=this._getPluginViewById(t,e);s&&t.removeView(s)})}removeViewById(e,t){this._unassignViewFromPlugin(e,t),this._views=this._views.filter(i=>i.id!==e)}_unassignViewFromPlugin(e,t){const i=this._viewsPerPlugin.get(t);if(!i)return;const s=i.indexOf(e);s!==-1&&i.splice(s,1)}getViewById(e){return this._views.find(t=>t.id===e)}_getPluginById(e){return this._plugins.find(t=>t.id===e)}_getPluginViewById(e,t){return this.getViewsForPlugin(e).find(i=>i.id===t)}destroy(e,t){if(!e){this._destroyAll(t);return}let i=[];if(e&&e.length>0){const s=this.getPluginByName(e);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(u=>this._getPluginById(u)).filter(u=>typeof u<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._destroyPlugin(s)}),requestAnimationFrame(()=>{t==null||t()})})}_destroyPlugin(e){const t=this.getViewsForPlugin(e);t.forEach(i=>{i.layoutId&&this._layoutIdToViewMap.delete(i.layoutId),i.destroy()}),this._views=this._views.filter(i=>!t.find(s=>s.id===i.id)),this._viewsPerPlugin.delete(e.id),this._plugins=this._plugins.filter(i=>i.id!==e.id)}_destroyAll(e){this._views.forEach(t=>t.destroy()),requestAnimationFrame(()=>{this._plugins=[],this._views=[],this._viewsPerPlugin.clear(),this._viewsToBeCreated=[],this._viewsToBeRemoved=[],this._viewsCreatedInPreviousFrame=[],this._layoutIdToViewMap.clear(),this._eventPluginsPerPlugin.clear(),e==null||e()})}reset(e,t){let i=[];if(e&&e.length>0){const s=this.getPluginByName(e);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(u=>this._getPluginById(u)).filter(u=>typeof u<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._resetPlugin(s)}),requestAnimationFrame(()=>{t==null||t()})})}_resetPlugin(e){const t=e.config,i=e.pluginFactory,s=e.internalBusEvent,n=!e.isRenderable(),r=this.getViewsForPlugin(e);r.forEach(u=>{u.layoutId&&this._layoutIdToViewMap.delete(u.layoutId),u.destroy()}),this._views=this._views.filter(u=>!r.find(h=>h.id===u.id)),this._viewsPerPlugin.delete(e.id),this._plugins=this._plugins.filter(u=>u.id!==e.id),n||requestAnimationFrame(()=>{this.createPlugin(i,this._eventBus,t).setInternalEventBus(s)})}queueNodeToBeCreated(e){this._viewsToBeCreated.push(e)}queueNodeToBeRemoved(e){this._viewsToBeRemoved.push(e)}notifyPluginAboutDataChange(e){const t=this._plugins.filter(i=>i.id===e.pluginId);!t||!t.length||t.forEach(i=>{i.notifyAboutDataChanged({dataName:e.dataName,dataValue:e.dataValue,viewName:e.viewName})})}getPlugins(){return this._plugins}getRenderablePlugins(){function e(t){return t.isRenderable()}return this._plugins.filter(e)}getPluginByName(e,t){return this._plugins.find(i=>t?i.pluginKey===t&&i.pluginName===e:i.pluginName===e)}getPluginsByName(e,t){return this._plugins.filter(i=>t?i.pluginKey===t&&i.pluginName===e:i.pluginName===e)}hasPlugin(e){return e.pluginName?!!this.getPluginByName(e.pluginName):!1}createPlugin(e,t,i={}){if(!e.pluginName)throw Error(`Plugin ${e.name} must contain a pluginName field`);let s=[];if(e.scope){const u=document.querySelectorAll(`[data-vel-plugin=${e.pluginName}][data-vel-view=${e.scope}]`);this._pluginNameToPluginFactoryMap.has(e.pluginName)||this._pluginNameToPluginFactoryMap.set(e.pluginName,e),this._pluginNameToPluginConfigMap.has(e.pluginName)||this._pluginNameToPluginConfigMap.set(e.pluginName,i),u?s=Array.from(u):s=[document.documentElement]}else s=[document.documentElement];const n=s.map(u=>{const h=u.dataset.velPluginKey,c=W(e,this,t,this._appEventBus,i,h);this._plugins.push(c);let g=[];u!==document.documentElement&&g.push(u);const _=u.querySelectorAll(`[data-vel-plugin=${c.pluginName}]`);g=[...g,..._];const d=g.filter(v=>{if(!v.parentElement)return!0;const b=this._getPluginNameForElement(v.parentElement);return!(b&&b.length>0)});return d.length&&d.forEach(v=>{const y=v.dataset.velView;if(!y)return;const b=this._createNewView(v,y,c);c.notifyAboutViewAdded(b)}),c});if(n&&n.length>0)return n[0];const r=W(e,this,t,this._appEventBus,i);return e.scope||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(e,t,i){const s=new pt(e,t,this,i);return this._views.push(s),this._viewsCreatedInPreviousFrame.push(s),s}assignViewToPlugin(e,t){this._viewsPerPlugin.has(t.id)||this._viewsPerPlugin.set(t.id,[]);const i=this._viewsPerPlugin.get(t.id);i.includes(e.id)||i.push(e.id)}getViewsForPlugin(e){const t=this._viewsPerPlugin.get(e.id);return t?t.map(s=>this._views.find(n=>n.id===s)).filter(s=>!!s):[]}getViewsByNameForPlugin(e,t){return this.getViewsForPlugin(e).filter(i=>i.name===t)}}class ce{constructor(e){a(this,"pluginApi");this.pluginApi=e.pluginApi}}class de{constructor(e){a(this,"pluginApi");this.pluginApi=e.pluginApi}}class ee{constructor(){a(this,"_previousTime",0);a(this,"_registry");a(this,"_eventBus");a(this,"_appEventBus");this._eventBus=new L,this._appEventBus=new L,this._registry=new ft(this._appEventBus,this._eventBus),new Ce(this._eventBus)}static create(){return new ee}addPlugin(e,t={}){this._registry.hasPlugin(e)||this._registry.createPlugin(e,this._eventBus,t)}reset(e,t){this._registry.reset(e,t)}destroy(e,t){this._registry.destroy(e,t)}getPlugin(e,t){let i=typeof e=="string"?e:e.pluginName;const s=this._registry.getPluginByName(i,t);if(!s)throw new Error(`You can't call getPlugin for ${i} with key: ${t} because it does not exist in your app`);return s.api}getPlugins(e,t){let i=typeof e=="string"?e:e.pluginName;const s=this._registry.getPluginsByName(i,t);if(s.length===0)throw new Error(`You can't call getPlugins for ${i} with key: ${t} because they don't exist in your app`);return s.map(n=>n.api)}onPluginEvent(e,t,i){const s=this._registry.getPluginByName(e.pluginName);s&&s.on(t,i)}removePluginEventListener(e,t,i){const s=this._registry.getPluginByName(e.pluginName);s&&s.removeListener(t,i)}run(){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",this._start.bind(this)):this._start()}ready(e,t){this._appEventBus.subscribeToPluginReadyEvent(t,e)}_start(){this._setup(),requestAnimationFrame(this._tick.bind(this))}_setup(){this._listenToNativeEvents(),this._subscribeToEvents()}_listenToNativeEvents(){document.addEventListener("click",e=>{this._eventBus.emitEvent(P,{x:e.clientX,y:e.clientY,target:e.target})}),document.addEventListener("pointermove",e=>{this._eventBus.emitEvent(N,{x:e.clientX,y:e.clientY,target:e.target})}),document.addEventListener("pointerdown",e=>{this._eventBus.emitEvent(I,{x:e.clientX,y:e.clientY,target:e.target})}),document.addEventListener("pointerup",e=>{this._eventBus.emitEvent(C,{x:e.clientX,y:e.clientY,target:e.target})})}_tick(e){let t=(e-this._previousTime)/1e3;t>.016&&(t=1/60),this._previousTime=e,this._eventBus.reset(),this._subscribeToEvents(),this._read(),this._update(e,t),this._render(),requestAnimationFrame(this._tick.bind(this))}_subscribeToEvents(){this._eventBus.subscribeToEvent(k,this._onNodeAdded.bind(this)),this._eventBus.subscribeToEvent(z,this._onNodeRemoved.bind(this)),this._eventBus.subscribeToEvent(O,this._onDataChanged.bind(this)),this._registry.getPlugins().forEach(e=>{e.subscribeToEvents(this._eventBus)})}_onNodeAdded({node:e}){this._registry.queueNodeToBeCreated(e)}_onNodeRemoved({node:e}){this._registry.queueNodeToBeRemoved(e)}_onDataChanged(e){this._registry.notifyPluginAboutDataChange(e)}_read(){this._registry.getViews().forEach(e=>{e.read()})}_update(e,t){this._registry.update(),this._registry.getPlugins().slice().reverse().forEach(i=>{i.init()}),this._registry.getRenderablePlugins().forEach(i=>{i.update(e,t)}),this._registry.getViews().forEach(i=>{i.update(e,t)}),this._registry.getViews().forEach(i=>{i._updatePreviousRect()})}_render(){this._registry.getRenderablePlugins().forEach(e=>{e.render()}),this._registry.getViews().forEach(e=>{e.render()})}}function mt(){return ee.create()}class ge{constructor(e){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=e,this.previousX=e.previousX,this.previousY=e.previousY,this.x=e.x,this.y=e.y,this.width=e.width,this.height=e.height,this.view=e.view,this.isDragging=e.isDragging,this.target=e.target,this.directions=e.directions}}class _e 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(t){this._isDragging&&t.preventDefault()}get _isDragging(){return Array.from(this._pointerDownPerView.values()).some(t=>!!t)}subscribeToEvents(t){t.subscribeToEvent(I,({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 u=new l(i-r.position.x,s-r.position.y);this._pointerX=i,this._pointerY=s,this._initialPointerPerView.set(r.id,u)})}),t.subscribeToEvent(C,()=>{this.getViews().forEach(i=>{this._pointerDownPerView.get(i.id)&&this._initialPointerPerView.get(i.id)&&(this._pointerDownPerView.set(i.id,!1),this._emitEvent(i,[]))})}),t.subscribeToEvent(N,({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),u=this._viewPointerPositionLog.get(n.id);u&&u.push(new l(i,s));const h=u&&u.length>=2?u[u.length-2]:r.clone(),c=this._calculateDirections(h,r);this._emitEvent(n,c)}})})}_emitEvent(t,i){const s=this._viewPointerPositionLog.get(t.id),n=s&&s.length>=2?s[s.length-2]:null,r=this._pointerX-this._initialPointerPerView.get(t.id).x,u=this._pointerY-this._initialPointerPerView.get(t.id).y,h=n?n.x-this._initialPointerPerView.get(t.id).x:r,c=n?n.y-this._initialPointerPerView.get(t.id).y:u,g=this._pointerY-this._initialPointer.y,_=this._pointerX-this._initialPointer.x,d=this._targetPerView.get(t.id);if(!d||!t.hasElement(d))return;const v=this._pointerDownPerView.get(t.id)===!0;v||this._viewPointerPositionLog.clear();const y={view:t,target:d,previousX:h,previousY:c,x:r,y:u,width:_,height:g,isDragging:v,directions:i};this.emit(ge,y)}_calculateDirections(t,i){const s={up:l.sub(new l(t.x,t.y-1),t),down:l.sub(new l(t.x,t.y+1),t),left:l.sub(new l(t.x-1,t.y),t),right:l.sub(new l(t.x+1,t.y),t)},n=l.sub(i,t).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(_e,"pluginName","DragEventPlugin");class pe{constructor(e){a(this,"view");a(this,"direction");this.props=e,this.view=e.view,this.direction=e.direction}}class fe extends B{constructor(){super(...arguments);a(this,"_viewIsPointerDownMap",new Map);a(this,"_viewPointerPositionLog",new Map);a(this,"_targetPerView",new Map)}subscribeToEvents(t){t.subscribeToEvent(I,({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)})}),t.subscribeToEvent(N,({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))})}),t.subscribeToEvent(C,({x:i,y:s})=>{this.getViews().forEach(r=>{if(!this._viewIsPointerDownMap.get(r.id)||!this._viewPointerPositionLog.has(r.id))return;const u=new l(i,s),h=this._viewPointerPositionLog.get(r.id),c=h[h.length-2]||u.clone(),g=this._targetPerView.get(r.id),_=n(c,u);g&&r.hasElement(g)&&_.hasSwiped&&this.emit(pe,{view:r,direction:_.direction}),this._viewPointerPositionLog.set(r.id,[]),this._viewIsPointerDownMap.set(r.id,!1)});function n(r,u){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(u,r).unitVector,g=["up","down","left","right"],_=[c.dot(h.up),c.dot(h.down),c.dot(h.left),c.dot(h.right)],d=Math.max(..._),v=_.indexOf(d),y=g[v],b=l.sub(u,r).magnitude;return{hasSwiped:c.dot(h[y])*b>30,direction:y}}})}}a(fe,"pluginName","SwipeEventPlugin");class me{constructor(e){a(this,"view");this.props=e,this.view=e.view}}class ve extends B{subscribeToEvents(e){e.subscribeToEvent(P,({x:t,y:i,target:s})=>{this.getViews().forEach(n=>{const r=s,u=n.element===r||n.element.contains(r);n.intersects(t,i)&&u&&this.emit(me,{view:n})})})}}a(ve,"pluginName","ClickEventPlugin");function vt(o,e){const t=o.map(e),i=Math.min(...t),s=t.indexOf(i);return o[s]}const wt=Object.freeze(Object.defineProperty({__proto__:null,clamp:oe,minBy:vt,pointToViewProgress:$e,randomNumber:Fe,remap:De,valueAtPercentage:Me},Symbol.toStringTag,{value:"Module"})),yt=Object.freeze(Object.defineProperty({__proto__:null,PointerClickEvent:P,PointerDownEvent:I,PointerMoveEvent:N,PointerUpEvent:C},Symbol.toStringTag,{value:"Module"}));f.ClickEvent=me,f.ClickEventPlugin=ve,f.DataChangedEvent=O,f.DragEvent=ge,f.DragEventPlugin=_e,f.EventBus=L,f.EventPlugin=B,f.Events=yt,f.Plugin=re,f.PluginContext=ae,f.SwipeEvent=pe,f.SwipeEventPlugin=fe,f.Utils=wt,f.createApp=mt,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}); + `,r.style.pointerEvents="none",r.dataset.velRemoved="",document.body.appendChild(r);const u=this._registry.createView(r,e.name);return u.setAsTemporaryView(),u.styles.position="absolute",u.styles.left=`${t.left+s}px`,u.styles.top=`${t.top-n}px`,u.rotation.setDegrees(e.rotation.degrees,!1),u.scale.set({x:e.scale.x,y:e.scale.y},!1),u.size.set({width:e._localWidth,height:e._localHeight},!1),e._copyAnimatorsToAnotherView(u),e.onRemoveCallback&&u.onRemove(e.onRemoveCallback),u}onViewRemoved(e){}notifyAboutViewAdded(e){this.onViewAdded(e),this._invokeAddCallbacks(e)}_invokeAddCallbacks(e){var t,i,s;!((t=e.onAddCallbacks)!=null&&t.onInitialLoad)&&!this._initialized||((i=e.onAddCallbacks)==null||i.beforeEnter(e),!((s=e.onAddCallbacks)!=null&&s.afterRemoved)||!this._initialized?requestAnimationFrame(()=>{var n;(n=e.onAddCallbacks)==null||n.afterEnter(e)}):e.layoutId&&this._layoutIdViewMapWaitingToEnter.set(e.layoutId,e))}onViewAdded(e){}init(){!this._initialized&&this._isReady&&(this.setup(),this._initialized=!0)}setup(){}subscribeToEvents(e){}}class re extends ne{isRenderable(){return!0}isInitialized(){return this._initialized}get initialized(){return this._initialized}update(e,t){}render(){}addView(e){e.setPluginId(this.id),super.addView(e)}}class B extends ne{isRenderable(){return!1}}class ae{constructor(e){a(this,"_plugin");this._plugin=e}get initialized(){return this._plugin.isInitialized()}get config(){return this._plugin.config}setup(e){this._plugin.setup=e}api(e){this._plugin._setApi(e)}update(e){this._plugin.update=e}render(e){this._plugin.render=e}getViews(e){return this._plugin.getViews(e)}getView(e){return this._plugin.getView(e)}getViewById(e){return this._plugin.getViewById(e)}useEventPlugin(e,t={}){return this._plugin.useEventPlugin(e,t)}emit(e,t){this._plugin.emit(e,t)}on(e,t){this._plugin.on(e,t)}onDataChanged(e){this._plugin.onDataChanged=e}onViewRemoved(e){this._plugin.onViewRemoved=e}onViewAdded(e){this._plugin.onViewAdded=e}subscribeToEvents(e){this._plugin.subscribeToEvents=e}}function W(o,e,t,i,s,n){if(Fe(o))return new o(o,o.pluginName,e,t,i,s,n);const r=new re(o,o.pluginName,e,t,i,s,n),u=new ae(r);return o(u),r}function Fe(o){var e;return((e=o.prototype)==null?void 0:e.constructor.toString().indexOf("class "))===0}class l{constructor(e,t){a(this,"x");a(this,"y");this.x=e,this.y=t}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 e=new l(0,0),t=this.magnitude;return t!==0&&(e.x=this.x/t,e.y=this.y/t),e}add(e){this.x+=e.x,this.y+=e.y}sub(e){this.x-=e.x,this.y-=e.y}scale(e){this.x*=e,this.y*=e}dot(e){return this.x*e.x+this.y*e.y}equals(e){return this.x===e.x&&this.y===e.y}clone(){return new l(this.x,this.y)}static scale(e,t){return new l(e.x*t,e.y*t)}static sub(e,t){return new l(e.x-t.x,e.y-t.y)}static add(e,t){return new l(e.x+t.x,e.y+t.y)}}function oe(o,e,t){return Math.min(Math.max(o,e),t)}function Me(o,e){return Math.floor(Math.random()*(e-o+1)+o)}function ue(o,e){const t=e.x-o.x,i=e.y-o.y;return Math.sqrt(t*t+i*i)}function De(o,e,t){return o+(e-o)*t}function p(o,e){const i=o-e;return Math.abs(i)<=.01}function $e(o,e,t,i,s){return(o-e)/(t-e)*(s-i)+i}function Oe(o,e,t){const i=e.getScroll(),s=e.position.x-i.x,n=e.position.y-i.y,r=o.x||s,u=o.y||n,h=Math.abs(s-r),c=Math.abs(n-u),d=Math.sqrt(h*h+c*c);return 1-oe(0,d/t,1)}function w(o){let e=o.match(/^([\d.]+)([a-zA-Z%]*)$/);e||(e="0px".match(/^([\d.]+)([a-zA-Z%]*)$/));const t=parseFloat(e[1]),i=e[2];return{value:t,unit:i,valueWithUnit:o}}function ke(o,e,t=!1){if(o===e)return!0;if(o.length!==e.length)return!1;for(let i=0;iw(i)),t={value:0,unit:"",valueWithUnit:"0"};switch(e.length){case 1:return new T(e[0],e[0],e[0],e[0]);case 2:return new T(e[0],e[1],e[0],e[1]);case 3:return new T(e[0],e[1],e[2],e[1]);case 4:return new T(e[0],e[1],e[3],e[2]);default:return new T(t,t,t,t)}}function ze(o,e){const t=r(o.topLeft,e),i=r(o.topRight,e),s=r(o.bottomLeft,e),n=r(o.bottomRight,e);return{v:{topLeft:t.v,topRight:i.v,bottomRight:n.v,bottomLeft:s.v},h:{topLeft:t.h,topRight:i.h,bottomRight:n.h,bottomLeft:s.h}};function r(u,h){if(u.unit==="%")return{h:w(`${u.value}%`),v:w(`${u.value}%`)};const c=u.value/h.width*100,d=u.value/h.height*100;return{h:w(`${c}%`),v:w(`${d}%`)}}}function he(o,e){return p(o.topLeft.value,e.topLeft.value)&&p(o.topRight.value,e.topRight.value)&&p(o.bottomRight.value,e.bottomRight.value)&&p(o.bottomLeft.value,e.bottomLeft.value)}class We{constructor(e){a(this,"_value");this._value=e}get value(){return this._value}equals(e){return p(this.value,e.value)}}function Ue(o){return new We(parseFloat(o))}class qe{constructor(e,t){a(this,"_x");a(this,"_y");this._x=e,this._y=t}get value(){return new l(this._x,this._y)}}function Ye(o,e){const[t,i]=o.split(" "),s=w(t),n=w(i);return new qe(s.value/e.width,n.value/e.height)}function Xe(o){const e=je(o),t=He(o);return{viewportOffset:{left:Math.round(e.left),top:Math.round(e.top),right:Math.round(e.right),bottom:Math.round(e.bottom)},pageOffset:{top:t.top,left:t.left},size:{width:o.offsetWidth,height:o.offsetHeight}}}function je(o){const e=o.getBoundingClientRect();return{left:e.left,top:e.top,right:e.right,bottom:e.bottom,width:e.width,height:e.height}}function He(o){let e=o,t=0,i=0;for(;e;)t+=e.offsetTop,i+=e.offsetLeft,e=e.offsetParent;return{top:t,left:i}}class Ke{constructor(e){a(this,"_element");a(this,"_rect");a(this,"_computedStyle");this._rect=Xe(e),this._computedStyle=getComputedStyle(e),this._element=e}read(e){switch(e){case"opacity":return this.opacity;case"borderRadius":return this.borderRadius}}get rect(){return this._rect}get opacity(){return Ue(this._computedStyle.opacity)}get borderRadius(){return U(this._computedStyle.borderRadius)}get origin(){return Ye(this._computedStyle.transformOrigin,this._rect.size)}get scroll(){let e=this._element,t=0,i=0;for(;e;)t+=e.scrollTop,i+=e.scrollLeft,e=e.offsetParent;return i+=window.scrollX,t+=window.scrollY,{y:t,x:i}}}function q(o){return new Ke(o)}function Y(o,e){const t={set:(i,s,n)=>(typeof i[s]=="object"&&i[s]!==null?i[s]=Y(n,e):(e(),i[s]=n),!0),get:(i,s)=>typeof i[s]=="object"&&i[s]!==null?Y(i[s],e):i[s]};return new Proxy(o,t)}const E=.01,X={speed:15};class j{constructor(e){a(this,"name","dynamic");a(this,"_config");this._config=e}get config(){return this._config}}class Ge extends j{update({animatorProp:e,current:t,target:i,dt:s}){const n=l.sub(i,t),r=l.scale(n,this._config.speed);let u=l.add(t,l.scale(r,s));return this._shouldFinish(i,t,r)&&(u=i,requestAnimationFrame(()=>{e.callCompleteCallback()})),e.callUpdateCallback(),u}_shouldFinish(e,t,i){return l.sub(e,t).magnitude{e.callCompleteCallback()})),e.callUpdateCallback(),u}_shouldFinish(e,t,i){return Math.abs(e-t){const u=t[r],h=n.value===0?u.unit:n.unit,d=(n.value-u.value)*this._config.speed,_=u.value+d*s;let g=w(`${_}${h}`);return this._shouldFinish(n.value,u.value,d)&&(g=n,requestAnimationFrame(()=>{e.callCompleteCallback()})),e.callUpdateCallback(),g})}_shouldFinish(e,t,i){return Math.abs(e-t){e.animatorProp.callCompleteCallback()}),e.target}}const K={stiffness:.5,damping:.75,speed:10},x=.01;class G{constructor(e){a(this,"name","spring");a(this,"_config");this._config=e}get config(){return this._config}}class Qe extends G{constructor(){super(...arguments);a(this,"_velocity",new l(0,0))}update({animatorProp:t,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 u=l.add(i,l.scale(this._velocity,n*this._config.speed));return this._shouldFinish(s,i)&&(u=s,requestAnimationFrame(()=>{t.callCompleteCallback()})),u}_shouldFinish(t,i){return l.sub(t,i).magnitude{t.callCompleteCallback()})),u}_shouldFinish(t,i){return Math.abs(t-i){const h=i[u],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 _=h.value+this._velocity*n*this._config.speed;let g=w(`${_}${c}`);return this._shouldFinish(r.value,h.value)&&(g=r,requestAnimationFrame(()=>{t.callCompleteCallback()})),g})}_shouldFinish(t,i){return Math.abs(t-i){e.callCompleteCallback()}),i):l.add(t,l.scale(l.sub(i,t),this._config.ease(n)))}}class nt extends J{update({animatorProp:e,initial:t,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return p(n,1)?(requestAnimationFrame(()=>{e.callCompleteCallback()}),i):t.map((r,u)=>{const h=i[u],c=h.value===0?r.unit:h.unit,d=r.value+this._config.ease(n)*(i[u].value-r.value);return w(`${d}${c}`)})}}class rt extends J{update({animatorProp:e,initial:t,target:i,ts:s}){this._startTime||(this._startTime=s);const n=Math.min(1,(s-this._startTime)/this._config.duration);return p(n,1)?(requestAnimationFrame(()=>{e.callCompleteCallback()}),i):t+(i-t)*this._config.ease(n)}}class Q{createAnimatorByName(e,t){switch(e){case"instant":return this.createInstantAnimator();case"dynamic":return this.createDynamicAnimator(t);case"tween":return this.createTweenAnimator(t);case"spring":return this.createSpringAnimator(t)}return this.createInstantAnimator()}}class S extends Q{createInstantAnimator(){return new H}createTweenAnimator(e){return new st({...Z,...e})}createDynamicAnimator(e){return new Ge({...X,...e})}createSpringAnimator(e){return new Qe({...K,...e})}}class at extends Q{createInstantAnimator(){return new H}createTweenAnimator(e){return new nt({...Z,...e})}createDynamicAnimator(e){return new Je({...X,...e})}createSpringAnimator(e){return new tt({...K,...e})}}class ce extends Q{createInstantAnimator(){return new H}createDynamicAnimator(e){return new Ze({...X,...e})}createTweenAnimator(e){return new rt({...Z,...e})}createSpringAnimator(e){return new et({...K,...e})}}function A(o){return structuredClone(o)}class ot{constructor(e){a(this,"_viewProp");a(this,"_completeCallback");a(this,"_updateCallback");a(this,"_isAnimating");this._viewProp=e,this._isAnimating=!1}set(e,t){this._viewProp.setAnimator(e,t)}get name(){return this._viewProp.getAnimator().name}onComplete(e){this._completeCallback=e}get isAnimating(){return this._isAnimating}markAsAnimating(){this._isAnimating=!0}callCompleteCallback(){var e;(e=this._completeCallback)==null||e.call(this),this._isAnimating=!1}onUpdate(e){this._updateCallback=e}callUpdateCallback(){var e;(e=this._updateCallback)==null||e.call(this)}}class R{constructor(e,t,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");a(this,"_previousRenderValue");this._animatorProp=new ot(this),this._animatorFactory=e,this._initialValue=A(t),this._previousValue=A(t),this._targetValue=A(t),this._currentValue=A(t),this._hasChanged=!1,this._previousRenderValue=void 0,this._view=i,this._animator=this._animatorFactory.createInstantAnimator()}get shouldRender(){return!0}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(e,t){this._animator=this._animatorFactory.createAnimatorByName(e,t)}_setTarget(e,t=!0){var i,s;this._previousValue=A(this._currentValue),this._targetValue=e,t?((s=(i=this._animator).reset)==null||s.call(i),this.animator.markAsAnimating()):this._currentValue=e,this._hasChanged=!0}hasChanged(){return this._hasChanged}destroy(){this._hasChanged=!1}update(e,t){}}class ut extends R{constructor(){super(...arguments);a(this,"_invertedBorderRadius");a(this,"_forceStyleUpdateThisFrame",!1);a(this,"_updateWithScale",!1)}setFromElementPropValue(t){this._setTarget([t.value.topLeft,t.value.topRight,t.value.bottomRight,t.value.bottomLeft],!0)}enableUpdateWithScale(){this._updateWithScale=!0}disableUpdateWithScale(){this._updateWithScale=!1}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(t,i=!0){let s;if(typeof t=="string"){const c=U(t.trim());s={topLeft:c.value.topLeft.valueWithUnit,topRight:c.value.topRight.valueWithUnit,bottomRight:c.value.bottomRight.valueWithUnit,bottomLeft:c.value.bottomLeft.valueWithUnit}}else s=t;const n=s.topLeft?w(s.topLeft):this._currentValue[0],r=s.topRight?w(s.topRight):this._currentValue[1],u=s.bottomRight?w(s.bottomRight):this._currentValue[2],h=s.bottomLeft?w(s.bottomLeft):this._currentValue[3];this._setTarget([n,r,u,h],i)}reset(t=!0){this._setTarget(this._initialValue,t)}update(t,i){if(this._forceStyleUpdateThisFrame)this._hasChanged=!0,this._forceStyleUpdateThisFrame=!1;else if(this._view.scale.isAnimating&&this._updateWithScale)this._hasChanged=!0;else if(le(this._targetValue,this._currentValue)){this._hasChanged=!le(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:i}),this._updateWithScale&&this._applyScaleInverse()}applyScaleInverse(){this._updateWithScale&&(this._forceStyleUpdateThisFrame=!0)}_applyScaleInverse(){if(p(this._view.scale.x,1)&&p(this._view.scale.y,1))return;const t=this._rect.size.width*this._view.scale.x,i=this._rect.size.height*this._view.scale.y;this._invertedBorderRadius=ze(U(`${this._currentValue[0].valueWithUnit} ${this._currentValue[1].valueWithUnit} ${this._currentValue[2].valueWithUnit} ${this._currentValue[3].valueWithUnit}`).value,{width:t,height:i})}get shouldRender(){return this._hasChanged?this._previousRenderValue?!(he(this.renderValue.v,this._previousRenderValue.v)&&he(this.renderValue.h,this._previousRenderValue.h)):!0:!1}get renderValue(){return this.invertedBorderRadius?{v:{topLeft:this.invertedBorderRadius.v.topLeft,topRight:this.invertedBorderRadius.v.topRight,bottomLeft:this.invertedBorderRadius.v.bottomLeft,bottomRight:this.invertedBorderRadius.v.bottomRight},h:{topLeft:this.invertedBorderRadius.h.topLeft,topRight:this.invertedBorderRadius.h.topRight,bottomLeft:this.invertedBorderRadius.h.bottomLeft,bottomRight:this.invertedBorderRadius.h.bottomRight}}:{v:{topLeft:this.value.topLeft,topRight:this.value.topRight,bottomLeft:this.value.bottomLeft,bottomRight:this.value.bottomRight},h:{topLeft:this.value.topLeft,topRight:this.value.topRight,bottomLeft:this.value.bottomLeft,bottomRight:this.value.bottomRight}}}projectStyles(){const t=this.renderValue,i=`border-radius: ${t.h.topLeft.valueWithUnit} ${t.h.topRight.valueWithUnit} ${t.h.bottomRight.valueWithUnit} ${t.h.bottomLeft.valueWithUnit} / ${t.v.topLeft.valueWithUnit} ${t.v.topRight.valueWithUnit} ${t.v.bottomRight.valueWithUnit} ${t.v.bottomLeft.valueWithUnit};`;return this._previousRenderValue=t,i}isTransform(){return!1}}class lt extends R{setFromElementPropValue(e){this._setTarget(e.value,!0)}get value(){return this._currentValue}set(e,t=!0){this._setTarget(e,t)}reset(e=!0){this._setTarget(1,e)}update(e,t){if(p(this._targetValue,this._currentValue)){this._hasChanged=!p(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:t})}get shouldRender(){return this._hasChanged?typeof this._previousRenderValue>"u"?!0:this.renderValue!==this._previousRenderValue:!1}get renderValue(){return this.value}projectStyles(){const e=this.renderValue,t=`opacity: ${e};`;return this._previousRenderValue=e,t}isTransform(){return!1}}class ht extends R{get x(){return this._currentValue.x}get y(){return this._currentValue.y}set(e){const i={...{x:this.x,y:this.y},...e};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)}get shouldRender(){if(!this._hasChanged)return!1;if(!this._previousRenderValue)return!0;const e=this.renderValue;return!(p(e.x,this._previousRenderValue.x)&&p(e.y,this._previousRenderValue.y))}get renderValue(){return new l(this.x*100,this.y*100)}projectStyles(){const e=this.renderValue,t=`transform-origin: ${e.x}% ${e.y}%;`;return this._previousRenderValue=e,t}isTransform(){return!1}}class ct extends R{constructor(){super(...arguments);a(this,"_animateLayoutUpdateNextFrame",!1);a(this,"_parentScaleInverse",new l(1,1))}get _parentDiff(){let t=this._view._parent,i=0,s=0;if(t){const n=t.rect.pageOffset,r=t.getScroll(),u={left:t.previousRect.viewportOffset.left+r.x,top:t.previousRect.viewportOffset.top+r.y};i=u.left-n.left,s=u.top-n.top}return{parentDx:i,parentDy:s}}get x(){return this._currentValue.x+this._rect.pageOffset.left+this._parentDiff.parentDx}get y(){return this._currentValue.y+this._rect.pageOffset.top+this._parentDiff.parentDy}get initialX(){return this._rect.pageOffset.left}get initialY(){return this._rect.pageOffset.top}progressTo(t){const i=typeof t.x>"u"?this.initialX:t.x,s=typeof t.y>"u"?this.initialY:t.y,n=new l(i,s),r=new l(this.initialX,this.initialY),u=new l(this.x,this.y),h=l.sub(u,r),c=l.sub(n,r);return 1-l.sub(c,h).magnitude/c.magnitude}set(t,i=!0){const n={...{x:this.x,y:this.y},...t};this._setTarget(new l(n.x-this._rect.pageOffset.left,n.y-this._rect.pageOffset.top),i)}reset(t=!0){this._setTarget(new l(0,0),t)}update(t,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,_=c?c.scale.y:1;this._parentScaleInverse=new l(1/d,1/_),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,u=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*u,this._previousValue.y*h),ts:t,dt:i}),this._currentValue=new l(this._currentValue.x/n,this._currentValue.y/r)}_runLayoutTransition(){const t=!(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=t||i,n=this._rect.pageOffset.left-this._previousRect.pageOffset.left,r=this._rect.pageOffset.top-this._previousRect.pageOffset.top,u=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(u)&&u!==1||!Number.isNaN(h)&&h!==1?c=!0:c=(()=>{const d=this._view._parents;for(let _=0;_"u")return!0;const t=this.renderValue;return!p(t,this._previousRenderValue)}get renderValue(){return this._currentValue}projectStyles(){const t=this.renderValue,i=`rotate(${t}${this._unit})`;return this._previousRenderValue=t,i}isTransform(){return!0}}class gt extends R{constructor(){super(...arguments);a(this,"_animateLayoutUpdateNextFrame",!1)}get x(){return this._currentValue.x}get y(){return this._currentValue.y}set(t,i=!0){const r={...{x:this._currentValue.x,y:this._currentValue.y},...typeof t=="number"?{x:t,y:t}:t};this._setTarget(new l(r.x,r.y),i)}setWithSize(t,i=!0){let s=this._currentValue.x,n=this._currentValue.y;t.width&&(s=t.width/this._rect.size.width),t.height&&(n=t.height/this._rect.size.height),!t.width&&t.height&&(s=n),!t.height&&t.width&&(n=s);const r={x:s,y:n};this._setTarget(new l(r.x,r.y),i)}reset(t=!0){this._setTarget(new l(1,1),t)}update(t,i){if((this._view.isInverseEffectEnabled||this._view.isLayoutTransitionEnabled)&&!this._view.isTemporaryView&&this._runLayoutTransition(),this._view.isInverseEffectEnabled){const s=this._view._parent,n=s?s.scale.x:1,r=s?s.scale.y:1;this._hasChanged=n!==1||r!==1}this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y||(this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:new l(this._previousValue.x,this._previousValue.y),ts:t,dt:i}))}_runLayoutTransition(){const t=!(this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y),i=this._previousRect.size.width/this._rect.size.width,s=this._previousRect.size.height/this._rect.size.height;let n=!1;if((!Number.isNaN(i)&&i!==1||!Number.isNaN(s)&&s!==1)&&(n=!0),n){if(this._currentValue.x!==1||this._currentValue.y!==1){const d=this._view.previousRect.size.width/this._view.rect.size.width,_=this._view.previousRect.size.height/this._view.rect.size.height;this._setTarget(new l(this._currentValue.x*d,this._currentValue.y*_),!1),t&&(this._animateLayoutUpdateNextFrame=!0);return}const r=this._previousRect.size.width/this._rect.size.width,u=this._previousRect.size.height/this._rect.size.height,h=r,c=u;this._view.viewProps.borderRadius.applyScaleInverse(),this._setTarget(new l(h,c),!1),this._animateLayoutUpdateNextFrame=!0}else this._animateLayoutUpdateNextFrame&&(this._setTarget(this._initialValue,!0),this._animateLayoutUpdateNextFrame=!1)}get shouldRender(){if(!this._hasChanged)return!1;if(!this._previousRenderValue)return!0;const t=this.renderValue;return!(p(t.x,this._previousRenderValue.x)&&p(t.y,this._previousRenderValue.y))}get renderValue(){const t=this._view._parent?this._view._parent.scale.x:1,i=this._view._parent?this._view._parent.scale.y:1,s=this._currentValue.x/t,n=this._currentValue.y/i;return new l(s,n)}projectStyles(){const t=this.renderValue,i=`scale3d(${t.x}, ${t.y}, 1)`;return this._previousRenderValue=t,i}isTransform(){return!0}}class _t extends R{get width(){return this._view.rect.size.width}get height(){return this._view.rect.size.height}get localWidth(){return this._currentValue.x}get localHeight(){return this._currentValue.y}get widthAfterScale(){const e=this._view.scale.x;return this.localWidth*e}get heightAfterScale(){const e=this._view.scale.y;return this.localHeight*e}get initialWidth(){return this._initialValue.x}get initialHeight(){return this._initialValue.y}set(e,t=!0){const s={...{width:this._currentValue.x,height:this._currentValue.y},...e};this._setTarget(new l(s.width,s.height),t)}setWidth(e,t=!0){const s={...{width:this._currentValue.x,height:this._currentValue.y},width:e};this._setTarget(new l(s.width,s.height),t)}setHeight(e,t=!0){const s={...{width:this._currentValue.x,height:this._currentValue.y},height:e};this._setTarget(new l(s.width,s.height),t)}reset(e=!0){this._setTarget(new l(this.initialWidth,this.initialHeight),e)}update(e,t){this._targetValue.x===this._currentValue.x&&this._targetValue.y===this._currentValue.y||(this._currentValue=this._animator.update({animatorProp:this._animatorProp,current:this._currentValue,target:this._targetValue,initial:this._previousValue,ts:e,dt:t}))}get shouldRender(){if(!this._hasChanged)return!1;if(!this._previousRenderValue)return!0;const e=this.renderValue;return!(p(e.x,this._previousRenderValue.x)&&p(e.y,this._previousRenderValue.y))}get renderValue(){return new l(this._currentValue.x,this._currentValue.y)}projectStyles(){const e=this.renderValue,t=`width: ${e.x}px; height: ${e.y}px;`;return this._previousRenderValue=e,t}isTransform(){return!1}}class pt{constructor(e){a(this,"_props",new Map);this._props.set("position",new ct(new S,new l(0,0),e)),this._props.set("scale",new gt(new S,new l(1,1),e)),this._props.set("rotation",new dt(new ce,0,e)),this._props.set("size",new _t(new S,new l(e.rect.size.width,e.rect.size.height),e)),this._props.set("opacity",new lt(new ce,e.elementReader.opacity.value,e)),this._props.set("borderRadius",new ut(new at,[e.elementReader.borderRadius.value.topLeft,e.elementReader.borderRadius.value.topRight,e.elementReader.borderRadius.value.bottomRight,e.elementReader.borderRadius.value.bottomLeft],e)),this._props.set("origin",new ht(new S,e.elementReader.origin.value,e))}allProps(){return Array.from(this._props.values())}allPropNames(){return Array.from(this._props.keys())}getPropByName(e){return this._props.get(e)}get position(){return this._props.get("position")}get scale(){return this._props.get("scale")}get rotation(){return this._props.get("rotation")}get size(){return this._props.get("size")}get opacity(){return this._props.get("opacity")}get borderRadius(){return this._props.get("borderRadius")}get origin(){return this._props.get("origin")}}class ft{constructor(e,t,i,s){a(this,"id");a(this,"name");a(this,"element");a(this,"styles",{});a(this,"_viewProps");a(this,"_previousRect");a(this,"_onAddCallbacks");a(this,"_onRemoveCallback");a(this,"_skipFirstRenderFrame");a(this,"_layoutTransition");a(this,"_registry");a(this,"_layoutId");a(this,"_elementReader");a(this,"_temporaryView");a(this,"_inverseEffect");a(this,"_renderNextTick");this.id=se(),this.name=t,this.element=e,this._elementReader=q(e),this._previousRect=this._elementReader.rect,this._viewProps=new pt(this),this._skipFirstRenderFrame=!0,this._layoutId=s,this._layoutTransition=!1,this._registry=i,this.element.dataset.velViewId=this.id,this._temporaryView=!1,this._inverseEffect=!1,this.styles=Y(this.styles,()=>{this._renderNextTick=!0}),this._renderNextTick=!1}destroy(){this._viewProps.allProps().forEach(e=>e.destroy()),this.element.removeAttribute("data-vel-view-id"),this.element.removeAttribute("data-vel-plugin-id"),this._renderNextTick=!0}get elementReader(){return this._elementReader}setElement(e){this.element=e,this._elementReader=q(this.element),this.element.dataset.velViewId=this.id}get layoutId(){return this._layoutId}get position(){return this._viewProps.position}get scale(){return this._viewProps.scale}get _children(){return Array.from(this.element.children).map(t=>t.dataset.velViewId).filter(t=>t&&typeof t=="string").map(t=>this._registry.getViewById(t)).filter(t=>!!t)}get _parent(){var i;const e=this.element.parentElement;if(!e)return;const t=e.closest("[data-vel-view-id]");if((i=t==null?void 0:t.dataset)!=null&&i.velViewId)return this._registry.getViewById(t.dataset.velViewId)}get _parents(){var i;const e=[];let t=this.element.parentElement;if(!t)return e;for(t=t.closest("[data-vel-view-id]");t;){const s=t.dataset.velViewId;if(s){const n=this._registry.getViewById(s);n&&e.push(n)}t=(i=t.parentElement)==null?void 0:i.closest("[data-vel-view-id]")}return e}get rotation(){return this._viewProps.rotation}get size(){return this._viewProps.size}get _localWidth(){return this._viewProps.size.localWidth}get _localHeight(){return this._viewProps.size.localHeight}get opacity(){return this._viewProps.opacity}get borderRadius(){return this._viewProps.borderRadius}get origin(){return this._viewProps.origin}get data(){const e=this.element.dataset;return Object.keys(e).filter(s=>s.includes("velData")).map(s=>s.replace("velData","")).map(s=>`${s[0].toLowerCase()}${s.slice(1)}`).reduce((s,n)=>{const r=e[`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(e=>e.isLayoutTransitionEnabled)}get isInverseEffectEnabled(){return this._parents.some(e=>e._inverseEffect)}layoutTransition(e){this._layoutTransition=e,this.inverseEffect(e)}inverseEffect(e){this._inverseEffect=e,e&&this._children.forEach(t=>{if(t.position.animator.name==="instant"){const i=this.viewProps.position.getAnimator();t.position.setAnimator(i.name,i.config)}if(t.scale.animator.name==="instant"){const i=this.viewProps.scale.getAnimator();t.scale.setAnimator(i.name,i.config)}})}setAnimatorsFromParent(){let e=this._parent;for(;e&&!e._inverseEffect;)e=e._parent;if(e){if(this.position.animator.name==="instant"){const t=e.viewProps.position.getAnimator();this.position.setAnimator(t.name,t.config)}if(this.scale.animator.name==="instant"){const t=e.viewProps.scale.getAnimator();this.scale.setAnimator(t.name,t.config)}}}get _isRemoved(){return!this._registry.getViewById(this.id)}setPluginId(e){this.element.dataset.velPluginId=e}hasElement(e){return this.element.contains(e)}getScroll(){return this._elementReader.scroll}intersects(e,t){const i={x:this.rect.viewportOffset.left,y:this.rect.viewportOffset.top};return e>=i.x&&e<=i.x+this.size.width&&t>=i.y&&t<=i.y+this.size.height}overlapsWith(e){const t=e._localWidth*e.scale.x,i=e._localHeight*e.scale.y,s=this._localWidth*this.scale.x,n=this._localHeight*this.scale.y;return this.position.xe.position.x&&this.position.ye.position.y}distanceTo(e){const t=new l(this.position.x,this.position.y),i=new l(e.position.x,e.position.y);return l.sub(i,t).magnitude}read(){this._elementReader=q(this.element)}get rect(){return this._elementReader.rect}get previousRect(){return this._previousRect}update(e,t){this._viewProps.allProps().forEach(i=>i.update(e,t))}_updatePreviousRect(){this._previousRect=this._elementReader.rect}setAsTemporaryView(){this._temporaryView=!0}get isTemporaryView(){return this._temporaryView}get shouldRender(){return this._renderNextTick||this._viewProps.allProps().some(e=>e.shouldRender)}render(){if(!this.shouldRender)return;if(this._isRemoved&&this._skipFirstRenderFrame){this._skipFirstRenderFrame=!1;return}let e="";const t=this._viewProps.allProps(),i=t.filter(n=>n.isTransform()),s=t.filter(n=>!n.isTransform());if(i.some(n=>n.hasChanged())){const n=i.reduce((r,u,h)=>(r+=u.projectStyles(),h===i.length-1&&(r+=";"),r),"transform: ");e+=n}s.forEach(n=>{n.hasChanged()&&(e+=n.projectStyles())}),e+=this._getUserStyles(),this.element.style.cssText=e,this._renderNextTick=!1}_getUserStyles(){return Object.keys(this.styles).reduce((e,t)=>t?e+`${Ce(t)}: ${this.styles[t]};`:e,"")}markAsAdded(){delete this.element.dataset.velProcessing}onAdd(e){this._onAddCallbacks=e}onRemove(e){this._onRemoveCallback=e}get viewProps(){return this._viewProps}getPropByName(e){return this._viewProps.getPropByName(e)}_copyAnimatorsToAnotherView(e){e.viewProps.allPropNames().forEach(t=>{var s,n;const i=(s=this.viewProps.getPropByName(t))==null?void 0:s.getAnimator();i&&((n=e.viewProps.getPropByName(t))==null||n.setAnimator(i.name,i.config))})}}class mt{constructor(e,t){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);a(this,"_pluginNameToPluginFactoryMap",new Map);a(this,"_pluginNameToPluginConfigMap",new Map);this._appEventBus=e,this._eventBus=t}update(){this._handleRemovedViews(),this._handleAddedViews()}associateEventPluginWithPlugin(e,t){let i=this._eventPluginsPerPlugin.get(e);i||(i=[],this._eventPluginsPerPlugin.set(e,i)),i.push(t)}_handleRemovedViews(){const e=this._viewsToBeRemoved.filter(t=>t.dataset.velViewId);e.length&&(e.forEach(t=>{const i=t.dataset.velViewId;i&&this._handleRemoveView(i)}),this._viewsToBeRemoved=[])}_getPluginNameForElement(e){const t=e.dataset.velPlugin;if(t&&t.length>0)return t;const i=e.closest("[data-vel-plugin]");if(i)return i.dataset.velPlugin}_getPluginIdForElement(e){const t=this._getPluginNameForElement(e);if(!t)return;const i=e.closest("[data-vel-plugin-id]");if(i)return i.dataset.velPluginId;const s=this.getPluginByName(t);if(s)return s.id}_isScopedElement(e){const t=this._getPluginNameForElement(e);if(!t)return!1;const i=this._pluginNameToPluginFactoryMap.get(t),s=i==null?void 0:i.scope;return e.dataset.velView===s}_handleAddedViews(){this._viewsCreatedInPreviousFrame.forEach(s=>{s.markAsAdded()}),this._viewsCreatedInPreviousFrame=[];const e=this._viewsToBeCreated.filter(s=>this._isScopedElement(s)),t=this._viewsToBeCreated.filter(s=>!this._isScopedElement(s));this._viewsToBeCreated=[],e.forEach(s=>{const n=this._getPluginNameForElement(s),r=this._pluginNameToPluginFactoryMap.get(n),u=this._pluginNameToPluginConfigMap.get(n),h=s.dataset.velPluginKey,c=W(r,this,this._eventBus,this._appEventBus,u,h);this._plugins.push(c);const d=s.dataset.velView,_=this._createNewView(s,d,c);_.isInverseEffectEnabled&&_.setAnimatorsFromParent(),c.notifyAboutViewAdded(_)});const i=t.filter(s=>!!this._getPluginIdForElement(s));i.length!==0&&i.forEach(s=>{const n=this._getPluginIdForElement(s),r=s.dataset.velView;if(!r||!n)return;const u=this._getPluginById(n);if(!u)return;const h=this._getLayoutIdForElement(s,u);let c;h&&this._layoutIdToViewMap.has(h)?(c=this._layoutIdToViewMap.get(h),c.setElement(s),c.setPluginId(u.id),this._createChildrenForView(c,u)):c=this._createNewView(s,r,u),c.isInverseEffectEnabled&&c.setAnimatorsFromParent(),u.notifyAboutViewAdded(c)})}_getLayoutIdForElement(e,t){const i=e.dataset.velLayoutId;if(i)return`${i}-${t.id}`}_createNewView(e,t,i){const s=this._getLayoutIdForElement(e,i),n=this.createView(e,t,s);return i.addView(n),n.layoutId&&this._layoutIdToViewMap.set(n.layoutId,n),this._createChildrenForView(n,i),this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api,!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this._appEventBus.emitPluginReadyEvent(i.pluginName,i.api)})}),n}_createChildrenForView(e,t){const i=e.element.querySelectorAll("*");if(i.length){if(Array.from(i).some(s=>this._getPluginNameForElement(s)!==t.pluginName)){console.log(`%c WARNING: The plugin "${t.pluginName}" has view(s) created for a different plugin. Make sure all views inside that plugin don't have data-vel-plugin set or the pluginName is set to "${t.pluginName}"`,"background: #885500");return}Array.from(i).forEach(s=>{const n=s,r=n.dataset.velView?n.dataset.velView:`${e.name}-child`,u=this._getLayoutIdForElement(n,t),h=this.createView(n,r,u);u&&!this._layoutIdToViewMap.has(u)&&this._layoutIdToViewMap.set(u,h),t.addView(h),t.notifyAboutViewAdded(h)})}}_handleRemoveView(e){this._plugins.forEach(t=>{if(!this._viewsPerPlugin.get(t.id))return;const s=this._getPluginViewById(t,e);s&&t.removeView(s)})}removeViewById(e,t){this._unassignViewFromPlugin(e,t),this._views=this._views.filter(i=>i.id!==e)}_unassignViewFromPlugin(e,t){const i=this._viewsPerPlugin.get(t);if(!i)return;const s=i.indexOf(e);s!==-1&&i.splice(s,1)}getViewById(e){return this._views.find(t=>t.id===e)}_getPluginById(e){return this._plugins.find(t=>t.id===e)}_getPluginViewById(e,t){return this.getViewsForPlugin(e).find(i=>i.id===t)}destroy(e,t){if(!e){this._destroyAll(t);return}let i=[];if(e&&e.length>0){const s=this.getPluginByName(e);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(u=>this._getPluginById(u)).filter(u=>typeof u<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._destroyPlugin(s)}),requestAnimationFrame(()=>{t==null||t()})})}_destroyPlugin(e){const t=this.getViewsForPlugin(e);t.forEach(i=>{i.layoutId&&this._layoutIdToViewMap.delete(i.layoutId),i.destroy()}),this._views=this._views.filter(i=>!t.find(s=>s.id===i.id)),this._viewsPerPlugin.delete(e.id),this._plugins=this._plugins.filter(i=>i.id!==e.id)}_destroyAll(e){this._views.forEach(t=>t.destroy()),requestAnimationFrame(()=>{this._plugins=[],this._views=[],this._viewsPerPlugin.clear(),this._viewsToBeCreated=[],this._viewsToBeRemoved=[],this._viewsCreatedInPreviousFrame=[],this._layoutIdToViewMap.clear(),this._eventPluginsPerPlugin.clear(),e==null||e()})}reset(e,t){let i=[];if(e&&e.length>0){const s=this.getPluginByName(e);if(s){const r=(this._eventPluginsPerPlugin.get(s.id)||[]).map(u=>this._getPluginById(u)).filter(u=>typeof u<"u");i.push(s),i.push(...r)}}else i=this._plugins;requestAnimationFrame(()=>{i.forEach(s=>{this._resetPlugin(s)}),requestAnimationFrame(()=>{t==null||t()})})}_resetPlugin(e){const t=e.config,i=e.pluginFactory,s=e.internalBusEvent,n=!e.isRenderable(),r=this.getViewsForPlugin(e);r.forEach(u=>{u.layoutId&&this._layoutIdToViewMap.delete(u.layoutId),u.destroy()}),this._views=this._views.filter(u=>!r.find(h=>h.id===u.id)),this._viewsPerPlugin.delete(e.id),this._plugins=this._plugins.filter(u=>u.id!==e.id),n||requestAnimationFrame(()=>{this.createPlugin(i,this._eventBus,t).setInternalEventBus(s)})}queueNodeToBeCreated(e){this._viewsToBeCreated.push(e)}queueNodeToBeRemoved(e){this._viewsToBeRemoved.push(e)}notifyPluginAboutDataChange(e){const t=this._plugins.filter(i=>i.id===e.pluginId);!t||!t.length||t.forEach(i=>{i.notifyAboutDataChanged({dataName:e.dataName,dataValue:e.dataValue,viewName:e.viewName})})}getPlugins(){return this._plugins}getRenderablePlugins(){function e(t){return t.isRenderable()}return this._plugins.filter(e)}getPluginByName(e,t){return this._plugins.find(i=>t?i.pluginKey===t&&i.pluginName===e:i.pluginName===e)}getPluginsByName(e,t){return this._plugins.filter(i=>t?i.pluginKey===t&&i.pluginName===e:i.pluginName===e)}hasPlugin(e){return e.pluginName?!!this.getPluginByName(e.pluginName):!1}createPlugin(e,t,i={}){if(!e.pluginName)throw Error(`Plugin ${e.name} must contain a pluginName field`);let s=[];if(e.scope){const u=document.querySelectorAll(`[data-vel-plugin=${e.pluginName}][data-vel-view=${e.scope}]`);this._pluginNameToPluginFactoryMap.has(e.pluginName)||this._pluginNameToPluginFactoryMap.set(e.pluginName,e),this._pluginNameToPluginConfigMap.has(e.pluginName)||this._pluginNameToPluginConfigMap.set(e.pluginName,i),u?s=Array.from(u):s=[document.documentElement]}else s=[document.documentElement];const n=s.map(u=>{const h=u.dataset.velPluginKey,c=W(e,this,t,this._appEventBus,i,h);this._plugins.push(c);let d=[];u!==document.documentElement&&d.push(u);const _=u.querySelectorAll(`[data-vel-plugin=${c.pluginName}]`);d=[...d,..._];const g=d.filter(v=>{if(!v.parentElement)return!0;const V=this._getPluginNameForElement(v.parentElement);return!(V&&V.length>0)});return g.length&&g.forEach(v=>{const y=v.dataset.velView;if(!y)return;const V=this._createNewView(v,y,c);c.notifyAboutViewAdded(V)}),c});if(n&&n.length>0)return n[0];const r=W(e,this,t,this._appEventBus,i);return e.scope||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(e,t,i){const s=new ft(e,t,this,i);return this._views.push(s),this._viewsCreatedInPreviousFrame.push(s),s}assignViewToPlugin(e,t){this._viewsPerPlugin.has(t.id)||this._viewsPerPlugin.set(t.id,[]);const i=this._viewsPerPlugin.get(t.id);i.includes(e.id)||i.push(e.id)}getViewsForPlugin(e){const t=this._viewsPerPlugin.get(e.id);return t?t.map(s=>this._views.find(n=>n.id===s)).filter(s=>!!s):[]}getViewsByNameForPlugin(e,t){return this.getViewsForPlugin(e).filter(i=>i.name===t)}}class de{constructor(e){a(this,"pluginApi");this.pluginApi=e.pluginApi}}class ge{constructor(e){a(this,"pluginApi");this.pluginApi=e.pluginApi}}class ee{constructor(){a(this,"_previousTime",0);a(this,"_registry");a(this,"_eventBus");a(this,"_appEventBus");this._eventBus=new L,this._appEventBus=new L,this._registry=new mt(this._appEventBus,this._eventBus),new Le(this._eventBus)}static create(){return new ee}addPlugin(e,t={}){this._registry.hasPlugin(e)||this._registry.createPlugin(e,this._eventBus,t)}reset(e,t){this._registry.reset(e,t)}destroy(e,t){this._registry.destroy(e,t)}getPlugin(e,t){let i=typeof e=="string"?e:e.pluginName;const s=this._registry.getPluginByName(i,t);if(!s)throw new Error(`You can't call getPlugin for ${i} with key: ${t} because it does not exist in your app`);return s.api}getPlugins(e,t){let i=typeof e=="string"?e:e.pluginName;const s=this._registry.getPluginsByName(i,t);if(s.length===0)throw new Error(`You can't call getPlugins for ${i} with key: ${t} because they don't exist in your app`);return s.map(n=>n.api)}onPluginEvent(e,t,i){const s=this._registry.getPluginByName(e.pluginName);s&&s.on(t,i)}removePluginEventListener(e,t,i){const s=this._registry.getPluginByName(e.pluginName);s&&s.removeListener(t,i)}run(){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",this._start.bind(this)):this._start()}ready(e,t){this._appEventBus.subscribeToPluginReadyEvent(t,e)}_start(){this._setup(),requestAnimationFrame(this._tick.bind(this))}_setup(){this._listenToNativeEvents(),this._subscribeToEvents()}_listenToNativeEvents(){document.addEventListener("click",e=>{this._eventBus.emitEvent(b,{x:e.clientX,y:e.clientY,target:e.target})}),document.addEventListener("pointermove",e=>{this._eventBus.emitEvent(N,{x:e.clientX,y:e.clientY,target:e.target})}),document.addEventListener("pointerdown",e=>{this._eventBus.emitEvent(I,{x:e.clientX,y:e.clientY,target:e.target})}),document.addEventListener("pointerup",e=>{this._eventBus.emitEvent(C,{x:e.clientX,y:e.clientY,target:e.target})})}_tick(e){let t=(e-this._previousTime)/1e3;t>.016&&(t=1/60),this._previousTime=e,this._eventBus.reset(),this._subscribeToEvents(),this._read(),this._update(e,t),this._render(),requestAnimationFrame(this._tick.bind(this))}_subscribeToEvents(){this._eventBus.subscribeToEvent(k,this._onNodeAdded.bind(this)),this._eventBus.subscribeToEvent(z,this._onNodeRemoved.bind(this)),this._eventBus.subscribeToEvent(O,this._onDataChanged.bind(this)),this._registry.getPlugins().forEach(e=>{e.subscribeToEvents(this._eventBus)})}_onNodeAdded({node:e}){this._registry.queueNodeToBeCreated(e)}_onNodeRemoved({node:e}){this._registry.queueNodeToBeRemoved(e)}_onDataChanged(e){this._registry.notifyPluginAboutDataChange(e)}_read(){this._registry.getViews().forEach(e=>{e.read()})}_update(e,t){this._registry.update(),this._registry.getPlugins().slice().reverse().forEach(i=>{i.init()}),this._registry.getRenderablePlugins().forEach(i=>{i.update(e,t)}),this._registry.getViews().forEach(i=>{i.update(e,t)}),this._registry.getViews().forEach(i=>{i._updatePreviousRect()})}_render(){this._registry.getRenderablePlugins().forEach(e=>{e.render()}),this._registry.getViews().forEach(e=>{e.render()})}}function vt(){return ee.create()}class _e{constructor(e){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");a(this,"distance");this.props=e,this.previousX=e.previousX,this.previousY=e.previousY,this.x=e.x,this.y=e.y,this.width=e.width,this.height=e.height,this.distance=e.distance,this.view=e.view,this.isDragging=e.isDragging,this.target=e.target,this.directions=e.directions}}class pe 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(t){this._isDragging&&t.preventDefault()}get _isDragging(){return Array.from(this._pointerDownPerView.values()).some(t=>!!t)}subscribeToEvents(t){t.subscribeToEvent(I,({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 u=new l(i-r.position.x,s-r.position.y);this._pointerX=i,this._pointerY=s,this._initialPointerPerView.set(r.id,u)})}),t.subscribeToEvent(C,()=>{this.getViews().forEach(i=>{this._pointerDownPerView.get(i.id)&&this._initialPointerPerView.get(i.id)&&(this._pointerDownPerView.set(i.id,!1),this._emitEvent(i,[]))})}),t.subscribeToEvent(N,({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),u=this._viewPointerPositionLog.get(n.id);u&&u.push(new l(i,s));const h=u&&u.length>=2?u[u.length-2]:r.clone(),c=this._calculateDirections(h,r);this._emitEvent(n,c)}})})}_emitEvent(t,i){const s=this._viewPointerPositionLog.get(t.id),n=s&&s.length>=2?s[s.length-2]:null,r=this._pointerX-this._initialPointerPerView.get(t.id).x,u=this._pointerY-this._initialPointerPerView.get(t.id).y,h=n?n.x-this._initialPointerPerView.get(t.id).x:r,c=n?n.y-this._initialPointerPerView.get(t.id).y:u,d=this._pointerY-this._initialPointer.y,_=this._pointerX-this._initialPointer.x,g=ue(this._initialPointer,{x:this._pointerX,y:this._pointerY}),v=this._targetPerView.get(t.id);if(!v||!t.hasElement(v))return;const y=this._pointerDownPerView.get(t.id)===!0;y||this._viewPointerPositionLog.clear();const V={view:t,target:v,previousX:h,previousY:c,x:r,y:u,distance:g,width:_,height:d,isDragging:y,directions:i};this.emit(_e,V)}_calculateDirections(t,i){const s={up:l.sub(new l(t.x,t.y-1),t),down:l.sub(new l(t.x,t.y+1),t),left:l.sub(new l(t.x-1,t.y),t),right:l.sub(new l(t.x+1,t.y),t)},n=l.sub(i,t).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(pe,"pluginName","DragEventPlugin");class fe{constructor(e){a(this,"view");a(this,"direction");this.props=e,this.view=e.view,this.direction=e.direction}}class me extends B{constructor(){super(...arguments);a(this,"_viewIsPointerDownMap",new Map);a(this,"_viewPointerPositionLog",new Map);a(this,"_targetPerView",new Map)}subscribeToEvents(t){t.subscribeToEvent(I,({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)})}),t.subscribeToEvent(N,({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))})}),t.subscribeToEvent(C,({x:i,y:s})=>{this.getViews().forEach(r=>{if(!this._viewIsPointerDownMap.get(r.id)||!this._viewPointerPositionLog.has(r.id))return;const u=new l(i,s),h=this._viewPointerPositionLog.get(r.id),c=h[h.length-2]||u.clone(),d=this._targetPerView.get(r.id),_=n(c,u);d&&r.hasElement(d)&&_.hasSwiped&&this.emit(fe,{view:r,direction:_.direction}),this._viewPointerPositionLog.set(r.id,[]),this._viewIsPointerDownMap.set(r.id,!1)});function n(r,u){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(u,r).unitVector,d=["up","down","left","right"],_=[c.dot(h.up),c.dot(h.down),c.dot(h.left),c.dot(h.right)],g=Math.max(..._),v=_.indexOf(g),y=d[v],V=l.sub(u,r).magnitude;return{hasSwiped:c.dot(h[y])*V>30,direction:y}}})}}a(me,"pluginName","SwipeEventPlugin");class ve{constructor(e){a(this,"view");this.props=e,this.view=e.view}}class we extends B{subscribeToEvents(e){e.subscribeToEvent(b,({x:t,y:i,target:s})=>{this.getViews().forEach(n=>{const r=s,u=n.element===r||n.element.contains(r);n.intersects(t,i)&&u&&this.emit(ve,{view:n})})})}}a(we,"pluginName","ClickEventPlugin");function wt(o,e){const t=o.map(e),i=Math.min(...t),s=t.indexOf(i);return o[s]}const yt=Object.freeze(Object.defineProperty({__proto__:null,clamp:oe,distanceBetweenTwoPoints:ue,minBy:wt,pointToViewProgress:Oe,randomNumber:Me,remap:$e,valueAtPercentage:De},Symbol.toStringTag,{value:"Module"})),Vt=Object.freeze(Object.defineProperty({__proto__:null,PointerClickEvent:b,PointerDownEvent:I,PointerMoveEvent:N,PointerUpEvent:C},Symbol.toStringTag,{value:"Module"}));f.ClickEvent=ve,f.ClickEventPlugin=we,f.DataChangedEvent=O,f.DragEvent=_e,f.DragEventPlugin=pe,f.EventBus=L,f.EventPlugin=B,f.Events=Vt,f.Plugin=re,f.PluginContext=ae,f.SwipeEvent=fe,f.SwipeEventPlugin=me,f.Utils=yt,f.createApp=vt,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}); diff --git a/package.json b/package.json index 81e9567..da8565c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "veloxi", "author": "Taha Shashtari (taha@tahazsh.com)", - "version": "0.8.0", + "version": "0.9.0", "private": false, "type": "module", "main": "./dist/veloxi.min.js",