Как получить наблюдаемые состояния кнопок в 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 (кнопка мыши нажата), и мышь покидает кнопку, состояние должно измениться на normal.Когда мышь снова входит в кнопку без отпускания кнопки мыши, состояние должно быть active.Если кнопка мыши была отпущена, когда она находилась вне кнопки, состояние должно быть hover.

Я просто не могу понять это, не полагаясь на отдельную переменную состояния для удержания «активного» состояния.

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