Feature: Drawing Annotations Undo Redo

src/lib/_boxui.scss

@@ -83,6 +83,19 @@
     }
 }
 
+.bp-btn-plain {
+    background: transparent;
+    box-shadow: none;
+    outline: none;
+
+    &.is-disabled {
+        pointer-events: none;
+        color: #666;
+        opacity: .4;
+        background-color: $haze;
+    }
+}
+
 .bp-btn {
     -webkit-appearance: none;
     background-color: $white;
@@ -150,14 +163,6 @@
     }
 }
 
-.bp-btn-plain,
-.bp-btn-plain:hover,
-.bp-btn-plain:active,
-.bp-btn-plain:focus {
-    background: transparent;
-    box-shadow: none;
-    outline: none;
-}
 
 //------------------------------------------------------------------------------
 // Forms

src/lib/annotations/Annotator.js

@@ -16,6 +16,8 @@ import {
     SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL,
     SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER,
     SELECTOR_ANNOTATION_BUTTON_DRAW_POST,
+    SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO,
+    SELECTOR_ANNOTATION_BUTTON_DRAW_REDO,
     TYPES
 } from './annotationConstants';
 
@@ -117,8 +119,7 @@ class Annotator extends EventEmitter {
             this.showModeAnnotateButton(type);
         });
 
-        const scale = initialScale;
-        this.setScale(scale);
+        this.setScale(initialScale);
         this.setupAnnotations();
         this.showAnnotations();
     }
@@ -204,6 +205,17 @@ class Annotator extends EventEmitter {
         this.container.appendChild(mobileDialogEl);
     }
 
+    /**
+     * Returns true if the annotator has an annotation type enabled
+     *
+     * @param {string} type - Annotation type to check
+     * @return {boolean} Whether or not the annotation type is enabled
+     */
+    isTypeEnabled(type) {
+        const { annotator } = this.options || {};
+        return annotator.TYPE && annotator.TYPE.includes(type);
+    }
+
     /**
      * Fetches and shows saved annotations.
      *
@@ -366,13 +378,18 @@ class Annotator extends EventEmitter {
 
             if (mode === TYPES.draw) {
                 const drawEnterEl = buttonEl.querySelector(SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER);
-                annotatorUtil.showElement(drawEnterEl);
-
                 const drawCancelEl = buttonEl.querySelector(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
-                annotatorUtil.hideElement(drawCancelEl);
-
                 const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+                const undoButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
+                const redoButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_REDO);
+
+                annotatorUtil.showElement(drawEnterEl);
+                annotatorUtil.hideElement(drawCancelEl);
                 annotatorUtil.hideElement(postButtonEl);
+                annotatorUtil.hideElement(undoButtonEl);
+                annotatorUtil.hideElement(redoButtonEl);
+                annotatorUtil.disableElement(undoButtonEl);
+                annotatorUtil.disableElement(redoButtonEl);
             }
         }
 
@@ -395,13 +412,16 @@ class Annotator extends EventEmitter {
 
             if (mode === TYPES.draw) {
                 const drawEnterEl = buttonEl.querySelector(SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER);
-                annotatorUtil.hideElement(drawEnterEl);
-
                 const drawCancelEl = buttonEl.querySelector(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
-                annotatorUtil.showElement(drawCancelEl);
-
                 const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+                const undoButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
+                const redoButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_REDO);
+
+                annotatorUtil.hideElement(drawEnterEl);
+                annotatorUtil.showElement(drawCancelEl);
                 annotatorUtil.showElement(postButtonEl);
+                annotatorUtil.showElement(undoButtonEl);
+                annotatorUtil.showElement(redoButtonEl);
             }
         }
 
@@ -638,6 +658,7 @@ class Annotator extends EventEmitter {
     unbindCustomListenersOnThread(thread) {
         thread.removeAllListeners('threaddeleted');
         thread.removeAllListeners('threadcleanup');
+        thread.removeAllListeners('annotationevent');
     }
 
     /**
@@ -651,41 +672,74 @@ class Annotator extends EventEmitter {
         const handlers = [];
 
         if (mode === TYPES.point) {
-            handlers.push({
-                type: 'mousedown',
-                func: this.pointClickHandler,
-                eventObj: this.annotatedElement
-            });
-            handlers.push({
-                type: 'touchstart',
-                func: this.pointClickHandler,
-                eventObj: this.annotatedElement
-            });
+            handlers.push(
+                {
+                    type: 'mousedown',
+                    func: this.pointClickHandler,
+                    eventObj: this.annotatedElement
+                },
+                {
+                    type: 'touchstart',
+                    func: this.pointClickHandler,
+                    eventObj: this.annotatedElement
+                }
+            );
         } else if (mode === TYPES.draw) {
             const drawingThread = this.createAnnotationThread([], {}, TYPES.draw);
+            this.bindCustomListenersOnThread(drawingThread);
 
             /* eslint-disable require-jsdoc */
             const locationFunction = (event) => this.getLocationFromEvent(event, TYPES.point);
             /* eslint-enable require-jsdoc */
 
             const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
-
-            handlers.push({
-                type: 'mousemove',
-                func: annotatorUtil.eventToLocationHandler(locationFunction, drawingThread.handleMove),
-                eventObj: this.annotatedElement
-            });
-            handlers.push({
-                type: 'mousedown',
-                func: annotatorUtil.eventToLocationHandler(locationFunction, drawingThread.handleStart),
-                eventObj: this.annotatedElement
-            });
-            handlers.push({
-                type: 'mouseup',
-                func: annotatorUtil.eventToLocationHandler(locationFunction, drawingThread.handleStop),
-                eventObj: this.annotatedElement
+            const undoButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
+            const redoButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_REDO);
+
+            // NOTE (@minhnguyen): Move this logic to a new controller class
+            const that = this;
+            drawingThread.addListener('annotationevent', (data = {}) => {
+                switch (data.type) {
+                    case 'pagechanged':
+                        drawingThread.saveAnnotation(TYPES.draw);
+                        that.unbindModeListeners();
+                        that.bindModeListeners(TYPES.draw);
+                        break;
+                    case 'availableactions':
+                        if (data.undo === 1) {
+                            annotatorUtil.enableElement(undoButtonEl);
+                        } else if (data.undo === 0) {
+                            annotatorUtil.disableElement(undoButtonEl);
+                        }
+
+                        if (data.redo === 1) {
+                            annotatorUtil.enableElement(redoButtonEl);
+                        } else if (data.redo === 0) {
+                            annotatorUtil.disableElement(redoButtonEl);
+                        }
+                        break;
+                    default:
+                }
             });
 
+            handlers.push(
+                {
+                    type: 'mousemove',
+                    func: annotatorUtil.eventToLocationHandler(locationFunction, drawingThread.handleMove),
+                    eventObj: this.annotatedElement
+                },
+                {
+                    type: 'mousedown',
+                    func: annotatorUtil.eventToLocationHandler(locationFunction, drawingThread.handleStart),
+                    eventObj: this.annotatedElement
+                },
+                {
+                    type: 'mouseup',
+                    func: annotatorUtil.eventToLocationHandler(locationFunction, drawingThread.handleStop),
+                    eventObj: this.annotatedElement
+                }
+            );
+
             if (postButtonEl) {
                 handlers.push({
                     type: 'click',
@@ -696,6 +750,26 @@ class Annotator extends EventEmitter {
                     eventObj: postButtonEl
                 });
             }
+
+            if (undoButtonEl) {
+                handlers.push({
+                    type: 'click',
+                    func: () => {
+                        drawingThread.undo();
+                    },
+                    eventObj: undoButtonEl
+                });
+            }
+
+            if (redoButtonEl) {
+                handlers.push({
+                    type: 'click',
+                    func: () => {
+                        drawingThread.redo();
+                    },
+                    eventObj: redoButtonEl
+                });
+            }
         }
 
         handlers.forEach((handler) => {

src/lib/annotations/Annotator.scss

@@ -325,6 +325,7 @@ $avatar-color-9: #f22c44;
 // CSS for highlights
 //------------------------------------------------------------------------------
 .bp-annotation-layer-draw,
+.bp-annotation-layer-draw-in-progress,
 .bp-annotation-layer-highlight {
     cursor: text;
     left: 0;

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

@@ -285,6 +285,23 @@ describe('lib/annotations/Annotator', () => {
             });
         });
 
+        describe('isTypeEnabled()', () => {
+            it('should return true when option.TYPE includes the type being checked', () => {
+                annotator.options.TYPE = [TYPES.point, TYPES.draw];
+                expect(annotator.isTypeEnabled(TYPES.draw)).to.be.truthy;
+            });
+
+            it('should return false when option.TYPE does not include the type being checked', () => {
+                annotator.options.TYPE = [TYPES.point, TYPES.highlight];
+                expect(annotator.isTypeEnabled(TYPES.draw)).to.be.falsy;
+            });
+
+            it('should return false when option.TYPE does not exist', () => {
+                annotator.options.TYPE = undefined;
+                expect(annotator.isTypeEnabled(TYPES.draw)).to.be.falsy;
+            });
+        });
+
         describe('toggleAnnotationHandler()', () => {
             beforeEach(() => {
                 stubs.destroyStub = sandbox.stub(annotator, 'destroyPendingThreads');
@@ -308,7 +325,7 @@ describe('lib/annotations/Annotator', () => {
                 annotator.toggleAnnotationHandler(TYPES.highlight);
                 expect(stubs.destroyStub).to.be.called;
                 expect(stubs.exitAnnotationModes)
-            })
+            });
 
             it('should turn annotation mode on if it is off', () => {
                 stubs.annotationMode.returns(false);
@@ -471,16 +488,26 @@ describe('lib/annotations/Annotator', () => {
             it('should unbind custom listeners from the thread', () => {
                 stubs.threadMock.expects('removeAllListeners').withArgs('threaddeleted');
                 stubs.threadMock.expects('removeAllListeners').withArgs('threadcleanup');
+                stubs.threadMock.expects('removeAllListeners').withArgs('annotationevent');
                 annotator.unbindCustomListenersOnThread(stubs.thread);
             });
         });
 
         describe('bindModeListeners()', () => {
+            let drawingThread;
+
             beforeEach(() => {
                 annotator.annotatedElement = {
                     addEventListener: sandbox.stub(),
                     removeEventListener: sandbox.stub()
                 };
+
+                drawingThread = {
+                    handleStart: () => {},
+                    handleStop: () => {},
+                    handleMove: () => {},
+                    addListener: sandbox.stub()
+                };
             });
 
             it('should get event handlers for point annotation mode', () => {
@@ -496,42 +523,7 @@ describe('lib/annotations/Annotator', () => {
                 expect(annotator.annotationModeHandlers.length).equals(2);
             });
 
-            it('should bind draw mode handlers', () => {
-                const drawingThread = {
-                    handleStart: () => {},
-                    handleStop: () => {},
-                    handleMove: () => {}
-                };
-                sandbox.stub(annotator, 'createAnnotationThread').returns(drawingThread);
-
-                const postButtonEl = {
-                    addEventListener: sandbox.stub(),
-                    removeEventListener: sandbox.stub()
-                };
-                sandbox.stub(annotator.previewUI, 'getAnnotateButton').returns(null);
-                const locationHandler = (() => {});
-
-                sandbox.stub(annotatorUtil, 'eventToLocationHandler').returns(locationHandler);
-
-                annotator.bindModeListeners(TYPES.draw);
-
-                expect(annotator.annotatedElement.addEventListener).to.be.calledWith(
-                    sinon.match.string,
-                    locationHandler
-                ).thrice;
-                expect(postButtonEl.addEventListener).to.not.be.calledWith(
-                    'click',
-                    sinon.match.func
-                );
-                expect(annotator.annotationModeHandlers.length).equals(3);
-            });
-
             it('should bind draw mode click handlers if post button exists', () => {
-                const drawingThread = {
-                    handleStart: () => {},
-                    handleStop: () => {},
-                    handleMove: () => {}
-                };
                 sandbox.stub(annotator, 'createAnnotationThread').returns(drawingThread);
 
                 const postButtonEl = {
@@ -553,7 +545,7 @@ describe('lib/annotations/Annotator', () => {
                     'click',
                     sinon.match.func
                 );
-                expect(annotator.annotationModeHandlers.length).equals(4);
+                expect(annotator.annotationModeHandlers.length).equals(6);
             });
         });