diff --git a/src/components/graph/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index e93c87b3d..af422fe6d 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -2,11 +2,10 @@
@@ -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
- >
- )
+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) &&
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index 5a12e3c69..a03121a45 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/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
+const { widgetState } = defineProps<{
widgetState: DomWidgetState
}>()
+const widget = widgetState.widget
const emit = defineEmits<{
'update:widgetValue': [value: string | object]
diff --git a/src/stores/domWidgetStore.ts b/src/stores/domWidgetStore.ts
index 3e5d1e15f..c02d552f7 100644
--- a/src/stores/domWidgetStore.ts
+++ b/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