${__hSvgFc_ColorSVG.colorCircle(colorValue)}
`
+ : __hSvgFc_ColorSVG.colorCircle(colorValue))
+ : __hSvgFc_ColorSVG.plusIcon();
+ break;
+ case 'ctrl':
+ case 'ctrl_shift':
+ case 'alt_shift': colorValue = __hColorCfg.defaultColors[index]; content = __hSvgFc_ColorSVG.colorCircle(colorValue); break;
+ default: colorValue = __hColorCfg.defaultColors[index]; content = __hSvgFc_ColorSVG.colorCircle(colorValue);
+ }
+ showCustomColorBtn ? btn.classList.add('custom-color-btn') : btn.classList.remove('custom-color-btn');
+ btn.innerHTML = content; btn.dataset.colorValue = colorValue;
+ });
+ }
+
+ // 绑定事件 - 移除鼠标范围检测
+ bindEvents() {
+ // 绑定全局键盘事件
+ document.addEventListener('keydown', e => this.handleKeyDown(e), { passive: false }); document.addEventListener('keyup', e => this.handleKeyUp(e));
+
+ // 窗口失焦/聚焦处理
+ window.addEventListener('blur', () => this.handleWindowBlur()); window.addEventListener('focus', () => this.handleWindowFocus());
+
+ // 【保持原有】颜色按钮事件绑定
+ this.colorButtons.forEach((btn, index) => {
+ if (!btn) return;
+ btn.addEventListener('click', () => this.handleColorButtonClick(index));
+ btn.addEventListener('mousedown', e => this.handleColorBtnMouseDown(e, index));
+ btn.addEventListener('dblclick', e => this.handleColorBtnDblClick(e, index));
+ btn.addEventListener('dragstart', e => e.preventDefault());
+ btn.addEventListener('selectstart', e => e.preventDefault());
+ });
+
+ // 【保持原有】功能按钮事件绑定
+ Object.values(this.funcButtons).forEach(btn => btn && (btn.addEventListener('dragstart', e => e.preventDefault()), btn.addEventListener('selectstart', e => e.preventDefault())));
+
+ // 【保持原有】功能按钮点击事件
+ this.funcButtons.pick?.addEventListener('click', e => this.handlePickBtnClick(e));
+ this.funcButtons.random?.addEventListener('click', () => this.handleRandomBtnClick());
+ this.funcButtons.clear?.addEventListener('click', () => this.handleClearBtnClick());
+
+ // 【保持原有】其他事件
+ this.hiddenColorPicker?.addEventListener('input', e => this.handleColorPickerChange(e));
+ this.colorBar?.addEventListener('dragstart', e => e.preventDefault());
+ this.colorBar?.addEventListener('selectstart', e => e.preventDefault());
+ this.nodeAlignKit?.addEventListener('dragstart', e => e.preventDefault());
+ this.nodeAlignKit?.addEventListener('selectstart', e => e.preventDefault());
+ }
+
+ // 处理窗口失焦 - 重置状态
+ handleWindowBlur() { this.savedState = { currentMode: this.currentMode }; this.activeKeys.clear(); this.currentMode = 'default'; this.clearThrottleTimer(); this.updateUI(); }
+
+ // 处理窗口聚焦
+ handleWindowFocus() { this.savedState && (this.currentMode = this.savedState.currentMode, this.savedState = null, this.updateUI()); }
+
+ // 处理按键按下
+ handleKeyDown(e) { const key = e.key.toLowerCase(); if (!['shift', 'alt', 'control', 'meta'].includes(key)) return; key === 'alt' && e.preventDefault(); this.activeKeys.add(key); this.switchModeSafely(this.determineMode()); }
+
+ // 处理按键松开
+ handleKeyUp(e) { const key = e.key.toLowerCase(); if (!['shift', 'alt', 'control', 'meta'].includes(key)) return; this.activeKeys.delete(key); this.switchModeSafely(this.determineMode()); }
+
+ // 模式判定逻辑
+ determineMode() {
+ const keys = Array.from(this.activeKeys);
+ return keys.includes('alt') && keys.includes('control') ? 'ctrl_alt' :
+ keys.includes('shift') && keys.includes('control') ? 'ctrl_shift' :
+ keys.includes('alt') && keys.includes('shift') ? 'alt_shift' :
+ keys.includes('alt') ? 'alt' :
+ keys.includes('shift') ? 'shift' :
+ keys.includes('control') ? 'ctrl' : 'default';
+ }
+
+ // 安全切换模式（带节流）
+ switchModeSafely(newMode) {
+ const now = Date.now(), timeSinceLastSwitch = now - this.modeSwitchThrottle.lastSwitchTime;
+ if (timeSinceLastSwitch < this.modeSwitchThrottle.throttleMs) {
+ this.modeSwitchThrottle.pendingMode = newMode; this.clearThrottleTimer();
+ this.modeSwitchThrottle.timeoutId = setTimeout(() => {
+ if (this.modeSwitchThrottle.pendingMode === newMode) { this.applyModeSwitch(newMode); this.modeSwitchThrottle.lastSwitchTime = Date.now(); this.modeSwitchThrottle.pendingMode = null; }
+ }, this.modeSwitchThrottle.throttleMs - timeSinceLastSwitch); return;
+ }
+ this.applyModeSwitch(newMode); this.modeSwitchThrottle.lastSwitchTime = now;
+ }
+
+ applyModeSwitch(newMode) {
+ if (newMode !== this.currentMode) {
+ // 退出当前模式的日志
+ if (this.currentMode !== 'default') {
+ const prevKeyName = this.keyNames[this.currentMode] || this.currentMode;
+ const prevModeName = this.modeNames[this.currentMode];
+ }
+
+ // 进入新模式的日志
+ if (newMode === 'default') {
+ hLog.debug('--@hColorMode', '已恢复【默认】模式');
+ } else {
+ const keyName = this.keyNames[newMode] || newMode;
+ const modeName = this.modeNames[newMode];
+
+ if (modeName) {
+ hLog.debug('--@hColorMode', `已进入【${modeName}】模式(${keyName})`);
+ } else {
+ hLog.debug('--@hColorMode', `(${keyName})开发中...`);
+ }
+ }
+
+ this.currentMode = newMode;
+ this.updateUI();
+ }
+ }
+ // 清除节流定时器
+ clearThrottleTimer() { this.modeSwitchThrottle.timeoutId && (clearTimeout(this.modeSwitchThrottle.timeoutId), this.modeSwitchThrottle.timeoutId = null); }
+
+ // ============ 以下是保持原有的颜色按钮功能代码 ============
+
+ // 【保持原有】颜色按钮点击事件
+ handleColorButtonClick(index) {
+ if (['ctrl_alt', 'ctrl_shift', 'alt_shift'].includes(this.currentMode)) return;
+ let colorValue;
+ switch (this.currentMode) {
+ case 'default':
+ const colorMap = { 0: 'hColor1_Red', 1: 'hColor2_Orange', 2: 'hColor3_Yellow', 3: 'hColor4_Green', 4: 'hColor5_Cyan', 5: 'hColor6_Blue', 6: 'hColor7_Purple' };
+ __hMgr_ComfyUINode.setNodesColor(colorMap[index]); colorValue = __hColorCfg.defaultColors[index]; break;
+ case 'shift':
+ colorValue = __hColorCfg.grayScaleColors[index]; __hMgr_ComfyUINode.__hFc_Color2Nodes(colorValue); break;
+ case 'alt':
+ colorValue = this.customColors[index];
+ colorValue ? __hMgr_ComfyUINode.__hFc_Color2Nodes(colorValue) : (this.toggleColorPicker(null), this.doubleClickedIndex = index); break;
+ default: return;
+ }
+ }
+
+ // 【保持原有】颜色按钮鼠标按下事件
+ handleColorBtnMouseDown(e, index) {
+ if (this.currentMode !== 'ctrl_alt') return;
+ e.preventDefault();
+ this.customColors[index] === null ? this.customColors[index] = this.getRandomColor() : this.lockedColors[index] = !this.lockedColors[index];
+ this.renderColorButtons();
+ }
+
+ // 【保持原有】颜色按钮双击事件
+ handleColorBtnDblClick(e, index) { e.preventDefault(); (this.currentMode === 'alt' && !this.lockedColors[index]) && (this.toggleColorPicker(e), this.doubleClickedIndex = index); }
+ // 【保持原有】取色按钮点击事件
+ handlePickBtnClick(e) { !this.funcButtons.pick.classList.contains('disabled-state') && this.toggleColorPicker(e); }
+
+ handleClearBtnClick() {
+ if (this.funcButtons.clear.classList.contains('disabled-state')) return;
+ this.funcButtons.random && (this.funcButtons.random.style.backgroundColor = '', __hUpdater_UI.restoreDefaultSvgColor(this.funcButtons.random));
+ this.resetColorPicker();
+ switch (this.currentMode) {
+ case 'default': __hMgr_ComfyUINode.resetNodesColor(); hLog.warn('--@hClearBtn', '已清除节点颜色(仅对选择的节点时生效)'); break;
+ case 'alt': // Alt模式：清除未锁定的自定义颜色 + 清除节点颜色
+ for (let i = 0; i < 7; i++) !this.lockedColors[i] && (this.customColors[i] = null); this.renderColorButtons(); __hMgr_ComfyUINode.resetNodesColor(); hLog.warn('--@hClearBtn', '已清除自定义颜色(Alt)（不含锁定色）'); break;
+ default: __hMgr_ComfyUINode.resetNodesColor();
+ }
+ }
+
+ // 【保持原有】随机按钮点击事件
+ handleRandomBtnClick() {
+ if (this.funcButtons.random.classList.contains('disabled-state')) return;
+ if (this.currentMode === 'default') {
+ const randomColor = __hMgr_ComfyUINode.applyRandomColorToSelectedNodes();
+ randomColor && (this.funcButtons.random.style.backgroundColor = randomColor, __hUpdater_UI.updateButtonSvgColor(this.funcButtons.random, randomColor));
+ return;
+ }
+ if (this.currentMode === 'alt') {
+ for (let i = 0; i < 7; i++) this.customColors[i] = !this.lockedColors[i] ? this.getRandomColor() : this.customColors[i];
+ this.renderColorButtons(); const availableColors = this.customColors.filter(color => !!color);
+ const targetColor = availableColors.length > 0 ? availableColors[Math.floor(Math.random() * availableColors.length)] : this.getRandomColor();
+ this.funcButtons.random.style.backgroundColor = targetColor; __hUpdater_UI.updateButtonSvgColor(this.funcButtons.random, targetColor);
+ const app = __hMgr_ComfyUINode.getComfyUIAppInstance();
+ if (!app || !app.graph) return;
+ const selectedNodes = __hMgr_ComfyUINode.getSelectedNodes().filter(node => !node.is_system);
+ const selectedGroups = __hMgr_ComfyUINode.getSelectedGroups(app);
+ if (selectedNodes.length === 0 && selectedGroups.length === 0) return;
+ if (availableColors.length === 0) { hLog.warn('没有可用颜色'); return; }
+ const colorTargets = [...selectedNodes.map(node => ({ type: 'node', target: node })), ...selectedGroups.map(group => ({ type: 'group', target: group }))];
+ if (!colorTargets.length) return;
+ const assignedColors = this.assignColorsWithMinDuplication(colorTargets, availableColors);
+ colorTargets.forEach((target, index) => {
+ const color = assignedColors[index]; if (!color) return;
+ if (target.type === 'node') { __hMgr_ComfyUINode.applyColorToSingleNode(target.target, color); }
+ else { const group = target.target; group.color = __hMgr_ComfyUINode.rgbToHex(color); group.children && group.children.forEach(nodeID => { const node = app.graph.getNodeById(nodeID); node && __hMgr_ComfyUINode.applyColorToSingleNode(node, color); }); }
+ });
+ app.graph.setDirtyCanvas(true, true); app.graph.afterChange && app.graph.afterChange();
+ return;
+ }
+ const color = this.getRandomColor(); this.funcButtons.random.style.backgroundColor = color; __hUpdater_UI.updateButtonSvgColor(this.funcButtons.random, color);
+ }
+
+ // 【保持原有】智能分配颜色方法
+ assignColorsWithMinDuplication(targets, colors) {
+ const colorCount = colors.length, targetCount = targets.length, assignedColors = [], shuffledColors = [...colors];
+ for (let i = shuffledColors.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1));[shuffledColors[i], shuffledColors[j]] = [shuffledColors[j], shuffledColors[i]]; }
+ if (targetCount <= colorCount) return assignedColors.push(...shuffledColors.slice(0, targetCount)), assignedColors;
+ const fullCycles = Math.floor(targetCount / colorCount), remainder = targetCount % colorCount;
+ for (let i = 0; i < fullCycles; i++) {
+ const cycleShuffled = [...shuffledColors];
+ for (let j = cycleShuffled.length - 1; j > 0; j--) { const k = Math.floor(Math.random() * (j + 1));[cycleShuffled[j], cycleShuffled[k]] = [cycleShuffled[k], cycleShuffled[j]]; }
+ assignedColors.push(...cycleShuffled);
+ }
+ return assignedColors.push(...shuffledColors.slice(0, remainder)), assignedColors;
+ }
+
+ // 【保持原有】取色器相关方法
+ toggleColorPicker(e) {
+ e?.stopPropagation();
+ const colorPickerPanel = this.colorPickerPanel;
+ if (!colorPickerPanel) return;
+ const isVisible = colorPickerPanel.style.display !== 'none';
+
+ isVisible ? this.hideColorPicker() : (() => {
+ colorPickerPanel.style.display = 'block';
+ this.initColorPickerPosition();
+ this.addColorPickerOutsideClickHandler();
+ // 确保取色器canvas立即初始化
+ setTimeout(() => {
+ window.colorPicker && window.colorPicker.updateAllUI ? window.colorPicker.updateAllUI() : void 0;
+ const canvas = document.getElementById('hCPr__mainPicker_colorCanvas');
+ canvas && (canvas.width === 0 || canvas.height === 0) ? (canvas.width = 220, canvas.height = 220, canvas.style.width = '220px', canvas.style.height = '220px') : void 0;
+ }, 10);
+ window.colorPicker && (() => { const { h, s, b } = window.colorPicker.currentColor, { r, g, b: rgbB } = window.colorPicker.hsbToRgb(h, s, b); this.currentPickerColor = `rgb(${r}, ${g}, ${rgbB})`; })();
+ })();
+ }
+
+ hideColorPicker() {
+ if (this.colorPickerPanel) {
+ this.colorPickerPanel.style.display = 'none';
+ try {
+ document.removeEventListener('mousemove', window.colorAreaDragHandler);
+ document.removeEventListener('mousemove', window.hueDragHandler);
+ document.removeEventListener('mousemove', window.saturationDragHandler);
+ document.removeEventListener('mousemove', window.brightnessDragHandler);
+ document.removeEventListener('mousemove', window.hueControlDragHandler);
+ window.colorPicker?.isDragging && Object.keys(window.colorPicker.isDragging).forEach(key => window.colorPicker.isDragging[key] = false);
+ } catch (e) { hLog.warn('清理取色器事件时出错:', e); }
+ }
+ this.removeColorPickerOutsideClickHandler();
+ (this.doubleClickedIndex !== undefined && this.currentPickerColor) && (this.customColors[this.doubleClickedIndex] = this.currentPickerColor, this.renderColorButtons(), this.doubleClickedIndex = undefined, this.currentPickerColor = null);
+ }
+
+ addColorPickerOutsideClickHandler() {
+ this.removeColorPickerOutsideClickHandler();
+ this.colorPickerOutsideClickHandler = (e) => {
+ const colorPickerPanel = this.colorPickerPanel;
+ if (!colorPickerPanel || colorPickerPanel.style.display === 'none') return;
+ let target = e.target, isClickInside = false;
+ while (target && target !== document) { if (target === colorPickerPanel) { isClickInside = true; break; } target = target.parentNode; }
+ const isPickButton = e.target === this.funcButtons.pick || (this.funcButtons.pick && this.funcButtons.pick.contains(e.target));
+ if (e.type === 'contextmenu') { e.preventDefault(); e.stopPropagation(); this.hideColorPicker(); return; }
+ (!isClickInside && !isPickButton) && this.hideColorPicker();
+ };
+ document.addEventListener('mousedown', this.colorPickerOutsideClickHandler, { capture: true });
+ document.addEventListener('contextmenu', this.colorPickerOutsideClickHandler, { capture: true });
+ if (this.colorPickerPanel) this.colorPickerPanel.addEventListener('contextmenu', (e) => { e.preventDefault(); e.stopPropagation(); this.hideColorPicker(); return false; }, { capture: true });
+ }
+
+ removeColorPickerOutsideClickHandler() {
+ this.colorPickerOutsideClickHandler && (document.removeEventListener('mousedown', this.colorPickerOutsideClickHandler, { capture: true }), document.removeEventListener('contextmenu', this.colorPickerOutsideClickHandler, { capture: true }), this.colorPickerOutsideClickHandler = null);
+ }
+
+ initColorPickerPosition() { this.colorPickerPanel && this.colorBar && window.__hMgr_PopEl__Position?.positionColorPicker(); }
+ handleColorPickerChange(e) {
+ this.state?.colorPickerCallback && (() => {
+ const rgbColor = `rgb(${[1, 3, 5].map(i => parseInt(e.target.value.slice(i, i + 2), 16)).join(',')})`;
+ this.state.colorPickerCallback(rgbColor); this.state.colorPickerCallback = null;
+ __hUpdater_UI.updateButtonSvgColor(this.funcButtons.pick, rgbColor);
+ })();
+ }
+
+ openColorPicker(callback) { this.colorPickerCallback = callback; this.hiddenColorPicker.click(); }
+ getRandomColor() { const r = Math.floor(Math.random() * 256), g = Math.floor(Math.random() * 256), b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; }
+ }
+
+
+ // 【== SVG 图标系统 ==】
+ const __hSVG_Build = (content, { viewBox = "0 0 32 32" }) => ``;
+ const hSVGfc = {
+ Rect: ([x, y, w, h, rx = 0, ry = 0, cls = "hBtn_svg"]) => `