Skip to content

Commit

Permalink
Add 4 decimals, text annotations and print style (#3082)
Browse files Browse the repository at this point in the history
* Fix #92 #93 and #88 add 4 decimals, text annotations and print style

* fix annotations text editor, fix gitignore for project

* fix text font on firefox, updated tests
  • Loading branch information
MV88 authored Jul 16, 2018
1 parent c686768 commit fad275b
Show file tree
Hide file tree
Showing 24 changed files with 181 additions and 87 deletions.
1 change: 1 addition & 0 deletions project/custom/templates/.gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules/
libs/Cesium/
dist/
target/
*.sublime-*
Expand Down
1 change: 1 addition & 0 deletions project/standard/templates/.gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules/
libs/Cesium/
dist/
target/
*.sublime-*
Expand Down
24 changes: 11 additions & 13 deletions web/client/components/map/openlayers/DrawSupport.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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"));
}
}

Expand All @@ -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
});
Expand Down
4 changes: 2 additions & 2 deletions web/client/components/map/openlayers/VectorStyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -177,6 +178,7 @@ class AnnotationsEditor extends React.Component {
onDownload: PropTypes.func,
onChangeFormat: PropTypes.func,
format: PropTypes.string,
aeronauticalOptions: PropTypes.object,
onDeleteFeature: PropTypes.func
};

Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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}/>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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]()}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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}
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ class GeometryEditor extends React.Component {
onChangeFormat: PropTypes.func,
onChangeRadius: PropTypes.func,
onSetInvalidSelected: PropTypes.func,
aeronauticalOptions: PropTypes.object,
onChangeText: PropTypes.func
};

Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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) => {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
Expand All @@ -163,4 +170,4 @@ module.exports = compose(
coordinateTypePreset,
decimalToAeronautical,
tempAeronauticalValue
)(CoordinateEntry);
)(AeronauticalCoordinateEditor);
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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({
Expand All @@ -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

Expand Down
8 changes: 4 additions & 4 deletions web/client/components/style/TextStyler.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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});
Expand Down
10 changes: 8 additions & 2 deletions web/client/epics/annotations.js
Original file line number Diff line number Diff line change
Expand Up @@ -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], {
Expand Down
Loading

0 comments on commit fad275b

Please sign in to comment.