From 770c8d1dde54858d1cb8c4bf68791500002261a2 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 14 Feb 2021 20:36:20 +0100 Subject: [PATCH] Fixed opening of popups --- Logic/GeoOperations.ts | 6 ++++++ UI/Image/Attribution.ts | 2 +- UI/Image/MapillaryImage.ts | 1 - UI/ShowDataLayer.ts | 40 +++++++++++++++++--------------------- 4 files changed, 25 insertions(+), 24 deletions(-) diff --git a/Logic/GeoOperations.ts b/Logic/GeoOperations.ts index 86bc694..9c4140d 100644 --- a/Logic/GeoOperations.ts +++ b/Logic/GeoOperations.ts @@ -14,6 +14,12 @@ export class GeoOperations { return newFeature; } + + static centerpointCoordinates(feature: any){ + const coordinates = turf.center(feature).geometry.coordinates; + coordinates.reverse(); + return coordinates; + } static featureIsContainedInAny(feature: any, shouldNotContain: any[], diff --git a/UI/Image/Attribution.ts b/UI/Image/Attribution.ts index 3718059..8f07456 100644 --- a/UI/Image/Attribution.ts +++ b/UI/Image/Attribution.ts @@ -12,7 +12,7 @@ export default class Attribution extends Combine { Translations.W((license ?? "") === "undefined" ? "CC0" : (license ?? "")) ]).SetClass("flex flex-col") ]); - this.SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 rounded"); + this.SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg"); } } \ No newline at end of file diff --git a/UI/Image/MapillaryImage.ts b/UI/Image/MapillaryImage.ts index 2c83f09..1df5c3e 100644 --- a/UI/Image/MapillaryImage.ts +++ b/UI/Image/MapillaryImage.ts @@ -54,7 +54,6 @@ export class MapillaryImage extends UIElement { return new Combine([ image, new Attribution(meta.artist, meta.license, Svg.mapillary_svg()) - ]).SetClass("relative block").Render(); } diff --git a/UI/ShowDataLayer.ts b/UI/ShowDataLayer.ts index 7aaa468..a3a4053 100644 --- a/UI/ShowDataLayer.ts +++ b/UI/ShowDataLayer.ts @@ -10,6 +10,7 @@ import LazyElement from "./Base/LazyElement"; import FeatureInfoBox from "./Popup/FeatureInfoBox"; import LayoutConfig from "../Customizations/JSON/LayoutConfig"; import ScrollableFullScreen from "./Base/ScrollableFullScreen"; +import {GeoOperations} from "../Logic/GeoOperations"; export default class ShowDataLayer { @@ -53,14 +54,10 @@ export default class ShowDataLayer { } 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; // @ts-ignore geoLayer.addData(feat); - i++; } if (layoutToUse.data.clustering.minNeededElements <= allFeats.length) { // Activate clustering if it wasn't already activated @@ -68,11 +65,11 @@ export default class ShowDataLayer { 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) } + + State.state.selectedElement.ping(); } features.addCallback(() => update()); @@ -87,7 +84,7 @@ export default class ShowDataLayer { const layer = this._layerDict[feature._matching_layer_id]; return layer.GenerateLeafletStyle(tagsSource, layer._showOnPopup !== undefined); } - + private pointToLayer(feature, latLng): L.Layer { // Leaflet cannot handle geojson points natively // We have to convert them to the appropriate icon @@ -125,8 +122,6 @@ export default class ShowDataLayer { closeButton: false }, leafletLayer); - let isOpen = false; - const tags = State.state.allElements.getEventSourceFor(feature); const uiElement = new LazyElement(() => FeatureInfoBox.construct(tags, layer, () => { @@ -138,14 +133,7 @@ export default class ShowDataLayer { "
Rendering
"); // 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...) @@ -153,26 +141,34 @@ export default class ShowDataLayer { leafletLayer.on("popupopen", () => { - isOpen = true; State.state.selectedElement.setData(feature); uiElement.Activate(); }) State.state.selectedElement.addCallbackAndRun(selected => { + if(selected !== undefined && feature.properties.id === selected.properties.id){ + console.log("Currently selected feature:", selected, "feature is",feature, "is same?", selected == feature) + } + if (selected === undefined) { - if (popup.isOpen() && isOpen) { + if (popup.isOpen()) { popup.remove(); } - } else if (selected == feature && selected.geometry.type == feature.geometry.type) { + } else if (selected == feature && selected.geometry.type === feature.geometry.type) { + console.log("Found the popup to open!") // 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(); + const mp = this._leafletMap.data; + if (!popup.isOpen() && mp !== undefined) { + var centerpoint = GeoOperations.centerpointCoordinates(feature); + console.log("centerpoint:", centerpoint,"of",feature) + popup + .setLatLng(GeoOperations.centerpointCoordinates(feature)) + .openOn(mp); } } }