Update litegraph (Getters) (#829)

* Update litegraph (Getters)

* Update

browser_tests/ComfyPage.ts

@@ -172,7 +172,7 @@ export class ComfyPage {
 
   async getGraphNodesCount(): Promise<number> {
     return await this.page.evaluate(() => {
-      return window['app']?.graph?._nodes?.length || 0
+      return window['app']?.graph?.nodes?.length || 0
     })
   }
 

browser_tests/nodeBadge.spec.ts

@@ -10,7 +10,7 @@ test.describe('Node Badge', () => {
       const app = window['app'] as ComfyApp
       const graph = app.graph
       // @ts-expect-error - accessing private property
-      const nodes = graph._nodes
+      const nodes = graph.nodes
 
       for (const node of nodes) {
         node.badges = [new LGraphBadge({ text: 'Test Badge' })]
@@ -28,7 +28,7 @@ test.describe('Node Badge', () => {
       const app = window['app'] as ComfyApp
       const graph = app.graph
       // @ts-expect-error - accessing private property
-      const nodes = graph._nodes
+      const nodes = graph.nodes
 
       for (const node of nodes) {
         node.badges = [
@@ -49,7 +49,7 @@ test.describe('Node Badge', () => {
       const app = window['app'] as ComfyApp
       const graph = app.graph
       // @ts-expect-error - accessing private property
-      const nodes = graph._nodes
+      const nodes = graph.nodes
 
       for (const node of nodes) {
         node.badges = [new LGraphBadge({ text: 'Test Badge' })]

package.json

@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@comfyorg/litegraph": "^0.7.71",
+    "@comfyorg/litegraph": "^0.7.73",
     "@primevue/themes": "^4.0.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",

src/extensions/core/groupNode.ts

@@ -17,8 +17,7 @@ const Workflow = {
     const id = `workflow/${name}`
     // Check if lready registered/in use in this workflow
     if (app.graph.extra?.groupNodes?.[name]) {
-      // @ts-expect-error
-      if (app.graph._nodes.find((n) => n.type === id)) {
+      if (app.graph.nodes.find((n) => n.type === id)) {
         return Workflow.InUse.InWorkflow
       } else {
         return Workflow.InUse.Registered

src/extensions/core/groupNodeManage.ts

@@ -388,8 +388,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
           'button.comfy-btn',
           {
             onclick: (e) => {
-              // @ts-expect-error
-              const node = app.graph._nodes.find(
+              const node = app.graph.nodes.find(
                 (n) => n.type === 'workflow/' + this.selectedGroup
               )
               if (node) {
@@ -470,8 +469,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
                 types[g] = type
 
                 if (!nodesByType) {
-                  // @ts-expect-error
-                  nodesByType = app.graph._nodes.reduce((p, n) => {
+                  nodesByType = app.graph.nodes.reduce((p, n) => {
                     p[n.type] ??= []
                     p[n.type].push(n)
                     return p

src/extensions/core/groupOptions.ts

@@ -15,7 +15,7 @@ function addNodesToGroup(group, nodes = []) {
   x1 = y1 = x2 = y2 = -1
   nx1 = ny1 = nx2 = ny2 = -1
 
-  for (var n of [group._nodes, nodes]) {
+  for (var n of [group.nodes, nodes]) {
     for (var i in n) {
       node = n[i]
 
@@ -90,7 +90,7 @@ app.registerExtension({
 
       // Group nodes aren't recomputed until the group is moved, this ensures the nodes are up-to-date
       group.recomputeInsideNodes()
-      const nodesInGroup = group._nodes
+      const nodesInGroup = group.nodes
 
       options.push({
         content: 'Add Selected Nodes To Group',

src/extensions/core/snapToGrid.ts

@@ -137,7 +137,7 @@ app.registerExtension({
         // After moving a group (while app.shiftDown), snap all the child nodes and, finally,
         //  align the group itself.
         this.recomputeInsideNodes()
-        for (const node of this._nodes) {
+        for (const node of this.nodes) {
           node.alignToGrid()
         }
         LGraphNode.prototype.alignToGrid.apply(this)
@@ -178,8 +178,7 @@ app.registerExtension({
     LGraphCanvas.onGroupAdd = function () {
       const v = onGroupAdd.apply(app.canvas, arguments)
       if (app.shiftDown) {
-        // @ts-expect-error
-        const lastGroup = app.graph._groups[app.graph._groups.length - 1]
+        const lastGroup = app.graph.groups[app.graph.groups.length - 1]
         if (lastGroup) {
           roundVectorToGrid(lastGroup.pos)
           roundVectorToGrid(lastGroup.size)

src/extensions/core/widgetInputs.ts

@@ -827,8 +827,7 @@ app.registerExtension({
     }
 
     function isNodeAtPos(pos) {
-      // @ts-expect-error Fix litegraph types
-      for (const n of app.graph._nodes) {
+      for (const n of app.graph.nodes) {
         if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
           return true
         }

src/scripts/app.ts

@@ -1396,7 +1396,7 @@ export class ComfyApp {
         return
       }
 
-      var groups = this.graph._groups
+      var groups = this.graph.groups
 
       ctx.save()
       ctx.globalAlpha = 0.7 * this.editor_alpha
@@ -1632,8 +1632,7 @@ export class ComfyApp {
 
     api.addEventListener('execution_start', ({ detail }) => {
       this.lastExecutionError = null
-      // @ts-expect-error
-      this.graph._nodes.forEach((node) => {
+      this.graph.nodes.forEach((node) => {
         // @ts-expect-error
         if (node.onExecutionStart)
           // @ts-expect-error
@@ -1690,17 +1689,15 @@ export class ComfyApp {
     // @ts-expect-error
     app.graph.onConfigure = function () {
       // Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
-      // @ts-expect-error
-      for (const node of app.graph._nodes) {
+      for (const node of app.graph.nodes) {
         // @ts-expect-error
         node.onGraphConfigured?.()
       }
 
       const r = onConfigure?.apply(this, arguments)
 
       // Fire after onConfigure, used by primitives to generate widget using input nodes config
-      // @ts-expect-error _nodes is private.
-      for (const node of app.graph._nodes) {
+      for (const node of app.graph.nodes) {
         node.onAfterGraphConfigured?.()
       }
 
@@ -2334,8 +2331,7 @@ export class ComfyApp {
 
       return
     }
-    // @ts-expect-error
-    for (const node of this.graph._nodes) {
+    for (const node of this.graph.nodes) {
       const size = node.computeSize()
       size[0] = Math.max(node.size[0], size[0])
       size[1] = Math.max(node.size[1], size[1])
@@ -2893,10 +2889,8 @@ export class ComfyApp {
     for (const nodeId in defs) {
       this.registerNodeDef(nodeId, defs[nodeId])
     }
-    // @ts-expect-error
-    for (let nodeNum in this.graph._nodes) {
-      // @ts-expect-error
-      const node = this.graph._nodes[nodeNum]
+    for (let nodeNum in this.graph.nodes) {
+      const node = this.graph.nodes[nodeNum]
       const def = defs[node.type]
       // @ts-expect-error
       // Allow primitive nodes to handle refresh

src/scripts/domWidget.ts

@@ -224,8 +224,8 @@ const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes
 //@ts-ignore
 LGraphCanvas.prototype.computeVisibleNodes = function (): LGraphNode[] {
   const visibleNodes = computeVisibleNodes.apply(this, arguments)
-  // @ts-expect-error
-  for (const node of app.graph._nodes) {
+
+  for (const node of app.graph.nodes) {
     if (elementWidgets.has(node)) {
       const hidden = visibleNodes.indexOf(node) === -1
       for (const w of node.widgets) {
@@ -354,8 +354,7 @@ LGraphNode.prototype.addDOMWidget = function (
         width: `${widgetWidth - margin * 2}px`,
         height: `${(widget.computedHeight ?? 50) - margin * 2}px`,
         position: 'absolute',
-        // @ts-expect-error
-        zIndex: app.graph._nodes.indexOf(node)
+        zIndex: app.graph.nodes.indexOf(node)
       })
 
       if (enableDomClipping) {

src/scripts/utils.ts

@@ -56,14 +56,12 @@ export function applyTextReplacements(app: ComfyApp, value: string): string {
     }
 
     // Find node with matching S&R property name
-    // @ts-expect-error
-    let nodes = app.graph._nodes.filter(
+    let nodes = app.graph.nodes.filter(
       (n) => n.properties?.['Node name for S&R'] === split[0]
     )
     // If we cant, see if there is a node with that title
     if (!nodes.length) {
-      // @ts-expect-error
-      nodes = app.graph._nodes.filter((n) => n.title === split[0])
+      nodes = app.graph.nodes.filter((n) => n.title === split[0])
     }
     if (!nodes.length) {
       console.warn('Unable to find node', split[0])

src/scripts/widgets.ts

@@ -361,7 +361,7 @@ export function initWidgets(app) {
     options: ['before', 'after'],
     onChange(value) {
       controlValueRunBefore = value === 'before'
-      for (const n of app.graph._nodes) {
+      for (const n of app.graph.nodes) {
         if (!n.widgets) continue
         for (const w of n.widgets) {
           if (w[IS_CONTROL_WIDGET]) {

tests-ui/tests/groupNode.test.ts

@@ -518,8 +518,8 @@ describe('group node', () => {
       vaeReroute
     ])
     group1.menu.Clone.call()
-    expect(app.graph._nodes).toHaveLength(4)
-    const group2 = graph.find(app.graph._nodes[3])
+    expect(app.graph.nodes).toHaveLength(4)
+    const group2 = graph.find(app.graph.nodes[3])
     expect(group2.node.type).toEqual('workflow/test')
     expect(group2.id).not.toEqual(group1.id)
 
@@ -679,8 +679,8 @@ describe('group node', () => {
 
     // Clone the node
     group1.menu.Clone.call()
-    expect(app.graph._nodes).toHaveLength(3)
-    const group2 = graph.find(app.graph._nodes[2])
+    expect(app.graph.nodes).toHaveLength(3)
+    const group2 = graph.find(app.graph.nodes[2])
     expect(group2.node.type).toEqual('workflow/test')
     expect(group2.id).not.toEqual(group1.id)
 

tests-ui/tests/litegraph.test.ts

@@ -32,7 +32,7 @@ describe('LGraph', () => {
     const result1 = graph.serialize({ sortNodes: true })
     expect(result1.nodes).not.toHaveLength(0)
     // @ts-expect-error Access private property.
-    graph._nodes = swapNodes(graph._nodes)
+    graph._nodes = swapNodes(graph.nodes)
     const result2 = graph.serialize({ sortNodes: true })
 
     expect(result1).toEqual(result2)

tests-ui/utils/ezgraph.ts

@@ -353,7 +353,7 @@ export class EzGraph {
   }
 
   get nodes() {
-    return this.app.graph._nodes.map((n) => new EzNode(this.app, n))
+    return this.app.graph.nodes.map((n) => new EzNode(this.app, n))
   }
 
   clear() {