schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-26 18:40:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #634 from orangemug/fix/issue-630

Browse source 
Scroll selected <LayerListItem/> into view
This commit is contained in:
Orange Mug 2020-04-06 13:11:53 +01:00 committed by GitHub
commit a1dedd1aa6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/layers/LayerList.jsx
View file

@ -42,11 +42,15 @@ class LayerListContainer extends React.Component {
onLayerSelect: () => {},
}
state = {
collapsedGroups: {},
areAllGroupsExpanded: false,
isOpen: {
add: false,
constructor(props) {
super(props);
this.selectedItemRef = React.createRef();
this.state = {
collapsedGroups: {},
areAllGroupsExpanded: false,
isOpen: {
add: false,
}
}
}
@ -161,6 +165,13 @@ class LayerListContainer extends React.Component {
return propsChanged;
}
componentDidUpdate () {
const selectedItemNode = this.selectedItemRef.current;
if (selectedItemNode && selectedItemNode.node) {
selectedItemNode.node.scrollIntoView();
}
}
render() {
const listItems = []
@ -192,6 +203,11 @@ class LayerListContainer extends React.Component {
);
});
const additionalProps = {};
if (idx === this.props.selectedLayerIndex) {
additionalProps.ref = this.selectedItemRef;
}
layerIdCount.set(layer.id,
layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0
);
@ -213,6 +229,7 @@ class LayerListContainer extends React.Component {
onLayerDestroy={this.props.onLayerDestroy.bind(this)}
onLayerCopy={this.props.onLayerCopy.bind(this)}
onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
{...additionalProps}
/>
listItems.push(listItem)
idx += 1

7
src/components/map/MapboxGlMap.jsx
View file

@ -170,7 +170,7 @@ export default class MapboxGlMap extends React.Component {
if(this.props.inspectModeEnabled) {
return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
} else {
return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, tmpNode);
return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
}
}
})
@ -208,6 +208,11 @@ export default class MapboxGlMap extends React.Component {
map.on("zoomend", mapViewChange);
}
onLayerSelectById = (id) => {
const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
this.props.onLayerSelect(index);
}
render() {
if(IS_SUPPORTED) {
return <div