92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
/**
|
|
* Base class for button generator effects
|
|
* All effects should extend this class and implement required methods
|
|
*/
|
|
export class ButtonEffect {
|
|
/**
|
|
* @param {Object} config - Effect configuration
|
|
* @param {string} config.id - Unique identifier for this effect
|
|
* @param {string} config.name - Display name for the effect
|
|
* @param {string} config.type - Effect type: 'text', 'text2', 'background', 'general', 'border'
|
|
* @param {string} config.category - UI category for grouping effects
|
|
* @param {number} config.renderOrder - Order in rendering pipeline (lower = earlier)
|
|
*/
|
|
constructor(config) {
|
|
this.config = config; // Store full config for subclasses to access
|
|
this.id = config.id;
|
|
this.name = config.name;
|
|
this.type = config.type; // 'text', 'text2', 'background', 'general', 'border'
|
|
this.category = config.category;
|
|
this.renderOrder = config.renderOrder || 100;
|
|
this.controls = this.defineControls();
|
|
}
|
|
|
|
/**
|
|
* Define UI controls for this effect
|
|
* @returns {Array<Object>} Array of control definitions
|
|
*
|
|
* Control definition format:
|
|
* {
|
|
* id: string, // HTML element ID
|
|
* type: 'checkbox' | 'range' | 'color' | 'select' | 'text',
|
|
* label: string, // Display label
|
|
* defaultValue: any, // Default value
|
|
* min: number, // For range controls
|
|
* max: number, // For range controls
|
|
* step: number, // For range controls
|
|
* options: Array<{value, label}>, // For select controls
|
|
* showWhen: string, // ID of checkbox that controls visibility
|
|
* description: string // Optional tooltip/help text
|
|
* }
|
|
*/
|
|
defineControls() {
|
|
return [];
|
|
}
|
|
|
|
/**
|
|
* Check if this effect is currently enabled
|
|
* @param {Object} controlValues - Current values of all controls
|
|
* @returns {boolean}
|
|
*/
|
|
isEnabled(controlValues) {
|
|
// Default: check for a control with ID pattern 'animate-{effectId}' or '{effectId}-enabled'
|
|
const enableControl = controlValues[`animate-${this.id}`] ||
|
|
controlValues[`${this.id}-enabled`];
|
|
return enableControl === true || enableControl === 'true';
|
|
}
|
|
|
|
/**
|
|
* Apply the effect during rendering
|
|
* @param {CanvasRenderingContext2D} context - Canvas context to draw on
|
|
* @param {Object} controlValues - Current values of all controls
|
|
* @param {AnimationState} animState - Current animation state (null for static)
|
|
* @param {Object} renderData - Additional render data (text metrics, colors, etc.)
|
|
*/
|
|
apply(context, controlValues, animState, renderData) {
|
|
throw new Error('Effect.apply() must be implemented by subclass');
|
|
}
|
|
|
|
/**
|
|
* Get control values specific to this effect
|
|
* @param {Object} allControlValues - All control values
|
|
* @returns {Object} Only the controls relevant to this effect
|
|
*/
|
|
getEffectControls(allControlValues) {
|
|
const effectControls = {};
|
|
this.controls.forEach(control => {
|
|
if (control.id in allControlValues) {
|
|
effectControls[control.id] = allControlValues[control.id];
|
|
}
|
|
});
|
|
return effectControls;
|
|
}
|
|
|
|
/**
|
|
* Validate that this effect can be applied
|
|
* @param {Object} controlValues - Current values of all controls
|
|
* @returns {boolean}
|
|
*/
|
|
canApply(controlValues) {
|
|
return this.isEnabled(controlValues);
|
|
}
|
|
}
|