Merge pull request #9832 from Snuffleupagus/scrollMode-fixes

Fix a number of regressions/inefficiencies introduced by adding Scroll/Spread modes to the viewer (PR 9208 follow-up)

web/base_viewer.js

@@ -181,7 +181,9 @@ class BaseViewer {
     if (this.removePageBorders) {
       this.viewer.classList.add('removePageBorders');
     }
-    this._updateScrollModeClasses();
+    if (this.scrollMode !== ScrollMode.VERTICAL) {
+      this._updateScrollModeClasses();
+    }
   }
 
   get pagesCount() {
@@ -595,11 +597,11 @@ class BaseViewer {
       if (!currentPage) {
         return;
       }
-      let hPadding = (this.isInPresentationMode || this.removePageBorders) ?
+      const noPadding = (this.isInPresentationMode || this.removePageBorders);
-        0 : SCROLLBAR_PADDING;
+      let hPadding = noPadding ? 0 : SCROLLBAR_PADDING;
-      let vPadding = (this.isInPresentationMode || this.removePageBorders) ?
+      let vPadding = noPadding ? 0 : VERTICAL_PADDING;
-        0 : VERTICAL_PADDING;
+
-      if (this.scrollMode === ScrollMode.HORIZONTAL) {
+      if (!noPadding && this._isScrollModeHorizontal) {
         const temp = hPadding;
         hPadding = vPadding;
         vPadding = temp;
@@ -832,6 +834,10 @@ class BaseViewer {
     this.container.focus();
   }
 
+  get _isScrollModeHorizontal() {
+    throw new Error('Not implemented: _isScrollModeHorizontal');
+  }
+
   get isInPresentationMode() {
     return this.presentationModeState === PresentationModeState.FULLSCREEN;
   }
@@ -904,8 +910,8 @@ class BaseViewer {
 
   forceRendering(currentlyVisiblePages) {
     let visiblePages = currentlyVisiblePages || this._getVisiblePages();
-    let scrollAhead = this.scrollMode === ScrollMode.HORIZONTAL ?
+    let scrollAhead = (this._isScrollModeHorizontal ?
-      this.scroll.right : this.scroll.down;
+                       this.scroll.right : this.scroll.down);
     let pageView = this.renderingQueue.getHighestPriority(visiblePages,
                                                           this._pages,
                                                           scrollAhead);
@@ -1018,37 +1024,26 @@ class BaseViewer {
   }
 
   setScrollMode(mode) {
-    if (mode !== this.scrollMode) {
+    if (!Number.isInteger(mode) || !Object.values(ScrollMode).includes(mode)) {
-      this.scrollMode = mode;
+      throw new Error(`Invalid scroll mode: ${mode}`);
-      this._updateScrollModeClasses();
-      this.eventBus.dispatch('scrollmodechanged', { mode, });
-      const pageNumber = this._currentPageNumber;
-      // Non-numeric scale modes can be sensitive to the scroll orientation.
-      // Call this before re-scrolling to the current page, to ensure that any
-      // changes in scale don't move the current page.
-      if (isNaN(this._currentScaleValue)) {
-        this._setScale(this._currentScaleValue, this.isInPresentationMode);
-      }
-      this.scrollPageIntoView({ pageNumber, });
-      this.update();
     }
+    this.scrollMode = mode;
   }
 
   _updateScrollModeClasses() {
-    const mode = this.scrollMode, { classList, } = this.viewer;
+    // No-op in the base class.
-    classList.toggle('scrollHorizontal', mode === ScrollMode.HORIZONTAL);
-    classList.toggle('scrollWrapped', mode === ScrollMode.WRAPPED);
   }
 
   setSpreadMode(mode) {
-    if (mode !== this.spreadMode) {
+    if (!Number.isInteger(mode) || !Object.values(SpreadMode).includes(mode)) {
-      this.spreadMode = mode;
+      throw new Error(`Invalid spread mode: ${mode}`);
-      this.eventBus.dispatch('spreadmodechanged', { mode, });
-      this._regroupSpreads();
     }
+    this.spreadMode = mode;
   }
 
-  _regroupSpreads() {}
+  _regroupSpreads() {
+    // No-op in the base class.
+  }
 }
 
 export {

web/pdf_single_page_viewer.js

@@ -142,6 +142,11 @@ class PDFSinglePageViewer extends BaseViewer {
       location: this._location,
     });
   }
+
+  get _isScrollModeHorizontal() {
+    // The Scroll/Spread modes are never used in `PDFSinglePageViewer`.
+    return shadow(this, '_isScrollModeHorizontal', false);
+  }
 }
 
 export {

web/pdf_viewer.js

@@ -23,7 +23,7 @@ class PDFViewer extends BaseViewer {
   }
 
   _scrollIntoView({ pageDiv, pageSpot = null, }) {
-    if (!pageSpot) {
+    if (!pageSpot && !this.isInPresentationMode) {
       const left = pageDiv.offsetLeft + pageDiv.clientLeft;
       const right = left + pageDiv.clientWidth;
       const { scrollLeft, clientWidth, } = this.container;
@@ -87,14 +87,72 @@ class PDFViewer extends BaseViewer {
     });
   }
 
-  _regroupSpreads() {
+  get _isScrollModeHorizontal() {
-    const container = this._setDocumentViewerElement, pages = this._pages;
+    // Used to ensure that pre-rendering of the next/previous page works
-    while (container.firstChild) {
+    // correctly, since Scroll/Spread modes are ignored in Presentation Mode.
-      container.firstChild.remove();
+    return (this.isInPresentationMode ?
+            false : this.scrollMode === ScrollMode.HORIZONTAL);
+  }
+
+  setScrollMode(mode) {
+    if (mode === this.scrollMode) {
+      return;
     }
+    super.setScrollMode(mode);
+
+    this.eventBus.dispatch('scrollmodechanged', { mode, });
+    this._updateScrollModeClasses();
+
+    if (!this.pdfDocument) {
+      return;
+    }
+    const pageNumber = this._currentPageNumber;
+    // Non-numeric scale modes can be sensitive to the scroll orientation.
+    // Call this before re-scrolling to the current page, to ensure that any
+    // changes in scale don't move the current page.
+    if (isNaN(this._currentScaleValue)) {
+      this._setScale(this._currentScaleValue, true);
+    }
+    this.scrollPageIntoView({ pageNumber, });
+    this.update();
+  }
+
+  _updateScrollModeClasses() {
+    const { scrollMode, viewer, } = this;
+
+    if (scrollMode === ScrollMode.HORIZONTAL) {
+      viewer.classList.add('scrollHorizontal');
+    } else {
+      viewer.classList.remove('scrollHorizontal');
+    }
+    if (scrollMode === ScrollMode.WRAPPED) {
+      viewer.classList.add('scrollWrapped');
+    } else {
+      viewer.classList.remove('scrollWrapped');
+    }
+  }
+
+  setSpreadMode(mode) {
+    if (mode === this.spreadMode) {
+      return;
+    }
+    super.setSpreadMode(mode);
+
+    this.eventBus.dispatch('spreadmodechanged', { mode, });
+    this._regroupSpreads();
+  }
+
+  _regroupSpreads() {
+    if (!this.pdfDocument) {
+      return;
+    }
+    const viewer = this.viewer, pages = this._pages;
+    // Temporarily remove all the pages from the DOM.
+    viewer.textContent = '';
+
     if (this.spreadMode === SpreadMode.NONE) {
       for (let i = 0, iMax = pages.length; i < iMax; ++i) {
-        container.appendChild(pages[i].div);
+        viewer.appendChild(pages[i].div);
       }
     } else {
       const parity = this.spreadMode - 1;
@@ -103,10 +161,10 @@ class PDFViewer extends BaseViewer {
         if (spread === null) {
           spread = document.createElement('div');
           spread.className = 'spread';
-          container.appendChild(spread);
+          viewer.appendChild(spread);
         } else if (i % 2 === parity) {
           spread = spread.cloneNode(false);
-          container.appendChild(spread);
+          viewer.appendChild(spread);
         }
         spread.appendChild(pages[i].div);
       }

web/secondary_toolbar.js

@@ -190,23 +190,41 @@ class SecondaryToolbar {
 
   _bindScrollModeListener(buttons) {
     this.eventBus.on('scrollmodechanged', function(evt) {
-      buttons.scrollVerticalButton.classList.toggle('toggled',
+      buttons.scrollVerticalButton.classList.remove('toggled');
-        evt.mode === ScrollMode.VERTICAL);
+      buttons.scrollHorizontalButton.classList.remove('toggled');
-      buttons.scrollHorizontalButton.classList.toggle('toggled',
+      buttons.scrollWrappedButton.classList.remove('toggled');
-        evt.mode === ScrollMode.HORIZONTAL);
+
-      buttons.scrollWrappedButton.classList.toggle('toggled',
+      switch (evt.mode) {
-        evt.mode === ScrollMode.WRAPPED);
+        case ScrollMode.VERTICAL:
+          buttons.scrollVerticalButton.classList.add('toggled');
+          break;
+        case ScrollMode.HORIZONTAL:
+          buttons.scrollHorizontalButton.classList.add('toggled');
+          break;
+        case ScrollMode.WRAPPED:
+          buttons.scrollWrappedButton.classList.add('toggled');
+          break;
+      }
     });
   }
 
   _bindSpreadModeListener(buttons) {
     this.eventBus.on('spreadmodechanged', function(evt) {
-      buttons.spreadNoneButton.classList.toggle('toggled',
+      buttons.spreadNoneButton.classList.remove('toggled');
-        evt.mode === SpreadMode.NONE);
+      buttons.spreadOddButton.classList.remove('toggled');
-      buttons.spreadOddButton.classList.toggle('toggled',
+      buttons.spreadEvenButton.classList.remove('toggled');
-        evt.mode === SpreadMode.ODD);
+
-      buttons.spreadEvenButton.classList.toggle('toggled',
+      switch (evt.mode) {
-        evt.mode === SpreadMode.EVEN);
+        case SpreadMode.NONE:
+          buttons.spreadNoneButton.classList.add('toggled');
+          break;
+        case SpreadMode.ODD:
+          buttons.spreadOddButton.classList.add('toggled');
+          break;
+        case SpreadMode.EVEN:
+          buttons.spreadEvenButton.classList.add('toggled');
+          break;
+      }
     });
   }