如何有条件地分支 rxjs 流？

Question

我正在尝试模拟任何图像编辑器中的“画笔”功能。

我有以下流：

• $pointerDown: 指针被按下
• $pointerUp: 指针向上
• $position: 刷子的位置
• $escape: 退出键被按下

我想做的事

当用户拖动鼠标时，进行临时计算。如果鼠标已抬起，则提交这些更改。如果按下转义键，则不要提交这些更改。

我目前处理的是第一种情况：

$pointerDown.pipe(
   r.switchMap(() =>
       $position.pipe(
           r.throttleTime(150),
           r.map(getNodesUnderBrush),
           r.tap(prepareChanges),
           r.takeUntil($pointerUp),
           r.finalize(commitBrushStroke))
)).subscribe()

如何以两种不同的方式结束流？这个惯用的 rxjs 是什么？

谢谢

Answer 1

如果我理解正确，当用户按下转义键时，整个流应该被取消订阅，这样，当用户再次开始用鼠标指针向下拖动时，流就会再次开始发出。

如果是这种情况，您可能想尝试switchMap使用$escapeand merge，换句话说，像这样

const drag$ = $pointerDown.pipe(
   r.switchMap(() =>
       $position.pipe(
           r.throttleTime(150),
           r.map(getNodesUnderBrush),
           r.tap(prepareChanges),
           r.takeUntil($pointerUp),
           r.finalize(commitBrushStroke))
))
const brush$ = $escape.pipe(
   startWith({}),  // emit any value at start just to allow the stream to start
   switchMap(() => drag$)
);
const stopBrush$ = $escape.pipe(tap(() => // do stuff to cancel));
merge(brush$, stopBrush$).subscribe();

整个想法是，任何时间$escape发出，之前的订阅都会drag$被取消订阅并开始新的订阅。同时可以执行任何取消需要取消的逻辑。

我无法测试这个东西，所以我希望我没有忘记一些东西。