@files-preview-app/preview-file 1.2.7 → 1.2.8

package/dist/react.cjs

@@ -466,7 +466,8 @@ function createElement(tag, attrs, ...children) {
 }
 var ICON_ZOOM_IN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`;
 var ICON_ZOOM_OUT = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`;
-var ICON_FIT_PAGE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`;
+var ICON_FIT_PAGE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><line x1="8" y1="12" x2="16" y2="12"></line><polyline points="11 9 8 12 11 15"></polyline><polyline points="13 9 16 12 13 15"></polyline></svg>`;
+var ICON_FIT_WIDTH = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="12" x2="22" y2="12"></line><polyline points="5 9 2 12 5 15"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="5" x2="2" y2="19"></line><line x1="22" y1="5" x2="22" y2="19"></line></svg>`;
 var ICON_ROTATE_CW = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>`;
 var ICON_ROTATE_CCW = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>`;
 var ICON_DOWNLOAD = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`;
@@ -486,6 +487,7 @@ var ICON_MAP = {
   "zoom-in": ICON_ZOOM_IN,
   "zoom-out": ICON_ZOOM_OUT,
   "fit-page": ICON_FIT_PAGE,
+  "fit-width": ICON_FIT_WIDTH,
   "fit-slide": ICON_FIT_PAGE,
   "rotate-cw": ICON_ROTATE_CW,
   "rotate-ccw": ICON_ROTATE_CCW,
@@ -1432,6 +1434,7 @@ var PdfPlugin = class {
     let currentPage = 1;
     let zoomScale = 1;
     let rotation = 0;
+    let fitMode = "width";
     let currentRenderTask = null;
     const renderPage = async (pageNum) => {
       if (currentRenderTask) {
@@ -1451,11 +1454,16 @@ var PdfPlugin = class {
       const containerWidth = container.clientWidth || 900;
       const containerHeight = container.clientHeight || 700;
       const unscaledVp = page.getViewport({ scale: 1, rotation });
-      const availWidth = Math.max(100, containerWidth - 48);
-      const availHeight = Math.max(100, containerHeight - 88);
+      const availWidth = Math.max(280, containerWidth - 48);
+      const availHeight = Math.max(280, containerHeight - 88);
       const scaleW = availWidth / unscaledVp.width;
       const scaleH = availHeight / unscaledVp.height;
-      const fitScale = Math.min(scaleW, scaleH);
+      let fitScale;
+      if (fitMode === "page") {
+        fitScale = Math.max(0.5, Math.min(scaleW, scaleH));
+      } else {
+        fitScale = Math.max(0.65, Math.min(1.15, scaleW));
+      }
       const effectiveScale = (fitScale > 0 ? fitScale : 1) * zoomScale;
       const pixelRatio = window.devicePixelRatio || 1;
       const viewport = page.getViewport({ scale: effectiveScale, rotation });
@@ -1524,6 +1532,7 @@ var PdfPlugin = class {
         renderPage(currentPage);
       },
       fitToPage: () => {
+        fitMode = fitMode === "width" ? "page" : "width";
         zoomScale = 1;
         rotation = 0;
         renderPage(currentPage);
@@ -2077,8 +2086,53 @@ var DocxPlugin = class {
         }
       }
     }
-    const sections = wrapper.querySelectorAll("section.docx");
-    const cards = wrapper.querySelectorAll(".fp-docx-page-card");
+    let sections = Array.from(wrapper.querySelectorAll("section.docx"));
+    const cards = Array.from(wrapper.querySelectorAll(".fp-docx-page-card"));
+    if (sections.length === 1 && cards.length === 0) {
+      const singleSec = sections[0];
+      const pageH = 1056;
+      const secH = singleSec.offsetHeight || singleSec.scrollHeight;
+      if (secH > pageH * 1.25) {
+        const children = Array.from(singleSec.children);
+        if (children.length > 1) {
+          const parent = singleSec.parentElement || wrapper;
+          const newSections = [singleSec];
+          singleSec.innerHTML = "";
+          singleSec.style.minHeight = `${pageH}px`;
+          singleSec.style.maxHeight = `${pageH}px`;
+          singleSec.style.overflow = "hidden";
+          singleSec.style.boxSizing = "border-box";
+          let curSec = singleSec;
+          let curH = 0;
+          const maxH = pageH - 96;
+          for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            curSec.appendChild(child);
+            const chH = child.offsetHeight || 28;
+            curH += chH;
+            if (curH >= maxH && i < children.length - 1) {
+              const nextSec = document.createElement("section");
+              nextSec.className = singleSec.className;
+              nextSec.style.cssText = singleSec.style.cssText;
+              nextSec.style.width = singleSec.style.width || "816px";
+              nextSec.style.minHeight = `${pageH}px`;
+              nextSec.style.maxHeight = `${pageH}px`;
+              nextSec.style.overflow = "hidden";
+              nextSec.style.boxSizing = "border-box";
+              nextSec.style.backgroundColor = "#ffffff";
+              nextSec.style.boxShadow = "0 4px 24px rgba(0, 0, 0, 0.08)";
+              nextSec.style.borderRadius = "4px";
+              nextSec.style.marginBottom = "24px";
+              parent.appendChild(nextSec);
+              newSections.push(nextSec);
+              curSec = nextSec;
+              curH = 0;
+            }
+          }
+          sections = newSections;
+        }
+      }
+    }
     const pageElements = sections.length > 0 ? sections : cards;
     const totalPages = Math.max(1, pageElements.length);
     let currentPage = 1;
@@ -2122,22 +2176,27 @@ var DocxPlugin = class {
     }
     scale = 1;
     let rotation = 0;
-    const calculateFitScale = () => {
+    let fitMode = "width";
+    const calculateFitScale = (mode = fitMode) => {
       const activeEl = pageElements[currentPage - 1] || wrapper.firstElementChild || wrapper;
       const elW = activeEl.offsetWidth || 816;
-      const elH = activeEl.offsetHeight || 1056;
-      const availW = Math.max(200, ctx.container.clientWidth - 48);
-      const availH = Math.max(200, ctx.container.clientHeight - 80);
+      const singlePageH = Math.min(activeEl.offsetHeight || 1056, Math.round(elW * 1.32));
+      const availW = Math.max(280, ctx.container.clientWidth - 48);
+      const availH = Math.max(280, ctx.container.clientHeight - 80);
       const sW = availW / elW;
-      const sH = availH / elH;
-      return Math.min(1.1, Math.min(sW, sH));
+      const sH = availH / singlePageH;
+      if (mode === "page") {
+        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
+      }
+      return Math.max(0.65, Math.min(1.05, sW));
     };
     const applyTransform = () => {
       wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
       wrapper.style.transformOrigin = "top center";
     };
     setTimeout(() => {
-      scale = calculateFitScale();
+      fitMode = "width";
+      scale = calculateFitScale("width");
       applyTransform();
     }, 60);
     const cleanup = () => {
@@ -2171,7 +2230,8 @@ var DocxPlugin = class {
         applyTransform();
       },
       fitToPage: () => {
-        scale = calculateFitScale();
+        fitMode = fitMode === "width" ? "page" : "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         applyTransform();
       },
@@ -2615,11 +2675,9 @@ var ExcelPlugin = class {
     const calculateFitScale = () => {
       const table = contentArea.querySelector("table");
       if (!table) return 1;
-      const availW = Math.max(200, container.clientWidth - 48);
-      const availH = Math.max(200, container.clientHeight - 80);
+      const availW = Math.max(280, container.clientWidth - 48);
       const tW = table.offsetWidth || 800;
-      const tH = table.offsetHeight || 600;
-      return Math.min(1, Math.min(availW / tW, availH / tH));
+      return Math.max(0.65, Math.min(1, availW / tW));
     };
     try {
       wb = XLSX__namespace.read(new Uint8Array(ctx.buffer), { type: "array", cellDates: true });
@@ -3216,7 +3274,7 @@ var CodePlugin = class {
       fitToPage: () => {
         fontSize = 13;
         rotation = 0;
-        zoomLevel = 1;
+        zoomLevel = isTxt ? Math.max(0.65, Math.min(1.05, (container.clientWidth - 48) / 816)) : 1;
         updateTransform();
       },
       rotateCW: () => {
@@ -4198,20 +4256,27 @@ var RtfPlugin = class {
     let scale = 1;
     let rotation = 0;
     let pageElements = [];
-    const calculateFitScale = () => {
+    let fitMode = "width";
+    const calculateFitScale = (mode = fitMode) => {
       const activeEl = pageElements[currentPage - 1] || wrapper;
       const elW = activeEl.offsetWidth || 850;
-      const elH = activeEl.offsetHeight || 1e3;
-      const availW = Math.max(200, ctx.container.clientWidth - 48);
-      const availH = Math.max(200, ctx.container.clientHeight - 80);
-      return Math.min(1.1, Math.min(availW / elW, availH / elH));
+      const singlePageH = Math.min(activeEl.offsetHeight || 1056, Math.round(elW * 1.32));
+      const availW = Math.max(280, ctx.container.clientWidth - 48);
+      const availH = Math.max(280, ctx.container.clientHeight - 80);
+      const sW = availW / elW;
+      const sH = availH / singlePageH;
+      if (mode === "page") {
+        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
+      }
+      return Math.max(0.65, Math.min(1.05, sW));
     };
     const applyTransform = () => {
       wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
       wrapper.style.transformOrigin = "top center";
     };
     setTimeout(() => {
-      scale = calculateFitScale();
+      fitMode = "width";
+      scale = calculateFitScale("width");
       applyTransform();
     }, 60);
     try {
@@ -4320,7 +4385,8 @@ var RtfPlugin = class {
         applyTransform();
       },
       fitToPage: () => {
-        scale = calculateFitScale();
+        fitMode = fitMode === "width" ? "page" : "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         applyTransform();
       },
@@ -4639,19 +4705,29 @@ var OpenDocumentPlugin = class {
     ctx.container.appendChild(container);
     let scale = 1;
     let rotation = 0;
-    const calculateFitScale = () => {
+    let fitMode = "width";
+    const calculateFitScale = (mode = fitMode) => {
       const elW = wrapper.offsetWidth || 850;
-      const elH = wrapper.offsetHeight || (isPresentation ? 540 : 1e3);
-      const availW = Math.max(200, ctx.container.clientWidth - 48);
-      const availH = Math.max(200, ctx.container.clientHeight - 80);
-      return Math.min(1, Math.min(availW / elW, availH / elH));
+      const singlePageH = Math.min(wrapper.offsetHeight || 1056, Math.round(elW * 1.32));
+      const availW = Math.max(280, ctx.container.clientWidth - 48);
+      const availH = Math.max(280, ctx.container.clientHeight - 80);
+      const sW = availW / elW;
+      const sH = availH / (isPresentation ? 540 : singlePageH);
+      if (isPresentation) {
+        return Math.min(1, Math.min(sW, sH));
+      }
+      if (mode === "page") {
+        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
+      }
+      return Math.max(0.65, Math.min(1.05, sW));
     };
     const applyTransform = () => {
       wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
       wrapper.style.transformOrigin = "top center";
     };
     setTimeout(() => {
-      scale = calculateFitScale();
+      fitMode = "width";
+      scale = calculateFitScale("width");
       applyTransform();
     }, 60);
     let currentPage = 1;
@@ -4812,7 +4888,8 @@ var OpenDocumentPlugin = class {
         applyTransform();
       },
       fitToPage: () => {
-        scale = calculateFitScale();
+        fitMode = fitMode === "width" ? "page" : "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         applyTransform();
       },
@@ -5289,15 +5366,22 @@ var DocPlugin = class {
     if (totalPages > 1) {
       showPage(1);
     }
-    const calculateFitScale = () => {
+    let fitMode = "width";
+    const calculateFitScale = (mode = fitMode) => {
       const elW = 816;
       const elH = 1056;
-      const availW = Math.max(200, ctx.container.clientWidth - 48);
-      const availH = Math.max(200, ctx.container.clientHeight - 80);
-      return Math.min(1.1, Math.min(availW / elW, availH / elH));
+      const availW = Math.max(280, ctx.container.clientWidth - 48);
+      const availH = Math.max(280, ctx.container.clientHeight - 80);
+      const sW = availW / elW;
+      const sH = availH / elH;
+      if (mode === "page") {
+        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
+      }
+      return Math.max(0.65, Math.min(1.05, sW));
     };
     setTimeout(() => {
-      scale = calculateFitScale();
+      fitMode = "width";
+      scale = calculateFitScale("width");
       applyTransform();
     }, 60);
     const cleanup = () => {
@@ -5325,7 +5409,8 @@ var DocPlugin = class {
         applyTransform();
       },
       fitToPage: () => {
-        scale = calculateFitScale();
+        fitMode = fitMode === "width" ? "page" : "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         applyTransform();
       },