https://github.com/orion4d/Orion4D_layer_manager

A custom layer editor for ComfyUI with three utilities (drop shadow editor, crop editor, and gradient editor)

Included nodes

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 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:

• Orion4D_maskpro

• Orion4D_TextMakerPro

• Orion4D_generative_paint

• Orion4D_FXMax

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 Space for 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

ShortcutActionCtrl + ZUndoCtrl + Shift + ZRedoCtrl + YRedoHold SpaceTemporary Hand toolMouse wheelZoom in or out

Outputs

• image_bg — flattened RGB result

• image_rgba — composited RGBA result

• alpha — 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

1. Add one of the supported nodes.

2. Connect the required image or mask input.

3. Click Open App.

4. Edit the result in the external window.

5. Use Apply or Apply & Close.

6. 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