Fix: Restore drag-and-drop in layers panel

src/CanvasLayersPanel.ts

@@ -133,7 +133,7 @@ export class CanvasLayersPanel {
         `;
 
         this.layersContainer = this.container.querySelector<HTMLElement>('#layers-container');
-        
+
         // Setup event listeners dla przycisków
         this.setupControlButtons();
         this.setupMasterVisibilityToggle();
@@ -269,7 +269,7 @@ export class CanvasLayersPanel {
         layerRow.className = 'layer-row';
         layerRow.draggable = true;
         layerRow.dataset.layerIndex = String(index);
-        
+
         const isSelected = this.canvas.canvasSelection.selectedLayers.includes(layer);
         if (isSelected) {
             layerRow.classList.add('selected');
@@ -318,7 +318,7 @@ export class CanvasLayersPanel {
         const scale = Math.min(48 / layer.image.width, 48 / layer.image.height);
         const scaledWidth = layer.image.width * scale;
         const scaledHeight = layer.image.height * scale;
-        
+
         // Wycentruj obraz
         const x = (48 - scaledWidth) / 2;
         const y = (48 - scaledHeight) / 2;
@@ -336,8 +336,6 @@ export class CanvasLayersPanel {
             if (nameElement && nameElement.classList.contains('editing')) {
                 return;
             }
-            // Prevent the layers panel from stealing focus
-            e.preventDefault();
             this.handleLayerClick(e, layer, index);
         });
 
@@ -399,15 +397,15 @@ export class CanvasLayersPanel {
     startEditingLayerName(nameElement: HTMLElement, layer: Layer): void {
         const currentName = layer.name;
         nameElement.classList.add('editing');
-        
+
         const input = document.createElement('input');
         input.type = 'text';
         input.value = currentName;
         input.style.width = '100%';
-        
+
         nameElement.innerHTML = '';
         nameElement.appendChild(input);
-        
+
         input.focus();
         input.select();
 
@@ -417,7 +415,7 @@ export class CanvasLayersPanel {
             layer.name = newName;
             nameElement.classList.remove('editing');
             nameElement.textContent = newName;
-            
+
             this.canvas.saveState();
             log.info(`Layer renamed to: ${newName}`);
         };
@@ -441,11 +439,11 @@ export class CanvasLayersPanel {
         if (!existingNames.includes(proposedName)) {
             return proposedName;
         }
-        
+
         // Sprawdź czy nazwa już ma numerację w nawiasach
         const match = proposedName.match(/^(.+?)\s*\((\d+)\)$/);
         let baseName, startNumber;
-        
+
         if (match) {
             baseName = match[1].trim();
             startNumber = parseInt(match[2]) + 1;
@@ -453,34 +451,34 @@ export class CanvasLayersPanel {
             baseName = proposedName;
             startNumber = 1;
         }
-        
+
         // Znajdź pierwszą dostępną numerację
         let counter = startNumber;
         let uniqueName;
-        
+
         do {
             uniqueName = `${baseName} (${counter})`;
             counter++;
         } while (existingNames.includes(uniqueName));
-        
+
         return uniqueName;
     }
 
     toggleLayerVisibility(layer: Layer): void {
         layer.visible = !layer.visible;
-        
+
         // If layer became invisible and is selected, deselect it
         if (!layer.visible && this.canvas.canvasSelection.selectedLayers.includes(layer)) {
             const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l: Layer) => l !== layer);
             this.canvas.updateSelection(newSelection);
         }
-        
+
         this.canvas.render();
         this.canvas.requestSaveState();
-        
+
         // Update the eye icon in the panel
         this.renderLayers();
-        
+
         log.info(`Layer "${layer.name}" visibility toggled to: ${layer.visible}`);
     }
 
@@ -540,7 +538,7 @@ export class CanvasLayersPanel {
 
         const line = document.createElement('div');
         line.className = 'drag-insertion-line';
-        
+
         if (isUpperHalf) {
             line.style.top = '-1px';
         } else {
@@ -568,7 +566,7 @@ export class CanvasLayersPanel {
         const rect = e.currentTarget.getBoundingClientRect();
         const midpoint = rect.top + rect.height / 2;
         const isUpperHalf = e.clientY < midpoint;
-        
+
         // Oblicz docelowy indeks
         let insertIndex = targetIndex;
         if (!isUpperHalf) {
@@ -577,7 +575,7 @@ export class CanvasLayersPanel {
 
         // Użyj nowej, centralnej funkcji do przesuwania warstw
         this.canvas.canvasLayers.moveLayers(this.draggedElements, { toIndex: insertIndex });
-        
+
         log.info(`Dropped ${this.draggedElements.length} layers at position ${insertIndex}`);
     }
 
@@ -615,17 +613,17 @@ export class CanvasLayersPanel {
      */
     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 
+            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'}`);
     }
 
@@ -646,7 +644,7 @@ export class CanvasLayersPanel {
         this.layersContainer = null;
         this.draggedElements = [];
         this.removeDragInsertionLine();
-        
+
         log.info('CanvasLayersPanel destroyed');
     }
 }