Fix: Add clickHandlers back for all enabled annotation modes (#248)

- click handlers were moved into docBase which meant that the image
  point annotation button no longer had a handler associated with it
- annotationmodeclickhandler not overwritten in ImageBaseViewer

src/lib/viewers/BaseViewer.js

@@ -767,9 +767,16 @@ class BaseViewer extends EventEmitter {
      * @param {string} mode - Target annotation mode
      * @return {Function|null} Click handler
      */
-    /* eslint-disable no-unused-vars */
-    getAnnotationModeClickHandler(mode) {}
-    /* eslint-enable no-unused-vars */
+    getAnnotationModeClickHandler(mode) {
+        if (!mode || !this.isAnnotatable(mode)) {
+            return null;
+        }
+
+        const eventName = `toggle${mode}annotationmode`;
+        return () => {
+            this.emit(eventName);
+        };
+    }
 
     /**
      * Disables viewer controls

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

@@ -843,4 +843,31 @@ describe('lib/viewers/BaseViewer', () => {
             expect(buttonEl.classList.contains(constants.CLASS_HIDDEN)).to.be.false;
         });
     });
+
+    describe('getAnnotationModeClickHandler()', () => {
+        beforeEach(() => {
+            stubs.isAnnotatable = sandbox.stub(base, 'isAnnotatable').returns(false);
+        });
+
+        it('should return null if you cannot annotate', () => {
+            const handler = base.getAnnotationModeClickHandler('point');
+            expect(stubs.isAnnotatable).to.be.called;
+            expect(handler).to.equal(null);
+        });
+
+        it('should return the toggle point mode handler', () => {
+            stubs.isAnnotatable.returns(true);
+            sandbox.stub(base, 'emit');
+            base.annotator = {
+                togglePointAnnotationHandler: () => {}
+            };
+
+            const handler = base.getAnnotationModeClickHandler('point');
+            expect(stubs.isAnnotatable).to.be.called;
+            expect(handler).to.be.a('function');
+
+            handler(event);
+            expect(base.emit).to.have.been.calledWith('togglepointannotationmode');
+        });
+    });
 });

src/lib/viewers/doc/DocBaseViewer.js

@@ -442,20 +442,6 @@ class DocBaseViewer extends BaseViewer {
         this.pdfViewer.currentScaleValue = newScale;
     }
 
-    /**
-     * @inheritdoc
-     */
-    getAnnotationModeClickHandler(mode) {
-        if (!mode || !this.isAnnotatable(mode)) {
-            return null;
-        }
-
-        const eventName = `toggle${mode}annotationmode`;
-        return () => {
-            this.emit(eventName);
-        };
-    }
-
     /**
      * Handles keyboard events for document viewer.
      *

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

@@ -699,33 +699,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
         });
     });
 
-    describe('getPointModeClickHandler()', () => {
-        beforeEach(() => {
-            stubs.isAnnotatable = sandbox.stub(docBase, 'isAnnotatable').returns(false);
-        });
-
-        it('should return null if you cannot annotate', () => {
-            const handler = docBase.getAnnotationModeClickHandler('point');
-            expect(stubs.isAnnotatable).to.be.called;
-            expect(handler).to.equal(null);
-        });
-
-        it('should return the toggle point mode handler', () => {
-            stubs.isAnnotatable.returns(true);
-            sandbox.stub(docBase, 'emit');
-            docBase.annotator = {
-                togglePointAnnotationHandler: () => {}
-            };
-
-            const handler = docBase.getAnnotationModeClickHandler('point');
-            expect(stubs.isAnnotatable).to.be.called;
-            expect(handler).to.be.a('function');
-
-            handler(event);
-            expect(docBase.emit).to.have.been.calledWith('togglepointannotationmode');
-        });
-    });
-
     describe('onKeyDown()', () => {
         beforeEach(() => {
             stubs.previousPage = sandbox.stub(docBase, 'previousPage');

src/lib/viewers/image/ImageBaseViewer.js

@@ -347,15 +347,16 @@ class ImageBaseViewer extends BaseViewer {
     /**
      * @inheritdoc
      */
-    getPointModeClickHandler() {
-        if (!this.isAnnotatable('point')) {
+    getAnnotationModeClickHandler(mode) {
+        if (!mode || !this.isAnnotatable(mode)) {
             return null;
         }
 
+        const eventName = `toggle${mode}annotationmode`;
         return () => {
             this.imageEl.classList.remove(CSS_CLASS_ZOOMABLE);
             this.imageEl.classList.remove(CSS_CLASS_PANNABLE);
-            this.emit('togglepointannotationmode');
+            this.emit(eventName);
         };
     }
 

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

@@ -26,6 +26,12 @@ describe('lib/viewers/image/ImageBaseViewer', () => {
         imageBase = new ImageBaseViewer(containerEl);
         imageBase.containerEl = containerEl;
         imageBase.imageEl = document.createElement('div');
+
+        event = {
+            preventDefault: sandbox.stub(),
+            stopPropagation: sandbox.stub(),
+            touches: [0, 0]
+        };
     });
 
     afterEach(() => {
@@ -38,6 +44,7 @@ describe('lib/viewers/image/ImageBaseViewer', () => {
 
         imageBase = null;
         stubs = {};
+        event = {};
     });
 
     describe('destroy()', () => {
@@ -468,6 +475,38 @@ describe('lib/viewers/image/ImageBaseViewer', () => {
         });
     });
 
+    describe('getAnnotationModeClickHandler()', () => {
+        beforeEach(() => {
+            stubs.isAnnotatable = sandbox.stub(imageBase, 'isAnnotatable').returns(false);
+        });
+
+        it('should return null if you cannot annotate', () => {
+            const handler = imageBase.getAnnotationModeClickHandler('point');
+            expect(stubs.isAnnotatable).to.be.called;
+            expect(handler).to.equal(null);
+        });
+
+        it('should return the toggle point mode handler', () => {
+            stubs.isAnnotatable.returns(true);
+            stubs.emitter = sandbox.stub(imageBase, 'emit');
+            imageBase.annotator = {
+                togglePointAnnotationHandler: () => {}
+            };
+            imageBase.imageEl.classList.add(CSS_CLASS_PANNABLE);
+            imageBase.imageEl.classList.add(CSS_CLASS_ZOOMABLE);
+
+            const handler = imageBase.getAnnotationModeClickHandler('point');
+            expect(stubs.isAnnotatable).to.be.called;
+            expect(handler).to.be.a('function');
+
+            handler(event);
+
+            expect(imageBase.imageEl).to.not.have.class(CSS_CLASS_PANNABLE);
+            expect(imageBase.imageEl).to.not.have.class(CSS_CLASS_ZOOMABLE);
+            expect(imageBase.emit).to.have.been.calledWith('togglepointannotationmode');
+        });
+    });
+
     describe('finishLoading()', () => {
         beforeEach(() => {
             imageBase.loaded = false;

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

@@ -587,7 +587,7 @@ describe('lib/viewers/image/ImageViewer', () => {
     describe('getPointModeClickHandler()', () => {
         it('should do nothing if not annotatable', () => {
             sandbox.stub(image, 'isAnnotatable').returns(false);
-            const handler = image.getPointModeClickHandler();
+            const handler = image.getAnnotationModeClickHandler('point');
             expect(handler).to.be.null;
         });
 
@@ -601,7 +601,7 @@ describe('lib/viewers/image/ImageViewer', () => {
             image.imageEl.classList.add(CSS_CLASS_PANNABLE);
             sandbox.stub(image, 'isAnnotatable').returns(true);
 
-            const handler = image.getPointModeClickHandler();
+            const handler = image.getAnnotationModeClickHandler('point');
             expect(handler).to.be.a('function');
 
             handler(event);