From f6051f6634cf61ece99103320c830a283c992c18 Mon Sep 17 00:00:00 2001 From: bymyself Date: Thu, 4 Sep 2025 19:19:13 -0700 Subject: [PATCH] remove event forwarding hack. todo: add link moving in vue --- src/composables/graph/useEventForwarding.ts | 186 ------------------ .../vueNodes/components/InputSlot.vue | 12 -- .../vueNodes/components/NodeSlots.vue | 27 +-- .../vueNodes/components/NodeWidgets.vue | 21 +- .../vueNodes/components/OutputSlot.vue | 12 -- 5 files changed, 2 insertions(+), 256 deletions(-) delete mode 100644 src/composables/graph/useEventForwarding.ts diff --git a/src/composables/graph/useEventForwarding.ts b/src/composables/graph/useEventForwarding.ts deleted file mode 100644 index 7bceb4758b..0000000000 --- a/src/composables/graph/useEventForwarding.ts +++ /dev/null @@ -1,186 +0,0 @@ -import { useCanvasStore } from '@/stores/graphStore' - -import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph' - -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 - } -} diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue index 848edeeafe..52dbacac05 100644 --- a/src/renderer/extensions/vueNodes/components/InputSlot.vue +++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue @@ -13,7 +13,6 @@ :style="{ height: slotHeight + 'px' }" - @pointerdown="handleClick" > () -const emit = defineEmits<{ - 'slot-click': [event: PointerEvent] -}>() - // Error boundary implementation const renderError = ref(null) const { toastErrorHandler } = useErrorHandling() @@ -83,13 +78,6 @@ const slotColor = computed(() => getSlotColor(props.slotData.type)) // Get slot height from litegraph constants const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT -// Handle click events -const handleClick = (event: PointerEvent) => { - if (!props.readonly) { - emit('slot-click', event) - } -} - const transformState = inject( 'transformState', undefined diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue index 78f9b8036d..8515fa46bd 100644 --- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue +++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue @@ -12,9 +12,6 @@ :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''" :index="getActualInputIndex(input, index)" :readonly="readonly" - @slot-click=" - handleInputSlotClick(getActualInputIndex(input, index), $event) - " /> @@ -26,16 +23,14 @@ :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''" :index="index" :readonly="readonly" - @slot-click="handleOutputSlotClick(index, $event)" /> diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue index 8341744ba2..144d5978d5 100644 --- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue +++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue @@ -14,7 +14,6 @@ :style="{ height: slotHeight + 'px' }" - @pointerdown="handleClick" > () -const emit = defineEmits<{ - 'slot-click': [event: PointerEvent] -}>() - // Error boundary implementation const renderError = ref(null) @@ -82,13 +77,6 @@ const slotColor = computed(() => getSlotColor(props.slotData.type)) // Get slot height from litegraph constants const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT -// Handle click events -const handleClick = (event: PointerEvent) => { - if (!props.readonly) { - emit('slot-click', event) - } -} - const transformState = inject( 'transformState', undefined