feat: Improve VIN photo capture camera crop (#123) #124

Merged
egullickson merged 2 commits from issue-123-improve-vin-camera-crop into main 2026-02-09 00:36:44 +00:00
Owner

Fixes #123

Summary

  • Bridge guidance overlay position to crop tool so initial crop box appears centered, matching the viewfinder guide
  • When initialCrop is provided, skip the draw step and show the crop with handles immediately
  • Increase crop handle touch targets to 44px (32px on compact viewports under 400px height) for mobile usability
  • Add getInitialCropForGuidance() utility that derives centered crop coordinates from existing GUIDANCE_CONFIGS
  • Add bounds clamping to prevent invalid crop coordinates

Changes

File Change
types.ts Add initialCrop to CropToolProps, add getInitialCropForGuidance() with clampPct()
CameraCapture.tsx Calculate and pass cropInitialArea to CropTool
CropTool.tsx Forward initialCrop, responsive handle sizing via useMediaQuery
useImageCrop.ts Set cropDrawn = true when initialCrop provided (skip draw step)
getInitialCropForGuidance.test.ts 5 unit tests for coordinate calculation

Test Plan

  • npm run type-check passes (0 errors)
  • npm run lint passes (0 errors, 1 pre-existing warning)
  • npm test passes (26 tests, including 5 new)
  • Manual: VIN capture crop box appears centered matching overlay guide
  • Manual: Crop handles are grabbable on mobile (44px touch targets)
  • Manual: Crop box is resizable and repositionable after initial placement
  • Manual: Desktop viewport works correctly
Fixes #123 ## Summary - Bridge guidance overlay position to crop tool so initial crop box appears centered, matching the viewfinder guide - When `initialCrop` is provided, skip the draw step and show the crop with handles immediately - Increase crop handle touch targets to 44px (32px on compact viewports under 400px height) for mobile usability - Add `getInitialCropForGuidance()` utility that derives centered crop coordinates from existing `GUIDANCE_CONFIGS` - Add bounds clamping to prevent invalid crop coordinates ## Changes | File | Change | |------|--------| | `types.ts` | Add `initialCrop` to `CropToolProps`, add `getInitialCropForGuidance()` with `clampPct()` | | `CameraCapture.tsx` | Calculate and pass `cropInitialArea` to `CropTool` | | `CropTool.tsx` | Forward `initialCrop`, responsive handle sizing via `useMediaQuery` | | `useImageCrop.ts` | Set `cropDrawn = true` when `initialCrop` provided (skip draw step) | | `getInitialCropForGuidance.test.ts` | 5 unit tests for coordinate calculation | ## Test Plan - [x] `npm run type-check` passes (0 errors) - [x] `npm run lint` passes (0 errors, 1 pre-existing warning) - [x] `npm test` passes (26 tests, including 5 new) - [ ] Manual: VIN capture crop box appears centered matching overlay guide - [ ] Manual: Crop handles are grabbable on mobile (44px touch targets) - [ ] Manual: Crop box is resizable and repositionable after initial placement - [ ] Manual: Desktop viewport works correctly
egullickson added 1 commit 2026-02-08 02:06:09 +00:00
feat: improve VIN camera crop overlay-to-crop alignment and touch targets (refs #123)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m20s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 51s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 7s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
efc55cd3db
Bridge guidance overlay position to crop tool initial coordinates so the
crop box appears centered matching the viewfinder guide. Increase handle
touch targets to 44px (32px on compact viewports) for mobile usability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
egullickson added 1 commit 2026-02-08 02:26:45 +00:00
fix: re-request camera stream on retake when tracks are inactive (refs #123)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m20s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 51s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 7s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
1ff1931864
The retake button failed because the stream tracks could become inactive
during the crop phase, but handleRetake never re-acquired the camera.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
egullickson merged commit ee123a2ffd into main 2026-02-09 00:36:44 +00:00
egullickson deleted branch issue-123-improve-vin-camera-crop 2026-02-09 00:36:44 +00:00
Sign in to join this conversation.
No Reviewers
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#124