Merge pull request #3610 from camptocamp/backgroundopacityslider_grou…

…p-supports

Fix ZIndex on first children layers on ol.layer.Group for backgroundselector-opacityslider

src/services/backgroundlayermgr.js

@@ -139,10 +139,12 @@ ngeo.BackgroundLayerMgr.prototype.get = function(map) {
  * @export
  */
 ngeo.BackgroundLayerMgr.prototype.set = function(map, layer) {
+  const ZIndex = -200;
   const mapUid = ol.getUid(map).toString();
   const previous = this.get(map);
   if (layer !== null) {
-    layer.setZIndex(-200);
+    layer.setZIndex(ZIndex);
+    this.ngeoLayerHelper_.setZIndexToFirstLevelChildren(layer, ZIndex);
   }
 
   const bgGroup = this.ngeoLayerHelper_.getGroupFromMap(map, gmf.BACKGROUNDLAYERGROUP_NAME);
@@ -183,9 +185,11 @@ ngeo.BackgroundLayerMgr.prototype.getOpacityBgLayer = function(map) {
  * @param {ol.layer.Base} layer The opacity background layer.
  */
 ngeo.BackgroundLayerMgr.prototype.setOpacityBgLayer = function(map, layer) {
+  const ZIndex = -100;
   layer.setOpacity(0);
-  layer.setZIndex(-100);
   layer.setVisible(true);
+  layer.setZIndex(ZIndex);
+  this.ngeoLayerHelper_.setZIndexToFirstLevelChildren(layer, ZIndex);
   const bgGroup = this.ngeoLayerHelper_.getGroupFromMap(map, gmf.BACKGROUNDLAYERGROUP_NAME);
 
   const index = bgGroup.getLayers().getArray().indexOf(layer);

src/services/layerHelper.js

@@ -353,6 +353,20 @@ ngeo.LayerHelper.prototype.refreshWMSLayer = function(layer) {
 };
 
 
+/**
+ * Set ZIndex property to first level children elements
+ * @param {ol.layer.Group|ol.layer.Base} element The group of layer with first level children layers.
+ * @param {number} ZIndex The ZIndex for children element.
+ */
+ngeo.LayerHelper.prototype.setZIndexToFirstLevelChildren = function(element, ZIndex) {
+  if (!(element instanceof ol.layer.Group)) {
+    return;
+  }
+  const innerGroupLayers = element.getLayers();
+  innerGroupLayers.forEach(innerLayer => innerLayer.setZIndex(ZIndex));
+};
+
+
 /**
  * Update the LAYERS parameter of the source of the given WMS layer.
  * @param {ol.layer.Image} layer The WMS layer.

test/spec/services/backgroundlayermgr.spec.js

@@ -55,6 +55,52 @@ describe('ngeo.BackgroundLayerMgr', () => {
       expect(bgGroup.getLayers().item(1)).toBe(layer2);
     });
 
+    it('sets the ZINdex on active background layergroup', () => {
+      const layer1 = new ol.layer.Tile();
+      const layer2 = new ol.layer.Tile();
+      const group = new ol.layer.Group();
+      const collection = new ol.Collection();
+
+      collection.push(layer1);
+      collection.push(layer2);
+      group.setLayers(collection);
+
+      ngeoBackgroundLayerMgr.set(map, group);
+      const bgGroup = ngeoLayerHelper.getGroupFromMap(map, BACKGROUNDLAYERGROUP_NAME);
+      const bgGroupLayers = bgGroup.getLayers().item(0).getLayers();
+
+      // We don't set ZIndex on the group, as OL is
+      // just ordering it without regard it is group or layer
+      expect(bgGroup.getZIndex()).toBe(0);
+
+      // As we just set the layers ZIndex, this is where it is expected
+      expect(bgGroupLayers.item(0).getZIndex()).toBe(-200);
+      expect(bgGroupLayers.item(1).getZIndex()).toBe(-200);
+    });
+
+    it('sets the ZINdex on overlay background layergroup', () => {
+      const layer1 = new ol.layer.Tile();
+      const layer2 = new ol.layer.Tile();
+      const group = new ol.layer.Group();
+      const collection = new ol.Collection();
+
+      collection.push(layer1);
+      collection.push(layer2);
+      group.setLayers(collection);
+
+      ngeoBackgroundLayerMgr.setOpacityBgLayer(map, group);
+      const bgGroup = ngeoLayerHelper.getGroupFromMap(map, BACKGROUNDLAYERGROUP_NAME);
+      const bgGroupLayers = bgGroup.getLayers().item(0).getLayers();
+
+      // We don't set ZIndex on the group, as OL is
+      // just ordering it without regard it is group or layer
+      expect(bgGroup.getZIndex()).toBe(0);
+
+      // As we just set the layers ZIndex, this is where it is expected
+      expect(bgGroupLayers.item(0).getZIndex()).toBe(-100);
+      expect(bgGroupLayers.item(1).getZIndex()).toBe(-100);
+    });
+
     it('unsets the background layer', () => {
       const layer = new ol.layer.Tile();
       ngeoBackgroundLayerMgr.set(map, layer);