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