Basic widget toggling

src/components/selectionbar/SubgraphNode.vue

@@ -47,13 +47,14 @@ const widgetTree = computed(() => {
     items.value = null
     return
   }
+  node.widgets ??= []
   const intn = interiorNodes.map((n) =>
-    n.widgets?.map((w) => [n.id, n.title, w.name]) ?? []).flat(1)
+    n.widgets?.map((w) => [n, w, node]) ?? []).flat(1)
   //items.value = intn
   //TODO: filter enabled/disabled items while keeping order
   console.log(intn)
   return buildTree(intn, (item: [unknown, unknown]) =>
-    [`${item[1]}: ${item[2]}`]
+    [`${item[0].title}: ${item[1].name}`]
   )
 })
 
@@ -70,19 +71,10 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
       data: node.data,
       label: node.label,
       getIcon() {
-        if (this.leaf) {
-          return 'pi pi-circle-fill'
-        }
+          return 'pi pi-minus'
       },
       children,
-      draggable: node.leaf,
-      handleClick(e: MouseEvent) {
-        if (this.leaf) {
-          //FIXME Implement
-        } else {
-          toggleNodeOnEvent(e, this)
-        }
-      }
+      draggable: true,
     }
   }
   console.log(widgetTree.value)

src/components/selectionbar/SubgraphNodeWidget.vue

@@ -4,19 +4,30 @@
       <template #actions>
         <Button
           size="small"
-          :icon="'pi pi-bookmark-fill'"
           text
           severity="secondary"
           @click.stop="onClick"
-        />
+        >
+          <i-lucide:eye-off v-if="isShown"/>
+          <i-lucide:eye v-else/>
+        </Button>
       </template>
     </TreeExplorerTreeNode>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import Button from 'primevue/button'
 
+function hasWidget() {
+  const node = props.node.data[2]
+  const name = props.node.data[1].name
+  return node.widgets.some((w) => w.name === name)
+}
+
+let isShown = ref(false)
+
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
@@ -24,7 +35,26 @@ const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
 }>()
 
+onMounted(() => {
+  isShown.value = hasWidget()
+})
+
 function onClick(e) {
+  const nodeId = props.node.data[0].id
+  const widgetName = props.node.data[1].name
+  const node = props.node.data[2]
+
+  console.log(isShown.value)
+  if (!isShown.value) {
+    node.addProxyWidget(`${nodeId}`, widgetName)
+    isShown.value = true
+  } else {
+    //FIXME: widget name collisions
+    const index = node.widgets.findIndex((w) => w.name === widgetName)
+    if (index < 0) throw new Error("Can't disable missing widget")
+    node.widgets.splice(index, 1)
+    isShown.value = false
+  }
 }
 </script>
 

src/composables/sidebarTabs/useSubgraphNodeTab.ts

@@ -7,13 +7,13 @@ import type { SidebarTabExtension } from '@/types/extensionTypes'
 export const useSubgraphNodeTab = (): SidebarTabExtension => {
   return {
     id: 'sgn',
-    icon: 'pi pi-history',
+    icon: 'pi pi-chart-bar',
     iconBadge: () => {
       return null
     },
-    title: 'sideToolbar.queue',
-    tooltip: 'sideToolbar.queue',
-    label: 'sideToolbar.labels.queue',
+    title: 'subgraph widgets',
+    tooltip: 'Change displayed subgraph widgets',
+    label: 'subgraph widgets',
     component: markRaw(SubgraphNode),
     type: 'vue'
   }