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

Add quickswitch for lengthinput

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-06-19 19:10:56 +02:00
parent 470e9acc64
commit 56be8f9b25
3 changed files with 25 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

20
UI/Input/LengthInput.ts
View file

@ -8,6 +8,7 @@ import {GeoOperations} from "../../Logic/GeoOperations";
import Minimap, {MinimapObj} from "../Base/Minimap";
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch";
import BaseUIElement from "../BaseUIElement";
import CR = Mocha.reporters.Base.cursor.CR;
/**
@ -61,27 +62,28 @@ export default class LengthInput extends InputElement<string> {
})
}
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")
.SetStyle("z-index: 1000; visibility: hidden")
const element = new Combine([
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")
.SetStyle("z-index: 1000; visibility: hidden"),
crosshair,
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-3xl overflow-hidden")
.SetClass("relative block bg-white border border-black rounded-xl overflow-hidden")
.ConstructElement()
this.RegisterTriggers(element, map?.leafletMap)
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>) {
private RegisterTriggers(htmlElement: HTMLElement, leafletMap: UIEventSource<L.Map>, measurementCrosshair: HTMLElement) {
let firstClickXY: [number, number] = undefined
let lastClickXY: [number, number] = undefined
@ -123,7 +125,7 @@ export default class LengthInput extends InputElement<string> {
}
const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement
// const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement
const measurementCrosshairInner: HTMLElement = <HTMLElement>measurementCrosshair.firstChild
if (firstClickXY === undefined) {