Merge remote-tracking branch 'origin/main' into sno-fix-playwright-babel

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -53,13 +53,16 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed } from 'vue'
+import { computed, nextTick, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/composables/useManagerState'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -121,6 +124,35 @@ const openManager = async () => {
     showToastOnLegacyError: true
   })
 }
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+
+// Computed to check if all missing nodes have been installed
+const allMissingNodesInstalled = computed(() => {
+  return (
+    !isLoading.value &&
+    !isInstalling.value &&
+    missingNodePacks.value?.length === 0
+  )
+})
+// Watch for completion and close dialog
+watch(allMissingNodesInstalled, async (allInstalled) => {
+  if (allInstalled) {
+    // Use nextTick to ensure state updates are complete
+    await nextTick()
+
+    dialogStore.closeDialog({ key: 'global-load-workflow-warning' })
+
+    // Show success toast
+    useToastStore().add({
+      severity: 'success',
+      summary: t('g.success'),
+      detail: t('manager.allMissingNodesInstalled'),
+      life: 3000
+    })
+  }
+})
 </script>
 
 <style scoped>

src/components/graph/GraphCanvas.vue

@@ -36,6 +36,7 @@
     v-if="isVueNodesEnabled && comfyApp.canvas && comfyAppReady"
     :canvas="comfyApp.canvas"
     @transform-update="handleTransformUpdate"
+    @wheel.capture="canvasInteractions.forwardEventToCanvas"
   >
     <!-- Vue nodes rendered based on graph nodes -->
     <VueGraphNode
@@ -96,6 +97,7 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
@@ -147,6 +149,8 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const toastStore = useToastStore()
+const canvasInteractions = useCanvasInteractions()
+
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )

src/composables/graph/useCanvasInteractions.ts

@@ -24,14 +24,12 @@ export function useCanvasInteractions() {
   const handleWheel = (event: WheelEvent) => {
     // In standard mode, Ctrl+wheel should go to canvas for zoom
     if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
-      event.preventDefault() // Prevent browser zoom
       forwardEventToCanvas(event)
       return
     }
 
     // In legacy mode, all wheel events go to canvas for zoom
     if (!isStandardNavMode.value) {
-      event.preventDefault()
       forwardEventToCanvas(event)
       return
     }
@@ -68,9 +66,30 @@ export function useCanvasInteractions() {
   ) => {
     const canvasEl = app.canvas?.canvas
     if (!canvasEl) return
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (event instanceof WheelEvent) {
+      const { clientX, clientY, deltaX, deltaY, ctrlKey, metaKey, shiftKey } =
+        event
+      canvasEl.dispatchEvent(
+        new WheelEvent('wheel', {
+          clientX,
+          clientY,
+          deltaX,
+          deltaY,
+          ctrlKey,
+          metaKey,
+          shiftKey
+        })
+      )
+      return
+    }
 
     // Create new event with same properties
-    const EventConstructor = event.constructor as typeof WheelEvent
+    const EventConstructor = event.constructor as
+      | typeof MouseEvent
+      | typeof PointerEvent
     const newEvent = new EventConstructor(event.type, event)
     canvasEl.dispatchEvent(newEvent)
   }

src/locales/en/main.json

@@ -213,6 +213,7 @@
     "noDescription": "No description available",
     "installSelected": "Install Selected",
     "installAllMissingNodes": "Install All Missing Nodes",
+    "allMissingNodesInstalled": "All missing nodes have been successfully installed",
     "packsSelected": "packs selected",
     "mixedSelectionMessage": "Cannot perform bulk action on mixed selection",
     "notAvailable": "Not Available",

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()
     })
   })
 })