From d163d93cd05fd9a7669eb3b185f12006f1d36ff9 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Thu, 20 Apr 2017 15:06:17 +0200 Subject: [PATCH] Gauge: restrict updates to value changes, gauge updated directly. --- src/components/widget-gauge.js | 29 +++++++++++++++++++---------- src/containers/widget.js | 2 +- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/widget-gauge.js b/src/components/widget-gauge.js index a61c3e8..b4365fe 100644 --- a/src/components/widget-gauge.js +++ b/src/components/widget-gauge.js @@ -23,7 +23,7 @@ class WidgetGauge extends Component { } staticLabels(widget_height) { - var label_font_size = widget_height * 0.055; // font scaling factor + let label_font_size = Math.floor(widget_height * 0.055); // font scaling factor, integer for performance return { font: label_font_size + 'px "Helvetica Neue"', labels: [0.0, 0.1, 0.5, 0.9, 1.0], @@ -58,17 +58,18 @@ class WidgetGauge extends Component { this.gauge.set(this.state.value); } - componentWillUpdate() { - // Update labels after possible resize - this.gauge.setOptions({ staticLabels: this.staticLabels(this.props.widget.height) }); + shouldComponentUpdate(nextProps, nextState) { + + // Check if size changed, resize labels if it did (the canvas itself is scaled with css) + if (this.props.widget.height !== nextProps.widget.height) { + this.updateAfterResize(nextProps.widget.height); + } + + // signal component update only if the value changed + return this.state.value !== nextState.value; } - componentDidUpdate() { - // update gauge's value - this.gauge.set(this.state.value); - } - - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps) { // update value const simulator = nextProps.widget.simulator; @@ -84,9 +85,17 @@ class WidgetGauge extends Component { const new_value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3; if (this.state.value !== new_value) { this.setState({ value: new_value }); + + // update gauge's value + this.gauge.set(new_value); } } + updateAfterResize(newHeight) { + // Update labels after resize + this.gauge.setOptions({ staticLabels: this.staticLabels(newHeight) }); + } + render() { var componentClass = this.props.editing ? "gauge-widget editing" : "gauge-widget"; var signalType = null; diff --git a/src/containers/widget.js b/src/containers/widget.js index 1b55f94..89323b1 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -77,7 +77,7 @@ class Widget extends Component { resizeStop(direction, styleSize, clientSize, delta) { // update widget - var widget = this.props.data; + let widget = Object.assign({}, this.props.data); // resize depends on direction if (direction === 'left' || direction === 'topLeft' || direction === 'bottomLeft') {