Add 4 decimals, text annotations and print style

project/custom/templates/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+libs/Cesium/
 dist/
 target/
 *.sublime-*

project/standard/templates/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+libs/Cesium/
 dist/
 target/
 *.sublime-*

web/client/components/map/openlayers/DrawSupport.jsx

@@ -695,8 +695,8 @@ class DrawSupport extends React.Component {
                         previousFtIndex = i;
                     }
                     return f.getProperties().canEdit;
-                })[0];
-                const previousCoords = previousFt.getGeometry() && previousFt.getGeometry().getCoordinates && previousFt.getGeometry().getCoordinates() || [];
+                })[0] || null;
+                const previousCoords = previousFt && previousFt.getGeometry() && previousFt.getGeometry().getCoordinates && previousFt.getGeometry().getCoordinates() || [];
                 let actualCoords = [];
                 let olFt;
                 let newDrawMethod = newProps.drawMethod;
@@ -717,39 +717,39 @@ class DrawSupport extends React.Component {
                             actualCoords = [[e.coordinate]];
                         }
                         olFt = this.getNewFeature(newDrawMethod, actualCoords);
-                        olFt.setProperties(omit(previousFt.getProperties(), "geometry"));
+                        olFt.setProperties(omit(previousFt && previousFt.getProperties() || {}, "geometry"));
                         break;
                     }
                     case "LineString": {
                         actualCoords = previousCoords.length ? [...previousCoords, e.coordinate] : [e.coordinate];
                         olFt = this.getNewFeature(newDrawMethod, actualCoords);
-                        olFt.setProperties(omit(previousFt.getProperties(), "geometry"));
+                        olFt.setProperties(omit(previousFt && previousFt.getProperties() || {}, "geometry"));
                     }
                      break;
                     case "Circle": {
                         newDrawMethod = "Polygon";
-                        const radius = previousFt.getProperties() && previousFt.getProperties().radius || 10000;
-                        let center = e.coordinate; // || previousFt.getProperties() && previousFt.getProperties().center;
+                        const radius = previousFt && previousFt.getProperties() && previousFt.getProperties().radius || 10000;
+                        let center = e.coordinate;
                         const coords = this.polygonCoordsFromCircle(center, 100);
                         olFt = this.getNewFeature(newDrawMethod, coords);
                         // TODO verify center is projected in 4326 and is an array
                         center = reproject(center, this.getMapCrs(), "EPSG:4326", false);
-                        olFt.setProperties(omit(previousFt.getProperties(), "geometry"));
+                        olFt.setProperties(omit(previousFt && previousFt.getProperties() || {}, "geometry"));
                         olFt.setProperties({isCircle: true, radius, center: [center.x, center.y]});
                         break;
                     }
                     case "Text": {
                         newDrawMethod = "Point";
                         olFt = this.getNewFeature(newDrawMethod, e.coordinate);
-                        olFt.setProperties(omit(previousFt.getProperties(), "geometry"));
-                        olFt.setProperties({isText: true, valueText: previousFt.getProperties() && previousFt.getProperties().valueText || newProps.options.defaultTextAnnotation || "New" });
+                        olFt.setProperties(omit(previousFt && previousFt.getProperties() || {}, "geometry"));
+                        olFt.setProperties({isText: true, valueText: previousFt && previousFt.getProperties() && previousFt.getProperties().valueText || newProps.options.defaultTextAnnotation || "New" });
                         break;
                     }
                     // point
                     default: {
                         actualCoords = e.coordinate;
                         olFt = this.getNewFeature(newDrawMethod, actualCoords);
-                        olFt.setProperties(omit(previousFt.getProperties(), "geometry"));
+                        olFt.setProperties(omit(previousFt && previousFt.getProperties() || {}, "geometry"));
                     }
                 }
 
@@ -770,9 +770,7 @@ class DrawSupport extends React.Component {
                 this.props.onDrawingFeatures([ft]);
 
                 olFt = transformPolygonToCircle(olFt, this.getMapCrs());
-                if (previousFeatures && previousFeatures.length) {
-                    previousFeatures[previousFtIndex] = olFt;
-                }
+                previousFeatures[previousFtIndex] = olFt;
                 this.drawSource = new ol.source.Vector({
                     features: previousFeatures
                 });

web/client/components/map/openlayers/VectorStyle.js

@@ -123,9 +123,9 @@ const STYLE_TEXT = {
     fontStyle: 'normal',
     fontSize: '14',
     fontSizeUom: 'px',
-    fontFamily: 'FontAwesome',
+    fontFamily: 'Arial',
     fontWeight: 'normal',
-    font: "14px FontAwesome",
+    font: "14px Arial",
     textAlign: 'center',
     color: '#000000',
     opacity: 1

web/client/components/mapcontrols/annotations/AnnotationsEditor.jsx

@@ -101,6 +101,7 @@ const bbox = require('@turf/bbox');
  * @prop {function} onDownload triggered when the user exports
  * @prop {boolean} coordinateEditorEnabled triggered when the user zooms to an annotation
  * @prop {object} selected Feature containing the geometry and the properties used for the coordinated editor
+ * @prop {object} aeronauticalOptions options for aeronautical format (seconds decimals and step)
  * @prop {number} maxZoom max zoome the for annotation (default 18)
  * @prop {function} onDeleteFeature triggered when user click on trash icon of the coordinate editor
  * @prop {number} width of the annotation panel
@@ -177,6 +178,7 @@ class AnnotationsEditor extends React.Component {
         onDownload: PropTypes.func,
         onChangeFormat: PropTypes.func,
         format: PropTypes.string,
+        aeronauticalOptions: PropTypes.object,
         onDeleteFeature: PropTypes.func
     };
 
@@ -549,6 +551,7 @@ class AnnotationsEditor extends React.Component {
                             <GeometryEditor
                                 options={this.props.config && this.props.config.geometryEditorOptions}
                                 drawing={this.props.drawing}
+                                aeronauticalOptions={this.props.aeronauticalOptions}
                                 selected={this.props.selected}
                                 featureType={this.props.featureType}
                                 format={this.props.format}

web/client/components/mapcontrols/annotations/CoordinateEntry.jsx

@@ -1,6 +1,5 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-// const {FormGroup, FormControl} = require('react-bootstrap');
 const DecimalCoordinateEditor = require('./editors/DecimalCoordinateEditor');
 const AeronauticalCoordinateEditor = require('./editors/AeronauticalCoordinateEditor');
 const {isNil} = require('lodash');
@@ -16,13 +15,13 @@ class CoordinateEntry extends React.Component {
         value: PropTypes.number,
         constraints: PropTypes.object,
         format: PropTypes.string,
+        aeronauticalOptions: PropTypes.object,
         coordinate: PropTypes.string,
         onChange: PropTypes.func
     };
     defaultProps = {
         format: "decimal"
     }
-
     render() {
         const {format} = this.props;
         return format === "decimal" || isNil(format) ? <DecimalCoordinateEditor {...this.props} format={this.props.format || "decimal"}/> : <AeronauticalCoordinateEditor {...this.props}/>;

web/client/components/mapcontrols/annotations/CoordinatesEditor.jsx

@@ -40,6 +40,7 @@ class CoordinateEditor extends React.Component {
         onChangeText: PropTypes.func,
         onChangeFormat: PropTypes.func,
         format: PropTypes.string,
+        aeronauticalOptions: PropTypes.object,
         componentsValidation: PropTypes.object,
         transitionProps: PropTypes.object,
         properties: PropTypes.object,
@@ -214,6 +215,7 @@ class CoordinateEditor extends React.Component {
                 <Row style={{flex: 1, overflowY: 'auto', overflowX: 'hidden'}}>
                     {this.props.components.map((component, idx) => <CoordinatesRow
                         format={this.props.format}
+                        aeronauticalOptions={this.props.aeronauticalOptions}
                         sortId={idx}
                         key={idx + " key"}
                         isDraggable={this.props.isDraggable && componentsValidation[type].remove && this[componentsValidation[type].validation]()}

web/client/components/mapcontrols/annotations/CoordinatesRow.jsx

@@ -20,11 +20,11 @@ class CoordinatesRowComponent extends React.Component {
         type: PropTypes.string,
         onMouseLeave: PropTypes.func,
         connectDragSource: PropTypes.func,
+        aeronauticalOptions: PropTypes.object,
         isDraggable: PropTypes.bool,
         removeVisible: PropTypes.bool,
         removeEnabled: PropTypes.bool
     };
-
     render() {
         const {idx} = this.props;
         const rowStyle =/* this.props.type === "LineString" || "Polygon" ? { marginLeft: -5, marginRight: -5} :*/ {marginLeft: -5, marginRight: -5};
@@ -46,6 +46,7 @@ class CoordinatesRowComponent extends React.Component {
                 <Col xs={5}>
                     <CoordinateEntry
                         format={this.props.format}
+                        aeronauticalOptions={this.props.aeronauticalOptions}
                         coordinate="lat"
                         idx={idx}
                         value={this.props.component.lat}
@@ -67,6 +68,7 @@ class CoordinatesRowComponent extends React.Component {
                 <Col xs={5}>
                     <CoordinateEntry
                         format={this.props.format}
+                        aeronauticalOptions={this.props.aeronauticalOptions}
                         coordinate="lon"
                         idx={idx}
                         value={this.props.component.lon}

web/client/components/mapcontrols/annotations/GeometryEditor.jsx

@@ -18,6 +18,7 @@ class GeometryEditor extends React.Component {
         onChangeFormat: PropTypes.func,
         onChangeRadius: PropTypes.func,
         onSetInvalidSelected: PropTypes.func,
+        aeronauticalOptions: PropTypes.object,
         onChangeText: PropTypes.func
     };
 
@@ -50,6 +51,7 @@ class GeometryEditor extends React.Component {
             properties={this.props.selected && this.props.selected.properties || {}}
             onComplete={() => {}}
             onChangeRadius={this.props.onChangeRadius}
+            aeronauticalOptions={this.props.aeronauticalOptions}
             onChangeFormat={this.props.onChangeFormat}
             format={this.props.format}
             onHighlightPoint={this.props.onHighlightPoint}

web/client/components/mapcontrols/annotations/editors/AeronauticalCoordinateEditor.jsx

@@ -12,7 +12,7 @@ const decimalToAeronautical = require('../enhancers/decimalToAeronautical');
 const coordinateTypePreset = require('../enhancers/coordinateTypePreset');
 const tempAeronauticalValue = require('../enhancers/tempAeronauticalValue');
 
-class CoordinateEntry extends React.Component {
+class AeronauticalCoordinateEditor extends React.Component {
 
     static propTypes = {
         idx: PropTypes.number,
@@ -22,13 +22,20 @@ class CoordinateEntry extends React.Component {
         seconds: PropTypes.number,
         directions: PropTypes.array,
         direction: PropTypes.string,
+        aeronauticalOptions: PropTypes.object,
         coordinate: PropTypes.string,
         onChange: PropTypes.func
     };
     static defaultProps = {
         coordinate: "lat",
         maxDegrees: 90,
-        directions: ["N", "S"]
+        directions: ["N", "S"],
+        aeronauticalOptions: {
+            seconds: {
+                decimals: 4,
+                step: 0.0001
+            }
+        }
     }
 
     onChange = (part, newValue) => {
@@ -93,6 +100,7 @@ class CoordinateEntry extends React.Component {
             width: 0,
             height: 0
         };
+        const {step: stepSeconds} = this.props.aeronauticalOptions.seconds;
         return (
             <FormGroup style={{display: "inline-flex"}}>
                 <FormControl
@@ -124,10 +132,10 @@ class CoordinateEntry extends React.Component {
                     value={this.props.seconds}
                     placeholder="s"
                     onChange={e => this.onChange("seconds", parseFloat(e.target.value))}
-                    step={1}
+                    step={stepSeconds}
                     max={60}
                     min={-1}
-                    style={{ width: 65, ...inputStyle, ...secondsInvalidStyle}}
+                    style={{ width: 80, ...inputStyle, ...secondsInvalidStyle}}
                     type="number"
                 />
             <span style={labelStyle}>&Prime;</span>
@@ -137,7 +145,6 @@ class CoordinateEntry extends React.Component {
                     onChange={e => this.onChange("direction", e.target.value)}
                     style={{ width: 65 }}>
                     {this.props.directions.map((d) => <option key={d} value={d}>{d}</option>)}
-
                 </FormControl>
             </FormGroup>
         );
@@ -163,4 +170,4 @@ module.exports = compose(
     coordinateTypePreset,
     decimalToAeronautical,
     tempAeronauticalValue
-)(CoordinateEntry);
+)(AeronauticalCoordinateEditor);

web/client/components/mapcontrols/annotations/enhancers/__tests__/decimalToAeronautical-test.js

@@ -38,6 +38,22 @@ describe("test the Annotations enahncers", () => {
             coordinate="lon"
             />), document.getElementById("container"));
     });
+    it('decimalToAeronautical conversion to 4 decimals as seconds', (done) => {
+        const Sink = decimalToAeronautical(createSink( props => {
+            expect(props).toExist();
+            expect(props.degrees).toBe(1);
+            expect(props.minutes).toBe(33);
+            expect(props.seconds).toBe(18.9193);
+            done();
+        }));
+        ReactDOM.render((<Sink
+            value = {1.55525535}
+            aeronauticalOptions={{seconds: {
+                decimals: 4
+            }}}
+            coordinate="lon"
+            />), document.getElementById("container"));
+    });
     it('decimalToAeronautical conversion correctly step on minutes and seconds', (done) => {
         // 13.3333333333 should be 13 degrees, 20 minutes
         const Sink = decimalToAeronautical(createSink(props => {

web/client/components/mapcontrols/annotations/enhancers/decimalToAeronautical.js

@@ -1,12 +1,13 @@
 
 const {compose, withHandlers, withProps} = require('recompose');
+const {round} = require('lodash');
 
-const convertDDToDMS = (D, lng) => {
+const convertDDToDMS = (D, lng, {seconds} = {seconds: {decimals: 4}}) => {
     let d = parseInt(D, 10);
     let minFloat = Math.abs((D - d) * 60);
     let m = Math.floor(minFloat);
     let secFloat = (minFloat - m) * 60;
-    let s = Math.round(secFloat);
+    let s = round(secFloat, seconds.decimals);
     d = Math.abs(d);
 
     if (s === 60) {
@@ -29,10 +30,11 @@ const convertDDToDMS = (D, lng) => {
 module.exports = compose(
     withProps(({
         value,
-        coordinate
+        coordinate,
+        aeronauticalOptions
     }) => {
         return {
-            ...convertDDToDMS(value, coordinate === "lon")
+            ...convertDDToDMS(value, coordinate === "lon", aeronauticalOptions)
         };
     }),
     withHandlers({
@@ -42,7 +44,9 @@ module.exports = compose(
             }
             // conversion dmsToDD
             let dd = degrees + minutes / 60 + seconds / (60 * 60);
-            if (direction === 'S' || direction === 'W') {
+
+            // this change is needed you have 0 as degrees and a negative minutes or seconds i.e direction swapping side is caused by minutes or seconds being negative
+            if (dd > 0 && (direction === 'S' || direction === 'W') || dd < 0 && (direction === 'N' || direction === 'E')) {
                 dd = dd * -1;
             } // Don't do anything for N or E
 

web/client/components/style/TextStyler.jsx

@@ -44,13 +44,13 @@ class TextStyler extends React.Component {
         fontWeightValues: [{value: "normal"}, {value: "bold"}],
         alignValues: [{value: "start", label: "left"}, {value: "center", label: "center"}, {value: "end", label: "right"}],
         fontStyleValues: [{value: "normal"}, {value: "italic"}],
-        fontFamilyValues: [{value: "Arial"}, {value: "FontAwesome"}, {value: "Courier"}],
+        fontFamilyValues: [{value: "Arial"}, {value: "Helvetica"}, {value: "sans-serif"}, {value: "Courier"}],
         shapeStyle: {},
         setStyleParameter: () => {}
     };
 
     state = {
-        fontFamily: "FontAwesome"
+        fontFamily: "Arial"
     };
 
     render() {
@@ -98,15 +98,15 @@ class TextStyler extends React.Component {
                         </Col>
                         <Col xs={6} style={{position: 'static'}}>
                             <Combobox
-                                value={this.state.fontFamily || "FontAwesome"}
+                                value={this.state.fontFamily || "Arial"}
                                 textField="value"
                                 valueField="value"
                                 messages={messages}
                                 data={this.props.fontFamilyValues}
                                 onChange={(e) => {
                                     let fontFamily = e.value ? e.value : e;
                                     if (fontFamily === "") {
-                                        fontFamily = "FontAwesome";
+                                        fontFamily = "Arial";
                                     }
                                     this.setState({fontFamily});
                                     const font = createFont({...style, fontFamily});

web/client/epics/annotations.js

@@ -491,15 +491,21 @@ module.exports = (viewer) => ({
             selected = set("geometry.coordinates", [selected.geometry.coordinates].filter(validateCoordsArray)[0] || [], selected);
             selected = set("geometry.type", "Point", selected);
             let selectedIndex = findIndex(feature.features, (f) => f.properties.id === selected.properties.id);
-            if (selected.properties.isValidFeature) {
+            if (validateCoordsArray(selected.geometry.coordinates) ) {
+                // if it has at least the coords valid draw the small circle for the text,
+                // text will be drawn if present
                 if (selectedIndex === -1) {
                     feature = set(`features`, feature.features.concat([selected]), feature);
                 } else {
                     feature = set(`features[${selectedIndex}]`, selected, feature);
                 }
             } else {
+                // if coords ar not valid do not draw anything
+                selected = set("geometry", null, selected);
                 if (selectedIndex !== -1) {
-                    feature = set(`features`, feature.features.filter((f, i) => i !== selectedIndex ), feature);
+                    feature = set(`features[${selectedIndex}]`, selected, feature);
+                } else {
+                    feature = set(`features`, feature.features.concat([selected]), feature);
                 }
             }
             const action = changeDrawingStatus("drawOrEdit", "Text", "annotations", [feature], {