refactor(nodes): declare loras widget as LORAS input type on lora nodes

This commit is contained in:
Will Miao
2026-08-20 13:22:11 +08:00
parent e57e11897e
commit b80830913c
15 changed files with 181 additions and 313 deletions
+27 -32
View File
@@ -7,10 +7,7 @@ import {
getWidgetByName,
getWidgetSerializedValue,
} from "./utils.js";
import { addLorasWidget } from "./loras_widget.js";
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
import { applySelectionHighlight } from "./trigger_word_highlight.js";
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
app.registerExtension({
name: "LoraManager.CreateHookLora",
@@ -62,39 +59,37 @@ app.registerExtension({
}
});
// Create the LoRA list widget
const result = addLorasWidget(
this,
"loras",
{
onSelectionChange: (selection) => {
applySelectionHighlight(this, selection);
updateConnectedLoraInfoNodes(this, selection);
},
},
(value) => {
// Prevent recursive calls
if (isUpdating) return;
isUpdating = true;
// The "loras" widget is declared in INPUT_TYPES (LORAS type) and
// created by the LoraManager.LorasWidget extension; take it over here.
const lorasWidget = getWidgetByName(this, "loras");
if (!lorasWidget) {
console.warn(
"LoRA Manager: loras widget not found for Create Hook LoRA"
);
return;
}
this.lorasWidget = lorasWidget;
try {
// Update connected trigger word toggles with active LoRA names
const activeLoraNames = new Set();
value.forEach((lora) => {
if (lora.active) {
activeLoraNames.add(lora.name);
}
});
updateConnectedTriggerWords(this, activeLoraNames);
} finally {
isUpdating = false;
}
lorasWidget.callback = (value) => {
// Prevent recursive calls
if (isUpdating) return;
isUpdating = true;
scheduleInputSync(value);
try {
// Update connected trigger word toggles with active LoRA names
const activeLoraNames = new Set();
value.forEach((lora) => {
if (lora.active) {
activeLoraNames.add(lora.name);
}
});
updateConnectedTriggerWords(this, activeLoraNames);
} finally {
isUpdating = false;
}
);
this.lorasWidget = result.widget;
scheduleInputSync(value);
};
// Set up callback for the text input widget to trigger merge logic
inputWidget.callback = (value) => {
+22 -27
View File
@@ -10,10 +10,7 @@ import {
getWidgetByName,
getWidgetSerializedValue,
} from "./utils.js";
import { addLorasWidget } from "./loras_widget.js";
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
import { applySelectionHighlight } from "./trigger_word_highlight.js";
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
app.registerExtension({
name: "LoraManager.LoraLoader",
@@ -188,34 +185,32 @@ app.registerExtension({
}
});
// Get the widget object directly from the returned object
this.lorasWidget = addLorasWidget(
this,
"loras",
{
onSelectionChange: (selection) => {
applySelectionHighlight(this, selection);
updateConnectedLoraInfoNodes(this, selection);
},
},
(value) => {
// Prevent recursive calls
if (isUpdating) return;
isUpdating = true;
// The "loras" widget is declared in INPUT_TYPES (LORAS type) and
// created by the LoraManager.LorasWidget extension; take it over here.
const lorasWidget = getWidgetByName(this, "loras");
if (!lorasWidget) {
console.warn("LoRA Manager: loras widget not found for Lora Loader");
return;
}
this.lorasWidget = lorasWidget;
try {
// Collect all active loras from this node and its input chain
const allActiveLoraNames = collectActiveLorasFromChain(this);
lorasWidget.callback = (value) => {
// Prevent recursive calls
if (isUpdating) return;
isUpdating = true;
// Update trigger words for connected toggle nodes with the aggregated lora names
updateConnectedTriggerWords(this, allActiveLoraNames);
} finally {
isUpdating = false;
}
try {
// Collect all active loras from this node and its input chain
const allActiveLoraNames = collectActiveLorasFromChain(this);
scheduleInputSync(value);
// Update trigger words for connected toggle nodes with the aggregated lora names
updateConnectedTriggerWords(this, allActiveLoraNames);
} finally {
isUpdating = false;
}
).widget;
scheduleInputSync(value);
};
// Set up callback for the text input widget to trigger merge logic
inputWidget.callback = (value) => {
+31 -36
View File
@@ -8,10 +8,7 @@ import {
getWidgetByName,
getWidgetSerializedValue,
} from "./utils.js";
import { addLorasWidget } from "./loras_widget.js";
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
import { applySelectionHighlight } from "./trigger_word_highlight.js";
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
app.registerExtension({
name: "LoraManager.LoraStacker",
@@ -61,44 +58,42 @@ app.registerExtension({
}
});
const result = addLorasWidget(
this,
"loras",
{
onSelectionChange: (selection) => {
applySelectionHighlight(this, selection);
updateConnectedLoraInfoNodes(this, selection);
},
},
(value) => {
// Prevent recursive calls
if (isUpdating) return;
isUpdating = true;
// The "loras" widget is declared in INPUT_TYPES (LORAS type) and
// created by the LoraManager.LorasWidget extension; take it over here.
const lorasWidget = getWidgetByName(this, "loras");
if (!lorasWidget) {
console.warn("LoRA Manager: loras widget not found for Lora Stacker");
return;
}
this.lorasWidget = lorasWidget;
try {
// 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 = new Set();
if (isNodeActive) {
value.forEach((lora) => {
if (lora.active) {
activeLoraNames.add(lora.name);
}
});
}
updateConnectedTriggerWords(this, activeLoraNames);
lorasWidget.callback = (value) => {
// Prevent recursive calls
if (isUpdating) return;
isUpdating = true;
// Find all Lora Loader nodes in the chain that might need updates
updateDownstreamLoaders(this);
} finally {
isUpdating = false;
try {
// 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 = new Set();
if (isNodeActive) {
value.forEach((lora) => {
if (lora.active) {
activeLoraNames.add(lora.name);
}
});
}
updateConnectedTriggerWords(this, activeLoraNames);
scheduleInputSync(value);
});
// Find all Lora Loader nodes in the chain that might need updates
updateDownstreamLoaders(this);
} finally {
isUpdating = false;
}
this.lorasWidget = result.widget;
scheduleInputSync(value);
};
// Set up callback for the text input widget to trigger merge logic
inputWidget.callback = (value) => {
+51 -1
View File
@@ -1,3 +1,4 @@
import { app } from "../../scripts/app.js";
import { createToggle, createArrowButton, createDragHandle, updateEntrySelection, createExpandButton, updateExpandButtonState, createLockButton, updateLockButtonState } from "./loras_widget_components.js";
import {
parseLoraValue,
@@ -10,7 +11,9 @@ import {
onLibraryChanged
} from "./loras_widget_utils.js";
import { initDrag, createContextMenu, initHeaderDrag, initReorderDrag, handleKeyboardNavigation } from "./loras_widget_events.js";
import { forwardMiddleMouseToCanvas, forwardWheelToCanvas, enableListWheelScroll } from "./utils.js";
import { forwardMiddleMouseToCanvas, forwardWheelToCanvas, enableListWheelScroll, updateDownstreamLoaders } from "./utils.js";
import { applySelectionHighlight } from "./trigger_word_highlight.js";
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
import { PreviewTooltip } from "./preview_tooltip.js";
import { ensureLmStyles } from "./lm_styles_loader.js";
import { getStrengthStepPreference } from "./settings.js";
@@ -885,3 +888,50 @@ export function addLorasWidget(node, name, opts, callback) {
return { minWidth: 400, minHeight: defaultHeight, widget };
}
// Node classes whose declared "loras" input (LORAS widget type) also applies
// trigger-word selection highlighting on lora selection.
const LORAS_WIDGET_HIGHLIGHT_NODE_CLASSES = new Set([
"Lora Loader (LoraManager)",
"Lora Stacker (LoraManager)",
"Create Hook LoRA (LoraManager)",
]);
app.registerExtension({
name: "LoraManager.LorasWidget",
getCustomWidgets() {
return {
// Synchronous factory for the declared "loras" input (LORAS type) used by
// Lora Loader / Lora Stacker / Create Hook LoRA / WanVideo Lora Select /
// Lora Randomizer nodes. ComfyUI calls widget constructors synchronously,
// so this must NOT be async.
LORAS(node) {
const comfyClass = node?.comfyClass;
const isRandomizerNode = comfyClass === "Lora Randomizer (LoraManager)";
const opts = { isRandomizerNode };
if (isRandomizerNode || comfyClass === "WanVideo Lora Select (LoraManager)") {
opts.onSelectionChange = (selection) => {
updateConnectedLoraInfoNodes(node, selection);
};
} else if (LORAS_WIDGET_HIGHLIGHT_NODE_CLASSES.has(comfyClass)) {
opts.onSelectionChange = (selection) => {
applySelectionHighlight(node, selection);
updateConnectedLoraInfoNodes(node, selection);
};
}
// The randomizer has no per-node JS extension; update downstream
// loaders directly from the widget callback. The other nodes assign
// their own widget.callback in their onNodeCreated handlers.
const callback = isRandomizerNode
? () => updateDownstreamLoaders(node)
: null;
return addLorasWidget(node, "loras", opts, callback);
},
};
},
});
@@ -16070,7 +16070,6 @@ function createAutocompleteTextWidgetInstanceId() {
autocompleteTextWidgetInstanceId += 1;
return autocompleteTextWidgetInstanceId;
}
let addLorasWidgetCache = null;
function createLoraPoolWidget(node) {
const container = document.createElement("div");
container.id = `lora-pool-widget-${node.id}`;
@@ -16683,81 +16682,6 @@ app$1.registerExtension({
CYCLER_CONFIG(node) {
return createLoraCyclerWidget(node);
},
// @ts-ignore
async LORAS(node) {
if (!addLorasWidgetCache) {
const module = await import(
/* @vite-ignore */
"../loras_widget.js"
);
addLorasWidgetCache = module.addLorasWidget;
}
const isRandomizerNode = node.comfyClass === "Lora Randomizer (LoraManager)";
const callback = isRandomizerNode ? () => {
updateDownstreamLoaders(node);
} : null;
const opts = {
isRandomizerNode
};
if (isRandomizerNode) {
opts.onSelectionChange = async (selection) => {
var _a2, _b, _c, _d, _e2;
if (!(selection == null ? void 0 : selection.name) || !(selection == null ? void 0 : selection.active)) return;
const infoNodes = [];
if (node.outputs) {
for (const output of node.outputs) {
if (!((_a2 = output == null ? void 0 : output.links) == null ? void 0 : _a2.length)) continue;
for (const linkId of output.links) {
const links = (_b = node.graph) == null ? void 0 : _b.links;
if (!links) continue;
const link = Array.isArray(links) ? links[linkId] : (_c = links.get) == null ? void 0 : _c.call(links, linkId);
if (!link) continue;
const targetNode = (_e2 = (_d = node.graph) == null ? void 0 : _d.getNodeById) == null ? void 0 : _e2.call(_d, link.target_id);
if ((targetNode == null ? void 0 : targetNode.comfyClass) === "Lora Info (LoraManager)") {
infoNodes.push(targetNode);
}
}
}
}
if (infoNodes.length === 0) return;
for (const infoNode of infoNodes) {
infoNode.__loraInfoReqId = (infoNode.__loraInfoReqId || 0) + 1;
}
const reqIdSnapshot = /* @__PURE__ */ new Map();
for (const infoNode of infoNodes) {
reqIdSnapshot.set(infoNode, infoNode.__loraInfoReqId);
}
let infoData;
try {
const response = await api$1.fetchApi(
`/lm/loras/get-notes?name=${encodeURIComponent(selection.name)}`,
{ method: "GET" }
);
if (response == null ? void 0 : response.ok) {
const data = await response.json();
infoData = {
name: selection.name,
notes: (data == null ? void 0 : data.notes) || "",
filePath: (data == null ? void 0 : data.file_path) || ""
};
} else {
infoData = { name: selection.name, notes: "[Error loading notes]", filePath: "" };
}
} catch {
infoData = { name: selection.name, notes: "[Error loading notes]", filePath: "" };
}
for (const infoNode of infoNodes) {
if (infoNode.__loraInfoReqId !== reqIdSnapshot.get(infoNode)) {
continue;
}
if (typeof infoNode._setLoraInfo === "function") {
infoNode._setLoraInfo(infoData);
}
}
};
}
return addLorasWidgetCache(node, "loras", opts, callback);
},
// Autocomplete text widget for LoRAs (used by Lora Loader, Lora Stacker, WanVideo Lora Select)
// @ts-ignore
AUTOCOMPLETE_TEXT_LORAS(node) {
File diff suppressed because one or more lines are too long
+11 -10
View File
@@ -7,9 +7,7 @@ import {
getWidgetByName,
getWidgetSerializedValue,
} from "./utils.js";
import { addLorasWidget } from "./loras_widget.js";
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
app.registerExtension({
name: "LoraManager.WanVideoLoraSelect",
@@ -64,11 +62,16 @@ app.registerExtension({
}
});
const result = addLorasWidget(this, "loras", {
onSelectionChange: (selection) => {
updateConnectedLoraInfoNodes(this, selection);
},
}, (value) => {
// The "loras" widget is declared in INPUT_TYPES (LORAS type) and
// created by the LoraManager.LorasWidget extension; take it over here.
const lorasWidget = getWidgetByName(this, "loras");
if (!lorasWidget) {
console.warn("LoRA Manager: loras widget not found for WanVideo Lora Select");
return;
}
this.lorasWidget = lorasWidget;
lorasWidget.callback = (value) => {
// Prevent recursive calls
if (isUpdating) return;
isUpdating = true;
@@ -87,9 +90,7 @@ app.registerExtension({
}
scheduleInputSync(value);
});
this.lorasWidget = result.widget;
};
// Set up callback for the text input widget to trigger merge logic
inputWidget.callback = (value) => {