diff --git a/web/comfyui/settings.js b/web/comfyui/settings.js index 26b3f7b5..e1bdaa63 100644 --- a/web/comfyui/settings.js +++ b/web/comfyui/settings.js @@ -7,9 +7,6 @@ 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; @@ -171,50 +168,11 @@ 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, getTriggerWordMaxHeight }; +export { getWheelSensitivity, getAutoPathCorrectionPreference, getPromptTagAutocompletePreference, getTagSpaceReplacementPreference }; diff --git a/web/comfyui/tags_widget.js b/web/comfyui/tags_widget.js index a01600fe..12077a85 100644 --- a/web/comfyui/tags_widget.js +++ b/web/comfyui/tags_widget.js @@ -1,5 +1,6 @@ import { forwardMiddleMouseToCanvas } from "./utils.js"; -import { getTriggerWordMaxHeight } from "./settings.js"; + +const MIN_HEIGHT = 150; export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.02, options = {}) { // Create container for tags @@ -9,12 +10,6 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 const { allowStrengthAdjustment = true } = options; forwardMiddleMouseToCanvas(container); - - // Set initial height - const defaultHeight = 150; - - // Get max height from settings - const maxHeight = getTriggerWordMaxHeight(); Object.assign(container.style, { display: "flex", @@ -24,22 +19,16 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 backgroundColor: "rgba(40, 44, 52, 0.6)", borderRadius: "6px", width: "100%", + height: "100%", boxSizing: "border-box", overflow: "auto", - alignItems: "flex-start", // Ensure tags align at the top of each row - maxHeight: `${maxHeight}px` // Set max height for scrollable container + alignItems: "flex-start", + alignContent: "flex-start" }); // Initialize default value as array const initialTagsData = opts?.defaultVal || []; - // Fixed sizes for tag elements to avoid zoom-related calculation issues - const TAG_HEIGHT = 26; // Adjusted height of a single tag including margins - const TAGS_PER_ROW = 3; // Approximate number of tags per row - const ROW_GAP = 2; // Reduced gap between rows - const CONTAINER_PADDING = 12; // Top and bottom padding - const EMPTY_CONTAINER_HEIGHT = 60; // Height when no tags are present - // Function to render tags from array data const renderTags = (tagsData, widget) => { // Clear existing tags @@ -66,25 +55,9 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 width: "100%" }); container.appendChild(emptyMessage); - - // Set fixed height for empty state - updateWidgetHeight(EMPTY_CONTAINER_HEIGHT); return; } - // Create a row container approach for better layout control - let rowContainer = document.createElement("div"); - rowContainer.className = "comfy-tags-row"; - Object.assign(rowContainer.style, { - display: "flex", - flexWrap: "wrap", - gap: "4px", - width: "100%", - marginBottom: "2px" // Small gap between rows - }); - container.appendChild(rowContainer); - - let tagCount = 0; normalizedTags.forEach((tagData, index) => { const { text, active, highlighted, strength } = tagData; const tagEl = document.createElement("div"); @@ -134,7 +107,6 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 tagEl.addEventListener("click", (e) => { e.stopPropagation(); - // Toggle active state for this specific tag using its index const updatedTags = [...widget.value]; updatedTags[index].active = !updatedTags[index].active; textSpan.textContent = updatedTags[index].text; @@ -158,29 +130,20 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 e.preventDefault(); e.stopPropagation(); - // Only adjust strength if the mouse is over the tag const updatedTags = [...widget.value]; let currentStrength = updatedTags[index].strength; - - // If no strength is set, default to 1.0 + if (currentStrength === undefined || currentStrength === null) { currentStrength = 1.0; } - // Adjust strength based on scroll direction - // DeltaY < 0 is scroll up, deltaY > 0 is scroll down if (e.deltaY < 0) { - // Scroll up: increase strength by wheelSensitivity currentStrength += wheelSensitivity; } else { - // Scroll down: decrease strength by wheelSensitivity currentStrength -= wheelSensitivity; } - // Ensure strength doesn't go below 0 currentStrength = Math.max(0, currentStrength); - - // Update the strength value updatedTags[index].strength = currentStrength; textSpan.textContent = updatedTags[index].text; @@ -190,35 +153,8 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 }); } - rowContainer.appendChild(tagEl); - tagCount++; + container.appendChild(tagEl); }); - - // Calculate height based on number of tags and fixed sizes - const tagsCount = normalizedTags.length; - const rows = Math.ceil(tagsCount / TAGS_PER_ROW); - const calculatedHeight = CONTAINER_PADDING + (rows * TAG_HEIGHT) + ((rows - 1) * ROW_GAP); - - // Update widget height with calculated value - updateWidgetHeight(calculatedHeight); - }; - - // Function to update widget height consistently - const updateWidgetHeight = (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(() => { - node.setDirtyCanvas(true, true); - }, 10); - } }; // Helper function to update tag style based on active state @@ -238,19 +174,19 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 alignItems: "center", gap: "6px", boxShadow: "0 1px 2px rgba(0,0,0,0.1)", - margin: "1px", + margin: "1px", userSelect: "none", WebkitUserSelect: "none", MozUserSelect: "none", msUserSelect: "none", - height: "22px", // Increased height to better fit text with descenders - minHeight: "22px", // Matching minHeight + height: "22px", + minHeight: "22px", boxSizing: "border-box", width: "fit-content", maxWidth: "200px", - lineHeight: "16px", // Added explicit line-height - verticalAlign: "middle", // Added vertical alignment - textAlign: "center", // Center text horizontally + lineHeight: "16px", + verticalAlign: "middle", + textAlign: "center", }; const highlightStyles = highlighted @@ -282,7 +218,6 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 }); } - // Add hover effect tagEl.onmouseenter = () => { tagEl.style.transform = "translateY(-1px)"; tagEl.dataset.prevBoxShadow = tagEl.style.boxShadow || ""; @@ -334,10 +269,8 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 } } - // Store the value as array let widgetValue = initialTagsData; - // Create widget with new DOM Widget API const widget = node.addDOMWidget(name, "custom", container, { getValue: function() { return widgetValue; @@ -346,22 +279,17 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 widgetValue = v; renderTags(widgetValue, widget); }, - getMaxHeight: function() { - return getTriggerWordMaxHeight(); - }, + getMinHeight: () => MIN_HEIGHT, hideOnZoom: true, selectOn: ['click', 'focus'] }); - // Set initial value widget.value = initialTagsData; - - // Set callback widget.callback = callback; widget.serializeValue = () => { return widgetValue }; - return { minWidth: 300, minHeight: defaultHeight, maxHeight: getTriggerWordMaxHeight(), widget }; + return { minWidth: 300, minHeight: MIN_HEIGHT, widget }; }