How to react on a takeUntil stream in baconJS

Question

I have 3 event streams for mouseDown, mouseUp and mouseMove. This works so far that when a user not hit the alt Key it does something on mouse move until mouse up.

this.mouseDown
   .filter((e) =>!e.altKey)
   .flatMap(() => this.mouseMove.takeUntil(this.mouseUp))
   .onValue((e) => this.setState({previewEndPoint: this.getNearestPoint(e)}));

My question is how can I react on the mouse up event in this case?

OlliM · Accepted Answer · 2014-10-17T08:45:20.757

2

Setting a variable in doActionand using it elsewhere is really bad sign and unnecessary. I refactored your code to use combined streams instead.

var moveStart = this.mousedown
  .filter((e) =>!e.altKey && !e.metaKey)    

var move = moveStart.flatMap((e) =>
    this.mousemove
        .takeUntil(this.mouseup)
        .startWith(this.getNearestPoint(e))
  );

var startPoint = moveStart.map((e) => this.getNearestPoint(e))

var endPoint = move.map((e) => this.getNearestPoint(e))

var preview = startPoint.combine(endPoint, (start, end) => {
    preview: true,
    startPoint: start,
    previewEndPoint: end
})

preview.onValue((state) => this.setState(state));

move.onEnd(this.endLine.bind(this));

edited Oct 17 '14 at 08:45

answered Oct 16 '14 at 12:37

OlliM

7,023
1
36
47

Thanks, btw there is a minor bug, I think it should be: `startPoint: start` – Andreas Köberle Oct 16 '14 at 12:53
And for some reasons the onEnd function is not called anymore – Andreas Köberle Oct 16 '14 at 13:10
…and in the last line, you probably meant `.bind(this)` – Bergi Oct 16 '14 at 13:25
Works now, was some mess up in other parts of my code – Andreas Köberle Oct 16 '14 at 13:34
@AndreasKöberle in the future I recommend creating a jsfiddle with your code, it's quite hard to get everything right when you can't actually run the code :) – OlliM Oct 16 '14 at 13:37
Another problem is that trough combining the streams on the second mouse down the old end point is used until the mouse was moved again. – Andreas Köberle Oct 16 '14 at 21:36
You can fix the old end point problem by forcing a value in the move stream by adding [.startWith](https://github.com/baconjs/bacon.js#stream-startwith) inside the flatMap. I'll edit the code to fix this. – OlliM Oct 17 '14 at 08:43

score 1 · Answer 2 · answered Oct 16 '14 at 12:16

I had to create a stream that ist started by mouse down and is converted into the mouse move event using flatMap which will then stop on mouse up. Then I have just to listen to onValue and onEnd

var move = this.mousedown
  .filter((e) =>!e.altKey && !e.metaKey)
  .doAction((e) => startPoint = this.getNearestPoint(e))
  .flatMap(() => this.mousemove.takeUntil(this.mouseup));

move.onValue((e) => this.setState({
  preview: true,
  startPoint: startPoint,
  previewEndPoint: this.getNearestPoint(e)
}));

move.onEnd(this.endLine.bind);

How to react on a takeUntil stream in baconJS

2 Answers2