@frybynite/image-cloud 0.4.0 → 0.4.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/dist/image-cloud-auto-init.js +935 -970
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +944 -979
- 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 +0 -2
- package/package.json +5 -5
package/dist/image-cloud.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
const
|
|
1
|
+
const ft = Object.freeze({
|
|
2
2
|
none: "none",
|
|
3
3
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
4
4
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
5
5
|
lg: "0 8px 32px rgba(0,0,0,0.5)",
|
|
6
6
|
glow: "0 0 30px rgba(255,255,255,0.6)"
|
|
7
|
-
}),
|
|
7
|
+
}), wt = 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
|
+
}), xt = 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
|
+
}), Et = Object.freeze({
|
|
17
17
|
gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
|
|
18
18
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
19
19
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
20
20
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
21
|
-
}),
|
|
21
|
+
}), pt = Object.freeze({
|
|
22
22
|
type: "linear"
|
|
23
|
-
}),
|
|
23
|
+
}), bt = Object.freeze({
|
|
24
24
|
mode: "none"
|
|
25
|
-
}),
|
|
25
|
+
}), yt = Object.freeze({
|
|
26
26
|
mode: "none"
|
|
27
|
-
}),
|
|
27
|
+
}), Tt = Object.freeze({
|
|
28
28
|
default: Object.freeze({
|
|
29
29
|
border: Object.freeze({
|
|
30
30
|
width: 0,
|
|
@@ -49,17 +49,17 @@ const St = Object.freeze({
|
|
|
49
49
|
focused: Object.freeze({
|
|
50
50
|
shadow: "none"
|
|
51
51
|
})
|
|
52
|
-
}),
|
|
52
|
+
}), Dt = Object.freeze({
|
|
53
53
|
rows: 1,
|
|
54
54
|
amplitude: 100,
|
|
55
55
|
frequency: 2,
|
|
56
56
|
phaseShift: 0,
|
|
57
57
|
synchronization: "offset"
|
|
58
58
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
59
|
-
}),
|
|
59
|
+
}), Ot = Object.freeze({
|
|
60
60
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
61
61
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
62
|
-
}),
|
|
62
|
+
}), $t = Object.freeze({
|
|
63
63
|
mode: "adaptive",
|
|
64
64
|
// Default to adaptive sizing
|
|
65
65
|
minSize: 50,
|
|
@@ -71,41 +71,40 @@ const St = Object.freeze({
|
|
|
71
71
|
// No variance by default
|
|
72
72
|
max: 1
|
|
73
73
|
})
|
|
74
|
-
}),
|
|
74
|
+
}), Ut = Object.freeze({
|
|
75
75
|
mode: "none",
|
|
76
76
|
range: Object.freeze({
|
|
77
77
|
min: -15,
|
|
78
78
|
max: 15
|
|
79
79
|
})
|
|
80
|
-
}),
|
|
81
|
-
sizing:
|
|
82
|
-
rotation:
|
|
83
|
-
}),
|
|
80
|
+
}), Rt = Object.freeze({
|
|
81
|
+
sizing: $t,
|
|
82
|
+
rotation: Ut
|
|
83
|
+
}), Ct = Object.freeze({
|
|
84
84
|
validateUrls: !0,
|
|
85
85
|
validationTimeout: 5e3,
|
|
86
86
|
validationMethod: "head",
|
|
87
|
-
failOnAllMissing: !0,
|
|
88
87
|
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
|
|
89
|
-
}),
|
|
88
|
+
}), At = Object.freeze({
|
|
90
89
|
enabled: !1,
|
|
91
90
|
centers: !1,
|
|
92
91
|
loaders: !1
|
|
93
|
-
}),
|
|
92
|
+
}), y = Object.freeze({
|
|
94
93
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
95
94
|
loaders: [],
|
|
96
95
|
// Shared loader settings and debug config
|
|
97
96
|
config: Object.freeze({
|
|
98
|
-
loaders:
|
|
99
|
-
debug:
|
|
97
|
+
loaders: Ct,
|
|
98
|
+
debug: At
|
|
100
99
|
}),
|
|
101
100
|
// Image sizing and rotation configuration
|
|
102
|
-
image:
|
|
101
|
+
image: Rt,
|
|
103
102
|
// Pattern-based layout configuration
|
|
104
103
|
layout: Object.freeze({
|
|
105
104
|
algorithm: "radial",
|
|
106
105
|
scaleDecay: 0,
|
|
107
106
|
// No decay by default (0-1 for radial/spiral)
|
|
108
|
-
responsive:
|
|
107
|
+
responsive: Ot,
|
|
109
108
|
targetCoverage: 0.6,
|
|
110
109
|
// Target 60% of container area
|
|
111
110
|
densityFactor: 1,
|
|
@@ -163,9 +162,9 @@ const St = Object.freeze({
|
|
|
163
162
|
}),
|
|
164
163
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
165
164
|
// smooth deceleration
|
|
166
|
-
path:
|
|
167
|
-
rotation:
|
|
168
|
-
scale:
|
|
165
|
+
path: pt,
|
|
166
|
+
rotation: bt,
|
|
167
|
+
scale: yt
|
|
169
168
|
})
|
|
170
169
|
}),
|
|
171
170
|
// Pattern-based interaction configuration
|
|
@@ -222,52 +221,50 @@ const St = Object.freeze({
|
|
|
222
221
|
})
|
|
223
222
|
}),
|
|
224
223
|
// Image styling
|
|
225
|
-
styling:
|
|
224
|
+
styling: Tt
|
|
226
225
|
});
|
|
227
|
-
function
|
|
228
|
-
if (!
|
|
229
|
-
if (!t) return { ...
|
|
230
|
-
const e = { ...
|
|
231
|
-
return t.border !== void 0 && (e.border = { ...
|
|
226
|
+
function Z(n, t) {
|
|
227
|
+
if (!n) return t || {};
|
|
228
|
+
if (!t) return { ...n };
|
|
229
|
+
const e = { ...n };
|
|
230
|
+
return t.border !== void 0 && (e.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...n.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
|
|
232
231
|
}
|
|
233
|
-
function
|
|
234
|
-
if (!t) return { ...
|
|
235
|
-
const e =
|
|
236
|
-
|
|
232
|
+
function Pt(n, t) {
|
|
233
|
+
if (!t) return { ...n };
|
|
234
|
+
const e = Z(n.default, t.default), i = Z(
|
|
235
|
+
Z(e, n.hover),
|
|
237
236
|
t.hover
|
|
238
|
-
),
|
|
239
|
-
|
|
237
|
+
), o = Z(
|
|
238
|
+
Z(e, n.focused),
|
|
240
239
|
t.focused
|
|
241
240
|
);
|
|
242
241
|
return {
|
|
243
242
|
default: e,
|
|
244
243
|
hover: i,
|
|
245
|
-
focused:
|
|
244
|
+
focused: o
|
|
246
245
|
};
|
|
247
246
|
}
|
|
248
|
-
function
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
const e = { ...o };
|
|
247
|
+
function _t(n, t) {
|
|
248
|
+
if (!t) return { ...n };
|
|
249
|
+
const e = { ...n };
|
|
252
250
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
253
|
-
...
|
|
251
|
+
...n.sizing,
|
|
254
252
|
...t.sizing
|
|
255
253
|
}, t.sizing.variance)) {
|
|
256
|
-
const
|
|
257
|
-
e.sizing.variance = { min:
|
|
254
|
+
const i = t.sizing.variance, o = i.min !== void 0 && i.min >= 0.25 && i.min <= 1 ? i.min : n.sizing?.variance?.min ?? 1, s = i.max !== void 0 && i.max >= 1 && i.max <= 1.75 ? i.max : n.sizing?.variance?.max ?? 1;
|
|
255
|
+
e.sizing.variance = { min: o, max: s };
|
|
258
256
|
}
|
|
259
257
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
260
|
-
...
|
|
258
|
+
...n.rotation,
|
|
261
259
|
...t.rotation
|
|
262
260
|
}, t.rotation.range)) {
|
|
263
|
-
const
|
|
264
|
-
e.rotation.range = { min:
|
|
261
|
+
const i = t.rotation.range, o = i.min !== void 0 && i.min >= -180 && i.min <= 0 ? i.min : n.rotation?.range?.min ?? -15, s = i.max !== void 0 && i.max >= 0 && i.max <= 180 ? i.max : n.rotation?.range?.max ?? 15;
|
|
262
|
+
e.rotation.range = { min: o, max: s };
|
|
265
263
|
}
|
|
266
264
|
return e;
|
|
267
265
|
}
|
|
268
|
-
function
|
|
269
|
-
|
|
270
|
-
const t = (e = o.layout) == null ? void 0 : e.rotation;
|
|
266
|
+
function Ht(n) {
|
|
267
|
+
const t = n.layout?.rotation;
|
|
271
268
|
if (t && "enabled" in t)
|
|
272
269
|
return {
|
|
273
270
|
rotation: {
|
|
@@ -276,9 +273,8 @@ function Bt(o) {
|
|
|
276
273
|
}
|
|
277
274
|
};
|
|
278
275
|
}
|
|
279
|
-
function
|
|
280
|
-
|
|
281
|
-
const t = (i = (e = o.layout) == null ? void 0 : e.sizing) == null ? void 0 : i.variance;
|
|
276
|
+
function Nt(n) {
|
|
277
|
+
const t = n.layout?.sizing?.variance;
|
|
282
278
|
if (t)
|
|
283
279
|
return {
|
|
284
280
|
sizing: {
|
|
@@ -288,114 +284,113 @@ function Jt(o) {
|
|
|
288
284
|
}
|
|
289
285
|
};
|
|
290
286
|
}
|
|
291
|
-
function
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
let i = o.image;
|
|
287
|
+
function jt(n = {}) {
|
|
288
|
+
const t = Ht(n), e = Nt(n);
|
|
289
|
+
let i = n.image;
|
|
295
290
|
(t || e) && (i = {
|
|
296
291
|
...e || {},
|
|
297
292
|
...t || {},
|
|
298
293
|
...i
|
|
299
|
-
}, i.rotation &&
|
|
294
|
+
}, i.rotation && t?.rotation && n.image?.rotation && (i.rotation = {
|
|
300
295
|
...t.rotation,
|
|
301
|
-
...
|
|
296
|
+
...n.image.rotation
|
|
302
297
|
}));
|
|
303
|
-
const
|
|
304
|
-
|
|
298
|
+
const o = [...n.loaders ?? []];
|
|
299
|
+
n.images && n.images.length > 0 && o.unshift({
|
|
305
300
|
static: {
|
|
306
|
-
sources: [{ urls:
|
|
301
|
+
sources: [{ urls: n.images }]
|
|
307
302
|
}
|
|
308
303
|
});
|
|
309
304
|
const r = {
|
|
310
305
|
loaders: {
|
|
311
|
-
...
|
|
312
|
-
...
|
|
306
|
+
...Ct,
|
|
307
|
+
...n.config?.loaders ?? {}
|
|
313
308
|
}
|
|
314
309
|
}, a = {
|
|
315
|
-
loaders:
|
|
310
|
+
loaders: o,
|
|
316
311
|
config: r,
|
|
317
|
-
image:
|
|
318
|
-
layout: { ...
|
|
319
|
-
animation: { ...
|
|
320
|
-
interaction: { ...
|
|
321
|
-
rendering: { ...
|
|
322
|
-
styling:
|
|
312
|
+
image: _t(Rt, i),
|
|
313
|
+
layout: { ...y.layout },
|
|
314
|
+
animation: { ...y.animation },
|
|
315
|
+
interaction: { ...y.interaction },
|
|
316
|
+
rendering: { ...y.rendering },
|
|
317
|
+
styling: Pt(Tt, n.styling)
|
|
323
318
|
};
|
|
324
|
-
return
|
|
325
|
-
...
|
|
326
|
-
...
|
|
327
|
-
},
|
|
328
|
-
...
|
|
329
|
-
mobile:
|
|
330
|
-
tablet:
|
|
331
|
-
}),
|
|
332
|
-
...
|
|
333
|
-
...
|
|
334
|
-
})),
|
|
335
|
-
...
|
|
336
|
-
...
|
|
337
|
-
},
|
|
338
|
-
...
|
|
339
|
-
...
|
|
340
|
-
}),
|
|
341
|
-
...
|
|
342
|
-
...
|
|
343
|
-
}),
|
|
344
|
-
...
|
|
345
|
-
...
|
|
346
|
-
}),
|
|
347
|
-
...
|
|
348
|
-
...
|
|
349
|
-
start:
|
|
350
|
-
...
|
|
351
|
-
...
|
|
352
|
-
circular:
|
|
353
|
-
} :
|
|
354
|
-
timing:
|
|
355
|
-
path:
|
|
356
|
-
rotation:
|
|
357
|
-
scale:
|
|
358
|
-
})),
|
|
359
|
-
...
|
|
360
|
-
...
|
|
361
|
-
},
|
|
362
|
-
...
|
|
363
|
-
...
|
|
364
|
-
}),
|
|
365
|
-
...
|
|
366
|
-
...
|
|
367
|
-
}),
|
|
368
|
-
...
|
|
369
|
-
...
|
|
370
|
-
})),
|
|
371
|
-
...
|
|
372
|
-
...
|
|
373
|
-
},
|
|
374
|
-
...
|
|
375
|
-
...
|
|
376
|
-
breakpoints:
|
|
377
|
-
mobileDetection:
|
|
378
|
-
}),
|
|
379
|
-
...
|
|
380
|
-
...
|
|
381
|
-
}),
|
|
382
|
-
...
|
|
383
|
-
...
|
|
319
|
+
return n.layout && (a.layout = {
|
|
320
|
+
...y.layout,
|
|
321
|
+
...n.layout
|
|
322
|
+
}, n.layout.responsive && (a.layout.responsive = {
|
|
323
|
+
...y.layout.responsive,
|
|
324
|
+
mobile: n.layout.responsive.mobile ? { ...y.layout.responsive.mobile, ...n.layout.responsive.mobile } : y.layout.responsive.mobile,
|
|
325
|
+
tablet: n.layout.responsive.tablet ? { ...y.layout.responsive.tablet, ...n.layout.responsive.tablet } : y.layout.responsive.tablet
|
|
326
|
+
}), n.layout.spacing && (a.layout.spacing = {
|
|
327
|
+
...y.layout.spacing,
|
|
328
|
+
...n.layout.spacing
|
|
329
|
+
})), n.animation && (a.animation = {
|
|
330
|
+
...y.animation,
|
|
331
|
+
...n.animation
|
|
332
|
+
}, n.animation.easing && (a.animation.easing = {
|
|
333
|
+
...y.animation.easing,
|
|
334
|
+
...n.animation.easing
|
|
335
|
+
}), n.animation.queue && (a.animation.queue = {
|
|
336
|
+
...y.animation.queue,
|
|
337
|
+
...n.animation.queue
|
|
338
|
+
}), n.animation.performance && (a.animation.performance = {
|
|
339
|
+
...y.animation.performance,
|
|
340
|
+
...n.animation.performance
|
|
341
|
+
}), n.animation.entry && (a.animation.entry = {
|
|
342
|
+
...y.animation.entry,
|
|
343
|
+
...n.animation.entry,
|
|
344
|
+
start: n.animation.entry.start ? {
|
|
345
|
+
...y.animation.entry.start,
|
|
346
|
+
...n.animation.entry.start,
|
|
347
|
+
circular: n.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...n.animation.entry.start.circular } : y.animation.entry.start.circular
|
|
348
|
+
} : y.animation.entry.start,
|
|
349
|
+
timing: n.animation.entry.timing ? { ...y.animation.entry.timing, ...n.animation.entry.timing } : y.animation.entry.timing,
|
|
350
|
+
path: n.animation.entry.path ? { ...pt, ...n.animation.entry.path } : y.animation.entry.path,
|
|
351
|
+
rotation: n.animation.entry.rotation ? { ...bt, ...n.animation.entry.rotation } : y.animation.entry.rotation,
|
|
352
|
+
scale: n.animation.entry.scale ? { ...yt, ...n.animation.entry.scale } : y.animation.entry.scale
|
|
353
|
+
})), n.interaction && (a.interaction = {
|
|
354
|
+
...y.interaction,
|
|
355
|
+
...n.interaction
|
|
356
|
+
}, n.interaction.focus && (a.interaction.focus = {
|
|
357
|
+
...y.interaction.focus,
|
|
358
|
+
...n.interaction.focus
|
|
359
|
+
}), n.interaction.navigation && (a.interaction.navigation = {
|
|
360
|
+
...y.interaction.navigation,
|
|
361
|
+
...n.interaction.navigation
|
|
362
|
+
}), n.interaction.gestures && (a.interaction.gestures = {
|
|
363
|
+
...y.interaction.gestures,
|
|
364
|
+
...n.interaction.gestures
|
|
365
|
+
})), n.rendering && (a.rendering = {
|
|
366
|
+
...y.rendering,
|
|
367
|
+
...n.rendering
|
|
368
|
+
}, n.rendering.responsive && (a.rendering.responsive = {
|
|
369
|
+
...y.rendering.responsive,
|
|
370
|
+
...n.rendering.responsive,
|
|
371
|
+
breakpoints: n.rendering.responsive.breakpoints ? { ...y.rendering.responsive.breakpoints, ...n.rendering.responsive.breakpoints } : y.rendering.responsive.breakpoints,
|
|
372
|
+
mobileDetection: n.rendering.responsive.mobileDetection ? n.rendering.responsive.mobileDetection : y.rendering.responsive.mobileDetection
|
|
373
|
+
}), n.rendering.ui && (a.rendering.ui = {
|
|
374
|
+
...y.rendering.ui,
|
|
375
|
+
...n.rendering.ui
|
|
376
|
+
}), n.rendering.performance && (a.rendering.performance = {
|
|
377
|
+
...y.rendering.performance,
|
|
378
|
+
...n.rendering.performance
|
|
384
379
|
})), a.config.debug = {
|
|
385
|
-
...
|
|
386
|
-
...
|
|
380
|
+
...At,
|
|
381
|
+
...n.config?.debug ?? {}
|
|
387
382
|
}, a;
|
|
388
383
|
}
|
|
389
|
-
function
|
|
390
|
-
return { ...
|
|
384
|
+
function kt(n, t) {
|
|
385
|
+
return { ...n ? wt[n] : wt.playful, ...t };
|
|
391
386
|
}
|
|
392
|
-
function
|
|
393
|
-
return { ...
|
|
387
|
+
function Wt(n, t) {
|
|
388
|
+
return { ...n ? xt[n] : xt.gentle, ...t };
|
|
394
389
|
}
|
|
395
|
-
function
|
|
396
|
-
return { ...
|
|
390
|
+
function Gt(n, t) {
|
|
391
|
+
return { ...n ? Et[n] : Et.gentle, ...t };
|
|
397
392
|
}
|
|
398
|
-
class
|
|
393
|
+
class qt {
|
|
399
394
|
constructor(t) {
|
|
400
395
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
401
396
|
}
|
|
@@ -406,8 +401,8 @@ class te {
|
|
|
406
401
|
buildTransformString(t) {
|
|
407
402
|
const e = ["translate(-50%, -50%)"];
|
|
408
403
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
409
|
-
const i = t.x ?? 0,
|
|
410
|
-
e.push(`translate(${i}px, ${
|
|
404
|
+
const i = t.x ?? 0, o = t.y ?? 0;
|
|
405
|
+
e.push(`translate(${i}px, ${o}px)`);
|
|
411
406
|
}
|
|
412
407
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && e.push(`scale(${t.scale})`), e.join(" ");
|
|
413
408
|
}
|
|
@@ -420,14 +415,14 @@ class te {
|
|
|
420
415
|
* @param easing - CSS easing function (optional)
|
|
421
416
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
422
417
|
*/
|
|
423
|
-
animateTransformCancellable(t, e, i,
|
|
418
|
+
animateTransformCancellable(t, e, i, o = null, s = null) {
|
|
424
419
|
this.cancelAllAnimations(t);
|
|
425
|
-
const r =
|
|
420
|
+
const r = o ?? this.config.duration, a = s ?? this.config.easing.default, h = this.buildTransformString(e), c = this.buildTransformString(i);
|
|
426
421
|
t.style.transition = "none";
|
|
427
|
-
const
|
|
422
|
+
const u = t.animate(
|
|
428
423
|
[
|
|
429
|
-
{ transform:
|
|
430
|
-
{ transform:
|
|
424
|
+
{ transform: h },
|
|
425
|
+
{ transform: c }
|
|
431
426
|
],
|
|
432
427
|
{
|
|
433
428
|
duration: r,
|
|
@@ -435,20 +430,20 @@ class te {
|
|
|
435
430
|
fill: "forwards"
|
|
436
431
|
// Keep final state after animation
|
|
437
432
|
}
|
|
438
|
-
),
|
|
433
|
+
), l = {
|
|
439
434
|
id: `anim-${++this.animationIdCounter}`,
|
|
440
435
|
element: t,
|
|
441
|
-
animation:
|
|
436
|
+
animation: u,
|
|
442
437
|
fromState: e,
|
|
443
438
|
toState: i,
|
|
444
439
|
startTime: performance.now(),
|
|
445
440
|
duration: r
|
|
446
441
|
};
|
|
447
|
-
return this.activeAnimations.set(t,
|
|
448
|
-
t.style.transform =
|
|
442
|
+
return this.activeAnimations.set(t, l), u.finished.then(() => {
|
|
443
|
+
t.style.transform = c, this.activeAnimations.delete(t);
|
|
449
444
|
}).catch(() => {
|
|
450
445
|
this.activeAnimations.delete(t);
|
|
451
|
-
}),
|
|
446
|
+
}), l;
|
|
452
447
|
}
|
|
453
448
|
/**
|
|
454
449
|
* Cancel an active animation
|
|
@@ -459,13 +454,13 @@ class te {
|
|
|
459
454
|
cancelAnimation(t, e = !0) {
|
|
460
455
|
const i = this.getCurrentTransform(t.element);
|
|
461
456
|
if (t.animation.cancel(), e) {
|
|
462
|
-
const
|
|
457
|
+
const o = this.buildTransformString({
|
|
463
458
|
x: i.x,
|
|
464
459
|
y: i.y,
|
|
465
460
|
rotation: i.rotation,
|
|
466
461
|
scale: i.scale
|
|
467
462
|
});
|
|
468
|
-
t.element.style.transform =
|
|
463
|
+
t.element.style.transform = o;
|
|
469
464
|
}
|
|
470
465
|
return this.activeAnimations.delete(t.element), i;
|
|
471
466
|
}
|
|
@@ -478,8 +473,8 @@ class te {
|
|
|
478
473
|
const e = this.activeAnimations.get(t);
|
|
479
474
|
e && this.cancelAnimation(e, !1);
|
|
480
475
|
const i = t.getAnimations();
|
|
481
|
-
for (const
|
|
482
|
-
|
|
476
|
+
for (const o of i)
|
|
477
|
+
o.cancel();
|
|
483
478
|
}
|
|
484
479
|
/**
|
|
485
480
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -491,8 +486,8 @@ class te {
|
|
|
491
486
|
const i = getComputedStyle(t).transform;
|
|
492
487
|
if (i === "none" || !i)
|
|
493
488
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
494
|
-
const
|
|
495
|
-
return { x: a, y:
|
|
489
|
+
const o = new DOMMatrix(i), s = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), a = o.e, h = o.f;
|
|
490
|
+
return { x: a, y: h, rotation: r, scale: s };
|
|
496
491
|
}
|
|
497
492
|
/**
|
|
498
493
|
* Check if an element has an active animation
|
|
@@ -518,9 +513,9 @@ class te {
|
|
|
518
513
|
* @param easing - CSS easing function (optional)
|
|
519
514
|
* @returns Promise that resolves when animation completes
|
|
520
515
|
*/
|
|
521
|
-
animateTransform(t, e, i = null,
|
|
516
|
+
animateTransform(t, e, i = null, o = null) {
|
|
522
517
|
return new Promise((s) => {
|
|
523
|
-
const r = i ?? this.config.duration, a =
|
|
518
|
+
const r = i ?? this.config.duration, a = o ?? this.config.easing.default;
|
|
524
519
|
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
|
|
525
520
|
s();
|
|
526
521
|
}, r);
|
|
@@ -551,161 +546,161 @@ class te {
|
|
|
551
546
|
return new Promise((e) => setTimeout(e, t));
|
|
552
547
|
}
|
|
553
548
|
}
|
|
554
|
-
function
|
|
555
|
-
return
|
|
549
|
+
function V(n, t, e) {
|
|
550
|
+
return n + (t - n) * e;
|
|
556
551
|
}
|
|
557
|
-
function
|
|
558
|
-
const { overshoot:
|
|
559
|
-
let
|
|
560
|
-
for (let
|
|
561
|
-
if (
|
|
562
|
-
|
|
552
|
+
function Yt(n, t, e, i) {
|
|
553
|
+
const { overshoot: o, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, c = Xt(s, r);
|
|
554
|
+
let u = 0, l = 0, d = 1, f = o, b = !1;
|
|
555
|
+
for (let g = 0; g < c.length; g++)
|
|
556
|
+
if (n <= c[g].time) {
|
|
557
|
+
l = g === 0 ? 0 : c[g - 1].time, d = c[g].time, f = c[g].overshoot, b = c[g].isOvershoot;
|
|
563
558
|
break;
|
|
564
559
|
}
|
|
565
|
-
const
|
|
566
|
-
if (
|
|
567
|
-
|
|
568
|
-
else if (
|
|
569
|
-
|
|
560
|
+
const p = (n - l) / (d - l);
|
|
561
|
+
if (b)
|
|
562
|
+
u = 1 + f * ot(p);
|
|
563
|
+
else if (l === 0)
|
|
564
|
+
u = ot(p);
|
|
570
565
|
else {
|
|
571
|
-
const
|
|
572
|
-
(
|
|
573
|
-
)
|
|
574
|
-
|
|
566
|
+
const m = 1 + (c.find(
|
|
567
|
+
(E, v) => E.time > l && v > 0 && c[v - 1].isOvershoot
|
|
568
|
+
)?.overshoot || f);
|
|
569
|
+
u = V(m, 1, ot(p));
|
|
575
570
|
}
|
|
576
571
|
return {
|
|
577
|
-
x: t.x + a *
|
|
578
|
-
y: t.y +
|
|
572
|
+
x: t.x + a * u,
|
|
573
|
+
y: t.y + h * u
|
|
579
574
|
};
|
|
580
575
|
}
|
|
581
|
-
function
|
|
576
|
+
function Xt(n, t) {
|
|
582
577
|
const e = [];
|
|
583
578
|
let i = 0.6;
|
|
584
579
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
585
|
-
let
|
|
586
|
-
const r = 0.4 / (
|
|
587
|
-
for (let a = 0; a <
|
|
588
|
-
i += r, e.push({ time: i, overshoot:
|
|
580
|
+
let o = 0.15;
|
|
581
|
+
const r = 0.4 / (n * 2);
|
|
582
|
+
for (let a = 0; a < n; a++)
|
|
583
|
+
i += r, e.push({ time: i, overshoot: o, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
589
584
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
590
585
|
}
|
|
591
|
-
function
|
|
592
|
-
const { stiffness:
|
|
593
|
-
let
|
|
594
|
-
if (
|
|
595
|
-
const
|
|
596
|
-
|
|
586
|
+
function Bt(n, t, e, i) {
|
|
587
|
+
const { stiffness: o, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, c = e.y - t.y, u = Math.sqrt(o / r), l = s / (2 * Math.sqrt(o * r));
|
|
588
|
+
let d;
|
|
589
|
+
if (l < 1) {
|
|
590
|
+
const f = u * Math.sqrt(1 - l * l), b = Math.exp(-l * u * n * 3), p = Math.cos(f * n * a * Math.PI);
|
|
591
|
+
d = 1 - b * p;
|
|
597
592
|
} else
|
|
598
|
-
|
|
599
|
-
return
|
|
600
|
-
x: t.x +
|
|
601
|
-
y: t.y +
|
|
593
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
594
|
+
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
595
|
+
x: t.x + h * d,
|
|
596
|
+
y: t.y + c * d
|
|
602
597
|
};
|
|
603
598
|
}
|
|
604
|
-
function
|
|
605
|
-
const { amplitude:
|
|
599
|
+
function Jt(n, t, e, i) {
|
|
600
|
+
const { amplitude: o, frequency: s, decay: r, decayRate: a, phase: h } = i, c = e.x - t.x, u = e.y - t.y, l = Math.sqrt(c * c + u * u), d = l > 0 ? -u / l : 0, f = l > 0 ? c / l : 1, b = s * Math.PI * 2 * n + h, p = r ? Math.pow(1 - n, a) : 1, g = o * Math.sin(b) * p, m = Vt(n);
|
|
606
601
|
return {
|
|
607
|
-
x:
|
|
608
|
-
y:
|
|
602
|
+
x: V(t.x, e.x, m) + g * d,
|
|
603
|
+
y: V(t.y, e.y, m) + g * f
|
|
609
604
|
};
|
|
610
605
|
}
|
|
611
|
-
function
|
|
612
|
-
return 1 - (1 -
|
|
606
|
+
function ot(n) {
|
|
607
|
+
return 1 - (1 - n) * (1 - n);
|
|
613
608
|
}
|
|
614
|
-
function
|
|
615
|
-
return 1 - Math.pow(1 -
|
|
609
|
+
function Vt(n) {
|
|
610
|
+
return 1 - Math.pow(1 - n, 3);
|
|
616
611
|
}
|
|
617
|
-
function
|
|
618
|
-
const { amplitude: i, frequency:
|
|
619
|
-
return t +
|
|
612
|
+
function Kt(n, t, e) {
|
|
613
|
+
const { amplitude: i, frequency: o, decay: s } = e, r = Math.sin(n * o * Math.PI * 2), a = s ? Math.pow(1 - n, 2) : 1, h = i * r * a;
|
|
614
|
+
return t + h;
|
|
620
615
|
}
|
|
621
|
-
function
|
|
622
|
-
const { overshoot: i, bounces:
|
|
616
|
+
function Zt(n, t, e) {
|
|
617
|
+
const { overshoot: i, bounces: o } = e, s = [];
|
|
623
618
|
s.push({ time: 0.5, scale: i });
|
|
624
619
|
let r = i;
|
|
625
|
-
const a = 0.5,
|
|
626
|
-
let
|
|
627
|
-
for (let
|
|
628
|
-
const
|
|
629
|
-
|
|
620
|
+
const a = 0.5, c = 0.5 / (o * 2);
|
|
621
|
+
let u = 0.5;
|
|
622
|
+
for (let d = 0; d < o; d++) {
|
|
623
|
+
const f = 1 - (r - 1) * a;
|
|
624
|
+
u += c, s.push({ time: u, scale: f }), r = 1 + (r - 1) * a * a, u += c, d < o - 1 && s.push({ time: u, scale: r });
|
|
630
625
|
}
|
|
631
626
|
s.push({ time: 1, scale: 1 });
|
|
632
|
-
let
|
|
633
|
-
for (let
|
|
634
|
-
if (
|
|
635
|
-
const
|
|
636
|
-
|
|
627
|
+
let l = 1;
|
|
628
|
+
for (let d = 0; d < s.length; d++)
|
|
629
|
+
if (n <= s[d].time) {
|
|
630
|
+
const f = d === 0 ? 0 : s[d - 1].time, b = d === 0 ? 1 : s[d - 1].scale, p = (n - f) / (s[d].time - f), g = ot(p);
|
|
631
|
+
l = b + (s[d].scale - b) * g;
|
|
637
632
|
break;
|
|
638
633
|
}
|
|
639
|
-
return
|
|
634
|
+
return l * t;
|
|
640
635
|
}
|
|
641
|
-
function
|
|
636
|
+
function Qt(n) {
|
|
642
637
|
const {
|
|
643
638
|
element: t,
|
|
644
639
|
startPosition: e,
|
|
645
640
|
endPosition: i,
|
|
646
|
-
pathConfig:
|
|
641
|
+
pathConfig: o,
|
|
647
642
|
duration: s,
|
|
648
643
|
imageWidth: r,
|
|
649
644
|
imageHeight: a,
|
|
650
|
-
rotation:
|
|
651
|
-
scale:
|
|
652
|
-
onComplete:
|
|
653
|
-
rotationConfig:
|
|
654
|
-
startRotation:
|
|
655
|
-
scaleConfig:
|
|
656
|
-
startScale:
|
|
657
|
-
} =
|
|
658
|
-
if ((
|
|
659
|
-
|
|
645
|
+
rotation: h,
|
|
646
|
+
scale: c,
|
|
647
|
+
onComplete: u,
|
|
648
|
+
rotationConfig: l,
|
|
649
|
+
startRotation: d,
|
|
650
|
+
scaleConfig: f,
|
|
651
|
+
startScale: b
|
|
652
|
+
} = n, p = o.type, g = d !== void 0 && d !== h, m = l?.mode === "wobble", E = l?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, v = g || m, w = b !== void 0 && b !== c, S = f?.mode === "pop", x = f?.pop || { overshoot: 1.2, bounces: 1 };
|
|
653
|
+
if ((p === "linear" || p === "arc") && !v && !(w || S)) {
|
|
654
|
+
u && u();
|
|
660
655
|
return;
|
|
661
656
|
}
|
|
662
|
-
const
|
|
663
|
-
function
|
|
664
|
-
const
|
|
665
|
-
let
|
|
666
|
-
switch (
|
|
657
|
+
const M = performance.now(), z = -r / 2, P = -a / 2;
|
|
658
|
+
function _(Y) {
|
|
659
|
+
const N = Y - M, R = Math.min(N / s, 1);
|
|
660
|
+
let D;
|
|
661
|
+
switch (p) {
|
|
667
662
|
case "bounce": {
|
|
668
|
-
const
|
|
669
|
-
|
|
670
|
-
|
|
663
|
+
const O = kt(
|
|
664
|
+
o.bouncePreset,
|
|
665
|
+
o.bounce
|
|
671
666
|
);
|
|
672
|
-
|
|
667
|
+
D = Yt(R, e, i, O);
|
|
673
668
|
break;
|
|
674
669
|
}
|
|
675
670
|
case "elastic": {
|
|
676
|
-
const
|
|
677
|
-
|
|
678
|
-
|
|
671
|
+
const O = Wt(
|
|
672
|
+
o.elasticPreset,
|
|
673
|
+
o.elastic
|
|
679
674
|
);
|
|
680
|
-
|
|
675
|
+
D = Bt(R, e, i, O);
|
|
681
676
|
break;
|
|
682
677
|
}
|
|
683
678
|
case "wave": {
|
|
684
|
-
const
|
|
685
|
-
|
|
686
|
-
|
|
679
|
+
const O = Gt(
|
|
680
|
+
o.wavePreset,
|
|
681
|
+
o.wave
|
|
687
682
|
);
|
|
688
|
-
|
|
683
|
+
D = Jt(R, e, i, O);
|
|
689
684
|
break;
|
|
690
685
|
}
|
|
691
686
|
default:
|
|
692
|
-
|
|
693
|
-
x:
|
|
694
|
-
y:
|
|
687
|
+
D = {
|
|
688
|
+
x: V(e.x, i.x, R),
|
|
689
|
+
y: V(e.y, i.y, R)
|
|
695
690
|
};
|
|
696
691
|
}
|
|
697
|
-
const
|
|
692
|
+
const k = D.x - i.x, H = D.y - i.y;
|
|
693
|
+
let A;
|
|
694
|
+
m ? A = Kt(R, h, E) : g ? A = V(d, h, R) : A = h;
|
|
698
695
|
let C;
|
|
699
|
-
|
|
700
|
-
let F;
|
|
701
|
-
A ? F = re(w, u, S) : E ? F = st(p, u, w) : F = u, t.style.transform = `translate(${H}px, ${$}px) translate(${M}px, ${R}px) rotate(${C}deg) scale(${F})`, w < 1 ? requestAnimationFrame(D) : (t.style.transform = `translate(${H}px, ${$}px) rotate(${c}deg) scale(${u})`, l && l());
|
|
696
|
+
S ? C = Zt(R, c, x) : w ? C = V(b, c, R) : C = c, t.style.transform = `translate(${z}px, ${P}px) translate(${k}px, ${H}px) rotate(${A}deg) scale(${C})`, R < 1 ? requestAnimationFrame(_) : (t.style.transform = `translate(${z}px, ${P}px) rotate(${h}deg) scale(${c})`, u && u());
|
|
702
697
|
}
|
|
703
|
-
requestAnimationFrame(
|
|
698
|
+
requestAnimationFrame(_);
|
|
704
699
|
}
|
|
705
|
-
function
|
|
706
|
-
return
|
|
700
|
+
function te(n) {
|
|
701
|
+
return n === "bounce" || n === "elastic" || n === "wave";
|
|
707
702
|
}
|
|
708
|
-
const
|
|
703
|
+
const ee = {
|
|
709
704
|
radial: "center",
|
|
710
705
|
spiral: "center",
|
|
711
706
|
grid: "top",
|
|
@@ -713,20 +708,20 @@ const he = {
|
|
|
713
708
|
random: "nearest-edge",
|
|
714
709
|
wave: "left"
|
|
715
710
|
};
|
|
716
|
-
class
|
|
711
|
+
class ie {
|
|
717
712
|
constructor(t, e) {
|
|
718
|
-
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
713
|
+
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || pt, this.rotationConfig = t.rotation || bt, this.scaleConfig = t.scale || yt;
|
|
719
714
|
}
|
|
720
715
|
/**
|
|
721
716
|
* Get the effective start position, considering layout-aware defaults
|
|
722
717
|
*/
|
|
723
718
|
resolveStartPosition() {
|
|
724
|
-
return this.config.start.position ? this.config.start.position :
|
|
719
|
+
return this.config.start.position ? this.config.start.position : ee[this.layoutAlgorithm] || "nearest-edge";
|
|
725
720
|
}
|
|
726
721
|
/**
|
|
727
722
|
* Calculate the starting position for an image's entry animation
|
|
728
723
|
*/
|
|
729
|
-
calculateStartPosition(t, e, i,
|
|
724
|
+
calculateStartPosition(t, e, i, o, s) {
|
|
730
725
|
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
731
726
|
switch (r) {
|
|
732
727
|
case "nearest-edge":
|
|
@@ -748,7 +743,7 @@ class de {
|
|
|
748
743
|
t,
|
|
749
744
|
e,
|
|
750
745
|
i,
|
|
751
|
-
|
|
746
|
+
o,
|
|
752
747
|
s
|
|
753
748
|
);
|
|
754
749
|
default:
|
|
@@ -758,28 +753,28 @@ class de {
|
|
|
758
753
|
/**
|
|
759
754
|
* Calculate start position from the nearest edge (current default behavior)
|
|
760
755
|
*/
|
|
761
|
-
calculateNearestEdge(t, e, i,
|
|
762
|
-
const s = t.x, r = t.y, a = s,
|
|
763
|
-
let
|
|
764
|
-
return
|
|
756
|
+
calculateNearestEdge(t, e, i, o) {
|
|
757
|
+
const s = t.x, r = t.y, a = s, h = i.width - s, c = r, u = i.height - r, l = Math.min(a, h, c, u);
|
|
758
|
+
let d = t.x, f = t.y;
|
|
759
|
+
return l === a ? d = -(e.width + o) : l === h ? d = i.width + o : l === c ? f = -(e.height + o) : f = i.height + o, { x: d, y: f };
|
|
765
760
|
}
|
|
766
761
|
/**
|
|
767
762
|
* Calculate start position from a specific edge
|
|
768
763
|
*/
|
|
769
|
-
calculateEdgePosition(t, e, i,
|
|
764
|
+
calculateEdgePosition(t, e, i, o, s) {
|
|
770
765
|
let r = e.x, a = e.y;
|
|
771
766
|
switch (t) {
|
|
772
767
|
case "top":
|
|
773
768
|
a = -(i.height + s);
|
|
774
769
|
break;
|
|
775
770
|
case "bottom":
|
|
776
|
-
a =
|
|
771
|
+
a = o.height + s;
|
|
777
772
|
break;
|
|
778
773
|
case "left":
|
|
779
774
|
r = -(i.width + s);
|
|
780
775
|
break;
|
|
781
776
|
case "right":
|
|
782
|
-
r =
|
|
777
|
+
r = o.width + s;
|
|
783
778
|
break;
|
|
784
779
|
}
|
|
785
780
|
return { x: r, y: a };
|
|
@@ -788,9 +783,9 @@ class de {
|
|
|
788
783
|
* Calculate start position from center with scale animation
|
|
789
784
|
*/
|
|
790
785
|
calculateCenterPosition(t, e, i) {
|
|
791
|
-
const
|
|
786
|
+
const o = t.width / 2, s = t.height / 2;
|
|
792
787
|
return {
|
|
793
|
-
x:
|
|
788
|
+
x: o,
|
|
794
789
|
y: s,
|
|
795
790
|
useScale: !0
|
|
796
791
|
// Signal to use scale animation from 0
|
|
@@ -799,57 +794,57 @@ class de {
|
|
|
799
794
|
/**
|
|
800
795
|
* Calculate start position from a random edge
|
|
801
796
|
*/
|
|
802
|
-
calculateRandomEdge(t, e, i,
|
|
797
|
+
calculateRandomEdge(t, e, i, o) {
|
|
803
798
|
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
804
|
-
return this.calculateEdgePosition(r, t, e, i,
|
|
799
|
+
return this.calculateEdgePosition(r, t, e, i, o);
|
|
805
800
|
}
|
|
806
801
|
/**
|
|
807
802
|
* Calculate start position on a circle around the container
|
|
808
803
|
*/
|
|
809
|
-
calculateCircularPosition(t, e, i,
|
|
804
|
+
calculateCircularPosition(t, e, i, o, s) {
|
|
810
805
|
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
811
|
-
let
|
|
812
|
-
const
|
|
813
|
-
if (typeof
|
|
814
|
-
const
|
|
815
|
-
|
|
806
|
+
let h;
|
|
807
|
+
const c = r.radius || "120%";
|
|
808
|
+
if (typeof c == "string" && c.endsWith("%")) {
|
|
809
|
+
const p = parseFloat(c) / 100;
|
|
810
|
+
h = Math.sqrt(
|
|
816
811
|
i.width ** 2 + i.height ** 2
|
|
817
|
-
) *
|
|
812
|
+
) * p / 2;
|
|
818
813
|
} else
|
|
819
|
-
|
|
820
|
-
let
|
|
821
|
-
a === "even" ?
|
|
822
|
-
const
|
|
823
|
-
return { x:
|
|
814
|
+
h = typeof c == "number" ? c : 500;
|
|
815
|
+
let u;
|
|
816
|
+
a === "even" ? u = o / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
817
|
+
const l = i.width / 2, d = i.height / 2, f = l + Math.cos(u) * h, b = d + Math.sin(u) * h;
|
|
818
|
+
return { x: f, y: b };
|
|
824
819
|
}
|
|
825
820
|
/**
|
|
826
821
|
* Get animation parameters for an image
|
|
827
822
|
*/
|
|
828
823
|
getAnimationParams(t) {
|
|
829
|
-
const e = this.config.timing.duration, i = this.config.timing.stagger,
|
|
824
|
+
const e = this.config.timing.duration, i = this.config.timing.stagger, o = this.config.easing;
|
|
830
825
|
return {
|
|
831
826
|
startTransform: "",
|
|
832
827
|
// Will be computed by caller based on start position
|
|
833
828
|
duration: e,
|
|
834
829
|
delay: t * i,
|
|
835
|
-
easing:
|
|
830
|
+
easing: o
|
|
836
831
|
};
|
|
837
832
|
}
|
|
838
833
|
/**
|
|
839
834
|
* Build a CSS transform string for the start position
|
|
840
835
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
841
836
|
*/
|
|
842
|
-
buildStartTransform(t, e, i,
|
|
843
|
-
const
|
|
844
|
-
return t.useScale ? `${
|
|
837
|
+
buildStartTransform(t, e, i, o, s, r, a, h) {
|
|
838
|
+
const c = t.x - e.x, u = t.y - e.y, l = a !== void 0 ? a : i, d = h !== void 0 ? h : o, f = s !== void 0 ? -s / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = s !== void 0 ? `translate(${f}px, ${b}px)` : "translate(-50%, -50%)";
|
|
839
|
+
return t.useScale ? `${p} translate(${c}px, ${u}px) rotate(${l}deg) scale(0)` : `${p} translate(${c}px, ${u}px) rotate(${l}deg) scale(${d})`;
|
|
845
840
|
}
|
|
846
841
|
/**
|
|
847
842
|
* Build the final CSS transform string
|
|
848
843
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
849
844
|
*/
|
|
850
|
-
buildFinalTransform(t, e, i,
|
|
851
|
-
if (i !== void 0 &&
|
|
852
|
-
const s = -i / 2, r = -
|
|
845
|
+
buildFinalTransform(t, e, i, o) {
|
|
846
|
+
if (i !== void 0 && o !== void 0) {
|
|
847
|
+
const s = -i / 2, r = -o / 2;
|
|
853
848
|
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${e})`;
|
|
854
849
|
}
|
|
855
850
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
|
|
@@ -866,7 +861,7 @@ class de {
|
|
|
866
861
|
* Check if the current path type requires JavaScript animation
|
|
867
862
|
*/
|
|
868
863
|
requiresJSAnimation() {
|
|
869
|
-
return
|
|
864
|
+
return te(this.pathConfig.type);
|
|
870
865
|
}
|
|
871
866
|
/**
|
|
872
867
|
* Get the path configuration
|
|
@@ -916,12 +911,12 @@ class de {
|
|
|
916
911
|
return t + (Math.random() - 0.5) * 60;
|
|
917
912
|
if (typeof i == "number")
|
|
918
913
|
return i;
|
|
919
|
-
const
|
|
920
|
-
return i.min + Math.random() *
|
|
914
|
+
const o = i.max - i.min;
|
|
915
|
+
return i.min + Math.random() * o;
|
|
921
916
|
}
|
|
922
917
|
case "spin": {
|
|
923
|
-
const i = this.rotationConfig.spinCount ?? 1,
|
|
924
|
-
return t + i * 360 *
|
|
918
|
+
const i = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
|
|
919
|
+
return t + i * 360 * o;
|
|
925
920
|
}
|
|
926
921
|
case "random":
|
|
927
922
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -939,11 +934,12 @@ class de {
|
|
|
939
934
|
switch (this.rotationConfig.direction ?? "auto") {
|
|
940
935
|
case "clockwise":
|
|
941
936
|
return -1;
|
|
937
|
+
// Negative rotation = clockwise spin to final
|
|
942
938
|
case "counterclockwise":
|
|
943
939
|
return 1;
|
|
940
|
+
// Positive rotation = counterclockwise spin to final
|
|
944
941
|
case "random":
|
|
945
942
|
return Math.random() < 0.5 ? 1 : -1;
|
|
946
|
-
case "auto":
|
|
947
943
|
default:
|
|
948
944
|
return t >= 0 ? 1 : -1;
|
|
949
945
|
}
|
|
@@ -968,8 +964,8 @@ class de {
|
|
|
968
964
|
amplitude: 15,
|
|
969
965
|
frequency: 3,
|
|
970
966
|
decay: !0
|
|
971
|
-
}, { amplitude:
|
|
972
|
-
return e +
|
|
967
|
+
}, { amplitude: o, frequency: s, decay: r } = i, a = Math.sin(t * s * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, c = o * a * h;
|
|
968
|
+
return e + c;
|
|
973
969
|
}
|
|
974
970
|
/**
|
|
975
971
|
* Get the scale configuration
|
|
@@ -1025,12 +1021,12 @@ class de {
|
|
|
1025
1021
|
const i = this.scaleConfig.pop || {
|
|
1026
1022
|
overshoot: 1.2,
|
|
1027
1023
|
bounces: 1
|
|
1028
|
-
}, { overshoot:
|
|
1024
|
+
}, { overshoot: o, bounces: s } = i, r = this.generateScaleBounceKeyframes(s, o);
|
|
1029
1025
|
let a = e;
|
|
1030
|
-
for (let
|
|
1031
|
-
if (t <= r[
|
|
1032
|
-
const
|
|
1033
|
-
a =
|
|
1026
|
+
for (let h = 0; h < r.length; h++)
|
|
1027
|
+
if (t <= r[h].time) {
|
|
1028
|
+
const c = h === 0 ? 0 : r[h - 1].time, u = h === 0 ? e : r[h - 1].scale, l = (t - c) / (r[h].time - c), d = this.easeOutQuad(l);
|
|
1029
|
+
a = u + (r[h].scale - u) * d;
|
|
1034
1030
|
break;
|
|
1035
1031
|
}
|
|
1036
1032
|
return a * e;
|
|
@@ -1041,12 +1037,12 @@ class de {
|
|
|
1041
1037
|
generateScaleBounceKeyframes(t, e) {
|
|
1042
1038
|
const i = [];
|
|
1043
1039
|
i.push({ time: 0.5, scale: e });
|
|
1044
|
-
let
|
|
1040
|
+
let o = e;
|
|
1045
1041
|
const s = 0.5, a = 0.5 / (t * 2);
|
|
1046
|
-
let
|
|
1047
|
-
for (let
|
|
1048
|
-
const
|
|
1049
|
-
|
|
1042
|
+
let h = 0.5;
|
|
1043
|
+
for (let c = 0; c < t; c++) {
|
|
1044
|
+
const u = 1 - (o - 1) * s;
|
|
1045
|
+
h += a, i.push({ time: h, scale: u }), o = 1 + (o - 1) * s * s, h += a, c < t - 1 && i.push({ time: h, scale: o });
|
|
1050
1046
|
}
|
|
1051
1047
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1052
1048
|
}
|
|
@@ -1057,7 +1053,7 @@ class de {
|
|
|
1057
1053
|
return 1 - (1 - t) * (1 - t);
|
|
1058
1054
|
}
|
|
1059
1055
|
}
|
|
1060
|
-
class
|
|
1056
|
+
class ne {
|
|
1061
1057
|
constructor(t, e = {}) {
|
|
1062
1058
|
this.config = t, this.imageConfig = e;
|
|
1063
1059
|
}
|
|
@@ -1069,20 +1065,19 @@ class ue {
|
|
|
1069
1065
|
* @returns Array of layout objects with position, rotation, scale
|
|
1070
1066
|
*/
|
|
1071
1067
|
generate(t, e, i = {}) {
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
baseSize: U
|
|
1068
|
+
const o = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || f !== 1, g = h * 1.5 / 2, m = h / 2, E = s - a - g, v = r - a - m, w = a + g, S = a + m;
|
|
1069
|
+
for (let x = 0; x < t; x++) {
|
|
1070
|
+
const T = this.random(w, E), M = this.random(S, v), z = c === "random" ? this.random(u, l) : 0, P = b ? this.random(d, f) : 1, _ = h * P, Y = {
|
|
1071
|
+
id: x,
|
|
1072
|
+
x: T,
|
|
1073
|
+
y: M,
|
|
1074
|
+
rotation: z,
|
|
1075
|
+
scale: P,
|
|
1076
|
+
baseSize: _
|
|
1082
1077
|
};
|
|
1083
|
-
|
|
1078
|
+
o.push(Y);
|
|
1084
1079
|
}
|
|
1085
|
-
return
|
|
1080
|
+
return o;
|
|
1086
1081
|
}
|
|
1087
1082
|
/**
|
|
1088
1083
|
* Utility: Generate random number between min and max
|
|
@@ -1094,7 +1089,7 @@ class ue {
|
|
|
1094
1089
|
return Math.random() * (e - t) + t;
|
|
1095
1090
|
}
|
|
1096
1091
|
}
|
|
1097
|
-
class
|
|
1092
|
+
class oe {
|
|
1098
1093
|
constructor(t, e = {}) {
|
|
1099
1094
|
this.config = t, this.imageConfig = e;
|
|
1100
1095
|
}
|
|
@@ -1106,50 +1101,49 @@ class ge {
|
|
|
1106
1101
|
* @returns Array of layout objects with position, rotation, scale
|
|
1107
1102
|
*/
|
|
1108
1103
|
generate(t, e, i = {}) {
|
|
1109
|
-
|
|
1110
|
-
const n = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, c = ((A = this.imageConfig.rotation) == null ? void 0 : A.mode) ?? "none", u = ((z = (S = this.imageConfig.rotation) == null ? void 0 : S.range) == null ? void 0 : z.min) ?? -15, l = ((H = (_ = this.imageConfig.rotation) == null ? void 0 : _.range) == null ? void 0 : H.max) ?? 15, d = ((D = ($ = this.imageConfig.sizing) == null ? void 0 : $.variance) == null ? void 0 : D.min) ?? 1, h = ((L = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : L.max) ?? 1, g = d !== 1 || h !== 1, p = this.config.scaleDecay ?? 0, b = i.fixedHeight ?? a, f = s / 2, m = r / 2, y = Math.ceil(Math.sqrt(t));
|
|
1104
|
+
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, l = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = l !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = i.fixedHeight ?? a, g = s / 2, m = r / 2, E = Math.ceil(Math.sqrt(t));
|
|
1111
1105
|
if (t > 0) {
|
|
1112
|
-
const
|
|
1113
|
-
|
|
1106
|
+
const S = f ? this.random(l, d) : 1, x = p * S;
|
|
1107
|
+
o.push({
|
|
1114
1108
|
id: 0,
|
|
1115
|
-
x:
|
|
1109
|
+
x: g,
|
|
1116
1110
|
y: m,
|
|
1117
|
-
rotation:
|
|
1111
|
+
rotation: h === "random" ? this.random(c * 0.33, u * 0.33) : 0,
|
|
1118
1112
|
// Less rotation for center
|
|
1119
|
-
scale:
|
|
1120
|
-
baseSize:
|
|
1113
|
+
scale: S,
|
|
1114
|
+
baseSize: x,
|
|
1121
1115
|
zIndex: 100
|
|
1122
1116
|
// Center image is highest
|
|
1123
1117
|
});
|
|
1124
1118
|
}
|
|
1125
|
-
let v = 1,
|
|
1119
|
+
let v = 1, w = 1;
|
|
1126
1120
|
for (; v < t; ) {
|
|
1127
|
-
const
|
|
1128
|
-
if (
|
|
1129
|
-
|
|
1121
|
+
const S = w / E, x = b > 0 ? 1 - S * b * 0.5 : 1, T = w * (p * 0.8), M = T * 1.5, z = Math.PI * (3 * (M + T) - Math.sqrt((3 * M + T) * (M + 3 * T))), P = this.estimateWidth(p), _ = Math.floor(z / (P * 0.7));
|
|
1122
|
+
if (_ === 0) {
|
|
1123
|
+
w++;
|
|
1130
1124
|
continue;
|
|
1131
1125
|
}
|
|
1132
|
-
const
|
|
1133
|
-
for (let
|
|
1134
|
-
const
|
|
1135
|
-
let
|
|
1136
|
-
const
|
|
1137
|
-
|
|
1138
|
-
const
|
|
1139
|
-
|
|
1126
|
+
const Y = 2 * Math.PI / _, N = w * (20 * Math.PI / 180);
|
|
1127
|
+
for (let R = 0; R < _ && v < t; R++) {
|
|
1128
|
+
const D = R * Y + N, k = f ? this.random(l, d) : 1, H = x * k, A = p * H;
|
|
1129
|
+
let C = g + Math.cos(D) * M, O = m + Math.sin(D) * T;
|
|
1130
|
+
const $ = this.config.spacing.padding ?? 50, U = A * 1.5 / 2, L = A / 2;
|
|
1131
|
+
C - U < $ ? C = $ + U : C + U > s - $ && (C = s - $ - U), O - L < $ ? O = $ + L : O + L > r - $ && (O = r - $ - L);
|
|
1132
|
+
const W = h === "random" ? this.random(c, u) : 0;
|
|
1133
|
+
o.push({
|
|
1140
1134
|
id: v,
|
|
1141
|
-
x:
|
|
1142
|
-
y:
|
|
1143
|
-
rotation:
|
|
1144
|
-
scale:
|
|
1145
|
-
baseSize:
|
|
1146
|
-
zIndex: Math.max(1, 100 -
|
|
1135
|
+
x: C,
|
|
1136
|
+
y: O,
|
|
1137
|
+
rotation: W,
|
|
1138
|
+
scale: H,
|
|
1139
|
+
baseSize: A,
|
|
1140
|
+
zIndex: Math.max(1, 100 - w)
|
|
1147
1141
|
// Outer rings have lower z-index
|
|
1148
1142
|
}), v++;
|
|
1149
1143
|
}
|
|
1150
|
-
|
|
1144
|
+
w++;
|
|
1151
1145
|
}
|
|
1152
|
-
return
|
|
1146
|
+
return o;
|
|
1153
1147
|
}
|
|
1154
1148
|
/**
|
|
1155
1149
|
* Estimate image width based on height
|
|
@@ -1170,7 +1164,7 @@ class ge {
|
|
|
1170
1164
|
return Math.random() * (e - t) + t;
|
|
1171
1165
|
}
|
|
1172
1166
|
}
|
|
1173
|
-
const
|
|
1167
|
+
const se = {
|
|
1174
1168
|
columns: "auto",
|
|
1175
1169
|
rows: "auto",
|
|
1176
1170
|
stagger: "none",
|
|
@@ -1180,7 +1174,7 @@ const fe = {
|
|
|
1180
1174
|
alignment: "center",
|
|
1181
1175
|
gap: 10,
|
|
1182
1176
|
overflowOffset: 0.25
|
|
1183
|
-
},
|
|
1177
|
+
}, St = [
|
|
1184
1178
|
{ x: 1, y: 1 },
|
|
1185
1179
|
// bottom-right
|
|
1186
1180
|
{ x: -1, y: -1 },
|
|
@@ -1198,7 +1192,7 @@ const fe = {
|
|
|
1198
1192
|
{ x: 0, y: 1 }
|
|
1199
1193
|
// down
|
|
1200
1194
|
];
|
|
1201
|
-
class
|
|
1195
|
+
class ae {
|
|
1202
1196
|
constructor(t, e = {}) {
|
|
1203
1197
|
this.config = t, this.imageConfig = e;
|
|
1204
1198
|
}
|
|
@@ -1210,74 +1204,73 @@ class me {
|
|
|
1210
1204
|
* @returns Array of layout objects with position, rotation, scale
|
|
1211
1205
|
*/
|
|
1212
1206
|
generate(t, e, i = {}) {
|
|
1213
|
-
|
|
1214
|
-
const n = [], { width: s, height: r } = e, a = { ...fe, ...this.config.grid }, c = this.config.spacing.padding, u = i.fixedHeight ?? 200, l = ((Q = this.imageConfig.rotation) == null ? void 0 : Q.mode) ?? "none", d = ((tt = (G = this.imageConfig.sizing) == null ? void 0 : G.variance) == null ? void 0 : tt.min) ?? 1, h = ((et = (Y = this.imageConfig.sizing) == null ? void 0 : Y.variance) == null ? void 0 : et.max) ?? 1, g = d !== 1 || h !== 1, p = s - 2 * c, b = r - 2 * c, { columns: f, rows: m } = this.calculateGridDimensions(
|
|
1207
|
+
const o = [], { width: s, height: r } = e, a = { ...se, ...this.config.grid }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = l !== 1 || d !== 1, b = s - 2 * h, p = r - 2 * h, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1215
1208
|
t,
|
|
1216
|
-
p,
|
|
1217
1209
|
b,
|
|
1218
|
-
|
|
1210
|
+
p,
|
|
1211
|
+
c,
|
|
1219
1212
|
a
|
|
1220
|
-
),
|
|
1213
|
+
), E = a.stagger === "row", v = a.stagger === "column", w = E ? g + 0.5 : g, S = v ? m + 0.5 : m, x = (b - a.gap * (g - 1)) / w, T = (p - a.gap * (m - 1)) / S, M = E ? x / 2 : 0, z = v ? T / 2 : 0, P = 1 + a.overlap, _ = Math.min(x, T) * P, Y = i.fixedHeight ? Math.min(i.fixedHeight, _) : _, N = g * x + (g - 1) * a.gap + M, R = m * T + (m - 1) * a.gap + z, D = h + (b - N) / 2, k = h + (p - R) / 2, H = g * m, A = a.columns !== "auto" && a.rows !== "auto", C = A && t > H;
|
|
1221
1214
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1222
1215
|
gridConfigColumns: a.columns,
|
|
1223
1216
|
gridConfigRows: a.rows,
|
|
1224
|
-
columns:
|
|
1217
|
+
columns: g,
|
|
1225
1218
|
rows: m,
|
|
1226
|
-
cellCount:
|
|
1227
|
-
hasFixedGrid:
|
|
1219
|
+
cellCount: H,
|
|
1220
|
+
hasFixedGrid: A,
|
|
1228
1221
|
imageCount: t,
|
|
1229
|
-
isOverflowMode:
|
|
1222
|
+
isOverflowMode: C
|
|
1230
1223
|
});
|
|
1231
|
-
const
|
|
1232
|
-
for (let
|
|
1233
|
-
let
|
|
1234
|
-
if (
|
|
1235
|
-
const
|
|
1236
|
-
|
|
1224
|
+
const O = C ? new Array(H).fill(0) : [], $ = Math.min(x, T) * a.overflowOffset;
|
|
1225
|
+
for (let F = 0; F < t; F++) {
|
|
1226
|
+
let U, L, W = 0;
|
|
1227
|
+
if (C && F >= H) {
|
|
1228
|
+
const q = F - H, j = q % H;
|
|
1229
|
+
W = Math.floor(q / H) + 1, O[j]++, a.fillDirection === "row" ? (U = j % g, L = Math.floor(j / g)) : (L = j % m, U = Math.floor(j / m));
|
|
1237
1230
|
} else
|
|
1238
|
-
a.fillDirection === "row" ? (
|
|
1239
|
-
let
|
|
1240
|
-
if (a.stagger === "row" &&
|
|
1241
|
-
const
|
|
1242
|
-
|
|
1231
|
+
a.fillDirection === "row" ? (U = F % g, L = Math.floor(F / g)) : (L = F % m, U = Math.floor(F / m));
|
|
1232
|
+
let G = D + U * (x + a.gap) + x / 2, X = k + L * (T + a.gap) + T / 2;
|
|
1233
|
+
if (a.stagger === "row" && L % 2 === 1 ? G += x / 2 : a.stagger === "column" && U % 2 === 1 && (X += T / 2), W > 0) {
|
|
1234
|
+
const q = (W - 1) % St.length, j = St[q];
|
|
1235
|
+
G += j.x * $, X += j.y * $;
|
|
1243
1236
|
}
|
|
1244
1237
|
if (a.jitter > 0) {
|
|
1245
|
-
const
|
|
1246
|
-
|
|
1238
|
+
const q = x / 2 * a.jitter, j = T / 2 * a.jitter;
|
|
1239
|
+
G += this.random(-q, q), X += this.random(-j, j);
|
|
1247
1240
|
}
|
|
1248
|
-
let
|
|
1249
|
-
if (!
|
|
1250
|
-
const
|
|
1251
|
-
if (
|
|
1252
|
-
const
|
|
1253
|
-
let
|
|
1254
|
-
a.alignment === "center" ?
|
|
1241
|
+
let B = G, J = X;
|
|
1242
|
+
if (!C && a.fillDirection === "row") {
|
|
1243
|
+
const q = t % g || g;
|
|
1244
|
+
if (L === Math.floor((t - 1) / g) && q < g) {
|
|
1245
|
+
const vt = q * x + (q - 1) * a.gap;
|
|
1246
|
+
let gt = 0;
|
|
1247
|
+
a.alignment === "center" ? gt = (N - vt) / 2 : a.alignment === "end" && (gt = N - vt), B += gt;
|
|
1255
1248
|
}
|
|
1256
1249
|
}
|
|
1257
|
-
const
|
|
1258
|
-
|
|
1259
|
-
let
|
|
1260
|
-
if (
|
|
1261
|
-
const
|
|
1262
|
-
a.jitter > 0 ?
|
|
1250
|
+
const rt = f ? this.random(l, d) : 1, K = Y * rt, it = K * 1.5 / 2, nt = K / 2, lt = h + it, ht = s - h - it, zt = h + nt, Ft = r - h - nt;
|
|
1251
|
+
B = Math.max(lt, Math.min(B, ht)), J = Math.max(zt, Math.min(J, Ft));
|
|
1252
|
+
let dt = 0;
|
|
1253
|
+
if (u === "random") {
|
|
1254
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, j = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1255
|
+
a.jitter > 0 ? dt = this.random(q * a.jitter, j * a.jitter) : dt = this.random(q, j);
|
|
1263
1256
|
}
|
|
1264
|
-
let
|
|
1265
|
-
|
|
1266
|
-
id:
|
|
1267
|
-
x:
|
|
1268
|
-
y:
|
|
1269
|
-
rotation:
|
|
1270
|
-
scale:
|
|
1271
|
-
baseSize:
|
|
1272
|
-
zIndex:
|
|
1257
|
+
let ut;
|
|
1258
|
+
C && W > 0 ? ut = 50 - W : ut = C ? 100 + F : F + 1, o.push({
|
|
1259
|
+
id: F,
|
|
1260
|
+
x: B,
|
|
1261
|
+
y: J,
|
|
1262
|
+
rotation: dt,
|
|
1263
|
+
scale: rt,
|
|
1264
|
+
baseSize: K,
|
|
1265
|
+
zIndex: ut
|
|
1273
1266
|
});
|
|
1274
1267
|
}
|
|
1275
|
-
return
|
|
1268
|
+
return o;
|
|
1276
1269
|
}
|
|
1277
1270
|
/**
|
|
1278
1271
|
* Calculate optimal grid dimensions based on image count and container
|
|
1279
1272
|
*/
|
|
1280
|
-
calculateGridDimensions(t, e, i,
|
|
1273
|
+
calculateGridDimensions(t, e, i, o, s) {
|
|
1281
1274
|
let r, a;
|
|
1282
1275
|
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1283
1276
|
r = s.columns, a = s.rows;
|
|
@@ -1286,8 +1279,8 @@ class me {
|
|
|
1286
1279
|
else if (s.rows !== "auto")
|
|
1287
1280
|
a = s.rows, r = Math.ceil(t / a);
|
|
1288
1281
|
else {
|
|
1289
|
-
const
|
|
1290
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t *
|
|
1282
|
+
const h = e / i;
|
|
1283
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))), a = Math.ceil(t / r); r > 1 && (r - 1) * a >= t; )
|
|
1291
1284
|
r--;
|
|
1292
1285
|
}
|
|
1293
1286
|
return { columns: Math.max(1, r), rows: Math.max(1, a) };
|
|
@@ -1299,14 +1292,14 @@ class me {
|
|
|
1299
1292
|
return Math.random() * (e - t) + t;
|
|
1300
1293
|
}
|
|
1301
1294
|
}
|
|
1302
|
-
const
|
|
1295
|
+
const re = Math.PI * (3 - Math.sqrt(5)), ce = {
|
|
1303
1296
|
spiralType: "golden",
|
|
1304
1297
|
direction: "counterclockwise",
|
|
1305
1298
|
tightness: 1,
|
|
1306
1299
|
scaleDecay: 0,
|
|
1307
1300
|
startAngle: 0
|
|
1308
1301
|
};
|
|
1309
|
-
class
|
|
1302
|
+
class le {
|
|
1310
1303
|
constructor(t, e = {}) {
|
|
1311
1304
|
this.config = t, this.imageConfig = e;
|
|
1312
1305
|
}
|
|
@@ -1318,81 +1311,80 @@ class ye {
|
|
|
1318
1311
|
* @returns Array of layout objects with position, rotation, scale
|
|
1319
1312
|
*/
|
|
1320
1313
|
generate(t, e, i = {}) {
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
let T, M;
|
|
1314
|
+
const o = [], { width: s, height: r } = e, a = { ...ce, ...this.config.spiral }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || b !== 1, g = this.config.scaleDecay ?? a.scaleDecay, m = s / 2, E = r / 2, v = Math.min(
|
|
1315
|
+
m - h - c / 2,
|
|
1316
|
+
E - h - c / 2
|
|
1317
|
+
), w = a.direction === "clockwise" ? -1 : 1;
|
|
1318
|
+
for (let S = 0; S < t; S++) {
|
|
1319
|
+
let x, T;
|
|
1328
1320
|
if (a.spiralType === "golden")
|
|
1329
|
-
|
|
1321
|
+
x = S * re * w + a.startAngle, T = this.calculateGoldenRadius(S, t, v, a.tightness);
|
|
1330
1322
|
else if (a.spiralType === "archimedean") {
|
|
1331
|
-
const
|
|
1332
|
-
|
|
1323
|
+
const G = S * 0.5 * a.tightness;
|
|
1324
|
+
x = G * w + a.startAngle, T = this.calculateArchimedeanRadius(G, t, v, a.tightness);
|
|
1333
1325
|
} else {
|
|
1334
|
-
const
|
|
1335
|
-
|
|
1326
|
+
const G = S * 0.3 * a.tightness;
|
|
1327
|
+
x = G * w + a.startAngle, T = this.calculateLogarithmicRadius(G, t, v, a.tightness);
|
|
1336
1328
|
}
|
|
1337
|
-
const
|
|
1338
|
-
let
|
|
1339
|
-
if (
|
|
1340
|
-
const
|
|
1341
|
-
|
|
1342
|
-
} else
|
|
1343
|
-
const
|
|
1344
|
-
|
|
1345
|
-
id:
|
|
1346
|
-
x:
|
|
1347
|
-
y:
|
|
1348
|
-
rotation:
|
|
1349
|
-
scale:
|
|
1350
|
-
baseSize:
|
|
1351
|
-
zIndex:
|
|
1329
|
+
const M = m + Math.cos(x) * T, z = E + Math.sin(x) * T, P = T / v, _ = g > 0 ? 1 - P * g * 0.5 : 1, Y = p ? this.random(f, b) : 1, N = _ * Y, R = c * N, k = R * 1.5 / 2, H = R / 2, A = h + k, C = s - h - k, O = h + H, $ = r - h - H, F = Math.max(A, Math.min(M, C)), U = Math.max(O, Math.min(z, $));
|
|
1330
|
+
let L = 0;
|
|
1331
|
+
if (u === "random") {
|
|
1332
|
+
const G = x * 180 / Math.PI % 360, X = this.random(l, d);
|
|
1333
|
+
L = a.spiralType === "golden" ? X : G * 0.1 + X * 0.9;
|
|
1334
|
+
} else u === "tangent" && (L = this.calculateSpiralTangent(x, T, a));
|
|
1335
|
+
const W = t - S;
|
|
1336
|
+
o.push({
|
|
1337
|
+
id: S,
|
|
1338
|
+
x: F,
|
|
1339
|
+
y: U,
|
|
1340
|
+
rotation: L,
|
|
1341
|
+
scale: N,
|
|
1342
|
+
baseSize: R,
|
|
1343
|
+
zIndex: W
|
|
1352
1344
|
});
|
|
1353
1345
|
}
|
|
1354
|
-
return
|
|
1346
|
+
return o;
|
|
1355
1347
|
}
|
|
1356
1348
|
/**
|
|
1357
1349
|
* Calculate tangent angle for spiral curve at given position
|
|
1358
1350
|
* This aligns the image along the spiral's direction of travel
|
|
1359
1351
|
*/
|
|
1360
1352
|
calculateSpiralTangent(t, e, i) {
|
|
1361
|
-
let
|
|
1353
|
+
let o;
|
|
1362
1354
|
if (i.spiralType === "golden")
|
|
1363
|
-
|
|
1355
|
+
o = t + Math.PI / 2;
|
|
1364
1356
|
else if (i.spiralType === "archimedean") {
|
|
1365
1357
|
const r = 1 / i.tightness, a = Math.atan(e / r);
|
|
1366
|
-
|
|
1358
|
+
o = t + a;
|
|
1367
1359
|
} else {
|
|
1368
1360
|
const r = 0.15 / i.tightness, a = Math.atan(1 / r);
|
|
1369
|
-
|
|
1361
|
+
o = t + a;
|
|
1370
1362
|
}
|
|
1371
|
-
return
|
|
1363
|
+
return o * 180 / Math.PI % 360 - 90;
|
|
1372
1364
|
}
|
|
1373
1365
|
/**
|
|
1374
1366
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1375
1367
|
* Creates even distribution like sunflower seeds
|
|
1376
1368
|
*/
|
|
1377
|
-
calculateGoldenRadius(t, e, i,
|
|
1378
|
-
const r = i / Math.sqrt(e) * Math.sqrt(t) /
|
|
1369
|
+
calculateGoldenRadius(t, e, i, o) {
|
|
1370
|
+
const r = i / Math.sqrt(e) * Math.sqrt(t) / o;
|
|
1379
1371
|
return Math.min(r, i);
|
|
1380
1372
|
}
|
|
1381
1373
|
/**
|
|
1382
1374
|
* Calculate radius for Archimedean spiral
|
|
1383
1375
|
* r = a + b*θ (constant spacing between arms)
|
|
1384
1376
|
*/
|
|
1385
|
-
calculateArchimedeanRadius(t, e, i,
|
|
1386
|
-
const s = e * 0.5 *
|
|
1377
|
+
calculateArchimedeanRadius(t, e, i, o) {
|
|
1378
|
+
const s = e * 0.5 * o;
|
|
1387
1379
|
return t / s * i;
|
|
1388
1380
|
}
|
|
1389
1381
|
/**
|
|
1390
1382
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1391
1383
|
* r = a * e^(b*θ)
|
|
1392
1384
|
*/
|
|
1393
|
-
calculateLogarithmicRadius(t, e, i,
|
|
1394
|
-
const s = i * 0.05, r = 0.15 /
|
|
1395
|
-
return a /
|
|
1385
|
+
calculateLogarithmicRadius(t, e, i, o) {
|
|
1386
|
+
const s = i * 0.05, r = 0.15 / o, a = s * Math.exp(r * t), h = e * 0.3 * o, c = s * Math.exp(r * h);
|
|
1387
|
+
return a / c * i;
|
|
1396
1388
|
}
|
|
1397
1389
|
/**
|
|
1398
1390
|
* Utility: Generate random number between min and max
|
|
@@ -1401,7 +1393,7 @@ class ye {
|
|
|
1401
1393
|
return Math.random() * (e - t) + t;
|
|
1402
1394
|
}
|
|
1403
1395
|
}
|
|
1404
|
-
const
|
|
1396
|
+
const he = {
|
|
1405
1397
|
clusterCount: "auto",
|
|
1406
1398
|
clusterSpread: 150,
|
|
1407
1399
|
clusterSpacing: 200,
|
|
@@ -1409,7 +1401,7 @@ const ve = {
|
|
|
1409
1401
|
overlap: 0.3,
|
|
1410
1402
|
distribution: "gaussian"
|
|
1411
1403
|
};
|
|
1412
|
-
class
|
|
1404
|
+
class de {
|
|
1413
1405
|
constructor(t, e = {}) {
|
|
1414
1406
|
this.config = t, this.imageConfig = e;
|
|
1415
1407
|
}
|
|
@@ -1421,86 +1413,85 @@ class we {
|
|
|
1421
1413
|
* @returns Array of layout objects with position, rotation, scale
|
|
1422
1414
|
*/
|
|
1423
1415
|
generate(t, e, i = {}) {
|
|
1424
|
-
|
|
1425
|
-
const n = [], { width: s, height: r } = e, a = { ...ve, ...this.config.cluster }, c = this.config.spacing.padding, u = i.fixedHeight ?? 200, l = ((E = this.imageConfig.rotation) == null ? void 0 : E.mode) ?? "none", d = ((S = (A = this.imageConfig.rotation) == null ? void 0 : A.range) == null ? void 0 : S.min) ?? -15, h = ((_ = (z = this.imageConfig.rotation) == null ? void 0 : z.range) == null ? void 0 : _.max) ?? 15, g = (($ = (H = this.imageConfig.sizing) == null ? void 0 : H.variance) == null ? void 0 : $.min) ?? 1, p = ((W = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : W.max) ?? 1, b = g !== 1 || p !== 1, f = this.calculateClusterCount(
|
|
1416
|
+
const o = [], { width: s, height: r } = e, a = { ...he, ...this.config.cluster }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1426
1417
|
t,
|
|
1427
1418
|
a.clusterCount,
|
|
1428
1419
|
s,
|
|
1429
1420
|
r,
|
|
1430
1421
|
a.clusterSpacing
|
|
1431
1422
|
), m = this.generateClusterCenters(
|
|
1432
|
-
|
|
1423
|
+
g,
|
|
1433
1424
|
s,
|
|
1434
1425
|
r,
|
|
1435
|
-
|
|
1426
|
+
h,
|
|
1436
1427
|
a
|
|
1437
|
-
),
|
|
1438
|
-
for (let
|
|
1439
|
-
|
|
1428
|
+
), E = new Array(g).fill(0);
|
|
1429
|
+
for (let w = 0; w < t; w++)
|
|
1430
|
+
E[w % g]++;
|
|
1440
1431
|
let v = 0;
|
|
1441
|
-
for (let
|
|
1442
|
-
const
|
|
1443
|
-
for (let
|
|
1444
|
-
let
|
|
1432
|
+
for (let w = 0; w < g; w++) {
|
|
1433
|
+
const S = m[w], x = E[w];
|
|
1434
|
+
for (let T = 0; T < x; T++) {
|
|
1435
|
+
let M, z;
|
|
1445
1436
|
if (a.distribution === "gaussian")
|
|
1446
|
-
|
|
1437
|
+
M = this.gaussianRandom() * S.spread, z = this.gaussianRandom() * S.spread;
|
|
1447
1438
|
else {
|
|
1448
|
-
const
|
|
1449
|
-
|
|
1439
|
+
const L = this.random(0, Math.PI * 2), W = this.random(0, S.spread);
|
|
1440
|
+
M = Math.cos(L) * W, z = Math.sin(L) * W;
|
|
1450
1441
|
}
|
|
1451
|
-
const
|
|
1452
|
-
|
|
1453
|
-
const
|
|
1454
|
-
let
|
|
1455
|
-
const
|
|
1456
|
-
|
|
1457
|
-
const
|
|
1458
|
-
|
|
1442
|
+
const P = 1 + a.overlap * 0.5, _ = 1 + a.overlap * 0.3;
|
|
1443
|
+
M /= P, z /= P;
|
|
1444
|
+
const Y = p ? this.random(f, b) : 1, N = _ * Y, R = c * N;
|
|
1445
|
+
let D = S.x + M, k = S.y + z;
|
|
1446
|
+
const A = R * 1.5 / 2, C = R / 2;
|
|
1447
|
+
D = Math.max(h + A, Math.min(D, s - h - A)), k = Math.max(h + C, Math.min(k, r - h - C));
|
|
1448
|
+
const O = u === "random" ? this.random(l, d) : 0, F = Math.sqrt(M * M + z * z) / S.spread, U = Math.round((1 - F) * 50) + 1;
|
|
1449
|
+
o.push({
|
|
1459
1450
|
id: v,
|
|
1460
|
-
x:
|
|
1461
|
-
y:
|
|
1462
|
-
rotation:
|
|
1463
|
-
scale:
|
|
1464
|
-
baseSize:
|
|
1465
|
-
zIndex:
|
|
1451
|
+
x: D,
|
|
1452
|
+
y: k,
|
|
1453
|
+
rotation: O,
|
|
1454
|
+
scale: N,
|
|
1455
|
+
baseSize: R,
|
|
1456
|
+
zIndex: U
|
|
1466
1457
|
}), v++;
|
|
1467
1458
|
}
|
|
1468
1459
|
}
|
|
1469
|
-
return
|
|
1460
|
+
return o;
|
|
1470
1461
|
}
|
|
1471
1462
|
/**
|
|
1472
1463
|
* Calculate optimal number of clusters based on image count and container
|
|
1473
1464
|
*/
|
|
1474
|
-
calculateClusterCount(t, e, i,
|
|
1465
|
+
calculateClusterCount(t, e, i, o, s) {
|
|
1475
1466
|
if (e !== "auto")
|
|
1476
1467
|
return Math.max(1, Math.min(e, t));
|
|
1477
|
-
const a = Math.max(1, Math.ceil(t / 8)),
|
|
1478
|
-
i / s * (
|
|
1468
|
+
const a = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1469
|
+
i / s * (o / s) * 0.6
|
|
1479
1470
|
);
|
|
1480
|
-
return Math.max(1, Math.min(a,
|
|
1471
|
+
return Math.max(1, Math.min(a, h, 10));
|
|
1481
1472
|
}
|
|
1482
1473
|
/**
|
|
1483
1474
|
* Generate cluster center positions with spacing constraints
|
|
1484
1475
|
*/
|
|
1485
|
-
generateClusterCenters(t, e, i,
|
|
1486
|
-
const r = [],
|
|
1487
|
-
for (let
|
|
1488
|
-
let
|
|
1489
|
-
for (let
|
|
1490
|
-
const
|
|
1491
|
-
x: this.random(
|
|
1492
|
-
y: this.random(
|
|
1476
|
+
generateClusterCenters(t, e, i, o, s) {
|
|
1477
|
+
const r = [], h = o + s.clusterSpread, c = e - o - s.clusterSpread, u = o + s.clusterSpread, l = i - o - s.clusterSpread;
|
|
1478
|
+
for (let d = 0; d < t; d++) {
|
|
1479
|
+
let f = null, b = -1;
|
|
1480
|
+
for (let p = 0; p < 100; p++) {
|
|
1481
|
+
const g = {
|
|
1482
|
+
x: this.random(h, c),
|
|
1483
|
+
y: this.random(u, l),
|
|
1493
1484
|
spread: this.calculateClusterSpread(s)
|
|
1494
1485
|
};
|
|
1495
1486
|
let m = 1 / 0;
|
|
1496
|
-
for (const
|
|
1497
|
-
const v =
|
|
1498
|
-
m = Math.min(m,
|
|
1487
|
+
for (const E of r) {
|
|
1488
|
+
const v = g.x - E.x, w = g.y - E.y, S = Math.sqrt(v * v + w * w);
|
|
1489
|
+
m = Math.min(m, S);
|
|
1499
1490
|
}
|
|
1500
|
-
if ((r.length === 0 || m >
|
|
1491
|
+
if ((r.length === 0 || m > b) && (f = g, b = m), m >= s.clusterSpacing)
|
|
1501
1492
|
break;
|
|
1502
1493
|
}
|
|
1503
|
-
|
|
1494
|
+
f && r.push(f);
|
|
1504
1495
|
}
|
|
1505
1496
|
return r;
|
|
1506
1497
|
}
|
|
@@ -1528,7 +1519,7 @@ class we {
|
|
|
1528
1519
|
return Math.random() * (e - t) + t;
|
|
1529
1520
|
}
|
|
1530
1521
|
}
|
|
1531
|
-
class
|
|
1522
|
+
class ue {
|
|
1532
1523
|
constructor(t, e = {}) {
|
|
1533
1524
|
this.config = t, this.imageConfig = e;
|
|
1534
1525
|
}
|
|
@@ -1540,33 +1531,32 @@ class xe {
|
|
|
1540
1531
|
* @returns Array of layout objects with position, rotation, scale
|
|
1541
1532
|
*/
|
|
1542
1533
|
generate(t, e, i = {}) {
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
...kt,
|
|
1534
|
+
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || f !== 1, p = i.fixedHeight ?? a, g = {
|
|
1535
|
+
...Dt,
|
|
1546
1536
|
...this.config.wave
|
|
1547
|
-
}, { rows: m, amplitude:
|
|
1548
|
-
let
|
|
1549
|
-
for (let
|
|
1550
|
-
const
|
|
1551
|
-
let
|
|
1552
|
-
|
|
1553
|
-
for (let
|
|
1554
|
-
const
|
|
1555
|
-
let
|
|
1556
|
-
|
|
1557
|
-
const
|
|
1558
|
-
|
|
1559
|
-
id:
|
|
1560
|
-
x: Math.max(
|
|
1561
|
-
y: Math.max(
|
|
1562
|
-
rotation:
|
|
1563
|
-
scale:
|
|
1564
|
-
baseSize:
|
|
1565
|
-
zIndex:
|
|
1566
|
-
}),
|
|
1537
|
+
}, { rows: m, amplitude: E, frequency: v, phaseShift: w, synchronization: S } = g, x = Math.ceil(t / m), z = p * 1.5 / 2, P = h + z, _ = s - h - z, Y = _ - P, N = x > 1 ? Y / (x - 1) : 0, R = h + E + p / 2, D = r - h - E - p / 2, k = D - R, H = m > 1 ? k / (m - 1) : 0;
|
|
1538
|
+
let A = 0;
|
|
1539
|
+
for (let C = 0; C < m && A < t; C++) {
|
|
1540
|
+
const O = m === 1 ? (R + D) / 2 : R + C * H;
|
|
1541
|
+
let $ = 0;
|
|
1542
|
+
S === "offset" ? $ = C * w : S === "alternating" && ($ = C * Math.PI);
|
|
1543
|
+
for (let F = 0; F < x && A < t; F++) {
|
|
1544
|
+
const U = x === 1 ? (P + _) / 2 : P + F * N, L = this.calculateWaveY(U, s, E, v, $), W = U, G = O + L, X = b ? this.random(d, f) : 1, B = p * X;
|
|
1545
|
+
let J = 0;
|
|
1546
|
+
c === "tangent" ? J = this.calculateRotation(U, s, E, v, $) : c === "random" && (J = this.random(u, l));
|
|
1547
|
+
const K = B * 1.5 / 2, ct = B / 2, it = h + K, nt = s - h - K, lt = h + ct, ht = r - h - ct;
|
|
1548
|
+
o.push({
|
|
1549
|
+
id: A,
|
|
1550
|
+
x: Math.max(it, Math.min(W, nt)),
|
|
1551
|
+
y: Math.max(lt, Math.min(G, ht)),
|
|
1552
|
+
rotation: J,
|
|
1553
|
+
scale: X,
|
|
1554
|
+
baseSize: B,
|
|
1555
|
+
zIndex: A + 1
|
|
1556
|
+
}), A++;
|
|
1567
1557
|
}
|
|
1568
1558
|
}
|
|
1569
|
-
return
|
|
1559
|
+
return o;
|
|
1570
1560
|
}
|
|
1571
1561
|
/**
|
|
1572
1562
|
* Calculate Y position displacement on wave curve
|
|
@@ -1577,9 +1567,9 @@ class xe {
|
|
|
1577
1567
|
* @param phase - Phase offset
|
|
1578
1568
|
* @returns Y displacement from baseline
|
|
1579
1569
|
*/
|
|
1580
|
-
calculateWaveY(t, e, i,
|
|
1570
|
+
calculateWaveY(t, e, i, o, s) {
|
|
1581
1571
|
const r = t / e;
|
|
1582
|
-
return i * Math.sin(
|
|
1572
|
+
return i * Math.sin(o * r * 2 * Math.PI + s);
|
|
1583
1573
|
}
|
|
1584
1574
|
/**
|
|
1585
1575
|
* Calculate rotation based on wave tangent
|
|
@@ -1590,8 +1580,8 @@ class xe {
|
|
|
1590
1580
|
* @param phase - Phase offset
|
|
1591
1581
|
* @returns Rotation angle in degrees
|
|
1592
1582
|
*/
|
|
1593
|
-
calculateRotation(t, e, i,
|
|
1594
|
-
const r = t / e, a = i *
|
|
1583
|
+
calculateRotation(t, e, i, o, s) {
|
|
1584
|
+
const r = t / e, a = i * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + s) / e;
|
|
1595
1585
|
return Math.atan(a) * (180 / Math.PI);
|
|
1596
1586
|
}
|
|
1597
1587
|
/**
|
|
@@ -1606,7 +1596,7 @@ class xe {
|
|
|
1606
1596
|
return Math.random() * (e - t) + t;
|
|
1607
1597
|
}
|
|
1608
1598
|
}
|
|
1609
|
-
class
|
|
1599
|
+
class ge {
|
|
1610
1600
|
constructor(t) {
|
|
1611
1601
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.placementLayout = this.initLayout();
|
|
1612
1602
|
}
|
|
@@ -1617,18 +1607,17 @@ class Ee {
|
|
|
1617
1607
|
initLayout() {
|
|
1618
1608
|
switch (this.config.algorithm) {
|
|
1619
1609
|
case "radial":
|
|
1620
|
-
return new
|
|
1610
|
+
return new oe(this.config, this.imageConfig);
|
|
1621
1611
|
case "grid":
|
|
1622
|
-
return new
|
|
1612
|
+
return new ae(this.config, this.imageConfig);
|
|
1623
1613
|
case "spiral":
|
|
1624
|
-
return new
|
|
1614
|
+
return new le(this.config, this.imageConfig);
|
|
1625
1615
|
case "cluster":
|
|
1626
|
-
return new
|
|
1616
|
+
return new de(this.config, this.imageConfig);
|
|
1627
1617
|
case "wave":
|
|
1628
|
-
return new xe(this.config, this.imageConfig);
|
|
1629
|
-
case "random":
|
|
1630
|
-
default:
|
|
1631
1618
|
return new ue(this.config, this.imageConfig);
|
|
1619
|
+
default:
|
|
1620
|
+
return new ne(this.config, this.imageConfig);
|
|
1632
1621
|
}
|
|
1633
1622
|
}
|
|
1634
1623
|
/**
|
|
@@ -1639,10 +1628,10 @@ class Ee {
|
|
|
1639
1628
|
* @returns Array of layout objects with position, rotation, scale
|
|
1640
1629
|
*/
|
|
1641
1630
|
generateLayout(t, e, i = {}) {
|
|
1642
|
-
const
|
|
1643
|
-
return
|
|
1631
|
+
const o = this.placementLayout.generate(t, e, i);
|
|
1632
|
+
return o.forEach((s) => {
|
|
1644
1633
|
this.layouts.set(s.id, s);
|
|
1645
|
-
}),
|
|
1634
|
+
}), o;
|
|
1646
1635
|
}
|
|
1647
1636
|
/**
|
|
1648
1637
|
* Get the original layout state for an image
|
|
@@ -1695,8 +1684,8 @@ class Ee {
|
|
|
1695
1684
|
return;
|
|
1696
1685
|
if (typeof i == "number")
|
|
1697
1686
|
return i;
|
|
1698
|
-
const
|
|
1699
|
-
return s === "mobile" ?
|
|
1687
|
+
const o = i, s = this.resolveBreakpoint(t);
|
|
1688
|
+
return s === "mobile" ? o.mobile ?? o.tablet ?? o.screen : s === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
|
|
1700
1689
|
}
|
|
1701
1690
|
/**
|
|
1702
1691
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1706,19 +1695,19 @@ class Ee {
|
|
|
1706
1695
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1707
1696
|
* @returns Calculated sizing result with height
|
|
1708
1697
|
*/
|
|
1709
|
-
calculateAdaptiveSize(t, e, i,
|
|
1710
|
-
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1698
|
+
calculateAdaptiveSize(t, e, i, o) {
|
|
1699
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1711
1700
|
if (r !== void 0)
|
|
1712
1701
|
return { height: r };
|
|
1713
|
-
const a =
|
|
1714
|
-
let m = Math.sqrt(
|
|
1715
|
-
m *=
|
|
1716
|
-
let
|
|
1717
|
-
if (
|
|
1702
|
+
const a = s?.minSize ?? 50, h = s?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: l, height: d } = t, p = l * d * c / e;
|
|
1703
|
+
let m = Math.sqrt(p / 1.4);
|
|
1704
|
+
m *= u, m = Math.min(m, i);
|
|
1705
|
+
let E = this.clamp(m, a, h);
|
|
1706
|
+
if (E === a && m < a) {
|
|
1718
1707
|
const v = Math.max(a * 0.05, 20);
|
|
1719
|
-
|
|
1708
|
+
E = Math.max(v, m);
|
|
1720
1709
|
}
|
|
1721
|
-
return { height:
|
|
1710
|
+
return { height: E };
|
|
1722
1711
|
}
|
|
1723
1712
|
/**
|
|
1724
1713
|
* Utility: Clamp a value between min and max
|
|
@@ -1727,77 +1716,75 @@ class Ee {
|
|
|
1727
1716
|
return Math.max(e, Math.min(i, t));
|
|
1728
1717
|
}
|
|
1729
1718
|
}
|
|
1730
|
-
var I = /* @__PURE__ */ ((
|
|
1731
|
-
function
|
|
1732
|
-
return
|
|
1719
|
+
var I = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(I || {});
|
|
1720
|
+
function fe(n) {
|
|
1721
|
+
return n in ft;
|
|
1733
1722
|
}
|
|
1734
|
-
function
|
|
1735
|
-
return
|
|
1723
|
+
function me(n) {
|
|
1724
|
+
return n ? fe(n) ? ft[n] : n : ft.md;
|
|
1736
1725
|
}
|
|
1737
|
-
function
|
|
1738
|
-
if (!
|
|
1726
|
+
function pe(n) {
|
|
1727
|
+
if (!n) return "";
|
|
1739
1728
|
const t = [];
|
|
1740
|
-
if (
|
|
1741
|
-
if (typeof
|
|
1742
|
-
t.push(`drop-shadow(${
|
|
1729
|
+
if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
|
|
1730
|
+
if (typeof n.dropShadow == "string")
|
|
1731
|
+
t.push(`drop-shadow(${n.dropShadow})`);
|
|
1743
1732
|
else {
|
|
1744
|
-
const e =
|
|
1733
|
+
const e = n.dropShadow;
|
|
1745
1734
|
t.push(`drop-shadow(${e.x}px ${e.y}px ${e.blur}px ${e.color})`);
|
|
1746
1735
|
}
|
|
1747
1736
|
return t.join(" ");
|
|
1748
1737
|
}
|
|
1749
|
-
function
|
|
1750
|
-
if (!
|
|
1738
|
+
function Q(n) {
|
|
1739
|
+
if (!n || n.style === "none" || n.width === 0)
|
|
1751
1740
|
return "none";
|
|
1752
|
-
const t =
|
|
1741
|
+
const t = n.width ?? 0, e = n.style ?? "solid", i = n.color ?? "#000000";
|
|
1753
1742
|
return `${t}px ${e} ${i}`;
|
|
1754
1743
|
}
|
|
1755
|
-
function
|
|
1756
|
-
|
|
1757
|
-
if (!o) return {};
|
|
1744
|
+
function st(n) {
|
|
1745
|
+
if (!n) return {};
|
|
1758
1746
|
const t = {};
|
|
1759
|
-
if (
|
|
1760
|
-
const
|
|
1761
|
-
|
|
1762
|
-
} else
|
|
1763
|
-
if (
|
|
1764
|
-
const
|
|
1765
|
-
t.borderTop =
|
|
1766
|
-
} else
|
|
1767
|
-
|
|
1768
|
-
const
|
|
1769
|
-
if (t.filter =
|
|
1770
|
-
const
|
|
1771
|
-
t.outline = `${
|
|
1772
|
-
}
|
|
1773
|
-
return
|
|
1747
|
+
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
1748
|
+
const s = n.border?.radius ?? 0;
|
|
1749
|
+
n.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (t.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? t.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (t.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? t.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (t.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? t.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (t.borderBottomLeftRadius = `${s}px`);
|
|
1750
|
+
} else n.border?.radius !== void 0 && (t.borderRadius = `${n.border.radius}px`);
|
|
1751
|
+
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
1752
|
+
const s = n.border || {}, r = { ...s, ...n.borderTop }, a = { ...s, ...n.borderRight }, h = { ...s, ...n.borderBottom }, c = { ...s, ...n.borderLeft };
|
|
1753
|
+
t.borderTop = Q(r), t.borderRight = Q(a), t.borderBottom = Q(h), t.borderLeft = Q(c);
|
|
1754
|
+
} else n.border && (t.border = Q(n.border));
|
|
1755
|
+
n.shadow !== void 0 && (t.boxShadow = me(n.shadow));
|
|
1756
|
+
const o = pe(n.filter);
|
|
1757
|
+
if (t.filter = o || "none", n.opacity !== void 0 && (t.opacity = String(n.opacity)), n.cursor !== void 0 && (t.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
1758
|
+
const s = n.outline.width ?? 0, r = n.outline.style ?? "solid", a = n.outline.color ?? "#000000";
|
|
1759
|
+
t.outline = `${s}px ${r} ${a}`, n.outline.offset !== void 0 && (t.outlineOffset = `${n.outline.offset}px`);
|
|
1760
|
+
}
|
|
1761
|
+
return n.objectFit !== void 0 && (t.objectFit = n.objectFit), n.aspectRatio !== void 0 && (t.aspectRatio = n.aspectRatio), t;
|
|
1774
1762
|
}
|
|
1775
|
-
function
|
|
1776
|
-
t.borderRadius !== void 0 && (
|
|
1763
|
+
function tt(n, t) {
|
|
1764
|
+
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio);
|
|
1777
1765
|
}
|
|
1778
|
-
function
|
|
1779
|
-
return
|
|
1766
|
+
function Lt(n) {
|
|
1767
|
+
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
1780
1768
|
}
|
|
1781
|
-
function
|
|
1782
|
-
const e =
|
|
1769
|
+
function et(n, t) {
|
|
1770
|
+
const e = Lt(t);
|
|
1783
1771
|
e && e.split(" ").forEach((i) => {
|
|
1784
|
-
i.trim() &&
|
|
1772
|
+
i.trim() && n.classList.add(i.trim());
|
|
1785
1773
|
});
|
|
1786
1774
|
}
|
|
1787
|
-
function
|
|
1788
|
-
const e =
|
|
1775
|
+
function Mt(n, t) {
|
|
1776
|
+
const e = Lt(t);
|
|
1789
1777
|
e && e.split(" ").forEach((i) => {
|
|
1790
|
-
i.trim() &&
|
|
1778
|
+
i.trim() && n.classList.remove(i.trim());
|
|
1791
1779
|
});
|
|
1792
1780
|
}
|
|
1793
|
-
const
|
|
1781
|
+
const It = {
|
|
1794
1782
|
UNFOCUSING: 999,
|
|
1795
1783
|
FOCUSING: 1e3
|
|
1796
1784
|
};
|
|
1797
|
-
class
|
|
1785
|
+
class be {
|
|
1798
1786
|
constructor(t, e, i) {
|
|
1799
|
-
|
|
1800
|
-
this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = ft(i == null ? void 0 : i.default), this.focusedStyles = ft(i == null ? void 0 : i.focused), this.defaultClassName = (n = i == null ? void 0 : i.default) == null ? void 0 : n.className, this.focusedClassName = (s = i == null ? void 0 : i.focused) == null ? void 0 : s.className;
|
|
1787
|
+
this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = st(i?.default), this.focusedStyles = st(i?.focused), this.defaultClassName = i?.default?.className, this.focusedClassName = i?.focused?.className;
|
|
1801
1788
|
}
|
|
1802
1789
|
/**
|
|
1803
1790
|
* Get current state machine state
|
|
@@ -1822,17 +1809,17 @@ class Ae {
|
|
|
1822
1809
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1823
1810
|
*/
|
|
1824
1811
|
calculateFocusDimensions(t, e, i) {
|
|
1825
|
-
const
|
|
1826
|
-
let a = s,
|
|
1827
|
-
const
|
|
1828
|
-
return
|
|
1812
|
+
const o = this.normalizeScalePercent(this.config.scalePercent), s = i.height * o, r = t / e;
|
|
1813
|
+
let a = s, h = a * r;
|
|
1814
|
+
const c = i.width * o;
|
|
1815
|
+
return h > c && (h = c, a = h / r), { width: h, height: a };
|
|
1829
1816
|
}
|
|
1830
1817
|
/**
|
|
1831
1818
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
1832
1819
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1833
1820
|
*/
|
|
1834
1821
|
calculateFocusTransform(t, e) {
|
|
1835
|
-
const i = t.width / 2,
|
|
1822
|
+
const i = t.width / 2, o = t.height / 2, s = i - e.x, r = o - e.y;
|
|
1836
1823
|
return {
|
|
1837
1824
|
x: s,
|
|
1838
1825
|
y: r,
|
|
@@ -1847,8 +1834,8 @@ class Ae {
|
|
|
1847
1834
|
buildDimensionZoomTransform(t) {
|
|
1848
1835
|
const e = ["translate(-50%, -50%)"];
|
|
1849
1836
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
1850
|
-
const i = t.x ?? 0,
|
|
1851
|
-
e.push(`translate(${i}px, ${
|
|
1837
|
+
const i = t.x ?? 0, o = t.y ?? 0;
|
|
1838
|
+
e.push(`translate(${i}px, ${o}px)`);
|
|
1852
1839
|
}
|
|
1853
1840
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), e.join(" ");
|
|
1854
1841
|
}
|
|
@@ -1856,23 +1843,23 @@ class Ae {
|
|
|
1856
1843
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1857
1844
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1858
1845
|
*/
|
|
1859
|
-
animateWithDimensions(t, e, i,
|
|
1860
|
-
const
|
|
1846
|
+
animateWithDimensions(t, e, i, o, s, r, a, h) {
|
|
1847
|
+
const c = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
|
|
1861
1848
|
return t.style.transition = "none", t.animate(
|
|
1862
1849
|
[
|
|
1863
1850
|
{
|
|
1864
|
-
transform:
|
|
1865
|
-
width: `${
|
|
1851
|
+
transform: c,
|
|
1852
|
+
width: `${o}px`,
|
|
1866
1853
|
height: `${s}px`
|
|
1867
1854
|
},
|
|
1868
1855
|
{
|
|
1869
|
-
transform:
|
|
1856
|
+
transform: u,
|
|
1870
1857
|
width: `${r}px`,
|
|
1871
1858
|
height: `${a}px`
|
|
1872
1859
|
}
|
|
1873
1860
|
],
|
|
1874
1861
|
{
|
|
1875
|
-
duration:
|
|
1862
|
+
duration: h,
|
|
1876
1863
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
1877
1864
|
fill: "forwards"
|
|
1878
1865
|
}
|
|
@@ -1882,13 +1869,13 @@ class Ae {
|
|
|
1882
1869
|
* Apply focused styling to an element
|
|
1883
1870
|
*/
|
|
1884
1871
|
applyFocusedStyling(t, e) {
|
|
1885
|
-
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"),
|
|
1872
|
+
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"), tt(t, this.focusedStyles), et(t, this.focusedClassName);
|
|
1886
1873
|
}
|
|
1887
1874
|
/**
|
|
1888
1875
|
* Remove focused styling from an element
|
|
1889
1876
|
*/
|
|
1890
1877
|
removeFocusedStyling(t, e) {
|
|
1891
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1878
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), Mt(t, this.focusedClassName), tt(t, this.defaultStyles), et(t, this.defaultClassName);
|
|
1892
1879
|
}
|
|
1893
1880
|
/**
|
|
1894
1881
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1896,49 +1883,49 @@ class Ae {
|
|
|
1896
1883
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1897
1884
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1898
1885
|
*/
|
|
1899
|
-
startFocusAnimation(t, e, i,
|
|
1900
|
-
const r = t.style.zIndex || "", a = t.offsetWidth,
|
|
1901
|
-
this.applyFocusedStyling(t,
|
|
1902
|
-
const
|
|
1886
|
+
startFocusAnimation(t, e, i, o, s) {
|
|
1887
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(a, h, e), u = this.calculateFocusTransform(e, i);
|
|
1888
|
+
this.applyFocusedStyling(t, It.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1889
|
+
const l = o ?? {
|
|
1903
1890
|
x: 0,
|
|
1904
1891
|
y: 0,
|
|
1905
1892
|
rotation: i.rotation,
|
|
1906
1893
|
scale: 1
|
|
1907
1894
|
// No scale - using dimensions
|
|
1908
|
-
},
|
|
1895
|
+
}, d = s?.width ?? a, f = s?.height ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1909
1896
|
t,
|
|
1910
|
-
d,
|
|
1911
1897
|
l,
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1898
|
+
u,
|
|
1899
|
+
d,
|
|
1900
|
+
f,
|
|
1901
|
+
c.width,
|
|
1902
|
+
c.height,
|
|
1903
|
+
b
|
|
1904
|
+
), g = {
|
|
1918
1905
|
id: `focus-${Date.now()}`,
|
|
1919
1906
|
element: t,
|
|
1920
|
-
animation:
|
|
1921
|
-
fromState:
|
|
1922
|
-
toState:
|
|
1907
|
+
animation: p,
|
|
1908
|
+
fromState: l,
|
|
1909
|
+
toState: u,
|
|
1923
1910
|
startTime: performance.now(),
|
|
1924
|
-
duration:
|
|
1911
|
+
duration: b
|
|
1925
1912
|
};
|
|
1926
1913
|
return this.focusData = {
|
|
1927
1914
|
element: t,
|
|
1928
1915
|
originalState: i,
|
|
1929
|
-
focusTransform:
|
|
1916
|
+
focusTransform: u,
|
|
1930
1917
|
originalZIndex: r,
|
|
1931
1918
|
originalWidth: a,
|
|
1932
|
-
originalHeight:
|
|
1933
|
-
focusWidth:
|
|
1934
|
-
focusHeight:
|
|
1919
|
+
originalHeight: h,
|
|
1920
|
+
focusWidth: c.width,
|
|
1921
|
+
focusHeight: c.height
|
|
1935
1922
|
}, {
|
|
1936
1923
|
element: t,
|
|
1937
1924
|
originalState: i,
|
|
1938
|
-
animationHandle:
|
|
1925
|
+
animationHandle: g,
|
|
1939
1926
|
direction: "in",
|
|
1940
1927
|
originalWidth: a,
|
|
1941
|
-
originalHeight:
|
|
1928
|
+
originalHeight: h
|
|
1942
1929
|
};
|
|
1943
1930
|
}
|
|
1944
1931
|
/**
|
|
@@ -1946,40 +1933,39 @@ class Ae {
|
|
|
1946
1933
|
* Animates back to original dimensions for consistent behavior
|
|
1947
1934
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1948
1935
|
*/
|
|
1949
|
-
startUnfocusAnimation(t, e, i,
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
const s = i ?? ((p = this.focusData) == null ? void 0 : p.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (n == null ? void 0 : n.width) ?? ((b = this.focusData) == null ? void 0 : b.focusWidth) ?? t.offsetWidth, a = (n == null ? void 0 : n.height) ?? ((f = this.focusData) == null ? void 0 : f.focusHeight) ?? t.offsetHeight, c = {
|
|
1936
|
+
startUnfocusAnimation(t, e, i, o) {
|
|
1937
|
+
t.style.zIndex = String(It.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1938
|
+
const s = i ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, a = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, h = {
|
|
1953
1939
|
x: 0,
|
|
1954
1940
|
y: 0,
|
|
1955
1941
|
rotation: e.rotation,
|
|
1956
1942
|
scale: 1
|
|
1957
1943
|
// No scale - using dimensions
|
|
1958
|
-
},
|
|
1944
|
+
}, c = this.focusData?.originalWidth ?? t.offsetWidth, u = this.focusData?.originalHeight ?? t.offsetHeight, l = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
|
|
1959
1945
|
t,
|
|
1960
1946
|
s,
|
|
1961
|
-
|
|
1947
|
+
h,
|
|
1962
1948
|
r,
|
|
1963
1949
|
a,
|
|
1950
|
+
c,
|
|
1964
1951
|
u,
|
|
1965
|
-
l
|
|
1966
|
-
|
|
1967
|
-
), g = {
|
|
1952
|
+
l
|
|
1953
|
+
), f = {
|
|
1968
1954
|
id: `unfocus-${Date.now()}`,
|
|
1969
1955
|
element: t,
|
|
1970
|
-
animation:
|
|
1956
|
+
animation: d,
|
|
1971
1957
|
fromState: s,
|
|
1972
|
-
toState:
|
|
1958
|
+
toState: h,
|
|
1973
1959
|
startTime: performance.now(),
|
|
1974
|
-
duration:
|
|
1960
|
+
duration: l
|
|
1975
1961
|
};
|
|
1976
1962
|
return {
|
|
1977
1963
|
element: t,
|
|
1978
1964
|
originalState: e,
|
|
1979
|
-
animationHandle:
|
|
1965
|
+
animationHandle: f,
|
|
1980
1966
|
direction: "out",
|
|
1981
|
-
originalWidth:
|
|
1982
|
-
originalHeight:
|
|
1967
|
+
originalWidth: c,
|
|
1968
|
+
originalHeight: u
|
|
1983
1969
|
};
|
|
1984
1970
|
}
|
|
1985
1971
|
/**
|
|
@@ -1994,42 +1980,41 @@ class Ae {
|
|
|
1994
1980
|
/**
|
|
1995
1981
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
1996
1982
|
*/
|
|
1997
|
-
resetElementInstantly(t, e, i,
|
|
1983
|
+
resetElementInstantly(t, e, i, o, s) {
|
|
1998
1984
|
this.animationEngine.cancelAllAnimations(t);
|
|
1999
1985
|
const r = ["translate(-50%, -50%)"];
|
|
2000
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
1986
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && s !== void 0 && (t.style.width = `${o}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, i);
|
|
2001
1987
|
}
|
|
2002
1988
|
/**
|
|
2003
1989
|
* Focus (zoom) an image to center of container
|
|
2004
1990
|
* Implements cross-animation when swapping focus
|
|
2005
1991
|
*/
|
|
2006
1992
|
async focusImage(t, e, i) {
|
|
2007
|
-
var s, r, a, c, u, l, d, h, g, p, b, f;
|
|
2008
1993
|
if (this.currentFocus === t && this.state === I.FOCUSED)
|
|
2009
1994
|
return this.unfocusImage();
|
|
2010
|
-
if (
|
|
2011
|
-
const
|
|
2012
|
-
x:
|
|
2013
|
-
y:
|
|
2014
|
-
rotation:
|
|
1995
|
+
if (this.incoming?.element === t && this.state === I.FOCUSING) {
|
|
1996
|
+
const s = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), r = {
|
|
1997
|
+
x: s.x,
|
|
1998
|
+
y: s.y,
|
|
1999
|
+
rotation: s.rotation,
|
|
2015
2000
|
scale: 1
|
|
2016
2001
|
// No scale transform - using dimensions
|
|
2017
|
-
},
|
|
2002
|
+
}, a = {
|
|
2018
2003
|
width: t.offsetWidth,
|
|
2019
2004
|
height: t.offsetHeight
|
|
2020
2005
|
};
|
|
2021
2006
|
this.outgoing = this.startUnfocusAnimation(
|
|
2022
2007
|
t,
|
|
2023
2008
|
this.incoming.originalState,
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element,
|
|
2009
|
+
r,
|
|
2010
|
+
a
|
|
2011
|
+
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
|
|
2027
2012
|
return;
|
|
2028
2013
|
}
|
|
2029
|
-
const
|
|
2014
|
+
const o = ++this.focusGeneration;
|
|
2030
2015
|
switch (this.state) {
|
|
2031
2016
|
case I.IDLE:
|
|
2032
|
-
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2017
|
+
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2033
2018
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2034
2019
|
break;
|
|
2035
2020
|
case I.FOCUSED:
|
|
@@ -2039,96 +2024,96 @@ class Ae {
|
|
|
2039
2024
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2040
2025
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2041
2026
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2042
|
-
]), this.focusGeneration !==
|
|
2027
|
+
]), this.focusGeneration !== o)
|
|
2043
2028
|
return;
|
|
2044
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element,
|
|
2029
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2045
2030
|
break;
|
|
2046
2031
|
case I.FOCUSING:
|
|
2047
2032
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2048
2033
|
this.incoming.element,
|
|
2049
2034
|
this.incoming.originalState,
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2035
|
+
this.focusData?.originalZIndex || "",
|
|
2036
|
+
this.focusData?.originalWidth,
|
|
2037
|
+
this.focusData?.originalHeight
|
|
2038
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2054
2039
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2055
2040
|
break;
|
|
2056
2041
|
case I.UNFOCUSING:
|
|
2057
2042
|
if (this.state = I.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2058
2043
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2059
2044
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2060
|
-
]), this.focusGeneration !==
|
|
2061
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element,
|
|
2045
|
+
]), this.focusGeneration !== o) return;
|
|
2046
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2062
2047
|
break;
|
|
2063
2048
|
case I.CROSS_ANIMATING:
|
|
2064
|
-
if (
|
|
2049
|
+
if (this.incoming?.element === t)
|
|
2065
2050
|
return;
|
|
2066
|
-
if (
|
|
2067
|
-
const
|
|
2068
|
-
x:
|
|
2069
|
-
y:
|
|
2070
|
-
rotation:
|
|
2051
|
+
if (this.outgoing?.element === t) {
|
|
2052
|
+
const s = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0), r = {
|
|
2053
|
+
x: s.x,
|
|
2054
|
+
y: s.y,
|
|
2055
|
+
rotation: s.rotation,
|
|
2071
2056
|
scale: 1
|
|
2072
2057
|
// No scale - using dimensions
|
|
2073
|
-
},
|
|
2058
|
+
}, a = {
|
|
2074
2059
|
width: t.offsetWidth,
|
|
2075
2060
|
height: t.offsetHeight
|
|
2076
2061
|
};
|
|
2077
2062
|
if (this.incoming) {
|
|
2078
|
-
const
|
|
2079
|
-
x:
|
|
2080
|
-
y:
|
|
2081
|
-
rotation:
|
|
2063
|
+
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), c = {
|
|
2064
|
+
x: h.x,
|
|
2065
|
+
y: h.y,
|
|
2066
|
+
rotation: h.rotation,
|
|
2082
2067
|
scale: 1
|
|
2083
2068
|
// No scale - using dimensions
|
|
2084
|
-
},
|
|
2069
|
+
}, u = {
|
|
2085
2070
|
width: this.incoming.element.offsetWidth,
|
|
2086
2071
|
height: this.incoming.element.offsetHeight
|
|
2087
2072
|
};
|
|
2088
2073
|
this.outgoing = this.startUnfocusAnimation(
|
|
2089
2074
|
this.incoming.element,
|
|
2090
2075
|
this.incoming.originalState,
|
|
2091
|
-
|
|
2092
|
-
|
|
2076
|
+
c,
|
|
2077
|
+
u
|
|
2093
2078
|
);
|
|
2094
2079
|
} else
|
|
2095
2080
|
this.outgoing = null;
|
|
2096
|
-
if (this.incoming = this.startFocusAnimation(t, e, i,
|
|
2081
|
+
if (this.incoming = this.startFocusAnimation(t, e, i, r, a), await Promise.all([
|
|
2097
2082
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2098
2083
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2099
|
-
]), this.focusGeneration !==
|
|
2100
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element,
|
|
2084
|
+
]), this.focusGeneration !== o) return;
|
|
2085
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2101
2086
|
return;
|
|
2102
2087
|
}
|
|
2103
2088
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
2104
2089
|
this.outgoing.element,
|
|
2105
2090
|
this.outgoing.originalState,
|
|
2106
|
-
|
|
2091
|
+
this.outgoing.originalState.zIndex?.toString() || "",
|
|
2107
2092
|
this.outgoing.originalWidth,
|
|
2108
2093
|
this.outgoing.originalHeight
|
|
2109
2094
|
), this.outgoing = null), this.incoming) {
|
|
2110
|
-
const
|
|
2111
|
-
x:
|
|
2112
|
-
y:
|
|
2113
|
-
rotation:
|
|
2095
|
+
const s = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), r = {
|
|
2096
|
+
x: s.x,
|
|
2097
|
+
y: s.y,
|
|
2098
|
+
rotation: s.rotation,
|
|
2114
2099
|
scale: 1
|
|
2115
2100
|
// No scale - using dimensions
|
|
2116
|
-
},
|
|
2101
|
+
}, a = {
|
|
2117
2102
|
width: this.incoming.element.offsetWidth,
|
|
2118
2103
|
height: this.incoming.element.offsetHeight
|
|
2119
2104
|
};
|
|
2120
2105
|
this.outgoing = this.startUnfocusAnimation(
|
|
2121
2106
|
this.incoming.element,
|
|
2122
2107
|
this.incoming.originalState,
|
|
2123
|
-
|
|
2124
|
-
|
|
2108
|
+
r,
|
|
2109
|
+
a
|
|
2125
2110
|
);
|
|
2126
2111
|
}
|
|
2127
2112
|
if (this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2128
2113
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2129
2114
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2130
|
-
]), this.focusGeneration !==
|
|
2131
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element,
|
|
2115
|
+
]), this.focusGeneration !== o) return;
|
|
2116
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2132
2117
|
break;
|
|
2133
2118
|
}
|
|
2134
2119
|
}
|
|
@@ -2136,56 +2121,55 @@ class Ae {
|
|
|
2136
2121
|
* Unfocus current image, returning it to original position
|
|
2137
2122
|
*/
|
|
2138
2123
|
async unfocusImage() {
|
|
2139
|
-
var s, r, a;
|
|
2140
2124
|
const t = ++this.focusGeneration;
|
|
2141
2125
|
if (!this.currentFocus || !this.focusData) {
|
|
2142
2126
|
if (this.incoming && this.state === I.FOCUSING) {
|
|
2143
|
-
const
|
|
2144
|
-
x:
|
|
2145
|
-
y:
|
|
2146
|
-
rotation:
|
|
2127
|
+
const s = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), r = {
|
|
2128
|
+
x: s.x,
|
|
2129
|
+
y: s.y,
|
|
2130
|
+
rotation: s.rotation,
|
|
2147
2131
|
scale: 1
|
|
2148
2132
|
// No scale - using dimensions
|
|
2149
|
-
},
|
|
2133
|
+
}, a = {
|
|
2150
2134
|
width: this.incoming.element.offsetWidth,
|
|
2151
2135
|
height: this.incoming.element.offsetHeight
|
|
2152
2136
|
};
|
|
2153
2137
|
if (this.outgoing = this.startUnfocusAnimation(
|
|
2154
2138
|
this.incoming.element,
|
|
2155
2139
|
this.incoming.originalState,
|
|
2156
|
-
|
|
2157
|
-
|
|
2140
|
+
r,
|
|
2141
|
+
a
|
|
2158
2142
|
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2159
|
-
this.removeFocusedStyling(this.outgoing.element,
|
|
2143
|
+
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = I.IDLE;
|
|
2160
2144
|
}
|
|
2161
2145
|
return;
|
|
2162
2146
|
}
|
|
2163
2147
|
if (this.state === I.CROSS_ANIMATING && this.incoming) {
|
|
2164
|
-
const
|
|
2165
|
-
x:
|
|
2166
|
-
y:
|
|
2167
|
-
rotation:
|
|
2148
|
+
const s = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), r = {
|
|
2149
|
+
x: s.x,
|
|
2150
|
+
y: s.y,
|
|
2151
|
+
rotation: s.rotation,
|
|
2168
2152
|
scale: 1
|
|
2169
2153
|
// No scale - using dimensions
|
|
2170
|
-
},
|
|
2154
|
+
}, a = {
|
|
2171
2155
|
width: this.incoming.element.offsetWidth,
|
|
2172
2156
|
height: this.incoming.element.offsetHeight
|
|
2173
|
-
},
|
|
2157
|
+
}, h = this.startUnfocusAnimation(
|
|
2174
2158
|
this.incoming.element,
|
|
2175
2159
|
this.incoming.originalState,
|
|
2176
|
-
|
|
2177
|
-
|
|
2160
|
+
r,
|
|
2161
|
+
a
|
|
2178
2162
|
);
|
|
2179
2163
|
if (await Promise.all([
|
|
2180
2164
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2181
|
-
this.waitForAnimation(
|
|
2165
|
+
this.waitForAnimation(h.animationHandle)
|
|
2182
2166
|
]), this.focusGeneration !== t) return;
|
|
2183
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element,
|
|
2167
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(h.element, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
|
|
2184
2168
|
return;
|
|
2185
2169
|
}
|
|
2186
2170
|
this.state = I.UNFOCUSING;
|
|
2187
|
-
const e = this.currentFocus, i = this.focusData.originalState,
|
|
2188
|
-
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e,
|
|
2171
|
+
const e = this.currentFocus, i = this.focusData.originalState, o = this.focusData.originalZIndex;
|
|
2172
|
+
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE);
|
|
2189
2173
|
}
|
|
2190
2174
|
/**
|
|
2191
2175
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2209,8 +2193,7 @@ class Ae {
|
|
|
2209
2193
|
* Check if an image is the target of current focus animation
|
|
2210
2194
|
*/
|
|
2211
2195
|
isTargetingFocus(t) {
|
|
2212
|
-
|
|
2213
|
-
return ((e = this.incoming) == null ? void 0 : e.element) === t;
|
|
2196
|
+
return this.incoming?.element === t;
|
|
2214
2197
|
}
|
|
2215
2198
|
/**
|
|
2216
2199
|
* Check if an image is involved in any focus/animation state
|
|
@@ -2218,8 +2201,7 @@ class Ae {
|
|
|
2218
2201
|
* Useful for hover state management - don't apply hover to animating images
|
|
2219
2202
|
*/
|
|
2220
2203
|
isInvolved(t) {
|
|
2221
|
-
|
|
2222
|
-
return this.currentFocus === t || ((e = this.incoming) == null ? void 0 : e.element) === t || ((i = this.outgoing) == null ? void 0 : i.element) === t;
|
|
2204
|
+
return this.currentFocus === t || this.incoming?.element === t || this.outgoing?.element === t;
|
|
2223
2205
|
}
|
|
2224
2206
|
/**
|
|
2225
2207
|
* Apply a temporary horizontal drag offset to the focused image
|
|
@@ -2227,8 +2209,8 @@ class Ae {
|
|
|
2227
2209
|
*/
|
|
2228
2210
|
setDragOffset(t) {
|
|
2229
2211
|
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2230
|
-
const e = this.currentFocus, i = this.focusData.focusTransform,
|
|
2231
|
-
|
|
2212
|
+
const e = this.currentFocus, i = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], s = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2213
|
+
o.push(`translate(${s}px, ${r}px)`), i.rotation !== void 0 && o.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = o.join(" ");
|
|
2232
2214
|
}
|
|
2233
2215
|
/**
|
|
2234
2216
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2237,30 +2219,29 @@ class Ae {
|
|
|
2237
2219
|
*/
|
|
2238
2220
|
clearDragOffset(t, e = 150) {
|
|
2239
2221
|
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2240
|
-
const i = this.currentFocus,
|
|
2241
|
-
s.push(`translate(${r}px, ${a}px)`),
|
|
2242
|
-
const
|
|
2243
|
-
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform =
|
|
2222
|
+
const i = this.currentFocus, o = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = o.x ?? 0, a = o.y ?? 0;
|
|
2223
|
+
s.push(`translate(${r}px, ${a}px)`), o.rotation !== void 0 && s.push(`rotate(${o.rotation}deg)`);
|
|
2224
|
+
const h = s.join(" ");
|
|
2225
|
+
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = h, setTimeout(() => {
|
|
2244
2226
|
this.currentFocus === i && (i.style.transition = "none");
|
|
2245
|
-
}, e)) : (i.style.transition = "none", i.style.transform =
|
|
2227
|
+
}, e)) : (i.style.transition = "none", i.style.transform = h);
|
|
2246
2228
|
}
|
|
2247
2229
|
/**
|
|
2248
2230
|
* Reset zoom state (cancels all animations)
|
|
2249
2231
|
*/
|
|
2250
2232
|
reset() {
|
|
2251
|
-
var t, e, i, n;
|
|
2252
2233
|
this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
2253
2234
|
this.outgoing.element,
|
|
2254
2235
|
this.outgoing.originalState,
|
|
2255
|
-
|
|
2236
|
+
this.outgoing.originalState.zIndex?.toString() || "",
|
|
2256
2237
|
this.outgoing.originalWidth,
|
|
2257
2238
|
this.outgoing.originalHeight
|
|
2258
2239
|
)), this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2259
2240
|
this.incoming.element,
|
|
2260
2241
|
this.incoming.originalState,
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2242
|
+
this.focusData?.originalZIndex || "",
|
|
2243
|
+
this.focusData?.originalWidth,
|
|
2244
|
+
this.focusData?.originalHeight
|
|
2264
2245
|
)), this.currentFocus && this.focusData && this.resetElementInstantly(
|
|
2265
2246
|
this.currentFocus,
|
|
2266
2247
|
this.focusData.originalState,
|
|
@@ -2270,7 +2251,7 @@ class Ae {
|
|
|
2270
2251
|
), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2271
2252
|
}
|
|
2272
2253
|
}
|
|
2273
|
-
const
|
|
2254
|
+
const ye = 50, ve = 0.5, we = 20, xe = 0.3, Ee = 150, Se = 30, at = class at {
|
|
2274
2255
|
constructor(t, e) {
|
|
2275
2256
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2276
2257
|
}
|
|
@@ -2284,8 +2265,7 @@ const Re = 50, Ce = 0.5, Le = 20, Me = 0.3, Fe = 150, ze = 30, mt = class mt {
|
|
|
2284
2265
|
* Stop listening for touch events
|
|
2285
2266
|
*/
|
|
2286
2267
|
disable() {
|
|
2287
|
-
|
|
2288
|
-
this.enabled && (this.enabled = !1, this.container.style.touchAction = "", this.container.removeEventListener("touchstart", this.boundTouchStart), this.container.removeEventListener("touchmove", this.boundTouchMove), this.container.removeEventListener("touchend", this.boundTouchEnd), this.container.removeEventListener("touchcancel", this.boundTouchCancel), (t = this.touchState) != null && t.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null);
|
|
2268
|
+
this.enabled && (this.enabled = !1, this.container.style.touchAction = "", this.container.removeEventListener("touchstart", this.boundTouchStart), this.container.removeEventListener("touchmove", this.boundTouchMove), this.container.removeEventListener("touchend", this.boundTouchEnd), this.container.removeEventListener("touchcancel", this.boundTouchCancel), this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null);
|
|
2289
2269
|
}
|
|
2290
2270
|
/**
|
|
2291
2271
|
* Clean up all event listeners
|
|
@@ -2298,7 +2278,7 @@ const Re = 50, Ce = 0.5, Le = 20, Me = 0.3, Fe = 150, ze = 30, mt = class mt {
|
|
|
2298
2278
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2299
2279
|
*/
|
|
2300
2280
|
hadRecentTouch() {
|
|
2301
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2281
|
+
return Date.now() - this.recentTouchTimestamp < at.TOUCH_CLICK_DELAY;
|
|
2302
2282
|
}
|
|
2303
2283
|
handleTouchStart(t) {
|
|
2304
2284
|
if (t.touches.length !== 1) return;
|
|
@@ -2315,32 +2295,31 @@ const Re = 50, Ce = 0.5, Le = 20, Me = 0.3, Fe = 150, ze = 30, mt = class mt {
|
|
|
2315
2295
|
}
|
|
2316
2296
|
handleTouchMove(t) {
|
|
2317
2297
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2318
|
-
const e = t.touches[0], i = e.clientX - this.touchState.startX,
|
|
2319
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i +
|
|
2320
|
-
const a = Math.atan2(Math.abs(
|
|
2321
|
-
this.touchState.isHorizontalSwipe = a <=
|
|
2298
|
+
const e = t.touches[0], i = e.clientX - this.touchState.startX, o = e.clientY - this.touchState.startY;
|
|
2299
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + o * o) > 10) {
|
|
2300
|
+
const a = Math.atan2(Math.abs(o), Math.abs(i)) * (180 / Math.PI);
|
|
2301
|
+
this.touchState.isHorizontalSwipe = a <= Se;
|
|
2322
2302
|
}
|
|
2323
2303
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2324
2304
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2325
|
-
const s = i *
|
|
2305
|
+
const s = i * xe;
|
|
2326
2306
|
this.callbacks.onDragOffset(s);
|
|
2327
2307
|
}
|
|
2328
2308
|
}
|
|
2329
2309
|
handleTouchEnd(t) {
|
|
2330
2310
|
if (!this.touchState) return;
|
|
2331
2311
|
this.recentTouchTimestamp = Date.now();
|
|
2332
|
-
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime,
|
|
2312
|
+
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, o = Math.abs(e) / i, s = Math.abs(e);
|
|
2333
2313
|
let r = !1;
|
|
2334
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >=
|
|
2314
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= ye || o >= ve && s >= we) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2335
2315
|
}
|
|
2336
2316
|
handleTouchCancel(t) {
|
|
2337
|
-
|
|
2338
|
-
(e = this.touchState) != null && e.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2317
|
+
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2339
2318
|
}
|
|
2340
2319
|
};
|
|
2341
|
-
|
|
2342
|
-
let
|
|
2343
|
-
class
|
|
2320
|
+
at.TOUCH_CLICK_DELAY = 300;
|
|
2321
|
+
let mt = at;
|
|
2322
|
+
class Ie {
|
|
2344
2323
|
constructor(t) {
|
|
2345
2324
|
if (this._prepared = !1, this._discoveredUrls = [], this.apiKey = t.apiKey ?? "", this.apiEndpoint = t.apiEndpoint ?? "https://www.googleapis.com/drive/v3/files", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2346
2325
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2354,7 +2333,7 @@ class Oe {
|
|
|
2354
2333
|
for (const e of this.sources)
|
|
2355
2334
|
if ("folders" in e)
|
|
2356
2335
|
for (const i of e.folders) {
|
|
2357
|
-
const
|
|
2336
|
+
const o = e.recursive !== void 0 ? e.recursive : !0, s = await this.loadFromFolder(i, t, o);
|
|
2358
2337
|
this._discoveredUrls.push(...s);
|
|
2359
2338
|
}
|
|
2360
2339
|
else if ("files" in e) {
|
|
@@ -2400,9 +2379,9 @@ class Oe {
|
|
|
2400
2379
|
// Alternative format
|
|
2401
2380
|
];
|
|
2402
2381
|
for (const i of e) {
|
|
2403
|
-
const
|
|
2404
|
-
if (
|
|
2405
|
-
return
|
|
2382
|
+
const o = t.match(i);
|
|
2383
|
+
if (o && o[1])
|
|
2384
|
+
return o[1];
|
|
2406
2385
|
}
|
|
2407
2386
|
return null;
|
|
2408
2387
|
}
|
|
@@ -2414,15 +2393,15 @@ class Oe {
|
|
|
2414
2393
|
* @returns Promise resolving to array of image URLs
|
|
2415
2394
|
*/
|
|
2416
2395
|
async loadFromFolder(t, e, i = !0) {
|
|
2417
|
-
const
|
|
2418
|
-
if (!
|
|
2396
|
+
const o = this.extractFolderId(t);
|
|
2397
|
+
if (!o)
|
|
2419
2398
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2420
2399
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2421
|
-
return this.loadImagesDirectly(
|
|
2400
|
+
return this.loadImagesDirectly(o, e);
|
|
2422
2401
|
try {
|
|
2423
|
-
return i ? await this.loadImagesRecursively(
|
|
2402
|
+
return i ? await this.loadImagesRecursively(o, e) : await this.loadImagesFromSingleFolder(o, e);
|
|
2424
2403
|
} catch (s) {
|
|
2425
|
-
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(
|
|
2404
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(o, e);
|
|
2426
2405
|
}
|
|
2427
2406
|
}
|
|
2428
2407
|
/**
|
|
@@ -2432,14 +2411,14 @@ class Oe {
|
|
|
2432
2411
|
* @returns Promise resolving to array of image URLs
|
|
2433
2412
|
*/
|
|
2434
2413
|
async loadImagesFromSingleFolder(t, e) {
|
|
2435
|
-
const i = [],
|
|
2414
|
+
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2436
2415
|
if (!a.ok)
|
|
2437
2416
|
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2438
|
-
const
|
|
2439
|
-
(
|
|
2417
|
+
const c = (await a.json()).files.filter(
|
|
2418
|
+
(u) => u.mimeType.startsWith("image/") && e.isAllowed(u.name)
|
|
2440
2419
|
);
|
|
2441
|
-
return this.log(`Found ${
|
|
2442
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2420
|
+
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2421
|
+
i.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2443
2422
|
}), i;
|
|
2444
2423
|
}
|
|
2445
2424
|
/**
|
|
@@ -2450,18 +2429,18 @@ class Oe {
|
|
|
2450
2429
|
*/
|
|
2451
2430
|
async loadFiles(t, e) {
|
|
2452
2431
|
const i = [];
|
|
2453
|
-
for (const
|
|
2454
|
-
const s = this.extractFileId(
|
|
2432
|
+
for (const o of t) {
|
|
2433
|
+
const s = this.extractFileId(o);
|
|
2455
2434
|
if (!s) {
|
|
2456
|
-
this.log(`Skipping invalid file URL: ${
|
|
2435
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2457
2436
|
continue;
|
|
2458
2437
|
}
|
|
2459
2438
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2460
2439
|
try {
|
|
2461
2440
|
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2462
2441
|
if (a.ok) {
|
|
2463
|
-
const
|
|
2464
|
-
|
|
2442
|
+
const h = await a.json();
|
|
2443
|
+
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
|
|
2465
2444
|
} else
|
|
2466
2445
|
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2467
2446
|
} catch (r) {
|
|
@@ -2489,9 +2468,9 @@ class Oe {
|
|
|
2489
2468
|
// Generic id parameter
|
|
2490
2469
|
];
|
|
2491
2470
|
for (const i of e) {
|
|
2492
|
-
const
|
|
2493
|
-
if (
|
|
2494
|
-
return
|
|
2471
|
+
const o = t.match(i);
|
|
2472
|
+
if (o && o[1])
|
|
2473
|
+
return o[1];
|
|
2495
2474
|
}
|
|
2496
2475
|
return null;
|
|
2497
2476
|
}
|
|
@@ -2502,21 +2481,21 @@ class Oe {
|
|
|
2502
2481
|
* @returns Promise resolving to array of image URLs
|
|
2503
2482
|
*/
|
|
2504
2483
|
async loadImagesRecursively(t, e) {
|
|
2505
|
-
const i = [],
|
|
2484
|
+
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2506
2485
|
if (!a.ok)
|
|
2507
2486
|
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2508
|
-
const
|
|
2509
|
-
(
|
|
2510
|
-
),
|
|
2511
|
-
(
|
|
2487
|
+
const h = await a.json(), c = h.files.filter(
|
|
2488
|
+
(l) => l.mimeType.startsWith("image/") && e.isAllowed(l.name)
|
|
2489
|
+
), u = h.files.filter(
|
|
2490
|
+
(l) => l.mimeType === "application/vnd.google-apps.folder"
|
|
2512
2491
|
);
|
|
2513
|
-
this.log(`Found ${
|
|
2514
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2492
|
+
this.log(`Found ${h.files.length} total items in folder ${t}`), h.files.forEach((l) => this.log(` - File: ${l.name} (${l.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((l) => {
|
|
2493
|
+
i.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
|
|
2515
2494
|
});
|
|
2516
|
-
for (const
|
|
2517
|
-
this.log(`Loading images from subfolder: ${
|
|
2518
|
-
const
|
|
2519
|
-
i.push(...
|
|
2495
|
+
for (const l of u) {
|
|
2496
|
+
this.log(`Loading images from subfolder: ${l.name}`);
|
|
2497
|
+
const d = await this.loadImagesRecursively(l.id, e);
|
|
2498
|
+
i.push(...d);
|
|
2520
2499
|
}
|
|
2521
2500
|
return i;
|
|
2522
2501
|
}
|
|
@@ -2529,12 +2508,12 @@ class Oe {
|
|
|
2529
2508
|
*/
|
|
2530
2509
|
async loadImagesDirectly(t, e) {
|
|
2531
2510
|
try {
|
|
2532
|
-
const i = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2533
|
-
if (!
|
|
2511
|
+
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(i, { mode: "cors" });
|
|
2512
|
+
if (!o.ok)
|
|
2534
2513
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2535
|
-
const s = await
|
|
2536
|
-
return [...new Set(a.map((
|
|
2537
|
-
(
|
|
2514
|
+
const s = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2515
|
+
return [...new Set(a.map((u) => u[1]))].map(
|
|
2516
|
+
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2538
2517
|
);
|
|
2539
2518
|
} catch (i) {
|
|
2540
2519
|
throw console.error("Direct loading failed:", i), new Error(
|
|
@@ -2561,7 +2540,7 @@ class Oe {
|
|
|
2561
2540
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2562
2541
|
}
|
|
2563
2542
|
}
|
|
2564
|
-
class
|
|
2543
|
+
class Te {
|
|
2565
2544
|
constructor(t) {
|
|
2566
2545
|
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2567
2546
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -2625,13 +2604,13 @@ class $e {
|
|
|
2625
2604
|
if (!Array.isArray(t))
|
|
2626
2605
|
return console.warn("URLs must be an array:", t), [];
|
|
2627
2606
|
const i = [];
|
|
2628
|
-
for (const
|
|
2629
|
-
const s =
|
|
2607
|
+
for (const o of t) {
|
|
2608
|
+
const s = o.split("/").pop() || o;
|
|
2630
2609
|
if (!e.isAllowed(s)) {
|
|
2631
|
-
this.log(`Skipping filtered URL: ${
|
|
2610
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2632
2611
|
continue;
|
|
2633
2612
|
}
|
|
2634
|
-
this.validateUrls ? await this.validateUrl(
|
|
2613
|
+
this.validateUrls ? await this.validateUrl(o) ? i.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : i.push(o);
|
|
2635
2614
|
}
|
|
2636
2615
|
return i;
|
|
2637
2616
|
}
|
|
@@ -2645,16 +2624,16 @@ class $e {
|
|
|
2645
2624
|
async processPath(t, e, i) {
|
|
2646
2625
|
if (!Array.isArray(e))
|
|
2647
2626
|
return console.warn("files must be an array:", e), [];
|
|
2648
|
-
const
|
|
2627
|
+
const o = [];
|
|
2649
2628
|
for (const s of e) {
|
|
2650
2629
|
if (!i.isAllowed(s)) {
|
|
2651
2630
|
this.log(`Skipping filtered file: ${s}`);
|
|
2652
2631
|
continue;
|
|
2653
2632
|
}
|
|
2654
2633
|
const r = this.constructUrl(t, s);
|
|
2655
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2634
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
2656
2635
|
}
|
|
2657
|
-
return
|
|
2636
|
+
return o;
|
|
2658
2637
|
}
|
|
2659
2638
|
/**
|
|
2660
2639
|
* Process a JSON endpoint source
|
|
@@ -2665,17 +2644,17 @@ class $e {
|
|
|
2665
2644
|
*/
|
|
2666
2645
|
async processJson(t, e) {
|
|
2667
2646
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2668
|
-
const i = new AbortController(),
|
|
2647
|
+
const i = new AbortController(), o = setTimeout(() => i.abort(), 1e4);
|
|
2669
2648
|
try {
|
|
2670
2649
|
const s = await fetch(t, { signal: i.signal });
|
|
2671
|
-
if (clearTimeout(
|
|
2650
|
+
if (clearTimeout(o), !s.ok)
|
|
2672
2651
|
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2673
2652
|
const r = await s.json();
|
|
2674
2653
|
if (!r || !Array.isArray(r.images))
|
|
2675
2654
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2676
2655
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2677
2656
|
} catch (s) {
|
|
2678
|
-
throw clearTimeout(
|
|
2657
|
+
throw clearTimeout(o), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
2679
2658
|
}
|
|
2680
2659
|
}
|
|
2681
2660
|
/**
|
|
@@ -2697,11 +2676,11 @@ class $e {
|
|
|
2697
2676
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2698
2677
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2699
2678
|
try {
|
|
2700
|
-
const i = new AbortController(),
|
|
2679
|
+
const i = new AbortController(), o = setTimeout(() => i.abort(), this.validationTimeout), s = await fetch(t, {
|
|
2701
2680
|
method: "HEAD",
|
|
2702
2681
|
signal: i.signal
|
|
2703
2682
|
});
|
|
2704
|
-
return clearTimeout(
|
|
2683
|
+
return clearTimeout(o), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
2705
2684
|
} catch (i) {
|
|
2706
2685
|
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2707
2686
|
}
|
|
@@ -2718,8 +2697,8 @@ class $e {
|
|
|
2718
2697
|
return `${i}/${e}`;
|
|
2719
2698
|
if (typeof window > "u")
|
|
2720
2699
|
return `${i}/${e}`;
|
|
2721
|
-
const
|
|
2722
|
-
return `${
|
|
2700
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2701
|
+
return `${o}${r}/${e}`;
|
|
2723
2702
|
}
|
|
2724
2703
|
/**
|
|
2725
2704
|
* Check if URL is absolute (contains protocol)
|
|
@@ -2741,7 +2720,7 @@ class $e {
|
|
|
2741
2720
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2742
2721
|
}
|
|
2743
2722
|
}
|
|
2744
|
-
class
|
|
2723
|
+
class Re {
|
|
2745
2724
|
constructor(t) {
|
|
2746
2725
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2747
2726
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -2753,16 +2732,16 @@ class De {
|
|
|
2753
2732
|
*/
|
|
2754
2733
|
async prepare(t) {
|
|
2755
2734
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2756
|
-
const e = this.loaders.map((i,
|
|
2757
|
-
this.log(`Loader ${
|
|
2735
|
+
const e = this.loaders.map((i, o) => i.prepare(t).then(() => {
|
|
2736
|
+
this.log(`Loader ${o} prepared with ${i.imagesLength()} images`);
|
|
2758
2737
|
}).catch((s) => {
|
|
2759
|
-
console.warn(`Loader ${
|
|
2738
|
+
console.warn(`Loader ${o} failed to prepare:`, s);
|
|
2760
2739
|
}));
|
|
2761
2740
|
await Promise.all(e);
|
|
2762
2741
|
for (const i of this.loaders)
|
|
2763
2742
|
if (i.isPrepared()) {
|
|
2764
|
-
const
|
|
2765
|
-
this._discoveredUrls.push(...
|
|
2743
|
+
const o = i.imageURLs();
|
|
2744
|
+
this._discoveredUrls.push(...o);
|
|
2766
2745
|
}
|
|
2767
2746
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2768
2747
|
}
|
|
@@ -2798,7 +2777,7 @@ class De {
|
|
|
2798
2777
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2799
2778
|
}
|
|
2800
2779
|
}
|
|
2801
|
-
class
|
|
2780
|
+
class Ce {
|
|
2802
2781
|
/**
|
|
2803
2782
|
* Create a new ImageFilter
|
|
2804
2783
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2820,8 +2799,7 @@ class Ue {
|
|
|
2820
2799
|
* @returns True if the file extension is allowed
|
|
2821
2800
|
*/
|
|
2822
2801
|
isAllowed(t) {
|
|
2823
|
-
|
|
2824
|
-
const i = (n = t.split("?")[0].split(".").pop()) == null ? void 0 : n.toLowerCase();
|
|
2802
|
+
const i = t.split("?")[0].split(".").pop()?.toLowerCase();
|
|
2825
2803
|
return i ? this.allowedExtensions.includes(i) : !1;
|
|
2826
2804
|
}
|
|
2827
2805
|
/**
|
|
@@ -2836,7 +2814,7 @@ class Ue {
|
|
|
2836
2814
|
// isAllowedDate(date: Date): boolean
|
|
2837
2815
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2838
2816
|
}
|
|
2839
|
-
const
|
|
2817
|
+
const Ae = `
|
|
2840
2818
|
.fbn-ic-gallery {
|
|
2841
2819
|
position: relative;
|
|
2842
2820
|
width: 100%;
|
|
@@ -2886,22 +2864,21 @@ const Pe = `
|
|
|
2886
2864
|
display: none !important;
|
|
2887
2865
|
}
|
|
2888
2866
|
`;
|
|
2889
|
-
function
|
|
2867
|
+
function Le() {
|
|
2890
2868
|
if (typeof document > "u") return;
|
|
2891
|
-
const
|
|
2892
|
-
if (document.getElementById(
|
|
2869
|
+
const n = "fbn-ic-functional-styles";
|
|
2870
|
+
if (document.getElementById(n)) return;
|
|
2893
2871
|
const t = document.createElement("style");
|
|
2894
|
-
t.id =
|
|
2872
|
+
t.id = n, t.textContent = Ae, document.head.appendChild(t);
|
|
2895
2873
|
}
|
|
2896
|
-
class
|
|
2874
|
+
class Me {
|
|
2897
2875
|
constructor(t = {}) {
|
|
2898
|
-
|
|
2899
|
-
this.fullConfig = Vt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.animationEngine = new te(this.fullConfig.animation), this.layoutEngine = new Ee({
|
|
2876
|
+
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.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.animationEngine = new qt(this.fullConfig.animation), this.layoutEngine = new ge({
|
|
2900
2877
|
layout: this.fullConfig.layout,
|
|
2901
2878
|
image: this.fullConfig.image
|
|
2902
|
-
}), this.zoomEngine = new
|
|
2903
|
-
const e = this.fullConfig.animation.entry ||
|
|
2904
|
-
this.entryAnimationEngine = new
|
|
2879
|
+
}), this.zoomEngine = new be(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = st(this.fullConfig.styling?.default), this.hoverStyles = st(this.fullConfig.styling?.hover), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
2880
|
+
const e = this.fullConfig.animation.entry || y.animation.entry;
|
|
2881
|
+
this.entryAnimationEngine = new ie(
|
|
2905
2882
|
e,
|
|
2906
2883
|
this.fullConfig.layout.algorithm
|
|
2907
2884
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
@@ -2910,48 +2887,44 @@ class He {
|
|
|
2910
2887
|
* Create image filter based on shared loader config
|
|
2911
2888
|
*/
|
|
2912
2889
|
createImageFilter() {
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
return new Ue(t);
|
|
2890
|
+
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
2891
|
+
return new Ce(t);
|
|
2916
2892
|
}
|
|
2917
2893
|
/**
|
|
2918
2894
|
* Create appropriate image loader based on config
|
|
2919
2895
|
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2920
2896
|
*/
|
|
2921
2897
|
createLoader() {
|
|
2922
|
-
var n;
|
|
2923
2898
|
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2924
2899
|
if (!t || t.length === 0)
|
|
2925
2900
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2926
|
-
const i = t.map((
|
|
2927
|
-
return i.length === 1 ? i[0] : new
|
|
2901
|
+
const i = t.map((o) => this.createLoaderFromEntry(o, e));
|
|
2902
|
+
return i.length === 1 ? i[0] : new Re({
|
|
2928
2903
|
loaders: i,
|
|
2929
|
-
debugLogging:
|
|
2904
|
+
debugLogging: this.fullConfig.config.debug?.loaders
|
|
2930
2905
|
});
|
|
2931
2906
|
}
|
|
2932
2907
|
/**
|
|
2933
2908
|
* Create a single loader from a LoaderEntry, merging shared config
|
|
2934
2909
|
*/
|
|
2935
2910
|
createLoaderFromEntry(t, e) {
|
|
2936
|
-
var i, n;
|
|
2937
2911
|
if ("static" in t) {
|
|
2938
|
-
const
|
|
2939
|
-
...
|
|
2940
|
-
validateUrls:
|
|
2941
|
-
validationTimeout:
|
|
2942
|
-
validationMethod:
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
debugLogging: s.debugLogging ?? ((i = this.fullConfig.config.debug) == null ? void 0 : i.loaders)
|
|
2912
|
+
const i = t.static, o = {
|
|
2913
|
+
...i,
|
|
2914
|
+
validateUrls: i.validateUrls ?? e.validateUrls,
|
|
2915
|
+
validationTimeout: i.validationTimeout ?? e.validationTimeout,
|
|
2916
|
+
validationMethod: i.validationMethod ?? e.validationMethod,
|
|
2917
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2918
|
+
debugLogging: i.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2946
2919
|
};
|
|
2947
|
-
return new
|
|
2920
|
+
return new Te(o);
|
|
2948
2921
|
} else if ("googleDrive" in t) {
|
|
2949
|
-
const
|
|
2950
|
-
...
|
|
2951
|
-
allowedExtensions:
|
|
2952
|
-
debugLogging:
|
|
2922
|
+
const i = t.googleDrive, o = {
|
|
2923
|
+
...i,
|
|
2924
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2925
|
+
debugLogging: i.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2953
2926
|
};
|
|
2954
|
-
return new
|
|
2927
|
+
return new Ie(o);
|
|
2955
2928
|
} else
|
|
2956
2929
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2957
2930
|
}
|
|
@@ -2960,16 +2933,16 @@ class He {
|
|
|
2960
2933
|
*/
|
|
2961
2934
|
async init() {
|
|
2962
2935
|
try {
|
|
2963
|
-
if (
|
|
2936
|
+
if (Le(), this.containerRef)
|
|
2964
2937
|
this.containerEl = this.containerRef;
|
|
2965
2938
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2966
2939
|
throw new Error(`Container #${this.containerId} not found`);
|
|
2967
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
2940
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new mt(this.containerEl, {
|
|
2968
2941
|
onNext: () => this.navigateToNextImage(),
|
|
2969
2942
|
onPrev: () => this.navigateToPreviousImage(),
|
|
2970
2943
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
2971
2944
|
onDragEnd: (t) => {
|
|
2972
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
2945
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ee);
|
|
2973
2946
|
}
|
|
2974
2947
|
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2975
2948
|
} catch (t) {
|
|
@@ -3001,11 +2974,9 @@ class He {
|
|
|
3001
2974
|
}
|
|
3002
2975
|
setupEventListeners() {
|
|
3003
2976
|
document.addEventListener("keydown", (t) => {
|
|
3004
|
-
|
|
3005
|
-
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (e = this.swipeEngine) == null || e.disable(), this.hideCounter()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
2977
|
+
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
3006
2978
|
}), document.addEventListener("click", (t) => {
|
|
3007
|
-
|
|
3008
|
-
(e = this.swipeEngine) != null && e.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (i = this.swipeEngine) == null || i.disable(), this.hideCounter());
|
|
2979
|
+
this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter());
|
|
3009
2980
|
}), window.addEventListener("resize", () => this.handleResize());
|
|
3010
2981
|
}
|
|
3011
2982
|
/**
|
|
@@ -3014,7 +2985,7 @@ class He {
|
|
|
3014
2985
|
navigateToNextImage() {
|
|
3015
2986
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3016
2987
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, e = this.imageElements.find(
|
|
3017
|
-
(
|
|
2988
|
+
(o) => o.dataset.imageId === String(t)
|
|
3018
2989
|
);
|
|
3019
2990
|
if (!e) return;
|
|
3020
2991
|
const i = this.imageLayouts[t];
|
|
@@ -3026,7 +2997,7 @@ class He {
|
|
|
3026
2997
|
navigateToPreviousImage() {
|
|
3027
2998
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3028
2999
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, e = this.imageElements.find(
|
|
3029
|
-
(
|
|
3000
|
+
(o) => o.dataset.imageId === String(t)
|
|
3030
3001
|
);
|
|
3031
3002
|
if (!e) return;
|
|
3032
3003
|
const i = this.imageLayouts[t];
|
|
@@ -3042,8 +3013,8 @@ class He {
|
|
|
3042
3013
|
}, 500));
|
|
3043
3014
|
}
|
|
3044
3015
|
getImageHeight() {
|
|
3045
|
-
const t = window.innerWidth, e = this.fullConfig.layout.responsive,
|
|
3046
|
-
return e ? t <= e.mobile.maxWidth ? Math.min(100,
|
|
3016
|
+
const t = window.innerWidth, e = this.fullConfig.layout.responsive, o = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3017
|
+
return e ? t <= e.mobile.maxWidth ? Math.min(100, o) : t <= e.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
|
|
3047
3018
|
}
|
|
3048
3019
|
/**
|
|
3049
3020
|
* Get container bounds for layout calculations
|
|
@@ -3066,12 +3037,12 @@ class He {
|
|
|
3066
3037
|
this.showError("No images found."), this.showLoading(!1);
|
|
3067
3038
|
return;
|
|
3068
3039
|
}
|
|
3069
|
-
const i = this.getContainerBounds(),
|
|
3070
|
-
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${
|
|
3040
|
+
const i = this.getContainerBounds(), o = this.getImageHeight(), s = window.innerWidth;
|
|
3041
|
+
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3071
3042
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3072
3043
|
i,
|
|
3073
3044
|
t,
|
|
3074
|
-
|
|
3045
|
+
o,
|
|
3075
3046
|
s
|
|
3076
3047
|
);
|
|
3077
3048
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3083,157 +3054,152 @@ class He {
|
|
|
3083
3054
|
* Helper for debug logging
|
|
3084
3055
|
*/
|
|
3085
3056
|
logDebug(...t) {
|
|
3086
|
-
|
|
3087
|
-
(e = this.fullConfig.config.debug) != null && e.enabled && typeof console < "u" && console.log(...t);
|
|
3057
|
+
this.fullConfig.config.debug?.enabled && typeof console < "u" && console.log(...t);
|
|
3088
3058
|
}
|
|
3089
3059
|
async createImageCloud(t, e) {
|
|
3090
|
-
var u;
|
|
3091
3060
|
if (!this.containerEl) return;
|
|
3092
3061
|
const i = this.getContainerBounds();
|
|
3093
3062
|
this.currentImageHeight = e;
|
|
3094
|
-
const
|
|
3063
|
+
const o = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
3095
3064
|
this.imageLayouts = s, this.displayQueue = [];
|
|
3096
3065
|
let r = 0;
|
|
3097
|
-
const a = (
|
|
3098
|
-
this.containerEl && (this.containerEl.appendChild(
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
endPosition: b,
|
|
3066
|
+
const a = (c) => {
|
|
3067
|
+
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
3068
|
+
if (c.offsetWidth, c.style.opacity = this.defaultStyles.opacity ?? "1", c.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || c.dataset.startRotation !== c.dataset.rotation || c.dataset.startScale !== c.dataset.scale)) {
|
|
3069
|
+
const d = {
|
|
3070
|
+
x: parseFloat(c.dataset.startX),
|
|
3071
|
+
y: parseFloat(c.dataset.startY)
|
|
3072
|
+
}, f = {
|
|
3073
|
+
x: parseFloat(c.dataset.endX),
|
|
3074
|
+
y: parseFloat(c.dataset.endY)
|
|
3075
|
+
}, b = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), E = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, w = this.entryAnimationEngine.getTiming();
|
|
3076
|
+
Qt({
|
|
3077
|
+
element: c,
|
|
3078
|
+
startPosition: d,
|
|
3079
|
+
endPosition: f,
|
|
3112
3080
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3113
|
-
duration:
|
|
3114
|
-
imageWidth:
|
|
3115
|
-
imageHeight:
|
|
3116
|
-
rotation:
|
|
3117
|
-
scale:
|
|
3081
|
+
duration: w.duration,
|
|
3082
|
+
imageWidth: b,
|
|
3083
|
+
imageHeight: p,
|
|
3084
|
+
rotation: g,
|
|
3085
|
+
scale: m,
|
|
3118
3086
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3119
3087
|
startRotation: E,
|
|
3120
3088
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3121
|
-
startScale:
|
|
3089
|
+
startScale: v
|
|
3122
3090
|
});
|
|
3123
3091
|
} else {
|
|
3124
|
-
const
|
|
3125
|
-
|
|
3092
|
+
const d = c.dataset.finalTransform || "";
|
|
3093
|
+
c.style.transform = d;
|
|
3126
3094
|
}
|
|
3127
|
-
const
|
|
3128
|
-
if (
|
|
3129
|
-
const
|
|
3130
|
-
console.log(`Image ${
|
|
3131
|
-
left:
|
|
3132
|
-
top:
|
|
3133
|
-
width:
|
|
3134
|
-
height:
|
|
3135
|
-
computedWidth:
|
|
3136
|
-
computedHeight:
|
|
3137
|
-
transform:
|
|
3095
|
+
const l = parseInt(c.dataset.imageId || "0");
|
|
3096
|
+
if (this.fullConfig.config.debug?.enabled && l < 3) {
|
|
3097
|
+
const d = c.dataset.finalTransform || "";
|
|
3098
|
+
console.log(`Image ${l} final state:`, {
|
|
3099
|
+
left: c.style.left,
|
|
3100
|
+
top: c.style.top,
|
|
3101
|
+
width: c.style.width,
|
|
3102
|
+
height: c.style.height,
|
|
3103
|
+
computedWidth: c.offsetWidth,
|
|
3104
|
+
computedHeight: c.offsetHeight,
|
|
3105
|
+
transform: d,
|
|
3138
3106
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3139
3107
|
});
|
|
3140
3108
|
}
|
|
3141
3109
|
}), r++);
|
|
3142
|
-
},
|
|
3110
|
+
}, h = () => {
|
|
3143
3111
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3144
3112
|
for (; this.displayQueue.length > 0; ) {
|
|
3145
|
-
const
|
|
3146
|
-
|
|
3113
|
+
const c = this.displayQueue.shift();
|
|
3114
|
+
c && a(c);
|
|
3147
3115
|
}
|
|
3148
3116
|
return;
|
|
3149
3117
|
}
|
|
3150
3118
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3151
|
-
if (
|
|
3119
|
+
if (o !== this.loadGeneration) {
|
|
3152
3120
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3153
3121
|
return;
|
|
3154
3122
|
}
|
|
3155
3123
|
if (this.displayQueue.length > 0) {
|
|
3156
|
-
const
|
|
3157
|
-
|
|
3124
|
+
const c = this.displayQueue.shift();
|
|
3125
|
+
c && a(c);
|
|
3158
3126
|
}
|
|
3159
3127
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3160
3128
|
}, this.fullConfig.animation.queue.interval);
|
|
3161
3129
|
};
|
|
3162
3130
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3163
|
-
const
|
|
3164
|
-
|
|
3165
|
-
|
|
3131
|
+
const c = new IntersectionObserver((u) => {
|
|
3132
|
+
u.forEach((l) => {
|
|
3133
|
+
l.isIntersecting && (h(), c.disconnect());
|
|
3166
3134
|
});
|
|
3167
3135
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3168
|
-
|
|
3136
|
+
c.observe(this.containerEl);
|
|
3169
3137
|
} else
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
const
|
|
3173
|
-
|
|
3174
|
-
const
|
|
3175
|
-
|
|
3176
|
-
})), t.forEach((
|
|
3177
|
-
const
|
|
3178
|
-
|
|
3179
|
-
const
|
|
3180
|
-
|
|
3181
|
-
this.hoveredImage = { element:
|
|
3182
|
-
}),
|
|
3183
|
-
this.hoveredImage = null, this.zoomEngine.isInvolved(
|
|
3184
|
-
}),
|
|
3185
|
-
|
|
3186
|
-
}),
|
|
3187
|
-
|
|
3188
|
-
if (n !== this.loadGeneration)
|
|
3138
|
+
h();
|
|
3139
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c, u) => {
|
|
3140
|
+
const l = document.createElement("div");
|
|
3141
|
+
l.className = "fbn-ic-debug-center", l.style.position = "absolute", l.style.width = "12px", l.style.height = "12px", l.style.borderRadius = "50%", l.style.backgroundColor = "red", l.style.border = "2px solid yellow", l.style.zIndex = "9999", l.style.pointerEvents = "none";
|
|
3142
|
+
const d = c.x, f = c.y;
|
|
3143
|
+
l.style.left = `${d - 6}px`, l.style.top = `${f - 6}px`, l.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(l);
|
|
3144
|
+
})), t.forEach((c, u) => {
|
|
3145
|
+
const l = document.createElement("img");
|
|
3146
|
+
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(u);
|
|
3147
|
+
const d = s[u];
|
|
3148
|
+
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${e}px`, l.style.left = `${d.x}px`, l.style.top = `${d.y}px`, d.zIndex && (l.style.zIndex = String(d.zIndex)), tt(l, this.defaultStyles), et(l, this.defaultClassName), l.addEventListener("mouseenter", () => {
|
|
3149
|
+
this.hoveredImage = { element: l, layout: d }, this.zoomEngine.isInvolved(l) || (tt(l, this.hoverStyles), et(l, this.hoverClassName));
|
|
3150
|
+
}), l.addEventListener("mouseleave", () => {
|
|
3151
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (tt(l, this.defaultStyles), Mt(l, this.hoverClassName), et(l, this.defaultClassName));
|
|
3152
|
+
}), l.addEventListener("click", (f) => {
|
|
3153
|
+
f.stopPropagation(), this.handleImageClick(l, d);
|
|
3154
|
+
}), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
|
|
3155
|
+
if (o !== this.loadGeneration)
|
|
3189
3156
|
return;
|
|
3190
|
-
const
|
|
3191
|
-
|
|
3192
|
-
const
|
|
3193
|
-
|
|
3194
|
-
|
|
3157
|
+
const f = l.naturalWidth / l.naturalHeight, b = e * f;
|
|
3158
|
+
l.style.width = `${b}px`;
|
|
3159
|
+
const p = { x: d.x, y: d.y }, g = { width: b, height: e }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3160
|
+
p,
|
|
3161
|
+
g,
|
|
3195
3162
|
i,
|
|
3196
|
-
|
|
3163
|
+
u,
|
|
3197
3164
|
t.length
|
|
3198
|
-
),
|
|
3199
|
-
|
|
3200
|
-
|
|
3165
|
+
), E = this.entryAnimationEngine.calculateStartRotation(d.rotation), v = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3166
|
+
d.rotation,
|
|
3167
|
+
d.scale,
|
|
3201
3168
|
b,
|
|
3202
3169
|
e
|
|
3203
3170
|
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3171
|
+
m,
|
|
3172
|
+
p,
|
|
3173
|
+
d.rotation,
|
|
3174
|
+
d.scale,
|
|
3208
3175
|
b,
|
|
3209
3176
|
e,
|
|
3210
|
-
|
|
3211
|
-
|
|
3177
|
+
E,
|
|
3178
|
+
v
|
|
3212
3179
|
);
|
|
3213
|
-
|
|
3214
|
-
finalPosition:
|
|
3215
|
-
imageSize:
|
|
3216
|
-
left:
|
|
3217
|
-
top:
|
|
3218
|
-
finalTransform:
|
|
3180
|
+
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
3181
|
+
finalPosition: p,
|
|
3182
|
+
imageSize: g,
|
|
3183
|
+
left: d.x,
|
|
3184
|
+
top: d.y,
|
|
3185
|
+
finalTransform: w,
|
|
3219
3186
|
renderedWidth: b,
|
|
3220
3187
|
renderedHeight: e
|
|
3221
|
-
}),
|
|
3222
|
-
},
|
|
3188
|
+
}), l.style.transform = S, l.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || E !== d.rotation || v !== d.scale) && (l.dataset.startX = String(m.x), l.dataset.startY = String(m.y), l.dataset.endX = String(p.x), l.dataset.endY = String(p.y), l.dataset.imageWidth = String(b), l.dataset.imageHeight = String(e), l.dataset.rotation = String(d.rotation), l.dataset.scale = String(d.scale), l.dataset.startRotation = String(E), l.dataset.startScale = String(v)), this.displayQueue.push(l);
|
|
3189
|
+
}, l.onerror = () => r++, l.src = c;
|
|
3223
3190
|
});
|
|
3224
3191
|
}
|
|
3225
3192
|
async handleImageClick(t, e) {
|
|
3226
|
-
var s, r;
|
|
3227
3193
|
if (!this.containerEl) return;
|
|
3228
|
-
const i = this.zoomEngine.isFocused(t),
|
|
3194
|
+
const i = this.zoomEngine.isFocused(t), o = {
|
|
3229
3195
|
width: this.containerEl.offsetWidth,
|
|
3230
3196
|
height: this.containerEl.offsetHeight
|
|
3231
3197
|
};
|
|
3232
3198
|
if (i)
|
|
3233
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null,
|
|
3199
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
|
|
3234
3200
|
else {
|
|
3235
|
-
const
|
|
3236
|
-
this.currentFocusIndex =
|
|
3201
|
+
const s = t.dataset.imageId;
|
|
3202
|
+
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, e), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3237
3203
|
}
|
|
3238
3204
|
}
|
|
3239
3205
|
/**
|
|
@@ -3261,35 +3227,34 @@ class He {
|
|
|
3261
3227
|
* Destroy the gallery and clean up resources
|
|
3262
3228
|
*/
|
|
3263
3229
|
destroy() {
|
|
3264
|
-
|
|
3265
|
-
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), (t = this.swipeEngine) == null || t.destroy();
|
|
3230
|
+
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy();
|
|
3266
3231
|
}
|
|
3267
3232
|
}
|
|
3268
3233
|
export {
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3234
|
+
qt as AnimationEngine,
|
|
3235
|
+
wt as BOUNCE_PRESETS,
|
|
3236
|
+
de as ClusterPlacementLayout,
|
|
3237
|
+
Re as CompositeLoader,
|
|
3238
|
+
y as DEFAULT_CONFIG,
|
|
3239
|
+
Ct as DEFAULT_SHARED_LOADER_CONFIG,
|
|
3240
|
+
xt as ELASTIC_PRESETS,
|
|
3241
|
+
ie as EntryAnimationEngine,
|
|
3242
|
+
Ae as FUNCTIONAL_CSS,
|
|
3243
|
+
Ie as GoogleDriveLoader,
|
|
3244
|
+
ae as GridPlacementLayout,
|
|
3245
|
+
Me as ImageCloud,
|
|
3246
|
+
Ce as ImageFilter,
|
|
3247
|
+
Me as ImageGallery,
|
|
3248
|
+
ge as LayoutEngine,
|
|
3249
|
+
oe as RadialPlacementLayout,
|
|
3250
|
+
ne as RandomPlacementLayout,
|
|
3251
|
+
le as SpiralPlacementLayout,
|
|
3252
|
+
Te as StaticImageLoader,
|
|
3253
|
+
Et as WAVE_PATH_PRESETS,
|
|
3254
|
+
ue as WavePlacementLayout,
|
|
3255
|
+
be as ZoomEngine,
|
|
3256
|
+
Qt as animatePath,
|
|
3257
|
+
Le as injectFunctionalStyles,
|
|
3258
|
+
te as requiresJSAnimation
|
|
3294
3259
|
};
|
|
3295
3260
|
//# sourceMappingURL=image-cloud.js.map
|