Daniel Bedeleanu 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

541 B

200x200px

Raw History