Add event forwarding

src/components/graph/vueNodes/NodeSlots.vue

@@ -31,8 +31,9 @@
 
 <script setup lang="ts">
 import type { INodeSlot, LGraphNode } from '@comfyorg/litegraph'
-import { computed, onErrorCaptured, ref } from 'vue'
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
@@ -103,20 +104,26 @@ const getActualInputIndex = (
   return actualIndex !== -1 ? actualIndex : filteredIndex
 }
 
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
 // Handle input slot click
-const handleInputSlotClick = (index: number, event: PointerEvent) => {
-  // TODO: Click handling will be implemented by passing events through to LiteGraph
-  // LiteGraph will have slots rendered in the same location and will handle the connection logic
-  console.log('Input slot clicked:', index, event)
+const handleInputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
 }
 
 // Handle output slot click
-const handleOutputSlotClick = (index: number, event: PointerEvent) => {
-  // TODO: Click handling will be implemented by passing events through to LiteGraph
-  // LiteGraph will have slots rendered in the same location and will handle the connection logic
-  console.log('Output slot clicked:', index, event)
+const handleOutputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
 }
 
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
+
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 const { toastErrorHandler } = useErrorHandling()

src/components/graph/vueNodes/NodeWidgets.vue

@@ -19,6 +19,7 @@
           :index="index"
           :readonly="readonly"
           :dot-only="true"
+          @slot-click="handleWidgetSlotClick($event, widget)"
         />
       </div>
       <!-- Widget Component -->
@@ -36,11 +37,12 @@
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { computed, onErrorCaptured, ref } from 'vue'
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
 // Import widget components directly
 import WidgetInputText from '@/components/graph/vueWidgets/WidgetInputText.vue'
 import { widgetTypeToComponent } from '@/components/graph/vueWidgets/widgetRegistry'
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type {
   SafeWidgetData,
   VueNodeData
@@ -64,6 +66,9 @@ interface NodeWidgetsProps {
 
 const props = defineProps<NodeWidgetsProps>()
 
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
 // Use widget renderer composable
 const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()
 
@@ -142,4 +147,18 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
   return result
 })
+
+// Handle widget slot click
+const handleWidgetSlotClick = (
+  event: PointerEvent,
+  _widget: ProcessedWidget
+) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
 </script>

src/composables/graph/useEventForwarding.ts

@@ -0,0 +1,186 @@
+import type { LGraphCanvas } from '@comfyorg/litegraph'
+
+import { useCanvasStore } from '@/stores/graphStore'
+
+export function useEventForwarding() {
+  const canvasStore = useCanvasStore()
+
+  // Track active drag operation
+  let isDragging = false
+  let dragCleanup: (() => void) | null = null
+  // Store last known position for escape key handling
+  const lastPointerPosition = { x: 0, y: 0 }
+
+  function createSyntheticPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: string
+  ): PointerEvent {
+    // Only copy properties that LiteGraph actually uses
+    return new PointerEvent(eventType, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      // Position properties
+      clientX: originalEvent.clientX,
+      clientY: originalEvent.clientY,
+      // Modifier keys
+      ctrlKey: originalEvent.ctrlKey,
+      shiftKey: originalEvent.shiftKey,
+      altKey: originalEvent.altKey,
+      metaKey: originalEvent.metaKey,
+      // Button state
+      button: originalEvent.button,
+      buttons: originalEvent.buttons,
+      // Pointer tracking
+      pointerId: originalEvent.pointerId,
+      isPrimary: originalEvent.isPrimary,
+      pointerType: originalEvent.pointerType
+    })
+  }
+
+  function forwardPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: 'down' | 'move' | 'up'
+  ) {
+    const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+    if (!canvas) {
+      console.warn('No canvas available for event forwarding')
+      return
+    }
+
+    // Prevent original event from bubbling to canvas
+    originalEvent.stopPropagation()
+    originalEvent.preventDefault()
+
+    // Create synthetic event
+    const syntheticEvent = createSyntheticPointerEvent(
+      originalEvent,
+      `pointer${eventType}`
+    )
+
+    // Create a mutable copy of the event for LiteGraph to modify
+    const mutableEvent = syntheticEvent as PointerEvent & {
+      canvasX?: number
+      canvasY?: number
+      deltaX?: number
+      deltaY?: number
+      safeOffsetX?: number
+      safeOffsetY?: number
+    }
+
+    // Let LiteGraph adjust coordinates to graph space
+    // Using 'as any' to bypass TypeScript assertion limitations
+    ;(canvas.adjustMouseEvent as any)(mutableEvent)
+
+    // Forward to appropriate handler
+    switch (eventType) {
+      case 'down':
+        canvas.processMouseDown(mutableEvent)
+        break
+      case 'move':
+        canvas.processMouseMove(mutableEvent)
+        break
+      case 'up':
+        canvas.processMouseUp(mutableEvent)
+        break
+    }
+  }
+
+  // Pre-create event handlers to avoid recreating on each pointerdown
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isDragging) return
+    // Update last known position
+    lastPointerPosition.x = e.clientX
+    lastPointerPosition.y = e.clientY
+    forwardPointerEvent(e, 'move')
+  }
+
+  const handlePointerUp = (e: PointerEvent) => {
+    if (!isDragging) return
+
+    isDragging = false
+    forwardPointerEvent(e, 'up')
+
+    // Clean up listeners
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Handle escape key to cancel drag
+    if (e.key === 'Escape' && isDragging) {
+      isDragging = false
+
+      // Create minimal synthetic cancel event
+      const cancelEvent = new PointerEvent('pointerup', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        // Use last known position from the current drag operation
+        clientX: lastPointerPosition.x,
+        clientY: lastPointerPosition.y,
+        button: 0,
+        buttons: 0
+      })
+
+      const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+      if (canvas) {
+        const mutableCancelEvent = cancelEvent as PointerEvent & {
+          canvasX?: number
+          canvasY?: number
+          deltaX?: number
+          deltaY?: number
+          safeOffsetX?: number
+          safeOffsetY?: number
+        }
+        ;(canvas.adjustMouseEvent as any)(mutableCancelEvent)
+        canvas.processMouseUp(mutableCancelEvent)
+      }
+
+      // Clean up
+      if (dragCleanup) {
+        dragCleanup()
+        dragCleanup = null
+      }
+    }
+  }
+
+  function handleSlotPointerDown(originalEvent: PointerEvent) {
+    // Forward the initial pointer down
+    forwardPointerEvent(originalEvent, 'down')
+
+    // Set up drag handling
+    isDragging = true
+    // Initialize last known position
+    lastPointerPosition.x = originalEvent.clientX
+    lastPointerPosition.y = originalEvent.clientY
+
+    // Add global listeners for drag handling
+    document.addEventListener('pointermove', handlePointerMove, true)
+    document.addEventListener('pointerup', handlePointerUp, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+
+    // Store cleanup function
+    dragCleanup = () => {
+      document.removeEventListener('pointermove', handlePointerMove, true)
+      document.removeEventListener('pointerup', handlePointerUp, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }
+
+  // Cleanup on unmount
+  function cleanup() {
+    isDragging = false
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  return {
+    handleSlotPointerDown,
+    cleanup
+  }
+}