@file-viewer/renderer-word 2.1.13 → 2.1.14

package/dist/wordDoc.js

@@ -184,33 +184,44 @@ function makeMsDocResponsive(target) {
     const clampScale = (scale) => {
         return Math.min(MSDOC_MAX_SCALE, Math.max(MSDOC_MIN_SCALE, Number(scale.toFixed(2))));
     };
+    const applyResponsiveLayout = () => {
+        let firstScale = currentScale;
+        let firstFitScale = currentFitScale;
+        let measured = false;
+        pages.forEach(page => {
+            const root = page.querySelector('.msdoc-root');
+            if (!root) {
+                return;
+            }
+            const rootWidth = root.offsetWidth || MSDOC_PAGE_SIZE.width;
+            const rootHeight = Math.max(root.scrollHeight, root.offsetHeight, MSDOC_PAGE_SIZE.height);
+            const availableWidth = Math.max(target.clientWidth - 48, 120);
+            const fitScale = Math.min(1, Math.max(MSDOC_MIN_SCALE, availableWidth / rootWidth));
+            const scale = clampScale(fitScale * userZoom);
+            if (!measured) {
+                firstScale = scale;
+                firstFitScale = fitScale;
+                measured = true;
+            }
+            root.style.transform = `translateX(-50%) scale(${scale})`;
+            page.style.width = `${Math.ceil(Math.max(rootWidth * scale, 120))}px`;
+            page.style.height = `${Math.ceil(rootHeight * scale)}px`;
+        });
+        if (!measured) {
+            return;
+        }
+        currentScale = firstScale;
+        currentFitScale = firstFitScale;
+        zoomEmitter.emit();
+    };
     const resize = () => {
         if (!view) {
+            applyResponsiveLayout();
             return;
         }
         view.cancelAnimationFrame(resizeFrame);
         resizeFrame = view.requestAnimationFrame(() => {
-            let firstScale = 1;
-            let firstFitScale = 1;
-            pages.forEach(page => {
-                const root = page.querySelector('.msdoc-root');
-                if (!root) {
-                    return;
-                }
-                const rootWidth = root.offsetWidth || MSDOC_PAGE_SIZE.width;
-                const rootHeight = Math.max(root.scrollHeight, root.offsetHeight, MSDOC_PAGE_SIZE.height);
-                const availableWidth = Math.max(target.clientWidth - 48, 120);
-                const fitScale = Math.min(1, Math.max(MSDOC_MIN_SCALE, availableWidth / rootWidth));
-                const scale = clampScale(fitScale * userZoom);
-                firstScale = scale;
-                firstFitScale = fitScale;
-                root.style.transform = `translateX(-50%) scale(${scale})`;
-                page.style.width = `${Math.ceil(Math.max(rootWidth * scale, 120))}px`;
-                page.style.height = `${Math.ceil(rootHeight * scale)}px`;
-            });
-            currentScale = firstScale;
-            currentFitScale = firstFitScale;
-            zoomEmitter.emit();
+            applyResponsiveLayout();
         });
     };
     const getZoomState = () => ({
@@ -224,13 +235,14 @@ function makeMsDocResponsive(target) {
     });
     const setUserZoom = (nextZoom) => {
         userZoom = Math.min(6, Math.max(0.2, Number(nextZoom.toFixed(2))));
-        resize();
+        view === null || view === void 0 ? void 0 : view.cancelAnimationFrame(resizeFrame);
+        applyResponsiveLayout();
         return getZoomState();
     };
     target.dataset.viewerZoomProvider = 'doc';
     registerFileViewerZoomProvider(target, {
-        zoomIn: () => setUserZoom(userZoom + MSDOC_ZOOM_STEP),
-        zoomOut: () => setUserZoom(userZoom - MSDOC_ZOOM_STEP),
+        zoomIn: () => setUserZoom((currentScale + MSDOC_ZOOM_STEP) / Math.max(currentFitScale, 0.01)),
+        zoomOut: () => setUserZoom((currentScale - MSDOC_ZOOM_STEP) / Math.max(currentFitScale, 0.01)),
         resetZoom: () => setUserZoom(1),
         setZoom: scale => setUserZoom(scale / Math.max(currentFitScale, 0.01)),
         getState: getZoomState,
@@ -244,7 +256,7 @@ function makeMsDocResponsive(target) {
             observer === null || observer === void 0 ? void 0 : observer.observe(root);
         }
     });
-    resize();
+    applyResponsiveLayout();
     return () => {
         view === null || view === void 0 ? void 0 : view.cancelAnimationFrame(resizeFrame);
         observer === null || observer === void 0 ? void 0 : observer.disconnect();

package/dist/wordDocx.js

@@ -8,7 +8,7 @@ const DOCX_WORKER_UNSAFE_PROTOCOLS = new Set(['file:', 'about:', 'data:']);
 const DOCX_MIN_SCALE = 0.24;
 const DOCX_MAX_SCALE = 3;
 const DOCX_ZOOM_STEP = 0.15;
-const DOCX_VENDOR_ASSET_VERSION = '0.3.15';
+const DOCX_VENDOR_ASSET_VERSION = '0.3.16';
 const ZIP_SIGNATURE_PK = 0x504b;
 const loadLibrary = (() => {
     const loader = {
@@ -180,7 +180,7 @@ const DOCX_RESPONSIVE_CSS = `
 }
 .docx-fit-viewer .docx-flow-frame > section.docx {
   height: auto !important;
-  min-height: 0 !important;
+  min-height: var(--docx-page-height, auto) !important;
   overflow: visible !important;
 }
 .docx-fit-viewer .docx-page-frame > section.docx > article,
@@ -227,38 +227,51 @@ function makeDocxResponsive(target, context) {
     const clampScale = (scale) => {
         return Math.min(DOCX_MAX_SCALE, Math.max(DOCX_MIN_SCALE, Number(scale.toFixed(2))));
     };
+    const applyResponsiveLayout = () => {
+        let firstScale = currentScale;
+        let firstFitScale = currentFitScale;
+        let measured = false;
+        frames.forEach(frame => {
+            const page = frame.firstElementChild;
+            if (!isTargetHTMLElement(page, target)) {
+                return;
+            }
+            page.style.transform = 'translateX(-50%)';
+            const pageWidth = page.offsetWidth;
+            const contentHeight = pagedLayout
+                ? page.offsetHeight
+                : Math.max(page.scrollHeight, page.offsetHeight);
+            if (!pageWidth || !contentHeight) {
+                return;
+            }
+            const availableWidth = Math.max(target.clientWidth - 28, 120);
+            const fitScale = Math.min(1, Math.max(DOCX_MIN_SCALE, availableWidth / pageWidth));
+            const scale = clampScale(fitScale * userZoom);
+            if (!measured) {
+                firstScale = scale;
+                firstFitScale = fitScale;
+                measured = true;
+            }
+            page.style.transform = `translateX(-50%) scale(${scale})`;
+            frame.style.width = `${Math.ceil(Math.max(pageWidth * scale, target.clientWidth - 28, 120))}px`;
+            frame.style.maxWidth = 'none';
+            frame.style.height = `${Math.ceil(contentHeight * scale)}px`;
+        });
+        if (!measured) {
+            return;
+        }
+        currentScale = firstScale;
+        currentFitScale = firstFitScale;
+        zoomEmitter.emit();
+    };
     const resize = () => {
         if (!view) {
+            applyResponsiveLayout();
             return;
         }
         view.cancelAnimationFrame(resizeFrame);
         resizeFrame = view.requestAnimationFrame(() => {
-            let firstScale = 1;
-            frames.forEach(frame => {
-                const page = frame.firstElementChild;
-                if (!isTargetHTMLElement(page, target)) {
-                    return;
-                }
-                page.style.transform = 'translateX(-50%)';
-                const pageWidth = page.offsetWidth;
-                const contentHeight = pagedLayout
-                    ? page.offsetHeight
-                    : Math.max(page.scrollHeight, page.offsetHeight);
-                if (!pageWidth || !contentHeight) {
-                    return;
-                }
-                const availableWidth = Math.max(target.clientWidth - 28, 120);
-                const fitScale = Math.min(1, Math.max(DOCX_MIN_SCALE, availableWidth / pageWidth));
-                const scale = clampScale(fitScale * userZoom);
-                firstScale = scale;
-                currentFitScale = fitScale;
-                page.style.transform = `translateX(-50%) scale(${scale})`;
-                frame.style.width = `${Math.ceil(Math.max(pageWidth * scale, target.clientWidth - 28, 120))}px`;
-                frame.style.maxWidth = 'none';
-                frame.style.height = `${Math.ceil(contentHeight * scale)}px`;
-            });
-            currentScale = firstScale;
-            zoomEmitter.emit();
+            applyResponsiveLayout();
         });
     };
     const getZoomState = () => ({
@@ -272,13 +285,14 @@ function makeDocxResponsive(target, context) {
     });
     const setUserZoom = (nextZoom) => {
         userZoom = Math.min(6, Math.max(0.2, Number(nextZoom.toFixed(2))));
-        resize();
+        view === null || view === void 0 ? void 0 : view.cancelAnimationFrame(resizeFrame);
+        applyResponsiveLayout();
         return getZoomState();
     };
     target.dataset.viewerZoomProvider = 'docx';
     registerFileViewerZoomProvider(target, {
-        zoomIn: () => setUserZoom(userZoom + DOCX_ZOOM_STEP),
-        zoomOut: () => setUserZoom(userZoom - DOCX_ZOOM_STEP),
+        zoomIn: () => setUserZoom((currentScale + DOCX_ZOOM_STEP) / Math.max(currentFitScale, 0.01)),
+        zoomOut: () => setUserZoom((currentScale - DOCX_ZOOM_STEP) / Math.max(currentFitScale, 0.01)),
         resetZoom: () => setUserZoom(1),
         setZoom: scale => setUserZoom(scale / Math.max(currentFitScale, 0.01)),
         getState: getZoomState,
@@ -292,7 +306,7 @@ function makeDocxResponsive(target, context) {
             observer === null || observer === void 0 ? void 0 : observer.observe(page);
         }
     });
-    resize();
+    applyResponsiveLayout();
     return () => {
         view === null || view === void 0 ? void 0 : view.cancelAnimationFrame(resizeFrame);
         observer === null || observer === void 0 ? void 0 : observer.disconnect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-word",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "private": false,
   "type": "module",
   "description": "Standalone Word and compatible document renderer plugin for Flyfish File Viewer powered by @file-viewer/docx, @file-viewer/doc, and RTF/ODF parsing.",
@@ -57,9 +57,9 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "^2.1.13",
-    "@file-viewer/doc": "^2.1.13",
-    "@file-viewer/docx": "^0.3.15",
+    "@file-viewer/core": "^2.1.14",
+    "@file-viewer/doc": "^2.1.14",
+    "@file-viewer/docx": "^0.3.16",
     "jszip": "^3.10.1",
     "rtf.js": "^3.0.9"
   },