feat: lock image movements & fit whole image regardless of orientation

Quozul · May 13, 2024 · ea04f5e · ea04f5e
1 parent ad85881
commit ea04f5e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/public/image-landscape.jpg b/public/image-landscape.jpg
diff --git a/src/listenMouseMove.ts b/src/listenMouseMove.ts
@@ -10,7 +10,7 @@ export function listenMouseMove(
     if (evCache.length === 2) {
       const touch1 = evCache[0];
       const touch2 = evCache[1];
-      return Math.sqrt(Math.pow(touch1.clientX - touch2.clientX, 2) + Math.pow(touch1.clientY - touch2.clientY, 2));
+      return Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
     }
     return 0;
   };
@@ -26,7 +26,7 @@ export function listenMouseMove(
     if (evCache.length === 2) {
       // Calculate the distance between the two pointers
       const currentDistance = calculateTouchDistance();
-      const zoomLevel = previousDistance / currentDistance;
+      const zoomLevel = currentDistance / previousDistance;
 
       const mouseX = event.clientX - element.clientLeft;
       const mouseY = event.clientY - element.clientTop;
@@ -35,8 +35,8 @@ export function listenMouseMove(
       previousDistance = currentDistance;
     }
 
-    const offsetX = (previousPointerEvent.clientX - event.clientX) / evCache.length;
-    const offsetY = (previousPointerEvent.clientY - event.clientY) / evCache.length;
+    const offsetX = (event.clientX - previousPointerEvent.clientX) / evCache.length;
+    const offsetY = (event.clientY - previousPointerEvent.clientY) / evCache.length;
     callback(offsetX, offsetY);
 
     evCache[index] = event;
@@ -56,7 +56,7 @@ export function listenMouseMove(
   };
 
   const handleWheel = (event: WheelEvent) => {
-    const delta = -event.deltaY;
+    const delta = event.deltaY;
     const zoomLevel = delta > 0 ? 0.9 : 1.1;
 
     const mouseX = event.clientX - element.clientLeft;

diff --git a/src/main.ts b/src/main.ts
@@ -38,7 +38,7 @@ class CanvasImage extends HTMLElement {
 
     const resizeObserver = new ResizeObserver(() => {
       this.updateCanvasSize();
-      this.calculateImageZoom();
+      this.calculateImageZoom(true);
     });
 
     this.updateCanvasSize();
@@ -53,8 +53,12 @@ class CanvasImage extends HTMLElement {
       this.canvas,
       (x, y) => {
         if (!this.context) return;
-        this.offsetX += x * (this.displayWidth / this.context.canvas.width);
-        this.offsetY += y * (this.displayHeight / this.context.canvas.height);
+        this.offsetX += x;
+        this.offsetY += y;
+
+        if (!this.source) return;
+        this.offsetX = Math.max(0, Math.min(this.offsetX, this.context.canvas.width - this.displayWidth));
+        this.offsetY = Math.max(0, Math.min(this.offsetY, this.context.canvas.height - this.displayHeight));
       },
       (x: number, y: number, zoomLevel: number) => {
         if (!this.context) return;
@@ -97,11 +101,19 @@ class CanvasImage extends HTMLElement {
   private calculateImageZoom(forceCenter: boolean = false) {
     if (!this.context || !this.source) return;
 
-    this.displayWidth = (this.source.height * this.context.canvas.width * this.zoomFactor) / this.context.canvas.height;
+    if (forceCenter) {
+      this.zoomFactor = Math.min(
+        this.context.canvas.width / this.source.width,
+        this.context.canvas.height / this.source.height,
+      );
+    }
+
+    this.displayWidth = this.source.width * this.zoomFactor;
     this.displayHeight = this.source.height * this.zoomFactor;
 
-    if (forceCenter || this.offsetX === 0) {
-      this.offsetX = -this.displayWidth / 2 + this.source.width / 2;
+    if (forceCenter) {
+      this.offsetX = this.context.canvas.width / 2 - this.displayWidth / 2;
+      this.offsetY = this.context.canvas.height / 2 - this.displayHeight / 2;
     }
   }
 
@@ -113,14 +125,14 @@ class CanvasImage extends HTMLElement {
 
     this.context.drawImage(
       this.source,
+      0,
+      0,
+      this.source.width,
+      this.source.height,
       this.offsetX,
       this.offsetY,
       this.displayWidth,
       this.displayHeight,
-      0,
-      0,
-      this.context.canvas.width,
-      this.context.canvas.height,
     );
   };
 
@@ -130,7 +142,7 @@ class CanvasImage extends HTMLElement {
       return;
     }
     this.source = await loadImagePromise(src);
-    this.calculateImageZoom();
+    this.calculateImageZoom(true);
   }
 
   private updateCanvasSize() {