From e8fca667dcbbf736e2d4b1003eeb1bc13090a969 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Sun, 13 Sep 2020 13:06:52 +0200 Subject: [PATCH] WIP: implementing new way to change Gauge colorzones #251 --- src/widget/edit-widget/color-picker.js | 29 +++- .../edit-widget-color-zones-control.js | 151 ++++++++++++++---- src/widget/widgets/gauge.js | 2 +- 3 files changed, 144 insertions(+), 38 deletions(-) diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js index 81a08b2..2861333 100644 --- a/src/widget/edit-widget/color-picker.js +++ b/src/widget/edit-widget/color-picker.js @@ -49,15 +49,23 @@ class ColorPicker extends React.Component { } handleChangeComplete = (color) => { + + let temp = this.state.widget; + + if(this.props.controlId === 'strokeStyle'){ + temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex; + } + else{ let parts = this.props.controlId.split('.'); let isCustomProperty = true; + if (parts.length === 1){ isCustomProperty = false; } - let temp = this.state.widget; isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex; isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a; + } this.setState({ widget: temp }); }; @@ -78,20 +86,33 @@ class ColorPicker extends React.Component { render() { let disableOpacity = false; + let hexColor; + let opacity = 1; let parts = this.props.controlId.split('.'); let isCustomProperty = true; if (parts.length === 1){ isCustomProperty = false; } - if(this.state.widget.type === "Box" && parts[1] === "border_color"){ + if((this.state.widget.type === "Box" && parts[1] === "border_color") || this.props.controlId === 'strokeStyle'){ disableOpacity = true; } + if(this.props.controlId === 'strokeStyle'){ + if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){ + hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle']; + } + } + else{ + hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]; + opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"]; - let hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]; - let opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"]; + } + + let rgbColor = this.hexToRgb(hexColor, opacity); + + return this.onClose(c)} valid={true}>
{ // add row const widget = this.state.widget; - widget.customProperties.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 }); + widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 }); + + if(widget.customProperties.zones.length > 0){ + let length = widget.customProperties.zones.length + + for(let i= 0 ; i < length; i++){ + widget.customProperties.zones[i].min = i* 100/length; + widget.customProperties.zones[i].max = (i+1)* 100/length; + } + } this.setState({ widget }); @@ -57,11 +70,11 @@ class EditWidgetColorZonesControl extends React.Component { // remove zones const widget = this.state.widget; - this.state.selectedZones.forEach(row => { + /*this.state.selectedZones.forEach(row => { widget.customProperties.zones.splice(row, 1); }); - this.setState({ selectedZones: [], widget }); + this.setState({ selectedZones: [], widget });*/ this.sendEvent(widget); } @@ -83,6 +96,32 @@ class EditWidgetColorZonesControl extends React.Component { this.sendEvent(widget); } + editColorZone = (index) => { + this.setState({selectedZone: this.state.widget.customProperties.zones[index], selectedIndex: index , minValue: this.state.widget.customProperties.zones[index].min, maxValue: this.state.widget.customProperties.zones[index].max}); + + } + + openColorPicker = () =>{ + + let color = this.state.selectedZone.strokeStyle; + + this.setState({showColorPicker: true, originalColor: color}); + } + + closeEditModal = (data) => { + this.setState({showColorPicker: false}) + if(typeof data === 'undefined'){ + + let temp = this.state.selectedZone; + temp.strokeStyle = this.state.originalColor; + + this.setState({ selectedZone : temp }); + } + } + + handleMinMaxChange = () => { + } + sendEvent(widget) { // create event const event = { @@ -95,37 +134,83 @@ class EditWidgetColorZonesControl extends React.Component { this.props.handleChange(event); } - checkedCell = (row, event) => { - // update selected rows - const selectedZones = this.state.selectedZones; - - if (event.target.checked) { - if (selectedZones.indexOf(row) === -1) { - selectedZones.push(row); - } - } else { - let index = selectedZones.indexOf(row); - if (row > -1) { - selectedZones.splice(index, 1); - } - } - - this.setState({ selectedZones }); - } + render() { + + + let tempColor = 'FFFFFF'; + let collapse = false; + if(this.state.selectedZone !== null){ + collapse = true; + tempColor = this.state.selectedZone.strokeStyle; + } + + let pickerStyle = { + backgroundColor: tempColor, + width: '260px', + height: '40px', + marginTop: '20px' + } + return Color zones + - - - - - +
+ { + this.state.widget.customProperties.zones.map((zone, idx) => { + let color = zone.strokeStyle; + let width = (zone.max - zone.min)*(260/100); + let style = { + backgroundColor: color, + width: width, + height: '40px' + } + + + + return ( + ) + } + ) + + } +
+ + Change color} > + + +
+ + + + + +
+ Min: + this.handleMinMaxChange(e)} /> + + Max: + this.handleMinMaxChange(e)} /> +
- - - + + + this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />
; } } diff --git a/src/widget/widgets/gauge.js b/src/widget/widgets/gauge.js index e1f8bfc..b33494a 100644 --- a/src/widget/widgets/gauge.js +++ b/src/widget/widgets/gauge.js @@ -219,7 +219,7 @@ class WidgetGauge extends Component { const step = (maxValue - minValue) / 100; zones = zones.map(zone => { - return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: '#' + zone.strokeStyle }); + return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: zone.strokeStyle }); }); }