Extract tree expand/collapse logic as hook (#618)

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -97,10 +97,12 @@ import { useSettingStore } from '@/stores/settingStore'
 import { app } from '@/scripts/app'
 import { sortedTree } from '@/utils/treeUtil'
 import _ from 'lodash'
+import { useTreeExpansion } from '@/hooks/treeHooks'
 
 const nodeDefStore = useNodeDefStore()
+const { expandedKeys, expandNode, onNonLeafClick } = useTreeExpansion()
+
 const alphabeticalSort = ref(false)
-const expandedKeys = ref({})
 const hoveredComfyNodeName = ref<string | null>(null)
 const hoveredComfyNode = computed<ComfyNodeDefImpl | null>(() => {
   if (!hoveredComfyNodeName.value) {
@@ -232,22 +234,6 @@ const handleNodeHover = async (
   }
 }
 
-const toggleNode = (node: TreeNode) => {
-  if (node.key in expandedKeys.value) {
-    delete expandedKeys.value[node.key]
-  } else {
-    expandedKeys.value[node.key] = true
-  }
-}
-
-const toggleNodeRecursive = (node: TreeNode) => {
-  if (node.key in expandedKeys.value) {
-    collapseNode(node)
-  } else {
-    expandNode(node)
-  }
-}
-
 const insertNode = (nodeDef: ComfyNodeDefImpl) => {
   app.addNodeOnGraph(nodeDef, { pos: app.getCanvasCenter() })
 }
@@ -268,34 +254,10 @@ const handleSearch = (query: string) => {
   expandNode(filteredRoot.value)
 }
 
-const expandNode = (node: TreeNode) => {
-  if (node.children && node.children.length) {
-    expandedKeys.value[node.key] = true
-
-    for (let child of node.children) {
-      expandNode(child)
-    }
-  }
-}
-
-const collapseNode = (node: TreeNode) => {
-  if (node.children && node.children.length) {
-    delete expandedKeys.value[node.key]
-
-    for (let child of node.children) {
-      collapseNode(child)
-    }
-  }
-}
-
 const onNodeContentClick = (e: MouseEvent, node: TreeNode) => {
   if (!node.key) return
   if (node.type === 'folder') {
-    if (e.ctrlKey) {
-      toggleNodeRecursive(node)
-    } else {
-      toggleNode(node)
-    }
+    onNonLeafClick(e, node)
   } else {
     insertNode(node.data)
   }

src/hooks/treeHooks.ts

@@ -0,0 +1,73 @@
+import { ref } from 'vue'
+import type { TreeNode } from 'primevue/treenode'
+
+export function useTreeExpansion() {
+  const expandedKeys = ref<Record<string, boolean>>({})
+
+  const toggleNode = (node: TreeNode) => {
+    if (node.key && typeof node.key === 'string') {
+      if (node.key in expandedKeys.value) {
+        delete expandedKeys.value[node.key]
+      } else {
+        expandedKeys.value[node.key] = true
+      }
+    }
+  }
+
+  const toggleNodeRecursive = (node: TreeNode) => {
+    if (node.key && typeof node.key === 'string') {
+      if (node.key in expandedKeys.value) {
+        collapseNode(node)
+      } else {
+        expandNode(node)
+      }
+    }
+  }
+
+  const expandNode = (node: TreeNode) => {
+    if (
+      node.key &&
+      typeof node.key === 'string' &&
+      node.children &&
+      node.children.length
+    ) {
+      expandedKeys.value[node.key] = true
+
+      for (const child of node.children) {
+        expandNode(child)
+      }
+    }
+  }
+
+  const collapseNode = (node: TreeNode) => {
+    if (
+      node.key &&
+      typeof node.key === 'string' &&
+      node.children &&
+      node.children.length
+    ) {
+      delete expandedKeys.value[node.key]
+
+      for (const child of node.children) {
+        collapseNode(child)
+      }
+    }
+  }
+
+  const onNonLeafClick = (e: MouseEvent, node: TreeNode) => {
+    if (e.ctrlKey) {
+      toggleNodeRecursive(node)
+    } else {
+      toggleNode(node)
+    }
+  }
+
+  return {
+    expandedKeys,
+    toggleNode,
+    toggleNodeRecursive,
+    expandNode,
+    collapseNode,
+    onNonLeafClick
+  }
+}