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

center the container always based on the width&height of the image (#7027)

Browse Source
This commit is contained in:
Urse Daniel 2021-05-14 15:43:33 +03:00 committed by GitHub
parent 251b64a8f3
commit 11b66338d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -319,7 +319,9 @@ describe('Test Img viewer component ', () => {
component.isEditing = true; component.isEditing = true;
spyOn(component, 'reset').and.callThrough(); spyOn(component, 'reset').and.callThrough();
spyOn(component, 'updateCanvasContainer');
spyOn(component.cropper, 'reset'); spyOn(component.cropper, 'reset');
spyOn(component.cropper, 'clear');
spyOn(component.cropper, 'zoomTo'); spyOn(component.cropper, 'zoomTo');
fixture.detectChanges(); fixture.detectChanges();
@ -331,7 +333,8 @@ describe('Test Img viewer component ', () => {
expect(component.scale).toEqual(1.0); expect(component.scale).toEqual(1.0);
expect(component.isEditing).toEqual(false); expect(component.isEditing).toEqual(false);
expect(component.cropper.reset).toHaveBeenCalled(); expect(component.cropper.reset).toHaveBeenCalled();
expect(component.cropper.zoomTo).toHaveBeenCalledWith(component.scale); expect(component.cropper.clear).toHaveBeenCalled();
expect(component.updateCanvasContainer).toHaveBeenCalled();
})); }));
it('should save when clicked on toolbar button', fakeAsync(() => { it('should save when clicked on toolbar button', fakeAsync(() => {

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

@ -94,19 +94,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
viewMode: 1, viewMode: 1,
checkCrossOrigin: false, checkCrossOrigin: false,
ready: () => { ready: () => {
if (this.imageElement.nativeElement.width < this.cropper.getContainerData().width) { this.updateCanvasContainer();
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;
this.cropper.setCanvasData({
width,
height,
top,
left
});
}
} }
}); });
} }
@ -198,7 +186,23 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
this.cropper.reset(); this.cropper.reset();
this.cropper.setDragMode('move'); this.cropper.setDragMode('move');
this.scale = 1.0; this.scale = 1.0;
this.cropper.zoomTo(this.scale); this.updateCanvasContainer();
}
updateCanvasContainer() {
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;
this.cropper.setCanvasData({
width,
height,
top,
left
});
}
} }
onImageError() { onImageError() {