mirror
/
OpenDroneMap-WebODM
kopia lustrzana https://github.com/OpenDroneMap/WebODM
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Synched opacity sliders, minor refactoring

pull/279/head
Piero Toffanin 2017-08-31 17:22:18 -04:00
rodzic 99a279e0f1
commit 0fec2c468c
2 zmienionych plików z 15 dodań i 6 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

17
app/static/app/js/components/Map.jsx
Wyświetl plik

@ -49,6 +49,12 @@ class Map extends React.Component {
this.autolayers = null; this.autolayers = null;
this.loadImageryLayers = this.loadImageryLayers.bind(this); this.loadImageryLayers = this.loadImageryLayers.bind(this);
this.updatePopupFor = this.updatePopupFor.bind(this);
}
updatePopupFor(layer){
const popup = layer.getPopup();
$('#layerOpacity', popup.getContent()).val(layer.options.opacity);
} }
loadImageryLayers(forceAddLayers = false){ loadImageryLayers(forceAddLayers = false){
@ -118,11 +124,8 @@ class Map extends React.Component {
popup.innerHTML = `<div class="title"> popup.innerHTML = `<div class="title">
${info.name} ${info.name}
<div className="opacity-slider">
Opacity: <input id="layerOpacity" type="range" step="1" />
</div>
</div> </div>
<div class="popup-opacity-slider">Opacity: <input id="layerOpacity" type="range" value="${layer.options.opacity}" min="0" max="1" step="0.01" /></div>
<div>Bounds: [${layer.options.bounds.toBBoxString().split(",").join(", ")}]</div> <div>Bounds: [${layer.options.bounds.toBBoxString().split(",").join(", ")}]</div>
<ul class="asset-links"> <ul class="asset-links">
${assets.map(asset => { ${assets.map(asset => {
@ -139,8 +142,8 @@ class Map extends React.Component {
layer.bindPopup(popup); layer.bindPopup(popup);
$('#layerOpacity', popup).on('change', function() { $('#layerOpacity', popup).on('change input', function() {
layer.setOpacity($('#layerOpacity').val() / 100); layer.setOpacity($('#layerOpacity', popup).val());
}); });
this.imageryLayers.push(layer); this.imageryLayers.push(layer);
@ -227,6 +230,7 @@ class Map extends React.Component {
// Find first tile layer at the selected coordinates // Find first tile layer at the selected coordinates
for (let layer of this.imageryLayers){ for (let layer of this.imageryLayers){
if (layer._map && layer.options.bounds.contains(e.latlng)){ if (layer._map && layer.options.bounds.contains(e.latlng)){
this.updatePopupFor(layer);
layer.openPopup(); layer.openPopup();
break; break;
} }
@ -238,6 +242,7 @@ class Map extends React.Component {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
this.imageryLayers.forEach(imageryLayer => { this.imageryLayers.forEach(imageryLayer => {
imageryLayer.setOpacity(this.props.opacity / 100); imageryLayer.setOpacity(this.props.opacity / 100);
this.updatePopupFor(imageryLayer);
}); });
if (prevProps.tiles !== this.props.tiles){ if (prevProps.tiles !== this.props.tiles){

4
app/static/app/js/css/Map.scss
Wyświetl plik

@ -17,4 +17,8 @@
.leaflet-control-measure.leaflet-control{ .leaflet-control-measure.leaflet-control{
margin-right: 12px; margin-right: 12px;
} }
.popup-opacity-slider{
margin-bottom: 6px;
}
} }