mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 01:10:08 +02:00
Simplify the thumbnail styling in the viewer
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:
parent
e89da6d940
commit
1b6a83da4a
2 changed files with 56 additions and 71 deletions
|
@ -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.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue