refactor: move useCanvasInteractions to follow DDD structure

Move useCanvasInteractions from src/composables/graph/ to src/renderer/core/canvas/
to follow Domain-Driven Design principles. Canvas interactions are specifically
about canvas behavior and should be grouped with other canvas-related functionality.

Also move the corresponding test file to maintain the same directory structure.

Updated all import paths across:
- Vue components (GraphCanvas, GraphCanvasMenu, SelectionToolbox, etc.)
- Vue node components (LGraphNode, NodeWidgets)
- Composables (useNodeEventHandlers, useNodeImage)
- Test files and mocks

Author: christian-byrne

src/components/graph/GraphCanvas.vue

@@ -96,7 +96,6 @@ 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'
@@ -118,6 +117,7 @@ import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables
 import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'

src/components/graph/GraphCanvasMenu.vue

@@ -124,11 +124,11 @@ import ButtonGroup from 'primevue/buttongroup'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } 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'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/graph/SelectionToolbox.spec.ts

@@ -5,12 +5,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 
 // Mock the composables and services
-vi.mock('@/composables/graph/useCanvasInteractions', () => ({
+vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
   useCanvasInteractions: vi.fn(() => ({
     handleWheel: vi.fn()
   }))

src/components/graph/SelectionToolbox.vue

@@ -60,9 +60,9 @@ import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButt
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
 import PublishSubgraphButton from '@/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue'
 import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionToolboxPosition'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'

src/composables/node/useNodeImage.ts

@@ -1,5 +1,5 @@
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
 

src/composables/graph/useCanvasInteractions.ts renamed to src/renderer/core/canvas/useCanvasInteractions.ts

@@ -19,10 +19,10 @@ export function useCanvasInteractions() {
   )
 
   /**
-   * Whether Vue components can capture pointer events.
-   * Returns false when canvas is in read-only/panning mode.
+   * 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 canCapturePointerEvents = computed(
+  const shouldHandleNodePointerEvents = computed(
     () => !(canvasStore.canvas?.read_only ?? false)
   )
 
@@ -107,6 +107,6 @@ export function useCanvasInteractions() {
     handleWheel,
     handlePointer,
     forwardEventToCanvas,
-    canCapturePointerEvents
+    shouldHandleNodePointerEvents
   }
 }

tests-ui/tests/composables/graph/useCanvasInteractions.test.ts renamed to tests-ui/tests/renderer/core/canvas/useCanvasInteractions.test.ts

@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 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'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 // Mock stores
 vi.mock('@/renderer/core/canvas/canvasStore', () => {

tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts

@@ -1,19 +1,19 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn()
 }))
 
-vi.mock('@/composables/graph/useCanvasInteractions', () => ({
+vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
   useCanvasInteractions: vi.fn()
 }))
 
@@ -75,10 +75,10 @@ function createMockLayoutMutations(): Pick<
 
 function createMockCanvasInteractions(): Pick<
   ReturnType<typeof useCanvasInteractions>,
-  'canCapturePointerEvents'
+  'shouldHandleNodePointerEvents'
 > {
   return {
-    canCapturePointerEvents: computed(() => true) // Default to allowing pointer events
+    shouldHandleNodePointerEvents: computed(() => true) // Default to allowing pointer events
   }
 }