From 622a5d3f22434924cd6217c9f580828f064bc829 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Fri, 19 Jun 2020 15:13:33 +0200
Subject: [PATCH] fixes for color control, selected color is now checked

---
 .../edit-widget/edit-widget-color-control.js  | 11 ++++++++-
 .../edit-widget-control-creator.js            |  2 +-
 .../edit-widget/edit-widget-number-control.js | 23 ++++++++++++++-----
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js
index c031597..2158a55 100644
--- a/src/widget/edit-widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget/edit-widget-color-control.js
@@ -75,7 +75,16 @@ class EditWidgetColorControl extends Component {
                   'checked': idx === (isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId])
                 });
 
-                return (<FormCheck type='radio' key={idx} name={this.props.label} style={colorStyle} className={checkedClass} value={idx} inline onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
+                return (<FormCheck
+                  type='radio'
+                  key={idx}
+                  name={this.props.label}
+                  style={colorStyle}
+                  className={checkedClass}
+                  value={idx}
+                  inline
+                  defaultChecked={isCustomProperty ? this.state.widget[parts[0]][parts[1]] ===idx: this.state.widget[this.props.controlId] === idx}
+                  onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
               }
             )
           }
diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index 1b2f996..2b656dc 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -122,7 +122,7 @@ export default function CreateControls(widgetType = null, widget = null, session
             DialogControls.push(
                 <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.background_color'} label={'Background color'} handleChange={e => handleChange(e)} />,
-                <EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.background_color_opacity'} label={'Background opacity'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
+                <EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.background_color_opacity'} label={'Background opacity (0.0 - 1.0)'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Label':
diff --git a/src/widget/edit-widget/edit-widget-number-control.js b/src/widget/edit-widget/edit-widget-number-control.js
index 5354863..3b3101f 100644
--- a/src/widget/edit-widget/edit-widget-number-control.js
+++ b/src/widget/edit-widget/edit-widget-number-control.js
@@ -25,25 +25,36 @@ class EditWidgetNumberControl extends Component {
     this.state = {
       widget: {
         customProperties:{}
-      }         
+      }
      };
   }
-  
+
   static getDerivedStateFromProps(props, state){
     return{
-      widget: props.widget   
+      widget: props.widget
      };
-  } 
+  }
 
   render() {
     let step = 1;
     if(this.props.controlId ==='customProperties.background_color_opacity'){
       step = 0.1;
-    }   
+    }
+
+    let parts = this.props.controlId.split('.');
+    let isCustomProperty = true;
+    if (parts.length === 1){
+      isCustomProperty = false;
+    }
+
     return (
         <FormGroup controlId={this.props.controlId}>
           <FormLabel>{this.props.label}</FormLabel>
-          <FormControl type="number" step={step} value={this.state.widget[this.props.controlId]} onChange={e => this.props.handleChange(e)} />
+          <FormControl
+            type="number"
+            step={step}
+            value={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
+            onChange={e => this.props.handleChange(e)} />
         </FormGroup>
     );
   }