midgard/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

307
UI/Input/LocationInput.ts
View file

@ -1,33 +1,39 @@
import {ReadonlyInputElement} from "./InputElement";
import Loc from "../../Models/Loc";
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import Minimap, {MinimapObj} from "../Base/Minimap";
import BaseLayer from "../../Models/BaseLayer";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
import State from "../../State";
import {GeoOperations} from "../../Logic/GeoOperations";
import ShowDataMultiLayer from "../ShowDataLayer/ShowDataMultiLayer";
import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {BBox} from "../../Logic/BBox";
import {FixedUiElement} from "../Base/FixedUiElement";
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
import BaseUIElement from "../BaseUIElement";
import Toggle from "./Toggle";
import { ReadonlyInputElement } from "./InputElement"
import Loc from "../../Models/Loc"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Minimap, { MinimapObj } from "../Base/Minimap"
import BaseLayer from "../../Models/BaseLayer"
import Combine from "../Base/Combine"
import Svg from "../../Svg"
import State from "../../State"
import { GeoOperations } from "../../Logic/GeoOperations"
import ShowDataMultiLayer from "../ShowDataLayer/ShowDataMultiLayer"
import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { BBox } from "../../Logic/BBox"
import { FixedUiElement } from "../Base/FixedUiElement"
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer"
import BaseUIElement from "../BaseUIElement"
import Toggle from "./Toggle"
import * as matchpoint from "../../assets/layers/matchpoint/matchpoint.json"
export default class LocationInput extends BaseUIElement implements ReadonlyInputElement<Loc>, MinimapObj {
private static readonly matchLayer = new LayerConfig(matchpoint, "LocationInput.matchpoint", true)
export default class LocationInput
extends BaseUIElement
implements ReadonlyInputElement<Loc>, MinimapObj
{
private static readonly matchLayer = new LayerConfig(
matchpoint,
"LocationInput.matchpoint",
true
)
public readonly snappedOnto: UIEventSource<any> = new UIEventSource<any>(undefined)
public readonly _matching_layer: LayerConfig;
public readonly _matching_layer: LayerConfig
public readonly leafletMap: UIEventSource<any>
public readonly bounds;
public readonly location;
private _centerLocation: UIEventSource<Loc>;
private readonly mapBackground: UIEventSource<BaseLayer>;
public readonly bounds
public readonly location
private _centerLocation: UIEventSource<Loc>
private readonly mapBackground: UIEventSource<BaseLayer>
/**
* The features to which the input should be snapped
* @private
@ -36,33 +42,35 @@ export default class LocationInput extends BaseUIElement implements ReadonlyInpu
private readonly _value: Store<Loc>
private readonly _snappedPoint: Store<any>
private readonly _maxSnapDistance: number
private readonly _snappedPointTags: any;
private readonly _bounds: UIEventSource<BBox>;
private readonly map: BaseUIElement & MinimapObj;
private readonly clickLocation: UIEventSource<Loc>;
private readonly _minZoom: number;
private readonly _snappedPointTags: any
private readonly _bounds: UIEventSource<BBox>
private readonly map: BaseUIElement & MinimapObj
private readonly clickLocation: UIEventSource<Loc>
private readonly _minZoom: number
constructor(options: {
minZoom?: number,
mapBackground?: UIEventSource<BaseLayer>,
snapTo?: UIEventSource<{ feature: any }[]>,
maxSnapDistance?: number,
snappedPointTags?: any,
requiresSnapping?: boolean,
centerLocation: UIEventSource<Loc>,
minZoom?: number
mapBackground?: UIEventSource<BaseLayer>
snapTo?: UIEventSource<{ feature: any }[]>
maxSnapDistance?: number
snappedPointTags?: any
requiresSnapping?: boolean
centerLocation: UIEventSource<Loc>
bounds?: UIEventSource<BBox>
}) {
super();
this._snapTo = options.snapTo?.map(features => features?.filter(feat => feat.feature.geometry.type !== "Point"))
super()
this._snapTo = options.snapTo?.map((features) =>
features?.filter((feat) => feat.feature.geometry.type !== "Point")
)
this._maxSnapDistance = options.maxSnapDistance
this._centerLocation = options.centerLocation;
this._centerLocation = options.centerLocation
this._snappedPointTags = options.snappedPointTags
this._bounds = options.bounds;
this._bounds = options.bounds
this._minZoom = options.minZoom
if (this._snapTo === undefined) {
this._value = this._centerLocation;
this._value = this._centerLocation
} else {
const self = this;
const self = this
if (self._snappedPointTags !== undefined) {
const layout = State.state.layoutToUse
@ -73,89 +81,96 @@ export default class LocationInput extends BaseUIElement implements ReadonlyInpu
matchingLayer = layer
}
}
this._matching_layer = matchingLayer;
this._matching_layer = matchingLayer
} else {
this._matching_layer = LocationInput.matchLayer
}
this._snappedPoint = options.centerLocation.map(loc => {
if (loc === undefined) {
return undefined;
}
// We reproject the location onto every 'snap-to-feature' and select the closest
let min = undefined;
let matchedWay = undefined;
for (const feature of self._snapTo.data ?? []) {
try {
const nearestPointOnLine = GeoOperations.nearestPoint(feature.feature, [loc.lon, loc.lat])
if (min === undefined) {
min = nearestPointOnLine
matchedWay = feature.feature;
continue;
}
if (min.properties.dist > nearestPointOnLine.properties.dist) {
min = nearestPointOnLine
matchedWay = feature.feature;
}
} catch (e) {
console.log("Snapping to a nearest point failed for ", feature.feature, "due to ", e)
}
}
if (min === undefined || min.properties.dist * 1000 > self._maxSnapDistance) {
if (options.requiresSnapping) {
this._snappedPoint = options.centerLocation.map(
(loc) => {
if (loc === undefined) {
return undefined
} else {
return {
"type": "Feature",
"properties": options.snappedPointTags ?? min.properties,
"geometry": {"type": "Point", "coordinates": [loc.lon, loc.lat]}
}
// We reproject the location onto every 'snap-to-feature' and select the closest
let min = undefined
let matchedWay = undefined
for (const feature of self._snapTo.data ?? []) {
try {
const nearestPointOnLine = GeoOperations.nearestPoint(feature.feature, [
loc.lon,
loc.lat,
])
if (min === undefined) {
min = nearestPointOnLine
matchedWay = feature.feature
continue
}
if (min.properties.dist > nearestPointOnLine.properties.dist) {
min = nearestPointOnLine
matchedWay = feature.feature
}
} catch (e) {
console.log(
"Snapping to a nearest point failed for ",
feature.feature,
"due to ",
e
)
}
}
}
min.properties = options.snappedPointTags ?? min.properties
self.snappedOnto.setData(matchedWay)
return min
}, [this._snapTo])
this._value = this._snappedPoint.map(f => {
const [lon, lat] = f.geometry.coordinates;
if (min === undefined || min.properties.dist * 1000 > self._maxSnapDistance) {
if (options.requiresSnapping) {
return undefined
} else {
return {
type: "Feature",
properties: options.snappedPointTags ?? min.properties,
geometry: { type: "Point", coordinates: [loc.lon, loc.lat] },
}
}
}
min.properties = options.snappedPointTags ?? min.properties
self.snappedOnto.setData(matchedWay)
return min
},
[this._snapTo]
)
this._value = this._snappedPoint.map((f) => {
const [lon, lat] = f.geometry.coordinates
return {
lon: lon, lat: lat, zoom: undefined
lon: lon,
lat: lat,
zoom: undefined,
}
})
}
this.mapBackground = options.mapBackground ?? State.state?.backgroundLayer
this.SetClass("block h-full")
this.clickLocation = new UIEventSource<Loc>(undefined);
this.map = Minimap.createMiniMap(
{
location: this._centerLocation,
background: this.mapBackground,
attribution: this.mapBackground !== State.state?.backgroundLayer,
lastClickLocation: this.clickLocation,
bounds: this._bounds,
addLayerControl: true
}
)
this.clickLocation = new UIEventSource<Loc>(undefined)
this.map = Minimap.createMiniMap({
location: this._centerLocation,
background: this.mapBackground,
attribution: this.mapBackground !== State.state?.backgroundLayer,
lastClickLocation: this.clickLocation,
bounds: this._bounds,
addLayerControl: true,
})
this.leafletMap = this.map.leafletMap
this.location = this.map.location;
this.location = this.map.location
}
GetValue(): Store<Loc> {
return this._value;
return this._value
}
IsValid(t: Loc): boolean {
return t !== undefined;
return t !== undefined
}
installBounds(factor: number | BBox, showRange?: boolean): void {
@ -168,37 +183,39 @@ export default class LocationInput extends BaseUIElement implements ReadonlyInpu
protected InnerConstructElement(): HTMLElement {
try {
const self = this;
const self = this
const hasMoved = new UIEventSource(false)
const startLocation = {...this._centerLocation.data}
this._centerLocation.addCallbackD(newLocation => {
const startLocation = { ...this._centerLocation.data }
this._centerLocation.addCallbackD((newLocation) => {
const f = 100000
console.log(newLocation.lon, startLocation.lon)
const diff = (Math.abs(newLocation.lon * f - startLocation.lon * f) + Math.abs(newLocation.lat * f - startLocation.lat * f))
const diff =
Math.abs(newLocation.lon * f - startLocation.lon * f) +
Math.abs(newLocation.lat * f - startLocation.lat * f)
if (diff < 1) {
return;
return
}
hasMoved.setData(true)
return true;
return true
})
this.clickLocation.addCallbackAndRunD(location => this._centerLocation.setData(location))
this.clickLocation.addCallbackAndRunD((location) =>
this._centerLocation.setData(location)
)
if (this._snapTo !== undefined) {
// Show the lines to snap to
console.log("Constructing the snap-to layer", this._snapTo)
new ShowDataMultiLayer({
features: StaticFeatureSource.fromDateless(this._snapTo),
zoomToFeatures: false,
leafletMap: this.map.leafletMap,
layers: State.state.filteredLayers
}
)
features: StaticFeatureSource.fromDateless(this._snapTo),
zoomToFeatures: false,
leafletMap: this.map.leafletMap,
layers: State.state.filteredLayers,
})
// Show the central point
const matchPoint = this._snappedPoint.map(loc => {
const matchPoint = this._snappedPoint.map((loc) => {
if (loc === undefined) {
return []
}
return [{feature: loc}];
return [{ feature: loc }]
})
console.log("Constructing the match layer", matchPoint)
@ -208,21 +225,22 @@ export default class LocationInput extends BaseUIElement implements ReadonlyInpu
leafletMap: this.map.leafletMap,
layerToShow: this._matching_layer,
state: State.state,
selectedElement: State.state.selectedElement
selectedElement: State.state.selectedElement,
})
}
this.mapBackground.map(layer => {
const leaflet = this.map.leafletMap.data
if (leaflet === undefined || layer === undefined) {
return;
}
this.mapBackground.map(
(layer) => {
const leaflet = this.map.leafletMap.data
if (leaflet === undefined || layer === undefined) {
return
}
leaflet.setMaxZoom(layer.max_zoom)
leaflet.setMinZoom(self._minZoom ?? layer.max_zoom - 2)
leaflet.setZoom(layer.max_zoom - 1)
}, [this.map.leafletMap])
leaflet.setMaxZoom(layer.max_zoom)
leaflet.setMinZoom(self._minZoom ?? layer.max_zoom - 2)
leaflet.setZoom(layer.max_zoom - 1)
},
[this.map.leafletMap]
)
const animatedHand = Svg.hand_ui()
.SetStyle("width: 2rem; height: unset;")
@ -232,23 +250,24 @@ export default class LocationInput extends BaseUIElement implements ReadonlyInpu
new Combine([
Svg.move_arrows_ui()
.SetClass("block relative pointer-events-none")
.SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem")
]).SetClass("block w-0 h-0 z-10 relative")
.SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%; opacity: 0.5"),
.SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem"),
])
.SetClass("block w-0 h-0 z-10 relative")
.SetStyle(
"background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%; opacity: 0.5"
),
new Toggle(undefined,
animatedHand, hasMoved)
new Toggle(undefined, animatedHand, hasMoved)
.SetClass("block w-0 h-0 z-10 relative")
.SetStyle("left: calc(50% + 3rem); top: calc(50% + 2rem); opacity: 0.7"),
this.map
.SetClass("z-0 relative block w-full h-full bg-gray-100")
]).ConstructElement();
this.map.SetClass("z-0 relative block w-full h-full bg-gray-100"),
]).ConstructElement()
} catch (e) {
console.error("Could not generate LocationInputElement:", e)
return new FixedUiElement("Constructing a locationInput failed due to" + e).SetClass("alert").ConstructElement();
return new FixedUiElement("Constructing a locationInput failed due to" + e)
.SetClass("alert")
.ConstructElement()
}
}
}
}