Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b503319e86 | ||
|
|
70d7d28a7b | ||
|
|
3b53601f4c | ||
|
|
967e1a780b | ||
|
|
8edeb34c64 | ||
|
|
b2a1036e13 | ||
|
|
f85e1dc88c | ||
|
|
dafde14bac | ||
|
|
2f50297c20 | ||
|
|
bb768a1208 | ||
|
|
0da595959b | ||
|
|
915a54326b | ||
|
|
eb1fc116f1 | ||
|
|
280a72e62e | ||
|
|
33446f9233 | ||
|
|
5f75ea9c77 | ||
|
|
ce1038edec | ||
|
|
49e9cc69b5 | ||
|
|
792704cc73 | ||
|
|
eda76447dc | ||
|
|
021eb2303b | ||
|
|
c3fef82736 | ||
|
|
fd5ce12c60 | ||
|
|
b09ff7377a | ||
|
|
a48545217b | ||
|
|
db4d366028 | ||
|
|
e7a8c36a51 | ||
|
|
b836940b13 | ||
|
|
e53cb3efb9 | ||
|
|
7e8bb0abbd | ||
|
|
e00a1136f9 | ||
|
|
881dae8c38 | ||
|
|
01db27f52e | ||
|
|
0ea34c377b | ||
|
|
5a264d31e9 | ||
|
|
1eb2a011ad | ||
|
|
87ded60330 | ||
|
|
dbc11fd64a | ||
|
|
8d037ebc44 | ||
|
|
3c898de2cc |
@@ -0,0 +1,75 @@
|
||||
name: Publish to Comfy Registry
|
||||
on:
|
||||
workflow_dispatch: # 手动触发选项
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
paths:
|
||||
- "pyproject.toml"
|
||||
|
||||
jobs:
|
||||
publish-node:
|
||||
name: Publish Custom Node to registry
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Display Version Info
|
||||
run: |
|
||||
echo "检测到 pyproject.toml 更新,正在准备发布..."
|
||||
VERSION=$(grep '^version' pyproject.toml | cut -d '"' -f 2)
|
||||
NAME=$(grep '^name' pyproject.toml | cut -d '"' -f 2)
|
||||
echo "📦 插件名称: $NAME"
|
||||
echo "🔖 版本号: $VERSION"
|
||||
echo ""
|
||||
echo "开始发布到 ComfyUI Registry..."
|
||||
|
||||
- name: Publish Custom Node
|
||||
id: publish
|
||||
uses: Comfy-Org/publish-node-action@main
|
||||
with:
|
||||
personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}
|
||||
|
||||
- name: Success Notification
|
||||
if: success()
|
||||
run: |
|
||||
echo "========================================"
|
||||
echo "🚀 自动发布成功!"
|
||||
echo "========================================"
|
||||
echo ""
|
||||
echo "✅ 插件已成功发布到 ComfyUI Registry"
|
||||
echo ""
|
||||
VERSION=$(grep '^version' pyproject.toml | cut -d '"' -f 2)
|
||||
NAME=$(grep '^name' pyproject.toml | cut -d '"' -f 2)
|
||||
echo "📦 插件: $NAME"
|
||||
echo "🔖 版本: $VERSION"
|
||||
echo ""
|
||||
echo "🌐 查看地址: https://registry.comfy.org/nodes/easykit-node-align"
|
||||
echo ""
|
||||
echo "💡 用户现在可以通过 ComfyUI Manager 更新到最新版本"
|
||||
echo "========================================"
|
||||
echo ""
|
||||
echo "📌 注意: 此发布由 pyproject.toml 版本更新自动触发"
|
||||
|
||||
- name: Failure Notification
|
||||
if: failure()
|
||||
run: |
|
||||
echo "========================================"
|
||||
echo "❌ 自动发布失败!"
|
||||
echo "========================================"
|
||||
echo ""
|
||||
echo "⚠️ 插件发布到 ComfyUI Registry 失败"
|
||||
echo ""
|
||||
echo "请检查以下可能原因:"
|
||||
echo "1. API Token 是否正确或已过期"
|
||||
echo "2. 版本号是否已存在"
|
||||
echo "3. pyproject.toml 配置是否正确"
|
||||
echo ""
|
||||
echo "🔧 解决方案:"
|
||||
echo "- 检查并更新 API Token"
|
||||
echo "- 修改 pyproject.toml 中的版本号"
|
||||
echo "- 重新提交到 main 分支"
|
||||
echo ""
|
||||
echo "查看详细错误日志请访问 GitHub Actions 页面"
|
||||
echo "========================================"
|
||||
@@ -1,333 +1,328 @@
|
||||
# ComfyUI_EasyKitHT_NodeAlign Pro 🎨
|
||||

|
||||
# EasyKit-NodeAlign-Pro [↙Switch to Chinese] 🎨
|
||||
|
||||
[](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/stargazers) [](LICENSE) [](README_ZH.md) [](README.md)
|
||||
[](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/stargazers) [](LICENSE) [](README_ZH.md) [](README.md)
|
||||
|
||||
## 📋 Project Introduction
|
||||
|
||||
**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.
|
||||
**EasyKit-NodeAlign-Pro** is independently developed by a designer (original name: ComfyUI_EasyKitHT_NodeAlign Pro):
|
||||
An essential plugin for managing node layout and color schemes in ComfyUI, featuring professional alignment functions and a real-time node color picker **now adapted for ComfyUI Node2.0**.
|
||||
Original real-time preview color adjustment/picking component based on nodes, facilitating quick node color picking/coloring. This plugin aims to enhance ComfyUI users' workflow efficiency by simplifying node layout and color management processes with an intuitive interface and rich features.
|
||||
|
||||
**v2.1.14 support - the latest ComfyUI Node2.0 nodes. Pioneering alignment algorithm based on Node2.0 (innovative adaptation)**:
|
||||
Functions cover alignment distribution, real-time node color picker, color palette, 7 preset colors, grayscale/custom modes, and one-click reverse alignment, providing new alignment tools and a professional node color management system. The layout of the built-in alignment tools aligns better with industry-standard operational logic and experience, and the coloring tools with multiple coloring modes are more rational. (Natively supports multilingual UI display)
|
||||
|
||||
---
|
||||
|
||||
## 🔥 What's New in v2.0 ?
|
||||
## 🔥 v2.1 New Version Update Notes (Adapted for Node2.0)
|
||||
|
||||
The **New Version v2.0** 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).
|
||||
**The new v2.0 is fully adapted with i18n multilingual configuration files, natively supporting Chinese, English, and other languages (more languages such as Russian, French can be added later if needed), making it more friendly to international friends worldwide.**
|
||||
|
||||
#### ✅ New Version Demo
|
||||
#### ✅【h260201 Update】: Added automatic theme color (automatically follows ComfyUI theme color)👇
|
||||

|
||||
|
||||

|
||||

|
||||
#### If you like it, please consider giving it a **⭐Star**. Your encouragement is my greatest motivation!
|
||||
<details>
|
||||
<summary><b>⚠️ about ComfyUI Node 2.0...</b></summary>
|
||||
|
||||
⚠️ 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!
|
||||
</details>
|
||||
#### ✅【h260125 Update】: Added ComfyUI menu, added i18n multilingual adaptation (now integrated into the official menu page)👇
|
||||

|
||||
|
||||
<details>
|
||||
<summary><b>⚠️ Legacy v1.0.4_rc UI...</b></summary>
|
||||
|
||||
**Legacy v1.0.4_rc**: Only provided basic node alignment tools and fixed coloring tools:
|
||||

|
||||
<summary><b>⚠️Old version v1.0.4_rc UI interface...</b></summary>
|
||||
|
||||
**Old version v1.0.4_rc**: Only provides basic node alignment tools and fixed coloring tools:
|
||||

|
||||
</details>
|
||||
|
||||
## ✨ Core Features (Officially Released)
|
||||
#### If you find it useful, please give it a **⭐Star**, your encouragement is my greatest motivation~
|
||||
|
||||
| 💫 Intelligent Alignment System | 💫 Brand-new Coloring System | 💫 User-friendly Interaction Design | 💫 Brand-new Color Picker (Original Design) |
|
||||
## 📺️ Video Tutorials
|
||||
- ~~v1 tutorial (old version)~~:https://www.bilibili.com/video/BV1V7G9z9EcU
|
||||
- **New v2 tutorial (adapted for Node 2.0)**:https://www.bilibili.com/video/BV1zeFZzLEvP
|
||||
|
||||
---
|
||||
|
||||
## 💫 Next Version Preview (Implemented) To be released after upcoming tests:
|
||||

|
||||
|
||||
---
|
||||
|
||||
## ✨ Core Features (Officially Launched)
|
||||
|
||||
| 💫Node2.0 Node Alignment System | 💫New Coloring System | 💫User-friendly Interaction Design | 💫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 |
|
||||
| 🔥 **New Node2.0 Node Algorithm** | 🖼️ One-click Color Management Scheme | 🖱️ Floating Tool Panel | ✅ **Real-time Preview Color-Picker Kit** |
|
||||
| 🔥 **Reverse Baseline Alignment Algorithm (Alt)** | 🔗 Real-time Full-screen Color Picker Linkage | ⚙️ **ComfyUI System Menu Integration** | 🎨 Color Card Modes: Color/Grayscale/Custom |
|
||||
| 📊 Two Sets of Alignment Distribution Algorithms | 🎨 Whole Node Coloring / Title-only Coloring Modes | 🔥 **ComfyUI Auto-Theme (9+1+1)** | 🧩 Color Cards: Random/Favorite/Remove/Manual |
|
||||
| 🧩 Multiple Alignment Distribution Modes | 🧩 Custom Color Card Favorite and Recovery System | 🌐 **Native i18n Multi-language UI Adaptation** | 🎨 Preset Colors: Specially Tuned Color Values |
|
||||
|
||||
### 🎨 Color Management Module
|
||||
- **Two Coloring Modes**: Title-only / Full-node 【v2.0.3_rc New】
|
||||
- **Seven Preset Colors**: Quickly apply standard colors to selected nodes.
|
||||
- **Grayscale Palette**: Hold the **Shift key** to switch to grayscale color mode. 【v2.0.1_rc New】
|
||||
- **Custom Palette**: Hold the **Alt key** to enter custom color mode. 【v2.0.1_rc New】
|
||||
- **Color Favorites**: Use **Ctrl+Alt combo** to lock/unlock custom colors. 【v2.0.1_rc New】
|
||||
- **Random Color**: Click the random color button for a random color. 【v2.0.1_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.)
|
||||
#### 🎯 Advanced Features
|
||||
- **i18n Multilingual**: Natively adapted i18n multilingual system
|
||||
- **Supports Node2.0 Nodes**: New support for ComfyUI Node2.0 nodes 【v2.1.13+ added】
|
||||
- **ComfyUI System Menu Integration**: Can perform related settings in the ComfyUI system menu (including advanced settings) 【v2.0.3_rc added】
|
||||
- **Custom Drag and Scale**: Freely draggable and scalable operation panel
|
||||
- **AcBar Linkage Mode**: Linkage drag positioning with ComfyUI run button
|
||||
- **Right-click Menu**: Rich setting options and quick operations
|
||||
- **Node Batch Selection**: Multiple selection tools and magic wand function (Under development/debugging...)
|
||||
- **Node Batch Rename**: Batch rename node function (Under development/debugging...)
|
||||
|
||||
### 🔧 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】
|
||||
#### 🎨 Color Management Module
|
||||
- **Two Coloring Modes**: Color node title only / Color entire node 【v2.0.3_rc added】
|
||||
- **Seven Groups of Preset Colors**: Quickly apply standard colors to selected nodes
|
||||
- **Grayscale Palette**: Hold **Shift key** to switch to grayscale color mode 【v2.0.1_rc added】
|
||||
- **Custom Palette**: Hold **Alt key** to enter custom color mode 【v2.0.1_rc added】
|
||||
- **Color Favorites**: **Ctrl+Alt combination** locks/unlocks custom colors 【v2.0.1_rc added】
|
||||
- **Random Color**: Click the random color button to get a random color 【v2.0.1_rc added】
|
||||
- **Super Random Color**: Press **Alt key** + **Random Color Button** to randomly generate 7 colors at once and apply random colors to selected nodes in real-time 【v2.0.1_rc added】
|
||||
- **Real-time Color Picker**: Built-in **full-screen real-time color picker** 【v2.0.1_rc added】 (0 dependencies, purely native js+css development design)
|
||||
- **Node Color Adjustment Real-time Preview Component**: Original real-time preview color adjustment/picking component based on nodes 【v2.0.1_rc added】 (0 dependencies, purely native js+css development design)
|
||||
|
||||
### 🎯 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 functionality. *(In development and debugging...)*
|
||||
- **Rename Tool**: Batch rename nodes functionality. *(In development and debugging...)*
|
||||
#### 🔧 Node Alignment Module
|
||||
- **Basic Alignment**: Left-align, Right-align, Top-align, Bottom-align
|
||||
- **Center Distribution**: Vertical center and horizontal center
|
||||
- **Equal Spacing Distribution**: Horizontal equal spacing and vertical equal spacing
|
||||
- **Size Unification**: Equal width and equal height adjustment
|
||||
- **Reverse Baseline Mode**: Press **Alt key** + click the corresponding **alignment button** to achieve reverse baseline alignment 【v2.0.1_rc added】
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Installation Methods
|
||||
## 🚀 Plugin Installation
|
||||
|
||||
### Method 1: Git Clone (Recommended)
|
||||
| 🎨Key Combo | 🎨Mode Description | 🎨Function Description | 🧩Key Combo | 🧩Mode Description | 🧩Function Description |
|
||||
|---------|---------|---------|---------|---------|---------|
|
||||
| **Default** | Default Mode | Seven groups of preset colors | **Default** | Default Mode | Seven groups of preset colors |
|
||||
| **Shift** | Grayscale Mode | Grayscale colors | **Shift** | ~~None~~ | ~~None~~ |
|
||||
| **Alt** | Custom Mode | Custom color management | **Alt** | Reverse Baseline Alignment | Align using reverse baseline |
|
||||
| **Ctrl+Alt** | Lock Mode | Lock/Unlock custom colors | **Ctrl+Alt** | ~~None~~ | ~~None~~ |
|
||||
|
||||
1. Search for "**node2.0**" in the **ComfyUI Manager** (Yes, it's that simple, and currently the only one).
|
||||
👉 If searching for "**node2.0**" yields no results: it means your ComfyUI & Manager is not up to date. Please update **ComfyUI** & **Manager** to the latest version first.
|
||||
👉 If you prefer not to update ComfyUI and its Manager: you can directly search for "**Easykit**" or "**NodeAlign Pro**" in the older version to find it.
|
||||

|
||||
|
||||
2. Locate `EasyKit-NodeAlign-Pro` and click Install. *(This installs the ComfyUI registry version of the plugin, which will automatically create the official standard `easykit-node-align` directory within the ComfyUI ecosystem.)*
|
||||

|
||||
3. Wait for the prompt to restart ComfyUI, then it's ready to use
|
||||
|
||||
#### Method 2: Git Clone (Recommended)
|
||||
1. Navigate to the ComfyUI/custom_nodes directory and execute the following command `(This method is the git version plugin: will automatically generate the ComfyUI_EasyKitHT_NodeAlignPro directory)`:
|
||||
```
|
||||
cd ComfyUI/custom_nodes
|
||||
git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
### Method 2: Manual Installation
|
||||
- For Chinese users and those unable to access github, please use the gitee mirror source:
|
||||
```
|
||||
git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
3. Restart ComfyUI, then it's ready to use
|
||||
|
||||
#### Method 3: comfy install
|
||||
`(This method is the ComfyUI registered plugin: will automatically generate the easykit-node-align directory under ComfyUI's official standard ecosystem)`
|
||||
```
|
||||
comfy node install easykit-node-align
|
||||
```
|
||||
|
||||
#### Method 4: Git 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 fetch --all
|
||||
```
|
||||
2. Download the plugin zip file (`<>Code` > `Download ZIP`)
|
||||
3. Extract to the `ComfyUI/custom_nodes` directory (Note: The correct directory level should be: `ComfyUI/custom_nodes/ComfyUI_EasyKitHT_NodeAlignPro`)
|
||||
4. Restart ComfyUI, then it's ready to use
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Quick Start (Brief Guide)
|
||||
After successfully installing NodeAlignPro, basic operations (for reference).
|
||||
## 🚀 Plugin Update
|
||||
|
||||
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 👇.
|
||||
#### Method 1: ComfyUI Manager Update (Recommended)
|
||||
1. Search for "**node2.0**" in the **ComfyUI Manager** (Yes, it's that simple, and currently the only one).
|
||||

|
||||
2. Find `EasyKit-NodeAlign-Pro`, click install `(This method is the ComfyUI registered plugin: will automatically generate the easykit-node-align directory under ComfyUI's official standard ecosystem)`
|
||||

|
||||
3. Wait for the prompt to restart ComfyUI, then it's ready to use
|
||||
|
||||
<details>
|
||||
<summary><b>🖥️ User Guide...</b></summary>
|
||||
#### Method 2: Git Update (First navigate to the ComfyUI_EasyKitHT_NodeAlignPro directory)
|
||||
```
|
||||
git fetch --all && git reset --hard origin/main
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
</details>
|
||||
---
|
||||
|
||||
## 🐛 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. Advanced users can also enter the following command directly in the console:
|
||||
```
|
||||
// Clear NodeAlignPro plugin-related data and force a reload
|
||||
clear();const keysToRemove = ['NodeAlignProPosition', 'NodeAlignProRunButtonLink'];keysToRemove.forEach(key => localStorage.removeItem(key));console.log('NodeAlignPro has been reloaded');window.location.reload(true);
|
||||
```
|
||||
#### Q: How to turn on/off 【Automatic】 theme color?
|
||||
→A: Click the menu in the lower left corner of ComfyUI> 🔥 NodeAlignPro> 🎨NodeAlignPro Color preset(Color preset)> Use ComfyUI theme color(Use ComfyUI theme color)> **【Turn On/Off】**;
|
||||

|
||||
|
||||
- **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.
|
||||
- **Q: How to display plugin operation logs?** →A: Execute the following console command: ``` document.getElementById('hDebugInfo_V2')?.style.setProperty('display', 'block', 'important'); ```
|
||||
#### Q: How to 【Customize】 theme color?
|
||||
→A: ...> 🔥 NodeAlignPro> 🎨NodeAlignPro Color preset(Color preset)> Use ComfyUI theme color(Use ComfyUI theme color)> **【Turn On】**;
|
||||

|
||||
|
||||
#### Q: How to switch languages?
|
||||
→A: ...> 🔥 NodeAlignPro> NodeAlignPro Basic Settings(Basic Settings)> **NodeAlignPro UI Language(Language)**;
|
||||
|
||||
#### Q: How to use alignment/distribution/coloring functions in the new Node2.0 mode?
|
||||
→A-Method1: Right-click on the plugin toolbar> Work Mode(Work Mode)> Node2.0
|
||||

|
||||
→A-Method2: ...> 🔥 NodeAlignPro> NodeAlignPro Basic Settings(Basic Settings)> Work Mode (Work Mode)> Node2.0;
|
||||
|
||||
#### Q: My plugin is in Node2.0 mode, but there is a noticeable delay after clicking the alignment button?
|
||||
→A-Method1: You are currently using the traditional Canvas nodes. If you need to maintain the current traditional Canvas node usage environment, please switch the plugin's work mode to traditional mode: Work Mode(Work Mode)> **Traditional Alignment(AlignStd)**
|
||||
|
||||
→A-Method2: You are currently using the traditional Canvas nodes. If you must use the new Node2.0 mode, please manually enable ComfyUI's new Node2.0 switch (see image below)
|
||||

|
||||
|
||||
#### Q: Color cannot be applied to nodes? →A: Ensure nodes are selected, check if nodes are locked, try refreshing the page;
|
||||
|
||||
#### Q: Alignment function is invalid? →A: Ensure 2 or more nodes are selected, check node selection status, try clearing selection and re-selecting;
|
||||
|
||||
#### Q: How to reset all settings?
|
||||
→A: Right-click menu → "One-click reset", or ComfyUI lower left corner menu> 🔥 NodeAlignPro> Z Developer Options(Developer Options)> ⚠Force reset NodeAlignPro plugin;
|
||||
|
||||
#### Q: What if the plugin doesn't show up?
|
||||
→A: Click the menu in the lower left corner of ComfyUI> 🔥 NodeAlignPro> Z Developer Options(Developer Options)> ⚠Force reset NodeAlignPro plugin.
|
||||

|
||||
```↑If still not effective after 【Force Reset】, please use ComfyUI Manager to check if the plugin is correctly installed. ```
|
||||
```If not installed, search for "NodeAlign Pro" and reinstall. If installed, try FIX repair or try Update.```
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ 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.<small style="color:#999"> (Only imports the necessary Python built-in OS module in __init__.py) </small>
|
||||
- **📴 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.<small style="color:#999"> (Even using Windows Notepad; in fact, many minor adjustments were tested by tweaking directly with Notepad.) </small>
|
||||
- **🧩 Modular Design**: Separation of color, alignment, and UI controllers.<small style="color:#999"> (Achieves module separation on a single-file basis, facilitating future development to some extent.) </small>
|
||||
- **🏷️ 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.
|
||||
|
||||
|
||||
<details>
|
||||
<summary><b>🖥️ Display Settings...</b></summary>
|
||||
|
||||
```
|
||||
// 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
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>📁Modes Settings...</b></summary>
|
||||
|
||||
```
|
||||
// Drag Method
|
||||
- Decoupled: Independent dragging of operation panel.
|
||||
- Linked: Position linked with the Run button.
|
||||
|
||||
// Working Mode
|
||||
- Alignment Mode: Basic alignment functions.
|
||||
- Professional Mode: Advanced selection tools.
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>📁 File Structure of NodeAlignPro...</b></summary>
|
||||
|
||||
```
|
||||
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)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## 🔄 Changelog
|
||||
### v2.0.3_rc (Latest Release)
|
||||
- Refactored color conversion logic
|
||||
- Refactored screen color picker functionality
|
||||
- Revised and improved the README documentation
|
||||
- Fixed various bugs
|
||||
|
||||
### v2.1.18 (Latest) (2025-03-05)
|
||||
- **Added next version preview (New efficient menu interaction mode: Maya-style hotbox menu)** 💫
|
||||
- Fine-tuned i18n multi-language support, fixed some translation errors
|
||||
- Revised and improved Readme (English & Chinese)
|
||||
|
||||
<details>
|
||||
<summary><b>📄 Release History...</b></summary>
|
||||
<summary><b>📄 Version History...</b></summary>
|
||||
|
||||
### v2.1.17 (2025-02-09)
|
||||
- Fine-tuned i18n multi-language support [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- Completed v2.1 video tutorial (Node2.0) →📺️[Video Tutorial](https://www.bilibili.com/video/BV1zeFZzLEvP)
|
||||
- Revised and improved Readme (English & Chinese)
|
||||
|
||||
### v2.1.14 【🔥v2.1 Official Release (Perfectly Adapted for Node2.0)】 (2025-02-01)
|
||||
- **Major Update:** Added automatic theme color (automatically follows ComfyUI theme color) [#5](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/5)
|
||||
- Fully added alignment algorithm based on ComfyUI Node2.0, while retaining and being compatible with the original traditional Canvas alignment mode
|
||||
- Added Node2.0-based alignment mode (can be used by changing the work mode to "Node2.0" in the right-click menu or ComfyUI menu) [#8](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/8)
|
||||
- Refactored ComfyUI menu
|
||||
- Optimized right-click menu logic
|
||||
- Optimized i18n multilingual adaptation [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- Fixed several potentially non-critical syntax issues
|
||||
- Fixed several bugs
|
||||
- Revised and improved Readme documentation
|
||||
|
||||
##### v2.1.12 (2025-01-25)
|
||||
- Optimized ComfyUI menu
|
||||
- Optimized i18n multilingual adaptation [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- Optimized Node2.0-based alignment algorithm (minor test refactoring)
|
||||
- Revised and improved Readme documentation
|
||||
- Fixed several bugs
|
||||
|
||||
##### v2.1.0 【🔥v2.1 Release (Preview)】
|
||||
- Optimized ComfyUI menu, added i18n multilingual adaptation [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- Optimized some parameters
|
||||
- Revised and improved Readme documentation
|
||||
- Fixed several bugs [#9](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/9)
|
||||
|
||||
##### v2.0.3_rc (2025-12-30)
|
||||
- Added ComfyUI menu (integrated into the official menu page)
|
||||
- Refactored color conversion logic
|
||||
- Refactored screen color picking function [#3](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/3)
|
||||
- Revised and improved Readme documentation
|
||||
- Fixed several bugs [#4](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/4)
|
||||
|
||||
##### v2.0.2_rc (2025-12-22)
|
||||
- Improve UI prompts for the new version (v2.0.3_rc)
|
||||
- Fix several bugs
|
||||
- Rewrite MD tutorial documentation (Chinese-English bilingual)
|
||||
- Improved new version (v2.0.3_rc) interface prompts
|
||||
- Fixed some bugs
|
||||
- Rewrote md tutorial documents (Chinese and English bilingual)
|
||||
|
||||
##### 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.
|
||||
##### v2.0.1_rc (2025-12-22)【🔥v2.0 Release】
|
||||
- Added Shift/Alt/Ctrl combination key modes
|
||||
- Improved color picker performance and stability
|
||||
- Added node preview function
|
||||
- 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.
|
||||
##### v1.0.1_rc (2025-04-29)【🔥v1.0 Release】
|
||||
- Initial version release
|
||||
- Complete alignment and color functions
|
||||
- Draggable container system
|
||||
- Integrated color picker tool
|
||||
|
||||
</details>
|
||||
<details>
|
||||
<summary><b>📄 Release History...</b></summary>
|
||||
<summary><b>📄 Historical Changelog (Old)...</b></summary>
|
||||
|
||||
```
|
||||
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.2_rc 8a12160: 🔥NodeAlignPro major version update, optimized file structure (new UI, more comprehensive 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.
|
||||
v2.0.1_rc dd2a09f: 🔥NodeAlignPro major version update released (new UI, more comprehensive node coloring system)
|
||||
d90bd02: 🔥Update Preview (A Major Update for the Upcoming Version 😁)→See README for details.🔥Major update preview (a major update is coming soon 😁)→See readme for details.
|
||||
----------------
|
||||
v1.0.4_rc b77a9d7: FIX README, ht History Optimization.
|
||||
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
|
||||
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.
|
||||
9f1839e: README modifications - added UI scaling adaptation
|
||||
ef5735d: Added UI scaling, fixed issue where color removal didn't work in old version
|
||||
8ac01db: Added main functions: alignment distribution, node coloring. Fixed Readme image display abnormality.
|
||||
----------------
|
||||
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.
|
||||
v1.0.1_rc 2926b82: README modifications
|
||||
10749c7: ComfyUI_EasyKitHT_NodeAlignPro is a newly designed ComfyUI node alignment plugin, node coloring plugin.
|
||||
New visual UI, more in line with the usual operational logic of designer friends. Aims to provide a relatively beautiful user experience for everyone.
|
||||
Added main functions: 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
|
||||
/**
|
||||
* @Artstich_Example
|
||||
* @name easykit-node-align (ComfyUI Plugin)
|
||||
* @description Node2.0-based professional alignment & real-time node color picker - innovative first support: A must-have plugin for managing node layout and color schemes in ComfyUI. Features a real-time color picker, alignment, 7 preset colors, grayscale/custom modes, and one-click reverse alignment.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/nodes/easykit-node-align
|
||||
* @see https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @see https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @installCommand comfy node install easykit-node-align
|
||||
* @installCommand git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @installCommand git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @created 2025-04-29 @date 2025-06-15 @lastUpdated 2026-01-28 @version v2.1.14 @license GPL-3.0
|
||||
* @copyright ©2012-2026, All rights reserved. Freely open to use, modify, and distribute in accordance with the GPL-3.0 license.
|
||||
*/
|
||||
```
|
||||
|
||||
</details>
|
||||
## 🤝 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```
|
||||
## 🤝 Contribution Guide
|
||||
|
||||
## 📜 License
|
||||
|
||||
- This project is licensed under the **GPL-3.0** License. For details, please see the [LICENSE](LICENSE) file.
|
||||
- Welcome to participate in improvements through the following ways:
|
||||
[🥰Submit Usage Feedback](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues)、[👾New Issue](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues)、[💬Discussions](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions)、[📚️WiKi](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/wiki/)、
|
||||
as well as Fork & PR, improve multilingual documentation, share your creative node layouts, share your custom color cards...
|
||||
|
||||
## 👥 Contributors
|
||||
|
||||
- [ArtsticH](https://github.com/ArtsticH) - Project creator and main developer.
|
||||
- ISISUES: [@JGDMGJAPT](https://github.com/jgdmgjapt) 、[@MAOMAOCHONGNE](https://github.com/MAOMAOCHONGNE)、[@aimposer](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/3)、[@Rock-suv](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/4)...
|
||||
- Thanks to all designers, developers, testers, ComfyUI users, and feedback providers who helped.
|
||||
- Creator: [@ArtsticH](https://github.com/ArtsticH)
|
||||
- Advocates & Shapers: [👤@kakachiex2](https://github.com/kakachiex2)([👾issues-page](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/8))、[👤@aimposer](https://github.com/aimposer)([👾issues-page](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/3))、[👤@Rock-suv](https://github.com/Rock-suv)([👾issues-page](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/4))、[👤@JGDMGJAPT](https://github.com/jgdmgjapt) 、👤[@MAOMAOCHONGNE](https://github.com/MAOMAOCHONGNE)、[👤@BlissiraHQ](https://github.com/BlissiraHQ)...
|
||||
- v1 (Initial Version) Features & Concepts: [Tenney95/ComfyUI-NodeAligner](https://github.com/Tenney95/ComfyUI-NodeAligner)
|
||||
- Thanks All: Thanks to everyone who contributed — including all designers, developers, testers, ComfyUI users, and those who provided feedback.
|
||||
|
||||
## 🌐 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待录制)
|
||||
- 🧩**NodeAlign Pro** Source 1: [📥︎ Last Releases](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/releases) | Source 2: [📥︎ Comfy registry](https://registry.comfy.org/zh/nodes/easykit-node-align) | Source 3: [📥︎ Gitee (Mirror)](https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)
|
||||
[👾Problem 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)
|
||||
|
||||
## 📜 License
|
||||
|
||||
- This project adopts the **GPL-3.0** license. For details, please see the [LICENSE](LICENSE) file.
|
||||
|
||||
---
|
||||
|
||||
👨💻 The first small project developed by a designer in spare time. Welcome to report usage issues.
|
||||
⚠️ There may be untested scenarios causing anomalies. Please report via Issues. (If you like it, please consider giving it a **Star⭐**. Your encouragement is my greatest motivation!) Welcome interested friends to join!
|
||||
👨💻 A designer's first small project developed in spare time
|
||||
⚠️ There may be anomalies in untested scenarios, please report via Issues
|
||||
(If you find it good, welcome to give it a **Star⭐**, thank you) Welcome interested friends to join!
|
||||
|
||||
<small style="color:#999">This document was last updated: 2025-12-24 01:51 @[ArtsticH](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)·2025</small>
|
||||
<small style="color:#999">This document updated: February 09, 2026 00:43 @[ArtsticH](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)·2026</small>
|
||||
@@ -1,105 +1,96 @@
|
||||
# ComfyUI_EasyKitHT_NodeAlign Pro 🎨
|
||||

|
||||
# EasyKit-NodeAlign-Pro [↙切换中文] 🎨
|
||||
|
||||
[](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/stargazers) [](LICENSE) [](README_ZH.md) [](README.md)
|
||||
|
||||
## 📋 项目简介
|
||||
|
||||
**ComfyUI_EasyKitHT_NodeAlignPro** 由设计师独立开发,是一个功能强大的ComfyUI插件,提供全新对齐工具和专业的节点色彩管理系统。该插件内置对齐工具的布局更符合设计行业通用的操作逻辑和体验,多种上色模式的上色工具更合理,新增实时预览取色器方便快速上色。该插件旨在提升ComfyUI用户的工作效率,通过直观的界面和丰富的功能简化节点布局与颜色管理流程。
|
||||
**EasyKit-NodeAlign-Pro** 由设计师独立开发(原名:ComfyUI_EasyKitHT_NodeAlign Pro):
|
||||
用于管理 ComfyUI 中节点布局和节点上色的必备插件,具备专业的对齐功能和实时节点取色器 **已适配ComfyUI Node2.0** 。
|
||||
原创基于节点的实时预览调色/取色组件,方便快速节点取色/上色。该插件旨在提升ComfyUI用户的工作效率,通过直观的界面和丰富的功能简化节点布局与颜色管理流程。
|
||||
|
||||
**v2.1.14正式版首发支持-最新版ComfyUI Node2.0节点。首创基于 Node2.0 的对齐算法(创新性适配)**:
|
||||
功能能涵盖对齐分布、实时节点取色器、调色盘、7 种预设颜色、灰度/自定义模式以及一键反向对齐等功能,提供全新对齐工具和专业的节点色彩管理系统。内置对齐工具的布局更符合设业通用的操作逻辑和体验,多种上色模式的上色工具更合理。(原生支持多语言UI界面显示)
|
||||
|
||||
---
|
||||
|
||||
## 🔥 新版v2.0更新说明
|
||||
## 🔥 新版v2.1更新说明 (适配Node2.0)
|
||||
|
||||
**新版v2.0全新适配i18n多语言配置文件,原生支持中文、English等语言(后续视情况还可扩展支持更多诸如俄语、法语等语言),对世界各地的国际友人更友好。**
|
||||
|
||||
**新版v2.0**全新重构了`v1.0.4_rc`旧版UI及底层逻辑,彻底重写v2.0.3_rc版,全新的UI图标和界面交互逻辑。
|
||||
基础代码和构思早已于今年6-7月份基本完成,由于本人近期较忙,搁置了挺久迟迟没有更新。这两天抽空更新了下,在尽可能保留上一版UI及交互习惯的前提下,重新设计了相关UI,基本上可以说是全部重构了相关逻辑(详见下图)。
|
||||
#### ✅【h260201更新】:新增自动主题色(自动跟随ComfyUI主题色)👇
|
||||

|
||||
|
||||
#### ✅ 新版效果演示
|
||||
|
||||

|
||||

|
||||
|
||||
#### 如果觉得还可以,欢迎帮忙点下**⭐Star**,您的鼓励就是我最大的动力~
|
||||
|
||||
<details>
|
||||
<summary><b>⚠️关于新版ComfyUI Node2.0 特别说明...</b><i>(点击展开/收起)</i></summary>
|
||||
|
||||
⚠️注:关于多种对齐模式,可 ```尝试Alt键+对齐按钮``` 体验下新的```彩蛋功能```里的```全新对齐方式```。
|
||||
(注意```新版Node2.0测试版```的对齐相关功能目前还不够稳定,存在各种换算误差的累积偏移问题 (复现:可以来回开启/关闭ComfyUI原生的Node2.0测试版开关,就会发现,节点会累积误差,尺寸、坐标会不断的偏移。因此,暂时不作适配(虽然已经适配好Node2.0了,但还是```暂时移除适配Node2.0的逻辑```,后面```稍微稳定些会更新回来```)))
|
||||
|
||||
⚠️注:```💫全新上色系统``` ```💫人性化交互设计``` ```💫全新取色器(原创设计)``` 这三大板块均进行了不同程度的重构,且尽可能保留了```v1.0.4_rc版```的基础操作逻辑,由于平时较忙且业余开发(非专业程序猿),```仓促更新难免会有不少bug```,还请大家帮忙测试,欢迎提交Issue反馈,感谢各位支持和理解!
|
||||
</details>
|
||||
#### ✅【h260125更新】:新增ComfyUI菜单、新增i18n多语言适配 (现以集成到官方菜单页面)👇
|
||||

|
||||
|
||||
<details>
|
||||
<summary><b>⚠️旧版v1.0.4_rc UI界面...</b></summary>
|
||||
|
||||
**旧版v1.0.4_rc**: 只提供基础的节点对齐工具和固定的上色工具:
|
||||

|
||||

|
||||
</details>
|
||||
|
||||
## ✨ 核心功能 (已正式上线)
|
||||
#### 如果觉得还可以,欢迎帮忙点颗星**⭐Star**~
|
||||
|
||||
| 💫智能对齐系统 | 💫全新上色系统 | 💫人性化交互设计 | 💫全新取色器(原创设计) |
|
||||
## 📺️ 视频教程
|
||||
- ~~v1旧版教程~~:https://www.bilibili.com/video/BV1V7G9z9EcU
|
||||
- **v2新版教程(适配Node2.0)**:https://www.bilibili.com/video/BV1zeFZzLEvP
|
||||
|
||||
---
|
||||
|
||||
## 💫下一版更新预告(已实现) 待近期实测后发布:
|
||||

|
||||
|
||||
---
|
||||
|
||||
## ✨ 核心功能
|
||||
|
||||
| 💫Node2.0节点对齐系统 | 💫全新上色系统 | 💫人性化交互设计 | 💫全新取色器(原创设计) |
|
||||
|---------------------------|---------------------------|---------------------------|---------------------------|
|
||||
| ✅ 多种对齐模式 | 🖼️ 一键式颜色管理方案 | 🖱️ 悬浮式工具面板 | ✅ 原生JS/CSS实现全新取色系统 |
|
||||
| 📐 动态间距分布算法 | 🔗 实时联动显示取色效果 | 🧩 全新自定义配置 | 🎨 色卡模式: 彩色/灰度/自定义 |
|
||||
| 👥 多节点组协同操作 | 💾 自定义色卡收藏与恢复系统 | 💾 布局记忆与恢复系统 | 👏 色卡:随机/收藏/移除/以及手动添加 |
|
||||
| 🔥 **新版Node2.0节点算法** | 🖼️ 一键式颜色管理方案 | 🖱️ 悬浮式工具面板 | ✅ **原创实时预览调色/取色组件** |
|
||||
| 🔥 **原创Alt反向基准对齐算法** | 🔗 实时联动全屏取色器 | ⚙️ **ComfyUI系统菜单集成** | 🎨 色卡模式: 彩色/灰度/自定义 |
|
||||
| 📊 两套独立对齐分布算法 | 🎨 整体上色/仅标题上色模式 | 🔥 **ComfyUI主题自适应(9+1+1)** | 🧩 色卡:随机/收藏/移除/手动 |
|
||||
| 🧩 多种对齐分布模式 | 🧩 自定义色卡收藏与恢复系统 | 🌐 原生i18n多语言UI适配 | 🎨 预置色:色值特调优化 |
|
||||
|
||||
### 🎨 颜色管理模块
|
||||
#### 🎯 高级特性
|
||||
- **i18n多语言**:原生适配i18n多语言系统
|
||||
- **支持Node2.0节点**:全新支持ComfyUI Node2.0节点 【v2.1.13+新增】
|
||||
- **ComfyUI系统菜单集成**:可在ComfyUI系统菜单里进行相关设置(含高级设置项) 【v2.0.3_rc新增】
|
||||
- **自定义拖动及缩放**:可自由拖拽和缩放的操作面板
|
||||
- **AcBar联动模式**:与ComfyUI运行按钮联动拖移定位
|
||||
- **右键菜单**:丰富的设置选项和快捷操作
|
||||
- **节点批量选择**:多种选择工具和魔棒功能 (开发调试中...)
|
||||
- **节点批量重命名**:批量重命名节点功能 (开发调试中...)
|
||||
|
||||
#### 🎨 颜色管理模块
|
||||
- **两种上色模式**:仅节点标题上色 / 节点整体上色【v2.0.3_rc新增】
|
||||
- **七种预设颜色**:快速应用标准颜色到选中节点
|
||||
- **七组预设颜色**:快速应用标准颜色到选中节点
|
||||
- **灰度色板**:按住**Shift键**切换至灰度颜色模式【v2.0.1_rc新增】
|
||||
- **自定义色板**:按住**Alt键**进入自定义颜色模式【v2.0.1_rc新增】
|
||||
- **颜色收藏**:**Ctrl+Alt组合**锁定/解锁自定义颜色【v2.0.1_rc新增】
|
||||
- **随机颜色**:点击随机颜色按钮即可随机一种颜色【v2.0.1_rc新增】
|
||||
- **超级随机色**:按**Alt键** + **随机颜色按钮**可一次性随机7种颜色,并对选中节点实时随机上色【v2.0.1_rc新增】
|
||||
- **智能取色器**:内置适配ComfyUI节点的**HSB/RGB实时取色器**【v2.0.1_rc新增】(0依赖,纯原生js+css开发设计)
|
||||
- **实时预览节点调色**:实时预览颜色应用到节点的效果【v2.0.1_rc新增】(0依赖,纯原生js+css开发设计)
|
||||
- **实时取色器**:内置**全屏实时取色器**【v2.0.1_rc新增】(0依赖,纯原生js+css开发设计)
|
||||
- **节点调色实时预览组件**:原创基于节点的实时预览调色/取色组件【v2.0.1_rc新增】(0依赖,纯原生js+css开发设计)
|
||||
|
||||
### 🔧 节点对齐工具
|
||||
#### 🧩 节点对齐模块
|
||||
- **基础对齐**:左对齐、右对齐、顶部对齐、底部对齐
|
||||
- **居中分布**:垂直居中和水平居中
|
||||
- **等距分布**:水平等距分布和垂直等距分布
|
||||
- **尺寸统一**:等宽和等高调整
|
||||
- **智能模式**:按**Alt键** + 点击对应**对齐按钮**可实现反向基准对齐【v2.0.1_rc新增】
|
||||
|
||||
### 🎯 高级特性
|
||||
- **拖拽容器**:可自由拖拽和缩放的操作面板
|
||||
- **联动模式**:与ComfyUI运行按钮联动定位
|
||||
- **显示模式**:常驻显示或跟随选框自动显示
|
||||
- **右键菜单**:丰富的设置选项和快捷操作
|
||||
- **节点选择**:多种选择工具和魔棒功能 (开发调试中...)
|
||||
- **重命名工具**:批量重命名节点功能 (开发调试中...)
|
||||
- **反基准模式**:按**Alt键** + 点击对应**对齐按钮**可实现反向基准对齐【v2.0.1_rc新增】
|
||||
|
||||
---
|
||||
|
||||
## 🚀 安装方法
|
||||
#### 🚀 快速开始(使用指南)
|
||||
|
||||
### 方法一:Git克隆(推荐)
|
||||
```
|
||||
cd ComfyUI/custom_nodes
|
||||
git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
### 方法二:手动安装
|
||||
1. 打开本项目地址:https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
2. 下载插件压缩包(`<>Code` > `Download ZIP`)
|
||||
3. 解压到 `ComfyUI/custom_nodes` 目录 (注意正确目录层级应为:`ComfyUI/custom_nodes/ComfyUI_EasyKitHT_NodeAlignPro`)
|
||||
4. 重启ComfyUI
|
||||
|
||||
### 方法三:ComfyUI管理器
|
||||
1. 在ComfyUI Manager管理器搜索 "NodeAlignPro"(若没有,请先安装ComfyUI Manager)
|
||||
2. 找到`ComfyUI_EasyKitHT_NodeAlignPro`,点击安装
|
||||
3. 重启ComfyUI
|
||||
|
||||
### 补充:Git更新(需先手动导航至ComfyUI_EasyKitHT_NodeAlignPro目录内)
|
||||
```
|
||||
git fetch --all
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🚀 快速开始(简要指南)
|
||||
成功安装NodeAlignPro之后,基础操作(仅供参考)
|
||||
| 🎨按键组合 | 🎨模式说明 | 🎨功能描述 | 🧩按键组合 | 🧩模式说明 | 🧩功能描述 |
|
||||
|---------|---------|---------|---------|---------|---------|
|
||||
| **默认无按键** | 默认模式 | 七种预设颜色 | **默认无按键** | 默认模式 | 七种预设颜色 |
|
||||
| **Shift** | 灰度模式 | 黑白灰系列颜色 | **Shift** | ~~-暂无-~~ | ~~-暂无-~~ |
|
||||
| **Alt** | 自定义模式 | 自定义颜色管理 | **Alt** | 反向基准对齐 | 使用反向基准进行对齐操作 |
|
||||
| **Ctrl+Alt** | 锁定模式 | 锁定/解锁自定义颜色 | **Ctrl+Alt** | ~~-暂无-~~ | ~~-暂无-~~ |
|
||||
|
||||
1. **节点上色**:进入ComfyUI选中任一节点 > 点击NodeAlignPr面板(以下简称NAP面板)内任意**颜色按钮**即可(🔴🟠🟡🟢🔵🟣🟤,`清除颜色` `取色器` `随机颜色`);
|
||||
2. **自定义颜色**:选中任一节点 > 点击NAP面板内**取色器按钮**即可;
|
||||
@@ -108,150 +99,156 @@ git fetch --all
|
||||
└例:`左对齐` →选中多个节点 > 按`Alt键`+`左对齐按钮`,则以`最右侧节点`为`基准`进行`左对齐`(默认左对齐是以`最左侧节点`为`基准`进行`左对齐`);
|
||||
5. **拖动NAP面板**:无需选中任何节点 > 点击NAP面板左右两侧的按钮,出现四向箭头光标(↕↔)即可拖动
|
||||
5. **重置设置**:无需选中任何节点 > 在NAP面板内 >【鼠标右键】 >【一键重置】 即可;
|
||||
7. **进阶技巧**:请参阅下面**使用指南**👇。
|
||||
|
||||
<details>
|
||||
<summary><b>🖥️ 《使用指南》...</b></summary>
|
||||
|
||||
### 基本操作
|
||||
1. **启动插件**:ComfyUI启动后,插件自动加载
|
||||
2. **显示/隐藏**:通过右键菜单或快捷键控制显示
|
||||
3. **拖拽移动**:拖动标题栏或分隔线移动面板
|
||||
4. **缩放调整**:通过右键菜单调整UI缩放比例
|
||||
|
||||
### 颜色模式切换
|
||||
| 按键组合 | 模式说明 | 功能描述 |
|
||||
|---------|---------|---------|
|
||||
| **无按键** | 默认模式 | 七种预设颜色 |
|
||||
| **Shift** | 灰度模式 | 黑白灰系列颜色 |
|
||||
| **Alt** | 自定义模式 | 自定义颜色管理 |
|
||||
| **Ctrl+Alt** | 锁定模式 | 锁定/解锁自定义颜色 |
|
||||
|
||||
### 对齐操作
|
||||
1. 在ComfyUI画布上选择2个或更多节点
|
||||
2. 点击对齐面板上的相应按钮:
|
||||
- **左对齐**:所有节点向左对齐
|
||||
- **垂直居中**:所有节点垂直居中
|
||||
- **右对齐**:所有节点向右对齐
|
||||
- **顶部对齐**:所有节点向顶部对齐
|
||||
- **水平居中**:所有节点水平居中
|
||||
- **底部对齐**:所有节点向底部对齐
|
||||
|
||||
### 高级技巧
|
||||
- **Alt+对齐按钮**:使用"反向基准"进行对齐
|
||||
- **双击取色器预览**:切换节点整体/仅标题上色模式
|
||||
- **右键菜单**:访问完整设置和重置功能
|
||||
- **容器联动**:将操作面板与运行按钮联动定位
|
||||
|
||||
</details>
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
- **Q: 插件不显示怎么办?** →A: 检查是否正确安装到custom_nodes目录,重启ComfyUI,查看浏览器控制台是否有错误。进阶用户也可直接在控制台输入如下命令:
|
||||
|
||||
```
|
||||
// 清除NodeAlignPro插件相关数据并强制重载
|
||||
clear();const keysToRemove = ['NodeAlignProPosition', 'NodeAlignProRunButtonLink'];keysToRemove.forEach(key => localStorage.removeItem(key));console.log('NodeAlignPro已重载');window.location.reload(true);
|
||||
```
|
||||
|
||||
- **Q: 颜色无法应用到节点?** →A: 确保已选中节点,检查节点是否处于锁定状态,尝试刷新页面。
|
||||
- **Q: 对齐功能无效?** →A: 确保选中2个或更多节点,检查节点选择状态,尝试清除选择后重新选择。
|
||||
- **Q: 如何重置所有设置?** →A: 右键菜单 → "一键重置",或清除浏览器localStorage。
|
||||
- **Q: 如何显示插件操作日志?** →A: 直接输入控制台命令:``` document.getElementById('hDebugInfo_V2')?.style.setProperty('display', 'block', 'important'); ```
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ 技术特性
|
||||
## 🚀 插件安装
|
||||
|
||||
### 架构设计
|
||||
- **🌐原生开发**:仅使用原生JS+CSS从零实现
|
||||
- **🔒零依赖**:不依赖任何第三方框架/库或现有代码段<small style="color:#999">(仅在__init__.py中导入了必要的Python官方内置的OS模块)</small>
|
||||
- **📴全离线运行**:全本地化运行,不依赖任何网络资源,确保本地化私有部署的安全可靠性
|
||||
- **📄单文件特性**:单文件集中开发,虽整体略显冗长,但方便集中管理,和调试维护<small style="color:#999">(哪怕只用Windows自带的记事本,事实上很多次的小改动就是直接用记事本微调测试的)</small>
|
||||
- **🧩模块化设计**:颜色、对齐、UI控制器分离<small style="color:#999">(在单文件基础上做到模块分离,在一定程度上方便后续开发)</small>
|
||||
- **🏷️规范化命名**:自定义了一套自己风格的命名,做明显区分
|
||||
- **💻响应式布局**:自适应不同屏幕分辨率
|
||||
- **⚡性能优化**:必要环节的节流和防抖处理
|
||||
- **💾状态持久化**:保存用户设置到本地存储
|
||||
- **✅真开源/不混淆**:完整保留必要的注释和变量参数名,不混淆代码进行伪开源
|
||||
#### 方法一:ComfyUI Manager管理器(推荐)
|
||||
1. 在 **ComfyUI Manager** 管理器搜索 "**node2.0**"(是的,就这么简单,目前是唯一一个)
|
||||
👉 如果搜 "**node2.0**" 没有搜到:说明你的ComfyUI和Manager管理器没有更新到最新版本,请先更新**ComfyUI**和**Manager管理器**到最新版本;
|
||||
👉 如不想更新ComfyUI和Manager:请直接在旧版上搜索 "**Easykit**" 或 "**NodeAlign Pro**" 即可搜到。
|
||||

|
||||
|
||||
### 颜色系统
|
||||
- **HSB/RGB/HEX**:完整颜色空间支持
|
||||
- **实时预览**:节点SVG预览实时更新
|
||||
- **智能分配**:多节点颜色智能分配算法
|
||||
- **CSS变量**:统一主题颜色管理
|
||||
2. 找到`EasyKit-NodeAlign-Pro`,点击安装`(此方式为ComfyUI注册版插件:会自动生成ComfyUI官方标准生态的easykit-node-align目录)`
|
||||

|
||||
|
||||
### UI组件
|
||||
- **可拖拽容器**:支持边界检测和弹性回弹
|
||||
- **下拉菜单**:平滑动画和悬停交互
|
||||
- **滑块控件**:精确的颜色值调整
|
||||
- **图标系统**:SVG矢量图标渲染
|
||||
|
||||
<details>
|
||||
<summary><b>🖥️ 显示设置...</b></summary>
|
||||
3. 等待提示重启ComfyUI 即可使用
|
||||
|
||||
#### 方法二:Git克隆(推荐)
|
||||
1. 打开ComfyUI/custom_nodes目录,执行如下命令`(此方式为git版插件:会自动生成ComfyUI_EasyKitHT_NodeAlignPro目录)`:
|
||||
```
|
||||
// 显示模式
|
||||
- 常驻显示:始终显示操作面板
|
||||
- 跟随选框:选中2个以上节点时自动显示
|
||||
|
||||
// UI缩放
|
||||
- 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x
|
||||
git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>🔗 模式设置...</b></summary>
|
||||
|
||||
- 中国用户及无法访问github的用户请使用gitee镜像源:
|
||||
```
|
||||
// 拖拽方式
|
||||
- 解耦:独立拖拽操作面板
|
||||
- 联动:与运行按钮联动定位
|
||||
|
||||
// 工作模式
|
||||
- 对齐模式:基础对齐功能
|
||||
- 专业模式:高级选择工具
|
||||
git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>📁 NodeAlignPro文件结构...</b></summary>
|
||||
3. 重启ComfyUI 即可使用
|
||||
|
||||
#### 方法三:comfy install安装
|
||||
`(此方式为ComfyUI注册版插件:会自动生成ComfyUI官方标准生态的easykit-node-align目录)`
|
||||
```
|
||||
ComfyUI_EasyKitHT_NodeAlignPro/
|
||||
├── __init__.py
|
||||
├── README.md # English Documentation
|
||||
├── README_ZH.md # 中文说明文档
|
||||
├── LICENSE # 许可证文件
|
||||
├── pyproject.toml
|
||||
└── ArtsticH/ # 项目文件
|
||||
├── hNodeAlignPro.js # 主程序文件
|
||||
└── Example/
|
||||
├── NodeAlignPro_demo.json # 测试工作流
|
||||
└── NodeAlignPro_demo.png # 示例图片(内含测试工作流)
|
||||
comfy node install easykit-node-align
|
||||
```
|
||||
|
||||
</details>
|
||||
#### 方法四:Git手动安装
|
||||
1. 打开本项目地址:https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
2. 下载插件压缩包(`<>Code` > `Download ZIP`)
|
||||
3. 解压到 `ComfyUI/custom_nodes` 目录 (注意正确目录层级应为:`ComfyUI/custom_nodes/ComfyUI_EasyKitHT_NodeAlignPro`)
|
||||
4. 重启ComfyUI 即可使用
|
||||
|
||||
---
|
||||
|
||||
## 🚀 插件更新
|
||||
|
||||
#### 方法一:ComfyUI Manager管理器更新(推荐)
|
||||
1. 在 **ComfyUI Manager** 管理器搜索 "**node2.0**"(是的,就这么简单,目前是唯一一个)
|
||||

|
||||
2. 找到`EasyKit-NodeAlign-Pro`,点击安装`(此方式为ComfyUI注册版插件:会自动生成ComfyUI官方标准生态的easykit-node-align目录)`
|
||||

|
||||
3. 等待提示重启ComfyUI 即可使用
|
||||
|
||||
#### 方法一:Git更新(需先手动导航至ComfyUI_EasyKitHT_NodeAlignPro目录内)
|
||||
```
|
||||
git fetch --all && git reset --hard origin/main
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
#### Q: 如何开启/关闭【自动】主题色?
|
||||
→A: 直接点击ComfyUI左下角菜单> 🔥 NodeAlignPro> 🎨NodeAlignPro颜色预设(Color preset)> 使用ComfyUI主题配色(Use ComfyUI theme color)> **【开启/关闭】**;
|
||||

|
||||
|
||||
#### Q: 如何【自定义】主题色?
|
||||
→A: ...> 🔥 NodeAlignPro> 🎨NodeAlignPro颜色预设(Color preset)> 使用ComfyUI主题配色(Use ComfyUI theme color)> **【开启】**;
|
||||

|
||||
|
||||
#### Q: 如何切换语言?
|
||||
→A: ...> 🔥 NodeAlignPro> NodeAlignPro基本设置(Basic Settings)> **NodeAlignPro UI语言(Language)**;
|
||||
|
||||
#### Q: 如何在新版Node2.0模式下使用对齐/分布/上色功能?
|
||||
→A-方式1: 插件工具栏上右键> 工作模式(Work Mode)> Node2.0
|
||||

|
||||
→A-方式2: ...> 🔥 NodeAlignPro> NodeAlignPro基本设置(Basic Settings)> 工作模式 (Work Mode)> Node2.0;
|
||||
|
||||
#### Q: 我的插件开启了Node2.0模式,但点击对齐按钮后存在明显延迟?
|
||||
→A-方式1: 您当前使用的是传统Canvas节点。若需保持当前传统Canvas节点的使用环境,请切换插件的工作模式为传统模式:工作模式(Work Mode)> **传统对齐(AlignStd)**
|
||||
|
||||
→A-方式2: 您当前使用的是传统Canvas节点。若就是需要使用新版Node2.0模式,请手动开启ComfyUI的新版Node2.开关(详见下图)
|
||||

|
||||
|
||||
#### Q: 颜色无法应用到节点?→A: 确保已选中节点,检查节点是否处于锁定状态,尝试刷新页面;
|
||||
|
||||
#### Q: 对齐功能无效?→A: 确保选中2个或更多节点,检查节点选择状态,尝试清除选择后重新选择;
|
||||
|
||||
#### Q: 如何重置所有设置?
|
||||
→A: 右键菜单 → "一键重置",或ComfyUI左下角菜单> 🔥 NodeAlignPro> Z开发人员选项(Developer Options)> ⚠强制重置NodeAlignPro插件;
|
||||
|
||||
#### Q: 插件不显示怎么办?
|
||||
→A: 直接点击ComfyUI左下角菜单> 🔥 NodeAlignPro> Z开发人员选项(Developer Options)> ⚠强制重置NodeAlignPro插件。
|
||||

|
||||
```↑若【强制重置】后仍未生效,请使用ComfyUI Manager检查插件是否正确安装,若未安装请搜索"NodeAlign Pro"重新安装,若安装请尝试FIX修复或尝试更新Update。```
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 🔄 更新日志
|
||||
|
||||
### v2.0.3_rc (最新发布)
|
||||
- 重构颜色转换逻辑
|
||||
- 重构屏幕取色功能
|
||||
- 修订并完善Readme文档
|
||||
- 修复若干bug
|
||||
### v2.1.18 (最新版本) (2025-03-05)
|
||||
- **新增下一版更新预告(新增一个更高效菜单交互模式:类Maya式的热盒菜单)** 💫
|
||||
- 微调i18n多语言适配, 修复个别翻译错误
|
||||
- 修订并完善Readme文档(中英双语)
|
||||
|
||||
<details>
|
||||
<summary><b>📄 历史版本...</b></summary>
|
||||
|
||||
### v2.1.17 (2025-02-09)
|
||||
- 微调i18n多语言适配 [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- 完善v2.1版视频教程(Node2.0) →📺️[视频教程](https://www.bilibili.com/video/BV1zeFZzLEvP)
|
||||
- 修订并完善Readme文档(中英双语)
|
||||
|
||||
### v2.1.14 【🔥2.1正式版发布(完美适配Node2.0)】 (2025-02-01)
|
||||
- **重大更新:** 新增自动主题色(自动跟随ComfyUI主题色) [#5](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/5)
|
||||
- 全量新增基于ComfyUI Node2.0的对齐算法,同时保留并兼容原有的传统Canvas对齐模式
|
||||
- 新增基于Node2.0的对齐模式(可在右键菜单或ComfyUI菜单更改工作模式为"Node2.0"进行使用) [#8](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/8)
|
||||
- 重构ComfyUI菜单
|
||||
- 优化右键菜单逻辑
|
||||
- 优化i18n多语言适配 [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- 修复若干个可能存在非致命性错误的语法问题
|
||||
- 修复若干bug
|
||||
- 修订并完善Readme文档
|
||||
|
||||
##### v2.1.12 (2025-01-25)
|
||||
- 优化ComfyUI菜单
|
||||
- 优化i18n多语言适配 [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- 优化基于Node2.0的对齐算法(少量测试性重构)
|
||||
- 修订并完善Readme文档
|
||||
- 修复若干bug
|
||||
|
||||
##### v2.1.0 【🔥2.1预览版发布】
|
||||
- 优化ComfyUI菜单、新增i18n多语言适配 [🗩7](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions/7)
|
||||
- 优化部分参数
|
||||
- 修订并完善Readme文档
|
||||
- 修复若干bug [#9](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/9)
|
||||
|
||||
##### v2.0.3_rc (2025-12-30)
|
||||
- 新增ComfyUI菜单(集成到官方菜单页面)
|
||||
- 重构颜色转换逻辑
|
||||
- 重构屏幕取色功能 [#3](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/3)
|
||||
- 修订并完善Readme文档
|
||||
- 修复若干bug [#4](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/4)
|
||||
|
||||
##### v2.0.2_rc (2025-12-22)
|
||||
- 完善新版(v2.0.3_rc)界面提示
|
||||
- 修复了一些bug
|
||||
- 重新编些md教程文档(中英双语)
|
||||
|
||||
##### v2.0.1_rc (2025-12-22)【2.0版发布】
|
||||
##### v2.0.1_rc (2025-12-22)【🔥2.0版发布】
|
||||
- 新增Shift/Alt/Ctrl组合键模式
|
||||
- 改进取色器性能和稳定性
|
||||
- 添加节点预览功能
|
||||
@@ -260,7 +257,7 @@ ComfyUI_EasyKitHT_NodeAlignPro/
|
||||
##### 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)【1.0版发布】
|
||||
##### v1.0.1_rc (2025-04-29)【🔥1.0版发布】
|
||||
- 初始版本发布
|
||||
- 完整的对齐和颜色功能
|
||||
- 可拖拽容器系统
|
||||
@@ -268,7 +265,7 @@ ComfyUI_EasyKitHT_NodeAlignPro/
|
||||
|
||||
</details>
|
||||
<details>
|
||||
<summary><b>📄 历史更新日志...</b></summary>
|
||||
<summary><b>📄 历史更新日志 (旧版)...</b></summary>
|
||||
|
||||
```
|
||||
v2.0.2_rc 8a12160: 🔥NodeAlignPro版本大更新,优化文件结构(全新UI, 更全的节点上色系统)→详见readme文档
|
||||
@@ -296,12 +293,20 @@ v1.0.1_rc 2926b82: README修改
|
||||
----------------
|
||||
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.3_rc @license GPL-3.0
|
||||
# @see https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
/**
|
||||
* @Artstich_Example
|
||||
* @name easykit-node-align (ComfyUI Plugin)
|
||||
* @description Node2.0-based professional alignment & real-time node color picker - innovative first support: A must-have plugin for managing node layout and color schemes in ComfyUI. Features a real-time color picker, alignment, 7 preset colors, grayscale/custom modes, and one-click reverse alignment.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/nodes/easykit-node-align
|
||||
* @see https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @see https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @installCommand comfy node install easykit-node-align
|
||||
* @installCommand git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @installCommand git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @created 2025-04-29 @date 2025-06-15 @lastUpdated 2026-01-28 @version v2.1.14 @license GPL-3.0
|
||||
* @copyright ©2012-2026, All rights reserved. Freely open to use, modify, and distribute in accordance with the GPL-3.0 license.
|
||||
*/
|
||||
```
|
||||
|
||||
</details>
|
||||
@@ -309,26 +314,29 @@ ca28236: Initial commit
|
||||
## 🤝 贡献指南
|
||||
|
||||
- 欢迎通过以下方式参与改进:
|
||||
```提交使用反馈```、`New Issue`、```改进代码逻辑```、`Fork & PR`、```完善多语言文档```、```分享你的创意节点布局```、```分享你的自定义色卡```
|
||||
[🥰提交使用反馈](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues)、[👾New Issue](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues)、[💬Discussions](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/discussions)、[📚️WiKi](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/wiki/)、
|
||||
以及Fork & PR、完善多语言文档、分享你的创意节点布局、分享你的自定义色卡……
|
||||
|
||||
## 👥 贡献者
|
||||
|
||||
- 开发: [👤@ArtsticH](https://github.com/ArtsticH)
|
||||
- 致谢: [👤@kakachiex2](https://github.com/kakachiex2)([👾issues-page](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/8))、[👤@aimposer](https://github.com/aimposer)([👾issues-page](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/3))、[👤@Rock-suv](https://github.com/Rock-suv)([👾issues-page](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/4))、[👤@JGDMGJAPT](https://github.com/jgdmgjapt) 、👤[@MAOMAOCHONGNE](https://github.com/MAOMAOCHONGNE)、[👤@BlissiraHQ](https://github.com/BlissiraHQ)...
|
||||
- v1(初版)功能及思路参考:[Tenney95/ComfyUI-NodeAligner](https://github.com/Tenney95/ComfyUI-NodeAligner)
|
||||
- 感谢上述及所有提供帮助的设计师、开发者、测试者、ComfyUI用户和反馈者
|
||||
|
||||
## 🌐 相关链接
|
||||
|
||||
- 🧩**NodeAlign Pro** 源1: [📥︎ Last Releases](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/releases) | 源2: [📥︎ Comfy registry](https://registry.comfy.org/zh/nodes/easykit-node-align) | 源3: [📥︎ Gitee镜像](https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)
|
||||
[👾问题反馈](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues) | [ComfyUI社区](https://github.com/comfyanonymous/ComfyUI) | [ComfyUI-Manager](https://github.com/Comfy-Org/ComfyUI-Manager/tree/main)
|
||||
|
||||
## 📜 许可证
|
||||
|
||||
- 本项目采用 **GPL-3.0** 许可证。详细信息请查看 [LICENSE](LICENSE) 文件。
|
||||
|
||||
## 👥 贡献者
|
||||
|
||||
- [ArtsticH](https://github.com/ArtsticH) - 项目创建者和主要开发者
|
||||
- ISISUES: [@JGDMGJAPT](https://github.com/jgdmgjapt) 、[@MAOMAOCHONGNE](https://github.com/MAOMAOCHONGNE)、[@aimposer](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/3)、[@Rock-suv](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues/4)...
|
||||
- 感谢所有提供帮助的设计师、开发者、测试者、ComfyUI用户和反馈者
|
||||
|
||||
## 🌐 相关链接
|
||||
|
||||
- [GitHub仓库](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro) | [问题反馈](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues) | [ComfyUI社区](https://github.com/comfyanonymous/ComfyUI) | [ComfyUI-Manager](https://github.com/Comfy-Org/ComfyUI-Manager/tree/main)
|
||||
- 作者视频教程链接:https://www.bilibili.com/video/BV1V7G9z9EcU (此链接为旧版`v1.0.4_rc`教程,新版v2.0.3_rc待录制)
|
||||
|
||||
---
|
||||
|
||||
👨💻 设计师业余开发的第一个小项目,欢迎反馈使用问题
|
||||
⚠️ 可能存在未测试场景的异常,请通过Issues报告(如果觉得还可以,欢迎帮忙**Star⭐**一下,您的鼓励就是我最大的动力~)欢迎有兴趣的小伙伴们一起加入!
|
||||
💻 设计师业余开发的第一个小项目
|
||||
⚠️ 可能存在未测试场景的异常,请通过Issues报告
|
||||
(如果觉得还可以,欢迎帮忙点颗星**Star⭐**,谢谢)欢迎有兴趣的小伙伴们一起加入!
|
||||
|
||||
<small style="color:#999">本文档更新于:2025年12月24日 01:51 @[ArtsticH](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)·2025</small>
|
||||
<small style="color:#999">本文档更新于:2026年02月09日 00:43 @[ArtsticH](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)·2026</small>
|
||||
@@ -1,7 +1,7 @@
|
||||
import os
|
||||
|
||||
# 版本定义
|
||||
# __version__ = "2.0.3"
|
||||
# __version__ = "2.1.18"
|
||||
# VERSION = __version__
|
||||
|
||||
# 节点注册
|
||||
@@ -14,6 +14,5 @@ WEB_DIRECTORY = os.path.join(os.path.dirname(__file__), 'web')
|
||||
|
||||
# 当前目录设置
|
||||
# current_directory = os.path.dirname(os.path.abspath(__file__))
|
||||
# NODE_JS = ["web/hNodeAlignPro.js"]
|
||||
# 加载多个JS文件,按顺序加载
|
||||
# NODE_JS = [ "hNodeAlignPro.js", "hNodeAlignPro_settings.js" ]
|
||||
NODE_JS = ["web/hLanguage.js", "web/hNodeAlignPro_cfg.js", "web/hNodeAlignPro.js"]
|
||||
# , "web/hNodeAlignPro_n2.js"
|
||||
|
Before Width: | Height: | Size: 220 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 226 KiB |
|
Before Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 166 KiB |
@@ -1,107 +0,0 @@
|
||||
{
|
||||
"3": {
|
||||
"inputs": {
|
||||
"seed": 2718281828459,
|
||||
"steps": 20,
|
||||
"cfg": 8,
|
||||
"sampler_name": "euler",
|
||||
"scheduler": "normal",
|
||||
"denoise": 1,
|
||||
"model": [
|
||||
"4",
|
||||
0
|
||||
],
|
||||
"positive": [
|
||||
"6",
|
||||
0
|
||||
],
|
||||
"negative": [
|
||||
"7",
|
||||
0
|
||||
],
|
||||
"latent_image": [
|
||||
"5",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "KSampler",
|
||||
"_meta": {
|
||||
"title": "K采样器"
|
||||
}
|
||||
},
|
||||
"4": {
|
||||
"inputs": {
|
||||
"ckpt_name": "v1-5-pruned-emaonly-fp16.safetensors"
|
||||
},
|
||||
"class_type": "CheckpointLoaderSimple",
|
||||
"_meta": {
|
||||
"title": "Checkpoint加载器(简易)"
|
||||
}
|
||||
},
|
||||
"5": {
|
||||
"inputs": {
|
||||
"width": 512,
|
||||
"height": 720,
|
||||
"batch_size": 1
|
||||
},
|
||||
"class_type": "EmptyLatentImage",
|
||||
"_meta": {
|
||||
"title": "空Latent图像"
|
||||
}
|
||||
},
|
||||
"6": {
|
||||
"inputs": {
|
||||
"text": "High - definition, realistic, young woman, natural facial features, smooth skin, clear eyes, natural mouth, good natural lighting, good lighting effects,",
|
||||
"clip": [
|
||||
"4",
|
||||
1
|
||||
]
|
||||
},
|
||||
"class_type": "CLIPTextEncode",
|
||||
"_meta": {
|
||||
"title": "CLIP文本编码"
|
||||
}
|
||||
},
|
||||
"7": {
|
||||
"inputs": {
|
||||
"text": "text, watermark,\nDistortion, disproportionate, incorrectly spliced limbs, incorrect fingers, multiple heads, one body with multiple heads, incomplete limbs, elongated body, blurry, deformed, objects covering the face, facial artifacts, obscured eyes, covered mouth, incorrect splicing, malformed fingers, extra limbs, elongated neck, blurry face, graphical glitches, textured face errors, lowres, watermark, cropped, out of frame, bad proportions, disfigured, mutated, extra arms, fused fingers, missing lips, malformed ears, irregular iris, skin blemishes, unnatural lighting, strange colors on face, glitchy effects near mouth or eyes, artificial lighting artifacts\n",
|
||||
"clip": [
|
||||
"4",
|
||||
1
|
||||
]
|
||||
},
|
||||
"class_type": "CLIPTextEncode",
|
||||
"_meta": {
|
||||
"title": "CLIP文本编码"
|
||||
}
|
||||
},
|
||||
"8": {
|
||||
"inputs": {
|
||||
"samples": [
|
||||
"3",
|
||||
0
|
||||
],
|
||||
"vae": [
|
||||
"4",
|
||||
2
|
||||
]
|
||||
},
|
||||
"class_type": "VAEDecode",
|
||||
"_meta": {
|
||||
"title": "VAE解码"
|
||||
}
|
||||
},
|
||||
"9": {
|
||||
"inputs": {
|
||||
"filename_prefix": "_hNodeAlignPro2",
|
||||
"images": [
|
||||
"8",
|
||||
0
|
||||
]
|
||||
},
|
||||
"class_type": "SaveImage",
|
||||
"_meta": {
|
||||
"title": "保存图像"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,7 +40,12 @@
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "CLIPTextEncode"
|
||||
"Node name for S&R": "CLIPTextEncode",
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": [
|
||||
"text, watermark,\nDistortion, disproportionate, incorrectly spliced limbs, incorrect fingers, multiple heads, one body with multiple heads, incomplete limbs, elongated body, blurry, deformed, objects covering the face, facial artifacts, obscured eyes, covered mouth, incorrect splicing, malformed fingers, extra limbs, elongated neck, blurry face, graphical glitches, textured face errors, lowres, watermark, cropped, out of frame, bad proportions, disfigured, mutated, extra arms, fused fingers, missing lips, malformed ears, irregular iris, skin blemishes, unnatural lighting, strange colors on face, glitchy effects near mouth or eyes, artificial lighting artifacts\n"
|
||||
@@ -87,7 +92,12 @@
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "VAEDecode"
|
||||
"Node name for S&R": "VAEDecode",
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": []
|
||||
},
|
||||
@@ -125,7 +135,12 @@
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "CLIPTextEncode"
|
||||
"Node name for S&R": "CLIPTextEncode",
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": [
|
||||
"High - definition, realistic, young woman, natural facial features, smooth skin, clear eyes, natural mouth, good natural lighting, good lighting effects,"
|
||||
@@ -161,7 +176,12 @@
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "EmptyLatentImage"
|
||||
"Node name for S&R": "EmptyLatentImage",
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": [
|
||||
512,
|
||||
@@ -171,6 +191,44 @@
|
||||
"color": "#555504",
|
||||
"bgcolor": "#6e6e1d"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"type": "SaveImage",
|
||||
"pos": [
|
||||
570,
|
||||
50
|
||||
],
|
||||
"size": [
|
||||
340,
|
||||
360
|
||||
],
|
||||
"flags": {},
|
||||
"order": 7,
|
||||
"mode": 0,
|
||||
"inputs": [
|
||||
{
|
||||
"name": "images",
|
||||
"type": "IMAGE",
|
||||
"link": 9
|
||||
}
|
||||
],
|
||||
"outputs": [],
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "SaveImage",
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": [
|
||||
"_hNodeAlignPro2"
|
||||
],
|
||||
"color": "#124c12",
|
||||
"bgcolor": "#2b652b"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "CheckpointLoaderSimple",
|
||||
@@ -216,10 +274,15 @@
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "CheckpointLoaderSimple"
|
||||
"Node name for S&R": "CheckpointLoaderSimple",
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": [
|
||||
"v1-5-pruned-emaonly-fp16.safetensors"
|
||||
"hMJ麦橘\\SD15\\MajicMixRealistic_麦橘写实_v7.safetensors"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -238,9 +301,15 @@
|
||||
"mode": 0,
|
||||
"inputs": [],
|
||||
"outputs": [],
|
||||
"properties": {},
|
||||
"properties": {
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": [
|
||||
"How to use 👉hNodeAlignPro2_demo ?\n----[DownLoad]-----------------------\ngithub:\thttps://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro\ngitee:\thttps://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro\n-------------------------------------\n----[Tutorial]-----------------------\nhttps://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/blob/main/README_ZH.md\nhttps://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/blob/main/README.md\nv1.1_rc(old)\t👉https://www.bilibili.com/video/BV1V7G9z9EcU\n-------------------------------------\n16:20 2025/05/21"
|
||||
"How to use 👉hNodeAlignPro2_demo ?\n----[DownLoad]-----------------------\ngithub:\thttps://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro\ngitee:\thttps://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro\n-------------------------------------\n----[Tutorial]-----------------------\nhttps://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/blob/main/README_ZH.md\nhttps://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/blob/main/README.md\nv1.1_rc(old)\t👉https://www.bilibili.com/video/BV1V7G9z9EcU\n-------------------------------------\n16:20 2025/05/21\n10:24 2026/01/25"
|
||||
],
|
||||
"color": "#432",
|
||||
"bgcolor": "#653"
|
||||
@@ -294,10 +363,15 @@
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "KSampler"
|
||||
"Node name for S&R": "KSampler",
|
||||
"ue_properties": {
|
||||
"widget_ue_connectable": {},
|
||||
"version": "7.5.2",
|
||||
"input_ue_unconnectable": {}
|
||||
}
|
||||
},
|
||||
"widgets_values": [
|
||||
2718281828459,
|
||||
2718281828450,
|
||||
"fixed",
|
||||
20,
|
||||
8,
|
||||
@@ -307,39 +381,6 @@
|
||||
],
|
||||
"color": "#23236a",
|
||||
"bgcolor": "#3c3c83"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"type": "SaveImage",
|
||||
"pos": [
|
||||
570,
|
||||
50
|
||||
],
|
||||
"size": [
|
||||
340,
|
||||
360
|
||||
],
|
||||
"flags": {},
|
||||
"order": 7,
|
||||
"mode": 0,
|
||||
"inputs": [
|
||||
{
|
||||
"name": "images",
|
||||
"type": "IMAGE",
|
||||
"link": 9
|
||||
}
|
||||
],
|
||||
"outputs": [],
|
||||
"properties": {
|
||||
"cnr_id": "comfy-core",
|
||||
"ver": "0.3.30",
|
||||
"Node name for S&R": "SaveImage"
|
||||
},
|
||||
"widgets_values": [
|
||||
"_hNodeAlignPro2"
|
||||
],
|
||||
"color": "#124c12",
|
||||
"bgcolor": "#2b652b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
@@ -420,19 +461,20 @@
|
||||
"config": {},
|
||||
"extra": {
|
||||
"ds": {
|
||||
"scale": 1.0610764609500007,
|
||||
"scale": 1.7088742511245865,
|
||||
"offset": [
|
||||
603.718669561933,
|
||||
257.211249467138
|
||||
789.1435745239633,
|
||||
399.4678757804318
|
||||
]
|
||||
},
|
||||
"frontendVersion": "1.34.9",
|
||||
"frontendVersion": "1.36.14",
|
||||
"ue_links": [],
|
||||
"VHS_latentpreview": false,
|
||||
"VHS_latentpreviewrate": 0,
|
||||
"VHS_MetadataImage": true,
|
||||
"VHS_KeepIntermediate": true,
|
||||
"workflowRendererVersion": "LG"
|
||||
"workflowRendererVersion": "LG",
|
||||
"links_added_by_ue": []
|
||||
},
|
||||
"version": 0.4
|
||||
}
|
||||
|
Before Width: | Height: | Size: 495 KiB After Width: | Height: | Size: 526 KiB |
@@ -1,26 +1,22 @@
|
||||
[project]
|
||||
name = "EasyKitHT NodeAlignPro"
|
||||
description = "Professional alignment & real-time node color picker. A must-have plugin for managing node layout and color schemes in ComfyUI. Features a real-time color picker, alignment, 7 preset colors, grayscale/custom modes, and one-click reverse alignment."
|
||||
version = "2.0.3"
|
||||
license = {file = "LICENSE"}
|
||||
name = "easykit-node-align"
|
||||
# name = "easykitht_nodealignpro"
|
||||
description = "Node2.0-based professional alignment & real-time node color picker - innovative first support: A must-have plugin for managing node layout and color schemes in ComfyUI. Features a real-time color picker, alignment, 7 preset colors, grayscale/custom modes, and one-click reverse alignment."
|
||||
version = "2.1.18"
|
||||
license = {file = "LICENSE"}
|
||||
|
||||
[project.urls]
|
||||
Repository = "https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro"
|
||||
# Used by Comfy Registry https://registry.comfy.org
|
||||
Documentation = "https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro#readme"
|
||||
"Bug Tracker" = "https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues"
|
||||
|
||||
# Manager优先识别部分
|
||||
# [tool.poetry]
|
||||
# name = "comfyui-node-align-pro"
|
||||
# version = "2.0.3"
|
||||
# description = "Professional alignment & real-time node color picker. A must-have plugin for managing node layout and color schemes in ComfyUI. Features a real-time color picker, alignment, 7 preset colors, grayscale/custom modes, and one-click reverse alignment."
|
||||
# authors = ["ArtsticH <art.hw@petalmail.com>"]
|
||||
# readme = "README.md"
|
||||
|
||||
# [build-system]
|
||||
# requires = ["poetry-core"]
|
||||
# build-backend = "poetry.core.masonry.api"
|
||||
|
||||
# Comfy注册信息
|
||||
[tool.comfy]
|
||||
PublisherId = "ArtsticH"
|
||||
DisplayName = "EasyKitHT NodeAlignPro"
|
||||
Icon = "web/hNodeAlignPro__hBtnY_barLOGO@8x.png"
|
||||
PublisherId = "artstich"
|
||||
DisplayName = "EasyKit-NodeAlign-Pro"
|
||||
# DisplayName = "ComfyUI_EasyKitHT_NodeAlignPro"
|
||||
Icon = "https://cdn.jsdelivr.net/gh/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro@main/web/hNodeAlignPro__LOGO_icon.svg"
|
||||
Banner = "https://cdn.jsdelivr.net/gh/ArtsticH/h-Readme-res@main/ComfyUI_EasyKitHT_NodeAlignPro/web/h_NodeAlignPro_v2__UI__Mgr_banner.png"
|
||||
includes = []
|
||||
# "requires-comfyui" = ">=1.0.0" # ComfyUI version compatibility
|
||||
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
/**
|
||||
* @Artstich_Example
|
||||
* @name easykit-node-align (ComfyUI Plugin)
|
||||
* @description Node2.0-based professional alignment & real-time node color picker - innovative first support: A must-have plugin for managing node layout and color schemes in ComfyUI. Features a real-time color picker, alignment, 7 preset colors, grayscale/custom modes, and one-click reverse alignment.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/nodes/easykit-node-align
|
||||
* @see https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @see https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @installCommand comfy node install easykit-node-align
|
||||
* @installCommand git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @installCommand git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @created 2025-04-29 @date 2025-06-15 @lastUpdated 2026-03-05 @version v2.1.18 @license GPL-3.0
|
||||
* @copyright ©2012-2026, All rights reserved. Freely open to use, modify, and distribute in accordance with the GPL-3.0 license.
|
||||
*/
|
||||
|
||||
// 本插件全局默认官方语言为中文(cn)。国际友人可自行切换英文,支持'auto'以跟随浏览器/ComfyUI的语言设置
|
||||
// This plugin uses Chinese (cn) as the global default language. International users can switch to English. The 'auto' setting is also supported to follow the browser or ComfyUI's language preference.
|
||||
|
||||
// NodeAlignPro 全局国际化配置
|
||||
// 在 `window.hLanguage` 对象上提供 `t(key)` 辅助函数和 `lang` 属性(支持getter/setter)
|
||||
(function(){
|
||||
'use strict';
|
||||
const data = {
|
||||
NodeAlignPro_Title: {cn: 'Node Align Pro', en: 'Node Align Pro'},
|
||||
// 头部/菜单/标签文字
|
||||
Menu_LogoTitle: {cn: '菜单栏 LOGO', en: 'Menu Logo'},
|
||||
Title_Search: {cn: '搜索节点 Github@ArtsticH...', en: 'Search nodes Github@ArtsticH...'},
|
||||
Aria_ModeSwitch: {cn: '模式切换', en: 'Mode Switch'},
|
||||
Aria_Menu: {cn: '菜单', en: 'Menu'},
|
||||
Label_Align: {cn: '对齐:', en: 'Align:'},
|
||||
Label_Distribute: {cn: '分布:', en: 'Distribute:'},
|
||||
Label_Mode: {cn: '模式', en: 'Mode'},
|
||||
Label_Size: {cn: '尺寸:', en: 'Size:'},
|
||||
Label_Select: {cn: '选择:', en: 'Select:'},
|
||||
Aria_SelectMode: {cn: '框选模式', en: 'Selection Mode'},
|
||||
Aria_GroupMode: {cn: '群组模式', en: 'Group Mode'},
|
||||
Aria_Separator: {cn: '分隔线', en: 'Separator'},
|
||||
Aria_DragMove: {cn: '按住拖移位置', en: 'Hold to drag/move'},
|
||||
ColorPicker_Title: {cn: 'hColorPicker™', en: 'hColorPicker™'},
|
||||
ColorPicker_HexLabel: {cn: '十六进制:', en: 'Hex:'},
|
||||
ColorPicker_RGBLabel: {cn: 'RGB:', en: 'RGB:'},
|
||||
ColorPicker_NodeMode: {cn: '整体色', en: 'Whole Color'},
|
||||
ColorPicker_NodeModeTip: {cn: '👆双击切换上色模式:', en: '👆Double-click to toggle color mode:'},
|
||||
Panel_TestTitle: {cn: 'Node 2.0 Alignment Test', en: 'Node 2.0 Alignment Test'},
|
||||
ColorPicker_HueLabel: {cn: '色相(H):', en: 'Hue (H):'},
|
||||
ColorPicker_SatLabel: {cn: '饱和(S):', en: 'Sat (S):'},
|
||||
ColorPicker_BriLabel: {cn: '亮度(B):', en: 'Bri (B):'},
|
||||
Btn_LeftAlign: {cn: '左对齐', en: 'Left Align'},
|
||||
Btn_RightAlign: {cn: '右对齐', en: 'Right Align'},
|
||||
Btn_TopAlign: {cn: '顶对齐', en: 'Top Align'},
|
||||
Btn_BottomAlign: {cn: '底对齐', en: 'Bottom Align'},
|
||||
Btn_HCenter: {cn: '水平居中', en: 'H Center'},
|
||||
Btn_VCenter: {cn: '垂直居中', en: 'V Center'},
|
||||
Btn_DistH: {cn: '水平等距分布', en: 'Dist H'},
|
||||
Btn_DistV: {cn: '垂直等距分布', en: 'Dist V'},
|
||||
Btn_EqualWidth: {cn: '等宽', en: 'Equal Width'},
|
||||
Btn_EqualHeight: {cn: '等高', en: 'Equal Height'},
|
||||
Picker_ScreenPickUnsupported: {cn: '浏览器不支持屏幕取色功能,请使用最新版Chrome/Edge浏览器', en: 'Browser does not support EyeDropper API; use latest Chrome/Edge.'},
|
||||
Pick_NoSelection: {cn: '未选中任何节点', en: 'No nodes selected'},
|
||||
Setting_ShowOperationLog: {cn: '显示操作日志 (Show Operation Log)', en: 'Show Operation Log'},
|
||||
Setting_ForceReset: {cn: '⚠强制重置NodeAlignPro插件 (Force reset NodeAlignPro plugin)', en: '⚠Force reset NodeAlignPro plugin'},
|
||||
hSelKit_DragMode: {cn: '拖拽方式:', en: 'Drag Mode'},
|
||||
hSelKit_UIscale: {cn: 'UI缩放:', en: 'UI Scale'},
|
||||
hSelKit_WorkMode: {cn: '工作模式:', en: 'Work Mode'},
|
||||
hSelKit_DisplayMode: {cn: '显示模式:', en: 'Display Mode'},
|
||||
Setting_DragMode: {cn: '拖拽方式 (Drag Mode)', en: 'Drag Mode'},
|
||||
Setting_UIScale: {cn: 'UI缩放 (UI Scale)', en: 'UI Scale'},
|
||||
Setting_WorkMode: {cn: '工作模式 (Work Mode):可开启新版Node2.0对齐模式', en: 'Work Mode'},
|
||||
hTooltip_WorkMode: { cn: '工作模式:切换插件工作模式,可开启新版Node2.0对齐模式', en: 'Work Mode: Switch plugin working mode (sync with right-click menu). Enable new Node2.0 alignment mode.' },
|
||||
Setting_DisplayMode: {cn: '显示模式 (Display Mode)', en: 'Display Mode'},
|
||||
Setting_AlignBtnColor: {cn: '对齐按钮颜色 (Align Button Color)', en: 'Align Button Color'},
|
||||
Setting_ToolbarBgColor: {cn: '工具栏背景色 (Toolbar Background Color)', en: 'Toolbar Background Color'},
|
||||
Setting_ToolbarColor_Auto: {cn: '使用ComfyUI主题配色(Use ComfyUI theme color)', en: 'Use ComfyUI theme color'},
|
||||
Setting_ToolbarColor_Auto1: {cn: '若开启,将ComfyUI主题配色,下方手动设置的颜色将无效(If enabled, ComfyUI theme color will be used, and manual color setting will be ignored)', en: 'If enabled, ComfyUI theme color will be used, and manual color setting will be ignored'},
|
||||
Setting_ToolbarOpacity: {cn: '工具栏透明度 (Toolbar Opacity)', en: 'Toolbar Opacity'},
|
||||
Setting_NewVersionTips: {cn: '新版说明 (New Version Tips)', en: 'New Version Tips'},
|
||||
Setting_ColorApplyMode: {cn: '上色模式 (Color Apply Mode)', en: 'Color Apply Mode'},
|
||||
Setting_Language: {cn: 'NodeAlignPro UI语言 (Language)', en: 'NodeAlignPro UI Language'},
|
||||
// 选项标签文字
|
||||
Option_Lang_CN: {cn: '中文', en: '中文'},
|
||||
Option_Lang_EN: {cn: 'English', en: 'English'},
|
||||
hSelKit_DragSplit: {cn: '解 耦', en: 'Split'},
|
||||
hSelKit_DragSplit2: {cn: '解 耦(Split)', en: 'Split'},
|
||||
hSelKit_DragLink: {cn: '联 动', en: 'Link'},
|
||||
hSelKit_DragLink2: {cn: '联 动(Link)', en: 'Link'},
|
||||
|
||||
|
||||
hSelKit_APBall: {cn: 'AP球', en: 'AP Ball'},
|
||||
hSelKit_StdBar: {cn: '标 准', en: 'Standard'},
|
||||
hSelKit_AlignAuto: {cn: '自动', en: 'Auto'},
|
||||
hSelKit_AlignAuto2: {cn: '自动(Auto)', en: 'Auto'},
|
||||
hSelKit_ColorBar: {cn: '色 卡', en: 'ColorBar'},
|
||||
hSelKit_ColorBar2: {cn: '色卡(ColorBar)', en: 'ColorBar'},
|
||||
hSelKit_AlignBar: {cn: '传统对齐', en: 'AlignStd'},
|
||||
hSelKit_AlignBar2: {cn: '传统对齐(AlignStd)', en: 'AlignStd'},
|
||||
hSelKit_Node2: {cn: 'Node2.0', en: 'Node2.0'},
|
||||
hSelKit_ProBar: {cn: '专 业', en: 'Pro'},
|
||||
|
||||
hSelKit_Always: {cn: '常驻显示', en: 'Always'},
|
||||
hSelKit_Always2: {cn: '常驻显示(Always)', en: 'Always'},
|
||||
hSelKit_Follow: {cn: '跟随选框', en: 'Follow+'},
|
||||
hSelKit_Follow2: {cn: '跟随选框(Follow+)', en: 'Follow+'},
|
||||
hNodePreview_Tips: {cn: '👆双击切换上色模式:', en: '👆Dbl-Click this: '},
|
||||
Option_Color_Whole: {cn: '整体色', en: 'Whole Color'},
|
||||
Option_Color_Whole2: {cn: '整体色(Whole)', en: 'Whole Color'},
|
||||
Option_Color_TitleOnly: {cn: '仅标题', en: 'Title Only'},
|
||||
Option_Color_TitleOnly2: {cn: '仅标题(Title)', en: 'Title Only'},
|
||||
|
||||
hDebug_Tips: {
|
||||
cn: '<font color ="#70A3F3"><strong>v2.1.17新功能</strong></font>:<br>	0. <span style="color:#70A3F3;">启用自动主题色</span>:左下角ComfyUI设置>🔥NodeAlignPro>【使用ComfyUI主题配色】<br>	1. <span style="color:#70A3F3;">启用新版Node2.0模式</span>:右键菜单>工作模式>【Node2.0】<br>	2. <span style="color:#70A3F3;">高级对齐</span>:Alt+对齐按钮:对齐到“反向基准”节点<br>	3. <span style="color:#70A3F3;">色卡切换</span>:按Shift、Alt、Ctrl Alt切换不同色卡模式...<br>________________<br>	4. <span style="color:#70A3F3;">Switch English</span>:ComfyUI Menu> Language>【English】<br>________________<br>^_^(右键菜单><font color ="#70A3F3">新版说明</font>隐藏本提示)',
|
||||
en: '<font color="#70A3F3"><strong>v2.1.17 New Features</strong></font>:<br>	0. <span style="color:#70A3F3;">Auto-Theme-Color</span>: Bottom left Settings > 🔥NodeAlignPro > 【Use ComfyUI Theme Colors】<br>	1. <span style="color:#70A3F3;">Node2.0 Mode</span>: Right-click Menu > Work Mode > 【Node2.0】<br>	2. <span style="color:#70A3F3;">Advanced Alignment</span>: Alt + Align Button: Align to "Reverse Reference" Node<br>	3. <span style="color:#70A3F3;">Color Palette Switching</span>: Press Shift, Alt, Ctrl+Alt to switch different color palette modes...<br>________________<br>	4. <span style="color:#70A3F3;">切换中文</span>:ComfyUI菜单>NodeAlignPro UI语言 (Language)>【中文】<br>________________<br>^_^ (Right-click Menu > <font color="#70A3F3">NewTips</font> to hide this tip)'
|
||||
},
|
||||
Aria_ClearColor: {cn: '清除颜色', en: 'Clear Color'},
|
||||
Aria_Pick: {cn: '取色', en: 'Pick Color'},
|
||||
Aria_RandomColor: {cn: '随机颜色', en: 'Random Color'},
|
||||
Aria_ScreenPick: {cn: '屏幕取色', en: 'Screen Pick'},
|
||||
Aria_Prev: {cn: '上个', en: 'Previous'},
|
||||
Aria_Next: {cn: '下个', en: 'Next'},
|
||||
Select_SameColor: {cn: '相同颜色', en: 'Same Color'},
|
||||
Select_SameName: {cn: '相同名称', en: 'Same Name'},
|
||||
Select_SameSize: {cn: '相同尺寸', en: 'Same Size'},
|
||||
Select_DefaultColor: {cn: '默认色', en: 'Default Color'},
|
||||
Select_Colored: {cn: '已上色', en: 'Colored'},
|
||||
Select_State: {cn: '选择状态', en: 'Select State'},
|
||||
Tool_MagicWand: {cn: '魔棒', en: 'Magic Wand'},
|
||||
Aria_Rename: {cn: '重命名', en: 'Rename'},
|
||||
hMenu_ResetAll: {cn: '快速重置', en: 'FastReset'},
|
||||
hMenu_BugReport: {cn: 'bug反馈', en: 'Bug2Issue'},
|
||||
hMenu_Guide: {cn: '使用教程', en: 'Guide'},
|
||||
hMenu_NewTips: {cn: '新版说明', en: 'New Tips'},
|
||||
// 按需添加更多键值
|
||||
};
|
||||
|
||||
const state = { lang: 'cn' };
|
||||
|
||||
// 从ComfyUI或浏览器检测实际使用的语言
|
||||
function detectLang() {
|
||||
try {
|
||||
// 优先尝试ComfyUI应用级别的设置(如果可用)
|
||||
if (window.app && window.app.ui && typeof window.app.ui.settings?.getSettingValue === 'function') {
|
||||
const v = window.app.ui.settings.getSettingValue('language') || window.app.ui.settings.getSettingValue('lang');
|
||||
if (v && typeof v === 'string') {
|
||||
const lv = v.toLowerCase();
|
||||
if (lv.startsWith('en')) return 'en';
|
||||
if (lv.startsWith('zh')) return 'cn';
|
||||
}
|
||||
}
|
||||
// 回退到浏览器语言设置
|
||||
const nav = (navigator && (navigator.language || navigator.userLanguage || '')).toLowerCase();
|
||||
if (nav.startsWith('en')) return 'en';
|
||||
if (nav.startsWith('zh')) return 'cn';
|
||||
} catch (e) { /* 忽略 */ }
|
||||
return 'cn';
|
||||
}
|
||||
|
||||
// 简单的翻译函数:t(key)
|
||||
function t(key) {
|
||||
if (!key) return '';
|
||||
const entry = data[key];
|
||||
if (!entry) return key;
|
||||
const langToUse = (state.lang === 'auto') ? detectLang() : (state.lang || 'cn');
|
||||
return entry[langToUse] || entry.cn || Object.values(entry)[0];
|
||||
}
|
||||
|
||||
// 增强的翻译函数:支持HTML标签和换行符
|
||||
function tHtml(key) {
|
||||
if (!key) return '';
|
||||
const entry = data[key];
|
||||
if (!entry) return key;
|
||||
const langToUse = (state.lang === 'auto') ? detectLang() : (state.lang || 'cn');
|
||||
let text = entry[langToUse] || entry.cn || Object.values(entry)[0];
|
||||
|
||||
if (!text) return '';
|
||||
|
||||
// 处理换行符:将\n转换为<br>
|
||||
text = text.replace(/\n/g, '<br>');
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
// 将API暴露在window对象上
|
||||
window.hLanguage = {
|
||||
t,
|
||||
tHtml, // 新增支持HTML的翻译函数
|
||||
data,
|
||||
getLang() { return state.lang; },
|
||||
setLang(l) { state.lang = (l === 'auto') ? 'auto' : ((l === 'en') ? 'en' : 'cn'); return state.lang; },
|
||||
detectLang,
|
||||
// 通过键值(data-i18n属性)翻译DOM元素文本内容的辅助函数
|
||||
applyToDOM(root = document) {
|
||||
try {
|
||||
// 翻译textContent / placeholder / value属性
|
||||
// 跳过仅需翻译属性(data-i18n-attr)的元素
|
||||
root.querySelectorAll('[data-i18n]').forEach(el => {
|
||||
if (el.hasAttribute('data-i18n-attr')) return; // 保留SVG/图标内容不翻译
|
||||
const key = el.getAttribute('data-i18n');
|
||||
if (!key) return;
|
||||
|
||||
// 检查是否需要HTML支持
|
||||
const useHtml = el.hasAttribute('data-i18n-html');
|
||||
const text = useHtml ? tHtml(key) : t(key);
|
||||
|
||||
if (!text) return;
|
||||
if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
|
||||
el.placeholder = text;
|
||||
if (el.type === 'button' || el.type === 'submit') el.value = text;
|
||||
} else {
|
||||
if (useHtml) {
|
||||
// 使用innerHTML来支持HTML标签
|
||||
el.innerHTML = text;
|
||||
} else {
|
||||
// 使用textContent保持原有行为
|
||||
el.textContent = text;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 通过data-i18n-attr属性翻译aria-label、title等属性
|
||||
root.querySelectorAll('[data-i18n][data-i18n-attr]').forEach(el => {
|
||||
try {
|
||||
const key = el.getAttribute('data-i18n');
|
||||
const attrName = el.getAttribute('data-i18n-attr');
|
||||
if (!key || !attrName) return;
|
||||
|
||||
// 检查是否需要HTML支持
|
||||
const useHtml = el.hasAttribute('data-i18n-html');
|
||||
const text = useHtml ? tHtml(key) : t(key);
|
||||
|
||||
if (!text) return;
|
||||
el.setAttribute(attrName, text);
|
||||
} catch (ee) { /* 忽略单个元素的翻译错误 */ }
|
||||
});
|
||||
} catch (e) { console.warn('hLanguage.applyToDOM failed:', e); }
|
||||
}
|
||||
};
|
||||
|
||||
// DOM内容加载完成后自动应用翻译,更新所有带data-i18n属性的元素
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.hLanguage.applyToDOM(document);
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => window.hLanguage.applyToDOM(document), 50);
|
||||
}
|
||||
})();
|
||||
|
||||
export default window.hLanguage;
|
||||
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #6b6b70;
|
||||
}
|
||||
|
||||
.cls-1, .hBtn_2 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
|
||||
.hBtn_2 {
|
||||
fill: #18181b;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="NodeAlignPro">
|
||||
<g>
|
||||
<rect class="hBtn_2" width="400" height="400" rx="50" ry="50"/>
|
||||
<g>
|
||||
<path class="cls-1" d="M325,62.5c6.9,0,12.5,5.6,12.5,12.5v112.5c0,44-32.62,80.5-75,86.5v-12.1c0-7.5,4.83-13.86,11.74-16.77,22.46-9.45,38.26-31.71,38.26-57.63v-95.24c0-1.93-1.82-3.45-3.7-3.03-33.55,7.45-58.8,37.46-58.8,73.27v175h-25v-175c0-55.23,44.77-100,100-100h0Z"/>
|
||||
<path class="cls-1" d="M87.5,253.97v83.53s25,0,25,0v-61.13c0-1.89-.9-3.64-2.4-4.8-7.08-5.49-13.4-11.79-18.9-18.81-1.24-1.58-3.7-.79-3.7,1.21Z"/>
|
||||
<path class="cls-1" d="M100,62.5h0c-6.9,0-12.5,5.6-12.5,12.5v112.5c0,23.75,9.5,45.37,25,61.12,13.13,13.5,30.5,22.62,50,25.37v-12.1c0-7.5-4.83-13.86-11.74-16.77-22.46-9.45-38.26-31.71-38.26-57.63v-95.24c0-1.93,1.82-3.45,3.7-3.03,33.55,7.45,58.8,37.46,58.8,73.27v175s25,0,25,0v-175c0-55.23-44.77-100-100-100Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,461 @@
|
||||
/**
|
||||
* @Artstich_Example
|
||||
* @name easykit-node-align (ComfyUI Plugin)
|
||||
* @description Node2.0-based professional alignment & real-time node color picker - innovative first support: A must-have plugin for managing node layout and color schemes in ComfyUI. Features a real-time color picker, alignment, 7 preset colors, grayscale/custom modes, and one-click reverse alignment.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/nodes/easykit-node-align
|
||||
* @see https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @see https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
* @installCommand comfy node install easykit-node-align
|
||||
* @installCommand git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @installCommand git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
* @created 2025-04-29 @date 2025-06-15 @lastUpdated 2026-02-02 @version v2.1.15 @license GPL-3.0
|
||||
* @copyright ©2012-2026, All rights reserved. Freely open to use, modify, and distribute in accordance with the GPL-3.0 license.
|
||||
*/
|
||||
|
||||
import { app } from "../../scripts/app.js";
|
||||
|
||||
// 简单的国际化助手,当hLanguage未就绪时回退到提供的中文文本
|
||||
function h_i18n(key, fallback) { try { return window.hLanguage && typeof window.hLanguage.t === 'function' ? window.hLanguage.t(key) : (fallback || key); } catch (e) { return fallback || key; } }
|
||||
|
||||
// 辅助函数:安全地调用存在的方法,否则存储待处理的值
|
||||
function __hNodeAlignPro_safeCall(target, methodName, keyForPending, value) {
|
||||
try { if (target && typeof target[methodName] === 'function') return target[methodName](value), true; } catch (e) { console.warn(`[NodeAlignPro 设置模块] 调用 ${methodName} 失败:`, e); }
|
||||
try { window.__hNodeAlignPro_pendingSettings = window.__hNodeAlignPro_pendingSettings || {}; window.__hNodeAlignPro_pendingSettings[keyForPending] = value; console.info(`[NodeAlignPro 设置模块] 挂起设置 ${keyForPending}=${value},等待主模块处理`); } catch (e) { /* 忽略 */ } // 存储待处理值供主模块稍后获取
|
||||
return false;
|
||||
}
|
||||
|
||||
// 【前景色】的选择器(--color-muted)
|
||||
let hAutoTheme__FgColor = [
|
||||
'#hCPr__nodePreviewTips', // ID选择器
|
||||
'.hCPr__valueLabel', // 类选择器
|
||||
'.hSelKit-label', //右键菜单标签文本
|
||||
'.copy-btn', //取色器复制图标
|
||||
'.hCPr__hsbBar_sliderLabel' //取色器hsb滑块标签
|
||||
];
|
||||
|
||||
// 【背景色】的选择器(--comfy-menu-bg)
|
||||
let hAutoTheme__BgColor = [
|
||||
'.Artstich_hColorPicker',
|
||||
'#h2__hNodeAlignPro',
|
||||
'#h6__hMenu',
|
||||
'.hCPr__sliderValue', // HSB颜色文本框
|
||||
'.hValue-input', //取色器文本框
|
||||
'.hCPr__sliderValue', //取色器hsb文本框
|
||||
'.hCPr__copyIcon-front', '.hCPr__copyIcon-back', //取色器复制图标
|
||||
'#debugInfo'
|
||||
];
|
||||
|
||||
// 【边框色】的选择器(--border-color)
|
||||
let hAutoTheme__BorderColor = [
|
||||
'.Artstich_hColorPicker',
|
||||
'#h2__hNodeAlignPro',
|
||||
'#h6__hMenu',
|
||||
'.hCPr__sliderValue', // HSB颜色文本框
|
||||
'.hValue-input', //取色器文本框
|
||||
'.hCPr__sliderValue', //取色器hsb文本框
|
||||
'.hCPr__header', //取色器标题下划线
|
||||
'#debugInfo'
|
||||
];
|
||||
|
||||
// 【分割线颜色】的选择器(使用主题边框色作为填充色)
|
||||
let hAutoTheme__DividerColor = [
|
||||
'.hBarDivider'
|
||||
];
|
||||
|
||||
// 【悬浮背景色】的选择器(--comfy-menu-hover-bg)
|
||||
let hAutoTheme__HoverColor = [
|
||||
'.btn:hover' // 对齐按钮悬浮状态
|
||||
];
|
||||
|
||||
// 备份原始数组
|
||||
const ORIGINAL_SELECTORS = { hAutoTheme__FgColor: [...hAutoTheme__FgColor], hAutoTheme__BgColor: [...hAutoTheme__BgColor], hAutoTheme__BorderColor: [...hAutoTheme__BorderColor], hAutoTheme__HoverColor: [...hAutoTheme__HoverColor], hAutoTheme__DividerColor: [...hAutoTheme__DividerColor] };
|
||||
|
||||
// 清空选择器数组(开关关闭时调用)
|
||||
function disableThemeSelectors() { hAutoTheme__FgColor = []; hAutoTheme__BgColor = []; hAutoTheme__BorderColor = []; hAutoTheme__HoverColor = []; hAutoTheme__DividerColor = []; console.log('主题选择器已禁用(数组已清空)'); }
|
||||
|
||||
// 恢复选择器数组(开关开启时调用)
|
||||
function enableThemeSelectors() {
|
||||
hAutoTheme__FgColor = [...ORIGINAL_SELECTORS.hAutoTheme__FgColor];
|
||||
hAutoTheme__BgColor = [...ORIGINAL_SELECTORS.hAutoTheme__BgColor];
|
||||
hAutoTheme__BorderColor = [...ORIGINAL_SELECTORS.hAutoTheme__BorderColor];
|
||||
hAutoTheme__HoverColor = [...ORIGINAL_SELECTORS.hAutoTheme__HoverColor];
|
||||
hAutoTheme__DividerColor = [...ORIGINAL_SELECTORS.hAutoTheme__DividerColor];
|
||||
console.log('主题选择器已启用(数组已恢复)');
|
||||
}
|
||||
|
||||
// 封装函数:为颜色添加0.8透明度
|
||||
function h_getColorWithOpacity(colorValue, opacity = 0.8) {
|
||||
if (!colorValue || colorValue === 'auto') return colorValue;
|
||||
let r, g, b;
|
||||
if (colorValue.startsWith('rgb')) { // 处理RGB格式
|
||||
const rgbMatch = colorValue.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
||||
if (rgbMatch) [r, g, b] = rgbMatch.slice(1, 4).map(Number);
|
||||
} else { // 处理十六进制格式
|
||||
const hex = colorValue.replace('#', '');
|
||||
r = parseInt(hex.substring(0, 2), 16), g = parseInt(hex.substring(2, 4), 16), b = parseInt(hex.substring(4, 6), 16);
|
||||
}
|
||||
return r != undefined ? `rgba(${r}, ${g}, ${b}, ${opacity})` : colorValue;
|
||||
}
|
||||
|
||||
// 判断是否为DebugInfo元素
|
||||
function h_isDebugInfoElement(selectorOrElement, isElement = false) {
|
||||
return isElement
|
||||
? selectorOrElement.classList?.contains('hDebugInfo') || selectorOrElement.id === 'debugInfo'
|
||||
: (selectorOrElement = selectorOrElement.trim(), selectorOrElement === '.hDebugInfo' || selectorOrElement === '#debugInfo');
|
||||
}
|
||||
|
||||
// 通用选择器样式应用函数
|
||||
function hAutoTheme__ApplyStyle(selectors, styleProperty, styleValue, pseudoClass = '') {
|
||||
if (!selectors?.length) return;
|
||||
|
||||
// 将JavaScript样式属性名转换为CSS属性名(camelCase -> kebab-case)
|
||||
const cssPropertyName = styleProperty.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
|
||||
|
||||
if (pseudoClass) { // 批量处理伪类选择器
|
||||
const styleId = `hThemeStyle_${styleProperty}_${pseudoClass.replace(':', '')}`; let styleElement = document.getElementById(styleId);
|
||||
if (styleValue === null || styleValue === 'auto') styleElement && styleElement.parentNode && styleElement.parentNode.removeChild(styleElement); // 清除样式
|
||||
else { // 批量生成CSS规则
|
||||
const cssRules = selectors.map(selector => { let finalValue = styleValue, trimmedSelector = selector.trim(); styleProperty === 'backgroundColor' && h_isDebugInfoElement(trimmedSelector) && (finalValue = h_getColorWithOpacity(finalValue)); return `${trimmedSelector}${pseudoClass} { ${cssPropertyName}: ${finalValue} !important; }`; }).join('\n'); // 为DebugInfo元素添加0.8透明度
|
||||
styleElement.textContent = cssRules;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 批量处理普通选择器
|
||||
selectors.forEach(selector => {
|
||||
let trimmedSelector = selector?.trim(); if (!trimmedSelector) return;
|
||||
try {
|
||||
const isIdSelector = trimmedSelector.startsWith('#');
|
||||
const targetElements = isIdSelector ? [document.getElementById(trimmedSelector.slice(1))].filter(Boolean) : document.querySelectorAll(trimmedSelector); targetElements.length > 0 && targetElements.forEach(element => { if (styleValue === null || styleValue === 'auto') element.style.removeProperty(cssPropertyName); else { let finalValue = styleValue; styleProperty === 'backgroundColor' && h_isDebugInfoElement(element, true) && (finalValue = h_getColorWithOpacity(finalValue)); element.style[styleProperty] = finalValue; } });
|
||||
} catch (error) { console.warn(`应用样式到选择器 ${selector} 失败:`, error); }
|
||||
});
|
||||
}
|
||||
|
||||
// 【== 统一颜色管理函数 ==】
|
||||
// 统一应用颜色到选择器
|
||||
function hNAP_applyColorToSelectors(colorType, colorValue) {
|
||||
try {
|
||||
// 根据颜色类型确定选择器、样式属性和伪类 - 使用对象映射替代switch
|
||||
const colorConfig = {
|
||||
fg: { selectors: hAutoTheme__FgColor, styleProperty: 'color' },
|
||||
bg: { selectors: hAutoTheme__BgColor, styleProperty: 'backgroundColor' },
|
||||
border: { selectors: hAutoTheme__BorderColor, styleProperty: 'borderColor' },
|
||||
hover: { selectors: hAutoTheme__HoverColor, styleProperty: 'backgroundColor', pseudoClass: ':hover' },
|
||||
divider: { selectors: hAutoTheme__DividerColor, styleProperty: 'backgroundColor' }
|
||||
};
|
||||
|
||||
const config = colorConfig[colorType];
|
||||
if (!config) return console.warn(`[NodeAlignPro] 未知的颜色类型: ${colorType}`);
|
||||
|
||||
hAutoTheme__ApplyStyle(config.selectors, config.styleProperty, colorValue, config.pseudoClass || '');
|
||||
} catch (error) { console.error(`[NodeAlignPro] 应用颜色到选择器失败 (${colorType}):`, error); }
|
||||
}
|
||||
|
||||
// 统一应用主题色到CSS变量
|
||||
function hNAP_applyThemeToCSSVars(fgColor) {
|
||||
try {
|
||||
if (!fgColor) return document.documentElement.style.removeProperty('--hC_hBtn_svg'); // 应用前景色到CSS变量(对齐按钮颜色)
|
||||
let r, g, b;
|
||||
if (fgColor.startsWith('rgb')) { // RGB格式:rgb(r, g, b)
|
||||
const rgbMatch = fgColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
||||
rgbMatch && ([r, g, b] = rgbMatch.slice(1, 4));
|
||||
} else { // 非RGB格式,使用全局颜色转换工具处理
|
||||
try { const colorWithHash = fgColor.startsWith('#') ? fgColor : `#${fgColor}`; const rgbObj = window.__hColorConvert ? window.__hColorConvert.hexToRgb(colorWithHash) : null; if (rgbObj) [r, g, b] = [rgbObj.r, rgbObj.g, rgbObj.b]; else r = g = 107, b = 112; } catch (e) { r = g = 107, b = 112; } // 确保颜色有#前缀,使用全局转换工具,失败则用默认值
|
||||
}
|
||||
r !== undefined && g !== undefined && b !== undefined && document.documentElement.style.setProperty('--hC_hBtn_svg', `${r}, ${g}, ${b}`); // 设置CSS变量
|
||||
} catch (error) { console.error('[NodeAlignPro] 应用主题色到CSS变量失败:', error); }
|
||||
}
|
||||
|
||||
// 统一应用手动颜色到CSS变量
|
||||
function hNAP_applyManualToCSSVars(alignColor) {
|
||||
try {
|
||||
// 处理对齐按钮颜色:通过CSS变量--hC_hBtn_svg设置
|
||||
const alignColorHex = alignColor.startsWith('#') ? alignColor.slice(1) : alignColor;
|
||||
const r = parseInt(alignColorHex.substr(0, 2), 16), g = parseInt(alignColorHex.substr(2, 2), 16), b = parseInt(alignColorHex.substr(4, 2), 16);
|
||||
document.documentElement.style.setProperty('--hC_hBtn_svg', `${r}, ${g}, ${b}`);
|
||||
} catch (error) { console.error('[NodeAlignPro] 应用手动颜色到CSS变量失败:', error); }
|
||||
}
|
||||
|
||||
// 标准化主题色应用函数
|
||||
function hAutoTheme__ApplyColors(fgColor, bgColor, borderColor, hoverColor) {
|
||||
try {
|
||||
// 应用主题色到CSS变量及各类型颜色
|
||||
hNAP_applyThemeToCSSVars(fgColor); hNAP_applyColorToSelectors('fg', fgColor); hNAP_applyColorToSelectors('bg', bgColor);
|
||||
hNAP_applyColorToSelectors('border', borderColor); hNAP_applyColorToSelectors('hover', hoverColor); hNAP_applyColorToSelectors('divider', borderColor);
|
||||
// 确保取色器按钮的核心CSS变量不被清除
|
||||
const root = document.documentElement;
|
||||
!root.style.getPropertyValue('--hC_BW1_Black') && root.style.removeProperty('--hC_BW1_Black'); // 移除内联样式,恢复CSS文件中的默认值
|
||||
} catch (error) { console.error('应用主题色到选择器失败:', error); }
|
||||
}
|
||||
|
||||
// 获取ComfyUI主题颜色
|
||||
function getComfyUIThemeColors() {
|
||||
try {
|
||||
const root = document.documentElement, computedStyles = getComputedStyle(root); // 获取根元素和计算样式
|
||||
// 获取ComfyUI主题的文字颜色(用于对齐按钮)
|
||||
let textColor = computedStyles.getPropertyValue('--color-muted').trim();
|
||||
textColor = !textColor ? (computedStyles.getPropertyValue('--comfy-input-text').trim() || computedStyles.getPropertyValue('--comfy-menu-text').trim()) : textColor;
|
||||
// 获取主题相关颜色:背景色、悬浮色、边框色
|
||||
const bgColor = computedStyles.getPropertyValue('--comfy-menu-bg').trim();
|
||||
const hoverBgColor = computedStyles.getPropertyValue('--comfy-menu-hover-bg').trim() || computedStyles.getPropertyValue('--comfy-focus-bg').trim();
|
||||
const borderColor = computedStyles.getPropertyValue('--border-color').trim() || computedStyles.getPropertyValue('--comfy-border-color').trim();
|
||||
return { textColor, bgColor, hoverBgColor, borderColor };
|
||||
} catch (error) { console.error('获取ComfyUI主题颜色失败:', error); return null; }
|
||||
}
|
||||
|
||||
// 应用主题颜色的函数
|
||||
function applyThemeColors(forceApply = false) {
|
||||
try {
|
||||
// 快速检查主题色开关状态,避免不必要的计算
|
||||
const useThemeColor = forceApply ? true : (app.ui?.settings?.getSettingValue("hNodeAlignPro.hColor_AutoTtheme") || false);
|
||||
if (!useThemeColor) return; // 如果开关关闭且非强制应用,直接返回
|
||||
// 缓存主题颜色,避免重复获取
|
||||
const themeColors = getComfyUIThemeColors();
|
||||
if (!themeColors) return;
|
||||
const { textColor, bgColor, hoverBgColor, borderColor } = themeColors;
|
||||
hAutoTheme__ApplyColors(textColor, bgColor, borderColor, hoverBgColor); // 直接应用主题色,hAutoTheme__ApplyColors内部会处理样式清除
|
||||
} catch (error) { console.error('应用ComfyUI主题配色失败:', error); }
|
||||
}
|
||||
|
||||
// 应用手动设置的颜色
|
||||
function applyManualColors() {
|
||||
try {
|
||||
const savedAlignColor = app.ui.settings.getSettingValue("hNodeAlignPro.hColor_SVG") || "6B6B70", savedBgColor = app.ui.settings.getSettingValue("hNodeAlignPro.hColor_bg") || "18181B"; // 从设置中获取用户手动设置的颜色
|
||||
const alignColor = savedAlignColor.startsWith('#') ? savedAlignColor : `#${savedAlignColor}`, bgColor = savedBgColor.startsWith('#') ? savedBgColor : `#${savedBgColor}`; // 确保颜色值有#前缀
|
||||
hNAP_applyManualToCSSVars(alignColor); // 应用手动颜色到CSS变量
|
||||
const resetBorderColor = null, resetHoverBgColor = null; // 对于没有手动设置选项的悬浮色和边框色,清除样式以恢复默认的CSS变量值
|
||||
// 使用原始选择器数组,确保手动颜色能正确应用
|
||||
hAutoTheme__ApplyStyle(ORIGINAL_SELECTORS.hAutoTheme__FgColor, 'color', alignColor);
|
||||
hAutoTheme__ApplyStyle(ORIGINAL_SELECTORS.hAutoTheme__BgColor, 'backgroundColor', bgColor);
|
||||
hAutoTheme__ApplyStyle(ORIGINAL_SELECTORS.hAutoTheme__BorderColor, 'borderColor', resetBorderColor);
|
||||
hAutoTheme__ApplyStyle(ORIGINAL_SELECTORS.hAutoTheme__HoverColor, 'backgroundColor', resetHoverBgColor, ':hover');
|
||||
hAutoTheme__ApplyStyle(ORIGINAL_SELECTORS.hAutoTheme__DividerColor, 'backgroundColor', resetBorderColor);
|
||||
// 确保取色器按钮(包括#hZoom)的样式正确
|
||||
['#hClear', '#hPick', '#hRandom', '#hZoom'].forEach(selector => {
|
||||
try { const element = document.querySelector(selector); element && (element.style.removeProperty('background-color'), element.style.removeProperty('border-color')); } catch (e) { console.warn(`恢复取色器按钮样式失败 (${selector}):`, e); }
|
||||
});
|
||||
} catch (error) { console.error('应用手动设置颜色失败:', error); }
|
||||
}
|
||||
|
||||
// 防抖函数,用于优化高频触发的函数调用
|
||||
function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }
|
||||
|
||||
// 设置主题变化监听
|
||||
function setupThemeChangeListener() {
|
||||
const root = document.documentElement;
|
||||
const debouncedApplyThemeColors = debounce(() => { applyThemeColors(); }, 100); // 100ms防抖主题色更新函数,避免频繁触发
|
||||
const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.attributeName === 'style' && debouncedApplyThemeColors(); }); }); // 创建MutationObserver监听根元素的style属性变化 主题变化时重新应用颜色
|
||||
observer.observe(root, { attributes: true, attributeFilter: ['style'] });
|
||||
window.__hNodeAlignPro_themeObserver = observer; // 配置观察器并存储观察器引用,以便在需要时可以移除
|
||||
}
|
||||
|
||||
const NodeAlignProSettings = [
|
||||
{
|
||||
id: "hNodeAlignPro.ShowOperationLog", name: h_i18n('Setting_ShowOperationLog', '显示操作日志'), type: "boolean",
|
||||
defaultValue: false,
|
||||
category: ["🔥 NodeAlignPro", "🛠️Z开发人员选项 (Developer Options)", h_i18n('Setting_ShowOperationLog', '显示操作日志')],
|
||||
tooltip: h_i18n('Setting_ShowOperationLog', '开启后,插件操作日志将输出到页面左上角,方便进阶用户调试'),
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setShowOperationLog(value); } } catch (error) { console.error('设置操作日志显示失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hReset", name: h_i18n('Setting_ForceReset', '⚠强制重置NodeAlignPro插件'), type: "boolean",
|
||||
defaultValue: false,
|
||||
category: ["🔥 NodeAlignPro", "🛠️Z开发人员选项 (Developer Options)", h_i18n('Setting_ForceReset', '⚠强制重置NodeAlignPro插件')],
|
||||
tooltip: h_i18n('Setting_ForceReset', '⚠此操作会强制刷新页面,请务必先保存工作流! 开启后会强制重建NodeAlignPro插件,仅在插件异常时使用! '),
|
||||
onChange: (value) => {
|
||||
if (value) try {
|
||||
(typeof __hReset__hNAP_State === 'function' ? __hReset__hNAP_State() : resetNodeAlignProManually()); // 调用核心文件中的重置函数,核心函数不存在则执行手动重置
|
||||
resetAllSettings(); clearAllStorage(); // 重置所有设置并清除本地存储
|
||||
setTimeout(() => { const isResetEnabled = app.ui?.settings?.getSettingValue?.('hNodeAlignPro.hReset'); isResetEnabled === true ? location.reload() : (hLog && hLog.info('--@hSetting', '🔥NodeAlignPro已重置!直接可用,无需重复刷新页面'), console.log('🔥NodeAlignPro已重置!直接可用,无需重复刷新页面')); }, 500); // 检查开关状态,开启则刷新,否则记录日志
|
||||
hLog && hLog.info('--@hSetting', '插件已通过设置菜单强制重置,页面将重新加载...');
|
||||
} catch (error) { console.error('重置插件失败:', error); hLog && hLog.error('--@hSetting', '重置失败:', error); }
|
||||
}
|
||||
},
|
||||
|
||||
// { id: "hNodeAlignPro.button_test", name: "测试", type: "input", defaultValue: "测试文本", category: ["🔥 NodeAlignPro", "🎨NodeAlignPro颜色预设 (Color preset)", "测试"], onChange: (newVal) => { } },
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.linkMode", name: h_i18n('Setting_DragMode', '拖拽方式'), type: "combo",
|
||||
options: [{ value: "hDragMode1_Split", text: h_i18n('hSelKit_DragSplit2', '解 耦') }, { value: "hDragMode0_Link", text: h_i18n('hSelKit_DragLink2', '联 动') }],
|
||||
defaultValue: "hDragMode1_Split",
|
||||
category: ["🔥 NodeAlignPro", "⚙️NodeAlignPro基本设置 (Basic Settings)", h_i18n('Setting_DragMode', '拖拽方式')],
|
||||
tooltip: h_i18n('Setting_DragMode', '切换是否联动[运行/Action]按钮到插件面板(与插件右键菜单设置同步)'),
|
||||
onChange: (value) => {
|
||||
try {
|
||||
const mode = value === "hDragMode0_Link" ? 1 : 0;
|
||||
if (typeof __hMenu_Selection === 'function') { try { __hMenu_Selection(value); return; } catch (e) { console.warn('调用 __hMenu_Selection 失败:', e); } }
|
||||
if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setLinkMode === 'function') { try { window.NodeAlignProSettingsManager.setLinkMode(mode); return; } catch (e) { console.warn('调用 NodeAlignProSettingsManager.setLinkMode 失败:', e); } }
|
||||
if (window.__hMgr_ACbar && typeof window.__hMgr_ACbar.setLinkMode === 'function') { try { window.__hMgr_ACbar.setLinkMode(mode); return; } catch (e) { console.warn('调用 __hMgr_ACbar.setLinkMode 失败:', e); } }
|
||||
__hNodeAlignPro_safeCall(null, null, 'linkMode', mode); // 回退:存储待处理值供主模块稍后获取
|
||||
} catch (error) { console.error('设置拖拽方式失败:', error); }
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.UIScale", name: h_i18n('Setting_UIScale', 'UI缩放'), type: "combo",
|
||||
options: [{ value: "hUIScale_0_5x", text: "0.5x" }, { value: "hUIScale_0_75x", text: "0.75x" }, { value: "hUIScale_1x", text: "1x(默认)" }, { value: "hUIScale_1_25x", text: "1.25x" }, { value: "hUIScale_1_5x", text: "1.5x" }, { value: "hUIScale_2x", text: "2x" }],
|
||||
defaultValue: "hUIScale_1x",
|
||||
category: ["🔥 NodeAlignPro", "⚙️NodeAlignPro基本设置 (Basic Settings)", h_i18n('Setting_UIScale', 'UI缩放')],
|
||||
tooltip: "调整插件UI缩放比例(与插件右键菜单设置同步)",
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setUIScale === 'function') { window.NodeAlignProSettingsManager.setUIScale(value); } else __hNodeAlignPro_safeCall(null, null, 'uiScale', value); } catch (error) { console.error('设置UI缩放失败:', error); } }
|
||||
},
|
||||
/* {
|
||||
id: "hNodeAlignPro.UIScale_v2", name: "UI缩放v2", type: "combo",
|
||||
options: [{ value: "hUIScale_0_5x", text: "0.5x" }, { value: "hUIScale_0_75x", text: "0.75x" }, { value: "hUIScale_1x", text: "1x(默认)" }, { value: "hUIScale_1_25x", text: "1.25x" }, { value: "hUIScale_1_5x", text: "1.5x" }, { value: "hUIScale_2x", text: "2x" }],
|
||||
defaultValue: "hUIScale_1x",
|
||||
category: ["🔥 NodeAlignPro", "⚙️NodeAlignPro基本设置 (Basic Settings)", "UI缩放v2"],
|
||||
attrs: { editable: true, filter: true, filterPlaceholder: "输入/选择缩放比例...", showClear: true, loading: false, loadingIcon: "pi pi-spinner pi-spin" },
|
||||
onChange: (newVal, oldVal) => {
|
||||
try {
|
||||
if (window.containerController && oldVal !== newVal) {
|
||||
const scaleMapping = { 'hUIScale_0_5x': 0.5, 'hUIScale_0_75x': 0.75, 'hUIScale_1x': 1.0, 'hUIScale_1_25x': 1.25, 'hUIScale_1_5x': 1.5, 'hUIScale_2x': 2.0 }, targetScale = scaleMapping[newVal];
|
||||
if (targetScale) {
|
||||
const container = document.getElementById('hNodeAlignKit');
|
||||
if (container) {
|
||||
const containerRect = container.getBoundingClientRect(), centerX = containerRect.left + containerRect.width / 2, centerY = containerRect.top + containerRect.height / 2;
|
||||
window.containerController.zoomToScale(targetScale, centerX, centerY); if (hLog) hLog.info('--@hSetting', `UI缩放v2已设置为: ${targetScale}x`);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) { console.error('设置UI缩放v2失败:', error); }
|
||||
},
|
||||
}, */
|
||||
{
|
||||
id: "hNodeAlignPro.WorkMode", name: h_i18n('Setting_WorkMode', '工作模式'), type: "combo",
|
||||
options: [
|
||||
// { value: 'hAlign_Auto', text: h_i18n('hSelKit_AlignAuto2','自动(Auto)') }, { value: "hApBar1_Color", text: h_i18n('hSelKit_ColorBar2', '色卡(ColorBar)') },
|
||||
{ value: "hApBar2_Align", text: h_i18n('hSelKit_AlignBar2', '传统对齐(AlignStd)') }, { value: "hApBar2_Node2", text: h_i18n('hSelKit_Node2', 'Node2.0') }
|
||||
],
|
||||
defaultValue: "hApBar2_Align",
|
||||
category: ["🔥 NodeAlignPro", "⚙️NodeAlignPro基本设置 (Basic Settings)", h_i18n('Setting_WorkMode', '工作模式')],
|
||||
tooltip: h_i18n('hTooltip_WorkMode', '工作模式 (Work Mode):切换插件工作模式(与插件右键菜单设置同步)。可开启新版Node2.0对齐模式'),
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setWorkMode === 'function') { window.NodeAlignProSettingsManager.setWorkMode(value); } else __hNodeAlignPro_safeCall(null, null, 'workMode', value); } catch (error) { console.error('设置工作模式失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.DisplayMode", name: h_i18n('Setting_DisplayMode', '显示模式'), type: "combo",
|
||||
options: [{ value: "hDispMode0_Always", text: h_i18n('hSelKit_Always2', '常驻显示') }, { value: "hDispMode1_Follow", text: h_i18n('hSelKit_Follow2', '跟随选框') }],
|
||||
defaultValue: "hDispMode0_Always",
|
||||
category: ["🔥 NodeAlignPro", "⚙️NodeAlignPro基本设置 (Basic Settings)", h_i18n('Setting_DisplayMode', '显示模式')],
|
||||
tooltip: h_i18n('Setting_DisplayMode', '切换插件面板的显示模式(与插件右键菜单设置同步)'),
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setDisplayMode === 'function') { window.NodeAlignProSettingsManager.setDisplayMode(value); } else __hNodeAlignPro_safeCall(null, null, 'displayMode', value); } catch (error) { console.error('设置显示模式失败:', error); } }
|
||||
},
|
||||
|
||||
// 语言选择(优先级高于浏览器语言),切换即刻生效
|
||||
{
|
||||
id: "hNodeAlignPro.Language", name: h_i18n('Setting_Language', '语言'), type: "combo",
|
||||
options: [{ value: 'auto', text: h_i18n('hSelKit_AlignAuto', '自动(Auto)') }, { value: 'cn', text: h_i18n('Option_Lang_CN', '中文') }, { value: 'en', text: h_i18n('Option_Lang_EN', 'English') }],
|
||||
defaultValue: 'cn',
|
||||
category: ["🔥 NodeAlignPro", "⚙️NodeAlignPro基本设置 (Basic Settings)", h_i18n('Setting_Language', '语言')],
|
||||
tooltip: h_i18n('Setting_Language', '选择插件界面语言(优先于浏览器语言设置)'),
|
||||
onChange: (value) => {
|
||||
try {
|
||||
if (window.hLanguage && typeof window.hLanguage.setLang === 'function') {
|
||||
window.hLanguage.setLang(value === 'auto' ? 'auto' : value); // 'auto'表示不强制特定语言;遵循浏览器/ComfyUI设置
|
||||
try { window.hLanguage.applyToDOM(document); } catch (e) { console.warn('应用语言到DOM失败:', e); } // 立即应用到文档和现有插件容器
|
||||
try { const c = document.getElementById('hNodeAlignKit'); c && window.hLanguage && window.hLanguage.applyToDOM(c); } catch (e) { /* 忽略 */ } // 如果存在插件容器,也应用到该容器
|
||||
console.info('[NodeAlignPro 设置] 语言已切换为', window.hLanguage.getLang());
|
||||
} else { __hNodeAlignPro_safeCall(null, null, 'language', value); }
|
||||
} catch (error) { console.error('设置语言失败:', error); }
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hColor_SVG", name: h_i18n('Setting_AlignBtnColor', '对齐按钮颜色'), type: "color",
|
||||
defaultValue: "6B6B70",
|
||||
category: ["🔥 NodeAlignPro", "🎨NodeAlignPro颜色预设 (Color preset)", h_i18n('Setting_AlignBtnColor', '对齐按钮颜色')],
|
||||
tooltip: h_i18n('Setting_AlignBtnColor', '控制对齐按钮颜色'),
|
||||
onChange: (newVal) => { try { const useThemeColor = app.ui?.settings?.getSettingValue("hNodeAlignPro.hColor_AutoTtheme") || false; !useThemeColor && applyManualColors(); } catch (error) { console.error('设置对齐按钮颜色失败:', error); } } // 检查主题配色是否启用,如果启用则不做处理
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hColor_AutoTtheme", name: h_i18n('Setting_ToolbarColor_Auto', '使用ComfyUI主题配色(Use ComfyUI theme color)'), type: "boolean",
|
||||
defaultValue: false,
|
||||
category: ["🔥 NodeAlignPro", "🎨NodeAlignPro颜色预设 (Color preset)", h_i18n('Setting_ToolbarColor_Auto', '使用ComfyUI theme color)')],
|
||||
tooltip: h_i18n('Setting_ToolbarColor_Auto1', '若开启,将ComfyUI主题配色,下方手动设置的颜色将无效(If enabled, ComfyUI theme color will be used, and manual color setting will be ignored)'),
|
||||
onChange: (value) => {
|
||||
try {
|
||||
value ? (enableThemeSelectors(), applyThemeColors(true), !window.__hNodeAlignPro_themeObserver && setupThemeChangeListener()) : (window.__hNodeAlignPro_themeObserver?.disconnect(), window.__hNodeAlignPro_themeObserver = null, hAutoTheme__ApplyColors(null, null, null, null), applyManualColors()); // 开启时:启用选择器数组,应用主题色并设置监听;关闭时:移除主题监听、清除主题样式、应用手动颜色
|
||||
} catch (error) { console.error('使用ComfyUI主题配色失败:', error); }
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hColor_bg", name: h_i18n('Setting_ToolbarBgColor', '工具栏背景色'), type: "color",
|
||||
defaultValue: "18181B",
|
||||
category: ["🔥 NodeAlignPro", "🎨NodeAlignPro颜色预设 (Color preset)", h_i18n('Setting_ToolbarBgColor', '工具栏背景色')],
|
||||
tooltip: h_i18n('Setting_ToolbarBgColor', '控制对齐组件的背景色'),
|
||||
onChange: (newVal) => { try { const useThemeColor = app.ui?.settings?.getSettingValue("hNodeAlignPro.hColor_AutoTtheme") || false; !useThemeColor && applyManualColors(); } catch (error) { console.error('设置工具栏背景色失败:', error); } } // 检查主题配色是否启用,如果启用则不做处理
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hOpacity", name: h_i18n('Setting_ToolbarOpacity', '工具栏透明度'), type: "slider",
|
||||
defaultValue: 100,
|
||||
attrs: { min: 0, max: 100, step: 1 },
|
||||
category: ["🔥 NodeAlignPro", "🎨NodeAlignPro颜色预设 (Color preset)", h_i18n('Setting_ToolbarOpacity', '工具栏透明度')],
|
||||
tooltip: h_i18n('Setting_ToolbarOpacity', '控制对齐组件的背景透明度'),
|
||||
onChange: (newVal) => { try { if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setToolbarOpacity === 'function') { window.NodeAlignProSettingsManager.setToolbarOpacity(newVal); } else __hNodeAlignPro_safeCall(null, null, 'toolbarOpacity', newVal); } catch (error) { console.error('设置工具栏透明度失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.NewVersionTips", name: h_i18n('Setting_NewVersionTips', '新版说明'), type: "boolean",
|
||||
defaultValue: true,
|
||||
category: ["🔥 NodeAlignPro", "⚙️NodeAlignPro基本设置 (Basic Settings)", h_i18n('Setting_NewVersionTips', '新版说明')],
|
||||
tooltip: h_i18n('Setting_NewVersionTips', 'v2.0.3_rc新版功能:按Shift、Alt、Ctrl Alt切换不同色卡模式... Alt+对齐按钮:对齐到"反向基准"节点^_^'),
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setNewVersionTips === 'function') { window.NodeAlignProSettingsManager.setNewVersionTips(value); } else __hNodeAlignPro_safeCall(null, null, 'newVersionTips', value); } catch (error) { console.error('设置新版说明失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.ColorApplyMode", name: h_i18n('Setting_ColorApplyMode', '上色模式'), type: "combo",
|
||||
options: [{ value: "1", text: h_i18n('Option_Color_Whole2', '整体色') }, { value: "0", text: h_i18n('Option_Color_TitleOnly2', '仅标题') }],
|
||||
defaultValue: "1",
|
||||
category: ["🔥 NodeAlignPro", "🧩NodeAlignPro节点设置 (Node Settings)", h_i18n('Setting_ColorApplyMode', '上色模式')],
|
||||
tooltip: h_i18n('Setting_ColorApplyMode', '设置节点上色模式:整体色(背景+标题)或仅标题色'),
|
||||
onChange: (value) => { try { const intVal = parseInt(value); if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setColorApplyMode === 'function') { window.NodeAlignProSettingsManager.setColorApplyMode(intVal); } else __hNodeAlignPro_safeCall(null, null, 'colorApplyMode', intVal); } catch (error) { console.error('设置上色模式失败:', error); } }
|
||||
}
|
||||
];
|
||||
|
||||
// 初始化函数-延迟执行,确保核心文件已加载:设置管理器会自动从localStorage加载设置
|
||||
function initNodeAlignProSettings() {
|
||||
try {
|
||||
setTimeout(() => { if (window.NodeAlignProSettingsManager) { console.log('NodeAlignPro 设置系统已初始化'); if (window.hLog) hLog.info('--@hSetting', 'NodeAlignPro 设置系统已初始化'); } else console.warn('NodeAlignProSettingsManager 未找到,设置可能未完全加载'); }, 2000);
|
||||
} catch (error) { console.error('初始化NodeAlignPro设置失败:', error); }
|
||||
}
|
||||
|
||||
// 注册扩展-初始化代码
|
||||
app.registerExtension({
|
||||
name: "NodeAlignProSettings",
|
||||
setup() {
|
||||
NodeAlignProSettings.forEach(setting => { app.ui.settings.addSetting(setting); }); // 注册设置
|
||||
const useThemeColor = app.ui?.settings?.getSettingValue("hNodeAlignPro.hColor_AutoTtheme") || false; // 检查初始状态,如果主题配色功能已开启,则应用颜色并设置监听
|
||||
setTimeout(() => { useThemeColor ? (applyThemeColors(), setupThemeChangeListener()) : applyManualColors(); }, 500); // 如果未开启主题配色,应用手动设置的颜色
|
||||
}
|
||||
});
|
||||
|
||||
// 重置所有设置
|
||||
function resetAllSettings() {
|
||||
try {
|
||||
const defaultSettings = {}; // 从NodeAlignProSettings数组动态获取所有设置项的默认值
|
||||
NodeAlignProSettings.forEach(setting => { defaultSettings[setting.id] = setting.defaultValue; }); // 遍历所有设置项,收集默认值
|
||||
defaultSettings["hNodeAlignPro.hReset"] = false; // 添加特殊处理项确保重置选项本身被重置为false
|
||||
Object.keys(defaultSettings).forEach(settingId => { try { app.ui.settings?.setSettingValue?.(settingId, defaultSettings[settingId]); } catch (e) { console.warn(`重置设置 ${settingId} 失败:`, e); } }); // 设置每个配置项到默认值
|
||||
console.log('所有设置项已重置为默认值');
|
||||
} catch (error) { console.error('重置设置项失败:', error); }
|
||||
}
|
||||
// 手动重置插件
|
||||
function resetNodeAlignProManually() {
|
||||
try {
|
||||
window.containerController?.reset() || (() => { const el = document.getElementById('hNodeAlignKit'); el && (el.style.left = '', el.style.top = ''); })(); // 优先使用容器控制器的reset方法,它已经实现了正确的位置重置逻辑
|
||||
window.__hColor_Module && window.__hColor_Module.reset(), window.__hMgr_DisplayMode && window.__hMgr_DisplayMode.reset(), window.__hMgr_ACbar && window.__hMgr_ACbar.setLinkMode(0); // 重置各个模块状态
|
||||
console.log('NodeAlignPro 已手动重置');
|
||||
} catch (error) { console.error('手动重置失败:', error); }
|
||||
}
|
||||
// 清除所有本地存储
|
||||
function clearAllStorage() {
|
||||
try {
|
||||
const storageKeys = ['NodeAlignPro_ShowOperationLog', 'NodeAlignPro_WorkMode', 'NodeAlignPro_AlignButtonColor', 'NodeAlignPro_ToolbarBgColor', 'NodeAlignPro_ToolbarOpacity', 'NodeAlignPro_NewVersionTips', 'NodeAlignPro_LinkMode', 'NodeAlignProPosition', 'NodeAlignProRunButtonLink', 'NodeAlignProDisplayMode', 'NodeAlignPro_ColorApplyMode', 'hNodeAlignPro_Logic'];
|
||||
storageKeys.forEach(key => { localStorage.removeItem(key); }); console.log('所有相关localStorage项已清除');
|
||||
} catch (error) { console.error('清除localStorage失败:', error); }
|
||||
}
|
||||
@@ -1,190 +0,0 @@
|
||||
import { app } from "../../scripts/app.js";
|
||||
|
||||
const NodeAlignProSettings = [
|
||||
{
|
||||
id: "hNodeAlignPro.ShowOperationLog", name: "显示操作日志", type: "boolean",
|
||||
defaultValue: false,
|
||||
category: ["🔥 NodeAlignPro", "Z开发人员选项", "显示操作日志"],
|
||||
tooltip: "开启后,插件操作日志将输出到页面左上角,方便进阶用户调试",
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setShowOperationLog(value); } } catch (error) { console.error('设置操作日志显示失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hReset", name: "⚠强制重置NodeAlignPro插件", type: "boolean",
|
||||
defaultValue: false,
|
||||
category: ["🔥 NodeAlignPro", "Z开发人员选项", "⚠强制重置NodeAlignPro插件"],
|
||||
tooltip: "⚠此操作会强制刷新页面,请务必先保存工作流! 开启后会强制重建NodeAlignPro插件,仅在插件异常时使用! ",
|
||||
onChange: (value) => {
|
||||
if (value) try {
|
||||
if (typeof __hReset__hNAP_State === 'function') __hReset__hNAP_State(); else resetNodeAlignProManually(); // 1. 调用核心文件中的重置函数。如果核心重置函数不存在,执行手动重置
|
||||
resetAllSettings(); clearAllStorage(); // 2. 重置所有设置;3. 清除所有本地存储
|
||||
setTimeout(() => { // 4. 刷新页面以完全重置插件
|
||||
const isResetEnabled = app.ui?.settings?.getSettingValue?.("hNodeAlignPro.hReset"); // 检查开关是否处于关闭状态
|
||||
if (isResetEnabled === true) location.reload(); // 只有当开关处于开启状态时才刷新
|
||||
else { if (hLog) hLog.info('--@hSetting', '重置操作已完成,开关已自动关闭,无需刷新页面'); console.log('重置操作已完成,开关已自动关闭,无需刷新页面'); } // 如果开关已关闭,则不刷新,仅记录日志
|
||||
}, 500);
|
||||
if (hLog) hLog.info('--@hSetting', '插件已通过设置菜单强制重置,页面将重新加载...');
|
||||
} catch (error) { console.error('重置插件失败:', error); if (hLog) hLog.error('--@hSetting', '重置失败:', error); }
|
||||
}
|
||||
},
|
||||
|
||||
// { id: "hNodeAlignPro.button_test", name: "测试", type: "input", defaultValue: "测试文本", category: ["🔥 NodeAlignPro", "NodeAlignPro预置颜色", "测试"], onChange: (newVal) => { } },
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.linkMode", name: "拖拽方式", type: "combo",
|
||||
options: [{ value: "hDragMode1_Split", text: "解 耦(默认)" }, { value: "hDragMode0_Link", text: "联 动" }],
|
||||
defaultValue: "hDragMode1_Split",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro基本设置", "拖拽方式"],
|
||||
tooltip: "切换是否联动[运行/Action]按钮到插件面板(与插件右键菜单设置同步)",
|
||||
onChange: (value) => {
|
||||
try {
|
||||
const mode = value === "hDragMode0_Link" ? 1 : 0; // 直接调用全局的处理函数。或者通过设置管理器。或者直接调用联动管理器
|
||||
(typeof __hMenu_Selection === 'function' && __hMenu_Selection(value)) || (window.NodeAlignProSettingsManager && window.NodeAlignProSettingsManager.setLinkMode(mode)) || (window.__hMgr_ACbar && window.__hMgr_ACbar.setLinkMode(mode)) || console.error('无法找到拖拽方式处理函数');
|
||||
} catch (error) { console.error('设置拖拽方式失败:', error); }
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.UIScale", name: "UI缩放", type: "combo",
|
||||
options: [{ value: "hUIScale_0_5x", text: "0.5x" }, { value: "hUIScale_0_75x", text: "0.75x" }, { value: "hUIScale_1x", text: "1x(默认)" }, { value: "hUIScale_1_25x", text: "1.25x" }, { value: "hUIScale_1_5x", text: "1.5x" }, { value: "hUIScale_2x", text: "2x" }],
|
||||
defaultValue: "hUIScale_1x",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro基本设置", "UI缩放"],
|
||||
tooltip: "调整插件UI缩放比例(与插件右键菜单设置同步)",
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setUIScale(value); } } catch (error) { console.error('设置UI缩放失败:', error); } }
|
||||
},
|
||||
/* {
|
||||
id: "hNodeAlignPro.UIScale_v2", name: "UI缩放v2", type: "combo",
|
||||
options: [{ value: "hUIScale_0_5x", text: "0.5x" }, { value: "hUIScale_0_75x", text: "0.75x" }, { value: "hUIScale_1x", text: "1x(默认)" }, { value: "hUIScale_1_25x", text: "1.25x" }, { value: "hUIScale_1_5x", text: "1.5x" }, { value: "hUIScale_2x", text: "2x" }],
|
||||
defaultValue: "hUIScale_1x",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro基本设置", "UI缩放v2"],
|
||||
attrs: { editable: true, filter: true, filterPlaceholder: "输入/选择缩放比例...", showClear: true, loading: false, loadingIcon: "pi pi-spinner pi-spin" },
|
||||
onChange: (newVal, oldVal) => {
|
||||
try {
|
||||
if (window.containerController && oldVal !== newVal) {
|
||||
const scaleMapping = { 'hUIScale_0_5x': 0.5, 'hUIScale_0_75x': 0.75, 'hUIScale_1x': 1.0, 'hUIScale_1_25x': 1.25, 'hUIScale_1_5x': 1.5, 'hUIScale_2x': 2.0 }, targetScale = scaleMapping[newVal];
|
||||
if (targetScale) {
|
||||
const container = document.getElementById('hNodeAlignKit');
|
||||
if (container) {
|
||||
const containerRect = container.getBoundingClientRect(), centerX = containerRect.left + containerRect.width / 2, centerY = containerRect.top + containerRect.height / 2;
|
||||
window.containerController.zoomToScale(targetScale, centerX, centerY); if (hLog) hLog.info('--@hSetting', `UI缩放v2已设置为: ${targetScale}x`);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) { console.error('设置UI缩放v2失败:', error); }
|
||||
},
|
||||
}, */
|
||||
{
|
||||
id: "hNodeAlignPro.WorkMode", name: "工作模式", type: "combo",
|
||||
options: [{ value: "hApBar2_Align", text: "-对 齐-" }],
|
||||
defaultValue: "hApBar2_Align",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro基本设置", "工作模式"],
|
||||
tooltip: "切换插件工作模式(与插件右键菜单设置同步)",
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setWorkMode(value); } } catch (error) { console.error('设置工作模式失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.DisplayMode", name: "显示模式", type: "combo",
|
||||
options: [{ value: "hDispMode0_Always", text: "常驻显示(默认)" }, { value: "hDispMode1_Follow", text: "跟随选框" }],
|
||||
defaultValue: "hDispMode0_Always",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro基本设置", "显示模式"],
|
||||
tooltip: "切换插件面板的显示模式(与插件右键菜单设置同步)",
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setDisplayMode(value); } } catch (error) { console.error('设置显示模式失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hColor_SVG", name: "对齐按钮颜色", type: "color",
|
||||
defaultValue: "6B6B70",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro预置颜色", "对齐按钮颜色"],
|
||||
tooltip: "控制对齐按钮颜色",
|
||||
onChange: (newVal) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setAlignButtonColor(newVal); } } catch (error) { console.error('设置对齐按钮颜色失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hColor_bg", name: "工具栏背景色", type: "color",
|
||||
defaultValue: "18181B",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro预置颜色", "工具栏背景色"],
|
||||
tooltip: "控制对齐组件的背景色",
|
||||
onChange: (newVal) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setToolbarBgColor(newVal); } } catch (error) { console.error('设置工具栏背景色失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hOpacity", name: "工具栏透明度", type: "slider",
|
||||
defaultValue: 95,
|
||||
attrs: { min: 0, max: 100, step: 1 },
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro预置颜色", "工具栏透明度"],
|
||||
tooltip: "控制对齐组件的背景透明度",
|
||||
onChange: (newVal) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setToolbarOpacity(newVal); } } catch (error) { console.error('设置工具栏透明度失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.NewVersionTips", name: "新版说明", type: "boolean",
|
||||
defaultValue: true,
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro基本设置", "新版说明"],
|
||||
tooltip: "v2.0.3_rc新版功能:按Shift、Alt、Ctrl Alt切换不同色卡模式... Alt+对齐按钮:对齐到“反向基准”节点^_^",
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager) { window.NodeAlignProSettingsManager.setNewVersionTips(value); } } catch (error) { console.error('设置新版说明失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.ColorApplyMode", name: "上色模式", type: "combo",
|
||||
options: [ { value: "1", text: "整体色" }, { value: "0", text: "仅标题" } ],
|
||||
defaultValue: "1",
|
||||
category: ["🔥 NodeAlignPro", "NodeAlignPro节点设置", "上色模式"],
|
||||
tooltip: "设置节点上色模式:整体色(背景+标题)或仅标题色",
|
||||
onChange: (value) => { try { if (window.NodeAlignProSettingsManager) window.NodeAlignProSettingsManager.setColorApplyMode(parseInt(value)); } catch (error) { console.error('设置上色模式失败:', error); } }
|
||||
}
|
||||
];
|
||||
|
||||
// 初始化函数
|
||||
function initNodeAlignProSettings() {
|
||||
try {
|
||||
setTimeout(() => { // 延迟执行,确保核心文件已加载
|
||||
if (window.NodeAlignProSettingsManager) { console.log('NodeAlignPro 设置系统已初始化'); if (window.hLog) hLog.info('--@hSetting', 'NodeAlignPro 设置系统已初始化'); } else console.warn('NodeAlignProSettingsManager 未找到,设置可能未完全加载'); // 设置管理器会自动从localStorage加载设置
|
||||
}, 2000);
|
||||
} catch (error) { console.error('初始化NodeAlignPro设置失败:', error); }
|
||||
}
|
||||
|
||||
// 注册扩展
|
||||
app.registerExtension({
|
||||
name: "NodeAlignPro.Settings", settings: NodeAlignProSettings,
|
||||
setup() {
|
||||
if (app.ui?.settings?.addSetting) {
|
||||
NodeAlignProSettings.forEach(setting => { try { app.ui.settings.addSetting(setting); } catch (err) { console.warn(`[NodeAlignPro.Settings] 注册设置项${setting.id}失败:`, err); } }); initNodeAlignProSettings(); // 注册设置项初始化设置
|
||||
}
|
||||
console.info("[NodeAlignPro.Settings] registered", NodeAlignProSettings.map(s => s.id));
|
||||
},
|
||||
beforeConfigureGraph(graph) { setTimeout(initNodeAlignProSettings, 2000); } // 延迟初始化,确保DOM已准备好
|
||||
});
|
||||
|
||||
// 重置所有设置
|
||||
function resetAllSettings() {
|
||||
try {
|
||||
const defaultSettings = {
|
||||
"hNodeAlignPro.ShowOperationLog": false, "hNodeAlignPro.hReset": false, "hNodeAlignPro.button_test": "测试文本",
|
||||
"hNodeAlignPro.linkMode": "hDragMode1_Split", "hNodeAlignPro.UIScale": "hUIScale_1x", "hNodeAlignPro.UIScale_v2": "hUIScale_1x",
|
||||
"hNodeAlignPro.WorkMode": "hApBar2_Align", "hNodeAlignPro.DisplayMode": "hDispMode0_Always", "hNodeAlignPro.hColor_SVG": "6B6B70",
|
||||
"hNodeAlignPro.hColor_bg": "18181B", "hNodeAlignPro.hOpacity": 95, "hNodeAlignPro.NewVersionTips": true
|
||||
};
|
||||
Object.keys(defaultSettings).forEach(settingId => { // 设置每个配置项到默认值
|
||||
try { app.ui.settings?.setSettingValue?.(settingId, defaultSettings[settingId]); } catch (e) { console.warn(`重置设置 ${settingId} 失败:`, e); }
|
||||
});
|
||||
console.log('所有设置项已重置为默认值');
|
||||
} catch (error) { console.error('重置设置项失败:', error); }
|
||||
}
|
||||
// 手动重置插件
|
||||
function resetNodeAlignProManually() {
|
||||
try {
|
||||
const container = document.getElementById('hNodeAlignKit'); // 重置容器位置和缩放
|
||||
if (container) container.style.transform = 'translate(0px, 0px) scale(1)', container.style.left = '', container.style.top = '';
|
||||
if (window.__hColor_Module) window.__hColor_Module.reset();
|
||||
if (window.__hMgr_DisplayMode) window.__hMgr_DisplayMode.reset();
|
||||
if (window.__hMgr_ACbar) window.__hMgr_ACbar.setLinkMode(0);
|
||||
console.log('NodeAlignPro 已手动重置');
|
||||
} catch (error) { console.error('手动重置失败:', error); }
|
||||
}
|
||||
// 清除所有本地存储
|
||||
function clearAllStorage() {
|
||||
try {
|
||||
const storageKeys = ['NodeAlignPro_ShowOperationLog', 'NodeAlignPro_WorkMode', 'NodeAlignPro_AlignButtonColor', 'NodeAlignPro_ToolbarBgColor', 'NodeAlignPro_ToolbarOpacity', 'NodeAlignPro_NewVersionTips', 'NodeAlignPro_LinkMode', 'NodeAlignProPosition', 'NodeAlignProRunButtonLink', 'NodeAlignProDisplayMode', 'NodeAlignPro_ColorApplyMode'];
|
||||
storageKeys.forEach(key => { localStorage.removeItem(key); }); console.log('所有相关localStorage项已清除');
|
||||
} catch (error) { console.error('清除localStorage失败:', error); }
|
||||
}
|
||||