feat(annotations): Handle mode change events

src/lib/AnnotationControls.ts

@@ -141,11 +141,25 @@ export default class AnnotationControls {
     };
 
     /**
-     * Region comment button click handler
+     * Set the mode. If the mode is different from what is currently saved in state,
+     * then reset the current controls and apply the active state based on the provided mode.
+     */
+    public setMode(mode: AnnotationMode): void {
+        // Only update buttons if mode has changed
+        if (this.currentMode === mode) {
+            return;
+        }
+
+        this.resetControls();
+        this.currentMode = mode;
+        this.updateButton(mode);
+    }
+
+    /**
+     * Annotation control button click handler
      */
     private handleClick = (onClick: ClickHandler, mode: AnnotationMode) => (event: MouseEvent): void => {
         const prevMode = this.currentMode;
-
         this.resetControls();
 
         if (prevMode !== mode) {

src/lib/__tests__/AnnotationControls-test.js

@@ -261,4 +261,29 @@ describe('lib/AnnotationControls', () => {
             expect(stubs.buttonElement.setAttribute).to.be.calledWith('data-resin-fileId', '0');
         });
     });
+
+    describe('setMode()', () => {
+        beforeEach(() => {
+            annotationControls.resetControls = sandbox.stub();
+            annotationControls.updateButton = sandbox.stub();
+        });
+
+        it('should do nothing if mode is the same', () => {
+            annotationControls.currentMode = 'region';
+
+            annotationControls.setMode('region');
+
+            expect(annotationControls.resetControls).not.to.be.called;
+            expect(annotationControls.updateButton).not.to.be.called;
+        });
+
+        it('should update controls if mode is not the same', () => {
+            annotationControls.currentMode = 'region';
+
+            annotationControls.setMode('highlight');
+
+            expect(annotationControls.resetControls).to.be.called;
+            expect(annotationControls.updateButton).to.be.calledWith('highlight');
+        });
+    });
 });

src/lib/viewers/BaseViewer.js

@@ -151,6 +151,7 @@ class BaseViewer extends EventEmitter {
         this.mobileZoomEndHandler = this.mobileZoomEndHandler.bind(this);
         this.handleAnnotatorEvents = this.handleAnnotatorEvents.bind(this);
         this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
+        this.handleAnnotationModeChangeEvent = this.handleAnnotationModeChangeEvent.bind(this);
         this.handleAnnotationControlsEscape = this.handleAnnotationControlsEscape.bind(this);
         this.handleFullscreenEnter = this.handleFullscreenEnter.bind(this);
         this.handleFullscreenExit = this.handleFullscreenExit.bind(this);
@@ -1015,6 +1016,7 @@ class BaseViewer extends EventEmitter {
 
         if (this.areNewAnnotationsEnabled() && this.annotationControls) {
             this.annotator.addListener('annotations_create', this.handleAnnotationCreateEvent);
+            this.annotator.addListener('annotations_mode_change', this.handleAnnotationModeChangeEvent);
         }
     }
 
@@ -1260,6 +1262,12 @@ class BaseViewer extends EventEmitter {
         }
     }
 
+    handleAnnotationModeChangeEvent({ mode }) {
+        if (this.annotationControls) {
+            this.annotationControls.setMode(mode);
+        }
+    }
+
     /**
      * Creates combined options to give to the annotator
      *