@frybynite/image-cloud 0.9.1 → 0.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/image-cloud-auto-init.js +639 -678
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +679 -717
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +16 -31
- package/dist/react.d.ts +16 -31
- package/dist/react.js +572 -611
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +16 -31
- package/dist/vue.js +682 -721
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +16 -31
- package/dist/web-component.js +389 -428
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/vue.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as Ht, ref as It, onMounted as
|
|
1
|
+
import { defineComponent as Ht, ref as It, onMounted as Nt, onUnmounted as kt, watch as jt, h as Wt } from "vue";
|
|
2
2
|
const mt = Object.freeze({
|
|
3
3
|
none: "none",
|
|
4
4
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
@@ -19,7 +19,7 @@ const mt = Object.freeze({
|
|
|
19
19
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
20
20
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
21
21
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
22
|
-
}),
|
|
22
|
+
}), bt = Object.freeze({
|
|
23
23
|
type: "linear"
|
|
24
24
|
}), vt = Object.freeze({
|
|
25
25
|
mode: "none"
|
|
@@ -95,7 +95,7 @@ const mt = Object.freeze({
|
|
|
95
95
|
enabled: !1,
|
|
96
96
|
centers: !1,
|
|
97
97
|
loaders: !1
|
|
98
|
-
}), Jt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Kt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Zt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Qt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }),
|
|
98
|
+
}), Jt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Kt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Zt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Qt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }), R = Object.freeze({
|
|
99
99
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
100
100
|
loaders: [],
|
|
101
101
|
// Shared loader settings and debug config
|
|
@@ -116,10 +116,8 @@ const mt = Object.freeze({
|
|
|
116
116
|
densityFactor: 1,
|
|
117
117
|
// Default density
|
|
118
118
|
spacing: Object.freeze({
|
|
119
|
-
padding: 50
|
|
119
|
+
padding: 50
|
|
120
120
|
// padding from viewport edges
|
|
121
|
-
minGap: 20
|
|
122
|
-
// minimum spacing between images
|
|
123
121
|
})
|
|
124
122
|
}),
|
|
125
123
|
// Pattern-based animation configuration
|
|
@@ -140,12 +138,6 @@ const mt = Object.freeze({
|
|
|
140
138
|
interval: 150
|
|
141
139
|
// ms between processing queue items (when enabled)
|
|
142
140
|
}),
|
|
143
|
-
performance: Object.freeze({
|
|
144
|
-
useGPU: void 0,
|
|
145
|
-
// STUB: Not implemented yet
|
|
146
|
-
reduceMotion: void 0
|
|
147
|
-
// STUB: Not implemented yet
|
|
148
|
-
}),
|
|
149
141
|
entry: Object.freeze({
|
|
150
142
|
start: Object.freeze({
|
|
151
143
|
position: "nearest-edge",
|
|
@@ -164,7 +156,7 @@ const mt = Object.freeze({
|
|
|
164
156
|
}),
|
|
165
157
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
166
158
|
// smooth deceleration
|
|
167
|
-
path:
|
|
159
|
+
path: bt,
|
|
168
160
|
rotation: vt,
|
|
169
161
|
scale: wt
|
|
170
162
|
}),
|
|
@@ -180,83 +172,63 @@ const mt = Object.freeze({
|
|
|
180
172
|
// Use default animation duration
|
|
181
173
|
}),
|
|
182
174
|
navigation: Object.freeze({
|
|
183
|
-
keyboard:
|
|
184
|
-
|
|
185
|
-
swipe: void 0,
|
|
186
|
-
// STUB: Not implemented yet
|
|
175
|
+
keyboard: !0,
|
|
176
|
+
swipe: !0,
|
|
187
177
|
mouseWheel: void 0
|
|
188
178
|
// STUB: Not implemented yet
|
|
189
179
|
}),
|
|
190
|
-
|
|
191
|
-
pinchToZoom: void 0,
|
|
192
|
-
// STUB: Not implemented yet
|
|
193
|
-
doubleTapToFocus: void 0
|
|
194
|
-
// STUB: Not implemented yet
|
|
195
|
-
}),
|
|
196
|
-
disableDragging: !1
|
|
180
|
+
dragging: !0
|
|
197
181
|
}),
|
|
198
|
-
//
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
mobile: 768,
|
|
203
|
-
tablet: void 0,
|
|
204
|
-
// STUB: Not implemented yet
|
|
205
|
-
desktop: void 0
|
|
206
|
-
// STUB: Not implemented yet
|
|
207
|
-
}),
|
|
208
|
-
mobileDetection: () => typeof window > "u" ? !1 : window.innerWidth <= 768
|
|
209
|
-
}),
|
|
210
|
-
ui: Object.freeze({
|
|
211
|
-
showLoadingSpinner: !1,
|
|
212
|
-
showImageCounter: !1
|
|
213
|
-
})
|
|
182
|
+
// UI configuration
|
|
183
|
+
ui: Object.freeze({
|
|
184
|
+
showLoadingSpinner: !1,
|
|
185
|
+
showImageCounter: !1
|
|
214
186
|
}),
|
|
215
187
|
// Image styling
|
|
216
188
|
styling: Ft
|
|
217
189
|
});
|
|
218
|
-
function Z(
|
|
219
|
-
if (!
|
|
220
|
-
if (!t) return { ...
|
|
221
|
-
const i = { ...
|
|
222
|
-
return t.border !== void 0 && (i.border = { ...
|
|
190
|
+
function Z(n, t) {
|
|
191
|
+
if (!n) return t || {};
|
|
192
|
+
if (!t) return { ...n };
|
|
193
|
+
const i = { ...n };
|
|
194
|
+
return t.border !== void 0 && (i.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...n.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
223
195
|
}
|
|
224
|
-
function te(
|
|
225
|
-
if (!t) return { ...
|
|
226
|
-
const i = Z(
|
|
227
|
-
Z(i,
|
|
196
|
+
function te(n, t) {
|
|
197
|
+
if (!t) return { ...n };
|
|
198
|
+
const i = Z(n.default, t.default), e = Z(
|
|
199
|
+
Z(i, n.hover),
|
|
228
200
|
t.hover
|
|
229
|
-
),
|
|
230
|
-
Z(i,
|
|
201
|
+
), o = Z(
|
|
202
|
+
Z(i, n.focused),
|
|
231
203
|
t.focused
|
|
232
204
|
);
|
|
233
205
|
return {
|
|
234
206
|
default: i,
|
|
235
207
|
hover: e,
|
|
236
|
-
focused:
|
|
208
|
+
focused: o
|
|
237
209
|
};
|
|
238
210
|
}
|
|
239
|
-
function ee(
|
|
240
|
-
if (!t) return { ...
|
|
241
|
-
const i = { ...
|
|
211
|
+
function ee(n, t) {
|
|
212
|
+
if (!t) return { ...n };
|
|
213
|
+
const i = { ...n };
|
|
242
214
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
243
|
-
...
|
|
215
|
+
...n.sizing,
|
|
244
216
|
...t.sizing
|
|
245
217
|
}, t.sizing.variance)) {
|
|
246
|
-
const e = t.sizing.variance,
|
|
247
|
-
i.sizing.variance = { min:
|
|
218
|
+
const e = t.sizing.variance, o = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : n.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : n.sizing?.variance?.max ?? 1;
|
|
219
|
+
i.sizing.variance = { min: o, max: a };
|
|
248
220
|
}
|
|
249
221
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
250
|
-
...
|
|
222
|
+
...n.rotation,
|
|
251
223
|
...t.rotation
|
|
252
224
|
}, t.rotation.range)) {
|
|
253
|
-
const e = t.rotation.range,
|
|
254
|
-
i.rotation.range = { min:
|
|
225
|
+
const e = t.rotation.range, o = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : n.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : n.rotation?.range?.max ?? 15;
|
|
226
|
+
i.rotation.range = { min: o, max: a };
|
|
255
227
|
}
|
|
256
228
|
return i;
|
|
257
229
|
}
|
|
258
|
-
function ie(
|
|
259
|
-
const t =
|
|
230
|
+
function ie(n) {
|
|
231
|
+
const t = n.layout?.rotation;
|
|
260
232
|
if (t && "enabled" in t)
|
|
261
233
|
return {
|
|
262
234
|
rotation: {
|
|
@@ -265,8 +237,8 @@ function ie(o) {
|
|
|
265
237
|
}
|
|
266
238
|
};
|
|
267
239
|
}
|
|
268
|
-
function
|
|
269
|
-
const t =
|
|
240
|
+
function oe(n) {
|
|
241
|
+
const t = n.layout?.sizing?.variance;
|
|
270
242
|
if (t)
|
|
271
243
|
return {
|
|
272
244
|
sizing: {
|
|
@@ -276,101 +248,90 @@ function ne(o) {
|
|
|
276
248
|
}
|
|
277
249
|
};
|
|
278
250
|
}
|
|
279
|
-
function
|
|
280
|
-
const t = ie(
|
|
281
|
-
let e =
|
|
251
|
+
function ne(n = {}) {
|
|
252
|
+
const t = ie(n), i = oe(n);
|
|
253
|
+
let e = n.image;
|
|
282
254
|
(t || i) && (e = {
|
|
283
255
|
...i || {},
|
|
284
256
|
...t || {},
|
|
285
257
|
...e
|
|
286
|
-
}, e.rotation && t?.rotation &&
|
|
258
|
+
}, e.rotation && t?.rotation && n.image?.rotation && (e.rotation = {
|
|
287
259
|
...t.rotation,
|
|
288
|
-
...
|
|
260
|
+
...n.image.rotation
|
|
289
261
|
}));
|
|
290
|
-
const
|
|
291
|
-
|
|
262
|
+
const o = [...n.loaders ?? []];
|
|
263
|
+
n.images && n.images.length > 0 && o.unshift({
|
|
292
264
|
static: {
|
|
293
|
-
sources: [{ urls:
|
|
265
|
+
sources: [{ urls: n.images }]
|
|
294
266
|
}
|
|
295
267
|
});
|
|
296
268
|
const r = {
|
|
297
269
|
loaders: {
|
|
298
270
|
...Ot,
|
|
299
|
-
...
|
|
271
|
+
...n.config?.loaders ?? {}
|
|
300
272
|
}
|
|
301
273
|
}, s = {
|
|
302
|
-
loaders:
|
|
274
|
+
loaders: o,
|
|
303
275
|
config: r,
|
|
304
276
|
image: ee(zt, e),
|
|
305
|
-
layout: { ...
|
|
306
|
-
animation: { ...
|
|
307
|
-
interaction: { ...
|
|
308
|
-
|
|
309
|
-
styling: te(Ft,
|
|
277
|
+
layout: { ...R.layout },
|
|
278
|
+
animation: { ...R.animation },
|
|
279
|
+
interaction: { ...R.interaction },
|
|
280
|
+
ui: { ...R.ui },
|
|
281
|
+
styling: te(Ft, n.styling)
|
|
310
282
|
};
|
|
311
|
-
|
|
312
|
-
...
|
|
313
|
-
...
|
|
314
|
-
},
|
|
315
|
-
...
|
|
316
|
-
mobile:
|
|
317
|
-
tablet:
|
|
318
|
-
}),
|
|
319
|
-
...
|
|
320
|
-
...
|
|
321
|
-
})),
|
|
322
|
-
...
|
|
323
|
-
...
|
|
324
|
-
},
|
|
325
|
-
...
|
|
326
|
-
...
|
|
327
|
-
}),
|
|
328
|
-
...
|
|
329
|
-
...
|
|
330
|
-
}),
|
|
331
|
-
...
|
|
332
|
-
...
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
} :
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : E.animation.entry.rotation,
|
|
344
|
-
scale: o.animation.entry.scale ? { ...wt, ...o.animation.entry.scale } : E.animation.entry.scale
|
|
345
|
-
}), o.animation.idle && (s.animation.idle = {
|
|
283
|
+
n.layout && (s.layout = {
|
|
284
|
+
...R.layout,
|
|
285
|
+
...n.layout
|
|
286
|
+
}, n.layout.responsive && (s.layout.responsive = {
|
|
287
|
+
...R.layout.responsive,
|
|
288
|
+
mobile: n.layout.responsive.mobile ? { ...R.layout.responsive.mobile, ...n.layout.responsive.mobile } : R.layout.responsive.mobile,
|
|
289
|
+
tablet: n.layout.responsive.tablet ? { ...R.layout.responsive.tablet, ...n.layout.responsive.tablet } : R.layout.responsive.tablet
|
|
290
|
+
}), n.layout.spacing && (s.layout.spacing = {
|
|
291
|
+
...R.layout.spacing,
|
|
292
|
+
...n.layout.spacing
|
|
293
|
+
})), n.animation && (s.animation = {
|
|
294
|
+
...R.animation,
|
|
295
|
+
...n.animation
|
|
296
|
+
}, n.animation.easing && (s.animation.easing = {
|
|
297
|
+
...R.animation.easing,
|
|
298
|
+
...n.animation.easing
|
|
299
|
+
}), n.animation.queue && (s.animation.queue = {
|
|
300
|
+
...R.animation.queue,
|
|
301
|
+
...n.animation.queue
|
|
302
|
+
}), n.animation.entry && (s.animation.entry = {
|
|
303
|
+
...R.animation.entry,
|
|
304
|
+
...n.animation.entry,
|
|
305
|
+
start: n.animation.entry.start ? {
|
|
306
|
+
...R.animation.entry.start,
|
|
307
|
+
...n.animation.entry.start,
|
|
308
|
+
circular: n.animation.entry.start.circular ? { ...R.animation.entry.start.circular, ...n.animation.entry.start.circular } : R.animation.entry.start.circular
|
|
309
|
+
} : R.animation.entry.start,
|
|
310
|
+
timing: n.animation.entry.timing ? { ...R.animation.entry.timing, ...n.animation.entry.timing } : R.animation.entry.timing,
|
|
311
|
+
path: n.animation.entry.path ? { ...bt, ...n.animation.entry.path } : R.animation.entry.path,
|
|
312
|
+
rotation: n.animation.entry.rotation ? { ...vt, ...n.animation.entry.rotation } : R.animation.entry.rotation,
|
|
313
|
+
scale: n.animation.entry.scale ? { ...wt, ...n.animation.entry.scale } : R.animation.entry.scale
|
|
314
|
+
}), n.animation.idle && (s.animation.idle = {
|
|
346
315
|
...$t,
|
|
347
|
-
...
|
|
348
|
-
})),
|
|
349
|
-
...
|
|
350
|
-
...
|
|
351
|
-
},
|
|
352
|
-
...
|
|
353
|
-
...
|
|
354
|
-
}),
|
|
355
|
-
...
|
|
356
|
-
...
|
|
357
|
-
})
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
...
|
|
362
|
-
...
|
|
363
|
-
},
|
|
364
|
-
...E.rendering.responsive,
|
|
365
|
-
...o.rendering.responsive,
|
|
366
|
-
breakpoints: o.rendering.responsive.breakpoints ? { ...E.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : E.rendering.responsive.breakpoints,
|
|
367
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
368
|
-
}), o.rendering.ui && (s.rendering.ui = {
|
|
369
|
-
...E.rendering.ui,
|
|
370
|
-
...o.rendering.ui
|
|
371
|
-
})), s.config.debug = {
|
|
316
|
+
...n.animation.idle
|
|
317
|
+
})), n.interaction && (s.interaction = {
|
|
318
|
+
...R.interaction,
|
|
319
|
+
...n.interaction
|
|
320
|
+
}, n.interaction.focus && (s.interaction.focus = {
|
|
321
|
+
...R.interaction.focus,
|
|
322
|
+
...n.interaction.focus
|
|
323
|
+
}), n.interaction.navigation && (s.interaction.navigation = {
|
|
324
|
+
...R.interaction.navigation,
|
|
325
|
+
...n.interaction.navigation
|
|
326
|
+
}));
|
|
327
|
+
const l = n.rendering?.ui;
|
|
328
|
+
if (l && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), s.ui = {
|
|
329
|
+
...R.ui,
|
|
330
|
+
...l,
|
|
331
|
+
...n.ui
|
|
332
|
+
}, s.config.debug = {
|
|
372
333
|
...Dt,
|
|
373
|
-
...
|
|
334
|
+
...n.config?.debug ?? {}
|
|
374
335
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
375
336
|
const c = { shape: "hexagon", mode: "height-relative" };
|
|
376
337
|
s.styling = {
|
|
@@ -382,14 +343,14 @@ function oe(o = {}) {
|
|
|
382
343
|
}
|
|
383
344
|
return s;
|
|
384
345
|
}
|
|
385
|
-
function se(
|
|
386
|
-
return { ...
|
|
346
|
+
function se(n, t) {
|
|
347
|
+
return { ...n ? Rt[n] : Rt.playful, ...t };
|
|
387
348
|
}
|
|
388
|
-
function ae(
|
|
389
|
-
return { ...
|
|
349
|
+
function ae(n, t) {
|
|
350
|
+
return { ...n ? Tt[n] : Tt.gentle, ...t };
|
|
390
351
|
}
|
|
391
|
-
function re(
|
|
392
|
-
return { ...
|
|
352
|
+
function re(n, t) {
|
|
353
|
+
return { ...n ? At[n] : At.gentle, ...t };
|
|
393
354
|
}
|
|
394
355
|
class ce {
|
|
395
356
|
constructor(t) {
|
|
@@ -402,8 +363,8 @@ class ce {
|
|
|
402
363
|
buildTransformString(t) {
|
|
403
364
|
const i = ["translate(-50%, -50%)"];
|
|
404
365
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
405
|
-
const e = t.x ?? 0,
|
|
406
|
-
i.push(`translate(${e}px, ${
|
|
366
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
367
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
407
368
|
}
|
|
408
369
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
409
370
|
}
|
|
@@ -416,14 +377,14 @@ class ce {
|
|
|
416
377
|
* @param easing - CSS easing function (optional)
|
|
417
378
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
418
379
|
*/
|
|
419
|
-
animateTransformCancellable(t, i, e,
|
|
380
|
+
animateTransformCancellable(t, i, e, o = null, a = null) {
|
|
420
381
|
this.cancelAllAnimations(t);
|
|
421
|
-
const r =
|
|
382
|
+
const r = o ?? this.config.duration, s = a ?? this.config.easing.default, l = this.buildTransformString(i), c = this.buildTransformString(e);
|
|
422
383
|
t.style.transition = "none";
|
|
423
384
|
const u = t.animate(
|
|
424
385
|
[
|
|
425
|
-
{ transform:
|
|
426
|
-
{ transform:
|
|
386
|
+
{ transform: l },
|
|
387
|
+
{ transform: c }
|
|
427
388
|
],
|
|
428
389
|
{
|
|
429
390
|
duration: r,
|
|
@@ -441,7 +402,7 @@ class ce {
|
|
|
441
402
|
duration: r
|
|
442
403
|
};
|
|
443
404
|
return this.activeAnimations.set(t, h), u.finished.then(() => {
|
|
444
|
-
t.style.transform =
|
|
405
|
+
t.style.transform = c, this.activeAnimations.delete(t);
|
|
445
406
|
}).catch(() => {
|
|
446
407
|
this.activeAnimations.delete(t);
|
|
447
408
|
}), h;
|
|
@@ -455,13 +416,13 @@ class ce {
|
|
|
455
416
|
cancelAnimation(t, i = !0) {
|
|
456
417
|
const e = this.getCurrentTransform(t.element);
|
|
457
418
|
if (t.animation.cancel(), i) {
|
|
458
|
-
const
|
|
419
|
+
const o = this.buildTransformString({
|
|
459
420
|
x: e.x,
|
|
460
421
|
y: e.y,
|
|
461
422
|
rotation: e.rotation,
|
|
462
423
|
scale: e.scale
|
|
463
424
|
});
|
|
464
|
-
t.element.style.transform =
|
|
425
|
+
t.element.style.transform = o;
|
|
465
426
|
}
|
|
466
427
|
return this.activeAnimations.delete(t.element), e;
|
|
467
428
|
}
|
|
@@ -474,8 +435,8 @@ class ce {
|
|
|
474
435
|
const i = this.activeAnimations.get(t);
|
|
475
436
|
i && this.cancelAnimation(i, !1);
|
|
476
437
|
const e = t.getAnimations();
|
|
477
|
-
for (const
|
|
478
|
-
|
|
438
|
+
for (const o of e)
|
|
439
|
+
o.cancel();
|
|
479
440
|
}
|
|
480
441
|
/**
|
|
481
442
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -487,8 +448,8 @@ class ce {
|
|
|
487
448
|
const e = getComputedStyle(t).transform;
|
|
488
449
|
if (e === "none" || !e)
|
|
489
450
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
490
|
-
const
|
|
491
|
-
return { x: s, y:
|
|
451
|
+
const o = new DOMMatrix(e), a = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), s = o.e, l = o.f;
|
|
452
|
+
return { x: s, y: l, rotation: r, scale: a };
|
|
492
453
|
}
|
|
493
454
|
/**
|
|
494
455
|
* Check if an element has an active animation
|
|
@@ -514,9 +475,9 @@ class ce {
|
|
|
514
475
|
* @param easing - CSS easing function (optional)
|
|
515
476
|
* @returns Promise that resolves when animation completes
|
|
516
477
|
*/
|
|
517
|
-
animateTransform(t, i, e = null,
|
|
478
|
+
animateTransform(t, i, e = null, o = null) {
|
|
518
479
|
return new Promise((a) => {
|
|
519
|
-
const r = e ?? this.config.duration, s =
|
|
480
|
+
const r = e ?? this.config.duration, s = o ?? this.config.easing.default;
|
|
520
481
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
521
482
|
a();
|
|
522
483
|
}, r);
|
|
@@ -547,141 +508,141 @@ class ce {
|
|
|
547
508
|
return new Promise((i) => setTimeout(i, t));
|
|
548
509
|
}
|
|
549
510
|
}
|
|
550
|
-
function J(
|
|
551
|
-
return
|
|
511
|
+
function J(n, t, i) {
|
|
512
|
+
return n + (t - n) * i;
|
|
552
513
|
}
|
|
553
|
-
function le(
|
|
554
|
-
const { overshoot:
|
|
555
|
-
let u = 0, h = 0, d = 1, f =
|
|
556
|
-
for (let g = 0; g <
|
|
557
|
-
if (
|
|
558
|
-
h = g === 0 ? 0 :
|
|
514
|
+
function le(n, t, i, e) {
|
|
515
|
+
const { overshoot: o, bounces: a, decayRatio: r } = e, s = i.x - t.x, l = i.y - t.y, c = he(a, r);
|
|
516
|
+
let u = 0, h = 0, d = 1, f = o, y = !1;
|
|
517
|
+
for (let g = 0; g < c.length; g++)
|
|
518
|
+
if (n <= c[g].time) {
|
|
519
|
+
h = g === 0 ? 0 : c[g - 1].time, d = c[g].time, f = c[g].overshoot, y = c[g].isOvershoot;
|
|
559
520
|
break;
|
|
560
521
|
}
|
|
561
|
-
const p = (
|
|
562
|
-
if (
|
|
563
|
-
u = 1 + f *
|
|
522
|
+
const p = (n - h) / (d - h);
|
|
523
|
+
if (y)
|
|
524
|
+
u = 1 + f * nt(p);
|
|
564
525
|
else if (h === 0)
|
|
565
|
-
u =
|
|
526
|
+
u = nt(p);
|
|
566
527
|
else {
|
|
567
|
-
const m = 1 + (
|
|
568
|
-
(
|
|
528
|
+
const m = 1 + (c.find(
|
|
529
|
+
(b, w) => b.time > h && w > 0 && c[w - 1].isOvershoot
|
|
569
530
|
)?.overshoot || f);
|
|
570
|
-
u = J(m, 1,
|
|
531
|
+
u = J(m, 1, nt(p));
|
|
571
532
|
}
|
|
572
533
|
return {
|
|
573
534
|
x: t.x + s * u,
|
|
574
|
-
y: t.y +
|
|
535
|
+
y: t.y + l * u
|
|
575
536
|
};
|
|
576
537
|
}
|
|
577
|
-
function he(
|
|
538
|
+
function he(n, t) {
|
|
578
539
|
const i = [];
|
|
579
540
|
let e = 0.6;
|
|
580
541
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
581
|
-
let
|
|
582
|
-
const r = 0.4 / (
|
|
583
|
-
for (let s = 0; s <
|
|
584
|
-
e += r, i.push({ time: e, overshoot:
|
|
542
|
+
let o = 0.15;
|
|
543
|
+
const r = 0.4 / (n * 2);
|
|
544
|
+
for (let s = 0; s < n; s++)
|
|
545
|
+
e += r, i.push({ time: e, overshoot: o, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
585
546
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
586
547
|
}
|
|
587
|
-
function de(
|
|
588
|
-
const { stiffness:
|
|
548
|
+
function de(n, t, i, e) {
|
|
549
|
+
const { stiffness: o, damping: a, mass: r, oscillations: s } = e, l = i.x - t.x, c = i.y - t.y, u = Math.sqrt(o / r), h = a / (2 * Math.sqrt(o * r));
|
|
589
550
|
let d;
|
|
590
551
|
if (h < 1) {
|
|
591
|
-
const f = u * Math.sqrt(1 - h * h),
|
|
592
|
-
d = 1 -
|
|
552
|
+
const f = u * Math.sqrt(1 - h * h), y = Math.exp(-h * u * n * 3), p = Math.cos(f * n * s * Math.PI);
|
|
553
|
+
d = 1 - y * p;
|
|
593
554
|
} else
|
|
594
|
-
d = 1 - Math.exp(-u *
|
|
555
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
595
556
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
596
|
-
x: t.x +
|
|
597
|
-
y: t.y +
|
|
557
|
+
x: t.x + l * d,
|
|
558
|
+
y: t.y + c * d
|
|
598
559
|
};
|
|
599
560
|
}
|
|
600
|
-
function ue(
|
|
601
|
-
const { amplitude:
|
|
561
|
+
function ue(n, t, i, e) {
|
|
562
|
+
const { amplitude: o, frequency: a, decay: r, decayRate: s, phase: l } = e, c = i.x - t.x, u = i.y - t.y, h = Math.sqrt(c * c + u * u), d = h > 0 ? -u / h : 0, f = h > 0 ? c / h : 1, y = a * Math.PI * 2 * n + l, p = r ? Math.pow(1 - n, s) : 1, g = o * Math.sin(y) * p, m = ge(n);
|
|
602
563
|
return {
|
|
603
564
|
x: J(t.x, i.x, m) + g * d,
|
|
604
565
|
y: J(t.y, i.y, m) + g * f
|
|
605
566
|
};
|
|
606
567
|
}
|
|
607
|
-
function
|
|
608
|
-
return 1 - (1 -
|
|
568
|
+
function nt(n) {
|
|
569
|
+
return 1 - (1 - n) * (1 - n);
|
|
609
570
|
}
|
|
610
|
-
function ge(
|
|
611
|
-
return 1 - Math.pow(1 -
|
|
571
|
+
function ge(n) {
|
|
572
|
+
return 1 - Math.pow(1 - n, 3);
|
|
612
573
|
}
|
|
613
|
-
function fe(
|
|
614
|
-
const { amplitude: e, frequency:
|
|
615
|
-
return t +
|
|
574
|
+
function fe(n, t, i) {
|
|
575
|
+
const { amplitude: e, frequency: o, decay: a } = i, r = Math.sin(n * o * Math.PI * 2), s = a ? Math.pow(1 - n, 2) : 1, l = e * r * s;
|
|
576
|
+
return t + l;
|
|
616
577
|
}
|
|
617
|
-
function me(
|
|
618
|
-
const { overshoot: e, bounces:
|
|
578
|
+
function me(n, t, i) {
|
|
579
|
+
const { overshoot: e, bounces: o } = i, a = [];
|
|
619
580
|
a.push({ time: 0.5, scale: e });
|
|
620
581
|
let r = e;
|
|
621
|
-
const s = 0.5,
|
|
582
|
+
const s = 0.5, c = 0.5 / (o * 2);
|
|
622
583
|
let u = 0.5;
|
|
623
|
-
for (let d = 0; d <
|
|
584
|
+
for (let d = 0; d < o; d++) {
|
|
624
585
|
const f = 1 - (r - 1) * s;
|
|
625
|
-
u +=
|
|
586
|
+
u += c, a.push({ time: u, scale: f }), r = 1 + (r - 1) * s * s, u += c, d < o - 1 && a.push({ time: u, scale: r });
|
|
626
587
|
}
|
|
627
588
|
a.push({ time: 1, scale: 1 });
|
|
628
589
|
let h = 1;
|
|
629
590
|
for (let d = 0; d < a.length; d++)
|
|
630
|
-
if (
|
|
631
|
-
const f = d === 0 ? 0 : a[d - 1].time,
|
|
632
|
-
h =
|
|
591
|
+
if (n <= a[d].time) {
|
|
592
|
+
const f = d === 0 ? 0 : a[d - 1].time, y = d === 0 ? 1 : a[d - 1].scale, p = (n - f) / (a[d].time - f), g = nt(p);
|
|
593
|
+
h = y + (a[d].scale - y) * g;
|
|
633
594
|
break;
|
|
634
595
|
}
|
|
635
596
|
return h * t;
|
|
636
597
|
}
|
|
637
|
-
function pe(
|
|
598
|
+
function pe(n) {
|
|
638
599
|
const {
|
|
639
600
|
element: t,
|
|
640
601
|
startPosition: i,
|
|
641
602
|
endPosition: e,
|
|
642
|
-
pathConfig:
|
|
603
|
+
pathConfig: o,
|
|
643
604
|
duration: a,
|
|
644
605
|
imageWidth: r,
|
|
645
606
|
imageHeight: s,
|
|
646
|
-
rotation:
|
|
647
|
-
scale:
|
|
607
|
+
rotation: l,
|
|
608
|
+
scale: c,
|
|
648
609
|
onComplete: u,
|
|
649
610
|
rotationConfig: h,
|
|
650
611
|
startRotation: d,
|
|
651
612
|
scaleConfig: f,
|
|
652
|
-
startScale:
|
|
653
|
-
} =
|
|
654
|
-
if ((p === "linear" || p === "arc") && !w && !(v ||
|
|
613
|
+
startScale: y
|
|
614
|
+
} = n, p = o.type, g = d !== void 0 && d !== l, m = h?.mode === "wobble", b = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, w = g || m, v = y !== void 0 && y !== c, S = f?.mode === "pop", x = f?.pop || { overshoot: 1.2, bounces: 1 };
|
|
615
|
+
if ((p === "linear" || p === "arc") && !w && !(v || S)) {
|
|
655
616
|
u && u();
|
|
656
617
|
return;
|
|
657
618
|
}
|
|
658
619
|
const z = performance.now(), L = -r / 2, _ = -s / 2;
|
|
659
620
|
function O(H) {
|
|
660
|
-
const
|
|
621
|
+
const N = H - z, T = Math.min(N / a, 1);
|
|
661
622
|
let D;
|
|
662
623
|
switch (p) {
|
|
663
624
|
case "bounce": {
|
|
664
|
-
const
|
|
665
|
-
|
|
666
|
-
|
|
625
|
+
const k = se(
|
|
626
|
+
o.bouncePreset,
|
|
627
|
+
o.bounce
|
|
667
628
|
);
|
|
668
|
-
D = le(T, i, e,
|
|
629
|
+
D = le(T, i, e, k);
|
|
669
630
|
break;
|
|
670
631
|
}
|
|
671
632
|
case "elastic": {
|
|
672
|
-
const
|
|
673
|
-
|
|
674
|
-
|
|
633
|
+
const k = ae(
|
|
634
|
+
o.elasticPreset,
|
|
635
|
+
o.elastic
|
|
675
636
|
);
|
|
676
|
-
D = de(T, i, e,
|
|
637
|
+
D = de(T, i, e, k);
|
|
677
638
|
break;
|
|
678
639
|
}
|
|
679
640
|
case "wave": {
|
|
680
|
-
const
|
|
681
|
-
|
|
682
|
-
|
|
641
|
+
const k = re(
|
|
642
|
+
o.wavePreset,
|
|
643
|
+
o.wave
|
|
683
644
|
);
|
|
684
|
-
D = ue(T, i, e,
|
|
645
|
+
D = ue(T, i, e, k);
|
|
685
646
|
break;
|
|
686
647
|
}
|
|
687
648
|
default:
|
|
@@ -692,16 +653,16 @@ function pe(o) {
|
|
|
692
653
|
}
|
|
693
654
|
const G = D.x - e.x, U = D.y - e.y;
|
|
694
655
|
let M;
|
|
695
|
-
m ? M = fe(T,
|
|
656
|
+
m ? M = fe(T, l, b) : g ? M = J(d, l, T) : M = l;
|
|
696
657
|
let A;
|
|
697
|
-
|
|
658
|
+
S ? A = me(T, c, x) : v ? A = J(y, c, T) : A = c, t.style.transform = `translate(${L}px, ${_}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${A})`, T < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${l}deg) scale(${c})`, u && u());
|
|
698
659
|
}
|
|
699
660
|
requestAnimationFrame(O);
|
|
700
661
|
}
|
|
701
|
-
function
|
|
702
|
-
return
|
|
662
|
+
function ye(n) {
|
|
663
|
+
return n === "bounce" || n === "elastic" || n === "wave";
|
|
703
664
|
}
|
|
704
|
-
const
|
|
665
|
+
const be = {
|
|
705
666
|
radial: "center",
|
|
706
667
|
spiral: "center",
|
|
707
668
|
grid: "top",
|
|
@@ -712,18 +673,18 @@ const ye = {
|
|
|
712
673
|
};
|
|
713
674
|
class ve {
|
|
714
675
|
constructor(t, i) {
|
|
715
|
-
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
676
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || bt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || wt;
|
|
716
677
|
}
|
|
717
678
|
/**
|
|
718
679
|
* Get the effective start position, considering layout-aware defaults
|
|
719
680
|
*/
|
|
720
681
|
resolveStartPosition() {
|
|
721
|
-
return this.config.start.position ? this.config.start.position :
|
|
682
|
+
return this.config.start.position ? this.config.start.position : be[this.layoutAlgorithm] || "nearest-edge";
|
|
722
683
|
}
|
|
723
684
|
/**
|
|
724
685
|
* Calculate the starting position for an image's entry animation
|
|
725
686
|
*/
|
|
726
|
-
calculateStartPosition(t, i, e,
|
|
687
|
+
calculateStartPosition(t, i, e, o, a) {
|
|
727
688
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
728
689
|
switch (r) {
|
|
729
690
|
case "nearest-edge":
|
|
@@ -745,7 +706,7 @@ class ve {
|
|
|
745
706
|
t,
|
|
746
707
|
i,
|
|
747
708
|
e,
|
|
748
|
-
|
|
709
|
+
o,
|
|
749
710
|
a
|
|
750
711
|
);
|
|
751
712
|
default:
|
|
@@ -755,28 +716,28 @@ class ve {
|
|
|
755
716
|
/**
|
|
756
717
|
* Calculate start position from the nearest edge (current default behavior)
|
|
757
718
|
*/
|
|
758
|
-
calculateNearestEdge(t, i, e,
|
|
759
|
-
const a = t.x, r = t.y, s = a,
|
|
719
|
+
calculateNearestEdge(t, i, e, o) {
|
|
720
|
+
const a = t.x, r = t.y, s = a, l = e.width - a, c = r, u = e.height - r, h = Math.min(s, l, c, u);
|
|
760
721
|
let d = t.x, f = t.y;
|
|
761
|
-
return h === s ? d = -(i.width +
|
|
722
|
+
return h === s ? d = -(i.width + o) : h === l ? d = e.width + o : h === c ? f = -(i.height + o) : f = e.height + o, { x: d, y: f };
|
|
762
723
|
}
|
|
763
724
|
/**
|
|
764
725
|
* Calculate start position from a specific edge
|
|
765
726
|
*/
|
|
766
|
-
calculateEdgePosition(t, i, e,
|
|
727
|
+
calculateEdgePosition(t, i, e, o, a) {
|
|
767
728
|
let r = i.x, s = i.y;
|
|
768
729
|
switch (t) {
|
|
769
730
|
case "top":
|
|
770
731
|
s = -(e.height + a);
|
|
771
732
|
break;
|
|
772
733
|
case "bottom":
|
|
773
|
-
s =
|
|
734
|
+
s = o.height + a;
|
|
774
735
|
break;
|
|
775
736
|
case "left":
|
|
776
737
|
r = -(e.width + a);
|
|
777
738
|
break;
|
|
778
739
|
case "right":
|
|
779
|
-
r =
|
|
740
|
+
r = o.width + a;
|
|
780
741
|
break;
|
|
781
742
|
}
|
|
782
743
|
return { x: r, y: s };
|
|
@@ -785,9 +746,9 @@ class ve {
|
|
|
785
746
|
* Calculate start position from center with scale animation
|
|
786
747
|
*/
|
|
787
748
|
calculateCenterPosition(t, i, e) {
|
|
788
|
-
const
|
|
749
|
+
const o = t.width / 2, a = t.height / 2;
|
|
789
750
|
return {
|
|
790
|
-
x:
|
|
751
|
+
x: o,
|
|
791
752
|
y: a,
|
|
792
753
|
useScale: !0
|
|
793
754
|
// Signal to use scale animation from 0
|
|
@@ -796,28 +757,28 @@ class ve {
|
|
|
796
757
|
/**
|
|
797
758
|
* Calculate start position from a random edge
|
|
798
759
|
*/
|
|
799
|
-
calculateRandomEdge(t, i, e,
|
|
760
|
+
calculateRandomEdge(t, i, e, o) {
|
|
800
761
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
801
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
762
|
+
return this.calculateEdgePosition(r, t, i, e, o);
|
|
802
763
|
}
|
|
803
764
|
/**
|
|
804
765
|
* Calculate start position on a circle around the container
|
|
805
766
|
*/
|
|
806
|
-
calculateCircularPosition(t, i, e,
|
|
767
|
+
calculateCircularPosition(t, i, e, o, a) {
|
|
807
768
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
808
|
-
let
|
|
809
|
-
const
|
|
810
|
-
if (typeof
|
|
811
|
-
const p = parseFloat(
|
|
812
|
-
|
|
769
|
+
let l;
|
|
770
|
+
const c = r.radius || "120%";
|
|
771
|
+
if (typeof c == "string" && c.endsWith("%")) {
|
|
772
|
+
const p = parseFloat(c) / 100;
|
|
773
|
+
l = Math.sqrt(
|
|
813
774
|
e.width ** 2 + e.height ** 2
|
|
814
775
|
) * p / 2;
|
|
815
776
|
} else
|
|
816
|
-
|
|
777
|
+
l = typeof c == "number" ? c : 500;
|
|
817
778
|
let u;
|
|
818
|
-
s === "even" ? u =
|
|
819
|
-
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) *
|
|
820
|
-
return { x: f, y
|
|
779
|
+
s === "even" ? u = o / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
780
|
+
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) * l, y = d + Math.sin(u) * l;
|
|
781
|
+
return { x: f, y };
|
|
821
782
|
}
|
|
822
783
|
/**
|
|
823
784
|
* Get animation parameters for an image
|
|
@@ -836,17 +797,17 @@ class ve {
|
|
|
836
797
|
* Build a CSS transform string for the start position
|
|
837
798
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
838
799
|
*/
|
|
839
|
-
buildStartTransform(t, i, e,
|
|
840
|
-
const
|
|
841
|
-
return t.useScale ? `${p} translate(${
|
|
800
|
+
buildStartTransform(t, i, e, o, a, r, s, l) {
|
|
801
|
+
const c = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = l !== void 0 ? l : o, f = a !== void 0 ? -a / 2 : 0, y = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${f}px, ${y}px)` : "translate(-50%, -50%)";
|
|
802
|
+
return t.useScale ? `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
842
803
|
}
|
|
843
804
|
/**
|
|
844
805
|
* Build the final CSS transform string
|
|
845
806
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
846
807
|
*/
|
|
847
|
-
buildFinalTransform(t, i, e,
|
|
848
|
-
if (e !== void 0 &&
|
|
849
|
-
const a = -e / 2, r = -
|
|
808
|
+
buildFinalTransform(t, i, e, o) {
|
|
809
|
+
if (e !== void 0 && o !== void 0) {
|
|
810
|
+
const a = -e / 2, r = -o / 2;
|
|
850
811
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
851
812
|
}
|
|
852
813
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -863,7 +824,7 @@ class ve {
|
|
|
863
824
|
* Check if the current path type requires JavaScript animation
|
|
864
825
|
*/
|
|
865
826
|
requiresJSAnimation() {
|
|
866
|
-
return
|
|
827
|
+
return ye(this.pathConfig.type);
|
|
867
828
|
}
|
|
868
829
|
/**
|
|
869
830
|
* Get the path configuration
|
|
@@ -912,12 +873,12 @@ class ve {
|
|
|
912
873
|
return t + (Math.random() - 0.5) * 60;
|
|
913
874
|
if (typeof e == "number")
|
|
914
875
|
return e;
|
|
915
|
-
const
|
|
916
|
-
return e.min + Math.random() *
|
|
876
|
+
const o = e.max - e.min;
|
|
877
|
+
return e.min + Math.random() * o;
|
|
917
878
|
}
|
|
918
879
|
case "spin": {
|
|
919
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
920
|
-
return t + e * 360 *
|
|
880
|
+
const e = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
|
|
881
|
+
return t + e * 360 * o;
|
|
921
882
|
}
|
|
922
883
|
case "random":
|
|
923
884
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -965,8 +926,8 @@ class ve {
|
|
|
965
926
|
amplitude: 15,
|
|
966
927
|
frequency: 3,
|
|
967
928
|
decay: !0
|
|
968
|
-
}, { amplitude:
|
|
969
|
-
return i +
|
|
929
|
+
}, { amplitude: o, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), l = r ? Math.pow(1 - t, 2) : 1, c = o * s * l;
|
|
930
|
+
return i + c;
|
|
970
931
|
}
|
|
971
932
|
/**
|
|
972
933
|
* Get the scale configuration
|
|
@@ -1022,12 +983,12 @@ class ve {
|
|
|
1022
983
|
const e = this.scaleConfig.pop || {
|
|
1023
984
|
overshoot: 1.2,
|
|
1024
985
|
bounces: 1
|
|
1025
|
-
}, { overshoot:
|
|
986
|
+
}, { overshoot: o, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, o);
|
|
1026
987
|
let s = i;
|
|
1027
|
-
for (let
|
|
1028
|
-
if (t <= r[
|
|
1029
|
-
const
|
|
1030
|
-
s = u + (r[
|
|
988
|
+
for (let l = 0; l < r.length; l++)
|
|
989
|
+
if (t <= r[l].time) {
|
|
990
|
+
const c = l === 0 ? 0 : r[l - 1].time, u = l === 0 ? i : r[l - 1].scale, h = (t - c) / (r[l].time - c), d = this.easeOutQuad(h);
|
|
991
|
+
s = u + (r[l].scale - u) * d;
|
|
1031
992
|
break;
|
|
1032
993
|
}
|
|
1033
994
|
return s * i;
|
|
@@ -1038,12 +999,12 @@ class ve {
|
|
|
1038
999
|
generateScaleBounceKeyframes(t, i) {
|
|
1039
1000
|
const e = [];
|
|
1040
1001
|
e.push({ time: 0.5, scale: i });
|
|
1041
|
-
let
|
|
1002
|
+
let o = i;
|
|
1042
1003
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1043
|
-
let
|
|
1044
|
-
for (let
|
|
1045
|
-
const u = 1 - (
|
|
1046
|
-
|
|
1004
|
+
let l = 0.5;
|
|
1005
|
+
for (let c = 0; c < t; c++) {
|
|
1006
|
+
const u = 1 - (o - 1) * a;
|
|
1007
|
+
l += s, e.push({ time: l, scale: u }), o = 1 + (o - 1) * a * a, l += s, c < t - 1 && e.push({ time: l, scale: o });
|
|
1047
1008
|
}
|
|
1048
1009
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1049
1010
|
}
|
|
@@ -1062,9 +1023,9 @@ class we {
|
|
|
1062
1023
|
* Register an image element for idle animation.
|
|
1063
1024
|
* Starts animation after entry duration completes.
|
|
1064
1025
|
*/
|
|
1065
|
-
register(t, i, e,
|
|
1026
|
+
register(t, i, e, o) {
|
|
1066
1027
|
if (this.entries.has(t)) return;
|
|
1067
|
-
const a =
|
|
1028
|
+
const a = o ?? this.entryDurationMs, r = this.config.startDelay ?? a, s = {
|
|
1068
1029
|
element: t,
|
|
1069
1030
|
index: i,
|
|
1070
1031
|
totalImages: e,
|
|
@@ -1179,23 +1140,23 @@ class we {
|
|
|
1179
1140
|
});
|
|
1180
1141
|
}
|
|
1181
1142
|
_startBlink(t) {
|
|
1182
|
-
const i = { ...Zt, ...this.config.blink }, e = -(Math.random() * i.speed),
|
|
1143
|
+
const i = { ...Zt, ...this.config.blink }, e = -(Math.random() * i.speed), o = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1183
1144
|
let a, r;
|
|
1184
1145
|
i.style === "fade" ? (a = [
|
|
1185
|
-
{ opacity:
|
|
1146
|
+
{ opacity: o, offset: 0 },
|
|
1186
1147
|
{ opacity: 0, offset: 0.5 },
|
|
1187
|
-
{ opacity:
|
|
1148
|
+
{ opacity: o, offset: 1 }
|
|
1188
1149
|
], r = {
|
|
1189
1150
|
duration: i.speed,
|
|
1190
1151
|
delay: e,
|
|
1191
1152
|
iterations: 1 / 0,
|
|
1192
1153
|
easing: "ease-in-out"
|
|
1193
1154
|
}) : (a = [
|
|
1194
|
-
{ opacity:
|
|
1195
|
-
{ opacity:
|
|
1155
|
+
{ opacity: o, offset: 0 },
|
|
1156
|
+
{ opacity: o, offset: i.onRatio },
|
|
1196
1157
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
1197
1158
|
{ opacity: 0, offset: 0.99 },
|
|
1198
|
-
{ opacity:
|
|
1159
|
+
{ opacity: o, offset: 1 }
|
|
1199
1160
|
], r = {
|
|
1200
1161
|
duration: i.speed,
|
|
1201
1162
|
delay: e,
|
|
@@ -1224,8 +1185,8 @@ class we {
|
|
|
1224
1185
|
if (this.togetherSpeed = t, this.togetherRafId !== null) return;
|
|
1225
1186
|
const i = () => {
|
|
1226
1187
|
const e = performance.now() % this.togetherSpeed;
|
|
1227
|
-
for (const
|
|
1228
|
-
!
|
|
1188
|
+
for (const o of this.entries.values())
|
|
1189
|
+
!o.stopped && !o.paused && o.animation && (o.animation.currentTime = e);
|
|
1229
1190
|
this.togetherRafId = requestAnimationFrame(i);
|
|
1230
1191
|
};
|
|
1231
1192
|
this.togetherRafId = requestAnimationFrame(i);
|
|
@@ -1252,19 +1213,19 @@ class xe {
|
|
|
1252
1213
|
* @returns Array of layout objects with position, rotation, scale
|
|
1253
1214
|
*/
|
|
1254
1215
|
generate(t, i, e = {}) {
|
|
1255
|
-
const
|
|
1216
|
+
const o = [], { width: a, height: r } = i, s = this.config.spacing.padding, l = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, g = l * 1.5 / 2, m = l / 2, b = a - s - g, w = r - s - m, v = s + g, S = s + m;
|
|
1256
1217
|
for (let x = 0; x < t; x++) {
|
|
1257
|
-
const
|
|
1218
|
+
const I = this.random(v, b), z = this.random(S, w), L = c === "random" ? this.random(u, h) : 0, _ = y ? this.random(d, f) : 1, O = l * _, H = {
|
|
1258
1219
|
id: x,
|
|
1259
|
-
x:
|
|
1220
|
+
x: I,
|
|
1260
1221
|
y: z,
|
|
1261
1222
|
rotation: L,
|
|
1262
1223
|
scale: _,
|
|
1263
1224
|
baseSize: O
|
|
1264
1225
|
};
|
|
1265
|
-
|
|
1226
|
+
o.push(H);
|
|
1266
1227
|
}
|
|
1267
|
-
return
|
|
1228
|
+
return o;
|
|
1268
1229
|
}
|
|
1269
1230
|
/**
|
|
1270
1231
|
* Utility: Generate random number between min and max
|
|
@@ -1288,20 +1249,20 @@ class Ee {
|
|
|
1288
1249
|
* @returns Array of layout objects with position, rotation, scale
|
|
1289
1250
|
*/
|
|
1290
1251
|
generate(t, i, e = {}) {
|
|
1291
|
-
const
|
|
1252
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, y = this.config.scaleDecay ?? 0, p = {
|
|
1292
1253
|
...Gt,
|
|
1293
1254
|
...this.config.radial
|
|
1294
|
-
}, g = e.fixedHeight ?? s, m = a / 2,
|
|
1255
|
+
}, g = e.fixedHeight ?? s, m = a / 2, b = r / 2, w = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, S = Math.max(g * 0.8, Math.min(
|
|
1295
1256
|
m - v - g / 2,
|
|
1296
|
-
|
|
1257
|
+
b - v - g / 2
|
|
1297
1258
|
));
|
|
1298
1259
|
if (t > 0) {
|
|
1299
1260
|
const z = f ? this.random(h, d) : 1, L = g * z;
|
|
1300
|
-
|
|
1261
|
+
o.push({
|
|
1301
1262
|
id: 0,
|
|
1302
1263
|
x: m,
|
|
1303
|
-
y,
|
|
1304
|
-
rotation:
|
|
1264
|
+
y: b,
|
|
1265
|
+
rotation: l === "random" ? this.random(c * 0.33, u * 0.33) : 0,
|
|
1305
1266
|
// Less rotation for center
|
|
1306
1267
|
scale: z,
|
|
1307
1268
|
baseSize: L,
|
|
@@ -1309,34 +1270,34 @@ class Ee {
|
|
|
1309
1270
|
// Center image is highest
|
|
1310
1271
|
});
|
|
1311
1272
|
}
|
|
1312
|
-
let x = 1,
|
|
1273
|
+
let x = 1, I = 1;
|
|
1313
1274
|
for (; x < t; ) {
|
|
1314
|
-
const z =
|
|
1275
|
+
const z = I / w, L = y > 0 ? 1 - z * y * 0.5 : 1, _ = Math.max(g * 0.8, S / w * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), T = this.estimateWidth(g), D = Math.floor(N / (T * 0.7));
|
|
1315
1276
|
if (D === 0) {
|
|
1316
|
-
|
|
1277
|
+
I++;
|
|
1317
1278
|
continue;
|
|
1318
1279
|
}
|
|
1319
|
-
const G = 2 * Math.PI / D, U =
|
|
1280
|
+
const G = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
|
|
1320
1281
|
for (let M = 0; M < D && x < t; M++) {
|
|
1321
|
-
const A = M * G + U,
|
|
1322
|
-
let $ = m + Math.cos(A) * H, F =
|
|
1282
|
+
const A = M * G + U, k = f ? this.random(h, d) : 1, B = L * k, C = g * B;
|
|
1283
|
+
let $ = m + Math.cos(A) * H, F = b + Math.sin(A) * O;
|
|
1323
1284
|
const P = C * 1.5 / 2, j = C / 2;
|
|
1324
1285
|
$ - P < v ? $ = v + P : $ + P > a - v && ($ = a - v - P), F - j < v ? F = v + j : F + j > r - v && (F = r - v - j);
|
|
1325
|
-
const Y =
|
|
1326
|
-
|
|
1286
|
+
const Y = l === "random" ? this.random(c, u) : 0;
|
|
1287
|
+
o.push({
|
|
1327
1288
|
id: x,
|
|
1328
1289
|
x: $,
|
|
1329
1290
|
y: F,
|
|
1330
1291
|
rotation: Y,
|
|
1331
1292
|
scale: B,
|
|
1332
1293
|
baseSize: C,
|
|
1333
|
-
zIndex: Math.max(1, 100 -
|
|
1294
|
+
zIndex: Math.max(1, 100 - I)
|
|
1334
1295
|
// Outer rings have lower z-index
|
|
1335
1296
|
}), x++;
|
|
1336
1297
|
}
|
|
1337
|
-
|
|
1298
|
+
I++;
|
|
1338
1299
|
}
|
|
1339
|
-
return
|
|
1300
|
+
return o;
|
|
1340
1301
|
}
|
|
1341
1302
|
/**
|
|
1342
1303
|
* Estimate image width based on height
|
|
@@ -1397,13 +1358,13 @@ class Ie {
|
|
|
1397
1358
|
* @returns Array of layout objects with position, rotation, scale
|
|
1398
1359
|
*/
|
|
1399
1360
|
generate(t, i, e = {}) {
|
|
1400
|
-
const
|
|
1361
|
+
const o = [], { width: a, height: r } = i, s = { ...Se, ...this.config.grid }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, y = a - 2 * l, p = r - 2 * l, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1401
1362
|
t,
|
|
1402
|
-
|
|
1363
|
+
y,
|
|
1403
1364
|
p,
|
|
1404
|
-
|
|
1365
|
+
c,
|
|
1405
1366
|
s
|
|
1406
|
-
),
|
|
1367
|
+
), b = s.stagger === "row", w = s.stagger === "column", v = b ? g + 0.5 : g, S = w ? m + 0.5 : m, x = (y - s.gap * (g - 1)) / v, I = (p - s.gap * (m - 1)) / S, z = b ? x / 2 : 0, L = w ? I / 2 : 0, _ = 1 + s.overlap, O = Math.min(x, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = g * x + (g - 1) * s.gap + z, T = m * I + (m - 1) * s.gap + L, D = l + (y - N) / 2, G = l + (p - T) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", A = M && t > U;
|
|
1407
1368
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1408
1369
|
gridConfigColumns: s.columns,
|
|
1409
1370
|
gridConfigRows: s.rows,
|
|
@@ -1414,21 +1375,21 @@ class Ie {
|
|
|
1414
1375
|
imageCount: t,
|
|
1415
1376
|
isOverflowMode: A
|
|
1416
1377
|
});
|
|
1417
|
-
const
|
|
1378
|
+
const k = A ? new Array(U).fill(0) : [], B = Math.min(x, I) * s.overflowOffset;
|
|
1418
1379
|
for (let C = 0; C < t; C++) {
|
|
1419
1380
|
let $, F, X = 0;
|
|
1420
1381
|
if (A && C >= U) {
|
|
1421
1382
|
const q = C - U, W = q % U;
|
|
1422
|
-
X = Math.floor(q / U) + 1,
|
|
1383
|
+
X = Math.floor(q / U) + 1, k[W]++, s.fillDirection === "row" ? ($ = W % g, F = Math.floor(W / g)) : (F = W % m, $ = Math.floor(W / m));
|
|
1423
1384
|
} else
|
|
1424
1385
|
s.fillDirection === "row" ? ($ = C % g, F = Math.floor(C / g)) : (F = C % m, $ = Math.floor(C / m));
|
|
1425
|
-
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (
|
|
1426
|
-
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j +=
|
|
1386
|
+
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (I + s.gap) + I / 2;
|
|
1387
|
+
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j += I / 2), X > 0) {
|
|
1427
1388
|
const q = (X - 1) % Ct.length, W = Ct[q];
|
|
1428
1389
|
P += W.x * B, j += W.y * B;
|
|
1429
1390
|
}
|
|
1430
1391
|
if (s.jitter > 0) {
|
|
1431
|
-
const q = x / 2 * s.jitter, W =
|
|
1392
|
+
const q = x / 2 * s.jitter, W = I / 2 * s.jitter;
|
|
1432
1393
|
P += this.random(-q, q), j += this.random(-W, W);
|
|
1433
1394
|
}
|
|
1434
1395
|
let Y = P, V = j;
|
|
@@ -1437,10 +1398,10 @@ class Ie {
|
|
|
1437
1398
|
if (F === Math.floor((t - 1) / g) && q < g) {
|
|
1438
1399
|
const St = q * x + (q - 1) * s.gap;
|
|
1439
1400
|
let gt = 0;
|
|
1440
|
-
s.alignment === "center" ? gt = (
|
|
1401
|
+
s.alignment === "center" ? gt = (N - St) / 2 : s.alignment === "end" && (gt = N - St), Y += gt;
|
|
1441
1402
|
}
|
|
1442
1403
|
}
|
|
1443
|
-
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2,
|
|
1404
|
+
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2, ot = K / 2, lt = l + it, ht = a - l - it, _t = l + ot, Ut = r - l - ot;
|
|
1444
1405
|
Y = Math.max(lt, Math.min(Y, ht)), V = Math.max(_t, Math.min(V, Ut));
|
|
1445
1406
|
let dt = 0;
|
|
1446
1407
|
if (u === "random") {
|
|
@@ -1448,7 +1409,7 @@ class Ie {
|
|
|
1448
1409
|
s.jitter > 0 ? dt = this.random(q * s.jitter, W * s.jitter) : dt = this.random(q, W);
|
|
1449
1410
|
}
|
|
1450
1411
|
let ut;
|
|
1451
|
-
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1,
|
|
1412
|
+
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1, o.push({
|
|
1452
1413
|
id: C,
|
|
1453
1414
|
x: Y,
|
|
1454
1415
|
y: V,
|
|
@@ -1458,12 +1419,12 @@ class Ie {
|
|
|
1458
1419
|
zIndex: ut
|
|
1459
1420
|
});
|
|
1460
1421
|
}
|
|
1461
|
-
return
|
|
1422
|
+
return o;
|
|
1462
1423
|
}
|
|
1463
1424
|
/**
|
|
1464
1425
|
* Calculate optimal grid dimensions based on image count and container
|
|
1465
1426
|
*/
|
|
1466
|
-
calculateGridDimensions(t, i, e,
|
|
1427
|
+
calculateGridDimensions(t, i, e, o, a) {
|
|
1467
1428
|
let r, s;
|
|
1468
1429
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1469
1430
|
r = a.columns, s = a.rows;
|
|
@@ -1472,8 +1433,8 @@ class Ie {
|
|
|
1472
1433
|
else if (a.rows !== "auto")
|
|
1473
1434
|
s = a.rows, r = Math.ceil(t / s);
|
|
1474
1435
|
else {
|
|
1475
|
-
const
|
|
1476
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t *
|
|
1436
|
+
const l = i / e;
|
|
1437
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * l / 1.4))), s = Math.ceil(t / r); r > 1 && (r - 1) * s >= t; )
|
|
1477
1438
|
r--;
|
|
1478
1439
|
}
|
|
1479
1440
|
return { columns: Math.max(1, r), rows: Math.max(1, s) };
|
|
@@ -1504,80 +1465,80 @@ class Ae {
|
|
|
1504
1465
|
* @returns Array of layout objects with position, rotation, scale
|
|
1505
1466
|
*/
|
|
1506
1467
|
generate(t, i, e = {}) {
|
|
1507
|
-
const
|
|
1508
|
-
m -
|
|
1509
|
-
|
|
1468
|
+
const o = [], { width: a, height: r } = i, s = { ...Te, ...this.config.spiral }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, b = r / 2, w = Math.min(
|
|
1469
|
+
m - l - c / 2,
|
|
1470
|
+
b - l - c / 2
|
|
1510
1471
|
), v = s.direction === "clockwise" ? -1 : 1;
|
|
1511
|
-
for (let
|
|
1512
|
-
let x,
|
|
1472
|
+
for (let S = 0; S < t; S++) {
|
|
1473
|
+
let x, I;
|
|
1513
1474
|
if (s.spiralType === "golden")
|
|
1514
|
-
x =
|
|
1475
|
+
x = S * Re * v + s.startAngle, I = this.calculateGoldenRadius(S, t, w, s.tightness);
|
|
1515
1476
|
else if (s.spiralType === "archimedean") {
|
|
1516
|
-
const P =
|
|
1517
|
-
x = P * v + s.startAngle,
|
|
1477
|
+
const P = S * 0.5 * s.tightness;
|
|
1478
|
+
x = P * v + s.startAngle, I = this.calculateArchimedeanRadius(P, t, w, s.tightness);
|
|
1518
1479
|
} else {
|
|
1519
|
-
const P =
|
|
1520
|
-
x = P * v + s.startAngle,
|
|
1480
|
+
const P = S * 0.3 * s.tightness;
|
|
1481
|
+
x = P * v + s.startAngle, I = this.calculateLogarithmicRadius(P, t, w, s.tightness);
|
|
1521
1482
|
}
|
|
1522
|
-
const z = m + Math.cos(x) *
|
|
1483
|
+
const z = m + Math.cos(x) * I, L = b + Math.sin(x) * I, _ = I / w, O = g > 0 ? 1 - _ * g * 0.5 : 1, H = p ? this.random(f, y) : 1, N = O * H, T = c * N, G = T * 1.5 / 2, U = T / 2, M = l + G, A = a - l - G, k = l + U, B = r - l - U, C = Math.max(M, Math.min(z, A)), $ = Math.max(k, Math.min(L, B));
|
|
1523
1484
|
let F = 0;
|
|
1524
1485
|
if (u === "random") {
|
|
1525
1486
|
const P = x * 180 / Math.PI % 360, j = this.random(h, d);
|
|
1526
1487
|
F = s.spiralType === "golden" ? j : P * 0.1 + j * 0.9;
|
|
1527
|
-
} else u === "tangent" && (F = this.calculateSpiralTangent(x,
|
|
1528
|
-
const X = t -
|
|
1529
|
-
|
|
1530
|
-
id:
|
|
1488
|
+
} else u === "tangent" && (F = this.calculateSpiralTangent(x, I, s));
|
|
1489
|
+
const X = t - S;
|
|
1490
|
+
o.push({
|
|
1491
|
+
id: S,
|
|
1531
1492
|
x: C,
|
|
1532
1493
|
y: $,
|
|
1533
1494
|
rotation: F,
|
|
1534
|
-
scale:
|
|
1495
|
+
scale: N,
|
|
1535
1496
|
baseSize: T,
|
|
1536
1497
|
zIndex: X
|
|
1537
1498
|
});
|
|
1538
1499
|
}
|
|
1539
|
-
return
|
|
1500
|
+
return o;
|
|
1540
1501
|
}
|
|
1541
1502
|
/**
|
|
1542
1503
|
* Calculate tangent angle for spiral curve at given position
|
|
1543
1504
|
* This aligns the image along the spiral's direction of travel
|
|
1544
1505
|
*/
|
|
1545
1506
|
calculateSpiralTangent(t, i, e) {
|
|
1546
|
-
let
|
|
1507
|
+
let o;
|
|
1547
1508
|
if (e.spiralType === "golden")
|
|
1548
|
-
|
|
1509
|
+
o = t + Math.PI / 2;
|
|
1549
1510
|
else if (e.spiralType === "archimedean") {
|
|
1550
1511
|
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1551
|
-
|
|
1512
|
+
o = t + s;
|
|
1552
1513
|
} else {
|
|
1553
1514
|
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1554
|
-
|
|
1515
|
+
o = t + s;
|
|
1555
1516
|
}
|
|
1556
|
-
return
|
|
1517
|
+
return o * 180 / Math.PI % 360 - 90;
|
|
1557
1518
|
}
|
|
1558
1519
|
/**
|
|
1559
1520
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1560
1521
|
* Creates even distribution like sunflower seeds
|
|
1561
1522
|
*/
|
|
1562
|
-
calculateGoldenRadius(t, i, e,
|
|
1563
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1523
|
+
calculateGoldenRadius(t, i, e, o) {
|
|
1524
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / o;
|
|
1564
1525
|
return Math.min(r, e);
|
|
1565
1526
|
}
|
|
1566
1527
|
/**
|
|
1567
1528
|
* Calculate radius for Archimedean spiral
|
|
1568
1529
|
* r = a + b*θ (constant spacing between arms)
|
|
1569
1530
|
*/
|
|
1570
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1571
|
-
const a = i * 0.5 *
|
|
1531
|
+
calculateArchimedeanRadius(t, i, e, o) {
|
|
1532
|
+
const a = i * 0.5 * o;
|
|
1572
1533
|
return t / a * e;
|
|
1573
1534
|
}
|
|
1574
1535
|
/**
|
|
1575
1536
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1576
1537
|
* r = a * e^(b*θ)
|
|
1577
1538
|
*/
|
|
1578
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1579
|
-
const a = e * 0.05, r = 0.15 /
|
|
1580
|
-
return s /
|
|
1539
|
+
calculateLogarithmicRadius(t, i, e, o) {
|
|
1540
|
+
const a = e * 0.05, r = 0.15 / o, s = a * Math.exp(r * t), l = i * 0.3 * o, c = a * Math.exp(r * l);
|
|
1541
|
+
return s / c * e;
|
|
1581
1542
|
}
|
|
1582
1543
|
/**
|
|
1583
1544
|
* Utility: Generate random number between min and max
|
|
@@ -1606,7 +1567,7 @@ class Le {
|
|
|
1606
1567
|
* @returns Array of layout objects with position, rotation, scale
|
|
1607
1568
|
*/
|
|
1608
1569
|
generate(t, i, e = {}) {
|
|
1609
|
-
const
|
|
1570
|
+
const o = [], { width: a, height: r } = i, s = { ...Ce, ...this.config.cluster }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.calculateClusterCount(
|
|
1610
1571
|
t,
|
|
1611
1572
|
s.clusterCount,
|
|
1612
1573
|
a,
|
|
@@ -1616,72 +1577,72 @@ class Le {
|
|
|
1616
1577
|
g,
|
|
1617
1578
|
a,
|
|
1618
1579
|
r,
|
|
1619
|
-
|
|
1580
|
+
l,
|
|
1620
1581
|
s
|
|
1621
|
-
),
|
|
1582
|
+
), b = new Array(g).fill(0);
|
|
1622
1583
|
for (let v = 0; v < t; v++)
|
|
1623
|
-
|
|
1584
|
+
b[v % g]++;
|
|
1624
1585
|
let w = 0;
|
|
1625
1586
|
for (let v = 0; v < g; v++) {
|
|
1626
|
-
const
|
|
1627
|
-
for (let
|
|
1587
|
+
const S = m[v], x = b[v];
|
|
1588
|
+
for (let I = 0; I < x; I++) {
|
|
1628
1589
|
let z, L;
|
|
1629
1590
|
if (s.distribution === "gaussian")
|
|
1630
|
-
z = this.gaussianRandom() *
|
|
1591
|
+
z = this.gaussianRandom() * S.spread, L = this.gaussianRandom() * S.spread;
|
|
1631
1592
|
else {
|
|
1632
|
-
const F = this.random(0, Math.PI * 2), X = this.random(0,
|
|
1593
|
+
const F = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
|
|
1633
1594
|
z = Math.cos(F) * X, L = Math.sin(F) * X;
|
|
1634
1595
|
}
|
|
1635
1596
|
const _ = 1 + s.overlap * 0.5, O = 1 + s.overlap * 0.3;
|
|
1636
1597
|
z /= _, L /= _;
|
|
1637
|
-
const H = p ? this.random(f,
|
|
1638
|
-
let D =
|
|
1598
|
+
const H = p ? this.random(f, y) : 1, N = O * H, T = c * N;
|
|
1599
|
+
let D = S.x + z, G = S.y + L;
|
|
1639
1600
|
const M = T * 1.5 / 2, A = T / 2;
|
|
1640
|
-
D = Math.max(
|
|
1641
|
-
const
|
|
1642
|
-
|
|
1601
|
+
D = Math.max(l + M, Math.min(D, a - l - M)), G = Math.max(l + A, Math.min(G, r - l - A));
|
|
1602
|
+
const k = u === "random" ? this.random(h, d) : 0, C = Math.sqrt(z * z + L * L) / S.spread, $ = Math.round((1 - C) * 50) + 1;
|
|
1603
|
+
o.push({
|
|
1643
1604
|
id: w,
|
|
1644
1605
|
x: D,
|
|
1645
1606
|
y: G,
|
|
1646
|
-
rotation:
|
|
1647
|
-
scale:
|
|
1607
|
+
rotation: k,
|
|
1608
|
+
scale: N,
|
|
1648
1609
|
baseSize: T,
|
|
1649
1610
|
zIndex: $
|
|
1650
1611
|
}), w++;
|
|
1651
1612
|
}
|
|
1652
1613
|
}
|
|
1653
|
-
return
|
|
1614
|
+
return o;
|
|
1654
1615
|
}
|
|
1655
1616
|
/**
|
|
1656
1617
|
* Calculate optimal number of clusters based on image count and container
|
|
1657
1618
|
*/
|
|
1658
|
-
calculateClusterCount(t, i, e,
|
|
1619
|
+
calculateClusterCount(t, i, e, o, a) {
|
|
1659
1620
|
if (i !== "auto")
|
|
1660
1621
|
return Math.max(1, Math.min(i, t));
|
|
1661
|
-
const s = Math.max(1, Math.ceil(t / 8)),
|
|
1662
|
-
e / a * (
|
|
1622
|
+
const s = Math.max(1, Math.ceil(t / 8)), l = Math.floor(
|
|
1623
|
+
e / a * (o / a) * 0.6
|
|
1663
1624
|
);
|
|
1664
|
-
return Math.max(1, Math.min(s,
|
|
1625
|
+
return Math.max(1, Math.min(s, l, 10));
|
|
1665
1626
|
}
|
|
1666
1627
|
/**
|
|
1667
1628
|
* Generate cluster center positions with spacing constraints
|
|
1668
1629
|
*/
|
|
1669
|
-
generateClusterCenters(t, i, e,
|
|
1670
|
-
const r = [],
|
|
1630
|
+
generateClusterCenters(t, i, e, o, a) {
|
|
1631
|
+
const r = [], l = o + a.clusterSpread, c = i - o - a.clusterSpread, u = o + a.clusterSpread, h = e - o - a.clusterSpread;
|
|
1671
1632
|
for (let d = 0; d < t; d++) {
|
|
1672
|
-
let f = null,
|
|
1633
|
+
let f = null, y = -1;
|
|
1673
1634
|
for (let p = 0; p < 100; p++) {
|
|
1674
1635
|
const g = {
|
|
1675
|
-
x: this.random(
|
|
1636
|
+
x: this.random(l, c),
|
|
1676
1637
|
y: this.random(u, h),
|
|
1677
1638
|
spread: this.calculateClusterSpread(a)
|
|
1678
1639
|
};
|
|
1679
1640
|
let m = 1 / 0;
|
|
1680
|
-
for (const
|
|
1681
|
-
const w = g.x -
|
|
1682
|
-
m = Math.min(m,
|
|
1641
|
+
for (const b of r) {
|
|
1642
|
+
const w = g.x - b.x, v = g.y - b.y, S = Math.sqrt(w * w + v * v);
|
|
1643
|
+
m = Math.min(m, S);
|
|
1683
1644
|
}
|
|
1684
|
-
if ((r.length === 0 || m >
|
|
1645
|
+
if ((r.length === 0 || m > y) && (f = g, y = m), m >= a.clusterSpacing)
|
|
1685
1646
|
break;
|
|
1686
1647
|
}
|
|
1687
1648
|
f && r.push(f);
|
|
@@ -1724,23 +1685,23 @@ class Me {
|
|
|
1724
1685
|
* @returns Array of layout objects with position, rotation, scale
|
|
1725
1686
|
*/
|
|
1726
1687
|
generate(t, i, e = {}) {
|
|
1727
|
-
const
|
|
1688
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, p = e.fixedHeight ?? s, g = {
|
|
1728
1689
|
...qt,
|
|
1729
1690
|
...this.config.wave
|
|
1730
|
-
}, { rows: m, amplitude:
|
|
1691
|
+
}, { rows: m, amplitude: b, frequency: w, phaseShift: v, synchronization: S } = g, x = Math.ceil(t / m), L = p * 1.5 / 2, _ = l + L, O = a - l - L, H = O - _, N = x > 1 ? H / (x - 1) : 0, T = l + b + p / 2, D = r - l - b - p / 2, G = D - T, U = m > 1 ? G / (m - 1) : 0;
|
|
1731
1692
|
let M = 0;
|
|
1732
1693
|
for (let A = 0; A < m && M < t; A++) {
|
|
1733
|
-
const
|
|
1694
|
+
const k = m === 1 ? (T + D) / 2 : T + A * U;
|
|
1734
1695
|
let B = 0;
|
|
1735
|
-
|
|
1696
|
+
S === "offset" ? B = A * v : S === "alternating" && (B = A * Math.PI);
|
|
1736
1697
|
for (let C = 0; C < x && M < t; C++) {
|
|
1737
|
-
const $ = x === 1 ? (_ + O) / 2 : _ + C *
|
|
1698
|
+
const $ = x === 1 ? (_ + O) / 2 : _ + C * N, F = this.calculateWaveY($, a, b, w, B), X = $, P = k + F, j = y ? this.random(d, f) : 1, Y = p * j;
|
|
1738
1699
|
let V = 0;
|
|
1739
|
-
|
|
1740
|
-
const K = Y * 1.5 / 2, ct = Y / 2, it =
|
|
1741
|
-
|
|
1700
|
+
c === "tangent" ? V = this.calculateRotation($, a, b, w, B) : c === "random" && (V = this.random(u, h));
|
|
1701
|
+
const K = Y * 1.5 / 2, ct = Y / 2, it = l + K, ot = a - l - K, lt = l + ct, ht = r - l - ct;
|
|
1702
|
+
o.push({
|
|
1742
1703
|
id: M,
|
|
1743
|
-
x: Math.max(it, Math.min(X,
|
|
1704
|
+
x: Math.max(it, Math.min(X, ot)),
|
|
1744
1705
|
y: Math.max(lt, Math.min(P, ht)),
|
|
1745
1706
|
rotation: V,
|
|
1746
1707
|
scale: j,
|
|
@@ -1749,7 +1710,7 @@ class Me {
|
|
|
1749
1710
|
}), M++;
|
|
1750
1711
|
}
|
|
1751
1712
|
}
|
|
1752
|
-
return
|
|
1713
|
+
return o;
|
|
1753
1714
|
}
|
|
1754
1715
|
/**
|
|
1755
1716
|
* Calculate Y position displacement on wave curve
|
|
@@ -1760,9 +1721,9 @@ class Me {
|
|
|
1760
1721
|
* @param phase - Phase offset
|
|
1761
1722
|
* @returns Y displacement from baseline
|
|
1762
1723
|
*/
|
|
1763
|
-
calculateWaveY(t, i, e,
|
|
1724
|
+
calculateWaveY(t, i, e, o, a) {
|
|
1764
1725
|
const r = t / i;
|
|
1765
|
-
return e * Math.sin(
|
|
1726
|
+
return e * Math.sin(o * r * 2 * Math.PI + a);
|
|
1766
1727
|
}
|
|
1767
1728
|
/**
|
|
1768
1729
|
* Calculate rotation based on wave tangent
|
|
@@ -1773,8 +1734,8 @@ class Me {
|
|
|
1773
1734
|
* @param phase - Phase offset
|
|
1774
1735
|
* @returns Rotation angle in degrees
|
|
1775
1736
|
*/
|
|
1776
|
-
calculateRotation(t, i, e,
|
|
1777
|
-
const r = t / i, s = e *
|
|
1737
|
+
calculateRotation(t, i, e, o, a) {
|
|
1738
|
+
const r = t / i, s = e * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + a) / i;
|
|
1778
1739
|
return Math.atan(s) * (180 / Math.PI);
|
|
1779
1740
|
}
|
|
1780
1741
|
/**
|
|
@@ -1803,17 +1764,17 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1803
1764
|
[0, 50]
|
|
1804
1765
|
// left
|
|
1805
1766
|
], Fe = Et[1][0] / xt, ze = Et[2][1] / xt;
|
|
1806
|
-
function Oe(
|
|
1767
|
+
function Oe(n) {
|
|
1807
1768
|
return {
|
|
1808
|
-
colStep: Fe *
|
|
1809
|
-
rowOffset: ze *
|
|
1769
|
+
colStep: Fe * n,
|
|
1770
|
+
rowOffset: ze * n
|
|
1810
1771
|
};
|
|
1811
1772
|
}
|
|
1812
|
-
function De(
|
|
1773
|
+
function De(n, t, i, e, o, a) {
|
|
1813
1774
|
const { colStep: r } = Oe(a);
|
|
1814
1775
|
return {
|
|
1815
|
-
px: e + r *
|
|
1816
|
-
py:
|
|
1776
|
+
px: e + r * n,
|
|
1777
|
+
py: o + a * (t + n / 2)
|
|
1817
1778
|
};
|
|
1818
1779
|
}
|
|
1819
1780
|
const $e = [
|
|
@@ -1824,13 +1785,13 @@ const $e = [
|
|
|
1824
1785
|
[0, -1, 1],
|
|
1825
1786
|
[1, -1, 0]
|
|
1826
1787
|
];
|
|
1827
|
-
function Pe(
|
|
1828
|
-
if (
|
|
1788
|
+
function Pe(n) {
|
|
1789
|
+
if (n === 0) return [[0, 0, 0]];
|
|
1829
1790
|
const t = [];
|
|
1830
|
-
let [i, e,
|
|
1791
|
+
let [i, e, o] = [0, -n, n];
|
|
1831
1792
|
for (const [a, r, s] of $e)
|
|
1832
|
-
for (let
|
|
1833
|
-
t.push([i, e,
|
|
1793
|
+
for (let l = 0; l < n; l++)
|
|
1794
|
+
t.push([i, e, o]), i += a, e += r, o += s;
|
|
1834
1795
|
return t;
|
|
1835
1796
|
}
|
|
1836
1797
|
class _e {
|
|
@@ -1840,30 +1801,30 @@ class _e {
|
|
|
1840
1801
|
this.config = t;
|
|
1841
1802
|
}
|
|
1842
1803
|
generate(t, i, e = {}) {
|
|
1843
|
-
const
|
|
1804
|
+
const o = [], { width: a, height: r } = i, s = a / 2, l = r / 2, c = e.fixedHeight ?? 200, h = {
|
|
1844
1805
|
...Bt,
|
|
1845
1806
|
...this.config.honeycomb
|
|
1846
|
-
}.spacing ?? 0, d =
|
|
1847
|
-
let f = 0,
|
|
1807
|
+
}.spacing ?? 0, d = c + h;
|
|
1808
|
+
let f = 0, y = 0;
|
|
1848
1809
|
for (; f < t; ) {
|
|
1849
|
-
const p = Pe(
|
|
1850
|
-
for (const [g, m,
|
|
1810
|
+
const p = Pe(y);
|
|
1811
|
+
for (const [g, m, b] of p) {
|
|
1851
1812
|
if (f >= t) break;
|
|
1852
|
-
const { px: w, py: v } = De(g, m,
|
|
1853
|
-
|
|
1813
|
+
const { px: w, py: v } = De(g, m, b, s, l, d);
|
|
1814
|
+
o.push({
|
|
1854
1815
|
id: f,
|
|
1855
1816
|
x: w,
|
|
1856
1817
|
y: v,
|
|
1857
1818
|
rotation: 0,
|
|
1858
1819
|
scale: 1,
|
|
1859
|
-
baseSize:
|
|
1820
|
+
baseSize: c,
|
|
1860
1821
|
// Inner rings render above outer rings
|
|
1861
|
-
zIndex: Math.max(1, 100 -
|
|
1822
|
+
zIndex: Math.max(1, 100 - y)
|
|
1862
1823
|
}), f++;
|
|
1863
1824
|
}
|
|
1864
|
-
|
|
1825
|
+
y++;
|
|
1865
1826
|
}
|
|
1866
|
-
return
|
|
1827
|
+
return o;
|
|
1867
1828
|
}
|
|
1868
1829
|
}
|
|
1869
1830
|
class Ue {
|
|
@@ -1900,10 +1861,10 @@ class Ue {
|
|
|
1900
1861
|
* @returns Array of layout objects with position, rotation, scale
|
|
1901
1862
|
*/
|
|
1902
1863
|
generateLayout(t, i, e = {}) {
|
|
1903
|
-
const
|
|
1904
|
-
return
|
|
1864
|
+
const o = this.placementLayout.generate(t, i, e);
|
|
1865
|
+
return o.forEach((a) => {
|
|
1905
1866
|
this.layouts.set(a.id, a);
|
|
1906
|
-
}),
|
|
1867
|
+
}), o;
|
|
1907
1868
|
}
|
|
1908
1869
|
/**
|
|
1909
1870
|
* Get the original layout state for an image
|
|
@@ -1956,8 +1917,8 @@ class Ue {
|
|
|
1956
1917
|
return;
|
|
1957
1918
|
if (typeof e == "number")
|
|
1958
1919
|
return e;
|
|
1959
|
-
const
|
|
1960
|
-
return a === "mobile" ?
|
|
1920
|
+
const o = e, a = this.resolveBreakpoint(t);
|
|
1921
|
+
return a === "mobile" ? o.mobile ?? o.tablet ?? o.screen : a === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
|
|
1961
1922
|
}
|
|
1962
1923
|
/**
|
|
1963
1924
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1967,19 +1928,19 @@ class Ue {
|
|
|
1967
1928
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1968
1929
|
* @returns Calculated sizing result with height
|
|
1969
1930
|
*/
|
|
1970
|
-
calculateAdaptiveSize(t, i, e,
|
|
1971
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1931
|
+
calculateAdaptiveSize(t, i, e, o) {
|
|
1932
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1972
1933
|
if (r !== void 0)
|
|
1973
1934
|
return { height: r };
|
|
1974
|
-
const s = a?.minSize ?? 50,
|
|
1935
|
+
const s = a?.minSize ?? 50, l = a?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * c / i;
|
|
1975
1936
|
let m = Math.sqrt(p / 1.4);
|
|
1976
1937
|
m *= u, m = Math.min(m, e);
|
|
1977
|
-
let
|
|
1978
|
-
if (
|
|
1938
|
+
let b = this.clamp(m, s, l);
|
|
1939
|
+
if (b === s && m < s) {
|
|
1979
1940
|
const w = Math.max(s * 0.05, 20);
|
|
1980
|
-
|
|
1941
|
+
b = Math.max(w, m);
|
|
1981
1942
|
}
|
|
1982
|
-
return this.config.algorithm === "honeycomb" && (
|
|
1943
|
+
return this.config.algorithm === "honeycomb" && (b = Math.min(b, this.honeycombMaxImageHeight(i, t))), { height: b };
|
|
1983
1944
|
}
|
|
1984
1945
|
/**
|
|
1985
1946
|
* Returns the largest image height at which all honeycomb rings fit within the container.
|
|
@@ -1988,10 +1949,10 @@ class Ue {
|
|
|
1988
1949
|
*/
|
|
1989
1950
|
honeycombMaxImageHeight(t, i) {
|
|
1990
1951
|
if (t <= 1) return 1 / 0;
|
|
1991
|
-
let e = 0,
|
|
1992
|
-
for (;
|
|
1993
|
-
e++,
|
|
1994
|
-
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2,
|
|
1952
|
+
let e = 0, o = 1;
|
|
1953
|
+
for (; o < t; )
|
|
1954
|
+
e++, o += 6 * e;
|
|
1955
|
+
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2, l = i.height / 2, c = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (l - a - r * e) / (e + 0.5), d = (s - a - c * r * e) / (c * e + u);
|
|
1995
1956
|
return Math.max(10, Math.min(h, d));
|
|
1996
1957
|
}
|
|
1997
1958
|
/**
|
|
@@ -2001,7 +1962,7 @@ class Ue {
|
|
|
2001
1962
|
return Math.max(i, Math.min(e, t));
|
|
2002
1963
|
}
|
|
2003
1964
|
}
|
|
2004
|
-
var
|
|
1965
|
+
var E = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(E || {});
|
|
2005
1966
|
const Lt = {
|
|
2006
1967
|
// Geometric shapes - uses percentages for responsive sizing
|
|
2007
1968
|
circle: "circle(50%)",
|
|
@@ -2049,96 +2010,96 @@ const Lt = {
|
|
|
2049
2010
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2050
2011
|
}
|
|
2051
2012
|
};
|
|
2052
|
-
function
|
|
2053
|
-
if (
|
|
2054
|
-
return
|
|
2013
|
+
function Ne(n) {
|
|
2014
|
+
if (n)
|
|
2015
|
+
return n in Lt ? Lt[n] : n;
|
|
2055
2016
|
}
|
|
2056
|
-
function
|
|
2057
|
-
const e = He[
|
|
2017
|
+
function ke(n, t, i) {
|
|
2018
|
+
const e = He[n];
|
|
2058
2019
|
if (!e) return "";
|
|
2059
|
-
const
|
|
2060
|
-
if (
|
|
2061
|
-
return `circle(${Math.round(50 *
|
|
2062
|
-
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 *
|
|
2020
|
+
const o = t / e.refHeight;
|
|
2021
|
+
if (n === "circle")
|
|
2022
|
+
return `circle(${Math.round(50 * o * 100) / 100}px)`;
|
|
2023
|
+
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 * o, l = (Math.min(...r) + Math.max(...r)) / 2 * o, c = (Math.max(...a) - Math.min(...a)) * o, u = (i ?? c) / 2, h = t / 2, d = u - s, f = h - l;
|
|
2063
2024
|
return `polygon(${e.points.map(([p, g]) => {
|
|
2064
|
-
const m = Math.round((p *
|
|
2065
|
-
return `${m}px ${
|
|
2025
|
+
const m = Math.round((p * o + d) * 100) / 100, b = Math.round((g * o + f) * 100) / 100;
|
|
2026
|
+
return `${m}px ${b}px`;
|
|
2066
2027
|
}).join(", ")})`;
|
|
2067
2028
|
}
|
|
2068
|
-
function je(
|
|
2069
|
-
return
|
|
2029
|
+
function je(n) {
|
|
2030
|
+
return n in mt;
|
|
2070
2031
|
}
|
|
2071
|
-
function We(
|
|
2072
|
-
return
|
|
2032
|
+
function We(n) {
|
|
2033
|
+
return n ? je(n) ? mt[n] : n : mt.md;
|
|
2073
2034
|
}
|
|
2074
|
-
function Ge(
|
|
2075
|
-
if (!
|
|
2035
|
+
function Ge(n) {
|
|
2036
|
+
if (!n) return "";
|
|
2076
2037
|
const t = [];
|
|
2077
|
-
if (
|
|
2078
|
-
if (typeof
|
|
2079
|
-
t.push(`drop-shadow(${
|
|
2038
|
+
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)
|
|
2039
|
+
if (typeof n.dropShadow == "string")
|
|
2040
|
+
t.push(`drop-shadow(${n.dropShadow})`);
|
|
2080
2041
|
else {
|
|
2081
|
-
const i =
|
|
2042
|
+
const i = n.dropShadow;
|
|
2082
2043
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
2083
2044
|
}
|
|
2084
2045
|
return t.join(" ");
|
|
2085
2046
|
}
|
|
2086
|
-
function tt(
|
|
2087
|
-
if (!
|
|
2047
|
+
function tt(n) {
|
|
2048
|
+
if (!n || n.style === "none" || n.width === 0)
|
|
2088
2049
|
return "none";
|
|
2089
|
-
const t =
|
|
2050
|
+
const t = n.width ?? 0, i = n.style ?? "solid", e = n.color ?? "#000000";
|
|
2090
2051
|
return `${t}px ${i} ${e}`;
|
|
2091
2052
|
}
|
|
2092
|
-
function et(
|
|
2093
|
-
if (!
|
|
2053
|
+
function et(n, t, i) {
|
|
2054
|
+
if (!n) return {};
|
|
2094
2055
|
const e = {};
|
|
2095
|
-
if (
|
|
2096
|
-
const s =
|
|
2097
|
-
|
|
2098
|
-
} else
|
|
2099
|
-
if (
|
|
2100
|
-
const s =
|
|
2101
|
-
e.borderTop = tt(
|
|
2102
|
-
} else
|
|
2103
|
-
|
|
2104
|
-
const r = Ge(
|
|
2105
|
-
if (e.filter = r || "none",
|
|
2106
|
-
const s =
|
|
2107
|
-
e.outline = `${s}px ${
|
|
2108
|
-
}
|
|
2109
|
-
if (
|
|
2056
|
+
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
2057
|
+
const s = n.border?.radius ?? 0;
|
|
2058
|
+
n.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
2059
|
+
} else n.border?.radius !== void 0 && (e.borderRadius = `${n.border.radius}px`);
|
|
2060
|
+
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
2061
|
+
const s = n.border || {}, l = { ...s, ...n.borderTop }, c = { ...s, ...n.borderRight }, u = { ...s, ...n.borderBottom }, h = { ...s, ...n.borderLeft };
|
|
2062
|
+
e.borderTop = tt(l), e.borderRight = tt(c), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
2063
|
+
} else n.border && (e.border = tt(n.border));
|
|
2064
|
+
n.shadow !== void 0 && (e.boxShadow = We(n.shadow));
|
|
2065
|
+
const r = Ge(n.filter);
|
|
2066
|
+
if (e.filter = r || "none", n.opacity !== void 0 && (e.opacity = String(n.opacity)), n.cursor !== void 0 && (e.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
2067
|
+
const s = n.outline.width ?? 0, l = n.outline.style ?? "solid", c = n.outline.color ?? "#000000";
|
|
2068
|
+
e.outline = `${s}px ${l} ${c}`, n.outline.offset !== void 0 && (e.outlineOffset = `${n.outline.offset}px`);
|
|
2069
|
+
}
|
|
2070
|
+
if (n.objectFit !== void 0 && (e.objectFit = n.objectFit), n.aspectRatio !== void 0 && (e.aspectRatio = n.aspectRatio), n.clipPath !== void 0) {
|
|
2110
2071
|
let s;
|
|
2111
|
-
const
|
|
2112
|
-
if (
|
|
2113
|
-
s =
|
|
2072
|
+
const l = typeof n.clipPath == "object" && n.clipPath !== null && "shape" in n.clipPath, c = l ? n.clipPath : void 0;
|
|
2073
|
+
if (c?.mode === "height-relative" && t)
|
|
2074
|
+
s = ke(c.shape, t, i);
|
|
2114
2075
|
else {
|
|
2115
|
-
const u =
|
|
2116
|
-
s =
|
|
2076
|
+
const u = l && c ? c.shape : n.clipPath;
|
|
2077
|
+
s = Ne(u);
|
|
2117
2078
|
}
|
|
2118
2079
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
2119
2080
|
}
|
|
2120
2081
|
return e;
|
|
2121
2082
|
}
|
|
2122
|
-
function qe(
|
|
2123
|
-
t.borderRadius !== void 0 && (
|
|
2083
|
+
function qe(n, t) {
|
|
2084
|
+
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (n.style.clipPath = t.clipPath), t.overflow !== void 0 && (n.style.overflow = t.overflow);
|
|
2124
2085
|
}
|
|
2125
|
-
function ft(
|
|
2126
|
-
const
|
|
2127
|
-
qe(
|
|
2086
|
+
function ft(n, t, i, e) {
|
|
2087
|
+
const o = et(t, i, e);
|
|
2088
|
+
qe(n, o);
|
|
2128
2089
|
}
|
|
2129
|
-
function Pt(
|
|
2130
|
-
return
|
|
2090
|
+
function Pt(n) {
|
|
2091
|
+
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
2131
2092
|
}
|
|
2132
|
-
function st(
|
|
2093
|
+
function st(n, t) {
|
|
2133
2094
|
const i = Pt(t);
|
|
2134
2095
|
i && i.split(" ").forEach((e) => {
|
|
2135
|
-
e.trim() &&
|
|
2096
|
+
e.trim() && n.classList.add(e.trim());
|
|
2136
2097
|
});
|
|
2137
2098
|
}
|
|
2138
|
-
function pt(
|
|
2099
|
+
function pt(n, t) {
|
|
2139
2100
|
const i = Pt(t);
|
|
2140
2101
|
i && i.split(" ").forEach((e) => {
|
|
2141
|
-
e.trim() &&
|
|
2102
|
+
e.trim() && n.classList.remove(e.trim());
|
|
2142
2103
|
});
|
|
2143
2104
|
}
|
|
2144
2105
|
const Mt = {
|
|
@@ -2147,7 +2108,7 @@ const Mt = {
|
|
|
2147
2108
|
};
|
|
2148
2109
|
class Be {
|
|
2149
2110
|
constructor(t, i, e) {
|
|
2150
|
-
this.state =
|
|
2111
|
+
this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.onUnfocusComplete = null, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
2151
2112
|
}
|
|
2152
2113
|
/**
|
|
2153
2114
|
* Set callback to be fired when an unfocus animation fully completes.
|
|
@@ -2165,7 +2126,7 @@ class Be {
|
|
|
2165
2126
|
* Check if any animation is in progress
|
|
2166
2127
|
*/
|
|
2167
2128
|
isAnimating() {
|
|
2168
|
-
return this.state !==
|
|
2129
|
+
return this.state !== E.IDLE && this.state !== E.FOCUSED;
|
|
2169
2130
|
}
|
|
2170
2131
|
/**
|
|
2171
2132
|
* Normalize scalePercent value
|
|
@@ -2178,17 +2139,17 @@ class Be {
|
|
|
2178
2139
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2179
2140
|
*/
|
|
2180
2141
|
calculateFocusDimensions(t, i, e) {
|
|
2181
|
-
const
|
|
2182
|
-
let s = a,
|
|
2183
|
-
const
|
|
2184
|
-
return
|
|
2142
|
+
const o = this.normalizeScalePercent(this.config.scalePercent), a = e.height * o, r = t / i;
|
|
2143
|
+
let s = a, l = s * r;
|
|
2144
|
+
const c = e.width * o;
|
|
2145
|
+
return l > c && (l = c, s = l / r), { width: l, height: s };
|
|
2185
2146
|
}
|
|
2186
2147
|
/**
|
|
2187
2148
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
2188
2149
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2189
2150
|
*/
|
|
2190
2151
|
calculateFocusTransform(t, i) {
|
|
2191
|
-
const e = t.width / 2,
|
|
2152
|
+
const e = t.width / 2, o = t.height / 2, a = e - i.x, r = o - i.y;
|
|
2192
2153
|
return {
|
|
2193
2154
|
x: a,
|
|
2194
2155
|
y: r,
|
|
@@ -2203,8 +2164,8 @@ class Be {
|
|
|
2203
2164
|
buildDimensionZoomTransform(t) {
|
|
2204
2165
|
const i = ["translate(-50%, -50%)"];
|
|
2205
2166
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2206
|
-
const e = t.x ?? 0,
|
|
2207
|
-
i.push(`translate(${e}px, ${
|
|
2167
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
2168
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
2208
2169
|
}
|
|
2209
2170
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2210
2171
|
}
|
|
@@ -2212,13 +2173,13 @@ class Be {
|
|
|
2212
2173
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2213
2174
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2214
2175
|
*/
|
|
2215
|
-
animateWithDimensions(t, i, e,
|
|
2216
|
-
const
|
|
2176
|
+
animateWithDimensions(t, i, e, o, a, r, s, l) {
|
|
2177
|
+
const c = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2217
2178
|
return t.style.transition = "none", t.animate(
|
|
2218
2179
|
[
|
|
2219
2180
|
{
|
|
2220
|
-
transform:
|
|
2221
|
-
width: `${
|
|
2181
|
+
transform: c,
|
|
2182
|
+
width: `${o}px`,
|
|
2222
2183
|
height: `${a}px`
|
|
2223
2184
|
},
|
|
2224
2185
|
{
|
|
@@ -2228,7 +2189,7 @@ class Be {
|
|
|
2228
2189
|
}
|
|
2229
2190
|
],
|
|
2230
2191
|
{
|
|
2231
|
-
duration:
|
|
2192
|
+
duration: l,
|
|
2232
2193
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2233
2194
|
fill: "forwards"
|
|
2234
2195
|
}
|
|
@@ -2259,11 +2220,11 @@ class Be {
|
|
|
2259
2220
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2260
2221
|
*/
|
|
2261
2222
|
startClipPathAnimation(t, i, e) {
|
|
2262
|
-
let
|
|
2263
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2223
|
+
let o = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2224
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (o = { ...o, clipPath: void 0 });
|
|
2264
2225
|
const a = () => {
|
|
2265
|
-
const r = t.offsetHeight, s = t.offsetWidth,
|
|
2266
|
-
|
|
2226
|
+
const r = t.offsetHeight, s = t.offsetWidth, l = et(o, r, s);
|
|
2227
|
+
l.clipPath !== void 0 ? t.style.clipPath = l.clipPath : t.style.clipPath = "unset", l.overflow !== void 0 && (t.style.overflow = l.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
2267
2228
|
};
|
|
2268
2229
|
requestAnimationFrame(a);
|
|
2269
2230
|
}
|
|
@@ -2273,25 +2234,25 @@ class Be {
|
|
|
2273
2234
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2274
2235
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2275
2236
|
*/
|
|
2276
|
-
startFocusAnimation(t, i, e,
|
|
2277
|
-
const r = t.style.zIndex || "", s = t.offsetWidth,
|
|
2237
|
+
startFocusAnimation(t, i, e, o, a) {
|
|
2238
|
+
const r = t.style.zIndex || "", s = t.offsetWidth, l = t.offsetHeight, c = this.calculateFocusDimensions(s, l, i), u = this.calculateFocusTransform(i, e);
|
|
2278
2239
|
this.animationEngine.cancelAllAnimations(t);
|
|
2279
2240
|
const h = this.config.animationDuration ?? 600;
|
|
2280
2241
|
this.applyFocusedStyling(t, Mt.FOCUSING);
|
|
2281
|
-
const d =
|
|
2242
|
+
const d = o ?? {
|
|
2282
2243
|
x: 0,
|
|
2283
2244
|
y: 0,
|
|
2284
2245
|
rotation: e.rotation,
|
|
2285
2246
|
scale: 1
|
|
2286
2247
|
// No scale - using dimensions
|
|
2287
|
-
}, f = a?.width ?? s,
|
|
2248
|
+
}, f = a?.width ?? s, y = a?.height ?? l, p = this.animateWithDimensions(
|
|
2288
2249
|
t,
|
|
2289
2250
|
d,
|
|
2290
2251
|
u,
|
|
2291
2252
|
f,
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2253
|
+
y,
|
|
2254
|
+
c.width,
|
|
2255
|
+
c.height,
|
|
2295
2256
|
h
|
|
2296
2257
|
), g = {
|
|
2297
2258
|
id: `focus-${Date.now()}`,
|
|
@@ -2308,16 +2269,16 @@ class Be {
|
|
|
2308
2269
|
focusTransform: u,
|
|
2309
2270
|
originalZIndex: r,
|
|
2310
2271
|
originalWidth: s,
|
|
2311
|
-
originalHeight:
|
|
2312
|
-
focusWidth:
|
|
2313
|
-
focusHeight:
|
|
2272
|
+
originalHeight: l,
|
|
2273
|
+
focusWidth: c.width,
|
|
2274
|
+
focusHeight: c.height
|
|
2314
2275
|
}, this.startClipPathAnimation(t, g, !0), {
|
|
2315
2276
|
element: t,
|
|
2316
2277
|
originalState: e,
|
|
2317
2278
|
animationHandle: g,
|
|
2318
2279
|
direction: "in",
|
|
2319
2280
|
originalWidth: s,
|
|
2320
|
-
originalHeight:
|
|
2281
|
+
originalHeight: l
|
|
2321
2282
|
};
|
|
2322
2283
|
}
|
|
2323
2284
|
/**
|
|
@@ -2325,11 +2286,11 @@ class Be {
|
|
|
2325
2286
|
* Animates back to original dimensions for consistent behavior
|
|
2326
2287
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2327
2288
|
*/
|
|
2328
|
-
startUnfocusAnimation(t, i, e,
|
|
2289
|
+
startUnfocusAnimation(t, i, e, o) {
|
|
2329
2290
|
t.style.zIndex = String(Mt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2330
2291
|
const a = this.config.animationDuration ?? 600;
|
|
2331
2292
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2332
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s =
|
|
2293
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, l = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, c = {
|
|
2333
2294
|
x: 0,
|
|
2334
2295
|
y: 0,
|
|
2335
2296
|
rotation: i.rotation,
|
|
@@ -2338,9 +2299,9 @@ class Be {
|
|
|
2338
2299
|
}, u = this.focusData?.originalWidth ?? t.offsetWidth, h = this.focusData?.originalHeight ?? t.offsetHeight, d = this.animateWithDimensions(
|
|
2339
2300
|
t,
|
|
2340
2301
|
r,
|
|
2341
|
-
l,
|
|
2342
|
-
s,
|
|
2343
2302
|
c,
|
|
2303
|
+
s,
|
|
2304
|
+
l,
|
|
2344
2305
|
u,
|
|
2345
2306
|
h,
|
|
2346
2307
|
a
|
|
@@ -2349,7 +2310,7 @@ class Be {
|
|
|
2349
2310
|
element: t,
|
|
2350
2311
|
animation: d,
|
|
2351
2312
|
fromState: r,
|
|
2352
|
-
toState:
|
|
2313
|
+
toState: c,
|
|
2353
2314
|
startTime: performance.now(),
|
|
2354
2315
|
duration: a
|
|
2355
2316
|
};
|
|
@@ -2377,10 +2338,10 @@ class Be {
|
|
|
2377
2338
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2378
2339
|
*/
|
|
2379
2340
|
captureMidAnimationState(t) {
|
|
2380
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2381
|
-
return t.style.width = `${
|
|
2382
|
-
transform: { x: r, y: s, rotation:
|
|
2383
|
-
dimensions: { width:
|
|
2341
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), o = t.offsetWidth, a = t.offsetHeight, r = e.e + o * 0.5, s = e.f + a * 0.5, l = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2342
|
+
return t.style.width = `${o}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${l}deg)`, t.style.transition = "none", {
|
|
2343
|
+
transform: { x: r, y: s, rotation: l, scale: 1 },
|
|
2344
|
+
dimensions: { width: o, height: a }
|
|
2384
2345
|
};
|
|
2385
2346
|
}
|
|
2386
2347
|
/**
|
|
@@ -2395,94 +2356,94 @@ class Be {
|
|
|
2395
2356
|
/**
|
|
2396
2357
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2397
2358
|
*/
|
|
2398
|
-
resetElementInstantly(t, i, e,
|
|
2359
|
+
resetElementInstantly(t, i, e, o, a) {
|
|
2399
2360
|
this.animationEngine.cancelAllAnimations(t);
|
|
2400
2361
|
const r = ["translate(-50%, -50%)"];
|
|
2401
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2362
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && a !== void 0 && (t.style.width = `${o}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2402
2363
|
}
|
|
2403
2364
|
/**
|
|
2404
2365
|
* Focus (zoom) an image to center of container
|
|
2405
2366
|
* Implements cross-animation when swapping focus
|
|
2406
2367
|
*/
|
|
2407
2368
|
async focusImage(t, i, e) {
|
|
2408
|
-
if (this.currentFocus === t && this.state ===
|
|
2369
|
+
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2409
2370
|
return this.unfocusImage();
|
|
2410
|
-
if (this.incoming?.element === t && this.state ===
|
|
2371
|
+
if (this.incoming?.element === t && this.state === E.FOCUSING) {
|
|
2411
2372
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2412
2373
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2413
2374
|
t,
|
|
2414
2375
|
this.incoming.originalState,
|
|
2415
2376
|
a,
|
|
2416
2377
|
r
|
|
2417
|
-
), this.incoming = null, this.state =
|
|
2378
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2418
2379
|
return;
|
|
2419
2380
|
}
|
|
2420
|
-
const
|
|
2381
|
+
const o = ++this.focusGeneration;
|
|
2421
2382
|
switch (this.state) {
|
|
2422
|
-
case
|
|
2423
|
-
if (this.state =
|
|
2424
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2383
|
+
case E.IDLE:
|
|
2384
|
+
if (this.state = E.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2385
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2425
2386
|
break;
|
|
2426
|
-
case
|
|
2427
|
-
if (this.state =
|
|
2387
|
+
case E.FOCUSED:
|
|
2388
|
+
if (this.state = E.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2428
2389
|
this.currentFocus,
|
|
2429
2390
|
this.focusData.originalState
|
|
2430
2391
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2431
2392
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2432
2393
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2433
|
-
]), this.focusGeneration !==
|
|
2394
|
+
]), this.focusGeneration !== o)
|
|
2434
2395
|
return;
|
|
2435
2396
|
if (this.outgoing) {
|
|
2436
2397
|
const a = this.outgoing.element;
|
|
2437
2398
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2438
2399
|
}
|
|
2439
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2400
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2440
2401
|
break;
|
|
2441
|
-
case
|
|
2402
|
+
case E.FOCUSING:
|
|
2442
2403
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2443
2404
|
this.incoming.element,
|
|
2444
2405
|
this.incoming.originalState,
|
|
2445
2406
|
this.focusData?.originalZIndex || "",
|
|
2446
2407
|
this.focusData?.originalWidth,
|
|
2447
2408
|
this.focusData?.originalHeight
|
|
2448
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2449
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2409
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2410
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2450
2411
|
break;
|
|
2451
|
-
case
|
|
2452
|
-
if (this.state =
|
|
2412
|
+
case E.UNFOCUSING:
|
|
2413
|
+
if (this.state = E.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2453
2414
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2454
2415
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2455
|
-
]), this.focusGeneration !==
|
|
2416
|
+
]), this.focusGeneration !== o) return;
|
|
2456
2417
|
if (this.outgoing) {
|
|
2457
2418
|
const a = this.outgoing.element;
|
|
2458
2419
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2459
2420
|
}
|
|
2460
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2421
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2461
2422
|
break;
|
|
2462
|
-
case
|
|
2423
|
+
case E.CROSS_ANIMATING:
|
|
2463
2424
|
if (this.incoming?.element === t)
|
|
2464
2425
|
return;
|
|
2465
2426
|
if (this.outgoing?.element === t) {
|
|
2466
2427
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2467
2428
|
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2468
|
-
const { transform: s, dimensions:
|
|
2429
|
+
const { transform: s, dimensions: l } = this.captureMidAnimationState(this.incoming.element);
|
|
2469
2430
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2470
2431
|
this.incoming.element,
|
|
2471
2432
|
this.incoming.originalState,
|
|
2472
2433
|
s,
|
|
2473
|
-
|
|
2434
|
+
l
|
|
2474
2435
|
);
|
|
2475
2436
|
} else
|
|
2476
2437
|
this.outgoing = null;
|
|
2477
2438
|
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2478
2439
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2479
2440
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2480
|
-
]), this.focusGeneration !==
|
|
2441
|
+
]), this.focusGeneration !== o) return;
|
|
2481
2442
|
if (this.outgoing) {
|
|
2482
2443
|
const s = this.outgoing.element;
|
|
2483
2444
|
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2484
2445
|
}
|
|
2485
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2446
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2486
2447
|
return;
|
|
2487
2448
|
}
|
|
2488
2449
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2503,12 +2464,12 @@ class Be {
|
|
|
2503
2464
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2504
2465
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2505
2466
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2506
|
-
]), this.focusGeneration !==
|
|
2467
|
+
]), this.focusGeneration !== o) return;
|
|
2507
2468
|
if (this.outgoing) {
|
|
2508
2469
|
const a = this.outgoing.element;
|
|
2509
2470
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2510
2471
|
}
|
|
2511
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2472
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2512
2473
|
break;
|
|
2513
2474
|
}
|
|
2514
2475
|
}
|
|
@@ -2516,24 +2477,24 @@ class Be {
|
|
|
2516
2477
|
* Unfocus current image, returning it to original position
|
|
2517
2478
|
*/
|
|
2518
2479
|
async unfocusImage() {
|
|
2519
|
-
if (this.state ===
|
|
2480
|
+
if (this.state === E.UNFOCUSING)
|
|
2520
2481
|
return;
|
|
2521
2482
|
const t = ++this.focusGeneration;
|
|
2522
2483
|
if (!this.currentFocus || !this.focusData) {
|
|
2523
|
-
if (this.incoming && this.state ===
|
|
2484
|
+
if (this.incoming && this.state === E.FOCUSING) {
|
|
2524
2485
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2525
2486
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2526
2487
|
this.incoming.element,
|
|
2527
2488
|
this.incoming.originalState,
|
|
2528
2489
|
a,
|
|
2529
2490
|
r
|
|
2530
|
-
), this.incoming = null, this.state =
|
|
2491
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2531
2492
|
const s = this.outgoing.element;
|
|
2532
|
-
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2493
|
+
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(s);
|
|
2533
2494
|
}
|
|
2534
2495
|
return;
|
|
2535
2496
|
}
|
|
2536
|
-
if (this.state ===
|
|
2497
|
+
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2537
2498
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2538
2499
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2539
2500
|
const s = this.startUnfocusAnimation(
|
|
@@ -2546,15 +2507,15 @@ class Be {
|
|
|
2546
2507
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2547
2508
|
this.waitForAnimation(s.animationHandle)
|
|
2548
2509
|
]), this.focusGeneration !== t) return;
|
|
2549
|
-
let
|
|
2550
|
-
this.outgoing && (
|
|
2551
|
-
const
|
|
2552
|
-
this.removeFocusedStyling(
|
|
2510
|
+
let l = null;
|
|
2511
|
+
this.outgoing && (l = this.outgoing.element, this.removeFocusedStyling(l, this.outgoing.originalState.zIndex?.toString() || ""));
|
|
2512
|
+
const c = s.element;
|
|
2513
|
+
this.removeFocusedStyling(c, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, l && this.onUnfocusComplete?.(l), this.onUnfocusComplete?.(c);
|
|
2553
2514
|
return;
|
|
2554
2515
|
}
|
|
2555
|
-
this.state =
|
|
2556
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2557
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2516
|
+
this.state = E.UNFOCUSING;
|
|
2517
|
+
const i = this.currentFocus, e = this.focusData.originalState, o = this.focusData.originalZIndex;
|
|
2518
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(i));
|
|
2558
2519
|
}
|
|
2559
2520
|
/**
|
|
2560
2521
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2572,7 +2533,7 @@ class Be {
|
|
|
2572
2533
|
* Check if an image is currently focused (stable state)
|
|
2573
2534
|
*/
|
|
2574
2535
|
isFocused(t) {
|
|
2575
|
-
return this.currentFocus === t && this.state ===
|
|
2536
|
+
return this.currentFocus === t && this.state === E.FOCUSED;
|
|
2576
2537
|
}
|
|
2577
2538
|
/**
|
|
2578
2539
|
* Check if an image is the target of current focus animation
|
|
@@ -2593,9 +2554,9 @@ class Be {
|
|
|
2593
2554
|
* Used during swipe gestures for visual feedback
|
|
2594
2555
|
*/
|
|
2595
2556
|
setDragOffset(t) {
|
|
2596
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2597
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2598
|
-
|
|
2557
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2558
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2559
|
+
o.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && o.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = o.join(" ");
|
|
2599
2560
|
}
|
|
2600
2561
|
/**
|
|
2601
2562
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2603,13 +2564,13 @@ class Be {
|
|
|
2603
2564
|
* @param duration - Animation duration in ms (default 150)
|
|
2604
2565
|
*/
|
|
2605
2566
|
clearDragOffset(t, i = 150) {
|
|
2606
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2607
|
-
const e = this.currentFocus,
|
|
2608
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2609
|
-
const
|
|
2610
|
-
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform =
|
|
2567
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2568
|
+
const e = this.currentFocus, o = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = o.x ?? 0, s = o.y ?? 0;
|
|
2569
|
+
a.push(`translate(${r}px, ${s}px)`), o.rotation !== void 0 && a.push(`rotate(${o.rotation}deg)`);
|
|
2570
|
+
const l = a.join(" ");
|
|
2571
|
+
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = l, setTimeout(() => {
|
|
2611
2572
|
this.currentFocus === e && (e.style.transition = "none");
|
|
2612
|
-
}, i)) : (e.style.transition = "none", e.style.transform =
|
|
2573
|
+
}, i)) : (e.style.transition = "none", e.style.transform = l);
|
|
2613
2574
|
}
|
|
2614
2575
|
/**
|
|
2615
2576
|
* Reset zoom state (cancels all animations)
|
|
@@ -2633,7 +2594,7 @@ class Be {
|
|
|
2633
2594
|
this.focusData.originalZIndex,
|
|
2634
2595
|
this.focusData.originalWidth,
|
|
2635
2596
|
this.focusData.originalHeight
|
|
2636
|
-
), this.state =
|
|
2597
|
+
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2637
2598
|
}
|
|
2638
2599
|
}
|
|
2639
2600
|
const Xe = 50, Ye = 0.5, Ve = 20, Je = 0.3, Ke = 150, Ze = 30, at = class at {
|
|
@@ -2680,9 +2641,9 @@ const Xe = 50, Ye = 0.5, Ve = 20, Je = 0.3, Ke = 150, Ze = 30, at = class at {
|
|
|
2680
2641
|
}
|
|
2681
2642
|
handleTouchMove(t) {
|
|
2682
2643
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2683
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2684
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2685
|
-
const s = Math.atan2(Math.abs(
|
|
2644
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, o = i.clientY - this.touchState.startY;
|
|
2645
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + o * o) > 10) {
|
|
2646
|
+
const s = Math.atan2(Math.abs(o), Math.abs(e)) * (180 / Math.PI);
|
|
2686
2647
|
this.touchState.isHorizontalSwipe = s <= Ze;
|
|
2687
2648
|
}
|
|
2688
2649
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
@@ -2694,16 +2655,16 @@ const Xe = 50, Ye = 0.5, Ve = 20, Je = 0.3, Ke = 150, Ze = 30, at = class at {
|
|
|
2694
2655
|
handleTouchEnd(t) {
|
|
2695
2656
|
if (!this.touchState) return;
|
|
2696
2657
|
this.recentTouchTimestamp = Date.now();
|
|
2697
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2658
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, o = Math.abs(i) / e, a = Math.abs(i);
|
|
2698
2659
|
let r = !1;
|
|
2699
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Xe ||
|
|
2660
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Xe || o >= Ye && a >= Ve) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2700
2661
|
}
|
|
2701
2662
|
handleTouchCancel(t) {
|
|
2702
2663
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2703
2664
|
}
|
|
2704
2665
|
};
|
|
2705
2666
|
at.TOUCH_CLICK_DELAY = 300;
|
|
2706
|
-
let
|
|
2667
|
+
let yt = at;
|
|
2707
2668
|
class Qe {
|
|
2708
2669
|
constructor(t) {
|
|
2709
2670
|
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)
|
|
@@ -2718,7 +2679,7 @@ class Qe {
|
|
|
2718
2679
|
for (const i of this.sources)
|
|
2719
2680
|
if ("folders" in i)
|
|
2720
2681
|
for (const e of i.folders) {
|
|
2721
|
-
const
|
|
2682
|
+
const o = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, o);
|
|
2722
2683
|
this._discoveredUrls.push(...a);
|
|
2723
2684
|
}
|
|
2724
2685
|
else if ("files" in i) {
|
|
@@ -2764,9 +2725,9 @@ class Qe {
|
|
|
2764
2725
|
// Alternative format
|
|
2765
2726
|
];
|
|
2766
2727
|
for (const e of i) {
|
|
2767
|
-
const
|
|
2768
|
-
if (
|
|
2769
|
-
return
|
|
2728
|
+
const o = t.match(e);
|
|
2729
|
+
if (o && o[1])
|
|
2730
|
+
return o[1];
|
|
2770
2731
|
}
|
|
2771
2732
|
return null;
|
|
2772
2733
|
}
|
|
@@ -2778,15 +2739,15 @@ class Qe {
|
|
|
2778
2739
|
* @returns Promise resolving to array of image URLs
|
|
2779
2740
|
*/
|
|
2780
2741
|
async loadFromFolder(t, i, e = !0) {
|
|
2781
|
-
const
|
|
2782
|
-
if (!
|
|
2742
|
+
const o = this.extractFolderId(t);
|
|
2743
|
+
if (!o)
|
|
2783
2744
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2784
2745
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2785
|
-
return this.loadImagesDirectly(
|
|
2746
|
+
return this.loadImagesDirectly(o, i);
|
|
2786
2747
|
try {
|
|
2787
|
-
return e ? await this.loadImagesRecursively(
|
|
2748
|
+
return e ? await this.loadImagesRecursively(o, i) : await this.loadImagesFromSingleFolder(o, i);
|
|
2788
2749
|
} catch (a) {
|
|
2789
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2750
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(o, i);
|
|
2790
2751
|
}
|
|
2791
2752
|
}
|
|
2792
2753
|
/**
|
|
@@ -2796,13 +2757,13 @@ class Qe {
|
|
|
2796
2757
|
* @returns Promise resolving to array of image URLs
|
|
2797
2758
|
*/
|
|
2798
2759
|
async loadImagesFromSingleFolder(t, i) {
|
|
2799
|
-
const e = [],
|
|
2760
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2800
2761
|
if (!s.ok)
|
|
2801
2762
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2802
|
-
const
|
|
2763
|
+
const c = (await s.json()).files.filter(
|
|
2803
2764
|
(u) => u.mimeType.startsWith("image/") && i.isAllowed(u.name)
|
|
2804
2765
|
);
|
|
2805
|
-
return this.log(`Found ${
|
|
2766
|
+
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2806
2767
|
e.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2807
2768
|
}), e;
|
|
2808
2769
|
}
|
|
@@ -2814,18 +2775,18 @@ class Qe {
|
|
|
2814
2775
|
*/
|
|
2815
2776
|
async loadFiles(t, i) {
|
|
2816
2777
|
const e = [];
|
|
2817
|
-
for (const
|
|
2818
|
-
const a = this.extractFileId(
|
|
2778
|
+
for (const o of t) {
|
|
2779
|
+
const a = this.extractFileId(o);
|
|
2819
2780
|
if (!a) {
|
|
2820
|
-
this.log(`Skipping invalid file URL: ${
|
|
2781
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2821
2782
|
continue;
|
|
2822
2783
|
}
|
|
2823
2784
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2824
2785
|
try {
|
|
2825
2786
|
const r = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(r);
|
|
2826
2787
|
if (s.ok) {
|
|
2827
|
-
const
|
|
2828
|
-
|
|
2788
|
+
const l = await s.json();
|
|
2789
|
+
l.mimeType.startsWith("image/") && i.isAllowed(l.name) ? (e.push(`https://lh3.googleusercontent.com/d/${a}=s1600`), this.log(`Added file: ${l.name}`)) : this.log(`Skipping non-image file: ${l.name} (${l.mimeType})`);
|
|
2829
2790
|
} else
|
|
2830
2791
|
this.log(`Failed to fetch metadata for file ${a}: ${s.status}`);
|
|
2831
2792
|
} catch (r) {
|
|
@@ -2853,9 +2814,9 @@ class Qe {
|
|
|
2853
2814
|
// Generic id parameter
|
|
2854
2815
|
];
|
|
2855
2816
|
for (const e of i) {
|
|
2856
|
-
const
|
|
2857
|
-
if (
|
|
2858
|
-
return
|
|
2817
|
+
const o = t.match(e);
|
|
2818
|
+
if (o && o[1])
|
|
2819
|
+
return o[1];
|
|
2859
2820
|
}
|
|
2860
2821
|
return null;
|
|
2861
2822
|
}
|
|
@@ -2866,15 +2827,15 @@ class Qe {
|
|
|
2866
2827
|
* @returns Promise resolving to array of image URLs
|
|
2867
2828
|
*/
|
|
2868
2829
|
async loadImagesRecursively(t, i) {
|
|
2869
|
-
const e = [],
|
|
2830
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2870
2831
|
if (!s.ok)
|
|
2871
2832
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2872
|
-
const
|
|
2833
|
+
const l = await s.json(), c = l.files.filter(
|
|
2873
2834
|
(h) => h.mimeType.startsWith("image/") && i.isAllowed(h.name)
|
|
2874
|
-
), u =
|
|
2835
|
+
), u = l.files.filter(
|
|
2875
2836
|
(h) => h.mimeType === "application/vnd.google-apps.folder"
|
|
2876
2837
|
);
|
|
2877
|
-
this.log(`Found ${
|
|
2838
|
+
this.log(`Found ${l.files.length} total items in folder ${t}`), l.files.forEach((h) => this.log(` - File: ${h.name} (${h.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((h) => {
|
|
2878
2839
|
e.push(`https://lh3.googleusercontent.com/d/${h.id}=s1600`), this.log(`Added file: ${h.name}`);
|
|
2879
2840
|
});
|
|
2880
2841
|
for (const h of u) {
|
|
@@ -2893,10 +2854,10 @@ class Qe {
|
|
|
2893
2854
|
*/
|
|
2894
2855
|
async loadImagesDirectly(t, i) {
|
|
2895
2856
|
try {
|
|
2896
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2897
|
-
if (!
|
|
2857
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(e, { mode: "cors" });
|
|
2858
|
+
if (!o.ok)
|
|
2898
2859
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2899
|
-
const a = await
|
|
2860
|
+
const a = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2900
2861
|
return [...new Set(s.map((u) => u[1]))].map(
|
|
2901
2862
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2902
2863
|
);
|
|
@@ -2989,13 +2950,13 @@ class ti {
|
|
|
2989
2950
|
if (!Array.isArray(t))
|
|
2990
2951
|
return console.warn("URLs must be an array:", t), [];
|
|
2991
2952
|
const e = [];
|
|
2992
|
-
for (const
|
|
2993
|
-
const a =
|
|
2953
|
+
for (const o of t) {
|
|
2954
|
+
const a = o.split("/").pop() || o;
|
|
2994
2955
|
if (!i.isAllowed(a)) {
|
|
2995
|
-
this.log(`Skipping filtered URL: ${
|
|
2956
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2996
2957
|
continue;
|
|
2997
2958
|
}
|
|
2998
|
-
this.validateUrls ? await this.validateUrl(
|
|
2959
|
+
this.validateUrls ? await this.validateUrl(o) ? e.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : e.push(o);
|
|
2999
2960
|
}
|
|
3000
2961
|
return e;
|
|
3001
2962
|
}
|
|
@@ -3009,16 +2970,16 @@ class ti {
|
|
|
3009
2970
|
async processPath(t, i, e) {
|
|
3010
2971
|
if (!Array.isArray(i))
|
|
3011
2972
|
return console.warn("files must be an array:", i), [];
|
|
3012
|
-
const
|
|
2973
|
+
const o = [];
|
|
3013
2974
|
for (const a of i) {
|
|
3014
2975
|
if (!e.isAllowed(a)) {
|
|
3015
2976
|
this.log(`Skipping filtered file: ${a}`);
|
|
3016
2977
|
continue;
|
|
3017
2978
|
}
|
|
3018
2979
|
const r = this.constructUrl(t, a);
|
|
3019
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2980
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
3020
2981
|
}
|
|
3021
|
-
return
|
|
2982
|
+
return o;
|
|
3022
2983
|
}
|
|
3023
2984
|
/**
|
|
3024
2985
|
* Process a JSON endpoint source
|
|
@@ -3029,17 +2990,17 @@ class ti {
|
|
|
3029
2990
|
*/
|
|
3030
2991
|
async processJson(t, i) {
|
|
3031
2992
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
3032
|
-
const e = new AbortController(),
|
|
2993
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), 1e4);
|
|
3033
2994
|
try {
|
|
3034
2995
|
const a = await fetch(t, { signal: e.signal });
|
|
3035
|
-
if (clearTimeout(
|
|
2996
|
+
if (clearTimeout(o), !a.ok)
|
|
3036
2997
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
3037
2998
|
const r = await a.json();
|
|
3038
2999
|
if (!r || !Array.isArray(r.images))
|
|
3039
3000
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3040
3001
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3041
3002
|
} catch (a) {
|
|
3042
|
-
throw clearTimeout(
|
|
3003
|
+
throw clearTimeout(o), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
3043
3004
|
}
|
|
3044
3005
|
}
|
|
3045
3006
|
/**
|
|
@@ -3061,11 +3022,11 @@ class ti {
|
|
|
3061
3022
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3062
3023
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3063
3024
|
try {
|
|
3064
|
-
const e = new AbortController(),
|
|
3025
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
3065
3026
|
method: "HEAD",
|
|
3066
3027
|
signal: e.signal
|
|
3067
3028
|
});
|
|
3068
|
-
return clearTimeout(
|
|
3029
|
+
return clearTimeout(o), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
3069
3030
|
} catch (e) {
|
|
3070
3031
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3071
3032
|
}
|
|
@@ -3082,8 +3043,8 @@ class ti {
|
|
|
3082
3043
|
return `${e}/${i}`;
|
|
3083
3044
|
if (typeof window > "u")
|
|
3084
3045
|
return `${e}/${i}`;
|
|
3085
|
-
const
|
|
3086
|
-
return `${
|
|
3046
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3047
|
+
return `${o}${r}/${i}`;
|
|
3087
3048
|
}
|
|
3088
3049
|
/**
|
|
3089
3050
|
* Check if URL is absolute (contains protocol)
|
|
@@ -3117,16 +3078,16 @@ class ei {
|
|
|
3117
3078
|
*/
|
|
3118
3079
|
async prepare(t) {
|
|
3119
3080
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3120
|
-
const i = this.loaders.map((e,
|
|
3121
|
-
this.log(`Loader ${
|
|
3081
|
+
const i = this.loaders.map((e, o) => e.prepare(t).then(() => {
|
|
3082
|
+
this.log(`Loader ${o} prepared with ${e.imagesLength()} images`);
|
|
3122
3083
|
}).catch((a) => {
|
|
3123
|
-
console.warn(`Loader ${
|
|
3084
|
+
console.warn(`Loader ${o} failed to prepare:`, a);
|
|
3124
3085
|
}));
|
|
3125
3086
|
await Promise.all(i);
|
|
3126
3087
|
for (const e of this.loaders)
|
|
3127
3088
|
if (e.isPrepared()) {
|
|
3128
|
-
const
|
|
3129
|
-
this._discoveredUrls.push(...
|
|
3089
|
+
const o = e.imageURLs();
|
|
3090
|
+
this._discoveredUrls.push(...o);
|
|
3130
3091
|
}
|
|
3131
3092
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3132
3093
|
}
|
|
@@ -3199,7 +3160,7 @@ class ii {
|
|
|
3199
3160
|
// isAllowedDate(date: Date): boolean
|
|
3200
3161
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
3201
3162
|
}
|
|
3202
|
-
const
|
|
3163
|
+
const oi = `
|
|
3203
3164
|
.fbn-ic-gallery {
|
|
3204
3165
|
position: relative;
|
|
3205
3166
|
width: 100%;
|
|
@@ -3249,20 +3210,20 @@ const ni = `
|
|
|
3249
3210
|
display: none !important;
|
|
3250
3211
|
}
|
|
3251
3212
|
`;
|
|
3252
|
-
function
|
|
3213
|
+
function ni() {
|
|
3253
3214
|
if (typeof document > "u") return;
|
|
3254
|
-
const
|
|
3255
|
-
if (document.getElementById(
|
|
3215
|
+
const n = "fbn-ic-functional-styles";
|
|
3216
|
+
if (document.getElementById(n)) return;
|
|
3256
3217
|
const t = document.createElement("style");
|
|
3257
|
-
t.id =
|
|
3218
|
+
t.id = n, t.textContent = oi, document.head.appendChild(t);
|
|
3258
3219
|
}
|
|
3259
3220
|
let si = class {
|
|
3260
3221
|
constructor(t = {}) {
|
|
3261
|
-
this.fullConfig =
|
|
3222
|
+
this.fullConfig = ne(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 ce(this.fullConfig.animation), this.layoutEngine = new Ue({
|
|
3262
3223
|
layout: this.fullConfig.layout,
|
|
3263
3224
|
image: this.fullConfig.image
|
|
3264
3225
|
}), this.zoomEngine = new Be(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = et(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3265
|
-
const i = this.fullConfig.animation.entry ||
|
|
3226
|
+
const i = this.fullConfig.animation.entry || R.animation.entry;
|
|
3266
3227
|
this.entryAnimationEngine = new ve(
|
|
3267
3228
|
i,
|
|
3268
3229
|
this.fullConfig.layout.algorithm
|
|
@@ -3271,8 +3232,8 @@ let si = class {
|
|
|
3271
3232
|
e && e.type !== "none" ? this.idleAnimationEngine = new we(
|
|
3272
3233
|
e,
|
|
3273
3234
|
i.timing?.duration ?? 600
|
|
3274
|
-
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((
|
|
3275
|
-
this.idleAnimationEngine?.resumeForImage(
|
|
3235
|
+
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((o) => {
|
|
3236
|
+
this.idleAnimationEngine?.resumeForImage(o);
|
|
3276
3237
|
}), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
3277
3238
|
}
|
|
3278
3239
|
/**
|
|
@@ -3290,7 +3251,7 @@ let si = class {
|
|
|
3290
3251
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3291
3252
|
if (!t || t.length === 0)
|
|
3292
3253
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3293
|
-
const e = t.map((
|
|
3254
|
+
const e = t.map((o) => this.createLoaderFromEntry(o, i));
|
|
3294
3255
|
return e.length === 1 ? e[0] : new ei({
|
|
3295
3256
|
loaders: e,
|
|
3296
3257
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -3301,7 +3262,7 @@ let si = class {
|
|
|
3301
3262
|
*/
|
|
3302
3263
|
createLoaderFromEntry(t, i) {
|
|
3303
3264
|
if ("static" in t) {
|
|
3304
|
-
const e = t.static,
|
|
3265
|
+
const e = t.static, o = {
|
|
3305
3266
|
...e,
|
|
3306
3267
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3307
3268
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3309,14 +3270,14 @@ let si = class {
|
|
|
3309
3270
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3310
3271
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3311
3272
|
};
|
|
3312
|
-
return new ti(
|
|
3273
|
+
return new ti(o);
|
|
3313
3274
|
} else if ("googleDrive" in t) {
|
|
3314
|
-
const e = t.googleDrive,
|
|
3275
|
+
const e = t.googleDrive, o = {
|
|
3315
3276
|
...e,
|
|
3316
3277
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3317
3278
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3318
3279
|
};
|
|
3319
|
-
return new Qe(
|
|
3280
|
+
return new Qe(o);
|
|
3320
3281
|
} else
|
|
3321
3282
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3322
3283
|
}
|
|
@@ -3325,24 +3286,24 @@ let si = class {
|
|
|
3325
3286
|
*/
|
|
3326
3287
|
async init() {
|
|
3327
3288
|
try {
|
|
3328
|
-
if (
|
|
3289
|
+
if (ni(), this.containerRef)
|
|
3329
3290
|
this.containerEl = this.containerRef;
|
|
3330
3291
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3331
3292
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3332
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
3293
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new yt(this.containerEl, {
|
|
3333
3294
|
onNext: () => this.navigateToNextImage(),
|
|
3334
3295
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3335
3296
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3336
3297
|
onDragEnd: (t) => {
|
|
3337
3298
|
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ke);
|
|
3338
3299
|
}
|
|
3339
|
-
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3300
|
+
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3340
3301
|
} catch (t) {
|
|
3341
3302
|
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
3342
3303
|
}
|
|
3343
3304
|
}
|
|
3344
3305
|
setupUI() {
|
|
3345
|
-
const t = this.fullConfig.
|
|
3306
|
+
const t = this.fullConfig.ui;
|
|
3346
3307
|
t.showLoadingSpinner && (t.loadingElement ? (this.loadingEl = this.resolveElement(t.loadingElement), this.loadingElAutoCreated = !1) : (this.loadingEl = this.createDefaultLoadingElement(), this.loadingElAutoCreated = !0)), t.errorElement ? (this.errorEl = this.resolveElement(t.errorElement), this.errorElAutoCreated = !1) : (this.errorEl = this.createDefaultErrorElement(), this.errorElAutoCreated = !0), t.showImageCounter && (t.counterElement ? (this.counterEl = this.resolveElement(t.counterElement), this.counterElAutoCreated = !1) : (this.counterEl = this.createDefaultCounterElement(), this.counterElAutoCreated = !0));
|
|
3347
3308
|
}
|
|
3348
3309
|
resolveElement(t) {
|
|
@@ -3365,7 +3326,7 @@ let si = class {
|
|
|
3365
3326
|
return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
|
|
3366
3327
|
}
|
|
3367
3328
|
setupEventListeners() {
|
|
3368
|
-
|
|
3329
|
+
this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
|
|
3369
3330
|
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
3370
3331
|
}), document.addEventListener("click", (t) => {
|
|
3371
3332
|
this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter());
|
|
@@ -3377,7 +3338,7 @@ let si = class {
|
|
|
3377
3338
|
navigateToNextImage() {
|
|
3378
3339
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3379
3340
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3380
|
-
(
|
|
3341
|
+
(o) => o.dataset.imageId === String(t)
|
|
3381
3342
|
);
|
|
3382
3343
|
if (!i) return;
|
|
3383
3344
|
const e = this.imageLayouts[t];
|
|
@@ -3389,7 +3350,7 @@ let si = class {
|
|
|
3389
3350
|
navigateToPreviousImage() {
|
|
3390
3351
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3391
3352
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3392
|
-
(
|
|
3353
|
+
(o) => o.dataset.imageId === String(t)
|
|
3393
3354
|
);
|
|
3394
3355
|
if (!i) return;
|
|
3395
3356
|
const e = this.imageLayouts[t];
|
|
@@ -3405,8 +3366,8 @@ let si = class {
|
|
|
3405
3366
|
}, 500));
|
|
3406
3367
|
}
|
|
3407
3368
|
getImageHeight() {
|
|
3408
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3409
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3369
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, o = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3370
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, o) : t <= i.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
|
|
3410
3371
|
}
|
|
3411
3372
|
/**
|
|
3412
3373
|
* Get container bounds for layout calculations
|
|
@@ -3429,12 +3390,12 @@ let si = class {
|
|
|
3429
3390
|
this.showError("No images found."), this.showLoading(!1);
|
|
3430
3391
|
return;
|
|
3431
3392
|
}
|
|
3432
|
-
const e = this.getContainerBounds(),
|
|
3433
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3393
|
+
const e = this.getContainerBounds(), o = this.getImageHeight(), a = window.innerWidth;
|
|
3394
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3434
3395
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3435
3396
|
e,
|
|
3436
3397
|
t,
|
|
3437
|
-
|
|
3398
|
+
o,
|
|
3438
3399
|
a
|
|
3439
3400
|
);
|
|
3440
3401
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3452,94 +3413,94 @@ let si = class {
|
|
|
3452
3413
|
if (!this.containerEl) return;
|
|
3453
3414
|
const e = this.getContainerBounds();
|
|
3454
3415
|
this.currentImageHeight = i;
|
|
3455
|
-
const
|
|
3416
|
+
const o = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3456
3417
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3457
3418
|
let r = 0;
|
|
3458
|
-
const s = (
|
|
3459
|
-
this.containerEl && (this.containerEl.appendChild(
|
|
3460
|
-
if (
|
|
3419
|
+
const s = (c) => {
|
|
3420
|
+
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
3421
|
+
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)) {
|
|
3461
3422
|
const d = {
|
|
3462
|
-
x: parseFloat(
|
|
3463
|
-
y: parseFloat(
|
|
3423
|
+
x: parseFloat(c.dataset.startX),
|
|
3424
|
+
y: parseFloat(c.dataset.startY)
|
|
3464
3425
|
}, f = {
|
|
3465
|
-
x: parseFloat(
|
|
3466
|
-
y: parseFloat(
|
|
3467
|
-
},
|
|
3426
|
+
x: parseFloat(c.dataset.endX),
|
|
3427
|
+
y: parseFloat(c.dataset.endY)
|
|
3428
|
+
}, y = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), b = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, w = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3468
3429
|
pe({
|
|
3469
|
-
element:
|
|
3430
|
+
element: c,
|
|
3470
3431
|
startPosition: d,
|
|
3471
3432
|
endPosition: f,
|
|
3472
3433
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3473
3434
|
duration: v.duration,
|
|
3474
|
-
imageWidth:
|
|
3435
|
+
imageWidth: y,
|
|
3475
3436
|
imageHeight: p,
|
|
3476
3437
|
rotation: g,
|
|
3477
3438
|
scale: m,
|
|
3478
3439
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3479
|
-
startRotation:
|
|
3440
|
+
startRotation: b,
|
|
3480
3441
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3481
3442
|
startScale: w
|
|
3482
3443
|
});
|
|
3483
3444
|
} else {
|
|
3484
|
-
const d =
|
|
3485
|
-
|
|
3445
|
+
const d = c.dataset.finalTransform || "";
|
|
3446
|
+
c.style.transform = d;
|
|
3486
3447
|
}
|
|
3487
|
-
const h = parseInt(
|
|
3448
|
+
const h = parseInt(c.dataset.imageId || "0");
|
|
3488
3449
|
if (this.fullConfig.config.debug?.enabled && h < 3) {
|
|
3489
|
-
const d =
|
|
3450
|
+
const d = c.dataset.finalTransform || "";
|
|
3490
3451
|
console.log(`Image ${h} final state:`, {
|
|
3491
|
-
left:
|
|
3492
|
-
top:
|
|
3493
|
-
width:
|
|
3494
|
-
height:
|
|
3495
|
-
computedWidth:
|
|
3496
|
-
computedHeight:
|
|
3452
|
+
left: c.style.left,
|
|
3453
|
+
top: c.style.top,
|
|
3454
|
+
width: c.style.width,
|
|
3455
|
+
height: c.style.height,
|
|
3456
|
+
computedWidth: c.offsetWidth,
|
|
3457
|
+
computedHeight: c.offsetHeight,
|
|
3497
3458
|
transform: d,
|
|
3498
3459
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3499
3460
|
});
|
|
3500
3461
|
}
|
|
3501
3462
|
if (this.idleAnimationEngine) {
|
|
3502
3463
|
const d = this.entryAnimationEngine.getTiming().duration;
|
|
3503
|
-
this.idleAnimationEngine.register(
|
|
3464
|
+
this.idleAnimationEngine.register(c, h, this.imageElements.length, d);
|
|
3504
3465
|
}
|
|
3505
3466
|
}), r++);
|
|
3506
|
-
},
|
|
3467
|
+
}, l = () => {
|
|
3507
3468
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3508
3469
|
for (; this.displayQueue.length > 0; ) {
|
|
3509
|
-
const
|
|
3510
|
-
|
|
3470
|
+
const c = this.displayQueue.shift();
|
|
3471
|
+
c && s(c);
|
|
3511
3472
|
}
|
|
3512
3473
|
return;
|
|
3513
3474
|
}
|
|
3514
3475
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3515
|
-
if (
|
|
3476
|
+
if (o !== this.loadGeneration) {
|
|
3516
3477
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3517
3478
|
return;
|
|
3518
3479
|
}
|
|
3519
3480
|
if (this.displayQueue.length > 0) {
|
|
3520
|
-
const
|
|
3521
|
-
|
|
3481
|
+
const c = this.displayQueue.shift();
|
|
3482
|
+
c && s(c);
|
|
3522
3483
|
}
|
|
3523
3484
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3524
3485
|
}, this.fullConfig.animation.queue.interval);
|
|
3525
3486
|
};
|
|
3526
3487
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3527
|
-
const
|
|
3488
|
+
const c = new IntersectionObserver((u) => {
|
|
3528
3489
|
u.forEach((h) => {
|
|
3529
|
-
h.isIntersecting && (
|
|
3490
|
+
h.isIntersecting && (l(), c.disconnect());
|
|
3530
3491
|
});
|
|
3531
3492
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3532
|
-
|
|
3493
|
+
c.observe(this.containerEl);
|
|
3533
3494
|
} else
|
|
3534
|
-
|
|
3535
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((
|
|
3495
|
+
l();
|
|
3496
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), a.forEach((c, u) => {
|
|
3536
3497
|
const h = document.createElement("div");
|
|
3537
3498
|
h.className = "fbn-ic-debug-center", h.style.position = "absolute", h.style.width = "12px", h.style.height = "12px", h.style.borderRadius = "50%", h.style.backgroundColor = "red", h.style.border = "2px solid yellow", h.style.zIndex = "9999", h.style.pointerEvents = "none";
|
|
3538
|
-
const d =
|
|
3499
|
+
const d = c.x, f = c.y;
|
|
3539
3500
|
h.style.left = `${d - 6}px`, h.style.top = `${f - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(h);
|
|
3540
|
-
})), t.forEach((
|
|
3501
|
+
})), t.forEach((c, u) => {
|
|
3541
3502
|
const h = document.createElement("img");
|
|
3542
|
-
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.
|
|
3503
|
+
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3543
3504
|
const d = a[u];
|
|
3544
3505
|
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), st(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3545
3506
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|
|
@@ -3554,29 +3515,29 @@ let si = class {
|
|
|
3554
3515
|
}), h.addEventListener("click", (f) => {
|
|
3555
3516
|
f.stopPropagation(), this.handleImageClick(h, d);
|
|
3556
3517
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3557
|
-
if (
|
|
3518
|
+
if (o !== this.loadGeneration)
|
|
3558
3519
|
return;
|
|
3559
|
-
const f = h.naturalWidth / h.naturalHeight,
|
|
3560
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${
|
|
3561
|
-
const p = { x: d.x, y: d.y }, g = { width:
|
|
3520
|
+
const f = h.naturalWidth / h.naturalHeight, y = i * f;
|
|
3521
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${y}`), h.style.width = `${y}px`, h.cachedRenderedWidth = y, h.aspectRatio = f, ft(h, this.fullConfig.styling?.default, i, y);
|
|
3522
|
+
const p = { x: d.x, y: d.y }, g = { width: y, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3562
3523
|
p,
|
|
3563
3524
|
g,
|
|
3564
3525
|
e,
|
|
3565
3526
|
u,
|
|
3566
3527
|
t.length
|
|
3567
|
-
),
|
|
3528
|
+
), b = this.entryAnimationEngine.calculateStartRotation(d.rotation), w = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3568
3529
|
d.rotation,
|
|
3569
3530
|
d.scale,
|
|
3570
|
-
|
|
3531
|
+
y,
|
|
3571
3532
|
i
|
|
3572
|
-
),
|
|
3533
|
+
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3573
3534
|
m,
|
|
3574
3535
|
p,
|
|
3575
3536
|
d.rotation,
|
|
3576
3537
|
d.scale,
|
|
3577
|
-
b,
|
|
3578
|
-
i,
|
|
3579
3538
|
y,
|
|
3539
|
+
i,
|
|
3540
|
+
b,
|
|
3580
3541
|
w
|
|
3581
3542
|
);
|
|
3582
3543
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
@@ -3585,15 +3546,15 @@ let si = class {
|
|
|
3585
3546
|
left: d.x,
|
|
3586
3547
|
top: d.y,
|
|
3587
3548
|
finalTransform: v,
|
|
3588
|
-
renderedWidth:
|
|
3549
|
+
renderedWidth: y,
|
|
3589
3550
|
renderedHeight: i
|
|
3590
|
-
}), h.style.transform =
|
|
3591
|
-
}, h.onerror = () => r++, h.src =
|
|
3551
|
+
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || b !== d.rotation || w !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(p.x), h.dataset.endY = String(p.y), h.dataset.imageWidth = String(y), h.dataset.imageHeight = String(i), h.dataset.rotation = String(d.rotation), h.dataset.scale = String(d.scale), h.dataset.startRotation = String(b), h.dataset.startScale = String(w)), this.displayQueue.push(h);
|
|
3552
|
+
}, h.onerror = () => r++, h.src = c;
|
|
3592
3553
|
});
|
|
3593
3554
|
}
|
|
3594
3555
|
async handleImageClick(t, i) {
|
|
3595
3556
|
if (!this.containerEl) return;
|
|
3596
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3557
|
+
const e = this.zoomEngine.isFocused(t), o = {
|
|
3597
3558
|
width: this.containerEl.offsetWidth,
|
|
3598
3559
|
height: this.containerEl.offsetHeight
|
|
3599
3560
|
};
|
|
@@ -3602,7 +3563,7 @@ let si = class {
|
|
|
3602
3563
|
else {
|
|
3603
3564
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3604
3565
|
const a = t.dataset.imageId;
|
|
3605
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3566
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3606
3567
|
}
|
|
3607
3568
|
}
|
|
3608
3569
|
/**
|
|
@@ -3612,7 +3573,7 @@ let si = class {
|
|
|
3612
3573
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null), this.loadGeneration++, this.displayQueue = [], this.containerEl && this.containerEl.querySelectorAll(".fbn-ic-image, .fbn-ic-debug-center").forEach((t) => t.remove()), this.imageElements = [], this.imageLayouts = [], this.currentFocusIndex = null, this.hoveredImage = null, this.layoutEngine.reset(), this.zoomEngine.reset(), this.idleAnimationEngine?.stopAll(), this.imagesLoaded = !1;
|
|
3613
3574
|
}
|
|
3614
3575
|
showLoading(t) {
|
|
3615
|
-
!this.fullConfig.
|
|
3576
|
+
!this.fullConfig.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
|
|
3616
3577
|
}
|
|
3617
3578
|
showError(t) {
|
|
3618
3579
|
this.errorEl && (this.errorEl.textContent = t, this.errorEl.classList.remove("fbn-ic-hidden"));
|
|
@@ -3621,7 +3582,7 @@ let si = class {
|
|
|
3621
3582
|
this.errorEl && this.errorEl.classList.add("fbn-ic-hidden");
|
|
3622
3583
|
}
|
|
3623
3584
|
updateCounter(t) {
|
|
3624
|
-
!this.fullConfig.
|
|
3585
|
+
!this.fullConfig.ui.showImageCounter || !this.counterEl || (this.counterEl.textContent = `${t + 1} of ${this.imageElements.length}`, this.counterEl.classList.remove("fbn-ic-hidden"));
|
|
3625
3586
|
}
|
|
3626
3587
|
hideCounter() {
|
|
3627
3588
|
this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
|
|
@@ -3641,27 +3602,27 @@ const ci = Ht({
|
|
|
3641
3602
|
required: !0
|
|
3642
3603
|
}
|
|
3643
3604
|
},
|
|
3644
|
-
setup(
|
|
3605
|
+
setup(n, { expose: t }) {
|
|
3645
3606
|
const i = It(null), e = It(null);
|
|
3646
|
-
function
|
|
3607
|
+
function o() {
|
|
3647
3608
|
if (!i.value) return;
|
|
3648
3609
|
e.value?.destroy();
|
|
3649
3610
|
const a = new si({
|
|
3650
3611
|
container: i.value,
|
|
3651
|
-
...
|
|
3612
|
+
...n.options
|
|
3652
3613
|
});
|
|
3653
3614
|
e.value = a, a.init().catch((r) => {
|
|
3654
3615
|
console.error("ImageCloud init failed:", r);
|
|
3655
3616
|
});
|
|
3656
3617
|
}
|
|
3657
|
-
return
|
|
3658
|
-
|
|
3659
|
-
}),
|
|
3618
|
+
return Nt(() => {
|
|
3619
|
+
o();
|
|
3620
|
+
}), kt(() => {
|
|
3660
3621
|
e.value?.destroy(), e.value = null;
|
|
3661
3622
|
}), jt(
|
|
3662
|
-
() =>
|
|
3623
|
+
() => n.options,
|
|
3663
3624
|
() => {
|
|
3664
|
-
|
|
3625
|
+
o();
|
|
3665
3626
|
},
|
|
3666
3627
|
{ deep: !0 }
|
|
3667
3628
|
), t({ instance: e }), () => Wt("div", {
|