Integrated PDF Viewer
Relevant source files
The following files were used as context for generating this wiki page:
The Integrated PDF Viewer is a multi-faceted system within the Duplicator project designed to handle document visualization, previewing, and interactive processing. It leverages the PDF.js library to render PDF documents directly within the application's interface, supporting both high-fidelity viewing for the end-user and technical debugging for developers.
The system is integrated into several key modules, including the Document Library for general viewing, the Image Processor for applying visual adjustments like contrast and brightness to PDF pages, and a dedicated full-featured viewer for standard document interaction. It serves as the primary interface for users to verify document layout before proceeding with printing or complex impositions.
Sources: app/js/web/viewer.html, app/view/bibliotheque.html.php:403-450, app/view/image_processor.html.php:333-390
Viewer Architecture and Components
The PDF viewing functionality is built on a modular architecture that separates UI layout, styling, and rendering logic. The system utilizes a full-featured viewer for standalone document interaction and lightweight embedded canvases for previews within other tools.
Core UI Structure
The full viewer UI is organized into a sidebar for navigation (thumbnails, outline, attachments) and a main container for the document display. It includes integrated toolbars for document manipulation, such as zooming, rotation, and pagination.
The diagram shows the hierarchical structure of the primary PDF viewer interface components.
Sources: app/js/web/viewer.html:42-260
Key Components Table
| Component | Description | Source |
|---|---|---|
| Sidebar | Provides access to thumbnails, document outlines, attachments, and layers. | app/js/web/viewer.html:44-88 |
| Viewer Toolbar | Controls for page navigation, zooming (auto, fit, percent), and tool selection. | app/js/web/viewer.html:183-255 |
| Canvas Renderer | The primary pdfViewer div where PDF.js draws document pages. | app/js/web/viewer.html:260 |
| Annotation Layer | A transparent overlay for rendering interactive links and form fields. | app/js/web/viewer.css:151-180 |
| Text Layer | Enables text selection and search by overlaying invisible text on the rendered canvas. | app/js/web/viewer.css:26-50 |
Document Previews and Library Integration
In the bibliotheque (Library) and processing modules, the system uses a more streamlined implementation to render pages within modal windows or processing canvases.
Rendering Flow in Modals
When a user selects a PDF in the library, the system fetches the file as a blob, generates a URL, and initializes PDF.js to render specific pages onto a target <canvas> element.
This sequence illustrates the data flow from file storage to canvas rendering in the modal previewer.
Sources: app/view/bibliotheque.html.php:477-520
Preview Controls
The modal previewer includes specific controls for navigating multi-page documents and jumping to specific pages via numeric input.
renderPage(pageNum): Calculates the viewport based on a scale of 1.0 and renders the page content to the context ofpdfCanvas.changePage(delta): Increments or decrements the current page index within document bounds.goToPage(pageNum): Directly accesses a specific page index.
Sources: app/view/bibliotheque.html.php:522-555
Developer Tools and Debugging
The PDF viewer includes an advanced debugger (PDFBug) that provides deep insights into the document's structure and rendering operations.
Font Inspector
The FontInspector tool allows developers to view all fonts embedded in a PDF. It provides functionality to:
- Select and highlight text using specific fonts.
- Log font objects to the console.
- Download embedded font files directly as blobs.
Sources: app/js/web/debugger.js:24-118
Operator Stepper
The Stepper class enables step-by-step execution of PDF rendering operators. This is critical for diagnosing rendering glitches or performance issues by pausing at specific drawing instructions (e.g., showText, save, restore).
- Breakpoints: Users can toggle checkboxes next to operator indices to set breakpoints.
- Simplification: Large argument arrays are truncated for readability in the debugger UI.
Sources: app/js/web/debugger.js:189-325
Visual Adjustments and Processing
The system integrates PDF rendering with the riso-tools.js library to allow real-time visual processing of PDF pages.
Effects Pipeline
Within the image_processor, a PDF page is rendered to a "full-size canvas" before being processed by image adjustment functions.
| Effect | Implementation Logic | Source |
|---|---|---|
| Brightness | Adds a constant value to the R, G, and B channels of each pixel. | app/view/image_processor.html.php:427-436 |
| Contrast | Applies a factor based on a 128-centered pivot to the RGB channels. | app/view/image_processor.html.php:418-425 |
| Gamma | Applies a power-law transformation ($Value^{1/gamma}$) to normalize luminance. | app/view/image_processor.html.php:438-444 |
| Bitmap | Converts the page to black and white using either a threshold or dithering. | app/view/image_processor.html.php:458-470 |
Sources: app/view/image_processor.html.php:411-475
Summary
The Integrated PDF Viewer provides a comprehensive environment for both high-level document management and low-level technical analysis. By combining PDF.js with project-specific tools like the library modal and the image processing pipeline, the application ensures that users can accurately prepare and adjust documents for the Duplicator's unique printing requirements.