feat(annotations): Handle annotations creator status change event

src/lib/AnnotationControlsFSM.ts

@@ -12,6 +12,7 @@ export enum AnnotationInput {
     CANCEL = 'cancel',
     CLICK = 'click',
     CREATE = 'create',
+    STARTED = 'started',
     SUCCESS = 'success',
     UPDATE = 'update',
 }
@@ -53,7 +54,7 @@ export default class AnnotationControlsFSM {
 
         switch (this.currentState) {
             case AnnotationState.NONE:
-                if (input === AnnotationInput.CREATE) {
+                if (input === AnnotationInput.CREATE || input === AnnotationInput.STARTED) {
                     this.currentState = modeTempStateMap[mode] || AnnotationState.NONE;
                 }
                 break;

src/lib/__tests__/AnnotationControlsFSM-test.js

@@ -29,6 +29,18 @@ describe('lib/AnnotationControlsFSM', () => {
                 nextState: AnnotationState.REGION_TEMP,
                 output: AnnotationMode.REGION,
             },
+            {
+                input: AnnotationInput.STARTED,
+                mode: AnnotationMode.HIGHLIGHT,
+                nextState: AnnotationState.HIGHLIGHT_TEMP,
+                output: AnnotationMode.HIGHLIGHT,
+            },
+            {
+                input: AnnotationInput.STARTED,
+                mode: AnnotationMode.REGION,
+                nextState: AnnotationState.REGION_TEMP,
+                output: AnnotationMode.REGION,
+            },
         ].forEach(({ input, mode, nextState, output }) => {
             it(`should go to state ${nextState} and output ${output} if input is ${input} and mode is ${mode}`, () => {
                 const annotationControlsFSM = new AnnotationControlsFSM();
@@ -52,16 +64,16 @@ describe('lib/AnnotationControlsFSM', () => {
     describe('AnnotationState.HIGHLIGHT/REGION', () => {
         // Stay in the same state
         [AnnotationState.HIGHLIGHT, AnnotationState.REGION].forEach(state => {
-            [AnnotationInput.CANCEL, AnnotationInput.CREATE, AnnotationInput.SUCCESS, AnnotationInput.SUCCESS].forEach(
-                input => {
+            Object.values(AnnotationInput)
+                .filter(input => input !== AnnotationInput.CLICK)
+                .forEach(input => {
                     it(`should stay in state ${state} if input is ${input}`, () => {
                         const annotationControlsFSM = new AnnotationControlsFSM(state);
 
                         expect(annotationControlsFSM.transition(input)).to.equal(state);
                         expect(annotationControlsFSM.getState()).to.equal(state);
                     });
-                },
-            );
+                });
         });
 
         // Go to different states
@@ -108,7 +120,6 @@ describe('lib/AnnotationControlsFSM', () => {
     });
 
     describe('AnnotationState.HIGHLIGHT_TEMP/REGION_TEMP', () => {
-        // Go to none state
         [
             {
                 state: AnnotationState.HIGHLIGHT_TEMP,
@@ -119,6 +130,7 @@ describe('lib/AnnotationControlsFSM', () => {
                 stateMode: AnnotationMode.REGION,
             },
         ].forEach(({ state, stateMode }) => {
+            // Go to none state
             [
                 {
                     input: AnnotationInput.CANCEL,
@@ -139,7 +151,8 @@ describe('lib/AnnotationControlsFSM', () => {
                 });
             });
 
-            [AnnotationInput.CREATE, AnnotationInput.UPDATE].forEach(input => {
+            // Stay in the same state
+            [AnnotationInput.CREATE, AnnotationInput.STARTED, AnnotationInput.UPDATE].forEach(input => {
                 it(`should stay in state ${state} if input is ${input}`, () => {
                     const annotationControlsFSM = new AnnotationControlsFSM(state);
 

src/lib/viewers/BaseViewer.js

@@ -156,7 +156,7 @@ class BaseViewer extends EventEmitter {
         this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
         this.handleAnnotationControlsClick = this.handleAnnotationControlsClick.bind(this);
         this.handleAnnotationControlsEscape = this.handleAnnotationControlsEscape.bind(this);
-        this.handleAnnotationStagedChangeEvent = this.handleAnnotationStagedChangeEvent.bind(this);
+        this.handleAnnotationCreatorChangeEvent = this.handleAnnotationCreatorChangeEvent.bind(this);
         this.handleFullscreenEnter = this.handleFullscreenEnter.bind(this);
         this.handleFullscreenExit = this.handleFullscreenExit.bind(this);
         this.createAnnotator = this.createAnnotator.bind(this);
@@ -1018,7 +1018,8 @@ class BaseViewer extends EventEmitter {
 
         if (this.areNewAnnotationsEnabled() && this.annotationControls) {
             this.annotator.addListener('annotations_create', this.handleAnnotationCreateEvent);
-            this.annotator.addListener('creator_staged_change', this.handleAnnotationStagedChangeEvent);
+            this.annotator.addListener('creator_staged_change', this.handleAnnotationCreatorChangeEvent);
+            this.annotator.addListener('creator_status_change', this.handleAnnotationCreatorChangeEvent);
         }
     }
 
@@ -1261,7 +1262,7 @@ class BaseViewer extends EventEmitter {
         }
     }
 
-    handleAnnotationStagedChangeEvent({ status, type }) {
+    handleAnnotationCreatorChangeEvent({ status, type }) {
         if (!this.annotationControls) {
             return;
         }

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

@@ -1257,7 +1257,11 @@ describe('lib/viewers/BaseViewer', () => {
             );
             expect(base.annotator.addListener).to.be.calledWith(
                 'creator_staged_change',
-                base.handleAnnotationStagedChangeEvent,
+                base.handleAnnotationCreatorChangeEvent,
+            );
+            expect(base.annotator.addListener).to.be.calledWith(
+                'creator_status_change',
+                base.handleAnnotationCreatorChangeEvent,
             );
             expect(base.emit).to.be.calledWith('annotator', base.annotator);
         });
@@ -1808,13 +1812,13 @@ describe('lib/viewers/BaseViewer', () => {
         });
     });
 
-    describe('handleAnnotationStagedChangeEvent()', () => {
+    describe('handleAnnotationCreatorChangeEvent()', () => {
         it('should set mode', () => {
             base.annotationControls = {
                 destroy: sandbox.stub(),
                 setMode: sandbox.stub(),
             };
-            base.handleAnnotationStagedChangeEvent({ status: 'create', type: 'highlight' });
+            base.handleAnnotationCreatorChangeEvent({ status: 'create', type: 'highlight' });
 
             expect(base.annotationControls.setMode).to.be.calledWith('highlight');
         });