nodes/kk8bit-KayTool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v0.51.0

Browse Source
This commit is contained in:
kk8bit
2025-03-28 16:39:33 +08:00
parent 74dcedf2f3
commit 79b2deee7c
4 changed files with 58 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
locales/zh/settings.json
+3
View File
@@ -37,6 +37,9 @@
},
"tooltip": "切换模式后点击画布空白处或刷新页面即可"
},
"KayTool_NodeAlignBackgroundOpacity": {
"name": "工具栏背景不透明度"
},
"KayTool_NodeAlignBackgroundColor": {
"name": "工具栏背景颜色"
},
pyproject.toml
+1 -1
View File
@@ -1,7 +1,7 @@
[project]
name = "kaytool"
description ="KayTool enhances ComfyUI workflow efficiency with practical tools, including: image processing (resize, color, blur, expand, merge, crop), background/mask tasks via BiRefNet/RemBG, wireless data transfer (Get & Out), AI translation (Tencent/Baidu), dynamic math operations, flexible text handling, precision sliders, metadata/color profile-supported image saving, batch processing via image folder loading, canvas workflow node map export as PNG with embedded metadata, quick Run options via right-click (Run Group/Node), node alignment toolbar with custom styled styles, and custom ComfyUI logo integration."
version = "0.50.1"
version = "0.51.0"
license = {file = "LICENSE"}
dependencies = ["rembg, timm"]
web/nodealign.js
+33 -33
View File
@@ -34,16 +34,17 @@ const KayNodeAlignmentManager = {
const iconBgColor = app.ui.settings.getSettingValue("KayTool.NodeAlignIconBackgroundColor") || "2b2b2b";
const iconColor = app.ui.settings.getSettingValue("KayTool.NodeAlignIconColor") || "666666";
document.head.insertAdjacentHTML('beforeend', `<style>
#kay-node-alignment-toolbar {
position: absolute;
position: fixed; /* 改为 fixed 以覆盖 ComfyUI 菜单栏 */
display: flex;
align-items: center;
gap: 4px;
background: #${bgColor};
padding: 4px;
border-radius: 4px;
z-index: 9999;
z-index: 10000; /* 提高 z-index 确保覆盖菜单栏 */
height: 32px;
white-space: nowrap;
user-select: none;
@@ -55,19 +56,19 @@ const KayNodeAlignmentManager = {
.kay-align-button {
width: 25px;
height: 25px;
display: flex; /* 使用 flex 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #${iconBgColor};
border: none;
cursor: pointer;
padding: 0; /* 移除 padding，确保 SVG 占满 */
padding: 0;
border-radius: 4px;
transition: background-color .3s ease;
flex-shrink: 0;
}
.kay-align-button svg {
width: 70%; /* SVG 占满按钮 */
width: 70%;
height: 70%;
}
.kay-toolbar-divider {
@@ -90,7 +91,7 @@ const KayNodeAlignmentManager = {
padding: 5px 10px;
border-radius: 6px;
display: none;
z-index: 1001;
z-index: 10001;
white-space: nowrap;
font-size: 12px;
}
@@ -98,7 +99,7 @@ const KayNodeAlignmentManager = {
this.toolbarContainer = document.createElement('div');
this.toolbarContainer.id = 'kay-node-alignment-toolbar';
this.canvas.parentElement.appendChild(this.toolbarContainer);
document.body.appendChild(this.toolbarContainer);
this.getAlignmentButtons().forEach(btn => {
const el = document.createElement(btn.type === 'divider' ? 'div' : 'button');
@@ -137,7 +138,7 @@ const KayNodeAlignmentManager = {
this.resizeObserver = new ResizeObserver(() => {
this.updatePosition();
});
this.resizeObserver.observe(this.canvas.parentElement);
this.resizeObserver.observe(document.body);
window.addEventListener('resize', () => {
setTimeout(() => this.updatePosition(), 100);
@@ -163,11 +164,10 @@ const KayNodeAlignmentManager = {
return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
},
getCanvasRect() {
const containerRect = this.canvas.parentElement.getBoundingClientRect();
getWindowRect() {
return {
width: containerRect.width,
height: containerRect.height
width: window.innerWidth,
height: window.innerHeight
};
},
@@ -218,20 +218,20 @@ const KayNodeAlignmentManager = {
updatePosition() {
if (!this.toolbarContainer || !this.isVisible) return;
const canvasRect = this.getCanvasRect();
const windowRect = this.getWindowRect();
const toolbarRect = this.toolbarContainer.getBoundingClientRect();
let left = (this.position.leftPercentage / 100) * canvasRect.width - toolbarRect.width / 2;
let top = (this.position.topPercentage / 100) * canvasRect.height;
let left = (this.position.leftPercentage / 100) * windowRect.width - toolbarRect.width / 2;
let top = (this.position.topPercentage / 100) * windowRect.height;
const snapThreshold = 10;
const snapThreshold = 1; // 吸附边缘阈值
if (left < snapThreshold) left = 0;
if (left + toolbarRect.width > canvasRect.width - snapThreshold) left = canvasRect.width - toolbarRect.width;
if (left + toolbarRect.width > windowRect.width - snapThreshold) left = windowRect.width - toolbarRect.width;
if (top < snapThreshold) top = 0;
if (top + toolbarRect.height > canvasRect.height - snapThreshold) top = canvasRect.height - toolbarRect.height;
if (top + toolbarRect.height > windowRect.height - snapThreshold) top = windowRect.height - toolbarRect.height;
left = Math.max(0, Math.min(left, canvasRect.width - toolbarRect.width));
top = Math.max(0, Math.min(top, canvasRect.height - toolbarRect.height));
left = Math.max(0, Math.min(left, windowRect.width - toolbarRect.width));
top = Math.max(0, Math.min(top, windowRect.height - toolbarRect.height));
this.toolbarContainer.style.left = `${left}px`;
this.toolbarContainer.style.top = `${top}px`;
@@ -240,15 +240,15 @@ const KayNodeAlignmentManager = {
onDragStart(e) {
if (this.dragState.isDragging) return;
const canvasRect = this.getCanvasRect();
const windowRect = this.getWindowRect();
this.dragState = {
isDragging: true,
initialX: e.clientX,
initialY: e.clientY,
startX: this.toolbarContainer.offsetLeft,
startY: this.toolbarContainer.offsetTop,
canvasWidth: canvasRect.width,
canvasHeight: canvasRect.height
windowWidth: windowRect.width,
windowHeight: windowRect.height
};
},
@@ -259,8 +259,8 @@ const KayNodeAlignmentManager = {
let left = this.dragState.startX + (e.clientX - this.dragState.initialX);
let top = this.dragState.startY + (e.clientY - this.dragState.initialY);
left = Math.max(0, Math.min(left, this.dragState.canvasWidth - toolbarRect.width));
top = Math.max(0, Math.min(top, this.dragState.canvasHeight - toolbarRect.height));
left = Math.max(0, Math.min(left, this.dragState.windowWidth - toolbarRect.width));
top = Math.max(0, Math.min(top, this.dragState.windowHeight - toolbarRect.height));
this.toolbarContainer.style.left = `${left}px`;
this.toolbarContainer.style.top = `${top}px`;
@@ -270,11 +270,11 @@ const KayNodeAlignmentManager = {
if (!this.dragState.isDragging) return;
this.dragState.isDragging = false;
const canvasRect = this.getCanvasRect();
const windowRect = this.getWindowRect();
const toolbarRect = this.toolbarContainer.getBoundingClientRect();
this.position.leftPercentage = ((parseFloat(this.toolbarContainer.style.left) + toolbarRect.width / 2) / canvasRect.width) * 100;
this.position.topPercentage = (parseFloat(this.toolbarContainer.style.top) / canvasRect.height) * 100;
this.position.leftPercentage = ((parseFloat(this.toolbarContainer.style.left) + toolbarRect.width / 2) / windowRect.width) * 100;
this.position.topPercentage = (parseFloat(this.toolbarContainer.style.top) / windowRect.height) * 100;
localStorage.setItem('KayNodeAlignToolbarPosition', JSON.stringify(this.position));
this.updatePosition();
@@ -299,9 +299,9 @@ const KayNodeAlignmentManager = {
if (nodes.length > 0) {
const avgX = nodes.reduce((sum, n) => sum + n.pos[0], 0) / nodes.length;
const avgY = nodes.reduce((sum, n) => sum + n.pos[1], 0) / nodes.length;
const canvasRect = this.getCanvasRect();
this.position.leftPercentage = avgX > canvasRect.width / 2 ? 25 : 75;
this.position.topPercentage = avgY > canvasRect.height / 2 ? 5 : 25;
const windowRect = this.getWindowRect();
this.position.leftPercentage = avgX > windowRect.width / 2 ? 25 : 75;
this.position.topPercentage = avgY > windowRect.height / 2 ? 5 : 25;
} else {
this.position = { leftPercentage: 50, topPercentage: 5 };
}
web/settings.js
+21 -1
View File
@@ -116,6 +116,25 @@ app.registerExtension({
}
});
app.ui.settings.addSetting({
id: "KayTool.NodeAlignBackgroundOpacity",
name: "Node Alignment Toolbar Background Opacity",
type: "slider",
defaultValue: 100,
attrs: { min: 0, max: 100, step: 1 },
category: ["KayTool", "NodeAlignment", "BackgroundOpacity"],
onChange: (newVal) => {
const toolbar = document.getElementById('kay-node-alignment-toolbar');
if (toolbar) {
const bgColor = app.ui.settings.getSettingValue("KayTool.NodeAlignBackgroundColor");
if (/^[0-9A-Fa-f]{6}$/.test(bgColor)) {
const opacity = newVal / 100;
toolbar.style.background = `rgba(${parseInt(bgColor.substr(0, 2), 16)}, ${parseInt(bgColor.substr(2, 2), 16)}, ${parseInt(bgColor.substr(4, 2), 16)}, ${opacity})`;
}
}
}
});
app.ui.settings.addSetting({
id: "KayTool.NodeAlignBackgroundColor",
name: "Node Alignment Toolbar Background Color",
@@ -125,7 +144,8 @@ app.registerExtension({
onChange: (newVal) => {
const toolbar = document.getElementById('kay-node-alignment-toolbar');
if (toolbar && /^[0-9A-Fa-f]{6}$/.test(newVal)) {
toolbar.style.background = `#${newVal}`;
const opacity = app.ui.settings.getSettingValue("KayTool.NodeAlignBackgroundOpacity") / 100;
toolbar.style.background = `rgba(${parseInt(newVal.substr(0, 2), 16)}, ${parseInt(newVal.substr(2, 2), 16)}, ${parseInt(newVal.substr(4, 2), 16)}, ${opacity})`;
}
}
});