From 333133629cf9e3202639984c16e9adc87872f610 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Mon, 16 Mar 2020 13:12:44 +0100 Subject: [PATCH] fix color control editor, add "customProperties." to control creator (WIP) --- .../edit-widget/edit-widget-color-control.js | 12 +++- .../edit-widget-control-creator.js | 56 +++++++-------- src/widget/edit-widget/edit-widget.js | 68 +++++++++---------- 3 files changed, 71 insertions(+), 65 deletions(-) diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index dd408c7..408a4d0 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -44,7 +44,7 @@ class EditWidgetColorControl extends Component { this.state = { widget: { - + } }; } @@ -56,6 +56,12 @@ class EditWidgetColorControl extends Component { } render() { + + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } return ( @@ -71,10 +77,10 @@ class EditWidgetColorControl extends Component { }; let checkedClass = classNames({ - 'checked': idx === this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId] + 'checked': idx === (isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]) }); - return ( this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />) + return ( 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 57be214..1cbe757 100644 --- a/src/widget/edit-widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget/edit-widget-control-creator.js @@ -41,8 +41,8 @@ export default function CreateControls(widgetType = null, widget = null, session case 'CustomAction': DialogControls.push( handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Action': @@ -55,52 +55,52 @@ export default function CreateControls(widgetType = null, widget = null, session handleChange(e)} />, handleChange(e)} />, handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} /> ); break; case 'Lamp': DialogControls.push( handleChange(e)} />, handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, ); break; case 'Plot': DialogControls.push( handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} /> ); break; case 'Table': DialogControls.push( - handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Image': // Restrict to only image file types (MIME) let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image')); DialogControls.push( - handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Gauge': DialogControls.push( handleChange(e)} />, handleChange(e)} />, - handleChange(e)} />, + handleChange(e)} />, handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} /> ); break; case 'PlotTable': DialogControls.push( - handleChange(e)} />, - handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} />, handleChange(e)} /> ); @@ -110,45 +110,45 @@ export default function CreateControls(widgetType = null, widget = null, session handleChange(e)} />, handleChange(e)} />, handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Button': DialogControls.push( handleChange(e)} />, handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Box': DialogControls.push( - handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Label': DialogControls.push( handleChange(e)} />, handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} /> ); break; case 'HTML': DialogControls.push( - handleChange(e)} /> + handleChange(e)} /> ); break; case 'Topology': // Restrict to only xml files (MIME) let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml')); DialogControls.push( - handleChange(e)} /> + handleChange(e)} /> ); break; diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index b9ee2ca..7d34887 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -64,45 +64,45 @@ class EditWidgetDialog extends React.Component { } handleChange(e) { - + // TODO: check what we really need in this function. Can we reduce its complexity? let parts = e.target.id.split('.'); - let changeObject = this.state.temporal; - let customProperty = true; - if (parts.length === 1 && this.state.temporal[e.target.id]) { - // not a customProperty - customProperty = false; - } + let changeObject = this.state.temporal; + let customProperty = true; + if (parts.length === 1 && this.state.temporal[e.target.id]) { + // not a customProperty + customProperty = false; + } - if (e.target.id === 'lockAspect') { - //not a customProperty - changeObject[e.target.id] = e.target.checked; + if (e.target.id === 'lockAspect') { + //not a customProperty + changeObject[e.target.id] = e.target.checked; - // correct image aspect if turned on - if (e.target.checked) { - changeObject = this.assignAspectRatio(changeObject, this.state.temporal.file); - } - } else if (e.target.id === 'file') { - //not a customProperty - changeObject.customProperties[e.target.id] = e.target.value; - - // get file and update size (if it's an image) - if ('lockAspect' in this.state.temporal && this.state.temporal.lockAspect) { - changeObject = this.assignAspectRatio(changeObject, e.target.value); - } - } else if (e.target.type === 'number') { - customProperty ? changeObject.customProperties[e.target.id] = Number(e.target.value) : changeObject[e.target.id] = Number(e.target.value); - } else if(e.target.id === 'name'){ - if(changeObject[e.target.id] != null){ - changeObject[e.target.id] = e.target.value; - } else{ - changeObject[e.target.id] = 'default'; - } - } else { - customProperty ? changeObject.customProperties[e.target.id] = e.target.value : changeObject[e.target.id] = e.target.value ; + // correct image aspect if turned on + if (e.target.checked) { + changeObject = this.assignAspectRatio(changeObject, this.state.temporal.file); } - this.validChanges(); - this.setState({ temporal: changeObject}); + } else if (e.target.id === 'file') { + //not a customProperty + changeObject.customProperties[e.target.id] = e.target.value; + + // get file and update size (if it's an image) + if ('lockAspect' in this.state.temporal && this.state.temporal.lockAspect) { + changeObject = this.assignAspectRatio(changeObject, e.target.value); + } + } else if (e.target.type === 'number') { + customProperty ? changeObject.customProperties[e.target.id] = Number(e.target.value) : changeObject[e.target.id] = Number(e.target.value); + } else if(e.target.id === 'name'){ + if(changeObject[e.target.id] != null){ + changeObject[e.target.id] = e.target.value; + } else{ + changeObject[e.target.id] = 'default'; + } + } else { + customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ; + } + this.validChanges(); + this.setState({ temporal: changeObject}); }