Fix: Ensure point annotation mode button is hidden on rotated images (#…

…151)
box · May 26, 2017 · e322c6a · e322c6a
1 parent 77cf5bb
commit e322c6a
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 24 deletions.
diff --git a/src/lib/annotations/Annotator.js b/src/lib/annotations/Annotator.js
@@ -184,23 +184,25 @@ import './Annotator.scss';
      * @private
      */
     rotateAnnotations(rotationAngle = 0) {
+        this.renderAnnotations();
+
         // Only show/hide point annotation button if user has the
         // appropriate permissions
-        if (this.annotationService.canAnnotate) {
-            // Hide create annotations button if image is rotated
-            // TODO(@spramod) actually adjust getLocationFromEvent method
-            // in annotator to get correct location rather than disabling
-            // the creation of annotations on rotated images
-            const annotateButton = document.querySelector(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE);
-
-            if (rotationAngle !== 0) {
-                annotatorUtil.hideElement(annotateButton);
-            } else {
-                annotatorUtil.showElement(annotateButton);
-            }
+        if (!this.annotationService.canAnnotate) {
+            return;
         }
 
-        this.renderAnnotations();
+        // Hide create annotations button if image is rotated
+        // TODO(@spramod) actually adjust getLocationFromEvent method
+        // in annotator to get correct location rather than disabling
+        // the creation of annotations on rotated images
+        const annotateButton = document.querySelector(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE);
+
+        if (rotationAngle !== 0) {
+            annotatorUtil.hideElement(annotateButton);
+        } else {
+            annotatorUtil.showElement(annotateButton);
+        }
     }
 
     /**

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -276,10 +276,10 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300;
         });
 
         // Add a custom listener for events related to scaling/orientation changes
-        this.addListener('scale', (scale, rotationAngle) => {
+        this.addListener('scale', (data) => {
             if (this.annotator) {
-                this.annotator.setScale(scale);
-                this.annotator.rotateAnnotations(rotationAngle);
+                this.annotator.setScale(data.scale);
+                this.annotator.rotateAnnotations(data.rotationAngle);
             }
         });
 

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -450,7 +450,7 @@ const MOBILE_MAX_CANVAS_SIZE = 2949120; // ~3MP 1920x1536
      */
     setScale(scale) {
         this.pdfViewer.currentScaleValue = scale;
-        this.emit('scale', scale);
+        this.emit('scale', { scale });
     }
 
     /**

diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -704,7 +704,7 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
             const newScale = 5;
 
             docBase.setScale(newScale);
-            expect(docBase.emit).to.be.calledWith('scale', newScale);
+            expect(docBase.emit).to.be.calledWith('scale', { scale: newScale });
             expect(docBase.pdfViewer.currentScaleValue).to.equal(newScale);
         });
     });

diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js
@@ -230,7 +230,10 @@ const IMAGE_ZOOM_SCALE = 1.2;
     setScale(width, height) {
         this.scale = width ? width / this.imageEl.naturalWidth : height / this.imageEl.naturalHeight;
         this.rotationAngle = this.currentRotationAngle % 3600 % 360;
-        this.emit('scale', this.scale, this.rotationAngle);
+        this.emit('scale', {
+            scale: this.scale,
+            rotationAngle: this.rotationAngle
+        });
     }
 
     /**
@@ -389,7 +392,10 @@ const IMAGE_ZOOM_SCALE = 1.2;
 
         this.scale = this.imageEl.clientWidth / this.imageEl.naturalWidth;
         this.rotationAngle = this.currentRotationAngle % 3600 % 360;
-        this.emit('scale', this.scale, this.rotationAngle);
+        this.emit('scale', {
+            scale: this.scale,
+            rotationAngle: this.rotationAngle
+        });
     }
 }
 

diff --git a/src/lib/viewers/image/MultiImageViewer.js b/src/lib/viewers/image/MultiImageViewer.js
@@ -170,7 +170,7 @@ const ZOOM_UPDATE_PAN_DELAY = 50;
         // Grab the first page image dimensions
         const imageEl = this.singleImageEls[0];
         const scale = width ? width / imageEl.naturalWidth : height / imageEl.naturalHeight;
-        this.emit('scale', scale);
+        this.emit('scale', { scale });
     }
 
     /**

diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js
@@ -355,7 +355,10 @@ describe('lib/viewers/image/ImageViewer', () => {
             const [width, height] = [100, 100];
 
             image.setScale(width, height);
-            expect(image.emit).to.be.calledWith('scale', sinon.match.any, sinon.match.number);
+            expect(image.emit).to.be.calledWith('scale', {
+                scale: sinon.match.any,
+                rotationAngle: sinon.match.number
+            });
         });
     });
 
@@ -583,7 +586,10 @@ describe('lib/viewers/image/ImageViewer', () => {
             sandbox.stub(image, 'emit');
             image.handleOrientationChange();
             expect(stubs.padding).to.be.called;
-            expect(image.emit).to.be.calledWith('scale', sinon.match.any, sinon.match.number);
+            expect(image.emit).to.be.calledWith('scale', {
+                scale: sinon.match.any,
+                rotationAngle: sinon.match.number
+            });
         });
     });
 

diff --git a/src/lib/viewers/image/__tests__/MultiImageViewer-test.js b/src/lib/viewers/image/__tests__/MultiImageViewer-test.js
@@ -353,7 +353,7 @@ describe('lib/viewers/image/MultiImageViewer', () => {
             sandbox.stub(multiImage, 'emit');
 
             multiImage.setScale(512, 512);
-            expect(multiImage.emit).to.be.calledWith('scale', 0.5);
+            expect(multiImage.emit).to.be.calledWith('scale', { scale: 0.5 });
         });
     });
 });