viewer/LdPicture: initially fit image in viewport

1 files changed, 5 insertions, 4 deletions

diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts
index f001805..61b5dc6 100644
--- a/viewer/src/services/ldzoom.ts
+++ b/viewer/src/services/ldzoom.ts
@@ -28,7 +28,7 @@ export default class LdZoom {
   readonly imageElement: HTMLImageElement;
   readonly maxScaleFactor: number;
   readonly zoomSpeed: number;
-  scaleFactor: number;
+  scaleFactor: number = 0.0;
 
   constructor(
     containerElement: HTMLDivElement, imageElement: HTMLImageElement,
@@ -38,9 +38,12 @@ export default class LdZoom {
     this.imageElement = imageElement;
     this.maxScaleFactor = maxScaleFactor;
     this.zoomSpeed = zoomSpeed;
-    this.scaleFactor = imageElement.clientWidth / imageElement.naturalWidth;
   }
 
+  /**
+   * Register event listeners.
+   * The dimension of the image should be known before calling this method.
+   */
   public install() {
     new ResizeObserver(() => {
       this.setImageScale(this.scaleFactor);
@@ -53,8 +56,6 @@ export default class LdZoom {
     });
 
     // TODO: handle pinch-to-zoom.
-
-    this.recenterImageElement();
   }
 
   /**