From cfbedd3e594867334b01c3896abc99bb74aa133a Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Thu, 23 Feb 2023 12:21:05 +0100
Subject: [PATCH] Fix bug with colors and dimensions misapplied

---
 .../ContainerProperties/ContainerForm.tsx     | 32 ++++++++-----------
 src/Components/SVG/Elements/Dimension.tsx     |  2 +-
 src/utils/default.ts                          |  2 +-
 test-server/http.js                           | 18 +++++------
 4 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx
index f70e42d..9a19743 100644
--- a/src/Components/ContainerProperties/ContainerForm.tsx
+++ b/src/Components/ContainerProperties/ContainerForm.tsx
@@ -385,7 +385,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 labelClassName=''
                 inputClassName=''
                 type='color'
-                value={props.properties.dimensionOptions.selfDimensions.color}
+                value={props.properties.dimensionOptions.selfDimensions.color ?? '#000000'}
                 onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/>
               <TextInputGroup
                 id={`${props.properties.id}-selfDimensions-width`}
@@ -425,7 +425,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 labelClassName=''
                 inputClassName=''
                 type='color'
-                value={props.properties.dimensionOptions.selfMarginsDimensions.color}
+                value={props.properties.dimensionOptions.selfMarginsDimensions.color ?? '#000000'}
                 onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/>
               <TextInputGroup
                 id={`${props.properties.id}-selfMarginsDimensions-width`}
@@ -465,7 +465,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 labelClassName=''
                 inputClassName=''
                 type='color'
-                value={props.properties.dimensionOptions.childrenDimensions.color}
+                value={props.properties.dimensionOptions.childrenDimensions.color ?? '#000000'}
                 onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/>
               <TextInputGroup
                 id={`${props.properties.id}-childrenDimensions-width`}
@@ -515,7 +515,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                   labelClassName=''
                   inputClassName=''
                   type='color'
-                  value={props.properties.dimensionOptions.dimensionWithMarks.color}
+                  value={props.properties.dimensionOptions.dimensionWithMarks.color ?? '#000000'}
                   onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/>
                 <TextInputGroup
                   id={`${props.properties.id}-dimensionWithMarks-width`}
@@ -550,16 +550,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         heightClass={`${categoryHeight}`}
         >
           <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
-            <TextInputGroup
-              id={`${props.properties.id}-stroke`}
+            <InputGroup
               labelText={Text({ textId: '@StyleStroke' })}
-              inputKey='stroke'
+              inputKey={`${props.properties.id}-stroke`}
               labelClassName='col-span-2'
               inputClassName='col-span-3'
-              type='string'
-              value={props.properties.style.stroke ?? 'black'}
-              onChange={(value) => { props.onChange('stroke', value, PropertyType.Style); }}
-            />
+              type='color'
+              value={props.properties.style.stroke ?? '#000000'}
+              onChange={(e) => { props.onChange('stroke', e.target.value, PropertyType.Style); }}/>
             <InputGroup
               labelKey={`${props.properties.id}-strokeOpacity`}
               labelText={Text({ textId: '@StyleStrokeOpacity' })}
@@ -583,16 +581,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               value={(props.properties.style.strokeWidth ?? 1).toString()}
               onChange={(value) => { props.onChange('strokeWidth', Number(value), PropertyType.Style); }}
             />
-            <TextInputGroup
-              id={`${props.properties.id}-fill`}
+            <InputGroup
               labelText={Text({ textId: '@StyleFill' })}
-              inputKey='fill'
+              inputKey={`${props.properties.id}-fill`}
               labelClassName='col-span-2'
               inputClassName='col-span-3'
-              type='string'
-              value={props.properties.style.fill ?? 'black'}
-              onChange={(value) => { props.onChange('fill', value, PropertyType.Style); }}
-            />
+              type='color'
+              value={props.properties.style.fill ?? '#000000'}
+              onChange={(e) => { props.onChange('fill', e.target.value, PropertyType.Style); }}/>
             <InputGroup
               labelKey={`${props.properties.id}-fillOpacity`}
               labelText={Text({ textId: '@StyleFillOpacity' })}
diff --git a/src/Components/SVG/Elements/Dimension.tsx b/src/Components/SVG/Elements/Dimension.tsx
index 30469be..8e98bc1 100644
--- a/src/Components/SVG/Elements/Dimension.tsx
+++ b/src/Components/SVG/Elements/Dimension.tsx
@@ -31,7 +31,7 @@ function ApplyParametric(x0: number, t: number, vx: number): number {
 export function Dimension(props: IDimensionProps): JSX.Element {
   const scale = props.scale ?? 1;
   const style: React.CSSProperties = {
-    stroke: props.style.color,
+    stroke: props.style.color ?? '#000000',
     strokeWidth: (props.style.width ?? 2) / scale,
     strokeDasharray: props.style.dashArray
   };
diff --git a/src/utils/default.ts b/src/utils/default.ts
index a7baa17..de8b91e 100644
--- a/src/utils/default.ts
+++ b/src/utils/default.ts
@@ -275,7 +275,7 @@ export function GetDefaultContainerProps(type: string,
     hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
     dimensionOptions: {
       childrenDimensions: {
-        ...containerConfig.DimensionOptions?.selfDimensions,
+        ...containerConfig.DimensionOptions?.childrenDimensions,
         positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? []
       },
       selfDimensions: {
diff --git a/test-server/http.js b/test-server/http.js
index 274ef8a..9c64416 100644
--- a/test-server/http.js
+++ b/test-server/http.js
@@ -81,7 +81,7 @@ const GetSVGLayoutConfiguration = () => {
         Style: {
           fillOpacity: 1,
           strokeWidth: 2,
-          stroke: 'red',
+          stroke: '#ff0000',
           fill: '#d3c9b7',
         },
         IsFlex: true,
@@ -96,7 +96,7 @@ const GetSVGLayoutConfiguration = () => {
         Style: {
           fillOpacity: 1,
           strokeWidth: 2,
-          stroke: 'red',
+          stroke: '#ff0000',
           fill: '#d3c9b7',
         },
         IsFlex: true,
@@ -115,8 +115,8 @@ const GetSVGLayoutConfiguration = () => {
         Style: {
           fillOpacity: 1,
           strokeWidth: 2,
-          stroke: 'green',
-          fill: 'white'
+          stroke: '#00ff00',
+          fill: '#ffffff'
         },
         Category: "Stuff",
         IsFlex: true,
@@ -258,8 +258,8 @@ const GetSVGLayoutConfiguration = () => {
         Style: {
           fillOpacity: 1,
           strokeWidth: 2,
-          stroke: 'blue',
-          fill: 'blue',
+          stroke: '#0000ff',
+          fill: '#0000ff',
         }
       },
       {
@@ -270,8 +270,8 @@ const GetSVGLayoutConfiguration = () => {
         Style: {
           fillOpacity: 1,
           strokeWidth: 2,
-          stroke: 'red',
-          fill: 'red',
+          stroke: '#ff0000',
+          fill: '#ff0000',
         }
       }
     ],
@@ -370,7 +370,7 @@ const GetSVGLayoutConfiguration = () => {
       Height: 200,
       Orientation: 0,
       Style: {
-        stroke: 'black',
+        stroke: '#000000',
         strokeWidth: 2,
         fillOpacity: 0
       }