feat(phase-13): implement gradient tool with linear, radial, and angular modes
Add comprehensive gradient tool with three gradient types and full UI integration. Features: - Gradient tool with drag-to-create interaction - Three gradient types: Linear, Radial, and Angular (conic) - Live preview during drag with 70% opacity overlay - Primary and secondary color selection - Gradient type selector in tool options - Undo/redo support through command system - Fallback to radial gradient for browsers without conic gradient support Changes: - Created tools/gradient-tool.ts with GradientTool class - Added 'gradient' to ToolType in types/tool.ts - Extended ToolSettings with secondaryColor and gradientType - Updated store/tool-store.ts with setSecondaryColor and setGradientType methods - Added gradient tool loading in lib/tool-loader.ts - Added gradient button to tool palette with 'G' shortcut - Added gradient tool options UI in components/editor/tool-options.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ export type ToolType =
|
||||
| 'brush'
|
||||
| 'eraser'
|
||||
| 'fill'
|
||||
| 'gradient'
|
||||
| 'eyedropper'
|
||||
| 'text'
|
||||
| 'shape'
|
||||
@@ -32,6 +33,10 @@ export interface ToolSettings {
|
||||
hardness: number;
|
||||
/** Color */
|
||||
color: string;
|
||||
/** Secondary color (for gradients) */
|
||||
secondaryColor?: string;
|
||||
/** Gradient type */
|
||||
gradientType?: 'linear' | 'radial' | 'angular';
|
||||
/** Flow rate (0-1) */
|
||||
flow: number;
|
||||
/** Spacing between brush stamps */
|
||||
|
||||
Reference in New Issue
Block a user