From d8887a434d4aff1bce938e1ed5a5f0c0068131a8 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sat, 17 Aug 2024 23:23:40 -0400
Subject: [PATCH] Add Comfy.Workflow.SortNodeIdOnSave setting (#502)

* Update litegraph (Sort order)

* nit

* Add sort node on save setting

* nit
---
 package-lock.json                |  8 ++++----
 package.json                     |  2 +-
 src/scripts/app.ts               | 10 ++++++++--
 src/stores/settingStore.ts       |  7 +++++++
 src/types/apiTypes.ts            |  3 ++-
 tests-ui/tests/litegraph.test.ts |  6 +++---
 6 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 30c623738f..fffa586ab2 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/package.json b/package.json
index bc211bd54f..70e6a6be4d 100644
--- a/package.json
+++ b/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",
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 927e264942..6f9cef773f 100644
--- a/src/scripts/app.ts
+++ b/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)) {
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 44ac9dce8f..869c8ed8e5 100644
--- a/src/stores/settingStore.ts
+++ b/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]) {
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index c350b8da5f..6ce36155e4 100644
--- a/src/types/apiTypes.ts
+++ b/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()
 )
diff --git a/tests-ui/tests/litegraph.test.ts b/tests-ui/tests/litegraph.test.ts
index 917c570cbf..dbcfcf5731 100644
--- a/tests-ui/tests/litegraph.test.ts
+++ b/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)
   })