Add Comfy.Workflow.SortNodeIdOnSave setting (#502)

* Update litegraph (Sort order)

* nit

* Add sort node on save setting

* nit

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.2.27",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-        "@comfyorg/litegraph": "^0.7.46",
+        "@comfyorg/litegraph": "^0.7.47",
         "@primevue/themes": "^4.0.0-rc.2",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vueuse/core": "^11.0.0",
@@ -1880,9 +1880,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.7.46",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.46.tgz",
-      "integrity": "sha512-/AHVPbehMmE2uNRufWNLVN65Jh7vOtVtQGTGvzqv/jVNPyqkuhU93NmZwYk2cfL2irwyIBUrGmh2zp6cVcqY/Q==",
+      "version": "0.7.47",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.47.tgz",
+      "integrity": "sha512-MCN2cF6XK2tMFLad0OQhDT1kGSO99ixGLpDszh6TVbZLGawq/2kjL6bnynOv/tGoBzVTFVZZnI7JkmlDijm9MA==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@comfyorg/litegraph": "^0.7.46",
+    "@comfyorg/litegraph": "^0.7.47",
     "@primevue/themes": "^4.0.0-rc.2",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",

src/scripts/app.ts

@@ -1925,7 +1925,10 @@ export class ComfyApp {
 
     // Save current workflow automatically
     setInterval(() => {
-      const workflow = JSON.stringify(this.graph.serialize())
+      const sortNodes =
+        this.vueAppReady &&
+        useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')
+      const workflow = JSON.stringify(this.graph.serialize({ sortNodes }))
       localStorage.setItem('workflow', workflow)
       if (api.clientId) {
         sessionStorage.setItem(`workflow:${api.clientId}`, workflow)
@@ -2396,7 +2399,10 @@ export class ComfyApp {
       }
     }
 
-    const workflow = graph.serialize()
+    const sortNodes =
+      this.vueAppReady &&
+      useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')
+    const workflow = graph.serialize({ sortNodes })
     const output = {}
     // Process nodes in order of execution
     for (const outerNode of graph.computeExecutionOrder(false)) {

src/stores/settingStore.ts

@@ -117,6 +117,13 @@ export const useSettingStore = defineStore('setting', {
           max: 24
         }
       })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.Workflow.SortNodeIdOnSave',
+        name: 'Sort node IDs on save',
+        type: 'boolean',
+        defaultValue: false
+      })
     },
 
     set<K extends keyof Settings>(key: K, value: Settings[K]) {

src/types/apiTypes.ts

@@ -426,7 +426,8 @@ const zSettings = z.record(z.any()).and(
       'Comfy.SnapToGrid.GridSize': z.number(),
       'Comfy.TextareaWidget.FontSize': z.number(),
       'Comfy.UseNewMenu': z.any(),
-      'Comfy.Validation.Workflows': z.boolean()
+      'Comfy.Validation.Workflows': z.boolean(),
+      'Comfy.Workflow.SortNodeIdOnSave': z.boolean()
     })
     .optional()
 )

tests-ui/tests/litegraph.test.ts

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