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