fix: Resolve mouse drawing position tracking during world dragging

script.js

@@ -24,6 +24,8 @@ let lastFrameTime = 0;
 let fps = 0;
 let worldOffsetX = 0;
 let worldOffsetY = 0;
+let worldOffsetXBeforeDrag = 0;
+let worldOffsetYBeforeDrag = 0;
 let chunks = new Map(); // Map to store chunks with key "x,y"
 let debugMode = false;
 
@@ -94,6 +96,8 @@ function handleMouseDown(e) {
         isDragging = true;
         lastMouseX = x;
         lastMouseY = y;
+        worldOffsetXBeforeDrag = worldOffsetX;
+        worldOffsetYBeforeDrag = worldOffsetY;
     } else {
         // Left mouse button for drawing
         isDrawing = true;
@@ -128,6 +132,15 @@ function handleMouseMove(e) {
 
 function handleMouseUp(e) {
     isDrawing = false;
+    if (isDragging) {
+        // Calculate the total movement during this drag
+        const totalDragX = worldOffsetX - worldOffsetXBeforeDrag;
+        const totalDragY = worldOffsetY - worldOffsetYBeforeDrag;
+        
+        if (debugMode) {
+            console.log(`Drag completed: ${totalDragX}, ${totalDragY}`);
+        }
+    }
     isDragging = false;
 }
 
@@ -154,12 +167,16 @@ function handleTouchStart(e) {
         isDragging = true;
         lastMouseX = e.touches[0].clientX;
         lastMouseY = e.touches[0].clientY;
+        worldOffsetXBeforeDrag = worldOffsetX;
+        worldOffsetYBeforeDrag = worldOffsetY;
     } else {
         // Single touch for drawing
         isDrawing = true;
         const rect = canvas.getBoundingClientRect();
         const x = e.touches[0].clientX - rect.left;
         const y = e.touches[0].clientY - rect.top;
+        currentMouseX = x;
+        currentMouseY = y;
         draw(x, y);
     }
 }
@@ -185,6 +202,8 @@ function handleTouchMove(e) {
     } else if (isDrawing) {
         const x = e.touches[0].clientX - rect.left;
         const y = e.touches[0].clientY - rect.top;
+        currentMouseX = x;
+        currentMouseY = y;
         draw(x, y);
     }
 }
@@ -489,6 +508,12 @@ function render() {
                 PIXEL_SIZE * 3, 
                 PIXEL_SIZE * 3
             );
+            
+            // Draw a dot at the exact mouse position
+            ctx.fillStyle = '#ff0000';
+            ctx.beginPath();
+            ctx.arc(currentMouseX, currentMouseY, 3, 0, Math.PI * 2);
+            ctx.fill();
         }
     }
 }