[ADF-5377] Viewer: Image Crop (#6977)

* changed dependency

* Update lib/core/viewer/components/img-viewer.component.ts

Co-authored-by: Denys Vuika <denys.vuika@alfresco.com>

Co-authored-by: Denys Vuika <denys.vuika@alfresco.com>

lib/core/i18n/en.json

@@ -385,6 +385,7 @@
       "ZOOM_OUT": "Zoom out",
       "FIT_PAGE": "Fit page",
       "ROTATE": "Rotate",
+      "CROP": "Crop",
       "SAVE": "Save",
       "CANCEL": "Cancel",
       "RESET": "Reset",

lib/core/viewer/components/img-viewer.component.html

@@ -34,6 +34,14 @@
             (click)="rotateImage()">
             <mat-icon>rotate_left</mat-icon>
         </button>
+        <button
+            *ngIf="!readOnly" id="viewer-crop-button"
+            title="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
+            attr.aria-label="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
+            mat-icon-button
+            (click)="cropImage()">
+            <mat-icon>crop</mat-icon>
+        </button>
 
         <button
             id="viewer-reset-button"

lib/core/viewer/components/img-viewer.component.spec.ts

@@ -221,6 +221,26 @@ describe('Test Img viewer component ', () => {
             expect(rotateButtonElement).toEqual(null);
         });
 
+        it('should not show crop button by default', () => {
+            const rotateButtonElement = element.querySelector('#viewer-crop-button');
+            expect(rotateButtonElement).toEqual(null);
+        });
+
+        it('should start cropping when clicking the crop button', fakeAsync(() => {
+            component.readOnly = false;
+            spyOn(component, 'cropImage').and.callThrough();
+            spyOn(component.cropper, 'crop');
+            spyOn(component.cropper, 'setDragMode');
+            fixture.detectChanges();
+            const cropButtonElement = fixture.debugElement.query(By.css('#viewer-crop-button'));
+            cropButtonElement.triggerEventHandler('click', null);
+            tick();
+
+            expect(component.cropImage).toHaveBeenCalled();
+            expect(component.cropper.crop).toHaveBeenCalled();
+            expect(component.cropper.setDragMode).toHaveBeenCalledWith('crop');
+        }));
+
         it('should rotate image by -90 degrees on button click', fakeAsync(() => {
             component.readOnly = false;
             spyOn(component, 'rotateImage').and.callThrough();
@@ -260,7 +280,7 @@ describe('Test Img viewer component ', () => {
             expect(secondaryToolbar).toEqual(null);
         });
 
-        it('should display second toolbar in rotate mode', fakeAsync(() => {
+        it('should display second toolbar in edit mode', fakeAsync(() => {
             component.readOnly = false;
             component.isEditing = true;
 
@@ -287,6 +307,13 @@ describe('Test Img viewer component ', () => {
             expect(component.isEditing).toEqual(true);
         });
 
+        it('should get in editing mode when the image gets cropped', () => {
+            component.readOnly = false;
+            component.cropImage();
+
+            expect(component.isEditing).toEqual(true);
+        });
+
         it('should reset the scale and hide second toolbar', fakeAsync(() => {
             component.readOnly = false;
             component.isEditing = true;

lib/core/viewer/components/img-viewer.component.ts

@@ -89,6 +89,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
             dragMode: 'move',
             background: false,
             scalable: true,
+            modal: false,
             zoomOnWheel: false,
             toggleDragModeOnDblclick: false,
             viewMode: 1,
@@ -175,16 +176,26 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
         this.cropper.rotate( -90);
     }
 
+    cropImage() {
+        this.isEditing = true;
+        this.cropper.setDragMode('crop');
+        this.cropper.crop();
+    }
+
     save() {
         this.isEditing = false;
+        this.cropper.setDragMode('move');
         this.cropper.getCroppedCanvas().toBlob((blob) => {
             this.submit.emit(blob);
+            this.cropper.clear();
         });
     }
 
     reset() {
         this.isEditing = false;
+        this.cropper.clear();
         this.cropper.reset();
+        this.cropper.setDragMode('move');
         this.scale = 1.0;
         this.cropper.zoomTo(this.scale);
     }