Skip to content

Commit 32a212c

Browse files
MV88MV88
authored
Fix #3523 Fix #3548 Fix problems with coordinate editor for the search and GFI tools (#3606)
* Fix problems with coordinate editor for the search and GFI tools * also fix some problem with loading and displaying annotations with leaflet * especially with text and the multiple draw of same ft. * also updated limit stroek width for symbols
1 parent 3f5894d commit 32a212c

10 files changed

Lines changed: 100 additions & 37 deletions

File tree

‎web/client/components/data/identify/IdentifyContainer.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,11 @@ module.exports = props => {
6868
let lngCorrected = null;
6969
if (latlng) {
7070
/* lngCorrected is the converted longitude in order to have the value between
71-
the range (-180 / +180).*/
72-
lngCorrected = latlng && Math.round(latlng.lng * 100000) / 100000;
71+
* the range (-180 / +180).
72+
* Precision has to be >= than the coordinate editor precision
73+
* especially in the case of aeronautical degree edito which is 12
74+
*/
75+
lngCorrected = latlng && Math.round(latlng.lng * 100000000000000000) / 100000000000000000;
7376
/* the following formula apply the converion */
7477
lngCorrected = lngCorrected - 360 * Math.floor(lngCorrected / 360 + 0.5);
7578
}

‎web/client/components/map/leaflet/Feature.jsx‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,26 @@ class Feature extends React.Component {
3535
}
3636
}
3737

38-
componentWillReceiveProps(newProps) {
38+
componentWillReceiveProps(nextProps) {
3939
// TODO check if shallow comparison is enough properties and geometry
40-
if (isEqual(newProps.properties, this.props.properties) || isEqual(newProps.geometry, this.props.geometry) || (newProps.features !== this.props.features) || (newProps.style !== this.props.style)) {
41-
newProps.container.removeLayer(this._layer);
42-
this.createLayer(newProps);
40+
if (!isEqual(nextProps.properties, this.props.properties) ||
41+
!isEqual(nextProps.geometry, this.props.geometry) ||
42+
(nextProps.features !== this.props.features) ||
43+
(nextProps.style !== this.props.style)) {
44+
this.removeLayer(nextProps);
45+
this.createLayer(nextProps);
4346
}
4447
}
4548

4649
shouldComponentUpdate(nextProps) {
4750
// TODO check if shallow comparison is enough properties and geometry
48-
return isEqual(nextProps.properties, this.props.properties) || isEqual(nextProps.geometry, this.props.geometry) || (nextProps.features !== this.props.features);
51+
return !isEqual(nextProps.properties, this.props.properties) ||
52+
!isEqual(nextProps.geometry, this.props.geometry) ||
53+
(nextProps.features !== this.props.features);
4954
}
5055

5156
componentWillUnmount() {
52-
if (this._layer) {
53-
this.props.container.removeLayer(this._layer);
54-
}
57+
this.removeLayer(this.props);
5558
}
5659

5760
render() {
@@ -87,6 +90,10 @@ class Feature extends React.Component {
8790
}
8891
}
8992
addLayer(props, styles) {
93+
/* remove the current layer
94+
* to avoid multiple features to overlap
95+
*/
96+
this.removeLayer(props);
9097
this._layer = geometryToLayer({
9198
type: props.type,
9299
geometry: props.geometry,
@@ -109,6 +116,14 @@ class Feature extends React.Component {
109116
}
110117
});
111118
}
119+
/* it removes the layer from a container otherwise we would create and add more
120+
* layer with same features causing some unintended style override
121+
*/
122+
removeLayer = (props) => {
123+
if (this._layer) {
124+
props.container.removeLayer(this._layer);
125+
}
126+
}
112127
}
113128

114129
module.exports = Feature;

‎web/client/components/map/openlayers/Feature.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,18 @@ class Feature extends React.Component {
3838

3939
shouldComponentUpdate(nextProps) {
4040
// TODO check if shallow comparison is enough properties and geometry
41-
return !isEqual(nextProps.properties, this.props.properties) || !isEqual(nextProps.geometry, this.props.geometry) || (nextProps.features !== this.props.features) || (nextProps.style !== this.props.style);
41+
return !isEqual(nextProps.properties, this.props.properties) ||
42+
!isEqual(nextProps.geometry, this.props.geometry) ||
43+
(nextProps.features !== this.props.features) ||
44+
(nextProps.style !== this.props.style);
4245
}
4346

4447
componentWillUpdate(nextProps) {
4548
// TODO check if shallow comparison is enough properties and geometry
46-
if (!isEqual(nextProps.properties, this.props.properties) || !isEqual(nextProps.geometry, this.props.geometry) || (nextProps.features !== this.props.features) || (nextProps.style !== this.props.style)) {
49+
if (!isEqual(nextProps.properties, this.props.properties) ||
50+
!isEqual(nextProps.geometry, this.props.geometry) ||
51+
(nextProps.features !== this.props.features) ||
52+
(nextProps.style !== this.props.style)) {
4753
this.removeFromContainer();
4854
this.addFeatures(nextProps);
4955
}

‎web/client/components/mapcontrols/search/SearchBar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ class SearchBar extends React.Component {
299299
className: "square-button-md no-border",
300300
bsStyle: "default",
301301
pullRight: true,
302-
visible: activeTool === "addressSearch" && (this.props.searchText !== "" || this.props.selectedItems && this.props.selectedItems.length > 0) || activeTool === "coordinatesSearch" && (!!this.props.coordinate.lon || !!this.props.coordinate.lat),
302+
visible: activeTool === "addressSearch" && (this.props.searchText !== "" || this.props.selectedItems && this.props.selectedItems.length > 0) || activeTool === "coordinatesSearch" && (isNumber(this.props.coordinate.lon) || isNumber(this.props.coordinate.lat)),
303303
onClick: () => {
304304
if (activeTool === "addressSearch") {
305305
this.clearSearch();

‎web/client/components/misc/coordinateeditors/editors/AeronauticalCoordinateEditor.jsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,18 @@ class AeronauticalCoordinateEditor extends React.Component {
6363
? (direction === this.props.directions[0] ? this.props.directions[1] : this.props.directions[0])
6464
: direction;
6565
if ( degrees === -1) {
66-
degrees = 0;
67-
minutes = 0;
68-
seconds = 0.0001;
66+
// when switching from 0° 0' 0'' E to -1° 0' 0'' E it was not going to 1° 0' 0'' W
67+
if (newValues.degrees < 0 && newValues.minutes >= 0) {
68+
degrees = newValues.degrees;
69+
} else if (newValues.minutes < 0 && newValues.degrees <= 0) {
70+
// when switching from 0° 0' 0'' E to 0° -1' 0'' E it was not going to 0° 1' 0'' W
71+
degrees = 0;
72+
minutes = newValues.minutes;
73+
} else {
74+
degrees = 0;
75+
minutes = 0;
76+
seconds = 0.0001;
77+
}
6978
}
7079
return {
7180
degrees,
@@ -86,12 +95,15 @@ class AeronauticalCoordinateEditor extends React.Component {
8695
: 0;
8796

8897
}
98+
getInputStyle = (val) => {
99+
return (isNaN(val) || val === "") ? {borderColor: "#a94442"} : {};
100+
}
89101

90102
render() {
91103
const inputStyle = { padding: 0, textAlign: "center", borderRight: 'none' };
92-
const degreesInvalidStyle = isNaN(this.props.degrees) ? {borderColor: "#a94442"} : {};
93-
const minutesInvalidStyle = isNaN(this.props.minutes) ? {borderColor: "#a94442"} : {};
94-
const secondsInvalidStyle = isNaN(this.props.seconds) ? {borderColor: "#a94442"} : {};
104+
const degreesInvalidStyle = this.getInputStyle(this.props.degrees);
105+
const minutesInvalidStyle = this.getInputStyle(this.props.minutes);
106+
const secondsInvalidStyle = this.getInputStyle(this.props.seconds);
95107
const labelStyle = {
96108
position: "relative",
97109
top: 0,

‎web/client/components/misc/coordinateeditors/enhancers/decimalToAeronautical.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11

22
const {compose, withHandlers, withProps} = require('recompose');
3-
const {round} = require('lodash');
3+
const {round, isNaN} = require('lodash');
44

55
const convertDDToDMS = (D, lng, {seconds} = {seconds: {decimals: 4}}) => {
6-
let d = parseInt(D, 10);
6+
7+
// round to the smaller absolute integer value
8+
let d = D >= 0 ? Math.floor(D) : Math.ceil(D);
9+
710
let minFloat = Math.abs((D - d) * 60);
811
let m = Math.floor(minFloat);
912
let secFloat = (minFloat - m) * 60;
@@ -19,12 +22,23 @@ const convertDDToDMS = (D, lng, {seconds} = {seconds: {decimals: 4}}) => {
1922
m = 0;
2023
}
2124

22-
return {
25+
if (isNaN(d) || D === "") {
26+
// reset the inputs
27+
return {
28+
degrees: "",
29+
minutes: "",
30+
seconds: "",
31+
direction: lng ? 'W' : 'N' // let's chose some default direction if coord is 0
32+
};
33+
}
34+
let values = {
2335
degrees: d,
24-
direction: D < 0 ? lng ? 'W' : 'S' : lng ? 'E' : 'N',
2536
minutes: m,
26-
seconds: s
37+
seconds: s,
38+
direction: D < 0 ? lng ? 'W' : 'S' : lng ? 'E' : 'N'
2739
};
40+
41+
return values;
2842
};
2943

3044
module.exports = compose(

‎web/client/components/misc/coordinateeditors/enhancers/tempAeronauticalValue.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
const {compose, withHandlers, withState, withProps} = require('recompose');
2-
// const {isNil} = require('lodash');
32

43
module.exports = compose(
54
withProps(({ value }) => ({
65
isValid: value !== ""
76
})),
87

98
withState('initial', 'setInitial', {}),
10-
withProps(({isValid, initial}) => {
11-
return isValid ? {} : initial;
9+
withProps(({isValid, initial, degrees, minutes, seconds}) => {
10+
return isValid || ( degrees === "" && minutes === "" && seconds === "") ? {} : initial;
1211
}),
1312
withHandlers( {
1413
onChange: (props) => ({degrees, minutes, seconds, direction}) => {
15-
if (isNaN(degrees) || isNaN(minutes) || isNaN(seconds)) {
16-
props.setInitial({degrees, minutes, seconds, direction});
17-
// props.onChange(undefined);
18-
props.onChange({degrees, minutes, seconds, direction});
19-
} else {
20-
props.onChange({degrees, minutes, seconds, direction});
14+
if (isNaN(degrees)) {
15+
props.setInitial({degrees: "", minutes, seconds, direction});
16+
} else if (isNaN(minutes)) {
17+
props.setInitial({degrees, minutes: "", seconds, direction});
18+
} else if (isNaN(seconds)) {
19+
props.setInitial({degrees, minutes, seconds: "", direction});
2120
}
21+
props.onChange({degrees, minutes, seconds, direction});
2222
}
2323
})
2424

‎web/client/components/style/vector/Manager.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ class Manager extends React.Component {
135135
const stroke = isStrokeStyle(style) && isSymbolStyle(style) &&
136136
(checkSymbolsError(this.props.symbolErrors) ||
137137
checkSymbolsError(this.props.symbolErrors, "loading_symbol" + style.shape))
138-
? null : isStrokeStyle(style) ? <Stroke {...stylerProps} lineDashOptions={this.props.lineDashOptions} key={"stroke" + i}/> : null;
138+
? null : isStrokeStyle(style) ? <Stroke {...stylerProps} lineDashOptions={this.props.lineDashOptions} constraints={{maxWidth: isSymbolStyle(style) ? 5 : 15}} key={"stroke" + i}/> : null;
139139
const fill = isFillStyle(style) && isSymbolStyle(style) &&
140140
(checkSymbolsError(this.props.symbolErrors) ||
141141
checkSymbolsError(this.props.symbolErrors, "loading_symbol" + style.shape))

‎web/client/components/style/vector/Stroke.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,16 @@ class Stroke extends React.Component {
3131
style: PropTypes.object,
3232
lineDashOptions: PropTypes.array,
3333
onChange: PropTypes.func,
34-
width: PropTypes.number
34+
width: PropTypes.number,
35+
constraints: PropTypes.object
3536
};
3637

3738
static defaultProps = {
3839
style: {},
40+
constraints: {
41+
maxWidth: 15,
42+
minWidth: 1
43+
},
3944
onChange: () => {}
4045
};
4146

@@ -106,7 +111,10 @@ class Stroke extends React.Component {
106111
from: value => Math.round(value),
107112
to: value => Math.round(value) + ' px'
108113
}}
109-
range={{min: 1, max: 15}}
114+
range={{
115+
min: isNil(this.props.constraints && this.props.constraints.minWidth) ? 1 : this.props.constraints.maxWidth,
116+
max: this.props.constraints && this.props.constraints.maxWidth || 15
117+
}}
110118
onChange={(values) => {
111119
const weight = parseInt(values[0].replace(' px', ''), 10);
112120
this.props.onChange(style.id, {weight});

‎web/client/utils/leaflet/Vector.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,12 @@ const VectorUtils = {
9696
createTextPointMarkerLayer: ({pointToLayer, geojson, latlng, options, style = {}, highlight = false} = {}) => {
9797
if (geojson.properties && geojson.properties.isText) {
9898
// this is a Text Feature
99-
let myIcon = L.divIcon({html: geojson.properties.valueText, className: ''});
99+
// TODO: improve management for stroke-width because 5px it was not the same as in ol width:5 for ol.style.Stroke
100+
let myIcon = L.divIcon({html: `<span style="
101+
font:${style.font};
102+
color:${style.fillColor};
103+
-webkit-text-stroke-width:${1}px;
104+
-webkit-text-stroke-color:${style.color};">${geojson.properties.valueText}</span>`, className: ''});
100105
return new L.Marker(latlng, {icon: myIcon});
101106
}
102107
return VectorUtils.getPointLayer(pointToLayer, geojson, latlng, {...options, style, highlight});

0 commit comments

Comments
 (0)