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/ContainerOperations.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
@@ -8,6 +8,7 @@ import IProperties from '../../Interfaces/IProperties';
 import { AddMethod } from '../../Enums/AddMethod';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { transformPosition } from '../SVG/Elements/Container';
+import { XPositionReference } from '../../Enums/XPositionReference';
 
 /**
  * Select a container
@@ -209,7 +210,6 @@ export function AddContainer(
   x = ApplyAddMethod(index, containerConfig, parentClone, x);
 
   const defaultProperties: IProperties = {
-    ...containerConfig.Style,
     id: `${type}-${count}`,
     parentId: parentClone.properties.id,
     x,
@@ -218,7 +218,8 @@ export function AddContainer(
     height,
     isRigidBody: false,
     isAnchor: false,
-    XPositionReference: containerConfig.XPositionReference
+    XPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left,
+    style: containerConfig.Style
   };
 
   // Create the container

src/Components/Editor/Editor.tsx

@@ -91,16 +91,15 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
           setHistory,
           setHistoryCurrentStep
         )}
-        OnPropertyChange={(key, value) => OnPropertyChange(
-          key, value,
+        OnPropertyChange={(key, value, isStyle) => OnPropertyChange(
+          key, value, isStyle,
           history,
           historyCurrentStep,
           setHistory,
           setHistoryCurrentStep
         )}
-        OnPropertiesSubmit={(event, properties) => OnPropertiesSubmit(
+        OnPropertiesSubmit={(event) => OnPropertiesSubmit(
           event,
-          properties,
           history,
           historyCurrentStep,
           setHistory,

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