Add global style selector button

plugins/LayerTree.jsx

@@ -246,9 +246,16 @@ class LayerTree extends React.Component {
             "layertree-item-menubutton": true,
             "layertree-item-menubutton-active": this.state.activemenu === group.uuid
         });
+        const styleMenuClasses = classnames({
+            "layertree-item-menubutton": true,
+            "layertree-item-menubutton-active": this.state.activestylemenu === group.uuid
+        });
         const allowRemove = ConfigUtils.getConfigProp("allowRemovingThemeLayers", this.props.theme) === true || layer.role !== LayerRole.THEME;
         const allowReordering = ConfigUtils.getConfigProp("allowReorderingLayers", this.props.theme) === true && !this.state.filtervisiblelayers;
         const sortable = allowReordering && ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering", this.props.theme) === true;
+        const isTopLevelWMSGroup = layer.type === "wms" && path.length === 0;
+        const styles = isTopLevelWMSGroup ? this.getLayerStyles([layer]) : {};
+        const selectedStyle = isTopLevelWMSGroup ? this.getSelectedStyle(layer) : null;
         return (
             <div className="layertree-item-container" data-id={JSON.stringify({layer: layer.uuid, path: path})} key={group.uuid}>
                 <div className={classnames(itemclasses)}>
@@ -257,10 +264,12 @@ class LayerTree extends React.Component {
                     <span className="layertree-item-title" onClick={() => this.itemVisibilityToggled(layer, path, visibility)} title={group.title}>{group.title}</span>
                     {LayerUtils.hasQueryableSublayers(group) && this.props.allowSelectIdentifyableLayers ? (<Icon className={"layertree-item-identifyable " + identifyableClassName}  icon="info-sign" onClick={() => this.itemOmitQueryableToggled(layer, path, omitqueryable)} />) : null}
                     <span className="layertree-item-spacer" />
+                    {isTopLevelWMSGroup && Object.keys(styles).length > 0 ? (<Icon className={styleMenuClasses} icon="paint" onClick={() => this.layerStyleMenuToggled(group.uuid)}/>) : null}
                     <Icon className={optMenuClasses} icon="cog" onClick={() => this.layerMenuToggled(group.uuid)}/>
                     {allowRemove ? (<Icon className="layertree-item-remove" icon="trash" onClick={() => this.props.removeLayer(layer.id, path)}/>) : null}
                 </div>
                 {this.state.activemenu === group.uuid ? this.renderOptionsMenu(layer, group, path, allowRemove) : null}
+                {isTopLevelWMSGroup && this.state.activestylemenu === group.uuid ? this.renderStyleMenu(styles, selectedStyle, (style) => this.applyLayerStyle(style, layer)) : null}
                 <Sortable onChange={this.onSortChange} options={{disabled: sortable === false, ghostClass: 'drop-ghost', delay: 200, forceFallback: this.props.fallbackDrag}}>
                     {sublayersContent}
                 </Sortable>
@@ -354,7 +363,7 @@ class LayerTree extends React.Component {
                     {allowRemove ? (<Icon className="layertree-item-remove" icon="trash" onClick={() => this.props.removeLayer(layer.id, path)}/>) : null}
                 </div>
                 {this.state.activemenu === sublayer.uuid ? this.renderOptionsMenu(layer, sublayer, path, allowRemove) : null}
-                {this.state.activestylemenu === sublayer.uuid ? this.renderStyleMenu(layer, sublayer, path, allowOptions + allowRemove) : null}
+                {this.state.activestylemenu === sublayer.uuid ? this.renderStyleMenu(sublayer.styles, sublayer.style, (style) => this.layerStyleChanged(layer, path, style)) : null}
             </div>
         );
     };
@@ -400,12 +409,12 @@ class LayerTree extends React.Component {
             </div>
         );
     };
-    renderStyleMenu = (layer, sublayer, path, marginRight = 0) => {
+    renderStyleMenu = (styles, selectedStyle, onStyleChange, marginRight = 0) => {
         return (
             <div className="layertree-item-stylemenu" style={{marginRight: (marginRight * 1.75) + 'em'}}>
-                {Object.entries(sublayer.styles).map(([name, title]) => (
-                    <div key={name} onClick={() => this.layerStyleChanged(layer, path, name)}>
-                        <Icon icon={sublayer.style === name ? "radio_checked" : "radio_unchecked"} />
+                {Object.entries(styles).map(([name, title]) => (
+                    <div key={name} onClick={() => onStyleChange(name)}>
+                        <Icon icon={selectedStyle === name ? "radio_checked" : "radio_unchecked"} />
                         <div>{title}</div>
                     </div>
                 ))}
@@ -787,6 +796,44 @@ class LayerTree extends React.Component {
         }, null, ' ');
         FileSaver.saveAs(new Blob([data], {type: "text/plain;charset=utf-8"}), layer.title + ".json");
     };
+    getSelectedStyle = (layer) => {
+        const styles = new Set((layer.params?.STYLES || "").split(",").filter(Boolean));
+        return styles.size === 1 ? [...styles][0] : null;
+    };
+    getLayerStyles = (layerList) => {
+        const styleList = {};
+        const collectStyles = (layers) => {
+            for (const layer of layers) {
+                if (layer.sublayers?.length) {
+                    collectStyles(layer.sublayers);
+                }
+                Object.entries(layer.styles || {}).forEach(([key]) => {
+                    styleList[key] = key;
+                });
+            }
+        };
+        collectStyles(layerList);
+        return styleList;
+
+    };
+    applyLayerStyle = (style, topLevelLayer) => {
+        const setStyle = (layer, path = []) => {
+            if (layer.sublayers && layer.sublayers.length > 0) {
+                for (let i = 0; i < layer.sublayers.length; i++) {
+                    setStyle(layer.sublayers[i], [...path, i]);
+                }
+            }
+            if (layer.styles && Object.keys(layer.styles).length > 0) {
+                for (const styleKey in layer.styles) {
+                    if (Object.prototype.hasOwnProperty.call(layer.styles, styleKey) && styleKey === style) {
+                        this.props.changeLayerProperty(topLevelLayer.uuid, "style", style, path);
+                    }
+                }
+            }
+        };
+        setStyle(topLevelLayer);
+    };
+
 }
 
 const selector = (state) => ({