src/Components/App/MenuActions.ts

@@ -24,11 +24,9 @@ export function NewEditor(
           height: Number(configuration.MainContainer.Height),
           isRigidBody: false,
           isAnchor: false,
-          style: {
           fillOpacity: 0,
           stroke: 'black'
         }
-        }
       );
 
       // Save the configuration and the new MainContainer

src/Components/Editor/ContainerOperations.ts

@@ -209,6 +209,7 @@ export function AddContainer(
   x = ApplyAddMethod(index, containerConfig, parentClone, x);
 
   const defaultProperties: IProperties = {
+    ...containerConfig.Style,
     id: `${type}-${count}`,
     parentId: parentClone.properties.id,
     x,
@@ -217,8 +218,7 @@ export function AddContainer(
     height,
     isRigidBody: false,
     isAnchor: false,
-    xPositionReference: containerConfig.XPositionReference,
+    XPositionReference: containerConfig.XPositionReference
-    style: containerConfig.Style
   };
 
   // Create the container
@@ -270,7 +270,7 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par
         lastChild.properties.x,
         lastChild.properties.y,
         lastChild.properties.width,
-        lastChild.properties.xPositionReference
+        lastChild.properties.XPositionReference
       );
 
       x += transformedX + lastChild.properties.width;

src/Components/Editor/Editor.tsx

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

src/Components/Editor/PropertiesOperations.ts

@@ -1,6 +1,7 @@
 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';
@@ -16,7 +17,6 @@ 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,15 +37,11 @@ export function OnPropertyChange(
     throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
   }
 
-  if (isStyle) {
-    (container.properties.style as any)[key] = value;
-  } else {
   if (INPUT_TYPES[key] === 'number') {
     (container.properties as any)[key] = Number(value);
   } else {
     (container.properties as any)[key] = value;
   }
-  }
 
   if (container.properties.isAnchor) {
     ImposePosition(container);
@@ -74,6 +70,7 @@ export function OnPropertyChange(
   */
 export function OnPropertiesSubmit(
   event: React.SyntheticEvent<HTMLFormElement>,
+  properties: IProperties,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@@ -95,34 +92,16 @@ export function OnPropertiesSubmit(
     throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
   }
 
-  // Assign container properties
+  for (const property in properties) {
-  for (const property in container.properties) {
     const input = (event.target as HTMLFormElement).querySelector(`#${property}`);
     if (input instanceof HTMLInputElement) {
       (container.properties as any)[property] = input.value;
-
       if (INPUT_TYPES[property] === 'number') {
         (container.properties as any)[property] = Number(input.value);
-        continue;
+      } else {
-      }
-
         (container.properties as any)[property] = input.value;
       }
     }
-
-  // Assign cssproperties
-  for (const styleProperty in container.properties.style) {
-    const input = (event.target as HTMLFormElement).querySelector(`#${styleProperty}`);
-    if (input instanceof HTMLInputElement) {
-      (container.properties.style as any)[styleProperty] = input.value;
-
-      if (INPUT_TYPES[styleProperty] === 'number') {
-        (container.properties.style as any)[styleProperty] = Number(input.value);
-        continue;
-      }
-
-      (container.properties.style as any)[styleProperty] = input.value;
-    }
   }
 
   if (container.properties.isRigidBody) {

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -14,8 +14,8 @@ interface IElementsSidebarProps {
   isOpen: boolean
   isHistoryOpen: boolean
   SelectedContainer: IContainerModel | null
-  OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
+  OnPropertyChange: (key: string, value: string | number | boolean) => void
-  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, properties: ContainerProperties) => void
   SelectContainer: (container: IContainerModel) => void
   DeleteContainer: (containerid: string) => void
   AddContainer: (index: number, type: string, parent: string) => void

src/Components/InputGroup/InputGroup.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-interface IInputGroupProps {
-  labelKey?: string
-  labelText: string
-  inputKey: string
-  labelClassName: string
-  inputClassName: string
-  type: string
-  value?: string
-  checked?: boolean
-  defaultValue?: string
-  defaultChecked?: boolean
-  isDisabled?: boolean
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-const className = `
-        w-full
-        text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
-        bg-white border-2 border-white rounded-lg placeholder-gray-800
-        focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
-        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;
-
-export const InputGroup: React.FunctionComponent<IInputGroupProps> = (props) => {
-  return <>
-    <label
-      key={props.labelKey}
-      className={`mt-4 text-xs font-medium text-gray-800 ${props.labelClassName}`}
-      htmlFor={props.inputKey}
-    >
-      { props.labelText }
-
-    </label>
-    <input
-      key={props.inputKey}
-      id={props.inputKey}
-      className={`${className} ${props.inputClassName}`}
-      type={props.type}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      checked={props.checked}
-      defaultChecked={props.defaultChecked}
-      onChange={props.onChange}
-      disabled={props.isDisabled}
-    />
-  </>;
-};

src/Components/Properties/DynamicForm.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import IProperties from '../../Interfaces/IProperties';
-import { InputGroup } from '../InputGroup/InputGroup';
-
-interface IDynamicFormProps {
-  properties: IProperties
-  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
-}
-
-const getCSSInputs = (
-  properties: IProperties,
-  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
-): JSX.Element[] => {
-  const groupInput: JSX.Element[] = [];
-  for (const key in properties.style) {
-    groupInput.push(<InputGroup
-      key={key}
-      labelText={key}
-      inputKey={key}
-      labelClassName=''
-      inputClassName=''
-      type='string'
-      value={(properties.style as any)[key]}
-      onChange={(event) => onChange(key, event.target.value, true)}
-    />);
-  }
-  return groupInput;
-};
-
-const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
-  return (
-    <div className='grid grid-cols-2 gap-y-4'>
-      <InputGroup
-        labelText='Name'
-        inputKey='id'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.id.toString()}
-        isDisabled={true}
-      />
-      <InputGroup
-        labelText='Parent name'
-        inputKey='id'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.parentId?.toString()}
-        isDisabled={true}
-      />
-      <InputGroup
-        labelText='x'
-        inputKey='x'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        value={props.properties.x.toString()}
-        onChange={(event) => props.onChange('x', event.target.value)}
-      />
-      <InputGroup
-        labelText='y'
-        inputKey='y'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        value={props.properties.y.toString()}
-        onChange={(event) => props.onChange('y', event.target.value)}
-      />
-      <InputGroup
-        labelText='Width'
-        inputKey='width'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        value={props.properties.width.toString()}
-        onChange={(event) => props.onChange('width', event.target.value)}
-      />
-      <InputGroup
-        labelText='Height'
-        inputKey='height'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        value={props.properties.height.toString()}
-        onChange={(event) => props.onChange('height', event.target.value)}
-      />
-      <InputGroup
-        labelText='Rigid'
-        inputKey='isRigidBody'
-        labelClassName=''
-        inputClassName=''
-        type='checkbox'
-        checked={props.properties.isRigidBody}
-        onChange={(event) => props.onChange('isRigidBody', event.target.checked)}
-      />
-      <InputGroup
-        labelText='Anchor'
-        inputKey='isAnchor'
-        labelClassName=''
-        inputClassName=''
-        type='checkbox'
-        checked={props.properties.isAnchor}
-        onChange={(event) => props.onChange('isAnchor', event.target.checked)}
-      />
-      <InputGroup
-        labelText='Horizontal alignment'
-        inputKey='xPositionReference'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        checked={props.properties.isRigidBody}
-        onChange={(event) => props.onChange('xPositionReference', event.target.value)}
-      />
-      { getCSSInputs(props.properties, props.onChange) }
-    </div>
-  );
-};
-
-export default DynamicForm;

src/Components/Properties/Form.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import IProperties from '../../Interfaces/IProperties';
-import DynamicForm from './DynamicForm';
-import StaticForm from './StaticForm';
-
-interface IFormProps {
-  properties: IProperties
-  isDynamicInput: boolean
-  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
-  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
-}
-
-export const Form: React.FunctionComponent<IFormProps> = (props) => {
-  if (props.isDynamicInput) {
-    return <DynamicForm
-      properties={props.properties}
-      onChange={props.onChange}
-    />;
-  }
-  return <StaticForm
-    properties={props.properties}
-    onSubmit={props.onSubmit}
-  />;
-};

src/Components/Properties/Properties.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import IProperties from '../../Interfaces/IProperties';
+import ContainerProperties from '../../Interfaces/IProperties';
 import { ToggleButton } from '../ToggleButton/ToggleButton';
-import { Form } from './Form';
+import { INPUT_TYPES } from './PropertiesInputTypes';
 
 interface IPropertiesProps {
-  properties?: IProperties
+  properties?: ContainerProperties
-  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
+  onChange: (key: string, value: string | number | boolean) => void
-  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  onSubmit: (event: React.FormEvent<HTMLFormElement>, properties: ContainerProperties) => void
 }
 
 export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
@@ -16,6 +16,26 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
     return <div></div>;
   }
 
+  const groupInput: React.ReactNode[] = [];
+  Object
+    .entries(props.properties)
+    .forEach((pair) => handleProperties(pair, groupInput, isDynamicInput, props.onChange));
+
+  const form = isDynamicInput
+    ? <div className='grid grid-cols-2 gap-4'>
+      { groupInput }
+    </div>
+    : <form
+      key={props.properties.id}
+      onSubmit={(event) => props.onSubmit(event, props.properties as ContainerProperties)}
+    >
+      <input type='submit' className='normal-btn block mx-auto mb-4 border-2 border-blue-400 cursor-pointer' value='Submit'/>
+      <div className='grid grid-cols-2 gap-y-4'>
+        { groupInput }
+      </div>
+    </form>
+    ;
+
   return (
     <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
       <ToggleButton
@@ -25,12 +45,72 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
         checked={isDynamicInput}
         onChange={() => setIsDynamicInput(!isDynamicInput)}
       />
-      <Form
+      { form }
-        properties={props.properties}
-        isDynamicInput={isDynamicInput}
-        onChange={props.onChange}
-        onSubmit={props.onSubmit}
-      />
     </div>
   );
 };
+
+const handleProperties = (
+  [key, value]: [string, string | number],
+  groupInput: React.ReactNode[],
+  isDynamicInput: boolean,
+  onChange: (key: string, value: string | number | boolean) => void
+): void => {
+  const id = `property-${key}`;
+  let type = 'text';
+  let checked;
+
+  /// hardcoded stuff for ergonomy ///
+  if (typeof value === 'boolean') {
+    checked = value;
+  }
+
+  if (key in INPUT_TYPES) {
+    type = INPUT_TYPES[key];
+  }
+
+  const className = `
+        w-full
+        text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
+        bg-white border-2 border-white rounded-lg placeholder-gray-800
+        focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
+        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;
+  const isDisabled = ['id', 'parentId'].includes(key);
+  const input = isDynamicInput
+    ? <input
+      key={key}
+      id={key}
+      className={className}
+      type={type}
+      value={value}
+      checked={checked}
+      onChange={(event) => {
+        if (type === 'checkbox') {
+          onChange(key, event.target.checked);
+          return;
+        }
+        onChange(key, event.target.value);
+      }}
+      disabled={isDisabled}
+    />
+    : <input
+      key={key}
+      id={key}
+      className={className}
+      type={type}
+      defaultValue={value}
+      defaultChecked={checked}
+      disabled={isDisabled}
+    />;
+
+  groupInput.push(
+    <label
+      key={id}
+      className='mt-4 text-xs font-medium text-gray-800'
+      htmlFor={key}
+    >
+      {key}
+    </label>
+  );
+  groupInput.push(input);
+};

src/Components/Properties/StaticForm.tsx

@@ -1,112 +0,0 @@
-import * as React from 'react';
-import IProperties from '../../Interfaces/IProperties';
-import { InputGroup } from '../InputGroup/InputGroup';
-
-interface IStaticFormProps {
-  properties: IProperties
-  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
-}
-
-const getCSSInputs = (properties: IProperties): JSX.Element[] => {
-  const groupInput: JSX.Element[] = [];
-  for (const key in properties.style) {
-    groupInput.push(<InputGroup
-      key={key}
-      labelText={key}
-      inputKey={key}
-      labelClassName=''
-      inputClassName=''
-      type='string'
-      defaultValue={(properties.style as any)[key]}
-    />);
-  }
-  return groupInput;
-};
-
-const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
-  return (<form
-    key={props.properties.id}
-    onSubmit={(event) => props.onSubmit(event)}
-  >
-    <input type='submit' className='normal-btn block mx-auto mb-4 border-2 border-blue-400 cursor-pointer' value='Submit'/>
-    <div className='grid grid-cols-2 gap-y-4'>
-      <InputGroup
-        labelText='Name'
-        inputKey='id'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        defaultValue={props.properties.id.toString()}
-        isDisabled={true}
-      />
-      <InputGroup
-        labelText='Parent name'
-        inputKey='id'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        defaultValue={props.properties.parentId?.toString()}
-        isDisabled={true}
-      />
-      <InputGroup
-        labelText='x'
-        inputKey='x'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        defaultValue={props.properties.x.toString()}
-      />
-      <InputGroup
-        labelText='y'
-        inputKey='y'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        defaultValue={props.properties.y.toString()}
-      />
-      <InputGroup
-        labelText='Width'
-        inputKey='width'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        defaultValue={props.properties.width.toString()}
-      />
-      <InputGroup
-        labelText='Height'
-        inputKey='height'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        defaultValue={props.properties.height.toString()}
-      />
-      <InputGroup
-        labelText='Rigid'
-        inputKey='isRigidBody'
-        labelClassName=''
-        inputClassName=''
-        type='checkbox'
-        defaultChecked={props.properties.isRigidBody}
-      />
-      <InputGroup
-        labelText='Anchor'
-        inputKey='isAnchor'
-        labelClassName=''
-        inputClassName=''
-        type='checkbox'
-        defaultChecked={props.properties.isAnchor}
-      />
-      <InputGroup
-        labelText='Horizontal alignment'
-        inputKey='xPositionReference'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        defaultChecked={props.properties.isRigidBody}
-      />
-      { getCSSInputs(props.properties) }
-    </div>
-  </form>);
-};
-
-export default StaticForm;

src/Components/SVG/Elements/Container.tsx

@@ -22,7 +22,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
     props.model.properties.x,
     props.model.properties.y,
     props.model.properties.width,
-    props.model.properties.xPositionReference
+    props.model.properties.XPositionReference
   );
   const transform = `translate(${transformedX}, ${transformedY})`;
 
@@ -36,8 +36,12 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   // Rect style
   const style = Object.assign(
     JSON.parse(JSON.stringify(defaultStyle)),
-    props.model.properties.style
+    props.model.properties
   );
+  style.x = 0;
+  style.y = 0;
+  delete style.height;
+  delete style.width;
 
   // Dimension props
   const depth = getDepth(props.model);

src/Components/SVG/Elements/Selector.tsx

@@ -20,7 +20,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     x,
     y,
     props.selected.properties.width,
-    props.selected.properties.xPositionReference
+    props.selected.properties.XPositionReference
   );
   const [width, height] = [
     props.selected.properties.width,

src/Components/UI/UI.tsx

@@ -8,6 +8,7 @@ import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
 import { FloatingButton } from '../FloatingButton/FloatingButton';
 import { Bar } from '../Bar/Bar';
+import IProperties from '../../Interfaces/IProperties';
 
 interface IUIProps {
   current: IHistoryState
@@ -16,8 +17,8 @@ interface IUIProps {
   AvailableContainers: IAvailableContainer[]
   SelectContainer: (container: ContainerModel) => void
   DeleteContainer: (containerId: string) => void
-  OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
+  OnPropertyChange: (key: string, value: string | number | boolean) => void
-  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, properties: IProperties) => void
   AddContainerToSelectedContainer: (type: string) => void
   AddContainer: (index: number, type: string, parentId: string) => void
   SaveEditorAsJSON: () => void

src/Interfaces/IProperties.ts

@@ -10,7 +10,7 @@ import { XPositionReference } from '../Enums/XPositionReference';
  * @property isRigidBody if true apply rigid body behaviors
  * @property isAnchor if true apply anchor behaviors
  */
-export default interface IProperties {
+export default interface IProperties extends Omit<React.CSSProperties, 'width' | 'height'> {
   id: string
   parentId: string | null
   x: number
@@ -19,6 +19,5 @@ export default interface IProperties {
   height: number
   isRigidBody: boolean
   isAnchor: boolean
-  xPositionReference?: XPositionReference
+  XPositionReference?: XPositionReference
-  style?: React.CSSProperties
 }

src/utils/default.ts

@@ -34,10 +34,8 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   height: Number(DEFAULT_CONFIG.MainContainer.Height),
   isRigidBody: false,
   isAnchor: false,
-  style: {
+  fillOpacity: 0,
-    stroke: 'black',
+  stroke: 'black'
-    fillOpacity: 0
-  }
 };
 
 export const DIMENSION_MARGIN = 50;