feat(annotations): Emit annotations color (#1309)

* feat(annotations): Emit annotations color * feat(annotations): Address comments Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · Dec 16, 2020 · d1a9e08 · d1a9e08
1 parent 97b18c6
commit d1a9e08
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 3 deletions.
diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -135,6 +135,7 @@ export const ANNOTATOR_EVENT = {
     fetch: 'annotationsfetched',
     error: 'annotationerror',
     scale: 'scaleannotations',
+    setColor: 'annotations_color_set',
     setVisibility: 'annotations_visible_set',
 };
 

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -994,6 +994,7 @@ class BaseViewer extends EventEmitter {
         const annotatorOptions = this.createAnnotatorOptions({
             annotator: this.annotatorConf,
             features: options && options.features,
+            initialColor: this.annotationModule.getColor(),
             initialMode: this.getInitialAnnotationMode(),
             intl: (options && options.intl) || intlUtil.createAnnotatorIntl(),
             modeButtons: ANNOTATION_BUTTONS,

diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js
@@ -1135,6 +1135,9 @@ describe('lib/viewers/BaseViewer', () => {
         };
 
         beforeEach(() => {
+            base.annotationModule.cache = {
+                get: jest.fn().mockReturnValue('#000'),
+            };
             base.options.viewer = { NAME: 'viewerName' };
             base.options.location = { locale: 'en-US' };
             base.options.showAnnotations = true;
@@ -1177,6 +1180,7 @@ describe('lib/viewers/BaseViewer', () => {
                 features: {
                     enabledFeature: true,
                 },
+                initialColor: '#000',
             };
             jest.spyOn(base, 'areAnnotationsEnabled').mockReturnValue(true);
             jest.spyOn(base, 'createAnnotatorOptions');

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -1674,6 +1674,7 @@ class DocBaseViewer extends BaseViewer {
 
     handleAnnotationColorChange(color) {
         this.annotationModule.setColor(color);
+        this.annotator.emit(ANNOTATOR_EVENT.setColor, color);
         this.renderUI();
     }
 

diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -2949,14 +2949,18 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                 docBase.annotationModule = {
                     setColor: jest.fn(),
                 };
+                docBase.annotator = {
+                    emit: jest.fn(),
+                };
                 docBase.renderUI = jest.fn();
             });
 
-            test('should call setColor and renderUI', () => {
+            test('should call setColor and renderUI, and emit color', () => {
                 const color = '#fff';
                 docBase.handleAnnotationColorChange(color);
 
                 expect(docBase.annotationModule.setColor).toBeCalledWith(color);
+                expect(docBase.annotator.emit).toBeCalledWith(ANNOTATOR_EVENT.setColor, color);
                 expect(docBase.renderUI).toHaveBeenCalled();
             });
         });

diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js
@@ -4,6 +4,7 @@ import AnnotationControlsFSM, { AnnotationInput, AnnotationState, stateModeMap }
 import ImageBaseViewer from './ImageBaseViewer';
 import ImageControls from './ImageControls';
 import {
+    ANNOTATOR_EVENT,
     CLASS_ANNOTATIONS_IMAGE_FTUX_CURSOR_SEEN,
     CLASS_INVISIBLE,
     DISCOVERABILITY_ATTRIBUTE,
@@ -554,6 +555,7 @@ class ImageViewer extends ImageBaseViewer {
 
     handleAnnotationColorChange(color) {
         this.annotationModule.setColor(color);
+        this.annotator.emit(ANNOTATOR_EVENT.setColor, color);
         this.renderUI();
     }
 

diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js
@@ -6,7 +6,11 @@ import Browser from '../../../Browser';
 import ControlsRoot from '../../controls/controls-root';
 import ImageControls from '../ImageControls';
 import ImageViewer from '../ImageViewer';
-import { CLASS_ANNOTATIONS_IMAGE_FTUX_CURSOR_SEEN, IMAGE_FTUX_CURSOR_SEEN_KEY } from '../../../constants';
+import {
+    ANNOTATOR_EVENT,
+    CLASS_ANNOTATIONS_IMAGE_FTUX_CURSOR_SEEN,
+    IMAGE_FTUX_CURSOR_SEEN_KEY,
+} from '../../../constants';
 
 jest.mock('../../controls/controls-root');
 
@@ -712,14 +716,18 @@ describe('lib/viewers/image/ImageViewer', () => {
             image.annotationModule = {
                 setColor: jest.fn(),
             };
+            image.annotator = {
+                emit: jest.fn(),
+            };
             image.renderUI = jest.fn();
         });
 
-        test('should call setColor and renderUI', () => {
+        test('should call setColor and renderUI, and emit color', () => {
             const color = '#fff';
             image.handleAnnotationColorChange(color);
 
             expect(image.annotationModule.setColor).toBeCalledWith(color);
+            expect(image.annotator.emit).toBeCalledWith(ANNOTATOR_EVENT.setColor, color);
             expect(image.renderUI).toHaveBeenCalled();
         });
     });