Root cause: Python code was falling back to hardcoded defaults because
node.properties["values"] from JavaScript weren't being passed to Python
on fresh (unsaved) nodes. They only worked after saving/loading workflow.
The fix:
1. Added hidden 'region_boxes' STRING input to both nodes (Python)
2. Created hidden widget that serializes node.properties["values"] to JSON (JavaScript)
3. Update hidden widget whenever regions change (transformFunc, width/height scaling)
4. Python now checks region_boxes FIRST, then falls back to saved workflow data
This ensures region data is passed correctly even on brand new nodes.
Updated percentage-based defaults to match calculateDefaultRegions():
- 512x512: [[41, 102, 138, 307], [360, 77, 140, 348]]
- 1024x1024: [[82, 205, 277, 614], [717, 154, 287, 696]]
User should now see car and giraffe in correct positions immediately!
This commit removes the unnecessary HTML canvas element that was causing
persistent overlap issues with widgets at the bottom of the node.
Root Cause Analysis:
- The widget was creating an HTML <canvas> element with absolute positioning
- But ALL rendering was done directly to the LiteGraph canvas context (ctx)
- The HTML canvas served NO purpose but was positioned over the node
- This caused overlap with bottom widgets (box_x/y/w/h) and extended beyond bounds
The Fix:
- Removed HTML canvas creation (document.createElement("canvas"))
- Removed canvas positioning code (absolute positioning, transform-aware updates)
- Removed off-screen hiding mechanism (onDrawBackground handler)
- Removed canvas cleanup code (onRemoved handlers)
- Reduced BOTTOM_MARGIN from 80px to 10px (no longer needed)
Result:
- Canvas visualization drawn ONLY to LiteGraph canvas (native rendering)
- No HTML elements overlaying the node
- Widgets no longer overlap canvas
- Canvas no longer extends beyond node bounds
- 70 lines of unnecessary code removed
This is the CORRECT approach - drawing directly to ctx without HTML overlays.
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.
Canvas Sizing (COMPLETE REWRITE):
- Switched from broken dynamic calculation to FIXED 280px height
- This eliminates ALL overlap/boundary issues that plagued previous attempts
- Removed complex MIN_SIZE/BOTTOM_PADDING logic in favor of simple sequential positioning
- Canvas now has proper spacing below it, no widget overlap, stays within node bounds
Default Prompts & Positioning (Based on User's Working Example):
- Background: "photo of empty city street at night, high quality"
- Region 1: "red sports car on left side of image (left third of image)"
- Region 2: "giraffe wearing sunglasses on right side of image (last third of image)"
- Updated tooltips to emphasize "TIP: Position regions far apart for best results"
Default Box Positions (FAR APART for optimal results):
- RegionalPrompterSimple (512x512):
* Region 1: x=30, w=150 (left third: pixels 30-180)
* Region 2: x=332, w=150 (right third: pixels 332-482)
- RegionalPrompterFlux (1024x1024):
* Region 1: x=50, w=300 (left third: pixels 50-350)
* Region 2: x=674, w=300 (right third: pixels 674-974)
Tooltips Added to Bottom Widgets:
- region selector: "Select which region to edit (use box_x/y/w/h below to adjust position)"
- box_x: "X position of selected region (pixels from left)"
- box_y: "Y position of selected region (pixels from top)"
- box_w: "Width of selected region in pixels"
- box_h: "Height of selected region in pixels"
This should resolve all canvas UI issues once and for all.
Bug: When user selected "Region 1" and edited box position, it was actually
moving Region 2's box instead.
Root Cause: transformFunc was using region selector value directly as array
index without converting from 1-based UI to 0-based array indexing.
- Region selector displays: "Region 1", "Region 2", etc. (1-based for users)
- Behind the scenes: array[0], array[1], etc. (0-based for storage)
Fix: In transformFunc, subtract 1 from region selector value before using as
array index:
regionSelectorValue = 1 → arrayIndex = 0 → updates array[0] (Region 1)
regionSelectorValue = 2 → arrayIndex = 1 → updates array[1] (Region 2)
Now editing "Region 1" box correctly updates the first region in the array.
Widget Layout Improvements:
- Moved background_strength to optional section, directly under background_prompt
- Grouped each region's prompt with its strength parameter (reduces gray space)
- New order: background_prompt → background_strength → region1_prompt → region1_strength → etc.
Strength Value Updates (based on user testing with bg_strength=0.5):
- region1_strength: 5.0 → 2.5 (too high caused softness/detail loss)
- region2_strength: 6.0 → 3.5 (balanced for second region)
- region3_strength: 7.0 → 4.0 (moderate increase)
- region4_strength: 8.0 → 4.5 (highest for last region)
- Changed step from 0.5 → 0.1 for finer control
- Updated tooltips to warn about detail loss when too high
Canvas Sizing Fixes:
- Improved canvas height calculation to prevent overlap with widgets below
- MIN_SIZE: 300 → 320 for better visibility
- BOTTOM_PADDING: 10 → 20 to ensure proper spacing
- Fixed node size calculation to account for canvas + widgets + padding
- Canvas should no longer extend beyond node boundary
Critical Fixes:
- Fixed RuntimeError in feathering: changed min() to torch.minimum() for tensor comparison
- This was blocking all workflow execution
Default Improvements:
- Changed region2 default prompt from "street vendor" to "giraffe wearing sunglasses"
- Made giraffe box taller: 600px height instead of 500px (Flux) and 300px instead of 250px (Simple)
- Adjusted y position for better centering
Canvas Sizing Adjustments:
- Increased MIN_SIZE from 250 to 300 for better canvas visibility
- Increased minHeight from 250 to 350 for balanced layout
- Reduced BOTTOM_PADDING from 20px to 10px to minimize gray space while preventing overlap
- Reduced canvas minHeight (400→250) and MIN_SIZE (350→250) to minimize gray space
- Added 20px bottom padding to prevent canvas from overlapping box widgets and node border
- Added visible emoji-labeled headers to all prompt inputs:
* 🌍 Background Prompt
* 📍 Region 1-4
- Improved widget label clarity for better user experience
These changes address user-reported issues with canvas positioning and
lack of clear region identification in the node UI.
Major Changes:
- Add MultiAreaConditioningMask node for Flux/Chroma/SD3 support
- Implement comprehensive error handling and input validation
- Add bounds checking for MultiLatentComposite (fixes known issue)
- Modernize JavaScript loading (js/ folder, no file copying)
- Add tooltips and descriptions to all node inputs
Fixes:
- Remove debug console.log statements
- Fix graph reference bug in background drawing (app.graph vs graph)
- Fix typo in variable name (inputLenght -> inputLength)
- Improve comment accuracy
Enhancements:
- Add detailed error messages with emoji indicators (⚠️ℹ️❌)
- Implement graceful fallback behavior when metadata missing
- Add tensor shape and type validation
- Add channel compatibility checking in MultiLatentComposite
- Improve feathering with proper gradient calculation
- Add bounds clipping with informative warnings
Documentation:
- Complete README rewrite with compatibility matrix
- Add usage examples for Flux, Chroma, SD, SDXL
- Document all node inputs/outputs with descriptions
- Add troubleshooting section
- Add changelog with version 3.0 details
JavaScript:
- Move from javascript/ to js/ for modern ComfyUI compatibility
- Clean up all console.log debug statements
- Fix graph._nodes bug (should be app.graph._nodes)
- Add MultiAreaConditioningMask.js for mask-based node
- Improve code comments and formatting
Compatibility:
- SD1.5, SD2.x, SDXL (area-based, existing functionality)
- Flux, Chroma, SD3, SD3.5 (mask-based, NEW)
- Experimental Qwen-Image support noted
- WAN 2.2 marked as not supported (video architecture)
All changes maintain backward compatibility with existing workflows
while adding modern model support and significantly improving
robustness and user experience.
Claude