Use uuid for dom widget id (#2947)

src/scripts/domWidget.ts

@@ -8,7 +8,7 @@ import _ from 'lodash'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { app } from '@/scripts/app'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-import { generateRandomSuffix } from '@/utils/formatUtil'
+import { generateUUID } from '@/utils/formatUtil'
 
 export interface DOMWidget<T extends HTMLElement, V extends object | string>
   extends ICustomWidget<T> {
@@ -189,9 +189,9 @@ LGraphNode.prototype.addDOMWidget = function <
   if (tooltip && !element.title) {
     element.title = tooltip
   }
-
+  // Note: Before `LGraphNode.configure` is called, `this.id` is always `-1`.
   const widget = new DOMWidgetImpl({
-    id: `${this.id}:${name}:${generateRandomSuffix()}`,
+    id: generateUUID(),
     node: this,
     name,
     type,

src/utils/formatUtil.ts

@@ -316,10 +316,25 @@ export const paramsToCacheKey = (params: unknown): string => {
 }
 
 /**
- * Generates a random 4-character string to use as a unique suffix
+ * Generates a RFC4122 compliant UUID v4 using the native crypto API when available
+ * @returns A properly formatted UUID string
  */
-export const generateRandomSuffix = (): string =>
-  Math.random().toString(36).substring(2, 6)
+export const generateUUID = (): string => {
+  // Use native crypto.randomUUID() if available (modern browsers)
+  if (
+    typeof crypto !== 'undefined' &&
+    typeof crypto.randomUUID === 'function'
+  ) {
+    return crypto.randomUUID()
+  }
+
+  // Fallback implementation for older browsers
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
 
 /**
  * Formats a number to a locale-specific string