CODEWITHSUNDEEP
rxjs
Runtime Terror
Runtime Terror

Reputation: 6752

Do some action after takeUntil

I'm listening to mousemove event until mouseup. I'm doing it with takeUntil.

My code:

    const onMouseMove = fromEvent(window, "mousemove");
    const onMouseUp = fromEvent(window, "mouseup");

    const resizePanel = onMouseMove
        .pipe(
            takeUntil(onMouseUp),
            map(
                (event: MouseEvent) => {
                    this.isDragging = true;
                    this.resizePanel(event.clientX);
                }
            )
        );

I have one variable isDragging: boolean, which I want to set to false, when mouseup occurs, e.g. after takeUntil in my code. It must be simple, but I can't figure it out.

Upvotes: 4

Views: 1545

Answers (3)

Picci
Picci

Reputation: 17762

You may want to try something like this 

const onMouseMove = fromEvent(window, "mousemove");
const onMouseUp = fromEvent(window, "mouseup");

const resizePanel = onMouseMove
    .pipe(
        takeUntil(onMouseUp.pipe(tap(() => this.isDragging = false))),
        map(
            (event: MouseEvent) => {
                this.isDragging = true;
                this.resizePanel(event.clientX);
            }
        )
    );

The idea is to add a pipe with tap operator to onMouseUp used as parameter for takeUntil

Upvotes: 2

Adrian Brand
Adrian Brand

Reputation: 21638

You could use combineLatest on onMouseMove$ and onMouseUp$ and use a finalise subject in takeUntil.

const { fromEvent, combineLatest, Subject } = rxjs;
const { takeUntil } = rxjs.operators;

const onMouseMove$ = fromEvent(window, "mousemove");
const onMouseUp$ = fromEvent(document, "mouseup");

const finalise = new Subject();

combineLatest(onMouseMove$, onMouseUp$).pipe(takeUntil(finalise)).subscribe(([onMouseMove, onMouseUp]) => {
  if (onMouseUp) {
    console.log('mouse up');
    finalise.next(true);
    finalise.complete();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21638

You need to subscribe

const { fromEvent } = rxjs;

const onMouseUp$ = fromEvent(document, "mouseup");

onMouseUp$.subscribe(onMouseUp => {
  console.log('mouse up');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>

takeUntil ends an observable, nothing happens after takeUntil.

Upvotes: 0

Related Questions