Add global style selector button #353
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Interesting! Would it also be an idea to place the selector on the toplevel WMS group layer (assumes you have "show root layer" enabled)? Rationale would be that, when adding additional themes, it might be desireable to switch styles for the themes separately - it is I guess pretty unlikely that separate themes will be sharing style names in general. |
|
Hi! I applied the changes to add the button to the toplevel WMS group layer and to have the same style as the button to change the style of a layer individually.
|
| if (layer.sublayers && layer.sublayers.length > 0) { | ||
| collectStyles(layer.sublayers); | ||
| } | ||
| if (layer.styles && Object.keys(layer.styles).length > 0) { |
There was a problem hiding this comment.
This whole block could be shortened to
const styleList = {};
Object.assign(styleList, layer.styles);
| @@ -246,9 +249,14 @@ 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.activestyleselector === group.uuid | |||
There was a problem hiding this comment.
I believe you can re-use activestylemenu instead of adding a new activestyleselector state variable.
| @@ -257,10 +265,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 ? (<Icon className={styleMenuClasses} icon="paint" onClick={() => this.manageStyleSelector(group.uuid)}/>) : null} | |||
There was a problem hiding this comment.
Ideally you'd show the menu only if styles are available. I'd collect the layer styles at this stage and only show the menu if styles are available. You can then directly pass the styles to the style selector rendering function, without storing them in the state.
| collectStyles(layerList); | ||
| return Array.from(styleList); | ||
| }; | ||
| renderStyleSelector = () => { |
There was a problem hiding this comment.
You could potentially re-use renderStyleMenu by modifying the renderStyleMenu arguments to also take the list of styles to render as well as the callback.
| } | ||
| } | ||
| }; | ||
| setStyle(this.props.layers); |
There was a problem hiding this comment.
You only want to apply the style to the one layer, not all layers.
Hi! I'm not sure if this might be interesting to you, but since you can change the layer style individually from the LayerTree, I added an extra button to the title bar that allows the user to select a style and apply it to all layers (if the layer has that style available).
What do you thinkg?
Thanks!