@ibiz-template-plugin/ibiz-file-previewer 0.0.12 → 0.0.13

package/dist/index.es.js

@@ -151,7 +151,7 @@ function O(n2, u2, t2, i2, o2, r2, e2, f2, c2, s2) {
     else u2.__e = t2.__e, u2.__k = t2.__k, n3.then || z$1(u2);
     l$3.__e(n3, u2, t2);
   }
-  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);
+  else null == r2 && u2.__v == t2.__v ? (u2.__k = t2.__k, u2.__e = t2.__e) : f2 = u2.__e = q$1(t2.__e, u2, t2, i2, o2, r2, e2, c2, s2);
   return (a2 = l$3.diffed) && a2(u2), 128 & u2.__u ? void 0 : f2;
 }
 function z$1(n2) {
@@ -172,7 +172,7 @@ function N$1(n2, u2, t2) {
 function V$1(n2) {
   return "object" != typeof n2 || null == n2 || n2.__b && n2.__b > 0 ? n2 : d$3(n2) ? n2.map(V$1) : w$2({}, n2);
 }
-function q$2(u2, t2, i2, o2, r2, e2, f2, c2, s2) {
+function q$1(u2, t2, i2, o2, r2, e2, f2, c2, s2) {
   var a2, h2, v2, y2, w2, _2, m2, b2 = i2.props || p$3, k2 = t2.props, x2 = t2.type;
   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) {
     for (a2 = 0; a2 < e2.length; a2++) if ((w2 = e2[a2]) && "setAttribute" in w2 == !!x2 && (x2 ? w2.localName == x2 : 3 == w2.nodeType)) {
@@ -303,11 +303,6 @@ function T$1(n2, r2) {
   var u2 = p$2(t$1++, 7);
   return C(u2.__H, r2) && (u2.__ = n2(), u2.__H = r2, u2.__h = n2), u2.__;
 }
-function q$1(n2, t2) {
-  return o$1 = 8, T$1(function() {
-    return n2;
-  }, t2);
-}
 function j$1() {
   for (var n2; n2 = f$2.shift(); ) if (n2.__P && n2.__H) try {
     n2.__H.__h.forEach(z), n2.__H.__h.forEach(B$1), n2.__H.__h = [];
@@ -18309,27 +18304,35 @@ const ThumbnailPanel = (props) => {
   const [loadStates, setLoadStates] = d$2({});
   const ITEM_HEIGHT = 188;
   const BUFFER_COUNT = 1;
-  const [cachedImages, setCachedImages] = d$2(/* @__PURE__ */ new Set());
+  const phantomHeight = props.pages.length * ITEM_HEIGHT;
   const [visibleRange, setVisibleRange] = d$2({ start: 0, end: 0 });
-  const calculateVisibleRange = q$1(() => {
+  const [itemContainerOffsetY, setItemContainerOffsetY] = d$2(8);
+  const calculateVisibleRange = (mode = "UI") => {
     if (!contentRef.current) return { start: 0, end: 0 };
     const container = contentRef.current;
     const scrollTop = container.scrollTop;
     const containerHeight = container.clientHeight;
-    const start = Math.max(
-      0,
-      Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_COUNT
-    );
+    let start = 0;
+    if (mode === "UI") {
+      start = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_COUNT);
+    } else {
+      start = Math.max(0, props.currentPage - BUFFER_COUNT);
+    }
     const visibleCount = Math.ceil(containerHeight / ITEM_HEIGHT);
     const end = Math.min(
       props.pages.length,
       start + visibleCount + BUFFER_COUNT
     );
     return { start, end };
-  }, [props.pages.length]);
-  const updateVisibleRange = q$1(() => {
-    setVisibleRange(calculateVisibleRange());
-  }, [calculateVisibleRange]);
+  };
+  const updateVisibleRange = (mode) => {
+    const range = calculateVisibleRange(mode);
+    setItemContainerOffsetY(range.start * ITEM_HEIGHT + 8);
+    setVisibleRange(range);
+  };
+  const throttleUpdateRange = throttle(() => {
+    updateVisibleRange();
+  }, 200);
   const handleClick = (index, _event) => {
     props.onPageClick(index);
   };
@@ -18346,71 +18349,101 @@ const ThumbnailPanel = (props) => {
       }
     }
   };
-  const handleImageLoad = (index) => {
+  const handleImageLoad = (page) => {
     setLoadStates((prevState) => ({
       ...prevState,
-      [index]: true
+      [page.image_url]: true
     }));
-    setCachedImages((prev) => new Set(prev).add(index));
   };
-  const handleImageError = (index, error2) => {
+  const handleImageError = (page, error2) => {
     setLoadStates((prevState) => ({
       ...prevState,
-      [index]: true
+      [page.image_url]: true
     }));
-    console.error("图片加载失败:", error2);
+    console.error("路径为".concat(page.image_url, "的图片加载失败，"), error2);
   };
-  const getLoadState = (pageIndex) => {
-    return loadStates[pageIndex] || false;
+  const getLoadState = (imageUrl) => {
+    return loadStates[imageUrl] || false;
   };
   y$1(() => {
     const container = contentRef.current;
     if (container) {
       updateVisibleRange();
-      container.addEventListener("scroll", updateVisibleRange);
+      container.addEventListener("scroll", throttleUpdateRange);
       return () => {
-        container.removeEventListener("scroll", updateVisibleRange);
+        container.removeEventListener("scroll", throttleUpdateRange);
       };
     }
-  }, [updateVisibleRange]);
+  });
   y$1(() => {
-    scrollToCurrentThumbnail();
+    var _a;
+    const activeThumbnail = (_a = contentRef.current) == null ? void 0 : _a.querySelector(
+      ".thumbnail-item.active"
+    );
+    if (activeThumbnail) {
+      scrollToCurrentThumbnail();
+    } else {
+      updateVisibleRange("DATA");
+      setTimeout(() => {
+        scrollToCurrentThumbnail();
+      }, 0);
+    }
   }, [props.currentPage]);
   return /* @__PURE__ */ u("div", { className: "thumbnail-panel", children: [
     /* @__PURE__ */ u("div", { className: "thumbnail-panel-header", children: /* @__PURE__ */ u("h3", { children: "缩略图" }) }),
-    /* @__PURE__ */ u("div", { className: "thumbnail-panel-content", ref: contentRef, children: props.pages && props.pages.length > 0 && props.pages.map((page, index) => {
-      const isLoaded = getLoadState(index);
-      const isCached = cachedImages.has(index);
-      const isVisible = visibleRange.start <= index && index <= visibleRange.end;
-      return /* @__PURE__ */ u(
+    /* @__PURE__ */ u("div", { className: "thumbnail-panel-content", ref: contentRef, children: [
+      /* @__PURE__ */ u(
         "div",
         {
-          className: "thumbnail-item ".concat(page.index === props.currentPage ? "active" : ""),
-          onClick: (event) => {
-            handleClick(index);
+          class: "thumbnail-panel-phantom",
+          style: { height: "".concat(phantomHeight, "px") }
+        }
+      ),
+      /* @__PURE__ */ u(
+        "div",
+        {
+          className: "thumbnail-item-container",
+          style: {
+            transform: "translate3d(0,".concat(itemContainerOffsetY, "px,0)")
           },
-          children: [
-            !isLoaded && /* @__PURE__ */ u(Loading, {}),
-            (isVisible || isCached) && /* @__PURE__ */ u(
-              "img",
+          children: props.pages && props.pages.length > 0 && props.pages.map((page, index) => {
+            const isVisible = visibleRange.start <= index && index <= visibleRange.end;
+            if (!isVisible) {
+              return null;
+            }
+            const isLoaded = getLoadState(page.image_url);
+            return /* @__PURE__ */ u(
+              "div",
               {
-                src: "".concat(imgBasePath).concat(page.image_url),
-                alt: page.description,
-                className: "thumbnail-image",
-                onLoad: () => {
-                  handleImageLoad(index);
+                className: "thumbnail-item ".concat(page.index === props.currentPage ? "active" : ""),
+                onClick: (event) => {
+                  handleClick(index);
                 },
-                onError: (error2) => {
-                  handleImageError(index, error2);
-                }
-              }
-            ),
-            /* @__PURE__ */ u("div", { className: "thumbnail-page-number", children: index + 1 })
-          ]
-        },
-        index
-      );
-    }) })
+                children: [
+                  !isLoaded && /* @__PURE__ */ u(Loading, {}),
+                  /* @__PURE__ */ u(
+                    "img",
+                    {
+                      src: "".concat(imgBasePath).concat(page.image_url),
+                      alt: page.description,
+                      className: "thumbnail-image",
+                      onLoad: () => {
+                        handleImageLoad(page);
+                      },
+                      onError: (error2) => {
+                        handleImageError(page, error2);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ u("div", { className: "thumbnail-page-number", children: index + 1 })
+                ]
+              },
+              page.image_url
+            );
+          })
+        }
+      )
+    ] })
   ] });
 };
 const ImagePage = (props) => {
@@ -18517,7 +18550,6 @@ const FilePreviewImageGroup = (props) => {
   const state = controller.state;
   const contentRef = A(null);
   const isScrolling = useSignal(false);
-  const [loadedPages, setLoadedPages] = d$2(/* @__PURE__ */ new Set());
   const computeClosestPage = () => {
     if (contentRef.current) {
       const containerRect = contentRef.current.getBoundingClientRect();
@@ -18573,8 +18605,8 @@ const FilePreviewImageGroup = (props) => {
     }
   };
   const preloadImages = () => {
-    const visiblePages = state.value.items.slice(0, 2);
-    visiblePages.forEach((page) => {
+    const preloadPages = state.value.items.slice(0, 2);
+    preloadPages.forEach((page) => {
       if (page) {
         const img = new Image();
         img.src = "".concat(imgBasePath).concat(page.image_url);
@@ -18631,6 +18663,7 @@ const FilePreviewImageGroup = (props) => {
   };
   const handlePageClick = (pageIndex) => {
     controller.updateState({ currentPage: pageIndex });
+    updateIsScrolling();
     scrollToPageWhenStable(pageIndex);
   };
   const handleInput = (e2) => {
@@ -18704,7 +18737,7 @@ const FilePreviewImageGroup = (props) => {
           handleScroll();
         },
         children: state.value.items && state.value.items.length > 0 && state.value.items.map((page, index) => {
-          const bufferRange = 1;
+          const bufferRange = 3;
           const startRange = Math.max(
             0,
             state.value.currentPage - bufferRange
@@ -18714,11 +18747,8 @@ const FilePreviewImageGroup = (props) => {
             state.value.currentPage + bufferRange
           );
           const shouldRender = index >= startRange && index <= endRange;
-          const shouldKeepLoaded = loadedPages.has(index);
-          if (shouldRender) {
-            if (!loadedPages.has(index)) {
-              setLoadedPages((prev) => new Set(prev).add(index));
-            }
+          if (!shouldRender) {
+            return null;
           }
           return /* @__PURE__ */ u(
             ImagePage,
@@ -18726,9 +18756,9 @@ const FilePreviewImageGroup = (props) => {
               page,
               index,
               state,
-              isShowImage: shouldRender || shouldKeepLoaded
+              isShowImage: true
             },
-            index
+            page.image_url
           );
         })
       }