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