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

Fix hiding and showing of features

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-02-14 19:45:02 +01:00
parent d4f107c81a
commit bc1863dcb6
12 changed files with 160 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

14
UI/Base/ScrollableFullScreen.ts
View file

@ -21,6 +21,7 @@ export default class ScrollableFullScreen extends UIElement {
Svg.close_svg().SetClass("hidden md:block")
])
.onClick(() => {
console.log("Closing...")
ScrollableFullScreen.RestoreLeaflet();
if (onClose !== undefined) {
onClose();
@ -92,6 +93,19 @@ export default class ScrollableFullScreen extends UIElement {
if(htmlElement === undefined || htmlElement === null){
return;
}
let toHide = document.getElementsByClassName("leaflet-pane");
for (let i = 0; i < toHide.length; ++i) {
toHide[i].classList.add("no-transform");
toHide[i].classList.add("scrollable-fullscreen-no-transform");
}
toHide = document.getElementsByClassName("leaflet-popup");
for (let i = 0; i < toHide.length; ++i) {
toHide[i].classList.add("no-transform");
toHide[i].classList.add("scrollable-fullscreen-no-transform");
}
do {
// A leaflet workaround: in order for fullscreen to work, we need to get the parent element which does a transform3d and remove/read the transform
if (htmlElement.style.transform !== "") {

11
UI/BigComponents/SimpleAddUI.ts
View file

@ -13,7 +13,6 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations";
import Constants from "../../Models/Constants";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export default class SimpleAddUI extends UIElement {
private readonly _loginButton: UIElement;
@ -37,7 +36,7 @@ export default class SimpleAddUI extends UIElement {
private readonly goToInboxButton: UIElement = new SubtleButton(Svg.envelope_ui(),
Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false});
constructor(onClose: () => void) {
constructor() {
super(State.state.locationControl.map(loc => loc.zoom));
const self = this;
this.ListenTo(Locale.language);
@ -64,14 +63,10 @@ export default class SimpleAddUI extends UIElement {
State.state.layerControlIsOpened.setData(true);
})
this._component = new ScrollableFullScreen(
Translations.t.general.add.title,
this.CreateContent(),
onClose
);
}
InnerRender(): string {
this._component = this.CreateContent();
return this._component.Render();
}
@ -109,7 +104,7 @@ export default class SimpleAddUI extends UIElement {
}
const presetButtons = this.CreatePresetButtons()
return new Combine(presetButtons).SetClass("add-popup-all-buttons")
return new Combine(presetButtons)
}

116
UI/ShowDataLayer.ts
View file

@ -16,74 +16,67 @@ export default class ShowDataLayer {
private readonly _layerDict;
private readonly _leafletMap: UIEventSource<L.Map>;
private readonly _onSelectedTrigger: any = {}; // osmId+geometry.type+matching_layer_id --> () => void
constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>,
leafletMap: UIEventSource<L.Map>,
layoutToUse: LayoutConfig) {
layoutToUse: UIEventSource<LayoutConfig>) {
this._leafletMap = leafletMap;
const self = this;
const mp = leafletMap.data;
this._layerDict = {};
for (const layer of layoutToUse.layers) {
this._layerDict[layer.id] = layer;
}
function openSelectedElementFeature(feature: any) {
if (feature === undefined) {
return;
layoutToUse.addCallbackAndRun(layoutToUse => {
for (const layer of layoutToUse.layers) {
this._layerDict[layer.id] = layer;
}
const id = feature.properties.id + feature.geometry.type + feature._matching_layer_id;
const action = self._onSelectedTrigger[id];
if (action) {
action();
}
}
});
const knownFeatureIds = new Set<string>();
const geoLayer = self.CreateGeojsonLayer();
mp.addLayer(geoLayer);
let geoLayer = undefined;
let cluster = undefined;
function update() {
console.log("Updating the data layer...", features.data.length, "objects loaded")
if (features.data === undefined) {
return;
}
if (leafletMap.data === undefined) {
return;
}
const feats = features.data.map(ff => ff.feature);
for (const feat of feats) {
// clean all the old stuff away, if any
if (geoLayer !== undefined) {
mp.removeLayer(geoLayer);
}
if (cluster !== undefined) {
mp.removeLayer(cluster);
}
const allFeats = features.data.map(ff => ff.feature);
console.log("AllFeats contain ", allFeats.length)
geoLayer = self.CreateGeojsonLayer();
let i = 0;
for (const feat of allFeats) {
const key = feat.geometry.type + feat.properties.id + feat.layer;
if (knownFeatureIds.has(key)) {
continue;
}
knownFeatureIds.add(key);
// @ts-ignore
geoLayer.addData(feat);
console.log("Added ", feat)
i++;
}
if (cluster === undefined) {
if (layoutToUse.clustering.minNeededElements <= features.data.length) {
// Activate clustering if it wasn't already activated
const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.clustering.maxZoom});
cluster.addLayer(geoLayer);
mp.removeLayer(geoLayer)
mp.addLayer(cluster);
}
if (layoutToUse.data.clustering.minNeededElements <= allFeats.length) {
// Activate clustering if it wasn't already activated
const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.data.clustering.maxZoom});
cluster.addLayer(geoLayer);
mp.addLayer(cluster);
console.log("Added cluster", i)
} else {
mp.addLayer(geoLayer)
console.log("Added geoLayer", i)
}
}
features.addCallback(() => update());
leafletMap.addCallback(() => update());
State.state.selectedElement.addCallbackAndRun(openSelectedElementFeature);
update();
}
@ -103,6 +96,10 @@ export default class ShowDataLayer {
const tagSource = State.state.allElements.addOrGetElement(feature)
const layer: LayerConfig = this._layerDict[feature._matching_layer_id];
if (layer === undefined) {
return;
}
const style = layer.GenerateLeafletStyle(tagSource, !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0));
return L.marker(latLng, {
icon: L.divIcon({
@ -122,13 +119,13 @@ export default class ShowDataLayer {
// No popup action defined -> Don't do anything
return;
}
const self = this;
const popup = L.popup({
autoPan: true,
closeOnEscapeKey: true,
closeButton: false
}, leafletLayer);
let isOpen = false;
const tags = State.state.allElements.getEventSourceFor(feature);
const uiElement = new LazyElement(() =>
@ -141,30 +138,45 @@ export default class ShowDataLayer {
"<div style='height: 90vh'>Rendering</div>"); // By setting 90vh, leaflet will attempt to fit the entire screen and move the feature down
popup.setContent(uiElement.Render());
popup.on('remove', () => {
if (!isOpen) {
return;
}
console.log("Closing popup...")
isOpen = false;
ScrollableFullScreen.RestoreLeaflet(); // Just in case...
State.state.selectedElement.setData(undefined);
});
leafletLayer.bindPopup(popup);
// We first render the UIelement (which'll still need an update later on...)
// But at least it'll be visible already
leafletLayer.on("popupopen", () => {
console.log("Popup opened")
uiElement.Activate();
isOpen = true;
State.state.selectedElement.setData(feature);
uiElement.Activate();
})
const id = feature.properties.id + feature.geometry.type + feature._matching_layer_id;
this._onSelectedTrigger[id]
= () => {
if (!popup.isOpen()) {
console.log("Action triggered")
// Close all the popups which might still be opened
self._leafletMap.data.closePopup();
leafletLayer.openPopup()
return;
State.state.selectedElement.addCallbackAndRun(selected => {
if (selected === undefined) {
if (popup.isOpen() && isOpen) {
popup.remove();
}
} else if (selected == feature && selected.geometry.type == feature.geometry.type) {
// If wayhandling introduces a centerpoint and an area, this code might become unstable:
// The popup for the centerpoint would open, a bit later the area would close the first popup and open it's own
// In the process, the 'selectedElement' is set to undefined and to the other feature again, causing an infinite loop
// This is why we check for the geometry-type too
if (!popup.isOpen() && !isOpen) {
isOpen = true;
leafletLayer.openPopup();
}
}
}
}
this._onSelectedTrigger[feature.properties.id.replace("/", "_")] = this._onSelectedTrigger[id];
);
}