如何对baconJS中的takeUntil流做出反应

Question

我有3个事件流，分别为mouseDown，mouseUp和mouseMove。 到目前为止，这种方法一直有效，以至于当用户没有按下alt键时，它会在鼠标移动之前执行某些操作，直到鼠标向上移动为止。

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

我的问题是在这种情况下如何应对鼠标上移事件？

Answer 1

在doAction设置变量并在其他地方使用它确实是一个不好的信号，而且没有必要。 我将您的代码重构为使用组合流。

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));

Answer 2

我必须创建一个流，该流由鼠标按下开始，并使用flatMap转换为鼠标移动事件，然后将鼠标停下。 然后我只需要听onValue和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);