Fix focus/modifier issues and improve multi-layer selection UX

.vscode/settings.json

@@ -0,0 +1 @@
+{}

js/CanvasInteractions.js

@@ -192,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') {
@@ -738,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 {
-                const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l) => 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)) {

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');

src/CanvasInteractions.ts

@@ -283,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);
 
@@ -873,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]);

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');
+                    }
+                }
             }
         });