Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-03 12:42:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: enable spacebar panning during slot link drag

Browse Source 
Move spacebar detection to document-level listener in LGraphCanvas when
vueNodesMode is enabled. Implement direct panning in useSlotLinkInteraction
when spacebar is held during connection drag, bypassing litegraph event
handling for smoother panning while maintaining link position updates.

Fixes #7806
This commit is contained in:
Johnpaul
2026-01-05 22:09:11 +01:00
parent fc082d84b9
commit 53bdf7f6c3
4 changed files with 55 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
View File

@@ -1,8 +1,6 @@
import { onScopeDispose, ref, toValue, watch } from 'vue'
import { onScopeDispose, ref, toValue } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
import { useActiveElement, useMagicKeys } from '@vueuse/core'
import { isMiddlePointerInput } from '@/base/pointerUtils'
import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
@@ -10,31 +8,6 @@ import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
import { useNodeDrag } from '@/renderer/extensions/vueNodes/layout/useNodeDrag'
import { isMultiSelectKey } from '@/renderer/extensions/vueNodes/utils/selectionUtils'
import { app } from '@/scripts/app'
function isEditableElement(el: Element | null): boolean {
if (!el) return false
const tag = el.tagName.toUpperCase()
if (tag === 'INPUT' || tag === 'TEXTAREA') return true
if (el instanceof HTMLElement && el.isContentEditable) return true
return false
}
// Forward spacebar key events to litegraph for panning when Vue nodes have focus
const { space } = useMagicKeys()
const activeElement = useActiveElement()
watch(space, (isPressed) => {
const canvas = app.canvas
if (!canvas) return
// Skip if canvas has focus (litegraph handles it) or if in editable element
if (activeElement.value === canvas.canvas) return
if (isEditableElement(activeElement.value || null)) return
// pointer events will bubble to litegraph
canvas.read_only = isPressed
})
export function useNodePointerInteractions(
nodeIdRef: MaybeRefOrGetter<string>