@frybynite/image-cloud 0.8.0 → 0.8.2
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/dist/image-cloud-auto-init.js +741 -733
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +438 -430
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +2 -2
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/react.d.ts +5 -0
- package/dist/react.js +416 -408
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +5 -0
- package/dist/vue.js +416 -408
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +5 -0
- package/dist/web-component.js +414 -406
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -53,18 +53,20 @@ const mt = Object.freeze({
|
|
|
53
53
|
shadow: "none"
|
|
54
54
|
})
|
|
55
55
|
}), Wt = Object.freeze({
|
|
56
|
+
tightness: 1
|
|
57
|
+
}), kt = Object.freeze({
|
|
56
58
|
rows: 1,
|
|
57
59
|
amplitude: 100,
|
|
58
60
|
frequency: 2,
|
|
59
61
|
phaseShift: 0,
|
|
60
62
|
synchronization: "offset"
|
|
61
63
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
62
|
-
}), kt = Object.freeze({
|
|
63
|
-
spacing: 0
|
|
64
64
|
}), Gt = Object.freeze({
|
|
65
|
+
spacing: 0
|
|
66
|
+
}), qt = Object.freeze({
|
|
65
67
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
66
68
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
67
|
-
}),
|
|
69
|
+
}), Xt = Object.freeze({
|
|
68
70
|
mode: "adaptive",
|
|
69
71
|
// Default to adaptive sizing
|
|
70
72
|
minSize: 50,
|
|
@@ -76,15 +78,15 @@ const mt = Object.freeze({
|
|
|
76
78
|
// No variance by default
|
|
77
79
|
max: 1
|
|
78
80
|
})
|
|
79
|
-
}),
|
|
81
|
+
}), Yt = Object.freeze({
|
|
80
82
|
mode: "none",
|
|
81
83
|
range: Object.freeze({
|
|
82
84
|
min: -15,
|
|
83
85
|
max: 15
|
|
84
86
|
})
|
|
85
87
|
}), zt = Object.freeze({
|
|
86
|
-
sizing:
|
|
87
|
-
rotation:
|
|
88
|
+
sizing: Xt,
|
|
89
|
+
rotation: Yt
|
|
88
90
|
}), Ot = Object.freeze({
|
|
89
91
|
validateUrls: !0,
|
|
90
92
|
validationTimeout: 5e3,
|
|
@@ -94,7 +96,7 @@ const mt = Object.freeze({
|
|
|
94
96
|
enabled: !1,
|
|
95
97
|
centers: !1,
|
|
96
98
|
loaders: !1
|
|
97
|
-
}),
|
|
99
|
+
}), E = Object.freeze({
|
|
98
100
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
99
101
|
loaders: [],
|
|
100
102
|
// Shared loader settings and debug config
|
|
@@ -109,7 +111,7 @@ const mt = Object.freeze({
|
|
|
109
111
|
algorithm: "radial",
|
|
110
112
|
scaleDecay: 0,
|
|
111
113
|
// No decay by default (0-1 for radial/spiral)
|
|
112
|
-
responsive:
|
|
114
|
+
responsive: qt,
|
|
113
115
|
targetCoverage: 0.6,
|
|
114
116
|
// Target 60% of container area
|
|
115
117
|
densityFactor: 1,
|
|
@@ -220,7 +222,7 @@ function Z(o, t) {
|
|
|
220
222
|
const i = { ...o };
|
|
221
223
|
return t.border !== void 0 && (i.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
222
224
|
}
|
|
223
|
-
function
|
|
225
|
+
function Bt(o, t) {
|
|
224
226
|
if (!t) return { ...o };
|
|
225
227
|
const i = Z(o.default, t.default), e = Z(
|
|
226
228
|
Z(i, o.hover),
|
|
@@ -235,7 +237,7 @@ function Yt(o, t) {
|
|
|
235
237
|
focused: n
|
|
236
238
|
};
|
|
237
239
|
}
|
|
238
|
-
function
|
|
240
|
+
function Vt(o, t) {
|
|
239
241
|
if (!t) return { ...o };
|
|
240
242
|
const i = { ...o };
|
|
241
243
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
@@ -254,7 +256,7 @@ function Bt(o, t) {
|
|
|
254
256
|
}
|
|
255
257
|
return i;
|
|
256
258
|
}
|
|
257
|
-
function
|
|
259
|
+
function Jt(o) {
|
|
258
260
|
const t = o.layout?.rotation;
|
|
259
261
|
if (t && "enabled" in t)
|
|
260
262
|
return {
|
|
@@ -264,7 +266,7 @@ function Vt(o) {
|
|
|
264
266
|
}
|
|
265
267
|
};
|
|
266
268
|
}
|
|
267
|
-
function
|
|
269
|
+
function Kt(o) {
|
|
268
270
|
const t = o.layout?.sizing?.variance;
|
|
269
271
|
if (t)
|
|
270
272
|
return {
|
|
@@ -275,8 +277,8 @@ function Jt(o) {
|
|
|
275
277
|
}
|
|
276
278
|
};
|
|
277
279
|
}
|
|
278
|
-
function
|
|
279
|
-
const t =
|
|
280
|
+
function Zt(o = {}) {
|
|
281
|
+
const t = Jt(o), i = Kt(o);
|
|
280
282
|
let e = o.image;
|
|
281
283
|
(t || i) && (e = {
|
|
282
284
|
...i || {},
|
|
@@ -300,69 +302,69 @@ function Kt(o = {}) {
|
|
|
300
302
|
}, s = {
|
|
301
303
|
loaders: n,
|
|
302
304
|
config: r,
|
|
303
|
-
image:
|
|
304
|
-
layout: { ...
|
|
305
|
-
animation: { ...
|
|
306
|
-
interaction: { ...
|
|
307
|
-
rendering: { ...
|
|
308
|
-
styling:
|
|
305
|
+
image: Vt(zt, e),
|
|
306
|
+
layout: { ...E.layout },
|
|
307
|
+
animation: { ...E.animation },
|
|
308
|
+
interaction: { ...E.interaction },
|
|
309
|
+
rendering: { ...E.rendering },
|
|
310
|
+
styling: Bt(Ft, o.styling)
|
|
309
311
|
};
|
|
310
312
|
if (o.layout && (s.layout = {
|
|
311
|
-
...
|
|
313
|
+
...E.layout,
|
|
312
314
|
...o.layout
|
|
313
315
|
}, o.layout.responsive && (s.layout.responsive = {
|
|
314
|
-
...
|
|
315
|
-
mobile: o.layout.responsive.mobile ? { ...
|
|
316
|
-
tablet: o.layout.responsive.tablet ? { ...
|
|
316
|
+
...E.layout.responsive,
|
|
317
|
+
mobile: o.layout.responsive.mobile ? { ...E.layout.responsive.mobile, ...o.layout.responsive.mobile } : E.layout.responsive.mobile,
|
|
318
|
+
tablet: o.layout.responsive.tablet ? { ...E.layout.responsive.tablet, ...o.layout.responsive.tablet } : E.layout.responsive.tablet
|
|
317
319
|
}), o.layout.spacing && (s.layout.spacing = {
|
|
318
|
-
...
|
|
320
|
+
...E.layout.spacing,
|
|
319
321
|
...o.layout.spacing
|
|
320
322
|
})), o.animation && (s.animation = {
|
|
321
|
-
...
|
|
323
|
+
...E.animation,
|
|
322
324
|
...o.animation
|
|
323
325
|
}, o.animation.easing && (s.animation.easing = {
|
|
324
|
-
...
|
|
326
|
+
...E.animation.easing,
|
|
325
327
|
...o.animation.easing
|
|
326
328
|
}), o.animation.queue && (s.animation.queue = {
|
|
327
|
-
...
|
|
329
|
+
...E.animation.queue,
|
|
328
330
|
...o.animation.queue
|
|
329
331
|
}), o.animation.performance && (s.animation.performance = {
|
|
330
|
-
...
|
|
332
|
+
...E.animation.performance,
|
|
331
333
|
...o.animation.performance
|
|
332
334
|
}), o.animation.entry && (s.animation.entry = {
|
|
333
|
-
...
|
|
335
|
+
...E.animation.entry,
|
|
334
336
|
...o.animation.entry,
|
|
335
337
|
start: o.animation.entry.start ? {
|
|
336
|
-
...
|
|
338
|
+
...E.animation.entry.start,
|
|
337
339
|
...o.animation.entry.start,
|
|
338
|
-
circular: o.animation.entry.start.circular ? { ...
|
|
339
|
-
} :
|
|
340
|
-
timing: o.animation.entry.timing ? { ...
|
|
341
|
-
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } :
|
|
342
|
-
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } :
|
|
343
|
-
scale: o.animation.entry.scale ? { ...wt, ...o.animation.entry.scale } :
|
|
340
|
+
circular: o.animation.entry.start.circular ? { ...E.animation.entry.start.circular, ...o.animation.entry.start.circular } : E.animation.entry.start.circular
|
|
341
|
+
} : E.animation.entry.start,
|
|
342
|
+
timing: o.animation.entry.timing ? { ...E.animation.entry.timing, ...o.animation.entry.timing } : E.animation.entry.timing,
|
|
343
|
+
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : E.animation.entry.path,
|
|
344
|
+
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : E.animation.entry.rotation,
|
|
345
|
+
scale: o.animation.entry.scale ? { ...wt, ...o.animation.entry.scale } : E.animation.entry.scale
|
|
344
346
|
})), o.interaction && (s.interaction = {
|
|
345
|
-
...
|
|
347
|
+
...E.interaction,
|
|
346
348
|
...o.interaction
|
|
347
349
|
}, o.interaction.focus && (s.interaction.focus = {
|
|
348
|
-
...
|
|
350
|
+
...E.interaction.focus,
|
|
349
351
|
...o.interaction.focus
|
|
350
352
|
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
351
|
-
...
|
|
353
|
+
...E.interaction.navigation,
|
|
352
354
|
...o.interaction.navigation
|
|
353
355
|
}), o.interaction.gestures && (s.interaction.gestures = {
|
|
354
|
-
...
|
|
356
|
+
...E.interaction.gestures,
|
|
355
357
|
...o.interaction.gestures
|
|
356
358
|
})), o.rendering && (s.rendering = {
|
|
357
|
-
...
|
|
359
|
+
...E.rendering,
|
|
358
360
|
...o.rendering
|
|
359
361
|
}, o.rendering.responsive && (s.rendering.responsive = {
|
|
360
|
-
...
|
|
362
|
+
...E.rendering.responsive,
|
|
361
363
|
...o.rendering.responsive,
|
|
362
|
-
breakpoints: o.rendering.responsive.breakpoints ? { ...
|
|
363
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection :
|
|
364
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...E.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : E.rendering.responsive.breakpoints,
|
|
365
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
364
366
|
}), o.rendering.ui && (s.rendering.ui = {
|
|
365
|
-
...
|
|
367
|
+
...E.rendering.ui,
|
|
366
368
|
...o.rendering.ui
|
|
367
369
|
})), s.config.debug = {
|
|
368
370
|
...Dt,
|
|
@@ -378,16 +380,16 @@ function Kt(o = {}) {
|
|
|
378
380
|
}
|
|
379
381
|
return s;
|
|
380
382
|
}
|
|
381
|
-
function
|
|
383
|
+
function Qt(o, t) {
|
|
382
384
|
return { ...o ? It[o] : It.playful, ...t };
|
|
383
385
|
}
|
|
384
|
-
function
|
|
386
|
+
function te(o, t) {
|
|
385
387
|
return { ...o ? Tt[o] : Tt.gentle, ...t };
|
|
386
388
|
}
|
|
387
|
-
function
|
|
389
|
+
function ee(o, t) {
|
|
388
390
|
return { ...o ? Ct[o] : Ct.gentle, ...t };
|
|
389
391
|
}
|
|
390
|
-
class
|
|
392
|
+
class ie {
|
|
391
393
|
constructor(t) {
|
|
392
394
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
393
395
|
}
|
|
@@ -546,31 +548,31 @@ class ee {
|
|
|
546
548
|
function J(o, t, i) {
|
|
547
549
|
return o + (t - o) * i;
|
|
548
550
|
}
|
|
549
|
-
function
|
|
550
|
-
const { overshoot: n, bounces: a, decayRatio: r } = e, s = i.x - t.x, c = i.y - t.y, l =
|
|
551
|
-
let u = 0, h = 0, d = 1,
|
|
552
|
-
for (let
|
|
553
|
-
if (o <= l[
|
|
554
|
-
h =
|
|
551
|
+
function oe(o, t, i, e) {
|
|
552
|
+
const { overshoot: n, bounces: a, decayRatio: r } = e, s = i.x - t.x, c = i.y - t.y, l = ne(a, r);
|
|
553
|
+
let u = 0, h = 0, d = 1, f = n, b = !1;
|
|
554
|
+
for (let g = 0; g < l.length; g++)
|
|
555
|
+
if (o <= l[g].time) {
|
|
556
|
+
h = g === 0 ? 0 : l[g - 1].time, d = l[g].time, f = l[g].overshoot, b = l[g].isOvershoot;
|
|
555
557
|
break;
|
|
556
558
|
}
|
|
557
|
-
const
|
|
559
|
+
const p = (o - h) / (d - h);
|
|
558
560
|
if (b)
|
|
559
|
-
u = 1 +
|
|
561
|
+
u = 1 + f * nt(p);
|
|
560
562
|
else if (h === 0)
|
|
561
|
-
u = nt(
|
|
563
|
+
u = nt(p);
|
|
562
564
|
else {
|
|
563
|
-
const
|
|
564
|
-
(y,
|
|
565
|
-
)?.overshoot ||
|
|
566
|
-
u = J(
|
|
565
|
+
const m = 1 + (l.find(
|
|
566
|
+
(y, w) => y.time > h && w > 0 && l[w - 1].isOvershoot
|
|
567
|
+
)?.overshoot || f);
|
|
568
|
+
u = J(m, 1, nt(p));
|
|
567
569
|
}
|
|
568
570
|
return {
|
|
569
571
|
x: t.x + s * u,
|
|
570
572
|
y: t.y + c * u
|
|
571
573
|
};
|
|
572
574
|
}
|
|
573
|
-
function
|
|
575
|
+
function ne(o, t) {
|
|
574
576
|
const i = [];
|
|
575
577
|
let e = 0.6;
|
|
576
578
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
@@ -580,12 +582,12 @@ function oe(o, t) {
|
|
|
580
582
|
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
581
583
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
582
584
|
}
|
|
583
|
-
function
|
|
585
|
+
function se(o, t, i, e) {
|
|
584
586
|
const { stiffness: n, damping: a, mass: r, oscillations: s } = e, c = i.x - t.x, l = i.y - t.y, u = Math.sqrt(n / r), h = a / (2 * Math.sqrt(n * r));
|
|
585
587
|
let d;
|
|
586
588
|
if (h < 1) {
|
|
587
|
-
const
|
|
588
|
-
d = 1 - b *
|
|
589
|
+
const f = u * Math.sqrt(1 - h * h), b = Math.exp(-h * u * o * 3), p = Math.cos(f * o * s * Math.PI);
|
|
590
|
+
d = 1 - b * p;
|
|
589
591
|
} else
|
|
590
592
|
d = 1 - Math.exp(-u * o * 3);
|
|
591
593
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
@@ -593,44 +595,44 @@ function ne(o, t, i, e) {
|
|
|
593
595
|
y: t.y + l * d
|
|
594
596
|
};
|
|
595
597
|
}
|
|
596
|
-
function
|
|
597
|
-
const { amplitude: n, frequency: a, decay: r, decayRate: s, phase: c } = e, l = i.x - t.x, u = i.y - t.y, h = Math.sqrt(l * l + u * u), d = h > 0 ? -u / h : 0,
|
|
598
|
+
function ae(o, t, i, e) {
|
|
599
|
+
const { amplitude: n, frequency: a, decay: r, decayRate: s, phase: c } = e, l = i.x - t.x, u = i.y - t.y, h = Math.sqrt(l * l + u * u), d = h > 0 ? -u / h : 0, f = h > 0 ? l / h : 1, b = a * Math.PI * 2 * o + c, p = r ? Math.pow(1 - o, s) : 1, g = n * Math.sin(b) * p, m = re(o);
|
|
598
600
|
return {
|
|
599
|
-
x: J(t.x, i.x,
|
|
600
|
-
y: J(t.y, i.y,
|
|
601
|
+
x: J(t.x, i.x, m) + g * d,
|
|
602
|
+
y: J(t.y, i.y, m) + g * f
|
|
601
603
|
};
|
|
602
604
|
}
|
|
603
605
|
function nt(o) {
|
|
604
606
|
return 1 - (1 - o) * (1 - o);
|
|
605
607
|
}
|
|
606
|
-
function
|
|
608
|
+
function re(o) {
|
|
607
609
|
return 1 - Math.pow(1 - o, 3);
|
|
608
610
|
}
|
|
609
|
-
function
|
|
611
|
+
function ce(o, t, i) {
|
|
610
612
|
const { amplitude: e, frequency: n, decay: a } = i, r = Math.sin(o * n * Math.PI * 2), s = a ? Math.pow(1 - o, 2) : 1, c = e * r * s;
|
|
611
613
|
return t + c;
|
|
612
614
|
}
|
|
613
|
-
function
|
|
615
|
+
function le(o, t, i) {
|
|
614
616
|
const { overshoot: e, bounces: n } = i, a = [];
|
|
615
617
|
a.push({ time: 0.5, scale: e });
|
|
616
618
|
let r = e;
|
|
617
619
|
const s = 0.5, l = 0.5 / (n * 2);
|
|
618
620
|
let u = 0.5;
|
|
619
621
|
for (let d = 0; d < n; d++) {
|
|
620
|
-
const
|
|
621
|
-
u += l, a.push({ time: u, scale:
|
|
622
|
+
const f = 1 - (r - 1) * s;
|
|
623
|
+
u += l, a.push({ time: u, scale: f }), r = 1 + (r - 1) * s * s, u += l, d < n - 1 && a.push({ time: u, scale: r });
|
|
622
624
|
}
|
|
623
625
|
a.push({ time: 1, scale: 1 });
|
|
624
626
|
let h = 1;
|
|
625
627
|
for (let d = 0; d < a.length; d++)
|
|
626
628
|
if (o <= a[d].time) {
|
|
627
|
-
const
|
|
628
|
-
h = b + (a[d].scale - b) *
|
|
629
|
+
const f = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (o - f) / (a[d].time - f), g = nt(p);
|
|
630
|
+
h = b + (a[d].scale - b) * g;
|
|
629
631
|
break;
|
|
630
632
|
}
|
|
631
633
|
return h * t;
|
|
632
634
|
}
|
|
633
|
-
function
|
|
635
|
+
function he(o) {
|
|
634
636
|
const {
|
|
635
637
|
element: t,
|
|
636
638
|
startPosition: i,
|
|
@@ -644,60 +646,60 @@ function le(o) {
|
|
|
644
646
|
onComplete: u,
|
|
645
647
|
rotationConfig: h,
|
|
646
648
|
startRotation: d,
|
|
647
|
-
scaleConfig:
|
|
649
|
+
scaleConfig: f,
|
|
648
650
|
startScale: b
|
|
649
|
-
} = o,
|
|
650
|
-
if ((
|
|
651
|
+
} = o, p = n.type, g = d !== void 0 && d !== c, m = h?.mode === "wobble", y = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, w = g || m, v = b !== void 0 && b !== l, R = f?.mode === "pop", x = f?.pop || { overshoot: 1.2, bounces: 1 };
|
|
652
|
+
if ((p === "linear" || p === "arc") && !w && !(v || R)) {
|
|
651
653
|
u && u();
|
|
652
654
|
return;
|
|
653
655
|
}
|
|
654
|
-
const
|
|
655
|
-
function
|
|
656
|
-
const N =
|
|
657
|
-
let
|
|
658
|
-
switch (
|
|
656
|
+
const z = performance.now(), L = -r / 2, _ = -s / 2;
|
|
657
|
+
function O(H) {
|
|
658
|
+
const N = H - z, T = Math.min(N / a, 1);
|
|
659
|
+
let D;
|
|
660
|
+
switch (p) {
|
|
659
661
|
case "bounce": {
|
|
660
|
-
const
|
|
662
|
+
const j = Qt(
|
|
661
663
|
n.bouncePreset,
|
|
662
664
|
n.bounce
|
|
663
665
|
);
|
|
664
|
-
|
|
666
|
+
D = oe(T, i, e, j);
|
|
665
667
|
break;
|
|
666
668
|
}
|
|
667
669
|
case "elastic": {
|
|
668
|
-
const
|
|
670
|
+
const j = te(
|
|
669
671
|
n.elasticPreset,
|
|
670
672
|
n.elastic
|
|
671
673
|
);
|
|
672
|
-
|
|
674
|
+
D = se(T, i, e, j);
|
|
673
675
|
break;
|
|
674
676
|
}
|
|
675
677
|
case "wave": {
|
|
676
|
-
const
|
|
678
|
+
const j = ee(
|
|
677
679
|
n.wavePreset,
|
|
678
680
|
n.wave
|
|
679
681
|
);
|
|
680
|
-
|
|
682
|
+
D = ae(T, i, e, j);
|
|
681
683
|
break;
|
|
682
684
|
}
|
|
683
685
|
default:
|
|
684
|
-
|
|
686
|
+
D = {
|
|
685
687
|
x: J(i.x, e.x, T),
|
|
686
688
|
y: J(i.y, e.y, T)
|
|
687
689
|
};
|
|
688
690
|
}
|
|
689
|
-
const
|
|
690
|
-
let
|
|
691
|
-
|
|
691
|
+
const G = D.x - e.x, U = D.y - e.y;
|
|
692
|
+
let M;
|
|
693
|
+
m ? M = ce(T, c, y) : g ? M = J(d, c, T) : M = c;
|
|
692
694
|
let C;
|
|
693
|
-
|
|
695
|
+
R ? C = le(T, l, x) : v ? C = J(b, l, T) : C = l, t.style.transform = `translate(${L}px, ${_}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${C})`, T < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
|
|
694
696
|
}
|
|
695
|
-
requestAnimationFrame(
|
|
697
|
+
requestAnimationFrame(O);
|
|
696
698
|
}
|
|
697
|
-
function
|
|
699
|
+
function de(o) {
|
|
698
700
|
return o === "bounce" || o === "elastic" || o === "wave";
|
|
699
701
|
}
|
|
700
|
-
const
|
|
702
|
+
const ue = {
|
|
701
703
|
radial: "center",
|
|
702
704
|
spiral: "center",
|
|
703
705
|
grid: "top",
|
|
@@ -706,7 +708,7 @@ const de = {
|
|
|
706
708
|
wave: "left",
|
|
707
709
|
honeycomb: "center"
|
|
708
710
|
};
|
|
709
|
-
class
|
|
711
|
+
class ge {
|
|
710
712
|
constructor(t, i) {
|
|
711
713
|
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || wt;
|
|
712
714
|
}
|
|
@@ -714,7 +716,7 @@ class ue {
|
|
|
714
716
|
* Get the effective start position, considering layout-aware defaults
|
|
715
717
|
*/
|
|
716
718
|
resolveStartPosition() {
|
|
717
|
-
return this.config.start.position ? this.config.start.position :
|
|
719
|
+
return this.config.start.position ? this.config.start.position : ue[this.layoutAlgorithm] || "nearest-edge";
|
|
718
720
|
}
|
|
719
721
|
/**
|
|
720
722
|
* Calculate the starting position for an image's entry animation
|
|
@@ -753,8 +755,8 @@ class ue {
|
|
|
753
755
|
*/
|
|
754
756
|
calculateNearestEdge(t, i, e, n) {
|
|
755
757
|
const a = t.x, r = t.y, s = a, c = e.width - a, l = r, u = e.height - r, h = Math.min(s, c, l, u);
|
|
756
|
-
let d = t.x,
|
|
757
|
-
return h === s ? d = -(i.width + n) : h === c ? d = e.width + n : h === l ?
|
|
758
|
+
let d = t.x, f = t.y;
|
|
759
|
+
return h === s ? d = -(i.width + n) : h === c ? d = e.width + n : h === l ? f = -(i.height + n) : f = e.height + n, { x: d, y: f };
|
|
758
760
|
}
|
|
759
761
|
/**
|
|
760
762
|
* Calculate start position from a specific edge
|
|
@@ -804,16 +806,16 @@ class ue {
|
|
|
804
806
|
let c;
|
|
805
807
|
const l = r.radius || "120%";
|
|
806
808
|
if (typeof l == "string" && l.endsWith("%")) {
|
|
807
|
-
const
|
|
809
|
+
const p = parseFloat(l) / 100;
|
|
808
810
|
c = Math.sqrt(
|
|
809
811
|
e.width ** 2 + e.height ** 2
|
|
810
|
-
) *
|
|
812
|
+
) * p / 2;
|
|
811
813
|
} else
|
|
812
814
|
c = typeof l == "number" ? l : 500;
|
|
813
815
|
let u;
|
|
814
816
|
s === "even" ? u = n / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
815
|
-
const h = e.width / 2, d = e.height / 2,
|
|
816
|
-
return { x:
|
|
817
|
+
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) * c, b = d + Math.sin(u) * c;
|
|
818
|
+
return { x: f, y: b };
|
|
817
819
|
}
|
|
818
820
|
/**
|
|
819
821
|
* Get animation parameters for an image
|
|
@@ -833,8 +835,8 @@ class ue {
|
|
|
833
835
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
834
836
|
*/
|
|
835
837
|
buildStartTransform(t, i, e, n, a, r, s, c) {
|
|
836
|
-
const l = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = c !== void 0 ? c : n,
|
|
837
|
-
return t.useScale ? `${
|
|
838
|
+
const l = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = c !== void 0 ? c : n, f = a !== void 0 ? -a / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${f}px, ${b}px)` : "translate(-50%, -50%)";
|
|
839
|
+
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
838
840
|
}
|
|
839
841
|
/**
|
|
840
842
|
* Build the final CSS transform string
|
|
@@ -859,7 +861,7 @@ class ue {
|
|
|
859
861
|
* Check if the current path type requires JavaScript animation
|
|
860
862
|
*/
|
|
861
863
|
requiresJSAnimation() {
|
|
862
|
-
return
|
|
864
|
+
return de(this.pathConfig.type);
|
|
863
865
|
}
|
|
864
866
|
/**
|
|
865
867
|
* Get the path configuration
|
|
@@ -1050,7 +1052,7 @@ class ue {
|
|
|
1050
1052
|
return 1 - (1 - t) * (1 - t);
|
|
1051
1053
|
}
|
|
1052
1054
|
}
|
|
1053
|
-
class
|
|
1055
|
+
class fe {
|
|
1054
1056
|
constructor(t, i = {}) {
|
|
1055
1057
|
this.config = t, this.imageConfig = i;
|
|
1056
1058
|
}
|
|
@@ -1062,17 +1064,17 @@ class ge {
|
|
|
1062
1064
|
* @returns Array of layout objects with position, rotation, scale
|
|
1063
1065
|
*/
|
|
1064
1066
|
generate(t, i, e = {}) {
|
|
1065
|
-
const n = [], { width: a, height: r } = i, s = this.config.spacing.padding, c = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1,
|
|
1066
|
-
for (let
|
|
1067
|
-
const I = this.random(
|
|
1068
|
-
id:
|
|
1067
|
+
const n = [], { width: a, height: r } = i, s = this.config.spacing.padding, c = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || f !== 1, g = c * 1.5 / 2, m = c / 2, y = a - s - g, w = r - s - m, v = s + g, R = s + m;
|
|
1068
|
+
for (let x = 0; x < t; x++) {
|
|
1069
|
+
const I = this.random(v, y), z = this.random(R, w), L = l === "random" ? this.random(u, h) : 0, _ = b ? this.random(d, f) : 1, O = c * _, H = {
|
|
1070
|
+
id: x,
|
|
1069
1071
|
x: I,
|
|
1070
|
-
y:
|
|
1071
|
-
rotation:
|
|
1072
|
+
y: z,
|
|
1073
|
+
rotation: L,
|
|
1072
1074
|
scale: _,
|
|
1073
|
-
baseSize:
|
|
1075
|
+
baseSize: O
|
|
1074
1076
|
};
|
|
1075
|
-
n.push(
|
|
1077
|
+
n.push(H);
|
|
1076
1078
|
}
|
|
1077
1079
|
return n;
|
|
1078
1080
|
}
|
|
@@ -1086,7 +1088,7 @@ class ge {
|
|
|
1086
1088
|
return Math.random() * (i - t) + t;
|
|
1087
1089
|
}
|
|
1088
1090
|
}
|
|
1089
|
-
class
|
|
1091
|
+
class me {
|
|
1090
1092
|
constructor(t, i = {}) {
|
|
1091
1093
|
this.config = t, this.imageConfig = i;
|
|
1092
1094
|
}
|
|
@@ -1098,47 +1100,53 @@ class fe {
|
|
|
1098
1100
|
* @returns Array of layout objects with position, rotation, scale
|
|
1099
1101
|
*/
|
|
1100
1102
|
generate(t, i, e = {}) {
|
|
1101
|
-
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1,
|
|
1103
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = {
|
|
1104
|
+
...Wt,
|
|
1105
|
+
...this.config.radial
|
|
1106
|
+
}, g = e.fixedHeight ?? s, m = a / 2, y = r / 2, w = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, R = Math.max(g * 0.8, Math.min(
|
|
1107
|
+
m - v - g / 2,
|
|
1108
|
+
y - v - g / 2
|
|
1109
|
+
));
|
|
1102
1110
|
if (t > 0) {
|
|
1103
|
-
const
|
|
1111
|
+
const z = f ? this.random(h, d) : 1, L = g * z;
|
|
1104
1112
|
n.push({
|
|
1105
1113
|
id: 0,
|
|
1106
|
-
x:
|
|
1107
|
-
y
|
|
1114
|
+
x: m,
|
|
1115
|
+
y,
|
|
1108
1116
|
rotation: c === "random" ? this.random(l * 0.33, u * 0.33) : 0,
|
|
1109
1117
|
// Less rotation for center
|
|
1110
|
-
scale:
|
|
1111
|
-
baseSize:
|
|
1118
|
+
scale: z,
|
|
1119
|
+
baseSize: L,
|
|
1112
1120
|
zIndex: 100
|
|
1113
1121
|
// Center image is highest
|
|
1114
1122
|
});
|
|
1115
1123
|
}
|
|
1116
|
-
let
|
|
1117
|
-
for (;
|
|
1118
|
-
const
|
|
1119
|
-
if (
|
|
1120
|
-
|
|
1124
|
+
let x = 1, I = 1;
|
|
1125
|
+
for (; x < t; ) {
|
|
1126
|
+
const z = I / w, L = b > 0 ? 1 - z * b * 0.5 : 1, _ = Math.max(g * 0.8, R / w * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), T = this.estimateWidth(g), D = Math.floor(N / (T * 0.7));
|
|
1127
|
+
if (D === 0) {
|
|
1128
|
+
I++;
|
|
1121
1129
|
continue;
|
|
1122
1130
|
}
|
|
1123
|
-
const
|
|
1124
|
-
for (let
|
|
1125
|
-
const
|
|
1126
|
-
let
|
|
1127
|
-
const
|
|
1128
|
-
|
|
1129
|
-
const
|
|
1131
|
+
const G = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
|
|
1132
|
+
for (let M = 0; M < D && x < t; M++) {
|
|
1133
|
+
const C = M * G + U, j = f ? this.random(h, d) : 1, X = L * j, A = g * X;
|
|
1134
|
+
let $ = m + Math.cos(C) * H, F = y + Math.sin(C) * O;
|
|
1135
|
+
const P = A * 1.5 / 2, W = A / 2;
|
|
1136
|
+
$ - P < v ? $ = v + P : $ + P > a - v && ($ = a - v - P), F - W < v ? F = v + W : F + W > r - v && (F = r - v - W);
|
|
1137
|
+
const B = c === "random" ? this.random(l, u) : 0;
|
|
1130
1138
|
n.push({
|
|
1131
|
-
id:
|
|
1132
|
-
x:
|
|
1133
|
-
y:
|
|
1134
|
-
rotation:
|
|
1135
|
-
scale:
|
|
1139
|
+
id: x,
|
|
1140
|
+
x: $,
|
|
1141
|
+
y: F,
|
|
1142
|
+
rotation: B,
|
|
1143
|
+
scale: X,
|
|
1136
1144
|
baseSize: A,
|
|
1137
|
-
zIndex: Math.max(1, 100 -
|
|
1145
|
+
zIndex: Math.max(1, 100 - I)
|
|
1138
1146
|
// Outer rings have lower z-index
|
|
1139
|
-
}),
|
|
1147
|
+
}), x++;
|
|
1140
1148
|
}
|
|
1141
|
-
|
|
1149
|
+
I++;
|
|
1142
1150
|
}
|
|
1143
1151
|
return n;
|
|
1144
1152
|
}
|
|
@@ -1161,7 +1169,7 @@ class fe {
|
|
|
1161
1169
|
return Math.random() * (i - t) + t;
|
|
1162
1170
|
}
|
|
1163
1171
|
}
|
|
1164
|
-
const
|
|
1172
|
+
const pe = {
|
|
1165
1173
|
columns: "auto",
|
|
1166
1174
|
rows: "auto",
|
|
1167
1175
|
stagger: "none",
|
|
@@ -1189,7 +1197,7 @@ const me = {
|
|
|
1189
1197
|
{ x: 0, y: 1 }
|
|
1190
1198
|
// down
|
|
1191
1199
|
];
|
|
1192
|
-
class
|
|
1200
|
+
class be {
|
|
1193
1201
|
constructor(t, i = {}) {
|
|
1194
1202
|
this.config = t, this.imageConfig = i;
|
|
1195
1203
|
}
|
|
@@ -1201,59 +1209,59 @@ class pe {
|
|
|
1201
1209
|
* @returns Array of layout objects with position, rotation, scale
|
|
1202
1210
|
*/
|
|
1203
1211
|
generate(t, i, e = {}) {
|
|
1204
|
-
const n = [], { width: a, height: r } = i, s = { ...
|
|
1212
|
+
const n = [], { width: a, height: r } = i, s = { ...pe, ...this.config.grid }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, b = a - 2 * c, p = r - 2 * c, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1205
1213
|
t,
|
|
1206
1214
|
b,
|
|
1207
|
-
|
|
1215
|
+
p,
|
|
1208
1216
|
l,
|
|
1209
1217
|
s
|
|
1210
|
-
), y = s.stagger === "row",
|
|
1218
|
+
), y = s.stagger === "row", w = s.stagger === "column", v = y ? g + 0.5 : g, R = w ? m + 0.5 : m, x = (b - s.gap * (g - 1)) / v, I = (p - s.gap * (m - 1)) / R, z = y ? x / 2 : 0, L = w ? I / 2 : 0, _ = 1 + s.overlap, O = Math.min(x, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = g * x + (g - 1) * s.gap + z, T = m * I + (m - 1) * s.gap + L, D = c + (b - N) / 2, G = c + (p - T) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", C = M && t > U;
|
|
1211
1219
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1212
1220
|
gridConfigColumns: s.columns,
|
|
1213
1221
|
gridConfigRows: s.rows,
|
|
1214
|
-
columns:
|
|
1215
|
-
rows:
|
|
1216
|
-
cellCount:
|
|
1217
|
-
hasFixedGrid:
|
|
1222
|
+
columns: g,
|
|
1223
|
+
rows: m,
|
|
1224
|
+
cellCount: U,
|
|
1225
|
+
hasFixedGrid: M,
|
|
1218
1226
|
imageCount: t,
|
|
1219
1227
|
isOverflowMode: C
|
|
1220
1228
|
});
|
|
1221
|
-
const
|
|
1222
|
-
for (let
|
|
1223
|
-
let
|
|
1224
|
-
if (C &&
|
|
1225
|
-
const q =
|
|
1226
|
-
|
|
1229
|
+
const j = C ? new Array(U).fill(0) : [], X = Math.min(x, I) * s.overflowOffset;
|
|
1230
|
+
for (let A = 0; A < t; A++) {
|
|
1231
|
+
let $, F, Y = 0;
|
|
1232
|
+
if (C && A >= U) {
|
|
1233
|
+
const q = A - U, k = q % U;
|
|
1234
|
+
Y = Math.floor(q / U) + 1, j[k]++, s.fillDirection === "row" ? ($ = k % g, F = Math.floor(k / g)) : (F = k % m, $ = Math.floor(k / m));
|
|
1227
1235
|
} else
|
|
1228
|
-
s.fillDirection === "row" ? (
|
|
1229
|
-
let
|
|
1230
|
-
if (s.stagger === "row" &&
|
|
1231
|
-
const q = (
|
|
1232
|
-
|
|
1236
|
+
s.fillDirection === "row" ? ($ = A % g, F = Math.floor(A / g)) : (F = A % m, $ = Math.floor(A / m));
|
|
1237
|
+
let P = D + $ * (x + s.gap) + x / 2, W = G + F * (I + s.gap) + I / 2;
|
|
1238
|
+
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (W += I / 2), Y > 0) {
|
|
1239
|
+
const q = (Y - 1) % At.length, k = At[q];
|
|
1240
|
+
P += k.x * X, W += k.y * X;
|
|
1233
1241
|
}
|
|
1234
1242
|
if (s.jitter > 0) {
|
|
1235
|
-
const q =
|
|
1236
|
-
|
|
1243
|
+
const q = x / 2 * s.jitter, k = I / 2 * s.jitter;
|
|
1244
|
+
P += this.random(-q, q), W += this.random(-k, k);
|
|
1237
1245
|
}
|
|
1238
|
-
let B =
|
|
1246
|
+
let B = P, V = W;
|
|
1239
1247
|
if (!C && s.fillDirection === "row") {
|
|
1240
|
-
const q = t %
|
|
1241
|
-
if (
|
|
1242
|
-
const St = q *
|
|
1248
|
+
const q = t % g || g;
|
|
1249
|
+
if (F === Math.floor((t - 1) / g) && q < g) {
|
|
1250
|
+
const St = q * x + (q - 1) * s.gap;
|
|
1243
1251
|
let gt = 0;
|
|
1244
1252
|
s.alignment === "center" ? gt = (N - St) / 2 : s.alignment === "end" && (gt = N - St), B += gt;
|
|
1245
1253
|
}
|
|
1246
1254
|
}
|
|
1247
|
-
const rt =
|
|
1255
|
+
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2, ot = K / 2, lt = c + it, ht = a - c - it, Pt = c + ot, _t = r - c - ot;
|
|
1248
1256
|
B = Math.max(lt, Math.min(B, ht)), V = Math.max(Pt, Math.min(V, _t));
|
|
1249
1257
|
let dt = 0;
|
|
1250
1258
|
if (u === "random") {
|
|
1251
|
-
const q = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1252
|
-
s.jitter > 0 ? dt = this.random(q * s.jitter,
|
|
1259
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, k = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1260
|
+
s.jitter > 0 ? dt = this.random(q * s.jitter, k * s.jitter) : dt = this.random(q, k);
|
|
1253
1261
|
}
|
|
1254
1262
|
let ut;
|
|
1255
|
-
C &&
|
|
1256
|
-
id:
|
|
1263
|
+
C && Y > 0 ? ut = 50 - Y : ut = C ? 100 + A : A + 1, n.push({
|
|
1264
|
+
id: A,
|
|
1257
1265
|
x: B,
|
|
1258
1266
|
y: V,
|
|
1259
1267
|
rotation: dt,
|
|
@@ -1289,14 +1297,14 @@ class pe {
|
|
|
1289
1297
|
return Math.random() * (i - t) + t;
|
|
1290
1298
|
}
|
|
1291
1299
|
}
|
|
1292
|
-
const
|
|
1300
|
+
const ye = Math.PI * (3 - Math.sqrt(5)), ve = {
|
|
1293
1301
|
spiralType: "golden",
|
|
1294
1302
|
direction: "counterclockwise",
|
|
1295
1303
|
tightness: 1,
|
|
1296
1304
|
scaleDecay: 0,
|
|
1297
1305
|
startAngle: 0
|
|
1298
1306
|
};
|
|
1299
|
-
class
|
|
1307
|
+
class we {
|
|
1300
1308
|
constructor(t, i = {}) {
|
|
1301
1309
|
this.config = t, this.imageConfig = i;
|
|
1302
1310
|
}
|
|
@@ -1308,36 +1316,36 @@ class ve {
|
|
|
1308
1316
|
* @returns Array of layout objects with position, rotation, scale
|
|
1309
1317
|
*/
|
|
1310
1318
|
generate(t, i, e = {}) {
|
|
1311
|
-
const n = [], { width: a, height: r } = i, s = { ...
|
|
1312
|
-
|
|
1319
|
+
const n = [], { width: a, height: r } = i, s = { ...ve, ...this.config.spiral }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || b !== 1, g = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, y = r / 2, w = Math.min(
|
|
1320
|
+
m - c - l / 2,
|
|
1313
1321
|
y - c - l / 2
|
|
1314
|
-
),
|
|
1315
|
-
for (let
|
|
1316
|
-
let
|
|
1322
|
+
), v = s.direction === "clockwise" ? -1 : 1;
|
|
1323
|
+
for (let R = 0; R < t; R++) {
|
|
1324
|
+
let x, I;
|
|
1317
1325
|
if (s.spiralType === "golden")
|
|
1318
|
-
|
|
1326
|
+
x = R * ye * v + s.startAngle, I = this.calculateGoldenRadius(R, t, w, s.tightness);
|
|
1319
1327
|
else if (s.spiralType === "archimedean") {
|
|
1320
|
-
const
|
|
1321
|
-
|
|
1328
|
+
const P = R * 0.5 * s.tightness;
|
|
1329
|
+
x = P * v + s.startAngle, I = this.calculateArchimedeanRadius(P, t, w, s.tightness);
|
|
1322
1330
|
} else {
|
|
1323
|
-
const
|
|
1324
|
-
|
|
1331
|
+
const P = R * 0.3 * s.tightness;
|
|
1332
|
+
x = P * v + s.startAngle, I = this.calculateLogarithmicRadius(P, t, w, s.tightness);
|
|
1325
1333
|
}
|
|
1326
|
-
const
|
|
1327
|
-
let
|
|
1334
|
+
const z = m + Math.cos(x) * I, L = y + Math.sin(x) * I, _ = I / w, O = g > 0 ? 1 - _ * g * 0.5 : 1, H = p ? this.random(f, b) : 1, N = O * H, T = l * N, G = T * 1.5 / 2, U = T / 2, M = c + G, C = a - c - G, j = c + U, X = r - c - U, A = Math.max(M, Math.min(z, C)), $ = Math.max(j, Math.min(L, X));
|
|
1335
|
+
let F = 0;
|
|
1328
1336
|
if (u === "random") {
|
|
1329
|
-
const
|
|
1330
|
-
|
|
1331
|
-
} else u === "tangent" && (
|
|
1332
|
-
const
|
|
1337
|
+
const P = x * 180 / Math.PI % 360, W = this.random(h, d);
|
|
1338
|
+
F = s.spiralType === "golden" ? W : P * 0.1 + W * 0.9;
|
|
1339
|
+
} else u === "tangent" && (F = this.calculateSpiralTangent(x, I, s));
|
|
1340
|
+
const Y = t - R;
|
|
1333
1341
|
n.push({
|
|
1334
|
-
id:
|
|
1335
|
-
x:
|
|
1336
|
-
y:
|
|
1337
|
-
rotation:
|
|
1342
|
+
id: R,
|
|
1343
|
+
x: A,
|
|
1344
|
+
y: $,
|
|
1345
|
+
rotation: F,
|
|
1338
1346
|
scale: N,
|
|
1339
1347
|
baseSize: T,
|
|
1340
|
-
zIndex:
|
|
1348
|
+
zIndex: Y
|
|
1341
1349
|
});
|
|
1342
1350
|
}
|
|
1343
1351
|
return n;
|
|
@@ -1390,7 +1398,7 @@ class ve {
|
|
|
1390
1398
|
return Math.random() * (i - t) + t;
|
|
1391
1399
|
}
|
|
1392
1400
|
}
|
|
1393
|
-
const
|
|
1401
|
+
const xe = {
|
|
1394
1402
|
clusterCount: "auto",
|
|
1395
1403
|
clusterSpread: 150,
|
|
1396
1404
|
clusterSpacing: 200,
|
|
@@ -1398,7 +1406,7 @@ const we = {
|
|
|
1398
1406
|
overlap: 0.3,
|
|
1399
1407
|
distribution: "gaussian"
|
|
1400
1408
|
};
|
|
1401
|
-
class
|
|
1409
|
+
class Ee {
|
|
1402
1410
|
constructor(t, i = {}) {
|
|
1403
1411
|
this.config = t, this.imageConfig = i;
|
|
1404
1412
|
}
|
|
@@ -1410,48 +1418,48 @@ class xe {
|
|
|
1410
1418
|
* @returns Array of layout objects with position, rotation, scale
|
|
1411
1419
|
*/
|
|
1412
1420
|
generate(t, i, e = {}) {
|
|
1413
|
-
const n = [], { width: a, height: r } = i, s = { ...
|
|
1421
|
+
const n = [], { width: a, height: r } = i, s = { ...xe, ...this.config.cluster }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1414
1422
|
t,
|
|
1415
1423
|
s.clusterCount,
|
|
1416
1424
|
a,
|
|
1417
1425
|
r,
|
|
1418
1426
|
s.clusterSpacing
|
|
1419
|
-
),
|
|
1420
|
-
|
|
1427
|
+
), m = this.generateClusterCenters(
|
|
1428
|
+
g,
|
|
1421
1429
|
a,
|
|
1422
1430
|
r,
|
|
1423
1431
|
c,
|
|
1424
1432
|
s
|
|
1425
|
-
), y = new Array(
|
|
1426
|
-
for (let
|
|
1427
|
-
y[
|
|
1428
|
-
let
|
|
1429
|
-
for (let
|
|
1430
|
-
const
|
|
1431
|
-
for (let I = 0; I <
|
|
1432
|
-
let
|
|
1433
|
+
), y = new Array(g).fill(0);
|
|
1434
|
+
for (let v = 0; v < t; v++)
|
|
1435
|
+
y[v % g]++;
|
|
1436
|
+
let w = 0;
|
|
1437
|
+
for (let v = 0; v < g; v++) {
|
|
1438
|
+
const R = m[v], x = y[v];
|
|
1439
|
+
for (let I = 0; I < x; I++) {
|
|
1440
|
+
let z, L;
|
|
1433
1441
|
if (s.distribution === "gaussian")
|
|
1434
|
-
|
|
1442
|
+
z = this.gaussianRandom() * R.spread, L = this.gaussianRandom() * R.spread;
|
|
1435
1443
|
else {
|
|
1436
|
-
const
|
|
1437
|
-
|
|
1444
|
+
const F = this.random(0, Math.PI * 2), Y = this.random(0, R.spread);
|
|
1445
|
+
z = Math.cos(F) * Y, L = Math.sin(F) * Y;
|
|
1438
1446
|
}
|
|
1439
|
-
const _ = 1 + s.overlap * 0.5,
|
|
1440
|
-
|
|
1441
|
-
const
|
|
1442
|
-
let
|
|
1443
|
-
const
|
|
1444
|
-
|
|
1445
|
-
const
|
|
1447
|
+
const _ = 1 + s.overlap * 0.5, O = 1 + s.overlap * 0.3;
|
|
1448
|
+
z /= _, L /= _;
|
|
1449
|
+
const H = p ? this.random(f, b) : 1, N = O * H, T = l * N;
|
|
1450
|
+
let D = R.x + z, G = R.y + L;
|
|
1451
|
+
const M = T * 1.5 / 2, C = T / 2;
|
|
1452
|
+
D = Math.max(c + M, Math.min(D, a - c - M)), G = Math.max(c + C, Math.min(G, r - c - C));
|
|
1453
|
+
const j = u === "random" ? this.random(h, d) : 0, A = Math.sqrt(z * z + L * L) / R.spread, $ = Math.round((1 - A) * 50) + 1;
|
|
1446
1454
|
n.push({
|
|
1447
|
-
id:
|
|
1448
|
-
x:
|
|
1449
|
-
y:
|
|
1450
|
-
rotation:
|
|
1455
|
+
id: w,
|
|
1456
|
+
x: D,
|
|
1457
|
+
y: G,
|
|
1458
|
+
rotation: j,
|
|
1451
1459
|
scale: N,
|
|
1452
1460
|
baseSize: T,
|
|
1453
|
-
zIndex:
|
|
1454
|
-
}),
|
|
1461
|
+
zIndex: $
|
|
1462
|
+
}), w++;
|
|
1455
1463
|
}
|
|
1456
1464
|
}
|
|
1457
1465
|
return n;
|
|
@@ -1473,22 +1481,22 @@ class xe {
|
|
|
1473
1481
|
generateClusterCenters(t, i, e, n, a) {
|
|
1474
1482
|
const r = [], c = n + a.clusterSpread, l = i - n - a.clusterSpread, u = n + a.clusterSpread, h = e - n - a.clusterSpread;
|
|
1475
1483
|
for (let d = 0; d < t; d++) {
|
|
1476
|
-
let
|
|
1477
|
-
for (let
|
|
1478
|
-
const
|
|
1484
|
+
let f = null, b = -1;
|
|
1485
|
+
for (let p = 0; p < 100; p++) {
|
|
1486
|
+
const g = {
|
|
1479
1487
|
x: this.random(c, l),
|
|
1480
1488
|
y: this.random(u, h),
|
|
1481
1489
|
spread: this.calculateClusterSpread(a)
|
|
1482
1490
|
};
|
|
1483
|
-
let
|
|
1491
|
+
let m = 1 / 0;
|
|
1484
1492
|
for (const y of r) {
|
|
1485
|
-
const
|
|
1486
|
-
|
|
1493
|
+
const w = g.x - y.x, v = g.y - y.y, R = Math.sqrt(w * w + v * v);
|
|
1494
|
+
m = Math.min(m, R);
|
|
1487
1495
|
}
|
|
1488
|
-
if ((r.length === 0 ||
|
|
1496
|
+
if ((r.length === 0 || m > b) && (f = g, b = m), m >= a.clusterSpacing)
|
|
1489
1497
|
break;
|
|
1490
1498
|
}
|
|
1491
|
-
|
|
1499
|
+
f && r.push(f);
|
|
1492
1500
|
}
|
|
1493
1501
|
return r;
|
|
1494
1502
|
}
|
|
@@ -1516,7 +1524,7 @@ class xe {
|
|
|
1516
1524
|
return Math.random() * (i - t) + t;
|
|
1517
1525
|
}
|
|
1518
1526
|
}
|
|
1519
|
-
class
|
|
1527
|
+
class Se {
|
|
1520
1528
|
constructor(t, i = {}) {
|
|
1521
1529
|
this.config = t, this.imageConfig = i;
|
|
1522
1530
|
}
|
|
@@ -1528,29 +1536,29 @@ class Ee {
|
|
|
1528
1536
|
* @returns Array of layout objects with position, rotation, scale
|
|
1529
1537
|
*/
|
|
1530
1538
|
generate(t, i, e = {}) {
|
|
1531
|
-
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1,
|
|
1532
|
-
...
|
|
1539
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || f !== 1, p = e.fixedHeight ?? s, g = {
|
|
1540
|
+
...kt,
|
|
1533
1541
|
...this.config.wave
|
|
1534
|
-
}, { rows:
|
|
1535
|
-
let
|
|
1536
|
-
for (let C = 0; C <
|
|
1537
|
-
const
|
|
1538
|
-
let
|
|
1539
|
-
|
|
1540
|
-
for (let
|
|
1541
|
-
const
|
|
1542
|
+
}, { rows: m, amplitude: y, frequency: w, phaseShift: v, synchronization: R } = g, x = Math.ceil(t / m), L = p * 1.5 / 2, _ = c + L, O = a - c - L, H = O - _, N = x > 1 ? H / (x - 1) : 0, T = c + y + p / 2, D = r - c - y - p / 2, G = D - T, U = m > 1 ? G / (m - 1) : 0;
|
|
1543
|
+
let M = 0;
|
|
1544
|
+
for (let C = 0; C < m && M < t; C++) {
|
|
1545
|
+
const j = m === 1 ? (T + D) / 2 : T + C * U;
|
|
1546
|
+
let X = 0;
|
|
1547
|
+
R === "offset" ? X = C * v : R === "alternating" && (X = C * Math.PI);
|
|
1548
|
+
for (let A = 0; A < x && M < t; A++) {
|
|
1549
|
+
const $ = x === 1 ? (_ + O) / 2 : _ + A * N, F = this.calculateWaveY($, a, y, w, X), Y = $, P = j + F, W = b ? this.random(d, f) : 1, B = p * W;
|
|
1542
1550
|
let V = 0;
|
|
1543
|
-
l === "tangent" ? V = this.calculateRotation(
|
|
1551
|
+
l === "tangent" ? V = this.calculateRotation($, a, y, w, X) : l === "random" && (V = this.random(u, h));
|
|
1544
1552
|
const K = B * 1.5 / 2, ct = B / 2, it = c + K, ot = a - c - K, lt = c + ct, ht = r - c - ct;
|
|
1545
1553
|
n.push({
|
|
1546
|
-
id:
|
|
1547
|
-
x: Math.max(it, Math.min(
|
|
1548
|
-
y: Math.max(lt, Math.min(
|
|
1554
|
+
id: M,
|
|
1555
|
+
x: Math.max(it, Math.min(Y, ot)),
|
|
1556
|
+
y: Math.max(lt, Math.min(P, ht)),
|
|
1549
1557
|
rotation: V,
|
|
1550
|
-
scale:
|
|
1558
|
+
scale: W,
|
|
1551
1559
|
baseSize: B,
|
|
1552
|
-
zIndex:
|
|
1553
|
-
}),
|
|
1560
|
+
zIndex: M + 1
|
|
1561
|
+
}), M++;
|
|
1554
1562
|
}
|
|
1555
1563
|
}
|
|
1556
1564
|
return n;
|
|
@@ -1606,21 +1614,21 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1606
1614
|
// lower-left
|
|
1607
1615
|
[0, 50]
|
|
1608
1616
|
// left
|
|
1609
|
-
],
|
|
1610
|
-
function
|
|
1617
|
+
], Re = Et[1][0] / xt, Ie = Et[2][1] / xt;
|
|
1618
|
+
function Te(o) {
|
|
1611
1619
|
return {
|
|
1612
|
-
colStep:
|
|
1613
|
-
rowOffset:
|
|
1620
|
+
colStep: Re * o,
|
|
1621
|
+
rowOffset: Ie * o
|
|
1614
1622
|
};
|
|
1615
1623
|
}
|
|
1616
|
-
function
|
|
1617
|
-
const { colStep: r } =
|
|
1624
|
+
function Ce(o, t, i, e, n, a) {
|
|
1625
|
+
const { colStep: r } = Te(a);
|
|
1618
1626
|
return {
|
|
1619
1627
|
px: e + r * o,
|
|
1620
1628
|
py: n + a * (t + o / 2)
|
|
1621
1629
|
};
|
|
1622
1630
|
}
|
|
1623
|
-
const
|
|
1631
|
+
const Ae = [
|
|
1624
1632
|
[1, 0, -1],
|
|
1625
1633
|
[0, 1, -1],
|
|
1626
1634
|
[-1, 1, 0],
|
|
@@ -1628,16 +1636,16 @@ const Ce = [
|
|
|
1628
1636
|
[0, -1, 1],
|
|
1629
1637
|
[1, -1, 0]
|
|
1630
1638
|
];
|
|
1631
|
-
function
|
|
1639
|
+
function Le(o) {
|
|
1632
1640
|
if (o === 0) return [[0, 0, 0]];
|
|
1633
1641
|
const t = [];
|
|
1634
1642
|
let [i, e, n] = [0, -o, o];
|
|
1635
|
-
for (const [a, r, s] of
|
|
1643
|
+
for (const [a, r, s] of Ae)
|
|
1636
1644
|
for (let c = 0; c < o; c++)
|
|
1637
1645
|
t.push([i, e, n]), i += a, e += r, n += s;
|
|
1638
1646
|
return t;
|
|
1639
1647
|
}
|
|
1640
|
-
class
|
|
1648
|
+
class Me {
|
|
1641
1649
|
// imageConfig intentionally not stored — honeycomb forces uniform sizing (rotation/variance
|
|
1642
1650
|
// would break hex tiling). Kept as parameter for interface compatibility.
|
|
1643
1651
|
constructor(t, i = {}) {
|
|
@@ -1645,32 +1653,32 @@ class Le {
|
|
|
1645
1653
|
}
|
|
1646
1654
|
generate(t, i, e = {}) {
|
|
1647
1655
|
const n = [], { width: a, height: r } = i, s = a / 2, c = r / 2, l = e.fixedHeight ?? 200, h = {
|
|
1648
|
-
...
|
|
1656
|
+
...Gt,
|
|
1649
1657
|
...this.config.honeycomb
|
|
1650
1658
|
}.spacing ?? 0, d = l + h;
|
|
1651
|
-
let
|
|
1652
|
-
for (;
|
|
1653
|
-
const
|
|
1654
|
-
for (const [
|
|
1655
|
-
if (
|
|
1656
|
-
const { px:
|
|
1659
|
+
let f = 0, b = 0;
|
|
1660
|
+
for (; f < t; ) {
|
|
1661
|
+
const p = Le(b);
|
|
1662
|
+
for (const [g, m, y] of p) {
|
|
1663
|
+
if (f >= t) break;
|
|
1664
|
+
const { px: w, py: v } = Ce(g, m, y, s, c, d);
|
|
1657
1665
|
n.push({
|
|
1658
|
-
id:
|
|
1659
|
-
x:
|
|
1660
|
-
y:
|
|
1666
|
+
id: f,
|
|
1667
|
+
x: w,
|
|
1668
|
+
y: v,
|
|
1661
1669
|
rotation: 0,
|
|
1662
1670
|
scale: 1,
|
|
1663
1671
|
baseSize: l,
|
|
1664
1672
|
// Inner rings render above outer rings
|
|
1665
1673
|
zIndex: Math.max(1, 100 - b)
|
|
1666
|
-
}),
|
|
1674
|
+
}), f++;
|
|
1667
1675
|
}
|
|
1668
1676
|
b++;
|
|
1669
1677
|
}
|
|
1670
1678
|
return n;
|
|
1671
1679
|
}
|
|
1672
1680
|
}
|
|
1673
|
-
class
|
|
1681
|
+
class Fe {
|
|
1674
1682
|
constructor(t) {
|
|
1675
1683
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.placementLayout = this.initLayout();
|
|
1676
1684
|
}
|
|
@@ -1681,19 +1689,19 @@ class Me {
|
|
|
1681
1689
|
initLayout() {
|
|
1682
1690
|
switch (this.config.algorithm) {
|
|
1683
1691
|
case "radial":
|
|
1684
|
-
return new
|
|
1692
|
+
return new me(this.config, this.imageConfig);
|
|
1685
1693
|
case "grid":
|
|
1686
|
-
return new
|
|
1694
|
+
return new be(this.config, this.imageConfig);
|
|
1687
1695
|
case "spiral":
|
|
1688
|
-
return new
|
|
1696
|
+
return new we(this.config, this.imageConfig);
|
|
1689
1697
|
case "cluster":
|
|
1690
|
-
return new xe(this.config, this.imageConfig);
|
|
1691
|
-
case "wave":
|
|
1692
1698
|
return new Ee(this.config, this.imageConfig);
|
|
1699
|
+
case "wave":
|
|
1700
|
+
return new Se(this.config, this.imageConfig);
|
|
1693
1701
|
case "honeycomb":
|
|
1694
|
-
return new
|
|
1702
|
+
return new Me(this.config, this.imageConfig);
|
|
1695
1703
|
default:
|
|
1696
|
-
return new
|
|
1704
|
+
return new fe(this.config, this.imageConfig);
|
|
1697
1705
|
}
|
|
1698
1706
|
}
|
|
1699
1707
|
/**
|
|
@@ -1775,13 +1783,13 @@ class Me {
|
|
|
1775
1783
|
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1776
1784
|
if (r !== void 0)
|
|
1777
1785
|
return { height: r };
|
|
1778
|
-
const s = a?.minSize ?? 50, c = a?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t,
|
|
1779
|
-
let
|
|
1780
|
-
|
|
1781
|
-
let y = this.clamp(
|
|
1782
|
-
if (y === s &&
|
|
1783
|
-
const
|
|
1784
|
-
y = Math.max(
|
|
1786
|
+
const s = a?.minSize ?? 50, c = a?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * l / i;
|
|
1787
|
+
let m = Math.sqrt(p / 1.4);
|
|
1788
|
+
m *= u, m = Math.min(m, e);
|
|
1789
|
+
let y = this.clamp(m, s, c);
|
|
1790
|
+
if (y === s && m < s) {
|
|
1791
|
+
const w = Math.max(s * 0.05, 20);
|
|
1792
|
+
y = Math.max(w, m);
|
|
1785
1793
|
}
|
|
1786
1794
|
return this.config.algorithm === "honeycomb" && (y = Math.min(y, this.honeycombMaxImageHeight(i, t))), { height: y };
|
|
1787
1795
|
}
|
|
@@ -1805,7 +1813,7 @@ class Me {
|
|
|
1805
1813
|
return Math.max(i, Math.min(e, t));
|
|
1806
1814
|
}
|
|
1807
1815
|
}
|
|
1808
|
-
var
|
|
1816
|
+
var S = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(S || {});
|
|
1809
1817
|
const Lt = {
|
|
1810
1818
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1811
1819
|
circle: "circle(50%)",
|
|
@@ -1815,7 +1823,7 @@ const Lt = {
|
|
|
1815
1823
|
hexagon: "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
|
|
1816
1824
|
octagon: "polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)",
|
|
1817
1825
|
diamond: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
|
|
1818
|
-
},
|
|
1826
|
+
}, ze = {
|
|
1819
1827
|
// Circle - uses radius in pixels (refHeight of 100px = 50px radius)
|
|
1820
1828
|
circle: {
|
|
1821
1829
|
refHeight: 100,
|
|
@@ -1853,29 +1861,29 @@ const Lt = {
|
|
|
1853
1861
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
1854
1862
|
}
|
|
1855
1863
|
};
|
|
1856
|
-
function
|
|
1864
|
+
function Oe(o) {
|
|
1857
1865
|
if (o)
|
|
1858
1866
|
return o in Lt ? Lt[o] : o;
|
|
1859
1867
|
}
|
|
1860
|
-
function
|
|
1861
|
-
const e =
|
|
1868
|
+
function De(o, t, i) {
|
|
1869
|
+
const e = ze[o];
|
|
1862
1870
|
if (!e) return "";
|
|
1863
1871
|
const n = t / e.refHeight;
|
|
1864
1872
|
if (o === "circle")
|
|
1865
1873
|
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
1866
|
-
const a = e.points.map(([
|
|
1867
|
-
return `polygon(${e.points.map(([
|
|
1868
|
-
const
|
|
1869
|
-
return `${
|
|
1874
|
+
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 * n, c = (Math.min(...r) + Math.max(...r)) / 2 * n, l = (Math.max(...a) - Math.min(...a)) * n, u = (i ?? l) / 2, h = t / 2, d = u - s, f = h - c;
|
|
1875
|
+
return `polygon(${e.points.map(([p, g]) => {
|
|
1876
|
+
const m = Math.round((p * n + d) * 100) / 100, y = Math.round((g * n + f) * 100) / 100;
|
|
1877
|
+
return `${m}px ${y}px`;
|
|
1870
1878
|
}).join(", ")})`;
|
|
1871
1879
|
}
|
|
1872
|
-
function De(o) {
|
|
1873
|
-
return o in mt;
|
|
1874
|
-
}
|
|
1875
1880
|
function $e(o) {
|
|
1876
|
-
return o
|
|
1881
|
+
return o in mt;
|
|
1877
1882
|
}
|
|
1878
1883
|
function Pe(o) {
|
|
1884
|
+
return o ? $e(o) ? mt[o] : o : mt.md;
|
|
1885
|
+
}
|
|
1886
|
+
function _e(o) {
|
|
1879
1887
|
if (!o) return "";
|
|
1880
1888
|
const t = [];
|
|
1881
1889
|
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)
|
|
@@ -1904,8 +1912,8 @@ function et(o, t, i) {
|
|
|
1904
1912
|
const s = o.border || {}, c = { ...s, ...o.borderTop }, l = { ...s, ...o.borderRight }, u = { ...s, ...o.borderBottom }, h = { ...s, ...o.borderLeft };
|
|
1905
1913
|
e.borderTop = tt(c), e.borderRight = tt(l), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
1906
1914
|
} else o.border && (e.border = tt(o.border));
|
|
1907
|
-
o.shadow !== void 0 && (e.boxShadow =
|
|
1908
|
-
const r =
|
|
1915
|
+
o.shadow !== void 0 && (e.boxShadow = Pe(o.shadow));
|
|
1916
|
+
const r = _e(o.filter);
|
|
1909
1917
|
if (e.filter = r || "none", o.opacity !== void 0 && (e.opacity = String(o.opacity)), o.cursor !== void 0 && (e.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1910
1918
|
const s = o.outline.width ?? 0, c = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
1911
1919
|
e.outline = `${s}px ${c} ${l}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
@@ -1914,21 +1922,21 @@ function et(o, t, i) {
|
|
|
1914
1922
|
let s;
|
|
1915
1923
|
const c = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, l = c ? o.clipPath : void 0;
|
|
1916
1924
|
if (l?.mode === "height-relative" && t)
|
|
1917
|
-
s =
|
|
1925
|
+
s = De(l.shape, t, i);
|
|
1918
1926
|
else {
|
|
1919
1927
|
const u = c && l ? l.shape : o.clipPath;
|
|
1920
|
-
s =
|
|
1928
|
+
s = Oe(u);
|
|
1921
1929
|
}
|
|
1922
1930
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
1923
1931
|
}
|
|
1924
1932
|
return e;
|
|
1925
1933
|
}
|
|
1926
|
-
function
|
|
1934
|
+
function Ue(o, t) {
|
|
1927
1935
|
t.borderRadius !== void 0 && (o.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (o.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (o.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (o.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (o.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (o.style.border = t.border), t.borderTop !== void 0 && (o.style.borderTop = t.borderTop), t.borderRight !== void 0 && (o.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (o.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (o.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (o.style.boxShadow = t.boxShadow), t.filter !== void 0 && (o.style.filter = t.filter), t.opacity !== void 0 && (o.style.opacity = t.opacity), t.cursor !== void 0 && (o.style.cursor = t.cursor), t.outline !== void 0 && (o.style.outline = t.outline), t.outlineOffset !== void 0 && (o.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (o.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (o.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (o.style.clipPath = t.clipPath), t.overflow !== void 0 && (o.style.overflow = t.overflow);
|
|
1928
1936
|
}
|
|
1929
1937
|
function ft(o, t, i, e) {
|
|
1930
1938
|
const n = et(t, i, e);
|
|
1931
|
-
|
|
1939
|
+
Ue(o, n);
|
|
1932
1940
|
}
|
|
1933
1941
|
function $t(o) {
|
|
1934
1942
|
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
@@ -1949,9 +1957,9 @@ const Mt = {
|
|
|
1949
1957
|
UNFOCUSING: 999,
|
|
1950
1958
|
FOCUSING: 1e3
|
|
1951
1959
|
};
|
|
1952
|
-
class
|
|
1960
|
+
class He {
|
|
1953
1961
|
constructor(t, i, e) {
|
|
1954
|
-
this.state =
|
|
1962
|
+
this.state = S.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
1955
1963
|
}
|
|
1956
1964
|
/**
|
|
1957
1965
|
* Get current state machine state
|
|
@@ -1963,7 +1971,7 @@ class Ue {
|
|
|
1963
1971
|
* Check if any animation is in progress
|
|
1964
1972
|
*/
|
|
1965
1973
|
isAnimating() {
|
|
1966
|
-
return this.state !==
|
|
1974
|
+
return this.state !== S.IDLE && this.state !== S.FOCUSED;
|
|
1967
1975
|
}
|
|
1968
1976
|
/**
|
|
1969
1977
|
* Normalize scalePercent value
|
|
@@ -2082,19 +2090,19 @@ class Ue {
|
|
|
2082
2090
|
rotation: e.rotation,
|
|
2083
2091
|
scale: 1
|
|
2084
2092
|
// No scale - using dimensions
|
|
2085
|
-
},
|
|
2093
|
+
}, f = a?.width ?? s, b = a?.height ?? c, p = this.animateWithDimensions(
|
|
2086
2094
|
t,
|
|
2087
2095
|
d,
|
|
2088
2096
|
u,
|
|
2089
|
-
|
|
2097
|
+
f,
|
|
2090
2098
|
b,
|
|
2091
2099
|
l.width,
|
|
2092
2100
|
l.height,
|
|
2093
2101
|
h
|
|
2094
|
-
),
|
|
2102
|
+
), g = {
|
|
2095
2103
|
id: `focus-${Date.now()}`,
|
|
2096
2104
|
element: t,
|
|
2097
|
-
animation:
|
|
2105
|
+
animation: p,
|
|
2098
2106
|
fromState: d,
|
|
2099
2107
|
toState: u,
|
|
2100
2108
|
startTime: performance.now(),
|
|
@@ -2109,10 +2117,10 @@ class Ue {
|
|
|
2109
2117
|
originalHeight: c,
|
|
2110
2118
|
focusWidth: l.width,
|
|
2111
2119
|
focusHeight: l.height
|
|
2112
|
-
}, this.startClipPathAnimation(t,
|
|
2120
|
+
}, this.startClipPathAnimation(t, g, !0), {
|
|
2113
2121
|
element: t,
|
|
2114
2122
|
originalState: e,
|
|
2115
|
-
animationHandle:
|
|
2123
|
+
animationHandle: g,
|
|
2116
2124
|
direction: "in",
|
|
2117
2125
|
originalWidth: s,
|
|
2118
2126
|
originalHeight: c
|
|
@@ -2142,7 +2150,7 @@ class Ue {
|
|
|
2142
2150
|
u,
|
|
2143
2151
|
h,
|
|
2144
2152
|
a
|
|
2145
|
-
),
|
|
2153
|
+
), f = {
|
|
2146
2154
|
id: `unfocus-${Date.now()}`,
|
|
2147
2155
|
element: t,
|
|
2148
2156
|
animation: d,
|
|
@@ -2151,10 +2159,10 @@ class Ue {
|
|
|
2151
2159
|
startTime: performance.now(),
|
|
2152
2160
|
duration: a
|
|
2153
2161
|
};
|
|
2154
|
-
return this.startClipPathAnimation(t,
|
|
2162
|
+
return this.startClipPathAnimation(t, f, !1), {
|
|
2155
2163
|
element: t,
|
|
2156
2164
|
originalState: i,
|
|
2157
|
-
animationHandle:
|
|
2165
|
+
animationHandle: f,
|
|
2158
2166
|
direction: "out",
|
|
2159
2167
|
originalWidth: u,
|
|
2160
2168
|
originalHeight: h
|
|
@@ -2203,26 +2211,26 @@ class Ue {
|
|
|
2203
2211
|
* Implements cross-animation when swapping focus
|
|
2204
2212
|
*/
|
|
2205
2213
|
async focusImage(t, i, e) {
|
|
2206
|
-
if (this.currentFocus === t && this.state ===
|
|
2214
|
+
if (this.currentFocus === t && this.state === S.FOCUSED)
|
|
2207
2215
|
return this.unfocusImage();
|
|
2208
|
-
if (this.incoming?.element === t && this.state ===
|
|
2216
|
+
if (this.incoming?.element === t && this.state === S.FOCUSING) {
|
|
2209
2217
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2210
2218
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2211
2219
|
t,
|
|
2212
2220
|
this.incoming.originalState,
|
|
2213
2221
|
a,
|
|
2214
2222
|
r
|
|
2215
|
-
), this.incoming = null, this.state =
|
|
2223
|
+
), this.incoming = null, this.state = S.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = S.IDLE;
|
|
2216
2224
|
return;
|
|
2217
2225
|
}
|
|
2218
2226
|
const n = ++this.focusGeneration;
|
|
2219
2227
|
switch (this.state) {
|
|
2220
|
-
case
|
|
2221
|
-
if (this.state =
|
|
2222
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2228
|
+
case S.IDLE:
|
|
2229
|
+
if (this.state = S.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2230
|
+
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2223
2231
|
break;
|
|
2224
|
-
case
|
|
2225
|
-
if (this.state =
|
|
2232
|
+
case S.FOCUSED:
|
|
2233
|
+
if (this.state = S.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2226
2234
|
this.currentFocus,
|
|
2227
2235
|
this.focusData.originalState
|
|
2228
2236
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
@@ -2230,9 +2238,9 @@ class Ue {
|
|
|
2230
2238
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2231
2239
|
]), this.focusGeneration !== n)
|
|
2232
2240
|
return;
|
|
2233
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2241
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2234
2242
|
break;
|
|
2235
|
-
case
|
|
2243
|
+
case S.FOCUSING:
|
|
2236
2244
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2237
2245
|
this.incoming.element,
|
|
2238
2246
|
this.incoming.originalState,
|
|
@@ -2240,16 +2248,16 @@ class Ue {
|
|
|
2240
2248
|
this.focusData?.originalWidth,
|
|
2241
2249
|
this.focusData?.originalHeight
|
|
2242
2250
|
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2243
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2251
|
+
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2244
2252
|
break;
|
|
2245
|
-
case
|
|
2246
|
-
if (this.state =
|
|
2253
|
+
case S.UNFOCUSING:
|
|
2254
|
+
if (this.state = S.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2247
2255
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2248
2256
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2249
2257
|
]), this.focusGeneration !== n) return;
|
|
2250
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2258
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2251
2259
|
break;
|
|
2252
|
-
case
|
|
2260
|
+
case S.CROSS_ANIMATING:
|
|
2253
2261
|
if (this.incoming?.element === t)
|
|
2254
2262
|
return;
|
|
2255
2263
|
if (this.outgoing?.element === t) {
|
|
@@ -2268,7 +2276,7 @@ class Ue {
|
|
|
2268
2276
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2269
2277
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2270
2278
|
]), this.focusGeneration !== n) return;
|
|
2271
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2279
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2272
2280
|
return;
|
|
2273
2281
|
}
|
|
2274
2282
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2290,7 +2298,7 @@ class Ue {
|
|
|
2290
2298
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2291
2299
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2292
2300
|
]), this.focusGeneration !== n) return;
|
|
2293
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2301
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2294
2302
|
break;
|
|
2295
2303
|
}
|
|
2296
2304
|
}
|
|
@@ -2298,23 +2306,23 @@ class Ue {
|
|
|
2298
2306
|
* Unfocus current image, returning it to original position
|
|
2299
2307
|
*/
|
|
2300
2308
|
async unfocusImage() {
|
|
2301
|
-
if (this.state ===
|
|
2309
|
+
if (this.state === S.UNFOCUSING)
|
|
2302
2310
|
return;
|
|
2303
2311
|
const t = ++this.focusGeneration;
|
|
2304
2312
|
if (!this.currentFocus || !this.focusData) {
|
|
2305
|
-
if (this.incoming && this.state ===
|
|
2313
|
+
if (this.incoming && this.state === S.FOCUSING) {
|
|
2306
2314
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2307
2315
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2308
2316
|
this.incoming.element,
|
|
2309
2317
|
this.incoming.originalState,
|
|
2310
2318
|
a,
|
|
2311
2319
|
r
|
|
2312
|
-
), this.incoming = null, this.state =
|
|
2313
|
-
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2320
|
+
), this.incoming = null, this.state = S.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2321
|
+
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = S.IDLE;
|
|
2314
2322
|
}
|
|
2315
2323
|
return;
|
|
2316
2324
|
}
|
|
2317
|
-
if (this.state ===
|
|
2325
|
+
if (this.state === S.CROSS_ANIMATING && this.incoming) {
|
|
2318
2326
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2319
2327
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2320
2328
|
const s = this.startUnfocusAnimation(
|
|
@@ -2327,12 +2335,12 @@ class Ue {
|
|
|
2327
2335
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2328
2336
|
this.waitForAnimation(s.animationHandle)
|
|
2329
2337
|
]), this.focusGeneration !== t) return;
|
|
2330
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(s.element, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state =
|
|
2338
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(s.element, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = S.IDLE;
|
|
2331
2339
|
return;
|
|
2332
2340
|
}
|
|
2333
|
-
this.state =
|
|
2341
|
+
this.state = S.UNFOCUSING;
|
|
2334
2342
|
const i = this.currentFocus, e = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2335
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state =
|
|
2343
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = S.IDLE);
|
|
2336
2344
|
}
|
|
2337
2345
|
/**
|
|
2338
2346
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2350,7 +2358,7 @@ class Ue {
|
|
|
2350
2358
|
* Check if an image is currently focused (stable state)
|
|
2351
2359
|
*/
|
|
2352
2360
|
isFocused(t) {
|
|
2353
|
-
return this.currentFocus === t && this.state ===
|
|
2361
|
+
return this.currentFocus === t && this.state === S.FOCUSED;
|
|
2354
2362
|
}
|
|
2355
2363
|
/**
|
|
2356
2364
|
* Check if an image is the target of current focus animation
|
|
@@ -2371,7 +2379,7 @@ class Ue {
|
|
|
2371
2379
|
* Used during swipe gestures for visual feedback
|
|
2372
2380
|
*/
|
|
2373
2381
|
setDragOffset(t) {
|
|
2374
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2382
|
+
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2375
2383
|
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2376
2384
|
n.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2377
2385
|
}
|
|
@@ -2381,7 +2389,7 @@ class Ue {
|
|
|
2381
2389
|
* @param duration - Animation duration in ms (default 150)
|
|
2382
2390
|
*/
|
|
2383
2391
|
clearDragOffset(t, i = 150) {
|
|
2384
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2392
|
+
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2385
2393
|
const e = this.currentFocus, n = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = n.x ?? 0, s = n.y ?? 0;
|
|
2386
2394
|
a.push(`translate(${r}px, ${s}px)`), n.rotation !== void 0 && a.push(`rotate(${n.rotation}deg)`);
|
|
2387
2395
|
const c = a.join(" ");
|
|
@@ -2411,10 +2419,10 @@ class Ue {
|
|
|
2411
2419
|
this.focusData.originalZIndex,
|
|
2412
2420
|
this.focusData.originalWidth,
|
|
2413
2421
|
this.focusData.originalHeight
|
|
2414
|
-
), this.state =
|
|
2422
|
+
), this.state = S.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2415
2423
|
}
|
|
2416
2424
|
}
|
|
2417
|
-
const
|
|
2425
|
+
const Ne = 50, je = 0.5, We = 20, ke = 0.3, Ge = 150, qe = 30, at = class at {
|
|
2418
2426
|
constructor(t, i) {
|
|
2419
2427
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = i, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2420
2428
|
}
|
|
@@ -2461,11 +2469,11 @@ const He = 50, Ne = 0.5, je = 20, We = 0.3, ke = 150, Ge = 30, at = class at {
|
|
|
2461
2469
|
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2462
2470
|
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2463
2471
|
const s = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2464
|
-
this.touchState.isHorizontalSwipe = s <=
|
|
2472
|
+
this.touchState.isHorizontalSwipe = s <= qe;
|
|
2465
2473
|
}
|
|
2466
2474
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2467
2475
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = i.clientX;
|
|
2468
|
-
const a = e *
|
|
2476
|
+
const a = e * ke;
|
|
2469
2477
|
this.callbacks.onDragOffset(a);
|
|
2470
2478
|
}
|
|
2471
2479
|
}
|
|
@@ -2474,7 +2482,7 @@ const He = 50, Ne = 0.5, je = 20, We = 0.3, ke = 150, Ge = 30, at = class at {
|
|
|
2474
2482
|
this.recentTouchTimestamp = Date.now();
|
|
2475
2483
|
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, a = Math.abs(i);
|
|
2476
2484
|
let r = !1;
|
|
2477
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >=
|
|
2485
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Ne || n >= je && a >= We) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2478
2486
|
}
|
|
2479
2487
|
handleTouchCancel(t) {
|
|
2480
2488
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
@@ -2482,7 +2490,7 @@ const He = 50, Ne = 0.5, je = 20, We = 0.3, ke = 150, Ge = 30, at = class at {
|
|
|
2482
2490
|
};
|
|
2483
2491
|
at.TOUCH_CLICK_DELAY = 300;
|
|
2484
2492
|
let bt = at;
|
|
2485
|
-
class
|
|
2493
|
+
class Xe {
|
|
2486
2494
|
constructor(t) {
|
|
2487
2495
|
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)
|
|
2488
2496
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2703,7 +2711,7 @@ class qe {
|
|
|
2703
2711
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2704
2712
|
}
|
|
2705
2713
|
}
|
|
2706
|
-
class
|
|
2714
|
+
class Ye {
|
|
2707
2715
|
constructor(t) {
|
|
2708
2716
|
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, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2709
2717
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -2883,7 +2891,7 @@ class Xe {
|
|
|
2883
2891
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2884
2892
|
}
|
|
2885
2893
|
}
|
|
2886
|
-
class
|
|
2894
|
+
class Be {
|
|
2887
2895
|
constructor(t) {
|
|
2888
2896
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2889
2897
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -2940,7 +2948,7 @@ class Ye {
|
|
|
2940
2948
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2941
2949
|
}
|
|
2942
2950
|
}
|
|
2943
|
-
class
|
|
2951
|
+
class Ve {
|
|
2944
2952
|
/**
|
|
2945
2953
|
* Create a new ImageFilter
|
|
2946
2954
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2977,7 +2985,7 @@ class Be {
|
|
|
2977
2985
|
// isAllowedDate(date: Date): boolean
|
|
2978
2986
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2979
2987
|
}
|
|
2980
|
-
const
|
|
2988
|
+
const Je = `
|
|
2981
2989
|
.fbn-ic-gallery {
|
|
2982
2990
|
position: relative;
|
|
2983
2991
|
width: 100%;
|
|
@@ -3027,21 +3035,21 @@ const Ve = `
|
|
|
3027
3035
|
display: none !important;
|
|
3028
3036
|
}
|
|
3029
3037
|
`;
|
|
3030
|
-
function
|
|
3038
|
+
function Ke() {
|
|
3031
3039
|
if (typeof document > "u") return;
|
|
3032
3040
|
const o = "fbn-ic-functional-styles";
|
|
3033
3041
|
if (document.getElementById(o)) return;
|
|
3034
3042
|
const t = document.createElement("style");
|
|
3035
|
-
t.id = o, t.textContent =
|
|
3043
|
+
t.id = o, t.textContent = Je, document.head.appendChild(t);
|
|
3036
3044
|
}
|
|
3037
|
-
let
|
|
3045
|
+
let Ze = class {
|
|
3038
3046
|
constructor(t = {}) {
|
|
3039
|
-
this.fullConfig =
|
|
3047
|
+
this.fullConfig = Zt(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.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.animationEngine = new ie(this.fullConfig.animation), this.layoutEngine = new Fe({
|
|
3040
3048
|
layout: this.fullConfig.layout,
|
|
3041
3049
|
image: this.fullConfig.image
|
|
3042
|
-
}), this.zoomEngine = new
|
|
3043
|
-
const i = this.fullConfig.animation.entry ||
|
|
3044
|
-
this.entryAnimationEngine = new
|
|
3050
|
+
}), this.zoomEngine = new He(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = et(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3051
|
+
const i = this.fullConfig.animation.entry || E.animation.entry;
|
|
3052
|
+
this.entryAnimationEngine = new ge(
|
|
3045
3053
|
i,
|
|
3046
3054
|
this.fullConfig.layout.algorithm
|
|
3047
3055
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
@@ -3051,7 +3059,7 @@ let Ke = class {
|
|
|
3051
3059
|
*/
|
|
3052
3060
|
createImageFilter() {
|
|
3053
3061
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
3054
|
-
return new
|
|
3062
|
+
return new Ve(t);
|
|
3055
3063
|
}
|
|
3056
3064
|
/**
|
|
3057
3065
|
* Create appropriate image loader based on config
|
|
@@ -3062,7 +3070,7 @@ let Ke = class {
|
|
|
3062
3070
|
if (!t || t.length === 0)
|
|
3063
3071
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3064
3072
|
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
3065
|
-
return e.length === 1 ? e[0] : new
|
|
3073
|
+
return e.length === 1 ? e[0] : new Be({
|
|
3066
3074
|
loaders: e,
|
|
3067
3075
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
3068
3076
|
});
|
|
@@ -3080,14 +3088,14 @@ let Ke = class {
|
|
|
3080
3088
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3081
3089
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3082
3090
|
};
|
|
3083
|
-
return new
|
|
3091
|
+
return new Ye(n);
|
|
3084
3092
|
} else if ("googleDrive" in t) {
|
|
3085
3093
|
const e = t.googleDrive, n = {
|
|
3086
3094
|
...e,
|
|
3087
3095
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3088
3096
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3089
3097
|
};
|
|
3090
|
-
return new
|
|
3098
|
+
return new Xe(n);
|
|
3091
3099
|
} else
|
|
3092
3100
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3093
3101
|
}
|
|
@@ -3096,7 +3104,7 @@ let Ke = class {
|
|
|
3096
3104
|
*/
|
|
3097
3105
|
async init() {
|
|
3098
3106
|
try {
|
|
3099
|
-
if (
|
|
3107
|
+
if (Ke(), this.containerRef)
|
|
3100
3108
|
this.containerEl = this.containerRef;
|
|
3101
3109
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3102
3110
|
throw new Error(`Container #${this.containerId} not found`);
|
|
@@ -3105,7 +3113,7 @@ let Ke = class {
|
|
|
3105
3113
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3106
3114
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3107
3115
|
onDragEnd: (t) => {
|
|
3108
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
3116
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ge);
|
|
3109
3117
|
}
|
|
3110
3118
|
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3111
3119
|
} catch (t) {
|
|
@@ -3232,24 +3240,24 @@ let Ke = class {
|
|
|
3232
3240
|
const d = {
|
|
3233
3241
|
x: parseFloat(l.dataset.startX),
|
|
3234
3242
|
y: parseFloat(l.dataset.startY)
|
|
3235
|
-
},
|
|
3243
|
+
}, f = {
|
|
3236
3244
|
x: parseFloat(l.dataset.endX),
|
|
3237
3245
|
y: parseFloat(l.dataset.endY)
|
|
3238
|
-
}, b = parseFloat(l.dataset.imageWidth),
|
|
3239
|
-
|
|
3246
|
+
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), m = parseFloat(l.dataset.scale), y = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : g, w = l.dataset.startScale ? parseFloat(l.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3247
|
+
he({
|
|
3240
3248
|
element: l,
|
|
3241
3249
|
startPosition: d,
|
|
3242
|
-
endPosition:
|
|
3250
|
+
endPosition: f,
|
|
3243
3251
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3244
|
-
duration:
|
|
3252
|
+
duration: v.duration,
|
|
3245
3253
|
imageWidth: b,
|
|
3246
|
-
imageHeight:
|
|
3247
|
-
rotation:
|
|
3248
|
-
scale:
|
|
3254
|
+
imageHeight: p,
|
|
3255
|
+
rotation: g,
|
|
3256
|
+
scale: m,
|
|
3249
3257
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3250
3258
|
startRotation: y,
|
|
3251
3259
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3252
|
-
startScale:
|
|
3260
|
+
startScale: w
|
|
3253
3261
|
});
|
|
3254
3262
|
} else {
|
|
3255
3263
|
const d = l.dataset.finalTransform || "";
|
|
@@ -3302,59 +3310,59 @@ let Ke = class {
|
|
|
3302
3310
|
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), a.forEach((l, u) => {
|
|
3303
3311
|
const h = document.createElement("div");
|
|
3304
3312
|
h.className = "fbn-ic-debug-center", h.style.position = "absolute", h.style.width = "12px", h.style.height = "12px", h.style.borderRadius = "50%", h.style.backgroundColor = "red", h.style.border = "2px solid yellow", h.style.zIndex = "9999", h.style.pointerEvents = "none";
|
|
3305
|
-
const d = l.x,
|
|
3306
|
-
h.style.left = `${d - 6}px`, h.style.top = `${
|
|
3313
|
+
const d = l.x, f = l.y;
|
|
3314
|
+
h.style.left = `${d - 6}px`, h.style.top = `${f - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(h);
|
|
3307
3315
|
})), t.forEach((l, u) => {
|
|
3308
3316
|
const h = document.createElement("img");
|
|
3309
3317
|
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3310
3318
|
const d = a[u];
|
|
3311
3319
|
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), st(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3312
3320
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|
|
3313
|
-
const
|
|
3314
|
-
ft(h, this.fullConfig.styling?.hover, i,
|
|
3321
|
+
const f = h.cachedRenderedWidth;
|
|
3322
|
+
ft(h, this.fullConfig.styling?.hover, i, f), st(h, this.hoverClassName);
|
|
3315
3323
|
}
|
|
3316
3324
|
}), h.addEventListener("mouseleave", () => {
|
|
3317
3325
|
if (this.hoveredImage = null, !this.zoomEngine.isInvolved(h)) {
|
|
3318
|
-
const
|
|
3319
|
-
ft(h, this.fullConfig.styling?.default, i,
|
|
3326
|
+
const f = h.cachedRenderedWidth;
|
|
3327
|
+
ft(h, this.fullConfig.styling?.default, i, f), pt(h, this.hoverClassName), st(h, this.defaultClassName);
|
|
3320
3328
|
}
|
|
3321
|
-
}), h.addEventListener("click", (
|
|
3322
|
-
|
|
3329
|
+
}), h.addEventListener("click", (f) => {
|
|
3330
|
+
f.stopPropagation(), this.handleImageClick(h, d);
|
|
3323
3331
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3324
3332
|
if (n !== this.loadGeneration)
|
|
3325
3333
|
return;
|
|
3326
|
-
const
|
|
3327
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${b}`), h.style.width = `${b}px`, h.cachedRenderedWidth = b, h.aspectRatio =
|
|
3328
|
-
const
|
|
3329
|
-
|
|
3330
|
-
|
|
3334
|
+
const f = h.naturalWidth / h.naturalHeight, b = i * f;
|
|
3335
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${b}`), h.style.width = `${b}px`, h.cachedRenderedWidth = b, h.aspectRatio = f, ft(h, this.fullConfig.styling?.default, i, b);
|
|
3336
|
+
const p = { x: d.x, y: d.y }, g = { width: b, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3337
|
+
p,
|
|
3338
|
+
g,
|
|
3331
3339
|
e,
|
|
3332
3340
|
u,
|
|
3333
3341
|
t.length
|
|
3334
|
-
), y = this.entryAnimationEngine.calculateStartRotation(d.rotation),
|
|
3342
|
+
), y = this.entryAnimationEngine.calculateStartRotation(d.rotation), w = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3335
3343
|
d.rotation,
|
|
3336
3344
|
d.scale,
|
|
3337
3345
|
b,
|
|
3338
3346
|
i
|
|
3339
|
-
),
|
|
3340
|
-
p,
|
|
3347
|
+
), R = this.entryAnimationEngine.buildStartTransform(
|
|
3341
3348
|
m,
|
|
3349
|
+
p,
|
|
3342
3350
|
d.rotation,
|
|
3343
3351
|
d.scale,
|
|
3344
3352
|
b,
|
|
3345
3353
|
i,
|
|
3346
3354
|
y,
|
|
3347
|
-
|
|
3355
|
+
w
|
|
3348
3356
|
);
|
|
3349
3357
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
3350
|
-
finalPosition:
|
|
3351
|
-
imageSize:
|
|
3358
|
+
finalPosition: p,
|
|
3359
|
+
imageSize: g,
|
|
3352
3360
|
left: d.x,
|
|
3353
3361
|
top: d.y,
|
|
3354
|
-
finalTransform:
|
|
3362
|
+
finalTransform: v,
|
|
3355
3363
|
renderedWidth: b,
|
|
3356
3364
|
renderedHeight: i
|
|
3357
|
-
}), h.style.transform =
|
|
3365
|
+
}), h.style.transform = R, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || y !== d.rotation || w !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(p.x), h.dataset.endY = String(p.y), h.dataset.imageWidth = String(b), h.dataset.imageHeight = String(i), h.dataset.rotation = String(d.rotation), h.dataset.scale = String(d.scale), h.dataset.startRotation = String(y), h.dataset.startScale = String(w)), this.displayQueue.push(h);
|
|
3358
3366
|
}, h.onerror = () => r++, h.src = l;
|
|
3359
3367
|
});
|
|
3360
3368
|
}
|
|
@@ -3399,7 +3407,7 @@ let Ke = class {
|
|
|
3399
3407
|
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy();
|
|
3400
3408
|
}
|
|
3401
3409
|
};
|
|
3402
|
-
const
|
|
3410
|
+
const ii = Ht(
|
|
3403
3411
|
function({ className: t, style: i, ...e }, n) {
|
|
3404
3412
|
const a = Rt(null), r = Rt(null);
|
|
3405
3413
|
return Nt(n, () => ({
|
|
@@ -3408,7 +3416,7 @@ const ei = Ht(
|
|
|
3408
3416
|
}
|
|
3409
3417
|
})), jt(() => {
|
|
3410
3418
|
if (!a.current) return;
|
|
3411
|
-
const s = new
|
|
3419
|
+
const s = new Ze({
|
|
3412
3420
|
container: a.current,
|
|
3413
3421
|
...e
|
|
3414
3422
|
});
|
|
@@ -3421,6 +3429,6 @@ const ei = Ht(
|
|
|
3421
3429
|
}
|
|
3422
3430
|
);
|
|
3423
3431
|
export {
|
|
3424
|
-
|
|
3432
|
+
ii as ImageCloud
|
|
3425
3433
|
};
|
|
3426
3434
|
//# sourceMappingURL=react.js.map
|