diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts index 2da4b11227..508c307edb 100644 --- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts +++ b/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') diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue index 9edeacbf8b..a86a789e68 100644 --- a/src/renderer/extensions/vueNodes/components/InputSlot.vue +++ b/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' diff --git a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts index 9c9750458d..a7e5f1a67c 100644 --- a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts +++ b/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 } } diff --git a/src/renderer/extensions/vueNodes/utils/eventUtils.ts b/src/renderer/extensions/vueNodes/utils/eventUtils.ts new file mode 100644 index 0000000000..94cf43880b --- /dev/null +++ b/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] +} diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue index 3d3fb9237c..bd2aac7725 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue +++ b/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) }