mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-21 20:52:12 -03:00
c8e7e2c5617235f148e25fd2d880db4248005ee2
Implemented undo and redo history stacks in Canvas.js, including keyboard shortcuts (Ctrl+Z, Ctrl+Y/Shift+Z), and state saving on relevant actions. Added Undo and Redo buttons to the UI in Canvas_view.js, with dynamic enable/disable based on history state.
LayerForge – Advanced Canvas Editor for ComfyUI 🎨
LayerForge is an advanced canvas node for ComfyUI, providing a Photoshop-like layer-based editing experience directly within your workflow. It extends the concept of a simple canvas with multi-layer support, masking, blend modes, precise transformations, and seamless integration with other nodes.
Why LayerForge?
- Full Creative Control: Move beyond simple image inputs. Composite, mask, and blend multiple elements without leaving ComfyUI.
- Seamless Integration: Outputs a final image and a corresponding mask, ready to be piped into any other node (e.g.,
VAEEncode,Apply Mask). - Intuitive UI: Familiar controls like drag-and-drop, keyboard shortcuts, and a pannable/zoomable viewport make editing fast and easy.
✨ Key Features
- Multi-Layer Editing: Add, arrange, and manage multiple image layers.
- Full Transformation Controls: Move, scale, and rotate layers with mouse or keyboard shortcuts.
- Blend Modes & Opacity: Apply 12 common blend modes (
Overlay,Multiply, etc.) and adjust opacity on a per-layer basis. - Drag & Drop: Drop image files directly onto the canvas to create new layers.
- Precise Alignment: Snap layers to a grid (
Ctrlkey) for perfect positioning. - Dynamic Canvas: Resize the entire canvas with a live preview of the new dimensions.
- Workflow Integration:
- Import the last generated image directly into a layer.
- Outputs a final composite image and a combined alpha mask.
🚀 Installation
- Navigate to your ComfyUI
custom_nodesdirectory.cd ComfyUI/custom_nodes/ - Clone this repository:
git clone https://github.com/YOUR_USERNAME/LayerForge.git - Restart ComfyUI.
🖱️ Controls
Layer Controls (When one or more layers are selected)
| Action | Description |
|---|---|
| Mouse Drag | Move selected layer(s). |
Ctrl + Mouse Drag |
Move selected layer(s) with grid snapping. |
Ctrl + Click |
Add or remove a layer from the current selection. |
| Mouse Wheel | Scale selected layer(s) up or down. |
Shift + Mouse Wheel |
Rotate selected layer(s). |
Shift + Click |
Open the Blend Mode & Opacity menu for the clicked layer. |
Delete Key |
Remove all selected layers. |
| Arrow Keys | Nudge selected layer(s) by 1 pixel. |
Shift + Arrow Keys |
Nudge selected layer(s) by 10 pixels. |
[ / ] Keys |
Rotate selected layer(s) by 1 degree. |
Shift + [ / ] Keys |
Rotate selected layer(s) by 10 degrees. |
Canvas & Global Controls
| Action | Description |
|---|---|
| Drag Background | Pan the canvas viewport. |
| Mouse Wheel | Zoom the viewport in or out (centered on the cursor). |
| Drag & Drop Image File | Add a new image layer from a file on your disk. |
Shift + Drag Empty Space |
Define a new canvas size with a live preview. |
| Double-Click Empty Space | Deselect all layers. |
🛠️ Basic Workflow
- Add the LayerForge node to your graph.
- Use the "Add Image" button or Drag & Drop a file to create a layer.
- Use the "Import Input" button to load the last generated image from your workflow.
- Arrange, resize, and blend your layers as needed.
- Connect the outputs to other nodes:
image->VAE Encode(for further processing)mask->Apply MaskorSet Latent Noise Mask
┌────────────────┐
│ Load Image │
└───────┬────────┘
│
┌───────▼────────┐ ┌──────────────┐
│ LayerForge ├──────► VAE Encode │
│(output: image) │ └──────────────┘
└───────┬────────┘
│
┌───────▼────────┐ ┌──────────────┐
│(output: mask) ├──────► Apply Mask │
└────────────────┘ └──────────────┘
🧠 Optional: Matting Model (for image cutout)
The "Matting" feature allows you to automatically generate a cutout (alpha mask) for a selected layer. This is an optional feature and requires a model.
- Model Name:
BiRefNet- Download from:
- Hugging Face (Recommended)
- Google Drive
- Installation Path: Place the model file in
ComfyUI/models/BiRefNet/.
📜 License
This project is licensed under the MIT License. Feel free to use, modify, and distribute.
Based on the original Comfyui-Ycanvas by yichengup. This fork significantly enhances the editing capabilities for practical compositing workflows inside ComfyUI.
Description
ComfyUI's Photoshop-like layered canvas editor to your ComfyUI workflow. This node is perfect for complex compositing, inpainting, and outpainting, featuring multi-layer support, masking, blend modes, and precise transformations. Includes optional AI-powered background removal for streamlined image editing.
Readme
MIT
21 MiB
Languages
TypeScript
47%
JavaScript
44.1%
Python
3.6%
CSS
3.4%
HTML
1.9%