Improve zoom performance of image viewer

dainst · Dec 6, 2024 · b8ae0cd · b8ae0cd
1 parent 4855984
commit b8ae0cd
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/desktop/src/app/components/image/viewer/image-viewer.component.ts b/desktop/src/app/components/image/viewer/image-viewer.component.ts
@@ -29,6 +29,8 @@ export class ImageViewerComponent implements OnChanges, OnDestroy {
 
     @ViewChild('container') containerElement: ElementRef;
     @ViewChild('originalImage') imageElement: ElementRef;
+    @ViewChild('preloadImage') preloadImageElement: ElementRef;
+    @ViewChild('overlay') overlayElement: ElementRef;
 
     public imageContainer: ImageContainer;
     public maxZoom: number;
@@ -105,12 +107,15 @@ export class ImageViewerComponent implements OnChanges, OnDestroy {
 
         this.stopLoading();
         await this.setupPanZoom();
+
+        this.overlayElement.nativeElement.style['z-index'] = 1000;
     }
 
 
     private async update() {
 
         this.stopLoading();
+        await AngularUtility.refresh();
 
         if (this.image.resource.id === this.imageContainer?.document.resource.id) return;
 
@@ -126,6 +131,7 @@ export class ImageViewerComponent implements OnChanges, OnDestroy {
     private async loadImage(document: ImageDocument): Promise<ImageContainer> {
 
         this.startLoading();
+        this.overlayElement.nativeElement.style['z-index'] = 1002;
         this.changeDetectorRef.detectChanges();
 
         const imageContainer: ImageContainer = { document };
@@ -189,6 +195,9 @@ export class ImageViewerComponent implements OnChanges, OnDestroy {
         await AngularUtility.refresh();
 
         this.maxZoom = this.calculateMaxZoom();
+        this.imageElement.nativeElement.style.transform = 'none';
+        this.preloadImageElement.nativeElement.style.transform
+            = `matrix(${this.maxZoom}, 0, 0, ${this.maxZoom}, 0, 0)`;
 
         this.panzoomInstance = panzoom(
             this.imageElement.nativeElement,

diff --git a/desktop/src/app/components/image/viewer/image-viewer.html b/desktop/src/app/components/image/viewer/image-viewer.html
@@ -6,12 +6,19 @@
          i18n="@@image.originalNotFoundWarning">
         Die Original-Version des Bilds befindet sich nicht im Bilderverzeichnis.
     </div>
+    <div #overlay id="image-overlay"></div>
     <img *ngIf="isImageContainerVisible() && containsOriginal(imageContainer)"
          #originalImage
-         [src]="imageContainer?.imgSrc"
-         (load)="onImageLoaded()">
-    <img *ngIf="isImageContainerVisible() && !containsOriginal(imageContainer)"
-         [src]="imageContainer?.thumbSrc">
+         id="original-image"
+         [src]="imageContainer?.imgSrc">
+     <img *ngIf="isImageContainerVisible() && containsOriginal(imageContainer)"
+          #preloadImage
+          id="preload-image"
+          [src]="imageContainer?.imgSrc"
+          (load)="onImageLoaded()">
+     <img *ngIf="isImageContainerVisible() && !containsOriginal(imageContainer)"
+          id="thumbnail-image"
+          [src]="imageContainer?.thumbSrc">
     <zoom-buttons [zoomInEnabled]="containsOriginal(imageContainer) && getScale() < maxZoom"
                   [zoomOutEnabled]="containsOriginal(imageContainer) && getScale() > 1"
                   (onZoomInClicked)="zoomIn()"

diff --git a/desktop/src/app/components/image/viewer/image-viewer.scss b/desktop/src/app/components/image/viewer/image-viewer.scss
@@ -10,18 +10,40 @@ image-viewer {
       cursor: grabbing;
     }
 
+    #image-overlay {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: #000;
+    }
+
     img {
+      position: relative;
       max-width: 100%;
       max-height: 100%;
       object-fit: scale-down;
       user-select: none;
       -webkit-user-drag: none;
     }
 
+    #original-image {
+      will-change: transform;
+    }
+
+    #original-image,
+    #thumbnail-image {
+      z-index: 1001;
+    }
+
+    #preload-image {
+      z-index: 999;
+    }
+
     zoom-buttons {
       position: absolute;
       top: 8px;
       left: 8px;
+      z-index: 1003;
     }
 
     .align-items-center {