Fix geosolutions-it#2668

kappu72 · Mar 9, 2018 · fcf02db · fcf02db
1 parent dece305
commit fcf02db
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 46 deletions.
diff --git a/web/client/components/data/query/GeometryDetails.jsx b/web/client/components/data/query/GeometryDetails.jsx
@@ -16,14 +16,16 @@ const assign = require('object-assign');
 
 const CoordinatesUtils = require("../../../utils/CoordinatesUtils");
 
+
 class GeometryDetails extends React.Component {
     static propTypes = {
         useMapProjection: PropTypes.bool,
         geometry: PropTypes.object,
         type: PropTypes.string,
         onShowPanel: PropTypes.func,
         onChangeDrawingStatus: PropTypes.func,
-        onEndDrawing: PropTypes.func
+        onEndDrawing: PropTypes.func,
+        zoom: PropTypes.number
     };
 
     static defaultProps = {
@@ -77,7 +79,7 @@ class GeometryDetails extends React.Component {
             projection: this.props.geometry.projection
         };
 
-        this.props.onChangeDrawingStatus("replace", undefined, "queryform", [geometry]);
+        this.props.onChangeDrawingStatus({geometry:[geometry]});
     };
 
     onUpdateCircle = (value, name) => {
@@ -96,12 +98,11 @@ class GeometryDetails extends React.Component {
             projection: this.props.geometry.projection
         };
 
-        this.props.onChangeDrawingStatus("replace", undefined, "queryform", [geometry]);
+        this.props.onChangeDrawingStatus({geometry: [geometry]});
     };
 
     onModifyGeometry = () => {
         let geometry;
-
         // Update the geometry
         if (this.props.type === "BBOX") {
             this.extent = this.tempExtent;
@@ -168,28 +169,44 @@ class GeometryDetails extends React.Component {
     };
 
     onClosePanel = () => {
-        if (this.props.type === "BBOX") {
-            this.resetBBOX();
-        } else if (this.props.type === "Circle") {
-            this.resetCircle();
-        }
-
+        this.resetGeom();
         this.props.onShowPanel(false);
     };
-
+    roundValue = (val, prec = 1000000) => Math.round(val * prec) / prec;
+    getStep = (zoom = 1) => {
+        if ( zoom >= 21 ) {
+            return 0.00001
+        }else if( zoom >= 18) {
+            return 0.0001
+        }else if( zoom >= 15) {
+            return 0.001
+        }else if( zoom >= 12) {
+            return 0.01
+        }else if( zoom >= 9) {
+            return 0.1
+        }else if( zoom >= 6) {
+            return 1
+        }
+            return 10;
+    };
+    getStepCircle = (zoom, name) => {
+        const step = this.getStep(zoom);
+        return name === 'radius' && step * 100000 || step;
+    };
+    isWGS84 = () => (this.props.geometry || {}).projection === 'EPSG:4326' || !this.props.useMapProjection;
     getBBOXDimensions = (geometry) => {
         const extent = geometry.projection !== 'EPSG:4326' && !this.props.useMapProjection ?
             CoordinatesUtils.reprojectBbox(geometry.extent, geometry.projection, 'EPSG:4326') : geometry.extent;
 
         return {
             // minx
-            west: Math.round(extent[0] * 100) / 100,
+            west: extent[0],
             // miny
-            sud: Math.round(extent[1] * 100) / 100,
+            sud: extent[1],
             // maxx
-            est: Math.round(extent[2] * 100) / 100,
+            est: extent[2],
             // maxy
-            north: Math.round(extent[3] * 100) / 100
+            north: extent[3]
         };
     };
     getCircleDimensions = (geometry) => {
@@ -201,9 +218,9 @@ class GeometryDetails extends React.Component {
         center = (center.x === undefined) ? {x: center[0], y: center[1]} : center;
 
         return {
-            x: Math.round(center.x * 100) / 100,
-            y: Math.round(center.y * 100) / 100,
-            radius: Math.round(geometry.radius * 100) / 100
+            x: center.x,
+            y: center.y,
+            radius: geometry.radius
         };
     };
     renderCoordinateField = (value, name) => {
@@ -214,18 +231,19 @@ class GeometryDetails extends React.Component {
                     style={{minWidth: '105px', margin: 'auto'}}
                     type="number"
                     id={"queryform_bbox_" + name}
-                    defaultValue={value}
+                    step={!this.isWGS84() ? 1 : this.getStep(this.props.zoom)}
+                    defaultValue={this.roundValue(value, !this.isWGS84() ? 100 : 1000000)}
                     onChange={(evt) => this.onUpdateBBOX(evt.target.value, name)}/>
             </div>
         );
     };
-
     renderCircleField = (value, name) => {
         return (
             <FormControl
                 type="number"
                 id={"queryform_circle_" + name}
-                defaultValue={value}
+                defaultValue={this.roundValue(value, !this.isWGS84() || name === 'radius' ? 100 : 1000000)}
+                step={!this.isWGS84() ? 1 : this.getStepCircle(this.props.zoom, name)}
                 onChange={(evt) => this.onUpdateCircle(evt.target.value, name)}/>
         );
     };
@@ -352,7 +370,7 @@ class GeometryDetails extends React.Component {
                 key: 'reset',
                 tooltipId: 'queryform.reset',
                 glyph: 'clear-filter',
-                onClick: () => this.resetBBOX()
+                onClick: () => this.resetGeom()
             }, {
                 key: 'close',
                 glyph: '1-close',
@@ -362,30 +380,36 @@ class GeometryDetails extends React.Component {
             </SwitchPanel>
         );
     }
-
+    resetGeom = () => {
+        if (this.props.type === "BBOX") {
+            this.resetBBOX();
+        } else if (this.props.type === "Circle") {
+            this.resetCircle();
+        }
+    };
     resetBBOX = () => {
         for (let prop in this.extent) {
             if (prop) {
                 let coordinateInput = document.getElementById("queryform_bbox_" + prop);
-                coordinateInput.value = this.extent[prop];
-                this.onUpdateBBOX(coordinateInput.value, prop);
+                coordinateInput.value = this.roundValue(this.extent[prop], !this.isWGS84() ? 100 : 1000000);
+                this.onUpdateBBOX(this.extent[prop], prop);
             }
         }
     };
 
     resetCircle = () => {
         let radiusInput = document.getElementById("queryform_circle_radius");
-        radiusInput.value = this.circle.radius;
-        this.onUpdateCircle(radiusInput.value, "radius");
+        radiusInput.value = this.roundValue(this.circle.radius, 100);
+        this.onUpdateCircle(this.circle.radius, "radius");
 
         let coordinateXInput = document.getElementById("queryform_circle_x");
-        coordinateXInput.value = this.circle.x;
-        this.onUpdateCircle(coordinateXInput.value, "x");
+        coordinateXInput.value = this.roundValue(this.circle.x, !this.isWGS84() ? 100 : 1000000);
+        this.onUpdateCircle(this.circle.x, "x");
 
         let coordinateYInput = document.getElementById("queryform_circle_y");
-        coordinateYInput.value = this.circle.y;
-        this.onUpdateCircle(coordinateYInput.value, "y");
+        coordinateYInput.value = this.roundValue(this.circle.y, !this.isWGS84() ? 100 : 1000000);
+        this.onUpdateCircle(this.circle.y, "y");
     };
 }
 
-module.exports = GeometryDetails;
+module.exports =  GeometryDetails;
diff --git a/web/client/components/data/query/QueryBuilder.jsx b/web/client/components/data/query/QueryBuilder.jsx
@@ -62,7 +62,8 @@ class QueryBuilder extends React.Component {
         allowEmptyFilter: PropTypes.bool,
         autocompleteEnabled: PropTypes.bool,
         emptyFilterWarning: PropTypes.bool,
-        header: PropTypes.node
+        header: PropTypes.node,
+        zoom: PropTypes.number
     };
 
     static defaultProps = {
@@ -180,7 +181,8 @@ class QueryBuilder extends React.Component {
                         spatialMethodOptions={this.props.spatialMethodOptions}
                         spatialPanelExpanded={this.props.spatialPanelExpanded}
                         showDetailsPanel={this.props.showDetailsPanel}
-                        actions={this.props.spatialFilterActions}/>
+                        actions={this.props.spatialFilterActions}
+                        zoom={this.props.zoom}/>
                     <CrossLayerFilter
                         spatialOperations={this.props.spatialOperations}
                         crossLayerExpanded={this.props.crossLayerExpanded}

diff --git a/web/client/components/data/query/SpatialFilter.jsx b/web/client/components/data/query/SpatialFilter.jsx
@@ -11,7 +11,7 @@ const PropTypes = require('prop-types');
 
 const {Row, Col, Panel, Glyphicon, FormControl} = require('react-bootstrap');
 const ComboField = require('./ComboField');
-const GeometryDetails = require('./GeometryDetails');
+const GeometryDetails =  require('./enhancers/geometrydetails')(require('./GeometryDetails'));
 const {AutocompleteWFSCombobox} = require('../../misc/AutocompleteWFSCombobox');
 const ComboFieldListItem = require('./ComboFieldListItem');
 const {createWFSFetchStream} = require('../../../observables/autocomplete');
@@ -31,7 +31,8 @@ class SpatialFilter extends React.Component {
         spatialPanelExpanded: PropTypes.bool,
         showDetailsPanel: PropTypes.bool,
         withContainer: PropTypes.bool,
-        actions: PropTypes.object
+        actions: PropTypes.object,
+        zoom: PropTypes.number
     };
 
     static contextTypes = {
@@ -275,7 +276,8 @@ class SpatialFilter extends React.Component {
                 type={this.props.spatialField.method}
                 onShowPanel={this.props.actions.onShowSpatialSelectionDetails}
                 onChangeDrawingStatus={this.changeDrawingStatus}
-                onEndDrawing={this.props.actions.onEndDrawing}/>)
+                onEndDrawing={this.props.actions.onEndDrawing}
+                zoom={this.props.zoom}/>)
          :
             <span/>
         ;

diff --git a/web/client/components/data/query/enhancers/__tests__/geometrydetails-test.jsx b/web/client/components/data/query/enhancers/__tests__/geometrydetails-test.jsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2018, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const {createSink} = require('recompose');
+const expect = require('expect');
+const geometrydetails = require('../geometrydetails');
+
+describe('geometrydetails enhancer', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+    it('geometrydetails onChangeDrawingStatus debounce', (done) => {
+        const action = (status, method, owner, features) => {
+            expect(status).toExist();
+            expect(status).toBe("replace");
+            expect(method).toNotExist();
+            expect(owner).toExist();
+            expect(owner).toBe("queryform");
+            expect(features).toExist();
+            expect(features).toBe("geom1");
+            done();
+        }
+        const Sink = geometrydetails(createSink( props => {
+            expect(props).toExist();
+            expect(props.onChangeDrawingStatus).toExist();
+            props.onChangeDrawingStatus({geometry: "geom"}); 
+            props.onChangeDrawingStatus({geometry: "geom1"});    
+        }));
+        ReactDOM.render((<Sink onChangeDrawingStatus={action}
+            />), document.getElementById("container"));
+
+    });
+});
diff --git a/web/client/components/data/query/enhancers/geometrydetails.js b/web/client/components/data/query/enhancers/geometrydetails.js
@@ -0,0 +1,24 @@
+/**
+* Copyright 2018, GeoSolutions Sas.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const {compose, createEventHandler, defaultProps} = require('recompose');
+
+const propsStreamFactory = require('../../../misc/enhancers/propsStreamFactory');
+
+
+const dataStreamFactory = $props => {
+    const {handler: onChangeDrawingStatus, stream: onChangeDrawingStatus$} = createEventHandler();
+    return $props.map(o => ({...o, onChangeDrawingStatus$ })).switchMap(({onChangeDrawingStatus$, onChangeDrawingStatus}) => onChangeDrawingStatus$.debounceTime(1000).map(({geometry}) => onChangeDrawingStatus("replace", undefined, "queryform", geometry)))
+    .startWith({}).map( o => ({...o, onChangeDrawingStatus}));
+};
+
+
+module.exports = compose(
+    defaultProps({
+        dataStreamFactory
+    }),
+    propsStreamFactory);
diff --git a/web/client/plugins/QueryPanel.jsx b/web/client/plugins/QueryPanel.jsx
@@ -21,6 +21,7 @@ const {zoomToExtent} = require('../actions/map');
 const {toggleControl} = require('../actions/controls');
 
 const {groupsSelector} = require('../selectors/layers');
+const {mapSelector} = require('../selectors/map');
 const {
     crossLayerFilterSelector,
     availableCrossLayerFilterLayersSelector
@@ -111,11 +112,11 @@ const SmartQueryForm = connect((state) => {
         showGeneratedFilter: false,
         allowEmptyFilter: true,
         emptyFilterWarning: true,
-        maxHeight: state.map && state.map.present && state.map.present.size && state.map.present.size.height
+        maxHeight: state.map && state.map.present && state.map.present.size && state.map.present.size.height,
+        zoom: (mapSelector(state) || {}).zoom
     };
 }, dispatch => {
     return {
-
         attributeFilterActions: bindActionCreators({
             onAddGroupField: addGroupField,
             onAddFilterField: addFilterField,

diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE
@@ -652,7 +652,7 @@
                     "reset_bbox": "Zurücksetzen",
                     "save_bbox": "BBOX Änderungen speichern",
                     "save_radius": "Radius/Kreiszentrum Änderungen speichern",
-                    "radius": "Radius"
+                    "radius": "Radius(m)"
                 },
                 "methods": {
                     "zone": "Zone",

diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US
@@ -653,7 +653,7 @@
                     "reset_bbox": "Reset",
                     "save_bbox": "Save BBOX modifications",
                     "save_radius": "Save the radius/center modifications",
-                    "radius": "Radius"
+                    "radius": "Radius(m)"
                 },
                 "methods": {
                     "zone": "Zone",

diff --git a/web/client/translations/data.es-ES b/web/client/translations/data.es-ES
@@ -652,7 +652,7 @@
                     "reset_bbox": "Reset",
                     "save_bbox": "Guardar los cambios",
                     "save_radius": "Guardar los cambios",
-                    "radius": "Radio"
+                    "radius": "Radio(m)"
                 },
                 "methods": {
                     "zone": "Zona",

diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR
@@ -653,7 +653,7 @@
                     "reset_bbox": "Recommencer",
                     "save_bbox": "Sauver les modifications",
                     "save_radius": "Sauver les modifications",
-                    "radius": "Rayon"
+                    "radius": "Rayon(m)"
                 },
                 "methods": {
                     "zone": "Zone",

diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT
@@ -652,7 +652,7 @@
                     "reset_bbox": "Reset",
                     "save_bbox": "Salva le modifiche al BBOX",
                     "save_radius": "Salva le modifiche al raggio e/o al centro",
-                    "radius": "Raggio"
+                    "radius": "Raggio(m)"
                 },
                 "methods": {
                     "zone": "Zona",

diff --git a/web/client/translations/data.nl-NL b/web/client/translations/data.nl-NL
@@ -559,7 +559,7 @@
                     "reset_bbox": "Herbegin",
                     "save_bbox": "Wijzigingen opslaan",
                     "save_radius": "Wijzigingen opslaan",
-                    "radius": "Straal"
+                    "radius": "Straal(m)"
                 },
                 "methods": {
                     "zone": "Zone",

diff --git a/web/client/translations/data.zh-ZH b/web/client/translations/data.zh-ZH
@@ -562,7 +562,7 @@
                     "reset_bbox": "Reset",
                     "save_bbox": "Save BBOX modifications",
                     "save_radius": "Save the radius/center modifications",
-                    "radius": "Radius"
+                    "radius": "Radius(m)"
                 },
                 "methods": {
                     "zone": "Zone",