alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-25 23:25:43 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: Refactor selection state handling for LoRA entries to avoid style conflicts

Browse Source
This commit is contained in:
Will Miao
2025-08-22 17:19:37 +08:00
parent ec3f857ef1
commit 597cc48248
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/comfyui/loras_widget.js
View File

@@ -452,9 +452,6 @@ export function addLorasWidget(node, name, opts, callback) {
container.appendChild(loraEl); container.appendChild(loraEl);
// Update selection state
updateEntrySelection(loraEl, name === selectedLora);
// If expanded, show the clip entry // If expanded, show the clip entry
if (isExpanded) { if (isExpanded) {
totalVisibleEntries++; totalVisibleEntries++;
@@ -638,6 +635,13 @@ export function addLorasWidget(node, name, opts, callback) {
// Calculate height based on number of loras and fixed sizes // Calculate height based on number of loras and fixed sizes
const calculatedHeight = CONTAINER_PADDING + HEADER_HEIGHT + (Math.min(totalVisibleEntries, 12) * LORA_ENTRY_HEIGHT); const calculatedHeight = CONTAINER_PADDING + HEADER_HEIGHT + (Math.min(totalVisibleEntries, 12) * LORA_ENTRY_HEIGHT);
updateWidgetHeight(container, calculatedHeight, defaultHeight, node); updateWidgetHeight(container, calculatedHeight, defaultHeight, node);
// After all LoRA elements are created, apply selection state as the last step
// This ensures the selection state is not overwritten
container.querySelectorAll('.comfy-lora-entry').forEach(entry => {
const entryLoraName = entry.dataset.loraName;
updateEntrySelection(entry, entryLoraName === selectedLora);
});
}; };
// Store the value in a variable to avoid recursion // Store the value in a variable to avoid recursion

13
web/comfyui/loras_widget_components.js
View File

@@ -147,15 +147,22 @@ export function createDropIndicator() {
// Function to update entry selection state // Function to update entry selection state
export function updateEntrySelection(entryEl, isSelected) { export function updateEntrySelection(entryEl, isSelected) {
// Remove any conflicting styles first
entryEl.style.removeProperty('border');
entryEl.style.removeProperty('box-shadow');
const baseColor = entryEl.dataset.active === 'true' ? const baseColor = entryEl.dataset.active === 'true' ?
"rgba(45, 55, 72, 0.7)" : "rgba(35, 40, 50, 0.5)"; "rgba(45, 55, 72, 0.7)" : "rgba(35, 40, 50, 0.5)";
const selectedColor = entryEl.dataset.active === 'true' ? const selectedColor = entryEl.dataset.active === 'true' ?
"rgba(66, 153, 225, 0.3)" : "rgba(66, 153, 225, 0.2)"; "rgba(66, 153, 225, 0.3)" : "rgba(66, 153, 225, 0.2)";
// Update data attribute to track selection state
entryEl.dataset.selected = isSelected ? 'true' : 'false';
if (isSelected) { if (isSelected) {
entryEl.style.backgroundColor = selectedColor; entryEl.style.setProperty('backgroundColor', selectedColor, 'important');
entryEl.style.border = "1px solid rgba(66, 153, 225, 0.6)"; entryEl.style.setProperty('border', "1px solid rgba(66, 153, 225, 0.6)", 'important');
entryEl.style.boxShadow = "0 0 0 1px rgba(66, 153, 225, 0.3)"; entryEl.style.setProperty('box-shadow', "0 0 0 1px rgba(66, 153, 225, 0.3)", 'important');
} else { } else {
entryEl.style.backgroundColor = baseColor; entryEl.style.backgroundColor = baseColor;
entryEl.style.border = "1px solid transparent"; entryEl.style.border = "1px solid transparent";