Convert class-based LayoutMutations to composable and define interface where it's used

src/components/graph/GraphCanvas.vue

@@ -139,8 +139,8 @@ 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 { useLayoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
-import { useLayout } from '@/renderer/core/layout/sync/useLayout'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
 import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
@@ -177,7 +177,7 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const toastStore = useToastStore()
-const { mutations: layoutMutations } = useLayout()
+const layoutMutations = useLayoutMutations()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )

src/composables/graph/useGraphNodeManager.ts

@@ -4,7 +4,7 @@
  */
 import { nextTick, reactive, readonly } from 'vue'
 
-import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { WidgetValue } from '@/types/simplifiedWidget'
 import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'
@@ -99,6 +99,9 @@ export interface GraphNodeManager {
 }
 
 export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
+  // Get layout mutations composable
+  const { moveNode, resizeNode, createNode, deleteNode, setSource } =
+    useLayoutMutations()
   // Safe reactive data extracted from LiteGraph nodes
   const vueNodeData = reactive(new Map<string, VueNodeData>())
   const nodeState = reactive(new Map<string, NodeState>())
@@ -487,7 +490,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
 
       // Push position change to layout store
       // Source is already set to 'canvas' in detectChangesInRAF
-      void layoutMutations.moveNode(id, { x: node.pos[0], y: node.pos[1] })
+      void moveNode(id, { x: node.pos[0], y: node.pos[1] })
 
       return true
     }
@@ -509,7 +512,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
 
       // Push size change to layout store
       // Source is already set to 'canvas' in detectChangesInRAF
-      void layoutMutations.resizeNode(id, {
+      void resizeNode(id, {
         width: node.size[0],
         height: node.size[1]
       })
@@ -554,7 +557,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
   }
 
   /**
-   * Main RAF change detection function - now simplified with extracted helpers
+   * Main RAF change detection function
    */
   const detectChangesInRAF = () => {
     const startTime = performance.now()
@@ -565,7 +568,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     let sizeUpdates = 0
 
     // Set source for all canvas-driven updates
-    layoutMutations.setSource(LayoutSource.Canvas)
+    setSource(LayoutSource.Canvas)
 
     // Process each node for changes
     for (const node of graph._nodes) {
@@ -625,8 +628,8 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     spatialIndex.insert(id, bounds, id)
 
     // Add node to layout store
-    layoutMutations.setSource(LayoutSource.Canvas)
-    void layoutMutations.createNode(id, {
+    setSource(LayoutSource.Canvas)
+    void createNode(id, {
       position: { x: node.pos[0], y: node.pos[1] },
       size: { width: node.size[0], height: node.size[1] },
       zIndex: node.order || 0,
@@ -652,8 +655,8 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     spatialIndex.remove(id)
 
     // Remove node from layout store
-    layoutMutations.setSource(LayoutSource.Canvas)
-    void layoutMutations.deleteNode(id)
+    setSource(LayoutSource.Canvas)
+    void deleteNode(id)
 
     // Clean up all tracking references
     nodeRefs.delete(id)

src/lib/litegraph/src/LGraph.ts

@@ -6,7 +6,8 @@ import {
 } from '@/lib/litegraph/src/constants'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4, zeroUuid } from '@/lib/litegraph/src/utils/uuid'
-import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
+import type { LayoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 
 import type { DragAndScaleState } from './DragAndScale'
@@ -190,6 +191,9 @@ export class LGraph
   nodes_executedAction: string[] = []
   extra: LGraphExtra = {}
 
+  /** Layout mutations instance for this graph */
+  layoutMutations!: LayoutMutations
+
   /** @deprecated Deserialising a workflow sets this unused property. */
   version?: number
 
@@ -276,6 +280,9 @@ export class LGraph
   constructor(o?: ISerialisedGraph | SerialisableGraph) {
     if (LiteGraph.debug) console.log('Graph created')
 
+    // Get layout mutations composable
+    this.layoutMutations = useLayoutMutations()
+
     /** @see MapProxyHandler */
     const links = this._links
     MapProxyHandler.bindAllMethods(links)
@@ -1353,8 +1360,8 @@ export class LGraph
     this.reroutes.set(rerouteId, reroute)
 
     // Register reroute in Layout Store for spatial tracking
-    layoutMutations.setSource(LayoutSource.Canvas)
-    layoutMutations.createReroute(
+    this.layoutMutations.setSource(LayoutSource.Canvas)
+    this.layoutMutations.createReroute(
       String(rerouteId),
       { x: pos[0], y: pos[1] },
       before.parentId ? String(before.parentId) : undefined,
@@ -1436,8 +1443,8 @@ export class LGraph
     reroutes.delete(id)
 
     // Delete reroute from Layout Store
-    layoutMutations.setSource(LayoutSource.Canvas)
-    layoutMutations.deleteReroute(id)
+    this.layoutMutations.setSource(LayoutSource.Canvas)
+    this.layoutMutations.deleteReroute(id)
 
     // This does not belong here; it should be handled by the caller, or run by a remove-many API.
     // https://github.com/Comfy-Org/litegraph.js/issues/898
@@ -2263,8 +2270,8 @@ export class LGraph
         if (!reroute.validateLinks(this._links, this.floatingLinks)) {
           this.reroutes.delete(reroute.id)
           // Clean up layout store
-          layoutMutations.setSource(LayoutSource.Canvas)
-          layoutMutations.deleteReroute(reroute.id)
+          this.layoutMutations.setSource(LayoutSource.Canvas)
+          this.layoutMutations.deleteReroute(reroute.id)
         }
       }
 

src/lib/litegraph/src/LGraphNode.ts

@@ -5,7 +5,6 @@ import {
   calculateInputSlotPosFromSlot,
   calculateOutputSlotPos
 } from '@/renderer/core/canvas/litegraph/SlotCalculations'
-import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 
 import type { DragAndScale } from './DragAndScale'
@@ -2845,8 +2844,8 @@ export class LGraphNode
     graph._links.set(link.id, link)
 
     // Register link in Layout Store for spatial tracking
-    layoutMutations.setSource(LayoutSource.Canvas)
-    layoutMutations.createLink(
+    graph.layoutMutations.setSource(LayoutSource.Canvas)
+    graph.layoutMutations.createLink(
       link.id,
       this.id,
       outputIndex,

src/lib/litegraph/src/LLink.ts

@@ -2,7 +2,7 @@ import {
   SUBGRAPH_INPUT_ID,
   SUBGRAPH_OUTPUT_ID
 } from '@/lib/litegraph/src/constants'
-import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 
 import type { LGraphNode, NodeId } from './LGraphNode'
@@ -22,6 +22,8 @@ import type {
   SubgraphIO
 } from './types/serialisation'
 
+const layoutMutations = useLayoutMutations()
+
 export type LinkId = number
 
 export type SerialisedLLinkArray = [

src/lib/litegraph/src/Reroute.ts

@@ -1,4 +1,4 @@
-import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 
 import { LGraphBadge } from './LGraphBadge'
@@ -18,6 +18,8 @@ import type {
 import { distance, isPointInRect } from './measure'
 import type { Serialisable, SerialisableReroute } from './types/serialisation'
 
+const layoutMutations = useLayoutMutations()
+
 export type RerouteId = number
 
 /** The input or output slot that an incomplete reroute link is connected to. */