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