Implement zone dimension display and zone repositioning in editor

Feature #15 - Show Zone Dimensions:
- Display real-time dimensions while drawing zones
- Show width x height in both pixels and percentages
- Display position coordinates (x, y)
- Dimension label follows cursor with 15px offset
- Label positioned to stay within monitor bounds
- Automatically cleaned up when zone drawing completes

Feature #16 - Move/Reposition Zones:
- Click on existing zones to select and move them
- Yellow highlight when zone is being moved (vs green for new zones)
- Drag zones to new positions while maintaining size
- Constrain movement to monitor bounds (can't move outside screen)
- Real-time update of zone coordinates in data structure
- Green color restored after move completes

Editor Improvements:
- Added zoneActors array to track zone widgets for moving
- Updated instruction label to mention zone moving
- Enhanced _findZoneAtPosition() helper to detect clicks on zones
- Improved _removeLastZone() to properly clean up zone actors
- Better cleanup in _cancelEditor() to prevent memory leaks
- Track moving state (isMovingZone, movingZoneIndex, moveOffsetX/Y)

UX Enhancements:
- Separate visual feedback for creating (green) vs moving (yellow) zones
- Smooth drag experience with proper offset tracking
- Dimensions update in real-time during zone creation
- Clear visual distinction between zone operations

Fixes TODO items #15 and #16

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-15 21:22:58 -07:00
parent 08b82908ea
commit 5cef19690a
2 changed files with 203 additions and 57 deletions

26
TODO.md
View File

@@ -43,22 +43,22 @@
- [ ] Add UI to choose which layout to edit
- [ ] Pre-populate editor with existing zones when editing
### 15. Show Zone Dimensions in Editor
### 15. Show Zone Dimensions in Editor ✅ COMPLETED
**Priority: Medium**
- [ ] Display zone dimensions while drawing in graphical editor
- [ ] Show width and height in pixels and/or percentage
- [ ] Update dimensions in real-time as zone is resized
- [ ] Display position coordinates (x, y)
- [ ] Show dimensions near cursor or inside zone preview
- [x] Display zone dimensions while drawing in graphical editor
- [x] Show width and height in pixels and/or percentage
- [x] Update dimensions in real-time as zone is resized
- [x] Display position coordinates (x, y)
- [x] Show dimensions near cursor or inside zone preview
### 16. Move/Reposition Zones in Editor
### 16. Move/Reposition Zones in Editor ✅ COMPLETED
**Priority: Medium**
- [ ] Allow clicking and dragging existing zones to move them
- [ ] Visual feedback when zone is selected for moving
- [ ] Snap to grid or guides (optional)
- [ ] Prevent moving zones outside monitor bounds
- [ ] Update zone coordinates as zone is moved
- [ ] Maintain zone size while moving (only change position)
- [x] Allow clicking and dragging existing zones to move them
- [x] Visual feedback when zone is selected for moving (yellow highlight)
- [x] Prevent moving zones outside monitor bounds
- [x] Update zone coordinates as zone is moved
- [x] Maintain zone size while moving (only change position)
- [ ] Snap to grid or guides (future enhancement)
## Code Quality & Robustness