@frybynite/image-cloud 0.5.2 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -13
- package/dist/composite-CtUxtN2l.js +96 -0
- package/dist/composite-CtUxtN2l.js.map +1 -0
- package/dist/google-drive-CC-qFSV1.js +260 -0
- package/dist/google-drive-CC-qFSV1.js.map +1 -0
- package/dist/image-cloud-auto-init.js +345 -759
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +1248 -1204
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +5 -5
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +1654 -23
- package/dist/loaders/all.d.ts +1654 -0
- package/dist/loaders/all.js +496 -0
- package/dist/loaders/all.js.map +1 -0
- package/dist/loaders/composite.d.ts +1654 -0
- package/dist/loaders/composite.js +96 -0
- package/dist/loaders/composite.js.map +1 -0
- package/dist/loaders/google-drive.d.ts +1654 -0
- package/dist/loaders/google-drive.js +260 -0
- package/dist/loaders/google-drive.js.map +1 -0
- package/dist/loaders/static.d.ts +1654 -0
- package/dist/loaders/static.js +219 -0
- package/dist/loaders/static.js.map +1 -0
- package/dist/react.d.ts +1654 -1
- package/dist/react.js +434 -848
- package/dist/react.js.map +1 -1
- package/dist/static-ejylHtQ4.js +219 -0
- package/dist/static-ejylHtQ4.js.map +1 -0
- package/dist/vue.d.ts +1654 -1
- package/dist/vue.js +442 -856
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +1654 -1
- package/dist/web-component.js +429 -843
- package/dist/web-component.js.map +1 -1
- package/package.json +28 -15
- package/dist/ImageCloud.d.ts +0 -99
- package/dist/ImageCloud.d.ts.map +0 -1
- package/dist/config/adapter.d.ts +0 -50
- package/dist/config/adapter.d.ts.map +0 -1
- package/dist/config/defaults.d.ts +0 -118
- package/dist/config/defaults.d.ts.map +0 -1
- package/dist/config/types.d.ts +0 -599
- package/dist/config/types.d.ts.map +0 -1
- package/dist/engines/AnimationEngine.d.ts +0 -82
- package/dist/engines/AnimationEngine.d.ts.map +0 -1
- package/dist/engines/EntryAnimationEngine.d.ts +0 -161
- package/dist/engines/EntryAnimationEngine.d.ts.map +0 -1
- package/dist/engines/LayoutEngine.d.ts +0 -68
- package/dist/engines/LayoutEngine.d.ts.map +0 -1
- package/dist/engines/PathAnimator.d.ts +0 -50
- package/dist/engines/PathAnimator.d.ts.map +0 -1
- package/dist/engines/SwipeEngine.d.ts +0 -53
- package/dist/engines/SwipeEngine.d.ts.map +0 -1
- package/dist/engines/ZoomEngine.d.ts +0 -139
- package/dist/engines/ZoomEngine.d.ts.map +0 -1
- package/dist/image-cloud-auto-init.d.ts +0 -14
- package/dist/image-cloud-auto-init.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/layouts/ClusterPlacementLayout.d.ts +0 -40
- package/dist/layouts/ClusterPlacementLayout.d.ts.map +0 -1
- package/dist/layouts/GridPlacementLayout.d.ts +0 -27
- package/dist/layouts/GridPlacementLayout.d.ts.map +0 -1
- package/dist/layouts/RadialPlacementLayout.d.ts +0 -33
- package/dist/layouts/RadialPlacementLayout.d.ts.map +0 -1
- package/dist/layouts/RandomPlacementLayout.d.ts +0 -26
- package/dist/layouts/RandomPlacementLayout.d.ts.map +0 -1
- package/dist/layouts/SpiralPlacementLayout.d.ts +0 -43
- package/dist/layouts/SpiralPlacementLayout.d.ts.map +0 -1
- package/dist/layouts/WavePlacementLayout.d.ts +0 -48
- package/dist/layouts/WavePlacementLayout.d.ts.map +0 -1
- package/dist/loaders/CompositeLoader.d.ts +0 -37
- package/dist/loaders/CompositeLoader.d.ts.map +0 -1
- package/dist/loaders/GoogleDriveLoader.d.ts +0 -90
- package/dist/loaders/GoogleDriveLoader.d.ts.map +0 -1
- package/dist/loaders/ImageFilter.d.ts +0 -26
- package/dist/loaders/ImageFilter.d.ts.map +0 -1
- package/dist/loaders/StaticImageLoader.d.ts +0 -85
- package/dist/loaders/StaticImageLoader.d.ts.map +0 -1
- package/dist/react/index.d.ts +0 -16
- package/dist/react/index.d.ts.map +0 -1
- package/dist/styles/functionalStyles.d.ts +0 -11
- package/dist/styles/functionalStyles.d.ts.map +0 -1
- package/dist/utils/styleUtils.d.ts +0 -54
- package/dist/utils/styleUtils.d.ts.map +0 -1
- package/dist/vue/index.d.ts +0 -18
- package/dist/vue/index.d.ts.map +0 -1
- package/dist/web-component/index.d.ts +0 -15
- package/dist/web-component/index.d.ts.map +0 -1
package/dist/vue.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as Pt, ref as Et, onMounted as Ht, onUnmounted as Nt, watch as jt, h as Ut } from "vue";
|
|
2
|
+
const pt = Object.freeze({
|
|
3
3
|
none: "none",
|
|
4
4
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
5
5
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
6
6
|
lg: "0 8px 32px rgba(0,0,0,0.5)",
|
|
7
7
|
glow: "0 0 30px rgba(255,255,255,0.6)"
|
|
8
|
-
}),
|
|
8
|
+
}), wt = Object.freeze({
|
|
9
9
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
10
10
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
11
11
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
12
|
-
}),
|
|
12
|
+
}), It = Object.freeze({
|
|
13
13
|
gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
|
|
14
14
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
15
15
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
16
16
|
snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
|
|
17
|
-
}),
|
|
17
|
+
}), Ct = Object.freeze({
|
|
18
18
|
gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
|
|
19
19
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
20
20
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
21
21
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
22
|
-
}),
|
|
22
|
+
}), yt = Object.freeze({
|
|
23
23
|
type: "linear"
|
|
24
|
-
}),
|
|
24
|
+
}), vt = Object.freeze({
|
|
25
25
|
mode: "none"
|
|
26
|
-
}),
|
|
26
|
+
}), xt = Object.freeze({
|
|
27
27
|
mode: "none"
|
|
28
|
-
}),
|
|
28
|
+
}), At = Object.freeze({
|
|
29
29
|
default: Object.freeze({
|
|
30
30
|
border: Object.freeze({
|
|
31
31
|
width: 0,
|
|
@@ -50,17 +50,17 @@ const mt = Object.freeze({
|
|
|
50
50
|
focused: Object.freeze({
|
|
51
51
|
shadow: "none"
|
|
52
52
|
})
|
|
53
|
-
}),
|
|
53
|
+
}), Wt = Object.freeze({
|
|
54
54
|
rows: 1,
|
|
55
55
|
amplitude: 100,
|
|
56
56
|
frequency: 2,
|
|
57
57
|
phaseShift: 0,
|
|
58
58
|
synchronization: "offset"
|
|
59
59
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
60
|
-
}),
|
|
60
|
+
}), Gt = Object.freeze({
|
|
61
61
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
62
62
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
63
|
-
}),
|
|
63
|
+
}), kt = Object.freeze({
|
|
64
64
|
mode: "adaptive",
|
|
65
65
|
// Default to adaptive sizing
|
|
66
66
|
minSize: 50,
|
|
@@ -72,21 +72,21 @@ const mt = Object.freeze({
|
|
|
72
72
|
// No variance by default
|
|
73
73
|
max: 1
|
|
74
74
|
})
|
|
75
|
-
}),
|
|
75
|
+
}), _t = Object.freeze({
|
|
76
76
|
mode: "none",
|
|
77
77
|
range: Object.freeze({
|
|
78
78
|
min: -15,
|
|
79
79
|
max: 15
|
|
80
80
|
})
|
|
81
|
-
}), Ct = Object.freeze({
|
|
82
|
-
sizing: jt,
|
|
83
|
-
rotation: kt
|
|
84
81
|
}), Rt = Object.freeze({
|
|
82
|
+
sizing: kt,
|
|
83
|
+
rotation: _t
|
|
84
|
+
}), zt = Object.freeze({
|
|
85
85
|
validateUrls: !0,
|
|
86
86
|
validationTimeout: 5e3,
|
|
87
87
|
validationMethod: "head",
|
|
88
88
|
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
|
|
89
|
-
}),
|
|
89
|
+
}), Ft = Object.freeze({
|
|
90
90
|
enabled: !1,
|
|
91
91
|
centers: !1,
|
|
92
92
|
loaders: !1
|
|
@@ -95,17 +95,17 @@ const mt = Object.freeze({
|
|
|
95
95
|
loaders: [],
|
|
96
96
|
// Shared loader settings and debug config
|
|
97
97
|
config: Object.freeze({
|
|
98
|
-
loaders:
|
|
99
|
-
debug:
|
|
98
|
+
loaders: zt,
|
|
99
|
+
debug: Ft
|
|
100
100
|
}),
|
|
101
101
|
// Image sizing and rotation configuration
|
|
102
|
-
image:
|
|
102
|
+
image: Rt,
|
|
103
103
|
// Pattern-based layout configuration
|
|
104
104
|
layout: Object.freeze({
|
|
105
105
|
algorithm: "radial",
|
|
106
106
|
scaleDecay: 0,
|
|
107
107
|
// No decay by default (0-1 for radial/spiral)
|
|
108
|
-
responsive:
|
|
108
|
+
responsive: Gt,
|
|
109
109
|
targetCoverage: 0.6,
|
|
110
110
|
// Target 60% of container area
|
|
111
111
|
densityFactor: 1,
|
|
@@ -161,9 +161,9 @@ const mt = Object.freeze({
|
|
|
161
161
|
}),
|
|
162
162
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
163
163
|
// smooth deceleration
|
|
164
|
-
path:
|
|
165
|
-
rotation:
|
|
166
|
-
scale:
|
|
164
|
+
path: yt,
|
|
165
|
+
rotation: vt,
|
|
166
|
+
scale: xt
|
|
167
167
|
})
|
|
168
168
|
}),
|
|
169
169
|
// Pattern-based interaction configuration
|
|
@@ -220,21 +220,21 @@ const mt = Object.freeze({
|
|
|
220
220
|
})
|
|
221
221
|
}),
|
|
222
222
|
// Image styling
|
|
223
|
-
styling:
|
|
223
|
+
styling: At
|
|
224
224
|
});
|
|
225
|
-
function
|
|
225
|
+
function K(n, t) {
|
|
226
226
|
if (!n) return t || {};
|
|
227
227
|
if (!t) return { ...n };
|
|
228
228
|
const e = { ...n };
|
|
229
229
|
return t.border !== void 0 && (e.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...n.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
|
|
230
230
|
}
|
|
231
|
-
function
|
|
231
|
+
function qt(n, t) {
|
|
232
232
|
if (!t) return { ...n };
|
|
233
|
-
const e =
|
|
234
|
-
|
|
233
|
+
const e = K(n.default, t.default), i = K(
|
|
234
|
+
K(e, n.hover),
|
|
235
235
|
t.hover
|
|
236
|
-
), o =
|
|
237
|
-
|
|
236
|
+
), o = K(
|
|
237
|
+
K(e, n.focused),
|
|
238
238
|
t.focused
|
|
239
239
|
);
|
|
240
240
|
return {
|
|
@@ -243,7 +243,7 @@ function Wt(n, t) {
|
|
|
243
243
|
focused: o
|
|
244
244
|
};
|
|
245
245
|
}
|
|
246
|
-
function
|
|
246
|
+
function Xt(n, t) {
|
|
247
247
|
if (!t) return { ...n };
|
|
248
248
|
const e = { ...n };
|
|
249
249
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
@@ -262,7 +262,7 @@ function Gt(n, t) {
|
|
|
262
262
|
}
|
|
263
263
|
return e;
|
|
264
264
|
}
|
|
265
|
-
function
|
|
265
|
+
function Yt(n) {
|
|
266
266
|
const t = n.layout?.rotation;
|
|
267
267
|
if (t && "enabled" in t)
|
|
268
268
|
return {
|
|
@@ -272,7 +272,7 @@ function qt(n) {
|
|
|
272
272
|
}
|
|
273
273
|
};
|
|
274
274
|
}
|
|
275
|
-
function
|
|
275
|
+
function Bt(n) {
|
|
276
276
|
const t = n.layout?.sizing?.variance;
|
|
277
277
|
if (t)
|
|
278
278
|
return {
|
|
@@ -283,8 +283,8 @@ function Yt(n) {
|
|
|
283
283
|
}
|
|
284
284
|
};
|
|
285
285
|
}
|
|
286
|
-
function
|
|
287
|
-
const t =
|
|
286
|
+
function Jt(n = {}) {
|
|
287
|
+
const t = Yt(n), e = Bt(n);
|
|
288
288
|
let i = n.image;
|
|
289
289
|
(t || e) && (i = {
|
|
290
290
|
...e || {},
|
|
@@ -302,18 +302,18 @@ function Xt(n = {}) {
|
|
|
302
302
|
});
|
|
303
303
|
const r = {
|
|
304
304
|
loaders: {
|
|
305
|
-
...
|
|
305
|
+
...zt,
|
|
306
306
|
...n.config?.loaders ?? {}
|
|
307
307
|
}
|
|
308
308
|
}, a = {
|
|
309
309
|
loaders: o,
|
|
310
310
|
config: r,
|
|
311
|
-
image:
|
|
311
|
+
image: Xt(Rt, i),
|
|
312
312
|
layout: { ...y.layout },
|
|
313
313
|
animation: { ...y.animation },
|
|
314
314
|
interaction: { ...y.interaction },
|
|
315
315
|
rendering: { ...y.rendering },
|
|
316
|
-
styling:
|
|
316
|
+
styling: qt(At, n.styling)
|
|
317
317
|
};
|
|
318
318
|
return n.layout && (a.layout = {
|
|
319
319
|
...y.layout,
|
|
@@ -346,9 +346,9 @@ function Xt(n = {}) {
|
|
|
346
346
|
circular: n.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...n.animation.entry.start.circular } : y.animation.entry.start.circular
|
|
347
347
|
} : y.animation.entry.start,
|
|
348
348
|
timing: n.animation.entry.timing ? { ...y.animation.entry.timing, ...n.animation.entry.timing } : y.animation.entry.timing,
|
|
349
|
-
path: n.animation.entry.path ? { ...
|
|
350
|
-
rotation: n.animation.entry.rotation ? { ...
|
|
351
|
-
scale: n.animation.entry.scale ? { ...
|
|
349
|
+
path: n.animation.entry.path ? { ...yt, ...n.animation.entry.path } : y.animation.entry.path,
|
|
350
|
+
rotation: n.animation.entry.rotation ? { ...vt, ...n.animation.entry.rotation } : y.animation.entry.rotation,
|
|
351
|
+
scale: n.animation.entry.scale ? { ...xt, ...n.animation.entry.scale } : y.animation.entry.scale
|
|
352
352
|
})), n.interaction && (a.interaction = {
|
|
353
353
|
...y.interaction,
|
|
354
354
|
...n.interaction
|
|
@@ -376,18 +376,18 @@ function Xt(n = {}) {
|
|
|
376
376
|
...y.rendering.performance,
|
|
377
377
|
...n.rendering.performance
|
|
378
378
|
})), a.config.debug = {
|
|
379
|
-
...
|
|
379
|
+
...Ft,
|
|
380
380
|
...n.config?.debug ?? {}
|
|
381
381
|
}, a;
|
|
382
382
|
}
|
|
383
|
-
function
|
|
384
|
-
return { ...n ?
|
|
383
|
+
function Vt(n, t) {
|
|
384
|
+
return { ...n ? wt[n] : wt.playful, ...t };
|
|
385
385
|
}
|
|
386
|
-
function
|
|
387
|
-
return { ...n ?
|
|
386
|
+
function Qt(n, t) {
|
|
387
|
+
return { ...n ? It[n] : It.gentle, ...t };
|
|
388
388
|
}
|
|
389
|
-
function
|
|
390
|
-
return { ...n ?
|
|
389
|
+
function Zt(n, t) {
|
|
390
|
+
return { ...n ? Ct[n] : Ct.gentle, ...t };
|
|
391
391
|
}
|
|
392
392
|
class Kt {
|
|
393
393
|
constructor(t) {
|
|
@@ -418,7 +418,7 @@ class Kt {
|
|
|
418
418
|
this.cancelAllAnimations(t);
|
|
419
419
|
const r = o ?? this.config.duration, a = s ?? this.config.easing.default, h = this.buildTransformString(e), c = this.buildTransformString(i);
|
|
420
420
|
t.style.transition = "none";
|
|
421
|
-
const
|
|
421
|
+
const d = t.animate(
|
|
422
422
|
[
|
|
423
423
|
{ transform: h },
|
|
424
424
|
{ transform: c }
|
|
@@ -432,13 +432,13 @@ class Kt {
|
|
|
432
432
|
), l = {
|
|
433
433
|
id: `anim-${++this.animationIdCounter}`,
|
|
434
434
|
element: t,
|
|
435
|
-
animation:
|
|
435
|
+
animation: d,
|
|
436
436
|
fromState: e,
|
|
437
437
|
toState: i,
|
|
438
438
|
startTime: performance.now(),
|
|
439
439
|
duration: r
|
|
440
440
|
};
|
|
441
|
-
return this.activeAnimations.set(t, l),
|
|
441
|
+
return this.activeAnimations.set(t, l), d.finished.then(() => {
|
|
442
442
|
t.style.transform = c, this.activeAnimations.delete(t);
|
|
443
443
|
}).catch(() => {
|
|
444
444
|
this.activeAnimations.delete(t);
|
|
@@ -548,31 +548,31 @@ class Kt {
|
|
|
548
548
|
function V(n, t, e) {
|
|
549
549
|
return n + (t - n) * e;
|
|
550
550
|
}
|
|
551
|
-
function
|
|
552
|
-
const { overshoot: o, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, c =
|
|
553
|
-
let
|
|
551
|
+
function te(n, t, e, i) {
|
|
552
|
+
const { overshoot: o, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, c = ee(s, r);
|
|
553
|
+
let d = 0, l = 0, u = 1, m = o, b = !1;
|
|
554
554
|
for (let g = 0; g < c.length; g++)
|
|
555
555
|
if (n <= c[g].time) {
|
|
556
|
-
l = g === 0 ? 0 : c[g - 1].time,
|
|
556
|
+
l = g === 0 ? 0 : c[g - 1].time, u = c[g].time, m = c[g].overshoot, b = c[g].isOvershoot;
|
|
557
557
|
break;
|
|
558
558
|
}
|
|
559
|
-
const p = (n - l) / (
|
|
559
|
+
const p = (n - l) / (u - l);
|
|
560
560
|
if (b)
|
|
561
|
-
|
|
561
|
+
d = 1 + m * at(p);
|
|
562
562
|
else if (l === 0)
|
|
563
|
-
|
|
563
|
+
d = at(p);
|
|
564
564
|
else {
|
|
565
565
|
const f = 1 + (c.find(
|
|
566
|
-
(
|
|
566
|
+
(E, v) => E.time > l && v > 0 && c[v - 1].isOvershoot
|
|
567
567
|
)?.overshoot || m);
|
|
568
|
-
|
|
568
|
+
d = V(f, 1, at(p));
|
|
569
569
|
}
|
|
570
570
|
return {
|
|
571
|
-
x: t.x + a *
|
|
572
|
-
y: t.y + h *
|
|
571
|
+
x: t.x + a * d,
|
|
572
|
+
y: t.y + h * d
|
|
573
573
|
};
|
|
574
574
|
}
|
|
575
|
-
function
|
|
575
|
+
function ee(n, t) {
|
|
576
576
|
const e = [];
|
|
577
577
|
let i = 0.6;
|
|
578
578
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
@@ -582,57 +582,57 @@ function Qt(n, t) {
|
|
|
582
582
|
i += r, e.push({ time: i, overshoot: o, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
583
583
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
584
584
|
}
|
|
585
|
-
function
|
|
586
|
-
const { stiffness: o, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, c = e.y - t.y,
|
|
587
|
-
let
|
|
585
|
+
function ie(n, t, e, i) {
|
|
586
|
+
const { stiffness: o, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, c = e.y - t.y, d = Math.sqrt(o / r), l = s / (2 * Math.sqrt(o * r));
|
|
587
|
+
let u;
|
|
588
588
|
if (l < 1) {
|
|
589
|
-
const m =
|
|
590
|
-
|
|
589
|
+
const m = d * Math.sqrt(1 - l * l), b = Math.exp(-l * d * n * 3), p = Math.cos(m * n * a * Math.PI);
|
|
590
|
+
u = 1 - b * p;
|
|
591
591
|
} else
|
|
592
|
-
|
|
593
|
-
return
|
|
594
|
-
x: t.x + h *
|
|
595
|
-
y: t.y + c *
|
|
592
|
+
u = 1 - Math.exp(-d * n * 3);
|
|
593
|
+
return u = Math.max(0, Math.min(u, 1.3)), {
|
|
594
|
+
x: t.x + h * u,
|
|
595
|
+
y: t.y + c * u
|
|
596
596
|
};
|
|
597
597
|
}
|
|
598
|
-
function
|
|
599
|
-
const { amplitude: o, frequency: s, decay: r, decayRate: a, phase: h } = i, c = e.x - t.x,
|
|
598
|
+
function ne(n, t, e, i) {
|
|
599
|
+
const { amplitude: o, frequency: s, decay: r, decayRate: a, phase: h } = i, c = e.x - t.x, d = e.y - t.y, l = Math.sqrt(c * c + d * d), u = l > 0 ? -d / l : 0, m = l > 0 ? c / l : 1, b = s * Math.PI * 2 * n + h, p = r ? Math.pow(1 - n, a) : 1, g = o * Math.sin(b) * p, f = oe(n);
|
|
600
600
|
return {
|
|
601
|
-
x: V(t.x, e.x, f) + g *
|
|
601
|
+
x: V(t.x, e.x, f) + g * u,
|
|
602
602
|
y: V(t.y, e.y, f) + g * m
|
|
603
603
|
};
|
|
604
604
|
}
|
|
605
|
-
function
|
|
605
|
+
function at(n) {
|
|
606
606
|
return 1 - (1 - n) * (1 - n);
|
|
607
607
|
}
|
|
608
|
-
function
|
|
608
|
+
function oe(n) {
|
|
609
609
|
return 1 - Math.pow(1 - n, 3);
|
|
610
610
|
}
|
|
611
|
-
function
|
|
611
|
+
function se(n, t, e) {
|
|
612
612
|
const { amplitude: i, frequency: o, decay: s } = e, r = Math.sin(n * o * Math.PI * 2), a = s ? Math.pow(1 - n, 2) : 1, h = i * r * a;
|
|
613
613
|
return t + h;
|
|
614
614
|
}
|
|
615
|
-
function
|
|
615
|
+
function ae(n, t, e) {
|
|
616
616
|
const { overshoot: i, bounces: o } = e, s = [];
|
|
617
617
|
s.push({ time: 0.5, scale: i });
|
|
618
618
|
let r = i;
|
|
619
619
|
const a = 0.5, c = 0.5 / (o * 2);
|
|
620
|
-
let
|
|
621
|
-
for (let
|
|
620
|
+
let d = 0.5;
|
|
621
|
+
for (let u = 0; u < o; u++) {
|
|
622
622
|
const m = 1 - (r - 1) * a;
|
|
623
|
-
|
|
623
|
+
d += c, s.push({ time: d, scale: m }), r = 1 + (r - 1) * a * a, d += c, u < o - 1 && s.push({ time: d, scale: r });
|
|
624
624
|
}
|
|
625
625
|
s.push({ time: 1, scale: 1 });
|
|
626
626
|
let l = 1;
|
|
627
|
-
for (let
|
|
628
|
-
if (n <= s[
|
|
629
|
-
const m =
|
|
630
|
-
l = b + (s[
|
|
627
|
+
for (let u = 0; u < s.length; u++)
|
|
628
|
+
if (n <= s[u].time) {
|
|
629
|
+
const m = u === 0 ? 0 : s[u - 1].time, b = u === 0 ? 1 : s[u - 1].scale, p = (n - m) / (s[u].time - m), g = at(p);
|
|
630
|
+
l = b + (s[u].scale - b) * g;
|
|
631
631
|
break;
|
|
632
632
|
}
|
|
633
633
|
return l * t;
|
|
634
634
|
}
|
|
635
|
-
function
|
|
635
|
+
function re(n) {
|
|
636
636
|
const {
|
|
637
637
|
element: t,
|
|
638
638
|
startPosition: e,
|
|
@@ -643,43 +643,43 @@ function se(n) {
|
|
|
643
643
|
imageHeight: a,
|
|
644
644
|
rotation: h,
|
|
645
645
|
scale: c,
|
|
646
|
-
onComplete:
|
|
646
|
+
onComplete: d,
|
|
647
647
|
rotationConfig: l,
|
|
648
|
-
startRotation:
|
|
648
|
+
startRotation: u,
|
|
649
649
|
scaleConfig: m,
|
|
650
650
|
startScale: b
|
|
651
|
-
} = n, p = o.type, g =
|
|
652
|
-
if ((p === "linear" || p === "arc") && !v && !(
|
|
653
|
-
|
|
651
|
+
} = n, p = o.type, g = u !== void 0 && u !== h, f = l?.mode === "wobble", E = l?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, v = g || f, x = b !== void 0 && b !== c, w = m?.mode === "pop", S = m?.pop || { overshoot: 1.2, bounces: 1 };
|
|
652
|
+
if ((p === "linear" || p === "arc") && !v && !(x || w)) {
|
|
653
|
+
d && d();
|
|
654
654
|
return;
|
|
655
655
|
}
|
|
656
|
-
const
|
|
657
|
-
function
|
|
658
|
-
const
|
|
656
|
+
const z = performance.now(), F = -r / 2, H = -a / 2;
|
|
657
|
+
function N(X) {
|
|
658
|
+
const U = X - z, T = Math.min(U / s, 1);
|
|
659
659
|
let D;
|
|
660
660
|
switch (p) {
|
|
661
661
|
case "bounce": {
|
|
662
|
-
const O =
|
|
662
|
+
const O = Vt(
|
|
663
663
|
o.bouncePreset,
|
|
664
664
|
o.bounce
|
|
665
665
|
);
|
|
666
|
-
D =
|
|
666
|
+
D = te(T, e, i, O);
|
|
667
667
|
break;
|
|
668
668
|
}
|
|
669
669
|
case "elastic": {
|
|
670
|
-
const O =
|
|
670
|
+
const O = Qt(
|
|
671
671
|
o.elasticPreset,
|
|
672
672
|
o.elastic
|
|
673
673
|
);
|
|
674
|
-
D =
|
|
674
|
+
D = ie(T, e, i, O);
|
|
675
675
|
break;
|
|
676
676
|
}
|
|
677
677
|
case "wave": {
|
|
678
|
-
const O =
|
|
678
|
+
const O = Zt(
|
|
679
679
|
o.wavePreset,
|
|
680
680
|
o.wave
|
|
681
681
|
);
|
|
682
|
-
D =
|
|
682
|
+
D = ne(T, e, i, O);
|
|
683
683
|
break;
|
|
684
684
|
}
|
|
685
685
|
default:
|
|
@@ -688,18 +688,18 @@ function se(n) {
|
|
|
688
688
|
y: V(e.y, i.y, T)
|
|
689
689
|
};
|
|
690
690
|
}
|
|
691
|
-
const
|
|
692
|
-
let
|
|
693
|
-
f ?
|
|
694
|
-
let
|
|
695
|
-
|
|
691
|
+
const G = D.x - i.x, j = D.y - i.y;
|
|
692
|
+
let A;
|
|
693
|
+
f ? A = se(T, h, E) : g ? A = V(u, h, T) : A = h;
|
|
694
|
+
let M;
|
|
695
|
+
w ? M = ae(T, c, S) : x ? M = V(b, c, T) : M = c, t.style.transform = `translate(${F}px, ${H}px) translate(${G}px, ${j}px) rotate(${A}deg) scale(${M})`, T < 1 ? requestAnimationFrame(N) : (t.style.transform = `translate(${F}px, ${H}px) rotate(${h}deg) scale(${c})`, d && d());
|
|
696
696
|
}
|
|
697
|
-
requestAnimationFrame(
|
|
697
|
+
requestAnimationFrame(N);
|
|
698
698
|
}
|
|
699
|
-
function
|
|
699
|
+
function ce(n) {
|
|
700
700
|
return n === "bounce" || n === "elastic" || n === "wave";
|
|
701
701
|
}
|
|
702
|
-
const
|
|
702
|
+
const le = {
|
|
703
703
|
radial: "center",
|
|
704
704
|
spiral: "center",
|
|
705
705
|
grid: "top",
|
|
@@ -707,15 +707,15 @@ const re = {
|
|
|
707
707
|
random: "nearest-edge",
|
|
708
708
|
wave: "left"
|
|
709
709
|
};
|
|
710
|
-
class
|
|
710
|
+
class he {
|
|
711
711
|
constructor(t, e) {
|
|
712
|
-
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
712
|
+
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || xt;
|
|
713
713
|
}
|
|
714
714
|
/**
|
|
715
715
|
* Get the effective start position, considering layout-aware defaults
|
|
716
716
|
*/
|
|
717
717
|
resolveStartPosition() {
|
|
718
|
-
return this.config.start.position ? this.config.start.position :
|
|
718
|
+
return this.config.start.position ? this.config.start.position : le[this.layoutAlgorithm] || "nearest-edge";
|
|
719
719
|
}
|
|
720
720
|
/**
|
|
721
721
|
* Calculate the starting position for an image's entry animation
|
|
@@ -753,9 +753,9 @@ class ce {
|
|
|
753
753
|
* Calculate start position from the nearest edge (current default behavior)
|
|
754
754
|
*/
|
|
755
755
|
calculateNearestEdge(t, e, i, o) {
|
|
756
|
-
const s = t.x, r = t.y, a = s, h = i.width - s, c = r,
|
|
757
|
-
let
|
|
758
|
-
return l === a ?
|
|
756
|
+
const s = t.x, r = t.y, a = s, h = i.width - s, c = r, d = i.height - r, l = Math.min(a, h, c, d);
|
|
757
|
+
let u = t.x, m = t.y;
|
|
758
|
+
return l === a ? u = -(e.width + o) : l === h ? u = i.width + o : l === c ? m = -(e.height + o) : m = i.height + o, { x: u, y: m };
|
|
759
759
|
}
|
|
760
760
|
/**
|
|
761
761
|
* Calculate start position from a specific edge
|
|
@@ -811,9 +811,9 @@ class ce {
|
|
|
811
811
|
) * p / 2;
|
|
812
812
|
} else
|
|
813
813
|
h = typeof c == "number" ? c : 500;
|
|
814
|
-
let
|
|
815
|
-
a === "even" ?
|
|
816
|
-
const l = i.width / 2,
|
|
814
|
+
let d;
|
|
815
|
+
a === "even" ? d = o / s * 2 * Math.PI : d = Math.random() * 2 * Math.PI;
|
|
816
|
+
const l = i.width / 2, u = i.height / 2, m = l + Math.cos(d) * h, b = u + Math.sin(d) * h;
|
|
817
817
|
return { x: m, y: b };
|
|
818
818
|
}
|
|
819
819
|
/**
|
|
@@ -834,8 +834,8 @@ class ce {
|
|
|
834
834
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
835
835
|
*/
|
|
836
836
|
buildStartTransform(t, e, i, o, s, r, a, h) {
|
|
837
|
-
const c = t.x - e.x,
|
|
838
|
-
return t.useScale ? `${p} translate(${c}px, ${
|
|
837
|
+
const c = t.x - e.x, d = t.y - e.y, l = a !== void 0 ? a : i, u = h !== void 0 ? h : o, m = s !== void 0 ? -s / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = s !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
|
|
838
|
+
return t.useScale ? `${p} translate(${c}px, ${d}px) rotate(${l}deg) scale(0)` : `${p} translate(${c}px, ${d}px) rotate(${l}deg) scale(${u})`;
|
|
839
839
|
}
|
|
840
840
|
/**
|
|
841
841
|
* Build the final CSS transform string
|
|
@@ -860,7 +860,7 @@ class ce {
|
|
|
860
860
|
* Check if the current path type requires JavaScript animation
|
|
861
861
|
*/
|
|
862
862
|
requiresJSAnimation() {
|
|
863
|
-
return
|
|
863
|
+
return ce(this.pathConfig.type);
|
|
864
864
|
}
|
|
865
865
|
/**
|
|
866
866
|
* Get the path configuration
|
|
@@ -1023,8 +1023,8 @@ class ce {
|
|
|
1023
1023
|
let a = e;
|
|
1024
1024
|
for (let h = 0; h < r.length; h++)
|
|
1025
1025
|
if (t <= r[h].time) {
|
|
1026
|
-
const c = h === 0 ? 0 : r[h - 1].time,
|
|
1027
|
-
a =
|
|
1026
|
+
const c = h === 0 ? 0 : r[h - 1].time, d = h === 0 ? e : r[h - 1].scale, l = (t - c) / (r[h].time - c), u = this.easeOutQuad(l);
|
|
1027
|
+
a = d + (r[h].scale - d) * u;
|
|
1028
1028
|
break;
|
|
1029
1029
|
}
|
|
1030
1030
|
return a * e;
|
|
@@ -1039,8 +1039,8 @@ class ce {
|
|
|
1039
1039
|
const s = 0.5, a = 0.5 / (t * 2);
|
|
1040
1040
|
let h = 0.5;
|
|
1041
1041
|
for (let c = 0; c < t; c++) {
|
|
1042
|
-
const
|
|
1043
|
-
h += a, i.push({ time: h, scale:
|
|
1042
|
+
const d = 1 - (o - 1) * s;
|
|
1043
|
+
h += a, i.push({ time: h, scale: d }), o = 1 + (o - 1) * s * s, h += a, c < t - 1 && i.push({ time: h, scale: o });
|
|
1044
1044
|
}
|
|
1045
1045
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1046
1046
|
}
|
|
@@ -1051,7 +1051,7 @@ class ce {
|
|
|
1051
1051
|
return 1 - (1 - t) * (1 - t);
|
|
1052
1052
|
}
|
|
1053
1053
|
}
|
|
1054
|
-
class
|
|
1054
|
+
class ue {
|
|
1055
1055
|
constructor(t, e = {}) {
|
|
1056
1056
|
this.config = t, this.imageConfig = e;
|
|
1057
1057
|
}
|
|
@@ -1063,17 +1063,17 @@ class le {
|
|
|
1063
1063
|
* @returns Array of layout objects with position, rotation, scale
|
|
1064
1064
|
*/
|
|
1065
1065
|
generate(t, e, i = {}) {
|
|
1066
|
-
const o = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none",
|
|
1067
|
-
for (let
|
|
1068
|
-
const
|
|
1069
|
-
id:
|
|
1070
|
-
x:
|
|
1071
|
-
y:
|
|
1072
|
-
rotation:
|
|
1073
|
-
scale:
|
|
1074
|
-
baseSize:
|
|
1066
|
+
const o = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, u = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, b = u !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, E = s - a - g, v = r - a - f, x = a + g, w = a + f;
|
|
1067
|
+
for (let S = 0; S < t; S++) {
|
|
1068
|
+
const C = this.random(x, E), z = this.random(w, v), F = c === "random" ? this.random(d, l) : 0, H = b ? this.random(u, m) : 1, N = h * H, X = {
|
|
1069
|
+
id: S,
|
|
1070
|
+
x: C,
|
|
1071
|
+
y: z,
|
|
1072
|
+
rotation: F,
|
|
1073
|
+
scale: H,
|
|
1074
|
+
baseSize: N
|
|
1075
1075
|
};
|
|
1076
|
-
o.push(
|
|
1076
|
+
o.push(X);
|
|
1077
1077
|
}
|
|
1078
1078
|
return o;
|
|
1079
1079
|
}
|
|
@@ -1087,7 +1087,7 @@ class le {
|
|
|
1087
1087
|
return Math.random() * (e - t) + t;
|
|
1088
1088
|
}
|
|
1089
1089
|
}
|
|
1090
|
-
class
|
|
1090
|
+
class de {
|
|
1091
1091
|
constructor(t, e = {}) {
|
|
1092
1092
|
this.config = t, this.imageConfig = e;
|
|
1093
1093
|
}
|
|
@@ -1099,47 +1099,47 @@ class he {
|
|
|
1099
1099
|
* @returns Array of layout objects with position, rotation, scale
|
|
1100
1100
|
*/
|
|
1101
1101
|
generate(t, e, i = {}) {
|
|
1102
|
-
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1102
|
+
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, l = this.imageConfig.sizing?.variance?.min ?? 1, u = this.imageConfig.sizing?.variance?.max ?? 1, m = l !== 1 || u !== 1, b = this.config.scaleDecay ?? 0, p = i.fixedHeight ?? a, g = s / 2, f = r / 2, E = Math.ceil(Math.sqrt(t));
|
|
1103
1103
|
if (t > 0) {
|
|
1104
|
-
const
|
|
1104
|
+
const w = m ? this.random(l, u) : 1, S = p * w;
|
|
1105
1105
|
o.push({
|
|
1106
1106
|
id: 0,
|
|
1107
1107
|
x: g,
|
|
1108
1108
|
y: f,
|
|
1109
|
-
rotation: h === "random" ? this.random(c * 0.33,
|
|
1109
|
+
rotation: h === "random" ? this.random(c * 0.33, d * 0.33) : 0,
|
|
1110
1110
|
// Less rotation for center
|
|
1111
|
-
scale:
|
|
1112
|
-
baseSize:
|
|
1111
|
+
scale: w,
|
|
1112
|
+
baseSize: S,
|
|
1113
1113
|
zIndex: 100
|
|
1114
1114
|
// Center image is highest
|
|
1115
1115
|
});
|
|
1116
1116
|
}
|
|
1117
|
-
let v = 1,
|
|
1117
|
+
let v = 1, x = 1;
|
|
1118
1118
|
for (; v < t; ) {
|
|
1119
|
-
const
|
|
1120
|
-
if (
|
|
1121
|
-
|
|
1119
|
+
const w = x / E, S = b > 0 ? 1 - w * b * 0.5 : 1, C = x * (p * 0.8), z = C * 1.5, F = Math.PI * (3 * (z + C) - Math.sqrt((3 * z + C) * (z + 3 * C))), H = this.estimateWidth(p), N = Math.floor(F / (H * 0.7));
|
|
1120
|
+
if (N === 0) {
|
|
1121
|
+
x++;
|
|
1122
1122
|
continue;
|
|
1123
1123
|
}
|
|
1124
|
-
const
|
|
1125
|
-
for (let T = 0; T <
|
|
1126
|
-
const D = T *
|
|
1127
|
-
let
|
|
1128
|
-
const $ = this.config.spacing.padding ?? 50,
|
|
1129
|
-
|
|
1130
|
-
const
|
|
1124
|
+
const X = 2 * Math.PI / N, U = x * (20 * Math.PI / 180);
|
|
1125
|
+
for (let T = 0; T < N && v < t; T++) {
|
|
1126
|
+
const D = T * X + U, G = m ? this.random(l, u) : 1, j = S * G, A = p * j;
|
|
1127
|
+
let M = g + Math.cos(D) * z, O = f + Math.sin(D) * C;
|
|
1128
|
+
const $ = this.config.spacing.padding ?? 50, P = A * 1.5 / 2, R = A / 2;
|
|
1129
|
+
M - P < $ ? M = $ + P : M + P > s - $ && (M = s - $ - P), O - R < $ ? O = $ + R : O + R > r - $ && (O = r - $ - R);
|
|
1130
|
+
const k = h === "random" ? this.random(c, d) : 0;
|
|
1131
1131
|
o.push({
|
|
1132
1132
|
id: v,
|
|
1133
|
-
x:
|
|
1133
|
+
x: M,
|
|
1134
1134
|
y: O,
|
|
1135
|
-
rotation:
|
|
1136
|
-
scale:
|
|
1137
|
-
baseSize:
|
|
1138
|
-
zIndex: Math.max(1, 100 -
|
|
1135
|
+
rotation: k,
|
|
1136
|
+
scale: j,
|
|
1137
|
+
baseSize: A,
|
|
1138
|
+
zIndex: Math.max(1, 100 - x)
|
|
1139
1139
|
// Outer rings have lower z-index
|
|
1140
1140
|
}), v++;
|
|
1141
1141
|
}
|
|
1142
|
-
|
|
1142
|
+
x++;
|
|
1143
1143
|
}
|
|
1144
1144
|
return o;
|
|
1145
1145
|
}
|
|
@@ -1162,7 +1162,7 @@ class he {
|
|
|
1162
1162
|
return Math.random() * (e - t) + t;
|
|
1163
1163
|
}
|
|
1164
1164
|
}
|
|
1165
|
-
const
|
|
1165
|
+
const ge = {
|
|
1166
1166
|
columns: "auto",
|
|
1167
1167
|
rows: "auto",
|
|
1168
1168
|
stagger: "none",
|
|
@@ -1172,7 +1172,7 @@ const de = {
|
|
|
1172
1172
|
alignment: "center",
|
|
1173
1173
|
gap: 10,
|
|
1174
1174
|
overflowOffset: 0.25
|
|
1175
|
-
},
|
|
1175
|
+
}, Tt = [
|
|
1176
1176
|
{ x: 1, y: 1 },
|
|
1177
1177
|
// bottom-right
|
|
1178
1178
|
{ x: -1, y: -1 },
|
|
@@ -1190,7 +1190,7 @@ const de = {
|
|
|
1190
1190
|
{ x: 0, y: 1 }
|
|
1191
1191
|
// down
|
|
1192
1192
|
];
|
|
1193
|
-
class
|
|
1193
|
+
class me {
|
|
1194
1194
|
constructor(t, e = {}) {
|
|
1195
1195
|
this.config = t, this.imageConfig = e;
|
|
1196
1196
|
}
|
|
@@ -1202,65 +1202,65 @@ class ue {
|
|
|
1202
1202
|
* @returns Array of layout objects with position, rotation, scale
|
|
1203
1203
|
*/
|
|
1204
1204
|
generate(t, e, i = {}) {
|
|
1205
|
-
const o = [], { width: s, height: r } = e, a = { ...
|
|
1205
|
+
const o = [], { width: s, height: r } = e, a = { ...ge, ...this.config.grid }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.sizing?.variance?.min ?? 1, u = this.imageConfig.sizing?.variance?.max ?? 1, m = l !== 1 || u !== 1, b = s - 2 * h, p = r - 2 * h, { columns: g, rows: f } = this.calculateGridDimensions(
|
|
1206
1206
|
t,
|
|
1207
1207
|
b,
|
|
1208
1208
|
p,
|
|
1209
1209
|
c,
|
|
1210
1210
|
a
|
|
1211
|
-
),
|
|
1211
|
+
), E = a.stagger === "row", v = a.stagger === "column", x = E ? g + 0.5 : g, w = v ? f + 0.5 : f, S = (b - a.gap * (g - 1)) / x, C = (p - a.gap * (f - 1)) / w, z = E ? S / 2 : 0, F = v ? C / 2 : 0, H = 1 + a.overlap, N = Math.min(S, C) * H, X = i.fixedHeight ? Math.min(i.fixedHeight, N) : N, U = g * S + (g - 1) * a.gap + z, T = f * C + (f - 1) * a.gap + F, D = h + (b - U) / 2, G = h + (p - T) / 2, j = g * f, A = a.columns !== "auto" && a.rows !== "auto", M = A && t > j;
|
|
1212
1212
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1213
1213
|
gridConfigColumns: a.columns,
|
|
1214
1214
|
gridConfigRows: a.rows,
|
|
1215
1215
|
columns: g,
|
|
1216
1216
|
rows: f,
|
|
1217
|
-
cellCount:
|
|
1218
|
-
hasFixedGrid:
|
|
1217
|
+
cellCount: j,
|
|
1218
|
+
hasFixedGrid: A,
|
|
1219
1219
|
imageCount: t,
|
|
1220
|
-
isOverflowMode:
|
|
1220
|
+
isOverflowMode: M
|
|
1221
1221
|
});
|
|
1222
|
-
const O =
|
|
1223
|
-
for (let
|
|
1224
|
-
let
|
|
1225
|
-
if (
|
|
1226
|
-
const q =
|
|
1227
|
-
|
|
1222
|
+
const O = M ? new Array(j).fill(0) : [], $ = Math.min(S, C) * a.overflowOffset;
|
|
1223
|
+
for (let L = 0; L < t; L++) {
|
|
1224
|
+
let P, R, k = 0;
|
|
1225
|
+
if (M && L >= j) {
|
|
1226
|
+
const q = L - j, W = q % j;
|
|
1227
|
+
k = Math.floor(q / j) + 1, O[W]++, a.fillDirection === "row" ? (P = W % g, R = Math.floor(W / g)) : (R = W % f, P = Math.floor(W / f));
|
|
1228
1228
|
} else
|
|
1229
|
-
a.fillDirection === "row" ? (
|
|
1230
|
-
let
|
|
1231
|
-
if (a.stagger === "row" &&
|
|
1232
|
-
const q = (
|
|
1233
|
-
|
|
1229
|
+
a.fillDirection === "row" ? (P = L % g, R = Math.floor(L / g)) : (R = L % f, P = Math.floor(L / f));
|
|
1230
|
+
let _ = D + P * (S + a.gap) + S / 2, Y = G + R * (C + a.gap) + C / 2;
|
|
1231
|
+
if (a.stagger === "row" && R % 2 === 1 ? _ += S / 2 : a.stagger === "column" && P % 2 === 1 && (Y += C / 2), k > 0) {
|
|
1232
|
+
const q = (k - 1) % Tt.length, W = Tt[q];
|
|
1233
|
+
_ += W.x * $, Y += W.y * $;
|
|
1234
1234
|
}
|
|
1235
1235
|
if (a.jitter > 0) {
|
|
1236
|
-
const q =
|
|
1237
|
-
|
|
1236
|
+
const q = S / 2 * a.jitter, W = C / 2 * a.jitter;
|
|
1237
|
+
_ += this.random(-q, q), Y += this.random(-W, W);
|
|
1238
1238
|
}
|
|
1239
|
-
let B =
|
|
1240
|
-
if (!
|
|
1239
|
+
let B = _, J = Y;
|
|
1240
|
+
if (!M && a.fillDirection === "row") {
|
|
1241
1241
|
const q = t % g || g;
|
|
1242
|
-
if (
|
|
1243
|
-
const
|
|
1244
|
-
let
|
|
1245
|
-
a.alignment === "center" ?
|
|
1242
|
+
if (R === Math.floor((t - 1) / g) && q < g) {
|
|
1243
|
+
const St = q * S + (q - 1) * a.gap;
|
|
1244
|
+
let ft = 0;
|
|
1245
|
+
a.alignment === "center" ? ft = (U - St) / 2 : a.alignment === "end" && (ft = U - St), B += ft;
|
|
1246
1246
|
}
|
|
1247
1247
|
}
|
|
1248
|
-
const
|
|
1249
|
-
B = Math.max(
|
|
1250
|
-
let
|
|
1251
|
-
if (
|
|
1252
|
-
const q = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1253
|
-
a.jitter > 0 ?
|
|
1248
|
+
const lt = m ? this.random(l, u) : 1, Q = X * lt, ot = Q * 1.5 / 2, st = Q / 2, ut = h + ot, dt = s - h - ot, Ot = h + st, $t = r - h - st;
|
|
1249
|
+
B = Math.max(ut, Math.min(B, dt)), J = Math.max(Ot, Math.min(J, $t));
|
|
1250
|
+
let gt = 0;
|
|
1251
|
+
if (d === "random") {
|
|
1252
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, W = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1253
|
+
a.jitter > 0 ? gt = this.random(q * a.jitter, W * a.jitter) : gt = this.random(q, W);
|
|
1254
1254
|
}
|
|
1255
|
-
let
|
|
1256
|
-
|
|
1257
|
-
id:
|
|
1255
|
+
let mt;
|
|
1256
|
+
M && k > 0 ? mt = 50 - k : mt = M ? 100 + L : L + 1, o.push({
|
|
1257
|
+
id: L,
|
|
1258
1258
|
x: B,
|
|
1259
1259
|
y: J,
|
|
1260
|
-
rotation:
|
|
1261
|
-
scale:
|
|
1262
|
-
baseSize:
|
|
1263
|
-
zIndex:
|
|
1260
|
+
rotation: gt,
|
|
1261
|
+
scale: lt,
|
|
1262
|
+
baseSize: Q,
|
|
1263
|
+
zIndex: mt
|
|
1264
1264
|
});
|
|
1265
1265
|
}
|
|
1266
1266
|
return o;
|
|
@@ -1290,14 +1290,14 @@ class ue {
|
|
|
1290
1290
|
return Math.random() * (e - t) + t;
|
|
1291
1291
|
}
|
|
1292
1292
|
}
|
|
1293
|
-
const
|
|
1293
|
+
const fe = Math.PI * (3 - Math.sqrt(5)), pe = {
|
|
1294
1294
|
spiralType: "golden",
|
|
1295
1295
|
direction: "counterclockwise",
|
|
1296
1296
|
tightness: 1,
|
|
1297
1297
|
scaleDecay: 0,
|
|
1298
1298
|
startAngle: 0
|
|
1299
1299
|
};
|
|
1300
|
-
class
|
|
1300
|
+
class be {
|
|
1301
1301
|
constructor(t, e = {}) {
|
|
1302
1302
|
this.config = t, this.imageConfig = e;
|
|
1303
1303
|
}
|
|
@@ -1309,36 +1309,36 @@ class fe {
|
|
|
1309
1309
|
* @returns Array of layout objects with position, rotation, scale
|
|
1310
1310
|
*/
|
|
1311
1311
|
generate(t, e, i = {}) {
|
|
1312
|
-
const o = [], { width: s, height: r } = e, a = { ...
|
|
1312
|
+
const o = [], { width: s, height: r } = e, a = { ...pe, ...this.config.spiral }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = m !== 1 || b !== 1, g = this.config.scaleDecay ?? a.scaleDecay, f = s / 2, E = r / 2, v = Math.min(
|
|
1313
1313
|
f - h - c / 2,
|
|
1314
|
-
|
|
1315
|
-
),
|
|
1316
|
-
for (let
|
|
1317
|
-
let
|
|
1314
|
+
E - h - c / 2
|
|
1315
|
+
), x = a.direction === "clockwise" ? -1 : 1;
|
|
1316
|
+
for (let w = 0; w < t; w++) {
|
|
1317
|
+
let S, C;
|
|
1318
1318
|
if (a.spiralType === "golden")
|
|
1319
|
-
|
|
1319
|
+
S = w * fe * x + a.startAngle, C = this.calculateGoldenRadius(w, t, v, a.tightness);
|
|
1320
1320
|
else if (a.spiralType === "archimedean") {
|
|
1321
|
-
const
|
|
1322
|
-
|
|
1321
|
+
const _ = w * 0.5 * a.tightness;
|
|
1322
|
+
S = _ * x + a.startAngle, C = this.calculateArchimedeanRadius(_, t, v, a.tightness);
|
|
1323
1323
|
} else {
|
|
1324
|
-
const
|
|
1325
|
-
|
|
1324
|
+
const _ = w * 0.3 * a.tightness;
|
|
1325
|
+
S = _ * x + a.startAngle, C = this.calculateLogarithmicRadius(_, t, v, a.tightness);
|
|
1326
1326
|
}
|
|
1327
|
-
const
|
|
1328
|
-
let
|
|
1329
|
-
if (
|
|
1330
|
-
const
|
|
1331
|
-
|
|
1332
|
-
} else
|
|
1333
|
-
const
|
|
1327
|
+
const z = f + Math.cos(S) * C, F = E + Math.sin(S) * C, H = C / v, N = g > 0 ? 1 - H * g * 0.5 : 1, X = p ? this.random(m, b) : 1, U = N * X, T = c * U, G = T * 1.5 / 2, j = T / 2, A = h + G, M = s - h - G, O = h + j, $ = r - h - j, L = Math.max(A, Math.min(z, M)), P = Math.max(O, Math.min(F, $));
|
|
1328
|
+
let R = 0;
|
|
1329
|
+
if (d === "random") {
|
|
1330
|
+
const _ = S * 180 / Math.PI % 360, Y = this.random(l, u);
|
|
1331
|
+
R = a.spiralType === "golden" ? Y : _ * 0.1 + Y * 0.9;
|
|
1332
|
+
} else d === "tangent" && (R = this.calculateSpiralTangent(S, C, a));
|
|
1333
|
+
const k = t - w;
|
|
1334
1334
|
o.push({
|
|
1335
|
-
id:
|
|
1336
|
-
x:
|
|
1337
|
-
y:
|
|
1338
|
-
rotation:
|
|
1339
|
-
scale:
|
|
1335
|
+
id: w,
|
|
1336
|
+
x: L,
|
|
1337
|
+
y: P,
|
|
1338
|
+
rotation: R,
|
|
1339
|
+
scale: U,
|
|
1340
1340
|
baseSize: T,
|
|
1341
|
-
zIndex:
|
|
1341
|
+
zIndex: k
|
|
1342
1342
|
});
|
|
1343
1343
|
}
|
|
1344
1344
|
return o;
|
|
@@ -1391,7 +1391,7 @@ class fe {
|
|
|
1391
1391
|
return Math.random() * (e - t) + t;
|
|
1392
1392
|
}
|
|
1393
1393
|
}
|
|
1394
|
-
const
|
|
1394
|
+
const ye = {
|
|
1395
1395
|
clusterCount: "auto",
|
|
1396
1396
|
clusterSpread: 150,
|
|
1397
1397
|
clusterSpacing: 200,
|
|
@@ -1399,7 +1399,7 @@ const pe = {
|
|
|
1399
1399
|
overlap: 0.3,
|
|
1400
1400
|
distribution: "gaussian"
|
|
1401
1401
|
};
|
|
1402
|
-
class
|
|
1402
|
+
class ve {
|
|
1403
1403
|
constructor(t, e = {}) {
|
|
1404
1404
|
this.config = t, this.imageConfig = e;
|
|
1405
1405
|
}
|
|
@@ -1411,7 +1411,7 @@ class be {
|
|
|
1411
1411
|
* @returns Array of layout objects with position, rotation, scale
|
|
1412
1412
|
*/
|
|
1413
1413
|
generate(t, e, i = {}) {
|
|
1414
|
-
const o = [], { width: s, height: r } = e, a = { ...
|
|
1414
|
+
const o = [], { width: s, height: r } = e, a = { ...ye, ...this.config.cluster }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = m !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1415
1415
|
t,
|
|
1416
1416
|
a.clusterCount,
|
|
1417
1417
|
s,
|
|
@@ -1423,35 +1423,35 @@ class be {
|
|
|
1423
1423
|
r,
|
|
1424
1424
|
h,
|
|
1425
1425
|
a
|
|
1426
|
-
),
|
|
1427
|
-
for (let
|
|
1428
|
-
|
|
1426
|
+
), E = new Array(g).fill(0);
|
|
1427
|
+
for (let x = 0; x < t; x++)
|
|
1428
|
+
E[x % g]++;
|
|
1429
1429
|
let v = 0;
|
|
1430
|
-
for (let
|
|
1431
|
-
const
|
|
1432
|
-
for (let
|
|
1433
|
-
let
|
|
1430
|
+
for (let x = 0; x < g; x++) {
|
|
1431
|
+
const w = f[x], S = E[x];
|
|
1432
|
+
for (let C = 0; C < S; C++) {
|
|
1433
|
+
let z, F;
|
|
1434
1434
|
if (a.distribution === "gaussian")
|
|
1435
|
-
|
|
1435
|
+
z = this.gaussianRandom() * w.spread, F = this.gaussianRandom() * w.spread;
|
|
1436
1436
|
else {
|
|
1437
|
-
const
|
|
1438
|
-
|
|
1437
|
+
const R = this.random(0, Math.PI * 2), k = this.random(0, w.spread);
|
|
1438
|
+
z = Math.cos(R) * k, F = Math.sin(R) * k;
|
|
1439
1439
|
}
|
|
1440
|
-
const
|
|
1441
|
-
|
|
1442
|
-
const
|
|
1443
|
-
let D =
|
|
1444
|
-
const
|
|
1445
|
-
D = Math.max(h +
|
|
1446
|
-
const O =
|
|
1440
|
+
const H = 1 + a.overlap * 0.5, N = 1 + a.overlap * 0.3;
|
|
1441
|
+
z /= H, F /= H;
|
|
1442
|
+
const X = p ? this.random(m, b) : 1, U = N * X, T = c * U;
|
|
1443
|
+
let D = w.x + z, G = w.y + F;
|
|
1444
|
+
const A = T * 1.5 / 2, M = T / 2;
|
|
1445
|
+
D = Math.max(h + A, Math.min(D, s - h - A)), G = Math.max(h + M, Math.min(G, r - h - M));
|
|
1446
|
+
const O = d === "random" ? this.random(l, u) : 0, L = Math.sqrt(z * z + F * F) / w.spread, P = Math.round((1 - L) * 50) + 1;
|
|
1447
1447
|
o.push({
|
|
1448
1448
|
id: v,
|
|
1449
1449
|
x: D,
|
|
1450
|
-
y:
|
|
1450
|
+
y: G,
|
|
1451
1451
|
rotation: O,
|
|
1452
|
-
scale:
|
|
1452
|
+
scale: U,
|
|
1453
1453
|
baseSize: T,
|
|
1454
|
-
zIndex:
|
|
1454
|
+
zIndex: P
|
|
1455
1455
|
}), v++;
|
|
1456
1456
|
}
|
|
1457
1457
|
}
|
|
@@ -1472,19 +1472,19 @@ class be {
|
|
|
1472
1472
|
* Generate cluster center positions with spacing constraints
|
|
1473
1473
|
*/
|
|
1474
1474
|
generateClusterCenters(t, e, i, o, s) {
|
|
1475
|
-
const r = [], h = o + s.clusterSpread, c = e - o - s.clusterSpread,
|
|
1476
|
-
for (let
|
|
1475
|
+
const r = [], h = o + s.clusterSpread, c = e - o - s.clusterSpread, d = o + s.clusterSpread, l = i - o - s.clusterSpread;
|
|
1476
|
+
for (let u = 0; u < t; u++) {
|
|
1477
1477
|
let m = null, b = -1;
|
|
1478
1478
|
for (let p = 0; p < 100; p++) {
|
|
1479
1479
|
const g = {
|
|
1480
1480
|
x: this.random(h, c),
|
|
1481
|
-
y: this.random(
|
|
1481
|
+
y: this.random(d, l),
|
|
1482
1482
|
spread: this.calculateClusterSpread(s)
|
|
1483
1483
|
};
|
|
1484
1484
|
let f = 1 / 0;
|
|
1485
|
-
for (const
|
|
1486
|
-
const v = g.x -
|
|
1487
|
-
f = Math.min(f,
|
|
1485
|
+
for (const E of r) {
|
|
1486
|
+
const v = g.x - E.x, x = g.y - E.y, w = Math.sqrt(v * v + x * x);
|
|
1487
|
+
f = Math.min(f, w);
|
|
1488
1488
|
}
|
|
1489
1489
|
if ((r.length === 0 || f > b) && (m = g, b = f), f >= s.clusterSpacing)
|
|
1490
1490
|
break;
|
|
@@ -1517,7 +1517,7 @@ class be {
|
|
|
1517
1517
|
return Math.random() * (e - t) + t;
|
|
1518
1518
|
}
|
|
1519
1519
|
}
|
|
1520
|
-
class
|
|
1520
|
+
class xe {
|
|
1521
1521
|
constructor(t, e = {}) {
|
|
1522
1522
|
this.config = t, this.imageConfig = e;
|
|
1523
1523
|
}
|
|
@@ -1529,29 +1529,29 @@ class ye {
|
|
|
1529
1529
|
* @returns Array of layout objects with position, rotation, scale
|
|
1530
1530
|
*/
|
|
1531
1531
|
generate(t, e, i = {}) {
|
|
1532
|
-
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none",
|
|
1533
|
-
...
|
|
1532
|
+
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, u = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, b = u !== 1 || m !== 1, p = i.fixedHeight ?? a, g = {
|
|
1533
|
+
...Wt,
|
|
1534
1534
|
...this.config.wave
|
|
1535
|
-
}, { rows: f, amplitude:
|
|
1536
|
-
let
|
|
1537
|
-
for (let
|
|
1538
|
-
const O = f === 1 ? (T + D) / 2 : T +
|
|
1535
|
+
}, { rows: f, amplitude: E, frequency: v, phaseShift: x, synchronization: w } = g, S = Math.ceil(t / f), F = p * 1.5 / 2, H = h + F, N = s - h - F, X = N - H, U = S > 1 ? X / (S - 1) : 0, T = h + E + p / 2, D = r - h - E - p / 2, G = D - T, j = f > 1 ? G / (f - 1) : 0;
|
|
1536
|
+
let A = 0;
|
|
1537
|
+
for (let M = 0; M < f && A < t; M++) {
|
|
1538
|
+
const O = f === 1 ? (T + D) / 2 : T + M * j;
|
|
1539
1539
|
let $ = 0;
|
|
1540
|
-
|
|
1541
|
-
for (let
|
|
1542
|
-
const
|
|
1540
|
+
w === "offset" ? $ = M * x : w === "alternating" && ($ = M * Math.PI);
|
|
1541
|
+
for (let L = 0; L < S && A < t; L++) {
|
|
1542
|
+
const P = S === 1 ? (H + N) / 2 : H + L * U, R = this.calculateWaveY(P, s, E, v, $), k = P, _ = O + R, Y = b ? this.random(u, m) : 1, B = p * Y;
|
|
1543
1543
|
let J = 0;
|
|
1544
|
-
c === "tangent" ? J = this.calculateRotation(
|
|
1545
|
-
const
|
|
1544
|
+
c === "tangent" ? J = this.calculateRotation(P, s, E, v, $) : c === "random" && (J = this.random(d, l));
|
|
1545
|
+
const Q = B * 1.5 / 2, ht = B / 2, ot = h + Q, st = s - h - Q, ut = h + ht, dt = r - h - ht;
|
|
1546
1546
|
o.push({
|
|
1547
|
-
id:
|
|
1548
|
-
x: Math.max(
|
|
1549
|
-
y: Math.max(
|
|
1547
|
+
id: A,
|
|
1548
|
+
x: Math.max(ot, Math.min(k, st)),
|
|
1549
|
+
y: Math.max(ut, Math.min(_, dt)),
|
|
1550
1550
|
rotation: J,
|
|
1551
|
-
scale:
|
|
1551
|
+
scale: Y,
|
|
1552
1552
|
baseSize: B,
|
|
1553
|
-
zIndex:
|
|
1554
|
-
}),
|
|
1553
|
+
zIndex: A + 1
|
|
1554
|
+
}), A++;
|
|
1555
1555
|
}
|
|
1556
1556
|
}
|
|
1557
1557
|
return o;
|
|
@@ -1594,7 +1594,7 @@ class ye {
|
|
|
1594
1594
|
return Math.random() * (e - t) + t;
|
|
1595
1595
|
}
|
|
1596
1596
|
}
|
|
1597
|
-
class
|
|
1597
|
+
class Se {
|
|
1598
1598
|
constructor(t) {
|
|
1599
1599
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.placementLayout = this.initLayout();
|
|
1600
1600
|
}
|
|
@@ -1605,17 +1605,17 @@ class ve {
|
|
|
1605
1605
|
initLayout() {
|
|
1606
1606
|
switch (this.config.algorithm) {
|
|
1607
1607
|
case "radial":
|
|
1608
|
-
return new
|
|
1608
|
+
return new de(this.config, this.imageConfig);
|
|
1609
1609
|
case "grid":
|
|
1610
|
-
return new
|
|
1610
|
+
return new me(this.config, this.imageConfig);
|
|
1611
1611
|
case "spiral":
|
|
1612
|
-
return new fe(this.config, this.imageConfig);
|
|
1613
|
-
case "cluster":
|
|
1614
1612
|
return new be(this.config, this.imageConfig);
|
|
1613
|
+
case "cluster":
|
|
1614
|
+
return new ve(this.config, this.imageConfig);
|
|
1615
1615
|
case "wave":
|
|
1616
|
-
return new
|
|
1616
|
+
return new xe(this.config, this.imageConfig);
|
|
1617
1617
|
default:
|
|
1618
|
-
return new
|
|
1618
|
+
return new ue(this.config, this.imageConfig);
|
|
1619
1619
|
}
|
|
1620
1620
|
}
|
|
1621
1621
|
/**
|
|
@@ -1697,15 +1697,15 @@ class ve {
|
|
|
1697
1697
|
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1698
1698
|
if (r !== void 0)
|
|
1699
1699
|
return { height: r };
|
|
1700
|
-
const a = s?.minSize ?? 50, h = s?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6,
|
|
1700
|
+
const a = s?.minSize ?? 50, h = s?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, d = this.config.densityFactor ?? 1, { width: l, height: u } = t, p = l * u * c / e;
|
|
1701
1701
|
let f = Math.sqrt(p / 1.4);
|
|
1702
|
-
f *=
|
|
1703
|
-
let
|
|
1704
|
-
if (
|
|
1702
|
+
f *= d, f = Math.min(f, i);
|
|
1703
|
+
let E = this.clamp(f, a, h);
|
|
1704
|
+
if (E === a && f < a) {
|
|
1705
1705
|
const v = Math.max(a * 0.05, 20);
|
|
1706
|
-
|
|
1706
|
+
E = Math.max(v, f);
|
|
1707
1707
|
}
|
|
1708
|
-
return { height:
|
|
1708
|
+
return { height: E };
|
|
1709
1709
|
}
|
|
1710
1710
|
/**
|
|
1711
1711
|
* Utility: Clamp a value between min and max
|
|
@@ -1714,14 +1714,48 @@ class ve {
|
|
|
1714
1714
|
return Math.max(e, Math.min(i, t));
|
|
1715
1715
|
}
|
|
1716
1716
|
}
|
|
1717
|
+
const Z = class Z {
|
|
1718
|
+
/**
|
|
1719
|
+
* Register a loader implementation with the registry
|
|
1720
|
+
* @param name - Loader identifier (e.g., 'static', 'google-drive', 'composite')
|
|
1721
|
+
* @param Loader - Loader class constructor to register
|
|
1722
|
+
*/
|
|
1723
|
+
static registerLoader(t, e) {
|
|
1724
|
+
Z.registry.set(t, e);
|
|
1725
|
+
}
|
|
1726
|
+
/**
|
|
1727
|
+
* Get a registered loader implementation
|
|
1728
|
+
* @param name - Loader identifier
|
|
1729
|
+
* @returns Loader class constructor
|
|
1730
|
+
* @throws Error if loader is not registered
|
|
1731
|
+
*/
|
|
1732
|
+
static getLoader(t) {
|
|
1733
|
+
const e = Z.registry.get(t);
|
|
1734
|
+
if (!e)
|
|
1735
|
+
throw new Error(
|
|
1736
|
+
`Loader "${t}" is not registered. Import "@frybynite/image-cloud/loaders/${t}" or "@frybynite/image-cloud/loaders/all".`
|
|
1737
|
+
);
|
|
1738
|
+
return e;
|
|
1739
|
+
}
|
|
1740
|
+
/**
|
|
1741
|
+
* Check if a loader is registered
|
|
1742
|
+
* @param name - Loader identifier
|
|
1743
|
+
* @returns True if the loader is registered, false otherwise
|
|
1744
|
+
*/
|
|
1745
|
+
static isRegistered(t) {
|
|
1746
|
+
return Z.registry.has(t);
|
|
1747
|
+
}
|
|
1748
|
+
};
|
|
1749
|
+
Z.registry = /* @__PURE__ */ new Map();
|
|
1750
|
+
let et = Z;
|
|
1717
1751
|
var I = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(I || {});
|
|
1718
|
-
function
|
|
1719
|
-
return n in
|
|
1752
|
+
function Ee(n) {
|
|
1753
|
+
return n in pt;
|
|
1720
1754
|
}
|
|
1721
|
-
function
|
|
1722
|
-
return n ?
|
|
1755
|
+
function we(n) {
|
|
1756
|
+
return n ? Ee(n) ? pt[n] : n : pt.md;
|
|
1723
1757
|
}
|
|
1724
|
-
function
|
|
1758
|
+
function Ie(n) {
|
|
1725
1759
|
if (!n) return "";
|
|
1726
1760
|
const t = [];
|
|
1727
1761
|
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)
|
|
@@ -1733,13 +1767,13 @@ function Se(n) {
|
|
|
1733
1767
|
}
|
|
1734
1768
|
return t.join(" ");
|
|
1735
1769
|
}
|
|
1736
|
-
function
|
|
1770
|
+
function tt(n) {
|
|
1737
1771
|
if (!n || n.style === "none" || n.width === 0)
|
|
1738
1772
|
return "none";
|
|
1739
1773
|
const t = n.width ?? 0, e = n.style ?? "solid", i = n.color ?? "#000000";
|
|
1740
1774
|
return `${t}px ${e} ${i}`;
|
|
1741
1775
|
}
|
|
1742
|
-
function
|
|
1776
|
+
function rt(n) {
|
|
1743
1777
|
if (!n) return {};
|
|
1744
1778
|
const t = {};
|
|
1745
1779
|
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
@@ -1748,41 +1782,41 @@ function st(n) {
|
|
|
1748
1782
|
} else n.border?.radius !== void 0 && (t.borderRadius = `${n.border.radius}px`);
|
|
1749
1783
|
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
1750
1784
|
const s = n.border || {}, r = { ...s, ...n.borderTop }, a = { ...s, ...n.borderRight }, h = { ...s, ...n.borderBottom }, c = { ...s, ...n.borderLeft };
|
|
1751
|
-
t.borderTop =
|
|
1752
|
-
} else n.border && (t.border =
|
|
1753
|
-
n.shadow !== void 0 && (t.boxShadow =
|
|
1754
|
-
const o =
|
|
1785
|
+
t.borderTop = tt(r), t.borderRight = tt(a), t.borderBottom = tt(h), t.borderLeft = tt(c);
|
|
1786
|
+
} else n.border && (t.border = tt(n.border));
|
|
1787
|
+
n.shadow !== void 0 && (t.boxShadow = we(n.shadow));
|
|
1788
|
+
const o = Ie(n.filter);
|
|
1755
1789
|
if (t.filter = o || "none", n.opacity !== void 0 && (t.opacity = String(n.opacity)), n.cursor !== void 0 && (t.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
1756
1790
|
const s = n.outline.width ?? 0, r = n.outline.style ?? "solid", a = n.outline.color ?? "#000000";
|
|
1757
1791
|
t.outline = `${s}px ${r} ${a}`, n.outline.offset !== void 0 && (t.outlineOffset = `${n.outline.offset}px`);
|
|
1758
1792
|
}
|
|
1759
1793
|
return n.objectFit !== void 0 && (t.objectFit = n.objectFit), n.aspectRatio !== void 0 && (t.aspectRatio = n.aspectRatio), t;
|
|
1760
1794
|
}
|
|
1761
|
-
function
|
|
1795
|
+
function it(n, t) {
|
|
1762
1796
|
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);
|
|
1763
1797
|
}
|
|
1764
1798
|
function Lt(n) {
|
|
1765
1799
|
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
1766
1800
|
}
|
|
1767
|
-
function
|
|
1801
|
+
function nt(n, t) {
|
|
1768
1802
|
const e = Lt(t);
|
|
1769
1803
|
e && e.split(" ").forEach((i) => {
|
|
1770
1804
|
i.trim() && n.classList.add(i.trim());
|
|
1771
1805
|
});
|
|
1772
1806
|
}
|
|
1773
|
-
function
|
|
1807
|
+
function Dt(n, t) {
|
|
1774
1808
|
const e = Lt(t);
|
|
1775
1809
|
e && e.split(" ").forEach((i) => {
|
|
1776
1810
|
i.trim() && n.classList.remove(i.trim());
|
|
1777
1811
|
});
|
|
1778
1812
|
}
|
|
1779
|
-
const
|
|
1813
|
+
const Mt = {
|
|
1780
1814
|
UNFOCUSING: 999,
|
|
1781
1815
|
FOCUSING: 1e3
|
|
1782
1816
|
};
|
|
1783
|
-
class
|
|
1817
|
+
class Ce {
|
|
1784
1818
|
constructor(t, e, i) {
|
|
1785
|
-
this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles =
|
|
1819
|
+
this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = rt(i?.default), this.focusedStyles = rt(i?.focused), this.defaultClassName = i?.default?.className, this.focusedClassName = i?.focused?.className;
|
|
1786
1820
|
}
|
|
1787
1821
|
/**
|
|
1788
1822
|
* Get current state machine state
|
|
@@ -1842,7 +1876,7 @@ class Ee {
|
|
|
1842
1876
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1843
1877
|
*/
|
|
1844
1878
|
animateWithDimensions(t, e, i, o, s, r, a, h) {
|
|
1845
|
-
const c = this.buildDimensionZoomTransform(e),
|
|
1879
|
+
const c = this.buildDimensionZoomTransform(e), d = this.buildDimensionZoomTransform(i);
|
|
1846
1880
|
return t.style.transition = "none", t.animate(
|
|
1847
1881
|
[
|
|
1848
1882
|
{
|
|
@@ -1851,7 +1885,7 @@ class Ee {
|
|
|
1851
1885
|
height: `${s}px`
|
|
1852
1886
|
},
|
|
1853
1887
|
{
|
|
1854
|
-
transform:
|
|
1888
|
+
transform: d,
|
|
1855
1889
|
width: `${r}px`,
|
|
1856
1890
|
height: `${a}px`
|
|
1857
1891
|
}
|
|
@@ -1867,13 +1901,13 @@ class Ee {
|
|
|
1867
1901
|
* Apply focused styling to an element
|
|
1868
1902
|
*/
|
|
1869
1903
|
applyFocusedStyling(t, e) {
|
|
1870
|
-
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"),
|
|
1904
|
+
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"), it(t, this.focusedStyles), nt(t, this.focusedClassName);
|
|
1871
1905
|
}
|
|
1872
1906
|
/**
|
|
1873
1907
|
* Remove focused styling from an element
|
|
1874
1908
|
*/
|
|
1875
1909
|
removeFocusedStyling(t, e) {
|
|
1876
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1910
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), Dt(t, this.focusedClassName), it(t, this.defaultStyles), nt(t, this.defaultClassName);
|
|
1877
1911
|
}
|
|
1878
1912
|
/**
|
|
1879
1913
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1882,19 +1916,19 @@ class Ee {
|
|
|
1882
1916
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1883
1917
|
*/
|
|
1884
1918
|
startFocusAnimation(t, e, i, o, s) {
|
|
1885
|
-
const r = t.style.zIndex || "", a = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(a, h, e),
|
|
1886
|
-
this.applyFocusedStyling(t,
|
|
1919
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(a, h, e), d = this.calculateFocusTransform(e, i);
|
|
1920
|
+
this.applyFocusedStyling(t, Mt.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1887
1921
|
const l = o ?? {
|
|
1888
1922
|
x: 0,
|
|
1889
1923
|
y: 0,
|
|
1890
1924
|
rotation: i.rotation,
|
|
1891
1925
|
scale: 1
|
|
1892
1926
|
// No scale - using dimensions
|
|
1893
|
-
},
|
|
1927
|
+
}, u = s?.width ?? a, m = s?.height ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1894
1928
|
t,
|
|
1895
1929
|
l,
|
|
1896
|
-
u,
|
|
1897
1930
|
d,
|
|
1931
|
+
u,
|
|
1898
1932
|
m,
|
|
1899
1933
|
c.width,
|
|
1900
1934
|
c.height,
|
|
@@ -1904,14 +1938,14 @@ class Ee {
|
|
|
1904
1938
|
element: t,
|
|
1905
1939
|
animation: p,
|
|
1906
1940
|
fromState: l,
|
|
1907
|
-
toState:
|
|
1941
|
+
toState: d,
|
|
1908
1942
|
startTime: performance.now(),
|
|
1909
1943
|
duration: b
|
|
1910
1944
|
};
|
|
1911
1945
|
return this.focusData = {
|
|
1912
1946
|
element: t,
|
|
1913
1947
|
originalState: i,
|
|
1914
|
-
focusTransform:
|
|
1948
|
+
focusTransform: d,
|
|
1915
1949
|
originalZIndex: r,
|
|
1916
1950
|
originalWidth: a,
|
|
1917
1951
|
originalHeight: h,
|
|
@@ -1932,26 +1966,26 @@ class Ee {
|
|
|
1932
1966
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1933
1967
|
*/
|
|
1934
1968
|
startUnfocusAnimation(t, e, i, o) {
|
|
1935
|
-
t.style.zIndex = String(
|
|
1969
|
+
t.style.zIndex = String(Mt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1936
1970
|
const s = i ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, a = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, h = {
|
|
1937
1971
|
x: 0,
|
|
1938
1972
|
y: 0,
|
|
1939
1973
|
rotation: e.rotation,
|
|
1940
1974
|
scale: 1
|
|
1941
1975
|
// No scale - using dimensions
|
|
1942
|
-
}, c = this.focusData?.originalWidth ?? t.offsetWidth,
|
|
1976
|
+
}, c = this.focusData?.originalWidth ?? t.offsetWidth, d = this.focusData?.originalHeight ?? t.offsetHeight, l = this.config.animationDuration ?? 600, u = this.animateWithDimensions(
|
|
1943
1977
|
t,
|
|
1944
1978
|
s,
|
|
1945
1979
|
h,
|
|
1946
1980
|
r,
|
|
1947
1981
|
a,
|
|
1948
1982
|
c,
|
|
1949
|
-
|
|
1983
|
+
d,
|
|
1950
1984
|
l
|
|
1951
1985
|
), m = {
|
|
1952
1986
|
id: `unfocus-${Date.now()}`,
|
|
1953
1987
|
element: t,
|
|
1954
|
-
animation:
|
|
1988
|
+
animation: u,
|
|
1955
1989
|
fromState: s,
|
|
1956
1990
|
toState: h,
|
|
1957
1991
|
startTime: performance.now(),
|
|
@@ -1963,7 +1997,7 @@ class Ee {
|
|
|
1963
1997
|
animationHandle: m,
|
|
1964
1998
|
direction: "out",
|
|
1965
1999
|
originalWidth: c,
|
|
1966
|
-
originalHeight:
|
|
2000
|
+
originalHeight: d
|
|
1967
2001
|
};
|
|
1968
2002
|
}
|
|
1969
2003
|
/**
|
|
@@ -2220,7 +2254,7 @@ class Ee {
|
|
|
2220
2254
|
), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2221
2255
|
}
|
|
2222
2256
|
}
|
|
2223
|
-
const
|
|
2257
|
+
const Te = 50, Me = 0.5, Ae = 20, Re = 0.3, ze = 150, Fe = 30, ct = class ct {
|
|
2224
2258
|
constructor(t, e) {
|
|
2225
2259
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2226
2260
|
}
|
|
@@ -2247,7 +2281,7 @@ const Ie = 50, Ae = 0.5, Te = 20, Ce = 0.3, Re = 150, Me = 30, at = class at {
|
|
|
2247
2281
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2248
2282
|
*/
|
|
2249
2283
|
hadRecentTouch() {
|
|
2250
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2284
|
+
return Date.now() - this.recentTouchTimestamp < ct.TOUCH_CLICK_DELAY;
|
|
2251
2285
|
}
|
|
2252
2286
|
handleTouchStart(t) {
|
|
2253
2287
|
if (t.touches.length !== 1) return;
|
|
@@ -2267,11 +2301,11 @@ const Ie = 50, Ae = 0.5, Te = 20, Ce = 0.3, Re = 150, Me = 30, at = class at {
|
|
|
2267
2301
|
const e = t.touches[0], i = e.clientX - this.touchState.startX, o = e.clientY - this.touchState.startY;
|
|
2268
2302
|
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + o * o) > 10) {
|
|
2269
2303
|
const a = Math.atan2(Math.abs(o), Math.abs(i)) * (180 / Math.PI);
|
|
2270
|
-
this.touchState.isHorizontalSwipe = a <=
|
|
2304
|
+
this.touchState.isHorizontalSwipe = a <= Fe;
|
|
2271
2305
|
}
|
|
2272
2306
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2273
2307
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2274
|
-
const s = i *
|
|
2308
|
+
const s = i * Re;
|
|
2275
2309
|
this.callbacks.onDragOffset(s);
|
|
2276
2310
|
}
|
|
2277
2311
|
}
|
|
@@ -2280,473 +2314,15 @@ const Ie = 50, Ae = 0.5, Te = 20, Ce = 0.3, Re = 150, Me = 30, at = class at {
|
|
|
2280
2314
|
this.recentTouchTimestamp = Date.now();
|
|
2281
2315
|
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, o = Math.abs(e) / i, s = Math.abs(e);
|
|
2282
2316
|
let r = !1;
|
|
2283
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >=
|
|
2317
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= Te || o >= Me && s >= Ae) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2284
2318
|
}
|
|
2285
2319
|
handleTouchCancel(t) {
|
|
2286
2320
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2287
2321
|
}
|
|
2288
2322
|
};
|
|
2289
|
-
|
|
2290
|
-
let
|
|
2323
|
+
ct.TOUCH_CLICK_DELAY = 300;
|
|
2324
|
+
let bt = ct;
|
|
2291
2325
|
class Le {
|
|
2292
|
-
constructor(t) {
|
|
2293
|
-
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)
|
|
2294
|
-
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
2295
|
-
}
|
|
2296
|
-
/**
|
|
2297
|
-
* Prepare the loader by discovering all images from configured sources
|
|
2298
|
-
* @param filter - Filter to apply to discovered images
|
|
2299
|
-
*/
|
|
2300
|
-
async prepare(t) {
|
|
2301
|
-
this._discoveredUrls = [];
|
|
2302
|
-
for (const e of this.sources)
|
|
2303
|
-
if ("folders" in e)
|
|
2304
|
-
for (const i of e.folders) {
|
|
2305
|
-
const o = e.recursive !== void 0 ? e.recursive : !0, s = await this.loadFromFolder(i, t, o);
|
|
2306
|
-
this._discoveredUrls.push(...s);
|
|
2307
|
-
}
|
|
2308
|
-
else if ("files" in e) {
|
|
2309
|
-
const i = await this.loadFiles(e.files, t);
|
|
2310
|
-
this._discoveredUrls.push(...i);
|
|
2311
|
-
}
|
|
2312
|
-
this._prepared = !0;
|
|
2313
|
-
}
|
|
2314
|
-
/**
|
|
2315
|
-
* Get the number of discovered images
|
|
2316
|
-
* @throws Error if called before prepare()
|
|
2317
|
-
*/
|
|
2318
|
-
imagesLength() {
|
|
2319
|
-
if (!this._prepared)
|
|
2320
|
-
throw new Error("GoogleDriveLoader.imagesLength() called before prepare()");
|
|
2321
|
-
return this._discoveredUrls.length;
|
|
2322
|
-
}
|
|
2323
|
-
/**
|
|
2324
|
-
* Get the ordered list of image URLs
|
|
2325
|
-
* @throws Error if called before prepare()
|
|
2326
|
-
*/
|
|
2327
|
-
imageURLs() {
|
|
2328
|
-
if (!this._prepared)
|
|
2329
|
-
throw new Error("GoogleDriveLoader.imageURLs() called before prepare()");
|
|
2330
|
-
return [...this._discoveredUrls];
|
|
2331
|
-
}
|
|
2332
|
-
/**
|
|
2333
|
-
* Check if the loader has been prepared
|
|
2334
|
-
*/
|
|
2335
|
-
isPrepared() {
|
|
2336
|
-
return this._prepared;
|
|
2337
|
-
}
|
|
2338
|
-
/**
|
|
2339
|
-
* Extract folder ID from various Google Drive URL formats
|
|
2340
|
-
* @param folderUrl - Google Drive folder URL
|
|
2341
|
-
* @returns Folder ID or null if invalid
|
|
2342
|
-
*/
|
|
2343
|
-
extractFolderId(t) {
|
|
2344
|
-
const e = [
|
|
2345
|
-
/\/folders\/([a-zA-Z0-9_-]+)/,
|
|
2346
|
-
// Standard format
|
|
2347
|
-
/id=([a-zA-Z0-9_-]+)/
|
|
2348
|
-
// Alternative format
|
|
2349
|
-
];
|
|
2350
|
-
for (const i of e) {
|
|
2351
|
-
const o = t.match(i);
|
|
2352
|
-
if (o && o[1])
|
|
2353
|
-
return o[1];
|
|
2354
|
-
}
|
|
2355
|
-
return null;
|
|
2356
|
-
}
|
|
2357
|
-
/**
|
|
2358
|
-
* Load images from a Google Drive folder
|
|
2359
|
-
* @param folderUrl - Google Drive folder URL
|
|
2360
|
-
* @param filter - Filter to apply to discovered images
|
|
2361
|
-
* @param recursive - Whether to include images from subfolders
|
|
2362
|
-
* @returns Promise resolving to array of image URLs
|
|
2363
|
-
*/
|
|
2364
|
-
async loadFromFolder(t, e, i = !0) {
|
|
2365
|
-
const o = this.extractFolderId(t);
|
|
2366
|
-
if (!o)
|
|
2367
|
-
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2368
|
-
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2369
|
-
return this.loadImagesDirectly(o, e);
|
|
2370
|
-
try {
|
|
2371
|
-
return i ? await this.loadImagesRecursively(o, e) : await this.loadImagesFromSingleFolder(o, e);
|
|
2372
|
-
} catch (s) {
|
|
2373
|
-
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(o, e);
|
|
2374
|
-
}
|
|
2375
|
-
}
|
|
2376
|
-
/**
|
|
2377
|
-
* Load images from a single folder (non-recursive)
|
|
2378
|
-
* @param folderId - Google Drive folder ID
|
|
2379
|
-
* @param filter - Filter to apply to discovered images
|
|
2380
|
-
* @returns Promise resolving to array of image URLs
|
|
2381
|
-
*/
|
|
2382
|
-
async loadImagesFromSingleFolder(t, e) {
|
|
2383
|
-
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2384
|
-
if (!a.ok)
|
|
2385
|
-
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2386
|
-
const c = (await a.json()).files.filter(
|
|
2387
|
-
(u) => u.mimeType.startsWith("image/") && e.isAllowed(u.name)
|
|
2388
|
-
);
|
|
2389
|
-
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2390
|
-
i.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2391
|
-
}), i;
|
|
2392
|
-
}
|
|
2393
|
-
/**
|
|
2394
|
-
* Load specific files by their URLs or IDs
|
|
2395
|
-
* @param fileUrls - Array of Google Drive file URLs or IDs
|
|
2396
|
-
* @param filter - Filter to apply to discovered images
|
|
2397
|
-
* @returns Promise resolving to array of image URLs
|
|
2398
|
-
*/
|
|
2399
|
-
async loadFiles(t, e) {
|
|
2400
|
-
const i = [];
|
|
2401
|
-
for (const o of t) {
|
|
2402
|
-
const s = this.extractFileId(o);
|
|
2403
|
-
if (!s) {
|
|
2404
|
-
this.log(`Skipping invalid file URL: ${o}`);
|
|
2405
|
-
continue;
|
|
2406
|
-
}
|
|
2407
|
-
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2408
|
-
try {
|
|
2409
|
-
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2410
|
-
if (a.ok) {
|
|
2411
|
-
const h = await a.json();
|
|
2412
|
-
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
|
|
2413
|
-
} else
|
|
2414
|
-
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2415
|
-
} catch (r) {
|
|
2416
|
-
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2417
|
-
}
|
|
2418
|
-
else
|
|
2419
|
-
i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
2420
|
-
}
|
|
2421
|
-
return i;
|
|
2422
|
-
}
|
|
2423
|
-
/**
|
|
2424
|
-
* Extract file ID from Google Drive file URL
|
|
2425
|
-
* @param fileUrl - Google Drive file URL or file ID
|
|
2426
|
-
* @returns File ID or null if invalid
|
|
2427
|
-
*/
|
|
2428
|
-
extractFileId(t) {
|
|
2429
|
-
if (!/[/:.]/.test(t))
|
|
2430
|
-
return t;
|
|
2431
|
-
const e = [
|
|
2432
|
-
/\/file\/d\/([a-zA-Z0-9_-]+)/,
|
|
2433
|
-
// Standard file format
|
|
2434
|
-
/\/open\?id=([a-zA-Z0-9_-]+)/,
|
|
2435
|
-
// Alternative format
|
|
2436
|
-
/id=([a-zA-Z0-9_-]+)/
|
|
2437
|
-
// Generic id parameter
|
|
2438
|
-
];
|
|
2439
|
-
for (const i of e) {
|
|
2440
|
-
const o = t.match(i);
|
|
2441
|
-
if (o && o[1])
|
|
2442
|
-
return o[1];
|
|
2443
|
-
}
|
|
2444
|
-
return null;
|
|
2445
|
-
}
|
|
2446
|
-
/**
|
|
2447
|
-
* Recursively load images from a folder and all its subfolders
|
|
2448
|
-
* @param folderId - Google Drive folder ID
|
|
2449
|
-
* @param filter - Filter to apply to discovered images
|
|
2450
|
-
* @returns Promise resolving to array of image URLs
|
|
2451
|
-
*/
|
|
2452
|
-
async loadImagesRecursively(t, e) {
|
|
2453
|
-
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2454
|
-
if (!a.ok)
|
|
2455
|
-
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2456
|
-
const h = await a.json(), c = h.files.filter(
|
|
2457
|
-
(l) => l.mimeType.startsWith("image/") && e.isAllowed(l.name)
|
|
2458
|
-
), u = h.files.filter(
|
|
2459
|
-
(l) => l.mimeType === "application/vnd.google-apps.folder"
|
|
2460
|
-
);
|
|
2461
|
-
this.log(`Found ${h.files.length} total items in folder ${t}`), h.files.forEach((l) => this.log(` - File: ${l.name} (${l.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((l) => {
|
|
2462
|
-
i.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
|
|
2463
|
-
});
|
|
2464
|
-
for (const l of u) {
|
|
2465
|
-
this.log(`Loading images from subfolder: ${l.name}`);
|
|
2466
|
-
const d = await this.loadImagesRecursively(l.id, e);
|
|
2467
|
-
i.push(...d);
|
|
2468
|
-
}
|
|
2469
|
-
return i;
|
|
2470
|
-
}
|
|
2471
|
-
/**
|
|
2472
|
-
* Direct loading method (no API key required, but less reliable)
|
|
2473
|
-
* Uses embedded folder view to scrape image IDs
|
|
2474
|
-
* @param folderId - Google Drive folder ID
|
|
2475
|
-
* @param filter - Filter to apply (not used in fallback mode)
|
|
2476
|
-
* @returns Promise resolving to array of image URLs
|
|
2477
|
-
*/
|
|
2478
|
-
async loadImagesDirectly(t, e) {
|
|
2479
|
-
try {
|
|
2480
|
-
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(i, { mode: "cors" });
|
|
2481
|
-
if (!o.ok)
|
|
2482
|
-
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2483
|
-
const s = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2484
|
-
return [...new Set(a.map((u) => u[1]))].map(
|
|
2485
|
-
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2486
|
-
);
|
|
2487
|
-
} catch (i) {
|
|
2488
|
-
throw console.error("Direct loading failed:", i), new Error(
|
|
2489
|
-
`Unable to load images. Please ensure:
|
|
2490
|
-
1. The folder is shared publicly (Anyone with the link can view)
|
|
2491
|
-
2. The folder contains image files
|
|
2492
|
-
3. Consider adding a Google Drive API key in config.js for better reliability`
|
|
2493
|
-
);
|
|
2494
|
-
}
|
|
2495
|
-
}
|
|
2496
|
-
/**
|
|
2497
|
-
* Manually add image URLs (for testing or when auto-loading fails)
|
|
2498
|
-
* @param imageIds - Array of Google Drive file IDs
|
|
2499
|
-
* @returns Array of direct image URLs
|
|
2500
|
-
*/
|
|
2501
|
-
manualImageUrls(t) {
|
|
2502
|
-
return t.map((e) => `https://drive.google.com/uc?export=view&id=${e}`);
|
|
2503
|
-
}
|
|
2504
|
-
/**
|
|
2505
|
-
* Debug logging helper
|
|
2506
|
-
* @param args - Arguments to log
|
|
2507
|
-
*/
|
|
2508
|
-
log(...t) {
|
|
2509
|
-
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2510
|
-
}
|
|
2511
|
-
}
|
|
2512
|
-
class ze {
|
|
2513
|
-
constructor(t) {
|
|
2514
|
-
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2515
|
-
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
2516
|
-
this.log("StaticImageLoader initialized with config:", t);
|
|
2517
|
-
}
|
|
2518
|
-
/**
|
|
2519
|
-
* Prepare the loader by discovering all images from configured sources
|
|
2520
|
-
* @param filter - Filter to apply to discovered images
|
|
2521
|
-
*/
|
|
2522
|
-
async prepare(t) {
|
|
2523
|
-
this._discoveredUrls = [], this.log(`Processing ${this.sources.length} source(s)`);
|
|
2524
|
-
for (const e of this.sources)
|
|
2525
|
-
try {
|
|
2526
|
-
const i = await this.processSource(e, t);
|
|
2527
|
-
this._discoveredUrls.push(...i);
|
|
2528
|
-
} catch (i) {
|
|
2529
|
-
console.warn("Failed to process source:", e, i);
|
|
2530
|
-
}
|
|
2531
|
-
this._prepared = !0, this.log(`Successfully loaded ${this._discoveredUrls.length} image(s)`);
|
|
2532
|
-
}
|
|
2533
|
-
/**
|
|
2534
|
-
* Get the number of discovered images
|
|
2535
|
-
* @throws Error if called before prepare()
|
|
2536
|
-
*/
|
|
2537
|
-
imagesLength() {
|
|
2538
|
-
if (!this._prepared)
|
|
2539
|
-
throw new Error("StaticImageLoader.imagesLength() called before prepare()");
|
|
2540
|
-
return this._discoveredUrls.length;
|
|
2541
|
-
}
|
|
2542
|
-
/**
|
|
2543
|
-
* Get the ordered list of image URLs
|
|
2544
|
-
* @throws Error if called before prepare()
|
|
2545
|
-
*/
|
|
2546
|
-
imageURLs() {
|
|
2547
|
-
if (!this._prepared)
|
|
2548
|
-
throw new Error("StaticImageLoader.imageURLs() called before prepare()");
|
|
2549
|
-
return [...this._discoveredUrls];
|
|
2550
|
-
}
|
|
2551
|
-
/**
|
|
2552
|
-
* Check if the loader has been prepared
|
|
2553
|
-
*/
|
|
2554
|
-
isPrepared() {
|
|
2555
|
-
return this._prepared;
|
|
2556
|
-
}
|
|
2557
|
-
/**
|
|
2558
|
-
* Process a single source object using shape-based detection
|
|
2559
|
-
* @param source - Source configuration detected by key presence
|
|
2560
|
-
* @param filter - Filter to apply to discovered images
|
|
2561
|
-
* @returns Promise resolving to array of valid URLs from this source
|
|
2562
|
-
*/
|
|
2563
|
-
async processSource(t, e) {
|
|
2564
|
-
return t ? "urls" in t ? await this.processUrls(t.urls, e) : "path" in t ? await this.processPath(t.path, t.files, e) : "json" in t ? await this.processJson(t.json, e) : (console.warn("Unknown source shape:", t), []) : (console.warn("Invalid source object:", t), []);
|
|
2565
|
-
}
|
|
2566
|
-
/**
|
|
2567
|
-
* Process a list of direct URLs
|
|
2568
|
-
* @param urls - Array of image URLs
|
|
2569
|
-
* @param filter - Filter to apply to discovered images
|
|
2570
|
-
* @returns Promise resolving to array of validated URLs
|
|
2571
|
-
*/
|
|
2572
|
-
async processUrls(t, e) {
|
|
2573
|
-
if (!Array.isArray(t))
|
|
2574
|
-
return console.warn("URLs must be an array:", t), [];
|
|
2575
|
-
const i = [];
|
|
2576
|
-
for (const o of t) {
|
|
2577
|
-
const s = o.split("/").pop() || o;
|
|
2578
|
-
if (!e.isAllowed(s)) {
|
|
2579
|
-
this.log(`Skipping filtered URL: ${o}`);
|
|
2580
|
-
continue;
|
|
2581
|
-
}
|
|
2582
|
-
this.validateUrls ? await this.validateUrl(o) ? i.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : i.push(o);
|
|
2583
|
-
}
|
|
2584
|
-
return i;
|
|
2585
|
-
}
|
|
2586
|
-
/**
|
|
2587
|
-
* Process a path-based source
|
|
2588
|
-
* @param basePath - Base path (relative or absolute)
|
|
2589
|
-
* @param files - Array of filenames
|
|
2590
|
-
* @param filter - Filter to apply to discovered images
|
|
2591
|
-
* @returns Promise resolving to array of validated URLs
|
|
2592
|
-
*/
|
|
2593
|
-
async processPath(t, e, i) {
|
|
2594
|
-
if (!Array.isArray(e))
|
|
2595
|
-
return console.warn("files must be an array:", e), [];
|
|
2596
|
-
const o = [];
|
|
2597
|
-
for (const s of e) {
|
|
2598
|
-
if (!i.isAllowed(s)) {
|
|
2599
|
-
this.log(`Skipping filtered file: ${s}`);
|
|
2600
|
-
continue;
|
|
2601
|
-
}
|
|
2602
|
-
const r = this.constructUrl(t, s);
|
|
2603
|
-
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
2604
|
-
}
|
|
2605
|
-
return o;
|
|
2606
|
-
}
|
|
2607
|
-
/**
|
|
2608
|
-
* Process a JSON endpoint source
|
|
2609
|
-
* Fetches a JSON endpoint that returns { images: string[] }
|
|
2610
|
-
* @param url - JSON endpoint URL
|
|
2611
|
-
* @param filter - Filter to apply to discovered images
|
|
2612
|
-
* @returns Promise resolving to array of validated URLs
|
|
2613
|
-
*/
|
|
2614
|
-
async processJson(t, e) {
|
|
2615
|
-
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2616
|
-
const i = new AbortController(), o = setTimeout(() => i.abort(), 1e4);
|
|
2617
|
-
try {
|
|
2618
|
-
const s = await fetch(t, { signal: i.signal });
|
|
2619
|
-
if (clearTimeout(o), !s.ok)
|
|
2620
|
-
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2621
|
-
const r = await s.json();
|
|
2622
|
-
if (!r || !Array.isArray(r.images))
|
|
2623
|
-
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2624
|
-
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2625
|
-
} catch (s) {
|
|
2626
|
-
throw clearTimeout(o), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
2627
|
-
}
|
|
2628
|
-
}
|
|
2629
|
-
/**
|
|
2630
|
-
* Validate a single URL using HEAD request
|
|
2631
|
-
* @param url - URL to validate
|
|
2632
|
-
* @returns Promise resolving to true if valid and accessible
|
|
2633
|
-
*/
|
|
2634
|
-
async validateUrl(t) {
|
|
2635
|
-
if (this.validationMethod === "none")
|
|
2636
|
-
return !0;
|
|
2637
|
-
if (this.validationMethod === "simple")
|
|
2638
|
-
try {
|
|
2639
|
-
return typeof window < "u" ? new URL(t, window.location.origin) : new URL(t), !0;
|
|
2640
|
-
} catch {
|
|
2641
|
-
return !1;
|
|
2642
|
-
}
|
|
2643
|
-
if (typeof window > "u")
|
|
2644
|
-
return !0;
|
|
2645
|
-
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2646
|
-
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2647
|
-
try {
|
|
2648
|
-
const i = new AbortController(), o = setTimeout(() => i.abort(), this.validationTimeout), s = await fetch(t, {
|
|
2649
|
-
method: "HEAD",
|
|
2650
|
-
signal: i.signal
|
|
2651
|
-
});
|
|
2652
|
-
return clearTimeout(o), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
2653
|
-
} catch (i) {
|
|
2654
|
-
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2655
|
-
}
|
|
2656
|
-
}
|
|
2657
|
-
/**
|
|
2658
|
-
* Construct full URL from basePath and filename
|
|
2659
|
-
* @param basePath - Base path (relative or absolute)
|
|
2660
|
-
* @param filename - Filename to append
|
|
2661
|
-
* @returns Complete URL
|
|
2662
|
-
*/
|
|
2663
|
-
constructUrl(t, e) {
|
|
2664
|
-
const i = t.replace(/\/$/, "");
|
|
2665
|
-
if (this.isAbsoluteUrl(t))
|
|
2666
|
-
return `${i}/${e}`;
|
|
2667
|
-
if (typeof window > "u")
|
|
2668
|
-
return `${i}/${e}`;
|
|
2669
|
-
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2670
|
-
return `${o}${r}/${e}`;
|
|
2671
|
-
}
|
|
2672
|
-
/**
|
|
2673
|
-
* Check if URL is absolute (contains protocol)
|
|
2674
|
-
* @param url - URL to check
|
|
2675
|
-
* @returns True if absolute URL
|
|
2676
|
-
*/
|
|
2677
|
-
isAbsoluteUrl(t) {
|
|
2678
|
-
try {
|
|
2679
|
-
return new URL(t), !0;
|
|
2680
|
-
} catch {
|
|
2681
|
-
return !1;
|
|
2682
|
-
}
|
|
2683
|
-
}
|
|
2684
|
-
/**
|
|
2685
|
-
* Debug logging helper
|
|
2686
|
-
* @param args - Arguments to log
|
|
2687
|
-
*/
|
|
2688
|
-
log(...t) {
|
|
2689
|
-
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2690
|
-
}
|
|
2691
|
-
}
|
|
2692
|
-
class Fe {
|
|
2693
|
-
constructor(t) {
|
|
2694
|
-
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2695
|
-
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
2696
|
-
this.log(`CompositeLoader initialized with ${this.loaders.length} loader(s)`);
|
|
2697
|
-
}
|
|
2698
|
-
/**
|
|
2699
|
-
* Prepare all loaders in parallel and combine their results
|
|
2700
|
-
* @param filter - Filter to apply to discovered images
|
|
2701
|
-
*/
|
|
2702
|
-
async prepare(t) {
|
|
2703
|
-
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2704
|
-
const e = this.loaders.map((i, o) => i.prepare(t).then(() => {
|
|
2705
|
-
this.log(`Loader ${o} prepared with ${i.imagesLength()} images`);
|
|
2706
|
-
}).catch((s) => {
|
|
2707
|
-
console.warn(`Loader ${o} failed to prepare:`, s);
|
|
2708
|
-
}));
|
|
2709
|
-
await Promise.all(e);
|
|
2710
|
-
for (const i of this.loaders)
|
|
2711
|
-
if (i.isPrepared()) {
|
|
2712
|
-
const o = i.imageURLs();
|
|
2713
|
-
this._discoveredUrls.push(...o);
|
|
2714
|
-
}
|
|
2715
|
-
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2716
|
-
}
|
|
2717
|
-
/**
|
|
2718
|
-
* Get the combined number of discovered images
|
|
2719
|
-
* @throws Error if called before prepare()
|
|
2720
|
-
*/
|
|
2721
|
-
imagesLength() {
|
|
2722
|
-
if (!this._prepared)
|
|
2723
|
-
throw new Error("CompositeLoader.imagesLength() called before prepare()");
|
|
2724
|
-
return this._discoveredUrls.length;
|
|
2725
|
-
}
|
|
2726
|
-
/**
|
|
2727
|
-
* Get the combined ordered list of image URLs
|
|
2728
|
-
* @throws Error if called before prepare()
|
|
2729
|
-
*/
|
|
2730
|
-
imageURLs() {
|
|
2731
|
-
if (!this._prepared)
|
|
2732
|
-
throw new Error("CompositeLoader.imageURLs() called before prepare()");
|
|
2733
|
-
return [...this._discoveredUrls];
|
|
2734
|
-
}
|
|
2735
|
-
/**
|
|
2736
|
-
* Check if the loader has been prepared
|
|
2737
|
-
*/
|
|
2738
|
-
isPrepared() {
|
|
2739
|
-
return this._prepared;
|
|
2740
|
-
}
|
|
2741
|
-
/**
|
|
2742
|
-
* Debug logging helper
|
|
2743
|
-
* @param args - Arguments to log
|
|
2744
|
-
*/
|
|
2745
|
-
log(...t) {
|
|
2746
|
-
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2747
|
-
}
|
|
2748
|
-
}
|
|
2749
|
-
class De {
|
|
2750
2326
|
/**
|
|
2751
2327
|
* Create a new ImageFilter
|
|
2752
2328
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2783,7 +2359,7 @@ class De {
|
|
|
2783
2359
|
// isAllowedDate(date: Date): boolean
|
|
2784
2360
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2785
2361
|
}
|
|
2786
|
-
const
|
|
2362
|
+
const De = `
|
|
2787
2363
|
.fbn-ic-gallery {
|
|
2788
2364
|
position: relative;
|
|
2789
2365
|
width: 100%;
|
|
@@ -2833,67 +2409,77 @@ const Oe = `
|
|
|
2833
2409
|
display: none !important;
|
|
2834
2410
|
}
|
|
2835
2411
|
`;
|
|
2836
|
-
function
|
|
2412
|
+
function Oe() {
|
|
2837
2413
|
if (typeof document > "u") return;
|
|
2838
2414
|
const n = "fbn-ic-functional-styles";
|
|
2839
2415
|
if (document.getElementById(n)) return;
|
|
2840
2416
|
const t = document.createElement("style");
|
|
2841
|
-
t.id = n, t.textContent =
|
|
2417
|
+
t.id = n, t.textContent = De, document.head.appendChild(t);
|
|
2842
2418
|
}
|
|
2843
|
-
let
|
|
2419
|
+
let $e = class {
|
|
2844
2420
|
constructor(t = {}) {
|
|
2845
|
-
this.fullConfig =
|
|
2421
|
+
this.fullConfig = Jt(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 Kt(this.fullConfig.animation), this.layoutEngine = new Se({
|
|
2846
2422
|
layout: this.fullConfig.layout,
|
|
2847
2423
|
image: this.fullConfig.image
|
|
2848
|
-
}), this.zoomEngine = new
|
|
2424
|
+
}), this.zoomEngine = new Ce(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = rt(this.fullConfig.styling?.default), this.hoverStyles = rt(this.fullConfig.styling?.hover), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
2849
2425
|
const e = this.fullConfig.animation.entry || y.animation.entry;
|
|
2850
|
-
this.entryAnimationEngine = new
|
|
2426
|
+
this.entryAnimationEngine = new he(
|
|
2851
2427
|
e,
|
|
2852
2428
|
this.fullConfig.layout.algorithm
|
|
2853
|
-
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.
|
|
2429
|
+
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2854
2430
|
}
|
|
2855
2431
|
/**
|
|
2856
2432
|
* Create image filter based on shared loader config
|
|
2857
2433
|
*/
|
|
2858
2434
|
createImageFilter() {
|
|
2859
2435
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
2860
|
-
return new
|
|
2436
|
+
return new Le(t);
|
|
2861
2437
|
}
|
|
2862
2438
|
/**
|
|
2863
2439
|
* Create appropriate image loader based on config
|
|
2864
2440
|
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2441
|
+
* Uses dynamic imports to trigger loader registration and enable tree-shaking
|
|
2865
2442
|
*/
|
|
2866
|
-
createLoader() {
|
|
2443
|
+
async createLoader() {
|
|
2867
2444
|
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2868
2445
|
if (!t || t.length === 0)
|
|
2869
2446
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2870
|
-
const i =
|
|
2871
|
-
|
|
2447
|
+
const i = await Promise.all(
|
|
2448
|
+
t.map((s) => this.createLoaderFromEntry(s, e))
|
|
2449
|
+
);
|
|
2450
|
+
if (i.length === 1)
|
|
2451
|
+
return i[0];
|
|
2452
|
+
await import("./composite-CtUxtN2l.js");
|
|
2453
|
+
const o = et.getLoader("composite");
|
|
2454
|
+
return new o({
|
|
2872
2455
|
loaders: i,
|
|
2873
2456
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
2874
2457
|
});
|
|
2875
2458
|
}
|
|
2876
2459
|
/**
|
|
2877
2460
|
* Create a single loader from a LoaderEntry, merging shared config
|
|
2461
|
+
* Uses dynamic imports to trigger loader registration and enable tree-shaking
|
|
2878
2462
|
*/
|
|
2879
|
-
createLoaderFromEntry(t, e) {
|
|
2463
|
+
async createLoaderFromEntry(t, e) {
|
|
2880
2464
|
if ("static" in t) {
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2465
|
+
await import("./static-ejylHtQ4.js");
|
|
2466
|
+
const i = et.getLoader("static"), o = t.static, s = {
|
|
2467
|
+
...o,
|
|
2468
|
+
validateUrls: o.validateUrls ?? e.validateUrls,
|
|
2469
|
+
validationTimeout: o.validationTimeout ?? e.validationTimeout,
|
|
2470
|
+
validationMethod: o.validationMethod ?? e.validationMethod,
|
|
2471
|
+
allowedExtensions: o.allowedExtensions ?? e.allowedExtensions,
|
|
2472
|
+
debugLogging: o.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2888
2473
|
};
|
|
2889
|
-
return new
|
|
2474
|
+
return new i(s);
|
|
2890
2475
|
} else if ("googleDrive" in t) {
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2476
|
+
await import("./google-drive-CC-qFSV1.js");
|
|
2477
|
+
const i = et.getLoader("google-drive"), o = t.googleDrive, s = {
|
|
2478
|
+
...o,
|
|
2479
|
+
allowedExtensions: o.allowedExtensions ?? e.allowedExtensions,
|
|
2480
|
+
debugLogging: o.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2895
2481
|
};
|
|
2896
|
-
return new
|
|
2482
|
+
return new i(s);
|
|
2897
2483
|
} else
|
|
2898
2484
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2899
2485
|
}
|
|
@@ -2902,18 +2488,18 @@ let Ue = class {
|
|
|
2902
2488
|
*/
|
|
2903
2489
|
async init() {
|
|
2904
2490
|
try {
|
|
2905
|
-
if (
|
|
2491
|
+
if (Oe(), this.containerRef)
|
|
2906
2492
|
this.containerEl = this.containerRef;
|
|
2907
2493
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2908
2494
|
throw new Error(`Container #${this.containerId} not found`);
|
|
2909
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
2495
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new bt(this.containerEl, {
|
|
2910
2496
|
onNext: () => this.navigateToNextImage(),
|
|
2911
2497
|
onPrev: () => this.navigateToPreviousImage(),
|
|
2912
2498
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
2913
2499
|
onDragEnd: (t) => {
|
|
2914
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
2500
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, ze);
|
|
2915
2501
|
}
|
|
2916
|
-
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2502
|
+
}), this.setupUI(), this.setupEventListeners(), this.imageLoader = await this.createLoader(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2917
2503
|
} catch (t) {
|
|
2918
2504
|
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
2919
2505
|
}
|
|
@@ -3035,35 +2621,35 @@ let Ue = class {
|
|
|
3035
2621
|
const a = (c) => {
|
|
3036
2622
|
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
3037
2623
|
if (c.offsetWidth, c.style.opacity = this.defaultStyles.opacity ?? "1", c.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || c.dataset.startRotation !== c.dataset.rotation || c.dataset.startScale !== c.dataset.scale)) {
|
|
3038
|
-
const
|
|
2624
|
+
const u = {
|
|
3039
2625
|
x: parseFloat(c.dataset.startX),
|
|
3040
2626
|
y: parseFloat(c.dataset.startY)
|
|
3041
2627
|
}, m = {
|
|
3042
2628
|
x: parseFloat(c.dataset.endX),
|
|
3043
2629
|
y: parseFloat(c.dataset.endY)
|
|
3044
|
-
}, b = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), f = parseFloat(c.dataset.scale),
|
|
3045
|
-
|
|
2630
|
+
}, b = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), f = parseFloat(c.dataset.scale), E = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : f, x = this.entryAnimationEngine.getTiming();
|
|
2631
|
+
re({
|
|
3046
2632
|
element: c,
|
|
3047
|
-
startPosition:
|
|
2633
|
+
startPosition: u,
|
|
3048
2634
|
endPosition: m,
|
|
3049
2635
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3050
|
-
duration:
|
|
2636
|
+
duration: x.duration,
|
|
3051
2637
|
imageWidth: b,
|
|
3052
2638
|
imageHeight: p,
|
|
3053
2639
|
rotation: g,
|
|
3054
2640
|
scale: f,
|
|
3055
2641
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3056
|
-
startRotation:
|
|
2642
|
+
startRotation: E,
|
|
3057
2643
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3058
2644
|
startScale: v
|
|
3059
2645
|
});
|
|
3060
2646
|
} else {
|
|
3061
|
-
const
|
|
3062
|
-
c.style.transform =
|
|
2647
|
+
const u = c.dataset.finalTransform || "";
|
|
2648
|
+
c.style.transform = u;
|
|
3063
2649
|
}
|
|
3064
2650
|
const l = parseInt(c.dataset.imageId || "0");
|
|
3065
2651
|
if (this.fullConfig.config.debug?.enabled && l < 3) {
|
|
3066
|
-
const
|
|
2652
|
+
const u = c.dataset.finalTransform || "";
|
|
3067
2653
|
console.log(`Image ${l} final state:`, {
|
|
3068
2654
|
left: c.style.left,
|
|
3069
2655
|
top: c.style.top,
|
|
@@ -3071,7 +2657,7 @@ let Ue = class {
|
|
|
3071
2657
|
height: c.style.height,
|
|
3072
2658
|
computedWidth: c.offsetWidth,
|
|
3073
2659
|
computedHeight: c.offsetHeight,
|
|
3074
|
-
transform:
|
|
2660
|
+
transform: u,
|
|
3075
2661
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3076
2662
|
});
|
|
3077
2663
|
}
|
|
@@ -3097,64 +2683,64 @@ let Ue = class {
|
|
|
3097
2683
|
}, this.fullConfig.animation.queue.interval);
|
|
3098
2684
|
};
|
|
3099
2685
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3100
|
-
const c = new IntersectionObserver((
|
|
3101
|
-
|
|
2686
|
+
const c = new IntersectionObserver((d) => {
|
|
2687
|
+
d.forEach((l) => {
|
|
3102
2688
|
l.isIntersecting && (h(), c.disconnect());
|
|
3103
2689
|
});
|
|
3104
2690
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3105
2691
|
c.observe(this.containerEl);
|
|
3106
2692
|
} else
|
|
3107
2693
|
h();
|
|
3108
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c,
|
|
2694
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c, d) => {
|
|
3109
2695
|
const l = document.createElement("div");
|
|
3110
2696
|
l.className = "fbn-ic-debug-center", l.style.position = "absolute", l.style.width = "12px", l.style.height = "12px", l.style.borderRadius = "50%", l.style.backgroundColor = "red", l.style.border = "2px solid yellow", l.style.zIndex = "9999", l.style.pointerEvents = "none";
|
|
3111
|
-
const
|
|
3112
|
-
l.style.left = `${
|
|
3113
|
-
})), t.forEach((c,
|
|
2697
|
+
const u = c.x, m = c.y;
|
|
2698
|
+
l.style.left = `${u - 6}px`, l.style.top = `${m - 6}px`, l.title = `Image ${d}: center (${Math.round(u)}, ${Math.round(m)})`, this.containerEl.appendChild(l);
|
|
2699
|
+
})), t.forEach((c, d) => {
|
|
3114
2700
|
const l = document.createElement("img");
|
|
3115
|
-
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(
|
|
3116
|
-
const
|
|
3117
|
-
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${e}px`, l.style.left = `${
|
|
3118
|
-
this.hoveredImage = { element: l, layout:
|
|
2701
|
+
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(d);
|
|
2702
|
+
const u = s[d];
|
|
2703
|
+
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${e}px`, l.style.left = `${u.x}px`, l.style.top = `${u.y}px`, u.zIndex && (l.style.zIndex = String(u.zIndex)), it(l, this.defaultStyles), nt(l, this.defaultClassName), l.addEventListener("mouseenter", () => {
|
|
2704
|
+
this.hoveredImage = { element: l, layout: u }, this.zoomEngine.isInvolved(l) || (it(l, this.hoverStyles), nt(l, this.hoverClassName));
|
|
3119
2705
|
}), l.addEventListener("mouseleave", () => {
|
|
3120
|
-
this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (
|
|
2706
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (it(l, this.defaultStyles), Dt(l, this.hoverClassName), nt(l, this.defaultClassName));
|
|
3121
2707
|
}), l.addEventListener("click", (m) => {
|
|
3122
|
-
m.stopPropagation(), this.handleImageClick(l,
|
|
2708
|
+
m.stopPropagation(), this.handleImageClick(l, u);
|
|
3123
2709
|
}), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
|
|
3124
2710
|
if (o !== this.loadGeneration)
|
|
3125
2711
|
return;
|
|
3126
2712
|
const m = l.naturalWidth / l.naturalHeight, b = e * m;
|
|
3127
2713
|
l.style.width = `${b}px`;
|
|
3128
|
-
const p = { x:
|
|
2714
|
+
const p = { x: u.x, y: u.y }, g = { width: b, height: e }, f = this.entryAnimationEngine.calculateStartPosition(
|
|
3129
2715
|
p,
|
|
3130
2716
|
g,
|
|
3131
2717
|
i,
|
|
3132
|
-
|
|
2718
|
+
d,
|
|
3133
2719
|
t.length
|
|
3134
|
-
),
|
|
3135
|
-
|
|
3136
|
-
|
|
2720
|
+
), E = this.entryAnimationEngine.calculateStartRotation(u.rotation), v = this.entryAnimationEngine.calculateStartScale(u.scale), x = this.entryAnimationEngine.buildFinalTransform(
|
|
2721
|
+
u.rotation,
|
|
2722
|
+
u.scale,
|
|
3137
2723
|
b,
|
|
3138
2724
|
e
|
|
3139
|
-
),
|
|
2725
|
+
), w = this.entryAnimationEngine.buildStartTransform(
|
|
3140
2726
|
f,
|
|
3141
2727
|
p,
|
|
3142
|
-
|
|
3143
|
-
|
|
2728
|
+
u.rotation,
|
|
2729
|
+
u.scale,
|
|
3144
2730
|
b,
|
|
3145
2731
|
e,
|
|
3146
|
-
|
|
2732
|
+
E,
|
|
3147
2733
|
v
|
|
3148
2734
|
);
|
|
3149
|
-
this.fullConfig.config.debug?.enabled &&
|
|
2735
|
+
this.fullConfig.config.debug?.enabled && d < 3 && console.log(`Image ${d}:`, {
|
|
3150
2736
|
finalPosition: p,
|
|
3151
2737
|
imageSize: g,
|
|
3152
|
-
left:
|
|
3153
|
-
top:
|
|
3154
|
-
finalTransform:
|
|
2738
|
+
left: u.x,
|
|
2739
|
+
top: u.y,
|
|
2740
|
+
finalTransform: x,
|
|
3155
2741
|
renderedWidth: b,
|
|
3156
2742
|
renderedHeight: e
|
|
3157
|
-
}), l.style.transform =
|
|
2743
|
+
}), l.style.transform = w, l.dataset.finalTransform = x, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || E !== u.rotation || v !== u.scale) && (l.dataset.startX = String(f.x), l.dataset.startY = String(f.y), l.dataset.endX = String(p.x), l.dataset.endY = String(p.y), l.dataset.imageWidth = String(b), l.dataset.imageHeight = String(e), l.dataset.rotation = String(u.rotation), l.dataset.scale = String(u.scale), l.dataset.startRotation = String(E), l.dataset.startScale = String(v)), this.displayQueue.push(l);
|
|
3158
2744
|
}, l.onerror = () => r++, l.src = c;
|
|
3159
2745
|
});
|
|
3160
2746
|
}
|
|
@@ -3199,7 +2785,7 @@ let Ue = class {
|
|
|
3199
2785
|
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();
|
|
3200
2786
|
}
|
|
3201
2787
|
};
|
|
3202
|
-
const
|
|
2788
|
+
const Ne = Pt({
|
|
3203
2789
|
name: "ImageCloud",
|
|
3204
2790
|
props: {
|
|
3205
2791
|
options: {
|
|
@@ -3208,11 +2794,11 @@ const He = Ot({
|
|
|
3208
2794
|
}
|
|
3209
2795
|
},
|
|
3210
2796
|
setup(n, { expose: t }) {
|
|
3211
|
-
const e =
|
|
2797
|
+
const e = Et(null), i = Et(null);
|
|
3212
2798
|
function o() {
|
|
3213
2799
|
if (!e.value) return;
|
|
3214
2800
|
i.value?.destroy();
|
|
3215
|
-
const s = new
|
|
2801
|
+
const s = new $e({
|
|
3216
2802
|
container: e.value,
|
|
3217
2803
|
...n.options
|
|
3218
2804
|
});
|
|
@@ -3220,22 +2806,22 @@ const He = Ot({
|
|
|
3220
2806
|
console.error("ImageCloud init failed:", r);
|
|
3221
2807
|
});
|
|
3222
2808
|
}
|
|
3223
|
-
return
|
|
2809
|
+
return Ht(() => {
|
|
3224
2810
|
o();
|
|
3225
|
-
}),
|
|
2811
|
+
}), Nt(() => {
|
|
3226
2812
|
i.value?.destroy(), i.value = null;
|
|
3227
|
-
}),
|
|
2813
|
+
}), jt(
|
|
3228
2814
|
() => n.options,
|
|
3229
2815
|
() => {
|
|
3230
2816
|
o();
|
|
3231
2817
|
},
|
|
3232
2818
|
{ deep: !0 }
|
|
3233
|
-
), t({ instance: i }), () =>
|
|
2819
|
+
), t({ instance: i }), () => Ut("div", {
|
|
3234
2820
|
ref: e
|
|
3235
2821
|
});
|
|
3236
2822
|
}
|
|
3237
2823
|
});
|
|
3238
2824
|
export {
|
|
3239
|
-
|
|
2825
|
+
Ne as ImageCloud
|
|
3240
2826
|
};
|
|
3241
2827
|
//# sourceMappingURL=vue.js.map
|