This commit replaces hard-coded pixel positions with smart percentage-based
calculation and fixes canvas extending beyond node bounds.
Changes:
1. Percentage-Based Region Calculation (js/utils.js):
- Added calculateDefaultRegions(width, height) function
- Calculates positions as percentages of dimensions:
* Region 1 left third: 8% to 35% width, 20% to 80% height
* Region 2 right third: 70% to 98% width, 15% to 83% height
- All values rounded to nearest multiple of 8 (latent compatibility)
- Works for ANY resolution (512, 1024, 1344, 768, etc.)
2. Canvas Overlap Fix (js/utils.js):
- Increased BOTTOM_MARGIN from 20px to 80px
- Prevents canvas from overlapping bottom widgets (box_x/y/w/h)
3. Cleaner Code (js/RegionalPrompting.js):
- Removed all hard-coded position arrays
- Both nodes now use calculateDefaultRegions()
- No more manual scaling needed - percentages adapt automatically
Example Results:
- 512x512: Region 1 at (40, 104), Region 2 at (360, 72)
- 1024x1024: Region 1 at (80, 208), Region 2 at (720, 152)
- 1344x768: Region 1 at (104, 152), Region 2 at (944, 112)
All positions maintain proper thirds regardless of resolution.
Claude
56207dbdc7