Refactor TreeExplorer (Add handleClick hook)

Author: huchenlei

src/components/common/TreeExplorer.vue

@@ -3,6 +3,7 @@
     class="tree-explorer"
     :class="props.class"
     v-model:expandedKeys="expandedKeys"
+    v-model:selectionKeys="selectionKeys"
     :value="renderedRoots"
     selectionMode="single"
     :pt="{
@@ -42,11 +43,12 @@ import type {
 } from '@/types/treeExplorerTypes'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { useI18n } from 'vue-i18n'
-import { useToast } from 'primevue/usetoast'
 import { useErrorHandling } from '@/hooks/errorHooks'
 
 const expandedKeys = defineModel<Record<string, boolean>>('expandedKeys')
 provide('expandedKeys', expandedKeys)
+const selectionKeys = defineModel<Record<string, boolean>>('selectionKeys')
+provide('selectionKeys', selectionKeys)
 const props = defineProps<{
   roots: TreeExplorerNode[]
   class?: string
@@ -91,6 +93,9 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
   }
 }
 const onNodeContentClick = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
+  if (node.handleClick) {
+    node.handleClick(node, e)
+  }
   emit('nodeClick', node, e)
 }
 const menu = ref(null)

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -123,7 +123,17 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
         }
       },
       children,
-      draggable: node.leaf
+      draggable: node.leaf,
+      handleClick: (
+        node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
+        e: MouseEvent
+      ) => {
+        if (node.leaf) {
+          app.addNodeOnGraph(node.data, { pos: app.getCanvasCenter() })
+        } else {
+          toggleNodeOnEvent(e, node)
+        }
+      }
     }
   }
   return fillNodeInfo(root.value)
@@ -164,17 +174,6 @@ const handleSearch = (query: string) => {
   })
 }
 
-const handleNodeClick = (
-  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
-  e: MouseEvent
-) => {
-  if (node.leaf) {
-    app.addNodeOnGraph(node.data, { pos: app.getCanvasCenter() })
-  } else {
-    toggleNodeOnEvent(e, node)
-  }
-}
-
 const onAddFilter = (filterAndValue: FilterAndValue) => {
   filters.value.push({
     filter: filterAndValue,

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -5,7 +5,6 @@
     :roots="renderedBookmarkedRoot.children"
     :expandedKeys="expandedKeys"
     :extraMenuItems="extraMenuItems"
-    @nodeClick="handleNodeClick"
   >
     <template #folder="{ node }">
       <NodeTreeFolder :node="node" />
@@ -36,31 +35,18 @@ import type {
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
 import type { TreeNode } from 'primevue/treenode'
+import { useToast } from 'primevue/usetoast'
 import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useTreeExpansion } from '@/hooks/treeHooks'
 import { app } from '@/scripts/app'
 import { findNodeByKey } from '@/utils/treeUtil'
-import { useErrorHandling } from '@/hooks/errorHooks'
-import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
   filteredNodeDefs: ComfyNodeDefImpl[]
 }>()
 
-const expandedKeys = ref<Record<string, boolean>>({})
-const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
-
-const handleNodeClick = (
-  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
-  e: MouseEvent
-) => {
-  if (node.leaf) {
-    app.addNodeOnGraph(node.data, { pos: app.getCanvasCenter() })
-  } else {
-    toggleNodeOnEvent(e, node)
-  }
-}
-
+const { expandedKeys, expandNode, toggleNodeOnEvent } = useTreeExpansion()
 const nodeBookmarkStore = useNodeBookmarkStore()
 const bookmarkedRoot = computed<TreeNode>(() => {
   const filterTree = (node: TreeNode): TreeNode | null => {
@@ -147,6 +133,16 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
           const nodePath = folderNodeDef.category + '/' + nodeDefToAdd.name
           nodeBookmarkStore.addBookmark(nodePath)
         },
+        handleClick: (
+          node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
+          e: MouseEvent
+        ) => {
+          if (node.leaf) {
+            app.addNodeOnGraph(node.data, { pos: app.getCanvasCenter() })
+          } else {
+            toggleNodeOnEvent(e, node)
+          }
+        },
         ...(node.leaf
           ? {}
           : {
@@ -204,7 +200,6 @@ const updateCustomization = (icon: string, color: string) => {
   }
 }
 
-const { t } = useI18n()
 const extraMenuItems = computed(
   () => (menuTargetNode: RenderedTreeExplorerNode<ComfyNodeDefImpl>) => [
     {

src/types/treeExplorerTypes.ts

@@ -24,6 +24,8 @@ export interface TreeExplorerNode<T = any> {
     node: TreeExplorerNode<T>,
     data: TreeExplorerDragAndDropData
   ) => void
+  // Function to handle clicking a node
+  handleClick?: (node: TreeExplorerNode<T>, event: MouseEvent) => void
   // Function to handle errors
   handleError?: (error: Error) => void
 }