Check if the wheel event is from an element that wants to capture wheel events (#5821)

## Summary

Add generic wheel event capture mechanism for interactive widgets in
vueNodes system to prevent event bubbling to canvas.

  ## Changes

- What: Add event handling logic in LGraphNode.vue and GraphCanvas.vue
that checks for data-capture-wheel attribute to determine whether wheel
events should be forwarded to the canvas
- How it works: Components that need to capture wheel events (like
Three.js scenes) can add data-capture-wheel="true" attribute to prevent
wheel events from bubbling up to the canvas zoom handler

prerequirist for https://github.com/Comfy-Org/ComfyUI_frontend/pull/5765

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5821-Check-if-the-wheel-event-is-from-an-element-that-wants-to-capture-wheel-events-27b6d73d3650812493b5f13849147e6c)
by [Unito](https://www.unito.io)
This commit is contained in:
Terry Jia
2025-09-29 22:51:37 -04:00
committed by GitHub
parent ed5d258ab6
commit 28a779d41a
4 changed files with 21 additions and 0 deletions

View File

@@ -30,6 +30,15 @@ export function useCanvasInteractions() {
* when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
*/
const handleWheel = (event: WheelEvent) => {
// Check if the wheel event is from an element that wants to capture wheel events
const target = event.target as HTMLElement
const captureElement = target?.closest('[data-capture-wheel="true"]')
if (captureElement) {
// Element wants to capture wheel events, don't forward to canvas
return
}
// In standard mode, Ctrl+wheel should go to canvas for zoom
if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
forwardEventToCanvas(event)
@@ -72,6 +81,15 @@ export function useCanvasInteractions() {
const forwardEventToCanvas = (
event: WheelEvent | PointerEvent | MouseEvent
) => {
// Check if the wheel event is from an element that wants to capture wheel events
const target = event.target as HTMLElement
const captureElement = target?.closest('[data-capture-wheel="true"]')
if (captureElement) {
// Element wants to capture wheel events, don't forward to canvas
return
}
const canvasEl = app.canvas?.canvas
if (!canvasEl) return
event.preventDefault()

View File

@@ -23,6 +23,7 @@
onBlur: handleBlur
}
}"
data-capture-wheel="true"
@update:model-value="onChange"
@click.stop
@keydown.stop

View File

@@ -10,6 +10,7 @@
:pt="{
option: 'text-xs'
}"
data-capture-wheel="true"
@update:model-value="onChange"
/>
</WidgetLayoutField>

View File

@@ -8,6 +8,7 @@
:placeholder="placeholder || widget.name || ''"
size="small"
rows="3"
data-capture-wheel="true"
@update:model-value="onChange"
/>
<LODFallback />