pdf.js/web/pdf_thumbnail_viewer.js
Jonas Jenwald 66aabe3ec7 [api-minor] Add support for toggling of Optional Content in the viewer (issue 12096)
*Besides, obviously, adding viewer support:* This patch attempts to improve the general API for Optional Content Groups slightly, by adding a couple of new methods for interacting with the (more complex) data structures of `OptionalContentConfig`-instances. (Thus allowing us to mark some of the data as "private", given that it probably shouldn't be manipulated directly.)

By utilizing not just the "raw" Optional Content Groups, but the data from the `/Order` array when available, we can thus display the Layers in a proper tree-structure with collapsible headings for PDF documents that utilizes that feature.

Note that it's possible to reset all Optional Content Groups to their default visibility state, simply by double-clicking on the Layers-button in the sidebar.
(Currently that's indicated in the Layers-button tooltip, which is obviously easy to overlook, however it's probably the best we can do for now without adding more buttons, or even a dropdown-toolbar, to the sidebar.)

Also, the current Layers-button icons are a little rough around the edges, quite literally, but given that the viewer will soon have its UI modernized anyway they hopefully suffice in the meantime.

To give users *full* control of the visibility of the various Optional Content Groups, even those which according to the `/Order` array should not (by default) be toggleable in the UI, this patch will place those under a *custom* heading which:
 - Is collapsed by default, and placed at the bottom of the Layers-tree, to be a bit less obtrusive.
 - Uses a slightly different formatting, compared to the "regular" headings.
 - Is localizable.

Finally, note that the thumbnails are *purposely* always rendered with all Optional Content Groups at their default visibility state, since that seems the most useful and it's also consistent with other viewers.
To ensure that this works as intended, we'll thus disable the `PDFThumbnailView.setImage` functionality when the Optional Content Groups have been changed in the viewer. (This obviously means that we'll re-render thumbnails instead of using the rendered pages. However, this situation ought to be rare enough for this to not really be a problem.)
2020-08-30 16:28:40 +02:00

312 lines
8.7 KiB
JavaScript

/* Copyright 2012 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
getVisibleElements,
isValidRotation,
NullL10n,
scrollIntoView,
watchScroll,
} from "./ui_utils.js";
import { PDFThumbnailView } from "./pdf_thumbnail_view.js";
const THUMBNAIL_SCROLL_MARGIN = -19;
const THUMBNAIL_SELECTED_CLASS = "selected";
/**
* @typedef {Object} PDFThumbnailViewerOptions
* @property {HTMLDivElement} container - The container for the thumbnail
* elements.
* @property {EventBus} eventBus - The application event bus.
* @property {IPDFLinkService} linkService - The navigation/linking service.
* @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
* @property {IL10n} l10n - Localization service.
*/
/**
* Viewer control to display thumbnails for pages in a PDF document.
*
* @implements {IRenderableView}
*/
class PDFThumbnailViewer {
/**
* @param {PDFThumbnailViewerOptions} options
*/
constructor({
container,
eventBus,
linkService,
renderingQueue,
l10n = NullL10n,
}) {
this.container = container;
this.linkService = linkService;
this.renderingQueue = renderingQueue;
this.l10n = l10n;
this.scroll = watchScroll(this.container, this._scrollUpdated.bind(this));
this._resetView();
eventBus._on("optionalcontentconfigchanged", () => {
// Ensure that the thumbnails always render with the *default* optional
// content configuration.
this._setImageDisabled = true;
});
}
/**
* @private
*/
_scrollUpdated() {
this.renderingQueue.renderHighestPriority();
}
getThumbnail(index) {
return this._thumbnails[index];
}
/**
* @private
*/
_getVisibleThumbs() {
return getVisibleElements(this.container, this._thumbnails);
}
scrollThumbnailIntoView(pageNumber) {
if (!this.pdfDocument) {
return;
}
const thumbnailView = this._thumbnails[pageNumber - 1];
if (!thumbnailView) {
console.error('scrollThumbnailIntoView: Invalid "pageNumber" parameter.');
return;
}
if (pageNumber !== this._currentPageNumber) {
const prevThumbnailView = this._thumbnails[this._currentPageNumber - 1];
// Remove the highlight from the previous thumbnail...
prevThumbnailView.div.classList.remove(THUMBNAIL_SELECTED_CLASS);
// ... and add the highlight to the new thumbnail.
thumbnailView.div.classList.add(THUMBNAIL_SELECTED_CLASS);
}
const visibleThumbs = this._getVisibleThumbs();
const numVisibleThumbs = visibleThumbs.views.length;
// If the thumbnail isn't currently visible, scroll it into view.
if (numVisibleThumbs > 0) {
const first = visibleThumbs.first.id;
// Account for only one thumbnail being visible.
const last = numVisibleThumbs > 1 ? visibleThumbs.last.id : first;
let shouldScroll = false;
if (pageNumber <= first || pageNumber >= last) {
shouldScroll = true;
} else {
visibleThumbs.views.some(function (view) {
if (view.id !== pageNumber) {
return false;
}
shouldScroll = view.percent < 100;
return true;
});
}
if (shouldScroll) {
scrollIntoView(thumbnailView.div, { top: THUMBNAIL_SCROLL_MARGIN });
}
}
this._currentPageNumber = pageNumber;
}
get pagesRotation() {
return this._pagesRotation;
}
set pagesRotation(rotation) {
if (!isValidRotation(rotation)) {
throw new Error("Invalid thumbnails rotation angle.");
}
if (!this.pdfDocument) {
return;
}
if (this._pagesRotation === rotation) {
return; // The rotation didn't change.
}
this._pagesRotation = rotation;
for (let i = 0, ii = this._thumbnails.length; i < ii; i++) {
this._thumbnails[i].update(rotation);
}
}
cleanup() {
PDFThumbnailView.cleanup();
}
/**
* @private
*/
_resetView() {
this._thumbnails = [];
this._currentPageNumber = 1;
this._pageLabels = null;
this._pagesRotation = 0;
this._optionalContentConfigPromise = null;
this._pagesRequests = new WeakMap();
this._setImageDisabled = false;
// Remove the thumbnails from the DOM.
this.container.textContent = "";
}
setDocument(pdfDocument) {
if (this.pdfDocument) {
this._cancelRendering();
this._resetView();
}
this.pdfDocument = pdfDocument;
if (!pdfDocument) {
return;
}
const firstPagePromise = pdfDocument.getPage(1);
const optionalContentConfigPromise = pdfDocument.getOptionalContentConfig();
firstPagePromise
.then(firstPdfPage => {
this._optionalContentConfigPromise = optionalContentConfigPromise;
const pagesCount = pdfDocument.numPages;
const viewport = firstPdfPage.getViewport({ scale: 1 });
const checkSetImageDisabled = () => {
return this._setImageDisabled;
};
for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
const thumbnail = new PDFThumbnailView({
container: this.container,
id: pageNum,
defaultViewport: viewport.clone(),
optionalContentConfigPromise,
linkService: this.linkService,
renderingQueue: this.renderingQueue,
checkSetImageDisabled,
disableCanvasToImageConversion: false,
l10n: this.l10n,
});
this._thumbnails.push(thumbnail);
}
// Set the first `pdfPage` immediately, since it's already loaded,
// rather than having to repeat the `PDFDocumentProxy.getPage` call in
// the `this._ensurePdfPageLoaded` method before rendering can start.
const firstThumbnailView = this._thumbnails[0];
if (firstThumbnailView) {
firstThumbnailView.setPdfPage(firstPdfPage);
}
// Ensure that the current thumbnail is always highlighted on load.
const thumbnailView = this._thumbnails[this._currentPageNumber - 1];
thumbnailView.div.classList.add(THUMBNAIL_SELECTED_CLASS);
})
.catch(reason => {
console.error("Unable to initialize thumbnail viewer", reason);
});
}
/**
* @private
*/
_cancelRendering() {
for (let i = 0, ii = this._thumbnails.length; i < ii; i++) {
if (this._thumbnails[i]) {
this._thumbnails[i].cancelRendering();
}
}
}
/**
* @param {Array|null} labels
*/
setPageLabels(labels) {
if (!this.pdfDocument) {
return;
}
if (!labels) {
this._pageLabels = null;
} else if (
!(Array.isArray(labels) && this.pdfDocument.numPages === labels.length)
) {
this._pageLabels = null;
console.error("PDFThumbnailViewer_setPageLabels: Invalid page labels.");
} else {
this._pageLabels = labels;
}
// Update all the `PDFThumbnailView` instances.
for (let i = 0, ii = this._thumbnails.length; i < ii; i++) {
const label = this._pageLabels && this._pageLabels[i];
this._thumbnails[i].setPageLabel(label);
}
}
/**
* @param {PDFThumbnailView} thumbView
* @returns {PDFPage}
* @private
*/
_ensurePdfPageLoaded(thumbView) {
if (thumbView.pdfPage) {
return Promise.resolve(thumbView.pdfPage);
}
if (this._pagesRequests.has(thumbView)) {
return this._pagesRequests.get(thumbView);
}
const promise = this.pdfDocument
.getPage(thumbView.id)
.then(pdfPage => {
if (!thumbView.pdfPage) {
thumbView.setPdfPage(pdfPage);
}
this._pagesRequests.delete(thumbView);
return pdfPage;
})
.catch(reason => {
console.error("Unable to get page for thumb view", reason);
// Page error -- there is nothing that can be done.
this._pagesRequests.delete(thumbView);
});
this._pagesRequests.set(thumbView, promise);
return promise;
}
forceRendering() {
const visibleThumbs = this._getVisibleThumbs();
const thumbView = this.renderingQueue.getHighestPriority(
visibleThumbs,
this._thumbnails,
this.scroll.down
);
if (thumbView) {
this._ensurePdfPageLoaded(thumbView).then(() => {
this.renderingQueue.renderView(thumbView);
});
return true;
}
return false;
}
}
export { PDFThumbnailViewer };