diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js index e5bba88..cc235d2 100644 --- a/src/signal/edit-signal-mapping.js +++ b/src/signal/edit-signal-mapping.js @@ -95,7 +95,6 @@ class EditSignalMappingDialog extends React.Component { let signals = this.state.signals; let modifiedSignals = this.state.modifiedSignalIDs; - console.log("HandleMappingChange", row, column) if (column === 2) { // Name change signals[row].name = event.target.value; if (modifiedSignals.find(id => id === signals[row].id) === undefined) { @@ -112,7 +111,6 @@ class EditSignalMappingDialog extends React.Component { modifiedSignals.push(signals[row].id); } } else if (column === 1) { //index change - console.log("Index change") signals[row].index =parseInt(event.target.value, 10); if (modifiedSignals.find(id => id === signals[row].id) === undefined) { modifiedSignals.push(signals[row].id); diff --git a/src/signal/signals-data-manager.js b/src/signal/signals-data-manager.js index 1a5ee0c..b833534 100644 --- a/src/signal/signals-data-manager.js +++ b/src/signal/signals-data-manager.js @@ -71,7 +71,7 @@ class SignalsDataManager extends RestDataManager{ let configured = false; let error = false; for(let nodeConfig of nodes){ - console.log("parsing node config: ", nodeConfig) + //console.log("parsing node config: ", nodeConfig) if(!nodeConfig.hasOwnProperty("name")){ console.warn("Could not parse the following node config because it lacks a name parameter:", nodeConfig); } else if(nodeConfig.name === socketname){ @@ -128,7 +128,6 @@ class SignalsDataManager extends RestDataManager{ for (let outSig of nodeConfig.out.signals) { if (outSig.enabled) { - console.log("adding output signal:", outSig); let newSignal = { configID: configID, direction: 'out', diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js index 8c148c0..4af998f 100644 --- a/src/widget/edit-widget/color-picker.js +++ b/src/widget/edit-widget/color-picker.js @@ -19,27 +19,29 @@ import React from 'react'; import { Form } from 'react-bootstrap'; import { SketchPicker } from 'react-color'; import Dialog from '../../common/dialogs/dialog'; +import {schemeCategory10} from "d3-scale-chromatic"; class ColorPicker extends React.Component { - valid = true; constructor(props) { super(props); this.state = { - widget: {} + rgbColor: {}, }; } - static getDerivedStateFromProps(props, state) { - return { - widget: props.widget - }; + componentDidUpdate(prevProps: Readonly

, prevState: Readonly, snapshot: SS) { + + if(this.props.show !== prevProps.show){ + // update color if show status of color picker has changed + this.setState({rgbColor: ColorPicker.hexToRgb(this.props.hexcolor,this.props.opacity)}) + } } - hexToRgb = (hex,opacity) => { - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + static hexToRgb(hex,opacity) { + let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), @@ -49,27 +51,7 @@ 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 if (this.props.controlId === 'lineColor'){ - temp.customProperties.lineColors[this.props.lineIndex] = color.hex; - } - else { - let parts = this.props.controlId.split('.'); - let isCustomProperty = true; - - if (parts.length === 1){ - isCustomProperty = false; - } - - 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 }); + this.setState({rgbColor: color.rgb}) }; onClose = canceled => { @@ -81,52 +63,40 @@ class ColorPicker extends React.Component { return; } - if (this.valid && this.props.onClose != null) { - this.props.onClose(this.state.widget); + if (this.props.onClose != null) { + + const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => { + const hex = x.toString(16) + return hex.length === 1 ? '0' + hex : hex + }).join('') + + let data = { + hexcolor: rgbToHex(this.state.rgbColor.r, this.state.rgbColor.g,this.state.rgbColor.b), + opacity: this.state.rgbColor.a, + } + + this.props.onClose(data); } }; render() { - let hexColor; - let opacity = 1; - let parts = this.props.controlId.split('.'); - let isCustomProperty = true; - if (parts.length === 1) { - isCustomProperty = false; - } - 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 if (this.props.controlId === 'lineColor') { - if (typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined') { - hexColor = this.state.widget.customProperties.lineColors[this.props.lineIndex]; - } - } - 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 rgbColor = this.hexToRgb(hexColor, opacity); - return

this.onClose(c)} - valid={true} - > -
- - -
; + return this.onClose(c)} + valid={true} + > +
+ + +
; } } diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index 6fd82f7..13c33b1 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -28,55 +28,51 @@ class EditWidgetColorControl extends Component { super(props); this.state = { - widget: {}, + color: null, + opacity: null, showColorPicker: false, originalColor: null }; } static getDerivedStateFromProps(props, state){ + let parts = props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + + let color = (isCustomProperty ? props.widget[parts[0]][parts[1]] : props.widget[props.controlId]); + let opacity = (isCustomProperty ? props.widget[parts[0]][parts[1] + "_opacity"] : props.widget[props.controlId + "_opacity"]); + return { - widget: props.widget + color: color, + opacity: opacity, }; } openColorPicker = () =>{ - let parts = this.props.controlId.split('.'); - let isCustomProperty = true; - if (parts.length === 1){ - isCustomProperty = false; - } - let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]); - - this.setState({showColorPicker: true, originalColor: color}); + this.setState({showColorPicker: true, originalColor: this.state.color}); } - closeEditModal = (data) => { + closeColorPickerEditModal = (data) => { this.setState({showColorPicker: false}) - if(typeof data === 'undefined'){ - 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]] = this.state.originalColor : temp[this.props.controlId] = this.state.originalColor; - this.setState({ widget: temp }); + if(typeof data === 'undefined'){ + + this.setState({ color: this.state.originalColor }); + } else { + // color picker with result data {hexcolor, opacity} + this.setState({color: data.hexcolor, opacity: data.opacity}) + this.props.handleChange({target: { id: this.props.controlId, value: data.hexcolor} }) + this.props.handleChange({target: { id: this.props.controlId + "_opacity", value: data.opacity} }) } } render() { - let parts = this.props.controlId.split('.'); - let isCustomProperty = true; - if (parts.length === 1){ - isCustomProperty = false; - } - let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]); - let opacity = (isCustomProperty ? this.props.widget[parts[0]][parts[1] + "_opacity"] : this.props.widget[this.props.controlId + "_opacity"]); let style = { - backgroundColor: color, - opacity: opacity, + backgroundColor: this.state.color, + opacity: this.state.opacity, width: '80px', height: '40px', } @@ -85,8 +81,6 @@ class EditWidgetColorControl extends Component { if(this.props.disableOpacity){ tooltipText = "Change border color"; } - - return ( {this.props.label} @@ -100,7 +94,13 @@ class EditWidgetColorControl extends Component { - this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/> + this.closeColorPickerEditModal(data)} + hexcolor={this.state.color} + opacity={this.state.opacity} + disableOpacity={this.props.disableOpacity} + /> ); diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js index dd990bb..337e1d2 100644 --- a/src/widget/edit-widget/edit-widget-color-zones-control.js +++ b/src/widget/edit-widget/edit-widget-color-zones-control.js @@ -18,7 +18,6 @@ import React from 'react'; import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; import ColorPicker from './color-picker' - import Icon from '../../common/icon'; import { Collapse } from 'react-collapse'; @@ -27,12 +26,7 @@ class EditWidgetColorZonesControl extends React.Component { super(props); this.state = { - widget: { - customProperties:{ - zones: [] - } - }, - selectedZone: null, + colorZones: [], selectedIndex: null, showColorPicker: false, originalColor: null, @@ -43,89 +37,88 @@ class EditWidgetColorZonesControl extends React.Component { static getDerivedStateFromProps(props, state){ return { - widget: props.widget + colorZones: props.widget.customProperties.zones }; } addZone = () => { // add row - const widget = this.state.widget; - widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 }); + const zones = JSON.parse(JSON.stringify(this.state.colorZones)); + zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 }); - if(widget.customProperties.zones.length > 0){ - let length = widget.customProperties.zones.length + if(zones.length > 0){ + let length = 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; - } + for(let i= 0 ; i < length; i++){ + zones[i].min = i* 100/length; + zones[i].max = (i+1)* 100/length; + } } - this.setState({ widget, selectedZone: null, selectedIndex: null }); - - this.sendEvent(widget); + this.setState({ colorZones: zones, selectedIndex: null }); + this.props.handleChange({target: { id: this.props.controlId, value: zones}}) } removeZones = () => { - - let temp = this.state.widget; - - temp.customProperties.zones.splice(this.state.selectedIndex, 1); - - if(temp.customProperties.zones.length > 0){ - let length = temp.customProperties.zones.length - + let zones = JSON.parse(JSON.stringify(this.state.colorZones)); + zones.splice(this.state.selectedIndex, 1); + if(zones.length > 0){ + let length = zones.length for(let i= 0 ; i < length; i++){ - temp.customProperties.zones[i].min = i* 100/length; - temp.customProperties.zones[i].max = (i+1)* 100/length; + zones[i].min = i* 100/length; + zones[i].max = (i+1)* 100/length; } - } - - this.setState({widget: temp,selectedZone: null, selectedIndex: null}); - + } + this.setState({colorZones: zones, selectedIndex: null}); + this.props.handleChange({target: { id: this.props.controlId, value: zones}}) } changeCell = (event, row, column) => { // change row - const widget = this.state.widget; + const zones = JSON.parse(JSON.stringify(this.state.colorZones)) if (column === 1) { - widget.customProperties.zones[row].strokeStyle = event.target.value; + zones[row].strokeStyle = event.target.value; } else if (column === 2) { - widget.customProperties.zones[row].min = event.target.value; + zones[row].min = event.target.value; } else if (column === 3) { - widget.customProperties.zones[row].max = event.target.value; + zones[row].max = event.target.value; } - this.setState({ widget }); - - this.sendEvent(widget); + this.setState({ colorZones: zones }); + this.props.handleChange({target: { id: this.props.controlId, value: zones}}) } editColorZone = (index) => { if(this.state.selectedIndex !== 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}); + this.setState({ + selectedIndex: index , + minValue: this.state.colorZones[index].min, + maxValue: this.state.colorZones[index].max} + ); } else{ - this.setState({selectedZone: null, selectedIndex: null}); + this.setState({selectedIndex: null}); } } openColorPicker = () => { - - let color = this.state.selectedZone.strokeStyle; - + let color = this.state.colorZones[this.state.selectedIndex].strokeStyle; this.setState({showColorPicker: true, originalColor: color}); } - closeEditModal = (data) => { + closeColorPickerEditModal = (data) => { this.setState({showColorPicker: false}) + let zones = JSON.parse(JSON.stringify(this.state.colorZones)) if(typeof data === 'undefined'){ - let temp = this.state.selectedZone; - temp.strokeStyle = this.state.originalColor; - - this.setState({ selectedZone : temp }); + zones[this.state.selectedIndex].strokeStyle = this.state.originalColor + this.setState({ colorZones : zones }); + } else { + // color picker with result data {hexcolor, opacity} + zones[this.state.selectedIndex].strokeStyle = data.hexcolor + this.setState({ colorZones : zones }); + this.props.handleChange({target: { id: this.props.controlId, value: zones}}) } } @@ -134,14 +127,15 @@ class EditWidgetColorZonesControl extends React.Component { if(e.target.value < 0) return; this.setState({minValue: e.target.value}); - let temp = this.state.widget; - temp.customProperties.zones[this.state.selectedIndex]['min'] = e.target.value; + let zones = JSON.parse(JSON.stringify(this.state.colorZones)); + zones[this.state.selectedIndex]['min'] = e.target.value; if(this.state.selectedIndex !== 0){ - temp.customProperties.zones[this.state.selectedIndex - 1]['max'] = e.target.value + zones[this.state.selectedIndex - 1]['max'] = e.target.value } - this.setState({ widget: temp }); + this.setState({ colorZones: zones }); + this.props.handleChange({target: { id: this.props.controlId, value: zones}}) } handleMaxChange = (e) => { @@ -149,32 +143,19 @@ class EditWidgetColorZonesControl extends React.Component { if(e.target.value > 100) return; this.setState({maxValue: e.target.value}); - let temp = this.state.widget; - temp.customProperties.zones[this.state.selectedIndex]['max'] = e.target.value; + let zones = JSON.parse(JSON.stringify(this.state.colorZones)); + zones[this.state.selectedIndex]['max'] = e.target.value; - if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){ - temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value + if(this.state.selectedIndex !== zones.length -1){ + zones[this.state.selectedIndex + 1]['min'] = e.target.value } - this.setState({ widget: temp }); - } - - sendEvent(widget) { - // create event - const event = { - target: { - id: 'zones', - value: widget.customProperties.zones - } - }; - - this.props.handleChange(event); + this.setState({ colorZones: zones }); + this.props.handleChange({target: { id: this.props.controlId, value: zones}}) } - render() { - const buttonStyle = { marginBottom: '10px', marginLeft: '120px', @@ -187,9 +168,9 @@ class EditWidgetColorZonesControl extends React.Component { let tempColor = 'FFFFFF'; let collapse = false; - if(this.state.selectedZone !== null){ + if(this.state.selectedIndex !== null){ collapse = true; - tempColor = this.state.selectedZone.strokeStyle; + tempColor = this.state.colorZones[this.state.selectedIndex].strokeStyle; } let pickerStyle = { @@ -213,7 +194,7 @@ class EditWidgetColorZonesControl extends React.Component {
{ - this.state.widget.customProperties.zones.map((zone, idx) => { + this.state.colorZones.map((zone, idx) => { let color = zone.strokeStyle; let width = (zone.max - zone.min)*(260/100); let style = { @@ -222,7 +203,12 @@ class EditWidgetColorZonesControl extends React.Component { height: '40px' } return ( + style={style} + key={idx} + onClick={i => this.editColorZone(idx)} + disabled={!this.props.widget.customProperties.colorZones}> + + ) }) } @@ -258,10 +244,20 @@ class EditWidgetColorZonesControl extends React.Component { - + - this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} /> + this.closeColorPickerEditModal(data)} + hexcolor={tempColor} + opacity={1} + disableOpacity={this.props.disableOpacity} + /> ; } } diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js index d2ee3fc..a207762 100644 --- a/src/widget/edit-widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget/edit-widget-control-creator.js @@ -96,7 +96,7 @@ export default function CreateControls(widgetType = null, widget = null, session handleChange(e)} />, handleChange(e)} direction={'out'}/>, handleChange(e)} />, - handleChange(e)} />, + handleChange(e)} disableOpacity={true}/>, handleChange(e)} /> ); break; diff --git a/src/widget/edit-widget/edit-widget-plot-colors-control.js b/src/widget/edit-widget/edit-widget-plot-colors-control.js index fbef75c..4b4fcfc 100644 --- a/src/widget/edit-widget/edit-widget-plot-colors-control.js +++ b/src/widget/edit-widget/edit-widget-plot-colors-control.js @@ -19,10 +19,7 @@ import React, { Component } from 'react'; import { OverlayTrigger, Tooltip , Button, Form } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; -import { scaleOrdinal } from "d3-scale"; -import { schemeCategory10 } from "d3-scale-chromatic"; - -// schemeCategory20 no longer available in d3 +import {schemeCategory10} from "d3-scale-chromatic"; class EditWidgetPlotColorsControl extends Component { @@ -30,51 +27,78 @@ class EditWidgetPlotColorsControl extends Component { super(props); this.state = { - widget: {}, showColorPicker: false, originalColor: null, - selectedIndex: null + selectedIndex: null, + lineColors: [], + signalIDs: [] }; } - static getDerivedStateFromProps(props, state){ - - let widget = props.widget; - if(widget.customProperties.lineColors === undefined || widget.customProperties.lineColors === null){ - // for backwards compatibility with old plots - widget.customProperties.lineColors = [] - - const newLineColor = scaleOrdinal(schemeCategory10); - for (let signalID of widget.signalIDs){ - widget.customProperties.lineColors.push(newLineColor(signalID)) - } - } - + static getDerivedStateFromProps(props, state) { return { - widget: widget + lineColors: props.widget.customProperties.lineColors, + signalIDs: props.widget.signalIDs, }; } -//same here + componentDidUpdate(prevProps: Readonly

, prevState: Readonly, snapshot: SS) { - closeEditModal = (data) => { + let lineColorsChanged = false; + + if (JSON.stringify(this.state.signalIDs) !== JSON.stringify(prevState.signalIDs)){ + // if there was a change to the signal IDs + let tempLineColors = JSON.parse(JSON.stringify(this.state.lineColors)); + let oldNoSignals = tempLineColors.length + + if (this.state.signalIDs.length > prevState.signalIDs.length){ + // more signals than before + let diff = this.state.signalIDs.length - prevState.signalIDs.length + for (let i = 0; i { this.setState({showColorPicker: false}) + let tempLineColors = JSON.parse(JSON.stringify(this.state.lineColors)); if(typeof data === 'undefined'){ - - let temp = this.state.widget; - temp.customProperties.lineColors[this.state.selectedIndex] = this.state.originalColor; - this.setState({ widget: temp }); + // Color picker canceled + tempLineColors[this.state.selectedIndex] = this.state.originalColor; + this.setState({lineColors: tempLineColors}) + } else { + // color picker with result data {hexcolor, opacity} + tempLineColors[this.state.selectedIndex] = data.hexcolor + this.setState({lineColors: tempLineColors}) + this.props.handleChange({target: { id: this.props.controlId, value: tempLineColors} }) } } editLineColor = (index) => { if(this.state.selectedIndex !== index){ - let color = this.state.widget.customProperties.lineColors[index]; - this.setState({selectedIndex: index, showColorPicker: true, originalColor: color}); - } - else{ - this.setState({selectedIndex: null}); - } + let color = typeof this.state.lineColors[index] === "undefined" ? schemeCategory10[index % 10] : this.state.lineColors[index]; + this.setState({selectedIndex: index, showColorPicker: true, originalColor: color}); + } + else{ + this.setState({selectedIndex: null}); + } } render() { @@ -84,15 +108,15 @@ class EditWidgetPlotColorsControl extends Component { Line Colors

{ - this.state.widget.signalIDs.map((signalID, idx) => { - let color = this.state.widget.customProperties.lineColors[signalID]; - let width = 260 / this.state.widget.signalIDs.length; + this.props.widget.signalIDs.map((signalID, idx) => { + + let color = typeof this.state.lineColors[idx] === "undefined" ? schemeCategory10[idx % 10] : this.state.lineColors[idx]; + let width = 260 / this.props.widget.signalIDs.length; let style = { backgroundColor: color, width: width, height: '40px' } - let signal = this.props.signals.find(signal => signal.id === signalID); return this.editLineColor(signalID)} + onClick={i => this.editLineColor(idx)} > + ; }) }
- this.closeEditModal(data)} widget={this.state.widget} lineIndex={this.state.selectedIndex} controlId={'lineColor'} disableOpacity={true}/> + this.closeColorPickerEditModal(data)} + hexcolor={this.state.lineColors[this.state.selectedIndex]} + opacity={1} + disableOpacity={true} + /> ) diff --git a/src/widget/widget-plot/plot-legend.js b/src/widget/widget-plot/plot-legend.js index 00d1b77..310bc49 100644 --- a/src/widget/widget-plot/plot-legend.js +++ b/src/widget/widget-plot/plot-legend.js @@ -24,9 +24,7 @@ function Legend(props){ const signal = props.sig; const hasScalingFactor = (signal.scalingFactor !== 1); - const newLineColor = scaleOrdinal(schemeCategory10); - - let color = typeof props.lineColor === "undefined" ? newLineColor(signal.id) : props.lineColor; + let color = typeof props.lineColor === "undefined" ? schemeCategory10[props.index % 10] : props.lineColor; if(hasScalingFactor){ return ( @@ -52,11 +50,11 @@ class PlotLegend extends React.Component { return
    { this.props.lineColors !== undefined && this.props.lineColors != null ? ( - this.props.signals.map( signal => - + this.props.signals.map( (signal, idx) => + )) : ( this.props.signals.map( signal => - + )) }
diff --git a/src/widget/widget-plot/plot.js b/src/widget/widget-plot/plot.js index 17e61fc..0c92bc1 100644 --- a/src/widget/widget-plot/plot.js +++ b/src/widget/widget-plot/plot.js @@ -199,7 +199,6 @@ class Plot extends React.Component { // generate paths from data const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y)); - const newLineColor = scaleOrdinal(schemeCategory10); const lines = this.state.data.map((values, index) => { let signalID = this.props.signalIDs[index]; @@ -208,10 +207,10 @@ class Plot extends React.Component { this.props.lineColors = [] // for backwards compatibility } - if (typeof this.props.lineColors[signalID] === "undefined") { - this.props.lineColors[signalID] = newLineColor(signalID); + if (typeof this.props.lineColors[index] === "undefined") { + this.props.lineColors[index] = schemeCategory10[index % 10]; } - return + return }); this.setState({ lines, xAxis, yAxis });