feat(phase-7): implement comprehensive effects & filters system
This commit completes Phase 7 of the paint-ui implementation, adding a complete filters and effects system with live preview capabilities. **New Files:** - types/filter.ts: Filter types, parameters, and state interfaces - lib/filter-utils.ts: Core filter algorithms and image processing functions - core/commands/filter-command.ts: Undo/redo support for filters - store/filter-store.ts: Filter state management with Zustand - hooks/use-filter-preview.ts: Real-time filter preview system - components/filters/filter-panel.tsx: Complete filter UI with parameters - components/filters/index.ts: Filters barrel export **Updated Files:** - components/editor/editor-layout.tsx: Integrated FilterPanel into layout - store/index.ts: Added filter-store export - types/index.ts: Added filter types export **Implemented Filters:** **Adjustment Filters (with parameters):** - ✨ Brightness (-100 to +100): Linear brightness adjustment - ✨ Contrast (-100 to +100): Contrast curve adjustment - ✨ Hue/Saturation/Lightness: Full HSL color manipulation - Hue: -180° to +180° rotation - Saturation: -100% to +100% adjustment - Lightness: -100% to +100% adjustment **Effect Filters (with parameters):** - ✨ Gaussian Blur (1-50px): Separable kernel blur with proper edge handling - ✨ Sharpen (0-100%): Unsharp mask algorithm - ✨ Threshold (0-255): Binary threshold conversion - ✨ Posterize (2-256 levels): Color quantization **One-Click Filters (no parameters):** - ✨ Invert: Color inversion - ✨ Grayscale: Luminosity-based desaturation - ✨ Sepia: Classic sepia tone effect **Technical Features:** - Real-time preview system with toggle control - Non-destructive preview (restores original on cancel) - Undo/redo integration via FilterCommand - Efficient image processing with typed arrays - HSL/RGB color space conversions - Separable Gaussian blur for performance - Proper clamping and edge case handling - Layer-aware filtering (respects locked layers) **UI/UX Features:** - 264px wide filter panel with all filters listed - Dynamic parameter controls based on selected filter - Live preview toggle with visual feedback - Apply/Cancel actions with proper state cleanup - Disabled state when no unlocked layer selected - Clear parameter labels and value display **Algorithm Implementations:** - Brightness: Linear RGB adjustment with clamping - Contrast: Standard contrast curve (factor-based) - Hue/Saturation: Full RGB↔HSL conversion with proper hue rotation - Blur: Separable Gaussian kernel (horizontal + vertical passes) - Sharpen: Convolution kernel with configurable amount - Threshold: Luminosity-based binary conversion - Posterize: Color quantization with configurable levels Build verified: ✓ Compiled successfully in 1248ms 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
52
types/filter.ts
Normal file
52
types/filter.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
export type FilterType =
|
||||
| 'brightness'
|
||||
| 'contrast'
|
||||
| 'hue-saturation'
|
||||
| 'blur'
|
||||
| 'sharpen'
|
||||
| 'invert'
|
||||
| 'grayscale'
|
||||
| 'sepia'
|
||||
| 'threshold'
|
||||
| 'posterize';
|
||||
|
||||
export interface FilterParams {
|
||||
// Brightness/Contrast
|
||||
brightness?: number; // -100 to 100
|
||||
contrast?: number; // -100 to 100
|
||||
|
||||
// Hue/Saturation
|
||||
hue?: number; // -180 to 180
|
||||
saturation?: number; // -100 to 100
|
||||
lightness?: number; // -100 to 100
|
||||
|
||||
// Blur
|
||||
radius?: number; // 1 to 50
|
||||
|
||||
// Sharpen
|
||||
amount?: number; // 0 to 100
|
||||
|
||||
// Threshold
|
||||
threshold?: number; // 0 to 255
|
||||
|
||||
// Posterize
|
||||
levels?: number; // 2 to 256
|
||||
}
|
||||
|
||||
export interface Filter {
|
||||
type: FilterType;
|
||||
params: FilterParams;
|
||||
}
|
||||
|
||||
export interface FilterPreset {
|
||||
id: string;
|
||||
name: string;
|
||||
filter: Filter;
|
||||
}
|
||||
|
||||
export interface FilterState {
|
||||
activeFilter: FilterType | null;
|
||||
params: FilterParams;
|
||||
isPreviewMode: boolean;
|
||||
presets: FilterPreset[];
|
||||
}
|
||||
@@ -2,3 +2,4 @@ export * from './canvas';
|
||||
export * from './layer';
|
||||
export * from './tool';
|
||||
export * from './history';
|
||||
export * from './filter';
|
||||
|
||||
Reference in New Issue
Block a user