From bedc57631366bf58d91a8be76b913f88f95c8c00 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Fri, 1 Oct 2021 05:24:10 +0200 Subject: [PATCH] Stabilize popups in ShowDataLayer --- Logic/Actors/SelectedFeatureHandler.ts | 14 +++++++++-- Models/Constants.ts | 2 +- UI/ShowDataLayer/ShowDataLayer.ts | 35 +++++++++++++------------- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/Logic/Actors/SelectedFeatureHandler.ts b/Logic/Actors/SelectedFeatureHandler.ts index 4401159846..73e69d72cd 100644 --- a/Logic/Actors/SelectedFeatureHandler.ts +++ b/Logic/Actors/SelectedFeatureHandler.ts @@ -34,9 +34,19 @@ export default class SelectedFeatureHandler { }else{ // we search the element to select const feature = state.allElements.ContainingFeatures.get(h) - if(feature !== undefined){ - state.selectedElement.setData(feature) + if(feature === undefined){ + return; } + const currentlySeleced = state.selectedElement.data + if(currentlySeleced === undefined){ + state.selectedElement.setData(feature) + return; + } + if(currentlySeleced.properties?.id === feature.properties.id){ + // We already have the right feature + return; + } + state.selectedElement.setData(feature) } } diff --git a/Models/Constants.ts b/Models/Constants.ts index 52ed3c81b4..50cfcf7505 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -2,7 +2,7 @@ import {Utils} from "../Utils"; export default class Constants { - public static vNumber = "0.10.1-rc0"; + public static vNumber = "0.10.1-rc1"; public static ImgurApiKey = '7070e7167f0a25a' public static readonly mapillary_client_token_v3 = 'TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2' public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85" diff --git a/UI/ShowDataLayer/ShowDataLayer.ts b/UI/ShowDataLayer/ShowDataLayer.ts index 73c78f9455..b8771aa7a0 100644 --- a/UI/ShowDataLayer/ShowDataLayer.ts +++ b/UI/ShowDataLayer/ShowDataLayer.ts @@ -22,7 +22,7 @@ export default class ShowDataLayer { /** * If the selected element triggers, this is used to lookup the correct layer and to open the popup * Used to avoid a lot of callbacks on the selected element - * + * * Note: the key of this dictionary is 'feature.properties.id+features.geometry.type' as one feature might have multiple presentations * @private */ @@ -58,19 +58,19 @@ export default class ShowDataLayer { mp.addLayer(this.geoLayer) } } else { - if(this.geoLayer !== undefined){ + if (this.geoLayer !== undefined) { mp.removeLayer(this.geoLayer) } } }) - + State.state.selectedElement.addCallbackAndRunD(selected => { if (self._leafletMap.data === undefined) { return; } - const v = self.leafletLayersPerId.get(selected.properties.id+selected.geometry.type) + const v = self.leafletLayersPerId.get(selected.properties.id + selected.geometry.type) if (v === undefined) { return; } @@ -82,14 +82,14 @@ export default class ShowDataLayer { if (selected.properties.id !== feature.properties.id) { return; } - + if (feature.id !== feature.properties.id) { // Probably a feature which has renamed + // the feature might have as id 'node/-1' and as 'feature.properties.id' = 'the newly assigned id'. That is no good too console.log("Not opening the popup for", feature, "as probably renamed") return; } if (selected.geometry.type === feature.geometry.type // If a feature is rendered both as way and as point, opening one popup might trigger the other to open, which might trigger the one to open again - && feature.id === feature.properties.id // the feature might have as id 'node/-1' and as 'feature.properties.id' = 'the newly assigned id'. That is no good too ) { console.log("Opening popup of feature", feature) leafletLayer.openPopup() @@ -174,8 +174,8 @@ export default class ShowDataLayer { } let tagSource = State.state.allElements.getEventSourceById(feature.properties.id) - if(tagSource === undefined){ - tagSource = new UIEventSource(feature.properties) + if (tagSource === undefined) { + tagSource = new UIEventSource(feature.properties) } const clickable = !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0) const style = layer.GenerateLeafletStyle(tagSource, clickable); @@ -221,10 +221,11 @@ export default class ShowDataLayer { let infobox: FeatureInfoBox = undefined; - const id = `popup-${feature.properties.id}-${this._cleanCount}` - popup.setContent(`
Rendering
`) + const id = `popup-${feature.properties.id}-${feature.geometry.type}-${this._cleanCount}` + popup.setContent(`
Popup for ${feature.properties.id} ${feature.geometry.type}
`) leafletLayer.on("popupopen", () => { + console.trace(`Opening the popup for ${feature.properties.id} ${feature.geometry.type}`) if (infobox === undefined) { const tags = State.state.allElements.getEventSourceById(feature.properties.id); infobox = new FeatureInfoBox(tags, layer); @@ -236,20 +237,18 @@ export default class ShowDataLayer { } }); } - - infobox.AttachTo(id) infobox.Activate(); - - - if(State.state.selectedElement.data?.properties?.id !== feature.properties.id){ - // x State.state.selectedElement.setData(feature) - } + State.state.selectedElement.setData(feature) + }); // Add the feature to the index to open the popup when needed - this.leafletLayersPerId.set(feature.properties.id+feature.geometry.type, {feature: feature, leafletlayer: leafletLayer}) + this.leafletLayersPerId.set(feature.properties.id + feature.geometry.type, { + feature: feature, + leafletlayer: leafletLayer + }) }