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

const view = document.getElementById('carousel');

const start$ = fromEvent(view, 'mousedown');
const move$ = fromEvent(view, 'mousemove');
const end$ = fromEvent(view, 'mouseup');

const drag$ = start$.pipe(
  // Observable을 평탄하게 합치기 위해 mergeMap을 사용할 수 있으나
  // start$에서 데이터가 발생할 때마다 move$가 생성되므로 기존 데이터를 자동으로 종료하기 위해 switchMap을 사용한다.
  switchMap(start => move$.pipe(
    // takeUntil에 전달된 end$ Observable에서 데이터가 발생하는 순간 대상의 상태를 종료 처리하고 자동으로 구독을 해제한다.
    takeUntil(end$),
  )),
);

drag$.subscribe(e => console.log(e));

// MouseEvent {isTrusted: true, screenX: 1074, screenY: 551, clientX: 163, clientY: 106, …}
// MouseEvent {isTrusted: true, screenX: 1101, screenY: 548, clientX: 190, clientY: 104, …}
// MouseEvent {isTrusted: true, screenX: 1130, screenY: 548, clientX: 219, clientY: 104, …}
// MouseEvent {isTrusted: true, screenX: 1163, screenY: 548, clientX: 252, clientY: 104, …}