Extensions/ComfyUI-AlignLayout
ComfyUI Extension

ComfyUI-AlignLayout

Productivity enhancement extension for ComfyUI featuring radial menus and mouse flick gestures for efficient node alignment, distribution, and resizing. (Description by CC)

By pixixai·Created 10 months ago·Updated 11 days ago· 105
pixixai/ComfyUI-AlignLayout
Nodes—
On cloudLocal install
Stars105
Updated11 days ago
Readme

ComfyUI AlignLayout

节点对齐、节点拉伸、自动布局、添加节点菜单、收藏节点菜单、快速连接、连接助手、划线断开、选择相同节点、替换节点

Nodes 2.0 兼容

插件通过 web/entry.js 统一启动,根据 ComfyUI 的 Comfy.VueNodes.Enabled 设置选择实现:默认模式使用 web/default/,Nodes 2.0 使用 web/nodes2/。两个目录各包含完整的 10 个功能文件及一个 index.js,各自独立实现对应模式的功能。页面内切换该设置时会自动切换,并清理上一模式的快捷键、面板、菜单和临时交互状态。

Nodes 2.0 按实际显示尺寸进行对齐、拉伸和自动布局,支持通过组选择整理嵌套节点组,替换节点使用 DOM 高亮。拉伸尊重节点内容的最小尺寸,跳过折叠节点。两种模式共用 web/settings/ 中的设置、web/runtime.js 中的切换清理机制及原有菜单数据。

更新插件后首次使用请刷新 ComfyUI 页面。已在前端版本 1.53.10 上完成两种模式的回归检查。

👁️ 功能速览

📍 节点对齐 (Align Panel)

  • 功能:快速将选中的多个节点对齐到同一基准线,支持指定间距分布与自动布局。

    alt text

  • 快捷键:Alt + A(可自定义)

  • 亮点:

    • 双模操作:点击触发或鼠标甩动触发
    • 环形菜单布局:上/下/左/右对齐、水平/垂直居中,左下/右下为垂直/水平指定间距分布
    • 圆心自动布局:保留方向箭头,点击中心按钮执行自动布局
    • 智能交互:面板跟随鼠标、动态指示器、自动退出
  • 详细说明文档: 📍 节点对齐 (Align Panel)


📏 节点拉伸 (Stretch Panel)

  • 功能:统一节点尺寸,支持单侧拉伸、最大尺寸匹配和尺寸重置。

    alt text

  • 快捷键:Alt + S(可自定义)

  • 亮点:

    • 环形菜单布局:上/下/左/右单侧拉伸、水平/垂直最大匹配、最小/默认尺寸重置
    • 双模操作:点击触发或鼠标甩动触发
    • 互斥模式:与对齐面板自动互斥显示
    • 智能交互:面板跟随鼠标、动态指示器
  • 详细说明文档: 📏 节点拉伸 (Stretch Panel)


⚡ 自动布局 (Auto Layout)

  • 功能:一键智能整理节点布局,支持局部或全局整理。

    alt text

  • 快捷键:Alt + L(默认,可自定义)

  • 亮点:

    • 支持逆向(推荐)和正向布局方向
    • 智能流式布局:自动识别独立节点组,端口感知排序
    • 防碰撞机制,防止节点重叠
    • 支持撤销操作
  • 详细说明文档: ⚡ 自动布局 (Auto Layout)


➕ 添加节点菜单 (Add Node Menu)

  • 功能:提供跟随鼠标的级联菜单,高效查找和添加节点。

    alt text

  • 快捷键:A

  • 亮点:

    • 智能定位:首次居中,再次记忆上次分类
    • 拖拽置顶与节点收藏功能
    • 现代化深色磨砂玻璃风格UI
    • 配置本地存储,支持迁移备份
  • 详细说明文档: ➕ 添加节点菜单 (Add Node Menu)


🚀 收藏节点菜单 (Quick Node Menu)

  • 功能:快速访问在添加节点菜单中收藏的节点。

    alt text

  • 快捷键:Q

  • 亮点:

    • 与添加节点菜单数据联动
    • 独立置顶逻辑,可自定义排序
    • 紫色系高亮风格,与主菜单区分
    • 互斥显示:与添加节点菜单互斥
  • 详细说明文档: 🚀 收藏节点菜单 (Quick Node Menu)


🔗 快速连接 (Fast Link)

  • 功能:通过智能算法实现极速的多对一、一对多、链式连接等操作。

    alt text

  • 快捷键列表:

    • F:多对一(汇聚)
    • Shift + F:一对多(广播)
    • Ctrl + F:强制多对一
    • Ctrl + Shift + F:强制一对多
    • Alt + F:链式连接
    • Ctrl + Shift + Alt + F:清除内部连线
    • Shift + Alt + F:清除外部连线,保留选中节点之间的连线
  • 亮点:

    • 支持轮询切换端口或节点
    • 智能保护连线,非强制模式不断开已有连接
    • 视觉列排序与严格左上排序算法
    • 高度可配置:阈值、超时、匹配优先级等
  • 详细说明文档: 🔗 快速连接 (Fast Link)


🔌 连接助手 (Connection Assistant)

  • 功能:通过主画布临时放大和节点菜单,帮助在缩小视图或远距离节点之间选择端口、完成连接。

    连接助手操作流程

  • 操作方式:

    • 左键从输入或输出端口拖线,保持左键按住,按一下 Ctrl 锁定连线;从 Ctrl 悬停放大的节点拉线时自动锁定
    • 接线前按住 Ctrl 悬停起始节点,默认等待 200ms 后放大;待连接时按住 Ctrl 悬停任意节点,立即开始定位放大
    • 锁定后松开左键不会弹菜单,单击空白处打开兼容节点菜单;悬停菜单项后将真实目标定位到菜单右侧,再选择端口连接
    • Esc 或右键取消,连接完成后可用 Ctrl + Z 撤销
  • 亮点:

    • 连线持续跟随鼠标,松开 Ctrl 或在节点主体上松开左键后仍保持待连接
    • 使用真实节点及原有控件显示,支持查看附近任意节点、按名称或编号筛选兼容节点
    • 锁定后悬停目标,无需 Ctrl 就能高亮所有类型兼容的端口和参数输入;具体目标增强高亮,参数控件可直接点击连接
    • 支持中键、空格+左键抓手及滚轮缩放,寻找目标时可自由移动视图
    • 松开 Ctrl 或移出直接悬停的目标后返回本轮放大前的视图;完成或右键、Esc 取消后平滑返回操作开始前的视图,默认 180ms,时长可设置
    • 使用原生端口兼容规则,支持替换已有输入连接;节点拒绝新连接时保留原连线
    • 在兼容端口上松开或点击确认连接;未锁定时保留 ComfyUI 原有拖线、搜索及 Shift 推荐操作
    • 可配置两个悬停入口、缩放比例、动画时长、高亮颜色、发光强度、等待时间及菜单宽度、字体
    • 默认模式与 Nodes 2.0 均支持,子图内只连接当前子图节点
  • 详细说明文档: 🔌 连接助手 (Connection Assistant)


✂️ 划线断开 (Link Cut)

  • 功能:无需选中节点,通过鼠标划动切断一条或多条连线,支持接近高亮和鼠标轨迹提示。

    划线断开操作演示

  • 操作方式:

    • 按住 Ctrl 接近连线时渐亮高亮,仅悬停不会断线
    • Ctrl + 鼠标右键 从画布空白处拖动,划过连线即断开
    • 松开右键或 Ctrl 停止断线,轨迹立即消失;Ctrl + Z 撤销整次划动
  • 亮点:

    • 鼠标轨迹默认白色、粗细 2px,可独立开关并调整颜色、粗细
    • 高亮颜色与发光强度可配置,越接近连线越亮,远离或松开 Ctrl 后恢复原样
    • 可分别设置切断判定距离和高亮起始距离,默认 4px、12px,不随画布缩放变化
    • 快速划动检查完整路径,未命中的分支保留;重叠连线或转接点共用路径会断开所有命中的连接
    • 支持曲线、直线、折线、子图和整次撤销,功能开关独立于快速连接
    • 默认模式与 Nodes 2.0 同步支持,切换模式或结束操作时清除临时轨迹
  • 详细说明文档: ✂️ 划线断开 (Link Cut)


🔍 选择相同节点 (Select Same Nodes)

  • 功能:一键选中画布上所有与当前选中节点类型一致的节点。

    alt text

  • 快捷键:Shift + A(可自定义)

  • 亮点:

    • 支持多类型同时选择
    • 配合排版工具可快速整理同类节点
    • 简单高效,适用于大型工作流整理
  • 详细说明文档: 🔍 选择相同节点 (Select Same Nodes)


🔄 替换节点 (Replace Node)

  • 功能:以热替换方式将旧节点替换为新节点,自动迁移连线和参数。

    alt text

  • 快捷键:Shift + R(可自定义)

  • 亮点:

    • 智能端口匹配策略:名称优先、类型唯一、强制顺序
    • 自动呼出搜索面板(可配置)
    • 支持批量替换相同类型节点
    • 高亮反馈与可自定义视觉样式
    • 支持撤销操作
  • 详细说明文档: 🔄 替换节点 (Replace Node)

详细说明文档导航

📍 节点对齐 (Align Panel)

📏 节点拉伸 (Stretch Panel)

⚡ 自动布局 (Auto Layout)

➕ 添加节点菜单 (Add Node Menu)

🚀 收藏节点菜单 (Quick Node Menu)

🔗 快速连接 (Fast Link)

✂️ 划线断开 (Link Cut)

🔌 连接助手 (Connection Assistant)

🔄 替换节点 (Replace Node)

🔍 选择相同节点 (Select Same Nodes)

📝 更新日志

安装方法

方法一:通过 ComfyUI Manager 安装

  • 管理器内搜索:AlignLayout

方法二:手动安装

  1. 进入 ComfyUI 自定义节点目录

    cd ComfyUI/custom_nodes/
    
  2. 克隆本仓库(确保先安装git)

    git clone https://github.com/pixixai/ComfyUI-AlignLayout.git
    

    或下载 ZIP 并解压到 custom_nodes 文件夹

  3. 重启 ComfyUI

🏆 参考项目

  • 功能参考:https://github.com/Moooonet/ComfyUI-Align

🤙 联系方式

如有问题请提交 Issue。