From bdffdc9f100dc5cefc3c16806ad3f5546edbb8f8 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Sat, 12 Apr 2025 21:01:31 -0400
Subject: [PATCH] [Bug] Fix configure of non-serializable widget (#921)

Follow up on https://github.com/Comfy-Org/litegraph.js/pull/915

Filter out non-serializable widgets during node configuration. Current
usage in frontend should not be affected as preview media widgets are
mostly dynamically added at the end of widget list.
---
 src/LGraphNode.ts       |  3 ++-
 test/LGraphNode.test.ts | 53 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts
index 6b06901ee..b904e7d7a 100644
--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -731,8 +731,9 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
       }
 
       if (info.widgets_values) {
+        const widgetsWithValue = this.widgets.filter(w => w.serialize !== false)
         for (let i = 0; i < info.widgets_values.length; ++i) {
-          const widget = this.widgets[i]
+          const widget = widgetsWithValue[i]
           if (widget) {
             widget.value = info.widgets_values[i]
           }
diff --git a/test/LGraphNode.test.ts b/test/LGraphNode.test.ts
index 21235884e..f2967a567 100644
--- a/test/LGraphNode.test.ts
+++ b/test/LGraphNode.test.ts
@@ -399,4 +399,57 @@ describe("LGraphNode", () => {
       ])
     })
   })
+
+  describe("widget serialization", () => {
+    test("should only serialize widgets with serialize flag not set to false", () => {
+      const node = new LGraphNode("TestNode")
+      node.serialize_widgets = true
+
+      // Add widgets with different serialization settings
+      node.addWidget("number", "serializable1", 1, null)
+      node.addWidget("number", "serializable2", 2, null)
+      node.addWidget("number", "non-serializable", 3, null)
+      expect(node.widgets?.length).toBe(3)
+
+      // Set serialize flag to false for the last widget
+      node.widgets![2].serialize = false
+
+      // Set some widget values
+      node.widgets![0].value = 10
+      node.widgets![1].value = 20
+      node.widgets![2].value = 30
+
+      // Serialize the node
+      const serialized = node.serialize()
+
+      // Check that only serializable widgets' values are included
+      expect(serialized.widgets_values).toEqual([10, 20])
+      expect(serialized.widgets_values).toHaveLength(2)
+    })
+
+    test("should only configure widgets with serialize flag not set to false", () => {
+      const node = new LGraphNode("TestNode")
+      node.serialize_widgets = true
+
+      node.addWidget("number", "non-serializable", 1, null)
+      node.addWidget("number", "serializable1", 2, null)
+      expect(node.widgets?.length).toBe(2)
+
+      node.widgets![0].serialize = false
+      node.configure({
+        id: 1,
+        type: "TestNode",
+        pos: [100, 100],
+        size: [100, 100],
+        flags: {},
+        properties: {},
+        order: 0,
+        mode: 0,
+        widgets_values: [100],
+      })
+
+      expect(node.widgets![0].value).toBe(1)
+      expect(node.widgets![1].value).toBe(100)
+    })
+  })
 })