bug of image viewer is fixed

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

@@ -171,7 +171,7 @@
         *ngIf="fileDownloadUrl"
         [src]="fileDownloadUrl"
         [style.width]="'auto'"
-        [style.height]="getImageHeight(imageContainer.clientHeight)"
+        [style.height]="imageHeight + 'px'"
         (load)="onLoadFileDownloadUrl(downloadImage)"
       />
     </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts

@@ -5,7 +5,9 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  ViewChild,
+  ElementRef
 } from '@angular/core';
 import { ucapAnimations } from '../../animations';
 import { FileEventJson } from '@ucap-webmessenger/protocol-event';
@@ -31,10 +33,17 @@ export class ImageViewerComponent implements OnInit {
   @Output()
   download = new EventEmitter<FileDownloadItem>();
 
+  @ViewChild('imageContainer', { static: false })
+  imageContainer: ElementRef<HTMLElement>;
+
+  @ViewChild('downloadImage', { static: false })
+  downloadImage: ElementRef<HTMLElement>;
+
   fileDownloadItem: FileDownloadItem;
 
   naturalWidth = 0;
   naturalHeight = 0;
+  imageHeight = 0;
 
   zoomRatio = 100;
 
@@ -58,6 +67,8 @@ export class ImageViewerComponent implements OnInit {
     this.naturalWidth = img.naturalWidth;
     this.naturalHeight = img.naturalHeight;
 
+    this.setImageHeight();
+
     this.changeDetectorRef.detectChanges();
   }
 
@@ -67,6 +78,8 @@ export class ImageViewerComponent implements OnInit {
     }
     this.zoomRatio -= 10;
 
+    this.setImageHeight();
+
     this.changeDetectorRef.detectChanges();
   }
   onClickZoomIn() {
@@ -75,21 +88,52 @@ export class ImageViewerComponent implements OnInit {
     }
     this.zoomRatio += 10;
 
+    this.setImageHeight();
+
     this.changeDetectorRef.detectChanges();
   }
   onClickZoomReset() {
     this.zoomRatio = 100;
 
+    this.setImageHeight();
+
     this.changeDetectorRef.detectChanges();
   }
 
-  getImageHeight(containerHeight: number): string {
+  setImageHeight() {
-    const realContainerHeight = containerHeight - 20;
+    const realContainerHeight =
+      this.imageContainer.nativeElement.clientHeight - 20;
     const oriHeight =
       this.naturalHeight > realContainerHeight
         ? realContainerHeight
         : this.naturalHeight;
 
-    return oriHeight * (this.zoomRatio / 100) + 'px';
+    const oriWidth = (oriHeight * this.naturalWidth) / this.naturalHeight;
+
+    const imageHeight = oriHeight * (this.zoomRatio / 100);
+    const imageWidth = oriWidth * (this.zoomRatio / 100);
+    let imageTop =
+      (this.imageContainer.nativeElement.clientHeight - imageHeight) / 2;
+    let imageLeft =
+      (this.imageContainer.nativeElement.clientWidth - imageWidth) / 2;
+
+    let scrollTop = 0;
+    if (0 > imageTop) {
+      scrollTop = Math.abs(imageTop);
+      imageTop = 0;
+    }
+
+    let scrollLeft = 0;
+    if (0 > imageLeft) {
+      scrollLeft = Math.abs(imageLeft);
+      imageLeft = 0;
+    }
+
+    this.downloadImage.nativeElement.style.top = `${imageTop}px`;
+    this.downloadImage.nativeElement.style.left = `${imageLeft}px`;
+    this.imageContainer.nativeElement.scrollTop = scrollTop;
+    this.imageContainer.nativeElement.scrollLeft = scrollLeft;
+
+    this.imageHeight = imageHeight;
   }
 }