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:
50
store/filter-store.ts
Normal file
50
store/filter-store.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { create } from 'zustand';
|
||||
import type { FilterType, FilterParams, FilterState } from '@/types/filter';
|
||||
|
||||
interface FilterStore extends FilterState {
|
||||
setActiveFilter: (filter: FilterType | null) => void;
|
||||
updateParams: (params: Partial<FilterParams>) => void;
|
||||
resetParams: () => void;
|
||||
setPreviewMode: (enabled: boolean) => void;
|
||||
}
|
||||
|
||||
const defaultParams: FilterParams = {
|
||||
brightness: 0,
|
||||
contrast: 0,
|
||||
hue: 0,
|
||||
saturation: 0,
|
||||
lightness: 0,
|
||||
radius: 5,
|
||||
amount: 50,
|
||||
threshold: 128,
|
||||
levels: 8,
|
||||
};
|
||||
|
||||
export const useFilterStore = create<FilterStore>((set) => ({
|
||||
activeFilter: null,
|
||||
params: { ...defaultParams },
|
||||
isPreviewMode: false,
|
||||
presets: [],
|
||||
|
||||
setActiveFilter: (filter) =>
|
||||
set((state) => ({
|
||||
activeFilter: filter,
|
||||
params: filter ? { ...defaultParams } : state.params,
|
||||
isPreviewMode: false,
|
||||
})),
|
||||
|
||||
updateParams: (params) =>
|
||||
set((state) => ({
|
||||
params: { ...state.params, ...params },
|
||||
})),
|
||||
|
||||
resetParams: () =>
|
||||
set({
|
||||
params: { ...defaultParams },
|
||||
}),
|
||||
|
||||
setPreviewMode: (enabled) =>
|
||||
set({
|
||||
isPreviewMode: enabled,
|
||||
}),
|
||||
}));
|
||||
@@ -1,5 +1,6 @@
|
||||
export * from './canvas-store';
|
||||
export * from './layer-store';
|
||||
export * from './tool-store';
|
||||
export * from './filter-store';
|
||||
export * from './history-store';
|
||||
export * from './color-store';
|
||||
|
||||
Reference in New Issue
Block a user