From b198112625096011567d018911275005011bc719 Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Tue, 15 Dec 2020 14:27:55 -0800 Subject: [PATCH] feat(annotations): Emit annotations color --- src/lib/constants.js | 1 + src/lib/viewers/BaseViewer.js | 1 + src/lib/viewers/__tests__/BaseViewer-test.js | 7 ++++++- src/lib/viewers/doc/DocBaseViewer.js | 1 + src/lib/viewers/doc/__tests__/DocBaseViewer-test.js | 6 +++++- src/lib/viewers/image/ImageViewer.js | 2 ++ src/lib/viewers/image/__tests__/ImageViewer-test.js | 12 ++++++++++-- 7 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/lib/constants.js b/src/lib/constants.js index 9bcca4293..549894d3e 100644 --- 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 index 50c6f0d3d..716dc31cc 100644 --- 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 index 4982ee6a2..0b56ff219 100644 --- 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; @@ -1189,7 +1192,9 @@ describe('lib/viewers/BaseViewer', () => { base.createAnnotator(); expect(base.options.boxAnnotations.getOptions).toBeCalled(); - expect(base.createAnnotatorOptions).toBeCalledWith(expect.objectContaining(createOptionsArg)); + expect(base.createAnnotatorOptions).toBeCalledWith( + expect.objectContaining({ ...createOptionsArg, initialColor: '#000' }), + ); }); test('should use default intl lib if annotator options not present ', () => { diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index 195da2b04..d56cb0c69 100644 --- 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 index bab31e746..eef7cd8b1 100644 --- 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 index 8a2fc56d0..35f85eea4 100644 --- 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 index b8dc3ed64..2e25055d6 100644 --- 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(); }); });