|
|
b2e2daf40d
|
feat(phase2): implement ManualCropUI with drag handles
- useCropHandles.ts: Hook managing crop bounds state, drag operations, and constraints
- 8 draggable handles (4 corners + 4 edges)
- Real-time crop bounds calculation during drag
- Constrained within image bounds (no dragging outside)
- Minimum crop size enforcement (100x100px)
- Support for mobile (touch) and desktop (mouse) events
- Bounds validation on initialization
- ManualCropUI.tsx: Interactive crop preview component
- Responsive image display with calculated scaling
- Semi-transparent overlay outside crop box with visible bounding box
- 8 draggable handles with visual feedback (highlight/scale on hover)
- 'Use Full Photo' button to clear crop and show full image
- Real-time onCropChange callbacks to parent
- Error handling for failed image loads
- Touch and mouse event support (desktop + mobile)
- TypeScript strict mode compliant
- Tests: 26 comprehensive test cases
- Hook tests (26 passing): initialization, setCrop, resetCrop, drag operations (corners, edges), constraints, endDrag, edge cases
- Component tests (26 passing): rendering, handles, overlay, callbacks, button, error handling, dimensions, touch/mouse support, responsive behavior, size enforcement, bounds display
All 364 tests passing (13 test files, zero regressions)
Minimum crop size: 100x100px
Handle visual feedback on hover/drag
TypeScript strict mode: ✓
|
2026-04-21 13:05:37 +03:00 |
|
