diff --git a/web/js/show_text_plus.js b/web/js/show_text_plus.js index c631926..6adda0c 100644 --- a/web/js/show_text_plus.js +++ b/web/js/show_text_plus.js @@ -9,30 +9,31 @@ app.registerExtension({ if (nodeData.name === "ShowTextPlus") { function populate(text) { console.log("[ShowTextPlus] Populating with:", text); - + // 清理现有widgets(保留第一个输入框和显示开关) if (this.widgets) { - for (let i = 2; i < this.widgets.length; i++) { // 从2开始,保留前两个widget + // 从第三个开始删除 + for (let i = 2; i < this.widgets.length; i++) { this.widgets[i].onRemove?.(); } - this.widgets.length = 2; // 保留前两个widget + this.widgets.length = 2; } // 处理文本数组 - const v = [...text]; - if (!v[0]) { + const v = Array.isArray(text) ? text : [...text]; // 确保 text 是数组 + if (v.length > 0 && !v[0]) { // 处理第一个元素为空字符串的情况 v.shift(); } // 获取显示开关状态 - const showOutput = this.widgets[1].value; // 第二个widget是显示开关 + const showOutput = this.widgets[1].value; // 为每个文本创建widget - for (const list of v) { - console.log("[ShowTextPlus] Creating widget for:", list); + v.forEach((list, index) => { + console.log(`[ShowTextPlus] Creating widget ${index + 1} for:`, list); const w = ComfyWidgets["STRING"]( this, - "text2", + `text_output_${index}`, // 为每个文本输出widget设置不同的name ["STRING", { multiline: true }], app ).widget; @@ -40,42 +41,74 @@ app.registerExtension({ w.inputEl.style.opacity = 0.6; w.value = list; // 根据开关状态设置显示 - w.inputEl.style.display = showOutput ? "block" : "none"; - } + updateWidgetDisplay(w, showOutput); + }); // 调整节点大小 - requestAnimationFrame(() => { - const sz = this.computeSize(); - if (sz[0] < this.size[0]) { - sz[0] = this.size[0]; - } - if (sz[1] < this.size[1]) { - sz[1] = this.size[1]; - } - this.onResize?.(sz); - app.graph.setDirtyCanvas(true, false); - }); + requestAnimationFrame(() => { + adjustNodeSize.call(this); + }); } - // 添加显示开关的创建 + + function updateWidgetDisplay(widget, show) { + if (widget && widget.inputEl) { + widget.inputEl.style.display = show ? "block" : "none"; + widget.inputEl.style.visibility = show ? "visible" : "hidden"; + + // 尝试手动触发大小计算 + if (!show) { + widget.inputEl.style.height = "0px" + widget.inputEl.style.padding = "0px"; + // 设置高度为 0, 并移除padding + } else { + widget.inputEl.style.height = ""; + widget.inputEl.style.padding = ""; + } + // 动态计算并设置文本框的高度,修复高度设置为0px之后不能完全展开的问题 + requestAnimationFrame(() => { + if(show){ + widget.inputEl.style.height = `${widget.inputEl.scrollHeight}px`; + } + }); + } + } + + function adjustNodeSize() { + const sz = this.computeSize(); + if (sz[0] < this.size[0]) { + sz[0] = this.size[0]; + } + if (sz[1] < this.size[1]) { + sz[1] = this.size[1]; + } + this.onResize?.(sz); + app.graph.setDirtyCanvas(true, false); + } + + + // 添加显示开关的创建 const onNodeCreated = nodeType.prototype.onNodeCreated; nodeType.prototype.onNodeCreated = function() { onNodeCreated?.apply(this, arguments); - + // 添加显示开关 this.addWidget("toggle", "show_output", true, (value) => { console.log("[ShowTextPlus] Toggle output display:", value); // 更新所有输出文本框的显示状态 for (let i = 2; i < this.widgets.length; i++) { if (this.widgets[i].inputEl) { - this.widgets[i].inputEl.style.display = value ? "block" : "none"; + updateWidgetDisplay(this.widgets[i], value); } } + // 重新计算节点大小 - this.onResize?.(this.computeSize()); - app.graph.setDirtyCanvas(true, false); + requestAnimationFrame(() => { + adjustNodeSize.call(this); + }); }); - }; + }; + // 执行时更新显示 const onExecuted = nodeType.prototype.onExecuted; @@ -86,18 +119,28 @@ app.registerExtension({ console.log("[ShowTextPlus] Updating from execution:", message.text); populate.call(this, message.text); } + // 在执行完成后调整节点大小 + requestAnimationFrame(() => { + adjustNodeSize.call(this); + }); }; + // 加载时恢复显示 const onConfigure = nodeType.prototype.onConfigure; nodeType.prototype.onConfigure = function () { - console.log("[ShowTextPlus] Node configured, values:", this.widgets_values); - onConfigure?.apply(this, arguments); + console.log("[ShowTextPlus] Node configured, values:", this.widgets_values); + onConfigure?.apply(this, arguments); if (this.widgets_values?.length) { - console.log("[ShowTextPlus] Restoring from config:", this.widgets_values); - populate.call(this, this.widgets_values.slice(+this.widgets_values.length > 1)); + console.log("[ShowTextPlus] Restoring from config:", this.widgets_values); + const textValues = this.widgets_values.slice(1); //从第二个值开始,跳过toggle + populate.call(this, textValues); } - }; + // 在配置完成后调整节点大小 + requestAnimationFrame(() => { + adjustNodeSize.call(this); + }); + }; } }, -}); \ No newline at end of file +});