fix: Subgraph edit toggle logic

Author: DrJKL

src/components/rightSidePanel/RightSidePanel.vue

@@ -10,6 +10,7 @@ import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -54,8 +55,13 @@ function closePanel() {
   rightSidePanelStore.closePanel()
 }
 
-const tabs = computed<{ label: () => string; value: string }[]>(() => {
-  const list = [
+type RightSidePanelTabList = Array<{
+  label: () => string
+  value: RightSidePanelTab
+}>
+
+const tabs = computed<RightSidePanelTabList>(() => {
+  const list: RightSidePanelTabList = [
     {
       label: () => t('rightSidePanel.parameters'),
       value: 'parameters'
@@ -108,7 +114,11 @@ watchEffect(() => {
                   : 'bg-secondary-background'
               )
             "
-            @click="isEditingSubgraph = !isEditingSubgraph"
+            @click="
+              rightSidePanelStore.openPanel(
+                isEditingSubgraph ? 'parameters' : 'subgraph'
+              )
+            "
           >
             <i class="icon-[lucide--settings-2]" />
           </IconButton>
@@ -124,11 +134,15 @@ watchEffect(() => {
           </IconButton>
         </div>
       </div>
-      <nav
-        v-if="hasSelection && !(isSubgraphNode && isEditingSubgraph)"
-        class="px-4 pb-2 pt-1"
-      >
-        <TabList v-model="activeTab">
+      <nav v-if="hasSelection" class="px-4 pb-2 pt-1">
+        <TabList
+          v-model="activeTab"
+          @update:model-value="
+            (newTab) => {
+              rightSidePanelStore.openPanel(newTab as RightSidePanelTab)
+            }
+          "
+        >
           <Tab
             v-for="tab in tabs"
             :key="tab.value"

src/stores/workspace/rightSidePanelStore.ts

@@ -1,35 +1,26 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
-type RightSidePanelTab = 'parameters' | 'settings' | 'info' | 'subgraph'
+export type RightSidePanelTab = 'parameters' | 'settings' | 'info' | 'subgraph'
 
 /**
  * Store for managing the right side panel state.
  * This panel displays properties and settings for selected nodes.
  */
 export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
-  // Panel visibility state
   const isOpen = ref(false)
-  const isEditingSubgraph = ref(false)
-
-  // Active tab in the node properties panel
   const activeTab = ref<RightSidePanelTab>('parameters')
+  const isEditingSubgraph = computed(() => activeTab.value === 'subgraph')
 
-  // Actions
   function openPanel(tab?: RightSidePanelTab) {
     isOpen.value = true
-    if (tab === 'subgraph') {
-      activeTab.value = 'parameters'
-      isEditingSubgraph.value = true
-    } else if (tab) {
+    if (tab) {
       activeTab.value = tab
-      isEditingSubgraph.value = false
     }
   }
 
   function closePanel() {
     isOpen.value = false
-    isEditingSubgraph.value = false
   }
 
   function togglePanel() {