refactor: centralized node mode management

src/components/rightSidePanel/settings/SetNodeState.vue

@@ -4,44 +4,41 @@ import { useI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import FormSelectButton from '@/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue'
 
 import LayoutField from './LayoutField.vue'
 
-/**
- * Good design limits dependencies and simplifies the interface of the abstraction layer.
- * Here, we only care about the mode method,
- * and do not concern ourselves with other methods.
- */
-type PickedNode = Pick<LGraphNode, 'mode'>
-
-const { nodes } = defineProps<{ nodes: PickedNode[] }>()
+const { nodes } = defineProps<{ nodes: LGraphNode[] }>()
 const emit = defineEmits<{ (e: 'changed'): void }>()
 
 const { t } = useI18n()
 
 const nodeState = computed({
   get() {
-    let mode: LGraphNode['mode'] | null = null
-
     if (nodes.length === 0) return null
 
-    // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
-    if (nodes.length > 1) {
-      mode = nodes[0].mode
-      if (!nodes.every((node) => node.mode === mode)) {
-        mode = null
-      }
-    } else {
-      mode = nodes[0].mode
-    }
+    const nodeIds = nodes.map((node) => node.id.toString())
+    const modes = nodeIds
+      .map((nodeId) => {
+        const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+        return nodeRef.value?.mode
+      })
+      .filter((mode): mode is number => mode !== undefined && mode !== null)
 
-    return mode
+    if (modes.length === 0) return null
+
+    // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
+    const firstMode = modes[0]
+    const allSame = modes.every((mode) => mode === firstMode)
+
+    return allSame ? firstMode : null
   },
   set(value: LGraphNode['mode']) {
-    nodes.forEach((node) => {
-      node.mode = value
-    })
+    if (value === null || value === undefined) return
+
+    const nodeIds = nodes.map((node) => node.id.toString())
+    layoutStore.setNodesMode(nodeIds, value)
     emit('changed')
   }
 })