Support on slot click listeners in vue (#7059)

Adds support for the `node.onInputDblClick` and `node.onInputClick`
callbacks in vue
- Fixes vue link drop code so that a link which is not dropped on the
canvas does not fallback to the dropped on canvas code.

![input-double-click_00001](https://github.com/user-attachments/assets/8b138a6e-e569-4a5d-b59a-cd688ff062e6)

Resolves #7037

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7059-Support-on-slot-click-listeners-in-vue-2bb6d73d3650812993fdef244e91683b)
by [Unito](https://www.unito.io)

Author: AustinMroz

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -897,7 +897,7 @@ test.describe('Vue Node Link Interaction', () => {
         0,
         false
       )
-      const dropPos = { x: outputCenter.x + 200, y: outputCenter.y - 120 }
+      const dropPos = { x: outputCenter.x + 200, y: outputCenter.y - 100 }
 
       await comfyMouse.move(outputCenter)
       await comfyPage.page.keyboard.down('Shift')

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

@@ -6,6 +6,8 @@
       ref="connectionDotRef"
       :color="slotColor"
       :class="cn('-translate-x-1/2 w-3', errorClassesDot)"
+      @click="onClick"
+      @dblclick="onDoubleClick"
       @pointerdown="onPointerDown"
     />
 
@@ -142,7 +144,7 @@ useSlotElementTracking({
   element: slotElRef
 })
 
-const { onPointerDown } = useSlotLinkInteraction({
+const { onClick, onDoubleClick, onPointerDown } = useSlotLinkInteraction({
   nodeId: props.nodeId ?? '',
   index: props.index,
   type: 'input'

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

@@ -29,6 +29,7 @@ import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { Point } from '@/renderer/core/layout/types'
 import { toPoint } from '@/renderer/core/layout/utils/geometry'
 import { createSlotLinkDragContext } from '@/renderer/extensions/vueNodes/composables/slotLinkDragContext'
+import { augmentToCanvasPointerEvent } from '@/renderer/extensions/vueNodes/utils/eventUtils'
 import { app } from '@/scripts/app'
 import { createRafBatch } from '@/utils/rafBatch'
 
@@ -39,6 +40,8 @@ interface SlotInteractionOptions {
 }
 
 interface SlotInteractionHandlers {
+  onClick: (event: PointerEvent) => void
+  onDoubleClick: (event: PointerEvent) => void
   onPointerDown: (event: PointerEvent) => void
 }
 
@@ -500,7 +503,7 @@ export function useSlotLinkInteraction({
 
     const hasConnected = connectByPriority(canvasEvent.target, snappedCandidate)
 
-    if (!hasConnected) {
+    if (!hasConnected && event.target === app.canvas?.canvas) {
       activeAdapter?.dropOnCanvas(canvasEvent)
     }
 
@@ -716,7 +719,26 @@ export function useSlotLinkInteraction({
     }
   })
 
+  function onDoubleClick(e: PointerEvent) {
+    const { graph } = app.canvas
+    if (!graph) return
+    const node = graph.getNodeById(nodeId)
+    if (!node) return
+    augmentToCanvasPointerEvent(e, node, app.canvas)
+    node.onInputDblClick?.(index, e)
+  }
+  function onClick(e: PointerEvent) {
+    const { graph } = app.canvas
+    if (!graph) return
+    const node = graph.getNodeById(nodeId)
+    if (!node) return
+    augmentToCanvasPointerEvent(e, node, app.canvas)
+    node.onInputClick?.(index, e)
+  }
+
   return {
+    onClick,
+    onDoubleClick,
     onPointerDown
   }
 }

src/renderer/extensions/vueNodes/utils/eventUtils.ts

@@ -0,0 +1,13 @@
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
+
+export function augmentToCanvasPointerEvent(
+  e: PointerEvent,
+  node: LGraphNode,
+  canvas: LGraphCanvas
+): asserts e is CanvasPointerEvent {
+  canvas.adjustMouseEvent(e)
+  canvas.graph_mouse[0] = e.offsetX + node.pos[0]
+  canvas.graph_mouse[1] = e.offsetY + node.pos[1]
+}

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

@@ -6,9 +6,9 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { CanvasPointer } from '@/lib/litegraph/src/CanvasPointer'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { augmentToCanvasPointerEvent } from '@/renderer/extensions/vueNodes/utils/eventUtils'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -64,16 +64,10 @@ function draw() {
   ctx.scale(scaleFactor, scaleFactor)
   widgetInstance.draw?.(ctx, node, width, 1, height)
 }
-function translateEvent(e: PointerEvent): asserts e is CanvasPointerEvent {
-  if (!node) return
-  canvas.adjustMouseEvent(e)
-  canvas.graph_mouse[0] = e.offsetX + node.pos[0]
-  canvas.graph_mouse[1] = e.offsetY + node.pos[1]
-}
 //See LGraphCanvas.processWidgetClick
 function handleDown(e: PointerEvent) {
   if (!node || !widgetInstance || !pointer) return
-  translateEvent(e)
+  augmentToCanvasPointerEvent(e, node, canvas)
   pointer.down(e)
   if (widgetInstance.mouse)
     pointer.onDrag = (e) =>
@@ -82,14 +76,14 @@ function handleDown(e: PointerEvent) {
   canvas.processWidgetClick(e, node, widgetInstance, pointer)
 }
 function handleUp(e: PointerEvent) {
-  if (!pointer) return
-  translateEvent(e)
+  if (!pointer || !node) return
+  augmentToCanvasPointerEvent(e, node, canvas)
   e.click_time = e.timeStamp - (pointer?.eDown?.timeStamp ?? 0)
   pointer.up(e)
 }
 function handleMove(e: PointerEvent) {
-  if (!pointer) return
-  translateEvent(e)
+  if (!pointer || !node) return
+  augmentToCanvasPointerEvent(e, node, canvas)
   pointer.move(e)
 }
 </script>