Update pyproject.toml

Added proper backend validation for both config.json and model.safetensors to confirm model availability. Updated frontend logic to use /matting/check-model response, preventing unnecessary download notifications.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,20 +1,75 @@
 name: 🐞 Bug Report
-description: Report an error or unexpected behavior
+description: 'Report something that is not working correctly'
 title: "[BUG] "
 labels: [bug]
 body:
+  - type: checkboxes
+    attributes:
+      label: Prerequisites
+      options:
+        - label: I am running the latest version of [ComfyUI](https://github.com/comfyanonymous/ComfyUI/releases)
+          required: true
+        - label: I am running the latest version of [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend/releases)
+          required: true
+        - label: I am running the latest version of LayerForge [Github](https://github.com/Azornes/Comfyui-LayerForge/releases) | [Manager](https://registry.comfy.org/publishers/azornes/nodes/layerforge)
+          required: true
+        - label: I have searched existing(open/closed) issues to make sure this isn't a duplicate
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: What happened?
+      description: A clear and concise description of the bug. Include screenshots or videos if helpful.
+      placeholder: |
+        Example: "When I connect a image to an Input, the connection line appears but the workflow fails to execute with an error message..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to Reproduce
+      description: How can I reproduce this issue? Please attach your workflow (JSON or PNG) if needed.
+      placeholder: |
+        1. Connect Image to Input
+        2. Click Queue Prompt
+        3. See error
+    validations:
+      required: true
+
+  - type: dropdown
+    id: severity
+    attributes:
+      label: How is this affecting you?
+      options:
+        - Crashes ComfyUI completely
+        - Workflow won't execute
+        - Feature doesn't work as expected
+        - Visual/UI issue only
+        - Minor inconvenience
+    validations:
+      required: true
+    
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: Which browser are you using?
+      options:
+        - Chrome/Chromium
+        - Firefox
+        - Safari
+        - Edge
+        - Other
+    validations:
+      required: true
+
   - type: markdown
     attributes:
       value: |
-        **Thank you for reporting a bug!**  
-        Please follow these steps to capture all necessary information:
-
-        ### ✅ Before You Report:
-        1. Make sure you have the **latest versions**:
-           - [ComfyUI Github](https://github.com/comfyanonymous/ComfyUI/releases)
-           - [LayerForge Github](https://github.com/Azornes/Comfyui-LayerForge/releases) or via [ComfyUI Node Manager](https://registry.comfy.org/publishers/azornes/nodes/layerforge)
-        2. Gather the required logs:
-        
+        ## Additional Information (Optional)
+        *The following fields help me debug complex issues but are not required for most bug reports.*
         ### 🔍 Enable Debug Logs (for **full** logs):
         
         #### 1. Edit `config.js` (Frontend Logs):
@@ -46,75 +101,13 @@ body:
         ```
 
         ➡️ **Restart ComfyUI** after applying these changes to activate full logging.
-
-  - type: input
-    id: environment
-    attributes:
-      label: Environment (OS, ComfyUI version, LayerForge version)
-      placeholder: e.g. Windows 11, ComfyUI v0.3.43, LayerForge v1.2.4
-    validations:
-      required: true
-
-  - type: input
-    id: browser
-    attributes:
-      label: Browser & Version
-      placeholder: e.g. Chrome 115.0.0, Firefox 120.1.0
-    validations:
-      required: true
-
   - type: textarea
-    id: what_happened
+    id: console-errors
     attributes:
-      label: What Happened?
-      placeholder: Describe the issue you encountered
-    validations:
-      required: true
-
-  - type: textarea
-    id: steps
-    attributes:
-      label: Steps to Reproduce
-      placeholder: |
-        1. …
-        2. …
-        3. …
-    validations:
-      required: true
-
-  - type: textarea
-    id: expected
-    attributes:
-      label: Expected Behavior
-      placeholder: Describe what you expected to happen
-    validations:
-      required: true
-
-  - type: textarea
-    id: actual
-    attributes:
-      label: Actual Behavior
-      placeholder: Describe what happened instead
-    validations:
-      required: true
-
-  - type: textarea
-    id: backend_logs
-    attributes:
-      label: ComfyUI (Backend) Logs
-      description: |
-        After enabling DEBUG logs, please:
-        1. Restart ComfyUI.
-        2. Reproduce the issue.
-        3. Copy-paste the newest **TEXT** logs from the terminal/console here.
-    validations:
-      required: true
-
-  - type: textarea
-    id: console_logs
-    attributes:
-      label: Browser Console Logs
+      label: Console Errors
       description: |
+        If you see red error messages in the browser console (F12), paste them here
+        More info:
         After enabling DEBUG logs:
         1. Open Developer Tools → Console.
           - Chrome/Edge (Win/Linux): `Ctrl+Shift+J`  
@@ -128,11 +121,25 @@ body:
            - Safari: 🗑 icon or `Cmd+K`.
         3. Reproduce the issue.
         4. Copy-paste the **TEXT** logs here (no screenshots).
-    validations:
-      required: true
+      render: javascript
 
-  - type: markdown
+  - type: textarea
+    id: logs
     attributes:
-      value: |
-        **Optional:** You can also **attach a screenshot or video** to demonstrate the issue visually.  
-        Simply drag & drop or paste image/video files into this issue form. GitHub supports common image formats and MP4/GIF files.
+      label: Logs
+      description: |
+        If relevant, paste any terminal/server logs here
+        More info:
+        After enabling DEBUG logs, please:
+        1. Restart ComfyUI.
+        2. Reproduce the issue.
+        3. Copy-paste the newest **TEXT** logs from the terminal/console here.
+      render: shell
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Context, Environment (OS, ComfyUI versions, ResolutionMaster version)
+      description: Any other information that might help (OS, GPU, specific nodes involved, etc.)
+
+      

.github/ISSUE_TEMPLATE/docs_request.yml

@@ -3,11 +3,17 @@ description: Suggest improvements or additions to documentation
 title: "[Docs] "
 labels: [documentation]
 body:
+  - type: markdown
+    attributes:
+      value: |
+        > This template is only for suggesting improvements or additions **to existing documentation**.  
+        > If you want to suggest a new feature, functionality, or enhancement for the project itself, please use the **Feature Request** template instead.  
+        > Thank you!
   - type: input
     id: doc_area
     attributes:
       label: Area of documentation
-      placeholder: e.g. Getting started, Node API, Deployment guide
+      placeholder: e.g. Key Features, Installation, Controls & Shortcuts
     validations:
       required: true
   - type: textarea

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -3,6 +3,22 @@ description: Suggest an idea for this project
 title: '[Feature Request]: '
 labels: ['enhancement']
 body:
+  - type: markdown
+    attributes:
+      value: |
+        ## Before suggesting a new feature...
+        Please make sure of the following:
+
+        1. You are using the latest version of the project  
+        2. The functionality you want to propose does not already exist  
+
+        I also recommend using an AI assistant to check whether the feature is already included.  
+        To do this, simply:
+
+        - Copy and paste the entire **README.md** file  
+        - Ask if your desired feature is already covered  
+
+        This helps to avoid duplicate requests for features that are already available.
   - type: markdown
     attributes:
       value: |

.github/workflows/ComfyUIdownloads.yml

@@ -20,7 +20,7 @@ jobs:
           max_downloads=0
           top_node_json="{}"
           
-          for i in {1..20}; do
+          for i in {1..3}; do
             echo "Pobieranie danych z próby $i..."
             curl -s https://api.comfy.org/nodes/layerforge > tmp_$i.json
             

README.md

@@ -28,13 +28,13 @@
 
 ---
 
-https://github.com/user-attachments/assets/0f557d87-fd5e-422b-ab7e-dbdd4cab156c
+https://github.com/user-attachments/assets/90fffb9a-dae2-4d19-aca2-5d47600f0a01
 
 https://github.com/user-attachments/assets/9c7ce1de-873b-4a3b-8579-0fc67642af3a
 
 ## ✨ Key Features
 
-- **Freeform Inpainting Area:** Draw any custom (non-rectangular) area directly inside the image for inpainting. The tool generates content that is coherent with the rest of the image, without requiring a brush.
+- **Freeform Inpainting Area:** Draw any custom (like a polygonal lasso tool) area directly inside the image for inpainting. The tool generates content that is coherent with the rest of the image, without requiring a brush.
 - **Persistent & Stateful:** Your work is automatically saved to the browser's IndexedDB, preserving your full canvas
   state (layers, positions, etc.) even after a page reload.
 - **Multi-Layer Editing:** Add, arrange, and manage multiple image layers with z-ordering.
@@ -51,9 +51,16 @@ https://github.com/user-attachments/assets/9c7ce1de-873b-4a3b-8579-0fc67642af3a
 - **AI-Powered Matting:** Optional background removal for any layer using the `BiRefNet` model.
 - **Efficient Memory Management:** An automatic garbage collection system cleans up unused image data to keep the
   browser's storage footprint low.
-- **Workflow Integration:** Outputs a final composite **image** and a combined alpha **mask**, ready for any other
-  ComfyUI node.
-
+- **Inputs**
+    - **Image Input (optional):** Accepts a single image.  
+    - **Multiple Images:** If you need to feed in more than one image, use the **core ComfyUI Batch Image node**.  
+        - This lets you route multiple images into LayerForge.  
+        - You can then stack, arrange, and edit them as separate layers inside the canvas.
+  - **Mask Input (optional):** Accepts a single external mask.  
+    - When provided, the mask is applied directly to the **output area** of the LayerForge canvas when `Run` is triggered in ComfyUI.  
+- **Outputs**
+    - **Composite Image:** The final flattened result of your layer stack.  
+    - **Combined Alpha Mask:** A merged mask representing all visible layers, ready for downstream nodes.  
 ---
 
 ## 🚀 Installation
@@ -71,16 +78,67 @@ https://github.com/user-attachments/assets/9c7ce1de-873b-4a3b-8579-0fc67642af3a
 3. Start up ComfyUI.
 
 ---
+
+## 🎯 Polygonal Lasso Inpainting Workflow
+
+LayerForge's newest feature allows you to draw custom polygonal selection areas and run inpainting directly within ComfyUI. This brings Photoshop-like lasso tool functionality to your AI workflows.
+
+### Setup Requirements
+
+1. **Enable Auto-Refresh:** In LayerForge's settings, enable `auto_refresh_after_generation`. Without this setting, the new generation output won't update automatically in the canvas.
+
+2. **Configure Auto-Apply (Optional):** If you want the mask to be automatically applied after drawing the shape, enable the `auto-apply shape mask` option in the Custom Output Area menu (appears on the left when a custom shape is active).
+
+### How to Use Polygonal Selection
+
+1. **Start Drawing:** Hold `Shift + S` and left-click to place the first point of your polygonal selection.
+
+2. **Add Points:** Continue left-clicking to place additional points. Each click adds a new vertex to your polygon.
+
+3. **Close Selection:** Click back on the first point (or close to it) to complete and close the polygonal selection.
+
+4. **Run Inpainting:** Once your selection is complete, run your inpainting workflow as usual. The generated content will seamlessly integrate with the existing image.
+
+### Advanced Shape Mask Options
+
+When using custom shapes, LayerForge provides several options to fine-tune the mask quality:
+
+- **Mask Expansion/Contraction:** Adjust the mask boundary by -300 to +300 pixels to ensure better blending
+- **Edge Feathering:** Apply 0-300px feathering to create smooth transitions and reduce visible seams
+- **Output Area Extension:** Extend the output area in all directions for more context during generation
+- **Manual Blend Menu:** Right-click to access manual color adjustment tools for perfect edge blending
+
+### Tips for Best Results
+
+* Use **feathering (10–50px)** depending on the **size of the image** to create smooth transitions between the inpainted area and existing content. Larger images generally benefit from more feathering.
+* Experiment with **mask expansion** (e.g., 10–20px) if you notice hard edges or visible seams.
+* Use **Output Area Extension** based on image size:
+
+  * **Extend the output area in all directions** to give the model more **context during generation**, especially for larger or more complex images.
+* If **visible seams** still appear in the inpainting results:
+
+  * Use the **Manual Blend Menu** (right-click on the mask area) to access **color and edge adjustment tools** for precise fine-tuning and seamless integration.
+* **Image placement behavior:**
+
+  * The generated or pasted image is automatically inserted into the area defined by the **blue shape** you draw.
+  * The model uses the area within the **dashed white preview outline** as the **full context** during generation.
+  * Make sure the dashed region covers enough surrounding content to preserve lighting, texture, and scene coherence.
+
+---
+
 ## 🧪 Workflow Example
 
 For a quick test of **LayerForge**, you can try the example workflow provided below. It demonstrates a basic compositing setup using the node.
 
 **🔗 Download Example Workflow**
 
-![📥 LayerForge\_Example1](https://github.com/user-attachments/assets/1b6e9feb-6549-4ed1-9ad2-011b477b8290)
+### 🔹 Simple Test Workflow
+This workflow allows **quick testing** of node behavior and output structures **without requiring additional models or complex dependencies**. Useful for inspecting how basic outputs are generated and connected.
+![📥 LayerForge_Example1](example_workflows/LayerForge_test_simple_workflow.png)
 
-
-![📥 LayerForge\_Example2](https://github.com/user-attachments/assets/7e594ebf-a047-46e1-972d-516b0f541743)
+### 🔹 Flux Inpainting Workflow
+This example shows a typical **inpainting setup using the Flux model**. It demonstrates how to integrate model-based fill with contextual generation for seamless content restoration.
+![📥 LayerForge_Example1](example_workflows/LayerForge_flux_fill_inpaint_example.png)
 
 
 
@@ -89,7 +147,6 @@ Click on the image above, then drag and drop it into your ComfyUI workflow windo
 
 ---
 
-
 ## 🎮 Controls & Shortcuts
 
 ### Canvas Control
@@ -100,7 +157,7 @@ Click on the image above, then drag and drop it into your ComfyUI workflow windo
 | `Mouse Wheel`                | Zoom view in/out           |
 | `Shift + Click (background)` | Start resizing canvas area |
 | `Shift + Ctrl + Click`       | Start moving entire canvas |
-| `Shift + S + Left Click`     | Draw custom shape for output area |
+| `Shift + S + Left Click`     | Draw custom polygonal shape for output area |
 | `Single Click (background)`  | Deselect all layers        |
 | `Esc`                        | Close fullscreen editor mode |
 | `Double Click (background)`  | Deselect all layers        |
@@ -151,6 +208,14 @@ Click on the image above, then drag and drop it into your ComfyUI workflow windo
 | **Clear Mask**               | Remove the entire mask                                                |
 | **Exit Mode**                | Click the "Draw Mask" button again                                    |
 
+---
+
+## 🤖 Model Compatibility
+
+LayerForge is designed to work with **any ComfyUI-compatible model**. The node outputs standard image and mask data that can be used with any model or workflow. LayerForge automatically inserts the generated image into the exact shape and position you draw with the blue polygon tool — but only if the generated image is saved properly, for example via a Save Image node.
+
+---
+
 ## 🧠 Optional: Matting Model (for image cutout)
 
 The "Matting" feature allows you to automatically generate a cutout (alpha mask) for a selected layer. This is an
@@ -165,7 +230,8 @@ optional feature and requires a model.
 
 ---
 
-## 🐞 Known Issue:
+## 🔧 Troubleshooting
+
 ### `node_id` not auto-filled → black output
 
 In some cases, **ComfyUI doesn't auto-fill the `node_id`** when adding a node.
@@ -189,5 +255,14 @@ This project is licensed under the MIT License. Feel free to use, modify, and di
 
 ---
 
+## 💖 Support / Sponsorship
+
+If you’d like to support my work:  
+👉 [GitHub Sponsors](https://github.com/sponsors/Azornes)
+
+## 🙏 Acknowledgments
+
 Based on the original [**Comfyui-Ycanvas**](https://github.com/yichengup/Comfyui-Ycanvas) by yichengup. This fork
 significantly enhances the editing capabilities for practical compositing workflows inside ComfyUI.
+
+Special thanks to the ComfyUI community for feedback, bug reports, and feature suggestions that help make LayerForge better.

__init__.py

@@ -4,16 +4,16 @@ import os
 # Add the custom node's directory to the Python path
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
 
-from .canvas_node import CanvasNode
+from .canvas_node import LayerForgeNode
 
-CanvasNode.setup_routes()
+LayerForgeNode.setup_routes()
 
 NODE_CLASS_MAPPINGS = {
-    "CanvasNode": CanvasNode
+    "LayerForgeNode": LayerForgeNode
 }
 
 NODE_DISPLAY_NAME_MAPPINGS = {
-    "CanvasNode": "Layer Forge (Editor, outpaintintg, Canvas Node)"
+    "LayerForgeNode": "Layer Forge (Editor, outpaintintg, Canvas Node)"
 }
 
 WEB_DIRECTORY = "./js"

canvas_node.py

@@ -64,6 +64,8 @@ class BiRefNetConfig(PretrainedConfig):
 
     def __init__(self, bb_pretrained=False, **kwargs):
         self.bb_pretrained = bb_pretrained
+        # Add the missing is_encoder_decoder attribute for compatibility with newer transformers
+        self.is_encoder_decoder = False
         super().__init__(**kwargs)
 
 
@@ -90,7 +92,7 @@ class BiRefNet(torch.nn.Module):
         return [output]
 
 
-class CanvasNode:
+class LayerForgeNode:
     _canvas_data_storage = {}
     _storage_lock = threading.Lock()
     
@@ -179,6 +181,10 @@ class CanvasNode:
                 "trigger": ("INT", {"default": 0, "min": 0, "max": 99999999, "step": 1}),
                 "node_id": ("STRING", {"default": "0"}),
             },
+            "optional": {
+                "input_image": ("IMAGE",),
+                "input_mask": ("MASK",),
+            },
             "hidden": {
                 "prompt": ("PROMPT",),
                 "unique_id": ("UNIQUE_ID",),
@@ -239,7 +245,7 @@ class CanvasNode:
 
     _processing_lock = threading.Lock()
 
-    def process_canvas_image(self, fit_on_add, show_preview, auto_refresh_after_generation, trigger, node_id, prompt=None, unique_id=None):
+    def process_canvas_image(self, fit_on_add, show_preview, auto_refresh_after_generation, trigger, node_id, input_image=None, input_mask=None, prompt=None, unique_id=None):
         
         try:
 
@@ -250,6 +256,81 @@ class CanvasNode:
 
             log_info(f"Lock acquired. Starting process_canvas_image for node_id: {node_id} (fallback unique_id: {unique_id})")
 
+            # Always store fresh input data, even if None, to clear stale data
+            log_info(f"Storing input data for node {node_id} - Image: {input_image is not None}, Mask: {input_mask is not None}")
+            
+            with self.__class__._storage_lock:
+                input_data = {}
+                
+                if input_image is not None:
+                    # Convert image tensor(s) to base64 - handle batch
+                    if isinstance(input_image, torch.Tensor):
+                        # Ensure correct shape [B, H, W, C]
+                        if input_image.dim() == 3:
+                            input_image = input_image.unsqueeze(0)
+                        
+                        batch_size = input_image.shape[0]
+                        log_info(f"Processing batch of {batch_size} image(s)")
+                        
+                        if batch_size == 1:
+                            # Single image - keep backward compatibility
+                            img_np = (input_image.squeeze(0).cpu().numpy() * 255).astype(np.uint8)
+                            pil_img = Image.fromarray(img_np, 'RGB')
+                            
+                            # Convert to base64
+                            buffered = io.BytesIO()
+                            pil_img.save(buffered, format="PNG")
+                            img_str = base64.b64encode(buffered.getvalue()).decode()
+                            input_data['input_image'] = f"data:image/png;base64,{img_str}"
+                            input_data['input_image_width'] = pil_img.width
+                            input_data['input_image_height'] = pil_img.height
+                            log_debug(f"Stored single input image: {pil_img.width}x{pil_img.height}")
+                        else:
+                            # Multiple images - store as array
+                            images_array = []
+                            for i in range(batch_size):
+                                img_np = (input_image[i].cpu().numpy() * 255).astype(np.uint8)
+                                pil_img = Image.fromarray(img_np, 'RGB')
+                                
+                                # Convert to base64
+                                buffered = io.BytesIO()
+                                pil_img.save(buffered, format="PNG")
+                                img_str = base64.b64encode(buffered.getvalue()).decode()
+                                images_array.append({
+                                    'data': f"data:image/png;base64,{img_str}",
+                                    'width': pil_img.width,
+                                    'height': pil_img.height
+                                })
+                                log_debug(f"Stored batch image {i+1}/{batch_size}: {pil_img.width}x{pil_img.height}")
+                            
+                            input_data['input_images_batch'] = images_array
+                            log_info(f"Stored batch of {batch_size} images")
+                
+                if input_mask is not None:
+                    # Convert mask tensor to base64
+                    if isinstance(input_mask, torch.Tensor):
+                        # Ensure correct shape
+                        if input_mask.dim() == 2:
+                            input_mask = input_mask.unsqueeze(0)
+                        if input_mask.dim() == 3 and input_mask.shape[0] == 1:
+                            input_mask = input_mask.squeeze(0)
+                        
+                        # Convert to numpy and then to PIL
+                        mask_np = (input_mask.cpu().numpy() * 255).astype(np.uint8)
+                        pil_mask = Image.fromarray(mask_np, 'L')
+                        
+                        # Convert to base64
+                        mask_buffered = io.BytesIO()
+                        pil_mask.save(mask_buffered, format="PNG")
+                        mask_str = base64.b64encode(mask_buffered.getvalue()).decode()
+                        input_data['input_mask'] = f"data:image/png;base64,{mask_str}"
+                        log_debug(f"Stored input mask: {pil_mask.width}x{pil_mask.height}")
+                
+                input_data['fit_on_add'] = fit_on_add
+                
+                # Store in a special key for input data (overwrites any previous data)
+                self.__class__._canvas_data_storage[f"{node_id}_input"] = input_data
+
             storage_key = node_id
             
             processed_image = None
@@ -433,6 +514,63 @@ class CanvasNode:
             log_info("WebSocket connection closed")
             return ws
 
+        @PromptServer.instance.routes.get("/layerforge/get_input_data/{node_id}")
+        async def get_input_data(request):
+            try:
+                node_id = request.match_info["node_id"]
+                log_debug(f"Checking for input data for node: {node_id}")
+                
+                with cls._storage_lock:
+                    input_key = f"{node_id}_input"
+                    input_data = cls._canvas_data_storage.get(input_key, None)
+                
+                if input_data:
+                    log_info(f"Input data found for node {node_id}, sending to frontend")
+                    return web.json_response({
+                        'success': True,
+                        'has_input': True,
+                        'data': input_data
+                    })
+                else:
+                    log_debug(f"No input data found for node {node_id}")
+                    return web.json_response({
+                        'success': True,
+                        'has_input': False
+                    })
+                    
+            except Exception as e:
+                log_error(f"Error in get_input_data: {str(e)}")
+                return web.json_response({
+                    'success': False,
+                    'error': str(e)
+                }, status=500)
+
+        @PromptServer.instance.routes.post("/layerforge/clear_input_data/{node_id}")
+        async def clear_input_data(request):
+            try:
+                node_id = request.match_info["node_id"]
+                log_info(f"Clearing input data for node: {node_id}")
+                
+                with cls._storage_lock:
+                    input_key = f"{node_id}_input"
+                    if input_key in cls._canvas_data_storage:
+                        del cls._canvas_data_storage[input_key]
+                        log_info(f"Input data cleared for node {node_id}")
+                    else:
+                        log_debug(f"No input data to clear for node {node_id}")
+                
+                return web.json_response({
+                    'success': True,
+                    'message': f'Input data cleared for node {node_id}'
+                })
+                    
+            except Exception as e:
+                log_error(f"Error in clear_input_data: {str(e)}")
+                return web.json_response({
+                    'success': False,
+                    'error': str(e)
+                }, status=500)
+
         @PromptServer.instance.routes.get("/ycnode/get_canvas_data/{node_id}")
         async def get_canvas_data(request):
             try:
@@ -619,16 +757,32 @@ class BiRefNetMatting:
                 full_model_path = os.path.join(self.base_path, "BiRefNet")
                 log_info(f"Loading BiRefNet model from {full_model_path}...")
                 try:
+                    # Try loading with additional configuration to handle compatibility issues
                     self.model = AutoModelForImageSegmentation.from_pretrained(
                         "ZhengPeng7/BiRefNet",
                         trust_remote_code=True,
-                        cache_dir=full_model_path
+                        cache_dir=full_model_path,
+                        # Add force_download=False to use cached version if available
+                        force_download=False,
+                        # Add local_files_only=False to allow downloading if needed
+                        local_files_only=False
                     )
                     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")
+                except AttributeError as e:
+                    if "'Config' object has no attribute 'is_encoder_decoder'" in str(e):
+                        log_error("Compatibility issue detected with transformers library. This has been fixed in the code.")
+                        log_error("If you're still seeing this error, please clear the model cache and try again.")
+                        raise RuntimeError(
+                            "Model configuration compatibility issue detected. "
+                            f"Please delete the model cache directory '{full_model_path}' and restart ComfyUI. "
+                            "This will download a fresh copy of the model with the updated configuration."
+                        ) from e
+                    else:
+                        raise e
                 except JSONDecodeError as e:                    
                     log_error(f"JSONDecodeError: Failed to load model from {full_model_path}. The model's config.json may be corrupted.")
                     raise RuntimeError(
@@ -758,6 +912,95 @@ class BiRefNetMatting:
 
 _matting_lock = None
 
+@PromptServer.instance.routes.get("/matting/check-model")
+async def check_matting_model(request):
+    """Check if the matting model is available and ready to use"""
+    try:
+        if not TRANSFORMERS_AVAILABLE:
+            return web.json_response({
+                "available": False,
+                "reason": "missing_dependency",
+                "message": "The 'transformers' library is required for the matting feature. Please install it by running: pip install transformers"
+            })
+        
+        # Check if model exists in cache
+        base_path = os.path.join(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))), "models")
+        model_path = os.path.join(base_path, "BiRefNet")
+        
+        # Look for the actual BiRefNet model structure
+        model_files_exist = False
+        if os.path.exists(model_path):
+            # BiRefNet model from Hugging Face has a specific structure
+            # Check for subdirectories that indicate the model is downloaded
+            existing_items = os.listdir(model_path) if os.path.isdir(model_path) else []
+            
+            # Look for the model subdirectory (usually named with the model ID)
+            model_subdirs = [d for d in existing_items if os.path.isdir(os.path.join(model_path, d)) and 
+                           (d.startswith("models--") or d == "ZhengPeng7--BiRefNet")]
+            
+            if model_subdirs:
+                # Found model subdirectory, check inside for actual model files
+                for subdir in model_subdirs:
+                    subdir_path = os.path.join(model_path, subdir)
+                    # Navigate through the cache structure
+                    if os.path.exists(os.path.join(subdir_path, "snapshots")):
+                        snapshots_path = os.path.join(subdir_path, "snapshots")
+                        snapshot_dirs = os.listdir(snapshots_path) if os.path.isdir(snapshots_path) else []
+                        
+                        for snapshot in snapshot_dirs:
+                            snapshot_path = os.path.join(snapshots_path, snapshot)
+                            snapshot_files = os.listdir(snapshot_path) if os.path.isdir(snapshot_path) else []
+                            
+                            # Check for essential files - BiRefNet uses model.safetensors
+                            has_config = "config.json" in snapshot_files
+                            has_model = "model.safetensors" in snapshot_files or "pytorch_model.bin" in snapshot_files
+                            has_backbone = "backbone_swin.pth" in snapshot_files or "swin_base_patch4_window12_384_22kto1k.pth" in snapshot_files
+                            has_birefnet = "birefnet.pth" in snapshot_files or any(f.endswith(".pth") for f in snapshot_files)
+                            
+                            # Model is valid if it has config and either model.safetensors or other model files
+                            if has_config and (has_model or has_backbone or has_birefnet):
+                                model_files_exist = True
+                                log_info(f"Found model files in: {snapshot_path} (config: {has_config}, model: {has_model})")
+                                break
+                    
+                    if model_files_exist:
+                        break
+            
+            # Also check if there are .pth files directly in the model_path
+            if not model_files_exist:
+                direct_files = existing_items
+                has_config = "config.json" in direct_files
+                has_model_files = any(f.endswith((".pth", ".bin", ".safetensors")) for f in direct_files)
+                model_files_exist = has_config and has_model_files
+                
+                if model_files_exist:
+                    log_info(f"Found model files directly in: {model_path}")
+        
+        if model_files_exist:
+            # Model files exist, assume it's ready
+            log_info("BiRefNet model files detected")
+            return web.json_response({
+                "available": True,
+                "reason": "ready",
+                "message": "Model is ready to use"
+            })
+        else:
+            log_info(f"BiRefNet model not found in {model_path}")
+            return web.json_response({
+                "available": False,
+                "reason": "not_downloaded",
+                "message": "The matting model needs to be downloaded. This will happen automatically when you first use the matting feature (requires internet connection).",
+                "model_path": model_path
+            })
+            
+    except Exception as e:
+        log_error(f"Error checking matting model: {str(e)}")
+        return web.json_response({
+            "available": False,
+            "reason": "error",
+            "message": f"Error checking model status: {str(e)}"
+        }, status=500)
+
 @PromptServer.instance.routes.post("/matting")
 async def matting(request):
     global _matting_lock
@@ -911,13 +1154,3 @@ def convert_tensor_to_base64(tensor, alpha_mask=None, original_alpha=None):
         log_error(f"Error in convert_tensor_to_base64: {str(e)}")
         log_debug(f"Tensor shape: {tensor.shape}, dtype: {tensor.dtype}")
         raise
-
-CanvasNode.setup_routes()
-
-NODE_CLASS_MAPPINGS = {
-    "CanvasNode": CanvasNode
-}
-
-NODE_DISPLAY_NAME_MAPPINGS = {
-    "CanvasNode": "LayerForge"
-}

example_workflows/LayerForge_flux_fill_inpaint_example.json

@@ -1,8 +1,8 @@
 {
   "id": "d26732fd-91ea-4503-8d0d-383544823cec",
   "revision": 0,
-  "last_node_id": 49,
-  "last_link_id": 112,
+  "last_node_id": 52,
+  "last_link_id": 114,
   "nodes": [
     {
       "id": 7,
@@ -18,7 +18,7 @@
       "flags": {
         "collapsed": true
       },
-      "order": 6,
+      "order": 8,
       "mode": 0,
       "inputs": [
         {
@@ -62,7 +62,7 @@
         58
       ],
       "flags": {},
-      "order": 8,
+      "order": 10,
       "mode": 0,
       "inputs": [
         {
@@ -103,7 +103,7 @@
         26
       ],
       "flags": {},
-      "order": 7,
+      "order": 9,
       "mode": 0,
       "inputs": [
         {
@@ -260,7 +260,7 @@
         46
       ],
       "flags": {},
-      "order": 12,
+      "order": 14,
       "mode": 0,
       "inputs": [
         {
@@ -304,7 +304,7 @@
         58
       ],
       "flags": {},
-      "order": 10,
+      "order": 12,
       "mode": 0,
       "inputs": [
         {
@@ -344,7 +344,7 @@
         138
       ],
       "flags": {},
-      "order": 9,
+      "order": 11,
       "mode": 0,
       "inputs": [
         {
@@ -365,12 +365,12 @@
         {
           "name": "pixels",
           "type": "IMAGE",
-          "link": 106
+          "link": 113
         },
         {
           "name": "mask",
           "type": "MASK",
-          "link": 107
+          "link": 114
         }
       ],
       "outputs": [
@@ -421,7 +421,7 @@
         262
       ],
       "flags": {},
-      "order": 11,
+      "order": 13,
       "mode": 0,
       "inputs": [
         {
@@ -462,7 +462,7 @@
         "widget_ue_connectable": {}
       },
       "widgets_values": [
-        858769863184862,
+        1006953529460557,
         "randomize",
         20,
         1,
@@ -526,7 +526,7 @@
         893.8499755859375
       ],
       "flags": {},
-      "order": 13,
+      "order": 15,
       "mode": 0,
       "inputs": [
         {
@@ -550,15 +550,15 @@
       "id": 23,
       "type": "CLIPTextEncode",
       "pos": [
-        -835.4583129882812,
-        878.8148193359375
+        -905.195556640625,
+        924.5140991210938
       ],
       "size": [
         311.0955810546875,
         108.43277740478516
       ],
       "flags": {},
-      "order": 5,
+      "order": 7,
       "mode": 0,
       "inputs": [
         {
@@ -591,48 +591,94 @@
       "bgcolor": "#353"
     },
     {
-      "id": 48,
-      "type": "CanvasNode",
+      "id": 51,
+      "type": "Note",
       "pos": [
-        -514.2837524414062,
-        543.1272583007812
+        -916.8970947265625,
+        476.72564697265625
       ],
       "size": [
-        1862.893798828125,
-        1237.79638671875
+        350.92510986328125,
+        250.50831604003906
       ],
       "flags": {},
       "order": 4,
       "mode": 0,
       "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "How to Use Polygonal Selection\n- Start Drawing: Hold Shift + S and left-click to place the first point of your polygonal selection.\n\n- Add Points: Continue left-clicking to place additional points. Each click adds a new vertex to your polygon.\n\n- Close Selection: Click back on the first point (or close to it) to complete and close the polygonal selection.\n\n- Run Inpainting: Once your selection is complete, run your inpainting workflow as usual. The generated content will seamlessly integrate with the existing image."
+      ],
+      "color": "#432",
+      "bgcolor": "#653"
+    },
+    {
+      "id": 52,
+      "type": "Note",
+      "pos": [
+        -911.10205078125,
+        769.1378173828125
+      ],
+      "size": [
+        350.28143310546875,
+        99.23915100097656
+      ],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "Add a description at the bottom to tell the model what to generate."
+      ],
+      "color": "#432",
+      "bgcolor": "#653"
+    },
+    {
+      "id": 50,
+      "type": "LayerForgeNode",
+      "pos": [
+        -553.9073486328125,
+        478.2644348144531
+      ],
+      "size": [
+        1879.927490234375,
+        1259.4072265625
+      ],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [],
       "outputs": [
         {
           "name": "image",
           "type": "IMAGE",
           "links": [
-            106
+            113
           ]
         },
         {
           "name": "mask",
           "type": "MASK",
           "links": [
-            107
+            114
           ]
         }
       ],
       "properties": {
-        "cnr_id": "Comfyui-Ycanvas",
-        "ver": "3941104bd59dd79c19d612da1b11c05d87c2ed1c",
-        "Node name for S&R": "CanvasNode",
+        "cnr_id": "layerforge",
+        "ver": "1bd261bee0c96c03cfac992ccabdea9544616a57",
+        "Node name for S&R": "LayerForgeNode",
         "widget_ue_connectable": {}
       },
       "widgets_values": [
         false,
         false,
         true,
-        963,
-        "48",
+        18,
+        "50",
         ""
       ]
     }
@@ -734,22 +780,6 @@
       0,
       "IMAGE"
     ],
-    [
-      106,
-      48,
-      0,
-      38,
-      3,
-      "IMAGE"
-    ],
-    [
-      107,
-      48,
-      1,
-      38,
-      4,
-      "MASK"
-    ],
     [
       110,
       38,
@@ -773,6 +803,22 @@
       8,
       0,
       "LATENT"
+    ],
+    [
+      113,
+      50,
+      0,
+      38,
+      3,
+      "IMAGE"
+    ],
+    [
+      114,
+      50,
+      1,
+      38,
+      4,
+      "MASK"
     ]
   ],
   "groups": [],
@@ -781,8 +827,8 @@
     "ds": {
       "scale": 0.6588450000000008,
       "offset": [
-        1318.77716124466,
-        -32.39290875553955
+        1117.7398801488407,
+        -110.40634975151642
       ]
     },
     "ue_links": [],

example_workflows/LayerForge_test_simple_workflow.json

@@ -1,19 +1,137 @@
 {
   "id": "c7ba7096-c52c-4978-8843-e87ce219b6a8",
   "revision": 0,
-  "last_node_id": 707,
-  "last_link_id": 1499,
+  "last_node_id": 710,
+  "last_link_id": 1505,
   "nodes": [
+    {
+      "id": 708,
+      "type": "LayerForgeNode",
+      "pos": [
+        -3077.55615234375,
+        -3358.0537109375
+      ],
+      "size": [
+        1150,
+        1000
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "links": [
+            1500
+          ]
+        },
+        {
+          "name": "mask",
+          "type": "MASK",
+          "links": [
+            1501
+          ]
+        }
+      ],
+      "properties": {
+        "cnr_id": "layerforge",
+        "ver": "1bd261bee0c96c03cfac992ccabdea9544616a57",
+        "widget_ue_connectable": {},
+        "Node name for S&R": "LayerForgeNode"
+      },
+      "widgets_values": [
+        false,
+        false,
+        false,
+        11,
+        "708",
+        ""
+      ]
+    },
+    {
+      "id": 709,
+      "type": "Reroute",
+      "pos": [
+        -1920.4510498046875,
+        -3559.688232421875
+      ],
+      "size": [
+        75,
+        26
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "",
+          "type": "*",
+          "link": 1500
+        }
+      ],
+      "outputs": [
+        {
+          "name": "",
+          "type": "IMAGE",
+          "links": [
+            1502,
+            1503
+          ]
+        }
+      ],
+      "properties": {
+        "showOutputText": false,
+        "horizontal": false
+      }
+    },
+    {
+      "id": 710,
+      "type": "Reroute",
+      "pos": [
+        -1917.6273193359375,
+        -3524.312744140625
+      ],
+      "size": [
+        75,
+        26
+      ],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "",
+          "type": "*",
+          "link": 1501
+        }
+      ],
+      "outputs": [
+        {
+          "name": "",
+          "type": "MASK",
+          "links": [
+            1504,
+            1505
+          ]
+        }
+      ],
+      "properties": {
+        "showOutputText": false,
+        "horizontal": false
+      }
+    },
     {
       "id": 369,
       "type": "PreviewImage",
       "pos": [
-        -1699.1021728515625,
-        -3355.60498046875
+        -1914.3177490234375,
+        -2807.92724609375
       ],
       "size": [
-        660.91162109375,
-        400.2092590332031
+        710,
+        450
       ],
       "flags": {},
       "order": 6,
@@ -38,21 +156,21 @@
       "id": 606,
       "type": "PreviewImage",
       "pos": [
-        -1911.126708984375,
-        -2916.072998046875
+        -1913.4202880859375,
+        -3428.773193359375
       ],
       "size": [
-        551.7399291992188,
-        546.8018798828125
+        700,
+        510
       ],
       "flags": {},
-      "order": 1,
+      "order": 3,
       "mode": 0,
       "inputs": [
         {
           "name": "images",
           "type": "IMAGE",
-          "link": 1495
+          "link": 1503
         }
       ],
       "outputs": [],
@@ -64,92 +182,30 @@
       },
       "widgets_values": []
     },
-    {
-      "id": 603,
-      "type": "PreviewImage",
-      "pos": [
-        -1344.1650390625,
-        -2915.117919921875
-      ],
-      "size": [
-        601.4136962890625,
-        527.1531372070312
-      ],
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 1236
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "cnr_id": "comfy-core",
-        "ver": "0.3.34",
-        "Node name for S&R": "PreviewImage",
-        "widget_ue_connectable": {}
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 680,
-      "type": "SaveImage",
-      "pos": [
-        -1025.9984130859375,
-        -3357.975341796875
-      ],
-      "size": [
-        278.8309020996094,
-        395.84002685546875
-      ],
-      "flags": {},
-      "order": 5,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 1465
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "cnr_id": "comfy-core",
-        "ver": "0.3.34",
-        "Node name for S&R": "SaveImage",
-        "widget_ue_connectable": {}
-      },
-      "widgets_values": [
-        "ComfyUI"
-      ]
-    },
     {
       "id": 442,
       "type": "JoinImageWithAlpha",
       "pos": [
-        -1902.5858154296875,
-        -3187.159423828125
+        -1190.1787109375,
+        -3237.75732421875
       ],
       "size": [
         176.86483764648438,
         46
       ],
       "flags": {},
-      "order": 2,
+      "order": 5,
       "mode": 0,
       "inputs": [
         {
           "name": "image",
           "type": "IMAGE",
-          "link": 1494
+          "link": 1502
         },
         {
           "name": "alpha",
           "type": "MASK",
-          "link": 1497
+          "link": 1505
         }
       ],
       "outputs": [
@@ -170,25 +226,87 @@
       },
       "widgets_values": []
     },
+    {
+      "id": 603,
+      "type": "PreviewImage",
+      "pos": [
+        -1188.5968017578125,
+        -3143.6875
+      ],
+      "size": [
+        640,
+        510
+      ],
+      "flags": {},
+      "order": 7,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 1236
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "cnr_id": "comfy-core",
+        "ver": "0.3.34",
+        "Node name for S&R": "PreviewImage",
+        "widget_ue_connectable": {}
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 680,
+      "type": "SaveImage",
+      "pos": [
+        -536.2315673828125,
+        -3135.49755859375
+      ],
+      "size": [
+        279.97137451171875,
+        282
+      ],
+      "flags": {},
+      "order": 8,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 1465
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "cnr_id": "comfy-core",
+        "ver": "0.3.34",
+        "Node name for S&R": "SaveImage",
+        "widget_ue_connectable": {}
+      },
+      "widgets_values": [
+        "ComfyUI"
+      ]
+    },
     {
       "id": 706,
       "type": "MaskToImage",
       "pos": [
-        -1901.433349609375,
-        -3332.2021484375
+        -1911.38525390625,
+        -2875.74658203125
       ],
       "size": [
         184.62362670898438,
         26
       ],
       "flags": {},
-      "order": 3,
+      "order": 4,
       "mode": 0,
       "inputs": [
         {
           "name": "mask",
           "type": "MASK",
-          "link": 1498
+          "link": 1504
         }
       ],
       "outputs": [
@@ -203,57 +321,10 @@
       "properties": {
         "cnr_id": "comfy-core",
         "ver": "0.3.44",
-        "widget_ue_connectable": {},
-        "Node name for S&R": "MaskToImage"
-      }
-    },
-    {
-      "id": 697,
-      "type": "CanvasNode",
-      "pos": [
-        -2968.572998046875,
-        -3347.89306640625
-      ],
-      "size": [
-        1044.9053955078125,
-        980.680908203125
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "image",
-          "type": "IMAGE",
-          "links": [
-            1494,
-            1495
-          ]
-        },
-        {
-          "name": "mask",
-          "type": "MASK",
-          "links": [
-            1497,
-            1498
-          ]
-        }
-      ],
-      "properties": {
-        "cnr_id": "Comfyui-Ycanvas",
-        "ver": "f6a491e83bab9481a2cac3367541a3b7803df9ab",
-        "Node name for S&R": "CanvasNode",
+        "Node name for S&R": "MaskToImage",
         "widget_ue_connectable": {}
       },
-      "widgets_values": [
-        true,
-        false,
-        "697",
-        15,
-        "697",
-        ""
-      ]
+      "widgets_values": []
     }
   ],
   "links": [
@@ -273,38 +344,6 @@
       0,
       "IMAGE"
     ],
-    [
-      1494,
-      697,
-      0,
-      442,
-      0,
-      "IMAGE"
-    ],
-    [
-      1495,
-      697,
-      0,
-      606,
-      0,
-      "IMAGE"
-    ],
-    [
-      1497,
-      697,
-      1,
-      442,
-      1,
-      "MASK"
-    ],
-    [
-      1498,
-      697,
-      1,
-      706,
-      0,
-      "MASK"
-    ],
     [
       1499,
       706,
@@ -312,16 +351,64 @@
       369,
       0,
       "IMAGE"
+    ],
+    [
+      1500,
+      708,
+      0,
+      709,
+      0,
+      "*"
+    ],
+    [
+      1501,
+      708,
+      1,
+      710,
+      0,
+      "*"
+    ],
+    [
+      1502,
+      709,
+      0,
+      442,
+      0,
+      "IMAGE"
+    ],
+    [
+      1503,
+      709,
+      0,
+      606,
+      0,
+      "IMAGE"
+    ],
+    [
+      1504,
+      710,
+      0,
+      706,
+      0,
+      "MASK"
+    ],
+    [
+      1505,
+      710,
+      0,
+      442,
+      1,
+      "MASK"
     ]
   ],
   "groups": [],
   "config": {},
   "extra": {
     "ds": {
-      "scale": 0.9646149645000008,
+      "scale": 0.7972024500000005,
       "offset": [
-        3002.5649125522764,
-        3543.443319064718
+        3208.3419155969927,
+        3617.011371212156
       ]
     },
     "ue_links": [],

js/BatchPreviewManager.js

@@ -123,10 +123,14 @@ export class BatchPreviewManager {
         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');
-                const iconContainer = toggleBtn.querySelector('.mask-icon-container');
+            const toggleSwitch = document.getElementById(`toggle-mask-switch-${this.canvas.node.id}`);
+            if (toggleSwitch) {
+                const checkbox = toggleSwitch.querySelector('input[type="checkbox"]');
+                if (checkbox) {
+                    checkbox.checked = false;
+                }
+                toggleSwitch.classList.remove('primary');
+                const iconContainer = toggleSwitch.querySelector('.switch-icon');
                 if (iconContainer) {
                     iconContainer.style.opacity = '0.5';
                 }
@@ -165,10 +169,14 @@ export class BatchPreviewManager {
         this.canvas.render();
         if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) {
             this.canvas.maskTool.toggleOverlayVisibility();
-            const toggleBtn = document.getElementById(`toggle-mask-btn-${String(this.canvas.node.id)}`);
-            if (toggleBtn) {
-                toggleBtn.classList.add('primary');
-                const iconContainer = toggleBtn.querySelector('.mask-icon-container');
+            const toggleSwitch = document.getElementById(`toggle-mask-switch-${String(this.canvas.node.id)}`);
+            if (toggleSwitch) {
+                const checkbox = toggleSwitch.querySelector('input[type="checkbox"]');
+                if (checkbox) {
+                    checkbox.checked = true;
+                }
+                toggleSwitch.classList.add('primary');
+                const iconContainer = toggleSwitch.querySelector('.switch-icon');
                 if (iconContainer) {
                     iconContainer.style.opacity = '1';
                 }

js/Canvas.js

@@ -61,9 +61,20 @@ export class Canvas {
         });
         this.offscreenCanvas = offscreenCanvas;
         this.offscreenCtx = offscreenCtx;
+        // Create overlay canvas for brush cursor and other lightweight overlays
+        const { canvas: overlayCanvas, ctx: overlayCtx } = createCanvas(0, 0, '2d', {
+            alpha: true,
+            willReadFrequently: false
+        });
+        if (!overlayCtx)
+            throw new Error("Could not create overlay canvas context");
+        this.overlayCanvas = overlayCanvas;
+        this.overlayCtx = overlayCtx;
         this.canvasContainer = null;
         this.dataInitialized = false;
         this.pendingDataCheck = null;
+        this.pendingInputDataCheck = null;
+        this.inputDataLoaded = false;
         this.imageCache = new Map();
         this.requestSaveState = () => { };
         this.outputAreaShape = null;
@@ -363,6 +374,10 @@ export class Canvas {
             return widget ? widget.value : false;
         };
         const handleExecutionStart = () => {
+            // Check for input data when execution starts, but don't reset the flag
+            log.debug('Execution started, checking for input data...');
+            // On start, only allow images; mask should load on mask-connect or after execution completes
+            this.canvasIO.checkForInputData({ allowImage: true, allowMask: false, reason: 'execution_start' });
             if (getAutoRefreshValue()) {
                 lastExecutionStartTime = Date.now();
                 // Store a snapshot of the context for the upcoming batch
@@ -385,6 +400,9 @@ export class Canvas {
             }
         };
         const handleExecutionSuccess = async () => {
+            // Always check for input data after execution completes
+            log.debug('Execution success, checking for input data...');
+            await this.canvasIO.checkForInputData({ allowImage: true, allowMask: true, reason: 'execution_success' });
             if (getAutoRefreshValue()) {
                 log.info('Auto-refresh triggered, importing latest images.');
                 if (!this.pendingBatchContext) {

js/CanvasIO.js

@@ -2,6 +2,7 @@ import { createCanvas } from "./utils/CommonUtils.js";
 import { createModuleLogger } from "./utils/LoggerUtils.js";
 import { showErrorNotification } from "./utils/NotificationUtils.js";
 import { webSocketManager } from "./utils/WebSocketManager.js";
+import { scaleImageToFit, createImageFromSource, tensorToImageData, createImageFromImageData } from "./utils/ImageUtils.js";
 const log = createModuleLogger('CanvasIO');
 export class CanvasIO {
     constructor(canvas) {
@@ -238,23 +239,21 @@ export class CanvasIO {
         }
         catch (error) {
             log.error(`Failed to send data for node ${nodeId}:`, error);
-            throw new Error(`Failed to get confirmation from server for node ${nodeId}. The workflow might not have the latest canvas data.`);
+            throw new Error(`Failed to get confirmation from server for node ${nodeId}. ` +
+                `Make sure that the nodeId: (${nodeId}) matches the "node_id" value in the node options. If they don't match, you may need to manually set the node_id to ${nodeId}.` +
+                `If the issue persists, try using a different browser. Some issues have been observed specifically with portable versions of Chrome, ` +
+                `which may have limitations related to memory or WebSocket handling. Consider testing in a standard Chrome installation, Firefox, or another browser.`);
         }
     }
     async addInputToCanvas(inputImage, inputMask) {
         try {
             log.debug("Adding input to canvas:", { inputImage });
-            const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(inputImage.width, inputImage.height);
-            if (!tempCtx)
-                throw new Error("Could not create temp context");
-            const imgData = new ImageData(new Uint8ClampedArray(inputImage.data), inputImage.width, inputImage.height);
-            tempCtx.putImageData(imgData, 0, 0);
-            const image = new Image();
-            await new Promise((resolve, reject) => {
-                image.onload = resolve;
-                image.onerror = reject;
-                image.src = tempCanvas.toDataURL();
-            });
+            // Use unified tensorToImageData for RGB image
+            const imageData = tensorToImageData(inputImage, 'rgb');
+            if (!imageData)
+                throw new Error("Failed to convert input image tensor");
+            // Create HTMLImageElement from ImageData
+            const image = await createImageFromImageData(imageData);
             const bounds = this.canvas.outputAreaBounds;
             const scale = Math.min(bounds.width / inputImage.width * 0.8, bounds.height / inputImage.height * 0.8);
             const layer = await this.canvas.canvasLayers.addLayerWithImage(image, {
@@ -280,17 +279,10 @@ export class CanvasIO {
             if (!tensor || !tensor.data || !tensor.width || !tensor.height) {
                 throw new Error("Invalid tensor data");
             }
-            const { canvas, ctx } = createCanvas(tensor.width, tensor.height, '2d', { willReadFrequently: true });
-            if (!ctx)
-                throw new Error("Could not create canvas context");
-            const imageData = new ImageData(new Uint8ClampedArray(tensor.data), tensor.width, tensor.height);
-            ctx.putImageData(imageData, 0, 0);
-            return new Promise((resolve, reject) => {
-                const img = new Image();
-                img.onload = () => resolve(img);
-                img.onerror = (e) => reject(new Error("Failed to load image: " + e));
-                img.src = canvas.toDataURL();
-            });
+            const imageData = tensorToImageData(tensor, 'rgb');
+            if (!imageData)
+                throw new Error("Failed to convert tensor to image data");
+            return await createImageFromImageData(imageData);
         }
         catch (error) {
             log.error("Error converting tensor to image:", error);
@@ -311,12 +303,26 @@ export class CanvasIO {
     async initNodeData() {
         try {
             log.info("Starting node data initialization...");
+            // First check for input data from the backend (new feature)
+            await this.checkForInputData();
+            // If we've already loaded input data, don't continue with old initialization
+            if (this.canvas.inputDataLoaded) {
+                log.debug("Input data already loaded, skipping old initialization");
+                this.canvas.dataInitialized = true;
+                return;
+            }
             if (!this.canvas.node || !this.canvas.node.inputs) {
                 log.debug("Node or inputs not ready");
                 return this.scheduleDataCheck();
             }
             if (this.canvas.node.inputs[0] && this.canvas.node.inputs[0].link) {
                 const imageLinkId = this.canvas.node.inputs[0].link;
+                // Check if we already loaded this link
+                if (this.canvas.lastLoadedLinkId === imageLinkId) {
+                    log.debug(`Link ${imageLinkId} already loaded via new system, marking as initialized`);
+                    this.canvas.dataInitialized = true;
+                    return;
+                }
                 const imageData = window.app.nodeOutputs[imageLinkId];
                 if (imageData) {
                     log.debug("Found image data:", imageData);
@@ -328,6 +334,10 @@ export class CanvasIO {
                     return this.scheduleDataCheck();
                 }
             }
+            else {
+                // No input connected, mark as initialized to stop repeated checks
+                this.canvas.dataInitialized = true;
+            }
             if (this.canvas.node.inputs[1] && this.canvas.node.inputs[1].link) {
                 const maskLinkId = this.canvas.node.inputs[1].link;
                 const maskData = window.app.nodeOutputs[maskLinkId];
@@ -342,6 +352,390 @@ export class CanvasIO {
             return this.scheduleDataCheck();
         }
     }
+    async checkForInputData(options) {
+        try {
+            const nodeId = this.canvas.node.id;
+            const allowImage = options?.allowImage ?? true;
+            const allowMask = options?.allowMask ?? true;
+            const reason = options?.reason ?? 'unspecified';
+            log.info(`Checking for input data for node ${nodeId}... opts: image=${allowImage}, mask=${allowMask}, reason=${reason}`);
+            // Track loaded links separately for image and mask
+            let imageLoaded = false;
+            let maskLoaded = false;
+            let imageChanged = false;
+            // First, try to get data from connected node's output if available (IMAGES)
+            if (allowImage && this.canvas.node.inputs && this.canvas.node.inputs[0] && this.canvas.node.inputs[0].link) {
+                const linkId = this.canvas.node.inputs[0].link;
+                const graph = this.canvas.node.graph;
+                // Always check if images have changed first
+                if (graph) {
+                    const link = graph.links[linkId];
+                    if (link) {
+                        const sourceNode = graph.getNodeById(link.origin_id);
+                        if (sourceNode && sourceNode.imgs && sourceNode.imgs.length > 0) {
+                            // Create current batch identifier (all image sources combined)
+                            const currentBatchImageSrcs = sourceNode.imgs.map((img) => img.src).join('|');
+                            // Check if this is the same link we loaded before
+                            if (this.canvas.lastLoadedLinkId === linkId) {
+                                // Same link, check if images actually changed
+                                if (this.canvas.lastLoadedImageSrc !== currentBatchImageSrcs) {
+                                    log.info(`Batch images changed for link ${linkId} (${sourceNode.imgs.length} images), will reload...`);
+                                    log.debug(`Previous batch hash: ${this.canvas.lastLoadedImageSrc?.substring(0, 100)}...`);
+                                    log.debug(`Current batch hash: ${currentBatchImageSrcs.substring(0, 100)}...`);
+                                    imageChanged = true;
+                                    // Clear the inputDataLoaded flag to force reload from backend
+                                    this.canvas.inputDataLoaded = false;
+                                    // Clear the lastLoadedImageSrc to force reload
+                                    this.canvas.lastLoadedImageSrc = undefined;
+                                    // Clear backend data to force fresh load
+                                    fetch(`/layerforge/clear_input_data/${nodeId}`, { method: 'POST' })
+                                        .then(() => log.debug("Backend input data cleared due to image change"))
+                                        .catch(err => log.error("Failed to clear backend data:", err));
+                                }
+                                else {
+                                    log.debug(`Batch images for link ${linkId} unchanged (${sourceNode.imgs.length} images)`);
+                                    imageLoaded = true;
+                                }
+                            }
+                            else {
+                                // Different link or first load
+                                log.info(`New link ${linkId} detected, will load ${sourceNode.imgs.length} images`);
+                                imageChanged = false; // It's not a change, it's a new link
+                                imageLoaded = false; // Need to load
+                                // Reset the inputDataLoaded flag for new link
+                                this.canvas.inputDataLoaded = false;
+                            }
+                        }
+                    }
+                }
+                if (!imageLoaded || imageChanged) {
+                    // Reset the inputDataLoaded flag when images change
+                    if (imageChanged) {
+                        this.canvas.inputDataLoaded = false;
+                        log.info("Resetting inputDataLoaded flag due to image change");
+                    }
+                    if (this.canvas.node.graph) {
+                        const graph2 = this.canvas.node.graph;
+                        const link2 = graph2.links[linkId];
+                        if (link2) {
+                            const sourceNode = graph2.getNodeById(link2.origin_id);
+                            if (sourceNode && sourceNode.imgs && sourceNode.imgs.length > 0) {
+                                // The connected node has images in its output - handle multiple images (batch)
+                                log.info(`Found ${sourceNode.imgs.length} image(s) in connected node's output, loading all`);
+                                // Create a combined source identifier for batch detection
+                                const batchImageSrcs = sourceNode.imgs.map((img) => img.src).join('|');
+                                // Mark this link and batch sources as loaded
+                                this.canvas.lastLoadedLinkId = linkId;
+                                this.canvas.lastLoadedImageSrc = batchImageSrcs;
+                                // Don't clear layers - just add new ones
+                                if (imageChanged) {
+                                    log.info("Image change detected, will add new layers");
+                                }
+                                // Determine add mode
+                                const fitOnAddWidget = this.canvas.node.widgets.find((w) => w.name === "fit_on_add");
+                                const addMode = (fitOnAddWidget && fitOnAddWidget.value) ? 'fit' : 'center';
+                                // Add all images from the batch as separate layers
+                                for (let i = 0; i < sourceNode.imgs.length; i++) {
+                                    const img = sourceNode.imgs[i];
+                                    await this.canvas.canvasLayers.addLayerWithImage(img, { name: `Batch Image ${i + 1}` }, // Give each layer a unique name
+                                    addMode, this.canvas.outputAreaBounds);
+                                    log.debug(`Added batch image ${i + 1}/${sourceNode.imgs.length} to canvas`);
+                                }
+                                this.canvas.inputDataLoaded = true;
+                                imageLoaded = true;
+                                log.info(`All ${sourceNode.imgs.length} input images from batch added as separate layers`);
+                                this.canvas.render();
+                                this.canvas.saveState();
+                            }
+                        }
+                    }
+                }
+            }
+            // Check for mask input separately (from nodeOutputs) ONLY when allowed
+            if (allowMask && this.canvas.node.inputs && this.canvas.node.inputs[1] && this.canvas.node.inputs[1].link) {
+                const maskLinkId = this.canvas.node.inputs[1].link;
+                // Check if we already loaded this mask link
+                if (this.canvas.lastLoadedMaskLinkId === maskLinkId) {
+                    log.debug(`Mask link ${maskLinkId} already loaded`);
+                    maskLoaded = true;
+                }
+                else {
+                    // Try to get mask tensor from nodeOutputs using origin_id (not link id)
+                    const graph = this.canvas.node.graph;
+                    let maskOutput = null;
+                    if (graph) {
+                        const link = graph.links[maskLinkId];
+                        if (link && link.origin_id) {
+                            // Use origin_id to get the actual node output
+                            const nodeOutput = window.app?.nodeOutputs?.[link.origin_id];
+                            log.debug(`Looking for mask output from origin node ${link.origin_id}, found:`, !!nodeOutput);
+                            if (nodeOutput) {
+                                log.debug(`Node ${link.origin_id} output structure:`, {
+                                    hasData: !!nodeOutput.data,
+                                    hasShape: !!nodeOutput.shape,
+                                    dataType: typeof nodeOutput.data,
+                                    shapeType: typeof nodeOutput.shape,
+                                    keys: Object.keys(nodeOutput)
+                                });
+                                // Only use if it has actual tensor data
+                                if (nodeOutput.data && nodeOutput.shape) {
+                                    maskOutput = nodeOutput;
+                                }
+                            }
+                        }
+                    }
+                    if (maskOutput && maskOutput.data && maskOutput.shape) {
+                        try {
+                            // Derive dimensions from shape or explicit width/height
+                            let width = maskOutput.width || 0;
+                            let height = maskOutput.height || 0;
+                            const shape = maskOutput.shape; // e.g. [1,H,W] or [1,H,W,1]
+                            if ((!width || !height) && Array.isArray(shape)) {
+                                if (shape.length >= 3) {
+                                    height = shape[1];
+                                    width = shape[2];
+                                }
+                                else if (shape.length === 2) {
+                                    height = shape[0];
+                                    width = shape[1];
+                                }
+                            }
+                            if (!width || !height) {
+                                throw new Error("Cannot determine mask dimensions from nodeOutputs");
+                            }
+                            // Determine channels count
+                            let channels = 1;
+                            if (Array.isArray(shape) && shape.length >= 4) {
+                                channels = shape[3];
+                            }
+                            else if (maskOutput.channels) {
+                                channels = maskOutput.channels;
+                            }
+                            else {
+                                const len = maskOutput.data.length;
+                                channels = Math.max(1, Math.floor(len / (width * height)));
+                            }
+                            // Use unified tensorToImageData for masks
+                            const maskImageData = tensorToImageData(maskOutput, 'grayscale');
+                            if (!maskImageData)
+                                throw new Error("Failed to convert mask tensor to image data");
+                            // Create canvas and put image data
+                            const { canvas: maskCanvas, ctx } = createCanvas(width, height, '2d', { willReadFrequently: true });
+                            if (!ctx)
+                                throw new Error("Could not create mask context");
+                            ctx.putImageData(maskImageData, 0, 0);
+                            // Convert to HTMLImageElement
+                            const maskImg = await createImageFromSource(maskCanvas.toDataURL());
+                            // Respect fit_on_add (scale to output area)
+                            const widgets = this.canvas.node.widgets;
+                            const fitOnAddWidget = widgets ? widgets.find((w) => w.name === "fit_on_add") : null;
+                            const shouldFit = fitOnAddWidget && fitOnAddWidget.value;
+                            let finalMaskImg = maskImg;
+                            if (shouldFit) {
+                                const bounds = this.canvas.outputAreaBounds;
+                                finalMaskImg = await scaleImageToFit(maskImg, bounds.width, bounds.height);
+                            }
+                            // Apply to MaskTool (centers internally)
+                            if (this.canvas.maskTool) {
+                                this.canvas.maskTool.setMask(finalMaskImg, true);
+                                this.canvas.maskAppliedFromInput = true;
+                                this.canvas.canvasState.saveMaskState();
+                                this.canvas.render();
+                                // Mark this mask link as loaded to avoid re-applying
+                                this.canvas.lastLoadedMaskLinkId = maskLinkId;
+                                maskLoaded = true;
+                                log.info("Applied input mask from nodeOutputs immediately on connection" + (shouldFit ? " (fitted to output area)" : ""));
+                            }
+                        }
+                        catch (err) {
+                            log.warn("Failed to apply mask from nodeOutputs immediately; will wait for backend input_mask after execution", err);
+                        }
+                    }
+                    else {
+                        // nodeOutputs exist but don't have tensor data yet (need workflow execution)
+                        log.info(`Mask node ${this.canvas.node.graph?.links[maskLinkId]?.origin_id} found but has no tensor data yet. Mask will be applied automatically after workflow execution.`);
+                        // Don't retry - data won't be available until workflow runs
+                    }
+                }
+            }
+            // Only check backend if we have actual inputs connected
+            const hasImageInput = this.canvas.node.inputs && this.canvas.node.inputs[0] && this.canvas.node.inputs[0].link;
+            const hasMaskInput = this.canvas.node.inputs && this.canvas.node.inputs[1] && this.canvas.node.inputs[1].link;
+            // If mask input is disconnected, clear any currently applied mask to ensure full separation
+            if (!hasMaskInput) {
+                this.canvas.maskAppliedFromInput = false;
+                this.canvas.lastLoadedMaskLinkId = undefined;
+                log.info("Mask input disconnected - cleared mask to enforce separation from input_image");
+            }
+            if (!hasImageInput && !hasMaskInput) {
+                log.debug("No inputs connected, skipping backend check");
+                this.canvas.inputDataLoaded = true;
+                return;
+            }
+            // Skip backend check during mask connection if we didn't get immediate data
+            if (reason === "mask_connect" && !maskLoaded) {
+                log.info("No immediate mask data available during connection, skipping backend check to avoid stale data. Will check after execution.");
+                return;
+            }
+            // Check backend for input data only if we have connected inputs
+            const response = await fetch(`/layerforge/get_input_data/${nodeId}`);
+            const result = await response.json();
+            if (result.success && result.has_input) {
+                // Dedupe: skip only if backend payload matches last loaded batch hash
+                let backendBatchHash;
+                if (result.data?.input_images_batch && Array.isArray(result.data.input_images_batch)) {
+                    backendBatchHash = result.data.input_images_batch.map((i) => i.data).join('|');
+                }
+                else if (result.data?.input_image) {
+                    backendBatchHash = result.data.input_image;
+                }
+                // Check mask separately - don't skip if only images are unchanged AND mask is actually connected AND allowed
+                const shouldCheckMask = hasMaskInput && allowMask;
+                if (backendBatchHash && this.canvas.lastLoadedImageSrc === backendBatchHash && !shouldCheckMask) {
+                    log.debug("Backend input data unchanged and no mask to check, skipping reload");
+                    this.canvas.inputDataLoaded = true;
+                    return;
+                }
+                else if (backendBatchHash && this.canvas.lastLoadedImageSrc === backendBatchHash && shouldCheckMask) {
+                    log.debug("Images unchanged but need to check mask, continuing...");
+                    imageLoaded = true; // Mark images as already loaded to skip reloading them
+                }
+                // Check if we already loaded image data (by checking the current link)
+                if (allowImage && !imageLoaded && this.canvas.node.inputs && this.canvas.node.inputs[0] && this.canvas.node.inputs[0].link) {
+                    const currentLinkId = this.canvas.node.inputs[0].link;
+                    if (this.canvas.lastLoadedLinkId !== currentLinkId) {
+                        // Mark this link as loaded
+                        this.canvas.lastLoadedLinkId = currentLinkId;
+                        imageLoaded = false; // Will load from backend
+                    }
+                }
+                // Check for mask data from backend ONLY when mask input is actually connected AND allowed
+                // Only reset if the mask link actually changed
+                if (allowMask && hasMaskInput && this.canvas.node.inputs && this.canvas.node.inputs[1]) {
+                    const currentMaskLinkId = this.canvas.node.inputs[1].link;
+                    // Only reset if this is a different mask link than what we loaded before
+                    if (this.canvas.lastLoadedMaskLinkId !== currentMaskLinkId) {
+                        maskLoaded = false;
+                        log.debug(`New mask input detected (${currentMaskLinkId}), will check backend for mask data`);
+                    }
+                    else {
+                        log.debug(`Same mask input (${currentMaskLinkId}), mask already loaded`);
+                        maskLoaded = true;
+                    }
+                }
+                else {
+                    // No mask input connected, or mask loading not allowed right now
+                    maskLoaded = true; // Mark as loaded to skip mask processing
+                    if (!allowMask) {
+                        log.debug("Mask loading is currently disabled by caller, skipping mask check");
+                    }
+                    else {
+                        log.debug("No mask input connected, skipping mask check");
+                    }
+                }
+                log.info("Input data found from backend, adding to canvas");
+                const inputData = result.data;
+                // Compute backend batch hash for dedupe and state
+                let backendHashNow;
+                if (inputData?.input_images_batch && Array.isArray(inputData.input_images_batch)) {
+                    backendHashNow = inputData.input_images_batch.map((i) => i.data).join('|');
+                }
+                else if (inputData?.input_image) {
+                    backendHashNow = inputData.input_image;
+                }
+                // Just update the hash without removing any layers
+                if (backendHashNow) {
+                    log.info("New backend input data detected, adding new layers");
+                    this.canvas.lastLoadedImageSrc = backendHashNow;
+                }
+                // Mark that we've loaded input data for this execution
+                this.canvas.inputDataLoaded = true;
+                // Determine add mode based on fit_on_add setting
+                const widgets = this.canvas.node.widgets;
+                const fitOnAddWidget = widgets ? widgets.find((w) => w.name === "fit_on_add") : null;
+                const addMode = (fitOnAddWidget && fitOnAddWidget.value) ? 'fit' : 'center';
+                // Load input image(s) only if image input is actually connected, not already loaded, and allowed
+                if (allowImage && !imageLoaded && hasImageInput) {
+                    if (inputData.input_images_batch) {
+                        // Handle batch of images
+                        const batch = inputData.input_images_batch;
+                        log.info(`Processing batch of ${batch.length} images from backend`);
+                        for (let i = 0; i < batch.length; i++) {
+                            const imgData = batch[i];
+                            const img = await createImageFromSource(imgData.data);
+                            // Add image to canvas with unique name
+                            await this.canvas.canvasLayers.addLayerWithImage(img, { name: `Batch Image ${i + 1}` }, addMode, this.canvas.outputAreaBounds);
+                            log.debug(`Added batch image ${i + 1}/${batch.length} from backend`);
+                        }
+                        log.info(`All ${batch.length} batch images added from backend`);
+                        this.canvas.render();
+                        this.canvas.saveState();
+                    }
+                    else if (inputData.input_image) {
+                        // Handle single image (backward compatibility)
+                        const img = await createImageFromSource(inputData.input_image);
+                        // Add image to canvas at output area position
+                        await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode, this.canvas.outputAreaBounds);
+                        log.info("Single input image added as new layer to canvas");
+                        this.canvas.render();
+                        this.canvas.saveState();
+                    }
+                    else {
+                        log.debug("No input image data from backend");
+                    }
+                }
+                else if (!hasImageInput && (inputData.input_images_batch || inputData.input_image)) {
+                    log.debug("Backend has image data but no image input connected, skipping image load");
+                }
+                // Handle mask separately only if mask input is actually connected, allowed, and not already loaded
+                if (allowMask && !maskLoaded && hasMaskInput && inputData.input_mask) {
+                    log.info("Processing input mask");
+                    // Load mask image
+                    const maskImg = await createImageFromSource(inputData.input_mask);
+                    // Determine if we should fit the mask or use it at original size
+                    const fitOnAddWidget2 = this.canvas.node.widgets.find((w) => w.name === "fit_on_add");
+                    const shouldFit = fitOnAddWidget2 && fitOnAddWidget2.value;
+                    let finalMaskImg = maskImg;
+                    if (shouldFit && this.canvas.maskTool) {
+                        const bounds = this.canvas.outputAreaBounds;
+                        finalMaskImg = await scaleImageToFit(maskImg, bounds.width, bounds.height);
+                    }
+                    // Apply to MaskTool (centers internally)
+                    if (this.canvas.maskTool) {
+                        this.canvas.maskTool.setMask(finalMaskImg, true);
+                    }
+                    this.canvas.maskAppliedFromInput = true;
+                    // Save the mask state
+                    this.canvas.canvasState.saveMaskState();
+                    log.info("Applied input mask to mask tool" + (shouldFit ? " (fitted to output area)" : " (original size)"));
+                }
+                else if (!hasMaskInput && inputData.input_mask) {
+                    log.debug("Backend has mask data but no mask input connected, skipping mask load");
+                }
+                else if (!allowMask && inputData.input_mask) {
+                    log.debug("Mask input data present in backend but mask loading is disabled by caller; skipping");
+                }
+            }
+            else {
+                log.debug("No input data from backend");
+                // Don't schedule another check - we'll only check when explicitly triggered
+            }
+        }
+        catch (error) {
+            log.error("Error checking for input data:", error);
+            // Don't schedule another check on error
+        }
+    }
+    scheduleInputDataCheck() {
+        // Schedule a retry for mask data check when nodeOutputs are not ready yet
+        if (this.canvas.pendingInputDataCheck) {
+            clearTimeout(this.canvas.pendingInputDataCheck);
+        }
+        this.canvas.pendingInputDataCheck = window.setTimeout(() => {
+            this.canvas.pendingInputDataCheck = null;
+            log.debug("Retrying input data check for mask...");
+        }, 500); // Shorter delay for mask data retry
+    }
     scheduleDataCheck() {
         if (this.canvas.pendingDataCheck) {
             clearTimeout(this.canvas.pendingDataCheck);
@@ -420,51 +814,10 @@ export class CanvasIO {
         }
     }
     convertTensorToImageData(tensor) {
-        try {
-            const shape = tensor.shape;
-            const height = shape[1];
-            const width = shape[2];
-            const channels = shape[3];
-            log.debug("Converting tensor:", {
-                shape: shape,
-                dataRange: {
-                    min: tensor.min_val,
-                    max: tensor.max_val
-                }
-            });
-            const imageData = new ImageData(width, height);
-            const data = new Uint8ClampedArray(width * height * 4);
-            const flatData = tensor.data;
-            const pixelCount = width * height;
-            for (let i = 0; i < pixelCount; i++) {
-                const pixelIndex = i * 4;
-                const tensorIndex = i * channels;
-                for (let c = 0; c < channels; c++) {
-                    const value = flatData[tensorIndex + c];
-                    const normalizedValue = (value - tensor.min_val) / (tensor.max_val - tensor.min_val);
-                    data[pixelIndex + c] = Math.round(normalizedValue * 255);
-                }
-                data[pixelIndex + 3] = 255;
-            }
-            imageData.data.set(data);
-            return imageData;
-        }
-        catch (error) {
-            log.error("Error converting tensor:", error);
-            return null;
-        }
+        return tensorToImageData(tensor, 'rgb');
     }
     async createImageFromData(imageData) {
-        return new Promise((resolve, reject) => {
-            const { canvas, ctx } = createCanvas(imageData.width, imageData.height, '2d', { willReadFrequently: true });
-            if (!ctx)
-                throw new Error("Could not create canvas context");
-            ctx.putImageData(imageData, 0, 0);
-            const img = new Image();
-            img.onload = () => resolve(img);
-            img.onerror = reject;
-            img.src = canvas.toDataURL();
-        });
+        return createImageFromImageData(imageData);
     }
     async processMaskData(maskData) {
         try {
@@ -524,12 +877,7 @@ export class CanvasIO {
                 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 img = await createImageFromSource(imageData);
                     let processedImage = img;
                     // If there's a custom shape, clip the image to that shape
                     if (this.canvas.outputAreaShape && this.canvas.outputAreaShape.isClosed) {
@@ -556,33 +904,27 @@ export class CanvasIO {
         }
     }
     async clipImageToShape(image, shape) {
-        return new Promise((resolve, reject) => {
-            const { canvas, ctx } = createCanvas(image.width, image.height);
-            if (!ctx) {
-                reject(new Error("Could not create canvas context for clipping"));
-                return;
-            }
-            // Draw the image first
-            ctx.drawImage(image, 0, 0);
-            // Calculate custom shape position accounting for extensions
-            // Custom shape should maintain its relative position within the original canvas area
-            const ext = this.canvas.outputAreaExtensionEnabled ? this.canvas.outputAreaExtensions : { top: 0, bottom: 0, left: 0, right: 0 };
-            const shapeOffsetX = ext.left; // Add left extension to maintain relative position
-            const shapeOffsetY = ext.top; // Add top extension to maintain relative position
-            // Create a clipping mask using the shape with extension offset
-            ctx.globalCompositeOperation = 'destination-in';
-            ctx.beginPath();
-            ctx.moveTo(shape.points[0].x + shapeOffsetX, shape.points[0].y + shapeOffsetY);
-            for (let i = 1; i < shape.points.length; i++) {
-                ctx.lineTo(shape.points[i].x + shapeOffsetX, shape.points[i].y + shapeOffsetY);
-            }
-            ctx.closePath();
-            ctx.fill();
-            // Create a new image from the clipped canvas
-            const clippedImage = new Image();
-            clippedImage.onload = () => resolve(clippedImage);
-            clippedImage.onerror = () => reject(new Error("Failed to create clipped image"));
-            clippedImage.src = canvas.toDataURL();
-        });
+        const { canvas, ctx } = createCanvas(image.width, image.height);
+        if (!ctx) {
+            throw new Error("Could not create canvas context for clipping");
+        }
+        // Draw the image first
+        ctx.drawImage(image, 0, 0);
+        // Calculate custom shape position accounting for extensions
+        // Custom shape should maintain its relative position within the original canvas area
+        const ext = this.canvas.outputAreaExtensionEnabled ? this.canvas.outputAreaExtensions : { top: 0, bottom: 0, left: 0, right: 0 };
+        const shapeOffsetX = ext.left; // Add left extension to maintain relative position
+        const shapeOffsetY = ext.top; // Add top extension to maintain relative position
+        // Create a clipping mask using the shape with extension offset
+        ctx.globalCompositeOperation = 'destination-in';
+        ctx.beginPath();
+        ctx.moveTo(shape.points[0].x + shapeOffsetX, shape.points[0].y + shapeOffsetY);
+        for (let i = 1; i < shape.points.length; i++) {
+            ctx.lineTo(shape.points[i].x + shapeOffsetX, shape.points[i].y + shapeOffsetY);
+        }
+        ctx.closePath();
+        ctx.fill();
+        // Create a new image from the clipped canvas
+        return await createImageFromSource(canvas.toDataURL());
     }
 }

js/CanvasInteractions.js

@@ -3,16 +3,33 @@ import { snapToGrid, getSnapAdjustment } from "./utils/CommonUtils.js";
 const log = createModuleLogger('CanvasInteractions');
 export class CanvasInteractions {
     constructor(canvas) {
+        // Bound event handlers to enable proper removeEventListener and avoid leaks
+        this.onMouseDown = (e) => this.handleMouseDown(e);
+        this.onMouseMove = (e) => this.handleMouseMove(e);
+        this.onMouseUp = (e) => this.handleMouseUp(e);
+        this.onMouseEnter = (e) => { this.canvas.isMouseOver = true; this.handleMouseEnter(e); };
+        this.onMouseLeave = (e) => { this.canvas.isMouseOver = false; this.handleMouseLeave(e); };
+        this.onWheel = (e) => this.handleWheel(e);
+        this.onKeyDown = (e) => this.handleKeyDown(e);
+        this.onKeyUp = (e) => this.handleKeyUp(e);
+        this.onDragOver = (e) => this.handleDragOver(e);
+        this.onDragEnter = (e) => this.handleDragEnter(e);
+        this.onDragLeave = (e) => this.handleDragLeave(e);
+        this.onDrop = (e) => { this.handleDrop(e); };
+        this.onContextMenu = (e) => this.handleContextMenu(e);
+        this.onBlur = () => this.handleBlur();
+        this.onPaste = (e) => this.handlePasteEvent(e);
         this.canvas = canvas;
         this.interaction = {
             mode: 'none',
             panStart: { x: 0, y: 0 },
             dragStart: { x: 0, y: 0 },
-            transformOrigin: {},
+            transformOrigin: null,
             resizeHandle: null,
             resizeAnchor: { x: 0, y: 0 },
             canvasResizeStart: { x: 0, y: 0 },
             isCtrlPressed: false,
+            isMetaPressed: false,
             isAltPressed: false,
             isShiftPressed: false,
             isSPressed: false,
@@ -22,6 +39,8 @@ export class CanvasInteractions {
             keyMovementInProgress: false,
             canvasResizeRect: null,
             canvasMoveRect: null,
+            outputAreaTransformHandle: null,
+            outputAreaTransformAnchor: { x: 0, y: 0 },
         };
         this.originalLayerPositions = new Map();
     }
@@ -32,18 +51,29 @@ export class CanvasInteractions {
             view: this.canvas.getMouseViewCoordinates(e)
         };
     }
+    getModifierState(e) {
+        return {
+            ctrl: this.interaction.isCtrlPressed || e?.ctrlKey || false,
+            shift: this.interaction.isShiftPressed || e?.shiftKey || false,
+            alt: this.interaction.isAltPressed || e?.altKey || false,
+            meta: this.interaction.isMetaPressed || e?.metaKey || false,
+        };
+    }
     preventEventDefaults(e) {
         e.preventDefault();
         e.stopPropagation();
     }
     performZoomOperation(worldCoords, zoomFactor) {
-        const rect = this.canvas.canvas.getBoundingClientRect();
         const mouseBufferX = (worldCoords.x - this.canvas.viewport.x) * this.canvas.viewport.zoom;
         const mouseBufferY = (worldCoords.y - this.canvas.viewport.y) * this.canvas.viewport.zoom;
         const newZoom = Math.max(0.1, Math.min(10, this.canvas.viewport.zoom * zoomFactor));
         this.canvas.viewport.zoom = newZoom;
         this.canvas.viewport.x = worldCoords.x - (mouseBufferX / this.canvas.viewport.zoom);
         this.canvas.viewport.y = worldCoords.y - (mouseBufferY / this.canvas.viewport.zoom);
+        // Update stroke overlay if mask tool is drawing during zoom
+        if (this.canvas.maskTool.isDrawing) {
+            this.canvas.maskTool.handleViewportChange();
+        }
         this.canvas.onViewportChange?.();
     }
     renderAndSave(shouldSave = false) {
@@ -64,29 +94,39 @@ export class CanvasInteractions {
         }
     }
     setupEventListeners() {
-        this.canvas.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
-        this.canvas.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
-        this.canvas.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
-        this.canvas.canvas.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
-        this.canvas.canvas.addEventListener('wheel', this.handleWheel.bind(this), { passive: false });
-        this.canvas.canvas.addEventListener('keydown', this.handleKeyDown.bind(this));
-        this.canvas.canvas.addEventListener('keyup', this.handleKeyUp.bind(this));
+        this.canvas.canvas.addEventListener('mousedown', this.onMouseDown);
+        this.canvas.canvas.addEventListener('mousemove', this.onMouseMove);
+        this.canvas.canvas.addEventListener('mouseup', this.onMouseUp);
+        this.canvas.canvas.addEventListener('wheel', this.onWheel, { passive: false });
+        this.canvas.canvas.addEventListener('keydown', this.onKeyDown);
+        this.canvas.canvas.addEventListener('keyup', this.onKeyUp);
         // Add a blur event listener to the window to reset key states
-        window.addEventListener('blur', this.handleBlur.bind(this));
-        document.addEventListener('paste', this.handlePasteEvent.bind(this));
-        this.canvas.canvas.addEventListener('mouseenter', (e) => {
-            this.canvas.isMouseOver = true;
-            this.handleMouseEnter(e);
-        });
-        this.canvas.canvas.addEventListener('mouseleave', (e) => {
-            this.canvas.isMouseOver = false;
-            this.handleMouseLeave(e);
-        });
-        this.canvas.canvas.addEventListener('dragover', this.handleDragOver.bind(this));
-        this.canvas.canvas.addEventListener('dragenter', this.handleDragEnter.bind(this));
-        this.canvas.canvas.addEventListener('dragleave', this.handleDragLeave.bind(this));
-        this.canvas.canvas.addEventListener('drop', this.handleDrop.bind(this));
-        this.canvas.canvas.addEventListener('contextmenu', this.handleContextMenu.bind(this));
+        window.addEventListener('blur', this.onBlur);
+        document.addEventListener('paste', this.onPaste);
+        this.canvas.canvas.addEventListener('mouseenter', this.onMouseEnter);
+        this.canvas.canvas.addEventListener('mouseleave', this.onMouseLeave);
+        this.canvas.canvas.addEventListener('dragover', this.onDragOver);
+        this.canvas.canvas.addEventListener('dragenter', this.onDragEnter);
+        this.canvas.canvas.addEventListener('dragleave', this.onDragLeave);
+        this.canvas.canvas.addEventListener('drop', this.onDrop);
+        this.canvas.canvas.addEventListener('contextmenu', this.onContextMenu);
+    }
+    teardownEventListeners() {
+        this.canvas.canvas.removeEventListener('mousedown', this.onMouseDown);
+        this.canvas.canvas.removeEventListener('mousemove', this.onMouseMove);
+        this.canvas.canvas.removeEventListener('mouseup', this.onMouseUp);
+        this.canvas.canvas.removeEventListener('wheel', this.onWheel);
+        this.canvas.canvas.removeEventListener('keydown', this.onKeyDown);
+        this.canvas.canvas.removeEventListener('keyup', this.onKeyUp);
+        window.removeEventListener('blur', this.onBlur);
+        document.removeEventListener('paste', this.onPaste);
+        this.canvas.canvas.removeEventListener('mouseenter', this.onMouseEnter);
+        this.canvas.canvas.removeEventListener('mouseleave', this.onMouseLeave);
+        this.canvas.canvas.removeEventListener('dragover', this.onDragOver);
+        this.canvas.canvas.removeEventListener('dragenter', this.onDragEnter);
+        this.canvas.canvas.removeEventListener('dragleave', this.onDragLeave);
+        this.canvas.canvas.removeEventListener('drop', this.onDrop);
+        this.canvas.canvas.removeEventListener('contextmenu', this.onContextMenu);
     }
     /**
      * Sprawdza czy punkt znajduje się w obszarze któregokolwiek z zaznaczonych layerów
@@ -119,13 +159,27 @@ export class CanvasInteractions {
         this.interaction.canvasMoveRect = null;
         this.interaction.hasClonedInDrag = false;
         this.interaction.transformingLayer = null;
+        this.interaction.outputAreaTransformHandle = null;
         this.canvas.canvas.style.cursor = 'default';
     }
     handleMouseDown(e) {
         this.canvas.canvas.focus();
         const coords = this.getMouseCoordinates(e);
+        const mods = this.getModifierState(e);
         if (this.interaction.mode === 'drawingMask') {
             this.canvas.maskTool.handleMouseDown(coords.world, coords.view);
+            // Don't render here - mask tool will handle its own drawing
+            return;
+        }
+        if (this.interaction.mode === 'transformingOutputArea') {
+            // Check if clicking on output area transform handle
+            const handle = this.getOutputAreaHandle(coords.world);
+            if (handle) {
+                this.startOutputAreaTransform(handle, coords.world);
+                return;
+            }
+            // If clicking outside, exit transform mode
+            this.interaction.mode = 'none';
             this.canvas.render();
             return;
         }
@@ -135,11 +189,11 @@ export class CanvasInteractions {
         }
         // --- Ostateczna, poprawna kolejność sprawdzania ---
         // 1. Akcje globalne z modyfikatorami (mają najwyższy priorytet)
-        if (e.shiftKey && e.ctrlKey) {
+        if (mods.shift && mods.ctrl) {
             this.startCanvasMove(coords.world);
             return;
         }
-        if (e.shiftKey) {
+        if (mods.shift) {
             // Clear custom shape when starting canvas resize
             if (this.canvas.outputAreaShape) {
                 // If auto-apply shape mask is enabled, remove the mask before clearing the shape
@@ -163,7 +217,7 @@ export class CanvasInteractions {
             }
             return;
         }
-        if (e.button !== 0) { // Środkowy przycisk
+        if (e.button === 1) { // Środkowy przycisk
             this.startPanning(e);
             return;
         }
@@ -179,7 +233,7 @@ export class CanvasInteractions {
             return;
         }
         // 4. Domyślna akcja na tle (lewy przycisk bez modyfikatorów)
-        this.startPanningOrClearSelection(e);
+        this.startPanning(e, true); // clearSelection = true
     }
     handleMouseMove(e) {
         const coords = this.getMouseCoordinates(e);
@@ -199,7 +253,7 @@ export class CanvasInteractions {
         switch (this.interaction.mode) {
             case 'drawingMask':
                 this.canvas.maskTool.handleMouseMove(coords.world, coords.view);
-                this.canvas.render();
+                // Don't render during mask drawing - it's handled by mask tool internally
                 break;
             case 'panning':
                 this.panViewport(e);
@@ -219,8 +273,20 @@ export class CanvasInteractions {
             case 'movingCanvas':
                 this.updateCanvasMove(coords.world);
                 break;
+            case 'transformingOutputArea':
+                if (this.interaction.outputAreaTransformHandle) {
+                    this.resizeOutputAreaFromHandle(coords.world, e.shiftKey);
+                }
+                else {
+                    this.updateOutputAreaTransformCursor(coords.world);
+                }
+                break;
             default:
                 this.updateCursor(coords.world);
+                // Update brush cursor on overlay if mask tool is active
+                if (this.canvas.maskTool.isActive) {
+                    this.canvas.canvasRenderer.drawMaskBrushCursor(coords.world);
+                }
                 break;
         }
         // --- DYNAMICZNY PODGLĄD LINII CUSTOM SHAPE ---
@@ -232,6 +298,7 @@ export class CanvasInteractions {
         const coords = this.getMouseCoordinates(e);
         if (this.interaction.mode === 'drawingMask') {
             this.canvas.maskTool.handleMouseUp(coords.view);
+            // Render only once after drawing is complete
             this.canvas.render();
             return;
         }
@@ -241,10 +308,22 @@ export class CanvasInteractions {
         if (this.interaction.mode === 'movingCanvas') {
             this.finalizeCanvasMove();
         }
+        if (this.interaction.mode === 'transformingOutputArea' && this.interaction.outputAreaTransformHandle) {
+            this.finalizeOutputAreaTransform();
+            return;
+        }
         // Log layer positions when dragging ends
         if (this.interaction.mode === 'dragging' && this.canvas.canvasSelection.selectedLayers.length > 0) {
             this.logDragCompletion(coords);
         }
+        // Handle end of crop bounds transformation before resetting interaction state
+        if (this.interaction.mode === 'resizing' && this.interaction.transformingLayer?.cropMode) {
+            this.canvas.canvasLayers.handleCropBoundsTransformEnd(this.interaction.transformingLayer);
+        }
+        // Handle end of scale transformation (normal transform mode) before resetting interaction state
+        if (this.interaction.mode === 'resizing' && this.interaction.transformingLayer && !this.interaction.transformingLayer.cropMode) {
+            this.canvas.canvasLayers.handleScaleTransformEnd(this.interaction.transformingLayer);
+        }
         // 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;
@@ -307,8 +386,17 @@ export class CanvasInteractions {
             this.performZoomOperation(coords.world, zoomFactor);
         }
         else {
-            // Layer transformation when layers are selected
-            this.handleLayerWheelTransformation(e);
+            // Check if mouse is over any selected layer
+            const isOverSelectedLayer = this.isPointInSelectedLayers(coords.world.x, coords.world.y);
+            if (isOverSelectedLayer) {
+                // Layer transformation when layers are selected and mouse is over selected layer
+                this.handleLayerWheelTransformation(e);
+            }
+            else {
+                // Zoom operation when mouse is not over selected layers
+                const zoomFactor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+                this.performZoomOperation(coords.world, zoomFactor);
+            }
         }
         this.canvas.render();
         if (!this.canvas.maskTool.isActive) {
@@ -316,14 +404,15 @@ export class CanvasInteractions {
         }
     }
     handleLayerWheelTransformation(e) {
+        const mods = this.getModifierState(e);
         const rotationStep = 5 * (e.deltaY > 0 ? -1 : 1);
         const direction = e.deltaY < 0 ? 1 : -1;
         this.canvas.canvasSelection.selectedLayers.forEach((layer) => {
-            if (e.shiftKey) {
-                this.handleLayerRotation(layer, e.ctrlKey, direction, rotationStep);
+            if (mods.shift) {
+                this.handleLayerRotation(layer, mods.ctrl, direction, rotationStep);
             }
             else {
-                this.handleLayerScaling(layer, e.ctrlKey, e.deltaY);
+                this.handleLayerScaling(layer, mods.ctrl, e.deltaY);
             }
         });
     }
@@ -363,10 +452,12 @@ export class CanvasInteractions {
             layer.height *= scaleFactor;
             layer.x += (oldWidth - layer.width) / 2;
             layer.y += (oldHeight - layer.height) / 2;
+            // Handle wheel scaling end for layers with blend area
+            this.canvas.canvasLayers.handleWheelScalingEnd(layer);
         }
     }
     calculateGridBasedScaling(oldHeight, deltaY) {
-        const gridSize = 64;
+        const gridSize = 64; // Grid size - could be made configurable in the future
         const direction = deltaY > 0 ? -1 : 1;
         let targetHeight;
         if (direction > 0) {
@@ -391,6 +482,8 @@ export class CanvasInteractions {
     handleKeyDown(e) {
         if (e.key === 'Control')
             this.interaction.isCtrlPressed = true;
+        if (e.key === 'Meta')
+            this.interaction.isMetaPressed = true;
         if (e.key === 'Shift')
             this.interaction.isShiftPressed = true;
         if (e.key === 'Alt') {
@@ -408,11 +501,12 @@ export class CanvasInteractions {
             return;
         }
         // Globalne skróty (Undo/Redo/Copy/Paste)
-        if (e.ctrlKey || e.metaKey) {
+        const mods = this.getModifierState(e);
+        if (mods.ctrl || mods.meta) {
             let handled = true;
             switch (e.key.toLowerCase()) {
                 case 'z':
-                    if (e.shiftKey) {
+                    if (mods.shift) {
                         this.canvas.redo();
                     }
                     else {
@@ -439,7 +533,7 @@ export class CanvasInteractions {
         }
         // Skróty kontekstowe (zależne od zaznaczenia)
         if (this.canvas.canvasSelection.selectedLayers.length > 0) {
-            const step = e.shiftKey ? 10 : 1;
+            const step = mods.shift ? 10 : 1;
             let needsRender = false;
             // Używamy e.code dla spójności i niezależności od układu klawiatury
             const movementKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'BracketLeft', 'BracketRight'];
@@ -475,6 +569,8 @@ export class CanvasInteractions {
     handleKeyUp(e) {
         if (e.key === 'Control')
             this.interaction.isCtrlPressed = false;
+        if (e.key === 'Meta')
+            this.interaction.isMetaPressed = false;
         if (e.key === 'Shift')
             this.interaction.isShiftPressed = false;
         if (e.key === 'Alt')
@@ -494,6 +590,7 @@ export class CanvasInteractions {
     handleBlur() {
         log.debug('Window lost focus, resetting key states.');
         this.interaction.isCtrlPressed = false;
+        this.interaction.isMetaPressed = false;
         this.interaction.isAltPressed = false;
         this.interaction.isShiftPressed = false;
         this.interaction.isSPressed = false;
@@ -515,6 +612,11 @@ export class CanvasInteractions {
         }
     }
     updateCursor(worldCoords) {
+        // If actively rotating, show grabbing cursor
+        if (this.interaction.mode === 'rotating') {
+            this.canvas.canvas.style.cursor = 'grabbing';
+            return;
+        }
         const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
         if (transformTarget) {
             const handleName = transformTarget.handle;
@@ -539,7 +641,10 @@ export class CanvasInteractions {
             width: layer.width, height: layer.height,
             rotation: layer.rotation,
             centerX: layer.x + layer.width / 2,
-            centerY: layer.y + layer.height / 2
+            centerY: layer.y + layer.height / 2,
+            originalWidth: layer.originalWidth,
+            originalHeight: layer.originalHeight,
+            cropBounds: layer.cropBounds ? { ...layer.cropBounds } : undefined
         };
         this.interaction.dragStart = { ...worldCoords };
         if (handle === 'rot') {
@@ -559,7 +664,9 @@ export class CanvasInteractions {
     }
     prepareForDrag(layer, worldCoords) {
         // Zaktualizuj zaznaczenie, ale nie zapisuj stanu
-        if (this.interaction.isCtrlPressed) {
+        // Support both Ctrl (Windows/Linux) and Cmd (macOS) for multi-selection
+        const mods = this.getModifierState();
+        if (mods.ctrl || mods.meta) {
             const index = this.canvas.canvasSelection.selectedLayers.indexOf(layer);
             if (index === -1) {
                 this.canvas.canvasSelection.updateSelection([...this.canvas.canvasSelection.selectedLayers, layer]);
@@ -577,10 +684,9 @@ export class CanvasInteractions {
         this.interaction.mode = 'potential-drag';
         this.interaction.dragStart = { ...worldCoords };
     }
-    startPanningOrClearSelection(e) {
-        // Ta funkcja jest teraz wywoływana tylko gdy kliknięto na tło bez modyfikatorów.
-        // Domyślna akcja: wyczyść zaznaczenie i rozpocznij panoramowanie.
-        if (!this.interaction.isCtrlPressed) {
+    startPanning(e, clearSelection = true) {
+        // Unified panning method - can optionally clear selection
+        if (clearSelection && !this.interaction.isCtrlPressed) {
             this.canvas.canvasSelection.updateSelection([]);
         }
         this.interaction.mode = 'panning';
@@ -629,19 +735,16 @@ export class CanvasInteractions {
         this.canvas.render();
         this.canvas.saveState();
     }
-    startPanning(e) {
-        if (!this.interaction.isCtrlPressed) {
-            this.canvas.canvasSelection.updateSelection([]);
-        }
-        this.interaction.mode = 'panning';
-        this.interaction.panStart = { x: e.clientX, y: e.clientY };
-    }
     panViewport(e) {
         const dx = e.clientX - this.interaction.panStart.x;
         const dy = e.clientY - this.interaction.panStart.y;
         this.canvas.viewport.x -= dx / this.canvas.viewport.zoom;
         this.canvas.viewport.y -= dy / this.canvas.viewport.zoom;
         this.interaction.panStart = { x: e.clientX, y: e.clientY };
+        // Update stroke overlay if mask tool is drawing during pan
+        if (this.canvas.maskTool.isDrawing) {
+            this.canvas.maskTool.handleViewportChange();
+        }
         this.canvas.render();
         this.canvas.onViewportChange?.();
     }
@@ -692,58 +795,150 @@ export class CanvasInteractions {
         let mouseY = worldCoords.y;
         if (this.interaction.isCtrlPressed) {
             const snapThreshold = 10 / this.canvas.viewport.zoom;
-            const snappedMouseX = snapToGrid(mouseX);
-            if (Math.abs(mouseX - snappedMouseX) < snapThreshold)
-                mouseX = snappedMouseX;
-            const snappedMouseY = snapToGrid(mouseY);
-            if (Math.abs(mouseY - snappedMouseY) < snapThreshold)
-                mouseY = snappedMouseY;
+            mouseX = Math.abs(mouseX - snapToGrid(mouseX)) < snapThreshold ? snapToGrid(mouseX) : mouseX;
+            mouseY = Math.abs(mouseY - snapToGrid(mouseY)) < snapThreshold ? snapToGrid(mouseY) : mouseY;
         }
         const o = this.interaction.transformOrigin;
-        if (o.rotation === undefined || o.width === undefined || o.height === undefined || o.centerX === undefined || o.centerY === undefined)
+        if (!o)
             return;
         const handle = this.interaction.resizeHandle;
         const anchor = this.interaction.resizeAnchor;
         const rad = o.rotation * Math.PI / 180;
         const cos = Math.cos(rad);
         const sin = Math.sin(rad);
+        // Vector from anchor to mouse
         const vecX = mouseX - anchor.x;
         const vecY = mouseY - anchor.y;
-        let newWidth = vecX * cos + vecY * sin;
-        let newHeight = vecY * cos - vecX * sin;
-        if (isShiftPressed) {
-            const originalAspectRatio = o.width / o.height;
-            if (Math.abs(newWidth) > Math.abs(newHeight) * originalAspectRatio) {
-                newHeight = (Math.sign(newHeight) || 1) * Math.abs(newWidth) / originalAspectRatio;
-            }
-            else {
-                newWidth = (Math.sign(newWidth) || 1) * Math.abs(newHeight) * originalAspectRatio;
-            }
-        }
-        let signX = handle?.includes('e') ? 1 : (handle?.includes('w') ? -1 : 0);
-        let signY = handle?.includes('s') ? 1 : (handle?.includes('n') ? -1 : 0);
-        newWidth *= signX;
-        newHeight *= signY;
+        // Rotate vector to align with layer's local coordinates
+        let localVecX = vecX * cos + vecY * sin;
+        let localVecY = vecY * cos - vecX * sin;
+        // Determine sign based on handle
+        const signX = handle?.includes('e') ? 1 : (handle?.includes('w') ? -1 : 0);
+        const signY = handle?.includes('s') ? 1 : (handle?.includes('n') ? -1 : 0);
+        localVecX *= signX;
+        localVecY *= signY;
+        // If not a corner handle, keep original dimension
         if (signX === 0)
-            newWidth = o.width;
+            localVecX = o.width;
         if (signY === 0)
-            newHeight = o.height;
-        if (newWidth < 10)
-            newWidth = 10;
-        if (newHeight < 10)
-            newHeight = 10;
-        layer.width = newWidth;
-        layer.height = newHeight;
-        const deltaW = newWidth - o.width;
-        const deltaH = newHeight - o.height;
-        const shiftX = (deltaW / 2) * signX;
-        const shiftY = (deltaH / 2) * signY;
-        const worldShiftX = shiftX * cos - shiftY * sin;
-        const worldShiftY = shiftX * sin + shiftY * cos;
-        const newCenterX = o.centerX + worldShiftX;
-        const newCenterY = o.centerY + worldShiftY;
-        layer.x = newCenterX - layer.width / 2;
-        layer.y = newCenterY - layer.height / 2;
+            localVecY = o.height;
+        if (layer.cropMode && o.cropBounds && o.originalWidth && o.originalHeight) {
+            // CROP MODE: Calculate delta based on mouse movement and apply to cropBounds.
+            // Calculate mouse movement since drag start, in the layer's local coordinate system.
+            const dragStartX_local = this.interaction.dragStart.x - (o.centerX ?? 0);
+            const dragStartY_local = this.interaction.dragStart.y - (o.centerY ?? 0);
+            const mouseX_local = mouseX - (o.centerX ?? 0);
+            const mouseY_local = mouseY - (o.centerY ?? 0);
+            // Rotate mouse delta into the layer's unrotated frame
+            const deltaX_world = mouseX_local - dragStartX_local;
+            const deltaY_world = mouseY_local - dragStartY_local;
+            let mouseDeltaX_local = deltaX_world * cos + deltaY_world * sin;
+            let mouseDeltaY_local = deltaY_world * cos - deltaX_world * sin;
+            if (layer.flipH) {
+                mouseDeltaX_local *= -1;
+            }
+            if (layer.flipV) {
+                mouseDeltaY_local *= -1;
+            }
+            // Convert the on-screen mouse delta to an image-space delta.
+            const screenToImageScaleX = o.originalWidth / o.width;
+            const screenToImageScaleY = o.originalHeight / o.height;
+            const delta_image_x = mouseDeltaX_local * screenToImageScaleX;
+            const delta_image_y = mouseDeltaY_local * screenToImageScaleY;
+            let newCropBounds = { ...o.cropBounds }; // Start with the bounds from the beginning of the drag
+            // Apply the image-space delta to the appropriate edges of the crop bounds
+            const isFlippedH = layer.flipH;
+            const isFlippedV = layer.flipV;
+            if (handle?.includes('w')) {
+                if (isFlippedH)
+                    newCropBounds.width += delta_image_x;
+                else {
+                    newCropBounds.x += delta_image_x;
+                    newCropBounds.width -= delta_image_x;
+                }
+            }
+            if (handle?.includes('e')) {
+                if (isFlippedH) {
+                    newCropBounds.x += delta_image_x;
+                    newCropBounds.width -= delta_image_x;
+                }
+                else
+                    newCropBounds.width += delta_image_x;
+            }
+            if (handle?.includes('n')) {
+                if (isFlippedV)
+                    newCropBounds.height += delta_image_y;
+                else {
+                    newCropBounds.y += delta_image_y;
+                    newCropBounds.height -= delta_image_y;
+                }
+            }
+            if (handle?.includes('s')) {
+                if (isFlippedV) {
+                    newCropBounds.y += delta_image_y;
+                    newCropBounds.height -= delta_image_y;
+                }
+                else
+                    newCropBounds.height += delta_image_y;
+            }
+            // Clamp crop bounds to stay within the original image and maintain minimum size
+            if (newCropBounds.width < 1) {
+                if (handle?.includes('w'))
+                    newCropBounds.x = o.cropBounds.x + o.cropBounds.width - 1;
+                newCropBounds.width = 1;
+            }
+            if (newCropBounds.height < 1) {
+                if (handle?.includes('n'))
+                    newCropBounds.y = o.cropBounds.y + o.cropBounds.height - 1;
+                newCropBounds.height = 1;
+            }
+            if (newCropBounds.x < 0) {
+                newCropBounds.width += newCropBounds.x;
+                newCropBounds.x = 0;
+            }
+            if (newCropBounds.y < 0) {
+                newCropBounds.height += newCropBounds.y;
+                newCropBounds.y = 0;
+            }
+            if (newCropBounds.x + newCropBounds.width > o.originalWidth) {
+                newCropBounds.width = o.originalWidth - newCropBounds.x;
+            }
+            if (newCropBounds.y + newCropBounds.height > o.originalHeight) {
+                newCropBounds.height = o.originalHeight - newCropBounds.y;
+            }
+            layer.cropBounds = newCropBounds;
+        }
+        else {
+            // TRANSFORM MODE: Resize the layer's main transform frame
+            let newWidth = localVecX;
+            let newHeight = localVecY;
+            if (isShiftPressed) {
+                const originalAspectRatio = o.width / o.height;
+                if (Math.abs(newWidth) > Math.abs(newHeight) * originalAspectRatio) {
+                    newHeight = (Math.sign(newHeight) || 1) * Math.abs(newWidth) / originalAspectRatio;
+                }
+                else {
+                    newWidth = (Math.sign(newWidth) || 1) * Math.abs(newHeight) * originalAspectRatio;
+                }
+            }
+            if (newWidth < 10)
+                newWidth = 10;
+            if (newHeight < 10)
+                newHeight = 10;
+            layer.width = newWidth;
+            layer.height = newHeight;
+            // Update position to keep anchor point fixed
+            const deltaW = layer.width - o.width;
+            const deltaH = layer.height - o.height;
+            const shiftX = (deltaW / 2) * signX;
+            const shiftY = (deltaH / 2) * signY;
+            const worldShiftX = shiftX * cos - shiftY * sin;
+            const worldShiftY = shiftX * sin + shiftY * cos;
+            const newCenterX = o.centerX + worldShiftX;
+            const newCenterY = o.centerY + worldShiftY;
+            layer.x = newCenterX - layer.width / 2;
+            layer.y = newCenterY - layer.height / 2;
+        }
         this.canvas.render();
     }
     rotateLayerFromHandle(worldCoords, isShiftPressed) {
@@ -751,7 +946,7 @@ export class CanvasInteractions {
         if (!layer)
             return;
         const o = this.interaction.transformOrigin;
-        if (o.rotation === undefined || o.centerX === undefined || o.centerY === undefined)
+        if (!o)
             return;
         const startAngle = Math.atan2(this.interaction.dragStart.y - o.centerY, this.interaction.dragStart.x - o.centerX);
         const currentAngle = Math.atan2(worldCoords.y - o.centerY, worldCoords.x - o.centerX);
@@ -960,4 +1155,168 @@ export class CanvasInteractions {
         }
         await this.canvas.canvasLayers.clipboardManager.handlePaste('mouse', preference);
     }
+    // New methods for output area transformation
+    activateOutputAreaTransform() {
+        // Clear any existing interaction state before starting transform
+        this.resetInteractionState();
+        // Deactivate any active tools that might conflict
+        if (this.canvas.shapeTool.isActive) {
+            this.canvas.shapeTool.deactivate();
+        }
+        if (this.canvas.maskTool.isActive) {
+            this.canvas.maskTool.deactivate();
+        }
+        // Clear selection to avoid confusion
+        this.canvas.canvasSelection.updateSelection([]);
+        // Set transform mode
+        this.interaction.mode = 'transformingOutputArea';
+        this.canvas.render();
+    }
+    getOutputAreaHandle(worldCoords) {
+        const bounds = this.canvas.outputAreaBounds;
+        const threshold = 10 / this.canvas.viewport.zoom;
+        // Define handle positions
+        const handles = {
+            'nw': { x: bounds.x, y: bounds.y },
+            'n': { x: bounds.x + bounds.width / 2, y: bounds.y },
+            'ne': { x: bounds.x + bounds.width, y: bounds.y },
+            'e': { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+            'se': { x: bounds.x + bounds.width, y: bounds.y + bounds.height },
+            's': { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height },
+            'sw': { x: bounds.x, y: bounds.y + bounds.height },
+            'w': { x: bounds.x, y: bounds.y + bounds.height / 2 },
+        };
+        for (const [name, pos] of Object.entries(handles)) {
+            const dx = worldCoords.x - pos.x;
+            const dy = worldCoords.y - pos.y;
+            if (Math.sqrt(dx * dx + dy * dy) < threshold) {
+                return name;
+            }
+        }
+        return null;
+    }
+    startOutputAreaTransform(handle, worldCoords) {
+        this.interaction.outputAreaTransformHandle = handle;
+        this.interaction.dragStart = { ...worldCoords };
+        const bounds = this.canvas.outputAreaBounds;
+        this.interaction.transformOrigin = {
+            x: bounds.x,
+            y: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+            rotation: 0,
+            centerX: bounds.x + bounds.width / 2,
+            centerY: bounds.y + bounds.height / 2
+        };
+        // Set anchor point (opposite corner for resize)
+        const anchorMap = {
+            'nw': { x: bounds.x + bounds.width, y: bounds.y + bounds.height },
+            'n': { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height },
+            'ne': { x: bounds.x, y: bounds.y + bounds.height },
+            'e': { x: bounds.x, y: bounds.y + bounds.height / 2 },
+            'se': { x: bounds.x, y: bounds.y },
+            's': { x: bounds.x + bounds.width / 2, y: bounds.y },
+            'sw': { x: bounds.x + bounds.width, y: bounds.y },
+            'w': { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+        };
+        this.interaction.outputAreaTransformAnchor = anchorMap[handle];
+    }
+    resizeOutputAreaFromHandle(worldCoords, isShiftPressed) {
+        const o = this.interaction.transformOrigin;
+        if (!o)
+            return;
+        const handle = this.interaction.outputAreaTransformHandle;
+        const anchor = this.interaction.outputAreaTransformAnchor;
+        let newX = o.x;
+        let newY = o.y;
+        let newWidth = o.width;
+        let newHeight = o.height;
+        // Calculate new dimensions based on handle
+        if (handle?.includes('w')) {
+            const deltaX = worldCoords.x - anchor.x;
+            newWidth = Math.abs(deltaX);
+            newX = Math.min(worldCoords.x, anchor.x);
+        }
+        if (handle?.includes('e')) {
+            const deltaX = worldCoords.x - anchor.x;
+            newWidth = Math.abs(deltaX);
+            newX = Math.min(worldCoords.x, anchor.x);
+        }
+        if (handle?.includes('n')) {
+            const deltaY = worldCoords.y - anchor.y;
+            newHeight = Math.abs(deltaY);
+            newY = Math.min(worldCoords.y, anchor.y);
+        }
+        if (handle?.includes('s')) {
+            const deltaY = worldCoords.y - anchor.y;
+            newHeight = Math.abs(deltaY);
+            newY = Math.min(worldCoords.y, anchor.y);
+        }
+        // Maintain aspect ratio if shift is held
+        if (isShiftPressed && o.width > 0 && o.height > 0) {
+            const aspectRatio = o.width / o.height;
+            if (handle === 'n' || handle === 's') {
+                newWidth = newHeight * aspectRatio;
+            }
+            else if (handle === 'e' || handle === 'w') {
+                newHeight = newWidth / aspectRatio;
+            }
+            else {
+                // Corner handles
+                const proposedRatio = newWidth / newHeight;
+                if (proposedRatio > aspectRatio) {
+                    newHeight = newWidth / aspectRatio;
+                }
+                else {
+                    newWidth = newHeight * aspectRatio;
+                }
+            }
+        }
+        // Snap to grid if Ctrl is held
+        if (this.interaction.isCtrlPressed) {
+            newX = snapToGrid(newX);
+            newY = snapToGrid(newY);
+            newWidth = snapToGrid(newWidth);
+            newHeight = snapToGrid(newHeight);
+        }
+        // Apply minimum size
+        if (newWidth < 10)
+            newWidth = 10;
+        if (newHeight < 10)
+            newHeight = 10;
+        // Update output area bounds temporarily for preview
+        this.canvas.outputAreaBounds = {
+            x: newX,
+            y: newY,
+            width: newWidth,
+            height: newHeight
+        };
+        this.canvas.render();
+    }
+    updateOutputAreaTransformCursor(worldCoords) {
+        const handle = this.getOutputAreaHandle(worldCoords);
+        if (handle) {
+            const cursorMap = {
+                'n': 'ns-resize', 's': 'ns-resize',
+                'e': 'ew-resize', 'w': 'ew-resize',
+                'nw': 'nwse-resize', 'se': 'nwse-resize',
+                'ne': 'nesw-resize', 'sw': 'nesw-resize',
+            };
+            this.canvas.canvas.style.cursor = cursorMap[handle] || 'default';
+        }
+        else {
+            this.canvas.canvas.style.cursor = 'default';
+        }
+    }
+    finalizeOutputAreaTransform() {
+        const bounds = this.canvas.outputAreaBounds;
+        // Update canvas size and mask tool
+        this.canvas.updateOutputAreaSize(bounds.width, bounds.height);
+        // Update mask canvas for new output area
+        this.canvas.maskTool.updateMaskCanvasForOutputArea();
+        // Save state
+        this.canvas.saveState();
+        // Reset transform handle but keep transform mode active
+        this.interaction.outputAreaTransformHandle = null;
+    }
 }

js/CanvasLayersPanel.js

@@ -1,6 +1,7 @@
 import { createModuleLogger } from "./utils/LoggerUtils.js";
 import { iconLoader, LAYERFORGE_TOOLS } from "./utils/IconLoader.js";
 import { createCanvas } from "./utils/CommonUtils.js";
+import { addStylesheet, getUrl } from "./utils/ResourceManager.js";
 const log = createModuleLogger('CanvasLayersPanel');
 export class CanvasLayersPanel {
     constructor(canvas) {
@@ -18,6 +19,8 @@ export class CanvasLayersPanel {
         this.handleDrop = this.handleDrop.bind(this);
         // Preload icons
         this.initializeIcons();
+        // Load CSS for layers panel
+        addStylesheet(getUrl('./css/layers_panel.css'));
         log.info('CanvasLayersPanel initialized');
     }
     async initializeIcons() {
@@ -31,22 +34,15 @@ export class CanvasLayersPanel {
     }
     createIconElement(toolName, size = 16) {
         const iconContainer = document.createElement('div');
-        iconContainer.style.cssText = `
-            width: ${size}px;
-            height: ${size}px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        `;
+        iconContainer.className = 'icon-container';
+        iconContainer.style.width = `${size}px`;
+        iconContainer.style.height = `${size}px`;
         const icon = iconLoader.getIcon(toolName);
         if (icon) {
             if (icon instanceof HTMLImageElement) {
                 const img = icon.cloneNode();
-                img.style.cssText = `
-                    width: ${size}px;
-                    height: ${size}px;
-                    filter: brightness(0) invert(1);
-                `;
+                img.style.width = `${size}px`;
+                img.style.height = `${size}px`;
                 iconContainer.appendChild(img);
             }
             else if (icon instanceof HTMLCanvasElement) {
@@ -59,9 +55,9 @@ export class CanvasLayersPanel {
         }
         else {
             // Fallback text
+            iconContainer.classList.add('fallback-text');
             iconContainer.textContent = toolName.charAt(0).toUpperCase();
             iconContainer.style.fontSize = `${size * 0.6}px`;
-            iconContainer.style.color = '#ffffff';
         }
         return iconContainer;
     }
@@ -72,24 +68,15 @@ export class CanvasLayersPanel {
         else {
             // Create a "hidden" version of the visibility icon
             const iconContainer = document.createElement('div');
-            iconContainer.style.cssText = `
-                width: 16px;
-                height: 16px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                opacity: 0.5;
-            `;
+            iconContainer.className = 'icon-container visibility-hidden';
+            iconContainer.style.width = '16px';
+            iconContainer.style.height = '16px';
             const icon = iconLoader.getIcon(LAYERFORGE_TOOLS.VISIBILITY);
             if (icon) {
                 if (icon instanceof HTMLImageElement) {
                     const img = icon.cloneNode();
-                    img.style.cssText = `
-                        width: 16px;
-                        height: 16px;
-                        filter: brightness(0) invert(1);
-                        opacity: 0.3;
-                    `;
+                    img.style.width = '16px';
+                    img.style.height = '16px';
                     iconContainer.appendChild(img);
                 }
                 else if (icon instanceof HTMLCanvasElement) {
@@ -103,9 +90,9 @@ export class CanvasLayersPanel {
             }
             else {
                 // Fallback
+                iconContainer.classList.add('fallback-text');
                 iconContainer.textContent = 'H';
                 iconContainer.style.fontSize = '10px';
-                iconContainer.style.color = '#888888';
             }
             return iconContainer;
         }
@@ -116,6 +103,7 @@ export class CanvasLayersPanel {
         this.container.tabIndex = 0; // Umożliwia fokus na panelu
         this.container.innerHTML = `
             <div class="layers-panel-header">
+                <div class="master-visibility-toggle" title="Toggle all layers visibility"></div>
                 <span class="layers-panel-title">Layers</span>
                 <div class="layers-panel-controls">
                     <button class="layers-btn" id="delete-layer-btn" title="Delete layer"></button>
@@ -126,9 +114,9 @@ export class CanvasLayersPanel {
             </div>
         `;
         this.layersContainer = this.container.querySelector('#layers-container');
-        this.injectStyles();
         // Setup event listeners dla przycisków
         this.setupControlButtons();
+        this.setupMasterVisibilityToggle();
         // Dodaj listener dla klawiatury, aby usuwanie działało z panelu
         this.container.addEventListener('keydown', (e) => {
             if (e.key === 'Delete' || e.key === 'Backspace') {
@@ -140,212 +128,6 @@ export class CanvasLayersPanel {
         log.debug('Panel structure created');
         return this.container;
     }
-    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;
-            }
-
-            .layer-visibility-toggle {
-                width: 20px;
-                height: 20px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                border-radius: 2px;
-                font-size: 14px;
-                flex-shrink: 0;
-                transition: background-color 0.15s ease;
-            }
-
-            .layer-visibility-toggle:hover {
-                background: rgba(255, 255, 255, 0.1);
-            }
-        `;
-        document.head.appendChild(style);
-        log.debug('Styles injected');
-    }
     setupControlButtons() {
         if (!this.container)
             return;
@@ -359,6 +141,69 @@ export class CanvasLayersPanel {
             log.info('Delete layer button clicked');
             this.deleteSelectedLayers();
         });
+        // Initial button state update
+        this.updateButtonStates();
+    }
+    setupMasterVisibilityToggle() {
+        if (!this.container)
+            return;
+        const toggleContainer = this.container.querySelector('.master-visibility-toggle');
+        if (!toggleContainer)
+            return;
+        const updateToggleState = () => {
+            const total = this.canvas.layers.length;
+            const visibleCount = this.canvas.layers.filter(l => l.visible).length;
+            toggleContainer.innerHTML = '';
+            const checkboxContainer = document.createElement('div');
+            checkboxContainer.className = 'checkbox-container';
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.id = 'master-visibility-checkbox';
+            const customCheckbox = document.createElement('span');
+            customCheckbox.className = 'custom-checkbox';
+            checkboxContainer.appendChild(checkbox);
+            checkboxContainer.appendChild(customCheckbox);
+            if (visibleCount === 0) {
+                checkbox.checked = false;
+                checkbox.indeterminate = false;
+                customCheckbox.classList.remove('checked', 'indeterminate');
+            }
+            else if (visibleCount === total) {
+                checkbox.checked = true;
+                checkbox.indeterminate = false;
+                customCheckbox.classList.add('checked');
+                customCheckbox.classList.remove('indeterminate');
+            }
+            else {
+                checkbox.checked = false;
+                checkbox.indeterminate = true;
+                customCheckbox.classList.add('indeterminate');
+                customCheckbox.classList.remove('checked');
+            }
+            checkboxContainer.addEventListener('click', (e) => {
+                e.stopPropagation();
+                let newVisible;
+                if (checkbox.indeterminate) {
+                    newVisible = false; // hide all when mixed
+                }
+                else if (checkbox.checked) {
+                    newVisible = false; // toggle to hide all
+                }
+                else {
+                    newVisible = true; // toggle to show all
+                }
+                this.canvas.layers.forEach(layer => {
+                    layer.visible = newVisible;
+                });
+                this.canvas.render();
+                this.canvas.requestSaveState();
+                updateToggleState();
+                this.renderLayers();
+            });
+            toggleContainer.appendChild(checkboxContainer);
+        };
+        updateToggleState();
+        this._updateMasterVisibilityToggle = updateToggleState;
     }
     renderLayers() {
         if (!this.layersContainer) {
@@ -376,6 +221,8 @@ export class CanvasLayersPanel {
             if (this.layersContainer)
                 this.layersContainer.appendChild(layerElement);
         });
+        if (this._updateMasterVisibilityToggle)
+            this._updateMasterVisibilityToggle();
         log.debug(`Rendered ${sortedLayers.length} layers`);
     }
     createLayerElement(layer, index) {
@@ -448,6 +295,7 @@ export class CanvasLayersPanel {
                 const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l) => l !== layer);
                 this.canvas.updateSelection(newSelection);
                 this.updateSelectionAppearance();
+                this.updateButtonStates();
             }
         });
         layerRow.addEventListener('dblclick', (e) => {
@@ -480,6 +328,7 @@ export class CanvasLayersPanel {
         this.canvas.updateSelectionLogic(layer, isCtrlPressed, isShiftPressed, index);
         // Aktualizuj tylko wygląd (klasy CSS), bez niszczenia DOM
         this.updateSelectionAppearance();
+        this.updateButtonStates();
         log.debug(`Layer clicked: ${layer.name}, selection count: ${this.canvas.canvasSelection.selectedLayers.length}`);
     }
     startEditingLayerName(nameElement, layer) {
@@ -660,12 +509,29 @@ export class CanvasLayersPanel {
             }
         });
     }
+    /**
+     * Aktualizuje stan przycisków w zależności od zaznaczenia warstw
+     */
+    updateButtonStates() {
+        if (!this.container)
+            return;
+        const deleteBtn = this.container.querySelector('#delete-layer-btn');
+        const hasSelectedLayers = this.canvas.canvasSelection.selectedLayers.length > 0;
+        if (deleteBtn) {
+            deleteBtn.disabled = !hasSelectedLayers;
+            deleteBtn.title = hasSelectedLayers
+                ? `Delete ${this.canvas.canvasSelection.selectedLayers.length} selected layer(s)`
+                : 'No layers selected';
+        }
+        log.debug(`Button states updated - delete button ${hasSelectedLayers ? 'enabled' : 'disabled'}`);
+    }
     /**
      * Aktualizuje panel gdy zmieni się zaznaczenie (wywoływane z zewnątrz).
      * Zamiast pełnego renderowania, tylko aktualizujemy wygląd.
      */
     onSelectionChanged() {
         this.updateSelectionAppearance();
+        this.updateButtonStates();
     }
     destroy() {
         if (this.container && this.container.parentNode) {

js/CanvasRenderer.js

@@ -7,6 +7,9 @@ export class CanvasRenderer {
         this.lastRenderTime = 0;
         this.renderInterval = 1000 / 60;
         this.isDirty = false;
+        // Initialize overlay canvases
+        this.initOverlay();
+        this.initStrokeOverlay();
     }
     /**
      * Helper function to draw text with background at world coordinates
@@ -102,10 +105,12 @@ export class CanvasRenderer {
         if (maskImage && this.canvas.maskTool.isOverlayVisible) {
             ctx.save();
             if (this.canvas.maskTool.isActive) {
+                // In draw mask mode, use the previewOpacity value from the slider
                 ctx.globalCompositeOperation = 'source-over';
-                ctx.globalAlpha = 0.5;
+                ctx.globalAlpha = this.canvas.maskTool.previewOpacity;
             }
             else {
+                // When not in draw mask mode, show mask at full opacity
                 ctx.globalCompositeOperation = 'source-over';
                 ctx.globalAlpha = 1.0;
             }
@@ -142,6 +147,7 @@ export class CanvasRenderer {
         this.renderInteractionElements(ctx);
         this.canvas.shapeTool.render(ctx);
         this.drawMaskAreaBounds(ctx); // Draw mask area bounds when mask tool is active
+        this.renderOutputAreaTransformHandles(ctx); // Draw output area transform handles
         this.renderLayerInfo(ctx);
         // Update custom shape menu position and visibility
         if (this.canvas.outputAreaShape) {
@@ -158,6 +164,11 @@ export class CanvasRenderer {
             this.canvas.canvas.height = this.canvas.offscreenCanvas.height;
         }
         this.canvas.ctx.drawImage(this.canvas.offscreenCanvas, 0, 0);
+        // Ensure overlay canvases are in DOM and properly sized
+        this.addOverlayToDOM();
+        this.updateOverlaySize();
+        this.addStrokeOverlayToDOM();
+        this.updateStrokeOverlaySize();
         // Update Batch Preview UI positions
         if (this.canvas.batchPreviewManagers && this.canvas.batchPreviewManagers.length > 0) {
             this.canvas.batchPreviewManagers.forEach((manager) => {
@@ -431,39 +442,76 @@ export class CanvasRenderer {
     drawSelectionFrame(ctx, layer) {
         const lineWidth = 2 / this.canvas.viewport.zoom;
         const handleRadius = 5 / this.canvas.viewport.zoom;
-        ctx.strokeStyle = '#00ff00';
-        ctx.lineWidth = lineWidth;
-        // Rysuj ramkę z adaptacyjnymi liniami (ciągłe/przerywane w zależności od przykrycia)
-        const halfW = layer.width / 2;
-        const halfH = layer.height / 2;
-        // Górna krawędź
-        this.drawAdaptiveLine(ctx, -halfW, -halfH, halfW, -halfH, layer);
-        // Prawa krawędź
-        this.drawAdaptiveLine(ctx, halfW, -halfH, halfW, halfH, layer);
-        // Dolna krawędź
-        this.drawAdaptiveLine(ctx, halfW, halfH, -halfW, halfH, layer);
-        // Lewa krawędź
-        this.drawAdaptiveLine(ctx, -halfW, halfH, -halfW, -halfH, layer);
-        // Rysuj linię do uchwytu rotacji (zawsze ciągła)
-        ctx.setLineDash([]);
-        ctx.beginPath();
-        ctx.moveTo(0, -layer.height / 2);
-        ctx.lineTo(0, -layer.height / 2 - 20 / this.canvas.viewport.zoom);
-        ctx.stroke();
-        // Rysuj uchwyty
+        if (layer.cropMode && layer.cropBounds && layer.originalWidth) {
+            // --- CROP MODE ---
+            ctx.lineWidth = lineWidth;
+            // 1. Draw dashed blue line for the full transform frame (the "original size" container)
+            ctx.strokeStyle = '#007bff';
+            ctx.setLineDash([8 / this.canvas.viewport.zoom, 8 / this.canvas.viewport.zoom]);
+            ctx.strokeRect(-layer.width / 2, -layer.height / 2, layer.width, layer.height);
+            ctx.setLineDash([]);
+            // 2. Draw solid blue line for the crop bounds
+            const layerScaleX = layer.width / layer.originalWidth;
+            const layerScaleY = layer.height / layer.originalHeight;
+            const s = layer.cropBounds;
+            const cropRectX = (-layer.width / 2) + (s.x * layerScaleX);
+            const cropRectY = (-layer.height / 2) + (s.y * layerScaleY);
+            const cropRectW = s.width * layerScaleX;
+            const cropRectH = s.height * layerScaleY;
+            ctx.strokeStyle = '#007bff'; // Solid blue
+            this.drawAdaptiveLine(ctx, cropRectX, cropRectY, cropRectX + cropRectW, cropRectY, layer); // Top
+            this.drawAdaptiveLine(ctx, cropRectX + cropRectW, cropRectY, cropRectX + cropRectW, cropRectY + cropRectH, layer); // Right
+            this.drawAdaptiveLine(ctx, cropRectX + cropRectW, cropRectY + cropRectH, cropRectX, cropRectY + cropRectH, layer); // Bottom
+            this.drawAdaptiveLine(ctx, cropRectX, cropRectY + cropRectH, cropRectX, cropRectY, layer); // Left
+        }
+        else {
+            // --- TRANSFORM MODE ---
+            ctx.strokeStyle = '#00ff00'; // Green
+            ctx.lineWidth = lineWidth;
+            const halfW = layer.width / 2;
+            const halfH = layer.height / 2;
+            // Draw adaptive solid green line for transform frame
+            this.drawAdaptiveLine(ctx, -halfW, -halfH, halfW, -halfH, layer);
+            this.drawAdaptiveLine(ctx, halfW, -halfH, halfW, halfH, layer);
+            this.drawAdaptiveLine(ctx, halfW, halfH, -halfW, halfH, layer);
+            this.drawAdaptiveLine(ctx, -halfW, halfH, -halfW, -halfH, layer);
+            // Draw line to rotation handle
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            const startY = layer.flipV ? halfH : -halfH;
+            const endY = startY + (layer.flipV ? 1 : -1) * (20 / this.canvas.viewport.zoom);
+            ctx.moveTo(0, startY);
+            ctx.lineTo(0, endY);
+            ctx.stroke();
+        }
+        // --- DRAW HANDLES (Unified Logic) ---
         const handles = this.canvas.canvasLayers.getHandles(layer);
         ctx.fillStyle = '#ffffff';
         ctx.strokeStyle = '#000000';
         ctx.lineWidth = 1 / this.canvas.viewport.zoom;
+        const centerX = layer.x + layer.width / 2;
+        const centerY = layer.y + layer.height / 2;
         for (const key in handles) {
+            // Skip rotation handle in crop mode
+            if (layer.cropMode && key === 'rot')
+                continue;
             const point = handles[key];
-            ctx.beginPath();
-            const localX = point.x - (layer.x + layer.width / 2);
-            const localY = point.y - (layer.y + layer.height / 2);
+            // The handle position is already in world space.
+            // We need to convert it to the layer's local, un-rotated space.
+            const dx = point.x - centerX;
+            const dy = point.y - centerY;
+            // "Un-rotate" the position to get it in the layer's local, un-rotated space
             const rad = -layer.rotation * Math.PI / 180;
-            const rotatedX = localX * Math.cos(rad) - localY * Math.sin(rad);
-            const rotatedY = localX * Math.sin(rad) + localY * Math.cos(rad);
-            ctx.arc(rotatedX, rotatedY, handleRadius, 0, Math.PI * 2);
+            const cos = Math.cos(rad);
+            const sin = Math.sin(rad);
+            const localX = dx * cos - dy * sin;
+            const localY = dx * sin + dy * cos;
+            // The context is already flipped. We need to flip the coordinates
+            // to match the visual transformation, so the arc is drawn in the correct place.
+            const finalX = localX * (layer.flipH ? -1 : 1);
+            const finalY = localY * (layer.flipV ? -1 : 1);
+            ctx.beginPath();
+            ctx.arc(finalX, finalY, handleRadius, 0, Math.PI * 2);
             ctx.fill();
             ctx.stroke();
         }
@@ -546,4 +594,279 @@ export class CanvasRenderer {
             padding: 8
         });
     }
+    /**
+     * Initialize overlay canvas for lightweight overlays like brush cursor
+     */
+    initOverlay() {
+        // Setup overlay canvas to match main canvas
+        this.updateOverlaySize();
+        // Position overlay canvas on top of main canvas
+        this.canvas.overlayCanvas.style.position = 'absolute';
+        this.canvas.overlayCanvas.style.left = '0px';
+        this.canvas.overlayCanvas.style.top = '0px';
+        this.canvas.overlayCanvas.style.pointerEvents = 'none';
+        this.canvas.overlayCanvas.style.zIndex = '20'; // Above other overlays
+        // Add overlay to DOM when main canvas is added
+        this.addOverlayToDOM();
+        log.debug('Overlay canvas initialized');
+    }
+    /**
+     * Add overlay canvas to DOM if main canvas has a parent
+     */
+    addOverlayToDOM() {
+        if (this.canvas.canvas.parentElement && !this.canvas.overlayCanvas.parentElement) {
+            this.canvas.canvas.parentElement.appendChild(this.canvas.overlayCanvas);
+            log.debug('Overlay canvas added to DOM');
+        }
+    }
+    /**
+     * Update overlay canvas size to match main canvas
+     */
+    updateOverlaySize() {
+        if (this.canvas.overlayCanvas.width !== this.canvas.canvas.clientWidth ||
+            this.canvas.overlayCanvas.height !== this.canvas.canvas.clientHeight) {
+            this.canvas.overlayCanvas.width = Math.max(1, this.canvas.canvas.clientWidth);
+            this.canvas.overlayCanvas.height = Math.max(1, this.canvas.canvas.clientHeight);
+            log.debug(`Overlay canvas resized to ${this.canvas.overlayCanvas.width}x${this.canvas.overlayCanvas.height}`);
+        }
+    }
+    /**
+     * Clear overlay canvas
+     */
+    clearOverlay() {
+        this.canvas.overlayCtx.clearRect(0, 0, this.canvas.overlayCanvas.width, this.canvas.overlayCanvas.height);
+    }
+    /**
+     * Initialize a dedicated overlay for real-time mask stroke preview
+     */
+    initStrokeOverlay() {
+        // Create canvas if not created yet
+        if (!this.strokeOverlayCanvas) {
+            this.strokeOverlayCanvas = document.createElement('canvas');
+            const ctx = this.strokeOverlayCanvas.getContext('2d');
+            if (!ctx) {
+                throw new Error('Failed to get 2D context for stroke overlay canvas');
+            }
+            this.strokeOverlayCtx = ctx;
+        }
+        // Size match main canvas
+        this.updateStrokeOverlaySize();
+        // Position above main canvas but below cursor overlay
+        this.strokeOverlayCanvas.style.position = 'absolute';
+        this.strokeOverlayCanvas.style.left = '1px';
+        this.strokeOverlayCanvas.style.top = '1px';
+        this.strokeOverlayCanvas.style.pointerEvents = 'none';
+        this.strokeOverlayCanvas.style.zIndex = '19'; // Below cursor overlay (20)
+        // Opacity is now controlled by MaskTool.previewOpacity
+        this.strokeOverlayCanvas.style.opacity = String(this.canvas.maskTool.previewOpacity || 0.5);
+        // Add to DOM
+        this.addStrokeOverlayToDOM();
+        log.debug('Stroke overlay canvas initialized');
+    }
+    /**
+     * Add stroke overlay canvas to DOM if needed
+     */
+    addStrokeOverlayToDOM() {
+        if (this.canvas.canvas.parentElement && !this.strokeOverlayCanvas.parentElement) {
+            this.canvas.canvas.parentElement.appendChild(this.strokeOverlayCanvas);
+            log.debug('Stroke overlay canvas added to DOM');
+        }
+    }
+    /**
+     * Ensure stroke overlay size matches main canvas
+     */
+    updateStrokeOverlaySize() {
+        const w = Math.max(1, this.canvas.canvas.clientWidth);
+        const h = Math.max(1, this.canvas.canvas.clientHeight);
+        if (this.strokeOverlayCanvas.width !== w || this.strokeOverlayCanvas.height !== h) {
+            this.strokeOverlayCanvas.width = w;
+            this.strokeOverlayCanvas.height = h;
+            log.debug(`Stroke overlay resized to ${w}x${h}`);
+        }
+    }
+    /**
+     * Clear the stroke overlay
+     */
+    clearMaskStrokeOverlay() {
+        if (!this.strokeOverlayCtx)
+            return;
+        this.strokeOverlayCtx.clearRect(0, 0, this.strokeOverlayCanvas.width, this.strokeOverlayCanvas.height);
+    }
+    /**
+     * Draw a preview stroke segment onto the stroke overlay in screen space
+     * Uses line drawing with gradient to match MaskTool's drawLineOnChunk exactly
+     */
+    drawMaskStrokeSegment(startWorld, endWorld) {
+        // Ensure overlay is present and sized
+        this.updateStrokeOverlaySize();
+        const zoom = this.canvas.viewport.zoom;
+        const toScreen = (p) => ({
+            x: (p.x - this.canvas.viewport.x) * zoom,
+            y: (p.y - this.canvas.viewport.y) * zoom
+        });
+        const startScreen = toScreen(startWorld);
+        const endScreen = toScreen(endWorld);
+        const brushRadius = (this.canvas.maskTool.brushSize / 2) * zoom;
+        const hardness = this.canvas.maskTool.brushHardness;
+        const strength = this.canvas.maskTool.brushStrength;
+        // If strength is 0, don't draw anything
+        if (strength <= 0) {
+            return;
+        }
+        this.strokeOverlayCtx.save();
+        // Draw line segment exactly as MaskTool does
+        this.strokeOverlayCtx.beginPath();
+        this.strokeOverlayCtx.moveTo(startScreen.x, startScreen.y);
+        this.strokeOverlayCtx.lineTo(endScreen.x, endScreen.y);
+        // Match the gradient setup from MaskTool's drawLineOnChunk
+        if (hardness === 1) {
+            this.strokeOverlayCtx.strokeStyle = `rgba(255, 255, 255, ${strength})`;
+        }
+        else {
+            const innerRadius = brushRadius * hardness;
+            const gradient = this.strokeOverlayCtx.createRadialGradient(endScreen.x, endScreen.y, innerRadius, endScreen.x, endScreen.y, brushRadius);
+            gradient.addColorStop(0, `rgba(255, 255, 255, ${strength})`);
+            gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+            this.strokeOverlayCtx.strokeStyle = gradient;
+        }
+        // Match line properties from MaskTool
+        this.strokeOverlayCtx.lineWidth = this.canvas.maskTool.brushSize * zoom;
+        this.strokeOverlayCtx.lineCap = 'round';
+        this.strokeOverlayCtx.lineJoin = 'round';
+        this.strokeOverlayCtx.globalCompositeOperation = 'source-over';
+        this.strokeOverlayCtx.stroke();
+        this.strokeOverlayCtx.restore();
+    }
+    /**
+     * Redraws the entire stroke overlay from world coordinates
+     * Used when viewport changes during drawing to maintain visual consistency
+     */
+    redrawMaskStrokeOverlay(strokePoints) {
+        if (strokePoints.length < 2)
+            return;
+        // Clear the overlay first
+        this.clearMaskStrokeOverlay();
+        // Redraw all segments with current viewport
+        for (let i = 1; i < strokePoints.length; i++) {
+            this.drawMaskStrokeSegment(strokePoints[i - 1], strokePoints[i]);
+        }
+    }
+    /**
+     * Draw mask brush cursor on overlay canvas with visual feedback for size, strength and hardness
+     * @param worldPoint World coordinates of cursor
+     */
+    drawMaskBrushCursor(worldPoint) {
+        if (!this.canvas.maskTool.isActive || !this.canvas.isMouseOver) {
+            this.clearOverlay();
+            return;
+        }
+        // Update overlay size if needed
+        this.updateOverlaySize();
+        // Clear previous cursor
+        this.clearOverlay();
+        // Convert world coordinates to screen coordinates
+        const screenX = (worldPoint.x - this.canvas.viewport.x) * this.canvas.viewport.zoom;
+        const screenY = (worldPoint.y - this.canvas.viewport.y) * this.canvas.viewport.zoom;
+        // Get brush properties
+        const brushRadius = (this.canvas.maskTool.brushSize / 2) * this.canvas.viewport.zoom;
+        const brushStrength = this.canvas.maskTool.brushStrength;
+        const brushHardness = this.canvas.maskTool.brushHardness;
+        // Save context state
+        this.canvas.overlayCtx.save();
+        // If strength is 0, just draw outline
+        if (brushStrength > 0) {
+            // Draw inner fill to visualize brush effect - matches actual brush rendering
+            const gradient = this.canvas.overlayCtx.createRadialGradient(screenX, screenY, 0, screenX, screenY, brushRadius);
+            // Preview alpha - subtle to not obscure content
+            const previewAlpha = brushStrength * 0.15; // Very subtle preview (max 15% opacity)
+            if (brushHardness === 1) {
+                // Hard brush - uniform fill within radius
+                gradient.addColorStop(0, `rgba(255, 255, 255, ${previewAlpha})`);
+                gradient.addColorStop(1, `rgba(255, 255, 255, ${previewAlpha})`);
+            }
+            else {
+                // Soft brush - gradient fade matching actual brush
+                gradient.addColorStop(0, `rgba(255, 255, 255, ${previewAlpha})`);
+                if (brushHardness > 0) {
+                    gradient.addColorStop(brushHardness, `rgba(255, 255, 255, ${previewAlpha})`);
+                }
+                gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+            }
+            this.canvas.overlayCtx.beginPath();
+            this.canvas.overlayCtx.arc(screenX, screenY, brushRadius, 0, 2 * Math.PI);
+            this.canvas.overlayCtx.fillStyle = gradient;
+            this.canvas.overlayCtx.fill();
+        }
+        // Draw outer circle (SIZE indicator)
+        this.canvas.overlayCtx.beginPath();
+        this.canvas.overlayCtx.arc(screenX, screenY, brushRadius, 0, 2 * Math.PI);
+        // Stroke opacity based on strength (dimmer when strength is 0)
+        const strokeOpacity = brushStrength > 0 ? (0.4 + brushStrength * 0.4) : 0.3;
+        this.canvas.overlayCtx.strokeStyle = `rgba(255, 255, 255, ${strokeOpacity})`;
+        this.canvas.overlayCtx.lineWidth = 1.5;
+        // Visual feedback for hardness
+        if (brushHardness > 0.8) {
+            // Hard brush - solid line
+            this.canvas.overlayCtx.setLineDash([]);
+        }
+        else {
+            // Soft brush - dashed line
+            const dashLength = 2 + (1 - brushHardness) * 4;
+            this.canvas.overlayCtx.setLineDash([dashLength, dashLength]);
+        }
+        this.canvas.overlayCtx.stroke();
+        // Center dot for small brushes
+        if (brushRadius < 5) {
+            this.canvas.overlayCtx.beginPath();
+            this.canvas.overlayCtx.arc(screenX, screenY, 1, 0, 2 * Math.PI);
+            this.canvas.overlayCtx.fillStyle = `rgba(255, 255, 255, ${strokeOpacity})`;
+            this.canvas.overlayCtx.fill();
+        }
+        // Restore context state
+        this.canvas.overlayCtx.restore();
+    }
+    /**
+     * Update overlay position when viewport changes
+     */
+    updateOverlayPosition() {
+        // Overlay canvas is positioned absolutely, so it doesn't need repositioning
+        // Just ensure it's the right size
+        this.updateOverlaySize();
+    }
+    /**
+     * Draw transform handles for output area when in transform mode
+     */
+    renderOutputAreaTransformHandles(ctx) {
+        if (this.canvas.canvasInteractions.interaction.mode !== 'transformingOutputArea') {
+            return;
+        }
+        const bounds = this.canvas.outputAreaBounds;
+        const handleRadius = 5 / this.canvas.viewport.zoom;
+        // Define handle positions
+        const handles = {
+            'nw': { x: bounds.x, y: bounds.y },
+            'n': { x: bounds.x + bounds.width / 2, y: bounds.y },
+            'ne': { x: bounds.x + bounds.width, y: bounds.y },
+            'e': { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+            'se': { x: bounds.x + bounds.width, y: bounds.y + bounds.height },
+            's': { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height },
+            'sw': { x: bounds.x, y: bounds.y + bounds.height },
+            'w': { x: bounds.x, y: bounds.y + bounds.height / 2 },
+        };
+        // Draw handles
+        ctx.fillStyle = '#ffffff';
+        ctx.strokeStyle = '#000000';
+        ctx.lineWidth = 1 / this.canvas.viewport.zoom;
+        for (const [name, pos] of Object.entries(handles)) {
+            ctx.beginPath();
+            ctx.arc(pos.x, pos.y, handleRadius, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+        }
+        // Draw a highlight around the output area
+        ctx.strokeStyle = 'rgba(0, 150, 255, 0.8)';
+        ctx.lineWidth = 3 / this.canvas.viewport.zoom;
+        ctx.setLineDash([]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    }
 }

js/CanvasState.js

@@ -200,6 +200,7 @@ export class CanvasState {
     _createLayerFromSrc(layerData, imageSrc, index, resolve) {
         if (typeof imageSrc === 'string') {
             const img = new Image();
+            img.crossOrigin = 'anonymous';
             img.onload = () => {
                 log.debug(`Layer ${index}: Image loaded successfully.`);
                 const newLayer = { ...layerData, image: img };
@@ -216,6 +217,7 @@ export class CanvasState {
             if (ctx) {
                 ctx.drawImage(imageSrc, 0, 0);
                 const img = new Image();
+                img.crossOrigin = 'anonymous';
                 img.onload = () => {
                     log.debug(`Layer ${index}: Image loaded successfully from ImageBitmap.`);
                     const newLayer = { ...layerData, image: img };
@@ -404,12 +406,10 @@ If you see dark images or masks in the output, make sure node_id is set to ${cor
         }
         if (this.maskUndoStack.length > 0) {
             const prevState = this.maskUndoStack[this.maskUndoStack.length - 1];
-            const maskCanvas = this.canvas.maskTool.getMask();
-            const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
-            if (maskCtx) {
-                maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
-                maskCtx.drawImage(prevState, 0, 0);
-            }
+            // Use the new restoreMaskFromSavedState method that properly clears chunks first
+            this.canvas.maskTool.restoreMaskFromSavedState(prevState);
+            // Clear stroke overlay to prevent old drawing previews from persisting
+            this.canvas.canvasRenderer.clearMaskStrokeOverlay();
             this.canvas.render();
         }
         this.canvas.updateHistoryButtons();
@@ -420,12 +420,10 @@ If you see dark images or masks in the output, make sure node_id is set to ${cor
         const nextState = this.maskRedoStack.pop();
         if (nextState) {
             this.maskUndoStack.push(nextState);
-            const maskCanvas = this.canvas.maskTool.getMask();
-            const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
-            if (maskCtx) {
-                maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
-                maskCtx.drawImage(nextState, 0, 0);
-            }
+            // Use the new restoreMaskFromSavedState method that properly clears chunks first
+            this.canvas.maskTool.restoreMaskFromSavedState(nextState);
+            // Clear stroke overlay to prevent old drawing previews from persisting
+            this.canvas.canvasRenderer.clearMaskStrokeOverlay();
             this.canvas.render();
         }
         this.canvas.updateHistoryButtons();

js/CanvasView.js

@@ -8,7 +8,7 @@ import { clearAllCanvasStates } from "./db.js";
 import { ImageCache } from "./ImageCache.js";
 import { createCanvas } from "./utils/CommonUtils.js";
 import { createModuleLogger } from "./utils/LoggerUtils.js";
-import { showErrorNotification, showSuccessNotification, showInfoNotification } from "./utils/NotificationUtils.js";
+import { showErrorNotification, showSuccessNotification, showInfoNotification, showWarningNotification } from "./utils/NotificationUtils.js";
 import { iconLoader, LAYERFORGE_TOOLS } from "./utils/IconLoader.js";
 import { setupSAMDetectorHook } from "./SAMDetectorIntegration.js";
 const log = createModuleLogger('Canvas_view');
@@ -17,6 +17,32 @@ async function createCanvasWidget(node, widget, app) {
         onStateChange: () => updateOutput(node, canvas)
     });
     const imageCache = new ImageCache();
+    /**
+     * Helper function to update the icon of a switch component.
+     * @param knobIconEl The HTML element for the switch's knob icon.
+     * @param isChecked The current state of the switch (e.g., checkbox.checked).
+     * @param iconToolTrue The icon tool name for the 'true' state.
+     * @param iconToolFalse The icon tool name for the 'false' state.
+     * @param fallbackTrue The text fallback for the 'true' state.
+     * @param fallbackFalse The text fallback for the 'false' state.
+     */
+    const updateSwitchIcon = (knobIconEl, isChecked, iconToolTrue, iconToolFalse, fallbackTrue, fallbackFalse) => {
+        if (!knobIconEl)
+            return;
+        const iconTool = isChecked ? iconToolTrue : iconToolFalse;
+        const fallbackText = isChecked ? fallbackTrue : fallbackFalse;
+        const icon = iconLoader.getIcon(iconTool);
+        knobIconEl.innerHTML = ''; // Clear previous icon
+        if (icon instanceof HTMLImageElement) {
+            const clonedIcon = icon.cloneNode();
+            clonedIcon.style.width = '20px';
+            clonedIcon.style.height = '20px';
+            knobIconEl.appendChild(clonedIcon);
+        }
+        else {
+            knobIconEl.textContent = fallbackText;
+        }
+    };
     const helpTooltip = $el("div.painter-tooltip", {
         id: `painter-help-tooltip-${node.id}`,
     });
@@ -72,7 +98,6 @@ async function createCanvasWidget(node, widget, app) {
                 }),
                 $el("button.painter-button.icon-button", {
                     textContent: "?",
-                    title: "Show shortcuts",
                     onmouseenter: (e) => {
                         const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
                         showTooltip(e.target, content);
@@ -151,34 +176,36 @@ async function createCanvasWidget(node, widget, app) {
                                 $el("span.switch-icon")
                             ])
                         ]);
+                        // Helper function to get current tooltip content based on switch state
+                        const getCurrentTooltipContent = () => {
+                            const checked = switchEl.querySelector('input[type="checkbox"]').checked;
+                            return checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+                        };
+                        // Helper function to update tooltip content if it's currently visible
+                        const updateTooltipIfVisible = () => {
+                            // Only update if tooltip is currently visible
+                            if (helpTooltip.style.display === 'block') {
+                                const tooltipContent = getCurrentTooltipContent();
+                                showTooltip(switchEl, tooltipContent);
+                            }
+                        };
                         // Tooltip logic
                         switchEl.addEventListener("mouseenter", (e) => {
-                            const checked = switchEl.querySelector('input[type="checkbox"]').checked;
-                            const tooltipContent = checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+                            const tooltipContent = getCurrentTooltipContent();
                             showTooltip(switchEl, tooltipContent);
                         });
                         switchEl.addEventListener("mouseleave", hideTooltip);
-                        // Dynamic icon and text update on toggle
+                        // Dynamic icon update on toggle
                         const input = switchEl.querySelector('input[type="checkbox"]');
                         const knobIcon = switchEl.querySelector('.switch-knob .switch-icon');
-                        const updateSwitchView = (isClipspace) => {
-                            const iconTool = isClipspace ? LAYERFORGE_TOOLS.CLIPSPACE : LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD;
-                            const icon = iconLoader.getIcon(iconTool);
-                            if (icon instanceof HTMLImageElement) {
-                                knobIcon.innerHTML = '';
-                                const clonedIcon = icon.cloneNode();
-                                clonedIcon.style.width = '20px';
-                                clonedIcon.style.height = '20px';
-                                knobIcon.appendChild(clonedIcon);
-                            }
-                            else {
-                                knobIcon.textContent = isClipspace ? "🗂️" : "📋";
-                            }
-                        };
-                        input.addEventListener('change', () => updateSwitchView(input.checked));
+                        input.addEventListener('change', () => {
+                            updateSwitchIcon(knobIcon, input.checked, LAYERFORGE_TOOLS.CLIPSPACE, LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD, "🗂️", "📋");
+                            // Update tooltip content immediately after state change
+                            updateTooltipIfVisible();
+                        });
                         // Initial state
                         iconLoader.preloadToolIcons().then(() => {
-                            updateSwitchView(isClipspace);
+                            updateSwitchIcon(knobIcon, isClipspace, LAYERFORGE_TOOLS.CLIPSPACE, LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD, "🗂️", "📋");
                         });
                         return switchEl;
                     })()
@@ -186,88 +213,32 @@ async function createCanvasWidget(node, widget, app) {
             ]),
             $el("div.painter-separator"),
             $el("div.painter-button-group", {}, [
+                $el("button.painter-button.requires-selection", {
+                    textContent: "Auto Adjust Output",
+                    title: "Automatically adjust output area to fit selected layers",
+                    onclick: () => {
+                        const selectedLayers = canvas.canvasSelection.selectedLayers;
+                        if (selectedLayers.length === 0) {
+                            showWarningNotification("Please select one or more layers first");
+                            return;
+                        }
+                        const success = canvas.canvasLayers.autoAdjustOutputToSelection();
+                        if (success) {
+                            const bounds = canvas.outputAreaBounds;
+                            showSuccessNotification(`Output area adjusted to ${bounds.width}x${bounds.height}px`);
+                        }
+                        else {
+                            showErrorNotification("Cannot calculate valid output area dimensions");
+                        }
+                    }
+                }),
                 $el("button.painter-button", {
                     textContent: "Output Area Size",
-                    title: "Set the size of the output area",
+                    title: "Transform output area - drag handles to resize",
                     onclick: () => {
-                        const dialog = $el("div.painter-dialog", {
-                            style: {
-                                position: 'fixed',
-                                left: '50%',
-                                top: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                zIndex: '9999'
-                            }
-                        }, [
-                            $el("div", {
-                                style: {
-                                    color: "white",
-                                    marginBottom: "10px"
-                                }
-                            }, [
-                                $el("label", {
-                                    style: {
-                                        marginRight: "5px"
-                                    }
-                                }, [
-                                    $el("span", {}, ["Width: "])
-                                ]),
-                                $el("input", {
-                                    type: "number",
-                                    id: "canvas-width",
-                                    value: String(canvas.width),
-                                    min: "1",
-                                    max: "4096"
-                                })
-                            ]),
-                            $el("div", {
-                                style: {
-                                    color: "white",
-                                    marginBottom: "10px"
-                                }
-                            }, [
-                                $el("label", {
-                                    style: {
-                                        marginRight: "5px"
-                                    }
-                                }, [
-                                    $el("span", {}, ["Height: "])
-                                ]),
-                                $el("input", {
-                                    type: "number",
-                                    id: "canvas-height",
-                                    value: String(canvas.height),
-                                    min: "1",
-                                    max: "4096"
-                                })
-                            ]),
-                            $el("div", {
-                                style: {
-                                    textAlign: "right"
-                                }
-                            }, [
-                                $el("button", {
-                                    id: "cancel-size",
-                                    textContent: "Cancel"
-                                }),
-                                $el("button", {
-                                    id: "confirm-size",
-                                    textContent: "OK"
-                                })
-                            ])
-                        ]);
-                        document.body.appendChild(dialog);
-                        document.getElementById('confirm-size').onclick = () => {
-                            const widthInput = document.getElementById('canvas-width');
-                            const heightInput = document.getElementById('canvas-height');
-                            const width = parseInt(widthInput.value) || canvas.width;
-                            const height = parseInt(heightInput.value) || canvas.height;
-                            canvas.setOutputAreaSize(width, height);
-                            document.body.removeChild(dialog);
-                        };
-                        document.getElementById('cancel-size').onclick = () => {
-                            document.body.removeChild(dialog);
-                        };
+                        // Activate output area transform mode
+                        canvas.canvasInteractions.activateOutputAreaTransform();
+                        showInfoNotification("Click and drag the handles to resize the output area. Click anywhere else to exit.", 3000);
                     }
                 }),
                 $el("button.painter-button.requires-selection", {
@@ -293,6 +264,50 @@ async function createCanvasWidget(node, widget, app) {
             ]),
             $el("div.painter-separator"),
             $el("div.painter-button-group", {}, [
+                (() => {
+                    const switchEl = $el("label.clipboard-switch.requires-selection", {
+                        id: `crop-transform-switch-${node.id}`,
+                        title: "Toggle between Transform and Crop mode for selected layer(s)"
+                    }, [
+                        $el("input", {
+                            type: "checkbox",
+                            checked: false,
+                            onchange: (e) => {
+                                const isCropMode = e.target.checked;
+                                const selectedLayers = canvas.canvasSelection.selectedLayers;
+                                if (selectedLayers.length === 0)
+                                    return;
+                                selectedLayers.forEach((layer) => {
+                                    layer.cropMode = isCropMode;
+                                    if (isCropMode && !layer.cropBounds) {
+                                        layer.cropBounds = { x: 0, y: 0, width: layer.originalWidth, height: layer.originalHeight };
+                                    }
+                                });
+                                canvas.saveState();
+                                canvas.render();
+                            }
+                        }),
+                        $el("span.switch-track"),
+                        $el("span.switch-labels", { style: { fontSize: "11px" } }, [
+                            $el("span.text-clipspace", {}, ["Crop"]),
+                            $el("span.text-system", {}, ["Transform"])
+                        ]),
+                        $el("span.switch-knob", {}, [
+                            $el("span.switch-icon", { id: `crop-transform-icon-${node.id}` })
+                        ])
+                    ]);
+                    const input = switchEl.querySelector('input[type="checkbox"]');
+                    const knobIcon = switchEl.querySelector('.switch-icon');
+                    input.addEventListener('change', () => {
+                        updateSwitchIcon(knobIcon, input.checked, LAYERFORGE_TOOLS.CROP, LAYERFORGE_TOOLS.TRANSFORM, "✂️", "✥");
+                    });
+                    // Initial state
+                    iconLoader.preloadToolIcons().then(() => {
+                        updateSwitchIcon(knobIcon, false, // Initial state is transform
+                        LAYERFORGE_TOOLS.CROP, LAYERFORGE_TOOLS.TRANSFORM, "✂️", "✥");
+                    });
+                    return switchEl;
+                })(),
                 $el("button.painter-button.requires-selection", {
                     textContent: "Rotate +90°",
                     title: "Rotate selected layer(s) by +90 degrees",
@@ -328,11 +343,38 @@ async function createCanvasWidget(node, widget, app) {
                         const button = e.target.closest('.matting-button');
                         if (button.classList.contains('loading'))
                             return;
-                        const spinner = $el("div.matting-spinner");
-                        button.appendChild(spinner);
-                        button.classList.add('loading');
-                        showInfoNotification("Starting background removal process...", 2000);
                         try {
+                            // First check if model is available
+                            const modelCheckResponse = await fetch("/matting/check-model");
+                            const modelStatus = await modelCheckResponse.json();
+                            if (!modelStatus.available) {
+                                switch (modelStatus.reason) {
+                                    case 'missing_dependency':
+                                        showErrorNotification(modelStatus.message, 8000);
+                                        return;
+                                    case 'not_downloaded':
+                                        showWarningNotification("The matting model needs to be downloaded first. This will happen automatically when you proceed (requires internet connection).", 5000);
+                                        // Ask user if they want to proceed with download
+                                        if (!confirm("The matting model needs to be downloaded (about 1GB). This is a one-time download. Do you want to proceed?")) {
+                                            return;
+                                        }
+                                        showInfoNotification("Downloading matting model... This may take a few minutes.", 10000);
+                                        break;
+                                    case 'corrupted':
+                                        showErrorNotification(modelStatus.message, 8000);
+                                        return;
+                                    case 'error':
+                                        showErrorNotification(`Error checking model: ${modelStatus.message}`, 5000);
+                                        return;
+                                }
+                            }
+                            // Proceed with matting
+                            const spinner = $el("div.matting-spinner");
+                            button.appendChild(spinner);
+                            button.classList.add('loading');
+                            if (modelStatus.available) {
+                                showInfoNotification("Starting background removal process...", 2000);
+                            }
                             if (canvas.canvasSelection.selectedLayers.length !== 1) {
                                 throw new Error("Please select exactly one image layer for matting.");
                             }
@@ -348,7 +390,20 @@ async function createCanvasWidget(node, widget, app) {
                             if (!response.ok) {
                                 let errorMsg = `Server error: ${response.status} - ${response.statusText}`;
                                 if (result && result.error) {
-                                    errorMsg = `Error: ${result.error}. Details: ${result.details || 'Check console'}`;
+                                    // Handle specific error types
+                                    if (result.error === "Network Connection Error") {
+                                        showErrorNotification("Failed to download the matting model. Please check your internet connection and try again.", 8000);
+                                        return;
+                                    }
+                                    else if (result.error === "Matting Model Error") {
+                                        showErrorNotification(result.details || "Model loading error. Please check the console for details.", 8000);
+                                        return;
+                                    }
+                                    else if (result.error === "Dependency Not Found") {
+                                        showErrorNotification(result.details || "Missing required dependencies.", 8000);
+                                        return;
+                                    }
+                                    errorMsg = `${result.error}: ${result.details || 'Check console'}`;
                                 }
                                 throw new Error(errorMsg);
                             }
@@ -359,6 +414,8 @@ async function createCanvasWidget(node, widget, app) {
                             delete newLayer.imageId;
                             canvas.layers[selectedLayerIndex] = newLayer;
                             canvas.canvasSelection.updateSelection([newLayer]);
+                            // Invalidate processed image cache when layer image changes (matting)
+                            canvas.canvasLayers.invalidateProcessedImageCache(newLayer.id);
                             canvas.render();
                             canvas.saveState();
                             showSuccessNotification("Background removed successfully!");
@@ -366,11 +423,16 @@ async function createCanvasWidget(node, widget, app) {
                         catch (error) {
                             log.error("Matting error:", error);
                             const errorMessage = error.message || "An unknown error occurred.";
-                            showErrorNotification(`Matting Failed: ${errorMessage}`);
+                            if (!errorMessage.includes("Network Connection Error") &&
+                                !errorMessage.includes("Matting Model Error") &&
+                                !errorMessage.includes("Dependency Not Found")) {
+                                showErrorNotification(`Matting Failed: ${errorMessage}`);
+                            }
                         }
                         finally {
                             button.classList.remove('loading');
-                            if (button.contains(spinner)) {
+                            const spinner = button.querySelector('.matting-spinner');
+                            if (spinner && button.contains(spinner)) {
                                 button.removeChild(spinner);
                             }
                         }
@@ -395,7 +457,8 @@ async function createCanvasWidget(node, widget, app) {
             $el("div.painter-button-group", { id: "mask-controls" }, [
                 $el("label.clipboard-switch.mask-switch", {
                     id: `toggle-mask-switch-${node.id}`,
-                    style: { minWidth: "56px", maxWidth: "56px", width: "56px", paddingLeft: "0", paddingRight: "0" }
+                    style: { minWidth: "56px", maxWidth: "56px", width: "56px", paddingLeft: "0", paddingRight: "0" },
+                    title: "Toggle mask overlay visibility on canvas (mask still affects output when disabled)"
                 }, [
                     $el("input", {
                         type: "checkbox",
@@ -480,6 +543,25 @@ async function createCanvasWidget(node, widget, app) {
                         setTimeout(() => canvas.render(), 0);
                     }
                 }),
+                $el("div.painter-slider-container.mask-control", { style: { display: 'none' } }, [
+                    $el("label", { for: "preview-opacity-slider", textContent: "Mask Opacity:" }),
+                    $el("input", {
+                        id: "preview-opacity-slider",
+                        type: "range",
+                        min: "0",
+                        max: "1",
+                        step: "0.05",
+                        value: "0.5",
+                        oninput: (e) => {
+                            const value = e.target.value;
+                            canvas.maskTool.setPreviewOpacity(parseFloat(value));
+                            const valueEl = document.getElementById('preview-opacity-value');
+                            if (valueEl)
+                                valueEl.textContent = `${Math.round(parseFloat(value) * 100)}%`;
+                        }
+                    }),
+                    $el("div.slider-value", { id: "preview-opacity-value" }, ["50%"])
+                ]),
                 $el("div.painter-slider-container.mask-control", { style: { display: 'none' } }, [
                     $el("label", { for: "brush-size-slider", textContent: "Size:" }),
                     $el("input", {
@@ -629,19 +711,38 @@ async function createCanvasWidget(node, widget, app) {
     const updateButtonStates = () => {
         const selectionCount = canvas.canvasSelection.selectedLayers.length;
         const hasSelection = selectionCount > 0;
-        controlPanel.querySelectorAll('.requires-selection').forEach((btn) => {
-            const button = btn;
-            if (button.textContent === 'Fuse') {
-                button.disabled = selectionCount < 2;
-            }
-            else {
-                button.disabled = !hasSelection;
+        // --- Handle Standard Buttons ---
+        controlPanel.querySelectorAll('.requires-selection').forEach((el) => {
+            if (el.tagName === 'BUTTON') {
+                if (el.textContent === 'Fuse') {
+                    el.disabled = selectionCount < 2;
+                }
+                else {
+                    el.disabled = !hasSelection;
+                }
             }
         });
         const mattingBtn = controlPanel.querySelector('.matting-button');
         if (mattingBtn && !mattingBtn.classList.contains('loading')) {
             mattingBtn.disabled = selectionCount !== 1;
         }
+        // --- Handle Crop/Transform Switch ---
+        const switchEl = controlPanel.querySelector(`#crop-transform-switch-${node.id}`);
+        if (switchEl) {
+            const input = switchEl.querySelector('input');
+            const knobIcon = switchEl.querySelector('.switch-icon');
+            const isDisabled = !hasSelection;
+            switchEl.classList.toggle('disabled', isDisabled);
+            input.disabled = isDisabled;
+            if (!isDisabled) {
+                const isCropMode = canvas.canvasSelection.selectedLayers[0].cropMode || false;
+                if (input.checked !== isCropMode) {
+                    input.checked = isCropMode;
+                }
+                // Update icon view
+                updateSwitchIcon(knobIcon, isCropMode, LAYERFORGE_TOOLS.CROP, LAYERFORGE_TOOLS.TRANSFORM, "✂️", "✥");
+            }
+        }
     };
     canvas.canvasSelection.onSelectionChange = updateButtonStates;
     const undoButton = controlPanel.querySelector(`#undo-button-${node.id}`);
@@ -799,7 +900,9 @@ async function createCanvasWidget(node, widget, app) {
             height: "100%"
         }
     }, [controlPanel, canvasContainer, layersPanelContainer]);
-    node.addDOMWidget("mainContainer", "widget", mainContainer);
+    if (node.addDOMWidget) {
+        node.addDOMWidget("mainContainer", "widget", mainContainer);
+    }
     const openEditorBtn = controlPanel.querySelector(`#open-editor-btn-${node.id}`);
     let backdrop = null;
     let originalParent = null;
@@ -888,7 +991,11 @@ async function createCanvasWidget(node, widget, app) {
     if (!window.canvasExecutionStates) {
         window.canvasExecutionStates = new Map();
     }
-    node.canvasWidget = canvas;
+    // Store the entire widget object, not just the canvas
+    node.canvasWidget = {
+        canvas: canvas,
+        panel: controlPanel
+    };
     setTimeout(() => {
         canvas.loadInitialState();
         if (canvas.canvasLayersPanel) {
@@ -905,7 +1012,7 @@ async function createCanvasWidget(node, widget, app) {
             if (canvas && canvas.setPreviewVisibility) {
                 canvas.setPreviewVisibility(value);
             }
-            if (node.graph && node.graph.canvas) {
+            if (node.graph && node.graph.canvas && node.setDirtyCanvas) {
                 node.setDirtyCanvas(true, true);
             }
         };
@@ -921,7 +1028,7 @@ async function createCanvasWidget(node, widget, app) {
 }
 const canvasNodeInstances = new Map();
 app.registerExtension({
-    name: "Comfy.CanvasNode",
+    name: "Comfy.LayerForgeNode",
     init() {
         addStylesheet(getUrl('./css/canvas_view.css'));
         const originalQueuePrompt = app.queuePrompt;
@@ -955,7 +1062,7 @@ app.registerExtension({
         };
     },
     async beforeRegisterNodeDef(nodeType, nodeData, app) {
-        if (nodeType.comfyClass === "CanvasNode") {
+        if (nodeType.comfyClass === "LayerForgeNode") {
             const onNodeCreated = nodeType.prototype.onNodeCreated;
             nodeType.prototype.onNodeCreated = function () {
                 log.debug("CanvasNode onNodeCreated: Base widget setup.");
@@ -984,9 +1091,144 @@ app.registerExtension({
                 const canvasWidget = await createCanvasWidget(this, null, app);
                 canvasNodeInstances.set(this.id, canvasWidget);
                 log.info(`Registered CanvasNode instance for ID: ${this.id}`);
+                // Store the canvas widget on the node
+                this.canvasWidget = canvasWidget;
+                // Check if there are already connected inputs
                 setTimeout(() => {
-                    this.setDirtyCanvas(true, true);
-                }, 100);
+                    if (this.inputs && this.inputs.length > 0) {
+                        // Check if input_image (index 0) is connected
+                        if (this.inputs[0] && this.inputs[0].link) {
+                            log.info("Input image already connected on node creation, checking for data...");
+                            if (canvasWidget.canvas && canvasWidget.canvas.canvasIO) {
+                                canvasWidget.canvas.inputDataLoaded = false;
+                                // Only allow images on init; mask should load only on mask connect or execution
+                                canvasWidget.canvas.canvasIO.checkForInputData({ allowImage: true, allowMask: false, reason: "init_image_connected" });
+                            }
+                        }
+                    }
+                    if (this.setDirtyCanvas) {
+                        this.setDirtyCanvas(true, true);
+                    }
+                }, 500);
+            };
+            // Add onConnectionsChange handler to detect when inputs are connected
+            nodeType.prototype.onConnectionsChange = function (type, index, connected, link_info) {
+                log.info(`onConnectionsChange called: type=${type}, index=${index}, connected=${connected}`, link_info);
+                // Check if this is an input connection (type 1 = INPUT)
+                if (type === 1) {
+                    // Get the canvas widget - it might be in different places
+                    const canvasWidget = this.canvasWidget;
+                    const canvas = canvasWidget?.canvas || canvasWidget;
+                    if (!canvas || !canvas.canvasIO) {
+                        log.warn("Canvas not ready in onConnectionsChange, scheduling retry...");
+                        // Retry multiple times with increasing delays
+                        const retryDelays = [500, 1000, 2000];
+                        let retryCount = 0;
+                        const tryAgain = () => {
+                            const retryCanvas = this.canvasWidget?.canvas || this.canvasWidget;
+                            if (retryCanvas && retryCanvas.canvasIO) {
+                                log.info("Canvas now ready, checking for input data...");
+                                if (connected) {
+                                    retryCanvas.inputDataLoaded = false;
+                                    // Respect which input triggered the connection:
+                                    const opts = (index === 1)
+                                        ? { allowImage: false, allowMask: true, reason: "mask_connect" }
+                                        : { allowImage: true, allowMask: false, reason: "image_connect" };
+                                    retryCanvas.canvasIO.checkForInputData(opts);
+                                }
+                            }
+                            else if (retryCount < retryDelays.length) {
+                                log.warn(`Canvas still not ready, retry ${retryCount + 1}/${retryDelays.length}...`);
+                                setTimeout(tryAgain, retryDelays[retryCount++]);
+                            }
+                            else {
+                                log.error("Canvas failed to initialize after multiple retries");
+                            }
+                        };
+                        setTimeout(tryAgain, retryDelays[retryCount++]);
+                        return;
+                    }
+                    // Handle input_image connection (index 0)
+                    if (index === 0) {
+                        if (connected && link_info) {
+                            log.info("Input image connected, marking for data check...");
+                            // Reset the input data loaded flag to allow loading the new connection
+                            canvas.inputDataLoaded = false;
+                            // Also reset the last loaded image source and link ID to allow the new image
+                            canvas.lastLoadedImageSrc = undefined;
+                            canvas.lastLoadedLinkId = undefined;
+                            // Mark that we have a pending input connection
+                            canvas.hasPendingInputConnection = true;
+                            // If mask input is not connected and a mask was auto-applied from input_mask before, clear it now
+                            if (!(this.inputs && this.inputs[1] && this.inputs[1].link)) {
+                                if (canvas.maskAppliedFromInput && canvas.maskTool) {
+                                    canvas.maskTool.clear();
+                                    canvas.render();
+                                    canvas.maskAppliedFromInput = false;
+                                    canvas.lastLoadedMaskLinkId = undefined;
+                                    log.info("Cleared auto-applied mask because input_image connected without input_mask");
+                                }
+                            }
+                            // Check for data immediately when connected
+                            setTimeout(() => {
+                                log.info("Checking for input data after connection...");
+                                // Only load images here; masks should not auto-load on image connect
+                                canvas.canvasIO.checkForInputData({ allowImage: true, allowMask: false, reason: "image_connect" });
+                            }, 500);
+                        }
+                        else {
+                            log.info("Input image disconnected");
+                            canvas.hasPendingInputConnection = false;
+                            // Reset when disconnected so a new connection can load
+                            canvas.inputDataLoaded = false;
+                            canvas.lastLoadedImageSrc = undefined;
+                            canvas.lastLoadedLinkId = undefined;
+                        }
+                    }
+                    // Handle input_mask connection (index 1)
+                    if (index === 1) {
+                        if (connected && link_info) {
+                            log.info("Input mask connected");
+                            // DON'T clear existing mask when connecting a new input
+                            // Reset the loaded mask link ID to allow loading from the new connection
+                            canvas.lastLoadedMaskLinkId = undefined;
+                            // Mark that we have a pending mask connection
+                            canvas.hasPendingMaskConnection = true;
+                            // Check for data immediately when connected
+                            setTimeout(() => {
+                                log.info("Checking for input data after mask connection...");
+                                // Only load mask here if it's immediately available from the connected node
+                                // Don't load stale masks from backend storage
+                                canvas.canvasIO.checkForInputData({ allowImage: false, allowMask: true, reason: "mask_connect" });
+                            }, 500);
+                        }
+                        else {
+                            log.info("Input mask disconnected");
+                            canvas.hasPendingMaskConnection = false;
+                            // If the current mask came from input_mask, clear it to avoid affecting images when mask is not connected
+                            if (canvas.maskAppliedFromInput && canvas.maskTool) {
+                                canvas.maskAppliedFromInput = false;
+                                canvas.lastLoadedMaskLinkId = undefined;
+                                log.info("Cleared auto-applied mask due to mask input disconnection");
+                            }
+                        }
+                    }
+                }
+            };
+            // Add onExecuted handler to check for input data after workflow execution
+            const originalOnExecuted = nodeType.prototype.onExecuted;
+            nodeType.prototype.onExecuted = function (message) {
+                log.info("Node executed, checking for input data...");
+                const canvas = this.canvasWidget?.canvas || this.canvasWidget;
+                if (canvas && canvas.canvasIO) {
+                    // Don't reset inputDataLoaded - just check for new data
+                    // On execution we allow both image and mask to load
+                    canvas.canvasIO.checkForInputData({ allowImage: true, allowMask: true, reason: "execution" });
+                }
+                // Call original if it exists
+                if (originalOnExecuted) {
+                    originalOnExecuted.apply(this, arguments);
+                }
             };
             const onRemoved = nodeType.prototype.onRemoved;
             nodeType.prototype.onRemoved = function () {
@@ -1099,8 +1341,8 @@ app.registerExtension({
                         callback: async () => {
                             try {
                                 log.info("Opening LayerForge canvas in MaskEditor");
-                                if (self.canvasWidget && self.canvasWidget.startMaskEditor) {
-                                    await self.canvasWidget.startMaskEditor(null, true);
+                                if (self.canvasWidget && self.canvasWidget.canvas) {
+                                    await self.canvasWidget.canvas.startMaskEditor(null, true);
                                 }
                                 else {
                                     log.error("Canvas widget not available");
@@ -1117,9 +1359,9 @@ app.registerExtension({
                         content: "Open Image",
                         callback: async () => {
                             try {
-                                if (!self.canvasWidget)
+                                if (!self.canvasWidget || !self.canvasWidget.canvas)
                                     return;
-                                const blob = await self.canvasWidget.getFlattenedCanvasAsBlob();
+                                const blob = await self.canvasWidget.canvas.canvasLayers.getFlattenedCanvasAsBlob();
                                 if (!blob)
                                     return;
                                 const url = URL.createObjectURL(blob);
@@ -1135,9 +1377,9 @@ app.registerExtension({
                         content: "Open Image with Mask Alpha",
                         callback: async () => {
                             try {
-                                if (!self.canvasWidget)
+                                if (!self.canvasWidget || !self.canvasWidget.canvas)
                                     return;
-                                const blob = await self.canvasWidget.getFlattenedCanvasWithMaskAsBlob();
+                                const blob = await self.canvasWidget.canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
                                 if (!blob)
                                     return;
                                 const url = URL.createObjectURL(blob);
@@ -1153,9 +1395,9 @@ app.registerExtension({
                         content: "Copy Image",
                         callback: async () => {
                             try {
-                                if (!self.canvasWidget)
+                                if (!self.canvasWidget || !self.canvasWidget.canvas)
                                     return;
-                                const blob = await self.canvasWidget.getFlattenedCanvasAsBlob();
+                                const blob = await self.canvasWidget.canvas.canvasLayers.getFlattenedCanvasAsBlob();
                                 if (!blob)
                                     return;
                                 const item = new ClipboardItem({ 'image/png': blob });
@@ -1172,9 +1414,9 @@ app.registerExtension({
                         content: "Copy Image with Mask Alpha",
                         callback: async () => {
                             try {
-                                if (!self.canvasWidget)
+                                if (!self.canvasWidget || !self.canvasWidget.canvas)
                                     return;
-                                const blob = await self.canvasWidget.getFlattenedCanvasWithMaskAsBlob();
+                                const blob = await self.canvasWidget.canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
                                 if (!blob)
                                     return;
                                 const item = new ClipboardItem({ 'image/png': blob });
@@ -1191,9 +1433,9 @@ app.registerExtension({
                         content: "Save Image",
                         callback: async () => {
                             try {
-                                if (!self.canvasWidget)
+                                if (!self.canvasWidget || !self.canvasWidget.canvas)
                                     return;
-                                const blob = await self.canvasWidget.getFlattenedCanvasAsBlob();
+                                const blob = await self.canvasWidget.canvas.canvasLayers.getFlattenedCanvasAsBlob();
                                 if (!blob)
                                     return;
                                 const url = URL.createObjectURL(blob);
@@ -1214,9 +1456,9 @@ app.registerExtension({
                         content: "Save Image with Mask Alpha",
                         callback: async () => {
                             try {
-                                if (!self.canvasWidget)
+                                if (!self.canvasWidget || !self.canvasWidget.canvas)
                                     return;
-                                const blob = await self.canvasWidget.getFlattenedCanvasWithMaskAsBlob();
+                                const blob = await self.canvasWidget.canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
                                 if (!blob)
                                     return;
                                 const url = URL.createObjectURL(blob);

js/MaskEditorIntegration.js

@@ -424,7 +424,6 @@ export class MaskEditorIntegration {
             boundsPos: { x: bounds.x, y: bounds.y },
             maskSize: { width: bounds.width, height: bounds.height }
         });
-        // Use the chunk system instead of direct canvas manipulation
         this.maskTool.setMask(maskAsImage);
         // Update node preview using PreviewUtils
         await updateNodePreview(this.canvas, this.node, true);

js/MaskTool.js

@@ -3,11 +3,15 @@ import { createCanvas } from "./utils/CommonUtils.js";
 const log = createModuleLogger('Mask_tool');
 export class MaskTool {
     constructor(canvasInstance, callbacks = {}) {
+        // Track strokes during drawing for efficient overlay updates
+        this.currentStrokePoints = [];
         this.ACTIVE_MASK_UPDATE_DELAY = 16; // ~60fps throttling
         this.SHAPE_PREVIEW_THROTTLE_DELAY = 16; // ~60fps throttling for preview
         this.canvasInstance = canvasInstance;
         this.mainCanvas = canvasInstance.canvas;
         this.onStateChange = callbacks.onStateChange || null;
+        // Initialize stroke tracking for overlay drawing
+        this.currentStrokePoints = [];
         // Initialize chunked mask system
         this.maskChunks = new Map();
         this.chunkSize = 512;
@@ -28,8 +32,9 @@ export class MaskTool {
         this.isOverlayVisible = true;
         this.isActive = false;
         this.brushSize = 20;
-        this.brushStrength = 0.5;
-        this.brushHardness = 0.5;
+        this._brushStrength = 0.5;
+        this._brushHardness = 0.5;
+        this._previewOpacity = 0.5; // Default 50% opacity for preview
         this.isDrawing = false;
         this.lastPosition = null;
         const { canvas: previewCanvas, ctx: previewCtx } = createCanvas(1, 1, '2d', { willReadFrequently: true });
@@ -79,8 +84,27 @@ export class MaskTool {
             this.canvasInstance.canvas.parentElement.appendChild(this.previewCanvas);
         }
     }
+    // Getters for brush properties
+    get brushStrength() {
+        return this._brushStrength;
+    }
+    get brushHardness() {
+        return this._brushHardness;
+    }
+    get previewOpacity() {
+        return this._previewOpacity;
+    }
     setBrushHardness(hardness) {
-        this.brushHardness = Math.max(0, Math.min(1, hardness));
+        this._brushHardness = Math.max(0, Math.min(1, hardness));
+    }
+    setPreviewOpacity(opacity) {
+        this._previewOpacity = Math.max(0, Math.min(1, opacity));
+        // Update the stroke overlay canvas opacity when preview opacity changes
+        if (this.canvasInstance.canvasRenderer && this.canvasInstance.canvasRenderer.strokeOverlayCanvas) {
+            this.canvasInstance.canvasRenderer.strokeOverlayCanvas.style.opacity = String(this._previewOpacity);
+        }
+        // Trigger canvas render to update mask display opacity
+        this.canvasInstance.render();
     }
     initMaskCanvas() {
         // Initialize chunked system
@@ -671,16 +695,17 @@ export class MaskTool {
         this.brushSize = Math.max(1, size);
     }
     setBrushStrength(strength) {
-        this.brushStrength = Math.max(0, Math.min(1, strength));
+        this._brushStrength = Math.max(0, Math.min(1, strength));
     }
     handleMouseDown(worldCoords, viewCoords) {
         if (!this.isActive)
             return;
         this.isDrawing = true;
         this.lastPosition = worldCoords;
-        // Activate chunks around the drawing position for performance
-        this.updateActiveChunksForDrawing(worldCoords);
-        this.draw(worldCoords);
+        // Initialize stroke tracking for live preview
+        this.currentStrokePoints = [worldCoords];
+        // Clear any previous stroke overlay
+        this.canvasInstance.canvasRenderer.clearMaskStrokeOverlay();
         this.clearPreview();
     }
     handleMouseMove(worldCoords, viewCoords) {
@@ -689,14 +714,69 @@ export class MaskTool {
         }
         if (!this.isActive || !this.isDrawing)
             return;
-        // Dynamically update active chunks as user moves while drawing
-        this.updateActiveChunksForDrawing(worldCoords);
-        this.draw(worldCoords);
+        // Add point to stroke tracking
+        this.currentStrokePoints.push(worldCoords);
+        // Draw interpolated segments for smooth strokes without gaps
+        if (this.lastPosition) {
+            // Calculate distance between last and current position
+            const dx = worldCoords.x - this.lastPosition.x;
+            const dy = worldCoords.y - this.lastPosition.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            // If distance is small, just draw a single segment
+            if (distance < this.brushSize / 4) {
+                this.canvasInstance.canvasRenderer.drawMaskStrokeSegment(this.lastPosition, worldCoords);
+            }
+            else {
+                // Interpolate points for smooth drawing without gaps
+                const interpolatedPoints = this.interpolatePoints(this.lastPosition, worldCoords, distance);
+                // Draw all interpolated segments
+                for (let i = 0; i < interpolatedPoints.length - 1; i++) {
+                    this.canvasInstance.canvasRenderer.drawMaskStrokeSegment(interpolatedPoints[i], interpolatedPoints[i + 1]);
+                }
+            }
+        }
         this.lastPosition = worldCoords;
     }
+    /**
+     * Interpolates points between two positions to create smooth strokes without gaps
+     * Based on the BrushTool's approach for eliminating dotted lines during fast drawing
+     */
+    interpolatePoints(start, end, distance) {
+        const points = [];
+        // Calculate number of interpolated points based on brush size
+        // More points = smoother line
+        const stepSize = Math.max(1, this.brushSize / 6); // Adjust divisor for smoothness
+        const numSteps = Math.ceil(distance / stepSize);
+        // Always include start point
+        points.push(start);
+        // Interpolate intermediate points
+        for (let i = 1; i < numSteps; i++) {
+            const t = i / numSteps;
+            points.push({
+                x: start.x + (end.x - start.x) * t,
+                y: start.y + (end.y - start.y) * t
+            });
+        }
+        // Always include end point
+        points.push(end);
+        return points;
+    }
+    /**
+     * Called when viewport changes during drawing to update stroke overlay
+     * This ensures the stroke preview scales correctly with zoom changes
+     */
+    handleViewportChange() {
+        if (this.isDrawing && this.currentStrokePoints.length > 1) {
+            // Redraw the entire stroke overlay with new viewport settings
+            this.canvasInstance.canvasRenderer.redrawMaskStrokeOverlay(this.currentStrokePoints);
+        }
+    }
     handleMouseLeave() {
         this.previewVisible = false;
         this.clearPreview();
+        // Clear overlay canvases when mouse leaves
+        this.canvasInstance.canvasRenderer.clearOverlay();
+        this.canvasInstance.canvasRenderer.clearMaskStrokeOverlay();
     }
     handleMouseEnter() {
         this.previewVisible = true;
@@ -706,10 +786,15 @@ export class MaskTool {
             return;
         if (this.isDrawing) {
             this.isDrawing = false;
+            // Commit the stroke from overlay to actual mask chunks
+            this.commitStrokeToChunks();
+            // Clear stroke overlay and reset state
+            this.canvasInstance.canvasRenderer.clearMaskStrokeOverlay();
+            this.currentStrokePoints = [];
             this.lastPosition = null;
             this.currentDrawingChunk = null;
             // After drawing is complete, update active canvas to show all chunks
-            this.updateActiveMaskCanvas(true); // forceShowAll = true
+            this.updateActiveMaskCanvas(true); // Force full update
             this.completeMaskOperation();
             this.drawBrushPreview(viewCoords);
         }
@@ -724,6 +809,38 @@ export class MaskTool {
         // This prevents unnecessary recomposition during drawing
         this.updateActiveCanvasIfNeeded(this.lastPosition, worldCoords);
     }
+    /**
+     * Commits the current stroke from overlay to actual mask chunks
+     * This replays the entire stroke path with interpolation to ensure pixel-perfect accuracy
+     */
+    commitStrokeToChunks() {
+        if (this.currentStrokePoints.length < 2) {
+            return; // Need at least 2 points for a stroke
+        }
+        log.debug(`Committing stroke with ${this.currentStrokePoints.length} points to chunks`);
+        // Replay the entire stroke path with interpolation for smooth, accurate lines
+        for (let i = 1; i < this.currentStrokePoints.length; i++) {
+            const startPoint = this.currentStrokePoints[i - 1];
+            const endPoint = this.currentStrokePoints[i];
+            // Calculate distance between points
+            const dx = endPoint.x - startPoint.x;
+            const dy = endPoint.y - startPoint.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < this.brushSize / 4) {
+                // Small distance - draw single segment
+                this.drawOnChunks(startPoint, endPoint);
+            }
+            else {
+                // Large distance - interpolate for smooth line without gaps
+                const interpolatedPoints = this.interpolatePoints(startPoint, endPoint, distance);
+                // Draw all interpolated segments
+                for (let j = 0; j < interpolatedPoints.length - 1; j++) {
+                    this.drawOnChunks(interpolatedPoints[j], interpolatedPoints[j + 1]);
+                }
+            }
+        }
+        log.debug("Stroke committed to chunks successfully with interpolation");
+    }
     /**
      * Draws a line between two world coordinates on the appropriate chunks
      */
@@ -767,13 +884,13 @@ export class MaskTool {
         chunk.ctx.moveTo(startLocal.x, startLocal.y);
         chunk.ctx.lineTo(endLocal.x, endLocal.y);
         const gradientRadius = this.brushSize / 2;
-        if (this.brushHardness === 1) {
-            chunk.ctx.strokeStyle = `rgba(255, 255, 255, ${this.brushStrength})`;
+        if (this._brushHardness === 1) {
+            chunk.ctx.strokeStyle = `rgba(255, 255, 255, ${this._brushStrength})`;
         }
         else {
-            const innerRadius = gradientRadius * this.brushHardness;
+            const innerRadius = gradientRadius * this._brushHardness;
             const gradient = chunk.ctx.createRadialGradient(endLocal.x, endLocal.y, innerRadius, endLocal.x, endLocal.y, gradientRadius);
-            gradient.addColorStop(0, `rgba(255, 255, 255, ${this.brushStrength})`);
+            gradient.addColorStop(0, `rgba(255, 255, 255, ${this._brushStrength})`);
             gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
             chunk.ctx.strokeStyle = gradient;
         }
@@ -805,28 +922,17 @@ export class MaskTool {
         return true; // For now, always draw - more precise intersection can be added later
     }
     /**
-     * Updates active canvas when drawing affects chunks with throttling to prevent lag
-     * During drawing, only updates the affected active chunks for performance
+     * Updates active canvas when drawing affects chunks
+     * Since we now use overlay during drawing, this is only called after drawing is complete
      */
     updateActiveCanvasIfNeeded(startWorld, endWorld) {
-        // Calculate which chunks were affected by this drawing operation
-        const minX = Math.min(startWorld.x, endWorld.x) - this.brushSize;
-        const maxX = Math.max(startWorld.x, endWorld.x) + this.brushSize;
-        const minY = Math.min(startWorld.y, endWorld.y) - this.brushSize;
-        const maxY = Math.max(startWorld.y, endWorld.y) + this.brushSize;
-        const affectedChunkMinX = Math.floor(minX / this.chunkSize);
-        const affectedChunkMinY = Math.floor(minY / this.chunkSize);
-        const affectedChunkMaxX = Math.floor(maxX / this.chunkSize);
-        const affectedChunkMaxY = Math.floor(maxY / this.chunkSize);
-        // During drawing, only update affected chunks that are active for performance
-        if (this.isDrawing) {
-            // Use throttled partial update for active chunks only
-            this.scheduleThrottledActiveMaskUpdate(affectedChunkMinX, affectedChunkMinY, affectedChunkMaxX, affectedChunkMaxY);
-        }
-        else {
+        // This method is now simplified - we only update after drawing is complete
+        // The overlay handles all live preview, so we don't need complex chunk activation
+        if (!this.isDrawing) {
             // Not drawing - do full update to show all chunks
             this.updateActiveMaskCanvas(true);
         }
+        // During drawing, we don't update chunks at all - overlay handles preview
     }
     /**
      * Schedules a throttled update of the active mask canvas to prevent excessive redraws
@@ -903,18 +1009,12 @@ export class MaskTool {
     }
     drawBrushPreview(viewCoords) {
         if (!this.previewVisible || this.isDrawing) {
-            this.clearPreview();
+            this.canvasInstance.canvasRenderer.clearOverlay();
             return;
         }
-        this.clearPreview();
-        const zoom = this.canvasInstance.viewport.zoom;
-        const radius = (this.brushSize / 2) * zoom;
-        this.previewCtx.beginPath();
-        this.previewCtx.arc(viewCoords.x, viewCoords.y, radius, 0, 2 * Math.PI);
-        this.previewCtx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
-        this.previewCtx.lineWidth = 1;
-        this.previewCtx.setLineDash([2, 4]);
-        this.previewCtx.stroke();
+        // Use overlay canvas instead of preview canvas for brush cursor
+        const worldCoords = this.canvasInstance.lastMousePosition;
+        this.canvasInstance.canvasRenderer.drawMaskBrushCursor(worldCoords);
     }
     clearPreview() {
         this.previewCtx.clearRect(0, 0, this.previewCanvas.width, this.previewCanvas.height);
@@ -1252,6 +1352,23 @@ export class MaskTool {
         this.canvasInstance.render();
         log.info("Cleared all mask data from all chunks");
     }
+    /**
+     * Clears all chunks and restores mask from saved state
+     * This is used during undo/redo operations to ensure clean state restoration
+     */
+    restoreMaskFromSavedState(savedMaskCanvas) {
+        // First, clear ALL chunks to ensure no leftover data
+        this.clearAllMaskChunks();
+        // Now apply the saved mask state to chunks
+        if (savedMaskCanvas.width > 0 && savedMaskCanvas.height > 0) {
+            // Apply the saved mask to the chunk system at the correct position
+            const bounds = this.canvasInstance.outputAreaBounds;
+            this.applyMaskCanvasToChunks(savedMaskCanvas, this.x, this.y);
+        }
+        // Update the active mask canvas to show the restored state
+        this.updateActiveMaskCanvas(true);
+        log.debug("Restored mask from saved state with clean chunk system");
+    }
     getMask() {
         // Return the current active mask canvas which shows all chunks
         // Only update if there are pending changes to avoid unnecessary redraws
@@ -1345,13 +1462,44 @@ export class MaskTool {
         this.isOverlayVisible = !this.isOverlayVisible;
         log.info(`Mask overlay visibility toggled to: ${this.isOverlayVisible}`);
     }
-    setMask(image) {
-        // Clear existing mask chunks in the output area first
+    setMask(image, isFromInputMask = false) {
         const bounds = this.canvasInstance.outputAreaBounds;
-        this.clearMaskInArea(bounds.x, bounds.y, image.width, image.height);
-        // Add the new mask using the chunk system
-        this.addMask(image);
-        log.info(`MaskTool set new mask using chunk system at bounds (${bounds.x}, ${bounds.y})`);
+        if (isFromInputMask) {
+            // For INPUT MASK - process black background to transparent using luminance
+            // Center like input images
+            const centerX = bounds.x + (bounds.width - image.width) / 2;
+            const centerY = bounds.y + (bounds.height - image.height) / 2;
+            // Prepare mask where alpha = luminance (white = applied, black = transparent)
+            const { canvas: maskCanvas, ctx } = createCanvas(image.width, image.height, '2d', { willReadFrequently: true });
+            if (!ctx)
+                throw new Error("Could not create mask processing context");
+            ctx.drawImage(image, 0, 0);
+            const imgData = ctx.getImageData(0, 0, image.width, image.height);
+            const data = imgData.data;
+            for (let i = 0; i < data.length; i += 4) {
+                const r = data[i], g = data[i + 1], b = data[i + 2];
+                const lum = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+                data[i] = 255; // force white color (color channels ignored downstream)
+                data[i + 1] = 255;
+                data[i + 2] = 255;
+                data[i + 3] = lum; // alpha encodes mask strength: white -> strong, black -> 0
+            }
+            ctx.putImageData(imgData, 0, 0);
+            // Clear target area and apply to chunked system at centered position
+            this.clearMaskInArea(centerX, centerY, image.width, image.height);
+            this.applyMaskCanvasToChunks(maskCanvas, centerX, centerY);
+            // Refresh state and UI
+            this.updateActiveMaskCanvas(true);
+            this.canvasInstance.canvasState.saveMaskState();
+            this.canvasInstance.render();
+            log.info(`MaskTool set INPUT MASK at centered position (${centerX}, ${centerY}) using luminance as alpha`);
+        }
+        else {
+            // For SAM Detector and other sources - just clear and add without processing
+            this.clearMaskInArea(bounds.x, bounds.y, bounds.width, bounds.height);
+            this.addMask(image);
+            log.info(`MaskTool set mask using chunk system at bounds (${bounds.x}, ${bounds.y})`);
+        }
     }
     /**
      * Clears mask data in a specific area by clearing affected chunks

js/SAMDetectorIntegration.js

@@ -6,6 +6,7 @@ import { uploadCanvasAsImage, uploadImageBlob } from "./utils/ImageUploadUtils.j
 import { processImageToMask } from "./utils/MaskProcessingUtils.js";
 import { convertToImage } from "./utils/ImageUtils.js";
 import { updateNodePreview } from "./utils/PreviewUtils.js";
+import { validateAndFixClipspace } from "./utils/ClipspaceUtils.js";
 const log = createModuleLogger('SAMDetectorIntegration');
 /**
  * SAM Detector Integration for LayerForge
@@ -241,35 +242,61 @@ async function handleSAMDetectorResult(node, resultImage) {
                 // Try to reload the image with a fresh request
                 log.debug("Attempting to reload SAM result image");
                 const originalSrc = resultImage.src;
-                // Add cache-busting parameter to force fresh load
-                const url = new URL(originalSrc);
-                url.searchParams.set('_t', Date.now().toString());
-                await new Promise((resolve, reject) => {
-                    const img = new Image();
-                    img.crossOrigin = "anonymous";
-                    img.onload = () => {
-                        // Copy the loaded image data to the original image
-                        resultImage.src = img.src;
-                        resultImage.width = img.width;
-                        resultImage.height = img.height;
-                        log.debug("SAM result image reloaded successfully", {
-                            width: img.width,
-                            height: img.height,
-                            originalSrc: originalSrc,
-                            newSrc: img.src
+                // Check if it's a data URL (base64) - don't add parameters to data URLs
+                if (originalSrc.startsWith('data:')) {
+                    log.debug("Image is a data URL, skipping reload with parameters");
+                    // For data URLs, just ensure the image is loaded
+                    if (!resultImage.complete || resultImage.naturalWidth === 0) {
+                        await new Promise((resolve, reject) => {
+                            const img = new Image();
+                            img.onload = () => {
+                                resultImage.width = img.width;
+                                resultImage.height = img.height;
+                                log.debug("Data URL image loaded successfully", {
+                                    width: img.width,
+                                    height: img.height
+                                });
+                                resolve(img);
+                            };
+                            img.onerror = (error) => {
+                                log.error("Failed to load data URL image", error);
+                                reject(error);
+                            };
+                            img.src = originalSrc; // Use original src without modifications
                         });
-                        resolve(img);
-                    };
-                    img.onerror = (error) => {
-                        log.error("Failed to reload SAM result image", {
-                            originalSrc: originalSrc,
-                            newSrc: url.toString(),
-                            error: error
-                        });
-                        reject(error);
-                    };
-                    img.src = url.toString();
-                });
+                    }
+                }
+                else {
+                    // For regular URLs, add cache-busting parameter
+                    const url = new URL(originalSrc);
+                    url.searchParams.set('_t', Date.now().toString());
+                    await new Promise((resolve, reject) => {
+                        const img = new Image();
+                        img.crossOrigin = "anonymous";
+                        img.onload = () => {
+                            // Copy the loaded image data to the original image
+                            resultImage.src = img.src;
+                            resultImage.width = img.width;
+                            resultImage.height = img.height;
+                            log.debug("SAM result image reloaded successfully", {
+                                width: img.width,
+                                height: img.height,
+                                originalSrc: originalSrc,
+                                newSrc: img.src
+                            });
+                            resolve(img);
+                        };
+                        img.onerror = (error) => {
+                            log.error("Failed to reload SAM result image", {
+                                originalSrc: originalSrc,
+                                newSrc: url.toString(),
+                                error: error
+                            });
+                            reject(error);
+                        };
+                        img.src = url.toString();
+                    });
+                }
             }
         }
         catch (error) {
@@ -289,27 +316,37 @@ async function handleSAMDetectorResult(node, resultImage) {
         // Apply mask to LayerForge canvas using MaskTool.setMask method
         log.debug("Checking canvas and maskTool availability", {
             hasCanvas: !!canvas,
+            hasCanvasProperty: !!canvas.canvas,
+            canvasCanvasKeys: canvas.canvas ? Object.keys(canvas.canvas) : [],
             hasMaskTool: !!canvas.maskTool,
+            hasCanvasMaskTool: !!(canvas.canvas && canvas.canvas.maskTool),
             maskToolType: typeof canvas.maskTool,
+            canvasMaskToolType: canvas.canvas ? typeof canvas.canvas.maskTool : 'undefined',
             canvasKeys: Object.keys(canvas)
         });
-        if (!canvas.maskTool) {
+        // Get the actual Canvas object and its maskTool
+        const actualCanvas = canvas.canvas || canvas;
+        const maskTool = actualCanvas.maskTool;
+        if (!maskTool) {
             log.error("MaskTool is not available. Canvas state:", {
                 hasCanvas: !!canvas,
+                hasActualCanvas: !!actualCanvas,
                 canvasConstructor: canvas.constructor.name,
+                actualCanvasConstructor: actualCanvas ? actualCanvas.constructor.name : 'undefined',
                 canvasKeys: Object.keys(canvas),
-                maskToolValue: canvas.maskTool
+                actualCanvasKeys: actualCanvas ? Object.keys(actualCanvas) : [],
+                maskToolValue: maskTool
             });
             throw new Error("Mask tool not available or not initialized");
         }
-        log.debug("Applying SAM mask to canvas using addMask method");
-        // Use the addMask method which overlays on existing mask without clearing it
-        canvas.maskTool.addMask(maskAsImage);
+        log.debug("Applying SAM mask to canvas using setMask method");
+        // Use the setMask method which clears existing mask and sets new one
+        maskTool.setMask(maskAsImage);
         // Update canvas and save state (same as MaskEditorIntegration)
-        canvas.render();
-        canvas.saveState();
+        actualCanvas.render();
+        actualCanvas.saveState();
         // Update node preview using PreviewUtils
-        await updateNodePreview(canvas, node, true);
+        await updateNodePreview(actualCanvas, node, true);
         log.info("SAM Detector mask applied successfully to LayerForge canvas");
         // Show success notification
         showSuccessNotification("SAM Detector mask applied to LayerForge!");
@@ -324,6 +361,8 @@ async function handleSAMDetectorResult(node, resultImage) {
         node.samOriginalImgSrc = null;
     }
 }
+// Store original onClipspaceEditorSave function to restore later
+let originalOnClipspaceEditorSave = null;
 // Function to setup SAM Detector hook in menu options
 export function setupSAMDetectorHook(node, options) {
     // Hook into "Open in SAM Detector" with delay since Impact Pack adds it asynchronously
@@ -337,18 +376,56 @@ export function setupSAMDetectorHook(node, options) {
                 try {
                     log.info("Intercepted 'Open in SAM Detector' - automatically sending to clipspace and starting monitoring");
                     // Automatically send canvas to clipspace and start monitoring
-                    if (node.canvasWidget && node.canvasWidget.canvas) {
-                        const canvas = node.canvasWidget; // canvasWidget IS the Canvas object
-                        // Use ImageUploadUtils to upload canvas
+                    if (node.canvasWidget) {
+                        const canvasWidget = node.canvasWidget;
+                        const canvas = canvasWidget.canvas || canvasWidget; // Get actual Canvas object
+                        // Use ImageUploadUtils to upload canvas and get server URL (Impact Pack compatibility)
                         const uploadResult = await uploadCanvasAsImage(canvas, {
                             filenamePrefix: 'layerforge-sam',
                             nodeId: node.id
                         });
+                        log.debug("Uploaded canvas for SAM Detector", {
+                            filename: uploadResult.filename,
+                            imageUrl: uploadResult.imageUrl,
+                            width: uploadResult.imageElement.width,
+                            height: uploadResult.imageElement.height
+                        });
                         // Set the image to the node for clipspace
                         node.imgs = [uploadResult.imageElement];
                         node.clipspaceImg = uploadResult.imageElement;
+                        // Ensure proper clipspace structure for updated ComfyUI
+                        if (!ComfyApp.clipspace) {
+                            ComfyApp.clipspace = {};
+                        }
+                        // Set up clipspace with proper indices
+                        ComfyApp.clipspace.imgs = [uploadResult.imageElement];
+                        ComfyApp.clipspace.selectedIndex = 0;
+                        ComfyApp.clipspace.combinedIndex = 0;
+                        ComfyApp.clipspace.img_paste_mode = 'selected';
                         // Copy to ComfyUI clipspace
                         ComfyApp.copyToClipspace(node);
+                        // Override onClipspaceEditorSave to fix clipspace structure before pasteFromClipspace
+                        if (!originalOnClipspaceEditorSave) {
+                            originalOnClipspaceEditorSave = ComfyApp.onClipspaceEditorSave;
+                            ComfyApp.onClipspaceEditorSave = function () {
+                                log.debug("SAM Detector onClipspaceEditorSave called, using unified clipspace validation");
+                                // Use the unified clipspace validation function
+                                const isValid = validateAndFixClipspace();
+                                if (!isValid) {
+                                    log.error("Clipspace validation failed, cannot proceed with paste");
+                                    return;
+                                }
+                                // Call the original function
+                                if (originalOnClipspaceEditorSave) {
+                                    originalOnClipspaceEditorSave.call(ComfyApp);
+                                }
+                                // Restore the original function after use
+                                if (originalOnClipspaceEditorSave) {
+                                    ComfyApp.onClipspaceEditorSave = originalOnClipspaceEditorSave;
+                                    originalOnClipspaceEditorSave = null;
+                                }
+                            };
+                        }
                         // Start monitoring for SAM Detector results
                         startSAMDetectorMonitoring(node);
                         log.info("Canvas automatically sent to clipspace and monitoring started");

js/css/blend_mode_menu.css

@@ -0,0 +1,170 @@
+/* Blend Mode Menu Styles */
+#blend-mode-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #2a2a2a;
+    border: 1px solid #3a3a3a;
+    border-radius: 4px;
+    z-index: 10000;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+    min-width: 200px;
+}
+
+#blend-mode-menu .blend-menu-title-bar {
+    background: #3a3a3a;
+    color: white;
+    padding: 8px 10px;
+    cursor: move;
+    user-select: none;
+    border-radius: 3px 3px 0 0;
+    font-size: 12px;
+    font-weight: bold;
+    border-bottom: 1px solid #4a4a4a;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#blend-mode-menu .blend-menu-title-text {
+    flex: 1;
+    cursor: move;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#blend-mode-menu .blend-menu-close-button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    transition: background-color 0.2s;
+}
+
+#blend-mode-menu .blend-menu-close-button:hover {
+    background-color: #4a4a4a;
+}
+
+#blend-mode-menu .blend-menu-close-button:focus {
+    background-color: transparent;
+}
+
+#blend-mode-menu .blend-menu-content {
+    padding: 5px;
+}
+
+#blend-mode-menu .blend-area-container {
+    padding: 5px 10px;
+    border-bottom: 1px solid #4a4a4a;
+}
+
+#blend-mode-menu .blend-area-label {
+    color: white;
+    display: block;
+    margin-bottom: 5px;
+    font-size: 12px;
+}
+
+#blend-mode-menu .blend-area-slider {
+    width: 100%;
+    margin: 5px 0;
+    -webkit-appearance: none;
+    height: 4px;
+    background: #555;
+    border-radius: 2px;
+    outline: none;
+}
+
+#blend-mode-menu .blend-area-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+    transition: background 0.2s;
+}
+
+#blend-mode-menu .blend-area-slider::-webkit-slider-thumb:hover {
+    background: #fff;
+}
+
+#blend-mode-menu .blend-area-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+}
+
+#blend-mode-menu .blend-mode-container {
+    margin-bottom: 5px;
+}
+
+#blend-mode-menu .blend-mode-option {
+    padding: 5px 10px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+#blend-mode-menu .blend-mode-option:hover {
+    background-color: #3a3a3a;
+}
+
+#blend-mode-menu .blend-mode-option.active {
+    background-color: #3a3a3a;
+}
+
+#blend-mode-menu .blend-opacity-slider {
+    width: 100%;
+    margin: 5px 0;
+    display: none;
+    -webkit-appearance: none;
+    height: 4px;
+    background: #555;
+    border-radius: 2px;
+    outline: none;
+}
+
+#blend-mode-menu .blend-mode-container.active .blend-opacity-slider {
+    display: block;
+}
+
+#blend-mode-menu .blend-opacity-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+    transition: background 0.2s;
+}
+
+#blend-mode-menu .blend-opacity-slider::-webkit-slider-thumb:hover {
+    background: #fff;
+}
+
+#blend-mode-menu .blend-opacity-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+}

js/css/canvas_view.css

@@ -7,7 +7,7 @@
     font-size: 12px;
     font-weight: 550;
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
+    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
     min-width: 80px;
     text-align: center;
     margin: 2px;
@@ -51,6 +51,32 @@
     border-color: #3a76d6;
 }
 
+/* Crop mode button styling */
+.painter-button#crop-mode-btn {
+    background-color: #444;
+    border-color: #555;
+    color: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.painter-button#crop-mode-btn.primary {
+    background-color: #0080ff;
+    border-color: #0070e0;
+    color: #fff;
+    box-shadow: 0 0 8px rgba(0, 128, 255, 0.3);
+}
+
+.painter-button#crop-mode-btn.primary:hover {
+    background-color: #1090ff;
+    border-color: #0080ff;
+    box-shadow: 0 0 12px rgba(0, 128, 255, 0.4);
+}
+
+.painter-button#crop-mode-btn:hover {
+    background-color: #555;
+    border-color: #666;
+}
+
 .painter-button.success {
     border-color: #4ae27a;
     background-color: #444;
@@ -187,7 +213,7 @@
     border-radius: 5px;
     border: 1px solid #555;
     cursor: pointer;
-    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
+    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
     user-select: none;
     padding: 0;
     font-family: inherit;
@@ -306,6 +332,25 @@
     opacity: 0;
 }
 
+/* Disabled state for switch */
+.clipboard-switch.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background: #3a3a3a !important; /* Override gradient */
+    border-color: #4a4a4a !important;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+.clipboard-switch.disabled .switch-knob {
+    background-color: #4a4a4a !important;
+}
+
+.clipboard-switch.disabled .switch-labels {
+    color: #777 !important;
+}
+
+
 
 .painter-separator {
     width: 1px;
@@ -593,7 +638,7 @@
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.8);
-    z-index: 111;
+    z-index: 999999;
     display: flex;
     align-items: center;
     justify-content: center;

js/css/layers_panel.css

@@ -0,0 +1,309 @@
+/* Layers Panel Styles */
+.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;
+}
+
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 0;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    position: relative;
+}
+
+.checkbox-container:hover {
+    background-color: #4a4a4a;
+}
+
+.checkbox-container input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.checkbox-container .custom-checkbox {
+    height: 16px;
+    width: 16px;
+    background-color: #2a2a2a;
+    border: 1px solid #666;
+    border-radius: 3px;
+    transition: all 0.2s;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.checkbox-container input:checked ~ .custom-checkbox {
+    background-color: #3a76d6;
+    border-color: #3a76d6;
+}
+
+.checkbox-container .custom-checkbox::after {
+    content: "";
+    position: absolute;
+    display: none;
+    left: 5px;
+    top: 1px;
+    width: 4px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.checkbox-container input:checked ~ .custom-checkbox::after {
+    display: block;
+}
+
+.checkbox-container input:indeterminate ~ .custom-checkbox {
+    background-color: #3a76d6;
+    border-color: #3a76d6;
+}
+
+.checkbox-container input:indeterminate ~ .custom-checkbox::after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: 3px;
+    width: 8px;
+    height: 2px;
+    background-color: white;
+    border: none;
+    transform: none;
+    box-shadow: none;
+}
+
+.checkbox-container:hover {
+    background-color: #4a4a4a;
+}
+
+.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-btn:disabled {
+    background: #2a2a2a;
+    color: #666666;
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.layers-btn:disabled:hover {
+    background: #2a2a2a;
+}
+
+.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;
+}
+
+.layer-visibility-toggle {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 2px;
+    font-size: 14px;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease;
+}
+
+.layer-visibility-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Icon container styles */
+.layers-panel .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.layers-panel .icon-container img {
+    filter: brightness(0) invert(1);
+}
+
+.layers-panel .icon-container.visibility-hidden {
+    opacity: 0.5;
+}
+
+.layers-panel .icon-container.visibility-hidden img {
+    filter: brightness(0) invert(1);
+    opacity: 0.3;
+}
+
+.layers-panel .icon-container.fallback-text {
+    font-size: 10px;
+    color: #888888;
+}

js/utils/ClipboardManager.js

@@ -1,10 +1,9 @@
 import { createModuleLogger } from "./LoggerUtils.js";
-import { showNotification, showInfoNotification } from "./NotificationUtils.js";
+import { showNotification, showInfoNotification, showErrorNotification, showWarningNotification } from "./NotificationUtils.js";
 import { withErrorHandling, createValidationError, createNetworkError, createFileError } from "../ErrorHandler.js";
+import { safeClipspacePaste } from "./ClipspaceUtils.js";
 // @ts-ignore
 import { api } from "../../../scripts/api.js";
-// @ts-ignore
-import { ComfyApp } from "../../../scripts/app.js";
 const log = createModuleLogger('ClipboardManager');
 export class ClipboardManager {
     constructor(canvas) {
@@ -19,6 +18,7 @@ export class ClipboardManager {
             if (this.canvas.canvasLayers.internalClipboard.length > 0) {
                 log.info("Found layers in internal clipboard, pasting layers");
                 this.canvas.canvasLayers.pasteLayers();
+                showInfoNotification("Layers pasted from internal clipboard");
                 return true;
             }
             if (preference === 'clipspace') {
@@ -28,9 +28,20 @@ export class ClipboardManager {
                     return true;
                 }
                 log.info("No image found in ComfyUI Clipspace");
+                // Don't show error here, will try system clipboard next
             }
             log.info("Attempting paste from system clipboard");
-            return await this.trySystemClipboardPaste(addMode);
+            const systemSuccess = await this.trySystemClipboardPaste(addMode);
+            if (!systemSuccess) {
+                // No valid image found in any clipboard
+                if (preference === 'clipspace') {
+                    showWarningNotification("No valid image found in Clipspace or system clipboard");
+                }
+                else {
+                    showWarningNotification("No valid image found in clipboard");
+                }
+            }
+            return systemSuccess;
         }, 'ClipboardManager.handlePaste');
         /**
          * Attempts to paste from ComfyUI Clipspace
@@ -39,7 +50,12 @@ export class ClipboardManager {
          */
         this.tryClipspacePaste = withErrorHandling(async (addMode) => {
             log.info("Attempting to paste from ComfyUI Clipspace");
-            ComfyApp.pasteFromClipspace(this.canvas.node);
+            // Use the unified clipspace validation and paste function
+            const pasteSuccess = safeClipspacePaste(this.canvas.node);
+            if (!pasteSuccess) {
+                log.debug("Safe clipspace paste failed");
+                return false;
+            }
             if (this.canvas.node.imgs && this.canvas.node.imgs.length > 0) {
                 const clipspaceImage = this.canvas.node.imgs[0];
                 if (clipspaceImage && clipspaceImage.src) {
@@ -47,6 +63,7 @@ export class ClipboardManager {
                     const img = new Image();
                     img.onload = async () => {
                         await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                        showInfoNotification("Image pasted from Clipspace");
                     };
                     img.src = clipspaceImage.src;
                     return true;
@@ -92,6 +109,7 @@ export class ClipboardManager {
                 img.onload = async () => {
                     log.info("Successfully loaded image from backend response");
                     await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                    showInfoNotification("Image loaded from file path");
                     resolve(true);
                 };
                 img.onerror = () => {
@@ -127,6 +145,7 @@ export class ClipboardManager {
                                 img.onload = async () => {
                                     log.info("Successfully loaded image from system clipboard");
                                     await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                                    showInfoNotification("Image pasted from system clipboard");
                                 };
                                 if (event.target?.result) {
                                     img.src = event.target.result;
@@ -169,11 +188,22 @@ export class ClipboardManager {
             try {
                 const text = await navigator.clipboard.readText();
                 log.debug("Found text in clipboard:", text);
-                if (text && this.isValidImagePath(text)) {
-                    log.info("Found valid image path in clipboard:", text);
-                    const success = await this.loadImageFromPath(text, addMode);
-                    if (success) {
-                        return true;
+                if (text) {
+                    // Check if it's a data URI (base64 encoded image)
+                    if (this.isDataURI(text)) {
+                        log.info("Found data URI in clipboard");
+                        const success = await this.loadImageFromDataURI(text, addMode);
+                        if (success) {
+                            return true;
+                        }
+                    }
+                    // Check if it's a regular file path or URL
+                    else if (this.isValidImagePath(text)) {
+                        log.info("Found valid image path in clipboard:", text);
+                        const success = await this.loadImageFromPath(text, addMode);
+                        if (success) {
+                            return true;
+                        }
                     }
                 }
             }
@@ -184,6 +214,48 @@ export class ClipboardManager {
         log.debug("No images or valid image paths found in system clipboard");
         return false;
     }
+    /**
+     * Checks if a text string is a data URI (base64 encoded image)
+     * @param {string} text - The text to check
+     * @returns {boolean} - True if the text is a data URI
+     */
+    isDataURI(text) {
+        if (!text || typeof text !== 'string') {
+            return false;
+        }
+        // Check if it starts with data:image
+        return text.trim().startsWith('data:image/');
+    }
+    /**
+     * Loads an image from a data URI (base64 encoded image)
+     * @param {string} dataURI - The data URI to load
+     * @param {AddMode} addMode - The mode for adding the layer
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async loadImageFromDataURI(dataURI, addMode) {
+        return new Promise((resolve) => {
+            try {
+                const img = new Image();
+                img.onload = async () => {
+                    log.info("Successfully loaded image from data URI");
+                    await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                    showInfoNotification("Image pasted from clipboard (base64)");
+                    resolve(true);
+                };
+                img.onerror = () => {
+                    log.warn("Failed to load image from data URI");
+                    showErrorNotification("Failed to load base64 image from clipboard", 5000, true);
+                    resolve(false);
+                };
+                img.src = dataURI;
+            }
+            catch (error) {
+                log.error("Error loading data URI:", error);
+                showErrorNotification("Error processing base64 image from clipboard", 5000, true);
+                resolve(false);
+            }
+        });
+    }
     /**
      * Validates if a text string is a valid image file path or URL
      * @param {string} text - The text to validate
@@ -248,10 +320,12 @@ export class ClipboardManager {
                     img.onload = async () => {
                         log.info("Successfully loaded image from URL");
                         await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                        showInfoNotification("Image loaded from URL");
                         resolve(true);
                     };
                     img.onerror = () => {
                         log.warn("Failed to load image from URL:", filePath);
+                        showErrorNotification(`Failed to load image from URL\nThe link might be incorrect or may not point to an image file.: ${filePath}`, 5000, true);
                         resolve(false);
                     };
                     img.src = filePath;
@@ -309,6 +383,7 @@ export class ClipboardManager {
                             img.onload = async () => {
                                 log.info("Successfully loaded image from file picker");
                                 await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                                showInfoNotification("Image loaded from selected file");
                                 resolve(true);
                             };
                             img.onerror = () => {

js/utils/ClipspaceUtils.js

@@ -0,0 +1,99 @@
+import { createModuleLogger } from "./LoggerUtils.js";
+// @ts-ignore
+import { ComfyApp } from "../../../scripts/app.js";
+const log = createModuleLogger('ClipspaceUtils');
+/**
+ * Validates and fixes ComfyUI clipspace structure to prevent 'Cannot read properties of undefined' errors
+ * @returns {boolean} - True if clipspace is valid and ready to use, false otherwise
+ */
+export function validateAndFixClipspace() {
+    log.debug("Validating and fixing clipspace structure");
+    // Check if clipspace exists
+    if (!ComfyApp.clipspace) {
+        log.debug("ComfyUI clipspace is not available");
+        return false;
+    }
+    // Validate clipspace structure
+    if (!ComfyApp.clipspace.imgs || ComfyApp.clipspace.imgs.length === 0) {
+        log.debug("ComfyUI clipspace has no images");
+        return false;
+    }
+    log.debug("Current clipspace state:", {
+        hasImgs: !!ComfyApp.clipspace.imgs,
+        imgsLength: ComfyApp.clipspace.imgs?.length,
+        selectedIndex: ComfyApp.clipspace.selectedIndex,
+        combinedIndex: ComfyApp.clipspace.combinedIndex,
+        img_paste_mode: ComfyApp.clipspace.img_paste_mode
+    });
+    // Ensure required indices are set
+    if (ComfyApp.clipspace.selectedIndex === undefined || ComfyApp.clipspace.selectedIndex === null) {
+        ComfyApp.clipspace.selectedIndex = 0;
+        log.debug("Fixed clipspace selectedIndex to 0");
+    }
+    if (ComfyApp.clipspace.combinedIndex === undefined || ComfyApp.clipspace.combinedIndex === null) {
+        ComfyApp.clipspace.combinedIndex = 0;
+        log.debug("Fixed clipspace combinedIndex to 0");
+    }
+    if (!ComfyApp.clipspace.img_paste_mode) {
+        ComfyApp.clipspace.img_paste_mode = 'selected';
+        log.debug("Fixed clipspace img_paste_mode to 'selected'");
+    }
+    // Ensure indices are within bounds
+    const maxIndex = ComfyApp.clipspace.imgs.length - 1;
+    if (ComfyApp.clipspace.selectedIndex > maxIndex) {
+        ComfyApp.clipspace.selectedIndex = maxIndex;
+        log.debug(`Fixed clipspace selectedIndex to ${maxIndex} (max available)`);
+    }
+    if (ComfyApp.clipspace.combinedIndex > maxIndex) {
+        ComfyApp.clipspace.combinedIndex = maxIndex;
+        log.debug(`Fixed clipspace combinedIndex to ${maxIndex} (max available)`);
+    }
+    // Verify the image at combinedIndex exists and has src
+    const combinedImg = ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex];
+    if (!combinedImg || !combinedImg.src) {
+        log.debug("Image at combinedIndex is missing or has no src, trying to find valid image");
+        // Try to use the first available image
+        for (let i = 0; i < ComfyApp.clipspace.imgs.length; i++) {
+            if (ComfyApp.clipspace.imgs[i] && ComfyApp.clipspace.imgs[i].src) {
+                ComfyApp.clipspace.combinedIndex = i;
+                log.debug(`Fixed combinedIndex to ${i} (first valid image)`);
+                break;
+            }
+        }
+        // Final check - if still no valid image found
+        const finalImg = ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex];
+        if (!finalImg || !finalImg.src) {
+            log.error("No valid images found in clipspace after attempting fixes");
+            return false;
+        }
+    }
+    log.debug("Final clipspace structure:", {
+        selectedIndex: ComfyApp.clipspace.selectedIndex,
+        combinedIndex: ComfyApp.clipspace.combinedIndex,
+        img_paste_mode: ComfyApp.clipspace.img_paste_mode,
+        imgsLength: ComfyApp.clipspace.imgs?.length,
+        combinedImgSrc: ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex]?.src?.substring(0, 50) + '...'
+    });
+    return true;
+}
+/**
+ * Safely calls ComfyApp.pasteFromClipspace after validating clipspace structure
+ * @param {any} node - The ComfyUI node to paste to
+ * @returns {boolean} - True if paste was successful, false otherwise
+ */
+export function safeClipspacePaste(node) {
+    log.debug("Attempting safe clipspace paste");
+    if (!validateAndFixClipspace()) {
+        log.debug("Clipspace validation failed, cannot paste");
+        return false;
+    }
+    try {
+        ComfyApp.pasteFromClipspace(node);
+        log.debug("Successfully called pasteFromClipspace");
+        return true;
+    }
+    catch (error) {
+        log.error("Error calling pasteFromClipspace:", error);
+        return false;
+    }
+}

js/utils/IconLoader.js

@@ -19,13 +19,19 @@ export const LAYERFORGE_TOOLS = {
     SETTINGS: 'settings',
     SYSTEM_CLIPBOARD: 'system_clipboard',
     CLIPSPACE: 'clipspace',
+    CROP: 'crop',
+    TRANSFORM: 'transform',
 };
 // SVG Icons for LayerForge tools
 const SYSTEM_CLIPBOARD_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm5 15H7v-2h10v2zm0-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>`;
 const CLIPSPACE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">  <defs>    <mask id="cutout">      <rect width="100%" height="100%" fill="white"/>           <path         d="M5.485 23.76c-.568 0-1.026-.207-1.325-.598-.307-.402-.387-.964-.22-1.54l.672-2.315a.605.605 0 00-.1-.536.622.622 0 00-.494-.243H2.085c-.568 0-1.026-.207-1.325-.598-.307-.403-.387-.964-.22-1.54l2.31-7.917.255-.87c.343-1.18 1.592-2.14 2.786-2.14h2.313c.276 0 .519-.18.595-.442l.764-2.633C9.906 1.208 11.155.249 12.35.249l4.945-.008h3.62c.568 0 1.027.206 1.325.597.307.402.387.964.22 1.54l-1.035 3.566c-.343 1.178-1.593 2.137-2.787 2.137l-4.956.01H11.37a.618.618 0 00-.594.441l-1.928 6.604a.605.605 0 00.1.537c.118.153.3.243.495.243l3.275-.006h3.61c.568 0 1.026.206 1.325.598.307.402.387.964.22 1.54l-1.036 3.565c-.342 1.179-1.592 2.138-2.786 2.138l-4.957.01h-3.61z"         fill="black"         transform="translate(4.8 4.8) scale(0.6)"      />    </mask>  </defs>  <path     d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z"     fill="#ffffff"     mask="url(#cutout)"  /></svg>`;
+const CROP_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M17 15h3V7c0-1.1-.9-2-2-2H10v3h7v7zM7 18V1H4v4H0v3h4v10c0 2 1 3 3 3h10v4h3v-4h4v-3H24z"/></svg>';
+const TRANSFORM_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M11.3 17.096c.092-.044.34-.052 1.028-.044l.912.008.124.124c.184.184.184.408.004.584l-.128.132-.896.012c-.72.008-.924 0-1.036-.048-.18-.072-.284-.264-.256-.452.028-.168.092-.248.248-.316Zm-3.164 0c.096-.044.328-.052 1.036-.044l.916.008.116.132c.16.18.16.396 0 .576l-.116.132-.876.012c-.552.008-.928-.004-1.02-.032-.388-.112-.428-.62-.056-.784Zm-4.6-1.168.112-.096 1.42.004 1.424.004.116.116.116.116V17.48v1.408l-.116.116-.116.116H5.068h-1.42l-.112-.096-.112-.096L3.42 17.48V16.032l.112-.096ZM4.78 12.336c.104-.104.168-.136.284-.136s.18.032.284.136l.136.136v.964.964l-.116.128c-.1.112-.144.132-.304.132s-.204-.02-.304-.132L4.644 14.4l-.004-.964v-.964l.136-.136Zm8.868-.648c-.008-.024-.004-.048.008-.048s1.504.512 3.312 1.136c1.812.624 4.252 1.464 5.424 1.868 1.168.404 2.128.744 2.128.76 0 .012-.24.108-.528.212-.292.104-1.468.52-2.616.928l-2.08.74-.936 2.62c-.512 1.44-.944 2.616-.956 2.616-.016 0-.86-2.424-1.88-5.392-1.02-2.964-1.864-5.412-1.876-5.44ZM19.292 9.08c.216-.088.432-.02.548.168.076.124.08.188.072 1.06l-.012.928-.116.12c-.1.104-.148.124-.304.124s-.204-.02-.304-.124l-.116-.12-.012-.928c-.008-.872-.004-.936.072-1.06.044-.072.12-.148.172-.168Zm-14.516.096c.104-.104.168-.136.284-.136s.18.032.284.136l.136.136v.956c0 1.064-.004 1.088-.268 1.2-.18.072-.376.012-.492-.148-.076-.104-.08-.172-.08-1.06V9.312l.136-.136ZM19.192 6c.096-.088.168-.116.288-.116s.192.028.288.116l.132.116V7.1v.98l-.116.12c-.1.104-.148.124-.304.124s-.204-.02-.304-.124l-.116-.12V7.096 6.112l.132-.116ZM4.816 5.964c.048-.044.152-.072.256-.072.144 0 .196.02.292.124l.116.124v.98.968l-.116.116c-.092.092-.152.116-.284.116-.408 0-.44-.28-.44-1.22s.012-1.016.176-1.148Zm9.516-3.192.14-.136.968.004h.968l.112.116c.152.152.188.3.108.468-.124.252-.196.276-1.044.288-.42.008-.84.004-.936-.012-.24-.036-.38-.192-.436-.408-.02-.156-.008-.184.12-.312Zm-3.156-.268.136.136h.956c1.064 0 1.088.004 1.2.268.072.172.016.372-.136.492-.096.076-.16.08-1.06.08h-.96l-.136-.136c-.104-.104-.136-.168-.136-.284s.032-.18.136-.284Zm-3.16 0 .136.136h.96c.94 0 .964.004 1.068.088.2.176.196.508-.004.668-.1.08-.156.084-1.064.084h-.96l-.136-.136c-.188-.188-.188-.38 0-.568Zm10.04-1.14c.044-.02.712-.032 1.476-.028l1.396.008.096.112.096.112v1.424 1.5l-.116.116-.116.116L19.48 4.72H18.072l-.116-.116-.116-.116V3.072c0-1.524.004-1.544.216-1.632ZM3.62 1.456c.184-.08 2.74-.08 2.896 0 .196.104.204.164.204 1.604s-.008 1.5-.204 1.604c-.148.076-2.732.084-2.896.008-.212-.096-.22-.148-.22-1.608s.008-1.516.22-1.608Z"/></svg>';
 const LAYERFORGE_TOOL_ICONS = {
     [LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(SYSTEM_CLIPBOARD_ICON_SVG)}`,
     [LAYERFORGE_TOOLS.CLIPSPACE]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(CLIPSPACE_ICON_SVG)}`,
+    [LAYERFORGE_TOOLS.CROP]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(CROP_ICON_SVG)}`,
+    [LAYERFORGE_TOOLS.TRANSFORM]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(TRANSFORM_ICON_SVG)}`,
     [LAYERFORGE_TOOLS.VISIBILITY]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>')}`,
     [LAYERFORGE_TOOLS.MOVE]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"/></svg>')}`,
     [LAYERFORGE_TOOLS.ROTATE]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z"/></svg>')}`,
@@ -54,7 +60,9 @@ const LAYERFORGE_TOOL_COLORS = {
     [LAYERFORGE_TOOLS.BRUSH]: '#4285F4',
     [LAYERFORGE_TOOLS.ERASER]: '#FBBC05',
     [LAYERFORGE_TOOLS.SHAPE]: '#FF6D01',
-    [LAYERFORGE_TOOLS.SETTINGS]: '#F06292'
+    [LAYERFORGE_TOOLS.SETTINGS]: '#F06292',
+    [LAYERFORGE_TOOLS.CROP]: '#EA4335',
+    [LAYERFORGE_TOOLS.TRANSFORM]: '#34A853',
 };
 export class IconLoader {
     constructor() {

js/utils/ImageUploadUtils.js

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { api } from "../../../scripts/api.js";
 import { createModuleLogger } from "./LoggerUtils.js";
 import { withErrorHandling, createValidationError, createNetworkError } from "../ErrorHandler.js";

js/utils/ImageUtils.js

@@ -314,3 +314,102 @@ export function canvasToMaskImage(canvas) {
         img.src = canvas.toDataURL();
     });
 }
+/**
+ * Scales an image to fit within specified bounds while maintaining aspect ratio
+ * @param image - Image to scale
+ * @param targetWidth - Target width to fit within
+ * @param targetHeight - Target height to fit within
+ * @returns Promise with scaled Image element
+ */
+export async function scaleImageToFit(image, targetWidth, targetHeight) {
+    const scale = Math.min(targetWidth / image.width, targetHeight / image.height);
+    const scaledWidth = Math.max(1, Math.round(image.width * scale));
+    const scaledHeight = Math.max(1, Math.round(image.height * scale));
+    const { canvas, ctx } = createCanvas(scaledWidth, scaledHeight, '2d', { willReadFrequently: true });
+    if (!ctx)
+        throw new Error("Could not create scaled image context");
+    ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
+    return new Promise((resolve, reject) => {
+        const scaledImg = new Image();
+        scaledImg.onload = () => resolve(scaledImg);
+        scaledImg.onerror = reject;
+        scaledImg.src = canvas.toDataURL();
+    });
+}
+/**
+ * Unified tensor to image data conversion
+ * Handles both RGB images and grayscale masks
+ * @param tensor - Input tensor data
+ * @param mode - 'rgb' for images or 'grayscale' for masks
+ * @returns ImageData object
+ */
+export function tensorToImageData(tensor, mode = 'rgb') {
+    try {
+        const shape = tensor.shape;
+        const height = shape[1];
+        const width = shape[2];
+        const channels = shape[3] || 1; // Default to 1 for masks
+        log.debug("Converting tensor:", { shape, channels, mode });
+        const imageData = new ImageData(width, height);
+        const data = new Uint8ClampedArray(width * height * 4);
+        const flatData = tensor.data;
+        const pixelCount = width * height;
+        const min = tensor.min_val ?? 0;
+        const max = tensor.max_val ?? 1;
+        const denom = (max - min) || 1;
+        for (let i = 0; i < pixelCount; i++) {
+            const pixelIndex = i * 4;
+            const tensorIndex = i * channels;
+            let lum;
+            if (mode === 'grayscale' || channels === 1) {
+                lum = flatData[tensorIndex];
+            }
+            else {
+                // Compute luminance for RGB
+                const r = flatData[tensorIndex + 0] ?? 0;
+                const g = flatData[tensorIndex + 1] ?? 0;
+                const b = flatData[tensorIndex + 2] ?? 0;
+                lum = 0.299 * r + 0.587 * g + 0.114 * b;
+            }
+            let norm = (lum - min) / denom;
+            if (!isFinite(norm))
+                norm = 0;
+            norm = Math.max(0, Math.min(1, norm));
+            const value = Math.round(norm * 255);
+            if (mode === 'grayscale') {
+                // For masks: RGB = value, A = 255 (MaskTool reads luminance)
+                data[pixelIndex] = value;
+                data[pixelIndex + 1] = value;
+                data[pixelIndex + 2] = value;
+                data[pixelIndex + 3] = 255;
+            }
+            else {
+                // For images: RGB from channels, A = 255
+                for (let c = 0; c < Math.min(3, channels); c++) {
+                    const channelValue = flatData[tensorIndex + c];
+                    const channelNorm = (channelValue - min) / denom;
+                    data[pixelIndex + c] = Math.round(channelNorm * 255);
+                }
+                data[pixelIndex + 3] = 255;
+            }
+        }
+        imageData.data.set(data);
+        return imageData;
+    }
+    catch (error) {
+        log.error("Error converting tensor:", error);
+        return null;
+    }
+}
+/**
+ * Creates an HTMLImageElement from ImageData
+ * @param imageData - Input ImageData
+ * @returns Promise with HTMLImageElement
+ */
+export async function createImageFromImageData(imageData) {
+    const { canvas, ctx } = createCanvas(imageData.width, imageData.height, '2d', { willReadFrequently: true });
+    if (!ctx)
+        throw new Error("Could not create canvas context");
+    ctx.putImageData(imageData, 0, 0);
+    return await createImageFromSource(canvas.toDataURL());
+}

js/utils/NotificationUtils.js

@@ -1,5 +1,7 @@
 import { createModuleLogger } from "./LoggerUtils.js";
 const log = createModuleLogger('NotificationUtils');
+// Store active notifications for deduplication
+const activeNotifications = new Map();
 /**
  * Utility functions for showing notifications to the user
  */
@@ -8,10 +10,50 @@ const log = createModuleLogger('NotificationUtils');
  * @param message - The message to show
  * @param backgroundColor - Background color (default: #4a6cd4)
  * @param duration - Duration in milliseconds (default: 3000)
+ * @param type - Type of notification
+ * @param deduplicate - If true, will not show duplicate messages and will refresh existing ones (default: false)
  */
-export function showNotification(message, backgroundColor = "#4a6cd4", duration = 3000, type = "info") {
+export function showNotification(message, backgroundColor = "#4a6cd4", duration = 3000, type = "info", deduplicate = false) {
     // Remove any existing prefix to avoid double prefixing
     message = message.replace(/^\[Layer Forge\]\s*/, "");
+    // If deduplication is enabled, check if this message already exists
+    if (deduplicate) {
+        const existingNotification = activeNotifications.get(message);
+        if (existingNotification) {
+            log.debug(`Notification already exists, refreshing timer: ${message}`);
+            // Clear existing timeout
+            if (existingNotification.timeout !== null) {
+                clearTimeout(existingNotification.timeout);
+            }
+            // Find the progress bar and restart its animation
+            const progressBar = existingNotification.element.querySelector('div[style*="animation"]');
+            if (progressBar) {
+                // Reset animation
+                progressBar.style.animation = 'none';
+                // Force reflow
+                void progressBar.offsetHeight;
+                // Restart animation
+                progressBar.style.animation = `lf-progress ${duration / 1000}s linear`;
+            }
+            // Set new timeout
+            const newTimeout = window.setTimeout(() => {
+                const notification = existingNotification.element;
+                notification.style.animation = 'lf-fadeout 0.3s ease-out forwards';
+                notification.addEventListener('animationend', () => {
+                    if (notification.parentNode) {
+                        notification.parentNode.removeChild(notification);
+                        activeNotifications.delete(message);
+                        const container = document.getElementById('lf-notification-container');
+                        if (container && container.children.length === 0) {
+                            container.remove();
+                        }
+                    }
+                });
+            }, duration);
+            existingNotification.timeout = newTimeout;
+            return; // Don't create a new notification
+        }
+    }
     // Type-specific config
     const config = {
         success: { icon: "✔️", title: "Success", bg: "#1fd18b" },
@@ -148,6 +190,10 @@ export function showNotification(message, backgroundColor = "#4a6cd4", duration
     body.classList.add('notification-scrollbar');
     let dismissTimeout = null;
     const closeNotification = () => {
+        // Remove from active notifications map if deduplicate is enabled
+        if (deduplicate) {
+            activeNotifications.delete(message);
+        }
         notification.style.animation = 'lf-fadeout 0.3s ease-out forwards';
         notification.addEventListener('animationend', () => {
             if (notification.parentNode) {
@@ -171,40 +217,77 @@ export function showNotification(message, backgroundColor = "#4a6cd4", duration
         progressBar.style.transform = computedStyle.transform;
         progressBar.style.animation = 'lf-progress-rewind 0.5s ease-out forwards';
     };
-    notification.addEventListener('mouseenter', pauseAndRewindTimer);
-    notification.addEventListener('mouseleave', startDismissTimer);
+    notification.addEventListener('mouseenter', () => {
+        pauseAndRewindTimer();
+        // Update stored timeout if deduplicate is enabled
+        if (deduplicate) {
+            const stored = activeNotifications.get(message);
+            if (stored) {
+                stored.timeout = null;
+            }
+        }
+    });
+    notification.addEventListener('mouseleave', () => {
+        startDismissTimer();
+        // Update stored timeout if deduplicate is enabled
+        if (deduplicate) {
+            const stored = activeNotifications.get(message);
+            if (stored) {
+                stored.timeout = dismissTimeout;
+            }
+        }
+    });
     startDismissTimer();
+    // Store notification if deduplicate is enabled
+    if (deduplicate) {
+        activeNotifications.set(message, { element: notification, timeout: dismissTimeout });
+    }
     log.debug(`Notification shown: [Layer Forge] ${message}`);
 }
 /**
  * Shows a success notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showSuccessNotification(message, duration = 3000) {
-    showNotification(message, undefined, duration, "success");
+export function showSuccessNotification(message, duration = 3000, deduplicate = false) {
+    showNotification(message, undefined, duration, "success", deduplicate);
 }
 /**
  * Shows an error notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 5000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showErrorNotification(message, duration = 5000) {
-    showNotification(message, undefined, duration, "error");
+export function showErrorNotification(message, duration = 5000, deduplicate = false) {
+    showNotification(message, undefined, duration, "error", deduplicate);
 }
 /**
  * Shows an info notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showInfoNotification(message, duration = 3000) {
-    showNotification(message, undefined, duration, "info");
+export function showInfoNotification(message, duration = 3000, deduplicate = false) {
+    showNotification(message, undefined, duration, "info", deduplicate);
 }
 /**
  * Shows a warning notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showWarningNotification(message, duration = 3000) {
-    showNotification(message, undefined, duration, "warning");
+export function showWarningNotification(message, duration = 3000, deduplicate = false) {
+    showNotification(message, undefined, duration, "warning", deduplicate);
 }
 /**
  * Shows an alert notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showAlertNotification(message, duration = 3000) {
-    showNotification(message, undefined, duration, "alert");
+export function showAlertNotification(message, duration = 3000, deduplicate = false) {
+    showNotification(message, undefined, duration, "alert", deduplicate);
 }
 /**
  * Shows a sequence of all notification types for debugging purposes.
@@ -214,7 +297,7 @@ export function showAllNotificationTypes(message) {
     types.forEach((type, index) => {
         const notificationMessage = message || `This is a '${type}' notification.`;
         setTimeout(() => {
-            showNotification(notificationMessage, undefined, 3000, type);
+            showNotification(notificationMessage, undefined, 3000, type, false);
         }, index * 400); // Stagger the notifications
     });
 }

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.5.0"
+version = "1.5.10"
 license = { text = "MIT License" }
 dependencies = ["torch", "torchvision", "transformers", "aiohttp", "numpy", "tqdm", "Pillow"]
 

src/BatchPreviewManager.ts

@@ -166,10 +166,14 @@ export class BatchPreviewManager {
         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');
-                const iconContainer = toggleBtn.querySelector('.mask-icon-container') as HTMLElement;
+            const toggleSwitch = document.getElementById(`toggle-mask-switch-${this.canvas.node.id}`);
+            if (toggleSwitch) {
+                const checkbox = toggleSwitch.querySelector('input[type="checkbox"]') as HTMLInputElement;
+                if (checkbox) {
+                    checkbox.checked = false;
+                }
+                toggleSwitch.classList.remove('primary');
+                const iconContainer = toggleSwitch.querySelector('.switch-icon') as HTMLElement;
                 if (iconContainer) {
                     iconContainer.style.opacity = '0.5';
                 }
@@ -218,10 +222,14 @@ export class BatchPreviewManager {
 
         if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) {
             this.canvas.maskTool.toggleOverlayVisibility();
-            const toggleBtn = document.getElementById(`toggle-mask-btn-${String(this.canvas.node.id)}`);
-            if (toggleBtn) {
-                toggleBtn.classList.add('primary');
-                const iconContainer = toggleBtn.querySelector('.mask-icon-container') as HTMLElement;
+            const toggleSwitch = document.getElementById(`toggle-mask-switch-${String(this.canvas.node.id)}`);
+            if (toggleSwitch) {
+                const checkbox = toggleSwitch.querySelector('input[type="checkbox"]') as HTMLInputElement;
+                if (checkbox) {
+                    checkbox.checked = true;
+                }
+                toggleSwitch.classList.add('primary');
+                const iconContainer = toggleSwitch.querySelector('.switch-icon') as HTMLElement;
                 if (iconContainer) {
                     iconContainer.style.opacity = '1';
                 }

src/Canvas.ts

@@ -84,11 +84,18 @@ export class Canvas {
     node: ComfyNode;
     offscreenCanvas: HTMLCanvasElement;
     offscreenCtx: CanvasRenderingContext2D | null;
+    overlayCanvas: HTMLCanvasElement;
+    overlayCtx: CanvasRenderingContext2D;
     onHistoryChange: ((historyInfo: { canUndo: boolean; canRedo: boolean; }) => void) | undefined;
     onViewportChange: (() => void) | null;
     onStateChange: (() => void) | undefined;
     pendingBatchContext: any;
     pendingDataCheck: number | null;
+    pendingInputDataCheck: number | null;
+    inputDataLoaded: boolean;
+    lastLoadedImageSrc?: string;
+    lastLoadedLinkId?: number;
+    lastLoadedMaskLinkId?: number;
     previewVisible: boolean;
     requestSaveState: () => void;
     viewport: Viewport;
@@ -122,10 +129,22 @@ export class Canvas {
         });
         this.offscreenCanvas = offscreenCanvas;
         this.offscreenCtx = offscreenCtx;
+        
+        // Create overlay canvas for brush cursor and other lightweight overlays
+        const { canvas: overlayCanvas, ctx: overlayCtx } = createCanvas(0, 0, '2d', {
+            alpha: true,
+            willReadFrequently: false
+        });
+        if (!overlayCtx) throw new Error("Could not create overlay canvas context");
+        this.overlayCanvas = overlayCanvas;
+        this.overlayCtx = overlayCtx;
+        
         this.canvasContainer = null;
 
         this.dataInitialized = false;
         this.pendingDataCheck = null;
+        this.pendingInputDataCheck = null;
+        this.inputDataLoaded = false;
         this.imageCache = new Map();
 
         this.requestSaveState = () => {};
@@ -471,6 +490,11 @@ export class Canvas {
         };
 
         const handleExecutionStart = () => {
+            // Check for input data when execution starts, but don't reset the flag
+            log.debug('Execution started, checking for input data...');
+            // On start, only allow images; mask should load on mask-connect or after execution completes
+            this.canvasIO.checkForInputData({ allowImage: true, allowMask: false, reason: 'execution_start' });
+            
             if (getAutoRefreshValue()) {
                 lastExecutionStartTime = Date.now();
                 // Store a snapshot of the context for the upcoming batch
@@ -494,6 +518,10 @@ export class Canvas {
         };
 
         const handleExecutionSuccess = async () => {
+            // Always check for input data after execution completes
+            log.debug('Execution success, checking for input data...');
+            await this.canvasIO.checkForInputData({ allowImage: true, allowMask: true, reason: 'execution_success' });
+            
             if (getAutoRefreshValue()) {
                 log.info('Auto-refresh triggered, importing latest images.');
 

src/CanvasIO.ts

@@ -2,6 +2,7 @@ import { createCanvas } from "./utils/CommonUtils.js";
 import { createModuleLogger } from "./utils/LoggerUtils.js";
 import { showErrorNotification } from "./utils/NotificationUtils.js";
 import { webSocketManager } from "./utils/WebSocketManager.js";
+import { scaleImageToFit, createImageFromSource, tensorToImageData, createImageFromImageData } from "./utils/ImageUtils.js";
 import type { Canvas } from './Canvas';
 import type { Layer, Shape } from './types';
 
@@ -269,7 +270,12 @@ export class CanvasIO {
             log.error(`Failed to send data for node ${nodeId}:`, error);
 
 
-            throw new Error(`Failed to get confirmation from server for node ${nodeId}. The workflow might not have the latest canvas data.`);
+        throw new Error(
+        `Failed to get confirmation from server for node ${nodeId}. ` +
+        `Make sure that the nodeId: (${nodeId}) matches the "node_id" value in the node options. If they don't match, you may need to manually set the node_id to ${nodeId}.` +
+        `If the issue persists, try using a different browser. Some issues have been observed specifically with portable versions of Chrome, ` +
+        `which may have limitations related to memory or WebSocket handling. Consider testing in a standard Chrome installation, Firefox, or another browser.`
+        );
         }
     }
 
@@ -277,22 +283,12 @@ export class CanvasIO {
         try {
             log.debug("Adding input to canvas:", { inputImage });
 
-            const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(inputImage.width, inputImage.height);
-            if (!tempCtx) throw new Error("Could not create temp context");
+            // Use unified tensorToImageData for RGB image
+            const imageData = tensorToImageData(inputImage, 'rgb');
+            if (!imageData) throw new Error("Failed to convert input image tensor");
 
-            const imgData = new ImageData(
-                new Uint8ClampedArray(inputImage.data),
-                inputImage.width,
-                inputImage.height
-            );
-            tempCtx.putImageData(imgData, 0, 0);
-
-            const image = new Image();
-            await new Promise((resolve, reject) => {
-                image.onload = resolve;
-                image.onerror = reject;
-                image.src = tempCanvas.toDataURL();
-            });
+            // Create HTMLImageElement from ImageData
+            const image = await createImageFromImageData(imageData);
 
             const bounds = this.canvas.outputAreaBounds;
             const scale = Math.min(
@@ -328,23 +324,10 @@ export class CanvasIO {
                 throw new Error("Invalid tensor data");
             }
 
-            const { canvas, ctx } = createCanvas(tensor.width, tensor.height, '2d', { willReadFrequently: true });
-            if (!ctx) throw new Error("Could not create canvas context");
+            const imageData = tensorToImageData(tensor, 'rgb');
+            if (!imageData) throw new Error("Failed to convert tensor to image data");
 
-            const imageData = new ImageData(
-                new Uint8ClampedArray(tensor.data),
-                tensor.width,
-                tensor.height
-            );
-
-            ctx.putImageData(imageData, 0, 0);
-
-            return new Promise((resolve, reject) => {
-                const img = new Image();
-                img.onload = () => resolve(img);
-                img.onerror = (e) => reject(new Error("Failed to load image: " + e));
-                img.src = canvas.toDataURL();
-            });
+            return await createImageFromImageData(imageData);
         } catch (error) {
             log.error("Error converting tensor to image:", error);
             throw error;
@@ -367,6 +350,16 @@ export class CanvasIO {
         try {
             log.info("Starting node data initialization...");
 
+            // First check for input data from the backend (new feature)
+            await this.checkForInputData();
+
+            // If we've already loaded input data, don't continue with old initialization
+            if (this.canvas.inputDataLoaded) {
+                log.debug("Input data already loaded, skipping old initialization");
+                this.canvas.dataInitialized = true;
+                return;
+            }
+
             if (!this.canvas.node || !(this.canvas.node as any).inputs) {
                 log.debug("Node or inputs not ready");
                 return this.scheduleDataCheck();
@@ -374,6 +367,14 @@ export class CanvasIO {
 
             if ((this.canvas.node as any).inputs[0] && (this.canvas.node as any).inputs[0].link) {
                 const imageLinkId = (this.canvas.node as any).inputs[0].link;
+                
+                // Check if we already loaded this link
+                if (this.canvas.lastLoadedLinkId === imageLinkId) {
+                    log.debug(`Link ${imageLinkId} already loaded via new system, marking as initialized`);
+                    this.canvas.dataInitialized = true;
+                    return;
+                }
+                
                 const imageData = (window as any).app.nodeOutputs[imageLinkId];
 
                 if (imageData) {
@@ -384,6 +385,9 @@ export class CanvasIO {
                     log.debug("Image data not available yet");
                     return this.scheduleDataCheck();
                 }
+            } else {
+                // No input connected, mark as initialized to stop repeated checks
+                this.canvas.dataInitialized = true;
             }
 
             if ((this.canvas.node as any).inputs[1] && (this.canvas.node as any).inputs[1].link) {
@@ -402,6 +406,439 @@ export class CanvasIO {
         }
     }
 
+    async checkForInputData(options?: { allowImage?: boolean; allowMask?: boolean; reason?: string }): Promise<void> {
+        try {
+            const nodeId = this.canvas.node.id;
+            const allowImage = options?.allowImage ?? true;
+            const allowMask = options?.allowMask ?? true;
+            const reason = options?.reason ?? 'unspecified';
+            log.info(`Checking for input data for node ${nodeId}... opts: image=${allowImage}, mask=${allowMask}, reason=${reason}`);
+            
+            // Track loaded links separately for image and mask
+            let imageLoaded = false;
+            let maskLoaded = false;
+            let imageChanged = false;
+            
+            // First, try to get data from connected node's output if available (IMAGES)
+            if (allowImage && this.canvas.node.inputs && this.canvas.node.inputs[0] && this.canvas.node.inputs[0].link) {
+                const linkId = this.canvas.node.inputs[0].link;
+                const graph = (this.canvas.node as any).graph;
+                
+                // Always check if images have changed first
+                if (graph) {
+                    const link = graph.links[linkId];
+                    if (link) {
+                        const sourceNode = graph.getNodeById(link.origin_id);
+                        if (sourceNode && sourceNode.imgs && sourceNode.imgs.length > 0) {
+                            // Create current batch identifier (all image sources combined)
+                            const currentBatchImageSrcs = sourceNode.imgs.map((img: HTMLImageElement) => img.src).join('|');
+                            
+                            // Check if this is the same link we loaded before
+                            if (this.canvas.lastLoadedLinkId === linkId) {
+                                // Same link, check if images actually changed
+                                if (this.canvas.lastLoadedImageSrc !== currentBatchImageSrcs) {
+                                    log.info(`Batch images changed for link ${linkId} (${sourceNode.imgs.length} images), will reload...`);
+                                    log.debug(`Previous batch hash: ${this.canvas.lastLoadedImageSrc?.substring(0, 100)}...`);
+                                    log.debug(`Current batch hash: ${currentBatchImageSrcs.substring(0, 100)}...`);
+                                    imageChanged = true;
+                                    // Clear the inputDataLoaded flag to force reload from backend
+                                    this.canvas.inputDataLoaded = false;
+                                    // Clear the lastLoadedImageSrc to force reload
+                                    this.canvas.lastLoadedImageSrc = undefined;
+                                    // Clear backend data to force fresh load
+                                    fetch(`/layerforge/clear_input_data/${nodeId}`, { method: 'POST' })
+                                        .then(() => log.debug("Backend input data cleared due to image change"))
+                                        .catch(err => log.error("Failed to clear backend data:", err));
+                                } else {
+                                    log.debug(`Batch images for link ${linkId} unchanged (${sourceNode.imgs.length} images)`);
+                                    imageLoaded = true;
+                                }
+                            } else {
+                                // Different link or first load
+                                log.info(`New link ${linkId} detected, will load ${sourceNode.imgs.length} images`);
+                                imageChanged = false; // It's not a change, it's a new link
+                                imageLoaded = false; // Need to load
+                                // Reset the inputDataLoaded flag for new link
+                                this.canvas.inputDataLoaded = false;
+                            }
+                        }
+                    }
+                }
+                
+                if (!imageLoaded || imageChanged) {
+                    // Reset the inputDataLoaded flag when images change
+                    if (imageChanged) {
+                        this.canvas.inputDataLoaded = false;
+                        log.info("Resetting inputDataLoaded flag due to image change");
+                    }
+                
+                    if ((this.canvas.node as any).graph) {
+                        const graph2 = (this.canvas.node as any).graph;
+                        const link2 = graph2.links[linkId];
+                        if (link2) {
+                            const sourceNode = graph2.getNodeById(link2.origin_id);
+                            if (sourceNode && sourceNode.imgs && sourceNode.imgs.length > 0) {
+                                // The connected node has images in its output - handle multiple images (batch)
+                                log.info(`Found ${sourceNode.imgs.length} image(s) in connected node's output, loading all`);
+                                
+                                // Create a combined source identifier for batch detection
+                                const batchImageSrcs = sourceNode.imgs.map((img: HTMLImageElement) => img.src).join('|');
+                                
+                                // Mark this link and batch sources as loaded
+                                this.canvas.lastLoadedLinkId = linkId;
+                                this.canvas.lastLoadedImageSrc = batchImageSrcs;
+                                    
+                                // Don't clear layers - just add new ones
+                                if (imageChanged) {
+                                    log.info("Image change detected, will add new layers");
+                                }
+                                
+                                // Determine add mode
+                                const fitOnAddWidget = this.canvas.node.widgets.find((w) => w.name === "fit_on_add");
+                                const addMode = (fitOnAddWidget && fitOnAddWidget.value) ? 'fit' : 'center';
+                                
+                                // Add all images from the batch as separate layers
+                                for (let i = 0; i < sourceNode.imgs.length; i++) {
+                                    const img = sourceNode.imgs[i];
+                                    await this.canvas.canvasLayers.addLayerWithImage(
+                                        img, 
+                                        { name: `Batch Image ${i + 1}` }, // Give each layer a unique name
+                                        addMode,
+                                        this.canvas.outputAreaBounds
+                                    );
+                                    log.debug(`Added batch image ${i + 1}/${sourceNode.imgs.length} to canvas`);
+                                }
+                                
+                                this.canvas.inputDataLoaded = true;
+                                imageLoaded = true;
+                                log.info(`All ${sourceNode.imgs.length} input images from batch added as separate layers`);
+                                this.canvas.render();
+                                this.canvas.saveState();
+                            }
+                        }
+                    }
+                }
+            }
+            
+            // Check for mask input separately (from nodeOutputs) ONLY when allowed
+            if (allowMask && this.canvas.node.inputs && this.canvas.node.inputs[1] && this.canvas.node.inputs[1].link) {
+                const maskLinkId = this.canvas.node.inputs[1].link;
+                
+                // Check if we already loaded this mask link
+                if (this.canvas.lastLoadedMaskLinkId === maskLinkId) {
+                    log.debug(`Mask link ${maskLinkId} already loaded`);
+                    maskLoaded = true;
+                } else {
+                    // Try to get mask tensor from nodeOutputs using origin_id (not link id)
+                    const graph = (this.canvas.node as any).graph;
+                    let maskOutput = null;
+                    
+                    if (graph) {
+                        const link = graph.links[maskLinkId];
+                        if (link && link.origin_id) {
+                            // Use origin_id to get the actual node output
+                            const nodeOutput = (window as any).app?.nodeOutputs?.[link.origin_id];
+                            log.debug(`Looking for mask output from origin node ${link.origin_id}, found:`, !!nodeOutput);
+                            
+                            if (nodeOutput) {
+                                log.debug(`Node ${link.origin_id} output structure:`, {
+                                    hasData: !!nodeOutput.data,
+                                    hasShape: !!nodeOutput.shape,
+                                    dataType: typeof nodeOutput.data,
+                                    shapeType: typeof nodeOutput.shape,
+                                    keys: Object.keys(nodeOutput)
+                                });
+                                
+                                // Only use if it has actual tensor data
+                                if (nodeOutput.data && nodeOutput.shape) {
+                                    maskOutput = nodeOutput;
+                                }
+                            }
+                        }
+                    }
+                    
+                    if (maskOutput && maskOutput.data && maskOutput.shape) {
+                        try {
+                            // Derive dimensions from shape or explicit width/height
+                            let width = (maskOutput.width as number) || 0;
+                            let height = (maskOutput.height as number) || 0;
+                            const shape = maskOutput.shape as number[]; // e.g. [1,H,W] or [1,H,W,1]
+                            if ((!width || !height) && Array.isArray(shape)) {
+                                if (shape.length >= 3) {
+                                    height = shape[1];
+                                    width = shape[2];
+                                } else if (shape.length === 2) {
+                                    height = shape[0];
+                                    width = shape[1];
+                                }
+                            }
+                            if (!width || !height) {
+                                throw new Error("Cannot determine mask dimensions from nodeOutputs");
+                            }
+                            
+                            // Determine channels count
+                            let channels = 1;
+                            if (Array.isArray(shape) && shape.length >= 4) {
+                                channels = shape[3];
+                            } else if ((maskOutput as any).channels) {
+                                channels = (maskOutput as any).channels;
+                            } else {
+                                const len = (maskOutput.data as any).length;
+                                channels = Math.max(1, Math.floor(len / (width * height)));
+                            }
+                            
+                            // Use unified tensorToImageData for masks
+                            const maskImageData = tensorToImageData(maskOutput, 'grayscale');
+                            if (!maskImageData) throw new Error("Failed to convert mask tensor to image data");
+                            
+                            // Create canvas and put image data
+                            const { canvas: maskCanvas, ctx } = createCanvas(width, height, '2d', { willReadFrequently: true });
+                            if (!ctx) throw new Error("Could not create mask context");
+                            ctx.putImageData(maskImageData, 0, 0);
+                            
+                            // Convert to HTMLImageElement
+                            const maskImg = await createImageFromSource(maskCanvas.toDataURL());
+                            
+                            // Respect fit_on_add (scale to output area)
+                            const widgets = this.canvas.node.widgets;
+                            const fitOnAddWidget = widgets ? widgets.find((w: any) => w.name === "fit_on_add") : null;
+                            const shouldFit = fitOnAddWidget && fitOnAddWidget.value;
+                            
+                            let finalMaskImg: HTMLImageElement = maskImg;
+                            if (shouldFit) {
+                                const bounds = this.canvas.outputAreaBounds;
+                                finalMaskImg = await scaleImageToFit(maskImg, bounds.width, bounds.height);
+                            }
+                            
+                            // Apply to MaskTool (centers internally)
+                            if (this.canvas.maskTool) {
+                                this.canvas.maskTool.setMask(finalMaskImg, true);
+                                (this.canvas as any).maskAppliedFromInput = true;
+                                this.canvas.canvasState.saveMaskState();
+                                this.canvas.render();
+                                // Mark this mask link as loaded to avoid re-applying
+                                this.canvas.lastLoadedMaskLinkId = maskLinkId;
+                                maskLoaded = true;
+                                log.info("Applied input mask from nodeOutputs immediately on connection" + (shouldFit ? " (fitted to output area)" : ""));
+                            }
+                        } catch (err) {
+                            log.warn("Failed to apply mask from nodeOutputs immediately; will wait for backend input_mask after execution", err);
+                        }
+                    } else {
+                        // nodeOutputs exist but don't have tensor data yet (need workflow execution)
+                        log.info(`Mask node ${(this.canvas.node as any).graph?.links[maskLinkId]?.origin_id} found but has no tensor data yet. Mask will be applied automatically after workflow execution.`);
+                        // Don't retry - data won't be available until workflow runs
+                    }
+                }
+            }
+            
+            // Only check backend if we have actual inputs connected
+            const hasImageInput = this.canvas.node.inputs && this.canvas.node.inputs[0] && this.canvas.node.inputs[0].link;
+            const hasMaskInput = this.canvas.node.inputs && this.canvas.node.inputs[1] && this.canvas.node.inputs[1].link;
+
+            // If mask input is disconnected, clear any currently applied mask to ensure full separation
+            if (!hasMaskInput) {
+                (this.canvas as any).maskAppliedFromInput = false;
+                this.canvas.lastLoadedMaskLinkId = undefined;
+                log.info("Mask input disconnected - cleared mask to enforce separation from input_image");
+            }
+            
+            if (!hasImageInput && !hasMaskInput) {
+                log.debug("No inputs connected, skipping backend check");
+                this.canvas.inputDataLoaded = true;
+                return;
+            }
+            
+            // Skip backend check during mask connection if we didn't get immediate data
+            if (reason === "mask_connect" && !maskLoaded) {
+                log.info("No immediate mask data available during connection, skipping backend check to avoid stale data. Will check after execution.");
+                return;
+            }
+            
+            // Check backend for input data only if we have connected inputs
+            const response = await fetch(`/layerforge/get_input_data/${nodeId}`);
+            const result = await response.json();
+
+            if (result.success && result.has_input) {
+                // Dedupe: skip only if backend payload matches last loaded batch hash
+                let backendBatchHash: string | undefined;
+                if (result.data?.input_images_batch && Array.isArray(result.data.input_images_batch)) {
+                    backendBatchHash = result.data.input_images_batch.map((i: any) => i.data).join('|');
+                } else if (result.data?.input_image) {
+                    backendBatchHash = result.data.input_image;
+                }
+                // Check mask separately - don't skip if only images are unchanged AND mask is actually connected AND allowed
+                const shouldCheckMask = hasMaskInput && allowMask;
+                
+                if (backendBatchHash && this.canvas.lastLoadedImageSrc === backendBatchHash && !shouldCheckMask) {
+                    log.debug("Backend input data unchanged and no mask to check, skipping reload");
+                    this.canvas.inputDataLoaded = true;
+                    return;
+                } else if (backendBatchHash && this.canvas.lastLoadedImageSrc === backendBatchHash && shouldCheckMask) {
+                    log.debug("Images unchanged but need to check mask, continuing...");
+                    imageLoaded = true; // Mark images as already loaded to skip reloading them
+                }
+                
+                // Check if we already loaded image data (by checking the current link)
+                if (allowImage && !imageLoaded && this.canvas.node.inputs && this.canvas.node.inputs[0] && this.canvas.node.inputs[0].link) {
+                    const currentLinkId = this.canvas.node.inputs[0].link;
+                    if (this.canvas.lastLoadedLinkId !== currentLinkId) {
+                        // Mark this link as loaded
+                        this.canvas.lastLoadedLinkId = currentLinkId;
+                        imageLoaded = false; // Will load from backend
+                    }
+                }
+                
+                // Check for mask data from backend ONLY when mask input is actually connected AND allowed
+                // Only reset if the mask link actually changed
+                if (allowMask && hasMaskInput && this.canvas.node.inputs && this.canvas.node.inputs[1]) {
+                    const currentMaskLinkId = this.canvas.node.inputs[1].link;
+                    // Only reset if this is a different mask link than what we loaded before
+                    if (this.canvas.lastLoadedMaskLinkId !== currentMaskLinkId) {
+                        maskLoaded = false;
+                        log.debug(`New mask input detected (${currentMaskLinkId}), will check backend for mask data`);
+                    } else {
+                        log.debug(`Same mask input (${currentMaskLinkId}), mask already loaded`);
+                        maskLoaded = true;
+                    }
+                } else {
+                    // No mask input connected, or mask loading not allowed right now
+                    maskLoaded = true; // Mark as loaded to skip mask processing
+                    if (!allowMask) {
+                        log.debug("Mask loading is currently disabled by caller, skipping mask check");
+                    } else {
+                        log.debug("No mask input connected, skipping mask check");
+                    }
+                }
+                
+                log.info("Input data found from backend, adding to canvas");
+                const inputData = result.data;
+                
+                // Compute backend batch hash for dedupe and state
+                let backendHashNow: string | undefined;
+                if (inputData?.input_images_batch && Array.isArray(inputData.input_images_batch)) {
+                    backendHashNow = inputData.input_images_batch.map((i: any) => i.data).join('|');
+                } else if (inputData?.input_image) {
+                    backendHashNow = inputData.input_image;
+                }
+                
+                // Just update the hash without removing any layers
+                if (backendHashNow) {
+                    log.info("New backend input data detected, adding new layers");
+                    this.canvas.lastLoadedImageSrc = backendHashNow;
+                }
+                
+                // Mark that we've loaded input data for this execution
+                this.canvas.inputDataLoaded = true;
+                
+                // Determine add mode based on fit_on_add setting
+                const widgets = this.canvas.node.widgets;
+                const fitOnAddWidget = widgets ? widgets.find((w: any) => w.name === "fit_on_add") : null;
+                const addMode = (fitOnAddWidget && fitOnAddWidget.value) ? 'fit' : 'center';
+                
+                // Load input image(s) only if image input is actually connected, not already loaded, and allowed
+                if (allowImage && !imageLoaded && hasImageInput) {
+                    if (inputData.input_images_batch) {
+                        // Handle batch of images
+                        const batch = inputData.input_images_batch;
+                        log.info(`Processing batch of ${batch.length} images from backend`);
+                        
+                                for (let i = 0; i < batch.length; i++) {
+                                    const imgData = batch[i];
+                                    const img = await createImageFromSource(imgData.data);
+                                    
+                                    // Add image to canvas with unique name
+                                    await this.canvas.canvasLayers.addLayerWithImage(
+                                        img, 
+                                        { name: `Batch Image ${i + 1}` },
+                                        addMode,
+                                        this.canvas.outputAreaBounds
+                                    );
+                                    
+                                    log.debug(`Added batch image ${i + 1}/${batch.length} from backend`);
+                                }
+                        
+                        log.info(`All ${batch.length} batch images added from backend`);
+                        this.canvas.render();
+                        this.canvas.saveState();
+                        
+                    } else if (inputData.input_image) {
+                        // Handle single image (backward compatibility)
+                        const img = await createImageFromSource(inputData.input_image);
+                        
+                        // Add image to canvas at output area position
+                        await this.canvas.canvasLayers.addLayerWithImage(
+                            img, 
+                            {},
+                            addMode,
+                            this.canvas.outputAreaBounds
+                        );
+                        
+                        log.info("Single input image added as new layer to canvas");
+                        this.canvas.render();
+                        this.canvas.saveState();
+                    } else {
+                        log.debug("No input image data from backend");
+                    }
+                } else if (!hasImageInput && (inputData.input_images_batch || inputData.input_image)) {
+                    log.debug("Backend has image data but no image input connected, skipping image load");
+                }
+                
+                // Handle mask separately only if mask input is actually connected, allowed, and not already loaded
+                if (allowMask && !maskLoaded && hasMaskInput && inputData.input_mask) {
+                    log.info("Processing input mask");
+                    
+                    // Load mask image
+                    const maskImg = await createImageFromSource(inputData.input_mask);
+                    
+                    // Determine if we should fit the mask or use it at original size
+                    const fitOnAddWidget2 = this.canvas.node.widgets.find((w) => w.name === "fit_on_add");
+                    const shouldFit = fitOnAddWidget2 && fitOnAddWidget2.value;
+                    
+                    let finalMaskImg: HTMLImageElement = maskImg;
+                    if (shouldFit && this.canvas.maskTool) {
+                        const bounds = this.canvas.outputAreaBounds;
+                        finalMaskImg = await scaleImageToFit(maskImg, bounds.width, bounds.height);
+                    }
+                    
+                    // Apply to MaskTool (centers internally)
+                    if (this.canvas.maskTool) {
+                        this.canvas.maskTool.setMask(finalMaskImg, true);
+                    }
+                    
+                    (this.canvas as any).maskAppliedFromInput = true;
+                    // Save the mask state
+                    this.canvas.canvasState.saveMaskState()
+                    
+                    log.info("Applied input mask to mask tool" + (shouldFit ? " (fitted to output area)" : " (original size)"));
+                } else if (!hasMaskInput && inputData.input_mask) {
+                    log.debug("Backend has mask data but no mask input connected, skipping mask load");
+                } else if (!allowMask && inputData.input_mask) {
+                    log.debug("Mask input data present in backend but mask loading is disabled by caller; skipping");
+                }
+            } else {
+                log.debug("No input data from backend");
+                // Don't schedule another check - we'll only check when explicitly triggered
+            }
+        } catch (error) {
+            log.error("Error checking for input data:", error);
+            // Don't schedule another check on error
+        }
+    }
+
+    scheduleInputDataCheck(): void {
+        // Schedule a retry for mask data check when nodeOutputs are not ready yet
+        if (this.canvas.pendingInputDataCheck) {
+            clearTimeout(this.canvas.pendingInputDataCheck);
+        }
+
+        this.canvas.pendingInputDataCheck = window.setTimeout(() => {
+            this.canvas.pendingInputDataCheck = null;
+            log.debug("Retrying input data check for mask...");
+            
+        }, 500); // Shorter delay for mask data retry
+    }
+
     scheduleDataCheck(): void {
         if (this.canvas.pendingDataCheck) {
             clearTimeout(this.canvas.pendingDataCheck);
@@ -494,59 +931,11 @@ export class CanvasIO {
     }
 
     convertTensorToImageData(tensor: any): ImageData | null {
-        try {
-            const shape = tensor.shape;
-            const height = shape[1];
-            const width = shape[2];
-            const channels = shape[3];
-
-            log.debug("Converting tensor:", {
-                shape: shape,
-                dataRange: {
-                    min: tensor.min_val,
-                    max: tensor.max_val
-                }
-            });
-
-            const imageData = new ImageData(width, height);
-            const data = new Uint8ClampedArray(width * height * 4);
-
-            const flatData = tensor.data;
-            const pixelCount = width * height;
-
-            for (let i = 0; i < pixelCount; i++) {
-                const pixelIndex = i * 4;
-                const tensorIndex = i * channels;
-
-                for (let c = 0; c < channels; c++) {
-                    const value = flatData[tensorIndex + c];
-
-                    const normalizedValue = (value - tensor.min_val) / (tensor.max_val - tensor.min_val);
-                    data[pixelIndex + c] = Math.round(normalizedValue * 255);
-                }
-
-                data[pixelIndex + 3] = 255;
-            }
-
-            imageData.data.set(data);
-            return imageData;
-        } catch (error) {
-            log.error("Error converting tensor:", error);
-            return null;
-        }
+        return tensorToImageData(tensor, 'rgb');
     }
 
     async createImageFromData(imageData: ImageData): Promise<HTMLImageElement> {
-        return new Promise((resolve, reject) => {
-            const { canvas, ctx } = createCanvas(imageData.width, imageData.height, '2d', { willReadFrequently: true });
-            if (!ctx) throw new Error("Could not create canvas context");
-            ctx.putImageData(imageData, 0, 0);
-
-            const img = new Image();
-            img.onload = () => resolve(img);
-            img.onerror = reject;
-            img.src = canvas.toDataURL();
-        });
+        return createImageFromImageData(imageData);
     }
 
     async processMaskData(maskData: any): Promise<void> {
@@ -613,12 +1002,7 @@ export class CanvasIO {
                 const newLayers: (Layer | null)[] = [];
 
                 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 img = await createImageFromSource(imageData);
                     
                     let processedImage = img;
                     
@@ -647,37 +1031,31 @@ export class CanvasIO {
     }
 
     async clipImageToShape(image: HTMLImageElement, shape: Shape): Promise<HTMLImageElement> {
-        return new Promise((resolve, reject) => {
-            const { canvas, ctx } = createCanvas(image.width, image.height);
-            if (!ctx) {
-                reject(new Error("Could not create canvas context for clipping"));
-                return;
-            }
+        const { canvas, ctx } = createCanvas(image.width, image.height);
+        if (!ctx) {
+            throw new Error("Could not create canvas context for clipping");
+        }
 
-            // Draw the image first
-            ctx.drawImage(image, 0, 0);
+        // Draw the image first
+        ctx.drawImage(image, 0, 0);
 
-            // Calculate custom shape position accounting for extensions
-            // Custom shape should maintain its relative position within the original canvas area
-            const ext = this.canvas.outputAreaExtensionEnabled ? this.canvas.outputAreaExtensions : { top: 0, bottom: 0, left: 0, right: 0 };
-            const shapeOffsetX = ext.left;  // Add left extension to maintain relative position
-            const shapeOffsetY = ext.top;   // Add top extension to maintain relative position
+        // Calculate custom shape position accounting for extensions
+        // Custom shape should maintain its relative position within the original canvas area
+        const ext = this.canvas.outputAreaExtensionEnabled ? this.canvas.outputAreaExtensions : { top: 0, bottom: 0, left: 0, right: 0 };
+        const shapeOffsetX = ext.left;  // Add left extension to maintain relative position
+        const shapeOffsetY = ext.top;   // Add top extension to maintain relative position
 
-            // Create a clipping mask using the shape with extension offset
-            ctx.globalCompositeOperation = 'destination-in';
-            ctx.beginPath();
-            ctx.moveTo(shape.points[0].x + shapeOffsetX, shape.points[0].y + shapeOffsetY);
-            for (let i = 1; i < shape.points.length; i++) {
-                ctx.lineTo(shape.points[i].x + shapeOffsetX, shape.points[i].y + shapeOffsetY);
-            }
-            ctx.closePath();
-            ctx.fill();
+        // Create a clipping mask using the shape with extension offset
+        ctx.globalCompositeOperation = 'destination-in';
+        ctx.beginPath();
+        ctx.moveTo(shape.points[0].x + shapeOffsetX, shape.points[0].y + shapeOffsetY);
+        for (let i = 1; i < shape.points.length; i++) {
+            ctx.lineTo(shape.points[i].x + shapeOffsetX, shape.points[i].y + shapeOffsetY);
+        }
+        ctx.closePath();
+        ctx.fill();
 
-            // Create a new image from the clipped canvas
-            const clippedImage = new Image();
-            clippedImage.onload = () => resolve(clippedImage);
-            clippedImage.onerror = () => reject(new Error("Failed to create clipped image"));
-            clippedImage.src = canvas.toDataURL();
-        });
+        // Create a new image from the clipped canvas
+        return await createImageFromSource(canvas.toDataURL());
     }
 }

src/CanvasInteractions.ts

@@ -10,15 +10,36 @@ interface MouseCoordinates {
     view: Point;
 }
 
+interface ModifierState {
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+}
+
+interface TransformOrigin {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    centerX: number;
+    centerY: number;
+    originalWidth?: number;
+    originalHeight?: number;
+    cropBounds?: { x: number; y: number; width: number; height: number };
+}
+
 interface InteractionState {
-    mode: 'none' | 'panning' | 'dragging' | 'resizing' | 'rotating' | 'drawingMask' | 'resizingCanvas' | 'movingCanvas' | 'potential-drag' | 'drawingShape';
+    mode: 'none' | 'panning' | 'dragging' | 'resizing' | 'rotating' | 'drawingMask' | 'resizingCanvas' | 'movingCanvas' | 'potential-drag' | 'drawingShape' | 'transformingOutputArea';
     panStart: Point;
     dragStart: Point;
-    transformOrigin: Partial<Layer> & { centerX?: number, centerY?: number };
+    transformOrigin: TransformOrigin | null;
     resizeHandle: string | null;
     resizeAnchor: Point;
     canvasResizeStart: Point;
     isCtrlPressed: boolean;
+    isMetaPressed: boolean;
     isAltPressed: boolean;
     isShiftPressed: boolean;
     isSPressed: boolean;
@@ -28,6 +49,8 @@ interface InteractionState {
     keyMovementInProgress: boolean;
     canvasResizeRect: { x: number, y: number, width: number, height: number } | null;
     canvasMoveRect: { x: number, y: number, width: number, height: number } | null;
+    outputAreaTransformHandle: string | null;
+    outputAreaTransformAnchor: Point;
 }
 
 export class CanvasInteractions {
@@ -35,17 +58,35 @@ export class CanvasInteractions {
     public interaction: InteractionState;
     private originalLayerPositions: Map<Layer, Point>;
 
+    // Bound event handlers to enable proper removeEventListener and avoid leaks
+    private onMouseDown = (e: MouseEvent) => this.handleMouseDown(e);
+    private onMouseMove = (e: MouseEvent) => this.handleMouseMove(e);
+    private onMouseUp = (e: MouseEvent) => this.handleMouseUp(e);
+    private onMouseEnter = (e: MouseEvent) => { this.canvas.isMouseOver = true; this.handleMouseEnter(e); };
+    private onMouseLeave = (e: MouseEvent) => { this.canvas.isMouseOver = false; this.handleMouseLeave(e); };
+    private onWheel = (e: WheelEvent) => this.handleWheel(e);
+    private onKeyDown = (e: KeyboardEvent) => this.handleKeyDown(e);
+    private onKeyUp = (e: KeyboardEvent) => this.handleKeyUp(e);
+    private onDragOver = (e: DragEvent) => this.handleDragOver(e);
+    private onDragEnter = (e: DragEvent) => this.handleDragEnter(e);
+    private onDragLeave = (e: DragEvent) => this.handleDragLeave(e);
+    private onDrop = (e: DragEvent) => { this.handleDrop(e); };
+    private onContextMenu = (e: MouseEvent) => this.handleContextMenu(e);
+    private onBlur = () => this.handleBlur();
+    private onPaste = (e: ClipboardEvent) => this.handlePasteEvent(e);
+
     constructor(canvas: Canvas) {
         this.canvas = canvas;
         this.interaction = {
             mode: 'none',
             panStart: { x: 0, y: 0 },
             dragStart: { x: 0, y: 0 },
-            transformOrigin: {},
+            transformOrigin: null,
             resizeHandle: null,
             resizeAnchor: { x: 0, y: 0 },
             canvasResizeStart: { x: 0, y: 0 },
             isCtrlPressed: false,
+            isMetaPressed: false,
             isAltPressed: false,
             isShiftPressed: false,
             isSPressed: false,
@@ -55,6 +96,8 @@ export class CanvasInteractions {
             keyMovementInProgress: false,
             canvasResizeRect: null,
             canvasMoveRect: null,
+            outputAreaTransformHandle: null,
+            outputAreaTransformAnchor: { x: 0, y: 0 },
         };
         this.originalLayerPositions = new Map();
     }
@@ -68,13 +111,21 @@ export class CanvasInteractions {
         };
     }
 
+    private getModifierState(e?: MouseEvent | WheelEvent | KeyboardEvent): ModifierState {
+        return {
+            ctrl: this.interaction.isCtrlPressed || (e as any)?.ctrlKey || false,
+            shift: this.interaction.isShiftPressed || (e as any)?.shiftKey || false,
+            alt: this.interaction.isAltPressed || (e as any)?.altKey || false,
+            meta: this.interaction.isMetaPressed || (e as any)?.metaKey || false,
+        };
+    }
+
     private preventEventDefaults(e: Event): void {
         e.preventDefault();
         e.stopPropagation();
     }
 
     private performZoomOperation(worldCoords: Point, zoomFactor: number): void {
-        const rect = this.canvas.canvas.getBoundingClientRect();
         const mouseBufferX = (worldCoords.x - this.canvas.viewport.x) * this.canvas.viewport.zoom;
         const mouseBufferY = (worldCoords.y - this.canvas.viewport.y) * this.canvas.viewport.zoom;
 
@@ -84,6 +135,11 @@ export class CanvasInteractions {
         this.canvas.viewport.x = worldCoords.x - (mouseBufferX / this.canvas.viewport.zoom);
         this.canvas.viewport.y = worldCoords.y - (mouseBufferY / this.canvas.viewport.zoom);
         
+        // Update stroke overlay if mask tool is drawing during zoom
+        if (this.canvas.maskTool.isDrawing) {
+            this.canvas.maskTool.handleViewportChange();
+        }
+        
         this.canvas.onViewportChange?.();
     }
 
@@ -106,34 +162,49 @@ export class CanvasInteractions {
     }
 
     setupEventListeners(): void {
-        this.canvas.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('mouseleave', this.handleMouseLeave.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('wheel', this.handleWheel.bind(this) as EventListener, { passive: false });
-        this.canvas.canvas.addEventListener('keydown', this.handleKeyDown.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('keyup', this.handleKeyUp.bind(this) as EventListener);
+        this.canvas.canvas.addEventListener('mousedown', this.onMouseDown as EventListener);
+        this.canvas.canvas.addEventListener('mousemove', this.onMouseMove as EventListener);
+        this.canvas.canvas.addEventListener('mouseup', this.onMouseUp as EventListener);
+        this.canvas.canvas.addEventListener('wheel', this.onWheel as EventListener, { passive: false });
+        this.canvas.canvas.addEventListener('keydown', this.onKeyDown as EventListener);
+        this.canvas.canvas.addEventListener('keyup', this.onKeyUp as EventListener);
 
         // Add a blur event listener to the window to reset key states
-        window.addEventListener('blur', this.handleBlur.bind(this));
+        window.addEventListener('blur', this.onBlur);
 
-        document.addEventListener('paste', this.handlePasteEvent.bind(this));
+        document.addEventListener('paste', this.onPaste as unknown as EventListener);
 
-        this.canvas.canvas.addEventListener('mouseenter', (e: MouseEvent) => {
-            this.canvas.isMouseOver = true;
-            this.handleMouseEnter(e);
-        });
-        this.canvas.canvas.addEventListener('mouseleave', (e: MouseEvent) => {
-            this.canvas.isMouseOver = false;
-            this.handleMouseLeave(e);
-        });
+        this.canvas.canvas.addEventListener('mouseenter', this.onMouseEnter as EventListener);
+        this.canvas.canvas.addEventListener('mouseleave', this.onMouseLeave as EventListener);
 
-        this.canvas.canvas.addEventListener('dragover', this.handleDragOver.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('dragenter', this.handleDragEnter.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('dragleave', this.handleDragLeave.bind(this) as EventListener);
-        this.canvas.canvas.addEventListener('drop', this.handleDrop.bind(this) as unknown as EventListener);
+        this.canvas.canvas.addEventListener('dragover', this.onDragOver as EventListener);
+        this.canvas.canvas.addEventListener('dragenter', this.onDragEnter as EventListener);
+        this.canvas.canvas.addEventListener('dragleave', this.onDragLeave as EventListener);
+        this.canvas.canvas.addEventListener('drop', this.onDrop as unknown as EventListener);
 
-        this.canvas.canvas.addEventListener('contextmenu', this.handleContextMenu.bind(this) as EventListener);
+        this.canvas.canvas.addEventListener('contextmenu', this.onContextMenu as EventListener);
+    }
+
+    teardownEventListeners(): void {
+        this.canvas.canvas.removeEventListener('mousedown', this.onMouseDown as EventListener);
+        this.canvas.canvas.removeEventListener('mousemove', this.onMouseMove as EventListener);
+        this.canvas.canvas.removeEventListener('mouseup', this.onMouseUp as EventListener);
+        this.canvas.canvas.removeEventListener('wheel', this.onWheel as EventListener);
+        this.canvas.canvas.removeEventListener('keydown', this.onKeyDown as EventListener);
+        this.canvas.canvas.removeEventListener('keyup', this.onKeyUp as EventListener);
+
+        window.removeEventListener('blur', this.onBlur);
+        document.removeEventListener('paste', this.onPaste as unknown as EventListener);
+
+        this.canvas.canvas.removeEventListener('mouseenter', this.onMouseEnter as EventListener);
+        this.canvas.canvas.removeEventListener('mouseleave', this.onMouseLeave as EventListener);
+
+        this.canvas.canvas.removeEventListener('dragover', this.onDragOver as EventListener);
+        this.canvas.canvas.removeEventListener('dragenter', this.onDragEnter as EventListener);
+        this.canvas.canvas.removeEventListener('dragleave', this.onDragLeave as EventListener);
+        this.canvas.canvas.removeEventListener('drop', this.onDrop as unknown as EventListener);
+
+        this.canvas.canvas.removeEventListener('contextmenu', this.onContextMenu as EventListener);
     }
 
     /**
@@ -171,15 +242,30 @@ export class CanvasInteractions {
         this.interaction.canvasMoveRect = null;
         this.interaction.hasClonedInDrag = false;
         this.interaction.transformingLayer = null;
+        this.interaction.outputAreaTransformHandle = null;
         this.canvas.canvas.style.cursor = 'default';
     }
 
     handleMouseDown(e: MouseEvent): void {
         this.canvas.canvas.focus();
         const coords = this.getMouseCoordinates(e);
+        const mods = this.getModifierState(e);
 
         if (this.interaction.mode === 'drawingMask') {
             this.canvas.maskTool.handleMouseDown(coords.world, coords.view);
+            // Don't render here - mask tool will handle its own drawing
+            return;
+        }
+
+        if (this.interaction.mode === 'transformingOutputArea') {
+            // Check if clicking on output area transform handle
+            const handle = this.getOutputAreaHandle(coords.world);
+            if (handle) {
+                this.startOutputAreaTransform(handle, coords.world);
+                return;
+            }
+            // If clicking outside, exit transform mode
+            this.interaction.mode = 'none';
             this.canvas.render();
             return;
         }
@@ -192,11 +278,11 @@ export class CanvasInteractions {
         // --- Ostateczna, poprawna kolejność sprawdzania ---
 
         // 1. Akcje globalne z modyfikatorami (mają najwyższy priorytet)
-        if (e.shiftKey && e.ctrlKey) {
+        if (mods.shift && mods.ctrl) {
             this.startCanvasMove(coords.world);
             return;
         }
-        if (e.shiftKey) {
+        if (mods.shift) {
             // Clear custom shape when starting canvas resize
             if (this.canvas.outputAreaShape) {
                 // If auto-apply shape mask is enabled, remove the mask before clearing the shape
@@ -222,7 +308,7 @@ export class CanvasInteractions {
             }
             return;
         }
-        if (e.button !== 0) { // Środkowy przycisk
+        if (e.button === 1) { // Środkowy przycisk
             this.startPanning(e);
             return;
         }
@@ -241,7 +327,7 @@ export class CanvasInteractions {
         }
         
         // 4. Domyślna akcja na tle (lewy przycisk bez modyfikatorów)
-        this.startPanningOrClearSelection(e);
+        this.startPanning(e, true); // clearSelection = true
     }
 
     handleMouseMove(e: MouseEvent): void {
@@ -264,7 +350,7 @@ export class CanvasInteractions {
         switch (this.interaction.mode) {
             case 'drawingMask':
                 this.canvas.maskTool.handleMouseMove(coords.world, coords.view);
-                this.canvas.render();
+                // Don't render during mask drawing - it's handled by mask tool internally
                 break;
             case 'panning':
                 this.panViewport(e);
@@ -284,8 +370,19 @@ export class CanvasInteractions {
             case 'movingCanvas':
                 this.updateCanvasMove(coords.world);
                 break;
+            case 'transformingOutputArea':
+                if (this.interaction.outputAreaTransformHandle) {
+                    this.resizeOutputAreaFromHandle(coords.world, e.shiftKey);
+                } else {
+                    this.updateOutputAreaTransformCursor(coords.world);
+                }
+                break;
             default:
                 this.updateCursor(coords.world);
+                // Update brush cursor on overlay if mask tool is active
+                if (this.canvas.maskTool.isActive) {
+                    this.canvas.canvasRenderer.drawMaskBrushCursor(coords.world);
+                }
                 break;
         }
 
@@ -300,6 +397,7 @@ export class CanvasInteractions {
         
         if (this.interaction.mode === 'drawingMask') {
             this.canvas.maskTool.handleMouseUp(coords.view);
+            // Render only once after drawing is complete
             this.canvas.render();
             return;
         }
@@ -311,11 +409,26 @@ export class CanvasInteractions {
             this.finalizeCanvasMove();
         }
 
+        if (this.interaction.mode === 'transformingOutputArea' && this.interaction.outputAreaTransformHandle) {
+            this.finalizeOutputAreaTransform();
+            return;
+        }
+
         // Log layer positions when dragging ends
         if (this.interaction.mode === 'dragging' && this.canvas.canvasSelection.selectedLayers.length > 0) {
             this.logDragCompletion(coords);
         }
 
+        // Handle end of crop bounds transformation before resetting interaction state
+        if (this.interaction.mode === 'resizing' && this.interaction.transformingLayer?.cropMode) {
+            this.canvas.canvasLayers.handleCropBoundsTransformEnd(this.interaction.transformingLayer);
+        }
+        
+        // Handle end of scale transformation (normal transform mode) before resetting interaction state
+        if (this.interaction.mode === 'resizing' && this.interaction.transformingLayer && !this.interaction.transformingLayer.cropMode) {
+            this.canvas.canvasLayers.handleScaleTransformEnd(this.interaction.transformingLayer);
+        }
+
         // 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;
@@ -387,8 +500,17 @@ export class CanvasInteractions {
             const zoomFactor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
             this.performZoomOperation(coords.world, zoomFactor);
         } else {
-            // Layer transformation when layers are selected
-            this.handleLayerWheelTransformation(e);
+            // Check if mouse is over any selected layer
+            const isOverSelectedLayer = this.isPointInSelectedLayers(coords.world.x, coords.world.y);
+            
+            if (isOverSelectedLayer) {
+                // Layer transformation when layers are selected and mouse is over selected layer
+                this.handleLayerWheelTransformation(e);
+            } else {
+                // Zoom operation when mouse is not over selected layers
+                const zoomFactor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+                this.performZoomOperation(coords.world, zoomFactor);
+            }
         }
         
         this.canvas.render();
@@ -398,14 +520,15 @@ export class CanvasInteractions {
     }
 
     private handleLayerWheelTransformation(e: WheelEvent): void {
+        const mods = this.getModifierState(e);
         const rotationStep = 5 * (e.deltaY > 0 ? -1 : 1);
         const direction = e.deltaY < 0 ? 1 : -1;
 
         this.canvas.canvasSelection.selectedLayers.forEach((layer: Layer) => {
-            if (e.shiftKey) {
-                this.handleLayerRotation(layer, e.ctrlKey, direction, rotationStep);
+            if (mods.shift) {
+                this.handleLayerRotation(layer, mods.ctrl, direction, rotationStep);
             } else {
-                this.handleLayerScaling(layer, e.ctrlKey, e.deltaY);
+                this.handleLayerScaling(layer, mods.ctrl, e.deltaY);
             }
         });
     }
@@ -445,11 +568,14 @@ export class CanvasInteractions {
             layer.height *= scaleFactor;
             layer.x += (oldWidth - layer.width) / 2;
             layer.y += (oldHeight - layer.height) / 2;
+            
+            // Handle wheel scaling end for layers with blend area
+            this.canvas.canvasLayers.handleWheelScalingEnd(layer);
         }
     }
 
     private calculateGridBasedScaling(oldHeight: number, deltaY: number): number {
-        const gridSize = 64;
+        const gridSize = 64; // Grid size - could be made configurable in the future
         const direction = deltaY > 0 ? -1 : 1;
         let targetHeight;
 
@@ -474,6 +600,7 @@ export class CanvasInteractions {
 
     handleKeyDown(e: KeyboardEvent): void {
         if (e.key === 'Control') this.interaction.isCtrlPressed = true;
+        if (e.key === 'Meta') this.interaction.isMetaPressed = true;
         if (e.key === 'Shift') this.interaction.isShiftPressed = true;
         if (e.key === 'Alt') {
             this.interaction.isAltPressed = true;
@@ -492,11 +619,12 @@ export class CanvasInteractions {
         }
         
         // Globalne skróty (Undo/Redo/Copy/Paste)
-        if (e.ctrlKey || e.metaKey) {
+        const mods = this.getModifierState(e);
+        if (mods.ctrl || mods.meta) {
             let handled = true;
             switch (e.key.toLowerCase()) {
                 case 'z':
-                    if (e.shiftKey) {
+                    if (mods.shift) {
                         this.canvas.redo();
                     } else {
                         this.canvas.undo();
@@ -523,7 +651,7 @@ export class CanvasInteractions {
 
         // Skróty kontekstowe (zależne od zaznaczenia)
         if (this.canvas.canvasSelection.selectedLayers.length > 0) {
-            const step = e.shiftKey ? 10 : 1;
+            const step = mods.shift ? 10 : 1;
             let needsRender = false;
             
             // Używamy e.code dla spójności i niezależności od układu klawiatury
@@ -558,6 +686,7 @@ export class CanvasInteractions {
 
     handleKeyUp(e: KeyboardEvent): void {
         if (e.key === 'Control') this.interaction.isCtrlPressed = false;
+        if (e.key === 'Meta') this.interaction.isMetaPressed = false;
         if (e.key === 'Shift') this.interaction.isShiftPressed = false;
         if (e.key === 'Alt') this.interaction.isAltPressed = false;
         if (e.key.toLowerCase() === 's') this.interaction.isSPressed = false;
@@ -577,6 +706,7 @@ export class CanvasInteractions {
     handleBlur(): void {
         log.debug('Window lost focus, resetting key states.');
         this.interaction.isCtrlPressed = false;
+        this.interaction.isMetaPressed = false;
         this.interaction.isAltPressed = false;
         this.interaction.isShiftPressed = false;
         this.interaction.isSPressed = false;
@@ -602,6 +732,12 @@ export class CanvasInteractions {
     }
 
     updateCursor(worldCoords: Point): void {
+        // If actively rotating, show grabbing cursor
+        if (this.interaction.mode === 'rotating') {
+            this.canvas.canvas.style.cursor = 'grabbing';
+            return;
+        }
+
         const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
 
         if (transformTarget) {
@@ -626,7 +762,10 @@ export class CanvasInteractions {
             width: layer.width, height: layer.height,
             rotation: layer.rotation,
             centerX: layer.x + layer.width / 2,
-            centerY: layer.y + layer.height / 2
+            centerY: layer.y + layer.height / 2,
+            originalWidth: layer.originalWidth,
+            originalHeight: layer.originalHeight,
+            cropBounds: layer.cropBounds ? { ...layer.cropBounds } : undefined
         };
         this.interaction.dragStart = {...worldCoords};
 
@@ -647,7 +786,9 @@ export class CanvasInteractions {
 
     prepareForDrag(layer: Layer, worldCoords: Point): void {
         // Zaktualizuj zaznaczenie, ale nie zapisuj stanu
-        if (this.interaction.isCtrlPressed) {
+        // Support both Ctrl (Windows/Linux) and Cmd (macOS) for multi-selection
+        const mods = this.getModifierState();
+        if (mods.ctrl || mods.meta) {
             const index = this.canvas.canvasSelection.selectedLayers.indexOf(layer);
             if (index === -1) {
                 this.canvas.canvasSelection.updateSelection([...this.canvas.canvasSelection.selectedLayers, layer]);
@@ -665,14 +806,13 @@ export class CanvasInteractions {
         this.interaction.dragStart = {...worldCoords};
     }
 
-    startPanningOrClearSelection(e: MouseEvent): void {
-        // Ta funkcja jest teraz wywoływana tylko gdy kliknięto na tło bez modyfikatorów.
-        // Domyślna akcja: wyczyść zaznaczenie i rozpocznij panoramowanie.
-        if (!this.interaction.isCtrlPressed) {
+    startPanning(e: MouseEvent, clearSelection: boolean = true): void {
+        // Unified panning method - can optionally clear selection
+        if (clearSelection && !this.interaction.isCtrlPressed) {
             this.canvas.canvasSelection.updateSelection([]);
         }
         this.interaction.mode = 'panning';
-        this.interaction.panStart = {x: e.clientX, y: e.clientY};
+        this.interaction.panStart = { x: e.clientX, y: e.clientY };
     }
 
     startCanvasResize(worldCoords: Point): void {
@@ -727,20 +867,18 @@ export class CanvasInteractions {
         this.canvas.saveState();
     }
 
-    startPanning(e: MouseEvent): void {
-        if (!this.interaction.isCtrlPressed) {
-            this.canvas.canvasSelection.updateSelection([]);
-        }
-        this.interaction.mode = 'panning';
-        this.interaction.panStart = { x: e.clientX, y: e.clientY };
-    }
-
     panViewport(e: MouseEvent): void {
         const dx = e.clientX - this.interaction.panStart.x;
         const dy = e.clientY - this.interaction.panStart.y;
         this.canvas.viewport.x -= dx / this.canvas.viewport.zoom;
         this.canvas.viewport.y -= dy / this.canvas.viewport.zoom;
         this.interaction.panStart = {x: e.clientX, y: e.clientY};
+        
+        // Update stroke overlay if mask tool is drawing during pan
+        if (this.canvas.maskTool.isDrawing) {
+            this.canvas.maskTool.handleViewportChange();
+        }
+        
         this.canvas.render();
         this.canvas.onViewportChange?.();
     }
@@ -797,66 +935,159 @@ export class CanvasInteractions {
 
         if (this.interaction.isCtrlPressed) {
             const snapThreshold = 10 / this.canvas.viewport.zoom;
-            const snappedMouseX = snapToGrid(mouseX);
-            if (Math.abs(mouseX - snappedMouseX) < snapThreshold) mouseX = snappedMouseX;
-            const snappedMouseY = snapToGrid(mouseY);
-            if (Math.abs(mouseY - snappedMouseY) < snapThreshold) mouseY = snappedMouseY;
+            mouseX = Math.abs(mouseX - snapToGrid(mouseX)) < snapThreshold ? snapToGrid(mouseX) : mouseX;
+            mouseY = Math.abs(mouseY - snapToGrid(mouseY)) < snapThreshold ? snapToGrid(mouseY) : mouseY;
         }
 
         const o = this.interaction.transformOrigin;
-        if (o.rotation === undefined || o.width === undefined || o.height === undefined || o.centerX === undefined || o.centerY === undefined) return;
+        if (!o) return;
+        
         const handle = this.interaction.resizeHandle;
         const anchor = this.interaction.resizeAnchor;
-
         const rad = o.rotation * Math.PI / 180;
         const cos = Math.cos(rad);
         const sin = Math.sin(rad);
 
+        // Vector from anchor to mouse
         const vecX = mouseX - anchor.x;
         const vecY = mouseY - anchor.y;
 
-        let newWidth = vecX * cos + vecY * sin;
-        let newHeight = vecY * cos - vecX * sin;
+        // Rotate vector to align with layer's local coordinates
+        let localVecX = vecX * cos + vecY * sin;
+        let localVecY = vecY * cos - vecX * sin;
 
-        if (isShiftPressed) {
-            const originalAspectRatio = o.width / o.height;
+        // Determine sign based on handle
+        const signX = handle?.includes('e') ? 1 : (handle?.includes('w') ? -1 : 0);
+        const signY = handle?.includes('s') ? 1 : (handle?.includes('n') ? -1 : 0);
+        
+        localVecX *= signX;
+        localVecY *= signY;
 
-            if (Math.abs(newWidth) > Math.abs(newHeight) * originalAspectRatio) {
-                newHeight = (Math.sign(newHeight) || 1) * Math.abs(newWidth) / originalAspectRatio;
-            } else {
-                newWidth = (Math.sign(newWidth) || 1) * Math.abs(newHeight) * originalAspectRatio;
+        // If not a corner handle, keep original dimension
+        if (signX === 0) localVecX = o.width;
+        if (signY === 0) localVecY = o.height;
+
+        if (layer.cropMode && o.cropBounds && o.originalWidth && o.originalHeight) {
+            // CROP MODE: Calculate delta based on mouse movement and apply to cropBounds.
+            
+            // Calculate mouse movement since drag start, in the layer's local coordinate system.
+            const dragStartX_local = this.interaction.dragStart.x - (o.centerX ?? 0);
+            const dragStartY_local = this.interaction.dragStart.y - (o.centerY ?? 0);
+            const mouseX_local = mouseX - (o.centerX ?? 0);
+            const mouseY_local = mouseY - (o.centerY ?? 0);
+            
+            // Rotate mouse delta into the layer's unrotated frame
+            const deltaX_world = mouseX_local - dragStartX_local;
+            const deltaY_world = mouseY_local - dragStartY_local;
+            let mouseDeltaX_local = deltaX_world * cos + deltaY_world * sin;
+            let mouseDeltaY_local = deltaY_world * cos - deltaX_world * sin;
+
+            if (layer.flipH) {
+                mouseDeltaX_local *= -1;
             }
+            if (layer.flipV) {
+                mouseDeltaY_local *= -1;
+            }
+            
+            // Convert the on-screen mouse delta to an image-space delta.
+            const screenToImageScaleX = o.originalWidth / o.width;
+            const screenToImageScaleY = o.originalHeight / o.height;
+            
+            const delta_image_x = mouseDeltaX_local * screenToImageScaleX;
+            const delta_image_y = mouseDeltaY_local * screenToImageScaleY;
+            
+            let newCropBounds = { ...o.cropBounds }; // Start with the bounds from the beginning of the drag
+
+            // Apply the image-space delta to the appropriate edges of the crop bounds
+            const isFlippedH = layer.flipH;
+            const isFlippedV = layer.flipV;
+            
+            if (handle?.includes('w')) {
+                if (isFlippedH) newCropBounds.width += delta_image_x;
+                else {
+                    newCropBounds.x += delta_image_x;
+                    newCropBounds.width -= delta_image_x;
+                }
+            }
+            if (handle?.includes('e')) {
+                if (isFlippedH) {
+                    newCropBounds.x += delta_image_x;
+                    newCropBounds.width -= delta_image_x;
+                } else newCropBounds.width += delta_image_x;
+            }
+            if (handle?.includes('n')) {
+                if (isFlippedV) newCropBounds.height += delta_image_y;
+                else {
+                    newCropBounds.y += delta_image_y;
+                    newCropBounds.height -= delta_image_y;
+                }
+            }
+            if (handle?.includes('s')) {
+                if (isFlippedV) {
+                    newCropBounds.y += delta_image_y;
+                    newCropBounds.height -= delta_image_y;
+                } else newCropBounds.height += delta_image_y;
+            }
+			
+			// Clamp crop bounds to stay within the original image and maintain minimum size
+            if (newCropBounds.width < 1) {
+                if (handle?.includes('w')) newCropBounds.x = o.cropBounds.x + o.cropBounds.width -1;
+                newCropBounds.width = 1;
+            }
+            if (newCropBounds.height < 1) {
+                if (handle?.includes('n')) newCropBounds.y = o.cropBounds.y + o.cropBounds.height - 1;
+                newCropBounds.height = 1;
+            }
+            if (newCropBounds.x < 0) {
+                newCropBounds.width += newCropBounds.x;
+                newCropBounds.x = 0;
+            }
+            if (newCropBounds.y < 0) {
+                newCropBounds.height += newCropBounds.y;
+                newCropBounds.y = 0;
+            }
+            if (newCropBounds.x + newCropBounds.width > o.originalWidth) {
+                newCropBounds.width = o.originalWidth - newCropBounds.x;
+            }
+            if (newCropBounds.y + newCropBounds.height > o.originalHeight) {
+                newCropBounds.height = o.originalHeight - newCropBounds.y;
+            }
+
+            layer.cropBounds = newCropBounds;
+
+        } else {
+            // TRANSFORM MODE: Resize the layer's main transform frame
+            let newWidth = localVecX;
+            let newHeight = localVecY;
+            
+            if (isShiftPressed) {
+                const originalAspectRatio = o.width / o.height;
+                if (Math.abs(newWidth) > Math.abs(newHeight) * originalAspectRatio) {
+                    newHeight = (Math.sign(newHeight) || 1) * Math.abs(newWidth) / originalAspectRatio;
+                } else {
+                    newWidth = (Math.sign(newWidth) || 1) * Math.abs(newHeight) * originalAspectRatio;
+                }
+            }
+
+            if (newWidth < 10) newWidth = 10;
+            if (newHeight < 10) newHeight = 10;
+            
+            layer.width = newWidth;
+            layer.height = newHeight;
+            
+            // Update position to keep anchor point fixed
+            const deltaW = layer.width - o.width;
+            const deltaH = layer.height - o.height;
+            const shiftX = (deltaW / 2) * signX;
+            const shiftY = (deltaH / 2) * signY;
+            const worldShiftX = shiftX * cos - shiftY * sin;
+            const worldShiftY = shiftX * sin + shiftY * cos;
+            const newCenterX = o.centerX + worldShiftX;
+            const newCenterY = o.centerY + worldShiftY;
+            layer.x = newCenterX - layer.width / 2;
+            layer.y = newCenterY - layer.height / 2;
         }
 
-        let signX = handle?.includes('e') ? 1 : (handle?.includes('w') ? -1 : 0);
-        let signY = handle?.includes('s') ? 1 : (handle?.includes('n') ? -1 : 0);
-
-        newWidth *= signX;
-        newHeight *= signY;
-
-        if (signX === 0) newWidth = o.width;
-        if (signY === 0) newHeight = o.height;
-
-        if (newWidth < 10) newWidth = 10;
-        if (newHeight < 10) newHeight = 10;
-
-        layer.width = newWidth;
-        layer.height = newHeight;
-
-        const deltaW = newWidth - o.width;
-        const deltaH = newHeight - o.height;
-
-        const shiftX = (deltaW / 2) * signX;
-        const shiftY = (deltaH / 2) * signY;
-
-        const worldShiftX = shiftX * cos - shiftY * sin;
-        const worldShiftY = shiftX * sin + shiftY * cos;
-
-        const newCenterX = o.centerX + worldShiftX;
-        const newCenterY = o.centerY + worldShiftY;
-
-        layer.x = newCenterX - layer.width / 2;
-        layer.y = newCenterY - layer.height / 2;
         this.canvas.render();
     }
 
@@ -865,7 +1096,7 @@ export class CanvasInteractions {
         if (!layer) return;
 
         const o = this.interaction.transformOrigin;
-        if (o.rotation === undefined || o.centerX === undefined || o.centerY === undefined) return;
+        if (!o) return;
         const startAngle = Math.atan2(this.interaction.dragStart.y - o.centerY, this.interaction.dragStart.x - o.centerX);
         const currentAngle = Math.atan2(worldCoords.y - o.centerY, worldCoords.x - o.centerX);
         let angleDiff = (currentAngle - startAngle) * 180 / Math.PI;
@@ -1112,4 +1343,189 @@ export class CanvasInteractions {
         await this.canvas.canvasLayers.clipboardManager.handlePaste('mouse', preference);
     }
 
+    // New methods for output area transformation
+    public activateOutputAreaTransform(): void {
+        // Clear any existing interaction state before starting transform
+        this.resetInteractionState();
+        
+        // Deactivate any active tools that might conflict
+        if (this.canvas.shapeTool.isActive) {
+            this.canvas.shapeTool.deactivate();
+        }
+        if (this.canvas.maskTool.isActive) {
+            this.canvas.maskTool.deactivate();
+        }
+        
+        // Clear selection to avoid confusion
+        this.canvas.canvasSelection.updateSelection([]);
+        
+        // Set transform mode
+        this.interaction.mode = 'transformingOutputArea';
+        this.canvas.render();
+    }
+
+    private getOutputAreaHandle(worldCoords: Point): string | null {
+        const bounds = this.canvas.outputAreaBounds;
+        const threshold = 10 / this.canvas.viewport.zoom;
+        
+        // Define handle positions
+        const handles = {
+            'nw': { x: bounds.x, y: bounds.y },
+            'n': { x: bounds.x + bounds.width / 2, y: bounds.y },
+            'ne': { x: bounds.x + bounds.width, y: bounds.y },
+            'e': { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+            'se': { x: bounds.x + bounds.width, y: bounds.y + bounds.height },
+            's': { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height },
+            'sw': { x: bounds.x, y: bounds.y + bounds.height },
+            'w': { x: bounds.x, y: bounds.y + bounds.height / 2 },
+        };
+
+        for (const [name, pos] of Object.entries(handles)) {
+            const dx = worldCoords.x - pos.x;
+            const dy = worldCoords.y - pos.y;
+            if (Math.sqrt(dx * dx + dy * dy) < threshold) {
+                return name;
+            }
+        }
+
+        return null;
+    }
+
+    private startOutputAreaTransform(handle: string, worldCoords: Point): void {
+        this.interaction.outputAreaTransformHandle = handle;
+        this.interaction.dragStart = { ...worldCoords };
+        
+        const bounds = this.canvas.outputAreaBounds;
+        this.interaction.transformOrigin = {
+            x: bounds.x,
+            y: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+            rotation: 0,
+            centerX: bounds.x + bounds.width / 2,
+            centerY: bounds.y + bounds.height / 2
+        };
+
+        // Set anchor point (opposite corner for resize)
+        const anchorMap: { [key: string]: Point } = {
+            'nw': { x: bounds.x + bounds.width, y: bounds.y + bounds.height },
+            'n': { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height },
+            'ne': { x: bounds.x, y: bounds.y + bounds.height },
+            'e': { x: bounds.x, y: bounds.y + bounds.height / 2 },
+            'se': { x: bounds.x, y: bounds.y },
+            's': { x: bounds.x + bounds.width / 2, y: bounds.y },
+            'sw': { x: bounds.x + bounds.width, y: bounds.y },
+            'w': { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+        };
+        
+        this.interaction.outputAreaTransformAnchor = anchorMap[handle];
+    }
+
+    private resizeOutputAreaFromHandle(worldCoords: Point, isShiftPressed: boolean): void {
+        const o = this.interaction.transformOrigin;
+        if (!o) return;
+        
+        const handle = this.interaction.outputAreaTransformHandle;
+        const anchor = this.interaction.outputAreaTransformAnchor;
+        
+        let newX = o.x;
+        let newY = o.y;
+        let newWidth = o.width;
+        let newHeight = o.height;
+
+        // Calculate new dimensions based on handle
+        if (handle?.includes('w')) {
+            const deltaX = worldCoords.x - anchor.x;
+            newWidth = Math.abs(deltaX);
+            newX = Math.min(worldCoords.x, anchor.x);
+        }
+        if (handle?.includes('e')) {
+            const deltaX = worldCoords.x - anchor.x;
+            newWidth = Math.abs(deltaX);
+            newX = Math.min(worldCoords.x, anchor.x);
+        }
+        if (handle?.includes('n')) {
+            const deltaY = worldCoords.y - anchor.y;
+            newHeight = Math.abs(deltaY);
+            newY = Math.min(worldCoords.y, anchor.y);
+        }
+        if (handle?.includes('s')) {
+            const deltaY = worldCoords.y - anchor.y;
+            newHeight = Math.abs(deltaY);
+            newY = Math.min(worldCoords.y, anchor.y);
+        }
+
+        // Maintain aspect ratio if shift is held
+        if (isShiftPressed && o.width > 0 && o.height > 0) {
+            const aspectRatio = o.width / o.height;
+            if (handle === 'n' || handle === 's') {
+                newWidth = newHeight * aspectRatio;
+            } else if (handle === 'e' || handle === 'w') {
+                newHeight = newWidth / aspectRatio;
+            } else {
+                // Corner handles
+                const proposedRatio = newWidth / newHeight;
+                if (proposedRatio > aspectRatio) {
+                    newHeight = newWidth / aspectRatio;
+                } else {
+                    newWidth = newHeight * aspectRatio;
+                }
+            }
+        }
+
+        // Snap to grid if Ctrl is held
+        if (this.interaction.isCtrlPressed) {
+            newX = snapToGrid(newX);
+            newY = snapToGrid(newY);
+            newWidth = snapToGrid(newWidth);
+            newHeight = snapToGrid(newHeight);
+        }
+
+        // Apply minimum size
+        if (newWidth < 10) newWidth = 10;
+        if (newHeight < 10) newHeight = 10;
+
+        // Update output area bounds temporarily for preview
+        this.canvas.outputAreaBounds = {
+            x: newX,
+            y: newY,
+            width: newWidth,
+            height: newHeight
+        };
+
+        this.canvas.render();
+    }
+
+    private updateOutputAreaTransformCursor(worldCoords: Point): void {
+        const handle = this.getOutputAreaHandle(worldCoords);
+        
+        if (handle) {
+            const cursorMap: { [key: string]: string } = {
+                'n': 'ns-resize', 's': 'ns-resize',
+                'e': 'ew-resize', 'w': 'ew-resize',
+                'nw': 'nwse-resize', 'se': 'nwse-resize',
+                'ne': 'nesw-resize', 'sw': 'nesw-resize',
+            };
+            this.canvas.canvas.style.cursor = cursorMap[handle] || 'default';
+        } else {
+            this.canvas.canvas.style.cursor = 'default';
+        }
+    }
+
+    private finalizeOutputAreaTransform(): void {
+        const bounds = this.canvas.outputAreaBounds;
+        
+        // Update canvas size and mask tool
+        this.canvas.updateOutputAreaSize(bounds.width, bounds.height);
+        
+        // Update mask canvas for new output area
+        this.canvas.maskTool.updateMaskCanvasForOutputArea();
+        
+        // Save state
+        this.canvas.saveState();
+        
+        // Reset transform handle but keep transform mode active
+        this.interaction.outputAreaTransformHandle = null;
+    }
+
 }

src/CanvasLayersPanel.ts

@@ -1,6 +1,7 @@
 import { createModuleLogger } from "./utils/LoggerUtils.js";
 import { iconLoader, LAYERFORGE_TOOLS } from "./utils/IconLoader.js";
 import { createCanvas } from "./utils/CommonUtils.js";
+import { addStylesheet, getUrl } from "./utils/ResourceManager.js";
 import type { Canvas } from './Canvas';
 import type { Layer } from './types';
 
@@ -33,6 +34,9 @@ export class CanvasLayersPanel {
         // Preload icons
         this.initializeIcons();
 
+        // Load CSS for layers panel
+        addStylesheet(getUrl('./css/layers_panel.css'));
+
         log.info('CanvasLayersPanel initialized');
     }
 
@@ -47,23 +51,16 @@ export class CanvasLayersPanel {
 
     private createIconElement(toolName: string, size: number = 16): HTMLElement {
         const iconContainer = document.createElement('div');
-        iconContainer.style.cssText = `
-            width: ${size}px;
-            height: ${size}px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        `;
+        iconContainer.className = 'icon-container';
+        iconContainer.style.width = `${size}px`;
+        iconContainer.style.height = `${size}px`;
 
         const icon = iconLoader.getIcon(toolName);
         if (icon) {
             if (icon instanceof HTMLImageElement) {
                 const img = icon.cloneNode() as HTMLImageElement;
-                img.style.cssText = `
-                    width: ${size}px;
-                    height: ${size}px;
-                    filter: brightness(0) invert(1);
-                `;
+                img.style.width = `${size}px`;
+                img.style.height = `${size}px`;
                 iconContainer.appendChild(img);
             } else if (icon instanceof HTMLCanvasElement) {
                 const { canvas, ctx } = createCanvas(size, size);
@@ -74,9 +71,9 @@ export class CanvasLayersPanel {
             }
         } else {
             // Fallback text
+            iconContainer.classList.add('fallback-text');
             iconContainer.textContent = toolName.charAt(0).toUpperCase();
             iconContainer.style.fontSize = `${size * 0.6}px`;
-            iconContainer.style.color = '#ffffff';
         }
 
         return iconContainer;
@@ -88,25 +85,16 @@ export class CanvasLayersPanel {
         } else {
             // Create a "hidden" version of the visibility icon
             const iconContainer = document.createElement('div');
-            iconContainer.style.cssText = `
-                width: 16px;
-                height: 16px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                opacity: 0.5;
-            `;
+            iconContainer.className = 'icon-container visibility-hidden';
+            iconContainer.style.width = '16px';
+            iconContainer.style.height = '16px';
 
             const icon = iconLoader.getIcon(LAYERFORGE_TOOLS.VISIBILITY);
             if (icon) {
                 if (icon instanceof HTMLImageElement) {
                     const img = icon.cloneNode() as HTMLImageElement;
-                    img.style.cssText = `
-                        width: 16px;
-                        height: 16px;
-                        filter: brightness(0) invert(1);
-                        opacity: 0.3;
-                    `;
+                    img.style.width = '16px';
+                    img.style.height = '16px';
                     iconContainer.appendChild(img);
                 } else if (icon instanceof HTMLCanvasElement) {
                     const { canvas, ctx } = createCanvas(16, 16);
@@ -118,9 +106,9 @@ export class CanvasLayersPanel {
                 }
             } else {
                 // Fallback
+                iconContainer.classList.add('fallback-text');
                 iconContainer.textContent = 'H';
                 iconContainer.style.fontSize = '10px';
-                iconContainer.style.color = '#888888';
             }
 
             return iconContainer;
@@ -133,6 +121,7 @@ export class CanvasLayersPanel {
         this.container.tabIndex = 0; // Umożliwia fokus na panelu
         this.container.innerHTML = `
             <div class="layers-panel-header">
+                <div class="master-visibility-toggle" title="Toggle all layers visibility"></div>
                 <span class="layers-panel-title">Layers</span>
                 <div class="layers-panel-controls">
                     <button class="layers-btn" id="delete-layer-btn" title="Delete layer"></button>
@@ -144,11 +133,10 @@ export class CanvasLayersPanel {
         `;
 
         this.layersContainer = this.container.querySelector<HTMLElement>('#layers-container');
-
-        this.injectStyles();
         
         // Setup event listeners dla przycisków
         this.setupControlButtons();
+        this.setupMasterVisibilityToggle();
 
         // Dodaj listener dla klawiatury, aby usuwanie działało z panelu
         this.container.addEventListener('keydown', (e: KeyboardEvent) => {
@@ -163,218 +151,10 @@ export class CanvasLayersPanel {
         return this.container;
     }
 
-    injectStyles(): void {
-        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;
-            }
-
-            .layer-visibility-toggle {
-                width: 20px;
-                height: 20px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                border-radius: 2px;
-                font-size: 14px;
-                flex-shrink: 0;
-                transition: background-color 0.15s ease;
-            }
-
-            .layer-visibility-toggle:hover {
-                background: rgba(255, 255, 255, 0.1);
-            }
-        `;
-        
-        document.head.appendChild(style);
-        log.debug('Styles injected');
-    }
 
     setupControlButtons(): void {
         if (!this.container) return;
-        const deleteBtn = this.container.querySelector('#delete-layer-btn');
+        const deleteBtn = this.container.querySelector('#delete-layer-btn') as HTMLButtonElement;
 
         // Add delete icon to button
         if (deleteBtn) {
@@ -386,8 +166,79 @@ export class CanvasLayersPanel {
             log.info('Delete layer button clicked');
             this.deleteSelectedLayers();
         });
+
+        // Initial button state update
+        this.updateButtonStates();
     }
 
+    setupMasterVisibilityToggle(): void {
+        if (!this.container) return;
+        const toggleContainer = this.container.querySelector('.master-visibility-toggle') as HTMLElement;
+        if (!toggleContainer) return;
+
+        const updateToggleState = () => {
+            const total = this.canvas.layers.length;
+            const visibleCount = this.canvas.layers.filter(l => l.visible).length;
+            toggleContainer.innerHTML = '';
+
+            const checkboxContainer = document.createElement('div');
+            checkboxContainer.className = 'checkbox-container';
+
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.id = 'master-visibility-checkbox';
+
+            const customCheckbox = document.createElement('span');
+            customCheckbox.className = 'custom-checkbox';
+
+            checkboxContainer.appendChild(checkbox);
+            checkboxContainer.appendChild(customCheckbox);
+
+            if (visibleCount === 0) {
+                checkbox.checked = false;
+                checkbox.indeterminate = false;
+                customCheckbox.classList.remove('checked', 'indeterminate');
+            } else if (visibleCount === total) {
+                checkbox.checked = true;
+                checkbox.indeterminate = false;
+                customCheckbox.classList.add('checked');
+                customCheckbox.classList.remove('indeterminate');
+            } else {
+                checkbox.checked = false;
+                checkbox.indeterminate = true;
+                customCheckbox.classList.add('indeterminate');
+                customCheckbox.classList.remove('checked');
+            }
+
+            checkboxContainer.addEventListener('click', (e) => {
+                e.stopPropagation();
+                let newVisible: boolean;
+                if (checkbox.indeterminate) {
+                    newVisible = false; // hide all when mixed
+                } else if (checkbox.checked) {
+                    newVisible = false; // toggle to hide all
+                } else {
+                    newVisible = true; // toggle to show all
+                }
+
+                this.canvas.layers.forEach(layer => {
+                    layer.visible = newVisible;
+                });
+                this.canvas.render();
+                this.canvas.requestSaveState();
+                updateToggleState();
+                this.renderLayers();
+            });
+
+            toggleContainer.appendChild(checkboxContainer);
+        };
+
+        updateToggleState();
+        this._updateMasterVisibilityToggle = updateToggleState;
+    }
+
+    private _updateMasterVisibilityToggle?: () => void;
+
     renderLayers(): void {
         if (!this.layersContainer) {
             log.warn('Layers container not initialized');
@@ -405,10 +256,11 @@ export class CanvasLayersPanel {
 
         sortedLayers.forEach((layer: Layer, index: number) => {
             const layerElement = this.createLayerElement(layer, index);
-            if(this.layersContainer)
+            if (this.layersContainer)
                 this.layersContainer.appendChild(layerElement);
         });
 
+        if (this._updateMasterVisibilityToggle) this._updateMasterVisibilityToggle();
         log.debug(`Rendered ${sortedLayers.length} layers`);
     }
 
@@ -495,6 +347,7 @@ export class CanvasLayersPanel {
                 const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l: Layer) => l !== layer);
                 this.canvas.updateSelection(newSelection);
                 this.updateSelectionAppearance();
+                this.updateButtonStates();
             }
         });
 
@@ -532,7 +385,8 @@ export class CanvasLayersPanel {
         this.canvas.updateSelectionLogic(layer, isCtrlPressed, isShiftPressed, index);
         
         // Aktualizuj tylko wygląd (klasy CSS), bez niszczenia DOM
-        this.updateSelectionAppearance(); 
+        this.updateSelectionAppearance();
+        this.updateButtonStates();
 
         log.debug(`Layer clicked: ${layer.name}, selection count: ${this.canvas.canvasSelection.selectedLayers.length}`);
     }
@@ -751,12 +605,32 @@ export class CanvasLayersPanel {
         });
     }
 
+    /**
+     * Aktualizuje stan przycisków w zależności od zaznaczenia warstw
+     */
+    updateButtonStates(): void {
+        if (!this.container) return;
+        
+        const deleteBtn = this.container.querySelector('#delete-layer-btn') as HTMLButtonElement;
+        const hasSelectedLayers = this.canvas.canvasSelection.selectedLayers.length > 0;
+        
+        if (deleteBtn) {
+            deleteBtn.disabled = !hasSelectedLayers;
+            deleteBtn.title = hasSelectedLayers 
+                ? `Delete ${this.canvas.canvasSelection.selectedLayers.length} selected layer(s)`
+                : 'No layers selected';
+        }
+        
+        log.debug(`Button states updated - delete button ${hasSelectedLayers ? 'enabled' : 'disabled'}`);
+    }
+
     /**
      * Aktualizuje panel gdy zmieni się zaznaczenie (wywoływane z zewnątrz).
      * Zamiast pełnego renderowania, tylko aktualizujemy wygląd.
      */
     onSelectionChanged(): void {
         this.updateSelectionAppearance();
+        this.updateButtonStates();
     }
 
     destroy(): void {

src/CanvasRenderer.ts

@@ -8,12 +8,19 @@ export class CanvasRenderer {
     lastRenderTime: any;
     renderAnimationFrame: any;
     renderInterval: any;
+    // Overlay used to preview in-progress mask strokes (separate from cursor overlay)
+    strokeOverlayCanvas!: HTMLCanvasElement;
+    strokeOverlayCtx!: CanvasRenderingContext2D;
     constructor(canvas: any) {
         this.canvas = canvas;
         this.renderAnimationFrame = null;
         this.lastRenderTime = 0;
         this.renderInterval = 1000 / 60;
         this.isDirty = false;
+        
+        // Initialize overlay canvases
+        this.initOverlay();
+        this.initStrokeOverlay();
     }
 
     /**
@@ -141,9 +148,11 @@ export class CanvasRenderer {
             ctx.save();
 
             if (this.canvas.maskTool.isActive) {
+                // In draw mask mode, use the previewOpacity value from the slider
                 ctx.globalCompositeOperation = 'source-over';
-                ctx.globalAlpha = 0.5;
+                ctx.globalAlpha = this.canvas.maskTool.previewOpacity;
             } else {
+                // When not in draw mask mode, show mask at full opacity
                 ctx.globalCompositeOperation = 'source-over';
                 ctx.globalAlpha = 1.0;
             }
@@ -186,6 +195,7 @@ export class CanvasRenderer {
         this.renderInteractionElements(ctx);
         this.canvas.shapeTool.render(ctx);
         this.drawMaskAreaBounds(ctx); // Draw mask area bounds when mask tool is active
+        this.renderOutputAreaTransformHandles(ctx); // Draw output area transform handles
         this.renderLayerInfo(ctx);
         
         // Update custom shape menu position and visibility
@@ -205,6 +215,12 @@ export class CanvasRenderer {
         }
         this.canvas.ctx.drawImage(this.canvas.offscreenCanvas, 0, 0);
 
+        // Ensure overlay canvases are in DOM and properly sized
+        this.addOverlayToDOM();
+        this.updateOverlaySize();
+        this.addStrokeOverlayToDOM();
+        this.updateStrokeOverlaySize();
+
         // Update Batch Preview UI positions
         if (this.canvas.batchPreviewManagers && this.canvas.batchPreviewManagers.length > 0) {
             this.canvas.batchPreviewManagers.forEach((manager: any) => {
@@ -532,46 +548,89 @@ export class CanvasRenderer {
     drawSelectionFrame(ctx: any, layer: any) {
         const lineWidth = 2 / this.canvas.viewport.zoom;
         const handleRadius = 5 / this.canvas.viewport.zoom;
-        ctx.strokeStyle = '#00ff00';
-        ctx.lineWidth = lineWidth;
+
+        if (layer.cropMode && layer.cropBounds && layer.originalWidth) {
+            // --- CROP MODE ---
+            ctx.lineWidth = lineWidth;
+
+            // 1. Draw dashed blue line for the full transform frame (the "original size" container)
+            ctx.strokeStyle = '#007bff';
+            ctx.setLineDash([8 / this.canvas.viewport.zoom, 8 / this.canvas.viewport.zoom]);
+            ctx.strokeRect(-layer.width / 2, -layer.height / 2, layer.width, layer.height);
+            ctx.setLineDash([]);
+
+            // 2. Draw solid blue line for the crop bounds
+            const layerScaleX = layer.width / layer.originalWidth;
+            const layerScaleY = layer.height / layer.originalHeight;
+            const s = layer.cropBounds;
+            
+            const cropRectX = (-layer.width / 2) + (s.x * layerScaleX);
+            const cropRectY = (-layer.height / 2) + (s.y * layerScaleY);
+            const cropRectW = s.width * layerScaleX;
+            const cropRectH = s.height * layerScaleY;
+
+            ctx.strokeStyle = '#007bff'; // Solid blue
+            this.drawAdaptiveLine(ctx, cropRectX, cropRectY, cropRectX + cropRectW, cropRectY, layer); // Top
+            this.drawAdaptiveLine(ctx, cropRectX + cropRectW, cropRectY, cropRectX + cropRectW, cropRectY + cropRectH, layer); // Right
+            this.drawAdaptiveLine(ctx, cropRectX + cropRectW, cropRectY + cropRectH, cropRectX, cropRectY + cropRectH, layer); // Bottom
+            this.drawAdaptiveLine(ctx, cropRectX, cropRectY + cropRectH, cropRectX, cropRectY, layer); // Left
+
+        } else {
+            // --- TRANSFORM MODE ---
+            ctx.strokeStyle = '#00ff00'; // Green
+            ctx.lineWidth = lineWidth;
+            const halfW = layer.width / 2;
+            const halfH = layer.height / 2;
+
+            // Draw adaptive solid green line for transform frame
+            this.drawAdaptiveLine(ctx, -halfW, -halfH, halfW, -halfH, layer);
+            this.drawAdaptiveLine(ctx, halfW, -halfH, halfW, halfH, layer);
+            this.drawAdaptiveLine(ctx, halfW, halfH, -halfW, halfH, layer);
+            this.drawAdaptiveLine(ctx, -halfW, halfH, -halfW, -halfH, layer);
+
+            // Draw line to rotation handle
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            const startY = layer.flipV ? halfH : -halfH;
+            const endY = startY + (layer.flipV ? 1 : -1) * (20 / this.canvas.viewport.zoom);
+            ctx.moveTo(0, startY);
+            ctx.lineTo(0, endY);
+            ctx.stroke();
+        }
         
-        // Rysuj ramkę z adaptacyjnymi liniami (ciągłe/przerywane w zależności od przykrycia)
-        const halfW = layer.width / 2;
-        const halfH = layer.height / 2;
-        
-        // Górna krawędź
-        this.drawAdaptiveLine(ctx, -halfW, -halfH, halfW, -halfH, layer);
-        // Prawa krawędź
-        this.drawAdaptiveLine(ctx, halfW, -halfH, halfW, halfH, layer);
-        // Dolna krawędź
-        this.drawAdaptiveLine(ctx, halfW, halfH, -halfW, halfH, layer);
-        // Lewa krawędź
-        this.drawAdaptiveLine(ctx, -halfW, halfH, -halfW, -halfH, layer);
-        
-        // Rysuj linię do uchwytu rotacji (zawsze ciągła)
-        ctx.setLineDash([]);
-        ctx.beginPath();
-        ctx.moveTo(0, -layer.height / 2);
-        ctx.lineTo(0, -layer.height / 2 - 20 / this.canvas.viewport.zoom);
-        ctx.stroke();
-        
-        // Rysuj uchwyty
+        // --- DRAW HANDLES (Unified Logic) ---
         const handles = this.canvas.canvasLayers.getHandles(layer);
         ctx.fillStyle = '#ffffff';
         ctx.strokeStyle = '#000000';
         ctx.lineWidth = 1 / this.canvas.viewport.zoom;
 
+        const centerX = layer.x + layer.width / 2;
+        const centerY = layer.y + layer.height / 2;
+
         for (const key in handles) {
+            // Skip rotation handle in crop mode
+            if (layer.cropMode && key === 'rot') continue;
+            
             const point = handles[key];
-            ctx.beginPath();
-            const localX = point.x - (layer.x + layer.width / 2);
-            const localY = point.y - (layer.y + layer.height / 2);
+            // The handle position is already in world space.
+            // We need to convert it to the layer's local, un-rotated space.
+            const dx = point.x - centerX;
+            const dy = point.y - centerY;
 
+            // "Un-rotate" the position to get it in the layer's local, un-rotated space
             const rad = -layer.rotation * Math.PI / 180;
-            const rotatedX = localX * Math.cos(rad) - localY * Math.sin(rad);
-            const rotatedY = localX * Math.sin(rad) + localY * Math.cos(rad);
+            const cos = Math.cos(rad);
+            const sin = Math.sin(rad);
+            const localX = dx * cos - dy * sin;
+            const localY = dx * sin + dy * cos;
 
-            ctx.arc(rotatedX, rotatedY, handleRadius, 0, Math.PI * 2);
+            // The context is already flipped. We need to flip the coordinates
+            // to match the visual transformation, so the arc is drawn in the correct place.
+            const finalX = localX * (layer.flipH ? -1 : 1);
+            const finalY = localY * (layer.flipV ? -1 : 1);
+
+            ctx.beginPath();
+            ctx.arc(finalX, finalY, handleRadius, 0, Math.PI * 2);
             ctx.fill();
             ctx.stroke();
         }
@@ -667,4 +726,332 @@ export class CanvasRenderer {
             padding: 8
         });
     }
+
+    /**
+     * Initialize overlay canvas for lightweight overlays like brush cursor
+     */
+    initOverlay(): void {
+        // Setup overlay canvas to match main canvas
+        this.updateOverlaySize();
+        
+        // Position overlay canvas on top of main canvas
+        this.canvas.overlayCanvas.style.position = 'absolute';
+        this.canvas.overlayCanvas.style.left = '0px';
+        this.canvas.overlayCanvas.style.top = '0px';
+        this.canvas.overlayCanvas.style.pointerEvents = 'none';
+        this.canvas.overlayCanvas.style.zIndex = '20'; // Above other overlays
+        
+        // Add overlay to DOM when main canvas is added
+        this.addOverlayToDOM();
+        
+        log.debug('Overlay canvas initialized');
+    }
+
+    /**
+     * Add overlay canvas to DOM if main canvas has a parent
+     */
+    addOverlayToDOM(): void {
+        if (this.canvas.canvas.parentElement && !this.canvas.overlayCanvas.parentElement) {
+            this.canvas.canvas.parentElement.appendChild(this.canvas.overlayCanvas);
+            log.debug('Overlay canvas added to DOM');
+        }
+    }
+
+    /**
+     * Update overlay canvas size to match main canvas
+     */
+    updateOverlaySize(): void {
+        if (this.canvas.overlayCanvas.width !== this.canvas.canvas.clientWidth ||
+            this.canvas.overlayCanvas.height !== this.canvas.canvas.clientHeight) {
+            
+            this.canvas.overlayCanvas.width = Math.max(1, this.canvas.canvas.clientWidth);
+            this.canvas.overlayCanvas.height = Math.max(1, this.canvas.canvas.clientHeight);
+            
+            log.debug(`Overlay canvas resized to ${this.canvas.overlayCanvas.width}x${this.canvas.overlayCanvas.height}`);
+        }
+    }
+
+    /**
+     * Clear overlay canvas
+     */
+    clearOverlay(): void {
+        this.canvas.overlayCtx.clearRect(0, 0, this.canvas.overlayCanvas.width, this.canvas.overlayCanvas.height);
+    }
+
+    /**
+     * Initialize a dedicated overlay for real-time mask stroke preview
+     */
+    initStrokeOverlay(): void {
+        // Create canvas if not created yet
+        if (!this.strokeOverlayCanvas) {
+            this.strokeOverlayCanvas = document.createElement('canvas');
+            const ctx = this.strokeOverlayCanvas.getContext('2d');
+            if (!ctx) {
+                throw new Error('Failed to get 2D context for stroke overlay canvas');
+            }
+            this.strokeOverlayCtx = ctx;
+        }
+
+        // Size match main canvas
+        this.updateStrokeOverlaySize();
+
+        // Position above main canvas but below cursor overlay
+        this.strokeOverlayCanvas.style.position = 'absolute';
+        this.strokeOverlayCanvas.style.left = '1px';
+        this.strokeOverlayCanvas.style.top = '1px';
+        this.strokeOverlayCanvas.style.pointerEvents = 'none';
+        this.strokeOverlayCanvas.style.zIndex = '19'; // Below cursor overlay (20)
+        // Opacity is now controlled by MaskTool.previewOpacity
+        this.strokeOverlayCanvas.style.opacity = String(this.canvas.maskTool.previewOpacity || 0.5);
+
+        // Add to DOM
+        this.addStrokeOverlayToDOM();
+        log.debug('Stroke overlay canvas initialized');
+    }
+
+    /**
+     * Add stroke overlay canvas to DOM if needed
+     */
+    addStrokeOverlayToDOM(): void {
+        if (this.canvas.canvas.parentElement && !this.strokeOverlayCanvas.parentElement) {
+            this.canvas.canvas.parentElement.appendChild(this.strokeOverlayCanvas);
+            log.debug('Stroke overlay canvas added to DOM');
+        }
+    }
+
+    /**
+     * Ensure stroke overlay size matches main canvas
+     */
+    updateStrokeOverlaySize(): void {
+        const w = Math.max(1, this.canvas.canvas.clientWidth);
+        const h = Math.max(1, this.canvas.canvas.clientHeight);
+        if (this.strokeOverlayCanvas.width !== w || this.strokeOverlayCanvas.height !== h) {
+            this.strokeOverlayCanvas.width = w;
+            this.strokeOverlayCanvas.height = h;
+            log.debug(`Stroke overlay resized to ${w}x${h}`);
+        }
+    }
+
+    /**
+     * Clear the stroke overlay
+     */
+    clearMaskStrokeOverlay(): void {
+        if (!this.strokeOverlayCtx) return;
+        this.strokeOverlayCtx.clearRect(0, 0, this.strokeOverlayCanvas.width, this.strokeOverlayCanvas.height);
+    }
+
+    /**
+     * Draw a preview stroke segment onto the stroke overlay in screen space
+     * Uses line drawing with gradient to match MaskTool's drawLineOnChunk exactly
+     */
+    drawMaskStrokeSegment(startWorld: { x: number; y: number }, endWorld: { x: number; y: number }): void {
+        // Ensure overlay is present and sized
+        this.updateStrokeOverlaySize();
+
+        const zoom = this.canvas.viewport.zoom;
+        const toScreen = (p: { x: number; y: number }) => ({
+            x: (p.x - this.canvas.viewport.x) * zoom,
+            y: (p.y - this.canvas.viewport.y) * zoom
+        });
+
+        const startScreen = toScreen(startWorld);
+        const endScreen = toScreen(endWorld);
+
+        const brushRadius = (this.canvas.maskTool.brushSize / 2) * zoom;
+        const hardness = this.canvas.maskTool.brushHardness;
+        const strength = this.canvas.maskTool.brushStrength;
+
+        // If strength is 0, don't draw anything
+        if (strength <= 0) {
+            return;
+        }
+
+        this.strokeOverlayCtx.save();
+        
+        // Draw line segment exactly as MaskTool does
+        this.strokeOverlayCtx.beginPath();
+        this.strokeOverlayCtx.moveTo(startScreen.x, startScreen.y);
+        this.strokeOverlayCtx.lineTo(endScreen.x, endScreen.y);
+        
+        // Match the gradient setup from MaskTool's drawLineOnChunk
+        if (hardness === 1) {
+            this.strokeOverlayCtx.strokeStyle = `rgba(255, 255, 255, ${strength})`;
+        } else {
+            const innerRadius = brushRadius * hardness;
+            const gradient = this.strokeOverlayCtx.createRadialGradient(
+                endScreen.x, endScreen.y, innerRadius,
+                endScreen.x, endScreen.y, brushRadius
+            );
+            gradient.addColorStop(0, `rgba(255, 255, 255, ${strength})`);
+            gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+            this.strokeOverlayCtx.strokeStyle = gradient;
+        }
+        
+        // Match line properties from MaskTool
+        this.strokeOverlayCtx.lineWidth = this.canvas.maskTool.brushSize * zoom;
+        this.strokeOverlayCtx.lineCap = 'round';
+        this.strokeOverlayCtx.lineJoin = 'round';
+        this.strokeOverlayCtx.globalCompositeOperation = 'source-over';
+        this.strokeOverlayCtx.stroke();
+        
+        this.strokeOverlayCtx.restore();
+    }
+
+    /**
+     * Redraws the entire stroke overlay from world coordinates
+     * Used when viewport changes during drawing to maintain visual consistency
+     */
+    redrawMaskStrokeOverlay(strokePoints: { x: number; y: number }[]): void {
+        if (strokePoints.length < 2) return;
+
+        // Clear the overlay first
+        this.clearMaskStrokeOverlay();
+
+        // Redraw all segments with current viewport
+        for (let i = 1; i < strokePoints.length; i++) {
+            this.drawMaskStrokeSegment(strokePoints[i - 1], strokePoints[i]);
+        }
+    }
+
+    /**
+     * Draw mask brush cursor on overlay canvas with visual feedback for size, strength and hardness
+     * @param worldPoint World coordinates of cursor
+     */
+    drawMaskBrushCursor(worldPoint: { x: number, y: number }): void {
+        if (!this.canvas.maskTool.isActive || !this.canvas.isMouseOver) {
+            this.clearOverlay();
+            return;
+        }
+
+        // Update overlay size if needed
+        this.updateOverlaySize();
+        
+        // Clear previous cursor
+        this.clearOverlay();
+        
+        // Convert world coordinates to screen coordinates
+        const screenX = (worldPoint.x - this.canvas.viewport.x) * this.canvas.viewport.zoom;
+        const screenY = (worldPoint.y - this.canvas.viewport.y) * this.canvas.viewport.zoom;
+        
+        // Get brush properties
+        const brushRadius = (this.canvas.maskTool.brushSize / 2) * this.canvas.viewport.zoom;
+        const brushStrength = this.canvas.maskTool.brushStrength;
+        const brushHardness = this.canvas.maskTool.brushHardness;
+        
+        // Save context state
+        this.canvas.overlayCtx.save();
+        
+        // If strength is 0, just draw outline
+        if (brushStrength > 0) {
+            // Draw inner fill to visualize brush effect - matches actual brush rendering
+            const gradient = this.canvas.overlayCtx.createRadialGradient(
+                screenX, screenY, 0,
+                screenX, screenY, brushRadius
+            );
+            
+            // Preview alpha - subtle to not obscure content
+            const previewAlpha = brushStrength * 0.15; // Very subtle preview (max 15% opacity)
+            
+            if (brushHardness === 1) {
+                // Hard brush - uniform fill within radius
+                gradient.addColorStop(0, `rgba(255, 255, 255, ${previewAlpha})`);
+                gradient.addColorStop(1, `rgba(255, 255, 255, ${previewAlpha})`);
+            } else {
+                // Soft brush - gradient fade matching actual brush
+                gradient.addColorStop(0, `rgba(255, 255, 255, ${previewAlpha})`);
+                if (brushHardness > 0) {
+                    gradient.addColorStop(brushHardness, `rgba(255, 255, 255, ${previewAlpha})`);
+                }
+                gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+            }
+            
+            this.canvas.overlayCtx.beginPath();
+            this.canvas.overlayCtx.arc(screenX, screenY, brushRadius, 0, 2 * Math.PI);
+            this.canvas.overlayCtx.fillStyle = gradient;
+            this.canvas.overlayCtx.fill();
+        }
+        
+        // Draw outer circle (SIZE indicator)
+        this.canvas.overlayCtx.beginPath();
+        this.canvas.overlayCtx.arc(screenX, screenY, brushRadius, 0, 2 * Math.PI);
+        
+        // Stroke opacity based on strength (dimmer when strength is 0)
+        const strokeOpacity = brushStrength > 0 ? (0.4 + brushStrength * 0.4) : 0.3;
+        this.canvas.overlayCtx.strokeStyle = `rgba(255, 255, 255, ${strokeOpacity})`;
+        this.canvas.overlayCtx.lineWidth = 1.5;
+        
+        // Visual feedback for hardness
+        if (brushHardness > 0.8) {
+            // Hard brush - solid line
+            this.canvas.overlayCtx.setLineDash([]);
+        } else {
+            // Soft brush - dashed line
+            const dashLength = 2 + (1 - brushHardness) * 4;
+            this.canvas.overlayCtx.setLineDash([dashLength, dashLength]);
+        }
+        
+        this.canvas.overlayCtx.stroke();
+        
+        // Center dot for small brushes
+        if (brushRadius < 5) {
+            this.canvas.overlayCtx.beginPath();
+            this.canvas.overlayCtx.arc(screenX, screenY, 1, 0, 2 * Math.PI);
+            this.canvas.overlayCtx.fillStyle = `rgba(255, 255, 255, ${strokeOpacity})`;
+            this.canvas.overlayCtx.fill();
+        }
+        
+        // Restore context state
+        this.canvas.overlayCtx.restore();
+    }
+
+    /**
+     * Update overlay position when viewport changes
+     */
+    updateOverlayPosition(): void {
+        // Overlay canvas is positioned absolutely, so it doesn't need repositioning
+        // Just ensure it's the right size
+        this.updateOverlaySize();
+    }
+
+    /**
+     * Draw transform handles for output area when in transform mode
+     */
+    renderOutputAreaTransformHandles(ctx: any): void {
+        if (this.canvas.canvasInteractions.interaction.mode !== 'transformingOutputArea') {
+            return;
+        }
+
+        const bounds = this.canvas.outputAreaBounds;
+        const handleRadius = 5 / this.canvas.viewport.zoom;
+        
+        // Define handle positions
+        const handles = {
+            'nw': { x: bounds.x, y: bounds.y },
+            'n': { x: bounds.x + bounds.width / 2, y: bounds.y },
+            'ne': { x: bounds.x + bounds.width, y: bounds.y },
+            'e': { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 },
+            'se': { x: bounds.x + bounds.width, y: bounds.y + bounds.height },
+            's': { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height },
+            'sw': { x: bounds.x, y: bounds.y + bounds.height },
+            'w': { x: bounds.x, y: bounds.y + bounds.height / 2 },
+        };
+
+        // Draw handles
+        ctx.fillStyle = '#ffffff';
+        ctx.strokeStyle = '#000000';
+        ctx.lineWidth = 1 / this.canvas.viewport.zoom;
+
+        for (const [name, pos] of Object.entries(handles)) {
+            ctx.beginPath();
+            ctx.arc(pos.x, pos.y, handleRadius, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+        }
+
+        // Draw a highlight around the output area
+        ctx.strokeStyle = 'rgba(0, 150, 255, 0.8)';
+        ctx.lineWidth = 3 / this.canvas.viewport.zoom;
+        ctx.setLineDash([]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    }
 }

src/CanvasState.ts

@@ -235,6 +235,7 @@ export class CanvasState {
     _createLayerFromSrc(layerData: Layer, imageSrc: string | ImageBitmap, index: number, resolve: (value: Layer | null) => void): void {
         if (typeof imageSrc === 'string') {
             const img = new Image();
+            img.crossOrigin = 'anonymous';
             img.onload = () => {
                 log.debug(`Layer ${index}: Image loaded successfully.`);
                 const newLayer: Layer = {...layerData, image: img};
@@ -250,6 +251,7 @@ export class CanvasState {
             if (ctx) {
                 ctx.drawImage(imageSrc, 0, 0);
                 const img = new Image();
+                img.crossOrigin = 'anonymous';
                 img.onload = () => {
                     log.debug(`Layer ${index}: Image loaded successfully from ImageBitmap.`);
                     const newLayer: Layer = {...layerData, image: img};
@@ -456,12 +458,13 @@ If you see dark images or masks in the output, make sure node_id is set to ${cor
 
         if (this.maskUndoStack.length > 0) {
             const prevState = this.maskUndoStack[this.maskUndoStack.length - 1];
-            const maskCanvas = this.canvas.maskTool.getMask();
-            const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
-            if (maskCtx) {
-                maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
-                maskCtx.drawImage(prevState, 0, 0);
-            }
+            
+            // Use the new restoreMaskFromSavedState method that properly clears chunks first
+            this.canvas.maskTool.restoreMaskFromSavedState(prevState);
+            
+            // Clear stroke overlay to prevent old drawing previews from persisting
+            this.canvas.canvasRenderer.clearMaskStrokeOverlay();
+            
             this.canvas.render();
         }
 
@@ -474,12 +477,13 @@ If you see dark images or masks in the output, make sure node_id is set to ${cor
         const nextState = this.maskRedoStack.pop();
         if (nextState) {
             this.maskUndoStack.push(nextState);
-            const maskCanvas = this.canvas.maskTool.getMask();
-            const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
-            if (maskCtx) {
-                maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
-                maskCtx.drawImage(nextState, 0, 0);
-            }
+            
+            // Use the new restoreMaskFromSavedState method that properly clears chunks first
+            this.canvas.maskTool.restoreMaskFromSavedState(nextState);
+            
+            // Clear stroke overlay to prevent old drawing previews from persisting
+            this.canvas.canvasRenderer.clearMaskStrokeOverlay();
+            
             this.canvas.render();
         }
         this.canvas.updateHistoryButtons();

src/CanvasView.ts

@@ -33,6 +33,40 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
     });
     const imageCache = new ImageCache();
 
+    /**
+     * Helper function to update the icon of a switch component.
+     * @param knobIconEl The HTML element for the switch's knob icon.
+     * @param isChecked The current state of the switch (e.g., checkbox.checked).
+     * @param iconToolTrue The icon tool name for the 'true' state.
+     * @param iconToolFalse The icon tool name for the 'false' state.
+     * @param fallbackTrue The text fallback for the 'true' state.
+     * @param fallbackFalse The text fallback for the 'false' state.
+     */
+    const updateSwitchIcon = (
+        knobIconEl: HTMLElement, 
+        isChecked: boolean, 
+        iconToolTrue: string, 
+        iconToolFalse: string, 
+        fallbackTrue: string, 
+        fallbackFalse: string
+    ) => {
+        if (!knobIconEl) return;
+        
+        const iconTool = isChecked ? iconToolTrue : iconToolFalse;
+        const fallbackText = isChecked ? fallbackTrue : fallbackFalse;
+        const icon = iconLoader.getIcon(iconTool);
+
+        knobIconEl.innerHTML = ''; // Clear previous icon
+        if (icon instanceof HTMLImageElement) {
+            const clonedIcon = icon.cloneNode() as HTMLImageElement;
+            clonedIcon.style.width = '20px';
+            clonedIcon.style.height = '20px';
+            knobIconEl.appendChild(clonedIcon);
+        } else {
+            knobIconEl.textContent = fallbackText;
+        }
+    };
+
     const helpTooltip = $el("div.painter-tooltip", {
         id: `painter-help-tooltip-${node.id}`,
     }) as HTMLDivElement;
@@ -97,7 +131,6 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
                 }),
                 $el("button.painter-button.icon-button", {
                     textContent: "?",
-                    title: "Show shortcuts",
                     onmouseenter: (e: MouseEvent) => {
                         const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
                         showTooltip(e.target as HTMLElement, content);
@@ -176,37 +209,56 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
         ])
     ]);
 
+    // Helper function to get current tooltip content based on switch state
+    const getCurrentTooltipContent = () => {
+        const checked = (switchEl.querySelector('input[type="checkbox"]') as HTMLInputElement).checked;
+        return checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+    };
+
+    // Helper function to update tooltip content if it's currently visible
+    const updateTooltipIfVisible = () => {
+        // Only update if tooltip is currently visible
+        if (helpTooltip.style.display === 'block') {
+            const tooltipContent = getCurrentTooltipContent();
+            showTooltip(switchEl, tooltipContent);
+        }
+    };
+
     // Tooltip logic
     switchEl.addEventListener("mouseenter", (e: MouseEvent) => {
-        const checked = (switchEl.querySelector('input[type="checkbox"]') as HTMLInputElement).checked;
-        const tooltipContent = checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+        const tooltipContent = getCurrentTooltipContent();
         showTooltip(switchEl, tooltipContent);
     });
     switchEl.addEventListener("mouseleave", hideTooltip);
 
-    // Dynamic icon and text update on toggle
+    // Dynamic icon update on toggle
     const input = switchEl.querySelector('input[type="checkbox"]') as HTMLInputElement;
     const knobIcon = switchEl.querySelector('.switch-knob .switch-icon') as HTMLElement;
     
-    const updateSwitchView = (isClipspace: boolean) => {
-        const iconTool = isClipspace ? LAYERFORGE_TOOLS.CLIPSPACE : LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD;
-        const icon = iconLoader.getIcon(iconTool);
-        if (icon instanceof HTMLImageElement) {
-            knobIcon.innerHTML = '';
-            const clonedIcon = icon.cloneNode() as HTMLImageElement;
-            clonedIcon.style.width = '20px';
-            clonedIcon.style.height = '20px';
-            knobIcon.appendChild(clonedIcon);
-        } else {
-             knobIcon.textContent = isClipspace ? "🗂️" : "📋";
-        }
-    };
-    
-    input.addEventListener('change', () => updateSwitchView(input.checked));
+    input.addEventListener('change', () => {
+        updateSwitchIcon(
+            knobIcon,
+            input.checked,
+            LAYERFORGE_TOOLS.CLIPSPACE,
+            LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD,
+            "🗂️",
+            "📋"
+        );
+        
+        // Update tooltip content immediately after state change
+        updateTooltipIfVisible();
+    });
     
     // Initial state
     iconLoader.preloadToolIcons().then(() => {
-        updateSwitchView(isClipspace);
+        updateSwitchIcon(
+            knobIcon,
+            isClipspace,
+            LAYERFORGE_TOOLS.CLIPSPACE,
+            LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD,
+            "🗂️",
+            "📋"
+        );
     });
 
     return switchEl;
@@ -216,90 +268,32 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
 
             $el("div.painter-separator"),
             $el("div.painter-button-group", {}, [
+                $el("button.painter-button.requires-selection", {
+                    textContent: "Auto Adjust Output",
+                    title: "Automatically adjust output area to fit selected layers",
+                    onclick: () => {
+                        const selectedLayers = canvas.canvasSelection.selectedLayers;
+                        if (selectedLayers.length === 0) {
+                            showWarningNotification("Please select one or more layers first");
+                            return;
+                        }
+                        
+                        const success = canvas.canvasLayers.autoAdjustOutputToSelection();
+                        if (success) {
+                            const bounds = canvas.outputAreaBounds;
+                            showSuccessNotification(`Output area adjusted to ${bounds.width}x${bounds.height}px`);
+                        } else {
+                            showErrorNotification("Cannot calculate valid output area dimensions");
+                        }
+                    }
+                }),
                 $el("button.painter-button", {
                     textContent: "Output Area Size",
-                    title: "Set the size of the output area",
+                    title: "Transform output area - drag handles to resize",
                     onclick: () => {
-                        const dialog = $el("div.painter-dialog", {
-                            style: {
-                                position: 'fixed',
-                                left: '50%',
-                                top: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                zIndex: '9999'
-                            }
-                        }, [
-                            $el("div", {
-                                style: {
-                                    color: "white",
-                                    marginBottom: "10px"
-                                }
-                            }, [
-                                $el("label", {
-                                    style: {
-                                        marginRight: "5px"
-                                    }
-                                }, [
-                                    $el("span", {}, ["Width: "])
-                                ]),
-                                $el("input", {
-                                    type: "number",
-                                    id: "canvas-width",
-                                    value: String(canvas.width),
-                                    min: "1",
-                                    max: "4096"
-                                })
-                            ]),
-                            $el("div", {
-                                style: {
-                                    color: "white",
-                                    marginBottom: "10px"
-                                }
-                            }, [
-                                $el("label", {
-                                    style: {
-                                        marginRight: "5px"
-                                    }
-                                }, [
-                                    $el("span", {}, ["Height: "])
-                                ]),
-                                $el("input", {
-                                    type: "number",
-                                    id: "canvas-height",
-                                    value: String(canvas.height),
-                                    min: "1",
-                                    max: "4096"
-                                })
-                            ]),
-                            $el("div", {
-                                style: {
-                                    textAlign: "right"
-                                }
-                            }, [
-                                $el("button", {
-                                    id: "cancel-size",
-                                    textContent: "Cancel"
-                                }),
-                                $el("button", {
-                                    id: "confirm-size",
-                                    textContent: "OK"
-                                })
-                            ])
-                        ]);
-                        document.body.appendChild(dialog);
-
-                        (document.getElementById('confirm-size') as HTMLButtonElement).onclick = () => {
-                            const widthInput = document.getElementById('canvas-width') as HTMLInputElement;
-                            const heightInput = document.getElementById('canvas-height') as HTMLInputElement;
-                            const width = parseInt(widthInput.value) || canvas.width;
-                            const height = parseInt(heightInput.value) || canvas.height;
-                            canvas.setOutputAreaSize(width, height);
-                            document.body.removeChild(dialog);
-                        };
-
-                        (document.getElementById('cancel-size') as HTMLButtonElement).onclick = () => {
-                            document.body.removeChild(dialog);
-                        };
+                        // Activate output area transform mode
+                        canvas.canvasInteractions.activateOutputAreaTransform();
+                        showInfoNotification("Click and drag the handles to resize the output area. Click anywhere else to exit.", 3000);
                     }
                 }),
                 $el("button.painter-button.requires-selection", {
@@ -326,6 +320,68 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
 
             $el("div.painter-separator"),
             $el("div.painter-button-group", {}, [
+                (() => {
+                    const switchEl = $el("label.clipboard-switch.requires-selection", { 
+                        id: `crop-transform-switch-${node.id}`,
+                        title: "Toggle between Transform and Crop mode for selected layer(s)"
+                    }, [
+                        $el("input", {
+                            type: "checkbox",
+                            checked: false,
+                            onchange: (e: Event) => {
+                                const isCropMode = (e.target as HTMLInputElement).checked;
+                                const selectedLayers = canvas.canvasSelection.selectedLayers;
+                                if (selectedLayers.length === 0) return;
+                                
+                                selectedLayers.forEach((layer: Layer) => {
+                                    layer.cropMode = isCropMode;
+                                    if (isCropMode && !layer.cropBounds) {
+                                        layer.cropBounds = { x: 0, y: 0, width: layer.originalWidth, height: layer.originalHeight };
+                                    }
+                                });
+                                
+                                canvas.saveState();
+                                canvas.render();
+                            }
+                        }),
+                        $el("span.switch-track"),
+                        $el("span.switch-labels", { style: { fontSize: "11px" } }, [
+                            $el("span.text-clipspace", {}, ["Crop"]),
+                            $el("span.text-system", {}, ["Transform"])
+                        ]),
+                        $el("span.switch-knob", {}, [
+                            $el("span.switch-icon", { id: `crop-transform-icon-${node.id}`})
+                        ])
+                    ]);
+
+                    const input = switchEl.querySelector('input[type="checkbox"]') as HTMLInputElement;
+                    const knobIcon = switchEl.querySelector('.switch-icon') as HTMLElement;
+
+                    input.addEventListener('change', () => {
+                        updateSwitchIcon(
+                            knobIcon,
+                            input.checked,
+                            LAYERFORGE_TOOLS.CROP,
+                            LAYERFORGE_TOOLS.TRANSFORM,
+                            "✂️",
+                            "✥"
+                        );
+                    });
+                    
+                    // Initial state
+                    iconLoader.preloadToolIcons().then(() => {
+                        updateSwitchIcon(
+                            knobIcon,
+                            false, // Initial state is transform
+                            LAYERFORGE_TOOLS.CROP,
+                            LAYERFORGE_TOOLS.TRANSFORM,
+                            "✂️",
+                            "✥"
+                        );
+                    });
+
+                    return switchEl;
+                })(),
                 $el("button.painter-button.requires-selection", {
                     textContent: "Rotate +90°",
                     title: "Rotate selected layer(s) by +90 degrees",
@@ -362,13 +418,46 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
                         const button = (e.target as HTMLElement).closest('.matting-button') as HTMLButtonElement;
                         if (button.classList.contains('loading')) return;
 
-                        const spinner = $el("div.matting-spinner") as HTMLDivElement;
-                        button.appendChild(spinner);
-                        button.classList.add('loading');
-                        
-                        showInfoNotification("Starting background removal process...", 2000);
-
                         try {
+                            // First check if model is available
+                            const modelCheckResponse = await fetch("/matting/check-model");
+                            const modelStatus = await modelCheckResponse.json();
+                            
+                            if (!modelStatus.available) {
+                                switch (modelStatus.reason) {
+                                    case 'missing_dependency':
+                                        showErrorNotification(modelStatus.message, 8000);
+                                        return;
+                                    
+                                    case 'not_downloaded':
+                                        showWarningNotification("The matting model needs to be downloaded first. This will happen automatically when you proceed (requires internet connection).", 5000);
+                                        
+                                        // Ask user if they want to proceed with download
+                                        if (!confirm("The matting model needs to be downloaded (about 1GB). This is a one-time download. Do you want to proceed?")) {
+                                            return;
+                                        }
+                                        showInfoNotification("Downloading matting model... This may take a few minutes.", 10000);
+                                        break;
+                                    
+                                    case 'corrupted':
+                                        showErrorNotification(modelStatus.message, 8000);
+                                        return;
+                                    
+                                    case 'error':
+                                        showErrorNotification(`Error checking model: ${modelStatus.message}`, 5000);
+                                        return;
+                                }
+                            }
+
+                            // Proceed with matting
+                            const spinner = $el("div.matting-spinner") as HTMLDivElement;
+                            button.appendChild(spinner);
+                            button.classList.add('loading');
+                            
+                            if (modelStatus.available) {
+                                showInfoNotification("Starting background removal process...", 2000);
+                            }
+
                             if (canvas.canvasSelection.selectedLayers.length !== 1) {
                                 throw new Error("Please select exactly one image layer for matting.");
                             }
@@ -387,7 +476,18 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
                             if (!response.ok) {
                                 let errorMsg = `Server error: ${response.status} - ${response.statusText}`;
                                 if (result && result.error) {
-                                    errorMsg = `Error: ${result.error}. Details: ${result.details || 'Check console'}`;
+                                    // Handle specific error types
+                                    if (result.error === "Network Connection Error") {
+                                        showErrorNotification("Failed to download the matting model. Please check your internet connection and try again.", 8000);
+                                        return;
+                                    } else if (result.error === "Matting Model Error") {
+                                        showErrorNotification(result.details || "Model loading error. Please check the console for details.", 8000);
+                                        return;
+                                    } else if (result.error === "Dependency Not Found") {
+                                        showErrorNotification(result.details || "Missing required dependencies.", 8000);
+                                        return;
+                                    }
+                                    errorMsg = `${result.error}: ${result.details || 'Check console'}`;
                                 }
                                 throw new Error(errorMsg);
                             }
@@ -401,6 +501,10 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
                             
                             canvas.layers[selectedLayerIndex] = newLayer;
                             canvas.canvasSelection.updateSelection([newLayer]);
+                            
+                            // Invalidate processed image cache when layer image changes (matting)
+                            canvas.canvasLayers.invalidateProcessedImageCache(newLayer.id);
+                            
                             canvas.render();
                             canvas.saveState();
                             showSuccessNotification("Background removed successfully!");
@@ -408,10 +512,15 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
                         } catch (error: any) {
                             log.error("Matting error:", error);
                             const errorMessage = error.message || "An unknown error occurred.";
-                            showErrorNotification(`Matting Failed: ${errorMessage}`);
+                            if (!errorMessage.includes("Network Connection Error") && 
+                                !errorMessage.includes("Matting Model Error") &&
+                                !errorMessage.includes("Dependency Not Found")) {
+                                showErrorNotification(`Matting Failed: ${errorMessage}`);
+                            }
                         } finally {
                             button.classList.remove('loading');
-                            if (button.contains(spinner)) {
+                            const spinner = button.querySelector('.matting-spinner');
+                            if (spinner && button.contains(spinner)) {
                                 button.removeChild(spinner);
                             }
                         }
@@ -436,7 +545,8 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
             $el("div.painter-button-group", {id: "mask-controls"}, [
 $el("label.clipboard-switch.mask-switch", {
     id: `toggle-mask-switch-${node.id}`,
-    style: { minWidth: "56px", maxWidth: "56px", width: "56px", paddingLeft: "0", paddingRight: "0" }
+    style: { minWidth: "56px", maxWidth: "56px", width: "56px", paddingLeft: "0", paddingRight: "0" },
+    title: "Toggle mask overlay visibility on canvas (mask still affects output when disabled)"
 }, [
     $el("input", {
         type: "checkbox",
@@ -521,6 +631,24 @@ $el("label.clipboard-switch.mask-switch", {
                         setTimeout(() => canvas.render(), 0);
                     }
                 }),
+                $el("div.painter-slider-container.mask-control", {style: {display: 'none'}}, [
+                    $el("label", {for: "preview-opacity-slider", textContent: "Mask Opacity:"}),
+                    $el("input", {
+                        id: "preview-opacity-slider",
+                        type: "range",
+                        min: "0",
+                        max: "1",
+                        step: "0.05",
+                        value: "0.5",
+                        oninput: (e: Event) => {
+                            const value = (e.target as HTMLInputElement).value;
+                            canvas.maskTool.setPreviewOpacity(parseFloat(value));
+                            const valueEl = document.getElementById('preview-opacity-value');
+                            if (valueEl) valueEl.textContent = `${Math.round(parseFloat(value) * 100)}%`;
+                        }
+                    }),
+                    $el("div.slider-value", {id: "preview-opacity-value"}, ["50%"])
+                ]),
                 $el("div.painter-slider-container.mask-control", {style: {display: 'none'}}, [
                     $el("label", {for: "brush-size-slider", textContent: "Size:"}),
                     $el("input", {
@@ -672,18 +800,50 @@ $el("label.clipboard-switch.mask-switch", {
     const updateButtonStates = () => {
         const selectionCount = canvas.canvasSelection.selectedLayers.length;
         const hasSelection = selectionCount > 0;
-        controlPanel.querySelectorAll('.requires-selection').forEach((btn: any) => {
-            const button = btn as HTMLButtonElement;
-            if (button.textContent === 'Fuse') {
-                button.disabled = selectionCount < 2;
-            } else {
-                button.disabled = !hasSelection;
+
+        // --- Handle Standard Buttons ---
+        controlPanel.querySelectorAll('.requires-selection').forEach((el: any) => {
+            if (el.tagName === 'BUTTON') {
+                if (el.textContent === 'Fuse') {
+                    el.disabled = selectionCount < 2;
+                } else {
+                    el.disabled = !hasSelection;
+                }
             }
         });
+        
         const mattingBtn = controlPanel.querySelector('.matting-button') as HTMLButtonElement;
         if (mattingBtn && !mattingBtn.classList.contains('loading')) {
             mattingBtn.disabled = selectionCount !== 1;
         }
+
+        // --- Handle Crop/Transform Switch ---
+        const switchEl = controlPanel.querySelector(`#crop-transform-switch-${node.id}`) as HTMLLabelElement;
+        if (switchEl) {
+            const input = switchEl.querySelector('input') as HTMLInputElement;
+            const knobIcon = switchEl.querySelector('.switch-icon') as HTMLElement;
+            
+            const isDisabled = !hasSelection;
+            switchEl.classList.toggle('disabled', isDisabled);
+            input.disabled = isDisabled;
+
+            if (!isDisabled) {
+                const isCropMode = canvas.canvasSelection.selectedLayers[0].cropMode || false;
+                if (input.checked !== isCropMode) {
+                   input.checked = isCropMode;
+                }
+                
+                // Update icon view
+                updateSwitchIcon(
+                    knobIcon,
+                    isCropMode,
+                    LAYERFORGE_TOOLS.CROP,
+                    LAYERFORGE_TOOLS.TRANSFORM,
+                    "✂️",
+                    "✥"
+                );
+            }
+        }
     };
 
     canvas.canvasSelection.onSelectionChange = updateButtonStates;
@@ -860,7 +1020,9 @@ $el("label.clipboard-switch.mask-switch", {
         }
     }, [controlPanel, canvasContainer, layersPanelContainer]) as HTMLDivElement;
 
-    node.addDOMWidget("mainContainer", "widget", mainContainer);
+    if (node.addDOMWidget) {
+        node.addDOMWidget("mainContainer", "widget", mainContainer);
+    }
 
     const openEditorBtn = controlPanel.querySelector(`#open-editor-btn-${node.id}`) as HTMLButtonElement;
     let backdrop: HTMLDivElement | null = null;
@@ -972,7 +1134,12 @@ $el("label.clipboard-switch.mask-switch", {
     if (!(window as any).canvasExecutionStates) {
         (window as any).canvasExecutionStates = new Map<string, any>();
     }
-    (node as any).canvasWidget = canvas;
+    
+    // Store the entire widget object, not just the canvas
+    (node as any).canvasWidget = {
+        canvas: canvas,
+        panel: controlPanel
+    };
 
     setTimeout(() => {
         canvas.loadInitialState();
@@ -994,7 +1161,7 @@ $el("label.clipboard-switch.mask-switch", {
                 canvas.setPreviewVisibility(value);
             }
 
-            if ((node as any).graph && (node as any).graph.canvas) {
+            if ((node as any).graph && (node as any).graph.canvas && node.setDirtyCanvas) {
                 node.setDirtyCanvas(true, true);
             }
         };
@@ -1014,7 +1181,7 @@ $el("label.clipboard-switch.mask-switch", {
 const canvasNodeInstances = new Map<number, CanvasWidget>();
 
 app.registerExtension({
-    name: "Comfy.CanvasNode",
+    name: "Comfy.LayerForgeNode",
 
     init() {
         addStylesheet(getUrl('./css/canvas_view.css'));
@@ -1053,7 +1220,7 @@ app.registerExtension({
     },
 
     async beforeRegisterNodeDef(nodeType: any, nodeData: any, app: ComfyApp) {
-        if (nodeType.comfyClass === "CanvasNode") {
+        if (nodeType.comfyClass === "LayerForgeNode") {
             const onNodeCreated = nodeType.prototype.onNodeCreated;
             nodeType.prototype.onNodeCreated = function (this: ComfyNode) {
                 log.debug("CanvasNode onNodeCreated: Base widget setup.");
@@ -1086,10 +1253,156 @@ app.registerExtension({
                 const canvasWidget = await createCanvasWidget(this, null, app);
                 canvasNodeInstances.set(this.id, canvasWidget);
                 log.info(`Registered CanvasNode instance for ID: ${this.id}`);
+                
+                // Store the canvas widget on the node
+                (this as any).canvasWidget = canvasWidget;
 
+                // Check if there are already connected inputs
                 setTimeout(() => {
-                    this.setDirtyCanvas(true, true);
-                }, 100);
+                        if (this.inputs && this.inputs.length > 0) {
+                            // Check if input_image (index 0) is connected
+                            if (this.inputs[0] && this.inputs[0].link) {
+                                log.info("Input image already connected on node creation, checking for data...");
+                                if (canvasWidget.canvas && canvasWidget.canvas.canvasIO) {
+                                    canvasWidget.canvas.inputDataLoaded = false;
+                                    // Only allow images on init; mask should load only on mask connect or execution
+                                    canvasWidget.canvas.canvasIO.checkForInputData({ allowImage: true, allowMask: false, reason: "init_image_connected" });
+                                }
+                            }
+                        }
+                    if (this.setDirtyCanvas) {
+                        this.setDirtyCanvas(true, true);
+                    }
+                }, 500);
+            };
+
+            // Add onConnectionsChange handler to detect when inputs are connected
+            nodeType.prototype.onConnectionsChange = function (this: ComfyNode, type: number, index: number, connected: boolean, link_info: any) {
+                log.info(`onConnectionsChange called: type=${type}, index=${index}, connected=${connected}`, link_info);
+                
+                // Check if this is an input connection (type 1 = INPUT)
+                if (type === 1) {
+                    // Get the canvas widget - it might be in different places
+                    const canvasWidget = (this as any).canvasWidget;
+                    const canvas = canvasWidget?.canvas || canvasWidget;
+                    
+                    if (!canvas || !canvas.canvasIO) {
+                        log.warn("Canvas not ready in onConnectionsChange, scheduling retry...");
+                        // Retry multiple times with increasing delays
+                        const retryDelays = [500, 1000, 2000];
+                        let retryCount = 0;
+                        
+                        const tryAgain = () => {
+                            const retryCanvas = (this as any).canvasWidget?.canvas || (this as any).canvasWidget;
+                            if (retryCanvas && retryCanvas.canvasIO) {
+                                log.info("Canvas now ready, checking for input data...");
+                                if (connected) {
+                                    retryCanvas.inputDataLoaded = false;
+                                    // Respect which input triggered the connection:
+                                    const opts = (index === 1)
+                                        ? { allowImage: false, allowMask: true, reason: "mask_connect" }
+                                        : { allowImage: true, allowMask: false, reason: "image_connect" };
+                                    retryCanvas.canvasIO.checkForInputData(opts);
+                                }
+                            } else if (retryCount < retryDelays.length) {
+                                log.warn(`Canvas still not ready, retry ${retryCount + 1}/${retryDelays.length}...`);
+                                setTimeout(tryAgain, retryDelays[retryCount++]);
+                            } else {
+                                log.error("Canvas failed to initialize after multiple retries");
+                            }
+                        };
+                        
+                        setTimeout(tryAgain, retryDelays[retryCount++]);
+                        return;
+                    }
+
+                    // Handle input_image connection (index 0)
+                    if (index === 0) {
+                        if (connected && link_info) {
+                            log.info("Input image connected, marking for data check...");
+                            // Reset the input data loaded flag to allow loading the new connection
+                            canvas.inputDataLoaded = false;
+                            // Also reset the last loaded image source and link ID to allow the new image
+                            canvas.lastLoadedImageSrc = undefined;
+                            canvas.lastLoadedLinkId = undefined;
+                            // Mark that we have a pending input connection
+                            canvas.hasPendingInputConnection = true;
+
+                            // If mask input is not connected and a mask was auto-applied from input_mask before, clear it now
+                            if (!(this.inputs && this.inputs[1] && this.inputs[1].link)) {
+                                if ((canvas as any).maskAppliedFromInput && canvas.maskTool) {
+                                    canvas.maskTool.clear();
+                                    canvas.render();
+                                    (canvas as any).maskAppliedFromInput = false;
+                                    canvas.lastLoadedMaskLinkId = undefined;
+                                    log.info("Cleared auto-applied mask because input_image connected without input_mask");
+                                }
+                            }
+
+                            // Check for data immediately when connected
+                            setTimeout(() => {
+                                log.info("Checking for input data after connection...");
+                                // Only load images here; masks should not auto-load on image connect
+                                canvas.canvasIO.checkForInputData({ allowImage: true, allowMask: false, reason: "image_connect" });
+                            }, 500);
+                        } else {
+                            log.info("Input image disconnected");
+                            canvas.hasPendingInputConnection = false;
+                            // Reset when disconnected so a new connection can load
+                            canvas.inputDataLoaded = false;
+                            canvas.lastLoadedImageSrc = undefined;
+                            canvas.lastLoadedLinkId = undefined;
+                        }
+                    }
+                    
+                    // Handle input_mask connection (index 1)
+                    if (index === 1) {
+                        if (connected && link_info) {
+                            log.info("Input mask connected");
+                            
+                            // DON'T clear existing mask when connecting a new input
+                            // Reset the loaded mask link ID to allow loading from the new connection
+                            canvas.lastLoadedMaskLinkId = undefined;
+                            
+                            // Mark that we have a pending mask connection
+                            canvas.hasPendingMaskConnection = true;
+                            // Check for data immediately when connected
+                            setTimeout(() => {
+                                log.info("Checking for input data after mask connection...");
+                                // Only load mask here if it's immediately available from the connected node
+                                // Don't load stale masks from backend storage
+                                canvas.canvasIO.checkForInputData({ allowImage: false, allowMask: true, reason: "mask_connect" });
+                            }, 500);
+                        } else {
+                            log.info("Input mask disconnected");
+                            canvas.hasPendingMaskConnection = false;
+                            // If the current mask came from input_mask, clear it to avoid affecting images when mask is not connected
+                            if ((canvas as any).maskAppliedFromInput && canvas.maskTool) {
+                                (canvas as any).maskAppliedFromInput = false;
+                                canvas.lastLoadedMaskLinkId = undefined;
+                                log.info("Cleared auto-applied mask due to mask input disconnection");
+                            }
+                        }
+                    }
+                }
+            };
+
+            // Add onExecuted handler to check for input data after workflow execution
+            const originalOnExecuted = nodeType.prototype.onExecuted;
+            nodeType.prototype.onExecuted = function (this: ComfyNode, message: any) {
+                log.info("Node executed, checking for input data...");
+                
+                const canvas = (this as any).canvasWidget?.canvas || (this as any).canvasWidget;
+                if (canvas && canvas.canvasIO) {
+                    // Don't reset inputDataLoaded - just check for new data
+                    // On execution we allow both image and mask to load
+                    canvas.canvasIO.checkForInputData({ allowImage: true, allowMask: true, reason: "execution" });
+                }
+                
+                // Call original if it exists
+                if (originalOnExecuted) {
+                    originalOnExecuted.apply(this, arguments as any);
+                }
             };
 
             const onRemoved = nodeType.prototype.onRemoved;
@@ -1226,8 +1539,8 @@ app.registerExtension({
                         callback: async () => {
                             try {
                                 log.info("Opening LayerForge canvas in MaskEditor");
-                                if ((self as any).canvasWidget && (self as any).canvasWidget.startMaskEditor) {
-                                    await (self as any).canvasWidget.startMaskEditor(null, true);
+                                if ((self as any).canvasWidget && (self as any).canvasWidget.canvas) {
+                                    await (self as any).canvasWidget.canvas.startMaskEditor(null, true);
                                 } else {
                                     log.error("Canvas widget not available");
                                     showErrorNotification("Canvas not ready. Please try again.");
@@ -1242,8 +1555,8 @@ app.registerExtension({
                         content: "Open Image",
                         callback: async () => {
                             try {
-                                if (!(self as any).canvasWidget) return;
-                                const blob = await (self as any).canvasWidget.getFlattenedCanvasAsBlob();
+                                if (!(self as any).canvasWidget || !(self as any).canvasWidget.canvas) return;
+                                const blob = await (self as any).canvasWidget.canvas.canvasLayers.getFlattenedCanvasAsBlob();
                                 if (!blob) return;
                                 const url = URL.createObjectURL(blob);
                                 window.open(url, '_blank');
@@ -1257,8 +1570,8 @@ app.registerExtension({
                         content: "Open Image with Mask Alpha",
                         callback: async () => {
                             try {
-                                if (!(self as any).canvasWidget) return;
-                                const blob = await (self as any).canvasWidget.getFlattenedCanvasWithMaskAsBlob();
+                                if (!(self as any).canvasWidget || !(self as any).canvasWidget.canvas) return;
+                                const blob = await (self as any).canvasWidget.canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
                                 if (!blob) return;
                                 const url = URL.createObjectURL(blob);
                                 window.open(url, '_blank');
@@ -1272,8 +1585,8 @@ app.registerExtension({
                         content: "Copy Image",
                         callback: async () => {
                             try {
-                                if (!(self as any).canvasWidget) return;
-                                const blob = await (self as any).canvasWidget.getFlattenedCanvasAsBlob();
+                                if (!(self as any).canvasWidget || !(self as any).canvasWidget.canvas) return;
+                                const blob = await (self as any).canvasWidget.canvas.canvasLayers.getFlattenedCanvasAsBlob();
                                 if (!blob) return;
                                 const item = new ClipboardItem({'image/png': blob});
                                 await navigator.clipboard.write([item]);
@@ -1288,8 +1601,8 @@ app.registerExtension({
                         content: "Copy Image with Mask Alpha",
                         callback: async () => {
                             try {
-                                if (!(self as any).canvasWidget) return;
-                                const blob = await (self as any).canvasWidget.getFlattenedCanvasWithMaskAsBlob();
+                                if (!(self as any).canvasWidget || !(self as any).canvasWidget.canvas) return;
+                                const blob = await (self as any).canvasWidget.canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
                                 if (!blob) return;
                                 const item = new ClipboardItem({'image/png': blob});
                                 await navigator.clipboard.write([item]);
@@ -1304,8 +1617,8 @@ app.registerExtension({
                         content: "Save Image",
                         callback: async () => {
                             try {
-                                if (!(self as any).canvasWidget) return;
-                                const blob = await (self as any).canvasWidget.getFlattenedCanvasAsBlob();
+                                if (!(self as any).canvasWidget || !(self as any).canvasWidget.canvas) return;
+                                const blob = await (self as any).canvasWidget.canvas.canvasLayers.getFlattenedCanvasAsBlob();
                                 if (!blob) return;
                                 const url = URL.createObjectURL(blob);
                                 const a = document.createElement('a');
@@ -1324,8 +1637,8 @@ app.registerExtension({
                         content: "Save Image with Mask Alpha",
                         callback: async () => {
                             try {
-                                if (!(self as any).canvasWidget) return;
-                                const blob = await (self as any).canvasWidget.getFlattenedCanvasWithMaskAsBlob();
+                                if (!(self as any).canvasWidget || !(self as any).canvasWidget.canvas) return;
+                                const blob = await (self as any).canvasWidget.canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
                                 if (!blob) return;
                                 const url = URL.createObjectURL(blob);
                                 const a = document.createElement('a');

src/MaskEditorIntegration.ts

@@ -507,7 +507,6 @@ export class MaskEditorIntegration {
             maskSize: {width: bounds.width, height: bounds.height}
         });
 
-        // Use the chunk system instead of direct canvas manipulation
         this.maskTool.setMask(maskAsImage);
 
         // Update node preview using PreviewUtils

src/MaskTool.ts

@@ -21,9 +21,10 @@ interface MaskChunk {
 }
 
 export class MaskTool {
-    private brushHardness: number;
-    private brushSize: number;
-    private brushStrength: number;
+    private _brushHardness: number;
+    public brushSize: number;
+    private _brushStrength: number;
+    private _previewOpacity: number;
     private canvasInstance: Canvas & { canvasState: CanvasState, width: number, height: number };
     public isActive: boolean;
     public isDrawing: boolean;
@@ -31,6 +32,9 @@ export class MaskTool {
     private lastPosition: Point | null;
     private mainCanvas: HTMLCanvasElement;
     
+    // Track strokes during drawing for efficient overlay updates
+    private currentStrokePoints: Point[] = [];
+    
     // Chunked mask system
     private maskChunks: Map<string, MaskChunk>; // Key: "x,y" (chunk coordinates)
     private chunkSize: number;
@@ -72,6 +76,9 @@ export class MaskTool {
         this.mainCanvas = canvasInstance.canvas;
         this.onStateChange = callbacks.onStateChange || null;
         
+        // Initialize stroke tracking for overlay drawing
+        this.currentStrokePoints = [];
+        
         // Initialize chunked mask system
         this.maskChunks = new Map();
         this.chunkSize = 512;
@@ -96,8 +103,9 @@ export class MaskTool {
         this.isOverlayVisible = true;
         this.isActive = false;
         this.brushSize = 20;
-        this.brushStrength = 0.5;
-        this.brushHardness = 0.5;
+        this._brushStrength = 0.5;
+        this._brushHardness = 0.5;
+        this._previewOpacity = 0.5; // Default 50% opacity for preview
         this.isDrawing = false;
         this.lastPosition = null;
 
@@ -156,8 +164,31 @@ export class MaskTool {
         }
     }
 
+    // Getters for brush properties
+    get brushStrength(): number {
+        return this._brushStrength;
+    }
+
+    get brushHardness(): number {
+        return this._brushHardness;
+    }
+
+    get previewOpacity(): number {
+        return this._previewOpacity;
+    }
+
     setBrushHardness(hardness: number): void {
-        this.brushHardness = Math.max(0, Math.min(1, hardness));
+        this._brushHardness = Math.max(0, Math.min(1, hardness));
+    }
+
+    setPreviewOpacity(opacity: number): void {
+        this._previewOpacity = Math.max(0, Math.min(1, opacity));
+        // Update the stroke overlay canvas opacity when preview opacity changes
+        if (this.canvasInstance.canvasRenderer && this.canvasInstance.canvasRenderer.strokeOverlayCanvas) {
+            this.canvasInstance.canvasRenderer.strokeOverlayCanvas.style.opacity = String(this._previewOpacity);
+        }
+        // Trigger canvas render to update mask display opacity
+        this.canvasInstance.render();
     }
 
     initMaskCanvas(): void {
@@ -867,7 +898,7 @@ export class MaskTool {
     }
 
     setBrushStrength(strength: number): void {
-        this.brushStrength = Math.max(0, Math.min(1, strength));
+        this._brushStrength = Math.max(0, Math.min(1, strength));
     }
 
     handleMouseDown(worldCoords: Point, viewCoords: Point): void {
@@ -875,10 +906,12 @@ export class MaskTool {
         this.isDrawing = true;
         this.lastPosition = worldCoords;
         
-        // Activate chunks around the drawing position for performance
-        this.updateActiveChunksForDrawing(worldCoords);
+        // Initialize stroke tracking for live preview
+        this.currentStrokePoints = [worldCoords];
+        
+        // Clear any previous stroke overlay
+        this.canvasInstance.canvasRenderer.clearMaskStrokeOverlay();
         
-        this.draw(worldCoords);
         this.clearPreview();
     }
 
@@ -888,16 +921,83 @@ export class MaskTool {
         }
         if (!this.isActive || !this.isDrawing) return;
         
-        // Dynamically update active chunks as user moves while drawing
-        this.updateActiveChunksForDrawing(worldCoords);
+        // Add point to stroke tracking
+        this.currentStrokePoints.push(worldCoords);
+        
+        // Draw interpolated segments for smooth strokes without gaps
+        if (this.lastPosition) {
+            // Calculate distance between last and current position
+            const dx = worldCoords.x - this.lastPosition.x;
+            const dy = worldCoords.y - this.lastPosition.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            
+            // If distance is small, just draw a single segment
+            if (distance < this.brushSize / 4) {
+                this.canvasInstance.canvasRenderer.drawMaskStrokeSegment(this.lastPosition, worldCoords);
+            } else {
+                // Interpolate points for smooth drawing without gaps
+                const interpolatedPoints = this.interpolatePoints(this.lastPosition, worldCoords, distance);
+                
+                // Draw all interpolated segments
+                for (let i = 0; i < interpolatedPoints.length - 1; i++) {
+                    this.canvasInstance.canvasRenderer.drawMaskStrokeSegment(
+                        interpolatedPoints[i], 
+                        interpolatedPoints[i + 1]
+                    );
+                }
+            }
+        }
         
-        this.draw(worldCoords);
         this.lastPosition = worldCoords;
     }
 
+    /**
+     * Interpolates points between two positions to create smooth strokes without gaps
+     * Based on the BrushTool's approach for eliminating dotted lines during fast drawing
+     */
+    private interpolatePoints(start: Point, end: Point, distance: number): Point[] {
+        const points: Point[] = [];
+        
+        // Calculate number of interpolated points based on brush size
+        // More points = smoother line
+        const stepSize = Math.max(1, this.brushSize / 6); // Adjust divisor for smoothness
+        const numSteps = Math.ceil(distance / stepSize);
+        
+        // Always include start point
+        points.push(start);
+        
+        // Interpolate intermediate points
+        for (let i = 1; i < numSteps; i++) {
+            const t = i / numSteps;
+            points.push({
+                x: start.x + (end.x - start.x) * t,
+                y: start.y + (end.y - start.y) * t
+            });
+        }
+        
+        // Always include end point
+        points.push(end);
+        
+        return points;
+    }
+
+    /**
+     * Called when viewport changes during drawing to update stroke overlay
+     * This ensures the stroke preview scales correctly with zoom changes
+     */
+    handleViewportChange(): void {
+        if (this.isDrawing && this.currentStrokePoints.length > 1) {
+            // Redraw the entire stroke overlay with new viewport settings
+            this.canvasInstance.canvasRenderer.redrawMaskStrokeOverlay(this.currentStrokePoints);
+        }
+    }
+
     handleMouseLeave(): void {
         this.previewVisible = false;
         this.clearPreview();
+        // Clear overlay canvases when mouse leaves
+        this.canvasInstance.canvasRenderer.clearOverlay();
+        this.canvasInstance.canvasRenderer.clearMaskStrokeOverlay();
     }
 
     handleMouseEnter(): void {
@@ -908,11 +1008,18 @@ export class MaskTool {
         if (!this.isActive) return;
         if (this.isDrawing) {
             this.isDrawing = false;
+            
+            // Commit the stroke from overlay to actual mask chunks
+            this.commitStrokeToChunks();
+            
+            // Clear stroke overlay and reset state
+            this.canvasInstance.canvasRenderer.clearMaskStrokeOverlay();
+            this.currentStrokePoints = [];
             this.lastPosition = null;
             this.currentDrawingChunk = null;
             
             // After drawing is complete, update active canvas to show all chunks
-            this.updateActiveMaskCanvas(true); // forceShowAll = true
+            this.updateActiveMaskCanvas(true); // Force full update
             
             this.completeMaskOperation();
             this.drawBrushPreview(viewCoords);
@@ -932,6 +1039,44 @@ export class MaskTool {
         this.updateActiveCanvasIfNeeded(this.lastPosition, worldCoords);
     }
 
+    /**
+     * Commits the current stroke from overlay to actual mask chunks
+     * This replays the entire stroke path with interpolation to ensure pixel-perfect accuracy
+     */
+    private commitStrokeToChunks(): void {
+        if (this.currentStrokePoints.length < 2) {
+            return; // Need at least 2 points for a stroke
+        }
+        
+        log.debug(`Committing stroke with ${this.currentStrokePoints.length} points to chunks`);
+        
+        // Replay the entire stroke path with interpolation for smooth, accurate lines
+        for (let i = 1; i < this.currentStrokePoints.length; i++) {
+            const startPoint = this.currentStrokePoints[i - 1];
+            const endPoint = this.currentStrokePoints[i];
+            
+            // Calculate distance between points
+            const dx = endPoint.x - startPoint.x;
+            const dy = endPoint.y - startPoint.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            
+            if (distance < this.brushSize / 4) {
+                // Small distance - draw single segment
+                this.drawOnChunks(startPoint, endPoint);
+            } else {
+                // Large distance - interpolate for smooth line without gaps
+                const interpolatedPoints = this.interpolatePoints(startPoint, endPoint, distance);
+                
+                // Draw all interpolated segments
+                for (let j = 0; j < interpolatedPoints.length - 1; j++) {
+                    this.drawOnChunks(interpolatedPoints[j], interpolatedPoints[j + 1]);
+                }
+            }
+        }
+        
+        log.debug("Stroke committed to chunks successfully with interpolation");
+    }
+
     /**
      * Draws a line between two world coordinates on the appropriate chunks
      */
@@ -982,15 +1127,15 @@ export class MaskTool {
         
         const gradientRadius = this.brushSize / 2;
         
-        if (this.brushHardness === 1) {
-            chunk.ctx.strokeStyle = `rgba(255, 255, 255, ${this.brushStrength})`;
+        if (this._brushHardness === 1) {
+            chunk.ctx.strokeStyle = `rgba(255, 255, 255, ${this._brushStrength})`;
         } else {
-            const innerRadius = gradientRadius * this.brushHardness;
+            const innerRadius = gradientRadius * this._brushHardness;
             const gradient = chunk.ctx.createRadialGradient(
                 endLocal.x, endLocal.y, innerRadius,
                 endLocal.x, endLocal.y, gradientRadius
             );
-            gradient.addColorStop(0, `rgba(255, 255, 255, ${this.brushStrength})`);
+            gradient.addColorStop(0, `rgba(255, 255, 255, ${this._brushStrength})`);
             gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
             chunk.ctx.strokeStyle = gradient;
         }
@@ -1029,29 +1174,17 @@ export class MaskTool {
     }
 
     /**
-     * Updates active canvas when drawing affects chunks with throttling to prevent lag
-     * During drawing, only updates the affected active chunks for performance
+     * Updates active canvas when drawing affects chunks
+     * Since we now use overlay during drawing, this is only called after drawing is complete
      */
     private updateActiveCanvasIfNeeded(startWorld: Point, endWorld: Point): void {
-        // Calculate which chunks were affected by this drawing operation
-        const minX = Math.min(startWorld.x, endWorld.x) - this.brushSize;
-        const maxX = Math.max(startWorld.x, endWorld.x) + this.brushSize;
-        const minY = Math.min(startWorld.y, endWorld.y) - this.brushSize;
-        const maxY = Math.max(startWorld.y, endWorld.y) + this.brushSize;
-        
-        const affectedChunkMinX = Math.floor(minX / this.chunkSize);
-        const affectedChunkMinY = Math.floor(minY / this.chunkSize);
-        const affectedChunkMaxX = Math.floor(maxX / this.chunkSize);
-        const affectedChunkMaxY = Math.floor(maxY / this.chunkSize);
-
-        // During drawing, only update affected chunks that are active for performance
-        if (this.isDrawing) {
-            // Use throttled partial update for active chunks only
-            this.scheduleThrottledActiveMaskUpdate(affectedChunkMinX, affectedChunkMinY, affectedChunkMaxX, affectedChunkMaxY);
-        } else {
+        // This method is now simplified - we only update after drawing is complete
+        // The overlay handles all live preview, so we don't need complex chunk activation
+        if (!this.isDrawing) {
             // Not drawing - do full update to show all chunks
             this.updateActiveMaskCanvas(true);
         }
+        // During drawing, we don't update chunks at all - overlay handles preview
     }
 
     /**
@@ -1142,20 +1275,13 @@ export class MaskTool {
 
     drawBrushPreview(viewCoords: Point): void {
         if (!this.previewVisible || this.isDrawing) {
-            this.clearPreview();
+            this.canvasInstance.canvasRenderer.clearOverlay();
             return;
         }
 
-        this.clearPreview();
-        const zoom = this.canvasInstance.viewport.zoom;
-        const radius = (this.brushSize / 2) * zoom;
-
-        this.previewCtx.beginPath();
-        this.previewCtx.arc(viewCoords.x, viewCoords.y, radius, 0, 2 * Math.PI);
-        this.previewCtx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
-        this.previewCtx.lineWidth = 1;
-        this.previewCtx.setLineDash([2, 4]);
-        this.previewCtx.stroke();
+        // Use overlay canvas instead of preview canvas for brush cursor
+        const worldCoords = this.canvasInstance.lastMousePosition;
+        this.canvasInstance.canvasRenderer.drawMaskBrushCursor(worldCoords);
     }
 
     clearPreview(): void {
@@ -1548,6 +1674,27 @@ export class MaskTool {
         log.info("Cleared all mask data from all chunks");
     }
 
+    /**
+     * Clears all chunks and restores mask from saved state
+     * This is used during undo/redo operations to ensure clean state restoration
+     */
+    restoreMaskFromSavedState(savedMaskCanvas: HTMLCanvasElement): void {
+        // First, clear ALL chunks to ensure no leftover data
+        this.clearAllMaskChunks();
+        
+        // Now apply the saved mask state to chunks
+        if (savedMaskCanvas.width > 0 && savedMaskCanvas.height > 0) {
+            // Apply the saved mask to the chunk system at the correct position
+            const bounds = this.canvasInstance.outputAreaBounds;
+            this.applyMaskCanvasToChunks(savedMaskCanvas, this.x, this.y);
+        }
+        
+        // Update the active mask canvas to show the restored state
+        this.updateActiveMaskCanvas(true);
+        
+        log.debug("Restored mask from saved state with clean chunk system");
+    }
+
     getMask(): HTMLCanvasElement {
         // Return the current active mask canvas which shows all chunks
         // Only update if there are pending changes to avoid unnecessary redraws
@@ -1667,15 +1814,47 @@ export class MaskTool {
         log.info(`Mask overlay visibility toggled to: ${this.isOverlayVisible}`);
     }
 
-    setMask(image: HTMLImageElement): void {
-        // Clear existing mask chunks in the output area first
+    setMask(image: HTMLImageElement, isFromInputMask: boolean = false): void {
         const bounds = this.canvasInstance.outputAreaBounds;
-        this.clearMaskInArea(bounds.x, bounds.y, image.width, image.height);
         
-        // Add the new mask using the chunk system
-        this.addMask(image);
-        
-        log.info(`MaskTool set new mask using chunk system at bounds (${bounds.x}, ${bounds.y})`);
+        if (isFromInputMask) {
+            // For INPUT MASK - process black background to transparent using luminance
+            // Center like input images
+            const centerX = bounds.x + (bounds.width - image.width) / 2;
+            const centerY = bounds.y + (bounds.height - image.height) / 2;
+            
+            // Prepare mask where alpha = luminance (white = applied, black = transparent)
+            const { canvas: maskCanvas, ctx } = createCanvas(image.width, image.height, '2d', { willReadFrequently: true });
+            if (!ctx) throw new Error("Could not create mask processing context");
+            ctx.drawImage(image, 0, 0);
+            
+            const imgData = ctx.getImageData(0, 0, image.width, image.height);
+            const data = imgData.data;
+            for (let i = 0; i < data.length; i += 4) {
+                const r = data[i], g = data[i + 1], b = data[i + 2];
+                const lum = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+                data[i] = 255;        // force white color (color channels ignored downstream)
+                data[i + 1] = 255;
+                data[i + 2] = 255;
+                data[i + 3] = lum;    // alpha encodes mask strength: white -> strong, black -> 0
+            }
+            ctx.putImageData(imgData, 0, 0);
+            
+            // Clear target area and apply to chunked system at centered position
+            this.clearMaskInArea(centerX, centerY, image.width, image.height);
+            this.applyMaskCanvasToChunks(maskCanvas, centerX, centerY);
+            
+            // Refresh state and UI
+            this.updateActiveMaskCanvas(true);
+            this.canvasInstance.canvasState.saveMaskState();
+            this.canvasInstance.render();
+            log.info(`MaskTool set INPUT MASK at centered position (${centerX}, ${centerY}) using luminance as alpha`);
+        } else {
+            // For SAM Detector and other sources - just clear and add without processing
+            this.clearMaskInArea(bounds.x, bounds.y, bounds.width, bounds.height);
+            this.addMask(image);
+            log.info(`MaskTool set mask using chunk system at bounds (${bounds.x}, ${bounds.y})`);
+        }
     }
 
     /**

src/SAMDetectorIntegration.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { api } from "../../scripts/api.js";
 // @ts-ignore
 import { ComfyApp } from "../../scripts/app.js";
@@ -7,6 +8,7 @@ import { uploadCanvasAsImage, uploadImageBlob } from "./utils/ImageUploadUtils.j
 import { processImageToMask } from "./utils/MaskProcessingUtils.js";
 import { convertToImage } from "./utils/ImageUtils.js";
 import { updateNodePreview } from "./utils/PreviewUtils.js";
+import { validateAndFixClipspace } from "./utils/ClipspaceUtils.js";
 import type { ComfyNode } from './types';
 
 const log = createModuleLogger('SAMDetectorIntegration');
@@ -281,36 +283,61 @@ async function handleSAMDetectorResult(node: ComfyNode, resultImage: HTMLImageEl
                 log.debug("Attempting to reload SAM result image");
                 const originalSrc = resultImage.src;
                 
-                // Add cache-busting parameter to force fresh load
-                const url = new URL(originalSrc);
-                url.searchParams.set('_t', Date.now().toString());
-                
-                await new Promise((resolve, reject) => {
-                    const img = new Image();
-                    img.crossOrigin = "anonymous";
-                    img.onload = () => {
-                        // Copy the loaded image data to the original image
-                        resultImage.src = img.src;
-                        resultImage.width = img.width;
-                        resultImage.height = img.height;
-                        log.debug("SAM result image reloaded successfully", {
-                            width: img.width,
-                            height: img.height,
-                            originalSrc: originalSrc,
-                            newSrc: img.src
+                // Check if it's a data URL (base64) - don't add parameters to data URLs
+                if (originalSrc.startsWith('data:')) {
+                    log.debug("Image is a data URL, skipping reload with parameters");
+                    // For data URLs, just ensure the image is loaded
+                    if (!resultImage.complete || resultImage.naturalWidth === 0) {
+                        await new Promise((resolve, reject) => {
+                            const img = new Image();
+                            img.onload = () => {
+                                resultImage.width = img.width;
+                                resultImage.height = img.height;
+                                log.debug("Data URL image loaded successfully", {
+                                    width: img.width,
+                                    height: img.height
+                                });
+                                resolve(img);
+                            };
+                            img.onerror = (error) => {
+                                log.error("Failed to load data URL image", error);
+                                reject(error);
+                            };
+                            img.src = originalSrc; // Use original src without modifications
                         });
-                        resolve(img);
-                    };
-                    img.onerror = (error) => {
-                        log.error("Failed to reload SAM result image", {
-                            originalSrc: originalSrc,
-                            newSrc: url.toString(),
-                            error: error
-                        });
-                        reject(error);
-                    };
-                    img.src = url.toString();
-                });
+                    }
+                } else {
+                    // For regular URLs, add cache-busting parameter
+                    const url = new URL(originalSrc);
+                    url.searchParams.set('_t', Date.now().toString());
+                    
+                    await new Promise((resolve, reject) => {
+                        const img = new Image();
+                        img.crossOrigin = "anonymous";
+                        img.onload = () => {
+                            // Copy the loaded image data to the original image
+                            resultImage.src = img.src;
+                            resultImage.width = img.width;
+                            resultImage.height = img.height;
+                            log.debug("SAM result image reloaded successfully", {
+                                width: img.width,
+                                height: img.height,
+                                originalSrc: originalSrc,
+                                newSrc: img.src
+                            });
+                            resolve(img);
+                        };
+                        img.onerror = (error) => {
+                            log.error("Failed to reload SAM result image", {
+                                originalSrc: originalSrc,
+                                newSrc: url.toString(),
+                                error: error
+                            });
+                            reject(error);
+                        };
+                        img.src = url.toString();
+                    });
+                }
             }
         } catch (error) {
             log.error("Failed to load image from SAM Detector.", error);
@@ -332,32 +359,43 @@ async function handleSAMDetectorResult(node: ComfyNode, resultImage: HTMLImageEl
         // Apply mask to LayerForge canvas using MaskTool.setMask method
         log.debug("Checking canvas and maskTool availability", {
             hasCanvas: !!canvas,
+            hasCanvasProperty: !!canvas.canvas,
+            canvasCanvasKeys: canvas.canvas ? Object.keys(canvas.canvas) : [],
             hasMaskTool: !!canvas.maskTool,
+            hasCanvasMaskTool: !!(canvas.canvas && canvas.canvas.maskTool),
             maskToolType: typeof canvas.maskTool,
+            canvasMaskToolType: canvas.canvas ? typeof canvas.canvas.maskTool : 'undefined',
             canvasKeys: Object.keys(canvas)
         });
 
-        if (!canvas.maskTool) {
+        // Get the actual Canvas object and its maskTool
+        const actualCanvas = canvas.canvas || canvas;
+        const maskTool = actualCanvas.maskTool;
+
+        if (!maskTool) {
             log.error("MaskTool is not available. Canvas state:", {
                 hasCanvas: !!canvas,
+                hasActualCanvas: !!actualCanvas,
                 canvasConstructor: canvas.constructor.name,
+                actualCanvasConstructor: actualCanvas ? actualCanvas.constructor.name : 'undefined',
                 canvasKeys: Object.keys(canvas),
-                maskToolValue: canvas.maskTool
+                actualCanvasKeys: actualCanvas ? Object.keys(actualCanvas) : [],
+                maskToolValue: maskTool
             });
             throw new Error("Mask tool not available or not initialized");
         }
 
-        log.debug("Applying SAM mask to canvas using addMask method");
+        log.debug("Applying SAM mask to canvas using setMask method");
 
-        // Use the addMask method which overlays on existing mask without clearing it
-        canvas.maskTool.addMask(maskAsImage);
+        // Use the setMask method which clears existing mask and sets new one
+        maskTool.setMask(maskAsImage);
 
         // Update canvas and save state (same as MaskEditorIntegration)
-        canvas.render();
-        canvas.saveState();
+        actualCanvas.render();
+        actualCanvas.saveState();
 
         // Update node preview using PreviewUtils
-        await updateNodePreview(canvas, node, true);
+        await updateNodePreview(actualCanvas, node, true);
 
         log.info("SAM Detector mask applied successfully to LayerForge canvas");
 
@@ -376,6 +414,9 @@ async function handleSAMDetectorResult(node: ComfyNode, resultImage: HTMLImageEl
 }
 
 
+// Store original onClipspaceEditorSave function to restore later
+let originalOnClipspaceEditorSave: (() => void) | null = null;
+
 // Function to setup SAM Detector hook in menu options
 export function setupSAMDetectorHook(node: ComfyNode, options: any[]) {
     // Hook into "Open in SAM Detector" with delay since Impact Pack adds it asynchronously
@@ -395,22 +436,67 @@ export function setupSAMDetectorHook(node: ComfyNode, options: any[]) {
                     log.info("Intercepted 'Open in SAM Detector' - automatically sending to clipspace and starting monitoring");
                     
                     // Automatically send canvas to clipspace and start monitoring
-                    if ((node as any).canvasWidget && (node as any).canvasWidget.canvas) {
-                        const canvas = (node as any).canvasWidget; // canvasWidget IS the Canvas object
+                    if ((node as any).canvasWidget) {
+                        const canvasWidget = (node as any).canvasWidget;
+                        const canvas = canvasWidget.canvas || canvasWidget; // Get actual Canvas object
                         
-                        // Use ImageUploadUtils to upload canvas
+                        // Use ImageUploadUtils to upload canvas and get server URL (Impact Pack compatibility)
                         const uploadResult = await uploadCanvasAsImage(canvas, {
                             filenamePrefix: 'layerforge-sam',
                             nodeId: node.id
                         });
 
+                        log.debug("Uploaded canvas for SAM Detector", {
+                            filename: uploadResult.filename,
+                            imageUrl: uploadResult.imageUrl,
+                            width: uploadResult.imageElement.width,
+                            height: uploadResult.imageElement.height
+                        });
+
                         // Set the image to the node for clipspace
                         node.imgs = [uploadResult.imageElement];
                         (node as any).clipspaceImg = uploadResult.imageElement;
 
+                        // Ensure proper clipspace structure for updated ComfyUI
+                        if (!ComfyApp.clipspace) {
+                            ComfyApp.clipspace = {};
+                        }
+                        
+                        // Set up clipspace with proper indices
+                        ComfyApp.clipspace.imgs = [uploadResult.imageElement];
+                        ComfyApp.clipspace.selectedIndex = 0;
+                        ComfyApp.clipspace.combinedIndex = 0;
+                        ComfyApp.clipspace.img_paste_mode = 'selected';
+
                         // Copy to ComfyUI clipspace
                         ComfyApp.copyToClipspace(node);
                         
+                        // Override onClipspaceEditorSave to fix clipspace structure before pasteFromClipspace
+                        if (!originalOnClipspaceEditorSave) {
+                            originalOnClipspaceEditorSave = ComfyApp.onClipspaceEditorSave;
+                            ComfyApp.onClipspaceEditorSave = function() {
+                                log.debug("SAM Detector onClipspaceEditorSave called, using unified clipspace validation");
+                                
+                                // Use the unified clipspace validation function
+                                const isValid = validateAndFixClipspace();
+                                if (!isValid) {
+                                    log.error("Clipspace validation failed, cannot proceed with paste");
+                                    return;
+                                }
+                                
+                                // Call the original function
+                                if (originalOnClipspaceEditorSave) {
+                                    originalOnClipspaceEditorSave.call(ComfyApp);
+                                }
+                                
+                                // Restore the original function after use
+                                if (originalOnClipspaceEditorSave) {
+                                    ComfyApp.onClipspaceEditorSave = originalOnClipspaceEditorSave;
+                                    originalOnClipspaceEditorSave = null;
+                                }
+                            };
+                        }
+                        
                         // Start monitoring for SAM Detector results
                         startSAMDetectorMonitoring(node);
                         

src/css/blend_mode_menu.css

@@ -0,0 +1,170 @@
+/* Blend Mode Menu Styles */
+#blend-mode-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #2a2a2a;
+    border: 1px solid #3a3a3a;
+    border-radius: 4px;
+    z-index: 10000;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+    min-width: 200px;
+}
+
+#blend-mode-menu .blend-menu-title-bar {
+    background: #3a3a3a;
+    color: white;
+    padding: 8px 10px;
+    cursor: move;
+    user-select: none;
+    border-radius: 3px 3px 0 0;
+    font-size: 12px;
+    font-weight: bold;
+    border-bottom: 1px solid #4a4a4a;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#blend-mode-menu .blend-menu-title-text {
+    flex: 1;
+    cursor: move;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#blend-mode-menu .blend-menu-close-button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    transition: background-color 0.2s;
+}
+
+#blend-mode-menu .blend-menu-close-button:hover {
+    background-color: #4a4a4a;
+}
+
+#blend-mode-menu .blend-menu-close-button:focus {
+    background-color: transparent;
+}
+
+#blend-mode-menu .blend-menu-content {
+    padding: 5px;
+}
+
+#blend-mode-menu .blend-area-container {
+    padding: 5px 10px;
+    border-bottom: 1px solid #4a4a4a;
+}
+
+#blend-mode-menu .blend-area-label {
+    color: white;
+    display: block;
+    margin-bottom: 5px;
+    font-size: 12px;
+}
+
+#blend-mode-menu .blend-area-slider {
+    width: 100%;
+    margin: 5px 0;
+    -webkit-appearance: none;
+    height: 4px;
+    background: #555;
+    border-radius: 2px;
+    outline: none;
+}
+
+#blend-mode-menu .blend-area-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+    transition: background 0.2s;
+}
+
+#blend-mode-menu .blend-area-slider::-webkit-slider-thumb:hover {
+    background: #fff;
+}
+
+#blend-mode-menu .blend-area-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+}
+
+#blend-mode-menu .blend-mode-container {
+    margin-bottom: 5px;
+}
+
+#blend-mode-menu .blend-mode-option {
+    padding: 5px 10px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+#blend-mode-menu .blend-mode-option:hover {
+    background-color: #3a3a3a;
+}
+
+#blend-mode-menu .blend-mode-option.active {
+    background-color: #3a3a3a;
+}
+
+#blend-mode-menu .blend-opacity-slider {
+    width: 100%;
+    margin: 5px 0;
+    display: none;
+    -webkit-appearance: none;
+    height: 4px;
+    background: #555;
+    border-radius: 2px;
+    outline: none;
+}
+
+#blend-mode-menu .blend-mode-container.active .blend-opacity-slider {
+    display: block;
+}
+
+#blend-mode-menu .blend-opacity-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+    transition: background 0.2s;
+}
+
+#blend-mode-menu .blend-opacity-slider::-webkit-slider-thumb:hover {
+    background: #fff;
+}
+
+#blend-mode-menu .blend-opacity-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 2px solid #555;
+}

src/css/canvas_view.css

@@ -7,7 +7,7 @@
     font-size: 12px;
     font-weight: 550;
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
+    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
     min-width: 80px;
     text-align: center;
     margin: 2px;
@@ -51,6 +51,32 @@
     border-color: #3a76d6;
 }
 
+/* Crop mode button styling */
+.painter-button#crop-mode-btn {
+    background-color: #444;
+    border-color: #555;
+    color: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.painter-button#crop-mode-btn.primary {
+    background-color: #0080ff;
+    border-color: #0070e0;
+    color: #fff;
+    box-shadow: 0 0 8px rgba(0, 128, 255, 0.3);
+}
+
+.painter-button#crop-mode-btn.primary:hover {
+    background-color: #1090ff;
+    border-color: #0080ff;
+    box-shadow: 0 0 12px rgba(0, 128, 255, 0.4);
+}
+
+.painter-button#crop-mode-btn:hover {
+    background-color: #555;
+    border-color: #666;
+}
+
 .painter-button.success {
     border-color: #4ae27a;
     background-color: #444;
@@ -187,7 +213,7 @@
     border-radius: 5px;
     border: 1px solid #555;
     cursor: pointer;
-    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
+    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
     user-select: none;
     padding: 0;
     font-family: inherit;
@@ -306,6 +332,25 @@
     opacity: 0;
 }
 
+/* Disabled state for switch */
+.clipboard-switch.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background: #3a3a3a !important; /* Override gradient */
+    border-color: #4a4a4a !important;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+.clipboard-switch.disabled .switch-knob {
+    background-color: #4a4a4a !important;
+}
+
+.clipboard-switch.disabled .switch-labels {
+    color: #777 !important;
+}
+
+
 
 .painter-separator {
     width: 1px;
@@ -593,7 +638,7 @@
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.8);
-    z-index: 111;
+    z-index: 999999;
     display: flex;
     align-items: center;
     justify-content: center;

src/css/layers_panel.css

@@ -0,0 +1,309 @@
+/* Layers Panel Styles */
+.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;
+}
+
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 0;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    position: relative;
+}
+
+.checkbox-container:hover {
+    background-color: #4a4a4a;
+}
+
+.checkbox-container input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.checkbox-container .custom-checkbox {
+    height: 16px;
+    width: 16px;
+    background-color: #2a2a2a;
+    border: 1px solid #666;
+    border-radius: 3px;
+    transition: all 0.2s;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.checkbox-container input:checked ~ .custom-checkbox {
+    background-color: #3a76d6;
+    border-color: #3a76d6;
+}
+
+.checkbox-container .custom-checkbox::after {
+    content: "";
+    position: absolute;
+    display: none;
+    left: 5px;
+    top: 1px;
+    width: 4px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.checkbox-container input:checked ~ .custom-checkbox::after {
+    display: block;
+}
+
+.checkbox-container input:indeterminate ~ .custom-checkbox {
+    background-color: #3a76d6;
+    border-color: #3a76d6;
+}
+
+.checkbox-container input:indeterminate ~ .custom-checkbox::after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: 3px;
+    width: 8px;
+    height: 2px;
+    background-color: white;
+    border: none;
+    transform: none;
+    box-shadow: none;
+}
+
+.checkbox-container:hover {
+    background-color: #4a4a4a;
+}
+
+.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-btn:disabled {
+    background: #2a2a2a;
+    color: #666666;
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.layers-btn:disabled:hover {
+    background: #2a2a2a;
+}
+
+.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;
+}
+
+.layer-visibility-toggle {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 2px;
+    font-size: 14px;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease;
+}
+
+.layer-visibility-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Icon container styles */
+.layers-panel .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.layers-panel .icon-container img {
+    filter: brightness(0) invert(1);
+}
+
+.layers-panel .icon-container.visibility-hidden {
+    opacity: 0.5;
+}
+
+.layers-panel .icon-container.visibility-hidden img {
+    filter: brightness(0) invert(1);
+    opacity: 0.3;
+}
+
+.layers-panel .icon-container.fallback-text {
+    font-size: 10px;
+    color: #888888;
+}

src/types.ts

@@ -1,6 +1,14 @@
 import type { Canvas as CanvasClass } from './Canvas';
 import type { CanvasLayers } from './CanvasLayers';
 
+export interface ComfyWidget {
+    name: string;
+    type: string;
+    value: any;
+    callback?: (value: any) => void;
+    options?: any;
+}
+
 export interface Layer {
     id: string;
     image: HTMLImageElement;
@@ -21,19 +29,27 @@ export interface Layer {
     flipH?: boolean;
     flipV?: boolean;
     blendArea?: number;
+    cropMode?: boolean;           // czy warstwa jest w trybie crop
+    cropBounds?: {               // granice przycinania
+        x: number;              // offset od lewej krawędzi obrazu
+        y: number;              // offset od górnej krawędzi obrazu  
+        width: number;          // szerokość widocznego obszaru
+        height: number;         // wysokość widocznego obszaru
+    };
 }
 
 export interface ComfyNode {
     id: number;
+    type: string;
+    widgets: ComfyWidget[];
     imgs?: HTMLImageElement[];
-    widgets: any[];
-    size: [number, number];
-    graph: any;
-    canvasWidget?: any;
+    size?: [number, number];
     onResize?: () => void;
-    addDOMWidget: (name: string, type: string, element: HTMLElement, options?: any) => any;
-    addWidget: (type: string, name: string, value: any, callback?: (value: any) => void, options?: any) => any;
-    setDirtyCanvas: (force: boolean, dirty: boolean) => void;
+    setDirtyCanvas?: (dirty: boolean, propagate: boolean) => void;
+    graph?: any;
+    onRemoved?: () => void;
+    addDOMWidget?: (name: string, type: string, element: HTMLElement) => void;
+    inputs?: Array<{ link: any }>;
 }
 
 declare global {
@@ -72,8 +88,14 @@ export interface Canvas {
     imageCache: any;
     dataInitialized: boolean;
     pendingDataCheck: number | null;
+    pendingInputDataCheck: number | null;
     pendingBatchContext: any;
     canvasLayers: any;
+    inputDataLoaded: boolean;
+    lastLoadedLinkId: any;
+    lastLoadedMaskLinkId: any;
+    lastLoadedImageSrc?: string;
+    outputAreaBounds: OutputAreaBounds;
     saveState: () => void;
     render: () => void;
     updateSelection: (layers: Layer[]) => void;

src/utils/ClipboardManager.ts

@@ -1,6 +1,7 @@
 import {createModuleLogger} from "./LoggerUtils.js";
-import { showNotification, showInfoNotification } from "./NotificationUtils.js";
+import { showNotification, showInfoNotification, showErrorNotification, showWarningNotification } from "./NotificationUtils.js";
 import { withErrorHandling, createValidationError, createNetworkError, createFileError } from "../ErrorHandler.js";
+import { safeClipspacePaste } from "./ClipspaceUtils.js";
 
 // @ts-ignore
 import {api} from "../../../scripts/api.js";
@@ -33,6 +34,7 @@ export class ClipboardManager {
         if (this.canvas.canvasLayers.internalClipboard.length > 0) {
             log.info("Found layers in internal clipboard, pasting layers");
             this.canvas.canvasLayers.pasteLayers();
+            showInfoNotification("Layers pasted from internal clipboard");
             return true;
         }
 
@@ -43,10 +45,22 @@ export class ClipboardManager {
                 return true;
             }
             log.info("No image found in ComfyUI Clipspace");
+            // Don't show error here, will try system clipboard next
         }
 
         log.info("Attempting paste from system clipboard");
-        return await this.trySystemClipboardPaste(addMode);
+        const systemSuccess = await this.trySystemClipboardPaste(addMode);
+        
+        if (!systemSuccess) {
+            // No valid image found in any clipboard
+            if (preference === 'clipspace') {
+                showWarningNotification("No valid image found in Clipspace or system clipboard");
+            } else {
+                showWarningNotification("No valid image found in clipboard");
+            }
+        }
+        
+        return systemSuccess;
     }, 'ClipboardManager.handlePaste');
 
     /**
@@ -56,7 +70,13 @@ export class ClipboardManager {
      */
     tryClipspacePaste = withErrorHandling(async (addMode: AddMode): Promise<boolean> => {
         log.info("Attempting to paste from ComfyUI Clipspace");
-        ComfyApp.pasteFromClipspace(this.canvas.node);
+        
+        // Use the unified clipspace validation and paste function
+        const pasteSuccess = safeClipspacePaste(this.canvas.node);
+        if (!pasteSuccess) {
+            log.debug("Safe clipspace paste failed");
+            return false;
+        }
 
         if (this.canvas.node.imgs && this.canvas.node.imgs.length > 0) {
             const clipspaceImage = this.canvas.node.imgs[0];
@@ -65,6 +85,7 @@ export class ClipboardManager {
                 const img = new Image();
                 img.onload = async () => {
                     await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                    showInfoNotification("Image pasted from Clipspace");
                 };
                 img.src = clipspaceImage.src;
                 return true;
@@ -98,6 +119,7 @@ export class ClipboardManager {
                                 img.onload = async () => {
                                     log.info("Successfully loaded image from system clipboard");
                                     await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                                    showInfoNotification("Image pasted from system clipboard");
                                 };
                                 if (event.target?.result) {
                                     img.src = event.target.result as string;
@@ -141,11 +163,22 @@ export class ClipboardManager {
                 const text = await navigator.clipboard.readText();
                 log.debug("Found text in clipboard:", text);
                 
-                if (text && this.isValidImagePath(text)) {
-                    log.info("Found valid image path in clipboard:", text);
-                    const success = await this.loadImageFromPath(text, addMode);
-                    if (success) {
-                        return true;
+                if (text) {
+                    // Check if it's a data URI (base64 encoded image)
+                    if (this.isDataURI(text)) {
+                        log.info("Found data URI in clipboard");
+                        const success = await this.loadImageFromDataURI(text, addMode);
+                        if (success) {
+                            return true;
+                        }
+                    }
+                    // Check if it's a regular file path or URL
+                    else if (this.isValidImagePath(text)) {
+                        log.info("Found valid image path in clipboard:", text);
+                        const success = await this.loadImageFromPath(text, addMode);
+                        if (success) {
+                            return true;
+                        }
                     }
                 }
             } catch (error) {
@@ -158,6 +191,50 @@ export class ClipboardManager {
     }
 
 
+    /**
+     * Checks if a text string is a data URI (base64 encoded image)
+     * @param {string} text - The text to check
+     * @returns {boolean} - True if the text is a data URI
+     */
+    isDataURI(text: string): boolean {
+        if (!text || typeof text !== 'string') {
+            return false;
+        }
+        
+        // Check if it starts with data:image
+        return text.trim().startsWith('data:image/');
+    }
+
+    /**
+     * Loads an image from a data URI (base64 encoded image)
+     * @param {string} dataURI - The data URI to load
+     * @param {AddMode} addMode - The mode for adding the layer
+     * @returns {Promise<boolean>} - True if successful, false otherwise
+     */
+    async loadImageFromDataURI(dataURI: string, addMode: AddMode): Promise<boolean> {
+        return new Promise((resolve) => {
+            try {
+                const img = new Image();
+                img.onload = async () => {
+                    log.info("Successfully loaded image from data URI");
+                    await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                    showInfoNotification("Image pasted from clipboard (base64)");
+                    resolve(true);
+                };
+                img.onerror = () => {
+                    log.warn("Failed to load image from data URI");
+                    showErrorNotification("Failed to load base64 image from clipboard", 5000, true);
+                    resolve(false);
+                };
+                img.src = dataURI;
+            } catch (error) {
+                log.error("Error loading data URI:", error);
+                showErrorNotification("Error processing base64 image from clipboard", 5000, true);
+                resolve(false);
+            }
+        });
+    }
+
     /**
      * Validates if a text string is a valid image file path or URL
      * @param {string} text - The text to validate
@@ -233,15 +310,17 @@ export class ClipboardManager {
                 const img = new Image();
                 img.crossOrigin = 'anonymous';
                 return new Promise((resolve) => {
-                    img.onload = async () => {
-                        log.info("Successfully loaded image from URL");
-                        await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
-                        resolve(true);
-                    };
-                    img.onerror = () => {
-                        log.warn("Failed to load image from URL:", filePath);
-                        resolve(false);
-                    };
+            img.onload = async () => {
+                log.info("Successfully loaded image from URL");
+                await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                showInfoNotification("Image loaded from URL");
+                resolve(true);
+            };
+            img.onerror = () => {
+                log.warn("Failed to load image from URL:", filePath);
+                showErrorNotification(`Failed to load image from URL\nThe link might be incorrect or may not point to an image file.: ${filePath}`, 5000, true);
+                resolve(false);
+            };
                     img.src = filePath;
                 });
             } catch (error) {
@@ -319,6 +398,7 @@ export class ClipboardManager {
             img.onload = async () => {
                 log.info("Successfully loaded image from backend response");
                 await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                showInfoNotification("Image loaded from file path");
                 resolve(true);
             };
             img.onerror = () => {
@@ -359,6 +439,7 @@ export class ClipboardManager {
                             img.onload = async () => {
                                 log.info("Successfully loaded image from file picker");
                                 await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+                                showInfoNotification("Image loaded from selected file");
                                 resolve(true);
                             };
                             img.onerror = () => {

src/utils/ClipspaceUtils.ts

@@ -0,0 +1,114 @@
+import { createModuleLogger } from "./LoggerUtils.js";
+// @ts-ignore
+import { ComfyApp } from "../../../scripts/app.js";
+
+const log = createModuleLogger('ClipspaceUtils');
+
+/**
+ * Validates and fixes ComfyUI clipspace structure to prevent 'Cannot read properties of undefined' errors
+ * @returns {boolean} - True if clipspace is valid and ready to use, false otherwise
+ */
+export function validateAndFixClipspace(): boolean {
+    log.debug("Validating and fixing clipspace structure");
+    
+    // Check if clipspace exists
+    if (!ComfyApp.clipspace) {
+        log.debug("ComfyUI clipspace is not available");
+        return false;
+    }
+    
+    // Validate clipspace structure
+    if (!ComfyApp.clipspace.imgs || ComfyApp.clipspace.imgs.length === 0) {
+        log.debug("ComfyUI clipspace has no images");
+        return false;
+    }
+    
+    log.debug("Current clipspace state:", {
+        hasImgs: !!ComfyApp.clipspace.imgs,
+        imgsLength: ComfyApp.clipspace.imgs?.length,
+        selectedIndex: ComfyApp.clipspace.selectedIndex,
+        combinedIndex: ComfyApp.clipspace.combinedIndex,
+        img_paste_mode: ComfyApp.clipspace.img_paste_mode
+    });
+    
+    // Ensure required indices are set
+    if (ComfyApp.clipspace.selectedIndex === undefined || ComfyApp.clipspace.selectedIndex === null) {
+        ComfyApp.clipspace.selectedIndex = 0;
+        log.debug("Fixed clipspace selectedIndex to 0");
+    }
+    
+    if (ComfyApp.clipspace.combinedIndex === undefined || ComfyApp.clipspace.combinedIndex === null) {
+        ComfyApp.clipspace.combinedIndex = 0;
+        log.debug("Fixed clipspace combinedIndex to 0");
+    }
+    
+    if (!ComfyApp.clipspace.img_paste_mode) {
+        ComfyApp.clipspace.img_paste_mode = 'selected';
+        log.debug("Fixed clipspace img_paste_mode to 'selected'");
+    }
+    
+    // Ensure indices are within bounds
+    const maxIndex = ComfyApp.clipspace.imgs.length - 1;
+    if (ComfyApp.clipspace.selectedIndex > maxIndex) {
+        ComfyApp.clipspace.selectedIndex = maxIndex;
+        log.debug(`Fixed clipspace selectedIndex to ${maxIndex} (max available)`);
+    }
+    if (ComfyApp.clipspace.combinedIndex > maxIndex) {
+        ComfyApp.clipspace.combinedIndex = maxIndex;
+        log.debug(`Fixed clipspace combinedIndex to ${maxIndex} (max available)`);
+    }
+    
+    // Verify the image at combinedIndex exists and has src
+    const combinedImg = ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex];
+    if (!combinedImg || !combinedImg.src) {
+        log.debug("Image at combinedIndex is missing or has no src, trying to find valid image");
+        // Try to use the first available image
+        for (let i = 0; i < ComfyApp.clipspace.imgs.length; i++) {
+            if (ComfyApp.clipspace.imgs[i] && ComfyApp.clipspace.imgs[i].src) {
+                ComfyApp.clipspace.combinedIndex = i;
+                log.debug(`Fixed combinedIndex to ${i} (first valid image)`);
+                break;
+            }
+        }
+        
+        // Final check - if still no valid image found
+        const finalImg = ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex];
+        if (!finalImg || !finalImg.src) {
+            log.error("No valid images found in clipspace after attempting fixes");
+            return false;
+        }
+    }
+    
+    log.debug("Final clipspace structure:", {
+        selectedIndex: ComfyApp.clipspace.selectedIndex,
+        combinedIndex: ComfyApp.clipspace.combinedIndex,
+        img_paste_mode: ComfyApp.clipspace.img_paste_mode,
+        imgsLength: ComfyApp.clipspace.imgs?.length,
+        combinedImgSrc: ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex]?.src?.substring(0, 50) + '...'
+    });
+    
+    return true;
+}
+
+/**
+ * Safely calls ComfyApp.pasteFromClipspace after validating clipspace structure
+ * @param {any} node - The ComfyUI node to paste to
+ * @returns {boolean} - True if paste was successful, false otherwise
+ */
+export function safeClipspacePaste(node: any): boolean {
+    log.debug("Attempting safe clipspace paste");
+    
+    if (!validateAndFixClipspace()) {
+        log.debug("Clipspace validation failed, cannot paste");
+        return false;
+    }
+    
+    try {
+        ComfyApp.pasteFromClipspace(node);
+        log.debug("Successfully called pasteFromClipspace");
+        return true;
+    } catch (error) {
+        log.error("Error calling pasteFromClipspace:", error);
+        return false;
+    }
+}

src/utils/IconLoader.ts

@@ -13,7 +13,7 @@ export const LAYERFORGE_TOOLS = {
     DELETE: 'delete',
     DUPLICATE: 'duplicate',
     BLEND_MODE: 'blend_mode',
-    OPACITY: 'opacity', 
+    OPACITY: 'opacity',
     MASK: 'mask',
     BRUSH: 'brush',
     ERASER: 'eraser',
@@ -21,16 +21,22 @@ export const LAYERFORGE_TOOLS = {
     SETTINGS: 'settings',
     SYSTEM_CLIPBOARD: 'system_clipboard',
     CLIPSPACE: 'clipspace',
+    CROP: 'crop',
+    TRANSFORM: 'transform',
 } as const;
 
 // SVG Icons for LayerForge tools
 const SYSTEM_CLIPBOARD_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm5 15H7v-2h10v2zm0-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>`;
 const CLIPSPACE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">  <defs>    <mask id="cutout">      <rect width="100%" height="100%" fill="white"/>           <path         d="M5.485 23.76c-.568 0-1.026-.207-1.325-.598-.307-.402-.387-.964-.22-1.54l.672-2.315a.605.605 0 00-.1-.536.622.622 0 00-.494-.243H2.085c-.568 0-1.026-.207-1.325-.598-.307-.403-.387-.964-.22-1.54l2.31-7.917.255-.87c.343-1.18 1.592-2.14 2.786-2.14h2.313c.276 0 .519-.18.595-.442l.764-2.633C9.906 1.208 11.155.249 12.35.249l4.945-.008h3.62c.568 0 1.027.206 1.325.597.307.402.387.964.22 1.54l-1.035 3.566c-.343 1.178-1.593 2.137-2.787 2.137l-4.956.01H11.37a.618.618 0 00-.594.441l-1.928 6.604a.605.605 0 00.1.537c.118.153.3.243.495.243l3.275-.006h3.61c.568 0 1.026.206 1.325.598.307.402.387.964.22 1.54l-1.036 3.565c-.342 1.179-1.592 2.138-2.786 2.138l-4.957.01h-3.61z"         fill="black"         transform="translate(4.8 4.8) scale(0.6)"      />    </mask>  </defs>  <path     d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z"     fill="#ffffff"     mask="url(#cutout)"  /></svg>`;
+const CROP_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M17 15h3V7c0-1.1-.9-2-2-2H10v3h7v7zM7 18V1H4v4H0v3h4v10c0 2 1 3 3 3h10v4h3v-4h4v-3H24z"/></svg>';
+const TRANSFORM_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M11.3 17.096c.092-.044.34-.052 1.028-.044l.912.008.124.124c.184.184.184.408.004.584l-.128.132-.896.012c-.72.008-.924 0-1.036-.048-.18-.072-.284-.264-.256-.452.028-.168.092-.248.248-.316Zm-3.164 0c.096-.044.328-.052 1.036-.044l.916.008.116.132c.16.18.16.396 0 .576l-.116.132-.876.012c-.552.008-.928-.004-1.02-.032-.388-.112-.428-.62-.056-.784Zm-4.6-1.168.112-.096 1.42.004 1.424.004.116.116.116.116V17.48v1.408l-.116.116-.116.116H5.068h-1.42l-.112-.096-.112-.096L3.42 17.48V16.032l.112-.096ZM4.78 12.336c.104-.104.168-.136.284-.136s.18.032.284.136l.136.136v.964.964l-.116.128c-.1.112-.144.132-.304.132s-.204-.02-.304-.132L4.644 14.4l-.004-.964v-.964l.136-.136Zm8.868-.648c-.008-.024-.004-.048.008-.048s1.504.512 3.312 1.136c1.812.624 4.252 1.464 5.424 1.868 1.168.404 2.128.744 2.128.76 0 .012-.24.108-.528.212-.292.104-1.468.52-2.616.928l-2.08.74-.936 2.62c-.512 1.44-.944 2.616-.956 2.616-.016 0-.86-2.424-1.88-5.392-1.02-2.964-1.864-5.412-1.876-5.44ZM19.292 9.08c.216-.088.432-.02.548.168.076.124.08.188.072 1.06l-.012.928-.116.12c-.1.104-.148.124-.304.124s-.204-.02-.304-.124l-.116-.12-.012-.928c-.008-.872-.004-.936.072-1.06.044-.072.12-.148.172-.168Zm-14.516.096c.104-.104.168-.136.284-.136s.18.032.284.136l.136.136v.956c0 1.064-.004 1.088-.268 1.2-.18.072-.376.012-.492-.148-.076-.104-.08-.172-.08-1.06V9.312l.136-.136ZM19.192 6c.096-.088.168-.116.288-.116s.192.028.288.116l.132.116V7.1v.98l-.116.12c-.1.104-.148.124-.304.124s-.204-.02-.304-.124l-.116-.12V7.096 6.112l.132-.116ZM4.816 5.964c.048-.044.152-.072.256-.072.144 0 .196.02.292.124l.116.124v.98.968l-.116.116c-.092.092-.152.116-.284.116-.408 0-.44-.28-.44-1.22s.012-1.016.176-1.148Zm9.516-3.192.14-.136.968.004h.968l.112.116c.152.152.188.3.108.468-.124.252-.196.276-1.044.288-.42.008-.84.004-.936-.012-.24-.036-.38-.192-.436-.408-.02-.156-.008-.184.12-.312Zm-3.156-.268.136.136h.956c1.064 0 1.088.004 1.2.268.072.172.016.372-.136.492-.096.076-.16.08-1.06.08h-.96l-.136-.136c-.104-.104-.136-.168-.136-.284s.032-.18.136-.284Zm-3.16 0 .136.136h.96c.94 0 .964.004 1.068.088.2.176.196.508-.004.668-.1.08-.156.084-1.064.084h-.96l-.136-.136c-.188-.188-.188-.38 0-.568Zm10.04-1.14c.044-.02.712-.032 1.476-.028l1.396.008.096.112.096.112v1.424 1.5l-.116.116-.116.116L19.48 4.72H18.072l-.116-.116-.116-.116V3.072c0-1.524.004-1.544.216-1.632ZM3.62 1.456c.184-.08 2.74-.08 2.896 0 .196.104.204.164.204 1.604s-.008 1.5-.204 1.604c-.148.076-2.732.084-2.896.008-.212-.096-.22-.148-.22-1.608s.008-1.516.22-1.608Z"/></svg>';
 
 
 const LAYERFORGE_TOOL_ICONS = {
     [LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(SYSTEM_CLIPBOARD_ICON_SVG)}`,
     [LAYERFORGE_TOOLS.CLIPSPACE]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(CLIPSPACE_ICON_SVG)}`,
+    [LAYERFORGE_TOOLS.CROP]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(CROP_ICON_SVG)}`,
+    [LAYERFORGE_TOOLS.TRANSFORM]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(TRANSFORM_ICON_SVG)}`,
     [LAYERFORGE_TOOLS.VISIBILITY]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>')}`,
     
     [LAYERFORGE_TOOLS.MOVE]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"/></svg>')}`,
@@ -72,7 +78,9 @@ const LAYERFORGE_TOOL_COLORS = {
     [LAYERFORGE_TOOLS.BRUSH]: '#4285F4',
     [LAYERFORGE_TOOLS.ERASER]: '#FBBC05',
     [LAYERFORGE_TOOLS.SHAPE]: '#FF6D01',
-    [LAYERFORGE_TOOLS.SETTINGS]: '#F06292'
+    [LAYERFORGE_TOOLS.SETTINGS]: '#F06292',
+    [LAYERFORGE_TOOLS.CROP]: '#EA4335',
+    [LAYERFORGE_TOOLS.TRANSFORM]: '#34A853',
 };
 
 export interface IconCache {

src/utils/ImageUploadUtils.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { api } from "../../../scripts/api.js";
 import { createModuleLogger } from "./LoggerUtils.js";
 import { withErrorHandling, createValidationError, createNetworkError } from "../ErrorHandler.js";

src/utils/ImageUtils.ts

@@ -386,3 +386,111 @@ export function canvasToMaskImage(canvas: HTMLCanvasElement): Promise<HTMLImageE
         img.src = canvas.toDataURL();
     });
 }
+
+/**
+ * Scales an image to fit within specified bounds while maintaining aspect ratio
+ * @param image - Image to scale
+ * @param targetWidth - Target width to fit within
+ * @param targetHeight - Target height to fit within
+ * @returns Promise with scaled Image element
+ */
+export async function scaleImageToFit(image: HTMLImageElement, targetWidth: number, targetHeight: number): Promise<HTMLImageElement> {
+    const scale = Math.min(targetWidth / image.width, targetHeight / image.height);
+    const scaledWidth = Math.max(1, Math.round(image.width * scale));
+    const scaledHeight = Math.max(1, Math.round(image.height * scale));
+    
+    const { canvas, ctx } = createCanvas(scaledWidth, scaledHeight, '2d', { willReadFrequently: true });
+    if (!ctx) throw new Error("Could not create scaled image context");
+    
+    ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
+    
+    return new Promise((resolve, reject) => {
+        const scaledImg = new Image();
+        scaledImg.onload = () => resolve(scaledImg);
+        scaledImg.onerror = reject;
+        scaledImg.src = canvas.toDataURL();
+    });
+}
+
+/**
+ * Unified tensor to image data conversion
+ * Handles both RGB images and grayscale masks
+ * @param tensor - Input tensor data
+ * @param mode - 'rgb' for images or 'grayscale' for masks
+ * @returns ImageData object
+ */
+export function tensorToImageData(tensor: any, mode: 'rgb' | 'grayscale' = 'rgb'): ImageData | null {
+    try {
+        const shape = tensor.shape;
+        const height = shape[1];
+        const width = shape[2];
+        const channels = shape[3] || 1; // Default to 1 for masks
+
+        log.debug("Converting tensor:", { shape, channels, mode });
+
+        const imageData = new ImageData(width, height);
+        const data = new Uint8ClampedArray(width * height * 4);
+
+        const flatData = tensor.data;
+        const pixelCount = width * height;
+
+        const min = tensor.min_val ?? 0;
+        const max = tensor.max_val ?? 1;
+        const denom = (max - min) || 1;
+
+        for (let i = 0; i < pixelCount; i++) {
+            const pixelIndex = i * 4;
+            const tensorIndex = i * channels;
+
+            let lum: number;
+            if (mode === 'grayscale' || channels === 1) {
+                lum = flatData[tensorIndex];
+            } else {
+                // Compute luminance for RGB
+                const r = flatData[tensorIndex + 0] ?? 0;
+                const g = flatData[tensorIndex + 1] ?? 0;
+                const b = flatData[tensorIndex + 2] ?? 0;
+                lum = 0.299 * r + 0.587 * g + 0.114 * b;
+            }
+
+            let norm = (lum - min) / denom;
+            if (!isFinite(norm)) norm = 0;
+            norm = Math.max(0, Math.min(1, norm));
+            const value = Math.round(norm * 255);
+
+            if (mode === 'grayscale') {
+                // For masks: RGB = value, A = 255 (MaskTool reads luminance)
+                data[pixelIndex] = value;
+                data[pixelIndex + 1] = value;
+                data[pixelIndex + 2] = value;
+                data[pixelIndex + 3] = 255;
+            } else {
+                // For images: RGB from channels, A = 255
+                for (let c = 0; c < Math.min(3, channels); c++) {
+                    const channelValue = flatData[tensorIndex + c];
+                    const channelNorm = (channelValue - min) / denom;
+                    data[pixelIndex + c] = Math.round(channelNorm * 255);
+                }
+                data[pixelIndex + 3] = 255;
+            }
+        }
+
+        imageData.data.set(data);
+        return imageData;
+    } catch (error) {
+        log.error("Error converting tensor:", error);
+        return null;
+    }
+}
+
+/**
+ * Creates an HTMLImageElement from ImageData
+ * @param imageData - Input ImageData
+ * @returns Promise with HTMLImageElement
+ */
+export async function createImageFromImageData(imageData: ImageData): Promise<HTMLImageElement> {
+    const { canvas, ctx } = createCanvas(imageData.width, imageData.height, '2d', { willReadFrequently: true });
+    if (!ctx) throw new Error("Could not create canvas context");
+    ctx.putImageData(imageData, 0, 0);
+    return await createImageFromSource(canvas.toDataURL());
+}

src/utils/NotificationUtils.ts

@@ -2,6 +2,9 @@ import { createModuleLogger } from "./LoggerUtils.js";
 
 const log = createModuleLogger('NotificationUtils');
 
+// Store active notifications for deduplication
+const activeNotifications = new Map<string, { element: HTMLDivElement, timeout: number | null }>();
+
 /**
  * Utility functions for showing notifications to the user
  */
@@ -11,16 +14,62 @@ const log = createModuleLogger('NotificationUtils');
  * @param message - The message to show
  * @param backgroundColor - Background color (default: #4a6cd4)
  * @param duration - Duration in milliseconds (default: 3000)
+ * @param type - Type of notification
+ * @param deduplicate - If true, will not show duplicate messages and will refresh existing ones (default: false)
  */
 export function showNotification(
     message: string,
     backgroundColor: string = "#4a6cd4",
     duration: number = 3000,
-    type: "success" | "error" | "info" | "warning" | "alert" = "info"
+    type: "success" | "error" | "info" | "warning" | "alert" = "info",
+    deduplicate: boolean = false
 ): void {
     // Remove any existing prefix to avoid double prefixing
     message = message.replace(/^\[Layer Forge\]\s*/, "");
 
+    // If deduplication is enabled, check if this message already exists
+    if (deduplicate) {
+        const existingNotification = activeNotifications.get(message);
+        if (existingNotification) {
+            log.debug(`Notification already exists, refreshing timer: ${message}`);
+            
+            // Clear existing timeout
+            if (existingNotification.timeout !== null) {
+                clearTimeout(existingNotification.timeout);
+            }
+            
+            // Find the progress bar and restart its animation
+            const progressBar = existingNotification.element.querySelector('div[style*="animation"]') as HTMLDivElement;
+            if (progressBar) {
+                // Reset animation
+                progressBar.style.animation = 'none';
+                // Force reflow
+                void progressBar.offsetHeight;
+                // Restart animation
+                progressBar.style.animation = `lf-progress ${duration / 1000}s linear`;
+            }
+            
+            // Set new timeout
+            const newTimeout = window.setTimeout(() => {
+                const notification = existingNotification.element;
+                notification.style.animation = 'lf-fadeout 0.3s ease-out forwards';
+                notification.addEventListener('animationend', () => {
+                    if (notification.parentNode) {
+                        notification.parentNode.removeChild(notification);
+                        activeNotifications.delete(message);
+                        const container = document.getElementById('lf-notification-container');
+                        if (container && container.children.length === 0) {
+                            container.remove();
+                        }
+                    }
+                });
+            }, duration);
+            
+            existingNotification.timeout = newTimeout;
+            return; // Don't create a new notification
+        }
+    }
+
     // Type-specific config
     const config = {
         success: { icon: "✔️", title: "Success", bg: "#1fd18b" },
@@ -172,6 +221,11 @@ export function showNotification(
 
     let dismissTimeout: number | null = null;
     const closeNotification = () => {
+        // Remove from active notifications map if deduplicate is enabled
+        if (deduplicate) {
+            activeNotifications.delete(message);
+        }
+        
         notification.style.animation = 'lf-fadeout 0.3s ease-out forwards';
         notification.addEventListener('animationend', () => {
             if (notification.parentNode) {
@@ -198,46 +252,86 @@ export function showNotification(
         progressBar.style.animation = 'lf-progress-rewind 0.5s ease-out forwards';
     };
 
-    notification.addEventListener('mouseenter', pauseAndRewindTimer);
-    notification.addEventListener('mouseleave', startDismissTimer);
+    notification.addEventListener('mouseenter', () => {
+        pauseAndRewindTimer();
+        // Update stored timeout if deduplicate is enabled
+        if (deduplicate) {
+            const stored = activeNotifications.get(message);
+            if (stored) {
+                stored.timeout = null;
+            }
+        }
+    });
+    
+    notification.addEventListener('mouseleave', () => {
+        startDismissTimer();
+        // Update stored timeout if deduplicate is enabled
+        if (deduplicate) {
+            const stored = activeNotifications.get(message);
+            if (stored) {
+                stored.timeout = dismissTimeout;
+            }
+        }
+    });
     
     startDismissTimer();
+    
+    // Store notification if deduplicate is enabled
+    if (deduplicate) {
+        activeNotifications.set(message, { element: notification, timeout: dismissTimeout });
+    }
+    
     log.debug(`Notification shown: [Layer Forge] ${message}`);
 }
 
 /**
  * Shows a success notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showSuccessNotification(message: string, duration: number = 3000): void {
-    showNotification(message, undefined, duration, "success");
+export function showSuccessNotification(message: string, duration: number = 3000, deduplicate: boolean = false): void {
+    showNotification(message, undefined, duration, "success", deduplicate);
 }
 
 /**
  * Shows an error notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 5000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showErrorNotification(message: string, duration: number = 5000): void {
-    showNotification(message, undefined, duration, "error");
+export function showErrorNotification(message: string, duration: number = 5000, deduplicate: boolean = false): void {
+    showNotification(message, undefined, duration, "error", deduplicate);
 }
 
 /**
  * Shows an info notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showInfoNotification(message: string, duration: number = 3000): void {
-    showNotification(message, undefined, duration, "info");
+export function showInfoNotification(message: string, duration: number = 3000, deduplicate: boolean = false): void {
+    showNotification(message, undefined, duration, "info", deduplicate);
 }
 
 /**
  * Shows a warning notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showWarningNotification(message: string, duration: number = 3000): void {
-    showNotification(message, undefined, duration, "warning");
+export function showWarningNotification(message: string, duration: number = 3000, deduplicate: boolean = false): void {
+    showNotification(message, undefined, duration, "warning", deduplicate);
 }
 
 /**
  * Shows an alert notification
+ * @param message - The message to show
+ * @param duration - Duration in milliseconds (default: 3000)
+ * @param deduplicate - If true, will not show duplicate messages (default: false)
  */
-export function showAlertNotification(message: string, duration: number = 3000): void {
-    showNotification(message, undefined, duration, "alert");
+export function showAlertNotification(message: string, duration: number = 3000, deduplicate: boolean = false): void {
+    showNotification(message, undefined, duration, "alert", deduplicate);
 }
 
 /**
@@ -248,7 +342,7 @@ export function showAllNotificationTypes(message?: string): void {
     types.forEach((type, index) => {
         const notificationMessage = message || `This is a '${type}' notification.`;
         setTimeout(() => {
-            showNotification(notificationMessage, undefined, 3000, type);
+            showNotification(notificationMessage, undefined, 3000, type, false);
         }, index * 400); // Stagger the notifications
     });
 }