From d8adb97af680d8b50e988f112051417b3ba77114 Mon Sep 17 00:00:00 2001 From: Will Miao Date: Wed, 11 Feb 2026 18:04:11 +0800 Subject: [PATCH] feat: Add configurable max height for TriggerWord Toggle node - Add new setting 'loramanager.trigger_word_max_height' (150-600px, default 300px) - Add getTriggerWordMaxHeight() getter to retrieve setting value - Update tags_widget to respect max height limit with scrollbar - Add getMaxHeight callback for ComfyUI layout system - Add tooltip note about requiring page reload Fixes #706 --- web/comfyui/settings.js | 44 +++++++++++++++++++++++++++++++++++++- web/comfyui/tags_widget.js | 21 ++++++++++++------ 2 files changed, 58 insertions(+), 7 deletions(-) diff --git a/web/comfyui/settings.js b/web/comfyui/settings.js index e1bdaa63..26b3f7b5 100644 --- a/web/comfyui/settings.js +++ b/web/comfyui/settings.js @@ -7,6 +7,9 @@ import { app } from "../../scripts/app.js"; const TRIGGER_WORD_WHEEL_SENSITIVITY_ID = "loramanager.trigger_word_wheel_sensitivity"; const TRIGGER_WORD_WHEEL_SENSITIVITY_DEFAULT = 0.02; +const TRIGGER_WORD_MAX_HEIGHT_ID = "loramanager.trigger_word_max_height"; +const TRIGGER_WORD_MAX_HEIGHT_DEFAULT = 300; + const AUTO_PATH_CORRECTION_SETTING_ID = "loramanager.auto_path_correction"; const AUTO_PATH_CORRECTION_DEFAULT = true; @@ -168,11 +171,50 @@ app.registerExtension({ tooltip: "When enabled, tag names with underscores will have them replaced with spaces when inserted (e.g., 'blonde_hair' becomes 'blonde hair').", category: ["LoRA Manager", "Autocomplete", "Tag Formatting"], }, + { + id: TRIGGER_WORD_MAX_HEIGHT_ID, + name: "Trigger Word Toggle Max Height", + type: "slider", + attrs: { + min: 150, + max: 600, + step: 10, + }, + defaultValue: TRIGGER_WORD_MAX_HEIGHT_DEFAULT, + tooltip: "Maximum height (in pixels) for the Trigger Word Toggle node. Content exceeding this height will be scrollable. Note: Requires page reload to take effect.", + category: ["LoRA Manager", "Trigger Word Toggle", "Max Height"], + }, ], }); +const getTriggerWordMaxHeight = (() => { + let settingsUnavailableLogged = false; + + return () => { + const settingManager = app?.extensionManager?.setting; + if (!settingManager || typeof settingManager.get !== "function") { + if (!settingsUnavailableLogged) { + console.warn("LoRA Manager: settings API unavailable, using default max height."); + settingsUnavailableLogged = true; + } + return TRIGGER_WORD_MAX_HEIGHT_DEFAULT; + } + + try { + const value = settingManager.get(TRIGGER_WORD_MAX_HEIGHT_ID); + return value ?? TRIGGER_WORD_MAX_HEIGHT_DEFAULT; + } catch (error) { + if (!settingsUnavailableLogged) { + console.warn("LoRA Manager: unable to read max height setting, using default.", error); + settingsUnavailableLogged = true; + } + return TRIGGER_WORD_MAX_HEIGHT_DEFAULT; + } + }; +})(); + // ============================================================================ // Exports // ============================================================================ -export { getWheelSensitivity, getAutoPathCorrectionPreference, getPromptTagAutocompletePreference, getTagSpaceReplacementPreference }; +export { getWheelSensitivity, getAutoPathCorrectionPreference, getPromptTagAutocompletePreference, getTagSpaceReplacementPreference, getTriggerWordMaxHeight }; diff --git a/web/comfyui/tags_widget.js b/web/comfyui/tags_widget.js index 6fb3586d..a01600fe 100644 --- a/web/comfyui/tags_widget.js +++ b/web/comfyui/tags_widget.js @@ -1,4 +1,5 @@ import { forwardMiddleMouseToCanvas } from "./utils.js"; +import { getTriggerWordMaxHeight } from "./settings.js"; export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.02, options = {}) { // Create container for tags @@ -12,6 +13,9 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 // Set initial height const defaultHeight = 150; + // Get max height from settings + const maxHeight = getTriggerWordMaxHeight(); + Object.assign(container.style, { display: "flex", flexWrap: "wrap", @@ -22,7 +26,8 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 width: "100%", boxSizing: "border-box", overflow: "auto", - alignItems: "flex-start" // Ensure tags align at the top of each row + alignItems: "flex-start", // Ensure tags align at the top of each row + maxHeight: `${maxHeight}px` // Set max height for scrollable container }); // Initialize default value as array @@ -200,13 +205,14 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 // Function to update widget height consistently const updateWidgetHeight = (height) => { - // Ensure minimum height - const finalHeight = Math.max(defaultHeight, height); - + const maxHeight = getTriggerWordMaxHeight(); + // Ensure height is within bounds [defaultHeight, maxHeight] + const finalHeight = Math.min(Math.max(defaultHeight, height), maxHeight); + // Update CSS variables container.style.setProperty('--comfy-widget-min-height', `${finalHeight}px`); container.style.setProperty('--comfy-widget-height', `${finalHeight}px`); - + // Force node to update size after a short delay to ensure DOM is updated if (node) { setTimeout(() => { @@ -340,6 +346,9 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 widgetValue = v; renderTags(widgetValue, widget); }, + getMaxHeight: function() { + return getTriggerWordMaxHeight(); + }, hideOnZoom: true, selectOn: ['click', 'focus'] }); @@ -354,5 +363,5 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 return widgetValue }; - return { minWidth: 300, minHeight: defaultHeight, widget }; + return { minWidth: 300, minHeight: defaultHeight, maxHeight: getTriggerWordMaxHeight(), widget }; }