Fix #3548 add coordinate editor for GFI panel (#3557)

web/client/actions/__tests__/mapInfo-test.js

@@ -29,7 +29,9 @@ var {
     hideMapinfoRevGeocode,
     getVectorInfo,
     toggleMapInfoState,
-    updateCenterToMarker
+    updateCenterToMarker,
+    TOGGLE_SHOW_COORD_EDITOR, toggleShowCoordinateEditor,
+    CHANGE_FORMAT, changeFormat
 } = require('../mapInfo');
 
 describe('Test correctness of the map actions', () => {
@@ -206,4 +208,16 @@ describe('Test correctness of the map actions', () => {
         expect(retval.type).toBe(UPDATE_CENTER_TO_MARKER);
         expect(retval.status).toBe('enabled');
     });
+    it('toggleShowCoordinateEditor', () => {
+        const showCoordinateEditor = true;
+        const retval = toggleShowCoordinateEditor(showCoordinateEditor);
+        expect(retval.type).toBe(TOGGLE_SHOW_COORD_EDITOR);
+        expect(retval.showCoordinateEditor).toBe(showCoordinateEditor);
+    });
+    it('changeFormat', () => {
+        const format = "decimal";
+        const retval = changeFormat(format);
+        expect(retval.type).toBe(CHANGE_FORMAT);
+        expect(retval.format).toBe(format);
+    });
 });

web/client/actions/mapInfo.js

@@ -29,6 +29,8 @@ const FEATURE_INFO_CLICK = 'FEATURE_INFO_CLICK';
 const TOGGLE_MAPINFO_STATE = 'TOGGLE_MAPINFO_STATE';
 const UPDATE_CENTER_TO_MARKER = 'UPDATE_CENTER_TO_MARKER';
 const CLOSE_IDENTIFY = 'IDENTIFY:CLOSE_IDENTIFY';
+const CHANGE_FORMAT = 'IDENTIFY:CHANGE_FORMAT';
+const TOGGLE_SHOW_COORD_EDITOR = 'IDENTIFY:TOGGLE_SHOW_COORD_EDITOR';
 
 /**
  * Private
@@ -221,6 +223,24 @@ const closeIdentify = () => ({
     type: CLOSE_IDENTIFY
 });
 
+/**
+ * change format of coordinate editor
+ * @prop {string} format
+*/
+const changeFormat = (format) => ({
+    type: CHANGE_FORMAT,
+    format
+});
+
+/**
+ * action for toggling the state of the showCoordinateEditor flag
+ * @prop {boolean} showCoordinateEditor
+*/
+const toggleShowCoordinateEditor = (showCoordinateEditor) => ({
+    type: TOGGLE_SHOW_COORD_EDITOR,
+    showCoordinateEditor
+});
+
 module.exports = {
     ERROR_FEATURE_INFO,
     EXCEPTIONS_FEATURE_INFO,
@@ -240,6 +260,8 @@ module.exports = {
     TOGGLE_MAPINFO_STATE,
     UPDATE_CENTER_TO_MARKER,
     CLOSE_IDENTIFY,
+    TOGGLE_SHOW_COORD_EDITOR, toggleShowCoordinateEditor,
+    CHANGE_FORMAT, changeFormat,
     closeIdentify,
     getFeatureInfo,
     changeMapInfoState,

web/client/components/data/identify/GeocodeViewer.jsx

@@ -23,7 +23,7 @@ const {Glyphicon, Row, Col} = require('react-bootstrap');
  * @prop {node} revGeocodeDisplayName text/info displayed on modal
  */
 
-module.exports = ({latlng, enableRevGeocode, hideRevGeocode = () => {}, showModalReverse, revGeocodeDisplayName}) => {
+module.exports = ({latlng, enableRevGeocode, hideRevGeocode = () => {}, showModalReverse, revGeocodeDisplayName, showCoordinateEditor = false}) => {
 
     let lngCorrected = null;
     if (latlng) {
@@ -35,10 +35,11 @@ module.exports = ({latlng, enableRevGeocode, hideRevGeocode = () => {}, showModa
     }
 
     return enableRevGeocode && latlng && lngCorrected ? (
-        <Row key="ms-geocode-coords" className="ms-geoscode-viewer text-center">
-            <Col xs={12}>
+        <Row key="ms-geocode-coords" className="ms-geoscode-viewer text-center" style={{display: showCoordinateEditor ? "none" : "block"}}>
+            {!showCoordinateEditor &&
+            (<Col xs={12}>
                 <div className="ms-geocode-coords">{latlng ? 'Lat: ' + (Math.round(latlng.lat * 100000) / 100000) + '- Long: ' + lngCorrected : null}</div>
-            </Col>
+            </Col>)}
             <Portal>
                 <ResizableModal
                     fade

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

@@ -17,7 +17,7 @@ const ResizableModal = require('../../misc/ResizableModal');
 const Portal = require('../../misc/Portal');
 
 /**
- * Component for rendering Identify Container inside a Dockable contanier
+ * Component for rendering Identify Container inside a Dockable container
  * @memberof components.data.identify
  * @name IdentifyContainer
  * @class
@@ -27,6 +27,8 @@ const Portal = require('../../misc/Portal');
  * @prop {function} getButtons must return an array of object representing the toolbar buttons, eg (props) => [{ glyph: 'info-sign', tooltip: 'hello!'}]
  */
 
+const CoordinatesEditor = require('../../../plugins/identify/CoordinatesEditor');
+
 module.exports = props => {
     const {
         enabled,
@@ -51,7 +53,13 @@ module.exports = props => {
         setIndex,
         warning,
         clearWarning,
-        zIndex
+        zIndex,
+        // coord editor props
+        enabledCoordEditorButton,
+        showCoordinateEditor,
+        onChangeClickPoint,
+        onChangeFormat,
+        formatCoord
     } = props;
 
     const latlng = point && point.latlng || null;
@@ -71,7 +79,7 @@ module.exports = props => {
     const buttons = getButtons({...props, lngCorrected, validResponses, latlng});
     const missingResponses = requests.length - responses.length;
     const revGeocodeDisplayName = reverseGeocodeData.error ? <Message msgId="identifyRevGeocodeError"/> : reverseGeocodeData.display_name;
-
+    const CoordEditor = enabledCoordEditorButton && showCoordinateEditor ? CoordinatesEditor : null;
     return (
         <div>
             <DockablePanel
@@ -88,7 +96,15 @@ module.exports = props => {
                 style={dockStyle}
                 showFullscreen={showFullscreen}
                 zIndex={zIndex}
-                header={[
+                header={[ CoordEditor &&
+                    <CoordEditor
+                        isDraggable={false}
+                        removeVisible={false}
+                        formatCoord={formatCoord}
+                        coordinate={point.latlng ? {lat: point.latlng.lat, lon: lngCorrected } : {lat: "", lon: ""}}
+                        onChange={onChangeClickPoint}
+                        onChangeFormat={onChangeFormat}
+                    /> || null,
                     <GeocodeViewer latlng={latlng} revGeocodeDisplayName={revGeocodeDisplayName} {...props}/>,
                     buttons.length > 0 ? (
                     <Row className="text-center">

web/client/components/data/identify/__tests__/GeocodeViewer-test.jsx

@@ -42,10 +42,11 @@ describe('GeocodeViewer', () => {
         expect(geocodeViewer.length).toBe(0);
     });
 
-    it('creates the GeocodeViewer enable', () => {
+    it('creates the GeocodeViewer enable, showCoordinateEditor=false', () => {
         ReactDOM.render(
             <GeocodeViewer
                 enableRevGeocode
+                showCoordinateEditor={false}
                 latlng={{lat: 40, lng: 10}}
                 lngCorrected={10}/>,
             document.getElementById("container")
@@ -57,6 +58,21 @@ describe('GeocodeViewer', () => {
         expect(coords.innerHTML.indexOf('Long:') !== -1).toBe(true);
     });
 
+    it('creates the GeocodeViewer enable, showCoordinateEditor=true', () => {
+        ReactDOM.render(
+            <GeocodeViewer
+                enableRevGeocode
+                showCoordinateEditor
+                latlng={{lat: 40, lng: 10}}
+                lngCorrected={10}/>,
+            document.getElementById("container")
+        );
+        const geocodeViewer = document.getElementsByClassName('ms-geoscode-viewer');
+        expect(geocodeViewer.length).toBe(1);
+        const coords = document.getElementsByClassName('ms-geocode-coords')[0];
+        expect(coords).toNotExist();
+    });
+
     it('creates the GeocodeViewer hide', () => {
         ReactDOM.render(
             <GeocodeViewer

web/client/components/data/identify/enhancers/__tests__/identify-test.jsx

@@ -455,4 +455,48 @@ describe("test identify enhancers", () => {
         expect(spyHideMarker).toHaveBeenCalled();
     });
 
+    it("test identifyLifecycle onChangeFormat", () => {
+        const testHandlers = {
+            onChangeFormat: () => {}
+        };
+        const spyChangeFormat = expect.spyOn(testHandlers, 'onChangeFormat');
+        const Component = identifyLifecycle(({onChangeFormat = () => {}}) => <div id="test-component" onClick={() => onChangeFormat("format")}></div>);
+        ReactDOM.render(
+            <Component
+                enabled
+                showCoordinateEditor
+                enabledCoordEditorButton
+                formatCoord="decimal"
+                responses={[{}]}
+                onChangeFormat={testHandlers.onChangeFormat}
+            />,
+            document.getElementById("container")
+        );
+        const testComponent = document.getElementById('test-component');
+        TestUtils.Simulate.click(testComponent);
+        expect(spyChangeFormat).toHaveBeenCalled();
+    });
+    it("test identifyLifecycle onChangeClickPoint", () => {
+        const testHandlers = {
+            onChangeClickPoint: () => {}
+        };
+        const spyOnChangeClickPoint = expect.spyOn(testHandlers, 'onChangeClickPoint');
+        const Component = identifyLifecycle(({onChangeClickPoint = () => {}}) => <div id="test-component" onClick={() => onChangeClickPoint("lat", "4")}></div>);
+        ReactDOM.render(
+            <Component
+                enabled
+                showCoordinateEditor
+                enabledCoordEditorButton
+                formatCoord="decimal"
+                responses={[{}]}
+                onChangeClickPoint={testHandlers.onChangeClickPoint}
+            />,
+            document.getElementById("container")
+        );
+        const testComponent = document.getElementById('test-component');
+        TestUtils.Simulate.click(testComponent);
+        expect(spyOnChangeClickPoint).toHaveBeenCalled();
+    });
+
+
 });

web/client/components/data/identify/enhancers/identify.js

@@ -8,7 +8,8 @@
 
 const {lifecycle, withHandlers, branch, withState, compose, defaultProps} = require('recompose');
 const MapInfoUtils = require('../../../../utils/MapInfoUtils');
-const {isEqual, isArray} = require('lodash');
+const {set} = require('../../../../utils/ImmutableUtils');
+const {isEqual, isArray, isNil} = require('lodash');
 
 /**
  * Enhancer to enable set index only if Component has not header in viewerOptions props
@@ -26,6 +27,7 @@ const switchControlledIdentify = branch(
  * Enhancer to enable set index only if Component has header
  * - needsRefresh: check if current selected point if different of next point, if so return true
  * - onClose: delete results, close identify panel and hide the marker on map
+ * - onChange: changed the coords OF GFI coord editor from the UI
  * @memberof enhancers.identifyHandlers
  * @class
  */
@@ -34,6 +36,7 @@ const identifyHandlers = withHandlers({
         if (newProps.enabled && newProps.point && newProps.point.pixel) {
             if (!props.point || !props.point.pixel ||
                 props.point.pixel.x !== newProps.point.pixel.x ||
+                props.point.latlng !== newProps.point.latlng ||
                 props.point.pixel.y !== newProps.point.pixel.y ) {
                 return true;
             }
@@ -47,6 +50,19 @@ const identifyHandlers = withHandlers({
         hideMarker();
         purgeResults();
         closeIdentify();
+    },
+    onChangeClickPoint: ({
+        onChangeClickPoint = () => {},
+        point
+    }) => (coord, val) => {
+        let changedCoord = coord === "lat" ? "lat" : "lng";
+        let newPoint = set(`latlng.${changedCoord}`, !isNil(val) ? parseFloat(val) : 0, point);
+        onChangeClickPoint(newPoint);
+    },
+    onChangeFormat: ({
+        onChangeFormat = () => {}
+    }) => (format) => {
+        onChangeFormat(format);
     }
 });