Kill current rendering task if the user zooms in/out while the page is being re-rendered

src-tauri/src/pdf_viewer.html

@@ -138,12 +138,13 @@
       const ZOOM_MIN = 0.1;
       const ZOOM_MAX = 5.0;
 
-      let pdfDoc       = null;
-      let scale        = 1.0;  // desired display scale
-      let renderScale  = 1.0;  // scale at which pagesWrapper canvases are rendered
-      let renderGen    = 0;    // incremented on each render to cancel stale passes
-      let renderTimer  = null;
-      let pagesWrapper = null; // the current #pages-wrapper element
+      let pdfDoc            = null;
+      let scale             = 1.0;  // desired display scale
+      let renderScale       = 1.0;  // scale at which pagesWrapper canvases are rendered
+      let renderGen         = 0;    // incremented on each render to cancel stale passes
+      let renderTimer       = null;
+      let pagesWrapper      = null; // the current #pages-wrapper element
+      let pendingRenderTask = null; // the active page.render() RenderTask, if any
 
       // ── Utilities ──────────────────────────────────────────────────────────
 
@@ -209,6 +210,8 @@
 
       async function renderAll() {
         if (!pdfDoc) return;
+        pendingRenderTask?.cancel();
+        pendingRenderTask = null;
         const gen         = ++renderGen;
         const targetScale = scale;
 
@@ -282,6 +285,7 @@
       }
 
       async function renderPage(wrapper, pageNum, targetScale) {
+        let task = null;
         try {
           const page   = await pdfDoc.getPage(pageNum);
           const vp     = page.getViewport({ scale: targetScale * DPR });
@@ -293,9 +297,13 @@
           canvas.style.width  = Math.round(vp.width  / DPR) + "px";
           canvas.style.height = Math.round(vp.height / DPR) + "px";
 
-          await page.render({ canvasContext: canvas.getContext("2d"), viewport: vp }).promise;
+          task = page.render({ canvasContext: canvas.getContext("2d"), viewport: vp });
+          pendingRenderTask = task;
+          await task.promise;
         } catch (e) {
           if (e?.name !== "RenderingCancelledException") console.warn("render:", e);
+        } finally {
+          if (pendingRenderTask === task) pendingRenderTask = null;
         }
       }