Do some action after takeUntil

Question

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.

Answer 1

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