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({
+  setHistory(history.concat([{
-    LastAction: `Select ${selectedContainer.properties.id}`,
+    LastAction: `Select container ${selectedContainer.properties.id}`,
     MainContainer: mainContainerClone,
     SelectedContainer: selectedContainer,
     SelectedContainerId: selectedContainer.properties.id,
     TypeCounters: Object.assign({}, current.TypeCounters)
-  });
+  }]));
-  setHistory(history);
+  setHistoryCurrentStep(history.length);
-  setHistoryCurrentStep(history.length - 1);
 }
 
 /**
@@ -88,15 +87,14 @@ export function DeleteContainer(
     container.parent;
   const SelectedContainerId = SelectedContainer.properties.id;
 
-  history.push({
+  setHistory(history.concat([{
-    LastAction: `Delete ${containerId}`,
+    LastAction: `Delete container ${containerId}`,
     MainContainer: mainContainerClone,
     SelectedContainer,
     SelectedContainerId,
     TypeCounters: Object.assign({}, current.TypeCounters)
-  });
+  }]));
-  setHistory(history);
+  setHistoryCurrentStep(history.length);
-  setHistoryCurrentStep(history.length - 1);
 }
 
 /**
@@ -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);
-  setHistoryCurrentStep(history.length - 1);
 }

src/Components/Editor/PropertiesOperations.ts

@@ -51,15 +51,14 @@ export function OnPropertyChange(
     RecalculatePhysics(container);
   }
 
-  history.push({
+  setHistory(history.concat([{
-    LastAction: `Change ${key} of ${container.properties.id}`,
+    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);
-  setHistoryCurrentStep(history.length - 1);
 }
 
 /**
@@ -108,13 +107,12 @@ export function OnPropertiesSubmit(
     RecalculatePhysics(container);
   }
 
-  history.push({
+  setHistory(history.concat([{
-    LastAction: `Change properties of ${container.properties.id}`,
+    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);
-  setHistoryCurrentStep(history.length - 1);
 }

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -97,6 +97,11 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
     );
 
     return () => {
+      elementRef.current?.removeEventListener(
+        'contextmenu',
+        onContextMenu
+      );
+
       window.removeEventListener(
         'click',
         onLeftClick

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<IHistoryProps> = (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 states = props.history.map((step, move) => {
-    const step = props.history[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 (
+
       <button
         key={move}
         onClick={() => props.jumpTo(move)}
-        title={step.LastAction}
         className={
           `w-full elements-sidebar-row whitespace-pre
             text-left text-sm font-medium transition-all ${selectedClass}`
         }
       >
-        {desc}
+        {desc}{isCurrentText}
       </button>
     );
-  }
+  });
+
+  // recent first
+  states.reverse();
 
   return (
     <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>