diff --git a/packages/frontend/editor-ui/src/components/canvas/Canvas.vue b/packages/frontend/editor-ui/src/components/canvas/Canvas.vue index e160fc752b..2c0603cd57 100644 --- a/packages/frontend/editor-ui/src/components/canvas/Canvas.vue +++ b/packages/frontend/editor-ui/src/components/canvas/Canvas.vue @@ -4,7 +4,8 @@ import type { CanvasLayoutEvent, CanvasLayoutSource } from '@/composables/useCan import { useCanvasLayout } from '@/composables/useCanvasLayout'; import { useCanvasNodeHover } from '@/composables/useCanvasNodeHover'; import { useCanvasTraversal } from '@/composables/useCanvasTraversal'; -import { type ContextMenuAction, useContextMenu } from '@/composables/useContextMenu'; +import type { ContextMenuAction, ContextMenuTarget } from '@/composables/useContextMenu'; +import { useContextMenu } from '@/composables/useContextMenu'; import { useKeybindings } from '@/composables/useKeybindings'; import type { PinDataSource } from '@/composables/usePinnedData'; import { CanvasKey } from '@/constants'; @@ -603,18 +604,16 @@ const nodeDataById = computed(() => { const contextMenu = useContextMenu(); -function onOpenContextMenu(event: MouseEvent) { +function onOpenContextMenu(event: MouseEvent, target?: Pick) { contextMenu.open(event, { source: 'canvas', nodeIds: selectedNodeIds.value, + ...target, }); } function onOpenSelectionContextMenu({ event }: { event: MouseEvent }) { - contextMenu.open(event, { - source: 'canvas', - nodeIds: selectedNodeIds.value, - }); + onOpenContextMenu(event); } function onOpenNodeContextMenu( @@ -622,11 +621,14 @@ function onOpenNodeContextMenu( event: MouseEvent, source: 'node-button' | 'node-right-click', ) { - if (selectedNodeIds.value.includes(id)) { - onOpenContextMenu(event); + if (source === 'node-button') { + contextMenu.open(event, { source, nodeId: id }); + } else if (selectedNodeIds.value.length > 1 && selectedNodeIds.value.includes(id)) { + onOpenContextMenu(event, { nodeId: id }); + } else { + onSelectNodes({ ids: [id] }); + contextMenu.open(event, { source, nodeId: id }); } - - contextMenu.open(event, { source, nodeId: id }); } async function onContextMenuAction(action: ContextMenuAction, nodeIds: string[]) { diff --git a/packages/frontend/editor-ui/src/composables/__snapshots__/useContextMenu.test.ts.snap b/packages/frontend/editor-ui/src/composables/__snapshots__/useContextMenu.test.ts.snap index 1a9cb64c2b..a0f49f740e 100644 --- a/packages/frontend/editor-ui/src/composables/__snapshots__/useContextMenu.test.ts.snap +++ b/packages/frontend/editor-ui/src/composables/__snapshots__/useContextMenu.test.ts.snap @@ -22,7 +22,7 @@ exports[`useContextMenu > Read-only mode > should return the correct actions whe "label": "Rename", "shortcut": { "keys": [ - "F2", + "Space", ], }, }, @@ -213,7 +213,7 @@ exports[`useContextMenu > should return the correct actions opening the menu fro "label": "Rename", "shortcut": { "keys": [ - "F2", + "Space", ], }, }, @@ -323,7 +323,7 @@ exports[`useContextMenu > should return the correct actions when right clicking "label": "Rename", "shortcut": { "keys": [ - "F2", + "Space", ], }, }, diff --git a/packages/frontend/editor-ui/src/composables/useContextMenu.ts b/packages/frontend/editor-ui/src/composables/useContextMenu.ts index 1b1046feca..8bbd7ccec7 100644 --- a/packages/frontend/editor-ui/src/composables/useContextMenu.ts +++ b/packages/frontend/editor-ui/src/composables/useContextMenu.ts @@ -14,7 +14,7 @@ import { isPresent } from '../utils/typesUtils'; import { getResourcePermissions } from '@/permissions'; export type ContextMenuTarget = - | { source: 'canvas'; nodeIds: string[] } + | { source: 'canvas'; nodeIds: string[]; nodeId?: string } | { source: 'node-right-click'; nodeId: string } | { source: 'node-button'; nodeId: string }; export type ContextMenuActionCallback = (action: ContextMenuAction, nodeIds: string[]) => void; @@ -108,7 +108,11 @@ export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) = const open = (event: MouseEvent, menuTarget: ContextMenuTarget) => { event.stopPropagation(); - if (isOpen.value && menuTarget.source === target.value?.source) { + if ( + isOpen.value && + menuTarget.source === target.value?.source && + menuTarget.nodeId === target.value?.nodeId + ) { // Close context menu, let browser open native context menu close(); return; @@ -244,7 +248,7 @@ export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) = { id: 'rename', label: i18n.baseText('contextMenu.rename'), - shortcut: { keys: ['F2'] }, + shortcut: { keys: ['Space'] }, disabled: isReadOnly.value, }, ];