[Refactor] Use single map to store dom widget and states (#3703)

src/components/graph/DomWidgets.vue

@@ -2,11 +2,10 @@
   <!-- Create a new stacking context for widgets to avoid z-index issues -->
   <div class="isolate">
     <DomWidget
-      v-for="widget in widgets"
-      :key="widget.id"
-      :widget="widget"
-      :widget-state="domWidgetStore.widgetStates.get(widget.id)!"
-      @update:widget-value="widget.value = $event"
+      v-for="widgetState in widgetStates"
+      :key="widgetState.widget.id"
+      :widget-state="widgetState"
+      @update:widget-value="widgetState.widget.value = $event"
     />
   </div>
 </template>
@@ -17,17 +16,12 @@ import { computed, watch } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { BaseDOMWidget } from '@/scripts/domWidget'
-import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { type DomWidgetState, useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
-const widgets = computed(() =>
-  Array.from(
-    domWidgetStore.widgetInstances.values() as Iterable<
-      BaseDOMWidget<string | object>
-    >
-  )
+const widgetStates = computed(
+  () => Array.from(domWidgetStore.widgetStates.values()) as DomWidgetState[]
 )
 
 const updateWidgets = () => {
@@ -35,11 +29,9 @@ const updateWidgets = () => {
   if (!lgCanvas) return
 
   const lowQuality = lgCanvas.low_quality
-  for (const widget of domWidgetStore.widgetInstances.values()) {
+  for (const widgetState of domWidgetStore.widgetStates.values()) {
+    const widget = widgetState.widget
     const node = widget.node as LGraphNode
-    const widgetState = domWidgetStore.widgetStates.get(widget.id)
-
-    if (!widgetState) continue
 
     const visible =
       lgCanvas.isNodeVisible(node) &&

src/components/graph/widgets/DomWidget.vue

@@ -22,19 +22,15 @@ import { CSSProperties, computed, onMounted, ref, watch } from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useDomClipping } from '@/composables/element/useDomClipping'
-import {
-  type BaseDOMWidget,
-  isComponentWidget,
-  isDOMWidget
-} from '@/scripts/domWidget'
+import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget'
 import { DomWidgetState } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 
-const { widget, widgetState } = defineProps<{
-  widget: BaseDOMWidget<string | object>
+const { widgetState } = defineProps<{
   widgetState: DomWidgetState
 }>()
+const widget = widgetState.widget
 
 const emit = defineEmits<{
   'update:widgetValue': [value: string | object]