bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(phase2): implement ManualCropUI with drag handles

Browse Source 
- 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: ✓
This commit is contained in:
Daniel Bedeleanu
2026-04-21 13:05:37 +03:00
parent 5a64dadc1e
commit b2e2daf40d
9 changed files with 1440 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/networking/testitem_d8328c2d_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 541 B

BIN
images/networking/testitem_e1787985_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 541 B

BIN
images/networking/testitem_original.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 361 B

BIN
images/networking/testitem_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 541 B