Add layer visibility toggle and icon support

Introduces a 'visible' property to layers and updates all relevant logic to support toggling layer visibility. Adds visibility toggle icons to the layers panel using a new IconLoader utility, with SVG and fallback canvas icons. Updates rendering, selection, and batch preview logic to respect layer visibility. Also improves blend mode menu UI and ensures new/pasted layers are always added on top with correct z-index.

js/CanvasLayersPanel.js

@@ -1,4 +1,5 @@
 import { createModuleLogger } from "./utils/LoggerUtils.js";
+import { iconLoader, LAYERFORGE_TOOLS } from "./utils/IconLoader.js";
 const log = createModuleLogger('CanvasLayersPanel');
 export class CanvasLayersPanel {
     constructor(canvas) {
@@ -14,8 +15,106 @@ export class CanvasLayersPanel {
         this.handleDragOver = this.handleDragOver.bind(this);
         this.handleDragEnd = this.handleDragEnd.bind(this);
         this.handleDrop = this.handleDrop.bind(this);
+        // Preload icons
+        this.initializeIcons();
         log.info('CanvasLayersPanel initialized');
     }
+    async initializeIcons() {
+        try {
+            await iconLoader.preloadToolIcons();
+            log.debug('Icons preloaded successfully');
+        }
+        catch (error) {
+            log.warn('Failed to preload icons, using fallbacks:', error);
+        }
+    }
+    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;
+        `;
+        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);
+                `;
+                iconContainer.appendChild(img);
+            }
+            else if (icon instanceof HTMLCanvasElement) {
+                const canvas = document.createElement('canvas');
+                canvas.width = size;
+                canvas.height = size;
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    ctx.drawImage(icon, 0, 0, size, size);
+                }
+                iconContainer.appendChild(canvas);
+            }
+        }
+        else {
+            // Fallback text
+            iconContainer.textContent = toolName.charAt(0).toUpperCase();
+            iconContainer.style.fontSize = `${size * 0.6}px`;
+            iconContainer.style.color = '#ffffff';
+        }
+        return iconContainer;
+    }
+    createVisibilityIcon(isVisible) {
+        if (isVisible) {
+            return this.createIconElement(LAYERFORGE_TOOLS.VISIBILITY, 16);
+        }
+        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;
+            `;
+            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;
+                    `;
+                    iconContainer.appendChild(img);
+                }
+                else if (icon instanceof HTMLCanvasElement) {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = 16;
+                    canvas.height = 16;
+                    const ctx = canvas.getContext('2d');
+                    if (ctx) {
+                        ctx.globalAlpha = 0.3;
+                        ctx.drawImage(icon, 0, 0, 16, 16);
+                    }
+                    iconContainer.appendChild(canvas);
+                }
+            }
+            else {
+                // Fallback
+                iconContainer.textContent = 'H';
+                iconContainer.style.fontSize = '10px';
+                iconContainer.style.color = '#888888';
+            }
+            return iconContainer;
+        }
+    }
     createPanelStructure() {
         this.container = document.createElement('div');
         this.container.className = 'layers-panel';
@@ -24,7 +123,7 @@ export class CanvasLayersPanel {
             <div class="layers-panel-header">
                 <span class="layers-panel-title">Layers</span>
                 <div class="layers-panel-controls">
-                    <button class="layers-btn" id="delete-layer-btn" title="Delete layer">🗑</button>
+                    <button class="layers-btn" id="delete-layer-btn" title="Delete layer"></button>
                 </div>
             </div>
             <div class="layers-container" id="layers-container">
@@ -231,6 +330,23 @@ export class CanvasLayersPanel {
             .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');
@@ -239,6 +355,11 @@ export class CanvasLayersPanel {
         if (!this.container)
             return;
         const deleteBtn = this.container.querySelector('#delete-layer-btn');
+        // Add delete icon to button
+        if (deleteBtn) {
+            const deleteIcon = this.createIconElement(LAYERFORGE_TOOLS.DELETE, 16);
+            deleteBtn.appendChild(deleteIcon);
+        }
         deleteBtn?.addEventListener('click', () => {
             log.info('Delete layer button clicked');
             this.deleteSelectedLayers();
@@ -280,9 +401,16 @@ export class CanvasLayersPanel {
             layer.name = this.ensureUniqueName(layer.name, layer);
         }
         layerRow.innerHTML = `
+            <div class="layer-visibility-toggle" data-layer-index="${index}" title="Toggle layer visibility"></div>
             <div class="layer-thumbnail" data-layer-index="${index}"></div>
             <span class="layer-name" data-layer-index="${index}">${layer.name}</span>
         `;
+        // Add visibility icon
+        const visibilityToggle = layerRow.querySelector('.layer-visibility-toggle');
+        if (visibilityToggle) {
+            const visibilityIcon = this.createVisibilityIcon(layer.visible);
+            visibilityToggle.appendChild(visibilityIcon);
+        }
         const thumbnailContainer = layerRow.querySelector('.layer-thumbnail');
         if (thumbnailContainer) {
             this.generateThumbnail(layer, thumbnailContainer);
@@ -328,6 +456,15 @@ export class CanvasLayersPanel {
                 this.startEditingLayerName(nameElement, layer);
             }
         });
+        // Add visibility toggle event listener
+        const visibilityToggle = layerRow.querySelector('.layer-visibility-toggle');
+        if (visibilityToggle) {
+            visibilityToggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggleLayerVisibility(layer);
+            });
+        }
         layerRow.addEventListener('dragstart', (e) => this.handleDragStart(e, layer, index));
         layerRow.addEventListener('dragover', this.handleDragOver.bind(this));
         layerRow.addEventListener('dragend', this.handleDragEnd.bind(this));
@@ -401,6 +538,19 @@ export class CanvasLayersPanel {
         } while (existingNames.includes(uniqueName));
         return uniqueName;
     }
+    toggleLayerVisibility(layer) {
+        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) => 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}`);
+    }
     deleteSelectedLayers() {
         if (this.canvas.canvasSelection.selectedLayers.length === 0) {
             log.debug('No layers selected for deletion');