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