Some improvements to resizableGrid and DrawSupport of openlayers

docs/developer-guide/maps-configuration.md

@@ -1,8 +1,34 @@
 # Map options
 
+projection: {string} expressed in EPSG values
+units: {string} uom of the coordinates
+center: [object] center of the map with starting point in the bottom-left corner
+zoom: {number} level of zoom
+maxExtent: {number[]} max bbox of the map expressed [minx, miny, maxx, maxy]
+layers: {object[]} list of layers to be loaded on the map
 
+i.e.
+> ``{ "projection": "EPSG:900913",
+    "units": "m",
+    "center": {"x": 1000000.000000, "y": 5528000.000000, "crs": "EPSG:900913"},
+    "zoom": 15,
+    "maxExtent": [
+        -20037508.34, -20037508.34,
+        20037508.34, 20037508.34
+    ],
+    "layers": [{...},{...}]
+}``
 # Layers option
 
+i.e.
+> ``{
+    "url": "http..."
+    "format": "image/png8"
+    "title": "Open Street Map",
+    "name": "mapnik",
+    "group": "background",
+    "visibility": false
+}``
 
 ## Layer types
 
@@ -22,9 +48,9 @@
 ### MapQuest
 
 ### TileProvider
-TileProvider is a shortcut to easily configure many different layer sources. 
+TileProvider is a shortcut to easily configure many different layer sources.
 It's enough to add provider property and 'tileprovider' as type property to the layer configuration object. Property value should be in the form of ProviderName.VariantName.
- 
+
 List of available layer [here](https://github.com/geosolutions-it/MapStore2/blob/master/web/client/utils/ConfigProvider.js)
 
 i.e.

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

@@ -63,6 +63,9 @@ const DrawSupport = React.createClass({
             case ("clean"):
                 this.clean();
                 break;
+            case ("cleanAndContinueDrawing"):
+                this.cleanAndContinueDrawing();
+                break;
             default :
                 return;
         }
@@ -379,6 +382,14 @@ const DrawSupport = React.createClass({
             this.drawSource = null;
         }
     },
+    cleanAndContinueDrawing: function() {
+        if (this.drawLayer) {
+            this.props.map.removeLayer(this.drawLayer);
+            this.geojson = null;
+            this.drawLayer = null;
+            this.drawSource = null;
+        }
+    },
     fromOLFeature: function(feature, drawMethod, startingPoint) {
         const geometry = feature.getGeometry();
         const extent = geometry.getExtent();

web/client/components/misc/ResizableGrid.jsx

@@ -7,6 +7,7 @@
  */
 const React = require('react');
 const ReactDataGrid = require('react-data-grid');
+
 /**
  * Component for rendering a feature grid.
  * @memberof components.ResizableGrid
@@ -18,6 +19,7 @@ const ReactDataGrid = require('react-data-grid');
  * @prop {string} refGrid the reference to the react-data-grid-component
  * @prop {number} rowHeight the height of the rows in the grid. Default 30
  * @prop {string} rowKey the key used to distinguish rows.
+ * @prop {string} rowGetter method to render a row
  * @prop {object} rowSelection The object used to handle selection of rows. It puts a column of check as the first row.
  * @prop {object[]} rows. The features passed to the grid.
  * @prop {number} size. The size of the dock panel wrapping this component.
@@ -33,8 +35,13 @@ const ResizableGrid = React.createClass({
         rowHeight: React.PropTypes.number.isRequired,
         rowKey: React.PropTypes.string,
         rowSelection: React.PropTypes.object,
+        rowGetter: React.PropTypes.func,
+        selectBy: React.PropTypes.object,
         rows: React.PropTypes.array.isRequired,
-        size: React.PropTypes.object
+        size: React.PropTypes.object,
+        onCellsSelected: React.PropTypes.func,
+        onRowsSelected: React.PropTypes.func,
+        onRowsDeselected: React.PropTypes.func
     },
     contextTypes: {
         messages: React.PropTypes.object
@@ -49,6 +56,10 @@ const ResizableGrid = React.createClass({
             rowHeight: 30,
             rowKey: "id",
             rowSelection: null,
+            rowGetter: null,
+            selectBy: null,
+            onRowsSelected: () => {},
+            onRowsDeselected: () => {},
             rows: []
         };
     },
@@ -85,10 +96,16 @@ const ResizableGrid = React.createClass({
                 minHeight={this.state.minHeight || this.props.minHeight}
                 minWidth={this.state.minWidth || this.props.minWidth}
                 ref={this.props.refGrid}
-                rowGetter={this.rowGetter}
+                rowGetter={this.props.rowGetter || this.rowGetter}
                 rowHeight={this.props.rowHeight}
                 rowKey={this.props.rowKey}
-                rowSelection={this.props.rowSelection}
+                rowSelection={{
+                    showCheckbox: this.props.rowSelection.showCheckbox,
+                    enableShiftSelect: true,
+                    onRowsSelected: this.props.onRowsSelected,
+                    onRowsDeselected: this.props.onRowsDeselected,
+                    selectBy: this.props.selectBy
+                }}
                 rowsCount={this.props.rows.length}
             />
         );

web/client/epics/wfsquery.js

@@ -271,5 +271,6 @@ module.exports = {
     featureTypeSelectedEpic,
     wfsQueryEpic,
     closeFeatureEpic,
-    viewportSelectedEpic
+    viewportSelectedEpic,
+    getWFSFilterData
 };

web/client/themes/default/ms2-theme.less

@@ -967,6 +967,7 @@ select.form-control option {
     padding-top: 17px;
 }
 .dockpanel-wrapped-component .react-grid-Row--even .react-grid-Cell { background-color: #f2f2f2; }
+.dockpanel-wrapped-component .react-grid-Row--even .react-grid-Cell.row-selected { background-color: #badffd; }
 
 .dockpanel-wrapped-component .react-grid-Main, .react-grid-Container {
     height: 100%;
@@ -998,8 +999,8 @@ select.form-control option {
 
 
 .radio-custom+.radio-custom-label:before, .react-grid-checkbox+.react-grid-checkbox-label:before{
-    width: 15px;
-    height: 15px;
+    width: 19px;
+    height: 19px;
 }
 
 // feature grid