Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add shortcut description to right click + add Suppr shortcut + Fix next selection after deletion

Browse source
This commit is contained in:
Eric NGUYEN 2022-10-04 16:51:24 +02:00
parent 4e3c5d71fd
commit d580890b9d
6 changed files with 87 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Components/Editor/Actions/ContainerOperations.ts
View file

@ -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;

5
src/Components/Editor/Actions/Shortcuts.ts
View file

@ -6,7 +6,8 @@ export function OnKey(
event: KeyboardEvent,
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch<SetStateAction<number>>
setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
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();
}
}

20
src/Components/Editor/Editor.tsx
View file

@ -34,6 +34,7 @@ function InitActions(
[{
text: 'Delete',
title: 'Delete the container',
shortcut: '<kbd>Suppr</kbd>',
action: (target: HTMLElement) => {
const id = target.id;
const newHistory = DeleteContainer(
@ -50,6 +51,7 @@ function InitActions(
[{
text: 'Delete',
title: 'Delete the container',
shortcut: '<kbd>Suppr</kbd>',
action: (target: HTMLElement) => {
const id = target.id;
const newHistory = DeleteSymbol(
@ -99,7 +101,8 @@ function InitActions(
function UseShortcuts(
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch<SetStateAction<number>>
setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
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,

4
src/Components/Menu/Menu.tsx
View file

@ -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)} />);
});
};

7
src/Components/Menu/MenuItem.tsx
View file

@ -4,15 +4,18 @@ interface IMenuItemProps {
className?: string
text: string
title?: string
shortcut?: string
onClick: () => void
}
export function MenuItem(props: IMenuItemProps): JSX.Element {
return (
<button type="button"
className={props.className}
className={`flex place-content-between ${props.className ?? ''}`}
title={props.title}
onClick={() => props.onClick()}>{props.text}
onClick={() => props.onClick()}>
{props.text}
<span dangerouslySetInnerHTML={{ __html: props.shortcut ?? '' }} />
</button>
);
}

56
test-server/http.js
View file

@ -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',