feat(annotations): Toggle region annotation mode

src/lib/AnnotationControls.ts

@@ -1,4 +1,7 @@
+import { EventEmitter } from 'events';
 import noop from 'lodash/noop';
+
+import { ANNOTATION_MODE } from './constants';
 import { ICON_REGION_COMMENT } from './icons/icons';
 import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls';
 import fullscreen from './Fullscreen';
@@ -9,31 +12,32 @@ export const CLASS_REGION_BUTTON = 'bp-AnnotationControls-regionBtn';
 export const CLASS_BUTTON_ACTIVE = 'is-active';
 export const CLASS_GROUP_HIDE = 'is-hidden';
 
-export type RegionHandler = ({ isRegionActive, event }: { isRegionActive: boolean; event: MouseEvent }) => void;
+export type AnnotationMode = 'draw' | 'highlight' | 'region' | null;
+export type RegionHandler = ({ activeControl, event }: { activeControl: AnnotationMode; event: MouseEvent }) => void;
 export type Options = {
     onRegionClick?: RegionHandler;
 };
 
 declare const __: (key: string) => string;
 
 export default class AnnotationControls {
-    /** @property {Controls} - Controls object */
+    private annotator: EventEmitter;
+
     private controls: Controls;
 
-    /** @property {HTMLElement} - Controls element */
     private controlsElement: HTMLElement;
 
-    /** @property {boolean} - Region comment mode active state */
-    private isRegionActive = false;
+    private currentActiveControl: AnnotationMode = null;
 
     /**
      * [constructor]
      */
-    constructor(controls: Controls) {
+    constructor(controls: Controls, annotator: EventEmitter) {
         if (!controls || !(controls instanceof Controls)) {
             throw Error('controls must be an instance of Controls');
         }
 
+        this.annotator = annotator;
         this.controls = controls;
         this.controlsElement = controls.controlsEl;
 
@@ -46,6 +50,7 @@ export default class AnnotationControls {
     public destroy(): void {
         fullscreen.removeListener('enter', this.handleFullscreenEnter);
         fullscreen.removeListener('exit', this.handleFullscreenExit);
+        this.annotator.removeListener('annotationcreate', this.deactivateCurrentControl);
     }
 
     /**
@@ -54,6 +59,7 @@ export default class AnnotationControls {
     private attachEventHandlers(): void {
         fullscreen.addListener('enter', this.handleFullscreenEnter);
         fullscreen.addListener('exit', this.handleFullscreenExit);
+        this.annotator.addListener('annotationcreate', this.deactivateCurrentControl);
     }
 
     /**
@@ -84,21 +90,53 @@ export default class AnnotationControls {
     private handleFullscreenExit = (): void => this.handleFullscreenChange(false);
 
     /**
-     * Region comment button click handler
+     * Deactive current control button
      */
-    private handleRegionClick = (onRegionClick: RegionHandler) => (event: MouseEvent): void => {
+    public deactivateCurrentControl = (): void => {
+        if (!this.currentActiveControl) {
+            return;
+        }
+
+        switch (this.currentActiveControl) {
+            case ANNOTATION_MODE.region:
+                this.currentActiveControl = null;
+                this.updateRegionButton();
+                break;
+            default:
+                this.currentActiveControl = null;
+        }
+    };
+
+    /**
+     * Update region button UI
+     */
+    private updateRegionButton = (): void => {
         const regionButtonElement = this.controlsElement.querySelector(`.${CLASS_REGION_BUTTON}`);
 
         if (regionButtonElement) {
-            this.isRegionActive = !this.isRegionActive;
-            if (this.isRegionActive) {
+            if (this.currentActiveControl === ANNOTATION_MODE.region) {
                 regionButtonElement.classList.add(CLASS_BUTTON_ACTIVE);
             } else {
                 regionButtonElement.classList.remove(CLASS_BUTTON_ACTIVE);
             }
         }
+    };
+
+    /**
+     * Region comment button click handler
+     */
+    private handleRegionClick = (onRegionClick: RegionHandler) => (event: MouseEvent): void => {
+        if (this.currentActiveControl === ANNOTATION_MODE.region) {
+            this.deactivateCurrentControl();
+        } else {
+            if (this.currentActiveControl) {
+                this.deactivateCurrentControl();
+            }
+            this.currentActiveControl = ANNOTATION_MODE.region as AnnotationMode;
+            this.updateRegionButton();
+        }
 
-        onRegionClick({ isRegionActive: this.isRegionActive, event });
+        onRegionClick({ activeControl: this.currentActiveControl, event });
     };
 
     /**

src/lib/__tests__/AnnotationControls-test.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-expressions */
+import { ANNOTATION_MODE } from '../constants';
 import { ICON_REGION_COMMENT } from '../icons/icons';
 import AnnotationControls, {
     CLASS_ANNOTATIONS_GROUP,
@@ -21,8 +22,8 @@ describe('lib/AnnotationControls', () => {
 
     beforeEach(() => {
         fixture.load('__tests__/AnnotationControls-test.html');
-        const controls = new Controls(document.getElementById('test-annotation-controls-container'));
-
+        stubs.annotatorAddListener = sandbox.stub();
+        stubs.annotatorRemoveListener = sandbox.stub();
         stubs.classListAdd = sandbox.stub();
         stubs.classListRemove = sandbox.stub();
         stubs.fullscreenAddListener = sandbox.stub(fullscreen, 'addListener');
@@ -34,7 +35,12 @@ describe('lib/AnnotationControls', () => {
             },
         });
 
-        annotationControls = new AnnotationControls(controls);
+        const controls = new Controls(document.getElementById('test-annotation-controls-container'));
+        const annotator = {
+            addListener: stubs.annotatorAddListener,
+            removeListener: stubs.annotatorRemoveListener,
+        };
+        annotationControls = new AnnotationControls(controls, annotator);
         annotationControls.controlsElement.querySelector = stubs.querySelector;
     });
 
@@ -48,11 +54,15 @@ describe('lib/AnnotationControls', () => {
 
     describe('constructor()', () => {
         it('should create the correct DOM structure', () => {
+            expect(annotationControls.annotator).not.to.be.undefined;
             expect(annotationControls.controls).not.to.be.undefined;
+            expect(annotationControls.controlsElement).not.to.be.undefined;
+            expect(annotationControls.currentActiveControl).to.be.null;
         });
 
         it('should attach event listeners', () => {
             expect(stubs.fullscreenAddListener).to.be.calledTwice;
+            expect(stubs.annotatorAddListener).to.be.called;
         });
 
         it('should throw an exception if controls is not provided', () => {
@@ -69,6 +79,7 @@ describe('lib/AnnotationControls', () => {
             annotationControls.destroy();
 
             expect(stubs.fullscreenRemoveListener).to.be.calledTwice;
+            expect(stubs.annotatorRemoveListener).to.be.called;
         });
     });
 
@@ -94,23 +105,27 @@ describe('lib/AnnotationControls', () => {
     });
 
     describe('handleRegionClick()', () => {
+        beforeEach(() => {
+            stubs.event = sandbox.stub({});
+        });
+
         it('should activate region button then deactivate', () => {
-            expect(annotationControls.isRegionActive).to.be.false;
+            expect(annotationControls.currentActiveControl).to.be.null;
 
             annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event);
-            expect(annotationControls.isRegionActive).to.be.true;
+            expect(annotationControls.currentActiveControl).to.equal(ANNOTATION_MODE.region);
             expect(stubs.classListAdd).to.be.calledWith(CLASS_BUTTON_ACTIVE);
 
             annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event);
-            expect(annotationControls.isRegionActive).to.be.false;
+            expect(annotationControls.currentActiveControl).to.equal(null);
             expect(stubs.classListRemove).to.be.calledWith(CLASS_BUTTON_ACTIVE);
         });
 
         it('should call onRegionClick', () => {
             annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event);
 
             expect(stubs.onRegionClick).to.be.calledWith({
-                isRegionActive: true,
+                activeControl: ANNOTATION_MODE.region,
                 event: stubs.event,
             });
         });
@@ -127,4 +142,22 @@ describe('lib/AnnotationControls', () => {
             expect(stubs.classListRemove).to.be.calledWith(CLASS_GROUP_HIDE);
         });
     });
+
+    describe('deactivateCurrentControl()', () => {
+        it('should not change if no current active control', () => {
+            annotationControls.deactivateCurrentControl();
+
+            expect(annotationControls.currentActiveControl).to.be.null;
+        });
+
+        it('should call updateRegionButton if current control is region', () => {
+            stubs.updateRegion = sandbox.stub(annotationControls, 'updateRegionButton');
+            annotationControls.currentActiveControl = ANNOTATION_MODE.region;
+
+            annotationControls.deactivateCurrentControl();
+
+            expect(annotationControls.currentActiveControl).to.be.null;
+            expect(stubs.updateRegion).to.be.called;
+        });
+    });
 });

src/lib/constants.js

@@ -131,6 +131,12 @@ export const ANNOTATOR_EVENT = {
     scale: 'scaleannotations',
 };
 
+export const ANNOTATION_MODE = {
+    draw: 'draw',
+    highlight: 'highlight',
+    region: 'region',
+};
+
 export const BROWSERS = {
     CHROME: 'Chrome',
     EDGE: 'Edge',

src/lib/viewers/doc/DocBaseViewer.js

@@ -1016,7 +1016,7 @@ class DocBaseViewer extends BaseViewer {
         this.pageControls = new PageControls(this.controls, this.docEl);
         this.zoomControls = new ZoomControls(this.controls);
         if (this.options.showAnnotationsControls) {
-            this.annotationControls = new AnnotationControls(this.controls);
+            this.annotationControls = new AnnotationControls(this.controls, this.annotator);
         }
         this.pageControls.addListener('pagechange', this.setPage);
         this.bindControlListeners();
@@ -1113,7 +1113,9 @@ class DocBaseViewer extends BaseViewer {
      * @private
      * @return {void}
      */
-    regionClickHandler() {}
+    regionClickHandler({ activeControl }) {
+        this.annotator.toggleAnnotationMode(activeControl);
+    }
 
     /**
      * Handler for 'pagesinit' event.