fix: complete canvas read-only synchronization

Replace LGraphCanvas.onReadOnlyChanged callback property with a
'litegraph:read-only-changed' CustomEvent dispatched on the canvas
DOM element. canvasStore now subscribes via useEventListener,
matching the existing pattern used for litegraph:set-graph,
subgraph-opened, subgraph-converted, and litegraph:ghost-placement.

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/8998#discussion_r2831838643
https://github.com/Comfy-Org/ComfyUI_frontend/pull/8998#discussion_r3184409804

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts

@@ -27,6 +27,37 @@ test.describe('Vue Nodes Canvas Pan', { tag: '@vue-nodes' }, () => {
     }
   )
 
+  test.describe('spacebar panning', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Canvas.NavigationMode',
+        'standard'
+      )
+      await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
+    })
+
+    test('Space + left-drag on a Vue node pans canvas', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const node = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      const offsetBefore = await comfyPage.canvasOps.getOffset()
+
+      await comfyPage.canvas.focus()
+      await comfyPage.page.keyboard.down('Space')
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(true)
+      try {
+        await comfyMouse.dragElementBy(node, { x: 140, y: 90 })
+      } finally {
+        await comfyPage.page.keyboard.up('Space')
+      }
+
+      await expect
+        .poll(() => comfyPage.canvasOps.getOffset())
+        .not.toEqual(offsetBefore)
+    })
+  })
+
   test(
     '@mobile Can pan with touch',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -1270,3 +1270,49 @@ test(
     })
   }
 )
+
+test.describe('Vue link drag panning', { tag: '@vue-nodes' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
+    await fitToViewInstant(comfyPage)
+  })
+
+  test('spacebar pans during link drag', async ({ comfyPage }) => {
+    const initialOffset = await comfyPage.canvasOps.getOffset()
+
+    await test.step('Setup link drag', async () => {
+      await comfyPage.searchBoxV2.addNode('Load Diffusion')
+      const loadNode = await comfyPage.vueNodes.getFixtureByTitle('Load Diff')
+      const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+      await loadNode.getSlot('MODEL').hover()
+      await comfyPage.page.mouse.down()
+      await ksampler.getSlot('model').hover()
+      expect(
+        await comfyPage.canvasOps.getOffset(),
+        'starting the link drag should not pan the canvas'
+      ).toEqual(initialOffset)
+    })
+
+    await test.step('Holding space initiates a pan', async () => {
+      await comfyPage.page.keyboard.down(' ')
+      await comfyPage.page.mouse.move(100, 100)
+      await comfyPage.page.keyboard.up(' ')
+      await expect
+        .poll(() => comfyPage.canvasOps.getOffset())
+        .not.toEqual(initialOffset)
+    })
+
+    await test.step('Mouse remains over model after pan', async () => {
+      await comfyPage.page.mouse.up()
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => graph?.nodes?.at(-1)?.outputs?.[0]?.links?.length === 1
+          )
+        )
+        .toBe(true)
+    })
+  })
+})

src/composables/useCoreCommands.test.ts

@@ -41,6 +41,7 @@ vi.mock('@/scripts/app', () => {
     copyToClipboard: vi.fn(),
     pasteFromClipboard: vi.fn(),
     selectItems: vi.fn(),
+    read_only: false,
     ds: mockDs,
     setDirty: vi.fn()
   }
@@ -575,6 +576,22 @@ describe('useCoreCommands', () => {
       )
       expect(app.canvas.setDirty).toHaveBeenCalledWith(true, true)
     })
+
+    it.for([
+      { id: 'Comfy.Canvas.Lock', from: false, to: true },
+      { id: 'Comfy.Canvas.Unlock', from: true, to: false },
+      { id: 'Comfy.Canvas.ToggleLock', from: false, to: true },
+      { id: 'Comfy.Canvas.ToggleLock', from: true, to: false }
+    ] as const)(
+      '$id changes read-only state from $from to $to',
+      async ({ id, from, to }) => {
+        app.canvas.read_only = from
+
+        await findCmd(id).function()
+
+        expect(app.canvas.read_only).toBe(to)
+      }
+    )
   })
 
   describe('Workflow lifecycle commands', () => {

src/composables/useCoreCommands.ts

@@ -414,7 +414,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Canvas Toggle Lock',
       category: 'view-controls' as const,
       function: () => {
-        app.canvas.state.readOnly = !app.canvas.state.readOnly
+        app.canvas.read_only = !app.canvas.read_only
       }
     },
     {
@@ -423,7 +423,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Lock Canvas',
       category: 'view-controls' as const,
       function: () => {
-        app.canvas.state.readOnly = true
+        app.canvas.read_only = true
       }
     },
     {
@@ -431,7 +431,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-lock-open',
       label: 'Unlock Canvas',
       function: () => {
-        app.canvas.state.readOnly = false
+        app.canvas.read_only = false
       }
     },
     {

src/lib/litegraph/src/LGraphCanvas.ts

@@ -415,8 +415,12 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   }
 
   set read_only(value: boolean) {
+    const changed = this.state.readOnly !== value
     this.state.readOnly = value
     this._updateCursorStyle()
+    if (changed) {
+      this.dispatchEvent('litegraph:read-only-changed', { readOnly: value })
+    }
   }
 
   get isDragging(): boolean {
@@ -3981,7 +3985,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         if (this._previously_dragging_canvas === null) {
           this._previously_dragging_canvas = this.dragging_canvas
         }
-        this.dragging_canvas = this.pointer.isDown
+        this.dragging_canvas =
+          this.pointer.isDown || !!this.linkConnector.renderLinks.length
         block_default = true
       } else if (e.key === 'Escape') {
         // esc

src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts

@@ -60,4 +60,9 @@ export interface LGraphCanvasEventMap {
     active: boolean
     nodeId: SerializedNodeId
   }
+
+  /** The canvas read-only state has changed. */
+  'litegraph:read-only-changed': {
+    readOnly: boolean
+  }
 }

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

@@ -1,12 +1,13 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { nextTick, ref } from 'vue'
 import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
 import type { LGraphCanvas, Positionable } from '@/lib/litegraph/src/litegraph'
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 const { appModeState } = vi.hoisted(() => ({
@@ -44,6 +45,13 @@ vi.mock('@/scripts/app', () => ({
   }
 }))
 
+function createMockCanvas(readOnly = false): LGraphCanvas {
+  return fromPartial<LGraphCanvas>({
+    read_only: readOnly,
+    canvas: document.createElement('canvas')
+  })
+}
+
 describe('useCanvasStore', () => {
   let store: ReturnType<typeof useCanvasStore>
 
@@ -135,4 +143,40 @@ describe('useCanvasStore', () => {
 
     expect(store.selectedNodeIds).toHaveLength(0)
   })
+
+  describe('isReadOnly', () => {
+    it('syncs initial read_only value when canvas is set', async () => {
+      const mockCanvas = createMockCanvas(true)
+
+      store.canvas = mockCanvas
+      await nextTick()
+
+      expect(store.isReadOnly).toBe(true)
+    })
+
+    it('updates isReadOnly when litegraph:read-only-changed event fires', async () => {
+      const mockCanvas = createMockCanvas(false)
+
+      store.canvas = mockCanvas
+      await nextTick()
+
+      expect(store.isReadOnly).toBe(false)
+
+      mockCanvas.canvas.dispatchEvent(
+        new CustomEvent('litegraph:read-only-changed', {
+          detail: { readOnly: true }
+        })
+      )
+
+      expect(store.isReadOnly).toBe(true)
+
+      mockCanvas.canvas.dispatchEvent(
+        new CustomEvent('litegraph:read-only-changed', {
+          detail: { readOnly: false }
+        })
+      )
+
+      expect(store.isReadOnly).toBe(false)
+    })
+  })
 })

src/renderer/core/canvas/canvasStore.ts

@@ -56,6 +56,7 @@ export const useCanvasStore = defineStore('canvas', () => {
       setMode(val ? 'app' : 'graph')
     }
   })
+  const isReadOnly = ref(false)
 
   // Set up scale synchronization when canvas is available
   let originalOnChanged: ((scale: number, offset: Point) => void) | undefined =
@@ -139,6 +140,16 @@ export const useCanvasStore = defineStore('canvas', () => {
         }
       )
 
+      isReadOnly.value = newCanvas.read_only
+
+      useEventListener(
+        newCanvas.canvas,
+        'litegraph:read-only-changed',
+        (event: CustomEvent<{ readOnly: boolean }>) => {
+          isReadOnly.value = event.detail.readOnly
+        }
+      )
+
       useEventListener(
         newCanvas.canvas,
         'litegraph:set-graph',
@@ -184,6 +195,7 @@ export const useCanvasStore = defineStore('canvas', () => {
     rerouteSelected,
     appScalePercentage,
     linearMode,
+    isReadOnly,
     updateSelectedItems,
     getCanvas,
     setAppZoomFromPercentage,

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

@@ -13,7 +13,8 @@ vi.mock('@/renderer/core/canvas/canvasStore', () => {
   return {
     useCanvasStore: vi.fn(() => ({
       getCanvas,
-      setCursorStyle
+      setCursorStyle,
+      isReadOnly: false
     }))
   }
 })

src/renderer/core/canvas/useCanvasInteractions.ts

@@ -27,9 +27,7 @@ export function useCanvasInteractions() {
    * Whether Vue node components should handle pointer events.
    * 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)
-  )
+  const shouldHandleNodePointerEvents = computed(() => !canvasStore.isReadOnly)
 
   /**
    * Returns true if the wheel event target is inside an element that should

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

@@ -54,6 +54,10 @@ vi.mock('@/renderer/core/canvas/useAutoPan', () => ({
   }
 }))
 
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({ isReadOnly: false })
+}))
+
 vi.mock('@/scripts/app', () => ({
   app: {
     canvas: {

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

@@ -23,6 +23,7 @@ import {
   resolveNodeSurfaceSlotCandidate,
   resolveSlotTargetCandidate
 } from '@/renderer/core/canvas/links/linkDropOrchestrator'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useSlotLinkDragUIState } from '@/renderer/core/canvas/links/slotLinkDragUIState'
 import type { SlotDropCandidate } from '@/renderer/core/canvas/links/slotLinkDragUIState'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
@@ -124,6 +125,7 @@ export function useSlotLinkInteraction({
     setCompatibleForKey,
     clearCompatible
   } = useSlotLinkDragUIState()
+  const canvasStore = useCanvasStore()
   const conversion = useSharedCanvasPositionConversion()
   const pointerSession = createPointerSession()
   let activeAdapter: LinkConnectorAdapter | null = null
@@ -419,9 +421,11 @@ export function useSlotLinkInteraction({
   const canvas = app.canvas
   const node = nodeId && canvas ? canvas.graph?.getNodeById(nodeId) : null
   const handlePointerMove = (event: PointerEvent) => {
-    if (!pointerSession.matches(event)) return
+    if (!pointerSession.matches(event) || canvasStore.isReadOnly) return
+
     event.stopPropagation()
 
+    app.canvas.last_mouse = [event.clientX, event.clientY]
     autoPan?.updatePointer(event.clientX, event.clientY)
 
     if (canvas?.subgraph && node) {

src/stores/appModeStore.ts

@@ -230,14 +230,13 @@ export const useAppModeStore = defineStore('appMode', () => {
 
   let unwatchReadOnly: (() => void) | undefined
   function enforceReadOnly(inSelect: boolean) {
-    const { state } = getCanvas()
-    if (!state) return
-    state.readOnly = inSelect
+    const canvas = getCanvas()
+    canvas.read_only = inSelect
     unwatchReadOnly?.()
     if (inSelect)
       unwatchReadOnly = watch(
-        () => state.readOnly,
-        () => (state.readOnly = true)
+        () => canvas.read_only,
+        () => (canvas.read_only = true)
       )
   }