fix

js/interactive_grid.js

@@ -79,12 +79,30 @@ function handleMouseLeave(event) {
 function drawGridBefore() {
     ctx_bef.clearRect(0, 0, canvas_before.width, canvas_before.height);
     drawBackgroundBefore();
+
+    const canvasWidth = canvas_before.width;
+    const canvasHeight = canvas_before.height;
+
+    const bgWidth = canvasBg_bef.width;
+    const bgHeight = canvasBg_bef.height;
+
+    const scaleX = canvasWidth / bgWidth;
+    const scaleY = canvasHeight / bgHeight;
+
+    const scale = Math.min(scaleX, scaleY);
+
+    const newWidth = bgWidth * scale;
+    const newHeight = bgHeight * scale;
+
+    const xOffset = (canvasWidth - newWidth) / 2;
+    const yOffset = (canvasHeight - newHeight) / 2;
+
     for (let row = 0; row < gridSize; row++) {
         for (let col = 0; col < gridSize; col++) {
             ctx_bef.beginPath();
-            ctx_bef.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
+            ctx_bef.rect(xOffset + col * cellSizeX, yOffset + row * cellSizeY, cellSizeX, cellSizeY);
             ctx_bef.strokeStyle = 'black';
-            ctx_bef.lineWidth = 0;
+            ctx_bef.lineWidth = 1;
             ctx_bef.stroke();
 
             if (grid_bef[row][col]) {
@@ -100,12 +118,30 @@ function drawGridBefore() {
 function drawGridAfter() {
     ctx_aft.clearRect(0, 0, canvas_after.width, canvas_after.height);
     drawBackgroundAfter();
+
+    const canvasWidth = canvas_after.width;
+    const canvasHeight = canvas_after.height;
+
+    const bgWidth = canvasBg_aft.width;
+    const bgHeight = canvasBg_aft.height;
+
+    const scaleX = canvasWidth / bgWidth;
+    const scaleY = canvasHeight / bgHeight;
+
+    const scale = Math.min(scaleX, scaleY);
+
+    const newWidth = bgWidth * scale;
+    const newHeight = bgHeight * scale;
+
+    const xOffset = (canvasWidth - newWidth) / 2;
+    const yOffset = (canvasHeight - newHeight) / 2;
+
     for (let row = 0; row < gridSize; row++) {
         for (let col = 0; col < gridSize; col++) {
             ctx_aft.beginPath();
-            ctx_aft.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
+            ctx_aft.rect(xOffset + col * cellSizeX, yOffset + row * cellSizeY, cellSizeX, cellSizeY);
             ctx_aft.strokeStyle = 'black';
-            ctx_aft.lineWidth = 0;
+            ctx_aft.lineWidth = 1;
             ctx_aft.stroke();
 
             if (grid_aft[row][col]) {
@@ -134,19 +170,38 @@ function initializeEditorBefore() {
     canvas_before.addEventListener('mouseup', handleMouseUp);
     canvas_before.addEventListener('mouseleave', handleMouseLeave);
 
-    cellSizeX = canvas_before.width / gridSize;
-    cellSizeY = canvas_before.height / gridSize;
 
-    canvas_before.addEventListener('click', (event) => {
-        const rect = canvas_before.getBoundingClientRect();
+    const canvasWidth = canvas_before.width;
+    const canvasHeight = canvas_before.height;
 
-        const bgWidth = canvasBg_bef.width;
-        const bgHeight = canvasBg_bef.height;
+    const bgWidth = canvasBg_bef.width;
+    const bgHeight = canvasBg_bef.height;
 
-        const scaleX = canvas_before.width / bgWidth//rect.width;
-        const scaleY = canvas_before.height / bgHeight//rect.height;
-        const x = (event.clientX - rect.left) * scaleX;
-        const y = (event.clientY - rect.top) * scaleY;
+    const scaleX = canvasWidth / bgWidth;
+    const scaleY = canvasHeight / bgHeight;
+
+    const scale = Math.min(scaleX, scaleY);
+
+    const newWidth = bgWidth * scale;
+    const newHeight = bgHeight * scale;
+
+    const xOffset = (canvasWidth - newWidth) / 2;
+    const yOffset = (canvasHeight - newHeight) / 2;
+
+    //cellSizeX = canvas_before.width / gridSize;
+    //cellSizeY = canvas_before.height / gridSize;
+
+    cellSizeX = newWidth / gridSize;
+    cellSizeY = newHeight / gridSize;
+
+    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 - xOffset) * scaleX;
+        const y = (event.clientY - yOffset) * scaleY;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);
 
@@ -186,19 +241,37 @@ function initializeEditorAfter() {
     canvas_after.addEventListener('mouseup', handleMouseUp);
     canvas_after.addEventListener('mouseleave', handleMouseLeave);
 
-    cellSizeX = canvas_after.width / gridSize;
-    cellSizeY = canvas_after.height / gridSize;
+    const canvasWidth = canvas_after.width;
+    const canvasHeight = canvas_after.height;
 
-    canvas_after.addEventListener('click', (event) => {
-        const rect = canvas_after.getBoundingClientRect();
-        
-        const bgWidth = canvasBg_aft.width;
-        const bgHeight = canvasBg_aft.height;
+    const bgWidth = canvasBg_aft.width;
+    const bgHeight = canvasBg_aft.height;
+
+    const scaleX = canvasWidth / bgWidth;
+    const scaleY = canvasHeight / bgHeight;
+
+    const scale = Math.min(scaleX, scaleY);
+
+    const newWidth = bgWidth * scale;
+    const newHeight = bgHeight * scale;
 
-        const scaleX = canvas_after.width / bgWidth//rect.width;
-        const scaleY = canvas_after.height / bgHeight//rect.height;
-        const x = (event.clientX - rect.left) * scaleX;
-        const y = (event.clientY - rect.top) * scaleY;
+    const xOffset = (canvasWidth - newWidth) / 2;
+    const yOffset = (canvasHeight - newHeight) / 2;
+
+    // cellSizeX = canvas_after.width / gridSize;
+    // cellSizeY = canvas_after.height / gridSize;
+
+    cellSizeX = newWidth / gridSize;
+    cellSizeY = newHeight / gridSize;
+
+    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 - xOffset) * scaleX;
+        const y = (event.clientY - yOffset) * scaleY;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);