custom-nodes/Comfyui_LG_Tools/web/note.js

import { app } from "../../scripts/app.js";

// 基础虚拟节点类
class BaseVirtualNode extends LGraphNode {
    constructor(title = "BaseVirtualNode") {
        super(title);
        this.comfyClass = "BaseVirtualNode";
        this.isVirtualNode = true;
        this.properties = this.properties || {};
        this.widgets = this.widgets || [];
    }

    static setUp() {
        if (!this.type) {
            throw new Error(`Missing type for BaseVirtualNode: ${this.title}`);
        }
        LiteGraph.registerNodeType(this.type, this);
        if (this._category) {
            this.category = this._category;
        }
    }
}

// LG节点类
export class lg_note extends BaseVirtualNode {
    constructor(title = lg_note.title) {
        super(title);
        this.comfyClass = "LG_Note";
        this.resizable = true; // 启用可调整大小

        // 默认属性
        this.properties["fontSize"] = 12;
        this.properties["fontFamily"] = "Arial";
        this.properties["fontColor"] = "#ffffff";
        this.properties["textAlign"] = "center";
        this.properties["backgroundColor"] = "transparent";
        this.properties["padding"] = 0;
        this.properties["borderRadius"] = 0;
        this.properties["autoScale"] = true; // 是否启用自动缩放
        this.properties["baseFontSize"] = 36; // 基础字体大小，用于缩放计算

        // 初始大小
        this.size = [160, 40];
        this.baseSize = [160, 40]; // 基础大小，用于缩放计算

        this.color = "#fff0";
        this.bgcolor = "#fff0";
    }

    // 计算缩放后的字体大小
    calculateScaledFontSize() {
        if (!this.properties["autoScale"]) {
            return this.properties["fontSize"];
        }

        // 计算缩放比例（基于宽度和高度的平均值）
        const widthScale = this.size[0] / this.baseSize[0];
        const heightScale = this.size[1] / this.baseSize[1];
        const scale = (widthScale + heightScale) / 2;

        // 计算缩放后的字体大小，不限制最大最小值
        const scaledFontSize = this.properties["baseFontSize"] * scale;

        // 确保字体大小至少为1像素，避免无效值
        return Math.max(1, scaledFontSize);
    }

    draw(ctx) {
        this.flags = this.flags || {};
        this.flags.allow_interaction = !this.flags.pinned;

        ctx.save();
        this.color = "#fff0";
        this.bgcolor = "#fff0";

        const fontColor = this.properties["fontColor"] || "#ffffff";
        const backgroundColor = this.properties["backgroundColor"] || "";

        // 使用缩放后的字体大小
        const currentFontSize = this.calculateScaledFontSize();
        this.properties["fontSize"] = currentFontSize; // 更新当前字体大小属性

        ctx.font = `${Math.max(currentFontSize || 0, 1)}px ${this.properties["fontFamily"] ?? "Arial"}`;

        const padding = Number(this.properties["padding"]) ?? 0;
        const lines = this.title.replace(/\n*$/, "").split("\n");

        // 如果不是自动缩放模式，则根据文本内容调整节点大小
        if (!this.properties["autoScale"]) {
            const maxWidth = Math.max(...lines.map((s) => ctx.measureText(s).width));
            this.size[0] = maxWidth + padding * 2;
            this.size[1] = currentFontSize * lines.length + padding * 2;
        }

        // 绘制背景
        if (backgroundColor) {
            ctx.beginPath();
            const borderRadius = Number(this.properties["borderRadius"]) || 0;
            ctx.roundRect(0, 0, this.size[0], this.size[1], [borderRadius]);
            ctx.fillStyle = backgroundColor;
            ctx.fill();
        }

        // 设置文本对齐
        ctx.textAlign = "left";
        let textX = padding;
        if (this.properties["textAlign"] === "center") {
            ctx.textAlign = "center";
            textX = this.size[0] / 2;
        } else if (this.properties["textAlign"] === "right") {
            ctx.textAlign = "right";
            textX = this.size[0] - padding;
        }

        // 绘制文本
        ctx.textBaseline = "middle"; // 使用middle基线
        ctx.fillStyle = fontColor;

        const lineHeight = currentFontSize * 1.2; // 行高稍微大于字体大小
        const totalTextHeight = lines.length * lineHeight;

        // 计算垂直居中的起始位置
        let startY = (this.size[1] - totalTextHeight) / 2 + lineHeight / 2;

        for (let i = 0; i < lines.length; i++) {
            const currentY = startY + i * lineHeight;
            ctx.fillText(lines[i] || " ", textX, currentY);
        }

        ctx.restore();
    }

    onDblClick(event, pos, canvas) {
        LGraphCanvas.active_canvas.showShowNodePanel(this);
    }

    onShowCustomPanelInfo(panel) {
        // 移除不需要的属性面板项
        panel.querySelector('div.property[data-property="Mode"]')?.remove();
        panel.querySelector('div.property[data-property="Color"]')?.remove();
        panel.querySelector('div.property[data-property="baseFontSize"]')?.remove(); // 隐藏baseFontSize属性

        // 为所有属性添加实时回调
        setTimeout(() => {
            this.convertTitleToTextarea(panel);
            this.addRealTimeCallbacks(panel);
            this.createColorPickerRow(panel);
            this.moveSliderPropertiesToEnd(panel);
            this.convertToSlider(panel, "fontSize", 1, 500, 1);
            this.convertToSlider(panel, "padding", 0, 50, 1);
            this.convertToSlider(panel, "borderRadius", 0, 50, 1);
        }, 10);
    }

    // 将 Title 转换为多行文本框
    convertTitleToTextarea(panel) {
        const titleElement = panel.querySelector('div.property[data-property="Title"]');
        if (!titleElement) return;

        const valueElement = titleElement.querySelector('.property_value');
        if (!valueElement) return;

        // 移除原有的contenteditable属性
        valueElement.removeAttribute('contenteditable');

        // 创建多行文本框
        const textarea = document.createElement('textarea');
        textarea.value = this.title || '';
        textarea.style.cssText = `
            width: 100%;
            min-height: 60px;
            max-height: 150px;
            background: rgba(255,255,255,0.1);
            border: 1px solid #555;
            border-radius: 4px;
            padding: 8px;
            color: #fff;
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
            outline: none;
            box-sizing: border-box;
        `;

        // 实时更新事件
        textarea.addEventListener('input', (e) => {
            this.title = e.target.value;
            this.setDirtyCanvas(true, true);
        });

        // 回车键不关闭面板，允许多行输入
        textarea.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                // 允许回车换行，不阻止默认行为
                e.stopPropagation(); // 阻止事件冒泡，防止关闭面板
            }
        });

        // 失去焦点时确保更新
        textarea.addEventListener('blur', (e) => {
            this.title = e.target.value;
            this.setDirtyCanvas(true, true);
        });

        // 替换原有的值显示元素
        valueElement.style.display = 'none';
        titleElement.appendChild(textarea);

        // 调整标题元素的布局
        titleElement.style.cssText = `
            display: block;
            margin: 8px 0;
            padding: 8px 0;
        `;

        // 调整标签样式
        const nameElement = titleElement.querySelector('.property_name');
        if (nameElement) {
            nameElement.style.cssText = `
                display: block;
                margin-bottom: 6px;
                font-weight: bold;
                color: #ccc;
            `;
        }
    }

    // 为所有属性添加实时回调
    addRealTimeCallbacks(panel) {
        // 为文本输入框添加实时回调
        const textProperties = ["fontFamily"];
        textProperties.forEach(propName => {
            const element = panel.querySelector(`div.property[data-property="${propName}"] .property_value`);
            if (element) {
                element.addEventListener('input', () => {
                    this.properties[propName] = element.textContent;
                    this.setDirtyCanvas(true, true);
                });
                element.addEventListener('blur', () => {
                    this.properties[propName] = element.textContent;
                    this.setDirtyCanvas(true, true);
                });
            }
        });

        // 为下拉选择框添加实时回调
        const comboProperties = ["textAlign"];
        comboProperties.forEach(propName => {
            const element = panel.querySelector(`div.property[data-property="${propName}"] .property_value`);
            if (element) {
                // 下拉选择的回调已经在原有代码中处理
            }
        });

        // 为布尔值属性添加实时回调
        const booleanProperties = ["autoScale"];
        booleanProperties.forEach(propName => {
            const element = panel.querySelector(`div.property[data-property="${propName}"]`);
            if (element) {
                // 布尔值的点击事件已经在原有代码中处理，但我们确保它有实时更新
                element.addEventListener('click', () => {
                    // 延迟一点确保值已经更新
                    setTimeout(() => {
                        this.setDirtyCanvas(true, true);
                        // 当 autoScale 状态改变时，更新 fontSize 滑条显示
                        this.updateFontSizeSlider(panel);
                    }, 10);
                });
            }
        });
    }

    // 更新 fontSize 滑条显示
    updateFontSizeSlider(panel) {
        const fontSizeSlider = panel.querySelector('div.property[data-property="fontSize"] input[type="range"]');
        const fontSizeValue = panel.querySelector('div.property[data-property="fontSize"] .property_value');

        if (fontSizeSlider && fontSizeValue) {
            let displayValue;
            if (this.properties["autoScale"]) {
                // auto 模式下显示 baseFontSize
                displayValue = this.properties["baseFontSize"];
            } else {
                // 非 auto 模式下显示实际 fontSize
                displayValue = this.properties["fontSize"];
            }

            fontSizeSlider.value = displayValue.toString();
            fontSizeValue.textContent = displayValue.toString();
        }
    }

    // 创建颜色选择器行
    createColorPickerRow(panel) {
        // 找到颜色相关的属性元素
        const fontColorElement = panel.querySelector('div.property[data-property="fontColor"]');
        const backgroundColorElement = panel.querySelector('div.property[data-property="backgroundColor"]');

        if (!fontColorElement || !backgroundColorElement) return;

        // 创建颜色选择器容器
        const colorRow = document.createElement('div');
        colorRow.style.cssText = `
            display: flex;
            gap: 10px;
            margin: 10px 0;
            padding: 8px;
            background: rgba(255,255,255,0.05);
            border-radius: 6px;
        `;

        // 创建字体颜色选择器
        const fontColorPicker = this.createColorPicker("Font Color", this.properties.fontColor, (color) => {
            this.properties.fontColor = color;
            this.setDirtyCanvas(true, true);
        });

        // 创建背景颜色选择器
        const backgroundColorPicker = this.createColorPicker("Background", this.properties.backgroundColor, (color) => {
            this.properties.backgroundColor = color;
            this.setDirtyCanvas(true, true);
        });

        colorRow.appendChild(fontColorPicker);
        colorRow.appendChild(backgroundColorPicker);

        // 移除原有的颜色属性元素
        fontColorElement.remove();
        backgroundColorElement.remove();

        // 在合适的位置插入颜色选择器行
        const titleElement = panel.querySelector('div.property[data-property="Title"]');
        if (titleElement && titleElement.nextSibling) {
            panel.content.insertBefore(colorRow, titleElement.nextSibling);
        } else {
            panel.content.appendChild(colorRow);
        }
    }

    // 创建颜色选择器
    createColorPicker(label, currentColor, callback) {
        const container = document.createElement('div');
        container.style.cssText = `
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        `;

        // 标签
        const labelElement = document.createElement('span');
        labelElement.textContent = label;
        labelElement.style.cssText = `
            font-size: 12px;
            color: #ccc;
            font-weight: bold;
        `;

        // 颜色选择器容器
        const pickerContainer = document.createElement('div');
        pickerContainer.style.cssText = `
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        `;

        // 处理初始颜色值
        const initialColor = currentColor || '#ffffff';
        const isHexColor = /^#[0-9A-Fa-f]{6}$/i.test(initialColor);

        // 颜色输入框
        const colorInput = document.createElement('input');
        colorInput.type = 'color';
        // 只有十六进制颜色才设置到颜色选择器
        colorInput.value = isHexColor ? initialColor : '#ffffff';
        colorInput.style.cssText = `
            width: 40px;
            height: 30px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background: none;
            padding: 0;
        `;

        // 颜色值显示
        const colorValue = document.createElement('input');
        colorValue.type = 'text';
        colorValue.value = initialColor;
        colorValue.style.cssText = `
            flex: 1;
            background: rgba(255,255,255,0.1);
            border: 1px solid #555;
            border-radius: 4px;
            padding: 4px 8px;
            color: #fff;
            font-size: 11px;
            font-family: monospace;
        `;

        // 添加占位符提示
        colorValue.placeholder = 'e.g. #ff0000, red, transparent';

        // 颜色选择器事件
        colorInput.addEventListener('input', (e) => {
            const color = e.target.value;
            colorValue.value = color;
            callback(color);
        });

        // 文本输入事件 - 支持实时验证
        colorValue.addEventListener('input', (e) => {
            const formattedColor = formatColor(e.target.value);
            if (isValidColor(formattedColor)) {
                // 如果是十六进制颜色，同步到颜色选择器
                if (/^#[0-9A-Fa-f]{6}$/i.test(formattedColor)) {
                    colorInput.value = formattedColor;
                }
                callback(formattedColor);
            }
        });

        // 颜色格式化函数 - 简化版本
        const formatColor = (input) => {
            let color = input.trim();

            // 如果没有 # 且是6位十六进制，自动添加 #
            if (!color.startsWith('#') && /^[0-9A-Fa-f]{6}$/i.test(color)) {
                color = '#' + color;
            }

            return color;
        };

        // 颜色验证函数 - 使用浏览器原生验证
        const isValidColor = (color) => {
            // 空值不是有效颜色
            if (!color || color.trim() === '') return false;

            // 创建一个临时元素来测试颜色是否有效
            const tempElement = document.createElement('div');
            const originalColor = tempElement.style.color;

            try {
                tempElement.style.color = color;
                // 如果浏览器接受这个颜色值，style.color 会被设置且不等于原始值
                const isValid = tempElement.style.color !== originalColor || tempElement.style.color !== '';
                console.log(`Color validation: "${color}" -> ${isValid}`); // 调试信息
                return isValid;
            } catch (e) {
                console.log(`Color validation error: "${color}" -> false`); // 调试信息
                return false;
            }
        };

        // 回车键事件
        colorValue.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                const formattedColor = formatColor(e.target.value);
                if (isValidColor(formattedColor)) {
                    colorValue.value = formattedColor;
                    // 如果是十六进制颜色，同步到颜色选择器
                    if (/^#[0-9A-Fa-f]{6}$/i.test(formattedColor)) {
                        colorInput.value = formattedColor;
                    }
                    callback(formattedColor);
                    e.target.blur(); // 失去焦点
                } else {
                    // 如果格式不正确，恢复到之前的值
                    colorValue.value = colorInput.value;
                }
            }
        });

        colorValue.addEventListener('blur', (e) => {
            const formattedColor = formatColor(e.target.value);
            if (isValidColor(formattedColor)) {
                // 失去焦点时如果格式正确，应用颜色
                colorValue.value = formattedColor;
                // 如果是十六进制颜色，同步到颜色选择器
                if (/^#[0-9A-Fa-f]{6}$/i.test(formattedColor)) {
                    colorInput.value = formattedColor;
                }
                callback(formattedColor);
            } else {
                // 如果格式不正确，恢复到之前的值
                colorValue.value = colorInput.value;
            }
        });

        pickerContainer.appendChild(colorInput);
        pickerContainer.appendChild(colorValue);
        container.appendChild(labelElement);
        container.appendChild(pickerContainer);

        return container;
    }

    // 将滑条属性移动到最后
    moveSliderPropertiesToEnd(panel) {
        const sliderProperties = ["fontSize", "padding", "borderRadius"];
        const content = panel.content;

        sliderProperties.forEach(propName => {
            const element = panel.querySelector(`div.property[data-property="${propName}"]`);
            if (element) {
                content.appendChild(element);
            }
        });
    }

    // 将数字输入框转换为滑条样式
    convertToSlider(panel, propertyName, min, max, step) {
        const propertyElement = panel.querySelector(`div.property[data-property="${propertyName}"]`);
        if (!propertyElement) return;

        const valueElement = propertyElement.querySelector('.property_value');
        if (!valueElement) return;

        // 移除原有的contenteditable属性
        valueElement.removeAttribute('contenteditable');

        // 重新设置属性元素的布局
        propertyElement.style.cssText = `
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
            margin: 4px 0;
        `;

        // 创建滑条容器
        const sliderContainer = document.createElement('div');
        sliderContainer.style.cssText = `
            display: flex;
            align-items: center;
            flex: 1;
            margin-left: 10px;
            gap: 10px;
        `;

        // 创建滑条输入
        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = min.toString();
        slider.max = max.toString();
        slider.step = step.toString();

        // 特殊处理 fontSize：在 auto 模式下使用 baseFontSize
        let initialValue;
        if (propertyName === 'fontSize' && this.properties["autoScale"]) {
            initialValue = this.properties["baseFontSize"];
        } else {
            initialValue = this.properties[propertyName];
        }
        slider.value = initialValue.toString();

        // 设置滑条样式 - 更显眼的设计
        slider.style.cssText = `
            flex: 1;
            height: 6px;
            background: linear-gradient(to right, #555, #777);
            outline: none;
            border-radius: 3px;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
        `;

        // 添加更显眼的滑条样式
        if (!document.getElementById('slider-styles')) {
            const style = document.createElement('style');
            style.id = 'slider-styles';
            style.textContent = `
                input[type="range"]::-webkit-slider-thumb {
                    appearance: none;
                    -webkit-appearance: none;
                    height: 20px;
                    width: 20px;
                    border-radius: 50%;
                    background: linear-gradient(45deg, #4CAF50, #45a049);
                    cursor: pointer;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                    border: 2px solid #fff;
                }
                input[type="range"]::-webkit-slider-thumb:hover {
                    background: linear-gradient(45deg, #5CBF60, #55b059);
                    transform: scale(1.1);
                }
                input[type="range"]::-moz-range-thumb {
                    height: 20px;
                    width: 20px;
                    border-radius: 50%;
                    background: linear-gradient(45deg, #4CAF50, #45a049);
                    cursor: pointer;
                    border: 2px solid #fff;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                }
                input[type="range"]::-moz-range-track {
                    background: linear-gradient(to right, #555, #777);
                    height: 6px;
                    border-radius: 3px;
                }
            `;
            document.head.appendChild(style);
        }

        // 修改数值显示样式 - 简洁的数字显示
        valueElement.style.cssText = `
            min-width: 35px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
            padding: 2px 6px;
        `;

        // 设置初始显示值
        valueElement.textContent = initialValue.toString();

        // 滑条事件处理 - 实时更新
        slider.addEventListener('input', (e) => {
            const newValue = parseFloat(e.target.value);

            // 特殊处理 fontSize：在 auto 模式下调整 baseFontSize
            if (propertyName === 'fontSize' && this.properties["autoScale"]) {
                this.properties["baseFontSize"] = newValue;
                // 显示的值仍然是 baseFontSize
                valueElement.textContent = newValue.toString();
            } else {
                this.properties[propertyName] = newValue;
                valueElement.textContent = newValue.toString();
            }

            // 立即更新节点显示
            this.setDirtyCanvas(true, true);
        });

        // 滑条拖拽结束事件
        slider.addEventListener('change', (e) => {
            const newValue = parseFloat(e.target.value);

            // 特殊处理 fontSize：在 auto 模式下调整 baseFontSize
            if (propertyName === 'fontSize' && this.properties["autoScale"]) {
                this.properties["baseFontSize"] = newValue;
                valueElement.textContent = newValue.toString();
            } else {
                this.properties[propertyName] = newValue;
                valueElement.textContent = newValue.toString();
            }

            this.setDirtyCanvas(true, true);
        });

        // 清空原有内容并重新组织布局
        const nameElement = propertyElement.querySelector('.property_name');
        propertyElement.innerHTML = '';

        // 重新添加元素：名称在左边，滑条和数值在右边
        propertyElement.appendChild(nameElement);
        sliderContainer.appendChild(slider);
        sliderContainer.appendChild(valueElement);
        propertyElement.appendChild(sliderContainer);
    }


    // 处理节点大小改变
    onResize(size) {
        if (this.properties["autoScale"]) {
            // 当节点大小改变时，重新计算字体大小
            this.setDirtyCanvas(true, true);
        }
    }

}

// 节点类型配置
lg_note.type = "LG_Note";
lg_note.title = "🎈LG_Note";
lg_note.title_mode = LiteGraph.NO_TITLE;
lg_note.collapsable = false;
lg_note._category = "🎈LAOGOU/Utils";

// 属性定义
lg_note["@fontSize"] = { type: "number" };
lg_note["@baseFontSize"] = { type: "number" }; // 基础字体大小，用于序列化
lg_note["@fontFamily"] = { type: "string" };
lg_note["@fontColor"] = { type: "string" };
lg_note["@textAlign"] = { type: "combo", values: ["left", "center", "right"] };
lg_note["@backgroundColor"] = { type: "string" };
lg_note["@padding"] = { type: "number" };
lg_note["@borderRadius"] = { type: "number" };
lg_note["@autoScale"] = { type: "boolean" };

// 全局状态管理
const labelNodeState = {
    processingMouseDown: false,
    lastAdjustedMouseEvent: null
};

// 重写绘制节点方法
const oldDrawNode = LGraphCanvas.prototype.drawNode;
LGraphCanvas.prototype.drawNode = function (node, ctx) {
    if (node.constructor === lg_note) {
        node.bgcolor = "transparent";
        node.color = "transparent";
        const v = oldDrawNode.apply(this, arguments);
        node.draw(ctx);
        return v;
    }
    const v = oldDrawNode.apply(this, arguments);
    return v;
};

// 重写鼠标事件处理
const oldGetNodeOnPos = LGraph.prototype.getNodeOnPos;
LGraph.prototype.getNodeOnPos = function (x, y, nodes_list, margin) {
    if (nodes_list &&
        labelNodeState.processingMouseDown &&
        labelNodeState.lastAdjustedMouseEvent?.type.includes("down") &&
        labelNodeState.lastAdjustedMouseEvent?.which === 1) {
        let isDoubleClick = LiteGraph.getTime() - LGraphCanvas.active_canvas.last_mouseclick < 300;
        if (!isDoubleClick) {
            nodes_list = [...nodes_list].filter((n) => !(n instanceof lg_note) || !n.flags?.pinned);
        }
    }
    return oldGetNodeOnPos.apply(this, [x, y, nodes_list, margin]);
};

// 鼠标事件监听
const processMouseDown = LGraphCanvas.prototype.processMouseDown;
LGraphCanvas.prototype.processMouseDown = function (e) {
    labelNodeState.processingMouseDown = true;
    const returnVal = processMouseDown.apply(this, [...arguments]);
    labelNodeState.processingMouseDown = false;
    return returnVal;
};

const adjustMouseEvent = LGraphCanvas.prototype.adjustMouseEvent;
LGraphCanvas.prototype.adjustMouseEvent = function (e) {
    adjustMouseEvent.apply(this, [...arguments]);
    labelNodeState.lastAdjustedMouseEvent = e;
};

// 注册扩展
app.registerExtension({
    name: "LG_Note",
    registerCustomNodes() {
        lg_note.setUp();
    },
});