gesturx 0.0.0 → 1.0.0

package/.prettierrc.json

@@ -1 +1,3 @@
-{}
+{
+  "semi": false
+}

package/eslint.config.js

@@ -1,9 +1,18 @@
-// @ts-check
-
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-
-export default tseslint.config(
-  eslint.configs.recommended,
-  ...tseslint.configs.recommended,
-);
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+}

package/index.html

@@ -7,7 +7,7 @@
     <title>gesturx</title>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/package.json

@@ -1,24 +1,37 @@
 {
   "name": "gesturx",
   "private": false,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build:lib": "tsc && cross-env LIB_MODE=true vite build",
     "preview": "vite preview",
-    "lint": "prettier --write . && eslint --fix .",
+    "lint": "prettier --write . && eslint --fix . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },
   "devDependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@eslint/js": "^9.0.0",
     "@types/node": "^20.12.7",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
     "@vitest/coverage-v8": "^1.5.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
+    "framer-motion": "^11.2.6",
     "happy-dom": "^14.7.1",
     "prettier": "3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup-plugin-node-externals": "^7.1.1",
+    "rxjs": "^7.8.1",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.7.0",
     "vite": "^5.2.0",
@@ -26,7 +39,7 @@
     "vite-plugin-eslint": "^1.8.1",
     "vitest": "^1.5.0"
   },
-  "dependencies": {
+  "peerDependencies": {
     "rxjs": "^7.8.1"
   }
 }

package/src/core/index.ts

@@ -0,0 +1,4 @@
+export { PanRecognizer } from "./pan/PanRecognizer"
+export { SwipeRecognizer } from "./swipe/SwipeRecognizer"
+export { TapRecognizer } from "./tap/TapRecognizer"
+export { createManager } from "./manager"

package/src/core/manager.ts

@@ -1,45 +1,46 @@
-import { map, merge } from "rxjs";
-import { createTapRecognizer } from "./tapRecognizer";
-import { getCenterFromEvent } from "./utils";
+import { merge, share } from "rxjs"
+import { TapRecognizer } from "./tap/TapRecognizer"
+import { PanRecognizer } from "./pan/PanRecognizer"
+import { SwipeRecognizer } from "./swipe/SwipeRecognizer"
+import { RotateRecognizer } from "./rotate/RotateRecognizer"
+import { PinchRecognizer } from "./pinch/PinchRecognizer"
+
+export type Manager = ReturnType<typeof createManager>
 
 export const createManager = ({
-  container,
   afterEventReceived = (event) => event,
   recognizers,
 }: {
-  container: HTMLElement;
-  recognizers: ReturnType<typeof createTapRecognizer>[];
-  afterEventReceived?: (event: PointerEvent) => PointerEvent;
+  recognizers: (
+    | TapRecognizer
+    | PanRecognizer
+    | SwipeRecognizer
+    | RotateRecognizer
+    | PinchRecognizer
+  )[]
+  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 events$ = merge(
+    ...recognizers.map((recognizer) => recognizer.events$),
+  ).pipe(share())
 
-  // const recognizers = [
-  //   singleTapRecognizer({ container, afterEventReceived }),
-  //   // pinchRecognizer({ container, afterEventReceived }),
-  //   // dragRecognizer,
-  // ]
+  const initialize = (container: HTMLElement) => {
+    /**
+     * We have to disable touch-action otherwise every events will be followed
+     * by a cancel event since the browser will try to handle touch.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
+     */
+    container.style.touchAction = `none`
 
-  const recognizerInstances = recognizers.map((recognizer) =>
-    recognizer({ container, afterEventReceived }),
-  );
+    /**
+     *  Disables text selection to improve the dragging gesture. Mainly for desktop browsers.
+     */
+    container.style.userSelect = `none`
 
-  const events$ = merge(
-    ...recognizerInstances.map((recognizer) => recognizer.events$),
-  ).pipe(
-    map((event) => ({
-      ...event,
-      center: getCenterFromEvent(event.srcEvent),
-    })),
-  );
+    recognizers.forEach((recognizer) => {
+      recognizer.initialize({ container, afterEventReceived })
+    })
+  }
 
-  return { events$ };
-};
+  return { events$, initialize, recognizers }
+}

package/src/core/pan/PanRecognizer.ts

@@ -0,0 +1,192 @@
+import {
+  Observable,
+  combineLatest,
+  exhaustMap,
+  filter,
+  first,
+  map,
+  merge,
+  mergeMap,
+  of,
+  share,
+  shareReplay,
+  skipUntil,
+  switchMap,
+  takeUntil,
+  withLatestFrom,
+} from "rxjs"
+import { isOutsidePosThreshold } from "../utils/utils"
+import { Recognizer } from "../recognizer/Recognizer"
+import { RecognizerEvent } from "../recognizer/RecognizerEvent"
+import { mapToRecognizerEvent } from "../recognizer/mapToRecognizerEvent"
+import { getPointerEvents, matchPointer, trackFingers } from "../utils/events"
+
+export interface PanEvent extends RecognizerEvent {
+  type: "panStart" | "panMove" | "panEnd"
+}
+
+type Options = {
+  posThreshold?: number
+}
+
+export class PanRecognizer extends Recognizer<Options> {
+  public events$: Observable<PanEvent>
+  public start$: Observable<PanEvent>
+  public end$: Observable<PanEvent>
+  public fingers$: Observable<number>
+
+  constructor(protected options: Options = {}) {
+    super(options)
+
+    this.events$ = this.validConfig$.pipe(
+      switchMap((config) => {
+        const { container, afterEventReceived } = config
+        const { posThreshold = 15 } = config.options ?? {}
+        const {
+          pointerCancel$,
+          pointerDown$,
+          pointerLeave$,
+          pointerMove$,
+          pointerUp$,
+        } = getPointerEvents({
+          container,
+          afterEventReceived,
+        })
+
+        return pointerDown$.pipe(
+          exhaustMap((initialPointerDownEvent) => {
+            const pointerDowns$ = merge(
+              of(initialPointerDownEvent),
+              pointerDown$,
+            )
+
+            const pointerUpdate$ = merge(
+              pointerCancel$,
+              pointerDown$,
+              pointerLeave$,
+              pointerMove$,
+              pointerUp$,
+            )
+
+            const trackFingers$ = pointerDowns$.pipe(
+              trackFingers({
+                pointerCancel$,
+                pointerLeave$,
+                pointerUp$,
+                pointerMove$,
+                trackMove: true,
+              }),
+              shareReplay(),
+            )
+
+            /**
+             * We release when we detect a pointer leave and there are no more
+             * active fingers.
+             *
+             * @todo move to utils
+             */
+            const panReleased$ = merge(
+              pointerUp$,
+              pointerLeave$,
+              pointerCancel$,
+            ).pipe(
+              withLatestFrom(trackFingers$),
+              filter(([_, pointers]) => !pointers.length),
+              map(([event]) => event),
+              first(),
+              share(),
+            )
+
+            const firstPointerDownMovingOutOfThreshold$ = pointerDowns$.pipe(
+              mergeMap((pointerDown) =>
+                pointerMove$.pipe(
+                  matchPointer(pointerDown),
+                  // we start pan only if the user started moving a certain distance
+                  filter((pointerMoveEvent) =>
+                    isOutsidePosThreshold(
+                      pointerDown,
+                      pointerMoveEvent,
+                      posThreshold,
+                    ),
+                  ),
+                ),
+              ),
+              first(),
+            )
+
+            const panStart$ = firstPointerDownMovingOutOfThreshold$.pipe(
+              map(() => ({
+                type: "panStart" as const,
+                event: initialPointerDownEvent,
+              })),
+              share(),
+              takeUntil(panReleased$),
+            )
+
+            const panEnd$ = panStart$.pipe(
+              mergeMap(() =>
+                panReleased$.pipe(
+                  map((endEvent) => ({
+                    type: "panEnd" as const,
+                    event: endEvent,
+                  })),
+                ),
+              ),
+            )
+
+            const panUpdate$ = pointerUpdate$.pipe(
+              skipUntil(panStart$),
+              map((event) => ({
+                type: "panMove" as const,
+                event,
+              })),
+              takeUntil(panReleased$),
+            )
+
+            const rawEvent$ = merge(panStart$, panUpdate$, panEnd$).pipe(
+              withLatestFrom(trackFingers$),
+              map(([event, pointers]) => ({
+                ...event,
+                latestActivePointers: pointers,
+              })),
+              share(),
+            )
+
+            return combineLatest([
+              rawEvent$.pipe(mapToRecognizerEvent),
+              rawEvent$,
+            ]).pipe(
+              map(([recognizerEvent, { type }]) => ({
+                ...recognizerEvent,
+                type,
+              })),
+            )
+          }),
+        )
+      }),
+      share(),
+    )
+
+    this.start$ = this.events$.pipe(
+      filter((event) => event.type === "panStart"),
+    )
+    this.end$ = this.events$.pipe(filter((event) => event.type === "panEnd"))
+
+    this.fingers$ = this.validConfig$.pipe(
+      switchMap(({ container, afterEventReceived }) => {
+        const pointerEvents = getPointerEvents({
+          container,
+          afterEventReceived,
+        })
+
+        return pointerEvents.pointerDown$.pipe(
+          trackFingers({
+            ...pointerEvents,
+            trackMove: false,
+          }),
+        )
+      }),
+      map((events) => events.length),
+    )
+  }
+}

package/src/core/pinch/PinchRecognizer.ts

@@ -0,0 +1,131 @@
+import {
+  Observable,
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  first,
+  map,
+  merge,
+  mergeMap,
+  scan,
+  switchMap,
+  takeUntil,
+} from "rxjs"
+import { RecognizerEvent } from "../recognizer/RecognizerEvent"
+import { Recognizer } from "../recognizer/Recognizer"
+import { PanEvent, PanRecognizer } from "../pan/PanRecognizer"
+
+export interface PinchEvent extends RecognizerEvent {
+  type: "pinchStart" | "pinchMove" | "pinchEnd"
+  scale: number
+  /**
+   * Distance between start and current
+   */
+  distance: number
+  /**
+   * Delta distance between events
+   */
+  deltaDistance: number
+  /**
+   * Delta scale between events
+   */
+  deltaDistanceScale: number
+}
+
+type Options = {
+  posThreshold?: number
+}
+
+export class PinchRecognizer extends Recognizer<Options> {
+  public events$: Observable<PinchEvent>
+
+  constructor(protected options: Options = {}) {
+    super(options)
+
+    this.events$ = this.config$.pipe(
+      switchMap((initializedWith) => {
+        const { posThreshold } = initializedWith.options ?? {}
+        const panRecognizer = new PanRecognizer({ posThreshold })
+
+        panRecognizer.initialize(initializedWith)
+
+        const hasLessThanTwoFinger$ = panRecognizer.events$.pipe(
+          filter(({ pointers }) => pointers.length < 2),
+          distinctUntilChanged(),
+        )
+
+        const hasMoreThanOneFinger$ = panRecognizer.events$.pipe(
+          map((event) => [event, event.pointers.length > 1] as const),
+          distinctUntilChanged(
+            (
+              [_, previousHasMoreThanOneFinger],
+              [__, currentHasMoreThanOneFinger],
+            ) => previousHasMoreThanOneFinger === currentHasMoreThanOneFinger,
+          ),
+          filter(([_, hasMoreThanOneFinger]) => hasMoreThanOneFinger),
+        )
+
+        const start$ = hasMoreThanOneFinger$.pipe(
+          map(([event]) => ({
+            ...event,
+            type: "pinchStart" as const,
+            scale: 1,
+            distance: 0,
+            deltaDistance: 0,
+            deltaDistanceScale: 1,
+          })),
+        )
+
+        const rotate$ = start$.pipe(
+          mergeMap((startEvent) => {
+            return panRecognizer.events$.pipe(
+              scan<PanEvent, PinchEvent, Partial<PinchEvent>>(
+                (acc, current) => {
+                  const previousPointersAverageDistance =
+                    acc.pointersAverageDistance ??
+                    current.pointersAverageDistance
+
+                  const scale =
+                    current.pointersAverageDistance /
+                    startEvent.pointersAverageDistance
+
+                  return {
+                    ...acc,
+                    ...current,
+                    scale,
+                    distance:
+                      current.pointersAverageDistance -
+                      startEvent.pointersAverageDistance,
+                    deltaDistance:
+                      current.pointersAverageDistance -
+                      previousPointersAverageDistance,
+                    deltaDistanceScale:
+                      current.pointersAverageDistance /
+                      previousPointersAverageDistance,
+                    type: "pinchMove" as const,
+                  }
+                },
+                { scale: 0 },
+              ),
+              takeUntil(hasLessThanTwoFinger$),
+            )
+          }),
+        )
+
+        const end$ = start$.pipe(
+          mergeMap(() =>
+            combineLatest([rotate$, hasLessThanTwoFinger$] as const).pipe(
+              first(),
+              map(([event]) => ({
+                ...event,
+                type: "pinchEnd" as const,
+              })),
+            ),
+          ),
+        )
+
+        return merge(start$, rotate$, end$)
+      }),
+    )
+  }
+}

package/src/core/recognizer/Recognizer.ts

@@ -0,0 +1,54 @@
+import { BehaviorSubject, Observable, filter } from "rxjs"
+
+type RecognizerConfig<Options> = {
+  container?: HTMLElement
+  afterEventReceived?: (event: PointerEvent) => PointerEvent
+  options?: Options
+}
+
+type ValidRecognizerConfig<Options> = Required<
+  Pick<RecognizerConfig<Options>, "container">
+> &
+  RecognizerConfig<Options>
+
+export interface RecognizerOptions {
+  failWith?: { start$: Observable<unknown> }[]
+}
+
+export class Recognizer<Options> {
+  protected config$ = new BehaviorSubject<RecognizerConfig<Options>>({})
+  protected validConfig$ = this.config$.pipe(
+    filter(
+      (config): config is ValidRecognizerConfig<Options> => !!config.container,
+    ),
+  )
+
+  constructor(options: Options) {
+    this.update(options)
+  }
+
+  public initialize(config: RecognizerConfig<Options>) {
+    const prevConfig = this.config$.getValue()
+
+    this.config$.next({
+      ...prevConfig,
+      ...config,
+      options: {
+        ...prevConfig.options,
+        ...config.options,
+      } as Options,
+    })
+  }
+
+  public update(options: Options) {
+    const config = this.config$.getValue()
+
+    this.config$.next({
+      ...config,
+      options: {
+        ...config.options,
+        ...options,
+      },
+    })
+  }
+}

package/src/core/recognizer/RecognizerEvent.ts

@@ -0,0 +1,39 @@
+export interface RecognizerEvent {
+  center: { x: number; y: number }
+  event: PointerEvent
+  /**
+   * Contain the last known pointer event for each active fingers.
+   * It should contain a unique list, with n being the number of active fingers.
+   */
+  pointers: PointerEvent[]
+  /**
+   * Delay between the user action and the event recognition
+   */
+  delay: number
+  deltaX: number
+  deltaY: number
+  /**
+   * @important
+   * Can be negative, 0, positive
+   */
+  velocityX: number
+  /**
+   * @important
+   * Can be negative, 0, positive
+   */
+  velocityY: number
+  startTime: number
+  /**
+   * Angle delta (in degrees) between pointers between this event
+   * and the previous one.
+   *
+   * @important
+   * - Will only register a delta if the previous event and current event
+   *   have the same amount of fingers
+   */
+  deltaPointersAngle: number
+  /**
+   * Average distance between all pointers
+   */
+  pointersAverageDistance: number
+}