Slightly improve history performance

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);
 }

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);
 }

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<IHistoryProps> = (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(
       <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}{isCurrentText}
+        {desc}
       </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}`}>