mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/7453. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7470-fix-convert-to-subgraph-not-shown-in-context-menu-if-subgraph-inside-the-selection-con-2c96d73d36508146a475e8d39c64183c) 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) {
|
|
options.push(
|
|
{
|
|
label: t('contextMenu.Add Subgraph to Library'),
|
|
icon: 'icon-[lucide--folder-plus]',
|
|
action: addSubgraphToLibrary
|
|
},
|
|
{
|
|
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
|
|
}
|
|
}
|