diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue index 4aad2fba..571766ea 100644 --- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue +++ b/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(null) const hoveredComfyNode = computed(() => { 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) } diff --git a/src/hooks/treeHooks.ts b/src/hooks/treeHooks.ts new file mode 100644 index 00000000..a345298b --- /dev/null +++ b/src/hooks/treeHooks.ts @@ -0,0 +1,73 @@ +import { ref } from 'vue' +import type { TreeNode } from 'primevue/treenode' + +export function useTreeExpansion() { + const expandedKeys = ref>({}) + + 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 + } +}