Update pyproject.toml

Refines exception handling in the load_model method to provide more informative error messages and re-raise exceptions for upstream handling. Removes boolean return values in favor of exception-based flow, and updates execute to rely on exceptions for error detection.

Doc/ComfyApi

@@ -0,0 +1,96 @@
+# ComfyApi - Function Documentation Summary  import { api } from "../../scripts/api.js";
+
+## Basic Information
+
+ComfyApi is a class for communication with ComfyUI backend via WebSocket and REST API.
+
+## Main Functions:
+
+### Connection and Initialization
+
+- constructor() - Initializes API, sets host and base path
+- init() - Starts WebSocket connection for real-time updates
+- #createSocket() - Creates and manages WebSocket connection
+
+### URL Management
+
+- internalURL(route) - Generates URL for internal endpoints
+- apiURL(route) - Generates URL for public API endpoints
+- fileURL(route) - Generates URL for static files
+- fetchApi(route, options) - Performs HTTP requests with automatic user headers
+
+### Event Handling
+
+- addEventListener(type, callback) - Listens for API events (status, executing, progress, etc.)
+- removeEventListener(type, callback) - Removes event listeners
+- dispatchCustomEvent(type, detail) - Emits custom events
+
+### Queue and Prompt Management
+
+- queuePrompt(number, data) - Adds prompt to execution queue
+- getQueue() - Gets current queue state (Running/Pending)
+- interrupt() - Interrupts currently executing prompt
+- clearItems(type) - Clears queue or history
+- deleteItem(type, id) - Removes item from queue or history
+
+### History and Statistics
+
+- getHistory(max_items) - Gets history of executed prompts
+- getSystemStats() - Gets system statistics (Python, OS, GPU, etc.)
+- getLogs() - Gets system logs
+- getRawLogs() - Gets raw logs
+- subscribeLogs(enabled) - Enables/disables log subscription
+
+### Model and Resource Management
+
+- getNodeDefs(options) - Gets definitions of available nodes
+- getExtensions() - List of installed extensions
+- getEmbeddings() - List of available embeddings
+- getModelFolders() - List of model folders
+- getModels(folder) - List of models in given folder
+- viewMetadata(folder, model) - Metadata of specific model
+
+### Workflow Templates
+
+- getWorkflowTemplates() - Gets workflow templates from custom nodes
+- getCoreWorkflowTemplates() - Gets core workflow templates
+
+### User Management
+
+- getUserConfig() - Gets user configuration
+- createUser(username) - Creates new user
+- getSettings() - Gets all user settings
+- getSetting(id) - Gets specific setting
+- storeSettings(settings) - Saves settings dictionary
+- storeSetting(id, value) - Saves single setting
+
+### User Data
+
+- getUserData(file) - Gets user data file
+- storeUserData(file, data, options) - Saves user data
+- deleteUserData(file) - Deletes user data file
+- moveUserData(source, dest) - Moves data file
+- listUserDataFullInfo(dir) - Lists files with full information
+
+### Other
+
+- getFolderPaths() - Gets system folder paths
+- getCustomNodesI18n() - Gets internationalization data for custom nodes
+
+## Important Properties
+
+- clientId - Client ID from WebSocket
+- authToken - Authorization token for ComfyOrg account
+- apiKey - API key for ComfyOrg account
+- socket - Active WebSocket connection
+
+## WebSocket Event Types
+
+- status - System status
+- executing - Currently executing node
+- progress - Execution progress
+- executed - Node executed
+- execution_start/success/error/interrupted/cached - Execution events
+- logs - System logs
+- b_preview - Image preview (binary)
+- reconnecting/reconnected - Connection events

Doc/ComfyApp

@@ -0,0 +1,72 @@
+## __Main ComfyApp Functions__ import { app, ComfyApp } from "../../scripts/app.js";
+
+### __Application Management__
+
+- `setup(canvasEl)` - Initializes the application on the page, loads extensions, registers nodes
+- `resizeCanvas()` - Adjusts canvas size to window
+- `clean()` - Clears application state (node outputs, image previews, errors)
+
+### __Workflow Management__
+
+- `loadGraphData(graphData, clean, restore_view, workflow, options)` - Loads workflow data from JSON
+- `loadApiJson(apiData, fileName)` - Loads workflow from API format
+- `graphToPrompt(graph, options)` - Converts graph to prompt for execution
+- `handleFile(file)` - Handles file loading (PNG, WebP, JSON, MP3, MP4, SVG, etc.)
+
+### __Execution__
+
+- `queuePrompt(number, batchCount, queueNodeIds)` - Queues prompt for execution
+- `registerNodes()` - Registers node definitions from backend
+- `registerNodeDef(nodeId, nodeDef)` - Registers single node definition
+- `refreshComboInNodes()` - Refreshes combo lists in nodes
+
+### __Node Management__
+
+- `registerExtension(extension)` - Registers ComfyUI extension
+- `updateVueAppNodeDefs(defs)` - Updates node definitions in Vue app
+- `revokePreviews(nodeId)` - Frees memory for node previews
+
+### __Clipboard__
+
+- `copyToClipspace(node)` - Copies node to clipboard
+- `pasteFromClipspace(node)` - Pastes data from clipboard to node
+
+### __Position Conversion__
+
+- `clientPosToCanvasPos(pos)` - Converts client position to canvas position
+- `canvasPosToClientPos(pos)` - Converts canvas position to client position
+
+### __Error Handling__
+
+- `showErrorOnFileLoad(file)` - Displays file loading error
+- `#showMissingNodesError(missingNodeTypes)` - Shows missing nodes error
+- `#showMissingModelsError(missingModels, paths)` - Shows missing models error
+
+### __Internal Handlers__
+
+- `#addDropHandler()` - Handles drag and drop of files
+- `#addProcessKeyHandler()` - Handles keyboard input
+- `#addDrawNodeHandler()` - Modifies node drawing behavior
+- `#addApiUpdateHandlers()` - Handles API updates
+- `#addConfigureHandler()` - Graph configuration flag
+- `#addAfterConfigureHandler()` - Post-configuration handling
+
+### __Deprecated Properties__
+
+Many properties are marked as deprecated and redirect to appropriate stores:
+
+- `lastNodeErrors` → `useExecutionStore().lastNodeErrors`
+- `lastExecutionError` → `useExecutionStore().lastExecutionError`
+- `runningNodeId` → `useExecutionStore().executingNodeId`
+- `shiftDown` → `useWorkspaceStore().shiftDown`
+- `widgets` → `useWidgetStore().widgets`
+- `extensions` → `useExtensionStore().extensions`
+
+### __Utility Functions__
+
+- `sanitizeNodeName(string)` - Cleans node name from dangerous characters
+- `getPreviewFormatParam()` - Returns preview format parameter
+- `getRandParam()` - Returns random parameter for refresh
+- `isApiJson(data)` - Checks if data is in API JSON format
+
+This application uses Vue and TypeScript composition pattern, where many functionalities are separated into different services and stores (e.g., `useExecutionStore`, `useWorkflowService`, `useExtensionService`, etc.).

Doc/LitegraphService

@@ -0,0 +1,75 @@
+LitegraphService Documentation
+
+Main functions of useLitegraphService()
+
+Node Registration and Creation Functions:
+
+registerNodeDef(nodeId: string, nodeDefV1: ComfyNodeDefV1)
+
+- Registers node definition in LiteGraph system
+- Creates ComfyNode class with inputs, outputs and widgets
+- Adds context menu, background drawing and keyboard handling
+- Invokes extensions before registration
+
+addNodeOnGraph(nodeDef, options)
+
+- Adds new node to graph at specified position
+- By default places node at canvas center
+
+Navigation and View Functions:
+
+getCanvasCenter(): Vector2
+
+- Returns canvas center coordinates accounting for DPI
+
+goToNode(nodeId: NodeId)
+
+- Animates transition to specified node on canvas
+
+resetView()
+
+- Resets canvas view to default settings (scale 1, offset [0,0])
+
+fitView()
+
+- Fits canvas view to show all nodes
+
+Node Handling Functions (internal):
+
+addNodeContextMenuHandler(node)
+
+- Adds context menu with options:
+
+  - Open/Copy/Save image (for image nodes)
+  - Bypass node
+  - Copy/Paste to Clipspace
+  - Open in MaskEditor (for image nodes)
+
+addDrawBackgroundHandler(node)
+
+- Adds node background drawing logic
+- Handles image, animation and video previews
+- Manages thumbnail display
+
+addNodeKeyHandler(node)
+
+- Adds keyboard handling:
+
+  - Left/Right arrows: navigate between images
+  - Escape: close image preview
+
+ComfyNode Class (created by registerNodeDef):
+
+Main methods:
+
+- #addInputs() - adds inputs and widgets to node
+- #addOutputs() - adds outputs to node
+- configure() - configures node from serialized data
+- #setupStrokeStyles() - sets border styles (errors, execution, etc.)
+
+Properties:
+
+- comfyClass - ComfyUI class name
+- nodeData - node definition
+- Automatic yellow coloring for API nodes
+

Doc/MaskEditor

@@ -0,0 +1,76 @@
+MASKEDITOR.TS FUNCTION DOCUMENTATION
+
+MaskEditorDialog - Main mask editor class
+
+- getInstance() - Singleton pattern, returns editor instance
+- show() - Opens the mask editor
+- save() - Saves mask to server
+- destroy() - Closes and cleans up editor
+- isOpened() - Checks if editor is open
+
+CanvasHistory - Change history management
+
+- saveState() - Saves current canvas state
+- undo() - Undo last operation
+- redo() - Redo undone operation
+- clearStates() - Clears history
+
+BrushTool - Brush tool
+
+- setBrushSize(size) - Sets brush size
+- setBrushOpacity(opacity) - Sets brush opacity
+- setBrushHardness(hardness) - Sets brush hardness
+- setBrushType(type) - Sets brush shape (circle/square)
+- startDrawing() - Starts drawing
+- handleDrawing() - Handles drawing during movement
+- drawEnd() - Ends drawing
+
+PaintBucketTool - Fill tool
+
+- floodFill(point) - Fills area with color from point
+- setTolerance(tolerance) - Sets color tolerance
+- setFillOpacity(opacity) - Sets fill opacity
+- invertMask() - Inverts mask
+
+ColorSelectTool - Color selection tool
+
+- fillColorSelection(point) - Selects similar colors
+- setTolerance(tolerance) - Sets selection tolerance
+- setLivePreview(enabled) - Enables/disables live preview
+- setComparisonMethod(method) - Sets color comparison method
+- setApplyWholeImage(enabled) - Applies to whole image
+- setSelectOpacity(opacity) - Sets selection opacity
+
+UIManager - Interface management
+
+- updateBrushPreview() - Updates brush preview
+- setBrushVisibility(visible) - Shows/hides brush
+- screenToCanvas(coords) - Converts screen coordinates to canvas
+- getMaskColor() - Returns mask color
+- setSaveButtonEnabled(enabled) - Enables/disables save button
+
+ToolManager - Tool management
+
+- setTool(tool) - Sets active tool
+- getCurrentTool() - Returns active tool
+- handlePointerDown/Move/Up() - Handles mouse/touch events
+
+PanAndZoomManager - View management
+
+- zoom(event) - Zooms in/out canvas
+- handlePanStart/Move() - Handles canvas panning
+- initializeCanvasPanZoom() - Initializes canvas view
+- smoothResetView() - Smoothly resets view
+
+MessageBroker - Communication system
+
+- publish(topic, data) - Publishes message
+- subscribe(topic, callback) - Subscribes to topic
+- pull(topic, data) - Pulls data from topic
+- createPullTopic/PushTopic() - Creates communication topics
+
+KeyboardManager - Keyboard handling
+
+- addListeners() - Adds keyboard listeners
+- removeListeners() - Removes listeners
+- isKeyDown(key) - Checks if key is pressed

canvas_node.py

@@ -10,7 +10,12 @@ import threading
 import os
 from tqdm import tqdm
 from torchvision import transforms
-from transformers import AutoModelForImageSegmentation, PretrainedConfig
+try:
+    from transformers import AutoModelForImageSegmentation, PretrainedConfig
+    from requests.exceptions import ConnectionError as RequestsConnectionError
+    TRANSFORMERS_AVAILABLE = True
+except ImportError:
+    TRANSFORMERS_AVAILABLE = False
 import torch.nn.functional as F
 import traceback
 import uuid
@@ -328,6 +333,24 @@ 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):
 
@@ -449,6 +472,30 @@ 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:
@@ -566,42 +613,38 @@ 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: {str(e)}")
+                    log_error(f"Failed to load model from Hugging Face: {str(e)}")
-                    raise
+                    # 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
             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")
-            return False
+            raise  # Re-raise the exception to be caught by the execute method
 
     def preprocess_image(self, image):
 
@@ -631,11 +674,9 @@ class BiRefNetMatting:
 
     def execute(self, image, model_path, threshold=0.5, refinement=1):
         try:
-
             PromptServer.instance.send_sync("matting_status", {"status": "processing"})
 
-            if not self.load_model(model_path):
+            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:]
@@ -712,25 +753,31 @@ _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)  # 429 Too Many Requests
+        }, status=429)
 
     _matting_lock = True
-    
     try:
         log_info("Received matting request")
         data = await request.json()
 
-        matting = BiRefNetMatting()
+        matting_instance = 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.execute(
+        matted_image, alpha_mask = matting_instance.execute(
             image_tensor,
             "BiRefNet/model.safetensors",
             threshold=data.get("threshold", 0.5),
@@ -745,14 +792,26 @@ async def matting(request):
             "alpha_mask": result_mask
         })
 
-    except Exception as e:
+    except RequestsConnectionError as e:
-        log_exception(f"Error in matting endpoint: {str(e)}")
+        log_error(f"Connection error during matting model download: {e}")
         return web.json_response({
-            "error": str(e),
+            "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)
+
+        return web.json_response({
+            "error": "An unexpected error occurred",
             "details": traceback.format_exc()
         }, status=500)
     finally:
-
         _matting_lock = None
         log_debug("Matting lock released")
 

js/BatchPreviewManager.js

@@ -0,0 +1,258 @@
+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,11 +5,25 @@ 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 {mask_editor_showing, mask_editor_listen_for_cancel} from "./utils/mask_utils.js";
+import { debounce } from "./utils/CommonUtils.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;
+  };
+};
 
 const log = createModuleLogger('Canvas');
 
@@ -26,7 +40,7 @@ export class Canvas {
         this.node = node;
         this.widget = widget;
         this.canvas = document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+        this.ctx = this.canvas.getContext('2d', {willReadFrequently: true});
         this.width = 512;
         this.height = 512;
         this.layers = [];
@@ -60,7 +74,7 @@ export class Canvas {
         log.debug('Canvas widget element:', this.node);
         log.info('Canvas initialized', {
             nodeId: this.node.id,
-            dimensions: { width: this.width, height: this.height },
+            dimensions: {width: this.width, height: this.height},
             viewport: this.viewport
         });
 
@@ -141,13 +155,20 @@ 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.canvasState = new CanvasState(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');
     }
@@ -180,6 +201,11 @@ 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();
+        }
     }
 
     /**
@@ -187,7 +213,7 @@ export class Canvas {
      * @param {boolean} replaceLast - Czy zastąpić ostatni stan w historii
      */
     saveState(replaceLast = false) {
-        log.debug('Saving canvas state', { replaceLast, layersCount: this.layers.length });
+        log.debug('Saving canvas state', {replaceLast, layersCount: this.layers.length});
         this.canvasState.saveState(replaceLast);
         this.incrementOperationCount();
         this._notifyStateChange();
@@ -205,6 +231,12 @@ 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);
     }
 
@@ -221,6 +253,12 @@ 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);
     }
 
@@ -238,12 +276,39 @@ export class Canvas {
      * @param {string} addMode - Tryb dodawania
      */
     async addLayer(image, layerProps = {}, addMode = 'default') {
-        return this.canvasLayers.addLayerWithImage(image, layerProps, addMode);
+        const result = await this.canvasLayers.addLayerWithImage(image, layerProps, addMode);
+        
+        // Powiadom panel warstw o dodaniu nowej warstwy
+        if (this.canvasLayersPanel) {
+            this.canvasLayersPanel.onLayersChanged();
+        }
+        
+        return result;
     }
 
     /**
      * 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.selectedLayers.filter(l => !layerIds.includes(l.id));
+        this.updateSelection(newSelection);
+        
+        this.render();
+        this.saveState();
+
+        if (this.canvasLayersPanel) {
+            this.canvasLayersPanel.onLayersChanged();
+        }
+        log.info(`Removed ${initialCount - this.layers.length} layers by ID.`);
+    }
+
     removeSelectedLayers() {
         if (this.selectedLayers.length > 0) {
             log.info('Removing selected layers', {
@@ -253,10 +318,16 @@ export class Canvas {
 
             this.saveState();
             this.layers = this.layers.filter(l => !this.selectedLayers.includes(l));
+            
             this.updateSelection([]); 
+            
             this.render();
             this.saveState();
 
+            if (this.canvasLayersPanel) {
+                this.canvasLayersPanel.onLayersChanged();
+            }
+
             log.debug('Layers removed successfully, remaining layers:', this.layers.length);
         } else {
             log.debug('No layers selected for removal');
@@ -264,7 +335,39 @@ export class Canvas {
     }
 
     /**
-     * Aktualizuje zaznaczenie warstw
+     * 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.layers.length, // Nowa warstwa zawsze na wierzchu
+            };
+            this.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.canvasLayersPanel) {
+            this.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) {
@@ -272,15 +375,78 @@ export class Canvas {
         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.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.canvasLayersPanel) {
+            this.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.canvasLayersPanel.lastSelectedIndex !== -1) {
+            const sortedLayers = [...this.layers].sort((a, b) => b.zIndex - a.zIndex);
+            const startIndex = Math.min(this.canvasLayersPanel.lastSelectedIndex, index);
+            const endIndex = Math.max(this.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.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.canvasLayersPanel.lastSelectedIndex = index;
+        }
+
+        // Aktualizuj zaznaczenie tylko jeśli faktycznie się zmieniło
+        if (selectionChanged) {
+            this.updateSelection(newSelection);
+        }
     }
 
     /**
@@ -314,6 +480,87 @@ 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
@@ -683,7 +930,7 @@ export class Canvas {
             throw new Error("Old mask editor canvas not found");
         }
 
-        const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
+        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);
@@ -699,59 +946,58 @@ export class Canvas {
      * @param {number} targetHeight - Docelowa wysokość
      * @param {Object} maskColor - Kolor maski {r, g, b}
      * @returns {HTMLCanvasElement} Przetworzona maska
-     */
+     */async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) {
-    async processMaskForEditor(maskData, targetWidth, targetHeight, maskColor) {
+        // Współrzędne przesunięcia (pan) widoku edytora
-        const originalWidth = maskData.width || maskData.naturalWidth || this.width;
+        const panX = this.maskTool.x;
-        const originalHeight = maskData.height || maskData.naturalHeight || this.height;
+        const panY = this.maskTool.y;
 
         log.info("Processing mask for editor:", {
-            originalSize: {width: originalWidth, height: originalHeight},
+            sourceSize: {width: maskData.width, height: maskData.height},
             targetSize: {width: targetWidth, height: targetHeight},
-            canvasSize: {width: this.width, height: this.height}
+            viewportPan: {x: panX, y: panY}
         });
 
         const tempCanvas = document.createElement('canvas');
         tempCanvas.width = targetWidth;
         tempCanvas.height = targetHeight;
-        const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
+        const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true});
 
-        tempCtx.clearRect(0, 0, targetWidth, targetHeight);
+        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
+        );
 
-        const scaleToOriginal = Math.min(originalWidth / this.width, originalHeight / this.height);
+        log.info("Mask viewport cropped correctly.", {
-
+            source: "maskData",
-        const scaledWidth = this.width * scaleToOriginal;
+            cropArea: {x: sourceX, y: sourceY, width: targetWidth, height: targetHeight}
-        const scaledHeight = this.height * scaleToOriginal;
-
-        const offsetX = (targetWidth - scaledWidth) / 2;
-        const offsetY = (targetHeight - scaledHeight) / 2;
-
-        tempCtx.drawImage(maskData, offsetX, offsetY, scaledWidth, scaledHeight);
-
-        log.info("Mask drawn scaled to original image size:", {
-            originalSize: {width: originalWidth, height: originalHeight},
-            targetSize: {width: targetWidth, height: targetHeight},
-            canvasSize: {width: this.width, height: this.height},
-            scaleToOriginal: scaleToOriginal,
-            finalSize: {width: scaledWidth, height: scaledHeight},
-            offset: {x: offsetX, y: offsetY}
         });
 
+        // 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]; // Oryginalny kanał alpha
+            const alpha = data[i + 3];
-
+            if (alpha > 0) {
-            data[i] = maskColor.r;     // R
+                data[i] = maskColor.r;
-            data[i + 1] = maskColor.g; // G
+                data[i + 1] = maskColor.g;
-            data[i + 2] = maskColor.b; // B
+                data[i + 2] = maskColor.b;
-            data[i + 3] = alpha;       // Zachowaj oryginalny alpha
+            }
         }
 
         tempCtx.putImageData(imageData, 0, 0);
 
-        log.info("Mask processing completed - full size scaling applied");
+        log.info("Mask processing completed - color applied.");
         return tempCanvas;
     }
 
@@ -784,6 +1030,7 @@ export class Canvas {
             setTimeout(this.waitWhileMaskEditing.bind(this), 100);
         }
     }
+
     /**
      * Zapisuje obecny stan maski przed otwarciem editora
      * @returns {Object} Zapisany stan maski
@@ -797,7 +1044,7 @@ export class Canvas {
         const savedCanvas = document.createElement('canvas');
         savedCanvas.width = maskCanvas.width;
         savedCanvas.height = maskCanvas.height;
-        const savedCtx = savedCanvas.getContext('2d', { willReadFrequently: true });
+        const savedCtx = savedCanvas.getContext('2d', {willReadFrequently: true});
         savedCtx.drawImage(maskCanvas, 0, 0);
 
         return {
@@ -893,7 +1140,7 @@ export class Canvas {
         const tempCanvas = document.createElement('canvas');
         tempCanvas.width = this.width;
         tempCanvas.height = this.height;
-        const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
+        const tempCtx = tempCanvas.getContext('2d', {willReadFrequently: true});
 
         tempCtx.drawImage(resultImage, 0, 0, this.width, this.height);
 
@@ -920,7 +1167,7 @@ export class Canvas {
         const destX = -this.maskTool.x;
         const destY = -this.maskTool.y;
 
-        log.debug("Applying mask to canvas", { destX, destY });
+        log.debug("Applying mask to canvas", {destX, destY});
 
         maskCtx.globalCompositeOperation = 'source-over';
         maskCtx.clearRect(destX, destY, this.width, this.height);

js/CanvasIO.js

@@ -744,12 +744,7 @@ export class CanvasIO {
                     img.src = result.image_data;
                 });
 
-                await this.canvas.canvasLayers.addLayerWithImage(img, {
+                await this.canvas.canvasLayers.addLayerWithImage(img, {}, 'fit');
-                    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 {
@@ -761,4 +756,41 @@ 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,6 +19,7 @@ export class CanvasInteractions {
             hasClonedInDrag: false,
             lastClickTime: 0,
             transformingLayer: null,
+            keyMovementInProgress: false, // Flaga do śledzenia ruchu klawiszami
         };
         this.originalLayerPositions = new Map();
         this.interaction.canvasResizeRect = null;
@@ -69,47 +70,39 @@ export class CanvasInteractions {
         const worldCoords = this.canvas.getMouseWorldCoordinates(e);
         const viewCoords = this.canvas.getMouseViewCoordinates(e);
 
-        if (this.canvas.maskTool.isActive) {
+        if (this.interaction.mode === 'drawingMask') {
-            if (e.button === 1) {
+            this.canvas.maskTool.handleMouseDown(worldCoords, viewCoords);
-                this.startPanning(e);
-            } else {
-                this.canvas.maskTool.handleMouseDown(worldCoords, viewCoords);
-            }
             this.canvas.render();
             return;
         }
 
-        const currentTime = Date.now();
+        // --- Ostateczna, poprawna kolejność sprawdzania ---
+
+        // 1. Akcje globalne z modyfikatorami (mają najwyższy priorytet)
         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.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);
@@ -118,33 +111,37 @@ export class CanvasInteractions {
 
         const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(worldCoords.x, worldCoords.y);
         if (clickedLayerResult) {
-            this.startLayerDrag(clickedLayerResult.layer, worldCoords);
+            this.prepareForDrag(clickedLayerResult.layer, worldCoords);
             return;
         }
         
-        this.startPanning(e);
+        // 4. Domyślna akcja na tle (lewy przycisk bez modyfikatorów)
-
+        this.startPanningOrClearSelection(e);
-        this.canvas.render();
     }
 
     handleMouseMove(e) {
         const worldCoords = this.canvas.getMouseWorldCoordinates(e);
         const viewCoords = this.canvas.getMouseViewCoordinates(e);
-        this.canvas.lastMousePosition = worldCoords;
+        this.canvas.lastMousePosition = worldCoords; // Zawsze aktualizuj ostatnią pozycję myszy
         
-        if (this.canvas.maskTool.isActive) {
+        // Sprawdź, czy rozpocząć przeciąganie
-            if (this.interaction.mode === 'panning') {
+        if (this.interaction.mode === 'potential-drag') {
-                this.panViewport(e);
+            const dx = worldCoords.x - this.interaction.dragStart.x;
-                return;
+            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.selectedLayers.forEach(l => {
+                    this.originalLayerPositions.set(l, {x: l.x, y: l.y});
+                });
             }
-            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;
@@ -171,30 +168,30 @@ export class CanvasInteractions {
 
     handleMouseUp(e) {
         const viewCoords = this.canvas.getMouseViewCoordinates(e);
-        if (this.canvas.maskTool.isActive) {
+        if (this.interaction.mode === 'drawingMask') {
-            if (this.interaction.mode === 'panning') {
+            this.canvas.maskTool.handleMouseUp(viewCoords);
-                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();
-        } else if (this.interaction.mode === 'movingCanvas') {
+        }
+        if (this.interaction.mode === 'movingCanvas') {
             this.finalizeCanvasMove();
         }
-        this.resetInteractionState();
-        this.canvas.render();
 
-        if (interactionEnded) {
+        // 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) {
             this.canvas.saveState();
             this.canvas.canvasState.saveStateToDB(true);
         }
+
+        this.resetInteractionState();
+        this.canvas.render();
     }
 
     handleMouseLeave(e) {
@@ -245,10 +242,22 @@ 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.selectedLayers.forEach(layer => {
                 if (e.shiftKey) {
-                    layer.rotation += rotationStep;
+                    // 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;
+                    }
                 } else {
                     const oldWidth = layer.width;
                     const oldHeight = layer.height;
@@ -307,112 +316,81 @@ export class CanvasInteractions {
         }
         this.canvas.render();
         if (!this.canvas.maskTool.isActive) {
-            this.canvas.saveState(true);
+            this.canvas.requestSaveState(true); // Użyj opóźnionego zapisu
         }
     }
 
     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();
         }
 
-        if (e.ctrlKey) {
+        // Globalne skróty (Undo/Redo/Copy/Paste)
-            if (e.key.toLowerCase() === 'z') {
+        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.selectedLayers.length > 0) {
+                        this.canvas.canvasLayers.copySelectedLayers();
+                    }
+                    break;
+                case 'v':
+                     this.canvas.canvasLayers.handlePaste('mouse');
+                    break;
+                default:
+                    handled = false;
+                    break;
+            }
+            if (handled) {
                 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;
             }
         }
 
-        if (this.canvas.selectedLayer) {
+        // Skróty kontekstowe (zależne od zaznaczenia)
-            if (e.key === 'Delete') {
+        if (this.canvas.selectedLayers.length > 0) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.canvas.saveState();
-                this.canvas.layers = this.canvas.layers.filter(l => !this.canvas.selectedLayers.includes(l));
-                this.canvas.updateSelection([]);
-                this.canvas.render();
-                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);
+            // Używamy e.code dla spójności i niezależności od układu klawiatury
-                    if (e.code === 'ArrowRight') this.canvas.selectedLayers.forEach(l => l.x += step);
+            const movementKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'BracketLeft', 'BracketRight'];
-                    if (e.code === 'ArrowUp') this.canvas.selectedLayers.forEach(l => l.y -= step);
+            if (movementKeys.includes(e.code)) {
-                    if (e.code === 'ArrowDown') this.canvas.selectedLayers.forEach(l => l.y += step);
+                e.preventDefault();
-                    if (e.code === 'BracketLeft') this.canvas.selectedLayers.forEach(l => l.rotation -= step);
+                e.stopPropagation();
-                    if (e.code === 'BracketRight') this.canvas.selectedLayers.forEach(l => l.rotation += step);
+                this.interaction.keyMovementInProgress = true;
 
-                    needsRender = true;
+                if (e.code === 'ArrowLeft') this.canvas.selectedLayers.forEach(l => l.x -= step);
-                    break;
+                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;
+            }
+
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                e.preventDefault();
+                e.stopPropagation();
+                this.canvas.removeSelectedLayers();
+                return;
             }
             
             if (needsRender) {
                 this.canvas.render();
-                this.canvas.saveState();
             }
         }
     }
@@ -420,6 +398,12 @@ 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) {
@@ -466,31 +450,34 @@ export class CanvasInteractions {
         this.canvas.render();
     }
 
-    startLayerDrag(layer, worldCoords) {
+    prepareForDrag(layer, worldCoords) {
-        this.interaction.mode = 'dragging';
+        // Zaktualizuj zaznaczenie, ale nie zapisuj stanu
-        this.interaction.dragStart = {...worldCoords};
-
-        let currentSelection = [...this.canvas.selectedLayers];
-
         if (this.interaction.isCtrlPressed) {
-            const index = currentSelection.indexOf(layer);
+            const index = this.canvas.selectedLayers.indexOf(layer);
             if (index === -1) {
-                currentSelection.push(layer);
+                this.canvas.updateSelection([...this.canvas.selectedLayers, layer]);
             } else {
-                currentSelection.splice(index, 1);
+                const newSelection = this.canvas.selectedLayers.filter(l => l !== layer);
+                this.canvas.updateSelection(newSelection);
             }
         } else {
-            if (!currentSelection.includes(layer)) {
+            if (!this.canvas.selectedLayers.includes(layer)) {
-                currentSelection = [layer];
+                this.canvas.updateSelection([layer]);
             }
         }
         
-        this.canvas.updateSelection(currentSelection);
+        this.interaction.mode = 'potential-drag';
+        this.interaction.dragStart = {...worldCoords};
+    }
 
-        this.originalLayerPositions.clear();
+    startPanningOrClearSelection(e) {
-        this.canvas.selectedLayers.forEach(l => {
+        // Ta funkcja jest teraz wywoływana tylko gdy kliknięto na tło bez modyfikatorów.
-            this.originalLayerPositions.set(l, {x: l.x, y: l.y});
+        // Domyślna akcja: wyczyść zaznaczenie i rozpocznij panoramowanie.
-        });
+        if (!this.interaction.isCtrlPressed) {
+            this.canvas.updateSelection([]);
+        }
+        this.interaction.mode = 'panning';
+        this.interaction.panStart = {x: e.clientX, y: e.clientY};
     }
 
     startCanvasResize(worldCoords) {
@@ -545,10 +532,34 @@ 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) {
@@ -570,19 +581,12 @@ export class CanvasInteractions {
 
     dragLayers(worldCoords) {
         if (this.interaction.isAltPressed && !this.interaction.hasClonedInDrag && this.canvas.selectedLayers.length > 0) {
-            const newLayers = [];
+            // Scentralizowana logika duplikowania
-            this.canvas.selectedLayers.forEach(layer => {
+            const newLayers = this.canvas.duplicateSelectedLayers();
-                const newLayer = {
+            
-                    ...layer,
+            // Zresetuj pozycje przeciągania dla nowych, zduplikowanych warstw
-                    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();
-            this.canvas.selectedLayers.forEach(l => {
+            newLayers.forEach(l => {
                 this.originalLayerPositions.set(l, {x: l.x, y: l.y});
             });
             this.interaction.hasClonedInDrag = true;
@@ -720,20 +724,43 @@ 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 rectX = this.interaction.canvasResizeRect.x;
+            const finalX = this.interaction.canvasResizeRect.x;
-            const rectY = this.interaction.canvasResizeRect.y;
+            const finalY = this.interaction.canvasResizeRect.y;
 
             this.canvas.updateOutputAreaSize(newWidth, newHeight);
 
             this.canvas.layers.forEach(layer => {
-                layer.x -= rectX;
+                layer.x -= finalX;
-                layer.y -= rectY;
+                layer.y -= finalY;
             });
 
-            this.canvas.maskTool.updatePosition(-rectX, -rectY);
+            this.canvas.maskTool.updatePosition(-finalX, -finalY);
 
-            this.canvas.viewport.x -= rectX;
+            // If a batch generation is in progress, update the captured context as well
-            this.canvas.viewport.y -= rectY;
+            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;
         }
     }
 

js/CanvasLayers.js

@@ -128,6 +128,12 @@ 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}).`);
     }
 
@@ -143,12 +149,12 @@ export class CanvasLayers {
     }
 
 
-    addLayerWithImage = withErrorHandling(async (image, layerProps = {}, addMode = 'default') => {
+    addLayerWithImage = withErrorHandling(async (image, layerProps = {}, addMode = 'default', targetArea = null) => {
         if (!image) {
             throw createValidationError("Image is required for layer creation");
         }
 
-        log.debug("Adding layer with image:", image, "with mode:", addMode);
+        log.debug("Adding layer with image:", image, "with mode:", addMode, "targetArea:", targetArea);
         const imageId = generateUUID();
         await saveImage(imageId, image.src);
         this.canvas.imageCache.set(imageId, image.src);
@@ -157,21 +163,25 @@ 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(this.canvas.width / image.width, this.canvas.height / image.height);
+            const scale = Math.min(area.width / image.width, area.height / image.height);
             finalWidth = image.width * scale;
             finalHeight = image.height * scale;
-            finalX = (this.canvas.width - finalWidth) / 2;
+            finalX = area.x + (area.width - finalWidth) / 2;
-            finalY = (this.canvas.height - finalHeight) / 2;
+            finalY = area.y + (area.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 = (this.canvas.width - finalWidth) / 2;
+            finalX = area.x + (area.width - finalWidth) / 2;
-            finalY = (this.canvas.height - finalHeight) / 2;
+            finalY = area.y + (area.height - finalHeight) / 2;
         }
 
         const layer = {
+            id: generateUUID(),
             image: image,
             imageId: imageId,
             x: finalX,
@@ -192,6 +202,11 @@ 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');
@@ -200,40 +215,93 @@ 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.selectedLayers.length === 0) return;
-        const selectedIndicesSet = new Set(this.canvas.selectedLayers.map(layer => this.canvas.layers.indexOf(layer)));
+        this.moveLayers(this.canvas.selectedLayers, { direction: 'up' });
-
-        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.selectedLayers.length === 0) return;
-        const selectedIndicesSet = new Set(this.canvas.selectedLayers.map(layer => this.canvas.layers.indexOf(layer)));
+        this.moveLayers(this.canvas.selectedLayers, { direction: 'down' });
-
-        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();
     }
 
     /**
@@ -248,7 +316,7 @@ export class CanvasLayers {
             layer.height *= scale;
         });
         this.canvas.render();
-        this.canvas.saveState();
+        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
     }
 
     /**
@@ -262,7 +330,7 @@ export class CanvasLayers {
             layer.rotation += angle;
         });
         this.canvas.render();
-        this.canvas.saveState();
+        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
     }
 
     getLayerAtPosition(worldX, worldY) {
@@ -318,7 +386,7 @@ export class CanvasLayers {
 
         await Promise.all(promises);
         this.canvas.render();
-        this.canvas.saveState();
+        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
     }
 
     async mirrorVertical() {
@@ -346,7 +414,7 @@ export class CanvasLayers {
 
         await Promise.all(promises);
         this.canvas.render();
-        this.canvas.saveState();
+        this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
     }
 
     async getLayerImageData(layer) {
@@ -968,4 +1036,157 @@ export class CanvasLayers {
             }, 'image/png');
         });
     }
+
+    /**
+     * Fuses (flattens and merges) selected layers into a single layer
+     */
+    async fuseLayers() {
+        if (this.canvas.selectedLayers.length < 2) {
+            alert("Please select at least 2 layers to fuse.");
+            return;
+        }
+
+        log.info(`Fusing ${this.canvas.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.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.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.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.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

@@ -0,0 +1,676 @@
+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.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.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.selectedLayers.length === 0) {
+            log.debug('No layers selected for deletion');
+            return;
+        }
+
+        log.info(`Deleting ${this.canvas.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.selectedLayers.includes(layer)) {
+            this.canvas.updateSelection([layer]);
+            this.renderLayers();
+        }
+
+        this.draggedElements = [...this.canvas.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.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/CanvasRenderer.js

@@ -82,8 +82,9 @@ export class CanvasRenderer {
         });
 
         this.drawCanvasOutline(ctx);
+        this.drawPendingGenerationAreas(ctx); // Draw snapshot outlines
         const maskImage = this.canvas.maskTool.getMask();
-        if (maskImage) {
+        if (maskImage && this.canvas.maskTool.isOverlayVisible) {
 
             ctx.save();
 
@@ -112,6 +113,13 @@ 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) {
@@ -321,4 +329,36 @@ 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/CanvasState.js

@@ -16,6 +16,25 @@ 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;
+        }
     }
 
 
@@ -182,47 +201,35 @@ export class CanvasState {
         img.src = imageSrc;
     }
 
-    async saveStateToDB(immediate = false) {
+    async saveStateToDB() {
-        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;
         }
 
-        const currentStateSignature = getStateSignature(this.canvas.layers);
+        log.info("Preparing state to be sent to worker...");
-        if (this.lastSavedStateSignature === currentStateSignature) {
+        const state = {
-            log.debug("State unchanged, skipping save to IndexedDB.");
+            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.");
             return;
         }
 
-        if (this.saveTimeout) {
+        if (this.stateSaverWorker) {
-            clearTimeout(this.saveTimeout);
+            log.info("Posting state to worker for background saving.");
-        }
+            this.stateSaverWorker.postMessage({
-
+                nodeId: this.canvas.node.id,
-        const saveFunction = withErrorHandling(async () => {
+                state: state
-            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);
+            log.warn("State saver worker not available. Saving on main thread.");
+            await setCanvasState(this.canvas.node.id, state);
         }
     }
 
@@ -264,10 +271,11 @@ 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(currentState) === getStateSignature(lastState)) {
+            if (getStateSignature(lastState) === currentStateSignature) {
                 return; 
             }
         }
@@ -279,7 +287,11 @@ export class CanvasState {
         }
         this.layersRedoStack = [];
         this.canvas.updateHistoryButtons();
-        this._debouncedSave = this._debouncedSave || debounce(() => this.saveStateToDB(), 500);
+        
+        // Użyj debouncingu, aby zapobiec zbyt częstym zapisom
+        if (!this._debouncedSave) {
+            this._debouncedSave = debounce(() => this.saveStateToDB(), 1000);
+        }
         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>Double Click (background)</kbd></td><td>Deselect all layers</td></tr>
+            <tr><td><kbd>Single Click (background)</kbd></td><td>Deselect all layers</td></tr>
         </table>
 
         <h4>Clipboard & I/O</h4>
@@ -444,10 +444,11 @@ 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>Shift + Click</kbd></td><td>Show blend mode & opacity menu</td></tr>
+            <tr><td><kbd>Right 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°</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>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>
@@ -477,6 +478,41 @@ 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: {
@@ -508,43 +544,10 @@ async function createCanvasWidget(node, widget, app) {
                         fontWeight: "bold",
                     },
                     onmouseenter: (e) => {
-                        if (canvas.maskTool.isActive) {
+                        const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
-                            helpTooltip.innerHTML = maskShortcuts;
+                        showTooltip(e.target, content);
-                        } 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: () => {
+                    onmouseleave: hideTooltip
-                        helpTooltip.style.display = 'none';
-                    }
                 }),
                 $el("button.painter-button.primary", {
                     textContent: "Add Image",
@@ -653,36 +656,9 @@ async function createCanvasWidget(node, widget, app) {
                                 `;
                             }
 
-                            helpTooltip.innerHTML = tooltipContent;
+                            showTooltip(e.target, 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: () => {
+                        onmouseleave: hideTooltip
-                            helpTooltip.style.display = 'none';
-                        }
                     })
                 ]),
             ]),
@@ -789,6 +765,11 @@ 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"),
@@ -845,9 +826,15 @@ async function createCanvasWidget(node, widget, app) {
                                 body: JSON.stringify({image: imageData})
                             });
 
-                            if (!response.ok) throw new Error(`Server error: ${response.status} - ${response.statusText}`);
-
                             const result = await response.json();
+
+                            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 mattedImage = new Image();
                             mattedImage.src = result.matted_image;
                             await mattedImage.decode();
@@ -859,7 +846,7 @@ async function createCanvasWidget(node, widget, app) {
                             canvas.saveState();
                         } catch (error) {
                             log.error("Matting error:", error);
-                            alert(`Error during matting process: ${error.message}`);
+                            alert(`Matting process failed:\n\n${error.message}`);
                         } finally {
                             button.classList.remove('loading');
                             button.removeChild(spinner);
@@ -871,18 +858,36 @@ async function createCanvasWidget(node, widget, app) {
                     textContent: "Undo",
                     title: "Undo last action",
                     disabled: true,
-                    onclick: () => canvas.canvasState.undo()
+                    onclick: () => canvas.undo()
                 }),
                 $el("button.painter-button", {
                     id: `redo-button-${node.id}`,
                     textContent: "Redo",
                     title: "Redo last undone action",
                     disabled: true,
-                    onclick: () => canvas.canvasState.redo()
+                    onclick: () => canvas.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",
@@ -1008,7 +1013,12 @@ async function createCanvasWidget(node, widget, app) {
         const selectionCount = canvas.selectedLayers.length;
         const hasSelection = selectionCount > 0;
         controlPanel.querySelectorAll('.requires-selection').forEach(btn => {
-            btn.disabled = !hasSelection;
+            // Special handling for Fuse button - requires at least 2 layers
+            if (btn.textContent === 'Fuse') {
+                btn.disabled = selectionCount < 2;
+            } else {
+                btn.disabled = !hasSelection;
+            }
         });
         const mattingBtn = controlPanel.querySelector('.matting-button');
         if (mattingBtn && !mattingBtn.classList.contains('loading')) {
@@ -1030,13 +1040,6 @@ 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 () => {
@@ -1058,18 +1061,41 @@ 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",
+            top: "60px", // Wartość początkowa, zostanie nadpisana przez ResizeObserver
             left: "10px",
-            right: "10px",
+            right: "270px",
             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');
     });
@@ -1090,7 +1116,7 @@ async function createCanvasWidget(node, widget, app) {
             width: "100%",
             height: "100%"
         }
-    }, [controlPanel, canvasContainer]);
+    }, [controlPanel, canvasContainer, layersPanelContainer]);
 
 
 
@@ -1157,6 +1183,10 @@ 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,6 +13,7 @@ export class MaskTool {
         this.x = 0;
         this.y = 0;
 
+        this.isOverlayVisible = true;
         this.isActive = false;
         this.brushSize = 20;
         this.brushStrength = 0.5;
@@ -280,6 +281,11 @@ 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/state-saver.worker.js

@@ -0,0 +1,93 @@
+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);
+    }
+};

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.0"
+version = "1.3.5"
 license = {file = "LICENSE"}
 dependencies = ["torch", "torchvision", "transformers", "aiohttp", "numpy", "tqdm", "Pillow"]