98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
// Initialize the editor when the DOM content is loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('Editor window loaded');
|
|
|
|
// Get canvas element
|
|
const canvas = document.getElementById('editor-canvas');
|
|
if (!canvas) {
|
|
console.error('Canvas element not found');
|
|
return;
|
|
}
|
|
console.log('Canvas element found:', canvas);
|
|
|
|
// Create test image to verify canvas
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = 800;
|
|
canvas.height = 600;
|
|
ctx.fillStyle = '#f0f0f0';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#000000';
|
|
ctx.font = '20px Arial';
|
|
ctx.fillText('Waiting for screenshot...', 20, 40);
|
|
|
|
// Initialize screenshot editor
|
|
const editor = new ScreenshotEditor(canvas);
|
|
console.log('ScreenshotEditor initialized');
|
|
|
|
// Notify background script that editor is ready
|
|
chrome.runtime.sendMessage({ type: 'editor-ready' }, response => {
|
|
console.log('Editor ready notification sent, response:', response);
|
|
});
|
|
|
|
// Listen for messages
|
|
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
|
console.log('Editor received message:', message);
|
|
|
|
if (message.type === 'init-editor') {
|
|
console.log('Loading screenshot...');
|
|
|
|
if (!message.screenshot || typeof message.screenshot !== 'string') {
|
|
console.error('Invalid screenshot data received');
|
|
sendResponse({ success: false, error: 'Invalid screenshot data' });
|
|
return;
|
|
}
|
|
|
|
const img = new Image();
|
|
img.onload = async () => {
|
|
console.log('Screenshot data is valid, dimensions:', img.width, 'x', img.height);
|
|
try {
|
|
await editor.loadImage(message.screenshot);
|
|
console.log('Screenshot loaded successfully');
|
|
sendResponse({ success: true });
|
|
} catch (error) {
|
|
console.error('Error loading screenshot:', error);
|
|
sendResponse({ success: false, error: error.message });
|
|
}
|
|
};
|
|
|
|
img.onerror = () => {
|
|
console.error('Error loading image');
|
|
sendResponse({ success: false, error: 'Error loading image' });
|
|
};
|
|
|
|
img.src = message.screenshot;
|
|
return true; // Keep the message channel open for async response
|
|
}
|
|
});
|
|
|
|
// Handle save button click
|
|
document.getElementById('save-btn').addEventListener('click', () => {
|
|
console.log('Save button clicked');
|
|
|
|
try {
|
|
const editedScreenshot = editor.getImageData();
|
|
console.log('Sending edited screenshot back to popup...');
|
|
|
|
// Send the edited screenshot back to the background script
|
|
chrome.runtime.sendMessage({
|
|
type: 'save-screenshot',
|
|
screenshot: editedScreenshot
|
|
}, response => {
|
|
console.log('Save screenshot response:', response);
|
|
if (response && response.success) {
|
|
window.close();
|
|
} else {
|
|
console.error('Error saving screenshot:', response?.error);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Error saving screenshot:', error);
|
|
}
|
|
});
|
|
|
|
// Handle cancel button click
|
|
document.getElementById('cancel-btn').addEventListener('click', () => {
|
|
window.close();
|
|
});
|
|
});
|