@ibiz-template-plugin/ibiz-file-previewer 0.0.7 → 0.0.8
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/index.es.js
CHANGED
|
@@ -2,7 +2,7 @@ import './style.css';
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
4
4
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
var n$1, l$3, u$3, t$2, i$2, o$2, r$1, e$2, f$3, c$2, s$3, a$2, p$3 = {}, v$3 = [], y$2 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, d$
|
|
5
|
+
var n$1, l$3, u$3, t$2, i$2, o$2, r$1, e$2, f$3, c$2, s$3, a$2, p$3 = {}, v$3 = [], y$2 = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, d$3 = Array.isArray;
|
|
6
6
|
function w$2(n2, l2) {
|
|
7
7
|
for (var u2 in l2) n2[u2] = l2[u2];
|
|
8
8
|
return n2;
|
|
@@ -55,8 +55,8 @@ function I(n2, l2, u2, t2, i2, o2, r2, e2, f2, c2, s2) {
|
|
|
55
55
|
}
|
|
56
56
|
function P$1(n2, l2, u2, t2, i2) {
|
|
57
57
|
var o2, r2, e2, f2, c2, s2 = u2.length, a2 = s2, h2 = 0;
|
|
58
|
-
for (n2.__k = new Array(i2), o2 = 0; o2 < i2; o2++) null != (r2 = l2[o2]) && "boolean" != typeof r2 && "function" != typeof r2 ? ("string" == typeof r2 || "number" == typeof r2 || "bigint" == typeof r2 || r2.constructor == String ? r2 = n2.__k[o2] = m$1(null, r2, null, null, null) : d$
|
|
59
|
-
if (a2) for (o2 = 0; o2 < s2; o2++) null != (e2 = u2[o2]) && 0 == (2 & e2.__u) && (e2.__e == t2 && (t2 = S(e2)), D(e2, e2));
|
|
58
|
+
for (n2.__k = new Array(i2), o2 = 0; o2 < i2; o2++) null != (r2 = l2[o2]) && "boolean" != typeof r2 && "function" != typeof r2 ? ("string" == typeof r2 || "number" == typeof r2 || "bigint" == typeof r2 || r2.constructor == String ? r2 = n2.__k[o2] = m$1(null, r2, null, null, null) : d$3(r2) ? r2 = n2.__k[o2] = m$1(k$1, { children: r2 }, null, null, null) : void 0 === r2.constructor && r2.__b > 0 ? r2 = n2.__k[o2] = m$1(r2.type, r2.props, r2.key, r2.ref ? r2.ref : null, r2.__v) : n2.__k[o2] = r2, f2 = o2 + h2, r2.__ = n2, r2.__b = n2.__b + 1, e2 = null, -1 != (c2 = r2.__i = L(r2, u2, f2, a2)) && (a2--, (e2 = u2[c2]) && (e2.__u |= 2)), null == e2 || null == e2.__v ? (-1 == c2 && (i2 > s2 ? h2-- : i2 < s2 && h2++), "function" != typeof r2.type && (r2.__u |= 4)) : c2 != f2 && (c2 == f2 - 1 ? h2-- : c2 == f2 + 1 ? h2++ : (c2 > f2 ? h2-- : h2++, r2.__u |= 4))) : n2.__k[o2] = null;
|
|
59
|
+
if (a2) for (o2 = 0; o2 < s2; o2++) null != (e2 = u2[o2]) && 0 == (2 & e2.__u) && (e2.__e == t2 && (t2 = S(e2)), D$1(e2, e2));
|
|
60
60
|
return t2;
|
|
61
61
|
}
|
|
62
62
|
function A$1(n2, l2, u2, t2) {
|
|
@@ -72,7 +72,7 @@ function A$1(n2, l2, u2, t2) {
|
|
|
72
72
|
return l2;
|
|
73
73
|
}
|
|
74
74
|
function H$1(n2, l2) {
|
|
75
|
-
return l2 = l2 || [], null == n2 || "boolean" == typeof n2 || (d$
|
|
75
|
+
return l2 = l2 || [], null == n2 || "boolean" == typeof n2 || (d$3(n2) ? n2.some(function(n3) {
|
|
76
76
|
H$1(n3, l2);
|
|
77
77
|
}) : l2.push(n2)), l2;
|
|
78
78
|
}
|
|
@@ -139,7 +139,7 @@ function O(n2, u2, t2, i2, o2, r2, e2, f2, c2, s2) {
|
|
|
139
139
|
} else do {
|
|
140
140
|
h2.__d = false, P2 && P2(u2), a2 = h2.render(h2.props, h2.state, h2.context), h2.state = h2.__s;
|
|
141
141
|
} while (h2.__d && ++A2 < 25);
|
|
142
|
-
h2.state = h2.__s, null != h2.getChildContext && (i2 = w$2(w$2({}, i2), h2.getChildContext())), S2 && !p2 && null != h2.getSnapshotBeforeUpdate && (_2 = h2.getSnapshotBeforeUpdate(v2, y2)), L2 = a2, null != a2 && a2.type === k$1 && null == a2.key && (L2 = V$1(a2.props.children)), f2 = I(n2, d$
|
|
142
|
+
h2.state = h2.__s, null != h2.getChildContext && (i2 = w$2(w$2({}, i2), h2.getChildContext())), S2 && !p2 && null != h2.getSnapshotBeforeUpdate && (_2 = h2.getSnapshotBeforeUpdate(v2, y2)), L2 = a2, null != a2 && a2.type === k$1 && null == a2.key && (L2 = V$1(a2.props.children)), f2 = I(n2, d$3(L2) ? L2 : [L2], u2, t2, i2, o2, r2, e2, f2, c2, s2), h2.base = u2.__e, u2.__u &= -161, h2.__h.length && e2.push(h2), m2 && (h2.__E = h2.__ = null);
|
|
143
143
|
} catch (n3) {
|
|
144
144
|
if (u2.__v = null, c2 || null != r2) if (n3.then) {
|
|
145
145
|
for (u2.__u |= c2 ? 160 : 128; f2 && 8 == f2.nodeType && f2.nextSibling; ) f2 = f2.nextSibling;
|
|
@@ -151,7 +151,7 @@ function O(n2, u2, t2, i2, o2, r2, e2, f2, c2, s2) {
|
|
|
151
151
|
else u2.__e = t2.__e, u2.__k = t2.__k, n3.then || z$1(u2);
|
|
152
152
|
l$3.__e(n3, u2, t2);
|
|
153
153
|
}
|
|
154
|
-
else null == r2 && u2.__v == t2.__v ? (u2.__k = t2.__k, u2.__e = t2.__e) : f2 = u2.__e = q$
|
|
154
|
+
else null == r2 && u2.__v == t2.__v ? (u2.__k = t2.__k, u2.__e = t2.__e) : f2 = u2.__e = q$2(t2.__e, u2, t2, i2, o2, r2, e2, c2, s2);
|
|
155
155
|
return (a2 = l$3.diffed) && a2(u2), 128 & u2.__u ? void 0 : f2;
|
|
156
156
|
}
|
|
157
157
|
function z$1(n2) {
|
|
@@ -170,9 +170,9 @@ function N$1(n2, u2, t2) {
|
|
|
170
170
|
});
|
|
171
171
|
}
|
|
172
172
|
function V$1(n2) {
|
|
173
|
-
return "object" != typeof n2 || null == n2 || n2.__b && n2.__b > 0 ? n2 : d$
|
|
173
|
+
return "object" != typeof n2 || null == n2 || n2.__b && n2.__b > 0 ? n2 : d$3(n2) ? n2.map(V$1) : w$2({}, n2);
|
|
174
174
|
}
|
|
175
|
-
function q$
|
|
175
|
+
function q$2(u2, t2, i2, o2, r2, e2, f2, c2, s2) {
|
|
176
176
|
var a2, h2, v2, y2, w2, _2, m2, b2 = i2.props || p$3, k2 = t2.props, x2 = t2.type;
|
|
177
177
|
if ("svg" == x2 ? r2 = "http://www.w3.org/2000/svg" : "math" == x2 ? r2 = "http://www.w3.org/1998/Math/MathML" : r2 || (r2 = "http://www.w3.org/1999/xhtml"), null != e2) {
|
|
178
178
|
for (a2 = 0; a2 < e2.length; a2++) if ((w2 = e2[a2]) && "setAttribute" in w2 == !!x2 && (x2 ? w2.localName == x2 : 3 == w2.nodeType)) {
|
|
@@ -195,7 +195,7 @@ function q$1(u2, t2, i2, o2, r2, e2, f2, c2, s2) {
|
|
|
195
195
|
}
|
|
196
196
|
for (a2 in k2) w2 = k2[a2], "children" == a2 ? y2 = w2 : "dangerouslySetInnerHTML" == a2 ? h2 = w2 : "value" == a2 ? _2 = w2 : "checked" == a2 ? m2 = w2 : c2 && "function" != typeof w2 || b2[a2] === w2 || j$2(u2, a2, w2, b2[a2], r2);
|
|
197
197
|
if (h2) c2 || v2 && (h2.__html == v2.__html || h2.__html == u2.innerHTML) || (u2.innerHTML = h2.__html), t2.__k = [];
|
|
198
|
-
else if (v2 && (u2.innerHTML = ""), I("template" == t2.type ? u2.content : u2, d$
|
|
198
|
+
else if (v2 && (u2.innerHTML = ""), I("template" == t2.type ? u2.content : u2, d$3(y2) ? y2 : [y2], t2, i2, o2, "foreignObject" == x2 ? "http://www.w3.org/1999/xhtml" : r2, e2, f2, e2 ? e2[0] : i2.__k && S(i2, 0), c2, s2), null != e2) for (a2 = e2.length; a2--; ) g$2(e2[a2]);
|
|
199
199
|
c2 || (a2 = "value", "progress" == x2 && null == _2 ? u2.removeAttribute("value") : null != _2 && (_2 !== u2[a2] || "progress" == x2 && !_2 || "option" == x2 && _2 != b2[a2]) && j$2(u2, a2, _2, b2[a2], r2), a2 = "checked", null != m2 && m2 != u2[a2] && j$2(u2, a2, m2, b2[a2], r2));
|
|
200
200
|
}
|
|
201
201
|
return u2;
|
|
@@ -210,7 +210,7 @@ function B$2(n2, u2, t2) {
|
|
|
210
210
|
l$3.__e(n3, t2);
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
|
-
function D(n2, u2, t2) {
|
|
213
|
+
function D$1(n2, u2, t2) {
|
|
214
214
|
var i2, o2;
|
|
215
215
|
if (l$3.unmount && l$3.unmount(n2), (i2 = n2.ref) && (i2.current && i2.current != n2.__e || B$2(i2, null, u2)), null != (i2 = n2.__c)) {
|
|
216
216
|
if (i2.componentWillUnmount) try {
|
|
@@ -220,7 +220,7 @@ function D(n2, u2, t2) {
|
|
|
220
220
|
}
|
|
221
221
|
i2.base = i2.__P = null;
|
|
222
222
|
}
|
|
223
|
-
if (i2 = n2.__k) for (o2 = 0; o2 < i2.length; o2++) i2[o2] && D(i2[o2], u2, t2 || "function" != typeof n2.type);
|
|
223
|
+
if (i2 = n2.__k) for (o2 = 0; o2 < i2.length; o2++) i2[o2] && D$1(i2[o2], u2, t2 || "function" != typeof n2.type);
|
|
224
224
|
t2 || g$2(n2.__e), n2.__c = n2.__ = n2.__e = void 0;
|
|
225
225
|
}
|
|
226
226
|
function E$2(n2, l2, u2) {
|
|
@@ -253,6 +253,43 @@ function p$2(n2, t2) {
|
|
|
253
253
|
var u2 = r.__H || (r.__H = { __: [], __h: [] });
|
|
254
254
|
return n2 >= u2.__.length && u2.__.push({}), u2.__[n2];
|
|
255
255
|
}
|
|
256
|
+
function d$2(n2) {
|
|
257
|
+
return o$1 = 1, h$1(D, n2);
|
|
258
|
+
}
|
|
259
|
+
function h$1(n2, u2, i2) {
|
|
260
|
+
var o2 = p$2(t$1++, 2);
|
|
261
|
+
if (o2.t = n2, !o2.__c && (o2.__ = [i2 ? i2(u2) : D(void 0, u2), function(n3) {
|
|
262
|
+
var t2 = o2.__N ? o2.__N[0] : o2.__[0], r2 = o2.t(t2, n3);
|
|
263
|
+
t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
|
|
264
|
+
}], o2.__c = r, !r.__f)) {
|
|
265
|
+
var f2 = function(n3, t2, r2) {
|
|
266
|
+
if (!o2.__c.__H) return true;
|
|
267
|
+
var u3 = o2.__c.__H.__.filter(function(n4) {
|
|
268
|
+
return !!n4.__c;
|
|
269
|
+
});
|
|
270
|
+
if (u3.every(function(n4) {
|
|
271
|
+
return !n4.__N;
|
|
272
|
+
})) return !c2 || c2.call(this, n3, t2, r2);
|
|
273
|
+
var i3 = o2.__c.props !== n3;
|
|
274
|
+
return u3.forEach(function(n4) {
|
|
275
|
+
if (n4.__N) {
|
|
276
|
+
var t3 = n4.__[0];
|
|
277
|
+
n4.__ = n4.__N, n4.__N = void 0, t3 !== n4.__[0] && (i3 = true);
|
|
278
|
+
}
|
|
279
|
+
}), c2 && c2.call(this, n3, t2, r2) || i3;
|
|
280
|
+
};
|
|
281
|
+
r.__f = true;
|
|
282
|
+
var c2 = r.shouldComponentUpdate, e2 = r.componentWillUpdate;
|
|
283
|
+
r.componentWillUpdate = function(n3, t2, r2) {
|
|
284
|
+
if (this.__e) {
|
|
285
|
+
var u3 = c2;
|
|
286
|
+
c2 = void 0, f2(n3, t2, r2), c2 = u3;
|
|
287
|
+
}
|
|
288
|
+
e2 && e2.call(this, n3, t2, r2);
|
|
289
|
+
}, r.shouldComponentUpdate = f2;
|
|
290
|
+
}
|
|
291
|
+
return o2.__N || o2.__;
|
|
292
|
+
}
|
|
256
293
|
function y$1(n2, u2) {
|
|
257
294
|
var i2 = p$2(t$1++, 3);
|
|
258
295
|
!c$1.__s && C(i2.__H, u2) && (i2.__ = n2, i2.u = u2, r.__H.__h.push(i2));
|
|
@@ -266,6 +303,11 @@ function T$1(n2, r2) {
|
|
|
266
303
|
var u2 = p$2(t$1++, 7);
|
|
267
304
|
return C(u2.__H, r2) && (u2.__ = n2(), u2.__H = r2, u2.__h = n2), u2.__;
|
|
268
305
|
}
|
|
306
|
+
function q$1(n2, t2) {
|
|
307
|
+
return o$1 = 8, T$1(function() {
|
|
308
|
+
return n2;
|
|
309
|
+
}, t2);
|
|
310
|
+
}
|
|
269
311
|
function j$1() {
|
|
270
312
|
for (var n2; n2 = f$2.shift(); ) if (n2.__P && n2.__H) try {
|
|
271
313
|
n2.__H.__h.forEach(z), n2.__H.__h.forEach(B$1), n2.__H.__h = [];
|
|
@@ -332,6 +374,9 @@ function C(n2, t2) {
|
|
|
332
374
|
return t3 !== n2[r2];
|
|
333
375
|
});
|
|
334
376
|
}
|
|
377
|
+
function D(n2, t2) {
|
|
378
|
+
return "function" == typeof t2 ? t2(n2) : t2;
|
|
379
|
+
}
|
|
335
380
|
var i = Symbol.for("preact-signals");
|
|
336
381
|
function t() {
|
|
337
382
|
if (!(s$1 > 1)) {
|
|
@@ -18244,8 +18289,35 @@ const FilePreviewUnkown = (props) => {
|
|
|
18244
18289
|
"类型预览"
|
|
18245
18290
|
] }) });
|
|
18246
18291
|
};
|
|
18292
|
+
const Loading = ({ size = 24 }) => {
|
|
18293
|
+
return /* @__PURE__ */ u("div", { className: "loading-mask", children: /* @__PURE__ */ u("div", { className: "loading-spinner", children: /* @__PURE__ */ u(LoaddingSvg, { size }) }) });
|
|
18294
|
+
};
|
|
18247
18295
|
const ThumbnailPanel = (props) => {
|
|
18248
18296
|
const contentRef = A(null);
|
|
18297
|
+
const [loadStates, setLoadStates] = d$2({});
|
|
18298
|
+
const ITEM_HEIGHT = 188;
|
|
18299
|
+
const BUFFER_COUNT = 1;
|
|
18300
|
+
const [cachedImages, setCachedImages] = d$2(/* @__PURE__ */ new Set());
|
|
18301
|
+
const [visibleRange, setVisibleRange] = d$2({ start: 0, end: 0 });
|
|
18302
|
+
const calculateVisibleRange = q$1(() => {
|
|
18303
|
+
if (!contentRef.current) return { start: 0, end: 0 };
|
|
18304
|
+
const container = contentRef.current;
|
|
18305
|
+
const scrollTop = container.scrollTop;
|
|
18306
|
+
const containerHeight = container.clientHeight;
|
|
18307
|
+
const start = Math.max(
|
|
18308
|
+
0,
|
|
18309
|
+
Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_COUNT
|
|
18310
|
+
);
|
|
18311
|
+
const visibleCount = Math.ceil(containerHeight / ITEM_HEIGHT);
|
|
18312
|
+
const end = Math.min(
|
|
18313
|
+
props.pages.length,
|
|
18314
|
+
start + visibleCount + BUFFER_COUNT
|
|
18315
|
+
);
|
|
18316
|
+
return { start, end };
|
|
18317
|
+
}, [props.pages.length]);
|
|
18318
|
+
const updateVisibleRange = q$1(() => {
|
|
18319
|
+
setVisibleRange(calculateVisibleRange());
|
|
18320
|
+
}, [calculateVisibleRange]);
|
|
18249
18321
|
const handleClick = (index, _event) => {
|
|
18250
18322
|
props.onPageClick(index);
|
|
18251
18323
|
};
|
|
@@ -18262,12 +18334,42 @@ const ThumbnailPanel = (props) => {
|
|
|
18262
18334
|
}
|
|
18263
18335
|
}
|
|
18264
18336
|
};
|
|
18337
|
+
const handleImageLoad = (index) => {
|
|
18338
|
+
setLoadStates((prevState) => ({
|
|
18339
|
+
...prevState,
|
|
18340
|
+
[index]: true
|
|
18341
|
+
}));
|
|
18342
|
+
setCachedImages((prev) => new Set(prev).add(index));
|
|
18343
|
+
};
|
|
18344
|
+
const handleImageError = (index, error2) => {
|
|
18345
|
+
setLoadStates((prevState) => ({
|
|
18346
|
+
...prevState,
|
|
18347
|
+
[index]: true
|
|
18348
|
+
}));
|
|
18349
|
+
console.error("图片加载失败:", error2);
|
|
18350
|
+
};
|
|
18351
|
+
const getLoadState = (pageIndex) => {
|
|
18352
|
+
return loadStates[pageIndex] || false;
|
|
18353
|
+
};
|
|
18354
|
+
y$1(() => {
|
|
18355
|
+
const container = contentRef.current;
|
|
18356
|
+
if (container) {
|
|
18357
|
+
updateVisibleRange();
|
|
18358
|
+
container.addEventListener("scroll", updateVisibleRange);
|
|
18359
|
+
return () => {
|
|
18360
|
+
container.removeEventListener("scroll", updateVisibleRange);
|
|
18361
|
+
};
|
|
18362
|
+
}
|
|
18363
|
+
}, [updateVisibleRange]);
|
|
18265
18364
|
y$1(() => {
|
|
18266
18365
|
scrollToCurrentThumbnail();
|
|
18267
18366
|
}, [props.currentPage]);
|
|
18268
18367
|
return /* @__PURE__ */ u("div", { className: "thumbnail-panel", children: [
|
|
18269
18368
|
/* @__PURE__ */ u("div", { className: "thumbnail-panel-header", children: /* @__PURE__ */ u("h3", { children: "缩略图" }) }),
|
|
18270
18369
|
/* @__PURE__ */ u("div", { className: "thumbnail-panel-content", ref: contentRef, children: props.pages && props.pages.length > 0 && props.pages.map((page, index) => {
|
|
18370
|
+
const isLoaded = getLoadState(index);
|
|
18371
|
+
const isCached = cachedImages.has(index);
|
|
18372
|
+
const isVisible = visibleRange.start <= index && index <= visibleRange.end;
|
|
18271
18373
|
return /* @__PURE__ */ u(
|
|
18272
18374
|
"div",
|
|
18273
18375
|
{
|
|
@@ -18276,13 +18378,19 @@ const ThumbnailPanel = (props) => {
|
|
|
18276
18378
|
handleClick(index);
|
|
18277
18379
|
},
|
|
18278
18380
|
children: [
|
|
18279
|
-
/* @__PURE__ */ u(
|
|
18381
|
+
!isLoaded && /* @__PURE__ */ u(Loading, {}),
|
|
18382
|
+
(isVisible || isCached) && /* @__PURE__ */ u(
|
|
18280
18383
|
"img",
|
|
18281
18384
|
{
|
|
18282
18385
|
src: "".concat(imgBasePath).concat(page.image_url),
|
|
18283
18386
|
alt: page.description,
|
|
18284
18387
|
className: "thumbnail-image",
|
|
18285
|
-
|
|
18388
|
+
onLoad: () => {
|
|
18389
|
+
handleImageLoad(index);
|
|
18390
|
+
},
|
|
18391
|
+
onError: (error2) => {
|
|
18392
|
+
handleImageError(index, error2);
|
|
18393
|
+
}
|
|
18286
18394
|
}
|
|
18287
18395
|
),
|
|
18288
18396
|
/* @__PURE__ */ u("div", { className: "thumbnail-page-number", children: index + 1 })
|
|
@@ -18301,22 +18409,30 @@ const ImagePage = (props) => {
|
|
|
18301
18409
|
height: 0
|
|
18302
18410
|
});
|
|
18303
18411
|
const imgStyle = useComputed(() => {
|
|
18304
|
-
|
|
18305
|
-
|
|
18306
|
-
|
|
18307
|
-
|
|
18308
|
-
|
|
18309
|
-
|
|
18310
|
-
width: "".concat(parentStyle.value.width * props.state.value.scale, "px")
|
|
18311
|
-
});
|
|
18312
|
-
} else if (props.state.value.mode === ImageMode.PAGE) {
|
|
18313
|
-
Object.assign(result, {
|
|
18314
|
-
height: "".concat(parentStyle.value.height * props.state.value.scale, "px")
|
|
18315
|
-
});
|
|
18412
|
+
let result = {};
|
|
18413
|
+
if (isLoading.value) {
|
|
18414
|
+
result = {
|
|
18415
|
+
height: "".concat(parentStyle.value.height, "px"),
|
|
18416
|
+
flexShrink: 0
|
|
18417
|
+
};
|
|
18316
18418
|
} else {
|
|
18317
|
-
|
|
18318
|
-
|
|
18319
|
-
|
|
18419
|
+
result = {
|
|
18420
|
+
transform: "rotate(".concat(props.state.value.rotateMap[props.index] || 0, "deg)"),
|
|
18421
|
+
transition: "transform .3s"
|
|
18422
|
+
};
|
|
18423
|
+
if (props.state.value.mode === ImageMode.WIDTH) {
|
|
18424
|
+
Object.assign(result, {
|
|
18425
|
+
width: "".concat(parentStyle.value.width * props.state.value.scale, "px")
|
|
18426
|
+
});
|
|
18427
|
+
} else if (props.state.value.mode === ImageMode.PAGE) {
|
|
18428
|
+
Object.assign(result, {
|
|
18429
|
+
height: "".concat(parentStyle.value.height * props.state.value.scale, "px")
|
|
18430
|
+
});
|
|
18431
|
+
} else {
|
|
18432
|
+
Object.assign(result, {
|
|
18433
|
+
width: "".concat(contentWidth * props.state.value.scale, "px")
|
|
18434
|
+
});
|
|
18435
|
+
}
|
|
18320
18436
|
}
|
|
18321
18437
|
return result;
|
|
18322
18438
|
});
|
|
@@ -18336,13 +18452,28 @@ const ImagePage = (props) => {
|
|
|
18336
18452
|
width: rect.width
|
|
18337
18453
|
};
|
|
18338
18454
|
};
|
|
18455
|
+
const emitImageStyle = () => {
|
|
18456
|
+
if (!imgRef.current) {
|
|
18457
|
+
return;
|
|
18458
|
+
}
|
|
18459
|
+
const rect = imgRef.current.getBoundingClientRect();
|
|
18460
|
+
if (!rect) return;
|
|
18461
|
+
if (rect.height) {
|
|
18462
|
+
props.onSizeChange(rect.height);
|
|
18463
|
+
}
|
|
18464
|
+
};
|
|
18339
18465
|
y$1(() => {
|
|
18340
|
-
var _a;
|
|
18341
18466
|
updateParentStyle();
|
|
18342
18467
|
const observer = new ResizeObserver(updateParentStyle);
|
|
18343
|
-
|
|
18344
|
-
|
|
18468
|
+
const imgObserver = new ResizeObserver(emitImageStyle);
|
|
18469
|
+
if (imgRef.current) {
|
|
18470
|
+
imgObserver.observe(imgRef.current);
|
|
18471
|
+
if (imgRef.current.parentElement) {
|
|
18472
|
+
observer.observe(imgRef.current.parentElement);
|
|
18473
|
+
}
|
|
18474
|
+
}
|
|
18345
18475
|
return () => {
|
|
18476
|
+
imgObserver.disconnect();
|
|
18346
18477
|
observer.disconnect();
|
|
18347
18478
|
};
|
|
18348
18479
|
}, []);
|
|
@@ -18379,6 +18510,8 @@ const FilePreviewImageGroup = (props) => {
|
|
|
18379
18510
|
const state = controller.state;
|
|
18380
18511
|
const contentRef = A(null);
|
|
18381
18512
|
const isScrolling = useSignal(false);
|
|
18513
|
+
const [loadedPages, setLoadedPages] = d$2(/* @__PURE__ */ new Set());
|
|
18514
|
+
const imgContainerHeight = useSignal(0);
|
|
18382
18515
|
const handleScroll = throttle(() => {
|
|
18383
18516
|
if (contentRef.current) {
|
|
18384
18517
|
const containerRect = contentRef.current.getBoundingClientRect();
|
|
@@ -18457,13 +18590,15 @@ const FilePreviewImageGroup = (props) => {
|
|
|
18457
18590
|
controller.switchMode(value);
|
|
18458
18591
|
};
|
|
18459
18592
|
y$1(() => {
|
|
18460
|
-
|
|
18461
|
-
|
|
18593
|
+
if (contentRef.current) {
|
|
18594
|
+
imgContainerHeight.value = contentRef.current.clientHeight;
|
|
18595
|
+
contentRef.current.addEventListener("scroll", handleScroll);
|
|
18596
|
+
}
|
|
18462
18597
|
preloadImages();
|
|
18463
18598
|
props.onInitialization();
|
|
18464
18599
|
return () => {
|
|
18465
|
-
var
|
|
18466
|
-
(
|
|
18600
|
+
var _a;
|
|
18601
|
+
(_a = contentRef.current) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
|
|
18467
18602
|
};
|
|
18468
18603
|
}, []);
|
|
18469
18604
|
return /* @__PURE__ */ u("div", { className: "file-preview-image-group", children: [
|
|
@@ -18471,7 +18606,9 @@ const FilePreviewImageGroup = (props) => {
|
|
|
18471
18606
|
"div",
|
|
18472
18607
|
{
|
|
18473
18608
|
className: "image-group-left-container",
|
|
18474
|
-
style: {
|
|
18609
|
+
style: {
|
|
18610
|
+
visibility: state.value.showThumbnailPanel ? "visible" : "hidden"
|
|
18611
|
+
},
|
|
18475
18612
|
children: /* @__PURE__ */ u(
|
|
18476
18613
|
ThumbnailPanel,
|
|
18477
18614
|
{
|
|
@@ -18493,14 +18630,46 @@ const FilePreviewImageGroup = (props) => {
|
|
|
18493
18630
|
handleScroll();
|
|
18494
18631
|
},
|
|
18495
18632
|
children: state.value.items && state.value.items.length > 0 && state.value.items.map((page, index) => {
|
|
18496
|
-
|
|
18633
|
+
const bufferRange = 1;
|
|
18634
|
+
const startRange = Math.max(
|
|
18635
|
+
0,
|
|
18636
|
+
state.value.currentPage - bufferRange
|
|
18637
|
+
);
|
|
18638
|
+
const endRange = Math.min(
|
|
18639
|
+
state.value.items.length - 1,
|
|
18640
|
+
state.value.currentPage + bufferRange
|
|
18641
|
+
);
|
|
18642
|
+
const shouldRender = index >= startRange && index <= endRange;
|
|
18643
|
+
const shouldKeepLoaded = loadedPages.has(index);
|
|
18644
|
+
if (shouldRender) {
|
|
18645
|
+
if (!loadedPages.has(index)) {
|
|
18646
|
+
setLoadedPages((prev) => new Set(prev).add(index));
|
|
18647
|
+
}
|
|
18648
|
+
}
|
|
18649
|
+
return shouldRender || shouldKeepLoaded ? /* @__PURE__ */ u(
|
|
18497
18650
|
ImagePage,
|
|
18498
18651
|
{
|
|
18499
18652
|
page,
|
|
18500
18653
|
index,
|
|
18501
|
-
state
|
|
18654
|
+
state,
|
|
18655
|
+
onSizeChange: (height) => {
|
|
18656
|
+
imgContainerHeight.value = height;
|
|
18657
|
+
}
|
|
18502
18658
|
},
|
|
18503
18659
|
index
|
|
18660
|
+
) : (
|
|
18661
|
+
// 渲染占位元素,保持布局结构
|
|
18662
|
+
/* @__PURE__ */ u(
|
|
18663
|
+
"div",
|
|
18664
|
+
{
|
|
18665
|
+
"data-page-index": index,
|
|
18666
|
+
style: {
|
|
18667
|
+
height: "".concat(imgContainerHeight, "px"),
|
|
18668
|
+
flexShrink: 0
|
|
18669
|
+
}
|
|
18670
|
+
},
|
|
18671
|
+
index
|
|
18672
|
+
)
|
|
18504
18673
|
);
|
|
18505
18674
|
})
|
|
18506
18675
|
}
|
|
@@ -18634,9 +18803,6 @@ const FilePreviewImageGroup = (props) => {
|
|
|
18634
18803
|
] }) })
|
|
18635
18804
|
] });
|
|
18636
18805
|
};
|
|
18637
|
-
const Loading = ({ size = 24 }) => {
|
|
18638
|
-
return /* @__PURE__ */ u("div", { className: "loading-mask", children: /* @__PURE__ */ u("div", { className: "loading-spinner", children: /* @__PURE__ */ u(LoaddingSvg, { size }) }) });
|
|
18639
|
-
};
|
|
18640
18806
|
const FilePreviewShell = (props) => {
|
|
18641
18807
|
y$1(() => {
|
|
18642
18808
|
document.addEventListener("click", handleClickOutside, true);
|