From 0854194aa1b10ec15ed143d46b3a135f5e115597 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 6 Sep 2025 02:47:37 -0700
Subject: [PATCH] [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                                      | 3 +++
 src/components/graph/GraphCanvas.vue                        | 6 +++---
 src/composables/graph/useGraphNodeManager.ts                | 2 +-
 .../graph => renderer/core/layout}/TransformPane.vue        | 2 +-
 .../core/layout/__tests__}/TransformPane.spec.ts            | 4 ++--
 .../element => renderer/core/layout}/useTransformState.ts   | 2 +-
 src/{utils => renderer/core}/spatial/QuadTree.ts            | 0
 src/renderer/core/spatial/SpatialIndex.ts                   | 3 ++-
 .../graph => renderer/extensions/minimap}/MiniMap.vue       | 0
 .../graph => renderer/extensions/minimap}/MiniMapPanel.vue  | 0
 src/types/spatialIndex.ts                                   | 2 +-
 .../tests/composables/element/useTransformState.test.ts     | 2 +-
 tests-ui/tests/performance/transformPerformance.test.ts     | 2 +-
 tests-ui/tests/utils/spatial/QuadTree.test.ts               | 2 +-
 14 files changed, 17 insertions(+), 13 deletions(-)
 rename src/{components/graph => renderer/core/layout}/TransformPane.vue (96%)
 rename src/{components/graph => renderer/core/layout/__tests__}/TransformPane.spec.ts (98%)
 rename src/{composables/element => renderer/core/layout}/useTransformState.ts (99%)
 rename src/{utils => renderer/core}/spatial/QuadTree.ts (100%)
 rename src/{components/graph => renderer/extensions/minimap}/MiniMap.vue (100%)
 rename src/{components/graph => renderer/extensions/minimap}/MiniMapPanel.vue (100%)

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index fa318da4f..8decf07cd 100644
--- a/.git-blame-ignore-revs
+++ b/.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
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 5b893b8d2..1e215c60a 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/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'
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index a5079c453..88b32e919 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/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
diff --git a/src/components/graph/TransformPane.vue b/src/renderer/core/layout/TransformPane.vue
similarity index 96%
rename from src/components/graph/TransformPane.vue
rename to src/renderer/core/layout/TransformPane.vue
index 266dd0569..2f623257c 100644
--- a/src/components/graph/TransformPane.vue
+++ b/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
diff --git a/src/components/graph/TransformPane.spec.ts b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
similarity index 98%
rename from src/components/graph/TransformPane.spec.ts
rename to src/renderer/core/layout/__tests__/TransformPane.spec.ts
index acfa172ee..f6fe7126c 100644
--- a/src/components/graph/TransformPane.spec.ts
+++ b/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
 }))
 
diff --git a/src/composables/element/useTransformState.ts b/src/renderer/core/layout/useTransformState.ts
similarity index 99%
rename from src/composables/element/useTransformState.ts
rename to src/renderer/core/layout/useTransformState.ts
index 5192bd6df..a3ca2a820 100644
--- a/src/composables/element/useTransformState.ts
+++ b/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
diff --git a/src/utils/spatial/QuadTree.ts b/src/renderer/core/spatial/QuadTree.ts
similarity index 100%
rename from src/utils/spatial/QuadTree.ts
rename to src/renderer/core/spatial/QuadTree.ts
diff --git a/src/renderer/core/spatial/SpatialIndex.ts b/src/renderer/core/spatial/SpatialIndex.ts
index 5b6fb269c..92a4a627f 100644
--- a/src/renderer/core/spatial/SpatialIndex.ts
+++ b/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
diff --git a/src/components/graph/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
similarity index 100%
rename from src/components/graph/MiniMap.vue
rename to src/renderer/extensions/minimap/MiniMap.vue
diff --git a/src/components/graph/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
similarity index 100%
rename from src/components/graph/MiniMapPanel.vue
rename to src/renderer/extensions/minimap/MiniMapPanel.vue
diff --git a/src/types/spatialIndex.ts b/src/types/spatialIndex.ts
index fb4250ba1..0bdd9c9e1 100644
--- a/src/types/spatialIndex.ts
+++ b/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
diff --git a/tests-ui/tests/composables/element/useTransformState.test.ts b/tests-ui/tests/composables/element/useTransformState.test.ts
index ad250872f..409ea2e47 100644
--- a/tests-ui/tests/composables/element/useTransformState.test.ts
+++ b/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() {
diff --git a/tests-ui/tests/performance/transformPerformance.test.ts b/tests-ui/tests/performance/transformPerformance.test.ts
index 9863bbfff..41d8c12c6 100644
--- a/tests-ui/tests/performance/transformPerformance.test.ts
+++ b/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 = () => ({
diff --git a/tests-ui/tests/utils/spatial/QuadTree.test.ts b/tests-ui/tests/utils/spatial/QuadTree.test.ts
index ea31e5682..31831159a 100644
--- a/tests-ui/tests/utils/spatial/QuadTree.test.ts
+++ b/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>