[refactor] rename canCapturePointerEvents to shouldHandleNodePointerEvents - addresses review feedback

Improves naming clarity by making it explicit that this controls whether
Vue node components should handle pointer events rather than forward them
to the canvas during panning mode.

Co-authored-by: DrJKL <[email protected]>

Author: christian-byrne

src/renderer/core/canvas/useCanvasInteractions.ts

@@ -19,10 +19,10 @@ export function useCanvasInteractions() {
   )
 
   /**
-   * Whether Vue components can capture pointer events.
-   * Returns false when canvas is in read-only/panning mode.
+   * Whether Vue node components should handle pointer events.
+   * Returns false when canvas is in read-only/panning mode (e.g., space key held for panning).
    */
-  const canCapturePointerEvents = computed(
+  const shouldHandleNodePointerEvents = computed(
     () => !(canvasStore.canvas?.read_only ?? false)
   )
 
@@ -107,6 +107,6 @@ export function useCanvasInteractions() {
     handleWheel,
     handlePointer,
     forwardEventToCanvas,
-    canCapturePointerEvents
+    shouldHandleNodePointerEvents
   }
 }

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

@@ -13,8 +13,8 @@
         'border border-solid border-sand-100 dark-theme:border-charcoal-300',
         !!executing && 'border-blue-100 dark-theme:border-blue-100',
         hasAnyError && 'border-error',
-        // hover (only when events can be captured)
-        canCapturePointerEvents &&
+        // hover (only when node should handle events)
+        shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
         // Selected
         'outline-transparent -outline-offset-2 outline-2',
@@ -28,7 +28,7 @@
           'will-change-transform': isDragging
         },
         lodCssClass,
-        canCapturePointerEvents ? 'pointer-events-auto' : 'pointer-events-none'
+        shouldHandleNodePointerEvents ? 'pointer-events-auto' : 'pointer-events-none'
       )
     "
     :style="[
@@ -246,7 +246,7 @@ const {
   handleWheel,
   handlePointer,
   forwardEventToCanvas,
-  canCapturePointerEvents
+  shouldHandleNodePointerEvents
 } = useCanvasInteractions()
 
 // LOD (Level of Detail) system based on zoom level
@@ -343,8 +343,8 @@ const handlePointerDown = (event: PointerEvent) => {
     return
   }
 
-  // Don't capture pointer events when canvas is in panning mode - forward to canvas instead
-  if (!canCapturePointerEvents.value) {
+  // Don't handle pointer events when canvas is in panning mode - forward to canvas instead
+  if (!shouldHandleNodePointerEvents.value) {
     forwardEventToCanvas(event)
     return
   }
@@ -372,7 +372,7 @@ const handlePointerUp = (event: PointerEvent) => {
   }
 
   // Don't emit node-click when canvas is in panning mode - forward to canvas instead
-  if (!canCapturePointerEvents.value) {
+  if (!shouldHandleNodePointerEvents.value) {
     forwardEventToCanvas(event)
     return
   }
@@ -401,7 +401,7 @@ const handleSlotClick = (
   }
 
   // Don't handle slot clicks when canvas is in panning mode
-  if (!canCapturePointerEvents.value) {
+  if (!shouldHandleNodePointerEvents.value) {
     return
   }
 

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

@@ -4,10 +4,10 @@
   </div>
   <div
     v-else
-    :class="[
+    :class="cn(
       'lg-node-widgets flex flex-col gap-2 pr-4',
-      canCapturePointerEvents ? 'pointer-events-auto' : 'pointer-events-none'
-    ]"
+      shouldHandleNodePointerEvents ? 'pointer-events-auto' : 'pointer-events-none'
+    )"
     @pointerdown="handleWidgetPointerEvent"
     @pointermove="handleWidgetPointerEvent"
     @pointerup="handleWidgetPointerEvent"
@@ -65,6 +65,7 @@ import {
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 
 import InputSlot from './InputSlot.vue'
 
@@ -77,10 +78,10 @@ interface NodeWidgetsProps {
 
 const props = defineProps<NodeWidgetsProps>()
 
-const { canCapturePointerEvents, forwardEventToCanvas } =
+const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
   useCanvasInteractions()
 const handleWidgetPointerEvent = (event: PointerEvent) => {
-  if (!canCapturePointerEvents.value) {
+  if (!shouldHandleNodePointerEvents.value) {
     forwardEventToCanvas(event)
   }
 }

src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts

@@ -22,7 +22,7 @@ interface NodeManager {
 export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
   const canvasStore = useCanvasStore()
   const { bringNodeToFront } = useNodeZIndex()
-  const { canCapturePointerEvents } = useCanvasInteractions()
+  const { shouldHandleNodePointerEvents } = useCanvasInteractions()
 
   /**
    * Handle node selection events
@@ -33,7 +33,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     nodeData: VueNodeData,
     wasDragging: boolean
   ) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!canvasStore.canvas || !nodeManager.value) return
 
@@ -73,7 +73,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Uses LiteGraph's native collapse method for proper state management
    */
   const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!nodeManager.value) return
 
@@ -92,7 +92,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Updates the title in LiteGraph for persistence across sessions
    */
   const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!nodeManager.value) return
 
@@ -111,7 +111,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     event: PointerEvent,
     nodeData: VueNodeData
   ) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!canvasStore.canvas || !nodeManager.value) return
 
@@ -133,7 +133,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Integrates with LiteGraph's context menu system
    */
   const handleNodeRightClick = (event: PointerEvent, nodeData: VueNodeData) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!canvasStore.canvas || !nodeManager.value) return
 
@@ -157,7 +157,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Prepares node for dragging and sets appropriate visual state
    */
   const handleNodeDragStart = (event: DragEvent, nodeData: VueNodeData) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!canvasStore.canvas || !nodeManager.value) return
 
@@ -187,7 +187,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Useful for selection toolbox or area selection
    */
   const selectNodes = (nodeIds: string[], addToSelection = false) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!canvasStore.canvas || !nodeManager.value) return
 
@@ -209,7 +209,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Deselect specific nodes
    */
   const deselectNodes = (nodeIds: string[]) => {
-    if (!canCapturePointerEvents.value) return
+    if (!shouldHandleNodePointerEvents.value) return
 
     if (!canvasStore.canvas || !nodeManager.value) return
 

tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts

@@ -75,10 +75,10 @@ function createMockLayoutMutations(): Pick<
 
 function createMockCanvasInteractions(): Pick<
   ReturnType<typeof useCanvasInteractions>,
-  'canCapturePointerEvents'
+  'shouldHandleNodePointerEvents'
 > {
   return {
-    canCapturePointerEvents: computed(() => true) // Default to allowing pointer events
+    shouldHandleNodePointerEvents: computed(() => true) // Default to allowing pointer events
   }
 }