refactor: use emit events pattern instead of mutating props in widget components (#8549)

src/components/rightSidePanel/RightSidePanel.vue

@@ -8,6 +8,7 @@ import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
+import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
 import { st } from '@/i18n'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -190,6 +191,12 @@ function handleTitleEdit(newTitle: string) {
 function handleTitleCancel() {
   isEditing.value = false
 }
+
+function handleProxyWidgetsUpdate(value: ProxyWidgetsProperty) {
+  if (!selectedSingleNode.value) return
+  ;(selectedSingleNode.value as SubgraphNode).properties.proxyWidgets = value
+  canvasStore.canvas?.setDirty(true, true)
+}
 </script>
 
 <template>
@@ -283,6 +290,7 @@ function handleTitleCancel() {
         <TabSubgraphInputs
           v-if="activeTab === 'parameters' && isSingleSubgraphNode"
           :node="selectedSingleNode as SubgraphNode"
+          @update:proxy-widgets="handleProxyWidgetsUpdate"
         />
         <TabNormalInputs
           v-else-if="activeTab === 'parameters'"

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -118,6 +118,15 @@ function handleLocateNode() {
   }
 }
 
+function handleWidgetValueUpdate(
+  widget: IBaseWidget,
+  newValue: string | number | boolean | object
+) {
+  widget.value = newValue
+  widget.callback?.(newValue)
+  canvasStore.canvas?.setDirty(true, true)
+}
+
 defineExpose({
   widgetsContainer,
   rootElement
@@ -179,6 +188,7 @@ defineExpose({
             :show-node-name="showNodeName"
             :parents="parents"
             :is-shown-on-parents="isWidgetShownOnParents(node, widget)"
+            @update:widget-value="handleWidgetValueUpdate(widget, $event)"
           />
         </TransitionGroup>
       </div>

src/components/rightSidePanel/parameters/TabSubgraphInputs.vue

@@ -32,6 +32,10 @@ const { node } = defineProps<{
   node: SubgraphNode
 }>()
 
+const emit = defineEmits<{
+  'update:proxyWidgets': [value: ProxyWidgetsProperty]
+}>()
+
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -51,8 +55,7 @@ const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
   set(value?: ProxyWidgetsProperty) {
     trigger()
     if (!value) return
-    // eslint-disable-next-line vue/no-mutating-props
-    node.properties.proxyWidgets = value
+    emit('update:proxyWidgets', value)
   }
 }))
 

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -41,6 +41,10 @@ const {
   isShownOnParents?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:widgetValue': [value: string | number | boolean | object]
+}>()
+
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const favoritedWidgetsStore = useFavoritedWidgetsStore()
@@ -83,10 +87,7 @@ const widgetValue = computed({
     return widget.value
   },
   set: (newValue: string | number | boolean | object) => {
-    // eslint-disable-next-line vue/no-mutating-props
-    widget.value = newValue
-    widget.callback?.(newValue)
-    canvasStore.canvas?.setDirty(true, true)
+    emit('update:widgetValue', newValue)
   }
 })