forked from MapComplete/MapComplete
87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import * as L from "leaflet"
|
|
import { UIEventSource } from "../UIEventSource"
|
|
import ScrollableFullScreen from "../../UI/Base/ScrollableFullScreen"
|
|
import FilteredLayer from "../../Models/FilteredLayer"
|
|
import Constants from "../../Models/Constants"
|
|
import BaseUIElement from "../../UI/BaseUIElement"
|
|
|
|
/**
|
|
* 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 {
|
|
private _lastMarker
|
|
|
|
constructor(
|
|
state: {
|
|
LastClickLocation: UIEventSource<{ lat: number; lon: number }>
|
|
selectedElement: UIEventSource<string>
|
|
filteredLayers: UIEventSource<FilteredLayer[]>
|
|
leafletMap: UIEventSource<L.Map>
|
|
},
|
|
uiToShow: ScrollableFullScreen,
|
|
iconToShow: BaseUIElement
|
|
) {
|
|
const self = this
|
|
const leafletMap = state.leafletMap
|
|
state.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...
|
|
state.leafletMap.data.removeLayer(self._lastMarker)
|
|
}
|
|
})
|
|
})
|
|
|
|
state.LastClickLocation.addCallback(function (lastClick) {
|
|
if (self._lastMarker !== undefined) {
|
|
state.leafletMap.data?.removeLayer(self._lastMarker)
|
|
}
|
|
|
|
if (lastClick === undefined) {
|
|
return
|
|
}
|
|
|
|
state.selectedElement.setData(undefined)
|
|
const clickCoor: [number, number] = [lastClick.lat, lastClick.lon]
|
|
self._lastMarker = L.marker(clickCoor, {
|
|
icon: L.divIcon({
|
|
html: iconToShow.ConstructElement(),
|
|
iconSize: [50, 50],
|
|
iconAnchor: [25, 50],
|
|
popupAnchor: [0, -45],
|
|
}),
|
|
})
|
|
const popup = L.popup({
|
|
autoPan: true,
|
|
autoPanPaddingTopLeft: [15, 15],
|
|
closeOnEscapeKey: true,
|
|
autoClose: true,
|
|
}).setContent("<div id='strayclick' style='height: 65vh'></div>")
|
|
self._lastMarker.addTo(leafletMap.data)
|
|
self._lastMarker.bindPopup(popup)
|
|
|
|
self._lastMarker.on("click", () => {
|
|
if (leafletMap.data.getZoom() < Constants.userJourney.minZoomLevelToAddNewPoints) {
|
|
self._lastMarker.closePopup()
|
|
leafletMap.data.flyTo(
|
|
clickCoor,
|
|
Constants.userJourney.minZoomLevelToAddNewPoints
|
|
)
|
|
return
|
|
}
|
|
|
|
uiToShow.AttachTo("strayclick")
|
|
uiToShow.Activate()
|
|
})
|
|
})
|
|
|
|
state.selectedElement.addCallback(() => {
|
|
if (self._lastMarker !== undefined) {
|
|
leafletMap.data.removeLayer(self._lastMarker)
|
|
this._lastMarker = undefined
|
|
}
|
|
})
|
|
}
|
|
}
|