mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +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()
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
onBlur: handleBlur
|
||||
}
|
||||
}"
|
||||
data-capture-wheel="true"
|
||||
@update:model-value="onChange"
|
||||
@click.stop
|
||||
@keydown.stop
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
:pt="{
|
||||
option: 'text-xs'
|
||||
}"
|
||||
data-capture-wheel="true"
|
||||
@update:model-value="onChange"
|
||||
/>
|
||||
</WidgetLayoutField>
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
:placeholder="placeholder || widget.name || ''"
|
||||
size="small"
|
||||
rows="3"
|
||||
data-capture-wheel="true"
|
||||
@update:model-value="onChange"
|
||||
/>
|
||||
<LODFallback />
|
||||
|
||||
Reference in New Issue
Block a user