Files
GridSnap/extension.js
Keith Smith 5cef19690a 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>
2026-01-15 21:22:58 -07:00

30 KiB