diff --git a/InitUiElements.ts b/InitUiElements.ts index a1cb4531c..ceed80f96 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -278,8 +278,10 @@ export class InitUiElements { checkbox.isEnabled.setData(false); }) - State.state.selectedElement.addCallback(() => { - checkbox.isEnabled.setData(false); + State.state.selectedElement.addCallback(selected => { + if(selected !== undefined){ + checkbox.isEnabled.setData(false); + } }) @@ -367,11 +369,6 @@ export class InitUiElements { attr ); State.state.leafletMap.setData(bm.map); - - bm.map.on("popupclose", () => { - State.state.selectedElement.setData(undefined) - }) - } private static InitLayers() { diff --git a/State.ts b/State.ts index 75329af4e..e88708d78 100644 --- a/State.ts +++ b/State.ts @@ -75,12 +75,14 @@ export default class State { /** This message is shown full screen on mobile devices */ - public readonly fullScreenMessage = new UIEventSource(undefined); + public readonly fullScreenMessage = new UIEventSource(undefined) + .addCallback(fs => console.log("Fullscreen message is", fs)); /** The latest element that was selected - used to generate the right UI at the right place */ - public readonly selectedElement = new UIEventSource(undefined); + public readonly selectedElement = new UIEventSource(undefined) + .addCallback(selected => console.log("Selected element is", selected)); public readonly featureSwitchUserbadge: UIEventSource; public readonly featureSwitchSearch: UIEventSource; diff --git a/UI/ShowDataLayer.ts b/UI/ShowDataLayer.ts index 04dc80af7..f3e8586d8 100644 --- a/UI/ShowDataLayer.ts +++ b/UI/ShowDataLayer.ts @@ -17,6 +17,7 @@ export default class ShowDataLayer { private readonly _layerDict; private readonly _leafletMap: UIEventSource; + private readonly _onSelectedTrigger: any = {}; // osmId+geometry.type+matching_layer_id --> () => void constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>, leafletMap: UIEventSource, @@ -63,6 +64,16 @@ export default class ShowDataLayer { zoom.map(z => (layoutToUse.clustering?.maxZoom ?? 0) >= z).addCallback(() => { update(); }); + State.state.selectedElement.addCallback(feature => { + if(feature === undefined){ + return; + } + const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id; + const action = self._onSelectedTrigger[id]; + if(action){ + action(); + } + }); } @@ -109,7 +120,7 @@ export default class ShowDataLayer { const tags = State.state.allElements.getEventSourceFor(feature); - let uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer)); + const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer)); popup.setContent(uiElement.Render()); leafletLayer.bindPopup(popup); // We first render the UIelement (which'll still need an update later on...) @@ -118,10 +129,17 @@ export default class ShowDataLayer { leafletLayer.on("click", (e) => { // We set the element as selected... - uiElement.Activate(); + // uiElement.Activate(); State.state.selectedElement.setData(feature); }); - + + const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id; + this._onSelectedTrigger[id] + = () => { + leafletLayer.openPopup(); + uiElement.Activate(); + } + if (feature.properties.id.replace(/\//g, "_") === Hash.Get().data) { // This element is in the URL, so this is a share link