@frybynite/image-cloud 0.10.1 → 0.11.0
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 +979 -853
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +1081 -955
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +137 -36
- package/dist/react.d.ts +137 -36
- package/dist/react.js +776 -649
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +137 -36
- package/dist/vue.js +1057 -930
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +137 -36
- package/dist/web-component.js +774 -647
- package/dist/web-component.js.map +1 -1
- package/package.json +9 -6
|
@@ -4,7 +4,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
4
4
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
5
5
|
lg: "0 8px 32px rgba(0,0,0,0.5)",
|
|
6
6
|
glow: "0 0 30px rgba(255,255,255,0.6)"
|
|
7
|
-
}),
|
|
7
|
+
}), St = Object.freeze({
|
|
8
8
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
9
9
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
10
10
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
@@ -13,7 +13,7 @@ const Ut = ".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
|
+
}), Rt = 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 }),
|
|
@@ -24,7 +24,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
24
24
|
mode: "none"
|
|
25
25
|
}), xt = Object.freeze({
|
|
26
26
|
mode: "none"
|
|
27
|
-
}),
|
|
27
|
+
}), Ft = Object.freeze({
|
|
28
28
|
default: Object.freeze({
|
|
29
29
|
border: Object.freeze({
|
|
30
30
|
width: 0,
|
|
@@ -50,16 +50,16 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
50
50
|
focused: Object.freeze({
|
|
51
51
|
shadow: "none"
|
|
52
52
|
})
|
|
53
|
-
}),
|
|
53
|
+
}), kt = Object.freeze({
|
|
54
54
|
tightness: 1
|
|
55
|
-
}),
|
|
55
|
+
}), Ht = Object.freeze({
|
|
56
56
|
rows: 1,
|
|
57
57
|
amplitude: 100,
|
|
58
58
|
frequency: 2,
|
|
59
59
|
phaseShift: 0,
|
|
60
60
|
synchronization: "offset"
|
|
61
61
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
62
|
-
}),
|
|
62
|
+
}), Nt = Object.freeze({
|
|
63
63
|
spacing: 0
|
|
64
64
|
}), Bt = Object.freeze({
|
|
65
65
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
@@ -82,7 +82,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
82
82
|
min: -15,
|
|
83
83
|
max: 15
|
|
84
84
|
})
|
|
85
|
-
}),
|
|
85
|
+
}), Mt = Object.freeze({
|
|
86
86
|
sizing: jt,
|
|
87
87
|
rotation: Wt
|
|
88
88
|
}), zt = Object.freeze({
|
|
@@ -94,7 +94,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
94
94
|
enabled: !1,
|
|
95
95
|
centers: !1,
|
|
96
96
|
loaders: !1
|
|
97
|
-
}), Gt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), qt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }),
|
|
97
|
+
}), Gt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), qt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Yt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Xt = Object.freeze({ speed: 4e3, direction: "clockwise" }), Dt = Object.freeze({ type: "none" }), L = Object.freeze({
|
|
98
98
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
99
99
|
loaders: [],
|
|
100
100
|
// Shared loader settings and debug config
|
|
@@ -103,7 +103,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
103
103
|
debug: Ot
|
|
104
104
|
}),
|
|
105
105
|
// Image sizing and rotation configuration
|
|
106
|
-
image:
|
|
106
|
+
image: Mt,
|
|
107
107
|
// Pattern-based layout configuration
|
|
108
108
|
layout: Object.freeze({
|
|
109
109
|
algorithm: "radial",
|
|
@@ -172,9 +172,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
172
172
|
}),
|
|
173
173
|
navigation: Object.freeze({
|
|
174
174
|
keyboard: !0,
|
|
175
|
-
swipe: !0
|
|
176
|
-
mouseWheel: void 0
|
|
177
|
-
// STUB: Not implemented yet
|
|
175
|
+
swipe: !0
|
|
178
176
|
}),
|
|
179
177
|
dragging: !0
|
|
180
178
|
}),
|
|
@@ -186,7 +184,7 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
186
184
|
showFocusOutline: !1
|
|
187
185
|
}),
|
|
188
186
|
// Image styling
|
|
189
|
-
styling:
|
|
187
|
+
styling: Ft
|
|
190
188
|
});
|
|
191
189
|
function Z(o, t) {
|
|
192
190
|
if (!o) return t || {};
|
|
@@ -194,7 +192,7 @@ function Z(o, t) {
|
|
|
194
192
|
const i = { ...o };
|
|
195
193
|
return t.border !== void 0 && (i.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
196
194
|
}
|
|
197
|
-
function
|
|
195
|
+
function Vt(o, t) {
|
|
198
196
|
if (!t) return { ...o };
|
|
199
197
|
const i = Z(o.default, t.default), e = Z(
|
|
200
198
|
Z(i, o.hover),
|
|
@@ -209,151 +207,117 @@ function Jt(o, t) {
|
|
|
209
207
|
focused: n
|
|
210
208
|
};
|
|
211
209
|
}
|
|
212
|
-
function
|
|
210
|
+
function Jt(o, t) {
|
|
213
211
|
if (!t) return { ...o };
|
|
214
212
|
const i = { ...o };
|
|
215
213
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
216
214
|
...o.sizing,
|
|
217
215
|
...t.sizing
|
|
218
216
|
}, t.sizing.variance)) {
|
|
219
|
-
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1,
|
|
220
|
-
i.sizing.variance = { min: n, max:
|
|
217
|
+
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1, s = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : o.sizing?.variance?.max ?? 1;
|
|
218
|
+
i.sizing.variance = { min: n, max: s };
|
|
221
219
|
}
|
|
222
220
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
223
221
|
...o.rotation,
|
|
224
222
|
...t.rotation
|
|
225
223
|
}, t.rotation.range)) {
|
|
226
|
-
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15,
|
|
227
|
-
i.rotation.range = { min: n, max:
|
|
224
|
+
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15, s = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : o.rotation?.range?.max ?? 15;
|
|
225
|
+
i.rotation.range = { min: n, max: s };
|
|
228
226
|
}
|
|
229
227
|
return i;
|
|
230
228
|
}
|
|
231
|
-
function Kt(o) {
|
|
232
|
-
const t = o.
|
|
233
|
-
|
|
234
|
-
return {
|
|
235
|
-
rotation: {
|
|
236
|
-
mode: t.enabled ? "random" : "none",
|
|
237
|
-
range: t.range
|
|
238
|
-
}
|
|
239
|
-
};
|
|
240
|
-
}
|
|
241
|
-
function Zt(o) {
|
|
242
|
-
const t = o.layout?.sizing?.variance;
|
|
243
|
-
if (t)
|
|
244
|
-
return {
|
|
245
|
-
sizing: {
|
|
246
|
-
mode: "adaptive",
|
|
247
|
-
// Legacy variance config implies adaptive mode
|
|
248
|
-
variance: t
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
|
-
}
|
|
252
|
-
function Qt(o = {}) {
|
|
253
|
-
const t = Kt(o), i = Zt(o);
|
|
254
|
-
let e = o.image;
|
|
255
|
-
(t || i) && (e = {
|
|
256
|
-
...i || {},
|
|
257
|
-
...t || {},
|
|
258
|
-
...e
|
|
259
|
-
}, e.rotation && t?.rotation && o.image?.rotation && (e.rotation = {
|
|
260
|
-
...t.rotation,
|
|
261
|
-
...o.image.rotation
|
|
262
|
-
}));
|
|
263
|
-
const n = [...o.loaders ?? []];
|
|
264
|
-
o.images && o.images.length > 0 && n.unshift({
|
|
229
|
+
function Kt(o = {}) {
|
|
230
|
+
const t = o.image, i = [...o.loaders ?? []];
|
|
231
|
+
o.images && o.images.length > 0 && i.unshift({
|
|
265
232
|
static: {
|
|
266
233
|
sources: [{ urls: o.images }]
|
|
267
234
|
}
|
|
268
235
|
});
|
|
269
|
-
const
|
|
236
|
+
const n = {
|
|
270
237
|
loaders: {
|
|
271
238
|
...zt,
|
|
272
239
|
...o.config?.loaders ?? {}
|
|
273
240
|
}
|
|
274
241
|
}, s = {
|
|
275
|
-
loaders:
|
|
276
|
-
config:
|
|
277
|
-
image:
|
|
278
|
-
layout: { ...
|
|
279
|
-
animation: { ...
|
|
280
|
-
interaction: { ...
|
|
281
|
-
ui: { ...
|
|
282
|
-
styling:
|
|
242
|
+
loaders: i,
|
|
243
|
+
config: n,
|
|
244
|
+
image: Jt(Mt, t),
|
|
245
|
+
layout: { ...L.layout },
|
|
246
|
+
animation: { ...L.animation },
|
|
247
|
+
interaction: { ...L.interaction },
|
|
248
|
+
ui: { ...L.ui },
|
|
249
|
+
styling: Vt(Ft, o.styling)
|
|
283
250
|
};
|
|
284
|
-
o.layout && (s.layout = {
|
|
285
|
-
...
|
|
251
|
+
if (o.layout && (s.layout = {
|
|
252
|
+
...L.layout,
|
|
286
253
|
...o.layout
|
|
287
254
|
}, o.layout.responsive && (s.layout.responsive = {
|
|
288
|
-
...
|
|
289
|
-
mobile: o.layout.responsive.mobile ? { ...
|
|
290
|
-
tablet: o.layout.responsive.tablet ? { ...
|
|
255
|
+
...L.layout.responsive,
|
|
256
|
+
mobile: o.layout.responsive.mobile ? { ...L.layout.responsive.mobile, ...o.layout.responsive.mobile } : L.layout.responsive.mobile,
|
|
257
|
+
tablet: o.layout.responsive.tablet ? { ...L.layout.responsive.tablet, ...o.layout.responsive.tablet } : L.layout.responsive.tablet
|
|
291
258
|
}), o.layout.spacing && (s.layout.spacing = {
|
|
292
|
-
...
|
|
259
|
+
...L.layout.spacing,
|
|
293
260
|
...o.layout.spacing
|
|
294
261
|
})), o.animation && (s.animation = {
|
|
295
|
-
...
|
|
262
|
+
...L.animation,
|
|
296
263
|
...o.animation
|
|
297
264
|
}, o.animation.easing && (s.animation.easing = {
|
|
298
|
-
...
|
|
265
|
+
...L.animation.easing,
|
|
299
266
|
...o.animation.easing
|
|
300
267
|
}), o.animation.queue && (s.animation.queue = {
|
|
301
|
-
...
|
|
268
|
+
...L.animation.queue,
|
|
302
269
|
...o.animation.queue
|
|
303
270
|
}), o.animation.entry && (s.animation.entry = {
|
|
304
|
-
...
|
|
271
|
+
...L.animation.entry,
|
|
305
272
|
...o.animation.entry,
|
|
306
273
|
start: o.animation.entry.start ? {
|
|
307
|
-
...
|
|
274
|
+
...L.animation.entry.start,
|
|
308
275
|
...o.animation.entry.start,
|
|
309
|
-
circular: o.animation.entry.start.circular ? { ...
|
|
310
|
-
} :
|
|
311
|
-
timing: o.animation.entry.timing ? { ...
|
|
312
|
-
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } :
|
|
313
|
-
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } :
|
|
314
|
-
scale: o.animation.entry.scale ? { ...xt, ...o.animation.entry.scale } :
|
|
276
|
+
circular: o.animation.entry.start.circular ? { ...L.animation.entry.start.circular, ...o.animation.entry.start.circular } : L.animation.entry.start.circular
|
|
277
|
+
} : L.animation.entry.start,
|
|
278
|
+
timing: o.animation.entry.timing ? { ...L.animation.entry.timing, ...o.animation.entry.timing } : L.animation.entry.timing,
|
|
279
|
+
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : L.animation.entry.path,
|
|
280
|
+
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : L.animation.entry.rotation,
|
|
281
|
+
scale: o.animation.entry.scale ? { ...xt, ...o.animation.entry.scale } : L.animation.entry.scale
|
|
315
282
|
}), o.animation.idle && (s.animation.idle = {
|
|
316
283
|
...Dt,
|
|
317
284
|
...o.animation.idle
|
|
318
285
|
})), o.interaction && (s.interaction = {
|
|
319
|
-
...
|
|
286
|
+
...L.interaction,
|
|
320
287
|
...o.interaction
|
|
321
288
|
}, o.interaction.focus && (s.interaction.focus = {
|
|
322
|
-
...
|
|
289
|
+
...L.interaction.focus,
|
|
323
290
|
...o.interaction.focus
|
|
324
291
|
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
325
|
-
...
|
|
292
|
+
...L.interaction.navigation,
|
|
326
293
|
...o.interaction.navigation
|
|
327
|
-
}))
|
|
328
|
-
|
|
329
|
-
if (c && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), s.ui = {
|
|
330
|
-
...C.ui,
|
|
331
|
-
...c,
|
|
294
|
+
})), s.ui = {
|
|
295
|
+
...L.ui,
|
|
332
296
|
...o.ui
|
|
333
297
|
}, s.config.debug = {
|
|
334
298
|
...Ot,
|
|
335
299
|
...o.config?.debug ?? {}
|
|
336
300
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
337
|
-
const
|
|
301
|
+
const r = { shape: "hexagon", mode: "height-relative" };
|
|
338
302
|
s.styling = {
|
|
339
303
|
...s.styling,
|
|
340
|
-
default: { ...s.styling.default, clipPath:
|
|
341
|
-
hover: { ...s.styling.hover, clipPath:
|
|
304
|
+
default: { ...s.styling.default, clipPath: r },
|
|
305
|
+
hover: { ...s.styling.hover, clipPath: r }
|
|
342
306
|
// focused: untouched — user config respected
|
|
343
307
|
};
|
|
344
308
|
}
|
|
345
309
|
return s;
|
|
346
310
|
}
|
|
347
|
-
function
|
|
348
|
-
return { ...o ?
|
|
311
|
+
function Zt(o, t) {
|
|
312
|
+
return { ...o ? St[o] : St.playful, ...t };
|
|
349
313
|
}
|
|
350
|
-
function
|
|
314
|
+
function Qt(o, t) {
|
|
351
315
|
return { ...o ? Ct[o] : Ct.gentle, ...t };
|
|
352
316
|
}
|
|
353
|
-
function
|
|
354
|
-
return { ...o ?
|
|
317
|
+
function te(o, t) {
|
|
318
|
+
return { ...o ? Rt[o] : Rt.gentle, ...t };
|
|
355
319
|
}
|
|
356
|
-
class
|
|
320
|
+
class ee {
|
|
357
321
|
constructor(t) {
|
|
358
322
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
359
323
|
}
|
|
@@ -378,22 +342,22 @@ class ne {
|
|
|
378
342
|
* @param easing - CSS easing function (optional)
|
|
379
343
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
380
344
|
*/
|
|
381
|
-
animateTransformCancellable(t, i, e, n = null,
|
|
345
|
+
animateTransformCancellable(t, i, e, n = null, s = null) {
|
|
382
346
|
this.cancelAllAnimations(t);
|
|
383
|
-
const r = n ?? this.config.duration,
|
|
347
|
+
const r = n ?? this.config.duration, a = s ?? this.config.easing.default, c = this.buildTransformString(i), d = this.buildTransformString(e);
|
|
384
348
|
t.style.transition = "none";
|
|
385
349
|
const u = t.animate(
|
|
386
350
|
[
|
|
387
351
|
{ transform: c },
|
|
388
|
-
{ transform:
|
|
352
|
+
{ transform: d }
|
|
389
353
|
],
|
|
390
354
|
{
|
|
391
355
|
duration: r,
|
|
392
|
-
easing:
|
|
356
|
+
easing: a,
|
|
393
357
|
fill: "forwards"
|
|
394
358
|
// Keep final state after animation
|
|
395
359
|
}
|
|
396
|
-
),
|
|
360
|
+
), f = {
|
|
397
361
|
id: `anim-${++this.animationIdCounter}`,
|
|
398
362
|
element: t,
|
|
399
363
|
animation: u,
|
|
@@ -402,11 +366,11 @@ class ne {
|
|
|
402
366
|
startTime: performance.now(),
|
|
403
367
|
duration: r
|
|
404
368
|
};
|
|
405
|
-
return this.activeAnimations.set(t,
|
|
406
|
-
t.style.transform =
|
|
369
|
+
return this.activeAnimations.set(t, f), u.finished.then(() => {
|
|
370
|
+
t.style.transform = d, this.activeAnimations.delete(t);
|
|
407
371
|
}).catch(() => {
|
|
408
372
|
this.activeAnimations.delete(t);
|
|
409
|
-
}),
|
|
373
|
+
}), f;
|
|
410
374
|
}
|
|
411
375
|
/**
|
|
412
376
|
* Cancel an active animation
|
|
@@ -449,8 +413,8 @@ class ne {
|
|
|
449
413
|
const e = getComputedStyle(t).transform;
|
|
450
414
|
if (e === "none" || !e)
|
|
451
415
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
452
|
-
const n = new DOMMatrix(e),
|
|
453
|
-
return { x:
|
|
416
|
+
const n = new DOMMatrix(e), s = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), a = n.e, c = n.f;
|
|
417
|
+
return { x: a, y: c, rotation: r, scale: s };
|
|
454
418
|
}
|
|
455
419
|
/**
|
|
456
420
|
* Check if an element has an active animation
|
|
@@ -477,10 +441,10 @@ class ne {
|
|
|
477
441
|
* @returns Promise that resolves when animation completes
|
|
478
442
|
*/
|
|
479
443
|
animateTransform(t, i, e = null, n = null) {
|
|
480
|
-
return new Promise((
|
|
481
|
-
const r = e ?? this.config.duration,
|
|
482
|
-
t.style.transition = `transform ${r}ms ${
|
|
483
|
-
|
|
444
|
+
return new Promise((s) => {
|
|
445
|
+
const r = e ?? this.config.duration, a = n ?? this.config.easing.default;
|
|
446
|
+
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
447
|
+
s();
|
|
484
448
|
}, r);
|
|
485
449
|
});
|
|
486
450
|
}
|
|
@@ -509,161 +473,167 @@ class ne {
|
|
|
509
473
|
return new Promise((i) => setTimeout(i, t));
|
|
510
474
|
}
|
|
511
475
|
}
|
|
512
|
-
function
|
|
476
|
+
function J(o, t, i) {
|
|
513
477
|
return o + (t - o) * i;
|
|
514
478
|
}
|
|
515
|
-
function
|
|
516
|
-
const { overshoot: n, bounces:
|
|
517
|
-
let u = 0,
|
|
518
|
-
for (let
|
|
519
|
-
if (o <= l
|
|
520
|
-
|
|
479
|
+
function ie(o, t, i, e) {
|
|
480
|
+
const { overshoot: n, bounces: s, decayRatio: r } = e, a = i.x - t.x, c = i.y - t.y, d = ne(s, r);
|
|
481
|
+
let u = 0, f = 0, m = 1, p = n, E = !1;
|
|
482
|
+
for (let l = 0; l < d.length; l++)
|
|
483
|
+
if (o <= d[l].time) {
|
|
484
|
+
f = l === 0 ? 0 : d[l - 1].time, m = d[l].time, p = d[l].overshoot, E = d[l].isOvershoot;
|
|
521
485
|
break;
|
|
522
486
|
}
|
|
523
|
-
const
|
|
524
|
-
if (
|
|
525
|
-
u = 1 +
|
|
526
|
-
else if (
|
|
527
|
-
u = at(
|
|
487
|
+
const v = (o - f) / (m - f);
|
|
488
|
+
if (E)
|
|
489
|
+
u = 1 + p * at(v);
|
|
490
|
+
else if (f === 0)
|
|
491
|
+
u = at(v);
|
|
528
492
|
else {
|
|
529
|
-
const
|
|
530
|
-
(
|
|
531
|
-
)?.overshoot ||
|
|
532
|
-
u =
|
|
493
|
+
const g = 1 + (d.find(
|
|
494
|
+
(h, b) => h.time > f && b > 0 && d[b - 1].isOvershoot
|
|
495
|
+
)?.overshoot || p);
|
|
496
|
+
u = J(g, 1, at(v));
|
|
533
497
|
}
|
|
534
498
|
return {
|
|
535
|
-
x: t.x +
|
|
499
|
+
x: t.x + a * u,
|
|
536
500
|
y: t.y + c * u
|
|
537
501
|
};
|
|
538
502
|
}
|
|
539
|
-
function
|
|
503
|
+
function ne(o, t) {
|
|
540
504
|
const i = [];
|
|
541
505
|
let e = 0.6;
|
|
542
506
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
543
507
|
let n = 0.15;
|
|
544
508
|
const r = 0.4 / (o * 2);
|
|
545
|
-
for (let
|
|
509
|
+
for (let a = 0; a < o; a++)
|
|
546
510
|
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
547
511
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
548
512
|
}
|
|
549
|
-
function
|
|
550
|
-
const { stiffness: n, damping:
|
|
551
|
-
let
|
|
552
|
-
if (
|
|
553
|
-
const
|
|
554
|
-
|
|
513
|
+
function oe(o, t, i, e) {
|
|
514
|
+
const { stiffness: n, damping: s, mass: r, oscillations: a } = e, c = i.x - t.x, d = i.y - t.y, u = Math.sqrt(n / r), f = s / (2 * Math.sqrt(n * r));
|
|
515
|
+
let m;
|
|
516
|
+
if (f < 1) {
|
|
517
|
+
const p = u * Math.sqrt(1 - f * f), E = Math.exp(-f * u * o * 3), v = Math.cos(p * o * a * Math.PI);
|
|
518
|
+
m = 1 - E * v;
|
|
555
519
|
} else
|
|
556
|
-
|
|
557
|
-
return
|
|
558
|
-
x: t.x + c *
|
|
559
|
-
y: t.y +
|
|
520
|
+
m = 1 - Math.exp(-u * o * 3);
|
|
521
|
+
return m = Math.max(0, Math.min(m, 1.3)), {
|
|
522
|
+
x: t.x + c * m,
|
|
523
|
+
y: t.y + d * m
|
|
560
524
|
};
|
|
561
525
|
}
|
|
562
|
-
function
|
|
563
|
-
const { amplitude: n, frequency:
|
|
526
|
+
function se(o, t, i, e) {
|
|
527
|
+
const { amplitude: n, frequency: s, decay: r, decayRate: a, phase: c } = e, d = i.x - t.x, u = i.y - t.y, f = Math.sqrt(d * d + u * u), m = f > 0 ? -u / f : 0, p = f > 0 ? d / f : 1, E = s * Math.PI * 2 * o + c, v = r ? Math.pow(1 - o, a) : 1, l = n * Math.sin(E) * v, g = ae(o);
|
|
564
528
|
return {
|
|
565
|
-
x:
|
|
566
|
-
y:
|
|
529
|
+
x: J(t.x, i.x, g) + l * m,
|
|
530
|
+
y: J(t.y, i.y, g) + l * p
|
|
567
531
|
};
|
|
568
532
|
}
|
|
569
533
|
function at(o) {
|
|
570
534
|
return 1 - (1 - o) * (1 - o);
|
|
571
535
|
}
|
|
572
|
-
function
|
|
536
|
+
function ae(o) {
|
|
573
537
|
return 1 - Math.pow(1 - o, 3);
|
|
574
538
|
}
|
|
575
|
-
function
|
|
576
|
-
const { amplitude: e, frequency: n, decay:
|
|
539
|
+
function re(o, t, i) {
|
|
540
|
+
const { amplitude: e, frequency: n, decay: s } = i, r = Math.sin(o * n * Math.PI * 2), a = s ? Math.pow(1 - o, 2) : 1, c = e * r * a;
|
|
577
541
|
return t + c;
|
|
578
542
|
}
|
|
579
|
-
function
|
|
580
|
-
const { overshoot: e, bounces: n } = i,
|
|
581
|
-
|
|
543
|
+
function ce(o, t, i) {
|
|
544
|
+
const { overshoot: e, bounces: n } = i, s = [];
|
|
545
|
+
s.push({ time: 0.5, scale: e });
|
|
582
546
|
let r = e;
|
|
583
|
-
const
|
|
547
|
+
const a = 0.5, d = 0.5 / (n * 2);
|
|
584
548
|
let u = 0.5;
|
|
585
|
-
for (let
|
|
586
|
-
const
|
|
587
|
-
u +=
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
let
|
|
591
|
-
for (let
|
|
592
|
-
if (o <=
|
|
593
|
-
const
|
|
594
|
-
|
|
549
|
+
for (let m = 0; m < n; m++) {
|
|
550
|
+
const p = 1 - (r - 1) * a;
|
|
551
|
+
u += d, s.push({ time: u, scale: p }), r = 1 + (r - 1) * a * a, u += d, m < n - 1 && s.push({ time: u, scale: r });
|
|
552
|
+
}
|
|
553
|
+
s.push({ time: 1, scale: 1 });
|
|
554
|
+
let f = 1;
|
|
555
|
+
for (let m = 0; m < s.length; m++)
|
|
556
|
+
if (o <= s[m].time) {
|
|
557
|
+
const p = m === 0 ? 0 : s[m - 1].time, E = m === 0 ? 1 : s[m - 1].scale, v = (o - p) / (s[m].time - p), l = at(v);
|
|
558
|
+
f = E + (s[m].scale - E) * l;
|
|
595
559
|
break;
|
|
596
560
|
}
|
|
597
|
-
return
|
|
561
|
+
return f * t;
|
|
598
562
|
}
|
|
599
|
-
function
|
|
563
|
+
function le(o) {
|
|
600
564
|
const {
|
|
601
565
|
element: t,
|
|
602
566
|
startPosition: i,
|
|
603
567
|
endPosition: e,
|
|
604
568
|
pathConfig: n,
|
|
605
|
-
duration:
|
|
569
|
+
duration: s,
|
|
606
570
|
imageWidth: r,
|
|
607
|
-
imageHeight:
|
|
571
|
+
imageHeight: a,
|
|
608
572
|
rotation: c,
|
|
609
|
-
scale:
|
|
573
|
+
scale: d,
|
|
610
574
|
onComplete: u,
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
575
|
+
onProgress: f,
|
|
576
|
+
rotationConfig: m,
|
|
577
|
+
startRotation: p,
|
|
578
|
+
scaleConfig: E,
|
|
579
|
+
startScale: v
|
|
580
|
+
} = o, l = n.type, g = p !== void 0 && p !== c, h = m?.mode === "wobble", b = m?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, I = g || h, y = v !== void 0 && v !== d, x = E?.mode === "pop", w = E?.pop || { overshoot: 1.2, bounces: 1 };
|
|
581
|
+
if (l === "linear" && !I && !(y || x)) {
|
|
617
582
|
u && u();
|
|
618
583
|
return;
|
|
619
584
|
}
|
|
620
|
-
const
|
|
621
|
-
function O(
|
|
622
|
-
const
|
|
623
|
-
let
|
|
624
|
-
switch (
|
|
585
|
+
const R = performance.now(), M = -r / 2, T = -a / 2;
|
|
586
|
+
function O(k) {
|
|
587
|
+
const D = k - R, z = Math.min(D / s, 1);
|
|
588
|
+
let S;
|
|
589
|
+
switch (l) {
|
|
625
590
|
case "bounce": {
|
|
626
|
-
const
|
|
591
|
+
const N = Zt(
|
|
627
592
|
n.bouncePreset,
|
|
628
593
|
n.bounce
|
|
629
594
|
);
|
|
630
|
-
|
|
595
|
+
S = ie(z, i, e, N);
|
|
631
596
|
break;
|
|
632
597
|
}
|
|
633
598
|
case "elastic": {
|
|
634
|
-
const
|
|
599
|
+
const N = Qt(
|
|
635
600
|
n.elasticPreset,
|
|
636
601
|
n.elastic
|
|
637
602
|
);
|
|
638
|
-
|
|
603
|
+
S = oe(z, i, e, N);
|
|
639
604
|
break;
|
|
640
605
|
}
|
|
641
606
|
case "wave": {
|
|
642
|
-
const
|
|
607
|
+
const N = te(
|
|
643
608
|
n.wavePreset,
|
|
644
609
|
n.wave
|
|
645
610
|
);
|
|
646
|
-
|
|
611
|
+
S = se(z, i, e, N);
|
|
647
612
|
break;
|
|
648
613
|
}
|
|
649
614
|
default:
|
|
650
|
-
|
|
651
|
-
x:
|
|
652
|
-
y:
|
|
615
|
+
S = {
|
|
616
|
+
x: J(i.x, e.x, z),
|
|
617
|
+
y: J(i.y, e.y, z)
|
|
653
618
|
};
|
|
654
619
|
}
|
|
655
|
-
const
|
|
656
|
-
let
|
|
657
|
-
|
|
658
|
-
let
|
|
659
|
-
|
|
620
|
+
const _ = S.x - e.x, $ = S.y - e.y;
|
|
621
|
+
let A;
|
|
622
|
+
h ? A = re(z, c, b) : g ? A = J(p, c, z) : A = c;
|
|
623
|
+
let j;
|
|
624
|
+
x ? j = ce(z, d, w) : y ? j = J(v, d, z) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${_}px, ${$}px) rotate(${A}deg) scale(${j})`, f && z < 1 && f(z, D, {
|
|
625
|
+
x: S.x,
|
|
626
|
+
y: S.y,
|
|
627
|
+
rotation: A,
|
|
628
|
+
scale: j
|
|
629
|
+
}), z < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${M}px, ${T}px) rotate(${c}deg) scale(${d})`, u && u());
|
|
660
630
|
}
|
|
661
631
|
requestAnimationFrame(O);
|
|
662
632
|
}
|
|
663
|
-
function
|
|
633
|
+
function he(o) {
|
|
664
634
|
return o === "bounce" || o === "elastic" || o === "wave";
|
|
665
635
|
}
|
|
666
|
-
const
|
|
636
|
+
const de = {
|
|
667
637
|
radial: "center",
|
|
668
638
|
spiral: "center",
|
|
669
639
|
grid: "top",
|
|
@@ -672,7 +642,7 @@ const fe = {
|
|
|
672
642
|
wave: "left",
|
|
673
643
|
honeycomb: "center"
|
|
674
644
|
};
|
|
675
|
-
class
|
|
645
|
+
class ue {
|
|
676
646
|
constructor(t, i) {
|
|
677
647
|
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || xt;
|
|
678
648
|
}
|
|
@@ -680,77 +650,77 @@ class ge {
|
|
|
680
650
|
* Get the effective start position, considering layout-aware defaults
|
|
681
651
|
*/
|
|
682
652
|
resolveStartPosition() {
|
|
683
|
-
return this.config.start.position ? this.config.start.position :
|
|
653
|
+
return this.config.start.position ? this.config.start.position : de[this.layoutAlgorithm] || "nearest-edge";
|
|
684
654
|
}
|
|
685
655
|
/**
|
|
686
656
|
* Calculate the starting position for an image's entry animation
|
|
687
657
|
*/
|
|
688
|
-
calculateStartPosition(t, i, e, n,
|
|
689
|
-
const r = this.resolvedStartPosition,
|
|
658
|
+
calculateStartPosition(t, i, e, n, s) {
|
|
659
|
+
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
690
660
|
switch (r) {
|
|
691
661
|
case "nearest-edge":
|
|
692
|
-
return this.calculateNearestEdge(t, i, e,
|
|
662
|
+
return this.calculateNearestEdge(t, i, e, a);
|
|
693
663
|
case "top":
|
|
694
|
-
return this.calculateEdgePosition("top", t, i, e,
|
|
664
|
+
return this.calculateEdgePosition("top", t, i, e, a);
|
|
695
665
|
case "bottom":
|
|
696
|
-
return this.calculateEdgePosition("bottom", t, i, e,
|
|
666
|
+
return this.calculateEdgePosition("bottom", t, i, e, a);
|
|
697
667
|
case "left":
|
|
698
|
-
return this.calculateEdgePosition("left", t, i, e,
|
|
668
|
+
return this.calculateEdgePosition("left", t, i, e, a);
|
|
699
669
|
case "right":
|
|
700
|
-
return this.calculateEdgePosition("right", t, i, e,
|
|
670
|
+
return this.calculateEdgePosition("right", t, i, e, a);
|
|
701
671
|
case "center":
|
|
702
672
|
return this.calculateCenterPosition(e, t, i);
|
|
703
673
|
case "random-edge":
|
|
704
|
-
return this.calculateRandomEdge(t, i, e,
|
|
674
|
+
return this.calculateRandomEdge(t, i, e, a);
|
|
705
675
|
case "circular":
|
|
706
676
|
return this.calculateCircularPosition(
|
|
707
677
|
t,
|
|
708
678
|
i,
|
|
709
679
|
e,
|
|
710
680
|
n,
|
|
711
|
-
|
|
681
|
+
s
|
|
712
682
|
);
|
|
713
683
|
default:
|
|
714
|
-
return this.calculateNearestEdge(t, i, e,
|
|
684
|
+
return this.calculateNearestEdge(t, i, e, a);
|
|
715
685
|
}
|
|
716
686
|
}
|
|
717
687
|
/**
|
|
718
688
|
* Calculate start position from the nearest edge (current default behavior)
|
|
719
689
|
*/
|
|
720
690
|
calculateNearestEdge(t, i, e, n) {
|
|
721
|
-
const
|
|
722
|
-
let
|
|
723
|
-
return
|
|
691
|
+
const s = t.x, r = t.y, a = s, c = e.width - s, d = r, u = e.height - r, f = Math.min(a, c, d, u);
|
|
692
|
+
let m = t.x, p = t.y;
|
|
693
|
+
return f === a ? m = -(i.width + n) : f === c ? m = e.width + n : f === d ? p = -(i.height + n) : p = e.height + n, { x: m, y: p };
|
|
724
694
|
}
|
|
725
695
|
/**
|
|
726
696
|
* Calculate start position from a specific edge
|
|
727
697
|
*/
|
|
728
|
-
calculateEdgePosition(t, i, e, n,
|
|
729
|
-
let r = i.x,
|
|
698
|
+
calculateEdgePosition(t, i, e, n, s) {
|
|
699
|
+
let r = i.x, a = i.y;
|
|
730
700
|
switch (t) {
|
|
731
701
|
case "top":
|
|
732
|
-
|
|
702
|
+
a = -(e.height + s);
|
|
733
703
|
break;
|
|
734
704
|
case "bottom":
|
|
735
|
-
|
|
705
|
+
a = n.height + s;
|
|
736
706
|
break;
|
|
737
707
|
case "left":
|
|
738
|
-
r = -(e.width +
|
|
708
|
+
r = -(e.width + s);
|
|
739
709
|
break;
|
|
740
710
|
case "right":
|
|
741
|
-
r = n.width +
|
|
711
|
+
r = n.width + s;
|
|
742
712
|
break;
|
|
743
713
|
}
|
|
744
|
-
return { x: r, y:
|
|
714
|
+
return { x: r, y: a };
|
|
745
715
|
}
|
|
746
716
|
/**
|
|
747
717
|
* Calculate start position from center with scale animation
|
|
748
718
|
*/
|
|
749
719
|
calculateCenterPosition(t, i, e) {
|
|
750
|
-
const n = t.width / 2,
|
|
720
|
+
const n = t.width / 2, s = t.height / 2;
|
|
751
721
|
return {
|
|
752
722
|
x: n,
|
|
753
|
-
y:
|
|
723
|
+
y: s,
|
|
754
724
|
useScale: !0
|
|
755
725
|
// Signal to use scale animation from 0
|
|
756
726
|
};
|
|
@@ -759,27 +729,27 @@ class ge {
|
|
|
759
729
|
* Calculate start position from a random edge
|
|
760
730
|
*/
|
|
761
731
|
calculateRandomEdge(t, i, e, n) {
|
|
762
|
-
const
|
|
732
|
+
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
763
733
|
return this.calculateEdgePosition(r, t, i, e, n);
|
|
764
734
|
}
|
|
765
735
|
/**
|
|
766
736
|
* Calculate start position on a circle around the container
|
|
767
737
|
*/
|
|
768
|
-
calculateCircularPosition(t, i, e, n,
|
|
769
|
-
const r = this.config.start.circular || {},
|
|
738
|
+
calculateCircularPosition(t, i, e, n, s) {
|
|
739
|
+
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
770
740
|
let c;
|
|
771
|
-
const
|
|
772
|
-
if (typeof
|
|
773
|
-
const
|
|
741
|
+
const d = r.radius || "120%";
|
|
742
|
+
if (typeof d == "string" && d.endsWith("%")) {
|
|
743
|
+
const v = parseFloat(d) / 100;
|
|
774
744
|
c = Math.sqrt(
|
|
775
745
|
e.width ** 2 + e.height ** 2
|
|
776
|
-
) *
|
|
746
|
+
) * v / 2;
|
|
777
747
|
} else
|
|
778
|
-
c = typeof
|
|
748
|
+
c = typeof d == "number" ? d : 500;
|
|
779
749
|
let u;
|
|
780
|
-
|
|
781
|
-
const
|
|
782
|
-
return { x:
|
|
750
|
+
a === "even" ? u = n / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
751
|
+
const f = e.width / 2, m = e.height / 2, p = f + Math.cos(u) * c, E = m + Math.sin(u) * c;
|
|
752
|
+
return { x: p, y: E };
|
|
783
753
|
}
|
|
784
754
|
/**
|
|
785
755
|
* Get animation parameters for an image
|
|
@@ -798,9 +768,9 @@ class ge {
|
|
|
798
768
|
* Build a CSS transform string for the start position
|
|
799
769
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
800
770
|
*/
|
|
801
|
-
buildStartTransform(t, i, e, n,
|
|
802
|
-
const
|
|
803
|
-
return t.useScale ? `${
|
|
771
|
+
buildStartTransform(t, i, e, n, s, r, a, c) {
|
|
772
|
+
const d = t.x - i.x, u = t.y - i.y, f = a !== void 0 ? a : e, m = c !== void 0 ? c : n, p = s !== void 0 ? -s / 2 : 0, E = r !== void 0 ? -r / 2 : 0, v = s !== void 0 ? `translate(${p}px, ${E}px)` : "translate(-50%, -50%)";
|
|
773
|
+
return t.useScale ? `${v} translate(${d}px, ${u}px) rotate(${f}deg) scale(0)` : `${v} translate(${d}px, ${u}px) rotate(${f}deg) scale(${m})`;
|
|
804
774
|
}
|
|
805
775
|
/**
|
|
806
776
|
* Build the final CSS transform string
|
|
@@ -808,8 +778,8 @@ class ge {
|
|
|
808
778
|
*/
|
|
809
779
|
buildFinalTransform(t, i, e, n) {
|
|
810
780
|
if (e !== void 0 && n !== void 0) {
|
|
811
|
-
const
|
|
812
|
-
return `translate(${
|
|
781
|
+
const s = -e / 2, r = -n / 2;
|
|
782
|
+
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
813
783
|
}
|
|
814
784
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
815
785
|
}
|
|
@@ -825,7 +795,7 @@ class ge {
|
|
|
825
795
|
* Check if the current path type requires JavaScript animation
|
|
826
796
|
*/
|
|
827
797
|
requiresJSAnimation() {
|
|
828
|
-
return
|
|
798
|
+
return he(this.pathConfig.type);
|
|
829
799
|
}
|
|
830
800
|
/**
|
|
831
801
|
* Get the path configuration
|
|
@@ -927,8 +897,8 @@ class ge {
|
|
|
927
897
|
amplitude: 15,
|
|
928
898
|
frequency: 3,
|
|
929
899
|
decay: !0
|
|
930
|
-
}, { amplitude: n, frequency:
|
|
931
|
-
return i +
|
|
900
|
+
}, { amplitude: n, frequency: s, decay: r } = e, a = Math.sin(t * s * Math.PI * 2), c = r ? Math.pow(1 - t, 2) : 1, d = n * a * c;
|
|
901
|
+
return i + d;
|
|
932
902
|
}
|
|
933
903
|
/**
|
|
934
904
|
* Get the scale configuration
|
|
@@ -984,15 +954,15 @@ class ge {
|
|
|
984
954
|
const e = this.scaleConfig.pop || {
|
|
985
955
|
overshoot: 1.2,
|
|
986
956
|
bounces: 1
|
|
987
|
-
}, { overshoot: n, bounces:
|
|
988
|
-
let
|
|
957
|
+
}, { overshoot: n, bounces: s } = e, r = this.generateScaleBounceKeyframes(s, n);
|
|
958
|
+
let a = i;
|
|
989
959
|
for (let c = 0; c < r.length; c++)
|
|
990
960
|
if (t <= r[c].time) {
|
|
991
|
-
const
|
|
992
|
-
|
|
961
|
+
const d = c === 0 ? 0 : r[c - 1].time, u = c === 0 ? i : r[c - 1].scale, f = (t - d) / (r[c].time - d), m = this.easeOutQuad(f);
|
|
962
|
+
a = u + (r[c].scale - u) * m;
|
|
993
963
|
break;
|
|
994
964
|
}
|
|
995
|
-
return
|
|
965
|
+
return a * i;
|
|
996
966
|
}
|
|
997
967
|
/**
|
|
998
968
|
* Generate keyframes for scale bounce animation
|
|
@@ -1001,11 +971,11 @@ class ge {
|
|
|
1001
971
|
const e = [];
|
|
1002
972
|
e.push({ time: 0.5, scale: i });
|
|
1003
973
|
let n = i;
|
|
1004
|
-
const
|
|
974
|
+
const s = 0.5, a = 0.5 / (t * 2);
|
|
1005
975
|
let c = 0.5;
|
|
1006
|
-
for (let
|
|
1007
|
-
const u = 1 - (n - 1) *
|
|
1008
|
-
c +=
|
|
976
|
+
for (let d = 0; d < t; d++) {
|
|
977
|
+
const u = 1 - (n - 1) * s;
|
|
978
|
+
c += a, e.push({ time: c, scale: u }), n = 1 + (n - 1) * s * s, c += a, d < t - 1 && e.push({ time: c, scale: n });
|
|
1009
979
|
}
|
|
1010
980
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1011
981
|
}
|
|
@@ -1016,7 +986,7 @@ class ge {
|
|
|
1016
986
|
return 1 - (1 - t) * (1 - t);
|
|
1017
987
|
}
|
|
1018
988
|
}
|
|
1019
|
-
class
|
|
989
|
+
class fe {
|
|
1020
990
|
constructor(t, i = 600) {
|
|
1021
991
|
this.entries = /* @__PURE__ */ new Map(), this.togetherRafId = null, this.togetherSpeed = 0, this.config = t, this.entryDurationMs = i;
|
|
1022
992
|
}
|
|
@@ -1026,7 +996,7 @@ class me {
|
|
|
1026
996
|
*/
|
|
1027
997
|
register(t, i, e, n) {
|
|
1028
998
|
if (this.entries.has(t)) return;
|
|
1029
|
-
const
|
|
999
|
+
const s = n ?? this.entryDurationMs, r = this.config.startDelay ?? s, a = {
|
|
1030
1000
|
element: t,
|
|
1031
1001
|
index: i,
|
|
1032
1002
|
totalImages: e,
|
|
@@ -1037,8 +1007,8 @@ class me {
|
|
|
1037
1007
|
stopped: !1,
|
|
1038
1008
|
startTimer: null
|
|
1039
1009
|
};
|
|
1040
|
-
this.entries.set(t,
|
|
1041
|
-
|
|
1010
|
+
this.entries.set(t, a), a.startTimer = setTimeout(() => {
|
|
1011
|
+
a.startTimer = null, !a.stopped && !a.paused && this._startAnimation(a);
|
|
1042
1012
|
}, r);
|
|
1043
1013
|
}
|
|
1044
1014
|
/**
|
|
@@ -1141,9 +1111,9 @@ class me {
|
|
|
1141
1111
|
});
|
|
1142
1112
|
}
|
|
1143
1113
|
_startBlink(t) {
|
|
1144
|
-
const i = { ...
|
|
1145
|
-
let
|
|
1146
|
-
i.style === "fade" ? (
|
|
1114
|
+
const i = { ...Yt, ...this.config.blink }, e = -(Math.random() * i.speed), n = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1115
|
+
let s, r;
|
|
1116
|
+
i.style === "fade" ? (s = [
|
|
1147
1117
|
{ opacity: n, offset: 0 },
|
|
1148
1118
|
{ opacity: 0, offset: 0.5 },
|
|
1149
1119
|
{ opacity: n, offset: 1 }
|
|
@@ -1152,7 +1122,7 @@ class me {
|
|
|
1152
1122
|
delay: e,
|
|
1153
1123
|
iterations: 1 / 0,
|
|
1154
1124
|
easing: "ease-in-out"
|
|
1155
|
-
}) : (
|
|
1125
|
+
}) : (s = [
|
|
1156
1126
|
{ opacity: n, offset: 0 },
|
|
1157
1127
|
{ opacity: n, offset: i.onRatio },
|
|
1158
1128
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
@@ -1162,10 +1132,10 @@ class me {
|
|
|
1162
1132
|
duration: i.speed,
|
|
1163
1133
|
delay: e,
|
|
1164
1134
|
iterations: 1 / 0
|
|
1165
|
-
}), t.blinkAnimation = t.element.animate(
|
|
1135
|
+
}), t.blinkAnimation = t.element.animate(s, r);
|
|
1166
1136
|
}
|
|
1167
1137
|
_startSpin(t) {
|
|
1168
|
-
const i = { ...
|
|
1138
|
+
const i = { ...Xt, ...this.config.spin }, e = i.direction === "clockwise" ? 360 : -360;
|
|
1169
1139
|
t.animation = t.element.animate(
|
|
1170
1140
|
[{ transform: "rotate(0deg)" }, { transform: `rotate(${e}deg)` }],
|
|
1171
1141
|
{
|
|
@@ -1202,7 +1172,7 @@ class me {
|
|
|
1202
1172
|
t.animation && (t.animation.cancel(), t.animation = null), t.blinkAnimation && (t.blinkAnimation.cancel(), t.blinkAnimation = null), t.customTeardown && (t.customTeardown(), t.customTeardown = null);
|
|
1203
1173
|
}
|
|
1204
1174
|
}
|
|
1205
|
-
class
|
|
1175
|
+
class ge {
|
|
1206
1176
|
constructor(t, i = {}) {
|
|
1207
1177
|
this.config = t, this.imageConfig = i;
|
|
1208
1178
|
}
|
|
@@ -1214,17 +1184,17 @@ class pe {
|
|
|
1214
1184
|
* @returns Array of layout objects with position, rotation, scale
|
|
1215
1185
|
*/
|
|
1216
1186
|
generate(t, i, e = {}) {
|
|
1217
|
-
const n = [], { width:
|
|
1218
|
-
for (let
|
|
1219
|
-
const
|
|
1220
|
-
id:
|
|
1221
|
-
x:
|
|
1222
|
-
y:
|
|
1223
|
-
rotation:
|
|
1224
|
-
scale:
|
|
1225
|
-
baseSize:
|
|
1187
|
+
const n = [], { width: s, height: r } = i, a = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, E = m !== 1 || p !== 1, l = c * 1.5 / 2, g = c / 2, h = s - a - l, b = r - a - g, I = a + l, y = a + g;
|
|
1188
|
+
for (let x = 0; x < t; x++) {
|
|
1189
|
+
const w = this.random(I, h), F = this.random(y, b), R = d === "random" ? this.random(u, f) : 0, M = E ? this.random(m, p) : 1, T = c * M, O = {
|
|
1190
|
+
id: x,
|
|
1191
|
+
x: w,
|
|
1192
|
+
y: F,
|
|
1193
|
+
rotation: R,
|
|
1194
|
+
scale: M,
|
|
1195
|
+
baseSize: T
|
|
1226
1196
|
};
|
|
1227
|
-
n.push(
|
|
1197
|
+
n.push(O);
|
|
1228
1198
|
}
|
|
1229
1199
|
return n;
|
|
1230
1200
|
}
|
|
@@ -1238,7 +1208,7 @@ class pe {
|
|
|
1238
1208
|
return Math.random() * (i - t) + t;
|
|
1239
1209
|
}
|
|
1240
1210
|
}
|
|
1241
|
-
class
|
|
1211
|
+
class me {
|
|
1242
1212
|
constructor(t, i = {}) {
|
|
1243
1213
|
this.config = t, this.imageConfig = i;
|
|
1244
1214
|
}
|
|
@@ -1250,53 +1220,53 @@ class be {
|
|
|
1250
1220
|
* @returns Array of layout objects with position, rotation, scale
|
|
1251
1221
|
*/
|
|
1252
1222
|
generate(t, i, e = {}) {
|
|
1253
|
-
const n = [], { width:
|
|
1254
|
-
...
|
|
1223
|
+
const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || m !== 1, E = this.config.scaleDecay ?? 0, v = {
|
|
1224
|
+
...kt,
|
|
1255
1225
|
...this.config.radial
|
|
1256
|
-
},
|
|
1257
|
-
|
|
1258
|
-
|
|
1226
|
+
}, l = e.fixedHeight ?? a, g = s / 2, h = r / 2, b = Math.ceil(Math.sqrt(t)), I = this.config.spacing.padding ?? 50, y = Math.max(l * 0.8, Math.min(
|
|
1227
|
+
g - I - l / 2,
|
|
1228
|
+
h - I - l / 2
|
|
1259
1229
|
));
|
|
1260
1230
|
if (t > 0) {
|
|
1261
|
-
const
|
|
1231
|
+
const F = p ? this.random(f, m) : 1, R = l * F;
|
|
1262
1232
|
n.push({
|
|
1263
1233
|
id: 0,
|
|
1264
|
-
x:
|
|
1265
|
-
y,
|
|
1266
|
-
rotation: c === "random" ? this.random(
|
|
1234
|
+
x: g,
|
|
1235
|
+
y: h,
|
|
1236
|
+
rotation: c === "random" ? this.random(d * 0.33, u * 0.33) : 0,
|
|
1267
1237
|
// Less rotation for center
|
|
1268
|
-
scale:
|
|
1269
|
-
baseSize:
|
|
1238
|
+
scale: F,
|
|
1239
|
+
baseSize: R,
|
|
1270
1240
|
zIndex: 100
|
|
1271
1241
|
// Center image is highest
|
|
1272
1242
|
});
|
|
1273
1243
|
}
|
|
1274
|
-
let
|
|
1275
|
-
for (;
|
|
1276
|
-
const
|
|
1277
|
-
if (
|
|
1278
|
-
|
|
1244
|
+
let x = 1, w = 1;
|
|
1245
|
+
for (; x < t; ) {
|
|
1246
|
+
const F = w / b, R = E > 0 ? 1 - F * E * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = w * M, O = T * 1.5, k = Math.PI * (3 * (O + T) - Math.sqrt((3 * O + T) * (O + 3 * T))), D = this.estimateWidth(l), z = Math.floor(k / (D * 0.7));
|
|
1247
|
+
if (z === 0) {
|
|
1248
|
+
w++;
|
|
1279
1249
|
continue;
|
|
1280
1250
|
}
|
|
1281
|
-
const
|
|
1282
|
-
for (let
|
|
1283
|
-
const
|
|
1284
|
-
let
|
|
1285
|
-
const
|
|
1286
|
-
|
|
1287
|
-
const
|
|
1251
|
+
const S = 2 * Math.PI / z, _ = w * (20 * Math.PI / 180);
|
|
1252
|
+
for (let $ = 0; $ < z && x < t; $++) {
|
|
1253
|
+
const A = $ * S + _, j = p ? this.random(f, m) : 1, N = R * j, P = l * N;
|
|
1254
|
+
let H = g + Math.cos(A) * O, U = h + Math.sin(A) * T;
|
|
1255
|
+
const B = P * 1.5 / 2, W = P / 2;
|
|
1256
|
+
H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), U - W < I ? U = I + W : U + W > r - I && (U = r - I - W);
|
|
1257
|
+
const X = c === "random" ? this.random(d, u) : 0;
|
|
1288
1258
|
n.push({
|
|
1289
|
-
id:
|
|
1290
|
-
x:
|
|
1291
|
-
y:
|
|
1292
|
-
rotation:
|
|
1293
|
-
scale:
|
|
1294
|
-
baseSize:
|
|
1295
|
-
zIndex: Math.max(1, 100 -
|
|
1259
|
+
id: x,
|
|
1260
|
+
x: H,
|
|
1261
|
+
y: U,
|
|
1262
|
+
rotation: X,
|
|
1263
|
+
scale: N,
|
|
1264
|
+
baseSize: P,
|
|
1265
|
+
zIndex: Math.max(1, 100 - w)
|
|
1296
1266
|
// Outer rings have lower z-index
|
|
1297
|
-
}),
|
|
1267
|
+
}), x++;
|
|
1298
1268
|
}
|
|
1299
|
-
|
|
1269
|
+
w++;
|
|
1300
1270
|
}
|
|
1301
1271
|
return n;
|
|
1302
1272
|
}
|
|
@@ -1319,7 +1289,7 @@ class be {
|
|
|
1319
1289
|
return Math.random() * (i - t) + t;
|
|
1320
1290
|
}
|
|
1321
1291
|
}
|
|
1322
|
-
const
|
|
1292
|
+
const pe = {
|
|
1323
1293
|
columns: "auto",
|
|
1324
1294
|
rows: "auto",
|
|
1325
1295
|
stagger: "none",
|
|
@@ -1329,7 +1299,7 @@ const ye = {
|
|
|
1329
1299
|
alignment: "center",
|
|
1330
1300
|
gap: 10,
|
|
1331
1301
|
overflowOffset: 0.25
|
|
1332
|
-
},
|
|
1302
|
+
}, Tt = [
|
|
1333
1303
|
{ x: 1, y: 1 },
|
|
1334
1304
|
// bottom-right
|
|
1335
1305
|
{ x: -1, y: -1 },
|
|
@@ -1347,7 +1317,7 @@ const ye = {
|
|
|
1347
1317
|
{ x: 0, y: 1 }
|
|
1348
1318
|
// down
|
|
1349
1319
|
];
|
|
1350
|
-
class
|
|
1320
|
+
class be {
|
|
1351
1321
|
constructor(t, i = {}) {
|
|
1352
1322
|
this.config = t, this.imageConfig = i;
|
|
1353
1323
|
}
|
|
@@ -1359,61 +1329,61 @@ class ve {
|
|
|
1359
1329
|
* @returns Array of layout objects with position, rotation, scale
|
|
1360
1330
|
*/
|
|
1361
1331
|
generate(t, i, e = {}) {
|
|
1362
|
-
const n = [], { width:
|
|
1332
|
+
const n = [], { width: s, height: r } = i, a = { ...pe, ...this.config.grid }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || m !== 1, E = s - 2 * c, v = r - 2 * c, { columns: l, rows: g } = this.calculateGridDimensions(
|
|
1363
1333
|
t,
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
),
|
|
1334
|
+
E,
|
|
1335
|
+
v,
|
|
1336
|
+
d,
|
|
1337
|
+
a
|
|
1338
|
+
), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, x = (E - a.gap * (l - 1)) / I, w = (v - a.gap * (g - 1)) / y, F = h ? x / 2 : 0, R = b ? w / 2 : 0, M = 1 + a.overlap, T = Math.min(x, w) * M, O = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, k = l * x + (l - 1) * a.gap + F, D = g * w + (g - 1) * a.gap + R, z = c + (E - k) / 2, S = c + (v - D) / 2, _ = l * g, $ = a.columns !== "auto" && a.rows !== "auto", A = $ && t > _;
|
|
1369
1339
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1370
|
-
gridConfigColumns:
|
|
1371
|
-
gridConfigRows:
|
|
1372
|
-
columns:
|
|
1373
|
-
rows:
|
|
1374
|
-
cellCount:
|
|
1375
|
-
hasFixedGrid:
|
|
1340
|
+
gridConfigColumns: a.columns,
|
|
1341
|
+
gridConfigRows: a.rows,
|
|
1342
|
+
columns: l,
|
|
1343
|
+
rows: g,
|
|
1344
|
+
cellCount: _,
|
|
1345
|
+
hasFixedGrid: $,
|
|
1376
1346
|
imageCount: t,
|
|
1377
|
-
isOverflowMode:
|
|
1347
|
+
isOverflowMode: A
|
|
1378
1348
|
});
|
|
1379
|
-
const
|
|
1380
|
-
for (let
|
|
1381
|
-
let
|
|
1382
|
-
if (
|
|
1383
|
-
const
|
|
1384
|
-
|
|
1349
|
+
const j = A ? new Array(_).fill(0) : [], N = Math.min(x, w) * a.overflowOffset;
|
|
1350
|
+
for (let P = 0; P < t; P++) {
|
|
1351
|
+
let H, U, Y = 0;
|
|
1352
|
+
if (A && P >= _) {
|
|
1353
|
+
const q = P - _, G = q % _;
|
|
1354
|
+
Y = Math.floor(q / _) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, U = Math.floor(G / l)) : (U = G % g, H = Math.floor(G / g));
|
|
1385
1355
|
} else
|
|
1386
|
-
|
|
1387
|
-
let
|
|
1388
|
-
if (
|
|
1389
|
-
const
|
|
1390
|
-
|
|
1356
|
+
a.fillDirection === "row" ? (H = P % l, U = Math.floor(P / l)) : (U = P % g, H = Math.floor(P / g));
|
|
1357
|
+
let B = z + H * (x + a.gap) + x / 2, W = S + U * (w + a.gap) + w / 2;
|
|
1358
|
+
if (a.stagger === "row" && U % 2 === 1 ? B += x / 2 : a.stagger === "column" && H % 2 === 1 && (W += w / 2), Y > 0) {
|
|
1359
|
+
const q = (Y - 1) % Tt.length, G = Tt[q];
|
|
1360
|
+
B += G.x * N, W += G.y * N;
|
|
1391
1361
|
}
|
|
1392
|
-
if (
|
|
1393
|
-
const
|
|
1394
|
-
|
|
1362
|
+
if (a.jitter > 0) {
|
|
1363
|
+
const q = x / 2 * a.jitter, G = w / 2 * a.jitter;
|
|
1364
|
+
B += this.random(-q, q), W += this.random(-G, G);
|
|
1395
1365
|
}
|
|
1396
|
-
let
|
|
1397
|
-
if (!
|
|
1398
|
-
const
|
|
1399
|
-
if (
|
|
1400
|
-
const
|
|
1366
|
+
let X = B, V = W;
|
|
1367
|
+
if (!A && a.fillDirection === "row") {
|
|
1368
|
+
const q = t % l || l;
|
|
1369
|
+
if (U === Math.floor((t - 1) / l) && q < l) {
|
|
1370
|
+
const It = q * x + (q - 1) * a.gap;
|
|
1401
1371
|
let gt = 0;
|
|
1402
|
-
|
|
1372
|
+
a.alignment === "center" ? gt = (k - It) / 2 : a.alignment === "end" && (gt = k - It), X += gt;
|
|
1403
1373
|
}
|
|
1404
1374
|
}
|
|
1405
|
-
const ct =
|
|
1406
|
-
|
|
1375
|
+
const ct = p ? this.random(f, m) : 1, K = O * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt = s - c - nt, Pt = c + ot, _t = r - c - ot;
|
|
1376
|
+
X = Math.max(ht, Math.min(X, dt)), V = Math.max(Pt, Math.min(V, _t));
|
|
1407
1377
|
let ut = 0;
|
|
1408
1378
|
if (u === "random") {
|
|
1409
|
-
const
|
|
1410
|
-
|
|
1379
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, G = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1380
|
+
a.jitter > 0 ? ut = this.random(q * a.jitter, G * a.jitter) : ut = this.random(q, G);
|
|
1411
1381
|
}
|
|
1412
1382
|
let ft;
|
|
1413
|
-
|
|
1414
|
-
id:
|
|
1415
|
-
x:
|
|
1416
|
-
y:
|
|
1383
|
+
A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + P : P + 1, n.push({
|
|
1384
|
+
id: P,
|
|
1385
|
+
x: X,
|
|
1386
|
+
y: V,
|
|
1417
1387
|
rotation: ut,
|
|
1418
1388
|
scale: ct,
|
|
1419
1389
|
baseSize: K,
|
|
@@ -1425,20 +1395,20 @@ class ve {
|
|
|
1425
1395
|
/**
|
|
1426
1396
|
* Calculate optimal grid dimensions based on image count and container
|
|
1427
1397
|
*/
|
|
1428
|
-
calculateGridDimensions(t, i, e, n,
|
|
1429
|
-
let r,
|
|
1430
|
-
if (
|
|
1431
|
-
r =
|
|
1432
|
-
else if (
|
|
1433
|
-
r =
|
|
1434
|
-
else if (
|
|
1435
|
-
|
|
1398
|
+
calculateGridDimensions(t, i, e, n, s) {
|
|
1399
|
+
let r, a;
|
|
1400
|
+
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1401
|
+
r = s.columns, a = s.rows;
|
|
1402
|
+
else if (s.columns !== "auto")
|
|
1403
|
+
r = s.columns, a = Math.ceil(t / r);
|
|
1404
|
+
else if (s.rows !== "auto")
|
|
1405
|
+
a = s.rows, r = Math.ceil(t / a);
|
|
1436
1406
|
else {
|
|
1437
1407
|
const c = i / e;
|
|
1438
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t * c / 1.4))),
|
|
1408
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * c / 1.4))), a = Math.ceil(t / r); r > 1 && (r - 1) * a >= t; )
|
|
1439
1409
|
r--;
|
|
1440
1410
|
}
|
|
1441
|
-
return { columns: Math.max(1, r), rows: Math.max(1,
|
|
1411
|
+
return { columns: Math.max(1, r), rows: Math.max(1, a) };
|
|
1442
1412
|
}
|
|
1443
1413
|
/**
|
|
1444
1414
|
* Utility: Generate random number between min and max
|
|
@@ -1447,14 +1417,14 @@ class ve {
|
|
|
1447
1417
|
return Math.random() * (i - t) + t;
|
|
1448
1418
|
}
|
|
1449
1419
|
}
|
|
1450
|
-
const
|
|
1420
|
+
const ye = Math.PI * (3 - Math.sqrt(5)), ve = {
|
|
1451
1421
|
spiralType: "golden",
|
|
1452
1422
|
direction: "counterclockwise",
|
|
1453
1423
|
tightness: 1,
|
|
1454
1424
|
scaleDecay: 0,
|
|
1455
1425
|
startAngle: 0
|
|
1456
1426
|
};
|
|
1457
|
-
class
|
|
1427
|
+
class xe {
|
|
1458
1428
|
constructor(t, i = {}) {
|
|
1459
1429
|
this.config = t, this.imageConfig = i;
|
|
1460
1430
|
}
|
|
@@ -1466,36 +1436,36 @@ class Ee {
|
|
|
1466
1436
|
* @returns Array of layout objects with position, rotation, scale
|
|
1467
1437
|
*/
|
|
1468
1438
|
generate(t, i, e = {}) {
|
|
1469
|
-
const n = [], { width:
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
),
|
|
1473
|
-
for (let
|
|
1474
|
-
let
|
|
1475
|
-
if (
|
|
1476
|
-
|
|
1477
|
-
else if (
|
|
1478
|
-
const
|
|
1479
|
-
|
|
1439
|
+
const n = [], { width: s, height: r } = i, a = { ...ve, ...this.config.spiral }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.rotation?.range?.min ?? -15, m = this.imageConfig.rotation?.range?.max ?? 15, p = this.imageConfig.sizing?.variance?.min ?? 1, E = this.imageConfig.sizing?.variance?.max ?? 1, v = p !== 1 || E !== 1, l = this.config.scaleDecay ?? a.scaleDecay, g = s / 2, h = r / 2, b = Math.min(
|
|
1440
|
+
g - c - d / 2,
|
|
1441
|
+
h - c - d / 2
|
|
1442
|
+
), I = a.direction === "clockwise" ? -1 : 1;
|
|
1443
|
+
for (let y = 0; y < t; y++) {
|
|
1444
|
+
let x, w;
|
|
1445
|
+
if (a.spiralType === "golden")
|
|
1446
|
+
x = y * ye * I + a.startAngle, w = this.calculateGoldenRadius(y, t, b, a.tightness);
|
|
1447
|
+
else if (a.spiralType === "archimedean") {
|
|
1448
|
+
const B = y * 0.5 * a.tightness;
|
|
1449
|
+
x = B * I + a.startAngle, w = this.calculateArchimedeanRadius(B, t, b, a.tightness);
|
|
1480
1450
|
} else {
|
|
1481
|
-
const
|
|
1482
|
-
|
|
1451
|
+
const B = y * 0.3 * a.tightness;
|
|
1452
|
+
x = B * I + a.startAngle, w = this.calculateLogarithmicRadius(B, t, b, a.tightness);
|
|
1483
1453
|
}
|
|
1484
|
-
const
|
|
1485
|
-
let
|
|
1454
|
+
const F = g + Math.cos(x) * w, R = h + Math.sin(x) * w, M = w / b, T = l > 0 ? 1 - M * l * 0.5 : 1, O = v ? this.random(p, E) : 1, k = T * O, D = d * k, S = D * 1.5 / 2, _ = D / 2, $ = c + S, A = s - c - S, j = c + _, N = r - c - _, P = Math.max($, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
|
|
1455
|
+
let U = 0;
|
|
1486
1456
|
if (u === "random") {
|
|
1487
|
-
const
|
|
1488
|
-
|
|
1489
|
-
} else u === "tangent" && (
|
|
1490
|
-
const
|
|
1457
|
+
const B = x * 180 / Math.PI % 360, W = this.random(f, m);
|
|
1458
|
+
U = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
|
|
1459
|
+
} else u === "tangent" && (U = this.calculateSpiralTangent(x, w, a));
|
|
1460
|
+
const Y = t - y;
|
|
1491
1461
|
n.push({
|
|
1492
|
-
id:
|
|
1493
|
-
x:
|
|
1494
|
-
y:
|
|
1495
|
-
rotation:
|
|
1496
|
-
scale:
|
|
1497
|
-
baseSize:
|
|
1498
|
-
zIndex:
|
|
1462
|
+
id: y,
|
|
1463
|
+
x: P,
|
|
1464
|
+
y: H,
|
|
1465
|
+
rotation: U,
|
|
1466
|
+
scale: k,
|
|
1467
|
+
baseSize: D,
|
|
1468
|
+
zIndex: Y
|
|
1499
1469
|
});
|
|
1500
1470
|
}
|
|
1501
1471
|
return n;
|
|
@@ -1509,11 +1479,11 @@ class Ee {
|
|
|
1509
1479
|
if (e.spiralType === "golden")
|
|
1510
1480
|
n = t + Math.PI / 2;
|
|
1511
1481
|
else if (e.spiralType === "archimedean") {
|
|
1512
|
-
const r = 1 / e.tightness,
|
|
1513
|
-
n = t +
|
|
1482
|
+
const r = 1 / e.tightness, a = Math.atan(i / r);
|
|
1483
|
+
n = t + a;
|
|
1514
1484
|
} else {
|
|
1515
|
-
const r = 0.15 / e.tightness,
|
|
1516
|
-
n = t +
|
|
1485
|
+
const r = 0.15 / e.tightness, a = Math.atan(1 / r);
|
|
1486
|
+
n = t + a;
|
|
1517
1487
|
}
|
|
1518
1488
|
return n * 180 / Math.PI % 360 - 90;
|
|
1519
1489
|
}
|
|
@@ -1530,16 +1500,16 @@ class Ee {
|
|
|
1530
1500
|
* r = a + b*θ (constant spacing between arms)
|
|
1531
1501
|
*/
|
|
1532
1502
|
calculateArchimedeanRadius(t, i, e, n) {
|
|
1533
|
-
const
|
|
1534
|
-
return t /
|
|
1503
|
+
const s = i * 0.5 * n;
|
|
1504
|
+
return t / s * e;
|
|
1535
1505
|
}
|
|
1536
1506
|
/**
|
|
1537
1507
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1538
1508
|
* r = a * e^(b*θ)
|
|
1539
1509
|
*/
|
|
1540
1510
|
calculateLogarithmicRadius(t, i, e, n) {
|
|
1541
|
-
const
|
|
1542
|
-
return
|
|
1511
|
+
const s = e * 0.05, r = 0.15 / n, a = s * Math.exp(r * t), c = i * 0.3 * n, d = s * Math.exp(r * c);
|
|
1512
|
+
return a / d * e;
|
|
1543
1513
|
}
|
|
1544
1514
|
/**
|
|
1545
1515
|
* Utility: Generate random number between min and max
|
|
@@ -1548,7 +1518,7 @@ class Ee {
|
|
|
1548
1518
|
return Math.random() * (i - t) + t;
|
|
1549
1519
|
}
|
|
1550
1520
|
}
|
|
1551
|
-
const
|
|
1521
|
+
const we = {
|
|
1552
1522
|
clusterCount: "auto",
|
|
1553
1523
|
clusterSpread: 150,
|
|
1554
1524
|
clusterSpacing: 200,
|
|
@@ -1556,7 +1526,7 @@ const Se = {
|
|
|
1556
1526
|
overlap: 0.3,
|
|
1557
1527
|
distribution: "gaussian"
|
|
1558
1528
|
};
|
|
1559
|
-
class
|
|
1529
|
+
class Ee {
|
|
1560
1530
|
constructor(t, i = {}) {
|
|
1561
1531
|
this.config = t, this.imageConfig = i;
|
|
1562
1532
|
}
|
|
@@ -1568,48 +1538,48 @@ class Ie {
|
|
|
1568
1538
|
* @returns Array of layout objects with position, rotation, scale
|
|
1569
1539
|
*/
|
|
1570
1540
|
generate(t, i, e = {}) {
|
|
1571
|
-
const n = [], { width:
|
|
1541
|
+
const n = [], { width: s, height: r } = i, a = { ...we, ...this.config.cluster }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.rotation?.range?.min ?? -15, m = this.imageConfig.rotation?.range?.max ?? 15, p = this.imageConfig.sizing?.variance?.min ?? 1, E = this.imageConfig.sizing?.variance?.max ?? 1, v = p !== 1 || E !== 1, l = this.calculateClusterCount(
|
|
1572
1542
|
t,
|
|
1573
|
-
|
|
1574
|
-
|
|
1543
|
+
a.clusterCount,
|
|
1544
|
+
s,
|
|
1575
1545
|
r,
|
|
1576
|
-
|
|
1577
|
-
),
|
|
1578
|
-
|
|
1579
|
-
|
|
1546
|
+
a.clusterSpacing
|
|
1547
|
+
), g = this.generateClusterCenters(
|
|
1548
|
+
l,
|
|
1549
|
+
s,
|
|
1580
1550
|
r,
|
|
1581
1551
|
c,
|
|
1582
|
-
|
|
1583
|
-
),
|
|
1584
|
-
for (let
|
|
1585
|
-
|
|
1586
|
-
let
|
|
1587
|
-
for (let
|
|
1588
|
-
const
|
|
1589
|
-
for (let
|
|
1590
|
-
let
|
|
1591
|
-
if (
|
|
1592
|
-
|
|
1552
|
+
a
|
|
1553
|
+
), h = new Array(l).fill(0);
|
|
1554
|
+
for (let I = 0; I < t; I++)
|
|
1555
|
+
h[I % l]++;
|
|
1556
|
+
let b = 0;
|
|
1557
|
+
for (let I = 0; I < l; I++) {
|
|
1558
|
+
const y = g[I], x = h[I];
|
|
1559
|
+
for (let w = 0; w < x; w++) {
|
|
1560
|
+
let F, R;
|
|
1561
|
+
if (a.distribution === "gaussian")
|
|
1562
|
+
F = this.gaussianRandom() * y.spread, R = this.gaussianRandom() * y.spread;
|
|
1593
1563
|
else {
|
|
1594
|
-
const
|
|
1595
|
-
|
|
1564
|
+
const U = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
|
|
1565
|
+
F = Math.cos(U) * Y, R = Math.sin(U) * Y;
|
|
1596
1566
|
}
|
|
1597
|
-
const
|
|
1598
|
-
|
|
1599
|
-
const
|
|
1600
|
-
let
|
|
1601
|
-
const
|
|
1602
|
-
|
|
1603
|
-
const
|
|
1567
|
+
const M = 1 + a.overlap * 0.5, T = 1 + a.overlap * 0.3;
|
|
1568
|
+
F /= M, R /= M;
|
|
1569
|
+
const O = v ? this.random(p, E) : 1, k = T * O, D = d * k;
|
|
1570
|
+
let z = y.x + F, S = y.y + R;
|
|
1571
|
+
const $ = D * 1.5 / 2, A = D / 2;
|
|
1572
|
+
z = Math.max(c + $, Math.min(z, s - c - $)), S = Math.max(c + A, Math.min(S, r - c - A));
|
|
1573
|
+
const j = u === "random" ? this.random(f, m) : 0, P = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - P) * 50) + 1;
|
|
1604
1574
|
n.push({
|
|
1605
|
-
id:
|
|
1606
|
-
x:
|
|
1607
|
-
y:
|
|
1608
|
-
rotation:
|
|
1609
|
-
scale:
|
|
1610
|
-
baseSize:
|
|
1611
|
-
zIndex:
|
|
1612
|
-
}),
|
|
1575
|
+
id: b,
|
|
1576
|
+
x: z,
|
|
1577
|
+
y: S,
|
|
1578
|
+
rotation: j,
|
|
1579
|
+
scale: k,
|
|
1580
|
+
baseSize: D,
|
|
1581
|
+
zIndex: H
|
|
1582
|
+
}), b++;
|
|
1613
1583
|
}
|
|
1614
1584
|
}
|
|
1615
1585
|
return n;
|
|
@@ -1617,36 +1587,36 @@ class Ie {
|
|
|
1617
1587
|
/**
|
|
1618
1588
|
* Calculate optimal number of clusters based on image count and container
|
|
1619
1589
|
*/
|
|
1620
|
-
calculateClusterCount(t, i, e, n,
|
|
1590
|
+
calculateClusterCount(t, i, e, n, s) {
|
|
1621
1591
|
if (i !== "auto")
|
|
1622
1592
|
return Math.max(1, Math.min(i, t));
|
|
1623
|
-
const
|
|
1624
|
-
e /
|
|
1593
|
+
const a = Math.max(1, Math.ceil(t / 8)), c = Math.floor(
|
|
1594
|
+
e / s * (n / s) * 0.6
|
|
1625
1595
|
);
|
|
1626
|
-
return Math.max(1, Math.min(
|
|
1596
|
+
return Math.max(1, Math.min(a, c, 10));
|
|
1627
1597
|
}
|
|
1628
1598
|
/**
|
|
1629
1599
|
* Generate cluster center positions with spacing constraints
|
|
1630
1600
|
*/
|
|
1631
|
-
generateClusterCenters(t, i, e, n,
|
|
1632
|
-
const r = [], c = n +
|
|
1633
|
-
for (let
|
|
1634
|
-
let
|
|
1635
|
-
for (let
|
|
1636
|
-
const
|
|
1637
|
-
x: this.random(c,
|
|
1638
|
-
y: this.random(u,
|
|
1639
|
-
spread: this.calculateClusterSpread(
|
|
1601
|
+
generateClusterCenters(t, i, e, n, s) {
|
|
1602
|
+
const r = [], c = n + s.clusterSpread, d = i - n - s.clusterSpread, u = n + s.clusterSpread, f = e - n - s.clusterSpread;
|
|
1603
|
+
for (let m = 0; m < t; m++) {
|
|
1604
|
+
let p = null, E = -1;
|
|
1605
|
+
for (let v = 0; v < 100; v++) {
|
|
1606
|
+
const l = {
|
|
1607
|
+
x: this.random(c, d),
|
|
1608
|
+
y: this.random(u, f),
|
|
1609
|
+
spread: this.calculateClusterSpread(s)
|
|
1640
1610
|
};
|
|
1641
|
-
let
|
|
1642
|
-
for (const
|
|
1643
|
-
const
|
|
1644
|
-
|
|
1611
|
+
let g = 1 / 0;
|
|
1612
|
+
for (const h of r) {
|
|
1613
|
+
const b = l.x - h.x, I = l.y - h.y, y = Math.sqrt(b * b + I * I);
|
|
1614
|
+
g = Math.min(g, y);
|
|
1645
1615
|
}
|
|
1646
|
-
if ((r.length === 0 ||
|
|
1616
|
+
if ((r.length === 0 || g > E) && (p = l, E = g), g >= s.clusterSpacing)
|
|
1647
1617
|
break;
|
|
1648
1618
|
}
|
|
1649
|
-
|
|
1619
|
+
p && r.push(p);
|
|
1650
1620
|
}
|
|
1651
1621
|
return r;
|
|
1652
1622
|
}
|
|
@@ -1674,7 +1644,7 @@ class Ie {
|
|
|
1674
1644
|
return Math.random() * (i - t) + t;
|
|
1675
1645
|
}
|
|
1676
1646
|
}
|
|
1677
|
-
class
|
|
1647
|
+
class Ie {
|
|
1678
1648
|
constructor(t, i = {}) {
|
|
1679
1649
|
this.config = t, this.imageConfig = i;
|
|
1680
1650
|
}
|
|
@@ -1686,29 +1656,29 @@ class Ce {
|
|
|
1686
1656
|
* @returns Array of layout objects with position, rotation, scale
|
|
1687
1657
|
*/
|
|
1688
1658
|
generate(t, i, e = {}) {
|
|
1689
|
-
const n = [], { width:
|
|
1690
|
-
...
|
|
1659
|
+
const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, E = m !== 1 || p !== 1, v = e.fixedHeight ?? a, l = {
|
|
1660
|
+
...Ht,
|
|
1691
1661
|
...this.config.wave
|
|
1692
|
-
}, { rows:
|
|
1693
|
-
let
|
|
1694
|
-
for (let
|
|
1695
|
-
const
|
|
1696
|
-
let
|
|
1697
|
-
|
|
1698
|
-
for (let
|
|
1699
|
-
const
|
|
1700
|
-
let
|
|
1701
|
-
|
|
1702
|
-
const K =
|
|
1662
|
+
}, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, x = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, O = T - M, k = x > 1 ? O / (x - 1) : 0, D = c + h + v / 2, z = r - c - h - v / 2, S = z - D, _ = g > 1 ? S / (g - 1) : 0;
|
|
1663
|
+
let $ = 0;
|
|
1664
|
+
for (let A = 0; A < g && $ < t; A++) {
|
|
1665
|
+
const j = g === 1 ? (D + z) / 2 : D + A * _;
|
|
1666
|
+
let N = 0;
|
|
1667
|
+
y === "offset" ? N = A * I : y === "alternating" && (N = A * Math.PI);
|
|
1668
|
+
for (let P = 0; P < x && $ < t; P++) {
|
|
1669
|
+
const H = x === 1 ? (M + T) / 2 : M + P * k, U = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + U, W = E ? this.random(m, p) : 1, X = v * W;
|
|
1670
|
+
let V = 0;
|
|
1671
|
+
d === "tangent" ? V = this.calculateRotation(H, s, h, b, N) : d === "random" && (V = this.random(u, f));
|
|
1672
|
+
const K = X * 1.5 / 2, lt = X / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
|
|
1703
1673
|
n.push({
|
|
1704
|
-
id:
|
|
1705
|
-
x: Math.max(nt, Math.min(
|
|
1706
|
-
y: Math.max(ht, Math.min(
|
|
1707
|
-
rotation:
|
|
1708
|
-
scale:
|
|
1709
|
-
baseSize:
|
|
1710
|
-
zIndex:
|
|
1711
|
-
}),
|
|
1674
|
+
id: $,
|
|
1675
|
+
x: Math.max(nt, Math.min(Y, ot)),
|
|
1676
|
+
y: Math.max(ht, Math.min(B, dt)),
|
|
1677
|
+
rotation: V,
|
|
1678
|
+
scale: W,
|
|
1679
|
+
baseSize: X,
|
|
1680
|
+
zIndex: $ + 1
|
|
1681
|
+
}), $++;
|
|
1712
1682
|
}
|
|
1713
1683
|
}
|
|
1714
1684
|
return n;
|
|
@@ -1722,9 +1692,9 @@ class Ce {
|
|
|
1722
1692
|
* @param phase - Phase offset
|
|
1723
1693
|
* @returns Y displacement from baseline
|
|
1724
1694
|
*/
|
|
1725
|
-
calculateWaveY(t, i, e, n,
|
|
1695
|
+
calculateWaveY(t, i, e, n, s) {
|
|
1726
1696
|
const r = t / i;
|
|
1727
|
-
return e * Math.sin(n * r * 2 * Math.PI +
|
|
1697
|
+
return e * Math.sin(n * r * 2 * Math.PI + s);
|
|
1728
1698
|
}
|
|
1729
1699
|
/**
|
|
1730
1700
|
* Calculate rotation based on wave tangent
|
|
@@ -1735,9 +1705,9 @@ class Ce {
|
|
|
1735
1705
|
* @param phase - Phase offset
|
|
1736
1706
|
* @returns Rotation angle in degrees
|
|
1737
1707
|
*/
|
|
1738
|
-
calculateRotation(t, i, e, n,
|
|
1739
|
-
const r = t / i,
|
|
1740
|
-
return Math.atan(
|
|
1708
|
+
calculateRotation(t, i, e, n, s) {
|
|
1709
|
+
const r = t / i, a = e * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + s) / i;
|
|
1710
|
+
return Math.atan(a) * (180 / Math.PI);
|
|
1741
1711
|
}
|
|
1742
1712
|
/**
|
|
1743
1713
|
* Estimate image width based on height
|
|
@@ -1764,21 +1734,21 @@ const wt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1764
1734
|
// lower-left
|
|
1765
1735
|
[0, 50]
|
|
1766
1736
|
// left
|
|
1767
|
-
],
|
|
1768
|
-
function
|
|
1737
|
+
], Se = Et[1][0] / wt, Ce = Et[2][1] / wt;
|
|
1738
|
+
function Re(o) {
|
|
1769
1739
|
return {
|
|
1770
|
-
colStep:
|
|
1771
|
-
rowOffset:
|
|
1740
|
+
colStep: Se * o,
|
|
1741
|
+
rowOffset: Ce * o
|
|
1772
1742
|
};
|
|
1773
1743
|
}
|
|
1774
|
-
function
|
|
1775
|
-
const { colStep: r } =
|
|
1744
|
+
function Te(o, t, i, e, n, s) {
|
|
1745
|
+
const { colStep: r } = Re(s);
|
|
1776
1746
|
return {
|
|
1777
1747
|
px: e + r * o,
|
|
1778
|
-
py: n +
|
|
1748
|
+
py: n + s * (t + o / 2)
|
|
1779
1749
|
};
|
|
1780
1750
|
}
|
|
1781
|
-
const
|
|
1751
|
+
const Ae = [
|
|
1782
1752
|
[1, 0, -1],
|
|
1783
1753
|
[0, 1, -1],
|
|
1784
1754
|
[-1, 1, 0],
|
|
@@ -1786,49 +1756,49 @@ const Me = [
|
|
|
1786
1756
|
[0, -1, 1],
|
|
1787
1757
|
[1, -1, 0]
|
|
1788
1758
|
];
|
|
1789
|
-
function
|
|
1759
|
+
function Le(o) {
|
|
1790
1760
|
if (o === 0) return [[0, 0, 0]];
|
|
1791
1761
|
const t = [];
|
|
1792
1762
|
let [i, e, n] = [0, -o, o];
|
|
1793
|
-
for (const [
|
|
1763
|
+
for (const [s, r, a] of Ae)
|
|
1794
1764
|
for (let c = 0; c < o; c++)
|
|
1795
|
-
t.push([i, e, n]), i +=
|
|
1765
|
+
t.push([i, e, n]), i += s, e += r, n += a;
|
|
1796
1766
|
return t;
|
|
1797
1767
|
}
|
|
1798
|
-
class
|
|
1768
|
+
class Fe {
|
|
1799
1769
|
// imageConfig intentionally not stored — honeycomb forces uniform sizing (rotation/variance
|
|
1800
1770
|
// would break hex tiling). Kept as parameter for interface compatibility.
|
|
1801
1771
|
constructor(t, i = {}) {
|
|
1802
1772
|
this.config = t;
|
|
1803
1773
|
}
|
|
1804
1774
|
generate(t, i, e = {}) {
|
|
1805
|
-
const n = [], { width:
|
|
1806
|
-
...
|
|
1775
|
+
const n = [], { width: s, height: r } = i, a = s / 2, c = r / 2, d = e.fixedHeight ?? 200, f = {
|
|
1776
|
+
...Nt,
|
|
1807
1777
|
...this.config.honeycomb
|
|
1808
|
-
}.spacing ?? 0,
|
|
1809
|
-
let
|
|
1810
|
-
for (;
|
|
1811
|
-
const
|
|
1812
|
-
for (const [
|
|
1813
|
-
if (
|
|
1814
|
-
const { px:
|
|
1778
|
+
}.spacing ?? 0, m = d + f;
|
|
1779
|
+
let p = 0, E = 0;
|
|
1780
|
+
for (; p < t; ) {
|
|
1781
|
+
const v = Le(E);
|
|
1782
|
+
for (const [l, g, h] of v) {
|
|
1783
|
+
if (p >= t) break;
|
|
1784
|
+
const { px: b, py: I } = Te(l, g, h, a, c, m);
|
|
1815
1785
|
n.push({
|
|
1816
|
-
id:
|
|
1817
|
-
x,
|
|
1818
|
-
y:
|
|
1786
|
+
id: p,
|
|
1787
|
+
x: b,
|
|
1788
|
+
y: I,
|
|
1819
1789
|
rotation: 0,
|
|
1820
1790
|
scale: 1,
|
|
1821
|
-
baseSize:
|
|
1791
|
+
baseSize: d,
|
|
1822
1792
|
// Inner rings render above outer rings
|
|
1823
|
-
zIndex: Math.max(1, 100 -
|
|
1824
|
-
}),
|
|
1793
|
+
zIndex: Math.max(1, 100 - E)
|
|
1794
|
+
}), p++;
|
|
1825
1795
|
}
|
|
1826
|
-
|
|
1796
|
+
E++;
|
|
1827
1797
|
}
|
|
1828
1798
|
return n;
|
|
1829
1799
|
}
|
|
1830
1800
|
}
|
|
1831
|
-
class
|
|
1801
|
+
class Me {
|
|
1832
1802
|
constructor(t) {
|
|
1833
1803
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.placementLayout = this.initLayout();
|
|
1834
1804
|
}
|
|
@@ -1839,19 +1809,19 @@ class Oe {
|
|
|
1839
1809
|
initLayout() {
|
|
1840
1810
|
switch (this.config.algorithm) {
|
|
1841
1811
|
case "radial":
|
|
1842
|
-
return new
|
|
1812
|
+
return new me(this.config, this.imageConfig);
|
|
1843
1813
|
case "grid":
|
|
1844
|
-
return new
|
|
1814
|
+
return new be(this.config, this.imageConfig);
|
|
1845
1815
|
case "spiral":
|
|
1846
|
-
return new
|
|
1816
|
+
return new xe(this.config, this.imageConfig);
|
|
1847
1817
|
case "cluster":
|
|
1848
|
-
return new
|
|
1818
|
+
return new Ee(this.config, this.imageConfig);
|
|
1849
1819
|
case "wave":
|
|
1850
|
-
return new
|
|
1820
|
+
return new Ie(this.config, this.imageConfig);
|
|
1851
1821
|
case "honeycomb":
|
|
1852
|
-
return new
|
|
1822
|
+
return new Fe(this.config, this.imageConfig);
|
|
1853
1823
|
default:
|
|
1854
|
-
return new
|
|
1824
|
+
return new ge(this.config, this.imageConfig);
|
|
1855
1825
|
}
|
|
1856
1826
|
}
|
|
1857
1827
|
/**
|
|
@@ -1863,8 +1833,8 @@ class Oe {
|
|
|
1863
1833
|
*/
|
|
1864
1834
|
generateLayout(t, i, e = {}) {
|
|
1865
1835
|
const n = this.placementLayout.generate(t, i, e);
|
|
1866
|
-
return n.forEach((
|
|
1867
|
-
this.layouts.set(
|
|
1836
|
+
return n.forEach((s) => {
|
|
1837
|
+
this.layouts.set(s.id, s);
|
|
1868
1838
|
}), n;
|
|
1869
1839
|
}
|
|
1870
1840
|
/**
|
|
@@ -1918,8 +1888,8 @@ class Oe {
|
|
|
1918
1888
|
return;
|
|
1919
1889
|
if (typeof e == "number")
|
|
1920
1890
|
return e;
|
|
1921
|
-
const n = e,
|
|
1922
|
-
return
|
|
1891
|
+
const n = e, s = this.resolveBreakpoint(t);
|
|
1892
|
+
return s === "mobile" ? n.mobile ?? n.tablet ?? n.screen : s === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1923
1893
|
}
|
|
1924
1894
|
/**
|
|
1925
1895
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1930,18 +1900,18 @@ class Oe {
|
|
|
1930
1900
|
* @returns Calculated sizing result with height
|
|
1931
1901
|
*/
|
|
1932
1902
|
calculateAdaptiveSize(t, i, e, n) {
|
|
1933
|
-
const
|
|
1903
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1934
1904
|
if (r !== void 0)
|
|
1935
1905
|
return { height: r };
|
|
1936
|
-
const
|
|
1937
|
-
let
|
|
1938
|
-
|
|
1939
|
-
let
|
|
1940
|
-
if (
|
|
1941
|
-
const
|
|
1942
|
-
|
|
1906
|
+
const a = s?.minSize ?? 50, c = s?.maxSize ?? 400, d = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: f, height: m } = t, v = f * m * d / i;
|
|
1907
|
+
let g = Math.sqrt(v / 1.4);
|
|
1908
|
+
g *= u, g = Math.min(g, e);
|
|
1909
|
+
let h = this.clamp(g, a, c);
|
|
1910
|
+
if (h === a && g < a) {
|
|
1911
|
+
const b = Math.max(a * 0.05, 20);
|
|
1912
|
+
h = Math.max(b, g);
|
|
1943
1913
|
}
|
|
1944
|
-
return this.config.algorithm === "honeycomb" && (
|
|
1914
|
+
return this.config.algorithm === "honeycomb" && (h = Math.min(h, this.honeycombMaxImageHeight(i, t))), { height: h };
|
|
1945
1915
|
}
|
|
1946
1916
|
/**
|
|
1947
1917
|
* Returns the largest image height at which all honeycomb rings fit within the container.
|
|
@@ -1953,8 +1923,8 @@ class Oe {
|
|
|
1953
1923
|
let e = 0, n = 1;
|
|
1954
1924
|
for (; n < t; )
|
|
1955
1925
|
e++, n += 6 * e;
|
|
1956
|
-
const
|
|
1957
|
-
return Math.max(10, Math.min(
|
|
1926
|
+
const s = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, a = i.width / 2, c = i.height / 2, d = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), f = (c - s - r * e) / (e + 0.5), m = (a - s - d * r * e) / (d * e + u);
|
|
1927
|
+
return Math.max(10, Math.min(f, m));
|
|
1958
1928
|
}
|
|
1959
1929
|
/**
|
|
1960
1930
|
* Utility: Clamp a value between min and max
|
|
@@ -1963,8 +1933,8 @@ class Oe {
|
|
|
1963
1933
|
return Math.max(i, Math.min(e, t));
|
|
1964
1934
|
}
|
|
1965
1935
|
}
|
|
1966
|
-
var
|
|
1967
|
-
const
|
|
1936
|
+
var C = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(C || {});
|
|
1937
|
+
const At = {
|
|
1968
1938
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1969
1939
|
circle: "circle(50%)",
|
|
1970
1940
|
square: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
|
@@ -1973,7 +1943,7 @@ const Tt = {
|
|
|
1973
1943
|
hexagon: "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
|
|
1974
1944
|
octagon: "polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)",
|
|
1975
1945
|
diamond: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
|
|
1976
|
-
},
|
|
1946
|
+
}, ze = {
|
|
1977
1947
|
// Circle - uses radius in pixels (refHeight of 100px = 50px radius)
|
|
1978
1948
|
circle: {
|
|
1979
1949
|
refHeight: 100,
|
|
@@ -2011,29 +1981,29 @@ const Tt = {
|
|
|
2011
1981
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2012
1982
|
}
|
|
2013
1983
|
};
|
|
2014
|
-
function
|
|
1984
|
+
function Oe(o) {
|
|
2015
1985
|
if (o)
|
|
2016
|
-
return o in
|
|
1986
|
+
return o in At ? At[o] : o;
|
|
2017
1987
|
}
|
|
2018
|
-
function
|
|
2019
|
-
const e =
|
|
1988
|
+
function De(o, t, i) {
|
|
1989
|
+
const e = ze[o];
|
|
2020
1990
|
if (!e) return "";
|
|
2021
1991
|
const n = t / e.refHeight;
|
|
2022
1992
|
if (o === "circle")
|
|
2023
1993
|
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
2024
|
-
const
|
|
2025
|
-
return `polygon(${e.points.map(([
|
|
2026
|
-
const
|
|
2027
|
-
return `${
|
|
1994
|
+
const s = e.points.map(([v]) => v), r = e.points.map(([, v]) => v), a = (Math.min(...s) + Math.max(...s)) / 2 * n, c = (Math.min(...r) + Math.max(...r)) / 2 * n, d = (Math.max(...s) - Math.min(...s)) * n, u = (i ?? d) / 2, f = t / 2, m = u - a, p = f - c;
|
|
1995
|
+
return `polygon(${e.points.map(([v, l]) => {
|
|
1996
|
+
const g = Math.round((v * n + m) * 100) / 100, h = Math.round((l * n + p) * 100) / 100;
|
|
1997
|
+
return `${g}px ${h}px`;
|
|
2028
1998
|
}).join(", ")})`;
|
|
2029
1999
|
}
|
|
2030
|
-
function
|
|
2000
|
+
function $e(o) {
|
|
2031
2001
|
return o in mt;
|
|
2032
2002
|
}
|
|
2033
|
-
function
|
|
2034
|
-
return o ?
|
|
2003
|
+
function Pe(o) {
|
|
2004
|
+
return o ? $e(o) ? mt[o] : o : mt.md;
|
|
2035
2005
|
}
|
|
2036
|
-
function
|
|
2006
|
+
function _e(o) {
|
|
2037
2007
|
if (!o) return "";
|
|
2038
2008
|
const t = [];
|
|
2039
2009
|
if (o.grayscale !== void 0 && t.push(`grayscale(${o.grayscale})`), o.blur !== void 0 && t.push(`blur(${o.blur}px)`), o.brightness !== void 0 && t.push(`brightness(${o.brightness})`), o.contrast !== void 0 && t.push(`contrast(${o.contrast})`), o.saturate !== void 0 && t.push(`saturate(${o.saturate})`), o.opacity !== void 0 && t.push(`opacity(${o.opacity})`), o.sepia !== void 0 && t.push(`sepia(${o.sepia})`), o.hueRotate !== void 0 && t.push(`hue-rotate(${o.hueRotate}deg)`), o.invert !== void 0 && t.push(`invert(${o.invert})`), o.dropShadow !== void 0)
|
|
@@ -2055,38 +2025,38 @@ function it(o, t, i) {
|
|
|
2055
2025
|
if (!o) return {};
|
|
2056
2026
|
const e = {};
|
|
2057
2027
|
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
2058
|
-
const
|
|
2059
|
-
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` :
|
|
2028
|
+
const a = o.border?.radius ?? 0;
|
|
2029
|
+
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : a && (e.borderTopLeftRadius = `${a}px`), o.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${o.borderRadiusTopRight}px` : a && (e.borderTopRightRadius = `${a}px`), o.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : a && (e.borderBottomRightRadius = `${a}px`), o.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : a && (e.borderBottomLeftRadius = `${a}px`);
|
|
2060
2030
|
} else o.border?.radius !== void 0 && (e.borderRadius = `${o.border.radius}px`);
|
|
2061
2031
|
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
2062
|
-
const
|
|
2063
|
-
e.borderTop = tt(c), e.borderRight = tt(
|
|
2032
|
+
const a = o.border || {}, c = { ...a, ...o.borderTop }, d = { ...a, ...o.borderRight }, u = { ...a, ...o.borderBottom }, f = { ...a, ...o.borderLeft };
|
|
2033
|
+
e.borderTop = tt(c), e.borderRight = tt(d), e.borderBottom = tt(u), e.borderLeft = tt(f);
|
|
2064
2034
|
} else o.border && (e.border = tt(o.border));
|
|
2065
|
-
o.shadow !== void 0 && (e.boxShadow =
|
|
2066
|
-
const r =
|
|
2035
|
+
o.shadow !== void 0 && (e.boxShadow = Pe(o.shadow));
|
|
2036
|
+
const r = _e(o.filter);
|
|
2067
2037
|
if (e.filter = r || "none", o.opacity !== void 0 && (e.opacity = String(o.opacity)), o.cursor !== void 0 && (e.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
2068
|
-
const
|
|
2069
|
-
e.outline = `${
|
|
2038
|
+
const a = o.outline.width ?? 0, c = o.outline.style ?? "solid", d = o.outline.color ?? "#000000";
|
|
2039
|
+
e.outline = `${a}px ${c} ${d}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
2070
2040
|
}
|
|
2071
2041
|
if (o.objectFit !== void 0 && (e.objectFit = o.objectFit), o.aspectRatio !== void 0 && (e.aspectRatio = o.aspectRatio), o.clipPath !== void 0) {
|
|
2072
|
-
let
|
|
2073
|
-
const c = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath,
|
|
2074
|
-
if (
|
|
2075
|
-
|
|
2042
|
+
let a;
|
|
2043
|
+
const c = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, d = c ? o.clipPath : void 0;
|
|
2044
|
+
if (d?.mode === "height-relative" && t)
|
|
2045
|
+
a = De(d.shape, t, i);
|
|
2076
2046
|
else {
|
|
2077
|
-
const u = c &&
|
|
2078
|
-
|
|
2047
|
+
const u = c && d ? d.shape : o.clipPath;
|
|
2048
|
+
a = Oe(u);
|
|
2079
2049
|
}
|
|
2080
|
-
|
|
2050
|
+
a && (a === "none" ? e.clipPath = "unset" : (e.clipPath = a, e.overflow = "hidden"));
|
|
2081
2051
|
}
|
|
2082
2052
|
return e;
|
|
2083
2053
|
}
|
|
2084
|
-
function
|
|
2054
|
+
function Ue(o, t) {
|
|
2085
2055
|
t.borderRadius !== void 0 && (o.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (o.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (o.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (o.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (o.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (o.style.border = t.border), t.borderTop !== void 0 && (o.style.borderTop = t.borderTop), t.borderRight !== void 0 && (o.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (o.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (o.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (o.style.boxShadow = t.boxShadow), t.filter !== void 0 && (o.style.filter = t.filter), t.opacity !== void 0 && (o.style.opacity = t.opacity), t.cursor !== void 0 && (o.style.cursor = t.cursor), t.outline !== void 0 && (o.style.outline = t.outline), t.outlineOffset !== void 0 && (o.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (o.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (o.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (o.style.clipPath = t.clipPath), t.overflow !== void 0 && (o.style.overflow = t.overflow);
|
|
2086
2056
|
}
|
|
2087
2057
|
function st(o, t, i, e) {
|
|
2088
2058
|
const n = it(t, i, e);
|
|
2089
|
-
|
|
2059
|
+
Ue(o, n);
|
|
2090
2060
|
}
|
|
2091
2061
|
function $t(o) {
|
|
2092
2062
|
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
@@ -2109,7 +2079,7 @@ const Lt = {
|
|
|
2109
2079
|
};
|
|
2110
2080
|
class ke {
|
|
2111
2081
|
constructor(t, i, e) {
|
|
2112
|
-
this.state =
|
|
2082
|
+
this.state = C.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.onUnfocusComplete = null, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
2113
2083
|
}
|
|
2114
2084
|
/**
|
|
2115
2085
|
* Set callback to be fired when an unfocus animation fully completes.
|
|
@@ -2127,7 +2097,7 @@ class ke {
|
|
|
2127
2097
|
* Check if any animation is in progress
|
|
2128
2098
|
*/
|
|
2129
2099
|
isAnimating() {
|
|
2130
|
-
return this.state !==
|
|
2100
|
+
return this.state !== C.IDLE && this.state !== C.FOCUSED;
|
|
2131
2101
|
}
|
|
2132
2102
|
/**
|
|
2133
2103
|
* Normalize scalePercent value
|
|
@@ -2140,19 +2110,19 @@ class ke {
|
|
|
2140
2110
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2141
2111
|
*/
|
|
2142
2112
|
calculateFocusDimensions(t, i, e) {
|
|
2143
|
-
const n = this.normalizeScalePercent(this.config.scalePercent),
|
|
2144
|
-
let
|
|
2145
|
-
const
|
|
2146
|
-
return c >
|
|
2113
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), s = e.height * n, r = t / i;
|
|
2114
|
+
let a = s, c = a * r;
|
|
2115
|
+
const d = e.width * n;
|
|
2116
|
+
return c > d && (c = d, a = c / r), { width: c, height: a };
|
|
2147
2117
|
}
|
|
2148
2118
|
/**
|
|
2149
2119
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
2150
2120
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2151
2121
|
*/
|
|
2152
2122
|
calculateFocusTransform(t, i) {
|
|
2153
|
-
const e = t.width / 2, n = t.height / 2,
|
|
2123
|
+
const e = t.width / 2, n = t.height / 2, s = e - i.x, r = n - i.y;
|
|
2154
2124
|
return {
|
|
2155
|
-
x:
|
|
2125
|
+
x: s,
|
|
2156
2126
|
y: r,
|
|
2157
2127
|
rotation: 0,
|
|
2158
2128
|
scale: 1
|
|
@@ -2174,19 +2144,19 @@ class ke {
|
|
|
2174
2144
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2175
2145
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2176
2146
|
*/
|
|
2177
|
-
animateWithDimensions(t, i, e, n,
|
|
2178
|
-
const
|
|
2147
|
+
animateWithDimensions(t, i, e, n, s, r, a, c) {
|
|
2148
|
+
const d = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2179
2149
|
return t.style.transition = "none", t.animate(
|
|
2180
2150
|
[
|
|
2181
2151
|
{
|
|
2182
|
-
transform:
|
|
2152
|
+
transform: d,
|
|
2183
2153
|
width: `${n}px`,
|
|
2184
|
-
height: `${
|
|
2154
|
+
height: `${s}px`
|
|
2185
2155
|
},
|
|
2186
2156
|
{
|
|
2187
2157
|
transform: u,
|
|
2188
2158
|
width: `${r}px`,
|
|
2189
|
-
height: `${
|
|
2159
|
+
height: `${a}px`
|
|
2190
2160
|
}
|
|
2191
2161
|
],
|
|
2192
2162
|
{
|
|
@@ -2223,11 +2193,11 @@ class ke {
|
|
|
2223
2193
|
startClipPathAnimation(t, i, e) {
|
|
2224
2194
|
let n = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2225
2195
|
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (n = { ...n, clipPath: void 0 });
|
|
2226
|
-
const
|
|
2227
|
-
const r = t.offsetHeight,
|
|
2228
|
-
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(
|
|
2196
|
+
const s = () => {
|
|
2197
|
+
const r = t.offsetHeight, a = t.offsetWidth, c = it(n, r, a);
|
|
2198
|
+
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(s);
|
|
2229
2199
|
};
|
|
2230
|
-
requestAnimationFrame(
|
|
2200
|
+
requestAnimationFrame(s);
|
|
2231
2201
|
}
|
|
2232
2202
|
/**
|
|
2233
2203
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -2235,50 +2205,50 @@ class ke {
|
|
|
2235
2205
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2236
2206
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2237
2207
|
*/
|
|
2238
|
-
startFocusAnimation(t, i, e, n,
|
|
2239
|
-
const r = t.style.zIndex || "",
|
|
2208
|
+
startFocusAnimation(t, i, e, n, s) {
|
|
2209
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, c = t.offsetHeight, d = this.calculateFocusDimensions(a, c, i), u = this.calculateFocusTransform(i, e);
|
|
2240
2210
|
this.animationEngine.cancelAllAnimations(t);
|
|
2241
|
-
const
|
|
2211
|
+
const f = this.config.animationDuration ?? 600;
|
|
2242
2212
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
2243
|
-
const
|
|
2213
|
+
const m = n ?? {
|
|
2244
2214
|
x: 0,
|
|
2245
2215
|
y: 0,
|
|
2246
2216
|
rotation: e.rotation,
|
|
2247
2217
|
scale: 1
|
|
2248
2218
|
// No scale - using dimensions
|
|
2249
|
-
},
|
|
2219
|
+
}, p = s?.width ?? a, E = s?.height ?? c, v = this.animateWithDimensions(
|
|
2250
2220
|
t,
|
|
2251
|
-
|
|
2221
|
+
m,
|
|
2252
2222
|
u,
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
),
|
|
2223
|
+
p,
|
|
2224
|
+
E,
|
|
2225
|
+
d.width,
|
|
2226
|
+
d.height,
|
|
2227
|
+
f
|
|
2228
|
+
), l = {
|
|
2259
2229
|
id: `focus-${Date.now()}`,
|
|
2260
2230
|
element: t,
|
|
2261
|
-
animation:
|
|
2262
|
-
fromState:
|
|
2231
|
+
animation: v,
|
|
2232
|
+
fromState: m,
|
|
2263
2233
|
toState: u,
|
|
2264
2234
|
startTime: performance.now(),
|
|
2265
|
-
duration:
|
|
2235
|
+
duration: f
|
|
2266
2236
|
};
|
|
2267
2237
|
return this.focusData = {
|
|
2268
2238
|
element: t,
|
|
2269
2239
|
originalState: e,
|
|
2270
2240
|
focusTransform: u,
|
|
2271
2241
|
originalZIndex: r,
|
|
2272
|
-
originalWidth:
|
|
2242
|
+
originalWidth: a,
|
|
2273
2243
|
originalHeight: c,
|
|
2274
|
-
focusWidth:
|
|
2275
|
-
focusHeight:
|
|
2276
|
-
}, this.startClipPathAnimation(t,
|
|
2244
|
+
focusWidth: d.width,
|
|
2245
|
+
focusHeight: d.height
|
|
2246
|
+
}, this.startClipPathAnimation(t, l, !0), {
|
|
2277
2247
|
element: t,
|
|
2278
2248
|
originalState: e,
|
|
2279
|
-
animationHandle:
|
|
2249
|
+
animationHandle: l,
|
|
2280
2250
|
direction: "in",
|
|
2281
|
-
originalWidth:
|
|
2251
|
+
originalWidth: a,
|
|
2282
2252
|
originalHeight: c
|
|
2283
2253
|
};
|
|
2284
2254
|
}
|
|
@@ -2289,39 +2259,39 @@ class ke {
|
|
|
2289
2259
|
*/
|
|
2290
2260
|
startUnfocusAnimation(t, i, e, n) {
|
|
2291
2261
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2292
|
-
const
|
|
2262
|
+
const s = this.config.animationDuration ?? 600;
|
|
2293
2263
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2294
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 },
|
|
2264
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, a = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, c = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, d = {
|
|
2295
2265
|
x: 0,
|
|
2296
2266
|
y: 0,
|
|
2297
2267
|
rotation: i.rotation,
|
|
2298
2268
|
scale: 1
|
|
2299
2269
|
// No scale - using dimensions
|
|
2300
|
-
}, u = this.focusData?.originalWidth ?? t.offsetWidth,
|
|
2270
|
+
}, u = this.focusData?.originalWidth ?? t.offsetWidth, f = this.focusData?.originalHeight ?? t.offsetHeight, m = this.animateWithDimensions(
|
|
2301
2271
|
t,
|
|
2302
2272
|
r,
|
|
2303
|
-
|
|
2304
|
-
|
|
2273
|
+
d,
|
|
2274
|
+
a,
|
|
2305
2275
|
c,
|
|
2306
2276
|
u,
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
),
|
|
2277
|
+
f,
|
|
2278
|
+
s
|
|
2279
|
+
), p = {
|
|
2310
2280
|
id: `unfocus-${Date.now()}`,
|
|
2311
2281
|
element: t,
|
|
2312
|
-
animation:
|
|
2282
|
+
animation: m,
|
|
2313
2283
|
fromState: r,
|
|
2314
|
-
toState:
|
|
2284
|
+
toState: d,
|
|
2315
2285
|
startTime: performance.now(),
|
|
2316
|
-
duration:
|
|
2286
|
+
duration: s
|
|
2317
2287
|
};
|
|
2318
|
-
return this.startClipPathAnimation(t,
|
|
2288
|
+
return this.startClipPathAnimation(t, p, !1), {
|
|
2319
2289
|
element: t,
|
|
2320
2290
|
originalState: i,
|
|
2321
|
-
animationHandle:
|
|
2291
|
+
animationHandle: p,
|
|
2322
2292
|
direction: "out",
|
|
2323
2293
|
originalWidth: u,
|
|
2324
|
-
originalHeight:
|
|
2294
|
+
originalHeight: f
|
|
2325
2295
|
};
|
|
2326
2296
|
}
|
|
2327
2297
|
/**
|
|
@@ -2339,10 +2309,10 @@ class ke {
|
|
|
2339
2309
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2340
2310
|
*/
|
|
2341
2311
|
captureMidAnimationState(t) {
|
|
2342
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth,
|
|
2343
|
-
return t.style.width = `${n}px`, t.style.height = `${
|
|
2344
|
-
transform: { x: r, y:
|
|
2345
|
-
dimensions: { width: n, height:
|
|
2312
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth, s = t.offsetHeight, r = e.e + n * 0.5, a = e.f + s * 0.5, c = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2313
|
+
return t.style.width = `${n}px`, t.style.height = `${s}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${a}px) rotate(${c}deg)`, t.style.transition = "none", {
|
|
2314
|
+
transform: { x: r, y: a, rotation: c, scale: 1 },
|
|
2315
|
+
dimensions: { width: n, height: s }
|
|
2346
2316
|
};
|
|
2347
2317
|
}
|
|
2348
2318
|
/**
|
|
@@ -2357,36 +2327,36 @@ class ke {
|
|
|
2357
2327
|
/**
|
|
2358
2328
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2359
2329
|
*/
|
|
2360
|
-
resetElementInstantly(t, i, e, n,
|
|
2330
|
+
resetElementInstantly(t, i, e, n, s) {
|
|
2361
2331
|
this.animationEngine.cancelAllAnimations(t);
|
|
2362
2332
|
const r = ["translate(-50%, -50%)"];
|
|
2363
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 &&
|
|
2333
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && s !== void 0 && (t.style.width = `${n}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, e);
|
|
2364
2334
|
}
|
|
2365
2335
|
/**
|
|
2366
2336
|
* Focus (zoom) an image to center of container
|
|
2367
2337
|
* Implements cross-animation when swapping focus
|
|
2368
2338
|
*/
|
|
2369
2339
|
async focusImage(t, i, e) {
|
|
2370
|
-
if (this.currentFocus === t && this.state ===
|
|
2340
|
+
if (this.currentFocus === t && this.state === C.FOCUSED)
|
|
2371
2341
|
return this.unfocusImage();
|
|
2372
|
-
if (this.incoming?.element === t && this.state ===
|
|
2373
|
-
const { transform:
|
|
2342
|
+
if (this.incoming?.element === t && this.state === C.FOCUSING) {
|
|
2343
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2374
2344
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2375
2345
|
t,
|
|
2376
2346
|
this.incoming.originalState,
|
|
2377
|
-
|
|
2347
|
+
s,
|
|
2378
2348
|
r
|
|
2379
|
-
), this.incoming = null, this.state =
|
|
2349
|
+
), this.incoming = null, this.state = C.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 = C.IDLE;
|
|
2380
2350
|
return;
|
|
2381
2351
|
}
|
|
2382
2352
|
const n = ++this.focusGeneration;
|
|
2383
2353
|
switch (this.state) {
|
|
2384
|
-
case
|
|
2385
|
-
if (this.state =
|
|
2386
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2354
|
+
case C.IDLE:
|
|
2355
|
+
if (this.state = C.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2356
|
+
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2387
2357
|
break;
|
|
2388
|
-
case
|
|
2389
|
-
if (this.state =
|
|
2358
|
+
case C.FOCUSED:
|
|
2359
|
+
if (this.state = C.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2390
2360
|
this.currentFocus,
|
|
2391
2361
|
this.focusData.originalState
|
|
2392
2362
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
@@ -2395,12 +2365,12 @@ class ke {
|
|
|
2395
2365
|
]), this.focusGeneration !== n)
|
|
2396
2366
|
return;
|
|
2397
2367
|
if (this.outgoing) {
|
|
2398
|
-
const
|
|
2399
|
-
this.removeFocusedStyling(
|
|
2368
|
+
const s = this.outgoing.element;
|
|
2369
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2400
2370
|
}
|
|
2401
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2371
|
+
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2402
2372
|
break;
|
|
2403
|
-
case
|
|
2373
|
+
case C.FOCUSING:
|
|
2404
2374
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2405
2375
|
this.incoming.element,
|
|
2406
2376
|
this.incoming.originalState,
|
|
@@ -2408,43 +2378,43 @@ class ke {
|
|
|
2408
2378
|
this.focusData?.originalWidth,
|
|
2409
2379
|
this.focusData?.originalHeight
|
|
2410
2380
|
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2411
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2381
|
+
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2412
2382
|
break;
|
|
2413
|
-
case
|
|
2414
|
-
if (this.state =
|
|
2383
|
+
case C.UNFOCUSING:
|
|
2384
|
+
if (this.state = C.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2415
2385
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2416
2386
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2417
2387
|
]), this.focusGeneration !== n) return;
|
|
2418
2388
|
if (this.outgoing) {
|
|
2419
|
-
const
|
|
2420
|
-
this.removeFocusedStyling(
|
|
2389
|
+
const s = this.outgoing.element;
|
|
2390
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2421
2391
|
}
|
|
2422
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2392
|
+
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2423
2393
|
break;
|
|
2424
|
-
case
|
|
2394
|
+
case C.CROSS_ANIMATING:
|
|
2425
2395
|
if (this.incoming?.element === t)
|
|
2426
2396
|
return;
|
|
2427
2397
|
if (this.outgoing?.element === t) {
|
|
2428
|
-
const { transform:
|
|
2398
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2429
2399
|
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2430
|
-
const { transform:
|
|
2400
|
+
const { transform: a, dimensions: c } = this.captureMidAnimationState(this.incoming.element);
|
|
2431
2401
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2432
2402
|
this.incoming.element,
|
|
2433
2403
|
this.incoming.originalState,
|
|
2434
|
-
|
|
2404
|
+
a,
|
|
2435
2405
|
c
|
|
2436
2406
|
);
|
|
2437
2407
|
} else
|
|
2438
2408
|
this.outgoing = null;
|
|
2439
|
-
if (this.incoming = this.startFocusAnimation(t, i, e,
|
|
2409
|
+
if (this.incoming = this.startFocusAnimation(t, i, e, s, r), await Promise.all([
|
|
2440
2410
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2441
2411
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2442
2412
|
]), this.focusGeneration !== n) return;
|
|
2443
2413
|
if (this.outgoing) {
|
|
2444
|
-
const
|
|
2445
|
-
this.removeFocusedStyling(
|
|
2414
|
+
const a = this.outgoing.element;
|
|
2415
|
+
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2446
2416
|
}
|
|
2447
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2417
|
+
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2448
2418
|
return;
|
|
2449
2419
|
}
|
|
2450
2420
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2454,11 +2424,11 @@ class ke {
|
|
|
2454
2424
|
this.outgoing.originalWidth,
|
|
2455
2425
|
this.outgoing.originalHeight
|
|
2456
2426
|
), this.outgoing = null), this.incoming) {
|
|
2457
|
-
const { transform:
|
|
2427
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2458
2428
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2459
2429
|
this.incoming.element,
|
|
2460
2430
|
this.incoming.originalState,
|
|
2461
|
-
|
|
2431
|
+
s,
|
|
2462
2432
|
r
|
|
2463
2433
|
);
|
|
2464
2434
|
}
|
|
@@ -2467,10 +2437,10 @@ class ke {
|
|
|
2467
2437
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2468
2438
|
]), this.focusGeneration !== n) return;
|
|
2469
2439
|
if (this.outgoing) {
|
|
2470
|
-
const
|
|
2471
|
-
this.removeFocusedStyling(
|
|
2440
|
+
const s = this.outgoing.element;
|
|
2441
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2472
2442
|
}
|
|
2473
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2443
|
+
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2474
2444
|
break;
|
|
2475
2445
|
}
|
|
2476
2446
|
}
|
|
@@ -2478,45 +2448,45 @@ class ke {
|
|
|
2478
2448
|
* Unfocus current image, returning it to original position
|
|
2479
2449
|
*/
|
|
2480
2450
|
async unfocusImage() {
|
|
2481
|
-
if (this.state ===
|
|
2451
|
+
if (this.state === C.UNFOCUSING)
|
|
2482
2452
|
return;
|
|
2483
2453
|
const t = ++this.focusGeneration;
|
|
2484
2454
|
if (!this.currentFocus || !this.focusData) {
|
|
2485
|
-
if (this.incoming && this.state ===
|
|
2486
|
-
const { transform:
|
|
2455
|
+
if (this.incoming && this.state === C.FOCUSING) {
|
|
2456
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2487
2457
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2488
2458
|
this.incoming.element,
|
|
2489
2459
|
this.incoming.originalState,
|
|
2490
|
-
|
|
2460
|
+
s,
|
|
2491
2461
|
r
|
|
2492
|
-
), this.incoming = null, this.state =
|
|
2493
|
-
const
|
|
2494
|
-
this.removeFocusedStyling(
|
|
2462
|
+
), this.incoming = null, this.state = C.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2463
|
+
const a = this.outgoing.element;
|
|
2464
|
+
this.removeFocusedStyling(a, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = C.IDLE, this.onUnfocusComplete?.(a);
|
|
2495
2465
|
}
|
|
2496
2466
|
return;
|
|
2497
2467
|
}
|
|
2498
|
-
if (this.state ===
|
|
2499
|
-
const { transform:
|
|
2468
|
+
if (this.state === C.CROSS_ANIMATING && this.incoming) {
|
|
2469
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2500
2470
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2501
|
-
const
|
|
2471
|
+
const a = this.startUnfocusAnimation(
|
|
2502
2472
|
this.incoming.element,
|
|
2503
2473
|
this.incoming.originalState,
|
|
2504
|
-
|
|
2474
|
+
s,
|
|
2505
2475
|
r
|
|
2506
2476
|
);
|
|
2507
2477
|
if (await Promise.all([
|
|
2508
2478
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2509
|
-
this.waitForAnimation(
|
|
2479
|
+
this.waitForAnimation(a.animationHandle)
|
|
2510
2480
|
]), this.focusGeneration !== t) return;
|
|
2511
2481
|
let c = null;
|
|
2512
2482
|
this.outgoing && (c = this.outgoing.element, this.removeFocusedStyling(c, this.outgoing.originalState.zIndex?.toString() || ""));
|
|
2513
|
-
const
|
|
2514
|
-
this.removeFocusedStyling(
|
|
2483
|
+
const d = a.element;
|
|
2484
|
+
this.removeFocusedStyling(d, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = C.IDLE, c && this.onUnfocusComplete?.(c), this.onUnfocusComplete?.(d);
|
|
2515
2485
|
return;
|
|
2516
2486
|
}
|
|
2517
|
-
this.state =
|
|
2487
|
+
this.state = C.UNFOCUSING;
|
|
2518
2488
|
const i = this.currentFocus, e = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2519
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state =
|
|
2489
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = C.IDLE, this.onUnfocusComplete?.(i));
|
|
2520
2490
|
}
|
|
2521
2491
|
/**
|
|
2522
2492
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2534,7 +2504,7 @@ class ke {
|
|
|
2534
2504
|
* Check if an image is currently focused (stable state)
|
|
2535
2505
|
*/
|
|
2536
2506
|
isFocused(t) {
|
|
2537
|
-
return this.currentFocus === t && this.state ===
|
|
2507
|
+
return this.currentFocus === t && this.state === C.FOCUSED;
|
|
2538
2508
|
}
|
|
2539
2509
|
/**
|
|
2540
2510
|
* Check if an image is the target of current focus animation
|
|
@@ -2555,9 +2525,9 @@ class ke {
|
|
|
2555
2525
|
* Used during swipe gestures for visual feedback
|
|
2556
2526
|
*/
|
|
2557
2527
|
setDragOffset(t) {
|
|
2558
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2559
|
-
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"],
|
|
2560
|
-
n.push(`translate(${
|
|
2528
|
+
if (!this.currentFocus || !this.focusData || this.state !== C.FOCUSED) return;
|
|
2529
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2530
|
+
n.push(`translate(${s}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2561
2531
|
}
|
|
2562
2532
|
/**
|
|
2563
2533
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2565,10 +2535,10 @@ class ke {
|
|
|
2565
2535
|
* @param duration - Animation duration in ms (default 150)
|
|
2566
2536
|
*/
|
|
2567
2537
|
clearDragOffset(t, i = 150) {
|
|
2568
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2569
|
-
const e = this.currentFocus, n = this.focusData.focusTransform,
|
|
2570
|
-
|
|
2571
|
-
const c =
|
|
2538
|
+
if (!this.currentFocus || !this.focusData || this.state !== C.FOCUSED) return;
|
|
2539
|
+
const e = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2540
|
+
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2541
|
+
const c = s.join(" ");
|
|
2572
2542
|
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = c, setTimeout(() => {
|
|
2573
2543
|
this.currentFocus === e && (e.style.transition = "none");
|
|
2574
2544
|
}, i)) : (e.style.transition = "none", e.style.transform = c);
|
|
@@ -2595,10 +2565,10 @@ class ke {
|
|
|
2595
2565
|
this.focusData.originalZIndex,
|
|
2596
2566
|
this.focusData.originalWidth,
|
|
2597
2567
|
this.focusData.originalHeight
|
|
2598
|
-
), this.state =
|
|
2568
|
+
), this.state = C.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2599
2569
|
}
|
|
2600
2570
|
}
|
|
2601
|
-
const
|
|
2571
|
+
const He = 50, Ne = 0.5, Be = 20, je = 0.3, We = 150, Ge = 30, rt = class rt {
|
|
2602
2572
|
constructor(t, i) {
|
|
2603
2573
|
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);
|
|
2604
2574
|
}
|
|
@@ -2644,21 +2614,21 @@ const Be = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Xe = 30, rt = class rt {
|
|
|
2644
2614
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2645
2615
|
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2646
2616
|
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2647
|
-
const
|
|
2648
|
-
this.touchState.isHorizontalSwipe =
|
|
2617
|
+
const a = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2618
|
+
this.touchState.isHorizontalSwipe = a <= Ge;
|
|
2649
2619
|
}
|
|
2650
2620
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2651
2621
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = i.clientX;
|
|
2652
|
-
const
|
|
2653
|
-
this.callbacks.onDragOffset(
|
|
2622
|
+
const s = e * je;
|
|
2623
|
+
this.callbacks.onDragOffset(s);
|
|
2654
2624
|
}
|
|
2655
2625
|
}
|
|
2656
2626
|
handleTouchEnd(t) {
|
|
2657
2627
|
if (!this.touchState) return;
|
|
2658
2628
|
this.recentTouchTimestamp = Date.now();
|
|
2659
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e,
|
|
2629
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, s = Math.abs(i);
|
|
2660
2630
|
let r = !1;
|
|
2661
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (
|
|
2631
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= He || n >= Ne && s >= Be) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2662
2632
|
}
|
|
2663
2633
|
handleTouchCancel(t) {
|
|
2664
2634
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
@@ -2666,7 +2636,7 @@ const Be = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Xe = 30, rt = class rt {
|
|
|
2666
2636
|
};
|
|
2667
2637
|
rt.TOUCH_CLICK_DELAY = 300;
|
|
2668
2638
|
let bt = rt;
|
|
2669
|
-
class
|
|
2639
|
+
class qe {
|
|
2670
2640
|
constructor(t) {
|
|
2671
2641
|
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)
|
|
2672
2642
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2680,8 +2650,8 @@ class Ye {
|
|
|
2680
2650
|
for (const i of this.sources)
|
|
2681
2651
|
if ("folders" in i)
|
|
2682
2652
|
for (const e of i.folders) {
|
|
2683
|
-
const n = i.recursive !== void 0 ? i.recursive : !0,
|
|
2684
|
-
this._discoveredUrls.push(...
|
|
2653
|
+
const n = i.recursive !== void 0 ? i.recursive : !0, s = await this.loadFromFolder(e, t, n);
|
|
2654
|
+
this._discoveredUrls.push(...s);
|
|
2685
2655
|
}
|
|
2686
2656
|
else if ("files" in i) {
|
|
2687
2657
|
const e = await this.loadFiles(i.files, t);
|
|
@@ -2747,8 +2717,8 @@ class Ye {
|
|
|
2747
2717
|
return this.loadImagesDirectly(n, i);
|
|
2748
2718
|
try {
|
|
2749
2719
|
return e ? await this.loadImagesRecursively(n, i) : await this.loadImagesFromSingleFolder(n, i);
|
|
2750
|
-
} catch (
|
|
2751
|
-
return console.error("Error loading from Google Drive API:",
|
|
2720
|
+
} catch (s) {
|
|
2721
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(n, i);
|
|
2752
2722
|
}
|
|
2753
2723
|
}
|
|
2754
2724
|
/**
|
|
@@ -2758,13 +2728,13 @@ class Ye {
|
|
|
2758
2728
|
* @returns Promise resolving to array of image URLs
|
|
2759
2729
|
*/
|
|
2760
2730
|
async loadImagesFromSingleFolder(t, i) {
|
|
2761
|
-
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2762
|
-
if (!
|
|
2763
|
-
throw new Error(`API request failed: ${
|
|
2764
|
-
const
|
|
2731
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2732
|
+
if (!a.ok)
|
|
2733
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2734
|
+
const d = (await a.json()).files.filter(
|
|
2765
2735
|
(u) => u.mimeType.startsWith("image/") && i.isAllowed(u.name)
|
|
2766
2736
|
);
|
|
2767
|
-
return this.log(`Found ${
|
|
2737
|
+
return this.log(`Found ${d.length} images in folder ${t} (non-recursive)`), d.forEach((u) => {
|
|
2768
2738
|
e.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2769
2739
|
}), e;
|
|
2770
2740
|
}
|
|
@@ -2777,24 +2747,24 @@ class Ye {
|
|
|
2777
2747
|
async loadFiles(t, i) {
|
|
2778
2748
|
const e = [];
|
|
2779
2749
|
for (const n of t) {
|
|
2780
|
-
const
|
|
2781
|
-
if (!
|
|
2750
|
+
const s = this.extractFileId(n);
|
|
2751
|
+
if (!s) {
|
|
2782
2752
|
this.log(`Skipping invalid file URL: ${n}`);
|
|
2783
2753
|
continue;
|
|
2784
2754
|
}
|
|
2785
2755
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2786
2756
|
try {
|
|
2787
|
-
const r = `${this.apiEndpoint}/${
|
|
2788
|
-
if (
|
|
2789
|
-
const c = await
|
|
2790
|
-
c.mimeType.startsWith("image/") && i.isAllowed(c.name) ? (e.push(`https://lh3.googleusercontent.com/d/${
|
|
2757
|
+
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2758
|
+
if (a.ok) {
|
|
2759
|
+
const c = await a.json();
|
|
2760
|
+
c.mimeType.startsWith("image/") && i.isAllowed(c.name) ? (e.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${c.name}`)) : this.log(`Skipping non-image file: ${c.name} (${c.mimeType})`);
|
|
2791
2761
|
} else
|
|
2792
|
-
this.log(`Failed to fetch metadata for file ${
|
|
2762
|
+
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2793
2763
|
} catch (r) {
|
|
2794
|
-
this.log(`Error fetching metadata for file ${
|
|
2764
|
+
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2795
2765
|
}
|
|
2796
2766
|
else
|
|
2797
|
-
e.push(`https://lh3.googleusercontent.com/d/${
|
|
2767
|
+
e.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
2798
2768
|
}
|
|
2799
2769
|
return e;
|
|
2800
2770
|
}
|
|
@@ -2828,21 +2798,21 @@ class Ye {
|
|
|
2828
2798
|
* @returns Promise resolving to array of image URLs
|
|
2829
2799
|
*/
|
|
2830
2800
|
async loadImagesRecursively(t, i) {
|
|
2831
|
-
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`,
|
|
2832
|
-
if (!
|
|
2833
|
-
throw new Error(`API request failed: ${
|
|
2834
|
-
const c = await
|
|
2835
|
-
(
|
|
2801
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2802
|
+
if (!a.ok)
|
|
2803
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2804
|
+
const c = await a.json(), d = c.files.filter(
|
|
2805
|
+
(f) => f.mimeType.startsWith("image/") && i.isAllowed(f.name)
|
|
2836
2806
|
), u = c.files.filter(
|
|
2837
|
-
(
|
|
2807
|
+
(f) => f.mimeType === "application/vnd.google-apps.folder"
|
|
2838
2808
|
);
|
|
2839
|
-
this.log(`Found ${c.files.length} total items in folder ${t}`), c.files.forEach((
|
|
2840
|
-
e.push(`https://lh3.googleusercontent.com/d/${
|
|
2809
|
+
this.log(`Found ${c.files.length} total items in folder ${t}`), c.files.forEach((f) => this.log(` - File: ${f.name} (${f.mimeType})`)), this.log(`- ${d.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), d.forEach((f) => {
|
|
2810
|
+
e.push(`https://lh3.googleusercontent.com/d/${f.id}=s1600`), this.log(`Added file: ${f.name}`);
|
|
2841
2811
|
});
|
|
2842
|
-
for (const
|
|
2843
|
-
this.log(`Loading images from subfolder: ${
|
|
2844
|
-
const
|
|
2845
|
-
e.push(...
|
|
2812
|
+
for (const f of u) {
|
|
2813
|
+
this.log(`Loading images from subfolder: ${f.name}`);
|
|
2814
|
+
const m = await this.loadImagesRecursively(f.id, i);
|
|
2815
|
+
e.push(...m);
|
|
2846
2816
|
}
|
|
2847
2817
|
return e;
|
|
2848
2818
|
}
|
|
@@ -2858,8 +2828,8 @@ class Ye {
|
|
|
2858
2828
|
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(e, { mode: "cors" });
|
|
2859
2829
|
if (!n.ok)
|
|
2860
2830
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2861
|
-
const
|
|
2862
|
-
return [...new Set(
|
|
2831
|
+
const s = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2832
|
+
return [...new Set(a.map((u) => u[1]))].map(
|
|
2863
2833
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2864
2834
|
);
|
|
2865
2835
|
} catch (e) {
|
|
@@ -2887,7 +2857,7 @@ class Ye {
|
|
|
2887
2857
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2888
2858
|
}
|
|
2889
2859
|
}
|
|
2890
|
-
class
|
|
2860
|
+
class Ye {
|
|
2891
2861
|
constructor(t) {
|
|
2892
2862
|
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)
|
|
2893
2863
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
@@ -2952,8 +2922,8 @@ class Je {
|
|
|
2952
2922
|
return console.warn("URLs must be an array:", t), [];
|
|
2953
2923
|
const e = [];
|
|
2954
2924
|
for (const n of t) {
|
|
2955
|
-
const
|
|
2956
|
-
if (!i.isAllowed(
|
|
2925
|
+
const s = n.split("/").pop() || n;
|
|
2926
|
+
if (!i.isAllowed(s)) {
|
|
2957
2927
|
this.log(`Skipping filtered URL: ${n}`);
|
|
2958
2928
|
continue;
|
|
2959
2929
|
}
|
|
@@ -2972,12 +2942,12 @@ class Je {
|
|
|
2972
2942
|
if (!Array.isArray(i))
|
|
2973
2943
|
return console.warn("files must be an array:", i), [];
|
|
2974
2944
|
const n = [];
|
|
2975
|
-
for (const
|
|
2976
|
-
if (!e.isAllowed(
|
|
2977
|
-
this.log(`Skipping filtered file: ${
|
|
2945
|
+
for (const s of i) {
|
|
2946
|
+
if (!e.isAllowed(s)) {
|
|
2947
|
+
this.log(`Skipping filtered file: ${s}`);
|
|
2978
2948
|
continue;
|
|
2979
2949
|
}
|
|
2980
|
-
const r = this.constructUrl(t,
|
|
2950
|
+
const r = this.constructUrl(t, s);
|
|
2981
2951
|
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2982
2952
|
}
|
|
2983
2953
|
return n;
|
|
@@ -2993,15 +2963,15 @@ class Je {
|
|
|
2993
2963
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2994
2964
|
const e = new AbortController(), n = setTimeout(() => e.abort(), 1e4);
|
|
2995
2965
|
try {
|
|
2996
|
-
const
|
|
2997
|
-
if (clearTimeout(n), !
|
|
2998
|
-
throw new Error(`HTTP ${
|
|
2999
|
-
const r = await
|
|
2966
|
+
const s = await fetch(t, { signal: e.signal });
|
|
2967
|
+
if (clearTimeout(n), !s.ok)
|
|
2968
|
+
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2969
|
+
const r = await s.json();
|
|
3000
2970
|
if (!r || !Array.isArray(r.images))
|
|
3001
2971
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3002
2972
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3003
|
-
} catch (
|
|
3004
|
-
throw clearTimeout(n),
|
|
2973
|
+
} catch (s) {
|
|
2974
|
+
throw clearTimeout(n), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
3005
2975
|
}
|
|
3006
2976
|
}
|
|
3007
2977
|
/**
|
|
@@ -3023,11 +2993,11 @@ class Je {
|
|
|
3023
2993
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3024
2994
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3025
2995
|
try {
|
|
3026
|
-
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout),
|
|
2996
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout), s = await fetch(t, {
|
|
3027
2997
|
method: "HEAD",
|
|
3028
2998
|
signal: e.signal
|
|
3029
2999
|
});
|
|
3030
|
-
return clearTimeout(n),
|
|
3000
|
+
return clearTimeout(n), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
3031
3001
|
} catch (e) {
|
|
3032
3002
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3033
3003
|
}
|
|
@@ -3067,7 +3037,7 @@ class Je {
|
|
|
3067
3037
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
3068
3038
|
}
|
|
3069
3039
|
}
|
|
3070
|
-
class
|
|
3040
|
+
class Xe {
|
|
3071
3041
|
constructor(t) {
|
|
3072
3042
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
3073
3043
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -3081,8 +3051,8 @@ class Ve {
|
|
|
3081
3051
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3082
3052
|
const i = this.loaders.map((e, n) => e.prepare(t).then(() => {
|
|
3083
3053
|
this.log(`Loader ${n} prepared with ${e.imagesLength()} images`);
|
|
3084
|
-
}).catch((
|
|
3085
|
-
console.warn(`Loader ${n} failed to prepare:`,
|
|
3054
|
+
}).catch((s) => {
|
|
3055
|
+
console.warn(`Loader ${n} failed to prepare:`, s);
|
|
3086
3056
|
}));
|
|
3087
3057
|
await Promise.all(i);
|
|
3088
3058
|
for (const e of this.loaders)
|
|
@@ -3124,7 +3094,7 @@ class Ve {
|
|
|
3124
3094
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
3125
3095
|
}
|
|
3126
3096
|
}
|
|
3127
|
-
class
|
|
3097
|
+
class Ve {
|
|
3128
3098
|
/**
|
|
3129
3099
|
* Create a new ImageFilter
|
|
3130
3100
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -3161,7 +3131,7 @@ class Ke {
|
|
|
3161
3131
|
// isAllowedDate(date: Date): boolean
|
|
3162
3132
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
3163
3133
|
}
|
|
3164
|
-
const
|
|
3134
|
+
const Je = `
|
|
3165
3135
|
.fbn-ic-gallery {
|
|
3166
3136
|
position: relative;
|
|
3167
3137
|
width: 100%;
|
|
@@ -3242,37 +3212,46 @@ const Ze = `
|
|
|
3242
3212
|
display: none !important;
|
|
3243
3213
|
}
|
|
3244
3214
|
`;
|
|
3245
|
-
function
|
|
3215
|
+
function Ke() {
|
|
3246
3216
|
if (typeof document > "u") return;
|
|
3247
3217
|
const o = "fbn-ic-functional-styles";
|
|
3248
3218
|
if (document.getElementById(o)) return;
|
|
3249
3219
|
const t = document.createElement("style");
|
|
3250
|
-
t.id = o, t.textContent =
|
|
3220
|
+
t.id = o, t.textContent = Je, document.head.appendChild(t);
|
|
3251
3221
|
}
|
|
3252
|
-
class
|
|
3222
|
+
class Ze {
|
|
3253
3223
|
constructor(t = {}) {
|
|
3254
|
-
this.fullConfig =
|
|
3224
|
+
this.fullConfig = Kt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, 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.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new ee(this.fullConfig.animation), this.layoutEngine = new Me({
|
|
3255
3225
|
layout: this.fullConfig.layout,
|
|
3256
3226
|
image: this.fullConfig.image
|
|
3257
3227
|
}), this.zoomEngine = new ke(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = it(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3258
|
-
const i = this.fullConfig.animation.entry ||
|
|
3259
|
-
this.entryAnimationEngine = new
|
|
3228
|
+
const i = this.fullConfig.animation.entry || L.animation.entry;
|
|
3229
|
+
this.entryAnimationEngine = new ue(
|
|
3260
3230
|
i,
|
|
3261
3231
|
this.fullConfig.layout.algorithm
|
|
3262
3232
|
);
|
|
3263
3233
|
const e = this.fullConfig.animation.idle;
|
|
3264
|
-
e && e.type !== "none" ? this.idleAnimationEngine = new
|
|
3234
|
+
e && e.type !== "none" ? this.idleAnimationEngine = new fe(
|
|
3265
3235
|
e,
|
|
3266
3236
|
i.timing?.duration ?? 600
|
|
3267
3237
|
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((n) => {
|
|
3268
3238
|
this.idleAnimationEngine?.resumeForImage(n);
|
|
3269
|
-
const
|
|
3239
|
+
const s = n, r = this.imageElements.indexOf(s);
|
|
3240
|
+
if (this.callbacks.onImageUnfocus && r !== -1) {
|
|
3241
|
+
const a = this.imageLoader.imageURLs(), c = {
|
|
3242
|
+
element: s,
|
|
3243
|
+
index: r,
|
|
3244
|
+
url: a[r] ?? "",
|
|
3245
|
+
layout: this.imageLayouts[r]
|
|
3246
|
+
};
|
|
3247
|
+
this.callbacks.onImageUnfocus(c);
|
|
3248
|
+
}
|
|
3270
3249
|
requestAnimationFrame(() => {
|
|
3271
|
-
if (
|
|
3272
|
-
const
|
|
3273
|
-
if (
|
|
3274
|
-
const
|
|
3275
|
-
st(
|
|
3250
|
+
if (s.matches(":hover") && this.fullConfig.styling?.hover) {
|
|
3251
|
+
const a = this.imageElements.indexOf(s);
|
|
3252
|
+
if (a !== -1) {
|
|
3253
|
+
const c = s.offsetHeight, d = s.cachedRenderedWidth;
|
|
3254
|
+
st(s, this.fullConfig.styling.hover, c, d), et(s, this.hoverClassName), this.hoveredImage = { element: s, layout: this.imageLayouts[a] };
|
|
3276
3255
|
}
|
|
3277
3256
|
}
|
|
3278
3257
|
});
|
|
@@ -3283,7 +3262,7 @@ class ti {
|
|
|
3283
3262
|
*/
|
|
3284
3263
|
createImageFilter() {
|
|
3285
3264
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
3286
|
-
return new
|
|
3265
|
+
return new Ve(t);
|
|
3287
3266
|
}
|
|
3288
3267
|
/**
|
|
3289
3268
|
* Create appropriate image loader based on config
|
|
@@ -3294,7 +3273,7 @@ class ti {
|
|
|
3294
3273
|
if (!t || t.length === 0)
|
|
3295
3274
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.\n Example: imageCloud({ container: 'id', images: ['https://...'] })");
|
|
3296
3275
|
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
3297
|
-
return e.length === 1 ? e[0] : new
|
|
3276
|
+
return e.length === 1 ? e[0] : new Xe({
|
|
3298
3277
|
loaders: e,
|
|
3299
3278
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
3300
3279
|
});
|
|
@@ -3312,14 +3291,14 @@ class ti {
|
|
|
3312
3291
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3313
3292
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3314
3293
|
};
|
|
3315
|
-
return new
|
|
3294
|
+
return new Ye(n);
|
|
3316
3295
|
} else if ("googleDrive" in t) {
|
|
3317
3296
|
const e = t.googleDrive, n = {
|
|
3318
3297
|
...e,
|
|
3319
3298
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3320
3299
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3321
3300
|
};
|
|
3322
|
-
return new
|
|
3301
|
+
return new qe(n);
|
|
3323
3302
|
} else
|
|
3324
3303
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3325
3304
|
}
|
|
@@ -3328,7 +3307,7 @@ class ti {
|
|
|
3328
3307
|
*/
|
|
3329
3308
|
async init() {
|
|
3330
3309
|
try {
|
|
3331
|
-
if (
|
|
3310
|
+
if (Ke(), this.containerRef)
|
|
3332
3311
|
this.containerEl = this.containerRef;
|
|
3333
3312
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3334
3313
|
throw new Error(`Container "#${this.containerId}" not found. Ensure an element with id="${this.containerId}" exists in the DOM before calling imageCloud().`);
|
|
@@ -3337,7 +3316,7 @@ class ti {
|
|
|
3337
3316
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3338
3317
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3339
3318
|
onDragEnd: (t) => {
|
|
3340
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
3319
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, We);
|
|
3341
3320
|
}
|
|
3342
3321
|
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3343
3322
|
} catch (t) {
|
|
@@ -3444,13 +3423,13 @@ class ti {
|
|
|
3444
3423
|
this.showError("No images found."), this.showLoading(!1);
|
|
3445
3424
|
return;
|
|
3446
3425
|
}
|
|
3447
|
-
const e = this.getContainerBounds(), n = this.getImageHeight(),
|
|
3426
|
+
const e = this.getContainerBounds(), n = this.getImageHeight(), s = window.innerWidth;
|
|
3448
3427
|
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3449
3428
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3450
3429
|
e,
|
|
3451
3430
|
t,
|
|
3452
3431
|
n,
|
|
3453
|
-
|
|
3432
|
+
s
|
|
3454
3433
|
);
|
|
3455
3434
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3456
3435
|
} catch (t) {
|
|
@@ -3467,62 +3446,135 @@ class ti {
|
|
|
3467
3446
|
if (!this.containerEl) return;
|
|
3468
3447
|
const e = this.getContainerBounds();
|
|
3469
3448
|
this.currentImageHeight = i;
|
|
3470
|
-
const n = this.loadGeneration,
|
|
3471
|
-
this.imageLayouts =
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3449
|
+
const n = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3450
|
+
if (this.imageLayouts = s, this.callbacks.onLayoutComplete) {
|
|
3451
|
+
const l = {
|
|
3452
|
+
layouts: [...s],
|
|
3453
|
+
// shallow copy — caller should not mutate
|
|
3454
|
+
containerBounds: { ...e },
|
|
3455
|
+
algorithm: this.fullConfig.layout.algorithm,
|
|
3456
|
+
imageCount: t.length
|
|
3457
|
+
};
|
|
3458
|
+
this.callbacks.onLayoutComplete(l);
|
|
3459
|
+
}
|
|
3460
|
+
this.displayQueue = [];
|
|
3461
|
+
let r = 0, a = 0, c = 0, d = 0, u = !1;
|
|
3462
|
+
const f = /* @__PURE__ */ new Map(), m = () => {
|
|
3463
|
+
if (u || n !== this.loadGeneration || !this.callbacks.onGalleryReady) return;
|
|
3464
|
+
u = !0;
|
|
3465
|
+
const l = {
|
|
3466
|
+
totalImages: t.length,
|
|
3467
|
+
failedImages: c,
|
|
3468
|
+
loadDuration: d > 0 ? performance.now() - d : 0
|
|
3469
|
+
};
|
|
3470
|
+
this.callbacks.onGalleryReady(l);
|
|
3471
|
+
}, p = () => {
|
|
3472
|
+
r >= t.length && this.displayQueue.length === 0 && m();
|
|
3473
|
+
}, E = (l) => {
|
|
3474
|
+
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(async () => {
|
|
3475
|
+
l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1";
|
|
3476
|
+
const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), x = parseFloat(l.dataset.startY || "0"), w = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), O = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), k = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
|
|
3477
|
+
if (this.callbacks.onEntryStart && h) {
|
|
3478
|
+
const S = {
|
|
3484
3479
|
element: l,
|
|
3485
|
-
|
|
3486
|
-
|
|
3480
|
+
index: g,
|
|
3481
|
+
totalImages: this.imageLayouts.length,
|
|
3482
|
+
layout: h,
|
|
3483
|
+
from: { x: y, y: x, rotation: T, scale: O },
|
|
3484
|
+
to: { x: w, y: F, rotation: R, scale: M },
|
|
3485
|
+
startTime: I,
|
|
3486
|
+
duration: b.duration
|
|
3487
|
+
};
|
|
3488
|
+
this.callbacks.onEntryStart(S);
|
|
3489
|
+
}
|
|
3490
|
+
if (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || l.dataset.startRotation !== l.dataset.rotation || l.dataset.startScale !== l.dataset.scale)
|
|
3491
|
+
le({
|
|
3492
|
+
element: l,
|
|
3493
|
+
startPosition: { x: y, y: x },
|
|
3494
|
+
endPosition: { x: w, y: F },
|
|
3487
3495
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3488
|
-
duration:
|
|
3489
|
-
imageWidth:
|
|
3490
|
-
imageHeight:
|
|
3491
|
-
rotation:
|
|
3492
|
-
scale:
|
|
3496
|
+
duration: b.duration,
|
|
3497
|
+
imageWidth: k,
|
|
3498
|
+
imageHeight: D,
|
|
3499
|
+
rotation: R,
|
|
3500
|
+
scale: M,
|
|
3493
3501
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3494
|
-
startRotation:
|
|
3502
|
+
startRotation: T,
|
|
3495
3503
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3496
|
-
startScale:
|
|
3504
|
+
startScale: O,
|
|
3505
|
+
onProgress: this.callbacks.onEntryProgress && h ? (S, _, $) => {
|
|
3506
|
+
const A = {
|
|
3507
|
+
element: l,
|
|
3508
|
+
index: g,
|
|
3509
|
+
totalImages: this.imageLayouts.length,
|
|
3510
|
+
layout: h,
|
|
3511
|
+
from: { x: y, y: x, rotation: T, scale: O },
|
|
3512
|
+
to: { x: w, y: F, rotation: R, scale: M },
|
|
3513
|
+
startTime: I,
|
|
3514
|
+
duration: b.duration,
|
|
3515
|
+
progress: S,
|
|
3516
|
+
rawProgress: S,
|
|
3517
|
+
elapsed: _,
|
|
3518
|
+
current: $
|
|
3519
|
+
};
|
|
3520
|
+
this.callbacks.onEntryProgress(A);
|
|
3521
|
+
} : void 0,
|
|
3522
|
+
onComplete: h ? () => {
|
|
3523
|
+
if (this.callbacks.onEntryComplete) {
|
|
3524
|
+
const S = {
|
|
3525
|
+
element: l,
|
|
3526
|
+
index: g,
|
|
3527
|
+
layout: h,
|
|
3528
|
+
startTime: I,
|
|
3529
|
+
endTime: performance.now(),
|
|
3530
|
+
duration: b.duration
|
|
3531
|
+
};
|
|
3532
|
+
this.callbacks.onEntryComplete(S);
|
|
3533
|
+
}
|
|
3534
|
+
} : void 0
|
|
3497
3535
|
});
|
|
3498
|
-
|
|
3499
|
-
const
|
|
3500
|
-
l.style.transform =
|
|
3536
|
+
else {
|
|
3537
|
+
const S = l.dataset.finalTransform || "";
|
|
3538
|
+
if (l.style.transform = S, this.callbacks.onEntryComplete && h) {
|
|
3539
|
+
const _ = ($) => {
|
|
3540
|
+
if ($.propertyName !== "transform") return;
|
|
3541
|
+
l.removeEventListener("transitionend", _);
|
|
3542
|
+
const A = {
|
|
3543
|
+
element: l,
|
|
3544
|
+
index: g,
|
|
3545
|
+
layout: h,
|
|
3546
|
+
startTime: I,
|
|
3547
|
+
endTime: performance.now(),
|
|
3548
|
+
duration: b.duration
|
|
3549
|
+
};
|
|
3550
|
+
this.callbacks.onEntryComplete(A);
|
|
3551
|
+
};
|
|
3552
|
+
l.addEventListener("transitionend", _);
|
|
3553
|
+
}
|
|
3501
3554
|
}
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
console.log(`Image ${h} final state:`, {
|
|
3555
|
+
if (this.fullConfig.config.debug?.enabled && g < 3) {
|
|
3556
|
+
const S = l.dataset.finalTransform || "";
|
|
3557
|
+
console.log(`Image ${g} final state:`, {
|
|
3506
3558
|
left: l.style.left,
|
|
3507
3559
|
top: l.style.top,
|
|
3508
3560
|
width: l.style.width,
|
|
3509
3561
|
height: l.style.height,
|
|
3510
3562
|
computedWidth: l.offsetWidth,
|
|
3511
3563
|
computedHeight: l.offsetHeight,
|
|
3512
|
-
transform:
|
|
3564
|
+
transform: S,
|
|
3513
3565
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3514
3566
|
});
|
|
3515
3567
|
}
|
|
3516
3568
|
if (this.idleAnimationEngine) {
|
|
3517
|
-
const
|
|
3518
|
-
this.idleAnimationEngine.register(l,
|
|
3569
|
+
const S = this.entryAnimationEngine.getTiming().duration;
|
|
3570
|
+
this.idleAnimationEngine.register(l, g, this.imageElements.length, S);
|
|
3519
3571
|
}
|
|
3520
|
-
}), r
|
|
3521
|
-
},
|
|
3572
|
+
}), r++, p());
|
|
3573
|
+
}, v = () => {
|
|
3522
3574
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3523
3575
|
for (; this.displayQueue.length > 0; ) {
|
|
3524
3576
|
const l = this.displayQueue.shift();
|
|
3525
|
-
l &&
|
|
3577
|
+
l && E(l);
|
|
3526
3578
|
}
|
|
3527
3579
|
return;
|
|
3528
3580
|
}
|
|
@@ -3533,77 +3585,144 @@ class ti {
|
|
|
3533
3585
|
}
|
|
3534
3586
|
if (this.displayQueue.length > 0) {
|
|
3535
3587
|
const l = this.displayQueue.shift();
|
|
3536
|
-
l &&
|
|
3588
|
+
l && E(l);
|
|
3537
3589
|
}
|
|
3538
|
-
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3590
|
+
r >= t.length && this.displayQueue.length === 0 && (this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null), m());
|
|
3539
3591
|
}, this.fullConfig.animation.queue.interval);
|
|
3540
3592
|
};
|
|
3541
3593
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3542
|
-
const l = new IntersectionObserver((
|
|
3543
|
-
|
|
3544
|
-
h.isIntersecting && (
|
|
3594
|
+
const l = new IntersectionObserver((g) => {
|
|
3595
|
+
g.forEach((h) => {
|
|
3596
|
+
h.isIntersecting && (v(), l.disconnect());
|
|
3545
3597
|
});
|
|
3546
3598
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3547
3599
|
l.observe(this.containerEl);
|
|
3548
3600
|
} else
|
|
3549
|
-
|
|
3550
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()),
|
|
3601
|
+
v();
|
|
3602
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), s.forEach((l, g) => {
|
|
3551
3603
|
const h = document.createElement("div");
|
|
3552
3604
|
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";
|
|
3553
|
-
const
|
|
3554
|
-
h.style.left = `${
|
|
3555
|
-
})), t.forEach((l,
|
|
3605
|
+
const b = l.x, I = l.y;
|
|
3606
|
+
h.style.left = `${b - 6}px`, h.style.top = `${I - 6}px`, h.title = `Image ${g}: center (${Math.round(b)}, ${Math.round(I)})`, this.containerEl.appendChild(h);
|
|
3607
|
+
})), t.forEach((l, g) => {
|
|
3556
3608
|
const h = document.createElement("img");
|
|
3557
|
-
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(
|
|
3558
|
-
const
|
|
3559
|
-
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${
|
|
3560
|
-
if (this.hoveredImage = { element: h, layout:
|
|
3561
|
-
const
|
|
3562
|
-
st(h, this.fullConfig.styling?.hover, i,
|
|
3609
|
+
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g), h.dataset.createdFlag = "true";
|
|
3610
|
+
const b = s[g];
|
|
3611
|
+
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${b.x}px`, h.style.top = `${b.y}px`, b.zIndex && (h.style.zIndex = String(b.zIndex)), et(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3612
|
+
if (this.hoveredImage = { element: h, layout: b }, !this.zoomEngine.isInvolved(h)) {
|
|
3613
|
+
const y = h.cachedRenderedWidth;
|
|
3614
|
+
st(h, this.fullConfig.styling?.hover, i, y), et(h, this.hoverClassName);
|
|
3615
|
+
}
|
|
3616
|
+
if (this.callbacks.onImageHover) {
|
|
3617
|
+
const y = { element: h, index: g, url: l, layout: b };
|
|
3618
|
+
this.callbacks.onImageHover(y);
|
|
3563
3619
|
}
|
|
3564
3620
|
}), h.addEventListener("mouseleave", () => {
|
|
3565
3621
|
if (this.hoveredImage = null, !this.zoomEngine.isInvolved(h)) {
|
|
3566
|
-
const
|
|
3567
|
-
st(h, this.fullConfig.styling?.default, i,
|
|
3622
|
+
const y = h.cachedRenderedWidth;
|
|
3623
|
+
st(h, this.fullConfig.styling?.default, i, y), pt(h, this.hoverClassName), et(h, this.defaultClassName);
|
|
3624
|
+
}
|
|
3625
|
+
if (this.callbacks.onImageUnhover) {
|
|
3626
|
+
const y = { element: h, index: g, url: l, layout: b };
|
|
3627
|
+
this.callbacks.onImageUnhover(y);
|
|
3568
3628
|
}
|
|
3569
|
-
}), h.addEventListener("click", (
|
|
3570
|
-
|
|
3629
|
+
}), h.addEventListener("click", (y) => {
|
|
3630
|
+
y.stopPropagation(), this.handleImageClick(h, b);
|
|
3571
3631
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3572
3632
|
if (n !== this.loadGeneration)
|
|
3573
3633
|
return;
|
|
3574
|
-
const
|
|
3575
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${
|
|
3576
|
-
const
|
|
3577
|
-
|
|
3578
|
-
|
|
3634
|
+
const y = h.naturalWidth / h.naturalHeight, x = i * y;
|
|
3635
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${g}] Called with imageHeight=${i}, renderedWidth=${x}`), h.style.width = `${x}px`, h.cachedRenderedWidth = x, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, x);
|
|
3636
|
+
const w = { x: b.x, y: b.y }, F = { width: x, height: i }, R = this.entryAnimationEngine.calculateStartPosition(
|
|
3637
|
+
w,
|
|
3638
|
+
F,
|
|
3579
3639
|
e,
|
|
3580
|
-
|
|
3640
|
+
g,
|
|
3581
3641
|
t.length
|
|
3582
|
-
),
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3642
|
+
), M = this.entryAnimationEngine.calculateStartRotation(b.rotation), T = this.entryAnimationEngine.calculateStartScale(b.scale), O = this.entryAnimationEngine.buildFinalTransform(
|
|
3643
|
+
b.rotation,
|
|
3644
|
+
b.scale,
|
|
3645
|
+
x,
|
|
3586
3646
|
i
|
|
3587
|
-
),
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3647
|
+
), k = this.entryAnimationEngine.buildStartTransform(
|
|
3648
|
+
R,
|
|
3649
|
+
w,
|
|
3650
|
+
b.rotation,
|
|
3651
|
+
b.scale,
|
|
3652
|
+
x,
|
|
3593
3653
|
i,
|
|
3594
|
-
|
|
3595
|
-
|
|
3654
|
+
M,
|
|
3655
|
+
T
|
|
3596
3656
|
);
|
|
3597
|
-
this.fullConfig.config.debug?.enabled &&
|
|
3598
|
-
finalPosition:
|
|
3599
|
-
imageSize:
|
|
3600
|
-
left:
|
|
3601
|
-
top:
|
|
3602
|
-
finalTransform:
|
|
3603
|
-
renderedWidth:
|
|
3657
|
+
if (this.fullConfig.config.debug?.enabled && g < 3 && console.log(`Image ${g}:`, {
|
|
3658
|
+
finalPosition: w,
|
|
3659
|
+
imageSize: F,
|
|
3660
|
+
left: b.x,
|
|
3661
|
+
top: b.y,
|
|
3662
|
+
finalTransform: O,
|
|
3663
|
+
renderedWidth: x,
|
|
3604
3664
|
renderedHeight: i
|
|
3605
|
-
}), h.style.transform =
|
|
3606
|
-
|
|
3665
|
+
}), h.style.transform = k, h.dataset.finalTransform = O, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(w.x), h.dataset.endY = String(w.y), h.dataset.imageWidth = String(x), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
|
|
3666
|
+
const D = {
|
|
3667
|
+
element: h,
|
|
3668
|
+
url: l,
|
|
3669
|
+
index: g,
|
|
3670
|
+
totalImages: t.length,
|
|
3671
|
+
loadTime: performance.now() - (f.get(g) ?? performance.now())
|
|
3672
|
+
};
|
|
3673
|
+
this.callbacks.onImageLoaded(D);
|
|
3674
|
+
}
|
|
3675
|
+
if (this.callbacks.onLoadProgress) {
|
|
3676
|
+
const D = {
|
|
3677
|
+
loaded: a,
|
|
3678
|
+
failed: c,
|
|
3679
|
+
total: t.length,
|
|
3680
|
+
percent: (a + c) / t.length * 100
|
|
3681
|
+
};
|
|
3682
|
+
this.callbacks.onLoadProgress(D);
|
|
3683
|
+
}
|
|
3684
|
+
this.displayQueue.push(h);
|
|
3685
|
+
};
|
|
3686
|
+
const I = () => {
|
|
3687
|
+
if (n === this.loadGeneration) {
|
|
3688
|
+
if (c++, this.callbacks.onImageError) {
|
|
3689
|
+
const y = { url: l, index: g, totalImages: t.length };
|
|
3690
|
+
this.callbacks.onImageError(y);
|
|
3691
|
+
}
|
|
3692
|
+
if (this.callbacks.onLoadProgress) {
|
|
3693
|
+
const y = {
|
|
3694
|
+
loaded: a,
|
|
3695
|
+
failed: c,
|
|
3696
|
+
total: t.length,
|
|
3697
|
+
percent: (a + c) / t.length * 100
|
|
3698
|
+
};
|
|
3699
|
+
this.callbacks.onLoadProgress(y);
|
|
3700
|
+
}
|
|
3701
|
+
r++, p();
|
|
3702
|
+
}
|
|
3703
|
+
};
|
|
3704
|
+
h.onerror = () => I(), (async () => {
|
|
3705
|
+
let y = l;
|
|
3706
|
+
if (this.callbacks.onBeforeImageLoad) {
|
|
3707
|
+
const x = { url: l, index: g, totalImages: t.length }, w = await this.callbacks.onBeforeImageLoad(x);
|
|
3708
|
+
if (w)
|
|
3709
|
+
if (w.fetch !== void 0) {
|
|
3710
|
+
const F = w.url ?? l;
|
|
3711
|
+
try {
|
|
3712
|
+
const M = await (await fetch(F, w.fetch)).blob(), T = URL.createObjectURL(M);
|
|
3713
|
+
y = T;
|
|
3714
|
+
const O = h.onload;
|
|
3715
|
+
h.onload = (k) => {
|
|
3716
|
+
URL.revokeObjectURL(T), O?.call(h, k);
|
|
3717
|
+
};
|
|
3718
|
+
} catch {
|
|
3719
|
+
I();
|
|
3720
|
+
return;
|
|
3721
|
+
}
|
|
3722
|
+
} else w.url && (y = w.url);
|
|
3723
|
+
}
|
|
3724
|
+
d === 0 && (d = performance.now()), f.set(g, performance.now()), h.src = y;
|
|
3725
|
+
})();
|
|
3607
3726
|
});
|
|
3608
3727
|
}
|
|
3609
3728
|
async handleImageClick(t, i) {
|
|
@@ -3616,8 +3735,16 @@ class ti {
|
|
|
3616
3735
|
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator();
|
|
3617
3736
|
else {
|
|
3618
3737
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3619
|
-
const
|
|
3620
|
-
this.currentFocusIndex =
|
|
3738
|
+
const s = t.dataset.imageId;
|
|
3739
|
+
if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
|
|
3740
|
+
const r = this.imageLoader.imageURLs(), a = {
|
|
3741
|
+
element: t,
|
|
3742
|
+
index: this.currentFocusIndex,
|
|
3743
|
+
url: r[this.currentFocusIndex] ?? "",
|
|
3744
|
+
layout: i
|
|
3745
|
+
};
|
|
3746
|
+
this.callbacks.onImageFocus(a);
|
|
3747
|
+
}
|
|
3621
3748
|
}
|
|
3622
3749
|
}
|
|
3623
3750
|
/**
|
|
@@ -3660,38 +3787,38 @@ class ti {
|
|
|
3660
3787
|
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.prevButtonElAutoCreated && this.prevButtonEl && (this.prevButtonEl.remove(), this.prevButtonEl = null), this.nextButtonElAutoCreated && this.nextButtonEl && (this.nextButtonEl.remove(), this.nextButtonEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy(), this.idleAnimationEngine?.stopAll(), this.idleAnimationEngine = null;
|
|
3661
3788
|
}
|
|
3662
3789
|
}
|
|
3663
|
-
function
|
|
3790
|
+
function Qe() {
|
|
3664
3791
|
if (typeof document > "u") return;
|
|
3665
3792
|
const o = "fbn-ic-styles";
|
|
3666
3793
|
if (document.getElementById(o)) return;
|
|
3667
3794
|
const t = document.createElement("style");
|
|
3668
3795
|
t.id = o, t.textContent = Ut, document.head.appendChild(t);
|
|
3669
3796
|
}
|
|
3670
|
-
|
|
3671
|
-
function
|
|
3797
|
+
Qe();
|
|
3798
|
+
function ti() {
|
|
3672
3799
|
if (typeof document > "u") {
|
|
3673
3800
|
console.warn("ImageCloud: Document not available (not in browser environment)");
|
|
3674
3801
|
return;
|
|
3675
3802
|
}
|
|
3676
3803
|
const o = () => {
|
|
3677
|
-
const t = document.querySelectorAll("[data-image-cloud]
|
|
3804
|
+
const t = document.querySelectorAll("[data-image-cloud]");
|
|
3678
3805
|
t.length !== 0 && t.forEach((i) => {
|
|
3679
3806
|
const e = i;
|
|
3680
3807
|
if (!e.id) {
|
|
3681
3808
|
console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
|
|
3682
3809
|
return;
|
|
3683
3810
|
}
|
|
3684
|
-
const n = e.dataset.config
|
|
3685
|
-
let
|
|
3811
|
+
const n = e.dataset.config;
|
|
3812
|
+
let s;
|
|
3686
3813
|
if (n)
|
|
3687
3814
|
try {
|
|
3688
|
-
const
|
|
3689
|
-
|
|
3815
|
+
const a = JSON.parse(n);
|
|
3816
|
+
s = {
|
|
3690
3817
|
container: e.id,
|
|
3691
|
-
...
|
|
3818
|
+
...a
|
|
3692
3819
|
};
|
|
3693
|
-
} catch (
|
|
3694
|
-
console.error(`ImageCloud: Failed to parse configuration JSON for #${e.id}:`,
|
|
3820
|
+
} catch (a) {
|
|
3821
|
+
console.error(`ImageCloud: Failed to parse configuration JSON for #${e.id}:`, a);
|
|
3695
3822
|
return;
|
|
3696
3823
|
}
|
|
3697
3824
|
else {
|
|
@@ -3699,17 +3826,16 @@ function ii() {
|
|
|
3699
3826
|
Example: data-config='{"images":["https://..."]}'`);
|
|
3700
3827
|
return;
|
|
3701
3828
|
}
|
|
3702
|
-
new
|
|
3703
|
-
console.error("ImageCloud initialization failed:",
|
|
3829
|
+
new Ze(s).init().catch((a) => {
|
|
3830
|
+
console.error("ImageCloud initialization failed:", a);
|
|
3704
3831
|
});
|
|
3705
3832
|
});
|
|
3706
3833
|
};
|
|
3707
3834
|
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", o) : o();
|
|
3708
3835
|
}
|
|
3709
|
-
|
|
3836
|
+
ti();
|
|
3710
3837
|
export {
|
|
3711
|
-
|
|
3712
|
-
ti as
|
|
3713
|
-
ii as autoInitialize
|
|
3838
|
+
Ze as ImageCloud,
|
|
3839
|
+
ti as autoInitialize
|
|
3714
3840
|
};
|
|
3715
3841
|
//# sourceMappingURL=image-cloud-auto-init.js.map
|