Fix: In standard mode, don't stop when you hit a Vue node. (#5445)

* fix: Forward the scrolling events to the litegraph canvas.

* prior-art: Use the existing event forwarding logic from useCanvasInteractions (h/t Ben)

* fix: Get proper scaling from properties in the original event, fix browser zoom

* tests: Fix missing property on mock

* types: Cleanup type annotations in the test

* cleanup: Initialize the mocks in place.

* tests: extract createMockPointerEvent

* tests: extract createMockWheelEvent

* tests: extract createMockLGraphCanvas

* tests: Add additional assertion for stopPropagation

* tests: Comment pruning, test rename suggested by @arjansingh

tests-ui/tests/composables/graph/useCanvasInteractions.test.ts

@@ -1,12 +1,19 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 
 // Mock stores
-vi.mock('@/stores/graphStore')
-vi.mock('@/stores/settingStore')
+vi.mock('@/stores/graphStore', () => {
+  const getCanvas = vi.fn()
+  return { useCanvasStore: vi.fn(() => ({ getCanvas })) }
+})
+vi.mock('@/stores/settingStore', () => {
+  const getFn = vi.fn()
+  return { useSettingStore: vi.fn(() => ({ get: getFn })) }
+})
 vi.mock('@/scripts/app', () => ({
   app: {
     canvas: {
@@ -17,105 +24,86 @@ vi.mock('@/scripts/app', () => ({
   }
 }))
 
+function createMockLGraphCanvas(read_only = true): LGraphCanvas {
+  const mockCanvas: Partial<LGraphCanvas> = { read_only }
+  return mockCanvas as LGraphCanvas
+}
+
+function createMockPointerEvent(
+  buttons: PointerEvent['buttons'] = 1
+): PointerEvent {
+  const mockEvent: Partial<PointerEvent> = {
+    buttons,
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn()
+  }
+  return mockEvent as PointerEvent
+}
+
+function createMockWheelEvent(ctrlKey = false, metaKey = false): WheelEvent {
+  const mockEvent: Partial<WheelEvent> = {
+    ctrlKey,
+    metaKey,
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn()
+  }
+  return mockEvent as WheelEvent
+}
+
 describe('useCanvasInteractions', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-    vi.mocked(useCanvasStore, { partial: true }).mockReturnValue({
-      getCanvas: vi.fn()
-    })
-    vi.mocked(useSettingStore, { partial: true }).mockReturnValue({
-      get: vi.fn()
-    })
+    vi.resetAllMocks()
   })
 
   describe('handlePointer', () => {
-    it('should forward space+drag events to canvas when read_only is true', () => {
-      // Setup
-      const mockCanvas = { read_only: true }
+    it('should intercept left mouse events when canvas is read_only to enable space+drag navigation', () => {
       const { getCanvas } = useCanvasStore()
-      vi.mocked(getCanvas).mockReturnValue(mockCanvas as any)
+      const mockCanvas = createMockLGraphCanvas(true)
+      vi.mocked(getCanvas).mockReturnValue(mockCanvas)
 
       const { handlePointer } = useCanvasInteractions()
 
-      // Create mock pointer event
-      const mockEvent = {
-        buttons: 1, // Left mouse button
-        preventDefault: vi.fn(),
-        stopPropagation: vi.fn()
-      } satisfies Partial<PointerEvent>
+      const mockEvent = createMockPointerEvent(1) // Left Mouse Button
+      handlePointer(mockEvent)
 
-      // Test
-      handlePointer(mockEvent as unknown as PointerEvent)
-
-      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
       expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should forward middle mouse button events to canvas', () => {
-      // Setup
-      const mockCanvas = { read_only: false }
       const { getCanvas } = useCanvasStore()
-      vi.mocked(getCanvas).mockReturnValue(mockCanvas as any)
-
+      const mockCanvas = createMockLGraphCanvas(false)
+      vi.mocked(getCanvas).mockReturnValue(mockCanvas)
       const { handlePointer } = useCanvasInteractions()
 
-      // Create mock pointer event with middle button
-      const mockEvent = {
-        buttons: 4, // Middle mouse button
-        preventDefault: vi.fn(),
-        stopPropagation: vi.fn()
-      } satisfies Partial<PointerEvent>
+      const mockEvent = createMockPointerEvent(4) // Middle mouse button
+      handlePointer(mockEvent)
 
-      // Test
-      handlePointer(mockEvent as unknown as PointerEvent)
-
-      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
       expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should not prevent default when canvas is not in read_only mode and not middle button', () => {
-      // Setup
-      const mockCanvas = { read_only: false }
       const { getCanvas } = useCanvasStore()
-      vi.mocked(getCanvas).mockReturnValue(mockCanvas as any)
-
+      const mockCanvas = createMockLGraphCanvas(false)
+      vi.mocked(getCanvas).mockReturnValue(mockCanvas)
       const { handlePointer } = useCanvasInteractions()
 
-      // Create mock pointer event
-      const mockEvent = {
-        buttons: 1, // Left mouse button
-        preventDefault: vi.fn(),
-        stopPropagation: vi.fn()
-      } satisfies Partial<PointerEvent>
+      const mockEvent = createMockPointerEvent(1)
+      handlePointer(mockEvent)
 
-      // Test
-      handlePointer(mockEvent as unknown as PointerEvent)
-
-      // Verify - should not prevent default (let media handle normally)
       expect(mockEvent.preventDefault).not.toHaveBeenCalled()
       expect(mockEvent.stopPropagation).not.toHaveBeenCalled()
     })
 
     it('should return early when canvas is null', () => {
-      // Setup
       const { getCanvas } = useCanvasStore()
-      vi.mocked(getCanvas).mockReturnValue(null as any)
-
+      vi.mocked(getCanvas).mockReturnValue(null as unknown as LGraphCanvas) // TODO: Fix misaligned types
       const { handlePointer } = useCanvasInteractions()
 
-      // Create mock pointer event that would normally trigger forwarding
-      const mockEvent = {
-        buttons: 1, // Left mouse button - would trigger space+drag if canvas had read_only=true
-        preventDefault: vi.fn(),
-        stopPropagation: vi.fn()
-      } satisfies Partial<PointerEvent>
+      const mockEvent = createMockPointerEvent(1)
+      handlePointer(mockEvent)
 
-      // Test
-      handlePointer(mockEvent as unknown as PointerEvent)
-
-      // Verify early return - no event methods should be called at all
       expect(getCanvas).toHaveBeenCalled()
       expect(mockEvent.preventDefault).not.toHaveBeenCalled()
       expect(mockEvent.stopPropagation).not.toHaveBeenCalled()
@@ -124,66 +112,42 @@ describe('useCanvasInteractions', () => {
 
   describe('handleWheel', () => {
     it('should forward ctrl+wheel events to canvas in standard nav mode', () => {
-      // Setup
       const { get } = useSettingStore()
       vi.mocked(get).mockReturnValue('standard')
 
       const { handleWheel } = useCanvasInteractions()
 
-      // Create mock wheel event with ctrl key
-      const mockEvent = {
-        ctrlKey: true,
-        metaKey: false,
-        preventDefault: vi.fn()
-      } satisfies Partial<WheelEvent>
+      // Ctrl key pressed
+      const mockEvent = createMockWheelEvent(true)
 
-      // Test
-      handleWheel(mockEvent as unknown as WheelEvent)
+      handleWheel(mockEvent)
 
-      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
+      expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should forward all wheel events to canvas in legacy nav mode', () => {
-      // Setup
       const { get } = useSettingStore()
       vi.mocked(get).mockReturnValue('legacy')
-
       const { handleWheel } = useCanvasInteractions()
 
-      // Create mock wheel event without modifiers
-      const mockEvent = {
-        ctrlKey: false,
-        metaKey: false,
-        preventDefault: vi.fn()
-      } satisfies Partial<WheelEvent>
+      const mockEvent = createMockWheelEvent()
+      handleWheel(mockEvent)
 
-      // Test
-      handleWheel(mockEvent as unknown as WheelEvent)
-
-      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
+      expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should not prevent default for regular wheel events in standard nav mode', () => {
-      // Setup
       const { get } = useSettingStore()
       vi.mocked(get).mockReturnValue('standard')
-
       const { handleWheel } = useCanvasInteractions()
 
-      // Create mock wheel event without modifiers
-      const mockEvent = {
-        ctrlKey: false,
-        metaKey: false,
-        preventDefault: vi.fn()
-      } satisfies Partial<WheelEvent>
+      const mockEvent = createMockWheelEvent()
+      handleWheel(mockEvent)
 
-      // Test
-      handleWheel(mockEvent as unknown as WheelEvent)
-
-      // Verify - should not prevent default (let component handle normally)
       expect(mockEvent.preventDefault).not.toHaveBeenCalled()
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled()
     })
   })
 })