Fix: Adding annotations back to MultiImageViewer (#847)

* Fix: Adding annotations back to MultiImageViewer

* Chore: moving load/create annotations to handleAssetAndRepLoad

src/lib/viewers/BaseViewer.js

@@ -1083,6 +1083,17 @@ class BaseViewer extends EventEmitter {
             })
         );
     }
+
+    /**
+     * Method that is run after all the assets and rep are loaded. In this
+     * base class, it will attempt to load the Box Annotations and create
+     * the annotator
+     *
+     * @return {void}
+     */
+    handleAssetAndRepLoad() {
+        this.loadBoxAnnotations().then(this.createAnnotator);
+    }
 }
 
 export default BaseViewer;

src/lib/viewers/__tests__/BaseViewer-test.js

@@ -1377,4 +1377,21 @@ describe('lib/viewers/BaseViewer', () => {
             expect(combinedOptions.localizedStrings).to.not.be.undefined;
         });
     });
+
+    describe('handleAssetAndRepLoad()', () => {
+        it('should load annotations and create the annotator', (done) => {
+            sandbox.stub(base, 'loadBoxAnnotations').returns(Promise.resolve());
+            sandbox.stub(base, 'createAnnotator').returns(
+                new Promise((resolve) => {
+                    resolve();
+                    done();
+                })
+            );
+
+            base.handleAssetAndRepLoad();
+
+            expect(base.loadBoxAnnotations).to.be.called;
+            expect(base.createAnnotator).to.be.called;
+        });
+    });
 });

src/lib/viewers/doc/DocBaseViewer.js

@@ -288,21 +288,22 @@ class DocBaseViewer extends BaseViewer {
 
         return Promise.all([this.loadAssets(JS, CSS), this.getRepStatus().getPromise()])
             .then(this.handleAssetAndRepLoad)
-            .then(this.loadBoxAnnotations)
-            .then(this.createAnnotator)
             .catch(this.handleAssetError);
     }
 
     /**
      * Loads a document after assets and representation are ready.
      *
+     * @override
      * @return {void}
      */
     handleAssetAndRepLoad() {
         this.setupPdfjs();
         this.initViewer(this.pdfUrl);
         this.initPrint();
         this.initFind();
+
+        super.handleAssetAndRepLoad();
     }
 
     /**

src/lib/viewers/doc/__tests__/DocBaseViewer-test.js

@@ -419,13 +419,12 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                 expect(docBase.setup).to.be.called;
                 expect(docBase.createContentUrlWithAuthParams).to.be.calledWith('foo');
                 expect(docBase.handleAssetAndRepLoad).to.be.called;
-                expect(docBase.loadBoxAnnotations).to.be.called;
             });
         });
     });
 
     describe('handleAssetAndRepLoad', () => {
-        it('should setup pdfjs, init viewer, print, and find', () => {
+        it('should setup pdfjs, init viewer, print, and find', (done) => {
             const url = 'foo';
             docBase.pdfUrl = url;
             docBase.pdfViewer = {
@@ -436,13 +435,22 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
             const initViewerStub = sandbox.stub(docBase, 'initViewer');
             const initPrintStub = sandbox.stub(docBase, 'initPrint');
             const initFindStub = sandbox.stub(docBase, 'initFind');
+            const loadBoxAnnotations = sandbox.stub(docBase, 'loadBoxAnnotations').returns(Promise.resolve());
+            const createAnnotator = sandbox.stub(docBase, 'createAnnotator').returns(
+                new Promise((resolve) => {
+                    resolve();
+                    done();
+                })
+            );
 
             docBase.handleAssetAndRepLoad();
 
             expect(setupPdfjsStub).to.be.called;
             expect(initViewerStub).to.be.calledWith(docBase.pdfUrl);
             expect(initPrintStub).to.be.called;
             expect(initFindStub).to.be.called;
+            expect(loadBoxAnnotations).to.be.called;
+            expect(createAnnotator).to.be.called;
         });
     });
 

src/lib/viewers/image/ImageViewer.js

@@ -17,6 +17,7 @@ class ImageViewer extends ImageBaseViewer {
         this.rotateLeft = this.rotateLeft.bind(this);
         this.updatePannability = this.updatePannability.bind(this);
         this.handleImageDownloadError = this.handleImageDownloadError.bind(this);
+        this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
 
         if (this.isMobile) {
             this.handleOrientationChange = this.handleOrientationChange.bind(this);
@@ -58,15 +59,23 @@ class ImageViewer extends ImageBaseViewer {
         this.bindDOMListeners();
         return this.getRepStatus()
             .getPromise()
-            .then(() => {
-                this.startLoadTimer();
-                this.imageEl.src = downloadUrl;
-            })
-            .then(this.loadBoxAnnotations)
-            .then(this.createAnnotator)
+            .then(() => this.handleAssetAndRepLoad(downloadUrl))
             .catch(this.handleAssetError);
     }
 
+    /**
+     * Loads the image to be viewed
+     *
+     * @override
+     * @return {void}
+     */
+    handleAssetAndRepLoad(downloadUrl) {
+        this.startLoadTimer();
+        this.imageEl.src = downloadUrl;
+
+        super.handleAssetAndRepLoad();
+    }
+
     /**
      * Prefetches assets for an image.
      *

src/lib/viewers/image/MultiImageViewer.js

@@ -22,6 +22,7 @@ class MultiImageViewer extends ImageBaseViewer {
         this.scrollHandler = this.scrollHandler.bind(this);
         this.handlePageChangeFromScroll = this.handlePageChangeFromScroll.bind(this);
         this.handleMultiImageDownloadError = this.handleMultiImageDownloadError.bind(this);
+        this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
     }
 
     /**
@@ -81,18 +82,28 @@ class MultiImageViewer extends ImageBaseViewer {
 
         return this.getRepStatus()
             .getPromise()
-            .then(() => {
-                const template = this.options.representation.content.url_template;
-                this.imageUrls = this.constructImageUrls(template);
+            .then(this.handleAssetAndRepLoad)
+            .catch(this.handleAssetError);
+    }
+
+    /**
+     * Loads the multipart image for viewing
+     *
+     * @override
+     * @return {void}
+     */
+    handleAssetAndRepLoad() {
+        const template = this.options.representation.content.url_template;
+        this.imageUrls = this.constructImageUrls(template);
 
-                // Start load timer
-                this.startLoadTimer();
+        // Start load timer
+        this.startLoadTimer();
 
-                this.imageUrls.forEach((imageUrl, index) => this.setupImageEls(imageUrl, index));
+        this.imageUrls.forEach((imageUrl, index) => this.setupImageEls(imageUrl, index));
 
-                this.wrapperEl.addEventListener('scroll', this.scrollHandler, true);
-            })
-            .catch(this.handleAssetError);
+        this.wrapperEl.addEventListener('scroll', this.scrollHandler, true);
+
+        super.handleAssetAndRepLoad();
     }
 
     /**

src/lib/viewers/image/__tests__/ImageViewer-test.js

@@ -583,4 +583,28 @@ describe('lib/viewers/image/ImageViewer', () => {
             });
         });
     });
+
+    describe('handleAssetAndRepLoad', () => {
+        it('should setup image src', (done) => {
+            const url = 'foo';
+            const imageEl = document.createElement('img');
+
+            image.imageEl = imageEl;
+            const startLoadTimer = sandbox.stub(image, 'startLoadTimer');
+            const loadBoxAnnotations = sandbox.stub(image, 'loadBoxAnnotations').returns(Promise.resolve());
+            const createAnnotator = sandbox.stub(image, 'createAnnotator').returns(
+                new Promise((resolve) => {
+                    resolve();
+                    done();
+                })
+            );
+
+            image.handleAssetAndRepLoad(url);
+
+            expect(startLoadTimer).to.be.called;
+            expect(imageEl.url).to.be.equal(url);
+            expect(loadBoxAnnotations).to.be.called;
+            expect(createAnnotator).to.be.called;
+        });
+    });
 });