mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 03:01:54 +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)
|
* when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
|
||||||
*/
|
*/
|
||||||
const handleWheel = (event: WheelEvent) => {
|
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
|
// In standard mode, Ctrl+wheel should go to canvas for zoom
|
||||||
if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
|
if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
|
||||||
forwardEventToCanvas(event)
|
forwardEventToCanvas(event)
|
||||||
@@ -72,6 +81,15 @@ export function useCanvasInteractions() {
|
|||||||
const forwardEventToCanvas = (
|
const forwardEventToCanvas = (
|
||||||
event: WheelEvent | PointerEvent | MouseEvent
|
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
|
const canvasEl = app.canvas?.canvas
|
||||||
if (!canvasEl) return
|
if (!canvasEl) return
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|||||||
@@ -23,6 +23,7 @@
|
|||||||
onBlur: handleBlur
|
onBlur: handleBlur
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
|
data-capture-wheel="true"
|
||||||
@update:model-value="onChange"
|
@update:model-value="onChange"
|
||||||
@click.stop
|
@click.stop
|
||||||
@keydown.stop
|
@keydown.stop
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
:pt="{
|
:pt="{
|
||||||
option: 'text-xs'
|
option: 'text-xs'
|
||||||
}"
|
}"
|
||||||
|
data-capture-wheel="true"
|
||||||
@update:model-value="onChange"
|
@update:model-value="onChange"
|
||||||
/>
|
/>
|
||||||
</WidgetLayoutField>
|
</WidgetLayoutField>
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
:placeholder="placeholder || widget.name || ''"
|
:placeholder="placeholder || widget.name || ''"
|
||||||
size="small"
|
size="small"
|
||||||
rows="3"
|
rows="3"
|
||||||
|
data-capture-wheel="true"
|
||||||
@update:model-value="onChange"
|
@update:model-value="onChange"
|
||||||
/>
|
/>
|
||||||
<LODFallback />
|
<LODFallback />
|
||||||
|
|||||||
Reference in New Issue
Block a user