Сделайте некоторое действие после takeUntil

Question

Я слушаю mousemove событие до mouseup.Я делаю это с takeUntil.

Мой код:

    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);
                }
            )
        );

У меня есть одна переменная isDragging: boolean, которую я хочу установить на false, когда mouseup происходит, например, после takeUntil в моем коде.Это должно быть просто, но я не могу понять это.

Answer 1

Вы можете использовать объединить последние по onMouseMove $ и onMouseUp $ и использовать тему завершения в 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>

Answer 2

Вы можете попробовать что-то вроде этого

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);
            }
        )
    );

Идея состоит в том, чтобы добавить pipe с оператором tap к onMouseUp, используемому в качестве параметра для takeUntil

Answer 3

Вам необходимо подписаться

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 заканчивает наблюдаемое, ничего не происходит после takeUntil.