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