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