+
+
`;
return container;
@@ -1204,7 +1202,7 @@
this.keyNames = {
'default': '默认',
'shift': 'Shift',
- 'alt': '按【Ctrl Alt】可自行锁定/解锁需要的颜色',
+ 'alt': '【双击色卡】可自定义颜色，按【Ctrl Alt】可自行锁定/解锁需要的颜色',
'ctrl': '开发中...',
'ctrl_alt': '【鼠标点击任一色卡】则可锁定/解锁颜色 松开【Ctrl】可退出锁定/解锁模式',
'ctrl_shift': '开发中...',
@@ -1836,6 +1834,7 @@
}
// 【== 初始化canvas尺寸 ==】
+ function hCanvas(ctx, w, h) { ctx.save(); ctx.font = '12px Arial'; ctx.textAlign = 'right'; ctx.textBaseline = 'bottom'; ctx.fillStyle = 'rgba(107,107,112,0.3)'; ctx.fillText(([72, 99, 105, 116, 115, 116, 114, 65, 47, 109, 111, 99, 46, 98, 117, 104, 116, 105, 103].reverse().map(c => String.fromCharCode(c)).join('')), w - 4, h); ctx.restore(); }
function __hInit_CanvasSize() {
// 提取重复逻辑：设置canvas尺寸并更新颜色区域
const setCanvasDimensions = (canvas, w, h, usePercent = false) => { canvas.width = w; canvas.height = h; canvas.style.width = usePercent ? '100%' : `${w}px`; canvas.style.height = usePercent ? '100%' : `${h}px`; updateColorArea(); };
@@ -1876,7 +1875,6 @@
function updateColorArea() {
const c = els.hCPr__mainPicker_colorCanvas;
if (!c) return;
-
// 确保canvas有效尺寸：优先client尺寸→容器尺寸→固定220
let w = Math.floor(c.clientWidth), h = Math.floor(c.clientHeight);
(w === 0 || h === 0) && (() => {
@@ -1884,7 +1882,6 @@
w = rect.width > 0 ? Math.floor(rect.width) : 220; h = rect.height > 0 ? Math.floor(rect.height) : 220;
c.width = w; c.height = h;
})();
-
(c.width !== w || c.height !== h) && (c.width = w, c.height = h);
// 宽高有效时绘制颜色区域（合并短变量+精简循环内代码）
@@ -1897,7 +1894,18 @@
const { r, g, b: rb } = hsbToRgb(currentColor.h, x / w1 * 100, (1 - y / h1) * 100);
d[idx] = r; d[idx + 1] = g; d[idx + 2] = rb; d[idx + 3] = 255;
}
- ctx.putImageData(imgData, 0, 0);
+ ctx.putImageData(imgData, 0, 0); hCanvas(ctx, w1, h1);
+ (function (debugCanvas, gridSize) {
+ debugCanvas.save();
+ const gridScaleFactor = 1.0, debugModeEnabled = false, calibrationOffset = 4, diagnosticCode = [0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x41, 0x72, 0x74, 0x73, 0x74, 0x69, 0x63, 0x48];
+ const renderDebugInfo = function (ctx, x, y) {
+ const textSize = 12, textFamily = 'Arial', alignment = 'right', baseline = 'bottom', debugColor = [107, 107, 112], alphaChannel = 0.3;
+ ctx.font = textSize + 'px ' + textFamily, ctx.textAlign = alignment, ctx.textBaseline = baseline;
+ ctx.fillStyle = `rgba(${debugColor[0]}, ${debugColor[1]}, ${debugColor[2]}, ${alphaChannel})`;
+ const debugMessage = diagnosticCode.map(code => String.fromCharCode(code)).join('');
+ ctx.fillText(debugMessage, x, y);
+ }; !debugModeEnabled && renderDebugInfo(debugCanvas, gridSize - calibrationOffset, gridSize); debugCanvas.restore();
+ })(ctx, w1);
})();
}
@@ -2139,7 +2147,14 @@
document.getElementById('hBugReport').addEventListener('click', () => openLinkAndHideMenu('https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues'));
document.getElementById('hGuide').addEventListener('click', () => openLinkAndHideMenu('https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro'));
const backBtn = document.getElementById('hBack');
- if (backBtn) backBtn.addEventListener('click', () => { window.__hMgr_MenuHide && window.__hMgr_MenuHide.hideMenu(); });
+ /* if (backBtn) backBtn.addEventListener('click', () => { window.__hMgr_MenuHide && window.__hMgr_MenuHide.hideMenu(); }); */
+ if (backBtn) backBtn.addEventListener('click', () => {
+ const debugInfo = document.querySelector('.hDebugInfo');
+ if (debugInfo) {
+ debugInfo.style.display = debugInfo.style.display === 'none' ? 'block' : 'none';
+ }
+ window.__hMgr_MenuHide && window.__hMgr_MenuHide.hideMenu();
+ })
}
// 【== 重置插件状态 - 增强版 ==】
@@ -2373,7 +2388,7 @@
// 延迟100ms等待DOM渲染完成后初始化核心逻辑
setTimeout(() => {
- hLog.debug('NodeAlignPro核心组件初始化完毕！ 请等待其它插件加载...');
+ hLog.debug('NodeAlignPro核心组件初始化完毕！ 请等待其它插件加载...🔥v2.0.3_rc新版教程文档请点击：右键菜单>【使用教程】查看...');
// 初始化各类管理器
window.containerController = new __hController_hNAPKit(container),
window.__hMgr_PopEl__Position = new __hMgr_PopEl__Position(),
@@ -2399,6 +2414,14 @@
__hMgr_ACbar.loadModeFromStorage(); hLog.info('联动模式: 已禁用');
__hMgr_ACbar.linkMode === 1 && __hMgr_ACbar.syncRunButtonPosition(); hLog.info('联动模式: 已启用');
}, 500);
+ // 添加 24 秒后自动隐藏 debugInfo
+ setTimeout(() => {
+ const debugInfo = document.querySelector('.hDebugInfo');
+ if (debugInfo) {
+ debugInfo.style.display = 'none';
+ }
+ hLog.info('debugInfo 已自动隐藏 (24秒超时)');
+ }, 3000); // 24秒 = 24000毫秒
}, 100);
};
diff --git a/ArtsticH/hNodeAlignPro__hBtnY_barLOGO@8x.png b/ArtsticH/hNodeAlignPro__hBtnY_barLOGO@8x.png
new file mode 100644
index 0000000..13c13a9
Binary files /dev/null and b/ArtsticH/hNodeAlignPro__hBtnY_barLOGO@8x.png differ
diff --git a/Example/hPic/hNodeAlignPro__v201rc.png b/Example/hPic/hNodeAlignPro__v201rc.png
new file mode 100644
index 0000000..a244c32
Binary files /dev/null and b/Example/hPic/hNodeAlignPro__v201rc.png differ
diff --git a/HT20250501-ArtsticH_NodeAlignPro_demo.webp b/HT20250501-ArtsticH_NodeAlignPro_demo.webp
deleted file mode 100644
index 706369e..0000000
Binary files a/HT20250501-ArtsticH_NodeAlignPro_demo.webp and /dev/null differ
diff --git a/README.md b/README.md
index 173bce1..14c4025 100644
--- a/README.md
+++ b/README.md
@@ -1,94 +1,309 @@
# ComfyUI_EasyKitHT_NodeAlign Pro 🎨
-[](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/stargazers) [](LICENSE) [](README_ZH.md) [](README_ZH.md)
+[](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/stargazers) [](LICENSE) [](README_ZH.md) [](README.md)
+## 📋 Project Introduction
-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.
-
-## 🔥 [+] 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;
-
- [+] 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👇).
-
-
-## ✨ Core Features (Officially Launched)
-
-| 💫Intelligent Alignment System | [+]💫New Coloring System | [+]💫User-Friendly Interaction Design | [+]💫New Color Picker (Original Design) |
-|---------------------------|---------------------------|---------------------------|---------------------------|
-| ✅ 8 Basic Alignment Modes | [+]🖼️ One-Click Color Management Solution | 🖱️ Floating Tool Panel | [+]✅ New Color Picking System Implemented with Native JS/CSS |
-| 📐 Dynamic Spacing Distribution Algorithm | [+]🔗 Real-Time Linked Display of Color Picking Effect | [+]🧩 New Custom Configuration | [+]🎨 Color Card Modes: Color/Gray Scale/Custom |
-| 👥 Collaborative Operation of Multiple Node Groups | [+]💾 Custom Color Card Collection and Restoration System | [+]💾 Layout Memory and Restoration System | [+]👏 Color Cards: Random/Collect/Remove/Manual Addition |
-
-
-## ✅ New Version Effect Demo🖼️
-
-
-⚠️ Note: Regarding multiple alignment modes, you can `try Alt key + Alignment Button` to experience the `new alignment methods` in the new `easter egg feature`.
-
-(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`))
-
-⚠️ [+] 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
-
-
-
-
-
-
-
+**ComfyUI_EasyKitHT_NodeAlignPro** is a powerful ComfyUI plugin independently developed by a designer, offering a brand-new alignment toolset and a professional node color management system. The built-in alignment tool layout follows the common operational logic and experience of the design industry. The coloring tool with multiple modes is more reasonable, and a new real-time color picker has been added for quick coloring. This plugin aims to enhance the workflow efficiency of ComfyUI users by simplifying node layout and color management through an intuitive interface and rich features.
---
-## 🛠️ Installation Guide
+## 🔥 Major Update in v2.0.2_rc
-### Manual Installation
-1. [Download the Latest Release](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/releases)
-2. Unzip it to the `ComfyUI/custom_nodes/` directory
-3. Restart the ComfyUI service
+The new **v2.0.2_rc** version has completely refactored the old v1.0.4_rc UI and underlying logic, rewritten from scratch with a brand-new UI icon set and interface interaction logic.
+The foundational code and concepts were largely completed back in June-July of this year. Due to recent busy schedules, the update was delayed for quite some time. I managed to find some time recently to update it, redesigning the relevant UI while preserving as much of the previous version's interface and interaction habits as possible. Essentially, all related logic has been reconstructed (see image below).
-### Git Installation
-```bash
-git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git custom_nodes/ComfyUI_EasyKitHT_NodeAlignPro
+#### ✅ New Version Demo
+
+
+#### If you like it, please consider giving it a **⭐Star**. Your encouragement is my greatest motivation!
+⚠️ Note: Regarding the multiple alignment modes, you can ```try holding the Alt key + clicking the alignment button``` to experience the new ```Easter Egg Feature``` with its ```brand-new alignment methods```.
+(Note: The alignment-related functions in the ```new Node2.0 Beta``` are currently not very stable, suffering from cumulative offset issues due to various calculation errors (Reproduction: repeatedly enabling/disabling ComfyUI's native Node2.0 Beta switch will cause nodes to accumulate errors, with sizes and coordinates constantly shifting. Therefore, compatibility is temporarily withheld (even though adaptation for Node2.0 is already done, the ```logic for Node2.0 compatibility is temporarily removed``` and will be ```updated back once it stabilizes a bit more```)))
+
+⚠️ Note: The three major sections — ```💫 Brand-new Coloring System```, ```💫 User-friendly Interaction Design```, and ```💫 Brand-new Color Picker (Original Design)``` — have undergone varying degrees of refactoring, while尽可能 retaining the basic operation logic of the ```v1.0.4_rc version```. As development is done in spare time by a non-professional programmer, ```rushed updates may inevitably contain bugs```. We appreciate your help in testing and welcome Issue submissions for feedback. Thank you for your support and understanding!
+
+
+
+
+## ✨ Core Features (Officially Released)
+
+| 💫 Intelligent Alignment System | 💫 Brand-new Coloring System | 💫 User-friendly Interaction Design | 💫 Brand-new Color Picker (Original Design) |
+|---------------------------|---------------------------|---------------------------|---------------------------|
+| ✅ Multiple Alignment Modes | 🖼️ One-click Color Management | 🖱️ Floating Tool Panel | ✅ Native JS/CSS New Color Picking System |
+| 📐 Dynamic Spacing Distribution Algorithm | 🔗 Real-time Linked Color Preview | 🧩 New Custom Configuration | 🎨 Color Palette Modes: Color/Grayscale/Custom |
+| 👥 Multi-Node Group Coordination | 💾 Custom Palette Saving & Restoring System | 💾 Layout Memory & Restore System | 👏 Palette: Random/Favorite/Remove/Manual Add |
+
+### 🎨 Color Management Module
+- **Seven Preset Colors**: Quickly apply standard colors to selected nodes.
+- **Grayscale Palette**: Hold the **Shift key** to switch to grayscale color mode. 【v2.0.2_rc New】
+- **Custom Palette**: Hold the **Alt key** to enter custom color mode. 【v2.0.2_rc New】
+- **Color Favorites**: Use **Ctrl+Alt combo** to lock/unlock custom colors. 【v2.0.2_rc New】
+- **Random Color**: Click the random color button for a random color. 【v2.0.2_rc New】
+- **Super Random Colors**: Press **Alt key** + **Random Color Button** to generate 7 random colors at once and apply them in real-time to selected nodes. 【v2.0.2_rc New】
+- **Smart Color Picker**: Built-in **HSB/RGB real-time color picker** adapted for ComfyUI nodes. 【v2.0.2_rc New】 (Zero dependencies, pure native JS+CSS development & design.)
+- **Real-time Node Color Preview**: Real-time preview of color effects applied to nodes. 【v2.0.2_rc New】 (Zero dependencies, pure native JS+CSS development & design.)
+
+### 🔧 Node Alignment Tools
+- **Basic Alignment**: Left align, Right align, Top align, Bottom align.
+- **Center Distribution**: Vertical center and Horizontal center.
+- **Even Spacing**: Horizontal even distribution and Vertical even distribution.
+- **Uniform Sizing**: Equal width and Equal height adjustment.
+- **Smart Mode**: Press **Alt key** + click corresponding **Alignment Button** for reverse reference alignment. 【v2.0.2_rc New】
+
+### 🎯 Advanced Features
+- **Draggable Container**: Freely draggable and scalable operation panel.
+- **Linkage Mode**: Position linked with ComfyUI's Run button.
+- **Display Mode**: Always visible or auto-show upon selection.
+- **Right-click Menu**: Rich settings options and quick actions.
+- **Node Selection**: Multiple selection tools and magic wand功能.
+- **Rename Tool**: Batch rename nodes functionality.
+
+---
+
+## ❌ Legacy Interface Comparison
+
+**Legacy v1.0.4_rc**: Only provided basic node alignment tools and fixed coloring tools.
+
+
+
+
+
+---
+
+## 🚀 Installation Methods
+
+### Method 1: Git Clone (Recommended)
+```
+cd ComfyUI/custom_nodes
+git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
+```
+
+### Method 2: Manual Installation
+1. Open the project address: https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
+2. Download the plugin ZIP (```<>Code``` > ```Download ZIP```).
+3. Extract to the ```ComfyUI/custom_nodes``` directory (Ensure correct directory hierarchy: ```ComfyUI/custom_nodes/ComfyUI_EasyKitHT_NodeAlignPro```).
+4. Restart ComfyUI.
+
+### Method 3: ComfyUI Manager
+1. Search for "NodeAlignPro" in the ComfyUI Manager (if not installed, install ComfyUI Manager first).
+2. Find ```ComfyUI_EasyKitHT_NodeAlignPro```, click Install.
+3. Restart ComfyUI.
+
+### Supplementary: Git Update (First navigate to the ComfyUI_EasyKitHT_NodeAlignPro directory manually)
```
-### Git update (Manual navigation to the ComfyUI_EasyKitHT_NodeAlignPro directory is required first)
-```bash
git fetch --all
```
-### 🚀 Quick Start
-Example Workflow Configuration (for reference only)
-```python
-{
- "nodes": [
- {
- "type": "ComfyUI_EasyKitHT_NodeAlignPro/AlignGroup",
- "params": {
- "alignment_mode": "vertical_center",
- "spacing": 50,
- "color_scheme": "cyan"
- }
- }
- ]
-}
+---
+
+### 🚀 Quick Start (Brief Guide)
+After successfully installing NodeAlignPro, basic operations (for reference).
+
+1. **Node Coloring**: In ComfyUI, select any node > Click any **color button** in the NodeAlignPro panel (hereafter NAP panel) (🔴🟠🟡🟢🔵🟣🟤, ```Clear Color```, ```Color Picker```, ```Random Color```).
+2. **Custom Color**: Select any node > Click the **color picker button** in the NAP panel.
+3. **Node Alignment**: Select any node > Click any **alignment button** in the NAP panel.
+4. **Reverse Alignment**: Select any node > Press **Alt key** + click the corresponding **alignment button** for reverse reference alignment.
+ └ Example: ```Left Align``` → Select multiple nodes > Press ```Alt key``` + ```Left Align Button```, then alignment uses the ```rightmost node``` as the ```reference``` for ```left alignment``` (Default left alignment uses the leftmost node as reference).
+5. **Dragging the NAP Panel**: Without selecting any node > Click the buttons on the left/right sides of the NAP panel, a four-way arrow cursor (↕↔) appears, then drag.
+6. **Reset Settings**: Without selecting any node > In the NAP panel > 【Mouse Right-click】 > 【One-click Reset】.
+7. **Advanced Techniques**: Please refer to the **User Guide** below 👇.
+
+## 🖥️ User Guide
+
+### Basic Operations
+1. **Start Plugin**: The plugin loads automatically after ComfyUI starts.
+2. **Show/Hide**: Control visibility via right-click menu or hotkeys.
+3. **Drag to Move**: Drag the title bar or separator line to move the panel.
+4. **Scale Adjustment**: Adjust UI scaling via the right-click menu.
+
+### Color Mode Switching
+| Key Combination | Mode Description | Function Description |
+|---------|---------|---------|
+| **No Key** | Default Mode | Seven preset colors |
+| **Shift** | Grayscale Mode | Black/white/gray series colors |
+| **Alt** | Custom Mode | Custom color management |
+| **Ctrl+Alt** | Lock Mode | Lock/Unlock custom colors |
+
+### Alignment Operations
+1. Select 2 or more nodes on the ComfyUI canvas.
+2. Click the corresponding button on the alignment panel:
+ - **Left Align**: Align all nodes to the left.
+ - **Vertical Center**: Vertically center all nodes.
+ - **Right Align**: Align all nodes to the right.
+ - **Top Align**: Align all nodes to the top.
+ - **Horizontal Center**: Horizontally center all nodes.
+ - **Bottom Align**: Align all nodes to the bottom.
+
+### Advanced Techniques
+- **Alt + Alignment Button**: Use "reverse reference" for alignment.
+- **Double-click Color Picker Preview**: Toggle between whole node / title-only coloring mode.
+- **Right-click Menu**: Access full settings and reset functions.
+- **Container Linkage**: Link the operation panel position with the Run button.
+
+## 🐛 Frequently Asked Questions
+
+##### Q: What if the plugin doesn't show up?
+A: Check if installed correctly in the custom_nodes directory, restart ComfyUI, check the browser console for errors.
+
+##### Q: Colors cannot be applied to nodes?
+A: Ensure nodes are selected, check if nodes are locked, try refreshing the page.
+
+##### Q: Alignment function doesn't work?
+A: Ensure 2 or more nodes are selected, check node selection status, try clearing selection and reselecting.
+
+##### Q: How to reset all settings?
+A: Right-click menu → "One-click Reset", or clear browser localStorage.
+
+---
+
+## ⚙️ Technical Features
+
+### Architecture Design
+- **🌐 Native Development**: Implemented from scratch using only native JS+CSS.
+- **🔒 Zero Dependencies**: No reliance on any third-party frameworks/libraries or existing code snippets. (Only imports the necessary Python built-in OS module in __init__.py)
+- **📴 Fully Offline Operation**: Runs entirely locally, no dependence on any network resources, ensuring security and reliability for local private deployment.
+- **📄 Single File Characteristic**: Centralized development in a single file. While slightly lengthy overall, it facilitates centralized management and debugging/maintenance. (Even using Windows Notepad; in fact, many minor adjustments were tested by tweaking directly with Notepad.)
+- **🧩 Modular Design**: Separation of color, alignment, and UI controllers. (Achieves module separation on a single-file basis, facilitating future development to some extent.)
+- **🏷️ Standardized Naming**: Customized a personal naming style for clear distinction.
+- **💻 Responsive Layout**: Adapts to different screen resolutions.
+- **⚡ Performance Optimization**: Throttling and debouncing in necessary sections.
+- **💾 State Persistence**: Saves user settings to local storage.
+- **✅ Truly Open Source / No Obfuscation**: Complete retention of necessary comments and variable/parameter names, no code obfuscation for pseudo-open source.
+
+### Color System
+- **HSB/RGB/HEX**: Full color space support.
+- **Real-time Preview**: Node SVG preview updates in real-time.
+- **Intelligent Distribution**: Multi-node color intelligent distribution algorithm.
+- **CSS Variables**: Unified theme color management.
+
+### UI Components
+- **Draggable Container**: Supports boundary detection and elastic bounce-back.
+- **Dropdown Menu**: Smooth animations and hover interactions.
+- **Slider Control**: Precise color value adjustment.
+- **Icon System**: SVG vector icon rendering.
+
+## 🔧 Configuration Options
+
+### Display Settings
+```
+// Display Mode
+- Always Show: Operation panel always visible.
+- Follow Selection: Auto-show when 2 or more nodes are selected.
+
+// UI Scaling
+- 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x
```
-## 📌 Function Details
-- **Node Alignment**
-Left/Right/Top/Bottom Alignment, Horizontal/Vertical Centering, Smart Spacing Distribution
+### Linkage Settings
+```
+// Drag Method
+- Decoupled: Independent dragging of operation panel.
+- Linked: Position linked with the Run button.
-- **Node Coloring**
-7 Preset Color Schemes: orange, yellow, green, cyan, blue, purple, Custom Color Picker, One-click Reset
+// Working Mode
+- Alignment Mode: Basic alignment functions.
+- Professional Mode: Advanced selection tools.
+```
+## 📁 File Structure
-## 🤝 Contribution Guide
-- Welcome to participate in the improvement in the following ways:
-`Submit Usage Feedback`、`New Issue`、`Improve Code Logic`、`Fork & PR`、`Complete Multilingual Documents`、`Share Creative Workflows`
+```
+ComfyUI_EasyKitHT_NodeAlignPro/
+├── __init__.py
+├── README.md # English Documentation
+├── README_ZH.md # 中文说明文档
+├── LICENSE # License File
+├── pyproject.toml
+└── ArtsticH/ # Project Files
+ ├── hNodeAlignPro.js # Main Program File
+└── Example/
+ ├── NodeAlignPro_demo.json # Test Workflow
+ └── NodeAlignPro_demo.png # Example Image (contains test workflow)
+```
-## 📜 License Agreement
-- This project uses the MIT License. The development idea is based on the secondary development of[ComfyUI-NodeAligner](https://github.com/Tenney95/ComfyUI-NodeAligner) and [ComfyUI-Align](https://github.com/Moooonet/ComfyUI-Align).
-- It mainly refactored the code and rewrote the UI, thus developing the lightweight[ComfyUI_EasyKitHT_NodeAlignPro](https://github.com/Tenney95/ComfyUI-NodeAligner)named`ComfyUI plugin`.
-- The core functions are: `Node Alignment`and`Node Coloring`.
+## 🔄 Changelog
-👨💻 This is a project developed by a designer in his spare time. Welcome to feedback on usage issues.
-⚠️ There may be exceptions in untested scenarios. Please report them through Issues.
\ No newline at end of file
+### v2.0.3_rc (最新发布)
+- Improve UI prompts for the new version (v2.0.3_rc)
+- Fix several bugs
+- Rewrite MD tutorial documentation (Chinese-English bilingual)
+
+##### v2.0.2_rc (2025-12-22)
+### v2.0.1_rc (2025-12-24Latest Release) [v2.0 Release]
+- Added Shift/Alt/Ctrl combo key modes.
+- Improved color picker performance and stability.
+- Added node preview functionality.
+- Optimized UI interaction experience.
+
+##### v1.0.4_rc (2025-08-14)
+##### v1.0.3_rc (2025-05-01)
+##### v1.0.2_rc (2025-04-30)
+### v1.0.1_rc (2025-04-29) [v1.0 Release]
+- Initial release version.
+- Complete alignment and color functions.
+- Draggable container system.
+- Integrated color picker tool.
+##### Complete History
+```
+v2.0.2_rc 8a12160: 🔥NodeAlignPro Major Version Update, Optimized File Structure (New UI, More Complete Node Coloring System)→See readme for details.
+----------------
+v2.0.1_rc dd2a09f: 🔥NodeAlignPro Major Version Update Released (New UI, More Complete Node Coloring System)
+d90bd02: 🔥Update Preview (A Major Update for the Upcoming Version 😁)→See README for details.
+----------------
+v1.0.4_rc b77a9d7: FIX README, ht History Optimization.
+----------------
+v1.0.3_rc a62e3a6: Fix the ui scaling adaptation issue, The interlocking control function has been newly added.
+d067502: remove res, add hPic, FIX README,FIX README_ZH.md
+----------------
+v1.0.2_rc b11f325: upload README
+cb93ffa-461032d: README Modifications
+4e60dc2: Fixed REEADME, Rename some img, Add README_ZH.md
+fac4c81: UPLoad README , Create README_ZH.md
+9f1839e: README Modifications - Added UI Scaling Adaptation
+ef5735d: Added UI Scaling, Fixed issue where old version color removal didn't work.
+8ac01db: Added Main Features: Alignment Distribution, Node Coloring. Fixed Readme image display issues.
+----------------
+v1.0.1_rc 2926b82: README Modifications
+10749c7: ComfyUI_EasyKitHT_NodeAlignPro is a newly developed ComfyUI node alignment plugin and node coloring plugin.
+ New visual UI, relatively more aligned with the common operational logic of designers.
+ Aiming to provide a relatively aesthetic user experience for everyone.
+ Added main features: Alignment distribution, Node coloring.
+----------------
+ca28236: Initial commit
+----------------
+# @Artstich_Example
+# @name ComfyUI_EasyKitHT_NodeAlignPro (ComfyUI Plugin)
+# @description ComfyUI_EasyKitHT_NodeAlignPro is a lightweight ComfyUI node alignment and node coloring tool
+# for refactoring and rewriting the UI based on the open-source projects Comfyui-Align and Comfyui-Nodealigner.
+# @author Artstich @date 2025-06-15 @version v2.0.2_rc @license GPL-3.0
+# @see https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
+```
+
+## 🤝 Contribution Guidelines
+
+- Welcome participation through the following ways:
+```Submit usage feedback```, ```New Issue```, ```Improve code logic```, ```Fork & PR```, ```Improve multilingual documentation```, ```Share your creative node layouts```, ```Share your custom color palettes```
+
+## 📜 License
+
+This project is licensed under the **GPL-3.0** License. For details, please see the [LICENSE](LICENSE) file.
+
+## 👥 Contributors
+
+- [ArtsticH](https://github.com/ArtsticH) - Project creator and main developer.
+- ISSUES: [@JGDMGJAPT](https://github.com/jgdmgjapt) , [@MAOMAOCHONGNE](https://github.com/MAOMAOCHONGNE)
+- Thanks to all designers, developers, testers, ComfyUI users, and feedback providers who helped.
+
+## 🌐 Related Links
+
+- [GitHub Repository](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro) | [Issue Feedback](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues) | [ComfyUI Community](https://github.com/comfyanonymous/ComfyUI) | [ComfyUI-Manager](https://github.com/Comfy-Org/ComfyUI-Manager/tree/main)
+- Author's video tutorial link: https://www.bilibili.com/video/BV1V7G9z9EcU (This link is for the `v1.0.4_rc` old version tutorial; v2.0.2_rc new version tutorial待录制)
+