diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index 63d90a0..840f8d6 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/src/Components/Editor/ContainerOperations.ts @@ -27,14 +27,15 @@ export function SelectContainer( throw new Error('[SelectContainer] Cannot find container among children of main container!'); } - setHistory(history.concat([{ + history.push({ LastAction: `Select container ${selectedContainer.properties.id}`, MainContainer: mainContainerClone, SelectedContainer: selectedContainer, SelectedContainerId: selectedContainer.properties.id, TypeCounters: Object.assign({}, current.TypeCounters) - }])); - setHistoryCurrentStep(history.length); + }); + setHistory(history); + setHistoryCurrentStep(history.length - 1); } /** @@ -87,14 +88,15 @@ export function DeleteContainer( container.parent; const SelectedContainerId = SelectedContainer.properties.id; - setHistory(history.concat([{ + history.push({ LastAction: `Delete container ${containerId}`, MainContainer: mainContainerClone, SelectedContainer, SelectedContainerId, TypeCounters: Object.assign({}, current.TypeCounters) - }])); - setHistoryCurrentStep(history.length); + }); + setHistory(history); + setHistoryCurrentStep(history.length - 1); } /** @@ -235,12 +237,13 @@ export function AddContainer( } // Update the state - setHistory(history.concat([{ + history.push({ LastAction: 'Add container', MainContainer: clone, SelectedContainer: parentClone, SelectedContainerId: parentClone.properties.id, TypeCounters: newCounters - }])); - setHistoryCurrentStep(history.length); + }); + setHistory(history); + setHistoryCurrentStep(history.length - 1); } diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index ed5a4db..4bd4c2d 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/src/Components/Editor/PropertiesOperations.ts @@ -51,14 +51,15 @@ export function OnPropertyChange( RecalculatePhysics(container); } - setHistory(history.concat([{ - LastAction: `Change property of container ${container.properties.id}`, + history.push({ + LastAction: `Change ${key} of ${container.properties.id}`, MainContainer: mainContainerClone, SelectedContainer: container, SelectedContainerId: container.properties.id, TypeCounters: Object.assign({}, current.TypeCounters) - }])); - setHistoryCurrentStep(history.length); + }); + setHistory(history); + setHistoryCurrentStep(history.length - 1); } /** @@ -107,12 +108,13 @@ export function OnPropertiesSubmit( RecalculatePhysics(container); } - setHistory(history.concat([{ - LastAction: `Change property of container ${container.properties.id}`, + history.push({ + LastAction: `Change properties of ${container.properties.id}`, MainContainer: mainContainerClone, SelectedContainer: container, SelectedContainerId: container.properties.id, TypeCounters: Object.assign({}, current.TypeCounters) - }])); - setHistoryCurrentStep(history.length); + }); + setHistory(history); + setHistoryCurrentStep(history.length - 1); } diff --git a/src/Components/History/History.tsx b/src/Components/History/History.tsx index dd8e676..6d7e5e4 100644 --- a/src/Components/History/History.tsx +++ b/src/Components/History/History.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IHistoryState } from "../../Interfaces/IHistoryState"; +import { IHistoryState } from '../../Interfaces/IHistoryState'; interface IHistoryProps { history: IHistoryState[] @@ -10,38 +10,31 @@ interface IHistoryProps { export const History: React.FC = (props: IHistoryProps) => { const isOpenClasses = props.isOpen ? 'right-0' : '-right-64'; - - const states = props.history.map((step, move) => { + const states: JSX.Element[] = []; + for (let move = props.history.length - 1; move >= 0; move--) { + const step = props.history[move]; const desc = move > 0 - ? `Go to modification n°${move}` + ? `${move}: ${step.LastAction}` : 'Go to the beginning'; - const isCurrent = move === props.historyCurrentStep; - - const selectedClass = isCurrent + const selectedClass = move === props.historyCurrentStep ? 'bg-blue-500 hover:bg-blue-600' : 'bg-slate-500 hover:bg-slate-700'; - const isCurrentText = isCurrent - ? ' (current)' - : ''; - return ( - + states.push( ); - }); - - // recent first - states.reverse(); + } return (