MapComplete/src/Utils/dragDetection.ts

export function dragDetection(htmlElement: HTMLElement, callback: () => {}) {

    let isDown = false
    let threshold = 5
    let start = null

    htmlElement.addEventListener("pointerdown", (e) => {
        isDown = true
        start = { x: e.clientX, y: e.clientY }
    })

    htmlElement.addEventListener("pointermove", (e) => {
        if (!isDown || !start) return
        const dx = e.clientX - start.x
        const dy = e.clientY - start.y
        if (Math.hypot(dx, dy) > threshold) {
            callback()
            isDown = false
        }
    })

    htmlElement.addEventListener("pointerup", () => {
        isDown = false
        start = null
    })

    htmlElement.addEventListener("pointerleave", () => {
        isDown = false
        start = null
    })

    return {
        destroy: () => {
        },
    }
}