Check if the wheel event is from an element that wants to capture wheel events

Author: jtydhr88

src/components/graph/GraphCanvas.vue

@@ -36,7 +36,7 @@
     v-if="shouldRenderVueNodes && comfyApp.canvas && comfyAppReady"
     :canvas="comfyApp.canvas"
     @transform-update="handleTransformUpdate"
-    @wheel.capture="canvasInteractions.forwardEventToCanvas"
+    @wheel.capture="handleTransformPaneWheel"
   >
     <!-- Vue nodes rendered based on graph nodes -->
     <VueGraphNode
@@ -369,6 +369,18 @@ useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()
 
+const handleTransformPaneWheel = (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) {
+    return
+  }
+
+  canvasInteractions.forwardEventToCanvas(event)
+}
+
 onMounted(async () => {
   useGlobalLitegraph()
   useContextMenuTranslation()

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -39,7 +39,7 @@
       dragStyle
     ]"
     v-bind="pointerHandlers"
-    @wheel="handleWheel"
+    @wheel="handleNodeWheel"
     @contextmenu="handleContextMenu"
   >
     <div class="flex items-center">
@@ -320,6 +320,19 @@ const handleHeaderTitleUpdate = (newTitle: string) => {
   handleNodeTitleUpdate(nodeData.id, newTitle)
 }
 
+const handleNodeWheel = (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
+  }
+
+  handleWheel(event)
+}
+
 const handleEnterSubgraph = () => {
   const graph = app.graph?.rootGraph || app.graph
   if (!graph) {