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

This commit is contained in:
Alex Grozav
2025-05-06 14:38:16 +03:00
committed by GitHub
parent 22022642bf
commit 73a4a33da0
3 changed files with 22 additions and 16 deletions

View File

@@ -4,7 +4,8 @@ import type { CanvasLayoutEvent, CanvasLayoutSource } from '@/composables/useCan
import { useCanvasLayout } from '@/composables/useCanvasLayout'; import { useCanvasLayout } from '@/composables/useCanvasLayout';
import { useCanvasNodeHover } from '@/composables/useCanvasNodeHover'; import { useCanvasNodeHover } from '@/composables/useCanvasNodeHover';
import { useCanvasTraversal } from '@/composables/useCanvasTraversal'; 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 { useKeybindings } from '@/composables/useKeybindings';
import type { PinDataSource } from '@/composables/usePinnedData'; import type { PinDataSource } from '@/composables/usePinnedData';
import { CanvasKey } from '@/constants'; import { CanvasKey } from '@/constants';
@@ -603,18 +604,16 @@ const nodeDataById = computed(() => {
const contextMenu = useContextMenu(); const contextMenu = useContextMenu();
function onOpenContextMenu(event: MouseEvent) { function onOpenContextMenu(event: MouseEvent, target?: Pick<ContextMenuTarget, 'nodeId'>) {
contextMenu.open(event, { contextMenu.open(event, {
source: 'canvas', source: 'canvas',
nodeIds: selectedNodeIds.value, nodeIds: selectedNodeIds.value,
...target,
}); });
} }
function onOpenSelectionContextMenu({ event }: { event: MouseEvent }) { function onOpenSelectionContextMenu({ event }: { event: MouseEvent }) {
contextMenu.open(event, { onOpenContextMenu(event);
source: 'canvas',
nodeIds: selectedNodeIds.value,
});
} }
function onOpenNodeContextMenu( function onOpenNodeContextMenu(
@@ -622,11 +621,14 @@ function onOpenNodeContextMenu(
event: MouseEvent, event: MouseEvent,
source: 'node-button' | 'node-right-click', source: 'node-button' | 'node-right-click',
) { ) {
if (selectedNodeIds.value.includes(id)) { if (source === 'node-button') {
onOpenContextMenu(event); 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[]) { async function onContextMenuAction(action: ContextMenuAction, nodeIds: string[]) {

View File

@@ -22,7 +22,7 @@ exports[`useContextMenu > Read-only mode > should return the correct actions whe
"label": "Rename", "label": "Rename",
"shortcut": { "shortcut": {
"keys": [ "keys": [
"F2", "Space",
], ],
}, },
}, },
@@ -213,7 +213,7 @@ exports[`useContextMenu > should return the correct actions opening the menu fro
"label": "Rename", "label": "Rename",
"shortcut": { "shortcut": {
"keys": [ "keys": [
"F2", "Space",
], ],
}, },
}, },
@@ -323,7 +323,7 @@ exports[`useContextMenu > should return the correct actions when right clicking
"label": "Rename", "label": "Rename",
"shortcut": { "shortcut": {
"keys": [ "keys": [
"F2", "Space",
], ],
}, },
}, },

View File

@@ -14,7 +14,7 @@ import { isPresent } from '../utils/typesUtils';
import { getResourcePermissions } from '@/permissions'; import { getResourcePermissions } from '@/permissions';
export type ContextMenuTarget = export type ContextMenuTarget =
| { source: 'canvas'; nodeIds: string[] } | { source: 'canvas'; nodeIds: string[]; nodeId?: string }
| { source: 'node-right-click'; nodeId: string } | { source: 'node-right-click'; nodeId: string }
| { source: 'node-button'; nodeId: string }; | { source: 'node-button'; nodeId: string };
export type ContextMenuActionCallback = (action: ContextMenuAction, nodeIds: string[]) => void; export type ContextMenuActionCallback = (action: ContextMenuAction, nodeIds: string[]) => void;
@@ -108,7 +108,11 @@ export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) =
const open = (event: MouseEvent, menuTarget: ContextMenuTarget) => { const open = (event: MouseEvent, menuTarget: ContextMenuTarget) => {
event.stopPropagation(); 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 context menu, let browser open native context menu
close(); close();
return; return;
@@ -244,7 +248,7 @@ export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) =
{ {
id: 'rename', id: 'rename',
label: i18n.baseText('contextMenu.rename'), label: i18n.baseText('contextMenu.rename'),
shortcut: { keys: ['F2'] }, shortcut: { keys: ['Space'] },
disabled: isReadOnly.value, disabled: isReadOnly.value,
}, },
]; ];