Phases 28-31 archived to milestones/v2.2-phases/ Requirements and roadmap snapshots archived to milestones/ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
50 lines
1.7 KiB
Markdown
50 lines
1.7 KiB
Markdown
---
|
|
phase: 29
|
|
plan: 03
|
|
subsystem: fullstack
|
|
tags: [crop-editor, react-easy-crop, ui]
|
|
key-files:
|
|
created:
|
|
- src/client/components/ImageCropEditor.tsx
|
|
modified:
|
|
- src/client/components/ImageUpload.tsx
|
|
- src/client/routes/items/$itemId.tsx
|
|
- src/client/routes/threads/$threadId/candidates/$candidateId.tsx
|
|
- package.json
|
|
metrics:
|
|
tasks: 6
|
|
commits: 4
|
|
files-changed: 6
|
|
---
|
|
|
|
# Plan 29-03 Summary: Zoom+Pan Image Framing Editor
|
|
|
|
## What was built
|
|
- Installed react-easy-crop library
|
|
- Created ImageCropEditor component with zoom slider (1x-3x), save/cancel buttons, dominant color background
|
|
- Integrated crop editor into ImageUpload (shows after upload when onCropChange provided)
|
|
- Added "Adjust framing" button to item detail page with inline crop editor
|
|
- Added "Adjust framing" button to candidate detail page with inline crop editor
|
|
- Global item detail skipped (no update endpoint exists for global items)
|
|
|
|
## Commits
|
|
|
|
| Task | Commit | Description |
|
|
|------|--------|-------------|
|
|
| 1 | 6f4fd78 | Install react-easy-crop |
|
|
| 2 | 23f62fd | Create ImageCropEditor component |
|
|
| 3 | 78a097c | Integrate crop editor into ImageUpload |
|
|
| 4-6 | a18b9d3 | Add crop editor to item and candidate detail pages |
|
|
|
|
## Deviations
|
|
- Task 5 (global item detail): Skipped "Adjust framing" button because no PUT endpoint exists for global items. Crop fields are in the schema but cannot be updated from the frontend for global items.
|
|
|
|
## Self-Check: PASSED
|
|
- react-easy-crop installed: YES
|
|
- ImageCropEditor exists: YES
|
|
- ImageUpload has crop editor: YES
|
|
- Item detail has "Adjust framing": YES
|
|
- Candidate detail has "Adjust framing": YES
|
|
- Build passes: YES
|
|
- Lint passes: YES
|