forked from MapComplete/MapComplete
Reformat all files with prettier
This commit is contained in:
parent
e22d189376
commit
b541d3eab4
382 changed files with 50893 additions and 35566 deletions
|
|
@ -1,47 +1,46 @@
|
|||
import {InputElement} from "./InputElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Combine from "../Base/Combine";
|
||||
import Svg from "../../Svg";
|
||||
import {Utils} from "../../Utils";
|
||||
import Loc from "../../Models/Loc";
|
||||
import {GeoOperations} from "../../Logic/GeoOperations";
|
||||
import Minimap, {MinimapObj} from "../Base/Minimap";
|
||||
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
|
||||
import { InputElement } from "./InputElement"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import Combine from "../Base/Combine"
|
||||
import Svg from "../../Svg"
|
||||
import { Utils } from "../../Utils"
|
||||
import Loc from "../../Models/Loc"
|
||||
import { GeoOperations } from "../../Logic/GeoOperations"
|
||||
import Minimap, { MinimapObj } from "../Base/Minimap"
|
||||
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
|
||||
/**
|
||||
* Selects a length after clicking on the minimap, in meters
|
||||
*/
|
||||
export default class LengthInput extends InputElement<string> {
|
||||
|
||||
private readonly _location: UIEventSource<Loc>;
|
||||
private readonly value: UIEventSource<string>;
|
||||
private readonly background: UIEventSource<any>;
|
||||
private readonly _location: UIEventSource<Loc>
|
||||
private readonly value: UIEventSource<string>
|
||||
private readonly background: UIEventSource<any>
|
||||
|
||||
constructor(mapBackground: UIEventSource<any>,
|
||||
location: UIEventSource<Loc>,
|
||||
value?: UIEventSource<string>) {
|
||||
super();
|
||||
this._location = location;
|
||||
this.value = value ?? new UIEventSource<string>(undefined);
|
||||
this.background = mapBackground;
|
||||
constructor(
|
||||
mapBackground: UIEventSource<any>,
|
||||
location: UIEventSource<Loc>,
|
||||
value?: UIEventSource<string>
|
||||
) {
|
||||
super()
|
||||
this._location = location
|
||||
this.value = value ?? new UIEventSource<string>(undefined)
|
||||
this.background = mapBackground
|
||||
this.SetClass("block")
|
||||
|
||||
}
|
||||
|
||||
GetValue(): UIEventSource<string> {
|
||||
return this.value;
|
||||
return this.value
|
||||
}
|
||||
|
||||
IsValid(str: string): boolean {
|
||||
const t = Number(str)
|
||||
return !isNaN(t) && t >= 0;
|
||||
return !isNaN(t) && t >= 0
|
||||
}
|
||||
|
||||
protected InnerConstructElement(): HTMLElement {
|
||||
let map : (BaseUIElement & MinimapObj) = undefined
|
||||
let layerControl : BaseUIElement = undefined
|
||||
let map: BaseUIElement & MinimapObj = undefined
|
||||
let layerControl: BaseUIElement = undefined
|
||||
if (!Utils.runningFromConsole) {
|
||||
map = Minimap.createMiniMap({
|
||||
background: this.background,
|
||||
|
|
@ -49,139 +48,157 @@ export default class LengthInput extends InputElement<string> {
|
|||
location: this._location,
|
||||
attribution: true,
|
||||
leafletOptions: {
|
||||
tap: true
|
||||
tap: true,
|
||||
},
|
||||
})
|
||||
|
||||
layerControl = new BackgroundMapSwitch(
|
||||
{
|
||||
locationControl: this._location,
|
||||
backgroundLayer: this.background,
|
||||
},
|
||||
this.background,
|
||||
{
|
||||
allowedCategories: ["map", "photo"],
|
||||
}
|
||||
})
|
||||
|
||||
layerControl = new BackgroundMapSwitch({
|
||||
locationControl: this._location,
|
||||
backgroundLayer: this.background,
|
||||
}, this.background,{
|
||||
allowedCategories: ["map","photo"]
|
||||
})
|
||||
|
||||
)
|
||||
}
|
||||
const crosshair = new Combine([Svg.length_crosshair_svg().SetStyle(
|
||||
`position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`)
|
||||
]) .SetClass("block length-crosshair-svg relative pointer-events-none")
|
||||
const crosshair = new Combine([
|
||||
Svg.length_crosshair_svg().SetStyle(
|
||||
`position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`
|
||||
),
|
||||
])
|
||||
.SetClass("block length-crosshair-svg relative pointer-events-none")
|
||||
.SetStyle("z-index: 1000; visibility: hidden")
|
||||
|
||||
|
||||
const element = new Combine([
|
||||
crosshair,
|
||||
layerControl?.SetStyle("position: absolute; bottom: 0.25rem; left: 0.25rem; z-index: 1000"),
|
||||
layerControl?.SetStyle(
|
||||
"position: absolute; bottom: 0.25rem; left: 0.25rem; z-index: 1000"
|
||||
),
|
||||
map?.SetClass("w-full h-full block absolute top-0 left-O overflow-hidden"),
|
||||
])
|
||||
.SetClass("relative block bg-white border border-black rounded-xl overflow-hidden")
|
||||
.ConstructElement()
|
||||
|
||||
|
||||
this.RegisterTriggers(map?.ConstructElement(), map?.leafletMap, crosshair.ConstructElement())
|
||||
this.RegisterTriggers(
|
||||
map?.ConstructElement(),
|
||||
map?.leafletMap,
|
||||
crosshair.ConstructElement()
|
||||
)
|
||||
element.style.overflow = "hidden"
|
||||
element.style.display = "block"
|
||||
|
||||
return element
|
||||
}
|
||||
|
||||
private RegisterTriggers(htmlElement: HTMLElement, leafletMap: UIEventSource<L.Map>, measurementCrosshair: HTMLElement) {
|
||||
|
||||
private RegisterTriggers(
|
||||
htmlElement: HTMLElement,
|
||||
leafletMap: UIEventSource<L.Map>,
|
||||
measurementCrosshair: HTMLElement
|
||||
) {
|
||||
let firstClickXY: [number, number] = undefined
|
||||
let lastClickXY: [number, number] = undefined
|
||||
const self = this;
|
||||
|
||||
const self = this
|
||||
|
||||
function onPosChange(x: number, y: number, isDown: boolean, isUp?: boolean) {
|
||||
if (x === undefined || y === undefined) {
|
||||
// Touch end
|
||||
firstClickXY = undefined;
|
||||
lastClickXY = undefined;
|
||||
return;
|
||||
firstClickXY = undefined
|
||||
lastClickXY = undefined
|
||||
return
|
||||
}
|
||||
|
||||
const rect = htmlElement.getBoundingClientRect();
|
||||
const rect = htmlElement.getBoundingClientRect()
|
||||
// From the central part of location
|
||||
const dx = x - rect.left;
|
||||
const dy = y - rect.top;
|
||||
const dx = x - rect.left
|
||||
const dy = y - rect.top
|
||||
if (isDown) {
|
||||
if (lastClickXY === undefined && firstClickXY === undefined) {
|
||||
firstClickXY = [dx, dy];
|
||||
firstClickXY = [dx, dy]
|
||||
} else if (firstClickXY !== undefined && lastClickXY === undefined) {
|
||||
lastClickXY = [dx, dy]
|
||||
} else if (firstClickXY !== undefined && lastClickXY !== undefined) {
|
||||
// we measure again
|
||||
firstClickXY = [dx, dy]
|
||||
lastClickXY = undefined;
|
||||
lastClickXY = undefined
|
||||
}
|
||||
}
|
||||
|
||||
if (firstClickXY === undefined) {
|
||||
measurementCrosshair.style.visibility = "hidden"
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
||||
const distance = Math.sqrt((dy - firstClickXY[1]) * (dy - firstClickXY[1]) + (dx - firstClickXY[0]) * (dx - firstClickXY[0]))
|
||||
const distance = Math.sqrt(
|
||||
(dy - firstClickXY[1]) * (dy - firstClickXY[1]) +
|
||||
(dx - firstClickXY[0]) * (dx - firstClickXY[0])
|
||||
)
|
||||
if (isUp) {
|
||||
if (distance > 15) {
|
||||
lastClickXY = [dx, dy]
|
||||
}
|
||||
} else if (lastClickXY !== undefined) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
measurementCrosshair.style.visibility = "unset"
|
||||
measurementCrosshair.style.left = firstClickXY[0] + "px";
|
||||
measurementCrosshair.style.left = firstClickXY[0] + "px"
|
||||
measurementCrosshair.style.top = firstClickXY[1] + "px"
|
||||
|
||||
const angle = 180 * Math.atan2(firstClickXY[1] - dy, firstClickXY[0] - dx) / Math.PI;
|
||||
const angle = (180 * Math.atan2(firstClickXY[1] - dy, firstClickXY[0] - dx)) / Math.PI
|
||||
const angleGeo = (angle + 270) % 360
|
||||
const measurementCrosshairInner: HTMLElement = <HTMLElement>measurementCrosshair.firstChild
|
||||
measurementCrosshairInner.style.transform = `rotate(${angleGeo}deg)`;
|
||||
const measurementCrosshairInner: HTMLElement = <HTMLElement>(
|
||||
measurementCrosshair.firstChild
|
||||
)
|
||||
measurementCrosshairInner.style.transform = `rotate(${angleGeo}deg)`
|
||||
|
||||
measurementCrosshairInner.style.width = (distance * 2) + "px"
|
||||
measurementCrosshairInner.style.width = distance * 2 + "px"
|
||||
measurementCrosshairInner.style.marginLeft = -distance + "px"
|
||||
measurementCrosshairInner.style.marginTop = -distance + "px"
|
||||
|
||||
|
||||
const leaflet = leafletMap?.data
|
||||
if (leaflet) {
|
||||
const first = leaflet.layerPointToLatLng(firstClickXY)
|
||||
const last = leaflet.layerPointToLatLng([dx, dy])
|
||||
const geoDist = Math.floor(GeoOperations.distanceBetween([first.lng, first.lat], [last.lng, last.lat]) * 10) / 10
|
||||
const geoDist =
|
||||
Math.floor(
|
||||
GeoOperations.distanceBetween(
|
||||
[first.lng, first.lat],
|
||||
[last.lng, last.lat]
|
||||
) * 10
|
||||
) / 10
|
||||
self.value.setData("" + geoDist)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
htmlElement.ontouchstart = (ev: TouchEvent) => {
|
||||
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY, true);
|
||||
ev.preventDefault();
|
||||
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY, true)
|
||||
ev.preventDefault()
|
||||
}
|
||||
|
||||
htmlElement.ontouchmove = (ev: TouchEvent) => {
|
||||
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY, false);
|
||||
ev.preventDefault();
|
||||
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY, false)
|
||||
ev.preventDefault()
|
||||
}
|
||||
|
||||
htmlElement.ontouchend = (ev: TouchEvent) => {
|
||||
onPosChange(undefined, undefined, false, true);
|
||||
ev.preventDefault();
|
||||
onPosChange(undefined, undefined, false, true)
|
||||
ev.preventDefault()
|
||||
}
|
||||
|
||||
htmlElement.onmousedown = (ev: MouseEvent) => {
|
||||
onPosChange(ev.clientX, ev.clientY, true);
|
||||
ev.preventDefault();
|
||||
onPosChange(ev.clientX, ev.clientY, true)
|
||||
ev.preventDefault()
|
||||
}
|
||||
|
||||
htmlElement.onmouseup = (ev) => {
|
||||
onPosChange(ev.clientX, ev.clientY, false, true);
|
||||
ev.preventDefault();
|
||||
onPosChange(ev.clientX, ev.clientY, false, true)
|
||||
ev.preventDefault()
|
||||
}
|
||||
|
||||
htmlElement.onmousemove = (ev: MouseEvent) => {
|
||||
onPosChange(ev.clientX, ev.clientY, false);
|
||||
ev.preventDefault();
|
||||
onPosChange(ev.clientX, ev.clientY, false)
|
||||
ev.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue