@frybynite/image-cloud 0.11.3 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -5
- package/dist/image-cloud-auto-init.js +84 -83
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +513 -512
- 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 +2 -0
- package/dist/react.d.ts +2 -0
- package/dist/react.js +136 -135
- package/dist/react.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/vue.d.ts +2 -0
- package/dist/vue.js +518 -517
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +2 -0
- package/dist/web-component.js +83 -82
- package/dist/web-component.js.map +1 -1
- package/package.json +14 -1
package/dist/image-cloud.js
CHANGED
|
@@ -22,7 +22,7 @@ const mt = Object.freeze({
|
|
|
22
22
|
type: "linear"
|
|
23
23
|
}), vt = Object.freeze({
|
|
24
24
|
mode: "none"
|
|
25
|
-
}),
|
|
25
|
+
}), Et = Object.freeze({
|
|
26
26
|
mode: "none"
|
|
27
27
|
}), Ft = Object.freeze({
|
|
28
28
|
default: Object.freeze({
|
|
@@ -157,7 +157,7 @@ const mt = Object.freeze({
|
|
|
157
157
|
// smooth deceleration
|
|
158
158
|
path: yt,
|
|
159
159
|
rotation: vt,
|
|
160
|
-
scale:
|
|
160
|
+
scale: Et
|
|
161
161
|
}),
|
|
162
162
|
idle: Dt
|
|
163
163
|
}),
|
|
@@ -186,117 +186,117 @@ const mt = Object.freeze({
|
|
|
186
186
|
// Image styling
|
|
187
187
|
styling: Ft
|
|
188
188
|
});
|
|
189
|
-
function Z(
|
|
190
|
-
if (!
|
|
191
|
-
if (!t) return { ...
|
|
192
|
-
const i = { ...
|
|
193
|
-
return t.border !== void 0 && (i.border = { ...
|
|
189
|
+
function Z(o, t) {
|
|
190
|
+
if (!o) return t || {};
|
|
191
|
+
if (!t) return { ...o };
|
|
192
|
+
const i = { ...o };
|
|
193
|
+
return t.border !== void 0 && (i.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
194
194
|
}
|
|
195
|
-
function Xt(
|
|
196
|
-
if (!t) return { ...
|
|
197
|
-
const i = Z(
|
|
198
|
-
Z(i,
|
|
195
|
+
function Xt(o, t) {
|
|
196
|
+
if (!t) return { ...o };
|
|
197
|
+
const i = Z(o.default, t.default), e = Z(
|
|
198
|
+
Z(i, o.hover),
|
|
199
199
|
t.hover
|
|
200
|
-
),
|
|
201
|
-
Z(i,
|
|
200
|
+
), n = Z(
|
|
201
|
+
Z(i, o.focused),
|
|
202
202
|
t.focused
|
|
203
203
|
);
|
|
204
204
|
return {
|
|
205
205
|
default: i,
|
|
206
206
|
hover: e,
|
|
207
|
-
focused:
|
|
207
|
+
focused: n
|
|
208
208
|
};
|
|
209
209
|
}
|
|
210
|
-
function Vt(
|
|
211
|
-
if (!t) return { ...
|
|
212
|
-
const i = { ...
|
|
210
|
+
function Vt(o, t) {
|
|
211
|
+
if (!t) return { ...o };
|
|
212
|
+
const i = { ...o };
|
|
213
213
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
214
|
-
...
|
|
214
|
+
...o.sizing,
|
|
215
215
|
...t.sizing
|
|
216
216
|
}, t.sizing.variance)) {
|
|
217
|
-
const e = t.sizing.variance,
|
|
218
|
-
i.sizing.variance = { min:
|
|
217
|
+
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1, s = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : o.sizing?.variance?.max ?? 1;
|
|
218
|
+
i.sizing.variance = { min: n, max: s };
|
|
219
219
|
}
|
|
220
220
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
221
|
-
...
|
|
221
|
+
...o.rotation,
|
|
222
222
|
...t.rotation
|
|
223
223
|
}, t.rotation.range)) {
|
|
224
|
-
const e = t.rotation.range,
|
|
225
|
-
i.rotation.range = { min:
|
|
224
|
+
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15, s = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : o.rotation?.range?.max ?? 15;
|
|
225
|
+
i.rotation.range = { min: n, max: s };
|
|
226
226
|
}
|
|
227
227
|
return i;
|
|
228
228
|
}
|
|
229
|
-
function Jt(
|
|
230
|
-
const t =
|
|
231
|
-
|
|
229
|
+
function Jt(o = {}) {
|
|
230
|
+
const t = o.image, i = [...o.loaders ?? []];
|
|
231
|
+
o.images && o.images.length > 0 && i.unshift({
|
|
232
232
|
static: {
|
|
233
|
-
sources: [{ urls:
|
|
233
|
+
sources: [{ urls: o.images }]
|
|
234
234
|
}
|
|
235
235
|
});
|
|
236
|
-
const
|
|
236
|
+
const n = {
|
|
237
237
|
loaders: {
|
|
238
238
|
...Ot,
|
|
239
|
-
...
|
|
239
|
+
...o.config?.loaders ?? {}
|
|
240
240
|
}
|
|
241
241
|
}, s = {
|
|
242
242
|
loaders: i,
|
|
243
|
-
config:
|
|
243
|
+
config: n,
|
|
244
244
|
image: Vt(Mt, t),
|
|
245
245
|
layout: { ...L.layout },
|
|
246
246
|
animation: { ...L.animation },
|
|
247
247
|
interaction: { ...L.interaction },
|
|
248
248
|
ui: { ...L.ui },
|
|
249
|
-
styling: Xt(Ft,
|
|
249
|
+
styling: Xt(Ft, o.styling)
|
|
250
250
|
};
|
|
251
|
-
if (
|
|
251
|
+
if (o.layout && (s.layout = {
|
|
252
252
|
...L.layout,
|
|
253
|
-
...
|
|
254
|
-
},
|
|
253
|
+
...o.layout
|
|
254
|
+
}, o.layout.responsive && (s.layout.responsive = {
|
|
255
255
|
...L.layout.responsive,
|
|
256
|
-
mobile:
|
|
257
|
-
tablet:
|
|
258
|
-
}),
|
|
256
|
+
mobile: o.layout.responsive.mobile ? { ...L.layout.responsive.mobile, ...o.layout.responsive.mobile } : L.layout.responsive.mobile,
|
|
257
|
+
tablet: o.layout.responsive.tablet ? { ...L.layout.responsive.tablet, ...o.layout.responsive.tablet } : L.layout.responsive.tablet
|
|
258
|
+
}), o.layout.spacing && (s.layout.spacing = {
|
|
259
259
|
...L.layout.spacing,
|
|
260
|
-
...
|
|
261
|
-
})),
|
|
260
|
+
...o.layout.spacing
|
|
261
|
+
})), o.animation && (s.animation = {
|
|
262
262
|
...L.animation,
|
|
263
|
-
...
|
|
264
|
-
},
|
|
263
|
+
...o.animation
|
|
264
|
+
}, o.animation.easing && (s.animation.easing = {
|
|
265
265
|
...L.animation.easing,
|
|
266
|
-
...
|
|
267
|
-
}),
|
|
266
|
+
...o.animation.easing
|
|
267
|
+
}), o.animation.queue && (s.animation.queue = {
|
|
268
268
|
...L.animation.queue,
|
|
269
|
-
...
|
|
270
|
-
}),
|
|
269
|
+
...o.animation.queue
|
|
270
|
+
}), o.animation.entry && (s.animation.entry = {
|
|
271
271
|
...L.animation.entry,
|
|
272
|
-
...
|
|
273
|
-
start:
|
|
272
|
+
...o.animation.entry,
|
|
273
|
+
start: o.animation.entry.start ? {
|
|
274
274
|
...L.animation.entry.start,
|
|
275
|
-
...
|
|
276
|
-
circular:
|
|
275
|
+
...o.animation.entry.start,
|
|
276
|
+
circular: o.animation.entry.start.circular ? { ...L.animation.entry.start.circular, ...o.animation.entry.start.circular } : L.animation.entry.start.circular
|
|
277
277
|
} : L.animation.entry.start,
|
|
278
|
-
timing:
|
|
279
|
-
path:
|
|
280
|
-
rotation:
|
|
281
|
-
scale:
|
|
282
|
-
}),
|
|
278
|
+
timing: o.animation.entry.timing ? { ...L.animation.entry.timing, ...o.animation.entry.timing } : L.animation.entry.timing,
|
|
279
|
+
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : L.animation.entry.path,
|
|
280
|
+
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : L.animation.entry.rotation,
|
|
281
|
+
scale: o.animation.entry.scale ? { ...Et, ...o.animation.entry.scale } : L.animation.entry.scale
|
|
282
|
+
}), o.animation.idle && (s.animation.idle = {
|
|
283
283
|
...Dt,
|
|
284
|
-
...
|
|
285
|
-
})),
|
|
284
|
+
...o.animation.idle
|
|
285
|
+
})), o.interaction && (s.interaction = {
|
|
286
286
|
...L.interaction,
|
|
287
|
-
...
|
|
288
|
-
},
|
|
287
|
+
...o.interaction
|
|
288
|
+
}, o.interaction.focus && (s.interaction.focus = {
|
|
289
289
|
...L.interaction.focus,
|
|
290
|
-
...
|
|
291
|
-
}),
|
|
290
|
+
...o.interaction.focus
|
|
291
|
+
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
292
292
|
...L.interaction.navigation,
|
|
293
|
-
...
|
|
293
|
+
...o.interaction.navigation
|
|
294
294
|
})), s.ui = {
|
|
295
295
|
...L.ui,
|
|
296
|
-
...
|
|
296
|
+
...o.ui
|
|
297
297
|
}, s.config.debug = {
|
|
298
298
|
...zt,
|
|
299
|
-
...
|
|
299
|
+
...o.config?.debug ?? {}
|
|
300
300
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
301
301
|
const r = { shape: "hexagon", mode: "height-relative" };
|
|
302
302
|
s.styling = {
|
|
@@ -308,14 +308,14 @@ function Jt(n = {}) {
|
|
|
308
308
|
}
|
|
309
309
|
return s;
|
|
310
310
|
}
|
|
311
|
-
function Kt(
|
|
312
|
-
return { ...
|
|
311
|
+
function Kt(o, t) {
|
|
312
|
+
return { ...o ? St[o] : St.playful, ...t };
|
|
313
313
|
}
|
|
314
|
-
function Zt(
|
|
315
|
-
return { ...
|
|
314
|
+
function Zt(o, t) {
|
|
315
|
+
return { ...o ? Ct[o] : Ct.gentle, ...t };
|
|
316
316
|
}
|
|
317
|
-
function Qt(
|
|
318
|
-
return { ...
|
|
317
|
+
function Qt(o, t) {
|
|
318
|
+
return { ...o ? Rt[o] : Rt.gentle, ...t };
|
|
319
319
|
}
|
|
320
320
|
class te {
|
|
321
321
|
constructor(t) {
|
|
@@ -328,8 +328,8 @@ class te {
|
|
|
328
328
|
buildTransformString(t) {
|
|
329
329
|
const i = ["translate(-50%, -50%)"];
|
|
330
330
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
331
|
-
const e = t.x ?? 0,
|
|
332
|
-
i.push(`translate(${e}px, ${
|
|
331
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
332
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
333
333
|
}
|
|
334
334
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
335
335
|
}
|
|
@@ -342,9 +342,9 @@ class te {
|
|
|
342
342
|
* @param easing - CSS easing function (optional)
|
|
343
343
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
344
344
|
*/
|
|
345
|
-
animateTransformCancellable(t, i, e,
|
|
345
|
+
animateTransformCancellable(t, i, e, n = null, s = null) {
|
|
346
346
|
this.cancelAllAnimations(t);
|
|
347
|
-
const r =
|
|
347
|
+
const r = n ?? this.config.duration, a = s ?? this.config.easing.default, c = this.buildTransformString(i), d = this.buildTransformString(e);
|
|
348
348
|
t.style.transition = "none";
|
|
349
349
|
const u = t.animate(
|
|
350
350
|
[
|
|
@@ -381,13 +381,13 @@ class te {
|
|
|
381
381
|
cancelAnimation(t, i = !0) {
|
|
382
382
|
const e = this.getCurrentTransform(t.element);
|
|
383
383
|
if (t.animation.cancel(), i) {
|
|
384
|
-
const
|
|
384
|
+
const n = this.buildTransformString({
|
|
385
385
|
x: e.x,
|
|
386
386
|
y: e.y,
|
|
387
387
|
rotation: e.rotation,
|
|
388
388
|
scale: e.scale
|
|
389
389
|
});
|
|
390
|
-
t.element.style.transform =
|
|
390
|
+
t.element.style.transform = n;
|
|
391
391
|
}
|
|
392
392
|
return this.activeAnimations.delete(t.element), e;
|
|
393
393
|
}
|
|
@@ -400,8 +400,8 @@ class te {
|
|
|
400
400
|
const i = this.activeAnimations.get(t);
|
|
401
401
|
i && this.cancelAnimation(i, !1);
|
|
402
402
|
const e = t.getAnimations();
|
|
403
|
-
for (const
|
|
404
|
-
|
|
403
|
+
for (const n of e)
|
|
404
|
+
n.cancel();
|
|
405
405
|
}
|
|
406
406
|
/**
|
|
407
407
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -413,7 +413,7 @@ class te {
|
|
|
413
413
|
const e = getComputedStyle(t).transform;
|
|
414
414
|
if (e === "none" || !e)
|
|
415
415
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
416
|
-
const
|
|
416
|
+
const n = new DOMMatrix(e), s = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), a = n.e, c = n.f;
|
|
417
417
|
return { x: a, y: c, rotation: r, scale: s };
|
|
418
418
|
}
|
|
419
419
|
/**
|
|
@@ -440,9 +440,9 @@ class te {
|
|
|
440
440
|
* @param easing - CSS easing function (optional)
|
|
441
441
|
* @returns Promise that resolves when animation completes
|
|
442
442
|
*/
|
|
443
|
-
animateTransform(t, i, e = null,
|
|
443
|
+
animateTransform(t, i, e = null, n = null) {
|
|
444
444
|
return new Promise((s) => {
|
|
445
|
-
const r = e ?? this.config.duration, a =
|
|
445
|
+
const r = e ?? this.config.duration, a = n ?? this.config.easing.default;
|
|
446
446
|
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
447
447
|
s();
|
|
448
448
|
}, r);
|
|
@@ -473,18 +473,18 @@ class te {
|
|
|
473
473
|
return new Promise((i) => setTimeout(i, t));
|
|
474
474
|
}
|
|
475
475
|
}
|
|
476
|
-
function J(
|
|
477
|
-
return
|
|
476
|
+
function J(o, t, i) {
|
|
477
|
+
return o + (t - o) * i;
|
|
478
478
|
}
|
|
479
|
-
function ee(
|
|
480
|
-
const { overshoot:
|
|
481
|
-
let u = 0, f = 0, m = 1, p =
|
|
479
|
+
function ee(o, t, i, e) {
|
|
480
|
+
const { overshoot: n, bounces: s, decayRatio: r } = e, a = i.x - t.x, c = i.y - t.y, d = ie(s, r);
|
|
481
|
+
let u = 0, f = 0, m = 1, p = n, w = !1;
|
|
482
482
|
for (let l = 0; l < d.length; l++)
|
|
483
|
-
if (
|
|
483
|
+
if (o <= d[l].time) {
|
|
484
484
|
f = l === 0 ? 0 : d[l - 1].time, m = d[l].time, p = d[l].overshoot, w = d[l].isOvershoot;
|
|
485
485
|
break;
|
|
486
486
|
}
|
|
487
|
-
const v = (
|
|
487
|
+
const v = (o - f) / (m - f);
|
|
488
488
|
if (w)
|
|
489
489
|
u = 1 + p * at(v);
|
|
490
490
|
else if (f === 0)
|
|
@@ -500,72 +500,72 @@ function ee(n, t, i, e) {
|
|
|
500
500
|
y: t.y + c * u
|
|
501
501
|
};
|
|
502
502
|
}
|
|
503
|
-
function ie(
|
|
503
|
+
function ie(o, t) {
|
|
504
504
|
const i = [];
|
|
505
505
|
let e = 0.6;
|
|
506
506
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
507
|
-
let
|
|
508
|
-
const r = 0.4 / (
|
|
509
|
-
for (let a = 0; a <
|
|
510
|
-
e += r, i.push({ time: e, overshoot:
|
|
507
|
+
let n = 0.15;
|
|
508
|
+
const r = 0.4 / (o * 2);
|
|
509
|
+
for (let a = 0; a < o; a++)
|
|
510
|
+
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
511
511
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
512
512
|
}
|
|
513
|
-
function
|
|
514
|
-
const { stiffness:
|
|
513
|
+
function ne(o, t, i, e) {
|
|
514
|
+
const { stiffness: n, damping: s, mass: r, oscillations: a } = e, c = i.x - t.x, d = i.y - t.y, u = Math.sqrt(n / r), f = s / (2 * Math.sqrt(n * r));
|
|
515
515
|
let m;
|
|
516
516
|
if (f < 1) {
|
|
517
|
-
const p = u * Math.sqrt(1 - f * f), w = Math.exp(-f * u *
|
|
517
|
+
const p = u * Math.sqrt(1 - f * f), w = Math.exp(-f * u * o * 3), v = Math.cos(p * o * a * Math.PI);
|
|
518
518
|
m = 1 - w * v;
|
|
519
519
|
} else
|
|
520
|
-
m = 1 - Math.exp(-u *
|
|
520
|
+
m = 1 - Math.exp(-u * o * 3);
|
|
521
521
|
return m = Math.max(0, Math.min(m, 1.3)), {
|
|
522
522
|
x: t.x + c * m,
|
|
523
523
|
y: t.y + d * m
|
|
524
524
|
};
|
|
525
525
|
}
|
|
526
|
-
function
|
|
527
|
-
const { amplitude:
|
|
526
|
+
function oe(o, t, i, e) {
|
|
527
|
+
const { amplitude: n, frequency: s, decay: r, decayRate: a, phase: c } = e, d = i.x - t.x, u = i.y - t.y, f = Math.sqrt(d * d + u * u), m = f > 0 ? -u / f : 0, p = f > 0 ? d / f : 1, w = s * Math.PI * 2 * o + c, v = r ? Math.pow(1 - o, a) : 1, l = n * Math.sin(w) * v, g = se(o);
|
|
528
528
|
return {
|
|
529
529
|
x: J(t.x, i.x, g) + l * m,
|
|
530
530
|
y: J(t.y, i.y, g) + l * p
|
|
531
531
|
};
|
|
532
532
|
}
|
|
533
|
-
function at(
|
|
534
|
-
return 1 - (1 -
|
|
533
|
+
function at(o) {
|
|
534
|
+
return 1 - (1 - o) * (1 - o);
|
|
535
535
|
}
|
|
536
|
-
function se(
|
|
537
|
-
return 1 - Math.pow(1 -
|
|
536
|
+
function se(o) {
|
|
537
|
+
return 1 - Math.pow(1 - o, 3);
|
|
538
538
|
}
|
|
539
|
-
function ae(
|
|
540
|
-
const { amplitude: e, frequency:
|
|
539
|
+
function ae(o, t, i) {
|
|
540
|
+
const { amplitude: e, frequency: n, decay: s } = i, r = Math.sin(o * n * Math.PI * 2), a = s ? Math.pow(1 - o, 2) : 1, c = e * r * a;
|
|
541
541
|
return t + c;
|
|
542
542
|
}
|
|
543
|
-
function re(
|
|
544
|
-
const { overshoot: e, bounces:
|
|
543
|
+
function re(o, t, i) {
|
|
544
|
+
const { overshoot: e, bounces: n } = i, s = [];
|
|
545
545
|
s.push({ time: 0.5, scale: e });
|
|
546
546
|
let r = e;
|
|
547
|
-
const a = 0.5, d = 0.5 / (
|
|
547
|
+
const a = 0.5, d = 0.5 / (n * 2);
|
|
548
548
|
let u = 0.5;
|
|
549
|
-
for (let m = 0; m <
|
|
549
|
+
for (let m = 0; m < n; m++) {
|
|
550
550
|
const p = 1 - (r - 1) * a;
|
|
551
|
-
u += d, s.push({ time: u, scale: p }), r = 1 + (r - 1) * a * a, u += d, m <
|
|
551
|
+
u += d, s.push({ time: u, scale: p }), r = 1 + (r - 1) * a * a, u += d, m < n - 1 && s.push({ time: u, scale: r });
|
|
552
552
|
}
|
|
553
553
|
s.push({ time: 1, scale: 1 });
|
|
554
554
|
let f = 1;
|
|
555
555
|
for (let m = 0; m < s.length; m++)
|
|
556
|
-
if (
|
|
557
|
-
const p = m === 0 ? 0 : s[m - 1].time, w = m === 0 ? 1 : s[m - 1].scale, v = (
|
|
556
|
+
if (o <= s[m].time) {
|
|
557
|
+
const p = m === 0 ? 0 : s[m - 1].time, w = m === 0 ? 1 : s[m - 1].scale, v = (o - p) / (s[m].time - p), l = at(v);
|
|
558
558
|
f = w + (s[m].scale - w) * l;
|
|
559
559
|
break;
|
|
560
560
|
}
|
|
561
561
|
return f * t;
|
|
562
562
|
}
|
|
563
|
-
function ce(
|
|
563
|
+
function ce(o) {
|
|
564
564
|
const {
|
|
565
565
|
element: t,
|
|
566
566
|
startPosition: i,
|
|
567
567
|
endPosition: e,
|
|
568
|
-
pathConfig:
|
|
568
|
+
pathConfig: n,
|
|
569
569
|
duration: s,
|
|
570
570
|
imageWidth: r,
|
|
571
571
|
imageHeight: a,
|
|
@@ -577,38 +577,38 @@ function ce(n) {
|
|
|
577
577
|
startRotation: p,
|
|
578
578
|
scaleConfig: w,
|
|
579
579
|
startScale: v
|
|
580
|
-
} =
|
|
581
|
-
if (l === "linear" && !I && !(y ||
|
|
580
|
+
} = o, l = n.type, g = p !== void 0 && p !== c, h = m?.mode === "wobble", b = m?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, I = g || h, y = v !== void 0 && v !== d, E = w?.mode === "pop", x = w?.pop || { overshoot: 1.2, bounces: 1 };
|
|
581
|
+
if (l === "linear" && !I && !(y || E)) {
|
|
582
582
|
u && u();
|
|
583
583
|
return;
|
|
584
584
|
}
|
|
585
585
|
const R = performance.now(), M = -r / 2, T = -a / 2;
|
|
586
|
-
function z(
|
|
587
|
-
const D =
|
|
586
|
+
function z(_) {
|
|
587
|
+
const D = _ - R, O = Math.min(D / s, 1);
|
|
588
588
|
let S;
|
|
589
589
|
switch (l) {
|
|
590
590
|
case "bounce": {
|
|
591
591
|
const N = Kt(
|
|
592
|
-
|
|
593
|
-
|
|
592
|
+
n.bouncePreset,
|
|
593
|
+
n.bounce
|
|
594
594
|
);
|
|
595
595
|
S = ee(O, i, e, N);
|
|
596
596
|
break;
|
|
597
597
|
}
|
|
598
598
|
case "elastic": {
|
|
599
599
|
const N = Zt(
|
|
600
|
-
|
|
601
|
-
|
|
600
|
+
n.elasticPreset,
|
|
601
|
+
n.elastic
|
|
602
602
|
);
|
|
603
|
-
S =
|
|
603
|
+
S = ne(O, i, e, N);
|
|
604
604
|
break;
|
|
605
605
|
}
|
|
606
606
|
case "wave": {
|
|
607
607
|
const N = Qt(
|
|
608
|
-
|
|
609
|
-
|
|
608
|
+
n.wavePreset,
|
|
609
|
+
n.wave
|
|
610
610
|
);
|
|
611
|
-
S =
|
|
611
|
+
S = oe(O, i, e, N);
|
|
612
612
|
break;
|
|
613
613
|
}
|
|
614
614
|
default:
|
|
@@ -617,11 +617,11 @@ function ce(n) {
|
|
|
617
617
|
y: J(i.y, e.y, O)
|
|
618
618
|
};
|
|
619
619
|
}
|
|
620
|
-
const
|
|
620
|
+
const U = S.x - e.x, k = S.y - e.y;
|
|
621
621
|
let A;
|
|
622
622
|
h ? A = ae(O, c, b) : g ? A = J(p, c, O) : A = c;
|
|
623
623
|
let j;
|
|
624
|
-
|
|
624
|
+
E ? j = re(O, d, x) : y ? j = J(v, d, O) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${U}px, ${k}px) rotate(${A}deg) scale(${j})`, f && O < 1 && f(O, D, {
|
|
625
625
|
x: S.x,
|
|
626
626
|
y: S.y,
|
|
627
627
|
rotation: A,
|
|
@@ -630,8 +630,8 @@ function ce(n) {
|
|
|
630
630
|
}
|
|
631
631
|
requestAnimationFrame(z);
|
|
632
632
|
}
|
|
633
|
-
function le(
|
|
634
|
-
return
|
|
633
|
+
function le(o) {
|
|
634
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
635
635
|
}
|
|
636
636
|
const he = {
|
|
637
637
|
radial: "center",
|
|
@@ -644,7 +644,7 @@ const he = {
|
|
|
644
644
|
};
|
|
645
645
|
class de {
|
|
646
646
|
constructor(t, i) {
|
|
647
|
-
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale ||
|
|
647
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || Et;
|
|
648
648
|
}
|
|
649
649
|
/**
|
|
650
650
|
* Get the effective start position, considering layout-aware defaults
|
|
@@ -655,7 +655,7 @@ class de {
|
|
|
655
655
|
/**
|
|
656
656
|
* Calculate the starting position for an image's entry animation
|
|
657
657
|
*/
|
|
658
|
-
calculateStartPosition(t, i, e,
|
|
658
|
+
calculateStartPosition(t, i, e, n, s) {
|
|
659
659
|
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
660
660
|
switch (r) {
|
|
661
661
|
case "nearest-edge":
|
|
@@ -677,7 +677,7 @@ class de {
|
|
|
677
677
|
t,
|
|
678
678
|
i,
|
|
679
679
|
e,
|
|
680
|
-
|
|
680
|
+
n,
|
|
681
681
|
s
|
|
682
682
|
);
|
|
683
683
|
default:
|
|
@@ -687,28 +687,28 @@ class de {
|
|
|
687
687
|
/**
|
|
688
688
|
* Calculate start position from the nearest edge (current default behavior)
|
|
689
689
|
*/
|
|
690
|
-
calculateNearestEdge(t, i, e,
|
|
690
|
+
calculateNearestEdge(t, i, e, n) {
|
|
691
691
|
const s = t.x, r = t.y, a = s, c = e.width - s, d = r, u = e.height - r, f = Math.min(a, c, d, u);
|
|
692
692
|
let m = t.x, p = t.y;
|
|
693
|
-
return f === a ? m = -(i.width +
|
|
693
|
+
return f === a ? m = -(i.width + n) : f === c ? m = e.width + n : f === d ? p = -(i.height + n) : p = e.height + n, { x: m, y: p };
|
|
694
694
|
}
|
|
695
695
|
/**
|
|
696
696
|
* Calculate start position from a specific edge
|
|
697
697
|
*/
|
|
698
|
-
calculateEdgePosition(t, i, e,
|
|
698
|
+
calculateEdgePosition(t, i, e, n, s) {
|
|
699
699
|
let r = i.x, a = i.y;
|
|
700
700
|
switch (t) {
|
|
701
701
|
case "top":
|
|
702
702
|
a = -(e.height + s);
|
|
703
703
|
break;
|
|
704
704
|
case "bottom":
|
|
705
|
-
a =
|
|
705
|
+
a = n.height + s;
|
|
706
706
|
break;
|
|
707
707
|
case "left":
|
|
708
708
|
r = -(e.width + s);
|
|
709
709
|
break;
|
|
710
710
|
case "right":
|
|
711
|
-
r =
|
|
711
|
+
r = n.width + s;
|
|
712
712
|
break;
|
|
713
713
|
}
|
|
714
714
|
return { x: r, y: a };
|
|
@@ -717,9 +717,9 @@ class de {
|
|
|
717
717
|
* Calculate start position from center with scale animation
|
|
718
718
|
*/
|
|
719
719
|
calculateCenterPosition(t, i, e) {
|
|
720
|
-
const
|
|
720
|
+
const n = t.width / 2, s = t.height / 2;
|
|
721
721
|
return {
|
|
722
|
-
x:
|
|
722
|
+
x: n,
|
|
723
723
|
y: s,
|
|
724
724
|
useScale: !0
|
|
725
725
|
// Signal to use scale animation from 0
|
|
@@ -728,14 +728,14 @@ class de {
|
|
|
728
728
|
/**
|
|
729
729
|
* Calculate start position from a random edge
|
|
730
730
|
*/
|
|
731
|
-
calculateRandomEdge(t, i, e,
|
|
731
|
+
calculateRandomEdge(t, i, e, n) {
|
|
732
732
|
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
733
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
733
|
+
return this.calculateEdgePosition(r, t, i, e, n);
|
|
734
734
|
}
|
|
735
735
|
/**
|
|
736
736
|
* Calculate start position on a circle around the container
|
|
737
737
|
*/
|
|
738
|
-
calculateCircularPosition(t, i, e,
|
|
738
|
+
calculateCircularPosition(t, i, e, n, s) {
|
|
739
739
|
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
740
740
|
let c;
|
|
741
741
|
const d = r.radius || "120%";
|
|
@@ -747,7 +747,7 @@ class de {
|
|
|
747
747
|
} else
|
|
748
748
|
c = typeof d == "number" ? d : 500;
|
|
749
749
|
let u;
|
|
750
|
-
a === "even" ? u =
|
|
750
|
+
a === "even" ? u = n / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
751
751
|
const f = e.width / 2, m = e.height / 2, p = f + Math.cos(u) * c, w = m + Math.sin(u) * c;
|
|
752
752
|
return { x: p, y: w };
|
|
753
753
|
}
|
|
@@ -768,17 +768,17 @@ class de {
|
|
|
768
768
|
* Build a CSS transform string for the start position
|
|
769
769
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
770
770
|
*/
|
|
771
|
-
buildStartTransform(t, i, e,
|
|
772
|
-
const d = t.x - i.x, u = t.y - i.y, f = a !== void 0 ? a : e, m = c !== void 0 ? c :
|
|
771
|
+
buildStartTransform(t, i, e, n, s, r, a, c) {
|
|
772
|
+
const d = t.x - i.x, u = t.y - i.y, f = a !== void 0 ? a : e, m = c !== void 0 ? c : n, p = s !== void 0 ? -s / 2 : 0, w = r !== void 0 ? -r / 2 : 0, v = s !== void 0 ? `translate(${p}px, ${w}px)` : "translate(-50%, -50%)";
|
|
773
773
|
return t.useScale ? `${v} translate(${d}px, ${u}px) rotate(${f}deg) scale(0)` : `${v} translate(${d}px, ${u}px) rotate(${f}deg) scale(${m})`;
|
|
774
774
|
}
|
|
775
775
|
/**
|
|
776
776
|
* Build the final CSS transform string
|
|
777
777
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
778
778
|
*/
|
|
779
|
-
buildFinalTransform(t, i, e,
|
|
780
|
-
if (e !== void 0 &&
|
|
781
|
-
const s = -e / 2, r = -
|
|
779
|
+
buildFinalTransform(t, i, e, n) {
|
|
780
|
+
if (e !== void 0 && n !== void 0) {
|
|
781
|
+
const s = -e / 2, r = -n / 2;
|
|
782
782
|
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
783
783
|
}
|
|
784
784
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -844,12 +844,12 @@ class de {
|
|
|
844
844
|
return t + (Math.random() - 0.5) * 60;
|
|
845
845
|
if (typeof e == "number")
|
|
846
846
|
return e;
|
|
847
|
-
const
|
|
848
|
-
return e.min + Math.random() *
|
|
847
|
+
const n = e.max - e.min;
|
|
848
|
+
return e.min + Math.random() * n;
|
|
849
849
|
}
|
|
850
850
|
case "spin": {
|
|
851
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
852
|
-
return t + e * 360 *
|
|
851
|
+
const e = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
852
|
+
return t + e * 360 * n;
|
|
853
853
|
}
|
|
854
854
|
case "random":
|
|
855
855
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -897,7 +897,7 @@ class de {
|
|
|
897
897
|
amplitude: 15,
|
|
898
898
|
frequency: 3,
|
|
899
899
|
decay: !0
|
|
900
|
-
}, { amplitude:
|
|
900
|
+
}, { amplitude: n, frequency: s, decay: r } = e, a = Math.sin(t * s * Math.PI * 2), c = r ? Math.pow(1 - t, 2) : 1, d = n * a * c;
|
|
901
901
|
return i + d;
|
|
902
902
|
}
|
|
903
903
|
/**
|
|
@@ -954,7 +954,7 @@ class de {
|
|
|
954
954
|
const e = this.scaleConfig.pop || {
|
|
955
955
|
overshoot: 1.2,
|
|
956
956
|
bounces: 1
|
|
957
|
-
}, { overshoot:
|
|
957
|
+
}, { overshoot: n, bounces: s } = e, r = this.generateScaleBounceKeyframes(s, n);
|
|
958
958
|
let a = i;
|
|
959
959
|
for (let c = 0; c < r.length; c++)
|
|
960
960
|
if (t <= r[c].time) {
|
|
@@ -970,12 +970,12 @@ class de {
|
|
|
970
970
|
generateScaleBounceKeyframes(t, i) {
|
|
971
971
|
const e = [];
|
|
972
972
|
e.push({ time: 0.5, scale: i });
|
|
973
|
-
let
|
|
973
|
+
let n = i;
|
|
974
974
|
const s = 0.5, a = 0.5 / (t * 2);
|
|
975
975
|
let c = 0.5;
|
|
976
976
|
for (let d = 0; d < t; d++) {
|
|
977
|
-
const u = 1 - (
|
|
978
|
-
c += a, e.push({ time: c, scale: u }),
|
|
977
|
+
const u = 1 - (n - 1) * s;
|
|
978
|
+
c += a, e.push({ time: c, scale: u }), n = 1 + (n - 1) * s * s, c += a, d < t - 1 && e.push({ time: c, scale: n });
|
|
979
979
|
}
|
|
980
980
|
return e.push({ time: 1, scale: 1 }), e;
|
|
981
981
|
}
|
|
@@ -994,9 +994,9 @@ class ue {
|
|
|
994
994
|
* Register an image element for idle animation.
|
|
995
995
|
* Starts animation after entry duration completes.
|
|
996
996
|
*/
|
|
997
|
-
register(t, i, e,
|
|
997
|
+
register(t, i, e, n) {
|
|
998
998
|
if (this.entries.has(t)) return;
|
|
999
|
-
const s =
|
|
999
|
+
const s = n ?? this.entryDurationMs, r = this.config.startDelay ?? s, a = {
|
|
1000
1000
|
element: t,
|
|
1001
1001
|
index: i,
|
|
1002
1002
|
totalImages: e,
|
|
@@ -1111,23 +1111,23 @@ class ue {
|
|
|
1111
1111
|
});
|
|
1112
1112
|
}
|
|
1113
1113
|
_startBlink(t) {
|
|
1114
|
-
const i = { ...qt, ...this.config.blink }, e = -(Math.random() * i.speed),
|
|
1114
|
+
const i = { ...qt, ...this.config.blink }, e = -(Math.random() * i.speed), n = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1115
1115
|
let s, r;
|
|
1116
1116
|
i.style === "fade" ? (s = [
|
|
1117
|
-
{ opacity:
|
|
1117
|
+
{ opacity: n, offset: 0 },
|
|
1118
1118
|
{ opacity: 0, offset: 0.5 },
|
|
1119
|
-
{ opacity:
|
|
1119
|
+
{ opacity: n, offset: 1 }
|
|
1120
1120
|
], r = {
|
|
1121
1121
|
duration: i.speed,
|
|
1122
1122
|
delay: e,
|
|
1123
1123
|
iterations: 1 / 0,
|
|
1124
1124
|
easing: "ease-in-out"
|
|
1125
1125
|
}) : (s = [
|
|
1126
|
-
{ opacity:
|
|
1127
|
-
{ opacity:
|
|
1126
|
+
{ opacity: n, offset: 0 },
|
|
1127
|
+
{ opacity: n, offset: i.onRatio },
|
|
1128
1128
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
1129
1129
|
{ opacity: 0, offset: 0.99 },
|
|
1130
|
-
{ opacity:
|
|
1130
|
+
{ opacity: n, offset: 1 }
|
|
1131
1131
|
], r = {
|
|
1132
1132
|
duration: i.speed,
|
|
1133
1133
|
delay: e,
|
|
@@ -1156,8 +1156,8 @@ class ue {
|
|
|
1156
1156
|
if (this.togetherSpeed = t, this.togetherRafId !== null) return;
|
|
1157
1157
|
const i = () => {
|
|
1158
1158
|
const e = performance.now() % this.togetherSpeed;
|
|
1159
|
-
for (const
|
|
1160
|
-
!
|
|
1159
|
+
for (const n of this.entries.values())
|
|
1160
|
+
!n.stopped && !n.paused && n.animation && (n.animation.currentTime = e);
|
|
1161
1161
|
this.togetherRafId = requestAnimationFrame(i);
|
|
1162
1162
|
};
|
|
1163
1163
|
this.togetherRafId = requestAnimationFrame(i);
|
|
@@ -1184,19 +1184,19 @@ class fe {
|
|
|
1184
1184
|
* @returns Array of layout objects with position, rotation, scale
|
|
1185
1185
|
*/
|
|
1186
1186
|
generate(t, i, e = {}) {
|
|
1187
|
-
const
|
|
1188
|
-
for (let
|
|
1189
|
-
const
|
|
1190
|
-
id:
|
|
1191
|
-
x
|
|
1187
|
+
const n = [], { width: s, height: r } = i, a = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, w = m !== 1 || p !== 1, l = c * 1.5 / 2, g = c / 2, h = s - a - l, b = r - a - g, I = a + l, y = a + g;
|
|
1188
|
+
for (let E = 0; E < t; E++) {
|
|
1189
|
+
const x = this.random(I, h), F = this.random(y, b), R = d === "random" ? this.random(u, f) : 0, M = w ? this.random(m, p) : 1, T = c * M, z = {
|
|
1190
|
+
id: E,
|
|
1191
|
+
x,
|
|
1192
1192
|
y: F,
|
|
1193
1193
|
rotation: R,
|
|
1194
1194
|
scale: M,
|
|
1195
1195
|
baseSize: T
|
|
1196
1196
|
};
|
|
1197
|
-
|
|
1197
|
+
n.push(z);
|
|
1198
1198
|
}
|
|
1199
|
-
return
|
|
1199
|
+
return n;
|
|
1200
1200
|
}
|
|
1201
1201
|
/**
|
|
1202
1202
|
* Utility: Generate random number between min and max
|
|
@@ -1220,7 +1220,7 @@ class ge {
|
|
|
1220
1220
|
* @returns Array of layout objects with position, rotation, scale
|
|
1221
1221
|
*/
|
|
1222
1222
|
generate(t, i, e = {}) {
|
|
1223
|
-
const
|
|
1223
|
+
const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || m !== 1, w = this.config.scaleDecay ?? 0, v = {
|
|
1224
1224
|
...Ut,
|
|
1225
1225
|
...this.config.radial
|
|
1226
1226
|
}, l = e.fixedHeight ?? a, g = s / 2, h = r / 2, b = Math.ceil(Math.sqrt(t)), I = this.config.spacing.padding ?? 50, y = Math.max(l * 0.8, Math.min(
|
|
@@ -1229,7 +1229,7 @@ class ge {
|
|
|
1229
1229
|
));
|
|
1230
1230
|
if (t > 0) {
|
|
1231
1231
|
const F = p ? this.random(f, m) : 1, R = l * F;
|
|
1232
|
-
|
|
1232
|
+
n.push({
|
|
1233
1233
|
id: 0,
|
|
1234
1234
|
x: g,
|
|
1235
1235
|
y: h,
|
|
@@ -1241,34 +1241,34 @@ class ge {
|
|
|
1241
1241
|
// Center image is highest
|
|
1242
1242
|
});
|
|
1243
1243
|
}
|
|
1244
|
-
let
|
|
1245
|
-
for (;
|
|
1246
|
-
const F =
|
|
1244
|
+
let E = 1, x = 1;
|
|
1245
|
+
for (; E < t; ) {
|
|
1246
|
+
const F = x / b, R = w > 0 ? 1 - F * w * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = x * M, z = T * 1.5, _ = Math.PI * (3 * (z + T) - Math.sqrt((3 * z + T) * (z + 3 * T))), D = this.estimateWidth(l), O = Math.floor(_ / (D * 0.7));
|
|
1247
1247
|
if (O === 0) {
|
|
1248
|
-
|
|
1248
|
+
x++;
|
|
1249
1249
|
continue;
|
|
1250
1250
|
}
|
|
1251
|
-
const S = 2 * Math.PI / O,
|
|
1252
|
-
for (let
|
|
1253
|
-
const A =
|
|
1254
|
-
let H = g + Math.cos(A) * z,
|
|
1255
|
-
const B =
|
|
1256
|
-
H - B < I ? H = I + B : H + B > s - I && (H = s - I - B),
|
|
1251
|
+
const S = 2 * Math.PI / O, U = x * (20 * Math.PI / 180);
|
|
1252
|
+
for (let k = 0; k < O && E < t; k++) {
|
|
1253
|
+
const A = k * S + U, j = p ? this.random(f, m) : 1, N = R * j, $ = l * N;
|
|
1254
|
+
let H = g + Math.cos(A) * z, P = h + Math.sin(A) * T;
|
|
1255
|
+
const B = $ * 1.5 / 2, W = $ / 2;
|
|
1256
|
+
H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), P - W < I ? P = I + W : P + W > r - I && (P = r - I - W);
|
|
1257
1257
|
const X = c === "random" ? this.random(d, u) : 0;
|
|
1258
|
-
|
|
1259
|
-
id:
|
|
1258
|
+
n.push({
|
|
1259
|
+
id: E,
|
|
1260
1260
|
x: H,
|
|
1261
|
-
y:
|
|
1261
|
+
y: P,
|
|
1262
1262
|
rotation: X,
|
|
1263
1263
|
scale: N,
|
|
1264
|
-
baseSize:
|
|
1265
|
-
zIndex: Math.max(1, 100 -
|
|
1264
|
+
baseSize: $,
|
|
1265
|
+
zIndex: Math.max(1, 100 - x)
|
|
1266
1266
|
// Outer rings have lower z-index
|
|
1267
|
-
}),
|
|
1267
|
+
}), E++;
|
|
1268
1268
|
}
|
|
1269
|
-
|
|
1269
|
+
x++;
|
|
1270
1270
|
}
|
|
1271
|
-
return
|
|
1271
|
+
return n;
|
|
1272
1272
|
}
|
|
1273
1273
|
/**
|
|
1274
1274
|
* Estimate image width based on height
|
|
@@ -1329,50 +1329,39 @@ class pe {
|
|
|
1329
1329
|
* @returns Array of layout objects with position, rotation, scale
|
|
1330
1330
|
*/
|
|
1331
1331
|
generate(t, i, e = {}) {
|
|
1332
|
-
const
|
|
1332
|
+
const n = [], { width: s, height: r } = i, a = { ...me, ...this.config.grid }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || m !== 1, w = s - 2 * c, v = r - 2 * c, { columns: l, rows: g } = this.calculateGridDimensions(
|
|
1333
1333
|
t,
|
|
1334
1334
|
w,
|
|
1335
1335
|
v,
|
|
1336
1336
|
d,
|
|
1337
1337
|
a
|
|
1338
|
-
), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g,
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
cellCount: _,
|
|
1345
|
-
hasFixedGrid: $,
|
|
1346
|
-
imageCount: t,
|
|
1347
|
-
isOverflowMode: A
|
|
1348
|
-
});
|
|
1349
|
-
const j = A ? new Array(_).fill(0) : [], N = Math.min(x, E) * a.overflowOffset;
|
|
1350
|
-
for (let P = 0; P < t; P++) {
|
|
1351
|
-
let H, U, Y = 0;
|
|
1352
|
-
if (A && P >= _) {
|
|
1353
|
-
const q = P - _, G = q % _;
|
|
1354
|
-
Y = Math.floor(q / _) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, U = Math.floor(G / l)) : (U = G % g, H = Math.floor(G / g));
|
|
1338
|
+
), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, E = (w - a.gap * (l - 1)) / I, x = (v - a.gap * (g - 1)) / y, F = h ? E / 2 : 0, R = b ? x / 2 : 0, M = 1 + a.overlap, T = Math.min(E, x) * M, z = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, _ = l * E + (l - 1) * a.gap + F, D = g * x + (g - 1) * a.gap + R, O = c + (w - _) / 2, S = c + (v - D) / 2, U = l * g, A = a.columns !== "auto" && a.rows !== "auto" && t > U, j = A ? new Array(U).fill(0) : [], N = Math.min(E, x) * a.overflowOffset;
|
|
1339
|
+
for (let $ = 0; $ < t; $++) {
|
|
1340
|
+
let H, P, Y = 0;
|
|
1341
|
+
if (A && $ >= U) {
|
|
1342
|
+
const q = $ - U, G = q % U;
|
|
1343
|
+
Y = Math.floor(q / U) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, P = Math.floor(G / l)) : (P = G % g, H = Math.floor(G / g));
|
|
1355
1344
|
} else
|
|
1356
|
-
a.fillDirection === "row" ? (H =
|
|
1357
|
-
let B = O + H * (
|
|
1358
|
-
if (a.stagger === "row" &&
|
|
1345
|
+
a.fillDirection === "row" ? (H = $ % l, P = Math.floor($ / l)) : (P = $ % g, H = Math.floor($ / g));
|
|
1346
|
+
let B = O + H * (E + a.gap) + E / 2, W = S + P * (x + a.gap) + x / 2;
|
|
1347
|
+
if (a.stagger === "row" && P % 2 === 1 ? B += E / 2 : a.stagger === "column" && H % 2 === 1 && (W += x / 2), Y > 0) {
|
|
1359
1348
|
const q = (Y - 1) % Tt.length, G = Tt[q];
|
|
1360
1349
|
B += G.x * N, W += G.y * N;
|
|
1361
1350
|
}
|
|
1362
1351
|
if (a.jitter > 0) {
|
|
1363
|
-
const q =
|
|
1352
|
+
const q = E / 2 * a.jitter, G = x / 2 * a.jitter;
|
|
1364
1353
|
B += this.random(-q, q), W += this.random(-G, G);
|
|
1365
1354
|
}
|
|
1366
1355
|
let X = B, V = W;
|
|
1367
1356
|
if (!A && a.fillDirection === "row") {
|
|
1368
1357
|
const q = t % l || l;
|
|
1369
|
-
if (
|
|
1370
|
-
const It = q *
|
|
1358
|
+
if (P === Math.floor((t - 1) / l) && q < l) {
|
|
1359
|
+
const It = q * E + (q - 1) * a.gap;
|
|
1371
1360
|
let gt = 0;
|
|
1372
|
-
a.alignment === "center" ? gt = (
|
|
1361
|
+
a.alignment === "center" ? gt = (_ - It) / 2 : a.alignment === "end" && (gt = _ - It), X += gt;
|
|
1373
1362
|
}
|
|
1374
1363
|
}
|
|
1375
|
-
const ct = p ? this.random(f, m) : 1, K = z * ct,
|
|
1364
|
+
const ct = p ? this.random(f, m) : 1, K = z * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt = s - c - nt, Pt = c + ot, _t = r - c - ot;
|
|
1376
1365
|
X = Math.max(ht, Math.min(X, dt)), V = Math.max(Pt, Math.min(V, _t));
|
|
1377
1366
|
let ut = 0;
|
|
1378
1367
|
if (u === "random") {
|
|
@@ -1380,8 +1369,8 @@ class pe {
|
|
|
1380
1369
|
a.jitter > 0 ? ut = this.random(q * a.jitter, G * a.jitter) : ut = this.random(q, G);
|
|
1381
1370
|
}
|
|
1382
1371
|
let ft;
|
|
1383
|
-
A && Y > 0 ? ft = 50 - Y : ft = A ? 100 +
|
|
1384
|
-
id:
|
|
1372
|
+
A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + $ : $ + 1, n.push({
|
|
1373
|
+
id: $,
|
|
1385
1374
|
x: X,
|
|
1386
1375
|
y: V,
|
|
1387
1376
|
rotation: ut,
|
|
@@ -1390,12 +1379,12 @@ class pe {
|
|
|
1390
1379
|
zIndex: ft
|
|
1391
1380
|
});
|
|
1392
1381
|
}
|
|
1393
|
-
return
|
|
1382
|
+
return n;
|
|
1394
1383
|
}
|
|
1395
1384
|
/**
|
|
1396
1385
|
* Calculate optimal grid dimensions based on image count and container
|
|
1397
1386
|
*/
|
|
1398
|
-
calculateGridDimensions(t, i, e,
|
|
1387
|
+
calculateGridDimensions(t, i, e, n, s) {
|
|
1399
1388
|
let r, a;
|
|
1400
1389
|
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1401
1390
|
r = s.columns, a = s.rows;
|
|
@@ -1436,79 +1425,79 @@ class ve {
|
|
|
1436
1425
|
* @returns Array of layout objects with position, rotation, scale
|
|
1437
1426
|
*/
|
|
1438
1427
|
generate(t, i, e = {}) {
|
|
1439
|
-
const
|
|
1428
|
+
const n = [], { width: s, height: r } = i, a = { ...ye, ...this.config.spiral }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.rotation?.range?.min ?? -15, m = this.imageConfig.rotation?.range?.max ?? 15, p = this.imageConfig.sizing?.variance?.min ?? 1, w = this.imageConfig.sizing?.variance?.max ?? 1, v = p !== 1 || w !== 1, l = this.config.scaleDecay ?? a.scaleDecay, g = s / 2, h = r / 2, b = Math.min(
|
|
1440
1429
|
g - c - d / 2,
|
|
1441
1430
|
h - c - d / 2
|
|
1442
1431
|
), I = a.direction === "clockwise" ? -1 : 1;
|
|
1443
1432
|
for (let y = 0; y < t; y++) {
|
|
1444
|
-
let
|
|
1433
|
+
let E, x;
|
|
1445
1434
|
if (a.spiralType === "golden")
|
|
1446
|
-
|
|
1435
|
+
E = y * be * I + a.startAngle, x = this.calculateGoldenRadius(y, t, b, a.tightness);
|
|
1447
1436
|
else if (a.spiralType === "archimedean") {
|
|
1448
1437
|
const B = y * 0.5 * a.tightness;
|
|
1449
|
-
|
|
1438
|
+
E = B * I + a.startAngle, x = this.calculateArchimedeanRadius(B, t, b, a.tightness);
|
|
1450
1439
|
} else {
|
|
1451
1440
|
const B = y * 0.3 * a.tightness;
|
|
1452
|
-
|
|
1441
|
+
E = B * I + a.startAngle, x = this.calculateLogarithmicRadius(B, t, b, a.tightness);
|
|
1453
1442
|
}
|
|
1454
|
-
const F = g + Math.cos(
|
|
1455
|
-
let
|
|
1443
|
+
const F = g + Math.cos(E) * x, R = h + Math.sin(E) * x, M = x / b, T = l > 0 ? 1 - M * l * 0.5 : 1, z = v ? this.random(p, w) : 1, _ = T * z, D = d * _, S = D * 1.5 / 2, U = D / 2, k = c + S, A = s - c - S, j = c + U, N = r - c - U, $ = Math.max(k, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
|
|
1444
|
+
let P = 0;
|
|
1456
1445
|
if (u === "random") {
|
|
1457
|
-
const B =
|
|
1458
|
-
|
|
1459
|
-
} else u === "tangent" && (
|
|
1446
|
+
const B = E * 180 / Math.PI % 360, W = this.random(f, m);
|
|
1447
|
+
P = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
|
|
1448
|
+
} else u === "tangent" && (P = this.calculateSpiralTangent(E, x, a));
|
|
1460
1449
|
const Y = t - y;
|
|
1461
|
-
|
|
1450
|
+
n.push({
|
|
1462
1451
|
id: y,
|
|
1463
|
-
x:
|
|
1452
|
+
x: $,
|
|
1464
1453
|
y: H,
|
|
1465
|
-
rotation:
|
|
1466
|
-
scale:
|
|
1454
|
+
rotation: P,
|
|
1455
|
+
scale: _,
|
|
1467
1456
|
baseSize: D,
|
|
1468
1457
|
zIndex: Y
|
|
1469
1458
|
});
|
|
1470
1459
|
}
|
|
1471
|
-
return
|
|
1460
|
+
return n;
|
|
1472
1461
|
}
|
|
1473
1462
|
/**
|
|
1474
1463
|
* Calculate tangent angle for spiral curve at given position
|
|
1475
1464
|
* This aligns the image along the spiral's direction of travel
|
|
1476
1465
|
*/
|
|
1477
1466
|
calculateSpiralTangent(t, i, e) {
|
|
1478
|
-
let
|
|
1467
|
+
let n;
|
|
1479
1468
|
if (e.spiralType === "golden")
|
|
1480
|
-
|
|
1469
|
+
n = t + Math.PI / 2;
|
|
1481
1470
|
else if (e.spiralType === "archimedean") {
|
|
1482
1471
|
const r = 1 / e.tightness, a = Math.atan(i / r);
|
|
1483
|
-
|
|
1472
|
+
n = t + a;
|
|
1484
1473
|
} else {
|
|
1485
1474
|
const r = 0.15 / e.tightness, a = Math.atan(1 / r);
|
|
1486
|
-
|
|
1475
|
+
n = t + a;
|
|
1487
1476
|
}
|
|
1488
|
-
return
|
|
1477
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1489
1478
|
}
|
|
1490
1479
|
/**
|
|
1491
1480
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1492
1481
|
* Creates even distribution like sunflower seeds
|
|
1493
1482
|
*/
|
|
1494
|
-
calculateGoldenRadius(t, i, e,
|
|
1495
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1483
|
+
calculateGoldenRadius(t, i, e, n) {
|
|
1484
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / n;
|
|
1496
1485
|
return Math.min(r, e);
|
|
1497
1486
|
}
|
|
1498
1487
|
/**
|
|
1499
1488
|
* Calculate radius for Archimedean spiral
|
|
1500
1489
|
* r = a + b*θ (constant spacing between arms)
|
|
1501
1490
|
*/
|
|
1502
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1503
|
-
const s = i * 0.5 *
|
|
1491
|
+
calculateArchimedeanRadius(t, i, e, n) {
|
|
1492
|
+
const s = i * 0.5 * n;
|
|
1504
1493
|
return t / s * e;
|
|
1505
1494
|
}
|
|
1506
1495
|
/**
|
|
1507
1496
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1508
1497
|
* r = a * e^(b*θ)
|
|
1509
1498
|
*/
|
|
1510
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1511
|
-
const s = e * 0.05, r = 0.15 /
|
|
1499
|
+
calculateLogarithmicRadius(t, i, e, n) {
|
|
1500
|
+
const s = e * 0.05, r = 0.15 / n, a = s * Math.exp(r * t), c = i * 0.3 * n, d = s * Math.exp(r * c);
|
|
1512
1501
|
return a / d * e;
|
|
1513
1502
|
}
|
|
1514
1503
|
/**
|
|
@@ -1518,7 +1507,7 @@ class ve {
|
|
|
1518
1507
|
return Math.random() * (i - t) + t;
|
|
1519
1508
|
}
|
|
1520
1509
|
}
|
|
1521
|
-
const
|
|
1510
|
+
const Ee = {
|
|
1522
1511
|
clusterCount: "auto",
|
|
1523
1512
|
clusterSpread: 150,
|
|
1524
1513
|
clusterSpacing: 200,
|
|
@@ -1526,7 +1515,7 @@ const xe = {
|
|
|
1526
1515
|
overlap: 0.3,
|
|
1527
1516
|
distribution: "gaussian"
|
|
1528
1517
|
};
|
|
1529
|
-
class
|
|
1518
|
+
class xe {
|
|
1530
1519
|
constructor(t, i = {}) {
|
|
1531
1520
|
this.config = t, this.imageConfig = i;
|
|
1532
1521
|
}
|
|
@@ -1538,7 +1527,7 @@ class Ee {
|
|
|
1538
1527
|
* @returns Array of layout objects with position, rotation, scale
|
|
1539
1528
|
*/
|
|
1540
1529
|
generate(t, i, e = {}) {
|
|
1541
|
-
const
|
|
1530
|
+
const n = [], { width: s, height: r } = i, a = { ...Ee, ...this.config.cluster }, c = this.config.spacing.padding, d = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", f = this.imageConfig.rotation?.range?.min ?? -15, m = this.imageConfig.rotation?.range?.max ?? 15, p = this.imageConfig.sizing?.variance?.min ?? 1, w = this.imageConfig.sizing?.variance?.max ?? 1, v = p !== 1 || w !== 1, l = this.calculateClusterCount(
|
|
1542
1531
|
t,
|
|
1543
1532
|
a.clusterCount,
|
|
1544
1533
|
s,
|
|
@@ -1555,51 +1544,51 @@ class Ee {
|
|
|
1555
1544
|
h[I % l]++;
|
|
1556
1545
|
let b = 0;
|
|
1557
1546
|
for (let I = 0; I < l; I++) {
|
|
1558
|
-
const y = g[I],
|
|
1559
|
-
for (let
|
|
1547
|
+
const y = g[I], E = h[I];
|
|
1548
|
+
for (let x = 0; x < E; x++) {
|
|
1560
1549
|
let F, R;
|
|
1561
1550
|
if (a.distribution === "gaussian")
|
|
1562
1551
|
F = this.gaussianRandom() * y.spread, R = this.gaussianRandom() * y.spread;
|
|
1563
1552
|
else {
|
|
1564
|
-
const
|
|
1565
|
-
F = Math.cos(
|
|
1553
|
+
const P = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
|
|
1554
|
+
F = Math.cos(P) * Y, R = Math.sin(P) * Y;
|
|
1566
1555
|
}
|
|
1567
1556
|
const M = 1 + a.overlap * 0.5, T = 1 + a.overlap * 0.3;
|
|
1568
1557
|
F /= M, R /= M;
|
|
1569
|
-
const z = v ? this.random(p, w) : 1,
|
|
1558
|
+
const z = v ? this.random(p, w) : 1, _ = T * z, D = d * _;
|
|
1570
1559
|
let O = y.x + F, S = y.y + R;
|
|
1571
|
-
const
|
|
1572
|
-
O = Math.max(c +
|
|
1573
|
-
const j = u === "random" ? this.random(f, m) : 0,
|
|
1574
|
-
|
|
1560
|
+
const k = D * 1.5 / 2, A = D / 2;
|
|
1561
|
+
O = Math.max(c + k, Math.min(O, s - c - k)), S = Math.max(c + A, Math.min(S, r - c - A));
|
|
1562
|
+
const j = u === "random" ? this.random(f, m) : 0, $ = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - $) * 50) + 1;
|
|
1563
|
+
n.push({
|
|
1575
1564
|
id: b,
|
|
1576
1565
|
x: O,
|
|
1577
1566
|
y: S,
|
|
1578
1567
|
rotation: j,
|
|
1579
|
-
scale:
|
|
1568
|
+
scale: _,
|
|
1580
1569
|
baseSize: D,
|
|
1581
1570
|
zIndex: H
|
|
1582
1571
|
}), b++;
|
|
1583
1572
|
}
|
|
1584
1573
|
}
|
|
1585
|
-
return
|
|
1574
|
+
return n;
|
|
1586
1575
|
}
|
|
1587
1576
|
/**
|
|
1588
1577
|
* Calculate optimal number of clusters based on image count and container
|
|
1589
1578
|
*/
|
|
1590
|
-
calculateClusterCount(t, i, e,
|
|
1579
|
+
calculateClusterCount(t, i, e, n, s) {
|
|
1591
1580
|
if (i !== "auto")
|
|
1592
1581
|
return Math.max(1, Math.min(i, t));
|
|
1593
1582
|
const a = Math.max(1, Math.ceil(t / 8)), c = Math.floor(
|
|
1594
|
-
e / s * (
|
|
1583
|
+
e / s * (n / s) * 0.6
|
|
1595
1584
|
);
|
|
1596
1585
|
return Math.max(1, Math.min(a, c, 10));
|
|
1597
1586
|
}
|
|
1598
1587
|
/**
|
|
1599
1588
|
* Generate cluster center positions with spacing constraints
|
|
1600
1589
|
*/
|
|
1601
|
-
generateClusterCenters(t, i, e,
|
|
1602
|
-
const r = [], c =
|
|
1590
|
+
generateClusterCenters(t, i, e, n, s) {
|
|
1591
|
+
const r = [], c = n + s.clusterSpread, d = i - n - s.clusterSpread, u = n + s.clusterSpread, f = e - n - s.clusterSpread;
|
|
1603
1592
|
for (let m = 0; m < t; m++) {
|
|
1604
1593
|
let p = null, w = -1;
|
|
1605
1594
|
for (let v = 0; v < 100; v++) {
|
|
@@ -1656,32 +1645,32 @@ class we {
|
|
|
1656
1645
|
* @returns Array of layout objects with position, rotation, scale
|
|
1657
1646
|
*/
|
|
1658
1647
|
generate(t, i, e = {}) {
|
|
1659
|
-
const
|
|
1648
|
+
const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, w = m !== 1 || p !== 1, v = e.fixedHeight ?? a, l = {
|
|
1660
1649
|
...kt,
|
|
1661
1650
|
...this.config.wave
|
|
1662
|
-
}, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l,
|
|
1663
|
-
let
|
|
1664
|
-
for (let A = 0; A < g &&
|
|
1665
|
-
const j = g === 1 ? (D + O) / 2 : D + A *
|
|
1651
|
+
}, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, E = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, z = T - M, _ = E > 1 ? z / (E - 1) : 0, D = c + h + v / 2, O = r - c - h - v / 2, S = O - D, U = g > 1 ? S / (g - 1) : 0;
|
|
1652
|
+
let k = 0;
|
|
1653
|
+
for (let A = 0; A < g && k < t; A++) {
|
|
1654
|
+
const j = g === 1 ? (D + O) / 2 : D + A * U;
|
|
1666
1655
|
let N = 0;
|
|
1667
1656
|
y === "offset" ? N = A * I : y === "alternating" && (N = A * Math.PI);
|
|
1668
|
-
for (let
|
|
1669
|
-
const H =
|
|
1657
|
+
for (let $ = 0; $ < E && k < t; $++) {
|
|
1658
|
+
const H = E === 1 ? (M + T) / 2 : M + $ * _, P = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + P, W = w ? this.random(m, p) : 1, X = v * W;
|
|
1670
1659
|
let V = 0;
|
|
1671
1660
|
d === "tangent" ? V = this.calculateRotation(H, s, h, b, N) : d === "random" && (V = this.random(u, f));
|
|
1672
|
-
const K = X * 1.5 / 2, lt = X / 2,
|
|
1673
|
-
|
|
1674
|
-
id:
|
|
1675
|
-
x: Math.max(
|
|
1661
|
+
const K = X * 1.5 / 2, lt = X / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
|
|
1662
|
+
n.push({
|
|
1663
|
+
id: k,
|
|
1664
|
+
x: Math.max(nt, Math.min(Y, ot)),
|
|
1676
1665
|
y: Math.max(ht, Math.min(B, dt)),
|
|
1677
1666
|
rotation: V,
|
|
1678
1667
|
scale: W,
|
|
1679
1668
|
baseSize: X,
|
|
1680
|
-
zIndex:
|
|
1681
|
-
}),
|
|
1669
|
+
zIndex: k + 1
|
|
1670
|
+
}), k++;
|
|
1682
1671
|
}
|
|
1683
1672
|
}
|
|
1684
|
-
return
|
|
1673
|
+
return n;
|
|
1685
1674
|
}
|
|
1686
1675
|
/**
|
|
1687
1676
|
* Calculate Y position displacement on wave curve
|
|
@@ -1692,9 +1681,9 @@ class we {
|
|
|
1692
1681
|
* @param phase - Phase offset
|
|
1693
1682
|
* @returns Y displacement from baseline
|
|
1694
1683
|
*/
|
|
1695
|
-
calculateWaveY(t, i, e,
|
|
1684
|
+
calculateWaveY(t, i, e, n, s) {
|
|
1696
1685
|
const r = t / i;
|
|
1697
|
-
return e * Math.sin(
|
|
1686
|
+
return e * Math.sin(n * r * 2 * Math.PI + s);
|
|
1698
1687
|
}
|
|
1699
1688
|
/**
|
|
1700
1689
|
* Calculate rotation based on wave tangent
|
|
@@ -1705,8 +1694,8 @@ class we {
|
|
|
1705
1694
|
* @param phase - Phase offset
|
|
1706
1695
|
* @returns Rotation angle in degrees
|
|
1707
1696
|
*/
|
|
1708
|
-
calculateRotation(t, i, e,
|
|
1709
|
-
const r = t / i, a = e *
|
|
1697
|
+
calculateRotation(t, i, e, n, s) {
|
|
1698
|
+
const r = t / i, a = e * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + s) / i;
|
|
1710
1699
|
return Math.atan(a) * (180 / Math.PI);
|
|
1711
1700
|
}
|
|
1712
1701
|
/**
|
|
@@ -1721,7 +1710,7 @@ class we {
|
|
|
1721
1710
|
return Math.random() * (i - t) + t;
|
|
1722
1711
|
}
|
|
1723
1712
|
}
|
|
1724
|
-
const
|
|
1713
|
+
const xt = 100, Q = 100 / Math.sqrt(3), wt = [
|
|
1725
1714
|
[Q / 2, 0],
|
|
1726
1715
|
// upper-left
|
|
1727
1716
|
[3 * Q / 2, 0],
|
|
@@ -1734,18 +1723,18 @@ const Et = 100, Q = 100 / Math.sqrt(3), wt = [
|
|
|
1734
1723
|
// lower-left
|
|
1735
1724
|
[0, 50]
|
|
1736
1725
|
// left
|
|
1737
|
-
], Ie = wt[1][0] /
|
|
1738
|
-
function Ce(
|
|
1726
|
+
], Ie = wt[1][0] / xt, Se = wt[2][1] / xt;
|
|
1727
|
+
function Ce(o) {
|
|
1739
1728
|
return {
|
|
1740
|
-
colStep: Ie *
|
|
1741
|
-
rowOffset: Se *
|
|
1729
|
+
colStep: Ie * o,
|
|
1730
|
+
rowOffset: Se * o
|
|
1742
1731
|
};
|
|
1743
1732
|
}
|
|
1744
|
-
function Re(
|
|
1733
|
+
function Re(o, t, i, e, n, s) {
|
|
1745
1734
|
const { colStep: r } = Ce(s);
|
|
1746
1735
|
return {
|
|
1747
|
-
px: e + r *
|
|
1748
|
-
py:
|
|
1736
|
+
px: e + r * o,
|
|
1737
|
+
py: n + s * (t + o / 2)
|
|
1749
1738
|
};
|
|
1750
1739
|
}
|
|
1751
1740
|
const Te = [
|
|
@@ -1756,13 +1745,13 @@ const Te = [
|
|
|
1756
1745
|
[0, -1, 1],
|
|
1757
1746
|
[1, -1, 0]
|
|
1758
1747
|
];
|
|
1759
|
-
function Ae(
|
|
1760
|
-
if (
|
|
1748
|
+
function Ae(o) {
|
|
1749
|
+
if (o === 0) return [[0, 0, 0]];
|
|
1761
1750
|
const t = [];
|
|
1762
|
-
let [i, e,
|
|
1751
|
+
let [i, e, n] = [0, -o, o];
|
|
1763
1752
|
for (const [s, r, a] of Te)
|
|
1764
|
-
for (let c = 0; c <
|
|
1765
|
-
t.push([i, e,
|
|
1753
|
+
for (let c = 0; c < o; c++)
|
|
1754
|
+
t.push([i, e, n]), i += s, e += r, n += a;
|
|
1766
1755
|
return t;
|
|
1767
1756
|
}
|
|
1768
1757
|
class Le {
|
|
@@ -1772,7 +1761,7 @@ class Le {
|
|
|
1772
1761
|
this.config = t;
|
|
1773
1762
|
}
|
|
1774
1763
|
generate(t, i, e = {}) {
|
|
1775
|
-
const
|
|
1764
|
+
const n = [], { width: s, height: r } = i, a = s / 2, c = r / 2, d = e.fixedHeight ?? 200, f = {
|
|
1776
1765
|
...Ht,
|
|
1777
1766
|
...this.config.honeycomb
|
|
1778
1767
|
}.spacing ?? 0, m = d + f;
|
|
@@ -1782,7 +1771,7 @@ class Le {
|
|
|
1782
1771
|
for (const [l, g, h] of v) {
|
|
1783
1772
|
if (p >= t) break;
|
|
1784
1773
|
const { px: b, py: I } = Re(l, g, h, a, c, m);
|
|
1785
|
-
|
|
1774
|
+
n.push({
|
|
1786
1775
|
id: p,
|
|
1787
1776
|
x: b,
|
|
1788
1777
|
y: I,
|
|
@@ -1795,7 +1784,7 @@ class Le {
|
|
|
1795
1784
|
}
|
|
1796
1785
|
w++;
|
|
1797
1786
|
}
|
|
1798
|
-
return
|
|
1787
|
+
return n;
|
|
1799
1788
|
}
|
|
1800
1789
|
}
|
|
1801
1790
|
class Fe {
|
|
@@ -1815,7 +1804,7 @@ class Fe {
|
|
|
1815
1804
|
case "spiral":
|
|
1816
1805
|
return new ve(this.config, this.imageConfig);
|
|
1817
1806
|
case "cluster":
|
|
1818
|
-
return new
|
|
1807
|
+
return new xe(this.config, this.imageConfig);
|
|
1819
1808
|
case "wave":
|
|
1820
1809
|
return new we(this.config, this.imageConfig);
|
|
1821
1810
|
case "honeycomb":
|
|
@@ -1832,10 +1821,10 @@ class Fe {
|
|
|
1832
1821
|
* @returns Array of layout objects with position, rotation, scale
|
|
1833
1822
|
*/
|
|
1834
1823
|
generateLayout(t, i, e = {}) {
|
|
1835
|
-
const
|
|
1836
|
-
return
|
|
1824
|
+
const n = this.placementLayout.generate(t, i, e);
|
|
1825
|
+
return n.forEach((s) => {
|
|
1837
1826
|
this.layouts.set(s.id, s);
|
|
1838
|
-
}),
|
|
1827
|
+
}), n;
|
|
1839
1828
|
}
|
|
1840
1829
|
/**
|
|
1841
1830
|
* Get the original layout state for an image
|
|
@@ -1888,8 +1877,8 @@ class Fe {
|
|
|
1888
1877
|
return;
|
|
1889
1878
|
if (typeof e == "number")
|
|
1890
1879
|
return e;
|
|
1891
|
-
const
|
|
1892
|
-
return s === "mobile" ?
|
|
1880
|
+
const n = e, s = this.resolveBreakpoint(t);
|
|
1881
|
+
return s === "mobile" ? n.mobile ?? n.tablet ?? n.screen : s === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1893
1882
|
}
|
|
1894
1883
|
/**
|
|
1895
1884
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1899,8 +1888,8 @@ class Fe {
|
|
|
1899
1888
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1900
1889
|
* @returns Calculated sizing result with height
|
|
1901
1890
|
*/
|
|
1902
|
-
calculateAdaptiveSize(t, i, e,
|
|
1903
|
-
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1891
|
+
calculateAdaptiveSize(t, i, e, n) {
|
|
1892
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1904
1893
|
if (r !== void 0)
|
|
1905
1894
|
return { height: r };
|
|
1906
1895
|
const a = s?.minSize ?? 50, c = s?.maxSize ?? 400, d = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: f, height: m } = t, v = f * m * d / i;
|
|
@@ -1920,9 +1909,9 @@ class Fe {
|
|
|
1920
1909
|
*/
|
|
1921
1910
|
honeycombMaxImageHeight(t, i) {
|
|
1922
1911
|
if (t <= 1) return 1 / 0;
|
|
1923
|
-
let e = 0,
|
|
1924
|
-
for (;
|
|
1925
|
-
e++,
|
|
1912
|
+
let e = 0, n = 1;
|
|
1913
|
+
for (; n < t; )
|
|
1914
|
+
e++, n += 6 * e;
|
|
1926
1915
|
const s = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, a = i.width / 2, c = i.height / 2, d = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), f = (c - s - r * e) / (e + 0.5), m = (a - s - d * r * e) / (d * e + u);
|
|
1927
1916
|
return Math.max(10, Math.min(f, m));
|
|
1928
1917
|
}
|
|
@@ -1933,7 +1922,7 @@ class Fe {
|
|
|
1933
1922
|
return Math.max(i, Math.min(e, t));
|
|
1934
1923
|
}
|
|
1935
1924
|
}
|
|
1936
|
-
var C = /* @__PURE__ */ ((
|
|
1925
|
+
var C = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(C || {});
|
|
1937
1926
|
const At = {
|
|
1938
1927
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1939
1928
|
circle: "circle(50%)",
|
|
@@ -1967,7 +1956,7 @@ const At = {
|
|
|
1967
1956
|
},
|
|
1968
1957
|
// Hexagon - regular hexagon (reference points imported from hexagonGeometry)
|
|
1969
1958
|
hexagon: {
|
|
1970
|
-
refHeight:
|
|
1959
|
+
refHeight: xt,
|
|
1971
1960
|
points: wt
|
|
1972
1961
|
},
|
|
1973
1962
|
// Octagon - regular octagon
|
|
@@ -1981,96 +1970,96 @@ const At = {
|
|
|
1981
1970
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
1982
1971
|
}
|
|
1983
1972
|
};
|
|
1984
|
-
function Oe(
|
|
1985
|
-
if (
|
|
1986
|
-
return
|
|
1973
|
+
function Oe(o) {
|
|
1974
|
+
if (o)
|
|
1975
|
+
return o in At ? At[o] : o;
|
|
1987
1976
|
}
|
|
1988
|
-
function ze(
|
|
1989
|
-
const e = Me[
|
|
1977
|
+
function ze(o, t, i) {
|
|
1978
|
+
const e = Me[o];
|
|
1990
1979
|
if (!e) return "";
|
|
1991
|
-
const
|
|
1992
|
-
if (
|
|
1993
|
-
return `circle(${Math.round(50 *
|
|
1994
|
-
const s = e.points.map(([v]) => v), r = e.points.map(([, v]) => v), a = (Math.min(...s) + Math.max(...s)) / 2 *
|
|
1980
|
+
const n = t / e.refHeight;
|
|
1981
|
+
if (o === "circle")
|
|
1982
|
+
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
1983
|
+
const s = e.points.map(([v]) => v), r = e.points.map(([, v]) => v), a = (Math.min(...s) + Math.max(...s)) / 2 * n, c = (Math.min(...r) + Math.max(...r)) / 2 * n, d = (Math.max(...s) - Math.min(...s)) * n, u = (i ?? d) / 2, f = t / 2, m = u - a, p = f - c;
|
|
1995
1984
|
return `polygon(${e.points.map(([v, l]) => {
|
|
1996
|
-
const g = Math.round((v *
|
|
1985
|
+
const g = Math.round((v * n + m) * 100) / 100, h = Math.round((l * n + p) * 100) / 100;
|
|
1997
1986
|
return `${g}px ${h}px`;
|
|
1998
1987
|
}).join(", ")})`;
|
|
1999
1988
|
}
|
|
2000
|
-
function De(
|
|
2001
|
-
return
|
|
1989
|
+
function De(o) {
|
|
1990
|
+
return o in mt;
|
|
2002
1991
|
}
|
|
2003
|
-
function $e(
|
|
2004
|
-
return
|
|
1992
|
+
function $e(o) {
|
|
1993
|
+
return o ? De(o) ? mt[o] : o : mt.md;
|
|
2005
1994
|
}
|
|
2006
|
-
function Pe(
|
|
2007
|
-
if (!
|
|
1995
|
+
function Pe(o) {
|
|
1996
|
+
if (!o) return "";
|
|
2008
1997
|
const t = [];
|
|
2009
|
-
if (
|
|
2010
|
-
if (typeof
|
|
2011
|
-
t.push(`drop-shadow(${
|
|
1998
|
+
if (o.grayscale !== void 0 && t.push(`grayscale(${o.grayscale})`), o.blur !== void 0 && t.push(`blur(${o.blur}px)`), o.brightness !== void 0 && t.push(`brightness(${o.brightness})`), o.contrast !== void 0 && t.push(`contrast(${o.contrast})`), o.saturate !== void 0 && t.push(`saturate(${o.saturate})`), o.opacity !== void 0 && t.push(`opacity(${o.opacity})`), o.sepia !== void 0 && t.push(`sepia(${o.sepia})`), o.hueRotate !== void 0 && t.push(`hue-rotate(${o.hueRotate}deg)`), o.invert !== void 0 && t.push(`invert(${o.invert})`), o.dropShadow !== void 0)
|
|
1999
|
+
if (typeof o.dropShadow == "string")
|
|
2000
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
2012
2001
|
else {
|
|
2013
|
-
const i =
|
|
2002
|
+
const i = o.dropShadow;
|
|
2014
2003
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
2015
2004
|
}
|
|
2016
2005
|
return t.join(" ");
|
|
2017
2006
|
}
|
|
2018
|
-
function tt(
|
|
2019
|
-
if (!
|
|
2007
|
+
function tt(o) {
|
|
2008
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
2020
2009
|
return "none";
|
|
2021
|
-
const t =
|
|
2010
|
+
const t = o.width ?? 0, i = o.style ?? "solid", e = o.color ?? "#000000";
|
|
2022
2011
|
return `${t}px ${i} ${e}`;
|
|
2023
2012
|
}
|
|
2024
|
-
function it(
|
|
2025
|
-
if (!
|
|
2013
|
+
function it(o, t, i) {
|
|
2014
|
+
if (!o) return {};
|
|
2026
2015
|
const e = {};
|
|
2027
|
-
if (
|
|
2028
|
-
const a =
|
|
2029
|
-
|
|
2030
|
-
} else
|
|
2031
|
-
if (
|
|
2032
|
-
const a =
|
|
2016
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
2017
|
+
const a = o.border?.radius ?? 0;
|
|
2018
|
+
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : a && (e.borderTopLeftRadius = `${a}px`), o.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${o.borderRadiusTopRight}px` : a && (e.borderTopRightRadius = `${a}px`), o.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : a && (e.borderBottomRightRadius = `${a}px`), o.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : a && (e.borderBottomLeftRadius = `${a}px`);
|
|
2019
|
+
} else o.border?.radius !== void 0 && (e.borderRadius = `${o.border.radius}px`);
|
|
2020
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
2021
|
+
const a = o.border || {}, c = { ...a, ...o.borderTop }, d = { ...a, ...o.borderRight }, u = { ...a, ...o.borderBottom }, f = { ...a, ...o.borderLeft };
|
|
2033
2022
|
e.borderTop = tt(c), e.borderRight = tt(d), e.borderBottom = tt(u), e.borderLeft = tt(f);
|
|
2034
|
-
} else
|
|
2035
|
-
|
|
2036
|
-
const r = Pe(
|
|
2037
|
-
if (e.filter = r || "none",
|
|
2038
|
-
const a =
|
|
2039
|
-
e.outline = `${a}px ${c} ${d}`,
|
|
2040
|
-
}
|
|
2041
|
-
if (
|
|
2023
|
+
} else o.border && (e.border = tt(o.border));
|
|
2024
|
+
o.shadow !== void 0 && (e.boxShadow = $e(o.shadow));
|
|
2025
|
+
const r = Pe(o.filter);
|
|
2026
|
+
if (e.filter = r || "none", o.opacity !== void 0 && (e.opacity = String(o.opacity)), o.cursor !== void 0 && (e.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
2027
|
+
const a = o.outline.width ?? 0, c = o.outline.style ?? "solid", d = o.outline.color ?? "#000000";
|
|
2028
|
+
e.outline = `${a}px ${c} ${d}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
2029
|
+
}
|
|
2030
|
+
if (o.objectFit !== void 0 && (e.objectFit = o.objectFit), o.aspectRatio !== void 0 && (e.aspectRatio = o.aspectRatio), o.clipPath !== void 0) {
|
|
2042
2031
|
let a;
|
|
2043
|
-
const c = typeof
|
|
2032
|
+
const c = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, d = c ? o.clipPath : void 0;
|
|
2044
2033
|
if (d?.mode === "height-relative" && t)
|
|
2045
2034
|
a = ze(d.shape, t, i);
|
|
2046
2035
|
else {
|
|
2047
|
-
const u = c && d ? d.shape :
|
|
2036
|
+
const u = c && d ? d.shape : o.clipPath;
|
|
2048
2037
|
a = Oe(u);
|
|
2049
2038
|
}
|
|
2050
2039
|
a && (a === "none" ? e.clipPath = "unset" : (e.clipPath = a, e.overflow = "hidden"));
|
|
2051
2040
|
}
|
|
2052
2041
|
return e;
|
|
2053
2042
|
}
|
|
2054
|
-
function _e(
|
|
2055
|
-
t.borderRadius !== void 0 && (
|
|
2043
|
+
function _e(o, t) {
|
|
2044
|
+
t.borderRadius !== void 0 && (o.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (o.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (o.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (o.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (o.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (o.style.border = t.border), t.borderTop !== void 0 && (o.style.borderTop = t.borderTop), t.borderRight !== void 0 && (o.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (o.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (o.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (o.style.boxShadow = t.boxShadow), t.filter !== void 0 && (o.style.filter = t.filter), t.opacity !== void 0 && (o.style.opacity = t.opacity), t.cursor !== void 0 && (o.style.cursor = t.cursor), t.outline !== void 0 && (o.style.outline = t.outline), t.outlineOffset !== void 0 && (o.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (o.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (o.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (o.style.clipPath = t.clipPath), t.overflow !== void 0 && (o.style.overflow = t.overflow);
|
|
2056
2045
|
}
|
|
2057
|
-
function st(
|
|
2058
|
-
const
|
|
2059
|
-
_e(
|
|
2046
|
+
function st(o, t, i, e) {
|
|
2047
|
+
const n = it(t, i, e);
|
|
2048
|
+
_e(o, n);
|
|
2060
2049
|
}
|
|
2061
|
-
function $t(
|
|
2062
|
-
return
|
|
2050
|
+
function $t(o) {
|
|
2051
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
2063
2052
|
}
|
|
2064
|
-
function et(
|
|
2053
|
+
function et(o, t) {
|
|
2065
2054
|
const i = $t(t);
|
|
2066
2055
|
i && i.split(" ").forEach((e) => {
|
|
2067
|
-
e.trim() &&
|
|
2056
|
+
e.trim() && o.classList.add(e.trim());
|
|
2068
2057
|
});
|
|
2069
2058
|
}
|
|
2070
|
-
function pt(
|
|
2059
|
+
function pt(o, t) {
|
|
2071
2060
|
const i = $t(t);
|
|
2072
2061
|
i && i.split(" ").forEach((e) => {
|
|
2073
|
-
e.trim() &&
|
|
2062
|
+
e.trim() && o.classList.remove(e.trim());
|
|
2074
2063
|
});
|
|
2075
2064
|
}
|
|
2076
2065
|
const Lt = {
|
|
@@ -2110,9 +2099,9 @@ class Ue {
|
|
|
2110
2099
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2111
2100
|
*/
|
|
2112
2101
|
calculateFocusDimensions(t, i, e) {
|
|
2113
|
-
const
|
|
2102
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), s = e.height * n, r = t / i;
|
|
2114
2103
|
let a = s, c = a * r;
|
|
2115
|
-
const d = e.width *
|
|
2104
|
+
const d = e.width * n;
|
|
2116
2105
|
return c > d && (c = d, a = c / r), { width: c, height: a };
|
|
2117
2106
|
}
|
|
2118
2107
|
/**
|
|
@@ -2120,7 +2109,7 @@ class Ue {
|
|
|
2120
2109
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2121
2110
|
*/
|
|
2122
2111
|
calculateFocusTransform(t, i) {
|
|
2123
|
-
const e = t.width / 2,
|
|
2112
|
+
const e = t.width / 2, n = t.height / 2, s = e - i.x, r = n - i.y;
|
|
2124
2113
|
return {
|
|
2125
2114
|
x: s,
|
|
2126
2115
|
y: r,
|
|
@@ -2135,8 +2124,8 @@ class Ue {
|
|
|
2135
2124
|
buildDimensionZoomTransform(t) {
|
|
2136
2125
|
const i = ["translate(-50%, -50%)"];
|
|
2137
2126
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2138
|
-
const e = t.x ?? 0,
|
|
2139
|
-
i.push(`translate(${e}px, ${
|
|
2127
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
2128
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
2140
2129
|
}
|
|
2141
2130
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2142
2131
|
}
|
|
@@ -2144,13 +2133,13 @@ class Ue {
|
|
|
2144
2133
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2145
2134
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2146
2135
|
*/
|
|
2147
|
-
animateWithDimensions(t, i, e,
|
|
2136
|
+
animateWithDimensions(t, i, e, n, s, r, a, c) {
|
|
2148
2137
|
const d = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2149
2138
|
return t.style.transition = "none", t.animate(
|
|
2150
2139
|
[
|
|
2151
2140
|
{
|
|
2152
2141
|
transform: d,
|
|
2153
|
-
width: `${
|
|
2142
|
+
width: `${n}px`,
|
|
2154
2143
|
height: `${s}px`
|
|
2155
2144
|
},
|
|
2156
2145
|
{
|
|
@@ -2191,10 +2180,10 @@ class Ue {
|
|
|
2191
2180
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2192
2181
|
*/
|
|
2193
2182
|
startClipPathAnimation(t, i, e) {
|
|
2194
|
-
let
|
|
2195
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2183
|
+
let n = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2184
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (n = { ...n, clipPath: void 0 });
|
|
2196
2185
|
const s = () => {
|
|
2197
|
-
const r = t.offsetHeight, a = t.offsetWidth, c = it(
|
|
2186
|
+
const r = t.offsetHeight, a = t.offsetWidth, c = it(n, r, a);
|
|
2198
2187
|
c.clipPath !== void 0 ? t.style.clipPath = c.clipPath : t.style.clipPath = "unset", c.overflow !== void 0 && (t.style.overflow = c.overflow), i.animation.playState === "running" && requestAnimationFrame(s);
|
|
2199
2188
|
};
|
|
2200
2189
|
requestAnimationFrame(s);
|
|
@@ -2205,12 +2194,12 @@ class Ue {
|
|
|
2205
2194
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2206
2195
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2207
2196
|
*/
|
|
2208
|
-
startFocusAnimation(t, i, e,
|
|
2197
|
+
startFocusAnimation(t, i, e, n, s) {
|
|
2209
2198
|
const r = t.style.zIndex || "", a = t.offsetWidth, c = t.offsetHeight, d = this.calculateFocusDimensions(a, c, i), u = this.calculateFocusTransform(i, e);
|
|
2210
2199
|
this.animationEngine.cancelAllAnimations(t);
|
|
2211
2200
|
const f = this.config.animationDuration ?? 600;
|
|
2212
2201
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
2213
|
-
const m =
|
|
2202
|
+
const m = n ?? {
|
|
2214
2203
|
x: 0,
|
|
2215
2204
|
y: 0,
|
|
2216
2205
|
rotation: e.rotation,
|
|
@@ -2257,11 +2246,11 @@ class Ue {
|
|
|
2257
2246
|
* Animates back to original dimensions for consistent behavior
|
|
2258
2247
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2259
2248
|
*/
|
|
2260
|
-
startUnfocusAnimation(t, i, e,
|
|
2249
|
+
startUnfocusAnimation(t, i, e, n) {
|
|
2261
2250
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2262
2251
|
const s = this.config.animationDuration ?? 600;
|
|
2263
2252
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2264
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, a =
|
|
2253
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, a = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, c = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, d = {
|
|
2265
2254
|
x: 0,
|
|
2266
2255
|
y: 0,
|
|
2267
2256
|
rotation: i.rotation,
|
|
@@ -2309,10 +2298,10 @@ class Ue {
|
|
|
2309
2298
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2310
2299
|
*/
|
|
2311
2300
|
captureMidAnimationState(t) {
|
|
2312
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2313
|
-
return t.style.width = `${
|
|
2301
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth, s = t.offsetHeight, r = e.e + n * 0.5, a = e.f + s * 0.5, c = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2302
|
+
return t.style.width = `${n}px`, t.style.height = `${s}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${a}px) rotate(${c}deg)`, t.style.transition = "none", {
|
|
2314
2303
|
transform: { x: r, y: a, rotation: c, scale: 1 },
|
|
2315
|
-
dimensions: { width:
|
|
2304
|
+
dimensions: { width: n, height: s }
|
|
2316
2305
|
};
|
|
2317
2306
|
}
|
|
2318
2307
|
/**
|
|
@@ -2327,10 +2316,10 @@ class Ue {
|
|
|
2327
2316
|
/**
|
|
2328
2317
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2329
2318
|
*/
|
|
2330
|
-
resetElementInstantly(t, i, e,
|
|
2319
|
+
resetElementInstantly(t, i, e, n, s) {
|
|
2331
2320
|
this.animationEngine.cancelAllAnimations(t);
|
|
2332
2321
|
const r = ["translate(-50%, -50%)"];
|
|
2333
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2322
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && s !== void 0 && (t.style.width = `${n}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, e);
|
|
2334
2323
|
}
|
|
2335
2324
|
/**
|
|
2336
2325
|
* Focus (zoom) an image to center of container
|
|
@@ -2349,10 +2338,10 @@ class Ue {
|
|
|
2349
2338
|
), this.incoming = null, this.state = C.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = C.IDLE;
|
|
2350
2339
|
return;
|
|
2351
2340
|
}
|
|
2352
|
-
const
|
|
2341
|
+
const n = ++this.focusGeneration;
|
|
2353
2342
|
switch (this.state) {
|
|
2354
2343
|
case C.IDLE:
|
|
2355
|
-
if (this.state = C.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2344
|
+
if (this.state = C.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2356
2345
|
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2357
2346
|
break;
|
|
2358
2347
|
case C.FOCUSED:
|
|
@@ -2362,7 +2351,7 @@ class Ue {
|
|
|
2362
2351
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2363
2352
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2364
2353
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2365
|
-
]), this.focusGeneration !==
|
|
2354
|
+
]), this.focusGeneration !== n)
|
|
2366
2355
|
return;
|
|
2367
2356
|
if (this.outgoing) {
|
|
2368
2357
|
const s = this.outgoing.element;
|
|
@@ -2377,14 +2366,14 @@ class Ue {
|
|
|
2377
2366
|
this.focusData?.originalZIndex || "",
|
|
2378
2367
|
this.focusData?.originalWidth,
|
|
2379
2368
|
this.focusData?.originalHeight
|
|
2380
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2369
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2381
2370
|
this.currentFocus = t, this.incoming = null, this.state = C.FOCUSED;
|
|
2382
2371
|
break;
|
|
2383
2372
|
case C.UNFOCUSING:
|
|
2384
2373
|
if (this.state = C.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2385
2374
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2386
2375
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2387
|
-
]), this.focusGeneration !==
|
|
2376
|
+
]), this.focusGeneration !== n) return;
|
|
2388
2377
|
if (this.outgoing) {
|
|
2389
2378
|
const s = this.outgoing.element;
|
|
2390
2379
|
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
@@ -2409,7 +2398,7 @@ class Ue {
|
|
|
2409
2398
|
if (this.incoming = this.startFocusAnimation(t, i, e, s, r), await Promise.all([
|
|
2410
2399
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2411
2400
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2412
|
-
]), this.focusGeneration !==
|
|
2401
|
+
]), this.focusGeneration !== n) return;
|
|
2413
2402
|
if (this.outgoing) {
|
|
2414
2403
|
const a = this.outgoing.element;
|
|
2415
2404
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
@@ -2435,7 +2424,7 @@ class Ue {
|
|
|
2435
2424
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2436
2425
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2437
2426
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2438
|
-
]), this.focusGeneration !==
|
|
2427
|
+
]), this.focusGeneration !== n) return;
|
|
2439
2428
|
if (this.outgoing) {
|
|
2440
2429
|
const s = this.outgoing.element;
|
|
2441
2430
|
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
@@ -2485,8 +2474,8 @@ class Ue {
|
|
|
2485
2474
|
return;
|
|
2486
2475
|
}
|
|
2487
2476
|
this.state = C.UNFOCUSING;
|
|
2488
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2489
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2477
|
+
const i = this.currentFocus, e = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2478
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = C.IDLE, this.onUnfocusComplete?.(i));
|
|
2490
2479
|
}
|
|
2491
2480
|
/**
|
|
2492
2481
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2526,8 +2515,8 @@ class Ue {
|
|
|
2526
2515
|
*/
|
|
2527
2516
|
setDragOffset(t) {
|
|
2528
2517
|
if (!this.currentFocus || !this.focusData || this.state !== C.FOCUSED) return;
|
|
2529
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2530
|
-
|
|
2518
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2519
|
+
n.push(`translate(${s}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2531
2520
|
}
|
|
2532
2521
|
/**
|
|
2533
2522
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2536,8 +2525,8 @@ class Ue {
|
|
|
2536
2525
|
*/
|
|
2537
2526
|
clearDragOffset(t, i = 150) {
|
|
2538
2527
|
if (!this.currentFocus || !this.focusData || this.state !== C.FOCUSED) return;
|
|
2539
|
-
const e = this.currentFocus,
|
|
2540
|
-
s.push(`translate(${r}px, ${a}px)`),
|
|
2528
|
+
const e = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2529
|
+
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2541
2530
|
const c = s.join(" ");
|
|
2542
2531
|
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = c, setTimeout(() => {
|
|
2543
2532
|
this.currentFocus === e && (e.style.transition = "none");
|
|
@@ -2612,9 +2601,9 @@ const ke = 50, He = 0.5, Ne = 20, Be = 0.3, je = 150, We = 30, rt = class rt {
|
|
|
2612
2601
|
}
|
|
2613
2602
|
handleTouchMove(t) {
|
|
2614
2603
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2615
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2616
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2617
|
-
const a = Math.atan2(Math.abs(
|
|
2604
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2605
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2606
|
+
const a = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2618
2607
|
this.touchState.isHorizontalSwipe = a <= We;
|
|
2619
2608
|
}
|
|
2620
2609
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
@@ -2626,9 +2615,9 @@ const ke = 50, He = 0.5, Ne = 20, Be = 0.3, je = 150, We = 30, rt = class rt {
|
|
|
2626
2615
|
handleTouchEnd(t) {
|
|
2627
2616
|
if (!this.touchState) return;
|
|
2628
2617
|
this.recentTouchTimestamp = Date.now();
|
|
2629
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2618
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, s = Math.abs(i);
|
|
2630
2619
|
let r = !1;
|
|
2631
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= ke ||
|
|
2620
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= ke || n >= He && s >= Ne) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2632
2621
|
}
|
|
2633
2622
|
handleTouchCancel(t) {
|
|
2634
2623
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
@@ -2650,7 +2639,7 @@ class Ge {
|
|
|
2650
2639
|
for (const i of this.sources)
|
|
2651
2640
|
if ("folders" in i)
|
|
2652
2641
|
for (const e of i.folders) {
|
|
2653
|
-
const
|
|
2642
|
+
const n = i.recursive !== void 0 ? i.recursive : !0, s = await this.loadFromFolder(e, t, n);
|
|
2654
2643
|
this._discoveredUrls.push(...s);
|
|
2655
2644
|
}
|
|
2656
2645
|
else if ("files" in i) {
|
|
@@ -2696,9 +2685,9 @@ class Ge {
|
|
|
2696
2685
|
// Alternative format
|
|
2697
2686
|
];
|
|
2698
2687
|
for (const e of i) {
|
|
2699
|
-
const
|
|
2700
|
-
if (
|
|
2701
|
-
return
|
|
2688
|
+
const n = t.match(e);
|
|
2689
|
+
if (n && n[1])
|
|
2690
|
+
return n[1];
|
|
2702
2691
|
}
|
|
2703
2692
|
return null;
|
|
2704
2693
|
}
|
|
@@ -2710,15 +2699,15 @@ class Ge {
|
|
|
2710
2699
|
* @returns Promise resolving to array of image URLs
|
|
2711
2700
|
*/
|
|
2712
2701
|
async loadFromFolder(t, i, e = !0) {
|
|
2713
|
-
const
|
|
2714
|
-
if (!
|
|
2702
|
+
const n = this.extractFolderId(t);
|
|
2703
|
+
if (!n)
|
|
2715
2704
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2716
2705
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2717
|
-
return this.loadImagesDirectly(
|
|
2706
|
+
return this.loadImagesDirectly(n, i);
|
|
2718
2707
|
try {
|
|
2719
|
-
return e ? await this.loadImagesRecursively(
|
|
2708
|
+
return e ? await this.loadImagesRecursively(n, i) : await this.loadImagesFromSingleFolder(n, i);
|
|
2720
2709
|
} catch (s) {
|
|
2721
|
-
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(
|
|
2710
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(n, i);
|
|
2722
2711
|
}
|
|
2723
2712
|
}
|
|
2724
2713
|
/**
|
|
@@ -2728,7 +2717,7 @@ class Ge {
|
|
|
2728
2717
|
* @returns Promise resolving to array of image URLs
|
|
2729
2718
|
*/
|
|
2730
2719
|
async loadImagesFromSingleFolder(t, i) {
|
|
2731
|
-
const e = [],
|
|
2720
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2732
2721
|
if (!a.ok)
|
|
2733
2722
|
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2734
2723
|
const d = (await a.json()).files.filter(
|
|
@@ -2746,10 +2735,10 @@ class Ge {
|
|
|
2746
2735
|
*/
|
|
2747
2736
|
async loadFiles(t, i) {
|
|
2748
2737
|
const e = [];
|
|
2749
|
-
for (const
|
|
2750
|
-
const s = this.extractFileId(
|
|
2738
|
+
for (const n of t) {
|
|
2739
|
+
const s = this.extractFileId(n);
|
|
2751
2740
|
if (!s) {
|
|
2752
|
-
this.log(`Skipping invalid file URL: ${
|
|
2741
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2753
2742
|
continue;
|
|
2754
2743
|
}
|
|
2755
2744
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
@@ -2785,9 +2774,9 @@ class Ge {
|
|
|
2785
2774
|
// Generic id parameter
|
|
2786
2775
|
];
|
|
2787
2776
|
for (const e of i) {
|
|
2788
|
-
const
|
|
2789
|
-
if (
|
|
2790
|
-
return
|
|
2777
|
+
const n = t.match(e);
|
|
2778
|
+
if (n && n[1])
|
|
2779
|
+
return n[1];
|
|
2791
2780
|
}
|
|
2792
2781
|
return null;
|
|
2793
2782
|
}
|
|
@@ -2798,7 +2787,7 @@ class Ge {
|
|
|
2798
2787
|
* @returns Promise resolving to array of image URLs
|
|
2799
2788
|
*/
|
|
2800
2789
|
async loadImagesRecursively(t, i) {
|
|
2801
|
-
const e = [],
|
|
2790
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2802
2791
|
if (!a.ok)
|
|
2803
2792
|
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2804
2793
|
const c = await a.json(), d = c.files.filter(
|
|
@@ -2825,10 +2814,10 @@ class Ge {
|
|
|
2825
2814
|
*/
|
|
2826
2815
|
async loadImagesDirectly(t, i) {
|
|
2827
2816
|
try {
|
|
2828
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2829
|
-
if (!
|
|
2817
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(e, { mode: "cors" });
|
|
2818
|
+
if (!n.ok)
|
|
2830
2819
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2831
|
-
const s = await
|
|
2820
|
+
const s = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2832
2821
|
return [...new Set(a.map((u) => u[1]))].map(
|
|
2833
2822
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2834
2823
|
);
|
|
@@ -2921,13 +2910,13 @@ class qe {
|
|
|
2921
2910
|
if (!Array.isArray(t))
|
|
2922
2911
|
return console.warn("URLs must be an array:", t), [];
|
|
2923
2912
|
const e = [];
|
|
2924
|
-
for (const
|
|
2925
|
-
const s =
|
|
2913
|
+
for (const n of t) {
|
|
2914
|
+
const s = n.split("/").pop() || n;
|
|
2926
2915
|
if (!i.isAllowed(s)) {
|
|
2927
|
-
this.log(`Skipping filtered URL: ${
|
|
2916
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
2928
2917
|
continue;
|
|
2929
2918
|
}
|
|
2930
|
-
this.validateUrls ? await this.validateUrl(
|
|
2919
|
+
this.validateUrls ? await this.validateUrl(n) ? e.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : e.push(n);
|
|
2931
2920
|
}
|
|
2932
2921
|
return e;
|
|
2933
2922
|
}
|
|
@@ -2941,16 +2930,16 @@ class qe {
|
|
|
2941
2930
|
async processPath(t, i, e) {
|
|
2942
2931
|
if (!Array.isArray(i))
|
|
2943
2932
|
return console.warn("files must be an array:", i), [];
|
|
2944
|
-
const
|
|
2933
|
+
const n = [];
|
|
2945
2934
|
for (const s of i) {
|
|
2946
2935
|
if (!e.isAllowed(s)) {
|
|
2947
2936
|
this.log(`Skipping filtered file: ${s}`);
|
|
2948
2937
|
continue;
|
|
2949
2938
|
}
|
|
2950
2939
|
const r = this.constructUrl(t, s);
|
|
2951
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2940
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2952
2941
|
}
|
|
2953
|
-
return
|
|
2942
|
+
return n;
|
|
2954
2943
|
}
|
|
2955
2944
|
/**
|
|
2956
2945
|
* Process a JSON endpoint source
|
|
@@ -2961,17 +2950,17 @@ class qe {
|
|
|
2961
2950
|
*/
|
|
2962
2951
|
async processJson(t, i) {
|
|
2963
2952
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2964
|
-
const e = new AbortController(),
|
|
2953
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), 1e4);
|
|
2965
2954
|
try {
|
|
2966
2955
|
const s = await fetch(t, { signal: e.signal });
|
|
2967
|
-
if (clearTimeout(
|
|
2956
|
+
if (clearTimeout(n), !s.ok)
|
|
2968
2957
|
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2969
2958
|
const r = await s.json();
|
|
2970
2959
|
if (!r || !Array.isArray(r.images))
|
|
2971
2960
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2972
2961
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
2973
2962
|
} catch (s) {
|
|
2974
|
-
throw clearTimeout(
|
|
2963
|
+
throw clearTimeout(n), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
2975
2964
|
}
|
|
2976
2965
|
}
|
|
2977
2966
|
/**
|
|
@@ -2993,11 +2982,11 @@ class qe {
|
|
|
2993
2982
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2994
2983
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2995
2984
|
try {
|
|
2996
|
-
const e = new AbortController(),
|
|
2985
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout), s = await fetch(t, {
|
|
2997
2986
|
method: "HEAD",
|
|
2998
2987
|
signal: e.signal
|
|
2999
2988
|
});
|
|
3000
|
-
return clearTimeout(
|
|
2989
|
+
return clearTimeout(n), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
3001
2990
|
} catch (e) {
|
|
3002
2991
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3003
2992
|
}
|
|
@@ -3014,8 +3003,8 @@ class qe {
|
|
|
3014
3003
|
return `${e}/${i}`;
|
|
3015
3004
|
if (typeof window > "u")
|
|
3016
3005
|
return `${e}/${i}`;
|
|
3017
|
-
const
|
|
3018
|
-
return `${
|
|
3006
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3007
|
+
return `${n}${r}/${i}`;
|
|
3019
3008
|
}
|
|
3020
3009
|
/**
|
|
3021
3010
|
* Check if URL is absolute (contains protocol)
|
|
@@ -3049,16 +3038,16 @@ class Ye {
|
|
|
3049
3038
|
*/
|
|
3050
3039
|
async prepare(t) {
|
|
3051
3040
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3052
|
-
const i = this.loaders.map((e,
|
|
3053
|
-
this.log(`Loader ${
|
|
3041
|
+
const i = this.loaders.map((e, n) => e.prepare(t).then(() => {
|
|
3042
|
+
this.log(`Loader ${n} prepared with ${e.imagesLength()} images`);
|
|
3054
3043
|
}).catch((s) => {
|
|
3055
|
-
console.warn(`Loader ${
|
|
3044
|
+
console.warn(`Loader ${n} failed to prepare:`, s);
|
|
3056
3045
|
}));
|
|
3057
3046
|
await Promise.all(i);
|
|
3058
3047
|
for (const e of this.loaders)
|
|
3059
3048
|
if (e.isPrepared()) {
|
|
3060
|
-
const
|
|
3061
|
-
this._discoveredUrls.push(...
|
|
3049
|
+
const n = e.imageURLs();
|
|
3050
|
+
this._discoveredUrls.push(...n);
|
|
3062
3051
|
}
|
|
3063
3052
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3064
3053
|
}
|
|
@@ -3214,14 +3203,14 @@ const Ve = `
|
|
|
3214
3203
|
`;
|
|
3215
3204
|
function Je() {
|
|
3216
3205
|
if (typeof document > "u") return;
|
|
3217
|
-
const
|
|
3218
|
-
if (document.getElementById(
|
|
3206
|
+
const o = "fbn-ic-functional-styles";
|
|
3207
|
+
if (document.getElementById(o)) return;
|
|
3219
3208
|
const t = document.createElement("style");
|
|
3220
|
-
t.id =
|
|
3209
|
+
t.id = o, t.textContent = Ve, document.head.appendChild(t);
|
|
3221
3210
|
}
|
|
3222
3211
|
class Ke {
|
|
3223
3212
|
constructor(t = {}) {
|
|
3224
|
-
this.fullConfig = Jt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new te(this.fullConfig.animation), this.layoutEngine = new Fe({
|
|
3213
|
+
this.ariaLiveEl = null, this.fullConfig = Jt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new te(this.fullConfig.animation), this.layoutEngine = new Fe({
|
|
3225
3214
|
layout: this.fullConfig.layout,
|
|
3226
3215
|
image: this.fullConfig.image
|
|
3227
3216
|
}), this.zoomEngine = new Ue(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = it(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
@@ -3234,9 +3223,9 @@ class Ke {
|
|
|
3234
3223
|
e && e.type !== "none" ? this.idleAnimationEngine = new ue(
|
|
3235
3224
|
e,
|
|
3236
3225
|
i.timing?.duration ?? 600
|
|
3237
|
-
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((
|
|
3238
|
-
this.idleAnimationEngine?.resumeForImage(
|
|
3239
|
-
const s =
|
|
3226
|
+
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((n) => {
|
|
3227
|
+
this.idleAnimationEngine?.resumeForImage(n);
|
|
3228
|
+
const s = n, r = this.imageElements.indexOf(s);
|
|
3240
3229
|
if (this.callbacks.onImageUnfocus && r !== -1) {
|
|
3241
3230
|
const a = this.imageLoader.imageURLs(), c = {
|
|
3242
3231
|
element: s,
|
|
@@ -3272,7 +3261,7 @@ class Ke {
|
|
|
3272
3261
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3273
3262
|
if (!t || t.length === 0)
|
|
3274
3263
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.\n Example: imageCloud({ container: 'id', images: ['https://...'] })");
|
|
3275
|
-
const e = t.map((
|
|
3264
|
+
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
3276
3265
|
return e.length === 1 ? e[0] : new Ye({
|
|
3277
3266
|
loaders: e,
|
|
3278
3267
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -3283,7 +3272,7 @@ class Ke {
|
|
|
3283
3272
|
*/
|
|
3284
3273
|
createLoaderFromEntry(t, i) {
|
|
3285
3274
|
if ("static" in t) {
|
|
3286
|
-
const e = t.static,
|
|
3275
|
+
const e = t.static, n = {
|
|
3287
3276
|
...e,
|
|
3288
3277
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3289
3278
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3291,14 +3280,14 @@ class Ke {
|
|
|
3291
3280
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3292
3281
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3293
3282
|
};
|
|
3294
|
-
return new qe(
|
|
3283
|
+
return new qe(n);
|
|
3295
3284
|
} else if ("googleDrive" in t) {
|
|
3296
|
-
const e = t.googleDrive,
|
|
3285
|
+
const e = t.googleDrive, n = {
|
|
3297
3286
|
...e,
|
|
3298
3287
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3299
3288
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3300
3289
|
};
|
|
3301
|
-
return new Ge(
|
|
3290
|
+
return new Ge(n);
|
|
3302
3291
|
} else
|
|
3303
3292
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3304
3293
|
}
|
|
@@ -3311,7 +3300,7 @@ class Ke {
|
|
|
3311
3300
|
this.containerEl = this.containerRef;
|
|
3312
3301
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3313
3302
|
throw new Error(`Container "#${this.containerId}" not found. Ensure an element with id="${this.containerId}" exists in the DOM before calling imageCloud().`);
|
|
3314
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
|
|
3303
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.containerEl.setAttribute("role", "region"), this.containerEl.setAttribute("aria-label", "Image gallery"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
|
|
3315
3304
|
onNext: () => this.navigateToNextImage(),
|
|
3316
3305
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3317
3306
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
@@ -3329,7 +3318,7 @@ class Ke {
|
|
|
3329
3318
|
i.stopPropagation(), this.navigateToPreviousImage();
|
|
3330
3319
|
}), this.nextButtonEl?.addEventListener("click", (i) => {
|
|
3331
3320
|
i.stopPropagation(), this.navigateToNextImage();
|
|
3332
|
-
}));
|
|
3321
|
+
})), this.ariaLiveEl = document.createElement("div"), this.ariaLiveEl.setAttribute("aria-live", "polite"), this.ariaLiveEl.setAttribute("aria-atomic", "true"), this.ariaLiveEl.className = "fbn-ic-sr-only", this.containerEl.appendChild(this.ariaLiveEl);
|
|
3333
3322
|
}
|
|
3334
3323
|
resolveElement(t) {
|
|
3335
3324
|
return t instanceof HTMLElement ? t : document.getElementById(t);
|
|
@@ -3352,11 +3341,19 @@ class Ke {
|
|
|
3352
3341
|
}
|
|
3353
3342
|
createDefaultPrevButtonElement() {
|
|
3354
3343
|
const t = document.createElement("button");
|
|
3355
|
-
return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"),
|
|
3344
|
+
return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), this.containerEl.appendChild(t), t;
|
|
3356
3345
|
}
|
|
3357
3346
|
createDefaultNextButtonElement() {
|
|
3358
3347
|
const t = document.createElement("button");
|
|
3359
|
-
return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"),
|
|
3348
|
+
return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), this.containerEl.appendChild(t), t;
|
|
3349
|
+
}
|
|
3350
|
+
getImageAlt(t, i) {
|
|
3351
|
+
try {
|
|
3352
|
+
const s = (new URL(t).pathname.split("/").pop() ?? "").replace(/\.[^.]+$/, "").replace(/[-_]/g, " ").trim();
|
|
3353
|
+
return s.length > 0 ? s : `Image ${i + 1}`;
|
|
3354
|
+
} catch {
|
|
3355
|
+
return `Image ${i + 1}`;
|
|
3356
|
+
}
|
|
3360
3357
|
}
|
|
3361
3358
|
setupEventListeners() {
|
|
3362
3359
|
this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
|
|
@@ -3371,7 +3368,7 @@ class Ke {
|
|
|
3371
3368
|
navigateToNextImage() {
|
|
3372
3369
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3373
3370
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3374
|
-
(
|
|
3371
|
+
(n) => n.dataset.imageId === String(t)
|
|
3375
3372
|
);
|
|
3376
3373
|
if (!i) return;
|
|
3377
3374
|
const e = this.imageLayouts[t];
|
|
@@ -3383,7 +3380,7 @@ class Ke {
|
|
|
3383
3380
|
navigateToPreviousImage() {
|
|
3384
3381
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3385
3382
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3386
|
-
(
|
|
3383
|
+
(n) => n.dataset.imageId === String(t)
|
|
3387
3384
|
);
|
|
3388
3385
|
if (!i) return;
|
|
3389
3386
|
const e = this.imageLayouts[t];
|
|
@@ -3399,8 +3396,8 @@ class Ke {
|
|
|
3399
3396
|
}, 500));
|
|
3400
3397
|
}
|
|
3401
3398
|
getImageHeight() {
|
|
3402
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3403
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3399
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, n = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3400
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, n) : t <= i.tablet.maxWidth ? Math.min(180, n) : Math.min(225, n) : t <= 767 ? Math.min(100, n) : t <= 1199 ? Math.min(180, n) : Math.min(225, n);
|
|
3404
3401
|
}
|
|
3405
3402
|
/**
|
|
3406
3403
|
* Get container bounds for layout calculations
|
|
@@ -3423,12 +3420,12 @@ class Ke {
|
|
|
3423
3420
|
this.showError("No images found."), this.showLoading(!1);
|
|
3424
3421
|
return;
|
|
3425
3422
|
}
|
|
3426
|
-
const e = this.getContainerBounds(),
|
|
3427
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3423
|
+
const e = this.getContainerBounds(), n = this.getImageHeight(), s = window.innerWidth;
|
|
3424
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3428
3425
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3429
3426
|
e,
|
|
3430
3427
|
t,
|
|
3431
|
-
|
|
3428
|
+
n,
|
|
3432
3429
|
s
|
|
3433
3430
|
);
|
|
3434
3431
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3446,7 +3443,7 @@ class Ke {
|
|
|
3446
3443
|
if (!this.containerEl) return;
|
|
3447
3444
|
const e = this.getContainerBounds();
|
|
3448
3445
|
this.currentImageHeight = i;
|
|
3449
|
-
const
|
|
3446
|
+
const n = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3450
3447
|
if (this.imageLayouts = s, this.callbacks.onLayoutComplete) {
|
|
3451
3448
|
const l = {
|
|
3452
3449
|
layouts: [...s],
|
|
@@ -3460,7 +3457,7 @@ class Ke {
|
|
|
3460
3457
|
this.displayQueue = [];
|
|
3461
3458
|
let r = 0, a = 0, c = 0, d = 0, u = !1;
|
|
3462
3459
|
const f = /* @__PURE__ */ new Map(), m = () => {
|
|
3463
|
-
if (u ||
|
|
3460
|
+
if (u || n !== this.loadGeneration || !this.callbacks.onGalleryReady) return;
|
|
3464
3461
|
u = !0;
|
|
3465
3462
|
const l = {
|
|
3466
3463
|
totalImages: t.length,
|
|
@@ -3473,15 +3470,15 @@ class Ke {
|
|
|
3473
3470
|
}, w = (l) => {
|
|
3474
3471
|
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(async () => {
|
|
3475
3472
|
l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1";
|
|
3476
|
-
const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"),
|
|
3473
|
+
const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), E = parseFloat(l.dataset.startY || "0"), x = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), z = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), _ = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
|
|
3477
3474
|
if (this.callbacks.onEntryStart && h) {
|
|
3478
3475
|
const S = {
|
|
3479
3476
|
element: l,
|
|
3480
3477
|
index: g,
|
|
3481
3478
|
totalImages: this.imageLayouts.length,
|
|
3482
3479
|
layout: h,
|
|
3483
|
-
from: { x: y, y:
|
|
3484
|
-
to: { x
|
|
3480
|
+
from: { x: y, y: E, rotation: T, scale: z },
|
|
3481
|
+
to: { x, y: F, rotation: R, scale: M },
|
|
3485
3482
|
startTime: I,
|
|
3486
3483
|
duration: b.duration
|
|
3487
3484
|
};
|
|
@@ -3490,11 +3487,11 @@ class Ke {
|
|
|
3490
3487
|
if (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || l.dataset.startRotation !== l.dataset.rotation || l.dataset.startScale !== l.dataset.scale)
|
|
3491
3488
|
ce({
|
|
3492
3489
|
element: l,
|
|
3493
|
-
startPosition: { x: y, y:
|
|
3494
|
-
endPosition: { x
|
|
3490
|
+
startPosition: { x: y, y: E },
|
|
3491
|
+
endPosition: { x, y: F },
|
|
3495
3492
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3496
3493
|
duration: b.duration,
|
|
3497
|
-
imageWidth:
|
|
3494
|
+
imageWidth: _,
|
|
3498
3495
|
imageHeight: D,
|
|
3499
3496
|
rotation: R,
|
|
3500
3497
|
scale: M,
|
|
@@ -3502,20 +3499,20 @@ class Ke {
|
|
|
3502
3499
|
startRotation: T,
|
|
3503
3500
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3504
3501
|
startScale: z,
|
|
3505
|
-
onProgress: this.callbacks.onEntryProgress && h ? (S,
|
|
3502
|
+
onProgress: this.callbacks.onEntryProgress && h ? (S, U, k) => {
|
|
3506
3503
|
const A = {
|
|
3507
3504
|
element: l,
|
|
3508
3505
|
index: g,
|
|
3509
3506
|
totalImages: this.imageLayouts.length,
|
|
3510
3507
|
layout: h,
|
|
3511
|
-
from: { x: y, y:
|
|
3512
|
-
to: { x
|
|
3508
|
+
from: { x: y, y: E, rotation: T, scale: z },
|
|
3509
|
+
to: { x, y: F, rotation: R, scale: M },
|
|
3513
3510
|
startTime: I,
|
|
3514
3511
|
duration: b.duration,
|
|
3515
3512
|
progress: S,
|
|
3516
3513
|
rawProgress: S,
|
|
3517
|
-
elapsed:
|
|
3518
|
-
current:
|
|
3514
|
+
elapsed: U,
|
|
3515
|
+
current: k
|
|
3519
3516
|
};
|
|
3520
3517
|
this.callbacks.onEntryProgress(A);
|
|
3521
3518
|
} : void 0,
|
|
@@ -3536,9 +3533,9 @@ class Ke {
|
|
|
3536
3533
|
else {
|
|
3537
3534
|
const S = l.dataset.finalTransform || "";
|
|
3538
3535
|
if (l.style.transform = S, this.callbacks.onEntryComplete && h) {
|
|
3539
|
-
const
|
|
3540
|
-
if (
|
|
3541
|
-
l.removeEventListener("transitionend",
|
|
3536
|
+
const U = (k) => {
|
|
3537
|
+
if (k.propertyName !== "transform") return;
|
|
3538
|
+
l.removeEventListener("transitionend", U);
|
|
3542
3539
|
const A = {
|
|
3543
3540
|
element: l,
|
|
3544
3541
|
index: g,
|
|
@@ -3549,7 +3546,7 @@ class Ke {
|
|
|
3549
3546
|
};
|
|
3550
3547
|
this.callbacks.onEntryComplete(A);
|
|
3551
3548
|
};
|
|
3552
|
-
l.addEventListener("transitionend",
|
|
3549
|
+
l.addEventListener("transitionend", U);
|
|
3553
3550
|
}
|
|
3554
3551
|
}
|
|
3555
3552
|
if (this.fullConfig.config.debug?.enabled && g < 3) {
|
|
@@ -3579,7 +3576,7 @@ class Ke {
|
|
|
3579
3576
|
return;
|
|
3580
3577
|
}
|
|
3581
3578
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3582
|
-
if (
|
|
3579
|
+
if (n !== this.loadGeneration) {
|
|
3583
3580
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3584
3581
|
return;
|
|
3585
3582
|
}
|
|
@@ -3606,7 +3603,7 @@ class Ke {
|
|
|
3606
3603
|
h.style.left = `${b - 6}px`, h.style.top = `${I - 6}px`, h.title = `Image ${g}: center (${Math.round(b)}, ${Math.round(I)})`, this.containerEl.appendChild(h);
|
|
3607
3604
|
})), t.forEach((l, g) => {
|
|
3608
3605
|
const h = document.createElement("img");
|
|
3609
|
-
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g)
|
|
3606
|
+
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.alt = this.getImageAlt(l, g), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g);
|
|
3610
3607
|
const b = s[g];
|
|
3611
3608
|
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${b.x}px`, h.style.top = `${b.y}px`, b.zIndex && (h.style.zIndex = String(b.zIndex)), et(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3612
3609
|
if (this.hoveredImage = { element: h, layout: b }, !this.zoomEngine.isInvolved(h)) {
|
|
@@ -3629,12 +3626,12 @@ class Ke {
|
|
|
3629
3626
|
}), h.addEventListener("click", (y) => {
|
|
3630
3627
|
y.stopPropagation(), this.handleImageClick(h, b);
|
|
3631
3628
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3632
|
-
if (
|
|
3629
|
+
if (n !== this.loadGeneration)
|
|
3633
3630
|
return;
|
|
3634
|
-
const y = h.naturalWidth / h.naturalHeight,
|
|
3635
|
-
h.
|
|
3636
|
-
const
|
|
3637
|
-
|
|
3631
|
+
const y = h.naturalWidth / h.naturalHeight, E = i * y;
|
|
3632
|
+
h.style.width = `${E}px`, h.cachedRenderedWidth = E, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, E);
|
|
3633
|
+
const x = { x: b.x, y: b.y }, F = { width: E, height: i }, R = this.entryAnimationEngine.calculateStartPosition(
|
|
3634
|
+
x,
|
|
3638
3635
|
F,
|
|
3639
3636
|
e,
|
|
3640
3637
|
g,
|
|
@@ -3642,27 +3639,27 @@ class Ke {
|
|
|
3642
3639
|
), M = this.entryAnimationEngine.calculateStartRotation(b.rotation), T = this.entryAnimationEngine.calculateStartScale(b.scale), z = this.entryAnimationEngine.buildFinalTransform(
|
|
3643
3640
|
b.rotation,
|
|
3644
3641
|
b.scale,
|
|
3645
|
-
|
|
3642
|
+
E,
|
|
3646
3643
|
i
|
|
3647
|
-
),
|
|
3644
|
+
), _ = this.entryAnimationEngine.buildStartTransform(
|
|
3648
3645
|
R,
|
|
3649
|
-
|
|
3646
|
+
x,
|
|
3650
3647
|
b.rotation,
|
|
3651
3648
|
b.scale,
|
|
3652
|
-
|
|
3649
|
+
E,
|
|
3653
3650
|
i,
|
|
3654
3651
|
M,
|
|
3655
3652
|
T
|
|
3656
3653
|
);
|
|
3657
3654
|
if (this.fullConfig.config.debug?.enabled && g < 3 && console.log(`Image ${g}:`, {
|
|
3658
|
-
finalPosition:
|
|
3655
|
+
finalPosition: x,
|
|
3659
3656
|
imageSize: F,
|
|
3660
3657
|
left: b.x,
|
|
3661
3658
|
top: b.y,
|
|
3662
3659
|
finalTransform: z,
|
|
3663
|
-
renderedWidth:
|
|
3660
|
+
renderedWidth: E,
|
|
3664
3661
|
renderedHeight: i
|
|
3665
|
-
}), h.style.transform =
|
|
3662
|
+
}), h.style.transform = _, h.dataset.finalTransform = z, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(x.x), h.dataset.endY = String(x.y), h.dataset.imageWidth = String(E), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
|
|
3666
3663
|
const D = {
|
|
3667
3664
|
element: h,
|
|
3668
3665
|
url: l,
|
|
@@ -3684,7 +3681,7 @@ class Ke {
|
|
|
3684
3681
|
this.displayQueue.push(h);
|
|
3685
3682
|
};
|
|
3686
3683
|
const I = () => {
|
|
3687
|
-
if (
|
|
3684
|
+
if (n === this.loadGeneration) {
|
|
3688
3685
|
if (c++, this.callbacks.onImageError) {
|
|
3689
3686
|
const y = { url: l, index: g, totalImages: t.length };
|
|
3690
3687
|
this.callbacks.onImageError(y);
|
|
@@ -3704,22 +3701,22 @@ class Ke {
|
|
|
3704
3701
|
h.onerror = () => I(), (async () => {
|
|
3705
3702
|
let y = l;
|
|
3706
3703
|
if (this.callbacks.onBeforeImageLoad) {
|
|
3707
|
-
const
|
|
3708
|
-
if (
|
|
3709
|
-
if (
|
|
3710
|
-
const F =
|
|
3704
|
+
const E = { url: l, index: g, totalImages: t.length }, x = await this.callbacks.onBeforeImageLoad(E);
|
|
3705
|
+
if (x)
|
|
3706
|
+
if (x.fetch !== void 0) {
|
|
3707
|
+
const F = x.url ?? l;
|
|
3711
3708
|
try {
|
|
3712
|
-
const M = await (await fetch(F,
|
|
3709
|
+
const M = await (await fetch(F, x.fetch)).blob(), T = URL.createObjectURL(M);
|
|
3713
3710
|
y = T;
|
|
3714
3711
|
const z = h.onload;
|
|
3715
|
-
h.onload = (
|
|
3716
|
-
URL.revokeObjectURL(T), z?.call(h,
|
|
3712
|
+
h.onload = (_) => {
|
|
3713
|
+
URL.revokeObjectURL(T), z?.call(h, _);
|
|
3717
3714
|
};
|
|
3718
3715
|
} catch {
|
|
3719
3716
|
I();
|
|
3720
3717
|
return;
|
|
3721
3718
|
}
|
|
3722
|
-
} else
|
|
3719
|
+
} else x.url && (y = x.url);
|
|
3723
3720
|
}
|
|
3724
3721
|
d === 0 && (d = performance.now()), f.set(g, performance.now()), h.src = y;
|
|
3725
3722
|
})();
|
|
@@ -3727,16 +3724,20 @@ class Ke {
|
|
|
3727
3724
|
}
|
|
3728
3725
|
async handleImageClick(t, i) {
|
|
3729
3726
|
if (!this.containerEl) return;
|
|
3730
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3727
|
+
const e = this.zoomEngine.isFocused(t), n = {
|
|
3731
3728
|
width: this.containerEl.offsetWidth,
|
|
3732
3729
|
height: this.containerEl.offsetHeight
|
|
3733
3730
|
};
|
|
3734
3731
|
if (e)
|
|
3735
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator();
|
|
3732
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.ariaLiveEl && (this.ariaLiveEl.textContent = ""), this.hideFocusIndicator();
|
|
3736
3733
|
else {
|
|
3737
3734
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3738
3735
|
const s = t.dataset.imageId;
|
|
3739
|
-
if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t,
|
|
3736
|
+
if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.ariaLiveEl && this.currentFocusIndex !== null) {
|
|
3737
|
+
const r = t.alt, a = this.imageLayouts.length;
|
|
3738
|
+
this.ariaLiveEl.textContent = `Image ${this.currentFocusIndex + 1} of ${a}: ${r}`;
|
|
3739
|
+
}
|
|
3740
|
+
if (this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
|
|
3740
3741
|
const r = this.imageLoader.imageURLs(), a = {
|
|
3741
3742
|
element: t,
|
|
3742
3743
|
index: this.currentFocusIndex,
|
|
@@ -3787,14 +3788,14 @@ class Ke {
|
|
|
3787
3788
|
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.prevButtonElAutoCreated && this.prevButtonEl && (this.prevButtonEl.remove(), this.prevButtonEl = null), this.nextButtonElAutoCreated && this.nextButtonEl && (this.nextButtonEl.remove(), this.nextButtonEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy(), this.idleAnimationEngine?.stopAll(), this.idleAnimationEngine = null;
|
|
3788
3789
|
}
|
|
3789
3790
|
}
|
|
3790
|
-
async function Ze(
|
|
3791
|
-
const t = new Ke(
|
|
3791
|
+
async function Ze(o) {
|
|
3792
|
+
const t = new Ke(o);
|
|
3792
3793
|
return await t.init(), t;
|
|
3793
3794
|
}
|
|
3794
3795
|
export {
|
|
3795
3796
|
te as AnimationEngine,
|
|
3796
3797
|
St as BOUNCE_PRESETS,
|
|
3797
|
-
|
|
3798
|
+
xe as ClusterPlacementLayout,
|
|
3798
3799
|
Ye as CompositeLoader,
|
|
3799
3800
|
L as DEFAULT_CONFIG,
|
|
3800
3801
|
Ot as DEFAULT_SHARED_LOADER_CONFIG,
|