Preserve scroll position when toggling sidebar in VitalSource PDFs

Use the `preserveScrollPosition` utility that was created for HTML / EPUB
side-by-side mode to preserve scroll position when side-by-side mode is toggled
in VitalSource PDFs.

 - Add a way to synchronously update the hidden text layer in VS PDFs

 - Wrap image size updates in VS PDFs in `preserveScrollPosition`

src/annotator/integrations/image-text-layer.js

@@ -194,6 +194,20 @@ export class ImageTextLayer {
     this._listeners.add(window, 'resize', this._updateBoxSizes);
   }
 
+  /**
+   * Synchronously update the text layer to match the size and position of
+   * the image.
+   *
+   * Normally the text layer is resized automatically but asynchronously when
+   * the image size changes (eg. due to the window being resized) and updates
+   * are debounced. This method can be used to force an immediate update if
+   * needed.
+   */
+  updateSync() {
+    this._updateBoxSizes();
+    this._updateBoxSizes.flush();
+  }
+
   destroy() {
     this.container.remove();
     this._listeners.removeAll();

src/annotator/integrations/test/image-text-layer-test.js

@@ -277,6 +277,28 @@ describe('ImageTextLayer', () => {
     assert.calledOnce(measureImageSpy);
   });
 
+  describe('#updateSync', () => {
+    it('flushes text layer size updates immediately', () => {
+      const { image } = createPageImage();
+      const imageText = 'some text in the image';
+
+      const textLayer = createTextLayer(
+        image,
+        createCharBoxes(imageText),
+        imageText
+      );
+
+      // Spy on logic that is invoked each time a resize event is handled.
+      const measureImageSpy = sinon.spy(image, 'getBoundingClientRect');
+
+      image.style.width = '250px';
+      image.style.height = '250px';
+      textLayer.updateSync();
+
+      assert.calledOnce(measureImageSpy);
+    });
+  });
+
   describe('#destroy', () => {
     it('removes the <hypothesis-text-layer> element', () => {
       const { container, image } = createPageImage();

src/annotator/integrations/test/vitalsource-test.js

@@ -299,6 +299,7 @@ describe('annotator/integrations/vitalsource', () => {
         fakeImageTextLayer = {
           container: document.createElement('div'),
           destroy: sinon.stub(),
+          updateSync: sinon.stub(),
         };
         FakeImageTextLayer = sinon.stub().returns(fakeImageTextLayer);
 
@@ -414,11 +415,13 @@ describe('annotator/integrations/vitalsource', () => {
           integration.fitSideBySide({ expanded: true, width: sidebarWidth });
           assert.equal(fakePageImage.parentElement.style.textAlign, 'left');
           assert.equal(fakePageImage.style.width, `${expectedWidth}px`);
+          assert.calledOnce(fakeImageTextLayer.updateSync);
 
           // Deactivate side-by-side mode. Style overrides should be removed.
           integration.fitSideBySide({ expanded: false });
           assert.equal(fakePageImage.parentElement.style.textAlign, '');
           assert.equal(fakePageImage.style.width, '');
+          assert.calledTwice(fakeImageTextLayer.updateSync);
         });
 
         it('does not resize page image if there is not enough space', () => {

src/annotator/integrations/vitalsource.js

 import { ListenerCollection } from '../../shared/listener-collection';
 import { HTMLIntegration } from './html';
+import { preserveScrollPosition } from './html-side-by-side';
 import { ImageTextLayer } from './image-text-layer';
 import { injectClient } from '../hypothesis-injector';
 
@@ -292,22 +293,31 @@ export class VitalSourceContentIntegration {
       const bookContainer = /** @type {HTMLElement} */ (
         bookImage.parentElement
       );
+      const textLayer = this._textLayer;
 
       // Update the PDF image size and alignment to fit alongside the sidebar.
       // `ImageTextLayer` will handle adjusting the text layer to match.
       const newWidth = window.innerWidth - layout.width;
       const minWidth = 250;
 
-      if (layout.expanded && newWidth > minWidth) {
-        // The VS book viewer sets `text-align: center` on the <body> element
-        // by default, which centers the book image in the page. When the sidebar
-        // is open we need the image to be left-aligned.
-        bookContainer.style.textAlign = 'left';
-        bookImage.style.width = `${newWidth}px`;
-      } else {
-        bookContainer.style.textAlign = '';
-        bookImage.style.width = '';
-      }
+      preserveScrollPosition(() => {
+        if (layout.expanded && newWidth > minWidth) {
+          // The VS book viewer sets `text-align: center` on the <body> element
+          // by default, which centers the book image in the page. When the sidebar
+          // is open we need the image to be left-aligned.
+          bookContainer.style.textAlign = 'left';
+          bookImage.style.width = `${newWidth}px`;
+        } else {
+          bookContainer.style.textAlign = '';
+          bookImage.style.width = '';
+        }
+
+        // Update text layer to match new image dimensions immediately. This
+        // is needed so that `preserveScrollPosition` can see how the content
+        // has shifted when this callback returns.
+        textLayer.updateSync();
+      });
+
       return layout.expanded;
     } else {
       return this._htmlIntegration.fitSideBySide(layout);