nodes/kenyonxu-ComfyUI_KaiUtilities
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix trigger words height to 3 lines and preview area layout

Browse Source
This commit is contained in:
kenyonxu
2026-04-21 21:53:08 +08:00
parent 96457dc3b4
commit 94de2d6cf0
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/kai_civitai_lora.js
+19 -14
View File
@@ -90,13 +90,19 @@ function addCivitaiWidgets(node) {
doFetch(node, force);
});
// Trigger words text widget (read-only display)
// Trigger words text widget (read-only display, fixed 3-line height)
// Use ComfyWidgets.STRING for proper multiline <textarea> rendering
const triggerWidget = ComfyWidgets["STRING"](node, "triggers", ["STRING", { multiline: true }], app);
node.civitai_triggers = triggerWidget.widget;
node.civitai_triggers.inputEl.readOnly = true;
node.civitai_triggers.inputEl.style.border = "none";
node.civitai_triggers.inputEl.style.backgroundColor = "transparent";
node.civitai_triggers.inputEl.rows = 3;
node.civitai_triggers.inputEl.style.resize = "none";
// Fix widget height to ~3 lines so it does not expand with node size
node.civitai_triggers.computeSize = function(width) {
return [width, 56];
};
// Track last lora_name to detect changes and reset state
const loraWidget = node.widgets.find(w => w.name === "lora_name");
@@ -117,8 +123,9 @@ function addCivitaiWidgets(node) {
}
// Adjust node size to accommodate preview area
// Minimum: widgets (~30+30+70=130) + min preview (80) + margins (~40)
node.size[1] = Math.max(node.size[1], 300);
// Widget area: title(40) + 4 std widgets(30*4) + trigger(56) + spacing(20) ≈ 260
// Preview min height: 80. Total min: 260 + 80 + 20 = 360
node.size[1] = Math.max(node.size[1], 360);
}
async function doFetch(node, force = false) {
@@ -221,23 +228,21 @@ function logMessage(node, message) {
function getPreviewArea(node) {
// Calculate preview area position relative to node top-left.
// onDrawForeground draws in local node coordinates, so we must NOT
// add node.pos (the canvas is already translated to the node origin).
// onDrawForeground draws in local node coordinates.
const margin = 10;
const x = margin;
const w = Math.max(0, node.size[0] - margin * 2);
// Ensure preview area does not overlap with widgets.
// Approximate widget area height: 5 widgets * ~30px + trigger textarea ~70px
// plus LiteGraph spacing ~= 240px. We reserve 250px for the widget area.
const minPreviewY = 250;
const maxPreviewHeight = Math.max(0, node.size[1] - minPreviewY - margin);
const minHeight = 80;
const preferredHeight = node.size[1] * 0.40; // 40% of node height
const h = Math.max(minHeight, Math.min(maxPreviewHeight, preferredHeight));
// Fixed height reserved for the widget area (title, inputs, widgets, outputs).
// This must match the actual vertical space consumed by all widgets above
// the preview so that resizing the node only grows the preview, not the
// trigger-words textarea.
const WIDGET_AREA_END = 260;
// Preview fills all remaining vertical space, minimum 80px.
const h = Math.max(80, node.size[1] - WIDGET_AREA_END - margin);
const y = node.size[1] - h - margin;
return { x, y, w, h };
}