Enhanced visual design: - Improved device rack container with darker background and inner shadow - Device cards now have rounded corners, shadows, and colored indicators - Better visual separation between enabled/disabled effects - Active devices highlighted with accent border Complete automation infrastructure (Phase 9): - Created comprehensive type system for automation lanes and points - Implemented AutomationPoint component with drag-and-drop editing - Implemented AutomationHeader with mode controls (Read/Write/Touch/Latch) - Implemented AutomationLane with canvas-based curve rendering - Integrated automation lanes into Track component below effects - Created automation playback engine with real-time interpolation - Added automation data persistence to localStorage Automation features: - Add/remove automation points by clicking/double-clicking - Drag points to change time and value - Multiple automation modes (Read, Write, Touch, Latch) - Linear and step curve types (bezier planned) - Adjustable lane height (60-180px) - Show/hide automation per lane - Real-time value display at playhead - Color-coded lanes by parameter type - Keyboard delete support (Delete/Backspace) Track type updates: - Added automation field to Track interface - Updated track creation to initialize empty automation - Updated localStorage save/load to include automation data Files created: - components/automation/AutomationPoint.tsx - components/automation/AutomationHeader.tsx - components/automation/AutomationLane.tsx - lib/audio/automation/utils.ts (helper functions) - lib/audio/automation/playback.ts (playback engine) - types/automation.ts (complete type system) Files modified: - components/effects/EffectDevice.tsx (Ableton-style visual improvements) - components/tracks/Track.tsx (automation lanes integration) - types/track.ts (automation field added) - lib/audio/track-utils.ts (automation initialization) - lib/hooks/useMultiTrack.ts (automation persistence) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
/**
|
|
* Automation system type definitions
|
|
* Based on Ableton Live's automation model
|
|
*/
|
|
|
|
/**
|
|
* Automation curve types
|
|
* - linear: Straight line between points
|
|
* - bezier: Curved line with control handles
|
|
* - step: Horizontal lines with vertical transitions (for discrete values)
|
|
*/
|
|
export type AutomationCurveType = 'linear' | 'bezier' | 'step';
|
|
|
|
/**
|
|
* Automation recording/playback modes
|
|
* - read: Only playback automation
|
|
* - write: Record automation (replaces existing)
|
|
* - touch: Record while touching control, then return to read mode
|
|
* - latch: Record from first touch until stop, then return to read mode
|
|
*/
|
|
export type AutomationMode = 'read' | 'write' | 'touch' | 'latch';
|
|
|
|
/**
|
|
* Single automation breakpoint
|
|
*/
|
|
export interface AutomationPoint {
|
|
id: string;
|
|
time: number; // Position in seconds from track start
|
|
value: number; // Parameter value (normalized 0-1)
|
|
curve: AutomationCurveType;
|
|
// Bezier control handles (only used when curve is 'bezier')
|
|
handleIn?: { x: number; y: number }; // Relative to point position
|
|
handleOut?: { x: number; y: number }; // Relative to point position
|
|
}
|
|
|
|
/**
|
|
* Parameter identifier for automation
|
|
* Examples:
|
|
* - 'volume' - Track volume
|
|
* - 'pan' - Track pan
|
|
* - 'mute' - Track mute (step curve)
|
|
* - 'effect.compressor-1.threshold' - Effect parameter
|
|
* - 'effect.delay-2.time' - Effect parameter
|
|
*/
|
|
export type AutomationParameterId = string;
|
|
|
|
/**
|
|
* Single automation lane for a specific parameter
|
|
*/
|
|
export interface AutomationLane {
|
|
id: string;
|
|
trackId: string;
|
|
parameterId: AutomationParameterId;
|
|
parameterName: string; // Display name (e.g., "Volume", "Compressor Threshold")
|
|
visible: boolean; // Show/hide lane
|
|
height: number; // Lane height in pixels (user-adjustable, 60-120px)
|
|
points: AutomationPoint[];
|
|
mode: AutomationMode;
|
|
color?: string; // Optional color override (defaults to parameter type color)
|
|
// Value range for display (actual values are normalized 0-1)
|
|
valueRange: {
|
|
min: number; // Display minimum (e.g., 0 for volume)
|
|
max: number; // Display maximum (e.g., 1 for volume)
|
|
unit?: string; // Display unit (e.g., 'dB', '%', 'ms', 'Hz')
|
|
formatter?: (value: number) => string; // Custom value formatter
|
|
};
|
|
}
|
|
|
|
/**
|
|
* All automation lanes for a single track
|
|
*/
|
|
export interface TrackAutomation {
|
|
trackId: string;
|
|
lanes: AutomationLane[];
|
|
showAutomation: boolean; // Master show/hide toggle for all lanes
|
|
}
|
|
|
|
/**
|
|
* Complete automation data for entire project
|
|
*/
|
|
export interface ProjectAutomation {
|
|
tracks: Record<string, TrackAutomation>;
|
|
}
|
|
|
|
/**
|
|
* Automation parameter value at a specific time
|
|
* Used for real-time playback
|
|
*/
|
|
export interface AutomationValue {
|
|
parameterId: AutomationParameterId;
|
|
value: number;
|
|
time: number;
|
|
}
|
|
|
|
/**
|
|
* Helper type for creating new automation points
|
|
*/
|
|
export type CreateAutomationPointInput = Omit<AutomationPoint, 'id'>;
|
|
|
|
/**
|
|
* Helper type for creating new automation lanes
|
|
*/
|
|
export type CreateAutomationLaneInput = Omit<AutomationLane, 'id' | 'points'> & {
|
|
points?: AutomationPoint[];
|
|
};
|