an.tsouchlos/brittle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andreas Tsouchlos
2026-03-25 11:05:28 +01:00
parent 0b354462e0
commit 17ddf9071e
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src-tauri/src/pdf_viewer.html
View File

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