Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
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 |
@@ -1,257 +1,213 @@
|
||||
# ComfyUI_EasyKitHT_NodeAlign Pro 🎨
|
||||

|
||||
# EasyKit-NodeAlign-Pro [↙切换中文] 🎨
|
||||
|
||||
[](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
|
||||
## 📋 Project Overview
|
||||
|
||||
**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. (Legacy Project Name:ComfyUI_EasyKitHT_NodeAlign Pro):
|
||||
|
||||
for omfyUI node 2.0: It is an essential plugin for managing node layout and color schemes in ComfyUI, featuring professional alignment tools and a real-time node color picker **now compatible with ComfyUI Node 2.0**. Its capabilities encompass alignment and distribution, a real-time node color picker, a color palette, 7 preset colors, grayscale/custom modes, and one-click reverse alignment, offering brand new alignment tools and a professional node color management system. The layout of the built-in alignment tools follows a more professional and universally logical workflow and user experience, while the multi-mode coloring tool is more rationally designed. (Natively supports multilingual UI display)
|
||||
Features an original real-time preview color adjustment/picking component based on nodes, facilitating quick node color picking and application. This plugin aims to enhance the workflow efficiency of ComfyUI users by simplifying node layout and color management processes through an intuitive interface and rich functionality.
|
||||
|
||||
---
|
||||
|
||||
## 🔥 What's New in v2.0 ?
|
||||
## 🔥 What's New in v2.1 (Enhanced Alignment for ComfyUI Node 2.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 an i18n multilingual configuration file, natively supporting languages like Chinese, English (and can be extended in the future to support more languages such as Russian, French, etc.), making it more user-friendly for friends around the world.**
|
||||
While preserving the UI and interaction habits of the previous version as much as possible, the interface interaction logic has been fine-tuned, and the UI continues to be iteratively updated (see images below).
|
||||
|
||||
#### ✅ New Version Demo
|
||||
#### ✅【Update 260125】: Added ComfyUI menu, new i18n multilingual adaptation (now integrated into the official menu page)👇
|
||||

|
||||

|
||||
|
||||

|
||||

|
||||
#### 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>
|
||||
#### If you like it, feel free to give it a **⭐Star**! Your encouragement is my greatest motivation!
|
||||
|
||||
<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:
|
||||

|
||||
|
||||
**Legacy v1.0.4_rc**: Only provided basic node alignment tools and a fixed coloring tool:
|
||||

|
||||
</details>
|
||||
|
||||
## ✨ Core Features (Officially Released)
|
||||
|
||||
| 💫 Intelligent Alignment System | 💫 Brand-new Coloring System | 💫 User-friendly Interaction Design | 💫 Brand-new Color Picker (Original Design) |
|
||||
|---------------------------|---------------------------|---------------------------|---------------------------|
|
||||
| ✅ Multiple Alignment Modes | 🖼️ One-click Color Management | 🖱️ Floating Tool Panel | ✅ Native JS/CSS New Color Picking System |
|
||||
| 📐 Dynamic Spacing Distribution Algorithm | 🔗 Real-time Linked Color Preview | 🧩 New Custom Configuration | 🎨 Color Palette Modes: Color/Grayscale/Custom |
|
||||
| 👥 Multi-Node Group Coordination | 💾 Custom Palette Saving & Restoring System | 💾 Layout Memory & Restore System | 👏 Palette: Random/Favorite/Remove/Manual Add |
|
||||
| 💫 Node 2.0 Alignment System | 💫 New Coloring System | 💫 User-Centric Design | 💫 New Color Picker (Original Design) |
|
||||
|------------------------------|----------------------------|----------------------------|---------------------------------------|
|
||||
| 🔥 **New Node 2.0 Algorithms** | 🖼️ One-Click Color Mgmt. | 🖱️ Hovering Tool Panel | ✅ **Original Real-Time Preview Color Picker/Adjuster** |
|
||||
| 📐 **Original Alt Reverse-Baseline Algo.** | 🔗 Live Full-Screen Picker | ⚙️ New Custom Configuration | 🎨 Color Mode: Colorful/Grayscale/Custom |
|
||||
| 📊 Two Alignment/Distribution Algorithms | 🎨 Whole Node/Title-Only Coloring | 💾 Layout Memory & Restore | 🧩 Swatches: Random/Favorite/Remove/Manual |
|
||||
| 🧩 Multiple Alignment Modes | 🧩 Custom Swatch Favorites & Restore | 🌐 Native i18n Multilingual | 🎨 Presets: 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.
|
||||
- **Node 2.0 Support**: Brand new support for ComfyUI Node 2.0 nodes.
|
||||
- **ComfyUI System Menu Integration**: Permanently visible or auto-shown with selection.
|
||||
- **Custom Drag & Scale**: Freely draggable and scalable operation panel.
|
||||
- **AcBar Link Mode**: Linked positioning with ComfyUI's Run button.
|
||||
- **Right-Click Menu**: Rich settings and quick actions.
|
||||
- **Batch Node Selection**: Multiple selection tools and magic wand (In development/debugging...).
|
||||
- **Batch Node Renaming**: Batch rename node feature (In 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 only node title / Color entire node 【Added in v2.0.3_rc】.
|
||||
- **Seven Preset Color Groups**: Quickly apply standard colors to selected nodes.
|
||||
- **Grayscale Palette**: Hold **Shift** to switch to grayscale mode 【Added in v2.0.1_rc】.
|
||||
- **Custom Palette**: Hold **Alt** to enter custom color mode 【Added in v2.0.1_rc】.
|
||||
- **Color Favorites**: **Ctrl+Alt** to lock/unlock custom colors 【Added in v2.0.1_rc】.
|
||||
- **Random Color**: Click the random color button for one random color 【Added in v2.0.1_rc】.
|
||||
- **Super Random Colors**: **Alt** + **Random Color Button** randomizes 7 colors at once and applies them in real-time to selected nodes 【Added in v2.0.1_rc】.
|
||||
- **Live Color Picker**: Built-in **Full-Screen Live Color Picker** 【Added in v2.0.1_rc】 (Zero dependencies, pure native JS+CSS).
|
||||
- **Node Color Adjustment Live Preview Component**: Original real-time preview color adjuster/picker component based on nodes 【Added in v2.0.1_rc】 (Zero dependencies, pure native JS+CSS).
|
||||
|
||||
### 🎯 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, Right, Top, Bottom.
|
||||
- **Center Alignment**: Vertical Center and Horizontal Center.
|
||||
- **Even Distribution**: Horizontal Even Distribution and Vertical Even Distribution.
|
||||
- **Uniform Sizing**: Equal Width and Equal Height.
|
||||
- **Reverse-Baseline Mode**: **Alt** + Click corresponding **Alignment Button** for reverse-baseline alignment 【Added in v2.0.1_rc】.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Installation Methods
|
||||
## 🚀 Installation
|
||||
|
||||
### Method 1: Git Clone (Recommended)
|
||||
#### Method 1: Via ComfyUI Manager (Recommended)
|
||||
1. Search for "**NodeAlign Pro**" in **ComfyUI Manager** (note the space before "Pro").
|
||||
2. Find `EasyKit-NodeAlign-Pro`, click Install `(This method installs the ComfyUI registered plugin version: will auto-generate the official easykit-node-align directory)`.
|
||||
3. Wait for prompt, restart ComfyUI.
|
||||
|
||||
#### Method 2: Git Clone (Recommended)
|
||||
1. Navigate to your ComfyUI/custom_nodes directory, run `(This method installs the git version: will auto-generate the ComfyUI_EasyKitHT_NodeAlignPro directory)`:
|
||||
```
|
||||
cd ComfyUI/custom_nodes
|
||||
git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
### Method 2: Manual Installation
|
||||
1. Open the project address: https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
2. Download the plugin ZIP (```<>Code``` > ```Download ZIP```).
|
||||
3. Extract to the ```ComfyUI/custom_nodes``` directory (Ensure correct directory hierarchy: ```ComfyUI/custom_nodes/ComfyUI_EasyKitHT_NodeAlignPro```).
|
||||
4. Restart ComfyUI.
|
||||
- For users in China or those who cannot access GitHub, use the Gitee mirror:
|
||||
```
|
||||
git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
### 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)
|
||||
#### Method 3: Comfy Install
|
||||
`(This method installs the ComfyUI registered plugin version: will auto-generate the official easykit-node-align directory)`
|
||||
```
|
||||
git fetch --all
|
||||
comfy node install easykit-node-align
|
||||
```
|
||||
|
||||
#### Method 4: Manual Git Install
|
||||
1. Go to the project page: https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
2. Download the ZIP (`<>Code` > `Download ZIP`).
|
||||
3. Extract to `ComfyUI/custom_nodes` directory (Ensure correct path: `ComfyUI/custom_nodes/ComfyUI_EasyKitHT_NodeAlignPro`).
|
||||
4. Restart ComfyUI.
|
||||
|
||||
## 🚀 Plugin Update
|
||||
|
||||
#### Method 1: Update via ComfyUI Manager (Recommended)
|
||||
1. In **ComfyUI Manager**, search for "**NodeAlign Pro**" (note the space before "Pro").
|
||||
2. Find `EasyKit-NodeAlign-Pro`, click Install/Update.
|
||||
3. Wait for prompt, restart ComfyUI.
|
||||
|
||||
#### Method 2: Git Update (Navigate to ComfyUI_EasyKitHT_NodeAlignPro directory first)
|
||||
```
|
||||
git fetch --all && git reset --hard origin/main
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Quick Start (Brief Guide)
|
||||
After successfully installing NodeAlignPro, basic operations (for reference).
|
||||
#### 🚀 Quick Start (Brief Guide)
|
||||
After successful installation, basic operations (for reference).
|
||||
|
||||
1. **Node Coloring**: In ComfyUI, select any node > Click any **color button** in the NodeAlignPro panel (hereafter NAP panel) (🔴🟠🟡🟢🔵🟣🟤, ```Clear Color```, ```Color Picker```, ```Random Color```).
|
||||
2. **Custom Color**: Select any node > Click the **color picker button** in the NAP panel.
|
||||
3. **Node Alignment**: Select any node > Click any **alignment button** in the NAP panel.
|
||||
4. **Reverse Alignment**: Select any node > Press **Alt key** + click the corresponding **alignment button** for reverse reference alignment.
|
||||
└ Example: ```Left Align``` → Select multiple nodes > Press ```Alt key``` + ```Left Align Button```, then alignment uses the ```rightmost node``` as the ```reference``` for ```left alignment``` (Default left alignment uses the leftmost node as reference).
|
||||
5. **Dragging the NAP Panel**: Without selecting any node > Click the buttons on the left/right sides of the NAP panel, a four-way arrow cursor (↕↔) appears, then drag.
|
||||
6. **Reset Settings**: Without selecting any node > In the NAP panel > 【Mouse Right-click】 > 【One-click Reset】.
|
||||
7. **Advanced Techniques**: Please refer to the **User Guide** below 👇.
|
||||
1. **Color a Node**: In ComfyUI, select any node(s) > click any **color button** in the NodeAlignPro panel (hereafter NAP panel) (🔴🟠🟡🟢🔵🟣🟤, `Clear Color` `Color Picker` `Random Color`).
|
||||
2. **Custom Color**: Select any node(s) > click the **Color Picker button** in the NAP panel.
|
||||
3. **Align Nodes**: Select any node(s) > click any **alignment button** in the NAP panel.
|
||||
4. **Reverse-Baseline Alignment**: Select any node(s) > Hold **Alt** + Click the corresponding **alignment button** for reverse-baseline alignment.
|
||||
└ Example: `Left Align` → select multiple nodes > `Alt`+`Left Align Button` uses the `rightmost node` as the `baseline` for `left alignment` (Default left align uses the `leftmost node` as the `baseline`).
|
||||
5. **Drag NAP Panel**: Without selecting any node > Click the buttons on either side of the NAP panel, wait for the four-way arrow cursor (↕↔) to appear, then drag.
|
||||
6. **Reset Settings**: Without selecting any node > Right-click within the NAP panel > 【One-Click Reset】.
|
||||
7. **Advanced Tips**: Please refer to the **User Guide** below 👇.
|
||||
|
||||
<details>
|
||||
<summary><b>🖥️ User Guide...</b></summary>
|
||||
<summary><b>🖥️ 《User Guide》...</b></summary>
|
||||
|
||||
### Basic Operations
|
||||
1. **Start Plugin**: The plugin loads automatically after ComfyUI starts.
|
||||
#### Basic Operations
|
||||
1. **Start Plugin**: 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.
|
||||
4. **Scale Adjustment**: Adjust UI scaling via 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 |
|
||||
#### Color Mode Switching
|
||||
| Key Combination | Mode | 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
|
||||
#### 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.
|
||||
- **Left Align**: All nodes align to the left.
|
||||
- **Vertical Center**: All nodes align to the vertical center.
|
||||
- **Right Align**: All nodes align to the right.
|
||||
- **Top Align**: All nodes align to the top.
|
||||
- **Horizontal Center**: All nodes align to the horizontal center.
|
||||
- **Bottom Align**: All nodes align 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.
|
||||
#### Advanced Tips
|
||||
- **Alt + Alignment Button**: Use "Reverse Baseline" for alignment.
|
||||
- **Double-click Color Picker Preview**: Toggle between coloring entire node or title only.
|
||||
- **Right-Click Menu**: Access full settings and reset functions.
|
||||
- **Container Link**: Link the operation panel position with the Run button.
|
||||
|
||||
</details>
|
||||
|
||||
## 🐛 Frequently Asked Questions
|
||||
## 🐛 FAQ
|
||||
- **Q: How to switch language?**
|
||||
→ A: Click the menu at the bottom left of ComfyUI > 🔥 NodeAlignPro> NodeAlignPro基本设置(Basic Settings)> NodeAlignPro UI语言(Language).
|
||||
|
||||
- **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: Colors won't apply to nodes?**
|
||||
→ A: Ensure nodes are selected, check if nodes are locked, try refreshing the page.
|
||||
|
||||
- **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: Alignment doesn't work?**
|
||||
→ A: Ensure 2 or more nodes are selected, check node selection status, try clearing and re-selecting.
|
||||
|
||||
- **Q: How to reset all settings?**
|
||||
→ A: Right-click menu → "One-Click Reset", OR ComfyUI bottom-left menu > 🔥 NodeAlignPro> Z开发人员选项(Developer Options)> ⚠强制重置NodeAlignPro插件.
|
||||
|
||||
- **Q: What if the plugin doesn't show up?**
|
||||
→ A: Click ComfyUI bottom-left menu > 🔥 NodeAlignPro> Z开发人员选项(Developer Options)> ⚠强制重置NodeAlignPro插件.
|
||||

|
||||
```↑ If it still doesn't work after 【Force Reset】, use ComfyUI Manager to check if the plugin is installed correctly. If not installed, search for "NodeAlign Pro" to reinstall. If installed, try FIX/Repair or 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.0 (Latest 2.1 Release)
|
||||
- Optimized ComfyUI menu, added i18n multilingual adaptation (integrated into official menu page).
|
||||
- Refactored color conversion logic.
|
||||
- Refactored screen color picker functionality.
|
||||
- Revised and improved Readme documentation.
|
||||
- Fixed several bugs.
|
||||
|
||||
<details>
|
||||
<summary><b>📄 Release History...</b></summary>
|
||||
<summary><b>📄 Previous Versions...</b></summary>
|
||||
|
||||
##### v2.0.3_rc
|
||||
- Added ComfyUI menu (integrated into official menu page).
|
||||
- Refactored color conversion logic.
|
||||
- Refactored screen color picker functionality.
|
||||
- Revised and improved Readme documentation.
|
||||
- Fixed several bugs.
|
||||
|
||||
##### 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 documentation (Chinese/English bilingual).
|
||||
|
||||
##### v2.0.1_rc (2025-12-24Latest Release) [v2.0 Release]
|
||||
- Added Shift/Alt/Ctrl combo key modes.
|
||||
##### v2.0.1_rc (2025-12-22) 【2.0 Release】
|
||||
- Added Shift/Alt/Ctrl key combination modes.
|
||||
- Improved color picker performance and stability.
|
||||
- Added node preview functionality.
|
||||
- Optimized UI interaction experience.
|
||||
@@ -259,75 +215,83 @@ 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) [v1.0 Release]
|
||||
- Initial release version.
|
||||
- Complete alignment and color functions.
|
||||
##### v1.0.1_rc (2025-04-29) 【1.0 Release】
|
||||
- Initial version release.
|
||||
- Complete alignment and color features.
|
||||
- Draggable container system.
|
||||
- Integrated color picker tool.
|
||||
|
||||
</details>
|
||||
<details>
|
||||
<summary><b>📄 Release History...</b></summary>
|
||||
<summary><b>📄 Historical Changelog...</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, 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)
|
||||
v2.0.1_rc dd2a09f: 🔥NodeAlignPro major version update released (new UI, comprehensive node coloring system)
|
||||
d90bd02: 🔥Update Preview (A Major Update for the Upcoming Version 😁)→See README for details.
|
||||
----------------
|
||||
v1.0.4_rc b77a9d7: FIX README, ht History Optimization.
|
||||
v1.0.4_rc b77a9d7: FIX README, optimized ht history log.
|
||||
----------------
|
||||
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修改-新增UI缩放适配
|
||||
ef5735d: Added UI scaling, fixed issue where color removal didn't work in old version.
|
||||
8ac01db: Added main features: alignment/distribution, node coloring. Fixed Readme image display issue.
|
||||
----------------
|
||||
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修改
|
||||
10749c7: ComfyUI_EasyKitHT_NodeAlignPro is a newly designed ComfyUI node alignment and coloring plugin.
|
||||
Brand new visual UI, relatively more aligned with the operational logic familiar to designer friends.
|
||||
Added main features: alignment/distribution, node coloring.
|
||||
----------------
|
||||
ca28236: Initial commit
|
||||
----------------
|
||||
# @Artstich_Example
|
||||
# @name ComfyUI_EasyKitHT_NodeAlignPro (ComfyUI Plugin)
|
||||
# @description ComfyUI_EasyKitHT_NodeAlignPro is a lightweight ComfyUI node alignment and node coloring tool
|
||||
# for refactoring and rewriting the UI based on the open-source projects Comfyui-Align and Comfyui-Nodealigner.
|
||||
# @author Artstich @date 2025-06-15 @version v2.0.2_rc @license GPL-3.0
|
||||
# @see https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro
|
||||
/**
|
||||
* @Artstich_Example
|
||||
* @name easykit-node-align (ComfyUI Plugin)
|
||||
* @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.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/zh/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 @version v2.0.3 @lastUpdated 2026-01-24 @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```
|
||||
## 🤝 Contributing
|
||||
|
||||
- Welcome to participate and improve through:
|
||||
```Submit feedback```, `New Issue`, `Discussions`, ```Improve code logic```, `Fork & PR`, ```Improve multilingual docs```, ```Share your creative node layouts```, ```Share your custom color swatches```
|
||||
|
||||
## 📜 License
|
||||
|
||||
- This project is licensed under the **GPL-3.0** License. For details, please see the [LICENSE](LICENSE) file.
|
||||
- This project is licensed under **GPL-3.0**. See the [LICENSE](LICENSE) file for details.
|
||||
|
||||
## 👥 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.
|
||||
- Project Initiator & Main Developer: [@ArtsticH](https://github.com/ArtsticH)
|
||||
- Issues & Discussions: [@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), [@BlissiraHQ](https://github.com/BlissiraHQ)...
|
||||
- Thanks to all designers, developers, testers, ComfyUI users, and feedback providers who have helped.
|
||||
|
||||
## 🌐 Related Links
|
||||
|
||||
- [GitHub Repository](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro) | [Issue Feedback](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/issues) | [ComfyUI Community](https://github.com/comfyanonymous/ComfyUI) | [ComfyUI-Manager](https://github.com/Comfy-Org/ComfyUI-Manager/tree/main)
|
||||
- Author's video tutorial link: https://www.bilibili.com/video/BV1V7G9z9EcU (This link is for the `v1.0.4_rc` old version tutorial; v2.0.2_rc new version tutorial待录制)
|
||||
- [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) | [Issues](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 (Legacy v1.0.4_rc): https://www.bilibili.com/video/BV1V7G9z9EcU (New v2.1.0 tutorial pending recording)
|
||||
|
||||
---
|
||||
|
||||
👨💻 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!
|
||||
👨💻 The first small project developed by a designer in their spare time. Feedback is welcome!
|
||||
⚠️ There might be untested edge cases, please report via Issues (If you like it, feel free to give it a **Star⭐**, your encouragement is my greatest motivation!). Welcome to join if you're interested!
|
||||
|
||||
<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">Document last updated: Jan 25, 2026, 10:24 @[ArtsticH](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)·2025</small>
|
||||
@@ -1,34 +1,27 @@
|
||||
# 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):
|
||||
**v2.1.13:🔥本插件首发支持-最新版ComfyUI Node2.0节点。首创基于 Node2.0 的对齐算法(创新性适配)**: 用于管理 ComfyUI 中节点布局和配色方案的必备插件,具备专业的对齐功能和实时节点取色器 **已适配ComfyUI Node2.0** 。功能能涵盖对齐分布、实时节点取色器、调色盘、7 种预设颜色、灰度/自定义模式以及一键反向对齐等功能,提供全新对齐工具和专业的节点色彩管理系统。内置对齐工具的布局更符合设业通用的操作逻辑和体验,多种上色模式的上色工具更合理。(原生支持多语言UI界面显示)
|
||||
原创基于节点的实时预览调色/取色组件,方便快速节点取色/上色。该插件旨在提升ComfyUI用户的工作效率,通过直观的界面和丰富的功能简化节点布局与颜色管理流程。
|
||||
|
||||
---
|
||||
|
||||
## 🔥 新版v2.0更新说明
|
||||
## 🔥 新版v2.1更新说明 (适配Node2.0)
|
||||
|
||||
**新版v2.0全新适配i18n多语言配置文件,原生支持中文、English等语言(后续视情况还可扩展支持更多诸如俄语、法语等语言),对世界各地的国际友人更友好。**
|
||||
同样在尽可能保留上一版UI及交互习惯的前提下,微调界面交互逻辑,继续更新迭代UI(详见下图)。
|
||||
|
||||
**新版v2.0**全新重构了`v1.0.4_rc`旧版UI及底层逻辑,彻底重写v2.0.3_rc版,全新的UI图标和界面交互逻辑。
|
||||
基础代码和构思早已于今年6-7月份基本完成,由于本人近期较忙,搁置了挺久迟迟没有更新。这两天抽空更新了下,在尽可能保留上一版UI及交互习惯的前提下,重新设计了相关UI,基本上可以说是全部重构了相关逻辑(详见下图)。
|
||||
|
||||
#### ✅ 新版效果演示
|
||||
|
||||

|
||||

|
||||
#### ✅【260125更新】:新增ComfyUI菜单、新增i18n多语言适配 (现以集成到官方菜单页面)👇
|
||||

|
||||

|
||||
|
||||
#### 如果觉得还可以,欢迎帮忙点下**⭐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>
|
||||
|
||||
<details>
|
||||
<summary><b>⚠️旧版v1.0.4_rc UI界面...</b></summary>
|
||||
|
||||
@@ -38,67 +31,91 @@
|
||||
|
||||
## ✨ 核心功能 (已正式上线)
|
||||
|
||||
| 💫智能对齐系统 | 💫全新上色系统 | 💫人性化交互设计 | 💫全新取色器(原创设计) |
|
||||
| 💫Node2.0节点对齐系统 | 💫全新上色系统 | 💫人性化交互设计 | 💫全新取色器(原创设计) |
|
||||
|---------------------------|---------------------------|---------------------------|---------------------------|
|
||||
| ✅ 多种对齐模式 | 🖼️ 一键式颜色管理方案 | 🖱️ 悬浮式工具面板 | ✅ 原生JS/CSS实现全新取色系统 |
|
||||
| 📐 动态间距分布算法 | 🔗 实时联动显示取色效果 | 🧩 全新自定义配置 | 🎨 色卡模式: 彩色/灰度/自定义 |
|
||||
| 👥 多节点组协同操作 | 💾 自定义色卡收藏与恢复系统 | 💾 布局记忆与恢复系统 | 👏 色卡:随机/收藏/移除/以及手动添加 |
|
||||
| 🔥 **新版Node2.0节点算法** | 🖼️ 一键式颜色管理方案 | 🖱️ 悬浮式工具面板 | ✅ **原创实时预览调色/取色组件** |
|
||||
| 📐 **原创Alt反向基准对齐算法** | 🔗 实时联动全屏取色器 | ⚙️ 全新自定义配置 | 🎨 色卡模式: 彩色/灰度/自定义 |
|
||||
| 📊 两套对齐分布算法 | 🎨 整体上色/仅标题上色模式 | 💾 布局记忆与恢复系统 | 🧩 色卡:随机/收藏/移除/手动 |
|
||||
| 🧩 多种对齐分布模式 | 🧩 自定义色卡收藏与恢复系统 | 🌐 原生i18n多语言系统 | 🎨 预置色:色值特调优化 |
|
||||
|
||||
### 🎨 颜色管理模块
|
||||
#### 🎯 高级特性
|
||||
- **i18n多语言**:原生适配i18n多语言系统
|
||||
- **Node2.0节点**:全新支持ComfyUI Node2.0节点
|
||||
- **ComfyUI系统菜单集成**:常驻显示或跟随选框自动显示
|
||||
- **自定义拖动及缩放**:可自由拖拽和缩放的操作面板
|
||||
- **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克隆(推荐)
|
||||
#### 方法一:ComfyUI Manager管理器(推荐)
|
||||
1. 在 **ComfyUI Manager** 管理器搜索 "**NodeAlign Pro**"(注意"Pro"前空格)
|
||||
2. 找到`EasyKit-NodeAlign-Pro`,点击安装`(此方式为ComfyUI注册版插件:会自动生成ComfyUI官方标准生态的easykit-node-align目录)`
|
||||
3. 等待提示重启ComfyUI 即可使用
|
||||
|
||||
#### 方法二:Git克隆(推荐)
|
||||
1. 打开ComfyUI/custom_nodes目录,执行如下命令`(此方式为git版插件:会自动生成ComfyUI_EasyKitHT_NodeAlignPro目录)`:
|
||||
```
|
||||
cd ComfyUI/custom_nodes
|
||||
git clone https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
### 方法二:手动安装
|
||||
- 中国用户及无法访问github的用户请使用gitee镜像源:
|
||||
```
|
||||
git clone https://gitee.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro.git
|
||||
```
|
||||
|
||||
3. 重启ComfyUI 即可使用
|
||||
|
||||
#### 方法三:comfy install安装
|
||||
`(此方式为ComfyUI注册版插件:会自动生成ComfyUI官方标准生态的easykit-node-align目录)`
|
||||
```
|
||||
comfy node install easykit-node-align
|
||||
```
|
||||
|
||||
#### 方法四: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
|
||||
4. 重启ComfyUI 即可使用
|
||||
|
||||
### 方法三:ComfyUI管理器
|
||||
1. 在ComfyUI Manager管理器搜索 "NodeAlignPro"(若没有,请先安装ComfyUI Manager)
|
||||
2. 找到`ComfyUI_EasyKitHT_NodeAlignPro`,点击安装
|
||||
3. 重启ComfyUI
|
||||
|
||||
### 补充:Git更新(需先手动导航至ComfyUI_EasyKitHT_NodeAlignPro目录内)
|
||||
|
||||
## 🚀 插件更新
|
||||
|
||||
#### 方法一:ComfyUI Manager管理器更新(推荐)
|
||||
1. 在 **ComfyUI Manager** 管理器搜索 "**NodeAlign Pro**"(注意"Pro"前空格)
|
||||
2. 找到`EasyKit-NodeAlign-Pro`,点击安装`(此方式为ComfyUI注册版插件:会自动生成ComfyUI官方标准生态的easykit-node-align目录)`
|
||||
3. 等待提示重启ComfyUI 即可使用
|
||||
|
||||
#### 方法一:Git更新(需先手动导航至ComfyUI_EasyKitHT_NodeAlignPro目录内)
|
||||
```
|
||||
git fetch --all
|
||||
git fetch --all && git reset --hard origin/main
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🚀 快速开始(简要指南)
|
||||
#### 🚀 快速开始(简要指南)
|
||||
成功安装NodeAlignPro之后,基础操作(仅供参考)
|
||||
|
||||
1. **节点上色**:进入ComfyUI选中任一节点 > 点击NodeAlignPr面板(以下简称NAP面板)内任意**颜色按钮**即可(🔴🟠🟡🟢🔵🟣🟤,`清除颜色` `取色器` `随机颜色`);
|
||||
@@ -113,13 +130,13 @@ git fetch --all
|
||||
<details>
|
||||
<summary><b>🖥️ 《使用指南》...</b></summary>
|
||||
|
||||
### 基本操作
|
||||
#### 基本操作
|
||||
1. **启动插件**:ComfyUI启动后,插件自动加载
|
||||
2. **显示/隐藏**:通过右键菜单或快捷键控制显示
|
||||
3. **拖拽移动**:拖动标题栏或分隔线移动面板
|
||||
4. **缩放调整**:通过右键菜单调整UI缩放比例
|
||||
|
||||
### 颜色模式切换
|
||||
#### 颜色模式切换
|
||||
| 按键组合 | 模式说明 | 功能描述 |
|
||||
|---------|---------|---------|
|
||||
| **无按键** | 默认模式 | 七种预设颜色 |
|
||||
@@ -127,7 +144,7 @@ git fetch --all
|
||||
| **Alt** | 自定义模式 | 自定义颜色管理 |
|
||||
| **Ctrl+Alt** | 锁定模式 | 锁定/解锁自定义颜色 |
|
||||
|
||||
### 对齐操作
|
||||
#### 对齐操作
|
||||
1. 在ComfyUI画布上选择2个或更多节点
|
||||
2. 点击对齐面板上的相应按钮:
|
||||
- **左对齐**:所有节点向左对齐
|
||||
@@ -137,7 +154,7 @@ git fetch --all
|
||||
- **水平居中**:所有节点水平居中
|
||||
- **底部对齐**:所有节点向底部对齐
|
||||
|
||||
### 高级技巧
|
||||
#### 高级技巧
|
||||
- **Alt+对齐按钮**:使用"反向基准"进行对齐
|
||||
- **双击取色器预览**:切换节点整体/仅标题上色模式
|
||||
- **右键菜单**:访问完整设置和重置功能
|
||||
@@ -146,98 +163,28 @@ git fetch --all
|
||||
</details>
|
||||
|
||||
## 🐛 常见问题
|
||||
- **Q: 如何切换语言?**
|
||||
→A: 直接点击ComfyUI左下角菜单> 🔥 NodeAlignPro> NodeAlignPro基本设置(Basic Settings)> NodeAlignPro UI语言(Language);
|
||||
|
||||
- **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: 确保已选中节点,检查节点是否处于锁定状态,尝试刷新页面。
|
||||
- **Q: 对齐功能无效?** →A: 确保选中2个或更多节点,检查节点选择状态,尝试清除选择后重新选择。
|
||||
- **Q: 如何重置所有设置?** →A: 右键菜单 → "一键重置",或清除浏览器localStorage。
|
||||
- **Q: 如何显示插件操作日志?** →A: 直接输入控制台命令:``` document.getElementById('hDebugInfo_V2')?.style.setProperty('display', 'block', 'important'); ```
|
||||
- **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。```
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ 技术特性
|
||||
|
||||
### 架构设计
|
||||
- **🌐原生开发**:仅使用原生JS+CSS从零实现
|
||||
- **🔒零依赖**:不依赖任何第三方框架/库或现有代码段<small style="color:#999">(仅在__init__.py中导入了必要的Python官方内置的OS模块)</small>
|
||||
- **📴全离线运行**:全本地化运行,不依赖任何网络资源,确保本地化私有部署的安全可靠性
|
||||
- **📄单文件特性**:单文件集中开发,虽整体略显冗长,但方便集中管理,和调试维护<small style="color:#999">(哪怕只用Windows自带的记事本,事实上很多次的小改动就是直接用记事本微调测试的)</small>
|
||||
- **🧩模块化设计**:颜色、对齐、UI控制器分离<small style="color:#999">(在单文件基础上做到模块分离,在一定程度上方便后续开发)</small>
|
||||
- **🏷️规范化命名**:自定义了一套自己风格的命名,做明显区分
|
||||
- **💻响应式布局**:自适应不同屏幕分辨率
|
||||
- **⚡性能优化**:必要环节的节流和防抖处理
|
||||
- **💾状态持久化**:保存用户设置到本地存储
|
||||
- **✅真开源/不混淆**:完整保留必要的注释和变量参数名,不混淆代码进行伪开源
|
||||
|
||||
### 颜色系统
|
||||
- **HSB/RGB/HEX**:完整颜色空间支持
|
||||
- **实时预览**:节点SVG预览实时更新
|
||||
- **智能分配**:多节点颜色智能分配算法
|
||||
- **CSS变量**:统一主题颜色管理
|
||||
|
||||
### UI组件
|
||||
- **可拖拽容器**:支持边界检测和弹性回弹
|
||||
- **下拉菜单**:平滑动画和悬停交互
|
||||
- **滑块控件**:精确的颜色值调整
|
||||
- **图标系统**:SVG矢量图标渲染
|
||||
|
||||
<details>
|
||||
<summary><b>🖥️ 显示设置...</b></summary>
|
||||
|
||||
```
|
||||
// 显示模式
|
||||
- 常驻显示:始终显示操作面板
|
||||
- 跟随选框:选中2个以上节点时自动显示
|
||||
|
||||
// UI缩放
|
||||
- 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>🔗 模式设置...</b></summary>
|
||||
|
||||
```
|
||||
// 拖拽方式
|
||||
- 解耦:独立拖拽操作面板
|
||||
- 联动:与运行按钮联动定位
|
||||
|
||||
// 工作模式
|
||||
- 对齐模式:基础对齐功能
|
||||
- 专业模式:高级选择工具
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>📁 NodeAlignPro文件结构...</b></summary>
|
||||
|
||||
```
|
||||
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 # 示例图片(内含测试工作流)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## 🔄 更新日志
|
||||
|
||||
### v2.0.3_rc (最新发布)
|
||||
### v2.1.0 (最新2.1版发布)
|
||||
- 优化ComfyUI菜单、新增i18n多语言适配(集成到官方菜单页面)
|
||||
- 重构颜色转换逻辑
|
||||
- 重构屏幕取色功能
|
||||
- 修订并完善Readme文档
|
||||
@@ -246,6 +193,13 @@ ComfyUI_EasyKitHT_NodeAlignPro/
|
||||
<details>
|
||||
<summary><b>📄 历史版本...</b></summary>
|
||||
|
||||
##### v2.0.3_rc
|
||||
- 新增ComfyUI菜单(集成到官方菜单页面)
|
||||
- 重构颜色转换逻辑
|
||||
- 重构屏幕取色功能
|
||||
- 修订并完善Readme文档
|
||||
- 修复若干bug
|
||||
|
||||
##### v2.0.2_rc (2025-12-22)
|
||||
- 完善新版(v2.0.3_rc)界面提示
|
||||
- 修复了一些bug
|
||||
@@ -296,12 +250,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 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.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/zh/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 @version v2.0.3 @lastUpdated 2026-01-24 @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,7 +271,7 @@ ca28236: Initial commit
|
||||
## 🤝 贡献指南
|
||||
|
||||
- 欢迎通过以下方式参与改进:
|
||||
```提交使用反馈```、`New Issue`、```改进代码逻辑```、`Fork & PR`、```完善多语言文档```、```分享你的创意节点布局```、```分享你的自定义色卡```
|
||||
```提交使用反馈```、`New Issue`、`Discussions`、```改进代码逻辑```、`Fork & PR`、```完善多语言文档```、```分享你的创意节点布局```、```分享你的自定义色卡```
|
||||
|
||||
## 📜 许可证
|
||||
|
||||
@@ -317,18 +279,18 @@ ca28236: Initial commit
|
||||
|
||||
## 👥 贡献者
|
||||
|
||||
- [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)...
|
||||
- 项目发起人 & 主要开发者: [@ArtsticH](https://github.com/ArtsticH)
|
||||
- ISISUES & Discussions: [@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)、[@BlissiraHQ](https://github.com/BlissiraHQ)...
|
||||
- 感谢所有提供帮助的设计师、开发者、测试者、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待录制)
|
||||
- [源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)
|
||||
- 作者视频教程链接:https://www.bilibili.com/video/BV1V7G9z9EcU (此链接为旧版`v1.0.4_rc`教程,新版v2.1.0待录制)
|
||||
|
||||
---
|
||||
|
||||
👨💻 设计师业余开发的第一个小项目,欢迎反馈使用问题
|
||||
⚠️ 可能存在未测试场景的异常,请通过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年01月25日 10:24 @[ArtsticH](https://github.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro)·2025</small>
|
||||
@@ -1,7 +1,7 @@
|
||||
import os
|
||||
|
||||
# 版本定义
|
||||
# __version__ = "2.0.3"
|
||||
# __version__ = "2.1.13"
|
||||
# VERSION = __version__
|
||||
|
||||
# 节点注册
|
||||
@@ -14,6 +14,4 @@ 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/hNodeAlignPro.js", "web/hNodeAlignPro_cfg.js"] # , "web/hNodeAlignPro_settings.js", "web/hNodeAlignPro_n2.js"
|
||||
|
Before Width: | Height: | Size: 220 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 179 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"
|
||||
name = "easykit-node-align"
|
||||
# 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"}
|
||||
version = "2.1.13"
|
||||
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://raw.githubusercontent.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/main/web/hNodeAlignPro__LOGO_icon.svg"
|
||||
Banner = "https://raw.githubusercontent.com/ArtsticH/ComfyUI_EasyKitHT_NodeAlignPro/main/web/h_NodeAlignPro_v2__UI__Mgr_banner.png"
|
||||
includes = []
|
||||
# "requires-comfyui" = ">=1.0.0" # ComfyUI version compatibility
|
||||
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
/**
|
||||
* @Artstich_Example
|
||||
* @name easykit-node-align (ComfyUI Plugin)
|
||||
* @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.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/zh/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 @version v2.0.3 @lastUpdated 2026-01-24 @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 = {
|
||||
// 格式:{ cn: '中文文本', en: 'English Text' }
|
||||
// 保持单行格式以便于快速编辑
|
||||
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_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'},
|
||||
|
||||
Debug_Tips: {cn: 'v2.0.3_rc新版功能:按Shift、Alt、Ctrl Alt切换不同色卡模式...\nAlt+对齐按钮:对齐到“反向基准”节点^_^(右键菜单>【新版说明】隐藏本提示)', en: 'v2.0.3_rc: Use Shift/Alt/Ctrl+Alt to switch Alignment Mode...\nAlt+Align button: align to reversed reference node ^_^ (HideThis: Right-click > New Tips)'},
|
||||
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: 'Reset All'},
|
||||
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];
|
||||
}
|
||||
|
||||
// 将API暴露在window对象上
|
||||
window.hLanguage = {
|
||||
t,
|
||||
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;
|
||||
const text = 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 {
|
||||
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;
|
||||
const text = 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);
|
||||
}
|
||||
})();
|
||||
@@ -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,450 @@
|
||||
/**
|
||||
* @Artstich_Example
|
||||
* @name easykit-node-align (ComfyUI Plugin)
|
||||
* @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.
|
||||
* @author ArtsticH
|
||||
* @see https://registry.comfy.org/zh/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 @version v2.0.3 @lastUpdated 2026-01-24 @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') {
|
||||
target[methodName](value);
|
||||
return 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;
|
||||
}
|
||||
|
||||
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 {
|
||||
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', '🔥NodeAlignPro已重置!直接可用,无需重复刷新页面'); console.log('🔥NodeAlignPro已重置!直接可用,无需重复刷新页面'); } // 如果开关已关闭,则不刷新,仅记录日志
|
||||
}, 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颜色预设 (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); }
|
||||
}
|
||||
// 尝试ACbar管理器
|
||||
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') {
|
||||
// 'auto'表示不强制特定语言;遵循浏览器/ComfyUI设置
|
||||
if (value === 'auto') window.hLanguage.setLang('auto'); else window.hLanguage.setLang(value);
|
||||
// 立即应用到文档和现有插件容器
|
||||
try { window.hLanguage.applyToDOM(document); } catch (e) { console.warn('应用语言到DOM失败:', e); }
|
||||
// 如果存在插件容器,也应用到该容器
|
||||
try { const c = document.getElementById('hNodeAlignKit'); if (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 { if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setAlignButtonColor === 'function') { window.NodeAlignProSettingsManager.setAlignButtonColor(newVal); } else __hNodeAlignPro_safeCall(null, null, 'alignButtonColor', newVal); } catch (error) { console.error('设置对齐按钮颜色失败:', 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 { if (window.NodeAlignProSettingsManager && typeof window.NodeAlignProSettingsManager.setToolbarBgColor === 'function') { window.NodeAlignProSettingsManager.setToolbarBgColor(newVal); } else __hNodeAlignPro_safeCall(null, null, 'toolbarBgColor', newVal); } catch (error) { console.error('设置工具栏背景色失败:', error); } }
|
||||
},
|
||||
|
||||
{
|
||||
id: "hNodeAlignPro.hOpacity", name: h_i18n('Setting_ToolbarOpacity','工具栏透明度'), type: "slider",
|
||||
defaultValue: 95,
|
||||
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); } }
|
||||
}
|
||||
];
|
||||
|
||||
// 初始化函数
|
||||
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() {
|
||||
try {
|
||||
// ComfyUI会自动注册通过`settings`字段传递的设置
|
||||
// 避免在此处手动调用addSetting,以防止重复注册错误
|
||||
initNodeAlignProSettings(); // 初始化设置管理器和相关回调
|
||||
console.info("[NodeAlignPro 设置模块] 已注册( NodeAlignPro.Settings)", NodeAlignProSettings.map(s => s.id));
|
||||
} catch (e) { console.error('[NodeAlignPro 设置模块] 初始化时发生异常( NodeAlignPro.Settings):', e); }
|
||||
},
|
||||
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', 'hNodeAlignPro_Logic'];
|
||||
storageKeys.forEach(key => { localStorage.removeItem(key); }); console.log('所有相关localStorage项已清除');
|
||||
} catch (error) { console.error('清除localStorage失败:', error); }
|
||||
}
|
||||
|
||||
// 【== 节点对齐工具 ==】
|
||||
const __hNAP_AlignTools = {
|
||||
// 左对齐(X轴)
|
||||
hBtnA_alignLeft(e) {
|
||||
if (__hIsNode2Mode()) {
|
||||
const nodes = __hNode2_getSelectedNodes();
|
||||
if (nodes && nodes.length) {
|
||||
const isAlt = !!(e && e.altKey);
|
||||
// 找到基准节点:Alt+点击时使用最右侧节点的左边缘,否则使用最左侧节点的左边缘
|
||||
const refNode = isAlt ? nodes.reduce((maxNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const maxPos = __hNode2_getNodePos(maxNode);
|
||||
return (pos.x + __hNode2_getNodeSize(node).w) > (maxPos.x + __hNode2_getNodeSize(maxNode).w) ? node : maxNode;
|
||||
}, nodes[0]) : nodes.reduce((minNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const minPos = __hNode2_getNodePos(minNode);
|
||||
return pos.x < minPos.x ? node : minNode;
|
||||
}, nodes[0]);
|
||||
|
||||
const refX = __hNode2_getNodePos(refNode).x;
|
||||
const result = nodes.map(node => ({
|
||||
node: node,
|
||||
newPos: { x: refX, y: __hNode2_getNodePos(node).y },
|
||||
newSize: __hNode2_getNodeSize(node)
|
||||
}));
|
||||
|
||||
if (window.app && window.app.canvas && typeof window.app.canvas.repositionNodesVueMode === 'function') {
|
||||
window.app.canvas.repositionNodesVueMode(result);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 传统模式下的修复:确保Alt+点击时使用最右侧节点的左边缘
|
||||
__hNAP_AlignFc.handleAlign(e, 0, (nodes, isAlt) => {
|
||||
if (isAlt) {
|
||||
// 找到最右侧节点
|
||||
const rightmostNode = nodes.reduce((maxNode, node) =>
|
||||
(node.pos[0] + node.size[0]) > (maxNode.pos[0] + maxNode.size[0]) ? node : maxNode
|
||||
, nodes[0]);
|
||||
return rightmostNode.pos[0];
|
||||
}
|
||||
return Math.min(...nodes.map(n => n.pos[0]));
|
||||
}, (n, ref) => n.pos[0] = ref);
|
||||
},
|
||||
|
||||
// 右对齐(X轴)
|
||||
hBtnC_alignRight(e) {
|
||||
if (__hIsNode2Mode()) {
|
||||
const nodes = __hNode2_getSelectedNodes();
|
||||
if (nodes && nodes.length) {
|
||||
const isAlt = !!(e && e.altKey);
|
||||
// 找到基准节点:Alt+点击时使用最左侧节点的右边缘,否则使用最右侧节点的右边缘
|
||||
const refNode = isAlt ? nodes.reduce((minNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const minPos = __hNode2_getNodePos(minNode);
|
||||
return pos.x < minPos.x ? node : minNode;
|
||||
}, nodes[0]) : nodes.reduce((maxNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const maxPos = __hNode2_getNodePos(maxNode);
|
||||
return (pos.x + __hNode2_getNodeSize(node).w) > (maxPos.x + __hNode2_getNodeSize(maxNode).w) ? node : maxNode;
|
||||
}, nodes[0]);
|
||||
|
||||
const refX = __hNode2_getNodePos(refNode).x + __hNode2_getNodeSize(refNode).w;
|
||||
const result = nodes.map(node => ({
|
||||
node: node,
|
||||
newPos: { x: refX - __hNode2_getNodeSize(node).w, y: __hNode2_getNodePos(node).y },
|
||||
newSize: __hNode2_getNodeSize(node)
|
||||
}));
|
||||
|
||||
if (window.app && window.app.canvas && typeof window.app.canvas.repositionNodesVueMode === 'function') {
|
||||
window.app.canvas.repositionNodesVueMode(result);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 传统模式下的修复:确保Alt+点击时使用最左侧节点的右边缘
|
||||
__hNAP_AlignFc.handleAlign(e, 0, (nodes, isAlt) => {
|
||||
if (isAlt) {
|
||||
// 找到最左侧节点
|
||||
const leftmostNode = nodes.reduce((minNode, node) =>
|
||||
node.pos[0] < minNode.pos[0] ? node : minNode
|
||||
, nodes[0]);
|
||||
return leftmostNode.pos[0] + leftmostNode.size[0];
|
||||
}
|
||||
return Math.max(...nodes.map(n => n.pos[0] + n.size[0]));
|
||||
}, (n, ref) => n.pos[0] = ref - n.size[0]);
|
||||
},
|
||||
|
||||
// 顶对齐(Y轴)
|
||||
hBtnD_alignTop(e) {
|
||||
if (__hIsNode2Mode()) {
|
||||
const nodes = __hNode2_getSelectedNodes();
|
||||
if (nodes && nodes.length) {
|
||||
const isAlt = !!(e && e.altKey);
|
||||
// 找到基准节点:Alt+点击时使用最底部节点的上边缘,否则使用最顶部节点的上边缘
|
||||
const refNode = isAlt ? nodes.reduce((maxNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const maxPos = __hNode2_getNodePos(maxNode);
|
||||
return (pos.y + __hNode2_getNodeSize(node).h) > (maxPos.y + __hNode2_getNodeSize(maxNode).h) ? node : maxNode;
|
||||
}, nodes[0]) : nodes.reduce((minNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const minPos = __hNode2_getNodePos(minNode);
|
||||
return pos.y < minPos.y ? node : minNode;
|
||||
}, nodes[0]);
|
||||
|
||||
const refY = __hNode2_getNodePos(refNode).y;
|
||||
const result = nodes.map(node => ({
|
||||
node: node,
|
||||
newPos: { x: __hNode2_getNodePos(node).x, y: refY },
|
||||
newSize: __hNode2_getNodeSize(node)
|
||||
}));
|
||||
|
||||
if (window.app && window.app.canvas && typeof window.app.canvas.repositionNodesVueMode === 'function') {
|
||||
window.app.canvas.repositionNodesVueMode(result);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 传统模式下的修复:确保Alt+点击时使用最底部节点的上边缘
|
||||
__hNAP_AlignFc.handleAlign(e, 1, (nodes, isAlt) => {
|
||||
if (isAlt) {
|
||||
// 找到最底部节点
|
||||
const bottommostNode = nodes.reduce((maxNode, node) =>
|
||||
(node.pos[1] + node.size[1]) > (maxNode.pos[1] + maxNode.size[1]) ? node : maxNode
|
||||
, nodes[0]);
|
||||
return bottommostNode.pos[1];
|
||||
}
|
||||
return Math.min(...nodes.map(n => n.pos[1]));
|
||||
}, (n, ref) => n.pos[1] = ref);
|
||||
},
|
||||
|
||||
// 底对齐(Y轴)
|
||||
hBtnF_alignButton(e) {
|
||||
if (__hIsNode2Mode()) {
|
||||
const nodes = __hNode2_getSelectedNodes();
|
||||
if (nodes && nodes.length) {
|
||||
const isAlt = !!(e && e.altKey);
|
||||
// 找到基准节点:Alt+点击时使用最顶部节点的下边缘,否则使用最底部节点的下边缘
|
||||
const refNode = isAlt ? nodes.reduce((minNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const minPos = __hNode2_getNodePos(minNode);
|
||||
return pos.y < minPos.y ? node : minNode;
|
||||
}, nodes[0]) : nodes.reduce((maxNode, node) => {
|
||||
const pos = __hNode2_getNodePos(node);
|
||||
const maxPos = __hNode2_getNodePos(maxNode);
|
||||
return (pos.y + __hNode2_getNodeSize(node).h) > (maxPos.y + __hNode2_getNodeSize(maxNode).h) ? node : maxNode;
|
||||
}, nodes[0]);
|
||||
|
||||
const refY = __hNode2_getNodePos(refNode).y + __hNode2_getNodeSize(refNode).h;
|
||||
const result = nodes.map(node => ({
|
||||
node: node,
|
||||
newPos: { x: __hNode2_getNodePos(node).x, y: refY - __hNode2_getNodeSize(node).h },
|
||||
newSize: __hNode2_getNodeSize(node)
|
||||
}));
|
||||
|
||||
if (window.app && window.app.canvas && typeof window.app.canvas.repositionNodesVueMode === 'function') {
|
||||
window.app.canvas.repositionNodesVueMode(result);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 传统模式下的修复:确保Alt+点击时使用最顶部节点的下边缘
|
||||
__hNAP_AlignFc.handleAlign(e, 1, (nodes, isAlt) => {
|
||||
if (isAlt) {
|
||||
// 找到最顶部节点
|
||||
const topmostNode = nodes.reduce((minNode, node) =>
|
||||
node.pos[1] < minNode.pos[1] ? node : minNode
|
||||
, nodes[0]);
|
||||
return topmostNode.pos[1] + topmostNode.size[1];
|
||||
}
|
||||
return Math.max(...nodes.map(n => n.pos[1] + n.size[1]));
|
||||
}, (n, ref) => n.pos[1] = ref - n.size[1]);
|
||||
}
|
||||
};
|
||||
@@ -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); }
|
||||
}
|
||||
|
After Width: | Height: | Size: 242 KiB |