@frybynite/image-cloud 0.9.2 → 0.9.3
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 +298 -315
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +671 -688
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +2 -2
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +7 -17
- package/dist/react.d.ts +7 -17
- package/dist/react.js +565 -582
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +7 -17
- package/dist/vue.js +675 -692
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +7 -17
- package/dist/web-component.js +363 -380
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/vue.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as Ht, ref as It, onMounted as
|
|
1
|
+
import { defineComponent as Ht, ref as It, onMounted as Nt, onUnmounted as kt, watch as jt, h as Wt } from "vue";
|
|
2
2
|
const mt = Object.freeze({
|
|
3
3
|
none: "none",
|
|
4
4
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
@@ -19,7 +19,7 @@ const mt = Object.freeze({
|
|
|
19
19
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
20
20
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
21
21
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
22
|
-
}),
|
|
22
|
+
}), bt = Object.freeze({
|
|
23
23
|
type: "linear"
|
|
24
24
|
}), vt = Object.freeze({
|
|
25
25
|
mode: "none"
|
|
@@ -95,7 +95,7 @@ const mt = Object.freeze({
|
|
|
95
95
|
enabled: !1,
|
|
96
96
|
centers: !1,
|
|
97
97
|
loaders: !1
|
|
98
|
-
}), Jt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Kt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Zt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Qt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }),
|
|
98
|
+
}), Jt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Kt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Zt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Qt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }), R = Object.freeze({
|
|
99
99
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
100
100
|
loaders: [],
|
|
101
101
|
// Shared loader settings and debug config
|
|
@@ -156,7 +156,7 @@ const mt = Object.freeze({
|
|
|
156
156
|
}),
|
|
157
157
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
158
158
|
// smooth deceleration
|
|
159
|
-
path:
|
|
159
|
+
path: bt,
|
|
160
160
|
rotation: vt,
|
|
161
161
|
scale: wt
|
|
162
162
|
}),
|
|
@@ -179,68 +179,56 @@ const mt = Object.freeze({
|
|
|
179
179
|
}),
|
|
180
180
|
dragging: !0
|
|
181
181
|
}),
|
|
182
|
-
//
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
mobile: 768,
|
|
187
|
-
tablet: void 0,
|
|
188
|
-
// STUB: Not implemented yet
|
|
189
|
-
desktop: void 0
|
|
190
|
-
// STUB: Not implemented yet
|
|
191
|
-
}),
|
|
192
|
-
mobileDetection: () => typeof window > "u" ? !1 : window.innerWidth <= 768
|
|
193
|
-
}),
|
|
194
|
-
ui: Object.freeze({
|
|
195
|
-
showLoadingSpinner: !1,
|
|
196
|
-
showImageCounter: !1
|
|
197
|
-
})
|
|
182
|
+
// UI configuration
|
|
183
|
+
ui: Object.freeze({
|
|
184
|
+
showLoadingSpinner: !1,
|
|
185
|
+
showImageCounter: !1
|
|
198
186
|
}),
|
|
199
187
|
// Image styling
|
|
200
188
|
styling: Ft
|
|
201
189
|
});
|
|
202
|
-
function Z(
|
|
203
|
-
if (!
|
|
204
|
-
if (!t) return { ...
|
|
205
|
-
const i = { ...
|
|
206
|
-
return t.border !== void 0 && (i.border = { ...
|
|
190
|
+
function Z(n, t) {
|
|
191
|
+
if (!n) return t || {};
|
|
192
|
+
if (!t) return { ...n };
|
|
193
|
+
const i = { ...n };
|
|
194
|
+
return t.border !== void 0 && (i.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...n.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
207
195
|
}
|
|
208
|
-
function te(
|
|
209
|
-
if (!t) return { ...
|
|
210
|
-
const i = Z(
|
|
211
|
-
Z(i,
|
|
196
|
+
function te(n, t) {
|
|
197
|
+
if (!t) return { ...n };
|
|
198
|
+
const i = Z(n.default, t.default), e = Z(
|
|
199
|
+
Z(i, n.hover),
|
|
212
200
|
t.hover
|
|
213
|
-
),
|
|
214
|
-
Z(i,
|
|
201
|
+
), o = Z(
|
|
202
|
+
Z(i, n.focused),
|
|
215
203
|
t.focused
|
|
216
204
|
);
|
|
217
205
|
return {
|
|
218
206
|
default: i,
|
|
219
207
|
hover: e,
|
|
220
|
-
focused:
|
|
208
|
+
focused: o
|
|
221
209
|
};
|
|
222
210
|
}
|
|
223
|
-
function ee(
|
|
224
|
-
if (!t) return { ...
|
|
225
|
-
const i = { ...
|
|
211
|
+
function ee(n, t) {
|
|
212
|
+
if (!t) return { ...n };
|
|
213
|
+
const i = { ...n };
|
|
226
214
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
227
|
-
...
|
|
215
|
+
...n.sizing,
|
|
228
216
|
...t.sizing
|
|
229
217
|
}, t.sizing.variance)) {
|
|
230
|
-
const e = t.sizing.variance,
|
|
231
|
-
i.sizing.variance = { min:
|
|
218
|
+
const e = t.sizing.variance, o = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : n.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : n.sizing?.variance?.max ?? 1;
|
|
219
|
+
i.sizing.variance = { min: o, max: a };
|
|
232
220
|
}
|
|
233
221
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
234
|
-
...
|
|
222
|
+
...n.rotation,
|
|
235
223
|
...t.rotation
|
|
236
224
|
}, t.rotation.range)) {
|
|
237
|
-
const e = t.rotation.range,
|
|
238
|
-
i.rotation.range = { min:
|
|
225
|
+
const e = t.rotation.range, o = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : n.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : n.rotation?.range?.max ?? 15;
|
|
226
|
+
i.rotation.range = { min: o, max: a };
|
|
239
227
|
}
|
|
240
228
|
return i;
|
|
241
229
|
}
|
|
242
|
-
function ie(
|
|
243
|
-
const t =
|
|
230
|
+
function ie(n) {
|
|
231
|
+
const t = n.layout?.rotation;
|
|
244
232
|
if (t && "enabled" in t)
|
|
245
233
|
return {
|
|
246
234
|
rotation: {
|
|
@@ -249,8 +237,8 @@ function ie(o) {
|
|
|
249
237
|
}
|
|
250
238
|
};
|
|
251
239
|
}
|
|
252
|
-
function
|
|
253
|
-
const t =
|
|
240
|
+
function oe(n) {
|
|
241
|
+
const t = n.layout?.sizing?.variance;
|
|
254
242
|
if (t)
|
|
255
243
|
return {
|
|
256
244
|
sizing: {
|
|
@@ -260,95 +248,90 @@ function ne(o) {
|
|
|
260
248
|
}
|
|
261
249
|
};
|
|
262
250
|
}
|
|
263
|
-
function
|
|
264
|
-
const t = ie(
|
|
265
|
-
let e =
|
|
251
|
+
function ne(n = {}) {
|
|
252
|
+
const t = ie(n), i = oe(n);
|
|
253
|
+
let e = n.image;
|
|
266
254
|
(t || i) && (e = {
|
|
267
255
|
...i || {},
|
|
268
256
|
...t || {},
|
|
269
257
|
...e
|
|
270
|
-
}, e.rotation && t?.rotation &&
|
|
258
|
+
}, e.rotation && t?.rotation && n.image?.rotation && (e.rotation = {
|
|
271
259
|
...t.rotation,
|
|
272
|
-
...
|
|
260
|
+
...n.image.rotation
|
|
273
261
|
}));
|
|
274
|
-
const
|
|
275
|
-
|
|
262
|
+
const o = [...n.loaders ?? []];
|
|
263
|
+
n.images && n.images.length > 0 && o.unshift({
|
|
276
264
|
static: {
|
|
277
|
-
sources: [{ urls:
|
|
265
|
+
sources: [{ urls: n.images }]
|
|
278
266
|
}
|
|
279
267
|
});
|
|
280
268
|
const r = {
|
|
281
269
|
loaders: {
|
|
282
270
|
...Ot,
|
|
283
|
-
...
|
|
271
|
+
...n.config?.loaders ?? {}
|
|
284
272
|
}
|
|
285
273
|
}, s = {
|
|
286
|
-
loaders:
|
|
274
|
+
loaders: o,
|
|
287
275
|
config: r,
|
|
288
276
|
image: ee(zt, e),
|
|
289
|
-
layout: { ...
|
|
290
|
-
animation: { ...
|
|
291
|
-
interaction: { ...
|
|
292
|
-
|
|
293
|
-
styling: te(Ft,
|
|
277
|
+
layout: { ...R.layout },
|
|
278
|
+
animation: { ...R.animation },
|
|
279
|
+
interaction: { ...R.interaction },
|
|
280
|
+
ui: { ...R.ui },
|
|
281
|
+
styling: te(Ft, n.styling)
|
|
294
282
|
};
|
|
295
|
-
|
|
296
|
-
...
|
|
297
|
-
...
|
|
298
|
-
},
|
|
299
|
-
...
|
|
300
|
-
mobile:
|
|
301
|
-
tablet:
|
|
302
|
-
}),
|
|
303
|
-
...
|
|
304
|
-
...
|
|
305
|
-
})),
|
|
306
|
-
...
|
|
307
|
-
...
|
|
308
|
-
},
|
|
309
|
-
...
|
|
310
|
-
...
|
|
311
|
-
}),
|
|
312
|
-
...
|
|
313
|
-
...
|
|
314
|
-
}),
|
|
315
|
-
...
|
|
316
|
-
...
|
|
317
|
-
start:
|
|
318
|
-
...
|
|
319
|
-
...
|
|
320
|
-
circular:
|
|
321
|
-
} :
|
|
322
|
-
timing:
|
|
323
|
-
path:
|
|
324
|
-
rotation:
|
|
325
|
-
scale:
|
|
326
|
-
}),
|
|
283
|
+
n.layout && (s.layout = {
|
|
284
|
+
...R.layout,
|
|
285
|
+
...n.layout
|
|
286
|
+
}, n.layout.responsive && (s.layout.responsive = {
|
|
287
|
+
...R.layout.responsive,
|
|
288
|
+
mobile: n.layout.responsive.mobile ? { ...R.layout.responsive.mobile, ...n.layout.responsive.mobile } : R.layout.responsive.mobile,
|
|
289
|
+
tablet: n.layout.responsive.tablet ? { ...R.layout.responsive.tablet, ...n.layout.responsive.tablet } : R.layout.responsive.tablet
|
|
290
|
+
}), n.layout.spacing && (s.layout.spacing = {
|
|
291
|
+
...R.layout.spacing,
|
|
292
|
+
...n.layout.spacing
|
|
293
|
+
})), n.animation && (s.animation = {
|
|
294
|
+
...R.animation,
|
|
295
|
+
...n.animation
|
|
296
|
+
}, n.animation.easing && (s.animation.easing = {
|
|
297
|
+
...R.animation.easing,
|
|
298
|
+
...n.animation.easing
|
|
299
|
+
}), n.animation.queue && (s.animation.queue = {
|
|
300
|
+
...R.animation.queue,
|
|
301
|
+
...n.animation.queue
|
|
302
|
+
}), n.animation.entry && (s.animation.entry = {
|
|
303
|
+
...R.animation.entry,
|
|
304
|
+
...n.animation.entry,
|
|
305
|
+
start: n.animation.entry.start ? {
|
|
306
|
+
...R.animation.entry.start,
|
|
307
|
+
...n.animation.entry.start,
|
|
308
|
+
circular: n.animation.entry.start.circular ? { ...R.animation.entry.start.circular, ...n.animation.entry.start.circular } : R.animation.entry.start.circular
|
|
309
|
+
} : R.animation.entry.start,
|
|
310
|
+
timing: n.animation.entry.timing ? { ...R.animation.entry.timing, ...n.animation.entry.timing } : R.animation.entry.timing,
|
|
311
|
+
path: n.animation.entry.path ? { ...bt, ...n.animation.entry.path } : R.animation.entry.path,
|
|
312
|
+
rotation: n.animation.entry.rotation ? { ...vt, ...n.animation.entry.rotation } : R.animation.entry.rotation,
|
|
313
|
+
scale: n.animation.entry.scale ? { ...wt, ...n.animation.entry.scale } : R.animation.entry.scale
|
|
314
|
+
}), n.animation.idle && (s.animation.idle = {
|
|
327
315
|
...$t,
|
|
328
|
-
...
|
|
329
|
-
})),
|
|
330
|
-
...
|
|
331
|
-
...
|
|
332
|
-
},
|
|
333
|
-
...
|
|
334
|
-
...
|
|
335
|
-
}),
|
|
336
|
-
...
|
|
337
|
-
...
|
|
338
|
-
}))
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
...
|
|
343
|
-
...
|
|
344
|
-
|
|
345
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
346
|
-
}), o.rendering.ui && (s.rendering.ui = {
|
|
347
|
-
...E.rendering.ui,
|
|
348
|
-
...o.rendering.ui
|
|
349
|
-
})), s.config.debug = {
|
|
316
|
+
...n.animation.idle
|
|
317
|
+
})), n.interaction && (s.interaction = {
|
|
318
|
+
...R.interaction,
|
|
319
|
+
...n.interaction
|
|
320
|
+
}, n.interaction.focus && (s.interaction.focus = {
|
|
321
|
+
...R.interaction.focus,
|
|
322
|
+
...n.interaction.focus
|
|
323
|
+
}), n.interaction.navigation && (s.interaction.navigation = {
|
|
324
|
+
...R.interaction.navigation,
|
|
325
|
+
...n.interaction.navigation
|
|
326
|
+
}));
|
|
327
|
+
const l = n.rendering?.ui;
|
|
328
|
+
if (l && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), s.ui = {
|
|
329
|
+
...R.ui,
|
|
330
|
+
...l,
|
|
331
|
+
...n.ui
|
|
332
|
+
}, s.config.debug = {
|
|
350
333
|
...Dt,
|
|
351
|
-
...
|
|
334
|
+
...n.config?.debug ?? {}
|
|
352
335
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
353
336
|
const c = { shape: "hexagon", mode: "height-relative" };
|
|
354
337
|
s.styling = {
|
|
@@ -360,14 +343,14 @@ function oe(o = {}) {
|
|
|
360
343
|
}
|
|
361
344
|
return s;
|
|
362
345
|
}
|
|
363
|
-
function se(
|
|
364
|
-
return { ...
|
|
346
|
+
function se(n, t) {
|
|
347
|
+
return { ...n ? Rt[n] : Rt.playful, ...t };
|
|
365
348
|
}
|
|
366
|
-
function ae(
|
|
367
|
-
return { ...
|
|
349
|
+
function ae(n, t) {
|
|
350
|
+
return { ...n ? Tt[n] : Tt.gentle, ...t };
|
|
368
351
|
}
|
|
369
|
-
function re(
|
|
370
|
-
return { ...
|
|
352
|
+
function re(n, t) {
|
|
353
|
+
return { ...n ? At[n] : At.gentle, ...t };
|
|
371
354
|
}
|
|
372
355
|
class ce {
|
|
373
356
|
constructor(t) {
|
|
@@ -380,8 +363,8 @@ class ce {
|
|
|
380
363
|
buildTransformString(t) {
|
|
381
364
|
const i = ["translate(-50%, -50%)"];
|
|
382
365
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
383
|
-
const e = t.x ?? 0,
|
|
384
|
-
i.push(`translate(${e}px, ${
|
|
366
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
367
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
385
368
|
}
|
|
386
369
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
387
370
|
}
|
|
@@ -394,14 +377,14 @@ class ce {
|
|
|
394
377
|
* @param easing - CSS easing function (optional)
|
|
395
378
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
396
379
|
*/
|
|
397
|
-
animateTransformCancellable(t, i, e,
|
|
380
|
+
animateTransformCancellable(t, i, e, o = null, a = null) {
|
|
398
381
|
this.cancelAllAnimations(t);
|
|
399
|
-
const r =
|
|
382
|
+
const r = o ?? this.config.duration, s = a ?? this.config.easing.default, l = this.buildTransformString(i), c = this.buildTransformString(e);
|
|
400
383
|
t.style.transition = "none";
|
|
401
384
|
const u = t.animate(
|
|
402
385
|
[
|
|
403
|
-
{ transform:
|
|
404
|
-
{ transform:
|
|
386
|
+
{ transform: l },
|
|
387
|
+
{ transform: c }
|
|
405
388
|
],
|
|
406
389
|
{
|
|
407
390
|
duration: r,
|
|
@@ -419,7 +402,7 @@ class ce {
|
|
|
419
402
|
duration: r
|
|
420
403
|
};
|
|
421
404
|
return this.activeAnimations.set(t, h), u.finished.then(() => {
|
|
422
|
-
t.style.transform =
|
|
405
|
+
t.style.transform = c, this.activeAnimations.delete(t);
|
|
423
406
|
}).catch(() => {
|
|
424
407
|
this.activeAnimations.delete(t);
|
|
425
408
|
}), h;
|
|
@@ -433,13 +416,13 @@ class ce {
|
|
|
433
416
|
cancelAnimation(t, i = !0) {
|
|
434
417
|
const e = this.getCurrentTransform(t.element);
|
|
435
418
|
if (t.animation.cancel(), i) {
|
|
436
|
-
const
|
|
419
|
+
const o = this.buildTransformString({
|
|
437
420
|
x: e.x,
|
|
438
421
|
y: e.y,
|
|
439
422
|
rotation: e.rotation,
|
|
440
423
|
scale: e.scale
|
|
441
424
|
});
|
|
442
|
-
t.element.style.transform =
|
|
425
|
+
t.element.style.transform = o;
|
|
443
426
|
}
|
|
444
427
|
return this.activeAnimations.delete(t.element), e;
|
|
445
428
|
}
|
|
@@ -452,8 +435,8 @@ class ce {
|
|
|
452
435
|
const i = this.activeAnimations.get(t);
|
|
453
436
|
i && this.cancelAnimation(i, !1);
|
|
454
437
|
const e = t.getAnimations();
|
|
455
|
-
for (const
|
|
456
|
-
|
|
438
|
+
for (const o of e)
|
|
439
|
+
o.cancel();
|
|
457
440
|
}
|
|
458
441
|
/**
|
|
459
442
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -465,8 +448,8 @@ class ce {
|
|
|
465
448
|
const e = getComputedStyle(t).transform;
|
|
466
449
|
if (e === "none" || !e)
|
|
467
450
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
468
|
-
const
|
|
469
|
-
return { x: s, y:
|
|
451
|
+
const o = new DOMMatrix(e), a = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), s = o.e, l = o.f;
|
|
452
|
+
return { x: s, y: l, rotation: r, scale: a };
|
|
470
453
|
}
|
|
471
454
|
/**
|
|
472
455
|
* Check if an element has an active animation
|
|
@@ -492,9 +475,9 @@ class ce {
|
|
|
492
475
|
* @param easing - CSS easing function (optional)
|
|
493
476
|
* @returns Promise that resolves when animation completes
|
|
494
477
|
*/
|
|
495
|
-
animateTransform(t, i, e = null,
|
|
478
|
+
animateTransform(t, i, e = null, o = null) {
|
|
496
479
|
return new Promise((a) => {
|
|
497
|
-
const r = e ?? this.config.duration, s =
|
|
480
|
+
const r = e ?? this.config.duration, s = o ?? this.config.easing.default;
|
|
498
481
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
499
482
|
a();
|
|
500
483
|
}, r);
|
|
@@ -525,141 +508,141 @@ class ce {
|
|
|
525
508
|
return new Promise((i) => setTimeout(i, t));
|
|
526
509
|
}
|
|
527
510
|
}
|
|
528
|
-
function J(
|
|
529
|
-
return
|
|
511
|
+
function J(n, t, i) {
|
|
512
|
+
return n + (t - n) * i;
|
|
530
513
|
}
|
|
531
|
-
function le(
|
|
532
|
-
const { overshoot:
|
|
533
|
-
let u = 0, h = 0, d = 1, f =
|
|
534
|
-
for (let g = 0; g <
|
|
535
|
-
if (
|
|
536
|
-
h = g === 0 ? 0 :
|
|
514
|
+
function le(n, t, i, e) {
|
|
515
|
+
const { overshoot: o, bounces: a, decayRatio: r } = e, s = i.x - t.x, l = i.y - t.y, c = he(a, r);
|
|
516
|
+
let u = 0, h = 0, d = 1, f = o, y = !1;
|
|
517
|
+
for (let g = 0; g < c.length; g++)
|
|
518
|
+
if (n <= c[g].time) {
|
|
519
|
+
h = g === 0 ? 0 : c[g - 1].time, d = c[g].time, f = c[g].overshoot, y = c[g].isOvershoot;
|
|
537
520
|
break;
|
|
538
521
|
}
|
|
539
|
-
const p = (
|
|
540
|
-
if (
|
|
541
|
-
u = 1 + f *
|
|
522
|
+
const p = (n - h) / (d - h);
|
|
523
|
+
if (y)
|
|
524
|
+
u = 1 + f * nt(p);
|
|
542
525
|
else if (h === 0)
|
|
543
|
-
u =
|
|
526
|
+
u = nt(p);
|
|
544
527
|
else {
|
|
545
|
-
const m = 1 + (
|
|
546
|
-
(
|
|
528
|
+
const m = 1 + (c.find(
|
|
529
|
+
(b, w) => b.time > h && w > 0 && c[w - 1].isOvershoot
|
|
547
530
|
)?.overshoot || f);
|
|
548
|
-
u = J(m, 1,
|
|
531
|
+
u = J(m, 1, nt(p));
|
|
549
532
|
}
|
|
550
533
|
return {
|
|
551
534
|
x: t.x + s * u,
|
|
552
|
-
y: t.y +
|
|
535
|
+
y: t.y + l * u
|
|
553
536
|
};
|
|
554
537
|
}
|
|
555
|
-
function he(
|
|
538
|
+
function he(n, t) {
|
|
556
539
|
const i = [];
|
|
557
540
|
let e = 0.6;
|
|
558
541
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
559
|
-
let
|
|
560
|
-
const r = 0.4 / (
|
|
561
|
-
for (let s = 0; s <
|
|
562
|
-
e += r, i.push({ time: e, overshoot:
|
|
542
|
+
let o = 0.15;
|
|
543
|
+
const r = 0.4 / (n * 2);
|
|
544
|
+
for (let s = 0; s < n; s++)
|
|
545
|
+
e += r, i.push({ time: e, overshoot: o, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
563
546
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
564
547
|
}
|
|
565
|
-
function de(
|
|
566
|
-
const { stiffness:
|
|
548
|
+
function de(n, t, i, e) {
|
|
549
|
+
const { stiffness: o, damping: a, mass: r, oscillations: s } = e, l = i.x - t.x, c = i.y - t.y, u = Math.sqrt(o / r), h = a / (2 * Math.sqrt(o * r));
|
|
567
550
|
let d;
|
|
568
551
|
if (h < 1) {
|
|
569
|
-
const f = u * Math.sqrt(1 - h * h),
|
|
570
|
-
d = 1 -
|
|
552
|
+
const f = u * Math.sqrt(1 - h * h), y = Math.exp(-h * u * n * 3), p = Math.cos(f * n * s * Math.PI);
|
|
553
|
+
d = 1 - y * p;
|
|
571
554
|
} else
|
|
572
|
-
d = 1 - Math.exp(-u *
|
|
555
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
573
556
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
574
|
-
x: t.x +
|
|
575
|
-
y: t.y +
|
|
557
|
+
x: t.x + l * d,
|
|
558
|
+
y: t.y + c * d
|
|
576
559
|
};
|
|
577
560
|
}
|
|
578
|
-
function ue(
|
|
579
|
-
const { amplitude:
|
|
561
|
+
function ue(n, t, i, e) {
|
|
562
|
+
const { amplitude: o, frequency: a, decay: r, decayRate: s, phase: l } = e, c = i.x - t.x, u = i.y - t.y, h = Math.sqrt(c * c + u * u), d = h > 0 ? -u / h : 0, f = h > 0 ? c / h : 1, y = a * Math.PI * 2 * n + l, p = r ? Math.pow(1 - n, s) : 1, g = o * Math.sin(y) * p, m = ge(n);
|
|
580
563
|
return {
|
|
581
564
|
x: J(t.x, i.x, m) + g * d,
|
|
582
565
|
y: J(t.y, i.y, m) + g * f
|
|
583
566
|
};
|
|
584
567
|
}
|
|
585
|
-
function
|
|
586
|
-
return 1 - (1 -
|
|
568
|
+
function nt(n) {
|
|
569
|
+
return 1 - (1 - n) * (1 - n);
|
|
587
570
|
}
|
|
588
|
-
function ge(
|
|
589
|
-
return 1 - Math.pow(1 -
|
|
571
|
+
function ge(n) {
|
|
572
|
+
return 1 - Math.pow(1 - n, 3);
|
|
590
573
|
}
|
|
591
|
-
function fe(
|
|
592
|
-
const { amplitude: e, frequency:
|
|
593
|
-
return t +
|
|
574
|
+
function fe(n, t, i) {
|
|
575
|
+
const { amplitude: e, frequency: o, decay: a } = i, r = Math.sin(n * o * Math.PI * 2), s = a ? Math.pow(1 - n, 2) : 1, l = e * r * s;
|
|
576
|
+
return t + l;
|
|
594
577
|
}
|
|
595
|
-
function me(
|
|
596
|
-
const { overshoot: e, bounces:
|
|
578
|
+
function me(n, t, i) {
|
|
579
|
+
const { overshoot: e, bounces: o } = i, a = [];
|
|
597
580
|
a.push({ time: 0.5, scale: e });
|
|
598
581
|
let r = e;
|
|
599
|
-
const s = 0.5,
|
|
582
|
+
const s = 0.5, c = 0.5 / (o * 2);
|
|
600
583
|
let u = 0.5;
|
|
601
|
-
for (let d = 0; d <
|
|
584
|
+
for (let d = 0; d < o; d++) {
|
|
602
585
|
const f = 1 - (r - 1) * s;
|
|
603
|
-
u +=
|
|
586
|
+
u += c, a.push({ time: u, scale: f }), r = 1 + (r - 1) * s * s, u += c, d < o - 1 && a.push({ time: u, scale: r });
|
|
604
587
|
}
|
|
605
588
|
a.push({ time: 1, scale: 1 });
|
|
606
589
|
let h = 1;
|
|
607
590
|
for (let d = 0; d < a.length; d++)
|
|
608
|
-
if (
|
|
609
|
-
const f = d === 0 ? 0 : a[d - 1].time,
|
|
610
|
-
h =
|
|
591
|
+
if (n <= a[d].time) {
|
|
592
|
+
const f = d === 0 ? 0 : a[d - 1].time, y = d === 0 ? 1 : a[d - 1].scale, p = (n - f) / (a[d].time - f), g = nt(p);
|
|
593
|
+
h = y + (a[d].scale - y) * g;
|
|
611
594
|
break;
|
|
612
595
|
}
|
|
613
596
|
return h * t;
|
|
614
597
|
}
|
|
615
|
-
function pe(
|
|
598
|
+
function pe(n) {
|
|
616
599
|
const {
|
|
617
600
|
element: t,
|
|
618
601
|
startPosition: i,
|
|
619
602
|
endPosition: e,
|
|
620
|
-
pathConfig:
|
|
603
|
+
pathConfig: o,
|
|
621
604
|
duration: a,
|
|
622
605
|
imageWidth: r,
|
|
623
606
|
imageHeight: s,
|
|
624
|
-
rotation:
|
|
625
|
-
scale:
|
|
607
|
+
rotation: l,
|
|
608
|
+
scale: c,
|
|
626
609
|
onComplete: u,
|
|
627
610
|
rotationConfig: h,
|
|
628
611
|
startRotation: d,
|
|
629
612
|
scaleConfig: f,
|
|
630
|
-
startScale:
|
|
631
|
-
} =
|
|
632
|
-
if ((p === "linear" || p === "arc") && !w && !(v ||
|
|
613
|
+
startScale: y
|
|
614
|
+
} = n, p = o.type, g = d !== void 0 && d !== l, m = h?.mode === "wobble", b = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, w = g || m, v = y !== void 0 && y !== c, S = f?.mode === "pop", x = f?.pop || { overshoot: 1.2, bounces: 1 };
|
|
615
|
+
if ((p === "linear" || p === "arc") && !w && !(v || S)) {
|
|
633
616
|
u && u();
|
|
634
617
|
return;
|
|
635
618
|
}
|
|
636
619
|
const z = performance.now(), L = -r / 2, _ = -s / 2;
|
|
637
620
|
function O(H) {
|
|
638
|
-
const
|
|
621
|
+
const N = H - z, T = Math.min(N / a, 1);
|
|
639
622
|
let D;
|
|
640
623
|
switch (p) {
|
|
641
624
|
case "bounce": {
|
|
642
|
-
const
|
|
643
|
-
|
|
644
|
-
|
|
625
|
+
const k = se(
|
|
626
|
+
o.bouncePreset,
|
|
627
|
+
o.bounce
|
|
645
628
|
);
|
|
646
|
-
D = le(T, i, e,
|
|
629
|
+
D = le(T, i, e, k);
|
|
647
630
|
break;
|
|
648
631
|
}
|
|
649
632
|
case "elastic": {
|
|
650
|
-
const
|
|
651
|
-
|
|
652
|
-
|
|
633
|
+
const k = ae(
|
|
634
|
+
o.elasticPreset,
|
|
635
|
+
o.elastic
|
|
653
636
|
);
|
|
654
|
-
D = de(T, i, e,
|
|
637
|
+
D = de(T, i, e, k);
|
|
655
638
|
break;
|
|
656
639
|
}
|
|
657
640
|
case "wave": {
|
|
658
|
-
const
|
|
659
|
-
|
|
660
|
-
|
|
641
|
+
const k = re(
|
|
642
|
+
o.wavePreset,
|
|
643
|
+
o.wave
|
|
661
644
|
);
|
|
662
|
-
D = ue(T, i, e,
|
|
645
|
+
D = ue(T, i, e, k);
|
|
663
646
|
break;
|
|
664
647
|
}
|
|
665
648
|
default:
|
|
@@ -670,16 +653,16 @@ function pe(o) {
|
|
|
670
653
|
}
|
|
671
654
|
const G = D.x - e.x, U = D.y - e.y;
|
|
672
655
|
let M;
|
|
673
|
-
m ? M = fe(T,
|
|
656
|
+
m ? M = fe(T, l, b) : g ? M = J(d, l, T) : M = l;
|
|
674
657
|
let A;
|
|
675
|
-
|
|
658
|
+
S ? A = me(T, c, x) : v ? A = J(y, c, T) : A = c, t.style.transform = `translate(${L}px, ${_}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${A})`, T < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${l}deg) scale(${c})`, u && u());
|
|
676
659
|
}
|
|
677
660
|
requestAnimationFrame(O);
|
|
678
661
|
}
|
|
679
|
-
function
|
|
680
|
-
return
|
|
662
|
+
function ye(n) {
|
|
663
|
+
return n === "bounce" || n === "elastic" || n === "wave";
|
|
681
664
|
}
|
|
682
|
-
const
|
|
665
|
+
const be = {
|
|
683
666
|
radial: "center",
|
|
684
667
|
spiral: "center",
|
|
685
668
|
grid: "top",
|
|
@@ -690,18 +673,18 @@ const ye = {
|
|
|
690
673
|
};
|
|
691
674
|
class ve {
|
|
692
675
|
constructor(t, i) {
|
|
693
|
-
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
676
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || bt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || wt;
|
|
694
677
|
}
|
|
695
678
|
/**
|
|
696
679
|
* Get the effective start position, considering layout-aware defaults
|
|
697
680
|
*/
|
|
698
681
|
resolveStartPosition() {
|
|
699
|
-
return this.config.start.position ? this.config.start.position :
|
|
682
|
+
return this.config.start.position ? this.config.start.position : be[this.layoutAlgorithm] || "nearest-edge";
|
|
700
683
|
}
|
|
701
684
|
/**
|
|
702
685
|
* Calculate the starting position for an image's entry animation
|
|
703
686
|
*/
|
|
704
|
-
calculateStartPosition(t, i, e,
|
|
687
|
+
calculateStartPosition(t, i, e, o, a) {
|
|
705
688
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
706
689
|
switch (r) {
|
|
707
690
|
case "nearest-edge":
|
|
@@ -723,7 +706,7 @@ class ve {
|
|
|
723
706
|
t,
|
|
724
707
|
i,
|
|
725
708
|
e,
|
|
726
|
-
|
|
709
|
+
o,
|
|
727
710
|
a
|
|
728
711
|
);
|
|
729
712
|
default:
|
|
@@ -733,28 +716,28 @@ class ve {
|
|
|
733
716
|
/**
|
|
734
717
|
* Calculate start position from the nearest edge (current default behavior)
|
|
735
718
|
*/
|
|
736
|
-
calculateNearestEdge(t, i, e,
|
|
737
|
-
const a = t.x, r = t.y, s = a,
|
|
719
|
+
calculateNearestEdge(t, i, e, o) {
|
|
720
|
+
const a = t.x, r = t.y, s = a, l = e.width - a, c = r, u = e.height - r, h = Math.min(s, l, c, u);
|
|
738
721
|
let d = t.x, f = t.y;
|
|
739
|
-
return h === s ? d = -(i.width +
|
|
722
|
+
return h === s ? d = -(i.width + o) : h === l ? d = e.width + o : h === c ? f = -(i.height + o) : f = e.height + o, { x: d, y: f };
|
|
740
723
|
}
|
|
741
724
|
/**
|
|
742
725
|
* Calculate start position from a specific edge
|
|
743
726
|
*/
|
|
744
|
-
calculateEdgePosition(t, i, e,
|
|
727
|
+
calculateEdgePosition(t, i, e, o, a) {
|
|
745
728
|
let r = i.x, s = i.y;
|
|
746
729
|
switch (t) {
|
|
747
730
|
case "top":
|
|
748
731
|
s = -(e.height + a);
|
|
749
732
|
break;
|
|
750
733
|
case "bottom":
|
|
751
|
-
s =
|
|
734
|
+
s = o.height + a;
|
|
752
735
|
break;
|
|
753
736
|
case "left":
|
|
754
737
|
r = -(e.width + a);
|
|
755
738
|
break;
|
|
756
739
|
case "right":
|
|
757
|
-
r =
|
|
740
|
+
r = o.width + a;
|
|
758
741
|
break;
|
|
759
742
|
}
|
|
760
743
|
return { x: r, y: s };
|
|
@@ -763,9 +746,9 @@ class ve {
|
|
|
763
746
|
* Calculate start position from center with scale animation
|
|
764
747
|
*/
|
|
765
748
|
calculateCenterPosition(t, i, e) {
|
|
766
|
-
const
|
|
749
|
+
const o = t.width / 2, a = t.height / 2;
|
|
767
750
|
return {
|
|
768
|
-
x:
|
|
751
|
+
x: o,
|
|
769
752
|
y: a,
|
|
770
753
|
useScale: !0
|
|
771
754
|
// Signal to use scale animation from 0
|
|
@@ -774,28 +757,28 @@ class ve {
|
|
|
774
757
|
/**
|
|
775
758
|
* Calculate start position from a random edge
|
|
776
759
|
*/
|
|
777
|
-
calculateRandomEdge(t, i, e,
|
|
760
|
+
calculateRandomEdge(t, i, e, o) {
|
|
778
761
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
779
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
762
|
+
return this.calculateEdgePosition(r, t, i, e, o);
|
|
780
763
|
}
|
|
781
764
|
/**
|
|
782
765
|
* Calculate start position on a circle around the container
|
|
783
766
|
*/
|
|
784
|
-
calculateCircularPosition(t, i, e,
|
|
767
|
+
calculateCircularPosition(t, i, e, o, a) {
|
|
785
768
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
786
|
-
let
|
|
787
|
-
const
|
|
788
|
-
if (typeof
|
|
789
|
-
const p = parseFloat(
|
|
790
|
-
|
|
769
|
+
let l;
|
|
770
|
+
const c = r.radius || "120%";
|
|
771
|
+
if (typeof c == "string" && c.endsWith("%")) {
|
|
772
|
+
const p = parseFloat(c) / 100;
|
|
773
|
+
l = Math.sqrt(
|
|
791
774
|
e.width ** 2 + e.height ** 2
|
|
792
775
|
) * p / 2;
|
|
793
776
|
} else
|
|
794
|
-
|
|
777
|
+
l = typeof c == "number" ? c : 500;
|
|
795
778
|
let u;
|
|
796
|
-
s === "even" ? u =
|
|
797
|
-
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) *
|
|
798
|
-
return { x: f, y
|
|
779
|
+
s === "even" ? u = o / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
780
|
+
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) * l, y = d + Math.sin(u) * l;
|
|
781
|
+
return { x: f, y };
|
|
799
782
|
}
|
|
800
783
|
/**
|
|
801
784
|
* Get animation parameters for an image
|
|
@@ -814,17 +797,17 @@ class ve {
|
|
|
814
797
|
* Build a CSS transform string for the start position
|
|
815
798
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
816
799
|
*/
|
|
817
|
-
buildStartTransform(t, i, e,
|
|
818
|
-
const
|
|
819
|
-
return t.useScale ? `${p} translate(${
|
|
800
|
+
buildStartTransform(t, i, e, o, a, r, s, l) {
|
|
801
|
+
const c = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = l !== void 0 ? l : o, f = a !== void 0 ? -a / 2 : 0, y = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${f}px, ${y}px)` : "translate(-50%, -50%)";
|
|
802
|
+
return t.useScale ? `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
820
803
|
}
|
|
821
804
|
/**
|
|
822
805
|
* Build the final CSS transform string
|
|
823
806
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
824
807
|
*/
|
|
825
|
-
buildFinalTransform(t, i, e,
|
|
826
|
-
if (e !== void 0 &&
|
|
827
|
-
const a = -e / 2, r = -
|
|
808
|
+
buildFinalTransform(t, i, e, o) {
|
|
809
|
+
if (e !== void 0 && o !== void 0) {
|
|
810
|
+
const a = -e / 2, r = -o / 2;
|
|
828
811
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
829
812
|
}
|
|
830
813
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -841,7 +824,7 @@ class ve {
|
|
|
841
824
|
* Check if the current path type requires JavaScript animation
|
|
842
825
|
*/
|
|
843
826
|
requiresJSAnimation() {
|
|
844
|
-
return
|
|
827
|
+
return ye(this.pathConfig.type);
|
|
845
828
|
}
|
|
846
829
|
/**
|
|
847
830
|
* Get the path configuration
|
|
@@ -890,12 +873,12 @@ class ve {
|
|
|
890
873
|
return t + (Math.random() - 0.5) * 60;
|
|
891
874
|
if (typeof e == "number")
|
|
892
875
|
return e;
|
|
893
|
-
const
|
|
894
|
-
return e.min + Math.random() *
|
|
876
|
+
const o = e.max - e.min;
|
|
877
|
+
return e.min + Math.random() * o;
|
|
895
878
|
}
|
|
896
879
|
case "spin": {
|
|
897
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
898
|
-
return t + e * 360 *
|
|
880
|
+
const e = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
|
|
881
|
+
return t + e * 360 * o;
|
|
899
882
|
}
|
|
900
883
|
case "random":
|
|
901
884
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -943,8 +926,8 @@ class ve {
|
|
|
943
926
|
amplitude: 15,
|
|
944
927
|
frequency: 3,
|
|
945
928
|
decay: !0
|
|
946
|
-
}, { amplitude:
|
|
947
|
-
return i +
|
|
929
|
+
}, { amplitude: o, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), l = r ? Math.pow(1 - t, 2) : 1, c = o * s * l;
|
|
930
|
+
return i + c;
|
|
948
931
|
}
|
|
949
932
|
/**
|
|
950
933
|
* Get the scale configuration
|
|
@@ -1000,12 +983,12 @@ class ve {
|
|
|
1000
983
|
const e = this.scaleConfig.pop || {
|
|
1001
984
|
overshoot: 1.2,
|
|
1002
985
|
bounces: 1
|
|
1003
|
-
}, { overshoot:
|
|
986
|
+
}, { overshoot: o, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, o);
|
|
1004
987
|
let s = i;
|
|
1005
|
-
for (let
|
|
1006
|
-
if (t <= r[
|
|
1007
|
-
const
|
|
1008
|
-
s = u + (r[
|
|
988
|
+
for (let l = 0; l < r.length; l++)
|
|
989
|
+
if (t <= r[l].time) {
|
|
990
|
+
const c = l === 0 ? 0 : r[l - 1].time, u = l === 0 ? i : r[l - 1].scale, h = (t - c) / (r[l].time - c), d = this.easeOutQuad(h);
|
|
991
|
+
s = u + (r[l].scale - u) * d;
|
|
1009
992
|
break;
|
|
1010
993
|
}
|
|
1011
994
|
return s * i;
|
|
@@ -1016,12 +999,12 @@ class ve {
|
|
|
1016
999
|
generateScaleBounceKeyframes(t, i) {
|
|
1017
1000
|
const e = [];
|
|
1018
1001
|
e.push({ time: 0.5, scale: i });
|
|
1019
|
-
let
|
|
1002
|
+
let o = i;
|
|
1020
1003
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1021
|
-
let
|
|
1022
|
-
for (let
|
|
1023
|
-
const u = 1 - (
|
|
1024
|
-
|
|
1004
|
+
let l = 0.5;
|
|
1005
|
+
for (let c = 0; c < t; c++) {
|
|
1006
|
+
const u = 1 - (o - 1) * a;
|
|
1007
|
+
l += s, e.push({ time: l, scale: u }), o = 1 + (o - 1) * a * a, l += s, c < t - 1 && e.push({ time: l, scale: o });
|
|
1025
1008
|
}
|
|
1026
1009
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1027
1010
|
}
|
|
@@ -1040,9 +1023,9 @@ class we {
|
|
|
1040
1023
|
* Register an image element for idle animation.
|
|
1041
1024
|
* Starts animation after entry duration completes.
|
|
1042
1025
|
*/
|
|
1043
|
-
register(t, i, e,
|
|
1026
|
+
register(t, i, e, o) {
|
|
1044
1027
|
if (this.entries.has(t)) return;
|
|
1045
|
-
const a =
|
|
1028
|
+
const a = o ?? this.entryDurationMs, r = this.config.startDelay ?? a, s = {
|
|
1046
1029
|
element: t,
|
|
1047
1030
|
index: i,
|
|
1048
1031
|
totalImages: e,
|
|
@@ -1157,23 +1140,23 @@ class we {
|
|
|
1157
1140
|
});
|
|
1158
1141
|
}
|
|
1159
1142
|
_startBlink(t) {
|
|
1160
|
-
const i = { ...Zt, ...this.config.blink }, e = -(Math.random() * i.speed),
|
|
1143
|
+
const i = { ...Zt, ...this.config.blink }, e = -(Math.random() * i.speed), o = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1161
1144
|
let a, r;
|
|
1162
1145
|
i.style === "fade" ? (a = [
|
|
1163
|
-
{ opacity:
|
|
1146
|
+
{ opacity: o, offset: 0 },
|
|
1164
1147
|
{ opacity: 0, offset: 0.5 },
|
|
1165
|
-
{ opacity:
|
|
1148
|
+
{ opacity: o, offset: 1 }
|
|
1166
1149
|
], r = {
|
|
1167
1150
|
duration: i.speed,
|
|
1168
1151
|
delay: e,
|
|
1169
1152
|
iterations: 1 / 0,
|
|
1170
1153
|
easing: "ease-in-out"
|
|
1171
1154
|
}) : (a = [
|
|
1172
|
-
{ opacity:
|
|
1173
|
-
{ opacity:
|
|
1155
|
+
{ opacity: o, offset: 0 },
|
|
1156
|
+
{ opacity: o, offset: i.onRatio },
|
|
1174
1157
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
1175
1158
|
{ opacity: 0, offset: 0.99 },
|
|
1176
|
-
{ opacity:
|
|
1159
|
+
{ opacity: o, offset: 1 }
|
|
1177
1160
|
], r = {
|
|
1178
1161
|
duration: i.speed,
|
|
1179
1162
|
delay: e,
|
|
@@ -1202,8 +1185,8 @@ class we {
|
|
|
1202
1185
|
if (this.togetherSpeed = t, this.togetherRafId !== null) return;
|
|
1203
1186
|
const i = () => {
|
|
1204
1187
|
const e = performance.now() % this.togetherSpeed;
|
|
1205
|
-
for (const
|
|
1206
|
-
!
|
|
1188
|
+
for (const o of this.entries.values())
|
|
1189
|
+
!o.stopped && !o.paused && o.animation && (o.animation.currentTime = e);
|
|
1207
1190
|
this.togetherRafId = requestAnimationFrame(i);
|
|
1208
1191
|
};
|
|
1209
1192
|
this.togetherRafId = requestAnimationFrame(i);
|
|
@@ -1230,19 +1213,19 @@ class xe {
|
|
|
1230
1213
|
* @returns Array of layout objects with position, rotation, scale
|
|
1231
1214
|
*/
|
|
1232
1215
|
generate(t, i, e = {}) {
|
|
1233
|
-
const
|
|
1216
|
+
const o = [], { width: a, height: r } = i, s = this.config.spacing.padding, l = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, g = l * 1.5 / 2, m = l / 2, b = a - s - g, w = r - s - m, v = s + g, S = s + m;
|
|
1234
1217
|
for (let x = 0; x < t; x++) {
|
|
1235
|
-
const
|
|
1218
|
+
const I = this.random(v, b), z = this.random(S, w), L = c === "random" ? this.random(u, h) : 0, _ = y ? this.random(d, f) : 1, O = l * _, H = {
|
|
1236
1219
|
id: x,
|
|
1237
|
-
x:
|
|
1220
|
+
x: I,
|
|
1238
1221
|
y: z,
|
|
1239
1222
|
rotation: L,
|
|
1240
1223
|
scale: _,
|
|
1241
1224
|
baseSize: O
|
|
1242
1225
|
};
|
|
1243
|
-
|
|
1226
|
+
o.push(H);
|
|
1244
1227
|
}
|
|
1245
|
-
return
|
|
1228
|
+
return o;
|
|
1246
1229
|
}
|
|
1247
1230
|
/**
|
|
1248
1231
|
* Utility: Generate random number between min and max
|
|
@@ -1266,20 +1249,20 @@ class Ee {
|
|
|
1266
1249
|
* @returns Array of layout objects with position, rotation, scale
|
|
1267
1250
|
*/
|
|
1268
1251
|
generate(t, i, e = {}) {
|
|
1269
|
-
const
|
|
1252
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, y = this.config.scaleDecay ?? 0, p = {
|
|
1270
1253
|
...Gt,
|
|
1271
1254
|
...this.config.radial
|
|
1272
|
-
}, g = e.fixedHeight ?? s, m = a / 2,
|
|
1255
|
+
}, g = e.fixedHeight ?? s, m = a / 2, b = r / 2, w = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, S = Math.max(g * 0.8, Math.min(
|
|
1273
1256
|
m - v - g / 2,
|
|
1274
|
-
|
|
1257
|
+
b - v - g / 2
|
|
1275
1258
|
));
|
|
1276
1259
|
if (t > 0) {
|
|
1277
1260
|
const z = f ? this.random(h, d) : 1, L = g * z;
|
|
1278
|
-
|
|
1261
|
+
o.push({
|
|
1279
1262
|
id: 0,
|
|
1280
1263
|
x: m,
|
|
1281
|
-
y,
|
|
1282
|
-
rotation:
|
|
1264
|
+
y: b,
|
|
1265
|
+
rotation: l === "random" ? this.random(c * 0.33, u * 0.33) : 0,
|
|
1283
1266
|
// Less rotation for center
|
|
1284
1267
|
scale: z,
|
|
1285
1268
|
baseSize: L,
|
|
@@ -1287,34 +1270,34 @@ class Ee {
|
|
|
1287
1270
|
// Center image is highest
|
|
1288
1271
|
});
|
|
1289
1272
|
}
|
|
1290
|
-
let x = 1,
|
|
1273
|
+
let x = 1, I = 1;
|
|
1291
1274
|
for (; x < t; ) {
|
|
1292
|
-
const z =
|
|
1275
|
+
const z = I / w, L = y > 0 ? 1 - z * y * 0.5 : 1, _ = Math.max(g * 0.8, S / w * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), T = this.estimateWidth(g), D = Math.floor(N / (T * 0.7));
|
|
1293
1276
|
if (D === 0) {
|
|
1294
|
-
|
|
1277
|
+
I++;
|
|
1295
1278
|
continue;
|
|
1296
1279
|
}
|
|
1297
|
-
const G = 2 * Math.PI / D, U =
|
|
1280
|
+
const G = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
|
|
1298
1281
|
for (let M = 0; M < D && x < t; M++) {
|
|
1299
|
-
const A = M * G + U,
|
|
1300
|
-
let $ = m + Math.cos(A) * H, F =
|
|
1282
|
+
const A = M * G + U, k = f ? this.random(h, d) : 1, B = L * k, C = g * B;
|
|
1283
|
+
let $ = m + Math.cos(A) * H, F = b + Math.sin(A) * O;
|
|
1301
1284
|
const P = C * 1.5 / 2, j = C / 2;
|
|
1302
1285
|
$ - P < v ? $ = v + P : $ + P > a - v && ($ = a - v - P), F - j < v ? F = v + j : F + j > r - v && (F = r - v - j);
|
|
1303
|
-
const Y =
|
|
1304
|
-
|
|
1286
|
+
const Y = l === "random" ? this.random(c, u) : 0;
|
|
1287
|
+
o.push({
|
|
1305
1288
|
id: x,
|
|
1306
1289
|
x: $,
|
|
1307
1290
|
y: F,
|
|
1308
1291
|
rotation: Y,
|
|
1309
1292
|
scale: B,
|
|
1310
1293
|
baseSize: C,
|
|
1311
|
-
zIndex: Math.max(1, 100 -
|
|
1294
|
+
zIndex: Math.max(1, 100 - I)
|
|
1312
1295
|
// Outer rings have lower z-index
|
|
1313
1296
|
}), x++;
|
|
1314
1297
|
}
|
|
1315
|
-
|
|
1298
|
+
I++;
|
|
1316
1299
|
}
|
|
1317
|
-
return
|
|
1300
|
+
return o;
|
|
1318
1301
|
}
|
|
1319
1302
|
/**
|
|
1320
1303
|
* Estimate image width based on height
|
|
@@ -1375,13 +1358,13 @@ class Ie {
|
|
|
1375
1358
|
* @returns Array of layout objects with position, rotation, scale
|
|
1376
1359
|
*/
|
|
1377
1360
|
generate(t, i, e = {}) {
|
|
1378
|
-
const
|
|
1361
|
+
const o = [], { width: a, height: r } = i, s = { ...Se, ...this.config.grid }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, y = a - 2 * l, p = r - 2 * l, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1379
1362
|
t,
|
|
1380
|
-
|
|
1363
|
+
y,
|
|
1381
1364
|
p,
|
|
1382
|
-
|
|
1365
|
+
c,
|
|
1383
1366
|
s
|
|
1384
|
-
),
|
|
1367
|
+
), b = s.stagger === "row", w = s.stagger === "column", v = b ? g + 0.5 : g, S = w ? m + 0.5 : m, x = (y - s.gap * (g - 1)) / v, I = (p - s.gap * (m - 1)) / S, z = b ? x / 2 : 0, L = w ? I / 2 : 0, _ = 1 + s.overlap, O = Math.min(x, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = g * x + (g - 1) * s.gap + z, T = m * I + (m - 1) * s.gap + L, D = l + (y - N) / 2, G = l + (p - T) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", A = M && t > U;
|
|
1385
1368
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1386
1369
|
gridConfigColumns: s.columns,
|
|
1387
1370
|
gridConfigRows: s.rows,
|
|
@@ -1392,21 +1375,21 @@ class Ie {
|
|
|
1392
1375
|
imageCount: t,
|
|
1393
1376
|
isOverflowMode: A
|
|
1394
1377
|
});
|
|
1395
|
-
const
|
|
1378
|
+
const k = A ? new Array(U).fill(0) : [], B = Math.min(x, I) * s.overflowOffset;
|
|
1396
1379
|
for (let C = 0; C < t; C++) {
|
|
1397
1380
|
let $, F, X = 0;
|
|
1398
1381
|
if (A && C >= U) {
|
|
1399
1382
|
const q = C - U, W = q % U;
|
|
1400
|
-
X = Math.floor(q / U) + 1,
|
|
1383
|
+
X = Math.floor(q / U) + 1, k[W]++, s.fillDirection === "row" ? ($ = W % g, F = Math.floor(W / g)) : (F = W % m, $ = Math.floor(W / m));
|
|
1401
1384
|
} else
|
|
1402
1385
|
s.fillDirection === "row" ? ($ = C % g, F = Math.floor(C / g)) : (F = C % m, $ = Math.floor(C / m));
|
|
1403
|
-
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (
|
|
1404
|
-
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j +=
|
|
1386
|
+
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (I + s.gap) + I / 2;
|
|
1387
|
+
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j += I / 2), X > 0) {
|
|
1405
1388
|
const q = (X - 1) % Ct.length, W = Ct[q];
|
|
1406
1389
|
P += W.x * B, j += W.y * B;
|
|
1407
1390
|
}
|
|
1408
1391
|
if (s.jitter > 0) {
|
|
1409
|
-
const q = x / 2 * s.jitter, W =
|
|
1392
|
+
const q = x / 2 * s.jitter, W = I / 2 * s.jitter;
|
|
1410
1393
|
P += this.random(-q, q), j += this.random(-W, W);
|
|
1411
1394
|
}
|
|
1412
1395
|
let Y = P, V = j;
|
|
@@ -1415,10 +1398,10 @@ class Ie {
|
|
|
1415
1398
|
if (F === Math.floor((t - 1) / g) && q < g) {
|
|
1416
1399
|
const St = q * x + (q - 1) * s.gap;
|
|
1417
1400
|
let gt = 0;
|
|
1418
|
-
s.alignment === "center" ? gt = (
|
|
1401
|
+
s.alignment === "center" ? gt = (N - St) / 2 : s.alignment === "end" && (gt = N - St), Y += gt;
|
|
1419
1402
|
}
|
|
1420
1403
|
}
|
|
1421
|
-
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2,
|
|
1404
|
+
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2, ot = K / 2, lt = l + it, ht = a - l - it, _t = l + ot, Ut = r - l - ot;
|
|
1422
1405
|
Y = Math.max(lt, Math.min(Y, ht)), V = Math.max(_t, Math.min(V, Ut));
|
|
1423
1406
|
let dt = 0;
|
|
1424
1407
|
if (u === "random") {
|
|
@@ -1426,7 +1409,7 @@ class Ie {
|
|
|
1426
1409
|
s.jitter > 0 ? dt = this.random(q * s.jitter, W * s.jitter) : dt = this.random(q, W);
|
|
1427
1410
|
}
|
|
1428
1411
|
let ut;
|
|
1429
|
-
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1,
|
|
1412
|
+
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1, o.push({
|
|
1430
1413
|
id: C,
|
|
1431
1414
|
x: Y,
|
|
1432
1415
|
y: V,
|
|
@@ -1436,12 +1419,12 @@ class Ie {
|
|
|
1436
1419
|
zIndex: ut
|
|
1437
1420
|
});
|
|
1438
1421
|
}
|
|
1439
|
-
return
|
|
1422
|
+
return o;
|
|
1440
1423
|
}
|
|
1441
1424
|
/**
|
|
1442
1425
|
* Calculate optimal grid dimensions based on image count and container
|
|
1443
1426
|
*/
|
|
1444
|
-
calculateGridDimensions(t, i, e,
|
|
1427
|
+
calculateGridDimensions(t, i, e, o, a) {
|
|
1445
1428
|
let r, s;
|
|
1446
1429
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1447
1430
|
r = a.columns, s = a.rows;
|
|
@@ -1450,8 +1433,8 @@ class Ie {
|
|
|
1450
1433
|
else if (a.rows !== "auto")
|
|
1451
1434
|
s = a.rows, r = Math.ceil(t / s);
|
|
1452
1435
|
else {
|
|
1453
|
-
const
|
|
1454
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t *
|
|
1436
|
+
const l = i / e;
|
|
1437
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * l / 1.4))), s = Math.ceil(t / r); r > 1 && (r - 1) * s >= t; )
|
|
1455
1438
|
r--;
|
|
1456
1439
|
}
|
|
1457
1440
|
return { columns: Math.max(1, r), rows: Math.max(1, s) };
|
|
@@ -1482,80 +1465,80 @@ class Ae {
|
|
|
1482
1465
|
* @returns Array of layout objects with position, rotation, scale
|
|
1483
1466
|
*/
|
|
1484
1467
|
generate(t, i, e = {}) {
|
|
1485
|
-
const
|
|
1486
|
-
m -
|
|
1487
|
-
|
|
1468
|
+
const o = [], { width: a, height: r } = i, s = { ...Te, ...this.config.spiral }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, b = r / 2, w = Math.min(
|
|
1469
|
+
m - l - c / 2,
|
|
1470
|
+
b - l - c / 2
|
|
1488
1471
|
), v = s.direction === "clockwise" ? -1 : 1;
|
|
1489
|
-
for (let
|
|
1490
|
-
let x,
|
|
1472
|
+
for (let S = 0; S < t; S++) {
|
|
1473
|
+
let x, I;
|
|
1491
1474
|
if (s.spiralType === "golden")
|
|
1492
|
-
x =
|
|
1475
|
+
x = S * Re * v + s.startAngle, I = this.calculateGoldenRadius(S, t, w, s.tightness);
|
|
1493
1476
|
else if (s.spiralType === "archimedean") {
|
|
1494
|
-
const P =
|
|
1495
|
-
x = P * v + s.startAngle,
|
|
1477
|
+
const P = S * 0.5 * s.tightness;
|
|
1478
|
+
x = P * v + s.startAngle, I = this.calculateArchimedeanRadius(P, t, w, s.tightness);
|
|
1496
1479
|
} else {
|
|
1497
|
-
const P =
|
|
1498
|
-
x = P * v + s.startAngle,
|
|
1480
|
+
const P = S * 0.3 * s.tightness;
|
|
1481
|
+
x = P * v + s.startAngle, I = this.calculateLogarithmicRadius(P, t, w, s.tightness);
|
|
1499
1482
|
}
|
|
1500
|
-
const z = m + Math.cos(x) *
|
|
1483
|
+
const z = m + Math.cos(x) * I, L = b + Math.sin(x) * I, _ = I / w, O = g > 0 ? 1 - _ * g * 0.5 : 1, H = p ? this.random(f, y) : 1, N = O * H, T = c * N, G = T * 1.5 / 2, U = T / 2, M = l + G, A = a - l - G, k = l + U, B = r - l - U, C = Math.max(M, Math.min(z, A)), $ = Math.max(k, Math.min(L, B));
|
|
1501
1484
|
let F = 0;
|
|
1502
1485
|
if (u === "random") {
|
|
1503
1486
|
const P = x * 180 / Math.PI % 360, j = this.random(h, d);
|
|
1504
1487
|
F = s.spiralType === "golden" ? j : P * 0.1 + j * 0.9;
|
|
1505
|
-
} else u === "tangent" && (F = this.calculateSpiralTangent(x,
|
|
1506
|
-
const X = t -
|
|
1507
|
-
|
|
1508
|
-
id:
|
|
1488
|
+
} else u === "tangent" && (F = this.calculateSpiralTangent(x, I, s));
|
|
1489
|
+
const X = t - S;
|
|
1490
|
+
o.push({
|
|
1491
|
+
id: S,
|
|
1509
1492
|
x: C,
|
|
1510
1493
|
y: $,
|
|
1511
1494
|
rotation: F,
|
|
1512
|
-
scale:
|
|
1495
|
+
scale: N,
|
|
1513
1496
|
baseSize: T,
|
|
1514
1497
|
zIndex: X
|
|
1515
1498
|
});
|
|
1516
1499
|
}
|
|
1517
|
-
return
|
|
1500
|
+
return o;
|
|
1518
1501
|
}
|
|
1519
1502
|
/**
|
|
1520
1503
|
* Calculate tangent angle for spiral curve at given position
|
|
1521
1504
|
* This aligns the image along the spiral's direction of travel
|
|
1522
1505
|
*/
|
|
1523
1506
|
calculateSpiralTangent(t, i, e) {
|
|
1524
|
-
let
|
|
1507
|
+
let o;
|
|
1525
1508
|
if (e.spiralType === "golden")
|
|
1526
|
-
|
|
1509
|
+
o = t + Math.PI / 2;
|
|
1527
1510
|
else if (e.spiralType === "archimedean") {
|
|
1528
1511
|
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1529
|
-
|
|
1512
|
+
o = t + s;
|
|
1530
1513
|
} else {
|
|
1531
1514
|
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1532
|
-
|
|
1515
|
+
o = t + s;
|
|
1533
1516
|
}
|
|
1534
|
-
return
|
|
1517
|
+
return o * 180 / Math.PI % 360 - 90;
|
|
1535
1518
|
}
|
|
1536
1519
|
/**
|
|
1537
1520
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1538
1521
|
* Creates even distribution like sunflower seeds
|
|
1539
1522
|
*/
|
|
1540
|
-
calculateGoldenRadius(t, i, e,
|
|
1541
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1523
|
+
calculateGoldenRadius(t, i, e, o) {
|
|
1524
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / o;
|
|
1542
1525
|
return Math.min(r, e);
|
|
1543
1526
|
}
|
|
1544
1527
|
/**
|
|
1545
1528
|
* Calculate radius for Archimedean spiral
|
|
1546
1529
|
* r = a + b*θ (constant spacing between arms)
|
|
1547
1530
|
*/
|
|
1548
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1549
|
-
const a = i * 0.5 *
|
|
1531
|
+
calculateArchimedeanRadius(t, i, e, o) {
|
|
1532
|
+
const a = i * 0.5 * o;
|
|
1550
1533
|
return t / a * e;
|
|
1551
1534
|
}
|
|
1552
1535
|
/**
|
|
1553
1536
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1554
1537
|
* r = a * e^(b*θ)
|
|
1555
1538
|
*/
|
|
1556
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1557
|
-
const a = e * 0.05, r = 0.15 /
|
|
1558
|
-
return s /
|
|
1539
|
+
calculateLogarithmicRadius(t, i, e, o) {
|
|
1540
|
+
const a = e * 0.05, r = 0.15 / o, s = a * Math.exp(r * t), l = i * 0.3 * o, c = a * Math.exp(r * l);
|
|
1541
|
+
return s / c * e;
|
|
1559
1542
|
}
|
|
1560
1543
|
/**
|
|
1561
1544
|
* Utility: Generate random number between min and max
|
|
@@ -1584,7 +1567,7 @@ class Le {
|
|
|
1584
1567
|
* @returns Array of layout objects with position, rotation, scale
|
|
1585
1568
|
*/
|
|
1586
1569
|
generate(t, i, e = {}) {
|
|
1587
|
-
const
|
|
1570
|
+
const o = [], { width: a, height: r } = i, s = { ...Ce, ...this.config.cluster }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.calculateClusterCount(
|
|
1588
1571
|
t,
|
|
1589
1572
|
s.clusterCount,
|
|
1590
1573
|
a,
|
|
@@ -1594,72 +1577,72 @@ class Le {
|
|
|
1594
1577
|
g,
|
|
1595
1578
|
a,
|
|
1596
1579
|
r,
|
|
1597
|
-
|
|
1580
|
+
l,
|
|
1598
1581
|
s
|
|
1599
|
-
),
|
|
1582
|
+
), b = new Array(g).fill(0);
|
|
1600
1583
|
for (let v = 0; v < t; v++)
|
|
1601
|
-
|
|
1584
|
+
b[v % g]++;
|
|
1602
1585
|
let w = 0;
|
|
1603
1586
|
for (let v = 0; v < g; v++) {
|
|
1604
|
-
const
|
|
1605
|
-
for (let
|
|
1587
|
+
const S = m[v], x = b[v];
|
|
1588
|
+
for (let I = 0; I < x; I++) {
|
|
1606
1589
|
let z, L;
|
|
1607
1590
|
if (s.distribution === "gaussian")
|
|
1608
|
-
z = this.gaussianRandom() *
|
|
1591
|
+
z = this.gaussianRandom() * S.spread, L = this.gaussianRandom() * S.spread;
|
|
1609
1592
|
else {
|
|
1610
|
-
const F = this.random(0, Math.PI * 2), X = this.random(0,
|
|
1593
|
+
const F = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
|
|
1611
1594
|
z = Math.cos(F) * X, L = Math.sin(F) * X;
|
|
1612
1595
|
}
|
|
1613
1596
|
const _ = 1 + s.overlap * 0.5, O = 1 + s.overlap * 0.3;
|
|
1614
1597
|
z /= _, L /= _;
|
|
1615
|
-
const H = p ? this.random(f,
|
|
1616
|
-
let D =
|
|
1598
|
+
const H = p ? this.random(f, y) : 1, N = O * H, T = c * N;
|
|
1599
|
+
let D = S.x + z, G = S.y + L;
|
|
1617
1600
|
const M = T * 1.5 / 2, A = T / 2;
|
|
1618
|
-
D = Math.max(
|
|
1619
|
-
const
|
|
1620
|
-
|
|
1601
|
+
D = Math.max(l + M, Math.min(D, a - l - M)), G = Math.max(l + A, Math.min(G, r - l - A));
|
|
1602
|
+
const k = u === "random" ? this.random(h, d) : 0, C = Math.sqrt(z * z + L * L) / S.spread, $ = Math.round((1 - C) * 50) + 1;
|
|
1603
|
+
o.push({
|
|
1621
1604
|
id: w,
|
|
1622
1605
|
x: D,
|
|
1623
1606
|
y: G,
|
|
1624
|
-
rotation:
|
|
1625
|
-
scale:
|
|
1607
|
+
rotation: k,
|
|
1608
|
+
scale: N,
|
|
1626
1609
|
baseSize: T,
|
|
1627
1610
|
zIndex: $
|
|
1628
1611
|
}), w++;
|
|
1629
1612
|
}
|
|
1630
1613
|
}
|
|
1631
|
-
return
|
|
1614
|
+
return o;
|
|
1632
1615
|
}
|
|
1633
1616
|
/**
|
|
1634
1617
|
* Calculate optimal number of clusters based on image count and container
|
|
1635
1618
|
*/
|
|
1636
|
-
calculateClusterCount(t, i, e,
|
|
1619
|
+
calculateClusterCount(t, i, e, o, a) {
|
|
1637
1620
|
if (i !== "auto")
|
|
1638
1621
|
return Math.max(1, Math.min(i, t));
|
|
1639
|
-
const s = Math.max(1, Math.ceil(t / 8)),
|
|
1640
|
-
e / a * (
|
|
1622
|
+
const s = Math.max(1, Math.ceil(t / 8)), l = Math.floor(
|
|
1623
|
+
e / a * (o / a) * 0.6
|
|
1641
1624
|
);
|
|
1642
|
-
return Math.max(1, Math.min(s,
|
|
1625
|
+
return Math.max(1, Math.min(s, l, 10));
|
|
1643
1626
|
}
|
|
1644
1627
|
/**
|
|
1645
1628
|
* Generate cluster center positions with spacing constraints
|
|
1646
1629
|
*/
|
|
1647
|
-
generateClusterCenters(t, i, e,
|
|
1648
|
-
const r = [],
|
|
1630
|
+
generateClusterCenters(t, i, e, o, a) {
|
|
1631
|
+
const r = [], l = o + a.clusterSpread, c = i - o - a.clusterSpread, u = o + a.clusterSpread, h = e - o - a.clusterSpread;
|
|
1649
1632
|
for (let d = 0; d < t; d++) {
|
|
1650
|
-
let f = null,
|
|
1633
|
+
let f = null, y = -1;
|
|
1651
1634
|
for (let p = 0; p < 100; p++) {
|
|
1652
1635
|
const g = {
|
|
1653
|
-
x: this.random(
|
|
1636
|
+
x: this.random(l, c),
|
|
1654
1637
|
y: this.random(u, h),
|
|
1655
1638
|
spread: this.calculateClusterSpread(a)
|
|
1656
1639
|
};
|
|
1657
1640
|
let m = 1 / 0;
|
|
1658
|
-
for (const
|
|
1659
|
-
const w = g.x -
|
|
1660
|
-
m = Math.min(m,
|
|
1641
|
+
for (const b of r) {
|
|
1642
|
+
const w = g.x - b.x, v = g.y - b.y, S = Math.sqrt(w * w + v * v);
|
|
1643
|
+
m = Math.min(m, S);
|
|
1661
1644
|
}
|
|
1662
|
-
if ((r.length === 0 || m >
|
|
1645
|
+
if ((r.length === 0 || m > y) && (f = g, y = m), m >= a.clusterSpacing)
|
|
1663
1646
|
break;
|
|
1664
1647
|
}
|
|
1665
1648
|
f && r.push(f);
|
|
@@ -1702,23 +1685,23 @@ class Me {
|
|
|
1702
1685
|
* @returns Array of layout objects with position, rotation, scale
|
|
1703
1686
|
*/
|
|
1704
1687
|
generate(t, i, e = {}) {
|
|
1705
|
-
const
|
|
1688
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, p = e.fixedHeight ?? s, g = {
|
|
1706
1689
|
...qt,
|
|
1707
1690
|
...this.config.wave
|
|
1708
|
-
}, { rows: m, amplitude:
|
|
1691
|
+
}, { rows: m, amplitude: b, frequency: w, phaseShift: v, synchronization: S } = g, x = Math.ceil(t / m), L = p * 1.5 / 2, _ = l + L, O = a - l - L, H = O - _, N = x > 1 ? H / (x - 1) : 0, T = l + b + p / 2, D = r - l - b - p / 2, G = D - T, U = m > 1 ? G / (m - 1) : 0;
|
|
1709
1692
|
let M = 0;
|
|
1710
1693
|
for (let A = 0; A < m && M < t; A++) {
|
|
1711
|
-
const
|
|
1694
|
+
const k = m === 1 ? (T + D) / 2 : T + A * U;
|
|
1712
1695
|
let B = 0;
|
|
1713
|
-
|
|
1696
|
+
S === "offset" ? B = A * v : S === "alternating" && (B = A * Math.PI);
|
|
1714
1697
|
for (let C = 0; C < x && M < t; C++) {
|
|
1715
|
-
const $ = x === 1 ? (_ + O) / 2 : _ + C *
|
|
1698
|
+
const $ = x === 1 ? (_ + O) / 2 : _ + C * N, F = this.calculateWaveY($, a, b, w, B), X = $, P = k + F, j = y ? this.random(d, f) : 1, Y = p * j;
|
|
1716
1699
|
let V = 0;
|
|
1717
|
-
|
|
1718
|
-
const K = Y * 1.5 / 2, ct = Y / 2, it =
|
|
1719
|
-
|
|
1700
|
+
c === "tangent" ? V = this.calculateRotation($, a, b, w, B) : c === "random" && (V = this.random(u, h));
|
|
1701
|
+
const K = Y * 1.5 / 2, ct = Y / 2, it = l + K, ot = a - l - K, lt = l + ct, ht = r - l - ct;
|
|
1702
|
+
o.push({
|
|
1720
1703
|
id: M,
|
|
1721
|
-
x: Math.max(it, Math.min(X,
|
|
1704
|
+
x: Math.max(it, Math.min(X, ot)),
|
|
1722
1705
|
y: Math.max(lt, Math.min(P, ht)),
|
|
1723
1706
|
rotation: V,
|
|
1724
1707
|
scale: j,
|
|
@@ -1727,7 +1710,7 @@ class Me {
|
|
|
1727
1710
|
}), M++;
|
|
1728
1711
|
}
|
|
1729
1712
|
}
|
|
1730
|
-
return
|
|
1713
|
+
return o;
|
|
1731
1714
|
}
|
|
1732
1715
|
/**
|
|
1733
1716
|
* Calculate Y position displacement on wave curve
|
|
@@ -1738,9 +1721,9 @@ class Me {
|
|
|
1738
1721
|
* @param phase - Phase offset
|
|
1739
1722
|
* @returns Y displacement from baseline
|
|
1740
1723
|
*/
|
|
1741
|
-
calculateWaveY(t, i, e,
|
|
1724
|
+
calculateWaveY(t, i, e, o, a) {
|
|
1742
1725
|
const r = t / i;
|
|
1743
|
-
return e * Math.sin(
|
|
1726
|
+
return e * Math.sin(o * r * 2 * Math.PI + a);
|
|
1744
1727
|
}
|
|
1745
1728
|
/**
|
|
1746
1729
|
* Calculate rotation based on wave tangent
|
|
@@ -1751,8 +1734,8 @@ class Me {
|
|
|
1751
1734
|
* @param phase - Phase offset
|
|
1752
1735
|
* @returns Rotation angle in degrees
|
|
1753
1736
|
*/
|
|
1754
|
-
calculateRotation(t, i, e,
|
|
1755
|
-
const r = t / i, s = e *
|
|
1737
|
+
calculateRotation(t, i, e, o, a) {
|
|
1738
|
+
const r = t / i, s = e * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + a) / i;
|
|
1756
1739
|
return Math.atan(s) * (180 / Math.PI);
|
|
1757
1740
|
}
|
|
1758
1741
|
/**
|
|
@@ -1781,17 +1764,17 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1781
1764
|
[0, 50]
|
|
1782
1765
|
// left
|
|
1783
1766
|
], Fe = Et[1][0] / xt, ze = Et[2][1] / xt;
|
|
1784
|
-
function Oe(
|
|
1767
|
+
function Oe(n) {
|
|
1785
1768
|
return {
|
|
1786
|
-
colStep: Fe *
|
|
1787
|
-
rowOffset: ze *
|
|
1769
|
+
colStep: Fe * n,
|
|
1770
|
+
rowOffset: ze * n
|
|
1788
1771
|
};
|
|
1789
1772
|
}
|
|
1790
|
-
function De(
|
|
1773
|
+
function De(n, t, i, e, o, a) {
|
|
1791
1774
|
const { colStep: r } = Oe(a);
|
|
1792
1775
|
return {
|
|
1793
|
-
px: e + r *
|
|
1794
|
-
py:
|
|
1776
|
+
px: e + r * n,
|
|
1777
|
+
py: o + a * (t + n / 2)
|
|
1795
1778
|
};
|
|
1796
1779
|
}
|
|
1797
1780
|
const $e = [
|
|
@@ -1802,13 +1785,13 @@ const $e = [
|
|
|
1802
1785
|
[0, -1, 1],
|
|
1803
1786
|
[1, -1, 0]
|
|
1804
1787
|
];
|
|
1805
|
-
function Pe(
|
|
1806
|
-
if (
|
|
1788
|
+
function Pe(n) {
|
|
1789
|
+
if (n === 0) return [[0, 0, 0]];
|
|
1807
1790
|
const t = [];
|
|
1808
|
-
let [i, e,
|
|
1791
|
+
let [i, e, o] = [0, -n, n];
|
|
1809
1792
|
for (const [a, r, s] of $e)
|
|
1810
|
-
for (let
|
|
1811
|
-
t.push([i, e,
|
|
1793
|
+
for (let l = 0; l < n; l++)
|
|
1794
|
+
t.push([i, e, o]), i += a, e += r, o += s;
|
|
1812
1795
|
return t;
|
|
1813
1796
|
}
|
|
1814
1797
|
class _e {
|
|
@@ -1818,30 +1801,30 @@ class _e {
|
|
|
1818
1801
|
this.config = t;
|
|
1819
1802
|
}
|
|
1820
1803
|
generate(t, i, e = {}) {
|
|
1821
|
-
const
|
|
1804
|
+
const o = [], { width: a, height: r } = i, s = a / 2, l = r / 2, c = e.fixedHeight ?? 200, h = {
|
|
1822
1805
|
...Bt,
|
|
1823
1806
|
...this.config.honeycomb
|
|
1824
|
-
}.spacing ?? 0, d =
|
|
1825
|
-
let f = 0,
|
|
1807
|
+
}.spacing ?? 0, d = c + h;
|
|
1808
|
+
let f = 0, y = 0;
|
|
1826
1809
|
for (; f < t; ) {
|
|
1827
|
-
const p = Pe(
|
|
1828
|
-
for (const [g, m,
|
|
1810
|
+
const p = Pe(y);
|
|
1811
|
+
for (const [g, m, b] of p) {
|
|
1829
1812
|
if (f >= t) break;
|
|
1830
|
-
const { px: w, py: v } = De(g, m,
|
|
1831
|
-
|
|
1813
|
+
const { px: w, py: v } = De(g, m, b, s, l, d);
|
|
1814
|
+
o.push({
|
|
1832
1815
|
id: f,
|
|
1833
1816
|
x: w,
|
|
1834
1817
|
y: v,
|
|
1835
1818
|
rotation: 0,
|
|
1836
1819
|
scale: 1,
|
|
1837
|
-
baseSize:
|
|
1820
|
+
baseSize: c,
|
|
1838
1821
|
// Inner rings render above outer rings
|
|
1839
|
-
zIndex: Math.max(1, 100 -
|
|
1822
|
+
zIndex: Math.max(1, 100 - y)
|
|
1840
1823
|
}), f++;
|
|
1841
1824
|
}
|
|
1842
|
-
|
|
1825
|
+
y++;
|
|
1843
1826
|
}
|
|
1844
|
-
return
|
|
1827
|
+
return o;
|
|
1845
1828
|
}
|
|
1846
1829
|
}
|
|
1847
1830
|
class Ue {
|
|
@@ -1878,10 +1861,10 @@ class Ue {
|
|
|
1878
1861
|
* @returns Array of layout objects with position, rotation, scale
|
|
1879
1862
|
*/
|
|
1880
1863
|
generateLayout(t, i, e = {}) {
|
|
1881
|
-
const
|
|
1882
|
-
return
|
|
1864
|
+
const o = this.placementLayout.generate(t, i, e);
|
|
1865
|
+
return o.forEach((a) => {
|
|
1883
1866
|
this.layouts.set(a.id, a);
|
|
1884
|
-
}),
|
|
1867
|
+
}), o;
|
|
1885
1868
|
}
|
|
1886
1869
|
/**
|
|
1887
1870
|
* Get the original layout state for an image
|
|
@@ -1934,8 +1917,8 @@ class Ue {
|
|
|
1934
1917
|
return;
|
|
1935
1918
|
if (typeof e == "number")
|
|
1936
1919
|
return e;
|
|
1937
|
-
const
|
|
1938
|
-
return a === "mobile" ?
|
|
1920
|
+
const o = e, a = this.resolveBreakpoint(t);
|
|
1921
|
+
return a === "mobile" ? o.mobile ?? o.tablet ?? o.screen : a === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
|
|
1939
1922
|
}
|
|
1940
1923
|
/**
|
|
1941
1924
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1945,19 +1928,19 @@ class Ue {
|
|
|
1945
1928
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1946
1929
|
* @returns Calculated sizing result with height
|
|
1947
1930
|
*/
|
|
1948
|
-
calculateAdaptiveSize(t, i, e,
|
|
1949
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1931
|
+
calculateAdaptiveSize(t, i, e, o) {
|
|
1932
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1950
1933
|
if (r !== void 0)
|
|
1951
1934
|
return { height: r };
|
|
1952
|
-
const s = a?.minSize ?? 50,
|
|
1935
|
+
const s = a?.minSize ?? 50, l = a?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * c / i;
|
|
1953
1936
|
let m = Math.sqrt(p / 1.4);
|
|
1954
1937
|
m *= u, m = Math.min(m, e);
|
|
1955
|
-
let
|
|
1956
|
-
if (
|
|
1938
|
+
let b = this.clamp(m, s, l);
|
|
1939
|
+
if (b === s && m < s) {
|
|
1957
1940
|
const w = Math.max(s * 0.05, 20);
|
|
1958
|
-
|
|
1941
|
+
b = Math.max(w, m);
|
|
1959
1942
|
}
|
|
1960
|
-
return this.config.algorithm === "honeycomb" && (
|
|
1943
|
+
return this.config.algorithm === "honeycomb" && (b = Math.min(b, this.honeycombMaxImageHeight(i, t))), { height: b };
|
|
1961
1944
|
}
|
|
1962
1945
|
/**
|
|
1963
1946
|
* Returns the largest image height at which all honeycomb rings fit within the container.
|
|
@@ -1966,10 +1949,10 @@ class Ue {
|
|
|
1966
1949
|
*/
|
|
1967
1950
|
honeycombMaxImageHeight(t, i) {
|
|
1968
1951
|
if (t <= 1) return 1 / 0;
|
|
1969
|
-
let e = 0,
|
|
1970
|
-
for (;
|
|
1971
|
-
e++,
|
|
1972
|
-
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2,
|
|
1952
|
+
let e = 0, o = 1;
|
|
1953
|
+
for (; o < t; )
|
|
1954
|
+
e++, o += 6 * e;
|
|
1955
|
+
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2, l = i.height / 2, c = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (l - a - r * e) / (e + 0.5), d = (s - a - c * r * e) / (c * e + u);
|
|
1973
1956
|
return Math.max(10, Math.min(h, d));
|
|
1974
1957
|
}
|
|
1975
1958
|
/**
|
|
@@ -1979,7 +1962,7 @@ class Ue {
|
|
|
1979
1962
|
return Math.max(i, Math.min(e, t));
|
|
1980
1963
|
}
|
|
1981
1964
|
}
|
|
1982
|
-
var
|
|
1965
|
+
var E = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(E || {});
|
|
1983
1966
|
const Lt = {
|
|
1984
1967
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1985
1968
|
circle: "circle(50%)",
|
|
@@ -2027,96 +2010,96 @@ const Lt = {
|
|
|
2027
2010
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2028
2011
|
}
|
|
2029
2012
|
};
|
|
2030
|
-
function
|
|
2031
|
-
if (
|
|
2032
|
-
return
|
|
2013
|
+
function Ne(n) {
|
|
2014
|
+
if (n)
|
|
2015
|
+
return n in Lt ? Lt[n] : n;
|
|
2033
2016
|
}
|
|
2034
|
-
function
|
|
2035
|
-
const e = He[
|
|
2017
|
+
function ke(n, t, i) {
|
|
2018
|
+
const e = He[n];
|
|
2036
2019
|
if (!e) return "";
|
|
2037
|
-
const
|
|
2038
|
-
if (
|
|
2039
|
-
return `circle(${Math.round(50 *
|
|
2040
|
-
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 *
|
|
2020
|
+
const o = t / e.refHeight;
|
|
2021
|
+
if (n === "circle")
|
|
2022
|
+
return `circle(${Math.round(50 * o * 100) / 100}px)`;
|
|
2023
|
+
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 * o, l = (Math.min(...r) + Math.max(...r)) / 2 * o, c = (Math.max(...a) - Math.min(...a)) * o, u = (i ?? c) / 2, h = t / 2, d = u - s, f = h - l;
|
|
2041
2024
|
return `polygon(${e.points.map(([p, g]) => {
|
|
2042
|
-
const m = Math.round((p *
|
|
2043
|
-
return `${m}px ${
|
|
2025
|
+
const m = Math.round((p * o + d) * 100) / 100, b = Math.round((g * o + f) * 100) / 100;
|
|
2026
|
+
return `${m}px ${b}px`;
|
|
2044
2027
|
}).join(", ")})`;
|
|
2045
2028
|
}
|
|
2046
|
-
function je(
|
|
2047
|
-
return
|
|
2029
|
+
function je(n) {
|
|
2030
|
+
return n in mt;
|
|
2048
2031
|
}
|
|
2049
|
-
function We(
|
|
2050
|
-
return
|
|
2032
|
+
function We(n) {
|
|
2033
|
+
return n ? je(n) ? mt[n] : n : mt.md;
|
|
2051
2034
|
}
|
|
2052
|
-
function Ge(
|
|
2053
|
-
if (!
|
|
2035
|
+
function Ge(n) {
|
|
2036
|
+
if (!n) return "";
|
|
2054
2037
|
const t = [];
|
|
2055
|
-
if (
|
|
2056
|
-
if (typeof
|
|
2057
|
-
t.push(`drop-shadow(${
|
|
2038
|
+
if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
|
|
2039
|
+
if (typeof n.dropShadow == "string")
|
|
2040
|
+
t.push(`drop-shadow(${n.dropShadow})`);
|
|
2058
2041
|
else {
|
|
2059
|
-
const i =
|
|
2042
|
+
const i = n.dropShadow;
|
|
2060
2043
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
2061
2044
|
}
|
|
2062
2045
|
return t.join(" ");
|
|
2063
2046
|
}
|
|
2064
|
-
function tt(
|
|
2065
|
-
if (!
|
|
2047
|
+
function tt(n) {
|
|
2048
|
+
if (!n || n.style === "none" || n.width === 0)
|
|
2066
2049
|
return "none";
|
|
2067
|
-
const t =
|
|
2050
|
+
const t = n.width ?? 0, i = n.style ?? "solid", e = n.color ?? "#000000";
|
|
2068
2051
|
return `${t}px ${i} ${e}`;
|
|
2069
2052
|
}
|
|
2070
|
-
function et(
|
|
2071
|
-
if (!
|
|
2053
|
+
function et(n, t, i) {
|
|
2054
|
+
if (!n) return {};
|
|
2072
2055
|
const e = {};
|
|
2073
|
-
if (
|
|
2074
|
-
const s =
|
|
2075
|
-
|
|
2076
|
-
} else
|
|
2077
|
-
if (
|
|
2078
|
-
const s =
|
|
2079
|
-
e.borderTop = tt(
|
|
2080
|
-
} else
|
|
2081
|
-
|
|
2082
|
-
const r = Ge(
|
|
2083
|
-
if (e.filter = r || "none",
|
|
2084
|
-
const s =
|
|
2085
|
-
e.outline = `${s}px ${
|
|
2086
|
-
}
|
|
2087
|
-
if (
|
|
2056
|
+
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
2057
|
+
const s = n.border?.radius ?? 0;
|
|
2058
|
+
n.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
2059
|
+
} else n.border?.radius !== void 0 && (e.borderRadius = `${n.border.radius}px`);
|
|
2060
|
+
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
2061
|
+
const s = n.border || {}, l = { ...s, ...n.borderTop }, c = { ...s, ...n.borderRight }, u = { ...s, ...n.borderBottom }, h = { ...s, ...n.borderLeft };
|
|
2062
|
+
e.borderTop = tt(l), e.borderRight = tt(c), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
2063
|
+
} else n.border && (e.border = tt(n.border));
|
|
2064
|
+
n.shadow !== void 0 && (e.boxShadow = We(n.shadow));
|
|
2065
|
+
const r = Ge(n.filter);
|
|
2066
|
+
if (e.filter = r || "none", n.opacity !== void 0 && (e.opacity = String(n.opacity)), n.cursor !== void 0 && (e.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
2067
|
+
const s = n.outline.width ?? 0, l = n.outline.style ?? "solid", c = n.outline.color ?? "#000000";
|
|
2068
|
+
e.outline = `${s}px ${l} ${c}`, n.outline.offset !== void 0 && (e.outlineOffset = `${n.outline.offset}px`);
|
|
2069
|
+
}
|
|
2070
|
+
if (n.objectFit !== void 0 && (e.objectFit = n.objectFit), n.aspectRatio !== void 0 && (e.aspectRatio = n.aspectRatio), n.clipPath !== void 0) {
|
|
2088
2071
|
let s;
|
|
2089
|
-
const
|
|
2090
|
-
if (
|
|
2091
|
-
s =
|
|
2072
|
+
const l = typeof n.clipPath == "object" && n.clipPath !== null && "shape" in n.clipPath, c = l ? n.clipPath : void 0;
|
|
2073
|
+
if (c?.mode === "height-relative" && t)
|
|
2074
|
+
s = ke(c.shape, t, i);
|
|
2092
2075
|
else {
|
|
2093
|
-
const u =
|
|
2094
|
-
s =
|
|
2076
|
+
const u = l && c ? c.shape : n.clipPath;
|
|
2077
|
+
s = Ne(u);
|
|
2095
2078
|
}
|
|
2096
2079
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
2097
2080
|
}
|
|
2098
2081
|
return e;
|
|
2099
2082
|
}
|
|
2100
|
-
function qe(
|
|
2101
|
-
t.borderRadius !== void 0 && (
|
|
2083
|
+
function qe(n, t) {
|
|
2084
|
+
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (n.style.clipPath = t.clipPath), t.overflow !== void 0 && (n.style.overflow = t.overflow);
|
|
2102
2085
|
}
|
|
2103
|
-
function ft(
|
|
2104
|
-
const
|
|
2105
|
-
qe(
|
|
2086
|
+
function ft(n, t, i, e) {
|
|
2087
|
+
const o = et(t, i, e);
|
|
2088
|
+
qe(n, o);
|
|
2106
2089
|
}
|
|
2107
|
-
function Pt(
|
|
2108
|
-
return
|
|
2090
|
+
function Pt(n) {
|
|
2091
|
+
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
2109
2092
|
}
|
|
2110
|
-
function st(
|
|
2093
|
+
function st(n, t) {
|
|
2111
2094
|
const i = Pt(t);
|
|
2112
2095
|
i && i.split(" ").forEach((e) => {
|
|
2113
|
-
e.trim() &&
|
|
2096
|
+
e.trim() && n.classList.add(e.trim());
|
|
2114
2097
|
});
|
|
2115
2098
|
}
|
|
2116
|
-
function pt(
|
|
2099
|
+
function pt(n, t) {
|
|
2117
2100
|
const i = Pt(t);
|
|
2118
2101
|
i && i.split(" ").forEach((e) => {
|
|
2119
|
-
e.trim() &&
|
|
2102
|
+
e.trim() && n.classList.remove(e.trim());
|
|
2120
2103
|
});
|
|
2121
2104
|
}
|
|
2122
2105
|
const Mt = {
|
|
@@ -2125,7 +2108,7 @@ const Mt = {
|
|
|
2125
2108
|
};
|
|
2126
2109
|
class Be {
|
|
2127
2110
|
constructor(t, i, e) {
|
|
2128
|
-
this.state =
|
|
2111
|
+
this.state = E.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;
|
|
2129
2112
|
}
|
|
2130
2113
|
/**
|
|
2131
2114
|
* Set callback to be fired when an unfocus animation fully completes.
|
|
@@ -2143,7 +2126,7 @@ class Be {
|
|
|
2143
2126
|
* Check if any animation is in progress
|
|
2144
2127
|
*/
|
|
2145
2128
|
isAnimating() {
|
|
2146
|
-
return this.state !==
|
|
2129
|
+
return this.state !== E.IDLE && this.state !== E.FOCUSED;
|
|
2147
2130
|
}
|
|
2148
2131
|
/**
|
|
2149
2132
|
* Normalize scalePercent value
|
|
@@ -2156,17 +2139,17 @@ class Be {
|
|
|
2156
2139
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2157
2140
|
*/
|
|
2158
2141
|
calculateFocusDimensions(t, i, e) {
|
|
2159
|
-
const
|
|
2160
|
-
let s = a,
|
|
2161
|
-
const
|
|
2162
|
-
return
|
|
2142
|
+
const o = this.normalizeScalePercent(this.config.scalePercent), a = e.height * o, r = t / i;
|
|
2143
|
+
let s = a, l = s * r;
|
|
2144
|
+
const c = e.width * o;
|
|
2145
|
+
return l > c && (l = c, s = l / r), { width: l, height: s };
|
|
2163
2146
|
}
|
|
2164
2147
|
/**
|
|
2165
2148
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
2166
2149
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2167
2150
|
*/
|
|
2168
2151
|
calculateFocusTransform(t, i) {
|
|
2169
|
-
const e = t.width / 2,
|
|
2152
|
+
const e = t.width / 2, o = t.height / 2, a = e - i.x, r = o - i.y;
|
|
2170
2153
|
return {
|
|
2171
2154
|
x: a,
|
|
2172
2155
|
y: r,
|
|
@@ -2181,8 +2164,8 @@ class Be {
|
|
|
2181
2164
|
buildDimensionZoomTransform(t) {
|
|
2182
2165
|
const i = ["translate(-50%, -50%)"];
|
|
2183
2166
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2184
|
-
const e = t.x ?? 0,
|
|
2185
|
-
i.push(`translate(${e}px, ${
|
|
2167
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
2168
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
2186
2169
|
}
|
|
2187
2170
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2188
2171
|
}
|
|
@@ -2190,13 +2173,13 @@ class Be {
|
|
|
2190
2173
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2191
2174
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2192
2175
|
*/
|
|
2193
|
-
animateWithDimensions(t, i, e,
|
|
2194
|
-
const
|
|
2176
|
+
animateWithDimensions(t, i, e, o, a, r, s, l) {
|
|
2177
|
+
const c = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2195
2178
|
return t.style.transition = "none", t.animate(
|
|
2196
2179
|
[
|
|
2197
2180
|
{
|
|
2198
|
-
transform:
|
|
2199
|
-
width: `${
|
|
2181
|
+
transform: c,
|
|
2182
|
+
width: `${o}px`,
|
|
2200
2183
|
height: `${a}px`
|
|
2201
2184
|
},
|
|
2202
2185
|
{
|
|
@@ -2206,7 +2189,7 @@ class Be {
|
|
|
2206
2189
|
}
|
|
2207
2190
|
],
|
|
2208
2191
|
{
|
|
2209
|
-
duration:
|
|
2192
|
+
duration: l,
|
|
2210
2193
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2211
2194
|
fill: "forwards"
|
|
2212
2195
|
}
|
|
@@ -2237,11 +2220,11 @@ class Be {
|
|
|
2237
2220
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2238
2221
|
*/
|
|
2239
2222
|
startClipPathAnimation(t, i, e) {
|
|
2240
|
-
let
|
|
2241
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2223
|
+
let o = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2224
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (o = { ...o, clipPath: void 0 });
|
|
2242
2225
|
const a = () => {
|
|
2243
|
-
const r = t.offsetHeight, s = t.offsetWidth,
|
|
2244
|
-
|
|
2226
|
+
const r = t.offsetHeight, s = t.offsetWidth, l = et(o, r, s);
|
|
2227
|
+
l.clipPath !== void 0 ? t.style.clipPath = l.clipPath : t.style.clipPath = "unset", l.overflow !== void 0 && (t.style.overflow = l.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
2245
2228
|
};
|
|
2246
2229
|
requestAnimationFrame(a);
|
|
2247
2230
|
}
|
|
@@ -2251,25 +2234,25 @@ class Be {
|
|
|
2251
2234
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2252
2235
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2253
2236
|
*/
|
|
2254
|
-
startFocusAnimation(t, i, e,
|
|
2255
|
-
const r = t.style.zIndex || "", s = t.offsetWidth,
|
|
2237
|
+
startFocusAnimation(t, i, e, o, a) {
|
|
2238
|
+
const r = t.style.zIndex || "", s = t.offsetWidth, l = t.offsetHeight, c = this.calculateFocusDimensions(s, l, i), u = this.calculateFocusTransform(i, e);
|
|
2256
2239
|
this.animationEngine.cancelAllAnimations(t);
|
|
2257
2240
|
const h = this.config.animationDuration ?? 600;
|
|
2258
2241
|
this.applyFocusedStyling(t, Mt.FOCUSING);
|
|
2259
|
-
const d =
|
|
2242
|
+
const d = o ?? {
|
|
2260
2243
|
x: 0,
|
|
2261
2244
|
y: 0,
|
|
2262
2245
|
rotation: e.rotation,
|
|
2263
2246
|
scale: 1
|
|
2264
2247
|
// No scale - using dimensions
|
|
2265
|
-
}, f = a?.width ?? s,
|
|
2248
|
+
}, f = a?.width ?? s, y = a?.height ?? l, p = this.animateWithDimensions(
|
|
2266
2249
|
t,
|
|
2267
2250
|
d,
|
|
2268
2251
|
u,
|
|
2269
2252
|
f,
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2253
|
+
y,
|
|
2254
|
+
c.width,
|
|
2255
|
+
c.height,
|
|
2273
2256
|
h
|
|
2274
2257
|
), g = {
|
|
2275
2258
|
id: `focus-${Date.now()}`,
|
|
@@ -2286,16 +2269,16 @@ class Be {
|
|
|
2286
2269
|
focusTransform: u,
|
|
2287
2270
|
originalZIndex: r,
|
|
2288
2271
|
originalWidth: s,
|
|
2289
|
-
originalHeight:
|
|
2290
|
-
focusWidth:
|
|
2291
|
-
focusHeight:
|
|
2272
|
+
originalHeight: l,
|
|
2273
|
+
focusWidth: c.width,
|
|
2274
|
+
focusHeight: c.height
|
|
2292
2275
|
}, this.startClipPathAnimation(t, g, !0), {
|
|
2293
2276
|
element: t,
|
|
2294
2277
|
originalState: e,
|
|
2295
2278
|
animationHandle: g,
|
|
2296
2279
|
direction: "in",
|
|
2297
2280
|
originalWidth: s,
|
|
2298
|
-
originalHeight:
|
|
2281
|
+
originalHeight: l
|
|
2299
2282
|
};
|
|
2300
2283
|
}
|
|
2301
2284
|
/**
|
|
@@ -2303,11 +2286,11 @@ class Be {
|
|
|
2303
2286
|
* Animates back to original dimensions for consistent behavior
|
|
2304
2287
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2305
2288
|
*/
|
|
2306
|
-
startUnfocusAnimation(t, i, e,
|
|
2289
|
+
startUnfocusAnimation(t, i, e, o) {
|
|
2307
2290
|
t.style.zIndex = String(Mt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2308
2291
|
const a = this.config.animationDuration ?? 600;
|
|
2309
2292
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2310
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s =
|
|
2293
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, l = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, c = {
|
|
2311
2294
|
x: 0,
|
|
2312
2295
|
y: 0,
|
|
2313
2296
|
rotation: i.rotation,
|
|
@@ -2316,9 +2299,9 @@ class Be {
|
|
|
2316
2299
|
}, u = this.focusData?.originalWidth ?? t.offsetWidth, h = this.focusData?.originalHeight ?? t.offsetHeight, d = this.animateWithDimensions(
|
|
2317
2300
|
t,
|
|
2318
2301
|
r,
|
|
2319
|
-
l,
|
|
2320
|
-
s,
|
|
2321
2302
|
c,
|
|
2303
|
+
s,
|
|
2304
|
+
l,
|
|
2322
2305
|
u,
|
|
2323
2306
|
h,
|
|
2324
2307
|
a
|
|
@@ -2327,7 +2310,7 @@ class Be {
|
|
|
2327
2310
|
element: t,
|
|
2328
2311
|
animation: d,
|
|
2329
2312
|
fromState: r,
|
|
2330
|
-
toState:
|
|
2313
|
+
toState: c,
|
|
2331
2314
|
startTime: performance.now(),
|
|
2332
2315
|
duration: a
|
|
2333
2316
|
};
|
|
@@ -2355,10 +2338,10 @@ class Be {
|
|
|
2355
2338
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2356
2339
|
*/
|
|
2357
2340
|
captureMidAnimationState(t) {
|
|
2358
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2359
|
-
return t.style.width = `${
|
|
2360
|
-
transform: { x: r, y: s, rotation:
|
|
2361
|
-
dimensions: { width:
|
|
2341
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), o = t.offsetWidth, a = t.offsetHeight, r = e.e + o * 0.5, s = e.f + a * 0.5, l = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2342
|
+
return t.style.width = `${o}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${l}deg)`, t.style.transition = "none", {
|
|
2343
|
+
transform: { x: r, y: s, rotation: l, scale: 1 },
|
|
2344
|
+
dimensions: { width: o, height: a }
|
|
2362
2345
|
};
|
|
2363
2346
|
}
|
|
2364
2347
|
/**
|
|
@@ -2373,94 +2356,94 @@ class Be {
|
|
|
2373
2356
|
/**
|
|
2374
2357
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2375
2358
|
*/
|
|
2376
|
-
resetElementInstantly(t, i, e,
|
|
2359
|
+
resetElementInstantly(t, i, e, o, a) {
|
|
2377
2360
|
this.animationEngine.cancelAllAnimations(t);
|
|
2378
2361
|
const r = ["translate(-50%, -50%)"];
|
|
2379
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2362
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && a !== void 0 && (t.style.width = `${o}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2380
2363
|
}
|
|
2381
2364
|
/**
|
|
2382
2365
|
* Focus (zoom) an image to center of container
|
|
2383
2366
|
* Implements cross-animation when swapping focus
|
|
2384
2367
|
*/
|
|
2385
2368
|
async focusImage(t, i, e) {
|
|
2386
|
-
if (this.currentFocus === t && this.state ===
|
|
2369
|
+
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2387
2370
|
return this.unfocusImage();
|
|
2388
|
-
if (this.incoming?.element === t && this.state ===
|
|
2371
|
+
if (this.incoming?.element === t && this.state === E.FOCUSING) {
|
|
2389
2372
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2390
2373
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2391
2374
|
t,
|
|
2392
2375
|
this.incoming.originalState,
|
|
2393
2376
|
a,
|
|
2394
2377
|
r
|
|
2395
|
-
), this.incoming = null, this.state =
|
|
2378
|
+
), this.incoming = null, this.state = E.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 = E.IDLE;
|
|
2396
2379
|
return;
|
|
2397
2380
|
}
|
|
2398
|
-
const
|
|
2381
|
+
const o = ++this.focusGeneration;
|
|
2399
2382
|
switch (this.state) {
|
|
2400
|
-
case
|
|
2401
|
-
if (this.state =
|
|
2402
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2383
|
+
case E.IDLE:
|
|
2384
|
+
if (this.state = E.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2385
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2403
2386
|
break;
|
|
2404
|
-
case
|
|
2405
|
-
if (this.state =
|
|
2387
|
+
case E.FOCUSED:
|
|
2388
|
+
if (this.state = E.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2406
2389
|
this.currentFocus,
|
|
2407
2390
|
this.focusData.originalState
|
|
2408
2391
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2409
2392
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2410
2393
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2411
|
-
]), this.focusGeneration !==
|
|
2394
|
+
]), this.focusGeneration !== o)
|
|
2412
2395
|
return;
|
|
2413
2396
|
if (this.outgoing) {
|
|
2414
2397
|
const a = this.outgoing.element;
|
|
2415
2398
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2416
2399
|
}
|
|
2417
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2400
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2418
2401
|
break;
|
|
2419
|
-
case
|
|
2402
|
+
case E.FOCUSING:
|
|
2420
2403
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2421
2404
|
this.incoming.element,
|
|
2422
2405
|
this.incoming.originalState,
|
|
2423
2406
|
this.focusData?.originalZIndex || "",
|
|
2424
2407
|
this.focusData?.originalWidth,
|
|
2425
2408
|
this.focusData?.originalHeight
|
|
2426
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2427
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2409
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2410
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2428
2411
|
break;
|
|
2429
|
-
case
|
|
2430
|
-
if (this.state =
|
|
2412
|
+
case E.UNFOCUSING:
|
|
2413
|
+
if (this.state = E.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2431
2414
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2432
2415
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2433
|
-
]), this.focusGeneration !==
|
|
2416
|
+
]), this.focusGeneration !== o) return;
|
|
2434
2417
|
if (this.outgoing) {
|
|
2435
2418
|
const a = this.outgoing.element;
|
|
2436
2419
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2437
2420
|
}
|
|
2438
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2421
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2439
2422
|
break;
|
|
2440
|
-
case
|
|
2423
|
+
case E.CROSS_ANIMATING:
|
|
2441
2424
|
if (this.incoming?.element === t)
|
|
2442
2425
|
return;
|
|
2443
2426
|
if (this.outgoing?.element === t) {
|
|
2444
2427
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2445
2428
|
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2446
|
-
const { transform: s, dimensions:
|
|
2429
|
+
const { transform: s, dimensions: l } = this.captureMidAnimationState(this.incoming.element);
|
|
2447
2430
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2448
2431
|
this.incoming.element,
|
|
2449
2432
|
this.incoming.originalState,
|
|
2450
2433
|
s,
|
|
2451
|
-
|
|
2434
|
+
l
|
|
2452
2435
|
);
|
|
2453
2436
|
} else
|
|
2454
2437
|
this.outgoing = null;
|
|
2455
2438
|
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2456
2439
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2457
2440
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2458
|
-
]), this.focusGeneration !==
|
|
2441
|
+
]), this.focusGeneration !== o) return;
|
|
2459
2442
|
if (this.outgoing) {
|
|
2460
2443
|
const s = this.outgoing.element;
|
|
2461
2444
|
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2462
2445
|
}
|
|
2463
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2446
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2464
2447
|
return;
|
|
2465
2448
|
}
|
|
2466
2449
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2481,12 +2464,12 @@ class Be {
|
|
|
2481
2464
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2482
2465
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2483
2466
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2484
|
-
]), this.focusGeneration !==
|
|
2467
|
+
]), this.focusGeneration !== o) return;
|
|
2485
2468
|
if (this.outgoing) {
|
|
2486
2469
|
const a = this.outgoing.element;
|
|
2487
2470
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2488
2471
|
}
|
|
2489
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2472
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2490
2473
|
break;
|
|
2491
2474
|
}
|
|
2492
2475
|
}
|
|
@@ -2494,24 +2477,24 @@ class Be {
|
|
|
2494
2477
|
* Unfocus current image, returning it to original position
|
|
2495
2478
|
*/
|
|
2496
2479
|
async unfocusImage() {
|
|
2497
|
-
if (this.state ===
|
|
2480
|
+
if (this.state === E.UNFOCUSING)
|
|
2498
2481
|
return;
|
|
2499
2482
|
const t = ++this.focusGeneration;
|
|
2500
2483
|
if (!this.currentFocus || !this.focusData) {
|
|
2501
|
-
if (this.incoming && this.state ===
|
|
2484
|
+
if (this.incoming && this.state === E.FOCUSING) {
|
|
2502
2485
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2503
2486
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2504
2487
|
this.incoming.element,
|
|
2505
2488
|
this.incoming.originalState,
|
|
2506
2489
|
a,
|
|
2507
2490
|
r
|
|
2508
|
-
), this.incoming = null, this.state =
|
|
2491
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2509
2492
|
const s = this.outgoing.element;
|
|
2510
|
-
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2493
|
+
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(s);
|
|
2511
2494
|
}
|
|
2512
2495
|
return;
|
|
2513
2496
|
}
|
|
2514
|
-
if (this.state ===
|
|
2497
|
+
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2515
2498
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2516
2499
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2517
2500
|
const s = this.startUnfocusAnimation(
|
|
@@ -2524,15 +2507,15 @@ class Be {
|
|
|
2524
2507
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2525
2508
|
this.waitForAnimation(s.animationHandle)
|
|
2526
2509
|
]), this.focusGeneration !== t) return;
|
|
2527
|
-
let
|
|
2528
|
-
this.outgoing && (
|
|
2529
|
-
const
|
|
2530
|
-
this.removeFocusedStyling(
|
|
2510
|
+
let l = null;
|
|
2511
|
+
this.outgoing && (l = this.outgoing.element, this.removeFocusedStyling(l, this.outgoing.originalState.zIndex?.toString() || ""));
|
|
2512
|
+
const c = s.element;
|
|
2513
|
+
this.removeFocusedStyling(c, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, l && this.onUnfocusComplete?.(l), this.onUnfocusComplete?.(c);
|
|
2531
2514
|
return;
|
|
2532
2515
|
}
|
|
2533
|
-
this.state =
|
|
2534
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2535
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2516
|
+
this.state = E.UNFOCUSING;
|
|
2517
|
+
const i = this.currentFocus, e = this.focusData.originalState, o = this.focusData.originalZIndex;
|
|
2518
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(i));
|
|
2536
2519
|
}
|
|
2537
2520
|
/**
|
|
2538
2521
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2550,7 +2533,7 @@ class Be {
|
|
|
2550
2533
|
* Check if an image is currently focused (stable state)
|
|
2551
2534
|
*/
|
|
2552
2535
|
isFocused(t) {
|
|
2553
|
-
return this.currentFocus === t && this.state ===
|
|
2536
|
+
return this.currentFocus === t && this.state === E.FOCUSED;
|
|
2554
2537
|
}
|
|
2555
2538
|
/**
|
|
2556
2539
|
* Check if an image is the target of current focus animation
|
|
@@ -2571,9 +2554,9 @@ class Be {
|
|
|
2571
2554
|
* Used during swipe gestures for visual feedback
|
|
2572
2555
|
*/
|
|
2573
2556
|
setDragOffset(t) {
|
|
2574
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2575
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2576
|
-
|
|
2557
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2558
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2559
|
+
o.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && o.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = o.join(" ");
|
|
2577
2560
|
}
|
|
2578
2561
|
/**
|
|
2579
2562
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2581,13 +2564,13 @@ class Be {
|
|
|
2581
2564
|
* @param duration - Animation duration in ms (default 150)
|
|
2582
2565
|
*/
|
|
2583
2566
|
clearDragOffset(t, i = 150) {
|
|
2584
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2585
|
-
const e = this.currentFocus,
|
|
2586
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2587
|
-
const
|
|
2588
|
-
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform =
|
|
2567
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2568
|
+
const e = this.currentFocus, o = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = o.x ?? 0, s = o.y ?? 0;
|
|
2569
|
+
a.push(`translate(${r}px, ${s}px)`), o.rotation !== void 0 && a.push(`rotate(${o.rotation}deg)`);
|
|
2570
|
+
const l = a.join(" ");
|
|
2571
|
+
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = l, setTimeout(() => {
|
|
2589
2572
|
this.currentFocus === e && (e.style.transition = "none");
|
|
2590
|
-
}, i)) : (e.style.transition = "none", e.style.transform =
|
|
2573
|
+
}, i)) : (e.style.transition = "none", e.style.transform = l);
|
|
2591
2574
|
}
|
|
2592
2575
|
/**
|
|
2593
2576
|
* Reset zoom state (cancels all animations)
|
|
@@ -2611,7 +2594,7 @@ class Be {
|
|
|
2611
2594
|
this.focusData.originalZIndex,
|
|
2612
2595
|
this.focusData.originalWidth,
|
|
2613
2596
|
this.focusData.originalHeight
|
|
2614
|
-
), this.state =
|
|
2597
|
+
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2615
2598
|
}
|
|
2616
2599
|
}
|
|
2617
2600
|
const Xe = 50, Ye = 0.5, Ve = 20, Je = 0.3, Ke = 150, Ze = 30, at = class at {
|
|
@@ -2658,9 +2641,9 @@ const Xe = 50, Ye = 0.5, Ve = 20, Je = 0.3, Ke = 150, Ze = 30, at = class at {
|
|
|
2658
2641
|
}
|
|
2659
2642
|
handleTouchMove(t) {
|
|
2660
2643
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2661
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2662
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2663
|
-
const s = Math.atan2(Math.abs(
|
|
2644
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, o = i.clientY - this.touchState.startY;
|
|
2645
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + o * o) > 10) {
|
|
2646
|
+
const s = Math.atan2(Math.abs(o), Math.abs(e)) * (180 / Math.PI);
|
|
2664
2647
|
this.touchState.isHorizontalSwipe = s <= Ze;
|
|
2665
2648
|
}
|
|
2666
2649
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
@@ -2672,16 +2655,16 @@ const Xe = 50, Ye = 0.5, Ve = 20, Je = 0.3, Ke = 150, Ze = 30, at = class at {
|
|
|
2672
2655
|
handleTouchEnd(t) {
|
|
2673
2656
|
if (!this.touchState) return;
|
|
2674
2657
|
this.recentTouchTimestamp = Date.now();
|
|
2675
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2658
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, o = Math.abs(i) / e, a = Math.abs(i);
|
|
2676
2659
|
let r = !1;
|
|
2677
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Xe ||
|
|
2660
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Xe || o >= Ye && a >= Ve) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2678
2661
|
}
|
|
2679
2662
|
handleTouchCancel(t) {
|
|
2680
2663
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2681
2664
|
}
|
|
2682
2665
|
};
|
|
2683
2666
|
at.TOUCH_CLICK_DELAY = 300;
|
|
2684
|
-
let
|
|
2667
|
+
let yt = at;
|
|
2685
2668
|
class Qe {
|
|
2686
2669
|
constructor(t) {
|
|
2687
2670
|
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)
|
|
@@ -2696,7 +2679,7 @@ class Qe {
|
|
|
2696
2679
|
for (const i of this.sources)
|
|
2697
2680
|
if ("folders" in i)
|
|
2698
2681
|
for (const e of i.folders) {
|
|
2699
|
-
const
|
|
2682
|
+
const o = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, o);
|
|
2700
2683
|
this._discoveredUrls.push(...a);
|
|
2701
2684
|
}
|
|
2702
2685
|
else if ("files" in i) {
|
|
@@ -2742,9 +2725,9 @@ class Qe {
|
|
|
2742
2725
|
// Alternative format
|
|
2743
2726
|
];
|
|
2744
2727
|
for (const e of i) {
|
|
2745
|
-
const
|
|
2746
|
-
if (
|
|
2747
|
-
return
|
|
2728
|
+
const o = t.match(e);
|
|
2729
|
+
if (o && o[1])
|
|
2730
|
+
return o[1];
|
|
2748
2731
|
}
|
|
2749
2732
|
return null;
|
|
2750
2733
|
}
|
|
@@ -2756,15 +2739,15 @@ class Qe {
|
|
|
2756
2739
|
* @returns Promise resolving to array of image URLs
|
|
2757
2740
|
*/
|
|
2758
2741
|
async loadFromFolder(t, i, e = !0) {
|
|
2759
|
-
const
|
|
2760
|
-
if (!
|
|
2742
|
+
const o = this.extractFolderId(t);
|
|
2743
|
+
if (!o)
|
|
2761
2744
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2762
2745
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2763
|
-
return this.loadImagesDirectly(
|
|
2746
|
+
return this.loadImagesDirectly(o, i);
|
|
2764
2747
|
try {
|
|
2765
|
-
return e ? await this.loadImagesRecursively(
|
|
2748
|
+
return e ? await this.loadImagesRecursively(o, i) : await this.loadImagesFromSingleFolder(o, i);
|
|
2766
2749
|
} catch (a) {
|
|
2767
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2750
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(o, i);
|
|
2768
2751
|
}
|
|
2769
2752
|
}
|
|
2770
2753
|
/**
|
|
@@ -2774,13 +2757,13 @@ class Qe {
|
|
|
2774
2757
|
* @returns Promise resolving to array of image URLs
|
|
2775
2758
|
*/
|
|
2776
2759
|
async loadImagesFromSingleFolder(t, i) {
|
|
2777
|
-
const e = [],
|
|
2760
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2778
2761
|
if (!s.ok)
|
|
2779
2762
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2780
|
-
const
|
|
2763
|
+
const c = (await s.json()).files.filter(
|
|
2781
2764
|
(u) => u.mimeType.startsWith("image/") && i.isAllowed(u.name)
|
|
2782
2765
|
);
|
|
2783
|
-
return this.log(`Found ${
|
|
2766
|
+
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2784
2767
|
e.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2785
2768
|
}), e;
|
|
2786
2769
|
}
|
|
@@ -2792,18 +2775,18 @@ class Qe {
|
|
|
2792
2775
|
*/
|
|
2793
2776
|
async loadFiles(t, i) {
|
|
2794
2777
|
const e = [];
|
|
2795
|
-
for (const
|
|
2796
|
-
const a = this.extractFileId(
|
|
2778
|
+
for (const o of t) {
|
|
2779
|
+
const a = this.extractFileId(o);
|
|
2797
2780
|
if (!a) {
|
|
2798
|
-
this.log(`Skipping invalid file URL: ${
|
|
2781
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2799
2782
|
continue;
|
|
2800
2783
|
}
|
|
2801
2784
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2802
2785
|
try {
|
|
2803
2786
|
const r = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(r);
|
|
2804
2787
|
if (s.ok) {
|
|
2805
|
-
const
|
|
2806
|
-
|
|
2788
|
+
const l = await s.json();
|
|
2789
|
+
l.mimeType.startsWith("image/") && i.isAllowed(l.name) ? (e.push(`https://lh3.googleusercontent.com/d/${a}=s1600`), this.log(`Added file: ${l.name}`)) : this.log(`Skipping non-image file: ${l.name} (${l.mimeType})`);
|
|
2807
2790
|
} else
|
|
2808
2791
|
this.log(`Failed to fetch metadata for file ${a}: ${s.status}`);
|
|
2809
2792
|
} catch (r) {
|
|
@@ -2831,9 +2814,9 @@ class Qe {
|
|
|
2831
2814
|
// Generic id parameter
|
|
2832
2815
|
];
|
|
2833
2816
|
for (const e of i) {
|
|
2834
|
-
const
|
|
2835
|
-
if (
|
|
2836
|
-
return
|
|
2817
|
+
const o = t.match(e);
|
|
2818
|
+
if (o && o[1])
|
|
2819
|
+
return o[1];
|
|
2837
2820
|
}
|
|
2838
2821
|
return null;
|
|
2839
2822
|
}
|
|
@@ -2844,15 +2827,15 @@ class Qe {
|
|
|
2844
2827
|
* @returns Promise resolving to array of image URLs
|
|
2845
2828
|
*/
|
|
2846
2829
|
async loadImagesRecursively(t, i) {
|
|
2847
|
-
const e = [],
|
|
2830
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2848
2831
|
if (!s.ok)
|
|
2849
2832
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2850
|
-
const
|
|
2833
|
+
const l = await s.json(), c = l.files.filter(
|
|
2851
2834
|
(h) => h.mimeType.startsWith("image/") && i.isAllowed(h.name)
|
|
2852
|
-
), u =
|
|
2835
|
+
), u = l.files.filter(
|
|
2853
2836
|
(h) => h.mimeType === "application/vnd.google-apps.folder"
|
|
2854
2837
|
);
|
|
2855
|
-
this.log(`Found ${
|
|
2838
|
+
this.log(`Found ${l.files.length} total items in folder ${t}`), l.files.forEach((h) => this.log(` - File: ${h.name} (${h.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((h) => {
|
|
2856
2839
|
e.push(`https://lh3.googleusercontent.com/d/${h.id}=s1600`), this.log(`Added file: ${h.name}`);
|
|
2857
2840
|
});
|
|
2858
2841
|
for (const h of u) {
|
|
@@ -2871,10 +2854,10 @@ class Qe {
|
|
|
2871
2854
|
*/
|
|
2872
2855
|
async loadImagesDirectly(t, i) {
|
|
2873
2856
|
try {
|
|
2874
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2875
|
-
if (!
|
|
2857
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(e, { mode: "cors" });
|
|
2858
|
+
if (!o.ok)
|
|
2876
2859
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2877
|
-
const a = await
|
|
2860
|
+
const a = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2878
2861
|
return [...new Set(s.map((u) => u[1]))].map(
|
|
2879
2862
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2880
2863
|
);
|
|
@@ -2967,13 +2950,13 @@ class ti {
|
|
|
2967
2950
|
if (!Array.isArray(t))
|
|
2968
2951
|
return console.warn("URLs must be an array:", t), [];
|
|
2969
2952
|
const e = [];
|
|
2970
|
-
for (const
|
|
2971
|
-
const a =
|
|
2953
|
+
for (const o of t) {
|
|
2954
|
+
const a = o.split("/").pop() || o;
|
|
2972
2955
|
if (!i.isAllowed(a)) {
|
|
2973
|
-
this.log(`Skipping filtered URL: ${
|
|
2956
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2974
2957
|
continue;
|
|
2975
2958
|
}
|
|
2976
|
-
this.validateUrls ? await this.validateUrl(
|
|
2959
|
+
this.validateUrls ? await this.validateUrl(o) ? e.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : e.push(o);
|
|
2977
2960
|
}
|
|
2978
2961
|
return e;
|
|
2979
2962
|
}
|
|
@@ -2987,16 +2970,16 @@ class ti {
|
|
|
2987
2970
|
async processPath(t, i, e) {
|
|
2988
2971
|
if (!Array.isArray(i))
|
|
2989
2972
|
return console.warn("files must be an array:", i), [];
|
|
2990
|
-
const
|
|
2973
|
+
const o = [];
|
|
2991
2974
|
for (const a of i) {
|
|
2992
2975
|
if (!e.isAllowed(a)) {
|
|
2993
2976
|
this.log(`Skipping filtered file: ${a}`);
|
|
2994
2977
|
continue;
|
|
2995
2978
|
}
|
|
2996
2979
|
const r = this.constructUrl(t, a);
|
|
2997
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2980
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
2998
2981
|
}
|
|
2999
|
-
return
|
|
2982
|
+
return o;
|
|
3000
2983
|
}
|
|
3001
2984
|
/**
|
|
3002
2985
|
* Process a JSON endpoint source
|
|
@@ -3007,17 +2990,17 @@ class ti {
|
|
|
3007
2990
|
*/
|
|
3008
2991
|
async processJson(t, i) {
|
|
3009
2992
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
3010
|
-
const e = new AbortController(),
|
|
2993
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), 1e4);
|
|
3011
2994
|
try {
|
|
3012
2995
|
const a = await fetch(t, { signal: e.signal });
|
|
3013
|
-
if (clearTimeout(
|
|
2996
|
+
if (clearTimeout(o), !a.ok)
|
|
3014
2997
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
3015
2998
|
const r = await a.json();
|
|
3016
2999
|
if (!r || !Array.isArray(r.images))
|
|
3017
3000
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3018
3001
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3019
3002
|
} catch (a) {
|
|
3020
|
-
throw clearTimeout(
|
|
3003
|
+
throw clearTimeout(o), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
3021
3004
|
}
|
|
3022
3005
|
}
|
|
3023
3006
|
/**
|
|
@@ -3039,11 +3022,11 @@ class ti {
|
|
|
3039
3022
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3040
3023
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3041
3024
|
try {
|
|
3042
|
-
const e = new AbortController(),
|
|
3025
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
3043
3026
|
method: "HEAD",
|
|
3044
3027
|
signal: e.signal
|
|
3045
3028
|
});
|
|
3046
|
-
return clearTimeout(
|
|
3029
|
+
return clearTimeout(o), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
3047
3030
|
} catch (e) {
|
|
3048
3031
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3049
3032
|
}
|
|
@@ -3060,8 +3043,8 @@ class ti {
|
|
|
3060
3043
|
return `${e}/${i}`;
|
|
3061
3044
|
if (typeof window > "u")
|
|
3062
3045
|
return `${e}/${i}`;
|
|
3063
|
-
const
|
|
3064
|
-
return `${
|
|
3046
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3047
|
+
return `${o}${r}/${i}`;
|
|
3065
3048
|
}
|
|
3066
3049
|
/**
|
|
3067
3050
|
* Check if URL is absolute (contains protocol)
|
|
@@ -3095,16 +3078,16 @@ class ei {
|
|
|
3095
3078
|
*/
|
|
3096
3079
|
async prepare(t) {
|
|
3097
3080
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3098
|
-
const i = this.loaders.map((e,
|
|
3099
|
-
this.log(`Loader ${
|
|
3081
|
+
const i = this.loaders.map((e, o) => e.prepare(t).then(() => {
|
|
3082
|
+
this.log(`Loader ${o} prepared with ${e.imagesLength()} images`);
|
|
3100
3083
|
}).catch((a) => {
|
|
3101
|
-
console.warn(`Loader ${
|
|
3084
|
+
console.warn(`Loader ${o} failed to prepare:`, a);
|
|
3102
3085
|
}));
|
|
3103
3086
|
await Promise.all(i);
|
|
3104
3087
|
for (const e of this.loaders)
|
|
3105
3088
|
if (e.isPrepared()) {
|
|
3106
|
-
const
|
|
3107
|
-
this._discoveredUrls.push(...
|
|
3089
|
+
const o = e.imageURLs();
|
|
3090
|
+
this._discoveredUrls.push(...o);
|
|
3108
3091
|
}
|
|
3109
3092
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3110
3093
|
}
|
|
@@ -3177,7 +3160,7 @@ class ii {
|
|
|
3177
3160
|
// isAllowedDate(date: Date): boolean
|
|
3178
3161
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
3179
3162
|
}
|
|
3180
|
-
const
|
|
3163
|
+
const oi = `
|
|
3181
3164
|
.fbn-ic-gallery {
|
|
3182
3165
|
position: relative;
|
|
3183
3166
|
width: 100%;
|
|
@@ -3227,20 +3210,20 @@ const ni = `
|
|
|
3227
3210
|
display: none !important;
|
|
3228
3211
|
}
|
|
3229
3212
|
`;
|
|
3230
|
-
function
|
|
3213
|
+
function ni() {
|
|
3231
3214
|
if (typeof document > "u") return;
|
|
3232
|
-
const
|
|
3233
|
-
if (document.getElementById(
|
|
3215
|
+
const n = "fbn-ic-functional-styles";
|
|
3216
|
+
if (document.getElementById(n)) return;
|
|
3234
3217
|
const t = document.createElement("style");
|
|
3235
|
-
t.id =
|
|
3218
|
+
t.id = n, t.textContent = oi, document.head.appendChild(t);
|
|
3236
3219
|
}
|
|
3237
3220
|
let si = class {
|
|
3238
3221
|
constructor(t = {}) {
|
|
3239
|
-
this.fullConfig =
|
|
3222
|
+
this.fullConfig = ne(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.animationEngine = new ce(this.fullConfig.animation), this.layoutEngine = new Ue({
|
|
3240
3223
|
layout: this.fullConfig.layout,
|
|
3241
3224
|
image: this.fullConfig.image
|
|
3242
3225
|
}), this.zoomEngine = new Be(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = et(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3243
|
-
const i = this.fullConfig.animation.entry ||
|
|
3226
|
+
const i = this.fullConfig.animation.entry || R.animation.entry;
|
|
3244
3227
|
this.entryAnimationEngine = new ve(
|
|
3245
3228
|
i,
|
|
3246
3229
|
this.fullConfig.layout.algorithm
|
|
@@ -3249,8 +3232,8 @@ let si = class {
|
|
|
3249
3232
|
e && e.type !== "none" ? this.idleAnimationEngine = new we(
|
|
3250
3233
|
e,
|
|
3251
3234
|
i.timing?.duration ?? 600
|
|
3252
|
-
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((
|
|
3253
|
-
this.idleAnimationEngine?.resumeForImage(
|
|
3235
|
+
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((o) => {
|
|
3236
|
+
this.idleAnimationEngine?.resumeForImage(o);
|
|
3254
3237
|
}), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
3255
3238
|
}
|
|
3256
3239
|
/**
|
|
@@ -3268,7 +3251,7 @@ let si = class {
|
|
|
3268
3251
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3269
3252
|
if (!t || t.length === 0)
|
|
3270
3253
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3271
|
-
const e = t.map((
|
|
3254
|
+
const e = t.map((o) => this.createLoaderFromEntry(o, i));
|
|
3272
3255
|
return e.length === 1 ? e[0] : new ei({
|
|
3273
3256
|
loaders: e,
|
|
3274
3257
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -3279,7 +3262,7 @@ let si = class {
|
|
|
3279
3262
|
*/
|
|
3280
3263
|
createLoaderFromEntry(t, i) {
|
|
3281
3264
|
if ("static" in t) {
|
|
3282
|
-
const e = t.static,
|
|
3265
|
+
const e = t.static, o = {
|
|
3283
3266
|
...e,
|
|
3284
3267
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3285
3268
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3287,14 +3270,14 @@ let si = class {
|
|
|
3287
3270
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3288
3271
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3289
3272
|
};
|
|
3290
|
-
return new ti(
|
|
3273
|
+
return new ti(o);
|
|
3291
3274
|
} else if ("googleDrive" in t) {
|
|
3292
|
-
const e = t.googleDrive,
|
|
3275
|
+
const e = t.googleDrive, o = {
|
|
3293
3276
|
...e,
|
|
3294
3277
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3295
3278
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3296
3279
|
};
|
|
3297
|
-
return new Qe(
|
|
3280
|
+
return new Qe(o);
|
|
3298
3281
|
} else
|
|
3299
3282
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3300
3283
|
}
|
|
@@ -3303,11 +3286,11 @@ let si = class {
|
|
|
3303
3286
|
*/
|
|
3304
3287
|
async init() {
|
|
3305
3288
|
try {
|
|
3306
|
-
if (
|
|
3289
|
+
if (ni(), this.containerRef)
|
|
3307
3290
|
this.containerEl = this.containerRef;
|
|
3308
3291
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3309
3292
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3310
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new
|
|
3293
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new yt(this.containerEl, {
|
|
3311
3294
|
onNext: () => this.navigateToNextImage(),
|
|
3312
3295
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3313
3296
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
@@ -3320,7 +3303,7 @@ let si = class {
|
|
|
3320
3303
|
}
|
|
3321
3304
|
}
|
|
3322
3305
|
setupUI() {
|
|
3323
|
-
const t = this.fullConfig.
|
|
3306
|
+
const t = this.fullConfig.ui;
|
|
3324
3307
|
t.showLoadingSpinner && (t.loadingElement ? (this.loadingEl = this.resolveElement(t.loadingElement), this.loadingElAutoCreated = !1) : (this.loadingEl = this.createDefaultLoadingElement(), this.loadingElAutoCreated = !0)), t.errorElement ? (this.errorEl = this.resolveElement(t.errorElement), this.errorElAutoCreated = !1) : (this.errorEl = this.createDefaultErrorElement(), this.errorElAutoCreated = !0), t.showImageCounter && (t.counterElement ? (this.counterEl = this.resolveElement(t.counterElement), this.counterElAutoCreated = !1) : (this.counterEl = this.createDefaultCounterElement(), this.counterElAutoCreated = !0));
|
|
3325
3308
|
}
|
|
3326
3309
|
resolveElement(t) {
|
|
@@ -3355,7 +3338,7 @@ let si = class {
|
|
|
3355
3338
|
navigateToNextImage() {
|
|
3356
3339
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3357
3340
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3358
|
-
(
|
|
3341
|
+
(o) => o.dataset.imageId === String(t)
|
|
3359
3342
|
);
|
|
3360
3343
|
if (!i) return;
|
|
3361
3344
|
const e = this.imageLayouts[t];
|
|
@@ -3367,7 +3350,7 @@ let si = class {
|
|
|
3367
3350
|
navigateToPreviousImage() {
|
|
3368
3351
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3369
3352
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3370
|
-
(
|
|
3353
|
+
(o) => o.dataset.imageId === String(t)
|
|
3371
3354
|
);
|
|
3372
3355
|
if (!i) return;
|
|
3373
3356
|
const e = this.imageLayouts[t];
|
|
@@ -3383,8 +3366,8 @@ let si = class {
|
|
|
3383
3366
|
}, 500));
|
|
3384
3367
|
}
|
|
3385
3368
|
getImageHeight() {
|
|
3386
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3387
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3369
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, o = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3370
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, o) : t <= i.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
|
|
3388
3371
|
}
|
|
3389
3372
|
/**
|
|
3390
3373
|
* Get container bounds for layout calculations
|
|
@@ -3407,12 +3390,12 @@ let si = class {
|
|
|
3407
3390
|
this.showError("No images found."), this.showLoading(!1);
|
|
3408
3391
|
return;
|
|
3409
3392
|
}
|
|
3410
|
-
const e = this.getContainerBounds(),
|
|
3411
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3393
|
+
const e = this.getContainerBounds(), o = this.getImageHeight(), a = window.innerWidth;
|
|
3394
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3412
3395
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3413
3396
|
e,
|
|
3414
3397
|
t,
|
|
3415
|
-
|
|
3398
|
+
o,
|
|
3416
3399
|
a
|
|
3417
3400
|
);
|
|
3418
3401
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3430,92 +3413,92 @@ let si = class {
|
|
|
3430
3413
|
if (!this.containerEl) return;
|
|
3431
3414
|
const e = this.getContainerBounds();
|
|
3432
3415
|
this.currentImageHeight = i;
|
|
3433
|
-
const
|
|
3416
|
+
const o = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3434
3417
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3435
3418
|
let r = 0;
|
|
3436
|
-
const s = (
|
|
3437
|
-
this.containerEl && (this.containerEl.appendChild(
|
|
3438
|
-
if (
|
|
3419
|
+
const s = (c) => {
|
|
3420
|
+
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
3421
|
+
if (c.offsetWidth, c.style.opacity = this.defaultStyles.opacity ?? "1", c.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || c.dataset.startRotation !== c.dataset.rotation || c.dataset.startScale !== c.dataset.scale)) {
|
|
3439
3422
|
const d = {
|
|
3440
|
-
x: parseFloat(
|
|
3441
|
-
y: parseFloat(
|
|
3423
|
+
x: parseFloat(c.dataset.startX),
|
|
3424
|
+
y: parseFloat(c.dataset.startY)
|
|
3442
3425
|
}, f = {
|
|
3443
|
-
x: parseFloat(
|
|
3444
|
-
y: parseFloat(
|
|
3445
|
-
},
|
|
3426
|
+
x: parseFloat(c.dataset.endX),
|
|
3427
|
+
y: parseFloat(c.dataset.endY)
|
|
3428
|
+
}, y = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), b = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, w = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3446
3429
|
pe({
|
|
3447
|
-
element:
|
|
3430
|
+
element: c,
|
|
3448
3431
|
startPosition: d,
|
|
3449
3432
|
endPosition: f,
|
|
3450
3433
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3451
3434
|
duration: v.duration,
|
|
3452
|
-
imageWidth:
|
|
3435
|
+
imageWidth: y,
|
|
3453
3436
|
imageHeight: p,
|
|
3454
3437
|
rotation: g,
|
|
3455
3438
|
scale: m,
|
|
3456
3439
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3457
|
-
startRotation:
|
|
3440
|
+
startRotation: b,
|
|
3458
3441
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3459
3442
|
startScale: w
|
|
3460
3443
|
});
|
|
3461
3444
|
} else {
|
|
3462
|
-
const d =
|
|
3463
|
-
|
|
3445
|
+
const d = c.dataset.finalTransform || "";
|
|
3446
|
+
c.style.transform = d;
|
|
3464
3447
|
}
|
|
3465
|
-
const h = parseInt(
|
|
3448
|
+
const h = parseInt(c.dataset.imageId || "0");
|
|
3466
3449
|
if (this.fullConfig.config.debug?.enabled && h < 3) {
|
|
3467
|
-
const d =
|
|
3450
|
+
const d = c.dataset.finalTransform || "";
|
|
3468
3451
|
console.log(`Image ${h} final state:`, {
|
|
3469
|
-
left:
|
|
3470
|
-
top:
|
|
3471
|
-
width:
|
|
3472
|
-
height:
|
|
3473
|
-
computedWidth:
|
|
3474
|
-
computedHeight:
|
|
3452
|
+
left: c.style.left,
|
|
3453
|
+
top: c.style.top,
|
|
3454
|
+
width: c.style.width,
|
|
3455
|
+
height: c.style.height,
|
|
3456
|
+
computedWidth: c.offsetWidth,
|
|
3457
|
+
computedHeight: c.offsetHeight,
|
|
3475
3458
|
transform: d,
|
|
3476
3459
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3477
3460
|
});
|
|
3478
3461
|
}
|
|
3479
3462
|
if (this.idleAnimationEngine) {
|
|
3480
3463
|
const d = this.entryAnimationEngine.getTiming().duration;
|
|
3481
|
-
this.idleAnimationEngine.register(
|
|
3464
|
+
this.idleAnimationEngine.register(c, h, this.imageElements.length, d);
|
|
3482
3465
|
}
|
|
3483
3466
|
}), r++);
|
|
3484
|
-
},
|
|
3467
|
+
}, l = () => {
|
|
3485
3468
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3486
3469
|
for (; this.displayQueue.length > 0; ) {
|
|
3487
|
-
const
|
|
3488
|
-
|
|
3470
|
+
const c = this.displayQueue.shift();
|
|
3471
|
+
c && s(c);
|
|
3489
3472
|
}
|
|
3490
3473
|
return;
|
|
3491
3474
|
}
|
|
3492
3475
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3493
|
-
if (
|
|
3476
|
+
if (o !== this.loadGeneration) {
|
|
3494
3477
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3495
3478
|
return;
|
|
3496
3479
|
}
|
|
3497
3480
|
if (this.displayQueue.length > 0) {
|
|
3498
|
-
const
|
|
3499
|
-
|
|
3481
|
+
const c = this.displayQueue.shift();
|
|
3482
|
+
c && s(c);
|
|
3500
3483
|
}
|
|
3501
3484
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3502
3485
|
}, this.fullConfig.animation.queue.interval);
|
|
3503
3486
|
};
|
|
3504
3487
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3505
|
-
const
|
|
3488
|
+
const c = new IntersectionObserver((u) => {
|
|
3506
3489
|
u.forEach((h) => {
|
|
3507
|
-
h.isIntersecting && (
|
|
3490
|
+
h.isIntersecting && (l(), c.disconnect());
|
|
3508
3491
|
});
|
|
3509
3492
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3510
|
-
|
|
3493
|
+
c.observe(this.containerEl);
|
|
3511
3494
|
} else
|
|
3512
|
-
|
|
3513
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((
|
|
3495
|
+
l();
|
|
3496
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), a.forEach((c, u) => {
|
|
3514
3497
|
const h = document.createElement("div");
|
|
3515
3498
|
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";
|
|
3516
|
-
const d =
|
|
3499
|
+
const d = c.x, f = c.y;
|
|
3517
3500
|
h.style.left = `${d - 6}px`, h.style.top = `${f - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(h);
|
|
3518
|
-
})), t.forEach((
|
|
3501
|
+
})), t.forEach((c, u) => {
|
|
3519
3502
|
const h = document.createElement("img");
|
|
3520
3503
|
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3521
3504
|
const d = a[u];
|
|
@@ -3532,29 +3515,29 @@ let si = class {
|
|
|
3532
3515
|
}), h.addEventListener("click", (f) => {
|
|
3533
3516
|
f.stopPropagation(), this.handleImageClick(h, d);
|
|
3534
3517
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3535
|
-
if (
|
|
3518
|
+
if (o !== this.loadGeneration)
|
|
3536
3519
|
return;
|
|
3537
|
-
const f = h.naturalWidth / h.naturalHeight,
|
|
3538
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${
|
|
3539
|
-
const p = { x: d.x, y: d.y }, g = { width:
|
|
3520
|
+
const f = h.naturalWidth / h.naturalHeight, y = i * f;
|
|
3521
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${y}`), h.style.width = `${y}px`, h.cachedRenderedWidth = y, h.aspectRatio = f, ft(h, this.fullConfig.styling?.default, i, y);
|
|
3522
|
+
const p = { x: d.x, y: d.y }, g = { width: y, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3540
3523
|
p,
|
|
3541
3524
|
g,
|
|
3542
3525
|
e,
|
|
3543
3526
|
u,
|
|
3544
3527
|
t.length
|
|
3545
|
-
),
|
|
3528
|
+
), b = this.entryAnimationEngine.calculateStartRotation(d.rotation), w = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3546
3529
|
d.rotation,
|
|
3547
3530
|
d.scale,
|
|
3548
|
-
|
|
3531
|
+
y,
|
|
3549
3532
|
i
|
|
3550
|
-
),
|
|
3533
|
+
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3551
3534
|
m,
|
|
3552
3535
|
p,
|
|
3553
3536
|
d.rotation,
|
|
3554
3537
|
d.scale,
|
|
3555
|
-
b,
|
|
3556
|
-
i,
|
|
3557
3538
|
y,
|
|
3539
|
+
i,
|
|
3540
|
+
b,
|
|
3558
3541
|
w
|
|
3559
3542
|
);
|
|
3560
3543
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
@@ -3563,15 +3546,15 @@ let si = class {
|
|
|
3563
3546
|
left: d.x,
|
|
3564
3547
|
top: d.y,
|
|
3565
3548
|
finalTransform: v,
|
|
3566
|
-
renderedWidth:
|
|
3549
|
+
renderedWidth: y,
|
|
3567
3550
|
renderedHeight: i
|
|
3568
|
-
}), h.style.transform =
|
|
3569
|
-
}, h.onerror = () => r++, h.src =
|
|
3551
|
+
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || b !== d.rotation || w !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(p.x), h.dataset.endY = String(p.y), h.dataset.imageWidth = String(y), h.dataset.imageHeight = String(i), h.dataset.rotation = String(d.rotation), h.dataset.scale = String(d.scale), h.dataset.startRotation = String(b), h.dataset.startScale = String(w)), this.displayQueue.push(h);
|
|
3552
|
+
}, h.onerror = () => r++, h.src = c;
|
|
3570
3553
|
});
|
|
3571
3554
|
}
|
|
3572
3555
|
async handleImageClick(t, i) {
|
|
3573
3556
|
if (!this.containerEl) return;
|
|
3574
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3557
|
+
const e = this.zoomEngine.isFocused(t), o = {
|
|
3575
3558
|
width: this.containerEl.offsetWidth,
|
|
3576
3559
|
height: this.containerEl.offsetHeight
|
|
3577
3560
|
};
|
|
@@ -3580,7 +3563,7 @@ let si = class {
|
|
|
3580
3563
|
else {
|
|
3581
3564
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3582
3565
|
const a = t.dataset.imageId;
|
|
3583
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3566
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3584
3567
|
}
|
|
3585
3568
|
}
|
|
3586
3569
|
/**
|
|
@@ -3590,7 +3573,7 @@ let si = class {
|
|
|
3590
3573
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null), this.loadGeneration++, this.displayQueue = [], this.containerEl && this.containerEl.querySelectorAll(".fbn-ic-image, .fbn-ic-debug-center").forEach((t) => t.remove()), this.imageElements = [], this.imageLayouts = [], this.currentFocusIndex = null, this.hoveredImage = null, this.layoutEngine.reset(), this.zoomEngine.reset(), this.idleAnimationEngine?.stopAll(), this.imagesLoaded = !1;
|
|
3591
3574
|
}
|
|
3592
3575
|
showLoading(t) {
|
|
3593
|
-
!this.fullConfig.
|
|
3576
|
+
!this.fullConfig.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
|
|
3594
3577
|
}
|
|
3595
3578
|
showError(t) {
|
|
3596
3579
|
this.errorEl && (this.errorEl.textContent = t, this.errorEl.classList.remove("fbn-ic-hidden"));
|
|
@@ -3599,7 +3582,7 @@ let si = class {
|
|
|
3599
3582
|
this.errorEl && this.errorEl.classList.add("fbn-ic-hidden");
|
|
3600
3583
|
}
|
|
3601
3584
|
updateCounter(t) {
|
|
3602
|
-
!this.fullConfig.
|
|
3585
|
+
!this.fullConfig.ui.showImageCounter || !this.counterEl || (this.counterEl.textContent = `${t + 1} of ${this.imageElements.length}`, this.counterEl.classList.remove("fbn-ic-hidden"));
|
|
3603
3586
|
}
|
|
3604
3587
|
hideCounter() {
|
|
3605
3588
|
this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
|
|
@@ -3619,27 +3602,27 @@ const ci = Ht({
|
|
|
3619
3602
|
required: !0
|
|
3620
3603
|
}
|
|
3621
3604
|
},
|
|
3622
|
-
setup(
|
|
3605
|
+
setup(n, { expose: t }) {
|
|
3623
3606
|
const i = It(null), e = It(null);
|
|
3624
|
-
function
|
|
3607
|
+
function o() {
|
|
3625
3608
|
if (!i.value) return;
|
|
3626
3609
|
e.value?.destroy();
|
|
3627
3610
|
const a = new si({
|
|
3628
3611
|
container: i.value,
|
|
3629
|
-
...
|
|
3612
|
+
...n.options
|
|
3630
3613
|
});
|
|
3631
3614
|
e.value = a, a.init().catch((r) => {
|
|
3632
3615
|
console.error("ImageCloud init failed:", r);
|
|
3633
3616
|
});
|
|
3634
3617
|
}
|
|
3635
|
-
return
|
|
3636
|
-
|
|
3637
|
-
}),
|
|
3618
|
+
return Nt(() => {
|
|
3619
|
+
o();
|
|
3620
|
+
}), kt(() => {
|
|
3638
3621
|
e.value?.destroy(), e.value = null;
|
|
3639
3622
|
}), jt(
|
|
3640
|
-
() =>
|
|
3623
|
+
() => n.options,
|
|
3641
3624
|
() => {
|
|
3642
|
-
|
|
3625
|
+
o();
|
|
3643
3626
|
},
|
|
3644
3627
|
{ deep: !0 }
|
|
3645
3628
|
), t({ instance: e }), () => Wt("div", {
|