Detecting a long press using SwitchMap, Race, and Timer techniques

Question

Detecting a long press using SwitchMap, Race, and Timer techniques

Is there a way to create a single Observable that can differentiate between a regular click (0-100ms) and a long press (at exactly 1000ms)?

pseudocode

User clicks and holds
mouseup between 0 - 100ms -> emit click
No mouseup until 1000ms -> emit long press
1. (BONUS): Emit separate event called longPressFinished (click or longPress need to be emitted in any case) after the user eventually performs a mouseup sometime after the long press event

Visual representation
time diagram

reproduction
https://codesandbox.io/s/long-press-p4el0?file=/src/index.ts

I have made some progress using:

interface UIEventResponse {
  type: UIEventType,
  event: UIEvent
}

type UIEventType = 'click' | 'longPress'

import { fromEvent, merge, Observable, race, timer } from "rxjs";
import { map, mergeMap, switchMap, take, takeUntil } from "rxjs/operators";

const clickTimeout = 100
const longPressTimeout = 1000

const mouseDown$ = fromEvent<MouseEvent>(window, "mousedown");
const mouseUp$ = fromEvent<MouseEvent>(window, "mouseup");

const click1$ = merge(mouseDown$).pipe(
  switchMap((event) => {
    return race(
      timer(longPressTimeout).pipe(mapTo(true)),
      mouseUp$.pipe(mapTo(false))
    );
  })
);

However, if the user keeps the button pressed until just before the longPress event can be emitted, it still triggers a click event.

I want to limit the click event to 0-100ms after the mousedown. If the user holds for one second, it should immediately trigger a long press. My current code only registers the regular click and ignores the long press afterwards:

const click2$: Observable<UIEventResponse> = mouseDown$.pipe(
  switchMap((event) => {
    return race<UIEventResponse>(
      timer(longPressTimeout).pipe(
        mapTo({
          type: "longPress",
          event
        })
      ),
      mouseUp$.pipe(
        takeUntil(timer(clickTimeout)),
        mapTo({
          type: "click",
          event
        })
      )
    );
  })
);

I suspect this is due to the takeUntil in the second stream of the race unsubscribing the entire race. How can I ensure the mouseup event does not override the first stream in the race so that the long press event is still triggered?

Any assistance would be greatly appreciated.

typescript rxjs observable mousedown mouseup

Answer 1

Answer №1

While this solution may not be the most elegant, it should assist you in resolving your issue; feel free to refine it to eliminate redundancy.

const click2$: Observable<UIEventResponse> = mouseDown$.pipe(
  switchMap((event) => {
    return race<UIEventResponse>(
      timer(longPressTimeout).pipe(
        mapTo({
          type: "longPress",
          event
        })
      ),
      mouseUp$.pipe(
        mapTo({
          type: "click",
          event
        }),
        timeoutWith(
          clickTimeout,
          mouseUp$.pipe(
            mapTo({
              type: "longPress",
              event
            })
          )
        )
      )
    );
  })
);

Outcome

If you press and release within 100ms, it registers as a click.

If you press and release after 100ms, it is recognized as a long press.

If you press and hold without releasing, after 2000ms it's considered a long press.

Explanation

In this code snippet, I replaced takeUntil(timer(...)) with timeoutWith in the race function, allowing for a specified timeout before treating a mouseUp event as a long press.

I opted for mapTo over map for clarity, although either can be used interchangeably.

NOTE: Ensure that the initial mapTo within the mouseUp$.pipe precedes the timeoutWith, as shown in the example, to avoid always mapping to "click".

Answer 2

While this solution may not be the most elegant, it should assist you in resolving your issue; feel free to refine it to eliminate redundancy.

const click2$: Observable<UIEventResponse> = mouseDown$.pipe(
  switchMap((event) => {
    return race<UIEventResponse>(
      timer(longPressTimeout).pipe(
        mapTo({
          type: "longPress",
          event
        })
      ),
      mouseUp$.pipe(
        mapTo({
          type: "click",
          event
        }),
        timeoutWith(
          clickTimeout,
          mouseUp$.pipe(
            mapTo({
              type: "longPress",
              event
            })
          )
        )
      )
    );
  })
);

Outcome

If you press and release within 100ms, it registers as a click.

If you press and release after 100ms, it is recognized as a long press.

If you press and hold without releasing, after 2000ms it's considered a long press.

Explanation

In this code snippet, I replaced takeUntil(timer(...)) with timeoutWith in the race function, allowing for a specified timeout before treating a mouseUp event as a long press.

I opted for mapTo over map for clarity, although either can be used interchangeably.

NOTE: Ensure that the initial mapTo within the mouseUp$.pipe precedes the timeoutWith, as shown in the example, to avoid always mapping to "click".

Answer 3

Answer №2

It appears that utilizing the zip function might be a helpful approach for addressing this issue.

Below is the code snippet:

// To begin with, two Observables are created to emit mousedown and mouseup events along with timestamps
const mouseDown_1$ = fromEvent<MouseEvent>(window, "mousedown").pipe(
  map((event) => {
    const ts = Date.now();
    return { event, ts };
  })
);
const mouseUp_1$ = fromEvent<MouseEvent>(window, "mouseup").pipe(
  map((event) => {
    const ts = Date.now();
    return { event, ts };
  })
);

// The zip function is then used to create an Observable that emits a tuple when both mouseDown_1$ and mouseUp_1$ trigger
const click3$ = zip(mouseDown_1$, mouseUp_1$).pipe(
  // Next step involves calculating the time difference between the timestamps to determine if it was a click or a longPress
  map(([down, up]) => {
    return up.ts - down.ts < clickTimeout
      ? { event: down.event, type: "click" }
      : { event: down.event, type: "longPress" };
  })
);

Answer 4

It appears that utilizing the zip function might be a helpful approach for addressing this issue.

Below is the code snippet:

// To begin with, two Observables are created to emit mousedown and mouseup events along with timestamps
const mouseDown_1$ = fromEvent<MouseEvent>(window, "mousedown").pipe(
  map((event) => {
    const ts = Date.now();
    return { event, ts };
  })
);
const mouseUp_1$ = fromEvent<MouseEvent>(window, "mouseup").pipe(
  map((event) => {
    const ts = Date.now();
    return { event, ts };
  })
);

// The zip function is then used to create an Observable that emits a tuple when both mouseDown_1$ and mouseUp_1$ trigger
const click3$ = zip(mouseDown_1$, mouseUp_1$).pipe(
  // Next step involves calculating the time difference between the timestamps to determine if it was a click or a longPress
  map(([down, up]) => {
    return up.ts - down.ts < clickTimeout
      ? { event: down.event, type: "click" }
      : { event: down.event, type: "longPress" };
  })
);

Answer 5

Answer №3

A big shoutout to @Giovanni Londero for guiding me in the right direction and assisting me in finding a solution that perfectly fits my needs!

const click$: Observable<UIEventResponse> = mouseDown$.pipe(
  switchMap((event) => {
    return race<UIEventResponse>(
      timer(longPressTimeout).pipe(
        mapTo({
          type: "longPress",
          event
        })
      ),
      mouseUp$.pipe(
        mapTo({
          type: "click",
          event
        }),
        timeoutWith(clickTimeout, mouseUp$.pipe(mapTo(undefined)))
      )
    );
  }),
  filter((val) => !!val)
);

I'm open to any suggestions on how I can enhance this code further.

Answer 6

A big shoutout to @Giovanni Londero for guiding me in the right direction and assisting me in finding a solution that perfectly fits my needs!

const click$: Observable<UIEventResponse> = mouseDown$.pipe(
  switchMap((event) => {
    return race<UIEventResponse>(
      timer(longPressTimeout).pipe(
        mapTo({
          type: "longPress",
          event
        })
      ),
      mouseUp$.pipe(
        mapTo({
          type: "click",
          event
        }),
        timeoutWith(clickTimeout, mouseUp$.pipe(mapTo(undefined)))
      )
    );
  }),
  filter((val) => !!val)
);

I'm open to any suggestions on how I can enhance this code further.

Detecting a long press using SwitchMap, Race, and Timer techniques

Answer №1

Answer №2

Answer №3

Similar questions

Using :global() and custom data attributes to apply styles to dynamically added classes

Update the class attributes to a JSON string encoding the new values

Firebase is storing object values as 'undefined'

Tips for preventing VSCode TypeScript files from importing from unauthorized folders?

TS7016: No declaration file was found for the module named 'rxjs'

I am facing an issue with my Angular 11 CLI application while trying to set it up with Jest. The specific error message I am encountering is: "TypeError: Cannot read property

Passing data through Angular2 router: a comprehensive guide

Using the async pipe with the ngIf directive

Angular 4 encounters a hiccup when a mistake in the XHR request brings a halt to a

Converting an array of objects to an array of JSON objects in TypeScript

Ordering an array using Typescript within React's useEffect()

Steps to display a modal dialog depending on the category of the label

The Typescript error "Attempting to call a function that does not have any callable signatures.(2349)"

Ensure the most recently expanded item appears at the top of the TreeView by updating to Mui version

Angular 2's JSON tube is malfunctioning

Using Typescript for AngularJS bindings with ng.IComponentController

What is the best approach to retrieve all user information using React with TypeScript and the Redux Toolkit?

Get a specific attribute of an object instead of directly accessing it

What are the steps for creating a custom repository with TypeORM (MongoDB) in NestJS?

Exclude the key-value pair for any objects where the value is null