From 36a6b0e568af7b4648e29b4b0c5c8122c7b7a203 Mon Sep 17 00:00:00 2001 From: Darya Balvanovich Date: Thu, 5 Sep 2024 09:35:51 +0200 Subject: [PATCH] WIP on ACS-8602-The-tabs-names-in-window-are-not-match-in-the-design ACS-24317 fix src double call --- .../img-viewer/img-viewer.component.ts | 81 ++++++++++--------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts index ab4b3920f9..f5e61e98ae 100644 --- a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts +++ b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts @@ -81,46 +81,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy { isSaving = new EventEmitter(); @ViewChild('image', { static: false }) - public imageElement: ElementRef; - - public scale: number = 1.0; - public cropper: Cropper; - public isEditing: boolean = false; - - get currentScaleText(): string { - return Math.round(this.scale * 100) + '%'; - } - - constructor(private appConfigService: AppConfigService, private urlService: UrlService) { - this.initializeScaling(); - } - - initializeScaling() { - const scaling = this.appConfigService.get('adf-viewer-render.image-viewer-scaling', undefined) / 100; - if (scaling) { - this.scale = scaling; - } - } - - ngAfterViewInit() { - this.cropper = new Cropper(this.imageElement.nativeElement, { - autoCrop: false, - dragMode: 'move', - background: false, - scalable: true, - zoomOnWheel: true, - toggleDragModeOnDblclick: false, - viewMode: 1, - checkCrossOrigin: false, - ready: () => { - this.updateCanvasContainer(); - } - }); - } - - ngOnDestroy() { - this.cropper.destroy(); - } + imageElement: ElementRef; @HostListener('document:keydown', ['$event']) onKeyDown(event: KeyboardEvent) { @@ -161,6 +122,18 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy { } } + scale: number = 1.0; + cropper: Cropper; + isEditing: boolean = false; + + get currentScaleText(): string { + return Math.round(this.scale * 100) + '%'; + } + + constructor(private appConfigService: AppConfigService, private urlService: UrlService) { + this.initializeScaling(); + } + ngOnChanges(changes: SimpleChanges) { const blobFile = changes['blobFile']; if (blobFile?.currentValue) { @@ -179,6 +152,34 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy { } } + ngAfterViewInit() { + this.cropper = new Cropper(this.imageElement.nativeElement, { + autoCrop: false, + checkOrientation: false, + dragMode: 'move', + background: false, + scalable: true, + zoomOnWheel: true, + toggleDragModeOnDblclick: false, + viewMode: 1, + checkCrossOrigin: false, + ready: () => { + this.updateCanvasContainer(); + } + }); + } + + ngOnDestroy() { + this.cropper.destroy(); + } + + initializeScaling() { + const scaling = this.appConfigService.get('adf-viewer-render.image-viewer-scaling', undefined) / 100; + if (scaling) { + this.scale = scaling; + } + } + zoomIn() { this.cropper.zoom(0.2); this.scale = +(this.scale + 0.2).toFixed(1);