From 706f9624cc2564bd660e3d5a461a5c0dd91f5686 Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Tue, 16 Aug 2022 10:11:16 +0200
Subject: [PATCH] Reset Class Properties to separate css style into a property

---
 src/Components/App/MenuActions.ts            | 6 ++++--
 src/Components/Editor/ContainerOperations.ts | 6 +++---
 src/Components/SVG/Elements/Container.tsx    | 8 ++------
 src/Components/SVG/Elements/Selector.tsx     | 2 +-
 src/Interfaces/IProperties.ts                | 5 +++--
 src/utils/default.ts                         | 6 ++++--
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/Components/App/MenuActions.ts b/src/Components/App/MenuActions.ts
index 8dec2a1..b9a455e 100644
--- a/src/Components/App/MenuActions.ts
+++ b/src/Components/App/MenuActions.ts
@@ -24,8 +24,10 @@ export function NewEditor(
           height: Number(configuration.MainContainer.Height),
           isRigidBody: false,
           isAnchor: false,
-          fillOpacity: 0,
-          stroke: 'black'
+          style: {
+            fillOpacity: 0,
+            stroke: 'black'
+          }
         }
       );
 
diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts
index 0ab670d..d778d82 100644
--- a/src/Components/Editor/ContainerOperations.ts
+++ b/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;
diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index 56d4797..11ec38d 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/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);
diff --git a/src/Components/SVG/Elements/Selector.tsx b/src/Components/SVG/Elements/Selector.tsx
index 101f19a..5a0bb96 100644
--- a/src/Components/SVG/Elements/Selector.tsx
+++ b/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,
diff --git a/src/Interfaces/IProperties.ts b/src/Interfaces/IProperties.ts
index ad23442..c04584f 100644
--- a/src/Interfaces/IProperties.ts
+++ b/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
 }
diff --git a/src/utils/default.ts b/src/utils/default.ts
index b16e528..ae952bd 100644
--- a/src/utils/default.ts
+++ b/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;