Sebastian Krüger
8f595ac6c4
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>
68 lines
1.3 KiB
TypeScript
68 lines
1.3 KiB
TypeScript
import type { PointerState } from './canvas';
|
|
|
|
/**
|
|
* Available tool types
|
|
*/
|
|
export type ToolType =
|
|
| 'select'
|
|
| 'move'
|
|
| 'pencil'
|
|
| 'brush'
|
|
| 'eraser'
|
|
| 'fill'
|
|
| 'gradient'
|
|
| 'eyedropper'
|
|
| 'text'
|
|
| 'shape'
|
|
| 'crop'
|
|
| 'clone'
|
|
| 'smudge'
|
|
| 'dodge'
|
|
| 'blur'
|
|
| 'sharpen';
|
|
|
|
/**
|
|
* Tool settings interface
|
|
*/
|
|
export interface ToolSettings {
|
|
/** Brush/pencil size */
|
|
size: number;
|
|
/** Opacity (0-1) */
|
|
opacity: number;
|
|
/** Hardness (0-1) */
|
|
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 */
|
|
spacing: number;
|
|
}
|
|
|
|
/**
|
|
* Tool state interface
|
|
*/
|
|
export interface ToolState {
|
|
/** Currently active tool */
|
|
activeTool: ToolType;
|
|
/** Tool-specific settings */
|
|
settings: ToolSettings;
|
|
/** Custom cursor */
|
|
cursor: string;
|
|
}
|
|
|
|
/**
|
|
* Tool event handlers
|
|
*/
|
|
export interface ToolHandlers {
|
|
onPointerDown?: (pointer: PointerState, ctx: CanvasRenderingContext2D) => void;
|
|
onPointerMove?: (pointer: PointerState, ctx: CanvasRenderingContext2D) => void;
|
|
onPointerUp?: (pointer: PointerState, ctx: CanvasRenderingContext2D) => void;
|
|
onActivate?: () => void;
|
|
onDeactivate?: () => void;
|
|
}
|