@frybynite/image-cloud 0.8.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/image-cloud-auto-init.js +741 -733
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +438 -430
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +2 -2
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/react.d.ts +5 -0
- package/dist/react.js +416 -408
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +5 -0
- package/dist/vue.js +416 -408
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +5 -0
- package/dist/web-component.js +414 -406
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ const _t = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
13
13
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
14
14
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
15
15
|
snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
|
|
16
|
-
}),
|
|
16
|
+
}), Ct = Object.freeze({
|
|
17
17
|
gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
|
|
18
18
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
19
19
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
@@ -51,18 +51,20 @@ const _t = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
51
51
|
shadow: "none"
|
|
52
52
|
})
|
|
53
53
|
}), Ut = Object.freeze({
|
|
54
|
+
tightness: 1
|
|
55
|
+
}), Ht = Object.freeze({
|
|
54
56
|
rows: 1,
|
|
55
57
|
amplitude: 100,
|
|
56
58
|
frequency: 2,
|
|
57
59
|
phaseShift: 0,
|
|
58
60
|
synchronization: "offset"
|
|
59
61
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
60
|
-
}), Ht = Object.freeze({
|
|
61
|
-
spacing: 0
|
|
62
62
|
}), Nt = Object.freeze({
|
|
63
|
+
spacing: 0
|
|
64
|
+
}), jt = Object.freeze({
|
|
63
65
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
64
66
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
65
|
-
}),
|
|
67
|
+
}), kt = Object.freeze({
|
|
66
68
|
mode: "adaptive",
|
|
67
69
|
// Default to adaptive sizing
|
|
68
70
|
minSize: 50,
|
|
@@ -74,15 +76,15 @@ const _t = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
74
76
|
// No variance by default
|
|
75
77
|
max: 1
|
|
76
78
|
})
|
|
77
|
-
}),
|
|
79
|
+
}), Wt = Object.freeze({
|
|
78
80
|
mode: "none",
|
|
79
81
|
range: Object.freeze({
|
|
80
82
|
min: -15,
|
|
81
83
|
max: 15
|
|
82
84
|
})
|
|
83
85
|
}), zt = Object.freeze({
|
|
84
|
-
sizing:
|
|
85
|
-
rotation:
|
|
86
|
+
sizing: kt,
|
|
87
|
+
rotation: Wt
|
|
86
88
|
}), Ft = Object.freeze({
|
|
87
89
|
validateUrls: !0,
|
|
88
90
|
validationTimeout: 5e3,
|
|
@@ -92,7 +94,7 @@ const _t = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
92
94
|
enabled: !1,
|
|
93
95
|
centers: !1,
|
|
94
96
|
loaders: !1
|
|
95
|
-
}),
|
|
97
|
+
}), E = Object.freeze({
|
|
96
98
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
97
99
|
loaders: [],
|
|
98
100
|
// Shared loader settings and debug config
|
|
@@ -107,7 +109,7 @@ const _t = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
107
109
|
algorithm: "radial",
|
|
108
110
|
scaleDecay: 0,
|
|
109
111
|
// No decay by default (0-1 for radial/spiral)
|
|
110
|
-
responsive:
|
|
112
|
+
responsive: jt,
|
|
111
113
|
targetCoverage: 0.6,
|
|
112
114
|
// Target 60% of container area
|
|
113
115
|
densityFactor: 1,
|
|
@@ -212,48 +214,48 @@ const _t = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
212
214
|
// Image styling
|
|
213
215
|
styling: Mt
|
|
214
216
|
});
|
|
215
|
-
function Z(
|
|
216
|
-
if (!
|
|
217
|
-
if (!t) return { ...
|
|
218
|
-
const i = { ...
|
|
219
|
-
return t.border !== void 0 && (i.border = { ...
|
|
217
|
+
function Z(n, t) {
|
|
218
|
+
if (!n) return t || {};
|
|
219
|
+
if (!t) return { ...n };
|
|
220
|
+
const i = { ...n };
|
|
221
|
+
return t.border !== void 0 && (i.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...n.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;
|
|
220
222
|
}
|
|
221
|
-
function
|
|
222
|
-
if (!t) return { ...
|
|
223
|
-
const i = Z(
|
|
224
|
-
Z(i,
|
|
223
|
+
function Gt(n, t) {
|
|
224
|
+
if (!t) return { ...n };
|
|
225
|
+
const i = Z(n.default, t.default), e = Z(
|
|
226
|
+
Z(i, n.hover),
|
|
225
227
|
t.hover
|
|
226
|
-
),
|
|
227
|
-
Z(i,
|
|
228
|
+
), o = Z(
|
|
229
|
+
Z(i, n.focused),
|
|
228
230
|
t.focused
|
|
229
231
|
);
|
|
230
232
|
return {
|
|
231
233
|
default: i,
|
|
232
234
|
hover: e,
|
|
233
|
-
focused:
|
|
235
|
+
focused: o
|
|
234
236
|
};
|
|
235
237
|
}
|
|
236
|
-
function
|
|
237
|
-
if (!t) return { ...
|
|
238
|
-
const i = { ...
|
|
238
|
+
function qt(n, t) {
|
|
239
|
+
if (!t) return { ...n };
|
|
240
|
+
const i = { ...n };
|
|
239
241
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
240
|
-
...
|
|
242
|
+
...n.sizing,
|
|
241
243
|
...t.sizing
|
|
242
244
|
}, t.sizing.variance)) {
|
|
243
|
-
const e = t.sizing.variance,
|
|
244
|
-
i.sizing.variance = { min:
|
|
245
|
+
const e = t.sizing.variance, o = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : n.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : n.sizing?.variance?.max ?? 1;
|
|
246
|
+
i.sizing.variance = { min: o, max: a };
|
|
245
247
|
}
|
|
246
248
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
247
|
-
...
|
|
249
|
+
...n.rotation,
|
|
248
250
|
...t.rotation
|
|
249
251
|
}, t.rotation.range)) {
|
|
250
|
-
const e = t.rotation.range,
|
|
251
|
-
i.rotation.range = { min:
|
|
252
|
+
const e = t.rotation.range, o = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : n.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : n.rotation?.range?.max ?? 15;
|
|
253
|
+
i.rotation.range = { min: o, max: a };
|
|
252
254
|
}
|
|
253
255
|
return i;
|
|
254
256
|
}
|
|
255
|
-
function
|
|
256
|
-
const t =
|
|
257
|
+
function Xt(n) {
|
|
258
|
+
const t = n.layout?.rotation;
|
|
257
259
|
if (t && "enabled" in t)
|
|
258
260
|
return {
|
|
259
261
|
rotation: {
|
|
@@ -262,8 +264,8 @@ function qt(o) {
|
|
|
262
264
|
}
|
|
263
265
|
};
|
|
264
266
|
}
|
|
265
|
-
function
|
|
266
|
-
const t =
|
|
267
|
+
function Yt(n) {
|
|
268
|
+
const t = n.layout?.sizing?.variance;
|
|
267
269
|
if (t)
|
|
268
270
|
return {
|
|
269
271
|
sizing: {
|
|
@@ -273,98 +275,98 @@ function Xt(o) {
|
|
|
273
275
|
}
|
|
274
276
|
};
|
|
275
277
|
}
|
|
276
|
-
function
|
|
277
|
-
const t =
|
|
278
|
-
let e =
|
|
278
|
+
function Bt(n = {}) {
|
|
279
|
+
const t = Xt(n), i = Yt(n);
|
|
280
|
+
let e = n.image;
|
|
279
281
|
(t || i) && (e = {
|
|
280
282
|
...i || {},
|
|
281
283
|
...t || {},
|
|
282
284
|
...e
|
|
283
|
-
}, e.rotation && t?.rotation &&
|
|
285
|
+
}, e.rotation && t?.rotation && n.image?.rotation && (e.rotation = {
|
|
284
286
|
...t.rotation,
|
|
285
|
-
...
|
|
287
|
+
...n.image.rotation
|
|
286
288
|
}));
|
|
287
|
-
const
|
|
288
|
-
|
|
289
|
+
const o = [...n.loaders ?? []];
|
|
290
|
+
n.images && n.images.length > 0 && o.unshift({
|
|
289
291
|
static: {
|
|
290
|
-
sources: [{ urls:
|
|
292
|
+
sources: [{ urls: n.images }]
|
|
291
293
|
}
|
|
292
294
|
});
|
|
293
295
|
const r = {
|
|
294
296
|
loaders: {
|
|
295
297
|
...Ft,
|
|
296
|
-
...
|
|
298
|
+
...n.config?.loaders ?? {}
|
|
297
299
|
}
|
|
298
300
|
}, s = {
|
|
299
|
-
loaders:
|
|
301
|
+
loaders: o,
|
|
300
302
|
config: r,
|
|
301
|
-
image:
|
|
302
|
-
layout: { ...
|
|
303
|
-
animation: { ...
|
|
304
|
-
interaction: { ...
|
|
305
|
-
rendering: { ...
|
|
306
|
-
styling:
|
|
303
|
+
image: qt(zt, e),
|
|
304
|
+
layout: { ...E.layout },
|
|
305
|
+
animation: { ...E.animation },
|
|
306
|
+
interaction: { ...E.interaction },
|
|
307
|
+
rendering: { ...E.rendering },
|
|
308
|
+
styling: Gt(Mt, n.styling)
|
|
307
309
|
};
|
|
308
|
-
if (
|
|
309
|
-
...
|
|
310
|
-
...
|
|
311
|
-
},
|
|
312
|
-
...
|
|
313
|
-
mobile:
|
|
314
|
-
tablet:
|
|
315
|
-
}),
|
|
316
|
-
...
|
|
317
|
-
...
|
|
318
|
-
})),
|
|
319
|
-
...
|
|
320
|
-
...
|
|
321
|
-
},
|
|
322
|
-
...
|
|
323
|
-
...
|
|
324
|
-
}),
|
|
325
|
-
...
|
|
326
|
-
...
|
|
327
|
-
}),
|
|
328
|
-
...
|
|
329
|
-
...
|
|
330
|
-
}),
|
|
331
|
-
...
|
|
332
|
-
...
|
|
333
|
-
start:
|
|
334
|
-
...
|
|
335
|
-
...
|
|
336
|
-
circular:
|
|
337
|
-
} :
|
|
338
|
-
timing:
|
|
339
|
-
path:
|
|
340
|
-
rotation:
|
|
341
|
-
scale:
|
|
342
|
-
})),
|
|
343
|
-
...
|
|
344
|
-
...
|
|
345
|
-
},
|
|
346
|
-
...
|
|
347
|
-
...
|
|
348
|
-
}),
|
|
349
|
-
...
|
|
350
|
-
...
|
|
351
|
-
}),
|
|
352
|
-
...
|
|
353
|
-
...
|
|
354
|
-
})),
|
|
355
|
-
...
|
|
356
|
-
...
|
|
357
|
-
},
|
|
358
|
-
...
|
|
359
|
-
...
|
|
360
|
-
breakpoints:
|
|
361
|
-
mobileDetection:
|
|
362
|
-
}),
|
|
363
|
-
...
|
|
364
|
-
...
|
|
310
|
+
if (n.layout && (s.layout = {
|
|
311
|
+
...E.layout,
|
|
312
|
+
...n.layout
|
|
313
|
+
}, n.layout.responsive && (s.layout.responsive = {
|
|
314
|
+
...E.layout.responsive,
|
|
315
|
+
mobile: n.layout.responsive.mobile ? { ...E.layout.responsive.mobile, ...n.layout.responsive.mobile } : E.layout.responsive.mobile,
|
|
316
|
+
tablet: n.layout.responsive.tablet ? { ...E.layout.responsive.tablet, ...n.layout.responsive.tablet } : E.layout.responsive.tablet
|
|
317
|
+
}), n.layout.spacing && (s.layout.spacing = {
|
|
318
|
+
...E.layout.spacing,
|
|
319
|
+
...n.layout.spacing
|
|
320
|
+
})), n.animation && (s.animation = {
|
|
321
|
+
...E.animation,
|
|
322
|
+
...n.animation
|
|
323
|
+
}, n.animation.easing && (s.animation.easing = {
|
|
324
|
+
...E.animation.easing,
|
|
325
|
+
...n.animation.easing
|
|
326
|
+
}), n.animation.queue && (s.animation.queue = {
|
|
327
|
+
...E.animation.queue,
|
|
328
|
+
...n.animation.queue
|
|
329
|
+
}), n.animation.performance && (s.animation.performance = {
|
|
330
|
+
...E.animation.performance,
|
|
331
|
+
...n.animation.performance
|
|
332
|
+
}), n.animation.entry && (s.animation.entry = {
|
|
333
|
+
...E.animation.entry,
|
|
334
|
+
...n.animation.entry,
|
|
335
|
+
start: n.animation.entry.start ? {
|
|
336
|
+
...E.animation.entry.start,
|
|
337
|
+
...n.animation.entry.start,
|
|
338
|
+
circular: n.animation.entry.start.circular ? { ...E.animation.entry.start.circular, ...n.animation.entry.start.circular } : E.animation.entry.start.circular
|
|
339
|
+
} : E.animation.entry.start,
|
|
340
|
+
timing: n.animation.entry.timing ? { ...E.animation.entry.timing, ...n.animation.entry.timing } : E.animation.entry.timing,
|
|
341
|
+
path: n.animation.entry.path ? { ...yt, ...n.animation.entry.path } : E.animation.entry.path,
|
|
342
|
+
rotation: n.animation.entry.rotation ? { ...vt, ...n.animation.entry.rotation } : E.animation.entry.rotation,
|
|
343
|
+
scale: n.animation.entry.scale ? { ...wt, ...n.animation.entry.scale } : E.animation.entry.scale
|
|
344
|
+
})), n.interaction && (s.interaction = {
|
|
345
|
+
...E.interaction,
|
|
346
|
+
...n.interaction
|
|
347
|
+
}, n.interaction.focus && (s.interaction.focus = {
|
|
348
|
+
...E.interaction.focus,
|
|
349
|
+
...n.interaction.focus
|
|
350
|
+
}), n.interaction.navigation && (s.interaction.navigation = {
|
|
351
|
+
...E.interaction.navigation,
|
|
352
|
+
...n.interaction.navigation
|
|
353
|
+
}), n.interaction.gestures && (s.interaction.gestures = {
|
|
354
|
+
...E.interaction.gestures,
|
|
355
|
+
...n.interaction.gestures
|
|
356
|
+
})), n.rendering && (s.rendering = {
|
|
357
|
+
...E.rendering,
|
|
358
|
+
...n.rendering
|
|
359
|
+
}, n.rendering.responsive && (s.rendering.responsive = {
|
|
360
|
+
...E.rendering.responsive,
|
|
361
|
+
...n.rendering.responsive,
|
|
362
|
+
breakpoints: n.rendering.responsive.breakpoints ? { ...E.rendering.responsive.breakpoints, ...n.rendering.responsive.breakpoints } : E.rendering.responsive.breakpoints,
|
|
363
|
+
mobileDetection: n.rendering.responsive.mobileDetection ? n.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
364
|
+
}), n.rendering.ui && (s.rendering.ui = {
|
|
365
|
+
...E.rendering.ui,
|
|
366
|
+
...n.rendering.ui
|
|
365
367
|
})), s.config.debug = {
|
|
366
368
|
...Ot,
|
|
367
|
-
...
|
|
369
|
+
...n.config?.debug ?? {}
|
|
368
370
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
369
371
|
const c = { shape: "hexagon", mode: "height-relative" };
|
|
370
372
|
s.styling = {
|
|
@@ -376,16 +378,16 @@ function Yt(o = {}) {
|
|
|
376
378
|
}
|
|
377
379
|
return s;
|
|
378
380
|
}
|
|
379
|
-
function
|
|
380
|
-
return { ...
|
|
381
|
+
function Jt(n, t) {
|
|
382
|
+
return { ...n ? It[n] : It.playful, ...t };
|
|
381
383
|
}
|
|
382
|
-
function
|
|
383
|
-
return { ...
|
|
384
|
+
function Vt(n, t) {
|
|
385
|
+
return { ...n ? Rt[n] : Rt.gentle, ...t };
|
|
384
386
|
}
|
|
385
|
-
function
|
|
386
|
-
return { ...
|
|
387
|
+
function Kt(n, t) {
|
|
388
|
+
return { ...n ? Ct[n] : Ct.gentle, ...t };
|
|
387
389
|
}
|
|
388
|
-
class
|
|
390
|
+
class Zt {
|
|
389
391
|
constructor(t) {
|
|
390
392
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
391
393
|
}
|
|
@@ -396,8 +398,8 @@ class Kt {
|
|
|
396
398
|
buildTransformString(t) {
|
|
397
399
|
const i = ["translate(-50%, -50%)"];
|
|
398
400
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
399
|
-
const e = t.x ?? 0,
|
|
400
|
-
i.push(`translate(${e}px, ${
|
|
401
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
402
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
401
403
|
}
|
|
402
404
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
403
405
|
}
|
|
@@ -410,9 +412,9 @@ class Kt {
|
|
|
410
412
|
* @param easing - CSS easing function (optional)
|
|
411
413
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
412
414
|
*/
|
|
413
|
-
animateTransformCancellable(t, i, e,
|
|
415
|
+
animateTransformCancellable(t, i, e, o = null, a = null) {
|
|
414
416
|
this.cancelAllAnimations(t);
|
|
415
|
-
const r =
|
|
417
|
+
const r = o ?? this.config.duration, s = a ?? this.config.easing.default, c = this.buildTransformString(i), l = this.buildTransformString(e);
|
|
416
418
|
t.style.transition = "none";
|
|
417
419
|
const u = t.animate(
|
|
418
420
|
[
|
|
@@ -449,13 +451,13 @@ class Kt {
|
|
|
449
451
|
cancelAnimation(t, i = !0) {
|
|
450
452
|
const e = this.getCurrentTransform(t.element);
|
|
451
453
|
if (t.animation.cancel(), i) {
|
|
452
|
-
const
|
|
454
|
+
const o = this.buildTransformString({
|
|
453
455
|
x: e.x,
|
|
454
456
|
y: e.y,
|
|
455
457
|
rotation: e.rotation,
|
|
456
458
|
scale: e.scale
|
|
457
459
|
});
|
|
458
|
-
t.element.style.transform =
|
|
460
|
+
t.element.style.transform = o;
|
|
459
461
|
}
|
|
460
462
|
return this.activeAnimations.delete(t.element), e;
|
|
461
463
|
}
|
|
@@ -468,8 +470,8 @@ class Kt {
|
|
|
468
470
|
const i = this.activeAnimations.get(t);
|
|
469
471
|
i && this.cancelAnimation(i, !1);
|
|
470
472
|
const e = t.getAnimations();
|
|
471
|
-
for (const
|
|
472
|
-
|
|
473
|
+
for (const o of e)
|
|
474
|
+
o.cancel();
|
|
473
475
|
}
|
|
474
476
|
/**
|
|
475
477
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -481,7 +483,7 @@ class Kt {
|
|
|
481
483
|
const e = getComputedStyle(t).transform;
|
|
482
484
|
if (e === "none" || !e)
|
|
483
485
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
484
|
-
const
|
|
486
|
+
const o = new DOMMatrix(e), a = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), s = o.e, c = o.f;
|
|
485
487
|
return { x: s, y: c, rotation: r, scale: a };
|
|
486
488
|
}
|
|
487
489
|
/**
|
|
@@ -508,9 +510,9 @@ class Kt {
|
|
|
508
510
|
* @param easing - CSS easing function (optional)
|
|
509
511
|
* @returns Promise that resolves when animation completes
|
|
510
512
|
*/
|
|
511
|
-
animateTransform(t, i, e = null,
|
|
513
|
+
animateTransform(t, i, e = null, o = null) {
|
|
512
514
|
return new Promise((a) => {
|
|
513
|
-
const r = e ?? this.config.duration, s =
|
|
515
|
+
const r = e ?? this.config.duration, s = o ?? this.config.easing.default;
|
|
514
516
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
515
517
|
a();
|
|
516
518
|
}, r);
|
|
@@ -541,99 +543,99 @@ class Kt {
|
|
|
541
543
|
return new Promise((i) => setTimeout(i, t));
|
|
542
544
|
}
|
|
543
545
|
}
|
|
544
|
-
function V(
|
|
545
|
-
return
|
|
546
|
+
function V(n, t, i) {
|
|
547
|
+
return n + (t - n) * i;
|
|
546
548
|
}
|
|
547
|
-
function
|
|
548
|
-
const { overshoot:
|
|
549
|
-
let u = 0, h = 0, d = 1,
|
|
550
|
-
for (let
|
|
551
|
-
if (
|
|
552
|
-
h =
|
|
549
|
+
function Qt(n, t, i, e) {
|
|
550
|
+
const { overshoot: o, bounces: a, decayRatio: r } = e, s = i.x - t.x, c = i.y - t.y, l = te(a, r);
|
|
551
|
+
let u = 0, h = 0, d = 1, f = o, b = !1;
|
|
552
|
+
for (let g = 0; g < l.length; g++)
|
|
553
|
+
if (n <= l[g].time) {
|
|
554
|
+
h = g === 0 ? 0 : l[g - 1].time, d = l[g].time, f = l[g].overshoot, b = l[g].isOvershoot;
|
|
553
555
|
break;
|
|
554
556
|
}
|
|
555
|
-
const
|
|
557
|
+
const p = (n - h) / (d - h);
|
|
556
558
|
if (b)
|
|
557
|
-
u = 1 +
|
|
559
|
+
u = 1 + f * ot(p);
|
|
558
560
|
else if (h === 0)
|
|
559
|
-
u =
|
|
561
|
+
u = ot(p);
|
|
560
562
|
else {
|
|
561
|
-
const
|
|
562
|
-
(y,
|
|
563
|
-
)?.overshoot ||
|
|
564
|
-
u = V(
|
|
563
|
+
const m = 1 + (l.find(
|
|
564
|
+
(y, w) => y.time > h && w > 0 && l[w - 1].isOvershoot
|
|
565
|
+
)?.overshoot || f);
|
|
566
|
+
u = V(m, 1, ot(p));
|
|
565
567
|
}
|
|
566
568
|
return {
|
|
567
569
|
x: t.x + s * u,
|
|
568
570
|
y: t.y + c * u
|
|
569
571
|
};
|
|
570
572
|
}
|
|
571
|
-
function
|
|
573
|
+
function te(n, t) {
|
|
572
574
|
const i = [];
|
|
573
575
|
let e = 0.6;
|
|
574
576
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
575
|
-
let
|
|
576
|
-
const r = 0.4 / (
|
|
577
|
-
for (let s = 0; s <
|
|
578
|
-
e += r, i.push({ time: e, overshoot:
|
|
577
|
+
let o = 0.15;
|
|
578
|
+
const r = 0.4 / (n * 2);
|
|
579
|
+
for (let s = 0; s < n; s++)
|
|
580
|
+
e += r, i.push({ time: e, overshoot: o, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
579
581
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
580
582
|
}
|
|
581
|
-
function
|
|
582
|
-
const { stiffness:
|
|
583
|
+
function ee(n, t, i, e) {
|
|
584
|
+
const { stiffness: o, damping: a, mass: r, oscillations: s } = e, c = i.x - t.x, l = i.y - t.y, u = Math.sqrt(o / r), h = a / (2 * Math.sqrt(o * r));
|
|
583
585
|
let d;
|
|
584
586
|
if (h < 1) {
|
|
585
|
-
const
|
|
586
|
-
d = 1 - b *
|
|
587
|
+
const f = u * Math.sqrt(1 - h * h), b = Math.exp(-h * u * n * 3), p = Math.cos(f * n * s * Math.PI);
|
|
588
|
+
d = 1 - b * p;
|
|
587
589
|
} else
|
|
588
|
-
d = 1 - Math.exp(-u *
|
|
590
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
589
591
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
590
592
|
x: t.x + c * d,
|
|
591
593
|
y: t.y + l * d
|
|
592
594
|
};
|
|
593
595
|
}
|
|
594
|
-
function
|
|
595
|
-
const { amplitude:
|
|
596
|
+
function ie(n, t, i, e) {
|
|
597
|
+
const { amplitude: o, frequency: a, decay: r, decayRate: s, phase: c } = e, l = i.x - t.x, u = i.y - t.y, h = Math.sqrt(l * l + u * u), d = h > 0 ? -u / h : 0, f = h > 0 ? l / h : 1, b = a * Math.PI * 2 * n + c, p = r ? Math.pow(1 - n, s) : 1, g = o * Math.sin(b) * p, m = ne(n);
|
|
596
598
|
return {
|
|
597
|
-
x: V(t.x, i.x,
|
|
598
|
-
y: V(t.y, i.y,
|
|
599
|
+
x: V(t.x, i.x, m) + g * d,
|
|
600
|
+
y: V(t.y, i.y, m) + g * f
|
|
599
601
|
};
|
|
600
602
|
}
|
|
601
|
-
function
|
|
602
|
-
return 1 - (1 -
|
|
603
|
+
function ot(n) {
|
|
604
|
+
return 1 - (1 - n) * (1 - n);
|
|
603
605
|
}
|
|
604
|
-
function
|
|
605
|
-
return 1 - Math.pow(1 -
|
|
606
|
+
function ne(n) {
|
|
607
|
+
return 1 - Math.pow(1 - n, 3);
|
|
606
608
|
}
|
|
607
|
-
function oe(
|
|
608
|
-
const { amplitude: e, frequency:
|
|
609
|
+
function oe(n, t, i) {
|
|
610
|
+
const { amplitude: e, frequency: o, decay: a } = i, r = Math.sin(n * o * Math.PI * 2), s = a ? Math.pow(1 - n, 2) : 1, c = e * r * s;
|
|
609
611
|
return t + c;
|
|
610
612
|
}
|
|
611
|
-
function
|
|
612
|
-
const { overshoot: e, bounces:
|
|
613
|
+
function se(n, t, i) {
|
|
614
|
+
const { overshoot: e, bounces: o } = i, a = [];
|
|
613
615
|
a.push({ time: 0.5, scale: e });
|
|
614
616
|
let r = e;
|
|
615
|
-
const s = 0.5, l = 0.5 / (
|
|
617
|
+
const s = 0.5, l = 0.5 / (o * 2);
|
|
616
618
|
let u = 0.5;
|
|
617
|
-
for (let d = 0; d <
|
|
618
|
-
const
|
|
619
|
-
u += l, a.push({ time: u, scale:
|
|
619
|
+
for (let d = 0; d < o; d++) {
|
|
620
|
+
const f = 1 - (r - 1) * s;
|
|
621
|
+
u += l, a.push({ time: u, scale: f }), r = 1 + (r - 1) * s * s, u += l, d < o - 1 && a.push({ time: u, scale: r });
|
|
620
622
|
}
|
|
621
623
|
a.push({ time: 1, scale: 1 });
|
|
622
624
|
let h = 1;
|
|
623
625
|
for (let d = 0; d < a.length; d++)
|
|
624
|
-
if (
|
|
625
|
-
const
|
|
626
|
-
h = b + (a[d].scale - b) *
|
|
626
|
+
if (n <= a[d].time) {
|
|
627
|
+
const f = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (n - f) / (a[d].time - f), g = ot(p);
|
|
628
|
+
h = b + (a[d].scale - b) * g;
|
|
627
629
|
break;
|
|
628
630
|
}
|
|
629
631
|
return h * t;
|
|
630
632
|
}
|
|
631
|
-
function
|
|
633
|
+
function ae(n) {
|
|
632
634
|
const {
|
|
633
635
|
element: t,
|
|
634
636
|
startPosition: i,
|
|
635
637
|
endPosition: e,
|
|
636
|
-
pathConfig:
|
|
638
|
+
pathConfig: o,
|
|
637
639
|
duration: a,
|
|
638
640
|
imageWidth: r,
|
|
639
641
|
imageHeight: s,
|
|
@@ -642,60 +644,60 @@ function se(o) {
|
|
|
642
644
|
onComplete: u,
|
|
643
645
|
rotationConfig: h,
|
|
644
646
|
startRotation: d,
|
|
645
|
-
scaleConfig:
|
|
647
|
+
scaleConfig: f,
|
|
646
648
|
startScale: b
|
|
647
|
-
} =
|
|
648
|
-
if ((
|
|
649
|
+
} = n, p = o.type, g = d !== void 0 && d !== c, m = h?.mode === "wobble", y = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, w = g || m, v = b !== void 0 && b !== l, I = f?.mode === "pop", x = f?.pop || { overshoot: 1.2, bounces: 1 };
|
|
650
|
+
if ((p === "linear" || p === "arc") && !w && !(v || I)) {
|
|
649
651
|
u && u();
|
|
650
652
|
return;
|
|
651
653
|
}
|
|
652
|
-
const
|
|
653
|
-
function
|
|
654
|
-
const N =
|
|
655
|
-
let
|
|
656
|
-
switch (
|
|
654
|
+
const F = performance.now(), L = -r / 2, _ = -s / 2;
|
|
655
|
+
function O(H) {
|
|
656
|
+
const N = H - F, C = Math.min(N / a, 1);
|
|
657
|
+
let D;
|
|
658
|
+
switch (p) {
|
|
657
659
|
case "bounce": {
|
|
658
|
-
const
|
|
659
|
-
|
|
660
|
-
|
|
660
|
+
const j = Jt(
|
|
661
|
+
o.bouncePreset,
|
|
662
|
+
o.bounce
|
|
661
663
|
);
|
|
662
|
-
|
|
664
|
+
D = Qt(C, i, e, j);
|
|
663
665
|
break;
|
|
664
666
|
}
|
|
665
667
|
case "elastic": {
|
|
666
|
-
const
|
|
667
|
-
|
|
668
|
-
|
|
668
|
+
const j = Vt(
|
|
669
|
+
o.elasticPreset,
|
|
670
|
+
o.elastic
|
|
669
671
|
);
|
|
670
|
-
|
|
672
|
+
D = ee(C, i, e, j);
|
|
671
673
|
break;
|
|
672
674
|
}
|
|
673
675
|
case "wave": {
|
|
674
|
-
const
|
|
675
|
-
|
|
676
|
-
|
|
676
|
+
const j = Kt(
|
|
677
|
+
o.wavePreset,
|
|
678
|
+
o.wave
|
|
677
679
|
);
|
|
678
|
-
|
|
680
|
+
D = ie(C, i, e, j);
|
|
679
681
|
break;
|
|
680
682
|
}
|
|
681
683
|
default:
|
|
682
|
-
|
|
683
|
-
x: V(i.x, e.x,
|
|
684
|
-
y: V(i.y, e.y,
|
|
684
|
+
D = {
|
|
685
|
+
x: V(i.x, e.x, C),
|
|
686
|
+
y: V(i.y, e.y, C)
|
|
685
687
|
};
|
|
686
688
|
}
|
|
687
|
-
const
|
|
688
|
-
let
|
|
689
|
-
|
|
690
|
-
let
|
|
691
|
-
|
|
689
|
+
const G = D.x - e.x, U = D.y - e.y;
|
|
690
|
+
let M;
|
|
691
|
+
m ? M = oe(C, c, y) : g ? M = V(d, c, C) : M = c;
|
|
692
|
+
let T;
|
|
693
|
+
I ? T = se(C, l, x) : v ? T = V(b, l, C) : T = l, t.style.transform = `translate(${L}px, ${_}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${T})`, C < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
|
|
692
694
|
}
|
|
693
|
-
requestAnimationFrame(
|
|
695
|
+
requestAnimationFrame(O);
|
|
694
696
|
}
|
|
695
|
-
function
|
|
696
|
-
return
|
|
697
|
+
function re(n) {
|
|
698
|
+
return n === "bounce" || n === "elastic" || n === "wave";
|
|
697
699
|
}
|
|
698
|
-
const
|
|
700
|
+
const ce = {
|
|
699
701
|
radial: "center",
|
|
700
702
|
spiral: "center",
|
|
701
703
|
grid: "top",
|
|
@@ -704,7 +706,7 @@ const re = {
|
|
|
704
706
|
wave: "left",
|
|
705
707
|
honeycomb: "center"
|
|
706
708
|
};
|
|
707
|
-
class
|
|
709
|
+
class le {
|
|
708
710
|
constructor(t, i) {
|
|
709
711
|
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || wt;
|
|
710
712
|
}
|
|
@@ -712,12 +714,12 @@ class ce {
|
|
|
712
714
|
* Get the effective start position, considering layout-aware defaults
|
|
713
715
|
*/
|
|
714
716
|
resolveStartPosition() {
|
|
715
|
-
return this.config.start.position ? this.config.start.position :
|
|
717
|
+
return this.config.start.position ? this.config.start.position : ce[this.layoutAlgorithm] || "nearest-edge";
|
|
716
718
|
}
|
|
717
719
|
/**
|
|
718
720
|
* Calculate the starting position for an image's entry animation
|
|
719
721
|
*/
|
|
720
|
-
calculateStartPosition(t, i, e,
|
|
722
|
+
calculateStartPosition(t, i, e, o, a) {
|
|
721
723
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
722
724
|
switch (r) {
|
|
723
725
|
case "nearest-edge":
|
|
@@ -739,7 +741,7 @@ class ce {
|
|
|
739
741
|
t,
|
|
740
742
|
i,
|
|
741
743
|
e,
|
|
742
|
-
|
|
744
|
+
o,
|
|
743
745
|
a
|
|
744
746
|
);
|
|
745
747
|
default:
|
|
@@ -749,28 +751,28 @@ class ce {
|
|
|
749
751
|
/**
|
|
750
752
|
* Calculate start position from the nearest edge (current default behavior)
|
|
751
753
|
*/
|
|
752
|
-
calculateNearestEdge(t, i, e,
|
|
754
|
+
calculateNearestEdge(t, i, e, o) {
|
|
753
755
|
const a = t.x, r = t.y, s = a, c = e.width - a, l = r, u = e.height - r, h = Math.min(s, c, l, u);
|
|
754
|
-
let d = t.x,
|
|
755
|
-
return h === s ? d = -(i.width +
|
|
756
|
+
let d = t.x, f = t.y;
|
|
757
|
+
return h === s ? d = -(i.width + o) : h === c ? d = e.width + o : h === l ? f = -(i.height + o) : f = e.height + o, { x: d, y: f };
|
|
756
758
|
}
|
|
757
759
|
/**
|
|
758
760
|
* Calculate start position from a specific edge
|
|
759
761
|
*/
|
|
760
|
-
calculateEdgePosition(t, i, e,
|
|
762
|
+
calculateEdgePosition(t, i, e, o, a) {
|
|
761
763
|
let r = i.x, s = i.y;
|
|
762
764
|
switch (t) {
|
|
763
765
|
case "top":
|
|
764
766
|
s = -(e.height + a);
|
|
765
767
|
break;
|
|
766
768
|
case "bottom":
|
|
767
|
-
s =
|
|
769
|
+
s = o.height + a;
|
|
768
770
|
break;
|
|
769
771
|
case "left":
|
|
770
772
|
r = -(e.width + a);
|
|
771
773
|
break;
|
|
772
774
|
case "right":
|
|
773
|
-
r =
|
|
775
|
+
r = o.width + a;
|
|
774
776
|
break;
|
|
775
777
|
}
|
|
776
778
|
return { x: r, y: s };
|
|
@@ -779,9 +781,9 @@ class ce {
|
|
|
779
781
|
* Calculate start position from center with scale animation
|
|
780
782
|
*/
|
|
781
783
|
calculateCenterPosition(t, i, e) {
|
|
782
|
-
const
|
|
784
|
+
const o = t.width / 2, a = t.height / 2;
|
|
783
785
|
return {
|
|
784
|
-
x:
|
|
786
|
+
x: o,
|
|
785
787
|
y: a,
|
|
786
788
|
useScale: !0
|
|
787
789
|
// Signal to use scale animation from 0
|
|
@@ -790,28 +792,28 @@ class ce {
|
|
|
790
792
|
/**
|
|
791
793
|
* Calculate start position from a random edge
|
|
792
794
|
*/
|
|
793
|
-
calculateRandomEdge(t, i, e,
|
|
795
|
+
calculateRandomEdge(t, i, e, o) {
|
|
794
796
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
795
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
797
|
+
return this.calculateEdgePosition(r, t, i, e, o);
|
|
796
798
|
}
|
|
797
799
|
/**
|
|
798
800
|
* Calculate start position on a circle around the container
|
|
799
801
|
*/
|
|
800
|
-
calculateCircularPosition(t, i, e,
|
|
802
|
+
calculateCircularPosition(t, i, e, o, a) {
|
|
801
803
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
802
804
|
let c;
|
|
803
805
|
const l = r.radius || "120%";
|
|
804
806
|
if (typeof l == "string" && l.endsWith("%")) {
|
|
805
|
-
const
|
|
807
|
+
const p = parseFloat(l) / 100;
|
|
806
808
|
c = Math.sqrt(
|
|
807
809
|
e.width ** 2 + e.height ** 2
|
|
808
|
-
) *
|
|
810
|
+
) * p / 2;
|
|
809
811
|
} else
|
|
810
812
|
c = typeof l == "number" ? l : 500;
|
|
811
813
|
let u;
|
|
812
|
-
s === "even" ? u =
|
|
813
|
-
const h = e.width / 2, d = e.height / 2,
|
|
814
|
-
return { x:
|
|
814
|
+
s === "even" ? u = o / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
815
|
+
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) * c, b = d + Math.sin(u) * c;
|
|
816
|
+
return { x: f, y: b };
|
|
815
817
|
}
|
|
816
818
|
/**
|
|
817
819
|
* Get animation parameters for an image
|
|
@@ -830,17 +832,17 @@ class ce {
|
|
|
830
832
|
* Build a CSS transform string for the start position
|
|
831
833
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
832
834
|
*/
|
|
833
|
-
buildStartTransform(t, i, e,
|
|
834
|
-
const l = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = c !== void 0 ? c :
|
|
835
|
-
return t.useScale ? `${
|
|
835
|
+
buildStartTransform(t, i, e, o, a, r, s, c) {
|
|
836
|
+
const l = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = c !== void 0 ? c : o, f = a !== void 0 ? -a / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${f}px, ${b}px)` : "translate(-50%, -50%)";
|
|
837
|
+
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
836
838
|
}
|
|
837
839
|
/**
|
|
838
840
|
* Build the final CSS transform string
|
|
839
841
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
840
842
|
*/
|
|
841
|
-
buildFinalTransform(t, i, e,
|
|
842
|
-
if (e !== void 0 &&
|
|
843
|
-
const a = -e / 2, r = -
|
|
843
|
+
buildFinalTransform(t, i, e, o) {
|
|
844
|
+
if (e !== void 0 && o !== void 0) {
|
|
845
|
+
const a = -e / 2, r = -o / 2;
|
|
844
846
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
845
847
|
}
|
|
846
848
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -857,7 +859,7 @@ class ce {
|
|
|
857
859
|
* Check if the current path type requires JavaScript animation
|
|
858
860
|
*/
|
|
859
861
|
requiresJSAnimation() {
|
|
860
|
-
return
|
|
862
|
+
return re(this.pathConfig.type);
|
|
861
863
|
}
|
|
862
864
|
/**
|
|
863
865
|
* Get the path configuration
|
|
@@ -906,12 +908,12 @@ class ce {
|
|
|
906
908
|
return t + (Math.random() - 0.5) * 60;
|
|
907
909
|
if (typeof e == "number")
|
|
908
910
|
return e;
|
|
909
|
-
const
|
|
910
|
-
return e.min + Math.random() *
|
|
911
|
+
const o = e.max - e.min;
|
|
912
|
+
return e.min + Math.random() * o;
|
|
911
913
|
}
|
|
912
914
|
case "spin": {
|
|
913
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
914
|
-
return t + e * 360 *
|
|
915
|
+
const e = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
|
|
916
|
+
return t + e * 360 * o;
|
|
915
917
|
}
|
|
916
918
|
case "random":
|
|
917
919
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -959,7 +961,7 @@ class ce {
|
|
|
959
961
|
amplitude: 15,
|
|
960
962
|
frequency: 3,
|
|
961
963
|
decay: !0
|
|
962
|
-
}, { amplitude:
|
|
964
|
+
}, { amplitude: o, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), c = r ? Math.pow(1 - t, 2) : 1, l = o * s * c;
|
|
963
965
|
return i + l;
|
|
964
966
|
}
|
|
965
967
|
/**
|
|
@@ -1016,7 +1018,7 @@ class ce {
|
|
|
1016
1018
|
const e = this.scaleConfig.pop || {
|
|
1017
1019
|
overshoot: 1.2,
|
|
1018
1020
|
bounces: 1
|
|
1019
|
-
}, { overshoot:
|
|
1021
|
+
}, { overshoot: o, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, o);
|
|
1020
1022
|
let s = i;
|
|
1021
1023
|
for (let c = 0; c < r.length; c++)
|
|
1022
1024
|
if (t <= r[c].time) {
|
|
@@ -1032,12 +1034,12 @@ class ce {
|
|
|
1032
1034
|
generateScaleBounceKeyframes(t, i) {
|
|
1033
1035
|
const e = [];
|
|
1034
1036
|
e.push({ time: 0.5, scale: i });
|
|
1035
|
-
let
|
|
1037
|
+
let o = i;
|
|
1036
1038
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1037
1039
|
let c = 0.5;
|
|
1038
1040
|
for (let l = 0; l < t; l++) {
|
|
1039
|
-
const u = 1 - (
|
|
1040
|
-
c += s, e.push({ time: c, scale: u }),
|
|
1041
|
+
const u = 1 - (o - 1) * a;
|
|
1042
|
+
c += s, e.push({ time: c, scale: u }), o = 1 + (o - 1) * a * a, c += s, l < t - 1 && e.push({ time: c, scale: o });
|
|
1041
1043
|
}
|
|
1042
1044
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1043
1045
|
}
|
|
@@ -1048,7 +1050,7 @@ class ce {
|
|
|
1048
1050
|
return 1 - (1 - t) * (1 - t);
|
|
1049
1051
|
}
|
|
1050
1052
|
}
|
|
1051
|
-
class
|
|
1053
|
+
class he {
|
|
1052
1054
|
constructor(t, i = {}) {
|
|
1053
1055
|
this.config = t, this.imageConfig = i;
|
|
1054
1056
|
}
|
|
@@ -1060,19 +1062,19 @@ class le {
|
|
|
1060
1062
|
* @returns Array of layout objects with position, rotation, scale
|
|
1061
1063
|
*/
|
|
1062
1064
|
generate(t, i, e = {}) {
|
|
1063
|
-
const
|
|
1064
|
-
for (let
|
|
1065
|
-
const R = this.random(
|
|
1066
|
-
id:
|
|
1065
|
+
const o = [], { width: a, height: r } = i, s = this.config.spacing.padding, c = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || f !== 1, g = c * 1.5 / 2, m = c / 2, y = a - s - g, w = r - s - m, v = s + g, I = s + m;
|
|
1066
|
+
for (let x = 0; x < t; x++) {
|
|
1067
|
+
const R = this.random(v, y), F = this.random(I, w), L = l === "random" ? this.random(u, h) : 0, _ = b ? this.random(d, f) : 1, O = c * _, H = {
|
|
1068
|
+
id: x,
|
|
1067
1069
|
x: R,
|
|
1068
|
-
y:
|
|
1069
|
-
rotation:
|
|
1070
|
+
y: F,
|
|
1071
|
+
rotation: L,
|
|
1070
1072
|
scale: _,
|
|
1071
|
-
baseSize:
|
|
1073
|
+
baseSize: O
|
|
1072
1074
|
};
|
|
1073
|
-
|
|
1075
|
+
o.push(H);
|
|
1074
1076
|
}
|
|
1075
|
-
return
|
|
1077
|
+
return o;
|
|
1076
1078
|
}
|
|
1077
1079
|
/**
|
|
1078
1080
|
* Utility: Generate random number between min and max
|
|
@@ -1084,7 +1086,7 @@ class le {
|
|
|
1084
1086
|
return Math.random() * (i - t) + t;
|
|
1085
1087
|
}
|
|
1086
1088
|
}
|
|
1087
|
-
class
|
|
1089
|
+
class de {
|
|
1088
1090
|
constructor(t, i = {}) {
|
|
1089
1091
|
this.config = t, this.imageConfig = i;
|
|
1090
1092
|
}
|
|
@@ -1096,49 +1098,55 @@ class he {
|
|
|
1096
1098
|
* @returns Array of layout objects with position, rotation, scale
|
|
1097
1099
|
*/
|
|
1098
1100
|
generate(t, i, e = {}) {
|
|
1099
|
-
const
|
|
1101
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = {
|
|
1102
|
+
...Ut,
|
|
1103
|
+
...this.config.radial
|
|
1104
|
+
}, g = e.fixedHeight ?? s, m = a / 2, y = r / 2, w = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, I = Math.max(g * 0.8, Math.min(
|
|
1105
|
+
m - v - g / 2,
|
|
1106
|
+
y - v - g / 2
|
|
1107
|
+
));
|
|
1100
1108
|
if (t > 0) {
|
|
1101
|
-
const
|
|
1102
|
-
|
|
1109
|
+
const F = f ? this.random(h, d) : 1, L = g * F;
|
|
1110
|
+
o.push({
|
|
1103
1111
|
id: 0,
|
|
1104
|
-
x:
|
|
1105
|
-
y
|
|
1112
|
+
x: m,
|
|
1113
|
+
y,
|
|
1106
1114
|
rotation: c === "random" ? this.random(l * 0.33, u * 0.33) : 0,
|
|
1107
1115
|
// Less rotation for center
|
|
1108
|
-
scale:
|
|
1109
|
-
baseSize:
|
|
1116
|
+
scale: F,
|
|
1117
|
+
baseSize: L,
|
|
1110
1118
|
zIndex: 100
|
|
1111
1119
|
// Center image is highest
|
|
1112
1120
|
});
|
|
1113
1121
|
}
|
|
1114
|
-
let
|
|
1115
|
-
for (;
|
|
1116
|
-
const
|
|
1117
|
-
if (
|
|
1118
|
-
|
|
1122
|
+
let x = 1, R = 1;
|
|
1123
|
+
for (; x < t; ) {
|
|
1124
|
+
const F = R / w, L = b > 0 ? 1 - F * b * 0.5 : 1, _ = Math.max(g * 0.8, I / w * 1.5 / p.tightness), O = R * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), C = this.estimateWidth(g), D = Math.floor(N / (C * 0.7));
|
|
1125
|
+
if (D === 0) {
|
|
1126
|
+
R++;
|
|
1119
1127
|
continue;
|
|
1120
1128
|
}
|
|
1121
|
-
const
|
|
1122
|
-
for (let
|
|
1123
|
-
const
|
|
1124
|
-
let
|
|
1125
|
-
const
|
|
1126
|
-
|
|
1127
|
-
const
|
|
1128
|
-
|
|
1129
|
-
id:
|
|
1130
|
-
x:
|
|
1131
|
-
y:
|
|
1132
|
-
rotation:
|
|
1133
|
-
scale:
|
|
1129
|
+
const G = 2 * Math.PI / D, U = R * (20 * Math.PI / 180);
|
|
1130
|
+
for (let M = 0; M < D && x < t; M++) {
|
|
1131
|
+
const T = M * G + U, j = f ? this.random(h, d) : 1, X = L * j, A = g * X;
|
|
1132
|
+
let $ = m + Math.cos(T) * H, z = y + Math.sin(T) * O;
|
|
1133
|
+
const P = A * 1.5 / 2, k = A / 2;
|
|
1134
|
+
$ - P < v ? $ = v + P : $ + P > a - v && ($ = a - v - P), z - k < v ? z = v + k : z + k > r - v && (z = r - v - k);
|
|
1135
|
+
const B = c === "random" ? this.random(l, u) : 0;
|
|
1136
|
+
o.push({
|
|
1137
|
+
id: x,
|
|
1138
|
+
x: $,
|
|
1139
|
+
y: z,
|
|
1140
|
+
rotation: B,
|
|
1141
|
+
scale: X,
|
|
1134
1142
|
baseSize: A,
|
|
1135
|
-
zIndex: Math.max(1, 100 -
|
|
1143
|
+
zIndex: Math.max(1, 100 - R)
|
|
1136
1144
|
// Outer rings have lower z-index
|
|
1137
|
-
}),
|
|
1145
|
+
}), x++;
|
|
1138
1146
|
}
|
|
1139
|
-
|
|
1147
|
+
R++;
|
|
1140
1148
|
}
|
|
1141
|
-
return
|
|
1149
|
+
return o;
|
|
1142
1150
|
}
|
|
1143
1151
|
/**
|
|
1144
1152
|
* Estimate image width based on height
|
|
@@ -1159,7 +1167,7 @@ class he {
|
|
|
1159
1167
|
return Math.random() * (i - t) + t;
|
|
1160
1168
|
}
|
|
1161
1169
|
}
|
|
1162
|
-
const
|
|
1170
|
+
const ue = {
|
|
1163
1171
|
columns: "auto",
|
|
1164
1172
|
rows: "auto",
|
|
1165
1173
|
stagger: "none",
|
|
@@ -1169,7 +1177,7 @@ const de = {
|
|
|
1169
1177
|
alignment: "center",
|
|
1170
1178
|
gap: 10,
|
|
1171
1179
|
overflowOffset: 0.25
|
|
1172
|
-
},
|
|
1180
|
+
}, Tt = [
|
|
1173
1181
|
{ x: 1, y: 1 },
|
|
1174
1182
|
// bottom-right
|
|
1175
1183
|
{ x: -1, y: -1 },
|
|
@@ -1187,7 +1195,7 @@ const de = {
|
|
|
1187
1195
|
{ x: 0, y: 1 }
|
|
1188
1196
|
// down
|
|
1189
1197
|
];
|
|
1190
|
-
class
|
|
1198
|
+
class ge {
|
|
1191
1199
|
constructor(t, i = {}) {
|
|
1192
1200
|
this.config = t, this.imageConfig = i;
|
|
1193
1201
|
}
|
|
@@ -1199,59 +1207,59 @@ class ue {
|
|
|
1199
1207
|
* @returns Array of layout objects with position, rotation, scale
|
|
1200
1208
|
*/
|
|
1201
1209
|
generate(t, i, e = {}) {
|
|
1202
|
-
const
|
|
1210
|
+
const o = [], { width: a, height: r } = i, s = { ...ue, ...this.config.grid }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, b = a - 2 * c, p = r - 2 * c, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1203
1211
|
t,
|
|
1204
1212
|
b,
|
|
1205
|
-
|
|
1213
|
+
p,
|
|
1206
1214
|
l,
|
|
1207
1215
|
s
|
|
1208
|
-
), y = s.stagger === "row",
|
|
1216
|
+
), y = s.stagger === "row", w = s.stagger === "column", v = y ? g + 0.5 : g, I = w ? m + 0.5 : m, x = (b - s.gap * (g - 1)) / v, R = (p - s.gap * (m - 1)) / I, F = y ? x / 2 : 0, L = w ? R / 2 : 0, _ = 1 + s.overlap, O = Math.min(x, R) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = g * x + (g - 1) * s.gap + F, C = m * R + (m - 1) * s.gap + L, D = c + (b - N) / 2, G = c + (p - C) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", T = M && t > U;
|
|
1209
1217
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1210
1218
|
gridConfigColumns: s.columns,
|
|
1211
1219
|
gridConfigRows: s.rows,
|
|
1212
|
-
columns:
|
|
1213
|
-
rows:
|
|
1214
|
-
cellCount:
|
|
1215
|
-
hasFixedGrid:
|
|
1220
|
+
columns: g,
|
|
1221
|
+
rows: m,
|
|
1222
|
+
cellCount: U,
|
|
1223
|
+
hasFixedGrid: M,
|
|
1216
1224
|
imageCount: t,
|
|
1217
|
-
isOverflowMode:
|
|
1225
|
+
isOverflowMode: T
|
|
1218
1226
|
});
|
|
1219
|
-
const
|
|
1220
|
-
for (let
|
|
1221
|
-
let
|
|
1222
|
-
if (
|
|
1223
|
-
const q =
|
|
1224
|
-
|
|
1227
|
+
const j = T ? new Array(U).fill(0) : [], X = Math.min(x, R) * s.overflowOffset;
|
|
1228
|
+
for (let A = 0; A < t; A++) {
|
|
1229
|
+
let $, z, Y = 0;
|
|
1230
|
+
if (T && A >= U) {
|
|
1231
|
+
const q = A - U, W = q % U;
|
|
1232
|
+
Y = Math.floor(q / U) + 1, j[W]++, s.fillDirection === "row" ? ($ = W % g, z = Math.floor(W / g)) : (z = W % m, $ = Math.floor(W / m));
|
|
1225
1233
|
} else
|
|
1226
|
-
s.fillDirection === "row" ? (
|
|
1227
|
-
let
|
|
1228
|
-
if (s.stagger === "row" &&
|
|
1229
|
-
const q = (
|
|
1230
|
-
|
|
1234
|
+
s.fillDirection === "row" ? ($ = A % g, z = Math.floor(A / g)) : (z = A % m, $ = Math.floor(A / m));
|
|
1235
|
+
let P = D + $ * (x + s.gap) + x / 2, k = G + z * (R + s.gap) + R / 2;
|
|
1236
|
+
if (s.stagger === "row" && z % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (k += R / 2), Y > 0) {
|
|
1237
|
+
const q = (Y - 1) % Tt.length, W = Tt[q];
|
|
1238
|
+
P += W.x * X, k += W.y * X;
|
|
1231
1239
|
}
|
|
1232
1240
|
if (s.jitter > 0) {
|
|
1233
|
-
const q =
|
|
1234
|
-
|
|
1241
|
+
const q = x / 2 * s.jitter, W = R / 2 * s.jitter;
|
|
1242
|
+
P += this.random(-q, q), k += this.random(-W, W);
|
|
1235
1243
|
}
|
|
1236
|
-
let B =
|
|
1237
|
-
if (!
|
|
1238
|
-
const q = t %
|
|
1239
|
-
if (
|
|
1240
|
-
const St = q *
|
|
1244
|
+
let B = P, J = k;
|
|
1245
|
+
if (!T && s.fillDirection === "row") {
|
|
1246
|
+
const q = t % g || g;
|
|
1247
|
+
if (z === Math.floor((t - 1) / g) && q < g) {
|
|
1248
|
+
const St = q * x + (q - 1) * s.gap;
|
|
1241
1249
|
let gt = 0;
|
|
1242
1250
|
s.alignment === "center" ? gt = (N - St) / 2 : s.alignment === "end" && (gt = N - St), B += gt;
|
|
1243
1251
|
}
|
|
1244
1252
|
}
|
|
1245
|
-
const rt =
|
|
1253
|
+
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2, nt = K / 2, lt = c + it, ht = a - c - it, $t = c + nt, Pt = r - c - nt;
|
|
1246
1254
|
B = Math.max(lt, Math.min(B, ht)), J = Math.max($t, Math.min(J, Pt));
|
|
1247
1255
|
let dt = 0;
|
|
1248
1256
|
if (u === "random") {
|
|
1249
|
-
const q = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1250
|
-
s.jitter > 0 ? dt = this.random(q * s.jitter,
|
|
1257
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, W = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1258
|
+
s.jitter > 0 ? dt = this.random(q * s.jitter, W * s.jitter) : dt = this.random(q, W);
|
|
1251
1259
|
}
|
|
1252
1260
|
let ut;
|
|
1253
|
-
|
|
1254
|
-
id:
|
|
1261
|
+
T && Y > 0 ? ut = 50 - Y : ut = T ? 100 + A : A + 1, o.push({
|
|
1262
|
+
id: A,
|
|
1255
1263
|
x: B,
|
|
1256
1264
|
y: J,
|
|
1257
1265
|
rotation: dt,
|
|
@@ -1260,12 +1268,12 @@ class ue {
|
|
|
1260
1268
|
zIndex: ut
|
|
1261
1269
|
});
|
|
1262
1270
|
}
|
|
1263
|
-
return
|
|
1271
|
+
return o;
|
|
1264
1272
|
}
|
|
1265
1273
|
/**
|
|
1266
1274
|
* Calculate optimal grid dimensions based on image count and container
|
|
1267
1275
|
*/
|
|
1268
|
-
calculateGridDimensions(t, i, e,
|
|
1276
|
+
calculateGridDimensions(t, i, e, o, a) {
|
|
1269
1277
|
let r, s;
|
|
1270
1278
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1271
1279
|
r = a.columns, s = a.rows;
|
|
@@ -1287,14 +1295,14 @@ class ue {
|
|
|
1287
1295
|
return Math.random() * (i - t) + t;
|
|
1288
1296
|
}
|
|
1289
1297
|
}
|
|
1290
|
-
const
|
|
1298
|
+
const fe = Math.PI * (3 - Math.sqrt(5)), me = {
|
|
1291
1299
|
spiralType: "golden",
|
|
1292
1300
|
direction: "counterclockwise",
|
|
1293
1301
|
tightness: 1,
|
|
1294
1302
|
scaleDecay: 0,
|
|
1295
1303
|
startAngle: 0
|
|
1296
1304
|
};
|
|
1297
|
-
class
|
|
1305
|
+
class pe {
|
|
1298
1306
|
constructor(t, i = {}) {
|
|
1299
1307
|
this.config = t, this.imageConfig = i;
|
|
1300
1308
|
}
|
|
@@ -1306,79 +1314,79 @@ class me {
|
|
|
1306
1314
|
* @returns Array of layout objects with position, rotation, scale
|
|
1307
1315
|
*/
|
|
1308
1316
|
generate(t, i, e = {}) {
|
|
1309
|
-
const
|
|
1310
|
-
|
|
1317
|
+
const o = [], { width: a, height: r } = i, s = { ...me, ...this.config.spiral }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || b !== 1, g = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, y = r / 2, w = Math.min(
|
|
1318
|
+
m - c - l / 2,
|
|
1311
1319
|
y - c - l / 2
|
|
1312
|
-
),
|
|
1313
|
-
for (let
|
|
1314
|
-
let
|
|
1320
|
+
), v = s.direction === "clockwise" ? -1 : 1;
|
|
1321
|
+
for (let I = 0; I < t; I++) {
|
|
1322
|
+
let x, R;
|
|
1315
1323
|
if (s.spiralType === "golden")
|
|
1316
|
-
|
|
1324
|
+
x = I * fe * v + s.startAngle, R = this.calculateGoldenRadius(I, t, w, s.tightness);
|
|
1317
1325
|
else if (s.spiralType === "archimedean") {
|
|
1318
|
-
const
|
|
1319
|
-
|
|
1326
|
+
const P = I * 0.5 * s.tightness;
|
|
1327
|
+
x = P * v + s.startAngle, R = this.calculateArchimedeanRadius(P, t, w, s.tightness);
|
|
1320
1328
|
} else {
|
|
1321
|
-
const
|
|
1322
|
-
|
|
1329
|
+
const P = I * 0.3 * s.tightness;
|
|
1330
|
+
x = P * v + s.startAngle, R = this.calculateLogarithmicRadius(P, t, w, s.tightness);
|
|
1323
1331
|
}
|
|
1324
|
-
const
|
|
1325
|
-
let
|
|
1332
|
+
const F = m + Math.cos(x) * R, L = y + Math.sin(x) * R, _ = R / w, O = g > 0 ? 1 - _ * g * 0.5 : 1, H = p ? this.random(f, b) : 1, N = O * H, C = l * N, G = C * 1.5 / 2, U = C / 2, M = c + G, T = a - c - G, j = c + U, X = r - c - U, A = Math.max(M, Math.min(F, T)), $ = Math.max(j, Math.min(L, X));
|
|
1333
|
+
let z = 0;
|
|
1326
1334
|
if (u === "random") {
|
|
1327
|
-
const
|
|
1328
|
-
|
|
1329
|
-
} else u === "tangent" && (
|
|
1330
|
-
const
|
|
1331
|
-
|
|
1332
|
-
id:
|
|
1333
|
-
x:
|
|
1334
|
-
y:
|
|
1335
|
-
rotation:
|
|
1335
|
+
const P = x * 180 / Math.PI % 360, k = this.random(h, d);
|
|
1336
|
+
z = s.spiralType === "golden" ? k : P * 0.1 + k * 0.9;
|
|
1337
|
+
} else u === "tangent" && (z = this.calculateSpiralTangent(x, R, s));
|
|
1338
|
+
const Y = t - I;
|
|
1339
|
+
o.push({
|
|
1340
|
+
id: I,
|
|
1341
|
+
x: A,
|
|
1342
|
+
y: $,
|
|
1343
|
+
rotation: z,
|
|
1336
1344
|
scale: N,
|
|
1337
|
-
baseSize:
|
|
1338
|
-
zIndex:
|
|
1345
|
+
baseSize: C,
|
|
1346
|
+
zIndex: Y
|
|
1339
1347
|
});
|
|
1340
1348
|
}
|
|
1341
|
-
return
|
|
1349
|
+
return o;
|
|
1342
1350
|
}
|
|
1343
1351
|
/**
|
|
1344
1352
|
* Calculate tangent angle for spiral curve at given position
|
|
1345
1353
|
* This aligns the image along the spiral's direction of travel
|
|
1346
1354
|
*/
|
|
1347
1355
|
calculateSpiralTangent(t, i, e) {
|
|
1348
|
-
let
|
|
1356
|
+
let o;
|
|
1349
1357
|
if (e.spiralType === "golden")
|
|
1350
|
-
|
|
1358
|
+
o = t + Math.PI / 2;
|
|
1351
1359
|
else if (e.spiralType === "archimedean") {
|
|
1352
1360
|
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1353
|
-
|
|
1361
|
+
o = t + s;
|
|
1354
1362
|
} else {
|
|
1355
1363
|
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1356
|
-
|
|
1364
|
+
o = t + s;
|
|
1357
1365
|
}
|
|
1358
|
-
return
|
|
1366
|
+
return o * 180 / Math.PI % 360 - 90;
|
|
1359
1367
|
}
|
|
1360
1368
|
/**
|
|
1361
1369
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1362
1370
|
* Creates even distribution like sunflower seeds
|
|
1363
1371
|
*/
|
|
1364
|
-
calculateGoldenRadius(t, i, e,
|
|
1365
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1372
|
+
calculateGoldenRadius(t, i, e, o) {
|
|
1373
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / o;
|
|
1366
1374
|
return Math.min(r, e);
|
|
1367
1375
|
}
|
|
1368
1376
|
/**
|
|
1369
1377
|
* Calculate radius for Archimedean spiral
|
|
1370
1378
|
* r = a + b*θ (constant spacing between arms)
|
|
1371
1379
|
*/
|
|
1372
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1373
|
-
const a = i * 0.5 *
|
|
1380
|
+
calculateArchimedeanRadius(t, i, e, o) {
|
|
1381
|
+
const a = i * 0.5 * o;
|
|
1374
1382
|
return t / a * e;
|
|
1375
1383
|
}
|
|
1376
1384
|
/**
|
|
1377
1385
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1378
1386
|
* r = a * e^(b*θ)
|
|
1379
1387
|
*/
|
|
1380
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1381
|
-
const a = e * 0.05, r = 0.15 /
|
|
1388
|
+
calculateLogarithmicRadius(t, i, e, o) {
|
|
1389
|
+
const a = e * 0.05, r = 0.15 / o, s = a * Math.exp(r * t), c = i * 0.3 * o, l = a * Math.exp(r * c);
|
|
1382
1390
|
return s / l * e;
|
|
1383
1391
|
}
|
|
1384
1392
|
/**
|
|
@@ -1388,7 +1396,7 @@ class me {
|
|
|
1388
1396
|
return Math.random() * (i - t) + t;
|
|
1389
1397
|
}
|
|
1390
1398
|
}
|
|
1391
|
-
const
|
|
1399
|
+
const be = {
|
|
1392
1400
|
clusterCount: "auto",
|
|
1393
1401
|
clusterSpread: 150,
|
|
1394
1402
|
clusterSpacing: 200,
|
|
@@ -1396,7 +1404,7 @@ const pe = {
|
|
|
1396
1404
|
overlap: 0.3,
|
|
1397
1405
|
distribution: "gaussian"
|
|
1398
1406
|
};
|
|
1399
|
-
class
|
|
1407
|
+
class ye {
|
|
1400
1408
|
constructor(t, i = {}) {
|
|
1401
1409
|
this.config = t, this.imageConfig = i;
|
|
1402
1410
|
}
|
|
@@ -1408,85 +1416,85 @@ class be {
|
|
|
1408
1416
|
* @returns Array of layout objects with position, rotation, scale
|
|
1409
1417
|
*/
|
|
1410
1418
|
generate(t, i, e = {}) {
|
|
1411
|
-
const
|
|
1419
|
+
const o = [], { width: a, height: r } = i, s = { ...be, ...this.config.cluster }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1412
1420
|
t,
|
|
1413
1421
|
s.clusterCount,
|
|
1414
1422
|
a,
|
|
1415
1423
|
r,
|
|
1416
1424
|
s.clusterSpacing
|
|
1417
|
-
),
|
|
1418
|
-
|
|
1425
|
+
), m = this.generateClusterCenters(
|
|
1426
|
+
g,
|
|
1419
1427
|
a,
|
|
1420
1428
|
r,
|
|
1421
1429
|
c,
|
|
1422
1430
|
s
|
|
1423
|
-
), y = new Array(
|
|
1424
|
-
for (let
|
|
1425
|
-
y[
|
|
1426
|
-
let
|
|
1427
|
-
for (let
|
|
1428
|
-
const
|
|
1429
|
-
for (let R = 0; R <
|
|
1430
|
-
let
|
|
1431
|
+
), y = new Array(g).fill(0);
|
|
1432
|
+
for (let v = 0; v < t; v++)
|
|
1433
|
+
y[v % g]++;
|
|
1434
|
+
let w = 0;
|
|
1435
|
+
for (let v = 0; v < g; v++) {
|
|
1436
|
+
const I = m[v], x = y[v];
|
|
1437
|
+
for (let R = 0; R < x; R++) {
|
|
1438
|
+
let F, L;
|
|
1431
1439
|
if (s.distribution === "gaussian")
|
|
1432
|
-
|
|
1440
|
+
F = this.gaussianRandom() * I.spread, L = this.gaussianRandom() * I.spread;
|
|
1433
1441
|
else {
|
|
1434
|
-
const
|
|
1435
|
-
|
|
1442
|
+
const z = this.random(0, Math.PI * 2), Y = this.random(0, I.spread);
|
|
1443
|
+
F = Math.cos(z) * Y, L = Math.sin(z) * Y;
|
|
1436
1444
|
}
|
|
1437
|
-
const _ = 1 + s.overlap * 0.5,
|
|
1438
|
-
|
|
1439
|
-
const
|
|
1440
|
-
let
|
|
1441
|
-
const
|
|
1442
|
-
|
|
1443
|
-
const
|
|
1444
|
-
|
|
1445
|
-
id:
|
|
1446
|
-
x:
|
|
1447
|
-
y:
|
|
1448
|
-
rotation:
|
|
1445
|
+
const _ = 1 + s.overlap * 0.5, O = 1 + s.overlap * 0.3;
|
|
1446
|
+
F /= _, L /= _;
|
|
1447
|
+
const H = p ? this.random(f, b) : 1, N = O * H, C = l * N;
|
|
1448
|
+
let D = I.x + F, G = I.y + L;
|
|
1449
|
+
const M = C * 1.5 / 2, T = C / 2;
|
|
1450
|
+
D = Math.max(c + M, Math.min(D, a - c - M)), G = Math.max(c + T, Math.min(G, r - c - T));
|
|
1451
|
+
const j = u === "random" ? this.random(h, d) : 0, A = Math.sqrt(F * F + L * L) / I.spread, $ = Math.round((1 - A) * 50) + 1;
|
|
1452
|
+
o.push({
|
|
1453
|
+
id: w,
|
|
1454
|
+
x: D,
|
|
1455
|
+
y: G,
|
|
1456
|
+
rotation: j,
|
|
1449
1457
|
scale: N,
|
|
1450
|
-
baseSize:
|
|
1451
|
-
zIndex:
|
|
1452
|
-
}),
|
|
1458
|
+
baseSize: C,
|
|
1459
|
+
zIndex: $
|
|
1460
|
+
}), w++;
|
|
1453
1461
|
}
|
|
1454
1462
|
}
|
|
1455
|
-
return
|
|
1463
|
+
return o;
|
|
1456
1464
|
}
|
|
1457
1465
|
/**
|
|
1458
1466
|
* Calculate optimal number of clusters based on image count and container
|
|
1459
1467
|
*/
|
|
1460
|
-
calculateClusterCount(t, i, e,
|
|
1468
|
+
calculateClusterCount(t, i, e, o, a) {
|
|
1461
1469
|
if (i !== "auto")
|
|
1462
1470
|
return Math.max(1, Math.min(i, t));
|
|
1463
1471
|
const s = Math.max(1, Math.ceil(t / 8)), c = Math.floor(
|
|
1464
|
-
e / a * (
|
|
1472
|
+
e / a * (o / a) * 0.6
|
|
1465
1473
|
);
|
|
1466
1474
|
return Math.max(1, Math.min(s, c, 10));
|
|
1467
1475
|
}
|
|
1468
1476
|
/**
|
|
1469
1477
|
* Generate cluster center positions with spacing constraints
|
|
1470
1478
|
*/
|
|
1471
|
-
generateClusterCenters(t, i, e,
|
|
1472
|
-
const r = [], c =
|
|
1479
|
+
generateClusterCenters(t, i, e, o, a) {
|
|
1480
|
+
const r = [], c = o + a.clusterSpread, l = i - o - a.clusterSpread, u = o + a.clusterSpread, h = e - o - a.clusterSpread;
|
|
1473
1481
|
for (let d = 0; d < t; d++) {
|
|
1474
|
-
let
|
|
1475
|
-
for (let
|
|
1476
|
-
const
|
|
1482
|
+
let f = null, b = -1;
|
|
1483
|
+
for (let p = 0; p < 100; p++) {
|
|
1484
|
+
const g = {
|
|
1477
1485
|
x: this.random(c, l),
|
|
1478
1486
|
y: this.random(u, h),
|
|
1479
1487
|
spread: this.calculateClusterSpread(a)
|
|
1480
1488
|
};
|
|
1481
|
-
let
|
|
1489
|
+
let m = 1 / 0;
|
|
1482
1490
|
for (const y of r) {
|
|
1483
|
-
const
|
|
1484
|
-
|
|
1491
|
+
const w = g.x - y.x, v = g.y - y.y, I = Math.sqrt(w * w + v * v);
|
|
1492
|
+
m = Math.min(m, I);
|
|
1485
1493
|
}
|
|
1486
|
-
if ((r.length === 0 ||
|
|
1494
|
+
if ((r.length === 0 || m > b) && (f = g, b = m), m >= a.clusterSpacing)
|
|
1487
1495
|
break;
|
|
1488
1496
|
}
|
|
1489
|
-
|
|
1497
|
+
f && r.push(f);
|
|
1490
1498
|
}
|
|
1491
1499
|
return r;
|
|
1492
1500
|
}
|
|
@@ -1514,7 +1522,7 @@ class be {
|
|
|
1514
1522
|
return Math.random() * (i - t) + t;
|
|
1515
1523
|
}
|
|
1516
1524
|
}
|
|
1517
|
-
class
|
|
1525
|
+
class ve {
|
|
1518
1526
|
constructor(t, i = {}) {
|
|
1519
1527
|
this.config = t, this.imageConfig = i;
|
|
1520
1528
|
}
|
|
@@ -1526,32 +1534,32 @@ class ye {
|
|
|
1526
1534
|
* @returns Array of layout objects with position, rotation, scale
|
|
1527
1535
|
*/
|
|
1528
1536
|
generate(t, i, e = {}) {
|
|
1529
|
-
const
|
|
1530
|
-
...
|
|
1537
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || f !== 1, p = e.fixedHeight ?? s, g = {
|
|
1538
|
+
...Ht,
|
|
1531
1539
|
...this.config.wave
|
|
1532
|
-
}, { rows:
|
|
1533
|
-
let
|
|
1534
|
-
for (let
|
|
1535
|
-
const
|
|
1536
|
-
let
|
|
1537
|
-
|
|
1538
|
-
for (let
|
|
1539
|
-
const
|
|
1540
|
+
}, { rows: m, amplitude: y, frequency: w, phaseShift: v, synchronization: I } = g, x = Math.ceil(t / m), L = p * 1.5 / 2, _ = c + L, O = a - c - L, H = O - _, N = x > 1 ? H / (x - 1) : 0, C = c + y + p / 2, D = r - c - y - p / 2, G = D - C, U = m > 1 ? G / (m - 1) : 0;
|
|
1541
|
+
let M = 0;
|
|
1542
|
+
for (let T = 0; T < m && M < t; T++) {
|
|
1543
|
+
const j = m === 1 ? (C + D) / 2 : C + T * U;
|
|
1544
|
+
let X = 0;
|
|
1545
|
+
I === "offset" ? X = T * v : I === "alternating" && (X = T * Math.PI);
|
|
1546
|
+
for (let A = 0; A < x && M < t; A++) {
|
|
1547
|
+
const $ = x === 1 ? (_ + O) / 2 : _ + A * N, z = this.calculateWaveY($, a, y, w, X), Y = $, P = j + z, k = b ? this.random(d, f) : 1, B = p * k;
|
|
1540
1548
|
let J = 0;
|
|
1541
|
-
l === "tangent" ? J = this.calculateRotation(
|
|
1542
|
-
const K = B * 1.5 / 2, ct = B / 2, it = c + K,
|
|
1543
|
-
|
|
1544
|
-
id:
|
|
1545
|
-
x: Math.max(it, Math.min(
|
|
1546
|
-
y: Math.max(lt, Math.min(
|
|
1549
|
+
l === "tangent" ? J = this.calculateRotation($, a, y, w, X) : l === "random" && (J = this.random(u, h));
|
|
1550
|
+
const K = B * 1.5 / 2, ct = B / 2, it = c + K, nt = a - c - K, lt = c + ct, ht = r - c - ct;
|
|
1551
|
+
o.push({
|
|
1552
|
+
id: M,
|
|
1553
|
+
x: Math.max(it, Math.min(Y, nt)),
|
|
1554
|
+
y: Math.max(lt, Math.min(P, ht)),
|
|
1547
1555
|
rotation: J,
|
|
1548
|
-
scale:
|
|
1556
|
+
scale: k,
|
|
1549
1557
|
baseSize: B,
|
|
1550
|
-
zIndex:
|
|
1551
|
-
}),
|
|
1558
|
+
zIndex: M + 1
|
|
1559
|
+
}), M++;
|
|
1552
1560
|
}
|
|
1553
1561
|
}
|
|
1554
|
-
return
|
|
1562
|
+
return o;
|
|
1555
1563
|
}
|
|
1556
1564
|
/**
|
|
1557
1565
|
* Calculate Y position displacement on wave curve
|
|
@@ -1562,9 +1570,9 @@ class ye {
|
|
|
1562
1570
|
* @param phase - Phase offset
|
|
1563
1571
|
* @returns Y displacement from baseline
|
|
1564
1572
|
*/
|
|
1565
|
-
calculateWaveY(t, i, e,
|
|
1573
|
+
calculateWaveY(t, i, e, o, a) {
|
|
1566
1574
|
const r = t / i;
|
|
1567
|
-
return e * Math.sin(
|
|
1575
|
+
return e * Math.sin(o * r * 2 * Math.PI + a);
|
|
1568
1576
|
}
|
|
1569
1577
|
/**
|
|
1570
1578
|
* Calculate rotation based on wave tangent
|
|
@@ -1575,8 +1583,8 @@ class ye {
|
|
|
1575
1583
|
* @param phase - Phase offset
|
|
1576
1584
|
* @returns Rotation angle in degrees
|
|
1577
1585
|
*/
|
|
1578
|
-
calculateRotation(t, i, e,
|
|
1579
|
-
const r = t / i, s = e *
|
|
1586
|
+
calculateRotation(t, i, e, o, a) {
|
|
1587
|
+
const r = t / i, s = e * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + a) / i;
|
|
1580
1588
|
return Math.atan(s) * (180 / Math.PI);
|
|
1581
1589
|
}
|
|
1582
1590
|
/**
|
|
@@ -1604,21 +1612,21 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1604
1612
|
// lower-left
|
|
1605
1613
|
[0, 50]
|
|
1606
1614
|
// left
|
|
1607
|
-
],
|
|
1608
|
-
function
|
|
1615
|
+
], we = Et[1][0] / xt, xe = Et[2][1] / xt;
|
|
1616
|
+
function Ee(n) {
|
|
1609
1617
|
return {
|
|
1610
|
-
colStep:
|
|
1611
|
-
rowOffset:
|
|
1618
|
+
colStep: we * n,
|
|
1619
|
+
rowOffset: xe * n
|
|
1612
1620
|
};
|
|
1613
1621
|
}
|
|
1614
|
-
function
|
|
1615
|
-
const { colStep: r } =
|
|
1622
|
+
function Se(n, t, i, e, o, a) {
|
|
1623
|
+
const { colStep: r } = Ee(a);
|
|
1616
1624
|
return {
|
|
1617
|
-
px: e + r *
|
|
1618
|
-
py:
|
|
1625
|
+
px: e + r * n,
|
|
1626
|
+
py: o + a * (t + n / 2)
|
|
1619
1627
|
};
|
|
1620
1628
|
}
|
|
1621
|
-
const
|
|
1629
|
+
const Ie = [
|
|
1622
1630
|
[1, 0, -1],
|
|
1623
1631
|
[0, 1, -1],
|
|
1624
1632
|
[-1, 1, 0],
|
|
@@ -1626,46 +1634,46 @@ const Se = [
|
|
|
1626
1634
|
[0, -1, 1],
|
|
1627
1635
|
[1, -1, 0]
|
|
1628
1636
|
];
|
|
1629
|
-
function
|
|
1630
|
-
if (
|
|
1637
|
+
function Re(n) {
|
|
1638
|
+
if (n === 0) return [[0, 0, 0]];
|
|
1631
1639
|
const t = [];
|
|
1632
|
-
let [i, e,
|
|
1633
|
-
for (const [a, r, s] of
|
|
1634
|
-
for (let c = 0; c <
|
|
1635
|
-
t.push([i, e,
|
|
1640
|
+
let [i, e, o] = [0, -n, n];
|
|
1641
|
+
for (const [a, r, s] of Ie)
|
|
1642
|
+
for (let c = 0; c < n; c++)
|
|
1643
|
+
t.push([i, e, o]), i += a, e += r, o += s;
|
|
1636
1644
|
return t;
|
|
1637
1645
|
}
|
|
1638
|
-
class
|
|
1646
|
+
class Ce {
|
|
1639
1647
|
// imageConfig intentionally not stored — honeycomb forces uniform sizing (rotation/variance
|
|
1640
1648
|
// would break hex tiling). Kept as parameter for interface compatibility.
|
|
1641
1649
|
constructor(t, i = {}) {
|
|
1642
1650
|
this.config = t;
|
|
1643
1651
|
}
|
|
1644
1652
|
generate(t, i, e = {}) {
|
|
1645
|
-
const
|
|
1646
|
-
...
|
|
1653
|
+
const o = [], { width: a, height: r } = i, s = a / 2, c = r / 2, l = e.fixedHeight ?? 200, h = {
|
|
1654
|
+
...Nt,
|
|
1647
1655
|
...this.config.honeycomb
|
|
1648
1656
|
}.spacing ?? 0, d = l + h;
|
|
1649
|
-
let
|
|
1650
|
-
for (;
|
|
1651
|
-
const
|
|
1652
|
-
for (const [
|
|
1653
|
-
if (
|
|
1654
|
-
const { px:
|
|
1655
|
-
|
|
1656
|
-
id:
|
|
1657
|
-
x:
|
|
1658
|
-
y:
|
|
1657
|
+
let f = 0, b = 0;
|
|
1658
|
+
for (; f < t; ) {
|
|
1659
|
+
const p = Re(b);
|
|
1660
|
+
for (const [g, m, y] of p) {
|
|
1661
|
+
if (f >= t) break;
|
|
1662
|
+
const { px: w, py: v } = Se(g, m, y, s, c, d);
|
|
1663
|
+
o.push({
|
|
1664
|
+
id: f,
|
|
1665
|
+
x: w,
|
|
1666
|
+
y: v,
|
|
1659
1667
|
rotation: 0,
|
|
1660
1668
|
scale: 1,
|
|
1661
1669
|
baseSize: l,
|
|
1662
1670
|
// Inner rings render above outer rings
|
|
1663
1671
|
zIndex: Math.max(1, 100 - b)
|
|
1664
|
-
}),
|
|
1672
|
+
}), f++;
|
|
1665
1673
|
}
|
|
1666
1674
|
b++;
|
|
1667
1675
|
}
|
|
1668
|
-
return
|
|
1676
|
+
return o;
|
|
1669
1677
|
}
|
|
1670
1678
|
}
|
|
1671
1679
|
class Te {
|
|
@@ -1679,19 +1687,19 @@ class Te {
|
|
|
1679
1687
|
initLayout() {
|
|
1680
1688
|
switch (this.config.algorithm) {
|
|
1681
1689
|
case "radial":
|
|
1682
|
-
return new
|
|
1690
|
+
return new de(this.config, this.imageConfig);
|
|
1683
1691
|
case "grid":
|
|
1684
|
-
return new
|
|
1692
|
+
return new ge(this.config, this.imageConfig);
|
|
1685
1693
|
case "spiral":
|
|
1686
|
-
return new
|
|
1694
|
+
return new pe(this.config, this.imageConfig);
|
|
1687
1695
|
case "cluster":
|
|
1688
|
-
return new be(this.config, this.imageConfig);
|
|
1689
|
-
case "wave":
|
|
1690
1696
|
return new ye(this.config, this.imageConfig);
|
|
1697
|
+
case "wave":
|
|
1698
|
+
return new ve(this.config, this.imageConfig);
|
|
1691
1699
|
case "honeycomb":
|
|
1692
|
-
return new
|
|
1700
|
+
return new Ce(this.config, this.imageConfig);
|
|
1693
1701
|
default:
|
|
1694
|
-
return new
|
|
1702
|
+
return new he(this.config, this.imageConfig);
|
|
1695
1703
|
}
|
|
1696
1704
|
}
|
|
1697
1705
|
/**
|
|
@@ -1702,10 +1710,10 @@ class Te {
|
|
|
1702
1710
|
* @returns Array of layout objects with position, rotation, scale
|
|
1703
1711
|
*/
|
|
1704
1712
|
generateLayout(t, i, e = {}) {
|
|
1705
|
-
const
|
|
1706
|
-
return
|
|
1713
|
+
const o = this.placementLayout.generate(t, i, e);
|
|
1714
|
+
return o.forEach((a) => {
|
|
1707
1715
|
this.layouts.set(a.id, a);
|
|
1708
|
-
}),
|
|
1716
|
+
}), o;
|
|
1709
1717
|
}
|
|
1710
1718
|
/**
|
|
1711
1719
|
* Get the original layout state for an image
|
|
@@ -1758,8 +1766,8 @@ class Te {
|
|
|
1758
1766
|
return;
|
|
1759
1767
|
if (typeof e == "number")
|
|
1760
1768
|
return e;
|
|
1761
|
-
const
|
|
1762
|
-
return a === "mobile" ?
|
|
1769
|
+
const o = e, a = this.resolveBreakpoint(t);
|
|
1770
|
+
return a === "mobile" ? o.mobile ?? o.tablet ?? o.screen : a === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
|
|
1763
1771
|
}
|
|
1764
1772
|
/**
|
|
1765
1773
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1769,17 +1777,17 @@ class Te {
|
|
|
1769
1777
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1770
1778
|
* @returns Calculated sizing result with height
|
|
1771
1779
|
*/
|
|
1772
|
-
calculateAdaptiveSize(t, i, e,
|
|
1773
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1780
|
+
calculateAdaptiveSize(t, i, e, o) {
|
|
1781
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1774
1782
|
if (r !== void 0)
|
|
1775
1783
|
return { height: r };
|
|
1776
|
-
const s = a?.minSize ?? 50, c = a?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t,
|
|
1777
|
-
let
|
|
1778
|
-
|
|
1779
|
-
let y = this.clamp(
|
|
1780
|
-
if (y === s &&
|
|
1781
|
-
const
|
|
1782
|
-
y = Math.max(
|
|
1784
|
+
const s = a?.minSize ?? 50, c = a?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * l / i;
|
|
1785
|
+
let m = Math.sqrt(p / 1.4);
|
|
1786
|
+
m *= u, m = Math.min(m, e);
|
|
1787
|
+
let y = this.clamp(m, s, c);
|
|
1788
|
+
if (y === s && m < s) {
|
|
1789
|
+
const w = Math.max(s * 0.05, 20);
|
|
1790
|
+
y = Math.max(w, m);
|
|
1783
1791
|
}
|
|
1784
1792
|
return this.config.algorithm === "honeycomb" && (y = Math.min(y, this.honeycombMaxImageHeight(i, t))), { height: y };
|
|
1785
1793
|
}
|
|
@@ -1790,9 +1798,9 @@ class Te {
|
|
|
1790
1798
|
*/
|
|
1791
1799
|
honeycombMaxImageHeight(t, i) {
|
|
1792
1800
|
if (t <= 1) return 1 / 0;
|
|
1793
|
-
let e = 0,
|
|
1794
|
-
for (;
|
|
1795
|
-
e++,
|
|
1801
|
+
let e = 0, o = 1;
|
|
1802
|
+
for (; o < t; )
|
|
1803
|
+
e++, o += 6 * e;
|
|
1796
1804
|
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2, c = i.height / 2, l = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (c - a - r * e) / (e + 0.5), d = (s - a - l * r * e) / (l * e + u);
|
|
1797
1805
|
return Math.max(10, Math.min(h, d));
|
|
1798
1806
|
}
|
|
@@ -1803,7 +1811,7 @@ class Te {
|
|
|
1803
1811
|
return Math.max(i, Math.min(e, t));
|
|
1804
1812
|
}
|
|
1805
1813
|
}
|
|
1806
|
-
var
|
|
1814
|
+
var S = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(S || {});
|
|
1807
1815
|
const At = {
|
|
1808
1816
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1809
1817
|
circle: "circle(50%)",
|
|
@@ -1813,7 +1821,7 @@ const At = {
|
|
|
1813
1821
|
hexagon: "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
|
|
1814
1822
|
octagon: "polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)",
|
|
1815
1823
|
diamond: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
|
|
1816
|
-
},
|
|
1824
|
+
}, Ae = {
|
|
1817
1825
|
// Circle - uses radius in pixels (refHeight of 100px = 50px radius)
|
|
1818
1826
|
circle: {
|
|
1819
1827
|
refHeight: 100,
|
|
@@ -1851,105 +1859,105 @@ const At = {
|
|
|
1851
1859
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
1852
1860
|
}
|
|
1853
1861
|
};
|
|
1854
|
-
function
|
|
1855
|
-
if (
|
|
1856
|
-
return
|
|
1862
|
+
function Le(n) {
|
|
1863
|
+
if (n)
|
|
1864
|
+
return n in At ? At[n] : n;
|
|
1857
1865
|
}
|
|
1858
|
-
function
|
|
1859
|
-
const e =
|
|
1866
|
+
function Me(n, t, i) {
|
|
1867
|
+
const e = Ae[n];
|
|
1860
1868
|
if (!e) return "";
|
|
1861
|
-
const
|
|
1862
|
-
if (
|
|
1863
|
-
return `circle(${Math.round(50 *
|
|
1864
|
-
const a = e.points.map(([
|
|
1865
|
-
return `polygon(${e.points.map(([
|
|
1866
|
-
const
|
|
1867
|
-
return `${
|
|
1869
|
+
const o = t / e.refHeight;
|
|
1870
|
+
if (n === "circle")
|
|
1871
|
+
return `circle(${Math.round(50 * o * 100) / 100}px)`;
|
|
1872
|
+
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 * o, c = (Math.min(...r) + Math.max(...r)) / 2 * o, l = (Math.max(...a) - Math.min(...a)) * o, u = (i ?? l) / 2, h = t / 2, d = u - s, f = h - c;
|
|
1873
|
+
return `polygon(${e.points.map(([p, g]) => {
|
|
1874
|
+
const m = Math.round((p * o + d) * 100) / 100, y = Math.round((g * o + f) * 100) / 100;
|
|
1875
|
+
return `${m}px ${y}px`;
|
|
1868
1876
|
}).join(", ")})`;
|
|
1869
1877
|
}
|
|
1870
|
-
function
|
|
1871
|
-
return
|
|
1878
|
+
function ze(n) {
|
|
1879
|
+
return n in mt;
|
|
1872
1880
|
}
|
|
1873
|
-
function
|
|
1874
|
-
return
|
|
1881
|
+
function Fe(n) {
|
|
1882
|
+
return n ? ze(n) ? mt[n] : n : mt.md;
|
|
1875
1883
|
}
|
|
1876
|
-
function
|
|
1877
|
-
if (!
|
|
1884
|
+
function Oe(n) {
|
|
1885
|
+
if (!n) return "";
|
|
1878
1886
|
const t = [];
|
|
1879
|
-
if (
|
|
1880
|
-
if (typeof
|
|
1881
|
-
t.push(`drop-shadow(${
|
|
1887
|
+
if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
|
|
1888
|
+
if (typeof n.dropShadow == "string")
|
|
1889
|
+
t.push(`drop-shadow(${n.dropShadow})`);
|
|
1882
1890
|
else {
|
|
1883
|
-
const i =
|
|
1891
|
+
const i = n.dropShadow;
|
|
1884
1892
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
1885
1893
|
}
|
|
1886
1894
|
return t.join(" ");
|
|
1887
1895
|
}
|
|
1888
|
-
function tt(
|
|
1889
|
-
if (!
|
|
1896
|
+
function tt(n) {
|
|
1897
|
+
if (!n || n.style === "none" || n.width === 0)
|
|
1890
1898
|
return "none";
|
|
1891
|
-
const t =
|
|
1899
|
+
const t = n.width ?? 0, i = n.style ?? "solid", e = n.color ?? "#000000";
|
|
1892
1900
|
return `${t}px ${i} ${e}`;
|
|
1893
1901
|
}
|
|
1894
|
-
function et(
|
|
1895
|
-
if (!
|
|
1902
|
+
function et(n, t, i) {
|
|
1903
|
+
if (!n) return {};
|
|
1896
1904
|
const e = {};
|
|
1897
|
-
if (
|
|
1898
|
-
const s =
|
|
1899
|
-
|
|
1900
|
-
} else
|
|
1901
|
-
if (
|
|
1902
|
-
const s =
|
|
1905
|
+
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
1906
|
+
const s = n.border?.radius ?? 0;
|
|
1907
|
+
n.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
1908
|
+
} else n.border?.radius !== void 0 && (e.borderRadius = `${n.border.radius}px`);
|
|
1909
|
+
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
1910
|
+
const s = n.border || {}, c = { ...s, ...n.borderTop }, l = { ...s, ...n.borderRight }, u = { ...s, ...n.borderBottom }, h = { ...s, ...n.borderLeft };
|
|
1903
1911
|
e.borderTop = tt(c), e.borderRight = tt(l), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
1904
|
-
} else
|
|
1905
|
-
|
|
1906
|
-
const r =
|
|
1907
|
-
if (e.filter = r || "none",
|
|
1908
|
-
const s =
|
|
1909
|
-
e.outline = `${s}px ${c} ${l}`,
|
|
1910
|
-
}
|
|
1911
|
-
if (
|
|
1912
|
+
} else n.border && (e.border = tt(n.border));
|
|
1913
|
+
n.shadow !== void 0 && (e.boxShadow = Fe(n.shadow));
|
|
1914
|
+
const r = Oe(n.filter);
|
|
1915
|
+
if (e.filter = r || "none", n.opacity !== void 0 && (e.opacity = String(n.opacity)), n.cursor !== void 0 && (e.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
1916
|
+
const s = n.outline.width ?? 0, c = n.outline.style ?? "solid", l = n.outline.color ?? "#000000";
|
|
1917
|
+
e.outline = `${s}px ${c} ${l}`, n.outline.offset !== void 0 && (e.outlineOffset = `${n.outline.offset}px`);
|
|
1918
|
+
}
|
|
1919
|
+
if (n.objectFit !== void 0 && (e.objectFit = n.objectFit), n.aspectRatio !== void 0 && (e.aspectRatio = n.aspectRatio), n.clipPath !== void 0) {
|
|
1912
1920
|
let s;
|
|
1913
|
-
const c = typeof
|
|
1921
|
+
const c = typeof n.clipPath == "object" && n.clipPath !== null && "shape" in n.clipPath, l = c ? n.clipPath : void 0;
|
|
1914
1922
|
if (l?.mode === "height-relative" && t)
|
|
1915
|
-
s =
|
|
1923
|
+
s = Me(l.shape, t, i);
|
|
1916
1924
|
else {
|
|
1917
|
-
const u = c && l ? l.shape :
|
|
1918
|
-
s =
|
|
1925
|
+
const u = c && l ? l.shape : n.clipPath;
|
|
1926
|
+
s = Le(u);
|
|
1919
1927
|
}
|
|
1920
1928
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
1921
1929
|
}
|
|
1922
1930
|
return e;
|
|
1923
1931
|
}
|
|
1924
|
-
function
|
|
1925
|
-
t.borderRadius !== void 0 && (
|
|
1932
|
+
function De(n, t) {
|
|
1933
|
+
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (n.style.clipPath = t.clipPath), t.overflow !== void 0 && (n.style.overflow = t.overflow);
|
|
1926
1934
|
}
|
|
1927
|
-
function ft(
|
|
1928
|
-
const
|
|
1929
|
-
|
|
1935
|
+
function ft(n, t, i, e) {
|
|
1936
|
+
const o = et(t, i, e);
|
|
1937
|
+
De(n, o);
|
|
1930
1938
|
}
|
|
1931
|
-
function Dt(
|
|
1932
|
-
return
|
|
1939
|
+
function Dt(n) {
|
|
1940
|
+
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
1933
1941
|
}
|
|
1934
|
-
function st(
|
|
1942
|
+
function st(n, t) {
|
|
1935
1943
|
const i = Dt(t);
|
|
1936
1944
|
i && i.split(" ").forEach((e) => {
|
|
1937
|
-
e.trim() &&
|
|
1945
|
+
e.trim() && n.classList.add(e.trim());
|
|
1938
1946
|
});
|
|
1939
1947
|
}
|
|
1940
|
-
function pt(
|
|
1948
|
+
function pt(n, t) {
|
|
1941
1949
|
const i = Dt(t);
|
|
1942
1950
|
i && i.split(" ").forEach((e) => {
|
|
1943
|
-
e.trim() &&
|
|
1951
|
+
e.trim() && n.classList.remove(e.trim());
|
|
1944
1952
|
});
|
|
1945
1953
|
}
|
|
1946
1954
|
const Lt = {
|
|
1947
1955
|
UNFOCUSING: 999,
|
|
1948
1956
|
FOCUSING: 1e3
|
|
1949
1957
|
};
|
|
1950
|
-
class
|
|
1958
|
+
class $e {
|
|
1951
1959
|
constructor(t, i, e) {
|
|
1952
|
-
this.state =
|
|
1960
|
+
this.state = S.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;
|
|
1953
1961
|
}
|
|
1954
1962
|
/**
|
|
1955
1963
|
* Get current state machine state
|
|
@@ -1961,7 +1969,7 @@ class De {
|
|
|
1961
1969
|
* Check if any animation is in progress
|
|
1962
1970
|
*/
|
|
1963
1971
|
isAnimating() {
|
|
1964
|
-
return this.state !==
|
|
1972
|
+
return this.state !== S.IDLE && this.state !== S.FOCUSED;
|
|
1965
1973
|
}
|
|
1966
1974
|
/**
|
|
1967
1975
|
* Normalize scalePercent value
|
|
@@ -1974,9 +1982,9 @@ class De {
|
|
|
1974
1982
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1975
1983
|
*/
|
|
1976
1984
|
calculateFocusDimensions(t, i, e) {
|
|
1977
|
-
const
|
|
1985
|
+
const o = this.normalizeScalePercent(this.config.scalePercent), a = e.height * o, r = t / i;
|
|
1978
1986
|
let s = a, c = s * r;
|
|
1979
|
-
const l = e.width *
|
|
1987
|
+
const l = e.width * o;
|
|
1980
1988
|
return c > l && (c = l, s = c / r), { width: c, height: s };
|
|
1981
1989
|
}
|
|
1982
1990
|
/**
|
|
@@ -1984,7 +1992,7 @@ class De {
|
|
|
1984
1992
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1985
1993
|
*/
|
|
1986
1994
|
calculateFocusTransform(t, i) {
|
|
1987
|
-
const e = t.width / 2,
|
|
1995
|
+
const e = t.width / 2, o = t.height / 2, a = e - i.x, r = o - i.y;
|
|
1988
1996
|
return {
|
|
1989
1997
|
x: a,
|
|
1990
1998
|
y: r,
|
|
@@ -1999,8 +2007,8 @@ class De {
|
|
|
1999
2007
|
buildDimensionZoomTransform(t) {
|
|
2000
2008
|
const i = ["translate(-50%, -50%)"];
|
|
2001
2009
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2002
|
-
const e = t.x ?? 0,
|
|
2003
|
-
i.push(`translate(${e}px, ${
|
|
2010
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
2011
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
2004
2012
|
}
|
|
2005
2013
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2006
2014
|
}
|
|
@@ -2008,13 +2016,13 @@ class De {
|
|
|
2008
2016
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2009
2017
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2010
2018
|
*/
|
|
2011
|
-
animateWithDimensions(t, i, e,
|
|
2019
|
+
animateWithDimensions(t, i, e, o, a, r, s, c) {
|
|
2012
2020
|
const l = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2013
2021
|
return t.style.transition = "none", t.animate(
|
|
2014
2022
|
[
|
|
2015
2023
|
{
|
|
2016
2024
|
transform: l,
|
|
2017
|
-
width: `${
|
|
2025
|
+
width: `${o}px`,
|
|
2018
2026
|
height: `${a}px`
|
|
2019
2027
|
},
|
|
2020
2028
|
{
|
|
@@ -2055,10 +2063,10 @@ class De {
|
|
|
2055
2063
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2056
2064
|
*/
|
|
2057
2065
|
startClipPathAnimation(t, i, e) {
|
|
2058
|
-
let
|
|
2059
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2066
|
+
let o = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2067
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (o = { ...o, clipPath: void 0 });
|
|
2060
2068
|
const a = () => {
|
|
2061
|
-
const r = t.offsetHeight, s = t.offsetWidth, c = et(
|
|
2069
|
+
const r = t.offsetHeight, s = t.offsetWidth, c = et(o, r, s);
|
|
2062
2070
|
c.clipPath !== void 0 ? t.style.clipPath = c.clipPath : t.style.clipPath = "unset", c.overflow !== void 0 && (t.style.overflow = c.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
2063
2071
|
};
|
|
2064
2072
|
requestAnimationFrame(a);
|
|
@@ -2069,30 +2077,30 @@ class De {
|
|
|
2069
2077
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2070
2078
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2071
2079
|
*/
|
|
2072
|
-
startFocusAnimation(t, i, e,
|
|
2080
|
+
startFocusAnimation(t, i, e, o, a) {
|
|
2073
2081
|
const r = t.style.zIndex || "", s = t.offsetWidth, c = t.offsetHeight, l = this.calculateFocusDimensions(s, c, i), u = this.calculateFocusTransform(i, e);
|
|
2074
2082
|
this.animationEngine.cancelAllAnimations(t);
|
|
2075
2083
|
const h = this.config.animationDuration ?? 600;
|
|
2076
2084
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
2077
|
-
const d =
|
|
2085
|
+
const d = o ?? {
|
|
2078
2086
|
x: 0,
|
|
2079
2087
|
y: 0,
|
|
2080
2088
|
rotation: e.rotation,
|
|
2081
2089
|
scale: 1
|
|
2082
2090
|
// No scale - using dimensions
|
|
2083
|
-
},
|
|
2091
|
+
}, f = a?.width ?? s, b = a?.height ?? c, p = this.animateWithDimensions(
|
|
2084
2092
|
t,
|
|
2085
2093
|
d,
|
|
2086
2094
|
u,
|
|
2087
|
-
|
|
2095
|
+
f,
|
|
2088
2096
|
b,
|
|
2089
2097
|
l.width,
|
|
2090
2098
|
l.height,
|
|
2091
2099
|
h
|
|
2092
|
-
),
|
|
2100
|
+
), g = {
|
|
2093
2101
|
id: `focus-${Date.now()}`,
|
|
2094
2102
|
element: t,
|
|
2095
|
-
animation:
|
|
2103
|
+
animation: p,
|
|
2096
2104
|
fromState: d,
|
|
2097
2105
|
toState: u,
|
|
2098
2106
|
startTime: performance.now(),
|
|
@@ -2107,10 +2115,10 @@ class De {
|
|
|
2107
2115
|
originalHeight: c,
|
|
2108
2116
|
focusWidth: l.width,
|
|
2109
2117
|
focusHeight: l.height
|
|
2110
|
-
}, this.startClipPathAnimation(t,
|
|
2118
|
+
}, this.startClipPathAnimation(t, g, !0), {
|
|
2111
2119
|
element: t,
|
|
2112
2120
|
originalState: e,
|
|
2113
|
-
animationHandle:
|
|
2121
|
+
animationHandle: g,
|
|
2114
2122
|
direction: "in",
|
|
2115
2123
|
originalWidth: s,
|
|
2116
2124
|
originalHeight: c
|
|
@@ -2121,11 +2129,11 @@ class De {
|
|
|
2121
2129
|
* Animates back to original dimensions for consistent behavior
|
|
2122
2130
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2123
2131
|
*/
|
|
2124
|
-
startUnfocusAnimation(t, i, e,
|
|
2132
|
+
startUnfocusAnimation(t, i, e, o) {
|
|
2125
2133
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2126
2134
|
const a = this.config.animationDuration ?? 600;
|
|
2127
2135
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2128
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s =
|
|
2136
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, c = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, l = {
|
|
2129
2137
|
x: 0,
|
|
2130
2138
|
y: 0,
|
|
2131
2139
|
rotation: i.rotation,
|
|
@@ -2140,7 +2148,7 @@ class De {
|
|
|
2140
2148
|
u,
|
|
2141
2149
|
h,
|
|
2142
2150
|
a
|
|
2143
|
-
),
|
|
2151
|
+
), f = {
|
|
2144
2152
|
id: `unfocus-${Date.now()}`,
|
|
2145
2153
|
element: t,
|
|
2146
2154
|
animation: d,
|
|
@@ -2149,10 +2157,10 @@ class De {
|
|
|
2149
2157
|
startTime: performance.now(),
|
|
2150
2158
|
duration: a
|
|
2151
2159
|
};
|
|
2152
|
-
return this.startClipPathAnimation(t,
|
|
2160
|
+
return this.startClipPathAnimation(t, f, !1), {
|
|
2153
2161
|
element: t,
|
|
2154
2162
|
originalState: i,
|
|
2155
|
-
animationHandle:
|
|
2163
|
+
animationHandle: f,
|
|
2156
2164
|
direction: "out",
|
|
2157
2165
|
originalWidth: u,
|
|
2158
2166
|
originalHeight: h
|
|
@@ -2173,10 +2181,10 @@ class De {
|
|
|
2173
2181
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2174
2182
|
*/
|
|
2175
2183
|
captureMidAnimationState(t) {
|
|
2176
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2177
|
-
return t.style.width = `${
|
|
2184
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), o = t.offsetWidth, a = t.offsetHeight, r = e.e + o * 0.5, s = e.f + a * 0.5, c = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2185
|
+
return t.style.width = `${o}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${c}deg)`, t.style.transition = "none", {
|
|
2178
2186
|
transform: { x: r, y: s, rotation: c, scale: 1 },
|
|
2179
|
-
dimensions: { width:
|
|
2187
|
+
dimensions: { width: o, height: a }
|
|
2180
2188
|
};
|
|
2181
2189
|
}
|
|
2182
2190
|
/**
|
|
@@ -2191,63 +2199,63 @@ class De {
|
|
|
2191
2199
|
/**
|
|
2192
2200
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2193
2201
|
*/
|
|
2194
|
-
resetElementInstantly(t, i, e,
|
|
2202
|
+
resetElementInstantly(t, i, e, o, a) {
|
|
2195
2203
|
this.animationEngine.cancelAllAnimations(t);
|
|
2196
2204
|
const r = ["translate(-50%, -50%)"];
|
|
2197
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2205
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && a !== void 0 && (t.style.width = `${o}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2198
2206
|
}
|
|
2199
2207
|
/**
|
|
2200
2208
|
* Focus (zoom) an image to center of container
|
|
2201
2209
|
* Implements cross-animation when swapping focus
|
|
2202
2210
|
*/
|
|
2203
2211
|
async focusImage(t, i, e) {
|
|
2204
|
-
if (this.currentFocus === t && this.state ===
|
|
2212
|
+
if (this.currentFocus === t && this.state === S.FOCUSED)
|
|
2205
2213
|
return this.unfocusImage();
|
|
2206
|
-
if (this.incoming?.element === t && this.state ===
|
|
2214
|
+
if (this.incoming?.element === t && this.state === S.FOCUSING) {
|
|
2207
2215
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2208
2216
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2209
2217
|
t,
|
|
2210
2218
|
this.incoming.originalState,
|
|
2211
2219
|
a,
|
|
2212
2220
|
r
|
|
2213
|
-
), this.incoming = null, this.state =
|
|
2221
|
+
), this.incoming = null, this.state = S.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 = S.IDLE;
|
|
2214
2222
|
return;
|
|
2215
2223
|
}
|
|
2216
|
-
const
|
|
2224
|
+
const o = ++this.focusGeneration;
|
|
2217
2225
|
switch (this.state) {
|
|
2218
|
-
case
|
|
2219
|
-
if (this.state =
|
|
2220
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2226
|
+
case S.IDLE:
|
|
2227
|
+
if (this.state = S.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2228
|
+
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2221
2229
|
break;
|
|
2222
|
-
case
|
|
2223
|
-
if (this.state =
|
|
2230
|
+
case S.FOCUSED:
|
|
2231
|
+
if (this.state = S.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2224
2232
|
this.currentFocus,
|
|
2225
2233
|
this.focusData.originalState
|
|
2226
2234
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2227
2235
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2228
2236
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2229
|
-
]), this.focusGeneration !==
|
|
2237
|
+
]), this.focusGeneration !== o)
|
|
2230
2238
|
return;
|
|
2231
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2239
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2232
2240
|
break;
|
|
2233
|
-
case
|
|
2241
|
+
case S.FOCUSING:
|
|
2234
2242
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2235
2243
|
this.incoming.element,
|
|
2236
2244
|
this.incoming.originalState,
|
|
2237
2245
|
this.focusData?.originalZIndex || "",
|
|
2238
2246
|
this.focusData?.originalWidth,
|
|
2239
2247
|
this.focusData?.originalHeight
|
|
2240
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2241
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2248
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2249
|
+
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2242
2250
|
break;
|
|
2243
|
-
case
|
|
2244
|
-
if (this.state =
|
|
2251
|
+
case S.UNFOCUSING:
|
|
2252
|
+
if (this.state = S.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2245
2253
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2246
2254
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2247
|
-
]), this.focusGeneration !==
|
|
2248
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2255
|
+
]), this.focusGeneration !== o) return;
|
|
2256
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2249
2257
|
break;
|
|
2250
|
-
case
|
|
2258
|
+
case S.CROSS_ANIMATING:
|
|
2251
2259
|
if (this.incoming?.element === t)
|
|
2252
2260
|
return;
|
|
2253
2261
|
if (this.outgoing?.element === t) {
|
|
@@ -2265,8 +2273,8 @@ class De {
|
|
|
2265
2273
|
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2266
2274
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2267
2275
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2268
|
-
]), this.focusGeneration !==
|
|
2269
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2276
|
+
]), this.focusGeneration !== o) return;
|
|
2277
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2270
2278
|
return;
|
|
2271
2279
|
}
|
|
2272
2280
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2287,8 +2295,8 @@ class De {
|
|
|
2287
2295
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2288
2296
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2289
2297
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2290
|
-
]), this.focusGeneration !==
|
|
2291
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2298
|
+
]), this.focusGeneration !== o) return;
|
|
2299
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2292
2300
|
break;
|
|
2293
2301
|
}
|
|
2294
2302
|
}
|
|
@@ -2296,23 +2304,23 @@ class De {
|
|
|
2296
2304
|
* Unfocus current image, returning it to original position
|
|
2297
2305
|
*/
|
|
2298
2306
|
async unfocusImage() {
|
|
2299
|
-
if (this.state ===
|
|
2307
|
+
if (this.state === S.UNFOCUSING)
|
|
2300
2308
|
return;
|
|
2301
2309
|
const t = ++this.focusGeneration;
|
|
2302
2310
|
if (!this.currentFocus || !this.focusData) {
|
|
2303
|
-
if (this.incoming && this.state ===
|
|
2311
|
+
if (this.incoming && this.state === S.FOCUSING) {
|
|
2304
2312
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2305
2313
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2306
2314
|
this.incoming.element,
|
|
2307
2315
|
this.incoming.originalState,
|
|
2308
2316
|
a,
|
|
2309
2317
|
r
|
|
2310
|
-
), this.incoming = null, this.state =
|
|
2311
|
-
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2318
|
+
), this.incoming = null, this.state = S.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2319
|
+
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = S.IDLE;
|
|
2312
2320
|
}
|
|
2313
2321
|
return;
|
|
2314
2322
|
}
|
|
2315
|
-
if (this.state ===
|
|
2323
|
+
if (this.state === S.CROSS_ANIMATING && this.incoming) {
|
|
2316
2324
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2317
2325
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2318
2326
|
const s = this.startUnfocusAnimation(
|
|
@@ -2325,12 +2333,12 @@ class De {
|
|
|
2325
2333
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2326
2334
|
this.waitForAnimation(s.animationHandle)
|
|
2327
2335
|
]), this.focusGeneration !== t) return;
|
|
2328
|
-
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 =
|
|
2336
|
+
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 = S.IDLE;
|
|
2329
2337
|
return;
|
|
2330
2338
|
}
|
|
2331
|
-
this.state =
|
|
2332
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2333
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2339
|
+
this.state = S.UNFOCUSING;
|
|
2340
|
+
const i = this.currentFocus, e = this.focusData.originalState, o = this.focusData.originalZIndex;
|
|
2341
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = S.IDLE);
|
|
2334
2342
|
}
|
|
2335
2343
|
/**
|
|
2336
2344
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2348,7 +2356,7 @@ class De {
|
|
|
2348
2356
|
* Check if an image is currently focused (stable state)
|
|
2349
2357
|
*/
|
|
2350
2358
|
isFocused(t) {
|
|
2351
|
-
return this.currentFocus === t && this.state ===
|
|
2359
|
+
return this.currentFocus === t && this.state === S.FOCUSED;
|
|
2352
2360
|
}
|
|
2353
2361
|
/**
|
|
2354
2362
|
* Check if an image is the target of current focus animation
|
|
@@ -2369,9 +2377,9 @@ class De {
|
|
|
2369
2377
|
* Used during swipe gestures for visual feedback
|
|
2370
2378
|
*/
|
|
2371
2379
|
setDragOffset(t) {
|
|
2372
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2373
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2374
|
-
|
|
2380
|
+
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2381
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2382
|
+
o.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && o.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = o.join(" ");
|
|
2375
2383
|
}
|
|
2376
2384
|
/**
|
|
2377
2385
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2379,9 +2387,9 @@ class De {
|
|
|
2379
2387
|
* @param duration - Animation duration in ms (default 150)
|
|
2380
2388
|
*/
|
|
2381
2389
|
clearDragOffset(t, i = 150) {
|
|
2382
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2383
|
-
const e = this.currentFocus,
|
|
2384
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2390
|
+
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2391
|
+
const e = this.currentFocus, o = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = o.x ?? 0, s = o.y ?? 0;
|
|
2392
|
+
a.push(`translate(${r}px, ${s}px)`), o.rotation !== void 0 && a.push(`rotate(${o.rotation}deg)`);
|
|
2385
2393
|
const c = a.join(" ");
|
|
2386
2394
|
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = c, setTimeout(() => {
|
|
2387
2395
|
this.currentFocus === e && (e.style.transition = "none");
|
|
@@ -2409,10 +2417,10 @@ class De {
|
|
|
2409
2417
|
this.focusData.originalZIndex,
|
|
2410
2418
|
this.focusData.originalWidth,
|
|
2411
2419
|
this.focusData.originalHeight
|
|
2412
|
-
), this.state =
|
|
2420
|
+
), this.state = S.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2413
2421
|
}
|
|
2414
2422
|
}
|
|
2415
|
-
const
|
|
2423
|
+
const Pe = 50, _e = 0.5, Ue = 20, He = 0.3, Ne = 150, je = 30, at = class at {
|
|
2416
2424
|
constructor(t, i) {
|
|
2417
2425
|
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);
|
|
2418
2426
|
}
|
|
@@ -2456,23 +2464,23 @@ const $e = 50, Pe = 0.5, _e = 20, Ue = 0.3, He = 150, Ne = 30, at = class at {
|
|
|
2456
2464
|
}
|
|
2457
2465
|
handleTouchMove(t) {
|
|
2458
2466
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2459
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2460
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2461
|
-
const s = Math.atan2(Math.abs(
|
|
2462
|
-
this.touchState.isHorizontalSwipe = s <=
|
|
2467
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, o = i.clientY - this.touchState.startY;
|
|
2468
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + o * o) > 10) {
|
|
2469
|
+
const s = Math.atan2(Math.abs(o), Math.abs(e)) * (180 / Math.PI);
|
|
2470
|
+
this.touchState.isHorizontalSwipe = s <= je;
|
|
2463
2471
|
}
|
|
2464
2472
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2465
2473
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = i.clientX;
|
|
2466
|
-
const a = e *
|
|
2474
|
+
const a = e * He;
|
|
2467
2475
|
this.callbacks.onDragOffset(a);
|
|
2468
2476
|
}
|
|
2469
2477
|
}
|
|
2470
2478
|
handleTouchEnd(t) {
|
|
2471
2479
|
if (!this.touchState) return;
|
|
2472
2480
|
this.recentTouchTimestamp = Date.now();
|
|
2473
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2481
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, o = Math.abs(i) / e, a = Math.abs(i);
|
|
2474
2482
|
let r = !1;
|
|
2475
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >=
|
|
2483
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Pe || o >= _e && a >= Ue) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2476
2484
|
}
|
|
2477
2485
|
handleTouchCancel(t) {
|
|
2478
2486
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
@@ -2480,7 +2488,7 @@ const $e = 50, Pe = 0.5, _e = 20, Ue = 0.3, He = 150, Ne = 30, at = class at {
|
|
|
2480
2488
|
};
|
|
2481
2489
|
at.TOUCH_CLICK_DELAY = 300;
|
|
2482
2490
|
let bt = at;
|
|
2483
|
-
class
|
|
2491
|
+
class ke {
|
|
2484
2492
|
constructor(t) {
|
|
2485
2493
|
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)
|
|
2486
2494
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2494,7 +2502,7 @@ class je {
|
|
|
2494
2502
|
for (const i of this.sources)
|
|
2495
2503
|
if ("folders" in i)
|
|
2496
2504
|
for (const e of i.folders) {
|
|
2497
|
-
const
|
|
2505
|
+
const o = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, o);
|
|
2498
2506
|
this._discoveredUrls.push(...a);
|
|
2499
2507
|
}
|
|
2500
2508
|
else if ("files" in i) {
|
|
@@ -2540,9 +2548,9 @@ class je {
|
|
|
2540
2548
|
// Alternative format
|
|
2541
2549
|
];
|
|
2542
2550
|
for (const e of i) {
|
|
2543
|
-
const
|
|
2544
|
-
if (
|
|
2545
|
-
return
|
|
2551
|
+
const o = t.match(e);
|
|
2552
|
+
if (o && o[1])
|
|
2553
|
+
return o[1];
|
|
2546
2554
|
}
|
|
2547
2555
|
return null;
|
|
2548
2556
|
}
|
|
@@ -2554,15 +2562,15 @@ class je {
|
|
|
2554
2562
|
* @returns Promise resolving to array of image URLs
|
|
2555
2563
|
*/
|
|
2556
2564
|
async loadFromFolder(t, i, e = !0) {
|
|
2557
|
-
const
|
|
2558
|
-
if (!
|
|
2565
|
+
const o = this.extractFolderId(t);
|
|
2566
|
+
if (!o)
|
|
2559
2567
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2560
2568
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2561
|
-
return this.loadImagesDirectly(
|
|
2569
|
+
return this.loadImagesDirectly(o, i);
|
|
2562
2570
|
try {
|
|
2563
|
-
return e ? await this.loadImagesRecursively(
|
|
2571
|
+
return e ? await this.loadImagesRecursively(o, i) : await this.loadImagesFromSingleFolder(o, i);
|
|
2564
2572
|
} catch (a) {
|
|
2565
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2573
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(o, i);
|
|
2566
2574
|
}
|
|
2567
2575
|
}
|
|
2568
2576
|
/**
|
|
@@ -2572,7 +2580,7 @@ class je {
|
|
|
2572
2580
|
* @returns Promise resolving to array of image URLs
|
|
2573
2581
|
*/
|
|
2574
2582
|
async loadImagesFromSingleFolder(t, i) {
|
|
2575
|
-
const e = [],
|
|
2583
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2576
2584
|
if (!s.ok)
|
|
2577
2585
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2578
2586
|
const l = (await s.json()).files.filter(
|
|
@@ -2590,10 +2598,10 @@ class je {
|
|
|
2590
2598
|
*/
|
|
2591
2599
|
async loadFiles(t, i) {
|
|
2592
2600
|
const e = [];
|
|
2593
|
-
for (const
|
|
2594
|
-
const a = this.extractFileId(
|
|
2601
|
+
for (const o of t) {
|
|
2602
|
+
const a = this.extractFileId(o);
|
|
2595
2603
|
if (!a) {
|
|
2596
|
-
this.log(`Skipping invalid file URL: ${
|
|
2604
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2597
2605
|
continue;
|
|
2598
2606
|
}
|
|
2599
2607
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
@@ -2629,9 +2637,9 @@ class je {
|
|
|
2629
2637
|
// Generic id parameter
|
|
2630
2638
|
];
|
|
2631
2639
|
for (const e of i) {
|
|
2632
|
-
const
|
|
2633
|
-
if (
|
|
2634
|
-
return
|
|
2640
|
+
const o = t.match(e);
|
|
2641
|
+
if (o && o[1])
|
|
2642
|
+
return o[1];
|
|
2635
2643
|
}
|
|
2636
2644
|
return null;
|
|
2637
2645
|
}
|
|
@@ -2642,7 +2650,7 @@ class je {
|
|
|
2642
2650
|
* @returns Promise resolving to array of image URLs
|
|
2643
2651
|
*/
|
|
2644
2652
|
async loadImagesRecursively(t, i) {
|
|
2645
|
-
const e = [],
|
|
2653
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2646
2654
|
if (!s.ok)
|
|
2647
2655
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2648
2656
|
const c = await s.json(), l = c.files.filter(
|
|
@@ -2669,10 +2677,10 @@ class je {
|
|
|
2669
2677
|
*/
|
|
2670
2678
|
async loadImagesDirectly(t, i) {
|
|
2671
2679
|
try {
|
|
2672
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2673
|
-
if (!
|
|
2680
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(e, { mode: "cors" });
|
|
2681
|
+
if (!o.ok)
|
|
2674
2682
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2675
|
-
const a = await
|
|
2683
|
+
const a = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2676
2684
|
return [...new Set(s.map((u) => u[1]))].map(
|
|
2677
2685
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2678
2686
|
);
|
|
@@ -2701,7 +2709,7 @@ class je {
|
|
|
2701
2709
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2702
2710
|
}
|
|
2703
2711
|
}
|
|
2704
|
-
class
|
|
2712
|
+
class We {
|
|
2705
2713
|
constructor(t) {
|
|
2706
2714
|
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)
|
|
2707
2715
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -2765,13 +2773,13 @@ class ke {
|
|
|
2765
2773
|
if (!Array.isArray(t))
|
|
2766
2774
|
return console.warn("URLs must be an array:", t), [];
|
|
2767
2775
|
const e = [];
|
|
2768
|
-
for (const
|
|
2769
|
-
const a =
|
|
2776
|
+
for (const o of t) {
|
|
2777
|
+
const a = o.split("/").pop() || o;
|
|
2770
2778
|
if (!i.isAllowed(a)) {
|
|
2771
|
-
this.log(`Skipping filtered URL: ${
|
|
2779
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2772
2780
|
continue;
|
|
2773
2781
|
}
|
|
2774
|
-
this.validateUrls ? await this.validateUrl(
|
|
2782
|
+
this.validateUrls ? await this.validateUrl(o) ? e.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : e.push(o);
|
|
2775
2783
|
}
|
|
2776
2784
|
return e;
|
|
2777
2785
|
}
|
|
@@ -2785,16 +2793,16 @@ class ke {
|
|
|
2785
2793
|
async processPath(t, i, e) {
|
|
2786
2794
|
if (!Array.isArray(i))
|
|
2787
2795
|
return console.warn("files must be an array:", i), [];
|
|
2788
|
-
const
|
|
2796
|
+
const o = [];
|
|
2789
2797
|
for (const a of i) {
|
|
2790
2798
|
if (!e.isAllowed(a)) {
|
|
2791
2799
|
this.log(`Skipping filtered file: ${a}`);
|
|
2792
2800
|
continue;
|
|
2793
2801
|
}
|
|
2794
2802
|
const r = this.constructUrl(t, a);
|
|
2795
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2803
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
2796
2804
|
}
|
|
2797
|
-
return
|
|
2805
|
+
return o;
|
|
2798
2806
|
}
|
|
2799
2807
|
/**
|
|
2800
2808
|
* Process a JSON endpoint source
|
|
@@ -2805,17 +2813,17 @@ class ke {
|
|
|
2805
2813
|
*/
|
|
2806
2814
|
async processJson(t, i) {
|
|
2807
2815
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2808
|
-
const e = new AbortController(),
|
|
2816
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), 1e4);
|
|
2809
2817
|
try {
|
|
2810
2818
|
const a = await fetch(t, { signal: e.signal });
|
|
2811
|
-
if (clearTimeout(
|
|
2819
|
+
if (clearTimeout(o), !a.ok)
|
|
2812
2820
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
2813
2821
|
const r = await a.json();
|
|
2814
2822
|
if (!r || !Array.isArray(r.images))
|
|
2815
2823
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2816
2824
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
2817
2825
|
} catch (a) {
|
|
2818
|
-
throw clearTimeout(
|
|
2826
|
+
throw clearTimeout(o), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
2819
2827
|
}
|
|
2820
2828
|
}
|
|
2821
2829
|
/**
|
|
@@ -2837,11 +2845,11 @@ class ke {
|
|
|
2837
2845
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2838
2846
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2839
2847
|
try {
|
|
2840
|
-
const e = new AbortController(),
|
|
2848
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
2841
2849
|
method: "HEAD",
|
|
2842
2850
|
signal: e.signal
|
|
2843
2851
|
});
|
|
2844
|
-
return clearTimeout(
|
|
2852
|
+
return clearTimeout(o), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
2845
2853
|
} catch (e) {
|
|
2846
2854
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
2847
2855
|
}
|
|
@@ -2858,8 +2866,8 @@ class ke {
|
|
|
2858
2866
|
return `${e}/${i}`;
|
|
2859
2867
|
if (typeof window > "u")
|
|
2860
2868
|
return `${e}/${i}`;
|
|
2861
|
-
const
|
|
2862
|
-
return `${
|
|
2869
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2870
|
+
return `${o}${r}/${i}`;
|
|
2863
2871
|
}
|
|
2864
2872
|
/**
|
|
2865
2873
|
* Check if URL is absolute (contains protocol)
|
|
@@ -2881,7 +2889,7 @@ class ke {
|
|
|
2881
2889
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2882
2890
|
}
|
|
2883
2891
|
}
|
|
2884
|
-
class
|
|
2892
|
+
class Ge {
|
|
2885
2893
|
constructor(t) {
|
|
2886
2894
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2887
2895
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -2893,16 +2901,16 @@ class We {
|
|
|
2893
2901
|
*/
|
|
2894
2902
|
async prepare(t) {
|
|
2895
2903
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2896
|
-
const i = this.loaders.map((e,
|
|
2897
|
-
this.log(`Loader ${
|
|
2904
|
+
const i = this.loaders.map((e, o) => e.prepare(t).then(() => {
|
|
2905
|
+
this.log(`Loader ${o} prepared with ${e.imagesLength()} images`);
|
|
2898
2906
|
}).catch((a) => {
|
|
2899
|
-
console.warn(`Loader ${
|
|
2907
|
+
console.warn(`Loader ${o} failed to prepare:`, a);
|
|
2900
2908
|
}));
|
|
2901
2909
|
await Promise.all(i);
|
|
2902
2910
|
for (const e of this.loaders)
|
|
2903
2911
|
if (e.isPrepared()) {
|
|
2904
|
-
const
|
|
2905
|
-
this._discoveredUrls.push(...
|
|
2912
|
+
const o = e.imageURLs();
|
|
2913
|
+
this._discoveredUrls.push(...o);
|
|
2906
2914
|
}
|
|
2907
2915
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2908
2916
|
}
|
|
@@ -2938,7 +2946,7 @@ class We {
|
|
|
2938
2946
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2939
2947
|
}
|
|
2940
2948
|
}
|
|
2941
|
-
class
|
|
2949
|
+
class qe {
|
|
2942
2950
|
/**
|
|
2943
2951
|
* Create a new ImageFilter
|
|
2944
2952
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2975,7 +2983,7 @@ class Ge {
|
|
|
2975
2983
|
// isAllowedDate(date: Date): boolean
|
|
2976
2984
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2977
2985
|
}
|
|
2978
|
-
const
|
|
2986
|
+
const Xe = `
|
|
2979
2987
|
.fbn-ic-gallery {
|
|
2980
2988
|
position: relative;
|
|
2981
2989
|
width: 100%;
|
|
@@ -3025,21 +3033,21 @@ const qe = `
|
|
|
3025
3033
|
display: none !important;
|
|
3026
3034
|
}
|
|
3027
3035
|
`;
|
|
3028
|
-
function
|
|
3036
|
+
function Ye() {
|
|
3029
3037
|
if (typeof document > "u") return;
|
|
3030
|
-
const
|
|
3031
|
-
if (document.getElementById(
|
|
3038
|
+
const n = "fbn-ic-functional-styles";
|
|
3039
|
+
if (document.getElementById(n)) return;
|
|
3032
3040
|
const t = document.createElement("style");
|
|
3033
|
-
t.id =
|
|
3041
|
+
t.id = n, t.textContent = Xe, document.head.appendChild(t);
|
|
3034
3042
|
}
|
|
3035
|
-
class
|
|
3043
|
+
class Be {
|
|
3036
3044
|
constructor(t = {}) {
|
|
3037
|
-
this.fullConfig =
|
|
3045
|
+
this.fullConfig = Bt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.animationEngine = new Zt(this.fullConfig.animation), this.layoutEngine = new Te({
|
|
3038
3046
|
layout: this.fullConfig.layout,
|
|
3039
3047
|
image: this.fullConfig.image
|
|
3040
|
-
}), this.zoomEngine = new
|
|
3041
|
-
const i = this.fullConfig.animation.entry ||
|
|
3042
|
-
this.entryAnimationEngine = new
|
|
3048
|
+
}), this.zoomEngine = new $e(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = et(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3049
|
+
const i = this.fullConfig.animation.entry || E.animation.entry;
|
|
3050
|
+
this.entryAnimationEngine = new le(
|
|
3043
3051
|
i,
|
|
3044
3052
|
this.fullConfig.layout.algorithm
|
|
3045
3053
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
@@ -3049,7 +3057,7 @@ class Ye {
|
|
|
3049
3057
|
*/
|
|
3050
3058
|
createImageFilter() {
|
|
3051
3059
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
3052
|
-
return new
|
|
3060
|
+
return new qe(t);
|
|
3053
3061
|
}
|
|
3054
3062
|
/**
|
|
3055
3063
|
* Create appropriate image loader based on config
|
|
@@ -3059,8 +3067,8 @@ class Ye {
|
|
|
3059
3067
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3060
3068
|
if (!t || t.length === 0)
|
|
3061
3069
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3062
|
-
const e = t.map((
|
|
3063
|
-
return e.length === 1 ? e[0] : new
|
|
3070
|
+
const e = t.map((o) => this.createLoaderFromEntry(o, i));
|
|
3071
|
+
return e.length === 1 ? e[0] : new Ge({
|
|
3064
3072
|
loaders: e,
|
|
3065
3073
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
3066
3074
|
});
|
|
@@ -3070,7 +3078,7 @@ class Ye {
|
|
|
3070
3078
|
*/
|
|
3071
3079
|
createLoaderFromEntry(t, i) {
|
|
3072
3080
|
if ("static" in t) {
|
|
3073
|
-
const e = t.static,
|
|
3081
|
+
const e = t.static, o = {
|
|
3074
3082
|
...e,
|
|
3075
3083
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3076
3084
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3078,14 +3086,14 @@ class Ye {
|
|
|
3078
3086
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3079
3087
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3080
3088
|
};
|
|
3081
|
-
return new
|
|
3089
|
+
return new We(o);
|
|
3082
3090
|
} else if ("googleDrive" in t) {
|
|
3083
|
-
const e = t.googleDrive,
|
|
3091
|
+
const e = t.googleDrive, o = {
|
|
3084
3092
|
...e,
|
|
3085
3093
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3086
3094
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3087
3095
|
};
|
|
3088
|
-
return new
|
|
3096
|
+
return new ke(o);
|
|
3089
3097
|
} else
|
|
3090
3098
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3091
3099
|
}
|
|
@@ -3094,7 +3102,7 @@ class Ye {
|
|
|
3094
3102
|
*/
|
|
3095
3103
|
async init() {
|
|
3096
3104
|
try {
|
|
3097
|
-
if (
|
|
3105
|
+
if (Ye(), this.containerRef)
|
|
3098
3106
|
this.containerEl = this.containerRef;
|
|
3099
3107
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3100
3108
|
throw new Error(`Container #${this.containerId} not found`);
|
|
@@ -3103,7 +3111,7 @@ class Ye {
|
|
|
3103
3111
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3104
3112
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3105
3113
|
onDragEnd: (t) => {
|
|
3106
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
3114
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ne);
|
|
3107
3115
|
}
|
|
3108
3116
|
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3109
3117
|
} catch (t) {
|
|
@@ -3146,7 +3154,7 @@ class Ye {
|
|
|
3146
3154
|
navigateToNextImage() {
|
|
3147
3155
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3148
3156
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3149
|
-
(
|
|
3157
|
+
(o) => o.dataset.imageId === String(t)
|
|
3150
3158
|
);
|
|
3151
3159
|
if (!i) return;
|
|
3152
3160
|
const e = this.imageLayouts[t];
|
|
@@ -3158,7 +3166,7 @@ class Ye {
|
|
|
3158
3166
|
navigateToPreviousImage() {
|
|
3159
3167
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3160
3168
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3161
|
-
(
|
|
3169
|
+
(o) => o.dataset.imageId === String(t)
|
|
3162
3170
|
);
|
|
3163
3171
|
if (!i) return;
|
|
3164
3172
|
const e = this.imageLayouts[t];
|
|
@@ -3174,8 +3182,8 @@ class Ye {
|
|
|
3174
3182
|
}, 500));
|
|
3175
3183
|
}
|
|
3176
3184
|
getImageHeight() {
|
|
3177
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3178
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3185
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, o = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3186
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, o) : t <= i.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
|
|
3179
3187
|
}
|
|
3180
3188
|
/**
|
|
3181
3189
|
* Get container bounds for layout calculations
|
|
@@ -3198,12 +3206,12 @@ class Ye {
|
|
|
3198
3206
|
this.showError("No images found."), this.showLoading(!1);
|
|
3199
3207
|
return;
|
|
3200
3208
|
}
|
|
3201
|
-
const e = this.getContainerBounds(),
|
|
3202
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3209
|
+
const e = this.getContainerBounds(), o = this.getImageHeight(), a = window.innerWidth;
|
|
3210
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3203
3211
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3204
3212
|
e,
|
|
3205
3213
|
t,
|
|
3206
|
-
|
|
3214
|
+
o,
|
|
3207
3215
|
a
|
|
3208
3216
|
);
|
|
3209
3217
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3221,7 +3229,7 @@ class Ye {
|
|
|
3221
3229
|
if (!this.containerEl) return;
|
|
3222
3230
|
const e = this.getContainerBounds();
|
|
3223
3231
|
this.currentImageHeight = i;
|
|
3224
|
-
const
|
|
3232
|
+
const o = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3225
3233
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3226
3234
|
let r = 0;
|
|
3227
3235
|
const s = (l) => {
|
|
@@ -3230,24 +3238,24 @@ class Ye {
|
|
|
3230
3238
|
const d = {
|
|
3231
3239
|
x: parseFloat(l.dataset.startX),
|
|
3232
3240
|
y: parseFloat(l.dataset.startY)
|
|
3233
|
-
},
|
|
3241
|
+
}, f = {
|
|
3234
3242
|
x: parseFloat(l.dataset.endX),
|
|
3235
3243
|
y: parseFloat(l.dataset.endY)
|
|
3236
|
-
}, b = parseFloat(l.dataset.imageWidth),
|
|
3237
|
-
|
|
3244
|
+
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), m = parseFloat(l.dataset.scale), y = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : g, w = l.dataset.startScale ? parseFloat(l.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3245
|
+
ae({
|
|
3238
3246
|
element: l,
|
|
3239
3247
|
startPosition: d,
|
|
3240
|
-
endPosition:
|
|
3248
|
+
endPosition: f,
|
|
3241
3249
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3242
|
-
duration:
|
|
3250
|
+
duration: v.duration,
|
|
3243
3251
|
imageWidth: b,
|
|
3244
|
-
imageHeight:
|
|
3245
|
-
rotation:
|
|
3246
|
-
scale:
|
|
3252
|
+
imageHeight: p,
|
|
3253
|
+
rotation: g,
|
|
3254
|
+
scale: m,
|
|
3247
3255
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3248
3256
|
startRotation: y,
|
|
3249
3257
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3250
|
-
startScale:
|
|
3258
|
+
startScale: w
|
|
3251
3259
|
});
|
|
3252
3260
|
} else {
|
|
3253
3261
|
const d = l.dataset.finalTransform || "";
|
|
@@ -3277,7 +3285,7 @@ class Ye {
|
|
|
3277
3285
|
return;
|
|
3278
3286
|
}
|
|
3279
3287
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3280
|
-
if (
|
|
3288
|
+
if (o !== this.loadGeneration) {
|
|
3281
3289
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3282
3290
|
return;
|
|
3283
3291
|
}
|
|
@@ -3300,65 +3308,65 @@ class Ye {
|
|
|
3300
3308
|
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), a.forEach((l, u) => {
|
|
3301
3309
|
const h = document.createElement("div");
|
|
3302
3310
|
h.className = "fbn-ic-debug-center", h.style.position = "absolute", h.style.width = "12px", h.style.height = "12px", h.style.borderRadius = "50%", h.style.backgroundColor = "red", h.style.border = "2px solid yellow", h.style.zIndex = "9999", h.style.pointerEvents = "none";
|
|
3303
|
-
const d = l.x,
|
|
3304
|
-
h.style.left = `${d - 6}px`, h.style.top = `${
|
|
3311
|
+
const d = l.x, f = l.y;
|
|
3312
|
+
h.style.left = `${d - 6}px`, h.style.top = `${f - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(h);
|
|
3305
3313
|
})), t.forEach((l, u) => {
|
|
3306
3314
|
const h = document.createElement("img");
|
|
3307
3315
|
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3308
3316
|
const d = a[u];
|
|
3309
3317
|
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), st(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3310
3318
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|
|
3311
|
-
const
|
|
3312
|
-
ft(h, this.fullConfig.styling?.hover, i,
|
|
3319
|
+
const f = h.cachedRenderedWidth;
|
|
3320
|
+
ft(h, this.fullConfig.styling?.hover, i, f), st(h, this.hoverClassName);
|
|
3313
3321
|
}
|
|
3314
3322
|
}), h.addEventListener("mouseleave", () => {
|
|
3315
3323
|
if (this.hoveredImage = null, !this.zoomEngine.isInvolved(h)) {
|
|
3316
|
-
const
|
|
3317
|
-
ft(h, this.fullConfig.styling?.default, i,
|
|
3324
|
+
const f = h.cachedRenderedWidth;
|
|
3325
|
+
ft(h, this.fullConfig.styling?.default, i, f), pt(h, this.hoverClassName), st(h, this.defaultClassName);
|
|
3318
3326
|
}
|
|
3319
|
-
}), h.addEventListener("click", (
|
|
3320
|
-
|
|
3327
|
+
}), h.addEventListener("click", (f) => {
|
|
3328
|
+
f.stopPropagation(), this.handleImageClick(h, d);
|
|
3321
3329
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3322
|
-
if (
|
|
3330
|
+
if (o !== this.loadGeneration)
|
|
3323
3331
|
return;
|
|
3324
|
-
const
|
|
3325
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${b}`), h.style.width = `${b}px`, h.cachedRenderedWidth = b, h.aspectRatio =
|
|
3326
|
-
const
|
|
3327
|
-
|
|
3328
|
-
|
|
3332
|
+
const f = h.naturalWidth / h.naturalHeight, b = i * f;
|
|
3333
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${b}`), h.style.width = `${b}px`, h.cachedRenderedWidth = b, h.aspectRatio = f, ft(h, this.fullConfig.styling?.default, i, b);
|
|
3334
|
+
const p = { x: d.x, y: d.y }, g = { width: b, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3335
|
+
p,
|
|
3336
|
+
g,
|
|
3329
3337
|
e,
|
|
3330
3338
|
u,
|
|
3331
3339
|
t.length
|
|
3332
|
-
), y = this.entryAnimationEngine.calculateStartRotation(d.rotation),
|
|
3340
|
+
), y = this.entryAnimationEngine.calculateStartRotation(d.rotation), w = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3333
3341
|
d.rotation,
|
|
3334
3342
|
d.scale,
|
|
3335
3343
|
b,
|
|
3336
3344
|
i
|
|
3337
|
-
),
|
|
3338
|
-
p,
|
|
3345
|
+
), I = this.entryAnimationEngine.buildStartTransform(
|
|
3339
3346
|
m,
|
|
3347
|
+
p,
|
|
3340
3348
|
d.rotation,
|
|
3341
3349
|
d.scale,
|
|
3342
3350
|
b,
|
|
3343
3351
|
i,
|
|
3344
3352
|
y,
|
|
3345
|
-
|
|
3353
|
+
w
|
|
3346
3354
|
);
|
|
3347
3355
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
3348
|
-
finalPosition:
|
|
3349
|
-
imageSize:
|
|
3356
|
+
finalPosition: p,
|
|
3357
|
+
imageSize: g,
|
|
3350
3358
|
left: d.x,
|
|
3351
3359
|
top: d.y,
|
|
3352
|
-
finalTransform:
|
|
3360
|
+
finalTransform: v,
|
|
3353
3361
|
renderedWidth: b,
|
|
3354
3362
|
renderedHeight: i
|
|
3355
|
-
}), h.style.transform =
|
|
3363
|
+
}), h.style.transform = I, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || y !== d.rotation || w !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(p.x), h.dataset.endY = String(p.y), h.dataset.imageWidth = String(b), h.dataset.imageHeight = String(i), h.dataset.rotation = String(d.rotation), h.dataset.scale = String(d.scale), h.dataset.startRotation = String(y), h.dataset.startScale = String(w)), this.displayQueue.push(h);
|
|
3356
3364
|
}, h.onerror = () => r++, h.src = l;
|
|
3357
3365
|
});
|
|
3358
3366
|
}
|
|
3359
3367
|
async handleImageClick(t, i) {
|
|
3360
3368
|
if (!this.containerEl) return;
|
|
3361
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3369
|
+
const e = this.zoomEngine.isFocused(t), o = {
|
|
3362
3370
|
width: this.containerEl.offsetWidth,
|
|
3363
3371
|
height: this.containerEl.offsetHeight
|
|
3364
3372
|
};
|
|
@@ -3366,7 +3374,7 @@ class Ye {
|
|
|
3366
3374
|
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
|
|
3367
3375
|
else {
|
|
3368
3376
|
const a = t.dataset.imageId;
|
|
3369
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3377
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3370
3378
|
}
|
|
3371
3379
|
}
|
|
3372
3380
|
/**
|
|
@@ -3397,20 +3405,20 @@ class Ye {
|
|
|
3397
3405
|
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy();
|
|
3398
3406
|
}
|
|
3399
3407
|
}
|
|
3400
|
-
function
|
|
3408
|
+
function Je() {
|
|
3401
3409
|
if (typeof document > "u") return;
|
|
3402
|
-
const
|
|
3403
|
-
if (document.getElementById(
|
|
3410
|
+
const n = "fbn-ic-styles";
|
|
3411
|
+
if (document.getElementById(n)) return;
|
|
3404
3412
|
const t = document.createElement("style");
|
|
3405
|
-
t.id =
|
|
3413
|
+
t.id = n, t.textContent = _t, document.head.appendChild(t);
|
|
3406
3414
|
}
|
|
3407
|
-
|
|
3408
|
-
function
|
|
3415
|
+
Je();
|
|
3416
|
+
function Ve() {
|
|
3409
3417
|
if (typeof document > "u") {
|
|
3410
3418
|
console.warn("ImageCloud: Document not available (not in browser environment)");
|
|
3411
3419
|
return;
|
|
3412
3420
|
}
|
|
3413
|
-
const
|
|
3421
|
+
const n = () => {
|
|
3414
3422
|
const t = document.querySelectorAll("[data-image-cloud], [data-image-gallery]");
|
|
3415
3423
|
t.length !== 0 && t.forEach((i) => {
|
|
3416
3424
|
const e = i;
|
|
@@ -3418,11 +3426,11 @@ function Je() {
|
|
|
3418
3426
|
console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
|
|
3419
3427
|
return;
|
|
3420
3428
|
}
|
|
3421
|
-
const
|
|
3429
|
+
const o = e.dataset.config || e.dataset.galleryConfig;
|
|
3422
3430
|
let a;
|
|
3423
|
-
if (
|
|
3431
|
+
if (o)
|
|
3424
3432
|
try {
|
|
3425
|
-
const s = JSON.parse(
|
|
3433
|
+
const s = JSON.parse(o);
|
|
3426
3434
|
a = {
|
|
3427
3435
|
container: e.id,
|
|
3428
3436
|
...s
|
|
@@ -3435,17 +3443,17 @@ function Je() {
|
|
|
3435
3443
|
console.error(`ImageCloud: Missing configuration for #${e.id}. Add data-config='{...}' attribute.`);
|
|
3436
3444
|
return;
|
|
3437
3445
|
}
|
|
3438
|
-
new
|
|
3446
|
+
new Be(a).init().catch((s) => {
|
|
3439
3447
|
console.error("ImageCloud initialization failed:", s);
|
|
3440
3448
|
});
|
|
3441
3449
|
});
|
|
3442
3450
|
};
|
|
3443
|
-
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded",
|
|
3451
|
+
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", n) : n();
|
|
3444
3452
|
}
|
|
3445
|
-
|
|
3453
|
+
Ve();
|
|
3446
3454
|
export {
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3455
|
+
Be as ImageCloud,
|
|
3456
|
+
Be as ImageGallery,
|
|
3457
|
+
Ve as autoInitialize
|
|
3450
3458
|
};
|
|
3451
3459
|
//# sourceMappingURL=image-cloud-auto-init.js.map
|