@frybynite/image-cloud 0.2.5 → 0.2.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/dist/image-cloud-auto-init.js +879 -775
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +856 -752
- 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 +12 -0
- package/package.json +1 -1
package/dist/image-cloud.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
const
|
|
1
|
+
const It = Object.freeze({
|
|
2
2
|
none: "none",
|
|
3
3
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
4
4
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
5
5
|
lg: "0 8px 32px rgba(0,0,0,0.5)",
|
|
6
6
|
glow: "0 0 30px rgba(255,255,255,0.6)"
|
|
7
|
-
}),
|
|
7
|
+
}), zt = 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
|
+
}), Ct = 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 }),
|
|
20
20
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
21
|
-
}),
|
|
21
|
+
}), Tt = Object.freeze({
|
|
22
22
|
type: "linear"
|
|
23
|
-
}), Et = Object.freeze({
|
|
24
|
-
mode: "none"
|
|
25
23
|
}), Rt = Object.freeze({
|
|
26
24
|
mode: "none"
|
|
27
|
-
}),
|
|
25
|
+
}), At = Object.freeze({
|
|
26
|
+
mode: "none"
|
|
27
|
+
}), $t = Object.freeze({
|
|
28
28
|
default: Object.freeze({
|
|
29
29
|
border: Object.freeze({
|
|
30
30
|
width: 0,
|
|
@@ -49,17 +49,17 @@ const St = Object.freeze({
|
|
|
49
49
|
focused: Object.freeze({
|
|
50
50
|
shadow: "none"
|
|
51
51
|
})
|
|
52
|
-
}),
|
|
52
|
+
}), jt = 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
|
+
}), kt = Object.freeze({
|
|
60
60
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
61
61
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
62
|
-
}),
|
|
62
|
+
}), Nt = Object.freeze({
|
|
63
63
|
mode: "adaptive",
|
|
64
64
|
// Default to adaptive sizing
|
|
65
65
|
minSize: 50,
|
|
@@ -71,16 +71,16 @@ const St = Object.freeze({
|
|
|
71
71
|
// No variance by default
|
|
72
72
|
max: 1
|
|
73
73
|
})
|
|
74
|
-
}),
|
|
74
|
+
}), Gt = Object.freeze({
|
|
75
75
|
mode: "none",
|
|
76
76
|
range: Object.freeze({
|
|
77
77
|
min: -15,
|
|
78
78
|
max: 15
|
|
79
79
|
})
|
|
80
|
-
}),
|
|
81
|
-
sizing:
|
|
82
|
-
rotation:
|
|
83
|
-
}),
|
|
80
|
+
}), Dt = Object.freeze({
|
|
81
|
+
sizing: Nt,
|
|
82
|
+
rotation: Gt
|
|
83
|
+
}), y = Object.freeze({
|
|
84
84
|
// Unified loader configuration
|
|
85
85
|
loader: Object.freeze({
|
|
86
86
|
type: "googleDrive",
|
|
@@ -105,13 +105,13 @@ const St = Object.freeze({
|
|
|
105
105
|
})
|
|
106
106
|
}),
|
|
107
107
|
// Image sizing and rotation configuration
|
|
108
|
-
image:
|
|
108
|
+
image: Dt,
|
|
109
109
|
// Pattern-based layout configuration
|
|
110
110
|
layout: Object.freeze({
|
|
111
111
|
algorithm: "radial",
|
|
112
112
|
scaleDecay: 0,
|
|
113
113
|
// No decay by default (0-1 for radial/spiral)
|
|
114
|
-
responsive:
|
|
114
|
+
responsive: kt,
|
|
115
115
|
targetCoverage: 0.6,
|
|
116
116
|
// Target 60% of container area
|
|
117
117
|
densityFactor: 1,
|
|
@@ -171,9 +171,9 @@ const St = Object.freeze({
|
|
|
171
171
|
}),
|
|
172
172
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
173
173
|
// smooth deceleration
|
|
174
|
-
path:
|
|
175
|
-
rotation:
|
|
176
|
-
scale:
|
|
174
|
+
path: Tt,
|
|
175
|
+
rotation: Rt,
|
|
176
|
+
scale: At
|
|
177
177
|
})
|
|
178
178
|
}),
|
|
179
179
|
// Pattern-based interaction configuration
|
|
@@ -231,54 +231,54 @@ const St = Object.freeze({
|
|
|
231
231
|
})
|
|
232
232
|
}),
|
|
233
233
|
// Image styling
|
|
234
|
-
styling:
|
|
234
|
+
styling: $t,
|
|
235
235
|
// Debug mode
|
|
236
236
|
debug: !1
|
|
237
237
|
});
|
|
238
|
-
function rt(
|
|
239
|
-
if (!
|
|
240
|
-
if (!t) return { ...
|
|
241
|
-
const e = { ...
|
|
242
|
-
return t.border !== void 0 && (e.border = { ...
|
|
238
|
+
function rt(o, t) {
|
|
239
|
+
if (!o) return t || {};
|
|
240
|
+
if (!t) return { ...o };
|
|
241
|
+
const e = { ...o };
|
|
242
|
+
return t.border !== void 0 && (e.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
|
|
243
243
|
}
|
|
244
|
-
function
|
|
245
|
-
if (!t) return { ...
|
|
246
|
-
const e = rt(
|
|
247
|
-
rt(e,
|
|
244
|
+
function Wt(o, t) {
|
|
245
|
+
if (!t) return { ...o };
|
|
246
|
+
const e = rt(o.default, t.default), i = rt(
|
|
247
|
+
rt(e, o.hover),
|
|
248
248
|
t.hover
|
|
249
|
-
),
|
|
250
|
-
rt(e,
|
|
249
|
+
), n = rt(
|
|
250
|
+
rt(e, o.focused),
|
|
251
251
|
t.focused
|
|
252
252
|
);
|
|
253
253
|
return {
|
|
254
254
|
default: e,
|
|
255
255
|
hover: i,
|
|
256
|
-
focused:
|
|
256
|
+
focused: n
|
|
257
257
|
};
|
|
258
258
|
}
|
|
259
|
-
function
|
|
260
|
-
var i,
|
|
261
|
-
if (!t) return { ...
|
|
262
|
-
const e = { ...
|
|
259
|
+
function qt(o, t) {
|
|
260
|
+
var i, n, s, r, a, h, l, u;
|
|
261
|
+
if (!t) return { ...o };
|
|
262
|
+
const e = { ...o };
|
|
263
263
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
264
|
-
...
|
|
264
|
+
...o.sizing,
|
|
265
265
|
...t.sizing
|
|
266
266
|
}, t.sizing.variance)) {
|
|
267
|
-
const
|
|
268
|
-
e.sizing.variance = { min: d, max:
|
|
267
|
+
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((n = (i = o.sizing) == null ? void 0 : i.variance) == null ? void 0 : n.min) ?? 1, m = c.max !== void 0 && c.max >= 1 && c.max <= 1.75 ? c.max : ((r = (s = o.sizing) == null ? void 0 : s.variance) == null ? void 0 : r.max) ?? 1;
|
|
268
|
+
e.sizing.variance = { min: d, max: m };
|
|
269
269
|
}
|
|
270
270
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
271
|
-
...
|
|
271
|
+
...o.rotation,
|
|
272
272
|
...t.rotation
|
|
273
273
|
}, t.rotation.range)) {
|
|
274
|
-
const
|
|
275
|
-
e.rotation.range = { min: d, max:
|
|
274
|
+
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (a = o.rotation) == null ? void 0 : a.range) == null ? void 0 : h.min) ?? -15, m = c.max !== void 0 && c.max >= 0 && c.max <= 180 ? c.max : ((u = (l = o.rotation) == null ? void 0 : l.range) == null ? void 0 : u.max) ?? 15;
|
|
275
|
+
e.rotation.range = { min: d, max: m };
|
|
276
276
|
}
|
|
277
277
|
return e;
|
|
278
278
|
}
|
|
279
|
-
function
|
|
279
|
+
function Yt(o) {
|
|
280
280
|
var e;
|
|
281
|
-
const t = (e =
|
|
281
|
+
const t = (e = o.layout) == null ? void 0 : e.rotation;
|
|
282
282
|
if (t && "enabled" in t)
|
|
283
283
|
return {
|
|
284
284
|
rotation: {
|
|
@@ -287,9 +287,9 @@ function Nt(n) {
|
|
|
287
287
|
}
|
|
288
288
|
};
|
|
289
289
|
}
|
|
290
|
-
function
|
|
290
|
+
function Xt(o) {
|
|
291
291
|
var e, i;
|
|
292
|
-
const t = (i = (e =
|
|
292
|
+
const t = (i = (e = o.layout) == null ? void 0 : e.sizing) == null ? void 0 : i.variance;
|
|
293
293
|
if (t)
|
|
294
294
|
return {
|
|
295
295
|
sizing: {
|
|
@@ -299,111 +299,111 @@ function qt(n) {
|
|
|
299
299
|
}
|
|
300
300
|
};
|
|
301
301
|
}
|
|
302
|
-
function
|
|
302
|
+
function Bt(o = {}) {
|
|
303
303
|
var s;
|
|
304
|
-
const t =
|
|
305
|
-
let i =
|
|
304
|
+
const t = Yt(o), e = Xt(o);
|
|
305
|
+
let i = o.image;
|
|
306
306
|
(t || e) && (i = {
|
|
307
307
|
...e || {},
|
|
308
308
|
...t || {},
|
|
309
309
|
...i
|
|
310
|
-
}, i.rotation && (t != null && t.rotation) && ((s =
|
|
310
|
+
}, i.rotation && (t != null && t.rotation) && ((s = o.image) != null && s.rotation) && (i.rotation = {
|
|
311
311
|
...t.rotation,
|
|
312
|
-
...
|
|
312
|
+
...o.image.rotation
|
|
313
313
|
}));
|
|
314
|
-
const
|
|
315
|
-
loader: { ...
|
|
316
|
-
image:
|
|
317
|
-
layout: { ...
|
|
318
|
-
animation: { ...
|
|
319
|
-
interaction: { ...
|
|
320
|
-
rendering: { ...
|
|
321
|
-
styling:
|
|
322
|
-
debug:
|
|
314
|
+
const n = {
|
|
315
|
+
loader: { ...y.loader },
|
|
316
|
+
image: qt(Dt, i),
|
|
317
|
+
layout: { ...y.layout },
|
|
318
|
+
animation: { ...y.animation },
|
|
319
|
+
interaction: { ...y.interaction },
|
|
320
|
+
rendering: { ...y.rendering },
|
|
321
|
+
styling: Wt($t, o.styling),
|
|
322
|
+
debug: y.debug
|
|
323
323
|
};
|
|
324
|
-
return
|
|
325
|
-
...
|
|
326
|
-
...
|
|
327
|
-
},
|
|
328
|
-
...
|
|
329
|
-
...
|
|
330
|
-
sources:
|
|
331
|
-
allowedExtensions:
|
|
332
|
-
}),
|
|
333
|
-
...
|
|
334
|
-
...
|
|
335
|
-
sources:
|
|
336
|
-
allowedExtensions:
|
|
337
|
-
})),
|
|
338
|
-
...
|
|
339
|
-
...
|
|
340
|
-
},
|
|
341
|
-
...
|
|
342
|
-
mobile:
|
|
343
|
-
tablet:
|
|
344
|
-
}),
|
|
345
|
-
...
|
|
346
|
-
...
|
|
347
|
-
})),
|
|
348
|
-
...
|
|
349
|
-
...
|
|
350
|
-
},
|
|
351
|
-
...
|
|
352
|
-
...
|
|
353
|
-
}),
|
|
354
|
-
...
|
|
355
|
-
...
|
|
356
|
-
}),
|
|
357
|
-
...
|
|
358
|
-
...
|
|
359
|
-
}),
|
|
360
|
-
...
|
|
361
|
-
...
|
|
362
|
-
start:
|
|
363
|
-
...
|
|
364
|
-
...
|
|
365
|
-
circular:
|
|
366
|
-
} :
|
|
367
|
-
timing:
|
|
368
|
-
path:
|
|
369
|
-
rotation:
|
|
370
|
-
scale:
|
|
371
|
-
})),
|
|
372
|
-
...
|
|
373
|
-
...
|
|
374
|
-
},
|
|
375
|
-
...
|
|
376
|
-
...
|
|
377
|
-
}),
|
|
378
|
-
...
|
|
379
|
-
...
|
|
380
|
-
}),
|
|
381
|
-
...
|
|
382
|
-
...
|
|
383
|
-
})),
|
|
384
|
-
...
|
|
385
|
-
...
|
|
386
|
-
},
|
|
387
|
-
...
|
|
388
|
-
...
|
|
389
|
-
breakpoints:
|
|
390
|
-
mobileDetection:
|
|
391
|
-
}),
|
|
392
|
-
...
|
|
393
|
-
...
|
|
394
|
-
}),
|
|
395
|
-
...
|
|
396
|
-
...
|
|
397
|
-
})),
|
|
324
|
+
return o.loader && (n.loader = {
|
|
325
|
+
...y.loader,
|
|
326
|
+
...o.loader
|
|
327
|
+
}, o.loader.googleDrive && (n.loader.googleDrive = {
|
|
328
|
+
...y.loader.googleDrive,
|
|
329
|
+
...o.loader.googleDrive,
|
|
330
|
+
sources: o.loader.googleDrive.sources || y.loader.googleDrive.sources,
|
|
331
|
+
allowedExtensions: o.loader.googleDrive.allowedExtensions || y.loader.googleDrive.allowedExtensions
|
|
332
|
+
}), o.loader.static && (n.loader.static = {
|
|
333
|
+
...y.loader.static,
|
|
334
|
+
...o.loader.static,
|
|
335
|
+
sources: o.loader.static.sources || y.loader.static.sources,
|
|
336
|
+
allowedExtensions: o.loader.static.allowedExtensions || y.loader.static.allowedExtensions
|
|
337
|
+
})), o.layout && (n.layout = {
|
|
338
|
+
...y.layout,
|
|
339
|
+
...o.layout
|
|
340
|
+
}, o.layout.responsive && (n.layout.responsive = {
|
|
341
|
+
...y.layout.responsive,
|
|
342
|
+
mobile: o.layout.responsive.mobile ? { ...y.layout.responsive.mobile, ...o.layout.responsive.mobile } : y.layout.responsive.mobile,
|
|
343
|
+
tablet: o.layout.responsive.tablet ? { ...y.layout.responsive.tablet, ...o.layout.responsive.tablet } : y.layout.responsive.tablet
|
|
344
|
+
}), o.layout.spacing && (n.layout.spacing = {
|
|
345
|
+
...y.layout.spacing,
|
|
346
|
+
...o.layout.spacing
|
|
347
|
+
})), o.animation && (n.animation = {
|
|
348
|
+
...y.animation,
|
|
349
|
+
...o.animation
|
|
350
|
+
}, o.animation.easing && (n.animation.easing = {
|
|
351
|
+
...y.animation.easing,
|
|
352
|
+
...o.animation.easing
|
|
353
|
+
}), o.animation.queue && (n.animation.queue = {
|
|
354
|
+
...y.animation.queue,
|
|
355
|
+
...o.animation.queue
|
|
356
|
+
}), o.animation.performance && (n.animation.performance = {
|
|
357
|
+
...y.animation.performance,
|
|
358
|
+
...o.animation.performance
|
|
359
|
+
}), o.animation.entry && (n.animation.entry = {
|
|
360
|
+
...y.animation.entry,
|
|
361
|
+
...o.animation.entry,
|
|
362
|
+
start: o.animation.entry.start ? {
|
|
363
|
+
...y.animation.entry.start,
|
|
364
|
+
...o.animation.entry.start,
|
|
365
|
+
circular: o.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...o.animation.entry.start.circular } : y.animation.entry.start.circular
|
|
366
|
+
} : y.animation.entry.start,
|
|
367
|
+
timing: o.animation.entry.timing ? { ...y.animation.entry.timing, ...o.animation.entry.timing } : y.animation.entry.timing,
|
|
368
|
+
path: o.animation.entry.path ? { ...Tt, ...o.animation.entry.path } : y.animation.entry.path,
|
|
369
|
+
rotation: o.animation.entry.rotation ? { ...Rt, ...o.animation.entry.rotation } : y.animation.entry.rotation,
|
|
370
|
+
scale: o.animation.entry.scale ? { ...At, ...o.animation.entry.scale } : y.animation.entry.scale
|
|
371
|
+
})), o.interaction && (n.interaction = {
|
|
372
|
+
...y.interaction,
|
|
373
|
+
...o.interaction
|
|
374
|
+
}, o.interaction.focus && (n.interaction.focus = {
|
|
375
|
+
...y.interaction.focus,
|
|
376
|
+
...o.interaction.focus
|
|
377
|
+
}), o.interaction.navigation && (n.interaction.navigation = {
|
|
378
|
+
...y.interaction.navigation,
|
|
379
|
+
...o.interaction.navigation
|
|
380
|
+
}), o.interaction.gestures && (n.interaction.gestures = {
|
|
381
|
+
...y.interaction.gestures,
|
|
382
|
+
...o.interaction.gestures
|
|
383
|
+
})), o.rendering && (n.rendering = {
|
|
384
|
+
...y.rendering,
|
|
385
|
+
...o.rendering
|
|
386
|
+
}, o.rendering.responsive && (n.rendering.responsive = {
|
|
387
|
+
...y.rendering.responsive,
|
|
388
|
+
...o.rendering.responsive,
|
|
389
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...y.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : y.rendering.responsive.breakpoints,
|
|
390
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : y.rendering.responsive.mobileDetection
|
|
391
|
+
}), o.rendering.ui && (n.rendering.ui = {
|
|
392
|
+
...y.rendering.ui,
|
|
393
|
+
...o.rendering.ui
|
|
394
|
+
}), o.rendering.performance && (n.rendering.performance = {
|
|
395
|
+
...y.rendering.performance,
|
|
396
|
+
...o.rendering.performance
|
|
397
|
+
})), o.debug !== void 0 && (n.debug = o.debug), n;
|
|
398
398
|
}
|
|
399
|
-
function
|
|
400
|
-
return { ...
|
|
399
|
+
function Vt(o, t) {
|
|
400
|
+
return { ...o ? zt[o] : zt.playful, ...t };
|
|
401
401
|
}
|
|
402
|
-
function
|
|
403
|
-
return { ...
|
|
402
|
+
function Kt(o, t) {
|
|
403
|
+
return { ...o ? Ft[o] : Ft.gentle, ...t };
|
|
404
404
|
}
|
|
405
|
-
function
|
|
406
|
-
return { ...
|
|
405
|
+
function Zt(o, t) {
|
|
406
|
+
return { ...o ? Ct[o] : Ct.gentle, ...t };
|
|
407
407
|
}
|
|
408
408
|
class Jt {
|
|
409
409
|
constructor(t) {
|
|
@@ -416,8 +416,8 @@ class Jt {
|
|
|
416
416
|
buildTransformString(t) {
|
|
417
417
|
const e = ["translate(-50%, -50%)"];
|
|
418
418
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
419
|
-
const i = t.x ?? 0,
|
|
420
|
-
e.push(`translate(${i}px, ${
|
|
419
|
+
const i = t.x ?? 0, n = t.y ?? 0;
|
|
420
|
+
e.push(`translate(${i}px, ${n}px)`);
|
|
421
421
|
}
|
|
422
422
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && e.push(`scale(${t.scale})`), e.join(" ");
|
|
423
423
|
}
|
|
@@ -430,9 +430,9 @@ class Jt {
|
|
|
430
430
|
* @param easing - CSS easing function (optional)
|
|
431
431
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
432
432
|
*/
|
|
433
|
-
animateTransformCancellable(t, e, i,
|
|
433
|
+
animateTransformCancellable(t, e, i, n = null, s = null) {
|
|
434
434
|
this.cancelAllAnimations(t);
|
|
435
|
-
const
|
|
435
|
+
const r = n ?? this.config.duration, a = s ?? this.config.easing.default, h = this.buildTransformString(e), l = this.buildTransformString(i);
|
|
436
436
|
t.style.transition = "none";
|
|
437
437
|
const u = t.animate(
|
|
438
438
|
[
|
|
@@ -440,25 +440,25 @@ class Jt {
|
|
|
440
440
|
{ transform: l }
|
|
441
441
|
],
|
|
442
442
|
{
|
|
443
|
-
duration:
|
|
443
|
+
duration: r,
|
|
444
444
|
easing: a,
|
|
445
445
|
fill: "forwards"
|
|
446
446
|
// Keep final state after animation
|
|
447
447
|
}
|
|
448
|
-
),
|
|
448
|
+
), c = {
|
|
449
449
|
id: `anim-${++this.animationIdCounter}`,
|
|
450
450
|
element: t,
|
|
451
451
|
animation: u,
|
|
452
452
|
fromState: e,
|
|
453
453
|
toState: i,
|
|
454
454
|
startTime: performance.now(),
|
|
455
|
-
duration:
|
|
455
|
+
duration: r
|
|
456
456
|
};
|
|
457
|
-
return this.activeAnimations.set(t,
|
|
457
|
+
return this.activeAnimations.set(t, c), u.finished.then(() => {
|
|
458
458
|
t.style.transform = l, this.activeAnimations.delete(t);
|
|
459
459
|
}).catch(() => {
|
|
460
460
|
this.activeAnimations.delete(t);
|
|
461
|
-
}),
|
|
461
|
+
}), c;
|
|
462
462
|
}
|
|
463
463
|
/**
|
|
464
464
|
* Cancel an active animation
|
|
@@ -469,13 +469,13 @@ class Jt {
|
|
|
469
469
|
cancelAnimation(t, e = !0) {
|
|
470
470
|
const i = this.getCurrentTransform(t.element);
|
|
471
471
|
if (t.animation.cancel(), e) {
|
|
472
|
-
const
|
|
472
|
+
const n = this.buildTransformString({
|
|
473
473
|
x: i.x,
|
|
474
474
|
y: i.y,
|
|
475
475
|
rotation: i.rotation,
|
|
476
476
|
scale: i.scale
|
|
477
477
|
});
|
|
478
|
-
t.element.style.transform =
|
|
478
|
+
t.element.style.transform = n;
|
|
479
479
|
}
|
|
480
480
|
return this.activeAnimations.delete(t.element), i;
|
|
481
481
|
}
|
|
@@ -488,8 +488,8 @@ class Jt {
|
|
|
488
488
|
const e = this.activeAnimations.get(t);
|
|
489
489
|
e && this.cancelAnimation(e, !1);
|
|
490
490
|
const i = t.getAnimations();
|
|
491
|
-
for (const
|
|
492
|
-
|
|
491
|
+
for (const n of i)
|
|
492
|
+
n.cancel();
|
|
493
493
|
}
|
|
494
494
|
/**
|
|
495
495
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -501,8 +501,8 @@ class Jt {
|
|
|
501
501
|
const i = getComputedStyle(t).transform;
|
|
502
502
|
if (i === "none" || !i)
|
|
503
503
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
504
|
-
const
|
|
505
|
-
return { x: a, y: h, rotation:
|
|
504
|
+
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, h = n.f;
|
|
505
|
+
return { x: a, y: h, rotation: r, scale: s };
|
|
506
506
|
}
|
|
507
507
|
/**
|
|
508
508
|
* Check if an element has an active animation
|
|
@@ -528,12 +528,12 @@ class Jt {
|
|
|
528
528
|
* @param easing - CSS easing function (optional)
|
|
529
529
|
* @returns Promise that resolves when animation completes
|
|
530
530
|
*/
|
|
531
|
-
animateTransform(t, e, i = null,
|
|
531
|
+
animateTransform(t, e, i = null, n = null) {
|
|
532
532
|
return new Promise((s) => {
|
|
533
|
-
const
|
|
534
|
-
t.style.transition = `transform ${
|
|
533
|
+
const r = i ?? this.config.duration, a = n ?? this.config.easing.default;
|
|
534
|
+
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
|
|
535
535
|
s();
|
|
536
|
-
},
|
|
536
|
+
}, r);
|
|
537
537
|
});
|
|
538
538
|
}
|
|
539
539
|
/**
|
|
@@ -561,161 +561,161 @@ class Jt {
|
|
|
561
561
|
return new Promise((e) => setTimeout(e, t));
|
|
562
562
|
}
|
|
563
563
|
}
|
|
564
|
-
function st(
|
|
565
|
-
return
|
|
564
|
+
function st(o, t, e) {
|
|
565
|
+
return o + (t - o) * e;
|
|
566
566
|
}
|
|
567
|
-
function
|
|
568
|
-
const { overshoot:
|
|
569
|
-
let u = 0,
|
|
567
|
+
function Qt(o, t, e, i) {
|
|
568
|
+
const { overshoot: n, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, l = te(s, r);
|
|
569
|
+
let u = 0, c = 0, d = 1, m = n, b = !1;
|
|
570
570
|
for (let g = 0; g < l.length; g++)
|
|
571
|
-
if (
|
|
572
|
-
|
|
571
|
+
if (o <= l[g].time) {
|
|
572
|
+
c = g === 0 ? 0 : l[g - 1].time, d = l[g].time, m = l[g].overshoot, b = l[g].isOvershoot;
|
|
573
573
|
break;
|
|
574
574
|
}
|
|
575
|
-
const p = (
|
|
576
|
-
if (
|
|
577
|
-
u = 1 +
|
|
578
|
-
else if (
|
|
575
|
+
const p = (o - c) / (d - c);
|
|
576
|
+
if (b)
|
|
577
|
+
u = 1 + m * gt(p);
|
|
578
|
+
else if (c === 0)
|
|
579
579
|
u = gt(p);
|
|
580
580
|
else {
|
|
581
581
|
const g = l.find(
|
|
582
|
-
(v, w) => v.time >
|
|
583
|
-
),
|
|
584
|
-
u = st(
|
|
582
|
+
(v, w) => v.time > c && w > 0 && l[w - 1].isOvershoot
|
|
583
|
+
), f = 1 + ((g == null ? void 0 : g.overshoot) || m);
|
|
584
|
+
u = st(f, 1, gt(p));
|
|
585
585
|
}
|
|
586
586
|
return {
|
|
587
587
|
x: t.x + a * u,
|
|
588
588
|
y: t.y + h * u
|
|
589
589
|
};
|
|
590
590
|
}
|
|
591
|
-
function
|
|
591
|
+
function te(o, t) {
|
|
592
592
|
const e = [];
|
|
593
593
|
let i = 0.6;
|
|
594
594
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
595
|
-
let
|
|
596
|
-
const
|
|
597
|
-
for (let a = 0; a <
|
|
598
|
-
i +=
|
|
595
|
+
let n = 0.15;
|
|
596
|
+
const r = 0.4 / (o * 2);
|
|
597
|
+
for (let a = 0; a < o; a++)
|
|
598
|
+
i += r, e.push({ time: i, overshoot: n, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
599
599
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
600
600
|
}
|
|
601
|
-
function
|
|
602
|
-
const { stiffness:
|
|
601
|
+
function ee(o, t, e, i) {
|
|
602
|
+
const { stiffness: n, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, l = e.y - t.y, u = Math.sqrt(n / r), c = s / (2 * Math.sqrt(n * r));
|
|
603
603
|
let d;
|
|
604
|
-
if (
|
|
605
|
-
const
|
|
606
|
-
d = 1 -
|
|
604
|
+
if (c < 1) {
|
|
605
|
+
const m = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u * o * 3), p = Math.cos(m * o * a * Math.PI);
|
|
606
|
+
d = 1 - b * p;
|
|
607
607
|
} else
|
|
608
|
-
d = 1 - Math.exp(-u *
|
|
608
|
+
d = 1 - Math.exp(-u * o * 3);
|
|
609
609
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
610
610
|
x: t.x + h * d,
|
|
611
611
|
y: t.y + l * d
|
|
612
612
|
};
|
|
613
613
|
}
|
|
614
|
-
function
|
|
615
|
-
const { amplitude:
|
|
614
|
+
function ie(o, t, e, i) {
|
|
615
|
+
const { amplitude: n, frequency: s, decay: r, decayRate: a, phase: h } = i, l = e.x - t.x, u = e.y - t.y, c = Math.sqrt(l * l + u * u), d = c > 0 ? -u / c : 0, m = c > 0 ? l / c : 1, b = s * Math.PI * 2 * o + h, p = r ? Math.pow(1 - o, a) : 1, g = n * Math.sin(b) * p, f = ne(o);
|
|
616
616
|
return {
|
|
617
|
-
x: st(t.x, e.x,
|
|
618
|
-
y: st(t.y, e.y,
|
|
617
|
+
x: st(t.x, e.x, f) + g * d,
|
|
618
|
+
y: st(t.y, e.y, f) + g * m
|
|
619
619
|
};
|
|
620
620
|
}
|
|
621
|
-
function gt(
|
|
622
|
-
return 1 - (1 -
|
|
621
|
+
function gt(o) {
|
|
622
|
+
return 1 - (1 - o) * (1 - o);
|
|
623
623
|
}
|
|
624
|
-
function
|
|
625
|
-
return 1 - Math.pow(1 -
|
|
624
|
+
function ne(o) {
|
|
625
|
+
return 1 - Math.pow(1 - o, 3);
|
|
626
626
|
}
|
|
627
|
-
function
|
|
628
|
-
const { amplitude: i, frequency:
|
|
627
|
+
function oe(o, t, e) {
|
|
628
|
+
const { amplitude: i, frequency: n, decay: s } = e, r = Math.sin(o * n * Math.PI * 2), a = s ? Math.pow(1 - o, 2) : 1, h = i * r * a;
|
|
629
629
|
return t + h;
|
|
630
630
|
}
|
|
631
|
-
function
|
|
632
|
-
const { overshoot: i, bounces:
|
|
631
|
+
function se(o, t, e) {
|
|
632
|
+
const { overshoot: i, bounces: n } = e, s = [];
|
|
633
633
|
s.push({ time: 0.5, scale: i });
|
|
634
|
-
let
|
|
635
|
-
const a = 0.5, l = 0.5 / (
|
|
634
|
+
let r = i;
|
|
635
|
+
const a = 0.5, l = 0.5 / (n * 2);
|
|
636
636
|
let u = 0.5;
|
|
637
|
-
for (let d = 0; d <
|
|
638
|
-
const
|
|
639
|
-
u += l, s.push({ time: u, scale:
|
|
637
|
+
for (let d = 0; d < n; d++) {
|
|
638
|
+
const m = 1 - (r - 1) * a;
|
|
639
|
+
u += l, s.push({ time: u, scale: m }), r = 1 + (r - 1) * a * a, u += l, d < n - 1 && s.push({ time: u, scale: r });
|
|
640
640
|
}
|
|
641
641
|
s.push({ time: 1, scale: 1 });
|
|
642
|
-
let
|
|
642
|
+
let c = 1;
|
|
643
643
|
for (let d = 0; d < s.length; d++)
|
|
644
|
-
if (
|
|
645
|
-
const
|
|
646
|
-
|
|
644
|
+
if (o <= s[d].time) {
|
|
645
|
+
const m = d === 0 ? 0 : s[d - 1].time, b = d === 0 ? 1 : s[d - 1].scale, p = (o - m) / (s[d].time - m), g = gt(p);
|
|
646
|
+
c = b + (s[d].scale - b) * g;
|
|
647
647
|
break;
|
|
648
648
|
}
|
|
649
|
-
return
|
|
649
|
+
return c * t;
|
|
650
650
|
}
|
|
651
|
-
function
|
|
651
|
+
function ae(o) {
|
|
652
652
|
const {
|
|
653
653
|
element: t,
|
|
654
654
|
startPosition: e,
|
|
655
655
|
endPosition: i,
|
|
656
|
-
pathConfig:
|
|
656
|
+
pathConfig: n,
|
|
657
657
|
duration: s,
|
|
658
|
-
imageWidth:
|
|
658
|
+
imageWidth: r,
|
|
659
659
|
imageHeight: a,
|
|
660
660
|
rotation: h,
|
|
661
661
|
scale: l,
|
|
662
662
|
onComplete: u,
|
|
663
|
-
rotationConfig:
|
|
663
|
+
rotationConfig: c,
|
|
664
664
|
startRotation: d,
|
|
665
|
-
scaleConfig:
|
|
666
|
-
startScale:
|
|
667
|
-
} =
|
|
668
|
-
if ((p === "linear" || p === "arc") && !w && !(E ||
|
|
665
|
+
scaleConfig: m,
|
|
666
|
+
startScale: b
|
|
667
|
+
} = o, p = n.type, g = d !== void 0 && d !== h, f = (c == null ? void 0 : c.mode) === "wobble", v = (c == null ? void 0 : c.wobble) || { amplitude: 15, frequency: 3, decay: !0 }, w = g || f, E = b !== void 0 && b !== l, R = (m == null ? void 0 : m.mode) === "pop", x = (m == null ? void 0 : m.pop) || { overshoot: 1.2, bounces: 1 };
|
|
668
|
+
if ((p === "linear" || p === "arc") && !w && !(E || R)) {
|
|
669
669
|
u && u();
|
|
670
670
|
return;
|
|
671
671
|
}
|
|
672
|
-
const j = performance.now(),
|
|
673
|
-
function
|
|
674
|
-
const F =
|
|
675
|
-
let
|
|
672
|
+
const j = performance.now(), U = -r / 2, D = -a / 2;
|
|
673
|
+
function P(k) {
|
|
674
|
+
const F = k - j, S = Math.min(F / s, 1);
|
|
675
|
+
let A;
|
|
676
676
|
switch (p) {
|
|
677
677
|
case "bounce": {
|
|
678
|
-
const _ =
|
|
679
|
-
|
|
680
|
-
|
|
678
|
+
const _ = Vt(
|
|
679
|
+
n.bouncePreset,
|
|
680
|
+
n.bounce
|
|
681
681
|
);
|
|
682
|
-
|
|
682
|
+
A = Qt(S, e, i, _);
|
|
683
683
|
break;
|
|
684
684
|
}
|
|
685
685
|
case "elastic": {
|
|
686
|
-
const _ =
|
|
687
|
-
|
|
688
|
-
|
|
686
|
+
const _ = Kt(
|
|
687
|
+
n.elasticPreset,
|
|
688
|
+
n.elastic
|
|
689
689
|
);
|
|
690
|
-
|
|
690
|
+
A = ee(S, e, i, _);
|
|
691
691
|
break;
|
|
692
692
|
}
|
|
693
693
|
case "wave": {
|
|
694
|
-
const _ =
|
|
695
|
-
|
|
696
|
-
|
|
694
|
+
const _ = Zt(
|
|
695
|
+
n.wavePreset,
|
|
696
|
+
n.wave
|
|
697
697
|
);
|
|
698
|
-
|
|
698
|
+
A = ie(S, e, i, _);
|
|
699
699
|
break;
|
|
700
700
|
}
|
|
701
701
|
default:
|
|
702
|
-
|
|
702
|
+
A = {
|
|
703
703
|
x: st(e.x, i.x, S),
|
|
704
704
|
y: st(e.y, i.y, S)
|
|
705
705
|
};
|
|
706
706
|
}
|
|
707
|
-
const
|
|
708
|
-
let
|
|
709
|
-
|
|
707
|
+
const O = A.x - i.x, z = A.y - i.y;
|
|
708
|
+
let T;
|
|
709
|
+
f ? T = oe(S, h, v) : g ? T = st(d, h, S) : T = h;
|
|
710
710
|
let M;
|
|
711
|
-
|
|
711
|
+
R ? M = se(S, l, x) : E ? M = st(b, l, S) : M = l, t.style.transform = `translate(${U}px, ${D}px) translate(${O}px, ${z}px) rotate(${T}deg) scale(${M})`, S < 1 ? requestAnimationFrame(P) : (t.style.transform = `translate(${U}px, ${D}px) rotate(${h}deg) scale(${l})`, u && u());
|
|
712
712
|
}
|
|
713
|
-
requestAnimationFrame(
|
|
713
|
+
requestAnimationFrame(P);
|
|
714
714
|
}
|
|
715
|
-
function
|
|
716
|
-
return
|
|
715
|
+
function re(o) {
|
|
716
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
717
717
|
}
|
|
718
|
-
const
|
|
718
|
+
const ce = {
|
|
719
719
|
radial: "center",
|
|
720
720
|
spiral: "center",
|
|
721
721
|
grid: "top",
|
|
@@ -723,22 +723,22 @@ const ae = {
|
|
|
723
723
|
random: "nearest-edge",
|
|
724
724
|
wave: "left"
|
|
725
725
|
};
|
|
726
|
-
class
|
|
726
|
+
class le {
|
|
727
727
|
constructor(t, e) {
|
|
728
|
-
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
728
|
+
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || Tt, this.rotationConfig = t.rotation || Rt, this.scaleConfig = t.scale || At;
|
|
729
729
|
}
|
|
730
730
|
/**
|
|
731
731
|
* Get the effective start position, considering layout-aware defaults
|
|
732
732
|
*/
|
|
733
733
|
resolveStartPosition() {
|
|
734
|
-
return this.config.start.position ? this.config.start.position :
|
|
734
|
+
return this.config.start.position ? this.config.start.position : ce[this.layoutAlgorithm] || "nearest-edge";
|
|
735
735
|
}
|
|
736
736
|
/**
|
|
737
737
|
* Calculate the starting position for an image's entry animation
|
|
738
738
|
*/
|
|
739
|
-
calculateStartPosition(t, e, i,
|
|
740
|
-
const
|
|
741
|
-
switch (
|
|
739
|
+
calculateStartPosition(t, e, i, n, s) {
|
|
740
|
+
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
741
|
+
switch (r) {
|
|
742
742
|
case "nearest-edge":
|
|
743
743
|
return this.calculateNearestEdge(t, e, i, a);
|
|
744
744
|
case "top":
|
|
@@ -758,7 +758,7 @@ class re {
|
|
|
758
758
|
t,
|
|
759
759
|
e,
|
|
760
760
|
i,
|
|
761
|
-
|
|
761
|
+
n,
|
|
762
762
|
s
|
|
763
763
|
);
|
|
764
764
|
default:
|
|
@@ -768,39 +768,39 @@ class re {
|
|
|
768
768
|
/**
|
|
769
769
|
* Calculate start position from the nearest edge (current default behavior)
|
|
770
770
|
*/
|
|
771
|
-
calculateNearestEdge(t, e, i,
|
|
772
|
-
const s = t.x,
|
|
773
|
-
let d = t.x,
|
|
774
|
-
return
|
|
771
|
+
calculateNearestEdge(t, e, i, n) {
|
|
772
|
+
const s = t.x, r = t.y, a = s, h = i.width - s, l = r, u = i.height - r, c = Math.min(a, h, l, u);
|
|
773
|
+
let d = t.x, m = t.y;
|
|
774
|
+
return c === a ? d = -(e.width + n) : c === h ? d = i.width + n : c === l ? m = -(e.height + n) : m = i.height + n, { x: d, y: m };
|
|
775
775
|
}
|
|
776
776
|
/**
|
|
777
777
|
* Calculate start position from a specific edge
|
|
778
778
|
*/
|
|
779
|
-
calculateEdgePosition(t, e, i,
|
|
780
|
-
let
|
|
779
|
+
calculateEdgePosition(t, e, i, n, s) {
|
|
780
|
+
let r = e.x, a = e.y;
|
|
781
781
|
switch (t) {
|
|
782
782
|
case "top":
|
|
783
783
|
a = -(i.height + s);
|
|
784
784
|
break;
|
|
785
785
|
case "bottom":
|
|
786
|
-
a =
|
|
786
|
+
a = n.height + s;
|
|
787
787
|
break;
|
|
788
788
|
case "left":
|
|
789
|
-
|
|
789
|
+
r = -(i.width + s);
|
|
790
790
|
break;
|
|
791
791
|
case "right":
|
|
792
|
-
|
|
792
|
+
r = n.width + s;
|
|
793
793
|
break;
|
|
794
794
|
}
|
|
795
|
-
return { x:
|
|
795
|
+
return { x: r, y: a };
|
|
796
796
|
}
|
|
797
797
|
/**
|
|
798
798
|
* Calculate start position from center with scale animation
|
|
799
799
|
*/
|
|
800
800
|
calculateCenterPosition(t, e, i) {
|
|
801
|
-
const
|
|
801
|
+
const n = t.width / 2, s = t.height / 2;
|
|
802
802
|
return {
|
|
803
|
-
x:
|
|
803
|
+
x: n,
|
|
804
804
|
y: s,
|
|
805
805
|
useScale: !0
|
|
806
806
|
// Signal to use scale animation from 0
|
|
@@ -809,17 +809,17 @@ class re {
|
|
|
809
809
|
/**
|
|
810
810
|
* Calculate start position from a random edge
|
|
811
811
|
*/
|
|
812
|
-
calculateRandomEdge(t, e, i,
|
|
813
|
-
const s = ["top", "bottom", "left", "right"],
|
|
814
|
-
return this.calculateEdgePosition(
|
|
812
|
+
calculateRandomEdge(t, e, i, n) {
|
|
813
|
+
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
814
|
+
return this.calculateEdgePosition(r, t, e, i, n);
|
|
815
815
|
}
|
|
816
816
|
/**
|
|
817
817
|
* Calculate start position on a circle around the container
|
|
818
818
|
*/
|
|
819
|
-
calculateCircularPosition(t, e, i,
|
|
820
|
-
const
|
|
819
|
+
calculateCircularPosition(t, e, i, n, s) {
|
|
820
|
+
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
821
821
|
let h;
|
|
822
|
-
const l =
|
|
822
|
+
const l = r.radius || "120%";
|
|
823
823
|
if (typeof l == "string" && l.endsWith("%")) {
|
|
824
824
|
const p = parseFloat(l) / 100;
|
|
825
825
|
h = Math.sqrt(
|
|
@@ -828,39 +828,39 @@ class re {
|
|
|
828
828
|
} else
|
|
829
829
|
h = typeof l == "number" ? l : 500;
|
|
830
830
|
let u;
|
|
831
|
-
a === "even" ? u =
|
|
832
|
-
const
|
|
833
|
-
return { x:
|
|
831
|
+
a === "even" ? u = n / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
832
|
+
const c = i.width / 2, d = i.height / 2, m = c + Math.cos(u) * h, b = d + Math.sin(u) * h;
|
|
833
|
+
return { x: m, y: b };
|
|
834
834
|
}
|
|
835
835
|
/**
|
|
836
836
|
* Get animation parameters for an image
|
|
837
837
|
*/
|
|
838
838
|
getAnimationParams(t) {
|
|
839
|
-
const e = this.config.timing.duration, i = this.config.timing.stagger,
|
|
839
|
+
const e = this.config.timing.duration, i = this.config.timing.stagger, n = this.config.easing;
|
|
840
840
|
return {
|
|
841
841
|
startTransform: "",
|
|
842
842
|
// Will be computed by caller based on start position
|
|
843
843
|
duration: e,
|
|
844
844
|
delay: t * i,
|
|
845
|
-
easing:
|
|
845
|
+
easing: n
|
|
846
846
|
};
|
|
847
847
|
}
|
|
848
848
|
/**
|
|
849
849
|
* Build a CSS transform string for the start position
|
|
850
850
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
851
851
|
*/
|
|
852
|
-
buildStartTransform(t, e, i,
|
|
853
|
-
const l = t.x - e.x, u = t.y - e.y,
|
|
854
|
-
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${
|
|
852
|
+
buildStartTransform(t, e, i, n, s, r, a, h) {
|
|
853
|
+
const l = t.x - e.x, u = t.y - e.y, c = a !== void 0 ? a : i, d = h !== void 0 ? h : n, m = s !== void 0 ? -s / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = s !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
|
|
854
|
+
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(${d})`;
|
|
855
855
|
}
|
|
856
856
|
/**
|
|
857
857
|
* Build the final CSS transform string
|
|
858
858
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
859
859
|
*/
|
|
860
|
-
buildFinalTransform(t, e, i,
|
|
861
|
-
if (i !== void 0 &&
|
|
862
|
-
const s = -i / 2,
|
|
863
|
-
return `translate(${s}px, ${
|
|
860
|
+
buildFinalTransform(t, e, i, n) {
|
|
861
|
+
if (i !== void 0 && n !== void 0) {
|
|
862
|
+
const s = -i / 2, r = -n / 2;
|
|
863
|
+
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${e})`;
|
|
864
864
|
}
|
|
865
865
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
|
|
866
866
|
}
|
|
@@ -876,7 +876,7 @@ class re {
|
|
|
876
876
|
* Check if the current path type requires JavaScript animation
|
|
877
877
|
*/
|
|
878
878
|
requiresJSAnimation() {
|
|
879
|
-
return
|
|
879
|
+
return re(this.pathConfig.type);
|
|
880
880
|
}
|
|
881
881
|
/**
|
|
882
882
|
* Get the path configuration
|
|
@@ -926,12 +926,12 @@ class re {
|
|
|
926
926
|
return t + (Math.random() - 0.5) * 60;
|
|
927
927
|
if (typeof i == "number")
|
|
928
928
|
return i;
|
|
929
|
-
const
|
|
930
|
-
return i.min + Math.random() *
|
|
929
|
+
const n = i.max - i.min;
|
|
930
|
+
return i.min + Math.random() * n;
|
|
931
931
|
}
|
|
932
932
|
case "spin": {
|
|
933
|
-
const i = this.rotationConfig.spinCount ?? 1,
|
|
934
|
-
return t + i * 360 *
|
|
933
|
+
const i = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
934
|
+
return t + i * 360 * n;
|
|
935
935
|
}
|
|
936
936
|
case "random":
|
|
937
937
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -978,7 +978,7 @@ class re {
|
|
|
978
978
|
amplitude: 15,
|
|
979
979
|
frequency: 3,
|
|
980
980
|
decay: !0
|
|
981
|
-
}, { amplitude:
|
|
981
|
+
}, { amplitude: n, frequency: s, decay: r } = i, a = Math.sin(t * s * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, l = n * a * h;
|
|
982
982
|
return e + l;
|
|
983
983
|
}
|
|
984
984
|
/**
|
|
@@ -1035,12 +1035,12 @@ class re {
|
|
|
1035
1035
|
const i = this.scaleConfig.pop || {
|
|
1036
1036
|
overshoot: 1.2,
|
|
1037
1037
|
bounces: 1
|
|
1038
|
-
}, { overshoot:
|
|
1038
|
+
}, { overshoot: n, bounces: s } = i, r = this.generateScaleBounceKeyframes(s, n);
|
|
1039
1039
|
let a = e;
|
|
1040
|
-
for (let h = 0; h <
|
|
1041
|
-
if (t <=
|
|
1042
|
-
const l = h === 0 ? 0 :
|
|
1043
|
-
a = u + (
|
|
1040
|
+
for (let h = 0; h < r.length; h++)
|
|
1041
|
+
if (t <= r[h].time) {
|
|
1042
|
+
const l = h === 0 ? 0 : r[h - 1].time, u = h === 0 ? e : r[h - 1].scale, c = (t - l) / (r[h].time - l), d = this.easeOutQuad(c);
|
|
1043
|
+
a = u + (r[h].scale - u) * d;
|
|
1044
1044
|
break;
|
|
1045
1045
|
}
|
|
1046
1046
|
return a * e;
|
|
@@ -1051,12 +1051,12 @@ class re {
|
|
|
1051
1051
|
generateScaleBounceKeyframes(t, e) {
|
|
1052
1052
|
const i = [];
|
|
1053
1053
|
i.push({ time: 0.5, scale: e });
|
|
1054
|
-
let
|
|
1054
|
+
let n = e;
|
|
1055
1055
|
const s = 0.5, a = 0.5 / (t * 2);
|
|
1056
1056
|
let h = 0.5;
|
|
1057
1057
|
for (let l = 0; l < t; l++) {
|
|
1058
|
-
const u = 1 - (
|
|
1059
|
-
h += a, i.push({ time: h, scale: u }),
|
|
1058
|
+
const u = 1 - (n - 1) * s;
|
|
1059
|
+
h += a, i.push({ time: h, scale: u }), n = 1 + (n - 1) * s * s, h += a, l < t - 1 && i.push({ time: h, scale: n });
|
|
1060
1060
|
}
|
|
1061
1061
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1062
1062
|
}
|
|
@@ -1067,7 +1067,7 @@ class re {
|
|
|
1067
1067
|
return 1 - (1 - t) * (1 - t);
|
|
1068
1068
|
}
|
|
1069
1069
|
}
|
|
1070
|
-
class
|
|
1070
|
+
class he {
|
|
1071
1071
|
constructor(t, e = {}) {
|
|
1072
1072
|
this.config = t, this.imageConfig = e;
|
|
1073
1073
|
}
|
|
@@ -1079,20 +1079,20 @@ class ce {
|
|
|
1079
1079
|
* @returns Array of layout objects with position, rotation, scale
|
|
1080
1080
|
*/
|
|
1081
1081
|
generate(t, e, i = {}) {
|
|
1082
|
-
var x, L, j,
|
|
1083
|
-
const
|
|
1084
|
-
for (let
|
|
1085
|
-
const
|
|
1086
|
-
id:
|
|
1087
|
-
x:
|
|
1082
|
+
var x, L, j, U, D, P, k, F, S;
|
|
1083
|
+
const n = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, l = ((x = this.imageConfig.rotation) == null ? void 0 : x.mode) ?? "none", u = ((j = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : j.min) ?? -15, c = ((D = (U = this.imageConfig.rotation) == null ? void 0 : U.range) == null ? void 0 : D.max) ?? 15, d = ((k = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : k.min) ?? 1, m = ((S = (F = this.imageConfig.sizing) == null ? void 0 : F.variance) == null ? void 0 : S.max) ?? 1, b = d !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, v = s - a - g, w = r - a - f, E = a + g, R = a + f;
|
|
1084
|
+
for (let A = 0; A < t; A++) {
|
|
1085
|
+
const O = this.random(E, v), z = this.random(R, w), T = l === "random" ? this.random(u, c) : 0, M = b ? this.random(d, m) : 1, _ = h * M, Z = {
|
|
1086
|
+
id: A,
|
|
1087
|
+
x: O,
|
|
1088
1088
|
y: z,
|
|
1089
|
-
rotation:
|
|
1089
|
+
rotation: T,
|
|
1090
1090
|
scale: M,
|
|
1091
1091
|
baseSize: _
|
|
1092
1092
|
};
|
|
1093
|
-
|
|
1093
|
+
n.push(Z);
|
|
1094
1094
|
}
|
|
1095
|
-
return
|
|
1095
|
+
return n;
|
|
1096
1096
|
}
|
|
1097
1097
|
/**
|
|
1098
1098
|
* Utility: Generate random number between min and max
|
|
@@ -1104,7 +1104,7 @@ class ce {
|
|
|
1104
1104
|
return Math.random() * (e - t) + t;
|
|
1105
1105
|
}
|
|
1106
1106
|
}
|
|
1107
|
-
class
|
|
1107
|
+
class de {
|
|
1108
1108
|
constructor(t, e = {}) {
|
|
1109
1109
|
this.config = t, this.imageConfig = e;
|
|
1110
1110
|
}
|
|
@@ -1116,39 +1116,39 @@ class le {
|
|
|
1116
1116
|
* @returns Array of layout objects with position, rotation, scale
|
|
1117
1117
|
*/
|
|
1118
1118
|
generate(t, e, i = {}) {
|
|
1119
|
-
var L, j,
|
|
1120
|
-
const
|
|
1119
|
+
var L, j, U, D, P, k, F, S, A;
|
|
1120
|
+
const n = [], { width: s, height: r } = e, { debugRadials: a } = this.config, h = i.fixedHeight ?? 200, l = ((L = this.imageConfig.rotation) == null ? void 0 : L.mode) ?? "none", u = ((U = (j = this.imageConfig.rotation) == null ? void 0 : j.range) == null ? void 0 : U.min) ?? -15, c = ((P = (D = this.imageConfig.rotation) == null ? void 0 : D.range) == null ? void 0 : P.max) ?? 15, d = ((F = (k = this.imageConfig.sizing) == null ? void 0 : k.variance) == null ? void 0 : F.min) ?? 1, m = ((A = (S = this.imageConfig.sizing) == null ? void 0 : S.variance) == null ? void 0 : A.max) ?? 1, b = d !== 1 || m !== 1, p = this.config.scaleDecay ?? 0, g = ["green", "blue", "red", "yellow", "orange", "purple"], f = i.fixedHeight ?? h, v = s / 2, w = r / 2, E = Math.ceil(Math.sqrt(t));
|
|
1121
1121
|
if (t > 0) {
|
|
1122
|
-
const
|
|
1123
|
-
|
|
1122
|
+
const O = b ? this.random(d, m) : 1, z = f * O;
|
|
1123
|
+
n.push({
|
|
1124
1124
|
id: 0,
|
|
1125
1125
|
x: v,
|
|
1126
1126
|
y: w,
|
|
1127
|
-
rotation: l === "random" ? this.random(u * 0.33,
|
|
1127
|
+
rotation: l === "random" ? this.random(u * 0.33, c * 0.33) : 0,
|
|
1128
1128
|
// Less rotation for center
|
|
1129
|
-
scale:
|
|
1129
|
+
scale: O,
|
|
1130
1130
|
baseSize: z,
|
|
1131
1131
|
zIndex: 100,
|
|
1132
1132
|
// Center image is highest
|
|
1133
1133
|
borderColor: a ? "cyan" : void 0
|
|
1134
1134
|
});
|
|
1135
1135
|
}
|
|
1136
|
-
let
|
|
1137
|
-
for (;
|
|
1138
|
-
const
|
|
1139
|
-
if (
|
|
1136
|
+
let R = 1, x = 1;
|
|
1137
|
+
for (; R < t; ) {
|
|
1138
|
+
const O = x / E, z = p > 0 ? 1 - O * p * 0.5 : 1, T = x * (f * 0.8), M = T * 1.5, _ = Math.PI * (3 * (M + T) - Math.sqrt((3 * M + T) * (M + 3 * T))), Z = this.estimateWidth(f), X = Math.floor(_ / (Z * 0.7));
|
|
1139
|
+
if (X === 0) {
|
|
1140
1140
|
x++;
|
|
1141
1141
|
continue;
|
|
1142
1142
|
}
|
|
1143
|
-
const
|
|
1144
|
-
for (let
|
|
1145
|
-
const Q =
|
|
1146
|
-
let Y = v + Math.cos(Q) * M, C = w + Math.sin(Q) *
|
|
1147
|
-
const
|
|
1148
|
-
Y - G <
|
|
1149
|
-
const it = l === "random" ? this.random(u,
|
|
1150
|
-
|
|
1151
|
-
id:
|
|
1143
|
+
const B = 2 * Math.PI / X, J = x * (20 * Math.PI / 180);
|
|
1144
|
+
for (let W = 0; W < X && R < t; W++) {
|
|
1145
|
+
const Q = W * B + J, tt = b ? this.random(d, m) : 1, q = z * tt, et = f * q;
|
|
1146
|
+
let Y = v + Math.cos(Q) * M, C = w + Math.sin(Q) * T;
|
|
1147
|
+
const $ = this.config.spacing.padding ?? 50, G = et * 1.5 / 2, H = et / 2;
|
|
1148
|
+
Y - G < $ ? Y = $ + G : Y + G > s - $ && (Y = s - $ - G), C - H < $ ? C = $ + H : C + H > r - $ && (C = r - $ - H);
|
|
1149
|
+
const it = l === "random" ? this.random(u, c) : 0;
|
|
1150
|
+
n.push({
|
|
1151
|
+
id: R,
|
|
1152
1152
|
x: Y,
|
|
1153
1153
|
y: C,
|
|
1154
1154
|
rotation: it,
|
|
@@ -1157,11 +1157,11 @@ class le {
|
|
|
1157
1157
|
zIndex: Math.max(1, 100 - x),
|
|
1158
1158
|
// Outer rings have lower z-index
|
|
1159
1159
|
borderColor: a ? g[(x - 1) % g.length] : void 0
|
|
1160
|
-
}),
|
|
1160
|
+
}), R++;
|
|
1161
1161
|
}
|
|
1162
1162
|
x++;
|
|
1163
1163
|
}
|
|
1164
|
-
return
|
|
1164
|
+
return n;
|
|
1165
1165
|
}
|
|
1166
1166
|
/**
|
|
1167
1167
|
* Estimate image width based on height
|
|
@@ -1182,7 +1182,7 @@ class le {
|
|
|
1182
1182
|
return Math.random() * (e - t) + t;
|
|
1183
1183
|
}
|
|
1184
1184
|
}
|
|
1185
|
-
const
|
|
1185
|
+
const ue = {
|
|
1186
1186
|
columns: "auto",
|
|
1187
1187
|
rows: "auto",
|
|
1188
1188
|
stagger: "none",
|
|
@@ -1192,7 +1192,7 @@ const he = {
|
|
|
1192
1192
|
alignment: "center",
|
|
1193
1193
|
gap: 10,
|
|
1194
1194
|
overflowOffset: 0.25
|
|
1195
|
-
},
|
|
1195
|
+
}, Lt = [
|
|
1196
1196
|
{ x: 1, y: 1 },
|
|
1197
1197
|
// bottom-right
|
|
1198
1198
|
{ x: -1, y: -1 },
|
|
@@ -1210,7 +1210,7 @@ const he = {
|
|
|
1210
1210
|
{ x: 0, y: 1 }
|
|
1211
1211
|
// down
|
|
1212
1212
|
];
|
|
1213
|
-
class
|
|
1213
|
+
class ge {
|
|
1214
1214
|
constructor(t, e = {}) {
|
|
1215
1215
|
this.config = t, this.imageConfig = e;
|
|
1216
1216
|
}
|
|
@@ -1222,87 +1222,87 @@ class de {
|
|
|
1222
1222
|
* @returns Array of layout objects with position, rotation, scale
|
|
1223
1223
|
*/
|
|
1224
1224
|
generate(t, e, i = {}) {
|
|
1225
|
-
var
|
|
1226
|
-
const
|
|
1225
|
+
var X, B, J, W, Q, tt, q, et, Y;
|
|
1226
|
+
const n = [], { width: s, height: r } = e, a = { ...ue, ...this.config.grid }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((X = this.imageConfig.rotation) == null ? void 0 : X.mode) ?? "none", c = ((J = (B = this.imageConfig.sizing) == null ? void 0 : B.variance) == null ? void 0 : J.min) ?? 1, d = ((Q = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : Q.max) ?? 1, m = c !== 1 || d !== 1, b = s - 2 * h, p = r - 2 * h, { columns: g, rows: f } = this.calculateGridDimensions(
|
|
1227
1227
|
t,
|
|
1228
|
-
|
|
1228
|
+
b,
|
|
1229
1229
|
p,
|
|
1230
1230
|
l,
|
|
1231
1231
|
a
|
|
1232
|
-
), v = a.stagger === "row", w = a.stagger === "column", E = v ? g + 0.5 : g,
|
|
1232
|
+
), v = a.stagger === "row", w = a.stagger === "column", E = v ? g + 0.5 : g, R = w ? f + 0.5 : f, x = (b - a.gap * (g - 1)) / E, L = (p - a.gap * (f - 1)) / R, j = v ? x / 2 : 0, U = w ? L / 2 : 0, D = 1 + a.overlap, P = Math.min(x, L) * D, k = i.fixedHeight ? Math.min(i.fixedHeight, P) : P, F = g * x + (g - 1) * a.gap + j, S = f * L + (f - 1) * a.gap + U, A = h + (b - F) / 2, O = h + (p - S) / 2, z = g * f, T = a.columns !== "auto" && a.rows !== "auto", M = T && t > z;
|
|
1233
1233
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1234
1234
|
gridConfigColumns: a.columns,
|
|
1235
1235
|
gridConfigRows: a.rows,
|
|
1236
1236
|
columns: g,
|
|
1237
|
-
rows:
|
|
1237
|
+
rows: f,
|
|
1238
1238
|
cellCount: z,
|
|
1239
|
-
hasFixedGrid:
|
|
1239
|
+
hasFixedGrid: T,
|
|
1240
1240
|
imageCount: t,
|
|
1241
1241
|
isOverflowMode: M
|
|
1242
1242
|
});
|
|
1243
1243
|
const _ = M ? new Array(z).fill(0) : [], Z = Math.min(x, L) * a.overflowOffset;
|
|
1244
1244
|
for (let C = 0; C < t; C++) {
|
|
1245
|
-
let
|
|
1245
|
+
let $, N, G = 0;
|
|
1246
1246
|
if (M && C >= z) {
|
|
1247
|
-
const
|
|
1248
|
-
G = Math.floor(
|
|
1247
|
+
const K = C - z, V = K % z;
|
|
1248
|
+
G = Math.floor(K / z) + 1, _[V]++, a.fillDirection === "row" ? ($ = V % g, N = Math.floor(V / g)) : (N = V % f, $ = Math.floor(V / f));
|
|
1249
1249
|
} else
|
|
1250
|
-
a.fillDirection === "row" ? (
|
|
1251
|
-
let H =
|
|
1252
|
-
if (a.stagger === "row" &&
|
|
1253
|
-
const
|
|
1250
|
+
a.fillDirection === "row" ? ($ = C % g, N = Math.floor(C / g)) : (N = C % f, $ = Math.floor(C / f));
|
|
1251
|
+
let H = A + $ * (x + a.gap) + x / 2, it = O + N * (L + a.gap) + L / 2;
|
|
1252
|
+
if (a.stagger === "row" && N % 2 === 1 ? H += x / 2 : a.stagger === "column" && $ % 2 === 1 && (it += L / 2), G > 0) {
|
|
1253
|
+
const K = (G - 1) % Lt.length, V = Lt[K];
|
|
1254
1254
|
H += V.x * Z, it += V.y * Z;
|
|
1255
1255
|
}
|
|
1256
1256
|
if (a.jitter > 0) {
|
|
1257
|
-
const
|
|
1258
|
-
H += this.random(-
|
|
1257
|
+
const K = x / 2 * a.jitter, V = L / 2 * a.jitter;
|
|
1258
|
+
H += this.random(-K, K), it += this.random(-V, V);
|
|
1259
1259
|
}
|
|
1260
1260
|
let nt = H, ot = it;
|
|
1261
1261
|
if (!M && a.fillDirection === "row") {
|
|
1262
|
-
const
|
|
1263
|
-
if (
|
|
1264
|
-
const
|
|
1265
|
-
let
|
|
1266
|
-
a.alignment === "center" ?
|
|
1262
|
+
const K = t % g || g;
|
|
1263
|
+
if (N === Math.floor((t - 1) / g) && K < g) {
|
|
1264
|
+
const Mt = K * x + (K - 1) * a.gap;
|
|
1265
|
+
let St = 0;
|
|
1266
|
+
a.alignment === "center" ? St = (F - Mt) / 2 : a.alignment === "end" && (St = F - Mt), nt += St;
|
|
1267
1267
|
}
|
|
1268
1268
|
}
|
|
1269
|
-
const
|
|
1270
|
-
nt = Math.max(yt, Math.min(nt,
|
|
1271
|
-
let
|
|
1269
|
+
const pt = m ? this.random(c, d) : 1, at = k * pt, dt = at * 1.5 / 2, ut = at / 2, yt = h + dt, vt = s - h - dt, Ht = h + ut, _t = r - h - ut;
|
|
1270
|
+
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(Ht, Math.min(ot, _t));
|
|
1271
|
+
let wt = 0;
|
|
1272
1272
|
if (u === "random") {
|
|
1273
|
-
const
|
|
1274
|
-
a.jitter > 0 ?
|
|
1273
|
+
const K = ((q = (tt = this.imageConfig.rotation) == null ? void 0 : tt.range) == null ? void 0 : q.min) ?? -15, V = ((Y = (et = this.imageConfig.rotation) == null ? void 0 : et.range) == null ? void 0 : Y.max) ?? 15;
|
|
1274
|
+
a.jitter > 0 ? wt = this.random(K * a.jitter, V * a.jitter) : wt = this.random(K, V);
|
|
1275
1275
|
}
|
|
1276
|
-
let
|
|
1277
|
-
M && G > 0 ?
|
|
1276
|
+
let xt;
|
|
1277
|
+
M && G > 0 ? xt = 50 - G : xt = M ? 100 + C : C + 1, n.push({
|
|
1278
1278
|
id: C,
|
|
1279
1279
|
x: nt,
|
|
1280
1280
|
y: ot,
|
|
1281
|
-
rotation:
|
|
1282
|
-
scale:
|
|
1281
|
+
rotation: wt,
|
|
1282
|
+
scale: pt,
|
|
1283
1283
|
baseSize: at,
|
|
1284
|
-
zIndex:
|
|
1284
|
+
zIndex: xt
|
|
1285
1285
|
});
|
|
1286
1286
|
}
|
|
1287
|
-
return
|
|
1287
|
+
return n;
|
|
1288
1288
|
}
|
|
1289
1289
|
/**
|
|
1290
1290
|
* Calculate optimal grid dimensions based on image count and container
|
|
1291
1291
|
*/
|
|
1292
|
-
calculateGridDimensions(t, e, i,
|
|
1293
|
-
let
|
|
1292
|
+
calculateGridDimensions(t, e, i, n, s) {
|
|
1293
|
+
let r, a;
|
|
1294
1294
|
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1295
|
-
|
|
1295
|
+
r = s.columns, a = s.rows;
|
|
1296
1296
|
else if (s.columns !== "auto")
|
|
1297
|
-
|
|
1297
|
+
r = s.columns, a = Math.ceil(t / r);
|
|
1298
1298
|
else if (s.rows !== "auto")
|
|
1299
|
-
a = s.rows,
|
|
1299
|
+
a = s.rows, r = Math.ceil(t / a);
|
|
1300
1300
|
else {
|
|
1301
1301
|
const h = e / i;
|
|
1302
|
-
for (
|
|
1303
|
-
|
|
1302
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))), a = Math.ceil(t / r); r > 1 && (r - 1) * a >= t; )
|
|
1303
|
+
r--;
|
|
1304
1304
|
}
|
|
1305
|
-
return { columns: Math.max(1,
|
|
1305
|
+
return { columns: Math.max(1, r), rows: Math.max(1, a) };
|
|
1306
1306
|
}
|
|
1307
1307
|
/**
|
|
1308
1308
|
* Utility: Generate random number between min and max
|
|
@@ -1311,14 +1311,14 @@ class de {
|
|
|
1311
1311
|
return Math.random() * (e - t) + t;
|
|
1312
1312
|
}
|
|
1313
1313
|
}
|
|
1314
|
-
const
|
|
1314
|
+
const fe = Math.PI * (3 - Math.sqrt(5)), me = {
|
|
1315
1315
|
spiralType: "golden",
|
|
1316
1316
|
direction: "counterclockwise",
|
|
1317
1317
|
tightness: 1,
|
|
1318
1318
|
scaleDecay: 0,
|
|
1319
1319
|
startAngle: 0
|
|
1320
1320
|
};
|
|
1321
|
-
class
|
|
1321
|
+
class pe {
|
|
1322
1322
|
constructor(t, e = {}) {
|
|
1323
1323
|
this.config = t, this.imageConfig = e;
|
|
1324
1324
|
}
|
|
@@ -1330,80 +1330,80 @@ class me {
|
|
|
1330
1330
|
* @returns Array of layout objects with position, rotation, scale
|
|
1331
1331
|
*/
|
|
1332
1332
|
generate(t, e, i = {}) {
|
|
1333
|
-
var
|
|
1334
|
-
const
|
|
1335
|
-
|
|
1333
|
+
var R, x, L, j, U, D, P, k, F;
|
|
1334
|
+
const n = [], { width: s, height: r } = e, a = { ...me, ...this.config.spiral }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((R = this.imageConfig.rotation) == null ? void 0 : R.mode) ?? "none", c = ((L = (x = this.imageConfig.rotation) == null ? void 0 : x.range) == null ? void 0 : L.min) ?? -15, d = ((U = (j = this.imageConfig.rotation) == null ? void 0 : j.range) == null ? void 0 : U.max) ?? 15, m = ((P = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : P.min) ?? 1, b = ((F = (k = this.imageConfig.sizing) == null ? void 0 : k.variance) == null ? void 0 : F.max) ?? 1, p = m !== 1 || b !== 1, g = this.config.scaleDecay ?? a.scaleDecay, f = s / 2, v = r / 2, w = Math.min(
|
|
1335
|
+
f - h - l / 2,
|
|
1336
1336
|
v - h - l / 2
|
|
1337
1337
|
), E = a.direction === "clockwise" ? -1 : 1;
|
|
1338
1338
|
for (let S = 0; S < t; S++) {
|
|
1339
|
-
let
|
|
1339
|
+
let A, O;
|
|
1340
1340
|
if (a.spiralType === "golden")
|
|
1341
|
-
|
|
1341
|
+
A = S * fe * E + a.startAngle, O = this.calculateGoldenRadius(S, t, w, a.tightness);
|
|
1342
1342
|
else if (a.spiralType === "archimedean") {
|
|
1343
1343
|
const H = S * 0.5 * a.tightness;
|
|
1344
|
-
|
|
1344
|
+
A = H * E + a.startAngle, O = this.calculateArchimedeanRadius(H, t, w, a.tightness);
|
|
1345
1345
|
} else {
|
|
1346
1346
|
const H = S * 0.3 * a.tightness;
|
|
1347
|
-
|
|
1347
|
+
A = H * E + a.startAngle, O = this.calculateLogarithmicRadius(H, t, w, a.tightness);
|
|
1348
1348
|
}
|
|
1349
|
-
const z =
|
|
1350
|
-
let
|
|
1349
|
+
const z = f + Math.cos(A) * O, T = v + Math.sin(A) * O, M = O / w, _ = g > 0 ? 1 - M * g * 0.5 : 1, Z = p ? this.random(m, b) : 1, X = _ * Z, B = l * X, W = B * 1.5 / 2, Q = B / 2, tt = h + W, q = s - h - W, et = h + Q, Y = r - h - Q, C = Math.max(tt, Math.min(z, q)), $ = Math.max(et, Math.min(T, Y));
|
|
1350
|
+
let N = 0;
|
|
1351
1351
|
if (u === "random") {
|
|
1352
|
-
const H =
|
|
1353
|
-
|
|
1354
|
-
} else u === "tangent" && (
|
|
1352
|
+
const H = A * 180 / Math.PI % 360, it = this.random(c, d);
|
|
1353
|
+
N = a.spiralType === "golden" ? it : H * 0.1 + it * 0.9;
|
|
1354
|
+
} else u === "tangent" && (N = this.calculateSpiralTangent(A, O, a));
|
|
1355
1355
|
const G = t - S;
|
|
1356
|
-
|
|
1356
|
+
n.push({
|
|
1357
1357
|
id: S,
|
|
1358
1358
|
x: C,
|
|
1359
|
-
y:
|
|
1360
|
-
rotation:
|
|
1361
|
-
scale:
|
|
1362
|
-
baseSize:
|
|
1359
|
+
y: $,
|
|
1360
|
+
rotation: N,
|
|
1361
|
+
scale: X,
|
|
1362
|
+
baseSize: B,
|
|
1363
1363
|
zIndex: G
|
|
1364
1364
|
});
|
|
1365
1365
|
}
|
|
1366
|
-
return
|
|
1366
|
+
return n;
|
|
1367
1367
|
}
|
|
1368
1368
|
/**
|
|
1369
1369
|
* Calculate tangent angle for spiral curve at given position
|
|
1370
1370
|
* This aligns the image along the spiral's direction of travel
|
|
1371
1371
|
*/
|
|
1372
1372
|
calculateSpiralTangent(t, e, i) {
|
|
1373
|
-
let
|
|
1373
|
+
let n;
|
|
1374
1374
|
if (i.spiralType === "golden")
|
|
1375
|
-
|
|
1375
|
+
n = t + Math.PI / 2;
|
|
1376
1376
|
else if (i.spiralType === "archimedean") {
|
|
1377
|
-
const
|
|
1378
|
-
|
|
1377
|
+
const r = 1 / i.tightness, a = Math.atan(e / r);
|
|
1378
|
+
n = t + a;
|
|
1379
1379
|
} else {
|
|
1380
|
-
const
|
|
1381
|
-
|
|
1380
|
+
const r = 0.15 / i.tightness, a = Math.atan(1 / r);
|
|
1381
|
+
n = t + a;
|
|
1382
1382
|
}
|
|
1383
|
-
return
|
|
1383
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1384
1384
|
}
|
|
1385
1385
|
/**
|
|
1386
1386
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1387
1387
|
* Creates even distribution like sunflower seeds
|
|
1388
1388
|
*/
|
|
1389
|
-
calculateGoldenRadius(t, e, i,
|
|
1390
|
-
const
|
|
1391
|
-
return Math.min(
|
|
1389
|
+
calculateGoldenRadius(t, e, i, n) {
|
|
1390
|
+
const r = i / Math.sqrt(e) * Math.sqrt(t) / n;
|
|
1391
|
+
return Math.min(r, i);
|
|
1392
1392
|
}
|
|
1393
1393
|
/**
|
|
1394
1394
|
* Calculate radius for Archimedean spiral
|
|
1395
1395
|
* r = a + b*θ (constant spacing between arms)
|
|
1396
1396
|
*/
|
|
1397
|
-
calculateArchimedeanRadius(t, e, i,
|
|
1398
|
-
const s = e * 0.5 *
|
|
1397
|
+
calculateArchimedeanRadius(t, e, i, n) {
|
|
1398
|
+
const s = e * 0.5 * n;
|
|
1399
1399
|
return t / s * i;
|
|
1400
1400
|
}
|
|
1401
1401
|
/**
|
|
1402
1402
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1403
1403
|
* r = a * e^(b*θ)
|
|
1404
1404
|
*/
|
|
1405
|
-
calculateLogarithmicRadius(t, e, i,
|
|
1406
|
-
const s = i * 0.05,
|
|
1405
|
+
calculateLogarithmicRadius(t, e, i, n) {
|
|
1406
|
+
const s = i * 0.05, r = 0.15 / n, a = s * Math.exp(r * t), h = e * 0.3 * n, l = s * Math.exp(r * h);
|
|
1407
1407
|
return a / l * i;
|
|
1408
1408
|
}
|
|
1409
1409
|
/**
|
|
@@ -1413,7 +1413,7 @@ class me {
|
|
|
1413
1413
|
return Math.random() * (e - t) + t;
|
|
1414
1414
|
}
|
|
1415
1415
|
}
|
|
1416
|
-
const
|
|
1416
|
+
const be = {
|
|
1417
1417
|
clusterCount: "auto",
|
|
1418
1418
|
clusterSpread: 150,
|
|
1419
1419
|
clusterSpacing: 200,
|
|
@@ -1421,7 +1421,7 @@ const fe = {
|
|
|
1421
1421
|
overlap: 0.3,
|
|
1422
1422
|
distribution: "gaussian"
|
|
1423
1423
|
};
|
|
1424
|
-
class
|
|
1424
|
+
class ye {
|
|
1425
1425
|
constructor(t, e = {}) {
|
|
1426
1426
|
this.config = t, this.imageConfig = e;
|
|
1427
1427
|
}
|
|
@@ -1433,17 +1433,17 @@ class pe {
|
|
|
1433
1433
|
* @returns Array of layout objects with position, rotation, scale
|
|
1434
1434
|
*/
|
|
1435
1435
|
generate(t, e, i = {}) {
|
|
1436
|
-
var E,
|
|
1437
|
-
const
|
|
1436
|
+
var E, R, x, L, j, U, D, P, k;
|
|
1437
|
+
const n = [], { width: s, height: r } = e, a = { ...be, ...this.config.cluster }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((E = this.imageConfig.rotation) == null ? void 0 : E.mode) ?? "none", c = ((x = (R = this.imageConfig.rotation) == null ? void 0 : R.range) == null ? void 0 : x.min) ?? -15, d = ((j = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : j.max) ?? 15, m = ((D = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : D.min) ?? 1, b = ((k = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : k.max) ?? 1, p = m !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1438
1438
|
t,
|
|
1439
1439
|
a.clusterCount,
|
|
1440
1440
|
s,
|
|
1441
|
-
|
|
1441
|
+
r,
|
|
1442
1442
|
a.clusterSpacing
|
|
1443
|
-
),
|
|
1443
|
+
), f = this.generateClusterCenters(
|
|
1444
1444
|
g,
|
|
1445
1445
|
s,
|
|
1446
|
-
|
|
1446
|
+
r,
|
|
1447
1447
|
h,
|
|
1448
1448
|
a
|
|
1449
1449
|
), v = new Array(g).fill(0);
|
|
@@ -1451,70 +1451,70 @@ class pe {
|
|
|
1451
1451
|
v[F % g]++;
|
|
1452
1452
|
let w = 0;
|
|
1453
1453
|
for (let F = 0; F < g; F++) {
|
|
1454
|
-
const S =
|
|
1455
|
-
for (let
|
|
1456
|
-
let z,
|
|
1454
|
+
const S = f[F], A = v[F];
|
|
1455
|
+
for (let O = 0; O < A; O++) {
|
|
1456
|
+
let z, T;
|
|
1457
1457
|
if (a.distribution === "gaussian")
|
|
1458
|
-
z = this.gaussianRandom() * S.spread,
|
|
1458
|
+
z = this.gaussianRandom() * S.spread, T = this.gaussianRandom() * S.spread;
|
|
1459
1459
|
else {
|
|
1460
|
-
const
|
|
1461
|
-
z = Math.cos(
|
|
1460
|
+
const N = this.random(0, Math.PI * 2), G = this.random(0, S.spread);
|
|
1461
|
+
z = Math.cos(N) * G, T = Math.sin(N) * G;
|
|
1462
1462
|
}
|
|
1463
1463
|
const M = 1 + a.overlap * 0.5, _ = 1 + a.overlap * 0.3;
|
|
1464
|
-
z /= M,
|
|
1465
|
-
const Z = p ? this.random(
|
|
1466
|
-
let
|
|
1467
|
-
const tt =
|
|
1468
|
-
|
|
1469
|
-
const et = u === "random" ? this.random(
|
|
1470
|
-
|
|
1464
|
+
z /= M, T /= M;
|
|
1465
|
+
const Z = p ? this.random(m, b) : 1, X = _ * Z, B = l * X;
|
|
1466
|
+
let J = S.x + z, W = S.y + T;
|
|
1467
|
+
const tt = B * 1.5 / 2, q = B / 2;
|
|
1468
|
+
J = Math.max(h + tt, Math.min(J, s - h - tt)), W = Math.max(h + q, Math.min(W, r - h - q));
|
|
1469
|
+
const et = u === "random" ? this.random(c, d) : 0, C = Math.sqrt(z * z + T * T) / S.spread, $ = Math.round((1 - C) * 50) + 1;
|
|
1470
|
+
n.push({
|
|
1471
1471
|
id: w,
|
|
1472
|
-
x:
|
|
1473
|
-
y:
|
|
1472
|
+
x: J,
|
|
1473
|
+
y: W,
|
|
1474
1474
|
rotation: et,
|
|
1475
|
-
scale:
|
|
1476
|
-
baseSize:
|
|
1477
|
-
zIndex:
|
|
1475
|
+
scale: X,
|
|
1476
|
+
baseSize: B,
|
|
1477
|
+
zIndex: $
|
|
1478
1478
|
}), w++;
|
|
1479
1479
|
}
|
|
1480
1480
|
}
|
|
1481
|
-
return
|
|
1481
|
+
return n;
|
|
1482
1482
|
}
|
|
1483
1483
|
/**
|
|
1484
1484
|
* Calculate optimal number of clusters based on image count and container
|
|
1485
1485
|
*/
|
|
1486
|
-
calculateClusterCount(t, e, i,
|
|
1486
|
+
calculateClusterCount(t, e, i, n, s) {
|
|
1487
1487
|
if (e !== "auto")
|
|
1488
1488
|
return Math.max(1, Math.min(e, t));
|
|
1489
1489
|
const a = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1490
|
-
i / s * (
|
|
1490
|
+
i / s * (n / s) * 0.6
|
|
1491
1491
|
);
|
|
1492
1492
|
return Math.max(1, Math.min(a, h, 10));
|
|
1493
1493
|
}
|
|
1494
1494
|
/**
|
|
1495
1495
|
* Generate cluster center positions with spacing constraints
|
|
1496
1496
|
*/
|
|
1497
|
-
generateClusterCenters(t, e, i,
|
|
1498
|
-
const
|
|
1497
|
+
generateClusterCenters(t, e, i, n, s) {
|
|
1498
|
+
const r = [], h = n + s.clusterSpread, l = e - n - s.clusterSpread, u = n + s.clusterSpread, c = i - n - s.clusterSpread;
|
|
1499
1499
|
for (let d = 0; d < t; d++) {
|
|
1500
|
-
let
|
|
1500
|
+
let m = null, b = -1;
|
|
1501
1501
|
for (let p = 0; p < 100; p++) {
|
|
1502
1502
|
const g = {
|
|
1503
1503
|
x: this.random(h, l),
|
|
1504
|
-
y: this.random(u,
|
|
1504
|
+
y: this.random(u, c),
|
|
1505
1505
|
spread: this.calculateClusterSpread(s)
|
|
1506
1506
|
};
|
|
1507
|
-
let
|
|
1508
|
-
for (const v of
|
|
1509
|
-
const w = g.x - v.x, E = g.y - v.y,
|
|
1510
|
-
|
|
1507
|
+
let f = 1 / 0;
|
|
1508
|
+
for (const v of r) {
|
|
1509
|
+
const w = g.x - v.x, E = g.y - v.y, R = Math.sqrt(w * w + E * E);
|
|
1510
|
+
f = Math.min(f, R);
|
|
1511
1511
|
}
|
|
1512
|
-
if ((
|
|
1512
|
+
if ((r.length === 0 || f > b) && (m = g, b = f), f >= s.clusterSpacing)
|
|
1513
1513
|
break;
|
|
1514
1514
|
}
|
|
1515
|
-
|
|
1515
|
+
m && r.push(m);
|
|
1516
1516
|
}
|
|
1517
|
-
return
|
|
1517
|
+
return r;
|
|
1518
1518
|
}
|
|
1519
1519
|
/**
|
|
1520
1520
|
* Calculate spread for a cluster (may vary if density='varied')
|
|
@@ -1540,7 +1540,7 @@ class pe {
|
|
|
1540
1540
|
return Math.random() * (e - t) + t;
|
|
1541
1541
|
}
|
|
1542
1542
|
}
|
|
1543
|
-
class
|
|
1543
|
+
class ve {
|
|
1544
1544
|
constructor(t, e = {}) {
|
|
1545
1545
|
this.config = t, this.imageConfig = e;
|
|
1546
1546
|
}
|
|
@@ -1552,33 +1552,33 @@ class ye {
|
|
|
1552
1552
|
* @returns Array of layout objects with position, rotation, scale
|
|
1553
1553
|
*/
|
|
1554
1554
|
generate(t, e, i = {}) {
|
|
1555
|
-
var M, _, Z,
|
|
1556
|
-
const
|
|
1557
|
-
...
|
|
1555
|
+
var M, _, Z, X, B, J, W, Q, tt;
|
|
1556
|
+
const n = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, l = ((M = this.imageConfig.rotation) == null ? void 0 : M.mode) ?? "none", u = ((Z = (_ = this.imageConfig.rotation) == null ? void 0 : _.range) == null ? void 0 : Z.min) ?? -15, c = ((B = (X = this.imageConfig.rotation) == null ? void 0 : X.range) == null ? void 0 : B.max) ?? 15, d = ((W = (J = this.imageConfig.sizing) == null ? void 0 : J.variance) == null ? void 0 : W.min) ?? 1, m = ((tt = (Q = this.imageConfig.sizing) == null ? void 0 : Q.variance) == null ? void 0 : tt.max) ?? 1, b = d !== 1 || m !== 1, p = i.fixedHeight ?? a, g = {
|
|
1557
|
+
...jt,
|
|
1558
1558
|
...this.config.wave
|
|
1559
|
-
}, { rows:
|
|
1560
|
-
let
|
|
1561
|
-
for (let q = 0; q <
|
|
1562
|
-
const et =
|
|
1559
|
+
}, { rows: f, amplitude: v, frequency: w, phaseShift: E, synchronization: R } = g, x = Math.ceil(t / f), U = p * 1.5 / 2, D = h + U, P = s - h - U, k = P - D, F = x > 1 ? k / (x - 1) : 0, S = h + v + p / 2, A = r - h - v - p / 2, O = A - S, z = f > 1 ? O / (f - 1) : 0;
|
|
1560
|
+
let T = 0;
|
|
1561
|
+
for (let q = 0; q < f && T < t; q++) {
|
|
1562
|
+
const et = f === 1 ? (S + A) / 2 : S + q * z;
|
|
1563
1563
|
let Y = 0;
|
|
1564
|
-
|
|
1565
|
-
for (let C = 0; C < x &&
|
|
1566
|
-
const
|
|
1564
|
+
R === "offset" ? Y = q * E : R === "alternating" && (Y = q * Math.PI);
|
|
1565
|
+
for (let C = 0; C < x && T < t; C++) {
|
|
1566
|
+
const $ = x === 1 ? (D + P) / 2 : D + C * F, N = this.calculateWaveY($, s, v, w, Y), G = $, H = et + N, it = b ? this.random(d, m) : 1, nt = p * it;
|
|
1567
1567
|
let ot = 0;
|
|
1568
|
-
l === "tangent" ? ot = this.calculateRotation(
|
|
1569
|
-
const at = nt * 1.5 / 2,
|
|
1570
|
-
|
|
1571
|
-
id:
|
|
1568
|
+
l === "tangent" ? ot = this.calculateRotation($, s, v, w, Y) : l === "random" && (ot = this.random(u, c));
|
|
1569
|
+
const at = nt * 1.5 / 2, bt = nt / 2, dt = h + at, ut = s - h - at, yt = h + bt, vt = r - h - bt;
|
|
1570
|
+
n.push({
|
|
1571
|
+
id: T,
|
|
1572
1572
|
x: Math.max(dt, Math.min(G, ut)),
|
|
1573
|
-
y: Math.max(yt, Math.min(H,
|
|
1573
|
+
y: Math.max(yt, Math.min(H, vt)),
|
|
1574
1574
|
rotation: ot,
|
|
1575
1575
|
scale: it,
|
|
1576
1576
|
baseSize: nt,
|
|
1577
|
-
zIndex:
|
|
1578
|
-
}),
|
|
1577
|
+
zIndex: T + 1
|
|
1578
|
+
}), T++;
|
|
1579
1579
|
}
|
|
1580
1580
|
}
|
|
1581
|
-
return
|
|
1581
|
+
return n;
|
|
1582
1582
|
}
|
|
1583
1583
|
/**
|
|
1584
1584
|
* Calculate Y position displacement on wave curve
|
|
@@ -1589,9 +1589,9 @@ class ye {
|
|
|
1589
1589
|
* @param phase - Phase offset
|
|
1590
1590
|
* @returns Y displacement from baseline
|
|
1591
1591
|
*/
|
|
1592
|
-
calculateWaveY(t, e, i,
|
|
1593
|
-
const
|
|
1594
|
-
return i * Math.sin(
|
|
1592
|
+
calculateWaveY(t, e, i, n, s) {
|
|
1593
|
+
const r = t / e;
|
|
1594
|
+
return i * Math.sin(n * r * 2 * Math.PI + s);
|
|
1595
1595
|
}
|
|
1596
1596
|
/**
|
|
1597
1597
|
* Calculate rotation based on wave tangent
|
|
@@ -1602,8 +1602,8 @@ class ye {
|
|
|
1602
1602
|
* @param phase - Phase offset
|
|
1603
1603
|
* @returns Rotation angle in degrees
|
|
1604
1604
|
*/
|
|
1605
|
-
calculateRotation(t, e, i,
|
|
1606
|
-
const
|
|
1605
|
+
calculateRotation(t, e, i, n, s) {
|
|
1606
|
+
const r = t / e, a = i * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + s) / e;
|
|
1607
1607
|
return Math.atan(a) * (180 / Math.PI);
|
|
1608
1608
|
}
|
|
1609
1609
|
/**
|
|
@@ -1618,7 +1618,7 @@ class ye {
|
|
|
1618
1618
|
return Math.random() * (e - t) + t;
|
|
1619
1619
|
}
|
|
1620
1620
|
}
|
|
1621
|
-
class
|
|
1621
|
+
class we {
|
|
1622
1622
|
constructor(t) {
|
|
1623
1623
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.generator = this.initGenerator();
|
|
1624
1624
|
}
|
|
@@ -1629,18 +1629,18 @@ class be {
|
|
|
1629
1629
|
initGenerator() {
|
|
1630
1630
|
switch (this.config.algorithm) {
|
|
1631
1631
|
case "radial":
|
|
1632
|
-
return new le(this.config, this.imageConfig);
|
|
1633
|
-
case "grid":
|
|
1634
1632
|
return new de(this.config, this.imageConfig);
|
|
1633
|
+
case "grid":
|
|
1634
|
+
return new ge(this.config, this.imageConfig);
|
|
1635
1635
|
case "spiral":
|
|
1636
|
-
return new me(this.config, this.imageConfig);
|
|
1637
|
-
case "cluster":
|
|
1638
1636
|
return new pe(this.config, this.imageConfig);
|
|
1639
|
-
case "
|
|
1637
|
+
case "cluster":
|
|
1640
1638
|
return new ye(this.config, this.imageConfig);
|
|
1639
|
+
case "wave":
|
|
1640
|
+
return new ve(this.config, this.imageConfig);
|
|
1641
1641
|
case "random":
|
|
1642
1642
|
default:
|
|
1643
|
-
return new
|
|
1643
|
+
return new he(this.config, this.imageConfig);
|
|
1644
1644
|
}
|
|
1645
1645
|
}
|
|
1646
1646
|
/**
|
|
@@ -1651,10 +1651,10 @@ class be {
|
|
|
1651
1651
|
* @returns Array of layout objects with position, rotation, scale
|
|
1652
1652
|
*/
|
|
1653
1653
|
generateLayout(t, e, i = {}) {
|
|
1654
|
-
const
|
|
1655
|
-
return
|
|
1654
|
+
const n = this.generator.generate(t, e, i);
|
|
1655
|
+
return n.forEach((s) => {
|
|
1656
1656
|
this.layouts.set(s.id, s);
|
|
1657
|
-
}),
|
|
1657
|
+
}), n;
|
|
1658
1658
|
}
|
|
1659
1659
|
/**
|
|
1660
1660
|
* Get the original layout state for an image
|
|
@@ -1707,8 +1707,8 @@ class be {
|
|
|
1707
1707
|
return;
|
|
1708
1708
|
if (typeof i == "number")
|
|
1709
1709
|
return i;
|
|
1710
|
-
const
|
|
1711
|
-
return s === "mobile" ?
|
|
1710
|
+
const n = i, s = this.resolveBreakpoint(t);
|
|
1711
|
+
return s === "mobile" ? n.mobile ?? n.tablet ?? n.screen : s === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1712
1712
|
}
|
|
1713
1713
|
/**
|
|
1714
1714
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1718,17 +1718,17 @@ class be {
|
|
|
1718
1718
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1719
1719
|
* @returns Calculated sizing result with height
|
|
1720
1720
|
*/
|
|
1721
|
-
calculateAdaptiveSize(t, e, i,
|
|
1722
|
-
const s = this.imageConfig.sizing,
|
|
1723
|
-
if (
|
|
1724
|
-
return { height:
|
|
1725
|
-
const a = (s == null ? void 0 : s.minSize) ?? 50, h = (s == null ? void 0 : s.maxSize) ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width:
|
|
1726
|
-
let
|
|
1727
|
-
|
|
1728
|
-
let v = this.clamp(
|
|
1729
|
-
if (v === a &&
|
|
1721
|
+
calculateAdaptiveSize(t, e, i, n) {
|
|
1722
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1723
|
+
if (r !== void 0)
|
|
1724
|
+
return { height: r };
|
|
1725
|
+
const a = (s == null ? void 0 : s.minSize) ?? 50, h = (s == null ? void 0 : s.maxSize) ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: c, height: d } = t, p = c * d * l / e;
|
|
1726
|
+
let f = Math.sqrt(p / 1.4);
|
|
1727
|
+
f *= u, f = Math.min(f, i);
|
|
1728
|
+
let v = this.clamp(f, a, h);
|
|
1729
|
+
if (v === a && f < a) {
|
|
1730
1730
|
const w = Math.max(a * 0.05, 20);
|
|
1731
|
-
v = Math.max(w,
|
|
1731
|
+
v = Math.max(w, f);
|
|
1732
1732
|
}
|
|
1733
1733
|
return { height: v };
|
|
1734
1734
|
}
|
|
@@ -1739,77 +1739,77 @@ class be {
|
|
|
1739
1739
|
return Math.max(e, Math.min(i, t));
|
|
1740
1740
|
}
|
|
1741
1741
|
}
|
|
1742
|
-
var I = /* @__PURE__ */ ((
|
|
1743
|
-
function
|
|
1744
|
-
return
|
|
1742
|
+
var I = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(I || {});
|
|
1743
|
+
function xe(o) {
|
|
1744
|
+
return o in It;
|
|
1745
1745
|
}
|
|
1746
|
-
function
|
|
1747
|
-
return
|
|
1746
|
+
function Se(o) {
|
|
1747
|
+
return o ? xe(o) ? It[o] : o : It.md;
|
|
1748
1748
|
}
|
|
1749
|
-
function
|
|
1750
|
-
if (!
|
|
1749
|
+
function Ie(o) {
|
|
1750
|
+
if (!o) return "";
|
|
1751
1751
|
const t = [];
|
|
1752
|
-
if (
|
|
1753
|
-
if (typeof
|
|
1754
|
-
t.push(`drop-shadow(${
|
|
1752
|
+
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
|
+
if (typeof o.dropShadow == "string")
|
|
1754
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
1755
1755
|
else {
|
|
1756
|
-
const e =
|
|
1756
|
+
const e = o.dropShadow;
|
|
1757
1757
|
t.push(`drop-shadow(${e.x}px ${e.y}px ${e.blur}px ${e.color})`);
|
|
1758
1758
|
}
|
|
1759
1759
|
return t.join(" ");
|
|
1760
1760
|
}
|
|
1761
|
-
function ct(
|
|
1762
|
-
if (!
|
|
1761
|
+
function ct(o) {
|
|
1762
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
1763
1763
|
return "none";
|
|
1764
|
-
const t =
|
|
1764
|
+
const t = o.width ?? 0, e = o.style ?? "solid", i = o.color ?? "#000000";
|
|
1765
1765
|
return `${t}px ${e} ${i}`;
|
|
1766
1766
|
}
|
|
1767
|
-
function
|
|
1768
|
-
var s,
|
|
1769
|
-
if (!
|
|
1767
|
+
function ft(o) {
|
|
1768
|
+
var s, r;
|
|
1769
|
+
if (!o) return {};
|
|
1770
1770
|
const t = {};
|
|
1771
|
-
if (
|
|
1772
|
-
const a = ((s =
|
|
1773
|
-
|
|
1774
|
-
} else ((
|
|
1775
|
-
if (
|
|
1776
|
-
const a =
|
|
1777
|
-
t.borderTop = ct(h), t.borderRight = ct(l), t.borderBottom = ct(u), t.borderLeft = ct(
|
|
1778
|
-
} else
|
|
1779
|
-
|
|
1780
|
-
const
|
|
1781
|
-
if (t.filter =
|
|
1782
|
-
const a =
|
|
1783
|
-
t.outline = `${a}px ${h} ${l}`,
|
|
1784
|
-
}
|
|
1785
|
-
return
|
|
1771
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
1772
|
+
const a = ((s = o.border) == null ? void 0 : s.radius) ?? 0;
|
|
1773
|
+
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`);
|
|
1774
|
+
} else ((r = o.border) == null ? void 0 : r.radius) !== void 0 && (t.borderRadius = `${o.border.radius}px`);
|
|
1775
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
1776
|
+
const a = o.border || {}, h = { ...a, ...o.borderTop }, l = { ...a, ...o.borderRight }, u = { ...a, ...o.borderBottom }, c = { ...a, ...o.borderLeft };
|
|
1777
|
+
t.borderTop = ct(h), t.borderRight = ct(l), t.borderBottom = ct(u), t.borderLeft = ct(c);
|
|
1778
|
+
} else o.border && (t.border = ct(o.border));
|
|
1779
|
+
o.shadow !== void 0 && (t.boxShadow = Se(o.shadow));
|
|
1780
|
+
const n = Ie(o.filter);
|
|
1781
|
+
if (t.filter = n || "none", o.opacity !== void 0 && (t.opacity = String(o.opacity)), o.cursor !== void 0 && (t.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1782
|
+
const a = o.outline.width ?? 0, h = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
1783
|
+
t.outline = `${a}px ${h} ${l}`, o.outline.offset !== void 0 && (t.outlineOffset = `${o.outline.offset}px`);
|
|
1784
|
+
}
|
|
1785
|
+
return o.objectFit !== void 0 && (t.objectFit = o.objectFit), o.aspectRatio !== void 0 && (t.aspectRatio = o.aspectRatio), t;
|
|
1786
1786
|
}
|
|
1787
|
-
function lt(
|
|
1788
|
-
t.borderRadius !== void 0 && (
|
|
1787
|
+
function lt(o, t) {
|
|
1788
|
+
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);
|
|
1789
1789
|
}
|
|
1790
|
-
function
|
|
1791
|
-
return
|
|
1790
|
+
function Pt(o) {
|
|
1791
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
1792
1792
|
}
|
|
1793
|
-
function ht(
|
|
1794
|
-
const e =
|
|
1793
|
+
function ht(o, t) {
|
|
1794
|
+
const e = Pt(t);
|
|
1795
1795
|
e && e.split(" ").forEach((i) => {
|
|
1796
|
-
i.trim() &&
|
|
1796
|
+
i.trim() && o.classList.add(i.trim());
|
|
1797
1797
|
});
|
|
1798
1798
|
}
|
|
1799
|
-
function
|
|
1800
|
-
const e =
|
|
1799
|
+
function Ut(o, t) {
|
|
1800
|
+
const e = Pt(t);
|
|
1801
1801
|
e && e.split(" ").forEach((i) => {
|
|
1802
|
-
i.trim() &&
|
|
1802
|
+
i.trim() && o.classList.remove(i.trim());
|
|
1803
1803
|
});
|
|
1804
1804
|
}
|
|
1805
|
-
const
|
|
1805
|
+
const Ot = {
|
|
1806
1806
|
UNFOCUSING: 999,
|
|
1807
1807
|
FOCUSING: 1e3
|
|
1808
1808
|
};
|
|
1809
|
-
class
|
|
1809
|
+
class Ee {
|
|
1810
1810
|
constructor(t, e, i) {
|
|
1811
|
-
var
|
|
1812
|
-
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 =
|
|
1811
|
+
var n, s;
|
|
1812
|
+
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;
|
|
1813
1813
|
}
|
|
1814
1814
|
/**
|
|
1815
1815
|
* Get current state machine state
|
|
@@ -1834,20 +1834,20 @@ class Se {
|
|
|
1834
1834
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1835
1835
|
*/
|
|
1836
1836
|
calculateFocusDimensions(t, e, i) {
|
|
1837
|
-
const
|
|
1838
|
-
let a = s, h = a *
|
|
1839
|
-
const l = i.width *
|
|
1840
|
-
return h > l && (h = l, a = h /
|
|
1837
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), s = i.height * n, r = t / e;
|
|
1838
|
+
let a = s, h = a * r;
|
|
1839
|
+
const l = i.width * n;
|
|
1840
|
+
return h > l && (h = l, a = h / r), { width: h, height: a };
|
|
1841
1841
|
}
|
|
1842
1842
|
/**
|
|
1843
1843
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
1844
1844
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1845
1845
|
*/
|
|
1846
1846
|
calculateFocusTransform(t, e) {
|
|
1847
|
-
const i = t.width / 2,
|
|
1847
|
+
const i = t.width / 2, n = t.height / 2, s = i - e.x, r = n - e.y;
|
|
1848
1848
|
return {
|
|
1849
1849
|
x: s,
|
|
1850
|
-
y:
|
|
1850
|
+
y: r,
|
|
1851
1851
|
rotation: 0,
|
|
1852
1852
|
scale: 1
|
|
1853
1853
|
// No scale transform - dimensions are animated instead
|
|
@@ -1859,8 +1859,8 @@ class Se {
|
|
|
1859
1859
|
buildDimensionZoomTransform(t) {
|
|
1860
1860
|
const e = ["translate(-50%, -50%)"];
|
|
1861
1861
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
1862
|
-
const i = t.x ?? 0,
|
|
1863
|
-
e.push(`translate(${i}px, ${
|
|
1862
|
+
const i = t.x ?? 0, n = t.y ?? 0;
|
|
1863
|
+
e.push(`translate(${i}px, ${n}px)`);
|
|
1864
1864
|
}
|
|
1865
1865
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), e.join(" ");
|
|
1866
1866
|
}
|
|
@@ -1868,18 +1868,18 @@ class Se {
|
|
|
1868
1868
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1869
1869
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1870
1870
|
*/
|
|
1871
|
-
animateWithDimensions(t, e, i,
|
|
1871
|
+
animateWithDimensions(t, e, i, n, s, r, a, h) {
|
|
1872
1872
|
const l = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
|
|
1873
1873
|
return t.style.transition = "none", t.animate(
|
|
1874
1874
|
[
|
|
1875
1875
|
{
|
|
1876
1876
|
transform: l,
|
|
1877
|
-
width: `${
|
|
1877
|
+
width: `${n}px`,
|
|
1878
1878
|
height: `${s}px`
|
|
1879
1879
|
},
|
|
1880
1880
|
{
|
|
1881
1881
|
transform: u,
|
|
1882
|
-
width: `${
|
|
1882
|
+
width: `${r}px`,
|
|
1883
1883
|
height: `${a}px`
|
|
1884
1884
|
}
|
|
1885
1885
|
],
|
|
@@ -1900,7 +1900,7 @@ class Se {
|
|
|
1900
1900
|
* Remove focused styling from an element
|
|
1901
1901
|
*/
|
|
1902
1902
|
removeFocusedStyling(t, e) {
|
|
1903
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1903
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), Ut(t, this.focusedClassName), lt(t, this.defaultStyles), ht(t, this.defaultClassName);
|
|
1904
1904
|
}
|
|
1905
1905
|
/**
|
|
1906
1906
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1908,38 +1908,38 @@ class Se {
|
|
|
1908
1908
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1909
1909
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1910
1910
|
*/
|
|
1911
|
-
startFocusAnimation(t, e, i,
|
|
1912
|
-
const
|
|
1913
|
-
this.applyFocusedStyling(t,
|
|
1914
|
-
const
|
|
1911
|
+
startFocusAnimation(t, e, i, n, s) {
|
|
1912
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, h = t.offsetHeight, l = this.calculateFocusDimensions(a, h, e), u = this.calculateFocusTransform(e, i);
|
|
1913
|
+
this.applyFocusedStyling(t, Ot.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1914
|
+
const c = n ?? {
|
|
1915
1915
|
x: 0,
|
|
1916
1916
|
y: 0,
|
|
1917
1917
|
rotation: i.rotation,
|
|
1918
1918
|
scale: 1
|
|
1919
1919
|
// No scale - using dimensions
|
|
1920
|
-
}, d = (s == null ? void 0 : s.width) ?? a,
|
|
1920
|
+
}, d = (s == null ? void 0 : s.width) ?? a, m = (s == null ? void 0 : s.height) ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1921
1921
|
t,
|
|
1922
|
-
|
|
1922
|
+
c,
|
|
1923
1923
|
u,
|
|
1924
1924
|
d,
|
|
1925
|
-
|
|
1925
|
+
m,
|
|
1926
1926
|
l.width,
|
|
1927
1927
|
l.height,
|
|
1928
|
-
|
|
1928
|
+
b
|
|
1929
1929
|
), g = {
|
|
1930
1930
|
id: `focus-${Date.now()}`,
|
|
1931
1931
|
element: t,
|
|
1932
1932
|
animation: p,
|
|
1933
|
-
fromState:
|
|
1933
|
+
fromState: c,
|
|
1934
1934
|
toState: u,
|
|
1935
1935
|
startTime: performance.now(),
|
|
1936
|
-
duration:
|
|
1936
|
+
duration: b
|
|
1937
1937
|
};
|
|
1938
1938
|
return this.focusData = {
|
|
1939
1939
|
element: t,
|
|
1940
1940
|
originalState: i,
|
|
1941
1941
|
focusTransform: u,
|
|
1942
|
-
originalZIndex:
|
|
1942
|
+
originalZIndex: r,
|
|
1943
1943
|
originalWidth: a,
|
|
1944
1944
|
originalHeight: h,
|
|
1945
1945
|
focusWidth: l.width,
|
|
@@ -1958,37 +1958,37 @@ class Se {
|
|
|
1958
1958
|
* Animates back to original dimensions for consistent behavior
|
|
1959
1959
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1960
1960
|
*/
|
|
1961
|
-
startUnfocusAnimation(t, e, i,
|
|
1962
|
-
var
|
|
1963
|
-
t.style.zIndex = String(
|
|
1964
|
-
const s = i ?? ((
|
|
1961
|
+
startUnfocusAnimation(t, e, i, n) {
|
|
1962
|
+
var b, p, g, f, v;
|
|
1963
|
+
t.style.zIndex = String(Ot.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1964
|
+
const s = i ?? ((b = this.focusData) == null ? void 0 : b.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (n == null ? void 0 : n.width) ?? ((p = this.focusData) == null ? void 0 : p.focusWidth) ?? t.offsetWidth, a = (n == null ? void 0 : n.height) ?? ((g = this.focusData) == null ? void 0 : g.focusHeight) ?? t.offsetHeight, h = {
|
|
1965
1965
|
x: 0,
|
|
1966
1966
|
y: 0,
|
|
1967
1967
|
rotation: e.rotation,
|
|
1968
1968
|
scale: 1
|
|
1969
1969
|
// No scale - using dimensions
|
|
1970
|
-
}, l = ((
|
|
1970
|
+
}, l = ((f = this.focusData) == null ? void 0 : f.originalWidth) ?? t.offsetWidth, u = ((v = this.focusData) == null ? void 0 : v.originalHeight) ?? t.offsetHeight, c = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
|
|
1971
1971
|
t,
|
|
1972
1972
|
s,
|
|
1973
1973
|
h,
|
|
1974
|
-
|
|
1974
|
+
r,
|
|
1975
1975
|
a,
|
|
1976
1976
|
l,
|
|
1977
1977
|
u,
|
|
1978
|
-
|
|
1979
|
-
),
|
|
1978
|
+
c
|
|
1979
|
+
), m = {
|
|
1980
1980
|
id: `unfocus-${Date.now()}`,
|
|
1981
1981
|
element: t,
|
|
1982
1982
|
animation: d,
|
|
1983
1983
|
fromState: s,
|
|
1984
1984
|
toState: h,
|
|
1985
1985
|
startTime: performance.now(),
|
|
1986
|
-
duration:
|
|
1986
|
+
duration: c
|
|
1987
1987
|
};
|
|
1988
1988
|
return {
|
|
1989
1989
|
element: t,
|
|
1990
1990
|
originalState: e,
|
|
1991
|
-
animationHandle:
|
|
1991
|
+
animationHandle: m,
|
|
1992
1992
|
direction: "out",
|
|
1993
1993
|
originalWidth: l,
|
|
1994
1994
|
originalHeight: u
|
|
@@ -2006,24 +2006,24 @@ class Se {
|
|
|
2006
2006
|
/**
|
|
2007
2007
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2008
2008
|
*/
|
|
2009
|
-
resetElementInstantly(t, e, i,
|
|
2009
|
+
resetElementInstantly(t, e, i, n, s) {
|
|
2010
2010
|
this.animationEngine.cancelAllAnimations(t);
|
|
2011
|
-
const
|
|
2012
|
-
|
|
2011
|
+
const r = ["translate(-50%, -50%)"];
|
|
2012
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && s !== void 0 && (t.style.width = `${n}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, i);
|
|
2013
2013
|
}
|
|
2014
2014
|
/**
|
|
2015
2015
|
* Focus (zoom) an image to center of container
|
|
2016
2016
|
* Implements cross-animation when swapping focus
|
|
2017
2017
|
*/
|
|
2018
2018
|
async focusImage(t, e, i) {
|
|
2019
|
-
var s,
|
|
2019
|
+
var s, r, a, h, l, u, c, d, m, b, p, g;
|
|
2020
2020
|
if (this.currentFocus === t && this.state === I.FOCUSED)
|
|
2021
2021
|
return this.unfocusImage();
|
|
2022
2022
|
if (((s = this.incoming) == null ? void 0 : s.element) === t && this.state === I.FOCUSING) {
|
|
2023
|
-
const
|
|
2024
|
-
x:
|
|
2025
|
-
y:
|
|
2026
|
-
rotation:
|
|
2023
|
+
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), v = {
|
|
2024
|
+
x: f.x,
|
|
2025
|
+
y: f.y,
|
|
2026
|
+
rotation: f.rotation,
|
|
2027
2027
|
scale: 1
|
|
2028
2028
|
// No scale transform - using dimensions
|
|
2029
2029
|
}, w = {
|
|
@@ -2035,13 +2035,13 @@ class Se {
|
|
|
2035
2035
|
this.incoming.originalState,
|
|
2036
2036
|
v,
|
|
2037
2037
|
w
|
|
2038
|
-
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, ((
|
|
2038
|
+
), 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;
|
|
2039
2039
|
return;
|
|
2040
2040
|
}
|
|
2041
|
-
const
|
|
2041
|
+
const n = ++this.focusGeneration;
|
|
2042
2042
|
switch (this.state) {
|
|
2043
2043
|
case I.IDLE:
|
|
2044
|
-
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2044
|
+
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2045
2045
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2046
2046
|
break;
|
|
2047
2047
|
case I.FOCUSED:
|
|
@@ -2051,7 +2051,7 @@ class Se {
|
|
|
2051
2051
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2052
2052
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2053
2053
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2054
|
-
]), this.focusGeneration !==
|
|
2054
|
+
]), this.focusGeneration !== n)
|
|
2055
2055
|
return;
|
|
2056
2056
|
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;
|
|
2057
2057
|
break;
|
|
@@ -2062,24 +2062,24 @@ class Se {
|
|
|
2062
2062
|
((h = this.focusData) == null ? void 0 : h.originalZIndex) || "",
|
|
2063
2063
|
(l = this.focusData) == null ? void 0 : l.originalWidth,
|
|
2064
2064
|
(u = this.focusData) == null ? void 0 : u.originalHeight
|
|
2065
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2065
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2066
2066
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2067
2067
|
break;
|
|
2068
2068
|
case I.UNFOCUSING:
|
|
2069
2069
|
if (this.state = I.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2070
2070
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2071
2071
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2072
|
-
]), this.focusGeneration !==
|
|
2073
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2072
|
+
]), this.focusGeneration !== n) return;
|
|
2073
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2074
2074
|
break;
|
|
2075
2075
|
case I.CROSS_ANIMATING:
|
|
2076
2076
|
if (((d = this.incoming) == null ? void 0 : d.element) === t)
|
|
2077
2077
|
return;
|
|
2078
|
-
if (((
|
|
2079
|
-
const
|
|
2080
|
-
x:
|
|
2081
|
-
y:
|
|
2082
|
-
rotation:
|
|
2078
|
+
if (((m = this.outgoing) == null ? void 0 : m.element) === t) {
|
|
2079
|
+
const f = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0), v = {
|
|
2080
|
+
x: f.x,
|
|
2081
|
+
y: f.y,
|
|
2082
|
+
rotation: f.rotation,
|
|
2083
2083
|
scale: 1
|
|
2084
2084
|
// No scale - using dimensions
|
|
2085
2085
|
}, w = {
|
|
@@ -2087,7 +2087,7 @@ class Se {
|
|
|
2087
2087
|
height: t.offsetHeight
|
|
2088
2088
|
};
|
|
2089
2089
|
if (this.incoming) {
|
|
2090
|
-
const E = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0),
|
|
2090
|
+
const E = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), R = {
|
|
2091
2091
|
x: E.x,
|
|
2092
2092
|
y: E.y,
|
|
2093
2093
|
rotation: E.rotation,
|
|
@@ -2100,7 +2100,7 @@ class Se {
|
|
|
2100
2100
|
this.outgoing = this.startUnfocusAnimation(
|
|
2101
2101
|
this.incoming.element,
|
|
2102
2102
|
this.incoming.originalState,
|
|
2103
|
-
|
|
2103
|
+
R,
|
|
2104
2104
|
x
|
|
2105
2105
|
);
|
|
2106
2106
|
} else
|
|
@@ -2108,8 +2108,8 @@ class Se {
|
|
|
2108
2108
|
if (this.incoming = this.startFocusAnimation(t, e, i, v, w), await Promise.all([
|
|
2109
2109
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2110
2110
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2111
|
-
]), this.focusGeneration !==
|
|
2112
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2111
|
+
]), this.focusGeneration !== n) return;
|
|
2112
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2113
2113
|
return;
|
|
2114
2114
|
}
|
|
2115
2115
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2119,10 +2119,10 @@ class Se {
|
|
|
2119
2119
|
this.outgoing.originalWidth,
|
|
2120
2120
|
this.outgoing.originalHeight
|
|
2121
2121
|
), this.outgoing = null), this.incoming) {
|
|
2122
|
-
const
|
|
2123
|
-
x:
|
|
2124
|
-
y:
|
|
2125
|
-
rotation:
|
|
2122
|
+
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), v = {
|
|
2123
|
+
x: f.x,
|
|
2124
|
+
y: f.y,
|
|
2125
|
+
rotation: f.rotation,
|
|
2126
2126
|
scale: 1
|
|
2127
2127
|
// No scale - using dimensions
|
|
2128
2128
|
}, w = {
|
|
@@ -2139,7 +2139,7 @@ class Se {
|
|
|
2139
2139
|
if (this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2140
2140
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2141
2141
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2142
|
-
]), this.focusGeneration !==
|
|
2142
|
+
]), this.focusGeneration !== n) return;
|
|
2143
2143
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2144
2144
|
break;
|
|
2145
2145
|
}
|
|
@@ -2148,7 +2148,7 @@ class Se {
|
|
|
2148
2148
|
* Unfocus current image, returning it to original position
|
|
2149
2149
|
*/
|
|
2150
2150
|
async unfocusImage() {
|
|
2151
|
-
var s,
|
|
2151
|
+
var s, r, a;
|
|
2152
2152
|
const t = ++this.focusGeneration;
|
|
2153
2153
|
if (!this.currentFocus || !this.focusData) {
|
|
2154
2154
|
if (this.incoming && this.state === I.FOCUSING) {
|
|
@@ -2182,7 +2182,7 @@ class Se {
|
|
|
2182
2182
|
}, u = {
|
|
2183
2183
|
width: this.incoming.element.offsetWidth,
|
|
2184
2184
|
height: this.incoming.element.offsetHeight
|
|
2185
|
-
},
|
|
2185
|
+
}, c = this.startUnfocusAnimation(
|
|
2186
2186
|
this.incoming.element,
|
|
2187
2187
|
this.incoming.originalState,
|
|
2188
2188
|
l,
|
|
@@ -2190,14 +2190,14 @@ class Se {
|
|
|
2190
2190
|
);
|
|
2191
2191
|
if (await Promise.all([
|
|
2192
2192
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2193
|
-
this.waitForAnimation(
|
|
2193
|
+
this.waitForAnimation(c.animationHandle)
|
|
2194
2194
|
]), this.focusGeneration !== t) return;
|
|
2195
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((
|
|
2195
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(c.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;
|
|
2196
2196
|
return;
|
|
2197
2197
|
}
|
|
2198
2198
|
this.state = I.UNFOCUSING;
|
|
2199
|
-
const e = this.currentFocus, i = this.focusData.originalState,
|
|
2200
|
-
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e,
|
|
2199
|
+
const e = this.currentFocus, i = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2200
|
+
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE);
|
|
2201
2201
|
}
|
|
2202
2202
|
/**
|
|
2203
2203
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2233,11 +2233,34 @@ class Se {
|
|
|
2233
2233
|
var e, i;
|
|
2234
2234
|
return this.currentFocus === t || ((e = this.incoming) == null ? void 0 : e.element) === t || ((i = this.outgoing) == null ? void 0 : i.element) === t;
|
|
2235
2235
|
}
|
|
2236
|
+
/**
|
|
2237
|
+
* Apply a temporary horizontal drag offset to the focused image
|
|
2238
|
+
* Used during swipe gestures for visual feedback
|
|
2239
|
+
*/
|
|
2240
|
+
setDragOffset(t) {
|
|
2241
|
+
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2242
|
+
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2243
|
+
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(" ");
|
|
2244
|
+
}
|
|
2245
|
+
/**
|
|
2246
|
+
* Clear the drag offset, optionally animating back to center
|
|
2247
|
+
* @param animate - If true, animate back to center; if false, snap instantly
|
|
2248
|
+
* @param duration - Animation duration in ms (default 150)
|
|
2249
|
+
*/
|
|
2250
|
+
clearDragOffset(t, e = 150) {
|
|
2251
|
+
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2252
|
+
const i = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2253
|
+
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2254
|
+
const h = s.join(" ");
|
|
2255
|
+
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = h, setTimeout(() => {
|
|
2256
|
+
this.currentFocus === i && (i.style.transition = "none");
|
|
2257
|
+
}, e)) : (i.style.transition = "none", i.style.transform = h);
|
|
2258
|
+
}
|
|
2236
2259
|
/**
|
|
2237
2260
|
* Reset zoom state (cancels all animations)
|
|
2238
2261
|
*/
|
|
2239
2262
|
reset() {
|
|
2240
|
-
var t, e, i,
|
|
2263
|
+
var t, e, i, n;
|
|
2241
2264
|
this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
2242
2265
|
this.outgoing.element,
|
|
2243
2266
|
this.outgoing.originalState,
|
|
@@ -2249,7 +2272,7 @@ class Se {
|
|
|
2249
2272
|
this.incoming.originalState,
|
|
2250
2273
|
((e = this.focusData) == null ? void 0 : e.originalZIndex) || "",
|
|
2251
2274
|
(i = this.focusData) == null ? void 0 : i.originalWidth,
|
|
2252
|
-
(
|
|
2275
|
+
(n = this.focusData) == null ? void 0 : n.originalHeight
|
|
2253
2276
|
)), this.currentFocus && this.focusData && this.resetElementInstantly(
|
|
2254
2277
|
this.currentFocus,
|
|
2255
2278
|
this.focusData.originalState,
|
|
@@ -2259,7 +2282,77 @@ class Se {
|
|
|
2259
2282
|
), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2260
2283
|
}
|
|
2261
2284
|
}
|
|
2262
|
-
class
|
|
2285
|
+
const Te = 50, Re = 0.5, Ae = 20, Me = 0.3, ze = 150, Fe = 30, mt = class mt {
|
|
2286
|
+
constructor(t, e) {
|
|
2287
|
+
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2288
|
+
}
|
|
2289
|
+
/**
|
|
2290
|
+
* Start listening for touch events
|
|
2291
|
+
*/
|
|
2292
|
+
enable() {
|
|
2293
|
+
this.enabled || (this.enabled = !0, this.container.style.touchAction = "pan-y", this.container.addEventListener("touchstart", this.boundTouchStart, { passive: !1 }), this.container.addEventListener("touchmove", this.boundTouchMove, { passive: !1 }), this.container.addEventListener("touchend", this.boundTouchEnd, { passive: !0 }), this.container.addEventListener("touchcancel", this.boundTouchCancel, { passive: !0 }));
|
|
2294
|
+
}
|
|
2295
|
+
/**
|
|
2296
|
+
* Stop listening for touch events
|
|
2297
|
+
*/
|
|
2298
|
+
disable() {
|
|
2299
|
+
var t;
|
|
2300
|
+
this.enabled && (this.enabled = !1, this.container.style.touchAction = "", this.container.removeEventListener("touchstart", this.boundTouchStart), this.container.removeEventListener("touchmove", this.boundTouchMove), this.container.removeEventListener("touchend", this.boundTouchEnd), this.container.removeEventListener("touchcancel", this.boundTouchCancel), (t = this.touchState) != null && t.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null);
|
|
2301
|
+
}
|
|
2302
|
+
/**
|
|
2303
|
+
* Clean up all event listeners
|
|
2304
|
+
*/
|
|
2305
|
+
destroy() {
|
|
2306
|
+
this.disable();
|
|
2307
|
+
}
|
|
2308
|
+
/**
|
|
2309
|
+
* Check if a touch interaction happened recently
|
|
2310
|
+
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2311
|
+
*/
|
|
2312
|
+
hadRecentTouch() {
|
|
2313
|
+
return Date.now() - this.recentTouchTimestamp < mt.TOUCH_CLICK_DELAY;
|
|
2314
|
+
}
|
|
2315
|
+
handleTouchStart(t) {
|
|
2316
|
+
if (t.touches.length !== 1) return;
|
|
2317
|
+
this.recentTouchTimestamp = Date.now();
|
|
2318
|
+
const e = t.touches[0];
|
|
2319
|
+
this.touchState = {
|
|
2320
|
+
startX: e.clientX,
|
|
2321
|
+
startY: e.clientY,
|
|
2322
|
+
startTime: performance.now(),
|
|
2323
|
+
currentX: e.clientX,
|
|
2324
|
+
isDragging: !1,
|
|
2325
|
+
isHorizontalSwipe: null
|
|
2326
|
+
};
|
|
2327
|
+
}
|
|
2328
|
+
handleTouchMove(t) {
|
|
2329
|
+
if (!this.touchState || t.touches.length !== 1) return;
|
|
2330
|
+
const e = t.touches[0], i = e.clientX - this.touchState.startX, n = e.clientY - this.touchState.startY;
|
|
2331
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + n * n) > 10) {
|
|
2332
|
+
const a = Math.atan2(Math.abs(n), Math.abs(i)) * (180 / Math.PI);
|
|
2333
|
+
this.touchState.isHorizontalSwipe = a <= Fe;
|
|
2334
|
+
}
|
|
2335
|
+
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2336
|
+
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2337
|
+
const s = i * Me;
|
|
2338
|
+
this.callbacks.onDragOffset(s);
|
|
2339
|
+
}
|
|
2340
|
+
}
|
|
2341
|
+
handleTouchEnd(t) {
|
|
2342
|
+
if (!this.touchState) return;
|
|
2343
|
+
this.recentTouchTimestamp = Date.now();
|
|
2344
|
+
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, n = Math.abs(e) / i, s = Math.abs(e);
|
|
2345
|
+
let r = !1;
|
|
2346
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= Te || n >= Re && s >= Ae) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2347
|
+
}
|
|
2348
|
+
handleTouchCancel(t) {
|
|
2349
|
+
var e;
|
|
2350
|
+
(e = this.touchState) != null && e.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2351
|
+
}
|
|
2352
|
+
};
|
|
2353
|
+
mt.TOUCH_CLICK_DELAY = 300;
|
|
2354
|
+
let Et = mt;
|
|
2355
|
+
class Ce {
|
|
2263
2356
|
constructor(t = {}) {
|
|
2264
2357
|
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)
|
|
2265
2358
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2273,7 +2366,7 @@ class Ie {
|
|
|
2273
2366
|
for (const e of this.sources)
|
|
2274
2367
|
if (e.type === "folder")
|
|
2275
2368
|
for (const i of e.folders) {
|
|
2276
|
-
const
|
|
2369
|
+
const n = e.recursive !== void 0 ? e.recursive : !0, s = await this.loadFromFolder(i, t, n);
|
|
2277
2370
|
this._discoveredUrls.push(...s);
|
|
2278
2371
|
}
|
|
2279
2372
|
else if (e.type === "files") {
|
|
@@ -2319,9 +2412,9 @@ class Ie {
|
|
|
2319
2412
|
// Alternative format
|
|
2320
2413
|
];
|
|
2321
2414
|
for (const i of e) {
|
|
2322
|
-
const
|
|
2323
|
-
if (
|
|
2324
|
-
return
|
|
2415
|
+
const n = t.match(i);
|
|
2416
|
+
if (n && n[1])
|
|
2417
|
+
return n[1];
|
|
2325
2418
|
}
|
|
2326
2419
|
return null;
|
|
2327
2420
|
}
|
|
@@ -2333,15 +2426,15 @@ class Ie {
|
|
|
2333
2426
|
* @returns Promise resolving to array of image URLs
|
|
2334
2427
|
*/
|
|
2335
2428
|
async loadFromFolder(t, e, i = !0) {
|
|
2336
|
-
const
|
|
2337
|
-
if (!
|
|
2429
|
+
const n = this.extractFolderId(t);
|
|
2430
|
+
if (!n)
|
|
2338
2431
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2339
2432
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2340
|
-
return this.loadImagesDirectly(
|
|
2433
|
+
return this.loadImagesDirectly(n, e);
|
|
2341
2434
|
try {
|
|
2342
|
-
return i ? await this.loadImagesRecursively(
|
|
2435
|
+
return i ? await this.loadImagesRecursively(n, e) : await this.loadImagesFromSingleFolder(n, e);
|
|
2343
2436
|
} catch (s) {
|
|
2344
|
-
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(
|
|
2437
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(n, e);
|
|
2345
2438
|
}
|
|
2346
2439
|
}
|
|
2347
2440
|
/**
|
|
@@ -2351,7 +2444,7 @@ class Ie {
|
|
|
2351
2444
|
* @returns Promise resolving to array of image URLs
|
|
2352
2445
|
*/
|
|
2353
2446
|
async loadImagesFromSingleFolder(t, e) {
|
|
2354
|
-
const i = [],
|
|
2447
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2355
2448
|
if (!a.ok)
|
|
2356
2449
|
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2357
2450
|
const l = (await a.json()).files.filter(
|
|
@@ -2369,22 +2462,22 @@ class Ie {
|
|
|
2369
2462
|
*/
|
|
2370
2463
|
async loadFiles(t, e) {
|
|
2371
2464
|
const i = [];
|
|
2372
|
-
for (const
|
|
2373
|
-
const s = this.extractFileId(
|
|
2465
|
+
for (const n of t) {
|
|
2466
|
+
const s = this.extractFileId(n);
|
|
2374
2467
|
if (!s) {
|
|
2375
|
-
this.log(`Skipping invalid file URL: ${
|
|
2468
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2376
2469
|
continue;
|
|
2377
2470
|
}
|
|
2378
2471
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2379
2472
|
try {
|
|
2380
|
-
const
|
|
2473
|
+
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2381
2474
|
if (a.ok) {
|
|
2382
2475
|
const h = await a.json();
|
|
2383
2476
|
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
|
|
2384
2477
|
} else
|
|
2385
2478
|
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2386
|
-
} catch (
|
|
2387
|
-
this.log(`Error fetching metadata for file ${s}:`,
|
|
2479
|
+
} catch (r) {
|
|
2480
|
+
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2388
2481
|
}
|
|
2389
2482
|
else
|
|
2390
2483
|
i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
@@ -2408,9 +2501,9 @@ class Ie {
|
|
|
2408
2501
|
// Generic id parameter
|
|
2409
2502
|
];
|
|
2410
2503
|
for (const i of e) {
|
|
2411
|
-
const
|
|
2412
|
-
if (
|
|
2413
|
-
return
|
|
2504
|
+
const n = t.match(i);
|
|
2505
|
+
if (n && n[1])
|
|
2506
|
+
return n[1];
|
|
2414
2507
|
}
|
|
2415
2508
|
return null;
|
|
2416
2509
|
}
|
|
@@ -2421,20 +2514,20 @@ class Ie {
|
|
|
2421
2514
|
* @returns Promise resolving to array of image URLs
|
|
2422
2515
|
*/
|
|
2423
2516
|
async loadImagesRecursively(t, e) {
|
|
2424
|
-
const i = [],
|
|
2517
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2425
2518
|
if (!a.ok)
|
|
2426
2519
|
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2427
2520
|
const h = await a.json(), l = h.files.filter(
|
|
2428
|
-
(
|
|
2521
|
+
(c) => c.mimeType.startsWith("image/") && e.isAllowed(c.name)
|
|
2429
2522
|
), u = h.files.filter(
|
|
2430
|
-
(
|
|
2523
|
+
(c) => c.mimeType === "application/vnd.google-apps.folder"
|
|
2431
2524
|
);
|
|
2432
|
-
this.log(`Found ${h.files.length} total items in folder ${t}`), h.files.forEach((
|
|
2433
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2525
|
+
this.log(`Found ${h.files.length} total items in folder ${t}`), h.files.forEach((c) => this.log(` - File: ${c.name} (${c.mimeType})`)), this.log(`- ${l.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), l.forEach((c) => {
|
|
2526
|
+
i.push(`https://lh3.googleusercontent.com/d/${c.id}=s1600`), this.log(`Added file: ${c.name}`);
|
|
2434
2527
|
});
|
|
2435
|
-
for (const
|
|
2436
|
-
this.log(`Loading images from subfolder: ${
|
|
2437
|
-
const d = await this.loadImagesRecursively(
|
|
2528
|
+
for (const c of u) {
|
|
2529
|
+
this.log(`Loading images from subfolder: ${c.name}`);
|
|
2530
|
+
const d = await this.loadImagesRecursively(c.id, e);
|
|
2438
2531
|
i.push(...d);
|
|
2439
2532
|
}
|
|
2440
2533
|
return i;
|
|
@@ -2448,10 +2541,10 @@ class Ie {
|
|
|
2448
2541
|
*/
|
|
2449
2542
|
async loadImagesDirectly(t, e) {
|
|
2450
2543
|
try {
|
|
2451
|
-
const i = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2452
|
-
if (!
|
|
2544
|
+
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(i, { mode: "cors" });
|
|
2545
|
+
if (!n.ok)
|
|
2453
2546
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2454
|
-
const s = await
|
|
2547
|
+
const s = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2455
2548
|
return [...new Set(a.map((u) => u[1]))].map(
|
|
2456
2549
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2457
2550
|
);
|
|
@@ -2480,7 +2573,7 @@ class Ie {
|
|
|
2480
2573
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2481
2574
|
}
|
|
2482
2575
|
}
|
|
2483
|
-
class
|
|
2576
|
+
class Le {
|
|
2484
2577
|
constructor(t = {}) {
|
|
2485
2578
|
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.sources = t.sources ?? [], this.debugLogging = t.debugLogging ?? !1, !this.sources || this.sources.length === 0)
|
|
2486
2579
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -2544,13 +2637,13 @@ class Ee {
|
|
|
2544
2637
|
if (!Array.isArray(t))
|
|
2545
2638
|
return console.warn("URLs must be an array:", t), [];
|
|
2546
2639
|
const i = [];
|
|
2547
|
-
for (const
|
|
2548
|
-
const s =
|
|
2640
|
+
for (const n of t) {
|
|
2641
|
+
const s = n.split("/").pop() || n;
|
|
2549
2642
|
if (!e.isAllowed(s)) {
|
|
2550
|
-
this.log(`Skipping filtered URL: ${
|
|
2643
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
2551
2644
|
continue;
|
|
2552
2645
|
}
|
|
2553
|
-
this.validateUrls ? await this.validateUrl(
|
|
2646
|
+
this.validateUrls ? await this.validateUrl(n) ? i.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : i.push(n);
|
|
2554
2647
|
}
|
|
2555
2648
|
return i;
|
|
2556
2649
|
}
|
|
@@ -2566,16 +2659,16 @@ class Ee {
|
|
|
2566
2659
|
return console.warn("basePath is required for path-type sources"), [];
|
|
2567
2660
|
if (!Array.isArray(e))
|
|
2568
2661
|
return console.warn("files must be an array:", e), [];
|
|
2569
|
-
const
|
|
2662
|
+
const n = [];
|
|
2570
2663
|
for (const s of e) {
|
|
2571
2664
|
if (!i.isAllowed(s)) {
|
|
2572
2665
|
this.log(`Skipping filtered file: ${s}`);
|
|
2573
2666
|
continue;
|
|
2574
2667
|
}
|
|
2575
|
-
const
|
|
2576
|
-
this.validateUrls ? await this.validateUrl(
|
|
2668
|
+
const r = this.constructUrl(t, s);
|
|
2669
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2577
2670
|
}
|
|
2578
|
-
return
|
|
2671
|
+
return n;
|
|
2579
2672
|
}
|
|
2580
2673
|
/**
|
|
2581
2674
|
* Validate a single URL using HEAD request
|
|
@@ -2596,11 +2689,11 @@ class Ee {
|
|
|
2596
2689
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2597
2690
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2598
2691
|
try {
|
|
2599
|
-
const i = new AbortController(),
|
|
2692
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), this.validationTimeout), s = await fetch(t, {
|
|
2600
2693
|
method: "HEAD",
|
|
2601
2694
|
signal: i.signal
|
|
2602
2695
|
});
|
|
2603
|
-
return clearTimeout(
|
|
2696
|
+
return clearTimeout(n), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
2604
2697
|
} catch (i) {
|
|
2605
2698
|
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2606
2699
|
}
|
|
@@ -2617,8 +2710,8 @@ class Ee {
|
|
|
2617
2710
|
return `${i}/${e}`;
|
|
2618
2711
|
if (typeof window > "u")
|
|
2619
2712
|
return `${i}/${e}`;
|
|
2620
|
-
const
|
|
2621
|
-
return `${
|
|
2713
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2714
|
+
return `${n}${r}/${e}`;
|
|
2622
2715
|
}
|
|
2623
2716
|
/**
|
|
2624
2717
|
* Check if URL is absolute (contains protocol)
|
|
@@ -2640,7 +2733,7 @@ class Ee {
|
|
|
2640
2733
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2641
2734
|
}
|
|
2642
2735
|
}
|
|
2643
|
-
class
|
|
2736
|
+
class Oe {
|
|
2644
2737
|
constructor(t) {
|
|
2645
2738
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2646
2739
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -2652,16 +2745,16 @@ class Re {
|
|
|
2652
2745
|
*/
|
|
2653
2746
|
async prepare(t) {
|
|
2654
2747
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2655
|
-
const e = this.loaders.map((i,
|
|
2656
|
-
this.log(`Loader ${
|
|
2748
|
+
const e = this.loaders.map((i, n) => i.prepare(t).then(() => {
|
|
2749
|
+
this.log(`Loader ${n} prepared with ${i.imagesLength()} images`);
|
|
2657
2750
|
}).catch((s) => {
|
|
2658
|
-
console.warn(`Loader ${
|
|
2751
|
+
console.warn(`Loader ${n} failed to prepare:`, s);
|
|
2659
2752
|
}));
|
|
2660
2753
|
await Promise.all(e);
|
|
2661
2754
|
for (const i of this.loaders)
|
|
2662
2755
|
if (i.isPrepared()) {
|
|
2663
|
-
const
|
|
2664
|
-
this._discoveredUrls.push(...
|
|
2756
|
+
const n = i.imageURLs();
|
|
2757
|
+
this._discoveredUrls.push(...n);
|
|
2665
2758
|
}
|
|
2666
2759
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2667
2760
|
}
|
|
@@ -2697,7 +2790,7 @@ class Re {
|
|
|
2697
2790
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2698
2791
|
}
|
|
2699
2792
|
}
|
|
2700
|
-
class
|
|
2793
|
+
class $e {
|
|
2701
2794
|
/**
|
|
2702
2795
|
* Create a new ImageFilter
|
|
2703
2796
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2719,8 +2812,8 @@ class Ae {
|
|
|
2719
2812
|
* @returns True if the file extension is allowed
|
|
2720
2813
|
*/
|
|
2721
2814
|
isAllowed(t) {
|
|
2722
|
-
var
|
|
2723
|
-
const i = (
|
|
2815
|
+
var n;
|
|
2816
|
+
const i = (n = t.split("?")[0].split(".").pop()) == null ? void 0 : n.toLowerCase();
|
|
2724
2817
|
return i ? this.allowedExtensions.includes(i) : !1;
|
|
2725
2818
|
}
|
|
2726
2819
|
/**
|
|
@@ -2735,7 +2828,7 @@ class Ae {
|
|
|
2735
2828
|
// isAllowedDate(date: Date): boolean
|
|
2736
2829
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2737
2830
|
}
|
|
2738
|
-
const
|
|
2831
|
+
const De = `
|
|
2739
2832
|
.fbn-ic-gallery {
|
|
2740
2833
|
position: relative;
|
|
2741
2834
|
width: 100%;
|
|
@@ -2776,34 +2869,34 @@ const Te = `
|
|
|
2776
2869
|
display: none !important;
|
|
2777
2870
|
}
|
|
2778
2871
|
`;
|
|
2779
|
-
function
|
|
2872
|
+
function Pe() {
|
|
2780
2873
|
if (typeof document > "u") return;
|
|
2781
|
-
const
|
|
2782
|
-
if (document.getElementById(
|
|
2874
|
+
const o = "fbn-ic-functional-styles";
|
|
2875
|
+
if (document.getElementById(o)) return;
|
|
2783
2876
|
const t = document.createElement("style");
|
|
2784
|
-
t.id =
|
|
2877
|
+
t.id = o, t.textContent = De, document.head.appendChild(t);
|
|
2785
2878
|
}
|
|
2786
|
-
class
|
|
2879
|
+
class Ue {
|
|
2787
2880
|
constructor(t = {}) {
|
|
2788
|
-
var i,
|
|
2789
|
-
this.fullConfig =
|
|
2881
|
+
var i, n, s, r, a, h;
|
|
2882
|
+
this.fullConfig = Bt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.animationEngine = new Jt(this.fullConfig.animation), this.layoutEngine = new we({
|
|
2790
2883
|
layout: this.fullConfig.layout,
|
|
2791
2884
|
image: this.fullConfig.image
|
|
2792
|
-
}), this.zoomEngine = new
|
|
2793
|
-
const e = this.fullConfig.animation.entry ||
|
|
2794
|
-
this.entryAnimationEngine = new
|
|
2885
|
+
}), this.zoomEngine = new Ee(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 = (h = (a = this.fullConfig.styling) == null ? void 0 : a.hover) == null ? void 0 : h.className;
|
|
2886
|
+
const e = this.fullConfig.animation.entry || y.animation.entry;
|
|
2887
|
+
this.entryAnimationEngine = new le(
|
|
2795
2888
|
e,
|
|
2796
2889
|
this.fullConfig.layout.algorithm
|
|
2797
|
-
), this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2890
|
+
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2798
2891
|
}
|
|
2799
2892
|
/**
|
|
2800
2893
|
* Create image filter based on config
|
|
2801
2894
|
*/
|
|
2802
2895
|
createImageFilter() {
|
|
2803
|
-
var i,
|
|
2896
|
+
var i, n;
|
|
2804
2897
|
const t = this.fullConfig.loader.type;
|
|
2805
2898
|
let e;
|
|
2806
|
-
return t === "googleDrive" ? e = (i = this.fullConfig.loader.googleDrive) == null ? void 0 : i.allowedExtensions : e = (
|
|
2899
|
+
return t === "googleDrive" ? e = (i = this.fullConfig.loader.googleDrive) == null ? void 0 : i.allowedExtensions : e = (n = this.fullConfig.loader.static) == null ? void 0 : n.allowedExtensions, new $e(e);
|
|
2807
2900
|
}
|
|
2808
2901
|
/**
|
|
2809
2902
|
* Create appropriate image loader based on config
|
|
@@ -2818,18 +2911,18 @@ class ze {
|
|
|
2818
2911
|
const e = t.type;
|
|
2819
2912
|
if (e === "static") {
|
|
2820
2913
|
const i = t.static;
|
|
2821
|
-
return new
|
|
2914
|
+
return new Le(i);
|
|
2822
2915
|
} else if (e === "composite") {
|
|
2823
|
-
const i = t.composite,
|
|
2916
|
+
const i = t.composite, n = i.loaders.map(
|
|
2824
2917
|
(s) => this.createLoaderFromConfig(s)
|
|
2825
2918
|
);
|
|
2826
|
-
return new
|
|
2827
|
-
loaders:
|
|
2919
|
+
return new Oe({
|
|
2920
|
+
loaders: n,
|
|
2828
2921
|
debugLogging: i.debugLogging
|
|
2829
2922
|
});
|
|
2830
2923
|
} else {
|
|
2831
2924
|
const i = t.googleDrive;
|
|
2832
|
-
return new
|
|
2925
|
+
return new Ce(i);
|
|
2833
2926
|
}
|
|
2834
2927
|
}
|
|
2835
2928
|
/**
|
|
@@ -2837,11 +2930,18 @@ class ze {
|
|
|
2837
2930
|
*/
|
|
2838
2931
|
async init() {
|
|
2839
2932
|
try {
|
|
2840
|
-
if (
|
|
2933
|
+
if (Pe(), this.containerRef)
|
|
2841
2934
|
this.containerEl = this.containerRef;
|
|
2842
2935
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2843
2936
|
throw new Error(`Container #${this.containerId} not found`);
|
|
2844
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.
|
|
2937
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new Et(this.containerEl, {
|
|
2938
|
+
onNext: () => this.navigateToNextImage(),
|
|
2939
|
+
onPrev: () => this.navigateToPreviousImage(),
|
|
2940
|
+
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
2941
|
+
onDragEnd: (t) => {
|
|
2942
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, ze);
|
|
2943
|
+
}
|
|
2944
|
+
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2845
2945
|
} catch (t) {
|
|
2846
2946
|
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
2847
2947
|
}
|
|
@@ -2851,9 +2951,11 @@ class ze {
|
|
|
2851
2951
|
}
|
|
2852
2952
|
setupEventListeners() {
|
|
2853
2953
|
document.addEventListener("keydown", (t) => {
|
|
2854
|
-
|
|
2954
|
+
var e;
|
|
2955
|
+
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (e = this.swipeEngine) == null || e.disable()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
2855
2956
|
}), document.addEventListener("click", (t) => {
|
|
2856
|
-
|
|
2957
|
+
var e, i;
|
|
2958
|
+
(e = this.swipeEngine) != null && e.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (i = this.swipeEngine) == null || i.disable());
|
|
2857
2959
|
}), window.addEventListener("resize", () => this.handleResize());
|
|
2858
2960
|
}
|
|
2859
2961
|
/**
|
|
@@ -2887,8 +2989,8 @@ class ze {
|
|
|
2887
2989
|
}, 500));
|
|
2888
2990
|
}
|
|
2889
2991
|
getImageHeight() {
|
|
2890
|
-
const t = window.innerWidth, e = this.fullConfig.layout.responsive, i = this.fullConfig.image.sizing,
|
|
2891
|
-
return e ? t <= e.mobile.maxWidth ? Math.min(100,
|
|
2992
|
+
const t = window.innerWidth, e = this.fullConfig.layout.responsive, i = this.fullConfig.image.sizing, n = (i == null ? void 0 : i.maxSize) ?? 400;
|
|
2993
|
+
return e ? t <= e.mobile.maxWidth ? Math.min(100, n) : t <= e.tablet.maxWidth ? Math.min(180, n) : Math.min(225, n) : t <= 767 ? Math.min(100, n) : t <= 1199 ? Math.min(180, n) : Math.min(225, n);
|
|
2892
2994
|
}
|
|
2893
2995
|
/**
|
|
2894
2996
|
* Get container bounds for layout calculations
|
|
@@ -2911,15 +3013,15 @@ class ze {
|
|
|
2911
3013
|
this.showError("No images found."), this.showLoading(!1);
|
|
2912
3014
|
return;
|
|
2913
3015
|
}
|
|
2914
|
-
const i = this.getContainerBounds(),
|
|
2915
|
-
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${
|
|
2916
|
-
const
|
|
3016
|
+
const i = this.getContainerBounds(), n = this.getImageHeight(), s = window.innerWidth;
|
|
3017
|
+
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3018
|
+
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
2917
3019
|
i,
|
|
2918
3020
|
t,
|
|
2919
|
-
|
|
3021
|
+
n,
|
|
2920
3022
|
s
|
|
2921
3023
|
);
|
|
2922
|
-
this.logDebug(`Adaptive sizing result: height=${
|
|
3024
|
+
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
2923
3025
|
} catch (t) {
|
|
2924
3026
|
console.error("Error loading images:", t), t instanceof Error && this.showError(t.message || "Failed to load images."), this.showLoading(!1);
|
|
2925
3027
|
}
|
|
@@ -2934,29 +3036,29 @@ class ze {
|
|
|
2934
3036
|
if (!this.containerEl) return;
|
|
2935
3037
|
const i = this.getContainerBounds();
|
|
2936
3038
|
this.currentImageHeight = e;
|
|
2937
|
-
const
|
|
3039
|
+
const n = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
2938
3040
|
this.imageLayouts = s, this.displayQueue = [];
|
|
2939
|
-
let
|
|
3041
|
+
let r = 0;
|
|
2940
3042
|
const a = (l) => {
|
|
2941
3043
|
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(() => {
|
|
2942
3044
|
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)) {
|
|
2943
3045
|
const d = {
|
|
2944
3046
|
x: parseFloat(l.dataset.startX),
|
|
2945
3047
|
y: parseFloat(l.dataset.startY)
|
|
2946
|
-
},
|
|
3048
|
+
}, m = {
|
|
2947
3049
|
x: parseFloat(l.dataset.endX),
|
|
2948
3050
|
y: parseFloat(l.dataset.endY)
|
|
2949
|
-
},
|
|
2950
|
-
|
|
3051
|
+
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), f = parseFloat(l.dataset.scale), v = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : g, w = l.dataset.startScale ? parseFloat(l.dataset.startScale) : f, E = this.entryAnimationEngine.getTiming();
|
|
3052
|
+
ae({
|
|
2951
3053
|
element: l,
|
|
2952
3054
|
startPosition: d,
|
|
2953
|
-
endPosition:
|
|
3055
|
+
endPosition: m,
|
|
2954
3056
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
2955
3057
|
duration: E.duration,
|
|
2956
|
-
imageWidth:
|
|
3058
|
+
imageWidth: b,
|
|
2957
3059
|
imageHeight: p,
|
|
2958
3060
|
rotation: g,
|
|
2959
|
-
scale:
|
|
3061
|
+
scale: f,
|
|
2960
3062
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
2961
3063
|
startRotation: v,
|
|
2962
3064
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
@@ -2966,10 +3068,10 @@ class ze {
|
|
|
2966
3068
|
const d = l.dataset.finalTransform || "";
|
|
2967
3069
|
l.style.transform = d;
|
|
2968
3070
|
}
|
|
2969
|
-
const
|
|
2970
|
-
if (this.fullConfig.debug &&
|
|
3071
|
+
const c = parseInt(l.dataset.imageId || "0");
|
|
3072
|
+
if (this.fullConfig.debug && c < 3) {
|
|
2971
3073
|
const d = l.dataset.finalTransform || "";
|
|
2972
|
-
console.log(`Image ${
|
|
3074
|
+
console.log(`Image ${c} final state:`, {
|
|
2973
3075
|
left: l.style.left,
|
|
2974
3076
|
top: l.style.top,
|
|
2975
3077
|
width: l.style.width,
|
|
@@ -2980,7 +3082,7 @@ class ze {
|
|
|
2980
3082
|
pathType: this.entryAnimationEngine.getPathType()
|
|
2981
3083
|
});
|
|
2982
3084
|
}
|
|
2983
|
-
}),
|
|
3085
|
+
}), r++);
|
|
2984
3086
|
}, h = () => {
|
|
2985
3087
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
2986
3088
|
for (; this.displayQueue.length > 0; ) {
|
|
@@ -2990,7 +3092,7 @@ class ze {
|
|
|
2990
3092
|
return;
|
|
2991
3093
|
}
|
|
2992
3094
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
2993
|
-
if (
|
|
3095
|
+
if (n !== this.loadGeneration) {
|
|
2994
3096
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
2995
3097
|
return;
|
|
2996
3098
|
}
|
|
@@ -2998,83 +3100,84 @@ class ze {
|
|
|
2998
3100
|
const l = this.displayQueue.shift();
|
|
2999
3101
|
l && a(l);
|
|
3000
3102
|
}
|
|
3001
|
-
|
|
3103
|
+
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3002
3104
|
}, this.fullConfig.animation.queue.interval);
|
|
3003
3105
|
};
|
|
3004
3106
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3005
3107
|
const l = new IntersectionObserver((u) => {
|
|
3006
|
-
u.forEach((
|
|
3007
|
-
|
|
3108
|
+
u.forEach((c) => {
|
|
3109
|
+
c.isIntersecting && (h(), l.disconnect());
|
|
3008
3110
|
});
|
|
3009
3111
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3010
3112
|
l.observe(this.containerEl);
|
|
3011
3113
|
} else
|
|
3012
3114
|
h();
|
|
3013
3115
|
this.fullConfig.layout.debugCenters && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), s.forEach((l, u) => {
|
|
3014
|
-
const
|
|
3015
|
-
|
|
3016
|
-
const d = l.x,
|
|
3017
|
-
|
|
3116
|
+
const c = document.createElement("div");
|
|
3117
|
+
c.className = "fbn-ic-debug-center", c.style.position = "absolute", c.style.width = "12px", c.style.height = "12px", c.style.borderRadius = "50%", c.style.backgroundColor = "red", c.style.border = "2px solid yellow", c.style.zIndex = "9999", c.style.pointerEvents = "none";
|
|
3118
|
+
const d = l.x, m = l.y;
|
|
3119
|
+
c.style.left = `${d - 6}px`, c.style.top = `${m - 6}px`, c.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(m)})`, this.containerEl.appendChild(c);
|
|
3018
3120
|
})), t.forEach((l, u) => {
|
|
3019
|
-
var
|
|
3020
|
-
const
|
|
3021
|
-
|
|
3121
|
+
var m, b;
|
|
3122
|
+
const c = document.createElement("img");
|
|
3123
|
+
c.referrerPolicy = "no-referrer", c.classList.add("fbn-ic-image"), c.dataset.imageId = String(u);
|
|
3022
3124
|
const d = s[u];
|
|
3023
|
-
|
|
3024
|
-
this.hoveredImage = { element:
|
|
3025
|
-
}),
|
|
3026
|
-
this.hoveredImage = null, this.zoomEngine.isInvolved(
|
|
3027
|
-
}),
|
|
3028
|
-
p.stopPropagation(), this.handleImageClick(
|
|
3029
|
-
}),
|
|
3030
|
-
if (
|
|
3125
|
+
c.style.position = "absolute", c.style.width = "auto", c.style.height = `${e}px`, c.style.left = `${d.x}px`, c.style.top = `${d.y}px`, d.borderColor && !((b = (m = this.fullConfig.styling) == null ? void 0 : m.default) != null && b.border) && (c.style.border = `5px solid ${d.borderColor}`, c.style.boxSizing = "border-box"), d.zIndex && (c.style.zIndex = String(d.zIndex)), lt(c, this.defaultStyles), ht(c, this.defaultClassName), c.addEventListener("mouseenter", () => {
|
|
3126
|
+
this.hoveredImage = { element: c, layout: d }, this.zoomEngine.isInvolved(c) || (lt(c, this.hoverStyles), ht(c, this.hoverClassName));
|
|
3127
|
+
}), c.addEventListener("mouseleave", () => {
|
|
3128
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(c) || (lt(c, this.defaultStyles), Ut(c, this.hoverClassName), ht(c, this.defaultClassName));
|
|
3129
|
+
}), c.addEventListener("click", (p) => {
|
|
3130
|
+
p.stopPropagation(), this.handleImageClick(c, d);
|
|
3131
|
+
}), c.style.opacity = "0", c.style.transition = this.entryAnimationEngine.getTransitionCSS(), c.onload = () => {
|
|
3132
|
+
if (n !== this.loadGeneration)
|
|
3031
3133
|
return;
|
|
3032
|
-
const p =
|
|
3033
|
-
|
|
3034
|
-
const
|
|
3035
|
-
|
|
3134
|
+
const p = c.naturalWidth / c.naturalHeight, g = e * p;
|
|
3135
|
+
c.style.width = `${g}px`;
|
|
3136
|
+
const f = { x: d.x, y: d.y }, v = { width: g, height: e }, w = this.entryAnimationEngine.calculateStartPosition(
|
|
3137
|
+
f,
|
|
3036
3138
|
v,
|
|
3037
3139
|
i,
|
|
3038
3140
|
u,
|
|
3039
3141
|
t.length
|
|
3040
|
-
), E = this.entryAnimationEngine.calculateStartRotation(d.rotation),
|
|
3142
|
+
), E = this.entryAnimationEngine.calculateStartRotation(d.rotation), R = this.entryAnimationEngine.calculateStartScale(d.scale), x = this.entryAnimationEngine.buildFinalTransform(
|
|
3041
3143
|
d.rotation,
|
|
3042
3144
|
d.scale,
|
|
3043
3145
|
g,
|
|
3044
3146
|
e
|
|
3045
3147
|
), L = this.entryAnimationEngine.buildStartTransform(
|
|
3046
3148
|
w,
|
|
3047
|
-
|
|
3149
|
+
f,
|
|
3048
3150
|
d.rotation,
|
|
3049
3151
|
d.scale,
|
|
3050
3152
|
g,
|
|
3051
3153
|
e,
|
|
3052
3154
|
E,
|
|
3053
|
-
|
|
3155
|
+
R
|
|
3054
3156
|
);
|
|
3055
3157
|
this.fullConfig.debug && u < 3 && console.log(`Image ${u}:`, {
|
|
3056
|
-
finalPosition:
|
|
3158
|
+
finalPosition: f,
|
|
3057
3159
|
imageSize: v,
|
|
3058
3160
|
left: d.x,
|
|
3059
3161
|
top: d.y,
|
|
3060
3162
|
finalTransform: x,
|
|
3061
3163
|
renderedWidth: g,
|
|
3062
3164
|
renderedHeight: e
|
|
3063
|
-
}),
|
|
3064
|
-
},
|
|
3165
|
+
}), c.style.transform = L, c.dataset.finalTransform = x, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || E !== d.rotation || R !== d.scale) && (c.dataset.startX = String(w.x), c.dataset.startY = String(w.y), c.dataset.endX = String(f.x), c.dataset.endY = String(f.y), c.dataset.imageWidth = String(g), c.dataset.imageHeight = String(e), c.dataset.rotation = String(d.rotation), c.dataset.scale = String(d.scale), c.dataset.startRotation = String(E), c.dataset.startScale = String(R)), this.displayQueue.push(c);
|
|
3166
|
+
}, c.onerror = () => r++, c.src = l;
|
|
3065
3167
|
});
|
|
3066
3168
|
}
|
|
3067
3169
|
async handleImageClick(t, e) {
|
|
3170
|
+
var s, r;
|
|
3068
3171
|
if (!this.containerEl) return;
|
|
3069
|
-
const i = this.zoomEngine.isFocused(t),
|
|
3172
|
+
const i = this.zoomEngine.isFocused(t), n = {
|
|
3070
3173
|
width: this.containerEl.offsetWidth,
|
|
3071
3174
|
height: this.containerEl.offsetHeight
|
|
3072
3175
|
};
|
|
3073
3176
|
if (i)
|
|
3074
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null;
|
|
3177
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (s = this.swipeEngine) == null || s.disable();
|
|
3075
3178
|
else {
|
|
3076
|
-
const
|
|
3077
|
-
this.currentFocusIndex =
|
|
3179
|
+
const a = t.dataset.imageId;
|
|
3180
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, (r = this.swipeEngine) == null || r.enable(), await this.zoomEngine.focusImage(t, n, e);
|
|
3078
3181
|
}
|
|
3079
3182
|
}
|
|
3080
3183
|
/**
|
|
@@ -3096,32 +3199,33 @@ class ze {
|
|
|
3096
3199
|
* Destroy the gallery and clean up resources
|
|
3097
3200
|
*/
|
|
3098
3201
|
destroy() {
|
|
3099
|
-
|
|
3202
|
+
var t;
|
|
3203
|
+
this.clearImageCloud(), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), (t = this.swipeEngine) == null || t.destroy();
|
|
3100
3204
|
}
|
|
3101
3205
|
}
|
|
3102
3206
|
export {
|
|
3103
3207
|
Jt as AnimationEngine,
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3208
|
+
zt as BOUNCE_PRESETS,
|
|
3209
|
+
ye as ClusterPlacementGenerator,
|
|
3210
|
+
Oe as CompositeLoader,
|
|
3211
|
+
y as DEFAULT_CONFIG,
|
|
3212
|
+
Ft as ELASTIC_PRESETS,
|
|
3213
|
+
le as EntryAnimationEngine,
|
|
3214
|
+
De as FUNCTIONAL_CSS,
|
|
3215
|
+
Ce as GoogleDriveLoader,
|
|
3216
|
+
ge as GridPlacementGenerator,
|
|
3217
|
+
Ue as ImageCloud,
|
|
3218
|
+
$e as ImageFilter,
|
|
3219
|
+
Ue as ImageGallery,
|
|
3220
|
+
we as LayoutEngine,
|
|
3221
|
+
de as RadialPlacementGenerator,
|
|
3222
|
+
he as RandomPlacementGenerator,
|
|
3223
|
+
pe as SpiralPlacementGenerator,
|
|
3224
|
+
Le as StaticImageLoader,
|
|
3225
|
+
Ct as WAVE_PATH_PRESETS,
|
|
3226
|
+
Ee as ZoomEngine,
|
|
3227
|
+
ae as animatePath,
|
|
3228
|
+
Pe as injectFunctionalStyles,
|
|
3229
|
+
re as requiresJSAnimation
|
|
3126
3230
|
};
|
|
3127
3231
|
//# sourceMappingURL=image-cloud.js.map
|