Reset Class Properties to separate css style into a property

src/Components/App/MenuActions.ts

@@ -24,9 +24,11 @@ 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,7 +209,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 +217,8 @@ 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/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,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);

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/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 extends Omit<React.CSSProperties, 'width' | 'height'> {
+export default interface IProperties {
   id: string
   parentId: string | null
   x: number
@@ -19,5 +19,6 @@ export default interface IProperties extends Omit<React.CSSProperties, 'width' |
   height: number
   isRigidBody: boolean
   isAnchor: boolean
-  XPositionReference?: XPositionReference
+  xPositionReference?: XPositionReference
+  style?: React.CSSProperties
 }

src/utils/default.ts

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