mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-22 13:32:11 +00:00
## Summary Fix "Add Subgraph to Library" context menu option which was bookmarking (UI favorite) instead of actually saving the subgraph as a reusable blueprint. ## Changes - **What**: Replace `nodeBookmarkStore.addBookmark()` with `subgraphStore.publishSubgraph()` in `addSubgraphToLibrary`, matching the working toolbar button behavior. Hide the menu option when multiple items are selected since `publishSubgraph` requires exactly one SubgraphNode. ## Review Focus The original implementation (PR #5218) used `addBookmark` which only adds a star/favorite — it never called the `publishSubgraph` function that serializes, prompts for a name, and saves the subgraph as a blueprint file. The toolbar button (`SaveToSubgraphLibrary.vue`) worked correctly because it calls the `Comfy.PublishSubgraph` command which uses `publishSubgraph`. The multi-select visibility guard (`!hasMultipleSelection`) matches `SaveToSubgraphLibrary.vue`'s `v-show` guard. "Unpack Subgraph" remains visible for multi-select since it handles multiple SubgraphNodes correctly. Fixes COM-15200 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9056-fix-Add-Subgraph-to-Library-context-menu-not-saving-subgraph-30e6d73d36508177ba7ef97a2fe9b893) by [Unito](https://www.unito.io)
162 lines
4.0 KiB
TypeScript
162 lines
4.0 KiB
TypeScript
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { useCommandStore } from '@/stores/commandStore'
|
|
|
|
import { useFrameNodes } from './useFrameNodes'
|
|
import { BadgeVariant } from './useMoreOptionsMenu'
|
|
import type { MenuOption } from './useMoreOptionsMenu'
|
|
import { useNodeArrangement } from './useNodeArrangement'
|
|
import { useSelectionOperations } from './useSelectionOperations'
|
|
import { useSubgraphOperations } from './useSubgraphOperations'
|
|
|
|
/**
|
|
* Composable for selection-related menu operations
|
|
*/
|
|
export function useSelectionMenuOptions() {
|
|
const { t } = useI18n()
|
|
const {
|
|
copySelection,
|
|
duplicateSelection,
|
|
deleteSelection,
|
|
renameSelection
|
|
} = useSelectionOperations()
|
|
|
|
const { alignOptions, distributeOptions, applyAlign, applyDistribute } =
|
|
useNodeArrangement()
|
|
|
|
const { convertToSubgraph, unpackSubgraph, addSubgraphToLibrary } =
|
|
useSubgraphOperations()
|
|
|
|
const { frameNodes } = useFrameNodes()
|
|
|
|
const alignSubmenu = computed(() =>
|
|
alignOptions.map((align) => ({
|
|
label: align.localizedName,
|
|
icon: align.icon,
|
|
action: () => applyAlign(align)
|
|
}))
|
|
)
|
|
|
|
const distributeSubmenu = computed(() =>
|
|
distributeOptions.map((distribute) => ({
|
|
label: distribute.localizedName,
|
|
icon: distribute.icon,
|
|
action: () => applyDistribute(distribute)
|
|
}))
|
|
)
|
|
|
|
const getBasicSelectionOptions = (): MenuOption[] => [
|
|
{
|
|
label: t('contextMenu.Rename'),
|
|
action: renameSelection
|
|
},
|
|
{
|
|
label: t('contextMenu.Copy'),
|
|
shortcut: 'Ctrl+C',
|
|
action: copySelection
|
|
},
|
|
{
|
|
label: t('contextMenu.Duplicate'),
|
|
shortcut: 'Ctrl+D',
|
|
action: duplicateSelection
|
|
}
|
|
]
|
|
|
|
const getSubgraphOptions = ({
|
|
hasSubgraphs,
|
|
hasMultipleSelection
|
|
}: {
|
|
hasSubgraphs: boolean
|
|
hasMultipleSelection: boolean
|
|
}): MenuOption[] => {
|
|
const convertOption: MenuOption = {
|
|
label: t('contextMenu.Convert to Subgraph'),
|
|
icon: 'icon-[lucide--shrink]',
|
|
action: convertToSubgraph,
|
|
badge: BadgeVariant.NEW
|
|
}
|
|
|
|
const options: MenuOption[] = []
|
|
const showConvertOption = !hasSubgraphs || hasMultipleSelection
|
|
|
|
if (showConvertOption) {
|
|
options.push(convertOption)
|
|
}
|
|
|
|
if (hasSubgraphs) {
|
|
if (!hasMultipleSelection) {
|
|
options.push({
|
|
label: t('contextMenu.Add Subgraph to Library'),
|
|
icon: 'icon-[lucide--folder-plus]',
|
|
action: addSubgraphToLibrary
|
|
})
|
|
}
|
|
options.push({
|
|
label: t('contextMenu.Unpack Subgraph'),
|
|
icon: 'icon-[lucide--expand]',
|
|
action: unpackSubgraph
|
|
})
|
|
}
|
|
|
|
return options
|
|
}
|
|
|
|
const getMultipleNodesOptions = (): MenuOption[] => {
|
|
const convertToGroupNodes = () => {
|
|
const commandStore = useCommandStore()
|
|
void commandStore.execute(
|
|
'Comfy.GroupNode.ConvertSelectedNodesToGroupNode'
|
|
)
|
|
}
|
|
|
|
return [
|
|
{
|
|
label: t('contextMenu.Convert to Group Node'),
|
|
icon: 'icon-[lucide--group]',
|
|
action: convertToGroupNodes,
|
|
badge: BadgeVariant.DEPRECATED
|
|
},
|
|
{
|
|
label: t('g.frameNodes'),
|
|
icon: 'icon-[lucide--frame]',
|
|
action: frameNodes
|
|
}
|
|
]
|
|
}
|
|
|
|
const getAlignmentOptions = (): MenuOption[] => [
|
|
{
|
|
label: t('contextMenu.Align Selected To'),
|
|
icon: 'icon-[lucide--align-start-horizontal]',
|
|
hasSubmenu: true,
|
|
submenu: alignSubmenu.value,
|
|
action: () => {}
|
|
},
|
|
{
|
|
label: t('contextMenu.Distribute Nodes'),
|
|
icon: 'icon-[lucide--align-center-horizontal]',
|
|
hasSubmenu: true,
|
|
submenu: distributeSubmenu.value,
|
|
action: () => {}
|
|
}
|
|
]
|
|
|
|
const getDeleteOption = (): MenuOption => ({
|
|
label: t('contextMenu.Delete'),
|
|
icon: 'icon-[lucide--trash-2]',
|
|
shortcut: 'Delete',
|
|
action: deleteSelection
|
|
})
|
|
|
|
return {
|
|
getBasicSelectionOptions,
|
|
getSubgraphOptions,
|
|
getMultipleNodesOptions,
|
|
getDeleteOption,
|
|
getAlignmentOptions,
|
|
alignSubmenu,
|
|
distributeSubmenu
|
|
}
|
|
}
|