Refactor mask editor cropping and formatting in Canvas.js

Updated the mask processing logic to crop the mask based on the viewport pan position instead of scaling, ensuring accurate mask editing. Also standardized object formatting in logging and context creation for consistency.

canvas_node.py

@@ -10,12 +10,7 @@ import threading
 import os
 from tqdm import tqdm
 from torchvision import transforms
-try:
-    from transformers import AutoModelForImageSegmentation, PretrainedConfig
-    from requests.exceptions import ConnectionError as RequestsConnectionError
-    TRANSFORMERS_AVAILABLE = True
-except ImportError:
-    TRANSFORMERS_AVAILABLE = False
+from transformers import AutoModelForImageSegmentation, PretrainedConfig
 import torch.nn.functional as F
 import traceback
 import uuid
@@ -28,9 +23,8 @@ import os
 
 try:
     from python.logger import logger, LogLevel, debug, info, warn, error, exception
-    from python.config import LOG_LEVEL
 
-    logger.set_module_level('canvas_node', LogLevel[LOG_LEVEL])
+    logger.set_module_level('canvas_node', LogLevel.NONE)
 
     logger.configure({
         'log_to_file': True,
@@ -334,24 +328,6 @@ class CanvasNode:
         latest_image_path = max(image_files, key=os.path.getctime)
         return latest_image_path
 
-    @classmethod
-    def get_latest_images(cls, since_timestamp=0):
-        output_dir = folder_paths.get_output_directory()
-        files = []
-        for f_name in os.listdir(output_dir):
-            file_path = os.path.join(output_dir, f_name)
-            if os.path.isfile(file_path) and file_path.lower().endswith(('.png', '.jpg', '.jpeg', '.bmp', '.gif')):
-                try:
-                    mtime = os.path.getmtime(file_path)
-                    if mtime > since_timestamp:
-                        files.append((mtime, file_path))
-                except OSError:
-                    continue
-        
-        files.sort(key=lambda x: x[0])
-        
-        return [f[1] for f in files]
-
     @classmethod
     def get_flow_status(cls, flow_id=None):
 
@@ -473,30 +449,6 @@ class CanvasNode:
                     'error': str(e)
                 })
 
-        @PromptServer.instance.routes.get("/layerforge/get-latest-images/{since}")
-        async def get_latest_images_route(request):
-            try:
-                since_timestamp = float(request.match_info.get('since', 0))
-                # JS Timestamps are in milliseconds, Python's are in seconds
-                latest_image_paths = cls.get_latest_images(since_timestamp / 1000.0)
-
-                images_data = []
-                for image_path in latest_image_paths:
-                    with open(image_path, "rb") as f:
-                        encoded_string = base64.b64encode(f.read()).decode('utf-8')
-                        images_data.append(f"data:image/png;base64,{encoded_string}")
-                
-                return web.json_response({
-                    'success': True,
-                    'images': images_data
-                })
-            except Exception as e:
-                log_error(f"Error in get_latest_images_route: {str(e)}")
-                return web.json_response({
-                    'success': False,
-                    'error': str(e)
-                }, status=500)
-
         @PromptServer.instance.routes.get("/ycnode/get_latest_image")
         async def get_latest_image_route(request):
             try:
@@ -614,38 +566,42 @@ class BiRefNetMatting:
     def load_model(self, model_path):
         try:
             if model_path not in self.model_cache:
+
                 full_model_path = os.path.join(self.base_path, "BiRefNet")
+
                 log_info(f"Loading BiRefNet model from {full_model_path}...")
 
                 try:
+
                     self.model = AutoModelForImageSegmentation.from_pretrained(
                         "ZhengPeng7/BiRefNet",
                         trust_remote_code=True,
                         cache_dir=full_model_path
                     )
+
                     self.model.eval()
                     if torch.cuda.is_available():
                         self.model = self.model.cuda()
+
                     self.model_cache[model_path] = self.model
                     log_info("Model loaded successfully from Hugging Face")
+                    log_debug(f"Model type: {type(self.model)}")
+                    log_debug(f"Model device: {next(self.model.parameters()).device}")
+
                 except Exception as e:
-                    log_error(f"Failed to load model from Hugging Face: {str(e)}")
-                    # Re-raise with a more informative message
-                    raise RuntimeError(
-                        "Failed to download or load the matting model. "
-                        "This could be due to a network issue, file permissions, or a corrupted model cache. "
-                        f"Please check your internet connection and the model cache path: {full_model_path}. "
-                        f"Original error: {str(e)}"
-                    ) from e
+                    log_error(f"Failed to load model: {str(e)}")
+                    raise
+
             else:
                 self.model = self.model_cache[model_path]
                 log_debug("Using cached model")
 
+            return True
+
         except Exception as e:
-            # Catch the re-raised exception or any other error
             log_error(f"Error loading model: {str(e)}")
             log_exception("Model loading failed")
-            raise  # Re-raise the exception to be caught by the execute method
+            return False
 
     def preprocess_image(self, image):
 
@@ -675,9 +631,11 @@ class BiRefNetMatting:
 
     def execute(self, image, model_path, threshold=0.5, refinement=1):
         try:
+
             PromptServer.instance.send_sync("matting_status", {"status": "processing"})
 
-            self.load_model(model_path)
+            if not self.load_model(model_path):
+                raise RuntimeError("Failed to load model")
 
             if isinstance(image, torch.Tensor):
                 original_size = image.shape[-2:] if image.dim() == 4 else image.shape[-2:]
@@ -754,31 +712,25 @@ _matting_lock = None
 async def matting(request):
     global _matting_lock
 
-    if not TRANSFORMERS_AVAILABLE:
-        log_error("Matting request failed: 'transformers' library is not installed.")
-        return web.json_response({
-            "error": "Dependency Not Found",
-            "details": "The 'transformers' library is required for the matting feature. Please install it by running: pip install transformers"
-        }, status=400)
-
     if _matting_lock is not None:
         log_warn("Matting already in progress, rejecting request")
         return web.json_response({
             "error": "Another matting operation is in progress",
             "details": "Please wait for the current operation to complete"
-        }, status=429)
+        }, status=429)  # 429 Too Many Requests
 
     _matting_lock = True
+    
     try:
         log_info("Received matting request")
         data = await request.json()
 
-        matting_instance = BiRefNetMatting()
+        matting = BiRefNetMatting()
 
         image_tensor, original_alpha = convert_base64_to_tensor(data["image"])
         log_debug(f"Input image shape: {image_tensor.shape}")
 
-        matted_image, alpha_mask = matting_instance.execute(
+        matted_image, alpha_mask = matting.execute(
             image_tensor,
             "BiRefNet/model.safetensors",
             threshold=data.get("threshold", 0.5),
@@ -793,26 +745,14 @@ async def matting(request):
             "alpha_mask": result_mask
         })
 
-    except RequestsConnectionError as e:
-        log_error(f"Connection error during matting model download: {e}")
-        return web.json_response({
-            "error": "Network Connection Error",
-            "details": "Failed to download the matting model from Hugging Face. Please check your internet connection."
-        }, status=400)
     except Exception as e:
-        log_exception(f"Error in matting endpoint: {e}")
-        # Check for offline error message from Hugging Face
-        if "Offline mode is enabled" in str(e) or "Can't load 'ZhengPeng7/BiRefNet' offline" in str(e):
-            return web.json_response({
-                "error": "Network Connection Error",
-                "details": "Failed to download the matting model from Hugging Face. Please check your internet connection and ensure you are not in offline mode."
-            }, status=400)
-
+        log_exception(f"Error in matting endpoint: {str(e)}")
         return web.json_response({
-            "error": "An unexpected error occurred",
+            "error": str(e),
             "details": traceback.format_exc()
         }, status=500)
     finally:
+
         _matting_lock = None
         log_debug("Matting lock released")
 

js/BatchPreviewManager.js

@@ -1,258 +0,0 @@
-import {createModuleLogger} from "./utils/LoggerUtils.js";
-
-const log = createModuleLogger('BatchPreviewManager');
-
-export class BatchPreviewManager {
-    constructor(canvas, initialPosition = { x: 0, y: 0 }, generationArea = null) {
-        this.canvas = canvas;
-        this.active = false;
-        this.layers = [];
-        this.currentIndex = 0;
-        this.element = null;
-        this.uiInitialized = false;
-        this.maskWasVisible = false;
-
-        // Position in canvas world coordinates
-        this.worldX = initialPosition.x;
-        this.worldY = initialPosition.y;
-        this.isDragging = false;
-        this.generationArea = generationArea; // Store the generation area
-    }
-
-    updateScreenPosition(viewport) {
-        if (!this.active || !this.element) return;
-
-        // Translate world coordinates to screen coordinates
-        const screenX = (this.worldX - viewport.x) * viewport.zoom;
-        const screenY = (this.worldY - viewport.y) * viewport.zoom;
-        
-        // We can also scale the menu with zoom, but let's keep it constant for now for readability
-        const scale = 1; // viewport.zoom; 
-
-        // Use transform for performance
-        this.element.style.transform = `translate(${screenX}px, ${screenY}px) scale(${scale})`;
-    }
-
-    _createUI() {
-        if (this.uiInitialized) return;
-        
-        this.element = document.createElement('div');
-        this.element.id = 'layerforge-batch-preview';
-        this.element.style.cssText = `
-            position: absolute;
-            top: 0;
-            left: 0;
-            background-color: #333;
-            color: white;
-            padding: 8px 15px;
-            border-radius: 10px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
-            display: none;
-            align-items: center;
-            gap: 15px;
-            font-family: sans-serif;
-            z-index: 1001;
-            border: 1px solid #555;
-            cursor: move;
-            user-select: none;
-        `;
-
-        this.element.addEventListener('mousedown', (e) => {
-            if (e.target.tagName === 'BUTTON') return;
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            this.isDragging = true;
-            
-            const handleMouseMove = (moveEvent) => {
-                if (this.isDragging) {
-                    // Convert screen pixel movement to world coordinate movement
-                    const deltaX = moveEvent.movementX / this.canvas.viewport.zoom;
-                    const deltaY = moveEvent.movementY / this.canvas.viewport.zoom;
-
-                    this.worldX += deltaX;
-                    this.worldY += deltaY;
-                    
-                    // The render loop will handle updating the screen position, but we need to trigger it.
-                    this.canvas.render();
-                }
-            };
-
-            const handleMouseUp = () => {
-                this.isDragging = false;
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleMouseUp);
-            };
-
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-        });
-
-        const prevButton = this._createButton('◀', 'Previous'); // Left arrow
-        const nextButton = this._createButton('▶', 'Next'); // Right arrow
-        const confirmButton = this._createButton('✔', 'Confirm'); // Checkmark
-        const cancelButton = this._createButton('✖', 'Cancel All'); // X mark
-        const closeButton = this._createButton('➲', 'Close'); // Door icon
-
-        this.counterElement = document.createElement('span');
-        this.counterElement.style.minWidth = '40px';
-        this.counterElement.style.textAlign = 'center';
-        this.counterElement.style.fontWeight = 'bold';
-
-        prevButton.onclick = () => this.navigate(-1);
-        nextButton.onclick = () => this.navigate(1);
-        confirmButton.onclick = () => this.confirm();
-        cancelButton.onclick = () => this.cancelAndRemoveAll();
-        closeButton.onclick = () => this.hide();
-
-        this.element.append(prevButton, this.counterElement, nextButton, confirmButton, cancelButton, closeButton);
-        if (this.canvas.canvas.parentNode) {
-            this.canvas.canvas.parentNode.appendChild(this.element);
-        } else {
-            log.error("Could not find parent node to attach batch preview UI.");
-        }
-        this.uiInitialized = true;
-    }
-
-    _createButton(innerHTML, title) {
-        const button = document.createElement('button');
-        button.innerHTML = innerHTML;
-        button.title = title;
-        button.style.cssText = `
-            background: #555;
-            color: white;
-            border: 1px solid #777;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 16px;
-            width: 30px;
-            height: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        `;
-        button.onmouseover = () => button.style.background = '#666';
-        button.onmouseout = () => button.style.background = '#555';
-        return button;
-    }
-
-    show(layers) {
-        if (!layers || layers.length <= 1) {
-            return;
-        }
-
-        this._createUI();
-
-        // Auto-hide mask logic
-        this.maskWasVisible = this.canvas.maskTool.isOverlayVisible;
-        if (this.maskWasVisible) {
-            this.canvas.maskTool.toggleOverlayVisibility();
-            const toggleBtn = document.getElementById(`toggle-mask-btn-${this.canvas.node.id}`);
-            if (toggleBtn) {
-                toggleBtn.classList.remove('primary');
-                toggleBtn.textContent = "Hide Mask";
-            }
-            this.canvas.render();
-        }
-
-        log.info(`Showing batch preview for ${layers.length} layers.`);
-        this.layers = layers;
-        this.currentIndex = 0;
-        
-        // Make the element visible BEFORE calculating its size
-        this.element.style.display = 'flex';
-        this.active = true;
-
-        // Now that it's visible, we can get its dimensions and adjust the position.
-        const menuWidthInWorld = this.element.offsetWidth / this.canvas.viewport.zoom;
-        const paddingInWorld = 20 / this.canvas.viewport.zoom;
-
-        this.worldX -= menuWidthInWorld / 2; // Center horizontally
-        this.worldY += paddingInWorld;       // Add padding below the output area
-
-        this._update();
-    }
-
-    hide() {
-        log.info('Hiding batch preview.');
-        if (this.element) {
-            this.element.remove();
-        }
-        this.active = false;
-        
-        const index = this.canvas.batchPreviewManagers.indexOf(this);
-        if (index > -1) {
-            this.canvas.batchPreviewManagers.splice(index, 1);
-        }
-
-        // Trigger a final render to ensure the generation area outline is removed
-        this.canvas.render();
-
-        // Restore mask visibility if it was hidden by this manager
-        if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) {
-            this.canvas.maskTool.toggleOverlayVisibility();
-            const toggleBtn = document.getElementById(`toggle-mask-btn-${this.canvas.node.id}`);
-            if (toggleBtn) {
-                toggleBtn.classList.add('primary');
-                toggleBtn.textContent = "Show Mask";
-            }
-        }
-        this.maskWasVisible = false; // Reset state
-
-        // Make all layers visible again upon closing
-        this.canvas.layers.forEach(l => l.visible = true);
-        this.canvas.render();
-    }
-
-    navigate(direction) {
-        this.currentIndex += direction;
-        if (this.currentIndex < 0) {
-            this.currentIndex = this.layers.length - 1;
-        } else if (this.currentIndex >= this.layers.length) {
-            this.currentIndex = 0;
-        }
-        this._update();
-    }
-
-    confirm() {
-        const layerToKeep = this.layers[this.currentIndex];
-        log.info(`Confirming selection: Keeping layer ${layerToKeep.id}.`);
-
-        const layersToDelete = this.layers.filter(l => l.id !== layerToKeep.id);
-        const layerIdsToDelete = layersToDelete.map(l => l.id);
-
-        this.canvas.removeLayersByIds(layerIdsToDelete);
-        log.info(`Deleted ${layersToDelete.length} other layers.`);
-
-        this.hide();
-    }
-
-    cancelAndRemoveAll() {
-        log.info('Cancel clicked. Removing all new layers.');
-
-        const layerIdsToDelete = this.layers.map(l => l.id);
-        this.canvas.removeLayersByIds(layerIdsToDelete);
-        log.info(`Deleted all ${layerIdsToDelete.length} new layers.`);
-
-        this.hide();
-    }
-
-    _update() {
-        this.counterElement.textContent = `${this.currentIndex + 1} / ${this.layers.length}`;
-        this._focusOnLayer(this.layers[this.currentIndex]);
-    }
-
-    _focusOnLayer(layer) {
-        if (!layer) return;
-        log.debug(`Focusing on layer ${layer.id}`);
-
-        // Move the selected layer to the top of the layer stack
-        this.canvas.canvasLayers.moveLayers([layer], { toIndex: 0 });
-        
-        this.canvas.updateSelection([layer]);
-        
-        // Render is called by moveLayers, but we call it again to be safe
-        this.canvas.render();
-    }
-}

js/Canvas.js

@@ -5,26 +5,11 @@ import {MaskTool} from "./MaskTool.js";
 import {CanvasState} from "./CanvasState.js";
 import {CanvasInteractions} from "./CanvasInteractions.js";
 import {CanvasLayers} from "./CanvasLayers.js";
-import {CanvasLayersPanel} from "./CanvasLayersPanel.js";
 import {CanvasRenderer} from "./CanvasRenderer.js";
 import {CanvasIO} from "./CanvasIO.js";
 import {ImageReferenceManager} from "./ImageReferenceManager.js";
-import {BatchPreviewManager} from "./BatchPreviewManager.js";
 import {createModuleLogger} from "./utils/LoggerUtils.js";
-import { debounce } from "./utils/CommonUtils.js";
-import {CanvasMask} from "./CanvasMask.js";
-import {CanvasSelection} from "./CanvasSelection.js";
-
-const useChainCallback = (original, next) => {
-  if (original === undefined || original === null) {
-    return next;
-  }
-  return function(...args) {
-    const originalReturn = original.apply(this, args);
-    const nextReturn = next.apply(this, args);
-    return nextReturn === undefined ? originalReturn : nextReturn;
-  };
-};
+import {mask_editor_showing, mask_editor_listen_for_cancel} from "./utils/mask_utils.js";
 
 const log = createModuleLogger('Canvas');
 
@@ -45,6 +30,9 @@ export class Canvas {
         this.width = 512;
         this.height = 512;
         this.layers = [];
+        this.selectedLayer = null;
+        this.selectedLayers = [];
+        this.onSelectionChange = null;
         this.onStateChange = callbacks.onStateChange || null;
         this.lastMousePosition = {x: 0, y: 0};
 
@@ -153,22 +141,13 @@ export class Canvas {
     _initializeModules(callbacks) {
         log.debug('Initializing Canvas modules...');
 
-        // Stwórz opóźnioną wersję funkcji zapisu stanu
-        this.requestSaveState = debounce(this.saveState.bind(this), 500);
-
-        this._addAutoRefreshToggle();
         this.maskTool = new MaskTool(this, {onStateChange: this.onStateChange});
-        this.canvasMask = new CanvasMask(this);
         this.canvasState = new CanvasState(this);
-        this.canvasSelection = new CanvasSelection(this);
         this.canvasInteractions = new CanvasInteractions(this);
         this.canvasLayers = new CanvasLayers(this);
-        this.canvasLayersPanel = new CanvasLayersPanel(this);
         this.canvasRenderer = new CanvasRenderer(this);
         this.canvasIO = new CanvasIO(this);
         this.imageReferenceManager = new ImageReferenceManager(this);
-        this.batchPreviewManagers = [];
-        this.pendingBatchContext = null;
 
         log.debug('Canvas modules initialized successfully');
     }
@@ -201,11 +180,6 @@ export class Canvas {
         }
         this.saveState();
         this.render();
-
-        // Dodaj to wywołanie, aby panel renderował się po załadowaniu stanu
-        if (this.canvasLayersPanel) {
-            this.canvasLayersPanel.onLayersChanged();
-        }
     }
 
     /**
@@ -231,12 +205,6 @@ export class Canvas {
         this.incrementOperationCount();
         this._notifyStateChange();
 
-        // Powiadom panel warstw o zmianie stanu warstw
-        if (this.canvasLayersPanel) {
-            this.canvasLayersPanel.onLayersChanged();
-            this.canvasLayersPanel.onSelectionChanged();
-        }
-
         log.debug('Undo completed, layers count:', this.layers.length);
     }
 
@@ -253,12 +221,6 @@ export class Canvas {
         this.incrementOperationCount();
         this._notifyStateChange();
 
-        // Powiadom panel warstw o zmianie stanu warstw
-        if (this.canvasLayersPanel) {
-            this.canvasLayersPanel.onLayersChanged();
-            this.canvasLayersPanel.onSelectionChanged();
-        }
-
         log.debug('Redo completed, layers count:', this.layers.length);
     }
 
@@ -276,64 +238,49 @@ export class Canvas {
      * @param {string} addMode - Tryb dodawania
      */
     async addLayer(image, layerProps = {}, addMode = 'default') {
-        const result = await this.canvasLayers.addLayerWithImage(image, layerProps, addMode);
-        
-        // Powiadom panel warstw o dodaniu nowej warstwy
-        if (this.canvasLayersPanel) {
-            this.canvasLayersPanel.onLayersChanged();
-        }
-        
-        return result;
+        return this.canvasLayers.addLayerWithImage(image, layerProps, addMode);
     }
 
     /**
      * Usuwa wybrane warstwy
      */
-    removeLayersByIds(layerIds) {
-        if (!layerIds || layerIds.length === 0) return;
-
-        const initialCount = this.layers.length;
-        this.saveState();
-        this.layers = this.layers.filter(l => !layerIds.includes(l.id));
-        
-        // If the current selection was part of the removal, clear it
-        const newSelection = this.canvasSelection.selectedLayers.filter(l => !layerIds.includes(l.id));
-        this.canvasSelection.updateSelection(newSelection);
-        
-        this.render();
-        this.saveState();
-
-        if (this.canvasLayersPanel) {
-            this.canvasLayersPanel.onLayersChanged();
-        }
-        log.info(`Removed ${initialCount - this.layers.length} layers by ID.`);
-    }
-
     removeSelectedLayers() {
-        return this.canvasSelection.removeSelectedLayers();
+        if (this.selectedLayers.length > 0) {
+            log.info('Removing selected layers', {
+                layersToRemove: this.selectedLayers.length,
+                totalLayers: this.layers.length
+            });
+
+            this.saveState();
+            this.layers = this.layers.filter(l => !this.selectedLayers.includes(l));
+            this.updateSelection([]);
+            this.render();
+            this.saveState();
+
+            log.debug('Layers removed successfully, remaining layers:', this.layers.length);
+        } else {
+            log.debug('No layers selected for removal');
+        }
     }
 
     /**
-     * Duplikuje zaznaczone warstwy (w pamięci, bez zapisu stanu)
-     */
-    duplicateSelectedLayers() {
-        return this.canvasSelection.duplicateSelectedLayers();
-    }
-
-    /**
-     * Aktualizuje zaznaczenie warstw i powiadamia wszystkie komponenty.
-     * To jest "jedyne źródło prawdy" o zmianie zaznaczenia.
+     * Aktualizuje zaznaczenie warstw
      * @param {Array} newSelection - Nowa lista zaznaczonych warstw
      */
     updateSelection(newSelection) {
-        return this.canvasSelection.updateSelection(newSelection);
-    }
+        const previousSelection = this.selectedLayers.length;
+        this.selectedLayers = newSelection || [];
+        this.selectedLayer = this.selectedLayers.length > 0 ? this.selectedLayers[this.selectedLayers.length - 1] : null;
 
-    /**
-     * Logika aktualizacji zaznaczenia, wywoływana przez panel warstw.
-     */
-    updateSelectionLogic(layer, isCtrlPressed, isShiftPressed, index) {
-        return this.canvasSelection.updateSelectionLogic(layer, isCtrlPressed, isShiftPressed, index);
+        log.debug('Selection updated', {
+            previousCount: previousSelection,
+            newCount: this.selectedLayers.length,
+            selectedLayerIds: this.selectedLayers.map(l => l.id || 'unknown')
+        });
+
+        if (this.onSelectionChange) {
+            this.onSelectionChange();
+        }
     }
 
     /**
@@ -367,87 +314,6 @@ export class Canvas {
         return this.canvasIO.importLatestImage();
     }
 
-    _addAutoRefreshToggle() {
-        let autoRefreshEnabled = false;
-        let lastExecutionStartTime = 0;
-
-        const handleExecutionStart = () => {
-            if (autoRefreshEnabled) {
-                lastExecutionStartTime = Date.now();
-                // Store a snapshot of the context for the upcoming batch
-                this.pendingBatchContext = {
-                    // For the menu position
-                    spawnPosition: {
-                        x: this.width / 2,
-                        y: this.height
-                    },
-                    // For the image placement
-                    outputArea: {
-                        x: 0,
-                        y: 0,
-                        width: this.width,
-                        height: this.height
-                    }
-                };
-                log.debug(`Execution started, pending batch context captured:`, this.pendingBatchContext);
-                this.render(); // Trigger render to show the pending outline immediately
-            }
-        };
-
-        const handleExecutionSuccess = async () => {
-            if (autoRefreshEnabled) {
-                log.info('Auto-refresh triggered, importing latest images.');
-
-                if (!this.pendingBatchContext) {
-                    log.warn("execution_start did not fire, cannot process batch. Awaiting next execution.");
-                    return;
-                }
-
-                // Use the captured output area for image import
-                const newLayers = await this.canvasIO.importLatestImages(
-                    lastExecutionStartTime,
-                    this.pendingBatchContext.outputArea
-                );
-
-                if (newLayers && newLayers.length > 1) {
-                    const newManager = new BatchPreviewManager(
-                        this,
-                        this.pendingBatchContext.spawnPosition,
-                        this.pendingBatchContext.outputArea 
-                    );
-                    this.batchPreviewManagers.push(newManager);
-                    newManager.show(newLayers);
-                }
-                
-                // Consume the context
-                this.pendingBatchContext = null;
-                // Final render to clear the outline if it was the last one
-                this.render();
-            }
-        };
-
-        this.node.addWidget(
-            'toggle',
-            'Auto-refresh after generation',
-            false,
-            (value) => {
-                autoRefreshEnabled = value;
-                log.debug('Auto-refresh toggled:', value);
-            }, {
-                serialize: false
-            }
-        );
-
-        api.addEventListener('execution_start', handleExecutionStart);
-        api.addEventListener('execution_success', handleExecutionSuccess);
-
-        this.node.onRemoved = useChainCallback(this.node.onRemoved, () => {
-            log.info('Node removed, cleaning up auto-refresh listeners.');
-            api.removeEventListener('execution_start', handleExecutionStart);
-            api.removeEventListener('execution_success', handleExecutionSuccess);
-        });
-    }
-
 
     /**
      * Uruchamia edytor masek
@@ -455,7 +321,92 @@ export class Canvas {
      * @param {boolean} sendCleanImage - Czy wysłać czysty obraz (bez maski) do editora
      */
     async startMaskEditor(predefinedMask = null, sendCleanImage = true) {
-        return this.canvasMask.startMaskEditor(predefinedMask, sendCleanImage);
+        log.info('Starting mask editor', {
+            hasPredefinedMask: !!predefinedMask,
+            sendCleanImage,
+            layersCount: this.layers.length
+        });
+
+        this.savedMaskState = await this.saveMaskState();
+        this.maskEditorCancelled = false;
+
+        if (!predefinedMask && this.maskTool && this.maskTool.maskCanvas) {
+            try {
+                log.debug('Creating mask from current mask tool');
+                predefinedMask = await this.createMaskFromCurrentMask();
+                log.debug('Mask created from current mask tool successfully');
+            } catch (error) {
+                log.warn("Could not create mask from current mask:", error);
+            }
+        }
+
+        this.pendingMask = predefinedMask;
+
+        let blob;
+        if (sendCleanImage) {
+            log.debug('Getting flattened canvas as blob (clean image)');
+            blob = await this.canvasLayers.getFlattenedCanvasAsBlob();
+        } else {
+            log.debug('Getting flattened canvas for mask editor (with mask)');
+            blob = await this.canvasLayers.getFlattenedCanvasForMaskEditor();
+        }
+
+        if (!blob) {
+            log.warn("Canvas is empty, cannot open mask editor.");
+            return;
+        }
+
+        log.debug('Canvas blob created successfully, size:', blob.size);
+
+        try {
+            const formData = new FormData();
+            const filename = `layerforge-mask-edit-${+new Date()}.png`;
+            formData.append("image", blob, filename);
+            formData.append("overwrite", "true");
+            formData.append("type", "temp");
+
+            log.debug('Uploading image to server:', filename);
+
+            const response = await api.fetchApi("/upload/image", {
+                method: "POST",
+                body: formData,
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to upload image: ${response.statusText}`);
+            }
+            const data = await response.json();
+
+            log.debug('Image uploaded successfully:', data);
+
+            const img = new Image();
+            img.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
+            await new Promise((res, rej) => {
+                img.onload = res;
+                img.onerror = rej;
+            });
+
+            this.node.imgs = [img];
+
+            log.info('Opening ComfyUI mask editor');
+            ComfyApp.copyToClipspace(this.node);
+            ComfyApp.clipspace_return_node = this.node;
+            ComfyApp.open_maskeditor();
+
+            this.editorWasShowing = false;
+            this.waitWhileMaskEditing();
+
+            this.setupCancelListener();
+
+            if (predefinedMask) {
+                log.debug('Will apply predefined mask when editor is ready');
+                this.waitForMaskEditorAndApplyMask();
+            }
+
+        } catch (error) {
+            log.error("Error preparing image for mask editor:", error);
+            alert(`Error: ${error.message}`);
+        }
     }
 
 
@@ -518,7 +469,14 @@ export class Canvas {
      * Aktualizuje zaznaczenie po operacji historii
      */
     updateSelectionAfterHistory() {
-        return this.canvasSelection.updateSelectionAfterHistory();
+        const newSelectedLayers = [];
+        if (this.selectedLayers) {
+            this.selectedLayers.forEach(sl => {
+                const found = this.layers.find(l => l.id === sl.id);
+                if (found) newSelectedLayers.push(found);
+            });
+        }
+        this.updateSelection(newSelectedLayers);
     }
 
     /**
@@ -562,4 +520,433 @@ export class Canvas {
             this.onStateChange();
         }
     }
+
+
+    /**
+     * Czeka na otwarcie mask editora i automatycznie nakłada predefiniowaną maskę
+     */
+    waitForMaskEditorAndApplyMask() {
+        let attempts = 0;
+        const maxAttempts = 100; // Zwiększone do 10 sekund oczekiwania
+
+        const checkEditor = () => {
+            attempts++;
+
+            if (mask_editor_showing(app)) {
+
+                const useNewEditor = app.ui.settings.getSettingValue('Comfy.MaskEditor.UseNewEditor');
+                let editorReady = false;
+
+                if (useNewEditor) {
+
+                    const MaskEditorDialog = window.MaskEditorDialog;
+                    if (MaskEditorDialog && MaskEditorDialog.instance) {
+
+                        try {
+                            const messageBroker = MaskEditorDialog.instance.getMessageBroker();
+                            if (messageBroker) {
+                                editorReady = true;
+                                log.info("New mask editor detected as ready via MessageBroker");
+                            }
+                        } catch (e) {
+
+                            editorReady = false;
+                        }
+                    }
+
+                    if (!editorReady) {
+                        const maskEditorElement = document.getElementById('maskEditor');
+                        if (maskEditorElement && maskEditorElement.style.display !== 'none') {
+
+                            const canvas = maskEditorElement.querySelector('canvas');
+                            if (canvas) {
+                                editorReady = true;
+                                log.info("New mask editor detected as ready via DOM element");
+                            }
+                        }
+                    }
+                } else {
+
+                    const maskCanvas = document.getElementById('maskCanvas');
+                    editorReady = maskCanvas && maskCanvas.getContext && maskCanvas.width > 0;
+                    if (editorReady) {
+                        log.info("Old mask editor detected as ready");
+                    }
+                }
+
+                if (editorReady) {
+
+                    log.info("Applying mask to editor after", attempts * 100, "ms wait");
+                    setTimeout(() => {
+                        this.applyMaskToEditor(this.pendingMask);
+                        this.pendingMask = null;
+                    }, 300);
+                } else if (attempts < maxAttempts) {
+
+                    if (attempts % 10 === 0) {
+                        log.info("Waiting for mask editor to be ready... attempt", attempts, "/", maxAttempts);
+                    }
+                    setTimeout(checkEditor, 100);
+                } else {
+                    log.warn("Mask editor timeout - editor not ready after", maxAttempts * 100, "ms");
+
+                    log.info("Attempting to apply mask anyway...");
+                    setTimeout(() => {
+                        this.applyMaskToEditor(this.pendingMask);
+                        this.pendingMask = null;
+                    }, 100);
+                }
+            } else if (attempts < maxAttempts) {
+
+                setTimeout(checkEditor, 100);
+            } else {
+                log.warn("Mask editor timeout - editor not showing after", maxAttempts * 100, "ms");
+                this.pendingMask = null;
+            }
+        };
+
+        checkEditor();
+    }
+
+    /**
+     * Nakłada maskę na otwarty mask editor
+     * @param {Image|HTMLCanvasElement} maskData - Dane maski do nałożenia
+     */
+    async applyMaskToEditor(maskData) {
+        try {
+
+            const useNewEditor = app.ui.settings.getSettingValue('Comfy.MaskEditor.UseNewEditor');
+
+            if (useNewEditor) {
+
+                const MaskEditorDialog = window.MaskEditorDialog;
+                if (MaskEditorDialog && MaskEditorDialog.instance) {
+
+                    await this.applyMaskToNewEditor(maskData);
+                } else {
+                    log.warn("New editor setting enabled but instance not found, trying old editor");
+                    await this.applyMaskToOldEditor(maskData);
+                }
+            } else {
+
+                await this.applyMaskToOldEditor(maskData);
+            }
+
+            log.info("Predefined mask applied to mask editor successfully");
+        } catch (error) {
+            log.error("Failed to apply predefined mask to editor:", error);
+
+            try {
+                log.info("Trying alternative mask application method...");
+                await this.applyMaskToOldEditor(maskData);
+                log.info("Alternative method succeeded");
+            } catch (fallbackError) {
+                log.error("Alternative method also failed:", fallbackError);
+            }
+        }
+    }
+
+    /**
+     * Nakłada maskę na nowy mask editor (przez MessageBroker)
+     * @param {Image|HTMLCanvasElement} maskData - Dane maski
+     */
+    async applyMaskToNewEditor(maskData) {
+
+        const MaskEditorDialog = window.MaskEditorDialog;
+        if (!MaskEditorDialog || !MaskEditorDialog.instance) {
+            throw new Error("New mask editor instance not found");
+        }
+
+        const editor = MaskEditorDialog.instance;
+        const messageBroker = editor.getMessageBroker();
+
+        const maskCanvas = await messageBroker.pull('maskCanvas');
+        const maskCtx = await messageBroker.pull('maskCtx');
+        const maskColor = await messageBroker.pull('getMaskColor');
+
+        const processedMask = await this.processMaskForEditor(maskData, maskCanvas.width, maskCanvas.height, maskColor);
+
+        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+        maskCtx.drawImage(processedMask, 0, 0);
+
+        messageBroker.publish('saveState');
+    }
+
+    /**
+     * Nakłada maskę na stary mask editor
+     * @param {Image|HTMLCanvasElement} maskData - Dane maski
+     */
+    async applyMaskToOldEditor(maskData) {
+
+        const maskCanvas = document.getElementById('maskCanvas');
+        if (!maskCanvas) {
+            throw new Error("Old mask editor canvas not found");
+        }
+
+        const maskCtx = maskCanvas.getContext('2d', {willReadFrequently: true});
+
+        const maskColor = {r: 255, g: 255, b: 255};
+        const processedMask = await this.processMaskForEditor(maskData, maskCanvas.width, maskCanvas.height, maskColor);
+
+        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+        maskCtx.drawImage(processedMask, 0, 0);
+    }
+
+    /**
+     * Przetwarza maskę do odpowiedniego formatu dla editora
+     * @param {Image|HTMLCanvasElement} maskData - Oryginalne dane maski
+     * @param {number} targetWidth - Docelowa szerokość
+     * @param {number} targetHeight - Docelowa wysokość
+     * @param {Object} maskColor - Kolor maski {r, g, b}
+     * @returns {HTMLCanvasElement} Przetworzona maska
+     */async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) {
+        // Współrzędne przesunięcia (pan) widoku edytora
+        const panX = this.maskTool.x;
+        const panY = this.maskTool.y;
+
+        log.info("Processing mask for editor:", {
+            sourceSize: {width: maskData.width, height: maskData.height},
+            targetSize: {width: targetWidth, height: targetHeight},
+            viewportPan: {x: panX, y: panY}
+        });
+
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = targetWidth;
+        tempCanvas.height = targetHeight;
+        const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true});
+
+        const sourceX = -panX;
+        const sourceY = -panY;
+
+        tempCtx.drawImage(
+            maskData,       // Źródło: pełna maska z "output area"
+            sourceX,        // sx: Prawdziwa współrzędna X na dużej masce (np. 1000)
+            sourceY,        // sy: Prawdziwa współrzędna Y na dużej masce (np. 1000)
+            targetWidth,    // sWidth: Szerokość wycinanego fragmentu
+            targetHeight,   // sHeight: Wysokość wycinanego fragmentu
+            0,              // dx: Gdzie wkleić w płótnie docelowym (zawsze 0)
+            0,              // dy: Gdzie wkleić w płótnie docelowym (zawsze 0)
+            targetWidth,    // dWidth: Szerokość wklejanego obrazu
+            targetHeight    // dHeight: Wysokość wklejanego obrazu
+        );
+
+        log.info("Mask viewport cropped correctly.", {
+            source: "maskData",
+            cropArea: {x: sourceX, y: sourceY, width: targetWidth, height: targetHeight}
+        });
+
+        // Reszta kodu (zmiana koloru) pozostaje bez zmian
+        const imageData = tempCtx.getImageData(0, 0, targetWidth, targetHeight);
+        const data = imageData.data;
+
+        for (let i = 0; i < data.length; i += 4) {
+            const alpha = data[i + 3];
+            if (alpha > 0) {
+                data[i] = maskColor.r;
+                data[i + 1] = maskColor.g;
+                data[i + 2] = maskColor.b;
+            }
+        }
+
+        tempCtx.putImageData(imageData, 0, 0);
+
+        log.info("Mask processing completed - color applied.");
+        return tempCanvas;
+    }
+
+    /**
+     * Tworzy obiekt Image z obecnej maski canvas
+     * @returns {Promise<Image>} Promise zwracający obiekt Image z maską
+     */
+    async createMaskFromCurrentMask() {
+        if (!this.maskTool || !this.maskTool.maskCanvas) {
+            throw new Error("No mask canvas available");
+        }
+
+        return new Promise((resolve, reject) => {
+            const maskImage = new Image();
+            maskImage.onload = () => resolve(maskImage);
+            maskImage.onerror = reject;
+            maskImage.src = this.maskTool.maskCanvas.toDataURL();
+        });
+    }
+
+    waitWhileMaskEditing() {
+        if (mask_editor_showing(app)) {
+            this.editorWasShowing = true;
+        }
+
+        if (!mask_editor_showing(app) && this.editorWasShowing) {
+            this.editorWasShowing = false;
+            setTimeout(() => this.handleMaskEditorClose(), 100);
+        } else {
+            setTimeout(this.waitWhileMaskEditing.bind(this), 100);
+        }
+    }
+
+    /**
+     * Zapisuje obecny stan maski przed otwarciem editora
+     * @returns {Object} Zapisany stan maski
+     */
+    async saveMaskState() {
+        if (!this.maskTool || !this.maskTool.maskCanvas) {
+            return null;
+        }
+
+        const maskCanvas = this.maskTool.maskCanvas;
+        const savedCanvas = document.createElement('canvas');
+        savedCanvas.width = maskCanvas.width;
+        savedCanvas.height = maskCanvas.height;
+        const savedCtx = savedCanvas.getContext('2d', {willReadFrequently: true});
+        savedCtx.drawImage(maskCanvas, 0, 0);
+
+        return {
+            maskData: savedCanvas,
+            maskPosition: {
+                x: this.maskTool.x,
+                y: this.maskTool.y
+            }
+        };
+    }
+
+    /**
+     * Przywraca zapisany stan maski
+     * @param {Object} savedState - Zapisany stan maski
+     */
+    async restoreMaskState(savedState) {
+        if (!savedState || !this.maskTool) {
+            return;
+        }
+
+        if (savedState.maskData) {
+            const maskCtx = this.maskTool.maskCtx;
+            maskCtx.clearRect(0, 0, this.maskTool.maskCanvas.width, this.maskTool.maskCanvas.height);
+            maskCtx.drawImage(savedState.maskData, 0, 0);
+        }
+
+        if (savedState.maskPosition) {
+            this.maskTool.x = savedState.maskPosition.x;
+            this.maskTool.y = savedState.maskPosition.y;
+        }
+
+        this.render();
+        log.info("Mask state restored after cancel");
+    }
+
+    /**
+     * Konfiguruje nasłuchiwanie na przycisk Cancel w mask editorze
+     */
+    setupCancelListener() {
+        mask_editor_listen_for_cancel(app, () => {
+            log.info("Mask editor cancel button clicked");
+            this.maskEditorCancelled = true;
+        });
+    }
+
+    /**
+     * Sprawdza czy mask editor został anulowany i obsługuje to odpowiednio
+     */
+    async handleMaskEditorClose() {
+        log.info("Handling mask editor close");
+        log.debug("Node object after mask editor close:", this.node);
+
+        if (this.maskEditorCancelled) {
+            log.info("Mask editor was cancelled - restoring original mask state");
+
+            if (this.savedMaskState) {
+                await this.restoreMaskState(this.savedMaskState);
+            }
+
+            this.maskEditorCancelled = false;
+            this.savedMaskState = null;
+
+            return;
+        }
+
+        if (!this.node.imgs || !this.node.imgs.length === 0 || !this.node.imgs[0].src) {
+            log.warn("Mask editor was closed without a result.");
+            return;
+        }
+
+        log.debug("Processing mask editor result, image source:", this.node.imgs[0].src.substring(0, 100) + '...');
+
+        const resultImage = new Image();
+        resultImage.src = this.node.imgs[0].src;
+
+        try {
+            await new Promise((resolve, reject) => {
+                resultImage.onload = resolve;
+                resultImage.onerror = reject;
+            });
+
+            log.debug("Result image loaded successfully", {
+                width: resultImage.width,
+                height: resultImage.height
+            });
+        } catch (error) {
+            log.error("Failed to load image from mask editor.", error);
+            this.node.imgs = [];
+            return;
+        }
+
+        log.debug("Creating temporary canvas for mask processing");
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = this.width;
+        tempCanvas.height = this.height;
+        const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true});
+
+        tempCtx.drawImage(resultImage, 0, 0, this.width, this.height);
+
+        log.debug("Processing image data to create mask");
+        const imageData = tempCtx.getImageData(0, 0, this.width, this.height);
+        const data = imageData.data;
+
+        for (let i = 0; i < data.length; i += 4) {
+            const originalAlpha = data[i + 3];
+            data[i] = 255;
+            data[i + 1] = 255;
+            data[i + 2] = 255;
+            data[i + 3] = 255 - originalAlpha;
+        }
+
+        tempCtx.putImageData(imageData, 0, 0);
+
+        log.debug("Converting processed mask to image");
+        const maskAsImage = new Image();
+        maskAsImage.src = tempCanvas.toDataURL();
+        await new Promise(resolve => maskAsImage.onload = resolve);
+
+        const maskCtx = this.maskTool.maskCtx;
+        const destX = -this.maskTool.x;
+        const destY = -this.maskTool.y;
+
+        log.debug("Applying mask to canvas", {destX, destY});
+
+        maskCtx.globalCompositeOperation = 'source-over';
+        maskCtx.clearRect(destX, destY, this.width, this.height);
+
+        maskCtx.drawImage(maskAsImage, destX, destY);
+
+        this.render();
+        this.saveState();
+
+        log.debug("Creating new preview image");
+        const new_preview = new Image();
+
+        const blob = await this.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
+        if (blob) {
+            new_preview.src = URL.createObjectURL(blob);
+            await new Promise(r => new_preview.onload = r);
+            this.node.imgs = [new_preview];
+            log.debug("New preview image created successfully");
+        } else {
+            this.node.imgs = [];
+            log.warn("Failed to create preview blob");
+        }
+
+        this.render();
+
+        this.savedMaskState = null;
+        log.info("Mask editor result processed successfully");
+    }
 }

js/CanvasIO.js

@@ -744,7 +744,12 @@ export class CanvasIO {
                     img.src = result.image_data;
                 });
 
-                await this.canvas.canvasLayers.addLayerWithImage(img, {}, 'fit');
+                await this.canvas.canvasLayers.addLayerWithImage(img, {
+                    x: 0,
+                    y: 0,
+                    width: this.canvas.width,
+                    height: this.canvas.height,
+                });
                 log.info("Latest image imported and placed on canvas successfully.");
                 return true;
             } else {
@@ -756,41 +761,4 @@ export class CanvasIO {
             return false;
         }
     }
-
-    async importLatestImages(sinceTimestamp, targetArea = null) {
-        try {
-            log.info(`Fetching latest images since ${sinceTimestamp}...`);
-            const response = await fetch(`/layerforge/get-latest-images/${sinceTimestamp}`);
-            const result = await response.json();
-
-            if (result.success && result.images && result.images.length > 0) {
-                log.info(`Received ${result.images.length} new images, adding to canvas.`);
-                const newLayers = [];
-
-                for (const imageData of result.images) {
-                    const img = new Image();
-                    await new Promise((resolve, reject) => {
-                        img.onload = resolve;
-                        img.onerror = reject;
-                        img.src = imageData;
-                    });
-                    const newLayer = await this.canvas.canvasLayers.addLayerWithImage(img, {}, 'fit', targetArea);
-                    newLayers.push(newLayer);
-                }
-                log.info("All new images imported and placed on canvas successfully.");
-                return newLayers;
-
-            } else if (result.success) {
-                log.info("No new images found since last generation.");
-                return [];
-            }
-            else {
-                throw new Error(result.error || "Failed to fetch latest images.");
-            }
-        } catch (error) {
-            log.error("Error importing latest images:", error);
-            alert(`Failed to import latest images: ${error.message}`);
-            return [];
-        }
-    }
 }

js/CanvasInteractions.js

@@ -19,7 +19,6 @@ export class CanvasInteractions {
             hasClonedInDrag: false,
             lastClickTime: 0,
             transformingLayer: null,
-            keyMovementInProgress: false, // Flaga do śledzenia ruchu klawiszami
         };
         this.originalLayerPositions = new Map();
         this.interaction.canvasResizeRect = null;
@@ -70,39 +69,47 @@ export class CanvasInteractions {
         const worldCoords = this.canvas.getMouseWorldCoordinates(e);
         const viewCoords = this.canvas.getMouseViewCoordinates(e);
 
-        if (this.interaction.mode === 'drawingMask') {
-            this.canvas.maskTool.handleMouseDown(worldCoords, viewCoords);
+        if (this.canvas.maskTool.isActive) {
+            if (e.button === 1) {
+                this.startPanning(e);
+            } else {
+                this.canvas.maskTool.handleMouseDown(worldCoords, viewCoords);
+            }
             this.canvas.render();
             return;
         }
 
-        // --- Ostateczna, poprawna kolejność sprawdzania ---
-
-        // 1. Akcje globalne z modyfikatorami (mają najwyższy priorytet)
+        const currentTime = Date.now();
         if (e.shiftKey && e.ctrlKey) {
             this.startCanvasMove(worldCoords);
+            this.canvas.render();
             return;
         }
+
+        if (currentTime - this.interaction.lastClickTime < 300) {
+            this.canvas.updateSelection([]);
+            this.canvas.selectedLayer = null;
+            this.resetInteractionState();
+            this.canvas.render();
+            return;
+        }
+        this.interaction.lastClickTime = currentTime;
+
+        if (e.button === 2) {
+            const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(worldCoords.x, worldCoords.y);
+            if (clickedLayerResult && this.canvas.selectedLayers.includes(clickedLayerResult.layer)) {
+                e.preventDefault(); // Prevent context menu
+                this.canvas.canvasLayers.showBlendModeMenu(viewCoords.x ,viewCoords.y);
+                return;
+            }
+        }
+
         if (e.shiftKey) {
             this.startCanvasResize(worldCoords);
+            this.canvas.render();
             return;
         }
 
-        // 2. Inne przyciski myszy
-        if (e.button === 2) { // Prawy przycisk myszy
-            const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(worldCoords.x, worldCoords.y);
-            if (clickedLayerResult && this.canvas.canvasSelection.selectedLayers.includes(clickedLayerResult.layer)) {
-                e.preventDefault();
-                this.canvas.canvasLayers.showBlendModeMenu(viewCoords.x, viewCoords.y);
-            }
-            return; 
-        }
-        if (e.button !== 0) { // Środkowy przycisk
-            this.startPanning(e);
-            return;
-        }
-
-        // 3. Interakcje z elementami na płótnie (lewy przycisk)
         const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
         if (transformTarget) {
             this.startLayerTransform(transformTarget.layer, transformTarget.handle, worldCoords);
@@ -111,37 +118,33 @@ export class CanvasInteractions {
 
         const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(worldCoords.x, worldCoords.y);
         if (clickedLayerResult) {
-            this.prepareForDrag(clickedLayerResult.layer, worldCoords);
+            this.startLayerDrag(clickedLayerResult.layer, worldCoords);
             return;
         }
         
-        // 4. Domyślna akcja na tle (lewy przycisk bez modyfikatorów)
-        this.startPanningOrClearSelection(e);
+        this.startPanning(e);
+
+        this.canvas.render();
     }
 
     handleMouseMove(e) {
         const worldCoords = this.canvas.getMouseWorldCoordinates(e);
         const viewCoords = this.canvas.getMouseViewCoordinates(e);
-        this.canvas.lastMousePosition = worldCoords; // Zawsze aktualizuj ostatnią pozycję myszy
+        this.canvas.lastMousePosition = worldCoords;
 
-        // Sprawdź, czy rozpocząć przeciąganie
-        if (this.interaction.mode === 'potential-drag') {
-            const dx = worldCoords.x - this.interaction.dragStart.x;
-            const dy = worldCoords.y - this.interaction.dragStart.y;
-            if (Math.sqrt(dx * dx + dy * dy) > 3) { // Próg 3 pikseli
-                this.interaction.mode = 'dragging';
-                this.originalLayerPositions.clear();
-                this.canvas.canvasSelection.selectedLayers.forEach(l => {
-                    this.originalLayerPositions.set(l, {x: l.x, y: l.y});
-                });
+        if (this.canvas.maskTool.isActive) {
+            if (this.interaction.mode === 'panning') {
+                this.panViewport(e);
+                return;
             }
+            this.canvas.maskTool.handleMouseMove(worldCoords, viewCoords);
+            if (this.canvas.maskTool.isDrawing) {
+                this.canvas.render();
+            }
+            return;
         }
 
         switch (this.interaction.mode) {
-            case 'drawingMask':
-                this.canvas.maskTool.handleMouseMove(worldCoords, viewCoords);
-                this.canvas.render();
-                break;
             case 'panning':
                 this.panViewport(e);
                 break;
@@ -168,30 +171,30 @@ export class CanvasInteractions {
 
     handleMouseUp(e) {
         const viewCoords = this.canvas.getMouseViewCoordinates(e);
-        if (this.interaction.mode === 'drawingMask') {
-            this.canvas.maskTool.handleMouseUp(viewCoords);
+        if (this.canvas.maskTool.isActive) {
+            if (this.interaction.mode === 'panning') {
+                this.resetInteractionState();
+            } else {
+                this.canvas.maskTool.handleMouseUp(viewCoords);
+            }
             this.canvas.render();
             return;
         }
 
+        const interactionEnded = this.interaction.mode !== 'none' && this.interaction.mode !== 'panning';
+
         if (this.interaction.mode === 'resizingCanvas') {
             this.finalizeCanvasResize();
-        }
-        if (this.interaction.mode === 'movingCanvas') {
+        } else if (this.interaction.mode === 'movingCanvas') {
             this.finalizeCanvasMove();
         }
+        this.resetInteractionState();
+        this.canvas.render();
 
-        // Zapisz stan tylko, jeśli faktycznie doszło do zmiany (przeciąganie, transformacja, duplikacja)
-        const stateChangingInteraction = ['dragging', 'resizing', 'rotating'].includes(this.interaction.mode);
-        const duplicatedInDrag = this.interaction.hasClonedInDrag;
-
-        if (stateChangingInteraction || duplicatedInDrag) {
+        if (interactionEnded) {
             this.canvas.saveState();
             this.canvas.canvasState.saveStateToDB(true);
         }
-
-        this.resetInteractionState();
-        this.canvas.render();
     }
 
     handleMouseLeave(e) {
@@ -242,22 +245,10 @@ export class CanvasInteractions {
             this.canvas.viewport.y = worldCoords.y - (mouseBufferY / this.canvas.viewport.zoom);
         } else if (this.canvas.selectedLayer) {
             const rotationStep = 5 * (e.deltaY > 0 ? -1 : 1);
-            const direction = e.deltaY < 0 ? 1 : -1; // 1 = up/right, -1 = down/left
 
-            this.canvas.canvasSelection.selectedLayers.forEach(layer => {
+            this.canvas.selectedLayers.forEach(layer => {
                 if (e.shiftKey) {
-                    // Nowy skrót: Shift + Ctrl + Kółko do przyciągania do absolutnych wartości
-                    if (e.ctrlKey) {
-                        const snapAngle = 5;
-                        if (direction > 0) { // Obrót w górę/prawo
-                            layer.rotation = Math.ceil((layer.rotation + 0.1) / snapAngle) * snapAngle;
-                        } else { // Obrót w dół/lewo
-                            layer.rotation = Math.floor((layer.rotation - 0.1) / snapAngle) * snapAngle;
-                        }
-                    } else {
-                        // Stara funkcjonalność: Shift + Kółko obraca o stały krok
-                        layer.rotation += rotationStep;
-                    }
+                    layer.rotation += rotationStep;
                 } else {
                     const oldWidth = layer.width;
                     const oldHeight = layer.height;
@@ -316,78 +307,112 @@ export class CanvasInteractions {
         }
         this.canvas.render();
         if (!this.canvas.maskTool.isActive) {
-            this.canvas.requestSaveState(true); // Użyj opóźnionego zapisu
+            this.canvas.saveState(true);
         }
     }
 
     handleKeyDown(e) {
+        if (this.canvas.maskTool.isActive) {
+            if (e.key === 'Control') this.interaction.isCtrlPressed = true;
+            if (e.key === 'Alt') {
+                this.interaction.isAltPressed = true;
+                e.preventDefault();
+            }
+
+            if (e.ctrlKey) {
+                if (e.key.toLowerCase() === 'z') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (e.shiftKey) {
+                        this.canvas.canvasState.redo();
+                    } else {
+                        this.canvas.canvasState.undo();
+                    }
+                    return;
+                }
+                if (e.key.toLowerCase() === 'y') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.canvas.canvasState.redo();
+                    return;
+                }
+            }
+            return;
+        }
+
         if (e.key === 'Control') this.interaction.isCtrlPressed = true;
         if (e.key === 'Alt') {
             this.interaction.isAltPressed = true;
             e.preventDefault();
         }
 
-        // Globalne skróty (Undo/Redo/Copy/Paste)
-        if (e.ctrlKey || e.metaKey) {
-            let handled = true;
-            switch (e.key.toLowerCase()) {
-                case 'z':
-                    if (e.shiftKey) {
-                        this.canvas.redo();
-                    } else {
-                        this.canvas.undo();
-                    }
-                    break;
-                case 'y':
-                    this.canvas.redo();
-                    break;
-                case 'c':
-                    if (this.canvas.canvasSelection.selectedLayers.length > 0) {
-                        this.canvas.canvasLayers.copySelectedLayers();
-                    }
-                    break;
-                default:
-                    handled = false;
-                    break;
-            }
-            if (handled) {
+        if (e.ctrlKey) {
+            if (e.key.toLowerCase() === 'z') {
                 e.preventDefault();
                 e.stopPropagation();
+                if (e.shiftKey) {
+                    this.canvas.canvasState.redo();
+                } else {
+                    this.canvas.canvasState.undo();
+                }
+                return;
+            }
+            if (e.key.toLowerCase() === 'y') {
+                e.preventDefault();
+                e.stopPropagation();
+                this.canvas.canvasState.redo();
+                return;
+            }
+            if (e.key.toLowerCase() === 'c') {
+                if (this.canvas.selectedLayers.length > 0) {
+                    this.canvas.canvasLayers.copySelectedLayers();
+                }
+                return;
+            }
+            if (e.key.toLowerCase() === 'v') {
+
+
                 return;
             }
         }
 
-        // Skróty kontekstowe (zależne od zaznaczenia)
-        if (this.canvas.canvasSelection.selectedLayers.length > 0) {
-            const step = e.shiftKey ? 10 : 1;
-            let needsRender = false;
-            
-            // Używamy e.code dla spójności i niezależności od układu klawiatury
-            const movementKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'BracketLeft', 'BracketRight'];
-            if (movementKeys.includes(e.code)) {
+        if (this.canvas.selectedLayer) {
+            if (e.key === 'Delete') {
                 e.preventDefault();
                 e.stopPropagation();
-                this.interaction.keyMovementInProgress = true;
-
-                if (e.code === 'ArrowLeft') this.canvas.canvasSelection.selectedLayers.forEach(l => l.x -= step);
-                if (e.code === 'ArrowRight') this.canvas.canvasSelection.selectedLayers.forEach(l => l.x += step);
-                if (e.code === 'ArrowUp') this.canvas.canvasSelection.selectedLayers.forEach(l => l.y -= step);
-                if (e.code === 'ArrowDown') this.canvas.canvasSelection.selectedLayers.forEach(l => l.y += step);
-                if (e.code === 'BracketLeft') this.canvas.canvasSelection.selectedLayers.forEach(l => l.rotation -= step);
-                if (e.code === 'BracketRight') this.canvas.canvasSelection.selectedLayers.forEach(l => l.rotation += step);
-                
-                needsRender = true;
+                this.canvas.saveState();
+                this.canvas.layers = this.canvas.layers.filter(l => !this.canvas.selectedLayers.includes(l));
+                this.canvas.updateSelection([]);
+                this.canvas.render();
+                return;
             }
 
-            if (e.key === 'Delete' || e.key === 'Backspace') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.canvas.canvasSelection.removeSelectedLayers();
-                return;
+            const step = e.shiftKey ? 10 : 1;
+            let needsRender = false;
+            switch (e.code) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                case 'ArrowUp':
+                case 'ArrowDown':
+                case 'BracketLeft':
+                case 'BracketRight':
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (e.code === 'ArrowLeft') this.canvas.selectedLayers.forEach(l => l.x -= step);
+                    if (e.code === 'ArrowRight') this.canvas.selectedLayers.forEach(l => l.x += step);
+                    if (e.code === 'ArrowUp') this.canvas.selectedLayers.forEach(l => l.y -= step);
+                    if (e.code === 'ArrowDown') this.canvas.selectedLayers.forEach(l => l.y += step);
+                    if (e.code === 'BracketLeft') this.canvas.selectedLayers.forEach(l => l.rotation -= step);
+                    if (e.code === 'BracketRight') this.canvas.selectedLayers.forEach(l => l.rotation += step);
+
+                    needsRender = true;
+                    break;
             }
 
             if (needsRender) {
                 this.canvas.render();
+                this.canvas.saveState();
             }
         }
     }
@@ -395,12 +420,6 @@ export class CanvasInteractions {
     handleKeyUp(e) {
         if (e.key === 'Control') this.interaction.isCtrlPressed = false;
         if (e.key === 'Alt') this.interaction.isAltPressed = false;
-
-        const movementKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'BracketLeft', 'BracketRight'];
-        if (movementKeys.includes(e.code) && this.interaction.keyMovementInProgress) {
-            this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
-            this.interaction.keyMovementInProgress = false;
-        }
     }
 
     updateCursor(worldCoords) {
@@ -447,34 +466,31 @@ export class CanvasInteractions {
         this.canvas.render();
     }
 
-    prepareForDrag(layer, worldCoords) {
-        // Zaktualizuj zaznaczenie, ale nie zapisuj stanu
+    startLayerDrag(layer, worldCoords) {
+        this.interaction.mode = 'dragging';
+        this.interaction.dragStart = {...worldCoords};
+
+        let currentSelection = [...this.canvas.selectedLayers];
+
         if (this.interaction.isCtrlPressed) {
-            const index = this.canvas.canvasSelection.selectedLayers.indexOf(layer);
+            const index = currentSelection.indexOf(layer);
             if (index === -1) {
-                this.canvas.canvasSelection.updateSelection([...this.canvas.canvasSelection.selectedLayers, layer]);
+                currentSelection.push(layer);
             } else {
-                const newSelection = this.canvas.canvasSelection.selectedLayers.filter(l => l !== layer);
-                this.canvas.canvasSelection.updateSelection(newSelection);
+                currentSelection.splice(index, 1);
             }
         } else {
-            if (!this.canvas.canvasSelection.selectedLayers.includes(layer)) {
-                this.canvas.canvasSelection.updateSelection([layer]);
+            if (!currentSelection.includes(layer)) {
+                currentSelection = [layer];
             }
         }
 
-        this.interaction.mode = 'potential-drag';
-        this.interaction.dragStart = {...worldCoords};
-    }
+        this.canvas.updateSelection(currentSelection);
 
-    startPanningOrClearSelection(e) {
-        // Ta funkcja jest teraz wywoływana tylko gdy kliknięto na tło bez modyfikatorów.
-        // Domyślna akcja: wyczyść zaznaczenie i rozpocznij panoramowanie.
-        if (!this.interaction.isCtrlPressed) {
-            this.canvas.canvasSelection.updateSelection([]);
-        }
-        this.interaction.mode = 'panning';
-        this.interaction.panStart = {x: e.clientX, y: e.clientY};
+        this.originalLayerPositions.clear();
+        this.canvas.selectedLayers.forEach(l => {
+            this.originalLayerPositions.set(l, {x: l.x, y: l.y});
+        });
     }
 
     startCanvasResize(worldCoords) {
@@ -529,39 +545,15 @@ export class CanvasInteractions {
 
             this.canvas.maskTool.updatePosition(-finalX, -finalY);
 
-            // If a batch generation is in progress, update the captured context as well
-            if (this.canvas.pendingBatchContext) {
-                this.canvas.pendingBatchContext.outputArea.x -= finalX;
-                this.canvas.pendingBatchContext.outputArea.y -= finalY;
-                
-                // Also update the menu spawn position to keep it relative
-                this.canvas.pendingBatchContext.spawnPosition.x -= finalX;
-                this.canvas.pendingBatchContext.spawnPosition.y -= finalY;
-                log.debug("Updated pending batch context during canvas move:", this.canvas.pendingBatchContext);
-            }
-
-            // Also move any active batch preview menus
-            if (this.canvas.batchPreviewManagers && this.canvas.batchPreviewManagers.length > 0) {
-                this.canvas.batchPreviewManagers.forEach(manager => {
-                    manager.worldX -= finalX;
-                    manager.worldY -= finalY;
-                    if (manager.generationArea) {
-                        manager.generationArea.x -= finalX;
-                        manager.generationArea.y -= finalY;
-                    }
-                });
-            }
-
             this.canvas.viewport.x -= finalX;
             this.canvas.viewport.y -= finalY;
         }
         this.canvas.render();
-        this.canvas.saveState();
     }
 
     startPanning(e) {
         if (!this.interaction.isCtrlPressed) {
-            this.canvas.canvasSelection.updateSelection([]);
+            this.canvas.updateSelection([]);
         }
         this.interaction.mode = 'panning';
         this.interaction.panStart = {x: e.clientX, y: e.clientY};
@@ -577,13 +569,20 @@ export class CanvasInteractions {
     }
 
     dragLayers(worldCoords) {
-        if (this.interaction.isAltPressed && !this.interaction.hasClonedInDrag && this.canvas.canvasSelection.selectedLayers.length > 0) {
-            // Scentralizowana logika duplikowania
-            const newLayers = this.canvas.canvasSelection.duplicateSelectedLayers();
-            
-            // Zresetuj pozycje przeciągania dla nowych, zduplikowanych warstw
+        if (this.interaction.isAltPressed && !this.interaction.hasClonedInDrag && this.canvas.selectedLayers.length > 0) {
+            const newLayers = [];
+            this.canvas.selectedLayers.forEach(layer => {
+                const newLayer = {
+                    ...layer,
+                    zIndex: this.canvas.layers.length,
+                };
+                this.canvas.layers.push(newLayer);
+                newLayers.push(newLayer);
+            });
+            this.canvas.updateSelection(newLayers);
+            this.canvas.selectedLayer = newLayers.length > 0 ? newLayers[newLayers.length - 1] : null;
             this.originalLayerPositions.clear();
-            newLayers.forEach(l => {
+            this.canvas.selectedLayers.forEach(l => {
                 this.originalLayerPositions.set(l, {x: l.x, y: l.y});
             });
             this.interaction.hasClonedInDrag = true;
@@ -592,11 +591,11 @@ export class CanvasInteractions {
         const totalDy = worldCoords.y - this.interaction.dragStart.y;
         let finalDx = totalDx, finalDy = totalDy;
 
-        if (this.interaction.isCtrlPressed && this.canvas.canvasSelection.selectedLayer) {
-            const originalPos = this.originalLayerPositions.get(this.canvas.canvasSelection.selectedLayer);
+        if (this.interaction.isCtrlPressed && this.canvas.selectedLayer) {
+            const originalPos = this.originalLayerPositions.get(this.canvas.selectedLayer);
             if (originalPos) {
                 const tempLayerForSnap = {
-                    ...this.canvas.canvasSelection.selectedLayer,
+                    ...this.canvas.selectedLayer,
                     x: originalPos.x + totalDx,
                     y: originalPos.y + totalDy
                 };
@@ -606,7 +605,7 @@ export class CanvasInteractions {
             }
         }
 
-        this.canvas.canvasSelection.selectedLayers.forEach(layer => {
+        this.canvas.selectedLayers.forEach(layer => {
             const originalPos = this.originalLayerPositions.get(layer);
             if (originalPos) {
                 layer.x = originalPos.x + finalDx;
@@ -721,43 +720,20 @@ export class CanvasInteractions {
         if (this.interaction.canvasResizeRect && this.interaction.canvasResizeRect.width > 1 && this.interaction.canvasResizeRect.height > 1) {
             const newWidth = Math.round(this.interaction.canvasResizeRect.width);
             const newHeight = Math.round(this.interaction.canvasResizeRect.height);
-            const finalX = this.interaction.canvasResizeRect.x;
-            const finalY = this.interaction.canvasResizeRect.y;
+            const rectX = this.interaction.canvasResizeRect.x;
+            const rectY = this.interaction.canvasResizeRect.y;
 
             this.canvas.updateOutputAreaSize(newWidth, newHeight);
 
             this.canvas.layers.forEach(layer => {
-                layer.x -= finalX;
-                layer.y -= finalY;
+                layer.x -= rectX;
+                layer.y -= rectY;
             });
 
-            this.canvas.maskTool.updatePosition(-finalX, -finalY);
+            this.canvas.maskTool.updatePosition(-rectX, -rectY);
 
-            // If a batch generation is in progress, update the captured context as well
-            if (this.canvas.pendingBatchContext) {
-                this.canvas.pendingBatchContext.outputArea.x -= finalX;
-                this.canvas.pendingBatchContext.outputArea.y -= finalY;
-                
-                // Also update the menu spawn position to keep it relative
-                this.canvas.pendingBatchContext.spawnPosition.x -= finalX;
-                this.canvas.pendingBatchContext.spawnPosition.y -= finalY;
-                log.debug("Updated pending batch context during canvas resize:", this.canvas.pendingBatchContext);
-            }
-
-            // Also move any active batch preview menus
-            if (this.canvas.batchPreviewManagers && this.canvas.batchPreviewManagers.length > 0) {
-                this.canvas.batchPreviewManagers.forEach(manager => {
-                    manager.worldX -= finalX;
-                    manager.worldY -= finalY;
-                    if (manager.generationArea) {
-                        manager.generationArea.x -= finalX;
-                        manager.generationArea.y -= finalY;
-                    }
-                });
-            }
-
-            this.canvas.viewport.x -= finalX;
-            this.canvas.viewport.y -= finalY;
+            this.canvas.viewport.x -= rectX;
+            this.canvas.viewport.y -= rectY;
         }
     }
 

js/CanvasLayers.js

@@ -33,9 +33,9 @@ export class CanvasLayers {
     }
 
     async copySelectedLayers() {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return;
+        if (this.canvas.selectedLayers.length === 0) return;
 
-        this.internalClipboard = this.canvas.canvasSelection.selectedLayers.map(layer => ({...layer}));
+        this.internalClipboard = this.canvas.selectedLayers.map(layer => ({...layer}));
         log.info(`Copied ${this.internalClipboard.length} layer(s) to internal clipboard.`);
 
         const blob = await this.getFlattenedSelectionAsBlob();
@@ -128,12 +128,6 @@ export class CanvasLayers {
 
         this.canvas.updateSelection(newLayers);
         this.canvas.render();
-
-        // Notify the layers panel to update its view
-        if (this.canvas.canvasLayersPanel) {
-            this.canvas.canvasLayersPanel.onLayersChanged();
-        }
-
         log.info(`Pasted ${newLayers.length} layer(s) at mouse position (${mouseX}, ${mouseY}).`);
     }
 
@@ -149,12 +143,12 @@ export class CanvasLayers {
     }
 
 
-    addLayerWithImage = withErrorHandling(async (image, layerProps = {}, addMode = 'default', targetArea = null) => {
+    addLayerWithImage = withErrorHandling(async (image, layerProps = {}, addMode = 'default') => {
         if (!image) {
             throw createValidationError("Image is required for layer creation");
         }
 
-        log.debug("Adding layer with image:", image, "with mode:", addMode, "targetArea:", targetArea);
+        log.debug("Adding layer with image:", image, "with mode:", addMode);
         const imageId = generateUUID();
         await saveImage(imageId, image.src);
         this.canvas.imageCache.set(imageId, image.src);
@@ -163,25 +157,21 @@ export class CanvasLayers {
         let finalHeight = image.height;
         let finalX, finalY;
 
-        // Use the targetArea if provided, otherwise default to the current canvas dimensions
-        const area = targetArea || { width: this.canvas.width, height: this.canvas.height, x: 0, y: 0 };
-
         if (addMode === 'fit') {
-            const scale = Math.min(area.width / image.width, area.height / image.height);
+            const scale = Math.min(this.canvas.width / image.width, this.canvas.height / image.height);
             finalWidth = image.width * scale;
             finalHeight = image.height * scale;
-            finalX = area.x + (area.width - finalWidth) / 2;
-            finalY = area.y + (area.height - finalHeight) / 2;
+            finalX = (this.canvas.width - finalWidth) / 2;
+            finalY = (this.canvas.height - finalHeight) / 2;
         } else if (addMode === 'mouse') {
             finalX = this.canvas.lastMousePosition.x - finalWidth / 2;
             finalY = this.canvas.lastMousePosition.y - finalHeight / 2;
         } else { // 'center' or 'default'
-            finalX = area.x + (area.width - finalWidth) / 2;
-            finalY = area.y + (area.height - finalHeight) / 2;
+            finalX = (this.canvas.width - finalWidth) / 2;
+            finalY = (this.canvas.height - finalHeight) / 2;
         }
 
         const layer = {
-            id: generateUUID(),
             image: image,
             imageId: imageId,
             x: finalX,
@@ -202,11 +192,6 @@ export class CanvasLayers {
         this.canvas.render();
         this.canvas.saveState();
 
-        // Notify the layers panel to update its view
-        if (this.canvas.canvasLayersPanel) {
-            this.canvas.canvasLayersPanel.onLayersChanged();
-        }
-
         log.info("Layer added successfully");
         return layer;
     }, 'CanvasLayers.addLayerWithImage');
@@ -215,93 +200,40 @@ export class CanvasLayers {
         return this.addLayerWithImage(image);
     }
 
-    /**
-     * Centralna funkcja do przesuwania warstw.
-     * @param {Array} layersToMove - Tablica warstw do przesunięcia.
-     * @param {Object} options - Opcje przesunięcia, np. { direction: 'up' } lub { toIndex: 3 }
-     */
-    moveLayers(layersToMove, options = {}) {
-        if (!layersToMove || layersToMove.length === 0) return;
-
-        let finalLayers;
-
-        if (options.direction) {
-            // Logika dla 'up' i 'down'
-            const allLayers = [...this.canvas.layers];
-            const selectedIndices = new Set(layersToMove.map(l => allLayers.indexOf(l)));
-            
-            if (options.direction === 'up') {
-                const sorted = Array.from(selectedIndices).sort((a, b) => b - a);
-                sorted.forEach(index => {
-                    const targetIndex = index + 1;
-                    if (targetIndex < allLayers.length && !selectedIndices.has(targetIndex)) {
-                        [allLayers[index], allLayers[targetIndex]] = [allLayers[targetIndex], allLayers[index]];
-                    }
-                });
-            } else if (options.direction === 'down') {
-                const sorted = Array.from(selectedIndices).sort((a, b) => a - b);
-                sorted.forEach(index => {
-                    const targetIndex = index - 1;
-                    if (targetIndex >= 0 && !selectedIndices.has(targetIndex)) {
-                        [allLayers[index], allLayers[targetIndex]] = [allLayers[targetIndex], allLayers[index]];
-                    }
-                });
-            }
-            finalLayers = allLayers;
-            
-        } else if (options.toIndex !== undefined) {
-            // Logika dla przeciągania i upuszczania (z panelu)
-            const displayedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
-            const reorderedFinal = [];
-            let inserted = false;
-
-            for (let i = 0; i < displayedLayers.length; i++) {
-                if (i === options.toIndex) {
-                    reorderedFinal.push(...layersToMove);
-                    inserted = true;
-                }
-                const currentLayer = displayedLayers[i];
-                if (!layersToMove.includes(currentLayer)) {
-                    reorderedFinal.push(currentLayer);
-                }
-            }
-            if (!inserted) {
-                reorderedFinal.push(...layersToMove);
-            }
-            finalLayers = reorderedFinal;
-        } else {
-            log.warn("Invalid options for moveLayers", options);
-            return;
-        }
-
-        // Zunifikowana końcówka: aktualizacja zIndex i stanu aplikacji
-        const totalLayers = finalLayers.length;
-        finalLayers.forEach((layer, index) => {
-            // Jeśli przyszły z panelu, zIndex jest odwrócony
-            const zIndex = (options.toIndex !== undefined) ? (totalLayers - 1 - index) : index;
-            layer.zIndex = zIndex;
-        });
-
-        this.canvas.layers = finalLayers;
-        this.canvas.layers.sort((a, b) => a.zIndex - b.zIndex);
-
-        if (this.canvas.canvasLayersPanel) {
-            this.canvas.canvasLayersPanel.onLayersChanged();
-        }
-
-        this.canvas.render();
-        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
-        log.info(`Moved ${layersToMove.length} layer(s).`);
-    }
-
     moveLayerUp() {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return;
-        this.moveLayers(this.canvas.canvasSelection.selectedLayers, { direction: 'up' });
+        if (this.canvas.selectedLayers.length === 0) return;
+        const selectedIndicesSet = new Set(this.canvas.selectedLayers.map(layer => this.canvas.layers.indexOf(layer)));
+
+        const sortedIndices = Array.from(selectedIndicesSet).sort((a, b) => b - a);
+
+        sortedIndices.forEach(index => {
+            const targetIndex = index + 1;
+
+            if (targetIndex < this.canvas.layers.length && !selectedIndicesSet.has(targetIndex)) {
+                [this.canvas.layers[index], this.canvas.layers[targetIndex]] = [this.canvas.layers[targetIndex], this.canvas.layers[index]];
+            }
+        });
+        this.canvas.layers.forEach((layer, i) => layer.zIndex = i);
+        this.canvas.render();
+        this.canvas.saveState();
     }
 
     moveLayerDown() {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return;
-        this.moveLayers(this.canvas.canvasSelection.selectedLayers, { direction: 'down' });
+        if (this.canvas.selectedLayers.length === 0) return;
+        const selectedIndicesSet = new Set(this.canvas.selectedLayers.map(layer => this.canvas.layers.indexOf(layer)));
+
+        const sortedIndices = Array.from(selectedIndicesSet).sort((a, b) => a - b);
+
+        sortedIndices.forEach(index => {
+            const targetIndex = index - 1;
+
+            if (targetIndex >= 0 && !selectedIndicesSet.has(targetIndex)) {
+                [this.canvas.layers[index], this.canvas.layers[targetIndex]] = [this.canvas.layers[targetIndex], this.canvas.layers[index]];
+            }
+        });
+        this.canvas.layers.forEach((layer, i) => layer.zIndex = i);
+        this.canvas.render();
+        this.canvas.saveState();
     }
 
     /**
@@ -309,14 +241,14 @@ export class CanvasLayers {
      * @param {number} scale - Skala zmiany rozmiaru
      */
     resizeLayer(scale) {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return;
+        if (this.canvas.selectedLayers.length === 0) return;
 
-        this.canvas.canvasSelection.selectedLayers.forEach(layer => {
+        this.canvas.selectedLayers.forEach(layer => {
             layer.width *= scale;
             layer.height *= scale;
         });
         this.canvas.render();
-        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
+        this.canvas.saveState();
     }
 
     /**
@@ -324,13 +256,13 @@ export class CanvasLayers {
      * @param {number} angle - Kąt obrotu w stopniach
      */
     rotateLayer(angle) {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return;
+        if (this.canvas.selectedLayers.length === 0) return;
 
-        this.canvas.canvasSelection.selectedLayers.forEach(layer => {
+        this.canvas.selectedLayers.forEach(layer => {
             layer.rotation += angle;
         });
         this.canvas.render();
-        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
+        this.canvas.saveState();
     }
 
     getLayerAtPosition(worldX, worldY) {
@@ -362,9 +294,9 @@ export class CanvasLayers {
     }
 
     async mirrorHorizontal() {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return;
+        if (this.canvas.selectedLayers.length === 0) return;
 
-        const promises = this.canvas.canvasSelection.selectedLayers.map(layer => {
+        const promises = this.canvas.selectedLayers.map(layer => {
             return new Promise(resolve => {
                 const tempCanvas = document.createElement('canvas');
                 const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
@@ -386,13 +318,13 @@ export class CanvasLayers {
 
         await Promise.all(promises);
         this.canvas.render();
-        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
+        this.canvas.saveState();
     }
 
     async mirrorVertical() {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return;
+        if (this.canvas.selectedLayers.length === 0) return;
 
-        const promises = this.canvas.canvasSelection.selectedLayers.map(layer => {
+        const promises = this.canvas.selectedLayers.map(layer => {
             return new Promise(resolve => {
                 const tempCanvas = document.createElement('canvas');
                 const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
@@ -414,7 +346,7 @@ export class CanvasLayers {
 
         await Promise.all(promises);
         this.canvas.render();
-        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
+        this.canvas.saveState();
     }
 
     async getLayerImageData(layer) {
@@ -504,11 +436,11 @@ export class CanvasLayers {
     }
 
     getHandleAtPosition(worldX, worldY) {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) return null;
+        if (this.canvas.selectedLayers.length === 0) return null;
 
         const handleRadius = 8 / this.canvas.viewport.zoom;
-        for (let i = this.canvas.canvasSelection.selectedLayers.length - 1; i >= 0; i--) {
-            const layer = this.canvas.canvasSelection.selectedLayers[i];
+        for (let i = this.canvas.selectedLayers.length - 1; i >= 0; i--) {
+            const layer = this.canvas.selectedLayers[i];
             const handles = this.getHandles(layer);
 
             for (const key in handles) {
@@ -963,13 +895,13 @@ export class CanvasLayers {
     }
 
     async getFlattenedSelectionAsBlob() {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) {
+        if (this.canvas.selectedLayers.length === 0) {
             return null;
         }
 
         return new Promise((resolve) => {
             let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-            this.canvas.canvasSelection.selectedLayers.forEach(layer => {
+            this.canvas.selectedLayers.forEach(layer => {
                 const centerX = layer.x + layer.width / 2;
                 const centerY = layer.y + layer.height / 2;
                 const rad = layer.rotation * Math.PI / 180;
@@ -1011,7 +943,7 @@ export class CanvasLayers {
 
             tempCtx.translate(-minX, -minY);
 
-            const sortedSelection = [...this.canvas.canvasSelection.selectedLayers].sort((a, b) => a.zIndex - b.zIndex);
+            const sortedSelection = [...this.canvas.selectedLayers].sort((a, b) => a.zIndex - b.zIndex);
 
             sortedSelection.forEach(layer => {
                 if (!layer.image) return;
@@ -1036,157 +968,4 @@ export class CanvasLayers {
             }, 'image/png');
         });
     }
-
-    /**
-     * Fuses (flattens and merges) selected layers into a single layer
-     */
-    async fuseLayers() {
-        if (this.canvas.canvasSelection.selectedLayers.length < 2) {
-            alert("Please select at least 2 layers to fuse.");
-            return;
-        }
-
-        log.info(`Fusing ${this.canvas.canvasSelection.selectedLayers.length} selected layers`);
-
-        try {
-            // Save state for undo
-            this.canvas.saveState();
-
-            // Calculate bounding box of all selected layers
-            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-            this.canvas.canvasSelection.selectedLayers.forEach(layer => {
-                const centerX = layer.x + layer.width / 2;
-                const centerY = layer.y + layer.height / 2;
-                const rad = layer.rotation * Math.PI / 180;
-                const cos = Math.cos(rad);
-                const sin = Math.sin(rad);
-
-                const halfW = layer.width / 2;
-                const halfH = layer.height / 2;
-
-                const corners = [
-                    {x: -halfW, y: -halfH},
-                    {x: halfW, y: -halfH},
-                    {x: halfW, y: halfH},
-                    {x: -halfW, y: halfH}
-                ];
-
-                corners.forEach(p => {
-                    const worldX = centerX + (p.x * cos - p.y * sin);
-                    const worldY = centerY + (p.x * sin + p.y * cos);
-
-                    minX = Math.min(minX, worldX);
-                    minY = Math.min(minY, worldY);
-                    maxX = Math.max(maxX, worldX);
-                    maxY = Math.max(maxY, worldY);
-                });
-            });
-
-            const fusedWidth = Math.ceil(maxX - minX);
-            const fusedHeight = Math.ceil(maxY - minY);
-
-            if (fusedWidth <= 0 || fusedHeight <= 0) {
-                log.warn("Calculated fused layer dimensions are invalid");
-                alert("Cannot fuse layers: invalid dimensions calculated.");
-                return;
-            }
-
-            // Create temporary canvas for flattening
-            const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = fusedWidth;
-            tempCanvas.height = fusedHeight;
-            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
-
-            // Translate context to account for the bounding box offset
-            tempCtx.translate(-minX, -minY);
-
-            // Sort selected layers by z-index and render them
-            const sortedSelection = [...this.canvas.canvasSelection.selectedLayers].sort((a, b) => a.zIndex - b.zIndex);
-
-            sortedSelection.forEach(layer => {
-                if (!layer.image) return;
-
-                tempCtx.save();
-                tempCtx.globalCompositeOperation = layer.blendMode || 'normal';
-                tempCtx.globalAlpha = layer.opacity !== undefined ? layer.opacity : 1;
-
-                const centerX = layer.x + layer.width / 2;
-                const centerY = layer.y + layer.height / 2;
-                tempCtx.translate(centerX, centerY);
-                tempCtx.rotate(layer.rotation * Math.PI / 180);
-                tempCtx.drawImage(
-                    layer.image,
-                    -layer.width / 2, -layer.height / 2,
-                    layer.width, layer.height
-                );
-                tempCtx.restore();
-            });
-
-            // Convert flattened canvas to image
-            const fusedImage = new Image();
-            fusedImage.src = tempCanvas.toDataURL();
-            await new Promise((resolve, reject) => {
-                fusedImage.onload = resolve;
-                fusedImage.onerror = reject;
-            });
-
-            // Find the lowest z-index among selected layers to maintain visual order
-            const minZIndex = Math.min(...this.canvas.canvasSelection.selectedLayers.map(layer => layer.zIndex));
-
-            // Generate unique ID for the new fused layer
-            const imageId = generateUUID();
-            await saveImage(imageId, fusedImage.src);
-            this.canvas.imageCache.set(imageId, fusedImage.src);
-
-            // Create the new fused layer
-            const fusedLayer = {
-                image: fusedImage,
-                imageId: imageId,
-                x: minX,
-                y: minY,
-                width: fusedWidth,
-                height: fusedHeight,
-                originalWidth: fusedWidth,
-                originalHeight: fusedHeight,
-                rotation: 0,
-                zIndex: minZIndex,
-                blendMode: 'normal',
-                opacity: 1
-            };
-
-            // Remove selected layers from canvas
-            this.canvas.layers = this.canvas.layers.filter(layer => !this.canvas.canvasSelection.selectedLayers.includes(layer));
-
-            // Insert the fused layer at the correct position
-            this.canvas.layers.push(fusedLayer);
-
-            // Re-index all layers to maintain proper z-order
-            this.canvas.layers.sort((a, b) => a.zIndex - b.zIndex);
-            this.canvas.layers.forEach((layer, index) => {
-                layer.zIndex = index;
-            });
-
-            // Select the new fused layer
-            this.canvas.updateSelection([fusedLayer]);
-
-            // Render and save state
-            this.canvas.render();
-            this.canvas.saveState();
-
-            // Notify the layers panel to update its view
-            if (this.canvas.canvasLayersPanel) {
-                this.canvas.canvasLayersPanel.onLayersChanged();
-            }
-
-            log.info("Layers fused successfully", {
-                originalLayerCount: sortedSelection.length,
-                fusedDimensions: { width: fusedWidth, height: fusedHeight },
-                fusedPosition: { x: minX, y: minY }
-            });
-
-        } catch (error) {
-            log.error("Error during layer fusion:", error);
-            alert(`Error fusing layers: ${error.message}`);
-        }
-    }
 }

js/CanvasLayersPanel.js

@@ -1,676 +0,0 @@
-import {createModuleLogger} from "./utils/LoggerUtils.js";
-
-const log = createModuleLogger('CanvasLayersPanel');
-
-export class CanvasLayersPanel {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.container = null;
-        this.layersContainer = null;
-        this.draggedElements = [];
-        this.dragInsertionLine = null;
-        this.isMultiSelecting = false;
-        this.lastSelectedIndex = -1;
-        
-        // Binding metod dla event handlerów
-        this.handleLayerClick = this.handleLayerClick.bind(this);
-        this.handleDragStart = this.handleDragStart.bind(this);
-        this.handleDragOver = this.handleDragOver.bind(this);
-        this.handleDragEnd = this.handleDragEnd.bind(this);
-        this.handleDrop = this.handleDrop.bind(this);
-        
-        log.info('CanvasLayersPanel initialized');
-    }
-
-    /**
-     * Tworzy strukturê HTML panelu warstw
-     */
-    createPanelStructure() {
-        // Główny kontener panelu
-        this.container = document.createElement('div');
-        this.container.className = 'layers-panel';
-        this.container.tabIndex = 0; // Umożliwia fokus na panelu
-        this.container.innerHTML = `
-            <div class="layers-panel-header">
-                <span class="layers-panel-title">Layers</span>
-                <div class="layers-panel-controls">
-                    <button class="layers-btn" id="delete-layer-btn" title="Delete layer">🗑</button>
-                </div>
-            </div>
-            <div class="layers-container" id="layers-container">
-                <!-- Lista warstw będzie renderowana tutaj -->
-            </div>
-        `;
-
-        this.layersContainer = this.container.querySelector('#layers-container');
-        
-        // Dodanie stylów CSS
-        this.injectStyles();
-        
-        // Setup event listeners dla przycisków
-        this.setupControlButtons();
-
-        // Dodaj listener dla klawiatury, aby usuwanie działało z panelu
-        this.container.addEventListener('keydown', (e) => {
-            if (e.key === 'Delete' || e.key === 'Backspace') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.deleteSelectedLayers();
-            }
-        });
-        
-        log.debug('Panel structure created');
-        return this.container;
-    }
-
-    /**
-     * Dodaje style CSS do panelu
-     */
-    injectStyles() {
-        const styleId = 'layers-panel-styles';
-        if (document.getElementById(styleId)) {
-            return; // Style już istnieją
-        }
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-            .layers-panel {
-                background: #2a2a2a;
-                border: 1px solid #3a3a3a;
-                border-radius: 4px;
-                padding: 8px;
-                height: 100%;
-                overflow: hidden;
-                font-family: Arial, sans-serif;
-                font-size: 12px;
-                color: #ffffff;
-                user-select: none;
-                display: flex;
-                flex-direction: column;
-            }
-
-            .layers-panel-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding-bottom: 8px;
-                border-bottom: 1px solid #3a3a3a;
-                margin-bottom: 8px;
-            }
-
-            .layers-panel-title {
-                font-weight: bold;
-                color: #ffffff;
-            }
-
-            .layers-panel-controls {
-                display: flex;
-                gap: 4px;
-            }
-
-            .layers-btn {
-                background: #3a3a3a;
-                border: 1px solid #4a4a4a;
-                color: #ffffff;
-                padding: 4px 8px;
-                border-radius: 3px;
-                cursor: pointer;
-                font-size: 11px;
-            }
-
-            .layers-btn:hover {
-                background: #4a4a4a;
-            }
-
-            .layers-btn:active {
-                background: #5a5a5a;
-            }
-
-            .layers-container {
-                flex: 1;
-                overflow-y: auto;
-                overflow-x: hidden;
-            }
-
-            .layer-row {
-                display: flex;
-                align-items: center;
-                padding: 6px 4px;
-                margin-bottom: 2px;
-                border-radius: 3px;
-                cursor: pointer;
-                transition: background-color 0.15s ease;
-                position: relative;
-                gap: 6px;
-            }
-
-            .layer-row:hover {
-                background: rgba(255, 255, 255, 0.05);
-            }
-
-            .layer-row.selected {
-                background: #2d5aa0 !important;
-                box-shadow: inset 0 0 0 1px #4a7bc8;
-            }
-
-            .layer-row.dragging {
-                opacity: 0.6;
-            }
-
-
-            .layer-thumbnail {
-                width: 48px;
-                height: 48px;
-                border: 1px solid #4a4a4a;
-                border-radius: 2px;
-                background: transparent;
-                position: relative;
-                flex-shrink: 0;
-                overflow: hidden;
-            }
-
-            .layer-thumbnail canvas {
-                width: 100%;
-                height: 100%;
-                display: block;
-            }
-
-            .layer-thumbnail::before {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background-image: 
-                    linear-gradient(45deg, #555 25%, transparent 25%), 
-                    linear-gradient(-45deg, #555 25%, transparent 25%), 
-                    linear-gradient(45deg, transparent 75%, #555 75%), 
-                    linear-gradient(-45deg, transparent 75%, #555 75%);
-                background-size: 8px 8px;
-                background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
-                z-index: 1;
-            }
-
-            .layer-thumbnail canvas {
-                position: relative;
-                z-index: 2;
-            }
-
-            .layer-name {
-                flex: 1;
-                min-width: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                padding: 2px 4px;
-                border-radius: 2px;
-                color: #ffffff;
-            }
-
-            .layer-name.editing {
-                background: #4a4a4a;
-                border: 1px solid #6a6a6a;
-                outline: none;
-                color: #ffffff;
-            }
-
-            .layer-name input {
-                background: transparent;
-                border: none;
-                color: #ffffff;
-                font-size: 12px;
-                width: 100%;
-                outline: none;
-            }
-
-            .drag-insertion-line {
-                position: absolute;
-                left: 0;
-                right: 0;
-                height: 2px;
-                background: #4a7bc8;
-                border-radius: 1px;
-                z-index: 1000;
-                box-shadow: 0 0 4px rgba(74, 123, 200, 0.6);
-            }
-
-            .layers-container::-webkit-scrollbar {
-                width: 6px;
-            }
-
-            .layers-container::-webkit-scrollbar-track {
-                background: #2a2a2a;
-            }
-
-            .layers-container::-webkit-scrollbar-thumb {
-                background: #4a4a4a;
-                border-radius: 3px;
-            }
-
-            .layers-container::-webkit-scrollbar-thumb:hover {
-                background: #5a5a5a;
-            }
-        `;
-        
-        document.head.appendChild(style);
-        log.debug('Styles injected');
-    }
-
-    /**
-     * Konfiguruje event listenery dla przycisków kontrolnych
-     */
-    setupControlButtons() {
-        const deleteBtn = this.container.querySelector('#delete-layer-btn');
-
-        deleteBtn?.addEventListener('click', () => {
-            log.info('Delete layer button clicked');
-            this.deleteSelectedLayers();
-        });
-    }
-
-    /**
-     * Renderuje listę warstw
-     */
-    renderLayers() {
-        if (!this.layersContainer) {
-            log.warn('Layers container not initialized');
-            return;
-        }
-
-        // Wyczyść istniejącą zawartość
-        this.layersContainer.innerHTML = '';
-
-        // Usuń linię wstawiania jeśli istnieje
-        this.removeDragInsertionLine();
-
-        // Sortuj warstwy według zIndex (od najwyższej do najniższej)
-        const sortedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
-
-        sortedLayers.forEach((layer, index) => {
-            const layerElement = this.createLayerElement(layer, index);
-            this.layersContainer.appendChild(layerElement);
-        });
-
-        log.debug(`Rendered ${sortedLayers.length} layers`);
-    }
-
-    /**
-     * Tworzy element HTML dla pojedynczej warstwy
-     */
-    createLayerElement(layer, index) {
-        const layerRow = document.createElement('div');
-        layerRow.className = 'layer-row';
-        layerRow.draggable = true;
-        layerRow.dataset.layerIndex = index;
-        
-        // Sprawdź czy warstwa jest zaznaczona
-        const isSelected = this.canvas.canvasSelection.selectedLayers.includes(layer);
-        if (isSelected) {
-            layerRow.classList.add('selected');
-        }
-
-        // Ustawienie domyślnych właściwości jeśli nie istnieją
-        if (!layer.name) {
-            layer.name = this.ensureUniqueName(`Layer ${layer.zIndex + 1}`, layer);
-        } else {
-            // Sprawdź unikalność istniejącej nazwy (np. przy duplikowaniu)
-            layer.name = this.ensureUniqueName(layer.name, layer);
-        }
-
-        layerRow.innerHTML = `
-            <div class="layer-thumbnail" data-layer-index="${index}"></div>
-            <span class="layer-name" data-layer-index="${index}">${layer.name}</span>
-        `;
-
-        // Wygeneruj miniaturkę
-        this.generateThumbnail(layer, layerRow.querySelector('.layer-thumbnail'));
-
-        // Event listenery
-        this.setupLayerEventListeners(layerRow, layer, index);
-
-        return layerRow;
-    }
-
-    /**
-     * Generuje miniaturkę warstwy
-     */
-    generateThumbnail(layer, thumbnailContainer) {
-        if (!layer.image) {
-            thumbnailContainer.style.background = '#4a4a4a';
-            return;
-        }
-
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d', { willReadFrequently: true });
-        canvas.width = 48;
-        canvas.height = 48;
-
-        // Oblicz skalę zachowując proporcje
-        const scale = Math.min(48 / layer.image.width, 48 / layer.image.height);
-        const scaledWidth = layer.image.width * scale;
-        const scaledHeight = layer.image.height * scale;
-        
-        // Wycentruj obraz
-        const x = (48 - scaledWidth) / 2;
-        const y = (48 - scaledHeight) / 2;
-
-        // Narysuj obraz z wyższą jakością
-        ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = 'high';
-        ctx.drawImage(layer.image, x, y, scaledWidth, scaledHeight);
-
-        thumbnailContainer.appendChild(canvas);
-    }
-
-    /**
-     * Konfiguruje event listenery dla elementu warstwy
-     */
-    setupLayerEventListeners(layerRow, layer, index) {
-        // Mousedown handler - zaznaczanie w momencie wciśnięcia przycisku
-        layerRow.addEventListener('mousedown', (e) => {
-            // Ignoruj, jeśli edytujemy nazwę
-            const nameElement = layerRow.querySelector('.layer-name');
-            if (nameElement && nameElement.classList.contains('editing')) {
-                return;
-            }
-            this.handleLayerClick(e, layer, index);
-        });
-
-        // Double click handler - edycja nazwy
-        layerRow.addEventListener('dblclick', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const nameElement = layerRow.querySelector('.layer-name');
-            this.startEditingLayerName(nameElement, layer);
-        });
-
-        // Drag handlers
-        layerRow.addEventListener('dragstart', (e) => this.handleDragStart(e, layer, index));
-        layerRow.addEventListener('dragover', this.handleDragOver);
-        layerRow.addEventListener('dragend', this.handleDragEnd);
-        layerRow.addEventListener('drop', (e) => this.handleDrop(e, index));
-    }
-
-    /**
-     * Obsługuje kliknięcie na warstwę, aktualizując stan bez pełnego renderowania.
-     */
-    handleLayerClick(e, layer, index) {
-        const isCtrlPressed = e.ctrlKey || e.metaKey;
-        const isShiftPressed = e.shiftKey;
-
-        // Aktualizuj wewnętrzny stan zaznaczenia w obiekcie canvas
-        // Ta funkcja NIE powinna już wywoływać onSelectionChanged w panelu.
-        this.canvas.updateSelectionLogic(layer, isCtrlPressed, isShiftPressed, index);
-        
-        // Aktualizuj tylko wygląd (klasy CSS), bez niszczenia DOM
-        this.updateSelectionAppearance(); 
-
-        log.debug(`Layer clicked: ${layer.name}, selection count: ${this.canvas.canvasSelection.selectedLayers.length}`);
-    }
-
-
-    /**
-     * Rozpoczyna edycję nazwy warstwy
-     */
-    startEditingLayerName(nameElement, layer) {
-        const currentName = layer.name;
-        nameElement.classList.add('editing');
-        
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.value = currentName;
-        input.style.width = '100%';
-        
-        nameElement.innerHTML = '';
-        nameElement.appendChild(input);
-        
-        input.focus();
-        input.select();
-
-        const finishEditing = () => {
-            let newName = input.value.trim() || `Layer ${layer.zIndex + 1}`;
-            newName = this.ensureUniqueName(newName, layer);
-            layer.name = newName;
-            nameElement.classList.remove('editing');
-            nameElement.textContent = newName;
-            
-            this.canvas.saveState();
-            log.info(`Layer renamed to: ${newName}`);
-        };
-
-        input.addEventListener('blur', finishEditing);
-        input.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') {
-                finishEditing();
-            } else if (e.key === 'Escape') {
-                nameElement.classList.remove('editing');
-                nameElement.textContent = currentName;
-            }
-        });
-    }
-
-
-    /**
-     * Zapewnia unikalność nazwy warstwy
-     */
-    ensureUniqueName(proposedName, currentLayer) {
-        const existingNames = this.canvas.layers
-            .filter(layer => layer !== currentLayer)
-            .map(layer => layer.name);
-        
-        if (!existingNames.includes(proposedName)) {
-            return proposedName;
-        }
-        
-        // Sprawdź czy nazwa już ma numerację w nawiasach
-        const match = proposedName.match(/^(.+?)\s*\((\d+)\)$/);
-        let baseName, startNumber;
-        
-        if (match) {
-            baseName = match[1].trim();
-            startNumber = parseInt(match[2]) + 1;
-        } else {
-            baseName = proposedName;
-            startNumber = 1;
-        }
-        
-        // Znajdź pierwszą dostępną numerację
-        let counter = startNumber;
-        let uniqueName;
-        
-        do {
-            uniqueName = `${baseName} (${counter})`;
-            counter++;
-        } while (existingNames.includes(uniqueName));
-        
-        return uniqueName;
-    }
-
-    /**
-     * Usuwa zaznaczone warstwy
-     */
-    deleteSelectedLayers() {
-        if (this.canvas.canvasSelection.selectedLayers.length === 0) {
-            log.debug('No layers selected for deletion');
-            return;
-        }
-
-        log.info(`Deleting ${this.canvas.canvasSelection.selectedLayers.length} selected layers`);
-        this.canvas.removeSelectedLayers();
-        this.renderLayers();
-    }
-
-    /**
-     * Rozpoczyna przeciąganie warstwy
-     */
-    handleDragStart(e, layer, index) {
-        // Sprawdź czy jakakolwiek warstwa jest w trybie edycji
-        const editingElement = this.layersContainer.querySelector('.layer-name.editing');
-        if (editingElement) {
-            e.preventDefault();
-            return;
-        }
-
-        // Jeśli przeciągana warstwa nie jest zaznaczona, zaznacz ją
-        if (!this.canvas.canvasSelection.selectedLayers.includes(layer)) {
-            this.canvas.updateSelection([layer]);
-            this.renderLayers();
-        }
-
-        this.draggedElements = [...this.canvas.canvasSelection.selectedLayers];
-        e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData('text/plain', ''); // Wymagane przez standard
-
-        // Dodaj klasę dragging do przeciąganych elementów
-        this.layersContainer.querySelectorAll('.layer-row').forEach((row, idx) => {
-            const sortedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
-            if (this.draggedElements.includes(sortedLayers[idx])) {
-                row.classList.add('dragging');
-            }
-        });
-
-        log.debug(`Started dragging ${this.draggedElements.length} layers`);
-    }
-
-    /**
-     * Obsługuje przeciąganie nad warstwą
-     */
-    handleDragOver(e) {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'move';
-
-        const layerRow = e.currentTarget;
-        const rect = layerRow.getBoundingClientRect();
-        const midpoint = rect.top + rect.height / 2;
-        const isUpperHalf = e.clientY < midpoint;
-
-        this.showDragInsertionLine(layerRow, isUpperHalf);
-    }
-
-    /**
-     * Pokazuje linię wskaźnika wstawiania
-     */
-    showDragInsertionLine(targetRow, isUpperHalf) {
-        this.removeDragInsertionLine();
-
-        const line = document.createElement('div');
-        line.className = 'drag-insertion-line';
-        
-        if (isUpperHalf) {
-            line.style.top = '-1px';
-        } else {
-            line.style.bottom = '-1px';
-        }
-
-        targetRow.style.position = 'relative';
-        targetRow.appendChild(line);
-        this.dragInsertionLine = line;
-    }
-
-    /**
-     * Usuwa linię wskaźnika wstawiania
-     */
-    removeDragInsertionLine() {
-        if (this.dragInsertionLine) {
-            this.dragInsertionLine.remove();
-            this.dragInsertionLine = null;
-        }
-    }
-
-    /**
-     * Obsługuje upuszczenie warstwy
-     */
-    handleDrop(e, targetIndex) {
-        e.preventDefault();
-        this.removeDragInsertionLine();
-
-        if (this.draggedElements.length === 0) return;
-
-        const rect = e.currentTarget.getBoundingClientRect();
-        const midpoint = rect.top + rect.height / 2;
-        const isUpperHalf = e.clientY < midpoint;
-        
-        // Oblicz docelowy indeks
-        let insertIndex = targetIndex;
-        if (!isUpperHalf) {
-            insertIndex = targetIndex + 1;
-        }
-
-        // Użyj nowej, centralnej funkcji do przesuwania warstw
-        this.canvas.canvasLayers.moveLayers(this.draggedElements, { toIndex: insertIndex });
-        
-        log.info(`Dropped ${this.draggedElements.length} layers at position ${insertIndex}`);
-    }
-
-    /**
-     * Kończy przeciąganie
-     */
-    handleDragEnd(e) {
-        this.removeDragInsertionLine();
-        
-        // Usuń klasę dragging ze wszystkich elementów
-        this.layersContainer.querySelectorAll('.layer-row').forEach(row => {
-            row.classList.remove('dragging');
-        });
-
-        this.draggedElements = [];
-    }
-
-
-    /**
-     * Aktualizuje panel gdy zmienią się warstwy
-     */
-    onLayersChanged() {
-        this.renderLayers();
-    }
-
-    /**
-     * Aktualizuje wygląd zaznaczenia w panelu bez pełnego renderowania.
-     */
-    updateSelectionAppearance() {
-        const sortedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
-        const layerRows = this.layersContainer.querySelectorAll('.layer-row');
-
-        layerRows.forEach((row, index) => {
-            const layer = sortedLayers[index];
-            if (this.canvas.canvasSelection.selectedLayers.includes(layer)) {
-                row.classList.add('selected');
-            } else {
-                row.classList.remove('selected');
-            }
-        });
-    }
-
-    /**
-     * Aktualizuje panel gdy zmienią się warstwy (np. dodanie, usunięcie, zmiana kolejności)
-     * To jest jedyne miejsce, gdzie powinniśmy w pełni renderować panel.
-     */
-    onLayersChanged() {
-        this.renderLayers();
-    }
-
-    /**
-     * Aktualizuje panel gdy zmieni się zaznaczenie (wywoływane z zewnątrz).
-     * Zamiast pełnego renderowania, tylko aktualizujemy wygląd.
-     */
-    onSelectionChanged() {
-        this.updateSelectionAppearance();
-    }
-
-    /**
-     * Niszczy panel i czyści event listenery
-     */
-    destroy() {
-        if (this.container && this.container.parentNode) {
-            this.container.parentNode.removeChild(this.container);
-        }
-        this.container = null;
-        this.layersContainer = null;
-        this.draggedElements = [];
-        this.removeDragInsertionLine();
-        
-        log.info('CanvasLayersPanel destroyed');
-    }
-}

js/CanvasMask.js

@@ -1,542 +0,0 @@
-import { app, ComfyApp } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js";
-import { createModuleLogger } from "./utils/LoggerUtils.js";
-import { mask_editor_showing, mask_editor_listen_for_cancel } from "./utils/mask_utils.js";
-
-const log = createModuleLogger('CanvasMask');
-
-export class CanvasMask {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.node = canvas.node;
-        this.maskTool = canvas.maskTool;
-
-        this.savedMaskState = null;
-        this.maskEditorCancelled = false;
-        this.pendingMask = null;
-        this.editorWasShowing = false;
-    }
-
-    /**
-     * Uruchamia edytor masek
-     * @param {Image|HTMLCanvasElement|null} predefinedMask - Opcjonalna maska do nałożenia po otwarciu editora
-     * @param {boolean} sendCleanImage - Czy wysłać czysty obraz (bez maski) do editora
-     */
-    async startMaskEditor(predefinedMask = null, sendCleanImage = true) {
-        log.info('Starting mask editor', {
-            hasPredefinedMask: !!predefinedMask,
-            sendCleanImage,
-            layersCount: this.canvas.layers.length
-        });
-
-        this.savedMaskState = await this.saveMaskState();
-        this.maskEditorCancelled = false;
-
-        if (!predefinedMask && this.maskTool && this.maskTool.maskCanvas) {
-            try {
-                log.debug('Creating mask from current mask tool');
-                predefinedMask = await this.createMaskFromCurrentMask();
-                log.debug('Mask created from current mask tool successfully');
-            } catch (error) {
-                log.warn("Could not create mask from current mask:", error);
-            }
-        }
-
-        this.pendingMask = predefinedMask;
-
-        let blob;
-        if (sendCleanImage) {
-            log.debug('Getting flattened canvas as blob (clean image)');
-            blob = await this.canvas.canvasLayers.getFlattenedCanvasAsBlob();
-        } else {
-            log.debug('Getting flattened canvas for mask editor (with mask)');
-            blob = await this.canvas.canvasLayers.getFlattenedCanvasForMaskEditor();
-        }
-
-        if (!blob) {
-            log.warn("Canvas is empty, cannot open mask editor.");
-            return;
-        }
-
-        log.debug('Canvas blob created successfully, size:', blob.size);
-
-        try {
-            const formData = new FormData();
-            const filename = `layerforge-mask-edit-${+new Date()}.png`;
-            formData.append("image", blob, filename);
-            formData.append("overwrite", "true");
-            formData.append("type", "temp");
-
-            log.debug('Uploading image to server:', filename);
-
-            const response = await api.fetchApi("/upload/image", {
-                method: "POST",
-                body: formData,
-            });
-
-            if (!response.ok) {
-                throw new Error(`Failed to upload image: ${response.statusText}`);
-            }
-            const data = await response.json();
-
-            log.debug('Image uploaded successfully:', data);
-
-            const img = new Image();
-            img.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
-            await new Promise((res, rej) => {
-                img.onload = res;
-                img.onerror = rej;
-            });
-
-            this.node.imgs = [img];
-
-            log.info('Opening ComfyUI mask editor');
-            ComfyApp.copyToClipspace(this.node);
-            ComfyApp.clipspace_return_node = this.node;
-            ComfyApp.open_maskeditor();
-
-            this.editorWasShowing = false;
-            this.waitWhileMaskEditing();
-
-            this.setupCancelListener();
-
-            if (predefinedMask) {
-                log.debug('Will apply predefined mask when editor is ready');
-                this.waitForMaskEditorAndApplyMask();
-            }
-
-        } catch (error) {
-            log.error("Error preparing image for mask editor:", error);
-            alert(`Error: ${error.message}`);
-        }
-    }
-
-
-    /**
-     * Czeka na otwarcie mask editora i automatycznie nakłada predefiniowaną maskę
-     */
-    waitForMaskEditorAndApplyMask() {
-        let attempts = 0;
-        const maxAttempts = 100; // Zwiększone do 10 sekund oczekiwania
-
-        const checkEditor = () => {
-            attempts++;
-
-            if (mask_editor_showing(app)) {
-
-                const useNewEditor = app.ui.settings.getSettingValue('Comfy.MaskEditor.UseNewEditor');
-                let editorReady = false;
-
-                if (useNewEditor) {
-
-                    const MaskEditorDialog = window.MaskEditorDialog;
-                    if (MaskEditorDialog && MaskEditorDialog.instance) {
-
-                        try {
-                            const messageBroker = MaskEditorDialog.instance.getMessageBroker();
-                            if (messageBroker) {
-                                editorReady = true;
-                                log.info("New mask editor detected as ready via MessageBroker");
-                            }
-                        } catch (e) {
-
-                            editorReady = false;
-                        }
-                    }
-
-                    if (!editorReady) {
-                        const maskEditorElement = document.getElementById('maskEditor');
-                        if (maskEditorElement && maskEditorElement.style.display !== 'none') {
-
-                            const canvas = maskEditorElement.querySelector('canvas');
-                            if (canvas) {
-                                editorReady = true;
-                                log.info("New mask editor detected as ready via DOM element");
-                            }
-                        }
-                    }
-                } else {
-
-                    const maskCanvas = document.getElementById('maskCanvas');
-                    editorReady = maskCanvas && maskCanvas.getContext && maskCanvas.width > 0;
-                    if (editorReady) {
-                        log.info("Old mask editor detected as ready");
-                    }
-                }
-
-                if (editorReady) {
-
-                    log.info("Applying mask to editor after", attempts * 100, "ms wait");
-                    setTimeout(() => {
-                        this.applyMaskToEditor(this.pendingMask);
-                        this.pendingMask = null;
-                    }, 300);
-                } else if (attempts < maxAttempts) {
-
-                    if (attempts % 10 === 0) {
-                        log.info("Waiting for mask editor to be ready... attempt", attempts, "/", maxAttempts);
-                    }
-                    setTimeout(checkEditor, 100);
-                } else {
-                    log.warn("Mask editor timeout - editor not ready after", maxAttempts * 100, "ms");
-
-                    log.info("Attempting to apply mask anyway...");
-                    setTimeout(() => {
-                        this.applyMaskToEditor(this.pendingMask);
-                        this.pendingMask = null;
-                    }, 100);
-                }
-            } else if (attempts < maxAttempts) {
-
-                setTimeout(checkEditor, 100);
-            } else {
-                log.warn("Mask editor timeout - editor not showing after", maxAttempts * 100, "ms");
-                this.pendingMask = null;
-            }
-        };
-
-        checkEditor();
-    }
-
-    /**
-     * Nakłada maskę na otwarty mask editor
-     * @param {Image|HTMLCanvasElement} maskData - Dane maski do nałożenia
-     */
-    async applyMaskToEditor(maskData) {
-        try {
-
-            const useNewEditor = app.ui.settings.getSettingValue('Comfy.MaskEditor.UseNewEditor');
-
-            if (useNewEditor) {
-
-                const MaskEditorDialog = window.MaskEditorDialog;
-                if (MaskEditorDialog && MaskEditorDialog.instance) {
-
-                    await this.applyMaskToNewEditor(maskData);
-                } else {
-                    log.warn("New editor setting enabled but instance not found, trying old editor");
-                    await this.applyMaskToOldEditor(maskData);
-                }
-            } else {
-
-                await this.applyMaskToOldEditor(maskData);
-            }
-
-            log.info("Predefined mask applied to mask editor successfully");
-        } catch (error) {
-            log.error("Failed to apply predefined mask to editor:", error);
-
-            try {
-                log.info("Trying alternative mask application method...");
-                await this.applyMaskToOldEditor(maskData);
-                log.info("Alternative method succeeded");
-            } catch (fallbackError) {
-                log.error("Alternative method also failed:", fallbackError);
-            }
-        }
-    }
-
-    /**
-     * Nakłada maskę na nowy mask editor (przez MessageBroker)
-     * @param {Image|HTMLCanvasElement} maskData - Dane maski
-     */
-    async applyMaskToNewEditor(maskData) {
-
-        const MaskEditorDialog = window.MaskEditorDialog;
-        if (!MaskEditorDialog || !MaskEditorDialog.instance) {
-            throw new Error("New mask editor instance not found");
-        }
-
-        const editor = MaskEditorDialog.instance;
-        const messageBroker = editor.getMessageBroker();
-
-        const maskCanvas = await messageBroker.pull('maskCanvas');
-        const maskCtx = await messageBroker.pull('maskCtx');
-        const maskColor = await messageBroker.pull('getMaskColor');
-
-        const processedMask = await this.processMaskForEditor(maskData, maskCanvas.width, maskCanvas.height, maskColor);
-
-        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
-        maskCtx.drawImage(processedMask, 0, 0);
-
-        messageBroker.publish('saveState');
-    }
-
-    /**
-     * Nakłada maskę na stary mask editor
-     * @param {Image|HTMLCanvasElement} maskData - Dane maski
-     */
-    async applyMaskToOldEditor(maskData) {
-
-        const maskCanvas = document.getElementById('maskCanvas');
-        if (!maskCanvas) {
-            throw new Error("Old mask editor canvas not found");
-        }
-
-        const maskCtx = maskCanvas.getContext('2d', {willReadFrequently: true});
-
-        const maskColor = {r: 255, g: 255, b: 255};
-        const processedMask = await this.processMaskForEditor(maskData, maskCanvas.width, maskCanvas.height, maskColor);
-
-        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
-        maskCtx.drawImage(processedMask, 0, 0);
-    }
-
-    /**
-     * Przetwarza maskę do odpowiedniego formatu dla editora
-     * @param {Image|HTMLCanvasElement} maskData - Oryginalne dane maski
-     * @param {number} targetWidth - Docelowa szerokość
-     * @param {number} targetHeight - Docelowa wysokość
-     * @param {Object} maskColor - Kolor maski {r, g, b}
-     * @returns {HTMLCanvasElement} Przetworzona maska
-     */async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) {
-        // Współrzędne przesunięcia (pan) widoku edytora
-        const panX = this.maskTool.x;
-        const panY = this.maskTool.y;
-
-        log.info("Processing mask for editor:", {
-            sourceSize: {width: maskData.width, height: maskData.height},
-            targetSize: {width: targetWidth, height: targetHeight},
-            viewportPan: {x: panX, y: panY}
-        });
-
-        const tempCanvas = document.createElement('canvas');
-        tempCanvas.width = targetWidth;
-        tempCanvas.height = targetHeight;
-        const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true});
-
-        const sourceX = -panX;
-        const sourceY = -panY;
-
-        tempCtx.drawImage(
-            maskData,       // Źródło: pełna maska z "output area"
-            sourceX,        // sx: Prawdziwa współrzędna X na dużej masce (np. 1000)
-            sourceY,        // sy: Prawdziwa współrzędna Y na dużej masce (np. 1000)
-            targetWidth,    // sWidth: Szerokość wycinanego fragmentu
-            targetHeight,   // sHeight: Wysokość wycinanego fragmentu
-            0,              // dx: Gdzie wkleić w płótnie docelowym (zawsze 0)
-            0,              // dy: Gdzie wkleić w płótnie docelowym (zawsze 0)
-            targetWidth,    // dWidth: Szerokość wklejanego obrazu
-            targetHeight    // dHeight: Wysokość wklejanego obrazu
-        );
-
-        log.info("Mask viewport cropped correctly.", {
-            source: "maskData",
-            cropArea: {x: sourceX, y: sourceY, width: targetWidth, height: targetHeight}
-        });
-
-        // Reszta kodu (zmiana koloru) pozostaje bez zmian
-        const imageData = tempCtx.getImageData(0, 0, targetWidth, targetHeight);
-        const data = imageData.data;
-
-        for (let i = 0; i < data.length; i += 4) {
-            const alpha = data[i + 3];
-            if (alpha > 0) {
-                data[i] = maskColor.r;
-                data[i + 1] = maskColor.g;
-                data[i + 2] = maskColor.b;
-            }
-        }
-
-        tempCtx.putImageData(imageData, 0, 0);
-
-        log.info("Mask processing completed - color applied.");
-        return tempCanvas;
-    }
-
-    /**
-     * Tworzy obiekt Image z obecnej maski canvas
-     * @returns {Promise<Image>} Promise zwracający obiekt Image z maską
-     */
-    async createMaskFromCurrentMask() {
-        if (!this.maskTool || !this.maskTool.maskCanvas) {
-            throw new Error("No mask canvas available");
-        }
-
-        return new Promise((resolve, reject) => {
-            const maskImage = new Image();
-            maskImage.onload = () => resolve(maskImage);
-            maskImage.onerror = reject;
-            maskImage.src = this.maskTool.maskCanvas.toDataURL();
-        });
-    }
-
-    waitWhileMaskEditing() {
-        if (mask_editor_showing(app)) {
-            this.editorWasShowing = true;
-        }
-
-        if (!mask_editor_showing(app) && this.editorWasShowing) {
-            this.editorWasShowing = false;
-            setTimeout(() => this.handleMaskEditorClose(), 100);
-        } else {
-            setTimeout(this.waitWhileMaskEditing.bind(this), 100);
-        }
-    }
-
-    /**
-     * Zapisuje obecny stan maski przed otwarciem editora
-     * @returns {Object} Zapisany stan maski
-     */
-    async saveMaskState() {
-        if (!this.maskTool || !this.maskTool.maskCanvas) {
-            return null;
-        }
-
-        const maskCanvas = this.maskTool.maskCanvas;
-        const savedCanvas = document.createElement('canvas');
-        savedCanvas.width = maskCanvas.width;
-        savedCanvas.height = maskCanvas.height;
-        const savedCtx = savedCanvas.getContext('2d', {willReadFrequently: true});
-        savedCtx.drawImage(maskCanvas, 0, 0);
-
-        return {
-            maskData: savedCanvas,
-            maskPosition: {
-                x: this.maskTool.x,
-                y: this.maskTool.y
-            }
-        };
-    }
-
-    /**
-     * Przywraca zapisany stan maski
-     * @param {Object} savedState - Zapisany stan maski
-     */
-    async restoreMaskState(savedState) {
-        if (!savedState || !this.maskTool) {
-            return;
-        }
-
-        if (savedState.maskData) {
-            const maskCtx = this.maskTool.maskCtx;
-            maskCtx.clearRect(0, 0, this.maskTool.maskCanvas.width, this.maskTool.maskCanvas.height);
-            maskCtx.drawImage(savedState.maskData, 0, 0);
-        }
-
-        if (savedState.maskPosition) {
-            this.maskTool.x = savedState.maskPosition.x;
-            this.maskTool.y = savedState.maskPosition.y;
-        }
-
-        this.canvas.render();
-        log.info("Mask state restored after cancel");
-    }
-
-    /**
-     * Konfiguruje nasłuchiwanie na przycisk Cancel w mask editorze
-     */
-    setupCancelListener() {
-        mask_editor_listen_for_cancel(app, () => {
-            log.info("Mask editor cancel button clicked");
-            this.maskEditorCancelled = true;
-        });
-    }
-
-    /**
-     * Sprawdza czy mask editor został anulowany i obsługuje to odpowiednio
-     */
-    async handleMaskEditorClose() {
-        log.info("Handling mask editor close");
-        log.debug("Node object after mask editor close:", this.node);
-
-        if (this.maskEditorCancelled) {
-            log.info("Mask editor was cancelled - restoring original mask state");
-
-            if (this.savedMaskState) {
-                await this.restoreMaskState(this.savedMaskState);
-            }
-
-            this.maskEditorCancelled = false;
-            this.savedMaskState = null;
-
-            return;
-        }
-
-        if (!this.node.imgs || !this.node.imgs.length === 0 || !this.node.imgs[0].src) {
-            log.warn("Mask editor was closed without a result.");
-            return;
-        }
-
-        log.debug("Processing mask editor result, image source:", this.node.imgs[0].src.substring(0, 100) + '...');
-
-        const resultImage = new Image();
-        resultImage.src = this.node.imgs[0].src;
-
-        try {
-            await new Promise((resolve, reject) => {
-                resultImage.onload = resolve;
-                resultImage.onerror = reject;
-            });
-
-            log.debug("Result image loaded successfully", {
-                width: resultImage.width,
-                height: resultImage.height
-            });
-        } catch (error) {
-            log.error("Failed to load image from mask editor.", error);
-            this.node.imgs = [];
-            return;
-        }
-
-        log.debug("Creating temporary canvas for mask processing");
-        const tempCanvas = document.createElement('canvas');
-        tempCanvas.width = this.canvas.width;
-        tempCanvas.height = this.canvas.height;
-        const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true});
-
-        tempCtx.drawImage(resultImage, 0, 0, this.canvas.width, this.canvas.height);
-
-        log.debug("Processing image data to create mask");
-        const imageData = tempCtx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-        const data = imageData.data;
-
-        for (let i = 0; i < data.length; i += 4) {
-            const originalAlpha = data[i + 3];
-            data[i] = 255;
-            data[i + 1] = 255;
-            data[i + 2] = 255;
-            data[i + 3] = 255 - originalAlpha;
-        }
-
-        tempCtx.putImageData(imageData, 0, 0);
-
-        log.debug("Converting processed mask to image");
-        const maskAsImage = new Image();
-        maskAsImage.src = tempCanvas.toDataURL();
-        await new Promise(resolve => maskAsImage.onload = resolve);
-
-        const maskCtx = this.maskTool.maskCtx;
-        const destX = -this.maskTool.x;
-        const destY = -this.maskTool.y;
-
-        log.debug("Applying mask to canvas", {destX, destY});
-
-        maskCtx.globalCompositeOperation = 'source-over';
-        maskCtx.clearRect(destX, destY, this.canvas.width, this.canvas.height);
-
-        maskCtx.drawImage(maskAsImage, destX, destY);
-
-        this.canvas.render();
-        this.canvas.saveState();
-
-        log.debug("Creating new preview image");
-        const new_preview = new Image();
-
-        const blob = await this.canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
-        if (blob) {
-            new_preview.src = URL.createObjectURL(blob);
-            await new Promise(r => new_preview.onload = r);
-            this.node.imgs = [new_preview];
-            log.debug("New preview image created successfully");
-        } else {
-            this.node.imgs = [];
-            log.warn("Failed to create preview blob");
-        }
-
-        this.canvas.render();
-
-        this.savedMaskState = null;
-        log.info("Mask editor result processed successfully");
-    }
-}

js/CanvasRenderer.js

@@ -75,16 +75,15 @@ export class CanvasRenderer {
             );
             if (layer.mask) {
             }
-            if (this.canvas.canvasSelection.selectedLayers.includes(layer)) {
+            if (this.canvas.selectedLayers.includes(layer)) {
                 this.drawSelectionFrame(ctx, layer);
             }
             ctx.restore();
         });
 
         this.drawCanvasOutline(ctx);
-        this.drawPendingGenerationAreas(ctx); // Draw snapshot outlines
         const maskImage = this.canvas.maskTool.getMask();
-        if (maskImage && this.canvas.maskTool.isOverlayVisible) {
+        if (maskImage) {
 
             ctx.save();
 
@@ -113,13 +112,6 @@ export class CanvasRenderer {
             this.canvas.canvas.height = this.canvas.offscreenCanvas.height;
         }
         this.canvas.ctx.drawImage(this.canvas.offscreenCanvas, 0, 0);
-
-        // Update Batch Preview UI positions
-        if (this.canvas.batchPreviewManagers && this.canvas.batchPreviewManagers.length > 0) {
-            this.canvas.batchPreviewManagers.forEach(manager => {
-                manager.updateScreenPosition(this.canvas.viewport);
-            });
-        }
     }
 
     renderInteractionElements(ctx) {
@@ -190,8 +182,8 @@ export class CanvasRenderer {
     }
 
     renderLayerInfo(ctx) {
-        if (this.canvas.canvasSelection.selectedLayer) {
-            this.canvas.canvasSelection.selectedLayers.forEach(layer => {
+        if (this.canvas.selectedLayer) {
+            this.canvas.selectedLayers.forEach(layer => {
                 if (!layer.image) return;
 
                 const layerIndex = this.canvas.layers.indexOf(layer);
@@ -329,36 +321,4 @@ export class CanvasRenderer {
             ctx.stroke();
         }
     }
-
-    drawPendingGenerationAreas(ctx) {
-        const areasToDraw = [];
-
-        // 1. Get areas from active managers
-        if (this.canvas.batchPreviewManagers && this.canvas.batchPreviewManagers.length > 0) {
-            this.canvas.batchPreviewManagers.forEach(manager => {
-                if (manager.generationArea) {
-                    areasToDraw.push(manager.generationArea);
-                }
-            });
-        }
-
-        // 2. Get the area from the pending context (if it exists)
-        if (this.canvas.pendingBatchContext && this.canvas.pendingBatchContext.outputArea) {
-            areasToDraw.push(this.canvas.pendingBatchContext.outputArea);
-        }
-
-        if (areasToDraw.length === 0) {
-            return;
-        }
-
-        // 3. Draw all collected areas
-        areasToDraw.forEach(area => {
-            ctx.save();
-            ctx.strokeStyle = 'rgba(0, 150, 255, 0.9)'; // Blue color
-            ctx.lineWidth = 3 / this.canvas.viewport.zoom;
-            ctx.setLineDash([12 / this.canvas.viewport.zoom, 6 / this.canvas.viewport.zoom]);
-            ctx.strokeRect(area.x, area.y, area.width, area.height);
-            ctx.restore();
-        });
-    }
 }

js/CanvasSelection.js

@@ -1,166 +0,0 @@
-import { createModuleLogger } from "./utils/LoggerUtils.js";
-
-const log = createModuleLogger('CanvasSelection');
-
-export class CanvasSelection {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.selectedLayers = [];
-        this.selectedLayer = null;
-        this.onSelectionChange = null;
-    }
-
-    /**
-     * Duplikuje zaznaczone warstwy (w pamięci, bez zapisu stanu)
-     */
-    duplicateSelectedLayers() {
-        if (this.selectedLayers.length === 0) return [];
-
-        const newLayers = [];
-        const sortedLayers = [...this.selectedLayers].sort((a,b) => a.zIndex - b.zIndex);
-        
-        sortedLayers.forEach(layer => {
-            const newLayer = {
-                ...layer,
-                id: `layer_${+new Date()}_${Math.random().toString(36).substr(2, 9)}`,
-                zIndex: this.canvas.layers.length, // Nowa warstwa zawsze na wierzchu
-            };
-            this.canvas.layers.push(newLayer);
-            newLayers.push(newLayer);
-        });
-
-        // Aktualizuj zaznaczenie, co powiadomi panel (ale nie renderuje go całego)
-        this.updateSelection(newLayers);
-        
-        // Powiadom panel o zmianie struktury, aby się przerysował
-        if (this.canvas.canvasLayersPanel) {
-            this.canvas.canvasLayersPanel.onLayersChanged();
-        }
-        
-        log.info(`Duplicated ${newLayers.length} layers (in-memory).`);
-        return newLayers;
-    }
-
-    /**
-     * Aktualizuje zaznaczenie warstw i powiadamia wszystkie komponenty.
-     * To jest "jedyne źródło prawdy" o zmianie zaznaczenia.
-     * @param {Array} newSelection - Nowa lista zaznaczonych warstw
-     */
-    updateSelection(newSelection) {
-        const previousSelection = this.selectedLayers.length;
-        this.selectedLayers = newSelection || [];
-        this.selectedLayer = this.selectedLayers.length > 0 ? this.selectedLayers[this.selectedLayers.length - 1] : null;
-        
-        // Sprawdź, czy zaznaczenie faktycznie się zmieniło, aby uniknąć pętli
-        const hasChanged = previousSelection !== this.selectedLayers.length || 
-                           this.selectedLayers.some((layer, i) => this.selectedLayers[i] !== (newSelection || [])[i]);
-
-        if (!hasChanged && previousSelection > 0) {
-           // return; // Zablokowane na razie, może powodować problemy
-        }
-
-        log.debug('Selection updated', {
-            previousCount: previousSelection,
-            newCount: this.selectedLayers.length,
-            selectedLayerIds: this.selectedLayers.map(l => l.id || 'unknown')
-        });
-        
-        // 1. Zrenderuj ponownie canvas, aby pokazać nowe kontrolki transformacji
-        this.canvas.render();
-
-        // 2. Powiadom inne części aplikacji (jeśli są)
-        if (this.onSelectionChange) {
-            this.onSelectionChange();
-        }
-
-        // 3. Powiadom panel warstw, aby zaktualizował swój wygląd
-        if (this.canvas.canvasLayersPanel) {
-            this.canvas.canvasLayersPanel.onSelectionChanged();
-        }
-    }
-
-    /**
-     * Logika aktualizacji zaznaczenia, wywoływana przez panel warstw.
-     */
-    updateSelectionLogic(layer, isCtrlPressed, isShiftPressed, index) {
-        let newSelection = [...this.selectedLayers];
-        let selectionChanged = false;
-
-        if (isShiftPressed && this.canvas.canvasLayersPanel.lastSelectedIndex !== -1) {
-            const sortedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
-            const startIndex = Math.min(this.canvas.canvasLayersPanel.lastSelectedIndex, index);
-            const endIndex = Math.max(this.canvas.canvasLayersPanel.lastSelectedIndex, index);
-            
-            newSelection = [];
-            for (let i = startIndex; i <= endIndex; i++) {
-                if (sortedLayers[i]) {
-                    newSelection.push(sortedLayers[i]);
-                }
-            }
-            selectionChanged = true;
-        } else if (isCtrlPressed) {
-            const layerIndex = newSelection.indexOf(layer);
-            if (layerIndex === -1) {
-                newSelection.push(layer);
-            } else {
-                newSelection.splice(layerIndex, 1);
-            }
-            this.canvas.canvasLayersPanel.lastSelectedIndex = index;
-            selectionChanged = true;
-        } else {
-            // Jeśli kliknięta warstwa nie jest częścią obecnego zaznaczenia,
-            // wyczyść zaznaczenie i zaznacz tylko ją.
-            if (!this.selectedLayers.includes(layer)) {
-                newSelection = [layer];
-                selectionChanged = true;
-            }
-            // Jeśli kliknięta warstwa JEST już zaznaczona (potencjalnie z innymi),
-            // NIE rób nic, aby umożliwić przeciąganie całej grupy.
-            this.canvas.canvasLayersPanel.lastSelectedIndex = index;
-        }
-
-        // Aktualizuj zaznaczenie tylko jeśli faktycznie się zmieniło
-        if (selectionChanged) {
-            this.updateSelection(newSelection);
-        }
-    }
-
-    removeSelectedLayers() {
-        if (this.selectedLayers.length > 0) {
-            log.info('Removing selected layers', {
-                layersToRemove: this.selectedLayers.length,
-                totalLayers: this.canvas.layers.length
-            });
-
-            this.canvas.saveState();
-            this.canvas.layers = this.canvas.layers.filter(l => !this.selectedLayers.includes(l));
-            
-            this.updateSelection([]); 
-            
-            this.canvas.render();
-            this.canvas.saveState();
-
-            if (this.canvas.canvasLayersPanel) {
-                this.canvas.canvasLayersPanel.onLayersChanged();
-            }
-
-            log.debug('Layers removed successfully, remaining layers:', this.canvas.layers.length);
-        } else {
-            log.debug('No layers selected for removal');
-        }
-    }
-    
-    /**
-     * Aktualizuje zaznaczenie po operacji historii
-     */
-    updateSelectionAfterHistory() {
-        const newSelectedLayers = [];
-        if (this.selectedLayers) {
-            this.selectedLayers.forEach(sl => {
-                const found = this.canvas.layers.find(l => l.id === sl.id);
-                if (found) newSelectedLayers.push(found);
-            });
-        }
-        this.updateSelection(newSelectedLayers);
-    }
-}

js/CanvasState.js

@@ -16,25 +16,6 @@ export class CanvasState {
         this.saveTimeout = null;
         this.lastSavedStateSignature = null;
         this._loadInProgress = null;
-
-        // Inicjalizacja Web Workera w sposób odporny na problemy ze ścieżkami
-        try {
-            // new URL(..., import.meta.url) tworzy absolutną ścieżkę do workera
-            this.stateSaverWorker = new Worker(new URL('./state-saver.worker.js', import.meta.url), { type: 'module' });
-            log.info("State saver worker initialized successfully.");
-            
-            this.stateSaverWorker.onmessage = (e) => {
-                log.info("Message from state saver worker:", e.data);
-            };
-            this.stateSaverWorker.onerror = (e) => {
-                log.error("Error in state saver worker:", e.message, e.filename, e.lineno);
-                // Zapobiegaj dalszym próbom, jeśli worker nie działa
-                this.stateSaverWorker = null; 
-            };
-        } catch (e) {
-            log.error("Failed to initialize state saver worker:", e);
-            this.stateSaverWorker = null;
-        }
     }
 
 
@@ -201,36 +182,47 @@ export class CanvasState {
         img.src = imageSrc;
     }
 
-    async saveStateToDB() {
+    async saveStateToDB(immediate = false) {
+        log.info("Preparing to save state to IndexedDB for node:", this.canvas.node.id);
         if (!this.canvas.node.id) {
             log.error("Node ID is not available for saving state to DB.");
             return;
         }
 
-        log.info("Preparing state to be sent to worker...");
-        const state = {
-            layers: await this._prepareLayers(),
-            viewport: this.canvas.viewport,
-            width: this.canvas.width,
-            height: this.canvas.height,
-        };
-
-        state.layers = state.layers.filter(layer => layer !== null);
-        if (state.layers.length === 0) {
-            log.warn("No valid layers to save, skipping.");
+        const currentStateSignature = getStateSignature(this.canvas.layers);
+        if (this.lastSavedStateSignature === currentStateSignature) {
+            log.debug("State unchanged, skipping save to IndexedDB.");
             return;
         }
 
-        if (this.stateSaverWorker) {
-            log.info("Posting state to worker for background saving.");
-            this.stateSaverWorker.postMessage({
-                nodeId: this.canvas.node.id,
-                state: state
-            });
-            this.canvas.render();
-        } else {
-            log.warn("State saver worker not available. Saving on main thread.");
+        if (this.saveTimeout) {
+            clearTimeout(this.saveTimeout);
+        }
+
+        const saveFunction = withErrorHandling(async () => {
+            const state = {
+                layers: await this._prepareLayers(),
+                viewport: this.canvas.viewport,
+                width: this.canvas.width,
+                height: this.canvas.height,
+            };
+
+            state.layers = state.layers.filter(layer => layer !== null);
+            if (state.layers.length === 0) {
+                log.warn("No valid layers to save, skipping save to IndexedDB.");
+                return;
+            }
+
             await setCanvasState(this.canvas.node.id, state);
+            log.info("Canvas state saved to IndexedDB.");
+            this.lastSavedStateSignature = currentStateSignature;
+            this.canvas.render();
+        }, 'CanvasState.saveStateToDB');
+
+        if (immediate) {
+            await saveFunction();
+        } else {
+            this.saveTimeout = setTimeout(saveFunction, 1000);
         }
     }
 
@@ -272,11 +264,10 @@ export class CanvasState {
         }
 
         const currentState = cloneLayers(this.canvas.layers);
-        const currentStateSignature = getStateSignature(currentState);
 
         if (this.layersUndoStack.length > 0) {
             const lastState = this.layersUndoStack[this.layersUndoStack.length - 1];
-            if (getStateSignature(lastState) === currentStateSignature) {
+            if (getStateSignature(currentState) === getStateSignature(lastState)) {
                 return;
             }
         }
@@ -288,11 +279,7 @@ export class CanvasState {
         }
         this.layersRedoStack = [];
         this.canvas.updateHistoryButtons();
-        
-        // Użyj debouncingu, aby zapobiec zbyt częstym zapisom
-        if (!this._debouncedSave) {
-            this._debouncedSave = debounce(() => this.saveStateToDB(), 1000);
-        }
+        this._debouncedSave = this._debouncedSave || debounce(() => this.saveStateToDB(), 500);
         this._debouncedSave();
     }
 

js/CanvasView.js

@@ -429,7 +429,7 @@ async function createCanvasWidget(node, widget, app) {
             <tr><td><kbd>Mouse Wheel</kbd></td><td>Zoom view in/out</td></tr>
             <tr><td><kbd>Shift + Click (background)</kbd></td><td>Start resizing canvas area</td></tr>
             <tr><td><kbd>Shift + Ctrl + Click</kbd></td><td>Start moving entire canvas</td></tr>
-            <tr><td><kbd>Single Click (background)</kbd></td><td>Deselect all layers</td></tr>
+            <tr><td><kbd>Double Click (background)</kbd></td><td>Deselect all layers</td></tr>
         </table>
 
         <h4>Clipboard & I/O</h4>
@@ -444,11 +444,10 @@ async function createCanvasWidget(node, widget, app) {
             <tr><td><kbd>Click + Drag</kbd></td><td>Move selected layer(s)</td></tr>
             <tr><td><kbd>Ctrl + Click</kbd></td><td>Add/Remove layer from selection</td></tr>
             <tr><td><kbd>Alt + Drag</kbd></td><td>Clone selected layer(s)</td></tr>
-            <tr><td><kbd>Right Click</kbd></td><td>Show blend mode & opacity menu</td></tr>
+            <tr><td><kbd>Shift + Click</kbd></td><td>Show blend mode & opacity menu</td></tr>
             <tr><td><kbd>Mouse Wheel</kbd></td><td>Scale layer (snaps to grid)</td></tr>
             <tr><td><kbd>Ctrl + Mouse Wheel</kbd></td><td>Fine-scale layer</td></tr>
-            <tr><td><kbd>Shift + Mouse Wheel</kbd></td><td>Rotate layer by 5° steps</td></tr>
-            <tr><td><kbd>Shift + Ctrl + Mouse Wheel</kbd></td><td>Snap rotation to 5° increments</td></tr>
+            <tr><td><kbd>Shift + Mouse Wheel</kbd></td><td>Rotate layer by 5°</td></tr>
             <tr><td><kbd>Arrow Keys</kbd></td><td>Nudge layer by 1px</td></tr>
             <tr><td><kbd>Shift + Arrow Keys</kbd></td><td>Nudge layer by 10px</td></tr>
             <tr><td><kbd>[</kbd> or <kbd>]</kbd></td><td>Rotate by 1°</td></tr>
@@ -478,41 +477,6 @@ async function createCanvasWidget(node, widget, app) {
     `;
 
     document.body.appendChild(helpTooltip);
-
-    // Helper function for tooltip positioning
-    const showTooltip = (buttonElement, content) => {
-        helpTooltip.innerHTML = content;
-        helpTooltip.style.visibility = 'hidden';
-        helpTooltip.style.display = 'block';
-
-        const buttonRect = buttonElement.getBoundingClientRect();
-        const tooltipRect = helpTooltip.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        let left = buttonRect.left;
-        let top = buttonRect.bottom + 5;
-
-        if (left + tooltipRect.width > viewportWidth) {
-            left = viewportWidth - tooltipRect.width - 10;
-        }
-
-        if (top + tooltipRect.height > viewportHeight) {
-            top = buttonRect.top - tooltipRect.height - 5;
-        }
-
-        if (left < 10) left = 10;
-        if (top < 10) top = 10;
-
-        helpTooltip.style.left = `${left}px`;
-        helpTooltip.style.top = `${top}px`;
-        helpTooltip.style.visibility = 'visible';
-    };
-
-    const hideTooltip = () => {
-        helpTooltip.style.display = 'none';
-    };
-
     const controlPanel = $el("div.painterControlPanel", {}, [
         $el("div.controls.painter-controls", {
             style: {
@@ -544,10 +508,43 @@ async function createCanvasWidget(node, widget, app) {
                         fontWeight: "bold",
                     },
                     onmouseenter: (e) => {
-                        const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
-                        showTooltip(e.target, content);
+                        if (canvas.maskTool.isActive) {
+                            helpTooltip.innerHTML = maskShortcuts;
+                        } else {
+                            helpTooltip.innerHTML = standardShortcuts;
+                        }
+
+                        helpTooltip.style.visibility = 'hidden';
+                        helpTooltip.style.display = 'block';
+
+                        const buttonRect = e.target.getBoundingClientRect();
+                        const tooltipRect = helpTooltip.getBoundingClientRect();
+                        const viewportWidth = window.innerWidth;
+                        const viewportHeight = window.innerHeight;
+
+                        let left = buttonRect.left;
+                        let top = buttonRect.bottom + 5;
+
+                        if (left + tooltipRect.width > viewportWidth) {
+                            left = viewportWidth - tooltipRect.width - 10;
+                        }
+
+                        if (top + tooltipRect.height > viewportHeight) {
+
+                            top = buttonRect.top - tooltipRect.height - 5;
+                        }
+
+                        if (left < 10) left = 10;
+
+                        if (top < 10) top = 10;
+
+                        helpTooltip.style.left = `${left}px`;
+                        helpTooltip.style.top = `${top}px`;
+                        helpTooltip.style.visibility = 'visible';
                     },
-                    onmouseleave: hideTooltip
+                    onmouseleave: () => {
+                        helpTooltip.style.display = 'none';
+                    }
                 }),
                 $el("button.painter-button.primary", {
                     textContent: "Add Image",
@@ -656,9 +653,36 @@ async function createCanvasWidget(node, widget, app) {
                                 `;
                             }
 
-                            showTooltip(e.target, tooltipContent);
+                            helpTooltip.innerHTML = tooltipContent;
+                            helpTooltip.style.visibility = 'hidden';
+                            helpTooltip.style.display = 'block';
+
+                            const buttonRect = e.target.getBoundingClientRect();
+                            const tooltipRect = helpTooltip.getBoundingClientRect();
+                            const viewportWidth = window.innerWidth;
+                            const viewportHeight = window.innerHeight;
+
+                            let left = buttonRect.left;
+                            let top = buttonRect.bottom + 5;
+
+                            if (left + tooltipRect.width > viewportWidth) {
+                                left = viewportWidth - tooltipRect.width - 10;
+                            }
+
+                            if (top + tooltipRect.height > viewportHeight) {
+                                top = buttonRect.top - tooltipRect.height - 5;
+                            }
+
+                            if (left < 10) left = 10;
+                            if (top < 10) top = 10;
+
+                            helpTooltip.style.left = `${left}px`;
+                            helpTooltip.style.top = `${top}px`;
+                            helpTooltip.style.visibility = 'visible';
                         },
-                        onmouseleave: hideTooltip
+                        onmouseleave: () => {
+                            helpTooltip.style.display = 'none';
+                        }
                     })
                 ]),
             ]),
@@ -765,11 +789,6 @@ async function createCanvasWidget(node, widget, app) {
                     title: "Move selected layer(s) down",
                     onclick: () => canvas.canvasLayers.moveLayerDown()
                 }),
-                $el("button.painter-button.requires-selection", {
-                    textContent: "Fuse",
-                    title: "Flatten and merge selected layers into a single layer",
-                    onclick: () => canvas.canvasLayers.fuseLayers()
-                }),
             ]),
 
             $el("div.painter-separator"),
@@ -815,9 +834,9 @@ async function createCanvasWidget(node, widget, app) {
                         button.classList.add('loading');
 
                         try {
-                            if (canvas.canvasSelection.selectedLayers.length !== 1) throw new Error("Please select exactly one image layer for matting.");
+                            if (canvas.selectedLayers.length !== 1) throw new Error("Please select exactly one image layer for matting.");
 
-                            const selectedLayer = canvas.canvasSelection.selectedLayers[0];
+                            const selectedLayer = canvas.selectedLayers[0];
                             const selectedLayerIndex = canvas.layers.indexOf(selectedLayer);
                             const imageData = await canvas.canvasLayers.getLayerImageData(selectedLayer);
                             const response = await fetch("/matting", {
@@ -826,27 +845,21 @@ async function createCanvasWidget(node, widget, app) {
                                 body: JSON.stringify({image: imageData})
                             });
 
-                            const result = await response.json();
+                            if (!response.ok) throw new Error(`Server error: ${response.status} - ${response.statusText}`);
 
-                            if (!response.ok) {
-                                let errorMsg = `Server error: ${response.status} - ${response.statusText}`;
-                                if (result && result.error) {
-                                    errorMsg = `Error: ${result.error}\n\nDetails: ${result.details}`;
-                                }
-                                throw new Error(errorMsg);
-                            }
+                            const result = await response.json();
                             const mattedImage = new Image();
                             mattedImage.src = result.matted_image;
                             await mattedImage.decode();
                             const newLayer = {...selectedLayer, image: mattedImage};
                             delete newLayer.imageId;
                             canvas.layers[selectedLayerIndex] = newLayer;
-                            canvas.canvasSelection.updateSelection([newLayer]);
+                            canvas.updateSelection([newLayer]);
                             canvas.render();
                             canvas.saveState();
                         } catch (error) {
                             log.error("Matting error:", error);
-                            alert(`Matting process failed:\n\n${error.message}`);
+                            alert(`Error during matting process: ${error.message}`);
                         } finally {
                             button.classList.remove('loading');
                             button.removeChild(spinner);
@@ -858,36 +871,18 @@ async function createCanvasWidget(node, widget, app) {
                     textContent: "Undo",
                     title: "Undo last action",
                     disabled: true,
-                    onclick: () => canvas.undo()
+                    onclick: () => canvas.canvasState.undo()
                 }),
                 $el("button.painter-button", {
                     id: `redo-button-${node.id}`,
                     textContent: "Redo",
                     title: "Redo last undone action",
                     disabled: true,
-                    onclick: () => canvas.redo()
+                    onclick: () => canvas.canvasState.redo()
                 }),
             ]),
             $el("div.painter-separator"),
             $el("div.painter-button-group", {id: "mask-controls"}, [
-                $el("button.painter-button.primary", {
-                    id: `toggle-mask-btn-${node.id}`,
-                    textContent: "Show Mask",
-                    title: "Toggle mask overlay visibility",
-                    onclick: (e) => {
-                        const button = e.target;
-                        canvas.maskTool.toggleOverlayVisibility();
-                        canvas.render();
-                        
-                        if (canvas.maskTool.isOverlayVisible) {
-                            button.classList.add('primary');
-                            button.textContent = "Show Mask";
-                        } else {
-                            button.classList.remove('primary');
-                            button.textContent = "Hide Mask";
-                        }
-                    }
-                }),
                 $el("button.painter-button", {
                     textContent: "Edit Mask",
                     title: "Open the current canvas view in the mask editor",
@@ -1010,15 +1005,10 @@ async function createCanvasWidget(node, widget, app) {
 
 
     const updateButtonStates = () => {
-        const selectionCount = canvas.canvasSelection.selectedLayers.length;
+        const selectionCount = canvas.selectedLayers.length;
         const hasSelection = selectionCount > 0;
         controlPanel.querySelectorAll('.requires-selection').forEach(btn => {
-            // Special handling for Fuse button - requires at least 2 layers
-            if (btn.textContent === 'Fuse') {
-                btn.disabled = selectionCount < 2;
-            } else {
-                btn.disabled = !hasSelection;
-            }
+            btn.disabled = !hasSelection;
         });
         const mattingBtn = controlPanel.querySelector('.matting-button');
         if (mattingBtn && !mattingBtn.classList.contains('loading')) {
@@ -1026,7 +1016,7 @@ async function createCanvasWidget(node, widget, app) {
         }
     };
 
-    canvas.canvasSelection.onSelectionChange = updateButtonStates;
+    canvas.onSelectionChange = updateButtonStates;
 
     const undoButton = controlPanel.querySelector(`#undo-button-${node.id}`);
     const redoButton = controlPanel.querySelector(`#redo-button-${node.id}`);
@@ -1040,6 +1030,13 @@ async function createCanvasWidget(node, widget, app) {
     canvas.updateHistoryButtons();
 
 
+    const resizeObserver = new ResizeObserver((entries) => {
+        const controlsHeight = entries[0].target.offsetHeight;
+        canvasContainer.style.top = (controlsHeight + 10) + "px";
+    });
+
+    resizeObserver.observe(controlPanel.querySelector('.controls'));
+
     const triggerWidget = node.widgets.find(w => w.name === "trigger");
 
     const updateOutput = async () => {
@@ -1061,41 +1058,18 @@ async function createCanvasWidget(node, widget, app) {
 
     };
 
-    // Tworzenie panelu warstw
-    const layersPanel = canvas.canvasLayersPanel.createPanelStructure();
-
     const canvasContainer = $el("div.painterCanvasContainer.painter-container", {
         style: {
             position: "absolute",
-            top: "60px", // Wartość początkowa, zostanie nadpisana przez ResizeObserver
+            top: "60px",
             left: "10px",
-            right: "270px",
+            right: "10px",
             bottom: "10px",
+
             overflow: "hidden"
         }
     }, [canvas.canvas]);
 
-    // Kontener dla panelu warstw
-    const layersPanelContainer = $el("div.painterLayersPanelContainer", {
-        style: {
-            position: "absolute",
-            top: "60px", // Wartość początkowa, zostanie nadpisana przez ResizeObserver
-            right: "10px",
-            width: "250px",
-            bottom: "10px",
-            overflow: "hidden"
-        }
-    }, [layersPanel]);
-
-    const resizeObserver = new ResizeObserver((entries) => {
-        const controlsHeight = entries[0].target.offsetHeight;
-        const newTop = (controlsHeight + 10) + "px";
-        canvasContainer.style.top = newTop;
-        layersPanelContainer.style.top = newTop;
-    });
-
-    resizeObserver.observe(controlPanel.querySelector('.controls'));
-
     canvas.canvas.addEventListener('focus', () => {
         canvasContainer.classList.add('has-focus');
     });
@@ -1116,7 +1090,7 @@ async function createCanvasWidget(node, widget, app) {
             width: "100%",
             height: "100%"
         }
-    }, [controlPanel, canvasContainer, layersPanelContainer]);
+    }, [controlPanel, canvasContainer]);
 
 
 
@@ -1183,10 +1157,6 @@ async function createCanvasWidget(node, widget, app) {
 
     setTimeout(() => {
         canvas.loadInitialState();
-        // Renderuj panel warstw po załadowaniu stanu
-        if (canvas.canvasLayersPanel) {
-            canvas.canvasLayersPanel.renderLayers();
-        }
     }, 100);
 
     const showPreviewWidget = node.widgets.find(w => w.name === "show_preview");

js/MaskTool.js

@@ -13,7 +13,6 @@ export class MaskTool {
         this.x = 0;
         this.y = 0;
 
-        this.isOverlayVisible = true;
         this.isActive = false;
         this.brushSize = 20;
         this.brushStrength = 0.5;
@@ -281,11 +280,6 @@ export class MaskTool {
         log.info(`Mask position updated to (${this.x}, ${this.y})`);
     }
 
-    toggleOverlayVisibility() {
-        this.isOverlayVisible = !this.isOverlayVisible;
-        log.info(`Mask overlay visibility toggled to: ${this.isOverlayVisible}`);
-    }
-
     setMask(image) {
 
 

js/config.js

@@ -1,3 +0,0 @@
-// Log level for development.
-// Possible values: 'DEBUG', 'INFO', 'WARN', 'ERROR', 'NONE'
-export const LOG_LEVEL = 'NONE';

js/state-saver.worker.js

@@ -1,93 +0,0 @@
-console.log('[StateWorker] Worker script loaded and running.');
-
-const DB_NAME = 'CanvasNodeDB';
-const STATE_STORE_NAME = 'CanvasState';
-const DB_VERSION = 3;
-
-let db;
-
-function log(...args) {
-    console.log('[StateWorker]', ...args);
-}
-
-function error(...args) {
-    console.error('[StateWorker]', ...args);
-}
-
-function createDBRequest(store, operation, data, errorMessage) {
-    return new Promise((resolve, reject) => {
-        let request;
-        switch (operation) {
-            case 'put':
-                request = store.put(data);
-                break;
-            default:
-                reject(new Error(`Unknown operation: ${operation}`));
-                return;
-        }
-
-        request.onerror = (event) => {
-            error(errorMessage, event.target.error);
-            reject(errorMessage);
-        };
-
-        request.onsuccess = (event) => {
-            resolve(event.target.result);
-        };
-    });
-}
-
-function openDB() {
-    return new Promise((resolve, reject) => {
-        if (db) {
-            resolve(db);
-            return;
-        }
-
-        const request = indexedDB.open(DB_NAME, DB_VERSION);
-
-        request.onerror = (event) => {
-            error("IndexedDB error:", event.target.error);
-            reject("Error opening IndexedDB.");
-        };
-
-        request.onsuccess = (event) => {
-            db = event.target.result;
-            log("IndexedDB opened successfully in worker.");
-            resolve(db);
-        };
-
-        request.onupgradeneeded = (event) => {
-            log("Upgrading IndexedDB in worker...");
-            const tempDb = event.target.result;
-            if (!tempDb.objectStoreNames.contains(STATE_STORE_NAME)) {
-                tempDb.createObjectStore(STATE_STORE_NAME, {keyPath: 'id'});
-            }
-        };
-    });
-}
-
-async function setCanvasState(id, state) {
-    const db = await openDB();
-    const transaction = db.transaction([STATE_STORE_NAME], 'readwrite');
-    const store = transaction.objectStore(STATE_STORE_NAME);
-    await createDBRequest(store, 'put', {id, state}, "Error setting canvas state");
-}
-
-self.onmessage = async function(e) {
-    log('Message received from main thread:', e.data ? 'data received' : 'no data');
-    const { state, nodeId } = e.data;
-
-    if (!state || !nodeId) {
-        error('Invalid data received from main thread');
-        return;
-    }
-
-    try {
-        log(`Saving state for node: ${nodeId}`);
-        await setCanvasState(nodeId, state);
-        log(`State saved successfully for node: ${nodeId}`);
-    } catch (err) {
-        error(`Failed to save state for node: ${nodeId}`, err);
-    }
-};

js/utils/LoggerUtils.js

@@ -4,7 +4,6 @@
  */
 
 import {logger, LogLevel} from "../logger.js";
-import { LOG_LEVEL } from '../config.js';
 
 /**
  * Tworzy obiekt loggera dla modułu z predefiniowanymi metodami
@@ -12,8 +11,8 @@ import { LOG_LEVEL } from '../config.js';
  * @param {LogLevel} level - Poziom logowania (domyślnie DEBUG)
  * @returns {Object} Obiekt z metodami logowania
  */
-export function createModuleLogger(moduleName) {
-    logger.setModuleLevel(moduleName, LogLevel[LOG_LEVEL]);
+export function createModuleLogger(moduleName, level = LogLevel.NONE) {
+    logger.setModuleLevel(moduleName, level);
 
     return {
         debug: (...args) => logger.debug(moduleName, ...args),

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "layerforge"
 description = "Photoshop-like layered canvas editor to your ComfyUI workflow. This node is perfect for complex compositing, inpainting, and outpainting, featuring multi-layer support, masking, blend modes, and precise transformations. Includes optional AI-powered background removal for streamlined image editing."
-version = "1.3.6"
+version = "1.3.0"
 license = {file = "LICENSE"}
 dependencies = ["torch", "torchvision", "transformers", "aiohttp", "numpy", "tqdm", "Pillow"]
 

python/config.py

@@ -1,3 +0,0 @@
-# Log level for development.
-# Possible values: 'DEBUG', 'INFO', 'WARN', 'ERROR', 'NONE'
-LOG_LEVEL = 'NONE'