Chore: Move getAnnotateButton() out of PreviewUI into Annotator (#312)

src/lib/PreviewUI.js

@@ -261,16 +261,6 @@ class PreviewUI {
         }
     }
 
-    /**
-     * Gets the annotation button element.
-     *
-     * @param {string} annotatorSelector - Class selector for a custom annotation button.
-     * @return {HTMLElement|null} Annotate button element or null if the selector did not find an element.
-     */
-    getAnnotateButton(annotatorSelector) {
-        return this.container.querySelector(annotatorSelector);
-    }
-
     /**
      * Shows and starts a progress bar at the top of the preview.
      *

src/lib/__tests__/PreviewUI-test.js

@@ -204,14 +204,6 @@ describe('lib/PreviewUI', () => {
         });
     });
 
-    describe('getAnnotateButton()', () => {
-        it('should return the annotate button', () => {
-            containerEl = ui.setup(options);
-            const buttonEl = ui.getAnnotateButton(constants.SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT);
-            expect(buttonEl).to.equal(containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT));
-        });
-    });
-
     describe('startProgressBar()', () => {
         it('should start the progress bar', () => {
             ui.progressBar = {

src/lib/annotations/Annotator.js

@@ -58,7 +58,6 @@ class Annotator extends EventEmitter {
         this.validationErrorEmitted = false;
         this.isMobile = data.isMobile;
         this.hasTouch = data.hasTouch;
-        this.previewUI = data.previewUI;
         this.modeButtons = data.modeButtons;
         this.annotationModeHandlers = [];
     }
@@ -169,6 +168,16 @@ class Annotator extends EventEmitter {
         }
     }
 
+    /**
+     * Gets the annotation button element.
+     *
+     * @param {string} annotatorSelector - Class selector for a custom annotation button.
+     * @return {HTMLElement|null} Annotate button element or null if the selector did not find an element.
+     */
+    getAnnotateButton(annotatorSelector) {
+        return this.container.querySelector(annotatorSelector);
+    }
+
     /**
      * Returns click handler for toggling annotation mode.
      *
@@ -299,7 +308,7 @@ class Annotator extends EventEmitter {
 
         // Hide create annotations button if image is rotated
         const pointButtonSelector = this.modeButtons[TYPES.point].selector;
-        const pointAnnotateButton = this.previewUI.getAnnotateButton(pointButtonSelector);
+        const pointAnnotateButton = this.getAnnotateButton(pointButtonSelector);
 
         if (rotationAngle !== 0) {
             annotatorUtil.hideElement(pointAnnotateButton);
@@ -339,7 +348,7 @@ class Annotator extends EventEmitter {
         }
 
         const buttonSelector = this.modeButtons[mode].selector;
-        const buttonEl = event.target || this.previewUI.getAnnotateButton(buttonSelector);
+        const buttonEl = event.target || this.getAnnotateButton(buttonSelector);
 
         // Exit any other annotation mode
         this.exitAnnotationModes(mode, buttonEl);
@@ -378,7 +387,7 @@ class Annotator extends EventEmitter {
                 const drawCancelEl = buttonEl.querySelector(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
                 annotatorUtil.hideElement(drawCancelEl);
 
-                const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+                const postButtonEl = this.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
                 annotatorUtil.hideElement(postButtonEl);
             }
         }
@@ -407,7 +416,7 @@ class Annotator extends EventEmitter {
                 const drawCancelEl = buttonEl.querySelector(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
                 annotatorUtil.showElement(drawCancelEl);
 
-                const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+                const postButtonEl = this.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
                 annotatorUtil.showElement(postButtonEl);
             }
         }
@@ -430,7 +439,7 @@ class Annotator extends EventEmitter {
             }
 
             const buttonSelector = this.modeButtons[type].selector;
-            const modeButtonEl = buttonEl || this.previewUI.getAnnotateButton(buttonSelector);
+            const modeButtonEl = buttonEl || this.getAnnotateButton(buttonSelector);
             this.disableAnnotationMode(type, modeButtonEl);
         });
     }
@@ -676,7 +685,7 @@ class Annotator extends EventEmitter {
             const locationFunction = (event) => this.getLocationFromEvent(event, TYPES.point);
             /* eslint-enable require-jsdoc */
 
-            const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+            const postButtonEl = this.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
 
             handlers.push({
                 type: 'mousemove',
@@ -733,7 +742,7 @@ class Annotator extends EventEmitter {
 
         // Exits point annotation mode on first click
         const buttonSelector = this.modeButtons[TYPES.point].selector;
-        const buttonEl = this.previewUI.getAnnotateButton(buttonSelector);
+        const buttonEl = this.getAnnotateButton(buttonSelector);
         this.disableAnnotationMode(TYPES.point, buttonEl);
 
         // Get annotation location from click event, ignore click if location is invalid

src/lib/annotations/__tests__/Annotator-test.js

@@ -7,7 +7,8 @@ import {
     STATES,
     TYPES,
     CLASS_ANNOTATION_DRAW_MODE,
-    CLASS_HIDDEN
+    CLASS_HIDDEN,
+    SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT
 } from '../annotationConstants';
 
 let annotator;
@@ -37,9 +38,6 @@ describe('lib/annotations/Annotator', () => {
             fileVersionId: 1,
             isMobile: false,
             options,
-            previewUI: {
-                getAnnotateButton: () => {}
-            },
             modeButtons: {}
         });
 
@@ -293,7 +291,7 @@ describe('lib/annotations/Annotator', () => {
                 stubs.exitModes = sandbox.stub(annotator, 'exitAnnotationModes');
                 stubs.disable = sandbox.stub(annotator, 'disableAnnotationMode');
                 stubs.enable = sandbox.stub(annotator, 'enableAnnotationMode');
-                sandbox.stub(annotator.previewUI, 'getAnnotateButton');
+                sandbox.stub(annotator, 'getAnnotateButton');
                 stubs.isAnnotatable = sandbox.stub(annotator, 'isModeAnnotatable').returns(true);
 
                 annotator.modeButtons = {
@@ -520,7 +518,7 @@ describe('lib/annotations/Annotator', () => {
                     addEventListener: sandbox.stub(),
                     removeEventListener: sandbox.stub()
                 };
-                sandbox.stub(annotator.previewUI, 'getAnnotateButton').returns(null);
+                sandbox.stub(annotator, 'getAnnotateButton').returns(null);
                 const locationHandler = (() => {});
 
                 sandbox.stub(annotatorUtil, 'eventToLocationHandler').returns(locationHandler);
@@ -545,7 +543,7 @@ describe('lib/annotations/Annotator', () => {
                     addEventListener: sandbox.stub(),
                     removeEventListener: sandbox.stub()
                 };
-                sandbox.stub(annotator.previewUI, 'getAnnotateButton').returns(postButtonEl);
+                sandbox.stub(annotator, 'getAnnotateButton').returns(postButtonEl);
                 const locationHandler = (() => {});
 
                 sandbox.stub(annotatorUtil, 'eventToLocationHandler').returns(locationHandler);
@@ -818,9 +816,6 @@ describe('lib/annotations/Annotator', () => {
                         annotator: { NAME: annotatorName },
                         fileId
                     },
-                    previewUI: {
-                        getAnnotateButton: sandbox.stub()
-                    },
                     modeButtons: {}
                 });
 
@@ -917,6 +912,14 @@ describe('lib/annotations/Annotator', () => {
             });
         });
 
+        describe('getAnnotateButton()', () => {
+            it('should return the annotate button', () => {
+                const selector = 'bp-btn-annotate';
+                const buttonEl = annotator.getAnnotateButton(`.${selector}`);
+                expect(buttonEl).to.have.class(selector);
+            });
+        });
+
         describe('getAnnotationModeClickHandler()', () => {
             beforeEach(() => {
                 stubs.isModeAnnotatable = sandbox.stub(annotator, 'isModeAnnotatable').returns(false);

src/lib/annotations/doc/__tests__/DocAnnotator-test.js

@@ -36,9 +36,6 @@ describe('lib/annotations/doc/DocAnnotator', () => {
             fileVersionId: 1,
             isMobile: false,
             options: {},
-            previewUI: {
-                getAnnotateButton: sandbox.stub()
-            },
             modeButtons: {}
         });
         annotator.annotatedElement = annotator.getAnnotatedEl(document);
@@ -298,7 +295,6 @@ describe('lib/annotations/doc/DocAnnotator', () => {
         });
 
         it('should create, add drawing thread to internal map, and return it', () => {
-            annotator.previewUI.getAnnotateButton.returns('commit drawing button');
             const thread = annotator.createAnnotationThread([], {}, TYPES.draw);
             expect(stubs.addThread).to.have.been.called;
             expect(thread instanceof DocDrawingThread).to.be.true;

src/lib/annotations/image/ImageAnnotator.js

@@ -141,7 +141,7 @@ class ImageAnnotator extends Annotator {
      * @return {void}
      */
     hideAllAnnotations() {
-        const annotateButton = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_POINT);
+        const annotateButton = this.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_POINT);
         const annotations = this.annotatedElement.getElementsByClassName(CLASS_ANNOTATION_POINT_MARKER);
         for (let i = 0; i < annotations.length; i++) {
             annotatorUtil.hideElement(annotations[i]);
@@ -156,7 +156,7 @@ class ImageAnnotator extends Annotator {
      * @return {void}
      */
     showAllAnnotations() {
-        const annotateButton = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_POINT);
+        const annotateButton = this.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_POINT);
         const annotations = this.annotatedElement.getElementsByClassName(CLASS_ANNOTATION_POINT_MARKER);
         for (let i = 0; i < annotations.length; i++) {
             annotatorUtil.showElement(annotations[i]);

src/lib/annotations/image/__tests__/ImageAnnotator-test.js

@@ -23,9 +23,6 @@ describe('lib/annotations/image/ImageAnnotator', () => {
             fileVersionId: 1,
             isMobile: false,
             options: {},
-            previewUI: {
-                getAnnotateButton: () => {}
-            },
             modeButtons: {}
         });
         annotator.annotatedElement = annotator.getAnnotatedEl(document);

src/lib/viewers/BaseViewer.js

@@ -671,7 +671,6 @@ class BaseViewer extends EventEmitter {
             isMobile: this.isMobile,
             hasTouch: this.hasTouch,
             locale: location.locale,
-            previewUI: this.previewUI,
             modeButtons: ANNOTATION_BUTTONS
         });
         this.annotator.init(this.scale);