Can someone explain to me when the mouse move observable is activated in this example from RxJS on GitHub? What exactly triggers it to start sampling the mousemove event?
I initially thought that subscribing would begin the sequences for all observables in mousedrag, but it doesn't appear to be the case. There are mousemove events happening before mousedown, but they don't seem to be utilized.
var dragTarget = document.getElementById('dragTarget');
// Obtaining the three main events
var mouseup = Rx.Observable.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.Observable.fromEvent(document, 'mousemove');
var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');
var mousedrag = mousedown.flatMap(function (md) {
// calculating offsets on mouse down
var startX = md.offsetX, startY = md.offsetY;
// Calculating delta with mousemove until mouseup
return mousemove.map(function (mm) {
mm.preventDefault();
return {
left: mm.clientX - startX,
top: mm.clientY - startY
};
}).takeUntil(mouseup);
});
// Updating position
var subscription = mousedrag.subscribe(function (pos) {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
I'd appreciate any insights on this matter.