fix(editor): Fix context menu behaviour and rename shortcut indicator (#15116)

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<ContextMenuTarget, 'nodeId'>) {
 	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[]) {

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",
       ],
     },
   },

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,
 							},
 						];