ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-08 09:20:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify the thumbnail styling in the viewer

Browse source 
This patch tries to simplify, and improve, the thumbnail styling:
 - For rendered thumbnails there's one less DOM-element per thumbnail, which can't hurt in longer documents.
 - Use CSS-variables to set the dimensions of all relevant DOM-elements at once.
 - Simplify the visual styling of the thumbnails, e.g. remove the border since the viewer no longer has visible borders around pages, since the relevant CSS-rules are quite old code.
   These changes also, at least in my opinion, makes the relevant CSS-rules much easier to understand and work with.
 - Make it easier to work on e.g. [bug 1690428](https://bugzilla.mozilla.org/show_bug.cgi?id=1690428) without affecting the other sidebarViews.
This commit is contained in:
Jonas Jenwald 2023-04-30 11:01:42 +02:00
parent e89da6d940
commit 1b6a83da4a
2 changed files with 56 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

54
web/pdf_thumbnail_view.js
View file

@ -24,7 +24,6 @@ import { RenderingCancelledException } from "pdfjs-lib";
const DRAW_UPSCALE_FACTOR = 2; // See comment in `PDFThumbnailView.draw` below.
const MAX_NUM_SCALING_STEPS = 3;
const THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
const THUMBNAIL_WIDTH = 98; // px
/**
@ -107,15 +106,6 @@ class PDFThumbnailView {
this.renderTask = null;
this.renderingState = RenderingStates.INITIAL;
this.resume = null;
const pageWidth = this.viewport.width,
pageHeight = this.viewport.height,
pageRatio = pageWidth / pageHeight;
this.canvasWidth = THUMBNAIL_WIDTH;
this.canvasHeight = (this.canvasWidth / pageRatio) | 0;
this.scale = this.canvasWidth / pageWidth;
this.l10n = l10n;
const anchor = document.createElement("a");
@ -133,19 +123,30 @@ class PDFThumbnailView {
div.className = "thumbnail";
div.setAttribute("data-page-number", this.id);
this.div = div;
this.#updateDims();
const ring = document.createElement("div");
ring.className = "thumbnailSelectionRing";
const borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
ring.style.width = this.canvasWidth + borderAdjustment + "px";
ring.style.height = this.canvasHeight + borderAdjustment + "px";
this.ring = ring;
const img = document.createElement("div");
img.className = "thumbnailImage";
this._placeholderImg = img;
div.append(ring);
div.append(img);
anchor.append(div);
container.append(anchor);
}
#updateDims() {
const { width, height } = this.viewport;
const ratio = width / height;
this.canvasWidth = THUMBNAIL_WIDTH;
this.canvasHeight = (this.canvasWidth / ratio) | 0;
this.scale = this.canvasWidth / width;
const { style } = this.div;
style.setProperty("--thumbnail-width", `${this.canvasWidth}px`);
style.setProperty("--thumbnail-height", `${this.canvasHeight}px`);
}
setPdfPage(pdfPage) {
this.pdfPage = pdfPage;
this.pdfPageRotate = pdfPage.rotate;
@ -158,19 +159,9 @@ class PDFThumbnailView {
this.cancelRendering();
this.renderingState = RenderingStates.INITIAL;
const pageWidth = this.viewport.width,
pageHeight = this.viewport.height,
pageRatio = pageWidth / pageHeight;
this.canvasHeight = (this.canvasWidth / pageRatio) | 0;
this.scale = this.canvasWidth / pageWidth;
this.div.removeAttribute("data-loaded");
const ring = this.ring;
ring.textContent = ""; // Remove the thumbnail from the DOM.
const borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
ring.style.width = this.canvasWidth + borderAdjustment + "px";
ring.style.height = this.canvasHeight + borderAdjustment + "px";
this.image?.replaceWith(this._placeholderImg);
this.#updateDims();
if (this.canvas) {
// Zeroing the width and height causes Firefox to release graphics
@ -243,14 +234,11 @@ class PDFThumbnailView {
this._thumbPageCanvas.then(msg => {
image.setAttribute("aria-label", msg);
});
image.style.width = this.canvasWidth + "px";
image.style.height = this.canvasHeight + "px";
image.src = reducedCanvas.toDataURL();
this.image = image;
this.div.setAttribute("data-loaded", true);
this.ring.append(image);
this._placeholderImg.replaceWith(image);
// Zeroing the width and height causes Firefox to release graphics
// resources immediately, which can greatly reduce memory consumption.