Fix scrolling behaviour to only zoom when in image view

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent b2ad753da2
commit e9a4602ee0

@ -4,7 +4,7 @@
</button> </button>
<div class="file-full-view" fxFlex="80%" <div class="file-full-view" fxFlex="80%"
(dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null"> (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null">
<div class="file-full-view-inner"> <div (mouseenter)="this.mouseInImageView = true" (mouseleave)="this.mouseInImageView = false" class="file-full-view-inner">
<div *ngIf="!this.fileContentUrl" class="url-loading-backdrop"> <div *ngIf="!this.fileContentUrl" class="url-loading-backdrop">
<mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner> <mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
</div> </div>

@ -32,9 +32,10 @@ export class FileGalleryComponent implements OnChanges, OnInit {
@ViewChild("imageDragContainer") imageDragContainer: ElementRef<HTMLDivElement> | undefined; @ViewChild("imageDragContainer") imageDragContainer: ElementRef<HTMLDivElement> | undefined;
public selectedFile: Selectable<File> | undefined; public selectedFile: Selectable<File> | undefined;
fileContentUrl: SafeResourceUrl | undefined; public fileContentUrl: SafeResourceUrl | undefined;
public imageZoom = 1; public imageZoom = 1;
public imagePosition = {x: 0, y: 0}; public imagePosition = {x: 0, y: 0};
public mouseInImageView = false;
constructor(private fileService: FileService) { constructor(private fileService: FileService) {
} }
@ -152,7 +153,8 @@ export class FileGalleryComponent implements OnChanges, OnInit {
@HostListener("mousewheel", ["$event"]) @HostListener("mousewheel", ["$event"])
private handleScroll(event: any) { private handleScroll(event: any) {
const delta = event.wheelDelta ?? event.detail if (this.mouseInImageView) {
const delta = event.wheelDelta ?? event.detail;
if (delta > 0) { if (delta > 0) {
this.imageZoom += 0.2 this.imageZoom += 0.2
@ -166,6 +168,7 @@ export class FileGalleryComponent implements OnChanges, OnInit {
} }
} }
} }
}
private getPreselectedEntry(): Selectable<File> | undefined { private getPreselectedEntry(): Selectable<File> | undefined {
if (this.preselectedFile) { if (this.preselectedFile) {

Loading…
Cancel
Save