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

package/dist/index.es.js

@@ -18332,7 +18332,7 @@ const ThumbnailPanel = (props) => {
   };
   const throttleUpdateRange = throttle(() => {
     updateVisibleRange();
-  }, 200);
+  }, 500);
   const handleClick = (index, _event) => {
     props.onPageClick(index);
   };
@@ -18449,14 +18449,10 @@ const ThumbnailPanel = (props) => {
 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"),
@@ -18490,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",
     {
@@ -18525,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",
@@ -18539,7 +18527,7 @@ const ImagePage = (props) => {
             },
             loading: "lazy"
           }
-        ) : /* @__PURE__ */ u(Loading, {}),
+        ),
         isLoading.value && /* @__PURE__ */ u(Loading, {})
       ]
     }
@@ -18550,40 +18538,128 @@ const FilePreviewImageGroup = (props) => {
   const state = controller.state;
   const contentRef = A(null);
   const isScrolling = useSignal(false);
-  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(() => {
@@ -18595,76 +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 preloadPages = state.value.items.slice(0, 2);
-    preloadPages.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 });
-    updateIsScrolling();
-    scrollToPageWhenStable(pageIndex);
+    scrollToPage(pageIndex);
   };
   const handleInput = (e2) => {
     const target = e2.target;
@@ -18695,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: [
@@ -18734,33 +18756,43 @@ const FilePreviewImageGroup = (props) => {
         ref: contentRef,
         className: "image-group-main-container",
         onScroll: () => {
-          handleScroll();
-        },
-        children: state.value.items && state.value.items.length > 0 && state.value.items.map((page, index) => {
-          const bufferRange = 3;
-          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;
-          if (!shouldRender) {
-            return null;
+          if (!isScrolling.value) {
+            handleScroll();
           }
-          return /* @__PURE__ */ u(
-            ImagePage,
+        },
+        children: [
+          /* @__PURE__ */ u(
+            "div",
             {
-              page,
-              index,
-              state,
-              isShowImage: true
-            },
-            page.image_url
-          );
-        })
+              class: "image-group-main-phantom",
+              style: { height: "".concat(phantomHeight.value, "px") }
+            }
+          ),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              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: [