diff --git a/dist/popup.js b/dist/popup.js index 0f50a56..18b98a0 100644 --- a/dist/popup.js +++ b/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 - this.startX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr)); - this.startY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr)); + // Calculate coordinates taking into account scale and DPR + this.startX = (e.clientX - rect.left) / rect.width * this.canvas.width / 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 currentY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr)); + const currentX = (e.clientX - rect.left) / rect.width * this.canvas.width / 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); } } } diff --git a/dist/screenshot-editor.js b/dist/screenshot-editor.js index 8027794..9403800 100644 --- a/dist/screenshot-editor.js +++ b/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 - this.startX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr)); - this.startY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr)); + // Calculate coordinates taking into account scale and DPR + this.startX = (e.clientX - rect.left) / rect.width * this.canvas.width / 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 currentY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr)); + const currentX = (e.clientX - rect.left) / rect.width * this.canvas.width / 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); } } } diff --git a/js/screenshot-editor.js b/js/screenshot-editor.js index 7e56e3b..dfa64f0 100644 --- a/js/screenshot-editor.js +++ b/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 - this.startX = (e.clientX - rect.left) * (this.canvas.width / (rect.width * dpr)); - this.startY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr)); + // Calculate coordinates taking into account scale and DPR + this.startX = ((e.clientX - rect.left) / rect.width) * this.canvas.width / 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 currentY = (e.clientY - rect.top) * (this.canvas.height / (rect.height * dpr)); + const currentX = ((e.clientX - rect.left) / rect.width) * this.canvas.width / 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.height + this.canvas.width / dpr, + this.canvas.height / dpr ); } }