diff --git a/src/Components/Editor/Actions/Shortcuts.ts b/src/Components/Editor/Actions/Shortcuts.ts index a81660c..082770e 100644 --- a/src/Components/Editor/Actions/Shortcuts.ts +++ b/src/Components/Editor/Actions/Shortcuts.ts @@ -7,7 +7,8 @@ export function OnKey( history: IHistoryState[], historyCurrentStep: number, setHistoryCurrentStep: Dispatch>, - 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(); } } diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx index 14fd26b..095f644 100644 --- a/src/Components/Editor/Editor.tsx +++ b/src/Components/Editor/Editor.tsx @@ -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>, - 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(structuredClone(props.history)); @@ -72,6 +75,10 @@ export function Editor(props: IEditorProps): JSX.Element { const editorRef = useRef(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} />