fix: space bar panning over Vue nodes in standard nav mode

Bridge LGraphCanvas.read_only to Vue reactivity via onReadOnlyChanged
callback so shouldHandleNodePointerEvents computed updates when space
key toggles panning mode. Also forward pointermove and wheel events
to canvas during panning.

Fixes #7806

Amp-Thread-ID: https://ampcode.com/threads/T-019c796c-e83c-769d-85f4-20a349994bad

Author: christian-byrne

src/lib/litegraph/src/LGraphCanvas.ts

@@ -401,8 +401,11 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   set read_only(value: boolean) {
     this.state.readOnly = value
     this._updateCursorStyle()
+    this.onReadOnlyChanged?.(value)
   }
 
+  onReadOnlyChanged?: (readOnly: boolean) => void
+
   get isDragging(): boolean {
     return this.state.draggingItems
   }

src/renderer/core/canvas/canvasStore.test.ts

@@ -0,0 +1,81 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+vi.mock('@/scripts/app', () => ({
+  app: { canvas: null }
+}))
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as Record<string, unknown>),
+    useEventListener: vi.fn()
+  }
+})
+
+function createMockCanvas(
+  readOnly = false
+): LGraphCanvas & { onReadOnlyChanged?: (v: boolean) => void } {
+  return {
+    read_only: readOnly,
+    canvas: document.createElement('canvas'),
+    onReadOnlyChanged: undefined
+  } as unknown as LGraphCanvas & {
+    onReadOnlyChanged?: (v: boolean) => void
+  }
+}
+
+describe('useCanvasStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+  })
+
+  describe('isReadOnly', () => {
+    it('syncs initial read_only value when canvas is set', async () => {
+      const store = useCanvasStore()
+      const mockCanvas = createMockCanvas(true)
+
+      store.canvas = mockCanvas as unknown as LGraphCanvas
+      await nextTick()
+
+      expect(store.isReadOnly).toBe(true)
+    })
+
+    it('updates isReadOnly when onReadOnlyChanged callback fires', async () => {
+      const store = useCanvasStore()
+      const mockCanvas = createMockCanvas(false)
+
+      store.canvas = mockCanvas as unknown as LGraphCanvas
+      await nextTick()
+
+      expect(store.isReadOnly).toBe(false)
+
+      // Simulate space key press → LGraphCanvas sets read_only = true
+      mockCanvas.onReadOnlyChanged?.(true)
+
+      expect(store.isReadOnly).toBe(true)
+
+      // Simulate space key release
+      mockCanvas.onReadOnlyChanged?.(false)
+
+      expect(store.isReadOnly).toBe(false)
+    })
+
+    it('registers onReadOnlyChanged callback on the canvas', async () => {
+      const store = useCanvasStore()
+      const mockCanvas = createMockCanvas(false)
+
+      store.canvas = mockCanvas as unknown as LGraphCanvas
+      await nextTick()
+
+      expect(mockCanvas.onReadOnlyChanged).toBeDefined()
+      expect(typeof mockCanvas.onReadOnlyChanged).toBe('function')
+    })
+  })
+})

src/renderer/core/canvas/canvasStore.ts

@@ -41,6 +41,7 @@ export const useCanvasStore = defineStore('canvas', () => {
   const appScalePercentage = ref(100)
 
   const linearMode = ref(false)
+  const isReadOnly = ref(false)
 
   // Set up scale synchronization when canvas is available
   let originalOnChanged: ((scale: number, offset: Point) => void) | undefined =
@@ -115,6 +116,11 @@ export const useCanvasStore = defineStore('canvas', () => {
   whenever(
     () => canvas.value,
     (newCanvas) => {
+      isReadOnly.value = newCanvas.read_only
+      newCanvas.onReadOnlyChanged = (value: boolean) => {
+        isReadOnly.value = value
+      }
+
       useEventListener(
         newCanvas.canvas,
         'litegraph:set-graph',
@@ -141,6 +147,7 @@ export const useCanvasStore = defineStore('canvas', () => {
     rerouteSelected,
     appScalePercentage,
     linearMode,
+    isReadOnly,
     updateSelectedItems,
     getCanvas,
     setAppZoomFromPercentage,

src/renderer/core/canvas/useCanvasInteractions.test.ts

@@ -1,18 +1,33 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { reactive } from 'vue'
 
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 
-// Mock stores
+// Mock stores — use reactive object so computed properties in the SUT
+// re-evaluate when `isReadOnly` changes (mimics Pinia's auto-unwrapping).
 vi.mock('@/renderer/core/canvas/canvasStore', () => {
   const getCanvas = vi.fn()
   const setCursorStyle = vi.fn()
+  const state = reactive({
+    canvas: { read_only: false } as { read_only: boolean },
+    isReadOnly: false
+  })
   return {
     useCanvasStore: vi.fn(() => ({
       getCanvas,
-      setCursorStyle
+      setCursorStyle,
+      get canvas() {
+        return state.canvas
+      },
+      get isReadOnly() {
+        return state.isReadOnly
+      },
+      set isReadOnly(v: boolean) {
+        state.isReadOnly = v
+      }
     }))
   }
 })
@@ -59,6 +74,8 @@ function createMockWheelEvent(ctrlKey = false, metaKey = false): WheelEvent {
 describe('useCanvasInteractions', () => {
   beforeEach(() => {
     vi.resetAllMocks()
+    const store = useCanvasStore()
+    store.isReadOnly = false
   })
 
   describe('handlePointer', () => {
@@ -200,6 +217,21 @@ describe('useCanvasInteractions', () => {
       document.body.removeChild(captureElement)
     })
 
+    it('should forward wheel events in standard mode when in panning mode (space held)', () => {
+      const { get } = useSettingStore()
+      vi.mocked(get).mockReturnValue('standard')
+      const store = useCanvasStore()
+      store.isReadOnly = true
+
+      const { handleWheel } = useCanvasInteractions()
+
+      const mockEvent = createMockWheelEvent()
+      handleWheel(mockEvent)
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled()
+      expect(mockEvent.stopPropagation).toHaveBeenCalled()
+    })
+
     it('should forward ctrl+wheel to canvas when capture element IS focused in standard mode', () => {
       const { get } = useSettingStore()
       vi.mocked(get).mockReturnValue('standard')

src/renderer/core/canvas/useCanvasInteractions.ts

@@ -23,7 +23,7 @@ export function useCanvasInteractions() {
    * Returns false when canvas is in read-only/panning mode (e.g., space key held for panning).
    */
   const shouldHandleNodePointerEvents = computed(
-    () => !(canvasStore.canvas?.read_only ?? false)
+    () => !canvasStore.isReadOnly
   )
 
   /**
@@ -50,17 +50,18 @@ export function useCanvasInteractions() {
    * when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
    */
   const handleWheel = (event: WheelEvent) => {
-    if (!shouldForwardWheelEvent(event)) return
+    const isPanning = !shouldHandleNodePointerEvents.value
+    if (!isPanning && !shouldForwardWheelEvent(event)) return
 
     // In standard mode, Ctrl+wheel should go to canvas for zoom
     if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
-      forwardEventToCanvas(event)
+      forwardEventToCanvas(event, { force: true })
       return
     }
 
-    // In legacy mode, all wheel events go to canvas for zoom
-    if (!isStandardNavMode.value) {
-      forwardEventToCanvas(event)
+    // In legacy mode or panning mode, forward wheel events to canvas
+    if (!isStandardNavMode.value || isPanning) {
+      forwardEventToCanvas(event, { force: isPanning })
       return
     }
 
@@ -97,10 +98,12 @@ export function useCanvasInteractions() {
    * Forwards an event to the LiteGraph canvas
    */
   const forwardEventToCanvas = (
-    event: WheelEvent | PointerEvent | MouseEvent
+    event: WheelEvent | PointerEvent | MouseEvent,
+    { force = false }: { force?: boolean } = {}
   ) => {
     // Honor wheel capture only when the element is focused
-    if (event instanceof WheelEvent && !shouldForwardWheelEvent(event)) return
+    if (event instanceof WheelEvent && !force && !shouldForwardWheelEvent(event))
+      return
 
     const canvasEl = app.canvas?.canvas
     if (!canvasEl) return

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

@@ -9,14 +9,17 @@ import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { NodeLayout } from '@/renderer/core/layout/types'
 import { useNodeDrag } from '@/renderer/extensions/vueNodes/layout/useNodeDrag'
 
-const forwardEventToCanvasMock = vi.fn()
+const { forwardEventToCanvasMock } = vi.hoisted(() => ({
+  forwardEventToCanvasMock: vi.fn()
+}))
+const shouldHandleNodePointerEventsRef = ref(true)
 const selectedItemsState: { items: Array<{ id?: string }> } = { items: [] }
 
 // Mock the dependencies
 vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
   useCanvasInteractions: () => ({
     forwardEventToCanvas: forwardEventToCanvasMock,
-    shouldHandleNodePointerEvents: ref(true)
+    shouldHandleNodePointerEvents: shouldHandleNodePointerEventsRef
   })
 }))
 
@@ -135,6 +138,7 @@ describe('useNodePointerInteractions', () => {
   beforeEach(async () => {
     vi.resetAllMocks()
     selectedItemsState.items = []
+    shouldHandleNodePointerEventsRef.value = true
     setActivePinia(createTestingPinia())
   })
 
@@ -295,6 +299,54 @@ describe('useNodePointerInteractions', () => {
     expect(handleNodeSelect).toHaveBeenCalledTimes(1)
   })
 
+  it('should forward pointermove to canvas when in panning mode (space held)', () => {
+    shouldHandleNodePointerEventsRef.value = false
+    const { pointerHandlers } = useNodePointerInteractions('test-node-123')
+
+    const moveEvent = createPointerEvent('pointermove', {
+      clientX: 150,
+      clientY: 150,
+      buttons: 1
+    })
+    pointerHandlers.onPointermove(moveEvent)
+
+    expect(forwardEventToCanvasMock).toHaveBeenCalledWith(moveEvent)
+  })
+
+  it('should clean up drag state when panning mode activates mid-drag', () => {
+    const { endDrag } = useNodeDrag()
+    const { pointerHandlers } = useNodePointerInteractions('test-node-123')
+
+    // Start a drag
+    pointerHandlers.onPointerdown(
+      createPointerEvent('pointerdown', { clientX: 100, clientY: 100 })
+    )
+    pointerHandlers.onPointermove(
+      createPointerEvent('pointermove', {
+        clientX: 110,
+        clientY: 110,
+        buttons: 1
+      })
+    )
+    expect(layoutStore.isDraggingVueNodes.value).toBe(true)
+
+    // Space pressed mid-drag — panning mode activates
+    shouldHandleNodePointerEventsRef.value = false
+
+    const moveEvent = createPointerEvent('pointermove', {
+      clientX: 120,
+      clientY: 120,
+      buttons: 1
+    })
+    pointerHandlers.onPointermove(moveEvent)
+
+    // Drag should be cleaned up
+    expect(endDrag).toHaveBeenCalled()
+    expect(layoutStore.isDraggingVueNodes.value).toBe(false)
+    // Event should still be forwarded to canvas
+    expect(forwardEventToCanvasMock).toHaveBeenCalledWith(moveEvent)
+  })
+
   it('on ctrl+click: calls toggleNodeSelectionAfterPointerUp on pointer up (not pointer down)', async () => {
     const { pointerHandlers } = useNodePointerInteractions('test-node-123')
     const { toggleNodeSelectionAfterPointerUp } = useNodeEventHandlers()

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

@@ -65,6 +65,15 @@ export function useNodePointerInteractions(
   function onPointermove(event: PointerEvent) {
     if (forwardMiddlePointerIfNeeded(event)) return
 
+    // Forward pointermove to canvas when in panning mode (e.g., space key held)
+    if (!shouldHandleNodePointerEvents.value) {
+      if (hasDraggingStarted || layoutStore.isDraggingVueNodes.value) {
+        safeDragEnd(event)
+      }
+      forwardEventToCanvas(event)
+      return
+    }
+
     // Don't activate drag while resizing
     if (layoutStore.isResizingVueNodes.value) return
 
@@ -129,6 +138,9 @@ export function useNodePointerInteractions(
     // Don't handle pointer events when canvas is in panning mode - forward to canvas instead
     const canHandlePointer = shouldHandleNodePointerEvents.value
     if (!canHandlePointer) {
+      if (hasDraggingStarted || layoutStore.isDraggingVueNodes.value) {
+        safeDragEnd(event)
+      }
       forwardEventToCanvas(event)
       return
     }