mapcomplete/UI/Input/DirectionInput.ts

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

    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
    }

    IsValid(str: string): boolean {
        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,
            })
        }

        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);`
                )
                .SetClass("direction-svg relative")
                .SetStyle("z-index: 1000"),
            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) => {
            const cone = element.getElementsByClassName("direction-svg")[0] as HTMLElement
            cone.style.transform = `rotate(${rotation}deg)`
        })

        this.RegisterTriggers(element)
        element.style.overflow = "hidden"
        element.style.display = "block"

        return element
    }

    private RegisterTriggers(htmlElement: HTMLElement) {
        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)
            self.value.setData("" + angleGeo)
        }

        htmlElement.ontouchmove = (ev: TouchEvent) => {
            onPosChange(ev.touches[0].clientX, ev.touches[0].clientY)
            ev.preventDefault()
        }

        htmlElement.ontouchstart = (ev: TouchEvent) => {
            onPosChange(ev.touches[0].clientX, ev.touches[0].clientY)
        }

        let isDown = false

        htmlElement.onmousedown = (ev: MouseEvent) => {
            isDown = true
            onPosChange(ev.clientX, ev.clientY)
            ev.preventDefault()
        }

        htmlElement.onmouseup = (ev) => {
            isDown = false
            ev.preventDefault()
        }

        htmlElement.onmousemove = (ev: MouseEvent) => {
            if (isDown) {
                onPosChange(ev.clientX, ev.clientY)
            }
            ev.preventDefault()
        }
    }
}