@frybynite/image-cloud 0.2.8 → 0.3.0
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 +15 -31
- package/dist/image-cloud-auto-init.js +808 -788
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +624 -603
- 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 +62 -34
- package/package.json +1 -1
package/dist/image-cloud.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const Et = Object.freeze({
|
|
2
2
|
none: "none",
|
|
3
3
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
4
4
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
@@ -8,12 +8,12 @@ const It = Object.freeze({
|
|
|
8
8
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
9
9
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
10
10
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
11
|
-
}),
|
|
11
|
+
}), Ct = Object.freeze({
|
|
12
12
|
gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
|
|
13
13
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
14
14
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
15
15
|
snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
|
|
16
|
-
}),
|
|
16
|
+
}), Ft = Object.freeze({
|
|
17
17
|
gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
|
|
18
18
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
19
19
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
@@ -59,7 +59,7 @@ const It = Object.freeze({
|
|
|
59
59
|
}), kt = Object.freeze({
|
|
60
60
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
61
61
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
62
|
-
}),
|
|
62
|
+
}), Gt = Object.freeze({
|
|
63
63
|
mode: "adaptive",
|
|
64
64
|
// Default to adaptive sizing
|
|
65
65
|
minSize: 50,
|
|
@@ -71,38 +71,28 @@ const It = Object.freeze({
|
|
|
71
71
|
// No variance by default
|
|
72
72
|
max: 1
|
|
73
73
|
})
|
|
74
|
-
}),
|
|
74
|
+
}), Wt = Object.freeze({
|
|
75
75
|
mode: "none",
|
|
76
76
|
range: Object.freeze({
|
|
77
77
|
min: -15,
|
|
78
78
|
max: 15
|
|
79
79
|
})
|
|
80
80
|
}), Dt = Object.freeze({
|
|
81
|
-
sizing:
|
|
82
|
-
rotation:
|
|
83
|
-
}),
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
static: Object.freeze({
|
|
97
|
-
sources: [],
|
|
98
|
-
// Must be provided by user
|
|
99
|
-
validateUrls: !0,
|
|
100
|
-
validationTimeout: 5e3,
|
|
101
|
-
validationMethod: "head",
|
|
102
|
-
failOnAllMissing: !0,
|
|
103
|
-
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"],
|
|
104
|
-
debugLogging: !1
|
|
105
|
-
})
|
|
81
|
+
sizing: Gt,
|
|
82
|
+
rotation: Wt
|
|
83
|
+
}), Ut = Object.freeze({
|
|
84
|
+
validateUrls: !0,
|
|
85
|
+
validationTimeout: 5e3,
|
|
86
|
+
validationMethod: "head",
|
|
87
|
+
failOnAllMissing: !0,
|
|
88
|
+
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"],
|
|
89
|
+
debugLogging: !1
|
|
90
|
+
}), S = Object.freeze({
|
|
91
|
+
// Loader configuration (always an array, composite behavior is implicit)
|
|
92
|
+
loaders: [],
|
|
93
|
+
// Shared loader settings
|
|
94
|
+
config: Object.freeze({
|
|
95
|
+
loaders: Ut
|
|
106
96
|
}),
|
|
107
97
|
// Image sizing and rotation configuration
|
|
108
98
|
image: Dt,
|
|
@@ -241,7 +231,7 @@ function rt(o, t) {
|
|
|
241
231
|
const e = { ...o };
|
|
242
232
|
return t.border !== void 0 && (e.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
|
|
243
233
|
}
|
|
244
|
-
function
|
|
234
|
+
function qt(o, t) {
|
|
245
235
|
if (!t) return { ...o };
|
|
246
236
|
const e = rt(o.default, t.default), i = rt(
|
|
247
237
|
rt(e, o.hover),
|
|
@@ -256,27 +246,27 @@ function Wt(o, t) {
|
|
|
256
246
|
focused: n
|
|
257
247
|
};
|
|
258
248
|
}
|
|
259
|
-
function
|
|
260
|
-
var i, n,
|
|
249
|
+
function Yt(o, t) {
|
|
250
|
+
var i, n, a, r, s, h, l, u;
|
|
261
251
|
if (!t) return { ...o };
|
|
262
252
|
const e = { ...o };
|
|
263
253
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
264
254
|
...o.sizing,
|
|
265
255
|
...t.sizing
|
|
266
256
|
}, t.sizing.variance)) {
|
|
267
|
-
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((n = (i = o.sizing) == null ? void 0 : i.variance) == null ? void 0 : n.min) ?? 1, m = c.max !== void 0 && c.max >= 1 && c.max <= 1.75 ? c.max : ((r = (
|
|
257
|
+
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((n = (i = o.sizing) == null ? void 0 : i.variance) == null ? void 0 : n.min) ?? 1, m = c.max !== void 0 && c.max >= 1 && c.max <= 1.75 ? c.max : ((r = (a = o.sizing) == null ? void 0 : a.variance) == null ? void 0 : r.max) ?? 1;
|
|
268
258
|
e.sizing.variance = { min: d, max: m };
|
|
269
259
|
}
|
|
270
260
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
271
261
|
...o.rotation,
|
|
272
262
|
...t.rotation
|
|
273
263
|
}, t.rotation.range)) {
|
|
274
|
-
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (
|
|
264
|
+
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (s = o.rotation) == null ? void 0 : s.range) == null ? void 0 : h.min) ?? -15, m = c.max !== void 0 && c.max >= 0 && c.max <= 180 ? c.max : ((u = (l = o.rotation) == null ? void 0 : l.range) == null ? void 0 : u.max) ?? 15;
|
|
275
265
|
e.rotation.range = { min: d, max: m };
|
|
276
266
|
}
|
|
277
267
|
return e;
|
|
278
268
|
}
|
|
279
|
-
function
|
|
269
|
+
function Xt(o) {
|
|
280
270
|
var e;
|
|
281
271
|
const t = (e = o.layout) == null ? void 0 : e.rotation;
|
|
282
272
|
if (t && "enabled" in t)
|
|
@@ -287,7 +277,7 @@ function Yt(o) {
|
|
|
287
277
|
}
|
|
288
278
|
};
|
|
289
279
|
}
|
|
290
|
-
function
|
|
280
|
+
function Bt(o) {
|
|
291
281
|
var e, i;
|
|
292
282
|
const t = (i = (e = o.layout) == null ? void 0 : e.sizing) == null ? void 0 : i.variance;
|
|
293
283
|
if (t)
|
|
@@ -299,113 +289,112 @@ function Xt(o) {
|
|
|
299
289
|
}
|
|
300
290
|
};
|
|
301
291
|
}
|
|
302
|
-
function
|
|
303
|
-
var
|
|
304
|
-
const t =
|
|
292
|
+
function Jt(o = {}) {
|
|
293
|
+
var h, l;
|
|
294
|
+
const t = Xt(o), e = Bt(o);
|
|
305
295
|
let i = o.image;
|
|
306
296
|
(t || e) && (i = {
|
|
307
297
|
...e || {},
|
|
308
298
|
...t || {},
|
|
309
299
|
...i
|
|
310
|
-
}, i.rotation && (t != null && t.rotation) && ((
|
|
300
|
+
}, i.rotation && (t != null && t.rotation) && ((h = o.image) != null && h.rotation) && (i.rotation = {
|
|
311
301
|
...t.rotation,
|
|
312
302
|
...o.image.rotation
|
|
313
303
|
}));
|
|
314
|
-
const n =
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
304
|
+
const n = [...o.loaders ?? []];
|
|
305
|
+
o.images && o.images.length > 0 && n.unshift({
|
|
306
|
+
static: {
|
|
307
|
+
sources: [{ urls: o.images }]
|
|
308
|
+
}
|
|
309
|
+
});
|
|
310
|
+
const r = {
|
|
311
|
+
loaders: {
|
|
312
|
+
...Ut,
|
|
313
|
+
...((l = o.config) == null ? void 0 : l.loaders) ?? {}
|
|
314
|
+
}
|
|
315
|
+
}, s = {
|
|
316
|
+
loaders: n,
|
|
317
|
+
config: r,
|
|
318
|
+
image: Yt(Dt, i),
|
|
319
|
+
layout: { ...S.layout },
|
|
320
|
+
animation: { ...S.animation },
|
|
321
|
+
interaction: { ...S.interaction },
|
|
322
|
+
rendering: { ...S.rendering },
|
|
323
|
+
styling: qt($t, o.styling),
|
|
324
|
+
debug: S.debug
|
|
323
325
|
};
|
|
324
|
-
return o.
|
|
325
|
-
...
|
|
326
|
-
...o.loader
|
|
327
|
-
}, o.loader.googleDrive && (n.loader.googleDrive = {
|
|
328
|
-
...y.loader.googleDrive,
|
|
329
|
-
...o.loader.googleDrive,
|
|
330
|
-
sources: o.loader.googleDrive.sources || y.loader.googleDrive.sources,
|
|
331
|
-
allowedExtensions: o.loader.googleDrive.allowedExtensions || y.loader.googleDrive.allowedExtensions
|
|
332
|
-
}), o.loader.static && (n.loader.static = {
|
|
333
|
-
...y.loader.static,
|
|
334
|
-
...o.loader.static,
|
|
335
|
-
sources: o.loader.static.sources || y.loader.static.sources,
|
|
336
|
-
allowedExtensions: o.loader.static.allowedExtensions || y.loader.static.allowedExtensions
|
|
337
|
-
})), o.layout && (n.layout = {
|
|
338
|
-
...y.layout,
|
|
326
|
+
return o.layout && (s.layout = {
|
|
327
|
+
...S.layout,
|
|
339
328
|
...o.layout
|
|
340
|
-
}, o.layout.responsive && (
|
|
341
|
-
...
|
|
342
|
-
mobile: o.layout.responsive.mobile ? { ...
|
|
343
|
-
tablet: o.layout.responsive.tablet ? { ...
|
|
344
|
-
}), o.layout.spacing && (
|
|
345
|
-
...
|
|
329
|
+
}, o.layout.responsive && (s.layout.responsive = {
|
|
330
|
+
...S.layout.responsive,
|
|
331
|
+
mobile: o.layout.responsive.mobile ? { ...S.layout.responsive.mobile, ...o.layout.responsive.mobile } : S.layout.responsive.mobile,
|
|
332
|
+
tablet: o.layout.responsive.tablet ? { ...S.layout.responsive.tablet, ...o.layout.responsive.tablet } : S.layout.responsive.tablet
|
|
333
|
+
}), o.layout.spacing && (s.layout.spacing = {
|
|
334
|
+
...S.layout.spacing,
|
|
346
335
|
...o.layout.spacing
|
|
347
|
-
})), o.animation && (
|
|
348
|
-
...
|
|
336
|
+
})), o.animation && (s.animation = {
|
|
337
|
+
...S.animation,
|
|
349
338
|
...o.animation
|
|
350
|
-
}, o.animation.easing && (
|
|
351
|
-
...
|
|
339
|
+
}, o.animation.easing && (s.animation.easing = {
|
|
340
|
+
...S.animation.easing,
|
|
352
341
|
...o.animation.easing
|
|
353
|
-
}), o.animation.queue && (
|
|
354
|
-
...
|
|
342
|
+
}), o.animation.queue && (s.animation.queue = {
|
|
343
|
+
...S.animation.queue,
|
|
355
344
|
...o.animation.queue
|
|
356
|
-
}), o.animation.performance && (
|
|
357
|
-
...
|
|
345
|
+
}), o.animation.performance && (s.animation.performance = {
|
|
346
|
+
...S.animation.performance,
|
|
358
347
|
...o.animation.performance
|
|
359
|
-
}), o.animation.entry && (
|
|
360
|
-
...
|
|
348
|
+
}), o.animation.entry && (s.animation.entry = {
|
|
349
|
+
...S.animation.entry,
|
|
361
350
|
...o.animation.entry,
|
|
362
351
|
start: o.animation.entry.start ? {
|
|
363
|
-
...
|
|
352
|
+
...S.animation.entry.start,
|
|
364
353
|
...o.animation.entry.start,
|
|
365
|
-
circular: o.animation.entry.start.circular ? { ...
|
|
366
|
-
} :
|
|
367
|
-
timing: o.animation.entry.timing ? { ...
|
|
368
|
-
path: o.animation.entry.path ? { ...Tt, ...o.animation.entry.path } :
|
|
369
|
-
rotation: o.animation.entry.rotation ? { ...Rt, ...o.animation.entry.rotation } :
|
|
370
|
-
scale: o.animation.entry.scale ? { ...At, ...o.animation.entry.scale } :
|
|
371
|
-
})), o.interaction && (
|
|
372
|
-
...
|
|
354
|
+
circular: o.animation.entry.start.circular ? { ...S.animation.entry.start.circular, ...o.animation.entry.start.circular } : S.animation.entry.start.circular
|
|
355
|
+
} : S.animation.entry.start,
|
|
356
|
+
timing: o.animation.entry.timing ? { ...S.animation.entry.timing, ...o.animation.entry.timing } : S.animation.entry.timing,
|
|
357
|
+
path: o.animation.entry.path ? { ...Tt, ...o.animation.entry.path } : S.animation.entry.path,
|
|
358
|
+
rotation: o.animation.entry.rotation ? { ...Rt, ...o.animation.entry.rotation } : S.animation.entry.rotation,
|
|
359
|
+
scale: o.animation.entry.scale ? { ...At, ...o.animation.entry.scale } : S.animation.entry.scale
|
|
360
|
+
})), o.interaction && (s.interaction = {
|
|
361
|
+
...S.interaction,
|
|
373
362
|
...o.interaction
|
|
374
|
-
}, o.interaction.focus && (
|
|
375
|
-
...
|
|
363
|
+
}, o.interaction.focus && (s.interaction.focus = {
|
|
364
|
+
...S.interaction.focus,
|
|
376
365
|
...o.interaction.focus
|
|
377
|
-
}), o.interaction.navigation && (
|
|
378
|
-
...
|
|
366
|
+
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
367
|
+
...S.interaction.navigation,
|
|
379
368
|
...o.interaction.navigation
|
|
380
|
-
}), o.interaction.gestures && (
|
|
381
|
-
...
|
|
369
|
+
}), o.interaction.gestures && (s.interaction.gestures = {
|
|
370
|
+
...S.interaction.gestures,
|
|
382
371
|
...o.interaction.gestures
|
|
383
|
-
})), o.rendering && (
|
|
384
|
-
...
|
|
372
|
+
})), o.rendering && (s.rendering = {
|
|
373
|
+
...S.rendering,
|
|
385
374
|
...o.rendering
|
|
386
|
-
}, o.rendering.responsive && (
|
|
387
|
-
...
|
|
375
|
+
}, o.rendering.responsive && (s.rendering.responsive = {
|
|
376
|
+
...S.rendering.responsive,
|
|
388
377
|
...o.rendering.responsive,
|
|
389
|
-
breakpoints: o.rendering.responsive.breakpoints ? { ...
|
|
390
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection :
|
|
391
|
-
}), o.rendering.ui && (
|
|
392
|
-
...
|
|
378
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...S.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : S.rendering.responsive.breakpoints,
|
|
379
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : S.rendering.responsive.mobileDetection
|
|
380
|
+
}), o.rendering.ui && (s.rendering.ui = {
|
|
381
|
+
...S.rendering.ui,
|
|
393
382
|
...o.rendering.ui
|
|
394
|
-
}), o.rendering.performance && (
|
|
395
|
-
...
|
|
383
|
+
}), o.rendering.performance && (s.rendering.performance = {
|
|
384
|
+
...S.rendering.performance,
|
|
396
385
|
...o.rendering.performance
|
|
397
|
-
})), o.debug !== void 0 && (
|
|
386
|
+
})), o.debug !== void 0 && (s.debug = o.debug), s;
|
|
398
387
|
}
|
|
399
388
|
function Vt(o, t) {
|
|
400
389
|
return { ...o ? zt[o] : zt.playful, ...t };
|
|
401
390
|
}
|
|
402
391
|
function Kt(o, t) {
|
|
403
|
-
return { ...o ?
|
|
392
|
+
return { ...o ? Ct[o] : Ct.gentle, ...t };
|
|
404
393
|
}
|
|
405
394
|
function Zt(o, t) {
|
|
406
|
-
return { ...o ?
|
|
395
|
+
return { ...o ? Ft[o] : Ft.gentle, ...t };
|
|
407
396
|
}
|
|
408
|
-
class
|
|
397
|
+
class Qt {
|
|
409
398
|
constructor(t) {
|
|
410
399
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
411
400
|
}
|
|
@@ -430,9 +419,9 @@ class Jt {
|
|
|
430
419
|
* @param easing - CSS easing function (optional)
|
|
431
420
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
432
421
|
*/
|
|
433
|
-
animateTransformCancellable(t, e, i, n = null,
|
|
422
|
+
animateTransformCancellable(t, e, i, n = null, a = null) {
|
|
434
423
|
this.cancelAllAnimations(t);
|
|
435
|
-
const r = n ?? this.config.duration,
|
|
424
|
+
const r = n ?? this.config.duration, s = a ?? this.config.easing.default, h = this.buildTransformString(e), l = this.buildTransformString(i);
|
|
436
425
|
t.style.transition = "none";
|
|
437
426
|
const u = t.animate(
|
|
438
427
|
[
|
|
@@ -441,7 +430,7 @@ class Jt {
|
|
|
441
430
|
],
|
|
442
431
|
{
|
|
443
432
|
duration: r,
|
|
444
|
-
easing:
|
|
433
|
+
easing: s,
|
|
445
434
|
fill: "forwards"
|
|
446
435
|
// Keep final state after animation
|
|
447
436
|
}
|
|
@@ -501,8 +490,8 @@ class Jt {
|
|
|
501
490
|
const i = getComputedStyle(t).transform;
|
|
502
491
|
if (i === "none" || !i)
|
|
503
492
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
504
|
-
const n = new DOMMatrix(i),
|
|
505
|
-
return { x:
|
|
493
|
+
const n = new DOMMatrix(i), a = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), s = n.e, h = n.f;
|
|
494
|
+
return { x: s, y: h, rotation: r, scale: a };
|
|
506
495
|
}
|
|
507
496
|
/**
|
|
508
497
|
* Check if an element has an active animation
|
|
@@ -529,10 +518,10 @@ class Jt {
|
|
|
529
518
|
* @returns Promise that resolves when animation completes
|
|
530
519
|
*/
|
|
531
520
|
animateTransform(t, e, i = null, n = null) {
|
|
532
|
-
return new Promise((
|
|
533
|
-
const r = i ?? this.config.duration,
|
|
534
|
-
t.style.transition = `transform ${r}ms ${
|
|
535
|
-
|
|
521
|
+
return new Promise((a) => {
|
|
522
|
+
const r = i ?? this.config.duration, s = n ?? this.config.easing.default;
|
|
523
|
+
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
|
|
524
|
+
a();
|
|
536
525
|
}, r);
|
|
537
526
|
});
|
|
538
527
|
}
|
|
@@ -564,8 +553,8 @@ class Jt {
|
|
|
564
553
|
function st(o, t, e) {
|
|
565
554
|
return o + (t - o) * e;
|
|
566
555
|
}
|
|
567
|
-
function
|
|
568
|
-
const { overshoot: n, bounces:
|
|
556
|
+
function te(o, t, e, i) {
|
|
557
|
+
const { overshoot: n, bounces: a, decayRatio: r } = i, s = e.x - t.x, h = e.y - t.y, l = ee(a, r);
|
|
569
558
|
let u = 0, c = 0, d = 1, m = n, b = !1;
|
|
570
559
|
for (let g = 0; g < l.length; g++)
|
|
571
560
|
if (o <= l[g].time) {
|
|
@@ -579,30 +568,30 @@ function Qt(o, t, e, i) {
|
|
|
579
568
|
u = gt(p);
|
|
580
569
|
else {
|
|
581
570
|
const g = l.find(
|
|
582
|
-
(
|
|
571
|
+
(y, v) => y.time > c && v > 0 && l[v - 1].isOvershoot
|
|
583
572
|
), f = 1 + ((g == null ? void 0 : g.overshoot) || m);
|
|
584
573
|
u = st(f, 1, gt(p));
|
|
585
574
|
}
|
|
586
575
|
return {
|
|
587
|
-
x: t.x +
|
|
576
|
+
x: t.x + s * u,
|
|
588
577
|
y: t.y + h * u
|
|
589
578
|
};
|
|
590
579
|
}
|
|
591
|
-
function
|
|
580
|
+
function ee(o, t) {
|
|
592
581
|
const e = [];
|
|
593
582
|
let i = 0.6;
|
|
594
583
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
595
584
|
let n = 0.15;
|
|
596
585
|
const r = 0.4 / (o * 2);
|
|
597
|
-
for (let
|
|
586
|
+
for (let s = 0; s < o; s++)
|
|
598
587
|
i += r, e.push({ time: i, overshoot: n, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
599
588
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
600
589
|
}
|
|
601
|
-
function
|
|
602
|
-
const { stiffness: n, damping:
|
|
590
|
+
function ie(o, t, e, i) {
|
|
591
|
+
const { stiffness: n, damping: a, mass: r, oscillations: s } = i, h = e.x - t.x, l = e.y - t.y, u = Math.sqrt(n / r), c = a / (2 * Math.sqrt(n * r));
|
|
603
592
|
let d;
|
|
604
593
|
if (c < 1) {
|
|
605
|
-
const m = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u * o * 3), p = Math.cos(m * o *
|
|
594
|
+
const m = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u * o * 3), p = Math.cos(m * o * s * Math.PI);
|
|
606
595
|
d = 1 - b * p;
|
|
607
596
|
} else
|
|
608
597
|
d = 1 - Math.exp(-u * o * 3);
|
|
@@ -611,8 +600,8 @@ function ee(o, t, e, i) {
|
|
|
611
600
|
y: t.y + l * d
|
|
612
601
|
};
|
|
613
602
|
}
|
|
614
|
-
function
|
|
615
|
-
const { amplitude: n, frequency:
|
|
603
|
+
function ne(o, t, e, i) {
|
|
604
|
+
const { amplitude: n, frequency: a, decay: r, decayRate: s, phase: h } = i, l = e.x - t.x, u = e.y - t.y, c = Math.sqrt(l * l + u * u), d = c > 0 ? -u / c : 0, m = c > 0 ? l / c : 1, b = a * Math.PI * 2 * o + h, p = r ? Math.pow(1 - o, s) : 1, g = n * Math.sin(b) * p, f = oe(o);
|
|
616
605
|
return {
|
|
617
606
|
x: st(t.x, e.x, f) + g * d,
|
|
618
607
|
y: st(t.y, e.y, f) + g * m
|
|
@@ -621,42 +610,42 @@ function ie(o, t, e, i) {
|
|
|
621
610
|
function gt(o) {
|
|
622
611
|
return 1 - (1 - o) * (1 - o);
|
|
623
612
|
}
|
|
624
|
-
function
|
|
613
|
+
function oe(o) {
|
|
625
614
|
return 1 - Math.pow(1 - o, 3);
|
|
626
615
|
}
|
|
627
|
-
function
|
|
628
|
-
const { amplitude: i, frequency: n, decay:
|
|
616
|
+
function se(o, t, e) {
|
|
617
|
+
const { amplitude: i, frequency: n, decay: a } = e, r = Math.sin(o * n * Math.PI * 2), s = a ? Math.pow(1 - o, 2) : 1, h = i * r * s;
|
|
629
618
|
return t + h;
|
|
630
619
|
}
|
|
631
|
-
function
|
|
632
|
-
const { overshoot: i, bounces: n } = e,
|
|
633
|
-
|
|
620
|
+
function ae(o, t, e) {
|
|
621
|
+
const { overshoot: i, bounces: n } = e, a = [];
|
|
622
|
+
a.push({ time: 0.5, scale: i });
|
|
634
623
|
let r = i;
|
|
635
|
-
const
|
|
624
|
+
const s = 0.5, l = 0.5 / (n * 2);
|
|
636
625
|
let u = 0.5;
|
|
637
626
|
for (let d = 0; d < n; d++) {
|
|
638
|
-
const m = 1 - (r - 1) *
|
|
639
|
-
u += l,
|
|
627
|
+
const m = 1 - (r - 1) * s;
|
|
628
|
+
u += l, a.push({ time: u, scale: m }), r = 1 + (r - 1) * s * s, u += l, d < n - 1 && a.push({ time: u, scale: r });
|
|
640
629
|
}
|
|
641
|
-
|
|
630
|
+
a.push({ time: 1, scale: 1 });
|
|
642
631
|
let c = 1;
|
|
643
|
-
for (let d = 0; d <
|
|
644
|
-
if (o <=
|
|
645
|
-
const m = d === 0 ? 0 :
|
|
646
|
-
c = b + (
|
|
632
|
+
for (let d = 0; d < a.length; d++)
|
|
633
|
+
if (o <= a[d].time) {
|
|
634
|
+
const m = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (o - m) / (a[d].time - m), g = gt(p);
|
|
635
|
+
c = b + (a[d].scale - b) * g;
|
|
647
636
|
break;
|
|
648
637
|
}
|
|
649
638
|
return c * t;
|
|
650
639
|
}
|
|
651
|
-
function
|
|
640
|
+
function re(o) {
|
|
652
641
|
const {
|
|
653
642
|
element: t,
|
|
654
643
|
startPosition: e,
|
|
655
644
|
endPosition: i,
|
|
656
645
|
pathConfig: n,
|
|
657
|
-
duration:
|
|
646
|
+
duration: a,
|
|
658
647
|
imageWidth: r,
|
|
659
|
-
imageHeight:
|
|
648
|
+
imageHeight: s,
|
|
660
649
|
rotation: h,
|
|
661
650
|
scale: l,
|
|
662
651
|
onComplete: u,
|
|
@@ -664,58 +653,58 @@ function ae(o) {
|
|
|
664
653
|
startRotation: d,
|
|
665
654
|
scaleConfig: m,
|
|
666
655
|
startScale: b
|
|
667
|
-
} = o, p = n.type, g = d !== void 0 && d !== h, f = (c == null ? void 0 : c.mode) === "wobble",
|
|
668
|
-
if ((p === "linear" || p === "arc") && !
|
|
656
|
+
} = o, p = n.type, g = d !== void 0 && d !== h, f = (c == null ? void 0 : c.mode) === "wobble", y = (c == null ? void 0 : c.wobble) || { amplitude: 15, frequency: 3, decay: !0 }, v = g || f, I = b !== void 0 && b !== l, R = (m == null ? void 0 : m.mode) === "pop", w = (m == null ? void 0 : m.pop) || { overshoot: 1.2, bounces: 1 };
|
|
657
|
+
if ((p === "linear" || p === "arc") && !v && !(I || R)) {
|
|
669
658
|
u && u();
|
|
670
659
|
return;
|
|
671
660
|
}
|
|
672
|
-
const
|
|
673
|
-
function
|
|
674
|
-
const
|
|
661
|
+
const N = performance.now(), P = -r / 2, D = -s / 2;
|
|
662
|
+
function U(j) {
|
|
663
|
+
const C = j - N, x = Math.min(C / a, 1);
|
|
675
664
|
let A;
|
|
676
665
|
switch (p) {
|
|
677
666
|
case "bounce": {
|
|
678
|
-
const
|
|
667
|
+
const H = Vt(
|
|
679
668
|
n.bouncePreset,
|
|
680
669
|
n.bounce
|
|
681
670
|
);
|
|
682
|
-
A =
|
|
671
|
+
A = te(x, e, i, H);
|
|
683
672
|
break;
|
|
684
673
|
}
|
|
685
674
|
case "elastic": {
|
|
686
|
-
const
|
|
675
|
+
const H = Kt(
|
|
687
676
|
n.elasticPreset,
|
|
688
677
|
n.elastic
|
|
689
678
|
);
|
|
690
|
-
A =
|
|
679
|
+
A = ie(x, e, i, H);
|
|
691
680
|
break;
|
|
692
681
|
}
|
|
693
682
|
case "wave": {
|
|
694
|
-
const
|
|
683
|
+
const H = Zt(
|
|
695
684
|
n.wavePreset,
|
|
696
685
|
n.wave
|
|
697
686
|
);
|
|
698
|
-
A =
|
|
687
|
+
A = ne(x, e, i, H);
|
|
699
688
|
break;
|
|
700
689
|
}
|
|
701
690
|
default:
|
|
702
691
|
A = {
|
|
703
|
-
x: st(e.x, i.x,
|
|
704
|
-
y: st(e.y, i.y,
|
|
692
|
+
x: st(e.x, i.x, x),
|
|
693
|
+
y: st(e.y, i.y, x)
|
|
705
694
|
};
|
|
706
695
|
}
|
|
707
696
|
const O = A.x - i.x, z = A.y - i.y;
|
|
708
697
|
let T;
|
|
709
|
-
f ? T =
|
|
698
|
+
f ? T = se(x, h, y) : g ? T = st(d, h, x) : T = h;
|
|
710
699
|
let M;
|
|
711
|
-
R ? M =
|
|
700
|
+
R ? M = ae(x, l, w) : I ? M = st(b, l, x) : M = l, t.style.transform = `translate(${P}px, ${D}px) translate(${O}px, ${z}px) rotate(${T}deg) scale(${M})`, x < 1 ? requestAnimationFrame(U) : (t.style.transform = `translate(${P}px, ${D}px) rotate(${h}deg) scale(${l})`, u && u());
|
|
712
701
|
}
|
|
713
|
-
requestAnimationFrame(
|
|
702
|
+
requestAnimationFrame(U);
|
|
714
703
|
}
|
|
715
|
-
function
|
|
704
|
+
function ce(o) {
|
|
716
705
|
return o === "bounce" || o === "elastic" || o === "wave";
|
|
717
706
|
}
|
|
718
|
-
const
|
|
707
|
+
const le = {
|
|
719
708
|
radial: "center",
|
|
720
709
|
spiral: "center",
|
|
721
710
|
grid: "top",
|
|
@@ -723,7 +712,7 @@ const ce = {
|
|
|
723
712
|
random: "nearest-edge",
|
|
724
713
|
wave: "left"
|
|
725
714
|
};
|
|
726
|
-
class
|
|
715
|
+
class he {
|
|
727
716
|
constructor(t, e) {
|
|
728
717
|
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || Tt, this.rotationConfig = t.rotation || Rt, this.scaleConfig = t.scale || At;
|
|
729
718
|
}
|
|
@@ -731,77 +720,77 @@ class le {
|
|
|
731
720
|
* Get the effective start position, considering layout-aware defaults
|
|
732
721
|
*/
|
|
733
722
|
resolveStartPosition() {
|
|
734
|
-
return this.config.start.position ? this.config.start.position :
|
|
723
|
+
return this.config.start.position ? this.config.start.position : le[this.layoutAlgorithm] || "nearest-edge";
|
|
735
724
|
}
|
|
736
725
|
/**
|
|
737
726
|
* Calculate the starting position for an image's entry animation
|
|
738
727
|
*/
|
|
739
|
-
calculateStartPosition(t, e, i, n,
|
|
740
|
-
const r = this.resolvedStartPosition,
|
|
728
|
+
calculateStartPosition(t, e, i, n, a) {
|
|
729
|
+
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
741
730
|
switch (r) {
|
|
742
731
|
case "nearest-edge":
|
|
743
|
-
return this.calculateNearestEdge(t, e, i,
|
|
732
|
+
return this.calculateNearestEdge(t, e, i, s);
|
|
744
733
|
case "top":
|
|
745
|
-
return this.calculateEdgePosition("top", t, e, i,
|
|
734
|
+
return this.calculateEdgePosition("top", t, e, i, s);
|
|
746
735
|
case "bottom":
|
|
747
|
-
return this.calculateEdgePosition("bottom", t, e, i,
|
|
736
|
+
return this.calculateEdgePosition("bottom", t, e, i, s);
|
|
748
737
|
case "left":
|
|
749
|
-
return this.calculateEdgePosition("left", t, e, i,
|
|
738
|
+
return this.calculateEdgePosition("left", t, e, i, s);
|
|
750
739
|
case "right":
|
|
751
|
-
return this.calculateEdgePosition("right", t, e, i,
|
|
740
|
+
return this.calculateEdgePosition("right", t, e, i, s);
|
|
752
741
|
case "center":
|
|
753
742
|
return this.calculateCenterPosition(i, t, e);
|
|
754
743
|
case "random-edge":
|
|
755
|
-
return this.calculateRandomEdge(t, e, i,
|
|
744
|
+
return this.calculateRandomEdge(t, e, i, s);
|
|
756
745
|
case "circular":
|
|
757
746
|
return this.calculateCircularPosition(
|
|
758
747
|
t,
|
|
759
748
|
e,
|
|
760
749
|
i,
|
|
761
750
|
n,
|
|
762
|
-
|
|
751
|
+
a
|
|
763
752
|
);
|
|
764
753
|
default:
|
|
765
|
-
return this.calculateNearestEdge(t, e, i,
|
|
754
|
+
return this.calculateNearestEdge(t, e, i, s);
|
|
766
755
|
}
|
|
767
756
|
}
|
|
768
757
|
/**
|
|
769
758
|
* Calculate start position from the nearest edge (current default behavior)
|
|
770
759
|
*/
|
|
771
760
|
calculateNearestEdge(t, e, i, n) {
|
|
772
|
-
const
|
|
761
|
+
const a = t.x, r = t.y, s = a, h = i.width - a, l = r, u = i.height - r, c = Math.min(s, h, l, u);
|
|
773
762
|
let d = t.x, m = t.y;
|
|
774
|
-
return c ===
|
|
763
|
+
return c === s ? d = -(e.width + n) : c === h ? d = i.width + n : c === l ? m = -(e.height + n) : m = i.height + n, { x: d, y: m };
|
|
775
764
|
}
|
|
776
765
|
/**
|
|
777
766
|
* Calculate start position from a specific edge
|
|
778
767
|
*/
|
|
779
|
-
calculateEdgePosition(t, e, i, n,
|
|
780
|
-
let r = e.x,
|
|
768
|
+
calculateEdgePosition(t, e, i, n, a) {
|
|
769
|
+
let r = e.x, s = e.y;
|
|
781
770
|
switch (t) {
|
|
782
771
|
case "top":
|
|
783
|
-
|
|
772
|
+
s = -(i.height + a);
|
|
784
773
|
break;
|
|
785
774
|
case "bottom":
|
|
786
|
-
|
|
775
|
+
s = n.height + a;
|
|
787
776
|
break;
|
|
788
777
|
case "left":
|
|
789
|
-
r = -(i.width +
|
|
778
|
+
r = -(i.width + a);
|
|
790
779
|
break;
|
|
791
780
|
case "right":
|
|
792
|
-
r = n.width +
|
|
781
|
+
r = n.width + a;
|
|
793
782
|
break;
|
|
794
783
|
}
|
|
795
|
-
return { x: r, y:
|
|
784
|
+
return { x: r, y: s };
|
|
796
785
|
}
|
|
797
786
|
/**
|
|
798
787
|
* Calculate start position from center with scale animation
|
|
799
788
|
*/
|
|
800
789
|
calculateCenterPosition(t, e, i) {
|
|
801
|
-
const n = t.width / 2,
|
|
790
|
+
const n = t.width / 2, a = t.height / 2;
|
|
802
791
|
return {
|
|
803
792
|
x: n,
|
|
804
|
-
y:
|
|
793
|
+
y: a,
|
|
805
794
|
useScale: !0
|
|
806
795
|
// Signal to use scale animation from 0
|
|
807
796
|
};
|
|
@@ -810,14 +799,14 @@ class le {
|
|
|
810
799
|
* Calculate start position from a random edge
|
|
811
800
|
*/
|
|
812
801
|
calculateRandomEdge(t, e, i, n) {
|
|
813
|
-
const
|
|
802
|
+
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
814
803
|
return this.calculateEdgePosition(r, t, e, i, n);
|
|
815
804
|
}
|
|
816
805
|
/**
|
|
817
806
|
* Calculate start position on a circle around the container
|
|
818
807
|
*/
|
|
819
|
-
calculateCircularPosition(t, e, i, n,
|
|
820
|
-
const r = this.config.start.circular || {},
|
|
808
|
+
calculateCircularPosition(t, e, i, n, a) {
|
|
809
|
+
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
821
810
|
let h;
|
|
822
811
|
const l = r.radius || "120%";
|
|
823
812
|
if (typeof l == "string" && l.endsWith("%")) {
|
|
@@ -828,7 +817,7 @@ class le {
|
|
|
828
817
|
} else
|
|
829
818
|
h = typeof l == "number" ? l : 500;
|
|
830
819
|
let u;
|
|
831
|
-
|
|
820
|
+
s === "even" ? u = n / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
832
821
|
const c = i.width / 2, d = i.height / 2, m = c + Math.cos(u) * h, b = d + Math.sin(u) * h;
|
|
833
822
|
return { x: m, y: b };
|
|
834
823
|
}
|
|
@@ -849,8 +838,8 @@ class le {
|
|
|
849
838
|
* Build a CSS transform string for the start position
|
|
850
839
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
851
840
|
*/
|
|
852
|
-
buildStartTransform(t, e, i, n,
|
|
853
|
-
const l = t.x - e.x, u = t.y - e.y, c =
|
|
841
|
+
buildStartTransform(t, e, i, n, a, r, s, h) {
|
|
842
|
+
const l = t.x - e.x, u = t.y - e.y, c = s !== void 0 ? s : i, d = h !== void 0 ? h : n, m = a !== void 0 ? -a / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
|
|
854
843
|
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(${d})`;
|
|
855
844
|
}
|
|
856
845
|
/**
|
|
@@ -859,8 +848,8 @@ class le {
|
|
|
859
848
|
*/
|
|
860
849
|
buildFinalTransform(t, e, i, n) {
|
|
861
850
|
if (i !== void 0 && n !== void 0) {
|
|
862
|
-
const
|
|
863
|
-
return `translate(${
|
|
851
|
+
const a = -i / 2, r = -n / 2;
|
|
852
|
+
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${e})`;
|
|
864
853
|
}
|
|
865
854
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
|
|
866
855
|
}
|
|
@@ -876,7 +865,7 @@ class le {
|
|
|
876
865
|
* Check if the current path type requires JavaScript animation
|
|
877
866
|
*/
|
|
878
867
|
requiresJSAnimation() {
|
|
879
|
-
return
|
|
868
|
+
return ce(this.pathConfig.type);
|
|
880
869
|
}
|
|
881
870
|
/**
|
|
882
871
|
* Get the path configuration
|
|
@@ -978,7 +967,7 @@ class le {
|
|
|
978
967
|
amplitude: 15,
|
|
979
968
|
frequency: 3,
|
|
980
969
|
decay: !0
|
|
981
|
-
}, { amplitude: n, frequency:
|
|
970
|
+
}, { amplitude: n, frequency: a, decay: r } = i, s = Math.sin(t * a * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, l = n * s * h;
|
|
982
971
|
return e + l;
|
|
983
972
|
}
|
|
984
973
|
/**
|
|
@@ -1035,15 +1024,15 @@ class le {
|
|
|
1035
1024
|
const i = this.scaleConfig.pop || {
|
|
1036
1025
|
overshoot: 1.2,
|
|
1037
1026
|
bounces: 1
|
|
1038
|
-
}, { overshoot: n, bounces:
|
|
1039
|
-
let
|
|
1027
|
+
}, { overshoot: n, bounces: a } = i, r = this.generateScaleBounceKeyframes(a, n);
|
|
1028
|
+
let s = e;
|
|
1040
1029
|
for (let h = 0; h < r.length; h++)
|
|
1041
1030
|
if (t <= r[h].time) {
|
|
1042
1031
|
const l = h === 0 ? 0 : r[h - 1].time, u = h === 0 ? e : r[h - 1].scale, c = (t - l) / (r[h].time - l), d = this.easeOutQuad(c);
|
|
1043
|
-
|
|
1032
|
+
s = u + (r[h].scale - u) * d;
|
|
1044
1033
|
break;
|
|
1045
1034
|
}
|
|
1046
|
-
return
|
|
1035
|
+
return s * e;
|
|
1047
1036
|
}
|
|
1048
1037
|
/**
|
|
1049
1038
|
* Generate keyframes for scale bounce animation
|
|
@@ -1052,11 +1041,11 @@ class le {
|
|
|
1052
1041
|
const i = [];
|
|
1053
1042
|
i.push({ time: 0.5, scale: e });
|
|
1054
1043
|
let n = e;
|
|
1055
|
-
const
|
|
1044
|
+
const a = 0.5, s = 0.5 / (t * 2);
|
|
1056
1045
|
let h = 0.5;
|
|
1057
1046
|
for (let l = 0; l < t; l++) {
|
|
1058
|
-
const u = 1 - (n - 1) *
|
|
1059
|
-
h +=
|
|
1047
|
+
const u = 1 - (n - 1) * a;
|
|
1048
|
+
h += s, i.push({ time: h, scale: u }), n = 1 + (n - 1) * a * a, h += s, l < t - 1 && i.push({ time: h, scale: n });
|
|
1060
1049
|
}
|
|
1061
1050
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1062
1051
|
}
|
|
@@ -1067,7 +1056,7 @@ class le {
|
|
|
1067
1056
|
return 1 - (1 - t) * (1 - t);
|
|
1068
1057
|
}
|
|
1069
1058
|
}
|
|
1070
|
-
class
|
|
1059
|
+
class de {
|
|
1071
1060
|
constructor(t, e = {}) {
|
|
1072
1061
|
this.config = t, this.imageConfig = e;
|
|
1073
1062
|
}
|
|
@@ -1079,18 +1068,18 @@ class he {
|
|
|
1079
1068
|
* @returns Array of layout objects with position, rotation, scale
|
|
1080
1069
|
*/
|
|
1081
1070
|
generate(t, e, i = {}) {
|
|
1082
|
-
var
|
|
1083
|
-
const n = [], { width:
|
|
1071
|
+
var w, L, N, P, D, U, j, C, x;
|
|
1072
|
+
const n = [], { width: a, height: r } = e, s = this.config.spacing.padding, h = i.fixedHeight ?? 200, l = ((w = this.imageConfig.rotation) == null ? void 0 : w.mode) ?? "none", u = ((N = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : N.min) ?? -15, c = ((D = (P = this.imageConfig.rotation) == null ? void 0 : P.range) == null ? void 0 : D.max) ?? 15, d = ((j = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : j.min) ?? 1, m = ((x = (C = this.imageConfig.sizing) == null ? void 0 : C.variance) == null ? void 0 : x.max) ?? 1, b = d !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, y = a - s - g, v = r - s - f, I = s + g, R = s + f;
|
|
1084
1073
|
for (let A = 0; A < t; A++) {
|
|
1085
|
-
const O = this.random(
|
|
1074
|
+
const O = this.random(I, y), z = this.random(R, v), T = l === "random" ? this.random(u, c) : 0, M = b ? this.random(d, m) : 1, H = h * M, K = {
|
|
1086
1075
|
id: A,
|
|
1087
1076
|
x: O,
|
|
1088
1077
|
y: z,
|
|
1089
1078
|
rotation: T,
|
|
1090
1079
|
scale: M,
|
|
1091
|
-
baseSize:
|
|
1080
|
+
baseSize: H
|
|
1092
1081
|
};
|
|
1093
|
-
n.push(
|
|
1082
|
+
n.push(K);
|
|
1094
1083
|
}
|
|
1095
1084
|
return n;
|
|
1096
1085
|
}
|
|
@@ -1104,7 +1093,7 @@ class he {
|
|
|
1104
1093
|
return Math.random() * (e - t) + t;
|
|
1105
1094
|
}
|
|
1106
1095
|
}
|
|
1107
|
-
class
|
|
1096
|
+
class ue {
|
|
1108
1097
|
constructor(t, e = {}) {
|
|
1109
1098
|
this.config = t, this.imageConfig = e;
|
|
1110
1099
|
}
|
|
@@ -1116,50 +1105,50 @@ class de {
|
|
|
1116
1105
|
* @returns Array of layout objects with position, rotation, scale
|
|
1117
1106
|
*/
|
|
1118
1107
|
generate(t, e, i = {}) {
|
|
1119
|
-
var L,
|
|
1120
|
-
const n = [], { width:
|
|
1108
|
+
var L, N, P, D, U, j, C, x, A;
|
|
1109
|
+
const n = [], { width: a, height: r } = e, { debugRadials: s } = this.config, h = i.fixedHeight ?? 200, l = ((L = this.imageConfig.rotation) == null ? void 0 : L.mode) ?? "none", u = ((P = (N = this.imageConfig.rotation) == null ? void 0 : N.range) == null ? void 0 : P.min) ?? -15, c = ((U = (D = this.imageConfig.rotation) == null ? void 0 : D.range) == null ? void 0 : U.max) ?? 15, d = ((C = (j = this.imageConfig.sizing) == null ? void 0 : j.variance) == null ? void 0 : C.min) ?? 1, m = ((A = (x = this.imageConfig.sizing) == null ? void 0 : x.variance) == null ? void 0 : A.max) ?? 1, b = d !== 1 || m !== 1, p = this.config.scaleDecay ?? 0, g = ["green", "blue", "red", "yellow", "orange", "purple"], f = i.fixedHeight ?? h, y = a / 2, v = r / 2, I = Math.ceil(Math.sqrt(t));
|
|
1121
1110
|
if (t > 0) {
|
|
1122
1111
|
const O = b ? this.random(d, m) : 1, z = f * O;
|
|
1123
1112
|
n.push({
|
|
1124
1113
|
id: 0,
|
|
1125
|
-
x:
|
|
1126
|
-
y:
|
|
1114
|
+
x: y,
|
|
1115
|
+
y: v,
|
|
1127
1116
|
rotation: l === "random" ? this.random(u * 0.33, c * 0.33) : 0,
|
|
1128
1117
|
// Less rotation for center
|
|
1129
1118
|
scale: O,
|
|
1130
1119
|
baseSize: z,
|
|
1131
1120
|
zIndex: 100,
|
|
1132
1121
|
// Center image is highest
|
|
1133
|
-
borderColor:
|
|
1122
|
+
borderColor: s ? "cyan" : void 0
|
|
1134
1123
|
});
|
|
1135
1124
|
}
|
|
1136
|
-
let R = 1,
|
|
1125
|
+
let R = 1, w = 1;
|
|
1137
1126
|
for (; R < t; ) {
|
|
1138
|
-
const O =
|
|
1127
|
+
const O = w / I, z = p > 0 ? 1 - O * p * 0.5 : 1, T = w * (f * 0.8), M = T * 1.5, H = Math.PI * (3 * (M + T) - Math.sqrt((3 * M + T) * (M + 3 * T))), K = this.estimateWidth(f), X = Math.floor(H / (K * 0.7));
|
|
1139
1128
|
if (X === 0) {
|
|
1140
|
-
|
|
1129
|
+
w++;
|
|
1141
1130
|
continue;
|
|
1142
1131
|
}
|
|
1143
|
-
const B = 2 * Math.PI / X,
|
|
1132
|
+
const B = 2 * Math.PI / X, Z = w * (20 * Math.PI / 180);
|
|
1144
1133
|
for (let W = 0; W < X && R < t; W++) {
|
|
1145
|
-
const Q = W * B +
|
|
1146
|
-
let Y =
|
|
1147
|
-
const $ = this.config.spacing.padding ?? 50, G = et * 1.5 / 2,
|
|
1148
|
-
Y - G < $ ? Y = $ + G : Y + G >
|
|
1134
|
+
const Q = W * B + Z, tt = b ? this.random(d, m) : 1, q = z * tt, et = f * q;
|
|
1135
|
+
let Y = y + Math.cos(Q) * M, F = v + Math.sin(Q) * T;
|
|
1136
|
+
const $ = this.config.spacing.padding ?? 50, G = et * 1.5 / 2, _ = et / 2;
|
|
1137
|
+
Y - G < $ ? Y = $ + G : Y + G > a - $ && (Y = a - $ - G), F - _ < $ ? F = $ + _ : F + _ > r - $ && (F = r - $ - _);
|
|
1149
1138
|
const it = l === "random" ? this.random(u, c) : 0;
|
|
1150
1139
|
n.push({
|
|
1151
1140
|
id: R,
|
|
1152
1141
|
x: Y,
|
|
1153
|
-
y:
|
|
1142
|
+
y: F,
|
|
1154
1143
|
rotation: it,
|
|
1155
1144
|
scale: q,
|
|
1156
1145
|
baseSize: et,
|
|
1157
|
-
zIndex: Math.max(1, 100 -
|
|
1146
|
+
zIndex: Math.max(1, 100 - w),
|
|
1158
1147
|
// Outer rings have lower z-index
|
|
1159
|
-
borderColor:
|
|
1148
|
+
borderColor: s ? g[(w - 1) % g.length] : void 0
|
|
1160
1149
|
}), R++;
|
|
1161
1150
|
}
|
|
1162
|
-
|
|
1151
|
+
w++;
|
|
1163
1152
|
}
|
|
1164
1153
|
return n;
|
|
1165
1154
|
}
|
|
@@ -1182,7 +1171,7 @@ class de {
|
|
|
1182
1171
|
return Math.random() * (e - t) + t;
|
|
1183
1172
|
}
|
|
1184
1173
|
}
|
|
1185
|
-
const
|
|
1174
|
+
const ge = {
|
|
1186
1175
|
columns: "auto",
|
|
1187
1176
|
rows: "auto",
|
|
1188
1177
|
stagger: "none",
|
|
@@ -1210,7 +1199,7 @@ const ue = {
|
|
|
1210
1199
|
{ x: 0, y: 1 }
|
|
1211
1200
|
// down
|
|
1212
1201
|
];
|
|
1213
|
-
class
|
|
1202
|
+
class fe {
|
|
1214
1203
|
constructor(t, e = {}) {
|
|
1215
1204
|
this.config = t, this.imageConfig = e;
|
|
1216
1205
|
}
|
|
@@ -1222,17 +1211,17 @@ class ge {
|
|
|
1222
1211
|
* @returns Array of layout objects with position, rotation, scale
|
|
1223
1212
|
*/
|
|
1224
1213
|
generate(t, e, i = {}) {
|
|
1225
|
-
var X, B,
|
|
1226
|
-
const n = [], { width:
|
|
1214
|
+
var X, B, Z, W, Q, tt, q, et, Y;
|
|
1215
|
+
const n = [], { width: a, height: r } = e, s = { ...ge, ...this.config.grid }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((X = this.imageConfig.rotation) == null ? void 0 : X.mode) ?? "none", c = ((Z = (B = this.imageConfig.sizing) == null ? void 0 : B.variance) == null ? void 0 : Z.min) ?? 1, d = ((Q = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : Q.max) ?? 1, m = c !== 1 || d !== 1, b = a - 2 * h, p = r - 2 * h, { columns: g, rows: f } = this.calculateGridDimensions(
|
|
1227
1216
|
t,
|
|
1228
1217
|
b,
|
|
1229
1218
|
p,
|
|
1230
1219
|
l,
|
|
1231
|
-
|
|
1232
|
-
),
|
|
1220
|
+
s
|
|
1221
|
+
), y = s.stagger === "row", v = s.stagger === "column", I = y ? g + 0.5 : g, R = v ? f + 0.5 : f, w = (b - s.gap * (g - 1)) / I, L = (p - s.gap * (f - 1)) / R, N = y ? w / 2 : 0, P = v ? L / 2 : 0, D = 1 + s.overlap, U = Math.min(w, L) * D, j = i.fixedHeight ? Math.min(i.fixedHeight, U) : U, C = g * w + (g - 1) * s.gap + N, x = f * L + (f - 1) * s.gap + P, A = h + (b - C) / 2, O = h + (p - x) / 2, z = g * f, T = s.columns !== "auto" && s.rows !== "auto", M = T && t > z;
|
|
1233
1222
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1234
|
-
gridConfigColumns:
|
|
1235
|
-
gridConfigRows:
|
|
1223
|
+
gridConfigColumns: s.columns,
|
|
1224
|
+
gridConfigRows: s.rows,
|
|
1236
1225
|
columns: g,
|
|
1237
1226
|
rows: f,
|
|
1238
1227
|
cellCount: z,
|
|
@@ -1240,42 +1229,42 @@ class ge {
|
|
|
1240
1229
|
imageCount: t,
|
|
1241
1230
|
isOverflowMode: M
|
|
1242
1231
|
});
|
|
1243
|
-
const
|
|
1244
|
-
for (let
|
|
1245
|
-
let $,
|
|
1246
|
-
if (M &&
|
|
1247
|
-
const
|
|
1248
|
-
G = Math.floor(
|
|
1232
|
+
const H = M ? new Array(z).fill(0) : [], K = Math.min(w, L) * s.overflowOffset;
|
|
1233
|
+
for (let F = 0; F < t; F++) {
|
|
1234
|
+
let $, k, G = 0;
|
|
1235
|
+
if (M && F >= z) {
|
|
1236
|
+
const V = F - z, J = V % z;
|
|
1237
|
+
G = Math.floor(V / z) + 1, H[J]++, s.fillDirection === "row" ? ($ = J % g, k = Math.floor(J / g)) : (k = J % f, $ = Math.floor(J / f));
|
|
1249
1238
|
} else
|
|
1250
|
-
|
|
1251
|
-
let
|
|
1252
|
-
if (
|
|
1253
|
-
const
|
|
1254
|
-
|
|
1239
|
+
s.fillDirection === "row" ? ($ = F % g, k = Math.floor(F / g)) : (k = F % f, $ = Math.floor(F / f));
|
|
1240
|
+
let _ = A + $ * (w + s.gap) + w / 2, it = O + k * (L + s.gap) + L / 2;
|
|
1241
|
+
if (s.stagger === "row" && k % 2 === 1 ? _ += w / 2 : s.stagger === "column" && $ % 2 === 1 && (it += L / 2), G > 0) {
|
|
1242
|
+
const V = (G - 1) % Lt.length, J = Lt[V];
|
|
1243
|
+
_ += J.x * K, it += J.y * K;
|
|
1255
1244
|
}
|
|
1256
|
-
if (
|
|
1257
|
-
const
|
|
1258
|
-
|
|
1245
|
+
if (s.jitter > 0) {
|
|
1246
|
+
const V = w / 2 * s.jitter, J = L / 2 * s.jitter;
|
|
1247
|
+
_ += this.random(-V, V), it += this.random(-J, J);
|
|
1259
1248
|
}
|
|
1260
|
-
let nt =
|
|
1261
|
-
if (!M &&
|
|
1262
|
-
const
|
|
1263
|
-
if (
|
|
1264
|
-
const Mt =
|
|
1249
|
+
let nt = _, ot = it;
|
|
1250
|
+
if (!M && s.fillDirection === "row") {
|
|
1251
|
+
const V = t % g || g;
|
|
1252
|
+
if (k === Math.floor((t - 1) / g) && V < g) {
|
|
1253
|
+
const Mt = V * w + (V - 1) * s.gap;
|
|
1265
1254
|
let St = 0;
|
|
1266
|
-
|
|
1255
|
+
s.alignment === "center" ? St = (C - Mt) / 2 : s.alignment === "end" && (St = C - Mt), nt += St;
|
|
1267
1256
|
}
|
|
1268
1257
|
}
|
|
1269
|
-
const pt = m ? this.random(c, d) : 1, at =
|
|
1270
|
-
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(Ht, Math.min(ot,
|
|
1258
|
+
const pt = m ? this.random(c, d) : 1, at = j * pt, dt = at * 1.5 / 2, ut = at / 2, yt = h + dt, vt = a - h - dt, Ht = h + ut, Nt = r - h - ut;
|
|
1259
|
+
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(Ht, Math.min(ot, Nt));
|
|
1271
1260
|
let wt = 0;
|
|
1272
1261
|
if (u === "random") {
|
|
1273
|
-
const
|
|
1274
|
-
|
|
1262
|
+
const V = ((q = (tt = this.imageConfig.rotation) == null ? void 0 : tt.range) == null ? void 0 : q.min) ?? -15, J = ((Y = (et = this.imageConfig.rotation) == null ? void 0 : et.range) == null ? void 0 : Y.max) ?? 15;
|
|
1263
|
+
s.jitter > 0 ? wt = this.random(V * s.jitter, J * s.jitter) : wt = this.random(V, J);
|
|
1275
1264
|
}
|
|
1276
1265
|
let xt;
|
|
1277
|
-
M && G > 0 ? xt = 50 - G : xt = M ? 100 +
|
|
1278
|
-
id:
|
|
1266
|
+
M && G > 0 ? xt = 50 - G : xt = M ? 100 + F : F + 1, n.push({
|
|
1267
|
+
id: F,
|
|
1279
1268
|
x: nt,
|
|
1280
1269
|
y: ot,
|
|
1281
1270
|
rotation: wt,
|
|
@@ -1289,20 +1278,20 @@ class ge {
|
|
|
1289
1278
|
/**
|
|
1290
1279
|
* Calculate optimal grid dimensions based on image count and container
|
|
1291
1280
|
*/
|
|
1292
|
-
calculateGridDimensions(t, e, i, n,
|
|
1293
|
-
let r,
|
|
1294
|
-
if (
|
|
1295
|
-
r =
|
|
1296
|
-
else if (
|
|
1297
|
-
r =
|
|
1298
|
-
else if (
|
|
1299
|
-
|
|
1281
|
+
calculateGridDimensions(t, e, i, n, a) {
|
|
1282
|
+
let r, s;
|
|
1283
|
+
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1284
|
+
r = a.columns, s = a.rows;
|
|
1285
|
+
else if (a.columns !== "auto")
|
|
1286
|
+
r = a.columns, s = Math.ceil(t / r);
|
|
1287
|
+
else if (a.rows !== "auto")
|
|
1288
|
+
s = a.rows, r = Math.ceil(t / s);
|
|
1300
1289
|
else {
|
|
1301
1290
|
const h = e / i;
|
|
1302
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))),
|
|
1291
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))), s = Math.ceil(t / r); r > 1 && (r - 1) * s >= t; )
|
|
1303
1292
|
r--;
|
|
1304
1293
|
}
|
|
1305
|
-
return { columns: Math.max(1, r), rows: Math.max(1,
|
|
1294
|
+
return { columns: Math.max(1, r), rows: Math.max(1, s) };
|
|
1306
1295
|
}
|
|
1307
1296
|
/**
|
|
1308
1297
|
* Utility: Generate random number between min and max
|
|
@@ -1311,14 +1300,14 @@ class ge {
|
|
|
1311
1300
|
return Math.random() * (e - t) + t;
|
|
1312
1301
|
}
|
|
1313
1302
|
}
|
|
1314
|
-
const
|
|
1303
|
+
const me = Math.PI * (3 - Math.sqrt(5)), pe = {
|
|
1315
1304
|
spiralType: "golden",
|
|
1316
1305
|
direction: "counterclockwise",
|
|
1317
1306
|
tightness: 1,
|
|
1318
1307
|
scaleDecay: 0,
|
|
1319
1308
|
startAngle: 0
|
|
1320
1309
|
};
|
|
1321
|
-
class
|
|
1310
|
+
class be {
|
|
1322
1311
|
constructor(t, e = {}) {
|
|
1323
1312
|
this.config = t, this.imageConfig = e;
|
|
1324
1313
|
}
|
|
@@ -1330,34 +1319,34 @@ class pe {
|
|
|
1330
1319
|
* @returns Array of layout objects with position, rotation, scale
|
|
1331
1320
|
*/
|
|
1332
1321
|
generate(t, e, i = {}) {
|
|
1333
|
-
var R,
|
|
1334
|
-
const n = [], { width:
|
|
1322
|
+
var R, w, L, N, P, D, U, j, C;
|
|
1323
|
+
const n = [], { width: a, height: r } = e, s = { ...pe, ...this.config.spiral }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((R = this.imageConfig.rotation) == null ? void 0 : R.mode) ?? "none", c = ((L = (w = this.imageConfig.rotation) == null ? void 0 : w.range) == null ? void 0 : L.min) ?? -15, d = ((P = (N = this.imageConfig.rotation) == null ? void 0 : N.range) == null ? void 0 : P.max) ?? 15, m = ((U = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : U.min) ?? 1, b = ((C = (j = this.imageConfig.sizing) == null ? void 0 : j.variance) == null ? void 0 : C.max) ?? 1, p = m !== 1 || b !== 1, g = this.config.scaleDecay ?? s.scaleDecay, f = a / 2, y = r / 2, v = Math.min(
|
|
1335
1324
|
f - h - l / 2,
|
|
1336
|
-
|
|
1337
|
-
),
|
|
1338
|
-
for (let
|
|
1325
|
+
y - h - l / 2
|
|
1326
|
+
), I = s.direction === "clockwise" ? -1 : 1;
|
|
1327
|
+
for (let x = 0; x < t; x++) {
|
|
1339
1328
|
let A, O;
|
|
1340
|
-
if (
|
|
1341
|
-
A =
|
|
1342
|
-
else if (
|
|
1343
|
-
const
|
|
1344
|
-
A =
|
|
1329
|
+
if (s.spiralType === "golden")
|
|
1330
|
+
A = x * me * I + s.startAngle, O = this.calculateGoldenRadius(x, t, v, s.tightness);
|
|
1331
|
+
else if (s.spiralType === "archimedean") {
|
|
1332
|
+
const _ = x * 0.5 * s.tightness;
|
|
1333
|
+
A = _ * I + s.startAngle, O = this.calculateArchimedeanRadius(_, t, v, s.tightness);
|
|
1345
1334
|
} else {
|
|
1346
|
-
const
|
|
1347
|
-
A =
|
|
1335
|
+
const _ = x * 0.3 * s.tightness;
|
|
1336
|
+
A = _ * I + s.startAngle, O = this.calculateLogarithmicRadius(_, t, v, s.tightness);
|
|
1348
1337
|
}
|
|
1349
|
-
const z = f + Math.cos(A) * O, T =
|
|
1350
|
-
let
|
|
1338
|
+
const z = f + Math.cos(A) * O, T = y + Math.sin(A) * O, M = O / v, H = g > 0 ? 1 - M * g * 0.5 : 1, K = p ? this.random(m, b) : 1, X = H * K, B = l * X, W = B * 1.5 / 2, Q = B / 2, tt = h + W, q = a - h - W, et = h + Q, Y = r - h - Q, F = Math.max(tt, Math.min(z, q)), $ = Math.max(et, Math.min(T, Y));
|
|
1339
|
+
let k = 0;
|
|
1351
1340
|
if (u === "random") {
|
|
1352
|
-
const
|
|
1353
|
-
|
|
1354
|
-
} else u === "tangent" && (
|
|
1355
|
-
const G = t -
|
|
1341
|
+
const _ = A * 180 / Math.PI % 360, it = this.random(c, d);
|
|
1342
|
+
k = s.spiralType === "golden" ? it : _ * 0.1 + it * 0.9;
|
|
1343
|
+
} else u === "tangent" && (k = this.calculateSpiralTangent(A, O, s));
|
|
1344
|
+
const G = t - x;
|
|
1356
1345
|
n.push({
|
|
1357
|
-
id:
|
|
1358
|
-
x:
|
|
1346
|
+
id: x,
|
|
1347
|
+
x: F,
|
|
1359
1348
|
y: $,
|
|
1360
|
-
rotation:
|
|
1349
|
+
rotation: k,
|
|
1361
1350
|
scale: X,
|
|
1362
1351
|
baseSize: B,
|
|
1363
1352
|
zIndex: G
|
|
@@ -1374,11 +1363,11 @@ class pe {
|
|
|
1374
1363
|
if (i.spiralType === "golden")
|
|
1375
1364
|
n = t + Math.PI / 2;
|
|
1376
1365
|
else if (i.spiralType === "archimedean") {
|
|
1377
|
-
const r = 1 / i.tightness,
|
|
1378
|
-
n = t +
|
|
1366
|
+
const r = 1 / i.tightness, s = Math.atan(e / r);
|
|
1367
|
+
n = t + s;
|
|
1379
1368
|
} else {
|
|
1380
|
-
const r = 0.15 / i.tightness,
|
|
1381
|
-
n = t +
|
|
1369
|
+
const r = 0.15 / i.tightness, s = Math.atan(1 / r);
|
|
1370
|
+
n = t + s;
|
|
1382
1371
|
}
|
|
1383
1372
|
return n * 180 / Math.PI % 360 - 90;
|
|
1384
1373
|
}
|
|
@@ -1395,16 +1384,16 @@ class pe {
|
|
|
1395
1384
|
* r = a + b*θ (constant spacing between arms)
|
|
1396
1385
|
*/
|
|
1397
1386
|
calculateArchimedeanRadius(t, e, i, n) {
|
|
1398
|
-
const
|
|
1399
|
-
return t /
|
|
1387
|
+
const a = e * 0.5 * n;
|
|
1388
|
+
return t / a * i;
|
|
1400
1389
|
}
|
|
1401
1390
|
/**
|
|
1402
1391
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1403
1392
|
* r = a * e^(b*θ)
|
|
1404
1393
|
*/
|
|
1405
1394
|
calculateLogarithmicRadius(t, e, i, n) {
|
|
1406
|
-
const
|
|
1407
|
-
return
|
|
1395
|
+
const a = i * 0.05, r = 0.15 / n, s = a * Math.exp(r * t), h = e * 0.3 * n, l = a * Math.exp(r * h);
|
|
1396
|
+
return s / l * i;
|
|
1408
1397
|
}
|
|
1409
1398
|
/**
|
|
1410
1399
|
* Utility: Generate random number between min and max
|
|
@@ -1413,7 +1402,7 @@ class pe {
|
|
|
1413
1402
|
return Math.random() * (e - t) + t;
|
|
1414
1403
|
}
|
|
1415
1404
|
}
|
|
1416
|
-
const
|
|
1405
|
+
const ye = {
|
|
1417
1406
|
clusterCount: "auto",
|
|
1418
1407
|
clusterSpread: 150,
|
|
1419
1408
|
clusterSpacing: 200,
|
|
@@ -1421,7 +1410,7 @@ const be = {
|
|
|
1421
1410
|
overlap: 0.3,
|
|
1422
1411
|
distribution: "gaussian"
|
|
1423
1412
|
};
|
|
1424
|
-
class
|
|
1413
|
+
class ve {
|
|
1425
1414
|
constructor(t, e = {}) {
|
|
1426
1415
|
this.config = t, this.imageConfig = e;
|
|
1427
1416
|
}
|
|
@@ -1433,49 +1422,49 @@ class ye {
|
|
|
1433
1422
|
* @returns Array of layout objects with position, rotation, scale
|
|
1434
1423
|
*/
|
|
1435
1424
|
generate(t, e, i = {}) {
|
|
1436
|
-
var
|
|
1437
|
-
const n = [], { width:
|
|
1425
|
+
var I, R, w, L, N, P, D, U, j;
|
|
1426
|
+
const n = [], { width: a, height: r } = e, s = { ...ye, ...this.config.cluster }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((I = this.imageConfig.rotation) == null ? void 0 : I.mode) ?? "none", c = ((w = (R = this.imageConfig.rotation) == null ? void 0 : R.range) == null ? void 0 : w.min) ?? -15, d = ((N = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : N.max) ?? 15, m = ((D = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : D.min) ?? 1, b = ((j = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : j.max) ?? 1, p = m !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1438
1427
|
t,
|
|
1439
|
-
|
|
1440
|
-
|
|
1428
|
+
s.clusterCount,
|
|
1429
|
+
a,
|
|
1441
1430
|
r,
|
|
1442
|
-
|
|
1431
|
+
s.clusterSpacing
|
|
1443
1432
|
), f = this.generateClusterCenters(
|
|
1444
1433
|
g,
|
|
1445
|
-
|
|
1434
|
+
a,
|
|
1446
1435
|
r,
|
|
1447
1436
|
h,
|
|
1448
|
-
|
|
1449
|
-
),
|
|
1450
|
-
for (let
|
|
1451
|
-
|
|
1452
|
-
let
|
|
1453
|
-
for (let
|
|
1454
|
-
const
|
|
1437
|
+
s
|
|
1438
|
+
), y = new Array(g).fill(0);
|
|
1439
|
+
for (let C = 0; C < t; C++)
|
|
1440
|
+
y[C % g]++;
|
|
1441
|
+
let v = 0;
|
|
1442
|
+
for (let C = 0; C < g; C++) {
|
|
1443
|
+
const x = f[C], A = y[C];
|
|
1455
1444
|
for (let O = 0; O < A; O++) {
|
|
1456
1445
|
let z, T;
|
|
1457
|
-
if (
|
|
1458
|
-
z = this.gaussianRandom() *
|
|
1446
|
+
if (s.distribution === "gaussian")
|
|
1447
|
+
z = this.gaussianRandom() * x.spread, T = this.gaussianRandom() * x.spread;
|
|
1459
1448
|
else {
|
|
1460
|
-
const
|
|
1461
|
-
z = Math.cos(
|
|
1449
|
+
const k = this.random(0, Math.PI * 2), G = this.random(0, x.spread);
|
|
1450
|
+
z = Math.cos(k) * G, T = Math.sin(k) * G;
|
|
1462
1451
|
}
|
|
1463
|
-
const M = 1 +
|
|
1452
|
+
const M = 1 + s.overlap * 0.5, H = 1 + s.overlap * 0.3;
|
|
1464
1453
|
z /= M, T /= M;
|
|
1465
|
-
const
|
|
1466
|
-
let
|
|
1454
|
+
const K = p ? this.random(m, b) : 1, X = H * K, B = l * X;
|
|
1455
|
+
let Z = x.x + z, W = x.y + T;
|
|
1467
1456
|
const tt = B * 1.5 / 2, q = B / 2;
|
|
1468
|
-
|
|
1469
|
-
const et = u === "random" ? this.random(c, d) : 0,
|
|
1457
|
+
Z = Math.max(h + tt, Math.min(Z, a - h - tt)), W = Math.max(h + q, Math.min(W, r - h - q));
|
|
1458
|
+
const et = u === "random" ? this.random(c, d) : 0, F = Math.sqrt(z * z + T * T) / x.spread, $ = Math.round((1 - F) * 50) + 1;
|
|
1470
1459
|
n.push({
|
|
1471
|
-
id:
|
|
1472
|
-
x:
|
|
1460
|
+
id: v,
|
|
1461
|
+
x: Z,
|
|
1473
1462
|
y: W,
|
|
1474
1463
|
rotation: et,
|
|
1475
1464
|
scale: X,
|
|
1476
1465
|
baseSize: B,
|
|
1477
1466
|
zIndex: $
|
|
1478
|
-
}),
|
|
1467
|
+
}), v++;
|
|
1479
1468
|
}
|
|
1480
1469
|
}
|
|
1481
1470
|
return n;
|
|
@@ -1483,33 +1472,33 @@ class ye {
|
|
|
1483
1472
|
/**
|
|
1484
1473
|
* Calculate optimal number of clusters based on image count and container
|
|
1485
1474
|
*/
|
|
1486
|
-
calculateClusterCount(t, e, i, n,
|
|
1475
|
+
calculateClusterCount(t, e, i, n, a) {
|
|
1487
1476
|
if (e !== "auto")
|
|
1488
1477
|
return Math.max(1, Math.min(e, t));
|
|
1489
|
-
const
|
|
1490
|
-
i /
|
|
1478
|
+
const s = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1479
|
+
i / a * (n / a) * 0.6
|
|
1491
1480
|
);
|
|
1492
|
-
return Math.max(1, Math.min(
|
|
1481
|
+
return Math.max(1, Math.min(s, h, 10));
|
|
1493
1482
|
}
|
|
1494
1483
|
/**
|
|
1495
1484
|
* Generate cluster center positions with spacing constraints
|
|
1496
1485
|
*/
|
|
1497
|
-
generateClusterCenters(t, e, i, n,
|
|
1498
|
-
const r = [], h = n +
|
|
1486
|
+
generateClusterCenters(t, e, i, n, a) {
|
|
1487
|
+
const r = [], h = n + a.clusterSpread, l = e - n - a.clusterSpread, u = n + a.clusterSpread, c = i - n - a.clusterSpread;
|
|
1499
1488
|
for (let d = 0; d < t; d++) {
|
|
1500
1489
|
let m = null, b = -1;
|
|
1501
1490
|
for (let p = 0; p < 100; p++) {
|
|
1502
1491
|
const g = {
|
|
1503
1492
|
x: this.random(h, l),
|
|
1504
1493
|
y: this.random(u, c),
|
|
1505
|
-
spread: this.calculateClusterSpread(
|
|
1494
|
+
spread: this.calculateClusterSpread(a)
|
|
1506
1495
|
};
|
|
1507
1496
|
let f = 1 / 0;
|
|
1508
|
-
for (const
|
|
1509
|
-
const
|
|
1497
|
+
for (const y of r) {
|
|
1498
|
+
const v = g.x - y.x, I = g.y - y.y, R = Math.sqrt(v * v + I * I);
|
|
1510
1499
|
f = Math.min(f, R);
|
|
1511
1500
|
}
|
|
1512
|
-
if ((r.length === 0 || f > b) && (m = g, b = f), f >=
|
|
1501
|
+
if ((r.length === 0 || f > b) && (m = g, b = f), f >= a.clusterSpacing)
|
|
1513
1502
|
break;
|
|
1514
1503
|
}
|
|
1515
1504
|
m && r.push(m);
|
|
@@ -1540,7 +1529,7 @@ class ye {
|
|
|
1540
1529
|
return Math.random() * (e - t) + t;
|
|
1541
1530
|
}
|
|
1542
1531
|
}
|
|
1543
|
-
class
|
|
1532
|
+
class we {
|
|
1544
1533
|
constructor(t, e = {}) {
|
|
1545
1534
|
this.config = t, this.imageConfig = e;
|
|
1546
1535
|
}
|
|
@@ -1552,25 +1541,25 @@ class ve {
|
|
|
1552
1541
|
* @returns Array of layout objects with position, rotation, scale
|
|
1553
1542
|
*/
|
|
1554
1543
|
generate(t, e, i = {}) {
|
|
1555
|
-
var M,
|
|
1556
|
-
const n = [], { width:
|
|
1544
|
+
var M, H, K, X, B, Z, W, Q, tt;
|
|
1545
|
+
const n = [], { width: a, height: r } = e, s = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, l = ((M = this.imageConfig.rotation) == null ? void 0 : M.mode) ?? "none", u = ((K = (H = this.imageConfig.rotation) == null ? void 0 : H.range) == null ? void 0 : K.min) ?? -15, c = ((B = (X = this.imageConfig.rotation) == null ? void 0 : X.range) == null ? void 0 : B.max) ?? 15, d = ((W = (Z = this.imageConfig.sizing) == null ? void 0 : Z.variance) == null ? void 0 : W.min) ?? 1, m = ((tt = (Q = this.imageConfig.sizing) == null ? void 0 : Q.variance) == null ? void 0 : tt.max) ?? 1, b = d !== 1 || m !== 1, p = i.fixedHeight ?? s, g = {
|
|
1557
1546
|
...jt,
|
|
1558
1547
|
...this.config.wave
|
|
1559
|
-
}, { rows: f, amplitude:
|
|
1548
|
+
}, { rows: f, amplitude: y, frequency: v, phaseShift: I, synchronization: R } = g, w = Math.ceil(t / f), P = p * 1.5 / 2, D = h + P, U = a - h - P, j = U - D, C = w > 1 ? j / (w - 1) : 0, x = h + y + p / 2, A = r - h - y - p / 2, O = A - x, z = f > 1 ? O / (f - 1) : 0;
|
|
1560
1549
|
let T = 0;
|
|
1561
1550
|
for (let q = 0; q < f && T < t; q++) {
|
|
1562
|
-
const et = f === 1 ? (
|
|
1551
|
+
const et = f === 1 ? (x + A) / 2 : x + q * z;
|
|
1563
1552
|
let Y = 0;
|
|
1564
|
-
R === "offset" ? Y = q *
|
|
1565
|
-
for (let
|
|
1566
|
-
const $ =
|
|
1553
|
+
R === "offset" ? Y = q * I : R === "alternating" && (Y = q * Math.PI);
|
|
1554
|
+
for (let F = 0; F < w && T < t; F++) {
|
|
1555
|
+
const $ = w === 1 ? (D + U) / 2 : D + F * C, k = this.calculateWaveY($, a, y, v, Y), G = $, _ = et + k, it = b ? this.random(d, m) : 1, nt = p * it;
|
|
1567
1556
|
let ot = 0;
|
|
1568
|
-
l === "tangent" ? ot = this.calculateRotation($,
|
|
1569
|
-
const at = nt * 1.5 / 2, bt = nt / 2, dt = h + at, ut =
|
|
1557
|
+
l === "tangent" ? ot = this.calculateRotation($, a, y, v, Y) : l === "random" && (ot = this.random(u, c));
|
|
1558
|
+
const at = nt * 1.5 / 2, bt = nt / 2, dt = h + at, ut = a - h - at, yt = h + bt, vt = r - h - bt;
|
|
1570
1559
|
n.push({
|
|
1571
1560
|
id: T,
|
|
1572
1561
|
x: Math.max(dt, Math.min(G, ut)),
|
|
1573
|
-
y: Math.max(yt, Math.min(
|
|
1562
|
+
y: Math.max(yt, Math.min(_, vt)),
|
|
1574
1563
|
rotation: ot,
|
|
1575
1564
|
scale: it,
|
|
1576
1565
|
baseSize: nt,
|
|
@@ -1589,9 +1578,9 @@ class ve {
|
|
|
1589
1578
|
* @param phase - Phase offset
|
|
1590
1579
|
* @returns Y displacement from baseline
|
|
1591
1580
|
*/
|
|
1592
|
-
calculateWaveY(t, e, i, n,
|
|
1581
|
+
calculateWaveY(t, e, i, n, a) {
|
|
1593
1582
|
const r = t / e;
|
|
1594
|
-
return i * Math.sin(n * r * 2 * Math.PI +
|
|
1583
|
+
return i * Math.sin(n * r * 2 * Math.PI + a);
|
|
1595
1584
|
}
|
|
1596
1585
|
/**
|
|
1597
1586
|
* Calculate rotation based on wave tangent
|
|
@@ -1602,9 +1591,9 @@ class ve {
|
|
|
1602
1591
|
* @param phase - Phase offset
|
|
1603
1592
|
* @returns Rotation angle in degrees
|
|
1604
1593
|
*/
|
|
1605
|
-
calculateRotation(t, e, i, n,
|
|
1606
|
-
const r = t / e,
|
|
1607
|
-
return Math.atan(
|
|
1594
|
+
calculateRotation(t, e, i, n, a) {
|
|
1595
|
+
const r = t / e, s = i * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + a) / e;
|
|
1596
|
+
return Math.atan(s) * (180 / Math.PI);
|
|
1608
1597
|
}
|
|
1609
1598
|
/**
|
|
1610
1599
|
* Estimate image width based on height
|
|
@@ -1618,7 +1607,7 @@ class ve {
|
|
|
1618
1607
|
return Math.random() * (e - t) + t;
|
|
1619
1608
|
}
|
|
1620
1609
|
}
|
|
1621
|
-
class
|
|
1610
|
+
class xe {
|
|
1622
1611
|
constructor(t) {
|
|
1623
1612
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.generator = this.initGenerator();
|
|
1624
1613
|
}
|
|
@@ -1629,18 +1618,18 @@ class we {
|
|
|
1629
1618
|
initGenerator() {
|
|
1630
1619
|
switch (this.config.algorithm) {
|
|
1631
1620
|
case "radial":
|
|
1632
|
-
return new
|
|
1621
|
+
return new ue(this.config, this.imageConfig);
|
|
1633
1622
|
case "grid":
|
|
1634
|
-
return new
|
|
1623
|
+
return new fe(this.config, this.imageConfig);
|
|
1635
1624
|
case "spiral":
|
|
1636
|
-
return new
|
|
1625
|
+
return new be(this.config, this.imageConfig);
|
|
1637
1626
|
case "cluster":
|
|
1638
|
-
return new ye(this.config, this.imageConfig);
|
|
1639
|
-
case "wave":
|
|
1640
1627
|
return new ve(this.config, this.imageConfig);
|
|
1628
|
+
case "wave":
|
|
1629
|
+
return new we(this.config, this.imageConfig);
|
|
1641
1630
|
case "random":
|
|
1642
1631
|
default:
|
|
1643
|
-
return new
|
|
1632
|
+
return new de(this.config, this.imageConfig);
|
|
1644
1633
|
}
|
|
1645
1634
|
}
|
|
1646
1635
|
/**
|
|
@@ -1652,8 +1641,8 @@ class we {
|
|
|
1652
1641
|
*/
|
|
1653
1642
|
generateLayout(t, e, i = {}) {
|
|
1654
1643
|
const n = this.generator.generate(t, e, i);
|
|
1655
|
-
return n.forEach((
|
|
1656
|
-
this.layouts.set(
|
|
1644
|
+
return n.forEach((a) => {
|
|
1645
|
+
this.layouts.set(a.id, a);
|
|
1657
1646
|
}), n;
|
|
1658
1647
|
}
|
|
1659
1648
|
/**
|
|
@@ -1707,8 +1696,8 @@ class we {
|
|
|
1707
1696
|
return;
|
|
1708
1697
|
if (typeof i == "number")
|
|
1709
1698
|
return i;
|
|
1710
|
-
const n = i,
|
|
1711
|
-
return
|
|
1699
|
+
const n = i, a = this.resolveBreakpoint(t);
|
|
1700
|
+
return a === "mobile" ? n.mobile ?? n.tablet ?? n.screen : a === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1712
1701
|
}
|
|
1713
1702
|
/**
|
|
1714
1703
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1719,18 +1708,18 @@ class we {
|
|
|
1719
1708
|
* @returns Calculated sizing result with height
|
|
1720
1709
|
*/
|
|
1721
1710
|
calculateAdaptiveSize(t, e, i, n) {
|
|
1722
|
-
const
|
|
1711
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1723
1712
|
if (r !== void 0)
|
|
1724
1713
|
return { height: r };
|
|
1725
|
-
const
|
|
1714
|
+
const s = (a == null ? void 0 : a.minSize) ?? 50, h = (a == null ? void 0 : a.maxSize) ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: c, height: d } = t, p = c * d * l / e;
|
|
1726
1715
|
let f = Math.sqrt(p / 1.4);
|
|
1727
1716
|
f *= u, f = Math.min(f, i);
|
|
1728
|
-
let
|
|
1729
|
-
if (
|
|
1730
|
-
const
|
|
1731
|
-
|
|
1717
|
+
let y = this.clamp(f, s, h);
|
|
1718
|
+
if (y === s && f < s) {
|
|
1719
|
+
const v = Math.max(s * 0.05, 20);
|
|
1720
|
+
y = Math.max(v, f);
|
|
1732
1721
|
}
|
|
1733
|
-
return { height:
|
|
1722
|
+
return { height: y };
|
|
1734
1723
|
}
|
|
1735
1724
|
/**
|
|
1736
1725
|
* Utility: Clamp a value between min and max
|
|
@@ -1739,12 +1728,12 @@ class we {
|
|
|
1739
1728
|
return Math.max(e, Math.min(i, t));
|
|
1740
1729
|
}
|
|
1741
1730
|
}
|
|
1742
|
-
var
|
|
1743
|
-
function xe(o) {
|
|
1744
|
-
return o in It;
|
|
1745
|
-
}
|
|
1731
|
+
var E = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(E || {});
|
|
1746
1732
|
function Se(o) {
|
|
1747
|
-
return o
|
|
1733
|
+
return o in Et;
|
|
1734
|
+
}
|
|
1735
|
+
function Ee(o) {
|
|
1736
|
+
return o ? Se(o) ? Et[o] : o : Et.md;
|
|
1748
1737
|
}
|
|
1749
1738
|
function Ie(o) {
|
|
1750
1739
|
if (!o) return "";
|
|
@@ -1765,22 +1754,22 @@ function ct(o) {
|
|
|
1765
1754
|
return `${t}px ${e} ${i}`;
|
|
1766
1755
|
}
|
|
1767
1756
|
function ft(o) {
|
|
1768
|
-
var
|
|
1757
|
+
var a, r;
|
|
1769
1758
|
if (!o) return {};
|
|
1770
1759
|
const t = {};
|
|
1771
1760
|
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
1772
|
-
const
|
|
1773
|
-
o.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` :
|
|
1761
|
+
const s = ((a = o.border) == null ? void 0 : a.radius) ?? 0;
|
|
1762
|
+
o.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : s && (t.borderTopLeftRadius = `${s}px`), o.borderRadiusTopRight !== void 0 ? t.borderTopRightRadius = `${o.borderRadiusTopRight}px` : s && (t.borderTopRightRadius = `${s}px`), o.borderRadiusBottomRight !== void 0 ? t.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : s && (t.borderBottomRightRadius = `${s}px`), o.borderRadiusBottomLeft !== void 0 ? t.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : s && (t.borderBottomLeftRadius = `${s}px`);
|
|
1774
1763
|
} else ((r = o.border) == null ? void 0 : r.radius) !== void 0 && (t.borderRadius = `${o.border.radius}px`);
|
|
1775
1764
|
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
1776
|
-
const
|
|
1765
|
+
const s = o.border || {}, h = { ...s, ...o.borderTop }, l = { ...s, ...o.borderRight }, u = { ...s, ...o.borderBottom }, c = { ...s, ...o.borderLeft };
|
|
1777
1766
|
t.borderTop = ct(h), t.borderRight = ct(l), t.borderBottom = ct(u), t.borderLeft = ct(c);
|
|
1778
1767
|
} else o.border && (t.border = ct(o.border));
|
|
1779
|
-
o.shadow !== void 0 && (t.boxShadow =
|
|
1768
|
+
o.shadow !== void 0 && (t.boxShadow = Ee(o.shadow));
|
|
1780
1769
|
const n = Ie(o.filter);
|
|
1781
1770
|
if (t.filter = n || "none", o.opacity !== void 0 && (t.opacity = String(o.opacity)), o.cursor !== void 0 && (t.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1782
|
-
const
|
|
1783
|
-
t.outline = `${
|
|
1771
|
+
const s = o.outline.width ?? 0, h = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
1772
|
+
t.outline = `${s}px ${h} ${l}`, o.outline.offset !== void 0 && (t.outlineOffset = `${o.outline.offset}px`);
|
|
1784
1773
|
}
|
|
1785
1774
|
return o.objectFit !== void 0 && (t.objectFit = o.objectFit), o.aspectRatio !== void 0 && (t.aspectRatio = o.aspectRatio), t;
|
|
1786
1775
|
}
|
|
@@ -1796,7 +1785,7 @@ function ht(o, t) {
|
|
|
1796
1785
|
i.trim() && o.classList.add(i.trim());
|
|
1797
1786
|
});
|
|
1798
1787
|
}
|
|
1799
|
-
function
|
|
1788
|
+
function _t(o, t) {
|
|
1800
1789
|
const e = Pt(t);
|
|
1801
1790
|
e && e.split(" ").forEach((i) => {
|
|
1802
1791
|
i.trim() && o.classList.remove(i.trim());
|
|
@@ -1806,10 +1795,10 @@ const Ot = {
|
|
|
1806
1795
|
UNFOCUSING: 999,
|
|
1807
1796
|
FOCUSING: 1e3
|
|
1808
1797
|
};
|
|
1809
|
-
class
|
|
1798
|
+
class Te {
|
|
1810
1799
|
constructor(t, e, i) {
|
|
1811
|
-
var n,
|
|
1812
|
-
this.state =
|
|
1800
|
+
var n, a;
|
|
1801
|
+
this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = ft(i == null ? void 0 : i.default), this.focusedStyles = ft(i == null ? void 0 : i.focused), this.defaultClassName = (n = i == null ? void 0 : i.default) == null ? void 0 : n.className, this.focusedClassName = (a = i == null ? void 0 : i.focused) == null ? void 0 : a.className;
|
|
1813
1802
|
}
|
|
1814
1803
|
/**
|
|
1815
1804
|
* Get current state machine state
|
|
@@ -1821,7 +1810,7 @@ class Ee {
|
|
|
1821
1810
|
* Check if any animation is in progress
|
|
1822
1811
|
*/
|
|
1823
1812
|
isAnimating() {
|
|
1824
|
-
return this.state !==
|
|
1813
|
+
return this.state !== E.IDLE && this.state !== E.FOCUSED;
|
|
1825
1814
|
}
|
|
1826
1815
|
/**
|
|
1827
1816
|
* Normalize scalePercent value
|
|
@@ -1834,19 +1823,19 @@ class Ee {
|
|
|
1834
1823
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1835
1824
|
*/
|
|
1836
1825
|
calculateFocusDimensions(t, e, i) {
|
|
1837
|
-
const n = this.normalizeScalePercent(this.config.scalePercent),
|
|
1838
|
-
let
|
|
1826
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), a = i.height * n, r = t / e;
|
|
1827
|
+
let s = a, h = s * r;
|
|
1839
1828
|
const l = i.width * n;
|
|
1840
|
-
return h > l && (h = l,
|
|
1829
|
+
return h > l && (h = l, s = h / r), { width: h, height: s };
|
|
1841
1830
|
}
|
|
1842
1831
|
/**
|
|
1843
1832
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
1844
1833
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1845
1834
|
*/
|
|
1846
1835
|
calculateFocusTransform(t, e) {
|
|
1847
|
-
const i = t.width / 2, n = t.height / 2,
|
|
1836
|
+
const i = t.width / 2, n = t.height / 2, a = i - e.x, r = n - e.y;
|
|
1848
1837
|
return {
|
|
1849
|
-
x:
|
|
1838
|
+
x: a,
|
|
1850
1839
|
y: r,
|
|
1851
1840
|
rotation: 0,
|
|
1852
1841
|
scale: 1
|
|
@@ -1868,19 +1857,19 @@ class Ee {
|
|
|
1868
1857
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1869
1858
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1870
1859
|
*/
|
|
1871
|
-
animateWithDimensions(t, e, i, n,
|
|
1860
|
+
animateWithDimensions(t, e, i, n, a, r, s, h) {
|
|
1872
1861
|
const l = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
|
|
1873
1862
|
return t.style.transition = "none", t.animate(
|
|
1874
1863
|
[
|
|
1875
1864
|
{
|
|
1876
1865
|
transform: l,
|
|
1877
1866
|
width: `${n}px`,
|
|
1878
|
-
height: `${
|
|
1867
|
+
height: `${a}px`
|
|
1879
1868
|
},
|
|
1880
1869
|
{
|
|
1881
1870
|
transform: u,
|
|
1882
1871
|
width: `${r}px`,
|
|
1883
|
-
height: `${
|
|
1872
|
+
height: `${s}px`
|
|
1884
1873
|
}
|
|
1885
1874
|
],
|
|
1886
1875
|
{
|
|
@@ -1900,7 +1889,7 @@ class Ee {
|
|
|
1900
1889
|
* Remove focused styling from an element
|
|
1901
1890
|
*/
|
|
1902
1891
|
removeFocusedStyling(t, e) {
|
|
1903
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1892
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), _t(t, this.focusedClassName), lt(t, this.defaultStyles), ht(t, this.defaultClassName);
|
|
1904
1893
|
}
|
|
1905
1894
|
/**
|
|
1906
1895
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1908,8 +1897,8 @@ class Ee {
|
|
|
1908
1897
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1909
1898
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1910
1899
|
*/
|
|
1911
|
-
startFocusAnimation(t, e, i, n,
|
|
1912
|
-
const r = t.style.zIndex || "",
|
|
1900
|
+
startFocusAnimation(t, e, i, n, a) {
|
|
1901
|
+
const r = t.style.zIndex || "", s = t.offsetWidth, h = t.offsetHeight, l = this.calculateFocusDimensions(s, h, e), u = this.calculateFocusTransform(e, i);
|
|
1913
1902
|
this.applyFocusedStyling(t, Ot.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1914
1903
|
const c = n ?? {
|
|
1915
1904
|
x: 0,
|
|
@@ -1917,7 +1906,7 @@ class Ee {
|
|
|
1917
1906
|
rotation: i.rotation,
|
|
1918
1907
|
scale: 1
|
|
1919
1908
|
// No scale - using dimensions
|
|
1920
|
-
}, d = (
|
|
1909
|
+
}, d = (a == null ? void 0 : a.width) ?? s, m = (a == null ? void 0 : a.height) ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1921
1910
|
t,
|
|
1922
1911
|
c,
|
|
1923
1912
|
u,
|
|
@@ -1940,7 +1929,7 @@ class Ee {
|
|
|
1940
1929
|
originalState: i,
|
|
1941
1930
|
focusTransform: u,
|
|
1942
1931
|
originalZIndex: r,
|
|
1943
|
-
originalWidth:
|
|
1932
|
+
originalWidth: s,
|
|
1944
1933
|
originalHeight: h,
|
|
1945
1934
|
focusWidth: l.width,
|
|
1946
1935
|
focusHeight: l.height
|
|
@@ -1949,7 +1938,7 @@ class Ee {
|
|
|
1949
1938
|
originalState: i,
|
|
1950
1939
|
animationHandle: g,
|
|
1951
1940
|
direction: "in",
|
|
1952
|
-
originalWidth:
|
|
1941
|
+
originalWidth: s,
|
|
1953
1942
|
originalHeight: h
|
|
1954
1943
|
};
|
|
1955
1944
|
}
|
|
@@ -1959,20 +1948,20 @@ class Ee {
|
|
|
1959
1948
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1960
1949
|
*/
|
|
1961
1950
|
startUnfocusAnimation(t, e, i, n) {
|
|
1962
|
-
var b, p, g, f,
|
|
1951
|
+
var b, p, g, f, y;
|
|
1963
1952
|
t.style.zIndex = String(Ot.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1964
|
-
const
|
|
1953
|
+
const a = i ?? ((b = this.focusData) == null ? void 0 : b.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (n == null ? void 0 : n.width) ?? ((p = this.focusData) == null ? void 0 : p.focusWidth) ?? t.offsetWidth, s = (n == null ? void 0 : n.height) ?? ((g = this.focusData) == null ? void 0 : g.focusHeight) ?? t.offsetHeight, h = {
|
|
1965
1954
|
x: 0,
|
|
1966
1955
|
y: 0,
|
|
1967
1956
|
rotation: e.rotation,
|
|
1968
1957
|
scale: 1
|
|
1969
1958
|
// No scale - using dimensions
|
|
1970
|
-
}, l = ((f = this.focusData) == null ? void 0 : f.originalWidth) ?? t.offsetWidth, u = ((
|
|
1959
|
+
}, l = ((f = this.focusData) == null ? void 0 : f.originalWidth) ?? t.offsetWidth, u = ((y = this.focusData) == null ? void 0 : y.originalHeight) ?? t.offsetHeight, c = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
|
|
1971
1960
|
t,
|
|
1972
|
-
|
|
1961
|
+
a,
|
|
1973
1962
|
h,
|
|
1974
1963
|
r,
|
|
1975
|
-
|
|
1964
|
+
s,
|
|
1976
1965
|
l,
|
|
1977
1966
|
u,
|
|
1978
1967
|
c
|
|
@@ -1980,7 +1969,7 @@ class Ee {
|
|
|
1980
1969
|
id: `unfocus-${Date.now()}`,
|
|
1981
1970
|
element: t,
|
|
1982
1971
|
animation: d,
|
|
1983
|
-
fromState:
|
|
1972
|
+
fromState: a,
|
|
1984
1973
|
toState: h,
|
|
1985
1974
|
startTime: performance.now(),
|
|
1986
1975
|
duration: c
|
|
@@ -2006,46 +1995,46 @@ class Ee {
|
|
|
2006
1995
|
/**
|
|
2007
1996
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2008
1997
|
*/
|
|
2009
|
-
resetElementInstantly(t, e, i, n,
|
|
1998
|
+
resetElementInstantly(t, e, i, n, a) {
|
|
2010
1999
|
this.animationEngine.cancelAllAnimations(t);
|
|
2011
2000
|
const r = ["translate(-50%, -50%)"];
|
|
2012
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 &&
|
|
2001
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && a !== void 0 && (t.style.width = `${n}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, i);
|
|
2013
2002
|
}
|
|
2014
2003
|
/**
|
|
2015
2004
|
* Focus (zoom) an image to center of container
|
|
2016
2005
|
* Implements cross-animation when swapping focus
|
|
2017
2006
|
*/
|
|
2018
2007
|
async focusImage(t, e, i) {
|
|
2019
|
-
var
|
|
2020
|
-
if (this.currentFocus === t && this.state ===
|
|
2008
|
+
var a, r, s, h, l, u, c, d, m, b, p, g;
|
|
2009
|
+
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2021
2010
|
return this.unfocusImage();
|
|
2022
|
-
if (((
|
|
2023
|
-
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0),
|
|
2011
|
+
if (((a = this.incoming) == null ? void 0 : a.element) === t && this.state === E.FOCUSING) {
|
|
2012
|
+
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), y = {
|
|
2024
2013
|
x: f.x,
|
|
2025
2014
|
y: f.y,
|
|
2026
2015
|
rotation: f.rotation,
|
|
2027
2016
|
scale: 1
|
|
2028
2017
|
// No scale transform - using dimensions
|
|
2029
|
-
},
|
|
2018
|
+
}, v = {
|
|
2030
2019
|
width: t.offsetWidth,
|
|
2031
2020
|
height: t.offsetHeight
|
|
2032
2021
|
};
|
|
2033
2022
|
this.outgoing = this.startUnfocusAnimation(
|
|
2034
2023
|
t,
|
|
2035
2024
|
this.incoming.originalState,
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
), this.incoming = null, this.state =
|
|
2025
|
+
y,
|
|
2026
|
+
v
|
|
2027
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, ((r = this.focusData) == null ? void 0 : r.originalZIndex) || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2039
2028
|
return;
|
|
2040
2029
|
}
|
|
2041
2030
|
const n = ++this.focusGeneration;
|
|
2042
2031
|
switch (this.state) {
|
|
2043
|
-
case
|
|
2044
|
-
if (this.state =
|
|
2045
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2032
|
+
case E.IDLE:
|
|
2033
|
+
if (this.state = E.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2034
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2046
2035
|
break;
|
|
2047
|
-
case
|
|
2048
|
-
if (this.state =
|
|
2036
|
+
case E.FOCUSED:
|
|
2037
|
+
if (this.state = E.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2049
2038
|
this.currentFocus,
|
|
2050
2039
|
this.focusData.originalState
|
|
2051
2040
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
@@ -2053,9 +2042,9 @@ class Ee {
|
|
|
2053
2042
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2054
2043
|
]), this.focusGeneration !== n)
|
|
2055
2044
|
return;
|
|
2056
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2045
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((s = this.outgoing.originalState.zIndex) == null ? void 0 : s.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2057
2046
|
break;
|
|
2058
|
-
case
|
|
2047
|
+
case E.FOCUSING:
|
|
2059
2048
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2060
2049
|
this.incoming.element,
|
|
2061
2050
|
this.incoming.originalState,
|
|
@@ -2063,37 +2052,37 @@ class Ee {
|
|
|
2063
2052
|
(l = this.focusData) == null ? void 0 : l.originalWidth,
|
|
2064
2053
|
(u = this.focusData) == null ? void 0 : u.originalHeight
|
|
2065
2054
|
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2066
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2055
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2067
2056
|
break;
|
|
2068
|
-
case
|
|
2069
|
-
if (this.state =
|
|
2057
|
+
case E.UNFOCUSING:
|
|
2058
|
+
if (this.state = E.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2070
2059
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2071
2060
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2072
2061
|
]), this.focusGeneration !== n) return;
|
|
2073
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2062
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2074
2063
|
break;
|
|
2075
|
-
case
|
|
2064
|
+
case E.CROSS_ANIMATING:
|
|
2076
2065
|
if (((d = this.incoming) == null ? void 0 : d.element) === t)
|
|
2077
2066
|
return;
|
|
2078
2067
|
if (((m = this.outgoing) == null ? void 0 : m.element) === t) {
|
|
2079
|
-
const f = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0),
|
|
2068
|
+
const f = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0), y = {
|
|
2080
2069
|
x: f.x,
|
|
2081
2070
|
y: f.y,
|
|
2082
2071
|
rotation: f.rotation,
|
|
2083
2072
|
scale: 1
|
|
2084
2073
|
// No scale - using dimensions
|
|
2085
|
-
},
|
|
2074
|
+
}, v = {
|
|
2086
2075
|
width: t.offsetWidth,
|
|
2087
2076
|
height: t.offsetHeight
|
|
2088
2077
|
};
|
|
2089
2078
|
if (this.incoming) {
|
|
2090
|
-
const
|
|
2091
|
-
x:
|
|
2092
|
-
y:
|
|
2093
|
-
rotation:
|
|
2079
|
+
const I = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), R = {
|
|
2080
|
+
x: I.x,
|
|
2081
|
+
y: I.y,
|
|
2082
|
+
rotation: I.rotation,
|
|
2094
2083
|
scale: 1
|
|
2095
2084
|
// No scale - using dimensions
|
|
2096
|
-
},
|
|
2085
|
+
}, w = {
|
|
2097
2086
|
width: this.incoming.element.offsetWidth,
|
|
2098
2087
|
height: this.incoming.element.offsetHeight
|
|
2099
2088
|
};
|
|
@@ -2101,15 +2090,15 @@ class Ee {
|
|
|
2101
2090
|
this.incoming.element,
|
|
2102
2091
|
this.incoming.originalState,
|
|
2103
2092
|
R,
|
|
2104
|
-
|
|
2093
|
+
w
|
|
2105
2094
|
);
|
|
2106
2095
|
} else
|
|
2107
2096
|
this.outgoing = null;
|
|
2108
|
-
if (this.incoming = this.startFocusAnimation(t, e, i,
|
|
2097
|
+
if (this.incoming = this.startFocusAnimation(t, e, i, y, v), await Promise.all([
|
|
2109
2098
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2110
2099
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2111
2100
|
]), this.focusGeneration !== n) return;
|
|
2112
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2101
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2113
2102
|
return;
|
|
2114
2103
|
}
|
|
2115
2104
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2119,28 +2108,28 @@ class Ee {
|
|
|
2119
2108
|
this.outgoing.originalWidth,
|
|
2120
2109
|
this.outgoing.originalHeight
|
|
2121
2110
|
), this.outgoing = null), this.incoming) {
|
|
2122
|
-
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0),
|
|
2111
|
+
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), y = {
|
|
2123
2112
|
x: f.x,
|
|
2124
2113
|
y: f.y,
|
|
2125
2114
|
rotation: f.rotation,
|
|
2126
2115
|
scale: 1
|
|
2127
2116
|
// No scale - using dimensions
|
|
2128
|
-
},
|
|
2117
|
+
}, v = {
|
|
2129
2118
|
width: this.incoming.element.offsetWidth,
|
|
2130
2119
|
height: this.incoming.element.offsetHeight
|
|
2131
2120
|
};
|
|
2132
2121
|
this.outgoing = this.startUnfocusAnimation(
|
|
2133
2122
|
this.incoming.element,
|
|
2134
2123
|
this.incoming.originalState,
|
|
2135
|
-
|
|
2136
|
-
|
|
2124
|
+
y,
|
|
2125
|
+
v
|
|
2137
2126
|
);
|
|
2138
2127
|
}
|
|
2139
2128
|
if (this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2140
2129
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2141
2130
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2142
2131
|
]), this.focusGeneration !== n) return;
|
|
2143
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2132
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2144
2133
|
break;
|
|
2145
2134
|
}
|
|
2146
2135
|
}
|
|
@@ -2148,10 +2137,10 @@ class Ee {
|
|
|
2148
2137
|
* Unfocus current image, returning it to original position
|
|
2149
2138
|
*/
|
|
2150
2139
|
async unfocusImage() {
|
|
2151
|
-
var
|
|
2140
|
+
var a, r, s;
|
|
2152
2141
|
const t = ++this.focusGeneration;
|
|
2153
2142
|
if (!this.currentFocus || !this.focusData) {
|
|
2154
|
-
if (this.incoming && this.state ===
|
|
2143
|
+
if (this.incoming && this.state === E.FOCUSING) {
|
|
2155
2144
|
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
|
|
2156
2145
|
x: h.x,
|
|
2157
2146
|
y: h.y,
|
|
@@ -2167,12 +2156,12 @@ class Ee {
|
|
|
2167
2156
|
this.incoming.originalState,
|
|
2168
2157
|
l,
|
|
2169
2158
|
u
|
|
2170
|
-
), this.incoming = null, this.state =
|
|
2171
|
-
this.removeFocusedStyling(this.outgoing.element, ((
|
|
2159
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2160
|
+
this.removeFocusedStyling(this.outgoing.element, ((a = this.focusData) == null ? void 0 : a.originalZIndex) || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE;
|
|
2172
2161
|
}
|
|
2173
2162
|
return;
|
|
2174
2163
|
}
|
|
2175
|
-
if (this.state ===
|
|
2164
|
+
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2176
2165
|
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
|
|
2177
2166
|
x: h.x,
|
|
2178
2167
|
y: h.y,
|
|
@@ -2192,12 +2181,12 @@ class Ee {
|
|
|
2192
2181
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2193
2182
|
this.waitForAnimation(c.animationHandle)
|
|
2194
2183
|
]), this.focusGeneration !== t) return;
|
|
2195
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(c.element, ((
|
|
2184
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(c.element, ((s = this.incoming.originalState.zIndex) == null ? void 0 : s.toString()) || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2196
2185
|
return;
|
|
2197
2186
|
}
|
|
2198
|
-
this.state =
|
|
2187
|
+
this.state = E.UNFOCUSING;
|
|
2199
2188
|
const e = this.currentFocus, i = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2200
|
-
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state =
|
|
2189
|
+
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE);
|
|
2201
2190
|
}
|
|
2202
2191
|
/**
|
|
2203
2192
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2215,7 +2204,7 @@ class Ee {
|
|
|
2215
2204
|
* Check if an image is currently focused (stable state)
|
|
2216
2205
|
*/
|
|
2217
2206
|
isFocused(t) {
|
|
2218
|
-
return this.currentFocus === t && this.state ===
|
|
2207
|
+
return this.currentFocus === t && this.state === E.FOCUSED;
|
|
2219
2208
|
}
|
|
2220
2209
|
/**
|
|
2221
2210
|
* Check if an image is the target of current focus animation
|
|
@@ -2238,9 +2227,9 @@ class Ee {
|
|
|
2238
2227
|
* Used during swipe gestures for visual feedback
|
|
2239
2228
|
*/
|
|
2240
2229
|
setDragOffset(t) {
|
|
2241
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2242
|
-
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"],
|
|
2243
|
-
n.push(`translate(${
|
|
2230
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2231
|
+
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], a = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2232
|
+
n.push(`translate(${a}px, ${r}px)`), i.rotation !== void 0 && n.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = n.join(" ");
|
|
2244
2233
|
}
|
|
2245
2234
|
/**
|
|
2246
2235
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2248,10 +2237,10 @@ class Ee {
|
|
|
2248
2237
|
* @param duration - Animation duration in ms (default 150)
|
|
2249
2238
|
*/
|
|
2250
2239
|
clearDragOffset(t, e = 150) {
|
|
2251
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2252
|
-
const i = this.currentFocus, n = this.focusData.focusTransform,
|
|
2253
|
-
|
|
2254
|
-
const h =
|
|
2240
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2241
|
+
const i = this.currentFocus, n = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = n.x ?? 0, s = n.y ?? 0;
|
|
2242
|
+
a.push(`translate(${r}px, ${s}px)`), n.rotation !== void 0 && a.push(`rotate(${n.rotation}deg)`);
|
|
2243
|
+
const h = a.join(" ");
|
|
2255
2244
|
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = h, setTimeout(() => {
|
|
2256
2245
|
this.currentFocus === i && (i.style.transition = "none");
|
|
2257
2246
|
}, e)) : (i.style.transition = "none", i.style.transform = h);
|
|
@@ -2279,10 +2268,10 @@ class Ee {
|
|
|
2279
2268
|
this.focusData.originalZIndex,
|
|
2280
2269
|
this.focusData.originalWidth,
|
|
2281
2270
|
this.focusData.originalHeight
|
|
2282
|
-
), this.state =
|
|
2271
|
+
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2283
2272
|
}
|
|
2284
2273
|
}
|
|
2285
|
-
const
|
|
2274
|
+
const Re = 50, Ae = 0.5, Me = 20, ze = 0.3, Ce = 150, Fe = 30, mt = class mt {
|
|
2286
2275
|
constructor(t, e) {
|
|
2287
2276
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2288
2277
|
}
|
|
@@ -2329,21 +2318,21 @@ const Te = 50, Re = 0.5, Ae = 20, Me = 0.3, ze = 150, Fe = 30, mt = class mt {
|
|
|
2329
2318
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2330
2319
|
const e = t.touches[0], i = e.clientX - this.touchState.startX, n = e.clientY - this.touchState.startY;
|
|
2331
2320
|
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + n * n) > 10) {
|
|
2332
|
-
const
|
|
2333
|
-
this.touchState.isHorizontalSwipe =
|
|
2321
|
+
const s = Math.atan2(Math.abs(n), Math.abs(i)) * (180 / Math.PI);
|
|
2322
|
+
this.touchState.isHorizontalSwipe = s <= Fe;
|
|
2334
2323
|
}
|
|
2335
2324
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2336
2325
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2337
|
-
const
|
|
2338
|
-
this.callbacks.onDragOffset(
|
|
2326
|
+
const a = i * ze;
|
|
2327
|
+
this.callbacks.onDragOffset(a);
|
|
2339
2328
|
}
|
|
2340
2329
|
}
|
|
2341
2330
|
handleTouchEnd(t) {
|
|
2342
2331
|
if (!this.touchState) return;
|
|
2343
2332
|
this.recentTouchTimestamp = Date.now();
|
|
2344
|
-
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, n = Math.abs(e) / i,
|
|
2333
|
+
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, n = Math.abs(e) / i, a = Math.abs(e);
|
|
2345
2334
|
let r = !1;
|
|
2346
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (
|
|
2335
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Re || n >= Ae && a >= Me) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2347
2336
|
}
|
|
2348
2337
|
handleTouchCancel(t) {
|
|
2349
2338
|
var e;
|
|
@@ -2351,9 +2340,9 @@ const Te = 50, Re = 0.5, Ae = 20, Me = 0.3, ze = 150, Fe = 30, mt = class mt {
|
|
|
2351
2340
|
}
|
|
2352
2341
|
};
|
|
2353
2342
|
mt.TOUCH_CLICK_DELAY = 300;
|
|
2354
|
-
let
|
|
2355
|
-
class
|
|
2356
|
-
constructor(t
|
|
2343
|
+
let It = mt;
|
|
2344
|
+
class Le {
|
|
2345
|
+
constructor(t) {
|
|
2357
2346
|
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)
|
|
2358
2347
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
2359
2348
|
}
|
|
@@ -2364,12 +2353,12 @@ class Ce {
|
|
|
2364
2353
|
async prepare(t) {
|
|
2365
2354
|
this._discoveredUrls = [];
|
|
2366
2355
|
for (const e of this.sources)
|
|
2367
|
-
if (
|
|
2356
|
+
if ("folders" in e)
|
|
2368
2357
|
for (const i of e.folders) {
|
|
2369
|
-
const n = e.recursive !== void 0 ? e.recursive : !0,
|
|
2370
|
-
this._discoveredUrls.push(...
|
|
2358
|
+
const n = e.recursive !== void 0 ? e.recursive : !0, a = await this.loadFromFolder(i, t, n);
|
|
2359
|
+
this._discoveredUrls.push(...a);
|
|
2371
2360
|
}
|
|
2372
|
-
else if (
|
|
2361
|
+
else if ("files" in e) {
|
|
2373
2362
|
const i = await this.loadFiles(e.files, t);
|
|
2374
2363
|
this._discoveredUrls.push(...i);
|
|
2375
2364
|
}
|
|
@@ -2433,8 +2422,8 @@ class Ce {
|
|
|
2433
2422
|
return this.loadImagesDirectly(n, e);
|
|
2434
2423
|
try {
|
|
2435
2424
|
return i ? await this.loadImagesRecursively(n, e) : await this.loadImagesFromSingleFolder(n, e);
|
|
2436
|
-
} catch (
|
|
2437
|
-
return console.error("Error loading from Google Drive API:",
|
|
2425
|
+
} catch (a) {
|
|
2426
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(n, e);
|
|
2438
2427
|
}
|
|
2439
2428
|
}
|
|
2440
2429
|
/**
|
|
@@ -2444,10 +2433,10 @@ class Ce {
|
|
|
2444
2433
|
* @returns Promise resolving to array of image URLs
|
|
2445
2434
|
*/
|
|
2446
2435
|
async loadImagesFromSingleFolder(t, e) {
|
|
2447
|
-
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2448
|
-
if (!
|
|
2449
|
-
throw new Error(`API request failed: ${
|
|
2450
|
-
const l = (await
|
|
2436
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2437
|
+
if (!s.ok)
|
|
2438
|
+
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2439
|
+
const l = (await s.json()).files.filter(
|
|
2451
2440
|
(u) => u.mimeType.startsWith("image/") && e.isAllowed(u.name)
|
|
2452
2441
|
);
|
|
2453
2442
|
return this.log(`Found ${l.length} images in folder ${t} (non-recursive)`), l.forEach((u) => {
|
|
@@ -2463,24 +2452,24 @@ class Ce {
|
|
|
2463
2452
|
async loadFiles(t, e) {
|
|
2464
2453
|
const i = [];
|
|
2465
2454
|
for (const n of t) {
|
|
2466
|
-
const
|
|
2467
|
-
if (!
|
|
2455
|
+
const a = this.extractFileId(n);
|
|
2456
|
+
if (!a) {
|
|
2468
2457
|
this.log(`Skipping invalid file URL: ${n}`);
|
|
2469
2458
|
continue;
|
|
2470
2459
|
}
|
|
2471
2460
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2472
2461
|
try {
|
|
2473
|
-
const r = `${this.apiEndpoint}/${
|
|
2474
|
-
if (
|
|
2475
|
-
const h = await
|
|
2476
|
-
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${
|
|
2462
|
+
const r = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(r);
|
|
2463
|
+
if (s.ok) {
|
|
2464
|
+
const h = await s.json();
|
|
2465
|
+
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${a}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
|
|
2477
2466
|
} else
|
|
2478
|
-
this.log(`Failed to fetch metadata for file ${
|
|
2467
|
+
this.log(`Failed to fetch metadata for file ${a}: ${s.status}`);
|
|
2479
2468
|
} catch (r) {
|
|
2480
|
-
this.log(`Error fetching metadata for file ${
|
|
2469
|
+
this.log(`Error fetching metadata for file ${a}:`, r);
|
|
2481
2470
|
}
|
|
2482
2471
|
else
|
|
2483
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2472
|
+
i.push(`https://lh3.googleusercontent.com/d/${a}=s1600`);
|
|
2484
2473
|
}
|
|
2485
2474
|
return i;
|
|
2486
2475
|
}
|
|
@@ -2514,10 +2503,10 @@ class Ce {
|
|
|
2514
2503
|
* @returns Promise resolving to array of image URLs
|
|
2515
2504
|
*/
|
|
2516
2505
|
async loadImagesRecursively(t, e) {
|
|
2517
|
-
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2518
|
-
if (!
|
|
2519
|
-
throw new Error(`API request failed: ${
|
|
2520
|
-
const h = await
|
|
2506
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2507
|
+
if (!s.ok)
|
|
2508
|
+
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2509
|
+
const h = await s.json(), l = h.files.filter(
|
|
2521
2510
|
(c) => c.mimeType.startsWith("image/") && e.isAllowed(c.name)
|
|
2522
2511
|
), u = h.files.filter(
|
|
2523
2512
|
(c) => c.mimeType === "application/vnd.google-apps.folder"
|
|
@@ -2544,8 +2533,8 @@ class Ce {
|
|
|
2544
2533
|
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(i, { mode: "cors" });
|
|
2545
2534
|
if (!n.ok)
|
|
2546
2535
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2547
|
-
const
|
|
2548
|
-
return [...new Set(
|
|
2536
|
+
const a = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2537
|
+
return [...new Set(s.map((u) => u[1]))].map(
|
|
2549
2538
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2550
2539
|
);
|
|
2551
2540
|
} catch (i) {
|
|
@@ -2573,9 +2562,9 @@ class Ce {
|
|
|
2573
2562
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2574
2563
|
}
|
|
2575
2564
|
}
|
|
2576
|
-
class
|
|
2577
|
-
constructor(t
|
|
2578
|
-
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.
|
|
2565
|
+
class Oe {
|
|
2566
|
+
constructor(t) {
|
|
2567
|
+
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)
|
|
2579
2568
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
2580
2569
|
this.log("StaticImageLoader initialized with config:", t);
|
|
2581
2570
|
}
|
|
@@ -2619,13 +2608,13 @@ class Le {
|
|
|
2619
2608
|
return this._prepared;
|
|
2620
2609
|
}
|
|
2621
2610
|
/**
|
|
2622
|
-
* Process a single source object
|
|
2623
|
-
* @param source - Source configuration
|
|
2611
|
+
* Process a single source object using shape-based detection
|
|
2612
|
+
* @param source - Source configuration detected by key presence
|
|
2624
2613
|
* @param filter - Filter to apply to discovered images
|
|
2625
2614
|
* @returns Promise resolving to array of valid URLs from this source
|
|
2626
2615
|
*/
|
|
2627
2616
|
async processSource(t, e) {
|
|
2628
|
-
return
|
|
2617
|
+
return t ? "urls" in t ? await this.processUrls(t.urls, e) : "path" in t ? await this.processPath(t.path, t.files, e) : "json" in t ? await this.processJson(t.json, e) : (console.warn("Unknown source shape:", t), []) : (console.warn("Invalid source object:", t), []);
|
|
2629
2618
|
}
|
|
2630
2619
|
/**
|
|
2631
2620
|
* Process a list of direct URLs
|
|
@@ -2638,8 +2627,8 @@ class Le {
|
|
|
2638
2627
|
return console.warn("URLs must be an array:", t), [];
|
|
2639
2628
|
const i = [];
|
|
2640
2629
|
for (const n of t) {
|
|
2641
|
-
const
|
|
2642
|
-
if (!e.isAllowed(
|
|
2630
|
+
const a = n.split("/").pop() || n;
|
|
2631
|
+
if (!e.isAllowed(a)) {
|
|
2643
2632
|
this.log(`Skipping filtered URL: ${n}`);
|
|
2644
2633
|
continue;
|
|
2645
2634
|
}
|
|
@@ -2655,21 +2644,41 @@ class Le {
|
|
|
2655
2644
|
* @returns Promise resolving to array of validated URLs
|
|
2656
2645
|
*/
|
|
2657
2646
|
async processPath(t, e, i) {
|
|
2658
|
-
if (!t)
|
|
2659
|
-
return console.warn("basePath is required for path-type sources"), [];
|
|
2660
2647
|
if (!Array.isArray(e))
|
|
2661
2648
|
return console.warn("files must be an array:", e), [];
|
|
2662
2649
|
const n = [];
|
|
2663
|
-
for (const
|
|
2664
|
-
if (!i.isAllowed(
|
|
2665
|
-
this.log(`Skipping filtered file: ${
|
|
2650
|
+
for (const a of e) {
|
|
2651
|
+
if (!i.isAllowed(a)) {
|
|
2652
|
+
this.log(`Skipping filtered file: ${a}`);
|
|
2666
2653
|
continue;
|
|
2667
2654
|
}
|
|
2668
|
-
const r = this.constructUrl(t,
|
|
2655
|
+
const r = this.constructUrl(t, a);
|
|
2669
2656
|
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2670
2657
|
}
|
|
2671
2658
|
return n;
|
|
2672
2659
|
}
|
|
2660
|
+
/**
|
|
2661
|
+
* Process a JSON endpoint source
|
|
2662
|
+
* Fetches a JSON endpoint that returns { images: string[] }
|
|
2663
|
+
* @param url - JSON endpoint URL
|
|
2664
|
+
* @param filter - Filter to apply to discovered images
|
|
2665
|
+
* @returns Promise resolving to array of validated URLs
|
|
2666
|
+
*/
|
|
2667
|
+
async processJson(t, e) {
|
|
2668
|
+
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2669
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), 1e4);
|
|
2670
|
+
try {
|
|
2671
|
+
const a = await fetch(t, { signal: i.signal });
|
|
2672
|
+
if (clearTimeout(n), !a.ok)
|
|
2673
|
+
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
2674
|
+
const r = await a.json();
|
|
2675
|
+
if (!r || !Array.isArray(r.images))
|
|
2676
|
+
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2677
|
+
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2678
|
+
} catch (a) {
|
|
2679
|
+
throw clearTimeout(n), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
2680
|
+
}
|
|
2681
|
+
}
|
|
2673
2682
|
/**
|
|
2674
2683
|
* Validate a single URL using HEAD request
|
|
2675
2684
|
* @param url - URL to validate
|
|
@@ -2689,11 +2698,11 @@ class Le {
|
|
|
2689
2698
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2690
2699
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2691
2700
|
try {
|
|
2692
|
-
const i = new AbortController(), n = setTimeout(() => i.abort(), this.validationTimeout),
|
|
2701
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), this.validationTimeout), a = await fetch(t, {
|
|
2693
2702
|
method: "HEAD",
|
|
2694
2703
|
signal: i.signal
|
|
2695
2704
|
});
|
|
2696
|
-
return clearTimeout(n),
|
|
2705
|
+
return clearTimeout(n), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
2697
2706
|
} catch (i) {
|
|
2698
2707
|
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2699
2708
|
}
|
|
@@ -2733,7 +2742,7 @@ class Le {
|
|
|
2733
2742
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2734
2743
|
}
|
|
2735
2744
|
}
|
|
2736
|
-
class
|
|
2745
|
+
class $e {
|
|
2737
2746
|
constructor(t) {
|
|
2738
2747
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2739
2748
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -2747,8 +2756,8 @@ class Oe {
|
|
|
2747
2756
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2748
2757
|
const e = this.loaders.map((i, n) => i.prepare(t).then(() => {
|
|
2749
2758
|
this.log(`Loader ${n} prepared with ${i.imagesLength()} images`);
|
|
2750
|
-
}).catch((
|
|
2751
|
-
console.warn(`Loader ${n} failed to prepare:`,
|
|
2759
|
+
}).catch((a) => {
|
|
2760
|
+
console.warn(`Loader ${n} failed to prepare:`, a);
|
|
2752
2761
|
}));
|
|
2753
2762
|
await Promise.all(e);
|
|
2754
2763
|
for (const i of this.loaders)
|
|
@@ -2790,7 +2799,7 @@ class Oe {
|
|
|
2790
2799
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2791
2800
|
}
|
|
2792
2801
|
}
|
|
2793
|
-
class
|
|
2802
|
+
class De {
|
|
2794
2803
|
/**
|
|
2795
2804
|
* Create a new ImageFilter
|
|
2796
2805
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2828,7 +2837,7 @@ class $e {
|
|
|
2828
2837
|
// isAllowedDate(date: Date): boolean
|
|
2829
2838
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2830
2839
|
}
|
|
2831
|
-
const
|
|
2840
|
+
const Ue = `
|
|
2832
2841
|
.fbn-ic-gallery {
|
|
2833
2842
|
position: relative;
|
|
2834
2843
|
width: 100%;
|
|
@@ -2874,56 +2883,67 @@ function Pe() {
|
|
|
2874
2883
|
const o = "fbn-ic-functional-styles";
|
|
2875
2884
|
if (document.getElementById(o)) return;
|
|
2876
2885
|
const t = document.createElement("style");
|
|
2877
|
-
t.id = o, t.textContent =
|
|
2886
|
+
t.id = o, t.textContent = Ue, document.head.appendChild(t);
|
|
2878
2887
|
}
|
|
2879
|
-
class
|
|
2888
|
+
class _e {
|
|
2880
2889
|
constructor(t = {}) {
|
|
2881
|
-
var i, n,
|
|
2882
|
-
this.fullConfig =
|
|
2890
|
+
var i, n, a, r, s, h;
|
|
2891
|
+
this.fullConfig = Jt(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.animationEngine = new Qt(this.fullConfig.animation), this.layoutEngine = new xe({
|
|
2883
2892
|
layout: this.fullConfig.layout,
|
|
2884
2893
|
image: this.fullConfig.image
|
|
2885
|
-
}), this.zoomEngine = new
|
|
2886
|
-
const e = this.fullConfig.animation.entry ||
|
|
2887
|
-
this.entryAnimationEngine = new
|
|
2894
|
+
}), this.zoomEngine = new Te(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = ft((i = this.fullConfig.styling) == null ? void 0 : i.default), this.hoverStyles = ft((n = this.fullConfig.styling) == null ? void 0 : n.hover), this.defaultClassName = (r = (a = this.fullConfig.styling) == null ? void 0 : a.default) == null ? void 0 : r.className, this.hoverClassName = (h = (s = this.fullConfig.styling) == null ? void 0 : s.hover) == null ? void 0 : h.className;
|
|
2895
|
+
const e = this.fullConfig.animation.entry || S.animation.entry;
|
|
2896
|
+
this.entryAnimationEngine = new he(
|
|
2888
2897
|
e,
|
|
2889
2898
|
this.fullConfig.layout.algorithm
|
|
2890
2899
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2891
2900
|
}
|
|
2892
2901
|
/**
|
|
2893
|
-
* Create image filter based on config
|
|
2902
|
+
* Create image filter based on shared loader config
|
|
2894
2903
|
*/
|
|
2895
2904
|
createImageFilter() {
|
|
2896
|
-
var
|
|
2897
|
-
const t = this.fullConfig.
|
|
2898
|
-
|
|
2899
|
-
return t === "googleDrive" ? e = (i = this.fullConfig.loader.googleDrive) == null ? void 0 : i.allowedExtensions : e = (n = this.fullConfig.loader.static) == null ? void 0 : n.allowedExtensions, new $e(e);
|
|
2905
|
+
var e;
|
|
2906
|
+
const t = (e = this.fullConfig.config.loaders) == null ? void 0 : e.allowedExtensions;
|
|
2907
|
+
return new De(t);
|
|
2900
2908
|
}
|
|
2901
2909
|
/**
|
|
2902
2910
|
* Create appropriate image loader based on config
|
|
2911
|
+
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2903
2912
|
*/
|
|
2904
2913
|
createLoader() {
|
|
2905
|
-
|
|
2914
|
+
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2915
|
+
if (!t || t.length === 0)
|
|
2916
|
+
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2917
|
+
const i = t.map((n) => this.createLoaderFromEntry(n, e));
|
|
2918
|
+
return i.length === 1 ? i[0] : new $e({
|
|
2919
|
+
loaders: i,
|
|
2920
|
+
debugLogging: e.debugLogging
|
|
2921
|
+
});
|
|
2906
2922
|
}
|
|
2907
2923
|
/**
|
|
2908
|
-
* Create a loader from a
|
|
2924
|
+
* Create a single loader from a LoaderEntry, merging shared config
|
|
2909
2925
|
*/
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2926
|
+
createLoaderFromEntry(t, e) {
|
|
2927
|
+
if ("static" in t) {
|
|
2928
|
+
const i = t.static, n = {
|
|
2929
|
+
...i,
|
|
2930
|
+
validateUrls: i.validateUrls ?? e.validateUrls,
|
|
2931
|
+
validationTimeout: i.validationTimeout ?? e.validationTimeout,
|
|
2932
|
+
validationMethod: i.validationMethod ?? e.validationMethod,
|
|
2933
|
+
failOnAllMissing: i.failOnAllMissing ?? e.failOnAllMissing,
|
|
2934
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2935
|
+
debugLogging: i.debugLogging ?? e.debugLogging
|
|
2936
|
+
};
|
|
2937
|
+
return new Oe(n);
|
|
2938
|
+
} else if ("googleDrive" in t) {
|
|
2939
|
+
const i = t.googleDrive, n = {
|
|
2940
|
+
...i,
|
|
2941
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2942
|
+
debugLogging: i.debugLogging ?? e.debugLogging
|
|
2943
|
+
};
|
|
2944
|
+
return new Le(n);
|
|
2945
|
+
} else
|
|
2946
|
+
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2927
2947
|
}
|
|
2928
2948
|
/**
|
|
2929
2949
|
* Initialize the gallery
|
|
@@ -2934,12 +2954,12 @@ class Ue {
|
|
|
2934
2954
|
this.containerEl = this.containerRef;
|
|
2935
2955
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2936
2956
|
throw new Error(`Container #${this.containerId} not found`);
|
|
2937
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
2957
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new It(this.containerEl, {
|
|
2938
2958
|
onNext: () => this.navigateToNextImage(),
|
|
2939
2959
|
onPrev: () => this.navigateToPreviousImage(),
|
|
2940
2960
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
2941
2961
|
onDragEnd: (t) => {
|
|
2942
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
2962
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ce);
|
|
2943
2963
|
}
|
|
2944
2964
|
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2945
2965
|
} catch (t) {
|
|
@@ -3013,13 +3033,13 @@ class Ue {
|
|
|
3013
3033
|
this.showError("No images found."), this.showLoading(!1);
|
|
3014
3034
|
return;
|
|
3015
3035
|
}
|
|
3016
|
-
const i = this.getContainerBounds(), n = this.getImageHeight(),
|
|
3036
|
+
const i = this.getContainerBounds(), n = this.getImageHeight(), a = window.innerWidth;
|
|
3017
3037
|
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3018
3038
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3019
3039
|
i,
|
|
3020
3040
|
t,
|
|
3021
3041
|
n,
|
|
3022
|
-
|
|
3042
|
+
a
|
|
3023
3043
|
);
|
|
3024
3044
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3025
3045
|
} catch (t) {
|
|
@@ -3036,10 +3056,10 @@ class Ue {
|
|
|
3036
3056
|
if (!this.containerEl) return;
|
|
3037
3057
|
const i = this.getContainerBounds();
|
|
3038
3058
|
this.currentImageHeight = e;
|
|
3039
|
-
const n = this.loadGeneration,
|
|
3040
|
-
this.imageLayouts =
|
|
3059
|
+
const n = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
3060
|
+
this.imageLayouts = a, this.displayQueue = [];
|
|
3041
3061
|
let r = 0;
|
|
3042
|
-
const
|
|
3062
|
+
const s = (l) => {
|
|
3043
3063
|
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(() => {
|
|
3044
3064
|
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)) {
|
|
3045
3065
|
const d = {
|
|
@@ -3048,21 +3068,21 @@ class Ue {
|
|
|
3048
3068
|
}, m = {
|
|
3049
3069
|
x: parseFloat(l.dataset.endX),
|
|
3050
3070
|
y: parseFloat(l.dataset.endY)
|
|
3051
|
-
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), f = parseFloat(l.dataset.scale),
|
|
3052
|
-
|
|
3071
|
+
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), f = parseFloat(l.dataset.scale), y = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : g, v = l.dataset.startScale ? parseFloat(l.dataset.startScale) : f, I = this.entryAnimationEngine.getTiming();
|
|
3072
|
+
re({
|
|
3053
3073
|
element: l,
|
|
3054
3074
|
startPosition: d,
|
|
3055
3075
|
endPosition: m,
|
|
3056
3076
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3057
|
-
duration:
|
|
3077
|
+
duration: I.duration,
|
|
3058
3078
|
imageWidth: b,
|
|
3059
3079
|
imageHeight: p,
|
|
3060
3080
|
rotation: g,
|
|
3061
3081
|
scale: f,
|
|
3062
3082
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3063
|
-
startRotation:
|
|
3083
|
+
startRotation: y,
|
|
3064
3084
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3065
|
-
startScale:
|
|
3085
|
+
startScale: v
|
|
3066
3086
|
});
|
|
3067
3087
|
} else {
|
|
3068
3088
|
const d = l.dataset.finalTransform || "";
|
|
@@ -3087,7 +3107,7 @@ class Ue {
|
|
|
3087
3107
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3088
3108
|
for (; this.displayQueue.length > 0; ) {
|
|
3089
3109
|
const l = this.displayQueue.shift();
|
|
3090
|
-
l &&
|
|
3110
|
+
l && s(l);
|
|
3091
3111
|
}
|
|
3092
3112
|
return;
|
|
3093
3113
|
}
|
|
@@ -3098,7 +3118,7 @@ class Ue {
|
|
|
3098
3118
|
}
|
|
3099
3119
|
if (this.displayQueue.length > 0) {
|
|
3100
3120
|
const l = this.displayQueue.shift();
|
|
3101
|
-
l &&
|
|
3121
|
+
l && s(l);
|
|
3102
3122
|
}
|
|
3103
3123
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3104
3124
|
}, this.fullConfig.animation.queue.interval);
|
|
@@ -3112,7 +3132,7 @@ class Ue {
|
|
|
3112
3132
|
l.observe(this.containerEl);
|
|
3113
3133
|
} else
|
|
3114
3134
|
h();
|
|
3115
|
-
this.fullConfig.layout.debugCenters && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()),
|
|
3135
|
+
this.fullConfig.layout.debugCenters && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), a.forEach((l, u) => {
|
|
3116
3136
|
const c = document.createElement("div");
|
|
3117
3137
|
c.className = "fbn-ic-debug-center", c.style.position = "absolute", c.style.width = "12px", c.style.height = "12px", c.style.borderRadius = "50%", c.style.backgroundColor = "red", c.style.border = "2px solid yellow", c.style.zIndex = "9999", c.style.pointerEvents = "none";
|
|
3118
3138
|
const d = l.x, m = l.y;
|
|
@@ -3121,11 +3141,11 @@ class Ue {
|
|
|
3121
3141
|
var m, b;
|
|
3122
3142
|
const c = document.createElement("img");
|
|
3123
3143
|
c.referrerPolicy = "no-referrer", c.classList.add("fbn-ic-image"), c.dataset.imageId = String(u);
|
|
3124
|
-
const d =
|
|
3144
|
+
const d = a[u];
|
|
3125
3145
|
c.style.position = "absolute", c.style.width = "auto", c.style.height = `${e}px`, c.style.left = `${d.x}px`, c.style.top = `${d.y}px`, d.borderColor && !((b = (m = this.fullConfig.styling) == null ? void 0 : m.default) != null && b.border) && (c.style.border = `5px solid ${d.borderColor}`, c.style.boxSizing = "border-box"), d.zIndex && (c.style.zIndex = String(d.zIndex)), lt(c, this.defaultStyles), ht(c, this.defaultClassName), c.addEventListener("mouseenter", () => {
|
|
3126
3146
|
this.hoveredImage = { element: c, layout: d }, this.zoomEngine.isInvolved(c) || (lt(c, this.hoverStyles), ht(c, this.hoverClassName));
|
|
3127
3147
|
}), c.addEventListener("mouseleave", () => {
|
|
3128
|
-
this.hoveredImage = null, this.zoomEngine.isInvolved(c) || (lt(c, this.defaultStyles),
|
|
3148
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(c) || (lt(c, this.defaultStyles), _t(c, this.hoverClassName), ht(c, this.defaultClassName));
|
|
3129
3149
|
}), c.addEventListener("click", (p) => {
|
|
3130
3150
|
p.stopPropagation(), this.handleImageClick(c, d);
|
|
3131
3151
|
}), c.style.opacity = "0", c.style.transition = this.entryAnimationEngine.getTransitionCSS(), c.onload = () => {
|
|
@@ -3133,51 +3153,51 @@ class Ue {
|
|
|
3133
3153
|
return;
|
|
3134
3154
|
const p = c.naturalWidth / c.naturalHeight, g = e * p;
|
|
3135
3155
|
c.style.width = `${g}px`;
|
|
3136
|
-
const f = { x: d.x, y: d.y },
|
|
3156
|
+
const f = { x: d.x, y: d.y }, y = { width: g, height: e }, v = this.entryAnimationEngine.calculateStartPosition(
|
|
3137
3157
|
f,
|
|
3138
|
-
|
|
3158
|
+
y,
|
|
3139
3159
|
i,
|
|
3140
3160
|
u,
|
|
3141
3161
|
t.length
|
|
3142
|
-
),
|
|
3162
|
+
), I = this.entryAnimationEngine.calculateStartRotation(d.rotation), R = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3143
3163
|
d.rotation,
|
|
3144
3164
|
d.scale,
|
|
3145
3165
|
g,
|
|
3146
3166
|
e
|
|
3147
3167
|
), L = this.entryAnimationEngine.buildStartTransform(
|
|
3148
|
-
|
|
3168
|
+
v,
|
|
3149
3169
|
f,
|
|
3150
3170
|
d.rotation,
|
|
3151
3171
|
d.scale,
|
|
3152
3172
|
g,
|
|
3153
3173
|
e,
|
|
3154
|
-
|
|
3174
|
+
I,
|
|
3155
3175
|
R
|
|
3156
3176
|
);
|
|
3157
3177
|
this.fullConfig.debug && u < 3 && console.log(`Image ${u}:`, {
|
|
3158
3178
|
finalPosition: f,
|
|
3159
|
-
imageSize:
|
|
3179
|
+
imageSize: y,
|
|
3160
3180
|
left: d.x,
|
|
3161
3181
|
top: d.y,
|
|
3162
|
-
finalTransform:
|
|
3182
|
+
finalTransform: w,
|
|
3163
3183
|
renderedWidth: g,
|
|
3164
3184
|
renderedHeight: e
|
|
3165
|
-
}), c.style.transform = L, c.dataset.finalTransform =
|
|
3185
|
+
}), c.style.transform = L, c.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || I !== d.rotation || R !== d.scale) && (c.dataset.startX = String(v.x), c.dataset.startY = String(v.y), c.dataset.endX = String(f.x), c.dataset.endY = String(f.y), c.dataset.imageWidth = String(g), c.dataset.imageHeight = String(e), c.dataset.rotation = String(d.rotation), c.dataset.scale = String(d.scale), c.dataset.startRotation = String(I), c.dataset.startScale = String(R)), this.displayQueue.push(c);
|
|
3166
3186
|
}, c.onerror = () => r++, c.src = l;
|
|
3167
3187
|
});
|
|
3168
3188
|
}
|
|
3169
3189
|
async handleImageClick(t, e) {
|
|
3170
|
-
var
|
|
3190
|
+
var a, r;
|
|
3171
3191
|
if (!this.containerEl) return;
|
|
3172
3192
|
const i = this.zoomEngine.isFocused(t), n = {
|
|
3173
3193
|
width: this.containerEl.offsetWidth,
|
|
3174
3194
|
height: this.containerEl.offsetHeight
|
|
3175
3195
|
};
|
|
3176
3196
|
if (i)
|
|
3177
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (
|
|
3197
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (a = this.swipeEngine) == null || a.disable();
|
|
3178
3198
|
else {
|
|
3179
|
-
const
|
|
3180
|
-
this.currentFocusIndex =
|
|
3199
|
+
const s = t.dataset.imageId;
|
|
3200
|
+
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, (r = this.swipeEngine) == null || r.enable(), await this.zoomEngine.focusImage(t, n, e);
|
|
3181
3201
|
}
|
|
3182
3202
|
}
|
|
3183
3203
|
/**
|
|
@@ -3204,28 +3224,29 @@ class Ue {
|
|
|
3204
3224
|
}
|
|
3205
3225
|
}
|
|
3206
3226
|
export {
|
|
3207
|
-
|
|
3227
|
+
Qt as AnimationEngine,
|
|
3208
3228
|
zt as BOUNCE_PRESETS,
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3229
|
+
ve as ClusterPlacementGenerator,
|
|
3230
|
+
$e as CompositeLoader,
|
|
3231
|
+
S as DEFAULT_CONFIG,
|
|
3232
|
+
Ut as DEFAULT_SHARED_LOADER_CONFIG,
|
|
3233
|
+
Ct as ELASTIC_PRESETS,
|
|
3234
|
+
he as EntryAnimationEngine,
|
|
3235
|
+
Ue as FUNCTIONAL_CSS,
|
|
3236
|
+
Le as GoogleDriveLoader,
|
|
3237
|
+
fe as GridPlacementGenerator,
|
|
3238
|
+
_e as ImageCloud,
|
|
3239
|
+
De as ImageFilter,
|
|
3240
|
+
_e as ImageGallery,
|
|
3241
|
+
xe as LayoutEngine,
|
|
3242
|
+
ue as RadialPlacementGenerator,
|
|
3243
|
+
de as RandomPlacementGenerator,
|
|
3244
|
+
be as SpiralPlacementGenerator,
|
|
3245
|
+
Oe as StaticImageLoader,
|
|
3246
|
+
Ft as WAVE_PATH_PRESETS,
|
|
3247
|
+
Te as ZoomEngine,
|
|
3248
|
+
re as animatePath,
|
|
3228
3249
|
Pe as injectFunctionalStyles,
|
|
3229
|
-
|
|
3250
|
+
ce as requiresJSAnimation
|
|
3230
3251
|
};
|
|
3231
3252
|
//# sourceMappingURL=image-cloud.js.map
|