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

Add Escape to shortcut to deselect replaceContainer

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-14 16:10:00 +01:00
parent b4c9c34403
commit 2d1e5c94d7
2 changed files with 98 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,8 @@ export function OnKey(
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
deleteAction: () => void
deleteAction: () => void,
resetState: () => void
): void {
if (!ENABLE_SHORTCUTS) {
return;
@ -27,5 +28,7 @@ export function OnKey(
setHistoryCurrentStep(historyCurrentStep + 1);
} else if (event.key === 'Delete') {
deleteAction();
} else if (event.key === 'Escape') {
resetState();
}
}

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

@ -1,7 +1,7 @@
import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
import React, { type Dispatch, type SetStateAction, useEffect, useRef } from 'react';
import './Editor.scss';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { type IConfiguration } from '../../Interfaces/IConfiguration';
import { type IHistoryState } from '../../Interfaces/IHistoryState';
import { UI } from '../UI/UI';
import { SelectContainer, DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations';
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
@ -13,7 +13,7 @@ import { FindContainerById } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import { InitActions } from './Actions/ContextMenuActions';
import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddContainer';
import { IReplaceContainer } from '../../Interfaces/IReplaceContainer';
import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
interface IEditorProps {
root: Element | Document
@ -26,16 +26,18 @@ function UseShortcuts(
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
deleteAction: () => void
deleteAction: () => void,
resetState: () => void
): void {
useEffect(() => {
function OnKeyUp(event: KeyboardEvent): void {
return OnKey(
OnKey(
event,
history,
historyCurrentStep,
setHistoryCurrentStep,
deleteAction
deleteAction,
resetState
);
}
@ -63,6 +65,7 @@ function UseNewHistoryState(
};
}
export function Editor(props: IEditorProps): JSX.Element {
// States
const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
@ -72,6 +75,10 @@ export function Editor(props: IEditorProps): JSX.Element {
const editorRef = useRef<HTMLDivElement>(null);
const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
function ResetState(): void {
setReplaceContainer({ isReplacing: false, id: undefined, category: undefined });
}
// Events
UseShortcuts(
history,
@ -82,7 +89,8 @@ export function Editor(props: IEditorProps): JSX.Element {
setNewHistory(
DeleteContainer(current.selectedContainerId, history, historyCurrentStep)
);
}
},
ResetState
);
UseCustomEvents(
props.root,
@ -125,25 +133,31 @@ export function Editor(props: IEditorProps): JSX.Element {
historyCurrentStep
}}
replaceContainer={replaceContainer}
selectContainer={(container) => setNewHistory(
SelectContainer(
container,
history,
historyCurrentStep
))}
deleteContainer={(containerId: string) => setNewHistory(
DeleteContainer(
containerId,
history,
historyCurrentStep
))}
onPropertyChange={(key, value, type) => setNewHistory(
OnPropertyChange(
key, value, type,
selected,
history,
historyCurrentStep
))}
selectContainer={(container) => {
setNewHistory(
SelectContainer(
container,
history,
historyCurrentStep
));
}}
deleteContainer={(containerId: string) => {
setNewHistory(
DeleteContainer(
containerId,
history,
historyCurrentStep
));
}}
onPropertyChange={(key, value, type) => {
setNewHistory(
OnPropertyChange(
key, value, type,
selected,
history,
historyCurrentStep
));
}}
addOrReplaceContainer={(type) => {
if (selected === null || selected === undefined) {
return;
@ -168,48 +182,60 @@ export function Editor(props: IEditorProps): JSX.Element {
));
}
}}
addContainerAt={(index, type, parent) => setNewHistory(
AddContainer(
index,
type,
parent,
configuration,
addContainerAt={(index, type, parent) => {
setNewHistory(
AddContainer(
index,
type,
parent,
configuration,
history,
historyCurrentStep
)
);
}}
addSymbol={(type) => {
setNewHistory(
AddSymbol(
type,
configuration,
history,
historyCurrentStep
));
}}
onSymbolPropertyChange={(key, value) => {
setNewHistory(
OnSymbolPropertyChange(
key, value,
history,
historyCurrentStep
));
}}
selectSymbol={(symbolId) => {
setNewHistory(
SelectSymbol(
symbolId,
history,
historyCurrentStep
));
}}
deleteSymbol={(symbolId) => {
setNewHistory(
DeleteSymbol(
symbolId,
history,
historyCurrentStep
));
}}
saveEditorAsJSON={() => {
SaveEditorAsJSON(
history,
historyCurrentStep
)
)}
addSymbol={(type) => setNewHistory(
AddSymbol(
type,
configuration,
history,
historyCurrentStep
))}
onSymbolPropertyChange={(key, value) => setNewHistory(
OnSymbolPropertyChange(
key, value,
history,
historyCurrentStep
))}
selectSymbol={(symbolId) => setNewHistory(
SelectSymbol(
symbolId,
history,
historyCurrentStep
))}
deleteSymbol={(symbolId) => setNewHistory(
DeleteSymbol(
symbolId,
history,
historyCurrentStep
))}
saveEditorAsJSON={() => SaveEditorAsJSON(
history,
historyCurrentStep,
configuration
)}
saveEditorAsSVG={() => SaveEditorAsSVG()}
loadState={(move) => setHistoryCurrentStep(move)}
historyCurrentStep,
configuration
);
}}
saveEditorAsSVG={() => { SaveEditorAsSVG(); }}
loadState={(move) => { setHistoryCurrentStep(move); }}
setReplaceContainer={setReplaceContainer}
/>
<Menu