gesturx 0.0.0

package/.github/workflows/publish.yml

@@ -0,0 +1,17 @@
+on:
+  push:
+    branches: main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      - run: npm ci
+      - run: npm test
+      - uses: JS-DevTools/npm-publish@v3
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

package/.prettierrc.json

@@ -0,0 +1 @@
+{}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Maxime
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# gesturx
+
+Gesture recognizer using rxjs

package/eslint.config.js

@@ -0,0 +1,9 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+);

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>gesturx</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gesturx",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "prettier --write . && eslint --fix .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@types/node": "^20.12.7",
+    "@vitest/coverage-v8": "^1.5.0",
+    "eslint": "^8.57.0",
+    "happy-dom": "^14.7.1",
+    "prettier": "3.2.5",
+    "rollup-plugin-node-externals": "^7.1.1",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.7.0",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.8.3",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^1.5.0"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.1"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/core/manager.ts

@@ -0,0 +1,45 @@
+import { map, merge } from "rxjs";
+import { createTapRecognizer } from "./tapRecognizer";
+import { getCenterFromEvent } from "./utils";
+
+export const createManager = ({
+  container,
+  afterEventReceived = (event) => event,
+  recognizers,
+}: {
+  container: HTMLElement;
+  recognizers: ReturnType<typeof createTapRecognizer>[];
+  afterEventReceived?: (event: PointerEvent) => PointerEvent;
+}) => {
+  // user api
+  // const dragRecognizer = createPanRecognizer();
+  // const singleTapRecognizer = createTapRecognizer({
+  //   maxTaps: 2,
+  //   failWith: [dragRecognizer],
+  // });
+  // const pinchRecognizer = createPinchRecognizer();
+
+  // internal api
+  // dragRecognizer.initialize({ container, afterEventReceived });
+
+  // const recognizers = [
+  //   singleTapRecognizer({ container, afterEventReceived }),
+  //   // pinchRecognizer({ container, afterEventReceived }),
+  //   // dragRecognizer,
+  // ]
+
+  const recognizerInstances = recognizers.map((recognizer) =>
+    recognizer({ container, afterEventReceived }),
+  );
+
+  const events$ = merge(
+    ...recognizerInstances.map((recognizer) => recognizer.events$),
+  ).pipe(
+    map((event) => ({
+      ...event,
+      center: getCenterFromEvent(event.srcEvent),
+    })),
+  );
+
+  return { events$ };
+};

package/src/core/tapRecognizer.test.ts

@@ -0,0 +1,542 @@
+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

@@ -0,0 +1,143 @@
+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

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

package/src/core/utils.ts

@@ -0,0 +1,211 @@
+import {
+  NEVER,
+  Observable,
+  defer,
+  endWith,
+  filter,
+  fromEvent,
+  map,
+  merge,
+  mergeMap,
+  of,
+  scan,
+  takeUntil,
+} from "rxjs";
+
+export function isDefined<T>(
+  arg: T | null | undefined,
+): arg is T extends null | undefined ? never : T {
+  return arg !== null && arg !== undefined;
+}
+
+export const hasAtLeastOneItem = <T>(events: T[]): events is [T, ...T[]] =>
+  events.length > 0;
+
+export const getCenterFromEvent = (
+  event: MouseEvent | TouchEvent | PointerEvent,
+) => ({
+  x:
+    "changedTouches" in event
+      ? event.changedTouches[0]?.pageX ?? 0
+      : event.clientX,
+  y:
+    "changedTouches" in event
+      ? event.changedTouches[0]?.pageY ?? 0
+      : event.clientY,
+});
+
+export function isOUtsidePosThreshold(
+  startEvent: PointerEvent,
+  endEvent: PointerEvent,
+  posThreshold: number,
+) {
+  const start = getCenterFromEvent(startEvent);
+  const end = getCenterFromEvent(endEvent);
+
+  // Determines if the movement qualifies as a drag
+  return (
+    Math.abs(end.x - start.x) > posThreshold ||
+    Math.abs(end.y - start.y) > posThreshold
+  );
+}
+
+export function calculateDistance(pointA: PointerEvent, pointB: PointerEvent) {
+  const dx = pointA.clientX - pointB.clientX;
+  const dy = pointA.clientY - pointB.clientY;
+
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+export const fromFailWith = (failWith?: { start$: Observable<unknown> }[]) =>
+  !failWith?.length
+    ? NEVER
+    : merge(...(failWith?.map(({ start$ }) => start$) ?? []));
+
+export function matchPointer(pointer: PointerEvent) {
+  return (stream: Observable<PointerEvent>) =>
+    stream.pipe(
+      filter((newPointer) => newPointer.pointerId === pointer.pointerId),
+    );
+}
+
+export const getPointerEvents = ({
+  container,
+  afterEventReceived = (event) => event,
+}: {
+  container: HTMLElement;
+  afterEventReceived?: (event: PointerEvent) => PointerEvent;
+}) => {
+  const pointerDown$ = fromPointerDown({ afterEventReceived, container });
+  const pointerUp$ = fromEvent<PointerEvent>(container, "pointerup").pipe(
+    map(afterEventReceived),
+  );
+  const pointerMove$ = fromEvent<PointerEvent>(container, "pointermove").pipe(
+    map(afterEventReceived),
+  );
+  /**
+   * Mostly used to handle cursor leaving window on mouse pointers.
+   */
+  const pointerLeave$ = fromEvent<PointerEvent>(container, "pointerleave").pipe(
+    map(afterEventReceived),
+  );
+  /**
+   * Handle things such as contextual menu popup or
+   * native swipe navigation conflict.
+   */
+  const pointerCancel$ = fromEvent<PointerEvent>(
+    container,
+    "pointercancel",
+  ).pipe(map(afterEventReceived));
+
+  return {
+    pointerDown$,
+    pointerCancel$,
+    pointerLeave$,
+    pointerUp$,
+    pointerMove$,
+  };
+};
+
+export const fromPointerDown = ({
+  container,
+  afterEventReceived = (event) => event,
+}: {
+  container: HTMLElement;
+  afterEventReceived?: (event: PointerEvent) => PointerEvent;
+}) =>
+  fromEvent<PointerEvent>(container, "pointerdown").pipe(
+    map(afterEventReceived),
+  );
+
+export const enrichEvent = ({
+  event,
+  startTime,
+  startEvent,
+}: {
+  event: PointerEvent;
+  startTime: number;
+  startEvent: PointerEvent;
+}) => {
+  const startX = startEvent.clientX;
+  const startY = startEvent.clientY;
+  const deltaX = event.clientX - startX;
+  const deltaY = event.clientY - startY;
+
+  // Calculate the change in time
+  const dt = Date.now() - startTime;
+
+  // Avoid division by zero
+  // Calculate velocity in pixels per second
+  const velocityX = dt > 0 ? deltaX / dt : 0;
+  const velocityY = dt > 0 ? deltaY / dt : 0;
+
+  return {
+    srcEvent: event,
+    deltaX,
+    deltaY,
+    velocityX,
+    velocityY,
+    delay: new Date().getTime() - startTime,
+    center: {
+      x: event.x,
+      y: event.y,
+    },
+  };
+};
+
+/**
+ * @todo test the strict stability
+ * @important
+ * Stable function, will not emit if the pointers don't change
+ */
+export const trackActivePointers = ({
+  container,
+}: {
+  container: HTMLElement;
+}) => {
+  const pointerUp$ = fromEvent<PointerEvent>(container, "pointerup");
+  // const pointerMove$ = fromEvent<PointerEvent>(container, "pointermove")
+  const pointerLeave$ = fromEvent<PointerEvent>(container, "pointerleave");
+  const pointerCancel$ = fromEvent<PointerEvent>(container, "pointercancel");
+
+  return fromEvent<PointerEvent>(container, "pointerdown").pipe(
+    mergeMap((pointerDown) => {
+      const pointerDownRelease$ = merge(
+        pointerUp$,
+        pointerLeave$,
+        pointerCancel$,
+      ).pipe(matchPointer(pointerDown));
+      const pointerDown$ = defer(() => of(pointerDown));
+      // const currentPointerMove$ = pointerMove$.pipe(
+      //   filter((pointerMoveEvent) => matchPointer(pointerMoveEvent, pointerDown)),
+      //   throttleTime(100, undefined, { trailing: true }),
+      // )
+
+      return pointerDown$.pipe(
+        // mergeMap(() => merge(pointerDown$, currentPointerMove$)),
+        mergeMap(() => merge(pointerDown$, NEVER)),
+        map((event) => ({ id: event.pointerId, event })),
+        takeUntil(pointerDownRelease$),
+        endWith({ id: pointerDown.pointerId, event: undefined }),
+      );
+    }),
+    scan(
+      (acc, { event, id }) => {
+        if (!event) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { [id]: _deleted, ...rest } = acc;
+
+          return rest;
+        }
+
+        return {
+          ...acc,
+          [id]: event,
+        };
+      },
+      {} as Record<number, PointerEvent | undefined>,
+    ),
+    map((events) => Object.values(events).filter(isDefined)),
+  );
+};

package/src/main.ts

@@ -0,0 +1,19 @@
+import { createManager } from "./core/manager";
+import { createTapRecognizer } from "./core/tapRecognizer";
+import "./style.css";
+
+const container = document.querySelector<HTMLDivElement>("#app")!;
+
+const tapRecognizer = createTapRecognizer({ maxTaps: 3 });
+
+const manager = createManager({
+  container,
+  recognizers: [tapRecognizer],
+});
+
+manager.events$.subscribe(console.warn);
+
+container.innerHTML = `
+  <div class="container">
+  </div>
+`;

package/src/style.css

@@ -0,0 +1,29 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 100vw;
+  min-height: 100vh;
+}
+
+#app {
+  display: flex;
+  padding: 2rem;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import { resolve } from "path";
+import { name } from "../prose-reader/packages/enhancer-gesture/package.json";
+import externals from "rollup-plugin-node-externals";
+
+const libName = name.replace(`@`, ``).replace(`/`, `-`);
+
+export default defineConfig(({ mode }) => ({
+  build: {
+    minify: false,
+    lib: {
+      entry: resolve(__dirname, `src/index.ts`),
+      name: libName,
+      fileName: "index",
+    },
+    emptyOutDir: mode !== `development`,
+    sourcemap: true,
+  },
+  plugins: [
+    {
+      enforce: `pre`,
+      ...externals({
+        peerDeps: true,
+        deps: true,
+        devDeps: true,
+      }),
+    },
+    dts({
+      entryRoot: "src",
+    }),
+  ],
+}));

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig(() => ({
+  test: {
+    environment: "happy-dom",
+    coverage: {},
+  },
+}));