fix

app.py

@@ -290,14 +290,14 @@ with gr.Blocks() as demo:
         fn=None,
         inputs=[image_bef],
         outputs=[],
-        _js="(image_bef) => { initializeEditorBefore(); importBackgroundBefore(image_bef); return []; }",
+        _js="(image_bef) => { importBackgroundBefore(image_bef); initializeEditorBefore(); return []; }",
     )
 
     image_aft.change(
         fn=None,
         inputs=[image_aft],
         outputs=[],
-        _js="(image_aft) => { initializeEditorAfter(); importBackgroundAfter(image_aft); return []; }",
+        _js="(image_aft) => { importBackgroundAfter(image_aft); initializeEditorAfter();  return []; }",
     )
 
 

js/interactive_grid.js

@@ -80,34 +80,17 @@ 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(xOffset + col * cellSizeX, yOffset + row * cellSizeY, cellSizeX, cellSizeY);
+            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(xOffset + col * cellSizeX, yOffset + row * cellSizeY, cellSizeX, cellSizeY);
+                ctx_bef.fillRect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
             }
         }
     }
@@ -143,9 +126,7 @@ function initializeEditorBefore() {
     }
     isInitialized_bef = true;
 
-    image_bef = document.getElementById('image-before');
-    canvas_before = document.getElementById('before');
-    ctx_bef = canvas_before.getContext('2d');
+    // image_bef = document.getElementById('image-before');
 
     // Add click event listener to canvas
     canvas_before.addEventListener('mousedown', handleMouseDown);
@@ -153,38 +134,15 @@ function initializeEditorBefore() {
     canvas_before.addEventListener('mouseup', handleMouseUp);
     canvas_before.addEventListener('mouseleave', handleMouseLeave);
 
-
-    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;
-
-    //cellSizeX = canvas_before.width / gridSize;
-    //cellSizeY = canvas_before.height / gridSize;
-
-    cellSizeX = newWidth / gridSize;
-    cellSizeY = newHeight / gridSize;
+    cellSizeX = canvas_before.width / gridSize;
+    cellSizeY = canvas_before.height / 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) * scale;
-        const y = (event.clientY - yOffset) * scale;
+        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);
 
@@ -214,9 +172,8 @@ function initializeEditorAfter() {
     }
     isInitialized_aft = true;
 
-    image_aft = document.getElementById('image-after');
-    canvas_after = document.getElementById('after');
-    ctx_aft = canvas_after.getContext('2d');
+    // image_aft = document.getElementById('image-after');
+    
 
     // Add click event listener to canvas
     canvas_after.addEventListener('mousedown', handleMouseDown);
@@ -301,6 +258,10 @@ function drawBackgroundAfter() {
 }
 
 function importBackgroundBefore(image_bef) {
+
+    canvas_before = document.getElementById('before');
+    ctx_bef = canvas_before.getContext('2d');
+
     if (image_bef == null) {
         canvasBg_bef = null;
         drawGridBefore();
@@ -311,12 +272,18 @@ function importBackgroundBefore(image_bef) {
     m.src = image_bef;
     m.onload = function () {
         canvasBg_bef = m;
+        canvas_before.width = m.width;
+        canvas_before.height = m.height;
         drawGridBefore();
     }
 }
 
 
 function importBackgroundAfter(image_after) {
+
+    canvas_after = document.getElementById('after');
+    ctx_aft = canvas_after.getContext('2d');
+    
     if (image_after == null) {
         canvasBg_aft = null;
         drawGridAfter();