Zoom-ErroroFixed

dist/popup.js

@@ -115,7 +115,7 @@ class ScreenshotEditor {
     });
   }
   setupTools() {
-    const tools = ['select', 'move', 'pen', 'rectangle', 'arrow', 'crop'];
+    const tools = ['select', 'pen', 'rectangle', 'arrow', 'crop'];
     tools.forEach(tool => {
       const button = document.getElementById(`${tool}-tool`);
       if (button) {
@@ -159,9 +159,9 @@ class ScreenshotEditor {
     const dpr = window.devicePixelRatio || 1;
     this.isDrawing = true;
 
-    // Calculate coordinates taking into account DPR and canvas scaling
+    // Calculate coordinates taking into account scale and DPR
-    this.startX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr));
+    this.startX = (e.clientX - rect.left) / rect.width * this.canvas.width / dpr;
-    this.startY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr));
+    this.startY = (e.clientY - rect.top) / rect.height * this.canvas.height / dpr;
     this.lastX = this.startX;
     this.lastY = this.startY;
     if (this.drawingMode === 'pen') {
@@ -178,8 +178,8 @@ class ScreenshotEditor {
     if (!this.isDrawing) return;
     const rect = this.canvas.getBoundingClientRect();
     const dpr = window.devicePixelRatio || 1;
-    const currentX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr));
+    const currentX = (e.clientX - rect.left) / rect.width * this.canvas.width / dpr;
-    const currentY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr));
+    const currentY = (e.clientY - rect.top) / rect.height * this.canvas.height / dpr;
 
     // Get the current state as an image
     const baseImage = new Image();
@@ -192,7 +192,7 @@ class ScreenshotEditor {
     if (this.currentState) {
       const img = new Image();
       img.src = this.currentState;
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     } else {
       this.ctx.drawImage(this.originalImage, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     }
@@ -273,9 +273,11 @@ class ScreenshotEditor {
   }
   loadStateImage(dataUrl) {
     const img = new Image();
+    const dpr = window.devicePixelRatio || 1;
     img.onload = () => {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
+      this.currentState = dataUrl;
     };
     img.src = dataUrl;
   }
@@ -297,6 +299,7 @@ class ScreenshotEditor {
       console.warn('Canvas has no dimensions, skipping redraw');
       return;
     }
+    const dpr = window.devicePixelRatio || 1;
 
     // Clear the canvas
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -305,9 +308,9 @@ class ScreenshotEditor {
     if (this.currentState) {
       const img = new Image();
       img.src = this.currentState;
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     } else if (this.originalImage) {
-      this.ctx.drawImage(this.originalImage, 0, 0, this.canvas.width, this.canvas.height);
+      this.ctx.drawImage(this.originalImage, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     }
   }
 }

dist/screenshot-editor.js

@@ -110,7 +110,7 @@ class ScreenshotEditor {
     });
   }
   setupTools() {
-    const tools = ['select', 'move', 'pen', 'rectangle', 'arrow', 'crop'];
+    const tools = ['select', 'pen', 'rectangle', 'arrow', 'crop'];
     tools.forEach(tool => {
       const button = document.getElementById(`${tool}-tool`);
       if (button) {
@@ -154,9 +154,9 @@ class ScreenshotEditor {
     const dpr = window.devicePixelRatio || 1;
     this.isDrawing = true;
 
-    // Calculate coordinates taking into account DPR and canvas scaling
+    // Calculate coordinates taking into account scale and DPR
-    this.startX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr));
+    this.startX = (e.clientX - rect.left) / rect.width * this.canvas.width / dpr;
-    this.startY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr));
+    this.startY = (e.clientY - rect.top) / rect.height * this.canvas.height / dpr;
     this.lastX = this.startX;
     this.lastY = this.startY;
     if (this.drawingMode === 'pen') {
@@ -173,8 +173,8 @@ class ScreenshotEditor {
     if (!this.isDrawing) return;
     const rect = this.canvas.getBoundingClientRect();
     const dpr = window.devicePixelRatio || 1;
-    const currentX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr));
+    const currentX = (e.clientX - rect.left) / rect.width * this.canvas.width / dpr;
-    const currentY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr));
+    const currentY = (e.clientY - rect.top) / rect.height * this.canvas.height / dpr;
 
     // Get the current state as an image
     const baseImage = new Image();
@@ -187,7 +187,7 @@ class ScreenshotEditor {
     if (this.currentState) {
       const img = new Image();
       img.src = this.currentState;
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     } else {
       this.ctx.drawImage(this.originalImage, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     }
@@ -268,9 +268,11 @@ class ScreenshotEditor {
   }
   loadStateImage(dataUrl) {
     const img = new Image();
+    const dpr = window.devicePixelRatio || 1;
     img.onload = () => {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
+      this.currentState = dataUrl;
     };
     img.src = dataUrl;
   }
@@ -292,6 +294,7 @@ class ScreenshotEditor {
       console.warn('Canvas has no dimensions, skipping redraw');
       return;
     }
+    const dpr = window.devicePixelRatio || 1;
 
     // Clear the canvas
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -300,9 +303,9 @@ class ScreenshotEditor {
     if (this.currentState) {
       const img = new Image();
       img.src = this.currentState;
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     } else if (this.originalImage) {
-      this.ctx.drawImage(this.originalImage, 0, 0, this.canvas.width, this.canvas.height);
+      this.ctx.drawImage(this.originalImage, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     }
   }
 }

js/screenshot-editor.js

@@ -116,7 +116,7 @@ class ScreenshotEditor {
   }
 
   setupTools() {
-    const tools = ['select', 'move', 'pen', 'rectangle', 'arrow', 'crop'];
+    const tools = ['select', 'pen', 'rectangle', 'arrow', 'crop'];
     tools.forEach(tool => {
       const button = document.getElementById(`${tool}-tool`);
       if (button) {
@@ -160,9 +160,9 @@ class ScreenshotEditor {
     const dpr = window.devicePixelRatio || 1;
     this.isDrawing = true;
     
-    // Calculate coordinates taking into account DPR and canvas scaling
+    // Calculate coordinates taking into account scale and DPR
-    this.startX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr));
+    this.startX = ((e.clientX - rect.left) / rect.width) * this.canvas.width / dpr;
-    this.startY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr));
+    this.startY = ((e.clientY - rect.top) / rect.height) * this.canvas.height / dpr;
     this.lastX = this.startX;
     this.lastY = this.startY;
     
@@ -179,8 +179,8 @@ class ScreenshotEditor {
     
     const rect = this.canvas.getBoundingClientRect();
     const dpr = window.devicePixelRatio || 1;
-    const currentX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr));
+    const currentX = ((e.clientX - rect.left) / rect.width) * this.canvas.width / dpr;
-    const currentY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr));
+    const currentY = ((e.clientY - rect.top) / rect.height) * this.canvas.height / dpr;
     
     // Get the current state as an image
     const baseImage = new Image();
@@ -193,7 +193,7 @@ class ScreenshotEditor {
     if (this.currentState) {
       const img = new Image();
       img.src = this.currentState;
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     } else {
       this.ctx.drawImage(this.originalImage, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     }
@@ -290,9 +290,11 @@ class ScreenshotEditor {
 
   loadStateImage(dataUrl) {
     const img = new Image();
+    const dpr = window.devicePixelRatio || 1;
     img.onload = () => {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
+      this.currentState = dataUrl;
     };
     img.src = dataUrl;
   }
@@ -319,6 +321,8 @@ class ScreenshotEditor {
       return;
     }
     
+    const dpr = window.devicePixelRatio || 1;
+    
     // Clear the canvas
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     
@@ -326,14 +330,14 @@ class ScreenshotEditor {
     if (this.currentState) {
       const img = new Image();
       img.src = this.currentState;
-      this.ctx.drawImage(img, 0, 0);
+      this.ctx.drawImage(img, 0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
     } else if (this.originalImage) {
       this.ctx.drawImage(
         this.originalImage,
         0,
         0,
-        this.canvas.width,
+        this.canvas.width / dpr,
-        this.canvas.height
+        this.canvas.height / dpr
       );
     }
   }