diff --git a/web/app.js b/web/app.js index 58d8a4ce6..ee6001ef4 100644 --- a/web/app.js +++ b/web/app.js @@ -667,12 +667,23 @@ const PDFViewerApplication = { if (appConfig.sidebar) { this.pdfSidebar = new PDFSidebar({ elements: appConfig.sidebar, - pdfViewer, - pdfThumbnailViewer: this.pdfThumbnailViewer, eventBus, l10n, }); this.pdfSidebar.onToggled = this.forceRendering.bind(this); + this.pdfSidebar.onUpdateThumbnails = () => { + // Use the rendered pages to set the corresponding thumbnail images. + for (const pageView of pdfViewer.getCachedPageViews()) { + if (pageView.renderingState === RenderingStates.FINISHED) { + this.pdfThumbnailViewer + .getThumbnail(pageView.id - 1) + ?.setImage(pageView); + } + } + this.pdfThumbnailViewer.scrollThumbnailIntoView( + pdfViewer.currentPageNumber + ); + }; } }, diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js index f1eabd6f0..69c47bc02 100644 --- a/web/pdf_sidebar.js +++ b/web/pdf_sidebar.js @@ -16,7 +16,6 @@ import { docStyle, PresentationModeState, - RenderingStates, SidebarView, toggleCheckedBtn, toggleExpandedBtn, @@ -30,8 +29,6 @@ const UI_NOTIFICATION_CLASS = "pdfSidebarNotification"; /** * @typedef {Object} PDFSidebarOptions * @property {PDFSidebarElements} elements - The DOM elements. - * @property {PDFViewer} pdfViewer - The document viewer. - * @property {PDFThumbnailViewer} pdfThumbnailViewer - The thumbnail viewer. * @property {EventBus} eventBus - The application event bus. * @property {IL10n} l10n - The localization service. */ @@ -82,7 +79,7 @@ class PDFSidebar { /** * @param {PDFSidebarOptions} options */ - constructor({ elements, pdfViewer, pdfThumbnailViewer, eventBus, l10n }) { + constructor({ elements, eventBus, l10n }) { this.isOpen = false; this.active = SidebarView.THUMBS; this.isInitialViewSet = false; @@ -93,9 +90,7 @@ class PDFSidebar { * the viewers (PDFViewer/PDFThumbnailViewer) are updated correctly. */ this.onToggled = null; - - this.pdfViewer = pdfViewer; - this.pdfThumbnailViewer = pdfThumbnailViewer; + this.onUpdateThumbnails = null; this.outerContainer = elements.outerContainer; this.sidebarContainer = elements.sidebarContainer; @@ -246,7 +241,7 @@ class PDFSidebar { return; // Opening will trigger rendering and dispatch the event. } if (forceRendering) { - this.#updateThumbnailViewer(); + this.onUpdateThumbnails(); this.onToggled(); } if (isViewChanged) { @@ -264,7 +259,7 @@ class PDFSidebar { this.outerContainer.classList.add("sidebarMoving", "sidebarOpen"); if (this.active === SidebarView.THUMBS) { - this.#updateThumbnailViewer(); + this.onUpdateThumbnails(); } this.onToggled(); this.#dispatchEvent(); @@ -305,21 +300,6 @@ class PDFSidebar { }); } - #updateThumbnailViewer() { - const { pdfViewer, pdfThumbnailViewer } = this; - - // Use the rendered pages to set the corresponding thumbnail images. - const pagesCount = pdfViewer.pagesCount; - for (let pageIndex = 0; pageIndex < pagesCount; pageIndex++) { - const pageView = pdfViewer.getPageView(pageIndex); - if (pageView?.renderingState === RenderingStates.FINISHED) { - const thumbnailView = pdfThumbnailViewer.getThumbnail(pageIndex); - thumbnailView.setImage(pageView); - } - } - pdfThumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber); - } - #showUINotification() { this.toggleButton.setAttribute( "data-l10n-id", @@ -428,7 +408,7 @@ class PDFSidebar { evt.state === PresentationModeState.NORMAL && this.visibleView === SidebarView.THUMBS ) { - this.#updateThumbnailViewer(); + this.onUpdateThumbnails(); } }); diff --git a/web/pdf_viewer.js b/web/pdf_viewer.js index 63cc21f72..14b18e3be 100644 --- a/web/pdf_viewer.js +++ b/web/pdf_viewer.js @@ -341,6 +341,10 @@ class PDFViewer { return this._pages[index]; } + getCachedPageViews() { + return new Set(this.#buffer); + } + /** * @type {boolean} - True if all {PDFPageView} objects are initialized. */