fix: spacebar panning in vueNodes mode

src/lib/litegraph/src/LGraphCanvas.ts

@@ -1995,6 +1995,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     this._key_callback = this.processKey.bind(this)
 
     canvas.addEventListener('keydown', this._key_callback, true)
+    // In Vue nodes mode, also listen on document for keydown since Vue elements may have focus
+    if (LiteGraph.vueNodesMode) {
+      document.addEventListener('keydown', this._key_callback, true)
+    }
     // keyup event must be bound on the document
     document.addEventListener('keyup', this._key_callback, true)
 
@@ -2026,6 +2030,11 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     canvas.removeEventListener('pointerdown', this._mousedown_callback!)
     canvas.removeEventListener('wheel', this._mousewheel_callback!)
     canvas.removeEventListener('keydown', this._key_callback!)
+    // Always remove document keydown listener - it may have been added if vueNodesMode
+    // was true during bindEvents, even if vueNodesMode has since changed
+    if (this._key_callback) {
+      document.removeEventListener('keydown', this._key_callback)
+    }
     document.removeEventListener('keyup', this._key_callback!)
     canvas.removeEventListener('contextmenu', this._doNothing)
     canvas.removeEventListener('dragenter', this._doReturnTrue)

src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts

@@ -2,11 +2,12 @@ import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
-import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { createTestingPinia } from '@pinia/testing'
+
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { NodeLayout } from '@/renderer/core/layout/types'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
+import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
 import { useNodeDrag } from '@/renderer/extensions/vueNodes/layout/useNodeDrag'
 
 const forwardEventToCanvasMock = vi.fn()

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

@@ -6,8 +6,8 @@ import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
-import { isMultiSelectKey } from '@/renderer/extensions/vueNodes/utils/selectionUtils'
 import { useNodeDrag } from '@/renderer/extensions/vueNodes/layout/useNodeDrag'
+import { isMultiSelectKey } from '@/renderer/extensions/vueNodes/utils/selectionUtils'
 
 export function useNodePointerInteractions(
   nodeIdRef: MaybeRefOrGetter<string>
@@ -65,6 +65,12 @@ export function useNodePointerInteractions(
   function onPointermove(event: PointerEvent) {
     if (forwardMiddlePointerIfNeeded(event)) return
 
+    // Don't handle pointer events when canvas is in panning mode - forward to canvas instead
+    if (!shouldHandleNodePointerEvents.value) {
+      forwardEventToCanvas(event)
+      return
+    }
+
     // Don't activate drag while resizing
     if (layoutStore.isResizingVueNodes.value) return
 

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

@@ -293,6 +293,10 @@ export function useSlotLinkInteraction({
     raf.cancel()
     dragContext.dispose()
     clearCompatible()
+    // Reset litegraph pointer state
+    if (app.canvas) {
+      app.canvas.pointer.isDown = false
+    }
   }
 
   const updatePointerState = (event: PointerEvent) => {
@@ -409,6 +413,11 @@ export function useSlotLinkInteraction({
 
   const handlePointerMove = (event: PointerEvent) => {
     if (!pointerSession.matches(event)) return
+
+    // When in panning mode (read_only), let litegraph handle panning - don't stop propagation
+    if (app.canvas?.read_only) return
+
+    // Not in panning mode - Vue handles link drag, stop propagation to prevent litegraph interference
     event.stopPropagation()
 
     dragContext.pendingPointerMove = {
@@ -539,7 +548,10 @@ export function useSlotLinkInteraction({
   }
 
   const handlePointerUp = (event: PointerEvent) => {
-    event.stopPropagation()
+    // When in panning mode, let litegraph handle - but still cleanup our link drag state
+    if (!app.canvas?.read_only) {
+      event.stopPropagation()
+    }
     finishInteraction(event)
   }
 
@@ -584,6 +596,10 @@ export function useSlotLinkInteraction({
     if (event.button !== 0) return
     if (!nodeId) return
     if (pointerSession.isActive()) return
+
+    // Don't start link drag if in panning mode - let litegraph handle panning
+    if (app.canvas?.read_only) return
+
     event.preventDefault()
     event.stopPropagation()
 
@@ -703,6 +719,9 @@ export function useSlotLinkInteraction({
     )
 
     pointerSession.begin(event.pointerId)
+    // Sync pointer state with litegraph so spacebar panning works
+    canvas.last_mouse = [event.clientX, event.clientY]
+    canvas.pointer.isDown = true
 
     toCanvasPointerEvent(event)
     updatePointerState(event)