如何對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);