ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Reformat all files with prettier

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-09-08 21:40:48 +02:00
parent e22d189376
commit b541d3eab4
382 changed files with 50893 additions and 35566 deletions
Download patch file Download diff file Expand all files Collapse all files

250
UI/ShowDataLayer/ShowDataLayerImplementation.ts
View file

@ -1,9 +1,9 @@
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {ShowDataLayerOptions} from "./ShowDataLayerOptions";
import {ElementStorage} from "../../Logic/ElementStorage";
import RenderingMultiPlexerFeatureSource from "../../Logic/FeatureSource/Sources/RenderingMultiPlexerFeatureSource";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { ShowDataLayerOptions } from "./ShowDataLayerOptions"
import { ElementStorage } from "../../Logic/ElementStorage"
import RenderingMultiPlexerFeatureSource from "../../Logic/FeatureSource/Sources/RenderingMultiPlexerFeatureSource"
import ScrollableFullScreen from "../Base/ScrollableFullScreen"
/*
// import 'leaflet-polylineoffset';
We don't actually import it here. It is imported in the 'MinimapImplementation'-class, which'll result in a patched 'L' object.
@ -18,23 +18,22 @@ We don't actually import it here. It is imported in the 'MinimapImplementation'-
* The data layer shows all the given geojson elements with the appropriate icon etc
*/
export default class ShowDataLayerImplementation {
private static dataLayerIds = 0
private readonly _leafletMap: Store<L.Map>;
private readonly _enablePopups: boolean;
private readonly _leafletMap: Store<L.Map>
private readonly _enablePopups: boolean
private readonly _features: RenderingMultiPlexerFeatureSource
private readonly _layerToShow: LayerConfig;
private readonly _layerToShow: LayerConfig
private readonly _selectedElement: UIEventSource<any>
private readonly allElements: ElementStorage
// Used to generate a fresh ID when needed
private _cleanCount = 0;
private geoLayer = undefined;
private _cleanCount = 0
private geoLayer = undefined
/**
* A collection of functions to call when the current geolayer is unregistered
*/
private unregister: (() => void)[] = [];
private isDirty = false;
private unregister: (() => void)[] = []
private isDirty = false
/**
* 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
@ -42,9 +41,12 @@ export default class ShowDataLayerImplementation {
* Note: the key of this dictionary is 'feature.properties.id+features.geometry.type' as one feature might have multiple presentations
* @private
*/
private readonly leafletLayersPerId = new Map<string, { feature: any, leafletlayer: any }>()
private readonly showDataLayerid: number;
private readonly createPopup: (tags: UIEventSource<any>, layer: LayerConfig) => ScrollableFullScreen
private readonly leafletLayersPerId = new Map<string, { feature: any; leafletlayer: any }>()
private readonly showDataLayerid: number
private readonly createPopup: (
tags: UIEventSource<any>,
layer: LayerConfig
) => ScrollableFullScreen
/**
* Creates a datalayer.
@ -53,38 +55,40 @@ export default class ShowDataLayerImplementation {
* @param options
*/
constructor(options: ShowDataLayerOptions & { layerToShow: LayerConfig }) {
this._leafletMap = options.leafletMap;
this.showDataLayerid = ShowDataLayerImplementation.dataLayerIds;
this._leafletMap = options.leafletMap
this.showDataLayerid = ShowDataLayerImplementation.dataLayerIds
ShowDataLayerImplementation.dataLayerIds++
if (options.features === undefined) {
console.error("Invalid ShowDataLayer invocation: options.features is undefed")
throw "Invalid ShowDataLayer invocation: options.features is undefed"
}
this._features = new RenderingMultiPlexerFeatureSource(options.features, options.layerToShow);
this._layerToShow = options.layerToShow;
this._features = new RenderingMultiPlexerFeatureSource(
options.features,
options.layerToShow
)
this._layerToShow = options.layerToShow
this._selectedElement = options.selectedElement
this.allElements = options.state?.allElements;
this.createPopup = undefined;
this._enablePopups = options.popup !== undefined;
this.allElements = options.state?.allElements
this.createPopup = undefined
this._enablePopups = options.popup !== undefined
if (options.popup !== undefined) {
this.createPopup = options.popup
}
const self = this;
const self = this
options.leafletMap.addCallback(_ => {
return self.update(options)
}
);
options.leafletMap.addCallback((_) => {
return self.update(options)
})
this._features.features.addCallback(_ => self.update(options));
options.doShowLayer?.addCallback(doShow => {
const mp = options.leafletMap.data;
this._features.features.addCallback((_) => self.update(options))
options.doShowLayer?.addCallback((doShow) => {
const mp = options.leafletMap.data
if (mp === null) {
self.Destroy()
return true;
return true
}
if (mp == undefined) {
return;
return
}
if (doShow) {
@ -96,24 +100,21 @@ export default class ShowDataLayerImplementation {
} else {
if (this.geoLayer !== undefined) {
mp.removeLayer(this.geoLayer)
this.unregister.forEach(f => f())
this.unregister.forEach((f) => f())
this.unregister = []
}
}
})
this._selectedElement?.addCallbackAndRunD(selected => {
this._selectedElement?.addCallbackAndRunD((selected) => {
self.openPopupOfSelectedElement(selected)
})
this.update(options)
}
private Destroy() {
this.unregister.forEach(f => f())
this.unregister.forEach((f) => f())
}
private openPopupOfSelectedElement(selected) {
@ -121,28 +122,29 @@ export default class ShowDataLayerImplementation {
return
}
if (this._leafletMap.data === undefined) {
return;
return
}
const v = this.leafletLayersPerId.get(selected.properties.id + selected.geometry.type)
if (v === undefined) {
return;
return
}
const leafletLayer = v.leafletlayer
const feature = v.feature
if (leafletLayer.getPopup().isOpen()) {
return;
return
}
if (selected.properties.id !== feature.properties.id) {
return;
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;
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
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
) {
leafletLayer.openPopup()
}
@ -150,41 +152,42 @@ export default class ShowDataLayerImplementation {
private update(options: ShowDataLayerOptions): boolean {
if (this._features.features.data === undefined) {
return;
return
}
this.isDirty = true;
this.isDirty = true
if (options?.doShowLayer?.data === false) {
return;
return
}
const mp = options.leafletMap.data;
const mp = options.leafletMap.data
if (mp === null) {
return true; // Unregister as the map has been destroyed
return true // Unregister as the map has been destroyed
}
if (mp === undefined) {
return;
return
}
this._cleanCount++
// clean all the old stuff away, if any
if (this.geoLayer !== undefined) {
mp.removeLayer(this.geoLayer);
mp.removeLayer(this.geoLayer)
}
const self = this;
const self = this
const data = {
type: "FeatureCollection",
features: []
features: [],
}
// @ts-ignore
this.geoLayer = L.geoJSON(data, {
style: feature => self.createStyleFor(feature),
style: (feature) => self.createStyleFor(feature),
pointToLayer: (feature, latLng) => self.pointToLayer(feature, latLng),
onEachFeature: (feature, leafletLayer) => self.postProcessFeature(feature, leafletLayer)
});
onEachFeature: (feature, leafletLayer) =>
self.postProcessFeature(feature, leafletLayer),
})
const selfLayer = this.geoLayer;
const allFeats = this._features.features.data;
const selfLayer = this.geoLayer
const allFeats = this._features.features.data
for (const feat of allFeats) {
if (feat === undefined) {
continue
@ -192,10 +195,16 @@ export default class ShowDataLayerImplementation {
try {
if (feat.geometry.type === "LineString") {
const coords = L.GeoJSON.coordsToLatLngs(feat.geometry.coordinates)
const tagsSource = this.allElements?.addOrGetElement(feat) ?? new UIEventSource<any>(feat.properties);
let offsettedLine;
const tagsSource =
this.allElements?.addOrGetElement(feat) ??
new UIEventSource<any>(feat.properties)
let offsettedLine
tagsSource
.map(tags => this._layerToShow.lineRendering[feat.lineRenderingIndex].GenerateLeafletStyle(tags))
.map((tags) =>
this._layerToShow.lineRendering[
feat.lineRenderingIndex
].GenerateLeafletStyle(tags)
)
.withEqualityStabilized((a, b) => {
if (a === b) {
return true
@ -203,14 +212,19 @@ export default class ShowDataLayerImplementation {
if (a === undefined || b === undefined) {
return false
}
return a.offset === b.offset && a.color === b.color && a.weight === b.weight && a.dashArray === b.dashArray
return (
a.offset === b.offset &&
a.color === b.color &&
a.weight === b.weight &&
a.dashArray === b.dashArray
)
})
.addCallbackAndRunD(lineStyle => {
.addCallbackAndRunD((lineStyle) => {
if (offsettedLine !== undefined) {
self.geoLayer.removeLayer(offsettedLine)
}
// @ts-ignore
offsettedLine = L.polyline(coords, lineStyle);
offsettedLine = L.polyline(coords, lineStyle)
this.postProcessFeature(feat, offsettedLine)
offsettedLine.addTo(this.geoLayer)
@ -218,10 +232,16 @@ export default class ShowDataLayerImplementation {
return self.geoLayer !== selfLayer
})
} else {
this.geoLayer.addData(feat);
this.geoLayer.addData(feat)
}
} catch (e) {
console.error("Could not add ", feat, "to the geojson layer in leaflet due to", e, e.stack)
console.error(
"Could not add ",
feat,
"to the geojson layer in leaflet due to",
e,
e.stack
)
}
}
@ -229,7 +249,7 @@ export default class ShowDataLayerImplementation {
if (this.geoLayer.getLayers().length > 0) {
try {
const bounds = this.geoLayer.getBounds()
mp.fitBounds(bounds, {animate: false})
mp.fitBounds(bounds, { animate: false })
} catch (e) {
console.debug("Invalid bounds", e)
}
@ -239,13 +259,13 @@ export default class ShowDataLayerImplementation {
if (options.doShowLayer?.data ?? true) {
mp.addLayer(this.geoLayer)
}
this.isDirty = false;
this.isDirty = false
this.openPopupOfSelectedElement(this._selectedElement?.data)
}
private createStyleFor(feature) {
const tagsSource = this.allElements?.addOrGetElement(feature) ?? new UIEventSource<any>(feature.properties);
const tagsSource =
this.allElements?.addOrGetElement(feature) ?? new UIEventSource<any>(feature.properties)
// Every object is tied to exactly one layer
const layer = this._layerToShow
@ -253,9 +273,12 @@ export default class ShowDataLayerImplementation {
const lineRenderingIndex = feature.lineRenderingIndex
if (pointRenderingIndex !== undefined) {
const style = layer.mapRendering[pointRenderingIndex].GenerateLeafletStyle(tagsSource, this._enablePopups)
const style = layer.mapRendering[pointRenderingIndex].GenerateLeafletStyle(
tagsSource,
this._enablePopups
)
return {
icon: style
icon: style,
}
}
if (lineRenderingIndex !== undefined) {
@ -272,19 +295,26 @@ export default class ShowDataLayerImplementation {
const layer: LayerConfig = this._layerToShow
if (layer === undefined) {
return;
return
}
let tagSource = this.allElements?.getEventSourceById(feature.properties.id) ?? new UIEventSource<any>(feature.properties)
const clickable = !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0) && this._enablePopups
let style: any = layer.mapRendering[feature.pointRenderingIndex].GenerateLeafletStyle(tagSource, clickable);
const baseElement = style.html;
let tagSource =
this.allElements?.getEventSourceById(feature.properties.id) ??
new UIEventSource<any>(feature.properties)
const clickable =
!(layer.title === undefined && (layer.tagRenderings ?? []).length === 0) &&
this._enablePopups
let style: any = layer.mapRendering[feature.pointRenderingIndex].GenerateLeafletStyle(
tagSource,
clickable
)
const baseElement = style.html
if (!this._enablePopups) {
baseElement.SetStyle("cursor: initial !important")
}
style.html = style.html.ConstructElement()
return L.marker(latLng, {
icon: L.divIcon(style)
});
icon: L.divIcon(style),
})
}
/**
@ -298,53 +328,59 @@ export default class ShowDataLayerImplementation {
if (layer.title === undefined || !this._enablePopups) {
// No popup action defined -> Don't do anything
// or probably a map in the popup - no popups needed!
return;
return
}
const popup = L.popup({
autoPan: true,
closeOnEscapeKey: true,
closeButton: false,
autoPanPaddingTopLeft: [15, 15],
const popup = L.popup(
{
autoPan: true,
closeOnEscapeKey: true,
closeButton: false,
autoPanPaddingTopLeft: [15, 15],
},
leafletLayer
)
}, leafletLayer);
leafletLayer.bindPopup(popup)
leafletLayer.bindPopup(popup);
let infobox: ScrollableFullScreen = undefined;
const id = `popup-${feature.properties.id}-${feature.geometry.type}-${this.showDataLayerid}-${this._cleanCount}-${feature.pointRenderingIndex ?? feature.lineRenderingIndex}-${feature.multiLineStringIndex ?? ""}`
popup.setContent(`<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type} ${id} is loading</div>`)
const createpopup = this.createPopup;
let infobox: ScrollableFullScreen = undefined
const id = `popup-${feature.properties.id}-${feature.geometry.type}-${
this.showDataLayerid
}-${this._cleanCount}-${feature.pointRenderingIndex ?? feature.lineRenderingIndex}-${
feature.multiLineStringIndex ?? ""
}`
popup.setContent(
`<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type} ${id} is loading</div>`
)
const createpopup = this.createPopup
leafletLayer.on("popupopen", () => {
if (infobox === undefined) {
const tags = this.allElements?.getEventSourceById(feature.properties.id) ?? new UIEventSource<any>(feature.properties);
infobox = createpopup(tags, layer);
const tags =
this.allElements?.getEventSourceById(feature.properties.id) ??
new UIEventSource<any>(feature.properties)
infobox = createpopup(tags, layer)
infobox.isShown.addCallback(isShown => {
infobox.isShown.addCallback((isShown) => {
if (!isShown) {
leafletLayer.closePopup()
}
});
})
}
infobox.AttachTo(id)
infobox.Activate();
infobox.Activate()
this.unregister.push(() => {
console.log("Destroying infobox")
infobox.Destroy();
infobox.Destroy()
})
if (this._selectedElement?.data?.properties?.id !== feature.properties.id) {
this._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
leafletlayer: leafletLayer,
})
}
}
}