Fix #3617 minor bug fixes and improvements (#3662)

geosolutions-it · Apr 2, 2019 · 6e4fd9b · 6e4fd9b
1 parent 843a500
commit 6e4fd9b
Show file tree

Hide file tree

Showing 9 changed files with 364 additions and 58 deletions.
diff --git a/docma-config.json b/docma-config.json
@@ -163,6 +163,7 @@
             "web/client/reducers/featuregrid.js",
             "web/client/reducers/globeswitcher.js",
             "web/client/reducers/floatinglegend.js",
+            "web/client/reducers/mapInfo.js",
             "web/client/reducers/maps.js",
             "web/client/reducers/maptype.js",
             "web/client/reducers/notifications.js",

diff --git a/web/client/components/data/identify/IdentifyContainer.jsx b/web/client/components/data/identify/IdentifyContainer.jsx
@@ -23,7 +23,8 @@ const Portal = require('../../misc/Portal');
  * @prop {dock} dock switch between Dockable Panel and Resizable Modal, default true (DockPanel)
  * @prop {function} viewer component that will be used as viewer of Identify
  * @prop {object} viewerOptions options to use with the viewer, eg { header: MyHeader, container: MyContainer }
- * @prop {function} getButtons must return an array of object representing the toolbar buttons, eg (props) => [{ glyph: 'info-sign', tooltip: 'hello!'}]
+ * @prop {function} getToolButtons must return an array of object representing the toolbar buttons, eg (props) => [{ glyph: 'info-sign', tooltip: 'hello!'}]
+ * @prop {function} getNavigationButtons must return an array of navigation buttons, eg (props) => [{ glyph: 'info-sign', tooltip: 'hello!'}]
  */
 
 const CoordinatesEditor = require('../../../plugins/identify/CoordinatesEditor');
@@ -43,7 +44,8 @@ module.exports = props => {
         fluid,
         validResponses = [],
         viewer = () => null,
-        getButtons = () => [],
+        getToolButtons = () => [],
+        getNavigationButtons = () => [],
         showFullscreen,
         reverseGeocodeData = {},
         point,
@@ -76,10 +78,10 @@ module.exports = props => {
         lngCorrected = lngCorrected - 360 * Math.floor(lngCorrected / 360 + 0.5);
     }
     const Viewer = viewer;
-    const buttons = getButtons({...props, lngCorrected, validResponses, latlng});
+    // TODO: put all the header (Toolbar, navigation, coordinate editor) outside the container
+    const toolButtons = getToolButtons({...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
@@ -96,8 +98,9 @@ module.exports = props => {
                 style={dockStyle}
                 showFullscreen={showFullscreen}
                 zIndex={zIndex}
-                header={[ CoordEditor &&
-                    <CoordEditor
+                header={[enabledCoordEditorButton && showCoordinateEditor &&
+                    <CoordinatesEditor
+                        key="coordinate-editor"
                         isDraggable={false}
                         removeVisible={false}
                         formatCoord={formatCoord}
@@ -106,14 +109,22 @@ module.exports = props => {
                         onChangeFormat={onChangeFormat}
                     /> || null,
                     <GeocodeViewer latlng={latlng} revGeocodeDisplayName={revGeocodeDisplayName} {...props}/>,
-                    buttons.length > 0 ? (
-                    <Row className="text-center">
-                        <Col xs={12}>
-                            <Toolbar
-                                btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
-                                buttons={buttons}/>
-                        </Col>
-                    </Row>) : null
+                    <Row key="button-row" className="text-center">
+                            <Col key="tools" xs={12}>
+                                <Toolbar
+                                    btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
+                                    buttons={toolButtons}/>
+                            </Col>
+                        <div key="navigation" style={{
+                                position: "absolute",
+                                right: 0,
+                                margin: "0 10px"
+                            }}>
+                                <Toolbar
+                                    btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
+                                    buttons={getNavigationButtons(props)} />
+                        </div>
+                    </Row>
                 ].filter(headRow => headRow)}>
                 <Viewer
                     index={index}

diff --git a/web/client/plugins/Identify.jsx b/web/client/plugins/Identify.jsx
@@ -31,7 +31,8 @@ const loadingState = require('../components/misc/enhancers/loadingState');
 const {defaultViewerHandlers, defaultViewerDefaultProps} = require('../components/data/identify/enhancers/defaultViewer');
 const {identifyLifecycle} = require('../components/data/identify/enhancers/identify');
 const zoomToFeatureHandler = require('..//components/data/identify/enhancers/zoomToFeatureHandler');
-const defaultIdentifyButtons = require('./identify/defaultIdentifyButtons');
+const getToolButtons = require('./identify/toolButtons');
+const getNavigationButtons = require('./identify/navigationButtons');
 const Message = require('./locale/Message');
 
 require('./identify/identify.css');
@@ -123,20 +124,21 @@ const identifyDefaultProps = defaultProps({
     showLayerTitle: true,
     position: 'right',
     size: 660,
-    getButtons: defaultIdentifyButtons,
+    getToolButtons,
+    getNavigationButtons,
     showFullscreen: false,
     validResponses: [],
     validator: MapInfoUtils.getValidator, // TODO: move all validation from the components to the selectors
     zIndex: 1050
 });
 
 /**
- * Identify plugin. This plugin allows to perform getfeature info.
+ * Identify plugin. This plugin allows to perform get feature info.
  * It can be configured to have a mobile or a desktop flavor.
  * It's enabled by default. The bubbling of an on_click_map action to GFI is stopped
  * if Annotations or FeatureGrid plugins are editing, draw or measurement supports are
  * active, the query panel is active or the identify plugin is disabled.
- * To restore old behaviour, in mapInfo state, set disabledAlwaysOn to true and
+ * To restore old behavior, in mapInfo state, set disabledAlwaysOn to true and
  * manage the plugin using toggleControl action with 'info' as control name.
  * It's possible also possible disable the plugin by changeMapInfoState or toggleMapInfoState actions
  *

diff --git a/web/client/plugins/identify/navigationButtons.js b/web/client/plugins/identify/navigationButtons.js
@@ -0,0 +1,36 @@
+
+/*
+ * 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 showButtons = props => !props.viewerOptions.header && props.validResponses.length > 1;
+const isLast = props => props.index >= props.validResponses.length - 1;
+const isFirst = props => props.index <= 0;
+
+/**
+ * Navigation buttons for identify tools
+ */
+module.exports = (props) => [
+    {
+        keyProp: "back",
+        glyph: 'arrow-left',
+        tooltipId: isFirst(props) ? undefined : 'wizard.prev',
+        disabled: isFirst(props),
+        visible: showButtons(props),
+        onClick: () => {
+            props.onPrevious();
+        }
+    }, {
+        keyProp: "forward",
+        glyph: 'arrow-right',
+        tooltipId: isLast(props) ? undefined : 'wizard.next',
+        disabled: isLast(props),
+        visible: showButtons(props),
+        onClick: () => {
+            props.onNext();
+        }
+    }
+].filter(btn => btn && btn.visible);
diff --git a/...lugins/identify/defaultIdentifyButtons.js → web/client/plugins/identify/toolButtons.js b/...lugins/identify/defaultIdentifyButtons.js → web/client/plugins/identify/toolButtons.js
@@ -7,6 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+ /**
+  * Buttons for Identify Tool Toolbar
+  */
 module.exports = ({
     showHighlightFeatureButton,
     currentFeature,
@@ -15,14 +18,6 @@ module.exports = ({
     zoomToFeature = () => {},
     ...props
 }) => [
-    {
-        glyph: 'arrow-left',
-        tooltipId: 'wizard.prev',
-        visible: !props.viewerOptions.header && props.validResponses.length > 1 && props.index > 0,
-        onClick: () => {
-            props.onPrevious();
-        }
-    },
     {
         glyph: 'info-sign',
         tooltipId: 'identifyRevGeocodeSubmitText',
@@ -55,12 +50,5 @@ module.exports = ({
             && currentFeature.reduce((hasGeometries, { geometry } = {}) => hasGeometries || !!geometry, false),
         tooltipId: "identifyZoomToFeature",
         onClick: zoomToFeature
-    }, {
-        glyph: 'arrow-right',
-        tooltipId: 'wizard.next',
-        visible: !props.viewerOptions.header && props.validResponses.length > 1 && props.index < props.validResponses.length - 1,
-        onClick: () => {
-            props.onNext();
-        }
     }
 ].filter(btn => btn && btn.visible);
diff --git a/web/client/reducers/mapInfo.js b/web/client/reducers/mapInfo.js
@@ -57,6 +57,117 @@ const initState = {
     configuration: {}
 };
 
+/**
+ * Manages the map info tool state. Contains configurations and responses.
+ * @prop {boolean} [enabled=true] if true, the info tool is enabled by default
+ * @prop {object} [highlightStyle] customize style for highlight. Can be customized this way
+ * ```
+ * {
+ *     color: '#3388ff',
+ *     weight: 4,
+ *     radius: 4,
+ *     dashArray: '',
+ *     fillColor: '#3388ff',
+ *     fillOpacity: 0.2
+ * }
+ * ```
+ * @prop {object} configuration contains the configuration for getFeatureInfo tool.
+ * @prop {array} requests the requests performed. Here a sample:
+ * ```javascript
+ * {
+ *     request: {
+ *         service: 'WMS',
+ *         version: '1.1.1',
+ *         request: 'GetFeatureInfo',
+ *         exceptions: 'application/json',
+ *         id: 'tiger:poi__7',
+ *         layers: 'tiger:poi',
+ *         query_layers: 'tiger:poi',
+ *         x: 51,
+ *         y: 51,
+ *         height: 101,
+ *         width: 101,
+ *         srs: 'EPSG:3857',
+ *         bbox: '-8238713.7375893425,4969819.729231167,-8238472.483218817,4970060.983601692',
+ *         feature_count: 10,
+ *         info_format: 'text/plain',
+ *         ENV: 'locale:it'
+ *     },
+ *     reqId: '4e030000-514a-11e9-90f1-3db233bf30bf'
+ * }
+ * ```
+ * @prop {array} responses the responses to the requests performed. This is a sample response
+ * ```javascript
+ * {
+ *     response: 'Results for FeatureType', // text
+ *     queryParams: {
+ *         service: 'WMS',
+ *         version: '1.1.1',
+ *         request: 'GetFeatureInfo',
+ *         exceptions: 'application/json',
+ *         id: 'tiger:poi__7',
+ *         layers: 'tiger:poi',
+ *         query_layers: 'tiger:poi',
+ *         x: 51,
+ *         y: 51,
+ *         height: 101,
+ *         width: 101,
+ *         srs: 'EPSG:3857',
+ *         bbox: '-8238713.7375893425,4969819.729231167,-8238472.483218817,4970060.983601692',
+ *         feature_count: 10,
+ *         info_format: 'text/plain',
+ *         ENV: 'locale:it'
+ *     },
+ *     layerMetadata: {
+ *         title: 'Manhattan (NY) points of interest',
+ *         viewer: {},
+ *         featureInfo: {}
+ *     }
+ * }
+ * ```
+ * @prop {object} clickPoint the clicked point. Contains the `pixel` clicked (x,y), the coordinates of the clicked point `latlng` (latlng) and `modifiers` (buttons pressed when clicked)
+ * @prop {object} clickLayer used to query vector layers
+ * @example
+ * {
+ *       enabled: true,
+ *       highlightStyle: {
+ *           color: '#3388ff',
+ *           weight: 4,
+ *           radius: 4,
+ *           dashArray: '',
+ *           fillColor: '#3388ff',
+ *           fillOpacity: 0.2
+ *       },
+ *       configuration: {},
+ *       showMarker: true,
+ *       responses: [
+ *           // ...array of responses
+ *       ],
+ *       requests: [
+ *           // ...requests
+ *       ],
+ *       centerToMarker: 'disabled',
+ *       clickPoint: {
+ *           pixel: {
+ *               x: 873,
+ *               y: 576
+ *           },
+ *           latlng: {
+ *               lat: 40.71190648169588,
+ *               lng: -74.00854110717773
+ *           },
+ *           modifiers: {
+ *               alt: false,
+ *               ctrl: false,
+ *               shift: false
+ *           }
+ *       },
+ *       clickLayer: null,
+ *       index: 0
+ *   }
+ *
+ * @memberof reducers
+ */
 function mapInfo(state = initState, action) {
     switch (action.type) {
     case NO_QUERYABLE_LAYERS: