From d33bd6d8676d68161e3b5ae735195c4a8ae4456b Mon Sep 17 00:00:00 2001
From: etiennp <etiplatini@gmail.com>
Date: Thu, 7 Nov 2024 11:32:37 +0100
Subject: [PATCH 1/3] fix bug

---
 annotationweb/static/annotationweb/style.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/annotationweb/static/annotationweb/style.css b/annotationweb/static/annotationweb/style.css
index 82f623f..808ca47 100644
--- a/annotationweb/static/annotationweb/style.css
+++ b/annotationweb/static/annotationweb/style.css
@@ -149,7 +149,9 @@ th, td {
 }
 
 #canvas {
+    height: 85vh;
     width: 100%;
+    object-fit: contain;
 }
 
 #imageFilter form p {

From 3f95f58fb6878a69dc696aee73df3f81203c4fd9 Mon Sep 17 00:00:00 2001
From: etiennp <etiplatini@gmail.com>
Date: Thu, 14 Nov 2024 16:34:47 +0100
Subject: [PATCH 2/3] fix bug

---
 .../static/annotationweb/annotationweb.js     | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/annotationweb/static/annotationweb/annotationweb.js b/annotationweb/static/annotationweb/annotationweb.js
index 4ca3b73..7392999 100644
--- a/annotationweb/static/annotationweb/annotationweb.js
+++ b/annotationweb/static/annotationweb/annotationweb.js
@@ -37,13 +37,31 @@ function min(a, b) {
 }
 
 function mousePos(e, canvas) {
-    var scale =  g_canvasWidth / $('#canvas').width();
-    var mouseX = (e.pageX - canvas.offsetLeft)*scale;
-    var mouseY = (e.pageY - canvas.offsetTop)*scale;
+    // Get original dimension of the image being annotated (set in loadLandmarkTask)
+    const imgWidth = g_canvasWidth;
+    const imgHeight = g_canvasHeight;
+
+    // Get displayed dimensions (after CSS)
+    const displayedWidth = $('#canvas').width();
+    const displayedHeight = $('#canvas').height();
+
+    // Calculate scaling between original and displayed dimensions
+    const scale = Math.min(displayedWidth / imgWidth, displayedHeight / imgHeight);
+    const scaledWidth = imgWidth * scale;
+    const scaledHeight = imgHeight * scale;
+
+    // Scaling while keeping aspect ratio will create padding on the smallest side
+    const paddingX = (displayedWidth - scaledWidth) / 2;
+    const paddingY = (displayedHeight - scaledHeight) / 2;
+
+    // Adjust mouse coordinates so they match the image display
+    const mouseX = (e.offsetX - paddingX) / scale;
+    const mouseY = (e.offsetY - paddingY) / scale;
+
     return {
         x: mouseX,
-        y: mouseY,
-    }
+        y: mouseY
+    };
 }
 
 function incrementFrame() {

From da0d8b3404dee46ffd7ada76a38ba4dc7f7706f1 Mon Sep 17 00:00:00 2001
From: etiennp <etiplatini@gmail.com>
Date: Wed, 11 Dec 2024 15:10:58 +0100
Subject: [PATCH 3/3] clarified the mousepos function a bit and took in account
 case where you click outside the image but within the canvas

---
 .../static/annotationweb/annotationweb.js     | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/annotationweb/static/annotationweb/annotationweb.js b/annotationweb/static/annotationweb/annotationweb.js
index 7392999..542a964 100644
--- a/annotationweb/static/annotationweb/annotationweb.js
+++ b/annotationweb/static/annotationweb/annotationweb.js
@@ -37,26 +37,30 @@ function min(a, b) {
 }
 
 function mousePos(e, canvas) {
-    // Get original dimension of the image being annotated (set in loadLandmarkTask)
+    // Get original dimensions of the image
     const imgWidth = g_canvasWidth;
     const imgHeight = g_canvasHeight;
 
-    // Get displayed dimensions (after CSS)
-    const displayedWidth = $('#canvas').width();
-    const displayedHeight = $('#canvas').height();
+    // Get canvas dimension
+    const canvasWidth = $('#canvas').width();
+    const canvasHeight = $('#canvas').height();
 
-    // Calculate scaling between original and displayed dimensions
-    const scale = Math.min(displayedWidth / imgWidth, displayedHeight / imgHeight);
+    // Calculate the scale ratio of the image once fitted within the canvas
+    const scale = Math.min(canvasWidth / imgWidth, canvasHeight / imgHeight);
     const scaledWidth = imgWidth * scale;
     const scaledHeight = imgHeight * scale;
 
-    // Scaling while keeping aspect ratio will create padding on the smallest side
-    const paddingX = (displayedWidth - scaledWidth) / 2;
-    const paddingY = (displayedHeight - scaledHeight) / 2;
+    // Padding on 1 side is half of total difference between image and canvas
+    const paddingX = (canvasWidth - scaledWidth) / 2;
+    const paddingY = (canvasHeight - scaledHeight) / 2;
 
-    // Adjust mouse coordinates so they match the image display
-    const mouseX = (e.offsetX - paddingX) / scale;
-    const mouseY = (e.offsetY - paddingY) / scale;
+    // Adjust mouse coordinates
+    let mouseX = (e.offsetX - paddingX) / scale;
+    let mouseY = (e.offsetY - paddingY) / scale;
+
+    // If you click on the canvas but outside the image, reposition on the closest edge of the image
+    mouseX = Math.max(0, Math.min(mouseX, imgWidth - 1));
+    mouseY = Math.max(0, Math.min(mouseY, imgHeight - 1));
 
     return {
         x: mouseX,