Initial commit

Project scaffolding and initial file setup.

js/utils/ClipboardManager.js

@@ -0,0 +1,510 @@
+import {createModuleLogger} from "./LoggerUtils.js";
+import {api} from "../../../scripts/api.js";
+import {ComfyApp} from "../../../scripts/app.js";
+
+const log = createModuleLogger('ClipboardManager');
+
+export class ClipboardManager {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.clipboardPreference = 'system'; // 'system', 'clipspace'
+    }
+
+    /**
+     * Main paste handler that delegates to appropriate methods
+     * @param {string} addMode - The mode for adding the layer
+     * @param {string} preference - Clipboard preference ('system' or 'clipspace')
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async handlePaste(addMode = 'mouse', preference = 'system') {
+        try {
+            log.info(`ClipboardManager handling paste with preference: ${preference}`);
+
+            if (this.canvas.canvasLayers.internalClipboard.length > 0) {
+                log.info("Found layers in internal clipboard, pasting layers");
+                this.canvas.canvasLayers.pasteLayers();
+                return true;
+            }
+
+            if (preference === 'clipspace') {
+                log.info("Attempting paste from ComfyUI Clipspace");
+                const success = await this.tryClipspacePaste(addMode);
+                if (success) {
+                    return true;
+                }
+                log.info("No image found in ComfyUI Clipspace");
+            }
+
+            log.info("Attempting paste from system clipboard");
+            return await this.trySystemClipboardPaste(addMode);
+
+        } catch (err) {
+            log.error("ClipboardManager paste operation failed:", err);
+            return false;
+        }
+    }
+
+    /**
+     * Attempts to paste from ComfyUI Clipspace
+     * @param {string} addMode - The mode for adding the layer
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async tryClipspacePaste(addMode) {
+        try {
+            log.info("Attempting to paste from ComfyUI Clipspace");
+            const clipspaceResult = ComfyApp.pasteFromClipspace(this.canvas.node);
+
+            if (this.canvas.node.imgs && this.canvas.node.imgs.length > 0) {
+                const clipspaceImage = this.canvas.node.imgs[0];
+                if (clipspaceImage && clipspaceImage.src) {
+                    log.info("Successfully got image from ComfyUI Clipspace");
+                    const img = new Image();
+                    img.onload = async () => {
+                        await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                    };
+                    img.src = clipspaceImage.src;
+                    return true;
+                }
+            }
+            return false;
+        } catch (clipspaceError) {
+            log.warn("ComfyUI Clipspace paste failed:", clipspaceError);
+            return false;
+        }
+    }
+
+    /**
+     * System clipboard paste - handles both image data and text paths
+     * @param {string} addMode - The mode for adding the layer
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async trySystemClipboardPaste(addMode) {
+        log.info("ClipboardManager: Checking system clipboard for images and paths");
+
+        if (navigator.clipboard?.read) {
+            try {
+                const clipboardItems = await navigator.clipboard.read();
+                
+                for (const item of clipboardItems) {
+                    log.debug("Clipboard item types:", item.types);
+
+                    const imageType = item.types.find(type => type.startsWith('image/'));
+                    if (imageType) {
+                        try {
+                            const blob = await item.getType(imageType);
+                            const reader = new FileReader();
+                            reader.onload = (event) => {
+                                const img = new Image();
+                                img.onload = async () => {
+                                    log.info("Successfully loaded image from system clipboard");
+                                    await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                                };
+                                img.src = event.target.result;
+                            };
+                            reader.readAsDataURL(blob);
+                            log.info("Found image data in system clipboard");
+                            return true;
+                        } catch (error) {
+                            log.debug("Error reading image data:", error);
+                        }
+                    }
+
+                    const textTypes = ['text/plain', 'text/uri-list'];
+                    for (const textType of textTypes) {
+                        if (item.types.includes(textType)) {
+                            try {
+                                const textBlob = await item.getType(textType);
+                                const text = await textBlob.text();
+                                
+                                if (this.isValidImagePath(text)) {
+                                    log.info("Found image path in clipboard:", text);
+                                    const success = await this.loadImageFromPath(text, addMode);
+                                    if (success) {
+                                        return true;
+                                    }
+                                }
+                            } catch (error) {
+                                log.debug(`Error reading ${textType}:`, error);
+                            }
+                        }
+                    }
+                }
+            } catch (error) {
+                log.debug("Modern clipboard API failed:", error);
+            }
+        }
+
+        if (navigator.clipboard?.readText) {
+            try {
+                const text = await navigator.clipboard.readText();
+                log.debug("Found text in clipboard:", text);
+                
+                if (text && this.isValidImagePath(text)) {
+                    log.info("Found valid image path in clipboard:", text);
+                    const success = await this.loadImageFromPath(text, addMode);
+                    if (success) {
+                        return true;
+                    }
+                }
+            } catch (error) {
+                log.debug("Could not read text from clipboard:", error);
+            }
+        }
+
+        log.debug("No images or valid image paths found in system clipboard");
+        return false;
+    }
+
+
+    /**
+     * Validates if a text string is a valid image file path or URL
+     * @param {string} text - The text to validate
+     * @returns {boolean} - True if the text appears to be a valid image file path or URL
+     */
+    isValidImagePath(text) {
+        if (!text || typeof text !== 'string') {
+            return false;
+        }
+
+        text = text.trim();
+
+        if (!text) {
+            return false;
+        }
+
+        if (text.startsWith('http://') || text.startsWith('https://') || text.startsWith('file://')) {
+
+            try {
+                new URL(text);
+                log.debug("Detected valid URL:", text);
+                return true;
+            } catch (e) {
+                log.debug("Invalid URL format:", text);
+                return false;
+            }
+        }
+
+        const imageExtensions = [
+            '.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', 
+            '.svg', '.tiff', '.tif', '.ico', '.avif'
+        ];
+
+        const hasImageExtension = imageExtensions.some(ext => 
+            text.toLowerCase().endsWith(ext)
+        );
+
+        if (!hasImageExtension) {
+            log.debug("No valid image extension found in:", text);
+            return false;
+        }
+
+
+        const pathPatterns = [
+            /^[a-zA-Z]:[\\\/]/, // Windows absolute path (C:\... or C:/...)
+            /^[\\\/]/, // Unix absolute path (/...)
+            /^\.{1,2}[\\\/]/, // Relative path (./... or ../...)
+            /^[^\\\/]*[\\\/]/ // Contains path separators
+        ];
+
+        const isValidPath = pathPatterns.some(pattern => pattern.test(text)) || 
+                           (!text.includes('/') && !text.includes('\\') && text.includes('.')); // Simple filename
+
+        if (isValidPath) {
+            log.debug("Detected valid local file path:", text);
+        } else {
+            log.debug("Invalid local file path format:", text);
+        }
+
+        return isValidPath;
+    }
+
+    /**
+     * Attempts to load an image from a file path using simplified methods
+     * @param {string} filePath - The file path to load
+     * @param {string} addMode - The mode for adding the layer
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async loadImageFromPath(filePath, addMode) {
+
+        if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
+            try {
+                const img = new Image();
+                img.crossOrigin = 'anonymous';
+                return new Promise((resolve) => {
+                    img.onload = async () => {
+                        log.info("Successfully loaded image from URL");
+                        await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                        resolve(true);
+                    };
+                    img.onerror = () => {
+                        log.warn("Failed to load image from URL:", filePath);
+                        resolve(false);
+                    };
+                    img.src = filePath;
+                });
+            } catch (error) {
+                log.warn("Error loading image from URL:", error);
+                return false;
+            }
+        }
+
+        try {
+            log.info("Attempting to load local file via backend");
+            const success = await this.loadFileViaBackend(filePath, addMode);
+            if (success) {
+                return true;
+            }
+        } catch (error) {
+            log.warn("Backend loading failed:", error);
+        }
+
+        try {
+            log.info("Falling back to file picker");
+            const success = await this.promptUserForFile(filePath, addMode);
+            if (success) {
+                return true;
+            }
+        } catch (error) {
+            log.warn("File picker failed:", error);
+        }
+
+        this.showFilePathMessage(filePath);
+        return false;
+    }
+
+    /**
+     * Loads a local file via the ComfyUI backend endpoint
+     * @param {string} filePath - The file path to load
+     * @param {string} addMode - The mode for adding the layer
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async loadFileViaBackend(filePath, addMode) {
+        try {
+            log.info("Loading file via ComfyUI backend:", filePath);
+
+            const response = await api.fetchApi("/ycnode/load_image_from_path", {
+                method: "POST",
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    file_path: filePath
+                })
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                log.debug("Backend failed to load image:", errorData.error);
+                return false;
+            }
+            
+            const data = await response.json();
+            
+            if (!data.success) {
+                log.debug("Backend returned error:", data.error);
+                return false;
+            }
+            
+            log.info("Successfully loaded image via ComfyUI backend:", filePath);
+
+            const img = new Image();
+            const success = await new Promise((resolve) => {
+                img.onload = async () => {
+                    log.info("Successfully loaded image from backend response");
+                    await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                    resolve(true);
+                };
+                img.onerror = () => {
+                    log.warn("Failed to load image from backend response");
+                    resolve(false);
+                };
+                
+                img.src = data.image_data;
+            });
+            
+            return success;
+            
+        } catch (error) {
+            log.debug("Error loading file via ComfyUI backend:", error);
+            return false;
+        }
+    }
+
+    /**
+     * Prompts the user to select a file when a local path is detected
+     * @param {string} originalPath - The original file path from clipboard
+     * @param {string} addMode - The mode for adding the layer
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async promptUserForFile(originalPath, addMode) {
+        return new Promise((resolve) => {
+
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.accept = 'image/*';
+            fileInput.style.display = 'none';
+
+            const fileName = originalPath.split(/[\\\/]/).pop();
+
+            fileInput.onchange = async (event) => {
+                const file = event.target.files[0];
+                if (file && file.type.startsWith('image/')) {
+                    try {
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                            const img = new Image();
+                            img.onload = async () => {
+                                log.info("Successfully loaded image from file picker");
+                                await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                                resolve(true);
+                            };
+                            img.onerror = () => {
+                                log.warn("Failed to load selected image");
+                                resolve(false);
+                            };
+                            img.src = e.target.result;
+                        };
+                        reader.onerror = () => {
+                            log.warn("Failed to read selected file");
+                            resolve(false);
+                        };
+                        reader.readAsDataURL(file);
+                    } catch (error) {
+                        log.warn("Error processing selected file:", error);
+                        resolve(false);
+                    }
+                } else {
+                    log.warn("Selected file is not an image");
+                    resolve(false);
+                }
+
+                document.body.removeChild(fileInput);
+            };
+
+            fileInput.oncancel = () => {
+                log.info("File selection cancelled by user");
+                document.body.removeChild(fileInput);
+                resolve(false);
+            };
+
+            this.showNotification(`Detected image path: ${fileName}. Please select the file to load it.`, 3000);
+
+            document.body.appendChild(fileInput);
+            fileInput.click();
+        });
+    }
+
+    /**
+     * Shows a message to the user about file path limitations
+     * @param {string} filePath - The file path that couldn't be loaded
+     */
+    showFilePathMessage(filePath) {
+        const fileName = filePath.split(/[\\\/]/).pop();
+        const message = `Cannot load local file directly due to browser security restrictions. File detected: ${fileName}`;
+        this.showNotification(message, 5000);
+        log.info("Showed file path limitation message to user");
+    }
+
+    /**
+     * Shows a helpful message when clipboard appears empty and offers file picker
+     * @param {string} addMode - The mode for adding the layer
+     */
+    showEmptyClipboardMessage(addMode) {
+        const message = `Copied a file? Browser can't access file paths for security. Click here to select the file manually.`;
+
+        const notification = document.createElement('div');
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #2d5aa0;
+            color: white;
+            padding: 14px 18px;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+            z-index: 10001;
+            max-width: 320px;
+            font-size: 14px;
+            line-height: 1.4;
+            cursor: pointer;
+            border: 2px solid #4a7bc8;
+            transition: all 0.2s ease;
+            font-weight: 500;
+        `;
+        notification.innerHTML = `
+            <div style="display: flex; align-items: center; gap: 8px;">
+                <span style="font-size: 18px;">📁</span>
+                <span>${message}</span>
+            </div>
+            <div style="font-size: 12px; opacity: 0.9; margin-top: 4px;">
+                💡 Tip: You can also drag & drop files directly onto the canvas
+            </div>
+        `;
+
+        notification.onmouseenter = () => {
+            notification.style.backgroundColor = '#3d6bb0';
+            notification.style.borderColor = '#5a8bd8';
+            notification.style.transform = 'translateY(-1px)';
+        };
+        notification.onmouseleave = () => {
+            notification.style.backgroundColor = '#2d5aa0';
+            notification.style.borderColor = '#4a7bc8';
+            notification.style.transform = 'translateY(0)';
+        };
+
+        notification.onclick = async () => {
+            document.body.removeChild(notification);
+            try {
+                const success = await this.promptUserForFile('image_file.jpg', addMode);
+                if (success) {
+                    log.info("Successfully loaded image via empty clipboard file picker");
+                }
+            } catch (error) {
+                log.warn("Error with empty clipboard file picker:", error);
+            }
+        };
+
+        document.body.appendChild(notification);
+
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 12000);
+
+        log.info("Showed enhanced empty clipboard message with file picker option");
+    }
+
+    /**
+     * Shows a temporary notification to the user
+     * @param {string} message - The message to show
+     * @param {number} duration - Duration in milliseconds
+     */
+    showNotification(message, duration = 3000) {
+
+        const notification = document.createElement('div');
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #333;
+            color: white;
+            padding: 12px 16px;
+            border-radius: 4px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+            z-index: 10001;
+            max-width: 300px;
+            font-size: 14px;
+            line-height: 1.4;
+        `;
+        notification.textContent = message;
+
+        document.body.appendChild(notification);
+
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, duration);
+    }
+}

js/utils/CommonUtils.js

@@ -8,7 +8,7 @@
  * @returns {string} UUID w formacie xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
  */
 export function generateUUID() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
         return v.toString(16);
     });
@@ -42,7 +42,7 @@ export function getSnapAdjustment(layer, gridSize = 64, snapThreshold = 10) {
         top: layer.y,
         bottom: layer.y + layer.height
     };
-    
+
     const x_adjustments = [
         {type: 'x', delta: snapToGrid(layerEdges.left, gridSize) - layerEdges.left},
         {type: 'x', delta: snapToGrid(layerEdges.right, gridSize) - layerEdges.right}
@@ -52,17 +52,17 @@ export function getSnapAdjustment(layer, gridSize = 64, snapThreshold = 10) {
         {type: 'y', delta: snapToGrid(layerEdges.top, gridSize) - layerEdges.top},
         {type: 'y', delta: snapToGrid(layerEdges.bottom, gridSize) - layerEdges.bottom}
     ];
-    
+
     x_adjustments.forEach(adj => adj.abs = Math.abs(adj.delta));
     y_adjustments.forEach(adj => adj.abs = Math.abs(adj.delta));
-    
+
     const bestXSnap = x_adjustments
         .filter(adj => adj.abs < snapThreshold && adj.abs > 1e-9)
         .sort((a, b) => a.abs - b.abs)[0];
     const bestYSnap = y_adjustments
         .filter(adj => adj.abs < snapThreshold && adj.abs > 1e-9)
         .sort((a, b) => a.abs - b.abs)[0];
-        
+
     return {
         dx: bestXSnap ? bestXSnap.delta : 0,
         dy: bestYSnap ? bestYSnap.delta : 0
@@ -145,7 +145,7 @@ export function getStateSignature(layers) {
         if (layer.image && layer.image.src) {
             sig.imageSrc = layer.image.src.substring(0, 100); // First 100 chars to avoid huge signatures
         }
-        
+
         return sig;
     }));
 }
@@ -179,7 +179,7 @@ export function debounce(func, wait, immediate) {
  */
 export function throttle(func, limit) {
     let inThrottle;
-    return function(...args) {
+    return function (...args) {
         if (!inThrottle) {
             func.apply(this, args);
             inThrottle = true;
@@ -241,7 +241,7 @@ export function createCanvas(width, height, contextType = '2d', contextOptions =
     if (width) canvas.width = width;
     if (height) canvas.height = height;
     const ctx = canvas.getContext(contextType, contextOptions);
-    return { canvas, ctx };
+    return {canvas, ctx};
 }
 
 /**
@@ -284,5 +284,5 @@ export function generateUniqueFileName(baseName, nodeId) {
  */
 export function isPointInRect(pointX, pointY, rectX, rectY, rectWidth, rectHeight) {
     return pointX >= rectX && pointX <= rectX + rectWidth &&
-           pointY >= rectY && pointY <= rectY + rectHeight;
+        pointY >= rectY && pointY <= rectY + rectHeight;
 }

js/utils/ImageUtils.js

@@ -1,5 +1,6 @@
 import {createModuleLogger} from "./LoggerUtils.js";
 import {withErrorHandling, createValidationError} from "../ErrorHandler.js";
+
 const log = createModuleLogger('ImageUtils');
 
 export function validateImageData(data) {
@@ -114,7 +115,7 @@ export function applyMaskToImageData(imageData, maskData) {
     };
 }
 
-export const prepareImageForCanvas = withErrorHandling(function(inputImage) {
+export const prepareImageForCanvas = withErrorHandling(function (inputImage) {
     log.info("Preparing image for canvas:", inputImage);
 
     if (Array.isArray(inputImage)) {
@@ -122,7 +123,7 @@ export const prepareImageForCanvas = withErrorHandling(function(inputImage) {
     }
 
     if (!inputImage || !inputImage.shape || !inputImage.data) {
-        throw createValidationError("Invalid input image format", { inputImage });
+        throw createValidationError("Invalid input image format", {inputImage});
     }
 
     const shape = inputImage.shape;
@@ -161,29 +162,29 @@ export const prepareImageForCanvas = withErrorHandling(function(inputImage) {
  * @param {HTMLImageElement|HTMLCanvasElement} image - Obraz do konwersji
  * @returns {Promise<Object>} Tensor z danymi obrazu
  */
-export const imageToTensor = withErrorHandling(async function(image) {
+export const imageToTensor = withErrorHandling(async function (image) {
     if (!image) {
         throw createValidationError("Image is required");
     }
 
     const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
     canvas.width = image.width || image.naturalWidth;
     canvas.height = image.height || image.naturalHeight;
-    
+
     ctx.drawImage(image, 0, 0);
-    
+
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     const data = new Float32Array(canvas.width * canvas.height * 3);
-    
+
     for (let i = 0; i < imageData.data.length; i += 4) {
         const pixelIndex = i / 4;
         data[pixelIndex * 3] = imageData.data[i] / 255;
         data[pixelIndex * 3 + 1] = imageData.data[i + 1] / 255;
         data[pixelIndex * 3 + 2] = imageData.data[i + 2] / 255;
     }
-    
+
     return {
         data: data,
         shape: [1, canvas.height, canvas.width, 3],
@@ -197,33 +198,33 @@ export const imageToTensor = withErrorHandling(async function(image) {
  * @param {Object} tensor - Tensor z danymi obrazu
  * @returns {Promise<HTMLImageElement>} Obraz HTML
  */
-export const tensorToImage = withErrorHandling(async function(tensor) {
+export const tensorToImage = withErrorHandling(async function (tensor) {
     if (!tensor || !tensor.data || !tensor.shape) {
-        throw createValidationError("Invalid tensor format", { tensor });
+        throw createValidationError("Invalid tensor format", {tensor});
     }
 
     const [, height, width, channels] = tensor.shape;
     const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
     canvas.width = width;
     canvas.height = height;
-    
+
     const imageData = ctx.createImageData(width, height);
     const data = tensor.data;
-    
+
     for (let i = 0; i < width * height; i++) {
         const pixelIndex = i * 4;
         const tensorIndex = i * channels;
-        
+
         imageData.data[pixelIndex] = Math.round(data[tensorIndex] * 255);
         imageData.data[pixelIndex + 1] = Math.round(data[tensorIndex + 1] * 255);
         imageData.data[pixelIndex + 2] = Math.round(data[tensorIndex + 2] * 255);
         imageData.data[pixelIndex + 3] = 255;
     }
-    
+
     ctx.putImageData(imageData, 0, 0);
-    
+
     return new Promise((resolve, reject) => {
         const img = new Image();
         img.onload = () => resolve(img);
@@ -239,27 +240,27 @@ export const tensorToImage = withErrorHandling(async function(tensor) {
  * @param {number} maxHeight - Maksymalna wysokość
  * @returns {Promise<HTMLImageElement>} Przeskalowany obraz
  */
-export const resizeImage = withErrorHandling(async function(image, maxWidth, maxHeight) {
+export const resizeImage = withErrorHandling(async function (image, maxWidth, maxHeight) {
     if (!image) {
         throw createValidationError("Image is required");
     }
 
     const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
     const originalWidth = image.width || image.naturalWidth;
     const originalHeight = image.height || image.naturalHeight;
     const scale = Math.min(maxWidth / originalWidth, maxHeight / originalHeight);
     const newWidth = Math.round(originalWidth * scale);
     const newHeight = Math.round(originalHeight * scale);
-    
+
     canvas.width = newWidth;
     canvas.height = newHeight;
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
-    
+
     ctx.drawImage(image, 0, 0, newWidth, newHeight);
-    
+
     return new Promise((resolve, reject) => {
         const img = new Image();
         img.onload = () => resolve(img);
@@ -274,7 +275,7 @@ export const resizeImage = withErrorHandling(async function(image, maxWidth, max
  * @param {number} size - Rozmiar miniatury (kwadrat)
  * @returns {Promise<HTMLImageElement>} Miniatura
  */
-export const createThumbnail = withErrorHandling(async function(image, size = 128) {
+export const createThumbnail = withErrorHandling(async function (image, size = 128) {
     return resizeImage(image, size, size);
 }, 'createThumbnail');
 
@@ -285,19 +286,19 @@ export const createThumbnail = withErrorHandling(async function(image, size = 12
  * @param {number} quality - Jakość (0-1) dla formatów stratnych
  * @returns {string} Base64 string
  */
-export const imageToBase64 = withErrorHandling(function(image, format = 'png', quality = 0.9) {
+export const imageToBase64 = withErrorHandling(function (image, format = 'png', quality = 0.9) {
     if (!image) {
         throw createValidationError("Image is required");
     }
 
     const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
     canvas.width = image.width || image.naturalWidth;
     canvas.height = image.height || image.naturalHeight;
-    
+
     ctx.drawImage(image, 0, 0);
-    
+
     const mimeType = `image/${format}`;
     return canvas.toDataURL(mimeType, quality);
 }, 'imageToBase64');
@@ -307,7 +308,7 @@ export const imageToBase64 = withErrorHandling(function(image, format = 'png', q
  * @param {string} base64 - Base64 string
  * @returns {Promise<HTMLImageElement>} Obraz
  */
-export const base64ToImage = withErrorHandling(function(base64) {
+export const base64ToImage = withErrorHandling(function (base64) {
     if (!base64) {
         throw createValidationError("Base64 string is required");
     }
@@ -326,10 +327,10 @@ export const base64ToImage = withErrorHandling(function(base64) {
  * @returns {boolean} Czy obraz jest prawidłowy
  */
 export function isValidImage(image) {
-    return image && 
-           (image instanceof HTMLImageElement || image instanceof HTMLCanvasElement) &&
-           image.width > 0 && 
-           image.height > 0;
+    return image &&
+        (image instanceof HTMLImageElement || image instanceof HTMLCanvasElement) &&
+        image.width > 0 &&
+        image.height > 0;
 }
 
 /**
@@ -371,18 +372,18 @@ export function createImageFromSource(source) {
  * @param {string} color - Kolor tła (CSS color)
  * @returns {Promise<HTMLImageElement>} Pusty obraz
  */
-export const createEmptyImage = withErrorHandling(function(width, height, color = 'transparent') {
+export const createEmptyImage = withErrorHandling(function (width, height, color = 'transparent') {
     const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
     canvas.width = width;
     canvas.height = height;
-    
+
     if (color !== 'transparent') {
         ctx.fillStyle = color;
         ctx.fillRect(0, 0, width, height);
     }
-    
+
     return new Promise((resolve, reject) => {
         const img = new Image();
         img.onload = () => resolve(img);

js/utils/LoggerUtils.js

@@ -13,7 +13,7 @@ import {logger, LogLevel} from "../logger.js";
  */
 export function createModuleLogger(moduleName, level = LogLevel.NONE) {
     logger.setModuleLevel(moduleName, level);
-    
+
     return {
         debug: (...args) => logger.debug(moduleName, ...args),
         info: (...args) => logger.info(moduleName, ...args),
@@ -31,7 +31,7 @@ export function createAutoLogger(level = LogLevel.DEBUG) {
     const stack = new Error().stack;
     const match = stack.match(/\/([^\/]+)\.js/);
     const moduleName = match ? match[1] : 'Unknown';
-    
+
     return createModuleLogger(moduleName, level);
 }
 
@@ -43,7 +43,7 @@ export function createAutoLogger(level = LogLevel.DEBUG) {
  * @returns {Function} Opakowana funkcja
  */
 export function withErrorLogging(operation, log, operationName) {
-    return async function(...args) {
+    return async function (...args) {
         try {
             log.debug(`Starting ${operationName}`);
             const result = await operation.apply(this, args);
@@ -62,10 +62,10 @@ export function withErrorLogging(operation, log, operationName) {
  * @param {string} methodName - Nazwa metody
  */
 export function logMethod(log, methodName) {
-    return function(target, propertyKey, descriptor) {
+    return function (target, propertyKey, descriptor) {
         const originalMethod = descriptor.value;
-        
-        descriptor.value = async function(...args) {
+
+        descriptor.value = async function (...args) {
             try {
                 log.debug(`${methodName || propertyKey} started`);
                 const result = await originalMethod.apply(this, args);
@@ -76,7 +76,7 @@ export function logMethod(log, methodName) {
                 throw error;
             }
         };
-        
+
         return descriptor;
     };
 }

js/utils/WebSocketManager.js

@@ -45,7 +45,7 @@ class WebSocketManager {
                 try {
                     const data = JSON.parse(event.data);
                     log.debug("Received message:", data);
-                    
+
                     if (data.type === 'ack' && data.nodeId) {
                         const callback = this.ackCallbacks.get(data.nodeId);
                         if (callback) {
@@ -130,7 +130,6 @@ class WebSocketManager {
                 log.warn("WebSocket not open. Queuing message.");
 
 
-
                 this.messageQueue.push(message);
                 if (!this.isConnecting) {
                     this.connect();
@@ -147,7 +146,6 @@ class WebSocketManager {
         log.debug(`Flushing ${this.messageQueue.length} queued messages.`);
 
 
-
         while (this.messageQueue.length > 0) {
             const message = this.messageQueue.shift();
             this.socket.send(message);

js/utils/mask_utils.js

@@ -0,0 +1,174 @@
+import {createModuleLogger} from "./LoggerUtils.js";
+
+const log = createModuleLogger('MaskUtils');
+
+export function new_editor(app) {
+    if (!app) return false;
+    return app.ui.settings.getSettingValue('Comfy.MaskEditor.UseNewEditor')
+}
+
+function get_mask_editor_element(app) {
+    return new_editor(app) ? document.getElementById('maskEditor') : document.getElementById('maskCanvas')?.parentElement
+}
+
+export function mask_editor_showing(app) {
+    const editor = get_mask_editor_element(app);
+    return editor && editor.style.display !== "none";
+}
+
+export function hide_mask_editor() {
+    if (mask_editor_showing()) document.getElementById('maskEditor').style.display = 'none'
+}
+
+function get_mask_editor_cancel_button(app) {
+
+    const cancelButton = document.getElementById("maskEditor_topBarCancelButton");
+    if (cancelButton) {
+        log.debug("Found cancel button by ID: maskEditor_topBarCancelButton");
+        return cancelButton;
+    }
+
+    const cancelSelectors = [
+        'button[onclick*="cancel"]',
+        'button[onclick*="Cancel"]',
+        'input[value="Cancel"]'
+    ];
+
+    for (const selector of cancelSelectors) {
+        try {
+            const button = document.querySelector(selector);
+            if (button) {
+                log.debug("Found cancel button with selector:", selector);
+                return button;
+            }
+        } catch (e) {
+            log.warn("Invalid selector:", selector, e);
+        }
+    }
+
+    const allButtons = document.querySelectorAll('button, input[type="button"]');
+    for (const button of allButtons) {
+        const text = button.textContent || button.value || '';
+        if (text.toLowerCase().includes('cancel')) {
+            log.debug("Found cancel button by text content:", text);
+            return button;
+        }
+    }
+
+    const editorElement = get_mask_editor_element(app);
+    if (editorElement) {
+        return editorElement?.parentElement?.lastChild?.childNodes[2];
+    }
+
+    return null;
+}
+
+function get_mask_editor_save_button(app) {
+    if (document.getElementById("maskEditor_topBarSaveButton")) return document.getElementById("maskEditor_topBarSaveButton")
+    return get_mask_editor_element(app)?.parentElement?.lastChild?.childNodes[2]
+}
+
+export function mask_editor_listen_for_cancel(app, callback) {
+
+    let attempts = 0;
+    const maxAttempts = 50; // 5 sekund
+
+    const findAndAttachListener = () => {
+        attempts++;
+        const cancel_button = get_mask_editor_cancel_button(app);
+
+        if (cancel_button && !cancel_button.filter_listener_added) {
+            log.info("Cancel button found, attaching listener");
+            cancel_button.addEventListener('click', callback);
+            cancel_button.filter_listener_added = true;
+            return true; // Znaleziono i podłączono
+        } else if (attempts < maxAttempts) {
+
+            setTimeout(findAndAttachListener, 100);
+        } else {
+            log.warn("Could not find cancel button after", maxAttempts, "attempts");
+
+            const globalClickHandler = (event) => {
+                const target = event.target;
+                const text = target.textContent || target.value || '';
+                if (text.toLowerCase().includes('cancel') ||
+                    target.id.toLowerCase().includes('cancel') ||
+                    target.className.toLowerCase().includes('cancel')) {
+                    log.info("Cancel detected via global click handler");
+                    callback();
+                    document.removeEventListener('click', globalClickHandler);
+                }
+            };
+
+            document.addEventListener('click', globalClickHandler);
+            log.debug("Added global click handler for cancel detection");
+        }
+    };
+
+    findAndAttachListener();
+}
+
+export function press_maskeditor_save(app) {
+    get_mask_editor_save_button(app)?.click()
+}
+
+export function press_maskeditor_cancel(app) {
+    get_mask_editor_cancel_button(app)?.click()
+}
+
+/**
+ * Uruchamia mask editor z predefiniowaną maską
+ * @param {Object} canvasInstance - Instancja Canvas
+ * @param {Image|HTMLCanvasElement} maskImage - Obraz maski do nałożenia
+ * @param {boolean} sendCleanImage - Czy wysłać czysty obraz (bez istniejącej maski)
+ */
+export function start_mask_editor_with_predefined_mask(canvasInstance, maskImage, sendCleanImage = true) {
+    if (!canvasInstance || !maskImage) {
+        log.error('Canvas instance and mask image are required');
+        return;
+    }
+
+    canvasInstance.startMaskEditor(maskImage, sendCleanImage);
+}
+
+/**
+ * Uruchamia mask editor z automatycznym zachowaniem (czysty obraz + istniejąca maska)
+ * @param {Object} canvasInstance - Instancja Canvas
+ */
+export function start_mask_editor_auto(canvasInstance) {
+    if (!canvasInstance) {
+        log.error('Canvas instance is required');
+        return;
+    }
+
+
+    canvasInstance.startMaskEditor();
+}
+
+/**
+ * Tworzy maskę z obrazu dla użycia w mask editorze
+ * @param {string} imageSrc - Źródło obrazu (URL lub data URL)
+ * @returns {Promise<Image>} Promise zwracający obiekt Image
+ */
+export function create_mask_from_image_src(imageSrc) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = imageSrc;
+    });
+}
+
+/**
+ * Konwertuje canvas do Image dla użycia jako maska
+ * @param {HTMLCanvasElement} canvas - Canvas do konwersji
+ * @returns {Promise<Image>} Promise zwracający obiekt Image
+ */
+export function canvas_to_mask_image(canvas) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = canvas.toDataURL();
+    });
+}