[Refactor] Generate DOM widget id in constructor (#3508)

Author: huchenlei

src/composables/widgets/useComboWidget.ts

@@ -18,7 +18,6 @@ import {
   type ComfyWidgetConstructorV2,
   addValueControlWidgets
 } from '@/scripts/widgets'
-import { generateUUID } from '@/utils/formatUtil'
 
 import { useRemoteWidget } from './useRemoteWidget'
 
@@ -32,7 +31,6 @@ const getDefaultValue = (inputSpec: ComboInputSpec) => {
 const addMultiSelectWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
   const widgetValue = ref<string[]>([])
   const widget = new ComponentWidgetImpl({
-    id: generateUUID(),
     node,
     name: inputSpec.name,
     component: MultiSelectWidget,

src/extensions/core/load3d.ts

@@ -14,7 +14,6 @@ import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useToastStore } from '@/stores/toastStore'
-import { generateUUID } from '@/utils/formatUtil'
 
 useExtensionService().registerExtension({
   name: 'Comfy.Load3D',
@@ -118,7 +117,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3D,
@@ -259,7 +257,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3DAnimation,
@@ -355,7 +352,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3D,
@@ -432,7 +428,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3DAnimation,

src/extensions/core/saveMesh.ts

@@ -7,7 +7,6 @@ import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
-import { generateUUID } from '@/utils/formatUtil'
 
 useExtensionService().registerExtension({
   name: 'Comfy.SaveGLB',
@@ -30,7 +29,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3D,

src/scripts/domWidget.ts

@@ -103,7 +103,6 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
   readonly node: LGraphNode
 
   constructor(obj: {
-    id: string
     node: LGraphNode
     name: string
     type: string
@@ -114,7 +113,7 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
     this.name = obj.name
     this.options = obj.options
 
-    this.id = obj.id
+    this.id = generateUUID()
     this.node = obj.node
   }
 
@@ -172,7 +171,6 @@ export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
   readonly element: T
 
   constructor(obj: {
-    id: string
     node: LGraphNode
     name: string
     type: string
@@ -235,7 +233,6 @@ export class ComponentWidgetImpl<V extends object | string>
   readonly inputSpec: InputSpec
 
   constructor(obj: {
-    id: string
     node: LGraphNode
     name: string
     component: Component
@@ -293,7 +290,6 @@ LGraphNode.prototype.addDOMWidget = function <
   options: DOMWidgetOptions<V> = {}
 ): DOMWidget<T, V> {
   const widget = new DOMWidgetImpl({
-    id: generateUUID(),
     node: this,
     name,
     type,