🔥NodeAlignPro版本大更新已发布(全新UI, 更全的节点上色系统)

This commit is contained in:
ArtsticH
2025-12-22 07:28:09 +08:00
committed by GitHub
parent d90bd027b4
commit dd2a09f582
7 changed files with 2427 additions and 1352 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

+16 -10
View File
@@ -3,12 +3,15 @@
[![GitHub stars](https://img.shields.io/github/stars/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro?style=for-the-badge)](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/stargazers) [![License](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](LICENSE) [![切换中文](https://img.shields.io/badge/切换中文-README_ZH.md-blue?style=for-the-badge)](README_ZH.md) [![English](https://img.shields.io/badge/English-README.md-blue?style=for-the-badge)](README_ZH.md)
The newly designed ComfyUI node alignment and coloring plugin has completely redesigned and developed new UI icons and layouts. The layout of the alignment tool is more in line with the common operation logic and experience in the design industry. The position of the coloring tool is more reasonable, facilitating quick coloring.
## 🔥<font color=#22ee00> [+] </font>Update Preview (A Major Update for the Upcoming Version 😁)↓↓↓↓
<font color=#22ee00> [+] </font>The basic code and concept were basically completed in June-July of this year. Due to my recent busyness, the update has been on hold for a long time. Please be patient and wait; we will strive to launch the major update version before the National Day (see the picture below 👇). Thank you for your support and understanding!
![Update Preview](【更新预告】HT20250627-Snipaste_t011207_ArtsticH_NodeAlignPro_v2.png)
Completely reconstructed ComfyUI Node Alignment and Coloring Plugin, featuring brand-new UI icons and interface interaction logic. The layout of the alignment tool is more in line with the universal operational logic and experience in the design industry, and the position of the coloring tool is more reasonable, facilitating quick coloring operations.
## ✨ Core Features (Coming Soon)
## 🔥<font color=#22ee00> [+] </font>The major version update is here😁↓↓↓↓
The basic code and concept were basically completed as early as June-July this year, but due to my busy schedule recently, I have put it aside for a long time and have not updated it;
<font color=#22ee00> [+] </font>I took time out to update it these two days. On the premise of retaining the UI and interaction habits of the previous version as much as possible, I redesigned the relevant UI, and basically reconstructed all the relevant logic (see the figure below👇).
![Update Preview](Example/hPic/H20251222-全新节点对齐与上色UI实操演示.png)
## ✨ Core Features (Officially Launched)
| 💫Intelligent Alignment System | <font color=#22ee00> [+]</font>💫New Coloring System | <font color=#22ee00> [+]</font>💫User-Friendly Interaction Design | <font color=#22ee00> [+]</font>💫New Color Picker (Original Design) |
|---------------------------|---------------------------|---------------------------|---------------------------|
@@ -16,14 +19,17 @@ The newly designed ComfyUI node alignment and coloring plugin has completely red
| 📐 Dynamic Spacing Distribution Algorithm | <font color=#22ee00> [+]</font>🔗 Real-Time Linked Display of Color Picking Effect | <font color=#22ee00> [+]</font>🧩 New Custom Configuration | <font color=#22ee00> [+]</font>🎨 Color Card Modes: Color/Gray Scale/Custom |
| 👥 Collaborative Operation of Multiple Node Groups | <font color=#22ee00> [+]</font>💾 Custom Color Card Collection and Restoration System | <font color=#22ee00> [+]</font>💾 Layout Memory and Restoration System | <font color=#22ee00> [+]</font>👏 Color Cards: Random/Collect/Remove/Manual Addition |
⚠️Note: `HT20250430 - New UI Scaling Adaptation` (There is a minor bug causing `incomplete display due to excessive global scaling`, but it `does not affect basic usage` and will be fixed later. Therefore, you can currently **use the basic UI scaling with confidence**, i.e., **directly click the "UI Scaling" button**).
⚠️<font color=#22ee00> [+] </font>Note: The three major modules - `💫New Coloring System`, `💫User-Friendly Interaction Design`, and `💫New Color Picker (Original Design)` - have all undergone restructuring to varying degrees, and the basic operation logic of the `v1.0.4_rc version` has been retained as much as possible. Everyone just needs to **wait patiently for the upcoming update**.
## 🖼️ Effect Demonstration
## ✅ New Version Effect Demo🖼️
![Operation_Demonstration](HT20250501-ArtsticH_NodeAlignPro_demo.webp)
![Operation_Demonstration](Example/hPic/H20251222-NodeAlignPro全新节点对齐与上色插件.png)
⚠️ Note: Regarding multiple alignment modes, you can `try Alt key + Alignment Button` to experience the `new alignment methods` in the new `easter egg feature`.
## ✅ Function Update Records
(Note: The alignment-related functions of the `new Node2.0 Beta version` are not yet stable, and there are cumulative offset issues due to various conversion errors. Reproduction: You can repeatedly enable/disable the native Node2.0 Beta switch in ComfyUI, and you will find that nodes accumulate errors, and their sizes and coordinates will continue to shift. Therefore, adaptation is temporarily not provided (although Node2.0 adaptation has been completed, the `logic for adapting to Node2.0 is temporarily removed` and `will be updated back when it is more stable`))
⚠️<font color=#22ee00> [+] </font> Note: The three major modules - `💫Brand New Coloring System`, `💫User-Friendly Interaction Design`, and `💫New Color Picker (Original Design)` - have all been refactored to varying degrees, while retaining the basic operation logic of the `v1.0.4_rc version` as much as possible. Due to being busy in daily life and developing as a hobbyist (not a professional programmer), `there may inevitably be many bugs in this hasty update`. Please help test it, and feel free to submit Issue feedback. Thank you for your support and understanding!
## ❌ Old Version Interface Comparison
![UI_Linkage-button](Example/hPic/HT20250501-联动【运行按钮】_右键菜单适配_ArtsticH_NodeAlignPro.webp)
![UI_Linkage-button-ContextMenu](Example/hPic/HT20250501-联动【运行按钮】_ArtsticH_NodeAlignPro.webp)
+17 -12
View File
@@ -2,30 +2,35 @@
[![GitHub stars](https://img.shields.io/github/stars/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro?style=for-the-badge)](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/stargazers) [![License](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](LICENSE) [![切换中文](https://img.shields.io/badge/切换中文-README_ZH.md-blue?style=for-the-badge)](README_ZH.md) [![English](https://img.shields.io/badge/English-README.md-blue?style=for-the-badge)](README.md)
全新设计的ComfyUI节点对齐与上色插件,完整重新设计开发了新的UI图标和布局。对齐工具的布局更符合设计行业通用的操作逻辑和体验,上色工具位置更合理,方便快速上色。
全新重构的ComfyUI节点对齐与上色插件,全新的UI图标和界面交互逻辑。对齐工具的布局更符合设计行业通用的操作逻辑和体验,上色工具位置更合理,方便快速上色。
## 🔥<font color=#22ee00> [+] </font>更新预告 (近期版本将会大更新😁)↓↓↓↓
<font color=#22ee00> [+] </font>基础代码和构思已于今年6-7月份基本完成,由于本人近期较忙,搁置了挺久迟迟没有更新,还请大家耐心等待,争取国庆节前上线大更新版本(详见下图👇)。感谢各位支持和理解!
![更新预告](【更新预告】HT20250627-Snipaste_t011207_ArtsticH_NodeAlignPro_v2.png)
## 🔥<font color=#22ee00> [+] </font>版本大更新已经来了😁↓↓↓↓
基础代码和构思早已于今年6-7月份基本完成,由于本人近期较忙,搁置了挺久迟迟没有更新;
<font color=#22ee00> [+] </font>这两天抽空更新了下,在尽可能保留上一版UI及交互习惯的前提下,重新设计了相关UI,基本上可以说是全部重构了相关逻辑(详见下图👇)。
![更新预告](Example/hPic/H20251222-全新节点对齐与上色UI实操演示.png)
## ✨ 核心功能 (即将上线)
## ✨ 核心功能 (已正式上线)
| 💫智能对齐系统 | <font color=#22ee00> [+]</font>💫全新上色系统 | <font color=#22ee00> [+]</font>💫人性化交互设计 | <font color=#22ee00> [+]</font>💫全新取色器(原创设计) |
|---------------------------|---------------------------|---------------------------|---------------------------|
| ✅ 8种基础对齐模式 | <font color=#22ee00> [+]</font>🖼️ 一键式颜色管理方案 | 🖱️ 悬浮式工具面板 | <font color=#22ee00> [+]</font>✅ 原生JS/CSS实现全新取色系统 |
| ✅ 多种对齐模式 | <font color=#22ee00> [+]</font>🖼️ 一键式颜色管理方案 | 🖱️ 悬浮式工具面板 | <font color=#22ee00> [+]</font>✅ 原生JS/CSS实现全新取色系统 |
| 📐 动态间距分布算法 | <font color=#22ee00> [+]</font>🔗 实时联动显示取色效果 | <font color=#22ee00> [+]</font>🧩 全新自定义配置 | <font color=#22ee00> [+]</font>🎨 色卡模式: 彩色/灰度/自定义 |
| 👥 多节点组协同操作 | <font color=#22ee00> [+]</font>💾 自定义色卡收藏与恢复系统 | <font color=#22ee00> [+]</font>💾 布局记忆与恢复系统 | <font color=#22ee00> [+]</font>👏 色卡:随机/收藏/移除/以及手动添加 |
⚠️注:`HT20250430-新增UI缩放适配` (有轻微bug导致`全局缩放过大导致显示不全`,但`不影响基础使用`,后续会修复。
因此目前你可以**放心的使用基础UI缩放**,即**直接点击“UI缩放”按钮**)。
⚠️<font color=#22ee00> [+] </font>注:`💫全新上色系统` `💫人性化交互设计` `💫全新取色器(原创设计)` 这三大板块均进行了不同程度的重构,且尽可能保留了`v1.0.4_rc版`的基础操作逻辑,大家`**耐心等待近期更新**`即可。
## 🖼️ 效果演示
## ✅ 新版效果演示🖼️
![操作演示](HT20250501-ArtsticH_NodeAlignPro_demo.webp)
![操作演示](Example/hPic/H20251222-NodeAlignPro全新节点对齐与上色插件.png)
⚠️注:关于多种对齐模式,可`尝试Alt键+对齐按钮 ` 体验下新的`彩蛋功能`里的`全新对齐方式`。
## ✅ 更新功能记录
(注意`新版Node2.0测试版`的对齐相关功能目前还不够稳定,存在各种换算误差的累积偏移问题 (复现:可以来回开启/关闭ComfyUI原生的Node2.0测试版开关,就会发现,节点会累积误差,尺寸、坐标会不断的偏移。因此,暂时不作适配(虽然已经适配好Node2.0了,但还是`暂时移除适配Node2.0的逻辑`,后面`稍微稳定些会更新回来`))
⚠️<font color=#22ee00> [+] </font>注:`💫全新上色系统` `💫人性化交互设计` `💫全新取色器(原创设计)` 这三大板块均进行了不同程度的重构,且尽可能保留了`v1.0.4_rc版`的基础操作逻辑,由于平时较忙且业余开发(非专业程序猿),`仓促更新难免会有不少bug`,还请大家帮忙测试,欢迎提交Issue反馈,感谢各位支持和理解!
## ❌ 旧版界面对照
![UI_联动【运行按钮】](Example/hPic/HT20250501-联动【运行按钮】_右键菜单适配_ArtsticH_NodeAlignPro.webp)
![UI_联动【运行按钮】](Example/hPic/HT20250501-联动【运行按钮】_ArtsticH_NodeAlignPro.webp)
+1 -4
View File
@@ -1,8 +1,5 @@
import os
# 插件节点映射(可以不定义任何节点)
NODE_CLASS_MAPPINGS = {}
# 前端文件路径
current_directory = os.path.dirname(os.path.abspath(__file__))
# 打印输出当前目录
WEB_DIRECTORY = os.path.join(current_directory)
# NODE_JS = ["ArtsticH/hNodeAlignPro.js"]
+2393 -1310
View File
File diff suppressed because it is too large Load Diff
-16
View File
@@ -1,16 +0,0 @@
// ComfyUI_EasyKitHT_NodeAlignPro/web/color_svgs.js
export const ColorSVGs = {
circle: (color) => `
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="14" fill="${color}" stroke="#333" stroke-width="1"/>
</svg>
`,
colorPicker: `
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" d="M16 4l-3 9h6l-3 9 9-3v6l9-3-9-3 3-9-9 3v-6z"
transform="translate(0 2) scale(0.8)"/>
</svg>
`
};