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