[ADF-1412] Viewer enhancements (#2873)

* collection navigation support for Viewer

* code cleanup

* full screen mode support

* keyboard shortcuts

* zooming scale label

* layout fixes

* test fixes

* image toolbar with basic tranformations

* test fixes

* test fixes

lib/core/viewer/components/imgViewer.component.ts

@@ -22,11 +22,14 @@ import { ContentService } from '../../services/content.service';
     selector: 'adf-img-viewer',
     templateUrl: './imgViewer.component.html',
     styleUrls: ['./imgViewer.component.scss'],
-    host: { 'class': 'adf-img-viewer' },
+    host: { 'class': 'adf-image-viewer' },
     encapsulation: ViewEncapsulation.None
 })
 export class ImgViewerComponent implements OnChanges {
 
+    @Input()
+    showToolbar = true;
+
     @Input()
     urlFile: string;
 
@@ -36,6 +39,14 @@ export class ImgViewerComponent implements OnChanges {
     @Input()
     nameFile: string;
 
+    rotate: number = 0;
+    scaleX: number = 1.0;
+    scaleY: number = 1.0;
+
+    get transform(): string {
+        return `scale(${this.scaleX}, ${this.scaleY}) rotate(${this.rotate}deg)`
+    }
+
     constructor(private contentService: ContentService) {}
 
     ngOnChanges(changes: SimpleChanges) {
@@ -48,4 +59,31 @@ export class ImgViewerComponent implements OnChanges {
             throw new Error('Attribute urlFile or blobFile is required');
         }
     }
+
+    zoomIn() {
+        const ratio = +((this.scaleX + 0.2).toFixed(1));
+        this.scaleX = this.scaleY = ratio;
+    }
+
+    zoomOut() {
+        let ratio = +((this.scaleX - 0.2).toFixed(1));
+        if (ratio < 0.2) {
+            ratio = 0.2;
+        }
+        this.scaleX = this.scaleY = ratio;
+    }
+
+    rotateLeft() {
+        const angle = this.rotate - 90;
+        this.rotate = Math.abs(angle) < 360 ? angle : 0;
+    }
+
+    rotateRight() {
+        const angle = this.rotate + 90;
+        this.rotate = Math.abs(angle) < 360 ? angle : 0;
+    }
+
+    flip() {
+        this.scaleX *= -1;
+    }
 }