feat: pattern editor

public/index.html

@@ -103,16 +103,8 @@
                             </div>
                         </div>
 
-                        <!-- Add Layer Section -->
+                        <!-- Add Layer Button -->
                         <div class="editor-section-compact">
-                            <h3 class="section-title-compact">Add Layer</h3>
-                            <div class="editor-input-wrapper">
-                                <label>Layer Type</label>
-                                <select id="editor-layer-type">
-                                    <option value="shape">Shape</option>
-                                    <option value="pattern">Pattern</option>
-                                </select>
-                            </div>
                             <button class="btn btn-primary btn-full-width" id="editor-add-layer">➕ Add Layer</button>
                         </div>
 

public/scripts/canvas-renderer.js

@@ -138,38 +138,6 @@ class CanvasRenderer {
                 };
             }
             
-            case 'palette': {
-                const stops = colorConfig.stops || [
-                    { position: 0, color: '000000' },
-                    { position: 1, color: 'ffffff' }
-                ];
-                
-                return (t) => {
-                    const clamped = this.clamp(t, 0, 1);
-                    
-                    // Find the two stops to interpolate between
-                    let stop1 = stops[0];
-                    let stop2 = stops[stops.length - 1];
-                    
-                    for (let i = 0; i < stops.length - 1; i++) {
-                        if (clamped >= stops[i].position && clamped <= stops[i + 1].position) {
-                            stop1 = stops[i];
-                            stop2 = stops[i + 1];
-                            break;
-                        }
-                    }
-                    
-                    // Interpolate between the two stops
-                    const range = stop2.position - stop1.position;
-                    const localT = range > 0 ? (clamped - stop1.position) / range : 0;
-                    
-                    const rgb1 = this.hexToRgb(stop1.color);
-                    const rgb2 = this.hexToRgb(stop2.color);
-                    
-                    return this.rgbToHex(this.lerpRgb(rgb1, rgb2, localT));
-                };
-            }
-            
             default:
                 return () => 'ff0000';
         }

public/scripts/preset-editor.js

@@ -157,14 +157,15 @@ class PresetEditor {
     }
 
     addLayer() {
-        const layerType = document.getElementById('editor-layer-type')?.value || 'shape';
+        // Create a default shape layer
-        
+        const layer = {
-        let layer;
+            type: 'shape',
-        if (layerType === 'pattern') {
+            shape: 'circle',
-            layer = this.createPatternLayer();
+            position: { x: 8, y: 8 },
-        } else {
+            size: { radius: 3, width: 5, height: 5 },
-            layer = this.createShapeLayer();
+            color: { type: 'solid', value: 'ff0000' },
-        }
+            intensity: 1.0
+        };
         
         this.configuration.layers.push(layer);
         
@@ -197,39 +198,64 @@ class PresetEditor {
     }
 
     createShapeLayer() {
-        return {
+        const shape = document.getElementById('editor-shape-type')?.value || 'circle';
+        const colorType = document.getElementById('editor-color-type')?.value || 'solid';
+        const colorInput = document.getElementById('editor-color-value');
+        
+        // Get color value and convert from #RRGGBB to RRGGBB format
+        let colorValue = 'ff0000';
+        if (colorInput && colorInput.value) {
+            colorValue = colorInput.value.replace('#', '');
+        }
+        
+        const animationType = document.getElementById('editor-animation-type')?.value;
+        
+        const layer = {
             type: 'shape',
-            shape: 'circle',
+            shape: shape,
-            position: { x: 8, y: 8 },
+            position: { 
-            size: { radius: 3, width: 5, height: 5 },
+                x: parseFloat(document.getElementById('editor-pos-x')?.value || 8),
-            color: { type: 'solid', value: 'ff0000' },
+                y: parseFloat(document.getElementById('editor-pos-y')?.value || 8)
-            intensity: 1.0
+            },
+            size: {
+                radius: parseFloat(document.getElementById('editor-size-radius')?.value || 3),
+                width: parseFloat(document.getElementById('editor-size-width')?.value || 5),
+                height: parseFloat(document.getElementById('editor-size-height')?.value || 5)
+            },
+            color: {
+                type: colorType,
+                value: colorValue
+            },
+            intensity: parseFloat(document.getElementById('editor-intensity')?.value || 1.0),
         };
+        
+        if (animationType && animationType !== 'none') {
+            layer.animation = this.createAnimation(animationType);
+        }
+        
+        return layer;
     }
 
     createPatternLayer() {
+        const pattern = document.getElementById('editor-pattern-type')?.value || 'radial';
+        const colorType = document.getElementById('editor-color-type')?.value || 'solid';
+        const colorInput = document.getElementById('editor-color-value');
+        
+        // Get color value and convert from #RRGGBB to RRGGBB format
+        let colorValue = 'ff0000';
+        if (colorInput && colorInput.value) {
+            colorValue = colorInput.value.replace('#', '');
+        }
+        
         return {
             type: 'pattern',
-            pattern: 'spiral',
+            pattern: pattern,
             color: {
-                type: 'palette',
+                type: colorType,
-                stops: [
+                value: colorValue
-                    { position: 0.0, color: 'ff0000' },
-                    { position: 0.17, color: 'ff8800' },
-                    { position: 0.33, color: 'ffff00' },
-                    { position: 0.5, color: '00ff00' },
-                    { position: 0.67, color: '0088ff' },
-                    { position: 0.83, color: '8800ff' },
-                    { position: 1.0, color: 'ff0088' }
-                ]
             },
             intensity: 1.0,
-            params: {
+            params: this.getPatternParams(pattern)
-                centerX: 8,
-                centerY: 8,
-                arms: 5,
-                rotationSpeed: 1.0
-            }
         };
     }