@frybynite/image-cloud 0.3.5 → 0.3.7
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 +4 -0
- package/dist/image-cloud-auto-init.js +1026 -1018
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +848 -840
- 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 +7 -7
- package/package.json +1 -1
package/dist/image-cloud.js
CHANGED
|
@@ -8,12 +8,12 @@ const St = 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
|
+
}), Ft = 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
|
+
}), Lt = 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 }),
|
|
@@ -49,17 +49,17 @@ const St = Object.freeze({
|
|
|
49
49
|
focused: Object.freeze({
|
|
50
50
|
shadow: "none"
|
|
51
51
|
})
|
|
52
|
-
}),
|
|
52
|
+
}), kt = Object.freeze({
|
|
53
53
|
rows: 1,
|
|
54
54
|
amplitude: 100,
|
|
55
55
|
frequency: 2,
|
|
56
56
|
phaseShift: 0,
|
|
57
57
|
synchronization: "offset"
|
|
58
58
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
59
|
-
}),
|
|
59
|
+
}), Gt = Object.freeze({
|
|
60
60
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
61
61
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
62
|
-
}),
|
|
62
|
+
}), Wt = Object.freeze({
|
|
63
63
|
mode: "adaptive",
|
|
64
64
|
// Default to adaptive sizing
|
|
65
65
|
minSize: 50,
|
|
@@ -71,28 +71,32 @@ const St = Object.freeze({
|
|
|
71
71
|
// No variance by default
|
|
72
72
|
max: 1
|
|
73
73
|
})
|
|
74
|
-
}),
|
|
74
|
+
}), qt = 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:
|
|
81
|
+
sizing: Wt,
|
|
82
|
+
rotation: qt
|
|
83
83
|
}), Ut = Object.freeze({
|
|
84
84
|
validateUrls: !0,
|
|
85
85
|
validationTimeout: 5e3,
|
|
86
86
|
validationMethod: "head",
|
|
87
87
|
failOnAllMissing: !0,
|
|
88
|
-
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
|
|
89
|
+
}), Pt = Object.freeze({
|
|
90
|
+
enabled: !1,
|
|
91
|
+
centers: !1,
|
|
92
|
+
loaders: !1
|
|
93
|
+
}), x = Object.freeze({
|
|
91
94
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
92
95
|
loaders: [],
|
|
93
|
-
// Shared loader settings
|
|
96
|
+
// Shared loader settings and debug config
|
|
94
97
|
config: Object.freeze({
|
|
95
|
-
loaders: Ut
|
|
98
|
+
loaders: Ut,
|
|
99
|
+
debug: Pt
|
|
96
100
|
}),
|
|
97
101
|
// Image sizing and rotation configuration
|
|
98
102
|
image: Dt,
|
|
@@ -101,7 +105,7 @@ const St = Object.freeze({
|
|
|
101
105
|
algorithm: "radial",
|
|
102
106
|
scaleDecay: 0,
|
|
103
107
|
// No decay by default (0-1 for radial/spiral)
|
|
104
|
-
responsive:
|
|
108
|
+
responsive: Gt,
|
|
105
109
|
targetCoverage: 0.6,
|
|
106
110
|
// Target 60% of container area
|
|
107
111
|
densityFactor: 1,
|
|
@@ -111,9 +115,7 @@ const St = Object.freeze({
|
|
|
111
115
|
// padding from viewport edges
|
|
112
116
|
minGap: 20
|
|
113
117
|
// minimum spacing between images
|
|
114
|
-
})
|
|
115
|
-
debugRadials: !1,
|
|
116
|
-
debugCenters: !1
|
|
118
|
+
})
|
|
117
119
|
}),
|
|
118
120
|
// Pattern-based animation configuration
|
|
119
121
|
animation: Object.freeze({
|
|
@@ -220,9 +222,7 @@ const St = Object.freeze({
|
|
|
220
222
|
})
|
|
221
223
|
}),
|
|
222
224
|
// Image styling
|
|
223
|
-
styling: $t
|
|
224
|
-
// Debug mode
|
|
225
|
-
debug: !1
|
|
225
|
+
styling: $t
|
|
226
226
|
});
|
|
227
227
|
function rt(o, t) {
|
|
228
228
|
if (!o) return t || {};
|
|
@@ -230,7 +230,7 @@ function rt(o, t) {
|
|
|
230
230
|
const e = { ...o };
|
|
231
231
|
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;
|
|
232
232
|
}
|
|
233
|
-
function
|
|
233
|
+
function Yt(o, t) {
|
|
234
234
|
if (!t) return { ...o };
|
|
235
235
|
const e = rt(o.default, t.default), i = rt(
|
|
236
236
|
rt(e, o.hover),
|
|
@@ -245,27 +245,27 @@ function qt(o, t) {
|
|
|
245
245
|
focused: n
|
|
246
246
|
};
|
|
247
247
|
}
|
|
248
|
-
function
|
|
249
|
-
var i, n,
|
|
248
|
+
function Xt(o, t) {
|
|
249
|
+
var i, n, s, r, a, c, u, l;
|
|
250
250
|
if (!t) return { ...o };
|
|
251
251
|
const e = { ...o };
|
|
252
252
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
253
253
|
...o.sizing,
|
|
254
254
|
...t.sizing
|
|
255
255
|
}, t.sizing.variance)) {
|
|
256
|
-
const
|
|
257
|
-
e.sizing.variance = { min:
|
|
256
|
+
const d = t.sizing.variance, h = d.min !== void 0 && d.min >= 0.25 && d.min <= 1 ? d.min : ((n = (i = o.sizing) == null ? void 0 : i.variance) == null ? void 0 : n.min) ?? 1, g = d.max !== void 0 && d.max >= 1 && d.max <= 1.75 ? d.max : ((r = (s = o.sizing) == null ? void 0 : s.variance) == null ? void 0 : r.max) ?? 1;
|
|
257
|
+
e.sizing.variance = { min: h, max: g };
|
|
258
258
|
}
|
|
259
259
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
260
260
|
...o.rotation,
|
|
261
261
|
...t.rotation
|
|
262
262
|
}, t.rotation.range)) {
|
|
263
|
-
const
|
|
264
|
-
e.rotation.range = { min:
|
|
263
|
+
const d = t.rotation.range, h = d.min !== void 0 && d.min >= -180 && d.min <= 0 ? d.min : ((c = (a = o.rotation) == null ? void 0 : a.range) == null ? void 0 : c.min) ?? -15, g = d.max !== void 0 && d.max >= 0 && d.max <= 180 ? d.max : ((l = (u = o.rotation) == null ? void 0 : u.range) == null ? void 0 : l.max) ?? 15;
|
|
264
|
+
e.rotation.range = { min: h, max: g };
|
|
265
265
|
}
|
|
266
266
|
return e;
|
|
267
267
|
}
|
|
268
|
-
function
|
|
268
|
+
function Bt(o) {
|
|
269
269
|
var e;
|
|
270
270
|
const t = (e = o.layout) == null ? void 0 : e.rotation;
|
|
271
271
|
if (t && "enabled" in t)
|
|
@@ -276,7 +276,7 @@ function Xt(o) {
|
|
|
276
276
|
}
|
|
277
277
|
};
|
|
278
278
|
}
|
|
279
|
-
function
|
|
279
|
+
function Jt(o) {
|
|
280
280
|
var e, i;
|
|
281
281
|
const t = (i = (e = o.layout) == null ? void 0 : e.sizing) == null ? void 0 : i.variance;
|
|
282
282
|
if (t)
|
|
@@ -288,15 +288,15 @@ function Bt(o) {
|
|
|
288
288
|
}
|
|
289
289
|
};
|
|
290
290
|
}
|
|
291
|
-
function
|
|
292
|
-
var
|
|
293
|
-
const t =
|
|
291
|
+
function Vt(o = {}) {
|
|
292
|
+
var c, u, l;
|
|
293
|
+
const t = Bt(o), e = Jt(o);
|
|
294
294
|
let i = o.image;
|
|
295
295
|
(t || e) && (i = {
|
|
296
296
|
...e || {},
|
|
297
297
|
...t || {},
|
|
298
298
|
...i
|
|
299
|
-
}, i.rotation && (t != null && t.rotation) && ((
|
|
299
|
+
}, i.rotation && (t != null && t.rotation) && ((c = o.image) != null && c.rotation) && (i.rotation = {
|
|
300
300
|
...t.rotation,
|
|
301
301
|
...o.image.rotation
|
|
302
302
|
}));
|
|
@@ -309,91 +309,93 @@ function Jt(o = {}) {
|
|
|
309
309
|
const r = {
|
|
310
310
|
loaders: {
|
|
311
311
|
...Ut,
|
|
312
|
-
...((
|
|
312
|
+
...((u = o.config) == null ? void 0 : u.loaders) ?? {}
|
|
313
313
|
}
|
|
314
|
-
},
|
|
314
|
+
}, a = {
|
|
315
315
|
loaders: n,
|
|
316
316
|
config: r,
|
|
317
|
-
image:
|
|
318
|
-
layout: { ...
|
|
319
|
-
animation: { ...
|
|
320
|
-
interaction: { ...
|
|
321
|
-
rendering: { ...
|
|
322
|
-
styling:
|
|
323
|
-
debug: E.debug
|
|
317
|
+
image: Xt(Dt, i),
|
|
318
|
+
layout: { ...x.layout },
|
|
319
|
+
animation: { ...x.animation },
|
|
320
|
+
interaction: { ...x.interaction },
|
|
321
|
+
rendering: { ...x.rendering },
|
|
322
|
+
styling: Yt($t, o.styling)
|
|
324
323
|
};
|
|
325
|
-
return o.layout && (
|
|
326
|
-
...
|
|
324
|
+
return o.layout && (a.layout = {
|
|
325
|
+
...x.layout,
|
|
327
326
|
...o.layout
|
|
328
|
-
}, o.layout.responsive && (
|
|
329
|
-
...
|
|
330
|
-
mobile: o.layout.responsive.mobile ? { ...
|
|
331
|
-
tablet: o.layout.responsive.tablet ? { ...
|
|
332
|
-
}), o.layout.spacing && (
|
|
333
|
-
...
|
|
327
|
+
}, o.layout.responsive && (a.layout.responsive = {
|
|
328
|
+
...x.layout.responsive,
|
|
329
|
+
mobile: o.layout.responsive.mobile ? { ...x.layout.responsive.mobile, ...o.layout.responsive.mobile } : x.layout.responsive.mobile,
|
|
330
|
+
tablet: o.layout.responsive.tablet ? { ...x.layout.responsive.tablet, ...o.layout.responsive.tablet } : x.layout.responsive.tablet
|
|
331
|
+
}), o.layout.spacing && (a.layout.spacing = {
|
|
332
|
+
...x.layout.spacing,
|
|
334
333
|
...o.layout.spacing
|
|
335
|
-
})), o.animation && (
|
|
336
|
-
...
|
|
334
|
+
})), o.animation && (a.animation = {
|
|
335
|
+
...x.animation,
|
|
337
336
|
...o.animation
|
|
338
|
-
}, o.animation.easing && (
|
|
339
|
-
...
|
|
337
|
+
}, o.animation.easing && (a.animation.easing = {
|
|
338
|
+
...x.animation.easing,
|
|
340
339
|
...o.animation.easing
|
|
341
|
-
}), o.animation.queue && (
|
|
342
|
-
...
|
|
340
|
+
}), o.animation.queue && (a.animation.queue = {
|
|
341
|
+
...x.animation.queue,
|
|
343
342
|
...o.animation.queue
|
|
344
|
-
}), o.animation.performance && (
|
|
345
|
-
...
|
|
343
|
+
}), o.animation.performance && (a.animation.performance = {
|
|
344
|
+
...x.animation.performance,
|
|
346
345
|
...o.animation.performance
|
|
347
|
-
}), o.animation.entry && (
|
|
348
|
-
...
|
|
346
|
+
}), o.animation.entry && (a.animation.entry = {
|
|
347
|
+
...x.animation.entry,
|
|
349
348
|
...o.animation.entry,
|
|
350
349
|
start: o.animation.entry.start ? {
|
|
351
|
-
...
|
|
350
|
+
...x.animation.entry.start,
|
|
352
351
|
...o.animation.entry.start,
|
|
353
|
-
circular: o.animation.entry.start.circular ? { ...
|
|
354
|
-
} :
|
|
355
|
-
timing: o.animation.entry.timing ? { ...
|
|
356
|
-
path: o.animation.entry.path ? { ...Tt, ...o.animation.entry.path } :
|
|
357
|
-
rotation: o.animation.entry.rotation ? { ...At, ...o.animation.entry.rotation } :
|
|
358
|
-
scale: o.animation.entry.scale ? { ...Rt, ...o.animation.entry.scale } :
|
|
359
|
-
})), o.interaction && (
|
|
360
|
-
...
|
|
352
|
+
circular: o.animation.entry.start.circular ? { ...x.animation.entry.start.circular, ...o.animation.entry.start.circular } : x.animation.entry.start.circular
|
|
353
|
+
} : x.animation.entry.start,
|
|
354
|
+
timing: o.animation.entry.timing ? { ...x.animation.entry.timing, ...o.animation.entry.timing } : x.animation.entry.timing,
|
|
355
|
+
path: o.animation.entry.path ? { ...Tt, ...o.animation.entry.path } : x.animation.entry.path,
|
|
356
|
+
rotation: o.animation.entry.rotation ? { ...At, ...o.animation.entry.rotation } : x.animation.entry.rotation,
|
|
357
|
+
scale: o.animation.entry.scale ? { ...Rt, ...o.animation.entry.scale } : x.animation.entry.scale
|
|
358
|
+
})), o.interaction && (a.interaction = {
|
|
359
|
+
...x.interaction,
|
|
361
360
|
...o.interaction
|
|
362
|
-
}, o.interaction.focus && (
|
|
363
|
-
...
|
|
361
|
+
}, o.interaction.focus && (a.interaction.focus = {
|
|
362
|
+
...x.interaction.focus,
|
|
364
363
|
...o.interaction.focus
|
|
365
|
-
}), o.interaction.navigation && (
|
|
366
|
-
...
|
|
364
|
+
}), o.interaction.navigation && (a.interaction.navigation = {
|
|
365
|
+
...x.interaction.navigation,
|
|
367
366
|
...o.interaction.navigation
|
|
368
|
-
}), o.interaction.gestures && (
|
|
369
|
-
...
|
|
367
|
+
}), o.interaction.gestures && (a.interaction.gestures = {
|
|
368
|
+
...x.interaction.gestures,
|
|
370
369
|
...o.interaction.gestures
|
|
371
|
-
})), o.rendering && (
|
|
372
|
-
...
|
|
370
|
+
})), o.rendering && (a.rendering = {
|
|
371
|
+
...x.rendering,
|
|
373
372
|
...o.rendering
|
|
374
|
-
}, o.rendering.responsive && (
|
|
375
|
-
...
|
|
373
|
+
}, o.rendering.responsive && (a.rendering.responsive = {
|
|
374
|
+
...x.rendering.responsive,
|
|
376
375
|
...o.rendering.responsive,
|
|
377
|
-
breakpoints: o.rendering.responsive.breakpoints ? { ...
|
|
378
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection :
|
|
379
|
-
}), o.rendering.ui && (
|
|
380
|
-
...
|
|
376
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...x.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : x.rendering.responsive.breakpoints,
|
|
377
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : x.rendering.responsive.mobileDetection
|
|
378
|
+
}), o.rendering.ui && (a.rendering.ui = {
|
|
379
|
+
...x.rendering.ui,
|
|
381
380
|
...o.rendering.ui
|
|
382
|
-
}), o.rendering.performance && (
|
|
383
|
-
...
|
|
381
|
+
}), o.rendering.performance && (a.rendering.performance = {
|
|
382
|
+
...x.rendering.performance,
|
|
384
383
|
...o.rendering.performance
|
|
385
|
-
})),
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
384
|
+
})), a.config.debug = {
|
|
385
|
+
...Pt,
|
|
386
|
+
...((l = o.config) == null ? void 0 : l.debug) ?? {}
|
|
387
|
+
}, a;
|
|
389
388
|
}
|
|
390
389
|
function Kt(o, t) {
|
|
391
|
-
return { ...o ?
|
|
390
|
+
return { ...o ? Mt[o] : Mt.playful, ...t };
|
|
392
391
|
}
|
|
393
392
|
function Zt(o, t) {
|
|
394
393
|
return { ...o ? Ft[o] : Ft.gentle, ...t };
|
|
395
394
|
}
|
|
396
|
-
|
|
395
|
+
function Qt(o, t) {
|
|
396
|
+
return { ...o ? Lt[o] : Lt.gentle, ...t };
|
|
397
|
+
}
|
|
398
|
+
class te {
|
|
397
399
|
constructor(t) {
|
|
398
400
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
399
401
|
}
|
|
@@ -418,35 +420,35 @@ class Qt {
|
|
|
418
420
|
* @param easing - CSS easing function (optional)
|
|
419
421
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
420
422
|
*/
|
|
421
|
-
animateTransformCancellable(t, e, i, n = null,
|
|
423
|
+
animateTransformCancellable(t, e, i, n = null, s = null) {
|
|
422
424
|
this.cancelAllAnimations(t);
|
|
423
|
-
const r = n ?? this.config.duration,
|
|
425
|
+
const r = n ?? this.config.duration, a = s ?? this.config.easing.default, c = this.buildTransformString(e), u = this.buildTransformString(i);
|
|
424
426
|
t.style.transition = "none";
|
|
425
|
-
const
|
|
427
|
+
const l = t.animate(
|
|
426
428
|
[
|
|
427
|
-
{ transform:
|
|
428
|
-
{ transform:
|
|
429
|
+
{ transform: c },
|
|
430
|
+
{ transform: u }
|
|
429
431
|
],
|
|
430
432
|
{
|
|
431
433
|
duration: r,
|
|
432
|
-
easing:
|
|
434
|
+
easing: a,
|
|
433
435
|
fill: "forwards"
|
|
434
436
|
// Keep final state after animation
|
|
435
437
|
}
|
|
436
|
-
),
|
|
438
|
+
), d = {
|
|
437
439
|
id: `anim-${++this.animationIdCounter}`,
|
|
438
440
|
element: t,
|
|
439
|
-
animation:
|
|
441
|
+
animation: l,
|
|
440
442
|
fromState: e,
|
|
441
443
|
toState: i,
|
|
442
444
|
startTime: performance.now(),
|
|
443
445
|
duration: r
|
|
444
446
|
};
|
|
445
|
-
return this.activeAnimations.set(t,
|
|
446
|
-
t.style.transform =
|
|
447
|
+
return this.activeAnimations.set(t, d), l.finished.then(() => {
|
|
448
|
+
t.style.transform = u, this.activeAnimations.delete(t);
|
|
447
449
|
}).catch(() => {
|
|
448
450
|
this.activeAnimations.delete(t);
|
|
449
|
-
}),
|
|
451
|
+
}), d;
|
|
450
452
|
}
|
|
451
453
|
/**
|
|
452
454
|
* Cancel an active animation
|
|
@@ -489,8 +491,8 @@ class Qt {
|
|
|
489
491
|
const i = getComputedStyle(t).transform;
|
|
490
492
|
if (i === "none" || !i)
|
|
491
493
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
492
|
-
const n = new DOMMatrix(i),
|
|
493
|
-
return { x:
|
|
494
|
+
const n = new DOMMatrix(i), s = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), a = n.e, c = n.f;
|
|
495
|
+
return { x: a, y: c, rotation: r, scale: s };
|
|
494
496
|
}
|
|
495
497
|
/**
|
|
496
498
|
* Check if an element has an active animation
|
|
@@ -517,10 +519,10 @@ class Qt {
|
|
|
517
519
|
* @returns Promise that resolves when animation completes
|
|
518
520
|
*/
|
|
519
521
|
animateTransform(t, e, i = null, n = null) {
|
|
520
|
-
return new Promise((
|
|
521
|
-
const r = i ?? this.config.duration,
|
|
522
|
-
t.style.transition = `transform ${r}ms ${
|
|
523
|
-
|
|
522
|
+
return new Promise((s) => {
|
|
523
|
+
const r = i ?? this.config.duration, a = n ?? this.config.easing.default;
|
|
524
|
+
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
|
|
525
|
+
s();
|
|
524
526
|
}, r);
|
|
525
527
|
});
|
|
526
528
|
}
|
|
@@ -552,158 +554,158 @@ class Qt {
|
|
|
552
554
|
function st(o, t, e) {
|
|
553
555
|
return o + (t - o) * e;
|
|
554
556
|
}
|
|
555
|
-
function
|
|
556
|
-
const { overshoot: n, bounces:
|
|
557
|
-
let
|
|
558
|
-
for (let
|
|
559
|
-
if (o <=
|
|
560
|
-
|
|
557
|
+
function ee(o, t, e, i) {
|
|
558
|
+
const { overshoot: n, bounces: s, decayRatio: r } = i, a = e.x - t.x, c = e.y - t.y, u = ie(s, r);
|
|
559
|
+
let l = 0, d = 0, h = 1, g = n, p = !1;
|
|
560
|
+
for (let f = 0; f < u.length; f++)
|
|
561
|
+
if (o <= u[f].time) {
|
|
562
|
+
d = f === 0 ? 0 : u[f - 1].time, h = u[f].time, g = u[f].overshoot, p = u[f].isOvershoot;
|
|
561
563
|
break;
|
|
562
564
|
}
|
|
563
|
-
const
|
|
564
|
-
if (
|
|
565
|
-
|
|
566
|
-
else if (
|
|
567
|
-
|
|
565
|
+
const b = (o - d) / (h - d);
|
|
566
|
+
if (p)
|
|
567
|
+
l = 1 + g * gt(b);
|
|
568
|
+
else if (d === 0)
|
|
569
|
+
l = gt(b);
|
|
568
570
|
else {
|
|
569
|
-
const
|
|
570
|
-
(y, v) => y.time >
|
|
571
|
-
),
|
|
572
|
-
|
|
571
|
+
const f = u.find(
|
|
572
|
+
(y, v) => y.time > d && v > 0 && u[v - 1].isOvershoot
|
|
573
|
+
), m = 1 + ((f == null ? void 0 : f.overshoot) || g);
|
|
574
|
+
l = st(m, 1, gt(b));
|
|
573
575
|
}
|
|
574
576
|
return {
|
|
575
|
-
x: t.x +
|
|
576
|
-
y: t.y +
|
|
577
|
+
x: t.x + a * l,
|
|
578
|
+
y: t.y + c * l
|
|
577
579
|
};
|
|
578
580
|
}
|
|
579
|
-
function
|
|
581
|
+
function ie(o, t) {
|
|
580
582
|
const e = [];
|
|
581
583
|
let i = 0.6;
|
|
582
584
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
583
585
|
let n = 0.15;
|
|
584
586
|
const r = 0.4 / (o * 2);
|
|
585
|
-
for (let
|
|
587
|
+
for (let a = 0; a < o; a++)
|
|
586
588
|
i += r, e.push({ time: i, overshoot: n, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
587
589
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
588
590
|
}
|
|
589
|
-
function
|
|
590
|
-
const { stiffness: n, damping:
|
|
591
|
-
let
|
|
592
|
-
if (
|
|
593
|
-
const
|
|
594
|
-
|
|
591
|
+
function ne(o, t, e, i) {
|
|
592
|
+
const { stiffness: n, damping: s, mass: r, oscillations: a } = i, c = e.x - t.x, u = e.y - t.y, l = Math.sqrt(n / r), d = s / (2 * Math.sqrt(n * r));
|
|
593
|
+
let h;
|
|
594
|
+
if (d < 1) {
|
|
595
|
+
const g = l * Math.sqrt(1 - d * d), p = Math.exp(-d * l * o * 3), b = Math.cos(g * o * a * Math.PI);
|
|
596
|
+
h = 1 - p * b;
|
|
595
597
|
} else
|
|
596
|
-
|
|
597
|
-
return
|
|
598
|
-
x: t.x +
|
|
599
|
-
y: t.y +
|
|
598
|
+
h = 1 - Math.exp(-l * o * 3);
|
|
599
|
+
return h = Math.max(0, Math.min(h, 1.3)), {
|
|
600
|
+
x: t.x + c * h,
|
|
601
|
+
y: t.y + u * h
|
|
600
602
|
};
|
|
601
603
|
}
|
|
602
|
-
function
|
|
603
|
-
const { amplitude: n, frequency:
|
|
604
|
+
function oe(o, t, e, i) {
|
|
605
|
+
const { amplitude: n, frequency: s, decay: r, decayRate: a, phase: c } = i, u = e.x - t.x, l = e.y - t.y, d = Math.sqrt(u * u + l * l), h = d > 0 ? -l / d : 0, g = d > 0 ? u / d : 1, p = s * Math.PI * 2 * o + c, b = r ? Math.pow(1 - o, a) : 1, f = n * Math.sin(p) * b, m = se(o);
|
|
604
606
|
return {
|
|
605
|
-
x: st(t.x, e.x,
|
|
606
|
-
y: st(t.y, e.y,
|
|
607
|
+
x: st(t.x, e.x, m) + f * h,
|
|
608
|
+
y: st(t.y, e.y, m) + f * g
|
|
607
609
|
};
|
|
608
610
|
}
|
|
609
611
|
function gt(o) {
|
|
610
612
|
return 1 - (1 - o) * (1 - o);
|
|
611
613
|
}
|
|
612
|
-
function
|
|
614
|
+
function se(o) {
|
|
613
615
|
return 1 - Math.pow(1 - o, 3);
|
|
614
616
|
}
|
|
615
|
-
function se(o, t, e) {
|
|
616
|
-
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;
|
|
617
|
-
return t + h;
|
|
618
|
-
}
|
|
619
617
|
function ae(o, t, e) {
|
|
620
|
-
const {
|
|
621
|
-
|
|
618
|
+
const { amplitude: i, frequency: n, decay: s } = e, r = Math.sin(o * n * Math.PI * 2), a = s ? Math.pow(1 - o, 2) : 1, c = i * r * a;
|
|
619
|
+
return t + c;
|
|
620
|
+
}
|
|
621
|
+
function re(o, t, e) {
|
|
622
|
+
const { overshoot: i, bounces: n } = e, s = [];
|
|
623
|
+
s.push({ time: 0.5, scale: i });
|
|
622
624
|
let r = i;
|
|
623
|
-
const
|
|
624
|
-
let
|
|
625
|
-
for (let
|
|
626
|
-
const
|
|
627
|
-
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
let
|
|
631
|
-
for (let
|
|
632
|
-
if (o <=
|
|
633
|
-
const
|
|
634
|
-
|
|
625
|
+
const a = 0.5, u = 0.5 / (n * 2);
|
|
626
|
+
let l = 0.5;
|
|
627
|
+
for (let h = 0; h < n; h++) {
|
|
628
|
+
const g = 1 - (r - 1) * a;
|
|
629
|
+
l += u, s.push({ time: l, scale: g }), r = 1 + (r - 1) * a * a, l += u, h < n - 1 && s.push({ time: l, scale: r });
|
|
630
|
+
}
|
|
631
|
+
s.push({ time: 1, scale: 1 });
|
|
632
|
+
let d = 1;
|
|
633
|
+
for (let h = 0; h < s.length; h++)
|
|
634
|
+
if (o <= s[h].time) {
|
|
635
|
+
const g = h === 0 ? 0 : s[h - 1].time, p = h === 0 ? 1 : s[h - 1].scale, b = (o - g) / (s[h].time - g), f = gt(b);
|
|
636
|
+
d = p + (s[h].scale - p) * f;
|
|
635
637
|
break;
|
|
636
638
|
}
|
|
637
|
-
return
|
|
639
|
+
return d * t;
|
|
638
640
|
}
|
|
639
|
-
function
|
|
641
|
+
function ce(o) {
|
|
640
642
|
const {
|
|
641
643
|
element: t,
|
|
642
644
|
startPosition: e,
|
|
643
645
|
endPosition: i,
|
|
644
646
|
pathConfig: n,
|
|
645
|
-
duration:
|
|
647
|
+
duration: s,
|
|
646
648
|
imageWidth: r,
|
|
647
|
-
imageHeight:
|
|
648
|
-
rotation:
|
|
649
|
-
scale:
|
|
650
|
-
onComplete:
|
|
651
|
-
rotationConfig:
|
|
652
|
-
startRotation:
|
|
653
|
-
scaleConfig:
|
|
654
|
-
startScale:
|
|
655
|
-
} = o,
|
|
656
|
-
if ((
|
|
657
|
-
|
|
649
|
+
imageHeight: a,
|
|
650
|
+
rotation: c,
|
|
651
|
+
scale: u,
|
|
652
|
+
onComplete: l,
|
|
653
|
+
rotationConfig: d,
|
|
654
|
+
startRotation: h,
|
|
655
|
+
scaleConfig: g,
|
|
656
|
+
startScale: p
|
|
657
|
+
} = o, b = n.type, f = h !== void 0 && h !== c, m = (d == null ? void 0 : d.mode) === "wobble", y = (d == null ? void 0 : d.wobble) || { amplitude: 15, frequency: 3, decay: !0 }, v = f || m, E = p !== void 0 && p !== u, A = (g == null ? void 0 : g.mode) === "pop", S = (g == null ? void 0 : g.pop) || { overshoot: 1.2, bounces: 1 };
|
|
658
|
+
if ((b === "linear" || b === "arc") && !v && !(E || A)) {
|
|
659
|
+
l && l();
|
|
658
660
|
return;
|
|
659
661
|
}
|
|
660
|
-
const
|
|
661
|
-
function
|
|
662
|
-
const
|
|
663
|
-
let
|
|
664
|
-
switch (
|
|
662
|
+
const _ = performance.now(), H = -r / 2, $ = -a / 2;
|
|
663
|
+
function D(G) {
|
|
664
|
+
const M = G - _, w = Math.min(M / s, 1);
|
|
665
|
+
let T;
|
|
666
|
+
switch (b) {
|
|
665
667
|
case "bounce": {
|
|
666
|
-
const
|
|
668
|
+
const U = Kt(
|
|
667
669
|
n.bouncePreset,
|
|
668
670
|
n.bounce
|
|
669
671
|
);
|
|
670
|
-
|
|
672
|
+
T = ee(w, e, i, U);
|
|
671
673
|
break;
|
|
672
674
|
}
|
|
673
675
|
case "elastic": {
|
|
674
|
-
const
|
|
676
|
+
const U = Zt(
|
|
675
677
|
n.elasticPreset,
|
|
676
678
|
n.elastic
|
|
677
679
|
);
|
|
678
|
-
|
|
680
|
+
T = ne(w, e, i, U);
|
|
679
681
|
break;
|
|
680
682
|
}
|
|
681
683
|
case "wave": {
|
|
682
|
-
const
|
|
684
|
+
const U = Qt(
|
|
683
685
|
n.wavePreset,
|
|
684
686
|
n.wave
|
|
685
687
|
);
|
|
686
|
-
|
|
688
|
+
T = oe(w, e, i, U);
|
|
687
689
|
break;
|
|
688
690
|
}
|
|
689
691
|
default:
|
|
690
|
-
|
|
691
|
-
x: st(e.x, i.x,
|
|
692
|
-
y: st(e.y, i.y,
|
|
692
|
+
T = {
|
|
693
|
+
x: st(e.x, i.x, w),
|
|
694
|
+
y: st(e.y, i.y, w)
|
|
693
695
|
};
|
|
694
696
|
}
|
|
695
|
-
const
|
|
696
|
-
let T;
|
|
697
|
-
f ? T = se(x, h, y) : g ? T = st(d, h, x) : T = h;
|
|
697
|
+
const F = T.x - i.x, R = T.y - i.y;
|
|
698
698
|
let C;
|
|
699
|
-
|
|
699
|
+
m ? C = ae(w, c, y) : f ? C = st(h, c, w) : C = c;
|
|
700
|
+
let L;
|
|
701
|
+
A ? L = re(w, u, S) : E ? L = st(p, u, w) : L = u, t.style.transform = `translate(${H}px, ${$}px) translate(${F}px, ${R}px) rotate(${C}deg) scale(${L})`, w < 1 ? requestAnimationFrame(D) : (t.style.transform = `translate(${H}px, ${$}px) rotate(${c}deg) scale(${u})`, l && l());
|
|
700
702
|
}
|
|
701
|
-
requestAnimationFrame(
|
|
703
|
+
requestAnimationFrame(D);
|
|
702
704
|
}
|
|
703
|
-
function
|
|
705
|
+
function le(o) {
|
|
704
706
|
return o === "bounce" || o === "elastic" || o === "wave";
|
|
705
707
|
}
|
|
706
|
-
const
|
|
708
|
+
const he = {
|
|
707
709
|
radial: "center",
|
|
708
710
|
spiral: "center",
|
|
709
711
|
grid: "top",
|
|
@@ -711,7 +713,7 @@ const le = {
|
|
|
711
713
|
random: "nearest-edge",
|
|
712
714
|
wave: "left"
|
|
713
715
|
};
|
|
714
|
-
class
|
|
716
|
+
class de {
|
|
715
717
|
constructor(t, e) {
|
|
716
718
|
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || Tt, this.rotationConfig = t.rotation || At, this.scaleConfig = t.scale || Rt;
|
|
717
719
|
}
|
|
@@ -719,77 +721,77 @@ class he {
|
|
|
719
721
|
* Get the effective start position, considering layout-aware defaults
|
|
720
722
|
*/
|
|
721
723
|
resolveStartPosition() {
|
|
722
|
-
return this.config.start.position ? this.config.start.position :
|
|
724
|
+
return this.config.start.position ? this.config.start.position : he[this.layoutAlgorithm] || "nearest-edge";
|
|
723
725
|
}
|
|
724
726
|
/**
|
|
725
727
|
* Calculate the starting position for an image's entry animation
|
|
726
728
|
*/
|
|
727
|
-
calculateStartPosition(t, e, i, n,
|
|
728
|
-
const r = this.resolvedStartPosition,
|
|
729
|
+
calculateStartPosition(t, e, i, n, s) {
|
|
730
|
+
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
729
731
|
switch (r) {
|
|
730
732
|
case "nearest-edge":
|
|
731
|
-
return this.calculateNearestEdge(t, e, i,
|
|
733
|
+
return this.calculateNearestEdge(t, e, i, a);
|
|
732
734
|
case "top":
|
|
733
|
-
return this.calculateEdgePosition("top", t, e, i,
|
|
735
|
+
return this.calculateEdgePosition("top", t, e, i, a);
|
|
734
736
|
case "bottom":
|
|
735
|
-
return this.calculateEdgePosition("bottom", t, e, i,
|
|
737
|
+
return this.calculateEdgePosition("bottom", t, e, i, a);
|
|
736
738
|
case "left":
|
|
737
|
-
return this.calculateEdgePosition("left", t, e, i,
|
|
739
|
+
return this.calculateEdgePosition("left", t, e, i, a);
|
|
738
740
|
case "right":
|
|
739
|
-
return this.calculateEdgePosition("right", t, e, i,
|
|
741
|
+
return this.calculateEdgePosition("right", t, e, i, a);
|
|
740
742
|
case "center":
|
|
741
743
|
return this.calculateCenterPosition(i, t, e);
|
|
742
744
|
case "random-edge":
|
|
743
|
-
return this.calculateRandomEdge(t, e, i,
|
|
745
|
+
return this.calculateRandomEdge(t, e, i, a);
|
|
744
746
|
case "circular":
|
|
745
747
|
return this.calculateCircularPosition(
|
|
746
748
|
t,
|
|
747
749
|
e,
|
|
748
750
|
i,
|
|
749
751
|
n,
|
|
750
|
-
|
|
752
|
+
s
|
|
751
753
|
);
|
|
752
754
|
default:
|
|
753
|
-
return this.calculateNearestEdge(t, e, i,
|
|
755
|
+
return this.calculateNearestEdge(t, e, i, a);
|
|
754
756
|
}
|
|
755
757
|
}
|
|
756
758
|
/**
|
|
757
759
|
* Calculate start position from the nearest edge (current default behavior)
|
|
758
760
|
*/
|
|
759
761
|
calculateNearestEdge(t, e, i, n) {
|
|
760
|
-
const
|
|
761
|
-
let
|
|
762
|
-
return
|
|
762
|
+
const s = t.x, r = t.y, a = s, c = i.width - s, u = r, l = i.height - r, d = Math.min(a, c, u, l);
|
|
763
|
+
let h = t.x, g = t.y;
|
|
764
|
+
return d === a ? h = -(e.width + n) : d === c ? h = i.width + n : d === u ? g = -(e.height + n) : g = i.height + n, { x: h, y: g };
|
|
763
765
|
}
|
|
764
766
|
/**
|
|
765
767
|
* Calculate start position from a specific edge
|
|
766
768
|
*/
|
|
767
|
-
calculateEdgePosition(t, e, i, n,
|
|
768
|
-
let r = e.x,
|
|
769
|
+
calculateEdgePosition(t, e, i, n, s) {
|
|
770
|
+
let r = e.x, a = e.y;
|
|
769
771
|
switch (t) {
|
|
770
772
|
case "top":
|
|
771
|
-
|
|
773
|
+
a = -(i.height + s);
|
|
772
774
|
break;
|
|
773
775
|
case "bottom":
|
|
774
|
-
|
|
776
|
+
a = n.height + s;
|
|
775
777
|
break;
|
|
776
778
|
case "left":
|
|
777
|
-
r = -(i.width +
|
|
779
|
+
r = -(i.width + s);
|
|
778
780
|
break;
|
|
779
781
|
case "right":
|
|
780
|
-
r = n.width +
|
|
782
|
+
r = n.width + s;
|
|
781
783
|
break;
|
|
782
784
|
}
|
|
783
|
-
return { x: r, y:
|
|
785
|
+
return { x: r, y: a };
|
|
784
786
|
}
|
|
785
787
|
/**
|
|
786
788
|
* Calculate start position from center with scale animation
|
|
787
789
|
*/
|
|
788
790
|
calculateCenterPosition(t, e, i) {
|
|
789
|
-
const n = t.width / 2,
|
|
791
|
+
const n = t.width / 2, s = t.height / 2;
|
|
790
792
|
return {
|
|
791
793
|
x: n,
|
|
792
|
-
y:
|
|
794
|
+
y: s,
|
|
793
795
|
useScale: !0
|
|
794
796
|
// Signal to use scale animation from 0
|
|
795
797
|
};
|
|
@@ -798,27 +800,27 @@ class he {
|
|
|
798
800
|
* Calculate start position from a random edge
|
|
799
801
|
*/
|
|
800
802
|
calculateRandomEdge(t, e, i, n) {
|
|
801
|
-
const
|
|
803
|
+
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
802
804
|
return this.calculateEdgePosition(r, t, e, i, n);
|
|
803
805
|
}
|
|
804
806
|
/**
|
|
805
807
|
* Calculate start position on a circle around the container
|
|
806
808
|
*/
|
|
807
|
-
calculateCircularPosition(t, e, i, n,
|
|
808
|
-
const r = this.config.start.circular || {},
|
|
809
|
-
let
|
|
810
|
-
const
|
|
811
|
-
if (typeof
|
|
812
|
-
const
|
|
813
|
-
|
|
809
|
+
calculateCircularPosition(t, e, i, n, s) {
|
|
810
|
+
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
811
|
+
let c;
|
|
812
|
+
const u = r.radius || "120%";
|
|
813
|
+
if (typeof u == "string" && u.endsWith("%")) {
|
|
814
|
+
const b = parseFloat(u) / 100;
|
|
815
|
+
c = Math.sqrt(
|
|
814
816
|
i.width ** 2 + i.height ** 2
|
|
815
|
-
) *
|
|
817
|
+
) * b / 2;
|
|
816
818
|
} else
|
|
817
|
-
|
|
818
|
-
let
|
|
819
|
-
|
|
820
|
-
const
|
|
821
|
-
return { x:
|
|
819
|
+
c = typeof u == "number" ? u : 500;
|
|
820
|
+
let l;
|
|
821
|
+
a === "even" ? l = n / s * 2 * Math.PI : l = Math.random() * 2 * Math.PI;
|
|
822
|
+
const d = i.width / 2, h = i.height / 2, g = d + Math.cos(l) * c, p = h + Math.sin(l) * c;
|
|
823
|
+
return { x: g, y: p };
|
|
822
824
|
}
|
|
823
825
|
/**
|
|
824
826
|
* Get animation parameters for an image
|
|
@@ -837,9 +839,9 @@ class he {
|
|
|
837
839
|
* Build a CSS transform string for the start position
|
|
838
840
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
839
841
|
*/
|
|
840
|
-
buildStartTransform(t, e, i, n,
|
|
841
|
-
const
|
|
842
|
-
return t.useScale ? `${
|
|
842
|
+
buildStartTransform(t, e, i, n, s, r, a, c) {
|
|
843
|
+
const u = t.x - e.x, l = t.y - e.y, d = a !== void 0 ? a : i, h = c !== void 0 ? c : n, g = s !== void 0 ? -s / 2 : 0, p = r !== void 0 ? -r / 2 : 0, b = s !== void 0 ? `translate(${g}px, ${p}px)` : "translate(-50%, -50%)";
|
|
844
|
+
return t.useScale ? `${b} translate(${u}px, ${l}px) rotate(${d}deg) scale(0)` : `${b} translate(${u}px, ${l}px) rotate(${d}deg) scale(${h})`;
|
|
843
845
|
}
|
|
844
846
|
/**
|
|
845
847
|
* Build the final CSS transform string
|
|
@@ -847,8 +849,8 @@ class he {
|
|
|
847
849
|
*/
|
|
848
850
|
buildFinalTransform(t, e, i, n) {
|
|
849
851
|
if (i !== void 0 && n !== void 0) {
|
|
850
|
-
const
|
|
851
|
-
return `translate(${
|
|
852
|
+
const s = -i / 2, r = -n / 2;
|
|
853
|
+
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${e})`;
|
|
852
854
|
}
|
|
853
855
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
|
|
854
856
|
}
|
|
@@ -864,7 +866,7 @@ class he {
|
|
|
864
866
|
* Check if the current path type requires JavaScript animation
|
|
865
867
|
*/
|
|
866
868
|
requiresJSAnimation() {
|
|
867
|
-
return
|
|
869
|
+
return le(this.pathConfig.type);
|
|
868
870
|
}
|
|
869
871
|
/**
|
|
870
872
|
* Get the path configuration
|
|
@@ -966,8 +968,8 @@ class he {
|
|
|
966
968
|
amplitude: 15,
|
|
967
969
|
frequency: 3,
|
|
968
970
|
decay: !0
|
|
969
|
-
}, { amplitude: n, frequency:
|
|
970
|
-
return e +
|
|
971
|
+
}, { amplitude: n, frequency: s, decay: r } = i, a = Math.sin(t * s * Math.PI * 2), c = r ? Math.pow(1 - t, 2) : 1, u = n * a * c;
|
|
972
|
+
return e + u;
|
|
971
973
|
}
|
|
972
974
|
/**
|
|
973
975
|
* Get the scale configuration
|
|
@@ -1023,15 +1025,15 @@ class he {
|
|
|
1023
1025
|
const i = this.scaleConfig.pop || {
|
|
1024
1026
|
overshoot: 1.2,
|
|
1025
1027
|
bounces: 1
|
|
1026
|
-
}, { overshoot: n, bounces:
|
|
1027
|
-
let
|
|
1028
|
-
for (let
|
|
1029
|
-
if (t <= r[
|
|
1030
|
-
const
|
|
1031
|
-
|
|
1028
|
+
}, { overshoot: n, bounces: s } = i, r = this.generateScaleBounceKeyframes(s, n);
|
|
1029
|
+
let a = e;
|
|
1030
|
+
for (let c = 0; c < r.length; c++)
|
|
1031
|
+
if (t <= r[c].time) {
|
|
1032
|
+
const u = c === 0 ? 0 : r[c - 1].time, l = c === 0 ? e : r[c - 1].scale, d = (t - u) / (r[c].time - u), h = this.easeOutQuad(d);
|
|
1033
|
+
a = l + (r[c].scale - l) * h;
|
|
1032
1034
|
break;
|
|
1033
1035
|
}
|
|
1034
|
-
return
|
|
1036
|
+
return a * e;
|
|
1035
1037
|
}
|
|
1036
1038
|
/**
|
|
1037
1039
|
* Generate keyframes for scale bounce animation
|
|
@@ -1040,11 +1042,11 @@ class he {
|
|
|
1040
1042
|
const i = [];
|
|
1041
1043
|
i.push({ time: 0.5, scale: e });
|
|
1042
1044
|
let n = e;
|
|
1043
|
-
const
|
|
1044
|
-
let
|
|
1045
|
-
for (let
|
|
1046
|
-
const
|
|
1047
|
-
|
|
1045
|
+
const s = 0.5, a = 0.5 / (t * 2);
|
|
1046
|
+
let c = 0.5;
|
|
1047
|
+
for (let u = 0; u < t; u++) {
|
|
1048
|
+
const l = 1 - (n - 1) * s;
|
|
1049
|
+
c += a, i.push({ time: c, scale: l }), n = 1 + (n - 1) * s * s, c += a, u < t - 1 && i.push({ time: c, scale: n });
|
|
1048
1050
|
}
|
|
1049
1051
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1050
1052
|
}
|
|
@@ -1055,7 +1057,7 @@ class he {
|
|
|
1055
1057
|
return 1 - (1 - t) * (1 - t);
|
|
1056
1058
|
}
|
|
1057
1059
|
}
|
|
1058
|
-
class
|
|
1060
|
+
class ue {
|
|
1059
1061
|
constructor(t, e = {}) {
|
|
1060
1062
|
this.config = t, this.imageConfig = e;
|
|
1061
1063
|
}
|
|
@@ -1067,18 +1069,18 @@ class de {
|
|
|
1067
1069
|
* @returns Array of layout objects with position, rotation, scale
|
|
1068
1070
|
*/
|
|
1069
1071
|
generate(t, e, i = {}) {
|
|
1070
|
-
var
|
|
1071
|
-
const n = [], { width:
|
|
1072
|
-
for (let
|
|
1073
|
-
const
|
|
1074
|
-
id:
|
|
1075
|
-
x:
|
|
1076
|
-
y:
|
|
1077
|
-
rotation:
|
|
1078
|
-
scale:
|
|
1079
|
-
baseSize:
|
|
1072
|
+
var S, z, _, H, $, D, G, M, w;
|
|
1073
|
+
const n = [], { width: s, height: r } = e, a = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = ((S = this.imageConfig.rotation) == null ? void 0 : S.mode) ?? "none", l = ((_ = (z = this.imageConfig.rotation) == null ? void 0 : z.range) == null ? void 0 : _.min) ?? -15, d = (($ = (H = this.imageConfig.rotation) == null ? void 0 : H.range) == null ? void 0 : $.max) ?? 15, h = ((G = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : G.min) ?? 1, g = ((w = (M = this.imageConfig.sizing) == null ? void 0 : M.variance) == null ? void 0 : w.max) ?? 1, p = h !== 1 || g !== 1, f = c * 1.5 / 2, m = c / 2, y = s - a - f, v = r - a - m, E = a + f, A = a + m;
|
|
1074
|
+
for (let T = 0; T < t; T++) {
|
|
1075
|
+
const F = this.random(E, y), R = this.random(A, v), C = u === "random" ? this.random(l, d) : 0, L = p ? this.random(h, g) : 1, U = c * L, Z = {
|
|
1076
|
+
id: T,
|
|
1077
|
+
x: F,
|
|
1078
|
+
y: R,
|
|
1079
|
+
rotation: C,
|
|
1080
|
+
scale: L,
|
|
1081
|
+
baseSize: U
|
|
1080
1082
|
};
|
|
1081
|
-
n.push(
|
|
1083
|
+
n.push(Z);
|
|
1082
1084
|
}
|
|
1083
1085
|
return n;
|
|
1084
1086
|
}
|
|
@@ -1092,7 +1094,7 @@ class de {
|
|
|
1092
1094
|
return Math.random() * (e - t) + t;
|
|
1093
1095
|
}
|
|
1094
1096
|
}
|
|
1095
|
-
class
|
|
1097
|
+
class ge {
|
|
1096
1098
|
constructor(t, e = {}) {
|
|
1097
1099
|
this.config = t, this.imageConfig = e;
|
|
1098
1100
|
}
|
|
@@ -1104,50 +1106,48 @@ class ue {
|
|
|
1104
1106
|
* @returns Array of layout objects with position, rotation, scale
|
|
1105
1107
|
*/
|
|
1106
1108
|
generate(t, e, i = {}) {
|
|
1107
|
-
var
|
|
1108
|
-
const n = [], { width:
|
|
1109
|
+
var A, S, z, _, H, $, D, G, M;
|
|
1110
|
+
const n = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, c = ((A = this.imageConfig.rotation) == null ? void 0 : A.mode) ?? "none", u = ((z = (S = this.imageConfig.rotation) == null ? void 0 : S.range) == null ? void 0 : z.min) ?? -15, l = ((H = (_ = this.imageConfig.rotation) == null ? void 0 : _.range) == null ? void 0 : H.max) ?? 15, d = ((D = ($ = this.imageConfig.sizing) == null ? void 0 : $.variance) == null ? void 0 : D.min) ?? 1, h = ((M = (G = this.imageConfig.sizing) == null ? void 0 : G.variance) == null ? void 0 : M.max) ?? 1, g = d !== 1 || h !== 1, p = this.config.scaleDecay ?? 0, b = i.fixedHeight ?? a, f = s / 2, m = r / 2, y = Math.ceil(Math.sqrt(t));
|
|
1109
1111
|
if (t > 0) {
|
|
1110
|
-
const
|
|
1112
|
+
const w = g ? this.random(d, h) : 1, T = b * w;
|
|
1111
1113
|
n.push({
|
|
1112
1114
|
id: 0,
|
|
1113
|
-
x:
|
|
1114
|
-
y:
|
|
1115
|
-
rotation:
|
|
1115
|
+
x: f,
|
|
1116
|
+
y: m,
|
|
1117
|
+
rotation: c === "random" ? this.random(u * 0.33, l * 0.33) : 0,
|
|
1116
1118
|
// Less rotation for center
|
|
1117
|
-
scale:
|
|
1118
|
-
baseSize:
|
|
1119
|
-
zIndex: 100
|
|
1119
|
+
scale: w,
|
|
1120
|
+
baseSize: T,
|
|
1121
|
+
zIndex: 100
|
|
1120
1122
|
// Center image is highest
|
|
1121
|
-
borderColor: s ? "cyan" : void 0
|
|
1122
1123
|
});
|
|
1123
1124
|
}
|
|
1124
|
-
let
|
|
1125
|
-
for (;
|
|
1126
|
-
const
|
|
1127
|
-
if (
|
|
1128
|
-
|
|
1125
|
+
let v = 1, E = 1;
|
|
1126
|
+
for (; v < t; ) {
|
|
1127
|
+
const w = E / y, T = p > 0 ? 1 - w * p * 0.5 : 1, F = E * (b * 0.8), R = F * 1.5, C = Math.PI * (3 * (R + F) - Math.sqrt((3 * R + F) * (R + 3 * F))), L = this.estimateWidth(b), U = Math.floor(C / (L * 0.7));
|
|
1128
|
+
if (U === 0) {
|
|
1129
|
+
E++;
|
|
1129
1130
|
continue;
|
|
1130
1131
|
}
|
|
1131
|
-
const
|
|
1132
|
-
for (let W = 0; W <
|
|
1133
|
-
const
|
|
1134
|
-
let
|
|
1135
|
-
const
|
|
1136
|
-
|
|
1137
|
-
const
|
|
1132
|
+
const Z = 2 * Math.PI / U, Q = E * (20 * Math.PI / 180);
|
|
1133
|
+
for (let W = 0; W < U && v < t; W++) {
|
|
1134
|
+
const tt = W * Z + Q, Y = g ? this.random(d, h) : 1, et = T * Y, X = b * et;
|
|
1135
|
+
let N = f + Math.cos(tt) * R, B = m + Math.sin(tt) * F;
|
|
1136
|
+
const j = this.config.spacing.padding ?? 50, k = X * 1.5 / 2, O = X / 2;
|
|
1137
|
+
N - k < j ? N = j + k : N + k > s - j && (N = s - j - k), B - O < j ? B = j + O : B + O > r - j && (B = r - j - O);
|
|
1138
|
+
const J = c === "random" ? this.random(u, l) : 0;
|
|
1138
1139
|
n.push({
|
|
1139
|
-
id:
|
|
1140
|
-
x:
|
|
1141
|
-
y:
|
|
1142
|
-
rotation:
|
|
1143
|
-
scale:
|
|
1144
|
-
baseSize:
|
|
1145
|
-
zIndex: Math.max(1, 100 -
|
|
1140
|
+
id: v,
|
|
1141
|
+
x: N,
|
|
1142
|
+
y: B,
|
|
1143
|
+
rotation: J,
|
|
1144
|
+
scale: et,
|
|
1145
|
+
baseSize: X,
|
|
1146
|
+
zIndex: Math.max(1, 100 - E)
|
|
1146
1147
|
// Outer rings have lower z-index
|
|
1147
|
-
|
|
1148
|
-
}), A++;
|
|
1148
|
+
}), v++;
|
|
1149
1149
|
}
|
|
1150
|
-
|
|
1150
|
+
E++;
|
|
1151
1151
|
}
|
|
1152
1152
|
return n;
|
|
1153
1153
|
}
|
|
@@ -1170,7 +1170,7 @@ class ue {
|
|
|
1170
1170
|
return Math.random() * (e - t) + t;
|
|
1171
1171
|
}
|
|
1172
1172
|
}
|
|
1173
|
-
const
|
|
1173
|
+
const fe = {
|
|
1174
1174
|
columns: "auto",
|
|
1175
1175
|
rows: "auto",
|
|
1176
1176
|
stagger: "none",
|
|
@@ -1198,7 +1198,7 @@ const ge = {
|
|
|
1198
1198
|
{ x: 0, y: 1 }
|
|
1199
1199
|
// down
|
|
1200
1200
|
];
|
|
1201
|
-
class
|
|
1201
|
+
class me {
|
|
1202
1202
|
constructor(t, e = {}) {
|
|
1203
1203
|
this.config = t, this.imageConfig = e;
|
|
1204
1204
|
}
|
|
@@ -1210,60 +1210,60 @@ class fe {
|
|
|
1210
1210
|
* @returns Array of layout objects with position, rotation, scale
|
|
1211
1211
|
*/
|
|
1212
1212
|
generate(t, e, i = {}) {
|
|
1213
|
-
var
|
|
1214
|
-
const n = [], { width:
|
|
1213
|
+
var Q, W, tt, Y, et, X, N, B, j;
|
|
1214
|
+
const n = [], { width: s, height: r } = e, a = { ...fe, ...this.config.grid }, c = this.config.spacing.padding, u = i.fixedHeight ?? 200, l = ((Q = this.imageConfig.rotation) == null ? void 0 : Q.mode) ?? "none", d = ((tt = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : tt.min) ?? 1, h = ((et = (Y = this.imageConfig.sizing) == null ? void 0 : Y.variance) == null ? void 0 : et.max) ?? 1, g = d !== 1 || h !== 1, p = s - 2 * c, b = r - 2 * c, { columns: f, rows: m } = this.calculateGridDimensions(
|
|
1215
1215
|
t,
|
|
1216
|
-
b,
|
|
1217
1216
|
p,
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1217
|
+
b,
|
|
1218
|
+
u,
|
|
1219
|
+
a
|
|
1220
|
+
), y = a.stagger === "row", v = a.stagger === "column", E = y ? f + 0.5 : f, A = v ? m + 0.5 : m, S = (p - a.gap * (f - 1)) / E, z = (b - a.gap * (m - 1)) / A, _ = y ? S / 2 : 0, H = v ? z / 2 : 0, $ = 1 + a.overlap, D = Math.min(S, z) * $, G = i.fixedHeight ? Math.min(i.fixedHeight, D) : D, M = f * S + (f - 1) * a.gap + _, w = m * z + (m - 1) * a.gap + H, T = c + (p - M) / 2, F = c + (b - w) / 2, R = f * m, C = a.columns !== "auto" && a.rows !== "auto", L = C && t > R;
|
|
1221
1221
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1222
|
-
gridConfigColumns:
|
|
1223
|
-
gridConfigRows:
|
|
1224
|
-
columns:
|
|
1225
|
-
rows:
|
|
1226
|
-
cellCount:
|
|
1227
|
-
hasFixedGrid:
|
|
1222
|
+
gridConfigColumns: a.columns,
|
|
1223
|
+
gridConfigRows: a.rows,
|
|
1224
|
+
columns: f,
|
|
1225
|
+
rows: m,
|
|
1226
|
+
cellCount: R,
|
|
1227
|
+
hasFixedGrid: C,
|
|
1228
1228
|
imageCount: t,
|
|
1229
|
-
isOverflowMode:
|
|
1229
|
+
isOverflowMode: L
|
|
1230
1230
|
});
|
|
1231
|
-
const
|
|
1232
|
-
for (let
|
|
1233
|
-
let
|
|
1234
|
-
if (
|
|
1235
|
-
const
|
|
1236
|
-
|
|
1231
|
+
const U = L ? new Array(R).fill(0) : [], Z = Math.min(S, z) * a.overflowOffset;
|
|
1232
|
+
for (let P = 0; P < t; P++) {
|
|
1233
|
+
let k, O, J = 0;
|
|
1234
|
+
if (L && P >= R) {
|
|
1235
|
+
const K = P - R, q = K % R;
|
|
1236
|
+
J = Math.floor(K / R) + 1, U[q]++, a.fillDirection === "row" ? (k = q % f, O = Math.floor(q / f)) : (O = q % m, k = Math.floor(q / m));
|
|
1237
1237
|
} else
|
|
1238
|
-
|
|
1239
|
-
let
|
|
1240
|
-
if (
|
|
1241
|
-
const
|
|
1242
|
-
|
|
1238
|
+
a.fillDirection === "row" ? (k = P % f, O = Math.floor(P / f)) : (O = P % m, k = Math.floor(P / m));
|
|
1239
|
+
let V = T + k * (S + a.gap) + S / 2, it = F + O * (z + a.gap) + z / 2;
|
|
1240
|
+
if (a.stagger === "row" && O % 2 === 1 ? V += S / 2 : a.stagger === "column" && k % 2 === 1 && (it += z / 2), J > 0) {
|
|
1241
|
+
const K = (J - 1) % zt.length, q = zt[K];
|
|
1242
|
+
V += q.x * Z, it += q.y * Z;
|
|
1243
1243
|
}
|
|
1244
|
-
if (
|
|
1245
|
-
const
|
|
1246
|
-
|
|
1244
|
+
if (a.jitter > 0) {
|
|
1245
|
+
const K = S / 2 * a.jitter, q = z / 2 * a.jitter;
|
|
1246
|
+
V += this.random(-K, K), it += this.random(-q, q);
|
|
1247
1247
|
}
|
|
1248
|
-
let nt =
|
|
1249
|
-
if (!
|
|
1250
|
-
const
|
|
1251
|
-
if (
|
|
1252
|
-
const Ct =
|
|
1248
|
+
let nt = V, ot = it;
|
|
1249
|
+
if (!L && a.fillDirection === "row") {
|
|
1250
|
+
const K = t % f || f;
|
|
1251
|
+
if (O === Math.floor((t - 1) / f) && K < f) {
|
|
1252
|
+
const Ct = K * S + (K - 1) * a.gap;
|
|
1253
1253
|
let Et = 0;
|
|
1254
|
-
|
|
1254
|
+
a.alignment === "center" ? Et = (M - Ct) / 2 : a.alignment === "end" && (Et = M - Ct), nt += Et;
|
|
1255
1255
|
}
|
|
1256
1256
|
}
|
|
1257
|
-
const pt =
|
|
1258
|
-
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(
|
|
1257
|
+
const pt = g ? this.random(d, h) : 1, at = G * pt, dt = at * 1.5 / 2, ut = at / 2, yt = c + dt, vt = s - c - dt, Nt = c + ut, jt = r - c - ut;
|
|
1258
|
+
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(Nt, Math.min(ot, jt));
|
|
1259
1259
|
let wt = 0;
|
|
1260
|
-
if (
|
|
1261
|
-
const
|
|
1262
|
-
|
|
1260
|
+
if (l === "random") {
|
|
1261
|
+
const K = ((N = (X = this.imageConfig.rotation) == null ? void 0 : X.range) == null ? void 0 : N.min) ?? -15, q = ((j = (B = this.imageConfig.rotation) == null ? void 0 : B.range) == null ? void 0 : j.max) ?? 15;
|
|
1262
|
+
a.jitter > 0 ? wt = this.random(K * a.jitter, q * a.jitter) : wt = this.random(K, q);
|
|
1263
1263
|
}
|
|
1264
1264
|
let xt;
|
|
1265
|
-
|
|
1266
|
-
id:
|
|
1265
|
+
L && J > 0 ? xt = 50 - J : xt = L ? 100 + P : P + 1, n.push({
|
|
1266
|
+
id: P,
|
|
1267
1267
|
x: nt,
|
|
1268
1268
|
y: ot,
|
|
1269
1269
|
rotation: wt,
|
|
@@ -1277,20 +1277,20 @@ class fe {
|
|
|
1277
1277
|
/**
|
|
1278
1278
|
* Calculate optimal grid dimensions based on image count and container
|
|
1279
1279
|
*/
|
|
1280
|
-
calculateGridDimensions(t, e, i, n,
|
|
1281
|
-
let r,
|
|
1282
|
-
if (
|
|
1283
|
-
r =
|
|
1284
|
-
else if (
|
|
1285
|
-
r =
|
|
1286
|
-
else if (
|
|
1287
|
-
|
|
1280
|
+
calculateGridDimensions(t, e, i, n, s) {
|
|
1281
|
+
let r, a;
|
|
1282
|
+
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1283
|
+
r = s.columns, a = s.rows;
|
|
1284
|
+
else if (s.columns !== "auto")
|
|
1285
|
+
r = s.columns, a = Math.ceil(t / r);
|
|
1286
|
+
else if (s.rows !== "auto")
|
|
1287
|
+
a = s.rows, r = Math.ceil(t / a);
|
|
1288
1288
|
else {
|
|
1289
|
-
const
|
|
1290
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t *
|
|
1289
|
+
const c = e / i;
|
|
1290
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * c / 1.4))), a = Math.ceil(t / r); r > 1 && (r - 1) * a >= t; )
|
|
1291
1291
|
r--;
|
|
1292
1292
|
}
|
|
1293
|
-
return { columns: Math.max(1, r), rows: Math.max(1,
|
|
1293
|
+
return { columns: Math.max(1, r), rows: Math.max(1, a) };
|
|
1294
1294
|
}
|
|
1295
1295
|
/**
|
|
1296
1296
|
* Utility: Generate random number between min and max
|
|
@@ -1299,14 +1299,14 @@ class fe {
|
|
|
1299
1299
|
return Math.random() * (e - t) + t;
|
|
1300
1300
|
}
|
|
1301
1301
|
}
|
|
1302
|
-
const
|
|
1302
|
+
const pe = Math.PI * (3 - Math.sqrt(5)), be = {
|
|
1303
1303
|
spiralType: "golden",
|
|
1304
1304
|
direction: "counterclockwise",
|
|
1305
1305
|
tightness: 1,
|
|
1306
1306
|
scaleDecay: 0,
|
|
1307
1307
|
startAngle: 0
|
|
1308
1308
|
};
|
|
1309
|
-
class
|
|
1309
|
+
class ye {
|
|
1310
1310
|
constructor(t, e = {}) {
|
|
1311
1311
|
this.config = t, this.imageConfig = e;
|
|
1312
1312
|
}
|
|
@@ -1318,37 +1318,37 @@ class be {
|
|
|
1318
1318
|
* @returns Array of layout objects with position, rotation, scale
|
|
1319
1319
|
*/
|
|
1320
1320
|
generate(t, e, i = {}) {
|
|
1321
|
-
var A,
|
|
1322
|
-
const n = [], { width:
|
|
1323
|
-
|
|
1324
|
-
y -
|
|
1325
|
-
),
|
|
1326
|
-
for (let
|
|
1327
|
-
let
|
|
1328
|
-
if (
|
|
1329
|
-
|
|
1330
|
-
else if (
|
|
1331
|
-
const
|
|
1332
|
-
|
|
1321
|
+
var A, S, z, _, H, $, D, G, M;
|
|
1322
|
+
const n = [], { width: s, height: r } = e, a = { ...be, ...this.config.spiral }, c = this.config.spacing.padding, u = i.fixedHeight ?? 200, l = ((A = this.imageConfig.rotation) == null ? void 0 : A.mode) ?? "none", d = ((z = (S = this.imageConfig.rotation) == null ? void 0 : S.range) == null ? void 0 : z.min) ?? -15, h = ((H = (_ = this.imageConfig.rotation) == null ? void 0 : _.range) == null ? void 0 : H.max) ?? 15, g = ((D = ($ = this.imageConfig.sizing) == null ? void 0 : $.variance) == null ? void 0 : D.min) ?? 1, p = ((M = (G = this.imageConfig.sizing) == null ? void 0 : G.variance) == null ? void 0 : M.max) ?? 1, b = g !== 1 || p !== 1, f = this.config.scaleDecay ?? a.scaleDecay, m = s / 2, y = r / 2, v = Math.min(
|
|
1323
|
+
m - c - u / 2,
|
|
1324
|
+
y - c - u / 2
|
|
1325
|
+
), E = a.direction === "clockwise" ? -1 : 1;
|
|
1326
|
+
for (let w = 0; w < t; w++) {
|
|
1327
|
+
let T, F;
|
|
1328
|
+
if (a.spiralType === "golden")
|
|
1329
|
+
T = w * pe * E + a.startAngle, F = this.calculateGoldenRadius(w, t, v, a.tightness);
|
|
1330
|
+
else if (a.spiralType === "archimedean") {
|
|
1331
|
+
const V = w * 0.5 * a.tightness;
|
|
1332
|
+
T = V * E + a.startAngle, F = this.calculateArchimedeanRadius(V, t, v, a.tightness);
|
|
1333
1333
|
} else {
|
|
1334
|
-
const
|
|
1335
|
-
|
|
1334
|
+
const V = w * 0.3 * a.tightness;
|
|
1335
|
+
T = V * E + a.startAngle, F = this.calculateLogarithmicRadius(V, t, v, a.tightness);
|
|
1336
1336
|
}
|
|
1337
|
-
const
|
|
1338
|
-
let
|
|
1339
|
-
if (
|
|
1340
|
-
const
|
|
1341
|
-
|
|
1342
|
-
} else
|
|
1343
|
-
const
|
|
1337
|
+
const R = m + Math.cos(T) * F, C = y + Math.sin(T) * F, L = F / v, U = f > 0 ? 1 - L * f * 0.5 : 1, Z = b ? this.random(g, p) : 1, Q = U * Z, W = u * Q, Y = W * 1.5 / 2, et = W / 2, X = c + Y, N = s - c - Y, B = c + et, j = r - c - et, P = Math.max(X, Math.min(R, N)), k = Math.max(B, Math.min(C, j));
|
|
1338
|
+
let O = 0;
|
|
1339
|
+
if (l === "random") {
|
|
1340
|
+
const V = T * 180 / Math.PI % 360, it = this.random(d, h);
|
|
1341
|
+
O = a.spiralType === "golden" ? it : V * 0.1 + it * 0.9;
|
|
1342
|
+
} else l === "tangent" && (O = this.calculateSpiralTangent(T, F, a));
|
|
1343
|
+
const J = t - w;
|
|
1344
1344
|
n.push({
|
|
1345
|
-
id:
|
|
1346
|
-
x:
|
|
1347
|
-
y:
|
|
1348
|
-
rotation:
|
|
1349
|
-
scale:
|
|
1350
|
-
baseSize:
|
|
1351
|
-
zIndex:
|
|
1345
|
+
id: w,
|
|
1346
|
+
x: P,
|
|
1347
|
+
y: k,
|
|
1348
|
+
rotation: O,
|
|
1349
|
+
scale: Q,
|
|
1350
|
+
baseSize: W,
|
|
1351
|
+
zIndex: J
|
|
1352
1352
|
});
|
|
1353
1353
|
}
|
|
1354
1354
|
return n;
|
|
@@ -1362,11 +1362,11 @@ class be {
|
|
|
1362
1362
|
if (i.spiralType === "golden")
|
|
1363
1363
|
n = t + Math.PI / 2;
|
|
1364
1364
|
else if (i.spiralType === "archimedean") {
|
|
1365
|
-
const r = 1 / i.tightness,
|
|
1366
|
-
n = t +
|
|
1365
|
+
const r = 1 / i.tightness, a = Math.atan(e / r);
|
|
1366
|
+
n = t + a;
|
|
1367
1367
|
} else {
|
|
1368
|
-
const r = 0.15 / i.tightness,
|
|
1369
|
-
n = t +
|
|
1368
|
+
const r = 0.15 / i.tightness, a = Math.atan(1 / r);
|
|
1369
|
+
n = t + a;
|
|
1370
1370
|
}
|
|
1371
1371
|
return n * 180 / Math.PI % 360 - 90;
|
|
1372
1372
|
}
|
|
@@ -1383,16 +1383,16 @@ class be {
|
|
|
1383
1383
|
* r = a + b*θ (constant spacing between arms)
|
|
1384
1384
|
*/
|
|
1385
1385
|
calculateArchimedeanRadius(t, e, i, n) {
|
|
1386
|
-
const
|
|
1387
|
-
return t /
|
|
1386
|
+
const s = e * 0.5 * n;
|
|
1387
|
+
return t / s * i;
|
|
1388
1388
|
}
|
|
1389
1389
|
/**
|
|
1390
1390
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1391
1391
|
* r = a * e^(b*θ)
|
|
1392
1392
|
*/
|
|
1393
1393
|
calculateLogarithmicRadius(t, e, i, n) {
|
|
1394
|
-
const
|
|
1395
|
-
return
|
|
1394
|
+
const s = i * 0.05, r = 0.15 / n, a = s * Math.exp(r * t), c = e * 0.3 * n, u = s * Math.exp(r * c);
|
|
1395
|
+
return a / u * i;
|
|
1396
1396
|
}
|
|
1397
1397
|
/**
|
|
1398
1398
|
* Utility: Generate random number between min and max
|
|
@@ -1401,7 +1401,7 @@ class be {
|
|
|
1401
1401
|
return Math.random() * (e - t) + t;
|
|
1402
1402
|
}
|
|
1403
1403
|
}
|
|
1404
|
-
const
|
|
1404
|
+
const ve = {
|
|
1405
1405
|
clusterCount: "auto",
|
|
1406
1406
|
clusterSpread: 150,
|
|
1407
1407
|
clusterSpacing: 200,
|
|
@@ -1409,7 +1409,7 @@ const ye = {
|
|
|
1409
1409
|
overlap: 0.3,
|
|
1410
1410
|
distribution: "gaussian"
|
|
1411
1411
|
};
|
|
1412
|
-
class
|
|
1412
|
+
class we {
|
|
1413
1413
|
constructor(t, e = {}) {
|
|
1414
1414
|
this.config = t, this.imageConfig = e;
|
|
1415
1415
|
}
|
|
@@ -1421,48 +1421,48 @@ class ve {
|
|
|
1421
1421
|
* @returns Array of layout objects with position, rotation, scale
|
|
1422
1422
|
*/
|
|
1423
1423
|
generate(t, e, i = {}) {
|
|
1424
|
-
var
|
|
1425
|
-
const n = [], { width:
|
|
1424
|
+
var E, A, S, z, _, H, $, D, G;
|
|
1425
|
+
const n = [], { width: s, height: r } = e, a = { ...ve, ...this.config.cluster }, c = this.config.spacing.padding, u = i.fixedHeight ?? 200, l = ((E = this.imageConfig.rotation) == null ? void 0 : E.mode) ?? "none", d = ((S = (A = this.imageConfig.rotation) == null ? void 0 : A.range) == null ? void 0 : S.min) ?? -15, h = ((_ = (z = this.imageConfig.rotation) == null ? void 0 : z.range) == null ? void 0 : _.max) ?? 15, g = (($ = (H = this.imageConfig.sizing) == null ? void 0 : H.variance) == null ? void 0 : $.min) ?? 1, p = ((G = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : G.max) ?? 1, b = g !== 1 || p !== 1, f = this.calculateClusterCount(
|
|
1426
1426
|
t,
|
|
1427
|
-
|
|
1428
|
-
|
|
1427
|
+
a.clusterCount,
|
|
1428
|
+
s,
|
|
1429
1429
|
r,
|
|
1430
|
-
|
|
1431
|
-
),
|
|
1432
|
-
|
|
1433
|
-
|
|
1430
|
+
a.clusterSpacing
|
|
1431
|
+
), m = this.generateClusterCenters(
|
|
1432
|
+
f,
|
|
1433
|
+
s,
|
|
1434
1434
|
r,
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
), y = new Array(
|
|
1438
|
-
for (let
|
|
1439
|
-
y[
|
|
1435
|
+
c,
|
|
1436
|
+
a
|
|
1437
|
+
), y = new Array(f).fill(0);
|
|
1438
|
+
for (let M = 0; M < t; M++)
|
|
1439
|
+
y[M % f]++;
|
|
1440
1440
|
let v = 0;
|
|
1441
|
-
for (let
|
|
1442
|
-
const
|
|
1443
|
-
for (let
|
|
1444
|
-
let
|
|
1445
|
-
if (
|
|
1446
|
-
|
|
1441
|
+
for (let M = 0; M < f; M++) {
|
|
1442
|
+
const w = m[M], T = y[M];
|
|
1443
|
+
for (let F = 0; F < T; F++) {
|
|
1444
|
+
let R, C;
|
|
1445
|
+
if (a.distribution === "gaussian")
|
|
1446
|
+
R = this.gaussianRandom() * w.spread, C = this.gaussianRandom() * w.spread;
|
|
1447
1447
|
else {
|
|
1448
|
-
const
|
|
1449
|
-
|
|
1448
|
+
const O = this.random(0, Math.PI * 2), J = this.random(0, w.spread);
|
|
1449
|
+
R = Math.cos(O) * J, C = Math.sin(O) * J;
|
|
1450
1450
|
}
|
|
1451
|
-
const
|
|
1452
|
-
|
|
1453
|
-
const
|
|
1454
|
-
let
|
|
1455
|
-
const
|
|
1456
|
-
|
|
1457
|
-
const
|
|
1451
|
+
const L = 1 + a.overlap * 0.5, U = 1 + a.overlap * 0.3;
|
|
1452
|
+
R /= L, C /= L;
|
|
1453
|
+
const Z = b ? this.random(g, p) : 1, Q = U * Z, W = u * Q;
|
|
1454
|
+
let tt = w.x + R, Y = w.y + C;
|
|
1455
|
+
const X = W * 1.5 / 2, N = W / 2;
|
|
1456
|
+
tt = Math.max(c + X, Math.min(tt, s - c - X)), Y = Math.max(c + N, Math.min(Y, r - c - N));
|
|
1457
|
+
const B = l === "random" ? this.random(d, h) : 0, P = Math.sqrt(R * R + C * C) / w.spread, k = Math.round((1 - P) * 50) + 1;
|
|
1458
1458
|
n.push({
|
|
1459
1459
|
id: v,
|
|
1460
|
-
x:
|
|
1461
|
-
y:
|
|
1462
|
-
rotation:
|
|
1463
|
-
scale:
|
|
1464
|
-
baseSize:
|
|
1465
|
-
zIndex:
|
|
1460
|
+
x: tt,
|
|
1461
|
+
y: Y,
|
|
1462
|
+
rotation: B,
|
|
1463
|
+
scale: Q,
|
|
1464
|
+
baseSize: W,
|
|
1465
|
+
zIndex: k
|
|
1466
1466
|
}), v++;
|
|
1467
1467
|
}
|
|
1468
1468
|
}
|
|
@@ -1471,36 +1471,36 @@ class ve {
|
|
|
1471
1471
|
/**
|
|
1472
1472
|
* Calculate optimal number of clusters based on image count and container
|
|
1473
1473
|
*/
|
|
1474
|
-
calculateClusterCount(t, e, i, n,
|
|
1474
|
+
calculateClusterCount(t, e, i, n, s) {
|
|
1475
1475
|
if (e !== "auto")
|
|
1476
1476
|
return Math.max(1, Math.min(e, t));
|
|
1477
|
-
const
|
|
1478
|
-
i /
|
|
1477
|
+
const a = Math.max(1, Math.ceil(t / 8)), c = Math.floor(
|
|
1478
|
+
i / s * (n / s) * 0.6
|
|
1479
1479
|
);
|
|
1480
|
-
return Math.max(1, Math.min(
|
|
1480
|
+
return Math.max(1, Math.min(a, c, 10));
|
|
1481
1481
|
}
|
|
1482
1482
|
/**
|
|
1483
1483
|
* Generate cluster center positions with spacing constraints
|
|
1484
1484
|
*/
|
|
1485
|
-
generateClusterCenters(t, e, i, n,
|
|
1486
|
-
const r = [],
|
|
1487
|
-
for (let
|
|
1488
|
-
let
|
|
1489
|
-
for (let
|
|
1490
|
-
const
|
|
1491
|
-
x: this.random(
|
|
1492
|
-
y: this.random(
|
|
1493
|
-
spread: this.calculateClusterSpread(
|
|
1485
|
+
generateClusterCenters(t, e, i, n, s) {
|
|
1486
|
+
const r = [], c = n + s.clusterSpread, u = e - n - s.clusterSpread, l = n + s.clusterSpread, d = i - n - s.clusterSpread;
|
|
1487
|
+
for (let h = 0; h < t; h++) {
|
|
1488
|
+
let g = null, p = -1;
|
|
1489
|
+
for (let b = 0; b < 100; b++) {
|
|
1490
|
+
const f = {
|
|
1491
|
+
x: this.random(c, u),
|
|
1492
|
+
y: this.random(l, d),
|
|
1493
|
+
spread: this.calculateClusterSpread(s)
|
|
1494
1494
|
};
|
|
1495
|
-
let
|
|
1495
|
+
let m = 1 / 0;
|
|
1496
1496
|
for (const y of r) {
|
|
1497
|
-
const v =
|
|
1498
|
-
|
|
1497
|
+
const v = f.x - y.x, E = f.y - y.y, A = Math.sqrt(v * v + E * E);
|
|
1498
|
+
m = Math.min(m, A);
|
|
1499
1499
|
}
|
|
1500
|
-
if ((r.length === 0 ||
|
|
1500
|
+
if ((r.length === 0 || m > p) && (g = f, p = m), m >= s.clusterSpacing)
|
|
1501
1501
|
break;
|
|
1502
1502
|
}
|
|
1503
|
-
|
|
1503
|
+
g && r.push(g);
|
|
1504
1504
|
}
|
|
1505
1505
|
return r;
|
|
1506
1506
|
}
|
|
@@ -1528,7 +1528,7 @@ class ve {
|
|
|
1528
1528
|
return Math.random() * (e - t) + t;
|
|
1529
1529
|
}
|
|
1530
1530
|
}
|
|
1531
|
-
class
|
|
1531
|
+
class xe {
|
|
1532
1532
|
constructor(t, e = {}) {
|
|
1533
1533
|
this.config = t, this.imageConfig = e;
|
|
1534
1534
|
}
|
|
@@ -1540,30 +1540,30 @@ class we {
|
|
|
1540
1540
|
* @returns Array of layout objects with position, rotation, scale
|
|
1541
1541
|
*/
|
|
1542
1542
|
generate(t, e, i = {}) {
|
|
1543
|
-
var
|
|
1544
|
-
const n = [], { width:
|
|
1545
|
-
...
|
|
1543
|
+
var L, U, Z, Q, W, tt, Y, et, X;
|
|
1544
|
+
const n = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, u = ((L = this.imageConfig.rotation) == null ? void 0 : L.mode) ?? "none", l = ((Z = (U = this.imageConfig.rotation) == null ? void 0 : U.range) == null ? void 0 : Z.min) ?? -15, d = ((W = (Q = this.imageConfig.rotation) == null ? void 0 : Q.range) == null ? void 0 : W.max) ?? 15, h = ((Y = (tt = this.imageConfig.sizing) == null ? void 0 : tt.variance) == null ? void 0 : Y.min) ?? 1, g = ((X = (et = this.imageConfig.sizing) == null ? void 0 : et.variance) == null ? void 0 : X.max) ?? 1, p = h !== 1 || g !== 1, b = i.fixedHeight ?? a, f = {
|
|
1545
|
+
...kt,
|
|
1546
1546
|
...this.config.wave
|
|
1547
|
-
}, { rows:
|
|
1548
|
-
let
|
|
1549
|
-
for (let
|
|
1550
|
-
const
|
|
1551
|
-
let
|
|
1552
|
-
A === "offset" ?
|
|
1553
|
-
for (let
|
|
1554
|
-
const
|
|
1547
|
+
}, { rows: m, amplitude: y, frequency: v, phaseShift: E, synchronization: A } = f, S = Math.ceil(t / m), H = b * 1.5 / 2, $ = c + H, D = s - c - H, G = D - $, M = S > 1 ? G / (S - 1) : 0, w = c + y + b / 2, T = r - c - y - b / 2, F = T - w, R = m > 1 ? F / (m - 1) : 0;
|
|
1548
|
+
let C = 0;
|
|
1549
|
+
for (let N = 0; N < m && C < t; N++) {
|
|
1550
|
+
const B = m === 1 ? (w + T) / 2 : w + N * R;
|
|
1551
|
+
let j = 0;
|
|
1552
|
+
A === "offset" ? j = N * E : A === "alternating" && (j = N * Math.PI);
|
|
1553
|
+
for (let P = 0; P < S && C < t; P++) {
|
|
1554
|
+
const k = S === 1 ? ($ + D) / 2 : $ + P * M, O = this.calculateWaveY(k, s, y, v, j), J = k, V = B + O, it = p ? this.random(h, g) : 1, nt = b * it;
|
|
1555
1555
|
let ot = 0;
|
|
1556
|
-
|
|
1557
|
-
const at = nt * 1.5 / 2, bt = nt / 2, dt =
|
|
1556
|
+
u === "tangent" ? ot = this.calculateRotation(k, s, y, v, j) : u === "random" && (ot = this.random(l, d));
|
|
1557
|
+
const at = nt * 1.5 / 2, bt = nt / 2, dt = c + at, ut = s - c - at, yt = c + bt, vt = r - c - bt;
|
|
1558
1558
|
n.push({
|
|
1559
|
-
id:
|
|
1560
|
-
x: Math.max(dt, Math.min(
|
|
1561
|
-
y: Math.max(yt, Math.min(
|
|
1559
|
+
id: C,
|
|
1560
|
+
x: Math.max(dt, Math.min(J, ut)),
|
|
1561
|
+
y: Math.max(yt, Math.min(V, vt)),
|
|
1562
1562
|
rotation: ot,
|
|
1563
1563
|
scale: it,
|
|
1564
1564
|
baseSize: nt,
|
|
1565
|
-
zIndex:
|
|
1566
|
-
}),
|
|
1565
|
+
zIndex: C + 1
|
|
1566
|
+
}), C++;
|
|
1567
1567
|
}
|
|
1568
1568
|
}
|
|
1569
1569
|
return n;
|
|
@@ -1577,9 +1577,9 @@ class we {
|
|
|
1577
1577
|
* @param phase - Phase offset
|
|
1578
1578
|
* @returns Y displacement from baseline
|
|
1579
1579
|
*/
|
|
1580
|
-
calculateWaveY(t, e, i, n,
|
|
1580
|
+
calculateWaveY(t, e, i, n, s) {
|
|
1581
1581
|
const r = t / e;
|
|
1582
|
-
return i * Math.sin(n * r * 2 * Math.PI +
|
|
1582
|
+
return i * Math.sin(n * r * 2 * Math.PI + s);
|
|
1583
1583
|
}
|
|
1584
1584
|
/**
|
|
1585
1585
|
* Calculate rotation based on wave tangent
|
|
@@ -1590,9 +1590,9 @@ class we {
|
|
|
1590
1590
|
* @param phase - Phase offset
|
|
1591
1591
|
* @returns Rotation angle in degrees
|
|
1592
1592
|
*/
|
|
1593
|
-
calculateRotation(t, e, i, n,
|
|
1594
|
-
const r = t / e,
|
|
1595
|
-
return Math.atan(
|
|
1593
|
+
calculateRotation(t, e, i, n, s) {
|
|
1594
|
+
const r = t / e, a = i * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + s) / e;
|
|
1595
|
+
return Math.atan(a) * (180 / Math.PI);
|
|
1596
1596
|
}
|
|
1597
1597
|
/**
|
|
1598
1598
|
* Estimate image width based on height
|
|
@@ -1606,7 +1606,7 @@ class we {
|
|
|
1606
1606
|
return Math.random() * (e - t) + t;
|
|
1607
1607
|
}
|
|
1608
1608
|
}
|
|
1609
|
-
class
|
|
1609
|
+
class Ee {
|
|
1610
1610
|
constructor(t) {
|
|
1611
1611
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.generator = this.initGenerator();
|
|
1612
1612
|
}
|
|
@@ -1617,18 +1617,18 @@ class xe {
|
|
|
1617
1617
|
initGenerator() {
|
|
1618
1618
|
switch (this.config.algorithm) {
|
|
1619
1619
|
case "radial":
|
|
1620
|
-
return new
|
|
1620
|
+
return new ge(this.config, this.imageConfig);
|
|
1621
1621
|
case "grid":
|
|
1622
|
-
return new
|
|
1622
|
+
return new me(this.config, this.imageConfig);
|
|
1623
1623
|
case "spiral":
|
|
1624
|
-
return new
|
|
1624
|
+
return new ye(this.config, this.imageConfig);
|
|
1625
1625
|
case "cluster":
|
|
1626
|
-
return new ve(this.config, this.imageConfig);
|
|
1627
|
-
case "wave":
|
|
1628
1626
|
return new we(this.config, this.imageConfig);
|
|
1627
|
+
case "wave":
|
|
1628
|
+
return new xe(this.config, this.imageConfig);
|
|
1629
1629
|
case "random":
|
|
1630
1630
|
default:
|
|
1631
|
-
return new
|
|
1631
|
+
return new ue(this.config, this.imageConfig);
|
|
1632
1632
|
}
|
|
1633
1633
|
}
|
|
1634
1634
|
/**
|
|
@@ -1640,8 +1640,8 @@ class xe {
|
|
|
1640
1640
|
*/
|
|
1641
1641
|
generateLayout(t, e, i = {}) {
|
|
1642
1642
|
const n = this.generator.generate(t, e, i);
|
|
1643
|
-
return n.forEach((
|
|
1644
|
-
this.layouts.set(
|
|
1643
|
+
return n.forEach((s) => {
|
|
1644
|
+
this.layouts.set(s.id, s);
|
|
1645
1645
|
}), n;
|
|
1646
1646
|
}
|
|
1647
1647
|
/**
|
|
@@ -1695,8 +1695,8 @@ class xe {
|
|
|
1695
1695
|
return;
|
|
1696
1696
|
if (typeof i == "number")
|
|
1697
1697
|
return i;
|
|
1698
|
-
const n = i,
|
|
1699
|
-
return
|
|
1698
|
+
const n = i, s = this.resolveBreakpoint(t);
|
|
1699
|
+
return s === "mobile" ? n.mobile ?? n.tablet ?? n.screen : s === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1700
1700
|
}
|
|
1701
1701
|
/**
|
|
1702
1702
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1707,16 +1707,16 @@ class xe {
|
|
|
1707
1707
|
* @returns Calculated sizing result with height
|
|
1708
1708
|
*/
|
|
1709
1709
|
calculateAdaptiveSize(t, e, i, n) {
|
|
1710
|
-
const
|
|
1710
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1711
1711
|
if (r !== void 0)
|
|
1712
1712
|
return { height: r };
|
|
1713
|
-
const
|
|
1714
|
-
let
|
|
1715
|
-
|
|
1716
|
-
let y = this.clamp(
|
|
1717
|
-
if (y ===
|
|
1718
|
-
const v = Math.max(
|
|
1719
|
-
y = Math.max(v,
|
|
1713
|
+
const a = (s == null ? void 0 : s.minSize) ?? 50, c = (s == null ? void 0 : s.maxSize) ?? 400, u = this.config.targetCoverage ?? 0.6, l = this.config.densityFactor ?? 1, { width: d, height: h } = t, b = d * h * u / e;
|
|
1714
|
+
let m = Math.sqrt(b / 1.4);
|
|
1715
|
+
m *= l, m = Math.min(m, i);
|
|
1716
|
+
let y = this.clamp(m, a, c);
|
|
1717
|
+
if (y === a && m < a) {
|
|
1718
|
+
const v = Math.max(a * 0.05, 20);
|
|
1719
|
+
y = Math.max(v, m);
|
|
1720
1720
|
}
|
|
1721
1721
|
return { height: y };
|
|
1722
1722
|
}
|
|
@@ -1727,14 +1727,14 @@ class xe {
|
|
|
1727
1727
|
return Math.max(e, Math.min(i, t));
|
|
1728
1728
|
}
|
|
1729
1729
|
}
|
|
1730
|
-
var
|
|
1731
|
-
function Ee(o) {
|
|
1732
|
-
return o in St;
|
|
1733
|
-
}
|
|
1730
|
+
var I = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(I || {});
|
|
1734
1731
|
function Se(o) {
|
|
1735
|
-
return o
|
|
1732
|
+
return o in St;
|
|
1736
1733
|
}
|
|
1737
1734
|
function Ie(o) {
|
|
1735
|
+
return o ? Se(o) ? St[o] : o : St.md;
|
|
1736
|
+
}
|
|
1737
|
+
function Te(o) {
|
|
1738
1738
|
if (!o) return "";
|
|
1739
1739
|
const t = [];
|
|
1740
1740
|
if (o.grayscale !== void 0 && t.push(`grayscale(${o.grayscale})`), o.blur !== void 0 && t.push(`blur(${o.blur}px)`), o.brightness !== void 0 && t.push(`brightness(${o.brightness})`), o.contrast !== void 0 && t.push(`contrast(${o.contrast})`), o.saturate !== void 0 && t.push(`saturate(${o.saturate})`), o.opacity !== void 0 && t.push(`opacity(${o.opacity})`), o.sepia !== void 0 && t.push(`sepia(${o.sepia})`), o.hueRotate !== void 0 && t.push(`hue-rotate(${o.hueRotate}deg)`), o.invert !== void 0 && t.push(`invert(${o.invert})`), o.dropShadow !== void 0)
|
|
@@ -1753,39 +1753,39 @@ function ct(o) {
|
|
|
1753
1753
|
return `${t}px ${e} ${i}`;
|
|
1754
1754
|
}
|
|
1755
1755
|
function ft(o) {
|
|
1756
|
-
var
|
|
1756
|
+
var s, r;
|
|
1757
1757
|
if (!o) return {};
|
|
1758
1758
|
const t = {};
|
|
1759
1759
|
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
1760
|
-
const
|
|
1761
|
-
o.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` :
|
|
1760
|
+
const a = ((s = o.border) == null ? void 0 : s.radius) ?? 0;
|
|
1761
|
+
o.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : a && (t.borderTopLeftRadius = `${a}px`), o.borderRadiusTopRight !== void 0 ? t.borderTopRightRadius = `${o.borderRadiusTopRight}px` : a && (t.borderTopRightRadius = `${a}px`), o.borderRadiusBottomRight !== void 0 ? t.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : a && (t.borderBottomRightRadius = `${a}px`), o.borderRadiusBottomLeft !== void 0 ? t.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : a && (t.borderBottomLeftRadius = `${a}px`);
|
|
1762
1762
|
} else ((r = o.border) == null ? void 0 : r.radius) !== void 0 && (t.borderRadius = `${o.border.radius}px`);
|
|
1763
1763
|
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
1764
|
-
const
|
|
1765
|
-
t.borderTop = ct(
|
|
1764
|
+
const a = o.border || {}, c = { ...a, ...o.borderTop }, u = { ...a, ...o.borderRight }, l = { ...a, ...o.borderBottom }, d = { ...a, ...o.borderLeft };
|
|
1765
|
+
t.borderTop = ct(c), t.borderRight = ct(u), t.borderBottom = ct(l), t.borderLeft = ct(d);
|
|
1766
1766
|
} else o.border && (t.border = ct(o.border));
|
|
1767
|
-
o.shadow !== void 0 && (t.boxShadow =
|
|
1768
|
-
const n =
|
|
1767
|
+
o.shadow !== void 0 && (t.boxShadow = Ie(o.shadow));
|
|
1768
|
+
const n = Te(o.filter);
|
|
1769
1769
|
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) {
|
|
1770
|
-
const
|
|
1771
|
-
t.outline = `${
|
|
1770
|
+
const a = o.outline.width ?? 0, c = o.outline.style ?? "solid", u = o.outline.color ?? "#000000";
|
|
1771
|
+
t.outline = `${a}px ${c} ${u}`, o.outline.offset !== void 0 && (t.outlineOffset = `${o.outline.offset}px`);
|
|
1772
1772
|
}
|
|
1773
1773
|
return o.objectFit !== void 0 && (t.objectFit = o.objectFit), o.aspectRatio !== void 0 && (t.aspectRatio = o.aspectRatio), t;
|
|
1774
1774
|
}
|
|
1775
1775
|
function lt(o, t) {
|
|
1776
1776
|
t.borderRadius !== void 0 && (o.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (o.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (o.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (o.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (o.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (o.style.border = t.border), t.borderTop !== void 0 && (o.style.borderTop = t.borderTop), t.borderRight !== void 0 && (o.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (o.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (o.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (o.style.boxShadow = t.boxShadow), t.filter !== void 0 && (o.style.filter = t.filter), t.opacity !== void 0 && (o.style.opacity = t.opacity), t.cursor !== void 0 && (o.style.cursor = t.cursor), t.outline !== void 0 && (o.style.outline = t.outline), t.outlineOffset !== void 0 && (o.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (o.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (o.style.aspectRatio = t.aspectRatio);
|
|
1777
1777
|
}
|
|
1778
|
-
function
|
|
1778
|
+
function _t(o) {
|
|
1779
1779
|
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
1780
1780
|
}
|
|
1781
1781
|
function ht(o, t) {
|
|
1782
|
-
const e =
|
|
1782
|
+
const e = _t(t);
|
|
1783
1783
|
e && e.split(" ").forEach((i) => {
|
|
1784
1784
|
i.trim() && o.classList.add(i.trim());
|
|
1785
1785
|
});
|
|
1786
1786
|
}
|
|
1787
|
-
function
|
|
1788
|
-
const e =
|
|
1787
|
+
function Ht(o, t) {
|
|
1788
|
+
const e = _t(t);
|
|
1789
1789
|
e && e.split(" ").forEach((i) => {
|
|
1790
1790
|
i.trim() && o.classList.remove(i.trim());
|
|
1791
1791
|
});
|
|
@@ -1794,10 +1794,10 @@ const Ot = {
|
|
|
1794
1794
|
UNFOCUSING: 999,
|
|
1795
1795
|
FOCUSING: 1e3
|
|
1796
1796
|
};
|
|
1797
|
-
class
|
|
1797
|
+
class Ae {
|
|
1798
1798
|
constructor(t, e, i) {
|
|
1799
|
-
var n,
|
|
1800
|
-
this.state =
|
|
1799
|
+
var n, s;
|
|
1800
|
+
this.state = I.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 = (s = i == null ? void 0 : i.focused) == null ? void 0 : s.className;
|
|
1801
1801
|
}
|
|
1802
1802
|
/**
|
|
1803
1803
|
* Get current state machine state
|
|
@@ -1809,7 +1809,7 @@ class Te {
|
|
|
1809
1809
|
* Check if any animation is in progress
|
|
1810
1810
|
*/
|
|
1811
1811
|
isAnimating() {
|
|
1812
|
-
return this.state !==
|
|
1812
|
+
return this.state !== I.IDLE && this.state !== I.FOCUSED;
|
|
1813
1813
|
}
|
|
1814
1814
|
/**
|
|
1815
1815
|
* Normalize scalePercent value
|
|
@@ -1822,19 +1822,19 @@ class Te {
|
|
|
1822
1822
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1823
1823
|
*/
|
|
1824
1824
|
calculateFocusDimensions(t, e, i) {
|
|
1825
|
-
const n = this.normalizeScalePercent(this.config.scalePercent),
|
|
1826
|
-
let
|
|
1827
|
-
const
|
|
1828
|
-
return
|
|
1825
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), s = i.height * n, r = t / e;
|
|
1826
|
+
let a = s, c = a * r;
|
|
1827
|
+
const u = i.width * n;
|
|
1828
|
+
return c > u && (c = u, a = c / r), { width: c, height: a };
|
|
1829
1829
|
}
|
|
1830
1830
|
/**
|
|
1831
1831
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
1832
1832
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1833
1833
|
*/
|
|
1834
1834
|
calculateFocusTransform(t, e) {
|
|
1835
|
-
const i = t.width / 2, n = t.height / 2,
|
|
1835
|
+
const i = t.width / 2, n = t.height / 2, s = i - e.x, r = n - e.y;
|
|
1836
1836
|
return {
|
|
1837
|
-
x:
|
|
1837
|
+
x: s,
|
|
1838
1838
|
y: r,
|
|
1839
1839
|
rotation: 0,
|
|
1840
1840
|
scale: 1
|
|
@@ -1856,23 +1856,23 @@ class Te {
|
|
|
1856
1856
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1857
1857
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1858
1858
|
*/
|
|
1859
|
-
animateWithDimensions(t, e, i, n,
|
|
1860
|
-
const
|
|
1859
|
+
animateWithDimensions(t, e, i, n, s, r, a, c) {
|
|
1860
|
+
const u = this.buildDimensionZoomTransform(e), l = this.buildDimensionZoomTransform(i);
|
|
1861
1861
|
return t.style.transition = "none", t.animate(
|
|
1862
1862
|
[
|
|
1863
1863
|
{
|
|
1864
|
-
transform:
|
|
1864
|
+
transform: u,
|
|
1865
1865
|
width: `${n}px`,
|
|
1866
|
-
height: `${
|
|
1866
|
+
height: `${s}px`
|
|
1867
1867
|
},
|
|
1868
1868
|
{
|
|
1869
|
-
transform:
|
|
1869
|
+
transform: l,
|
|
1870
1870
|
width: `${r}px`,
|
|
1871
|
-
height: `${
|
|
1871
|
+
height: `${a}px`
|
|
1872
1872
|
}
|
|
1873
1873
|
],
|
|
1874
1874
|
{
|
|
1875
|
-
duration:
|
|
1875
|
+
duration: c,
|
|
1876
1876
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
1877
1877
|
fill: "forwards"
|
|
1878
1878
|
}
|
|
@@ -1888,7 +1888,7 @@ class Te {
|
|
|
1888
1888
|
* Remove focused styling from an element
|
|
1889
1889
|
*/
|
|
1890
1890
|
removeFocusedStyling(t, e) {
|
|
1891
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1891
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), Ht(t, this.focusedClassName), lt(t, this.defaultStyles), ht(t, this.defaultClassName);
|
|
1892
1892
|
}
|
|
1893
1893
|
/**
|
|
1894
1894
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1896,49 +1896,49 @@ class Te {
|
|
|
1896
1896
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1897
1897
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1898
1898
|
*/
|
|
1899
|
-
startFocusAnimation(t, e, i, n,
|
|
1900
|
-
const r = t.style.zIndex || "",
|
|
1899
|
+
startFocusAnimation(t, e, i, n, s) {
|
|
1900
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, c = t.offsetHeight, u = this.calculateFocusDimensions(a, c, e), l = this.calculateFocusTransform(e, i);
|
|
1901
1901
|
this.applyFocusedStyling(t, Ot.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1902
|
-
const
|
|
1902
|
+
const d = n ?? {
|
|
1903
1903
|
x: 0,
|
|
1904
1904
|
y: 0,
|
|
1905
1905
|
rotation: i.rotation,
|
|
1906
1906
|
scale: 1
|
|
1907
1907
|
// No scale - using dimensions
|
|
1908
|
-
},
|
|
1908
|
+
}, h = (s == null ? void 0 : s.width) ?? a, g = (s == null ? void 0 : s.height) ?? c, p = this.config.animationDuration ?? 600, b = this.animateWithDimensions(
|
|
1909
1909
|
t,
|
|
1910
|
-
c,
|
|
1911
|
-
u,
|
|
1912
1910
|
d,
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1911
|
+
l,
|
|
1912
|
+
h,
|
|
1913
|
+
g,
|
|
1914
|
+
u.width,
|
|
1915
|
+
u.height,
|
|
1916
|
+
p
|
|
1917
|
+
), f = {
|
|
1918
1918
|
id: `focus-${Date.now()}`,
|
|
1919
1919
|
element: t,
|
|
1920
|
-
animation:
|
|
1921
|
-
fromState:
|
|
1922
|
-
toState:
|
|
1920
|
+
animation: b,
|
|
1921
|
+
fromState: d,
|
|
1922
|
+
toState: l,
|
|
1923
1923
|
startTime: performance.now(),
|
|
1924
|
-
duration:
|
|
1924
|
+
duration: p
|
|
1925
1925
|
};
|
|
1926
1926
|
return this.focusData = {
|
|
1927
1927
|
element: t,
|
|
1928
1928
|
originalState: i,
|
|
1929
|
-
focusTransform:
|
|
1929
|
+
focusTransform: l,
|
|
1930
1930
|
originalZIndex: r,
|
|
1931
|
-
originalWidth:
|
|
1932
|
-
originalHeight:
|
|
1933
|
-
focusWidth:
|
|
1934
|
-
focusHeight:
|
|
1931
|
+
originalWidth: a,
|
|
1932
|
+
originalHeight: c,
|
|
1933
|
+
focusWidth: u.width,
|
|
1934
|
+
focusHeight: u.height
|
|
1935
1935
|
}, {
|
|
1936
1936
|
element: t,
|
|
1937
1937
|
originalState: i,
|
|
1938
|
-
animationHandle:
|
|
1938
|
+
animationHandle: f,
|
|
1939
1939
|
direction: "in",
|
|
1940
|
-
originalWidth:
|
|
1941
|
-
originalHeight:
|
|
1940
|
+
originalWidth: a,
|
|
1941
|
+
originalHeight: c
|
|
1942
1942
|
};
|
|
1943
1943
|
}
|
|
1944
1944
|
/**
|
|
@@ -1947,39 +1947,39 @@ class Te {
|
|
|
1947
1947
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1948
1948
|
*/
|
|
1949
1949
|
startUnfocusAnimation(t, e, i, n) {
|
|
1950
|
-
var
|
|
1950
|
+
var p, b, f, m, y;
|
|
1951
1951
|
t.style.zIndex = String(Ot.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1952
|
-
const
|
|
1952
|
+
const s = i ?? ((p = this.focusData) == null ? void 0 : p.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (n == null ? void 0 : n.width) ?? ((b = this.focusData) == null ? void 0 : b.focusWidth) ?? t.offsetWidth, a = (n == null ? void 0 : n.height) ?? ((f = this.focusData) == null ? void 0 : f.focusHeight) ?? t.offsetHeight, c = {
|
|
1953
1953
|
x: 0,
|
|
1954
1954
|
y: 0,
|
|
1955
1955
|
rotation: e.rotation,
|
|
1956
1956
|
scale: 1
|
|
1957
1957
|
// No scale - using dimensions
|
|
1958
|
-
},
|
|
1958
|
+
}, u = ((m = this.focusData) == null ? void 0 : m.originalWidth) ?? t.offsetWidth, l = ((y = this.focusData) == null ? void 0 : y.originalHeight) ?? t.offsetHeight, d = this.config.animationDuration ?? 600, h = this.animateWithDimensions(
|
|
1959
1959
|
t,
|
|
1960
|
-
a,
|
|
1961
|
-
h,
|
|
1962
|
-
r,
|
|
1963
1960
|
s,
|
|
1964
|
-
|
|
1961
|
+
c,
|
|
1962
|
+
r,
|
|
1963
|
+
a,
|
|
1965
1964
|
u,
|
|
1966
|
-
|
|
1967
|
-
|
|
1965
|
+
l,
|
|
1966
|
+
d
|
|
1967
|
+
), g = {
|
|
1968
1968
|
id: `unfocus-${Date.now()}`,
|
|
1969
1969
|
element: t,
|
|
1970
|
-
animation:
|
|
1971
|
-
fromState:
|
|
1972
|
-
toState:
|
|
1970
|
+
animation: h,
|
|
1971
|
+
fromState: s,
|
|
1972
|
+
toState: c,
|
|
1973
1973
|
startTime: performance.now(),
|
|
1974
|
-
duration:
|
|
1974
|
+
duration: d
|
|
1975
1975
|
};
|
|
1976
1976
|
return {
|
|
1977
1977
|
element: t,
|
|
1978
1978
|
originalState: e,
|
|
1979
|
-
animationHandle:
|
|
1979
|
+
animationHandle: g,
|
|
1980
1980
|
direction: "out",
|
|
1981
|
-
originalWidth:
|
|
1982
|
-
originalHeight:
|
|
1981
|
+
originalWidth: u,
|
|
1982
|
+
originalHeight: l
|
|
1983
1983
|
};
|
|
1984
1984
|
}
|
|
1985
1985
|
/**
|
|
@@ -1994,24 +1994,24 @@ class Te {
|
|
|
1994
1994
|
/**
|
|
1995
1995
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
1996
1996
|
*/
|
|
1997
|
-
resetElementInstantly(t, e, i, n,
|
|
1997
|
+
resetElementInstantly(t, e, i, n, s) {
|
|
1998
1998
|
this.animationEngine.cancelAllAnimations(t);
|
|
1999
1999
|
const r = ["translate(-50%, -50%)"];
|
|
2000
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 &&
|
|
2000
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && s !== void 0 && (t.style.width = `${n}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, i);
|
|
2001
2001
|
}
|
|
2002
2002
|
/**
|
|
2003
2003
|
* Focus (zoom) an image to center of container
|
|
2004
2004
|
* Implements cross-animation when swapping focus
|
|
2005
2005
|
*/
|
|
2006
2006
|
async focusImage(t, e, i) {
|
|
2007
|
-
var
|
|
2008
|
-
if (this.currentFocus === t && this.state ===
|
|
2007
|
+
var s, r, a, c, u, l, d, h, g, p, b, f;
|
|
2008
|
+
if (this.currentFocus === t && this.state === I.FOCUSED)
|
|
2009
2009
|
return this.unfocusImage();
|
|
2010
|
-
if (((
|
|
2011
|
-
const
|
|
2012
|
-
x:
|
|
2013
|
-
y:
|
|
2014
|
-
rotation:
|
|
2010
|
+
if (((s = this.incoming) == null ? void 0 : s.element) === t && this.state === I.FOCUSING) {
|
|
2011
|
+
const m = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), y = {
|
|
2012
|
+
x: m.x,
|
|
2013
|
+
y: m.y,
|
|
2014
|
+
rotation: m.rotation,
|
|
2015
2015
|
scale: 1
|
|
2016
2016
|
// No scale transform - using dimensions
|
|
2017
2017
|
}, v = {
|
|
@@ -2023,17 +2023,17 @@ class Te {
|
|
|
2023
2023
|
this.incoming.originalState,
|
|
2024
2024
|
y,
|
|
2025
2025
|
v
|
|
2026
|
-
), this.incoming = null, this.state =
|
|
2026
|
+
), this.incoming = null, this.state = I.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 = I.IDLE;
|
|
2027
2027
|
return;
|
|
2028
2028
|
}
|
|
2029
2029
|
const n = ++this.focusGeneration;
|
|
2030
2030
|
switch (this.state) {
|
|
2031
|
-
case
|
|
2032
|
-
if (this.state =
|
|
2033
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2031
|
+
case I.IDLE:
|
|
2032
|
+
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2033
|
+
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2034
2034
|
break;
|
|
2035
|
-
case
|
|
2036
|
-
if (this.state =
|
|
2035
|
+
case I.FOCUSED:
|
|
2036
|
+
if (this.state = I.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2037
2037
|
this.currentFocus,
|
|
2038
2038
|
this.focusData.originalState
|
|
2039
2039
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
@@ -2041,33 +2041,33 @@ class Te {
|
|
|
2041
2041
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2042
2042
|
]), this.focusGeneration !== n)
|
|
2043
2043
|
return;
|
|
2044
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2044
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((a = this.outgoing.originalState.zIndex) == null ? void 0 : a.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2045
2045
|
break;
|
|
2046
|
-
case
|
|
2046
|
+
case I.FOCUSING:
|
|
2047
2047
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2048
2048
|
this.incoming.element,
|
|
2049
2049
|
this.incoming.originalState,
|
|
2050
|
-
((
|
|
2051
|
-
(
|
|
2052
|
-
(
|
|
2050
|
+
((c = this.focusData) == null ? void 0 : c.originalZIndex) || "",
|
|
2051
|
+
(u = this.focusData) == null ? void 0 : u.originalWidth,
|
|
2052
|
+
(l = this.focusData) == null ? void 0 : l.originalHeight
|
|
2053
2053
|
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2054
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2054
|
+
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2055
2055
|
break;
|
|
2056
|
-
case
|
|
2057
|
-
if (this.state =
|
|
2056
|
+
case I.UNFOCUSING:
|
|
2057
|
+
if (this.state = I.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2058
2058
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2059
2059
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2060
2060
|
]), this.focusGeneration !== n) return;
|
|
2061
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2061
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((d = this.outgoing.originalState.zIndex) == null ? void 0 : d.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2062
2062
|
break;
|
|
2063
|
-
case
|
|
2064
|
-
if (((
|
|
2063
|
+
case I.CROSS_ANIMATING:
|
|
2064
|
+
if (((h = this.incoming) == null ? void 0 : h.element) === t)
|
|
2065
2065
|
return;
|
|
2066
|
-
if (((
|
|
2067
|
-
const
|
|
2068
|
-
x:
|
|
2069
|
-
y:
|
|
2070
|
-
rotation:
|
|
2066
|
+
if (((g = this.outgoing) == null ? void 0 : g.element) === t) {
|
|
2067
|
+
const m = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0), y = {
|
|
2068
|
+
x: m.x,
|
|
2069
|
+
y: m.y,
|
|
2070
|
+
rotation: m.rotation,
|
|
2071
2071
|
scale: 1
|
|
2072
2072
|
// No scale - using dimensions
|
|
2073
2073
|
}, v = {
|
|
@@ -2075,13 +2075,13 @@ class Te {
|
|
|
2075
2075
|
height: t.offsetHeight
|
|
2076
2076
|
};
|
|
2077
2077
|
if (this.incoming) {
|
|
2078
|
-
const
|
|
2079
|
-
x:
|
|
2080
|
-
y:
|
|
2081
|
-
rotation:
|
|
2078
|
+
const E = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), A = {
|
|
2079
|
+
x: E.x,
|
|
2080
|
+
y: E.y,
|
|
2081
|
+
rotation: E.rotation,
|
|
2082
2082
|
scale: 1
|
|
2083
2083
|
// No scale - using dimensions
|
|
2084
|
-
},
|
|
2084
|
+
}, S = {
|
|
2085
2085
|
width: this.incoming.element.offsetWidth,
|
|
2086
2086
|
height: this.incoming.element.offsetHeight
|
|
2087
2087
|
};
|
|
@@ -2089,7 +2089,7 @@ class Te {
|
|
|
2089
2089
|
this.incoming.element,
|
|
2090
2090
|
this.incoming.originalState,
|
|
2091
2091
|
A,
|
|
2092
|
-
|
|
2092
|
+
S
|
|
2093
2093
|
);
|
|
2094
2094
|
} else
|
|
2095
2095
|
this.outgoing = null;
|
|
@@ -2097,20 +2097,20 @@ class Te {
|
|
|
2097
2097
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2098
2098
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2099
2099
|
]), this.focusGeneration !== n) return;
|
|
2100
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2100
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((p = this.outgoing.originalState.zIndex) == null ? void 0 : p.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2101
2101
|
return;
|
|
2102
2102
|
}
|
|
2103
2103
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
2104
2104
|
this.outgoing.element,
|
|
2105
2105
|
this.outgoing.originalState,
|
|
2106
|
-
((
|
|
2106
|
+
((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || "",
|
|
2107
2107
|
this.outgoing.originalWidth,
|
|
2108
2108
|
this.outgoing.originalHeight
|
|
2109
2109
|
), this.outgoing = null), this.incoming) {
|
|
2110
|
-
const
|
|
2111
|
-
x:
|
|
2112
|
-
y:
|
|
2113
|
-
rotation:
|
|
2110
|
+
const m = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), y = {
|
|
2111
|
+
x: m.x,
|
|
2112
|
+
y: m.y,
|
|
2113
|
+
rotation: m.rotation,
|
|
2114
2114
|
scale: 1
|
|
2115
2115
|
// No scale - using dimensions
|
|
2116
2116
|
}, v = {
|
|
@@ -2128,7 +2128,7 @@ class Te {
|
|
|
2128
2128
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2129
2129
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2130
2130
|
]), this.focusGeneration !== n) return;
|
|
2131
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2131
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((f = this.outgoing.originalState.zIndex) == null ? void 0 : f.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2132
2132
|
break;
|
|
2133
2133
|
}
|
|
2134
2134
|
}
|
|
@@ -2136,56 +2136,56 @@ class Te {
|
|
|
2136
2136
|
* Unfocus current image, returning it to original position
|
|
2137
2137
|
*/
|
|
2138
2138
|
async unfocusImage() {
|
|
2139
|
-
var
|
|
2139
|
+
var s, r, a;
|
|
2140
2140
|
const t = ++this.focusGeneration;
|
|
2141
2141
|
if (!this.currentFocus || !this.focusData) {
|
|
2142
|
-
if (this.incoming && this.state ===
|
|
2143
|
-
const
|
|
2144
|
-
x:
|
|
2145
|
-
y:
|
|
2146
|
-
rotation:
|
|
2142
|
+
if (this.incoming && this.state === I.FOCUSING) {
|
|
2143
|
+
const c = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), u = {
|
|
2144
|
+
x: c.x,
|
|
2145
|
+
y: c.y,
|
|
2146
|
+
rotation: c.rotation,
|
|
2147
2147
|
scale: 1
|
|
2148
2148
|
// No scale - using dimensions
|
|
2149
|
-
},
|
|
2149
|
+
}, l = {
|
|
2150
2150
|
width: this.incoming.element.offsetWidth,
|
|
2151
2151
|
height: this.incoming.element.offsetHeight
|
|
2152
2152
|
};
|
|
2153
2153
|
if (this.outgoing = this.startUnfocusAnimation(
|
|
2154
2154
|
this.incoming.element,
|
|
2155
2155
|
this.incoming.originalState,
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
), this.incoming = null, this.state =
|
|
2159
|
-
this.removeFocusedStyling(this.outgoing.element, ((
|
|
2156
|
+
u,
|
|
2157
|
+
l
|
|
2158
|
+
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2159
|
+
this.removeFocusedStyling(this.outgoing.element, ((s = this.focusData) == null ? void 0 : s.originalZIndex) || ""), this.outgoing = null, this.focusData = null, this.state = I.IDLE;
|
|
2160
2160
|
}
|
|
2161
2161
|
return;
|
|
2162
2162
|
}
|
|
2163
|
-
if (this.state ===
|
|
2164
|
-
const
|
|
2165
|
-
x:
|
|
2166
|
-
y:
|
|
2167
|
-
rotation:
|
|
2163
|
+
if (this.state === I.CROSS_ANIMATING && this.incoming) {
|
|
2164
|
+
const c = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), u = {
|
|
2165
|
+
x: c.x,
|
|
2166
|
+
y: c.y,
|
|
2167
|
+
rotation: c.rotation,
|
|
2168
2168
|
scale: 1
|
|
2169
2169
|
// No scale - using dimensions
|
|
2170
|
-
},
|
|
2170
|
+
}, l = {
|
|
2171
2171
|
width: this.incoming.element.offsetWidth,
|
|
2172
2172
|
height: this.incoming.element.offsetHeight
|
|
2173
|
-
},
|
|
2173
|
+
}, d = this.startUnfocusAnimation(
|
|
2174
2174
|
this.incoming.element,
|
|
2175
2175
|
this.incoming.originalState,
|
|
2176
|
-
|
|
2177
|
-
|
|
2176
|
+
u,
|
|
2177
|
+
l
|
|
2178
2178
|
);
|
|
2179
2179
|
if (await Promise.all([
|
|
2180
2180
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2181
|
-
this.waitForAnimation(
|
|
2181
|
+
this.waitForAnimation(d.animationHandle)
|
|
2182
2182
|
]), this.focusGeneration !== t) return;
|
|
2183
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(
|
|
2183
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(d.element, ((a = this.incoming.originalState.zIndex) == null ? void 0 : a.toString()) || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
|
|
2184
2184
|
return;
|
|
2185
2185
|
}
|
|
2186
|
-
this.state =
|
|
2186
|
+
this.state = I.UNFOCUSING;
|
|
2187
2187
|
const e = this.currentFocus, i = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2188
|
-
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 =
|
|
2188
|
+
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 = I.IDLE);
|
|
2189
2189
|
}
|
|
2190
2190
|
/**
|
|
2191
2191
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2203,7 +2203,7 @@ class Te {
|
|
|
2203
2203
|
* Check if an image is currently focused (stable state)
|
|
2204
2204
|
*/
|
|
2205
2205
|
isFocused(t) {
|
|
2206
|
-
return this.currentFocus === t && this.state ===
|
|
2206
|
+
return this.currentFocus === t && this.state === I.FOCUSED;
|
|
2207
2207
|
}
|
|
2208
2208
|
/**
|
|
2209
2209
|
* Check if an image is the target of current focus animation
|
|
@@ -2226,9 +2226,9 @@ class Te {
|
|
|
2226
2226
|
* Used during swipe gestures for visual feedback
|
|
2227
2227
|
*/
|
|
2228
2228
|
setDragOffset(t) {
|
|
2229
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2230
|
-
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"],
|
|
2231
|
-
n.push(`translate(${
|
|
2229
|
+
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2230
|
+
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2231
|
+
n.push(`translate(${s}px, ${r}px)`), i.rotation !== void 0 && n.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = n.join(" ");
|
|
2232
2232
|
}
|
|
2233
2233
|
/**
|
|
2234
2234
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2236,13 +2236,13 @@ class Te {
|
|
|
2236
2236
|
* @param duration - Animation duration in ms (default 150)
|
|
2237
2237
|
*/
|
|
2238
2238
|
clearDragOffset(t, e = 150) {
|
|
2239
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2240
|
-
const i = this.currentFocus, n = this.focusData.focusTransform,
|
|
2241
|
-
|
|
2242
|
-
const
|
|
2243
|
-
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform =
|
|
2239
|
+
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2240
|
+
const i = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2241
|
+
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2242
|
+
const c = s.join(" ");
|
|
2243
|
+
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = c, setTimeout(() => {
|
|
2244
2244
|
this.currentFocus === i && (i.style.transition = "none");
|
|
2245
|
-
}, e)) : (i.style.transition = "none", i.style.transform =
|
|
2245
|
+
}, e)) : (i.style.transition = "none", i.style.transform = c);
|
|
2246
2246
|
}
|
|
2247
2247
|
/**
|
|
2248
2248
|
* Reset zoom state (cancels all animations)
|
|
@@ -2267,10 +2267,10 @@ class Te {
|
|
|
2267
2267
|
this.focusData.originalZIndex,
|
|
2268
2268
|
this.focusData.originalWidth,
|
|
2269
2269
|
this.focusData.originalHeight
|
|
2270
|
-
), this.state =
|
|
2270
|
+
), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2271
2271
|
}
|
|
2272
2272
|
}
|
|
2273
|
-
const
|
|
2273
|
+
const Re = 50, Ce = 0.5, Me = 20, Fe = 0.3, Le = 150, ze = 30, mt = class mt {
|
|
2274
2274
|
constructor(t, e) {
|
|
2275
2275
|
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);
|
|
2276
2276
|
}
|
|
@@ -2317,21 +2317,21 @@ const Ae = 50, Re = 0.5, Ce = 20, Me = 0.3, Le = 150, Fe = 30, mt = class mt {
|
|
|
2317
2317
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2318
2318
|
const e = t.touches[0], i = e.clientX - this.touchState.startX, n = e.clientY - this.touchState.startY;
|
|
2319
2319
|
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + n * n) > 10) {
|
|
2320
|
-
const
|
|
2321
|
-
this.touchState.isHorizontalSwipe =
|
|
2320
|
+
const a = Math.atan2(Math.abs(n), Math.abs(i)) * (180 / Math.PI);
|
|
2321
|
+
this.touchState.isHorizontalSwipe = a <= ze;
|
|
2322
2322
|
}
|
|
2323
2323
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2324
2324
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2325
|
-
const
|
|
2326
|
-
this.callbacks.onDragOffset(
|
|
2325
|
+
const s = i * Fe;
|
|
2326
|
+
this.callbacks.onDragOffset(s);
|
|
2327
2327
|
}
|
|
2328
2328
|
}
|
|
2329
2329
|
handleTouchEnd(t) {
|
|
2330
2330
|
if (!this.touchState) return;
|
|
2331
2331
|
this.recentTouchTimestamp = Date.now();
|
|
2332
|
-
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, n = Math.abs(e) / i,
|
|
2332
|
+
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, n = Math.abs(e) / i, s = Math.abs(e);
|
|
2333
2333
|
let r = !1;
|
|
2334
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (
|
|
2334
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= Re || n >= Ce && s >= Me) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2335
2335
|
}
|
|
2336
2336
|
handleTouchCancel(t) {
|
|
2337
2337
|
var e;
|
|
@@ -2340,7 +2340,7 @@ const Ae = 50, Re = 0.5, Ce = 20, Me = 0.3, Le = 150, Fe = 30, mt = class mt {
|
|
|
2340
2340
|
};
|
|
2341
2341
|
mt.TOUCH_CLICK_DELAY = 300;
|
|
2342
2342
|
let It = mt;
|
|
2343
|
-
class
|
|
2343
|
+
class Oe {
|
|
2344
2344
|
constructor(t) {
|
|
2345
2345
|
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)
|
|
2346
2346
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2354,8 +2354,8 @@ class ze {
|
|
|
2354
2354
|
for (const e of this.sources)
|
|
2355
2355
|
if ("folders" in e)
|
|
2356
2356
|
for (const i of e.folders) {
|
|
2357
|
-
const n = e.recursive !== void 0 ? e.recursive : !0,
|
|
2358
|
-
this._discoveredUrls.push(...
|
|
2357
|
+
const n = e.recursive !== void 0 ? e.recursive : !0, s = await this.loadFromFolder(i, t, n);
|
|
2358
|
+
this._discoveredUrls.push(...s);
|
|
2359
2359
|
}
|
|
2360
2360
|
else if ("files" in e) {
|
|
2361
2361
|
const i = await this.loadFiles(e.files, t);
|
|
@@ -2421,8 +2421,8 @@ class ze {
|
|
|
2421
2421
|
return this.loadImagesDirectly(n, e);
|
|
2422
2422
|
try {
|
|
2423
2423
|
return i ? await this.loadImagesRecursively(n, e) : await this.loadImagesFromSingleFolder(n, e);
|
|
2424
|
-
} catch (
|
|
2425
|
-
return console.error("Error loading from Google Drive API:",
|
|
2424
|
+
} catch (s) {
|
|
2425
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(n, e);
|
|
2426
2426
|
}
|
|
2427
2427
|
}
|
|
2428
2428
|
/**
|
|
@@ -2432,14 +2432,14 @@ class ze {
|
|
|
2432
2432
|
* @returns Promise resolving to array of image URLs
|
|
2433
2433
|
*/
|
|
2434
2434
|
async loadImagesFromSingleFolder(t, e) {
|
|
2435
|
-
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2436
|
-
if (!
|
|
2437
|
-
throw new Error(`API request failed: ${
|
|
2438
|
-
const
|
|
2439
|
-
(
|
|
2435
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2436
|
+
if (!a.ok)
|
|
2437
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2438
|
+
const u = (await a.json()).files.filter(
|
|
2439
|
+
(l) => l.mimeType.startsWith("image/") && e.isAllowed(l.name)
|
|
2440
2440
|
);
|
|
2441
|
-
return this.log(`Found ${
|
|
2442
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2441
|
+
return this.log(`Found ${u.length} images in folder ${t} (non-recursive)`), u.forEach((l) => {
|
|
2442
|
+
i.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
|
|
2443
2443
|
}), i;
|
|
2444
2444
|
}
|
|
2445
2445
|
/**
|
|
@@ -2451,24 +2451,24 @@ class ze {
|
|
|
2451
2451
|
async loadFiles(t, e) {
|
|
2452
2452
|
const i = [];
|
|
2453
2453
|
for (const n of t) {
|
|
2454
|
-
const
|
|
2455
|
-
if (!
|
|
2454
|
+
const s = this.extractFileId(n);
|
|
2455
|
+
if (!s) {
|
|
2456
2456
|
this.log(`Skipping invalid file URL: ${n}`);
|
|
2457
2457
|
continue;
|
|
2458
2458
|
}
|
|
2459
2459
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2460
2460
|
try {
|
|
2461
|
-
const r = `${this.apiEndpoint}/${
|
|
2462
|
-
if (
|
|
2463
|
-
const
|
|
2464
|
-
|
|
2461
|
+
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2462
|
+
if (a.ok) {
|
|
2463
|
+
const c = await a.json();
|
|
2464
|
+
c.mimeType.startsWith("image/") && e.isAllowed(c.name) ? (i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${c.name}`)) : this.log(`Skipping non-image file: ${c.name} (${c.mimeType})`);
|
|
2465
2465
|
} else
|
|
2466
|
-
this.log(`Failed to fetch metadata for file ${
|
|
2466
|
+
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2467
2467
|
} catch (r) {
|
|
2468
|
-
this.log(`Error fetching metadata for file ${
|
|
2468
|
+
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2469
2469
|
}
|
|
2470
2470
|
else
|
|
2471
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2471
|
+
i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
2472
2472
|
}
|
|
2473
2473
|
return i;
|
|
2474
2474
|
}
|
|
@@ -2502,21 +2502,21 @@ class ze {
|
|
|
2502
2502
|
* @returns Promise resolving to array of image URLs
|
|
2503
2503
|
*/
|
|
2504
2504
|
async loadImagesRecursively(t, e) {
|
|
2505
|
-
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2506
|
-
if (!
|
|
2507
|
-
throw new Error(`API request failed: ${
|
|
2508
|
-
const
|
|
2509
|
-
(
|
|
2510
|
-
),
|
|
2511
|
-
(
|
|
2505
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2506
|
+
if (!a.ok)
|
|
2507
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2508
|
+
const c = await a.json(), u = c.files.filter(
|
|
2509
|
+
(d) => d.mimeType.startsWith("image/") && e.isAllowed(d.name)
|
|
2510
|
+
), l = c.files.filter(
|
|
2511
|
+
(d) => d.mimeType === "application/vnd.google-apps.folder"
|
|
2512
2512
|
);
|
|
2513
|
-
this.log(`Found ${
|
|
2514
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2513
|
+
this.log(`Found ${c.files.length} total items in folder ${t}`), c.files.forEach((d) => this.log(` - File: ${d.name} (${d.mimeType})`)), this.log(`- ${u.length} valid files (images only)`), this.log(`- ${l.length} subfolders`), u.forEach((d) => {
|
|
2514
|
+
i.push(`https://lh3.googleusercontent.com/d/${d.id}=s1600`), this.log(`Added file: ${d.name}`);
|
|
2515
2515
|
});
|
|
2516
|
-
for (const
|
|
2517
|
-
this.log(`Loading images from subfolder: ${
|
|
2518
|
-
const
|
|
2519
|
-
i.push(...
|
|
2516
|
+
for (const d of l) {
|
|
2517
|
+
this.log(`Loading images from subfolder: ${d.name}`);
|
|
2518
|
+
const h = await this.loadImagesRecursively(d.id, e);
|
|
2519
|
+
i.push(...h);
|
|
2520
2520
|
}
|
|
2521
2521
|
return i;
|
|
2522
2522
|
}
|
|
@@ -2532,9 +2532,9 @@ class ze {
|
|
|
2532
2532
|
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(i, { mode: "cors" });
|
|
2533
2533
|
if (!n.ok)
|
|
2534
2534
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2535
|
-
const
|
|
2536
|
-
return [...new Set(
|
|
2537
|
-
(
|
|
2535
|
+
const s = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2536
|
+
return [...new Set(a.map((l) => l[1]))].map(
|
|
2537
|
+
(l) => `https://drive.google.com/uc?export=view&id=${l}`
|
|
2538
2538
|
);
|
|
2539
2539
|
} catch (i) {
|
|
2540
2540
|
throw console.error("Direct loading failed:", i), new Error(
|
|
@@ -2561,7 +2561,7 @@ class ze {
|
|
|
2561
2561
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2562
2562
|
}
|
|
2563
2563
|
}
|
|
2564
|
-
class
|
|
2564
|
+
class $e {
|
|
2565
2565
|
constructor(t) {
|
|
2566
2566
|
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)
|
|
2567
2567
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -2626,8 +2626,8 @@ class Oe {
|
|
|
2626
2626
|
return console.warn("URLs must be an array:", t), [];
|
|
2627
2627
|
const i = [];
|
|
2628
2628
|
for (const n of t) {
|
|
2629
|
-
const
|
|
2630
|
-
if (!e.isAllowed(
|
|
2629
|
+
const s = n.split("/").pop() || n;
|
|
2630
|
+
if (!e.isAllowed(s)) {
|
|
2631
2631
|
this.log(`Skipping filtered URL: ${n}`);
|
|
2632
2632
|
continue;
|
|
2633
2633
|
}
|
|
@@ -2646,12 +2646,12 @@ class Oe {
|
|
|
2646
2646
|
if (!Array.isArray(e))
|
|
2647
2647
|
return console.warn("files must be an array:", e), [];
|
|
2648
2648
|
const n = [];
|
|
2649
|
-
for (const
|
|
2650
|
-
if (!i.isAllowed(
|
|
2651
|
-
this.log(`Skipping filtered file: ${
|
|
2649
|
+
for (const s of e) {
|
|
2650
|
+
if (!i.isAllowed(s)) {
|
|
2651
|
+
this.log(`Skipping filtered file: ${s}`);
|
|
2652
2652
|
continue;
|
|
2653
2653
|
}
|
|
2654
|
-
const r = this.constructUrl(t,
|
|
2654
|
+
const r = this.constructUrl(t, s);
|
|
2655
2655
|
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2656
2656
|
}
|
|
2657
2657
|
return n;
|
|
@@ -2667,15 +2667,15 @@ class Oe {
|
|
|
2667
2667
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2668
2668
|
const i = new AbortController(), n = setTimeout(() => i.abort(), 1e4);
|
|
2669
2669
|
try {
|
|
2670
|
-
const
|
|
2671
|
-
if (clearTimeout(n), !
|
|
2672
|
-
throw new Error(`HTTP ${
|
|
2673
|
-
const r = await
|
|
2670
|
+
const s = await fetch(t, { signal: i.signal });
|
|
2671
|
+
if (clearTimeout(n), !s.ok)
|
|
2672
|
+
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2673
|
+
const r = await s.json();
|
|
2674
2674
|
if (!r || !Array.isArray(r.images))
|
|
2675
2675
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2676
2676
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2677
|
-
} catch (
|
|
2678
|
-
throw clearTimeout(n),
|
|
2677
|
+
} catch (s) {
|
|
2678
|
+
throw clearTimeout(n), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
2679
2679
|
}
|
|
2680
2680
|
}
|
|
2681
2681
|
/**
|
|
@@ -2697,11 +2697,11 @@ class Oe {
|
|
|
2697
2697
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2698
2698
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2699
2699
|
try {
|
|
2700
|
-
const i = new AbortController(), n = setTimeout(() => i.abort(), this.validationTimeout),
|
|
2700
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), this.validationTimeout), s = await fetch(t, {
|
|
2701
2701
|
method: "HEAD",
|
|
2702
2702
|
signal: i.signal
|
|
2703
2703
|
});
|
|
2704
|
-
return clearTimeout(n),
|
|
2704
|
+
return clearTimeout(n), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
2705
2705
|
} catch (i) {
|
|
2706
2706
|
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2707
2707
|
}
|
|
@@ -2741,7 +2741,7 @@ class Oe {
|
|
|
2741
2741
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2742
2742
|
}
|
|
2743
2743
|
}
|
|
2744
|
-
class
|
|
2744
|
+
class De {
|
|
2745
2745
|
constructor(t) {
|
|
2746
2746
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2747
2747
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -2755,8 +2755,8 @@ class $e {
|
|
|
2755
2755
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2756
2756
|
const e = this.loaders.map((i, n) => i.prepare(t).then(() => {
|
|
2757
2757
|
this.log(`Loader ${n} prepared with ${i.imagesLength()} images`);
|
|
2758
|
-
}).catch((
|
|
2759
|
-
console.warn(`Loader ${n} failed to prepare:`,
|
|
2758
|
+
}).catch((s) => {
|
|
2759
|
+
console.warn(`Loader ${n} failed to prepare:`, s);
|
|
2760
2760
|
}));
|
|
2761
2761
|
await Promise.all(e);
|
|
2762
2762
|
for (const i of this.loaders)
|
|
@@ -2798,7 +2798,7 @@ class $e {
|
|
|
2798
2798
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2799
2799
|
}
|
|
2800
2800
|
}
|
|
2801
|
-
class
|
|
2801
|
+
class Ue {
|
|
2802
2802
|
/**
|
|
2803
2803
|
* Create a new ImageFilter
|
|
2804
2804
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2836,7 +2836,7 @@ class De {
|
|
|
2836
2836
|
// isAllowedDate(date: Date): boolean
|
|
2837
2837
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2838
2838
|
}
|
|
2839
|
-
const
|
|
2839
|
+
const Pe = `
|
|
2840
2840
|
.fbn-ic-gallery {
|
|
2841
2841
|
position: relative;
|
|
2842
2842
|
width: 100%;
|
|
@@ -2886,22 +2886,22 @@ const Ue = `
|
|
|
2886
2886
|
display: none !important;
|
|
2887
2887
|
}
|
|
2888
2888
|
`;
|
|
2889
|
-
function
|
|
2889
|
+
function _e() {
|
|
2890
2890
|
if (typeof document > "u") return;
|
|
2891
2891
|
const o = "fbn-ic-functional-styles";
|
|
2892
2892
|
if (document.getElementById(o)) return;
|
|
2893
2893
|
const t = document.createElement("style");
|
|
2894
|
-
t.id = o, t.textContent =
|
|
2894
|
+
t.id = o, t.textContent = Pe, document.head.appendChild(t);
|
|
2895
2895
|
}
|
|
2896
|
-
class
|
|
2896
|
+
class He {
|
|
2897
2897
|
constructor(t = {}) {
|
|
2898
|
-
var i, n,
|
|
2899
|
-
this.fullConfig =
|
|
2898
|
+
var i, n, s, r, a, c;
|
|
2899
|
+
this.fullConfig = Vt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.animationEngine = new te(this.fullConfig.animation), this.layoutEngine = new Ee({
|
|
2900
2900
|
layout: this.fullConfig.layout,
|
|
2901
2901
|
image: this.fullConfig.image
|
|
2902
|
-
}), this.zoomEngine = new
|
|
2903
|
-
const e = this.fullConfig.animation.entry ||
|
|
2904
|
-
this.entryAnimationEngine = new
|
|
2902
|
+
}), this.zoomEngine = new Ae(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 = (s = this.fullConfig.styling) == null ? void 0 : s.default) == null ? void 0 : r.className, this.hoverClassName = (c = (a = this.fullConfig.styling) == null ? void 0 : a.hover) == null ? void 0 : c.className;
|
|
2903
|
+
const e = this.fullConfig.animation.entry || x.animation.entry;
|
|
2904
|
+
this.entryAnimationEngine = new de(
|
|
2905
2905
|
e,
|
|
2906
2906
|
this.fullConfig.layout.algorithm
|
|
2907
2907
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
@@ -2912,44 +2912,46 @@ class _e {
|
|
|
2912
2912
|
createImageFilter() {
|
|
2913
2913
|
var e;
|
|
2914
2914
|
const t = (e = this.fullConfig.config.loaders) == null ? void 0 : e.allowedExtensions;
|
|
2915
|
-
return new
|
|
2915
|
+
return new Ue(t);
|
|
2916
2916
|
}
|
|
2917
2917
|
/**
|
|
2918
2918
|
* Create appropriate image loader based on config
|
|
2919
2919
|
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2920
2920
|
*/
|
|
2921
2921
|
createLoader() {
|
|
2922
|
+
var n;
|
|
2922
2923
|
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2923
2924
|
if (!t || t.length === 0)
|
|
2924
2925
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2925
|
-
const i = t.map((
|
|
2926
|
-
return i.length === 1 ? i[0] : new
|
|
2926
|
+
const i = t.map((s) => this.createLoaderFromEntry(s, e));
|
|
2927
|
+
return i.length === 1 ? i[0] : new De({
|
|
2927
2928
|
loaders: i,
|
|
2928
|
-
debugLogging:
|
|
2929
|
+
debugLogging: (n = this.fullConfig.config.debug) == null ? void 0 : n.loaders
|
|
2929
2930
|
});
|
|
2930
2931
|
}
|
|
2931
2932
|
/**
|
|
2932
2933
|
* Create a single loader from a LoaderEntry, merging shared config
|
|
2933
2934
|
*/
|
|
2934
2935
|
createLoaderFromEntry(t, e) {
|
|
2936
|
+
var i, n;
|
|
2935
2937
|
if ("static" in t) {
|
|
2936
|
-
const
|
|
2937
|
-
...
|
|
2938
|
-
validateUrls:
|
|
2939
|
-
validationTimeout:
|
|
2940
|
-
validationMethod:
|
|
2941
|
-
failOnAllMissing:
|
|
2942
|
-
allowedExtensions:
|
|
2943
|
-
debugLogging:
|
|
2938
|
+
const s = t.static, r = {
|
|
2939
|
+
...s,
|
|
2940
|
+
validateUrls: s.validateUrls ?? e.validateUrls,
|
|
2941
|
+
validationTimeout: s.validationTimeout ?? e.validationTimeout,
|
|
2942
|
+
validationMethod: s.validationMethod ?? e.validationMethod,
|
|
2943
|
+
failOnAllMissing: s.failOnAllMissing ?? e.failOnAllMissing,
|
|
2944
|
+
allowedExtensions: s.allowedExtensions ?? e.allowedExtensions,
|
|
2945
|
+
debugLogging: s.debugLogging ?? ((i = this.fullConfig.config.debug) == null ? void 0 : i.loaders)
|
|
2944
2946
|
};
|
|
2945
|
-
return new
|
|
2947
|
+
return new $e(r);
|
|
2946
2948
|
} else if ("googleDrive" in t) {
|
|
2947
|
-
const
|
|
2948
|
-
...
|
|
2949
|
-
allowedExtensions:
|
|
2950
|
-
debugLogging:
|
|
2949
|
+
const s = t.googleDrive, r = {
|
|
2950
|
+
...s,
|
|
2951
|
+
allowedExtensions: s.allowedExtensions ?? e.allowedExtensions,
|
|
2952
|
+
debugLogging: s.debugLogging ?? ((n = this.fullConfig.config.debug) == null ? void 0 : n.loaders)
|
|
2951
2953
|
};
|
|
2952
|
-
return new
|
|
2954
|
+
return new Oe(r);
|
|
2953
2955
|
} else
|
|
2954
2956
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2955
2957
|
}
|
|
@@ -2958,7 +2960,7 @@ class _e {
|
|
|
2958
2960
|
*/
|
|
2959
2961
|
async init() {
|
|
2960
2962
|
try {
|
|
2961
|
-
if (
|
|
2963
|
+
if (_e(), this.containerRef)
|
|
2962
2964
|
this.containerEl = this.containerRef;
|
|
2963
2965
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2964
2966
|
throw new Error(`Container #${this.containerId} not found`);
|
|
@@ -3011,25 +3013,28 @@ class _e {
|
|
|
3011
3013
|
*/
|
|
3012
3014
|
navigateToNextImage() {
|
|
3013
3015
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3014
|
-
const t = (this.currentFocusIndex + 1) % this.imageElements.
|
|
3015
|
-
|
|
3016
|
+
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, e = this.imageElements.find(
|
|
3017
|
+
(n) => n.dataset.imageId === String(t)
|
|
3018
|
+
);
|
|
3019
|
+
if (!e) return;
|
|
3020
|
+
const i = this.imageLayouts[t];
|
|
3021
|
+
i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
|
|
3016
3022
|
}
|
|
3017
3023
|
/**
|
|
3018
3024
|
* Navigate to the previous image (Left arrow)
|
|
3019
3025
|
*/
|
|
3020
3026
|
navigateToPreviousImage() {
|
|
3021
3027
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3022
|
-
const t = (this.currentFocusIndex - 1 + this.
|
|
3023
|
-
|
|
3028
|
+
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, e = this.imageElements.find(
|
|
3029
|
+
(n) => n.dataset.imageId === String(t)
|
|
3030
|
+
);
|
|
3031
|
+
if (!e) return;
|
|
3032
|
+
const i = this.imageLayouts[t];
|
|
3033
|
+
i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
|
|
3024
3034
|
}
|
|
3025
3035
|
/**
|
|
3026
3036
|
* Navigate to a specific image by index
|
|
3027
3037
|
*/
|
|
3028
|
-
async navigateToImage(t) {
|
|
3029
|
-
if (t < 0 || t >= this.imageElements.length) return;
|
|
3030
|
-
const e = this.imageElements[t], i = this.imageLayouts[t];
|
|
3031
|
-
!e || !i || await this.handleImageClick(e, i);
|
|
3032
|
-
}
|
|
3033
3038
|
handleResize() {
|
|
3034
3039
|
this.imagesLoaded && (this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.resizeTimeout = window.setTimeout(() => {
|
|
3035
3040
|
const t = this.getImageHeight();
|
|
@@ -3061,13 +3066,13 @@ class _e {
|
|
|
3061
3066
|
this.showError("No images found."), this.showLoading(!1);
|
|
3062
3067
|
return;
|
|
3063
3068
|
}
|
|
3064
|
-
const i = this.getContainerBounds(), n = this.getImageHeight(),
|
|
3069
|
+
const i = this.getContainerBounds(), n = this.getImageHeight(), s = window.innerWidth;
|
|
3065
3070
|
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3066
3071
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3067
3072
|
i,
|
|
3068
3073
|
t,
|
|
3069
3074
|
n,
|
|
3070
|
-
|
|
3075
|
+
s
|
|
3071
3076
|
);
|
|
3072
3077
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3073
3078
|
} catch (t) {
|
|
@@ -3078,64 +3083,67 @@ class _e {
|
|
|
3078
3083
|
* Helper for debug logging
|
|
3079
3084
|
*/
|
|
3080
3085
|
logDebug(...t) {
|
|
3081
|
-
|
|
3086
|
+
var e;
|
|
3087
|
+
(e = this.fullConfig.config.debug) != null && e.enabled && typeof console < "u" && console.log(...t);
|
|
3082
3088
|
}
|
|
3083
3089
|
async createImageCloud(t, e) {
|
|
3090
|
+
var u;
|
|
3084
3091
|
if (!this.containerEl) return;
|
|
3085
3092
|
const i = this.getContainerBounds();
|
|
3086
3093
|
this.currentImageHeight = e;
|
|
3087
|
-
const n = this.loadGeneration,
|
|
3088
|
-
this.imageLayouts =
|
|
3094
|
+
const n = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
3095
|
+
this.imageLayouts = s, this.displayQueue = [];
|
|
3089
3096
|
let r = 0;
|
|
3090
|
-
const
|
|
3097
|
+
const a = (l) => {
|
|
3091
3098
|
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(() => {
|
|
3099
|
+
var g;
|
|
3092
3100
|
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)) {
|
|
3093
|
-
const
|
|
3101
|
+
const p = {
|
|
3094
3102
|
x: parseFloat(l.dataset.startX),
|
|
3095
3103
|
y: parseFloat(l.dataset.startY)
|
|
3096
|
-
},
|
|
3104
|
+
}, b = {
|
|
3097
3105
|
x: parseFloat(l.dataset.endX),
|
|
3098
3106
|
y: parseFloat(l.dataset.endY)
|
|
3099
|
-
},
|
|
3100
|
-
|
|
3107
|
+
}, f = parseFloat(l.dataset.imageWidth), m = parseFloat(l.dataset.imageHeight), y = parseFloat(l.dataset.rotation), v = parseFloat(l.dataset.scale), E = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : y, A = l.dataset.startScale ? parseFloat(l.dataset.startScale) : v, S = this.entryAnimationEngine.getTiming();
|
|
3108
|
+
ce({
|
|
3101
3109
|
element: l,
|
|
3102
|
-
startPosition:
|
|
3103
|
-
endPosition:
|
|
3110
|
+
startPosition: p,
|
|
3111
|
+
endPosition: b,
|
|
3104
3112
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3105
|
-
duration:
|
|
3106
|
-
imageWidth:
|
|
3107
|
-
imageHeight:
|
|
3108
|
-
rotation:
|
|
3109
|
-
scale:
|
|
3113
|
+
duration: S.duration,
|
|
3114
|
+
imageWidth: f,
|
|
3115
|
+
imageHeight: m,
|
|
3116
|
+
rotation: y,
|
|
3117
|
+
scale: v,
|
|
3110
3118
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3111
|
-
startRotation:
|
|
3119
|
+
startRotation: E,
|
|
3112
3120
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3113
|
-
startScale:
|
|
3121
|
+
startScale: A
|
|
3114
3122
|
});
|
|
3115
3123
|
} else {
|
|
3116
|
-
const
|
|
3117
|
-
l.style.transform =
|
|
3124
|
+
const p = l.dataset.finalTransform || "";
|
|
3125
|
+
l.style.transform = p;
|
|
3118
3126
|
}
|
|
3119
|
-
const
|
|
3120
|
-
if (this.fullConfig.debug &&
|
|
3121
|
-
const
|
|
3122
|
-
console.log(`Image ${
|
|
3127
|
+
const h = parseInt(l.dataset.imageId || "0");
|
|
3128
|
+
if ((g = this.fullConfig.config.debug) != null && g.enabled && h < 3) {
|
|
3129
|
+
const p = l.dataset.finalTransform || "";
|
|
3130
|
+
console.log(`Image ${h} final state:`, {
|
|
3123
3131
|
left: l.style.left,
|
|
3124
3132
|
top: l.style.top,
|
|
3125
3133
|
width: l.style.width,
|
|
3126
3134
|
height: l.style.height,
|
|
3127
3135
|
computedWidth: l.offsetWidth,
|
|
3128
3136
|
computedHeight: l.offsetHeight,
|
|
3129
|
-
transform:
|
|
3137
|
+
transform: p,
|
|
3130
3138
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3131
3139
|
});
|
|
3132
3140
|
}
|
|
3133
3141
|
}), r++);
|
|
3134
|
-
},
|
|
3142
|
+
}, c = () => {
|
|
3135
3143
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3136
3144
|
for (; this.displayQueue.length > 0; ) {
|
|
3137
3145
|
const l = this.displayQueue.shift();
|
|
3138
|
-
l &&
|
|
3146
|
+
l && a(l);
|
|
3139
3147
|
}
|
|
3140
3148
|
return;
|
|
3141
3149
|
}
|
|
@@ -3146,86 +3154,86 @@ class _e {
|
|
|
3146
3154
|
}
|
|
3147
3155
|
if (this.displayQueue.length > 0) {
|
|
3148
3156
|
const l = this.displayQueue.shift();
|
|
3149
|
-
l &&
|
|
3157
|
+
l && a(l);
|
|
3150
3158
|
}
|
|
3151
3159
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3152
3160
|
}, this.fullConfig.animation.queue.interval);
|
|
3153
3161
|
};
|
|
3154
3162
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3155
|
-
const l = new IntersectionObserver((
|
|
3156
|
-
|
|
3157
|
-
|
|
3163
|
+
const l = new IntersectionObserver((d) => {
|
|
3164
|
+
d.forEach((h) => {
|
|
3165
|
+
h.isIntersecting && (c(), l.disconnect());
|
|
3158
3166
|
});
|
|
3159
3167
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3160
3168
|
l.observe(this.containerEl);
|
|
3161
3169
|
} else
|
|
3162
|
-
|
|
3163
|
-
this.fullConfig.
|
|
3164
|
-
const
|
|
3165
|
-
|
|
3166
|
-
const
|
|
3167
|
-
|
|
3168
|
-
})), t.forEach((l,
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3170
|
+
c();
|
|
3171
|
+
(u = this.fullConfig.config.debug) != null && u.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), s.forEach((l, d) => {
|
|
3172
|
+
const h = document.createElement("div");
|
|
3173
|
+
h.className = "fbn-ic-debug-center", h.style.position = "absolute", h.style.width = "12px", h.style.height = "12px", h.style.borderRadius = "50%", h.style.backgroundColor = "red", h.style.border = "2px solid yellow", h.style.zIndex = "9999", h.style.pointerEvents = "none";
|
|
3174
|
+
const g = l.x, p = l.y;
|
|
3175
|
+
h.style.left = `${g - 6}px`, h.style.top = `${p - 6}px`, h.title = `Image ${d}: center (${Math.round(g)}, ${Math.round(p)})`, this.containerEl.appendChild(h);
|
|
3176
|
+
})), t.forEach((l, d) => {
|
|
3177
|
+
const h = document.createElement("img");
|
|
3178
|
+
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.dataset.imageId = String(d);
|
|
3179
|
+
const g = s[d];
|
|
3180
|
+
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${e}px`, h.style.left = `${g.x}px`, h.style.top = `${g.y}px`, g.zIndex && (h.style.zIndex = String(g.zIndex)), lt(h, this.defaultStyles), ht(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3181
|
+
this.hoveredImage = { element: h, layout: g }, this.zoomEngine.isInvolved(h) || (lt(h, this.hoverStyles), ht(h, this.hoverClassName));
|
|
3182
|
+
}), h.addEventListener("mouseleave", () => {
|
|
3183
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(h) || (lt(h, this.defaultStyles), Ht(h, this.hoverClassName), ht(h, this.defaultClassName));
|
|
3184
|
+
}), h.addEventListener("click", (p) => {
|
|
3185
|
+
p.stopPropagation(), this.handleImageClick(h, g);
|
|
3186
|
+
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3187
|
+
var _;
|
|
3180
3188
|
if (n !== this.loadGeneration)
|
|
3181
3189
|
return;
|
|
3182
|
-
const p =
|
|
3183
|
-
|
|
3184
|
-
const f = { x:
|
|
3190
|
+
const p = h.naturalWidth / h.naturalHeight, b = e * p;
|
|
3191
|
+
h.style.width = `${b}px`;
|
|
3192
|
+
const f = { x: g.x, y: g.y }, m = { width: b, height: e }, y = this.entryAnimationEngine.calculateStartPosition(
|
|
3185
3193
|
f,
|
|
3186
|
-
|
|
3194
|
+
m,
|
|
3187
3195
|
i,
|
|
3188
|
-
|
|
3196
|
+
d,
|
|
3189
3197
|
t.length
|
|
3190
|
-
),
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3198
|
+
), v = this.entryAnimationEngine.calculateStartRotation(g.rotation), E = this.entryAnimationEngine.calculateStartScale(g.scale), A = this.entryAnimationEngine.buildFinalTransform(
|
|
3199
|
+
g.rotation,
|
|
3200
|
+
g.scale,
|
|
3201
|
+
b,
|
|
3194
3202
|
e
|
|
3195
|
-
),
|
|
3196
|
-
|
|
3203
|
+
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3204
|
+
y,
|
|
3197
3205
|
f,
|
|
3198
|
-
|
|
3199
|
-
|
|
3200
|
-
|
|
3206
|
+
g.rotation,
|
|
3207
|
+
g.scale,
|
|
3208
|
+
b,
|
|
3201
3209
|
e,
|
|
3202
|
-
|
|
3203
|
-
|
|
3210
|
+
v,
|
|
3211
|
+
E
|
|
3204
3212
|
);
|
|
3205
|
-
this.fullConfig.debug &&
|
|
3213
|
+
(_ = this.fullConfig.config.debug) != null && _.enabled && d < 3 && console.log(`Image ${d}:`, {
|
|
3206
3214
|
finalPosition: f,
|
|
3207
|
-
imageSize:
|
|
3208
|
-
left:
|
|
3209
|
-
top:
|
|
3210
|
-
finalTransform:
|
|
3211
|
-
renderedWidth:
|
|
3215
|
+
imageSize: m,
|
|
3216
|
+
left: g.x,
|
|
3217
|
+
top: g.y,
|
|
3218
|
+
finalTransform: A,
|
|
3219
|
+
renderedWidth: b,
|
|
3212
3220
|
renderedHeight: e
|
|
3213
|
-
}),
|
|
3214
|
-
},
|
|
3221
|
+
}), h.style.transform = S, h.dataset.finalTransform = A, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || v !== g.rotation || E !== g.scale) && (h.dataset.startX = String(y.x), h.dataset.startY = String(y.y), h.dataset.endX = String(f.x), h.dataset.endY = String(f.y), h.dataset.imageWidth = String(b), h.dataset.imageHeight = String(e), h.dataset.rotation = String(g.rotation), h.dataset.scale = String(g.scale), h.dataset.startRotation = String(v), h.dataset.startScale = String(E)), this.displayQueue.push(h);
|
|
3222
|
+
}, h.onerror = () => r++, h.src = l;
|
|
3215
3223
|
});
|
|
3216
3224
|
}
|
|
3217
3225
|
async handleImageClick(t, e) {
|
|
3218
|
-
var
|
|
3226
|
+
var s, r;
|
|
3219
3227
|
if (!this.containerEl) return;
|
|
3220
3228
|
const i = this.zoomEngine.isFocused(t), n = {
|
|
3221
3229
|
width: this.containerEl.offsetWidth,
|
|
3222
3230
|
height: this.containerEl.offsetHeight
|
|
3223
3231
|
};
|
|
3224
3232
|
if (i)
|
|
3225
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (
|
|
3233
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (s = this.swipeEngine) == null || s.disable(), this.hideCounter();
|
|
3226
3234
|
else {
|
|
3227
|
-
const
|
|
3228
|
-
this.currentFocusIndex =
|
|
3235
|
+
const a = t.dataset.imageId;
|
|
3236
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, (r = this.swipeEngine) == null || r.enable(), await this.zoomEngine.focusImage(t, n, e), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3229
3237
|
}
|
|
3230
3238
|
}
|
|
3231
3239
|
/**
|
|
@@ -3258,29 +3266,29 @@ class _e {
|
|
|
3258
3266
|
}
|
|
3259
3267
|
}
|
|
3260
3268
|
export {
|
|
3261
|
-
|
|
3269
|
+
te as AnimationEngine,
|
|
3262
3270
|
Mt as BOUNCE_PRESETS,
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3271
|
+
we as ClusterPlacementGenerator,
|
|
3272
|
+
De as CompositeLoader,
|
|
3273
|
+
x as DEFAULT_CONFIG,
|
|
3266
3274
|
Ut as DEFAULT_SHARED_LOADER_CONFIG,
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3275
|
+
Ft as ELASTIC_PRESETS,
|
|
3276
|
+
de as EntryAnimationEngine,
|
|
3277
|
+
Pe as FUNCTIONAL_CSS,
|
|
3278
|
+
Oe as GoogleDriveLoader,
|
|
3279
|
+
me as GridPlacementGenerator,
|
|
3280
|
+
He as ImageCloud,
|
|
3281
|
+
Ue as ImageFilter,
|
|
3282
|
+
He as ImageGallery,
|
|
3283
|
+
Ee as LayoutEngine,
|
|
3284
|
+
ge as RadialPlacementGenerator,
|
|
3285
|
+
ue as RandomPlacementGenerator,
|
|
3286
|
+
ye as SpiralPlacementGenerator,
|
|
3287
|
+
$e as StaticImageLoader,
|
|
3288
|
+
Lt as WAVE_PATH_PRESETS,
|
|
3289
|
+
Ae as ZoomEngine,
|
|
3290
|
+
ce as animatePath,
|
|
3291
|
+
_e as injectFunctionalStyles,
|
|
3292
|
+
le as requiresJSAnimation
|
|
3285
3293
|
};
|
|
3286
3294
|
//# sourceMappingURL=image-cloud.js.map
|