fix: wheel zoom behavior for LoRA Manager widgets

- Add forwardWheelToCanvas() utility for vanilla JS widgets
- Implement wheel event handling in Vue widgets (LoraCyclerWidget, LoraRandomizerWidget, LoraPoolWidget)
- Update SingleSlider and DualRangeSlider to stop event propagation after value adjustment
- Ensure consistent behavior: slider adjusts value only, other areas trigger canvas zoom
- Support pinch-to-zoom (Ctrl+wheel) and horizontal scroll forwarding
This commit is contained in:
Will Miao
2026-03-28 22:42:26 +08:00
parent dcc7bd33b5
commit 89b1675ec7
10 changed files with 399 additions and 96 deletions

View File

@@ -11,7 +11,7 @@ import {
EMPTY_CONTAINER_HEIGHT
} from "./loras_widget_utils.js";
import { initDrag, createContextMenu, initHeaderDrag, initReorderDrag, handleKeyboardNavigation } from "./loras_widget_events.js";
import { forwardMiddleMouseToCanvas } from "./utils.js";
import { forwardMiddleMouseToCanvas, forwardWheelToCanvas } from "./utils.js";
import { PreviewTooltip } from "./preview_tooltip.js";
import { ensureLmStyles } from "./lm_styles_loader.js";
import { getStrengthStepPreference } from "./settings.js";
@@ -24,6 +24,7 @@ export function addLorasWidget(node, name, opts, callback) {
container.className = "lm-loras-container";
forwardMiddleMouseToCanvas(container);
forwardWheelToCanvas(container);
// Set initial height using CSS variables approach
const defaultHeight = 200;