@frybynite/image-cloud 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/image-cloud-auto-init.js +46 -19
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +229 -202
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +12 -2
- package/package.json +1 -1
package/dist/image-cloud.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const Et = Object.freeze({
|
|
2
2
|
none: "none",
|
|
3
3
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
4
4
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
@@ -56,10 +56,10 @@ const It = Object.freeze({
|
|
|
56
56
|
phaseShift: 0,
|
|
57
57
|
synchronization: "offset"
|
|
58
58
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
59
|
-
}),
|
|
59
|
+
}), Nt = Object.freeze({
|
|
60
60
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
61
61
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
62
|
-
}),
|
|
62
|
+
}), kt = Object.freeze({
|
|
63
63
|
mode: "adaptive",
|
|
64
64
|
// Default to adaptive sizing
|
|
65
65
|
minSize: 50,
|
|
@@ -78,7 +78,7 @@ const It = Object.freeze({
|
|
|
78
78
|
max: 15
|
|
79
79
|
})
|
|
80
80
|
}), Dt = Object.freeze({
|
|
81
|
-
sizing:
|
|
81
|
+
sizing: kt,
|
|
82
82
|
rotation: Gt
|
|
83
83
|
}), y = Object.freeze({
|
|
84
84
|
// Unified loader configuration
|
|
@@ -95,7 +95,9 @@ const It = Object.freeze({
|
|
|
95
95
|
}),
|
|
96
96
|
static: Object.freeze({
|
|
97
97
|
sources: [],
|
|
98
|
-
// Must be provided by user
|
|
98
|
+
// Must be provided by user (or use urls shorthand)
|
|
99
|
+
urls: void 0,
|
|
100
|
+
// Shorthand for sources: [{ type: 'urls', urls: [...] }]
|
|
99
101
|
validateUrls: !0,
|
|
100
102
|
validationTimeout: 5e3,
|
|
101
103
|
validationMethod: "head",
|
|
@@ -111,7 +113,7 @@ const It = Object.freeze({
|
|
|
111
113
|
algorithm: "radial",
|
|
112
114
|
scaleDecay: 0,
|
|
113
115
|
// No decay by default (0-1 for radial/spiral)
|
|
114
|
-
responsive:
|
|
116
|
+
responsive: Nt,
|
|
115
117
|
targetCoverage: 0.6,
|
|
116
118
|
// Target 60% of container area
|
|
117
119
|
densityFactor: 1,
|
|
@@ -264,15 +266,15 @@ function qt(o, t) {
|
|
|
264
266
|
...o.sizing,
|
|
265
267
|
...t.sizing
|
|
266
268
|
}, t.sizing.variance)) {
|
|
267
|
-
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((n = (i = o.sizing) == null ? void 0 : i.variance) == null ? void 0 : n.min) ?? 1,
|
|
268
|
-
e.sizing.variance = { min: d, max:
|
|
269
|
+
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((n = (i = o.sizing) == null ? void 0 : i.variance) == null ? void 0 : n.min) ?? 1, f = c.max !== void 0 && c.max >= 1 && c.max <= 1.75 ? c.max : ((r = (s = o.sizing) == null ? void 0 : s.variance) == null ? void 0 : r.max) ?? 1;
|
|
270
|
+
e.sizing.variance = { min: d, max: f };
|
|
269
271
|
}
|
|
270
272
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
271
273
|
...o.rotation,
|
|
272
274
|
...t.rotation
|
|
273
275
|
}, t.rotation.range)) {
|
|
274
|
-
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (a = o.rotation) == null ? void 0 : a.range) == null ? void 0 : h.min) ?? -15,
|
|
275
|
-
e.rotation.range = { min: d, max:
|
|
276
|
+
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (a = o.rotation) == null ? void 0 : a.range) == null ? void 0 : h.min) ?? -15, f = c.max !== void 0 && c.max >= 0 && c.max <= 180 ? c.max : ((u = (l = o.rotation) == null ? void 0 : l.range) == null ? void 0 : u.max) ?? 15;
|
|
277
|
+
e.rotation.range = { min: d, max: f };
|
|
276
278
|
}
|
|
277
279
|
return e;
|
|
278
280
|
}
|
|
@@ -333,6 +335,7 @@ function Bt(o = {}) {
|
|
|
333
335
|
...y.loader.static,
|
|
334
336
|
...o.loader.static,
|
|
335
337
|
sources: o.loader.static.sources || y.loader.static.sources,
|
|
338
|
+
urls: o.loader.static.urls || void 0,
|
|
336
339
|
allowedExtensions: o.loader.static.allowedExtensions || y.loader.static.allowedExtensions
|
|
337
340
|
})), o.layout && (n.layout = {
|
|
338
341
|
...y.layout,
|
|
@@ -396,16 +399,16 @@ function Bt(o = {}) {
|
|
|
396
399
|
...o.rendering.performance
|
|
397
400
|
})), o.debug !== void 0 && (n.debug = o.debug), n;
|
|
398
401
|
}
|
|
399
|
-
function
|
|
402
|
+
function Jt(o, t) {
|
|
400
403
|
return { ...o ? zt[o] : zt.playful, ...t };
|
|
401
404
|
}
|
|
402
|
-
function
|
|
405
|
+
function Vt(o, t) {
|
|
403
406
|
return { ...o ? Ft[o] : Ft.gentle, ...t };
|
|
404
407
|
}
|
|
405
|
-
function
|
|
408
|
+
function Kt(o, t) {
|
|
406
409
|
return { ...o ? Ct[o] : Ct.gentle, ...t };
|
|
407
410
|
}
|
|
408
|
-
class
|
|
411
|
+
class Zt {
|
|
409
412
|
constructor(t) {
|
|
410
413
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
411
414
|
}
|
|
@@ -566,22 +569,22 @@ function st(o, t, e) {
|
|
|
566
569
|
}
|
|
567
570
|
function Qt(o, t, e, i) {
|
|
568
571
|
const { overshoot: n, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, l = te(s, r);
|
|
569
|
-
let u = 0, c = 0, d = 1,
|
|
572
|
+
let u = 0, c = 0, d = 1, f = n, b = !1;
|
|
570
573
|
for (let g = 0; g < l.length; g++)
|
|
571
574
|
if (o <= l[g].time) {
|
|
572
|
-
c = g === 0 ? 0 : l[g - 1].time, d = l[g].time,
|
|
575
|
+
c = g === 0 ? 0 : l[g - 1].time, d = l[g].time, f = l[g].overshoot, b = l[g].isOvershoot;
|
|
573
576
|
break;
|
|
574
577
|
}
|
|
575
578
|
const p = (o - c) / (d - c);
|
|
576
579
|
if (b)
|
|
577
|
-
u = 1 +
|
|
580
|
+
u = 1 + f * gt(p);
|
|
578
581
|
else if (c === 0)
|
|
579
582
|
u = gt(p);
|
|
580
583
|
else {
|
|
581
584
|
const g = l.find(
|
|
582
585
|
(v, w) => v.time > c && w > 0 && l[w - 1].isOvershoot
|
|
583
|
-
),
|
|
584
|
-
u = st(
|
|
586
|
+
), m = 1 + ((g == null ? void 0 : g.overshoot) || f);
|
|
587
|
+
u = st(m, 1, gt(p));
|
|
585
588
|
}
|
|
586
589
|
return {
|
|
587
590
|
x: t.x + a * u,
|
|
@@ -602,7 +605,7 @@ function ee(o, t, e, i) {
|
|
|
602
605
|
const { stiffness: n, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, l = e.y - t.y, u = Math.sqrt(n / r), c = s / (2 * Math.sqrt(n * r));
|
|
603
606
|
let d;
|
|
604
607
|
if (c < 1) {
|
|
605
|
-
const
|
|
608
|
+
const f = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u * o * 3), p = Math.cos(f * o * a * Math.PI);
|
|
606
609
|
d = 1 - b * p;
|
|
607
610
|
} else
|
|
608
611
|
d = 1 - Math.exp(-u * o * 3);
|
|
@@ -612,10 +615,10 @@ function ee(o, t, e, i) {
|
|
|
612
615
|
};
|
|
613
616
|
}
|
|
614
617
|
function ie(o, t, e, i) {
|
|
615
|
-
const { amplitude: n, frequency: s, decay: r, decayRate: a, phase: h } = i, l = e.x - t.x, u = e.y - t.y, c = Math.sqrt(l * l + u * u), d = c > 0 ? -u / c : 0,
|
|
618
|
+
const { amplitude: n, frequency: s, decay: r, decayRate: a, phase: h } = i, l = e.x - t.x, u = e.y - t.y, c = Math.sqrt(l * l + u * u), d = c > 0 ? -u / c : 0, f = c > 0 ? l / c : 1, b = s * Math.PI * 2 * o + h, p = r ? Math.pow(1 - o, a) : 1, g = n * Math.sin(b) * p, m = ne(o);
|
|
616
619
|
return {
|
|
617
|
-
x: st(t.x, e.x,
|
|
618
|
-
y: st(t.y, e.y,
|
|
620
|
+
x: st(t.x, e.x, m) + g * d,
|
|
621
|
+
y: st(t.y, e.y, m) + g * f
|
|
619
622
|
};
|
|
620
623
|
}
|
|
621
624
|
function gt(o) {
|
|
@@ -635,14 +638,14 @@ function se(o, t, e) {
|
|
|
635
638
|
const a = 0.5, l = 0.5 / (n * 2);
|
|
636
639
|
let u = 0.5;
|
|
637
640
|
for (let d = 0; d < n; d++) {
|
|
638
|
-
const
|
|
639
|
-
u += l, s.push({ time: u, scale:
|
|
641
|
+
const f = 1 - (r - 1) * a;
|
|
642
|
+
u += l, s.push({ time: u, scale: f }), r = 1 + (r - 1) * a * a, u += l, d < n - 1 && s.push({ time: u, scale: r });
|
|
640
643
|
}
|
|
641
644
|
s.push({ time: 1, scale: 1 });
|
|
642
645
|
let c = 1;
|
|
643
646
|
for (let d = 0; d < s.length; d++)
|
|
644
647
|
if (o <= s[d].time) {
|
|
645
|
-
const
|
|
648
|
+
const f = d === 0 ? 0 : s[d - 1].time, b = d === 0 ? 1 : s[d - 1].scale, p = (o - f) / (s[d].time - f), g = gt(p);
|
|
646
649
|
c = b + (s[d].scale - b) * g;
|
|
647
650
|
break;
|
|
648
651
|
}
|
|
@@ -662,20 +665,20 @@ function ae(o) {
|
|
|
662
665
|
onComplete: u,
|
|
663
666
|
rotationConfig: c,
|
|
664
667
|
startRotation: d,
|
|
665
|
-
scaleConfig:
|
|
668
|
+
scaleConfig: f,
|
|
666
669
|
startScale: b
|
|
667
|
-
} = o, p = n.type, g = d !== void 0 && d !== h,
|
|
668
|
-
if ((p === "linear" || p === "arc") && !w && !(
|
|
670
|
+
} = o, p = n.type, g = d !== void 0 && d !== h, m = (c == null ? void 0 : c.mode) === "wobble", v = (c == null ? void 0 : c.wobble) || { amplitude: 15, frequency: 3, decay: !0 }, w = g || m, I = b !== void 0 && b !== l, R = (f == null ? void 0 : f.mode) === "pop", x = (f == null ? void 0 : f.pop) || { overshoot: 1.2, bounces: 1 };
|
|
671
|
+
if ((p === "linear" || p === "arc") && !w && !(I || R)) {
|
|
669
672
|
u && u();
|
|
670
673
|
return;
|
|
671
674
|
}
|
|
672
675
|
const j = performance.now(), U = -r / 2, D = -a / 2;
|
|
673
|
-
function P(
|
|
674
|
-
const F =
|
|
676
|
+
function P(N) {
|
|
677
|
+
const F = N - j, S = Math.min(F / s, 1);
|
|
675
678
|
let A;
|
|
676
679
|
switch (p) {
|
|
677
680
|
case "bounce": {
|
|
678
|
-
const _ =
|
|
681
|
+
const _ = Jt(
|
|
679
682
|
n.bouncePreset,
|
|
680
683
|
n.bounce
|
|
681
684
|
);
|
|
@@ -683,7 +686,7 @@ function ae(o) {
|
|
|
683
686
|
break;
|
|
684
687
|
}
|
|
685
688
|
case "elastic": {
|
|
686
|
-
const _ =
|
|
689
|
+
const _ = Vt(
|
|
687
690
|
n.elasticPreset,
|
|
688
691
|
n.elastic
|
|
689
692
|
);
|
|
@@ -691,7 +694,7 @@ function ae(o) {
|
|
|
691
694
|
break;
|
|
692
695
|
}
|
|
693
696
|
case "wave": {
|
|
694
|
-
const _ =
|
|
697
|
+
const _ = Kt(
|
|
695
698
|
n.wavePreset,
|
|
696
699
|
n.wave
|
|
697
700
|
);
|
|
@@ -706,9 +709,9 @@ function ae(o) {
|
|
|
706
709
|
}
|
|
707
710
|
const O = A.x - i.x, z = A.y - i.y;
|
|
708
711
|
let T;
|
|
709
|
-
|
|
712
|
+
m ? T = oe(S, h, v) : g ? T = st(d, h, S) : T = h;
|
|
710
713
|
let M;
|
|
711
|
-
R ? M = se(S, l, x) :
|
|
714
|
+
R ? M = se(S, l, x) : I ? M = st(b, l, S) : M = l, t.style.transform = `translate(${U}px, ${D}px) translate(${O}px, ${z}px) rotate(${T}deg) scale(${M})`, S < 1 ? requestAnimationFrame(P) : (t.style.transform = `translate(${U}px, ${D}px) rotate(${h}deg) scale(${l})`, u && u());
|
|
712
715
|
}
|
|
713
716
|
requestAnimationFrame(P);
|
|
714
717
|
}
|
|
@@ -770,8 +773,8 @@ class le {
|
|
|
770
773
|
*/
|
|
771
774
|
calculateNearestEdge(t, e, i, n) {
|
|
772
775
|
const s = t.x, r = t.y, a = s, h = i.width - s, l = r, u = i.height - r, c = Math.min(a, h, l, u);
|
|
773
|
-
let d = t.x,
|
|
774
|
-
return c === a ? d = -(e.width + n) : c === h ? d = i.width + n : c === l ?
|
|
776
|
+
let d = t.x, f = t.y;
|
|
777
|
+
return c === a ? d = -(e.width + n) : c === h ? d = i.width + n : c === l ? f = -(e.height + n) : f = i.height + n, { x: d, y: f };
|
|
775
778
|
}
|
|
776
779
|
/**
|
|
777
780
|
* Calculate start position from a specific edge
|
|
@@ -829,8 +832,8 @@ class le {
|
|
|
829
832
|
h = typeof l == "number" ? l : 500;
|
|
830
833
|
let u;
|
|
831
834
|
a === "even" ? u = n / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
832
|
-
const c = i.width / 2, d = i.height / 2,
|
|
833
|
-
return { x:
|
|
835
|
+
const c = i.width / 2, d = i.height / 2, f = c + Math.cos(u) * h, b = d + Math.sin(u) * h;
|
|
836
|
+
return { x: f, y: b };
|
|
834
837
|
}
|
|
835
838
|
/**
|
|
836
839
|
* Get animation parameters for an image
|
|
@@ -850,7 +853,7 @@ class le {
|
|
|
850
853
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
851
854
|
*/
|
|
852
855
|
buildStartTransform(t, e, i, n, s, r, a, h) {
|
|
853
|
-
const l = t.x - e.x, u = t.y - e.y, c = a !== void 0 ? a : i, d = h !== void 0 ? h : n,
|
|
856
|
+
const l = t.x - e.x, u = t.y - e.y, c = a !== void 0 ? a : i, d = h !== void 0 ? h : n, f = s !== void 0 ? -s / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = s !== void 0 ? `translate(${f}px, ${b}px)` : "translate(-50%, -50%)";
|
|
854
857
|
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(${d})`;
|
|
855
858
|
}
|
|
856
859
|
/**
|
|
@@ -1079,10 +1082,10 @@ class he {
|
|
|
1079
1082
|
* @returns Array of layout objects with position, rotation, scale
|
|
1080
1083
|
*/
|
|
1081
1084
|
generate(t, e, i = {}) {
|
|
1082
|
-
var x, L, j, U, D, P,
|
|
1083
|
-
const n = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, l = ((x = this.imageConfig.rotation) == null ? void 0 : x.mode) ?? "none", u = ((j = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : j.min) ?? -15, c = ((D = (U = this.imageConfig.rotation) == null ? void 0 : U.range) == null ? void 0 : D.max) ?? 15, d = ((
|
|
1085
|
+
var x, L, j, U, D, P, N, F, S;
|
|
1086
|
+
const n = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, l = ((x = this.imageConfig.rotation) == null ? void 0 : x.mode) ?? "none", u = ((j = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : j.min) ?? -15, c = ((D = (U = this.imageConfig.rotation) == null ? void 0 : U.range) == null ? void 0 : D.max) ?? 15, d = ((N = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : N.min) ?? 1, f = ((S = (F = this.imageConfig.sizing) == null ? void 0 : F.variance) == null ? void 0 : S.max) ?? 1, b = d !== 1 || f !== 1, g = h * 1.5 / 2, m = h / 2, v = s - a - g, w = r - a - m, I = a + g, R = a + m;
|
|
1084
1087
|
for (let A = 0; A < t; A++) {
|
|
1085
|
-
const O = this.random(
|
|
1088
|
+
const O = this.random(I, v), z = this.random(R, w), T = l === "random" ? this.random(u, c) : 0, M = b ? this.random(d, f) : 1, _ = h * M, K = {
|
|
1086
1089
|
id: A,
|
|
1087
1090
|
x: O,
|
|
1088
1091
|
y: z,
|
|
@@ -1090,7 +1093,7 @@ class he {
|
|
|
1090
1093
|
scale: M,
|
|
1091
1094
|
baseSize: _
|
|
1092
1095
|
};
|
|
1093
|
-
n.push(
|
|
1096
|
+
n.push(K);
|
|
1094
1097
|
}
|
|
1095
1098
|
return n;
|
|
1096
1099
|
}
|
|
@@ -1116,10 +1119,10 @@ class de {
|
|
|
1116
1119
|
* @returns Array of layout objects with position, rotation, scale
|
|
1117
1120
|
*/
|
|
1118
1121
|
generate(t, e, i = {}) {
|
|
1119
|
-
var L, j, U, D, P,
|
|
1120
|
-
const n = [], { width: s, height: r } = e, { debugRadials: a } = this.config, h = i.fixedHeight ?? 200, l = ((L = this.imageConfig.rotation) == null ? void 0 : L.mode) ?? "none", u = ((U = (j = this.imageConfig.rotation) == null ? void 0 : j.range) == null ? void 0 : U.min) ?? -15, c = ((P = (D = this.imageConfig.rotation) == null ? void 0 : D.range) == null ? void 0 : P.max) ?? 15, d = ((F = (
|
|
1122
|
+
var L, j, U, D, P, N, F, S, A;
|
|
1123
|
+
const n = [], { width: s, height: r } = e, { debugRadials: a } = this.config, h = i.fixedHeight ?? 200, l = ((L = this.imageConfig.rotation) == null ? void 0 : L.mode) ?? "none", u = ((U = (j = this.imageConfig.rotation) == null ? void 0 : j.range) == null ? void 0 : U.min) ?? -15, c = ((P = (D = this.imageConfig.rotation) == null ? void 0 : D.range) == null ? void 0 : P.max) ?? 15, d = ((F = (N = this.imageConfig.sizing) == null ? void 0 : N.variance) == null ? void 0 : F.min) ?? 1, f = ((A = (S = this.imageConfig.sizing) == null ? void 0 : S.variance) == null ? void 0 : A.max) ?? 1, b = d !== 1 || f !== 1, p = this.config.scaleDecay ?? 0, g = ["green", "blue", "red", "yellow", "orange", "purple"], m = i.fixedHeight ?? h, v = s / 2, w = r / 2, I = Math.ceil(Math.sqrt(t));
|
|
1121
1124
|
if (t > 0) {
|
|
1122
|
-
const O = b ? this.random(d,
|
|
1125
|
+
const O = b ? this.random(d, f) : 1, z = m * O;
|
|
1123
1126
|
n.push({
|
|
1124
1127
|
id: 0,
|
|
1125
1128
|
x: v,
|
|
@@ -1135,14 +1138,14 @@ class de {
|
|
|
1135
1138
|
}
|
|
1136
1139
|
let R = 1, x = 1;
|
|
1137
1140
|
for (; R < t; ) {
|
|
1138
|
-
const O = x /
|
|
1141
|
+
const O = x / I, z = p > 0 ? 1 - O * p * 0.5 : 1, T = x * (m * 0.8), M = T * 1.5, _ = Math.PI * (3 * (M + T) - Math.sqrt((3 * M + T) * (M + 3 * T))), K = this.estimateWidth(m), X = Math.floor(_ / (K * 0.7));
|
|
1139
1142
|
if (X === 0) {
|
|
1140
1143
|
x++;
|
|
1141
1144
|
continue;
|
|
1142
1145
|
}
|
|
1143
|
-
const B = 2 * Math.PI / X,
|
|
1146
|
+
const B = 2 * Math.PI / X, Z = x * (20 * Math.PI / 180);
|
|
1144
1147
|
for (let W = 0; W < X && R < t; W++) {
|
|
1145
|
-
const Q = W * B +
|
|
1148
|
+
const Q = W * B + Z, tt = b ? this.random(d, f) : 1, q = z * tt, et = m * q;
|
|
1146
1149
|
let Y = v + Math.cos(Q) * M, C = w + Math.sin(Q) * T;
|
|
1147
1150
|
const $ = this.config.spacing.padding ?? 50, G = et * 1.5 / 2, H = et / 2;
|
|
1148
1151
|
Y - G < $ ? Y = $ + G : Y + G > s - $ && (Y = s - $ - G), C - H < $ ? C = $ + H : C + H > r - $ && (C = r - $ - H);
|
|
@@ -1222,56 +1225,56 @@ class ge {
|
|
|
1222
1225
|
* @returns Array of layout objects with position, rotation, scale
|
|
1223
1226
|
*/
|
|
1224
1227
|
generate(t, e, i = {}) {
|
|
1225
|
-
var X, B,
|
|
1226
|
-
const n = [], { width: s, height: r } = e, a = { ...ue, ...this.config.grid }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((X = this.imageConfig.rotation) == null ? void 0 : X.mode) ?? "none", c = ((
|
|
1228
|
+
var X, B, Z, W, Q, tt, q, et, Y;
|
|
1229
|
+
const n = [], { width: s, height: r } = e, a = { ...ue, ...this.config.grid }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((X = this.imageConfig.rotation) == null ? void 0 : X.mode) ?? "none", c = ((Z = (B = this.imageConfig.sizing) == null ? void 0 : B.variance) == null ? void 0 : Z.min) ?? 1, d = ((Q = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : Q.max) ?? 1, f = c !== 1 || d !== 1, b = s - 2 * h, p = r - 2 * h, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1227
1230
|
t,
|
|
1228
1231
|
b,
|
|
1229
1232
|
p,
|
|
1230
1233
|
l,
|
|
1231
1234
|
a
|
|
1232
|
-
), v = a.stagger === "row", w = a.stagger === "column",
|
|
1235
|
+
), v = a.stagger === "row", w = a.stagger === "column", I = v ? g + 0.5 : g, R = w ? m + 0.5 : m, x = (b - a.gap * (g - 1)) / I, L = (p - a.gap * (m - 1)) / R, j = v ? x / 2 : 0, U = w ? L / 2 : 0, D = 1 + a.overlap, P = Math.min(x, L) * D, N = i.fixedHeight ? Math.min(i.fixedHeight, P) : P, F = g * x + (g - 1) * a.gap + j, S = m * L + (m - 1) * a.gap + U, A = h + (b - F) / 2, O = h + (p - S) / 2, z = g * m, T = a.columns !== "auto" && a.rows !== "auto", M = T && t > z;
|
|
1233
1236
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1234
1237
|
gridConfigColumns: a.columns,
|
|
1235
1238
|
gridConfigRows: a.rows,
|
|
1236
1239
|
columns: g,
|
|
1237
|
-
rows:
|
|
1240
|
+
rows: m,
|
|
1238
1241
|
cellCount: z,
|
|
1239
1242
|
hasFixedGrid: T,
|
|
1240
1243
|
imageCount: t,
|
|
1241
1244
|
isOverflowMode: M
|
|
1242
1245
|
});
|
|
1243
|
-
const _ = M ? new Array(z).fill(0) : [],
|
|
1246
|
+
const _ = M ? new Array(z).fill(0) : [], K = Math.min(x, L) * a.overflowOffset;
|
|
1244
1247
|
for (let C = 0; C < t; C++) {
|
|
1245
|
-
let $,
|
|
1248
|
+
let $, k, G = 0;
|
|
1246
1249
|
if (M && C >= z) {
|
|
1247
|
-
const
|
|
1248
|
-
G = Math.floor(
|
|
1250
|
+
const V = C - z, J = V % z;
|
|
1251
|
+
G = Math.floor(V / z) + 1, _[J]++, a.fillDirection === "row" ? ($ = J % g, k = Math.floor(J / g)) : (k = J % m, $ = Math.floor(J / m));
|
|
1249
1252
|
} else
|
|
1250
|
-
a.fillDirection === "row" ? ($ = C % g,
|
|
1251
|
-
let H = A + $ * (x + a.gap) + x / 2, it = O +
|
|
1252
|
-
if (a.stagger === "row" &&
|
|
1253
|
-
const
|
|
1254
|
-
H +=
|
|
1253
|
+
a.fillDirection === "row" ? ($ = C % g, k = Math.floor(C / g)) : (k = C % m, $ = Math.floor(C / m));
|
|
1254
|
+
let H = A + $ * (x + a.gap) + x / 2, it = O + k * (L + a.gap) + L / 2;
|
|
1255
|
+
if (a.stagger === "row" && k % 2 === 1 ? H += x / 2 : a.stagger === "column" && $ % 2 === 1 && (it += L / 2), G > 0) {
|
|
1256
|
+
const V = (G - 1) % Lt.length, J = Lt[V];
|
|
1257
|
+
H += J.x * K, it += J.y * K;
|
|
1255
1258
|
}
|
|
1256
1259
|
if (a.jitter > 0) {
|
|
1257
|
-
const
|
|
1258
|
-
H += this.random(-
|
|
1260
|
+
const V = x / 2 * a.jitter, J = L / 2 * a.jitter;
|
|
1261
|
+
H += this.random(-V, V), it += this.random(-J, J);
|
|
1259
1262
|
}
|
|
1260
1263
|
let nt = H, ot = it;
|
|
1261
1264
|
if (!M && a.fillDirection === "row") {
|
|
1262
|
-
const
|
|
1263
|
-
if (
|
|
1264
|
-
const Mt =
|
|
1265
|
+
const V = t % g || g;
|
|
1266
|
+
if (k === Math.floor((t - 1) / g) && V < g) {
|
|
1267
|
+
const Mt = V * x + (V - 1) * a.gap;
|
|
1265
1268
|
let St = 0;
|
|
1266
1269
|
a.alignment === "center" ? St = (F - Mt) / 2 : a.alignment === "end" && (St = F - Mt), nt += St;
|
|
1267
1270
|
}
|
|
1268
1271
|
}
|
|
1269
|
-
const pt =
|
|
1272
|
+
const pt = f ? this.random(c, d) : 1, at = N * pt, dt = at * 1.5 / 2, ut = at / 2, yt = h + dt, vt = s - h - dt, Ht = h + ut, _t = r - h - ut;
|
|
1270
1273
|
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(Ht, Math.min(ot, _t));
|
|
1271
1274
|
let wt = 0;
|
|
1272
1275
|
if (u === "random") {
|
|
1273
|
-
const
|
|
1274
|
-
a.jitter > 0 ? wt = this.random(
|
|
1276
|
+
const V = ((q = (tt = this.imageConfig.rotation) == null ? void 0 : tt.range) == null ? void 0 : q.min) ?? -15, J = ((Y = (et = this.imageConfig.rotation) == null ? void 0 : et.range) == null ? void 0 : Y.max) ?? 15;
|
|
1277
|
+
a.jitter > 0 ? wt = this.random(V * a.jitter, J * a.jitter) : wt = this.random(V, J);
|
|
1275
1278
|
}
|
|
1276
1279
|
let xt;
|
|
1277
1280
|
M && G > 0 ? xt = 50 - G : xt = M ? 100 + C : C + 1, n.push({
|
|
@@ -1311,7 +1314,7 @@ class ge {
|
|
|
1311
1314
|
return Math.random() * (e - t) + t;
|
|
1312
1315
|
}
|
|
1313
1316
|
}
|
|
1314
|
-
const
|
|
1317
|
+
const me = Math.PI * (3 - Math.sqrt(5)), fe = {
|
|
1315
1318
|
spiralType: "golden",
|
|
1316
1319
|
direction: "counterclockwise",
|
|
1317
1320
|
tightness: 1,
|
|
@@ -1330,34 +1333,34 @@ class pe {
|
|
|
1330
1333
|
* @returns Array of layout objects with position, rotation, scale
|
|
1331
1334
|
*/
|
|
1332
1335
|
generate(t, e, i = {}) {
|
|
1333
|
-
var R, x, L, j, U, D, P,
|
|
1334
|
-
const n = [], { width: s, height: r } = e, a = { ...
|
|
1335
|
-
|
|
1336
|
+
var R, x, L, j, U, D, P, N, F;
|
|
1337
|
+
const n = [], { width: s, height: r } = e, a = { ...fe, ...this.config.spiral }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((R = this.imageConfig.rotation) == null ? void 0 : R.mode) ?? "none", c = ((L = (x = this.imageConfig.rotation) == null ? void 0 : x.range) == null ? void 0 : L.min) ?? -15, d = ((U = (j = this.imageConfig.rotation) == null ? void 0 : j.range) == null ? void 0 : U.max) ?? 15, f = ((P = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : P.min) ?? 1, b = ((F = (N = this.imageConfig.sizing) == null ? void 0 : N.variance) == null ? void 0 : F.max) ?? 1, p = f !== 1 || b !== 1, g = this.config.scaleDecay ?? a.scaleDecay, m = s / 2, v = r / 2, w = Math.min(
|
|
1338
|
+
m - h - l / 2,
|
|
1336
1339
|
v - h - l / 2
|
|
1337
|
-
),
|
|
1340
|
+
), I = a.direction === "clockwise" ? -1 : 1;
|
|
1338
1341
|
for (let S = 0; S < t; S++) {
|
|
1339
1342
|
let A, O;
|
|
1340
1343
|
if (a.spiralType === "golden")
|
|
1341
|
-
A = S *
|
|
1344
|
+
A = S * me * I + a.startAngle, O = this.calculateGoldenRadius(S, t, w, a.tightness);
|
|
1342
1345
|
else if (a.spiralType === "archimedean") {
|
|
1343
1346
|
const H = S * 0.5 * a.tightness;
|
|
1344
|
-
A = H *
|
|
1347
|
+
A = H * I + a.startAngle, O = this.calculateArchimedeanRadius(H, t, w, a.tightness);
|
|
1345
1348
|
} else {
|
|
1346
1349
|
const H = S * 0.3 * a.tightness;
|
|
1347
|
-
A = H *
|
|
1350
|
+
A = H * I + a.startAngle, O = this.calculateLogarithmicRadius(H, t, w, a.tightness);
|
|
1348
1351
|
}
|
|
1349
|
-
const z =
|
|
1350
|
-
let
|
|
1352
|
+
const z = m + Math.cos(A) * O, T = v + Math.sin(A) * O, M = O / w, _ = g > 0 ? 1 - M * g * 0.5 : 1, K = p ? this.random(f, b) : 1, X = _ * K, B = l * X, W = B * 1.5 / 2, Q = B / 2, tt = h + W, q = s - h - W, et = h + Q, Y = r - h - Q, C = Math.max(tt, Math.min(z, q)), $ = Math.max(et, Math.min(T, Y));
|
|
1353
|
+
let k = 0;
|
|
1351
1354
|
if (u === "random") {
|
|
1352
1355
|
const H = A * 180 / Math.PI % 360, it = this.random(c, d);
|
|
1353
|
-
|
|
1354
|
-
} else u === "tangent" && (
|
|
1356
|
+
k = a.spiralType === "golden" ? it : H * 0.1 + it * 0.9;
|
|
1357
|
+
} else u === "tangent" && (k = this.calculateSpiralTangent(A, O, a));
|
|
1355
1358
|
const G = t - S;
|
|
1356
1359
|
n.push({
|
|
1357
1360
|
id: S,
|
|
1358
1361
|
x: C,
|
|
1359
1362
|
y: $,
|
|
1360
|
-
rotation:
|
|
1363
|
+
rotation: k,
|
|
1361
1364
|
scale: X,
|
|
1362
1365
|
baseSize: B,
|
|
1363
1366
|
zIndex: G
|
|
@@ -1433,14 +1436,14 @@ class ye {
|
|
|
1433
1436
|
* @returns Array of layout objects with position, rotation, scale
|
|
1434
1437
|
*/
|
|
1435
1438
|
generate(t, e, i = {}) {
|
|
1436
|
-
var
|
|
1437
|
-
const n = [], { width: s, height: r } = e, a = { ...be, ...this.config.cluster }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((
|
|
1439
|
+
var I, R, x, L, j, U, D, P, N;
|
|
1440
|
+
const n = [], { width: s, height: r } = e, a = { ...be, ...this.config.cluster }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((I = this.imageConfig.rotation) == null ? void 0 : I.mode) ?? "none", c = ((x = (R = this.imageConfig.rotation) == null ? void 0 : R.range) == null ? void 0 : x.min) ?? -15, d = ((j = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : j.max) ?? 15, f = ((D = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : D.min) ?? 1, b = ((N = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : N.max) ?? 1, p = f !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1438
1441
|
t,
|
|
1439
1442
|
a.clusterCount,
|
|
1440
1443
|
s,
|
|
1441
1444
|
r,
|
|
1442
1445
|
a.clusterSpacing
|
|
1443
|
-
),
|
|
1446
|
+
), m = this.generateClusterCenters(
|
|
1444
1447
|
g,
|
|
1445
1448
|
s,
|
|
1446
1449
|
r,
|
|
@@ -1451,25 +1454,25 @@ class ye {
|
|
|
1451
1454
|
v[F % g]++;
|
|
1452
1455
|
let w = 0;
|
|
1453
1456
|
for (let F = 0; F < g; F++) {
|
|
1454
|
-
const S =
|
|
1457
|
+
const S = m[F], A = v[F];
|
|
1455
1458
|
for (let O = 0; O < A; O++) {
|
|
1456
1459
|
let z, T;
|
|
1457
1460
|
if (a.distribution === "gaussian")
|
|
1458
1461
|
z = this.gaussianRandom() * S.spread, T = this.gaussianRandom() * S.spread;
|
|
1459
1462
|
else {
|
|
1460
|
-
const
|
|
1461
|
-
z = Math.cos(
|
|
1463
|
+
const k = this.random(0, Math.PI * 2), G = this.random(0, S.spread);
|
|
1464
|
+
z = Math.cos(k) * G, T = Math.sin(k) * G;
|
|
1462
1465
|
}
|
|
1463
1466
|
const M = 1 + a.overlap * 0.5, _ = 1 + a.overlap * 0.3;
|
|
1464
1467
|
z /= M, T /= M;
|
|
1465
|
-
const
|
|
1466
|
-
let
|
|
1468
|
+
const K = p ? this.random(f, b) : 1, X = _ * K, B = l * X;
|
|
1469
|
+
let Z = S.x + z, W = S.y + T;
|
|
1467
1470
|
const tt = B * 1.5 / 2, q = B / 2;
|
|
1468
|
-
|
|
1471
|
+
Z = Math.max(h + tt, Math.min(Z, s - h - tt)), W = Math.max(h + q, Math.min(W, r - h - q));
|
|
1469
1472
|
const et = u === "random" ? this.random(c, d) : 0, C = Math.sqrt(z * z + T * T) / S.spread, $ = Math.round((1 - C) * 50) + 1;
|
|
1470
1473
|
n.push({
|
|
1471
1474
|
id: w,
|
|
1472
|
-
x:
|
|
1475
|
+
x: Z,
|
|
1473
1476
|
y: W,
|
|
1474
1477
|
rotation: et,
|
|
1475
1478
|
scale: X,
|
|
@@ -1497,22 +1500,22 @@ class ye {
|
|
|
1497
1500
|
generateClusterCenters(t, e, i, n, s) {
|
|
1498
1501
|
const r = [], h = n + s.clusterSpread, l = e - n - s.clusterSpread, u = n + s.clusterSpread, c = i - n - s.clusterSpread;
|
|
1499
1502
|
for (let d = 0; d < t; d++) {
|
|
1500
|
-
let
|
|
1503
|
+
let f = null, b = -1;
|
|
1501
1504
|
for (let p = 0; p < 100; p++) {
|
|
1502
1505
|
const g = {
|
|
1503
1506
|
x: this.random(h, l),
|
|
1504
1507
|
y: this.random(u, c),
|
|
1505
1508
|
spread: this.calculateClusterSpread(s)
|
|
1506
1509
|
};
|
|
1507
|
-
let
|
|
1510
|
+
let m = 1 / 0;
|
|
1508
1511
|
for (const v of r) {
|
|
1509
|
-
const w = g.x - v.x,
|
|
1510
|
-
|
|
1512
|
+
const w = g.x - v.x, I = g.y - v.y, R = Math.sqrt(w * w + I * I);
|
|
1513
|
+
m = Math.min(m, R);
|
|
1511
1514
|
}
|
|
1512
|
-
if ((r.length === 0 ||
|
|
1515
|
+
if ((r.length === 0 || m > b) && (f = g, b = m), m >= s.clusterSpacing)
|
|
1513
1516
|
break;
|
|
1514
1517
|
}
|
|
1515
|
-
|
|
1518
|
+
f && r.push(f);
|
|
1516
1519
|
}
|
|
1517
1520
|
return r;
|
|
1518
1521
|
}
|
|
@@ -1552,18 +1555,18 @@ class ve {
|
|
|
1552
1555
|
* @returns Array of layout objects with position, rotation, scale
|
|
1553
1556
|
*/
|
|
1554
1557
|
generate(t, e, i = {}) {
|
|
1555
|
-
var M, _,
|
|
1556
|
-
const n = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, l = ((M = this.imageConfig.rotation) == null ? void 0 : M.mode) ?? "none", u = ((
|
|
1558
|
+
var M, _, K, X, B, Z, W, Q, tt;
|
|
1559
|
+
const n = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, l = ((M = this.imageConfig.rotation) == null ? void 0 : M.mode) ?? "none", u = ((K = (_ = this.imageConfig.rotation) == null ? void 0 : _.range) == null ? void 0 : K.min) ?? -15, c = ((B = (X = this.imageConfig.rotation) == null ? void 0 : X.range) == null ? void 0 : B.max) ?? 15, d = ((W = (Z = this.imageConfig.sizing) == null ? void 0 : Z.variance) == null ? void 0 : W.min) ?? 1, f = ((tt = (Q = this.imageConfig.sizing) == null ? void 0 : Q.variance) == null ? void 0 : tt.max) ?? 1, b = d !== 1 || f !== 1, p = i.fixedHeight ?? a, g = {
|
|
1557
1560
|
...jt,
|
|
1558
1561
|
...this.config.wave
|
|
1559
|
-
}, { rows:
|
|
1562
|
+
}, { rows: m, amplitude: v, frequency: w, phaseShift: I, synchronization: R } = g, x = Math.ceil(t / m), U = p * 1.5 / 2, D = h + U, P = s - h - U, N = P - D, F = x > 1 ? N / (x - 1) : 0, S = h + v + p / 2, A = r - h - v - p / 2, O = A - S, z = m > 1 ? O / (m - 1) : 0;
|
|
1560
1563
|
let T = 0;
|
|
1561
|
-
for (let q = 0; q <
|
|
1562
|
-
const et =
|
|
1564
|
+
for (let q = 0; q < m && T < t; q++) {
|
|
1565
|
+
const et = m === 1 ? (S + A) / 2 : S + q * z;
|
|
1563
1566
|
let Y = 0;
|
|
1564
|
-
R === "offset" ? Y = q *
|
|
1567
|
+
R === "offset" ? Y = q * I : R === "alternating" && (Y = q * Math.PI);
|
|
1565
1568
|
for (let C = 0; C < x && T < t; C++) {
|
|
1566
|
-
const $ = x === 1 ? (D + P) / 2 : D + C * F,
|
|
1569
|
+
const $ = x === 1 ? (D + P) / 2 : D + C * F, k = this.calculateWaveY($, s, v, w, Y), G = $, H = et + k, it = b ? this.random(d, f) : 1, nt = p * it;
|
|
1567
1570
|
let ot = 0;
|
|
1568
1571
|
l === "tangent" ? ot = this.calculateRotation($, s, v, w, Y) : l === "random" && (ot = this.random(u, c));
|
|
1569
1572
|
const at = nt * 1.5 / 2, bt = nt / 2, dt = h + at, ut = s - h - at, yt = h + bt, vt = r - h - bt;
|
|
@@ -1723,12 +1726,12 @@ class we {
|
|
|
1723
1726
|
if (r !== void 0)
|
|
1724
1727
|
return { height: r };
|
|
1725
1728
|
const a = (s == null ? void 0 : s.minSize) ?? 50, h = (s == null ? void 0 : s.maxSize) ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: c, height: d } = t, p = c * d * l / e;
|
|
1726
|
-
let
|
|
1727
|
-
|
|
1728
|
-
let v = this.clamp(
|
|
1729
|
-
if (v === a &&
|
|
1729
|
+
let m = Math.sqrt(p / 1.4);
|
|
1730
|
+
m *= u, m = Math.min(m, i);
|
|
1731
|
+
let v = this.clamp(m, a, h);
|
|
1732
|
+
if (v === a && m < a) {
|
|
1730
1733
|
const w = Math.max(a * 0.05, 20);
|
|
1731
|
-
v = Math.max(w,
|
|
1734
|
+
v = Math.max(w, m);
|
|
1732
1735
|
}
|
|
1733
1736
|
return { height: v };
|
|
1734
1737
|
}
|
|
@@ -1739,14 +1742,14 @@ class we {
|
|
|
1739
1742
|
return Math.max(e, Math.min(i, t));
|
|
1740
1743
|
}
|
|
1741
1744
|
}
|
|
1742
|
-
var
|
|
1745
|
+
var E = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(E || {});
|
|
1743
1746
|
function xe(o) {
|
|
1744
|
-
return o in
|
|
1747
|
+
return o in Et;
|
|
1745
1748
|
}
|
|
1746
1749
|
function Se(o) {
|
|
1747
|
-
return o ? xe(o) ?
|
|
1750
|
+
return o ? xe(o) ? Et[o] : o : Et.md;
|
|
1748
1751
|
}
|
|
1749
|
-
function
|
|
1752
|
+
function Ee(o) {
|
|
1750
1753
|
if (!o) return "";
|
|
1751
1754
|
const t = [];
|
|
1752
1755
|
if (o.grayscale !== void 0 && t.push(`grayscale(${o.grayscale})`), o.blur !== void 0 && t.push(`blur(${o.blur}px)`), o.brightness !== void 0 && t.push(`brightness(${o.brightness})`), o.contrast !== void 0 && t.push(`contrast(${o.contrast})`), o.saturate !== void 0 && t.push(`saturate(${o.saturate})`), o.opacity !== void 0 && t.push(`opacity(${o.opacity})`), o.sepia !== void 0 && t.push(`sepia(${o.sepia})`), o.hueRotate !== void 0 && t.push(`hue-rotate(${o.hueRotate}deg)`), o.invert !== void 0 && t.push(`invert(${o.invert})`), o.dropShadow !== void 0)
|
|
@@ -1764,7 +1767,7 @@ function ct(o) {
|
|
|
1764
1767
|
const t = o.width ?? 0, e = o.style ?? "solid", i = o.color ?? "#000000";
|
|
1765
1768
|
return `${t}px ${e} ${i}`;
|
|
1766
1769
|
}
|
|
1767
|
-
function
|
|
1770
|
+
function mt(o) {
|
|
1768
1771
|
var s, r;
|
|
1769
1772
|
if (!o) return {};
|
|
1770
1773
|
const t = {};
|
|
@@ -1777,7 +1780,7 @@ function ft(o) {
|
|
|
1777
1780
|
t.borderTop = ct(h), t.borderRight = ct(l), t.borderBottom = ct(u), t.borderLeft = ct(c);
|
|
1778
1781
|
} else o.border && (t.border = ct(o.border));
|
|
1779
1782
|
o.shadow !== void 0 && (t.boxShadow = Se(o.shadow));
|
|
1780
|
-
const n =
|
|
1783
|
+
const n = Ee(o.filter);
|
|
1781
1784
|
if (t.filter = n || "none", o.opacity !== void 0 && (t.opacity = String(o.opacity)), o.cursor !== void 0 && (t.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1782
1785
|
const a = o.outline.width ?? 0, h = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
1783
1786
|
t.outline = `${a}px ${h} ${l}`, o.outline.offset !== void 0 && (t.outlineOffset = `${o.outline.offset}px`);
|
|
@@ -1806,10 +1809,10 @@ const Ot = {
|
|
|
1806
1809
|
UNFOCUSING: 999,
|
|
1807
1810
|
FOCUSING: 1e3
|
|
1808
1811
|
};
|
|
1809
|
-
class
|
|
1812
|
+
class Ie {
|
|
1810
1813
|
constructor(t, e, i) {
|
|
1811
1814
|
var n, s;
|
|
1812
|
-
this.state =
|
|
1815
|
+
this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = mt(i == null ? void 0 : i.default), this.focusedStyles = mt(i == null ? void 0 : i.focused), this.defaultClassName = (n = i == null ? void 0 : i.default) == null ? void 0 : n.className, this.focusedClassName = (s = i == null ? void 0 : i.focused) == null ? void 0 : s.className;
|
|
1813
1816
|
}
|
|
1814
1817
|
/**
|
|
1815
1818
|
* Get current state machine state
|
|
@@ -1821,7 +1824,7 @@ class Ee {
|
|
|
1821
1824
|
* Check if any animation is in progress
|
|
1822
1825
|
*/
|
|
1823
1826
|
isAnimating() {
|
|
1824
|
-
return this.state !==
|
|
1827
|
+
return this.state !== E.IDLE && this.state !== E.FOCUSED;
|
|
1825
1828
|
}
|
|
1826
1829
|
/**
|
|
1827
1830
|
* Normalize scalePercent value
|
|
@@ -1917,12 +1920,12 @@ class Ee {
|
|
|
1917
1920
|
rotation: i.rotation,
|
|
1918
1921
|
scale: 1
|
|
1919
1922
|
// No scale - using dimensions
|
|
1920
|
-
}, d = (s == null ? void 0 : s.width) ?? a,
|
|
1923
|
+
}, d = (s == null ? void 0 : s.width) ?? a, f = (s == null ? void 0 : s.height) ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1921
1924
|
t,
|
|
1922
1925
|
c,
|
|
1923
1926
|
u,
|
|
1924
1927
|
d,
|
|
1925
|
-
|
|
1928
|
+
f,
|
|
1926
1929
|
l.width,
|
|
1927
1930
|
l.height,
|
|
1928
1931
|
b
|
|
@@ -1959,7 +1962,7 @@ class Ee {
|
|
|
1959
1962
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1960
1963
|
*/
|
|
1961
1964
|
startUnfocusAnimation(t, e, i, n) {
|
|
1962
|
-
var b, p, g,
|
|
1965
|
+
var b, p, g, m, v;
|
|
1963
1966
|
t.style.zIndex = String(Ot.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1964
1967
|
const s = i ?? ((b = this.focusData) == null ? void 0 : b.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (n == null ? void 0 : n.width) ?? ((p = this.focusData) == null ? void 0 : p.focusWidth) ?? t.offsetWidth, a = (n == null ? void 0 : n.height) ?? ((g = this.focusData) == null ? void 0 : g.focusHeight) ?? t.offsetHeight, h = {
|
|
1965
1968
|
x: 0,
|
|
@@ -1967,7 +1970,7 @@ class Ee {
|
|
|
1967
1970
|
rotation: e.rotation,
|
|
1968
1971
|
scale: 1
|
|
1969
1972
|
// No scale - using dimensions
|
|
1970
|
-
}, l = ((
|
|
1973
|
+
}, l = ((m = this.focusData) == null ? void 0 : m.originalWidth) ?? t.offsetWidth, u = ((v = this.focusData) == null ? void 0 : v.originalHeight) ?? t.offsetHeight, c = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
|
|
1971
1974
|
t,
|
|
1972
1975
|
s,
|
|
1973
1976
|
h,
|
|
@@ -1976,7 +1979,7 @@ class Ee {
|
|
|
1976
1979
|
l,
|
|
1977
1980
|
u,
|
|
1978
1981
|
c
|
|
1979
|
-
),
|
|
1982
|
+
), f = {
|
|
1980
1983
|
id: `unfocus-${Date.now()}`,
|
|
1981
1984
|
element: t,
|
|
1982
1985
|
animation: d,
|
|
@@ -1988,7 +1991,7 @@ class Ee {
|
|
|
1988
1991
|
return {
|
|
1989
1992
|
element: t,
|
|
1990
1993
|
originalState: e,
|
|
1991
|
-
animationHandle:
|
|
1994
|
+
animationHandle: f,
|
|
1992
1995
|
direction: "out",
|
|
1993
1996
|
originalWidth: l,
|
|
1994
1997
|
originalHeight: u
|
|
@@ -2016,14 +2019,14 @@ class Ee {
|
|
|
2016
2019
|
* Implements cross-animation when swapping focus
|
|
2017
2020
|
*/
|
|
2018
2021
|
async focusImage(t, e, i) {
|
|
2019
|
-
var s, r, a, h, l, u, c, d,
|
|
2020
|
-
if (this.currentFocus === t && this.state ===
|
|
2022
|
+
var s, r, a, h, l, u, c, d, f, b, p, g;
|
|
2023
|
+
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2021
2024
|
return this.unfocusImage();
|
|
2022
|
-
if (((s = this.incoming) == null ? void 0 : s.element) === t && this.state ===
|
|
2023
|
-
const
|
|
2024
|
-
x:
|
|
2025
|
-
y:
|
|
2026
|
-
rotation:
|
|
2025
|
+
if (((s = this.incoming) == null ? void 0 : s.element) === t && this.state === E.FOCUSING) {
|
|
2026
|
+
const m = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), v = {
|
|
2027
|
+
x: m.x,
|
|
2028
|
+
y: m.y,
|
|
2029
|
+
rotation: m.rotation,
|
|
2027
2030
|
scale: 1
|
|
2028
2031
|
// No scale transform - using dimensions
|
|
2029
2032
|
}, w = {
|
|
@@ -2035,17 +2038,17 @@ class Ee {
|
|
|
2035
2038
|
this.incoming.originalState,
|
|
2036
2039
|
v,
|
|
2037
2040
|
w
|
|
2038
|
-
), this.incoming = null, this.state =
|
|
2041
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, ((r = this.focusData) == null ? void 0 : r.originalZIndex) || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2039
2042
|
return;
|
|
2040
2043
|
}
|
|
2041
2044
|
const n = ++this.focusGeneration;
|
|
2042
2045
|
switch (this.state) {
|
|
2043
|
-
case
|
|
2044
|
-
if (this.state =
|
|
2045
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2046
|
+
case E.IDLE:
|
|
2047
|
+
if (this.state = E.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2048
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2046
2049
|
break;
|
|
2047
|
-
case
|
|
2048
|
-
if (this.state =
|
|
2050
|
+
case E.FOCUSED:
|
|
2051
|
+
if (this.state = E.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2049
2052
|
this.currentFocus,
|
|
2050
2053
|
this.focusData.originalState
|
|
2051
2054
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
@@ -2053,9 +2056,9 @@ class Ee {
|
|
|
2053
2056
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2054
2057
|
]), this.focusGeneration !== n)
|
|
2055
2058
|
return;
|
|
2056
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((a = this.outgoing.originalState.zIndex) == null ? void 0 : a.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2059
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((a = this.outgoing.originalState.zIndex) == null ? void 0 : a.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2057
2060
|
break;
|
|
2058
|
-
case
|
|
2061
|
+
case E.FOCUSING:
|
|
2059
2062
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2060
2063
|
this.incoming.element,
|
|
2061
2064
|
this.incoming.originalState,
|
|
@@ -2063,23 +2066,23 @@ class Ee {
|
|
|
2063
2066
|
(l = this.focusData) == null ? void 0 : l.originalWidth,
|
|
2064
2067
|
(u = this.focusData) == null ? void 0 : u.originalHeight
|
|
2065
2068
|
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2066
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2069
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2067
2070
|
break;
|
|
2068
|
-
case
|
|
2069
|
-
if (this.state =
|
|
2071
|
+
case E.UNFOCUSING:
|
|
2072
|
+
if (this.state = E.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2070
2073
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2071
2074
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2072
2075
|
]), this.focusGeneration !== n) return;
|
|
2073
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2076
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2074
2077
|
break;
|
|
2075
|
-
case
|
|
2078
|
+
case E.CROSS_ANIMATING:
|
|
2076
2079
|
if (((d = this.incoming) == null ? void 0 : d.element) === t)
|
|
2077
2080
|
return;
|
|
2078
|
-
if (((
|
|
2079
|
-
const
|
|
2080
|
-
x:
|
|
2081
|
-
y:
|
|
2082
|
-
rotation:
|
|
2081
|
+
if (((f = this.outgoing) == null ? void 0 : f.element) === t) {
|
|
2082
|
+
const m = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0), v = {
|
|
2083
|
+
x: m.x,
|
|
2084
|
+
y: m.y,
|
|
2085
|
+
rotation: m.rotation,
|
|
2083
2086
|
scale: 1
|
|
2084
2087
|
// No scale - using dimensions
|
|
2085
2088
|
}, w = {
|
|
@@ -2087,10 +2090,10 @@ class Ee {
|
|
|
2087
2090
|
height: t.offsetHeight
|
|
2088
2091
|
};
|
|
2089
2092
|
if (this.incoming) {
|
|
2090
|
-
const
|
|
2091
|
-
x:
|
|
2092
|
-
y:
|
|
2093
|
-
rotation:
|
|
2093
|
+
const I = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), R = {
|
|
2094
|
+
x: I.x,
|
|
2095
|
+
y: I.y,
|
|
2096
|
+
rotation: I.rotation,
|
|
2094
2097
|
scale: 1
|
|
2095
2098
|
// No scale - using dimensions
|
|
2096
2099
|
}, x = {
|
|
@@ -2109,7 +2112,7 @@ class Ee {
|
|
|
2109
2112
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2110
2113
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2111
2114
|
]), this.focusGeneration !== n) return;
|
|
2112
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2115
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2113
2116
|
return;
|
|
2114
2117
|
}
|
|
2115
2118
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2119,10 +2122,10 @@ class Ee {
|
|
|
2119
2122
|
this.outgoing.originalWidth,
|
|
2120
2123
|
this.outgoing.originalHeight
|
|
2121
2124
|
), this.outgoing = null), this.incoming) {
|
|
2122
|
-
const
|
|
2123
|
-
x:
|
|
2124
|
-
y:
|
|
2125
|
-
rotation:
|
|
2125
|
+
const m = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), v = {
|
|
2126
|
+
x: m.x,
|
|
2127
|
+
y: m.y,
|
|
2128
|
+
rotation: m.rotation,
|
|
2126
2129
|
scale: 1
|
|
2127
2130
|
// No scale - using dimensions
|
|
2128
2131
|
}, w = {
|
|
@@ -2140,7 +2143,7 @@ class Ee {
|
|
|
2140
2143
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2141
2144
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2142
2145
|
]), this.focusGeneration !== n) return;
|
|
2143
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2146
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2144
2147
|
break;
|
|
2145
2148
|
}
|
|
2146
2149
|
}
|
|
@@ -2151,7 +2154,7 @@ class Ee {
|
|
|
2151
2154
|
var s, r, a;
|
|
2152
2155
|
const t = ++this.focusGeneration;
|
|
2153
2156
|
if (!this.currentFocus || !this.focusData) {
|
|
2154
|
-
if (this.incoming && this.state ===
|
|
2157
|
+
if (this.incoming && this.state === E.FOCUSING) {
|
|
2155
2158
|
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
|
|
2156
2159
|
x: h.x,
|
|
2157
2160
|
y: h.y,
|
|
@@ -2167,12 +2170,12 @@ class Ee {
|
|
|
2167
2170
|
this.incoming.originalState,
|
|
2168
2171
|
l,
|
|
2169
2172
|
u
|
|
2170
|
-
), this.incoming = null, this.state =
|
|
2171
|
-
this.removeFocusedStyling(this.outgoing.element, ((s = this.focusData) == null ? void 0 : s.originalZIndex) || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2173
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2174
|
+
this.removeFocusedStyling(this.outgoing.element, ((s = this.focusData) == null ? void 0 : s.originalZIndex) || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE;
|
|
2172
2175
|
}
|
|
2173
2176
|
return;
|
|
2174
2177
|
}
|
|
2175
|
-
if (this.state ===
|
|
2178
|
+
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2176
2179
|
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
|
|
2177
2180
|
x: h.x,
|
|
2178
2181
|
y: h.y,
|
|
@@ -2192,12 +2195,12 @@ class Ee {
|
|
|
2192
2195
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2193
2196
|
this.waitForAnimation(c.animationHandle)
|
|
2194
2197
|
]), this.focusGeneration !== t) return;
|
|
2195
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(c.element, ((a = this.incoming.originalState.zIndex) == null ? void 0 : a.toString()) || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state =
|
|
2198
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(c.element, ((a = this.incoming.originalState.zIndex) == null ? void 0 : a.toString()) || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2196
2199
|
return;
|
|
2197
2200
|
}
|
|
2198
|
-
this.state =
|
|
2201
|
+
this.state = E.UNFOCUSING;
|
|
2199
2202
|
const e = this.currentFocus, i = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2200
|
-
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state =
|
|
2203
|
+
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE);
|
|
2201
2204
|
}
|
|
2202
2205
|
/**
|
|
2203
2206
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2215,7 +2218,7 @@ class Ee {
|
|
|
2215
2218
|
* Check if an image is currently focused (stable state)
|
|
2216
2219
|
*/
|
|
2217
2220
|
isFocused(t) {
|
|
2218
|
-
return this.currentFocus === t && this.state ===
|
|
2221
|
+
return this.currentFocus === t && this.state === E.FOCUSED;
|
|
2219
2222
|
}
|
|
2220
2223
|
/**
|
|
2221
2224
|
* Check if an image is the target of current focus animation
|
|
@@ -2238,7 +2241,7 @@ class Ee {
|
|
|
2238
2241
|
* Used during swipe gestures for visual feedback
|
|
2239
2242
|
*/
|
|
2240
2243
|
setDragOffset(t) {
|
|
2241
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2244
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2242
2245
|
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2243
2246
|
n.push(`translate(${s}px, ${r}px)`), i.rotation !== void 0 && n.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = n.join(" ");
|
|
2244
2247
|
}
|
|
@@ -2248,7 +2251,7 @@ class Ee {
|
|
|
2248
2251
|
* @param duration - Animation duration in ms (default 150)
|
|
2249
2252
|
*/
|
|
2250
2253
|
clearDragOffset(t, e = 150) {
|
|
2251
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2254
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2252
2255
|
const i = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2253
2256
|
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2254
2257
|
const h = s.join(" ");
|
|
@@ -2279,10 +2282,10 @@ class Ee {
|
|
|
2279
2282
|
this.focusData.originalZIndex,
|
|
2280
2283
|
this.focusData.originalWidth,
|
|
2281
2284
|
this.focusData.originalHeight
|
|
2282
|
-
), this.state =
|
|
2285
|
+
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2283
2286
|
}
|
|
2284
2287
|
}
|
|
2285
|
-
const Te = 50, Re = 0.5, Ae = 20, Me = 0.3, ze = 150, Fe = 30,
|
|
2288
|
+
const Te = 50, Re = 0.5, Ae = 20, Me = 0.3, ze = 150, Fe = 30, ft = class ft {
|
|
2286
2289
|
constructor(t, e) {
|
|
2287
2290
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2288
2291
|
}
|
|
@@ -2310,7 +2313,7 @@ const Te = 50, Re = 0.5, Ae = 20, Me = 0.3, ze = 150, Fe = 30, mt = class mt {
|
|
|
2310
2313
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2311
2314
|
*/
|
|
2312
2315
|
hadRecentTouch() {
|
|
2313
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2316
|
+
return Date.now() - this.recentTouchTimestamp < ft.TOUCH_CLICK_DELAY;
|
|
2314
2317
|
}
|
|
2315
2318
|
handleTouchStart(t) {
|
|
2316
2319
|
if (t.touches.length !== 1) return;
|
|
@@ -2350,8 +2353,8 @@ const Te = 50, Re = 0.5, Ae = 20, Me = 0.3, ze = 150, Fe = 30, mt = class mt {
|
|
|
2350
2353
|
(e = this.touchState) != null && e.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2351
2354
|
}
|
|
2352
2355
|
};
|
|
2353
|
-
|
|
2354
|
-
let
|
|
2356
|
+
ft.TOUCH_CLICK_DELAY = 300;
|
|
2357
|
+
let It = ft;
|
|
2355
2358
|
class Ce {
|
|
2356
2359
|
constructor(t = {}) {
|
|
2357
2360
|
if (this._prepared = !1, this._discoveredUrls = [], this.apiKey = t.apiKey ?? "", this.apiEndpoint = t.apiEndpoint ?? "https://www.googleapis.com/drive/v3/files", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
@@ -2575,8 +2578,8 @@ class Ce {
|
|
|
2575
2578
|
}
|
|
2576
2579
|
class Le {
|
|
2577
2580
|
constructor(t = {}) {
|
|
2578
|
-
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.sources = t.sources ?? []
|
|
2579
|
-
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
2581
|
+
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.debugLogging = t.debugLogging ?? !1, t.urls && Array.isArray(t.urls) && t.urls.length > 0 ? this.sources = [{ type: "urls", urls: t.urls }, ...t.sources ?? []] : this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2582
|
+
throw new Error("StaticImageLoader requires at least one source (or urls shorthand) to be configured");
|
|
2580
2583
|
this.log("StaticImageLoader initialized with config:", t);
|
|
2581
2584
|
}
|
|
2582
2585
|
/**
|
|
@@ -2625,7 +2628,7 @@ class Le {
|
|
|
2625
2628
|
* @returns Promise resolving to array of valid URLs from this source
|
|
2626
2629
|
*/
|
|
2627
2630
|
async processSource(t, e) {
|
|
2628
|
-
return !t || !t.type ? (console.warn("Invalid source object (missing type):", t), []) : t.type === "urls" ? await this.processUrls(t.urls || [], e) : t.type === "path" ? await this.processPath(t.basePath, t.files || [], e) : (console.warn(`Unknown source type: ${t.type}`), []);
|
|
2631
|
+
return !t || !t.type ? (console.warn("Invalid source object (missing type):", t), []) : t.type === "urls" ? await this.processUrls(t.urls || [], e) : t.type === "path" ? await this.processPath(t.basePath, t.files || [], e) : t.type === "json" ? await this.processJson(t.url, e) : (console.warn(`Unknown source type: ${t.type}`), []);
|
|
2629
2632
|
}
|
|
2630
2633
|
/**
|
|
2631
2634
|
* Process a list of direct URLs
|
|
@@ -2670,6 +2673,30 @@ class Le {
|
|
|
2670
2673
|
}
|
|
2671
2674
|
return n;
|
|
2672
2675
|
}
|
|
2676
|
+
/**
|
|
2677
|
+
* Process a JSON endpoint source
|
|
2678
|
+
* Fetches a JSON endpoint that returns { images: string[] }
|
|
2679
|
+
* @param url - JSON endpoint URL
|
|
2680
|
+
* @param filter - Filter to apply to discovered images
|
|
2681
|
+
* @returns Promise resolving to array of validated URLs
|
|
2682
|
+
*/
|
|
2683
|
+
async processJson(t, e) {
|
|
2684
|
+
if (!t)
|
|
2685
|
+
return console.warn("url is required for json-type sources"), [];
|
|
2686
|
+
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2687
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), 1e4);
|
|
2688
|
+
try {
|
|
2689
|
+
const s = await fetch(t, { signal: i.signal });
|
|
2690
|
+
if (clearTimeout(n), !s.ok)
|
|
2691
|
+
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2692
|
+
const r = await s.json();
|
|
2693
|
+
if (!r || !Array.isArray(r.images))
|
|
2694
|
+
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2695
|
+
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2696
|
+
} catch (s) {
|
|
2697
|
+
throw clearTimeout(n), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
2698
|
+
}
|
|
2699
|
+
}
|
|
2673
2700
|
/**
|
|
2674
2701
|
* Validate a single URL using HEAD request
|
|
2675
2702
|
* @param url - URL to validate
|
|
@@ -2879,10 +2906,10 @@ function Pe() {
|
|
|
2879
2906
|
class Ue {
|
|
2880
2907
|
constructor(t = {}) {
|
|
2881
2908
|
var i, n, s, r, a, h;
|
|
2882
|
-
this.fullConfig = Bt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.animationEngine = new
|
|
2909
|
+
this.fullConfig = Bt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.animationEngine = new Zt(this.fullConfig.animation), this.layoutEngine = new we({
|
|
2883
2910
|
layout: this.fullConfig.layout,
|
|
2884
2911
|
image: this.fullConfig.image
|
|
2885
|
-
}), this.zoomEngine = new
|
|
2912
|
+
}), this.zoomEngine = new Ie(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = mt((i = this.fullConfig.styling) == null ? void 0 : i.default), this.hoverStyles = mt((n = this.fullConfig.styling) == null ? void 0 : n.hover), this.defaultClassName = (r = (s = this.fullConfig.styling) == null ? void 0 : s.default) == null ? void 0 : r.className, this.hoverClassName = (h = (a = this.fullConfig.styling) == null ? void 0 : a.hover) == null ? void 0 : h.className;
|
|
2886
2913
|
const e = this.fullConfig.animation.entry || y.animation.entry;
|
|
2887
2914
|
this.entryAnimationEngine = new le(
|
|
2888
2915
|
e,
|
|
@@ -2934,7 +2961,7 @@ class Ue {
|
|
|
2934
2961
|
this.containerEl = this.containerRef;
|
|
2935
2962
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2936
2963
|
throw new Error(`Container #${this.containerId} not found`);
|
|
2937
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
2964
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new It(this.containerEl, {
|
|
2938
2965
|
onNext: () => this.navigateToNextImage(),
|
|
2939
2966
|
onPrev: () => this.navigateToPreviousImage(),
|
|
2940
2967
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
@@ -3045,20 +3072,20 @@ class Ue {
|
|
|
3045
3072
|
const d = {
|
|
3046
3073
|
x: parseFloat(l.dataset.startX),
|
|
3047
3074
|
y: parseFloat(l.dataset.startY)
|
|
3048
|
-
},
|
|
3075
|
+
}, f = {
|
|
3049
3076
|
x: parseFloat(l.dataset.endX),
|
|
3050
3077
|
y: parseFloat(l.dataset.endY)
|
|
3051
|
-
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation),
|
|
3078
|
+
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), m = parseFloat(l.dataset.scale), v = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : g, w = l.dataset.startScale ? parseFloat(l.dataset.startScale) : m, I = this.entryAnimationEngine.getTiming();
|
|
3052
3079
|
ae({
|
|
3053
3080
|
element: l,
|
|
3054
3081
|
startPosition: d,
|
|
3055
|
-
endPosition:
|
|
3082
|
+
endPosition: f,
|
|
3056
3083
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3057
|
-
duration:
|
|
3084
|
+
duration: I.duration,
|
|
3058
3085
|
imageWidth: b,
|
|
3059
3086
|
imageHeight: p,
|
|
3060
3087
|
rotation: g,
|
|
3061
|
-
scale:
|
|
3088
|
+
scale: m,
|
|
3062
3089
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3063
3090
|
startRotation: v,
|
|
3064
3091
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
@@ -3115,14 +3142,14 @@ class Ue {
|
|
|
3115
3142
|
this.fullConfig.layout.debugCenters && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), s.forEach((l, u) => {
|
|
3116
3143
|
const c = document.createElement("div");
|
|
3117
3144
|
c.className = "fbn-ic-debug-center", c.style.position = "absolute", c.style.width = "12px", c.style.height = "12px", c.style.borderRadius = "50%", c.style.backgroundColor = "red", c.style.border = "2px solid yellow", c.style.zIndex = "9999", c.style.pointerEvents = "none";
|
|
3118
|
-
const d = l.x,
|
|
3119
|
-
c.style.left = `${d - 6}px`, c.style.top = `${
|
|
3145
|
+
const d = l.x, f = l.y;
|
|
3146
|
+
c.style.left = `${d - 6}px`, c.style.top = `${f - 6}px`, c.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(c);
|
|
3120
3147
|
})), t.forEach((l, u) => {
|
|
3121
|
-
var
|
|
3148
|
+
var f, b;
|
|
3122
3149
|
const c = document.createElement("img");
|
|
3123
3150
|
c.referrerPolicy = "no-referrer", c.classList.add("fbn-ic-image"), c.dataset.imageId = String(u);
|
|
3124
3151
|
const d = s[u];
|
|
3125
|
-
c.style.position = "absolute", c.style.width = "auto", c.style.height = `${e}px`, c.style.left = `${d.x}px`, c.style.top = `${d.y}px`, d.borderColor && !((b = (
|
|
3152
|
+
c.style.position = "absolute", c.style.width = "auto", c.style.height = `${e}px`, c.style.left = `${d.x}px`, c.style.top = `${d.y}px`, d.borderColor && !((b = (f = this.fullConfig.styling) == null ? void 0 : f.default) != null && b.border) && (c.style.border = `5px solid ${d.borderColor}`, c.style.boxSizing = "border-box"), d.zIndex && (c.style.zIndex = String(d.zIndex)), lt(c, this.defaultStyles), ht(c, this.defaultClassName), c.addEventListener("mouseenter", () => {
|
|
3126
3153
|
this.hoveredImage = { element: c, layout: d }, this.zoomEngine.isInvolved(c) || (lt(c, this.hoverStyles), ht(c, this.hoverClassName));
|
|
3127
3154
|
}), c.addEventListener("mouseleave", () => {
|
|
3128
3155
|
this.hoveredImage = null, this.zoomEngine.isInvolved(c) || (lt(c, this.defaultStyles), Ut(c, this.hoverClassName), ht(c, this.defaultClassName));
|
|
@@ -3133,36 +3160,36 @@ class Ue {
|
|
|
3133
3160
|
return;
|
|
3134
3161
|
const p = c.naturalWidth / c.naturalHeight, g = e * p;
|
|
3135
3162
|
c.style.width = `${g}px`;
|
|
3136
|
-
const
|
|
3137
|
-
|
|
3163
|
+
const m = { x: d.x, y: d.y }, v = { width: g, height: e }, w = this.entryAnimationEngine.calculateStartPosition(
|
|
3164
|
+
m,
|
|
3138
3165
|
v,
|
|
3139
3166
|
i,
|
|
3140
3167
|
u,
|
|
3141
3168
|
t.length
|
|
3142
|
-
),
|
|
3169
|
+
), I = this.entryAnimationEngine.calculateStartRotation(d.rotation), R = this.entryAnimationEngine.calculateStartScale(d.scale), x = this.entryAnimationEngine.buildFinalTransform(
|
|
3143
3170
|
d.rotation,
|
|
3144
3171
|
d.scale,
|
|
3145
3172
|
g,
|
|
3146
3173
|
e
|
|
3147
3174
|
), L = this.entryAnimationEngine.buildStartTransform(
|
|
3148
3175
|
w,
|
|
3149
|
-
|
|
3176
|
+
m,
|
|
3150
3177
|
d.rotation,
|
|
3151
3178
|
d.scale,
|
|
3152
3179
|
g,
|
|
3153
3180
|
e,
|
|
3154
|
-
|
|
3181
|
+
I,
|
|
3155
3182
|
R
|
|
3156
3183
|
);
|
|
3157
3184
|
this.fullConfig.debug && u < 3 && console.log(`Image ${u}:`, {
|
|
3158
|
-
finalPosition:
|
|
3185
|
+
finalPosition: m,
|
|
3159
3186
|
imageSize: v,
|
|
3160
3187
|
left: d.x,
|
|
3161
3188
|
top: d.y,
|
|
3162
3189
|
finalTransform: x,
|
|
3163
3190
|
renderedWidth: g,
|
|
3164
3191
|
renderedHeight: e
|
|
3165
|
-
}), c.style.transform = L, c.dataset.finalTransform = x, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() ||
|
|
3192
|
+
}), c.style.transform = L, c.dataset.finalTransform = x, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || I !== d.rotation || R !== d.scale) && (c.dataset.startX = String(w.x), c.dataset.startY = String(w.y), c.dataset.endX = String(m.x), c.dataset.endY = String(m.y), c.dataset.imageWidth = String(g), c.dataset.imageHeight = String(e), c.dataset.rotation = String(d.rotation), c.dataset.scale = String(d.scale), c.dataset.startRotation = String(I), c.dataset.startScale = String(R)), this.displayQueue.push(c);
|
|
3166
3193
|
}, c.onerror = () => r++, c.src = l;
|
|
3167
3194
|
});
|
|
3168
3195
|
}
|
|
@@ -3204,7 +3231,7 @@ class Ue {
|
|
|
3204
3231
|
}
|
|
3205
3232
|
}
|
|
3206
3233
|
export {
|
|
3207
|
-
|
|
3234
|
+
Zt as AnimationEngine,
|
|
3208
3235
|
zt as BOUNCE_PRESETS,
|
|
3209
3236
|
ye as ClusterPlacementGenerator,
|
|
3210
3237
|
Oe as CompositeLoader,
|
|
@@ -3223,7 +3250,7 @@ export {
|
|
|
3223
3250
|
pe as SpiralPlacementGenerator,
|
|
3224
3251
|
Le as StaticImageLoader,
|
|
3225
3252
|
Ct as WAVE_PATH_PRESETS,
|
|
3226
|
-
|
|
3253
|
+
Ie as ZoomEngine,
|
|
3227
3254
|
ae as animatePath,
|
|
3228
3255
|
Pe as injectFunctionalStyles,
|
|
3229
3256
|
re as requiresJSAnimation
|