mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-08 09:00:05 +00:00
[Major Refactor] Use TreeExplorer on nodeLibrarySidebarTab (#699)
* Basic move * Add back node bookmark * Move node preview * Fix drag node to canvas * Restore click node to add to canvas * Split bookmark tree and library tree * Migrate rename and delete context menu * Fix expanded keys * Split components * Support extra menu items * Context menu only for folder * Migrate add folder * Handle drop * Store color customization * remove extra padding * Do not show context menu if no item * Hide divider if no bookmark * Sort bookmarks alphabetically default * nit * proper edit * Update test selectors * Auto expand on item drop * nit * Fix tests * Search also searches bookmarks tree * Add serach playwright test
This commit is contained in:
Chenlei Hu
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<TreeExplorer
|
||||
class="node-lib-bookmark-tree-explorer"
|
||||
ref="treeExplorerRef"
|
||||
:roots="renderedBookmarkedRoot.children"
|
||||
:expandedKeys="expandedKeys"
|
||||
:extraMenuItems="extraMenuItems"
|
||||
@nodeClick="handleNodeClick"
|
||||
>
|
||||
<template #folder="{ node }">
|
||||
<NodeTreeFolder :node="node" />
|
||||
</template>
|
||||
<template #node="{ node }">
|
||||
<NodeTreeLeaf :node="node" />
|
||||
</template>
|
||||
</TreeExplorer>
|
||||
|
||||
<FolderCustomizationDialog
|
||||
v-model="showCustomizationDialog"
|
||||
@confirm="updateCustomization"
|
||||
:initialIcon="initialIcon"
|
||||
:initialColor="initialColor"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TreeExplorer from '@/components/common/TreeExplorer.vue'
|
||||
import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
|
||||
import NodeTreeFolder from '@/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue'
|
||||
import FolderCustomizationDialog from '@/components/common/CustomizationDialog.vue'
|
||||
import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
|
||||
import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
||||
import type {
|
||||
RenderedTreeExplorerNode,
|
||||
TreeExplorerDragAndDropData,
|
||||
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'
|
||||
|
||||
const props = defineProps<{
|
||||
filteredNodeDefs: ComfyNodeDefImpl[]
|
||||
}>()
|
||||
|
||||
const { expandedKeys, expandNode, toggleNodeOnEvent } = useTreeExpansion()
|
||||
|
||||
const handleNodeClick = (
|
||||
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
|
||||
e: MouseEvent
|
||||
) => {
|
||||
if (node.leaf) {
|
||||
app.addNodeOnGraph(node.data, { pos: app.getCanvasCenter() })
|
||||
} else {
|
||||
toggleNodeOnEvent(e, node)
|
||||
}
|
||||
}
|
||||
|
||||
const nodeBookmarkStore = useNodeBookmarkStore()
|
||||
const bookmarkedRoot = computed<TreeNode>(() => {
|
||||
const filterTree = (node: TreeNode): TreeNode | null => {
|
||||
if (node.leaf) {
|
||||
// Check if the node's display_name is in the filteredNodeDefs list
|
||||
return props.filteredNodeDefs.some(
|
||||
(def) => def.display_name === node.data.display_name
|
||||
)
|
||||
? node
|
||||
: null
|
||||
}
|
||||
|
||||
const filteredChildren = node.children
|
||||
?.map(filterTree)
|
||||
.filter((child): child is TreeNode => child !== null)
|
||||
|
||||
if (filteredChildren && filteredChildren.length > 0) {
|
||||
return {
|
||||
...node,
|
||||
children: filteredChildren
|
||||
}
|
||||
}
|
||||
|
||||
return null // Remove empty folders
|
||||
}
|
||||
|
||||
return props.filteredNodeDefs.length
|
||||
? filterTree(nodeBookmarkStore.bookmarkedRoot) || {
|
||||
key: 'root',
|
||||
label: 'Root',
|
||||
children: []
|
||||
}
|
||||
: nodeBookmarkStore.bookmarkedRoot
|
||||
})
|
||||
watch(
|
||||
() => props.filteredNodeDefs,
|
||||
(newValue) => {
|
||||
if (newValue.length) {
|
||||
nextTick(() => expandNode(bookmarkedRoot.value))
|
||||
}
|
||||
}
|
||||
)
|
||||
const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
|
||||
() => {
|
||||
const fillNodeInfo = (
|
||||
node: TreeNode
|
||||
): TreeExplorerNode<ComfyNodeDefImpl> => {
|
||||
const children = node.children?.map(fillNodeInfo)
|
||||
|
||||
// Sort children: non-leaf nodes first, then leaf nodes, both alphabetically
|
||||
const sortedChildren = children?.sort((a, b) => {
|
||||
if (a.leaf === b.leaf) {
|
||||
return a.label.localeCompare(b.label)
|
||||
}
|
||||
return a.leaf ? 1 : -1
|
||||
})
|
||||
|
||||
return {
|
||||
key: node.key,
|
||||
label: node.label,
|
||||
leaf: node.leaf,
|
||||
data: node.data,
|
||||
getIcon: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
|
||||
if (node.leaf) {
|
||||
return 'pi pi-circle-fill'
|
||||
}
|
||||
const customization =
|
||||
nodeBookmarkStore.bookmarksCustomization[node.data.nodePath]
|
||||
return customization?.icon
|
||||
? 'pi ' + customization.icon
|
||||
: 'pi pi-bookmark-fill'
|
||||
},
|
||||
children: sortedChildren,
|
||||
draggable: node.leaf,
|
||||
droppable: !node.leaf,
|
||||
handleDrop: (
|
||||
node: TreeExplorerNode<ComfyNodeDefImpl>,
|
||||
data: TreeExplorerDragAndDropData<ComfyNodeDefImpl>
|
||||
) => {
|
||||
const nodeDefToAdd = data.data.data
|
||||
// Remove bookmark if the source is the top level bookmarked node.
|
||||
if (nodeBookmarkStore.isBookmarked(nodeDefToAdd)) {
|
||||
nodeBookmarkStore.toggleBookmark(nodeDefToAdd)
|
||||
}
|
||||
const folderNodeDef = node.data as ComfyNodeDefImpl
|
||||
const nodePath =
|
||||
folderNodeDef.category + '/' + nodeDefToAdd.display_name
|
||||
nodeBookmarkStore.addBookmark(nodePath)
|
||||
},
|
||||
...(node.leaf
|
||||
? {}
|
||||
: {
|
||||
handleRename,
|
||||
handleDelete: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
|
||||
nodeBookmarkStore.deleteBookmarkFolder(node.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return fillNodeInfo(bookmarkedRoot.value)
|
||||
}
|
||||
)
|
||||
|
||||
const treeExplorerRef = ref<InstanceType<typeof TreeExplorer> | null>(null)
|
||||
const addNewBookmarkFolder = (
|
||||
parent?: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
||||
) => {
|
||||
const newFolderKey =
|
||||
'root/' + nodeBookmarkStore.addNewBookmarkFolder(parent?.data).slice(0, -1)
|
||||
nextTick(() => {
|
||||
treeExplorerRef.value?.renameCommand(
|
||||
findNodeByKey(
|
||||
renderedBookmarkedRoot.value,
|
||||
newFolderKey
|
||||
) as RenderedTreeExplorerNode
|
||||
)
|
||||
if (parent) {
|
||||
expandedKeys.value[parent.key] = true
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
addNewBookmarkFolder
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
const handleRename = (node: TreeNode, newName: string) => {
|
||||
if (node.data && node.data.isDummyFolder) {
|
||||
try {
|
||||
nodeBookmarkStore.renameBookmarkFolder(node.data, newName)
|
||||
} catch (e) {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: t('error'),
|
||||
detail: e.message,
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const showCustomizationDialog = ref(false)
|
||||
const initialIcon = ref(nodeBookmarkStore.defaultBookmarkIcon)
|
||||
const initialColor = ref(nodeBookmarkStore.defaultBookmarkColor)
|
||||
const customizationTargetNodePath = ref('')
|
||||
const updateCustomization = (icon: string, color: string) => {
|
||||
if (customizationTargetNodePath.value) {
|
||||
nodeBookmarkStore.updateBookmarkCustomization(
|
||||
customizationTargetNodePath.value,
|
||||
{ icon, color }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const extraMenuItems = computed(
|
||||
() => (menuTargetNode: RenderedTreeExplorerNode<ComfyNodeDefImpl>) => [
|
||||
{
|
||||
label: t('newFolder'),
|
||||
icon: 'pi pi-folder-plus',
|
||||
command: () => {
|
||||
addNewBookmarkFolder(menuTargetNode)
|
||||
},
|
||||
visible: !menuTargetNode?.leaf
|
||||
},
|
||||
{
|
||||
label: t('customize'),
|
||||
icon: 'pi pi-palette',
|
||||
command: () => {
|
||||
const customization =
|
||||
nodeBookmarkStore.bookmarksCustomization[menuTargetNode.data.nodePath]
|
||||
initialIcon.value =
|
||||
customization?.icon || nodeBookmarkStore.defaultBookmarkIcon
|
||||
initialColor.value =
|
||||
customization?.color || nodeBookmarkStore.defaultBookmarkColor
|
||||
|
||||
showCustomizationDialog.value = true
|
||||
customizationTargetNodePath.value = menuTargetNode.data.nodePath
|
||||
},
|
||||
visible: !menuTargetNode?.leaf
|
||||
}
|
||||
]
|
||||
)
|
||||
</script>
|
||||
@@ -1,103 +1,42 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'node-tree-folder',
|
||||
{ bookmark: props.isBookmarkFolder, 'can-drop': canDrop }
|
||||
]"
|
||||
ref="container"
|
||||
>
|
||||
<span class="folder-label">
|
||||
<slot name="folder-label" :node="props.node">
|
||||
{{ props.node.label }}
|
||||
</slot>
|
||||
</span>
|
||||
<Badge
|
||||
:value="props.node.totalNodes"
|
||||
severity="secondary"
|
||||
:style="{ marginLeft: '0.5rem' }"
|
||||
/>
|
||||
<div ref="container" class="node-lib-node-container">
|
||||
<TreeExplorerTreeNode
|
||||
:node="node"
|
||||
@item-dropped="handleItemDrop"
|
||||
></TreeExplorerTreeNode>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
|
||||
import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
||||
import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
|
||||
import type { CanvasDragAndDropData } from '@/types/litegraphTypes'
|
||||
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
|
||||
import Badge from 'primevue/badge'
|
||||
import type { TreeNode } from 'primevue/treenode'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
|
||||
import type { BookmarkCustomization } from '@/types/apiTypes'
|
||||
import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
|
||||
|
||||
const props = defineProps<{
|
||||
node: TreeNode
|
||||
isBookmarkFolder: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'itemDropped', node: TreeNode): void
|
||||
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
||||
}>()
|
||||
|
||||
const nodeBookmarkStore = useNodeBookmarkStore()
|
||||
|
||||
const customization = computed<BookmarkCustomization | undefined>(() => {
|
||||
return nodeBookmarkStore.bookmarksCustomization[props.node.data.nodePath]
|
||||
})
|
||||
|
||||
const addNodeToBookmarkFolder = (node: ComfyNodeDefImpl) => {
|
||||
if (!props.node.data) {
|
||||
console.error('Bookmark folder does not have data!')
|
||||
return
|
||||
}
|
||||
if (nodeBookmarkStore.isBookmarked(node)) {
|
||||
nodeBookmarkStore.toggleBookmark(node)
|
||||
}
|
||||
|
||||
const folderNodeDef = props.node.data as ComfyNodeDefImpl
|
||||
const nodePath = folderNodeDef.category + '/' + node.display_name
|
||||
nodeBookmarkStore.addBookmark(nodePath)
|
||||
}
|
||||
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
const canDrop = ref(false)
|
||||
|
||||
const treeNodeElement = ref<HTMLElement | null>(null)
|
||||
const iconElement = ref<HTMLElement | null>(null)
|
||||
|
||||
let dropTargetCleanup = () => {}
|
||||
let stopWatchCustomization: (() => void) | null = null
|
||||
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
onMounted(() => {
|
||||
if (!props.isBookmarkFolder) return
|
||||
|
||||
treeNodeElement.value = container.value?.closest(
|
||||
'.p-tree-node-content'
|
||||
) as HTMLElement
|
||||
dropTargetCleanup = dropTargetForElements({
|
||||
element: treeNodeElement.value,
|
||||
onDrop: (event) => {
|
||||
const dndData = event.source.data as CanvasDragAndDropData
|
||||
if (dndData.type === 'add-node') {
|
||||
addNodeToBookmarkFolder(dndData.data)
|
||||
canDrop.value = false
|
||||
emit('itemDropped', props.node)
|
||||
}
|
||||
},
|
||||
onDragEnter: (event) => {
|
||||
const dndData = event.source.data as CanvasDragAndDropData
|
||||
if (dndData.type === 'add-node') {
|
||||
canDrop.value = true
|
||||
}
|
||||
},
|
||||
onDragLeave: (event) => {
|
||||
canDrop.value = false
|
||||
}
|
||||
})
|
||||
|
||||
iconElement.value = treeNodeElement.value.querySelector(
|
||||
':scope > .p-tree-node-icon'
|
||||
) as HTMLElement
|
||||
|
||||
updateIconColor()
|
||||
|
||||
// Start watching after the component is mounted
|
||||
@@ -111,16 +50,13 @@ const updateIconColor = () => {
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
dropTargetCleanup()
|
||||
if (stopWatchCustomization) {
|
||||
stopWatchCustomization()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.node-tree-folder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
const expandedKeys = inject<Ref<Record<string, boolean>>>('expandedKeys')
|
||||
const handleItemDrop = (node: RenderedTreeExplorerNode) => {
|
||||
expandedKeys.value[node.key] = true
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
@@ -1,83 +1,129 @@
|
||||
<template>
|
||||
<div :class="['node-tree-leaf', { bookmark: isBookmarked }]" ref="container">
|
||||
<div class="node-content">
|
||||
<Tag
|
||||
v-if="node.experimental"
|
||||
:value="$t('experimental')"
|
||||
severity="primary"
|
||||
/>
|
||||
<Tag v-if="node.deprecated" :value="$t('deprecated')" severity="danger" />
|
||||
<span class="node-label">{{ node.display_name }}</span>
|
||||
</div>
|
||||
<Button
|
||||
class="bookmark-button"
|
||||
size="small"
|
||||
:icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
|
||||
text
|
||||
severity="secondary"
|
||||
@click.stop="toggleBookmark"
|
||||
/>
|
||||
<div ref="container" class="node-lib-node-container">
|
||||
<TreeExplorerTreeNode :node="node">
|
||||
<template #before-label>
|
||||
<Tag
|
||||
v-if="nodeDef.experimental"
|
||||
:value="$t('experimental')"
|
||||
severity="primary"
|
||||
/>
|
||||
<Tag
|
||||
v-if="nodeDef.deprecated"
|
||||
:value="$t('deprecated')"
|
||||
severity="danger"
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
class="bookmark-button"
|
||||
size="small"
|
||||
:icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
|
||||
text
|
||||
severity="secondary"
|
||||
@click.stop="toggleBookmark"
|
||||
/>
|
||||
</template>
|
||||
</TreeExplorerTreeNode>
|
||||
|
||||
<teleport v-if="isHovered" to="#node-library-node-preview-container">
|
||||
<div class="node-lib-node-preview" :style="nodePreviewStyle">
|
||||
<NodePreview ref="previewRef" :nodeDef="nodeDef"></NodePreview>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Button from 'primevue/button'
|
||||
import Tag from 'primevue/tag'
|
||||
import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
|
||||
import NodePreview from '@/components/node/NodePreview.vue'
|
||||
import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
|
||||
import { CanvasDragAndDropData } from '@/types/litegraphTypes'
|
||||
import {
|
||||
computed,
|
||||
CSSProperties,
|
||||
nextTick,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
ref
|
||||
} from 'vue'
|
||||
import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
|
||||
import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
|
||||
const props = defineProps<{
|
||||
node: ComfyNodeDefImpl
|
||||
isBookmarked: boolean
|
||||
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
||||
}>()
|
||||
|
||||
const nodeDef = computed(() => props.node.data)
|
||||
const nodeBookmarkStore = useNodeBookmarkStore()
|
||||
const isBookmarked = computed(() =>
|
||||
nodeBookmarkStore.isBookmarked(nodeDef.value)
|
||||
)
|
||||
const settingStore = useSettingStore()
|
||||
const sidebarLocation = computed<'left' | 'right'>(() =>
|
||||
settingStore.get('Comfy.Sidebar.Location')
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'toggle-bookmark', value: ComfyNodeDefImpl): void
|
||||
}>()
|
||||
|
||||
const toggleBookmark = () => {
|
||||
emit('toggle-bookmark', props.node)
|
||||
nodeBookmarkStore.toggleBookmark(nodeDef.value)
|
||||
}
|
||||
|
||||
const previewRef = ref<InstanceType<typeof NodePreview> | null>(null)
|
||||
const nodePreviewStyle = ref<CSSProperties>({
|
||||
position: 'absolute',
|
||||
top: '0px',
|
||||
left: '0px'
|
||||
})
|
||||
|
||||
const handleNodeHover = async () => {
|
||||
const hoverTarget = nodeContentElement.value
|
||||
const targetRect = hoverTarget.getBoundingClientRect()
|
||||
|
||||
const previewHeight = previewRef.value?.$el.offsetHeight || 0
|
||||
const availableSpaceBelow = window.innerHeight - targetRect.bottom
|
||||
|
||||
nodePreviewStyle.value.top =
|
||||
previewHeight > availableSpaceBelow
|
||||
? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px`
|
||||
: `${targetRect.top - 40}px`
|
||||
if (sidebarLocation.value === 'left') {
|
||||
nodePreviewStyle.value.left = `${targetRect.right}px`
|
||||
} else {
|
||||
nodePreviewStyle.value.left = `${targetRect.left - 400}px`
|
||||
}
|
||||
}
|
||||
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
let draggableCleanup: () => void
|
||||
const nodeContentElement = ref<HTMLElement | null>(null)
|
||||
const isHovered = ref(false)
|
||||
const handleMouseEnter = async () => {
|
||||
isHovered.value = true
|
||||
await nextTick()
|
||||
handleNodeHover()
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
isHovered.value = false
|
||||
}
|
||||
onMounted(() => {
|
||||
const treeNodeElement = container.value?.closest(
|
||||
'.p-tree-node'
|
||||
) as HTMLElement
|
||||
draggableCleanup = draggable({
|
||||
element: treeNodeElement,
|
||||
getInitialData() {
|
||||
return {
|
||||
type: 'add-node',
|
||||
data: props.node
|
||||
} as CanvasDragAndDropData<ComfyNodeDefImpl>
|
||||
}
|
||||
})
|
||||
nodeContentElement.value = container.value?.closest('.p-tree-node-content')
|
||||
nodeContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
|
||||
nodeContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
draggableCleanup()
|
||||
nodeContentElement.value?.removeEventListener('mouseenter', handleMouseEnter)
|
||||
nodeContentElement.value?.removeEventListener('mouseleave', handleMouseLeave)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.node-tree-leaf {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.node-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
margin-left: 0.5rem;
|
||||
.node-lib-node-container {
|
||||
@apply h-full w-full;
|
||||
}
|
||||
|
||||
.bookmark-button {
|
||||
|
||||
Reference in New Issue
Block a user