RXJS: захват событий перетаскивания не работает после первого перетаскивания

Question

У меня есть этот фрагмент кода, где я пытаюсь захватить все события перетаскивания.Этот код работает только для первого перетаскивания, а остановка не будет работать для последовательных перетаскиваний.

Это потому, что takeUntil отменяет внешнюю наблюдаемую?Как я могу заставить код работать.

const { Observable, fromEvent } = rxjs;
const { takeUntil, switchMap } = rxjs.operators;

const mouseups = fromEvent(document.querySelector('.container'), 
'mouseup'); 
const mousedowns = fromEvent(document.querySelector('.container'), 
'mousedown');
const mousemoves = fromEvent(document.querySelector('.container'), 
'mousemove');

const source = mousedowns.pipe(
  switchMap(e => mousemoves),
  takeUntil(mouseups)
);

source.subscribe(e => console.log(e));

Answer 1

Вам нужно поместить takeUntil внутри switchMap, например:

const source = mousedowns.pipe(
  switchMap(e => mousemoves.pipe(
    takeUntil(mouseups)
  ))
);

С размещенным внутри takeUntil составная наблюдаемая будет отписываться от mousemoves, наблюдаемой наmouseup событие, но останется подписанным на наблюдаемую mousedown.

Помещенный снаружи, он отменит подписку на mousedown, наблюдаемую при событии mouseup - поэтому он перестает отвечать после первогосопротивление.