MapImageLayer - problem with opacity

[Jakar]

Hi, 

i have a MapImageLayer with sublayers. It contains sublayers with multiple nesting of other sublayers. The problem lies in the fact that the transparency setting works only in the map image layer and the last sublayers in the hierarchy (leaves). For example, property visible works, but transparency does not. Map or the layer was not redrawn. Tested on 4.28 and 4.29 version of Javascript SDK.

Example:

const mapImageLayer = {
    type: 'map-image',
    opacity: 1, // OK
    sublayers: [
      {
        type: 'sublayer',
        opacity: 1, // NOT WORKING
        sublayers: [
          {
            type: 'sublayer',
            opacity: 1, // OK
            sublayers: null
          }
        ]
      },
      {
        type: 'sublayer',
        opacity: 1, // OK
        sublayers: null
      }
    ]
  };
};

[D_Atkins]

Looks like a long-standing question: Opacity of sublayers in MapImageLayers - Esri Community

We encountered the same results still with 4.33: opacity on the MapImageLayer works fine, opacity on sublayers-without-children works fine, but sublayers with parent and children did not work.  The browser console returns a 'sublayer locked' message from one of ESRI's modules.

We considered a solution that would allow opacity set on a group-sublayer to be passed to all of its children, adapting the sample from LayerList widget with actions.   Unfortunately, we don't have a good demo MapImageLayer to share in a CodePen, so the code below may need some tweaks.  Ultimately, we may resort to a simpler implementation of the Transparency Slider only on the layers with no children: the result would be for users to have more fine-grained control over layer transparency and less complex code for us to maintain.

reactiveUtils.watch(
  () => slider.values.map((value) => value),
  (values) => {
		
  function cascade_opacity(parent, opacity){
	// look through the children; 
        // if no children, set opacity; 
        // if child, recursion

	for (var child of parent){
	  if (child.children.length > 0){
    	    cascade_opacity(child.children, opacity) //recursion
	  } else {
	    child.layer.opacity = opacity
	  }
	}
  }

  // pass group-layer slider opacity to all children...
  cascade_opacity(item.children, values[0])
});