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 visible: boolean readonly: boolean zIndex: number @@ -16,19 +18,12 @@ export interface DomWidgetState extends PositionConfig { export const useDomWidgetStore = defineStore('domWidget', () => { const widgetStates = ref>(new Map()) - // Map to reference actual widget instances - // Widgets are stored as raw values to avoid reactivity issues - const widgetInstances = ref(new Map>()) - // Register a widget with the store const registerWidget = ( widget: BaseDOMWidget ) => { - widgetInstances.value.set( - widget.id, - markRaw(widget) as unknown as BaseDOMWidget - ) widgetStates.value.set(widget.id, { + widget: markRaw(widget) as unknown as BaseDOMWidget, 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 }