@frybynite/image-cloud 0.10.0 → 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/README.md +29 -23
- 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
|
@@ -172,9 +172,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
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
|
}),
|
|
@@ -216,72 +214,41 @@ function Vt(o, t) {
|
|
|
216
214
|
...o.sizing,
|
|
217
215
|
...t.sizing
|
|
218
216
|
}, t.sizing.variance)) {
|
|
219
|
-
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1,
|
|
220
|
-
i.sizing.variance = { min: n, max:
|
|
217
|
+
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1, s = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : o.sizing?.variance?.max ?? 1;
|
|
218
|
+
i.sizing.variance = { min: n, max: s };
|
|
221
219
|
}
|
|
222
220
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
223
221
|
...o.rotation,
|
|
224
222
|
...t.rotation
|
|
225
223
|
}, t.rotation.range)) {
|
|
226
|
-
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15,
|
|
227
|
-
i.rotation.range = { min: n, max:
|
|
224
|
+
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15, s = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : o.rotation?.range?.max ?? 15;
|
|
225
|
+
i.rotation.range = { min: n, max: s };
|
|
228
226
|
}
|
|
229
227
|
return i;
|
|
230
228
|
}
|
|
231
|
-
function Kt(o) {
|
|
232
|
-
const t = o.
|
|
233
|
-
|
|
234
|
-
return {
|
|
235
|
-
rotation: {
|
|
236
|
-
mode: t.enabled ? "random" : "none",
|
|
237
|
-
range: t.range
|
|
238
|
-
}
|
|
239
|
-
};
|
|
240
|
-
}
|
|
241
|
-
function Zt(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 Qt(o = {}) {
|
|
253
|
-
const t = Kt(o), i = Zt(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 Kt(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
|
...zt,
|
|
272
239
|
...o.config?.loaders ?? {}
|
|
273
240
|
}
|
|
274
241
|
}, s = {
|
|
275
|
-
loaders:
|
|
276
|
-
config:
|
|
277
|
-
image: Vt(Ft,
|
|
242
|
+
loaders: i,
|
|
243
|
+
config: n,
|
|
244
|
+
image: Vt(Ft, t),
|
|
278
245
|
layout: { ...C.layout },
|
|
279
246
|
animation: { ...C.animation },
|
|
280
247
|
interaction: { ...C.interaction },
|
|
281
248
|
ui: { ...C.ui },
|
|
282
249
|
styling: Jt(Mt, o.styling)
|
|
283
250
|
};
|
|
284
|
-
o.layout && (s.layout = {
|
|
251
|
+
if (o.layout && (s.layout = {
|
|
285
252
|
...C.layout,
|
|
286
253
|
...o.layout
|
|
287
254
|
}, o.layout.responsive && (s.layout.responsive = {
|
|
@@ -324,36 +291,33 @@ function Qt(o = {}) {
|
|
|
324
291
|
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
325
292
|
...C.interaction.navigation,
|
|
326
293
|
...o.interaction.navigation
|
|
327
|
-
}))
|
|
328
|
-
const c = o.rendering?.ui;
|
|
329
|
-
if (c && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), s.ui = {
|
|
294
|
+
})), s.ui = {
|
|
330
295
|
...C.ui,
|
|
331
|
-
...c,
|
|
332
296
|
...o.ui
|
|
333
297
|
}, s.config.debug = {
|
|
334
298
|
...Ot,
|
|
335
299
|
...o.config?.debug ?? {}
|
|
336
300
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
337
|
-
const
|
|
301
|
+
const r = { shape: "hexagon", mode: "height-relative" };
|
|
338
302
|
s.styling = {
|
|
339
303
|
...s.styling,
|
|
340
|
-
default: { ...s.styling.default, clipPath:
|
|
341
|
-
hover: { ...s.styling.hover, clipPath:
|
|
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
309
|
return s;
|
|
346
310
|
}
|
|
347
|
-
function
|
|
311
|
+
function Zt(o, t) {
|
|
348
312
|
return { ...o ? It[o] : It.playful, ...t };
|
|
349
313
|
}
|
|
350
|
-
function
|
|
314
|
+
function Qt(o, t) {
|
|
351
315
|
return { ...o ? Ct[o] : Ct.gentle, ...t };
|
|
352
316
|
}
|
|
353
|
-
function
|
|
317
|
+
function te(o, t) {
|
|
354
318
|
return { ...o ? At[o] : At.gentle, ...t };
|
|
355
319
|
}
|
|
356
|
-
class
|
|
320
|
+
class ee {
|
|
357
321
|
constructor(t) {
|
|
358
322
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
359
323
|
}
|
|
@@ -378,9 +342,9 @@ class ne {
|
|
|
378
342
|
* @param easing - CSS easing function (optional)
|
|
379
343
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
380
344
|
*/
|
|
381
|
-
animateTransformCancellable(t, i, e, n = null,
|
|
345
|
+
animateTransformCancellable(t, i, e, n = null, s = null) {
|
|
382
346
|
this.cancelAllAnimations(t);
|
|
383
|
-
const r = n ?? this.config.duration,
|
|
347
|
+
const r = n ?? this.config.duration, a = s ?? this.config.easing.default, c = this.buildTransformString(i), l = this.buildTransformString(e);
|
|
384
348
|
t.style.transition = "none";
|
|
385
349
|
const u = t.animate(
|
|
386
350
|
[
|
|
@@ -389,7 +353,7 @@ class ne {
|
|
|
389
353
|
],
|
|
390
354
|
{
|
|
391
355
|
duration: r,
|
|
392
|
-
easing:
|
|
356
|
+
easing: a,
|
|
393
357
|
fill: "forwards"
|
|
394
358
|
// Keep final state after animation
|
|
395
359
|
}
|
|
@@ -449,8 +413,8 @@ class ne {
|
|
|
449
413
|
const e = getComputedStyle(t).transform;
|
|
450
414
|
if (e === "none" || !e)
|
|
451
415
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
452
|
-
const n = new DOMMatrix(e),
|
|
453
|
-
return { x:
|
|
416
|
+
const n = new DOMMatrix(e), s = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), a = n.e, c = n.f;
|
|
417
|
+
return { x: a, y: c, rotation: r, scale: s };
|
|
454
418
|
}
|
|
455
419
|
/**
|
|
456
420
|
* Check if an element has an active animation
|
|
@@ -477,10 +441,10 @@ class ne {
|
|
|
477
441
|
* @returns Promise that resolves when animation completes
|
|
478
442
|
*/
|
|
479
443
|
animateTransform(t, i, e = null, n = null) {
|
|
480
|
-
return new Promise((
|
|
481
|
-
const r = e ?? this.config.duration,
|
|
482
|
-
t.style.transition = `transform ${r}ms ${
|
|
483
|
-
|
|
444
|
+
return new Promise((s) => {
|
|
445
|
+
const r = e ?? this.config.duration, a = n ?? this.config.easing.default;
|
|
446
|
+
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
447
|
+
s();
|
|
484
448
|
}, r);
|
|
485
449
|
});
|
|
486
450
|
}
|
|
@@ -512,46 +476,46 @@ class ne {
|
|
|
512
476
|
function V(o, t, i) {
|
|
513
477
|
return o + (t - o) * i;
|
|
514
478
|
}
|
|
515
|
-
function
|
|
516
|
-
const { overshoot: n, bounces:
|
|
517
|
-
let u = 0, h = 0, d = 1, g = n,
|
|
479
|
+
function ie(o, t, i, e) {
|
|
480
|
+
const { overshoot: n, bounces: s, decayRatio: r } = e, a = i.x - t.x, c = i.y - t.y, l = ne(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, x) => y.time > h && x > 0 && l[x - 1].isOvershoot
|
|
531
495
|
)?.overshoot || g);
|
|
532
|
-
u = V(m, 1, at(
|
|
496
|
+
u = V(m, 1, at(b));
|
|
533
497
|
}
|
|
534
498
|
return {
|
|
535
|
-
x: t.x +
|
|
499
|
+
x: t.x + a * u,
|
|
536
500
|
y: t.y + c * u
|
|
537
501
|
};
|
|
538
502
|
}
|
|
539
|
-
function
|
|
503
|
+
function ne(o, t) {
|
|
540
504
|
const i = [];
|
|
541
505
|
let e = 0.6;
|
|
542
506
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
543
507
|
let n = 0.15;
|
|
544
508
|
const r = 0.4 / (o * 2);
|
|
545
|
-
for (let
|
|
509
|
+
for (let a = 0; a < o; a++)
|
|
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
|
|
550
|
-
const { stiffness: n, damping:
|
|
513
|
+
function oe(o, t, i, e) {
|
|
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,8 +523,8 @@ function ae(o, t, i, e) {
|
|
|
559
523
|
y: t.y + l * d
|
|
560
524
|
};
|
|
561
525
|
}
|
|
562
|
-
function
|
|
563
|
-
const { amplitude: n, frequency:
|
|
526
|
+
function se(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 = ae(o);
|
|
564
528
|
return {
|
|
565
529
|
x: V(t.x, i.x, m) + f * d,
|
|
566
530
|
y: V(t.y, i.y, m) + f * g
|
|
@@ -569,81 +533,81 @@ function re(o, t, i, e) {
|
|
|
569
533
|
function at(o) {
|
|
570
534
|
return 1 - (1 - o) * (1 - o);
|
|
571
535
|
}
|
|
572
|
-
function
|
|
536
|
+
function ae(o) {
|
|
573
537
|
return 1 - Math.pow(1 - o, 3);
|
|
574
538
|
}
|
|
575
|
-
function
|
|
576
|
-
const { amplitude: e, frequency: n, decay:
|
|
539
|
+
function re(o, t, i) {
|
|
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
|
|
580
|
-
const { overshoot: e, bounces: n } = i,
|
|
581
|
-
|
|
543
|
+
function ce(o, t, i) {
|
|
544
|
+
const { overshoot: e, bounces: n } = i, s = [];
|
|
545
|
+
s.push({ time: 0.5, scale: e });
|
|
582
546
|
let r = e;
|
|
583
|
-
const
|
|
547
|
+
const a = 0.5, l = 0.5 / (n * 2);
|
|
584
548
|
let u = 0.5;
|
|
585
549
|
for (let d = 0; d < n; d++) {
|
|
586
|
-
const g = 1 - (r - 1) *
|
|
587
|
-
u += l,
|
|
550
|
+
const g = 1 - (r - 1) * a;
|
|
551
|
+
u += l, s.push({ time: u, scale: g }), r = 1 + (r - 1) * a * a, u += l, d < n - 1 && s.push({ time: u, scale: r });
|
|
588
552
|
}
|
|
589
|
-
|
|
553
|
+
s.push({ time: 1, scale: 1 });
|
|
590
554
|
let h = 1;
|
|
591
|
-
for (let d = 0; d <
|
|
592
|
-
if (o <=
|
|
593
|
-
const g = d === 0 ? 0 :
|
|
594
|
-
h =
|
|
555
|
+
for (let d = 0; d < s.length; d++)
|
|
556
|
+
if (o <= s[d].time) {
|
|
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 le(o) {
|
|
600
564
|
const {
|
|
601
565
|
element: t,
|
|
602
566
|
startPosition: i,
|
|
603
567
|
endPosition: e,
|
|
604
568
|
pathConfig: n,
|
|
605
|
-
duration:
|
|
569
|
+
duration: s,
|
|
606
570
|
imageWidth: r,
|
|
607
|
-
imageHeight:
|
|
571
|
+
imageHeight: a,
|
|
608
572
|
rotation: c,
|
|
609
573
|
scale: l,
|
|
610
574
|
onComplete: u,
|
|
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 }, x = f || m, v = p !== void 0 && p !== l, S = g?.mode === "pop", w = g?.pop || { overshoot: 1.2, bounces: 1 };
|
|
580
|
+
if (b === "linear" && !x && !(v || S)) {
|
|
617
581
|
u && u();
|
|
618
582
|
return;
|
|
619
583
|
}
|
|
620
|
-
const z = performance.now(), L = -r / 2, _ = -
|
|
584
|
+
const z = performance.now(), L = -r / 2, _ = -a / 2;
|
|
621
585
|
function O(H) {
|
|
622
|
-
const N = H - z, A = Math.min(N /
|
|
586
|
+
const N = H - z, 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 = Zt(
|
|
627
591
|
n.bouncePreset,
|
|
628
592
|
n.bounce
|
|
629
593
|
);
|
|
630
|
-
D =
|
|
594
|
+
D = ie(A, i, e, k);
|
|
631
595
|
break;
|
|
632
596
|
}
|
|
633
597
|
case "elastic": {
|
|
634
|
-
const k =
|
|
598
|
+
const k = Qt(
|
|
635
599
|
n.elasticPreset,
|
|
636
600
|
n.elastic
|
|
637
601
|
);
|
|
638
|
-
D =
|
|
602
|
+
D = oe(A, i, e, k);
|
|
639
603
|
break;
|
|
640
604
|
}
|
|
641
605
|
case "wave": {
|
|
642
|
-
const k =
|
|
606
|
+
const k = te(
|
|
643
607
|
n.wavePreset,
|
|
644
608
|
n.wave
|
|
645
609
|
);
|
|
646
|
-
D =
|
|
610
|
+
D = se(A, i, e, k);
|
|
647
611
|
break;
|
|
648
612
|
}
|
|
649
613
|
default:
|
|
@@ -654,16 +618,16 @@ function de(o) {
|
|
|
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 = re(A, c, y) : f ? M = V(d, c, A) : M = c;
|
|
658
622
|
let R;
|
|
659
|
-
S ? R =
|
|
623
|
+
S ? R = ce(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(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
|
|
660
624
|
}
|
|
661
625
|
requestAnimationFrame(O);
|
|
662
626
|
}
|
|
663
|
-
function
|
|
627
|
+
function he(o) {
|
|
664
628
|
return o === "bounce" || o === "elastic" || o === "wave";
|
|
665
629
|
}
|
|
666
|
-
const
|
|
630
|
+
const de = {
|
|
667
631
|
radial: "center",
|
|
668
632
|
spiral: "center",
|
|
669
633
|
grid: "top",
|
|
@@ -672,7 +636,7 @@ const fe = {
|
|
|
672
636
|
wave: "left",
|
|
673
637
|
honeycomb: "center"
|
|
674
638
|
};
|
|
675
|
-
class
|
|
639
|
+
class ue {
|
|
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 || xt;
|
|
678
642
|
}
|
|
@@ -680,77 +644,77 @@ class ge {
|
|
|
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 : de[this.layoutAlgorithm] || "nearest-edge";
|
|
684
648
|
}
|
|
685
649
|
/**
|
|
686
650
|
* Calculate the starting position for an image's entry animation
|
|
687
651
|
*/
|
|
688
|
-
calculateStartPosition(t, i, e, n,
|
|
689
|
-
const r = this.resolvedStartPosition,
|
|
652
|
+
calculateStartPosition(t, i, e, n, s) {
|
|
653
|
+
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
690
654
|
switch (r) {
|
|
691
655
|
case "nearest-edge":
|
|
692
|
-
return this.calculateNearestEdge(t, i, e,
|
|
656
|
+
return this.calculateNearestEdge(t, i, e, a);
|
|
693
657
|
case "top":
|
|
694
|
-
return this.calculateEdgePosition("top", t, i, e,
|
|
658
|
+
return this.calculateEdgePosition("top", t, i, e, a);
|
|
695
659
|
case "bottom":
|
|
696
|
-
return this.calculateEdgePosition("bottom", t, i, e,
|
|
660
|
+
return this.calculateEdgePosition("bottom", t, i, e, a);
|
|
697
661
|
case "left":
|
|
698
|
-
return this.calculateEdgePosition("left", t, i, e,
|
|
662
|
+
return this.calculateEdgePosition("left", t, i, e, a);
|
|
699
663
|
case "right":
|
|
700
|
-
return this.calculateEdgePosition("right", t, i, e,
|
|
664
|
+
return this.calculateEdgePosition("right", t, i, e, a);
|
|
701
665
|
case "center":
|
|
702
666
|
return this.calculateCenterPosition(e, t, i);
|
|
703
667
|
case "random-edge":
|
|
704
|
-
return this.calculateRandomEdge(t, i, e,
|
|
668
|
+
return this.calculateRandomEdge(t, i, e, a);
|
|
705
669
|
case "circular":
|
|
706
670
|
return this.calculateCircularPosition(
|
|
707
671
|
t,
|
|
708
672
|
i,
|
|
709
673
|
e,
|
|
710
674
|
n,
|
|
711
|
-
|
|
675
|
+
s
|
|
712
676
|
);
|
|
713
677
|
default:
|
|
714
|
-
return this.calculateNearestEdge(t, i, e,
|
|
678
|
+
return this.calculateNearestEdge(t, i, e, a);
|
|
715
679
|
}
|
|
716
680
|
}
|
|
717
681
|
/**
|
|
718
682
|
* Calculate start position from the nearest edge (current default behavior)
|
|
719
683
|
*/
|
|
720
684
|
calculateNearestEdge(t, i, e, n) {
|
|
721
|
-
const
|
|
685
|
+
const s = t.x, r = t.y, a = s, c = e.width - s, l = r, u = e.height - r, h = Math.min(a, c, l, u);
|
|
722
686
|
let d = t.x, g = t.y;
|
|
723
|
-
return h ===
|
|
687
|
+
return h === a ? d = -(i.width + n) : h === c ? d = e.width + n : h === l ? g = -(i.height + n) : g = e.height + n, { x: d, y: g };
|
|
724
688
|
}
|
|
725
689
|
/**
|
|
726
690
|
* Calculate start position from a specific edge
|
|
727
691
|
*/
|
|
728
|
-
calculateEdgePosition(t, i, e, n,
|
|
729
|
-
let r = i.x,
|
|
692
|
+
calculateEdgePosition(t, i, e, n, s) {
|
|
693
|
+
let r = i.x, a = i.y;
|
|
730
694
|
switch (t) {
|
|
731
695
|
case "top":
|
|
732
|
-
|
|
696
|
+
a = -(e.height + s);
|
|
733
697
|
break;
|
|
734
698
|
case "bottom":
|
|
735
|
-
|
|
699
|
+
a = n.height + s;
|
|
736
700
|
break;
|
|
737
701
|
case "left":
|
|
738
|
-
r = -(e.width +
|
|
702
|
+
r = -(e.width + s);
|
|
739
703
|
break;
|
|
740
704
|
case "right":
|
|
741
|
-
r = n.width +
|
|
705
|
+
r = n.width + s;
|
|
742
706
|
break;
|
|
743
707
|
}
|
|
744
|
-
return { x: r, y:
|
|
708
|
+
return { x: r, y: a };
|
|
745
709
|
}
|
|
746
710
|
/**
|
|
747
711
|
* Calculate start position from center with scale animation
|
|
748
712
|
*/
|
|
749
713
|
calculateCenterPosition(t, i, e) {
|
|
750
|
-
const n = t.width / 2,
|
|
714
|
+
const n = t.width / 2, s = t.height / 2;
|
|
751
715
|
return {
|
|
752
716
|
x: n,
|
|
753
|
-
y:
|
|
717
|
+
y: s,
|
|
754
718
|
useScale: !0
|
|
755
719
|
// Signal to use scale animation from 0
|
|
756
720
|
};
|
|
@@ -759,27 +723,27 @@ class ge {
|
|
|
759
723
|
* Calculate start position from a random edge
|
|
760
724
|
*/
|
|
761
725
|
calculateRandomEdge(t, i, e, n) {
|
|
762
|
-
const
|
|
726
|
+
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
763
727
|
return this.calculateEdgePosition(r, t, i, e, n);
|
|
764
728
|
}
|
|
765
729
|
/**
|
|
766
730
|
* Calculate start position on a circle around the container
|
|
767
731
|
*/
|
|
768
|
-
calculateCircularPosition(t, i, e, n,
|
|
769
|
-
const r = this.config.start.circular || {},
|
|
732
|
+
calculateCircularPosition(t, i, e, n, s) {
|
|
733
|
+
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
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
|
-
|
|
781
|
-
const h = e.width / 2, d = e.height / 2, g = h + Math.cos(u) * c,
|
|
782
|
-
return { x: g, y:
|
|
744
|
+
a === "even" ? u = n / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
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
|
|
@@ -798,9 +762,9 @@ class ge {
|
|
|
798
762
|
* Build a CSS transform string for the start position
|
|
799
763
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
800
764
|
*/
|
|
801
|
-
buildStartTransform(t, i, e, n,
|
|
802
|
-
const l = t.x - i.x, u = t.y - i.y, h =
|
|
803
|
-
return t.useScale ? `${
|
|
765
|
+
buildStartTransform(t, i, e, n, s, r, a, c) {
|
|
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
|
|
@@ -808,8 +772,8 @@ class ge {
|
|
|
808
772
|
*/
|
|
809
773
|
buildFinalTransform(t, i, e, n) {
|
|
810
774
|
if (e !== void 0 && n !== void 0) {
|
|
811
|
-
const
|
|
812
|
-
return `translate(${
|
|
775
|
+
const s = -e / 2, r = -n / 2;
|
|
776
|
+
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
813
777
|
}
|
|
814
778
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
815
779
|
}
|
|
@@ -825,7 +789,7 @@ class ge {
|
|
|
825
789
|
* Check if the current path type requires JavaScript animation
|
|
826
790
|
*/
|
|
827
791
|
requiresJSAnimation() {
|
|
828
|
-
return
|
|
792
|
+
return he(this.pathConfig.type);
|
|
829
793
|
}
|
|
830
794
|
/**
|
|
831
795
|
* Get the path configuration
|
|
@@ -927,7 +891,7 @@ class ge {
|
|
|
927
891
|
amplitude: 15,
|
|
928
892
|
frequency: 3,
|
|
929
893
|
decay: !0
|
|
930
|
-
}, { amplitude: n, frequency:
|
|
894
|
+
}, { amplitude: n, frequency: s, decay: r } = e, a = Math.sin(t * s * Math.PI * 2), c = r ? Math.pow(1 - t, 2) : 1, l = n * a * c;
|
|
931
895
|
return i + l;
|
|
932
896
|
}
|
|
933
897
|
/**
|
|
@@ -984,15 +948,15 @@ class ge {
|
|
|
984
948
|
const e = this.scaleConfig.pop || {
|
|
985
949
|
overshoot: 1.2,
|
|
986
950
|
bounces: 1
|
|
987
|
-
}, { overshoot: n, bounces:
|
|
988
|
-
let
|
|
951
|
+
}, { overshoot: n, bounces: s } = e, r = this.generateScaleBounceKeyframes(s, n);
|
|
952
|
+
let a = i;
|
|
989
953
|
for (let c = 0; c < r.length; c++)
|
|
990
954
|
if (t <= r[c].time) {
|
|
991
955
|
const l = c === 0 ? 0 : r[c - 1].time, u = c === 0 ? i : r[c - 1].scale, h = (t - l) / (r[c].time - l), d = this.easeOutQuad(h);
|
|
992
|
-
|
|
956
|
+
a = u + (r[c].scale - u) * d;
|
|
993
957
|
break;
|
|
994
958
|
}
|
|
995
|
-
return
|
|
959
|
+
return a * i;
|
|
996
960
|
}
|
|
997
961
|
/**
|
|
998
962
|
* Generate keyframes for scale bounce animation
|
|
@@ -1001,11 +965,11 @@ class ge {
|
|
|
1001
965
|
const e = [];
|
|
1002
966
|
e.push({ time: 0.5, scale: i });
|
|
1003
967
|
let n = i;
|
|
1004
|
-
const
|
|
968
|
+
const s = 0.5, a = 0.5 / (t * 2);
|
|
1005
969
|
let c = 0.5;
|
|
1006
970
|
for (let l = 0; l < t; l++) {
|
|
1007
|
-
const u = 1 - (n - 1) *
|
|
1008
|
-
c +=
|
|
971
|
+
const u = 1 - (n - 1) * s;
|
|
972
|
+
c += a, e.push({ time: c, scale: u }), n = 1 + (n - 1) * s * s, c += a, l < t - 1 && e.push({ time: c, scale: n });
|
|
1009
973
|
}
|
|
1010
974
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1011
975
|
}
|
|
@@ -1016,7 +980,7 @@ class ge {
|
|
|
1016
980
|
return 1 - (1 - t) * (1 - t);
|
|
1017
981
|
}
|
|
1018
982
|
}
|
|
1019
|
-
class
|
|
983
|
+
class fe {
|
|
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
|
}
|
|
@@ -1026,7 +990,7 @@ class me {
|
|
|
1026
990
|
*/
|
|
1027
991
|
register(t, i, e, n) {
|
|
1028
992
|
if (this.entries.has(t)) return;
|
|
1029
|
-
const
|
|
993
|
+
const s = n ?? this.entryDurationMs, r = this.config.startDelay ?? s, a = {
|
|
1030
994
|
element: t,
|
|
1031
995
|
index: i,
|
|
1032
996
|
totalImages: e,
|
|
@@ -1037,8 +1001,8 @@ class me {
|
|
|
1037
1001
|
stopped: !1,
|
|
1038
1002
|
startTimer: null
|
|
1039
1003
|
};
|
|
1040
|
-
this.entries.set(t,
|
|
1041
|
-
|
|
1004
|
+
this.entries.set(t, a), a.startTimer = setTimeout(() => {
|
|
1005
|
+
a.startTimer = null, !a.stopped && !a.paused && this._startAnimation(a);
|
|
1042
1006
|
}, r);
|
|
1043
1007
|
}
|
|
1044
1008
|
/**
|
|
@@ -1142,8 +1106,8 @@ class me {
|
|
|
1142
1106
|
}
|
|
1143
1107
|
_startBlink(t) {
|
|
1144
1108
|
const i = { ...Xt, ...this.config.blink }, e = -(Math.random() * i.speed), n = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1145
|
-
let
|
|
1146
|
-
i.style === "fade" ? (
|
|
1109
|
+
let s, r;
|
|
1110
|
+
i.style === "fade" ? (s = [
|
|
1147
1111
|
{ opacity: n, offset: 0 },
|
|
1148
1112
|
{ opacity: 0, offset: 0.5 },
|
|
1149
1113
|
{ opacity: n, offset: 1 }
|
|
@@ -1152,7 +1116,7 @@ class me {
|
|
|
1152
1116
|
delay: e,
|
|
1153
1117
|
iterations: 1 / 0,
|
|
1154
1118
|
easing: "ease-in-out"
|
|
1155
|
-
}) : (
|
|
1119
|
+
}) : (s = [
|
|
1156
1120
|
{ opacity: n, offset: 0 },
|
|
1157
1121
|
{ opacity: n, offset: i.onRatio },
|
|
1158
1122
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
@@ -1162,7 +1126,7 @@ class me {
|
|
|
1162
1126
|
duration: i.speed,
|
|
1163
1127
|
delay: e,
|
|
1164
1128
|
iterations: 1 / 0
|
|
1165
|
-
}), t.blinkAnimation = t.element.animate(
|
|
1129
|
+
}), t.blinkAnimation = t.element.animate(s, r);
|
|
1166
1130
|
}
|
|
1167
1131
|
_startSpin(t) {
|
|
1168
1132
|
const i = { ...Yt, ...this.config.spin }, e = i.direction === "clockwise" ? 360 : -360;
|
|
@@ -1202,7 +1166,7 @@ class me {
|
|
|
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 ge {
|
|
1206
1170
|
constructor(t, i = {}) {
|
|
1207
1171
|
this.config = t, this.imageConfig = i;
|
|
1208
1172
|
}
|
|
@@ -1214,9 +1178,9 @@ class pe {
|
|
|
1214
1178
|
* @returns Array of layout objects with position, rotation, scale
|
|
1215
1179
|
*/
|
|
1216
1180
|
generate(t, i, e = {}) {
|
|
1217
|
-
const n = [], { width:
|
|
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, x = 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), z = this.random(S, x), L = l === "random" ? this.random(u, h) : 0, _ =
|
|
1183
|
+
const I = this.random(v, y), z = this.random(S, x), L = l === "random" ? this.random(u, h) : 0, _ = p ? this.random(d, g) : 1, O = c * _, H = {
|
|
1220
1184
|
id: w,
|
|
1221
1185
|
x: I,
|
|
1222
1186
|
y: z,
|
|
@@ -1238,7 +1202,7 @@ class pe {
|
|
|
1238
1202
|
return Math.random() * (i - t) + t;
|
|
1239
1203
|
}
|
|
1240
1204
|
}
|
|
1241
|
-
class
|
|
1205
|
+
class me {
|
|
1242
1206
|
constructor(t, i = {}) {
|
|
1243
1207
|
this.config = t, this.imageConfig = i;
|
|
1244
1208
|
}
|
|
@@ -1250,10 +1214,10 @@ class be {
|
|
|
1250
1214
|
* @returns Array of layout objects with position, rotation, scale
|
|
1251
1215
|
*/
|
|
1252
1216
|
generate(t, i, e = {}) {
|
|
1253
|
-
const n = [], { width:
|
|
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
|
...Ht,
|
|
1255
1219
|
...this.config.radial
|
|
1256
|
-
}, f = e.fixedHeight ??
|
|
1220
|
+
}, f = e.fixedHeight ?? a, m = s / 2, y = r / 2, x = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, S = Math.max(f * 0.8, Math.min(
|
|
1257
1221
|
m - v - f / 2,
|
|
1258
1222
|
y - v - f / 2
|
|
1259
1223
|
));
|
|
@@ -1273,7 +1237,7 @@ class be {
|
|
|
1273
1237
|
}
|
|
1274
1238
|
let w = 1, I = 1;
|
|
1275
1239
|
for (; w < t; ) {
|
|
1276
|
-
const z = I / x, L =
|
|
1240
|
+
const z = I / x, L = p > 0 ? 1 - z * p * 0.5 : 1, _ = Math.max(f * 0.8, S / x * 1.5 / b.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), A = this.estimateWidth(f), D = Math.floor(N / (A * 0.7));
|
|
1277
1241
|
if (D === 0) {
|
|
1278
1242
|
I++;
|
|
1279
1243
|
continue;
|
|
@@ -1283,7 +1247,7 @@ class be {
|
|
|
1283
1247
|
const R = M * W + U, k = g ? this.random(h, d) : 1, q = L * k, T = f * q;
|
|
1284
1248
|
let $ = m + Math.cos(R) * H, F = y + Math.sin(R) * O;
|
|
1285
1249
|
const P = T * 1.5 / 2, B = T / 2;
|
|
1286
|
-
$ - P < v ? $ = v + P : $ + P >
|
|
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;
|
|
1288
1252
|
n.push({
|
|
1289
1253
|
id: w,
|
|
@@ -1319,7 +1283,7 @@ class be {
|
|
|
1319
1283
|
return Math.random() * (i - t) + t;
|
|
1320
1284
|
}
|
|
1321
1285
|
}
|
|
1322
|
-
const
|
|
1286
|
+
const pe = {
|
|
1323
1287
|
columns: "auto",
|
|
1324
1288
|
rows: "auto",
|
|
1325
1289
|
stagger: "none",
|
|
@@ -1347,7 +1311,7 @@ const ye = {
|
|
|
1347
1311
|
{ x: 0, y: 1 }
|
|
1348
1312
|
// down
|
|
1349
1313
|
];
|
|
1350
|
-
class
|
|
1314
|
+
class be {
|
|
1351
1315
|
constructor(t, i = {}) {
|
|
1352
1316
|
this.config = t, this.imageConfig = i;
|
|
1353
1317
|
}
|
|
@@ -1359,16 +1323,16 @@ class ve {
|
|
|
1359
1323
|
* @returns Array of layout objects with position, rotation, scale
|
|
1360
1324
|
*/
|
|
1361
1325
|
generate(t, i, e = {}) {
|
|
1362
|
-
const n = [], { width:
|
|
1326
|
+
const n = [], { width: s, height: r } = i, a = { ...pe, ...this.config.grid }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, 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
|
-
|
|
1368
|
-
), y =
|
|
1331
|
+
a
|
|
1332
|
+
), y = a.stagger === "row", x = a.stagger === "column", v = y ? f + 0.5 : f, S = x ? m + 0.5 : m, w = (p - a.gap * (f - 1)) / v, I = (b - a.gap * (m - 1)) / S, z = y ? w / 2 : 0, L = x ? I / 2 : 0, _ = 1 + a.overlap, O = Math.min(w, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = f * w + (f - 1) * a.gap + z, 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
|
-
gridConfigColumns:
|
|
1371
|
-
gridConfigRows:
|
|
1334
|
+
gridConfigColumns: a.columns,
|
|
1335
|
+
gridConfigRows: a.rows,
|
|
1372
1336
|
columns: f,
|
|
1373
1337
|
rows: m,
|
|
1374
1338
|
cellCount: U,
|
|
@@ -1376,38 +1340,38 @@ class ve {
|
|
|
1376
1340
|
imageCount: t,
|
|
1377
1341
|
isOverflowMode: R
|
|
1378
1342
|
});
|
|
1379
|
-
const k = R ? new Array(U).fill(0) : [], q = Math.min(w, I) *
|
|
1343
|
+
const k = R ? new Array(U).fill(0) : [], q = Math.min(w, I) * a.overflowOffset;
|
|
1380
1344
|
for (let T = 0; T < t; T++) {
|
|
1381
1345
|
let $, F, X = 0;
|
|
1382
1346
|
if (R && T >= U) {
|
|
1383
1347
|
const G = T - U, j = G % U;
|
|
1384
|
-
X = Math.floor(G / U) + 1, k[j]++,
|
|
1348
|
+
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));
|
|
1385
1349
|
} else
|
|
1386
|
-
|
|
1387
|
-
let P = D + $ * (w +
|
|
1388
|
-
if (
|
|
1350
|
+
a.fillDirection === "row" ? ($ = T % f, F = Math.floor(T / f)) : (F = T % m, $ = Math.floor(T / m));
|
|
1351
|
+
let P = D + $ * (w + a.gap) + w / 2, B = W + F * (I + a.gap) + I / 2;
|
|
1352
|
+
if (a.stagger === "row" && F % 2 === 1 ? P += w / 2 : a.stagger === "column" && $ % 2 === 1 && (B += I / 2), X > 0) {
|
|
1389
1353
|
const G = (X - 1) % Rt.length, j = Rt[G];
|
|
1390
1354
|
P += j.x * q, B += j.y * q;
|
|
1391
1355
|
}
|
|
1392
|
-
if (
|
|
1393
|
-
const G = w / 2 *
|
|
1356
|
+
if (a.jitter > 0) {
|
|
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
1360
|
let Y = P, J = B;
|
|
1397
|
-
if (!R &&
|
|
1361
|
+
if (!R && a.fillDirection === "row") {
|
|
1398
1362
|
const G = t % f || f;
|
|
1399
1363
|
if (F === Math.floor((t - 1) / f) && G < f) {
|
|
1400
|
-
const St = G * w + (G - 1) *
|
|
1364
|
+
const St = G * w + (G - 1) * a.gap;
|
|
1401
1365
|
let gt = 0;
|
|
1402
|
-
|
|
1366
|
+
a.alignment === "center" ? gt = (N - St) / 2 : a.alignment === "end" && (gt = N - St), Y += gt;
|
|
1403
1367
|
}
|
|
1404
1368
|
}
|
|
1405
|
-
const ct = g ? this.random(h, d) : 1, K = H * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt =
|
|
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
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;
|
|
1410
|
-
|
|
1374
|
+
a.jitter > 0 ? ut = this.random(G * a.jitter, j * a.jitter) : ut = this.random(G, j);
|
|
1411
1375
|
}
|
|
1412
1376
|
let ft;
|
|
1413
1377
|
R && X > 0 ? ft = 50 - X : ft = R ? 100 + T : T + 1, n.push({
|
|
@@ -1425,20 +1389,20 @@ class ve {
|
|
|
1425
1389
|
/**
|
|
1426
1390
|
* Calculate optimal grid dimensions based on image count and container
|
|
1427
1391
|
*/
|
|
1428
|
-
calculateGridDimensions(t, i, e, n,
|
|
1429
|
-
let r,
|
|
1430
|
-
if (
|
|
1431
|
-
r =
|
|
1432
|
-
else if (
|
|
1433
|
-
r =
|
|
1434
|
-
else if (
|
|
1435
|
-
|
|
1392
|
+
calculateGridDimensions(t, i, e, n, s) {
|
|
1393
|
+
let r, a;
|
|
1394
|
+
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1395
|
+
r = s.columns, a = s.rows;
|
|
1396
|
+
else if (s.columns !== "auto")
|
|
1397
|
+
r = s.columns, a = Math.ceil(t / r);
|
|
1398
|
+
else if (s.rows !== "auto")
|
|
1399
|
+
a = s.rows, r = Math.ceil(t / a);
|
|
1436
1400
|
else {
|
|
1437
1401
|
const c = i / e;
|
|
1438
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t * c / 1.4))),
|
|
1402
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * c / 1.4))), a = Math.ceil(t / r); r > 1 && (r - 1) * a >= t; )
|
|
1439
1403
|
r--;
|
|
1440
1404
|
}
|
|
1441
|
-
return { columns: Math.max(1, r), rows: Math.max(1,
|
|
1405
|
+
return { columns: Math.max(1, r), rows: Math.max(1, a) };
|
|
1442
1406
|
}
|
|
1443
1407
|
/**
|
|
1444
1408
|
* Utility: Generate random number between min and max
|
|
@@ -1447,14 +1411,14 @@ class ve {
|
|
|
1447
1411
|
return Math.random() * (i - t) + t;
|
|
1448
1412
|
}
|
|
1449
1413
|
}
|
|
1450
|
-
const
|
|
1414
|
+
const ye = Math.PI * (3 - Math.sqrt(5)), ve = {
|
|
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 xe {
|
|
1458
1422
|
constructor(t, i = {}) {
|
|
1459
1423
|
this.config = t, this.imageConfig = i;
|
|
1460
1424
|
}
|
|
@@ -1466,27 +1430,27 @@ class Ee {
|
|
|
1466
1430
|
* @returns Array of layout objects with position, rotation, scale
|
|
1467
1431
|
*/
|
|
1468
1432
|
generate(t, i, e = {}) {
|
|
1469
|
-
const n = [], { width:
|
|
1433
|
+
const n = [], { width: s, height: r } = i, a = { ...ve, ...this.config.spiral }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, 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, x = Math.min(
|
|
1470
1434
|
m - c - l / 2,
|
|
1471
1435
|
y - c - l / 2
|
|
1472
|
-
), v =
|
|
1436
|
+
), v = a.direction === "clockwise" ? -1 : 1;
|
|
1473
1437
|
for (let S = 0; S < t; S++) {
|
|
1474
1438
|
let w, I;
|
|
1475
|
-
if (
|
|
1476
|
-
w = S *
|
|
1477
|
-
else if (
|
|
1478
|
-
const P = S * 0.5 *
|
|
1479
|
-
w = P * v +
|
|
1439
|
+
if (a.spiralType === "golden")
|
|
1440
|
+
w = S * ye * v + a.startAngle, I = this.calculateGoldenRadius(S, t, x, a.tightness);
|
|
1441
|
+
else if (a.spiralType === "archimedean") {
|
|
1442
|
+
const P = S * 0.5 * a.tightness;
|
|
1443
|
+
w = P * v + a.startAngle, I = this.calculateArchimedeanRadius(P, t, x, a.tightness);
|
|
1480
1444
|
} else {
|
|
1481
|
-
const P = S * 0.3 *
|
|
1482
|
-
w = P * v +
|
|
1445
|
+
const P = S * 0.3 * a.tightness;
|
|
1446
|
+
w = P * v + a.startAngle, I = this.calculateLogarithmicRadius(P, t, x, a.tightness);
|
|
1483
1447
|
}
|
|
1484
|
-
const z = m + Math.cos(w) * I, L = y + Math.sin(w) * I, _ = I / x, O = f > 0 ? 1 - _ * f * 0.5 : 1, H =
|
|
1448
|
+
const z = m + Math.cos(w) * I, L = y + Math.sin(w) * I, _ = I / x, O = f > 0 ? 1 - _ * f * 0.5 : 1, H = b ? this.random(g, p) : 1, N = O * 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(z, 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);
|
|
1488
|
-
F =
|
|
1489
|
-
} else u === "tangent" && (F = this.calculateSpiralTangent(w, I,
|
|
1452
|
+
F = a.spiralType === "golden" ? B : P * 0.1 + B * 0.9;
|
|
1453
|
+
} else u === "tangent" && (F = this.calculateSpiralTangent(w, I, a));
|
|
1490
1454
|
const X = t - S;
|
|
1491
1455
|
n.push({
|
|
1492
1456
|
id: S,
|
|
@@ -1509,11 +1473,11 @@ class Ee {
|
|
|
1509
1473
|
if (e.spiralType === "golden")
|
|
1510
1474
|
n = t + Math.PI / 2;
|
|
1511
1475
|
else if (e.spiralType === "archimedean") {
|
|
1512
|
-
const r = 1 / e.tightness,
|
|
1513
|
-
n = t +
|
|
1476
|
+
const r = 1 / e.tightness, a = Math.atan(i / r);
|
|
1477
|
+
n = t + a;
|
|
1514
1478
|
} else {
|
|
1515
|
-
const r = 0.15 / e.tightness,
|
|
1516
|
-
n = t +
|
|
1479
|
+
const r = 0.15 / e.tightness, a = Math.atan(1 / r);
|
|
1480
|
+
n = t + a;
|
|
1517
1481
|
}
|
|
1518
1482
|
return n * 180 / Math.PI % 360 - 90;
|
|
1519
1483
|
}
|
|
@@ -1530,16 +1494,16 @@ class Ee {
|
|
|
1530
1494
|
* r = a + b*θ (constant spacing between arms)
|
|
1531
1495
|
*/
|
|
1532
1496
|
calculateArchimedeanRadius(t, i, e, n) {
|
|
1533
|
-
const
|
|
1534
|
-
return t /
|
|
1497
|
+
const s = i * 0.5 * n;
|
|
1498
|
+
return t / s * e;
|
|
1535
1499
|
}
|
|
1536
1500
|
/**
|
|
1537
1501
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1538
1502
|
* r = a * e^(b*θ)
|
|
1539
1503
|
*/
|
|
1540
1504
|
calculateLogarithmicRadius(t, i, e, n) {
|
|
1541
|
-
const
|
|
1542
|
-
return
|
|
1505
|
+
const s = e * 0.05, r = 0.15 / n, a = s * Math.exp(r * t), c = i * 0.3 * n, l = s * Math.exp(r * c);
|
|
1506
|
+
return a / l * e;
|
|
1543
1507
|
}
|
|
1544
1508
|
/**
|
|
1545
1509
|
* Utility: Generate random number between min and max
|
|
@@ -1548,7 +1512,7 @@ class Ee {
|
|
|
1548
1512
|
return Math.random() * (i - t) + t;
|
|
1549
1513
|
}
|
|
1550
1514
|
}
|
|
1551
|
-
const
|
|
1515
|
+
const we = {
|
|
1552
1516
|
clusterCount: "auto",
|
|
1553
1517
|
clusterSpread: 150,
|
|
1554
1518
|
clusterSpacing: 200,
|
|
@@ -1556,7 +1520,7 @@ const Se = {
|
|
|
1556
1520
|
overlap: 0.3,
|
|
1557
1521
|
distribution: "gaussian"
|
|
1558
1522
|
};
|
|
1559
|
-
class
|
|
1523
|
+
class Ee {
|
|
1560
1524
|
constructor(t, i = {}) {
|
|
1561
1525
|
this.config = t, this.imageConfig = i;
|
|
1562
1526
|
}
|
|
@@ -1568,18 +1532,18 @@ class Ie {
|
|
|
1568
1532
|
* @returns Array of layout objects with position, rotation, scale
|
|
1569
1533
|
*/
|
|
1570
1534
|
generate(t, i, e = {}) {
|
|
1571
|
-
const n = [], { width:
|
|
1535
|
+
const n = [], { width: s, height: r } = i, a = { ...we, ...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
|
-
|
|
1574
|
-
|
|
1537
|
+
a.clusterCount,
|
|
1538
|
+
s,
|
|
1575
1539
|
r,
|
|
1576
|
-
|
|
1540
|
+
a.clusterSpacing
|
|
1577
1541
|
), m = this.generateClusterCenters(
|
|
1578
1542
|
f,
|
|
1579
|
-
|
|
1543
|
+
s,
|
|
1580
1544
|
r,
|
|
1581
1545
|
c,
|
|
1582
|
-
|
|
1546
|
+
a
|
|
1583
1547
|
), y = new Array(f).fill(0);
|
|
1584
1548
|
for (let v = 0; v < t; v++)
|
|
1585
1549
|
y[v % f]++;
|
|
@@ -1588,18 +1552,18 @@ class Ie {
|
|
|
1588
1552
|
const S = m[v], w = y[v];
|
|
1589
1553
|
for (let I = 0; I < w; I++) {
|
|
1590
1554
|
let z, L;
|
|
1591
|
-
if (
|
|
1555
|
+
if (a.distribution === "gaussian")
|
|
1592
1556
|
z = 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
|
z = Math.cos(F) * X, L = Math.sin(F) * X;
|
|
1596
1560
|
}
|
|
1597
|
-
const _ = 1 +
|
|
1561
|
+
const _ = 1 + a.overlap * 0.5, O = 1 + a.overlap * 0.3;
|
|
1598
1562
|
z /= _, L /= _;
|
|
1599
|
-
const H =
|
|
1563
|
+
const H = b ? this.random(g, p) : 1, N = O * H, A = l * N;
|
|
1600
1564
|
let D = S.x + z, W = S.y + L;
|
|
1601
1565
|
const M = A * 1.5 / 2, R = A / 2;
|
|
1602
|
-
D = Math.max(c + M, Math.min(D,
|
|
1566
|
+
D = Math.max(c + M, Math.min(D, s - c - M)), W = Math.max(c + R, Math.min(W, r - c - R));
|
|
1603
1567
|
const k = u === "random" ? this.random(h, d) : 0, T = Math.sqrt(z * z + L * L) / S.spread, $ = Math.round((1 - T) * 50) + 1;
|
|
1604
1568
|
n.push({
|
|
1605
1569
|
id: x,
|
|
@@ -1617,33 +1581,33 @@ class Ie {
|
|
|
1617
1581
|
/**
|
|
1618
1582
|
* Calculate optimal number of clusters based on image count and container
|
|
1619
1583
|
*/
|
|
1620
|
-
calculateClusterCount(t, i, e, n,
|
|
1584
|
+
calculateClusterCount(t, i, e, n, s) {
|
|
1621
1585
|
if (i !== "auto")
|
|
1622
1586
|
return Math.max(1, Math.min(i, t));
|
|
1623
|
-
const
|
|
1624
|
-
e /
|
|
1587
|
+
const a = Math.max(1, Math.ceil(t / 8)), c = Math.floor(
|
|
1588
|
+
e / s * (n / s) * 0.6
|
|
1625
1589
|
);
|
|
1626
|
-
return Math.max(1, Math.min(
|
|
1590
|
+
return Math.max(1, Math.min(a, c, 10));
|
|
1627
1591
|
}
|
|
1628
1592
|
/**
|
|
1629
1593
|
* Generate cluster center positions with spacing constraints
|
|
1630
1594
|
*/
|
|
1631
|
-
generateClusterCenters(t, i, e, n,
|
|
1632
|
-
const r = [], c = n +
|
|
1595
|
+
generateClusterCenters(t, i, e, n, s) {
|
|
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),
|
|
1639
|
-
spread: this.calculateClusterSpread(
|
|
1603
|
+
spread: this.calculateClusterSpread(s)
|
|
1640
1604
|
};
|
|
1641
1605
|
let m = 1 / 0;
|
|
1642
1606
|
for (const y of r) {
|
|
1643
1607
|
const x = f.x - y.x, v = f.y - y.y, S = Math.sqrt(x * x + 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 Ie {
|
|
|
1674
1638
|
return Math.random() * (i - t) + t;
|
|
1675
1639
|
}
|
|
1676
1640
|
}
|
|
1677
|
-
class
|
|
1641
|
+
class Se {
|
|
1678
1642
|
constructor(t, i = {}) {
|
|
1679
1643
|
this.config = t, this.imageConfig = i;
|
|
1680
1644
|
}
|
|
@@ -1686,20 +1650,20 @@ class Ce {
|
|
|
1686
1650
|
* @returns Array of layout objects with position, rotation, scale
|
|
1687
1651
|
*/
|
|
1688
1652
|
generate(t, i, e = {}) {
|
|
1689
|
-
const n = [], { width:
|
|
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
|
...Nt,
|
|
1691
1655
|
...this.config.wave
|
|
1692
|
-
}, { rows: m, amplitude: y, frequency: x, phaseShift: v, synchronization: S } = f, w = Math.ceil(t / m), L =
|
|
1656
|
+
}, { rows: m, amplitude: y, frequency: x, phaseShift: v, synchronization: S } = f, w = Math.ceil(t / m), L = b * 1.5 / 2, _ = c + L, O = s - c - L, H = O - _, 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
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 ? (_ + O) / 2 : _ + T * N, F = this.calculateWaveY($,
|
|
1663
|
+
const $ = w === 1 ? (_ + O) / 2 : _ + T * N, F = this.calculateWaveY($, s, y, x, q), X = $, P = k + F, B = p ? this.random(d, g) : 1, Y = b * B;
|
|
1700
1664
|
let J = 0;
|
|
1701
|
-
l === "tangent" ? J = this.calculateRotation($,
|
|
1702
|
-
const K = Y * 1.5 / 2, lt = Y / 2, nt = c + K, ot =
|
|
1665
|
+
l === "tangent" ? J = this.calculateRotation($, s, y, x, q) : l === "random" && (J = this.random(u, h));
|
|
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)),
|
|
@@ -1722,9 +1686,9 @@ class Ce {
|
|
|
1722
1686
|
* @param phase - Phase offset
|
|
1723
1687
|
* @returns Y displacement from baseline
|
|
1724
1688
|
*/
|
|
1725
|
-
calculateWaveY(t, i, e, n,
|
|
1689
|
+
calculateWaveY(t, i, e, n, s) {
|
|
1726
1690
|
const r = t / i;
|
|
1727
|
-
return e * Math.sin(n * r * 2 * Math.PI +
|
|
1691
|
+
return e * Math.sin(n * r * 2 * Math.PI + s);
|
|
1728
1692
|
}
|
|
1729
1693
|
/**
|
|
1730
1694
|
* Calculate rotation based on wave tangent
|
|
@@ -1735,9 +1699,9 @@ class Ce {
|
|
|
1735
1699
|
* @param phase - Phase offset
|
|
1736
1700
|
* @returns Rotation angle in degrees
|
|
1737
1701
|
*/
|
|
1738
|
-
calculateRotation(t, i, e, n,
|
|
1739
|
-
const r = t / i,
|
|
1740
|
-
return Math.atan(
|
|
1702
|
+
calculateRotation(t, i, e, n, s) {
|
|
1703
|
+
const r = t / i, a = e * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + s) / i;
|
|
1704
|
+
return Math.atan(a) * (180 / Math.PI);
|
|
1741
1705
|
}
|
|
1742
1706
|
/**
|
|
1743
1707
|
* Estimate image width based on height
|
|
@@ -1764,21 +1728,21 @@ const wt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1764
1728
|
// lower-left
|
|
1765
1729
|
[0, 50]
|
|
1766
1730
|
// left
|
|
1767
|
-
],
|
|
1768
|
-
function
|
|
1731
|
+
], Ie = Et[1][0] / wt, Ce = Et[2][1] / wt;
|
|
1732
|
+
function Ae(o) {
|
|
1769
1733
|
return {
|
|
1770
|
-
colStep:
|
|
1771
|
-
rowOffset:
|
|
1734
|
+
colStep: Ie * o,
|
|
1735
|
+
rowOffset: Ce * o
|
|
1772
1736
|
};
|
|
1773
1737
|
}
|
|
1774
|
-
function
|
|
1775
|
-
const { colStep: r } =
|
|
1738
|
+
function Re(o, t, i, e, n, s) {
|
|
1739
|
+
const { colStep: r } = Ae(s);
|
|
1776
1740
|
return {
|
|
1777
1741
|
px: e + r * o,
|
|
1778
|
-
py: n +
|
|
1742
|
+
py: n + s * (t + o / 2)
|
|
1779
1743
|
};
|
|
1780
1744
|
}
|
|
1781
|
-
const
|
|
1745
|
+
const Te = [
|
|
1782
1746
|
[1, 0, -1],
|
|
1783
1747
|
[0, 1, -1],
|
|
1784
1748
|
[-1, 1, 0],
|
|
@@ -1786,32 +1750,32 @@ const Me = [
|
|
|
1786
1750
|
[0, -1, 1],
|
|
1787
1751
|
[1, -1, 0]
|
|
1788
1752
|
];
|
|
1789
|
-
function
|
|
1753
|
+
function Le(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 [
|
|
1757
|
+
for (const [s, r, a] of Te)
|
|
1794
1758
|
for (let c = 0; c < o; c++)
|
|
1795
|
-
t.push([i, e, n]), i +=
|
|
1759
|
+
t.push([i, e, n]), i += s, e += r, n += a;
|
|
1796
1760
|
return t;
|
|
1797
1761
|
}
|
|
1798
|
-
class
|
|
1762
|
+
class Me {
|
|
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 = {}) {
|
|
1802
1766
|
this.config = t;
|
|
1803
1767
|
}
|
|
1804
1768
|
generate(t, i, e = {}) {
|
|
1805
|
-
const n = [], { width:
|
|
1769
|
+
const n = [], { width: s, height: r } = i, a = s / 2, c = r / 2, l = e.fixedHeight ?? 200, h = {
|
|
1806
1770
|
...kt,
|
|
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 = Le(p);
|
|
1776
|
+
for (const [f, m, y] of b) {
|
|
1813
1777
|
if (g >= t) break;
|
|
1814
|
-
const { px: x, py: v } =
|
|
1778
|
+
const { px: x, py: v } = Re(f, m, y, a, c, d);
|
|
1815
1779
|
n.push({
|
|
1816
1780
|
id: g,
|
|
1817
1781
|
x,
|
|
@@ -1820,15 +1784,15 @@ class ze {
|
|
|
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 Fe {
|
|
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 Oe {
|
|
|
1839
1803
|
initLayout() {
|
|
1840
1804
|
switch (this.config.algorithm) {
|
|
1841
1805
|
case "radial":
|
|
1842
|
-
return new
|
|
1806
|
+
return new me(this.config, this.imageConfig);
|
|
1843
1807
|
case "grid":
|
|
1844
|
-
return new
|
|
1808
|
+
return new be(this.config, this.imageConfig);
|
|
1845
1809
|
case "spiral":
|
|
1846
|
-
return new
|
|
1810
|
+
return new xe(this.config, this.imageConfig);
|
|
1847
1811
|
case "cluster":
|
|
1848
|
-
return new
|
|
1812
|
+
return new Ee(this.config, this.imageConfig);
|
|
1849
1813
|
case "wave":
|
|
1850
|
-
return new
|
|
1814
|
+
return new Se(this.config, this.imageConfig);
|
|
1851
1815
|
case "honeycomb":
|
|
1852
|
-
return new
|
|
1816
|
+
return new Me(this.config, this.imageConfig);
|
|
1853
1817
|
default:
|
|
1854
|
-
return new
|
|
1818
|
+
return new ge(this.config, this.imageConfig);
|
|
1855
1819
|
}
|
|
1856
1820
|
}
|
|
1857
1821
|
/**
|
|
@@ -1863,8 +1827,8 @@ class Oe {
|
|
|
1863
1827
|
*/
|
|
1864
1828
|
generateLayout(t, i, e = {}) {
|
|
1865
1829
|
const n = this.placementLayout.generate(t, i, e);
|
|
1866
|
-
return n.forEach((
|
|
1867
|
-
this.layouts.set(
|
|
1830
|
+
return n.forEach((s) => {
|
|
1831
|
+
this.layouts.set(s.id, s);
|
|
1868
1832
|
}), n;
|
|
1869
1833
|
}
|
|
1870
1834
|
/**
|
|
@@ -1918,8 +1882,8 @@ class Oe {
|
|
|
1918
1882
|
return;
|
|
1919
1883
|
if (typeof e == "number")
|
|
1920
1884
|
return e;
|
|
1921
|
-
const n = e,
|
|
1922
|
-
return
|
|
1885
|
+
const n = e, s = this.resolveBreakpoint(t);
|
|
1886
|
+
return s === "mobile" ? n.mobile ?? n.tablet ?? n.screen : s === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1923
1887
|
}
|
|
1924
1888
|
/**
|
|
1925
1889
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1930,15 +1894,15 @@ class Oe {
|
|
|
1930
1894
|
* @returns Calculated sizing result with height
|
|
1931
1895
|
*/
|
|
1932
1896
|
calculateAdaptiveSize(t, i, e, n) {
|
|
1933
|
-
const
|
|
1897
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1934
1898
|
if (r !== void 0)
|
|
1935
1899
|
return { height: r };
|
|
1936
|
-
const
|
|
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
|
-
let y = this.clamp(m,
|
|
1940
|
-
if (y ===
|
|
1941
|
-
const x = Math.max(
|
|
1903
|
+
let y = this.clamp(m, a, c);
|
|
1904
|
+
if (y === a && m < a) {
|
|
1905
|
+
const x = Math.max(a * 0.05, 20);
|
|
1942
1906
|
y = Math.max(x, m);
|
|
1943
1907
|
}
|
|
1944
1908
|
return this.config.algorithm === "honeycomb" && (y = Math.min(y, this.honeycombMaxImageHeight(i, t))), { height: y };
|
|
@@ -1953,7 +1917,7 @@ class Oe {
|
|
|
1953
1917
|
let e = 0, n = 1;
|
|
1954
1918
|
for (; n < t; )
|
|
1955
1919
|
e++, n += 6 * e;
|
|
1956
|
-
const
|
|
1920
|
+
const s = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, a = i.width / 2, c = i.height / 2, l = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (c - s - r * e) / (e + 0.5), d = (a - s - l * r * e) / (l * e + u);
|
|
1957
1921
|
return Math.max(10, Math.min(h, d));
|
|
1958
1922
|
}
|
|
1959
1923
|
/**
|
|
@@ -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
|
+
}, ze = {
|
|
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 De(o, t, i) {
|
|
1983
|
+
const e = ze[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
|
|
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 $e(o) {
|
|
2031
1995
|
return o in mt;
|
|
2032
1996
|
}
|
|
2033
|
-
function
|
|
2034
|
-
return o ?
|
|
1997
|
+
function Pe(o) {
|
|
1998
|
+
return o ? $e(o) ? mt[o] : o : mt.md;
|
|
2035
1999
|
}
|
|
2036
|
-
function
|
|
2000
|
+
function _e(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)
|
|
@@ -2055,38 +2019,38 @@ function it(o, t, i) {
|
|
|
2055
2019
|
if (!o) return {};
|
|
2056
2020
|
const e = {};
|
|
2057
2021
|
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
2058
|
-
const
|
|
2059
|
-
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` :
|
|
2022
|
+
const a = o.border?.radius ?? 0;
|
|
2023
|
+
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : a && (e.borderTopLeftRadius = `${a}px`), o.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${o.borderRadiusTopRight}px` : a && (e.borderTopRightRadius = `${a}px`), o.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : a && (e.borderBottomRightRadius = `${a}px`), o.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : a && (e.borderBottomLeftRadius = `${a}px`);
|
|
2060
2024
|
} else o.border?.radius !== void 0 && (e.borderRadius = `${o.border.radius}px`);
|
|
2061
2025
|
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
2062
|
-
const
|
|
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 = Pe(o.shadow));
|
|
2030
|
+
const r = _e(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
|
-
const
|
|
2069
|
-
e.outline = `${
|
|
2032
|
+
const a = o.outline.width ?? 0, c = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
2033
|
+
e.outline = `${a}px ${c} ${l}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
2070
2034
|
}
|
|
2071
2035
|
if (o.objectFit !== void 0 && (e.objectFit = o.objectFit), o.aspectRatio !== void 0 && (e.aspectRatio = o.aspectRatio), o.clipPath !== void 0) {
|
|
2072
|
-
let
|
|
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
|
-
|
|
2039
|
+
a = De(l.shape, t, i);
|
|
2076
2040
|
else {
|
|
2077
2041
|
const u = c && l ? l.shape : o.clipPath;
|
|
2078
|
-
|
|
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 Ue(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
|
+
Ue(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 He {
|
|
2111
2075
|
constructor(t, i, e) {
|
|
2112
2076
|
this.state = E.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
|
}
|
|
@@ -2140,19 +2104,19 @@ class ke {
|
|
|
2140
2104
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2141
2105
|
*/
|
|
2142
2106
|
calculateFocusDimensions(t, i, e) {
|
|
2143
|
-
const n = this.normalizeScalePercent(this.config.scalePercent),
|
|
2144
|
-
let
|
|
2107
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), s = e.height * n, r = t / i;
|
|
2108
|
+
let a = s, c = a * r;
|
|
2145
2109
|
const l = e.width * n;
|
|
2146
|
-
return c > l && (c = l,
|
|
2110
|
+
return c > l && (c = l, a = c / r), { width: c, height: a };
|
|
2147
2111
|
}
|
|
2148
2112
|
/**
|
|
2149
2113
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
2150
2114
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2151
2115
|
*/
|
|
2152
2116
|
calculateFocusTransform(t, i) {
|
|
2153
|
-
const e = t.width / 2, n = t.height / 2,
|
|
2117
|
+
const e = t.width / 2, n = t.height / 2, s = e - i.x, r = n - i.y;
|
|
2154
2118
|
return {
|
|
2155
|
-
x:
|
|
2119
|
+
x: s,
|
|
2156
2120
|
y: r,
|
|
2157
2121
|
rotation: 0,
|
|
2158
2122
|
scale: 1
|
|
@@ -2174,19 +2138,19 @@ class ke {
|
|
|
2174
2138
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2175
2139
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2176
2140
|
*/
|
|
2177
|
-
animateWithDimensions(t, i, e, n,
|
|
2141
|
+
animateWithDimensions(t, i, e, n, s, r, a, c) {
|
|
2178
2142
|
const l = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2179
2143
|
return t.style.transition = "none", t.animate(
|
|
2180
2144
|
[
|
|
2181
2145
|
{
|
|
2182
2146
|
transform: l,
|
|
2183
2147
|
width: `${n}px`,
|
|
2184
|
-
height: `${
|
|
2148
|
+
height: `${s}px`
|
|
2185
2149
|
},
|
|
2186
2150
|
{
|
|
2187
2151
|
transform: u,
|
|
2188
2152
|
width: `${r}px`,
|
|
2189
|
-
height: `${
|
|
2153
|
+
height: `${a}px`
|
|
2190
2154
|
}
|
|
2191
2155
|
],
|
|
2192
2156
|
{
|
|
@@ -2223,11 +2187,11 @@ class ke {
|
|
|
2223
2187
|
startClipPathAnimation(t, i, e) {
|
|
2224
2188
|
let n = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2225
2189
|
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (n = { ...n, clipPath: void 0 });
|
|
2226
|
-
const
|
|
2227
|
-
const r = t.offsetHeight,
|
|
2228
|
-
c.clipPath !== void 0 ? t.style.clipPath = c.clipPath : t.style.clipPath = "unset", c.overflow !== void 0 && (t.style.overflow = c.overflow), i.animation.playState === "running" && requestAnimationFrame(
|
|
2190
|
+
const s = () => {
|
|
2191
|
+
const r = t.offsetHeight, a = t.offsetWidth, c = it(n, r, a);
|
|
2192
|
+
c.clipPath !== void 0 ? t.style.clipPath = c.clipPath : t.style.clipPath = "unset", c.overflow !== void 0 && (t.style.overflow = c.overflow), i.animation.playState === "running" && requestAnimationFrame(s);
|
|
2229
2193
|
};
|
|
2230
|
-
requestAnimationFrame(
|
|
2194
|
+
requestAnimationFrame(s);
|
|
2231
2195
|
}
|
|
2232
2196
|
/**
|
|
2233
2197
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -2235,8 +2199,8 @@ class ke {
|
|
|
2235
2199
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2236
2200
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2237
2201
|
*/
|
|
2238
|
-
startFocusAnimation(t, i, e, n,
|
|
2239
|
-
const r = t.style.zIndex || "",
|
|
2202
|
+
startFocusAnimation(t, i, e, n, s) {
|
|
2203
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, c = t.offsetHeight, l = this.calculateFocusDimensions(a, c, i), u = this.calculateFocusTransform(i, e);
|
|
2240
2204
|
this.animationEngine.cancelAllAnimations(t);
|
|
2241
2205
|
const h = this.config.animationDuration ?? 600;
|
|
2242
2206
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
@@ -2246,19 +2210,19 @@ class ke {
|
|
|
2246
2210
|
rotation: e.rotation,
|
|
2247
2211
|
scale: 1
|
|
2248
2212
|
// No scale - using dimensions
|
|
2249
|
-
}, g =
|
|
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(),
|
|
@@ -2269,7 +2233,7 @@ class ke {
|
|
|
2269
2233
|
originalState: e,
|
|
2270
2234
|
focusTransform: u,
|
|
2271
2235
|
originalZIndex: r,
|
|
2272
|
-
originalWidth:
|
|
2236
|
+
originalWidth: a,
|
|
2273
2237
|
originalHeight: c,
|
|
2274
2238
|
focusWidth: l.width,
|
|
2275
2239
|
focusHeight: l.height
|
|
@@ -2278,7 +2242,7 @@ class ke {
|
|
|
2278
2242
|
originalState: e,
|
|
2279
2243
|
animationHandle: f,
|
|
2280
2244
|
direction: "in",
|
|
2281
|
-
originalWidth:
|
|
2245
|
+
originalWidth: a,
|
|
2282
2246
|
originalHeight: c
|
|
2283
2247
|
};
|
|
2284
2248
|
}
|
|
@@ -2289,9 +2253,9 @@ class ke {
|
|
|
2289
2253
|
*/
|
|
2290
2254
|
startUnfocusAnimation(t, i, e, n) {
|
|
2291
2255
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2292
|
-
const
|
|
2256
|
+
const s = this.config.animationDuration ?? 600;
|
|
2293
2257
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2294
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 },
|
|
2258
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, a = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, c = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, l = {
|
|
2295
2259
|
x: 0,
|
|
2296
2260
|
y: 0,
|
|
2297
2261
|
rotation: i.rotation,
|
|
@@ -2301,11 +2265,11 @@ class ke {
|
|
|
2301
2265
|
t,
|
|
2302
2266
|
r,
|
|
2303
2267
|
l,
|
|
2304
|
-
|
|
2268
|
+
a,
|
|
2305
2269
|
c,
|
|
2306
2270
|
u,
|
|
2307
2271
|
h,
|
|
2308
|
-
|
|
2272
|
+
s
|
|
2309
2273
|
), g = {
|
|
2310
2274
|
id: `unfocus-${Date.now()}`,
|
|
2311
2275
|
element: t,
|
|
@@ -2313,7 +2277,7 @@ class ke {
|
|
|
2313
2277
|
fromState: r,
|
|
2314
2278
|
toState: l,
|
|
2315
2279
|
startTime: performance.now(),
|
|
2316
|
-
duration:
|
|
2280
|
+
duration: s
|
|
2317
2281
|
};
|
|
2318
2282
|
return this.startClipPathAnimation(t, g, !1), {
|
|
2319
2283
|
element: t,
|
|
@@ -2339,10 +2303,10 @@ class ke {
|
|
|
2339
2303
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2340
2304
|
*/
|
|
2341
2305
|
captureMidAnimationState(t) {
|
|
2342
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth,
|
|
2343
|
-
return t.style.width = `${n}px`, t.style.height = `${
|
|
2344
|
-
transform: { x: r, y:
|
|
2345
|
-
dimensions: { width: n, height:
|
|
2306
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth, s = t.offsetHeight, r = e.e + n * 0.5, a = e.f + s * 0.5, c = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2307
|
+
return t.style.width = `${n}px`, t.style.height = `${s}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${a}px) rotate(${c}deg)`, t.style.transition = "none", {
|
|
2308
|
+
transform: { x: r, y: a, rotation: c, scale: 1 },
|
|
2309
|
+
dimensions: { width: n, height: s }
|
|
2346
2310
|
};
|
|
2347
2311
|
}
|
|
2348
2312
|
/**
|
|
@@ -2357,10 +2321,10 @@ class ke {
|
|
|
2357
2321
|
/**
|
|
2358
2322
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2359
2323
|
*/
|
|
2360
|
-
resetElementInstantly(t, i, e, n,
|
|
2324
|
+
resetElementInstantly(t, i, e, n, s) {
|
|
2361
2325
|
this.animationEngine.cancelAllAnimations(t);
|
|
2362
2326
|
const r = ["translate(-50%, -50%)"];
|
|
2363
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 &&
|
|
2327
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && s !== void 0 && (t.style.width = `${n}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, e);
|
|
2364
2328
|
}
|
|
2365
2329
|
/**
|
|
2366
2330
|
* Focus (zoom) an image to center of container
|
|
@@ -2370,11 +2334,11 @@ class ke {
|
|
|
2370
2334
|
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2371
2335
|
return this.unfocusImage();
|
|
2372
2336
|
if (this.incoming?.element === t && this.state === E.FOCUSING) {
|
|
2373
|
-
const { transform:
|
|
2337
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2374
2338
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2375
2339
|
t,
|
|
2376
2340
|
this.incoming.originalState,
|
|
2377
|
-
|
|
2341
|
+
s,
|
|
2378
2342
|
r
|
|
2379
2343
|
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2380
2344
|
return;
|
|
@@ -2395,8 +2359,8 @@ class ke {
|
|
|
2395
2359
|
]), this.focusGeneration !== n)
|
|
2396
2360
|
return;
|
|
2397
2361
|
if (this.outgoing) {
|
|
2398
|
-
const
|
|
2399
|
-
this.removeFocusedStyling(
|
|
2362
|
+
const s = this.outgoing.element;
|
|
2363
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2400
2364
|
}
|
|
2401
2365
|
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2402
2366
|
break;
|
|
@@ -2416,8 +2380,8 @@ class ke {
|
|
|
2416
2380
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2417
2381
|
]), this.focusGeneration !== n) return;
|
|
2418
2382
|
if (this.outgoing) {
|
|
2419
|
-
const
|
|
2420
|
-
this.removeFocusedStyling(
|
|
2383
|
+
const s = this.outgoing.element;
|
|
2384
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2421
2385
|
}
|
|
2422
2386
|
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2423
2387
|
break;
|
|
@@ -2425,24 +2389,24 @@ class ke {
|
|
|
2425
2389
|
if (this.incoming?.element === t)
|
|
2426
2390
|
return;
|
|
2427
2391
|
if (this.outgoing?.element === t) {
|
|
2428
|
-
const { transform:
|
|
2392
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2429
2393
|
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2430
|
-
const { transform:
|
|
2394
|
+
const { transform: a, dimensions: c } = this.captureMidAnimationState(this.incoming.element);
|
|
2431
2395
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2432
2396
|
this.incoming.element,
|
|
2433
2397
|
this.incoming.originalState,
|
|
2434
|
-
|
|
2398
|
+
a,
|
|
2435
2399
|
c
|
|
2436
2400
|
);
|
|
2437
2401
|
} else
|
|
2438
2402
|
this.outgoing = null;
|
|
2439
|
-
if (this.incoming = this.startFocusAnimation(t, i, e,
|
|
2403
|
+
if (this.incoming = this.startFocusAnimation(t, i, e, s, r), await Promise.all([
|
|
2440
2404
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2441
2405
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2442
2406
|
]), this.focusGeneration !== n) return;
|
|
2443
2407
|
if (this.outgoing) {
|
|
2444
|
-
const
|
|
2445
|
-
this.removeFocusedStyling(
|
|
2408
|
+
const a = this.outgoing.element;
|
|
2409
|
+
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2446
2410
|
}
|
|
2447
2411
|
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2448
2412
|
return;
|
|
@@ -2454,11 +2418,11 @@ class ke {
|
|
|
2454
2418
|
this.outgoing.originalWidth,
|
|
2455
2419
|
this.outgoing.originalHeight
|
|
2456
2420
|
), this.outgoing = null), this.incoming) {
|
|
2457
|
-
const { transform:
|
|
2421
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2458
2422
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2459
2423
|
this.incoming.element,
|
|
2460
2424
|
this.incoming.originalState,
|
|
2461
|
-
|
|
2425
|
+
s,
|
|
2462
2426
|
r
|
|
2463
2427
|
);
|
|
2464
2428
|
}
|
|
@@ -2467,8 +2431,8 @@ class ke {
|
|
|
2467
2431
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2468
2432
|
]), this.focusGeneration !== n) return;
|
|
2469
2433
|
if (this.outgoing) {
|
|
2470
|
-
const
|
|
2471
|
-
this.removeFocusedStyling(
|
|
2434
|
+
const s = this.outgoing.element;
|
|
2435
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2472
2436
|
}
|
|
2473
2437
|
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2474
2438
|
break;
|
|
@@ -2483,34 +2447,34 @@ class ke {
|
|
|
2483
2447
|
const t = ++this.focusGeneration;
|
|
2484
2448
|
if (!this.currentFocus || !this.focusData) {
|
|
2485
2449
|
if (this.incoming && this.state === E.FOCUSING) {
|
|
2486
|
-
const { transform:
|
|
2450
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2487
2451
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2488
2452
|
this.incoming.element,
|
|
2489
2453
|
this.incoming.originalState,
|
|
2490
|
-
|
|
2454
|
+
s,
|
|
2491
2455
|
r
|
|
2492
2456
|
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2493
|
-
const
|
|
2494
|
-
this.removeFocusedStyling(
|
|
2457
|
+
const a = this.outgoing.element;
|
|
2458
|
+
this.removeFocusedStyling(a, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(a);
|
|
2495
2459
|
}
|
|
2496
2460
|
return;
|
|
2497
2461
|
}
|
|
2498
2462
|
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2499
|
-
const { transform:
|
|
2463
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2500
2464
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2501
|
-
const
|
|
2465
|
+
const a = this.startUnfocusAnimation(
|
|
2502
2466
|
this.incoming.element,
|
|
2503
2467
|
this.incoming.originalState,
|
|
2504
|
-
|
|
2468
|
+
s,
|
|
2505
2469
|
r
|
|
2506
2470
|
);
|
|
2507
2471
|
if (await Promise.all([
|
|
2508
2472
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2509
|
-
this.waitForAnimation(
|
|
2473
|
+
this.waitForAnimation(a.animationHandle)
|
|
2510
2474
|
]), this.focusGeneration !== t) return;
|
|
2511
2475
|
let c = null;
|
|
2512
2476
|
this.outgoing && (c = this.outgoing.element, this.removeFocusedStyling(c, this.outgoing.originalState.zIndex?.toString() || ""));
|
|
2513
|
-
const l =
|
|
2477
|
+
const l = a.element;
|
|
2514
2478
|
this.removeFocusedStyling(l, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, c && this.onUnfocusComplete?.(c), this.onUnfocusComplete?.(l);
|
|
2515
2479
|
return;
|
|
2516
2480
|
}
|
|
@@ -2556,8 +2520,8 @@ class ke {
|
|
|
2556
2520
|
*/
|
|
2557
2521
|
setDragOffset(t) {
|
|
2558
2522
|
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2559
|
-
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"],
|
|
2560
|
-
n.push(`translate(${
|
|
2523
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2524
|
+
n.push(`translate(${s}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2561
2525
|
}
|
|
2562
2526
|
/**
|
|
2563
2527
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2566,9 +2530,9 @@ class ke {
|
|
|
2566
2530
|
*/
|
|
2567
2531
|
clearDragOffset(t, i = 150) {
|
|
2568
2532
|
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2569
|
-
const e = this.currentFocus, n = this.focusData.focusTransform,
|
|
2570
|
-
|
|
2571
|
-
const c =
|
|
2533
|
+
const e = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2534
|
+
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2535
|
+
const c = s.join(" ");
|
|
2572
2536
|
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = c, setTimeout(() => {
|
|
2573
2537
|
this.currentFocus === e && (e.style.transition = "none");
|
|
2574
2538
|
}, i)) : (e.style.transition = "none", e.style.transform = c);
|
|
@@ -2598,7 +2562,7 @@ class ke {
|
|
|
2598
2562
|
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2599
2563
|
}
|
|
2600
2564
|
}
|
|
2601
|
-
const
|
|
2565
|
+
const Ne = 50, ke = 0.5, Be = 20, je = 0.3, We = 150, Ge = 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
|
}
|
|
@@ -2644,21 +2608,21 @@ const Be = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Xe = 30, rt = class rt {
|
|
|
2644
2608
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
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
|
-
const
|
|
2648
|
-
this.touchState.isHorizontalSwipe =
|
|
2611
|
+
const a = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2612
|
+
this.touchState.isHorizontalSwipe = a <= Ge;
|
|
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
|
|
2653
|
-
this.callbacks.onDragOffset(
|
|
2616
|
+
const s = e * je;
|
|
2617
|
+
this.callbacks.onDragOffset(s);
|
|
2654
2618
|
}
|
|
2655
2619
|
}
|
|
2656
2620
|
handleTouchEnd(t) {
|
|
2657
2621
|
if (!this.touchState) return;
|
|
2658
2622
|
this.recentTouchTimestamp = Date.now();
|
|
2659
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e,
|
|
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 && (
|
|
2625
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= Ne || n >= ke && s >= Be) && (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 Be = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Xe = 30, rt = class rt {
|
|
|
2666
2630
|
};
|
|
2667
2631
|
rt.TOUCH_CLICK_DELAY = 300;
|
|
2668
2632
|
let bt = rt;
|
|
2669
|
-
class
|
|
2633
|
+
class qe {
|
|
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");
|
|
@@ -2680,8 +2644,8 @@ class Ye {
|
|
|
2680
2644
|
for (const i of this.sources)
|
|
2681
2645
|
if ("folders" in i)
|
|
2682
2646
|
for (const e of i.folders) {
|
|
2683
|
-
const n = i.recursive !== void 0 ? i.recursive : !0,
|
|
2684
|
-
this._discoveredUrls.push(...
|
|
2647
|
+
const n = i.recursive !== void 0 ? i.recursive : !0, s = await this.loadFromFolder(e, t, n);
|
|
2648
|
+
this._discoveredUrls.push(...s);
|
|
2685
2649
|
}
|
|
2686
2650
|
else if ("files" in i) {
|
|
2687
2651
|
const e = await this.loadFiles(i.files, t);
|
|
@@ -2747,8 +2711,8 @@ class Ye {
|
|
|
2747
2711
|
return this.loadImagesDirectly(n, i);
|
|
2748
2712
|
try {
|
|
2749
2713
|
return e ? await this.loadImagesRecursively(n, i) : await this.loadImagesFromSingleFolder(n, i);
|
|
2750
|
-
} catch (
|
|
2751
|
-
return console.error("Error loading from Google Drive API:",
|
|
2714
|
+
} catch (s) {
|
|
2715
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(n, i);
|
|
2752
2716
|
}
|
|
2753
2717
|
}
|
|
2754
2718
|
/**
|
|
@@ -2758,10 +2722,10 @@ class Ye {
|
|
|
2758
2722
|
* @returns Promise resolving to array of image URLs
|
|
2759
2723
|
*/
|
|
2760
2724
|
async loadImagesFromSingleFolder(t, i) {
|
|
2761
|
-
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2762
|
-
if (!
|
|
2763
|
-
throw new Error(`API request failed: ${
|
|
2764
|
-
const l = (await
|
|
2725
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2726
|
+
if (!a.ok)
|
|
2727
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2728
|
+
const l = (await a.json()).files.filter(
|
|
2765
2729
|
(u) => u.mimeType.startsWith("image/") && i.isAllowed(u.name)
|
|
2766
2730
|
);
|
|
2767
2731
|
return this.log(`Found ${l.length} images in folder ${t} (non-recursive)`), l.forEach((u) => {
|
|
@@ -2777,24 +2741,24 @@ class Ye {
|
|
|
2777
2741
|
async loadFiles(t, i) {
|
|
2778
2742
|
const e = [];
|
|
2779
2743
|
for (const n of t) {
|
|
2780
|
-
const
|
|
2781
|
-
if (!
|
|
2744
|
+
const s = this.extractFileId(n);
|
|
2745
|
+
if (!s) {
|
|
2782
2746
|
this.log(`Skipping invalid file URL: ${n}`);
|
|
2783
2747
|
continue;
|
|
2784
2748
|
}
|
|
2785
2749
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2786
2750
|
try {
|
|
2787
|
-
const r = `${this.apiEndpoint}/${
|
|
2788
|
-
if (
|
|
2789
|
-
const c = await
|
|
2790
|
-
c.mimeType.startsWith("image/") && i.isAllowed(c.name) ? (e.push(`https://lh3.googleusercontent.com/d/${
|
|
2751
|
+
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2752
|
+
if (a.ok) {
|
|
2753
|
+
const c = await a.json();
|
|
2754
|
+
c.mimeType.startsWith("image/") && i.isAllowed(c.name) ? (e.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${c.name}`)) : this.log(`Skipping non-image file: ${c.name} (${c.mimeType})`);
|
|
2791
2755
|
} else
|
|
2792
|
-
this.log(`Failed to fetch metadata for file ${
|
|
2756
|
+
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2793
2757
|
} catch (r) {
|
|
2794
|
-
this.log(`Error fetching metadata for file ${
|
|
2758
|
+
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2795
2759
|
}
|
|
2796
2760
|
else
|
|
2797
|
-
e.push(`https://lh3.googleusercontent.com/d/${
|
|
2761
|
+
e.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
2798
2762
|
}
|
|
2799
2763
|
return e;
|
|
2800
2764
|
}
|
|
@@ -2828,10 +2792,10 @@ class Ye {
|
|
|
2828
2792
|
* @returns Promise resolving to array of image URLs
|
|
2829
2793
|
*/
|
|
2830
2794
|
async loadImagesRecursively(t, i) {
|
|
2831
|
-
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2832
|
-
if (!
|
|
2833
|
-
throw new Error(`API request failed: ${
|
|
2834
|
-
const c = await
|
|
2795
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2796
|
+
if (!a.ok)
|
|
2797
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2798
|
+
const c = await a.json(), l = c.files.filter(
|
|
2835
2799
|
(h) => h.mimeType.startsWith("image/") && i.isAllowed(h.name)
|
|
2836
2800
|
), u = c.files.filter(
|
|
2837
2801
|
(h) => h.mimeType === "application/vnd.google-apps.folder"
|
|
@@ -2858,8 +2822,8 @@ class Ye {
|
|
|
2858
2822
|
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(e, { mode: "cors" });
|
|
2859
2823
|
if (!n.ok)
|
|
2860
2824
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2861
|
-
const
|
|
2862
|
-
return [...new Set(
|
|
2825
|
+
const s = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2826
|
+
return [...new Set(a.map((u) => u[1]))].map(
|
|
2863
2827
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2864
2828
|
);
|
|
2865
2829
|
} catch (e) {
|
|
@@ -2887,7 +2851,7 @@ class Ye {
|
|
|
2887
2851
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2888
2852
|
}
|
|
2889
2853
|
}
|
|
2890
|
-
class
|
|
2854
|
+
class Xe {
|
|
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");
|
|
@@ -2952,8 +2916,8 @@ class Je {
|
|
|
2952
2916
|
return console.warn("URLs must be an array:", t), [];
|
|
2953
2917
|
const e = [];
|
|
2954
2918
|
for (const n of t) {
|
|
2955
|
-
const
|
|
2956
|
-
if (!i.isAllowed(
|
|
2919
|
+
const s = n.split("/").pop() || n;
|
|
2920
|
+
if (!i.isAllowed(s)) {
|
|
2957
2921
|
this.log(`Skipping filtered URL: ${n}`);
|
|
2958
2922
|
continue;
|
|
2959
2923
|
}
|
|
@@ -2972,12 +2936,12 @@ class Je {
|
|
|
2972
2936
|
if (!Array.isArray(i))
|
|
2973
2937
|
return console.warn("files must be an array:", i), [];
|
|
2974
2938
|
const n = [];
|
|
2975
|
-
for (const
|
|
2976
|
-
if (!e.isAllowed(
|
|
2977
|
-
this.log(`Skipping filtered file: ${
|
|
2939
|
+
for (const s of i) {
|
|
2940
|
+
if (!e.isAllowed(s)) {
|
|
2941
|
+
this.log(`Skipping filtered file: ${s}`);
|
|
2978
2942
|
continue;
|
|
2979
2943
|
}
|
|
2980
|
-
const r = this.constructUrl(t,
|
|
2944
|
+
const r = this.constructUrl(t, s);
|
|
2981
2945
|
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2982
2946
|
}
|
|
2983
2947
|
return n;
|
|
@@ -2993,15 +2957,15 @@ class Je {
|
|
|
2993
2957
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2994
2958
|
const e = new AbortController(), n = setTimeout(() => e.abort(), 1e4);
|
|
2995
2959
|
try {
|
|
2996
|
-
const
|
|
2997
|
-
if (clearTimeout(n), !
|
|
2998
|
-
throw new Error(`HTTP ${
|
|
2999
|
-
const r = await
|
|
2960
|
+
const s = await fetch(t, { signal: e.signal });
|
|
2961
|
+
if (clearTimeout(n), !s.ok)
|
|
2962
|
+
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2963
|
+
const r = await s.json();
|
|
3000
2964
|
if (!r || !Array.isArray(r.images))
|
|
3001
2965
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3002
2966
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3003
|
-
} catch (
|
|
3004
|
-
throw clearTimeout(n),
|
|
2967
|
+
} catch (s) {
|
|
2968
|
+
throw clearTimeout(n), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
3005
2969
|
}
|
|
3006
2970
|
}
|
|
3007
2971
|
/**
|
|
@@ -3023,11 +2987,11 @@ class Je {
|
|
|
3023
2987
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3024
2988
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3025
2989
|
try {
|
|
3026
|
-
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout),
|
|
2990
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout), s = await fetch(t, {
|
|
3027
2991
|
method: "HEAD",
|
|
3028
2992
|
signal: e.signal
|
|
3029
2993
|
});
|
|
3030
|
-
return clearTimeout(n),
|
|
2994
|
+
return clearTimeout(n), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
3031
2995
|
} catch (e) {
|
|
3032
2996
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3033
2997
|
}
|
|
@@ -3067,7 +3031,7 @@ class Je {
|
|
|
3067
3031
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
3068
3032
|
}
|
|
3069
3033
|
}
|
|
3070
|
-
class
|
|
3034
|
+
class Ye {
|
|
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");
|
|
@@ -3081,8 +3045,8 @@ class Ve {
|
|
|
3081
3045
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3082
3046
|
const i = this.loaders.map((e, n) => e.prepare(t).then(() => {
|
|
3083
3047
|
this.log(`Loader ${n} prepared with ${e.imagesLength()} images`);
|
|
3084
|
-
}).catch((
|
|
3085
|
-
console.warn(`Loader ${n} failed to prepare:`,
|
|
3048
|
+
}).catch((s) => {
|
|
3049
|
+
console.warn(`Loader ${n} failed to prepare:`, s);
|
|
3086
3050
|
}));
|
|
3087
3051
|
await Promise.all(i);
|
|
3088
3052
|
for (const e of this.loaders)
|
|
@@ -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 Je {
|
|
3128
3092
|
/**
|
|
3129
3093
|
* Create a new ImageFilter
|
|
3130
3094
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -3161,7 +3125,7 @@ class Ke {
|
|
|
3161
3125
|
// isAllowedDate(date: Date): boolean
|
|
3162
3126
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
3163
3127
|
}
|
|
3164
|
-
const
|
|
3128
|
+
const Ve = `
|
|
3165
3129
|
.fbn-ic-gallery {
|
|
3166
3130
|
position: relative;
|
|
3167
3131
|
width: 100%;
|
|
@@ -3242,37 +3206,37 @@ const Ze = `
|
|
|
3242
3206
|
display: none !important;
|
|
3243
3207
|
}
|
|
3244
3208
|
`;
|
|
3245
|
-
function
|
|
3209
|
+
function Ke() {
|
|
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 = Ve, document.head.appendChild(t);
|
|
3251
3215
|
}
|
|
3252
|
-
class
|
|
3216
|
+
class Ze {
|
|
3253
3217
|
constructor(t = {}) {
|
|
3254
|
-
this.fullConfig =
|
|
3218
|
+
this.fullConfig = Kt(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 ee(this.fullConfig.animation), this.layoutEngine = new Fe({
|
|
3255
3219
|
layout: this.fullConfig.layout,
|
|
3256
3220
|
image: this.fullConfig.image
|
|
3257
|
-
}), this.zoomEngine = new
|
|
3221
|
+
}), this.zoomEngine = new He(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;
|
|
3258
3222
|
const i = this.fullConfig.animation.entry || C.animation.entry;
|
|
3259
|
-
this.entryAnimationEngine = new
|
|
3223
|
+
this.entryAnimationEngine = new ue(
|
|
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 fe(
|
|
3265
3229
|
e,
|
|
3266
3230
|
i.timing?.duration ?? 600
|
|
3267
3231
|
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((n) => {
|
|
3268
3232
|
this.idleAnimationEngine?.resumeForImage(n);
|
|
3269
|
-
const
|
|
3233
|
+
const s = n;
|
|
3270
3234
|
requestAnimationFrame(() => {
|
|
3271
|
-
if (
|
|
3272
|
-
const r = this.imageElements.indexOf(
|
|
3235
|
+
if (s.matches(":hover") && this.fullConfig.styling?.hover) {
|
|
3236
|
+
const r = this.imageElements.indexOf(s);
|
|
3273
3237
|
if (r !== -1) {
|
|
3274
|
-
const
|
|
3275
|
-
st(
|
|
3238
|
+
const a = s.offsetHeight, c = s.cachedRenderedWidth;
|
|
3239
|
+
st(s, this.fullConfig.styling.hover, a, c), et(s, this.hoverClassName), this.hoveredImage = { element: s, layout: this.imageLayouts[r] };
|
|
3276
3240
|
}
|
|
3277
3241
|
}
|
|
3278
3242
|
});
|
|
@@ -3283,7 +3247,7 @@ class ti {
|
|
|
3283
3247
|
*/
|
|
3284
3248
|
createImageFilter() {
|
|
3285
3249
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
3286
|
-
return new
|
|
3250
|
+
return new Je(t);
|
|
3287
3251
|
}
|
|
3288
3252
|
/**
|
|
3289
3253
|
* Create appropriate image loader based on config
|
|
@@ -3294,7 +3258,7 @@ class ti {
|
|
|
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 Ye({
|
|
3298
3262
|
loaders: e,
|
|
3299
3263
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
3300
3264
|
});
|
|
@@ -3312,14 +3276,14 @@ class ti {
|
|
|
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 Xe(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 qe(n);
|
|
3323
3287
|
} else
|
|
3324
3288
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3325
3289
|
}
|
|
@@ -3328,7 +3292,7 @@ class ti {
|
|
|
3328
3292
|
*/
|
|
3329
3293
|
async init() {
|
|
3330
3294
|
try {
|
|
3331
|
-
if (
|
|
3295
|
+
if (Ke(), 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 ti {
|
|
|
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, We);
|
|
3341
3305
|
}
|
|
3342
3306
|
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3343
3307
|
} catch (t) {
|
|
@@ -3444,13 +3408,13 @@ class ti {
|
|
|
3444
3408
|
this.showError("No images found."), this.showLoading(!1);
|
|
3445
3409
|
return;
|
|
3446
3410
|
}
|
|
3447
|
-
const e = this.getContainerBounds(), n = this.getImageHeight(),
|
|
3411
|
+
const e = this.getContainerBounds(), n = this.getImageHeight(), s = window.innerWidth;
|
|
3448
3412
|
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3449
3413
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3450
3414
|
e,
|
|
3451
3415
|
t,
|
|
3452
3416
|
n,
|
|
3453
|
-
|
|
3417
|
+
s
|
|
3454
3418
|
);
|
|
3455
3419
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3456
3420
|
} catch (t) {
|
|
@@ -3467,10 +3431,10 @@ class ti {
|
|
|
3467
3431
|
if (!this.containerEl) return;
|
|
3468
3432
|
const e = this.getContainerBounds();
|
|
3469
3433
|
this.currentImageHeight = i;
|
|
3470
|
-
const n = this.loadGeneration,
|
|
3471
|
-
this.imageLayouts =
|
|
3434
|
+
const n = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3435
|
+
this.imageLayouts = s, this.displayQueue = [];
|
|
3472
3436
|
let r = 0;
|
|
3473
|
-
const
|
|
3437
|
+
const a = (l) => {
|
|
3474
3438
|
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(() => {
|
|
3475
3439
|
if (l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1", l.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || l.dataset.startRotation !== l.dataset.rotation || l.dataset.startScale !== l.dataset.scale)) {
|
|
3476
3440
|
const d = {
|
|
@@ -3479,15 +3443,15 @@ class ti {
|
|
|
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, x = l.dataset.startScale ? parseFloat(l.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3447
|
+
le({
|
|
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(),
|
|
@@ -3522,7 +3486,7 @@ class ti {
|
|
|
3522
3486
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3523
3487
|
for (; this.displayQueue.length > 0; ) {
|
|
3524
3488
|
const l = this.displayQueue.shift();
|
|
3525
|
-
l &&
|
|
3489
|
+
l && a(l);
|
|
3526
3490
|
}
|
|
3527
3491
|
return;
|
|
3528
3492
|
}
|
|
@@ -3533,7 +3497,7 @@ class ti {
|
|
|
3533
3497
|
}
|
|
3534
3498
|
if (this.displayQueue.length > 0) {
|
|
3535
3499
|
const l = this.displayQueue.shift();
|
|
3536
|
-
l &&
|
|
3500
|
+
l && a(l);
|
|
3537
3501
|
}
|
|
3538
3502
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3539
3503
|
}, this.fullConfig.animation.queue.interval);
|
|
@@ -3547,7 +3511,7 @@ class ti {
|
|
|
3547
3511
|
l.observe(this.containerEl);
|
|
3548
3512
|
} else
|
|
3549
3513
|
c();
|
|
3550
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()),
|
|
3514
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), s.forEach((l, u) => {
|
|
3551
3515
|
const h = document.createElement("div");
|
|
3552
3516
|
h.className = "fbn-ic-debug-center", h.style.position = "absolute", h.style.width = "12px", h.style.height = "12px", h.style.borderRadius = "50%", h.style.backgroundColor = "red", h.style.border = "2px solid yellow", h.style.zIndex = "9999", h.style.pointerEvents = "none";
|
|
3553
3517
|
const d = l.x, g = l.y;
|
|
@@ -3555,7 +3519,7 @@ class ti {
|
|
|
3555
3519
|
})), t.forEach((l, u) => {
|
|
3556
3520
|
const h = document.createElement("img");
|
|
3557
3521
|
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3558
|
-
const d =
|
|
3522
|
+
const d = s[u];
|
|
3559
3523
|
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), et(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3560
3524
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|
|
3561
3525
|
const g = h.cachedRenderedWidth;
|
|
@@ -3571,10 +3535,10 @@ class ti {
|
|
|
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 ti {
|
|
|
3582
3546
|
), y = this.entryAnimationEngine.calculateStartRotation(d.rotation), x = 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
|
x
|
|
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 || x !== 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 || x !== 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(x)), this.displayQueue.push(h);
|
|
3606
3570
|
}, h.onerror = () => r++, h.src = l;
|
|
3607
3571
|
});
|
|
3608
3572
|
}
|
|
@@ -3616,8 +3580,8 @@ class ti {
|
|
|
3616
3580
|
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator();
|
|
3617
3581
|
else {
|
|
3618
3582
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3619
|
-
const
|
|
3620
|
-
this.currentFocusIndex =
|
|
3583
|
+
const s = t.dataset.imageId;
|
|
3584
|
+
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.showFocusIndicator();
|
|
3621
3585
|
}
|
|
3622
3586
|
}
|
|
3623
3587
|
/**
|
|
@@ -3660,38 +3624,38 @@ class ti {
|
|
|
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
|
-
function
|
|
3627
|
+
function Qe() {
|
|
3664
3628
|
if (typeof document > "u") return;
|
|
3665
3629
|
const o = "fbn-ic-styles";
|
|
3666
3630
|
if (document.getElementById(o)) return;
|
|
3667
3631
|
const t = document.createElement("style");
|
|
3668
3632
|
t.id = o, t.textContent = Ut, document.head.appendChild(t);
|
|
3669
3633
|
}
|
|
3670
|
-
|
|
3671
|
-
function
|
|
3634
|
+
Qe();
|
|
3635
|
+
function ti() {
|
|
3672
3636
|
if (typeof document > "u") {
|
|
3673
3637
|
console.warn("ImageCloud: Document not available (not in browser environment)");
|
|
3674
3638
|
return;
|
|
3675
3639
|
}
|
|
3676
3640
|
const o = () => {
|
|
3677
|
-
const t = document.querySelectorAll("[data-image-cloud]
|
|
3641
|
+
const t = document.querySelectorAll("[data-image-cloud]");
|
|
3678
3642
|
t.length !== 0 && t.forEach((i) => {
|
|
3679
3643
|
const e = i;
|
|
3680
3644
|
if (!e.id) {
|
|
3681
3645
|
console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
|
|
3682
3646
|
return;
|
|
3683
3647
|
}
|
|
3684
|
-
const n = e.dataset.config
|
|
3685
|
-
let
|
|
3648
|
+
const n = e.dataset.config;
|
|
3649
|
+
let s;
|
|
3686
3650
|
if (n)
|
|
3687
3651
|
try {
|
|
3688
|
-
const
|
|
3689
|
-
|
|
3652
|
+
const a = JSON.parse(n);
|
|
3653
|
+
s = {
|
|
3690
3654
|
container: e.id,
|
|
3691
|
-
...
|
|
3655
|
+
...a
|
|
3692
3656
|
};
|
|
3693
|
-
} catch (
|
|
3694
|
-
console.error(`ImageCloud: Failed to parse configuration JSON for #${e.id}:`,
|
|
3657
|
+
} catch (a) {
|
|
3658
|
+
console.error(`ImageCloud: Failed to parse configuration JSON for #${e.id}:`, a);
|
|
3695
3659
|
return;
|
|
3696
3660
|
}
|
|
3697
3661
|
else {
|
|
@@ -3699,17 +3663,16 @@ function ii() {
|
|
|
3699
3663
|
Example: data-config='{"images":["https://..."]}'`);
|
|
3700
3664
|
return;
|
|
3701
3665
|
}
|
|
3702
|
-
new
|
|
3703
|
-
console.error("ImageCloud initialization failed:",
|
|
3666
|
+
new Ze(s).init().catch((a) => {
|
|
3667
|
+
console.error("ImageCloud initialization failed:", a);
|
|
3704
3668
|
});
|
|
3705
3669
|
});
|
|
3706
3670
|
};
|
|
3707
3671
|
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", o) : o();
|
|
3708
3672
|
}
|
|
3709
|
-
|
|
3673
|
+
ti();
|
|
3710
3674
|
export {
|
|
3711
|
-
|
|
3712
|
-
ti as
|
|
3713
|
-
ii as autoInitialize
|
|
3675
|
+
Ze as ImageCloud,
|
|
3676
|
+
ti as autoInitialize
|
|
3714
3677
|
};
|
|
3715
3678
|
//# sourceMappingURL=image-cloud-auto-init.js.map
|