@frybynite/image-cloud 0.10.1 → 0.10.3
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 +460 -497
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +283 -320
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +24 -35
- package/dist/react.d.ts +24 -35
- package/dist/react.js +244 -280
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +24 -35
- package/dist/vue.js +227 -263
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +24 -35
- package/dist/web-component.js +189 -225
- package/dist/web-component.js.map +1 -1
- package/package.json +9 -6
package/dist/react.js
CHANGED
|
@@ -10,12 +10,12 @@ const mt = Object.freeze({
|
|
|
10
10
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
11
11
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
12
12
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
13
|
-
}),
|
|
13
|
+
}), At = Object.freeze({
|
|
14
14
|
gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
|
|
15
15
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
16
16
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
17
17
|
snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
|
|
18
|
-
}),
|
|
18
|
+
}), Rt = Object.freeze({
|
|
19
19
|
gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
|
|
20
20
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
21
21
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
@@ -84,10 +84,10 @@ const mt = Object.freeze({
|
|
|
84
84
|
min: -15,
|
|
85
85
|
max: 15
|
|
86
86
|
})
|
|
87
|
-
}),
|
|
87
|
+
}), Ot = Object.freeze({
|
|
88
88
|
sizing: Xt,
|
|
89
89
|
rotation: Yt
|
|
90
|
-
}),
|
|
90
|
+
}), zt = Object.freeze({
|
|
91
91
|
validateUrls: !0,
|
|
92
92
|
validationTimeout: 5e3,
|
|
93
93
|
validationMethod: "head",
|
|
@@ -96,16 +96,16 @@ const mt = Object.freeze({
|
|
|
96
96
|
enabled: !1,
|
|
97
97
|
centers: !1,
|
|
98
98
|
loaders: !1
|
|
99
|
-
}),
|
|
99
|
+
}), Jt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Vt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Kt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Zt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }), C = Object.freeze({
|
|
100
100
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
101
101
|
loaders: [],
|
|
102
102
|
// Shared loader settings and debug config
|
|
103
103
|
config: Object.freeze({
|
|
104
|
-
loaders:
|
|
104
|
+
loaders: zt,
|
|
105
105
|
debug: Dt
|
|
106
106
|
}),
|
|
107
107
|
// Image sizing and rotation configuration
|
|
108
|
-
image:
|
|
108
|
+
image: Ot,
|
|
109
109
|
// Pattern-based layout configuration
|
|
110
110
|
layout: Object.freeze({
|
|
111
111
|
algorithm: "radial",
|
|
@@ -174,9 +174,7 @@ const mt = Object.freeze({
|
|
|
174
174
|
}),
|
|
175
175
|
navigation: Object.freeze({
|
|
176
176
|
keyboard: !0,
|
|
177
|
-
swipe: !0
|
|
178
|
-
mouseWheel: void 0
|
|
179
|
-
// STUB: Not implemented yet
|
|
177
|
+
swipe: !0
|
|
180
178
|
}),
|
|
181
179
|
dragging: !0
|
|
182
180
|
}),
|
|
@@ -230,79 +228,48 @@ function te(o, t) {
|
|
|
230
228
|
}
|
|
231
229
|
return i;
|
|
232
230
|
}
|
|
233
|
-
function ee(o) {
|
|
234
|
-
const t = o.
|
|
235
|
-
|
|
236
|
-
return {
|
|
237
|
-
rotation: {
|
|
238
|
-
mode: t.enabled ? "random" : "none",
|
|
239
|
-
range: t.range
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
}
|
|
243
|
-
function ie(o) {
|
|
244
|
-
const t = o.layout?.sizing?.variance;
|
|
245
|
-
if (t)
|
|
246
|
-
return {
|
|
247
|
-
sizing: {
|
|
248
|
-
mode: "adaptive",
|
|
249
|
-
// Legacy variance config implies adaptive mode
|
|
250
|
-
variance: t
|
|
251
|
-
}
|
|
252
|
-
};
|
|
253
|
-
}
|
|
254
|
-
function ne(o = {}) {
|
|
255
|
-
const t = ee(o), i = ie(o);
|
|
256
|
-
let e = o.image;
|
|
257
|
-
(t || i) && (e = {
|
|
258
|
-
...i || {},
|
|
259
|
-
...t || {},
|
|
260
|
-
...e
|
|
261
|
-
}, e.rotation && t?.rotation && o.image?.rotation && (e.rotation = {
|
|
262
|
-
...t.rotation,
|
|
263
|
-
...o.image.rotation
|
|
264
|
-
}));
|
|
265
|
-
const n = [...o.loaders ?? []];
|
|
266
|
-
o.images && o.images.length > 0 && n.unshift({
|
|
231
|
+
function ee(o = {}) {
|
|
232
|
+
const t = o.image, i = [...o.loaders ?? []];
|
|
233
|
+
o.images && o.images.length > 0 && i.unshift({
|
|
267
234
|
static: {
|
|
268
235
|
sources: [{ urls: o.images }]
|
|
269
236
|
}
|
|
270
237
|
});
|
|
271
|
-
const
|
|
238
|
+
const n = {
|
|
272
239
|
loaders: {
|
|
273
|
-
...
|
|
240
|
+
...zt,
|
|
274
241
|
...o.config?.loaders ?? {}
|
|
275
242
|
}
|
|
276
|
-
},
|
|
277
|
-
loaders:
|
|
278
|
-
config:
|
|
279
|
-
image: te(
|
|
243
|
+
}, s = {
|
|
244
|
+
loaders: i,
|
|
245
|
+
config: n,
|
|
246
|
+
image: te(Ot, t),
|
|
280
247
|
layout: { ...C.layout },
|
|
281
248
|
animation: { ...C.animation },
|
|
282
249
|
interaction: { ...C.interaction },
|
|
283
250
|
ui: { ...C.ui },
|
|
284
251
|
styling: Qt(Ft, o.styling)
|
|
285
252
|
};
|
|
286
|
-
o.layout && (
|
|
253
|
+
if (o.layout && (s.layout = {
|
|
287
254
|
...C.layout,
|
|
288
255
|
...o.layout
|
|
289
|
-
}, o.layout.responsive && (
|
|
256
|
+
}, o.layout.responsive && (s.layout.responsive = {
|
|
290
257
|
...C.layout.responsive,
|
|
291
258
|
mobile: o.layout.responsive.mobile ? { ...C.layout.responsive.mobile, ...o.layout.responsive.mobile } : C.layout.responsive.mobile,
|
|
292
259
|
tablet: o.layout.responsive.tablet ? { ...C.layout.responsive.tablet, ...o.layout.responsive.tablet } : C.layout.responsive.tablet
|
|
293
|
-
}), o.layout.spacing && (
|
|
260
|
+
}), o.layout.spacing && (s.layout.spacing = {
|
|
294
261
|
...C.layout.spacing,
|
|
295
262
|
...o.layout.spacing
|
|
296
|
-
})), o.animation && (
|
|
263
|
+
})), o.animation && (s.animation = {
|
|
297
264
|
...C.animation,
|
|
298
265
|
...o.animation
|
|
299
|
-
}, o.animation.easing && (
|
|
266
|
+
}, o.animation.easing && (s.animation.easing = {
|
|
300
267
|
...C.animation.easing,
|
|
301
268
|
...o.animation.easing
|
|
302
|
-
}), o.animation.queue && (
|
|
269
|
+
}), o.animation.queue && (s.animation.queue = {
|
|
303
270
|
...C.animation.queue,
|
|
304
271
|
...o.animation.queue
|
|
305
|
-
}), o.animation.entry && (
|
|
272
|
+
}), o.animation.entry && (s.animation.entry = {
|
|
306
273
|
...C.animation.entry,
|
|
307
274
|
...o.animation.entry,
|
|
308
275
|
start: o.animation.entry.start ? {
|
|
@@ -314,48 +281,45 @@ function ne(o = {}) {
|
|
|
314
281
|
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : C.animation.entry.path,
|
|
315
282
|
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : C.animation.entry.rotation,
|
|
316
283
|
scale: o.animation.entry.scale ? { ...Et, ...o.animation.entry.scale } : C.animation.entry.scale
|
|
317
|
-
}), o.animation.idle && (
|
|
284
|
+
}), o.animation.idle && (s.animation.idle = {
|
|
318
285
|
...$t,
|
|
319
286
|
...o.animation.idle
|
|
320
|
-
})), o.interaction && (
|
|
287
|
+
})), o.interaction && (s.interaction = {
|
|
321
288
|
...C.interaction,
|
|
322
289
|
...o.interaction
|
|
323
|
-
}, o.interaction.focus && (
|
|
290
|
+
}, o.interaction.focus && (s.interaction.focus = {
|
|
324
291
|
...C.interaction.focus,
|
|
325
292
|
...o.interaction.focus
|
|
326
|
-
}), o.interaction.navigation && (
|
|
293
|
+
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
327
294
|
...C.interaction.navigation,
|
|
328
295
|
...o.interaction.navigation
|
|
329
|
-
}))
|
|
330
|
-
const c = o.rendering?.ui;
|
|
331
|
-
if (c && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), a.ui = {
|
|
296
|
+
})), s.ui = {
|
|
332
297
|
...C.ui,
|
|
333
|
-
...c,
|
|
334
298
|
...o.ui
|
|
335
|
-
},
|
|
299
|
+
}, s.config.debug = {
|
|
336
300
|
...Dt,
|
|
337
301
|
...o.config?.debug ?? {}
|
|
338
|
-
},
|
|
339
|
-
const
|
|
340
|
-
|
|
341
|
-
...
|
|
342
|
-
default: { ...
|
|
343
|
-
hover: { ...
|
|
302
|
+
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
303
|
+
const r = { shape: "hexagon", mode: "height-relative" };
|
|
304
|
+
s.styling = {
|
|
305
|
+
...s.styling,
|
|
306
|
+
default: { ...s.styling.default, clipPath: r },
|
|
307
|
+
hover: { ...s.styling.hover, clipPath: r }
|
|
344
308
|
// focused: untouched — user config respected
|
|
345
309
|
};
|
|
346
310
|
}
|
|
347
|
-
return
|
|
311
|
+
return s;
|
|
348
312
|
}
|
|
349
|
-
function
|
|
313
|
+
function ie(o, t) {
|
|
350
314
|
return { ...o ? Ct[o] : Ct.playful, ...t };
|
|
351
315
|
}
|
|
352
|
-
function
|
|
353
|
-
return { ...o ? Rt[o] : Rt.gentle, ...t };
|
|
354
|
-
}
|
|
355
|
-
function ae(o, t) {
|
|
316
|
+
function ne(o, t) {
|
|
356
317
|
return { ...o ? At[o] : At.gentle, ...t };
|
|
357
318
|
}
|
|
358
|
-
|
|
319
|
+
function oe(o, t) {
|
|
320
|
+
return { ...o ? Rt[o] : Rt.gentle, ...t };
|
|
321
|
+
}
|
|
322
|
+
class se {
|
|
359
323
|
constructor(t) {
|
|
360
324
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
361
325
|
}
|
|
@@ -511,34 +475,34 @@ class re {
|
|
|
511
475
|
return new Promise((i) => setTimeout(i, t));
|
|
512
476
|
}
|
|
513
477
|
}
|
|
514
|
-
function
|
|
478
|
+
function V(o, t, i) {
|
|
515
479
|
return o + (t - o) * i;
|
|
516
480
|
}
|
|
517
|
-
function
|
|
518
|
-
const { overshoot: n, bounces: s, decayRatio: r } = e, a = i.x - t.x, c = i.y - t.y, l =
|
|
519
|
-
let u = 0, h = 0, d = 1, g = n,
|
|
481
|
+
function ae(o, t, i, e) {
|
|
482
|
+
const { overshoot: n, bounces: s, decayRatio: r } = e, a = i.x - t.x, c = i.y - t.y, l = re(s, r);
|
|
483
|
+
let u = 0, h = 0, d = 1, g = n, p = !1;
|
|
520
484
|
for (let f = 0; f < l.length; f++)
|
|
521
485
|
if (o <= l[f].time) {
|
|
522
|
-
h = f === 0 ? 0 : l[f - 1].time, d = l[f].time, g = l[f].overshoot,
|
|
486
|
+
h = f === 0 ? 0 : l[f - 1].time, d = l[f].time, g = l[f].overshoot, p = l[f].isOvershoot;
|
|
523
487
|
break;
|
|
524
488
|
}
|
|
525
|
-
const
|
|
526
|
-
if (
|
|
527
|
-
u = 1 + g * at(
|
|
489
|
+
const b = (o - h) / (d - h);
|
|
490
|
+
if (p)
|
|
491
|
+
u = 1 + g * at(b);
|
|
528
492
|
else if (h === 0)
|
|
529
|
-
u = at(
|
|
493
|
+
u = at(b);
|
|
530
494
|
else {
|
|
531
495
|
const m = 1 + (l.find(
|
|
532
496
|
(y, E) => y.time > h && E > 0 && l[E - 1].isOvershoot
|
|
533
497
|
)?.overshoot || g);
|
|
534
|
-
u =
|
|
498
|
+
u = V(m, 1, at(b));
|
|
535
499
|
}
|
|
536
500
|
return {
|
|
537
501
|
x: t.x + a * u,
|
|
538
502
|
y: t.y + c * u
|
|
539
503
|
};
|
|
540
504
|
}
|
|
541
|
-
function
|
|
505
|
+
function re(o, t) {
|
|
542
506
|
const i = [];
|
|
543
507
|
let e = 0.6;
|
|
544
508
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
@@ -548,12 +512,12 @@ function le(o, t) {
|
|
|
548
512
|
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
549
513
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
550
514
|
}
|
|
551
|
-
function
|
|
515
|
+
function ce(o, t, i, e) {
|
|
552
516
|
const { stiffness: n, damping: s, mass: r, oscillations: a } = e, c = i.x - t.x, l = i.y - t.y, u = Math.sqrt(n / r), h = s / (2 * Math.sqrt(n * r));
|
|
553
517
|
let d;
|
|
554
518
|
if (h < 1) {
|
|
555
|
-
const g = u * Math.sqrt(1 - h * h),
|
|
556
|
-
d = 1 -
|
|
519
|
+
const g = u * Math.sqrt(1 - h * h), p = Math.exp(-h * u * o * 3), b = Math.cos(g * o * a * Math.PI);
|
|
520
|
+
d = 1 - p * b;
|
|
557
521
|
} else
|
|
558
522
|
d = 1 - Math.exp(-u * o * 3);
|
|
559
523
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
@@ -561,24 +525,24 @@ function he(o, t, i, e) {
|
|
|
561
525
|
y: t.y + l * d
|
|
562
526
|
};
|
|
563
527
|
}
|
|
564
|
-
function
|
|
565
|
-
const { amplitude: n, frequency: s, decay: r, decayRate: a, 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, g = h > 0 ? l / h : 1,
|
|
528
|
+
function le(o, t, i, e) {
|
|
529
|
+
const { amplitude: n, frequency: s, decay: r, decayRate: a, 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, g = h > 0 ? l / h : 1, p = s * Math.PI * 2 * o + c, b = r ? Math.pow(1 - o, a) : 1, f = n * Math.sin(p) * b, m = he(o);
|
|
566
530
|
return {
|
|
567
|
-
x:
|
|
568
|
-
y:
|
|
531
|
+
x: V(t.x, i.x, m) + f * d,
|
|
532
|
+
y: V(t.y, i.y, m) + f * g
|
|
569
533
|
};
|
|
570
534
|
}
|
|
571
535
|
function at(o) {
|
|
572
536
|
return 1 - (1 - o) * (1 - o);
|
|
573
537
|
}
|
|
574
|
-
function
|
|
538
|
+
function he(o) {
|
|
575
539
|
return 1 - Math.pow(1 - o, 3);
|
|
576
540
|
}
|
|
577
|
-
function
|
|
541
|
+
function de(o, t, i) {
|
|
578
542
|
const { amplitude: e, frequency: n, decay: s } = i, r = Math.sin(o * n * Math.PI * 2), a = s ? Math.pow(1 - o, 2) : 1, c = e * r * a;
|
|
579
543
|
return t + c;
|
|
580
544
|
}
|
|
581
|
-
function
|
|
545
|
+
function ue(o, t, i) {
|
|
582
546
|
const { overshoot: e, bounces: n } = i, s = [];
|
|
583
547
|
s.push({ time: 0.5, scale: e });
|
|
584
548
|
let r = e;
|
|
@@ -592,13 +556,13 @@ function ge(o, t, i) {
|
|
|
592
556
|
let h = 1;
|
|
593
557
|
for (let d = 0; d < s.length; d++)
|
|
594
558
|
if (o <= s[d].time) {
|
|
595
|
-
const g = d === 0 ? 0 : s[d - 1].time,
|
|
596
|
-
h =
|
|
559
|
+
const g = d === 0 ? 0 : s[d - 1].time, p = d === 0 ? 1 : s[d - 1].scale, b = (o - g) / (s[d].time - g), f = at(b);
|
|
560
|
+
h = p + (s[d].scale - p) * f;
|
|
597
561
|
break;
|
|
598
562
|
}
|
|
599
563
|
return h * t;
|
|
600
564
|
}
|
|
601
|
-
function
|
|
565
|
+
function fe(o) {
|
|
602
566
|
const {
|
|
603
567
|
element: t,
|
|
604
568
|
startPosition: i,
|
|
@@ -613,59 +577,59 @@ function me(o) {
|
|
|
613
577
|
rotationConfig: h,
|
|
614
578
|
startRotation: d,
|
|
615
579
|
scaleConfig: g,
|
|
616
|
-
startScale:
|
|
617
|
-
} = o,
|
|
618
|
-
if (
|
|
580
|
+
startScale: p
|
|
581
|
+
} = o, b = n.type, f = d !== void 0 && d !== c, m = h?.mode === "wobble", y = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, E = f || m, v = p !== void 0 && p !== l, S = g?.mode === "pop", w = g?.pop || { overshoot: 1.2, bounces: 1 };
|
|
582
|
+
if (b === "linear" && !E && !(v || S)) {
|
|
619
583
|
u && u();
|
|
620
584
|
return;
|
|
621
585
|
}
|
|
622
|
-
const
|
|
623
|
-
function
|
|
624
|
-
const N = H -
|
|
586
|
+
const O = performance.now(), L = -r / 2, _ = -a / 2;
|
|
587
|
+
function z(H) {
|
|
588
|
+
const N = H - O, A = Math.min(N / s, 1);
|
|
625
589
|
let D;
|
|
626
|
-
switch (
|
|
590
|
+
switch (b) {
|
|
627
591
|
case "bounce": {
|
|
628
|
-
const k =
|
|
592
|
+
const k = ie(
|
|
629
593
|
n.bouncePreset,
|
|
630
594
|
n.bounce
|
|
631
595
|
);
|
|
632
|
-
D =
|
|
596
|
+
D = ae(A, i, e, k);
|
|
633
597
|
break;
|
|
634
598
|
}
|
|
635
599
|
case "elastic": {
|
|
636
|
-
const k =
|
|
600
|
+
const k = ne(
|
|
637
601
|
n.elasticPreset,
|
|
638
602
|
n.elastic
|
|
639
603
|
);
|
|
640
|
-
D =
|
|
604
|
+
D = ce(A, i, e, k);
|
|
641
605
|
break;
|
|
642
606
|
}
|
|
643
607
|
case "wave": {
|
|
644
|
-
const k =
|
|
608
|
+
const k = oe(
|
|
645
609
|
n.wavePreset,
|
|
646
610
|
n.wave
|
|
647
611
|
);
|
|
648
|
-
D =
|
|
612
|
+
D = le(A, i, e, k);
|
|
649
613
|
break;
|
|
650
614
|
}
|
|
651
615
|
default:
|
|
652
616
|
D = {
|
|
653
|
-
x:
|
|
654
|
-
y:
|
|
617
|
+
x: V(i.x, e.x, A),
|
|
618
|
+
y: V(i.y, e.y, A)
|
|
655
619
|
};
|
|
656
620
|
}
|
|
657
621
|
const W = D.x - e.x, U = D.y - e.y;
|
|
658
622
|
let M;
|
|
659
|
-
m ? M =
|
|
660
|
-
let
|
|
661
|
-
S ?
|
|
623
|
+
m ? M = de(A, c, y) : f ? M = V(d, c, A) : M = c;
|
|
624
|
+
let R;
|
|
625
|
+
S ? R = ue(A, l, w) : v ? R = V(p, l, A) : R = l, t.style.transform = `translate(${L}px, ${_}px) translate(${W}px, ${U}px) rotate(${M}deg) scale(${R})`, A < 1 ? requestAnimationFrame(z) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
|
|
662
626
|
}
|
|
663
|
-
requestAnimationFrame(
|
|
627
|
+
requestAnimationFrame(z);
|
|
664
628
|
}
|
|
665
|
-
function
|
|
629
|
+
function ge(o) {
|
|
666
630
|
return o === "bounce" || o === "elastic" || o === "wave";
|
|
667
631
|
}
|
|
668
|
-
const
|
|
632
|
+
const me = {
|
|
669
633
|
radial: "center",
|
|
670
634
|
spiral: "center",
|
|
671
635
|
grid: "top",
|
|
@@ -674,7 +638,7 @@ const be = {
|
|
|
674
638
|
wave: "left",
|
|
675
639
|
honeycomb: "center"
|
|
676
640
|
};
|
|
677
|
-
class
|
|
641
|
+
class pe {
|
|
678
642
|
constructor(t, i) {
|
|
679
643
|
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || Et;
|
|
680
644
|
}
|
|
@@ -682,7 +646,7 @@ class ye {
|
|
|
682
646
|
* Get the effective start position, considering layout-aware defaults
|
|
683
647
|
*/
|
|
684
648
|
resolveStartPosition() {
|
|
685
|
-
return this.config.start.position ? this.config.start.position :
|
|
649
|
+
return this.config.start.position ? this.config.start.position : me[this.layoutAlgorithm] || "nearest-edge";
|
|
686
650
|
}
|
|
687
651
|
/**
|
|
688
652
|
* Calculate the starting position for an image's entry animation
|
|
@@ -772,16 +736,16 @@ class ye {
|
|
|
772
736
|
let c;
|
|
773
737
|
const l = r.radius || "120%";
|
|
774
738
|
if (typeof l == "string" && l.endsWith("%")) {
|
|
775
|
-
const
|
|
739
|
+
const b = parseFloat(l) / 100;
|
|
776
740
|
c = Math.sqrt(
|
|
777
741
|
e.width ** 2 + e.height ** 2
|
|
778
|
-
) *
|
|
742
|
+
) * b / 2;
|
|
779
743
|
} else
|
|
780
744
|
c = typeof l == "number" ? l : 500;
|
|
781
745
|
let u;
|
|
782
746
|
a === "even" ? u = n / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
783
|
-
const h = e.width / 2, d = e.height / 2, g = h + Math.cos(u) * c,
|
|
784
|
-
return { x: g, y:
|
|
747
|
+
const h = e.width / 2, d = e.height / 2, g = h + Math.cos(u) * c, p = d + Math.sin(u) * c;
|
|
748
|
+
return { x: g, y: p };
|
|
785
749
|
}
|
|
786
750
|
/**
|
|
787
751
|
* Get animation parameters for an image
|
|
@@ -801,8 +765,8 @@ class ye {
|
|
|
801
765
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
802
766
|
*/
|
|
803
767
|
buildStartTransform(t, i, e, n, s, r, a, c) {
|
|
804
|
-
const l = t.x - i.x, u = t.y - i.y, h = a !== void 0 ? a : e, d = c !== void 0 ? c : n, g = s !== void 0 ? -s / 2 : 0,
|
|
805
|
-
return t.useScale ? `${
|
|
768
|
+
const l = t.x - i.x, u = t.y - i.y, h = a !== void 0 ? a : e, d = c !== void 0 ? c : n, g = s !== void 0 ? -s / 2 : 0, p = r !== void 0 ? -r / 2 : 0, b = s !== void 0 ? `translate(${g}px, ${p}px)` : "translate(-50%, -50%)";
|
|
769
|
+
return t.useScale ? `${b} translate(${l}px, ${u}px) rotate(${h}deg) scale(0)` : `${b} translate(${l}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
806
770
|
}
|
|
807
771
|
/**
|
|
808
772
|
* Build the final CSS transform string
|
|
@@ -827,7 +791,7 @@ class ye {
|
|
|
827
791
|
* Check if the current path type requires JavaScript animation
|
|
828
792
|
*/
|
|
829
793
|
requiresJSAnimation() {
|
|
830
|
-
return
|
|
794
|
+
return ge(this.pathConfig.type);
|
|
831
795
|
}
|
|
832
796
|
/**
|
|
833
797
|
* Get the path configuration
|
|
@@ -1018,7 +982,7 @@ class ye {
|
|
|
1018
982
|
return 1 - (1 - t) * (1 - t);
|
|
1019
983
|
}
|
|
1020
984
|
}
|
|
1021
|
-
class
|
|
985
|
+
class be {
|
|
1022
986
|
constructor(t, i = 600) {
|
|
1023
987
|
this.entries = /* @__PURE__ */ new Map(), this.togetherRafId = null, this.togetherSpeed = 0, this.config = t, this.entryDurationMs = i;
|
|
1024
988
|
}
|
|
@@ -1103,7 +1067,7 @@ class ve {
|
|
|
1103
1067
|
}
|
|
1104
1068
|
}
|
|
1105
1069
|
_startWiggle(t) {
|
|
1106
|
-
const i = { ...
|
|
1070
|
+
const i = { ...Jt, ...this.config.wiggle }, e = [
|
|
1107
1071
|
{ transform: "rotate(0deg)", offset: 0 },
|
|
1108
1072
|
{ transform: `rotate(${i.maxAngle}deg)`, offset: 0.25 },
|
|
1109
1073
|
{ transform: "rotate(0deg)", offset: 0.5 },
|
|
@@ -1123,7 +1087,7 @@ class ve {
|
|
|
1123
1087
|
});
|
|
1124
1088
|
}
|
|
1125
1089
|
_startPulse(t) {
|
|
1126
|
-
const i = { ...
|
|
1090
|
+
const i = { ...Vt, ...this.config.pulse }, e = [
|
|
1127
1091
|
{ transform: "scale(1)", offset: 0 },
|
|
1128
1092
|
{ transform: `scale(${i.maxScale})`, offset: 0.25 },
|
|
1129
1093
|
{ transform: "scale(1)", offset: 0.5 },
|
|
@@ -1204,7 +1168,7 @@ class ve {
|
|
|
1204
1168
|
t.animation && (t.animation.cancel(), t.animation = null), t.blinkAnimation && (t.blinkAnimation.cancel(), t.blinkAnimation = null), t.customTeardown && (t.customTeardown(), t.customTeardown = null);
|
|
1205
1169
|
}
|
|
1206
1170
|
}
|
|
1207
|
-
class
|
|
1171
|
+
class ye {
|
|
1208
1172
|
constructor(t, i = {}) {
|
|
1209
1173
|
this.config = t, this.imageConfig = i;
|
|
1210
1174
|
}
|
|
@@ -1216,15 +1180,15 @@ class Ee {
|
|
|
1216
1180
|
* @returns Array of layout objects with position, rotation, scale
|
|
1217
1181
|
*/
|
|
1218
1182
|
generate(t, i, e = {}) {
|
|
1219
|
-
const n = [], { width: s, height: r } = i, a = 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, g = this.imageConfig.sizing?.variance?.max ?? 1,
|
|
1183
|
+
const n = [], { width: s, height: r } = i, a = 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, g = this.imageConfig.sizing?.variance?.max ?? 1, p = d !== 1 || g !== 1, f = c * 1.5 / 2, m = c / 2, y = s - a - f, E = r - a - m, v = a + f, S = a + m;
|
|
1220
1184
|
for (let w = 0; w < t; w++) {
|
|
1221
|
-
const I = this.random(v, y),
|
|
1185
|
+
const I = this.random(v, y), O = this.random(S, E), L = l === "random" ? this.random(u, h) : 0, _ = p ? this.random(d, g) : 1, z = c * _, H = {
|
|
1222
1186
|
id: w,
|
|
1223
1187
|
x: I,
|
|
1224
|
-
y:
|
|
1188
|
+
y: O,
|
|
1225
1189
|
rotation: L,
|
|
1226
1190
|
scale: _,
|
|
1227
|
-
baseSize:
|
|
1191
|
+
baseSize: z
|
|
1228
1192
|
};
|
|
1229
1193
|
n.push(H);
|
|
1230
1194
|
}
|
|
@@ -1240,7 +1204,7 @@ class Ee {
|
|
|
1240
1204
|
return Math.random() * (i - t) + t;
|
|
1241
1205
|
}
|
|
1242
1206
|
}
|
|
1243
|
-
class
|
|
1207
|
+
class ve {
|
|
1244
1208
|
constructor(t, i = {}) {
|
|
1245
1209
|
this.config = t, this.imageConfig = i;
|
|
1246
1210
|
}
|
|
@@ -1252,7 +1216,7 @@ class we {
|
|
|
1252
1216
|
* @returns Array of layout objects with position, rotation, scale
|
|
1253
1217
|
*/
|
|
1254
1218
|
generate(t, i, e = {}) {
|
|
1255
|
-
const n = [], { width: s, height: r } = i, a = 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, g = h !== 1 || d !== 1,
|
|
1219
|
+
const n = [], { width: s, height: r } = i, a = 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, g = h !== 1 || d !== 1, p = this.config.scaleDecay ?? 0, b = {
|
|
1256
1220
|
...jt,
|
|
1257
1221
|
...this.config.radial
|
|
1258
1222
|
}, f = e.fixedHeight ?? a, m = s / 2, y = r / 2, E = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, S = Math.max(f * 0.8, Math.min(
|
|
@@ -1260,14 +1224,14 @@ class we {
|
|
|
1260
1224
|
y - v - f / 2
|
|
1261
1225
|
));
|
|
1262
1226
|
if (t > 0) {
|
|
1263
|
-
const
|
|
1227
|
+
const O = g ? this.random(h, d) : 1, L = f * O;
|
|
1264
1228
|
n.push({
|
|
1265
1229
|
id: 0,
|
|
1266
1230
|
x: m,
|
|
1267
1231
|
y,
|
|
1268
1232
|
rotation: c === "random" ? this.random(l * 0.33, u * 0.33) : 0,
|
|
1269
1233
|
// Less rotation for center
|
|
1270
|
-
scale:
|
|
1234
|
+
scale: O,
|
|
1271
1235
|
baseSize: L,
|
|
1272
1236
|
zIndex: 100
|
|
1273
1237
|
// Center image is highest
|
|
@@ -1275,15 +1239,15 @@ class we {
|
|
|
1275
1239
|
}
|
|
1276
1240
|
let w = 1, I = 1;
|
|
1277
1241
|
for (; w < t; ) {
|
|
1278
|
-
const
|
|
1242
|
+
const O = I / E, L = p > 0 ? 1 - O * p * 0.5 : 1, _ = Math.max(f * 0.8, S / E * 1.5 / b.tightness), z = I * _, H = z * 1.5, N = Math.PI * (3 * (H + z) - Math.sqrt((3 * H + z) * (H + 3 * z))), A = this.estimateWidth(f), D = Math.floor(N / (A * 0.7));
|
|
1279
1243
|
if (D === 0) {
|
|
1280
1244
|
I++;
|
|
1281
1245
|
continue;
|
|
1282
1246
|
}
|
|
1283
1247
|
const W = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
|
|
1284
1248
|
for (let M = 0; M < D && w < t; M++) {
|
|
1285
|
-
const
|
|
1286
|
-
let $ = m + Math.cos(
|
|
1249
|
+
const R = M * W + U, k = g ? this.random(h, d) : 1, q = L * k, T = f * q;
|
|
1250
|
+
let $ = m + Math.cos(R) * H, F = y + Math.sin(R) * z;
|
|
1287
1251
|
const P = T * 1.5 / 2, B = T / 2;
|
|
1288
1252
|
$ - P < v ? $ = v + P : $ + P > s - v && ($ = s - v - P), F - B < v ? F = v + B : F + B > r - v && (F = r - v - B);
|
|
1289
1253
|
const Y = c === "random" ? this.random(l, u) : 0;
|
|
@@ -1321,7 +1285,7 @@ class we {
|
|
|
1321
1285
|
return Math.random() * (i - t) + t;
|
|
1322
1286
|
}
|
|
1323
1287
|
}
|
|
1324
|
-
const
|
|
1288
|
+
const Ee = {
|
|
1325
1289
|
columns: "auto",
|
|
1326
1290
|
rows: "auto",
|
|
1327
1291
|
stagger: "none",
|
|
@@ -1349,7 +1313,7 @@ const xe = {
|
|
|
1349
1313
|
{ x: 0, y: 1 }
|
|
1350
1314
|
// down
|
|
1351
1315
|
];
|
|
1352
|
-
class
|
|
1316
|
+
class we {
|
|
1353
1317
|
constructor(t, i = {}) {
|
|
1354
1318
|
this.config = t, this.imageConfig = i;
|
|
1355
1319
|
}
|
|
@@ -1361,13 +1325,13 @@ class Se {
|
|
|
1361
1325
|
* @returns Array of layout objects with position, rotation, scale
|
|
1362
1326
|
*/
|
|
1363
1327
|
generate(t, i, e = {}) {
|
|
1364
|
-
const n = [], { width: s, height: r } = i, a = { ...
|
|
1328
|
+
const n = [], { width: s, height: r } = i, a = { ...Ee, ...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, g = h !== 1 || d !== 1, p = s - 2 * c, b = r - 2 * c, { columns: f, rows: m } = this.calculateGridDimensions(
|
|
1365
1329
|
t,
|
|
1366
|
-
b,
|
|
1367
1330
|
p,
|
|
1331
|
+
b,
|
|
1368
1332
|
l,
|
|
1369
1333
|
a
|
|
1370
|
-
), y = a.stagger === "row", E = a.stagger === "column", v = y ? f + 0.5 : f, S = E ? m + 0.5 : m, w = (
|
|
1334
|
+
), y = a.stagger === "row", E = a.stagger === "column", v = y ? f + 0.5 : f, S = E ? m + 0.5 : m, w = (p - a.gap * (f - 1)) / v, I = (b - a.gap * (m - 1)) / S, O = y ? w / 2 : 0, L = E ? I / 2 : 0, _ = 1 + a.overlap, z = Math.min(w, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, z) : z, N = f * w + (f - 1) * a.gap + O, A = m * I + (m - 1) * a.gap + L, D = c + (p - N) / 2, W = c + (b - A) / 2, U = f * m, M = a.columns !== "auto" && a.rows !== "auto", R = M && t > U;
|
|
1371
1335
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1372
1336
|
gridConfigColumns: a.columns,
|
|
1373
1337
|
gridConfigRows: a.rows,
|
|
@@ -1376,12 +1340,12 @@ class Se {
|
|
|
1376
1340
|
cellCount: U,
|
|
1377
1341
|
hasFixedGrid: M,
|
|
1378
1342
|
imageCount: t,
|
|
1379
|
-
isOverflowMode:
|
|
1343
|
+
isOverflowMode: R
|
|
1380
1344
|
});
|
|
1381
|
-
const k =
|
|
1345
|
+
const k = R ? new Array(U).fill(0) : [], q = Math.min(w, I) * a.overflowOffset;
|
|
1382
1346
|
for (let T = 0; T < t; T++) {
|
|
1383
1347
|
let $, F, X = 0;
|
|
1384
|
-
if (
|
|
1348
|
+
if (R && T >= U) {
|
|
1385
1349
|
const G = T - U, j = G % U;
|
|
1386
1350
|
X = Math.floor(G / U) + 1, k[j]++, a.fillDirection === "row" ? ($ = j % f, F = Math.floor(j / f)) : (F = j % m, $ = Math.floor(j / m));
|
|
1387
1351
|
} else
|
|
@@ -1395,8 +1359,8 @@ class Se {
|
|
|
1395
1359
|
const G = w / 2 * a.jitter, j = I / 2 * a.jitter;
|
|
1396
1360
|
P += this.random(-G, G), B += this.random(-j, j);
|
|
1397
1361
|
}
|
|
1398
|
-
let Y = P,
|
|
1399
|
-
if (!
|
|
1362
|
+
let Y = P, J = B;
|
|
1363
|
+
if (!R && a.fillDirection === "row") {
|
|
1400
1364
|
const G = t % f || f;
|
|
1401
1365
|
if (F === Math.floor((t - 1) / f) && G < f) {
|
|
1402
1366
|
const St = G * w + (G - 1) * a.gap;
|
|
@@ -1405,17 +1369,17 @@ class Se {
|
|
|
1405
1369
|
}
|
|
1406
1370
|
}
|
|
1407
1371
|
const ct = g ? this.random(h, d) : 1, K = H * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt = s - c - nt, _t = c + ot, Ut = r - c - ot;
|
|
1408
|
-
Y = Math.max(ht, Math.min(Y, dt)),
|
|
1372
|
+
Y = Math.max(ht, Math.min(Y, dt)), J = Math.max(_t, Math.min(J, Ut));
|
|
1409
1373
|
let ut = 0;
|
|
1410
1374
|
if (u === "random") {
|
|
1411
1375
|
const G = this.imageConfig.rotation?.range?.min ?? -15, j = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1412
1376
|
a.jitter > 0 ? ut = this.random(G * a.jitter, j * a.jitter) : ut = this.random(G, j);
|
|
1413
1377
|
}
|
|
1414
1378
|
let ft;
|
|
1415
|
-
|
|
1379
|
+
R && X > 0 ? ft = 50 - X : ft = R ? 100 + T : T + 1, n.push({
|
|
1416
1380
|
id: T,
|
|
1417
1381
|
x: Y,
|
|
1418
|
-
y:
|
|
1382
|
+
y: J,
|
|
1419
1383
|
rotation: ut,
|
|
1420
1384
|
scale: ct,
|
|
1421
1385
|
baseSize: K,
|
|
@@ -1449,14 +1413,14 @@ class Se {
|
|
|
1449
1413
|
return Math.random() * (i - t) + t;
|
|
1450
1414
|
}
|
|
1451
1415
|
}
|
|
1452
|
-
const
|
|
1416
|
+
const xe = Math.PI * (3 - Math.sqrt(5)), Se = {
|
|
1453
1417
|
spiralType: "golden",
|
|
1454
1418
|
direction: "counterclockwise",
|
|
1455
1419
|
tightness: 1,
|
|
1456
1420
|
scaleDecay: 0,
|
|
1457
1421
|
startAngle: 0
|
|
1458
1422
|
};
|
|
1459
|
-
class
|
|
1423
|
+
class Ie {
|
|
1460
1424
|
constructor(t, i = {}) {
|
|
1461
1425
|
this.config = t, this.imageConfig = i;
|
|
1462
1426
|
}
|
|
@@ -1468,14 +1432,14 @@ class Re {
|
|
|
1468
1432
|
* @returns Array of layout objects with position, rotation, scale
|
|
1469
1433
|
*/
|
|
1470
1434
|
generate(t, i, e = {}) {
|
|
1471
|
-
const n = [], { width: s, height: r } = i, a = { ...
|
|
1435
|
+
const n = [], { width: s, height: r } = i, a = { ...Se, ...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, g = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, b = g !== 1 || p !== 1, f = this.config.scaleDecay ?? a.scaleDecay, m = s / 2, y = r / 2, E = Math.min(
|
|
1472
1436
|
m - c - l / 2,
|
|
1473
1437
|
y - c - l / 2
|
|
1474
1438
|
), v = a.direction === "clockwise" ? -1 : 1;
|
|
1475
1439
|
for (let S = 0; S < t; S++) {
|
|
1476
1440
|
let w, I;
|
|
1477
1441
|
if (a.spiralType === "golden")
|
|
1478
|
-
w = S *
|
|
1442
|
+
w = S * xe * v + a.startAngle, I = this.calculateGoldenRadius(S, t, E, a.tightness);
|
|
1479
1443
|
else if (a.spiralType === "archimedean") {
|
|
1480
1444
|
const P = S * 0.5 * a.tightness;
|
|
1481
1445
|
w = P * v + a.startAngle, I = this.calculateArchimedeanRadius(P, t, E, a.tightness);
|
|
@@ -1483,7 +1447,7 @@ class Re {
|
|
|
1483
1447
|
const P = S * 0.3 * a.tightness;
|
|
1484
1448
|
w = P * v + a.startAngle, I = this.calculateLogarithmicRadius(P, t, E, a.tightness);
|
|
1485
1449
|
}
|
|
1486
|
-
const
|
|
1450
|
+
const O = m + Math.cos(w) * I, L = y + Math.sin(w) * I, _ = I / E, z = f > 0 ? 1 - _ * f * 0.5 : 1, H = b ? this.random(g, p) : 1, N = z * H, A = l * N, W = A * 1.5 / 2, U = A / 2, M = c + W, R = s - c - W, k = c + U, q = r - c - U, T = Math.max(M, Math.min(O, R)), $ = Math.max(k, Math.min(L, q));
|
|
1487
1451
|
let F = 0;
|
|
1488
1452
|
if (u === "random") {
|
|
1489
1453
|
const P = w * 180 / Math.PI % 360, B = this.random(h, d);
|
|
@@ -1496,7 +1460,7 @@ class Re {
|
|
|
1496
1460
|
y: $,
|
|
1497
1461
|
rotation: F,
|
|
1498
1462
|
scale: N,
|
|
1499
|
-
baseSize:
|
|
1463
|
+
baseSize: A,
|
|
1500
1464
|
zIndex: X
|
|
1501
1465
|
});
|
|
1502
1466
|
}
|
|
@@ -1550,7 +1514,7 @@ class Re {
|
|
|
1550
1514
|
return Math.random() * (i - t) + t;
|
|
1551
1515
|
}
|
|
1552
1516
|
}
|
|
1553
|
-
const
|
|
1517
|
+
const Ce = {
|
|
1554
1518
|
clusterCount: "auto",
|
|
1555
1519
|
clusterSpread: 150,
|
|
1556
1520
|
clusterSpacing: 200,
|
|
@@ -1558,7 +1522,7 @@ const Ae = {
|
|
|
1558
1522
|
overlap: 0.3,
|
|
1559
1523
|
distribution: "gaussian"
|
|
1560
1524
|
};
|
|
1561
|
-
class
|
|
1525
|
+
class Ae {
|
|
1562
1526
|
constructor(t, i = {}) {
|
|
1563
1527
|
this.config = t, this.imageConfig = i;
|
|
1564
1528
|
}
|
|
@@ -1570,7 +1534,7 @@ class Te {
|
|
|
1570
1534
|
* @returns Array of layout objects with position, rotation, scale
|
|
1571
1535
|
*/
|
|
1572
1536
|
generate(t, i, e = {}) {
|
|
1573
|
-
const n = [], { width: s, height: r } = i, a = { ...
|
|
1537
|
+
const n = [], { width: s, height: r } = i, a = { ...Ce, ...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, g = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, b = g !== 1 || p !== 1, f = this.calculateClusterCount(
|
|
1574
1538
|
t,
|
|
1575
1539
|
a.clusterCount,
|
|
1576
1540
|
s,
|
|
@@ -1589,27 +1553,27 @@ class Te {
|
|
|
1589
1553
|
for (let v = 0; v < f; v++) {
|
|
1590
1554
|
const S = m[v], w = y[v];
|
|
1591
1555
|
for (let I = 0; I < w; I++) {
|
|
1592
|
-
let
|
|
1556
|
+
let O, L;
|
|
1593
1557
|
if (a.distribution === "gaussian")
|
|
1594
|
-
|
|
1558
|
+
O = this.gaussianRandom() * S.spread, L = this.gaussianRandom() * S.spread;
|
|
1595
1559
|
else {
|
|
1596
1560
|
const F = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
|
|
1597
|
-
|
|
1561
|
+
O = Math.cos(F) * X, L = Math.sin(F) * X;
|
|
1598
1562
|
}
|
|
1599
|
-
const _ = 1 + a.overlap * 0.5,
|
|
1600
|
-
|
|
1601
|
-
const H =
|
|
1602
|
-
let D = S.x +
|
|
1603
|
-
const M =
|
|
1604
|
-
D = Math.max(c + M, Math.min(D, s - c - M)), W = Math.max(c +
|
|
1605
|
-
const k = u === "random" ? this.random(h, d) : 0, T = Math.sqrt(
|
|
1563
|
+
const _ = 1 + a.overlap * 0.5, z = 1 + a.overlap * 0.3;
|
|
1564
|
+
O /= _, L /= _;
|
|
1565
|
+
const H = b ? this.random(g, p) : 1, N = z * H, A = l * N;
|
|
1566
|
+
let D = S.x + O, W = S.y + L;
|
|
1567
|
+
const M = A * 1.5 / 2, R = A / 2;
|
|
1568
|
+
D = Math.max(c + M, Math.min(D, s - c - M)), W = Math.max(c + R, Math.min(W, r - c - R));
|
|
1569
|
+
const k = u === "random" ? this.random(h, d) : 0, T = Math.sqrt(O * O + L * L) / S.spread, $ = Math.round((1 - T) * 50) + 1;
|
|
1606
1570
|
n.push({
|
|
1607
1571
|
id: E,
|
|
1608
1572
|
x: D,
|
|
1609
1573
|
y: W,
|
|
1610
1574
|
rotation: k,
|
|
1611
1575
|
scale: N,
|
|
1612
|
-
baseSize:
|
|
1576
|
+
baseSize: A,
|
|
1613
1577
|
zIndex: $
|
|
1614
1578
|
}), E++;
|
|
1615
1579
|
}
|
|
@@ -1633,8 +1597,8 @@ class Te {
|
|
|
1633
1597
|
generateClusterCenters(t, i, e, n, s) {
|
|
1634
1598
|
const r = [], c = n + s.clusterSpread, l = i - n - s.clusterSpread, u = n + s.clusterSpread, h = e - n - s.clusterSpread;
|
|
1635
1599
|
for (let d = 0; d < t; d++) {
|
|
1636
|
-
let g = null,
|
|
1637
|
-
for (let
|
|
1600
|
+
let g = null, p = -1;
|
|
1601
|
+
for (let b = 0; b < 100; b++) {
|
|
1638
1602
|
const f = {
|
|
1639
1603
|
x: this.random(c, l),
|
|
1640
1604
|
y: this.random(u, h),
|
|
@@ -1645,7 +1609,7 @@ class Te {
|
|
|
1645
1609
|
const E = f.x - y.x, v = f.y - y.y, S = Math.sqrt(E * E + v * v);
|
|
1646
1610
|
m = Math.min(m, S);
|
|
1647
1611
|
}
|
|
1648
|
-
if ((r.length === 0 || m >
|
|
1612
|
+
if ((r.length === 0 || m > p) && (g = f, p = m), m >= s.clusterSpacing)
|
|
1649
1613
|
break;
|
|
1650
1614
|
}
|
|
1651
1615
|
g && r.push(g);
|
|
@@ -1676,7 +1640,7 @@ class Te {
|
|
|
1676
1640
|
return Math.random() * (i - t) + t;
|
|
1677
1641
|
}
|
|
1678
1642
|
}
|
|
1679
|
-
class
|
|
1643
|
+
class Re {
|
|
1680
1644
|
constructor(t, i = {}) {
|
|
1681
1645
|
this.config = t, this.imageConfig = i;
|
|
1682
1646
|
}
|
|
@@ -1688,25 +1652,25 @@ class Le {
|
|
|
1688
1652
|
* @returns Array of layout objects with position, rotation, scale
|
|
1689
1653
|
*/
|
|
1690
1654
|
generate(t, i, e = {}) {
|
|
1691
|
-
const n = [], { width: s, height: r } = i, a = 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, g = this.imageConfig.sizing?.variance?.max ?? 1,
|
|
1655
|
+
const n = [], { width: s, height: r } = i, a = 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, g = this.imageConfig.sizing?.variance?.max ?? 1, p = d !== 1 || g !== 1, b = e.fixedHeight ?? a, f = {
|
|
1692
1656
|
...Wt,
|
|
1693
1657
|
...this.config.wave
|
|
1694
|
-
}, { rows: m, amplitude: y, frequency: E, phaseShift: v, synchronization: S } = f, w = Math.ceil(t / m), L =
|
|
1658
|
+
}, { rows: m, amplitude: y, frequency: E, phaseShift: v, synchronization: S } = f, w = Math.ceil(t / m), L = b * 1.5 / 2, _ = c + L, z = s - c - L, H = z - _, N = w > 1 ? H / (w - 1) : 0, A = c + y + b / 2, D = r - c - y - b / 2, W = D - A, U = m > 1 ? W / (m - 1) : 0;
|
|
1695
1659
|
let M = 0;
|
|
1696
|
-
for (let
|
|
1697
|
-
const k = m === 1 ? (
|
|
1660
|
+
for (let R = 0; R < m && M < t; R++) {
|
|
1661
|
+
const k = m === 1 ? (A + D) / 2 : A + R * U;
|
|
1698
1662
|
let q = 0;
|
|
1699
|
-
S === "offset" ? q =
|
|
1663
|
+
S === "offset" ? q = R * v : S === "alternating" && (q = R * Math.PI);
|
|
1700
1664
|
for (let T = 0; T < w && M < t; T++) {
|
|
1701
|
-
const $ = w === 1 ? (_ +
|
|
1702
|
-
let
|
|
1703
|
-
l === "tangent" ?
|
|
1665
|
+
const $ = w === 1 ? (_ + z) / 2 : _ + T * N, F = this.calculateWaveY($, s, y, E, q), X = $, P = k + F, B = p ? this.random(d, g) : 1, Y = b * B;
|
|
1666
|
+
let J = 0;
|
|
1667
|
+
l === "tangent" ? J = this.calculateRotation($, s, y, E, q) : l === "random" && (J = this.random(u, h));
|
|
1704
1668
|
const K = Y * 1.5 / 2, lt = Y / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
|
|
1705
1669
|
n.push({
|
|
1706
1670
|
id: M,
|
|
1707
1671
|
x: Math.max(nt, Math.min(X, ot)),
|
|
1708
1672
|
y: Math.max(ht, Math.min(P, dt)),
|
|
1709
|
-
rotation:
|
|
1673
|
+
rotation: J,
|
|
1710
1674
|
scale: B,
|
|
1711
1675
|
baseSize: Y,
|
|
1712
1676
|
zIndex: M + 1
|
|
@@ -1766,21 +1730,21 @@ const wt = 100, Q = 100 / Math.sqrt(3), xt = [
|
|
|
1766
1730
|
// lower-left
|
|
1767
1731
|
[0, 50]
|
|
1768
1732
|
// left
|
|
1769
|
-
],
|
|
1770
|
-
function
|
|
1733
|
+
], Te = xt[1][0] / wt, Le = xt[2][1] / wt;
|
|
1734
|
+
function Me(o) {
|
|
1771
1735
|
return {
|
|
1772
|
-
colStep:
|
|
1773
|
-
rowOffset:
|
|
1736
|
+
colStep: Te * o,
|
|
1737
|
+
rowOffset: Le * o
|
|
1774
1738
|
};
|
|
1775
1739
|
}
|
|
1776
|
-
function
|
|
1777
|
-
const { colStep: r } =
|
|
1740
|
+
function Fe(o, t, i, e, n, s) {
|
|
1741
|
+
const { colStep: r } = Me(s);
|
|
1778
1742
|
return {
|
|
1779
1743
|
px: e + r * o,
|
|
1780
1744
|
py: n + s * (t + o / 2)
|
|
1781
1745
|
};
|
|
1782
1746
|
}
|
|
1783
|
-
const
|
|
1747
|
+
const Oe = [
|
|
1784
1748
|
[1, 0, -1],
|
|
1785
1749
|
[0, 1, -1],
|
|
1786
1750
|
[-1, 1, 0],
|
|
@@ -1788,16 +1752,16 @@ const De = [
|
|
|
1788
1752
|
[0, -1, 1],
|
|
1789
1753
|
[1, -1, 0]
|
|
1790
1754
|
];
|
|
1791
|
-
function
|
|
1755
|
+
function ze(o) {
|
|
1792
1756
|
if (o === 0) return [[0, 0, 0]];
|
|
1793
1757
|
const t = [];
|
|
1794
1758
|
let [i, e, n] = [0, -o, o];
|
|
1795
|
-
for (const [s, r, a] of
|
|
1759
|
+
for (const [s, r, a] of Oe)
|
|
1796
1760
|
for (let c = 0; c < o; c++)
|
|
1797
1761
|
t.push([i, e, n]), i += s, e += r, n += a;
|
|
1798
1762
|
return t;
|
|
1799
1763
|
}
|
|
1800
|
-
class
|
|
1764
|
+
class De {
|
|
1801
1765
|
// imageConfig intentionally not stored — honeycomb forces uniform sizing (rotation/variance
|
|
1802
1766
|
// would break hex tiling). Kept as parameter for interface compatibility.
|
|
1803
1767
|
constructor(t, i = {}) {
|
|
@@ -1808,12 +1772,12 @@ class Pe {
|
|
|
1808
1772
|
...Gt,
|
|
1809
1773
|
...this.config.honeycomb
|
|
1810
1774
|
}.spacing ?? 0, d = l + h;
|
|
1811
|
-
let g = 0,
|
|
1775
|
+
let g = 0, p = 0;
|
|
1812
1776
|
for (; g < t; ) {
|
|
1813
|
-
const
|
|
1814
|
-
for (const [f, m, y] of
|
|
1777
|
+
const b = ze(p);
|
|
1778
|
+
for (const [f, m, y] of b) {
|
|
1815
1779
|
if (g >= t) break;
|
|
1816
|
-
const { px: E, py: v } =
|
|
1780
|
+
const { px: E, py: v } = Fe(f, m, y, a, c, d);
|
|
1817
1781
|
n.push({
|
|
1818
1782
|
id: g,
|
|
1819
1783
|
x: E,
|
|
@@ -1822,15 +1786,15 @@ class Pe {
|
|
|
1822
1786
|
scale: 1,
|
|
1823
1787
|
baseSize: l,
|
|
1824
1788
|
// Inner rings render above outer rings
|
|
1825
|
-
zIndex: Math.max(1, 100 -
|
|
1789
|
+
zIndex: Math.max(1, 100 - p)
|
|
1826
1790
|
}), g++;
|
|
1827
1791
|
}
|
|
1828
|
-
|
|
1792
|
+
p++;
|
|
1829
1793
|
}
|
|
1830
1794
|
return n;
|
|
1831
1795
|
}
|
|
1832
1796
|
}
|
|
1833
|
-
class
|
|
1797
|
+
class $e {
|
|
1834
1798
|
constructor(t) {
|
|
1835
1799
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.placementLayout = this.initLayout();
|
|
1836
1800
|
}
|
|
@@ -1841,19 +1805,19 @@ class _e {
|
|
|
1841
1805
|
initLayout() {
|
|
1842
1806
|
switch (this.config.algorithm) {
|
|
1843
1807
|
case "radial":
|
|
1844
|
-
return new
|
|
1808
|
+
return new ve(this.config, this.imageConfig);
|
|
1845
1809
|
case "grid":
|
|
1846
|
-
return new
|
|
1810
|
+
return new we(this.config, this.imageConfig);
|
|
1847
1811
|
case "spiral":
|
|
1848
|
-
return new
|
|
1812
|
+
return new Ie(this.config, this.imageConfig);
|
|
1849
1813
|
case "cluster":
|
|
1850
|
-
return new
|
|
1814
|
+
return new Ae(this.config, this.imageConfig);
|
|
1851
1815
|
case "wave":
|
|
1852
|
-
return new
|
|
1816
|
+
return new Re(this.config, this.imageConfig);
|
|
1853
1817
|
case "honeycomb":
|
|
1854
|
-
return new
|
|
1818
|
+
return new De(this.config, this.imageConfig);
|
|
1855
1819
|
default:
|
|
1856
|
-
return new
|
|
1820
|
+
return new ye(this.config, this.imageConfig);
|
|
1857
1821
|
}
|
|
1858
1822
|
}
|
|
1859
1823
|
/**
|
|
@@ -1935,8 +1899,8 @@ class _e {
|
|
|
1935
1899
|
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1936
1900
|
if (r !== void 0)
|
|
1937
1901
|
return { height: r };
|
|
1938
|
-
const a = s?.minSize ?? 50, c = s?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t,
|
|
1939
|
-
let m = Math.sqrt(
|
|
1902
|
+
const a = s?.minSize ?? 50, c = s?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, b = h * d * l / i;
|
|
1903
|
+
let m = Math.sqrt(b / 1.4);
|
|
1940
1904
|
m *= u, m = Math.min(m, e);
|
|
1941
1905
|
let y = this.clamp(m, a, c);
|
|
1942
1906
|
if (y === a && m < a) {
|
|
@@ -1975,7 +1939,7 @@ const Lt = {
|
|
|
1975
1939
|
hexagon: "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
|
|
1976
1940
|
octagon: "polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)",
|
|
1977
1941
|
diamond: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
|
|
1978
|
-
},
|
|
1942
|
+
}, Pe = {
|
|
1979
1943
|
// Circle - uses radius in pixels (refHeight of 100px = 50px radius)
|
|
1980
1944
|
circle: {
|
|
1981
1945
|
refHeight: 100,
|
|
@@ -2013,29 +1977,29 @@ const Lt = {
|
|
|
2013
1977
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2014
1978
|
}
|
|
2015
1979
|
};
|
|
2016
|
-
function
|
|
1980
|
+
function _e(o) {
|
|
2017
1981
|
if (o)
|
|
2018
1982
|
return o in Lt ? Lt[o] : o;
|
|
2019
1983
|
}
|
|
2020
|
-
function
|
|
2021
|
-
const e =
|
|
1984
|
+
function Ue(o, t, i) {
|
|
1985
|
+
const e = Pe[o];
|
|
2022
1986
|
if (!e) return "";
|
|
2023
1987
|
const n = t / e.refHeight;
|
|
2024
1988
|
if (o === "circle")
|
|
2025
1989
|
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
2026
|
-
const s = e.points.map(([
|
|
2027
|
-
return `polygon(${e.points.map(([
|
|
2028
|
-
const m = Math.round((
|
|
1990
|
+
const s = e.points.map(([b]) => b), r = e.points.map(([, b]) => b), a = (Math.min(...s) + Math.max(...s)) / 2 * n, c = (Math.min(...r) + Math.max(...r)) / 2 * n, l = (Math.max(...s) - Math.min(...s)) * n, u = (i ?? l) / 2, h = t / 2, d = u - a, g = h - c;
|
|
1991
|
+
return `polygon(${e.points.map(([b, f]) => {
|
|
1992
|
+
const m = Math.round((b * n + d) * 100) / 100, y = Math.round((f * n + g) * 100) / 100;
|
|
2029
1993
|
return `${m}px ${y}px`;
|
|
2030
1994
|
}).join(", ")})`;
|
|
2031
1995
|
}
|
|
2032
|
-
function
|
|
1996
|
+
function He(o) {
|
|
2033
1997
|
return o in mt;
|
|
2034
1998
|
}
|
|
2035
|
-
function
|
|
2036
|
-
return o ?
|
|
1999
|
+
function Ne(o) {
|
|
2000
|
+
return o ? He(o) ? mt[o] : o : mt.md;
|
|
2037
2001
|
}
|
|
2038
|
-
function
|
|
2002
|
+
function ke(o) {
|
|
2039
2003
|
if (!o) return "";
|
|
2040
2004
|
const t = [];
|
|
2041
2005
|
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)
|
|
@@ -2064,8 +2028,8 @@ function it(o, t, i) {
|
|
|
2064
2028
|
const a = o.border || {}, c = { ...a, ...o.borderTop }, l = { ...a, ...o.borderRight }, u = { ...a, ...o.borderBottom }, h = { ...a, ...o.borderLeft };
|
|
2065
2029
|
e.borderTop = tt(c), e.borderRight = tt(l), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
2066
2030
|
} else o.border && (e.border = tt(o.border));
|
|
2067
|
-
o.shadow !== void 0 && (e.boxShadow =
|
|
2068
|
-
const r =
|
|
2031
|
+
o.shadow !== void 0 && (e.boxShadow = Ne(o.shadow));
|
|
2032
|
+
const r = ke(o.filter);
|
|
2069
2033
|
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) {
|
|
2070
2034
|
const a = o.outline.width ?? 0, c = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
2071
2035
|
e.outline = `${a}px ${c} ${l}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
@@ -2074,21 +2038,21 @@ function it(o, t, i) {
|
|
|
2074
2038
|
let a;
|
|
2075
2039
|
const c = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, l = c ? o.clipPath : void 0;
|
|
2076
2040
|
if (l?.mode === "height-relative" && t)
|
|
2077
|
-
a =
|
|
2041
|
+
a = Ue(l.shape, t, i);
|
|
2078
2042
|
else {
|
|
2079
2043
|
const u = c && l ? l.shape : o.clipPath;
|
|
2080
|
-
a =
|
|
2044
|
+
a = _e(u);
|
|
2081
2045
|
}
|
|
2082
2046
|
a && (a === "none" ? e.clipPath = "unset" : (e.clipPath = a, e.overflow = "hidden"));
|
|
2083
2047
|
}
|
|
2084
2048
|
return e;
|
|
2085
2049
|
}
|
|
2086
|
-
function
|
|
2050
|
+
function Be(o, t) {
|
|
2087
2051
|
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);
|
|
2088
2052
|
}
|
|
2089
2053
|
function st(o, t, i, e) {
|
|
2090
2054
|
const n = it(t, i, e);
|
|
2091
|
-
|
|
2055
|
+
Be(o, n);
|
|
2092
2056
|
}
|
|
2093
2057
|
function Pt(o) {
|
|
2094
2058
|
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
@@ -2109,7 +2073,7 @@ const Mt = {
|
|
|
2109
2073
|
UNFOCUSING: 999,
|
|
2110
2074
|
FOCUSING: 1e3
|
|
2111
2075
|
};
|
|
2112
|
-
class
|
|
2076
|
+
class je {
|
|
2113
2077
|
constructor(t, i, e) {
|
|
2114
2078
|
this.state = x.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.onUnfocusComplete = null, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
2115
2079
|
}
|
|
@@ -2248,19 +2212,19 @@ class Ge {
|
|
|
2248
2212
|
rotation: e.rotation,
|
|
2249
2213
|
scale: 1
|
|
2250
2214
|
// No scale - using dimensions
|
|
2251
|
-
}, g = s?.width ?? a,
|
|
2215
|
+
}, g = s?.width ?? a, p = s?.height ?? c, b = this.animateWithDimensions(
|
|
2252
2216
|
t,
|
|
2253
2217
|
d,
|
|
2254
2218
|
u,
|
|
2255
2219
|
g,
|
|
2256
|
-
|
|
2220
|
+
p,
|
|
2257
2221
|
l.width,
|
|
2258
2222
|
l.height,
|
|
2259
2223
|
h
|
|
2260
2224
|
), f = {
|
|
2261
2225
|
id: `focus-${Date.now()}`,
|
|
2262
2226
|
element: t,
|
|
2263
|
-
animation:
|
|
2227
|
+
animation: b,
|
|
2264
2228
|
fromState: d,
|
|
2265
2229
|
toState: u,
|
|
2266
2230
|
startTime: performance.now(),
|
|
@@ -2600,7 +2564,7 @@ class Ge {
|
|
|
2600
2564
|
), this.state = x.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2601
2565
|
}
|
|
2602
2566
|
}
|
|
2603
|
-
const
|
|
2567
|
+
const We = 50, Ge = 0.5, qe = 20, Xe = 0.3, Ye = 150, Je = 30, rt = class rt {
|
|
2604
2568
|
constructor(t, i) {
|
|
2605
2569
|
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);
|
|
2606
2570
|
}
|
|
@@ -2647,11 +2611,11 @@ const qe = 50, Xe = 0.5, Ye = 20, Ve = 0.3, Je = 150, Ke = 30, rt = class rt {
|
|
|
2647
2611
|
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2648
2612
|
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2649
2613
|
const a = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2650
|
-
this.touchState.isHorizontalSwipe = a <=
|
|
2614
|
+
this.touchState.isHorizontalSwipe = a <= Je;
|
|
2651
2615
|
}
|
|
2652
2616
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2653
2617
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = i.clientX;
|
|
2654
|
-
const s = e *
|
|
2618
|
+
const s = e * Xe;
|
|
2655
2619
|
this.callbacks.onDragOffset(s);
|
|
2656
2620
|
}
|
|
2657
2621
|
}
|
|
@@ -2660,7 +2624,7 @@ const qe = 50, Xe = 0.5, Ye = 20, Ve = 0.3, Je = 150, Ke = 30, rt = class rt {
|
|
|
2660
2624
|
this.recentTouchTimestamp = Date.now();
|
|
2661
2625
|
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, s = Math.abs(i);
|
|
2662
2626
|
let r = !1;
|
|
2663
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >=
|
|
2627
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= We || n >= Ge && s >= qe) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2664
2628
|
}
|
|
2665
2629
|
handleTouchCancel(t) {
|
|
2666
2630
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
@@ -2668,7 +2632,7 @@ const qe = 50, Xe = 0.5, Ye = 20, Ve = 0.3, Je = 150, Ke = 30, rt = class rt {
|
|
|
2668
2632
|
};
|
|
2669
2633
|
rt.TOUCH_CLICK_DELAY = 300;
|
|
2670
2634
|
let bt = rt;
|
|
2671
|
-
class
|
|
2635
|
+
class Ve {
|
|
2672
2636
|
constructor(t) {
|
|
2673
2637
|
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)
|
|
2674
2638
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2889,7 +2853,7 @@ class Ze {
|
|
|
2889
2853
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2890
2854
|
}
|
|
2891
2855
|
}
|
|
2892
|
-
class
|
|
2856
|
+
class Ke {
|
|
2893
2857
|
constructor(t) {
|
|
2894
2858
|
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)
|
|
2895
2859
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -3069,7 +3033,7 @@ class Qe {
|
|
|
3069
3033
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
3070
3034
|
}
|
|
3071
3035
|
}
|
|
3072
|
-
class
|
|
3036
|
+
class Ze {
|
|
3073
3037
|
constructor(t) {
|
|
3074
3038
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
3075
3039
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -3126,7 +3090,7 @@ class ti {
|
|
|
3126
3090
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
3127
3091
|
}
|
|
3128
3092
|
}
|
|
3129
|
-
class
|
|
3093
|
+
class Qe {
|
|
3130
3094
|
/**
|
|
3131
3095
|
* Create a new ImageFilter
|
|
3132
3096
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -3163,7 +3127,7 @@ class ei {
|
|
|
3163
3127
|
// isAllowedDate(date: Date): boolean
|
|
3164
3128
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
3165
3129
|
}
|
|
3166
|
-
const
|
|
3130
|
+
const ti = `
|
|
3167
3131
|
.fbn-ic-gallery {
|
|
3168
3132
|
position: relative;
|
|
3169
3133
|
width: 100%;
|
|
@@ -3244,26 +3208,26 @@ const ii = `
|
|
|
3244
3208
|
display: none !important;
|
|
3245
3209
|
}
|
|
3246
3210
|
`;
|
|
3247
|
-
function
|
|
3211
|
+
function ei() {
|
|
3248
3212
|
if (typeof document > "u") return;
|
|
3249
3213
|
const o = "fbn-ic-functional-styles";
|
|
3250
3214
|
if (document.getElementById(o)) return;
|
|
3251
3215
|
const t = document.createElement("style");
|
|
3252
|
-
t.id = o, t.textContent =
|
|
3216
|
+
t.id = o, t.textContent = ti, document.head.appendChild(t);
|
|
3253
3217
|
}
|
|
3254
|
-
let
|
|
3218
|
+
let ii = class {
|
|
3255
3219
|
constructor(t = {}) {
|
|
3256
|
-
this.fullConfig =
|
|
3220
|
+
this.fullConfig = ee(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.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new se(this.fullConfig.animation), this.layoutEngine = new $e({
|
|
3257
3221
|
layout: this.fullConfig.layout,
|
|
3258
3222
|
image: this.fullConfig.image
|
|
3259
|
-
}), this.zoomEngine = new
|
|
3223
|
+
}), this.zoomEngine = new je(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = it(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3260
3224
|
const i = this.fullConfig.animation.entry || C.animation.entry;
|
|
3261
|
-
this.entryAnimationEngine = new
|
|
3225
|
+
this.entryAnimationEngine = new pe(
|
|
3262
3226
|
i,
|
|
3263
3227
|
this.fullConfig.layout.algorithm
|
|
3264
3228
|
);
|
|
3265
3229
|
const e = this.fullConfig.animation.idle;
|
|
3266
|
-
e && e.type !== "none" ? this.idleAnimationEngine = new
|
|
3230
|
+
e && e.type !== "none" ? this.idleAnimationEngine = new be(
|
|
3267
3231
|
e,
|
|
3268
3232
|
i.timing?.duration ?? 600
|
|
3269
3233
|
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((n) => {
|
|
@@ -3285,7 +3249,7 @@ let oi = class {
|
|
|
3285
3249
|
*/
|
|
3286
3250
|
createImageFilter() {
|
|
3287
3251
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
3288
|
-
return new
|
|
3252
|
+
return new Qe(t);
|
|
3289
3253
|
}
|
|
3290
3254
|
/**
|
|
3291
3255
|
* Create appropriate image loader based on config
|
|
@@ -3296,7 +3260,7 @@ let oi = class {
|
|
|
3296
3260
|
if (!t || t.length === 0)
|
|
3297
3261
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.\n Example: imageCloud({ container: 'id', images: ['https://...'] })");
|
|
3298
3262
|
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
3299
|
-
return e.length === 1 ? e[0] : new
|
|
3263
|
+
return e.length === 1 ? e[0] : new Ze({
|
|
3300
3264
|
loaders: e,
|
|
3301
3265
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
3302
3266
|
});
|
|
@@ -3314,14 +3278,14 @@ let oi = class {
|
|
|
3314
3278
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3315
3279
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3316
3280
|
};
|
|
3317
|
-
return new
|
|
3281
|
+
return new Ke(n);
|
|
3318
3282
|
} else if ("googleDrive" in t) {
|
|
3319
3283
|
const e = t.googleDrive, n = {
|
|
3320
3284
|
...e,
|
|
3321
3285
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3322
3286
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3323
3287
|
};
|
|
3324
|
-
return new
|
|
3288
|
+
return new Ve(n);
|
|
3325
3289
|
} else
|
|
3326
3290
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3327
3291
|
}
|
|
@@ -3330,7 +3294,7 @@ let oi = class {
|
|
|
3330
3294
|
*/
|
|
3331
3295
|
async init() {
|
|
3332
3296
|
try {
|
|
3333
|
-
if (
|
|
3297
|
+
if (ei(), this.containerRef)
|
|
3334
3298
|
this.containerEl = this.containerRef;
|
|
3335
3299
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3336
3300
|
throw new Error(`Container "#${this.containerId}" not found. Ensure an element with id="${this.containerId}" exists in the DOM before calling imageCloud().`);
|
|
@@ -3339,7 +3303,7 @@ let oi = class {
|
|
|
3339
3303
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3340
3304
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3341
3305
|
onDragEnd: (t) => {
|
|
3342
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
3306
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ye);
|
|
3343
3307
|
}
|
|
3344
3308
|
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3345
3309
|
} catch (t) {
|
|
@@ -3481,15 +3445,15 @@ let oi = class {
|
|
|
3481
3445
|
}, g = {
|
|
3482
3446
|
x: parseFloat(l.dataset.endX),
|
|
3483
3447
|
y: parseFloat(l.dataset.endY)
|
|
3484
|
-
},
|
|
3485
|
-
|
|
3448
|
+
}, p = parseFloat(l.dataset.imageWidth), b = parseFloat(l.dataset.imageHeight), f = parseFloat(l.dataset.rotation), m = parseFloat(l.dataset.scale), y = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : f, E = l.dataset.startScale ? parseFloat(l.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3449
|
+
fe({
|
|
3486
3450
|
element: l,
|
|
3487
3451
|
startPosition: d,
|
|
3488
3452
|
endPosition: g,
|
|
3489
3453
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3490
3454
|
duration: v.duration,
|
|
3491
|
-
imageWidth:
|
|
3492
|
-
imageHeight:
|
|
3455
|
+
imageWidth: p,
|
|
3456
|
+
imageHeight: b,
|
|
3493
3457
|
rotation: f,
|
|
3494
3458
|
scale: m,
|
|
3495
3459
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
@@ -3573,10 +3537,10 @@ let oi = class {
|
|
|
3573
3537
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3574
3538
|
if (n !== this.loadGeneration)
|
|
3575
3539
|
return;
|
|
3576
|
-
const g = h.naturalWidth / h.naturalHeight,
|
|
3577
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${
|
|
3578
|
-
const
|
|
3579
|
-
|
|
3540
|
+
const g = h.naturalWidth / h.naturalHeight, p = i * g;
|
|
3541
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${p}`), h.style.width = `${p}px`, h.cachedRenderedWidth = p, h.aspectRatio = g, st(h, this.fullConfig.styling?.default, i, p);
|
|
3542
|
+
const b = { x: d.x, y: d.y }, f = { width: p, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3543
|
+
b,
|
|
3580
3544
|
f,
|
|
3581
3545
|
e,
|
|
3582
3546
|
u,
|
|
@@ -3584,27 +3548,27 @@ let oi = class {
|
|
|
3584
3548
|
), y = this.entryAnimationEngine.calculateStartRotation(d.rotation), E = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3585
3549
|
d.rotation,
|
|
3586
3550
|
d.scale,
|
|
3587
|
-
|
|
3551
|
+
p,
|
|
3588
3552
|
i
|
|
3589
3553
|
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3590
3554
|
m,
|
|
3591
|
-
|
|
3555
|
+
b,
|
|
3592
3556
|
d.rotation,
|
|
3593
3557
|
d.scale,
|
|
3594
|
-
|
|
3558
|
+
p,
|
|
3595
3559
|
i,
|
|
3596
3560
|
y,
|
|
3597
3561
|
E
|
|
3598
3562
|
);
|
|
3599
3563
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
3600
|
-
finalPosition:
|
|
3564
|
+
finalPosition: b,
|
|
3601
3565
|
imageSize: f,
|
|
3602
3566
|
left: d.x,
|
|
3603
3567
|
top: d.y,
|
|
3604
3568
|
finalTransform: v,
|
|
3605
|
-
renderedWidth:
|
|
3569
|
+
renderedWidth: p,
|
|
3606
3570
|
renderedHeight: i
|
|
3607
|
-
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || y !== d.rotation || E !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(
|
|
3571
|
+
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || y !== d.rotation || E !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(b.x), h.dataset.endY = String(b.y), h.dataset.imageWidth = String(p), 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(E)), this.displayQueue.push(h);
|
|
3608
3572
|
}, h.onerror = () => r++, h.src = l;
|
|
3609
3573
|
});
|
|
3610
3574
|
}
|
|
@@ -3662,7 +3626,7 @@ let oi = class {
|
|
|
3662
3626
|
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.prevButtonElAutoCreated && this.prevButtonEl && (this.prevButtonEl.remove(), this.prevButtonEl = null), this.nextButtonElAutoCreated && this.nextButtonEl && (this.nextButtonEl.remove(), this.nextButtonEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy(), this.idleAnimationEngine?.stopAll(), this.idleAnimationEngine = null;
|
|
3663
3627
|
}
|
|
3664
3628
|
};
|
|
3665
|
-
const
|
|
3629
|
+
const ai = Nt(
|
|
3666
3630
|
function({ className: t, style: i, ...e }, n) {
|
|
3667
3631
|
const s = It(null), r = It(null);
|
|
3668
3632
|
return kt(n, () => ({
|
|
@@ -3671,7 +3635,7 @@ const ci = Nt(
|
|
|
3671
3635
|
}
|
|
3672
3636
|
})), Bt(() => {
|
|
3673
3637
|
if (!s.current) return;
|
|
3674
|
-
const a = new
|
|
3638
|
+
const a = new ii({
|
|
3675
3639
|
container: s.current,
|
|
3676
3640
|
...e
|
|
3677
3641
|
});
|
|
@@ -3684,6 +3648,6 @@ const ci = Nt(
|
|
|
3684
3648
|
}
|
|
3685
3649
|
);
|
|
3686
3650
|
export {
|
|
3687
|
-
|
|
3651
|
+
ai as ImageCloud
|
|
3688
3652
|
};
|
|
3689
3653
|
//# sourceMappingURL=react.js.map
|