Orion4D_layer_manager
A custom layer editor for ComfyUI with three utilities (drop shadow editor, crop editor, and gradient editor).
Orion4D Layer Manager
A custom layer editor for ComfyUI with three utilities (drop shadow editor, crop editor, and gradient editor).
<img width="1490" height="1126" alt="image" src="https://github.com/user-attachments/assets/c1d5a283-4835-43ee-9885-65907cbee6f3" /> <img width="1655" height="1124" alt="image" src="https://github.com/user-attachments/assets/4ac25ad7-cc29-422e-bee7-3d9b84d63096" /> <img width="1684" height="969" alt="image" src="https://github.com/user-attachments/assets/696d30d8-c28d-4513-a013-f0c85744681c" />Included nodes
| Node | Purpose | Main outputs | |---|---|---| | 🌑 Drop Shadow | Creates configurable inner or outer shadows around an image or mask | Image, mask, RGBA image, shadow RGBA, shadow mask | | 🎨 Fill / Gradient Generator v2 | Generates solid fills and multi-color gradients | Image, full mask, border mask, settings JSON | | Interactive Crop | Defines and applies an interactive crop region | Cropped image, output dimensions, crop coordinates | | Paste Cropped Image | Places a cropped image back onto a new canvas | Image, mask, RGBA image | | 🧩 Layer Manager | Composites and transforms multiple image/mask layers | Flattened image, RGBA image, alpha mask |
All nodes are available in the ComfyUI category:
Orion4D_Layer
💡 Tip: Install Orion4D_AutoCachedPreview to retrieve images from an ongoing workflow without restarting the entire generation process.
Very useful for your creations:
Main concept
The suite uses a lightweight node + external application workflow:
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
This approach avoids oversized nodes, crowded widgets and heavy DOM previews inside the ComfyUI graph.
Nodes
🌑 Drop Shadow
Create an inner or outer shadow from an image alpha channel or an optional mask.
Features
- External real-time preview application
- Automatic preview of the connected image
- Outer and inner shadow modes
- Canvas width and height
- Object scaling
- Shadow spread
- Gaussian blur
- Horizontal and vertical offset
- Shadow opacity and color
- Transparent or solid-color background
- Separate shadow RGBA and shadow mask outputs
- JSON preset management
Presets
Drop Shadow presets are stored in:
presets_shadows/
Example:
{
"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"
}
🎨 Fill / Gradient Generator
Generate solid colors and configurable gradients without requiring an input image.
Fill modes
- Solid
- Linear
- Radial
- Angular
- Reflected
- Diamond
Features
- One to four colors
- Gradient inversion
- Adjustable angle
- Interactive center position
- Width and height controls
- Inner border size
- Border color and opacity
- Full mask and border mask outputs
- JSON settings output
- JSON preset management
Presets
Gradient presets are stored in:
presets_gradients/
Example:
{
"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
}
Interactive Crop
Define a crop visually in a dedicated application and keep the node itself compact.
Features
- Automatic preview of the connected image
- Direct crop movement by dragging inside the crop region
- Four corner resize handles
- Create a new crop by dragging outside the current region
- Manual dynamic sliders for:
- X position
- Y position
- Width
- Height
- Center Crop button
- Nine-position alignment controls
- Proportional aspect-ratio presets
- Pixel-resolution presets removed from the ratio list
- Scale Multiplier support
- Full Image and Reset actions
Typical workflow
Load Image
│
▼
Interactive Crop
├── cropped_image ───────────────► next processing node
├── output_width ───┐
├── output_height ──┤
├── output_x ───────┤
└── output_y ───────┴──► Paste Cropped Image
Paste Cropped Image
Places the result from Interactive Crop onto a new canvas.
Features
- Transparent or solid-color background
- Custom canvas dimensions
- X and Y placement
- RGB image output
- Alpha mask output
- RGBA image output
- Compatible with the scaled coordinates generated by Interactive Crop
🧩 Layer Manager
A multi-layer compositor with an external editing interface.
Inputs
The node starts with:
L1_image
L1_mask
Additional image/mask pairs are added dynamically up to 20 layers:
L2_image / L2_mask
L3_image / L3_mask
...
L20_image / L20_mask
Layer controls
- Direct movement on the canvas
- Four-corner scaling
- Rotation handle
- Position X and Y
- Uniform scaling
- Independent X/Y scaling
- Rotation
- Opacity
- Visibility
- Anchor point
- Blend mode
- Layer ordering
- Lock
- Mute
- Solo
- Reset Layer
- Fit to canvas
- Nine-position alignment
Reset Layer
The Reset Layer action restores:
- Centered position
- 100% scale
- 0° rotation
- 100% opacity
- Normal blend mode
- Center anchor
Canvas tools
- Zoom In
- Zoom Out
- Mouse-wheel zoom
- 100% zoom reset
- Hand tool
- Hold
Spacefor temporary panning - Undo and Redo
- 36 history levels
Selection behavior
Locked layers remain visible but are ignored during canvas hit-testing. Clicking through a locked layer selects the first editable layer underneath it.
Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl + Z | Undo |
| Ctrl + Shift + Z | Redo |
| Ctrl + Y | Redo |
| Hold Space | Temporary Hand tool |
| Mouse wheel | Zoom in or out |
Outputs
image_bg— flattened RGB resultimage_rgba— composited RGBA resultalpha— final alpha mask
Requirements
The extension uses packages normally already available in a standard ComfyUI installation:
- Python
- PyTorch
- NumPy
- Pillow
- A modern Chromium-based browser is recommended
No separate frontend build step is required.
Using the external apps
- Add one of the supported nodes.
- Connect the required image or mask input.
- Click Open App.
- Edit the result in the external window.
- Use Apply or Apply & Close.
- Run the ComfyUI workflow to generate the final backend result.
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.
Notes
- The external applications provide an interactive preview; the Python backend remains the reference for the final output.
- A workflow run may be required before an exact masked-layer preview becomes available in Layer Manager.
- The connected upstream node must expose a preview image for automatic display in the external app.
- Very large canvases, large blur values and many high-resolution layers can increase processing time and memory usage.
- Layer Manager supports up to 20 image/mask layer pairs.
Project structure
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