Removes node's dependency on LGraph for access to layout mutations composable (#5356)

* remove DI

* remove layoutMutations property on LGraph

* remove layout mutations property from LGraph snapshot

Author: christian-byrne

src/lib/litegraph/src/LGraph.ts

@@ -7,7 +7,6 @@ import {
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4, zeroUuid } from '@/lib/litegraph/src/utils/uuid'
 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'
@@ -191,9 +190,6 @@ 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
 
@@ -280,9 +276,6 @@ 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)
@@ -1345,6 +1338,7 @@ export class LGraph
    * @returns The newly created reroute - typically ignored.
    */
   createReroute(pos: Point, before: LinkSegment): Reroute {
+    const layoutMutations = useLayoutMutations()
     const rerouteId = ++this.state.lastRerouteId
     const linkIds = before instanceof Reroute ? before.linkIds : [before.id]
     const floatingLinkIds =
@@ -1360,8 +1354,8 @@ export class LGraph
     this.reroutes.set(rerouteId, reroute)
 
     // Register reroute in Layout Store for spatial tracking
-    this.layoutMutations.setSource(LayoutSource.Canvas)
-    this.layoutMutations.createReroute(
+    layoutMutations.setSource(LayoutSource.Canvas)
+    layoutMutations.createReroute(
       rerouteId,
       { x: pos[0], y: pos[1] },
       before.parentId,
@@ -1398,6 +1392,7 @@ export class LGraph
    * @param id ID of reroute to remove
    */
   removeReroute(id: RerouteId): void {
+    const layoutMutations = useLayoutMutations()
     const { reroutes } = this
     const reroute = reroutes.get(id)
     if (!reroute) return
@@ -1443,8 +1438,8 @@ export class LGraph
     reroutes.delete(id)
 
     // Delete reroute from Layout Store
-    this.layoutMutations.setSource(LayoutSource.Canvas)
-    this.layoutMutations.deleteReroute(id)
+    layoutMutations.setSource(LayoutSource.Canvas)
+    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
@@ -2129,6 +2124,7 @@ export class LGraph
     data: ISerialisedGraph | SerialisableGraph,
     keep_old?: boolean
   ): boolean | undefined {
+    const layoutMutations = useLayoutMutations()
     const options: LGraphEventMap['configuring'] = {
       data,
       clearGraph: !keep_old
@@ -2270,8 +2266,8 @@ export class LGraph
         if (!reroute.validateLinks(this._links, this.floatingLinks)) {
           this.reroutes.delete(reroute.id)
           // Clean up layout store
-          this.layoutMutations.setSource(LayoutSource.Canvas)
-          this.layoutMutations.deleteReroute(reroute.id)
+          layoutMutations.setSource(LayoutSource.Canvas)
+          layoutMutations.deleteReroute(reroute.id)
         }
       }
 

src/lib/litegraph/src/LGraphNode.ts

@@ -5,6 +5,7 @@ import {
   calculateInputSlotPosFromSlot,
   calculateOutputSlotPos
 } from '@/renderer/core/canvas/litegraph/SlotCalculations'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 
 import type { DragAndScale } from './DragAndScale'
@@ -2785,6 +2786,8 @@ export class LGraphNode
     const { graph } = this
     if (!graph) throw new NullGraphError()
 
+    const layoutMutations = useLayoutMutations()
+
     const outputIndex = this.outputs.indexOf(output)
     if (outputIndex === -1) {
       console.warn('connectSlots: output not found')
@@ -2844,8 +2847,8 @@ export class LGraphNode
     graph._links.set(link.id, link)
 
     // Register link in Layout Store for spatial tracking
-    graph.layoutMutations.setSource(LayoutSource.Canvas)
-    graph.layoutMutations.createLink(
+    layoutMutations.setSource(LayoutSource.Canvas)
+    layoutMutations.createLink(
       link.id,
       this.id,
       outputIndex,

tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap

@@ -281,21 +281,6 @@ LGraph {
   "id": "b4e984f1-b421-4d24-b8b4-ff895793af13",
   "iteration": 0,
   "last_update_time": 0,
-  "layoutMutations": {
-    "bringNodeToFront": [Function],
-    "createLink": [Function],
-    "createNode": [Function],
-    "createReroute": [Function],
-    "deleteLink": [Function],
-    "deleteNode": [Function],
-    "deleteReroute": [Function],
-    "moveNode": [Function],
-    "moveReroute": [Function],
-    "resizeNode": [Function],
-    "setActor": [Function],
-    "setNodeZIndex": [Function],
-    "setSource": [Function],
-  },
   "links": Map {},
   "list_of_graphcanvas": null,
   "nodes_actioning": [],