bhavkushwaha/JiraFeedback
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zoom-ErroroFixed

Browse Source
This commit is contained in:
Bhav Kushwaha 2025-01-26 11:35:35 +05:30
parent e1a56cea7a
commit 5fb7d2b01b
3 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
dist/popup.js vendored
View File

@ -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);
}
}
}

23
dist/screenshot-editor.js vendored
View File

@ -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);
}
}
}

26
js/screenshot-editor.js
View File

@ -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
);
}
}