mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-08-08 06:50:15 -03:00
fix(widgets): reuse orphaned DOM containers after undo/redo in Vue render mode
In ComfyUI Vue render mode, WidgetDOM.vue reuses its component instance during undo/redo without re-calling mountWidgetElement(), leaving newly created widget containers detached from the DOM. - AutocompleteTextWidget: scan for empty containers by ID prefix and reuse - Loras widget: scan for empty .lm-loras-container elements and reuse - Prevent duplicate event listeners by guarding listener setup on new containers only - Keep container in DOM on cleanup (clearChildren instead of remove) so it can be found and reused by the next factory invocation
This commit is contained in:
@@ -14,12 +14,31 @@ import { getStrengthStepPreference } from "./settings.js";
|
||||
export function addLorasWidget(node, name, opts, callback) {
|
||||
ensureLmStyles();
|
||||
|
||||
// Create container for loras
|
||||
const container = document.createElement("div");
|
||||
container.className = "lm-loras-container";
|
||||
// Create container for loras — search for an empty container already
|
||||
// in the DOM first. During undo/redo in ComfyUI Vue render mode,
|
||||
// WidgetDOM.vue reuses its component without re-calling
|
||||
// mountWidgetElement(), so we must reuse the existing DOM element
|
||||
// instead of creating an orphaned replacement.
|
||||
let container = null;
|
||||
let reuseExisting = false;
|
||||
const existingContainers = document.querySelectorAll('.lm-loras-container');
|
||||
for (const el of existingContainers) {
|
||||
if (el.children.length === 0) {
|
||||
container = el;
|
||||
reuseExisting = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
forwardMiddleMouseToCanvas(container);
|
||||
forwardWheelToCanvas(container);
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.className = "lm-loras-container";
|
||||
}
|
||||
|
||||
if (!reuseExisting) {
|
||||
forwardMiddleMouseToCanvas(container);
|
||||
forwardWheelToCanvas(container);
|
||||
}
|
||||
|
||||
// Set initial height using CSS variables approach
|
||||
const defaultHeight = 200;
|
||||
@@ -29,10 +48,8 @@ export function addLorasWidget(node, name, opts, callback) {
|
||||
// scrolls when content exceeds the allocated space.
|
||||
container.style.setProperty('--comfy-widget-min-height', `${defaultHeight}px`);
|
||||
|
||||
if (typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode) {
|
||||
if (!reuseExisting && typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode) {
|
||||
container.classList.add('lm-vue-node');
|
||||
// Window capture-phase hook: scroll the widget instead of zooming the canvas
|
||||
// when the wheel is over a scrollable loras list.
|
||||
enableListWheelScroll(container);
|
||||
}
|
||||
|
||||
@@ -732,9 +749,10 @@ export function addLorasWidget(node, name, opts, callback) {
|
||||
widget.callback = callback;
|
||||
|
||||
widget.onRemove = () => {
|
||||
container.remove();
|
||||
while (container.firstChild) {
|
||||
container.removeChild(container.firstChild);
|
||||
}
|
||||
previewTooltip.cleanup();
|
||||
// Remove keyboard event listener
|
||||
container.removeEventListener('keydown', handleKeyboardNavigation);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user