fix

js/interactive_grid.js

@@ -1,5 +1,6 @@
 const gridSize = 14;
-var cellSize = null;
+var cellSizeX = null;
+var cellSizeY = null;
 var inputImage = null;
 var image_bef = null;
 var image_aft = null;
@@ -81,14 +82,14 @@ function drawGridBefore() {
     for (let row = 0; row < gridSize; row++) {
         for (let col = 0; col < gridSize; col++) {
             ctx_bef.beginPath();
-            ctx_bef.rect(col * cellSize, row * cellSize, cellSize, cellSize);
+            ctx_bef.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             ctx_bef.strokeStyle = 'black';
             ctx_bef.lineWidth = 1;
             ctx_bef.stroke();
 
             if (grid_bef[row][col]) {
                 ctx_bef.fillStyle = 'rgba(0, 255, 0, 0.5)';
-                ctx_bef.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+                ctx_bef.fillRect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             }
         }
     }
@@ -102,14 +103,14 @@ function drawGridAfter() {
     for (let row = 0; row < gridSize; row++) {
         for (let col = 0; col < gridSize; col++) {
             ctx_aft.beginPath();
-            ctx_aft.rect(col * cellSize, row * cellSize, cellSize, cellSize);
+            ctx_aft.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             ctx_aft.strokeStyle = 'black';
             ctx_aft.lineWidth = 1;
             ctx_aft.stroke();
 
             if (grid_aft[row][col]) {
                 ctx_aft.fillStyle = 'rgba(0, 255, 0, 0.5)';
-                ctx_aft.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+                ctx_aft.fillRect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             }
         }
     }
@@ -133,7 +134,8 @@ function initializeEditorBefore() {
     canvas_before.addEventListener('mouseup', handleMouseUp);
     canvas_before.addEventListener('mouseleave', handleMouseLeave);
 
-    cellSize = canvas_before.width / gridSize;
+    cellSizeX = canvas_before.width / gridSize;
+    cellSizeY = canvas_before.height / gridSize;
 
     canvas_before.addEventListener('click', (event) => {
         const rect = canvas_before.getBoundingClientRect();
@@ -141,8 +143,8 @@ function initializeEditorBefore() {
         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 / cellSize);
-        const col = Math.floor(x / cellSize);
+        const row = Math.floor(y / cellSizeY);
+        const col = Math.floor(x / cellSizeX);
 
         // If the cell is already selected, it's always allowed to deselect it
         if (grid_bef[row][col]) {
@@ -180,7 +182,8 @@ function initializeEditorAfter() {
     canvas_after.addEventListener('mouseup', handleMouseUp);
     canvas_after.addEventListener('mouseleave', handleMouseLeave);
 
-    cellSize = canvas_after.width / gridSize;
+    cellSizeX = canvas_after.width / gridSize;
+    cellSizeY = canvas_after.height / gridSize;
 
     canvas_after.addEventListener('click', (event) => {
         const rect = canvas_after.getBoundingClientRect();
@@ -188,8 +191,8 @@ function initializeEditorAfter() {
         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 / cellSize);
-        const col = Math.floor(x / cellSize);
+        const row = Math.floor(y / cellSizeY);
+        const col = Math.floor(x / cellSizeX);
 
         // If the cell is already selected, it's always allowed to deselect it
         if (grid_aft[row][col]) {