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

package/dist/index.es.js

@@ -1170,13 +1170,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);
     }
   };
 };
@@ -18402,15 +18416,17 @@ const ThumbnailPanel = (props) => {
 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 +18436,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 +18461,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);
@@ -18501,7 +18523,12 @@ const FilePreviewImageGroup = (props) => {
       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 +18540,7 @@ const FilePreviewImageGroup = (props) => {
             closestPage = index;
           }
         }
-      });
+      }
       return closestPage;
     }
   };
@@ -18524,7 +18551,7 @@ const FilePreviewImageGroup = (props) => {
         controller.updateState({ currentPage: closestPage });
       }
     }
-  }, 100);
+  }, 200);
   const handleImageResize = () => {
     if (contentRef.current) {
       setTimeout(() => {
@@ -18554,16 +18581,57 @@ const FilePreviewImageGroup = (props) => {
       }
     });
   };
+  let updateIsScrollingTimer;
   const updateIsScrolling = () => {
     isScrolling.value = true;
-    setTimeout(() => {
+    if (updateIsScrollingTimer) {
+      clearTimeout(updateIsScrollingTimer);
+    }
+    updateIsScrollingTimer = 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);
+  };
   const handlePageClick = (pageIndex) => {
     controller.updateState({ currentPage: pageIndex });
-    scrollToPage(pageIndex);
-    updateIsScrolling();
+    scrollToPageWhenStable(pageIndex);
   };
   const handleInput = (e2) => {
     const target = e2.target;
@@ -18602,6 +18670,12 @@ const FilePreviewImageGroup = (props) => {
     return () => {
       var _a;
       (_a = contentRef.current) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
+      if (updateIsScrollingTimer) {
+        clearTimeout(updateIsScrollingTimer);
+      }
+      if (requestAnimationFrameId) {
+        cancelAnimationFrame(requestAnimationFrameId);
+      }
     };
   }, []);
   return /* @__PURE__ */ u("div", { className: "file-preview-image-group", children: [