Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-03 14:54:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Refactor] Replace explicit 'node' param with 'this' for TreeExplorer (#2427)

Browse Source
This commit is contained in:
Chenlei Hu
2025-02-05 12:20:08 -05:00
committed by GitHub
parent 2c12df12ab
commit 292af3fe3f
7 changed files with 48 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/TreeExplorer.vue
View File

@@ -70,7 +70,7 @@ const renderedRoots = computed<RenderedTreeExplorerNode[]>(() => {
})
const getTreeNodeIcon = (node: TreeExplorerNode) => {
if (node.getIcon) {
const icon = node.getIcon(node)
const icon = node.getIcon()
if (icon) {
return icon
}
@@ -95,7 +95,7 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
children,
type: node.leaf ? 'node' : 'folder',
totalLeaves,
badgeText: node.getBadgeText ? node.getBadgeText(node) : null
badgeText: node.getBadgeText ? node.getBadgeText() : null
}
}
const onNodeContentClick = async (
@@ -106,7 +106,7 @@ const onNodeContentClick = async (
selectionKeys.value = {}
}
if (node.handleClick) {
await node.handleClick(node, e)
await node.handleClick(e)
}
emit('nodeClick', node, e)
}
@@ -128,7 +128,7 @@ const renameCommand = (node: RenderedTreeExplorerNode) => {
renameEditingNode.value = node
}
const deleteCommand = async (node: RenderedTreeExplorerNode) => {
await node.handleDelete?.(node)
await node.handleDelete?.()
emit('nodeDelete', node)
}
const menuItems = computed<MenuItem[]>(() =>

6
src/components/common/TreeExplorerTreeNode.vue
View File

@@ -83,7 +83,7 @@ const isEditing = computed(
const errorHandling = useErrorHandling()
const handleRename = errorHandling.wrapWithErrorHandlingAsync(
async (newName: string) => {
await props.node.handleRename(props.node, newName)
await props.node.handleRename(newName)
},
props.node.handleError,
() => {
@@ -110,7 +110,7 @@ if (props.node.draggable) {
? ({ nativeSetDragImage }) => {
setCustomNativeDragPreview({
render: ({ container }) => {
return props.node.renderDragPreview(props.node, container)
return props.node.renderDragPreview(container)
},
nativeSetDragImage
})
@@ -124,7 +124,7 @@ if (props.node.droppable) {
onDrop: async (event) => {
const dndData = event.source.data as TreeExplorerDragAndDropData
if (dndData.type === 'tree-explorer-node') {
await props.node.handleDrop?.(props.node, dndData)
await props.node.handleDrop?.(dndData)
canDrop.value = false
emit('itemDropped', props.node, dndData.data)
}

16
src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
View File

@@ -64,10 +64,7 @@ import {
} from '@/stores/modelStore'
import { useModelToNodeStore } from '@/stores/modelToNodeStore'
import { useSettingStore } from '@/stores/settingStore'
import type {
RenderedTreeExplorerNode,
TreeExplorerNode
} from '@/types/treeExplorerTypes'
import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
import { isElectron } from '@/utils/envUtil'
import { buildTree } from '@/utils/treeUtil'
@@ -126,7 +123,7 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
: node.label,
leaf: node.leaf,
data: node.data,
getIcon: () => {
getIcon() {
if (model) {
return model.image ? 'pi pi-image' : 'pi pi-file'
}
@@ -137,7 +134,7 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
}
return 'pi pi-folder'
},
getBadgeText: () => {
getBadgeText() {
// Return null to apply default badge text
// Return empty string to hide badge
if (!folder) {
@@ -147,11 +144,8 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
},
children,
draggable: node.leaf,
handleClick: (
node: RenderedTreeExplorerNode<ModelOrFolder>,
e: MouseEvent
) => {
if (node.leaf) {
handleClick(e: MouseEvent) {
if (this.leaf) {
const provider = modelToNodeStore.getNodeProvider(model.directory)
if (provider) {
const node = useLitegraphService().addNodeOnGraph(provider.nodeDef)

22
src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
View File

@@ -84,10 +84,7 @@ import {
buildNodeDefTree,
useNodeDefStore
} from '@/stores/nodeDefStore'
import type {
RenderedTreeExplorerNode,
TreeExplorerNode
} from '@/types/treeExplorerTypes'
import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
import { sortedTree } from '@/utils/treeUtil'
import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
@@ -119,28 +116,25 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
label: node.leaf ? node.data.display_name : node.label,
leaf: node.leaf,
data: node.data,
getIcon: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
if (node.leaf) {
getIcon() {
if (this.leaf) {
return 'pi pi-circle-fill'
}
},
children,
draggable: node.leaf,
renderDragPreview: (node, container) => {
renderDragPreview(container) {
const vnode = h(NodePreview, { nodeDef: node.data })
render(vnode, container)
return () => {
render(null, container)
}
},
handleClick: (
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
e: MouseEvent
) => {
if (node.leaf) {
useLitegraphService().addNodeOnGraph(node.data)
handleClick(e: MouseEvent) {
if (this.leaf) {
useLitegraphService().addNodeOnGraph(this.data)
} else {
toggleNodeOnEvent(e, node)
toggleNodeOnEvent(e, this)
}
}
}

18
src/components/sidebar/tabs/WorkflowsSidebarTab.vue
View File

@@ -245,24 +245,18 @@ const renderTreeNode = (
const workflow: ComfyWorkflow = node.data
const handleClick = (
node: TreeExplorerNode<ComfyWorkflow>,
e: MouseEvent
) => {
if (node.leaf) {
function handleClick(this: TreeExplorerNode<ComfyWorkflow>, e: MouseEvent) {
if (this.leaf) {
workflowService.openWorkflow(workflow)
} else {
toggleNodeOnEvent(e, node)
toggleNodeOnEvent(e, this)
}
}
const actions = node.leaf
? {
handleClick,
handleRename: async (
node: TreeExplorerNode<ComfyWorkflow>,
newName: string
) => {
async handleRename(newName: string) {
const newPath =
type === WorkflowTreeType.Browse
? workflow.directory + '/' + appendJsonExt(newName)
@@ -272,10 +266,10 @@ const renderTreeNode = (
},
handleDelete: workflow.isTemporary
? undefined
: async () => {
: async function () {
await workflowService.deleteWorkflow(workflow)
},
contextMenuItems: (node: TreeExplorerNode<ComfyWorkflow>) => {
contextMenuItems() {
return [
{
label: t('g.insert'),

34
src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
View File

@@ -139,8 +139,8 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
label: node.leaf ? node.data.display_name : node.label,
leaf: node.leaf,
data: node.data,
getIcon: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
if (node.leaf) {
getIcon() {
if (this.leaf) {
return 'pi pi-circle-fill'
}
const customization =
@@ -152,10 +152,7 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
children: sortedChildren,
draggable: node.leaf,
droppable: !node.leaf,
handleDrop: (
node: TreeExplorerNode<ComfyNodeDefImpl>,
data: TreeExplorerDragAndDropData<ComfyNodeDefImpl>
) => {
handleDrop(data: TreeExplorerDragAndDropData<ComfyNodeDefImpl>) {
const nodeDefToAdd = data.data.data
// Remove bookmark if the source is the top level bookmarked node.
if (nodeBookmarkStore.isBookmarked(nodeDefToAdd)) {
@@ -165,12 +162,9 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
const nodePath = folderNodeDef.category + '/' + nodeDefToAdd.name
nodeBookmarkStore.addBookmark(nodePath)
},
handleClick: (
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
e: MouseEvent
) => {
if (node.leaf) {
useLitegraphService().addNodeOnGraph(node.data)
handleClick(e: MouseEvent) {
if (this.leaf) {
useLitegraphService().addNodeOnGraph(this.data)
} else {
toggleNodeOnEvent(e, node)
}
@@ -179,9 +173,13 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
...(node.leaf
? {}
: {
handleRename,
handleDelete: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
nodeBookmarkStore.deleteBookmarkFolder(node.data)
handleRename(newName: string) {
if (this.data && this.data.isDummyFolder) {
nodeBookmarkStore.renameBookmarkFolder(this.data, newName)
}
},
handleDelete() {
nodeBookmarkStore.deleteBookmarkFolder(this.data)
}
})
}
@@ -212,12 +210,6 @@ defineExpose({
addNewBookmarkFolder
})
const handleRename = (node: TreeNode, newName: string) => {
if (node.data && node.data.isDummyFolder) {
nodeBookmarkStore.renameBookmarkFolder(node.data, newName)
}
}
const showCustomizationDialog = ref(false)
const initialIcon = ref(nodeBookmarkStore.defaultBookmarkIcon)
const initialColor = ref(nodeBookmarkStore.defaultBookmarkColor)

18
src/types/treeExplorerTypes.ts
View File

@@ -8,42 +8,42 @@ export interface TreeExplorerNode<T = any> {
children?: TreeExplorerNode<T>[]
icon?: string
/** Function to override what icon to use for the node */
getIcon?: (node: TreeExplorerNode<T>) => string
getIcon?: (this: TreeExplorerNode<T>) => string
/** Function to override what text to use for the leaf-count badge on a folder node */
getBadgeText?: (node: TreeExplorerNode<T>) => string
getBadgeText?: (this: TreeExplorerNode<T>) => string
/** Function to handle renaming the node */
handleRename?: (
node: TreeExplorerNode<T>,
this: TreeExplorerNode<T>,
newName: string
) => void | Promise<void>
/** Function to handle deleting the node */
handleDelete?: (node: TreeExplorerNode<T>) => void | Promise<void>
handleDelete?: (this: TreeExplorerNode<T>) => void | Promise<void>
/** Function to handle adding a child node */
handleAddChild?: (
node: TreeExplorerNode<T>,
this: TreeExplorerNode<T>,
child: TreeExplorerNode<T>
) => void | Promise<void>
/** Whether the node is draggable */
draggable?: boolean
/** Function to render a drag preview */
renderDragPreview?: (
node: TreeExplorerNode<T>,
this: TreeExplorerNode<T>,
container: HTMLElement
) => void | (() => void)
/** Whether the node is droppable */
droppable?: boolean
/** Function to handle dropping a node */
handleDrop?: (
node: TreeExplorerNode<T>,
this: TreeExplorerNode<T>,
data: TreeExplorerDragAndDropData
) => void | Promise<void>
/** Function to handle clicking a node */
handleClick?: (
node: TreeExplorerNode<T>,
this: TreeExplorerNode<T>,
event: MouseEvent
) => void | Promise<void>
/** Function to handle errors */
handleError?: (error: Error) => void
handleError?: (this: TreeExplorerNode<T>, error: Error) => void
/** Extra context menu items */
contextMenuItems?:
| MenuItem[]