feat(annotations): Handle annotations staged change event

box · Sep 8, 2020 · 4d0e9a6 · 4d0e9a6
1 parent f37cb3a
commit 4d0e9a6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 35 deletions.
diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts
@@ -16,12 +16,11 @@ export enum AnnotationType {
     NONE = 'none',
     REGION = 'region',
 }
-export type ClickHandler = ({ event }: { event: MouseEvent }) => void;
+export type ClickHandler = ({ event, type }: { event: MouseEvent; type: AnnotationType }) => void;
 export type Options = {
     fileId: string;
+    onClick?: ClickHandler;
     onEscape?: () => void;
-    onHighlightClick?: ClickHandler;
-    onRegionClick?: ClickHandler;
     showHighlightText: boolean;
 };
 
@@ -92,6 +91,8 @@ export default class AnnotationControls {
         this.hasInit = false;
     }
 
+    public getActiveType = (): AnnotationType => this.activeType;
+
     /**
      * Deactivate current control button
      */
@@ -167,7 +168,7 @@ export default class AnnotationControls {
             this.updateButton(type);
         }
 
-        onClick({ event });
+        onClick({ event, type: this.activeType });
     };
 
     /**
@@ -210,22 +211,16 @@ export default class AnnotationControls {
     /**
      * Initialize the annotation controls with options.
      */
-    public init({
-        fileId,
-        onEscape = noop,
-        onRegionClick = noop,
-        onHighlightClick = noop,
-        showHighlightText = false,
-    }: Options): void {
+    public init({ fileId, onEscape = noop, onClick = noop, showHighlightText = false }: Options): void {
         if (this.hasInit) {
             return;
         }
         const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP);
         groupElement.setAttribute('data-resin-feature', 'annotations');
 
-        this.addButton(AnnotationType.REGION, onRegionClick, groupElement, fileId);
+        this.addButton(AnnotationType.REGION, onClick, groupElement, fileId);
         if (showHighlightText) {
-            this.addButton(AnnotationType.HIGHLIGHT, onHighlightClick, groupElement, fileId);
+            this.addButton(AnnotationType.HIGHLIGHT, onClick, groupElement, fileId);
         }
 
         this.onEscape = onEscape;

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -122,6 +122,8 @@ class BaseViewer extends EventEmitter {
     /** @property {boolean} - Stores whether the Viewer has been setup yet. */
     isSetup = false;
 
+    isAnnotationTemporary = false;
+
     /**
      * [constructor]
      *
@@ -151,12 +153,11 @@ 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.handleAnnotationControlsClick = this.handleAnnotationControlsClick.bind(this);
         this.handleAnnotationControlsEscape = this.handleAnnotationControlsEscape.bind(this);
+        this.handleAnnotationStagedChangeEvent = this.handleAnnotationStagedChangeEvent.bind(this);
         this.handleFullscreenEnter = this.handleFullscreenEnter.bind(this);
         this.handleFullscreenExit = this.handleFullscreenExit.bind(this);
-        this.handleHighlightClick = this.handleHighlightClick.bind(this);
-        this.handleRegionClick = this.handleRegionClick.bind(this);
         this.createAnnotator = this.createAnnotator.bind(this);
         this.viewerLoadHandler = this.viewerLoadHandler.bind(this);
         this.initAnnotations = this.initAnnotations.bind(this);
@@ -1016,7 +1017,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);
+            this.annotator.addListener('creator_staged_change', this.handleAnnotationStagedChangeEvent);
         }
     }
 
@@ -1071,23 +1072,15 @@ class BaseViewer extends EventEmitter {
     }
 
     /**
-     * Handler for annotation toolbar highlight text button click event.
+     * Handler for annotation controls button click event.
      *
      * @private
+     * @param {AnnotationType} type one of annotation types
      * @return {void}
      */
-    handleHighlightClick() {
-        this.annotator.toggleAnnotationMode(AnnotationType.HIGHLIGHT);
-    }
-
-    /**
-     * Handler for annotation toolbar region comment button click event.
-     *
-     * @private
-     * @return {void}
-     */
-    handleRegionClick() {
-        this.annotator.toggleAnnotationMode(AnnotationType.REGION);
+    handleAnnotationControlsClick({ type }) {
+        this.isAnnotationTemporary = false;
+        this.annotator.toggleAnnotationMode(type);
     }
 
     /**
@@ -1259,12 +1252,29 @@ class BaseViewer extends EventEmitter {
         // we remain in create mode
         if (status === 'success') {
             this.annotator.emit('annotations_active_set', id);
+
+            if (this.annotationControls && this.isAnnotationTemporary) {
+                this.annotationControls.setActive(AnnotationType.NONE);
+                this.isAnnotationTemporary = false;
+            }
         }
     }
 
-    handleAnnotationModeChangeEvent({ mode }) {
-        if (this.annotationControls) {
-            this.annotationControls.setMode(mode);
+    handleAnnotationStagedChangeEvent({ status, type }) {
+        if (!this.annotationControls) {
+            return;
+        }
+
+        if (!this.isAnnotationTemporary && this.annotationControls.getActiveType() !== AnnotationType.NONE) {
+            return;
+        }
+
+        if (status === 'cancel') {
+            this.annotationControls.setActive(AnnotationType.NONE);
+            this.isAnnotationTemporary = false;
+        } else {
+            this.annotationControls.setActive(type);
+            this.isAnnotationTemporary = true;
         }
     }
 

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -1101,8 +1101,7 @@ class DocBaseViewer extends BaseViewer {
             this.annotationControls.init({
                 fileId: this.options.file.id,
                 onEscape: this.handleAnnotationControlsEscape,
-                onHighlightClick: this.handleHighlightClick,
-                onRegionClick: this.handleRegionClick,
+                onClick: this.handleAnnotationControlsClick,
                 showHighlightText: this.options.showAnnotationsHighlightText,
             });
         }