feat: Add initial PDF viewer with PDF rendering, search, outline, and caching capabilities.

Author: JuliusBairaktaris

viewer/js/index.js

@@ -252,7 +252,6 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger = 0) {
                 textLayerDiv.replaceWith(cached.textLayerDiv);
                 textLayerDiv = cached.textLayerDiv;
                 setLayerTransform(cached.pageWidth, cached.pageHeight, textLayerDiv);
-                container.style.setProperty("--scale-factor", newZoomRatio.toString());
                 textLayerDiv.hidden = false;
 
                 if (searchController) {
@@ -312,7 +311,6 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger = 0) {
                 }
 
                 if (zoom === 2) {
-                    container.style.setProperty("--scale-factor", newZoomRatio.toString());
                     pageRendering = false;
 
                     // zoom focus relative to page origin, rather than screen origin
@@ -401,7 +399,6 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger = 0) {
                         if (useRender) {
                             textLayerDiv.replaceWith(newTextLayerDiv);
                             textLayerDiv = newTextLayerDiv;
-                            container.style.setProperty("--scale-factor", newZoomRatio.toString());
                             textLayerDiv.hidden = false;
 
                             searchController.drawPageMatches(pageNumber, textLayerDiv, zoom === 1 || zoom === 2);

viewer/js/search_controller.js

@@ -8,6 +8,8 @@ export class SearchController {
         this.currentMatchIndex = -1;
         this.searchAbortController = null;
         this.highlightOverlay = null; // Container for highlights
+        this.activeTextLayer = null;
+        this.activePage = 0;
     }
 
     async find(query) {
@@ -115,12 +117,20 @@ export class SearchController {
     }
 
     showMatch(match) {
-        // Navigate to the page
+        if (match.pageNum === this.activePage && this.activeTextLayer) {
+            // Already on the same page, just redraw highlights to try to avoid full re-render
+            // Update: calling getPageCallback might be ignored by index.js if page is same,
+            // so we MUST redraw manually here to update the 'selected' highlight.
+            this.drawPageMatches(match.pageNum, this.activeTextLayer);
+        }
+        // Always request page navigation to ensure we are on the right page
         this.getPageCallback(match.pageNum);
     }
 
     drawPageMatches(pageNum, textLayerDiv, skipScroll = false) {
         this.removeHighlights();
+        this.activeTextLayer = textLayerDiv;
+        this.activePage = pageNum;
 
         if (this.matches.length === 0) {
             return;
@@ -142,10 +152,6 @@ export class SearchController {
         const currentMatch = (this.currentMatchIndex !== -1) ? this.matches[this.currentMatchIndex] : null;
         let selectedDiv = null;
 
-        // Get the scale factor from CSS custom property
-        const containerEl = document.getElementById("container");
-        const scaleFactor = parseFloat(containerEl.style.getPropertyValue("--scale-factor")) || 1;
-
         let currentLen = 0;
 
         spans.forEach((span) => {
@@ -181,12 +187,11 @@ export class SearchController {
                                 }
                             }
 
-                            // Calculate positions relative to text layer using current viewport positions
-                            // and then normalize by the scale factor to get unscaled coordinates
-                            const left = (rect.left - textLayerRect.left) / scaleFactor;
-                            const top = (rect.top - textLayerRect.top) / scaleFactor;
-                            const width = rect.width / scaleFactor;
-                            const height = rect.height / scaleFactor;
+                            // Calculate positions relative to text layer
+                            const left = rect.left - textLayerRect.left;
+                            const top = rect.top - textLayerRect.top;
+                            const width = rect.width;
+                            const height = rect.height;
 
                             div.style.left = left + "px";
                             div.style.top = top + "px";

viewer/main.css

@@ -9,8 +9,6 @@
     height: 100%;
     pointer-events: none;
     z-index: 2;
-    transform-origin: 0 0;
-    transform: scale(var(--scale-factor, 1));
 }
 
 .search-highlight {