mapcomplete/Logic/Actors/StrayClickHandler.ts

72 lines
2.5 KiB
TypeScript
Raw Normal View History

import * as L from "leaflet";
2020-07-30 00:59:08 +02:00
import {UIElement} from "../../UI/UIElement";
2020-11-06 04:02:53 +01:00
import Svg from "../../Svg";
2021-01-02 21:03:40 +01:00
import {UIEventSource} from "../UIEventSource";
2021-01-03 00:19:42 +01:00
import Img from "../../UI/Base/Img";
2020-06-29 03:12:44 +02:00
/**
* The stray-click-hanlders adds a marker to the map if no feature was clicked.
* Shows the given uiToShow-element in the messagebox
*/
export default class StrayClickHandler {
2020-06-29 03:12:44 +02:00
private _lastMarker;
private _uiToShow: (() => UIElement);
constructor(
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
2021-01-02 21:03:40 +01:00
selectedElement: UIEventSource<string>,
filteredLayers: UIEventSource<{ readonly isDisplayed: UIEventSource<boolean> }[]>,
2021-01-02 21:03:40 +01:00
leafletMap: UIEventSource<L.Map>,
2020-06-29 03:12:44 +02:00
uiToShow: (() => UIElement)) {
this._uiToShow = uiToShow;
const self = this;
2021-01-02 21:03:40 +01:00
filteredLayers.data.forEach((filteredLayer) => {
filteredLayer.isDisplayed.addCallback(isEnabled => {
if (isEnabled && self._lastMarker && leafletMap.data !== undefined) {
// When a layer is activated, we remove the 'last click location' in order to force the user to reclick
// This reclick might be at a location where a feature now appeared...
leafletMap.data.removeLayer(self._lastMarker);
}
})
})
2021-01-02 21:03:40 +01:00
lastClickLocation.addCallback(function (lastClick) {
2021-01-22 00:40:15 +01:00
2020-06-29 03:12:44 +02:00
if (self._lastMarker !== undefined) {
2021-01-02 21:03:40 +01:00
leafletMap.data?.removeLayer(self._lastMarker);
2020-06-29 03:12:44 +02:00
}
2021-01-22 00:40:15 +01:00
if(lastClick === undefined){
return;
}
selectedElement.setData(undefined);
2020-07-25 18:00:08 +02:00
self._lastMarker = L.marker([lastClick.lat, lastClick.lon], {
icon: L.icon({
2020-11-06 04:02:53 +01:00
iconUrl: Img.AsData(Svg.add),
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -45]
2020-07-25 18:00:08 +02:00
})
});
2020-06-29 16:21:36 +02:00
const uiElement = uiToShow();
const popup = L.popup().setContent(uiElement.Render());
2021-01-02 21:03:40 +01:00
self._lastMarker.addTo(leafletMap.data);
self._lastMarker.bindPopup(popup);
2020-06-29 16:21:36 +02:00
2020-07-01 02:12:33 +02:00
self._lastMarker.on("click", () => {
uiElement.Update();
2020-07-01 02:12:33 +02:00
});
2020-06-29 03:12:44 +02:00
});
2021-01-02 21:03:40 +01:00
selectedElement.addCallback(() => {
2020-06-29 03:12:44 +02:00
if (self._lastMarker !== undefined) {
2021-01-02 21:03:40 +01:00
leafletMap.data.removeLayer(self._lastMarker);
2020-06-29 03:12:44 +02:00
this._lastMarker = undefined;
}
})
}
}