Fix #35 : implemented basic Layer tree

web/client/components/BackgroundSwitcher/BackgroundSwitcher.jsx

@@ -57,7 +57,7 @@ let BackgroundSwitcher = React.createClass({
              }
         };
     },
-    renderBackgrounds: function() {
+    renderBackgrounds() {
         if (!this.props.layers) {
             return <div></div>;
         }
@@ -68,7 +68,7 @@ let BackgroundSwitcher = React.createClass({
                 }
             }));
     },
-    renderLayers: function(layers) {
+    renderLayers(layers) {
         let items = [];
         for (let i = 0; i < layers.length; i++) {
             let layer = layers[i];
@@ -81,12 +81,12 @@ let BackgroundSwitcher = React.createClass({
         }
         return items;
     },
-    render: function() {
+    render() {
         return (
            <Grid className="BackgroundSwitcherComponent" header={this.props.name} fluid={false}>{this.renderBackgrounds()}</Grid>
         );
     },
-    changeLayerVisibility: function(eventObj) {
+    changeLayerVisibility(eventObj) {
         let position = parseInt(eventObj.currentTarget.dataset.position, 10);
         var layer = this.props.layers[position];
         var newLayer = assign({}, layer, {visibility: true});

web/client/components/LayerTree/LayerTree.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright 2015, 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.
+ */
+
+var React = require('react');
+
+var assign = require('object-assign');
+var Legend = require('../Legend/Legend');
+var {Glyphicon, Panel} = require('react-bootstrap');
+
+let LayerTree = React.createClass({
+    propTypes: {
+        id: React.PropTypes.number,
+        layers: React.PropTypes.array,
+        propertiesChangeHandler: React.PropTypes.func
+    },
+    renderGroup(group, layerObjs) {
+        var groupTitle = group === "_default" ? "Default" : group;
+
+        return (<div style={{borderBottom: "1px solid lightgray", margin: '6px'}} >
+            <div>
+                <Glyphicon glyph="folder-open" /> {groupTitle}
+                </div>
+                    <div style={{marginLeft: "15px"}}>{layerObjs.map((layerObj) => {return this.renderLayer(layerObj.layer, layerObj.position); } )}
+                    </div>
+                </div>);
+    },
+    renderLayer(layer, position) {
+        return (<div>
+                    <div>
+                        <input data-position={position} type="checkbox" checked={layer.visibility ? "checked" : ""} onChange={this.changeLayerVisibility} />{layer.title || layer.name}
+                    </div>
+                    {this.renderLayerLegend(layer)}
+            </div>);
+    },
+    renderLayerLegend(layer) {
+        if (layer && layer.visibility && layer.type === "wms" && layer.group !== "background") {
+            return <div style={{marginLeft: "15px"}}><Legend layer={layer}/></div>;
+        }
+        return null;
+    },
+    render() {
+        if (!this.props.layers) {
+            return <div></div>;
+        }
+        // group layers
+        let groups = {
+            _default: []
+        };
+        let revLayers = [];
+        for (let i = this.props.layers.length - 1; i >= 0; i-- ) {
+            revLayers.push(this.props.layers[i]);
+        }
+        revLayers.map( (layer, index) => {
+            var layerObj = {
+                layer: layer,
+                position: (this.props.layers.length - 1 - index)
+            };
+            if (layer.group && !groups[layer.group]) {
+                groups[layer.group] = [];
+            }
+            if (layer.group) {
+                groups[layer.group].push(layerObj);
+            } else {
+                groups._default.push(layerObj);
+            }
+        } );
+        return <Panel style={{overflow: "auto", height: "400px"}} >{Object.keys(groups).map(groupName => {return this.renderGroup(groupName, groups[groupName]); })}</Panel>;
+    },
+    changeLayerVisibility(eventObj) {
+        let position = parseInt(eventObj.currentTarget.dataset.position, 10);
+        var layer = this.props.layers[position];
+        var newLayer = assign({}, layer, {visibility: !layer.visibility});
+        this.props.propertiesChangeHandler(newLayer, position);
+    }
+});
+
+module.exports = LayerTree;

web/client/components/LayerTree/__tests__/LayerTree-test.jsx

@@ -0,0 +1,125 @@
+/**
+ * Copyright 2015, 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.
+ */
+var expect = require('expect');
+
+var React = require('react/addons');
+var LayerTree = require('../LayerTree');
+
+describe("test the LayerTree", () => {
+    afterEach((done) => {
+        React.unmountComponentAtNode(document.body);
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('test component creation', () => {
+        let layers = [{
+            "type": "osm",
+            "title": "Open Street Map",
+            "name": "mapnik",
+            "group": "background",
+            "visibility": true
+        }, {
+            "type": "wms",
+            "url": "http://213.215.135.196/reflector/open/service",
+            "visibility": false,
+            "title": "e-Geos Ortofoto RealVista 1.0",
+            "name": "rv1",
+            "group": "background",
+            "format": "image/png"
+        }];
+        const tb = React.render(<LayerTree layers={layers}/>, document.body);
+        expect(tb).toExist();
+
+    });
+
+    it('create component without layers', () => {
+
+        const tb = React.render(<LayerTree />, document.body);
+        expect(tb).toExist();
+
+    });
+
+    it('test select handler', () => {
+        var TestUtils = React.addons.TestUtils;
+        const testHandlers = {
+            propertiesChangeHandler: (pressed) => {return pressed; }
+        };
+        let layers = [{
+            "type": "osm",
+            "title": "Open Street Map",
+            "name": "mapnik",
+            "group": "background",
+            "visibility": true
+        }, {
+            "type": "wms",
+            "url": "http://213.215.135.196/reflector/open/service",
+            "visibility": false,
+            "title": "e-Geos Ortofoto RealVista 1.0",
+            "name": "rv1",
+            "group": "background",
+            "format": "image/png"
+        }];
+        const spy = expect.spyOn(testHandlers, 'propertiesChangeHandler');
+        var tb = React.render(<LayerTree layers={layers} propertiesChangeHandler={testHandlers.propertiesChangeHandler}/>, document.body);
+        let thumbs = TestUtils.scryRenderedDOMComponentsWithTag(tb, "input");
+        expect(thumbs.length).toBe(2);
+        React.findDOMNode(thumbs[0]).click();
+        expect(spy.calls.length).toEqual(1);
+    });
+    it('multiple group select handler', () => {
+        var TestUtils = React.addons.TestUtils;
+        const testHandlers = {
+            propertiesChangeHandler: (pressed) => {return pressed; }
+        };
+        let layers = [{
+            "type": "osm",
+            "title": "Open Street Map",
+            "name": "mapnik",
+            "group": "background",
+            "visibility": true
+        }, {
+            "type": "wms",
+            "url": "http://213.215.135.196/reflector/open/service",
+            "visibility": false,
+            "title": "e-Geos Ortofoto RealVista 1.0",
+            "name": "rv1",
+            "group": "background",
+            "format": "image/png"
+        }, {
+            "type": "wms",
+            "url": "http://test/reflector/open/service",
+            "visibility": false,
+            "title": "test layer 1",
+            "name": "layer1",
+            "group": "layers",
+            "format": "image/png"
+        }, {
+            "type": "wms",
+            "url": "http://test2/reflector/open/service",
+            "visibility": true,
+            "title": "test layer 2",
+            "name": "layer2",
+            "group": "layers",
+            "format": "image/png"
+        }, {
+            "type": "wms",
+            "url": "http://test2/reflector/open/service",
+            "visibility": true,
+            "title": "test layer 3 (no group)",
+            "name": "layer3",
+            "format": "image/png"
+        }];
+        const spy = expect.spyOn(testHandlers, 'propertiesChangeHandler');
+        var tb = React.render(<LayerTree layers={layers} propertiesChangeHandler={testHandlers.propertiesChangeHandler}/>, document.body);
+        let thumbs = TestUtils.scryRenderedDOMComponentsWithTag(tb, "input");
+        expect(thumbs.length).toBe(5);
+        React.findDOMNode(thumbs[0]).click();
+        expect(spy.calls.length).toEqual(1);
+    });
+});

web/client/components/Legend/Legend.jsx

@@ -0,0 +1,42 @@
+const urlUtil = require('url');
+const React = require('react');
+var Legend = React.createClass({
+    propTypes: {
+        layer: React.PropTypes.object,
+        legendHeigth: React.PropTypes.number,
+        legendWidth: React.PropTypes.number,
+        legendOptions: React.PropTypes.string
+    },
+    getDefaultProps() {
+        return {
+            legendHeigth: 12,
+            legendWidth: 12,
+            legendOptions: "forceLabels:on;fontSize:10"
+        };
+    },
+   render() {
+       if (this.props.layer && this.props.layer.type === "wms" && this.props.layer.url) {
+           let layer = this.props.layer;
+           let url = this.props.layer.url;
+           let urlObj = urlUtil.parse(url);
+           let legendUrl = urlUtil.format({
+               host: urlObj.host,
+               protocol: urlObj.protocol,
+               pathname: urlObj.pathname,
+               query: {
+                   service: "WMS",
+                   request: "GetLegendGraphic",
+                   format: "image/png",
+                   height: this.props.legendHeigth,
+                   width: this.props.legendWidth,
+                   layer: layer.name,
+                   LEGEND_OPTIONS: this.props.legendOptions
+              // SCALE TODO
+               }
+           });
+           return <img src={legendUrl} style={{maxWidth: "100%"}}/>;
+       }
+       return null;
+   }
+});
+module.exports = Legend;

web/client/components/Legend/__tests__/Legend-test.jsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2015, 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.
+ */
+var expect = require('expect');
+
+var React = require('react/addons');
+var Legend = require('../Legend');
+
+describe("test the Layer legend", () => {
+    afterEach((done) => {
+        React.unmountComponentAtNode(document.body);
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('test component creation', () => {
+        let layer = {
+            "type": "osm",
+            "title": "Open Street Map",
+            "name": "mapnik",
+            "group": "background",
+            "visibility": true
+        };
+        const tb = React.render(<Legend layer={layer}/>, document.body);
+        expect(tb).toExist();
+
+    });
+
+    it('create component without layer', () => {
+
+        const tb = React.render(<Legend />, document.body);
+        expect(tb).toExist();
+
+    });
+
+    it('test legend content', () => {
+        var TestUtils = React.addons.TestUtils;
+        let layer = {
+            "type": "wms",
+            "url": "http://test2/reflector/open/service",
+            "visibility": true,
+            "title": "test layer 3 (no group)",
+            "name": "layer3",
+            "format": "image/png"
+        };
+        var tb = React.render(<Legend layer={layer} />, document.body);
+        let thumbs = TestUtils.scryRenderedDOMComponentsWithTag(tb, "img");
+        expect(thumbs.length).toBe(1);
+    });
+
+});

web/client/components/map/openlayers/plugins/WMSLayer.js

@@ -31,7 +31,7 @@ Layers.registerType('wms', {
     create: (options) => {
         return new ol.layer.Tile({
             opacity: options.opacity !== undefined ? options.opacity : 1,
-            visibile: options.visibility !== false,
+            visible: options.visibility !== false,
             source: new ol.source.TileWMS({
               url: getWMSURL(options.url),
               params: wmsToOpenlayersOptions(options)

web/client/examples/viewer/actions/floatingPanel.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2015, 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 ACTIVATE_PANEL = 'ACTIVATE_PANEL';
+
+function activatePanel(activeKey) {
+    return {
+        type: ACTIVATE_PANEL,
+        activeKey: activeKey
+    };
+}
+module.exports = {activatePanel, ACTIVATE_PANEL};