From d437bd74544397266012dc1f35cbbef44fbe3fd9 Mon Sep 17 00:00:00 2001 From: fujammy <467918@qq.com> Date: Tue, 31 Dec 2024 02:24:26 +0800 Subject: [PATCH] =?UTF-8?q?Refactor=20ShowTextPlus=20extension=20to=20impr?= =?UTF-8?q?ove=20widget=20management=20and=20dynamic=20display=20functiona?= =?UTF-8?q?lity.=20Enhanced=20widget=20cleanup=20logic=20to=20retain=20the?= =?UTF-8?q?=20first=20two=20widgets,=20added=20a=20toggle=20for=20output?= =?UTF-8?q?=20visibility,=20and=20ensured=20proper=20handling=20of=20text?= =?UTF-8?q?=20input=20arrays.=20Updated=20node=20size=20adjustment=20metho?= =?UTF-8?q?ds=20for=20better=20responsiveness=20during=20configuration=20a?= =?UTF-8?q?nd=20execution.=20This=20update=20streamlines=20user=20interact?= =?UTF-8?q?ion=20and=20improves=20overall=20usability.=20=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E6=96=87=E6=9C=AC=E6=98=BE=E7=A4=BA=E5=BC=80=E5=85=B3?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/js/show_text_plus.js | 111 +++++++++++++++++++++++++++------------ 1 file changed, 77 insertions(+), 34 deletions(-) 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 +});