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

refactor: replace comfy built-in text widget with custome autocomplete text widget for better event handler binding

Browse Source 
- Change `STRING` input type to `AUTOCOMPLETE_TEXT_LORAS` in LoraManagerLoader, LoraStacker, and WanVideoLoraSelectLM nodes for LoRA syntax input
- Change `STRING` input type to `AUTOCOMPLETE_TEXT_EMBEDDINGS` in PromptLoraManager node for prompt input
- Remove manual multiline, autocomplete, and dynamicPrompts configurations in favor of built-in autocomplete types
- Update placeholder text for consistency across nodes
- Remove unused `setupInputWidgetWithAutocomplete` mock from frontend tests
- Add Vue app cleanup logic to prevent memory leaks in widget management
This commit is contained in:
Will Miao
2026-01-25 08:30:06 +08:00
parent fad43ad003
commit 194f2f702c
16 changed files with 923 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
py/nodes/lora_loader.py
View File

@@ -16,12 +16,9 @@ class LoraManagerLoader:
"required": {
"model": ("MODEL",),
# "clip": ("CLIP",),
"text": ("STRING", {
"multiline": True,
"pysssss.autocomplete": False,
"dynamicPrompts": True,
"text": ("AUTOCOMPLETE_TEXT_LORAS", {
"placeholder": "Type LoRA syntax...",
"tooltip": "Format: <lora:lora_name:strength> separated by spaces or punctuation",
"placeholder": "LoRA syntax input: <lora:name:strength>"
}),
},
"optional": FlexibleOptionalInputType(any_type),

7
py/nodes/lora_stacker.py
View File

@@ -14,12 +14,9 @@ class LoraStacker:
def INPUT_TYPES(cls):
return {
"required": {
"text": ("STRING", {
"multiline": True,
"pysssss.autocomplete": False,
"dynamicPrompts": True,
"text": ("AUTOCOMPLETE_TEXT_LORAS", {
"placeholder": "Type LoRA syntax...",
"tooltip": "Format: <lora:lora_name:strength> separated by spaces or punctuation",
"placeholder": "LoRA syntax input: <lora:name:strength>"
}),
},
"optional": FlexibleOptionalInputType(any_type),

6
py/nodes/prompt.py
View File

@@ -15,11 +15,9 @@ class PromptLoraManager:
return {
"required": {
"text": (
'STRING',
"AUTOCOMPLETE_TEXT_EMBEDDINGS",
{
"multiline": True,
"pysssss.autocomplete": False,
"dynamicPrompts": True,
"placeholder": "Enter prompt...",
"tooltip": "The text to be encoded.",
},
),

7
py/nodes/wanvideo_lora_select.py
View File

@@ -15,12 +15,9 @@ class WanVideoLoraSelectLM:
"required": {
"low_mem_load": ("BOOLEAN", {"default": False, "tooltip": "Load LORA models with less VRAM usage, slower loading. This affects ALL LoRAs, not just the current ones. No effect if merge_loras is False"}),
"merge_loras": ("BOOLEAN", {"default": True, "tooltip": "Merge LoRAs into the model, otherwise they are loaded on the fly. Always disabled for GGUF and scaled fp8 models. This affects ALL LoRAs, not just the current one"}),
"text": ("STRING", {
"multiline": True,
"pysssss.autocomplete": False,
"dynamicPrompts": True,
"text": ("AUTOCOMPLETE_TEXT_LORAS", {
"placeholder": "Type LoRA syntax...",
"tooltip": "Format: <lora:lora_name:strength> separated by spaces or punctuation",
"placeholder": "LoRA syntax input: <lora:name:strength>"
}),
},
"optional": FlexibleOptionalInputType(any_type),

30
tests/frontend/components/loraLoader.triggerWords.test.js
View File

@@ -35,7 +35,6 @@ vi.mock(API_MODULE, () => ({
const collectActiveLorasFromChain = vi.fn();
const updateConnectedTriggerWords = vi.fn();
const mergeLoras = vi.fn();
const setupInputWidgetWithAutocomplete = vi.fn();
const getAllGraphNodes = vi.fn();
const getNodeFromGraph = vi.fn();
@@ -43,7 +42,6 @@ vi.mock(UTILS_MODULE, () => ({
collectActiveLorasFromChain,
updateConnectedTriggerWords,
mergeLoras,
setupInputWidgetWithAutocomplete,
chainCallback: (proto, property, callback) => {
proto[property] = callback;
},
@@ -73,11 +71,6 @@ describe("Lora Loader trigger word updates", () => {
mergeLoras.mockClear();
mergeLoras.mockImplementation(() => [{ name: "Alpha", active: true }]);
setupInputWidgetWithAutocomplete.mockClear();
setupInputWidgetWithAutocomplete.mockImplementation(
(_node, _widget, originalCallback) => originalCallback
);
addLorasWidget.mockClear();
addLorasWidget.mockImplementation((_node, _name, _opts, callback) => ({
widget: { value: [], callback },
@@ -94,27 +87,31 @@ describe("Lora Loader trigger word updates", () => {
const nodeType = { comfyClass: "Lora Loader (LoraManager)", prototype: {} };
await extension.beforeRegisterNodeDef(nodeType, {}, {});
// Create mock widget (AUTOCOMPLETE_TEXT_LORAS type created by Vue widgets)
const inputWidget = {
value: "",
options: {},
callback: null, // Will be set by onNodeCreated
};
const node = {
comfyClass: "Lora Loader (LoraManager)",
widgets: [
{
value: "",
options: {},
inputEl: {},
},
],
widgets: [inputWidget],
addInput: vi.fn(),
graph: {},
};
nodeType.prototype.onNodeCreated.call(node);
expect(setupInputWidgetWithAutocomplete).toHaveBeenCalled();
// The widget is now the AUTOCOMPLETE_TEXT_LORAS type, created automatically by Vue widgets
expect(node.inputWidget).toBe(inputWidget);
expect(node.lorasWidget).toBeDefined();
const inputCallback = node.widgets[0].callback;
// The callback should have been set up by onNodeCreated
const inputCallback = inputWidget.callback;
expect(typeof inputCallback).toBe("function");
// Simulate typing in the input widget
inputCallback("<lora:Alpha:1.0>");
expect(mergeLoras).toHaveBeenCalledWith("<lora:Alpha:1.0>", []);
@@ -128,4 +125,3 @@ describe("Lora Loader trigger word updates", () => {
expect([...triggerWordSet]).toEqual(["Alpha"]);
});
});

49
tests/frontend/components/nodeModeChange.test.js
View File

@@ -7,7 +7,6 @@ const {
LORAS_WIDGET_MODULE,
LORA_LOADER_MODULE,
LORA_STACKER_MODULE,
VUE_WIDGETS_MODULE,
} = vi.hoisted(() => ({
APP_MODULE: new URL("../../../scripts/app.js", import.meta.url).pathname,
API_MODULE: new URL("../../../scripts/api.js", import.meta.url).pathname,
@@ -15,21 +14,17 @@ const {
LORAS_WIDGET_MODULE: new URL("../../../web/comfyui/loras_widget.js", import.meta.url).pathname,
LORA_LOADER_MODULE: new URL("../../../web/comfyui/lora_loader.js", import.meta.url).pathname,
LORA_STACKER_MODULE: new URL("../../../web/comfyui/lora_stacker.js", import.meta.url).pathname,
VUE_WIDGETS_MODULE: new URL("../../../web/comfyui/vue-widgets/lora-manager-widgets.js", import.meta.url).pathname,
}));
const extensionState = {
loraLoader: null,
loraStacker: null,
vueWidgets: null,
};
const registerExtensionMock = vi.fn((extension) => {
if (extension.name === "LoraManager.LoraLoader") {
extensionState.loraLoader = extension;
} else if (extension.name === "LoraManager.LoraStacker") {
extensionState.loraStacker = extension;
} else if (extension.name === "LoraManager.VueWidgets") {
extensionState.vueWidgets = extension;
}
});
@@ -51,7 +46,6 @@ const updateConnectedTriggerWords = vi.fn();
const updateDownstreamLoaders = vi.fn();
const getActiveLorasFromNode = vi.fn();
const mergeLoras = vi.fn();
const setupInputWidgetWithAutocomplete = vi.fn();
const getAllGraphNodes = vi.fn();
const getNodeFromGraph = vi.fn();
const getNodeKey = vi.fn();
@@ -69,7 +63,6 @@ vi.mock(UTILS_MODULE, async (importOriginal) => {
updateDownstreamLoaders,
getActiveLorasFromNode,
mergeLoras,
setupInputWidgetWithAutocomplete,
chainCallback,
getAllGraphNodes,
getNodeFromGraph,
@@ -90,7 +83,6 @@ describe("Node mode change handling", () => {
extensionState.loraLoader = null;
extensionState.loraStacker = null;
extensionState.vueWidgets = null;
registerExtensionMock.mockClear();
collectActiveLorasFromChain.mockClear();
@@ -106,11 +98,6 @@ describe("Node mode change handling", () => {
mergeLoras.mockClear();
mergeLoras.mockImplementation(() => [{ name: "Alpha", active: true }]);
setupInputWidgetWithAutocomplete.mockClear();
setupInputWidgetWithAutocomplete.mockImplementation(
(_node, _widget, originalCallback) => originalCallback
);
addLorasWidget.mockClear();
addLorasWidget.mockImplementation((_node, _name, _opts, callback) => ({
widget: { value: [], callback },
@@ -118,33 +105,27 @@ describe("Node mode change handling", () => {
});
describe("Lora Stacker mode change handling", () => {
let node, extension, vueWidgetsExtension;
let node, extension;
beforeEach(async () => {
// Import the Vue widgets module first to register mode change handlers
await import(VUE_WIDGETS_MODULE);
await import(LORA_STACKER_MODULE);
expect(registerExtensionMock).toHaveBeenCalled();
extension = extensionState.loraStacker;
expect(extension).toBeDefined();
vueWidgetsExtension = extensionState.vueWidgets;
expect(vueWidgetsExtension).toBeDefined();
const nodeType = { comfyClass: "Lora Stacker (LoraManager)", prototype: {} };
const nodeData = { name: "Lora Stacker (LoraManager)" };
// Call both extensions' beforeRegisterNodeDef
await extension.beforeRegisterNodeDef(nodeType, nodeData, {});
await vueWidgetsExtension.beforeRegisterNodeDef(nodeType, nodeData, {});
// Create widgets with proper structure for lora_stacker.js
// Widget at index 0 is the AUTOCOMPLETE_TEXT_LORAS widget (created by Vue widgets)
const inputWidget = {
name: "input",
name: "text",
value: "",
options: {}, // lora_stacker.js:35 expects options to exist
callback: () => {},
options: {},
callback: null, // Will be set by onNodeCreated
};
const lorasWidget = {
@@ -173,12 +154,6 @@ describe("Node mode change handling", () => {
const initialMode = node.mode;
expect(initialMode).toBe(0);
// Verify that the mode property is configured as a custom property descriptor
// (set up by the mode change handler from Vue widgets)
const modeDescriptor = Object.getOwnPropertyDescriptor(node, 'mode');
expect(modeDescriptor).toBeDefined();
expect(modeDescriptor.set).toBeInstanceOf(Function);
// Change mode from 0 to 3
node.mode = 3;
@@ -187,14 +162,7 @@ describe("Node mode change handling", () => {
});
it("should update trigger words based on node activity when mode changes", () => {
// The loras widget has Alpha and Beta as active
const activeLoras = new Set(["Alpha", "Beta"]);
// Verify that the mode property is configured with a custom setter
const modeDescriptor = Object.getOwnPropertyDescriptor(node, 'mode');
expect(modeDescriptor?.set).toBeInstanceOf(Function);
// Change to active mode (0) - the mode setter should handle this
// Change to active mode (0)
node.mode = 0;
expect(node.mode).toBe(0);
@@ -221,13 +189,14 @@ describe("Node mode change handling", () => {
const nodeType = { comfyClass: "Lora Loader (LoraManager)", prototype: {} };
await extension.beforeRegisterNodeDef(nodeType, {}, {});
// Widget at index 0 is the AUTOCOMPLETE_TEXT_LORAS widget (created by Vue widgets)
node = {
comfyClass: "Lora Loader (LoraManager)",
widgets: [
{
value: "",
options: {},
callback: () => {},
callback: null, // Will be set by onNodeCreated
},
],
addInput: vi.fn(),
@@ -291,4 +260,4 @@ describe("Node mode change handling", () => {
);
});
});
});
});

143
vue-widgets/src/components/AutocompleteTextWidget.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<div class="autocomplete-text-widget">
<textarea
ref="textareaRef"
v-model="textValue"
:placeholder="placeholder"
:spellcheck="spellcheck ?? false"
:class="['text-input', { 'vue-dom-mode': isVueDomMode }]"
@input="onInput"
@pointerdown.stop
@pointermove.stop
@pointerup.stop
/>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useAutocomplete } from '@/composables/useAutocomplete'
// Access LiteGraph global for initial mode detection
declare const LiteGraph: { vueNodesMode?: boolean } | undefined
export interface AutocompleteTextWidgetInterface {
serializeValue?: () => Promise<string>
value?: string
onSetValue?: (v: string) => void
callback?: (v: string) => void
}
const props = defineProps<{
widget: AutocompleteTextWidgetInterface
node: { id: number }
modelType?: 'loras' | 'embeddings'
placeholder?: string
showPreview?: boolean
spellcheck?: boolean
}>()
// Reactive ref for Vue DOM mode
const isVueDomMode = ref(typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode === true)
// Listen for mode change events from main.ts
const onModeChange = (event: Event) => {
const customEvent = event as CustomEvent<{ isVueDomMode: boolean }>
isVueDomMode.value = customEvent.detail.isVueDomMode
}
onMounted(() => {
// Listen for custom event dispatched by main.ts
document.addEventListener('lora-manager:vue-mode-change', onModeChange)
})
onUnmounted(() => {
document.removeEventListener('lora-manager:vue-mode-change', onModeChange)
})
const textareaRef = ref<HTMLTextAreaElement | null>(null)
const textValue = ref('')
// Initialize autocomplete with direct ref access
const { isInitialized } = useAutocomplete(
textareaRef,
props.modelType ?? 'loras',
{ showPreview: props.showPreview ?? true }
)
const onInput = () => {
// Call widget callback when text changes
if (typeof props.widget.callback === 'function') {
props.widget.callback(textValue.value)
}
}
onMounted(() => {
// Setup serialization
props.widget.serializeValue = async () => textValue.value
// Handle external value updates (e.g., loading workflow, paste)
props.widget.onSetValue = (v: string) => {
if (v !== textValue.value) {
textValue.value = v ?? ''
}
}
// Restore from saved value if exists
if (props.widget.value !== undefined && props.widget.value !== null) {
textValue.value = props.widget.value
}
})
// Watch for external value changes and sync
watch(
() => props.widget.value,
(newValue) => {
if (newValue !== undefined && newValue !== textValue.value) {
textValue.value = newValue ?? ''
}
}
)
</script>
<style scoped>
.autocomplete-text-widget {
background: transparent;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* Canvas mode styles (default) - matches built-in comfy-multiline-input */
.text-input {
flex: 1;
width: 100%;
background-color: var(--comfy-input-bg, #222);
color: var(--input-text, #ddd);
overflow: hidden;
overflow-y: auto;
padding: 2px;
resize: none;
border: none;
border-radius: 0;
box-sizing: border-box;
font-size: var(--comfy-textarea-font-size, 10px);
font-family: monospace;
}
/* Vue DOM mode styles - matches built-in p-textarea in Vue DOM mode */
.text-input.vue-dom-mode {
background-color: var(--color-charcoal-400, #313235);
color: #fff;
padding: 24px 12px 8px;
margin: 0 0 4px;
border-radius: 8px;
font-size: 12px;
font-family: inherit;
}
.text-input:focus {
outline: none;
}
</style>

110
vue-widgets/src/composables/useAutocomplete.ts Normal file
View File

@@ -0,0 +1,110 @@
import { ref, onMounted, onUnmounted, type Ref } from 'vue'
// Dynamic import type for AutoComplete class
type AutoCompleteClass = new (
inputElement: HTMLTextAreaElement,
modelType: 'loras' | 'embeddings',
options?: AutocompleteOptions
) => AutoCompleteInstance
interface AutocompleteOptions {
maxItems?: number
minChars?: number
debounceDelay?: number
showPreview?: boolean
}
interface AutoCompleteInstance {
destroy: () => void
isValid: () => boolean
refreshCaretHelper: () => void
}
export interface UseAutocompleteOptions {
showPreview?: boolean
maxItems?: number
minChars?: number
debounceDelay?: number
}
export function useAutocomplete(
textareaRef: Ref<HTMLTextAreaElement | null>,
modelType: 'loras' | 'embeddings' = 'loras',
options: UseAutocompleteOptions = {}
) {
const autocompleteInstance = ref<AutoCompleteInstance | null>(null)
const isInitialized = ref(false)
const defaultOptions: AutocompleteOptions = {
maxItems: 20,
minChars: 1,
debounceDelay: 200,
showPreview: true,
...options
}
const initAutocomplete = async () => {
if (!textareaRef.value) {
console.warn('[useAutocomplete] Textarea ref is null, cannot initialize')
return
}
if (autocompleteInstance.value) {
console.log('[useAutocomplete] Already initialized, skipping')
return
}
try {
// Dynamically import the AutoComplete class
const module = await import(/* @vite-ignore */ `${'../autocomplete.js'}`)
const AutoComplete: AutoCompleteClass = module.AutoComplete
autocompleteInstance.value = new AutoComplete(
textareaRef.value,
modelType,
defaultOptions
)
isInitialized.value = true
console.log(`[useAutocomplete] Initialized for ${modelType}`)
} catch (error) {
console.error('[useAutocomplete] Failed to initialize:', error)
}
}
const destroyAutocomplete = () => {
if (autocompleteInstance.value) {
autocompleteInstance.value.destroy()
autocompleteInstance.value = null
isInitialized.value = false
console.log('[useAutocomplete] Destroyed')
}
}
const refreshCaretHelper = () => {
if (autocompleteInstance.value) {
autocompleteInstance.value.refreshCaretHelper()
}
}
onMounted(() => {
// Initialize autocomplete after component is mounted
// Use nextTick-like delay to ensure DOM is fully ready
setTimeout(() => {
initAutocomplete()
}, 0)
})
onUnmounted(() => {
destroyAutocomplete()
})
return {
autocompleteInstance,
isInitialized,
initAutocomplete,
destroyAutocomplete,
refreshCaretHelper
}
}
export type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>

139
vue-widgets/src/main.ts
View File

@@ -4,6 +4,7 @@ import LoraPoolWidget from '@/components/LoraPoolWidget.vue'
import LoraRandomizerWidget from '@/components/LoraRandomizerWidget.vue'
import LoraCyclerWidget from '@/components/LoraCyclerWidget.vue'
import JsonDisplayWidget from '@/components/JsonDisplayWidget.vue'
import AutocompleteTextWidget from '@/components/AutocompleteTextWidget.vue'
import type { LoraPoolConfig, LegacyLoraPoolConfig, RandomizerConfig, CyclerConfig } from './composables/types'
import {
setupModeChangeHandler,
@@ -21,6 +22,7 @@ const LORA_CYCLER_WIDGET_MIN_HEIGHT = 314
const LORA_CYCLER_WIDGET_MAX_HEIGHT = LORA_CYCLER_WIDGET_MIN_HEIGHT
const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
const JSON_DISPLAY_WIDGET_MIN_HEIGHT = 200
const AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT = 60
// @ts-ignore - ComfyUI external module
import { app } from '../../../scripts/app.js'
@@ -369,6 +371,119 @@ function createJsonDisplayWidget(node) {
return { widget }
}
// Store nodeData options per widget type for autocomplete widgets
const widgetInputOptions: Map<string, { placeholder?: string }> = new Map()
// Listen for Vue DOM mode setting changes and dispatch custom event
const initVueDomModeListener = () => {
if (app.ui?.settings?.addEventListener) {
app.ui.settings.addEventListener('Comfy.VueNodes.Enabled.change', () => {
// Use requestAnimationFrame to ensure the setting value has been updated
// before we read it (the event may fire before internal state updates)
requestAnimationFrame(() => {
const isVueDomMode = app.ui?.settings?.getSettingValue?.('Comfy.VueNodes.Enabled') ?? false
// Dispatch custom event for Vue components to listen to
document.dispatchEvent(new CustomEvent('lora-manager:vue-mode-change', {
detail: { isVueDomMode }
}))
})
})
}
}
// Initialize listener when app is ready
if (app.ui?.settings) {
initVueDomModeListener()
} else {
// Defer until app is ready
const checkAppReady = setInterval(() => {
if (app.ui?.settings) {
initVueDomModeListener()
clearInterval(checkAppReady)
}
}, 100)
}
// Factory function for creating autocomplete text widgets
// @ts-ignore
function createAutocompleteTextWidgetFactory(
node: any,
widgetName: string,
modelType: 'loras' | 'embeddings',
inputOptions: { placeholder?: string } = {}
) {
const container = document.createElement('div')
container.id = `autocomplete-text-widget-${node.id}-${widgetName}`
container.style.width = '100%'
container.style.height = '100%'
container.style.display = 'flex'
container.style.flexDirection = 'column'
container.style.overflow = 'hidden'
forwardMiddleMouseToCanvas(container)
let internalValue = ''
const widget = node.addDOMWidget(
widgetName,
`AUTOCOMPLETE_TEXT_${modelType.toUpperCase()}`,
container,
{
getValue() {
return internalValue
},
setValue(v: string) {
internalValue = v ?? ''
if (typeof widget.onSetValue === 'function') {
widget.onSetValue(v)
}
},
serialize: true,
getMinHeight() {
return AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT
}
}
)
// Get spellcheck setting from ComfyUI settings (default: false)
const spellcheck = app.ui?.settings?.getSettingValue?.('Comfy.TextareaWidget.Spellcheck') ?? false
const vueApp = createApp(AutocompleteTextWidget, {
widget,
node,
modelType,
placeholder: inputOptions.placeholder || widgetName,
showPreview: true,
spellcheck
})
vueApp.use(PrimeVue, {
unstyled: true,
ripple: false
})
vueApp.mount(container)
// Use a unique key combining node.id and widget name to avoid collisions
const appKey = node.id * 100000 + widgetName.charCodeAt(0)
vueApps.set(appKey, vueApp)
widget.computeLayoutSize = () => {
const minHeight = AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT
return { minHeight }
}
widget.onRemove = () => {
const vueApp = vueApps.get(appKey)
if (vueApp) {
vueApp.unmount()
vueApps.delete(appKey)
}
}
return { widget }
}
app.registerExtension({
name: 'LoraManager.VueWidgets',
@@ -402,16 +517,40 @@ app.registerExtension({
} : null
return addLorasWidgetCache(node, 'loras', { isRandomizerNode }, callback)
},
// Autocomplete text widget for LoRAs (used by Lora Loader, Lora Stacker, WanVideo Lora Select)
// @ts-ignore
AUTOCOMPLETE_TEXT_LORAS(node) {
const options = widgetInputOptions.get(`${node.comfyClass}:text`) || {}
return createAutocompleteTextWidgetFactory(node, 'text', 'loras', options)
},
// Autocomplete text widget for embeddings (used by Prompt node)
// @ts-ignore
AUTOCOMPLETE_TEXT_EMBEDDINGS(node) {
const options = widgetInputOptions.get(`${node.comfyClass}:text`) || {}
return createAutocompleteTextWidgetFactory(node, 'text', 'embeddings', options)
}
}
},
// Add display-only widget to Debug Metadata node
// Register mode change handlers for LoRA provider nodes
// Extract and store input options for autocomplete widgets
// @ts-ignore
async beforeRegisterNodeDef(nodeType, nodeData) {
const comfyClass = nodeType.comfyClass
// Extract and store input options for autocomplete widgets
const inputs = { ...nodeData.input?.required, ...nodeData.input?.optional }
for (const [inputName, inputDef] of Object.entries(inputs)) {
// @ts-ignore
if (Array.isArray(inputDef) && typeof inputDef[0] === 'string' && inputDef[0].startsWith('AUTOCOMPLETE_TEXT_')) {
// @ts-ignore
const options = inputDef[1] || {}
widgetInputOptions.set(`${nodeData.name}:${inputName}`, options)
}
}
// Register mode change handlers for LoRA provider nodes
if (LORA_PROVIDER_NODE_TYPES.includes(comfyClass)) {
const originalOnNodeCreated = nodeType.prototype.onNodeCreated

3
vue-widgets/vite.config.mts
View File

@@ -22,7 +22,8 @@ export default defineConfig({
rollupOptions: {
external: [
'../../../scripts/app.js',
'../loras_widget.js'
'../loras_widget.js',
'../autocomplete.js'
],
output: {
dir: '../web/comfyui/vue-widgets',

40
web/comfyui/lora_loader.js
View File

@@ -5,7 +5,6 @@ import {
updateConnectedTriggerWords,
chainCallback,
mergeLoras,
setupInputWidgetWithAutocomplete,
getAllGraphNodes,
getNodeFromGraph,
} from "./utils.js";
@@ -129,12 +128,12 @@ app.registerExtension({
set(value) {
const oldValue = _mode;
_mode = value;
// Trigger mode change handler
if (self.onModeChange) {
self.onModeChange(value, oldValue);
}
console.log(`[Lora Loader] Node mode changed from ${oldValue} to ${value}`);
}
});
@@ -142,14 +141,14 @@ app.registerExtension({
// Define the mode change handler
this.onModeChange = function(newMode, oldMode) {
console.log(`Lora Loader node mode changed: from ${oldMode} to ${newMode}`);
// Update connected trigger word toggle nodes when mode changes
const allActiveLoraNames = collectActiveLorasFromChain(self);
updateConnectedTriggerWords(self, allActiveLoraNames);
};
// Get the text input widget (AUTOCOMPLETE_TEXT_LORAS type, created by Vue widgets)
const inputWidget = this.widgets[0];
inputWidget.options.getMaxHeight = () => 100;
this.inputWidget = inputWidget;
const scheduleInputSync = debounce((lorasValue) => {
@@ -202,7 +201,8 @@ app.registerExtension({
}
).widget;
const originalCallback = (value) => {
// Set up callback for the text input widget to trigger merge logic
inputWidget.callback = (value) => {
if (isUpdating) return;
isUpdating = true;
@@ -218,13 +218,6 @@ app.registerExtension({
isUpdating = false;
}
};
// Setup input widget with autocomplete
inputWidget.callback = setupInputWidgetWithAutocomplete(
this,
inputWidget,
originalCallback
);
});
}
},
@@ -241,27 +234,6 @@ app.registerExtension({
// Merge the loras data
const mergedLoras = mergeLoras(node.widgets[0].value, existingLoras);
node.lorasWidget.value = mergedLoras;
// Initialize autocomplete after DOM is fully rendered
const inputWidget = node.inputWidget || node.widgets[0];
if (inputWidget && !node.autocomplete) {
const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
const modelType = "loras";
const autocompleteOptions = {
maxItems: 20,
minChars: 1,
debounceDelay: 200,
};
// Fix: Assign the enhanced callback to replace the original
inputWidget.callback = setupInputWidgetWithAutocomplete(node, inputWidget, inputWidget.callback, modelType, autocompleteOptions);
// Eager initialization: trigger callback after short delay to ensure DOM is ready
setTimeout(() => {
if (!node.autocomplete && inputWidget.callback) {
inputWidget.callback(inputWidget.value);
}
}, 100);
}
}
},
});

42
web/comfyui/lora_stacker.js
View File

@@ -1,14 +1,10 @@
import { app } from "../../scripts/app.js";
import {
getActiveLorasFromNode,
collectActiveLorasFromChain,
updateConnectedTriggerWords,
updateDownstreamLoaders,
chainCallback,
mergeLoras,
setupInputWidgetWithAutocomplete,
getLinkFromGraph,
getNodeKey,
} from "./utils.js";
import { addLorasWidget } from "./loras_widget.js";
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
@@ -31,8 +27,8 @@ app.registerExtension({
let isUpdating = false;
let isSyncingInput = false;
// Get the text input widget (AUTOCOMPLETE_TEXT_LORAS type, created by Vue widgets)
const inputWidget = this.widgets[0];
inputWidget.options.getMaxHeight = () => 100;
this.inputWidget = inputWidget;
const scheduleInputSync = debounce((lorasValue) => {
@@ -95,39 +91,32 @@ app.registerExtension({
this.lorasWidget = result.widget;
// Wrap the callback with autocomplete setup
const originalCallback = (value) => {
// Set up callback for the text input widget to trigger merge logic
inputWidget.callback = (value) => {
if (isUpdating) return;
isUpdating = true;
try {
const currentLoras = this.lorasWidget.value || [];
const currentLoras = this.lorasWidget?.value || [];
const mergedLoras = mergeLoras(value, currentLoras);
this.lorasWidget.value = mergedLoras;
if (this.lorasWidget) {
this.lorasWidget.value = mergedLoras;
}
// Update this stacker's direct trigger toggles with its own active loras
// Only if the stacker node itself is active (mode 0 for Always, mode 3 for On Trigger)
const isNodeActive = this.mode === undefined || this.mode === 0 || this.mode === 3;
const activeLoraNames = isNodeActive ? getActiveLorasFromNode(this) : new Set();
updateConnectedTriggerWords(this, activeLoraNames);
// Find all Lora Loader nodes in the chain that might need updates
updateDownstreamLoaders(this);
} finally {
isUpdating = false;
}
};
// Setup input widget with autocomplete
inputWidget.callback = setupInputWidgetWithAutocomplete(
this,
inputWidget,
originalCallback
);
});
}
},
async loadedGraphNode(node) {
if (node.comfyClass == "Lora Stacker (LoraManager)") {
// Restore saved value if exists
@@ -138,20 +127,9 @@ app.registerExtension({
existingLoras = savedValue || [];
}
// Merge the loras data
const mergedLoras = mergeLoras(node.widgets[0].value, existingLoras);
node.lorasWidget.value = mergedLoras;
const inputWidget = node.inputWidget || node.widgets[0];
if (inputWidget && !node.autocomplete) {
const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
const modelType = "loras";
const autocompleteOptions = {
maxItems: 20,
minChars: 1,
debounceDelay: 200,
};
inputWidget.callback = setupInputWidgetWithAutocomplete(node, inputWidget, inputWidget.callback, modelType, autocompleteOptions);
}
const mergedLoras = mergeLoras(inputWidget.value, existingLoras);
node.lorasWidget.value = mergedLoras;
}
},
});

34
web/comfyui/prompt.js
View File

@@ -1,5 +1,5 @@
import { app } from "../../scripts/app.js";
import { chainCallback, setupInputWidgetWithAutocomplete } from "./utils.js";
import { chainCallback } from "./utils.js";
app.registerExtension({
name: "LoraManager.Prompt",
@@ -9,36 +9,12 @@ app.registerExtension({
chainCallback(nodeType.prototype, "onNodeCreated", function () {
this.serialize_widgets = true;
const textWidget = this.widgets?.[0];
if (!textWidget) {
return;
// Get the text input widget (AUTOCOMPLETE_TEXT_EMBEDDINGS type, created by Vue widgets)
const inputWidget = this.widgets?.[0];
if (inputWidget) {
this.inputWidget = inputWidget;
}
const originalCallback =
typeof textWidget.callback === "function" ? textWidget.callback : null;
textWidget.callback = setupInputWidgetWithAutocomplete(
this,
textWidget,
originalCallback,
"embeddings"
);
});
}
},
async loadedGraphNode(node) {
if (node.comfyClass == "Prompt (LoraManager)") {
const textWidget = node.widgets?.[0];
if (textWidget && !node.autocomplete) {
const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
const modelType = "embeddings";
const autocompleteOptions = {
maxItems: 20,
minChars: 1,
debounceDelay: 200,
};
textWidget.callback = setupInputWidgetWithAutocomplete(node, textWidget, textWidget.callback, modelType, autocompleteOptions);
}
}
},
});

641
web/comfyui/vue-widgets/lora-manager-widgets.js
View File

File diff suppressed because it is too large Load Diff

2
web/comfyui/vue-widgets/lora-manager-widgets.js.map
View File

File diff suppressed because one or more lines are too long

36
web/comfyui/wanvideo_lora_select.js
View File

@@ -4,7 +4,6 @@ import {
updateConnectedTriggerWords,
chainCallback,
mergeLoras,
setupInputWidgetWithAutocomplete,
} from "./utils.js";
import { addLorasWidget } from "./loras_widget.js";
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
@@ -31,8 +30,8 @@ app.registerExtension({
let isUpdating = false;
let isSyncingInput = false;
// Get the text input widget (AUTOCOMPLETE_TEXT_LORAS type, at index 2 after low_mem_load and merge_loras)
const inputWidget = this.widgets[2];
inputWidget.options.getMaxHeight = () => 100;
this.inputWidget = inputWidget;
const scheduleInputSync = debounce((lorasValue) => {
@@ -81,17 +80,17 @@ app.registerExtension({
this.lorasWidget = result.widget;
// Wrap the callback with autocomplete setup
const originalCallback = (value) => {
// Set up callback for the text input widget to trigger merge logic
inputWidget.callback = (value) => {
if (isUpdating) return;
isUpdating = true;
try {
const currentLoras = this.lorasWidget.value || [];
const currentLoras = this.lorasWidget?.value || [];
const mergedLoras = mergeLoras(value, currentLoras);
this.lorasWidget.value = mergedLoras;
if (this.lorasWidget) {
this.lorasWidget.value = mergedLoras;
}
// Update this node's direct trigger toggles with its own active loras
const activeLoraNames = getActiveLorasFromNode(this);
updateConnectedTriggerWords(this, activeLoraNames);
@@ -99,14 +98,10 @@ app.registerExtension({
isUpdating = false;
}
};
inputWidget.callback = setupInputWidgetWithAutocomplete(
this,
inputWidget,
originalCallback
);
});
}
},
async loadedGraphNode(node) {
if (node.comfyClass == "WanVideo Lora Select (LoraManager)") {
// Restore saved value if exists
@@ -117,20 +112,9 @@ app.registerExtension({
existingLoras = savedValue || [];
}
// Merge the loras data
const mergedLoras = mergeLoras(node.widgets[2].value, existingLoras);
node.lorasWidget.value = mergedLoras;
const inputWidget = node.inputWidget || node.widgets[2];
if (inputWidget && !node.autocomplete) {
const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
const modelType = "loras";
const autocompleteOptions = {
maxItems: 20,
minChars: 1,
debounceDelay: 200,
};
inputWidget.callback = setupInputWidgetWithAutocomplete(node, inputWidget, inputWidget.callback, modelType, autocompleteOptions);
}
const mergedLoras = mergeLoras(inputWidget.value, existingLoras);
node.lorasWidget.value = mergedLoras;
}
},
});