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

[ADF-5378] ADF Previewer: Image Rotate + Save (#6958)

Browse Source 
* updates including cropperJS

* update on rotation + unit tests

* small fix

* hide toolbar on save

* remove unused & duplicate method

* added readonly & prettier code

* include readOnly mode to hide/show media management actions

* updated dependencies

* fix emit spy

* ADF-5378: Fix failing e2es

* Fix comments for unit tests

* ADF-5378: Removed obsolete buttons from e2e

Co-authored-by: kristian <kristian.dimitrov@alfresco.com>
Co-authored-by: adomi <ardit.domi@alfresco.com>
This commit is contained in:
Urse Daniel
2021-05-01 17:54:37 +03:00
committed by GitHub
parent 8b5e45f4eb
commit e8ffe8e35e
15 changed files with 358 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/core/components/viewer.component.md
View File

@@ -93,6 +93,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
| nodeId | `string` | null | Node Id of the file to load. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| readOnly | `boolean` | true | Hide or show media management actions for [Image-viewer component](../../../lib/core/viewer/components/img-viewer.component.ts "Defined in img-viewer.component.ts") |
| sharedLinkId | `string` | null | Shared link id (to display shared file). |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
@@ -110,6 +111,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| Name | Type | Description |
| ---- | ---- | ----------- |
| extensionChange | `any` | Emitted when the filename extension changes. |
| fileSubmit | `Blob` | Emitted when media management actions occur. |
| goBack | `any` | Emitted when user clicks the 'Back' button. |
| invalidSharedLink | `any` | Emitted when the shared link used is not valid. |
| navigateBefore | `any` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |

11
e2e/core/viewer/viewer-content-services-component.e2e.ts
View File

@@ -221,8 +221,6 @@ describe('Content Services Viewer', () => {
await viewerPage.checkZoomInButtonIsDisplayed();
await viewerPage.checkZoomOutButtonIsDisplayed();
await viewerPage.checkPercentageIsDisplayed();
await viewerPage.checkRotateLeftButtonIsDisplayed();
await viewerPage.checkRotateRightButtonIsDisplayed();
await viewerPage.checkScaleImgButtonIsDisplayed();
await viewerPage.clickCloseButton();
@@ -242,15 +240,6 @@ describe('Content Services Viewer', () => {
await viewerPage.clickZoomOutButton();
await viewerPage.checkZoomedOut(zoom);
await viewerPage.clickRotateLeftButton();
await viewerPage.checkRotation('transform: scale(1, 1) rotate(-90deg) translate(0px, 0px);');
await viewerPage.clickScaleImgButton();
await viewerPage.checkRotation('transform: scale(1, 1) rotate(0deg) translate(0px, 0px);');
await viewerPage.clickRotateRightButton();
await viewerPage.checkRotation('transform: scale(1, 1) rotate(90deg) translate(0px, 0px);');
await viewerPage.clickCloseButton();
});

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

@@ -384,8 +384,9 @@
"ZOOM_IN": "Zoom in",
"ZOOM_OUT": "Zoom out",
"FIT_PAGE": "Fit page",
"ROTATE_LEFT": "Rotate left",
"ROTATE_RIGHT": "Rotate right",
"ROTATE": "Rotate",
"SAVE": "Save",
"CANCEL": "Cancel",
"RESET": "Reset",
"THUMBNAILS": "Document thumbnails",
"THUMBNAILS_PANLEL_CLOSE": "Close thumbnails panel"

1
lib/core/package.json
View File

@@ -26,6 +26,7 @@
"@alfresco/js-api": "4.4.0-3371",
"@alfresco/adf-extensions": "4.3.0",
"@ngx-translate/core": ">=13.0.0",
"cropperjs": "1.5.11",
"minimatch-browser": ">=1.0.0",
"moment": ">=2.22.2",
"pdfjs-dist": ">=2.3.200"

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

@@ -1,18 +1,9 @@
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" [style.transform]="transform" data-automation-id="adf-image-container">
<img id="viewer-image" [src]="urlFile" [alt]="nameFile" (error)="onImageError()" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" data-automation-id="adf-image-container">
<img #image id="viewer-image" [src]="urlFile" [alt]="nameFile" (error)="onImageError()" />
</div>
<div class="adf-image-viewer__toolbar" *ngIf="showToolbar">
<adf-toolbar>
<button
id="viewer-zoom-in-button"
mat-icon-button
title="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
(click)="zoomIn()">
<mat-icon>zoom_in</mat-icon>
</button>
<adf-toolbar class="adf-main-toolbar">
<button
id="viewer-zoom-out-button"
title="{{ 'ADF_VIEWER.ARIA.ZOOM_OUT' | translate }}"
@@ -27,21 +18,21 @@
</div>
<button
id="viewer-rotate-left-button"
title="{{ 'ADF_VIEWER.ARIA.ROTATE_LEFT' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE_LEFT' | translate }}"
id="viewer-zoom-in-button"
mat-icon-button
(click)="rotateLeft()">
<mat-icon>rotate_left</mat-icon>
title="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
(click)="zoomIn()">
<mat-icon>zoom_in</mat-icon>
</button>
<button
id="viewer-rotate-right-button"
title="{{ 'ADF_VIEWER.ARIA.ROTATE_RIGHT' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE_RIGHT' | translate }}"
*ngIf="!readOnly" id="viewer-rotate-button"
title="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
mat-icon-button
(click)="rotateRight()">
<mat-icon>rotate_right</mat-icon>
(click)="rotateImage()">
<mat-icon>rotate_left</mat-icon>
</button>
<button
@@ -52,5 +43,27 @@
(click)="reset()">
<mat-icon>zoom_out_map</mat-icon>
</button>
</adf-toolbar>
<adf-toolbar class="adf-secondary-toolbar" *ngIf="!readOnly && isEditing">
<button
id="viewer-cancel-button"
title="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"
mat-icon-button
(click)="reset()">
<mat-icon>close</mat-icon>
</button>
<button
id="viewer-save-button"
title="{{ 'ADF_VIEWER.ARIA.SAVE' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.SAVE' | translate }}"
mat-icon-button
(click)="save()">
<mat-icon>check</mat-icon>
</button>
</adf-toolbar>
</div>

21
lib/core/viewer/components/img-viewer.component.scss
View File

@@ -5,20 +5,20 @@
$viewer-image-outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
.adf-image-viewer {
width: 100%;
.adf-image-container {
&:focus {
outline-offset: -1px;
outline: $viewer-image-outline;
}
display: flex;
flex: 1;
text-align: center;
flex-direction: row;
justify-content: center;
height: 90vh;
align-items: center;
justify-content: center;
img {
width: 100%;
object-fit: contain;
max-height: 100%;
max-width: 100%;
}
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
@@ -43,6 +43,15 @@
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}
.adf-main-toolbar {
display: inline-block;
}
.adf-secondary-toolbar {
display: inline-block;
margin-left: 10px;
}
}
}
}

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

@@ -16,14 +16,13 @@
*/
import { SimpleChange } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { ContentService } from '../../services/content.service';
import { ImgViewerComponent } from './img-viewer.component';
import { setupTestBed } from '../../testing/setup-test-bed';
import { setupTestBed, CoreTestingModule } from '../../testing';
import { AppConfigService } from '@alfresco/adf-core';
import { CoreTestingModule } from '../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';
describe('Test Img viewer component ', () => {
@@ -52,218 +51,24 @@ describe('Test Img viewer component ', () => {
element = fixture.nativeElement;
component = fixture.componentInstance;
component.urlFile = 'fake-url-file.png';
component.urlFile = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
fixture.detectChanges();
fixture.componentInstance.ngAfterViewInit();
component.ngAfterViewInit();
fixture.detectChanges();
});
it('should display current scale as percent string', () => {
component.scaleX = 0.5;
component.scale = 0.5;
expect(component.currentScaleText).toBe('50%');
component.scaleX = 1.0;
component.scale = 1.0;
expect(component.currentScaleText).toBe('100%');
});
it('should generate transform settings', () => {
component.scaleX = 1.0;
component.scaleY = 2.0;
component.rotate = 10;
component.offsetX = 20;
component.offsetY = 30;
fixture.detectChanges();
const elementCss: any = element.querySelector('#adf-image-container');
expect(elementCss.style.transform).toBe('scale(1, 2) rotate(10deg) translate(20px, 30px)');
});
it('should start drag on mouse down', () => {
expect(component.isDragged).toBeFalsy();
component.onMouseDown(<any> new CustomEvent('mousedown'));
expect(component.isDragged).toBeTruthy();
});
it('should prevent default behaviour on mouse down', () => {
const event = jasmine.createSpyObj('mousedown', ['preventDefault']);
component.onMouseDown(event);
expect(event.preventDefault).toHaveBeenCalled();
});
it('should prevent default mouse move during drag', () => {
const event = jasmine.createSpyObj('mousemove', ['preventDefault']);
component.onMouseDown(<any> new CustomEvent('mousedown'));
component.onMouseMove(event);
expect(event.preventDefault).toHaveBeenCalled();
});
it('should not prevent default mouse move if not dragged', () => {
const event = jasmine.createSpyObj('mousemove', ['preventDefault']);
component.onMouseMove(event);
expect(component.isDragged).toBeFalsy();
expect(event.preventDefault).not.toHaveBeenCalled();
});
it('should prevent default mouse up during drag end', () => {
const event = jasmine.createSpyObj('mouseup', ['preventDefault']);
component.onMouseDown(<any> new CustomEvent('mousedown'));
expect(component.isDragged).toBeTruthy();
component.onMouseUp(event);
expect(event.preventDefault).toHaveBeenCalled();
});
it('should stop drag on mouse up', () => {
component.onMouseDown(<any> new CustomEvent('mousedown'));
expect(component.isDragged).toBeTruthy();
component.onMouseUp(<any> new CustomEvent('mouseup'));
expect(component.isDragged).toBeFalsy();
});
it('should stop drag on mouse leave', () => {
component.onMouseDown(<any> new CustomEvent('mousedown'));
expect(component.isDragged).toBeTruthy();
component.onMouseLeave(<any> new CustomEvent('mouseleave'));
expect(component.isDragged).toBeFalsy();
});
it('should stop drag on mouse out', () => {
component.onMouseDown(<any> new CustomEvent('mousedown'));
expect(component.isDragged).toBeTruthy();
component.onMouseOut(<any> new CustomEvent('mouseout'));
expect(component.isDragged).toBeFalsy();
});
it('should update offset on keydown ArrowDown event', () => {
const arrowDownEvent = new KeyboardEvent('keydown', { key : 'ArrowDown' });
component.onKeyDown(arrowDownEvent);
expect(component.offsetY).toBe(4);
component.onKeyDown(arrowDownEvent);
expect(component.offsetY).toBe(8);
});
it('should update offset on keydown ArrowUp event', () => {
const arrowUpEvent = new KeyboardEvent('keydown', { key : 'ArrowUp' });
component.onKeyDown(arrowUpEvent);
expect(component.offsetY).toBe(-4);
component.onKeyDown(arrowUpEvent);
expect(component.offsetY).toBe(-8);
});
it('should update offset on keydown ArrowLeft event', () => {
const arrowLeftEvent = new KeyboardEvent('keydown', { key : 'ArrowLeft' });
component.onKeyDown(arrowLeftEvent);
expect(component.offsetX).toBe(-4);
component.onKeyDown(arrowLeftEvent);
expect(component.offsetX).toBe(-8);
});
it('should update offset on keydown ArrowRight event', () => {
const arrowRightEvent = new KeyboardEvent('keydown', { key : 'ArrowRight' });
component.onKeyDown(arrowRightEvent);
expect(component.offsetX).toBe(4);
component.onKeyDown(arrowRightEvent);
expect(component.offsetX).toBe(8);
});
it('should update scales on zoom in', () => {
component.scaleX = 1.0;
component.zoomIn();
expect(component.scaleX).toBe(1.2);
expect(component.scaleY).toBe(1.2);
component.zoomIn();
expect(component.scaleX).toBe(1.4);
expect(component.scaleY).toBe(1.4);
});
it('should update scales on zoom out', () => {
component.scaleX = 1.0;
component.zoomOut();
expect(component.scaleX).toBe(0.8);
expect(component.scaleY).toBe(0.8);
component.zoomOut();
expect(component.scaleX).toBe(0.6);
expect(component.scaleY).toBe(0.6);
});
it('should not zoom out past 20%', () => {
component.scaleX = 0.4;
component.zoomOut();
component.zoomOut();
component.zoomOut();
expect(component.scaleX).toBe(0.2);
});
it('should update angle by 90 degrees on rotate left', () => {
component.rotate = 0;
component.rotateLeft();
expect(component.rotate).toBe(-90);
component.rotateLeft();
expect(component.rotate).toBe(-180);
});
it('should reset to 0 degrees for full rotate left round', () => {
component.rotate = -270;
component.rotateLeft();
expect(component.rotate).toBe(0);
});
it('should update angle by 90 degrees on rotate right', () => {
component.rotate = 0;
component.rotateRight();
expect(component.rotate).toBe(90);
component.rotateRight();
expect(component.rotate).toBe(180);
});
it('should reset to 0 degrees for full rotate right round', () => {
component.rotate = 270;
component.rotateRight();
expect(component.rotate).toBe(0);
});
it('should reset all image modifications', () => {
component.rotate = 10;
component.scaleX = 20;
component.scaleY = 30;
component.offsetX = 40;
component.offsetY = 50;
component.reset();
expect(component.rotate).toBe(0);
expect(component.scaleX).toBe(1.0);
expect(component.scaleY).toBe(1.0);
expect(component.offsetX).toBe(0);
expect(component.offsetY).toBe(0);
it('should define cropper after init', () => {
fixture.componentInstance.ngAfterViewInit();
expect(component.cropper).toBeDefined();
});
});
@@ -326,8 +131,7 @@ describe('Test Img viewer component ', () => {
it('should use default zoom if is not present a custom zoom in the app.config', () => {
fixture.detectChanges();
expect(component.scaleX).toBe(1.0);
expect(component.scaleY).toBe(1.0);
expect(component.scale).toBe(1.0);
});
});
@@ -344,11 +148,178 @@ describe('Test Img viewer component ', () => {
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.scaleX).toBe(0.70);
expect(component.scaleY).toBe(0.70);
expect(component.scale).toBe(0.70);
done();
});
});
});
});
describe('toolbar actions', () => {
beforeEach(() => {
fixture = TestBed.createComponent(ImgViewerComponent);
element = fixture.nativeElement;
component = fixture.componentInstance;
component.blobFile = createFakeBlob();
const change = new SimpleChange(null, component.blobFile, true);
component.ngOnChanges({ 'blobFile': change });
fixture.detectChanges();
});
it('should update scales on zoom in', fakeAsync(() => {
spyOn(component, 'zoomIn').and.callThrough();
spyOn(component.cropper, 'zoom');
component.scale = 1.0;
tick();
component.zoomIn();
expect(component.scale).toBe(1.2);
expect(component.cropper.zoom).toHaveBeenCalledWith(0.2);
component.zoomIn();
expect(component.scale).toBe(1.4);
expect(component.cropper.zoom).toHaveBeenCalledWith(0.2);
}));
it('should update scales on zoom out', fakeAsync(() => {
spyOn(component, 'zoomOut').and.callThrough();
spyOn(component.cropper, 'zoom');
component.scale = 1.0;
tick();
component.zoomOut();
expect(component.scale).toBe(0.8);
expect(component.cropper.zoom).toHaveBeenCalledWith(-0.2);
component.zoomOut();
expect(component.scale).toBe(0.6);
expect(component.cropper.zoom).toHaveBeenCalledWith(-0.2);
}));
it('should not zoom out past 20%', fakeAsync(() => {
component.scale = 0.2;
tick();
component.zoomOut();
component.zoomOut();
component.zoomOut();
expect(component.scale).toBe(0.2);
}));
it('should show rotate button if not in read only mode', () => {
component.readOnly = false;
fixture.detectChanges();
const rotateButtonElement = element.querySelector('#viewer-rotate-button');
expect(rotateButtonElement).not.toEqual(null);
});
it('should not show rotate button by default', () => {
const rotateButtonElement = element.querySelector('#viewer-rotate-button');
expect(rotateButtonElement).toEqual(null);
});
it('should rotate image by -90 degrees on button click', fakeAsync(() => {
component.readOnly = false;
spyOn(component, 'rotateImage').and.callThrough();
spyOn(component.cropper, 'rotate');
fixture.detectChanges();
const rotateButtonElement = fixture.debugElement.query(By.css('#viewer-rotate-button'));
rotateButtonElement.triggerEventHandler('click', null);
tick();
expect(component.rotateImage).toHaveBeenCalled();
expect(component.cropper.rotate).toHaveBeenCalledWith(-90);
}));
it('should display the second toolbar when in editing and not in read only mode', fakeAsync(() => {
component.readOnly = false;
component.isEditing = true;
fixture.detectChanges();
const secondaryToolbar = document.querySelector('.adf-secondary-toolbar');
expect(secondaryToolbar).not.toEqual(null);
}));
it('should not display the second toolbar when in read only mode', () => {
component.readOnly = true;
fixture.detectChanges();
const secondaryToolbar = document.querySelector('.adf-secondary-toolbar');
expect(secondaryToolbar).toEqual(null);
});
it('should not display the second toolbar when not in editing', () => {
component.readOnly = true;
component.isEditing = false;
fixture.detectChanges();
const secondaryToolbar = document.querySelector('.adf-secondary-toolbar');
expect(secondaryToolbar).toEqual(null);
});
it('should display second toolbar in rotate mode', fakeAsync(() => {
component.readOnly = false;
component.isEditing = true;
fixture.detectChanges();
const secondaryToolbar = document.querySelector('.adf-secondary-toolbar');
const resetButton = document.querySelector('#viewer-cancel-button');
const saveButton = document.querySelector('#viewer-save-button');
expect(secondaryToolbar).not.toEqual(null);
expect(resetButton).not.toEqual(null);
expect(saveButton).not.toEqual(null);
}));
it('should not be in editing mode by default', () => {
component.readOnly = false;
expect(component.isEditing).toEqual(false);
});
it('should get in editing mode when the image gets rotated', () => {
component.readOnly = false;
component.rotateImage();
expect(component.isEditing).toEqual(true);
});
it('should reset the scale and hide second toolbar', fakeAsync(() => {
component.readOnly = false;
component.isEditing = true;
spyOn(component, 'reset').and.callThrough();
spyOn(component.cropper, 'reset');
spyOn(component.cropper, 'zoomTo');
fixture.detectChanges();
const cancelButtonElement = fixture.debugElement.query(By.css('#viewer-cancel-button'));
cancelButtonElement.triggerEventHandler('click', null);
tick();
expect(component.reset).toHaveBeenCalled();
expect(component.scale).toEqual(1.0);
expect(component.isEditing).toEqual(false);
expect(component.cropper.reset).toHaveBeenCalled();
expect(component.cropper.zoomTo).toHaveBeenCalledWith(component.scale);
}));
it('should save when clicked on toolbar button', fakeAsync(() => {
component.readOnly = false;
component.isEditing = true;
spyOn(component, 'save');
fixture.detectChanges();
const saveButtonElement = fixture.debugElement.query(By.css('#viewer-save-button'));
saveButtonElement.triggerEventHandler('click', null);
tick();
expect(component.save).toHaveBeenCalled();
}));
});
});

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

@@ -22,14 +22,12 @@ import {
SimpleChanges,
ViewEncapsulation,
ElementRef,
OnInit,
OnDestroy,
Output,
EventEmitter
EventEmitter, AfterViewInit, ViewChild, HostListener
} from '@angular/core';
import { ContentService } from '../../services/content.service';
import { AppConfigService } from './../../app-config/app-config.service';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import Cropper from 'cropperjs';
@Component({
selector: 'adf-img-viewer',
@@ -38,11 +36,14 @@ import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
host: { 'class': 'adf-image-viewer' },
encapsulation: ViewEncapsulation.None
})
export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
export class ImgViewerComponent implements AfterViewInit, OnChanges {
@Input()
showToolbar = true;
@Input()
readOnly = true;
@Input()
urlFile: string;
@@ -55,128 +56,94 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
@Output()
error = new EventEmitter<any>();
rotate: number = 0;
scaleX: number = 1.0;
scaleY: number = 1.0;
offsetX: number = 0;
offsetY: number = 0;
step: number = 4;
isDragged: boolean = false;
@Output()
submit = new EventEmitter<any>();
private drag = { x: 0, y: 0 };
private delta = { x: 0, y: 0 };
@ViewChild('image', { static: false})
public imageElement: ElementRef;
get transform(): SafeStyle {
return this.sanitizer.bypassSecurityTrustStyle(`scale(${this.scaleX}, ${this.scaleY}) rotate(${this.rotate}deg) translate(${this.offsetX}px, ${this.offsetY}px)`);
}
public scale: number = 1.0;
public cropper: Cropper;
public isEditing: boolean = false;
get currentScaleText(): string {
return Math.round(this.scaleX * 100) + '%';
return Math.round(this.scale * 100) + '%';
}
private element: HTMLElement;
constructor(
private sanitizer: DomSanitizer,
private appConfigService: AppConfigService,
private contentService: ContentService,
private el: ElementRef) {
private contentService: ContentService) {
this.initializeScaling();
}
initializeScaling() {
const scaling = this.appConfigService.get<number>('adf-viewer.image-viewer-scaling', undefined) / 100;
if (scaling) {
this.scaleX = scaling;
this.scaleY = scaling;
this.scale = scaling;
}
}
ngOnInit() {
this.element = <HTMLElement> this.el.nativeElement.querySelector('#viewer-image');
ngAfterViewInit() {
this.cropper = new Cropper(this.imageElement.nativeElement, {
autoCrop: false,
dragMode: 'move',
background: false,
scalable: true,
zoomOnWheel: false,
toggleDragModeOnDblclick: false,
viewMode: 1,
checkCrossOrigin: false,
ready: () => {
if (this.imageElement.nativeElement.width < this.cropper.getContainerData().width) {
const width = this.imageElement.nativeElement.width;
const height = this.imageElement.nativeElement.height;
const top = (this.cropper.getContainerData().height - this.imageElement.nativeElement.height) / 2;
const left = (this.cropper.getContainerData().width - this.imageElement.nativeElement.width) / 2;
if (this.element) {
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
this.element.addEventListener('mouseup', this.onMouseUp.bind(this));
this.element.addEventListener('mouseleave', this.onMouseLeave.bind(this));
this.element.addEventListener('mouseout', this.onMouseOut.bind(this));
this.element.addEventListener('mousemove', this.onMouseMove.bind(this));
}
this.cropper.setCanvasData({
width,
height,
top,
left
});
}
}
});
}
ngOnDestroy() {
if (this.element) {
this.element.removeEventListener('mousedown', this.onMouseDown);
this.element.removeEventListener('mouseup', this.onMouseUp);
this.element.removeEventListener('mouseleave', this.onMouseLeave);
this.element.removeEventListener('mouseout', this.onMouseOut);
this.element.removeEventListener('mousemove', this.onMouseMove);
}
this.cropper.destroy();
}
@HostListener('document:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
const scaleX = (this.scaleX !== 0 ? this.scaleX : 1.0);
const scaleY = (this.scaleY !== 0 ? this.scaleY : 1.0);
if (event.key === 'ArrowDown') {
this.offsetY += (this.step / scaleY);
}
if (event.key === 'ArrowUp') {
this.offsetY -= (this.step / scaleY);
}
if (event.key === 'ArrowRight') {
this.offsetX += (this.step / scaleX);
}
if (event.key === 'ArrowLeft') {
this.offsetX -= (this.step / scaleX);
}
}
onMouseDown(event: MouseEvent) {
event.preventDefault();
this.isDragged = true;
this.drag = { x: event.pageX, y: event.pageY };
}
onMouseMove(event: MouseEvent) {
if (this.isDragged) {
event.preventDefault();
this.delta.x = event.pageX - this.drag.x;
this.delta.y = event.pageY - this.drag.y;
this.drag.x = event.pageX;
this.drag.y = event.pageY;
const scaleX = (this.scaleX !== 0 ? this.scaleX : 1.0);
const scaleY = (this.scaleY !== 0 ? this.scaleY : 1.0);
this.offsetX += (this.delta.x / scaleX);
this.offsetY += (this.delta.y / scaleY);
}
}
onMouseUp(event: MouseEvent) {
if (this.isDragged) {
event.preventDefault();
this.isDragged = false;
}
}
onMouseLeave(event: MouseEvent) {
if (this.isDragged) {
event.preventDefault();
this.isDragged = false;
}
}
onMouseOut(event: MouseEvent) {
if (this.isDragged) {
event.preventDefault();
this.isDragged = false;
switch (event.key) {
case 'ArrowLeft':
event.preventDefault();
this.cropper.move(-3, 0);
break;
case 'ArrowUp':
event.preventDefault();
this.cropper.move(0, -3);
break;
case 'ArrowRight':
event.preventDefault();
this.cropper.move(3, 0);
break;
case 'ArrowDown':
event.preventDefault();
this.cropper.move(0, 3);
break;
case 'i':
this.zoomIn();
break;
case 'o':
this.zoomOut();
break;
case 'r':
this.rotateImage();
break;
default:
}
}
@@ -192,34 +159,34 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
}
zoomIn() {
const ratio = +((this.scaleX + 0.2).toFixed(1));
this.scaleX = this.scaleY = ratio;
this.cropper.zoom( 0.2);
this.scale = +((this.scale + 0.2).toFixed(1));
}
zoomOut() {
let ratio = +((this.scaleX - 0.2).toFixed(1));
if (ratio < 0.2) {
ratio = 0.2;
if (this.scale > 0.2) {
this.cropper.zoom( -0.2 );
this.scale = +((this.scale - 0.2).toFixed(1));
}
this.scaleX = this.scaleY = ratio;
}
rotateLeft() {
const angle = this.rotate - 90;
this.rotate = Math.abs(angle) < 360 ? angle : 0;
rotateImage() {
this.isEditing = true;
this.cropper.rotate( -90);
}
rotateRight() {
const angle = this.rotate + 90;
this.rotate = Math.abs(angle) < 360 ? angle : 0;
save() {
this.isEditing = false;
this.cropper.getCroppedCanvas().toBlob((blob) => {
this.submit.emit(blob);
});
}
reset() {
this.rotate = 0;
this.scaleX = 1.0;
this.scaleY = 1.0;
this.offsetX = 0;
this.offsetY = 0;
this.isEditing = false;
this.cropper.reset();
this.scale = 1.0;
this.cropper.zoomTo(this.scale);
}
onImageError() {

5
lib/core/viewer/components/viewer.component.html
View File

@@ -220,7 +220,10 @@
<adf-img-viewer [urlFile]="urlFileContent"
[nameFile]="displayName"
[blobFile]="blobFile"
(error)="onUnsupportedFile()"></adf-img-viewer>
[readOnly]="readOnly"
(error)="onUnsupportedFile()"
(submit)="onSubmitFile($event)"
></adf-img-viewer>
</ng-container>
<ng-container *ngSwitchCase="'media'">

1
lib/core/viewer/components/viewer.component.scss
View File

@@ -1,4 +1,5 @@
@import '~@angular/material/theming';
@import '~cropperjs/dist/cropper.min.css';
@mixin adf-viewer-theme($theme) {
$background: map-get($theme, background);

9
lib/core/viewer/components/viewer.component.spec.ts
View File

@@ -960,6 +960,15 @@ describe('ViewerComponent', () => {
component.ngOnChanges();
});
it('should emit new blob when emitted by image-viewer ', () => {
spyOn(component.fileSubmit, 'emit');
const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
const fakeBlob = new Blob([data], { type: 'image/png' });
component.onSubmitFile(fakeBlob);
expect(component.fileSubmit.emit).toHaveBeenCalledWith(fakeBlob);
});
});
describe('display name property override by urlFile', () => {

12
lib/core/viewer/components/viewer.component.ts
View File

@@ -97,6 +97,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
@Input()
showToolbar = true;
/** Hide or show media management actions for image-viewer component */
@Input()
readOnly = true;
/** Specifies the name of the file when it is not available from the URL. */
@Input()
displayName: string;
@@ -206,6 +210,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
@Output()
invalidSharedLink = new EventEmitter();
/** Emitted when user updates a node via rotate, crop, etc. */
@Output()
fileSubmit = new EventEmitter<Blob>();
TRY_TIMEOUT: number = 10000;
viewerType = 'unknown';
@@ -685,6 +693,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
}
onSubmitFile(newImageBlob: Blob) {
this.fileSubmit.emit(newImageBlob);
}
onUnsupportedFile() {
this.viewerType = 'unknown';
}

5
package-lock.json generated
View File

@@ -10231,6 +10231,11 @@
"sha.js": "^2.4.8"
}
},
"cropperjs": {
"version": "1.5.11",
"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.11.tgz",
"integrity": "sha512-SJUeBBhtNBnnn+UrLKluhFRIXLJn7XFPv8QN1j49X5t+BIMwkgvDev541f96bmu8Xe0TgCx3gON22KmY/VddaA=="
},
"cross-fetch": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.6.tgz",

1
package.json
View File

@@ -92,6 +92,7 @@
"apollo-angular": "^2.3.0",
"chart.js": "2.9.4",
"classlist.js": "1.1.20150312",
"cropperjs": "1.5.11",
"custom-event-polyfill": "^1.0.7",
"minimatch": "^3.0.4",
"minimatch-browser": "1.0.0",