[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]

src/stores/domWidgetStore.ts

@@ -8,6 +8,8 @@ import type { PositionConfig } from '@/composables/element/useAbsolutePosition'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
 
 export interface DomWidgetState extends PositionConfig {
+  // Raw widget instance
+  widget: BaseDOMWidget<object | string>
   visible: boolean
   readonly: boolean
   zIndex: number
@@ -16,19 +18,12 @@ export interface DomWidgetState extends PositionConfig {
 export const useDomWidgetStore = defineStore('domWidget', () => {
   const widgetStates = ref<Map<string, DomWidgetState>>(new Map())
 
-  // Map to reference actual widget instances
-  // Widgets are stored as raw values to avoid reactivity issues
-  const widgetInstances = ref(new Map<string, BaseDOMWidget<object | string>>())
-
   // Register a widget with the store
   const registerWidget = <V extends object | string>(
     widget: BaseDOMWidget<V>
   ) => {
-    widgetInstances.value.set(
-      widget.id,
-      markRaw(widget) as unknown as BaseDOMWidget<object | string>
-    )
     widgetStates.value.set(widget.id, {
+      widget: markRaw(widget) as unknown as BaseDOMWidget<object | string>,
       visible: true,
       readonly: false,
       zIndex: 0,
@@ -39,13 +34,11 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
 
   // Unregister a widget from the store
   const unregisterWidget = (widgetId: string) => {
-    widgetInstances.value.delete(widgetId)
     widgetStates.value.delete(widgetId)
   }
 
   return {
     widgetStates,
-    widgetInstances,
     registerWidget,
     unregisterWidget
   }