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

Change PDF rendering

Browse Source
This commit is contained in:
Andreas Tsouchlos
2026-03-30 00:03:19 +02:00
parent 7f9d766ce0
commit d1bb79570d
9 changed files with 891 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
src-tauri/assets/viewer/index.html
View File

@@ -71,7 +71,7 @@
font-size: 12px;
}
/* Scrollable viewport — contains the zoomed pages wrapper */
/* Scrollable viewport — contains the pages wrapper */
#canvas-container {
flex: 1;
overflow-y: auto;
@@ -79,8 +79,7 @@
background: #1d2021;
}
/* Inner column that receives the CSS zoom for instant visual feedback.
CSS zoom (unlike transform) affects layout, so scrollbars stay correct. */
/* Column of page placeholders/canvases */
#pages-wrapper {
display: flex;
flex-direction: column;
@@ -91,17 +90,21 @@
margin: 0 auto;
}
.page-wrapper { flex-shrink: 0; }
/* Each page: sized div that holds a canvas once rendered.
White background makes unrendered placeholders look like blank pages. */
.page-wrapper {
flex-shrink: 0;
position: relative;
background: #fff;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}
.page-wrapper canvas {
display: block;
background: #fff;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}
</style>
</head>
<body>
<div id="error-banner"></div>
<div id="toolbar">
@@ -112,309 +115,14 @@
<button id="btn-zoom-fit" title="Fit width [ 0 ]">Fit</button>
</div>
<span id="page-indicator">— / —</span>
<span id="status">Loading PDF.js…</span>
<span id="status">Loading…</span>
</div>
<div id="canvas-container"></div>
<div id="canvas-container">
<div id="pages-wrapper"></div>
</div>
<script src="brittle://app/pdfjs/build/pdf.min.js"></script>
<script>
"use strict";
const refId = new URLSearchParams(location.search).get("ref_id") || "";
const pdfjsLib = window.pdfjsLib;
if (!pdfjsLib) {
showError("PDF.js failed to load. Make sure the app is running inside Brittle.");
} else {
pdfjsLib.GlobalWorkerOptions.workerSrc =
"brittle://app/pdfjs/build/pdf.worker.min.js";
const container = document.getElementById("canvas-container");
const statusEl = document.getElementById("status");
const zoomLabel = document.getElementById("zoom-label");
const pageIndicator = document.getElementById("page-indicator");
const DPR = window.devicePixelRatio || 1;
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 pendingRenderTask = null; // the active page.render() RenderTask, if any
// ── Utilities ──────────────────────────────────────────────────────────
function setStatus(msg) { statusEl.textContent = msg; }
function clampScale(s) {
return Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, s));
}
function updateZoomLabel() {
zoomLabel.textContent = Math.round(scale * 100) + "%";
}
// ── Zoom ───────────────────────────────────────────────────────────────
// anchorY/anchorX: offsets within the container to keep fixed on screen.
// Default to the centre of the visible area.
function applyScale(
newScale,
anchorY = container.clientHeight / 2,
anchorX = container.clientWidth / 2,
) {
const oldScale = scale;
const oldScrollTop = container.scrollTop;
const oldScrollLeft = container.scrollLeft;
scale = clampScale(newScale);
updateZoomLabel();
const ratio = scale / oldScale;
const cssZoom = scale / renderScale;
// Apply CSS zoom to each page wrapper individually — NOT to the flex
// container. This keeps the container's padding and gap constant, so
// page positions are identical before and after the background re-render
// (no jump when the re-render swaps in naturally-sized canvases).
if (pagesWrapper) {
for (const wrap of pagesWrapper.children) {
wrap.style.zoom = cssZoom;
}
}
// Keep the document point under the cursor at the same screen position.
container.scrollTop = Math.max(0, (oldScrollTop + anchorY) * ratio - anchorY);
container.scrollLeft = Math.max(0, (oldScrollLeft + anchorX) * ratio - anchorX);
scheduleRender();
}
async function fitToWidth() {
if (!pdfDoc) return scale;
const page = await pdfDoc.getPage(1);
const vp = page.getViewport({ scale: 1.0 });
const avail = container.clientWidth - 40;
return clampScale(avail / vp.width);
}
// ── Rendering ──────────────────────────────────────────────────────────
function scheduleRender() {
clearTimeout(renderTimer);
renderTimer = setTimeout(renderAll, 300);
}
async function renderAll() {
if (!pdfDoc) return;
pendingRenderTask?.cancel();
pendingRenderTask = null;
const gen = ++renderGen;
const targetScale = scale;
const savedScrollTop = container.scrollTop;
const savedScrollLeft = container.scrollLeft;
// Build new wrapper with pre-sized canvases derived from the old ones.
// Pre-sizing means the scroll range is correct the instant we swap, so
// savedScrollTop/Left can be restored exactly without a jump.
const newWrapper = document.createElement("div");
newWrapper.id = "pages-wrapper";
const wrappers = [];
for (let i = 1; i <= pdfDoc.numPages; i++) {
const wrap = document.createElement("div");
wrap.className = "page-wrapper";
wrap.dataset.page = String(i);
const canvas = document.createElement("canvas");
if (pagesWrapper) {
const oldCanvas = pagesWrapper.children[i - 1]?.querySelector("canvas");
if (oldCanvas?.style.width) {
const ratio = targetScale / renderScale;
canvas.style.width = Math.round(parseFloat(oldCanvas.style.width) * ratio) + "px";
canvas.style.height = Math.round(parseFloat(oldCanvas.style.height) * ratio) + "px";
}
}
wrap.appendChild(canvas);
newWrapper.appendChild(wrap);
wrappers.push(wrap);
}
// For zoom re-renders: pre-render the currently visible pages (1–2)
// before the DOM swap. Only a small number of pages, so off-screen is
// fast; the swap then reveals already-drawn content with no white flash.
// Skipped for the initial load (pagesWrapper is null) where progressive
// in-DOM rendering is preferable.
const preRendered = new Set();
if (pagesWrapper) {
const first = getCurrentPage();
const last = Math.min(first + 1, pdfDoc.numPages);
for (let p = first; p <= last; p++) {
if (renderGen !== gen) return;
await renderPage(wrappers[p - 1], p, targetScale);
preRendered.add(p - 1);
}
}
if (renderGen !== gen) return;
// Swap into DOM — visible pages are already rendered on re-render.
// DOM mutations + scroll restore are synchronous, landing in one paint.
container.innerHTML = "";
container.appendChild(newWrapper);
pagesWrapper = newWrapper;
renderScale = targetScale;
container.scrollTop = savedScrollTop;
container.scrollLeft = savedScrollLeft;
// Render remaining pages in-DOM (GPU-accelerated, progressive).
for (let i = 0; i < wrappers.length; i++) {
if (preRendered.has(i)) continue;
if (renderGen !== gen) return;
await renderPage(wrappers[i], i + 1, targetScale);
}
if (renderGen !== gen) return;
setStatus("Ready");
refreshPageIndicator();
}
async function renderPage(wrapper, pageNum, targetScale) {
let task = null;
try {
const page = await pdfDoc.getPage(pageNum);
const vp = page.getViewport({ scale: targetScale * DPR });
const canvas = wrapper.querySelector("canvas");
if (!canvas) return;
canvas.width = vp.width;
canvas.height = vp.height;
canvas.style.width = Math.round(vp.width / DPR) + "px";
canvas.style.height = Math.round(vp.height / DPR) + "px";
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;
}
}
// ── Page indicator and page navigation ─────────────────────────────────
// Returns the 1-based number of the topmost visible page.
function getCurrentPage() {
const top = container.getBoundingClientRect().top;
for (const wrap of container.querySelectorAll(".page-wrapper")) {
if (wrap.getBoundingClientRect().bottom > top + 4) {
return parseInt(wrap.dataset.page, 10);
}
}
return 1;
}
function refreshPageIndicator() {
if (!pdfDoc) return;
pageIndicator.textContent = getCurrentPage() + " / " + pdfDoc.numPages;
}
// Scroll so that the top of page `pageNum` aligns with the container top.
// getBoundingClientRect() is used so CSS zoom is accounted for correctly.
function scrollToPage(pageNum) {
const wrap = container.querySelector(`.page-wrapper[data-page="${pageNum}"]`);
if (!wrap) return;
container.scrollTop +=
wrap.getBoundingClientRect().top - container.getBoundingClientRect().top;
}
container.addEventListener("scroll", refreshPageIndicator, { passive: true });
// Page-navigation commands posted from the outer Leptos app (fired when
// a global keymap action such as pdf.page.next/prev is dispatched while
// this tab is active, regardless of which element has keyboard focus).
window.addEventListener("message", ev => {
if (ev.data === "pdf.page.next" && pdfDoc)
scrollToPage(Math.min(getCurrentPage() + 1, pdfDoc.numPages));
if (ev.data === "pdf.page.prev" && pdfDoc)
scrollToPage(Math.max(getCurrentPage() - 1, 1));
});
// ── Load ───────────────────────────────────────────────────────────────
async function load() {
if (!refId) { showError("No ref_id in URL."); return; }
setStatus("Loading…");
try {
const url = "brittle://app/pdf?ref_id=" + encodeURIComponent(refId);
pdfDoc = await pdfjsLib.getDocument({ url }).promise;
scale = await fitToWidth();
renderScale = scale;
updateZoomLabel();
setStatus("Rendering…");
await renderAll();
} catch (e) {
showError("Could not load PDF: " + e.message);
}
}
// ── Toolbar buttons ────────────────────────────────────────────────────
document.getElementById("btn-zoom-out").addEventListener("click",
() => applyScale(scale / 1.25));
document.getElementById("btn-zoom-in").addEventListener("click",
() => applyScale(scale * 1.25));
document.getElementById("btn-zoom-fit").addEventListener("click",
async () => applyScale(await fitToWidth()));
// Ctrl+Scroll — anchor at the cursor position.
container.addEventListener("wheel", ev => {
if (!ev.ctrlKey) return;
ev.preventDefault();
const rect = container.getBoundingClientRect();
const anchorY = ev.clientY - rect.top;
const anchorX = ev.clientX - rect.left;
applyScale(scale * (ev.deltaY < 0 ? 1.1 : 1 / 1.1), anchorY, anchorX);
}, { passive: false });
// Keyboard shortcuts (active when the iframe has focus).
// Also forwards every keydown to the parent window so global keybindings
// (tab switching, etc.) keep working when the PDF view has focus.
document.addEventListener("keydown", ev => {
if (ev.target.tagName === "INPUT") return;
if (ev.key === "+" || ev.key === "=") { ev.preventDefault(); applyScale(scale * 1.25); }
if (ev.key === "-") { ev.preventDefault(); applyScale(scale / 1.25); }
if (ev.key === "0") { ev.preventDefault(); fitToWidth().then(applyScale); }
// Forward to the parent Leptos document for the global keymap.
if (window.parent !== window) {
window.parent.postMessage({
type: "brittle:keydown",
key: ev.key,
ctrlKey: ev.ctrlKey,
shiftKey: ev.shiftKey,
altKey: ev.altKey,
metaKey: ev.metaKey,
}, "*");
}
});
load();
}
function showError(msg) {
const b = document.getElementById("error-banner");
b.textContent = msg;
b.style.display = "block";
document.getElementById("status").textContent = "Error";
}
</script>
<script type="module" src="brittle://app/viewer/viewer.js"></script>
</body>
</html>