Merge pull request #24 from diodiogod/fix/keyboard-shortcuts-focus-check

Fix keyboard shortcuts capturing events when node is unfocused

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -139,7 +139,7 @@ body:
   - type: textarea
     id: additional
     attributes:
-      label: Additional Context, Environment (OS, ComfyUI versions, ResolutionMaster version)
+      label: Additional Context, Environment (OS, ComfyUI versions, Comfyui-LayerForge version)
       description: Any other information that might help (OS, GPU, specific nodes involved, etc.)
 
       

README.md

@@ -19,6 +19,15 @@
   <img alt="JavaScript" src="https://img.shields.io/badge/-JavaScript-000000?logo=javascript&logoColor=F7DF1E&style=for-the-badge&logoWidth=20">
 </p>
 
+<p align="center">
+  <strong>🔹 <a href="https://github.com/Azornes/Comfyui-LayerForge?tab=readme-ov-file#-installation">Quick Start</a></strong>
+  &nbsp; | &nbsp;
+  <strong>🧩 <a href="https://github.com/Azornes/Comfyui-LayerForge?tab=readme-ov-file#-workflow-example">Workflow Example</a></strong>
+  &nbsp; | &nbsp;
+  <strong>⚠️ <a href="https://github.com/Azornes/Comfyui-LayerForge?tab=readme-ov-file#%EF%B8%8F-known-issues--compatibility">Known Issues</a></strong>
+
+</p>
+
 ### Why LayerForge?
 
 - **Full Creative Control:** Move beyond simple image inputs. Composite, mask, and blend multiple elements without
@@ -66,11 +75,12 @@ https://github.com/user-attachments/assets/9c7ce1de-873b-4a3b-8579-0fc67642af3a
 ## 🚀 Installation
 
 ### Install via ComfyUI-Manager
-* Search `Comfyui-LayerForge` in ComfyUI-Manager and click `Install` button.
+1. Search `Comfyui-LayerForge` in ComfyUI-Manager and click `Install` button.
+2. Restart ComfyUI.
 
 ### Manual Install
-1. Install [ComfyUi](https://github.com/comfyanonymous/ComfyUI).
+1. Install [ComfyUi](https://github.com/comfyanonymous/ComfyUI). I use [portable](https://docs.comfy.org/installation/comfyui_portable_windows) version.
-2. Clone this repo into `custom_modules`:
+2. Clone this repo into `custom_nodes`:
     ```bash
     cd ComfyUI/custom_nodes/
     git clone https://github.com/Azornes/Comfyui-LayerForge.git
@@ -230,18 +240,24 @@ optional feature and requires a model.
 
 ---
 
-## 🔧 Troubleshooting
+## ⚠️ Known Issues / Compatibility
 
-### `node_id` not auto-filled → black output
+#### ○ Incompatibility with Modern Node Design (Vue Nodes)
+> This node is **not compatible** with the new Vue Nodes display system.  
+>  
+> 🔧 **How to fix:**  
+> Go to **Settings → (search) "Vue Nodes" → Disable "Modern Node Design (Vue Nodes)"**.
 
-In some cases, **ComfyUI doesn't auto-fill the `node_id`** when adding a node.
+---
-As a result, the node may produce a **completely black image** or not work at all.
 
-**Workaround:**
+#### ○ `node_id` not auto-filled → black output 
-
+> In some cases, **ComfyUI doesn’t auto-fill the `node_id`** when adding a node.  
-* Search node ID in ComfyUI settings.
+> This may cause the node to output a **completely black image** or fail to work.
-* In NodesMap check "Enable node ID display"
+>
-* Manually enter the correct `node_id` (match the ID Node "LayerForge" shown above the node, on the right side).
+> 🛠️ **Workaround:**  
+> - Open **Settings → NodesMap → Enable "Show node IDs"**  
+> - Find the correct ID for your node *(match the ID Node "LayerForge" shown above the node, on the right side)*.
+> - Manually enter the correct `node_id` in the LayerForge node
 
 > [!WARNING]  
 > This is a known issue and not yet fixed.
@@ -256,10 +272,13 @@ This project is licensed under the MIT License. Feel free to use, modify, and di
 ---
 
 ## 💖 Support / Sponsorship
-
+• ⭐ Give a star — it means a lot to me!  
-If you’d like to support my work:  
+• 🐛 Report a bug or suggest a feature  
+• 💖 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

js/Canvas.js

@@ -443,8 +443,8 @@ export class Canvas {
      * Inicjalizuje podstawowe właściwości canvas
      */
     initCanvas() {
-        this.canvas.width = this.width;
+        // Don't set canvas.width/height here - let the render loop handle it based on clientWidth/clientHeight
-        this.canvas.height = this.height;
+        // this.width and this.height are for the OUTPUT AREA, not the display canvas
         this.canvas.style.border = '1px solid black';
         this.canvas.style.maxWidth = '100%';
         this.canvas.style.backgroundColor = '#606060';

js/CanvasIO.js

@@ -197,6 +197,25 @@ export class CanvasIO {
     }
     async _renderOutputData() {
         log.info("=== RENDERING OUTPUT DATA FOR COMFYUI ===");
+        // Check if layers have valid images loaded, with retry logic
+        const maxRetries = 5;
+        const retryDelay = 200;
+        for (let attempt = 0; attempt < maxRetries; attempt++) {
+            const layersWithoutImages = this.canvas.layers.filter(layer => !layer.image || !layer.image.complete);
+            if (layersWithoutImages.length === 0) {
+                break; // All images loaded
+            }
+            if (attempt === 0) {
+                log.warn(`${layersWithoutImages.length} layer(s) have incomplete image data. Waiting for images to load...`);
+            }
+            if (attempt < maxRetries - 1) {
+                await new Promise(resolve => setTimeout(resolve, retryDelay));
+            }
+            else {
+                // Last attempt failed
+                throw new Error(`Canvas not ready after ${maxRetries} attempts: ${layersWithoutImages.length} layer(s) still have incomplete image data. Try waiting a moment and running again.`);
+            }
+        }
         // Użyj zunifikowanych funkcji z CanvasLayers
         const imageBlob = await this.canvas.canvasLayers.getFlattenedCanvasAsBlob();
         const maskBlob = await this.canvas.canvasLayers.getFlattenedMaskAsBlob();

js/CanvasInteractions.js

@@ -41,6 +41,7 @@ export class CanvasInteractions {
             canvasMoveRect: null,
             outputAreaTransformHandle: null,
             outputAreaTransformAnchor: { x: 0, y: 0 },
+            hoveringGrabIcon: false,
         };
         this.originalLayerPositions = new Map();
     }
@@ -103,6 +104,8 @@ export class CanvasInteractions {
         // Add a blur event listener to the window to reset key states
         window.addEventListener('blur', this.onBlur);
         document.addEventListener('paste', this.onPaste);
+        // Intercept Ctrl+V during capture phase to handle layer paste before ComfyUI
+        document.addEventListener('keydown', this.onKeyDown, { capture: true });
         this.canvas.canvas.addEventListener('mouseenter', this.onMouseEnter);
         this.canvas.canvas.addEventListener('mouseleave', this.onMouseLeave);
         this.canvas.canvas.addEventListener('dragover', this.onDragOver);
@@ -118,6 +121,8 @@ export class CanvasInteractions {
         this.canvas.canvas.removeEventListener('wheel', this.onWheel);
         this.canvas.canvas.removeEventListener('keydown', this.onKeyDown);
         this.canvas.canvas.removeEventListener('keyup', this.onKeyUp);
+        // Remove document-level capture listener
+        document.removeEventListener('keydown', this.onKeyDown, { capture: true });
         window.removeEventListener('blur', this.onBlur);
         document.removeEventListener('paste', this.onPaste);
         this.canvas.canvas.removeEventListener('mouseenter', this.onMouseEnter);
@@ -151,6 +156,29 @@ export class CanvasInteractions {
         }
         return false;
     }
+    /**
+     * Sprawdza czy punkt znajduje się w obszarze ikony "grab" (środek layera)
+     * Zwraca layer, jeśli kliknięto w ikonę grab
+     */
+    getGrabIconAtPosition(worldX, worldY) {
+        // Rozmiar ikony grab w pikselach światowych
+        const grabIconRadius = 20 / this.canvas.viewport.zoom;
+        for (const layer of this.canvas.canvasSelection.selectedLayers) {
+            if (!layer.visible)
+                continue;
+            const centerX = layer.x + layer.width / 2;
+            const centerY = layer.y + layer.height / 2;
+            // Sprawdź czy punkt jest w obszarze ikony grab (okrąg wokół środka)
+            const dx = worldX - centerX;
+            const dy = worldY - centerY;
+            const distanceSquared = dx * dx + dy * dy;
+            const radiusSquared = grabIconRadius * grabIconRadius;
+            if (distanceSquared <= radiusSquared) {
+                return layer;
+            }
+        }
+        return null;
+    }
     resetInteractionState() {
         this.interaction.mode = 'none';
         this.interaction.resizeHandle = null;
@@ -164,6 +192,12 @@ export class CanvasInteractions {
     }
     handleMouseDown(e) {
         this.canvas.canvas.focus();
+        // Sync modifier states with actual event state to prevent "stuck" modifiers
+        // when focus moves between layers panel and canvas
+        this.interaction.isCtrlPressed = e.ctrlKey;
+        this.interaction.isMetaPressed = e.metaKey;
+        this.interaction.isShiftPressed = e.shiftKey;
+        this.interaction.isAltPressed = e.altKey;
         const coords = this.getMouseCoordinates(e);
         const mods = this.getModifierState(e);
         if (this.interaction.mode === 'drawingMask') {
@@ -227,6 +261,14 @@ export class CanvasInteractions {
             this.startLayerTransform(transformTarget.layer, transformTarget.handle, coords.world);
             return;
         }
+        // Check if clicking on grab icon of a selected layer
+        const grabIconLayer = this.getGrabIconAtPosition(coords.world.x, coords.world.y);
+        if (grabIconLayer) {
+            // Start dragging the selected layer(s) without changing selection
+            this.interaction.mode = 'potential-drag';
+            this.interaction.dragStart = { ...coords.world };
+            return;
+        }
         const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(coords.world.x, coords.world.y);
         if (clickedLayerResult) {
             this.prepareForDrag(clickedLayerResult.layer, coords.world);
@@ -282,6 +324,13 @@ export class CanvasInteractions {
                 }
                 break;
             default:
+                // Check if hovering over grab icon
+                const wasHovering = this.interaction.hoveringGrabIcon;
+                this.interaction.hoveringGrabIcon = this.getGrabIconAtPosition(coords.world.x, coords.world.y) !== null;
+                // Re-render if hover state changed to show/hide grab icon
+                if (wasHovering !== this.interaction.hoveringGrabIcon) {
+                    this.canvas.render();
+                }
                 this.updateCursor(coords.world);
                 // Update brush cursor on overlay if mask tool is active
                 if (this.canvas.maskTool.isActive) {
@@ -480,14 +529,24 @@ export class CanvasInteractions {
         return targetHeight / oldHeight;
     }
     handleKeyDown(e) {
+        // Always track modifier keys regardless of focus
         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') {
+        if (e.key === 'Alt')
             this.interaction.isAltPressed = true;
+        // Check if canvas is focused before handling any shortcuts
+        const shouldHandle = this.canvas.isMouseOver ||
+            this.canvas.canvas.contains(document.activeElement) ||
+            document.activeElement === this.canvas.canvas;
+        if (!shouldHandle) {
+            return;
+        }
+        // Canvas-specific key handlers (only when focused)
+        if (e.key === 'Alt') {
             e.preventDefault();
         }
         if (e.key.toLowerCase() === 's') {
@@ -521,6 +580,17 @@ export class CanvasInteractions {
                         this.canvas.canvasLayers.copySelectedLayers();
                     }
                     break;
+                case 'v':
+                    // Only handle internal clipboard paste here.
+                    // If internal clipboard is empty, let the paste event bubble
+                    // so handlePasteEvent can access e.clipboardData for system images.
+                    if (this.canvas.canvasLayers.internalClipboard.length > 0) {
+                        this.canvas.canvasLayers.pasteLayers();
+                    } else {
+                        // Don't preventDefault - let paste event fire for system clipboard
+                        handled = false;
+                    }
+                    break;
                 default:
                     handled = false;
                     break;
@@ -617,6 +687,11 @@ export class CanvasInteractions {
             this.canvas.canvas.style.cursor = 'grabbing';
             return;
         }
+        // Check if hovering over grab icon
+        if (this.interaction.hoveringGrabIcon) {
+            this.canvas.canvas.style.cursor = 'grab';
+            return;
+        }
         const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
         if (transformTarget) {
             const handleName = transformTarget.handle;
@@ -669,12 +744,11 @@ export class CanvasInteractions {
         if (mods.ctrl || mods.meta) {
             const index = this.canvas.canvasSelection.selectedLayers.indexOf(layer);
             if (index === -1) {
+                // Ctrl-clicking unselected layer: add to selection
                 this.canvas.canvasSelection.updateSelection([...this.canvas.canvasSelection.selectedLayers, layer]);
             }
-            else {
+            // If already selected, do NOT deselect - allows dragging multiple layers with Ctrl held
-                const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l) => l !== layer);
+            // User can use right-click in layers panel to deselect individual layers
-                this.canvas.canvasSelection.updateSelection(newSelection);
-            }
         }
         else {
             if (!this.canvas.canvasSelection.selectedLayers.includes(layer)) {
@@ -1111,10 +1185,13 @@ export class CanvasInteractions {
         }
     }
     async handlePasteEvent(e) {
+        // Check if canvas is connected to DOM and visible
+        if (!this.canvas.canvas.isConnected || !document.body.contains(this.canvas.canvas)) {
+            return;
+        }
         const shouldHandle = this.canvas.isMouseOver ||
             this.canvas.canvas.contains(document.activeElement) ||
-            document.activeElement === this.canvas.canvas ||
+            document.activeElement === this.canvas.canvas;
-            document.activeElement === document.body;
         if (!shouldHandle) {
             log.debug("Paste event ignored - not focused on canvas");
             return;

js/CanvasLayers.js

@@ -1100,8 +1100,8 @@ export class CanvasLayers {
         this.canvas.width = width;
         this.canvas.height = height;
         this.canvas.maskTool.resize(width, height);
-        this.canvas.canvas.width = width;
+        // Don't set canvas.width/height - the render loop will handle display size
-        this.canvas.canvas.height = height;
+        // this.canvas.width/height are for OUTPUT AREA dimensions, not display canvas
         this.canvas.render();
         if (saveHistory) {
             this.canvas.canvasState.saveStateToDB();

js/CanvasLayersPanel.js

@@ -123,6 +123,26 @@ export class CanvasLayersPanel {
                 e.preventDefault();
                 e.stopPropagation();
                 this.deleteSelectedLayers();
+                return;
+            }
+            // Handle Ctrl+C/V for layer copy/paste when panel has focus
+            if (e.ctrlKey || e.metaKey) {
+                if (e.key.toLowerCase() === 'c') {
+                    if (this.canvas.canvasSelection.selectedLayers.length > 0) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.canvas.canvasLayers.copySelectedLayers();
+                        log.info('Layers copied from panel');
+                    }
+                }
+                else if (e.key.toLowerCase() === 'v') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (this.canvas.canvasLayers.internalClipboard.length > 0) {
+                        this.canvas.canvasLayers.pasteLayers();
+                        log.info('Layers pasted from panel');
+                    }
+                }
             }
         });
         log.debug('Panel structure created');
@@ -329,6 +349,8 @@ export class CanvasLayersPanel {
         // Aktualizuj tylko wygląd (klasy CSS), bez niszczenia DOM
         this.updateSelectionAppearance();
         this.updateButtonStates();
+        // Focus the canvas so keyboard shortcuts (like Ctrl+C/V) work for layer operations
+        this.canvas.canvas.focus();
         log.debug(`Layer clicked: ${layer.name}, selection count: ${this.canvas.canvasSelection.selectedLayers.length}`);
     }
     startEditingLayerName(nameElement, layer) {

js/CanvasRenderer.js

@@ -141,6 +141,10 @@ export class CanvasRenderer {
                 ctx.restore();
             }
         });
+        // Draw grab icons for selected layers when hovering
+        if (this.canvas.canvasInteractions.interaction.hoveringGrabIcon) {
+            this.drawGrabIcons(ctx);
+        }
         this.drawCanvasOutline(ctx);
         this.drawOutputAreaExtensionPreview(ctx); // Draw extension preview
         this.drawPendingGenerationAreas(ctx); // Draw snapshot outlines
@@ -833,6 +837,55 @@ export class CanvasRenderer {
         // Just ensure it's the right size
         this.updateOverlaySize();
     }
+    /**
+     * Draw grab icons in the center of selected layers
+     */
+    drawGrabIcons(ctx) {
+        const selectedLayers = this.canvas.canvasSelection.selectedLayers;
+        if (selectedLayers.length === 0)
+            return;
+        const iconRadius = 20 / this.canvas.viewport.zoom;
+        const innerRadius = 12 / this.canvas.viewport.zoom;
+        selectedLayers.forEach((layer) => {
+            if (!layer.visible)
+                return;
+            const centerX = layer.x + layer.width / 2;
+            const centerY = layer.y + layer.height / 2;
+            ctx.save();
+            // Draw outer circle (background)
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, iconRadius, 0, Math.PI * 2);
+            ctx.fillStyle = 'rgba(0, 150, 255, 0.7)';
+            ctx.fill();
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';
+            ctx.lineWidth = 2 / this.canvas.viewport.zoom;
+            ctx.stroke();
+            // Draw hand/grab icon (simplified)
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';
+            ctx.lineWidth = 1.5 / this.canvas.viewport.zoom;
+            // Draw four dots representing grab points
+            const dotRadius = 2 / this.canvas.viewport.zoom;
+            const dotDistance = 6 / this.canvas.viewport.zoom;
+            // Top-left
+            ctx.beginPath();
+            ctx.arc(centerX - dotDistance, centerY - dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+            // Top-right
+            ctx.beginPath();
+            ctx.arc(centerX + dotDistance, centerY - dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+            // Bottom-left
+            ctx.beginPath();
+            ctx.arc(centerX - dotDistance, centerY + dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+            // Bottom-right
+            ctx.beginPath();
+            ctx.arc(centerX + dotDistance, centerY + dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+        });
+    }
     /**
      * Draw transform handles for output area when in transform mode
      */

js/CanvasState.js

@@ -88,10 +88,10 @@ export class CanvasState {
             log.debug(`Output Area resized to ${this.canvas.width}x${this.canvas.height} and viewport set.`);
             const loadedLayers = await this._loadLayers(savedState.layers);
             this.canvas.layers = loadedLayers.filter((l) => l !== null);
-            log.info(`Loaded ${this.canvas.layers.length} layers.`);
+            log.info(`Loaded ${this.canvas.layers.length} layers from ${savedState.layers.length} saved layers.`);
-            if (this.canvas.layers.length === 0) {
+            if (this.canvas.layers.length === 0 && savedState.layers.length > 0) {
-                log.warn("No valid layers loaded, state may be corrupted.");
+                log.warn(`Failed to load any layers. Saved state had ${savedState.layers.length} layers but all failed to load. This may indicate corrupted IndexedDB data.`);
-                return false;
+                // Don't return false - allow empty canvas to be valid
             }
             this.canvas.updateSelectionAfterHistory();
             this.canvas.render();

js/CanvasView.js

@@ -884,6 +884,12 @@ async function createCanvasWidget(node, widget, app) {
     if (controlsElement) {
         resizeObserver.observe(controlsElement);
     }
+    // Watch the canvas container itself to detect size changes and fix canvas dimensions
+    const canvasContainerResizeObserver = new ResizeObserver(() => {
+        // Force re-read of canvas dimensions on next render
+        canvas.render();
+    });
+    canvasContainerResizeObserver.observe(canvasContainer);
     canvas.canvas.addEventListener('focus', () => {
         canvasContainer.classList.add('has-focus');
     });
@@ -1038,13 +1044,20 @@ app.registerExtension({
                 log.info(`Found ${canvasNodeInstances.size} CanvasNode(s). Sending data via WebSocket...`);
                 const sendPromises = [];
                 for (const [nodeId, canvasWidget] of canvasNodeInstances.entries()) {
-                    if (app.graph.getNodeById(nodeId) && canvasWidget.canvas && canvasWidget.canvas.canvasIO) {
+                    const node = app.graph.getNodeById(nodeId);
-                        log.debug(`Sending data for canvas node ${nodeId}`);
+                    if (!node) {
-                        sendPromises.push(canvasWidget.canvas.canvasIO.sendDataViaWebSocket(nodeId));
-                    }
-                    else {
                         log.warn(`Node ${nodeId} not found in graph, removing from instances map.`);
                         canvasNodeInstances.delete(nodeId);
+                        continue;
+                    }
+                    // Skip bypassed nodes
+                    if (node.mode === 4) {
+                        log.debug(`Node ${nodeId} is bypassed, skipping data send.`);
+                        continue;
+                    }
+                    if (canvasWidget.canvas && canvasWidget.canvas.canvasIO) {
+                        log.debug(`Sending data for canvas node ${nodeId}`);
+                        sendPromises.push(canvasWidget.canvas.canvasIO.sendDataViaWebSocket(nodeId));
                     }
                 }
                 try {
@@ -1063,6 +1076,8 @@ app.registerExtension({
     },
     async beforeRegisterNodeDef(nodeType, nodeData, app) {
         if (nodeType.comfyClass === "LayerForgeNode") {
+            // Map to track pending copy sources across node ID changes
+            const pendingCopySources = new Map();
             const onNodeCreated = nodeType.prototype.onNodeCreated;
             nodeType.prototype.onNodeCreated = function () {
                 log.debug("CanvasNode onNodeCreated: Base widget setup.");
@@ -1093,6 +1108,43 @@ app.registerExtension({
                 log.info(`Registered CanvasNode instance for ID: ${this.id}`);
                 // Store the canvas widget on the node
                 this.canvasWidget = canvasWidget;
+                // Check if this node has a pending copy source (from onConfigure)
+                // Check both the current ID and -1 (temporary ID during paste)
+                let sourceNodeId = pendingCopySources.get(this.id);
+                if (!sourceNodeId) {
+                    sourceNodeId = pendingCopySources.get(-1);
+                    if (sourceNodeId) {
+                        // Transfer from -1 to the real ID and clear -1
+                        pendingCopySources.delete(-1);
+                    }
+                }
+                if (sourceNodeId && sourceNodeId !== this.id) {
+                    log.info(`Node ${this.id} will copy canvas state from node ${sourceNodeId}`);
+                    // Clear the flag
+                    pendingCopySources.delete(this.id);
+                    // Copy the canvas state now that the widget is initialized
+                    setTimeout(async () => {
+                        try {
+                            const { getCanvasState, setCanvasState } = await import('./db.js');
+                            let sourceState = await getCanvasState(String(sourceNodeId));
+                            // If source node doesn't exist (cross-workflow paste), try clipboard
+                            if (!sourceState) {
+                                log.debug(`No canvas state found for source node ${sourceNodeId}, checking clipboard`);
+                                sourceState = await getCanvasState('__clipboard__');
+                            }
+                            if (!sourceState) {
+                                log.debug(`No canvas state found in clipboard either`);
+                                return;
+                            }
+                            await setCanvasState(String(this.id), sourceState);
+                            await canvasWidget.canvas.loadInitialState();
+                            log.info(`Canvas state copied successfully to node ${this.id}`);
+                        }
+                        catch (error) {
+                            log.error(`Error copying canvas state:`, error);
+                        }
+                    }, 100);
+                }
                 // Check if there are already connected inputs
                 setTimeout(() => {
                     if (this.inputs && this.inputs.length > 0) {
@@ -1258,6 +1310,47 @@ app.registerExtension({
                 }
                 return onRemoved?.apply(this, arguments);
             };
+            // Handle copy/paste - save canvas state when copying
+            const originalSerialize = nodeType.prototype.serialize;
+            nodeType.prototype.serialize = function () {
+                const data = originalSerialize ? originalSerialize.apply(this) : {};
+                // Store a reference to the source node ID so we can copy layer data
+                data.sourceNodeId = this.id;
+                log.debug(`Serializing node ${this.id} for copy`);
+                // Store canvas state in a clipboard entry for cross-workflow paste
+                // This happens async but that's fine since paste happens later
+                (async () => {
+                    try {
+                        const { getCanvasState, setCanvasState } = await import('./db.js');
+                        const sourceState = await getCanvasState(String(this.id));
+                        if (sourceState) {
+                            // Store in a special "clipboard" entry
+                            await setCanvasState('__clipboard__', sourceState);
+                            log.debug(`Stored canvas state in clipboard for node ${this.id}`);
+                        }
+                    }
+                    catch (error) {
+                        log.error('Error storing canvas state to clipboard:', error);
+                    }
+                })();
+                return data;
+            };
+            // Handle copy/paste - load canvas state from source node when pasting
+            const originalConfigure = nodeType.prototype.onConfigure;
+            nodeType.prototype.onConfigure = async function (data) {
+                if (originalConfigure) {
+                    originalConfigure.apply(this, [data]);
+                }
+                // Store the source node ID in the map (persists across node ID changes)
+                // This will be picked up later in onAdded when the canvas widget is ready
+                if (data.sourceNodeId && data.sourceNodeId !== this.id) {
+                    const existingSource = pendingCopySources.get(this.id);
+                    if (!existingSource) {
+                        pendingCopySources.set(this.id, data.sourceNodeId);
+                        log.debug(`Stored pending copy source: ${data.sourceNodeId} for node ${this.id}`);
+                    }
+                }
+            };
             const originalGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
             nodeType.prototype.getExtraMenuOptions = function (_, options) {
                 // FIRST: Call original to let other extensions add their options

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

src/Canvas.ts

@@ -578,8 +578,8 @@ export class Canvas {
      * Inicjalizuje podstawowe właściwości canvas
      */
     initCanvas() {
-        this.canvas.width = this.width;
+        // Don't set canvas.width/height here - let the render loop handle it based on clientWidth/clientHeight
-        this.canvas.height = this.height;
+        // this.width and this.height are for the OUTPUT AREA, not the display canvas
         this.canvas.style.border = '1px solid black';
         this.canvas.style.maxWidth = '100%';
         this.canvas.style.backgroundColor = '#606060';

src/CanvasIO.ts

@@ -218,6 +218,29 @@ export class CanvasIO {
     async _renderOutputData(): Promise<{ image: string, mask: string }> {
         log.info("=== RENDERING OUTPUT DATA FOR COMFYUI ===");
 
+        // Check if layers have valid images loaded, with retry logic
+        const maxRetries = 5;
+        const retryDelay = 200;
+
+        for (let attempt = 0; attempt < maxRetries; attempt++) {
+            const layersWithoutImages = this.canvas.layers.filter(layer => !layer.image || !layer.image.complete);
+
+            if (layersWithoutImages.length === 0) {
+                break; // All images loaded
+            }
+
+            if (attempt === 0) {
+                log.warn(`${layersWithoutImages.length} layer(s) have incomplete image data. Waiting for images to load...`);
+            }
+
+            if (attempt < maxRetries - 1) {
+                await new Promise(resolve => setTimeout(resolve, retryDelay));
+            } else {
+                // Last attempt failed
+                throw new Error(`Canvas not ready after ${maxRetries} attempts: ${layersWithoutImages.length} layer(s) still have incomplete image data. Try waiting a moment and running again.`);
+            }
+        }
+
         // Użyj zunifikowanych funkcji z CanvasLayers
         const imageBlob = await this.canvas.canvasLayers.getFlattenedCanvasAsBlob();
         const maskBlob = await this.canvas.canvasLayers.getFlattenedMaskAsBlob();

src/CanvasInteractions.ts

@@ -51,6 +51,7 @@ interface InteractionState {
     canvasMoveRect: { x: number, y: number, width: number, height: number } | null;
     outputAreaTransformHandle: string | null;
     outputAreaTransformAnchor: Point;
+    hoveringGrabIcon: boolean;
 }
 
 export class CanvasInteractions {
@@ -98,6 +99,7 @@ export class CanvasInteractions {
             canvasMoveRect: null,
             outputAreaTransformHandle: null,
             outputAreaTransformAnchor: { x: 0, y: 0 },
+            hoveringGrabIcon: false,
         };
         this.originalLayerPositions = new Map();
     }
@@ -174,6 +176,9 @@ export class CanvasInteractions {
 
         document.addEventListener('paste', this.onPaste as unknown as EventListener);
 
+        // Intercept Ctrl+V during capture phase to handle layer paste before ComfyUI
+        document.addEventListener('keydown', this.onKeyDown as EventListener, { capture: true });
+
         this.canvas.canvas.addEventListener('mouseenter', this.onMouseEnter as EventListener);
         this.canvas.canvas.addEventListener('mouseleave', this.onMouseLeave as EventListener);
 
@@ -193,6 +198,9 @@ export class CanvasInteractions {
         this.canvas.canvas.removeEventListener('keydown', this.onKeyDown as EventListener);
         this.canvas.canvas.removeEventListener('keyup', this.onKeyUp as EventListener);
 
+        // Remove document-level capture listener
+        document.removeEventListener('keydown', this.onKeyDown as EventListener, { capture: true });
+
         window.removeEventListener('blur', this.onBlur);
         document.removeEventListener('paste', this.onPaste as unknown as EventListener);
 
@@ -234,6 +242,33 @@ export class CanvasInteractions {
         return false;
     }
 
+    /**
+     * Sprawdza czy punkt znajduje się w obszarze ikony "grab" (środek layera)
+     * Zwraca layer, jeśli kliknięto w ikonę grab
+     */
+    getGrabIconAtPosition(worldX: number, worldY: number): Layer | null {
+        // Rozmiar ikony grab w pikselach światowych
+        const grabIconRadius = 20 / this.canvas.viewport.zoom;
+
+        for (const layer of this.canvas.canvasSelection.selectedLayers) {
+            if (!layer.visible) continue;
+
+            const centerX = layer.x + layer.width / 2;
+            const centerY = layer.y + layer.height / 2;
+
+            // Sprawdź czy punkt jest w obszarze ikony grab (okrąg wokół środka)
+            const dx = worldX - centerX;
+            const dy = worldY - centerY;
+            const distanceSquared = dx * dx + dy * dy;
+            const radiusSquared = grabIconRadius * grabIconRadius;
+
+            if (distanceSquared <= radiusSquared) {
+                return layer;
+            }
+        }
+        return null;
+    }
+
     resetInteractionState(): void {
         this.interaction.mode = 'none';
         this.interaction.resizeHandle = null;
@@ -248,6 +283,14 @@ export class CanvasInteractions {
 
     handleMouseDown(e: MouseEvent): void {
         this.canvas.canvas.focus();
+
+        // Sync modifier states with actual event state to prevent "stuck" modifiers
+        // when focus moves between layers panel and canvas
+        this.interaction.isCtrlPressed = e.ctrlKey;
+        this.interaction.isMetaPressed = e.metaKey;
+        this.interaction.isShiftPressed = e.shiftKey;
+        this.interaction.isAltPressed = e.altKey;
+
         const coords = this.getMouseCoordinates(e);
         const mods = this.getModifierState(e);
 
@@ -320,6 +363,15 @@ export class CanvasInteractions {
             return;
         }
 
+        // Check if clicking on grab icon of a selected layer
+        const grabIconLayer = this.getGrabIconAtPosition(coords.world.x, coords.world.y);
+        if (grabIconLayer) {
+            // Start dragging the selected layer(s) without changing selection
+            this.interaction.mode = 'potential-drag';
+            this.interaction.dragStart = { ...coords.world };
+            return;
+        }
+
         const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(coords.world.x, coords.world.y);
         if (clickedLayerResult) {
             this.prepareForDrag(clickedLayerResult.layer, coords.world);
@@ -378,6 +430,15 @@ export class CanvasInteractions {
                 }
                 break;
             default:
+                // Check if hovering over grab icon
+                const wasHovering = this.interaction.hoveringGrabIcon;
+                this.interaction.hoveringGrabIcon = this.getGrabIconAtPosition(coords.world.x, coords.world.y) !== null;
+
+                // Re-render if hover state changed to show/hide grab icon
+                if (wasHovering !== this.interaction.hoveringGrabIcon) {
+                    this.canvas.render();
+                }
+
                 this.updateCursor(coords.world);
                 // Update brush cursor on overlay if mask tool is active
                 if (this.canvas.maskTool.isActive) {
@@ -599,11 +660,23 @@ export class CanvasInteractions {
     }
 
     handleKeyDown(e: KeyboardEvent): void {
+        // Always track modifier keys regardless of focus
         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;
+
+        // Check if canvas is focused before handling any shortcuts
+        const shouldHandle = this.canvas.isMouseOver ||
+            this.canvas.canvas.contains(document.activeElement) ||
+            document.activeElement === this.canvas.canvas;
+
+        if (!shouldHandle) {
+            return;
+        }
+
+        // Canvas-specific key handlers (only when focused)
         if (e.key === 'Alt') {
-            this.interaction.isAltPressed = true;
             e.preventDefault();
         }
         if (e.key.toLowerCase() === 's') {
@@ -638,6 +711,17 @@ export class CanvasInteractions {
                         this.canvas.canvasLayers.copySelectedLayers();
                     }
                     break;
+                case 'v':
+                    // Only handle internal clipboard paste here.
+                    // If internal clipboard is empty, let the paste event bubble
+                    // so handlePasteEvent can access e.clipboardData for system images.
+                    if (this.canvas.canvasLayers.internalClipboard.length > 0) {
+                        this.canvas.canvasLayers.pasteLayers();
+                    } else {
+                        // Don't preventDefault - let paste event fire for system clipboard
+                        handled = false;
+                    }
+                    break;
                 default:
                     handled = false;
                     break;
@@ -738,6 +822,12 @@ export class CanvasInteractions {
             return;
         }
 
+        // Check if hovering over grab icon
+        if (this.interaction.hoveringGrabIcon) {
+            this.canvas.canvas.style.cursor = 'grab';
+            return;
+        }
+
         const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
 
         if (transformTarget) {
@@ -767,7 +857,7 @@ export class CanvasInteractions {
             originalHeight: layer.originalHeight,
             cropBounds: layer.cropBounds ? { ...layer.cropBounds } : undefined
         };
-        this.interaction.dragStart = {...worldCoords};
+        this.interaction.dragStart = { ...worldCoords };
 
         if (handle === 'rot') {
             this.interaction.mode = 'rotating';
@@ -791,11 +881,11 @@ export class CanvasInteractions {
         if (mods.ctrl || mods.meta) {
             const index = this.canvas.canvasSelection.selectedLayers.indexOf(layer);
             if (index === -1) {
+                // Ctrl-clicking unselected layer: add to selection
                 this.canvas.canvasSelection.updateSelection([...this.canvas.canvasSelection.selectedLayers, layer]);
-            } else {
-                const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l: Layer) => l !== layer);
-                this.canvas.canvasSelection.updateSelection(newSelection);
             }
+            // If already selected, do NOT deselect - allows dragging multiple layers with Ctrl held
+            // User can use right-click in layers panel to deselect individual layers
         } else {
             if (!this.canvas.canvasSelection.selectedLayers.includes(layer)) {
                 this.canvas.canvasSelection.updateSelection([layer]);
@@ -803,7 +893,7 @@ export class CanvasInteractions {
         }
 
         this.interaction.mode = 'potential-drag';
-        this.interaction.dragStart = {...worldCoords};
+        this.interaction.dragStart = { ...worldCoords };
     }
 
     startPanning(e: MouseEvent, clearSelection: boolean = true): void {
@@ -819,8 +909,8 @@ export class CanvasInteractions {
         this.interaction.mode = 'resizingCanvas';
         const startX = snapToGrid(worldCoords.x);
         const startY = snapToGrid(worldCoords.y);
-        this.interaction.canvasResizeStart = {x: startX, y: startY};
+        this.interaction.canvasResizeStart = { x: startX, y: startY };
-        this.interaction.canvasResizeRect = {x: startX, y: startY, width: 0, height: 0};
+        this.interaction.canvasResizeRect = { x: startX, y: startY, width: 0, height: 0 };
         this.canvas.render();
     }
 
@@ -872,7 +962,7 @@ export class CanvasInteractions {
         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};
+        this.interaction.panStart = { x: e.clientX, y: e.clientY };
 
         // Update stroke overlay if mask tool is drawing during pan
         if (this.canvas.maskTool.isDrawing) {
@@ -1029,9 +1119,9 @@ export class CanvasInteractions {
                 } else newCropBounds.height += delta_image_y;
             }
 
-			// Clamp crop bounds to stay within the original image and maintain minimum size
+            // 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;
+                if (handle?.includes('w')) newCropBounds.x = o.cropBounds.x + o.cropBounds.width - 1;
                 newCropBounds.width = 1;
             }
             if (newCropBounds.height < 1) {
@@ -1289,11 +1379,14 @@ export class CanvasInteractions {
     }
 
     async handlePasteEvent(e: ClipboardEvent): Promise<void> {
+        // Check if canvas is connected to DOM and visible
+        if (!this.canvas.canvas.isConnected || !document.body.contains(this.canvas.canvas)) {
+            return;
+        }
 
         const shouldHandle = this.canvas.isMouseOver ||
             this.canvas.canvas.contains(document.activeElement) ||
-            document.activeElement === this.canvas.canvas ||
+            document.activeElement === this.canvas.canvas;
-            document.activeElement === document.body;
 
         if (!shouldHandle) {
             log.debug("Paste event ignored - not focused on canvas");

src/CanvasLayers.ts

@@ -1263,8 +1263,8 @@ export class CanvasLayers {
         this.canvas.height = height;
         this.canvas.maskTool.resize(width, height);
 
-        this.canvas.canvas.width = width;
+        // Don't set canvas.width/height - the render loop will handle display size
-        this.canvas.canvas.height = height;
+        // this.canvas.width/height are for OUTPUT AREA dimensions, not display canvas
 
         this.canvas.render();
 

src/CanvasLayersPanel.ts

@@ -144,6 +144,26 @@ export class CanvasLayersPanel {
                 e.preventDefault();
                 e.stopPropagation();
                 this.deleteSelectedLayers();
+                return;
+            }
+
+            // Handle Ctrl+C/V for layer copy/paste when panel has focus
+            if (e.ctrlKey || e.metaKey) {
+                if (e.key.toLowerCase() === 'c') {
+                    if (this.canvas.canvasSelection.selectedLayers.length > 0) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.canvas.canvasLayers.copySelectedLayers();
+                        log.info('Layers copied from panel');
+                    }
+                } else if (e.key.toLowerCase() === 'v') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (this.canvas.canvasLayers.internalClipboard.length > 0) {
+                        this.canvas.canvasLayers.pasteLayers();
+                        log.info('Layers pasted from panel');
+                    }
+                }
             }
         });
 
@@ -388,6 +408,9 @@ export class CanvasLayersPanel {
         this.updateSelectionAppearance();
         this.updateButtonStates();
 
+        // Focus the canvas so keyboard shortcuts (like Ctrl+C/V) work for layer operations
+        this.canvas.canvas.focus();
+
         log.debug(`Layer clicked: ${layer.name}, selection count: ${this.canvas.canvasSelection.selectedLayers.length}`);
     }
 

src/CanvasRenderer.ts

@@ -188,6 +188,11 @@ export class CanvasRenderer {
             }
         });
 
+        // Draw grab icons for selected layers when hovering
+        if (this.canvas.canvasInteractions.interaction.hoveringGrabIcon) {
+            this.drawGrabIcons(ctx);
+        }
+
         this.drawCanvasOutline(ctx);
         this.drawOutputAreaExtensionPreview(ctx); // Draw extension preview
         this.drawPendingGenerationAreas(ctx); // Draw snapshot outlines
@@ -1013,6 +1018,66 @@ export class CanvasRenderer {
         this.updateOverlaySize();
     }
 
+    /**
+     * Draw grab icons in the center of selected layers
+     */
+    drawGrabIcons(ctx: any): void {
+        const selectedLayers = this.canvas.canvasSelection.selectedLayers;
+        if (selectedLayers.length === 0) return;
+
+        const iconRadius = 20 / this.canvas.viewport.zoom;
+        const innerRadius = 12 / this.canvas.viewport.zoom;
+
+        selectedLayers.forEach((layer: any) => {
+            if (!layer.visible) return;
+
+            const centerX = layer.x + layer.width / 2;
+            const centerY = layer.y + layer.height / 2;
+
+            ctx.save();
+
+            // Draw outer circle (background)
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, iconRadius, 0, Math.PI * 2);
+            ctx.fillStyle = 'rgba(0, 150, 255, 0.7)';
+            ctx.fill();
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';
+            ctx.lineWidth = 2 / this.canvas.viewport.zoom;
+            ctx.stroke();
+
+            // Draw hand/grab icon (simplified)
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';
+            ctx.lineWidth = 1.5 / this.canvas.viewport.zoom;
+
+            // Draw four dots representing grab points
+            const dotRadius = 2 / this.canvas.viewport.zoom;
+            const dotDistance = 6 / this.canvas.viewport.zoom;
+
+            // Top-left
+            ctx.beginPath();
+            ctx.arc(centerX - dotDistance, centerY - dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Top-right
+            ctx.beginPath();
+            ctx.arc(centerX + dotDistance, centerY - dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Bottom-left
+            ctx.beginPath();
+            ctx.arc(centerX - dotDistance, centerY + dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Bottom-right
+            ctx.beginPath();
+            ctx.arc(centerX + dotDistance, centerY + dotDistance, dotRadius, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.restore();
+        });
+    }
+
     /**
      * Draw transform handles for output area when in transform mode
      */

src/CanvasState.ts

@@ -118,11 +118,11 @@ export class CanvasState {
             log.debug(`Output Area resized to ${this.canvas.width}x${this.canvas.height} and viewport set.`);
             const loadedLayers = await this._loadLayers(savedState.layers);
             this.canvas.layers = loadedLayers.filter((l): l is Layer => l !== null);
-            log.info(`Loaded ${this.canvas.layers.length} layers.`);
+            log.info(`Loaded ${this.canvas.layers.length} layers from ${savedState.layers.length} saved layers.`);
 
-            if (this.canvas.layers.length === 0) {
+            if (this.canvas.layers.length === 0 && savedState.layers.length > 0) {
-                log.warn("No valid layers loaded, state may be corrupted.");
+                log.warn(`Failed to load any layers. Saved state had ${savedState.layers.length} layers but all failed to load. This may indicate corrupted IndexedDB data.`);
-                return false;
+                // Don't return false - allow empty canvas to be valid
             }
 
             this.canvas.updateSelectionAfterHistory();

src/CanvasView.ts

@@ -1000,6 +1000,13 @@ $el("label.clipboard-switch.mask-switch", {
         resizeObserver.observe(controlsElement);
     }
 
+    // Watch the canvas container itself to detect size changes and fix canvas dimensions
+    const canvasContainerResizeObserver = new ResizeObserver(() => {
+        // Force re-read of canvas dimensions on next render
+        canvas.render();
+    });
+    canvasContainerResizeObserver.observe(canvasContainer);
+
     canvas.canvas.addEventListener('focus', () => {
         canvasContainer.classList.add('has-focus');
     });
@@ -1195,12 +1202,23 @@ app.registerExtension({
 
                 const sendPromises: Promise<any>[] = [];
                 for (const [nodeId, canvasWidget] of canvasNodeInstances.entries()) {
-                    if (app.graph.getNodeById(nodeId) && canvasWidget.canvas && canvasWidget.canvas.canvasIO) {
+                    const node = app.graph.getNodeById(nodeId);
-                        log.debug(`Sending data for canvas node ${nodeId}`);
+
-                        sendPromises.push(canvasWidget.canvas.canvasIO.sendDataViaWebSocket(nodeId));
+                    if (!node) {
-                    } else {
                         log.warn(`Node ${nodeId} not found in graph, removing from instances map.`);
                         canvasNodeInstances.delete(nodeId);
+                        continue;
+                    }
+
+                    // Skip bypassed nodes
+                    if (node.mode === 4) {
+                        log.debug(`Node ${nodeId} is bypassed, skipping data send.`);
+                        continue;
+                    }
+
+                    if (canvasWidget.canvas && canvasWidget.canvas.canvasIO) {
+                        log.debug(`Sending data for canvas node ${nodeId}`);
+                        sendPromises.push(canvasWidget.canvas.canvasIO.sendDataViaWebSocket(nodeId));
                     }
                 }
 
@@ -1221,6 +1239,9 @@ app.registerExtension({
 
     async beforeRegisterNodeDef(nodeType: any, nodeData: any, app: ComfyApp) {
         if (nodeType.comfyClass === "LayerForgeNode") {
+            // Map to track pending copy sources across node ID changes
+            const pendingCopySources = new Map<number, number>();
+
             const onNodeCreated = nodeType.prototype.onNodeCreated;
             nodeType.prototype.onNodeCreated = function (this: ComfyNode) {
                 log.debug("CanvasNode onNodeCreated: Base widget setup.");
@@ -1257,6 +1278,49 @@ app.registerExtension({
                 // Store the canvas widget on the node
                 (this as any).canvasWidget = canvasWidget;
 
+                // Check if this node has a pending copy source (from onConfigure)
+                // Check both the current ID and -1 (temporary ID during paste)
+                let sourceNodeId = pendingCopySources.get(this.id);
+                if (!sourceNodeId) {
+                    sourceNodeId = pendingCopySources.get(-1);
+                    if (sourceNodeId) {
+                        // Transfer from -1 to the real ID and clear -1
+                        pendingCopySources.delete(-1);
+                    }
+                }
+
+                if (sourceNodeId && sourceNodeId !== this.id) {
+                    log.info(`Node ${this.id} will copy canvas state from node ${sourceNodeId}`);
+
+                    // Clear the flag
+                    pendingCopySources.delete(this.id);
+
+                    // Copy the canvas state now that the widget is initialized
+                    setTimeout(async () => {
+                        try {
+                            const { getCanvasState, setCanvasState } = await import('./db.js');
+                            let sourceState = await getCanvasState(String(sourceNodeId));
+
+                            // If source node doesn't exist (cross-workflow paste), try clipboard
+                            if (!sourceState) {
+                                log.debug(`No canvas state found for source node ${sourceNodeId}, checking clipboard`);
+                                sourceState = await getCanvasState('__clipboard__');
+                            }
+
+                            if (!sourceState) {
+                                log.debug(`No canvas state found in clipboard either`);
+                                return;
+                            }
+
+                            await setCanvasState(String(this.id), sourceState);
+                            await canvasWidget.canvas.loadInitialState();
+                            log.info(`Canvas state copied successfully to node ${this.id}`);
+                        } catch (error) {
+                            log.error(`Error copying canvas state:`, error);
+                        }
+                    }, 100);
+                }
+
                 // Check if there are already connected inputs
                 setTimeout(() => {
                         if (this.inputs && this.inputs.length > 0) {
@@ -1440,6 +1504,52 @@ app.registerExtension({
                 return onRemoved?.apply(this, arguments as any);
             };
 
+            // Handle copy/paste - save canvas state when copying
+            const originalSerialize = nodeType.prototype.serialize;
+            nodeType.prototype.serialize = function (this: ComfyNode) {
+                const data = originalSerialize ? originalSerialize.apply(this) : {};
+
+                // Store a reference to the source node ID so we can copy layer data
+                data.sourceNodeId = this.id;
+                log.debug(`Serializing node ${this.id} for copy`);
+
+                // Store canvas state in a clipboard entry for cross-workflow paste
+                // This happens async but that's fine since paste happens later
+                (async () => {
+                    try {
+                        const { getCanvasState, setCanvasState } = await import('./db.js');
+                        const sourceState = await getCanvasState(String(this.id));
+                        if (sourceState) {
+                            // Store in a special "clipboard" entry
+                            await setCanvasState('__clipboard__', sourceState);
+                            log.debug(`Stored canvas state in clipboard for node ${this.id}`);
+                        }
+                    } catch (error) {
+                        log.error('Error storing canvas state to clipboard:', error);
+                    }
+                })();
+
+                return data;
+            };
+
+            // Handle copy/paste - load canvas state from source node when pasting
+            const originalConfigure = nodeType.prototype.onConfigure;
+            nodeType.prototype.onConfigure = async function (this: ComfyNode, data: any) {
+                if (originalConfigure) {
+                    originalConfigure.apply(this, [data]);
+                }
+
+                // Store the source node ID in the map (persists across node ID changes)
+                // This will be picked up later in onAdded when the canvas widget is ready
+                if (data.sourceNodeId && data.sourceNodeId !== this.id) {
+                    const existingSource = pendingCopySources.get(this.id);
+                    if (!existingSource) {
+                        pendingCopySources.set(this.id, data.sourceNodeId);
+                        log.debug(`Stored pending copy source: ${data.sourceNodeId} for node ${this.id}`);
+                    }
+                }
+            };
+
             const originalGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
             nodeType.prototype.getExtraMenuOptions = function (this: ComfyNode, _: any, options: any[]) {
                 // FIRST: Call original to let other extensions add their options