inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Urse Daniel 2021-05-06 17:21:15 +03:00 committed by GitHub
parent aa5cbea7f5
commit f5c29a5ec8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/core/i18n/en.json
View File

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

8
lib/core/viewer/components/img-viewer.component.html
View File

@ -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"

29
lib/core/viewer/components/img-viewer.component.spec.ts
View File

@ -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;

11
lib/core/viewer/components/img-viewer.component.ts
View File

@ -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);
}