Sebastian Krüger
89a845feb3
Add comprehensive shape drawing system with support for 7 shape types: rectangle, ellipse, line, arrow, polygon, star, and triangle. Features: - Created types/shape.ts with ShapeType and ShapeSettings interfaces - Implemented lib/shape-utils.ts with drawing algorithms for all shapes: * Rectangle with optional corner radius * Ellipse with independent x/y radii * Line with stroke support * Arrow with configurable head size and angle * Polygon with adjustable sides (3-20) * Star with points and inner radius control * Triangle (equilateral style) - Created store/shape-store.ts for shape state management - Implemented tools/shape-tool.ts as unified tool handling all shapes - Built components/shapes/shape-panel.tsx with comprehensive UI: * Grid selector for all 7 shape types * Fill/stroke toggles with color pickers * Dynamic properties panel (corner radius, sides, inner radius, etc.) * Real-time stroke width adjustment - Integrated ShapeTool into canvas-with-tools.tsx - Added ShapePanel to editor-layout.tsx sidebar - Removed duplicate ShapeType/ShapeSettings from types/tool.ts All shapes support: - Fill with color selection - Stroke with color and width controls - Shape-specific properties (corners, sides, arrow heads, etc.) - Undo/redo via DrawCommand integration Build Status: ✓ Successful (1290ms) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
61 lines
1.1 KiB
TypeScript
61 lines
1.1 KiB
TypeScript
import type { PointerState } from './canvas';
|
|
|
|
/**
|
|
* Available tool types
|
|
*/
|
|
export type ToolType =
|
|
| 'select'
|
|
| 'move'
|
|
| 'pencil'
|
|
| 'brush'
|
|
| 'eraser'
|
|
| 'fill'
|
|
| 'eyedropper'
|
|
| 'text'
|
|
| 'shape'
|
|
| 'crop'
|
|
| 'clone'
|
|
| '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;
|
|
/** 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;
|
|
}
|