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:
@@ -9,6 +9,7 @@ import { HistoryPanel } from './history-panel';
|
||||
import { FileMenu } from './file-menu';
|
||||
import { ToolPalette, ToolSettings } from '@/components/tools';
|
||||
import { ColorPanel } from '@/components/colors';
|
||||
import { FilterPanel } from '@/components/filters';
|
||||
import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
|
||||
import { useFileOperations } from '@/hooks/use-file-operations';
|
||||
import { useDragDrop } from '@/hooks/use-drag-drop';
|
||||
@@ -175,6 +176,9 @@ export function EditorLayout() {
|
||||
{/* Color Panel */}
|
||||
<ColorPanel />
|
||||
|
||||
{/* Filter Panel */}
|
||||
<FilterPanel />
|
||||
|
||||
{/* Canvas area */}
|
||||
<div className="flex-1">
|
||||
<CanvasWithTools />
|
||||
|
||||
361
components/filters/filter-panel.tsx
Normal file
361
components/filters/filter-panel.tsx
Normal file
@@ -0,0 +1,361 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useFilterStore } from '@/store/filter-store';
|
||||
import { useLayerStore } from '@/store/layer-store';
|
||||
import { useHistoryStore } from '@/store/history-store';
|
||||
import { useFilterPreview } from '@/hooks/use-filter-preview';
|
||||
import { FilterCommand } from '@/core/commands/filter-command';
|
||||
import type { FilterType } from '@/types/filter';
|
||||
import {
|
||||
Wand2,
|
||||
Sun,
|
||||
SunMoon,
|
||||
Palette,
|
||||
Droplet,
|
||||
Sparkles,
|
||||
Slash,
|
||||
Paintbrush,
|
||||
Circle,
|
||||
Grid3x3,
|
||||
Eye,
|
||||
Check,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const FILTERS: Array<{
|
||||
type: FilterType;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
hasParams: boolean;
|
||||
}> = [
|
||||
{ type: 'brightness', label: 'Brightness', icon: Sun, hasParams: true },
|
||||
{ type: 'contrast', label: 'Contrast', icon: SunMoon, hasParams: true },
|
||||
{
|
||||
type: 'hue-saturation',
|
||||
label: 'Hue/Saturation',
|
||||
icon: Palette,
|
||||
hasParams: true,
|
||||
},
|
||||
{ type: 'blur', label: 'Blur', icon: Droplet, hasParams: true },
|
||||
{ type: 'sharpen', label: 'Sharpen', icon: Sparkles, hasParams: true },
|
||||
{ type: 'invert', label: 'Invert', icon: Slash, hasParams: false },
|
||||
{ type: 'grayscale', label: 'Grayscale', icon: Paintbrush, hasParams: false },
|
||||
{ type: 'sepia', label: 'Sepia', icon: Circle, hasParams: false },
|
||||
{ type: 'threshold', label: 'Threshold', icon: Grid3x3, hasParams: true },
|
||||
{ type: 'posterize', label: 'Posterize', icon: Grid3x3, hasParams: true },
|
||||
];
|
||||
|
||||
export function FilterPanel() {
|
||||
const {
|
||||
activeFilter,
|
||||
params,
|
||||
setActiveFilter,
|
||||
updateParams,
|
||||
resetParams,
|
||||
isPreviewMode,
|
||||
setPreviewMode,
|
||||
} = useFilterStore();
|
||||
const { activeLayerId, layers } = useLayerStore();
|
||||
const { executeCommand } = useHistoryStore();
|
||||
const [selectedFilter, setSelectedFilter] = useState<FilterType | null>(null);
|
||||
|
||||
useFilterPreview();
|
||||
|
||||
const activeLayer = layers.find((l) => l.id === activeLayerId);
|
||||
const hasActiveLayer = !!activeLayer && !activeLayer.locked;
|
||||
|
||||
const handleFilterSelect = (filterType: FilterType) => {
|
||||
const filter = FILTERS.find((f) => f.type === filterType);
|
||||
if (!filter) return;
|
||||
|
||||
if (filter.hasParams) {
|
||||
setSelectedFilter(filterType);
|
||||
setActiveFilter(filterType);
|
||||
resetParams();
|
||||
} else {
|
||||
// Apply filter immediately for filters without parameters
|
||||
if (activeLayer) {
|
||||
const command = FilterCommand.applyToLayer(activeLayer, filterType, {});
|
||||
executeCommand(command);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
if (activeFilter && activeLayer) {
|
||||
setPreviewMode(false);
|
||||
const command = FilterCommand.applyToLayer(
|
||||
activeLayer,
|
||||
activeFilter,
|
||||
params
|
||||
);
|
||||
executeCommand(command);
|
||||
setActiveFilter(null);
|
||||
setSelectedFilter(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setPreviewMode(false);
|
||||
setActiveFilter(null);
|
||||
setSelectedFilter(null);
|
||||
resetParams();
|
||||
};
|
||||
|
||||
const handlePreviewToggle = () => {
|
||||
setPreviewMode(!isPreviewMode);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-64 border-l border-border bg-card flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 border-b border-border p-3">
|
||||
<Wand2 className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-sm font-semibold">Filters</h2>
|
||||
</div>
|
||||
|
||||
{/* Filter list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="p-2 space-y-1">
|
||||
{FILTERS.map((filter) => (
|
||||
<button
|
||||
key={filter.type}
|
||||
onClick={() => handleFilterSelect(filter.type)}
|
||||
disabled={!hasActiveLayer}
|
||||
className={cn(
|
||||
'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
|
||||
selectedFilter === filter.type
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'hover:bg-accent text-foreground',
|
||||
!hasActiveLayer && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<filter.icon className="h-4 w-4" />
|
||||
<span>{filter.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Filter parameters */}
|
||||
{selectedFilter && activeFilter && (
|
||||
<div className="border-t border-border p-3 space-y-3">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground uppercase">
|
||||
Parameters
|
||||
</h3>
|
||||
|
||||
{activeFilter === 'brightness' && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Brightness</label>
|
||||
<input
|
||||
type="range"
|
||||
min="-100"
|
||||
max="100"
|
||||
value={params.brightness ?? 0}
|
||||
onChange={(e) =>
|
||||
updateParams({ brightness: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.brightness ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFilter === 'contrast' && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Contrast</label>
|
||||
<input
|
||||
type="range"
|
||||
min="-100"
|
||||
max="100"
|
||||
value={params.contrast ?? 0}
|
||||
onChange={(e) =>
|
||||
updateParams({ contrast: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.contrast ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFilter === 'hue-saturation' && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Hue</label>
|
||||
<input
|
||||
type="range"
|
||||
min="-180"
|
||||
max="180"
|
||||
value={params.hue ?? 0}
|
||||
onChange={(e) =>
|
||||
updateParams({ hue: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.hue ?? 0}°
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Saturation</label>
|
||||
<input
|
||||
type="range"
|
||||
min="-100"
|
||||
max="100"
|
||||
value={params.saturation ?? 0}
|
||||
onChange={(e) =>
|
||||
updateParams({ saturation: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.saturation ?? 0}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Lightness</label>
|
||||
<input
|
||||
type="range"
|
||||
min="-100"
|
||||
max="100"
|
||||
value={params.lightness ?? 0}
|
||||
onChange={(e) =>
|
||||
updateParams({ lightness: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.lightness ?? 0}%
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeFilter === 'blur' && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Radius</label>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="50"
|
||||
value={params.radius ?? 5}
|
||||
onChange={(e) =>
|
||||
updateParams({ radius: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.radius ?? 5}px
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFilter === 'sharpen' && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Amount</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={params.amount ?? 50}
|
||||
onChange={(e) =>
|
||||
updateParams({ amount: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.amount ?? 50}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFilter === 'threshold' && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Threshold</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="255"
|
||||
value={params.threshold ?? 128}
|
||||
onChange={(e) =>
|
||||
updateParams({ threshold: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.threshold ?? 128}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFilter === 'posterize' && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs text-foreground">Levels</label>
|
||||
<input
|
||||
type="range"
|
||||
min="2"
|
||||
max="256"
|
||||
value={params.levels ?? 8}
|
||||
onChange={(e) =>
|
||||
updateParams({ levels: Number(e.target.value) })
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
{params.levels ?? 8}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Preview toggle */}
|
||||
<button
|
||||
onClick={handlePreviewToggle}
|
||||
className={cn(
|
||||
'w-full flex items-center justify-center gap-2 rounded-md p-2 text-sm font-medium transition-colors',
|
||||
isPreviewMode
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-accent text-foreground hover:bg-accent/80'
|
||||
)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
{isPreviewMode ? 'Preview On' : 'Preview Off'}
|
||||
</button>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleApply}
|
||||
className="flex-1 flex items-center justify-center gap-2 rounded-md bg-primary p-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
Apply
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="flex-1 flex items-center justify-center gap-2 rounded-md bg-muted p-2 text-sm font-medium text-muted-foreground hover:bg-muted/80 transition-colors"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!hasActiveLayer && (
|
||||
<div className="p-3 border-t border-border">
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
Select an unlocked layer to apply filters
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
components/filters/index.ts
Normal file
1
components/filters/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './filter-panel';
|
||||
Reference in New Issue
Block a user