fix

js/interactive_grid.js

@@ -135,13 +135,11 @@ function initializeEditorBefore() {
     canvas_before.addEventListener('mouseleave', handleMouseLeave);
 
     canvas_before.addEventListener('click', (event) => {
-        // const rect = canvas_before.getBoundingClientRect();
-        // const scaleX = canvas_before.width / rect.width;
-        // const scaleY = canvas_before.height / rect.height;
-        // const x = (event.clientX - rect.left) * scaleX;
-        // const y = (event.clientY - rect.top) * scaleY;
-        const x = event.clientX;
-        const y = event.clientY;
+        const rect = canvas_before.getBoundingClientRect();
+        const scaleX = canvas_before.width / rect.width;
+        const scaleY = canvas_before.height / rect.height;
+        const x = (event.clientX - rect.left) * scaleX;
+        const y = (event.clientY - rect.top) * scaleY;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);
 
@@ -181,13 +179,11 @@ function initializeEditorAfter() {
     canvas_after.addEventListener('mouseleave', handleMouseLeave);
 
     canvas_after.addEventListener('click', (event) => {
-        // const rect = canvas_after.getBoundingClientRect();
-        // const scaleX = canvas_after.width / rect.width;
-        // const scaleY = canvas_after.height / rect.height;
-        // const x = (event.clientX - rect.left) * scaleX;
-        // const y = (event.clientY - rect.top) * scaleY;
-        const x = event.clientX;
-        const y = event.clientY;
+        const rect = canvas_after.getBoundingClientRect();
+        const scaleX = canvas_after.width / rect.width;
+        const scaleY = canvas_after.height / rect.height;
+        const x = (event.clientX - rect.left) * scaleX;
+        const y = (event.clientY - rect.top) * scaleY;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);