Unrefactor Properties form to allow more freedom on the input types and form (#32)

- The css style is now in IProperties.Style again.
- Forms are divided in DynamicForm and StaticForm
- Faster because less logic
- Add RadioGroupButton
- Add InputGroup
- Fix Children Dimensions not using x for their origin

Co-authored-by: Eric NGUYEN <enguyen@techform.fr>
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/32

src/Components/Editor/PropertiesOperations.ts

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
-import IProperties from '../../Interfaces/IProperties';
 import { findContainerById } from '../../utils/itertools';
 import { getCurrentHistory } from './Editor';
 import { RecalculatePhysics } from './Behaviors/RigidBodyBehaviors';
@@ -17,6 +16,7 @@ import { ImposePosition } from './Behaviors/AnchorBehaviors';
 export function OnPropertyChange(
   key: string,
   value: string | number | boolean,
+  isStyle: boolean = false,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@@ -37,10 +37,14 @@ export function OnPropertyChange(
     throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
   }
 
-  if (INPUT_TYPES[key] === 'number') {
-    (container.properties as any)[key] = Number(value);
+  if (isStyle) {
+    (container.properties.style as any)[key] = value;
   } else {
-    (container.properties as any)[key] = value;
+    if (INPUT_TYPES[key] === 'number') {
+      (container.properties as any)[key] = Number(value);
+    } else {
+      (container.properties as any)[key] = value;
+    }
   }
 
   if (container.properties.isAnchor) {
@@ -70,7 +74,6 @@ export function OnPropertyChange(
   */
 export function OnPropertiesSubmit(
   event: React.SyntheticEvent<HTMLFormElement>,
-  properties: IProperties,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@@ -92,18 +95,42 @@ export function OnPropertiesSubmit(
     throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
   }
 
-  for (const property in properties) {
-    const input = (event.target as HTMLFormElement).querySelector(`#${property}`);
+  // Assign container properties
+  for (const property in container.properties) {
+    const input: HTMLInputElement | HTMLDivElement | null = (event.target as HTMLFormElement).querySelector(`#${property}`);
+
+    if (input === null) {
+      continue;
+    }
+
     if (input instanceof HTMLInputElement) {
       (container.properties as any)[property] = input.value;
       if (INPUT_TYPES[property] === 'number') {
         (container.properties as any)[property] = Number(input.value);
-      } else {
-        (container.properties as any)[property] = input.value;
+      }
+    } else if (input instanceof HTMLDivElement) {
+      const radiobutton: HTMLInputElement | null = input.querySelector(`input[name="${property}"]:checked`);
+
+      if (radiobutton === null) {
+        continue;
+      }
+
+      (container.properties as any)[property] = radiobutton.value;
+      if (INPUT_TYPES[property] === 'number') {
+        (container.properties as any)[property] = Number(radiobutton.value);
       }
     }
   }
 
+  // Assign cssproperties
+  for (const styleProperty in container.properties.style) {
+    const input: HTMLInputElement | null = (event.target as HTMLFormElement).querySelector(`#${styleProperty}`);
+    if (input === null) {
+      continue;
+    }
+    (container.properties.style as any)[styleProperty] = input.value;
+  }
+
   if (container.properties.isRigidBody) {
     RecalculatePhysics(container);
   }