<a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_layer_manager">https://github.com/orion4d/Orion4D_layer_manager</a>A custom layer editor for ComfyUI with three utilities (drop shadow editor, crop editor, and gradient editor)<h2 id="included-nodes">Included nodes</h2>NodePurposeMain outputs🌑 Drop ShadowCreates configurable inner or outer shadows around an image or maskImage, mask, RGBA image, shadow RGBA, shadow mask🎨 Fill / Gradient Generator v2Generates solid fills and multi-color gradientsImage, full mask, border mask, settings JSONInteractive CropDefines and applies an interactive crop regionCropped image, output dimensions, crop coordinatesPaste Cropped ImagePlaces a cropped image back onto a new canvasImage, mask, RGBA image🧩 Layer ManagerComposites and transforms multiple image/mask layersFlattened image, RGBA image, alpha maskAll nodes are available in the ComfyUI category:<pre><code>Orion4D_Layer
</code></pre>💡 Tip: Install <a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_AutoCachedPreview">Orion4D_AutoCachedPreview</a> to retrieve images from an ongoing workflow without restarting the entire generation process.<h3 id="very-useful-for-your-creations:">Very useful for your creations:</h3><ul><li><a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_maskpro">Orion4D_maskpro</a></li><li><a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_TextMakerPro">Orion4D_TextMakerPro</a></li><li><a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_generative_paint">Orion4D_generative_paint</a></li><li><a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_FXMax">Orion4D_FXMax</a></li></ul><hr /><h2 id="main-concept">Main concept</h2>The suite uses a lightweight node + external application workflow:<pre><code>ComfyUI node
├── image and mask inputs
├── output ports
├── Open App button
└── hidden serialized settings

External App
├── large preview canvas
├── direct visual editing
├── synchronized controls
└── Apply / Close actions
</code></pre>This approach avoids oversized nodes, crowded widgets and heavy DOM previews inside the ComfyUI graph.<hr /><h1 id="nodes">Nodes</h1><h2 id="drop-shadow">🌑 Drop Shadow</h2>Create an inner or outer shadow from an image alpha channel or an optional mask.<h3 id="features">Features</h3><ul><li>External real-time preview application</li><li>Automatic preview of the connected image</li><li>Outer and inner shadow modes</li><li>Canvas width and height</li><li>Object scaling</li><li>Shadow spread</li><li>Gaussian blur</li><li>Horizontal and vertical offset</li><li>Shadow opacity and color</li><li>Transparent or solid-color background</li><li>Separate shadow RGBA and shadow mask outputs</li><li>JSON preset management</li></ul><h3 id="presets">Presets</h3>Drop Shadow presets are stored in:<pre><code>presets_shadows/
</code></pre>Example:<pre><code>{
 "canvas_width": 1024,
 "canvas_height": 1024,
 "scale_percent": -15.0,
 "shadow_mode": "outer",
 "shadow_spread": 0,
 "shadow_blur": 36.0,
 "shadow_offset_x": 24,
 "shadow_offset_y": 28,
 "shadow_opacity": 0.42,
 "shadow_color": "#000000",
 "background_mode": "transparent",
 "background_color": "#FFFFFF"
}</code></pre><hr /><h2 id="fill-gradient-generator">🎨 Fill / Gradient Generator</h2>Generate solid colors and configurable gradients without requiring an input image.<h3 id="fill-modes">Fill modes</h3><ul><li>Solid</li><li>Linear</li><li>Radial</li><li>Angular</li><li>Reflected</li><li>Diamond</li></ul><h3 id="features">Features</h3><ul><li>One to four colors</li><li>Gradient inversion</li><li>Adjustable angle</li><li>Interactive center position</li><li>Width and height controls</li><li>Inner border size</li><li>Border color and opacity</li><li>Full mask and border mask outputs</li><li>JSON settings output</li><li>JSON preset management</li></ul><h3 id="presets">Presets</h3>Gradient presets are stored in:<pre><code>presets_gradients/
</code></pre>Example:<pre><code>{
 "width": 1024,
 "height": 1024,
 "fill_mode": "radial",
 "color_count": "3",
 "color_1": "#FFF2B2",
 "color_2": "#FF7A18",
 "color_3": "#5A1026",
 "color_4": "#111827",
 "invert": false,
 "angle": 0.0,
 "center_x": 0.5,
 "center_y": 0.42,
 "inner_border_px": 0,
 "border_color": "#FFFFFF",
 "border_opacity": 1.0
}</code></pre><hr /><h2 id="interactive-crop">Interactive Crop</h2>Define a crop visually in a dedicated application and keep the node itself compact.<h3 id="features">Features</h3><ul><li>Automatic preview of the connected image</li><li>Direct crop movement by dragging inside the crop region</li><li>Four corner resize handles</li><li>Create a new crop by dragging outside the current region</li><li>Manual dynamic sliders for:<ul><li>X position</li><li>Y position</li><li>Width</li><li>Height</li></ul></li><li>Center Crop button</li><li>Nine-position alignment controls</li><li>Proportional aspect-ratio presets</li><li>Pixel-resolution presets removed from the ratio list</li><li>Scale Multiplier support</li><li>Full Image and Reset actions</li></ul><h3 id="typical-workflow">Typical workflow</h3><pre><code>Load Image
 │
 ▼
Interactive Crop
 ├── cropped_image ───────────────► next processing node
 ├── output_width ───┐
 ├── output_height ──┤
 ├── output_x ───────┤
 └── output_y ───────┴──► Paste Cropped Image
</code></pre><hr /><h2 id="paste-cropped-image">Paste Cropped Image</h2>Places the result from Interactive Crop onto a new canvas.<h3 id="features">Features</h3><ul><li>Transparent or solid-color background</li><li>Custom canvas dimensions</li><li>X and Y placement</li><li>RGB image output</li><li>Alpha mask output</li><li>RGBA image output</li><li>Compatible with the scaled coordinates generated by Interactive Crop</li></ul><hr /><h2 id="layer-manager">🧩 Layer Manager</h2>A multi-layer compositor with an external editing interface.<h3 id="inputs">Inputs</h3>The node starts with:<pre><code>L1_image
L1_mask
</code></pre>Additional image/mask pairs are added dynamically up to 20 layers:<pre><code>L2_image / L2_mask
L3_image / L3_mask
...
L20_image / L20_mask
</code></pre><h3 id="layer-controls">Layer controls</h3><ul><li>Direct movement on the canvas</li><li>Four-corner scaling</li><li>Rotation handle</li><li>Position X and Y</li><li>Uniform scaling</li><li>Independent X/Y scaling</li><li>Rotation</li><li>Opacity</li><li>Visibility</li><li>Anchor point</li><li>Blend mode</li><li>Layer ordering</li><li>Lock</li><li>Mute</li><li>Solo</li><li>Reset Layer</li><li>Fit to canvas</li><li>Nine-position alignment</li></ul><h3 id="reset-layer">Reset Layer</h3>The Reset Layer action restores:<ul><li>Centered position</li><li>100% scale</li><li>0° rotation</li><li>100% opacity</li><li>Normal blend mode</li><li>Center anchor</li></ul><h3 id="canvas-tools">Canvas tools</h3><ul><li>Zoom In</li><li>Zoom Out</li><li>Mouse-wheel zoom</li><li>100% zoom reset</li><li>Hand tool</li><li>Hold <code>Space</code> for temporary panning</li><li>Undo and Redo</li><li>36 history levels</li></ul><h3 id="selection-behavior">Selection behavior</h3>Locked layers remain visible but are ignored during canvas hit-testing. Clicking through a locked layer selects the first editable layer underneath it.<h3 id="shortcuts">Shortcuts</h3>ShortcutAction<code>Ctrl + Z</code>Undo<code>Ctrl + Shift + Z</code>Redo<code>Ctrl + Y</code>RedoHold <code>Space</code>Temporary Hand toolMouse wheelZoom in or out<h3 id="outputs">Outputs</h3><ul><li><code>image_bg</code> — flattened RGB result</li><li><code>image_rgba</code> — composited RGBA result</li><li><code>alpha</code> — final alpha mask</li></ul><hr /><h1 id="requirements">Requirements</h1>The extension uses packages normally already available in a standard ComfyUI installation:<ul><li>Python</li><li>PyTorch</li><li>NumPy</li><li>Pillow</li><li>A modern Chromium-based browser is recommended</li></ul>No separate frontend build step is required.<hr /><h1 id="using-the-external-apps">Using the external apps</h1><ol><li>Add one of the supported nodes.</li><li>Connect the required image or mask input.</li><li>Click Open App.</li><li>Edit the result in the external window.</li><li>Use Apply or Apply &amp; Close.</li><li>Run the ComfyUI workflow to generate the final backend result.</li></ol>The settings are serialized with the workflow, even though the technical widgets are hidden from the node interface.If the app window does not open, allow pop-ups for the local ComfyUI address.<hr /><h1 id="notes">Notes</h1><ul><li>The external applications provide an interactive preview; the Python backend remains the reference for the final output.</li><li>A workflow run may be required before an exact masked-layer preview becomes available in Layer Manager.</li><li>The connected upstream node must expose a preview image for automatic display in the external app.</li><li>Very large canvases, large blur values and many high-resolution layers can increase processing time and memory usage.</li><li>Layer Manager supports up to 20 image/mask layer pairs.</li></ul><hr /><h1 id="project-structure">Project structure</h1><pre><code>Orion4D_layer_manager/
├── __init__.py
├── drop_shadow_node.py
├── gradient_fill_node.py
├── interactive_crop_node.py
├── layer_manager_node.py
│
├── presets_gradients/
│ ├── Black to White Linear.json
│ └── Warm Radial.json
│
├── presets_shadows/
│ ├── Hard Shadow.json
│ └── Soft Shadow.json
│
└── web/
 ├── drop_shadow.js
 ├── drop_shadow_app.html
 ├── drop_shadow_app.js
 ├── drop_shadow_app.css
 │
 ├── gradient_fill.js
 ├── gradient_fill_app.html
 ├── gradient_fill_app.js
 ├── gradient_fill_app.css
 │
 ├── interactive_crop.js
 ├── interactive_crop_app.html
 ├── interactive_crop_app.js
 ├── interactive_crop_app.css
 │
 ├── layer_manager.js
 ├── layer_manager_app.html
 ├── layer_manager_app.js
 └── layer_manager_app.css
</code></pre>

Files with SHA256: 24864b20c5ad1ba959ee050776cab0fa0dbfe0b2f7929481677787cc1f6d9d24