diff --git a/annotationweb/static/annotationweb/annotationweb.js b/annotationweb/static/annotationweb/annotationweb.js index 4ca3b73..542a964 100644 --- a/annotationweb/static/annotationweb/annotationweb.js +++ b/annotationweb/static/annotationweb/annotationweb.js @@ -37,13 +37,35 @@ 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 dimensions of the image + const imgWidth = g_canvasWidth; + const imgHeight = g_canvasHeight; + + // Get canvas dimension + const canvasWidth = $('#canvas').width(); + const canvasHeight = $('#canvas').height(); + + // 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; + + // 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 + 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, - y: mouseY, - } + y: mouseY + }; } function incrementFrame() { 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 {