⚡ Improve window.setDraggableRegion and add options to allow native-feeling behavior.

[CosmoMyzrailGorynych]

Closes neutralinojs/neutralinojs#1301

• Fixes implementation errors so that the pointer is always captured after traveling N pixels
• Adds configuration options to tweak the behavior for bulletproof, native-looking drag behavior. Fully backwards-compatible.
• Fixes one TODO: comment.
• Also fixes explicit any for the changed methods.

New call signature: setDraggableRegion(domElementOrId: string | HTMLElement, options: DraggableRegionOptions = {})

DraggableRegionOptions is

export type DraggableRegionOptions = {
    /**
     * If set to `true`, the region will always capture the pointer,
     * ensuring dragging doesn't break on fast pointer movement.
     * Note that it prevents child elements from receiving any pointer events.
     * Defaults to `false`.
     */
    alwaysCapture?: boolean;
    /**
     * Minimum distance between cursor's starting and current position
     * after which dragging is started. This helps prevent accidental dragging
     * while interacting with child elements.
     * Defaults to `10`. (In pixels.)
     */
    dragMinDistance?: number;
}

Before:

Yellow circle indicates mouse clicks. Note how the window misbehaves after releasing the mouse button outside the window.

After, with no options:

Better capture overall but can still break it with flicking near the window's edge.

I can't accept mediocrity, so I added an option to capture the pointer immediately when pressing the drag area. This disables any pointer events on children elements and thus requires layout changes for custom titlebars, so it is opt-in only.

After, with alwaysCapture: true

Best results: can't break it. Flicking near the edges still captures the pointer.

[shalithasuranga]

Thanks so much for sending this improvement with a detailed explanation with previews 🎉

Thanks so much for helping us to improve Neutralinojs. Would you like to display your name and GitHub profile link on: https://neutralino.js.org/docs/contributing/committers ?

We often update this list with active contributors 🎉 Thanks :)

[CosmoMyzrailGorynych]

Thanks so much for helping us to improve Neutralinojs. Would you like to display your name and GitHub profile link on: https://neutralino.js.org/docs/contributing/committers ?

Should I make a PR? x)

[shalithasuranga]

Thanks so much for helping us to improve Neutralinojs. Would you like to display your name and GitHub profile link on: https://neutralino.js.org/docs/contributing/committers ?

Should I make a PR? x)

Sure 🎉 -- thanks 🎉