gesturx 0.0.0 → 1.1.0

package/src/core/tapRecognizer.test.ts

@@ -1,542 +0,0 @@
-import { describe, it, expect, beforeEach } from "vitest";
-import { createTapRecognizer } from "./tapRecognizer";
-import { buffer, first, lastValueFrom, tap, timer } from "rxjs";
-
-const waitFor = (time: number) =>
-  new Promise((resolve) => setTimeout(resolve, time));
-
-describe("TapGestureRecognizer", () => {
-  let container = document.createElement("div");
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  function createPointerEvent({
-    type,
-    x,
-    y,
-    identifier,
-  }: {
-    type: string;
-    x: number;
-    y: number;
-    identifier: number;
-  }) {
-    const event = new PointerEvent(type, {
-      clientX: x,
-      clientY: y,
-      pointerId: identifier,
-      pointerType: "touch",
-      bubbles: true,
-    });
-
-    return event;
-  }
-
-  function sendPointerEvent({
-    type,
-    x,
-    y,
-    container,
-    identifier,
-  }: {
-    container: HTMLElement;
-    type: string;
-    x: number;
-    y: number;
-    identifier: number;
-  }) {
-    const event = createPointerEvent({
-      type,
-      x,
-      y,
-      identifier,
-    });
-
-    sendPointerEventFromEvent({ event, container });
-  }
-
-  function sendPointerEventFromEvent({
-    event,
-    container,
-  }: {
-    event: PointerEvent;
-    container: HTMLElement;
-  }) {
-    container.dispatchEvent(event);
-  }
-
-  it("should detect a single tap", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(multiTapThreshold * 2);
-    const recognizer = createTapRecognizer({ multiTapThreshold })({
-      container,
-    });
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: async () => {
-            await waitFor(1);
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values).toMatchObject([{ type: "tap", taps: 1 }]);
-  });
-
-  it("should detect a double tap", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(multiTapThreshold * 2);
-    const recognizer = createTapRecognizer({ multiTapThreshold, maxTaps: 2 })({
-      container,
-    });
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: async () => {
-            await waitFor(1);
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values).toMatchObject([{ type: "tap", taps: 2 }]);
-  });
-
-  it("should detect a triple tap", async () => {
-    const multiTapThreshold = 5;
-    const recognizer = createTapRecognizer({ multiTapThreshold, maxTaps: 3 })({
-      container,
-    });
-    const waitLongEnough$ = timer(100);
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: () => {
-            setTimeout(() => {
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerdown",
-                x: 0,
-                y: 0,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerup",
-                x: 0,
-                y: 0,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerdown",
-                x: 0,
-                y: 0,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerup",
-                x: 0,
-                y: 0,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerdown",
-                x: 0,
-                y: 0,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerup",
-                x: 0,
-                y: 0,
-              });
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values).toMatchObject([{ type: "tap", taps: 3 }]);
-  });
-
-  it("should not detect a double tap if the second tap is after threshold", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(100);
-    const recognizer = createTapRecognizer({ multiTapThreshold, maxTaps: 2 })({
-      container,
-    });
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: async () => {
-            await waitFor(1);
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-
-            await waitFor(multiTapThreshold);
-
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values.length).toBe(2);
-    expect(values).toMatchObject([
-      { type: "tap", taps: 1, srcEvent: { pointerId: 1 } },
-      { type: "tap", taps: 1, srcEvent: { pointerId: 2 } },
-    ]);
-  });
-
-  it("should not trigger tap if moved too much between down and up", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(100);
-    const recognizer = createTapRecognizer({
-      multiTapThreshold,
-      posThreshold: 5,
-    })({ container });
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: async () => {
-            await waitFor(1);
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerup",
-              x: 50,
-              y: 50,
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values.length).toBe(0);
-  });
-
-  it("should not detect a tap if the pointer is held down too long", async () => {
-    const multiTapThreshold = 5;
-    const maximumPressTime = 10;
-    const waitLongEnough$ = timer(100);
-    const recognizer = createTapRecognizer({
-      multiTapThreshold,
-      posThreshold: 5,
-      maximumPressTime,
-    })({ container });
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: async () => {
-            await waitFor(1);
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-
-            await waitFor(maximumPressTime - 5);
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-
-            await waitFor(multiTapThreshold * 2);
-
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-
-            await waitFor(maximumPressTime);
-
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values.length).toBe(1);
-    expect(values).toMatchObject([
-      { type: "tap", taps: 1, srcEvent: { pointerId: 1 } },
-    ]);
-  });
-
-  it("should ignore taps when there are simultaneous pointers active", async () => {
-    const recognizer = createTapRecognizer({})({ container });
-    const waitLongEnough$ = timer(100);
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: () => {
-            setTimeout(() => {
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerdown",
-                x: 0,
-                y: 0,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 2,
-                type: "pointerdown",
-                x: 10,
-                y: 10,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 1,
-                type: "pointerup",
-                x: 0,
-                y: 0,
-              });
-              sendPointerEvent({
-                container,
-                identifier: 2,
-                type: "pointerup",
-                x: 10,
-                y: 10,
-              });
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values.length).toBe(0); // Assuming the recognizer should ignore simultaneous taps
-  });
-
-  it("should ignore one tap if there is more than one tap", async () => {
-    const recognizer = createTapRecognizer({
-      multiTapThreshold: 10,
-      maxTaps: 1,
-    })({ container });
-    const waitLongEnough$ = timer(100);
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: async () => {
-            await waitFor(1);
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-
-            await waitFor(1);
-
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values.length).toBe(0);
-  });
-
-  it("should ignore taps when a second tap is outside of position threshold", async () => {
-    const recognizer = createTapRecognizer({
-      posThreshold: 5,
-      multiTapThreshold: 10,
-      maxTaps: Infinity,
-    })({ container });
-    const waitLongEnough$ = timer(100);
-
-    const values = await lastValueFrom(
-      recognizer.events$.pipe(
-        tap({
-          subscribe: async () => {
-            // await waitFor(1)
-
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerdown",
-              x: 0,
-              y: 0,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 1,
-              type: "pointerup",
-              x: 0,
-              y: 0,
-            });
-
-            // await waitFor(1)
-
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerdown",
-              x: 10,
-              y: 10,
-            });
-            sendPointerEvent({
-              container,
-              identifier: 2,
-              type: "pointerup",
-              x: 10,
-              y: 10,
-            });
-          },
-        }),
-        buffer(waitLongEnough$),
-        first(),
-      ),
-    );
-
-    expect(values.length).toBe(0);
-  });
-});

package/src/core/tapRecognizer.ts

@@ -1,143 +0,0 @@
-import {
-  Observable,
-  buffer,
-  debounceTime,
-  exhaustMap,
-  filter,
-  first,
-  ignoreElements,
-  map,
-  merge,
-  of,
-  share,
-  shareReplay,
-  switchMap,
-  takeUntil,
-  timer,
-  withLatestFrom,
-} from "rxjs";
-import {
-  fromFailWith,
-  fromPointerDown,
-  getPointerEvents,
-  hasAtLeastOneItem,
-  isOUtsidePosThreshold,
-  trackActivePointers,
-} from "./utils";
-import { GestureEvent } from "./types";
-
-export type TapEvent = GestureEvent & { type: "tap"; taps: number };
-
-type Options = {
-  // Maximum time in ms between multiple taps.
-  multiTapThreshold?: number;
-  // Maximum press time in ms.
-  maximumPressTime?: number;
-  maxTaps?: number;
-  posThreshold?: number;
-  failWith?: { start$: Observable<unknown> }[];
-};
-
-const mapToTapEvent = (
-  stream: Observable<[PointerEvent, ...PointerEvent[]]>,
-): Observable<TapEvent> =>
-  stream.pipe(
-    map((events) => ({
-      type: "tap",
-      srcEvent: events[0],
-      taps: events.length,
-    })),
-  );
-
-export const createTapRecognizer = ({
-  multiTapThreshold = 200,
-  maximumPressTime = 250,
-  maxTaps = 1,
-  posThreshold = 5,
-  failWith,
-}: Options = {}) => {
-  return ({
-    container,
-    afterEventReceived = (event) => event,
-  }: {
-    container: HTMLElement;
-    afterEventReceived?: (event: PointerEvent) => PointerEvent;
-  }) => {
-    const { pointerUp$, pointerLeave$, pointerCancel$, pointerMove$ } =
-      getPointerEvents({
-        container,
-        afterEventReceived,
-      });
-
-    const pointerDown$ = fromPointerDown({ container, afterEventReceived });
-    const activePointers$ = trackActivePointers({ container }).pipe(
-      shareReplay(1),
-    );
-    const hasMoreThanOneActivePointer$ = activePointers$.pipe(
-      filter((pointers) => pointers.length > 1),
-    );
-
-    const onlyOnePointer = <T>(stream: Observable<T>) =>
-      stream.pipe(
-        withLatestFrom(activePointers$),
-        filter(([, pointers]) => pointers.length === 1),
-        map(([pointer]) => pointer),
-      );
-
-    const bufferPointerDowns = (stream: Observable<PointerEvent>) =>
-      stream.pipe(
-        buffer(pointerUp$.pipe(debounceTime(multiTapThreshold))),
-        first(),
-      );
-
-    const failWith$ = fromFailWith(failWith);
-
-    const tap$ = merge(
-      pointerDown$,
-      activePointers$.pipe(ignoreElements()),
-    ).pipe(
-      onlyOnePointer,
-      exhaustMap((initialPointerEvent) => {
-        const pointerDowns$ = merge(of(initialPointerEvent), pointerDown$);
-        const subsequentPointerEvents$ = merge(
-          pointerUp$,
-          pointerLeave$,
-          pointerCancel$,
-          pointerMove$,
-        );
-        const pointerDownsBuffered$ = pointerDowns$.pipe(bufferPointerDowns);
-        const subsequentPointersOutOfPositionThreshold$ =
-          subsequentPointerEvents$.pipe(
-            filter((event) =>
-              isOUtsidePosThreshold(initialPointerEvent, event, posThreshold),
-            ),
-            first(),
-          );
-        const waitedTooLong$ = activePointers$.pipe(
-          switchMap(() => timer(maximumPressTime)),
-        );
-
-        const takeUntil$ = merge(
-          failWith$,
-          pointerCancel$,
-          pointerLeave$,
-          hasMoreThanOneActivePointer$,
-          subsequentPointersOutOfPositionThreshold$,
-          waitedTooLong$,
-        );
-
-        const tap$ = pointerDownsBuffered$.pipe(
-          filter(hasAtLeastOneItem),
-          filter((events) => events.length <= maxTaps),
-          mapToTapEvent,
-          takeUntil(takeUntil$),
-        );
-
-        return tap$;
-      }),
-      share(),
-    );
-
-    return { events$: tap$ };
-  };
-};

package/src/core/types.ts

@@ -1,3 +0,0 @@
-export type GestureEvent = {
-  srcEvent: PointerEvent;
-};