Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Small css tweaks, fix layer filtering

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-08 14:23:12 +01:00
parent 52f1d5511d
commit ddea3d2fc1
4 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

23
Logic/FeatureSource/FilteringFeatureSource.ts
View file

@ -32,15 +32,15 @@ export default class FilteringFeatureSource implements FeatureSource {
if (layer === undefined) { if (layer === undefined) {
throw "No layer found with id " + layerId; throw "No layer found with id " + layerId;
} }
if(layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom)){ if (FilteringFeatureSource.showLayer(layer, location)) {
return true; return true;
} }
// Does it match any other layer? // Does it match any other layer?
for (const toCheck of layers) { for (const toCheck of layers) {
if(!toCheck.isDisplayed.data){ if (!FilteringFeatureSource.showLayer(toCheck, location)) {
continue; continue;
} }
if(toCheck.layerDef.overpassTags.matchesProperties(f.feature.properties)){ if (toCheck.layerDef.overpassTags.matchesProperties(f.feature.properties)) {
return true; return true;
} }
} }
@ -54,15 +54,16 @@ export default class FilteringFeatureSource implements FeatureSource {
layerDict[layer.layerDef.id] = layer; layerDict[layer.layerDef.id] = layer;
} }
upstream.features.addCallback(() => { upstream.features.addCallback(() => {
update()}); update()
});
location.map(l => { location.map(l => {
// We want something that is stable for the shown layers // We want something that is stable for the shown layers
const displayedLayerIndexes = []; const displayedLayerIndexes = [];
for (let i = 0; i < layers.length; i++) { for (let i = 0; i < layers.length; i++) {
if(l.zoom < layers[i].layerDef.minzoom){ if (l.zoom < layers[i].layerDef.minzoom) {
continue; continue;
} }
if(!layers[i].isDisplayed.data){ if (!layers[i].isDisplayed.data) {
continue; continue;
} }
displayedLayerIndexes.push(i); displayedLayerIndexes.push(i);
@ -70,10 +71,16 @@ export default class FilteringFeatureSource implements FeatureSource {
return displayedLayerIndexes.join(",") return displayedLayerIndexes.join(",")
}, layers.map(l => l.isDisplayed)) }, layers.map(l => l.isDisplayed))
.addCallback(() => { .addCallback(() => {
update();}); update();
});
} }
private static showLayer(layer: {
isDisplayed: UIEventSource<boolean>,
layerDef: LayerConfig
}, location: UIEventSource<Loc>) {
return layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom)
}
} }

9
UI/BigComponents/LayerSelection.ts
View file

@ -43,10 +43,13 @@ export default class LayerSelection extends UIElement {
} }
return "" return ""
})) }))
const style = "display:flex;align-items:center;flex-wrap:wrap;" const style = "display:flex;align-items:center;"
const styleWhole = "display:flex; flex-wrap: wrap"
this._checkboxes.push(new CheckBox( this._checkboxes.push(new CheckBox(
new Combine([icon, name, zoomStatus]).SetStyle(style), new Combine([new Combine([icon, name]).SetStyle(style), zoomStatus])
new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style), .SetStyle(styleWhole),
new Combine([new Combine([iconUnselected, "<del>", name, "</del>"]).SetStyle(style), zoomStatus])
.SetStyle(styleWhole),
layer.isDisplayed) layer.isDisplayed)
.SetStyle("margin:0.3em;") .SetStyle("margin:0.3em;")
); );

4
css/tagrendering.css
View file

@ -28,7 +28,7 @@
box-shadow: 0 10px 10px -10px var(--shadow-color); box-shadow: 0 10px 10px -10px var(--shadow-color);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-width: 95vw; width: 100%;
overflow-x: hidden; overflow-x: hidden;
} }
@ -68,7 +68,7 @@
max-height: 75vh; max-height: 75vh;
overflow-y: auto; overflow-y: auto;
padding-top: 1em; padding-top: 1em;
max-width: 95vw; width:100%;
overflow-x: hidden; overflow-x: hidden;
} }

1
index.css
View file

@ -103,6 +103,7 @@ a {
position: relative; position: relative;
width: 2em; width: 2em;
height: 2em; height: 2em;
flex-shrink: 0;
} }
.single-layer-selection-toggle img { .single-layer-selection-toggle img {