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

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();
+  }, 500);
   const handleClick = (index, _event) => {
     props.onPageClick(index);
   };
@@ -18346,84 +18349,110 @@ 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 [parentDimensions, setParentDimensions] = d$2({
-    width: 0,
-    height: 0
-  });
-  const prevDimensions = A({ width: 0, height: 0 });
+  const elementHeight = useSignal(0);
   const imgStyle = useComputed(() => {
     let result = {};
-    const { width, height } = parentDimensions;
+    const { width, height } = props.parentDimensions;
     if (isLoading.value) {
       result = {
         height: "".concat(height * props.state.value.scale, "px"),
@@ -18457,33 +18486,25 @@ const ImagePage = (props) => {
     console.error("图片加载失败:", error2);
     isLoading.value = false;
   };
-  const updateParentStyle = () => {
-    var _a, _b;
-    const rect = (_b = (_a = imgRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.getBoundingClientRect();
-    if (!rect) return;
-    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 });
-    }
+  const handleHeightChange = (newHeight) => {
+    var _a;
+    elementHeight.value = newHeight;
+    (_a = props.onHeightChange) == null ? void 0 : _a.call(props, props.index, newHeight);
   };
   y$1(() => {
-    updateParentStyle();
-    const observer = new ResizeObserver(() => {
-      requestAnimationFrame(() => {
-        updateParentStyle();
-      });
-    });
-    if (imgRef.current) {
-      if (imgRef.current.parentElement) {
-        observer.observe(imgRef.current.parentElement);
+    if (!imgRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const contentRect = entry.contentRect;
+        const newHeight = contentRect.height;
+        handleHeightChange(newHeight);
       }
-    }
+    });
+    resizeObserver.observe(imgRef.current);
     return () => {
-      observer.disconnect();
+      resizeObserver.disconnect();
     };
-  }, []);
+  }, [props.index]);
   return /* @__PURE__ */ u(
     "div",
     {
@@ -18492,7 +18513,7 @@ const ImagePage = (props) => {
       style: imgStyle.value,
       "data-page-index": props.index,
       children: [
-        props.isShowImage ? /* @__PURE__ */ u(
+        /* @__PURE__ */ u(
           "img",
           {
             className: "image-content",
@@ -18506,7 +18527,7 @@ const ImagePage = (props) => {
             },
             loading: "lazy"
           }
-        ) : /* @__PURE__ */ u(Loading, {}),
+        ),
         isLoading.value && /* @__PURE__ */ u(Loading, {})
       ]
     }
@@ -18517,41 +18538,128 @@ 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;
-      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, '"]')
-        );
-        if (pageElement) {
-          const rect = pageElement.getBoundingClientRect();
-          const distance = Math.abs(rect.top - containerRect.top);
-          if (distance < minDistance) {
-            minDistance = distance;
-            closestPage = index;
-          }
+  const [parentDimensions, setParentDimensions] = d$2({
+    width: 0,
+    height: 0
+  });
+  const prevDimensions = A({ width: 0, height: 0 });
+  const itemPositions = useSignal([]);
+  const estimateHeight = useSignal(0);
+  const phantomHeight = useSignal(0);
+  const startOffset = useSignal(0);
+  const visibleInfo = useSignal({
+    startIndex: 0,
+    // 起始索引
+    count: 1,
+    // 显示数量
+    buffer: 1
+    // 缓冲区域子项个数
+  });
+  const visibleData = useComputed(() => {
+    const start = Math.max(0, visibleInfo.value.startIndex);
+    const end = Math.min(
+      state.value.items.length - 1,
+      visibleInfo.value.startIndex + visibleInfo.value.count + visibleInfo.value.buffer
+    );
+    return state.value.items.slice(start, end + 1);
+  });
+  const preloadImages = () => {
+    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);
+      }
+    });
+  };
+  const initPhantomHeight = () => {
+    var _a;
+    const rect = (_a = contentRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!rect) return;
+    const newHeight = Math.round(rect.height);
+    estimateHeight.value = newHeight;
+    phantomHeight.value = newHeight * state.value.items.length;
+  };
+  const initItemPositions = () => {
+    itemPositions.value = state.value.items.map((_item, index) => {
+      return {
+        index,
+        top: index * estimateHeight.value,
+        bottom: (index + 1) * estimateHeight.value,
+        height: estimateHeight.value
+      };
+    });
+  };
+  const updateParentStyle = () => {
+    var _a;
+    const rect = (_a = contentRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!rect) return;
+    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 });
+    }
+  };
+  const getStartIndex = (scrollTop) => {
+    let start = 0;
+    let end = state.value.items.length - 1;
+    let tempIndex = null;
+    while (start <= end) {
+      const midIndex = parseInt(String((end + start) / 2));
+      const midBottom = itemPositions.value[midIndex].bottom;
+      if (midBottom === scrollTop) {
+        tempIndex = midIndex + 1;
+        return tempIndex;
+      }
+      if (midBottom < scrollTop) {
+        start = midIndex + 1;
+      } else if (midBottom > scrollTop) {
+        if (tempIndex === null || tempIndex > midIndex) {
+          tempIndex = midIndex;
         }
+        end -= 1;
       }
-      return closestPage;
     }
+    return tempIndex;
+  };
+  const getOffsetY = () => {
+    const realStart = visibleInfo.value.startIndex;
+    if (realStart) {
+      return itemPositions.value[realStart].top;
+    }
+    return 0;
+  };
+  const updateVisualSize = (id, curHeight) => {
+    if (curHeight === 0) return;
+    const oldHeight = itemPositions.value[id].height;
+    const dValue = curHeight - oldHeight;
+    if (dValue) {
+      itemPositions.value[id].height = curHeight;
+      itemPositions.value[id].bottom = itemPositions.value[id].bottom + dValue;
+      for (let index = id + 1; index < itemPositions.value.length; index++) {
+        itemPositions.value[index].top = itemPositions.value[index].top + dValue;
+        itemPositions.value[index].bottom = itemPositions.value[index].bottom + dValue;
+      }
+    }
+  };
+  const computeClosestPage = () => {
+    if (!contentRef.current) return;
+    const scrollTop = contentRef.current.scrollTop;
+    const closestPage = getStartIndex(scrollTop);
+    return closestPage;
   };
   const handleScroll = throttle(() => {
     if (contentRef.current) {
       const closestPage = computeClosestPage();
-      if (!isScrolling.value && closestPage !== state.value.currentPage) {
+      if (closestPage === void 0) return;
+      visibleInfo.value.startIndex = closestPage;
+      startOffset.value = getOffsetY();
+      if (closestPage !== state.value.currentPage) {
         controller.updateState({ currentPage: closestPage });
       }
     }
-  }, 200);
+  }, 500);
   const handleImageResize = () => {
     if (contentRef.current) {
       setTimeout(() => {
@@ -18563,75 +18671,19 @@ const FilePreviewImageGroup = (props) => {
     }
   };
   const scrollToPage = (pageIndex) => {
-    if (contentRef.current) {
-      const pageElement = contentRef.current.querySelector(
-        '[data-page-index="'.concat(pageIndex, '"]')
-      );
-      if (pageElement) {
-        pageElement.scrollIntoView({ behavior: "smooth", block: "start" });
-      }
-    }
-  };
-  const preloadImages = () => {
-    const visiblePages = state.value.items.slice(0, 2);
-    visiblePages.forEach((page) => {
-      if (page) {
-        const img = new Image();
-        img.src = "".concat(imgBasePath).concat(page.image_url);
-      }
-    });
-  };
-  let updateIsScrollingTimer;
-  const updateIsScrolling = () => {
     isScrolling.value = true;
-    if (updateIsScrollingTimer) {
-      clearTimeout(updateIsScrollingTimer);
+    visibleInfo.value.startIndex = pageIndex;
+    startOffset.value = getOffsetY();
+    if (contentRef.current) {
+      contentRef.current.scrollTop = startOffset.value;
     }
-    updateIsScrollingTimer = setTimeout(() => {
+    setTimeout(() => {
       isScrolling.value = false;
-    }, 1e3);
-  };
-  const MAX_ATTEMPTS = 30;
-  const STABLE_THRESHOLD = 2;
-  let requestAnimationFrameId;
-  const scrollToPageWhenStable = (pageIndex) => {
-    let lastTop = null;
-    let stableCount = 0;
-    let attempt = 0;
-    const tryScroll = () => {
-      const container = contentRef.current;
-      if (!container) return;
-      const pageElement = container.querySelector(
-        '[data-page-index="'.concat(pageIndex, '"]')
-      );
-      if (!pageElement) return;
-      const rect = pageElement.getBoundingClientRect();
-      if (rect.height > 0) {
-        if (lastTop !== null && Math.abs(rect.top - lastTop) < 1) {
-          stableCount++;
-        } else {
-          stableCount = 0;
-        }
-        lastTop = rect.top;
-        if (stableCount >= STABLE_THRESHOLD) {
-          scrollToPage(pageIndex);
-          updateIsScrolling();
-          return;
-        }
-      }
-      attempt++;
-      if (attempt < MAX_ATTEMPTS) {
-        requestAnimationFrameId = requestAnimationFrame(tryScroll);
-      } else {
-        scrollToPage(pageIndex);
-        updateIsScrolling();
-      }
-    };
-    requestAnimationFrameId = requestAnimationFrame(tryScroll);
+    }, 0);
   };
   const handlePageClick = (pageIndex) => {
     controller.updateState({ currentPage: pageIndex });
-    scrollToPageWhenStable(pageIndex);
+    scrollToPage(pageIndex);
   };
   const handleInput = (e2) => {
     const target = e2.target;
@@ -18662,20 +18714,23 @@ const FilePreviewImageGroup = (props) => {
     scrollToPage(state.value.currentPage);
   };
   y$1(() => {
-    if (contentRef.current) {
-      contentRef.current.addEventListener("scroll", handleScroll);
-    }
     preloadImages();
     props.onInitialization();
-    return () => {
-      var _a;
-      (_a = contentRef.current) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
-      if (updateIsScrollingTimer) {
-        clearTimeout(updateIsScrollingTimer);
-      }
-      if (requestAnimationFrameId) {
-        cancelAnimationFrame(requestAnimationFrameId);
+    initPhantomHeight();
+    initItemPositions();
+    updateParentStyle();
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        updateParentStyle();
+      });
+    });
+    if (contentRef.current) {
+      if (contentRef) {
+        observer.observe(contentRef.current);
       }
+    }
+    return () => {
+      observer.disconnect();
     };
   }, []);
   return /* @__PURE__ */ u("div", { className: "file-preview-image-group", children: [
@@ -18701,36 +18756,43 @@ const FilePreviewImageGroup = (props) => {
         ref: contentRef,
         className: "image-group-main-container",
         onScroll: () => {
-          handleScroll();
+          if (!isScrolling.value) {
+            handleScroll();
+          }
         },
-        children: state.value.items && state.value.items.length > 0 && state.value.items.map((page, index) => {
-          const bufferRange = 1;
-          const startRange = Math.max(
-            0,
-            state.value.currentPage - bufferRange
-          );
-          const endRange = Math.min(
-            state.value.items.length - 1,
-            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));
+        children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              class: "image-group-main-phantom",
+              style: { height: "".concat(phantomHeight.value, "px") }
             }
-          }
-          return /* @__PURE__ */ u(
-            ImagePage,
+          ),
+          /* @__PURE__ */ u(
+            "div",
             {
-              page,
-              index,
-              state,
-              isShowImage: shouldRender || shouldKeepLoaded
-            },
-            index
-          );
-        })
+              className: "image-group-item-container",
+              style: {
+                transform: "translate3d(0,".concat(startOffset.value, "px,0)")
+              },
+              children: visibleData.value && visibleData.value.length > 0 && visibleData.value.map((page) => {
+                return /* @__PURE__ */ u(
+                  ImagePage,
+                  {
+                    page,
+                    index: page.index,
+                    state,
+                    parentDimensions,
+                    onHeightChange: (index, height) => {
+                      updateVisualSize(index, height);
+                    }
+                  },
+                  page.image_url
+                );
+              })
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ u(Teleport, { to: "#custom-controls", children: /* @__PURE__ */ u("div", { className: "image-toolbar-container", children: [