mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 05:02:17 +00:00
V2 Node Search (+ hidden Node Library changes) (#8987)
## Summary Redesigned node search with categories ## Changes - **What**: Adds a v2 search component, leaving the existing implementation untouched - It also brings onboard the incomplete node library & preview changes, disabled and behind a hidden setting - **Breaking**: Changes the 'default' value of the node search setting to v2, adding v1 (legacy) as an option ## Screenshots (if applicable) https://github.com/user-attachments/assets/2ab797df-58f0-48e8-8b20-2a1809e3735f ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8987-V2-Node-Search-hidden-Node-Library-changes-30c6d73d36508160902bcb92553f147c) by [Unito](https://www.unito.io) --------- Co-authored-by: Yourz <crazilou@vip.qq.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org>
This commit is contained in:
77
src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
Normal file
77
src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<TabsContent value="all" class="flex-1 overflow-y-auto h-full">
|
||||
<!-- Favorites section -->
|
||||
<template v-if="hasFavorites">
|
||||
<h3
|
||||
class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
|
||||
>
|
||||
{{ $t('sideToolbar.nodeLibraryTab.sections.favorites') }}
|
||||
</h3>
|
||||
<TreeExplorerV2
|
||||
v-model:expanded-keys="expandedKeys"
|
||||
:root="favoritesRoot"
|
||||
@node-click="(node) => emit('nodeClick', node)"
|
||||
@add-to-favorites="handleAddToFavorites"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Node sections -->
|
||||
<div v-for="(section, index) in sections" :key="section.title ?? index">
|
||||
<h3
|
||||
v-if="section.title"
|
||||
class="px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground mb-0"
|
||||
>
|
||||
{{ section.title }}
|
||||
</h3>
|
||||
<TreeExplorerV2
|
||||
v-model:expanded-keys="expandedKeys"
|
||||
:root="section.root"
|
||||
@node-click="(node) => emit('nodeClick', node)"
|
||||
@add-to-favorites="handleAddToFavorites"
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TabsContent } from 'reka-ui'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import TreeExplorerV2 from '@/components/common/TreeExplorerV2.vue'
|
||||
import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
|
||||
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
||||
import type {
|
||||
NodeLibrarySection,
|
||||
RenderedTreeExplorerNode,
|
||||
TreeNode
|
||||
} from '@/types/treeExplorerTypes'
|
||||
|
||||
const { fillNodeInfo } = defineProps<{
|
||||
sections: NodeLibrarySection[]
|
||||
fillNodeInfo: (node: TreeNode) => RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
||||
}>()
|
||||
|
||||
const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
|
||||
|
||||
const emit = defineEmits<{
|
||||
nodeClick: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
|
||||
}>()
|
||||
|
||||
const nodeBookmarkStore = useNodeBookmarkStore()
|
||||
|
||||
const hasFavorites = computed(
|
||||
() => (nodeBookmarkStore.bookmarkedRoot.children?.length ?? 0) > 0
|
||||
)
|
||||
|
||||
const favoritesRoot = computed(() =>
|
||||
fillNodeInfo(nodeBookmarkStore.bookmarkedRoot)
|
||||
)
|
||||
|
||||
function handleAddToFavorites(
|
||||
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
||||
) {
|
||||
if (node.data) {
|
||||
nodeBookmarkStore.toggleBookmark(node.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user