Start of the rewrite to a modular system

static/js/button-generator/effects/background-gradient.js

@@ -0,0 +1,76 @@
+import { ButtonEffect } from '../effect-base.js';
+
+/**
+ * Gradient background effect
+ */
+export class GradientBackgroundEffect extends ButtonEffect {
+  constructor() {
+    super({
+      id: 'bg-gradient',
+      name: 'Gradient Background',
+      type: 'background',
+      category: 'Background',
+      renderOrder: 1
+    });
+  }
+
+  defineControls() {
+    return [
+      {
+        id: 'gradient-color1',
+        type: 'color',
+        label: 'Gradient Color 1',
+        defaultValue: '#ff0000',
+        showWhen: 'bg-type',
+        description: 'Start color of gradient'
+      },
+      {
+        id: 'gradient-color2',
+        type: 'color',
+        label: 'Gradient Color 2',
+        defaultValue: '#0000ff',
+        showWhen: 'bg-type',
+        description: 'End color of gradient'
+      },
+      {
+        id: 'gradient-angle',
+        type: 'range',
+        label: 'Gradient Angle',
+        defaultValue: 90,
+        min: 0,
+        max: 360,
+        step: 1,
+        showWhen: 'bg-type',
+        description: 'Angle of gradient direction'
+      }
+    ];
+  }
+
+  isEnabled(controlValues) {
+    return controlValues['bg-type'] === 'gradient';
+  }
+
+  apply(context, controlValues, animState, renderData) {
+    const color1 = controlValues['gradient-color1'] || '#ff0000';
+    const color2 = controlValues['gradient-color2'] || '#0000ff';
+    const angle = (controlValues['gradient-angle'] || 90) * (Math.PI / 180);
+
+    // Calculate gradient endpoints
+    const x1 = renderData.centerX + Math.cos(angle) * renderData.centerX;
+    const y1 = renderData.centerY + Math.sin(angle) * renderData.centerY;
+    const x2 = renderData.centerX - Math.cos(angle) * renderData.centerX;
+    const y2 = renderData.centerY - Math.sin(angle) * renderData.centerY;
+
+    const gradient = context.createLinearGradient(x1, y1, x2, y2);
+    gradient.addColorStop(0, color1);
+    gradient.addColorStop(1, color2);
+
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, renderData.width, renderData.height);
+  }
+}
+
+// Auto-register effect
+export function register(generator) {
+  generator.registerEffect(new GradientBackgroundEffect());
+}