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/SVG/Elements/Container.tsx

@@ -36,12 +36,8 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   // Rect style
   const style = Object.assign(
     JSON.parse(JSON.stringify(defaultStyle)),
-    props.model.properties
+    props.model.properties.style
   );
-  style.x = 0;
-  style.y = 0;
-  delete style.height;
-  delete style.width;
 
   // Dimension props
   const depth = getDepth(props.model);
@@ -54,7 +50,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   const text = (props.model.properties.width ?? 0).toString();
 
   let dimensionChildren: JSX.Element | null = null;
-  if (props.model.children.length > 0) {
+  if (props.model.children.length > 1) {
     const {
       childrenId,
       xChildrenStart,
@@ -112,14 +108,16 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb
 
   const lastChild = props.model.children[props.model.children.length - 1];
   let xChildrenStart = lastChild.properties.x;
-  let xChildrenEnd = lastChild.properties.x + lastChild.properties.width;
+  let xChildrenEnd = lastChild.properties.x;
+
+  // Find the min and max
   for (let i = props.model.children.length - 2; i >= 0; i--) {
     const child = props.model.children[i];
     const left = child.properties.x;
     if (left < xChildrenStart) {
       xChildrenStart = left;
     }
-    const right = child.properties.x + child.properties.width;
+    const right = child.properties.x;
     if (right > xChildrenEnd) {
       xChildrenEnd = right;
     }