@ibiz-template-plugin/ibiz-file-previewer 0.0.11 → 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 = [];
@@ -1170,13 +1165,27 @@ const fileNameToFileType = (fileName) => {
   return fileType;
 };
 const throttle = (func, wait) => {
-  let timeout = null;
+  let timeoutId = null;
+  let lastCallTime = 0;
   return (...args) => {
-    if (!timeout) {
-      timeout = setTimeout(() => {
-        func(...args);
-        timeout = null;
-      }, wait);
+    const now = Date.now();
+    const remaining = wait - (now - lastCallTime);
+    if (remaining <= 0) {
+      lastCallTime = now;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      func.apply(void 0, args);
+    } else {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => {
+        lastCallTime = Date.now();
+        timeoutId = null;
+        func.apply(void 0, args);
+      }, remaining);
     }
   };
 };
@@ -18295,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);
   };
@@ -18332,85 +18349,117 @@ 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) => {
   const isLoading = useSignal(true);
   const imgRef = A(null);
-  const parentStyle = useSignal({
+  const [parentDimensions, setParentDimensions] = d$2({
     width: 0,
     height: 0
   });
+  const prevDimensions = A({ width: 0, height: 0 });
   const imgStyle = useComputed(() => {
     let result = {};
+    const { width, height } = parentDimensions;
     if (isLoading.value) {
       result = {
-        height: "".concat(parentStyle.value.height * props.state.value.scale, "px"),
+        height: "".concat(height * props.state.value.scale, "px"),
         flexShrink: 0
       };
     } else {
@@ -18420,11 +18469,11 @@ const ImagePage = (props) => {
       };
       if (props.state.value.mode === ImageMode.WIDTH) {
         Object.assign(result, {
-          width: "".concat((parentStyle.value.width - 24 - 6) * props.state.value.scale, "px")
+          width: "".concat((width - 24 - 6) * props.state.value.scale, "px")
         });
       } else if (props.state.value.mode === ImageMode.PAGE) {
         Object.assign(result, {
-          height: "".concat(parentStyle.value.height * props.state.value.scale, "px")
+          height: "".concat(height * props.state.value.scale, "px")
         });
       } else {
         Object.assign(result, {
@@ -18445,14 +18494,20 @@ const ImagePage = (props) => {
     var _a, _b;
     const rect = (_b = (_a = imgRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.getBoundingClientRect();
     if (!rect) return;
-    parentStyle.value = {
-      height: rect.height,
-      width: rect.width
-    };
+    const newWidth = Math.round(rect.width);
+    const newHeight = Math.round(rect.height);
+    if (prevDimensions.current.width !== newWidth || prevDimensions.current.height !== newHeight) {
+      prevDimensions.current = { width: newWidth, height: newHeight };
+      setParentDimensions({ width: newWidth, height: newHeight });
+    }
   };
   y$1(() => {
     updateParentStyle();
-    const observer = new ResizeObserver(updateParentStyle);
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        updateParentStyle();
+      });
+    });
     if (imgRef.current) {
       if (imgRef.current.parentElement) {
         observer.observe(imgRef.current.parentElement);
@@ -18495,13 +18550,17 @@ 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();
       let closestPage = state.value.currentPage;
       let minDistance = Infinity;
-      state.value.items.forEach((_2, index) => {
+      const checkRangeStart = Math.max(0, closestPage - 200);
+      const checkRangeEnd = Math.min(
+        state.value.items.length - 1,
+        closestPage + 200
+      );
+      for (let index = checkRangeStart; index <= checkRangeEnd; index++) {
         const pageElement = contentRef.current.querySelector(
           '[data-page-index="'.concat(index, '"]')
         );
@@ -18513,7 +18572,7 @@ const FilePreviewImageGroup = (props) => {
             closestPage = index;
           }
         }
-      });
+      }
       return closestPage;
     }
   };
@@ -18524,7 +18583,7 @@ const FilePreviewImageGroup = (props) => {
         controller.updateState({ currentPage: closestPage });
       }
     }
-  }, 100);
+  }, 200);
   const handleImageResize = () => {
     if (contentRef.current) {
       setTimeout(() => {
@@ -18546,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);
@@ -18604,6 +18663,7 @@ const FilePreviewImageGroup = (props) => {
   };
   const handlePageClick = (pageIndex) => {
     controller.updateState({ currentPage: pageIndex });
+    updateIsScrolling();
     scrollToPageWhenStable(pageIndex);
   };
   const handleInput = (e2) => {
@@ -18677,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
@@ -18687,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,
@@ -18699,9 +18756,9 @@ const FilePreviewImageGroup = (props) => {
               page,
               index,
               state,
-              isShowImage: shouldRender || shouldKeepLoaded
+              isShowImage: true
             },
-            index
+            page.image_url
           );
         })
       }