@file-viewer/renderer-pdf 2.1.28 → 2.1.29

package/dist/pdf.js

@@ -4,12 +4,11 @@ import { registerFileViewerSearchProvider, registerFileViewerZoomProvider, unreg
 import { DEFAULT_FILE_VIEWER_PDF_WORKER_PATH, resolveFileViewerPdfAssetUrls, resolveFileViewerRuntimeAssetBaseUrl, } from '@file-viewer/core/assets';
 import { pdfViewerStyle } from './pdfStyles.js';
 import { collectMalformedIdentityFontNames, createPdfCjkFontFallbackManager, detectMalformedIdentityCjkFontFamilies, } from './pdfFontFallback.js';
+import { PDF_FIT_HORIZONTAL_PADDING, PDF_PAGE_BORDER_WIDTH, resolvePdfFitViewportSize, } from './pdfFit.js';
 export const DEFAULT_FILE_VIEWER_PDF_WORKER_URL = DEFAULT_FILE_VIEWER_PDF_WORKER_PATH;
 const MIN_SCALE = 0.2;
 const MAX_SCALE = 3;
 const SCALE_STEP = 0.1;
-const FIT_HORIZONTAL_PADDING = 28;
-const PAGE_BORDER_WIDTH = 18;
 const PDF_EXPORT_MAX_PAGE_PIXELS = 8000000;
 const PDF_WORKER_PROBE_TIMEOUT_MS = 1200;
 const PDF_JS_DESTROY_CONSOLE_SUPPRESSION_MS = 1500;
@@ -315,7 +314,9 @@ export default async function renderPdf(buffer, target, context) {
     let activeViewStateApplyVersion = 0;
     let pendingInitialViewState = initialViewState;
     let pendingFitRequest = null;
+    let activeFitRequest = null;
     let suppressScrollEventUntil = 0;
+    let userScrollIntentUntil = 0;
     let scrollStateFrame = 0;
     let pdfSearchState = createPdfSearchState();
     let pdfMatchesCount = { current: 0, total: 0 };
@@ -893,7 +894,7 @@ export default async function renderPdf(buffer, target, context) {
         label: scaleText(),
         canZoomIn: loadStatus === 'ready' && !!pdfContext.viewer && canZoomIn(),
         canZoomOut: loadStatus === 'ready' && !!pdfContext.viewer && canZoomOut(),
-        canReset: loadStatus === 'ready' && !!pdfContext.viewer && !autoFitWidth,
+        canReset: loadStatus === 'ready' && !!pdfContext.viewer && Math.abs(currentScale - 1) > 0.001,
         minScale: MIN_SCALE,
         maxScale: MAX_SCALE,
     });
@@ -949,6 +950,21 @@ export default async function renderPdf(buffer, target, context) {
     const suppressProgrammaticScrollEvents = () => {
         suppressScrollEventUntil = Math.max(suppressScrollEventUntil, Date.now() + 180);
     };
+    const markFitInteraction = (source) => {
+        if (source !== 'user' && source !== 'api') {
+            return;
+        }
+        if ((activeFitRequest === null || activeFitRequest === void 0 ? void 0 : activeFitRequest.resize) === 'always') {
+            return;
+        }
+        autoFitWidth = false;
+        activeFitRequest = null;
+    };
+    const recordUserScrollIntent = () => {
+        userScrollIntentUntil = Date.now() + 750;
+        suppressScrollEventUntil = 0;
+        markFitInteraction('user');
+    };
     const restoreScrollState = (scroll, notify = true) => {
         if (!scroll) {
             return;
@@ -976,6 +992,7 @@ export default async function renderPdf(buffer, target, context) {
         const source = applyOptions.source || 'api';
         const action = applyOptions.action || 'restore';
         const notify = applyOptions.notify !== false;
+        markFitInteraction(source);
         const applyVersion = ++viewStateApplyVersion;
         activeViewStateApplyVersion = applyVersion;
         suppressProgrammaticScrollEvents();
@@ -1034,7 +1051,11 @@ export default async function renderPdf(buffer, target, context) {
         }
         scrollStateFrame = targetWindow.requestAnimationFrame(() => {
             scrollStateFrame = 0;
-            emitViewStateChange('scroll', 'user');
+            const source = Date.now() <= userScrollIntentUntil
+                ? 'user'
+                : 'viewer';
+            markFitInteraction(source);
+            emitViewStateChange('scroll', source);
         });
     };
     const setScale = (scale, action = 'zoom-change', source = 'viewer', notifyViewState = true) => {
@@ -1082,13 +1103,15 @@ export default async function renderPdf(buffer, target, context) {
     const getFitWidthScale = (pdfViewer) => {
         const pageWidth = getPageWidthAtScaleOne(pdfViewer);
         const containerWidth = container.clientWidth || targetWindow.innerWidth;
-        const availableWidth = Math.max(containerWidth - FIT_HORIZONTAL_PADDING - PAGE_BORDER_WIDTH, 96);
+        const availableWidth = Math.max(containerWidth - PDF_FIT_HORIZONTAL_PADDING - PDF_PAGE_BORDER_WIDTH, 96);
         return pageWidth ? clampScale(availableWidth / pageWidth) : 1;
     };
     const fitToWidth = (source = 'user', notifyViewState = true) => {
         if (!pdfContext.viewer) {
             return;
         }
+        userScrollIntentUntil = 0;
+        suppressProgrammaticScrollEvents();
         autoFitWidth = true;
         setScale(getFitWidthScale(pdfContext.viewer), 'zoom-reset', source, notifyViewState);
         void waitForPaint(targetWindow).then(() => {
@@ -1098,6 +1121,8 @@ export default async function renderPdf(buffer, target, context) {
     };
     const applyPdfFit = async (request) => {
         var _a, _b, _c;
+        userScrollIntentUntil = 0;
+        activeFitRequest = { ...request };
         if (!pdfContext.viewer || loadStatus !== 'ready') {
             pendingFitRequest = request;
             return {
@@ -1111,13 +1136,20 @@ export default async function renderPdf(buffer, target, context) {
         }
         const pageSize = getPageSizeAtScaleOne(pdfContext.viewer);
         const mode = request.mode === 'auto' ? 'width' : request.mode;
+        const fitViewport = resolvePdfFitViewportSize({
+            containerWidth: container.clientWidth,
+            containerHeight: container.clientHeight,
+            fallbackWidth: targetWindow.innerWidth,
+            fallbackHeight: targetWindow.innerHeight,
+            request,
+        });
         const scale = resolveFileViewerFitScale({
             mode,
-            viewportWidth: Math.max(96, (request.viewportWidth || container.clientWidth || targetWindow.innerWidth) -
-                FIT_HORIZONTAL_PADDING -
-                PAGE_BORDER_WIDTH),
-            viewportHeight: Math.max(96, (container.clientHeight || request.viewportHeight || targetWindow.innerHeight) -
-                PAGE_BORDER_WIDTH),
+            // The core request measures the whole viewer root. PDF's scroll
+            // container is the actual visible document area after the navigation
+            // pane, so prefer it whenever it has been laid out.
+            viewportWidth: fitViewport.width,
+            viewportHeight: fitViewport.height,
             contentWidth: pageSize.width,
             contentHeight: pageSize.height,
             currentScale,
@@ -1134,9 +1166,17 @@ export default async function renderPdf(buffer, target, context) {
                 provider: 'view-state',
             };
         }
+        suppressProgrammaticScrollEvents();
         autoFitWidth = request.mode === 'auto' || request.mode === 'width';
-        setScale(scale, 'fit', request.source);
+        if (Math.abs(scale - currentScale) > 0.001) {
+            setScale(scale, 'fit', request.source);
+        }
+        else {
+            pdfContext.viewer.update();
+            syncUi();
+        }
         await waitForPaint(targetWindow);
+        suppressProgrammaticScrollEvents();
         (_c = pdfContext.viewer) === null || _c === void 0 ? void 0 : _c.update();
         const state = getPdfViewState();
         return {
@@ -1149,22 +1189,49 @@ export default async function renderPdf(buffer, target, context) {
             state,
         };
     };
-    const scheduleFitToWidth = () => {
-        if (!autoFitWidth || !pdfContext.viewer) {
+    const scheduleFitAfterResize = () => {
+        if (!pdfContext.viewer) {
+            return;
+        }
+        if ((activeFitRequest === null || activeFitRequest === void 0 ? void 0 : activeFitRequest.resize) === 'initial') {
+            return;
+        }
+        if (!activeFitRequest && !autoFitWidth) {
             return;
         }
         targetWindow.cancelAnimationFrame(fitFrame);
-        fitFrame = targetWindow.requestAnimationFrame(() => fitToWidth('viewer'));
+        fitFrame = targetWindow.requestAnimationFrame(() => {
+            if (activeFitRequest) {
+                void applyPdfFit({ ...activeFitRequest, source: 'viewer' });
+                return;
+            }
+            fitToWidth('viewer');
+        });
     };
     const zoomIn = (source = 'user') => {
-        autoFitWidth = false;
+        markFitInteraction(source);
         setScale(currentScale + SCALE_STEP, 'zoom-in', source);
     };
     const zoomOut = (source = 'user') => {
-        autoFitWidth = false;
+        markFitInteraction(source);
         setScale(currentScale - SCALE_STEP, 'zoom-out', source);
     };
+    const reapplyFitAfterLayout = (source, notifyViewState = true) => {
+        if (activeFitRequest) {
+            if (activeFitRequest.resize === 'initial') {
+                return false;
+            }
+            void applyPdfFit({ ...activeFitRequest, source });
+            return true;
+        }
+        if (autoFitWidth) {
+            fitToWidth(source, notifyViewState);
+            return true;
+        }
+        return false;
+    };
     const applyRotation = (rotation, action = 'rotation-change', source = 'viewer', notifyViewState = true) => {
+        markFitInteraction(source);
         const normalized = normalizeRotation(rotation);
         currentRotation = normalized;
         pdfThumbnails.clear();
@@ -1176,8 +1243,7 @@ export default async function renderPdf(buffer, target, context) {
         pdfContext.viewer.pagesRotation = normalized;
         void waitForPaint(targetWindow).then(() => {
             var _a;
-            if (autoFitWidth) {
-                fitToWidth(source, notifyViewState);
+            if (reapplyFitAfterLayout(source, notifyViewState)) {
                 if (notifyViewState) {
                     emitViewStateChange(action, source);
                 }
@@ -1203,6 +1269,7 @@ export default async function renderPdf(buffer, target, context) {
         if (!pdfContext.viewer || !pageCount) {
             return;
         }
+        markFitInteraction(source);
         const nextPage = Math.min(pageCount, Math.max(1, pageNumber));
         runWithStableHorizontalScroll(() => {
             pdfContext.viewer.currentPageNumber = nextPage;
@@ -1217,12 +1284,12 @@ export default async function renderPdf(buffer, target, context) {
         if (!navigationEnabled) {
             return;
         }
+        markFitInteraction(source);
         navVisible = !navVisible;
         syncUi();
         void waitForPaint(targetWindow).then(() => {
             var _a;
-            if (autoFitWidth) {
-                fitToWidth(source, notifyViewState);
+            if (reapplyFitAfterLayout(source, notifyViewState)) {
                 return;
             }
             (_a = pdfContext.viewer) === null || _a === void 0 ? void 0 : _a.update();
@@ -1232,6 +1299,7 @@ export default async function renderPdf(buffer, target, context) {
         }
     };
     const setNavMode = (mode, source = 'user', notifyViewState = true) => {
+        markFitInteraction(source);
         navMode = mode;
         syncUi();
         if (notifyViewState) {
@@ -1359,7 +1427,7 @@ export default async function renderPdf(buffer, target, context) {
                 `width:${formatCssPixels(pageWidth)}`,
                 `height:${formatCssPixels(pageHeight)}`,
             ].join(';');
-            pagesHtml.push(`<section class="pdf-export-page viewer-print-page" style="${pageStyle}" aria-label="${escapeAttribute(pageTitle)}"><img src="${canvas.toDataURL('image/png')}" alt="${escapeAttribute(pageTitle)}" /></section>`);
+            pagesHtml.push(`<section class="pdf-export-page viewer-print-page" data-viewer-print-page-index="${pageNumber - 1}" style="${pageStyle}" aria-label="${escapeAttribute(pageTitle)}"><img src="${canvas.toDataURL('image/png')}" alt="${escapeAttribute(pageTitle)}" /></section>`);
             canvas.width = 0;
             canvas.height = 0;
             (_b = (_a = page).cleanup) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -1414,7 +1482,6 @@ export default async function renderPdf(buffer, target, context) {
                 var _a;
                 applyRotation(currentRotation, 'rotation-change', 'viewer', false);
                 loadStatus = 'ready';
-                fitToWidth('viewer', false);
                 scheduleLegacyPageDimensionPatch();
                 syncUi();
                 (_a = context === null || context === void 0 ? void 0 : context.onProgressiveRender) === null || _a === void 0 ? void 0 : _a.call(context);
@@ -1433,6 +1500,7 @@ export default async function renderPdf(buffer, target, context) {
                         void applyPdfFit(fitRequest);
                     }
                     else {
+                        fitToWidth('viewer', false);
                         emitViewStateChange('init', 'viewer');
                     }
                 }
@@ -1613,6 +1681,7 @@ export default async function renderPdf(buffer, target, context) {
             }
             (_c = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _c === void 0 ? void 0 : _c.call(context, {
                 includeDocumentStyles: false,
+                getPrintMaskPages: () => Array.from(root.querySelectorAll('.pdfViewer .page')),
                 printStyle: buildPdfPrintStyle,
                 toHtml: renderPdfPagesForExport,
             });
@@ -1655,11 +1724,12 @@ export default async function renderPdf(buffer, target, context) {
             return getPdfZoomState();
         },
         resetZoom: () => {
-            fitToWidth('api');
+            markFitInteraction('api');
+            setScale(1, 'zoom-reset', 'api');
             return getPdfZoomState();
         },
         setZoom: scale => {
-            autoFitWidth = false;
+            markFitInteraction('api');
             setScale(scale, 'zoom-change', 'api');
             return getPdfZoomState();
         },
@@ -1678,14 +1748,21 @@ export default async function renderPdf(buffer, target, context) {
     nextPageButton.addEventListener('click', () => goToPage(currentPage + 1, 'page-step', 'user'));
     zoomOutButton.addEventListener('click', () => zoomOut('user'));
     zoomInButton.addEventListener('click', () => zoomIn('user'));
-    scaleButton.addEventListener('click', () => fitToWidth('user'));
+    scaleButton.addEventListener('click', () => {
+        activeFitRequest = null;
+        fitToWidth('user');
+    });
     rotateLeftButton.addEventListener('click', () => applyRotation(currentRotation - 90, 'rotate-left', 'user'));
     rotateRightButton.addEventListener('click', () => applyRotation(currentRotation + 90, 'rotate-right', 'user'));
     pagesTab.addEventListener('click', () => setNavMode('pages', 'user'));
     outlineTab.addEventListener('click', () => setNavMode('outline', 'user'));
+    container.addEventListener('wheel', recordUserScrollIntent, { passive: true });
+    container.addEventListener('touchstart', recordUserScrollIntent, { passive: true });
+    container.addEventListener('pointerdown', recordUserScrollIntent, { passive: true });
+    container.addEventListener('keydown', recordUserScrollIntent);
     container.addEventListener('scroll', scheduleScrollViewStateChange, { passive: true });
     if (targetWindow.ResizeObserver) {
-        resizeObserver = new targetWindow.ResizeObserver(() => scheduleFitToWidth());
+        resizeObserver = new targetWindow.ResizeObserver(() => scheduleFitAfterResize());
         resizeObserver.observe(container);
     }
     syncUi();

package/dist/pdfFit.d.ts

@@ -0,0 +1,20 @@
+import type { FileViewerFitRequest } from '@file-viewer/core';
+export declare const PDF_FIT_MIN_VIEWPORT_SIZE = 96;
+export declare const PDF_FIT_HORIZONTAL_PADDING = 28;
+export declare const PDF_PAGE_BORDER_WIDTH = 18;
+export interface ResolvePdfFitViewportSizeInput {
+    containerWidth: number;
+    containerHeight: number;
+    fallbackWidth: number;
+    fallbackHeight: number;
+    request: Pick<FileViewerFitRequest, 'viewportWidth' | 'viewportHeight' | 'padding'>;
+}
+/**
+ * Resolves the PDF page viewport after the navigation pane has been laid out.
+ * Core request dimensions already exclude fit.padding; live container and
+ * window fallback dimensions do not, so only those branches subtract it.
+ */
+export declare const resolvePdfFitViewportSize: ({ containerWidth, containerHeight, fallbackWidth, fallbackHeight, request, }: ResolvePdfFitViewportSizeInput) => {
+    width: number;
+    height: number;
+};

package/dist/pdfFit.js

@@ -0,0 +1,26 @@
+export const PDF_FIT_MIN_VIEWPORT_SIZE = 96;
+export const PDF_FIT_HORIZONTAL_PADDING = 28;
+export const PDF_PAGE_BORDER_WIDTH = 18;
+const normalizePadding = (padding) => (Number.isFinite(padding) && Number(padding) > 0 ? Number(padding) : 0);
+/**
+ * Resolves the PDF page viewport after the navigation pane has been laid out.
+ * Core request dimensions already exclude fit.padding; live container and
+ * window fallback dimensions do not, so only those branches subtract it.
+ */
+export const resolvePdfFitViewportSize = ({ containerWidth, containerHeight, fallbackWidth, fallbackHeight, request, }) => {
+    const padding = normalizePadding(request.padding);
+    const requestWidth = Number(request.viewportWidth) || 0;
+    const requestHeight = Number(request.viewportHeight) || 0;
+    const hasContainerWidth = containerWidth > 0;
+    const hasContainerHeight = containerHeight > 0;
+    const width = hasContainerWidth
+        ? containerWidth - padding * 2
+        : requestWidth || fallbackWidth - padding * 2;
+    const height = hasContainerHeight
+        ? containerHeight - padding * 2
+        : requestHeight || fallbackHeight - padding * 2;
+    return {
+        width: Math.max(PDF_FIT_MIN_VIEWPORT_SIZE, width - PDF_FIT_HORIZONTAL_PADDING - PDF_PAGE_BORDER_WIDTH),
+        height: Math.max(PDF_FIT_MIN_VIEWPORT_SIZE, height - PDF_PAGE_BORDER_WIDTH),
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-pdf",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "private": false,
   "type": "module",
   "description": "Standalone PDF renderer plugin for Flyfish File Viewer powered by PDF.js.",
@@ -54,7 +54,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.1.28",
+    "@file-viewer/core": "2.1.29",
     "@fontsource-variable/noto-sans-sc": "5.2.10",
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "5.4.624"