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

@@ -280,8 +280,7 @@ const onWheel = (event: WheelEvent) => {
if (event.clientX < rootRect.left || event.clientX > rootRect.right ||
event.clientY < rootRect.top || event.clientY > rootRect.bottom) return
event.preventDefault()
// Adjust slider values when wheeling over the slider area
const delta = event.deltaY > 0 ? -1 : 1
const relativeX = event.clientX - rect.left
const rangeWidth = rect.width
@@ -320,6 +319,9 @@ const onWheel = (event: WheelEvent) => {
}
}
}
// Stop propagation to prevent canvas zoom
event.stopPropagation()
}
const stopDrag = (event?: PointerEvent) => {

View File

@@ -131,11 +131,13 @@ const onWheel = (event: WheelEvent) => {
if (event.clientX < rootRect.left || event.clientX > rootRect.right ||
event.clientY < rootRect.top || event.clientY > rootRect.bottom) return
event.preventDefault()
// Adjust slider value when wheeling over the slider area
const delta = event.deltaY > 0 ? -1 : 1
const newValue = snapToStep(props.value + delta * props.step)
emit('update:value', newValue)
// Stop propagation to prevent canvas zoom
event.stopPropagation()
}
const stopDrag = (event?: PointerEvent) => {