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

CosmoMyzrailGorynych commented 1 month ago

Closes https://github.com/neutralinojs/neutralinojs/issues/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:

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

After, with no options:

toolbarFixUnaggressive 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

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

CosmoMyzrailGorynych commented 1 month ago

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 commented 1 month ago

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 :tada: -- thanks :tada:

neutralinojs / neutralino.js

:zap: Improve window.setDraggableRegion and add options to allow native-feeling behavior. #120