ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug of image viewer is fixed

Browse Source
This commit is contained in:
richard-loafle 2020-02-12 13:34:46 +09:00
parent 01fef0930e
commit 2665252d8c
2 changed files with 49 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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 {
const realContainerHeight = containerHeight - 20;
setImageHeight() {
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;
}
}