MapComplete/UI/Input/LengthInput.ts

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>;

    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;
    }

    IsValid(str: string): boolean {
        const t = Number(str)
        return !isNaN(t) && t >= 0;
    }

    protected InnerConstructElement(): HTMLElement {
        let map :  (BaseUIElement & MinimapObj)  = undefined
        let layerControl : BaseUIElement = undefined
        if (!Utils.runningFromConsole) {
            map = Minimap.createMiniMap({
                background: this.background,
                allowMoving: false,
                location: this._location,
                attribution: true,
                leafletOptions: {
                    tap: true
                }
            })
            
            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")
            .SetStyle("z-index: 1000; visibility: hidden")
        
        const element = new Combine([
            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-xl overflow-hidden")
            .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) {

        let firstClickXY: [number, number] = undefined
        let lastClickXY: [number, number] = undefined
        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;
            }

            const rect = htmlElement.getBoundingClientRect();
            // From the central part of location
            const dx = x - rect.left;
            const dy = y - rect.top;
            if (isDown) {
                if (lastClickXY === undefined && firstClickXY === undefined) {
                    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;
                }
            }

            if (firstClickXY === undefined) {
                measurementCrosshair.style.visibility = "hidden"
                return;
            }



            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;
            }
            measurementCrosshair.style.visibility = "unset"
            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 angleGeo = (angle + 270) % 360
            const measurementCrosshairInner: HTMLElement = <HTMLElement>measurementCrosshair.firstChild
            measurementCrosshairInner.style.transform = `rotate(${angleGeo}deg)`;

            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
                self.value.setData("" + geoDist)
            }

        }


        htmlElement.ontouchstart = (ev: TouchEvent) => {
            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();
        }

        htmlElement.ontouchend = (ev: TouchEvent) => {
            onPosChange(undefined, undefined, false, true);
            ev.preventDefault();
        }

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

        htmlElement.onmouseup = (ev) => {
            onPosChange(ev.clientX, ev.clientY, false, true);
            ev.preventDefault();
        }

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

}