From f5c29a5ec8f1d347507cf84c8c596a968328f02c Mon Sep 17 00:00:00 2001
From: Urse Daniel <daniel.urse@hotmail.com>
Date: Thu, 6 May 2021 17:21:15 +0300
Subject: [PATCH] [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                         |  1 +
 .../components/img-viewer.component.html      |  8 +++++
 .../components/img-viewer.component.spec.ts   | 29 ++++++++++++++++++-
 .../viewer/components/img-viewer.component.ts | 11 +++++++
 4 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index 897f844d17..c474855efc 100644
--- a/lib/core/i18n/en.json
+++ b/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",
diff --git a/lib/core/viewer/components/img-viewer.component.html b/lib/core/viewer/components/img-viewer.component.html
index 3210cfc550..96d01c06c0 100644
--- a/lib/core/viewer/components/img-viewer.component.html
+++ b/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"
diff --git a/lib/core/viewer/components/img-viewer.component.spec.ts b/lib/core/viewer/components/img-viewer.component.spec.ts
index 52d10fa898..f8b697c763 100644
--- a/lib/core/viewer/components/img-viewer.component.spec.ts
+++ b/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;
diff --git a/lib/core/viewer/components/img-viewer.component.ts b/lib/core/viewer/components/img-viewer.component.ts
index 9a6d180a8a..c88d8704b5 100644
--- a/lib/core/viewer/components/img-viewer.component.ts
+++ b/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);
     }