Manage style of DOM widgets in Vue (#2946)

src/stores/domWidgetStore.ts

@@ -4,9 +4,18 @@
 import { defineStore } from 'pinia'
 import { markRaw, ref } from 'vue'
 
+import type { PositionConfig } from '@/composables/element/useAbsolutePosition'
 import type { DOMWidget } from '@/scripts/domWidget'
 
+export interface DomWidgetState extends PositionConfig {
+  visible: boolean
+  readonly: boolean
+  zIndex: number
+}
+
 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(
@@ -21,14 +30,23 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
       widget.id,
       markRaw(widget as unknown as DOMWidget<HTMLElement, object | string>)
     )
+    widgetStates.value.set(widget.id, {
+      visible: true,
+      readonly: false,
+      zIndex: 0,
+      pos: [0, 0],
+      size: [0, 0]
+    })
   }
 
   // Unregister a widget from the store
   const unregisterWidget = (widgetId: string) => {
     widgetInstances.value.delete(widgetId)
+    widgetStates.value.delete(widgetId)
   }
 
   return {
+    widgetStates,
     widgetInstances,
     registerWidget,
     unregisterWidget