Fixed mouse position and cleanup code

photoCalendar.js

@@ -1,16 +1,9 @@
 class PhotoCalendar {
   dragOptions = {
     isDragging: false,
-    lastZoom: 1,
-    MAX_ZOOM: 5,
-    MIN_ZOOM: 0.1,
-    SCROLL_SENSITIVITY: 0.0005,
-    startX: null,
-    startY: null,
     x: null,
     y: null,
     dragging: false,
-    mouseOver: false,
   };
 
   options = {
@@ -30,9 +23,9 @@ class PhotoCalendar {
   }
 
   overPhotoImg(x, y) {
-    this.mouseOver = y >= 0 && y <= this.options.calendarStartY;
-    return this.mouseOver;
+    return y >= 0 && y <= this.options.calendarStartY;
   }
+
   getEventLocation(e) {
     if (e.touches && e.touches.length == 1) {
       return { x: e.touches[0].clientX, y: e.touches[0].clientY };
@@ -40,27 +33,34 @@ class PhotoCalendar {
       return { x: e.clientX, y: e.clientY };
     }
   }
+
+  getMousePositionInCanvas(x,y) {
+    const canvas = this.getCanvas();
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const mouseX = (x - rect.left) * scaleX;
+    const mouseY = (y - rect.top) * scaleY;
+    return { x: mouseX, y: mouseY };
+  }
+
   onPointerDown(e) {
-    this.dragOptions.isDragging = true;
     let x = this.getEventLocation(e).x;
     let y = this.getEventLocation(e).y;
 
-    if (this.overPhotoImg(x, y)) {
+    const mousePosition = this.getMousePositionInCanvas(x,y);
+    if (this.overPhotoImg(mousePosition.x, mousePosition.y)) {
+      this.dragOptions.isDragging = true;
       this.dragOptions.x = x - this.options.photoOffsetX;
       this.dragOptions.y = y - this.options.photoOffsetY;
       this.renderPhoto();
       return;
     }
 
+    this.dragStop();
     this.dragOptions.x = x;
     this.dragOptions.y = y;
   }
-  dragStop() {
-    this.dragOptions.isDragging = false;
-  }
-  onPointerUp(e) {
-    this.dragStop();
-  }
 
   onPointerMove(e) {
     if (this.dragOptions.isDragging) {
@@ -74,20 +74,28 @@ class PhotoCalendar {
     let x = this.getEventLocation(e).x;
     let y = this.getEventLocation(e).y;
   }
+
+  onPointerUp(e) {
+    this.dragStop();
+  }
+
+  dragStop() {
+    this.dragOptions.isDragging = false;
+  }
+
   handleTouch(e, singleTouchHandler) {
     if (e.touches.length <= 1) {
       singleTouchHandler(e);
 
       if (e.type == "touchend") {
         e.preventDefault();
-        this.dragOptions.mouseOver = false;
+        this.dragStop();
+        return;
       }
     }
-  
-  
-    if (e.type == "touchmove" && e.touches.length == 2)
-    {
-        this.dragStop();
+
+    if (e.type == "touchmove" && e.touches.length == 2) {
+      this.dragStop();
     }
   }
 
@@ -108,6 +116,7 @@ class PhotoCalendar {
     document.getElementById("imageInput").addEventListener("change", (e) => self.handleImageUpload(e));
     document.getElementById("downloadButton").addEventListener("click", (e) => self.downloadCanvas());
 
+    // Handle photo position
     const canvas = this.getCanvas();
     canvas.addEventListener("mousedown", (e) => self.onPointerDown(e));
     canvas.addEventListener("touchstart", (e) => self.handleTouch(e, (e) => self.onPointerDown(e)));