Only display the page-loadingIcon when rendering is currently running
Given that we only render one page at a time, this will lead to only *one* page-loadingIcon being displayed at a time even if multiple pages are visible in the viewer. However, this will make it clearer which page is the currently parsing/rendering one. To simplify toggling of the page-loadingIcon visibility, the existing `PDFPageView.renderingState` is changed into a getter/setter-pair with the latter also handling the page-loadingIcon state. An additional benefit of these changes is that the `PDFViewer` no longer needs to handling toggling of page-loadingIcon visibility during rendering, since there can only ever be *one* page rendering. Finally, this may also simplify future changes w.r.t. page-loadingIcon visibility toggling (using e.g. a show-timeout).
This commit is contained in:
parent
3110d1f29a
commit
a578571f59
@ -120,6 +120,8 @@ class PDFPageView {
|
|||||||
|
|
||||||
#previousRotation = null;
|
#previousRotation = null;
|
||||||
|
|
||||||
|
#renderingState = RenderingStates.INITIAL;
|
||||||
|
|
||||||
#useThumbnailCanvas = {
|
#useThumbnailCanvas = {
|
||||||
initialOptionalContent: true,
|
initialOptionalContent: true,
|
||||||
regularAnnotations: true,
|
regularAnnotations: true,
|
||||||
@ -167,7 +169,6 @@ class PDFPageView {
|
|||||||
|
|
||||||
this.paintTask = null;
|
this.paintTask = null;
|
||||||
this.paintedViewportMap = new WeakMap();
|
this.paintedViewportMap = new WeakMap();
|
||||||
this.renderingState = RenderingStates.INITIAL;
|
|
||||||
this.resume = null;
|
this.resume = null;
|
||||||
this._renderError = null;
|
this._renderError = null;
|
||||||
if (
|
if (
|
||||||
@ -227,6 +228,30 @@ class PDFPageView {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get renderingState() {
|
||||||
|
return this.#renderingState;
|
||||||
|
}
|
||||||
|
|
||||||
|
set renderingState(state) {
|
||||||
|
this.#renderingState = state;
|
||||||
|
|
||||||
|
switch (state) {
|
||||||
|
case RenderingStates.INITIAL:
|
||||||
|
case RenderingStates.PAUSED:
|
||||||
|
this.loadingIconDiv?.classList.add("notVisible");
|
||||||
|
break;
|
||||||
|
case RenderingStates.RUNNING:
|
||||||
|
this.loadingIconDiv?.classList.remove("notVisible");
|
||||||
|
break;
|
||||||
|
case RenderingStates.FINISHED:
|
||||||
|
if (this.loadingIconDiv) {
|
||||||
|
this.loadingIconDiv.remove();
|
||||||
|
delete this.loadingIconDiv;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#setDimensions() {
|
#setDimensions() {
|
||||||
const { viewport } = this;
|
const { viewport } = this;
|
||||||
if (this.pdfPage) {
|
if (this.pdfPage) {
|
||||||
@ -496,17 +521,6 @@ class PDFPageView {
|
|||||||
this.loadingIconDiv?.setAttribute("aria-label", msg);
|
this.loadingIconDiv?.setAttribute("aria-label", msg);
|
||||||
});
|
});
|
||||||
div.append(this.loadingIconDiv);
|
div.append(this.loadingIconDiv);
|
||||||
} else {
|
|
||||||
this.toggleLoadingIconSpinner();
|
|
||||||
div.append(this.loadingIconDiv);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
(typeof PDFJSDev === "undefined" ||
|
|
||||||
PDFJSDev.test("!PRODUCTION || GENERIC")) &&
|
|
||||||
this._isStandalone
|
|
||||||
) {
|
|
||||||
this.toggleLoadingIconSpinner(/* viewVisible = */ true);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -775,13 +789,6 @@ class PDFPageView {
|
|||||||
return this.viewport.convertToPdfPoint(x, y);
|
return this.viewport.convertToPdfPoint(x, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @ignore
|
|
||||||
*/
|
|
||||||
toggleLoadingIconSpinner(viewVisible = false) {
|
|
||||||
this.loadingIconDiv?.classList.toggle("notVisible", !viewVisible);
|
|
||||||
}
|
|
||||||
|
|
||||||
draw() {
|
draw() {
|
||||||
if (this.renderingState !== RenderingStates.INITIAL) {
|
if (this.renderingState !== RenderingStates.INITIAL) {
|
||||||
console.error("Must be in new state before drawing");
|
console.error("Must be in new state before drawing");
|
||||||
@ -791,11 +798,6 @@ class PDFPageView {
|
|||||||
|
|
||||||
if (!pdfPage) {
|
if (!pdfPage) {
|
||||||
this.renderingState = RenderingStates.FINISHED;
|
this.renderingState = RenderingStates.FINISHED;
|
||||||
|
|
||||||
if (this.loadingIconDiv) {
|
|
||||||
this.loadingIconDiv.remove();
|
|
||||||
delete this.loadingIconDiv;
|
|
||||||
}
|
|
||||||
return Promise.reject(new Error("pdfPage is not loaded"));
|
return Promise.reject(new Error("pdfPage is not loaded"));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -888,11 +890,6 @@ class PDFPageView {
|
|||||||
this._renderError = error;
|
this._renderError = error;
|
||||||
|
|
||||||
this.renderingState = RenderingStates.FINISHED;
|
this.renderingState = RenderingStates.FINISHED;
|
||||||
|
|
||||||
if (this.loadingIconDiv) {
|
|
||||||
this.loadingIconDiv.remove();
|
|
||||||
delete this.loadingIconDiv;
|
|
||||||
}
|
|
||||||
this._resetZoomLayer(/* removeFromDOM = */ true);
|
this._resetZoomLayer(/* removeFromDOM = */ true);
|
||||||
|
|
||||||
// Ensure that the thumbnails won't become partially (or fully) blank,
|
// Ensure that the thumbnails won't become partially (or fully) blank,
|
||||||
|
@ -1626,23 +1626,6 @@ class PDFViewer {
|
|||||||
return this.scroll.down;
|
return this.scroll.down;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Only show the `loadingIcon`-spinner on visible pages (see issue 14242).
|
|
||||||
*/
|
|
||||||
#toggleLoadingIconSpinner(visibleIds) {
|
|
||||||
for (const id of visibleIds) {
|
|
||||||
const pageView = this._pages[id - 1];
|
|
||||||
pageView?.toggleLoadingIconSpinner(/* viewVisible = */ true);
|
|
||||||
}
|
|
||||||
for (const pageView of this.#buffer) {
|
|
||||||
if (visibleIds.has(pageView.id)) {
|
|
||||||
// Handled above, since the "buffer" may not contain all visible pages.
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
pageView.toggleLoadingIconSpinner(/* viewVisible = */ false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
forceRendering(currentlyVisiblePages) {
|
forceRendering(currentlyVisiblePages) {
|
||||||
const visiblePages = currentlyVisiblePages || this._getVisiblePages();
|
const visiblePages = currentlyVisiblePages || this._getVisiblePages();
|
||||||
const scrollAhead = this.#getScrollAhead(visiblePages);
|
const scrollAhead = this.#getScrollAhead(visiblePages);
|
||||||
@ -1656,7 +1639,6 @@ class PDFViewer {
|
|||||||
scrollAhead,
|
scrollAhead,
|
||||||
preRenderExtra
|
preRenderExtra
|
||||||
);
|
);
|
||||||
this.#toggleLoadingIconSpinner(visiblePages.ids);
|
|
||||||
|
|
||||||
if (pageView) {
|
if (pageView) {
|
||||||
this.#ensurePdfPageLoaded(pageView).then(() => {
|
this.#ensurePdfPageLoaded(pageView).then(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user