image viewer is modified

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

@@ -26,6 +26,7 @@
       matTooltip="{{ 'common.messages.zoomReset' | translate }}"
       matTooltipPosition="below"
       aria-label=""
+      (click)="onClickZoomReset()"
     >
       <!--<mat-icon>settings_overscan</mat-icon>-->
 
@@ -51,6 +52,7 @@
       matTooltip="{{ 'common.messages.zoomOut' | translate }}"
       matTooltipPosition="below"
       aria-label=""
+      (click)="onClickZoomOut()"
     >
       <!--<mat-icon>zoom_out</mat-icon>-->
       <svg
@@ -75,6 +77,7 @@
       matTooltip="{{ 'common.messages.zoomIn' | translate }}"
       matTooltipPosition="below"
       aria-label=""
+      (click)="onClickZoomIn()"
     >
       <!--<mat-icon>zoom_in</mat-icon>-->
       <svg
@@ -162,7 +165,14 @@
       fxFlexFill
       fxLayoutAlign="center center"
     >
-      <img *ngIf="fileDownloadUrl" [src]="fileDownloadUrl" />
+      <img
+        #downloadImage
+        *ngIf="fileDownloadUrl"
+        [src]="fileDownloadUrl"
+        [style.width]="(zoomRatio / 100) * naturalWidth + 'px'"
+        [style.height]="'auto'"
+        (load)="onLoadFileDownloadUrl(downloadImage)"
+      />
     </div>
   </div>
 </div>

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

@@ -39,11 +39,15 @@
     height: calc(100% - 60px);
 
     .ucap-image-viewer-image-wrapper {
+      position: relative;
+      width: 100%;
       height: 100%;
-      padding: 20px;
       background-color: rgba(0, 0, 0, 0.7);
+      overflow: auto;
+
       img {
-        height: inherit;
+        position: absolute;
+        max-width: none !important;
       }
     }
   }

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

@@ -1,4 +1,12 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  ViewChild
+} from '@angular/core';
 import { ucapAnimations } from '../../animations';
 import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
@@ -24,9 +32,17 @@ export class ImageViewerComponent implements OnInit {
 
   fileDownloadItem: FileDownloadItem;
 
+  naturalWidth = 0;
+  naturalHeight = 0;
+
+  zoomRatio = 100;
+
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.naturalWidth = this.fileInfo.imageWidth;
+    this.naturalHeight = this.fileInfo.imageHeight;
+  }
 
   onClickDownload(): void {
     this.fileDownloadItem = new FileDownloadItem();
@@ -36,4 +52,26 @@ export class ImageViewerComponent implements OnInit {
   onClickClose(): void {
     this.closed.emit();
   }
+
+  onLoadFileDownloadUrl(img: HTMLImageElement) {
+    console.log('onLoadFileDownloadUrl', img.naturalWidth, img.naturalHeight);
+    this.naturalWidth = img.naturalWidth;
+    this.naturalHeight = img.naturalHeight;
+  }
+
+  onClickZoomOut() {
+    if (60 >= this.zoomRatio) {
+      return;
+    }
+    this.zoomRatio -= 10;
+  }
+  onClickZoomIn() {
+    if (180 <= this.zoomRatio) {
+      return;
+    }
+    this.zoomRatio += 10;
+  }
+  onClickZoomReset() {
+    this.zoomRatio = 100;
+  }
 }