mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-06-09 20:39:25 -03:00
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:
@@ -784,6 +784,59 @@ export function forwardWheelToCanvas(container, options = {}) {
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
// Marks elements whose wheel scrolling must win over the canvas zoom.
|
||||
const LIST_WHEEL_SCROLL_CLASS = 'lm-wheel-scrollable';
|
||||
let listWheelScrollHookInstalled = false;
|
||||
|
||||
/**
|
||||
* Keep vertical wheel scrolling inside a scrollable widget container instead of
|
||||
* letting ComfyUI zoom the canvas.
|
||||
*
|
||||
* In Nodes 2.0 / Vue mode ComfyUI's wheel→zoom handler runs on the document /
|
||||
* canvas in the capture phase, which is *outer* than the widget, so a listener
|
||||
* on the container (even in capture) fires too late. The reliable place to win
|
||||
* is a single hook on `window` in the capture phase — the very first step of
|
||||
* event dispatch. When the wheel is over a marked, scrollable element we scroll
|
||||
* it manually and fully consume the event; otherwise we leave it alone so canvas
|
||||
* zoom keeps working.
|
||||
* @param {HTMLElement} container - The scrollable element (overflow: auto)
|
||||
*/
|
||||
export function enableListWheelScroll(container) {
|
||||
if (!container) return;
|
||||
container.classList.add(LIST_WHEEL_SCROLL_CLASS);
|
||||
|
||||
if (listWheelScrollHookInstalled) return;
|
||||
listWheelScrollHookInstalled = true;
|
||||
|
||||
window.addEventListener('wheel', (event) => {
|
||||
// Let pinch/zoom and horizontal gestures fall through to the canvas.
|
||||
if (event.ctrlKey) return;
|
||||
if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) return;
|
||||
|
||||
const target = event.target;
|
||||
if (!target || typeof target.closest !== 'function') return;
|
||||
const el = target.closest(`.${LIST_WHEEL_SCROLL_CLASS}`);
|
||||
if (!el) return;
|
||||
|
||||
const canScrollY = el.scrollHeight > el.clientHeight + 1;
|
||||
if (!canScrollY) return; // Nothing to scroll → allow canvas zoom.
|
||||
|
||||
// Translate the wheel delta to pixels (line / page modes → approx px).
|
||||
const unit = event.deltaMode === 1
|
||||
? 16
|
||||
: event.deltaMode === 2
|
||||
? el.clientHeight
|
||||
: 1;
|
||||
|
||||
el.scrollTop += event.deltaY * unit;
|
||||
|
||||
// Consume the event so neither ComfyUI's zoom nor forwardWheelToCanvas react.
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
}, { capture: true, passive: false });
|
||||
}
|
||||
|
||||
// Get connected Lora Pool node from pool_config input
|
||||
export function getConnectedPoolConfigNode(node) {
|
||||
if (!node?.inputs) {
|
||||
|
||||
Reference in New Issue
Block a user