mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-23 15:59:47 +00:00
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:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user