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

110
UI/Input/DirectionInput.ts
View file

@ -1,120 +1,118 @@
import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
import BaseUIElement from "../BaseUIElement";
import {FixedUiElement} from "../Base/FixedUiElement";
import {Utils} from "../../Utils";
import Loc from "../../Models/Loc";
import Minimap from "../Base/Minimap";
import { InputElement } from "./InputElement"
import { UIEventSource } from "../../Logic/UIEventSource"
import Combine from "../Base/Combine"
import Svg from "../../Svg"
import BaseUIElement from "../BaseUIElement"
import { FixedUiElement } from "../Base/FixedUiElement"
import { Utils } from "../../Utils"
import Loc from "../../Models/Loc"
import Minimap from "../Base/Minimap"
/**
* Selects a direction in degrees
*/
export default class DirectionInput extends InputElement<string> {
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _location: UIEventSource<Loc>;
private readonly value: UIEventSource<string>;
private background;
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
private readonly _location: UIEventSource<Loc>
private readonly value: UIEventSource<string>
private background
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
}
GetValue(): UIEventSource<string> {
return this.value;
return this.value
}
IsValid(str: string): boolean {
const t = Number(str);
return !isNaN(t) && t >= 0 && t <= 360;
const t = Number(str)
return !isNaN(t) && t >= 0 && t <= 360
}
protected InnerConstructElement(): HTMLElement {
let map: BaseUIElement = new FixedUiElement("")
if (!Utils.runningFromConsole) {
map = Minimap.createMiniMap({
background: this.background,
allowMoving: false,
location: this._location
location: this._location,
})
}
const element = new Combine([
Svg.direction_stroke_svg().SetStyle(
`position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform:rotate(${this.value.data ?? 0}deg);`)
Svg.direction_stroke_svg()
.SetStyle(
`position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform:rotate(${
this.value.data ?? 0
}deg);`
)
.SetClass("direction-svg relative")
.SetStyle("z-index: 1000"),
map.SetStyle(
`position: absolute;top: 0;left: 0;width: 100%;height: 100%;`)
map.SetStyle(`position: absolute;top: 0;left: 0;width: 100%;height: 100%;`),
])
.SetStyle("width: min(100%, 25em); height: 0; padding-bottom: 100%") // A bit a weird CSS , see https://stackoverflow.com/questions/13851940/pure-css-solution-square-elements#19448481
.SetClass("relative block bg-white border border-black overflow-hidden rounded-full")
.ConstructElement()
this.value.addCallbackAndRunD(rotation => {
this.value.addCallbackAndRunD((rotation) => {
const cone = element.getElementsByClassName("direction-svg")[0] as HTMLElement
cone.style.transform = `rotate(${rotation}deg)`;
cone.style.transform = `rotate(${rotation}deg)`
})
this.RegisterTriggers(element)
element.style.overflow = "hidden"
element.style.display = "block"
return element;
return element
}
private RegisterTriggers(htmlElement: HTMLElement) {
const self = this;
const self = this
function onPosChange(x: number, y: number) {
const rect = htmlElement.getBoundingClientRect();
const dx = -(rect.left + rect.right) / 2 + x;
const dy = (rect.top + rect.bottom) / 2 - y;
const angle = 180 * Math.atan2(dy, dx) / Math.PI;
const angleGeo = Math.floor((450 - angle) % 360);
const rect = htmlElement.getBoundingClientRect()
const dx = -(rect.left + rect.right) / 2 + x
const dy = (rect.top + rect.bottom) / 2 - y
const angle = (180 * Math.atan2(dy, dx)) / Math.PI
const angleGeo = Math.floor((450 - angle) % 360)
self.value.setData("" + angleGeo)
}
htmlElement.ontouchmove = (ev: TouchEvent) => {
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY);
ev.preventDefault();
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY)
ev.preventDefault()
}
htmlElement.ontouchstart = (ev: TouchEvent) => {
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY);
onPosChange(ev.touches[0].clientX, ev.touches[0].clientY)
}
let isDown = false;
let isDown = false
htmlElement.onmousedown = (ev: MouseEvent) => {
isDown = true;
onPosChange(ev.clientX, ev.clientY);
ev.preventDefault();
isDown = true
onPosChange(ev.clientX, ev.clientY)
ev.preventDefault()
}
htmlElement.onmouseup = (ev) => {
isDown = false;
ev.preventDefault();
isDown = false
ev.preventDefault()
}
htmlElement.onmousemove = (ev: MouseEvent) => {
if (isDown) {
onPosChange(ev.clientX, ev.clientY);
onPosChange(ev.clientX, ev.clientY)
}
ev.preventDefault();
ev.preventDefault()
}
}
}
}