how to handle multiple events with fromevent in order

Question

I want to implement a progress bar with rxjs,so I need to get the position of mousedown and the position of mousemove after mousedown.here is the test code I write.

useEffect(() => {
const start$ = fromEvent(divRef.current, 'mousedown').pipe(
  tap(() => console.log('start')),
  map(event => [event.clientX, event.clientY])
)
const move$ = fromEvent(divRef.current, 'mousemove').pipe(
  tap(() => console.log('move')),
  map(event => [event.clientX, event.clientY])
)
const end$ = fromEvent(divRef.current, 'mouseup')
const drag$ = concat(start$, move$).pipe(takeUntil(end$), repeat())
const subscription = drag$.subscribe(([newX, newY]) => {
  setX(newX)
  setY(newY)
})
return () => {
  subscription.unsubscribe()
}

}) what I think is that when I click down the mouse,I will subscribe the Start$,and then if I move,I will subscribe the move$.But the Phenomenon is quiet different from what I thought.The log in the console just output 'start'. enter image description here

as you can see from the picture,when I click down and move,I just can subscribe the start$,if I use the concat method wrong.Hope someone can do me a favor.

Answer 1

I assume you want the mouse movements in the order they happen. Here is a small snippet:

import './style.css';

import {
   tap,also 
   fromEvent,
   takeUntil,
   exhaustMap,
} from 'rxjs';

const mouseDown$ = fromEvent(document, 'mousedown');
const mouseMove$ = fromEvent(document, 'mousemove');
const mouseUp$ = fromEvent(document, 'mouseup');

mouseDown$
   .pipe(
        tap(console.log),
        exhaustMap((start) =>
        mouseMove$.pipe(tap(console.log), takeUntil(mouseUp$))
    )
  )
  .subscribe(); 

Please have a look here: Stackblitz