ucap-doc/documents/업무/6월/2째주/backup/image-viewer.component.ts

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ChangeDetectorRef,
  ChangeDetectionStrategy,
  ViewChild,
  ElementRef,
  HostListener
} from '@angular/core';
import { ucapAnimations } from '../../animations';
import { FileDownloadItem } from '@ucap-webmessenger/api';
import { FileInfo } from '@ucap-webmessenger/protocol-file';
@Component({
  selector: 'ucap-image-viewer',
  templateUrl: './image-viewer.component.html',
  styleUrls: ['./image-viewer.component.scss'],
  animations: ucapAnimations,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ImageViewerComponent implements OnInit {
  @Input()
  fileInfo: FileInfo;

  @Input()
  fileName: string;

  @Input()
  fileDownloadUrl: string;

  @Output()
  closed = new EventEmitter<void>();

  @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;

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    this.naturalWidth = this.fileInfo.sentMessageJson.imageWidth;
    this.naturalHeight = this.fileInfo.sentMessageJson.imageHeight;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: Event) {
    this.setImageHeight();

    this.changeDetectorRef.detectChanges();
  }

  onClickDownload(): void {
    this.fileDownloadItem = new FileDownloadItem();
    this.download.emit(this.fileDownloadItem);
  }

  onClickClose(): void {
    this.closed.emit();
  }

  onLoadFileDownloadUrl(img: HTMLImageElement) {
    this.naturalWidth = img.naturalWidth;
    this.naturalHeight = img.naturalHeight;

    this.setImageHeight();

    this.changeDetectorRef.detectChanges();
  }

  onClickZoomOut() {
    if (60 >= this.zoomRatio) {
      return;
    }
    this.zoomRatio -= 10;

    this.setImageHeight();

    this.changeDetectorRef.detectChanges();
  }
  onClickZoomIn() {
    if (180 <= this.zoomRatio) {
      return;
    }
    this.zoomRatio += 10;

    this.setImageHeight();

    this.changeDetectorRef.detectChanges();
  }
  onClickZoomReset() {
    this.zoomRatio = 100;

    this.setImageHeight();

    this.changeDetectorRef.detectChanges();
  }

  setImageHeight() {
    const realContainerHeight =
      this.imageContainer.nativeElement.clientHeight - 20;
    const oriHeight =
      this.naturalHeight > realContainerHeight
        ? realContainerHeight
        : this.naturalHeight;

    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;
  }
}