Skip to content

Commit 28a779d

Browse files
authored
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 #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)
1 parent ed5d258 commit 28a779d

File tree

4 files changed

+21
-0
lines changed

4 files changed

+21
-0
lines changed

src/renderer/core/canvas/useCanvasInteractions.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,15 @@ export function useCanvasInteractions() {
3030
* when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
3131
*/
3232
const handleWheel = (event: WheelEvent) => {
33+
// Check if the wheel event is from an element that wants to capture wheel events
34+
const target = event.target as HTMLElement
35+
const captureElement = target?.closest('[data-capture-wheel="true"]')
36+
37+
if (captureElement) {
38+
// Element wants to capture wheel events, don't forward to canvas
39+
return
40+
}
41+
3342
// In standard mode, Ctrl+wheel should go to canvas for zoom
3443
if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
3544
forwardEventToCanvas(event)
@@ -72,6 +81,15 @@ export function useCanvasInteractions() {
7281
const forwardEventToCanvas = (
7382
event: WheelEvent | PointerEvent | MouseEvent
7483
) => {
84+
// Check if the wheel event is from an element that wants to capture wheel events
85+
const target = event.target as HTMLElement
86+
const captureElement = target?.closest('[data-capture-wheel="true"]')
87+
88+
if (captureElement) {
89+
// Element wants to capture wheel events, don't forward to canvas
90+
return
91+
}
92+
7593
const canvasEl = app.canvas?.canvas
7694
if (!canvasEl) return
7795
event.preventDefault()

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
onBlur: handleBlur
2424
}
2525
}"
26+
data-capture-wheel="true"
2627
@update:model-value="onChange"
2728
@click.stop
2829
@keydown.stop

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
:pt="{
1111
option: 'text-xs'
1212
}"
13+
data-capture-wheel="true"
1314
@update:model-value="onChange"
1415
/>
1516
</WidgetLayoutField>

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
:placeholder="placeholder || widget.name || ''"
99
size="small"
1010
rows="3"
11+
data-capture-wheel="true"
1112
@update:model-value="onChange"
1213
/>
1314
<LODFallback />

0 commit comments

Comments
 (0)