[refactor] Refactor rendering-related files to DDD organization (#5388)

* refactor rendering-related files to DDD organization

* add to git ignore ignore revs

.git-blame-ignore-revs

@@ -4,3 +4,6 @@
 
 # npm run format on litegraph merge (10,672 insertions, 7,327 deletions across 129 files)
 c53f197de2a3e0fa66b16dedc65c131235c1c4b6
+
+# Reorganize renderer components into domain-driven folder structure
+c8a83a9caede7bdb5f8598c5492b07d08c339d49

src/components/graph/GraphCanvas.vue

@@ -89,15 +89,12 @@ import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitter
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
-import MiniMap from '@/components/graph/MiniMap.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
-import TransformPane from '@/components/graph/TransformPane.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
-import { useTransformState } from '@/composables/element/useTransformState'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type {
@@ -117,12 +114,15 @@ import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import TransformPane from '@/renderer/core/layout/TransformPane.vue'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
 import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
+import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'

src/composables/graph/useGraphNodeManager.ts

@@ -6,11 +6,11 @@ import { nextTick, reactive, readonly } from 'vue'
 
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { type Bounds, QuadTree } from '@/renderer/core/spatial/QuadTree'
 import type { WidgetValue } from '@/types/simplifiedWidget'
 import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'
 
 import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'
-import { type Bounds, QuadTree } from '../../utils/spatial/QuadTree'
 
 export interface NodeState {
   visible: boolean

src/renderer/core/layout/TransformPane.vue

@@ -13,10 +13,10 @@
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 
-import { useTransformState } from '@/composables/element/useTransformState'
 import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
 import { useTransformSettling } from '@/composables/graph/useTransformSettling'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
 
 interface TransformPaneProps {
   canvas?: LGraphCanvas

src/renderer/core/layout/__tests__/TransformPane.spec.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import TransformPane from './TransformPane.vue'
+import TransformPane from '../TransformPane.vue'
 
 // Mock the transform state composable
 const mockTransformState = {
@@ -17,7 +17,7 @@ const mockTransformState = {
   isNodeInViewport: vi.fn()
 }
 
-vi.mock('@/composables/element/useTransformState', () => ({
+vi.mock('@/renderer/core/spatial/useTransformState', () => ({
   useTransformState: () => mockTransformState
 }))
 

src/renderer/core/layout/useTransformState.ts

@@ -51,7 +51,7 @@
  */
 import { computed, reactive, readonly } from 'vue'
 
-import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
 export interface Point {
   x: number

src/renderer/core/spatial/SpatialIndex.ts

@@ -9,7 +9,8 @@ import {
   QUADTREE_CONFIG
 } from '@/renderer/core/layout/constants'
 import type { Bounds, NodeId } from '@/renderer/core/layout/types'
-import { QuadTree } from '@/utils/spatial/QuadTree'
+
+import { QuadTree } from './QuadTree'
 
 /**
  * Cache entry for spatial queries

src/types/spatialIndex.ts

@@ -1,7 +1,7 @@
 /**
  * Type definitions for spatial indexing system
  */
-import type { Bounds } from '@/utils/spatial/QuadTree'
+import type { Bounds } from '@/renderer/core/spatial/QuadTree'
 
 /**
  * Debug information for a single QuadTree node

tests-ui/tests/composables/element/useTransformState.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useTransformState } from '@/composables/element/useTransformState'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
 
 // Create a mock canvas context for transform testing
 function createMockCanvasContext() {

tests-ui/tests/performance/transformPerformance.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useTransformState } from '@/composables/element/useTransformState'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
 
 // Mock canvas context for testing
 const createMockCanvasContext = () => ({

tests-ui/tests/utils/spatial/QuadTree.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { type Bounds, QuadTree } from '@/utils/spatial/QuadTree'
+import { type Bounds, QuadTree } from '@/renderer/core/spatial/QuadTree'
 
 describe('QuadTree', () => {
   let quadTree: QuadTree<string>