fix(ui): make Lora Loader list scrollable in Nodes 2.0 mode

In Nodes 2.0 / Vue node mode the Lora Loader list could not be capped
and the node grew to show every row, unlike classic mode which fixes the
list area to 12 rows. The Vue layout engine measures the rendered DOM, so
CSS variables and computeLayoutSize alone were ignored.

- Physically cap the container via max-height so the rendered element is
  bounded to the 12-row height; extra rows scroll (overflow: auto).
- Report the capped height through computeSize / computeLayoutSize /
  getHeight / getMinHeight so the node background matches the list.
- Add enableListWheelScroll: a window capture-phase wheel hook that scrolls
  the hovered list instead of letting ComfyUI zoom the canvas, which fires
  on the document/canvas in capture and beat a container-level listener.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
id-fa
2026-06-04 20:28:41 +09:00
parent 62f9e3f44a
commit 7f92d09239
3 changed files with 103 additions and 17 deletions

View File

@@ -18,21 +18,28 @@ export function formatLoraValue(loras) {
return loras;
}
// Function to update widget height consistently
// Resolve the capped (12-row) height of the widget and physically cap the
// container so the list area never grows past it.
// `height` is the raw content height (already capped at 12 rows by the caller);
// the result never drops below defaultHeight.
// The max-height is the reliable lever: Nodes 2.0 / Vue mode measures the
// rendered DOM to size the node, so without an actual height cap on the element
// the list always shows every row. max-height bounds the element regardless of
// what the layout engine measures, and the overflow makes the extra rows scroll.
// Returns the resolved height so callers can also report it to ComfyUI.
export function updateWidgetHeight(container, height, defaultHeight, node) {
// Ensure minimum height
const finalHeight = Math.max(defaultHeight, height);
// 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
const cappedHeight = Math.max(defaultHeight, height);
container.style.maxHeight = `${cappedHeight}px`;
// Force node to redraw after a short delay to ensure the DOM is updated.
if (node) {
setTimeout(() => {
node.setDirtyCanvas(true, true);
}, 10);
}
return cappedHeight;
}
// Determine if clip entry should be shown - now based on expanded property or initial diff values