Reactive mouse tracking for Gesture Recognition

When building more sophisticated gesture recognizer, you need additional context in the mouse move events like the start and previous point. This RxJS code builds a Reactive Stream that provides you all three points (start, previous, current). You can build more advanced operators based on this simple reactive mouse tracking code. See the JSFiddle link below the embedded example for the full code.

function mapMouseEvent(e) { 
    var deltaY = e.currentTarget.offsetTop; 
    var deltaX = e.currentTarget.offsetLeft;

    return [e.clientX - deltaX, e.clientY - deltaY];

var svg = document.getElementById('svgroot')
var viewMouseDown = Rx.DOM.mousedown(svg);
var viewMouseMove = Rx.DOM.mousemove(svg);
var viewMouseUp = Rx.DOM.mouseup(svg);

var movingMouse = viewMouseDown 
.flatMap( function( e ) { 
        var move =

            function(curr, prev ) { 
                return { prev:prev, curr: curr} 
         .takeUntil( viewMouseUp );
    function(down, move) 
        return { start:down, current:move.curr, prev: move.prev}

movingMouse.subscribe( function( val ) {

    var startPoint = val.start
    var currentPoint = val.current
    var previousPoint = val.prev

See the JSFiddle for a full example