Skip to content

Commit

Permalink
Refactor Measure component to use less state
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gnafu
Gnafu committed Oct 6, 2016
1 parent 2e2d2f7 commit bd14631
Show file tree
Hide file tree
Showing 9 changed files with 65 additions and 113 deletions.
8 changes: 4 additions & 4 deletions web/client/actions/measurement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
const CHANGE_MEASUREMENT = 'CHANGE_MEASUREMENT';
const CHANGE_MEASUREMENT_TOOL = 'CHANGE_MEASUREMENT_TOOL';
const CHANGE_MEASUREMENT_STATE = 'CHANGE_MEASUREMENT_STATE';

function changeMeasurement(measurement) {
return {
type: CHANGE_MEASUREMENT,
measurement: measurement
type: CHANGE_MEASUREMENT_TOOL,
...measurement
};
}

Expand All @@ -31,7 +31,7 @@ function changeMeasurementState(measureState) {
}

module.exports = {
CHANGE_MEASUREMENT,
CHANGE_MEASUREMENT_TOOL,
CHANGE_MEASUREMENT_STATE,
changeMeasurement,
changeMeasurementState
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/TOC/fragments/LayersTool.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const LayersTool = React.createClass({
onClick: React.PropTypes.func,
style: React.PropTypes.object,
glyph: React.PropTypes.string,
tooltip: React.PropTypes.tooltip
tooltip: React.PropTypes.string
},
getDefaultProps() {
return {
Expand Down
99 changes: 21 additions & 78 deletions web/client/components/mapcontrols/measure/MeasureComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,15 @@ const MeasureComponent = React.createClass({
areaLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
bearingLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
uom: React.PropTypes.shape({
length: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired}),
area: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired})
}),
length: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
}),
area: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
})
}),
toggleMeasure: React.PropTypes.func,
measurement: React.PropTypes.object,
lineMeasureEnabled: React.PropTypes.bool,
Expand Down Expand Up @@ -84,85 +88,24 @@ const MeasureComponent = React.createClass({
return !isEqual(nextProps, this.props);
},
onLineClick: function() {
var newMeasureState;
if (this.props.lineMeasureEnabled === false) {
newMeasureState = {
lineMeasureEnabled: true,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: 'LineString',
// reset old measurements
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(newMeasureState);
} else {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false
};
this.props.toggleMeasure(newMeasureState);
}
this.props.toggleMeasure({
geomType: 'LineString'
});
},
onAreaClick: function() {
var newMeasureState;
if (this.props.areaMeasureEnabled === false) {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: true,
bearingMeasureEnabled: false,
geomType: 'Polygon',
// reset old measurements
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(newMeasureState);
} else {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false
};
this.props.toggleMeasure(newMeasureState);
}
this.props.toggleMeasure({
geomType: 'Polygon'
});
},
onBearingClick: function() {
var newMeasureState;
if (this.props.bearingMeasureEnabled === false) {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: true,
geomType: 'Bearing',
// reset old measurements
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(newMeasureState);
} else {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false
};
this.props.toggleMeasure(newMeasureState);
}
this.props.toggleMeasure({
geomType: 'Bearing'
});
},
onResetClick: function() {
var resetMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: null,
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(resetMeasureState);
this.props.toggleMeasure({
geomType: null
});
},
getToolTips() {
return {
Expand Down
14 changes: 9 additions & 5 deletions web/client/components/mapcontrols/measure/MeasureResults.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,15 @@ const MeasureResults = React.createClass({
areaLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
bearingLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
uom: React.PropTypes.shape({
length: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired}),
area: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired})
}),
length: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
}),
area: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
})
}),
toggleMeasure: React.PropTypes.func,
measurement: React.PropTypes.object,
lineMeasureEnabled: React.PropTypes.bool,
Expand Down
34 changes: 19 additions & 15 deletions web/client/localConfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@
"method": "basic"
}
],
"plugins": {
"mobile": [{
"name": "Map",
"cfg": {
"zoomControl": false,
"tools": ["locate"]
}
},
{
"plugins": {
"mobile": [
{
"name": "Map",
"cfg": {
"zoomControl": false,
"tools": ["locate"]
}
},
{
"name": "DrawerMenu",
"cfg": {
"glyph": "1-stilo",
Expand Down Expand Up @@ -217,8 +218,9 @@
"cfg":{
"className": "square-button"
}
}],
"desktop": [{
}
],
"desktop": [{
"name": "Map",
"cfg": {
"toolsOptions": {
Expand Down Expand Up @@ -254,7 +256,7 @@
"name": "Identify",
"showIn": ["IdentifyBar", "Settings"],
"cfg": {
"panelClassName": "modal-dialog info-panel modal-content",
"panelClassName": "modal-dialog info-panel modal-content",
"headerClassName": "modal-header",
"bodyClassName": "modal-body info-wrap",
"asPanel": false,
Expand Down Expand Up @@ -482,7 +484,9 @@
"alwaysVisible": true
}
}
}, {
},
"OmniBar",
{
"name": "Login",
"cfg": {
"nav": false,
Expand All @@ -507,7 +511,6 @@
}]
}
},
"OmniBar",
{
"name" : "Save",
"cfg": {
Expand Down Expand Up @@ -544,7 +547,8 @@
"className": "square-button"
}
}
}], "embedded": [
}],
"embedded": [
{
"name": "Map",
"cfg": {
Expand Down
4 changes: 2 additions & 2 deletions web/client/plugins/Measure.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const lineRuleIcon = require('./toolbar/assets/img/line-ruler.png');

const assign = require('object-assign');

const {changeMeasurementState} = require('../actions/measurement');
const {changeMeasurement} = require('../actions/measurement');

const Measure = require('../components/mapcontrols/measure/MeasureComponent');

Expand All @@ -40,7 +40,7 @@ const MeasurePlugin = connect((state) => {
bearingMeasureEnabled: state.measurement && state.measurement.bearingMeasureEnabled || false
};
}, {
toggleMeasure: changeMeasurementState
toggleMeasure: changeMeasurement
})(MeasureComponent);

module.exports = {
Expand Down
4 changes: 2 additions & 2 deletions web/client/plugins/MeasureResults.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const {connect} = require('react-redux');

const Message = require('./locale/Message');

const {changeMeasurementState} = require('../actions/measurement');
const {changeMeasurement} = require('../actions/measurement');

const MeasureRes = require('../components/mapcontrols/measure/MeasureResults');

Expand All @@ -33,7 +33,7 @@ const MeasureResultsPlugin = connect((state) => {
bearingMeasureEnabled: state.measurement && state.measurement.bearingMeasureEnabled || false
};
}, {
toggleMeasure: changeMeasurementState
toggleMeasure: changeMeasurement
})(MeasureComponent);

module.exports = {
Expand Down
4 changes: 1 addition & 3 deletions web/client/plugins/MetadataExplorer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ const MetadataExplorerComponent = React.createClass({
panelClassName: React.PropTypes.string,
toggleControl: React.PropTypes.func,
closeGlyph: React.PropTypes.string,
buttonStyle: React.PropTypes.string,
style: React.PropTypes.object
},
getDefaultProps() {
Expand All @@ -66,8 +65,7 @@ const MetadataExplorerComponent = React.createClass({
},
panelClassName: "toolbar-panel",
toggleControl: () => {},
closeGlyph: "",
buttonStyle: {}
closeGlyph: ""
};
},
render() {
Expand Down
9 changes: 6 additions & 3 deletions web/client/reducers/measurement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

var {
CHANGE_MEASUREMENT,
CHANGE_MEASUREMENT_TOOL,
CHANGE_MEASUREMENT_STATE
} = require('../actions/measurement');

Expand All @@ -19,9 +19,12 @@ function measurement(state = {
bearingMeasureEnabled: false
}, action) {
switch (action.type) {
case CHANGE_MEASUREMENT:
case CHANGE_MEASUREMENT_TOOL:
return assign({}, state, {
measurement: action.measurement
lineMeasureEnabled: ((action.geomType !== state.geomType) && (action.geomType === 'LineString')),
areaMeasureEnabled: ((action.geomType !== state.geomType) && (action.geomType === 'Polygon')),
bearingMeasureEnabled: ((action.geomType !== state.geomType) && (action.geomType === 'Bearing')),
geomType: (action.geomType === state.geomType) ? null : action.geomType
});
case CHANGE_MEASUREMENT_STATE:
return assign({}, state, {
Expand Down

0 comments on commit bd14631

Please sign in to comment.