From 11b66338d0362b35a3d3ca4bf4909d16056b2a52 Mon Sep 17 00:00:00 2001
From: Urse Daniel <daniel.urse@hotmail.com>
Date: Fri, 14 May 2021 15:43:33 +0300
Subject: [PATCH] center the container always based on the width&height of the
 image (#7027)

---
 .../components/img-viewer.component.spec.ts   |  5 ++-
 .../viewer/components/img-viewer.component.ts | 32 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/lib/core/viewer/components/img-viewer.component.spec.ts b/lib/core/viewer/components/img-viewer.component.spec.ts
index f8b697c763..15d74ee931 100644
--- a/lib/core/viewer/components/img-viewer.component.spec.ts
+++ b/lib/core/viewer/components/img-viewer.component.spec.ts
@@ -319,7 +319,9 @@ describe('Test Img viewer component ', () => {
             component.isEditing = true;
 
             spyOn(component, 'reset').and.callThrough();
+            spyOn(component, 'updateCanvasContainer');
             spyOn(component.cropper, 'reset');
+            spyOn(component.cropper, 'clear');
             spyOn(component.cropper, 'zoomTo');
 
             fixture.detectChanges();
@@ -331,7 +333,8 @@ describe('Test Img viewer component ', () => {
             expect(component.scale).toEqual(1.0);
             expect(component.isEditing).toEqual(false);
             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(() => {
diff --git a/lib/core/viewer/components/img-viewer.component.ts b/lib/core/viewer/components/img-viewer.component.ts
index 87731933fc..fe9353a213 100644
--- a/lib/core/viewer/components/img-viewer.component.ts
+++ b/lib/core/viewer/components/img-viewer.component.ts
@@ -94,19 +94,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
             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;
-
-                    this.cropper.setCanvasData({
-                        width,
-                        height,
-                        top,
-                        left
-                    });
-                }
+                this.updateCanvasContainer();
             }
         });
     }
@@ -198,7 +186,23 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
         this.cropper.reset();
         this.cropper.setDragMode('move');
         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() {