Optimize history and fix nodes pollution + fix css + removes motion.framer (#28)

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/28

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([{
-    LastAction: `Select container ${selectedContainer.properties.id}`,
+  history.push({
+    LastAction: `Select ${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([{
-    LastAction: `Delete container ${containerId}`,
+  history.push({
+    LastAction: `Delete ${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/Editor.tsx

@@ -42,12 +42,23 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
       configuration: props.configuration
     };
 
+    const funcs = new Map<string, () => void>();
     for (const event of events) {
-      editorRef.current?.addEventListener(event.name, () => event.func(editorState));
+      const func = (): void => event.func(editorState);
+      editorRef.current?.addEventListener(event.name, func);
+      funcs.set(event.name, func);
     }
 
     return () => {
       window.removeEventListener('keyup', onKeyUp);
+
+      for (const event of events) {
+        const func = funcs.get(event.name);
+        if (func === undefined) {
+          continue;
+        }
+        editorRef.current?.removeEventListener(event.name, func);
+      }
     };
   });
 

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