@frybynite/image-cloud 0.7.5 → 0.7.6
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 +566 -560
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +943 -937
- 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 +2 -2
- package/dist/react.d.ts +2 -2
- package/dist/react.js +928 -922
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +2 -2
- package/dist/vue.js +942 -936
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +2 -2
- package/dist/web-component.js +657 -651
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as Dt } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as Pt, useRef as xt, useImperativeHandle as Ut, useEffect as _t } from "react";
|
|
3
|
-
const
|
|
3
|
+
const ft = Object.freeze({
|
|
4
4
|
none: "none",
|
|
5
5
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
6
6
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
7
7
|
lg: "0 8px 32px rgba(0,0,0,0.5)",
|
|
8
8
|
glow: "0 0 30px rgba(255,255,255,0.6)"
|
|
9
|
-
}),
|
|
9
|
+
}), St = Object.freeze({
|
|
10
10
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
11
11
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
12
12
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
13
|
-
}),
|
|
13
|
+
}), Et = Object.freeze({
|
|
14
14
|
gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
|
|
15
15
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
16
16
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
17
17
|
snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
|
|
18
|
-
}),
|
|
18
|
+
}), Rt = Object.freeze({
|
|
19
19
|
gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
|
|
20
20
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
21
21
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
22
22
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
23
|
-
}),
|
|
23
|
+
}), bt = Object.freeze({
|
|
24
24
|
type: "linear"
|
|
25
25
|
}), yt = Object.freeze({
|
|
26
26
|
mode: "none"
|
|
27
|
-
}),
|
|
27
|
+
}), vt = Object.freeze({
|
|
28
28
|
mode: "none"
|
|
29
|
-
}),
|
|
29
|
+
}), At = Object.freeze({
|
|
30
30
|
default: Object.freeze({
|
|
31
31
|
border: Object.freeze({
|
|
32
32
|
width: 0,
|
|
@@ -59,10 +59,10 @@ const gt = Object.freeze({
|
|
|
59
59
|
phaseShift: 0,
|
|
60
60
|
synchronization: "offset"
|
|
61
61
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
62
|
-
}),
|
|
62
|
+
}), jt = Object.freeze({
|
|
63
63
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
64
64
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
65
|
-
}),
|
|
65
|
+
}), Nt = Object.freeze({
|
|
66
66
|
mode: "adaptive",
|
|
67
67
|
// Default to adaptive sizing
|
|
68
68
|
minSize: 50,
|
|
@@ -74,40 +74,40 @@ const gt = Object.freeze({
|
|
|
74
74
|
// No variance by default
|
|
75
75
|
max: 1
|
|
76
76
|
})
|
|
77
|
-
}),
|
|
77
|
+
}), Wt = Object.freeze({
|
|
78
78
|
mode: "none",
|
|
79
79
|
range: Object.freeze({
|
|
80
80
|
min: -15,
|
|
81
81
|
max: 15
|
|
82
82
|
})
|
|
83
|
-
}), Mt = Object.freeze({
|
|
84
|
-
sizing: jt,
|
|
85
|
-
rotation: kt
|
|
86
83
|
}), Lt = Object.freeze({
|
|
84
|
+
sizing: Nt,
|
|
85
|
+
rotation: Wt
|
|
86
|
+
}), Mt = Object.freeze({
|
|
87
87
|
validateUrls: !0,
|
|
88
88
|
validationTimeout: 5e3,
|
|
89
89
|
validationMethod: "head",
|
|
90
90
|
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
|
|
91
|
-
}),
|
|
91
|
+
}), Ft = Object.freeze({
|
|
92
92
|
enabled: !1,
|
|
93
93
|
centers: !1,
|
|
94
94
|
loaders: !1
|
|
95
|
-
}),
|
|
95
|
+
}), y = Object.freeze({
|
|
96
96
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
97
97
|
loaders: [],
|
|
98
98
|
// Shared loader settings and debug config
|
|
99
99
|
config: Object.freeze({
|
|
100
|
-
loaders:
|
|
101
|
-
debug:
|
|
100
|
+
loaders: Mt,
|
|
101
|
+
debug: Ft
|
|
102
102
|
}),
|
|
103
103
|
// Image sizing and rotation configuration
|
|
104
|
-
image:
|
|
104
|
+
image: Lt,
|
|
105
105
|
// Pattern-based layout configuration
|
|
106
106
|
layout: Object.freeze({
|
|
107
107
|
algorithm: "radial",
|
|
108
108
|
scaleDecay: 0,
|
|
109
109
|
// No decay by default (0-1 for radial/spiral)
|
|
110
|
-
responsive:
|
|
110
|
+
responsive: jt,
|
|
111
111
|
targetCoverage: 0.6,
|
|
112
112
|
// Target 60% of container area
|
|
113
113
|
densityFactor: 1,
|
|
@@ -163,9 +163,9 @@ const gt = Object.freeze({
|
|
|
163
163
|
}),
|
|
164
164
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
165
165
|
// smooth deceleration
|
|
166
|
-
path:
|
|
166
|
+
path: bt,
|
|
167
167
|
rotation: yt,
|
|
168
|
-
scale:
|
|
168
|
+
scale: vt
|
|
169
169
|
})
|
|
170
170
|
}),
|
|
171
171
|
// Pattern-based interaction configuration
|
|
@@ -218,50 +218,50 @@ const gt = Object.freeze({
|
|
|
218
218
|
})
|
|
219
219
|
}),
|
|
220
220
|
// Image styling
|
|
221
|
-
styling:
|
|
221
|
+
styling: At
|
|
222
222
|
});
|
|
223
|
-
function Z(
|
|
224
|
-
if (!
|
|
225
|
-
if (!t) return { ...
|
|
226
|
-
const
|
|
227
|
-
return t.border !== void 0 && (
|
|
223
|
+
function Z(o, t) {
|
|
224
|
+
if (!o) return t || {};
|
|
225
|
+
if (!t) return { ...o };
|
|
226
|
+
const i = { ...o };
|
|
227
|
+
return t.border !== void 0 && (i.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
228
228
|
}
|
|
229
|
-
function
|
|
230
|
-
if (!t) return { ...
|
|
231
|
-
const
|
|
232
|
-
Z(
|
|
229
|
+
function kt(o, t) {
|
|
230
|
+
if (!t) return { ...o };
|
|
231
|
+
const i = Z(o.default, t.default), e = Z(
|
|
232
|
+
Z(i, o.hover),
|
|
233
233
|
t.hover
|
|
234
|
-
),
|
|
235
|
-
Z(
|
|
234
|
+
), n = Z(
|
|
235
|
+
Z(i, o.focused),
|
|
236
236
|
t.focused
|
|
237
237
|
);
|
|
238
238
|
return {
|
|
239
|
-
default:
|
|
240
|
-
hover:
|
|
241
|
-
focused:
|
|
239
|
+
default: i,
|
|
240
|
+
hover: e,
|
|
241
|
+
focused: n
|
|
242
242
|
};
|
|
243
243
|
}
|
|
244
|
-
function Gt(
|
|
245
|
-
if (!t) return { ...
|
|
246
|
-
const
|
|
247
|
-
if (t.sizing !== void 0 && (
|
|
248
|
-
...
|
|
244
|
+
function Gt(o, t) {
|
|
245
|
+
if (!t) return { ...o };
|
|
246
|
+
const i = { ...o };
|
|
247
|
+
if (t.sizing !== void 0 && (i.sizing = {
|
|
248
|
+
...o.sizing,
|
|
249
249
|
...t.sizing
|
|
250
250
|
}, t.sizing.variance)) {
|
|
251
|
-
const
|
|
252
|
-
|
|
251
|
+
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : o.sizing?.variance?.max ?? 1;
|
|
252
|
+
i.sizing.variance = { min: n, max: a };
|
|
253
253
|
}
|
|
254
|
-
if (t.rotation !== void 0 && (
|
|
255
|
-
...
|
|
254
|
+
if (t.rotation !== void 0 && (i.rotation = {
|
|
255
|
+
...o.rotation,
|
|
256
256
|
...t.rotation
|
|
257
257
|
}, t.rotation.range)) {
|
|
258
|
-
const
|
|
259
|
-
|
|
258
|
+
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : o.rotation?.range?.max ?? 15;
|
|
259
|
+
i.rotation.range = { min: n, max: a };
|
|
260
260
|
}
|
|
261
|
-
return
|
|
261
|
+
return i;
|
|
262
262
|
}
|
|
263
|
-
function qt(
|
|
264
|
-
const t =
|
|
263
|
+
function qt(o) {
|
|
264
|
+
const t = o.layout?.rotation;
|
|
265
265
|
if (t && "enabled" in t)
|
|
266
266
|
return {
|
|
267
267
|
rotation: {
|
|
@@ -270,8 +270,8 @@ function qt(n) {
|
|
|
270
270
|
}
|
|
271
271
|
};
|
|
272
272
|
}
|
|
273
|
-
function
|
|
274
|
-
const t =
|
|
273
|
+
function Bt(o) {
|
|
274
|
+
const t = o.layout?.sizing?.variance;
|
|
275
275
|
if (t)
|
|
276
276
|
return {
|
|
277
277
|
sizing: {
|
|
@@ -281,111 +281,111 @@ function Yt(n) {
|
|
|
281
281
|
}
|
|
282
282
|
};
|
|
283
283
|
}
|
|
284
|
-
function
|
|
285
|
-
const t = qt(
|
|
286
|
-
let
|
|
287
|
-
(t ||
|
|
288
|
-
...
|
|
284
|
+
function Yt(o = {}) {
|
|
285
|
+
const t = qt(o), i = Bt(o);
|
|
286
|
+
let e = o.image;
|
|
287
|
+
(t || i) && (e = {
|
|
288
|
+
...i || {},
|
|
289
289
|
...t || {},
|
|
290
|
-
...
|
|
291
|
-
},
|
|
290
|
+
...e
|
|
291
|
+
}, e.rotation && t?.rotation && o.image?.rotation && (e.rotation = {
|
|
292
292
|
...t.rotation,
|
|
293
|
-
...
|
|
293
|
+
...o.image.rotation
|
|
294
294
|
}));
|
|
295
|
-
const
|
|
296
|
-
|
|
295
|
+
const n = [...o.loaders ?? []];
|
|
296
|
+
o.images && o.images.length > 0 && n.unshift({
|
|
297
297
|
static: {
|
|
298
|
-
sources: [{ urls:
|
|
298
|
+
sources: [{ urls: o.images }]
|
|
299
299
|
}
|
|
300
300
|
});
|
|
301
301
|
const r = {
|
|
302
302
|
loaders: {
|
|
303
|
-
...
|
|
304
|
-
...
|
|
303
|
+
...Mt,
|
|
304
|
+
...o.config?.loaders ?? {}
|
|
305
305
|
}
|
|
306
306
|
}, s = {
|
|
307
|
-
loaders:
|
|
307
|
+
loaders: n,
|
|
308
308
|
config: r,
|
|
309
|
-
image: Gt(
|
|
310
|
-
layout: { ...
|
|
311
|
-
animation: { ...
|
|
312
|
-
interaction: { ...
|
|
313
|
-
rendering: { ...
|
|
314
|
-
styling:
|
|
309
|
+
image: Gt(Lt, e),
|
|
310
|
+
layout: { ...y.layout },
|
|
311
|
+
animation: { ...y.animation },
|
|
312
|
+
interaction: { ...y.interaction },
|
|
313
|
+
rendering: { ...y.rendering },
|
|
314
|
+
styling: kt(At, o.styling)
|
|
315
315
|
};
|
|
316
|
-
return
|
|
317
|
-
...
|
|
318
|
-
...
|
|
319
|
-
},
|
|
320
|
-
...
|
|
321
|
-
mobile:
|
|
322
|
-
tablet:
|
|
323
|
-
}),
|
|
324
|
-
...
|
|
325
|
-
...
|
|
326
|
-
})),
|
|
327
|
-
...
|
|
328
|
-
...
|
|
329
|
-
},
|
|
330
|
-
...
|
|
331
|
-
...
|
|
332
|
-
}),
|
|
333
|
-
...
|
|
334
|
-
...
|
|
335
|
-
}),
|
|
336
|
-
...
|
|
337
|
-
...
|
|
338
|
-
}),
|
|
339
|
-
...
|
|
340
|
-
...
|
|
341
|
-
start:
|
|
342
|
-
...
|
|
343
|
-
...
|
|
344
|
-
circular:
|
|
345
|
-
} :
|
|
346
|
-
timing:
|
|
347
|
-
path:
|
|
348
|
-
rotation:
|
|
349
|
-
scale:
|
|
350
|
-
})),
|
|
351
|
-
...
|
|
352
|
-
...
|
|
353
|
-
},
|
|
354
|
-
...
|
|
355
|
-
...
|
|
356
|
-
}),
|
|
357
|
-
...
|
|
358
|
-
...
|
|
359
|
-
}),
|
|
360
|
-
...
|
|
361
|
-
...
|
|
362
|
-
})),
|
|
363
|
-
...
|
|
364
|
-
...
|
|
365
|
-
},
|
|
366
|
-
...
|
|
367
|
-
...
|
|
368
|
-
breakpoints:
|
|
369
|
-
mobileDetection:
|
|
370
|
-
}),
|
|
371
|
-
...
|
|
372
|
-
...
|
|
373
|
-
}),
|
|
374
|
-
...
|
|
375
|
-
...
|
|
316
|
+
return o.layout && (s.layout = {
|
|
317
|
+
...y.layout,
|
|
318
|
+
...o.layout
|
|
319
|
+
}, o.layout.responsive && (s.layout.responsive = {
|
|
320
|
+
...y.layout.responsive,
|
|
321
|
+
mobile: o.layout.responsive.mobile ? { ...y.layout.responsive.mobile, ...o.layout.responsive.mobile } : y.layout.responsive.mobile,
|
|
322
|
+
tablet: o.layout.responsive.tablet ? { ...y.layout.responsive.tablet, ...o.layout.responsive.tablet } : y.layout.responsive.tablet
|
|
323
|
+
}), o.layout.spacing && (s.layout.spacing = {
|
|
324
|
+
...y.layout.spacing,
|
|
325
|
+
...o.layout.spacing
|
|
326
|
+
})), o.animation && (s.animation = {
|
|
327
|
+
...y.animation,
|
|
328
|
+
...o.animation
|
|
329
|
+
}, o.animation.easing && (s.animation.easing = {
|
|
330
|
+
...y.animation.easing,
|
|
331
|
+
...o.animation.easing
|
|
332
|
+
}), o.animation.queue && (s.animation.queue = {
|
|
333
|
+
...y.animation.queue,
|
|
334
|
+
...o.animation.queue
|
|
335
|
+
}), o.animation.performance && (s.animation.performance = {
|
|
336
|
+
...y.animation.performance,
|
|
337
|
+
...o.animation.performance
|
|
338
|
+
}), o.animation.entry && (s.animation.entry = {
|
|
339
|
+
...y.animation.entry,
|
|
340
|
+
...o.animation.entry,
|
|
341
|
+
start: o.animation.entry.start ? {
|
|
342
|
+
...y.animation.entry.start,
|
|
343
|
+
...o.animation.entry.start,
|
|
344
|
+
circular: o.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...o.animation.entry.start.circular } : y.animation.entry.start.circular
|
|
345
|
+
} : y.animation.entry.start,
|
|
346
|
+
timing: o.animation.entry.timing ? { ...y.animation.entry.timing, ...o.animation.entry.timing } : y.animation.entry.timing,
|
|
347
|
+
path: o.animation.entry.path ? { ...bt, ...o.animation.entry.path } : y.animation.entry.path,
|
|
348
|
+
rotation: o.animation.entry.rotation ? { ...yt, ...o.animation.entry.rotation } : y.animation.entry.rotation,
|
|
349
|
+
scale: o.animation.entry.scale ? { ...vt, ...o.animation.entry.scale } : y.animation.entry.scale
|
|
350
|
+
})), o.interaction && (s.interaction = {
|
|
351
|
+
...y.interaction,
|
|
352
|
+
...o.interaction
|
|
353
|
+
}, o.interaction.focus && (s.interaction.focus = {
|
|
354
|
+
...y.interaction.focus,
|
|
355
|
+
...o.interaction.focus
|
|
356
|
+
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
357
|
+
...y.interaction.navigation,
|
|
358
|
+
...o.interaction.navigation
|
|
359
|
+
}), o.interaction.gestures && (s.interaction.gestures = {
|
|
360
|
+
...y.interaction.gestures,
|
|
361
|
+
...o.interaction.gestures
|
|
362
|
+
})), o.rendering && (s.rendering = {
|
|
363
|
+
...y.rendering,
|
|
364
|
+
...o.rendering
|
|
365
|
+
}, o.rendering.responsive && (s.rendering.responsive = {
|
|
366
|
+
...y.rendering.responsive,
|
|
367
|
+
...o.rendering.responsive,
|
|
368
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...y.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : y.rendering.responsive.breakpoints,
|
|
369
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : y.rendering.responsive.mobileDetection
|
|
370
|
+
}), o.rendering.ui && (s.rendering.ui = {
|
|
371
|
+
...y.rendering.ui,
|
|
372
|
+
...o.rendering.ui
|
|
373
|
+
}), o.rendering.performance && (s.rendering.performance = {
|
|
374
|
+
...y.rendering.performance,
|
|
375
|
+
...o.rendering.performance
|
|
376
376
|
})), s.config.debug = {
|
|
377
|
-
...
|
|
378
|
-
...
|
|
377
|
+
...Ft,
|
|
378
|
+
...o.config?.debug ?? {}
|
|
379
379
|
}, s;
|
|
380
380
|
}
|
|
381
|
-
function
|
|
382
|
-
return { ...
|
|
381
|
+
function Xt(o, t) {
|
|
382
|
+
return { ...o ? St[o] : St.playful, ...t };
|
|
383
383
|
}
|
|
384
|
-
function Jt(
|
|
385
|
-
return { ...
|
|
384
|
+
function Jt(o, t) {
|
|
385
|
+
return { ...o ? Et[o] : Et.gentle, ...t };
|
|
386
386
|
}
|
|
387
|
-
function Vt(
|
|
388
|
-
return { ...
|
|
387
|
+
function Vt(o, t) {
|
|
388
|
+
return { ...o ? Rt[o] : Rt.gentle, ...t };
|
|
389
389
|
}
|
|
390
390
|
class Kt {
|
|
391
391
|
constructor(t) {
|
|
@@ -396,12 +396,12 @@ class Kt {
|
|
|
396
396
|
* Always starts with centering transform to match image positioning system
|
|
397
397
|
*/
|
|
398
398
|
buildTransformString(t) {
|
|
399
|
-
const
|
|
399
|
+
const i = ["translate(-50%, -50%)"];
|
|
400
400
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
401
|
-
const
|
|
402
|
-
|
|
401
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
402
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
403
403
|
}
|
|
404
|
-
return t.rotation !== void 0 &&
|
|
404
|
+
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
405
405
|
}
|
|
406
406
|
/**
|
|
407
407
|
* Start a cancellable transform animation using Web Animations API
|
|
@@ -412,9 +412,9 @@ class Kt {
|
|
|
412
412
|
* @param easing - CSS easing function (optional)
|
|
413
413
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
414
414
|
*/
|
|
415
|
-
animateTransformCancellable(t,
|
|
415
|
+
animateTransformCancellable(t, i, e, n = null, a = null) {
|
|
416
416
|
this.cancelAllAnimations(t);
|
|
417
|
-
const r =
|
|
417
|
+
const r = n ?? this.config.duration, s = a ?? this.config.easing.default, h = this.buildTransformString(i), c = this.buildTransformString(e);
|
|
418
418
|
t.style.transition = "none";
|
|
419
419
|
const d = t.animate(
|
|
420
420
|
[
|
|
@@ -431,8 +431,8 @@ class Kt {
|
|
|
431
431
|
id: `anim-${++this.animationIdCounter}`,
|
|
432
432
|
element: t,
|
|
433
433
|
animation: d,
|
|
434
|
-
fromState:
|
|
435
|
-
toState:
|
|
434
|
+
fromState: i,
|
|
435
|
+
toState: e,
|
|
436
436
|
startTime: performance.now(),
|
|
437
437
|
duration: r
|
|
438
438
|
};
|
|
@@ -448,18 +448,18 @@ class Kt {
|
|
|
448
448
|
* @param commitStyle - If true, keeps current position; if false, no style change
|
|
449
449
|
* @returns Snapshot of where the animation was when cancelled
|
|
450
450
|
*/
|
|
451
|
-
cancelAnimation(t,
|
|
452
|
-
const
|
|
453
|
-
if (t.animation.cancel(),
|
|
454
|
-
const
|
|
455
|
-
x:
|
|
456
|
-
y:
|
|
457
|
-
rotation:
|
|
458
|
-
scale:
|
|
451
|
+
cancelAnimation(t, i = !0) {
|
|
452
|
+
const e = this.getCurrentTransform(t.element);
|
|
453
|
+
if (t.animation.cancel(), i) {
|
|
454
|
+
const n = this.buildTransformString({
|
|
455
|
+
x: e.x,
|
|
456
|
+
y: e.y,
|
|
457
|
+
rotation: e.rotation,
|
|
458
|
+
scale: e.scale
|
|
459
459
|
});
|
|
460
|
-
t.element.style.transform =
|
|
460
|
+
t.element.style.transform = n;
|
|
461
461
|
}
|
|
462
|
-
return this.activeAnimations.delete(t.element),
|
|
462
|
+
return this.activeAnimations.delete(t.element), e;
|
|
463
463
|
}
|
|
464
464
|
/**
|
|
465
465
|
* Cancel all animations on an element
|
|
@@ -467,11 +467,11 @@ class Kt {
|
|
|
467
467
|
* @param element - The element to cancel animations for
|
|
468
468
|
*/
|
|
469
469
|
cancelAllAnimations(t) {
|
|
470
|
-
const
|
|
471
|
-
|
|
472
|
-
const
|
|
473
|
-
for (const
|
|
474
|
-
|
|
470
|
+
const i = this.activeAnimations.get(t);
|
|
471
|
+
i && this.cancelAnimation(i, !1);
|
|
472
|
+
const e = t.getAnimations();
|
|
473
|
+
for (const n of e)
|
|
474
|
+
n.cancel();
|
|
475
475
|
}
|
|
476
476
|
/**
|
|
477
477
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -480,10 +480,10 @@ class Kt {
|
|
|
480
480
|
* @returns Current transform snapshot
|
|
481
481
|
*/
|
|
482
482
|
getCurrentTransform(t) {
|
|
483
|
-
const
|
|
484
|
-
if (
|
|
483
|
+
const e = getComputedStyle(t).transform;
|
|
484
|
+
if (e === "none" || !e)
|
|
485
485
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
486
|
-
const
|
|
486
|
+
const n = new DOMMatrix(e), a = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), s = n.e, h = n.f;
|
|
487
487
|
return { x: s, y: h, rotation: r, scale: a };
|
|
488
488
|
}
|
|
489
489
|
/**
|
|
@@ -510,10 +510,10 @@ class Kt {
|
|
|
510
510
|
* @param easing - CSS easing function (optional)
|
|
511
511
|
* @returns Promise that resolves when animation completes
|
|
512
512
|
*/
|
|
513
|
-
animateTransform(t,
|
|
513
|
+
animateTransform(t, i, e = null, n = null) {
|
|
514
514
|
return new Promise((a) => {
|
|
515
|
-
const r =
|
|
516
|
-
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(
|
|
515
|
+
const r = e ?? this.config.duration, s = n ?? this.config.easing.default;
|
|
516
|
+
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
517
517
|
a();
|
|
518
518
|
}, r);
|
|
519
519
|
});
|
|
@@ -524,8 +524,8 @@ class Kt {
|
|
|
524
524
|
* @param originalState - Original transform state {x, y, rotation, scale}
|
|
525
525
|
* @returns Promise that resolves when animation completes
|
|
526
526
|
*/
|
|
527
|
-
resetTransform(t,
|
|
528
|
-
return this.animateTransform(t,
|
|
527
|
+
resetTransform(t, i) {
|
|
528
|
+
return this.animateTransform(t, i);
|
|
529
529
|
}
|
|
530
530
|
/**
|
|
531
531
|
* Remove transition styles from element
|
|
@@ -540,102 +540,102 @@ class Kt {
|
|
|
540
540
|
* @returns Promise that resolves after the specified duration
|
|
541
541
|
*/
|
|
542
542
|
wait(t) {
|
|
543
|
-
return new Promise((
|
|
543
|
+
return new Promise((i) => setTimeout(i, t));
|
|
544
544
|
}
|
|
545
545
|
}
|
|
546
|
-
function V(
|
|
547
|
-
return
|
|
546
|
+
function V(o, t, i) {
|
|
547
|
+
return o + (t - o) * i;
|
|
548
548
|
}
|
|
549
|
-
function Zt(
|
|
550
|
-
const { overshoot:
|
|
551
|
-
let d = 0, l = 0, u = 1, g =
|
|
549
|
+
function Zt(o, t, i, e) {
|
|
550
|
+
const { overshoot: n, bounces: a, decayRatio: r } = e, s = i.x - t.x, h = i.y - t.y, c = Qt(a, r);
|
|
551
|
+
let d = 0, l = 0, u = 1, g = n, p = !1;
|
|
552
552
|
for (let f = 0; f < c.length; f++)
|
|
553
|
-
if (
|
|
553
|
+
if (o <= c[f].time) {
|
|
554
554
|
l = f === 0 ? 0 : c[f - 1].time, u = c[f].time, g = c[f].overshoot, p = c[f].isOvershoot;
|
|
555
555
|
break;
|
|
556
556
|
}
|
|
557
|
-
const
|
|
557
|
+
const b = (o - l) / (u - l);
|
|
558
558
|
if (p)
|
|
559
|
-
d = 1 + g *
|
|
559
|
+
d = 1 + g * ot(b);
|
|
560
560
|
else if (l === 0)
|
|
561
|
-
d =
|
|
561
|
+
d = ot(b);
|
|
562
562
|
else {
|
|
563
563
|
const m = 1 + (c.find(
|
|
564
|
-
(
|
|
564
|
+
(S, v) => S.time > l && v > 0 && c[v - 1].isOvershoot
|
|
565
565
|
)?.overshoot || g);
|
|
566
|
-
d = V(m, 1,
|
|
566
|
+
d = V(m, 1, ot(b));
|
|
567
567
|
}
|
|
568
568
|
return {
|
|
569
569
|
x: t.x + s * d,
|
|
570
570
|
y: t.y + h * d
|
|
571
571
|
};
|
|
572
572
|
}
|
|
573
|
-
function Qt(
|
|
574
|
-
const
|
|
575
|
-
let
|
|
576
|
-
|
|
577
|
-
let
|
|
578
|
-
const r = 0.4 / (
|
|
579
|
-
for (let s = 0; s <
|
|
580
|
-
|
|
581
|
-
return
|
|
573
|
+
function Qt(o, t) {
|
|
574
|
+
const i = [];
|
|
575
|
+
let e = 0.6;
|
|
576
|
+
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
577
|
+
let n = 0.15;
|
|
578
|
+
const r = 0.4 / (o * 2);
|
|
579
|
+
for (let s = 0; s < o; s++)
|
|
580
|
+
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
581
|
+
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
582
582
|
}
|
|
583
|
-
function te(
|
|
584
|
-
const { stiffness:
|
|
583
|
+
function te(o, t, i, e) {
|
|
584
|
+
const { stiffness: n, damping: a, mass: r, oscillations: s } = e, h = i.x - t.x, c = i.y - t.y, d = Math.sqrt(n / r), l = a / (2 * Math.sqrt(n * r));
|
|
585
585
|
let u;
|
|
586
586
|
if (l < 1) {
|
|
587
|
-
const g = d * Math.sqrt(1 - l * l), p = Math.exp(-l * d *
|
|
588
|
-
u = 1 - p *
|
|
587
|
+
const g = d * Math.sqrt(1 - l * l), p = Math.exp(-l * d * o * 3), b = Math.cos(g * o * s * Math.PI);
|
|
588
|
+
u = 1 - p * b;
|
|
589
589
|
} else
|
|
590
|
-
u = 1 - Math.exp(-d *
|
|
590
|
+
u = 1 - Math.exp(-d * o * 3);
|
|
591
591
|
return u = Math.max(0, Math.min(u, 1.3)), {
|
|
592
592
|
x: t.x + h * u,
|
|
593
593
|
y: t.y + c * u
|
|
594
594
|
};
|
|
595
595
|
}
|
|
596
|
-
function ee(
|
|
597
|
-
const { amplitude:
|
|
596
|
+
function ee(o, t, i, e) {
|
|
597
|
+
const { amplitude: n, frequency: a, decay: r, decayRate: s, phase: h } = e, c = i.x - t.x, d = i.y - t.y, l = Math.sqrt(c * c + d * d), u = l > 0 ? -d / l : 0, g = l > 0 ? c / l : 1, p = a * Math.PI * 2 * o + h, b = r ? Math.pow(1 - o, s) : 1, f = n * Math.sin(p) * b, m = ie(o);
|
|
598
598
|
return {
|
|
599
|
-
x: V(t.x,
|
|
600
|
-
y: V(t.y,
|
|
599
|
+
x: V(t.x, i.x, m) + f * u,
|
|
600
|
+
y: V(t.y, i.y, m) + f * g
|
|
601
601
|
};
|
|
602
602
|
}
|
|
603
|
-
function
|
|
604
|
-
return 1 - (1 -
|
|
603
|
+
function ot(o) {
|
|
604
|
+
return 1 - (1 - o) * (1 - o);
|
|
605
605
|
}
|
|
606
|
-
function ie(
|
|
607
|
-
return 1 - Math.pow(1 -
|
|
606
|
+
function ie(o) {
|
|
607
|
+
return 1 - Math.pow(1 - o, 3);
|
|
608
608
|
}
|
|
609
|
-
function
|
|
610
|
-
const { amplitude:
|
|
609
|
+
function oe(o, t, i) {
|
|
610
|
+
const { amplitude: e, frequency: n, decay: a } = i, r = Math.sin(o * n * Math.PI * 2), s = a ? Math.pow(1 - o, 2) : 1, h = e * r * s;
|
|
611
611
|
return t + h;
|
|
612
612
|
}
|
|
613
|
-
function
|
|
614
|
-
const { overshoot:
|
|
615
|
-
a.push({ time: 0.5, scale:
|
|
616
|
-
let r =
|
|
617
|
-
const s = 0.5, c = 0.5 / (
|
|
613
|
+
function ne(o, t, i) {
|
|
614
|
+
const { overshoot: e, bounces: n } = i, a = [];
|
|
615
|
+
a.push({ time: 0.5, scale: e });
|
|
616
|
+
let r = e;
|
|
617
|
+
const s = 0.5, c = 0.5 / (n * 2);
|
|
618
618
|
let d = 0.5;
|
|
619
|
-
for (let u = 0; u <
|
|
619
|
+
for (let u = 0; u < n; u++) {
|
|
620
620
|
const g = 1 - (r - 1) * s;
|
|
621
|
-
d += c, a.push({ time: d, scale: g }), r = 1 + (r - 1) * s * s, d += c, u <
|
|
621
|
+
d += c, a.push({ time: d, scale: g }), r = 1 + (r - 1) * s * s, d += c, u < n - 1 && a.push({ time: d, scale: r });
|
|
622
622
|
}
|
|
623
623
|
a.push({ time: 1, scale: 1 });
|
|
624
624
|
let l = 1;
|
|
625
625
|
for (let u = 0; u < a.length; u++)
|
|
626
|
-
if (
|
|
627
|
-
const g = u === 0 ? 0 : a[u - 1].time, p = u === 0 ? 1 : a[u - 1].scale,
|
|
626
|
+
if (o <= a[u].time) {
|
|
627
|
+
const g = u === 0 ? 0 : a[u - 1].time, p = u === 0 ? 1 : a[u - 1].scale, b = (o - g) / (a[u].time - g), f = ot(b);
|
|
628
628
|
l = p + (a[u].scale - p) * f;
|
|
629
629
|
break;
|
|
630
630
|
}
|
|
631
631
|
return l * t;
|
|
632
632
|
}
|
|
633
|
-
function se(
|
|
633
|
+
function se(o) {
|
|
634
634
|
const {
|
|
635
635
|
element: t,
|
|
636
|
-
startPosition:
|
|
637
|
-
endPosition:
|
|
638
|
-
pathConfig:
|
|
636
|
+
startPosition: i,
|
|
637
|
+
endPosition: e,
|
|
638
|
+
pathConfig: n,
|
|
639
639
|
duration: a,
|
|
640
640
|
imageWidth: r,
|
|
641
641
|
imageHeight: s,
|
|
@@ -646,56 +646,56 @@ function se(n) {
|
|
|
646
646
|
startRotation: u,
|
|
647
647
|
scaleConfig: g,
|
|
648
648
|
startScale: p
|
|
649
|
-
} =
|
|
650
|
-
if ((
|
|
649
|
+
} = o, b = n.type, f = u !== void 0 && u !== h, m = l?.mode === "wobble", S = l?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, v = f || m, w = p !== void 0 && p !== c, E = g?.mode === "pop", x = g?.pop || { overshoot: 1.2, bounces: 1 };
|
|
650
|
+
if ((b === "linear" || b === "arc") && !v && !(w || E)) {
|
|
651
651
|
d && d();
|
|
652
652
|
return;
|
|
653
653
|
}
|
|
654
|
-
const
|
|
655
|
-
function _(
|
|
656
|
-
const
|
|
657
|
-
let
|
|
658
|
-
switch (
|
|
654
|
+
const M = performance.now(), F = -r / 2, U = -s / 2;
|
|
655
|
+
function _(B) {
|
|
656
|
+
const j = B - M, T = Math.min(j / a, 1);
|
|
657
|
+
let O;
|
|
658
|
+
switch (b) {
|
|
659
659
|
case "bounce": {
|
|
660
|
-
const
|
|
661
|
-
|
|
662
|
-
|
|
660
|
+
const $ = Xt(
|
|
661
|
+
n.bouncePreset,
|
|
662
|
+
n.bounce
|
|
663
663
|
);
|
|
664
|
-
|
|
664
|
+
O = Zt(T, i, e, $);
|
|
665
665
|
break;
|
|
666
666
|
}
|
|
667
667
|
case "elastic": {
|
|
668
|
-
const
|
|
669
|
-
|
|
670
|
-
|
|
668
|
+
const $ = Jt(
|
|
669
|
+
n.elasticPreset,
|
|
670
|
+
n.elastic
|
|
671
671
|
);
|
|
672
|
-
|
|
672
|
+
O = te(T, i, e, $);
|
|
673
673
|
break;
|
|
674
674
|
}
|
|
675
675
|
case "wave": {
|
|
676
|
-
const
|
|
677
|
-
|
|
678
|
-
|
|
676
|
+
const $ = Vt(
|
|
677
|
+
n.wavePreset,
|
|
678
|
+
n.wave
|
|
679
679
|
);
|
|
680
|
-
|
|
680
|
+
O = ee(T, i, e, $);
|
|
681
681
|
break;
|
|
682
682
|
}
|
|
683
683
|
default:
|
|
684
|
-
|
|
685
|
-
x: V(
|
|
686
|
-
y: V(
|
|
684
|
+
O = {
|
|
685
|
+
x: V(i.x, e.x, T),
|
|
686
|
+
y: V(i.y, e.y, T)
|
|
687
687
|
};
|
|
688
688
|
}
|
|
689
|
-
const
|
|
690
|
-
let
|
|
691
|
-
m ?
|
|
692
|
-
let
|
|
693
|
-
|
|
689
|
+
const W = O.x - e.x, H = O.y - e.y;
|
|
690
|
+
let A;
|
|
691
|
+
m ? A = oe(T, h, S) : f ? A = V(u, h, T) : A = h;
|
|
692
|
+
let C;
|
|
693
|
+
E ? C = ne(T, c, x) : w ? C = V(p, c, T) : C = c, t.style.transform = `translate(${F}px, ${U}px) translate(${W}px, ${H}px) rotate(${A}deg) scale(${C})`, T < 1 ? requestAnimationFrame(_) : (t.style.transform = `translate(${F}px, ${U}px) rotate(${h}deg) scale(${c})`, d && d());
|
|
694
694
|
}
|
|
695
695
|
requestAnimationFrame(_);
|
|
696
696
|
}
|
|
697
|
-
function ae(
|
|
698
|
-
return
|
|
697
|
+
function ae(o) {
|
|
698
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
699
699
|
}
|
|
700
700
|
const re = {
|
|
701
701
|
radial: "center",
|
|
@@ -706,8 +706,8 @@ const re = {
|
|
|
706
706
|
wave: "left"
|
|
707
707
|
};
|
|
708
708
|
class ce {
|
|
709
|
-
constructor(t,
|
|
710
|
-
this.config = t, this.layoutAlgorithm =
|
|
709
|
+
constructor(t, i) {
|
|
710
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || bt, this.rotationConfig = t.rotation || yt, this.scaleConfig = t.scale || vt;
|
|
711
711
|
}
|
|
712
712
|
/**
|
|
713
713
|
* Get the effective start position, considering layout-aware defaults
|
|
@@ -718,60 +718,60 @@ class ce {
|
|
|
718
718
|
/**
|
|
719
719
|
* Calculate the starting position for an image's entry animation
|
|
720
720
|
*/
|
|
721
|
-
calculateStartPosition(t,
|
|
721
|
+
calculateStartPosition(t, i, e, n, a) {
|
|
722
722
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
723
723
|
switch (r) {
|
|
724
724
|
case "nearest-edge":
|
|
725
|
-
return this.calculateNearestEdge(t,
|
|
725
|
+
return this.calculateNearestEdge(t, i, e, s);
|
|
726
726
|
case "top":
|
|
727
|
-
return this.calculateEdgePosition("top", t,
|
|
727
|
+
return this.calculateEdgePosition("top", t, i, e, s);
|
|
728
728
|
case "bottom":
|
|
729
|
-
return this.calculateEdgePosition("bottom", t,
|
|
729
|
+
return this.calculateEdgePosition("bottom", t, i, e, s);
|
|
730
730
|
case "left":
|
|
731
|
-
return this.calculateEdgePosition("left", t,
|
|
731
|
+
return this.calculateEdgePosition("left", t, i, e, s);
|
|
732
732
|
case "right":
|
|
733
|
-
return this.calculateEdgePosition("right", t,
|
|
733
|
+
return this.calculateEdgePosition("right", t, i, e, s);
|
|
734
734
|
case "center":
|
|
735
|
-
return this.calculateCenterPosition(
|
|
735
|
+
return this.calculateCenterPosition(e, t, i);
|
|
736
736
|
case "random-edge":
|
|
737
|
-
return this.calculateRandomEdge(t,
|
|
737
|
+
return this.calculateRandomEdge(t, i, e, s);
|
|
738
738
|
case "circular":
|
|
739
739
|
return this.calculateCircularPosition(
|
|
740
740
|
t,
|
|
741
|
-
e,
|
|
742
741
|
i,
|
|
743
|
-
|
|
742
|
+
e,
|
|
743
|
+
n,
|
|
744
744
|
a
|
|
745
745
|
);
|
|
746
746
|
default:
|
|
747
|
-
return this.calculateNearestEdge(t,
|
|
747
|
+
return this.calculateNearestEdge(t, i, e, s);
|
|
748
748
|
}
|
|
749
749
|
}
|
|
750
750
|
/**
|
|
751
751
|
* Calculate start position from the nearest edge (current default behavior)
|
|
752
752
|
*/
|
|
753
|
-
calculateNearestEdge(t,
|
|
754
|
-
const a = t.x, r = t.y, s = a, h =
|
|
753
|
+
calculateNearestEdge(t, i, e, n) {
|
|
754
|
+
const a = t.x, r = t.y, s = a, h = e.width - a, c = r, d = e.height - r, l = Math.min(s, h, c, d);
|
|
755
755
|
let u = t.x, g = t.y;
|
|
756
|
-
return l === s ? u = -(
|
|
756
|
+
return l === s ? u = -(i.width + n) : l === h ? u = e.width + n : l === c ? g = -(i.height + n) : g = e.height + n, { x: u, y: g };
|
|
757
757
|
}
|
|
758
758
|
/**
|
|
759
759
|
* Calculate start position from a specific edge
|
|
760
760
|
*/
|
|
761
|
-
calculateEdgePosition(t,
|
|
762
|
-
let r =
|
|
761
|
+
calculateEdgePosition(t, i, e, n, a) {
|
|
762
|
+
let r = i.x, s = i.y;
|
|
763
763
|
switch (t) {
|
|
764
764
|
case "top":
|
|
765
|
-
s = -(
|
|
765
|
+
s = -(e.height + a);
|
|
766
766
|
break;
|
|
767
767
|
case "bottom":
|
|
768
|
-
s =
|
|
768
|
+
s = n.height + a;
|
|
769
769
|
break;
|
|
770
770
|
case "left":
|
|
771
|
-
r = -(
|
|
771
|
+
r = -(e.width + a);
|
|
772
772
|
break;
|
|
773
773
|
case "right":
|
|
774
|
-
r =
|
|
774
|
+
r = n.width + a;
|
|
775
775
|
break;
|
|
776
776
|
}
|
|
777
777
|
return { x: r, y: s };
|
|
@@ -779,10 +779,10 @@ class ce {
|
|
|
779
779
|
/**
|
|
780
780
|
* Calculate start position from center with scale animation
|
|
781
781
|
*/
|
|
782
|
-
calculateCenterPosition(t,
|
|
783
|
-
const
|
|
782
|
+
calculateCenterPosition(t, i, e) {
|
|
783
|
+
const n = t.width / 2, a = t.height / 2;
|
|
784
784
|
return {
|
|
785
|
-
x:
|
|
785
|
+
x: n,
|
|
786
786
|
y: a,
|
|
787
787
|
useScale: !0
|
|
788
788
|
// Signal to use scale animation from 0
|
|
@@ -791,68 +791,68 @@ class ce {
|
|
|
791
791
|
/**
|
|
792
792
|
* Calculate start position from a random edge
|
|
793
793
|
*/
|
|
794
|
-
calculateRandomEdge(t,
|
|
794
|
+
calculateRandomEdge(t, i, e, n) {
|
|
795
795
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
796
|
-
return this.calculateEdgePosition(r, t,
|
|
796
|
+
return this.calculateEdgePosition(r, t, i, e, n);
|
|
797
797
|
}
|
|
798
798
|
/**
|
|
799
799
|
* Calculate start position on a circle around the container
|
|
800
800
|
*/
|
|
801
|
-
calculateCircularPosition(t,
|
|
801
|
+
calculateCircularPosition(t, i, e, n, a) {
|
|
802
802
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
803
803
|
let h;
|
|
804
804
|
const c = r.radius || "120%";
|
|
805
805
|
if (typeof c == "string" && c.endsWith("%")) {
|
|
806
|
-
const
|
|
806
|
+
const b = parseFloat(c) / 100;
|
|
807
807
|
h = Math.sqrt(
|
|
808
|
-
|
|
809
|
-
) *
|
|
808
|
+
e.width ** 2 + e.height ** 2
|
|
809
|
+
) * b / 2;
|
|
810
810
|
} else
|
|
811
811
|
h = typeof c == "number" ? c : 500;
|
|
812
812
|
let d;
|
|
813
|
-
s === "even" ? d =
|
|
814
|
-
const l =
|
|
813
|
+
s === "even" ? d = n / a * 2 * Math.PI : d = Math.random() * 2 * Math.PI;
|
|
814
|
+
const l = e.width / 2, u = e.height / 2, g = l + Math.cos(d) * h, p = u + Math.sin(d) * h;
|
|
815
815
|
return { x: g, y: p };
|
|
816
816
|
}
|
|
817
817
|
/**
|
|
818
818
|
* Get animation parameters for an image
|
|
819
819
|
*/
|
|
820
820
|
getAnimationParams(t) {
|
|
821
|
-
const
|
|
821
|
+
const i = this.config.timing.duration, e = this.config.easing;
|
|
822
822
|
return {
|
|
823
823
|
startTransform: "",
|
|
824
824
|
// Will be computed by caller based on start position
|
|
825
|
-
duration:
|
|
825
|
+
duration: i,
|
|
826
826
|
delay: 0,
|
|
827
|
-
easing:
|
|
827
|
+
easing: e
|
|
828
828
|
};
|
|
829
829
|
}
|
|
830
830
|
/**
|
|
831
831
|
* Build a CSS transform string for the start position
|
|
832
832
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
833
833
|
*/
|
|
834
|
-
buildStartTransform(t,
|
|
835
|
-
const c = t.x -
|
|
836
|
-
return t.useScale ? `${
|
|
834
|
+
buildStartTransform(t, i, e, n, a, r, s, h) {
|
|
835
|
+
const c = t.x - i.x, d = t.y - i.y, l = s !== void 0 ? s : e, u = h !== void 0 ? h : n, g = a !== void 0 ? -a / 2 : 0, p = r !== void 0 ? -r / 2 : 0, b = a !== void 0 ? `translate(${g}px, ${p}px)` : "translate(-50%, -50%)";
|
|
836
|
+
return t.useScale ? `${b} translate(${c}px, ${d}px) rotate(${l}deg) scale(0)` : `${b} translate(${c}px, ${d}px) rotate(${l}deg) scale(${u})`;
|
|
837
837
|
}
|
|
838
838
|
/**
|
|
839
839
|
* Build the final CSS transform string
|
|
840
840
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
841
841
|
*/
|
|
842
|
-
buildFinalTransform(t,
|
|
843
|
-
if (
|
|
844
|
-
const a = -
|
|
845
|
-
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${
|
|
842
|
+
buildFinalTransform(t, i, e, n) {
|
|
843
|
+
if (e !== void 0 && n !== void 0) {
|
|
844
|
+
const a = -e / 2, r = -n / 2;
|
|
845
|
+
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
846
846
|
}
|
|
847
|
-
return `translate(-50%, -50%) rotate(${t}deg) scale(${
|
|
847
|
+
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
848
848
|
}
|
|
849
849
|
/**
|
|
850
850
|
* Get the transition CSS for entry animation
|
|
851
851
|
* For JS-animated paths, only animate opacity (transform handled by JS)
|
|
852
852
|
*/
|
|
853
853
|
getTransitionCSS() {
|
|
854
|
-
const t = this.config.timing.duration,
|
|
855
|
-
return this.requiresJSAnimation() ? `opacity ${t}ms ease-out` : `opacity ${t}ms ease-out, transform ${t}ms ${
|
|
854
|
+
const t = this.config.timing.duration, i = this.config.easing;
|
|
855
|
+
return this.requiresJSAnimation() ? `opacity ${t}ms ease-out` : `opacity ${t}ms ease-out, transform ${t}ms ${i}`;
|
|
856
856
|
}
|
|
857
857
|
/**
|
|
858
858
|
* Check if the current path type requires JavaScript animation
|
|
@@ -902,17 +902,17 @@ class ce {
|
|
|
902
902
|
case "none":
|
|
903
903
|
return t;
|
|
904
904
|
case "settle": {
|
|
905
|
-
const
|
|
906
|
-
if (
|
|
905
|
+
const e = this.rotationConfig.startRotation;
|
|
906
|
+
if (e === void 0)
|
|
907
907
|
return t + (Math.random() - 0.5) * 60;
|
|
908
|
-
if (typeof
|
|
909
|
-
return
|
|
910
|
-
const
|
|
911
|
-
return
|
|
908
|
+
if (typeof e == "number")
|
|
909
|
+
return e;
|
|
910
|
+
const n = e.max - e.min;
|
|
911
|
+
return e.min + Math.random() * n;
|
|
912
912
|
}
|
|
913
913
|
case "spin": {
|
|
914
|
-
const
|
|
915
|
-
return t +
|
|
914
|
+
const e = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
915
|
+
return t + e * 360 * n;
|
|
916
916
|
}
|
|
917
917
|
case "random":
|
|
918
918
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -953,15 +953,15 @@ class ce {
|
|
|
953
953
|
* @param finalRotation - The final rotation in degrees
|
|
954
954
|
* @returns The current rotation in degrees
|
|
955
955
|
*/
|
|
956
|
-
calculateWobbleRotation(t,
|
|
956
|
+
calculateWobbleRotation(t, i) {
|
|
957
957
|
if (this.rotationConfig.mode !== "wobble")
|
|
958
|
-
return
|
|
959
|
-
const
|
|
958
|
+
return i;
|
|
959
|
+
const e = this.rotationConfig.wobble || {
|
|
960
960
|
amplitude: 15,
|
|
961
961
|
frequency: 3,
|
|
962
962
|
decay: !0
|
|
963
|
-
}, { amplitude:
|
|
964
|
-
return
|
|
963
|
+
}, { amplitude: n, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, c = n * s * h;
|
|
964
|
+
return i + c;
|
|
965
965
|
}
|
|
966
966
|
/**
|
|
967
967
|
* Get the scale configuration
|
|
@@ -991,8 +991,8 @@ class ce {
|
|
|
991
991
|
case "pop":
|
|
992
992
|
return t;
|
|
993
993
|
case "random": {
|
|
994
|
-
const
|
|
995
|
-
return (
|
|
994
|
+
const e = this.scaleConfig.range ?? { min: 0.5, max: 1 };
|
|
995
|
+
return (e.min + Math.random() * (e.max - e.min)) * t;
|
|
996
996
|
}
|
|
997
997
|
default:
|
|
998
998
|
return t;
|
|
@@ -1011,36 +1011,36 @@ class ce {
|
|
|
1011
1011
|
* @param finalScale - The final scale value
|
|
1012
1012
|
* @returns The current scale value with bounce effect
|
|
1013
1013
|
*/
|
|
1014
|
-
calculatePopScale(t,
|
|
1014
|
+
calculatePopScale(t, i) {
|
|
1015
1015
|
if (this.scaleConfig.mode !== "pop")
|
|
1016
|
-
return
|
|
1017
|
-
const
|
|
1016
|
+
return i;
|
|
1017
|
+
const e = this.scaleConfig.pop || {
|
|
1018
1018
|
overshoot: 1.2,
|
|
1019
1019
|
bounces: 1
|
|
1020
|
-
}, { overshoot:
|
|
1021
|
-
let s =
|
|
1020
|
+
}, { overshoot: n, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, n);
|
|
1021
|
+
let s = i;
|
|
1022
1022
|
for (let h = 0; h < r.length; h++)
|
|
1023
1023
|
if (t <= r[h].time) {
|
|
1024
|
-
const c = h === 0 ? 0 : r[h - 1].time, d = h === 0 ?
|
|
1024
|
+
const c = h === 0 ? 0 : r[h - 1].time, d = h === 0 ? i : r[h - 1].scale, l = (t - c) / (r[h].time - c), u = this.easeOutQuad(l);
|
|
1025
1025
|
s = d + (r[h].scale - d) * u;
|
|
1026
1026
|
break;
|
|
1027
1027
|
}
|
|
1028
|
-
return s *
|
|
1028
|
+
return s * i;
|
|
1029
1029
|
}
|
|
1030
1030
|
/**
|
|
1031
1031
|
* Generate keyframes for scale bounce animation
|
|
1032
1032
|
*/
|
|
1033
|
-
generateScaleBounceKeyframes(t,
|
|
1034
|
-
const
|
|
1035
|
-
|
|
1036
|
-
let
|
|
1033
|
+
generateScaleBounceKeyframes(t, i) {
|
|
1034
|
+
const e = [];
|
|
1035
|
+
e.push({ time: 0.5, scale: i });
|
|
1036
|
+
let n = i;
|
|
1037
1037
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1038
1038
|
let h = 0.5;
|
|
1039
1039
|
for (let c = 0; c < t; c++) {
|
|
1040
|
-
const d = 1 - (
|
|
1041
|
-
h += s,
|
|
1040
|
+
const d = 1 - (n - 1) * a;
|
|
1041
|
+
h += s, e.push({ time: h, scale: d }), n = 1 + (n - 1) * a * a, h += s, c < t - 1 && e.push({ time: h, scale: n });
|
|
1042
1042
|
}
|
|
1043
|
-
return
|
|
1043
|
+
return e.push({ time: 1, scale: 1 }), e;
|
|
1044
1044
|
}
|
|
1045
1045
|
/**
|
|
1046
1046
|
* Easing function for smooth transitions
|
|
@@ -1050,8 +1050,8 @@ class ce {
|
|
|
1050
1050
|
}
|
|
1051
1051
|
}
|
|
1052
1052
|
class le {
|
|
1053
|
-
constructor(t,
|
|
1054
|
-
this.config = t, this.imageConfig =
|
|
1053
|
+
constructor(t, i = {}) {
|
|
1054
|
+
this.config = t, this.imageConfig = i;
|
|
1055
1055
|
}
|
|
1056
1056
|
/**
|
|
1057
1057
|
* Generate random layout positions for images
|
|
@@ -1060,20 +1060,20 @@ class le {
|
|
|
1060
1060
|
* @param options - Optional overrides (includes fixedHeight)
|
|
1061
1061
|
* @returns Array of layout objects with position, rotation, scale
|
|
1062
1062
|
*/
|
|
1063
|
-
generate(t,
|
|
1064
|
-
const
|
|
1063
|
+
generate(t, i, e = {}) {
|
|
1064
|
+
const n = [], { width: a, height: r } = i, s = this.config.spacing.padding, h = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, u = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, p = u !== 1 || g !== 1, f = h * 1.5 / 2, m = h / 2, S = a - s - f, v = r - s - m, w = s + f, E = s + m;
|
|
1065
1065
|
for (let x = 0; x < t; x++) {
|
|
1066
|
-
const
|
|
1066
|
+
const I = this.random(w, S), M = this.random(E, v), F = c === "random" ? this.random(d, l) : 0, U = p ? this.random(u, g) : 1, _ = h * U, B = {
|
|
1067
1067
|
id: x,
|
|
1068
|
-
x:
|
|
1069
|
-
y:
|
|
1070
|
-
rotation:
|
|
1068
|
+
x: I,
|
|
1069
|
+
y: M,
|
|
1070
|
+
rotation: F,
|
|
1071
1071
|
scale: U,
|
|
1072
1072
|
baseSize: _
|
|
1073
1073
|
};
|
|
1074
|
-
|
|
1074
|
+
n.push(B);
|
|
1075
1075
|
}
|
|
1076
|
-
return
|
|
1076
|
+
return n;
|
|
1077
1077
|
}
|
|
1078
1078
|
/**
|
|
1079
1079
|
* Utility: Generate random number between min and max
|
|
@@ -1081,13 +1081,13 @@ class le {
|
|
|
1081
1081
|
* @param max - Maximum value
|
|
1082
1082
|
* @returns Random number in range
|
|
1083
1083
|
*/
|
|
1084
|
-
random(t,
|
|
1085
|
-
return Math.random() * (
|
|
1084
|
+
random(t, i) {
|
|
1085
|
+
return Math.random() * (i - t) + t;
|
|
1086
1086
|
}
|
|
1087
1087
|
}
|
|
1088
1088
|
class he {
|
|
1089
|
-
constructor(t,
|
|
1090
|
-
this.config = t, this.imageConfig =
|
|
1089
|
+
constructor(t, i = {}) {
|
|
1090
|
+
this.config = t, this.imageConfig = i;
|
|
1091
1091
|
}
|
|
1092
1092
|
/**
|
|
1093
1093
|
* Generate radial layout positions for images
|
|
@@ -1096,17 +1096,17 @@ class he {
|
|
|
1096
1096
|
* @param options - Optional overrides
|
|
1097
1097
|
* @returns Array of layout objects with position, rotation, scale
|
|
1098
1098
|
*/
|
|
1099
|
-
generate(t,
|
|
1100
|
-
const
|
|
1099
|
+
generate(t, i, e = {}) {
|
|
1100
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, l = this.imageConfig.sizing?.variance?.min ?? 1, u = this.imageConfig.sizing?.variance?.max ?? 1, g = l !== 1 || u !== 1, p = this.config.scaleDecay ?? 0, b = e.fixedHeight ?? s, f = a / 2, m = r / 2, S = Math.ceil(Math.sqrt(t));
|
|
1101
1101
|
if (t > 0) {
|
|
1102
|
-
const
|
|
1103
|
-
|
|
1102
|
+
const E = g ? this.random(l, u) : 1, x = b * E;
|
|
1103
|
+
n.push({
|
|
1104
1104
|
id: 0,
|
|
1105
1105
|
x: f,
|
|
1106
1106
|
y: m,
|
|
1107
1107
|
rotation: h === "random" ? this.random(c * 0.33, d * 0.33) : 0,
|
|
1108
1108
|
// Less rotation for center
|
|
1109
|
-
scale:
|
|
1109
|
+
scale: E,
|
|
1110
1110
|
baseSize: x,
|
|
1111
1111
|
zIndex: 100
|
|
1112
1112
|
// Center image is highest
|
|
@@ -1114,32 +1114,32 @@ class he {
|
|
|
1114
1114
|
}
|
|
1115
1115
|
let v = 1, w = 1;
|
|
1116
1116
|
for (; v < t; ) {
|
|
1117
|
-
const
|
|
1117
|
+
const E = w / S, x = p > 0 ? 1 - E * p * 0.5 : 1, I = w * (b * 0.8), M = I * 1.5, F = Math.PI * (3 * (M + I) - Math.sqrt((3 * M + I) * (M + 3 * I))), U = this.estimateWidth(b), _ = Math.floor(F / (U * 0.7));
|
|
1118
1118
|
if (_ === 0) {
|
|
1119
1119
|
w++;
|
|
1120
1120
|
continue;
|
|
1121
1121
|
}
|
|
1122
|
-
const
|
|
1123
|
-
for (let
|
|
1124
|
-
const
|
|
1125
|
-
let
|
|
1126
|
-
const
|
|
1127
|
-
|
|
1128
|
-
const
|
|
1129
|
-
|
|
1122
|
+
const B = 2 * Math.PI / _, j = w * (20 * Math.PI / 180);
|
|
1123
|
+
for (let T = 0; T < _ && v < t; T++) {
|
|
1124
|
+
const O = T * B + j, W = g ? this.random(l, u) : 1, H = x * W, A = b * H;
|
|
1125
|
+
let C = f + Math.cos(O) * M, $ = m + Math.sin(O) * I;
|
|
1126
|
+
const D = this.config.spacing.padding ?? 50, P = A * 1.5 / 2, L = A / 2;
|
|
1127
|
+
C - P < D ? C = D + P : C + P > a - D && (C = a - D - P), $ - L < D ? $ = D + L : $ + L > r - D && ($ = r - D - L);
|
|
1128
|
+
const k = h === "random" ? this.random(c, d) : 0;
|
|
1129
|
+
n.push({
|
|
1130
1130
|
id: v,
|
|
1131
|
-
x:
|
|
1132
|
-
y:
|
|
1133
|
-
rotation:
|
|
1131
|
+
x: C,
|
|
1132
|
+
y: $,
|
|
1133
|
+
rotation: k,
|
|
1134
1134
|
scale: H,
|
|
1135
|
-
baseSize:
|
|
1135
|
+
baseSize: A,
|
|
1136
1136
|
zIndex: Math.max(1, 100 - w)
|
|
1137
1137
|
// Outer rings have lower z-index
|
|
1138
1138
|
}), v++;
|
|
1139
1139
|
}
|
|
1140
1140
|
w++;
|
|
1141
1141
|
}
|
|
1142
|
-
return
|
|
1142
|
+
return n;
|
|
1143
1143
|
}
|
|
1144
1144
|
/**
|
|
1145
1145
|
* Estimate image width based on height
|
|
@@ -1156,8 +1156,8 @@ class he {
|
|
|
1156
1156
|
* @param max - Maximum value
|
|
1157
1157
|
* @returns Random number in range
|
|
1158
1158
|
*/
|
|
1159
|
-
random(t,
|
|
1160
|
-
return Math.random() * (
|
|
1159
|
+
random(t, i) {
|
|
1160
|
+
return Math.random() * (i - t) + t;
|
|
1161
1161
|
}
|
|
1162
1162
|
}
|
|
1163
1163
|
const de = {
|
|
@@ -1170,7 +1170,7 @@ const de = {
|
|
|
1170
1170
|
alignment: "center",
|
|
1171
1171
|
gap: 10,
|
|
1172
1172
|
overflowOffset: 0.25
|
|
1173
|
-
},
|
|
1173
|
+
}, It = [
|
|
1174
1174
|
{ x: 1, y: 1 },
|
|
1175
1175
|
// bottom-right
|
|
1176
1176
|
{ x: -1, y: -1 },
|
|
@@ -1189,8 +1189,8 @@ const de = {
|
|
|
1189
1189
|
// down
|
|
1190
1190
|
];
|
|
1191
1191
|
class ue {
|
|
1192
|
-
constructor(t,
|
|
1193
|
-
this.config = t, this.imageConfig =
|
|
1192
|
+
constructor(t, i = {}) {
|
|
1193
|
+
this.config = t, this.imageConfig = i;
|
|
1194
1194
|
}
|
|
1195
1195
|
/**
|
|
1196
1196
|
* Generate grid layout positions for images
|
|
@@ -1199,74 +1199,74 @@ class ue {
|
|
|
1199
1199
|
* @param options - Optional overrides (includes fixedHeight)
|
|
1200
1200
|
* @returns Array of layout objects with position, rotation, scale
|
|
1201
1201
|
*/
|
|
1202
|
-
generate(t,
|
|
1203
|
-
const
|
|
1202
|
+
generate(t, i, e = {}) {
|
|
1203
|
+
const n = [], { width: a, height: r } = i, s = { ...de, ...this.config.grid }, h = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.sizing?.variance?.min ?? 1, u = this.imageConfig.sizing?.variance?.max ?? 1, g = l !== 1 || u !== 1, p = a - 2 * h, b = r - 2 * h, { columns: f, rows: m } = this.calculateGridDimensions(
|
|
1204
1204
|
t,
|
|
1205
1205
|
p,
|
|
1206
|
-
|
|
1206
|
+
b,
|
|
1207
1207
|
c,
|
|
1208
1208
|
s
|
|
1209
|
-
),
|
|
1209
|
+
), S = s.stagger === "row", v = s.stagger === "column", w = S ? f + 0.5 : f, E = v ? m + 0.5 : m, x = (p - s.gap * (f - 1)) / w, I = (b - s.gap * (m - 1)) / E, M = S ? x / 2 : 0, F = v ? I / 2 : 0, U = 1 + s.overlap, _ = Math.min(x, I) * U, B = e.fixedHeight ? Math.min(e.fixedHeight, _) : _, j = f * x + (f - 1) * s.gap + M, T = m * I + (m - 1) * s.gap + F, O = h + (p - j) / 2, W = h + (b - T) / 2, H = f * m, A = s.columns !== "auto" && s.rows !== "auto", C = A && t > H;
|
|
1210
1210
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1211
1211
|
gridConfigColumns: s.columns,
|
|
1212
1212
|
gridConfigRows: s.rows,
|
|
1213
1213
|
columns: f,
|
|
1214
1214
|
rows: m,
|
|
1215
1215
|
cellCount: H,
|
|
1216
|
-
hasFixedGrid:
|
|
1216
|
+
hasFixedGrid: A,
|
|
1217
1217
|
imageCount: t,
|
|
1218
|
-
isOverflowMode:
|
|
1218
|
+
isOverflowMode: C
|
|
1219
1219
|
});
|
|
1220
|
-
const
|
|
1221
|
-
for (let
|
|
1222
|
-
let P,
|
|
1223
|
-
if (
|
|
1224
|
-
const q =
|
|
1225
|
-
|
|
1220
|
+
const $ = C ? new Array(H).fill(0) : [], D = Math.min(x, I) * s.overflowOffset;
|
|
1221
|
+
for (let z = 0; z < t; z++) {
|
|
1222
|
+
let P, L, k = 0;
|
|
1223
|
+
if (C && z >= H) {
|
|
1224
|
+
const q = z - H, N = q % H;
|
|
1225
|
+
k = Math.floor(q / H) + 1, $[N]++, s.fillDirection === "row" ? (P = N % f, L = Math.floor(N / f)) : (L = N % m, P = Math.floor(N / m));
|
|
1226
1226
|
} else
|
|
1227
|
-
s.fillDirection === "row" ? (P =
|
|
1228
|
-
let G =
|
|
1229
|
-
if (s.stagger === "row" &&
|
|
1230
|
-
const q = (
|
|
1231
|
-
G +=
|
|
1227
|
+
s.fillDirection === "row" ? (P = z % f, L = Math.floor(z / f)) : (L = z % m, P = Math.floor(z / m));
|
|
1228
|
+
let G = O + P * (x + s.gap) + x / 2, Y = W + L * (I + s.gap) + I / 2;
|
|
1229
|
+
if (s.stagger === "row" && L % 2 === 1 ? G += x / 2 : s.stagger === "column" && P % 2 === 1 && (Y += I / 2), k > 0) {
|
|
1230
|
+
const q = (k - 1) % It.length, N = It[q];
|
|
1231
|
+
G += N.x * D, Y += N.y * D;
|
|
1232
1232
|
}
|
|
1233
1233
|
if (s.jitter > 0) {
|
|
1234
|
-
const q = x / 2 * s.jitter,
|
|
1235
|
-
G += this.random(-q, q),
|
|
1234
|
+
const q = x / 2 * s.jitter, N = I / 2 * s.jitter;
|
|
1235
|
+
G += this.random(-q, q), Y += this.random(-N, N);
|
|
1236
1236
|
}
|
|
1237
|
-
let
|
|
1238
|
-
if (!
|
|
1237
|
+
let X = G, J = Y;
|
|
1238
|
+
if (!C && s.fillDirection === "row") {
|
|
1239
1239
|
const q = t % f || f;
|
|
1240
|
-
if (
|
|
1240
|
+
if (L === Math.floor((t - 1) / f) && q < f) {
|
|
1241
1241
|
const wt = q * x + (q - 1) * s.gap;
|
|
1242
|
-
let
|
|
1243
|
-
s.alignment === "center" ?
|
|
1242
|
+
let ut = 0;
|
|
1243
|
+
s.alignment === "center" ? ut = (j - wt) / 2 : s.alignment === "end" && (ut = j - wt), X += ut;
|
|
1244
1244
|
}
|
|
1245
1245
|
}
|
|
1246
|
-
const
|
|
1247
|
-
|
|
1248
|
-
let
|
|
1246
|
+
const at = g ? this.random(l, u) : 1, K = B * at, et = K * 1.5 / 2, it = K / 2, ct = h + et, lt = a - h - et, Ot = h + it, $t = r - h - it;
|
|
1247
|
+
X = Math.max(ct, Math.min(X, lt)), J = Math.max(Ot, Math.min(J, $t));
|
|
1248
|
+
let ht = 0;
|
|
1249
1249
|
if (d === "random") {
|
|
1250
|
-
const q = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1251
|
-
s.jitter > 0 ?
|
|
1250
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, N = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1251
|
+
s.jitter > 0 ? ht = this.random(q * s.jitter, N * s.jitter) : ht = this.random(q, N);
|
|
1252
1252
|
}
|
|
1253
|
-
let
|
|
1254
|
-
|
|
1255
|
-
id:
|
|
1256
|
-
x:
|
|
1253
|
+
let dt;
|
|
1254
|
+
C && k > 0 ? dt = 50 - k : dt = C ? 100 + z : z + 1, n.push({
|
|
1255
|
+
id: z,
|
|
1256
|
+
x: X,
|
|
1257
1257
|
y: J,
|
|
1258
|
-
rotation:
|
|
1259
|
-
scale:
|
|
1258
|
+
rotation: ht,
|
|
1259
|
+
scale: at,
|
|
1260
1260
|
baseSize: K,
|
|
1261
|
-
zIndex:
|
|
1261
|
+
zIndex: dt
|
|
1262
1262
|
});
|
|
1263
1263
|
}
|
|
1264
|
-
return
|
|
1264
|
+
return n;
|
|
1265
1265
|
}
|
|
1266
1266
|
/**
|
|
1267
1267
|
* Calculate optimal grid dimensions based on image count and container
|
|
1268
1268
|
*/
|
|
1269
|
-
calculateGridDimensions(t,
|
|
1269
|
+
calculateGridDimensions(t, i, e, n, a) {
|
|
1270
1270
|
let r, s;
|
|
1271
1271
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1272
1272
|
r = a.columns, s = a.rows;
|
|
@@ -1275,7 +1275,7 @@ class ue {
|
|
|
1275
1275
|
else if (a.rows !== "auto")
|
|
1276
1276
|
s = a.rows, r = Math.ceil(t / s);
|
|
1277
1277
|
else {
|
|
1278
|
-
const h =
|
|
1278
|
+
const h = i / e;
|
|
1279
1279
|
for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))), s = Math.ceil(t / r); r > 1 && (r - 1) * s >= t; )
|
|
1280
1280
|
r--;
|
|
1281
1281
|
}
|
|
@@ -1284,8 +1284,8 @@ class ue {
|
|
|
1284
1284
|
/**
|
|
1285
1285
|
* Utility: Generate random number between min and max
|
|
1286
1286
|
*/
|
|
1287
|
-
random(t,
|
|
1288
|
-
return Math.random() * (
|
|
1287
|
+
random(t, i) {
|
|
1288
|
+
return Math.random() * (i - t) + t;
|
|
1289
1289
|
}
|
|
1290
1290
|
}
|
|
1291
1291
|
const ge = Math.PI * (3 - Math.sqrt(5)), fe = {
|
|
@@ -1296,8 +1296,8 @@ const ge = Math.PI * (3 - Math.sqrt(5)), fe = {
|
|
|
1296
1296
|
startAngle: 0
|
|
1297
1297
|
};
|
|
1298
1298
|
class me {
|
|
1299
|
-
constructor(t,
|
|
1300
|
-
this.config = t, this.imageConfig =
|
|
1299
|
+
constructor(t, i = {}) {
|
|
1300
|
+
this.config = t, this.imageConfig = i;
|
|
1301
1301
|
}
|
|
1302
1302
|
/**
|
|
1303
1303
|
* Generate spiral layout positions for images
|
|
@@ -1306,87 +1306,87 @@ class me {
|
|
|
1306
1306
|
* @param options - Optional overrides (includes fixedHeight)
|
|
1307
1307
|
* @returns Array of layout objects with position, rotation, scale
|
|
1308
1308
|
*/
|
|
1309
|
-
generate(t,
|
|
1310
|
-
const
|
|
1309
|
+
generate(t, i, e = {}) {
|
|
1310
|
+
const n = [], { width: a, height: r } = i, s = { ...fe, ...this.config.spiral }, h = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, b = g !== 1 || p !== 1, f = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, S = r / 2, v = Math.min(
|
|
1311
1311
|
m - h - c / 2,
|
|
1312
|
-
|
|
1312
|
+
S - h - c / 2
|
|
1313
1313
|
), w = s.direction === "clockwise" ? -1 : 1;
|
|
1314
|
-
for (let
|
|
1315
|
-
let x,
|
|
1314
|
+
for (let E = 0; E < t; E++) {
|
|
1315
|
+
let x, I;
|
|
1316
1316
|
if (s.spiralType === "golden")
|
|
1317
|
-
x =
|
|
1317
|
+
x = E * ge * w + s.startAngle, I = this.calculateGoldenRadius(E, t, v, s.tightness);
|
|
1318
1318
|
else if (s.spiralType === "archimedean") {
|
|
1319
|
-
const G =
|
|
1320
|
-
x = G * w + s.startAngle,
|
|
1319
|
+
const G = E * 0.5 * s.tightness;
|
|
1320
|
+
x = G * w + s.startAngle, I = this.calculateArchimedeanRadius(G, t, v, s.tightness);
|
|
1321
1321
|
} else {
|
|
1322
|
-
const G =
|
|
1323
|
-
x = G * w + s.startAngle,
|
|
1322
|
+
const G = E * 0.3 * s.tightness;
|
|
1323
|
+
x = G * w + s.startAngle, I = this.calculateLogarithmicRadius(G, t, v, s.tightness);
|
|
1324
1324
|
}
|
|
1325
|
-
const
|
|
1326
|
-
let
|
|
1325
|
+
const M = m + Math.cos(x) * I, F = S + Math.sin(x) * I, U = I / v, _ = f > 0 ? 1 - U * f * 0.5 : 1, B = b ? this.random(g, p) : 1, j = _ * B, T = c * j, W = T * 1.5 / 2, H = T / 2, A = h + W, C = a - h - W, $ = h + H, D = r - h - H, z = Math.max(A, Math.min(M, C)), P = Math.max($, Math.min(F, D));
|
|
1326
|
+
let L = 0;
|
|
1327
1327
|
if (d === "random") {
|
|
1328
|
-
const G = x * 180 / Math.PI % 360,
|
|
1329
|
-
|
|
1330
|
-
} else d === "tangent" && (
|
|
1331
|
-
const
|
|
1332
|
-
|
|
1333
|
-
id:
|
|
1334
|
-
x:
|
|
1328
|
+
const G = x * 180 / Math.PI % 360, Y = this.random(l, u);
|
|
1329
|
+
L = s.spiralType === "golden" ? Y : G * 0.1 + Y * 0.9;
|
|
1330
|
+
} else d === "tangent" && (L = this.calculateSpiralTangent(x, I, s));
|
|
1331
|
+
const k = t - E;
|
|
1332
|
+
n.push({
|
|
1333
|
+
id: E,
|
|
1334
|
+
x: z,
|
|
1335
1335
|
y: P,
|
|
1336
|
-
rotation:
|
|
1337
|
-
scale:
|
|
1338
|
-
baseSize:
|
|
1339
|
-
zIndex:
|
|
1336
|
+
rotation: L,
|
|
1337
|
+
scale: j,
|
|
1338
|
+
baseSize: T,
|
|
1339
|
+
zIndex: k
|
|
1340
1340
|
});
|
|
1341
1341
|
}
|
|
1342
|
-
return
|
|
1342
|
+
return n;
|
|
1343
1343
|
}
|
|
1344
1344
|
/**
|
|
1345
1345
|
* Calculate tangent angle for spiral curve at given position
|
|
1346
1346
|
* This aligns the image along the spiral's direction of travel
|
|
1347
1347
|
*/
|
|
1348
|
-
calculateSpiralTangent(t,
|
|
1349
|
-
let
|
|
1350
|
-
if (
|
|
1351
|
-
|
|
1352
|
-
else if (
|
|
1353
|
-
const r = 1 /
|
|
1354
|
-
|
|
1348
|
+
calculateSpiralTangent(t, i, e) {
|
|
1349
|
+
let n;
|
|
1350
|
+
if (e.spiralType === "golden")
|
|
1351
|
+
n = t + Math.PI / 2;
|
|
1352
|
+
else if (e.spiralType === "archimedean") {
|
|
1353
|
+
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1354
|
+
n = t + s;
|
|
1355
1355
|
} else {
|
|
1356
|
-
const r = 0.15 /
|
|
1357
|
-
|
|
1356
|
+
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1357
|
+
n = t + s;
|
|
1358
1358
|
}
|
|
1359
|
-
return
|
|
1359
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1360
1360
|
}
|
|
1361
1361
|
/**
|
|
1362
1362
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1363
1363
|
* Creates even distribution like sunflower seeds
|
|
1364
1364
|
*/
|
|
1365
|
-
calculateGoldenRadius(t,
|
|
1366
|
-
const r =
|
|
1367
|
-
return Math.min(r,
|
|
1365
|
+
calculateGoldenRadius(t, i, e, n) {
|
|
1366
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / n;
|
|
1367
|
+
return Math.min(r, e);
|
|
1368
1368
|
}
|
|
1369
1369
|
/**
|
|
1370
1370
|
* Calculate radius for Archimedean spiral
|
|
1371
1371
|
* r = a + b*θ (constant spacing between arms)
|
|
1372
1372
|
*/
|
|
1373
|
-
calculateArchimedeanRadius(t,
|
|
1374
|
-
const a =
|
|
1375
|
-
return t / a *
|
|
1373
|
+
calculateArchimedeanRadius(t, i, e, n) {
|
|
1374
|
+
const a = i * 0.5 * n;
|
|
1375
|
+
return t / a * e;
|
|
1376
1376
|
}
|
|
1377
1377
|
/**
|
|
1378
1378
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1379
1379
|
* r = a * e^(b*θ)
|
|
1380
1380
|
*/
|
|
1381
|
-
calculateLogarithmicRadius(t,
|
|
1382
|
-
const a =
|
|
1383
|
-
return s / c *
|
|
1381
|
+
calculateLogarithmicRadius(t, i, e, n) {
|
|
1382
|
+
const a = e * 0.05, r = 0.15 / n, s = a * Math.exp(r * t), h = i * 0.3 * n, c = a * Math.exp(r * h);
|
|
1383
|
+
return s / c * e;
|
|
1384
1384
|
}
|
|
1385
1385
|
/**
|
|
1386
1386
|
* Utility: Generate random number between min and max
|
|
1387
1387
|
*/
|
|
1388
|
-
random(t,
|
|
1389
|
-
return Math.random() * (
|
|
1388
|
+
random(t, i) {
|
|
1389
|
+
return Math.random() * (i - t) + t;
|
|
1390
1390
|
}
|
|
1391
1391
|
}
|
|
1392
1392
|
const pe = {
|
|
@@ -1397,9 +1397,9 @@ const pe = {
|
|
|
1397
1397
|
overlap: 0.3,
|
|
1398
1398
|
distribution: "gaussian"
|
|
1399
1399
|
};
|
|
1400
|
-
class
|
|
1401
|
-
constructor(t,
|
|
1402
|
-
this.config = t, this.imageConfig =
|
|
1400
|
+
class be {
|
|
1401
|
+
constructor(t, i = {}) {
|
|
1402
|
+
this.config = t, this.imageConfig = i;
|
|
1403
1403
|
}
|
|
1404
1404
|
/**
|
|
1405
1405
|
* Generate cluster layout positions for images
|
|
@@ -1408,8 +1408,8 @@ class ye {
|
|
|
1408
1408
|
* @param options - Optional overrides (includes fixedHeight)
|
|
1409
1409
|
* @returns Array of layout objects with position, rotation, scale
|
|
1410
1410
|
*/
|
|
1411
|
-
generate(t,
|
|
1412
|
-
const
|
|
1411
|
+
generate(t, i, e = {}) {
|
|
1412
|
+
const n = [], { width: a, height: r } = i, s = { ...pe, ...this.config.cluster }, h = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, b = g !== 1 || p !== 1, f = this.calculateClusterCount(
|
|
1413
1413
|
t,
|
|
1414
1414
|
s.clusterCount,
|
|
1415
1415
|
a,
|
|
@@ -1421,68 +1421,68 @@ class ye {
|
|
|
1421
1421
|
r,
|
|
1422
1422
|
h,
|
|
1423
1423
|
s
|
|
1424
|
-
),
|
|
1424
|
+
), S = new Array(f).fill(0);
|
|
1425
1425
|
for (let w = 0; w < t; w++)
|
|
1426
|
-
|
|
1426
|
+
S[w % f]++;
|
|
1427
1427
|
let v = 0;
|
|
1428
1428
|
for (let w = 0; w < f; w++) {
|
|
1429
|
-
const
|
|
1430
|
-
for (let
|
|
1431
|
-
let
|
|
1429
|
+
const E = m[w], x = S[w];
|
|
1430
|
+
for (let I = 0; I < x; I++) {
|
|
1431
|
+
let M, F;
|
|
1432
1432
|
if (s.distribution === "gaussian")
|
|
1433
|
-
|
|
1433
|
+
M = this.gaussianRandom() * E.spread, F = this.gaussianRandom() * E.spread;
|
|
1434
1434
|
else {
|
|
1435
|
-
const
|
|
1436
|
-
|
|
1435
|
+
const L = this.random(0, Math.PI * 2), k = this.random(0, E.spread);
|
|
1436
|
+
M = Math.cos(L) * k, F = Math.sin(L) * k;
|
|
1437
1437
|
}
|
|
1438
1438
|
const U = 1 + s.overlap * 0.5, _ = 1 + s.overlap * 0.3;
|
|
1439
|
-
|
|
1440
|
-
const
|
|
1441
|
-
let
|
|
1442
|
-
const
|
|
1443
|
-
|
|
1444
|
-
const
|
|
1445
|
-
|
|
1439
|
+
M /= U, F /= U;
|
|
1440
|
+
const B = b ? this.random(g, p) : 1, j = _ * B, T = c * j;
|
|
1441
|
+
let O = E.x + M, W = E.y + F;
|
|
1442
|
+
const A = T * 1.5 / 2, C = T / 2;
|
|
1443
|
+
O = Math.max(h + A, Math.min(O, a - h - A)), W = Math.max(h + C, Math.min(W, r - h - C));
|
|
1444
|
+
const $ = d === "random" ? this.random(l, u) : 0, z = Math.sqrt(M * M + F * F) / E.spread, P = Math.round((1 - z) * 50) + 1;
|
|
1445
|
+
n.push({
|
|
1446
1446
|
id: v,
|
|
1447
|
-
x:
|
|
1448
|
-
y:
|
|
1449
|
-
rotation:
|
|
1450
|
-
scale:
|
|
1451
|
-
baseSize:
|
|
1447
|
+
x: O,
|
|
1448
|
+
y: W,
|
|
1449
|
+
rotation: $,
|
|
1450
|
+
scale: j,
|
|
1451
|
+
baseSize: T,
|
|
1452
1452
|
zIndex: P
|
|
1453
1453
|
}), v++;
|
|
1454
1454
|
}
|
|
1455
1455
|
}
|
|
1456
|
-
return
|
|
1456
|
+
return n;
|
|
1457
1457
|
}
|
|
1458
1458
|
/**
|
|
1459
1459
|
* Calculate optimal number of clusters based on image count and container
|
|
1460
1460
|
*/
|
|
1461
|
-
calculateClusterCount(t,
|
|
1462
|
-
if (
|
|
1463
|
-
return Math.max(1, Math.min(
|
|
1461
|
+
calculateClusterCount(t, i, e, n, a) {
|
|
1462
|
+
if (i !== "auto")
|
|
1463
|
+
return Math.max(1, Math.min(i, t));
|
|
1464
1464
|
const s = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1465
|
-
|
|
1465
|
+
e / a * (n / a) * 0.6
|
|
1466
1466
|
);
|
|
1467
1467
|
return Math.max(1, Math.min(s, h, 10));
|
|
1468
1468
|
}
|
|
1469
1469
|
/**
|
|
1470
1470
|
* Generate cluster center positions with spacing constraints
|
|
1471
1471
|
*/
|
|
1472
|
-
generateClusterCenters(t,
|
|
1473
|
-
const r = [], h =
|
|
1472
|
+
generateClusterCenters(t, i, e, n, a) {
|
|
1473
|
+
const r = [], h = n + a.clusterSpread, c = i - n - a.clusterSpread, d = n + a.clusterSpread, l = e - n - a.clusterSpread;
|
|
1474
1474
|
for (let u = 0; u < t; u++) {
|
|
1475
1475
|
let g = null, p = -1;
|
|
1476
|
-
for (let
|
|
1476
|
+
for (let b = 0; b < 100; b++) {
|
|
1477
1477
|
const f = {
|
|
1478
1478
|
x: this.random(h, c),
|
|
1479
1479
|
y: this.random(d, l),
|
|
1480
1480
|
spread: this.calculateClusterSpread(a)
|
|
1481
1481
|
};
|
|
1482
1482
|
let m = 1 / 0;
|
|
1483
|
-
for (const
|
|
1484
|
-
const v = f.x -
|
|
1485
|
-
m = Math.min(m,
|
|
1483
|
+
for (const S of r) {
|
|
1484
|
+
const v = f.x - S.x, w = f.y - S.y, E = Math.sqrt(v * v + w * w);
|
|
1485
|
+
m = Math.min(m, E);
|
|
1486
1486
|
}
|
|
1487
1487
|
if ((r.length === 0 || m > p) && (g = f, p = m), m >= a.clusterSpacing)
|
|
1488
1488
|
break;
|
|
@@ -1502,22 +1502,22 @@ class ye {
|
|
|
1502
1502
|
* Using Box-Muller transform
|
|
1503
1503
|
*/
|
|
1504
1504
|
gaussianRandom() {
|
|
1505
|
-
let t = 0,
|
|
1505
|
+
let t = 0, i = 0;
|
|
1506
1506
|
for (; t === 0; ) t = Math.random();
|
|
1507
|
-
for (;
|
|
1508
|
-
const
|
|
1509
|
-
return Math.max(-3, Math.min(3,
|
|
1507
|
+
for (; i === 0; ) i = Math.random();
|
|
1508
|
+
const e = Math.sqrt(-2 * Math.log(t)) * Math.cos(2 * Math.PI * i);
|
|
1509
|
+
return Math.max(-3, Math.min(3, e)) / 3;
|
|
1510
1510
|
}
|
|
1511
1511
|
/**
|
|
1512
1512
|
* Utility: Generate random number between min and max
|
|
1513
1513
|
*/
|
|
1514
|
-
random(t,
|
|
1515
|
-
return Math.random() * (
|
|
1514
|
+
random(t, i) {
|
|
1515
|
+
return Math.random() * (i - t) + t;
|
|
1516
1516
|
}
|
|
1517
1517
|
}
|
|
1518
|
-
class
|
|
1519
|
-
constructor(t,
|
|
1520
|
-
this.config = t, this.imageConfig =
|
|
1518
|
+
class ye {
|
|
1519
|
+
constructor(t, i = {}) {
|
|
1520
|
+
this.config = t, this.imageConfig = i;
|
|
1521
1521
|
}
|
|
1522
1522
|
/**
|
|
1523
1523
|
* Generate wave layout positions for images
|
|
@@ -1526,33 +1526,33 @@ class be {
|
|
|
1526
1526
|
* @param options - Optional overrides
|
|
1527
1527
|
* @returns Array of layout objects with position, rotation, scale
|
|
1528
1528
|
*/
|
|
1529
|
-
generate(t,
|
|
1530
|
-
const
|
|
1529
|
+
generate(t, i, e = {}) {
|
|
1530
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, u = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, p = u !== 1 || g !== 1, b = e.fixedHeight ?? s, f = {
|
|
1531
1531
|
...Ht,
|
|
1532
1532
|
...this.config.wave
|
|
1533
|
-
}, { rows: m, amplitude:
|
|
1534
|
-
let
|
|
1535
|
-
for (let
|
|
1536
|
-
const
|
|
1537
|
-
let
|
|
1538
|
-
|
|
1539
|
-
for (let
|
|
1540
|
-
const P = x === 1 ? (U + _) / 2 : U +
|
|
1533
|
+
}, { rows: m, amplitude: S, frequency: v, phaseShift: w, synchronization: E } = f, x = Math.ceil(t / m), F = b * 1.5 / 2, U = h + F, _ = a - h - F, B = _ - U, j = x > 1 ? B / (x - 1) : 0, T = h + S + b / 2, O = r - h - S - b / 2, W = O - T, H = m > 1 ? W / (m - 1) : 0;
|
|
1534
|
+
let A = 0;
|
|
1535
|
+
for (let C = 0; C < m && A < t; C++) {
|
|
1536
|
+
const $ = m === 1 ? (T + O) / 2 : T + C * H;
|
|
1537
|
+
let D = 0;
|
|
1538
|
+
E === "offset" ? D = C * w : E === "alternating" && (D = C * Math.PI);
|
|
1539
|
+
for (let z = 0; z < x && A < t; z++) {
|
|
1540
|
+
const P = x === 1 ? (U + _) / 2 : U + z * j, L = this.calculateWaveY(P, a, S, v, D), k = P, G = $ + L, Y = p ? this.random(u, g) : 1, X = b * Y;
|
|
1541
1541
|
let J = 0;
|
|
1542
|
-
c === "tangent" ? J = this.calculateRotation(P, a,
|
|
1543
|
-
const K =
|
|
1544
|
-
|
|
1545
|
-
id:
|
|
1546
|
-
x: Math.max(
|
|
1547
|
-
y: Math.max(
|
|
1542
|
+
c === "tangent" ? J = this.calculateRotation(P, a, S, v, D) : c === "random" && (J = this.random(d, l));
|
|
1543
|
+
const K = X * 1.5 / 2, rt = X / 2, et = h + K, it = a - h - K, ct = h + rt, lt = r - h - rt;
|
|
1544
|
+
n.push({
|
|
1545
|
+
id: A,
|
|
1546
|
+
x: Math.max(et, Math.min(k, it)),
|
|
1547
|
+
y: Math.max(ct, Math.min(G, lt)),
|
|
1548
1548
|
rotation: J,
|
|
1549
|
-
scale:
|
|
1550
|
-
baseSize:
|
|
1551
|
-
zIndex:
|
|
1552
|
-
}),
|
|
1549
|
+
scale: Y,
|
|
1550
|
+
baseSize: X,
|
|
1551
|
+
zIndex: A + 1
|
|
1552
|
+
}), A++;
|
|
1553
1553
|
}
|
|
1554
1554
|
}
|
|
1555
|
-
return
|
|
1555
|
+
return n;
|
|
1556
1556
|
}
|
|
1557
1557
|
/**
|
|
1558
1558
|
* Calculate Y position displacement on wave curve
|
|
@@ -1563,9 +1563,9 @@ class be {
|
|
|
1563
1563
|
* @param phase - Phase offset
|
|
1564
1564
|
* @returns Y displacement from baseline
|
|
1565
1565
|
*/
|
|
1566
|
-
calculateWaveY(t,
|
|
1567
|
-
const r = t /
|
|
1568
|
-
return
|
|
1566
|
+
calculateWaveY(t, i, e, n, a) {
|
|
1567
|
+
const r = t / i;
|
|
1568
|
+
return e * Math.sin(n * r * 2 * Math.PI + a);
|
|
1569
1569
|
}
|
|
1570
1570
|
/**
|
|
1571
1571
|
* Calculate rotation based on wave tangent
|
|
@@ -1576,8 +1576,8 @@ class be {
|
|
|
1576
1576
|
* @param phase - Phase offset
|
|
1577
1577
|
* @returns Rotation angle in degrees
|
|
1578
1578
|
*/
|
|
1579
|
-
calculateRotation(t,
|
|
1580
|
-
const r = t /
|
|
1579
|
+
calculateRotation(t, i, e, n, a) {
|
|
1580
|
+
const r = t / i, s = e * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + a) / i;
|
|
1581
1581
|
return Math.atan(s) * (180 / Math.PI);
|
|
1582
1582
|
}
|
|
1583
1583
|
/**
|
|
@@ -1588,8 +1588,8 @@ class be {
|
|
|
1588
1588
|
* @param max - Maximum value
|
|
1589
1589
|
* @returns Random number in range
|
|
1590
1590
|
*/
|
|
1591
|
-
random(t,
|
|
1592
|
-
return Math.random() * (
|
|
1591
|
+
random(t, i) {
|
|
1592
|
+
return Math.random() * (i - t) + t;
|
|
1593
1593
|
}
|
|
1594
1594
|
}
|
|
1595
1595
|
class ve {
|
|
@@ -1609,9 +1609,9 @@ class ve {
|
|
|
1609
1609
|
case "spiral":
|
|
1610
1610
|
return new me(this.config, this.imageConfig);
|
|
1611
1611
|
case "cluster":
|
|
1612
|
-
return new ye(this.config, this.imageConfig);
|
|
1613
|
-
case "wave":
|
|
1614
1612
|
return new be(this.config, this.imageConfig);
|
|
1613
|
+
case "wave":
|
|
1614
|
+
return new ye(this.config, this.imageConfig);
|
|
1615
1615
|
default:
|
|
1616
1616
|
return new le(this.config, this.imageConfig);
|
|
1617
1617
|
}
|
|
@@ -1623,11 +1623,11 @@ class ve {
|
|
|
1623
1623
|
* @param options - Optional overrides for configuration (e.g. fixedHeight)
|
|
1624
1624
|
* @returns Array of layout objects with position, rotation, scale
|
|
1625
1625
|
*/
|
|
1626
|
-
generateLayout(t,
|
|
1627
|
-
const
|
|
1628
|
-
return
|
|
1626
|
+
generateLayout(t, i, e = {}) {
|
|
1627
|
+
const n = this.placementLayout.generate(t, i, e);
|
|
1628
|
+
return n.forEach((a) => {
|
|
1629
1629
|
this.layouts.set(a.id, a);
|
|
1630
|
-
}),
|
|
1630
|
+
}), n;
|
|
1631
1631
|
}
|
|
1632
1632
|
/**
|
|
1633
1633
|
* Get the original layout state for an image
|
|
@@ -1663,8 +1663,8 @@ class ve {
|
|
|
1663
1663
|
* Resolve breakpoint name based on viewport width
|
|
1664
1664
|
*/
|
|
1665
1665
|
resolveBreakpoint(t) {
|
|
1666
|
-
const
|
|
1667
|
-
return t <=
|
|
1666
|
+
const i = this.getBreakpoints();
|
|
1667
|
+
return t <= i.mobile.maxWidth ? "mobile" : t <= i.tablet.maxWidth ? "tablet" : "screen";
|
|
1668
1668
|
}
|
|
1669
1669
|
/**
|
|
1670
1670
|
* Resolve the effective base height based on image config and current viewport
|
|
@@ -1672,16 +1672,16 @@ class ve {
|
|
|
1672
1672
|
* @returns Resolved base height or undefined if should auto-calculate (adaptive mode)
|
|
1673
1673
|
*/
|
|
1674
1674
|
resolveBaseHeight(t) {
|
|
1675
|
-
const
|
|
1676
|
-
if (!
|
|
1675
|
+
const i = this.imageConfig.sizing;
|
|
1676
|
+
if (!i || i.mode === "adaptive")
|
|
1677
1677
|
return;
|
|
1678
|
-
const
|
|
1679
|
-
if (
|
|
1678
|
+
const e = i.height;
|
|
1679
|
+
if (e === void 0)
|
|
1680
1680
|
return;
|
|
1681
|
-
if (typeof
|
|
1682
|
-
return
|
|
1683
|
-
const
|
|
1684
|
-
return a === "mobile" ?
|
|
1681
|
+
if (typeof e == "number")
|
|
1682
|
+
return e;
|
|
1683
|
+
const n = e, a = this.resolveBreakpoint(t);
|
|
1684
|
+
return a === "mobile" ? n.mobile ?? n.tablet ?? n.screen : a === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1685
1685
|
}
|
|
1686
1686
|
/**
|
|
1687
1687
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1691,29 +1691,29 @@ class ve {
|
|
|
1691
1691
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1692
1692
|
* @returns Calculated sizing result with height
|
|
1693
1693
|
*/
|
|
1694
|
-
calculateAdaptiveSize(t,
|
|
1695
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1694
|
+
calculateAdaptiveSize(t, i, e, n) {
|
|
1695
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1696
1696
|
if (r !== void 0)
|
|
1697
1697
|
return { height: r };
|
|
1698
|
-
const s = a?.minSize ?? 50, h = a?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, d = this.config.densityFactor ?? 1, { width: l, height: u } = t,
|
|
1699
|
-
let m = Math.sqrt(
|
|
1700
|
-
m *= d, m = Math.min(m,
|
|
1701
|
-
let
|
|
1702
|
-
if (
|
|
1698
|
+
const s = a?.minSize ?? 50, h = a?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, d = this.config.densityFactor ?? 1, { width: l, height: u } = t, b = l * u * c / i;
|
|
1699
|
+
let m = Math.sqrt(b / 1.4);
|
|
1700
|
+
m *= d, m = Math.min(m, e);
|
|
1701
|
+
let S = this.clamp(m, s, h);
|
|
1702
|
+
if (S === s && m < s) {
|
|
1703
1703
|
const v = Math.max(s * 0.05, 20);
|
|
1704
|
-
|
|
1704
|
+
S = Math.max(v, m);
|
|
1705
1705
|
}
|
|
1706
|
-
return { height:
|
|
1706
|
+
return { height: S };
|
|
1707
1707
|
}
|
|
1708
1708
|
/**
|
|
1709
1709
|
* Utility: Clamp a value between min and max
|
|
1710
1710
|
*/
|
|
1711
|
-
clamp(t,
|
|
1712
|
-
return Math.max(
|
|
1711
|
+
clamp(t, i, e) {
|
|
1712
|
+
return Math.max(i, Math.min(e, t));
|
|
1713
1713
|
}
|
|
1714
1714
|
}
|
|
1715
|
-
var
|
|
1716
|
-
const
|
|
1715
|
+
var R = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(R || {});
|
|
1716
|
+
const Tt = {
|
|
1717
1717
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1718
1718
|
circle: "circle(50%)",
|
|
1719
1719
|
square: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
|
@@ -1760,105 +1760,105 @@ const At = {
|
|
|
1760
1760
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
1761
1761
|
}
|
|
1762
1762
|
};
|
|
1763
|
-
function xe(
|
|
1764
|
-
if (
|
|
1765
|
-
return
|
|
1763
|
+
function xe(o) {
|
|
1764
|
+
if (o)
|
|
1765
|
+
return o in Tt ? Tt[o] : o;
|
|
1766
1766
|
}
|
|
1767
|
-
function
|
|
1768
|
-
const
|
|
1769
|
-
if (!
|
|
1770
|
-
const
|
|
1771
|
-
if (
|
|
1772
|
-
return `circle(${Math.round(50 *
|
|
1773
|
-
const a =
|
|
1774
|
-
return `polygon(${
|
|
1775
|
-
const
|
|
1776
|
-
return `${
|
|
1767
|
+
function Se(o, t, i) {
|
|
1768
|
+
const e = we[o];
|
|
1769
|
+
if (!e) return "";
|
|
1770
|
+
const n = t / e.refHeight;
|
|
1771
|
+
if (o === "circle")
|
|
1772
|
+
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
1773
|
+
const a = e.refHeight * n, r = a / 2, s = a / 2, h = (i ?? a) / 2, c = t / 2, d = h - r, l = c - s;
|
|
1774
|
+
return `polygon(${e.points.map(([g, p]) => {
|
|
1775
|
+
const b = Math.round((g * n + d) * 100) / 100, f = Math.round((p * n + l) * 100) / 100;
|
|
1776
|
+
return `${b}px ${f}px`;
|
|
1777
1777
|
}).join(", ")})`;
|
|
1778
1778
|
}
|
|
1779
|
-
function
|
|
1780
|
-
return
|
|
1779
|
+
function Ee(o) {
|
|
1780
|
+
return o in ft;
|
|
1781
1781
|
}
|
|
1782
|
-
function
|
|
1783
|
-
return
|
|
1782
|
+
function Re(o) {
|
|
1783
|
+
return o ? Ee(o) ? ft[o] : o : ft.md;
|
|
1784
1784
|
}
|
|
1785
|
-
function
|
|
1786
|
-
if (!
|
|
1785
|
+
function Ie(o) {
|
|
1786
|
+
if (!o) return "";
|
|
1787
1787
|
const t = [];
|
|
1788
|
-
if (
|
|
1789
|
-
if (typeof
|
|
1790
|
-
t.push(`drop-shadow(${
|
|
1788
|
+
if (o.grayscale !== void 0 && t.push(`grayscale(${o.grayscale})`), o.blur !== void 0 && t.push(`blur(${o.blur}px)`), o.brightness !== void 0 && t.push(`brightness(${o.brightness})`), o.contrast !== void 0 && t.push(`contrast(${o.contrast})`), o.saturate !== void 0 && t.push(`saturate(${o.saturate})`), o.opacity !== void 0 && t.push(`opacity(${o.opacity})`), o.sepia !== void 0 && t.push(`sepia(${o.sepia})`), o.hueRotate !== void 0 && t.push(`hue-rotate(${o.hueRotate}deg)`), o.invert !== void 0 && t.push(`invert(${o.invert})`), o.dropShadow !== void 0)
|
|
1789
|
+
if (typeof o.dropShadow == "string")
|
|
1790
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
1791
1791
|
else {
|
|
1792
|
-
const
|
|
1793
|
-
t.push(`drop-shadow(${
|
|
1792
|
+
const i = o.dropShadow;
|
|
1793
|
+
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
1794
1794
|
}
|
|
1795
1795
|
return t.join(" ");
|
|
1796
1796
|
}
|
|
1797
|
-
function Q(
|
|
1798
|
-
if (!
|
|
1797
|
+
function Q(o) {
|
|
1798
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
1799
1799
|
return "none";
|
|
1800
|
-
const t =
|
|
1801
|
-
return `${t}px ${
|
|
1800
|
+
const t = o.width ?? 0, i = o.style ?? "solid", e = o.color ?? "#000000";
|
|
1801
|
+
return `${t}px ${i} ${e}`;
|
|
1802
1802
|
}
|
|
1803
|
-
function
|
|
1804
|
-
if (!
|
|
1805
|
-
const
|
|
1806
|
-
if (
|
|
1807
|
-
const s =
|
|
1808
|
-
|
|
1809
|
-
} else
|
|
1810
|
-
if (
|
|
1811
|
-
const s =
|
|
1812
|
-
|
|
1813
|
-
} else
|
|
1814
|
-
|
|
1815
|
-
const r =
|
|
1816
|
-
if (
|
|
1817
|
-
const s =
|
|
1818
|
-
|
|
1819
|
-
}
|
|
1820
|
-
if (
|
|
1803
|
+
function tt(o, t, i) {
|
|
1804
|
+
if (!o) return {};
|
|
1805
|
+
const e = {};
|
|
1806
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
1807
|
+
const s = o.border?.radius ?? 0;
|
|
1808
|
+
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), o.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${o.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), o.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), o.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
1809
|
+
} else o.border?.radius !== void 0 && (e.borderRadius = `${o.border.radius}px`);
|
|
1810
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
1811
|
+
const s = o.border || {}, h = { ...s, ...o.borderTop }, c = { ...s, ...o.borderRight }, d = { ...s, ...o.borderBottom }, l = { ...s, ...o.borderLeft };
|
|
1812
|
+
e.borderTop = Q(h), e.borderRight = Q(c), e.borderBottom = Q(d), e.borderLeft = Q(l);
|
|
1813
|
+
} else o.border && (e.border = Q(o.border));
|
|
1814
|
+
o.shadow !== void 0 && (e.boxShadow = Re(o.shadow));
|
|
1815
|
+
const r = Ie(o.filter);
|
|
1816
|
+
if (e.filter = r || "none", o.opacity !== void 0 && (e.opacity = String(o.opacity)), o.cursor !== void 0 && (e.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1817
|
+
const s = o.outline.width ?? 0, h = o.outline.style ?? "solid", c = o.outline.color ?? "#000000";
|
|
1818
|
+
e.outline = `${s}px ${h} ${c}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
1819
|
+
}
|
|
1820
|
+
if (o.objectFit !== void 0 && (e.objectFit = o.objectFit), o.aspectRatio !== void 0 && (e.aspectRatio = o.aspectRatio), o.clipPath !== void 0) {
|
|
1821
1821
|
let s;
|
|
1822
|
-
const h = typeof
|
|
1822
|
+
const h = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, c = h ? o.clipPath : void 0;
|
|
1823
1823
|
if (c?.mode === "height-relative" && t)
|
|
1824
|
-
s =
|
|
1824
|
+
s = Se(c.shape, t, i);
|
|
1825
1825
|
else {
|
|
1826
|
-
const d = h && c ? c.shape :
|
|
1826
|
+
const d = h && c ? c.shape : o.clipPath;
|
|
1827
1827
|
s = xe(d);
|
|
1828
1828
|
}
|
|
1829
|
-
s && (s === "none" ?
|
|
1829
|
+
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
1830
1830
|
}
|
|
1831
|
-
return
|
|
1831
|
+
return e;
|
|
1832
1832
|
}
|
|
1833
|
-
function
|
|
1834
|
-
t.borderRadius !== void 0 && (
|
|
1833
|
+
function Te(o, t) {
|
|
1834
|
+
t.borderRadius !== void 0 && (o.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (o.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (o.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (o.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (o.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (o.style.border = t.border), t.borderTop !== void 0 && (o.style.borderTop = t.borderTop), t.borderRight !== void 0 && (o.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (o.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (o.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (o.style.boxShadow = t.boxShadow), t.filter !== void 0 && (o.style.filter = t.filter), t.opacity !== void 0 && (o.style.opacity = t.opacity), t.cursor !== void 0 && (o.style.cursor = t.cursor), t.outline !== void 0 && (o.style.outline = t.outline), t.outlineOffset !== void 0 && (o.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (o.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (o.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (o.style.clipPath = t.clipPath), t.overflow !== void 0 && (o.style.overflow = t.overflow);
|
|
1835
1835
|
}
|
|
1836
|
-
function
|
|
1837
|
-
const
|
|
1838
|
-
|
|
1836
|
+
function gt(o, t, i, e) {
|
|
1837
|
+
const n = tt(t, i, e);
|
|
1838
|
+
Te(o, n);
|
|
1839
1839
|
}
|
|
1840
|
-
function
|
|
1841
|
-
return
|
|
1840
|
+
function zt(o) {
|
|
1841
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
1842
1842
|
}
|
|
1843
|
-
function nt(
|
|
1844
|
-
const
|
|
1845
|
-
|
|
1846
|
-
|
|
1843
|
+
function nt(o, t) {
|
|
1844
|
+
const i = zt(t);
|
|
1845
|
+
i && i.split(" ").forEach((e) => {
|
|
1846
|
+
e.trim() && o.classList.add(e.trim());
|
|
1847
1847
|
});
|
|
1848
1848
|
}
|
|
1849
|
-
function
|
|
1850
|
-
const
|
|
1851
|
-
|
|
1852
|
-
|
|
1849
|
+
function mt(o, t) {
|
|
1850
|
+
const i = zt(t);
|
|
1851
|
+
i && i.split(" ").forEach((e) => {
|
|
1852
|
+
e.trim() && o.classList.remove(e.trim());
|
|
1853
1853
|
});
|
|
1854
1854
|
}
|
|
1855
|
-
const
|
|
1855
|
+
const Ct = {
|
|
1856
1856
|
UNFOCUSING: 999,
|
|
1857
1857
|
FOCUSING: 1e3
|
|
1858
1858
|
};
|
|
1859
|
-
class
|
|
1860
|
-
constructor(t,
|
|
1861
|
-
this.state =
|
|
1859
|
+
class Ce {
|
|
1860
|
+
constructor(t, i, e) {
|
|
1861
|
+
this.state = R.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
1862
1862
|
}
|
|
1863
1863
|
/**
|
|
1864
1864
|
* Get current state machine state
|
|
@@ -1870,7 +1870,7 @@ class Te {
|
|
|
1870
1870
|
* Check if any animation is in progress
|
|
1871
1871
|
*/
|
|
1872
1872
|
isAnimating() {
|
|
1873
|
-
return this.state !==
|
|
1873
|
+
return this.state !== R.IDLE && this.state !== R.FOCUSED;
|
|
1874
1874
|
}
|
|
1875
1875
|
/**
|
|
1876
1876
|
* Normalize scalePercent value
|
|
@@ -1882,18 +1882,18 @@ class Te {
|
|
|
1882
1882
|
* Calculate target dimensions for focused image
|
|
1883
1883
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1884
1884
|
*/
|
|
1885
|
-
calculateFocusDimensions(t,
|
|
1886
|
-
const
|
|
1885
|
+
calculateFocusDimensions(t, i, e) {
|
|
1886
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), a = e.height * n, r = t / i;
|
|
1887
1887
|
let s = a, h = s * r;
|
|
1888
|
-
const c =
|
|
1888
|
+
const c = e.width * n;
|
|
1889
1889
|
return h > c && (h = c, s = h / r), { width: h, height: s };
|
|
1890
1890
|
}
|
|
1891
1891
|
/**
|
|
1892
1892
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
1893
1893
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1894
1894
|
*/
|
|
1895
|
-
calculateFocusTransform(t,
|
|
1896
|
-
const
|
|
1895
|
+
calculateFocusTransform(t, i) {
|
|
1896
|
+
const e = t.width / 2, n = t.height / 2, a = e - i.x, r = n - i.y;
|
|
1897
1897
|
return {
|
|
1898
1898
|
x: a,
|
|
1899
1899
|
y: r,
|
|
@@ -1906,24 +1906,24 @@ class Te {
|
|
|
1906
1906
|
* Build transform string for dimension-based zoom (no scale in transform)
|
|
1907
1907
|
*/
|
|
1908
1908
|
buildDimensionZoomTransform(t) {
|
|
1909
|
-
const
|
|
1909
|
+
const i = ["translate(-50%, -50%)"];
|
|
1910
1910
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
1911
|
-
const
|
|
1912
|
-
|
|
1911
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
1912
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
1913
1913
|
}
|
|
1914
|
-
return t.rotation !== void 0 &&
|
|
1914
|
+
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
1915
1915
|
}
|
|
1916
1916
|
/**
|
|
1917
1917
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1918
1918
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1919
1919
|
*/
|
|
1920
|
-
animateWithDimensions(t,
|
|
1921
|
-
const c = this.buildDimensionZoomTransform(
|
|
1920
|
+
animateWithDimensions(t, i, e, n, a, r, s, h) {
|
|
1921
|
+
const c = this.buildDimensionZoomTransform(i), d = this.buildDimensionZoomTransform(e);
|
|
1922
1922
|
return t.style.transition = "none", t.animate(
|
|
1923
1923
|
[
|
|
1924
1924
|
{
|
|
1925
1925
|
transform: c,
|
|
1926
|
-
width: `${
|
|
1926
|
+
width: `${n}px`,
|
|
1927
1927
|
height: `${a}px`
|
|
1928
1928
|
},
|
|
1929
1929
|
{
|
|
@@ -1941,28 +1941,34 @@ class Te {
|
|
|
1941
1941
|
}
|
|
1942
1942
|
/**
|
|
1943
1943
|
* Apply focused styling to an element
|
|
1944
|
-
* Applies
|
|
1944
|
+
* Applies all focused styling properties, classes, and z-index
|
|
1945
1945
|
*/
|
|
1946
|
-
applyFocusedStyling(t,
|
|
1947
|
-
t.style.zIndex = String(
|
|
1946
|
+
applyFocusedStyling(t, i) {
|
|
1947
|
+
if (t.style.zIndex = String(i), t.classList.add("fbn-ic-focused"), nt(t, this.focusedClassName), this.styling?.focused) {
|
|
1948
|
+
const e = tt(this.styling.focused, t.offsetHeight, t.offsetWidth);
|
|
1949
|
+
e.borderRadius !== void 0 && (t.style.borderRadius = e.borderRadius), e.borderTopLeftRadius !== void 0 && (t.style.borderTopLeftRadius = e.borderTopLeftRadius), e.borderTopRightRadius !== void 0 && (t.style.borderTopRightRadius = e.borderTopRightRadius), e.borderBottomRightRadius !== void 0 && (t.style.borderBottomRightRadius = e.borderBottomRightRadius), e.borderBottomLeftRadius !== void 0 && (t.style.borderBottomLeftRadius = e.borderBottomLeftRadius), e.border !== void 0 && (t.style.border = e.border), e.borderTop !== void 0 && (t.style.borderTop = e.borderTop), e.borderRight !== void 0 && (t.style.borderRight = e.borderRight), e.borderBottom !== void 0 && (t.style.borderBottom = e.borderBottom), e.borderLeft !== void 0 && (t.style.borderLeft = e.borderLeft), e.boxShadow !== void 0 && (t.style.boxShadow = e.boxShadow), e.filter !== void 0 && (t.style.filter = e.filter), e.opacity !== void 0 && (t.style.opacity = e.opacity), e.cursor !== void 0 && (t.style.cursor = e.cursor), e.outline !== void 0 && (t.style.outline = e.outline), e.outlineOffset !== void 0 && (t.style.outlineOffset = e.outlineOffset), e.objectFit !== void 0 && (t.style.objectFit = e.objectFit), e.aspectRatio !== void 0 && (t.style.aspectRatio = e.aspectRatio);
|
|
1950
|
+
}
|
|
1948
1951
|
}
|
|
1949
1952
|
/**
|
|
1950
1953
|
* Remove focused styling from an element
|
|
1951
|
-
*
|
|
1954
|
+
* Restores default styling properties, removes classes, and resets z-index
|
|
1952
1955
|
*/
|
|
1953
|
-
removeFocusedStyling(t,
|
|
1954
|
-
t.style.zIndex =
|
|
1956
|
+
removeFocusedStyling(t, i) {
|
|
1957
|
+
if (t.style.zIndex = i, t.classList.remove("fbn-ic-focused"), mt(t, this.focusedClassName), this.styling?.default) {
|
|
1958
|
+
const e = tt(this.styling.default, t.offsetHeight, t.offsetWidth);
|
|
1959
|
+
e.borderRadius !== void 0 && (t.style.borderRadius = e.borderRadius), e.borderTopLeftRadius !== void 0 && (t.style.borderTopLeftRadius = e.borderTopLeftRadius), e.borderTopRightRadius !== void 0 && (t.style.borderTopRightRadius = e.borderTopRightRadius), e.borderBottomRightRadius !== void 0 && (t.style.borderBottomRightRadius = e.borderBottomRightRadius), e.borderBottomLeftRadius !== void 0 && (t.style.borderBottomLeftRadius = e.borderBottomLeftRadius), e.border !== void 0 && (t.style.border = e.border), e.borderTop !== void 0 && (t.style.borderTop = e.borderTop), e.borderRight !== void 0 && (t.style.borderRight = e.borderRight), e.borderBottom !== void 0 && (t.style.borderBottom = e.borderBottom), e.borderLeft !== void 0 && (t.style.borderLeft = e.borderLeft), e.boxShadow !== void 0 && (t.style.boxShadow = e.boxShadow), e.filter !== void 0 && (t.style.filter = e.filter), e.opacity !== void 0 && (t.style.opacity = e.opacity), e.cursor !== void 0 && (t.style.cursor = e.cursor), e.outline !== void 0 && (t.style.outline = e.outline), e.outlineOffset !== void 0 && (t.style.outlineOffset = e.outlineOffset), e.objectFit !== void 0 && (t.style.objectFit = e.objectFit), e.aspectRatio !== void 0 && (t.style.aspectRatio = e.aspectRatio);
|
|
1960
|
+
}
|
|
1955
1961
|
}
|
|
1956
1962
|
/**
|
|
1957
1963
|
* Continuously update clip-path during animation based on current element dimensions
|
|
1958
1964
|
* This ensures clip-path changes smoothly as width/height animate
|
|
1959
1965
|
*/
|
|
1960
|
-
startClipPathAnimation(t,
|
|
1961
|
-
let
|
|
1962
|
-
|
|
1966
|
+
startClipPathAnimation(t, i, e) {
|
|
1967
|
+
let n = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
1968
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (n = { ...n, clipPath: void 0 });
|
|
1963
1969
|
const a = () => {
|
|
1964
|
-
const r = t.offsetHeight, s = t.offsetWidth, h =
|
|
1965
|
-
h.clipPath !== void 0 ? t.style.clipPath = h.clipPath : t.style.clipPath = "unset", h.overflow !== void 0 && (t.style.overflow = h.overflow),
|
|
1970
|
+
const r = t.offsetHeight, s = t.offsetWidth, h = tt(n, r, s);
|
|
1971
|
+
h.clipPath !== void 0 ? t.style.clipPath = h.clipPath : t.style.clipPath = "unset", h.overflow !== void 0 && (t.style.overflow = h.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
1966
1972
|
};
|
|
1967
1973
|
requestAnimationFrame(a);
|
|
1968
1974
|
}
|
|
@@ -1972,18 +1978,18 @@ class Te {
|
|
|
1972
1978
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1973
1979
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1974
1980
|
*/
|
|
1975
|
-
startFocusAnimation(t,
|
|
1976
|
-
const r = t.style.zIndex || "", s = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(s, h,
|
|
1981
|
+
startFocusAnimation(t, i, e, n, a) {
|
|
1982
|
+
const r = t.style.zIndex || "", s = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(s, h, i), d = this.calculateFocusTransform(i, e);
|
|
1977
1983
|
this.animationEngine.cancelAllAnimations(t);
|
|
1978
1984
|
const l = this.config.animationDuration ?? 600;
|
|
1979
|
-
this.applyFocusedStyling(t,
|
|
1980
|
-
const u =
|
|
1985
|
+
this.applyFocusedStyling(t, Ct.FOCUSING);
|
|
1986
|
+
const u = n ?? {
|
|
1981
1987
|
x: 0,
|
|
1982
1988
|
y: 0,
|
|
1983
|
-
rotation:
|
|
1989
|
+
rotation: e.rotation,
|
|
1984
1990
|
scale: 1
|
|
1985
1991
|
// No scale - using dimensions
|
|
1986
|
-
}, g = a?.width ?? s, p = a?.height ?? h,
|
|
1992
|
+
}, g = a?.width ?? s, p = a?.height ?? h, b = this.animateWithDimensions(
|
|
1987
1993
|
t,
|
|
1988
1994
|
u,
|
|
1989
1995
|
d,
|
|
@@ -1995,7 +2001,7 @@ class Te {
|
|
|
1995
2001
|
), f = {
|
|
1996
2002
|
id: `focus-${Date.now()}`,
|
|
1997
2003
|
element: t,
|
|
1998
|
-
animation:
|
|
2004
|
+
animation: b,
|
|
1999
2005
|
fromState: u,
|
|
2000
2006
|
toState: d,
|
|
2001
2007
|
startTime: performance.now(),
|
|
@@ -2003,7 +2009,7 @@ class Te {
|
|
|
2003
2009
|
};
|
|
2004
2010
|
return this.focusData = {
|
|
2005
2011
|
element: t,
|
|
2006
|
-
originalState:
|
|
2012
|
+
originalState: e,
|
|
2007
2013
|
focusTransform: d,
|
|
2008
2014
|
originalZIndex: r,
|
|
2009
2015
|
originalWidth: s,
|
|
@@ -2012,7 +2018,7 @@ class Te {
|
|
|
2012
2018
|
focusHeight: c.height
|
|
2013
2019
|
}, this.startClipPathAnimation(t, f, !0), {
|
|
2014
2020
|
element: t,
|
|
2015
|
-
originalState:
|
|
2021
|
+
originalState: e,
|
|
2016
2022
|
animationHandle: f,
|
|
2017
2023
|
direction: "in",
|
|
2018
2024
|
originalWidth: s,
|
|
@@ -2024,14 +2030,14 @@ class Te {
|
|
|
2024
2030
|
* Animates back to original dimensions for consistent behavior
|
|
2025
2031
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2026
2032
|
*/
|
|
2027
|
-
startUnfocusAnimation(t,
|
|
2028
|
-
t.style.zIndex = String(
|
|
2033
|
+
startUnfocusAnimation(t, i, e, n) {
|
|
2034
|
+
t.style.zIndex = String(Ct.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2029
2035
|
const a = this.config.animationDuration ?? 600;
|
|
2030
|
-
t.classList.remove("fbn-ic-focused"),
|
|
2031
|
-
const r =
|
|
2036
|
+
t.classList.remove("fbn-ic-focused"), mt(t, this.focusedClassName);
|
|
2037
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, h = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, c = {
|
|
2032
2038
|
x: 0,
|
|
2033
2039
|
y: 0,
|
|
2034
|
-
rotation:
|
|
2040
|
+
rotation: i.rotation,
|
|
2035
2041
|
scale: 1
|
|
2036
2042
|
// No scale - using dimensions
|
|
2037
2043
|
}, d = this.focusData?.originalWidth ?? t.offsetWidth, l = this.focusData?.originalHeight ?? t.offsetHeight, u = this.animateWithDimensions(
|
|
@@ -2054,7 +2060,7 @@ class Te {
|
|
|
2054
2060
|
};
|
|
2055
2061
|
return this.startClipPathAnimation(t, g, !1), {
|
|
2056
2062
|
element: t,
|
|
2057
|
-
originalState:
|
|
2063
|
+
originalState: i,
|
|
2058
2064
|
animationHandle: g,
|
|
2059
2065
|
direction: "out",
|
|
2060
2066
|
originalWidth: d,
|
|
@@ -2076,10 +2082,10 @@ class Te {
|
|
|
2076
2082
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2077
2083
|
*/
|
|
2078
2084
|
captureMidAnimationState(t) {
|
|
2079
|
-
const
|
|
2080
|
-
return t.style.width = `${
|
|
2085
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth, a = t.offsetHeight, r = e.e + n * 0.5, s = e.f + a * 0.5, h = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2086
|
+
return t.style.width = `${n}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${h}deg)`, t.style.transition = "none", {
|
|
2081
2087
|
transform: { x: r, y: s, rotation: h, scale: 1 },
|
|
2082
|
-
dimensions: { width:
|
|
2088
|
+
dimensions: { width: n, height: a }
|
|
2083
2089
|
};
|
|
2084
2090
|
}
|
|
2085
2091
|
/**
|
|
@@ -2094,63 +2100,63 @@ class Te {
|
|
|
2094
2100
|
/**
|
|
2095
2101
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2096
2102
|
*/
|
|
2097
|
-
resetElementInstantly(t,
|
|
2103
|
+
resetElementInstantly(t, i, e, n, a) {
|
|
2098
2104
|
this.animationEngine.cancelAllAnimations(t);
|
|
2099
2105
|
const r = ["translate(-50%, -50%)"];
|
|
2100
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${
|
|
2106
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && a !== void 0 && (t.style.width = `${n}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2101
2107
|
}
|
|
2102
2108
|
/**
|
|
2103
2109
|
* Focus (zoom) an image to center of container
|
|
2104
2110
|
* Implements cross-animation when swapping focus
|
|
2105
2111
|
*/
|
|
2106
|
-
async focusImage(t,
|
|
2107
|
-
if (this.currentFocus === t && this.state ===
|
|
2112
|
+
async focusImage(t, i, e) {
|
|
2113
|
+
if (this.currentFocus === t && this.state === R.FOCUSED)
|
|
2108
2114
|
return this.unfocusImage();
|
|
2109
|
-
if (this.incoming?.element === t && this.state ===
|
|
2115
|
+
if (this.incoming?.element === t && this.state === R.FOCUSING) {
|
|
2110
2116
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2111
2117
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2112
2118
|
t,
|
|
2113
2119
|
this.incoming.originalState,
|
|
2114
2120
|
a,
|
|
2115
2121
|
r
|
|
2116
|
-
), this.incoming = null, this.state =
|
|
2122
|
+
), this.incoming = null, this.state = R.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 = R.IDLE;
|
|
2117
2123
|
return;
|
|
2118
2124
|
}
|
|
2119
|
-
const
|
|
2125
|
+
const n = ++this.focusGeneration;
|
|
2120
2126
|
switch (this.state) {
|
|
2121
|
-
case
|
|
2122
|
-
if (this.state =
|
|
2123
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2127
|
+
case R.IDLE:
|
|
2128
|
+
if (this.state = R.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2129
|
+
this.currentFocus = t, this.incoming = null, this.state = R.FOCUSED;
|
|
2124
2130
|
break;
|
|
2125
|
-
case
|
|
2126
|
-
if (this.state =
|
|
2131
|
+
case R.FOCUSED:
|
|
2132
|
+
if (this.state = R.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2127
2133
|
this.currentFocus,
|
|
2128
2134
|
this.focusData.originalState
|
|
2129
|
-
)), this.incoming = this.startFocusAnimation(t,
|
|
2135
|
+
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2130
2136
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2131
2137
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2132
|
-
]), this.focusGeneration !==
|
|
2138
|
+
]), this.focusGeneration !== n)
|
|
2133
2139
|
return;
|
|
2134
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2140
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = R.FOCUSED;
|
|
2135
2141
|
break;
|
|
2136
|
-
case
|
|
2142
|
+
case R.FOCUSING:
|
|
2137
2143
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2138
2144
|
this.incoming.element,
|
|
2139
2145
|
this.incoming.originalState,
|
|
2140
2146
|
this.focusData?.originalZIndex || "",
|
|
2141
2147
|
this.focusData?.originalWidth,
|
|
2142
2148
|
this.focusData?.originalHeight
|
|
2143
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t,
|
|
2144
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2149
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2150
|
+
this.currentFocus = t, this.incoming = null, this.state = R.FOCUSED;
|
|
2145
2151
|
break;
|
|
2146
|
-
case
|
|
2147
|
-
if (this.state =
|
|
2152
|
+
case R.UNFOCUSING:
|
|
2153
|
+
if (this.state = R.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2148
2154
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2149
2155
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2150
|
-
]), this.focusGeneration !==
|
|
2151
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2156
|
+
]), this.focusGeneration !== n) return;
|
|
2157
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = R.FOCUSED;
|
|
2152
2158
|
break;
|
|
2153
|
-
case
|
|
2159
|
+
case R.CROSS_ANIMATING:
|
|
2154
2160
|
if (this.incoming?.element === t)
|
|
2155
2161
|
return;
|
|
2156
2162
|
if (this.outgoing?.element === t) {
|
|
@@ -2165,11 +2171,11 @@ class Te {
|
|
|
2165
2171
|
);
|
|
2166
2172
|
} else
|
|
2167
2173
|
this.outgoing = null;
|
|
2168
|
-
if (this.incoming = this.startFocusAnimation(t,
|
|
2174
|
+
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2169
2175
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2170
2176
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2171
|
-
]), this.focusGeneration !==
|
|
2172
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2177
|
+
]), this.focusGeneration !== n) return;
|
|
2178
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = R.FOCUSED;
|
|
2173
2179
|
return;
|
|
2174
2180
|
}
|
|
2175
2181
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2187,11 +2193,11 @@ class Te {
|
|
|
2187
2193
|
r
|
|
2188
2194
|
);
|
|
2189
2195
|
}
|
|
2190
|
-
if (this.incoming = this.startFocusAnimation(t,
|
|
2196
|
+
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2191
2197
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2192
2198
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2193
|
-
]), this.focusGeneration !==
|
|
2194
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2199
|
+
]), this.focusGeneration !== n) return;
|
|
2200
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = R.FOCUSED;
|
|
2195
2201
|
break;
|
|
2196
2202
|
}
|
|
2197
2203
|
}
|
|
@@ -2199,23 +2205,23 @@ class Te {
|
|
|
2199
2205
|
* Unfocus current image, returning it to original position
|
|
2200
2206
|
*/
|
|
2201
2207
|
async unfocusImage() {
|
|
2202
|
-
if (this.state ===
|
|
2208
|
+
if (this.state === R.UNFOCUSING)
|
|
2203
2209
|
return;
|
|
2204
2210
|
const t = ++this.focusGeneration;
|
|
2205
2211
|
if (!this.currentFocus || !this.focusData) {
|
|
2206
|
-
if (this.incoming && this.state ===
|
|
2212
|
+
if (this.incoming && this.state === R.FOCUSING) {
|
|
2207
2213
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2208
2214
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2209
2215
|
this.incoming.element,
|
|
2210
2216
|
this.incoming.originalState,
|
|
2211
2217
|
a,
|
|
2212
2218
|
r
|
|
2213
|
-
), this.incoming = null, this.state =
|
|
2214
|
-
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2219
|
+
), this.incoming = null, this.state = R.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2220
|
+
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = R.IDLE;
|
|
2215
2221
|
}
|
|
2216
2222
|
return;
|
|
2217
2223
|
}
|
|
2218
|
-
if (this.state ===
|
|
2224
|
+
if (this.state === R.CROSS_ANIMATING && this.incoming) {
|
|
2219
2225
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2220
2226
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2221
2227
|
const s = this.startUnfocusAnimation(
|
|
@@ -2228,18 +2234,18 @@ class Te {
|
|
|
2228
2234
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2229
2235
|
this.waitForAnimation(s.animationHandle)
|
|
2230
2236
|
]), this.focusGeneration !== t) return;
|
|
2231
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(s.element, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state =
|
|
2237
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(s.element, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = R.IDLE;
|
|
2232
2238
|
return;
|
|
2233
2239
|
}
|
|
2234
|
-
this.state =
|
|
2235
|
-
const
|
|
2236
|
-
this.outgoing = this.startUnfocusAnimation(
|
|
2240
|
+
this.state = R.UNFOCUSING;
|
|
2241
|
+
const i = this.currentFocus, e = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2242
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = R.IDLE);
|
|
2237
2243
|
}
|
|
2238
2244
|
/**
|
|
2239
2245
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
2240
2246
|
*/
|
|
2241
|
-
async swapFocus(t,
|
|
2242
|
-
return this.focusImage(t,
|
|
2247
|
+
async swapFocus(t, i, e) {
|
|
2248
|
+
return this.focusImage(t, i, e);
|
|
2243
2249
|
}
|
|
2244
2250
|
/**
|
|
2245
2251
|
* Get currently focused image element
|
|
@@ -2251,7 +2257,7 @@ class Te {
|
|
|
2251
2257
|
* Check if an image is currently focused (stable state)
|
|
2252
2258
|
*/
|
|
2253
2259
|
isFocused(t) {
|
|
2254
|
-
return this.currentFocus === t && this.state ===
|
|
2260
|
+
return this.currentFocus === t && this.state === R.FOCUSED;
|
|
2255
2261
|
}
|
|
2256
2262
|
/**
|
|
2257
2263
|
* Check if an image is the target of current focus animation
|
|
@@ -2272,23 +2278,23 @@ class Te {
|
|
|
2272
2278
|
* Used during swipe gestures for visual feedback
|
|
2273
2279
|
*/
|
|
2274
2280
|
setDragOffset(t) {
|
|
2275
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2276
|
-
const
|
|
2277
|
-
|
|
2281
|
+
if (!this.currentFocus || !this.focusData || this.state !== R.FOCUSED) return;
|
|
2282
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2283
|
+
n.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2278
2284
|
}
|
|
2279
2285
|
/**
|
|
2280
2286
|
* Clear the drag offset, optionally animating back to center
|
|
2281
2287
|
* @param animate - If true, animate back to center; if false, snap instantly
|
|
2282
2288
|
* @param duration - Animation duration in ms (default 150)
|
|
2283
2289
|
*/
|
|
2284
|
-
clearDragOffset(t,
|
|
2285
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2286
|
-
const
|
|
2287
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2290
|
+
clearDragOffset(t, i = 150) {
|
|
2291
|
+
if (!this.currentFocus || !this.focusData || this.state !== R.FOCUSED) return;
|
|
2292
|
+
const e = this.currentFocus, n = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = n.x ?? 0, s = n.y ?? 0;
|
|
2293
|
+
a.push(`translate(${r}px, ${s}px)`), n.rotation !== void 0 && a.push(`rotate(${n.rotation}deg)`);
|
|
2288
2294
|
const h = a.join(" ");
|
|
2289
|
-
t ? (
|
|
2290
|
-
this.currentFocus ===
|
|
2291
|
-
},
|
|
2295
|
+
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = h, setTimeout(() => {
|
|
2296
|
+
this.currentFocus === e && (e.style.transition = "none");
|
|
2297
|
+
}, i)) : (e.style.transition = "none", e.style.transform = h);
|
|
2292
2298
|
}
|
|
2293
2299
|
/**
|
|
2294
2300
|
* Reset zoom state (cancels all animations)
|
|
@@ -2312,12 +2318,12 @@ class Te {
|
|
|
2312
2318
|
this.focusData.originalZIndex,
|
|
2313
2319
|
this.focusData.originalWidth,
|
|
2314
2320
|
this.focusData.originalHeight
|
|
2315
|
-
), this.state =
|
|
2321
|
+
), this.state = R.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2316
2322
|
}
|
|
2317
2323
|
}
|
|
2318
|
-
const
|
|
2319
|
-
constructor(t,
|
|
2320
|
-
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks =
|
|
2324
|
+
const Ae = 50, Le = 0.5, Me = 20, Fe = 0.3, ze = 150, Oe = 30, st = class st {
|
|
2325
|
+
constructor(t, i) {
|
|
2326
|
+
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = i, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2321
2327
|
}
|
|
2322
2328
|
/**
|
|
2323
2329
|
* Start listening for touch events
|
|
@@ -2342,48 +2348,48 @@ const Re = 50, Me = 0.5, Le = 20, ze = 0.3, Fe = 150, $e = 30, ot = class ot {
|
|
|
2342
2348
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2343
2349
|
*/
|
|
2344
2350
|
hadRecentTouch() {
|
|
2345
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2351
|
+
return Date.now() - this.recentTouchTimestamp < st.TOUCH_CLICK_DELAY;
|
|
2346
2352
|
}
|
|
2347
2353
|
handleTouchStart(t) {
|
|
2348
2354
|
if (t.touches.length !== 1) return;
|
|
2349
2355
|
this.recentTouchTimestamp = Date.now();
|
|
2350
|
-
const
|
|
2356
|
+
const i = t.touches[0];
|
|
2351
2357
|
this.touchState = {
|
|
2352
|
-
startX:
|
|
2353
|
-
startY:
|
|
2358
|
+
startX: i.clientX,
|
|
2359
|
+
startY: i.clientY,
|
|
2354
2360
|
startTime: performance.now(),
|
|
2355
|
-
currentX:
|
|
2361
|
+
currentX: i.clientX,
|
|
2356
2362
|
isDragging: !1,
|
|
2357
2363
|
isHorizontalSwipe: null
|
|
2358
2364
|
};
|
|
2359
2365
|
}
|
|
2360
2366
|
handleTouchMove(t) {
|
|
2361
2367
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2362
|
-
const
|
|
2363
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(
|
|
2364
|
-
const s = Math.atan2(Math.abs(
|
|
2365
|
-
this.touchState.isHorizontalSwipe = s <=
|
|
2368
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2369
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2370
|
+
const s = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2371
|
+
this.touchState.isHorizontalSwipe = s <= Oe;
|
|
2366
2372
|
}
|
|
2367
2373
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2368
|
-
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX =
|
|
2369
|
-
const a =
|
|
2374
|
+
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = i.clientX;
|
|
2375
|
+
const a = e * Fe;
|
|
2370
2376
|
this.callbacks.onDragOffset(a);
|
|
2371
2377
|
}
|
|
2372
2378
|
}
|
|
2373
2379
|
handleTouchEnd(t) {
|
|
2374
2380
|
if (!this.touchState) return;
|
|
2375
2381
|
this.recentTouchTimestamp = Date.now();
|
|
2376
|
-
const
|
|
2382
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, a = Math.abs(i);
|
|
2377
2383
|
let r = !1;
|
|
2378
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >=
|
|
2384
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Ae || n >= Le && a >= Me) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2379
2385
|
}
|
|
2380
2386
|
handleTouchCancel(t) {
|
|
2381
2387
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2382
2388
|
}
|
|
2383
2389
|
};
|
|
2384
|
-
|
|
2385
|
-
let
|
|
2386
|
-
class
|
|
2390
|
+
st.TOUCH_CLICK_DELAY = 300;
|
|
2391
|
+
let pt = st;
|
|
2392
|
+
class $e {
|
|
2387
2393
|
constructor(t) {
|
|
2388
2394
|
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)
|
|
2389
2395
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2394,15 +2400,15 @@ class De {
|
|
|
2394
2400
|
*/
|
|
2395
2401
|
async prepare(t) {
|
|
2396
2402
|
this._discoveredUrls = [];
|
|
2397
|
-
for (const
|
|
2398
|
-
if ("folders" in
|
|
2399
|
-
for (const
|
|
2400
|
-
const
|
|
2403
|
+
for (const i of this.sources)
|
|
2404
|
+
if ("folders" in i)
|
|
2405
|
+
for (const e of i.folders) {
|
|
2406
|
+
const n = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, n);
|
|
2401
2407
|
this._discoveredUrls.push(...a);
|
|
2402
2408
|
}
|
|
2403
|
-
else if ("files" in
|
|
2404
|
-
const
|
|
2405
|
-
this._discoveredUrls.push(...
|
|
2409
|
+
else if ("files" in i) {
|
|
2410
|
+
const e = await this.loadFiles(i.files, t);
|
|
2411
|
+
this._discoveredUrls.push(...e);
|
|
2406
2412
|
}
|
|
2407
2413
|
this._prepared = !0;
|
|
2408
2414
|
}
|
|
@@ -2436,16 +2442,16 @@ class De {
|
|
|
2436
2442
|
* @returns Folder ID or null if invalid
|
|
2437
2443
|
*/
|
|
2438
2444
|
extractFolderId(t) {
|
|
2439
|
-
const
|
|
2445
|
+
const i = [
|
|
2440
2446
|
/\/folders\/([a-zA-Z0-9_-]+)/,
|
|
2441
2447
|
// Standard format
|
|
2442
2448
|
/id=([a-zA-Z0-9_-]+)/
|
|
2443
2449
|
// Alternative format
|
|
2444
2450
|
];
|
|
2445
|
-
for (const
|
|
2446
|
-
const
|
|
2447
|
-
if (
|
|
2448
|
-
return
|
|
2451
|
+
for (const e of i) {
|
|
2452
|
+
const n = t.match(e);
|
|
2453
|
+
if (n && n[1])
|
|
2454
|
+
return n[1];
|
|
2449
2455
|
}
|
|
2450
2456
|
return null;
|
|
2451
2457
|
}
|
|
@@ -2456,16 +2462,16 @@ class De {
|
|
|
2456
2462
|
* @param recursive - Whether to include images from subfolders
|
|
2457
2463
|
* @returns Promise resolving to array of image URLs
|
|
2458
2464
|
*/
|
|
2459
|
-
async loadFromFolder(t,
|
|
2460
|
-
const
|
|
2461
|
-
if (!
|
|
2465
|
+
async loadFromFolder(t, i, e = !0) {
|
|
2466
|
+
const n = this.extractFolderId(t);
|
|
2467
|
+
if (!n)
|
|
2462
2468
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2463
2469
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2464
|
-
return this.loadImagesDirectly(
|
|
2470
|
+
return this.loadImagesDirectly(n, i);
|
|
2465
2471
|
try {
|
|
2466
|
-
return
|
|
2472
|
+
return e ? await this.loadImagesRecursively(n, i) : await this.loadImagesFromSingleFolder(n, i);
|
|
2467
2473
|
} catch (a) {
|
|
2468
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2474
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(n, i);
|
|
2469
2475
|
}
|
|
2470
2476
|
}
|
|
2471
2477
|
/**
|
|
@@ -2474,16 +2480,16 @@ class De {
|
|
|
2474
2480
|
* @param filter - Filter to apply to discovered images
|
|
2475
2481
|
* @returns Promise resolving to array of image URLs
|
|
2476
2482
|
*/
|
|
2477
|
-
async loadImagesFromSingleFolder(t,
|
|
2478
|
-
const
|
|
2483
|
+
async loadImagesFromSingleFolder(t, i) {
|
|
2484
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2479
2485
|
if (!s.ok)
|
|
2480
2486
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2481
2487
|
const c = (await s.json()).files.filter(
|
|
2482
|
-
(d) => d.mimeType.startsWith("image/") &&
|
|
2488
|
+
(d) => d.mimeType.startsWith("image/") && i.isAllowed(d.name)
|
|
2483
2489
|
);
|
|
2484
2490
|
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((d) => {
|
|
2485
|
-
|
|
2486
|
-
}),
|
|
2491
|
+
e.push(`https://lh3.googleusercontent.com/d/${d.id}=s1600`), this.log(`Added file: ${d.name}`);
|
|
2492
|
+
}), e;
|
|
2487
2493
|
}
|
|
2488
2494
|
/**
|
|
2489
2495
|
* Load specific files by their URLs or IDs
|
|
@@ -2491,12 +2497,12 @@ class De {
|
|
|
2491
2497
|
* @param filter - Filter to apply to discovered images
|
|
2492
2498
|
* @returns Promise resolving to array of image URLs
|
|
2493
2499
|
*/
|
|
2494
|
-
async loadFiles(t,
|
|
2495
|
-
const
|
|
2496
|
-
for (const
|
|
2497
|
-
const a = this.extractFileId(
|
|
2500
|
+
async loadFiles(t, i) {
|
|
2501
|
+
const e = [];
|
|
2502
|
+
for (const n of t) {
|
|
2503
|
+
const a = this.extractFileId(n);
|
|
2498
2504
|
if (!a) {
|
|
2499
|
-
this.log(`Skipping invalid file URL: ${
|
|
2505
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2500
2506
|
continue;
|
|
2501
2507
|
}
|
|
2502
2508
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
@@ -2504,16 +2510,16 @@ class De {
|
|
|
2504
2510
|
const r = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(r);
|
|
2505
2511
|
if (s.ok) {
|
|
2506
2512
|
const h = await s.json();
|
|
2507
|
-
h.mimeType.startsWith("image/") &&
|
|
2513
|
+
h.mimeType.startsWith("image/") && i.isAllowed(h.name) ? (e.push(`https://lh3.googleusercontent.com/d/${a}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
|
|
2508
2514
|
} else
|
|
2509
2515
|
this.log(`Failed to fetch metadata for file ${a}: ${s.status}`);
|
|
2510
2516
|
} catch (r) {
|
|
2511
2517
|
this.log(`Error fetching metadata for file ${a}:`, r);
|
|
2512
2518
|
}
|
|
2513
2519
|
else
|
|
2514
|
-
|
|
2520
|
+
e.push(`https://lh3.googleusercontent.com/d/${a}=s1600`);
|
|
2515
2521
|
}
|
|
2516
|
-
return
|
|
2522
|
+
return e;
|
|
2517
2523
|
}
|
|
2518
2524
|
/**
|
|
2519
2525
|
* Extract file ID from Google Drive file URL
|
|
@@ -2523,7 +2529,7 @@ class De {
|
|
|
2523
2529
|
extractFileId(t) {
|
|
2524
2530
|
if (!/[/:.]/.test(t))
|
|
2525
2531
|
return t;
|
|
2526
|
-
const
|
|
2532
|
+
const i = [
|
|
2527
2533
|
/\/file\/d\/([a-zA-Z0-9_-]+)/,
|
|
2528
2534
|
// Standard file format
|
|
2529
2535
|
/\/open\?id=([a-zA-Z0-9_-]+)/,
|
|
@@ -2531,10 +2537,10 @@ class De {
|
|
|
2531
2537
|
/id=([a-zA-Z0-9_-]+)/
|
|
2532
2538
|
// Generic id parameter
|
|
2533
2539
|
];
|
|
2534
|
-
for (const
|
|
2535
|
-
const
|
|
2536
|
-
if (
|
|
2537
|
-
return
|
|
2540
|
+
for (const e of i) {
|
|
2541
|
+
const n = t.match(e);
|
|
2542
|
+
if (n && n[1])
|
|
2543
|
+
return n[1];
|
|
2538
2544
|
}
|
|
2539
2545
|
return null;
|
|
2540
2546
|
}
|
|
@@ -2544,24 +2550,24 @@ class De {
|
|
|
2544
2550
|
* @param filter - Filter to apply to discovered images
|
|
2545
2551
|
* @returns Promise resolving to array of image URLs
|
|
2546
2552
|
*/
|
|
2547
|
-
async loadImagesRecursively(t,
|
|
2548
|
-
const
|
|
2553
|
+
async loadImagesRecursively(t, i) {
|
|
2554
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2549
2555
|
if (!s.ok)
|
|
2550
2556
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2551
2557
|
const h = await s.json(), c = h.files.filter(
|
|
2552
|
-
(l) => l.mimeType.startsWith("image/") &&
|
|
2558
|
+
(l) => l.mimeType.startsWith("image/") && i.isAllowed(l.name)
|
|
2553
2559
|
), d = h.files.filter(
|
|
2554
2560
|
(l) => l.mimeType === "application/vnd.google-apps.folder"
|
|
2555
2561
|
);
|
|
2556
2562
|
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(`- ${d.length} subfolders`), c.forEach((l) => {
|
|
2557
|
-
|
|
2563
|
+
e.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
|
|
2558
2564
|
});
|
|
2559
2565
|
for (const l of d) {
|
|
2560
2566
|
this.log(`Loading images from subfolder: ${l.name}`);
|
|
2561
|
-
const u = await this.loadImagesRecursively(l.id,
|
|
2562
|
-
|
|
2567
|
+
const u = await this.loadImagesRecursively(l.id, i);
|
|
2568
|
+
e.push(...u);
|
|
2563
2569
|
}
|
|
2564
|
-
return
|
|
2570
|
+
return e;
|
|
2565
2571
|
}
|
|
2566
2572
|
/**
|
|
2567
2573
|
* Direct loading method (no API key required, but less reliable)
|
|
@@ -2570,17 +2576,17 @@ class De {
|
|
|
2570
2576
|
* @param filter - Filter to apply (not used in fallback mode)
|
|
2571
2577
|
* @returns Promise resolving to array of image URLs
|
|
2572
2578
|
*/
|
|
2573
|
-
async loadImagesDirectly(t,
|
|
2579
|
+
async loadImagesDirectly(t, i) {
|
|
2574
2580
|
try {
|
|
2575
|
-
const
|
|
2576
|
-
if (!
|
|
2581
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(e, { mode: "cors" });
|
|
2582
|
+
if (!n.ok)
|
|
2577
2583
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2578
|
-
const a = await
|
|
2584
|
+
const a = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2579
2585
|
return [...new Set(s.map((d) => d[1]))].map(
|
|
2580
2586
|
(d) => `https://drive.google.com/uc?export=view&id=${d}`
|
|
2581
2587
|
);
|
|
2582
|
-
} catch (
|
|
2583
|
-
throw console.error("Direct loading failed:",
|
|
2588
|
+
} catch (e) {
|
|
2589
|
+
throw console.error("Direct loading failed:", e), new Error(
|
|
2584
2590
|
`Unable to load images. Please ensure:
|
|
2585
2591
|
1. The folder is shared publicly (Anyone with the link can view)
|
|
2586
2592
|
2. The folder contains image files
|
|
@@ -2594,7 +2600,7 @@ class De {
|
|
|
2594
2600
|
* @returns Array of direct image URLs
|
|
2595
2601
|
*/
|
|
2596
2602
|
manualImageUrls(t) {
|
|
2597
|
-
return t.map((
|
|
2603
|
+
return t.map((i) => `https://drive.google.com/uc?export=view&id=${i}`);
|
|
2598
2604
|
}
|
|
2599
2605
|
/**
|
|
2600
2606
|
* Debug logging helper
|
|
@@ -2604,7 +2610,7 @@ class De {
|
|
|
2604
2610
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2605
2611
|
}
|
|
2606
2612
|
}
|
|
2607
|
-
class
|
|
2613
|
+
class De {
|
|
2608
2614
|
constructor(t) {
|
|
2609
2615
|
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)
|
|
2610
2616
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -2616,12 +2622,12 @@ class Oe {
|
|
|
2616
2622
|
*/
|
|
2617
2623
|
async prepare(t) {
|
|
2618
2624
|
this._discoveredUrls = [], this.log(`Processing ${this.sources.length} source(s)`);
|
|
2619
|
-
for (const
|
|
2625
|
+
for (const i of this.sources)
|
|
2620
2626
|
try {
|
|
2621
|
-
const
|
|
2622
|
-
this._discoveredUrls.push(...
|
|
2623
|
-
} catch (
|
|
2624
|
-
console.warn("Failed to process source:",
|
|
2627
|
+
const e = await this.processSource(i, t);
|
|
2628
|
+
this._discoveredUrls.push(...e);
|
|
2629
|
+
} catch (e) {
|
|
2630
|
+
console.warn("Failed to process source:", i, e);
|
|
2625
2631
|
}
|
|
2626
2632
|
this._prepared = !0, this.log(`Successfully loaded ${this._discoveredUrls.length} image(s)`);
|
|
2627
2633
|
}
|
|
@@ -2655,8 +2661,8 @@ class Oe {
|
|
|
2655
2661
|
* @param filter - Filter to apply to discovered images
|
|
2656
2662
|
* @returns Promise resolving to array of valid URLs from this source
|
|
2657
2663
|
*/
|
|
2658
|
-
async processSource(t,
|
|
2659
|
-
return t ? "urls" in t ? await this.processUrls(t.urls,
|
|
2664
|
+
async processSource(t, i) {
|
|
2665
|
+
return t ? "urls" in t ? await this.processUrls(t.urls, i) : "path" in t ? await this.processPath(t.path, t.files, i) : "json" in t ? await this.processJson(t.json, i) : (console.warn("Unknown source shape:", t), []) : (console.warn("Invalid source object:", t), []);
|
|
2660
2666
|
}
|
|
2661
2667
|
/**
|
|
2662
2668
|
* Process a list of direct URLs
|
|
@@ -2664,19 +2670,19 @@ class Oe {
|
|
|
2664
2670
|
* @param filter - Filter to apply to discovered images
|
|
2665
2671
|
* @returns Promise resolving to array of validated URLs
|
|
2666
2672
|
*/
|
|
2667
|
-
async processUrls(t,
|
|
2673
|
+
async processUrls(t, i) {
|
|
2668
2674
|
if (!Array.isArray(t))
|
|
2669
2675
|
return console.warn("URLs must be an array:", t), [];
|
|
2670
|
-
const
|
|
2671
|
-
for (const
|
|
2672
|
-
const a =
|
|
2673
|
-
if (!
|
|
2674
|
-
this.log(`Skipping filtered URL: ${
|
|
2676
|
+
const e = [];
|
|
2677
|
+
for (const n of t) {
|
|
2678
|
+
const a = n.split("/").pop() || n;
|
|
2679
|
+
if (!i.isAllowed(a)) {
|
|
2680
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
2675
2681
|
continue;
|
|
2676
2682
|
}
|
|
2677
|
-
this.validateUrls ? await this.validateUrl(
|
|
2683
|
+
this.validateUrls ? await this.validateUrl(n) ? e.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : e.push(n);
|
|
2678
2684
|
}
|
|
2679
|
-
return
|
|
2685
|
+
return e;
|
|
2680
2686
|
}
|
|
2681
2687
|
/**
|
|
2682
2688
|
* Process a path-based source
|
|
@@ -2685,19 +2691,19 @@ class Oe {
|
|
|
2685
2691
|
* @param filter - Filter to apply to discovered images
|
|
2686
2692
|
* @returns Promise resolving to array of validated URLs
|
|
2687
2693
|
*/
|
|
2688
|
-
async processPath(t,
|
|
2689
|
-
if (!Array.isArray(
|
|
2690
|
-
return console.warn("files must be an array:",
|
|
2691
|
-
const
|
|
2692
|
-
for (const a of
|
|
2693
|
-
if (!
|
|
2694
|
+
async processPath(t, i, e) {
|
|
2695
|
+
if (!Array.isArray(i))
|
|
2696
|
+
return console.warn("files must be an array:", i), [];
|
|
2697
|
+
const n = [];
|
|
2698
|
+
for (const a of i) {
|
|
2699
|
+
if (!e.isAllowed(a)) {
|
|
2694
2700
|
this.log(`Skipping filtered file: ${a}`);
|
|
2695
2701
|
continue;
|
|
2696
2702
|
}
|
|
2697
2703
|
const r = this.constructUrl(t, a);
|
|
2698
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2704
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2699
2705
|
}
|
|
2700
|
-
return
|
|
2706
|
+
return n;
|
|
2701
2707
|
}
|
|
2702
2708
|
/**
|
|
2703
2709
|
* Process a JSON endpoint source
|
|
@@ -2706,19 +2712,19 @@ class Oe {
|
|
|
2706
2712
|
* @param filter - Filter to apply to discovered images
|
|
2707
2713
|
* @returns Promise resolving to array of validated URLs
|
|
2708
2714
|
*/
|
|
2709
|
-
async processJson(t,
|
|
2715
|
+
async processJson(t, i) {
|
|
2710
2716
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2711
|
-
const
|
|
2717
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), 1e4);
|
|
2712
2718
|
try {
|
|
2713
|
-
const a = await fetch(t, { signal:
|
|
2714
|
-
if (clearTimeout(
|
|
2719
|
+
const a = await fetch(t, { signal: e.signal });
|
|
2720
|
+
if (clearTimeout(n), !a.ok)
|
|
2715
2721
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
2716
2722
|
const r = await a.json();
|
|
2717
2723
|
if (!r || !Array.isArray(r.images))
|
|
2718
2724
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2719
|
-
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images,
|
|
2725
|
+
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
2720
2726
|
} catch (a) {
|
|
2721
|
-
throw clearTimeout(
|
|
2727
|
+
throw clearTimeout(n), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
2722
2728
|
}
|
|
2723
2729
|
}
|
|
2724
2730
|
/**
|
|
@@ -2740,13 +2746,13 @@ class Oe {
|
|
|
2740
2746
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2741
2747
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2742
2748
|
try {
|
|
2743
|
-
const
|
|
2749
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
2744
2750
|
method: "HEAD",
|
|
2745
|
-
signal:
|
|
2751
|
+
signal: e.signal
|
|
2746
2752
|
});
|
|
2747
|
-
return clearTimeout(
|
|
2748
|
-
} catch (
|
|
2749
|
-
return
|
|
2753
|
+
return clearTimeout(n), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
2754
|
+
} catch (e) {
|
|
2755
|
+
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
2750
2756
|
}
|
|
2751
2757
|
}
|
|
2752
2758
|
/**
|
|
@@ -2755,14 +2761,14 @@ class Oe {
|
|
|
2755
2761
|
* @param filename - Filename to append
|
|
2756
2762
|
* @returns Complete URL
|
|
2757
2763
|
*/
|
|
2758
|
-
constructUrl(t,
|
|
2759
|
-
const
|
|
2764
|
+
constructUrl(t, i) {
|
|
2765
|
+
const e = t.replace(/\/$/, "");
|
|
2760
2766
|
if (this.isAbsoluteUrl(t))
|
|
2761
|
-
return `${
|
|
2767
|
+
return `${e}/${i}`;
|
|
2762
2768
|
if (typeof window > "u")
|
|
2763
|
-
return `${
|
|
2764
|
-
const
|
|
2765
|
-
return `${
|
|
2769
|
+
return `${e}/${i}`;
|
|
2770
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2771
|
+
return `${n}${r}/${i}`;
|
|
2766
2772
|
}
|
|
2767
2773
|
/**
|
|
2768
2774
|
* Check if URL is absolute (contains protocol)
|
|
@@ -2796,16 +2802,16 @@ class Pe {
|
|
|
2796
2802
|
*/
|
|
2797
2803
|
async prepare(t) {
|
|
2798
2804
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2799
|
-
const
|
|
2800
|
-
this.log(`Loader ${
|
|
2805
|
+
const i = this.loaders.map((e, n) => e.prepare(t).then(() => {
|
|
2806
|
+
this.log(`Loader ${n} prepared with ${e.imagesLength()} images`);
|
|
2801
2807
|
}).catch((a) => {
|
|
2802
|
-
console.warn(`Loader ${
|
|
2808
|
+
console.warn(`Loader ${n} failed to prepare:`, a);
|
|
2803
2809
|
}));
|
|
2804
|
-
await Promise.all(
|
|
2805
|
-
for (const
|
|
2806
|
-
if (
|
|
2807
|
-
const
|
|
2808
|
-
this._discoveredUrls.push(...
|
|
2810
|
+
await Promise.all(i);
|
|
2811
|
+
for (const e of this.loaders)
|
|
2812
|
+
if (e.isPrepared()) {
|
|
2813
|
+
const n = e.imageURLs();
|
|
2814
|
+
this._discoveredUrls.push(...n);
|
|
2809
2815
|
}
|
|
2810
2816
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2811
2817
|
}
|
|
@@ -2863,8 +2869,8 @@ class Ue {
|
|
|
2863
2869
|
* @returns True if the file extension is allowed
|
|
2864
2870
|
*/
|
|
2865
2871
|
isAllowed(t) {
|
|
2866
|
-
const
|
|
2867
|
-
return
|
|
2872
|
+
const e = t.split("?")[0].split(".").pop()?.toLowerCase();
|
|
2873
|
+
return e ? this.allowedExtensions.includes(e) : !1;
|
|
2868
2874
|
}
|
|
2869
2875
|
/**
|
|
2870
2876
|
* Get the list of allowed extensions
|
|
@@ -2930,20 +2936,20 @@ const _e = `
|
|
|
2930
2936
|
`;
|
|
2931
2937
|
function He() {
|
|
2932
2938
|
if (typeof document > "u") return;
|
|
2933
|
-
const
|
|
2934
|
-
if (document.getElementById(
|
|
2939
|
+
const o = "fbn-ic-functional-styles";
|
|
2940
|
+
if (document.getElementById(o)) return;
|
|
2935
2941
|
const t = document.createElement("style");
|
|
2936
|
-
t.id =
|
|
2942
|
+
t.id = o, t.textContent = _e, document.head.appendChild(t);
|
|
2937
2943
|
}
|
|
2938
|
-
let
|
|
2944
|
+
let je = class {
|
|
2939
2945
|
constructor(t = {}) {
|
|
2940
|
-
this.fullConfig =
|
|
2946
|
+
this.fullConfig = Yt(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 Kt(this.fullConfig.animation), this.layoutEngine = new ve({
|
|
2941
2947
|
layout: this.fullConfig.layout,
|
|
2942
2948
|
image: this.fullConfig.image
|
|
2943
|
-
}), this.zoomEngine = new
|
|
2944
|
-
const
|
|
2949
|
+
}), this.zoomEngine = new Ce(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = tt(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
2950
|
+
const i = this.fullConfig.animation.entry || y.animation.entry;
|
|
2945
2951
|
this.entryAnimationEngine = new ce(
|
|
2946
|
-
|
|
2952
|
+
i,
|
|
2947
2953
|
this.fullConfig.layout.algorithm
|
|
2948
2954
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2949
2955
|
}
|
|
@@ -2959,36 +2965,36 @@ let Ne = class {
|
|
|
2959
2965
|
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2960
2966
|
*/
|
|
2961
2967
|
createLoader() {
|
|
2962
|
-
const t = this.fullConfig.loaders,
|
|
2968
|
+
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
2963
2969
|
if (!t || t.length === 0)
|
|
2964
2970
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2965
|
-
const
|
|
2966
|
-
return
|
|
2967
|
-
loaders:
|
|
2971
|
+
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
2972
|
+
return e.length === 1 ? e[0] : new Pe({
|
|
2973
|
+
loaders: e,
|
|
2968
2974
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
2969
2975
|
});
|
|
2970
2976
|
}
|
|
2971
2977
|
/**
|
|
2972
2978
|
* Create a single loader from a LoaderEntry, merging shared config
|
|
2973
2979
|
*/
|
|
2974
|
-
createLoaderFromEntry(t,
|
|
2980
|
+
createLoaderFromEntry(t, i) {
|
|
2975
2981
|
if ("static" in t) {
|
|
2976
|
-
const
|
|
2977
|
-
...
|
|
2978
|
-
validateUrls:
|
|
2979
|
-
validationTimeout:
|
|
2980
|
-
validationMethod:
|
|
2981
|
-
allowedExtensions:
|
|
2982
|
-
debugLogging:
|
|
2982
|
+
const e = t.static, n = {
|
|
2983
|
+
...e,
|
|
2984
|
+
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
2985
|
+
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
2986
|
+
validationMethod: e.validationMethod ?? i.validationMethod,
|
|
2987
|
+
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
2988
|
+
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2983
2989
|
};
|
|
2984
|
-
return new
|
|
2990
|
+
return new De(n);
|
|
2985
2991
|
} else if ("googleDrive" in t) {
|
|
2986
|
-
const
|
|
2987
|
-
...
|
|
2988
|
-
allowedExtensions:
|
|
2989
|
-
debugLogging:
|
|
2992
|
+
const e = t.googleDrive, n = {
|
|
2993
|
+
...e,
|
|
2994
|
+
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
2995
|
+
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2990
2996
|
};
|
|
2991
|
-
return new
|
|
2997
|
+
return new $e(n);
|
|
2992
2998
|
} else
|
|
2993
2999
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2994
3000
|
}
|
|
@@ -3001,12 +3007,12 @@ let Ne = class {
|
|
|
3001
3007
|
this.containerEl = this.containerRef;
|
|
3002
3008
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3003
3009
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3004
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
3010
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new pt(this.containerEl, {
|
|
3005
3011
|
onNext: () => this.navigateToNextImage(),
|
|
3006
3012
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3007
3013
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3008
3014
|
onDragEnd: (t) => {
|
|
3009
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
3015
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, ze);
|
|
3010
3016
|
}
|
|
3011
3017
|
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3012
3018
|
} catch (t) {
|
|
@@ -3023,10 +3029,10 @@ let Ne = class {
|
|
|
3023
3029
|
createDefaultLoadingElement() {
|
|
3024
3030
|
const t = document.createElement("div");
|
|
3025
3031
|
t.className = "fbn-ic-loading fbn-ic-hidden";
|
|
3026
|
-
const
|
|
3027
|
-
|
|
3028
|
-
const
|
|
3029
|
-
return
|
|
3032
|
+
const i = document.createElement("div");
|
|
3033
|
+
i.className = "fbn-ic-spinner", t.appendChild(i);
|
|
3034
|
+
const e = document.createElement("p");
|
|
3035
|
+
return e.textContent = "Loading images...", t.appendChild(e), this.containerEl.appendChild(t), t;
|
|
3030
3036
|
}
|
|
3031
3037
|
createDefaultErrorElement() {
|
|
3032
3038
|
const t = document.createElement("div");
|
|
@@ -3048,24 +3054,24 @@ let Ne = class {
|
|
|
3048
3054
|
*/
|
|
3049
3055
|
navigateToNextImage() {
|
|
3050
3056
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3051
|
-
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length,
|
|
3052
|
-
(
|
|
3057
|
+
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3058
|
+
(n) => n.dataset.imageId === String(t)
|
|
3053
3059
|
);
|
|
3054
|
-
if (!
|
|
3055
|
-
const
|
|
3056
|
-
|
|
3060
|
+
if (!i) return;
|
|
3061
|
+
const e = this.imageLayouts[t];
|
|
3062
|
+
e && (this.currentFocusIndex = t, this.handleImageClick(i, e), this.updateCounter(t));
|
|
3057
3063
|
}
|
|
3058
3064
|
/**
|
|
3059
3065
|
* Navigate to the previous image (Left arrow)
|
|
3060
3066
|
*/
|
|
3061
3067
|
navigateToPreviousImage() {
|
|
3062
3068
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3063
|
-
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length,
|
|
3064
|
-
(
|
|
3069
|
+
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3070
|
+
(n) => n.dataset.imageId === String(t)
|
|
3065
3071
|
);
|
|
3066
|
-
if (!
|
|
3067
|
-
const
|
|
3068
|
-
|
|
3072
|
+
if (!i) return;
|
|
3073
|
+
const e = this.imageLayouts[t];
|
|
3074
|
+
e && (this.currentFocusIndex = t, this.handleImageClick(i, e), this.updateCounter(t));
|
|
3069
3075
|
}
|
|
3070
3076
|
/**
|
|
3071
3077
|
* Navigate to a specific image by index
|
|
@@ -3077,8 +3083,8 @@ let Ne = class {
|
|
|
3077
3083
|
}, 500));
|
|
3078
3084
|
}
|
|
3079
3085
|
getImageHeight() {
|
|
3080
|
-
const t = window.innerWidth,
|
|
3081
|
-
return
|
|
3086
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, n = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3087
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, n) : t <= i.tablet.maxWidth ? Math.min(180, n) : Math.min(225, n) : t <= 767 ? Math.min(100, n) : t <= 1199 ? Math.min(180, n) : Math.min(225, n);
|
|
3082
3088
|
}
|
|
3083
3089
|
/**
|
|
3084
3090
|
* Get container bounds for layout calculations
|
|
@@ -3096,20 +3102,20 @@ let Ne = class {
|
|
|
3096
3102
|
try {
|
|
3097
3103
|
this.showLoading(!0), this.hideError(), this.clearImageCloud(), await this.imageLoader.prepare(this.imageFilter);
|
|
3098
3104
|
const t = this.imageLoader.imagesLength();
|
|
3099
|
-
let
|
|
3105
|
+
let i = this.imageLoader.imageURLs();
|
|
3100
3106
|
if (t === 0) {
|
|
3101
3107
|
this.showError("No images found."), this.showLoading(!1);
|
|
3102
3108
|
return;
|
|
3103
3109
|
}
|
|
3104
|
-
const
|
|
3105
|
-
this.logDebug(`Adaptive sizing input: container=${
|
|
3110
|
+
const e = this.getContainerBounds(), n = this.getImageHeight(), a = window.innerWidth;
|
|
3111
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3106
3112
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3107
|
-
|
|
3113
|
+
e,
|
|
3108
3114
|
t,
|
|
3109
|
-
|
|
3115
|
+
n,
|
|
3110
3116
|
a
|
|
3111
3117
|
);
|
|
3112
|
-
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(
|
|
3118
|
+
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3113
3119
|
} catch (t) {
|
|
3114
3120
|
console.error("Error loading images:", t), t instanceof Error && this.showError(t.message || "Failed to load images."), this.showLoading(!1);
|
|
3115
3121
|
}
|
|
@@ -3120,11 +3126,11 @@ let Ne = class {
|
|
|
3120
3126
|
logDebug(...t) {
|
|
3121
3127
|
this.fullConfig.config.debug?.enabled && typeof console < "u" && console.log(...t);
|
|
3122
3128
|
}
|
|
3123
|
-
async createImageCloud(t,
|
|
3129
|
+
async createImageCloud(t, i) {
|
|
3124
3130
|
if (!this.containerEl) return;
|
|
3125
|
-
const
|
|
3126
|
-
this.currentImageHeight =
|
|
3127
|
-
const
|
|
3131
|
+
const e = this.getContainerBounds();
|
|
3132
|
+
this.currentImageHeight = i;
|
|
3133
|
+
const n = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3128
3134
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3129
3135
|
let r = 0;
|
|
3130
3136
|
const s = (c) => {
|
|
@@ -3136,7 +3142,7 @@ let Ne = class {
|
|
|
3136
3142
|
}, g = {
|
|
3137
3143
|
x: parseFloat(c.dataset.endX),
|
|
3138
3144
|
y: parseFloat(c.dataset.endY)
|
|
3139
|
-
}, p = parseFloat(c.dataset.imageWidth),
|
|
3145
|
+
}, p = parseFloat(c.dataset.imageWidth), b = parseFloat(c.dataset.imageHeight), f = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), S = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : f, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, w = this.entryAnimationEngine.getTiming();
|
|
3140
3146
|
se({
|
|
3141
3147
|
element: c,
|
|
3142
3148
|
startPosition: u,
|
|
@@ -3144,11 +3150,11 @@ let Ne = class {
|
|
|
3144
3150
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3145
3151
|
duration: w.duration,
|
|
3146
3152
|
imageWidth: p,
|
|
3147
|
-
imageHeight:
|
|
3153
|
+
imageHeight: b,
|
|
3148
3154
|
rotation: f,
|
|
3149
3155
|
scale: m,
|
|
3150
3156
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3151
|
-
startRotation:
|
|
3157
|
+
startRotation: S,
|
|
3152
3158
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3153
3159
|
startScale: v
|
|
3154
3160
|
});
|
|
@@ -3180,7 +3186,7 @@ let Ne = class {
|
|
|
3180
3186
|
return;
|
|
3181
3187
|
}
|
|
3182
3188
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3183
|
-
if (
|
|
3189
|
+
if (n !== this.loadGeneration) {
|
|
3184
3190
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3185
3191
|
return;
|
|
3186
3192
|
}
|
|
@@ -3209,67 +3215,67 @@ let Ne = class {
|
|
|
3209
3215
|
const l = document.createElement("img");
|
|
3210
3216
|
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(d), l.dataset.createdFlag = "true";
|
|
3211
3217
|
const u = a[d];
|
|
3212
|
-
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${
|
|
3218
|
+
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${i}px`, l.style.left = `${u.x}px`, l.style.top = `${u.y}px`, u.zIndex && (l.style.zIndex = String(u.zIndex)), nt(l, this.defaultClassName), l.addEventListener("mouseenter", () => {
|
|
3213
3219
|
if (this.hoveredImage = { element: l, layout: u }, !this.zoomEngine.isInvolved(l)) {
|
|
3214
3220
|
const g = l.cachedRenderedWidth;
|
|
3215
|
-
|
|
3221
|
+
gt(l, this.fullConfig.styling?.hover, i, g), nt(l, this.hoverClassName);
|
|
3216
3222
|
}
|
|
3217
3223
|
}), l.addEventListener("mouseleave", () => {
|
|
3218
3224
|
if (this.hoveredImage = null, !this.zoomEngine.isInvolved(l)) {
|
|
3219
3225
|
const g = l.cachedRenderedWidth;
|
|
3220
|
-
|
|
3226
|
+
gt(l, this.fullConfig.styling?.default, i, g), mt(l, this.hoverClassName), nt(l, this.defaultClassName);
|
|
3221
3227
|
}
|
|
3222
3228
|
}), l.addEventListener("click", (g) => {
|
|
3223
3229
|
g.stopPropagation(), this.handleImageClick(l, u);
|
|
3224
3230
|
}), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
|
|
3225
|
-
if (
|
|
3231
|
+
if (n !== this.loadGeneration)
|
|
3226
3232
|
return;
|
|
3227
|
-
const g = l.naturalWidth / l.naturalHeight, p =
|
|
3228
|
-
l.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${d}] Called with imageHeight=${
|
|
3229
|
-
const
|
|
3230
|
-
|
|
3233
|
+
const g = l.naturalWidth / l.naturalHeight, p = i * g;
|
|
3234
|
+
l.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${d}] Called with imageHeight=${i}, renderedWidth=${p}`), l.style.width = `${p}px`, l.cachedRenderedWidth = p, l.aspectRatio = g, gt(l, this.fullConfig.styling?.default, i, p);
|
|
3235
|
+
const b = { x: u.x, y: u.y }, f = { width: p, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3236
|
+
b,
|
|
3231
3237
|
f,
|
|
3232
|
-
|
|
3238
|
+
e,
|
|
3233
3239
|
d,
|
|
3234
3240
|
t.length
|
|
3235
|
-
),
|
|
3241
|
+
), S = this.entryAnimationEngine.calculateStartRotation(u.rotation), v = this.entryAnimationEngine.calculateStartScale(u.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3236
3242
|
u.rotation,
|
|
3237
3243
|
u.scale,
|
|
3238
3244
|
p,
|
|
3239
|
-
|
|
3240
|
-
),
|
|
3245
|
+
i
|
|
3246
|
+
), E = this.entryAnimationEngine.buildStartTransform(
|
|
3241
3247
|
m,
|
|
3242
|
-
|
|
3248
|
+
b,
|
|
3243
3249
|
u.rotation,
|
|
3244
3250
|
u.scale,
|
|
3245
3251
|
p,
|
|
3246
|
-
|
|
3247
|
-
|
|
3252
|
+
i,
|
|
3253
|
+
S,
|
|
3248
3254
|
v
|
|
3249
3255
|
);
|
|
3250
3256
|
this.fullConfig.config.debug?.enabled && d < 3 && console.log(`Image ${d}:`, {
|
|
3251
|
-
finalPosition:
|
|
3257
|
+
finalPosition: b,
|
|
3252
3258
|
imageSize: f,
|
|
3253
3259
|
left: u.x,
|
|
3254
3260
|
top: u.y,
|
|
3255
3261
|
finalTransform: w,
|
|
3256
3262
|
renderedWidth: p,
|
|
3257
|
-
renderedHeight:
|
|
3258
|
-
}), l.style.transform =
|
|
3263
|
+
renderedHeight: i
|
|
3264
|
+
}), l.style.transform = E, l.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || S !== u.rotation || v !== u.scale) && (l.dataset.startX = String(m.x), l.dataset.startY = String(m.y), l.dataset.endX = String(b.x), l.dataset.endY = String(b.y), l.dataset.imageWidth = String(p), l.dataset.imageHeight = String(i), l.dataset.rotation = String(u.rotation), l.dataset.scale = String(u.scale), l.dataset.startRotation = String(S), l.dataset.startScale = String(v)), this.displayQueue.push(l);
|
|
3259
3265
|
}, l.onerror = () => r++, l.src = c;
|
|
3260
3266
|
});
|
|
3261
3267
|
}
|
|
3262
|
-
async handleImageClick(t,
|
|
3268
|
+
async handleImageClick(t, i) {
|
|
3263
3269
|
if (!this.containerEl) return;
|
|
3264
|
-
const
|
|
3270
|
+
const e = this.zoomEngine.isFocused(t), n = {
|
|
3265
3271
|
width: this.containerEl.offsetWidth,
|
|
3266
3272
|
height: this.containerEl.offsetHeight
|
|
3267
3273
|
};
|
|
3268
|
-
if (
|
|
3274
|
+
if (e)
|
|
3269
3275
|
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
|
|
3270
3276
|
else {
|
|
3271
3277
|
const a = t.dataset.imageId;
|
|
3272
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3278
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3273
3279
|
}
|
|
3274
3280
|
}
|
|
3275
3281
|
/**
|
|
@@ -3301,24 +3307,24 @@ let Ne = class {
|
|
|
3301
3307
|
}
|
|
3302
3308
|
};
|
|
3303
3309
|
const Ge = Pt(
|
|
3304
|
-
function({ className: t, style:
|
|
3310
|
+
function({ className: t, style: i, ...e }, n) {
|
|
3305
3311
|
const a = xt(null), r = xt(null);
|
|
3306
|
-
return Ut(
|
|
3312
|
+
return Ut(n, () => ({
|
|
3307
3313
|
get instance() {
|
|
3308
3314
|
return r.current;
|
|
3309
3315
|
}
|
|
3310
3316
|
})), _t(() => {
|
|
3311
3317
|
if (!a.current) return;
|
|
3312
|
-
const s = new
|
|
3318
|
+
const s = new je({
|
|
3313
3319
|
container: a.current,
|
|
3314
|
-
...
|
|
3320
|
+
...e
|
|
3315
3321
|
});
|
|
3316
3322
|
return r.current = s, s.init().catch((h) => {
|
|
3317
3323
|
console.error("ImageCloud init failed:", h);
|
|
3318
3324
|
}), () => {
|
|
3319
3325
|
s.destroy(), r.current = null;
|
|
3320
3326
|
};
|
|
3321
|
-
}, [JSON.stringify(
|
|
3327
|
+
}, [JSON.stringify(e)]), /* @__PURE__ */ Dt("div", { ref: a, className: t, style: i });
|
|
3322
3328
|
}
|
|
3323
3329
|
);
|
|
3324
3330
|
export {
|