diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts index 255e655..4a7a2be 100644 --- a/src/Components/Editor/Actions/ContainerOperations.ts +++ b/src/Components/Editor/Actions/ContainerOperations.ts @@ -105,7 +105,7 @@ export function DeleteContainer( /** * Returns the next container that will be selected * after the selectedContainer is removed. - * If the selected container is removed, select the sibling before, + * If the selected container is removed, select the sibling after, * If there is no sibling, select the parent, * * @param mainContainerClone Main container @@ -121,7 +121,7 @@ function GetSelectedContainerOnDelete( index: number ): string { const newSelectedContainer = FindContainerById(mainContainerClone, selectedContainerId) ?? - parent.children.at(index - 1) ?? + parent.children.at(index) ?? parent; const newSelectedContainerId = newSelectedContainer.properties.id; return newSelectedContainerId; diff --git a/src/Components/Editor/Actions/Shortcuts.ts b/src/Components/Editor/Actions/Shortcuts.ts index 17f3010..a81660c 100644 --- a/src/Components/Editor/Actions/Shortcuts.ts +++ b/src/Components/Editor/Actions/Shortcuts.ts @@ -6,7 +6,8 @@ export function OnKey( event: KeyboardEvent, history: IHistoryState[], historyCurrentStep: number, - setHistoryCurrentStep: Dispatch> + setHistoryCurrentStep: Dispatch>, + deleteAction: () => void ): void { if (!ENABLE_SHORTCUTS) { return; @@ -24,5 +25,7 @@ export function OnKey( event.ctrlKey && historyCurrentStep < history.length - 1) { setHistoryCurrentStep(historyCurrentStep + 1); + } else if (event.key === 'Delete') { + deleteAction(); } } diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx index 1d4f0fa..77d0277 100644 --- a/src/Components/Editor/Editor.tsx +++ b/src/Components/Editor/Editor.tsx @@ -34,6 +34,7 @@ function InitActions( [{ text: 'Delete', title: 'Delete the container', + shortcut: 'Suppr', action: (target: HTMLElement) => { const id = target.id; const newHistory = DeleteContainer( @@ -50,6 +51,7 @@ function InitActions( [{ text: 'Delete', title: 'Delete the container', + shortcut: 'Suppr', action: (target: HTMLElement) => { const id = target.id; const newHistory = DeleteSymbol( @@ -99,7 +101,8 @@ function InitActions( function UseShortcuts( history: IHistoryState[], historyCurrentStep: number, - setHistoryCurrentStep: Dispatch> + setHistoryCurrentStep: Dispatch>, + deleteAction: () => void ): void { useEffect(() => { function OnKeyUp(event: KeyboardEvent): void { @@ -107,7 +110,8 @@ function UseShortcuts( event, history, historyCurrentStep, - setHistoryCurrentStep + setHistoryCurrentStep, + deleteAction ); } @@ -200,7 +204,17 @@ export function Editor(props: IEditorProps): JSX.Element { const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep); // Events - UseShortcuts(history, historyCurrentStep, setHistoryCurrentStep); + UseShortcuts( + history, + historyCurrentStep, + setHistoryCurrentStep, + () => { + const current = GetCurrentHistoryState(history, historyCurrentStep); + setNewHistory( + DeleteContainer(current.selectedContainerId, history, historyCurrentStep) + ); + } + ); UseCustomEvents( props.root, history, diff --git a/src/Components/Menu/Menu.tsx b/src/Components/Menu/Menu.tsx index 0b35dd6..a5d2b06 100644 --- a/src/Components/Menu/Menu.tsx +++ b/src/Components/Menu/Menu.tsx @@ -16,6 +16,9 @@ export interface IMenuAction { /** title to show on hover */ title?: string + /** description of the shortcut */ + shortcut?: string + /** function to be called on button click */ action: (target: HTMLElement) => void } @@ -101,6 +104,7 @@ export function Menu(props: IMenuProps): JSX.Element { className={'contextmenu-item'} text={action.text} title={action.title} + shortcut={action.shortcut} onClick={() => action.action(target)} />); }); }; diff --git a/src/Components/Menu/MenuItem.tsx b/src/Components/Menu/MenuItem.tsx index 9995572..ac21d10 100644 --- a/src/Components/Menu/MenuItem.tsx +++ b/src/Components/Menu/MenuItem.tsx @@ -4,15 +4,18 @@ interface IMenuItemProps { className?: string text: string title?: string + shortcut?: string onClick: () => void } export function MenuItem(props: IMenuItemProps): JSX.Element { return ( ); } diff --git a/test-server/http.js b/test-server/http.js index 90da3f5..187e347 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -116,7 +116,61 @@ const GetSVGLayoutConfiguration = () => { stroke: 'green', fill: 'white' }, - Category: "Stuff" + Category: "Stuff", + Actions: [ + { + Id: "SplitRemplissage", + Action: "SplitRemplissage", + Label: "Diviser le remplissage en insérant un montant", + Description: "Diviser le remplissage en insérant un montant", + CustomLogo: { + Base64Image: null, + Name: 'Image1', + Svg: null, + Url: "" + }, + AddingBehavior: 2 + }, + { + Id: "SplitRemplissageParent", + Action: "SplitRemplissageParent", + Label: "Diviser le remplissage en insérant un montant", + Description: "Diviser le remplissage en insérant un montant", + CustomLogo: { + Base64Image: null, + Name: 'Image1', + Svg: null, + Url: "" + }, + AddingBehavior: 3 + }, + { + Id: "SplitRemplissageParent", + Action: "SplitRemplissageParent", + Label: "Diviser le remplissage en insérant un montant", + Description: "Diviser le remplissage en insérant un montant", + CustomLogo: { + Base64Image: null, + Name: 'Image1', + Svg: null, + Url: "" + }, + AddingBehavior: 3 + }, + { + Id: "SplitRemplissageParent", + Action: "SplitRemplissageParent", + Label: "Diviser le remplissage en insérant un montant", + Description: "Diviser le remplissage en insérant un montant", + CustomLogo: { + Base64Image: null, + Name: 'Image1', + Svg: null, + Url: "" + }, + AddingBehavior: 3 + } + ], }, { Type: 'Remplissage',