How would I cancel a click event if it was following a drag event using Bacon.js?

Question

So I have some event streams:

let mouseUps = $(window)
  .asEventStream('mouseup');

let mouseDowns = $(window)
  .asEventStream('mousedown');

let mouseMoves = $(window)
  .asEventStream('mousemoves');

let drags = mouseDowns
  .flatMapLatest(() => mouseMoves.takeUntil(mouseUps));

let clicks = $(window)
  .asEventStream('click')
  .onValue(() => doThing());

I'd like to ignore clicks that get triggered right after a drag ends. I feel like there has go to be a fairly simple way to do this, but I'm still struggling with some of the core concepts.

Answer 1

The solution is to create a property using stream.awaiting() that can be used to filter out the click after dragging.

var btn = $('#btn');
var mouseUps = btn.asEventStream('mouseup');
var mouseDowns = btn.asEventStream('mousedown');
var mouseMoves = btn.asEventStream('mousemove');
var drags = mouseDowns.flatMapLatest(function () {
    return mouseMoves.takeUntil(mouseUps);
});

var clicks = btn.asEventStream('click');
var isDraggingStarted = drags.awaiting(mouseDowns);

clicks.filter(isDraggingStarted.not()).onValue(doThing);

An example can be found here: http://jsfiddle.net/a128jhxb/1/