Dom widget store (#2899)

src/components/graph/DomWidgets.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <DomWidget v-for="widget in widgets" :key="widget.id" :widget="widget" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import DomWidget from '@/components/graph/widgets/DomWidget.vue'
+import { DOMWidget } from '@/scripts/domWidget'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
+
+const domWidgetStore = useDomWidgetStore()
+const widgets = computed(() =>
+  Array.from(
+    domWidgetStore.widgetInstances.values() as Iterable<
+      DOMWidget<HTMLElement, object | string>
+    >
+  )
+)
+</script>

src/components/graph/GraphCanvas.vue

@@ -33,6 +33,7 @@
   </SelectionOverlay>
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeBadge />
+  <DomWidgets />
 </template>
 
 <script setup lang="ts">
@@ -40,6 +41,7 @@ import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
+import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import NodeBadge from '@/components/graph/NodeBadge.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'

src/components/graph/widgets/DomWidget.vue

@@ -0,0 +1,19 @@
+<template>
+  <div ref="widgetElement" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import type { DOMWidget } from '@/scripts/domWidget'
+
+const { widget } = defineProps<{
+  widget: DOMWidget<HTMLElement, any>
+}>()
+
+const widgetElement = ref<HTMLElement>()
+
+onMounted(() => {
+  widgetElement.value.appendChild(widget.element)
+})
+</script>