feat: improve editor layout

public/scripts/preset-editor.js

@@ -67,19 +67,12 @@ class PresetEditor {
     setupEventListeners() {
         // Preset metadata
         const nameInput = document.getElementById('editor-preset-name');
-        const descInput = document.getElementById('editor-preset-desc');
         
         if (nameInput) {
             nameInput.addEventListener('input', (e) => {
                 this.configuration.name = e.target.value;
             });
         }
-        
-        if (descInput) {
-            descInput.addEventListener('input', (e) => {
-                this.configuration.description = e.target.value;
-            });
-        }
 
         // Add layer button
         const addLayerBtn = document.getElementById('editor-add-layer');
@@ -87,14 +80,6 @@ class PresetEditor {
             addLayerBtn.addEventListener('click', () => this.addLayer());
         }
 
-        // Building block type selector
-        const typeSelector = document.getElementById('editor-layer-type');
-        if (typeSelector) {
-            typeSelector.addEventListener('change', (e) => {
-                this.showLayerTypeOptions(e.target.value);
-            });
-        }
-
         // Save/Load buttons
         const saveBtn = document.getElementById('editor-save-preset');
         if (saveBtn) {
@@ -157,14 +142,8 @@ class PresetEditor {
     }
 
     addLayer() {
-        const layerType = document.getElementById('editor-layer-type')?.value || 'shape';
-        
-        let layer;
-        if (layerType === 'pattern') {
-            layer = this.createPatternLayer();
-        } else {
-            layer = this.createShapeLayer();
-        }
+        // Default to shape layer type
+        const layer = this.createShapeLayer();
         
         this.configuration.layers.push(layer);
         
@@ -464,6 +443,14 @@ class PresetEditor {
     }
 
     renderShapeEditor(container, layer, index) {
+        // Layer type selector
+        this.addSelect(container, 'Layer Type', layer.type, 
+            ['shape', 'pattern'],
+            (value) => {
+                this.changeLayerType(index, value);
+            }
+        );
+        
         // Shape type
         this.addSelect(container, 'Shape', layer.shape, 
             ['circle', 'rectangle', 'triangle', 'blob', 'point', 'line'],
@@ -517,6 +504,14 @@ class PresetEditor {
     }
 
     renderPatternEditor(container, layer, index) {
+        // Layer type selector
+        this.addSelect(container, 'Layer Type', layer.type, 
+            ['shape', 'pattern'],
+            (value) => {
+                this.changeLayerType(index, value);
+            }
+        );
+        
         // Pattern type
         this.addSelect(container, 'Pattern', layer.pattern,
             ['trail', 'radial', 'spiral'],
@@ -774,6 +769,31 @@ class PresetEditor {
         this.renderLayerList();
     }
 
+    changeLayerType(index, newType) {
+        const layer = this.configuration.layers[index];
+        
+        if (layer.type === newType) return;
+        
+        // Create a new layer of the specified type
+        let newLayer;
+        if (newType === 'pattern') {
+            newLayer = this.createPatternLayer();
+        } else {
+            newLayer = this.createShapeLayer();
+        }
+        
+        // Preserve some properties if they exist
+        if (layer.intensity !== undefined) {
+            newLayer.intensity = layer.intensity;
+        }
+        
+        // Replace the layer
+        this.configuration.layers[index] = newLayer;
+        
+        this.renderLayerList();
+        this.refreshPreviewIfActive();
+    }
+
     deleteLayer(index) {
         if (confirm('Delete this layer?')) {
             this.configuration.layers.splice(index, 1);
@@ -808,16 +828,11 @@ class PresetEditor {
         
         // Update UI
         const nameInput = document.getElementById('editor-preset-name');
-        const descInput = document.getElementById('editor-preset-desc');
         
         if (nameInput) {
             nameInput.value = this.configuration.name;
         }
         
-        if (descInput) {
-            descInput.value = this.configuration.description;
-        }
-        
         // Clear and re-render layer list
         this.renderLayerList();
         
@@ -850,7 +865,6 @@ class PresetEditor {
             this.configuration = JSON.parse(JSON.stringify(preset));
             
             document.getElementById('editor-preset-name').value = this.configuration.name;
-            document.getElementById('editor-preset-desc').value = this.configuration.description;
             
             this.renderLayerList();
             this.refreshPreviewIfActive();
@@ -868,7 +882,6 @@ class PresetEditor {
             
             this.configuration = this.getDefaultConfiguration();
             document.getElementById('editor-preset-name').value = this.configuration.name;
-            document.getElementById('editor-preset-desc').value = this.configuration.description;
             
             this.loadSavedPresets();
             this.renderLayerList();
@@ -924,7 +937,6 @@ class PresetEditor {
                 this.configuration = imported;
                 
                 document.getElementById('editor-preset-name').value = this.configuration.name;
-                document.getElementById('editor-preset-desc').value = this.configuration.description;
                 
                 this.renderLayerList();
                 this.refreshPreviewIfActive();