use-control/lib/mouseStream.js

A powerful set of hooks for elegantly handling keyboard, mouse and gamepad input (soon)

import React from 'react';
import { fromEvent, identity } from 'rxjs';
import { distinctUntilChanged, map, pairwise, sampleTime, share } from 'rxjs/operators';
var mouseMove$ = fromEvent(document, 'mousemove').pipe(share());
export var mouseDown$ = fromEvent(window, 'pointerdown').pipe(share());
export var mouseUp$ = fromEvent(window, 'pointerup').pipe(share());
export var MOUSEBUTTONS = {
    0: 'none',
    1: 'left',
    2: 'right',
    4: 'middle',
    // 8: 4th button (typically the "Browser Back" button)
    // 16 : 5th button (typically the "Browser Forward" button)
};
export var MOUSEBUTTONS_SAFARI = {
    0: 'none',
    1: 'left',
    2: 'middle',
    3: 'right',
};
export function whichButtonPressed(ev) {
    return !ev.buttons ? MOUSEBUTTONS_SAFARI[ev.which] : MOUSEBUTTONS[ev.buttons];
}
export var mousePos$ = mouseMove$.pipe(map(function (ev) { return [ev.clientX, ev.clientY]; }), distinctUntilChanged(), share());
export var mousePosDelta$ = mousePos$.pipe(pairwise(), map(function (_a) {
    var _b = _a[0], ax = _b[0], ay = _b[1], _c = _a[1], bx = _c[0], by = _c[1];
    return [bx - ax, by - ay];
}), share());
export var mousePosNormalised$ = mousePos$.pipe(map(function (_a) {
    var x = _a[0], y = _a[1];
    return [
        x / document.documentElement.clientWidth,
        y / document.documentElement.clientHeight,
    ];
}), share());
// axis isolated streams
export var mousePosX$ = mouseMove$.pipe(map(function (ev) { return ev.clientX; }), distinctUntilChanged(), share());
export var mousePosDeltaX$ = mousePosX$.pipe(pairwise(), map(function (_a) {
    var ax = _a[0], bx = _a[1];
    return bx - ax;
}), share());
export var mousePosNormalisedX$ = mousePosX$.pipe(map(function (x) { return x / document.documentElement.clientWidth; }), share());
export var mousePosY$ = mouseMove$.pipe(map(function (ev) { return ev.clientY; }), distinctUntilChanged(), share());
export var mousePosDeltaY$ = mousePosY$.pipe(pairwise(), map(function (_a) {
    var ay = _a[0], by = _a[1];
    return by - ay;
}), share());
export var mousePosNormalisedY$ = mousePosY$.pipe(map(function (y) { return y / document.documentElement.clientHeight; }), share());
export function useMouseMove(sink, throttleMs) {
    React.useEffect(function () {
        var s = mousePos$.pipe(throttleMs ? sampleTime(throttleMs || 0) : identity).subscribe(sink);
        return function () { return s.unsubscribe(); };
    }, [sink, throttleMs]);
}
export function useMouseMoveNormalised(sink, throttleMs) {
    React.useEffect(function () {
        var s = mousePos$
            .pipe(throttleMs ? sampleTime(throttleMs || 0) : identity, map(function (_a) {
            var x = _a[0], y = _a[1];
            return [
                x / document.documentElement.clientWidth,
                y / document.documentElement.clientHeight,
            ];
        }))
            .subscribe(sink);
        return function () { return s.unsubscribe(); };
    }, [sink, throttleMs]);
}
export function useMouseDelta(sink, throttleMs) {
    React.useEffect(function () {
        var s = mousePosDelta$
            .pipe(throttleMs ? sampleTime(throttleMs || 0) : identity)
            .subscribe(sink);
        return function () { return s.unsubscribe(); };
    }, [sink, throttleMs]);
}
//# sourceMappingURL=mouseStream.js.map