From 80335ac9366724e458c26ea55e24ecfafd297d76 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Thu, 18 Dec 2025 10:49:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20right=20side=20panel=20visual=20indicato?=
 =?UTF-8?q?rs=20don't=20update=20for=20color=20picker=E2=80=A6=20(#7489)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Important code was mistakenly omitted in #7137, which caused this bug.
(@DrJKL )**

The color picker and node state components in the right side properties
panel have a visual indicator bug. While the components function
correctly and successfully change the node values, the visual state
indicators fail to update to reflect the current selection.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7489-fix-right-side-panel-visual-indicators-don-t-update-for-color-picker-2ca6d73d365081489ccdcac69186892f)
by [Unito](https://www.unito.io)
---
 .../rightSidePanel/settings/TabSettings.vue   | 66 ++++++++++++++-----
 1 file changed, 50 insertions(+), 16 deletions(-)

diff --git a/src/components/rightSidePanel/settings/TabSettings.vue b/src/components/rightSidePanel/settings/TabSettings.vue
index b8c1f8797..cf2aeb6a3 100644
--- a/src/components/rightSidePanel/settings/TabSettings.vue
+++ b/src/components/rightSidePanel/settings/TabSettings.vue
@@ -78,7 +78,7 @@
 
 <script setup lang="ts">
 import ToggleSwitch from 'primevue/toggleswitch'
-import { computed } from 'vue'
+import { computed, shallowRef, triggerRef, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -90,10 +90,23 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-const { nodes = [] } = defineProps<{
+const props = defineProps<{
   nodes?: LGraphNode[]
 }>()
 
+/**
+ * This is not random writing. It is very important.
+ * Otherwise, the UI cannot be updated correctly.
+ */
+const targetNodes = shallowRef<LGraphNode[]>([])
+watchEffect(() => {
+  if (props.nodes) {
+    targetNodes.value = props.nodes
+  } else {
+    targetNodes.value = []
+  }
+})
+
 const { t } = useI18n()
 
 const canvasStore = useCanvasStore()
@@ -103,24 +116,33 @@ const isLightTheme = computed(
 )
 
 const nodeState = computed({
-  get(): LGraphNode['mode'] | null {
-    if (!nodes.length) return null
-    if (nodes.length === 1) {
-      return nodes[0].mode
-    }
+  get() {
+    let mode: LGraphNode['mode'] | null = null
+    const nodes = targetNodes.value
+
+    if (nodes.length === 0) return null
 
     // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
-    const mode: LGraphNode['mode'] = nodes[0].mode
-    if (!nodes.every((node) => node.mode === mode)) {
-      return null
+    if (nodes.length > 1) {
+      mode = nodes[0].mode
+      if (!nodes.every((node) => node.mode === mode)) {
+        mode = null
+      }
+    } else {
+      mode = nodes[0].mode
     }
 
     return mode
   },
   set(value: LGraphNode['mode']) {
-    nodes.forEach((node) => {
+    targetNodes.value.forEach((node) => {
       node.mode = value
     })
+    /*
+     * This is not random writing. It is very important.
+     * Otherwise, the UI cannot be updated correctly.
+     */
+    triggerRef(targetNodes)
     canvasStore.canvas?.setDirty(true, true)
   }
 })
@@ -128,10 +150,15 @@ const nodeState = computed({
 // Pinned state
 const isPinned = computed<boolean>({
   get() {
-    return nodes.some((node) => node.pinned)
+    return targetNodes.value.some((node) => node.pinned)
   },
   set(value) {
-    nodes.forEach((node) => node.pin(value))
+    targetNodes.value.forEach((node) => node.pin(value))
+    /*
+     * This is not random writing. It is very important.
+     * Otherwise, the UI cannot be updated correctly.
+     */
+    triggerRef(targetNodes)
     canvasStore.canvas?.setDirty(true, true)
   }
 })
@@ -175,8 +202,10 @@ const colorOptions: NodeColorOption[] = [
 
 const nodeColor = computed<NodeColorOption['name'] | null>({
   get() {
-    if (nodes.length === 0) return null
-    const theColorOptions = nodes.map((item) => item.getColorOption())
+    if (targetNodes.value.length === 0) return null
+    const theColorOptions = targetNodes.value.map((item) =>
+      item.getColorOption()
+    )
 
     let colorOption: ColorOption | null | false = theColorOptions[0]
     if (!theColorOptions.every((option) => option === colorOption)) {
@@ -202,9 +231,14 @@ const nodeColor = computed<NodeColorOption['name'] | null>({
         ? null
         : LGraphCanvas.node_colors[colorName]
 
-    for (const item of nodes) {
+    for (const item of targetNodes.value) {
       item.setColorOption(canvasColorOption)
     }
+    /*
+     * This is not random writing. It is very important.
+     * Otherwise, the UI cannot be updated correctly.
+     */
+    triggerRef(targetNodes)
     canvasStore.canvas?.setDirty(true, true)
   }
 })