Add option for the properties form to only update on submit (#23)

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

src/Components/Editor/ContainerOperations.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { HistoryState } from '../../Interfaces/HistoryState';
 import { Configuration } from '../../Interfaces/Configuration';
 import { ContainerModel, IContainerModel } from '../../Interfaces/ContainerModel';
@@ -60,7 +60,7 @@ export function DeleteContainer(
   }
 
   if (container === null || container === undefined) {
-    throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
+    throw new Error('[DeleteContainer] Container model was not found among children of the main container!');
   }
 
   if (container.parent != null) {
@@ -266,6 +266,76 @@ export function OnPropertyChange(
   setHistoryCurrentStep(history.length);
 }
 
+/**
+  * Handled the property change event in the properties form
+  * @param key Property name
+  * @param value New value of the property
+  * @returns void
+  */
+export function OnPropertiesSubmit(
+  event: React.SyntheticEvent<HTMLFormElement>,
+  refs: Array<React.RefObject<HTMLInputElement>>,
+  fullHistory: HistoryState[],
+  historyCurrentStep: number,
+  setHistory: Dispatch<SetStateAction<HistoryState[]>>,
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+): void {
+  event.preventDefault();
+  const history = getCurrentHistory(fullHistory, historyCurrentStep);
+  const current = history[history.length - 1];
+
+  if (current.SelectedContainer === null ||
+      current.SelectedContainer === undefined) {
+    throw new Error('[OnPropertyChange] Property was changed before selecting a Container');
+  }
+
+  if (parent === null) {
+    const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer);
+    for (const ref of refs) {
+      const input = ref.current;
+      if (input instanceof HTMLInputElement) {
+        (selectedContainerClone.properties as any)[input.id] = input.value;
+      }
+    }
+    setHistory(history.concat([{
+      LastAction: 'Change property of main',
+      MainContainer: selectedContainerClone,
+      SelectedContainer: selectedContainerClone,
+      SelectedContainerId: selectedContainerClone.properties.id,
+      TypeCounters: Object.assign({}, current.TypeCounters)
+    }]));
+    setHistoryCurrentStep(history.length);
+    return;
+  }
+
+  const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
+  const container: ContainerModel | undefined = findContainerById(mainContainerClone, current.SelectedContainer.properties.id);
+
+  if (container === null || container === undefined) {
+    throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
+  }
+
+  for (const ref of refs) {
+    const input = ref.current;
+    if (input instanceof HTMLInputElement) {
+      (container.properties as any)[input.id] = input.value;
+    }
+  }
+
+  if (container.properties.isRigidBody) {
+    RecalculatePhysics(container);
+  }
+
+  setHistory(history.concat([{
+    LastAction: `Change property of container ${container.properties.id}`,
+    MainContainer: mainContainerClone,
+    SelectedContainer: container,
+    SelectedContainerId: container.properties.id,
+    TypeCounters: Object.assign({}, current.TypeCounters)
+  }]));
+  setHistoryCurrentStep(history.length);
+}
+
 // TODO put this in a different file
 
 export function RecalculatePhysics(container: IContainerModel): IContainerModel {