rxjs - 如何在 RxJs 中获得可观察的按钮状态？

Question

我有以下可观察的：

mouseOver$      // fired when mouse enters button
mouseOut$       // fired when mouse leaves button
mouseDown$      // fired when mouse button is pressed (over button)
globalMouseUp$  // fired when mouse button is released (anywhere)

我想要达到的目标如下：

mouseOver: state changes to 'hover'
mouseOut: state changes to 'normal'
mouseDown: state changes to 'active'
gloalMouseUp: state changes to 'normal'

问题：

如果状态为active(mousebutton is down) 并且鼠标离开按钮，则状态应更改为normal。当鼠标再次进入按钮而没有释放鼠标按钮时，状态应该是active。如果在按钮外释放鼠标按钮，则状态应为hover。

如果不依赖单独的状态变量来保持“活动”状态，我无法弄清楚这一点。

标签： rxjs

Answer 1

已经拿到了

let active$ = merge(
  mouseDown$.pipe(map(() => true)),
  globalMouseUp$.pipe(map(() => false))
).pipe(startWith(false));

let hover$ = merge(
  mouseOver$.pipe(map(() => true)),
  mouseOut$.pipe(map(() => false))
);

let state$ = combineLatest(active$, hover$).pipe(
  map(([active, hover]) => hover ? (active ? 'active' : 'hover') : 'normal')
)