ComfyUI-NodeAlign

ComfyUI-NodeAlign is a lightweight alignment toolbar for ComfyUI graphs. It provides quick alignment, equal size, and distribution actions, with optional keyboard shortcuts, designed for simplicity and ease of use.

Features

• Toolbar Customization: Change the position, size, and visibility of the alignment toolbar.
• Node Alignment: Align selected nodes horizontally or vertically.
• Equalize Node Dimensions: Equalize the width and/or height of selected nodes.
• Distribute Nodes: Distribute nodes horizontally or vertically with custom gaps.
• Toolbar Dragging: Drag and position the toolbar anywhere on the screen.
• Floating/Attached Mode: Toggle between floating and attaching the toolbar to the menu.
• Keyboard Shortcuts: Use the Shift + WASD keys to quickly align nodes (Up, Left, Down, Right).
• Customizable Colors and Opacity: Modify the toolbar’s background color, opacity, and icon colors.

https://github.com/user-attachments/assets/40b117d9-91f7-47c3-8640-014f8fd06fce

Compatibility

• Tested with ComfyUI v3.7.3 front-end.
• If the toolbar fails to show, hard refresh with cache disabled and check console for [NodeAlign.Settings] loaded and [NodeAlign] init.

Installation

To install ComfyUI-NodeAlign, follow these steps:

1. Clone or download the repository.
2. Place the add-on in the ComfyUI extensions directory.
3. Restart ComfyUI.

Example:

git clone https://github.com/1038lab/ComfyUI-NodeAlign.git

Configuration

Available Settings

The add-on allows you to customize the behavior and appearance of the Node Alignment toolbar. Here are the available settings:

• Node Alignment Toolbar Display Mode:

  • Permanent: Always visible.
  • On-Select: Display only when a node is selected.
  • Disabled: Toolbar is hidden.

• Enable Quick Alignment Shortcuts:

  • Shift + W: Align top.
  • Shift + A: Align left.
  • Shift + S: Align bottom.
  • Shift + D: Align right.

• Toolbar Position Mode:

  • Always: Toolbar floats above the OEM bar (default).
  • Attached: Toolbar attaches to the OEM bar.
  • Floating: Toolbar is free-floating.

• Toolbar Button Size: Adjust the size of toolbar buttons (default: 25px).

• Always Reset Toolbar Position on Load: If enabled, the toolbar resets to its default position on each load.

• Toolbar Background Opacity: Adjust the opacity of the toolbar background (range 0-100).

• Toolbar Background Color: Set the background color of the toolbar using hex codes (default: #1b1b1b).

• Icon Background Color: Set the background color of the icons in the toolbar (default: #2a2a2a).

• Icon Color: Adjust the color of the icons in the toolbar (default: #e0e0e0).

• Divider Color: Set the color of dividers between toolbar icons (default: #666666).

Example Configuration

To achieve a minimalistic design for your toolbar:

• Node Alignment Toolbar Display Mode: Permanent
• Enable Quick Alignment Shortcuts: True
• Toolbar Position Mode: Floating
• Toolbar Button Size: 20px
• Toolbar Background Color: #1C1C1C
• Toolbar Background Opacity: 90
• Icon Background Color: #363636
• Icon Color: #FFFFFF
• Divider Color: #00FF55

This setup will provide a floating, compact toolbar with a dark background, light icons, and visible dividers.

Usage

Once installed, you will have a new toolbar for NodeAlign. You can use the toolbar to align and distribute selected nodes.

Node Alignment Actions:

• Align Left: Align all selected nodes to the leftmost position.
• Align Center (Horizontal): Center selected nodes horizontally.
• Align Right: Align all selected nodes to the rightmost position.
• Align Top: Align all selected nodes to the topmost position.
• Align Center (Vertical): Center selected nodes vertically.
• Align Bottom: Align all selected nodes to the bottommost position.

Equalize Node Dimensions:

• Equal Width: Equalize the width of all selected nodes.
• Equal Height: Equalize the height of all selected nodes.

Distribute Nodes:

• Horizontal Distribution: Evenly distribute selected nodes along the X-axis.
• Vertical Distribution: Evenly distribute selected nodes along the Y-axis.

Drag and Position the Toolbar:

• Floating Mode: Drag the toolbar anywhere on the screen.
• Attached Mode: Attach the toolbar to the top or bottom of the menu bar.

Troubleshooting

If the toolbar is not appearing or not behaving as expected:

• Ensure the add-on is installed in the correct extensions directory.
• Make sure your ComfyUI version is compatible with this add-on.
• Try resetting the toolbar position (double-click on the toolbar) to restore the default layout.

Credits & Background

• Based on the original NodeAligner by Tenney95 (https://github.com/Tenney95/ComfyUI-NodeAligner)
• Also inspired by kk8bit/kaytool (https://github.com/kk8bit/kaytool)
• This repo exists because the original versions were not updated for newer ComfyUI (e.g., v3.7.3) and the toolbar stopped working; this repo provides a compatible, maintained implementation.

License

GPL-3.0 License