viewer/LdPicture: fix centering in loading phase

2 files changed, 45 insertions, 26 deletions

diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 622165d..de46bcb 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -18,6 +18,7 @@
 -->
 
 <template>
+  <!-- FIXME: v-dragscroll interferes with pinch-to-zoom -->
   <div
     ref="containerElement"
     v-dragscroll
@@ -34,7 +35,7 @@
       class="ld-picture-element"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
-      @load="lazyImageLoaded"
+      @load="clearSlowLoading"
     />
     <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
   </div>
@@ -49,7 +50,7 @@ import DragScrollClickFix from "@/services/dragscrollclickfix";
 export default class LdPicture extends Vue {
   @Prop({ required: true }) readonly picture!: Gallery.Picture;
   @Ref() readonly containerElement!: HTMLDivElement;
-  @Ref() readonly imageElement!: any; // FIXME: no typedef for v-lazy-image
+  @Ref() readonly imageElement!: Vue;
 
   readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
   readonly dragScrollClickFix = new DragScrollClickFix();
@@ -60,17 +61,13 @@ export default class LdPicture extends Vue {
 
   mounted() {
     this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
+    new LdZoom(this.containerElement, this.imageElement.$el as HTMLImageElement, this.picture.properties, 10, 1 / 5).install();
   }
 
   destroyed() {
     this.clearSlowLoading();
   }
 
-  lazyImageLoaded() {
-    this.clearSlowLoading();
-    new LdZoom(this.containerElement, this.imageElement.$el, 10, 1 / 5).install();
-  }
-
   clearSlowLoading() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts
index 50f006e..c28c2c8 100644
--- a/viewer/src/services/ldzoom.ts
+++ b/viewer/src/services/ldzoom.ts
@@ -27,28 +27,31 @@ import "hammerjs";
 export default class LdZoom {
   readonly containerElement: HTMLDivElement;
   readonly imageElement: HTMLImageElement;
+  readonly pictureProperties: Gallery.PictureProperties;
   readonly maxScaleFactor: number;
   readonly scrollZoomSpeed: number;
   scaleFactor: number = 0.0;
 
   constructor(
     containerElement: HTMLDivElement, imageElement: HTMLImageElement,
+    pictureProperties: Gallery.PictureProperties,
     maxScaleFactor: number, scrollZoomSpeed: number
   ) {
     this.containerElement = containerElement;
     this.imageElement = imageElement;
+    this.pictureProperties = pictureProperties;
     this.maxScaleFactor = maxScaleFactor;
     this.scrollZoomSpeed = scrollZoomSpeed;
   }
 
   /**
    * Register event listeners.
-   * The dimension of the image should be known before calling this method.
    */
   public install() {
+    this.updateImageScale(this.scaleFactor);
+
     new ResizeObserver(() => {
-      this.setImageScale(this.scaleFactor);
-      this.recenterImageElement();
+      this.updateImageScale(this.scaleFactor);
     }).observe(this.containerElement);
 
     this.containerElement.addEventListener('wheel', wheelEvent => {
@@ -60,8 +63,6 @@ export default class LdZoom {
     const pinchListener = new Hammer(this.containerElement);
     pinchListener.get('pinch').set({enable: true});
     this.installPinchHandler(pinchListener);
-
-    this.setImageScale(this.scaleFactor);
   }
 
   private installPinchHandler(pinchListener: HammerManager) {
@@ -72,7 +73,6 @@ export default class LdZoom {
     });
 
     pinchListener.on('pinchmove', (pinchEvent: HammerInput) => {
-      // FIXME: v-dragscroll interferes with our focus point scroll adjustment
       const focusX = pinchEvent.center.x + this.containerElement.scrollLeft;
       const focusY = pinchEvent.center.y + this.containerElement.scrollTop;
       const scaleFactor = pinchEvent.scale * startScaleFactor;
@@ -81,32 +81,54 @@ export default class LdZoom {
   }
 
   /**
+   * Returns the picture resolution as it should be displayed.
+   */
+  private getDisplayResolution(): Gallery.Resolution {
+    return {
+      width: this.pictureProperties.resolution.width * this.scaleFactor,
+      height: this.pictureProperties.resolution.height * this.scaleFactor,
+    };
+  }
+
+  /**
+   * Applies scaling to the DOM image element.
+   * To call after internal intermediate computations because DOM properties aren't stable.
+   */
+  private resizeImageElement() {
+    const imageDim = this.getDisplayResolution();
+    this.imageElement.width = imageDim.width;
+    this.imageElement.height = imageDim.height;
+  }
+
+  /**
    * Centers the image element inside its container if it fits, or stick to the top and left borders otherwise.
    * It's depressingly hard to do in pure CSS…
    */
   private recenterImageElement() {
-    const marginLeft = Math.max((this.containerElement.clientWidth - this.imageElement.clientWidth) / 2, 0);
-    const marginTop = Math.max((this.containerElement.clientHeight - this.imageElement.clientHeight) / 2, 0);
+    const imageDim = this.getDisplayResolution();
+    const marginLeft = Math.max((this.containerElement.clientWidth - imageDim.width) / 2, 0);
+    const marginTop = Math.max((this.containerElement.clientHeight - imageDim.height) / 2, 0);
     this.imageElement.style.marginLeft = `${marginLeft}px`;
     this.imageElement.style.marginTop = `${marginTop}px`;
   }
 
   private zoom(focusX: number, focusY: number, scaleFactor: number) {
-    const ratioX = focusX / this.imageElement.clientWidth;
-    const ratioY = focusY / this.imageElement.clientHeight;
-    this.setImageScale(Math.min(scaleFactor, this.maxScaleFactor));
-    this.containerElement.scrollLeft -= focusX - ratioX * this.imageElement.clientWidth;
-    this.containerElement.scrollTop -= focusY - ratioY * this.imageElement.clientHeight;
+    const imageDim = this.getDisplayResolution();
+    const ratioX = focusX / imageDim.width;
+    const ratioY = focusY / imageDim.height;
+    this.updateImageScale(Math.min(scaleFactor, this.maxScaleFactor));
+
+    const newImageDim = this.getDisplayResolution();
+    this.containerElement.scrollLeft -= focusX - ratioX * newImageDim.width;
+    this.containerElement.scrollTop -= focusY - ratioY * newImageDim.height;
   }
 
-  private setImageScale(newScaleFactor: number) {
-    const horizontalFillRatio = this.containerElement.clientWidth / this.imageElement.naturalWidth;
-    const verticalFillRatio = this.containerElement.clientHeight / this.imageElement.naturalHeight;
+  private updateImageScale(newScaleFactor: number) {
+    const horizontalFillRatio = this.containerElement.clientWidth / this.pictureProperties.resolution.width;
+    const verticalFillRatio = this.containerElement.clientHeight / this.pictureProperties.resolution.height;
     const minScaleFactor = Math.min(horizontalFillRatio, verticalFillRatio, 1.0);
     this.scaleFactor = Math.max(newScaleFactor, minScaleFactor);
-
-    this.imageElement.width = this.scaleFactor * this.imageElement.naturalWidth;
-    this.imageElement.height = this.scaleFactor * this.imageElement.naturalHeight;
+    this.resizeImageElement();
     this.recenterImageElement();
   }
 }