gesturx 0.0.0 → 1.0.0

package/src/core/recognizer/mapToRecognizerEvent.ts

@@ -0,0 +1,142 @@
+import { Observable, map, scan } from "rxjs"
+import { RecognizerEvent } from "./RecognizerEvent"
+import { calculateVelocity } from "../utils/utils"
+import {
+  calculateAngleDelta,
+  calculateAverageDistance,
+  calculateCentroid,
+} from "../utils/geometry"
+
+export interface RecognizerEventInput {
+  event: PointerEvent
+  latestActivePointers: PointerEvent[]
+}
+
+interface RecognizerEventState extends RecognizerEventInput {
+  startTime: number
+  center: { x: number; y: number }
+  deltaX: number
+  deltaY: number
+  deltaPointersAngle: number
+}
+
+const calculateNewDelta = (
+  newCenter: { x: number; y: number },
+  prevCenter: { x: number; y: number },
+  prevDeltaX: number,
+  prevDeltaY: number,
+) => {
+  const deltaX = newCenter.x - prevCenter.x + prevDeltaX
+  const deltaY = newCenter.y - prevCenter.y + prevDeltaY
+
+  return {
+    deltaX,
+    deltaY,
+  }
+}
+
+export const mapToRecognizerEvent = <T extends RecognizerEventInput>(
+  stream: Observable<T>,
+): Observable<RecognizerEvent> => {
+  const getCenterFromData = (data: T) =>
+    calculateCentroid(
+      !data.latestActivePointers.length
+        ? [data.event]
+        : data.latestActivePointers,
+    )
+
+  return stream.pipe(
+    scan<
+      T,
+      RecognizerEventState,
+      Pick<
+        RecognizerEventState,
+        "deltaX" | "center" | "deltaY" | "latestActivePointers"
+      >
+    >(
+      (acc, curr) => {
+        const newCenter = getCenterFromData(curr)
+        const prevCenter = acc.center
+        const prevDeltaX = acc.deltaX
+        const prevDeltaY = acc.deltaY
+        const prevActivePointersNumber = acc.latestActivePointers?.length ?? 0
+        const currActivePointersNumber = curr.latestActivePointers?.length ?? 0
+
+        const hasAddedOrRemovedAFinger =
+          [
+            "pointerdown",
+            "pointercancel",
+            "pointerleave",
+            "pointerup",
+          ].includes(curr.event.type) &&
+          prevActivePointersNumber !== currActivePointersNumber
+        const hasAtLeastOneFinger = currActivePointersNumber > 0
+
+        const { deltaX, deltaY } =
+          hasAddedOrRemovedAFinger && hasAtLeastOneFinger
+            ? calculateNewDelta(newCenter, newCenter, prevDeltaX, prevDeltaY)
+            : calculateNewDelta(newCenter, prevCenter, prevDeltaX, prevDeltaY)
+
+        const { degreesDelta: deltaPointersAngle } =
+          prevActivePointersNumber === currActivePointersNumber &&
+          prevActivePointersNumber >= 2 &&
+          currActivePointersNumber >= 2
+            ? calculateAngleDelta(
+                acc.latestActivePointers ?? [],
+                curr.latestActivePointers ?? [],
+              )
+            : { degreesDelta: 0 }
+
+        return {
+          startTime: new Date().getTime(),
+          ...acc,
+          ...curr,
+          center: newCenter,
+          deltaX,
+          deltaY,
+          deltaPointersAngle,
+        }
+      },
+      {
+        deltaX: 0,
+        deltaY: 0,
+        center: { x: 0, y: 0 },
+        latestActivePointers: [],
+      },
+    ),
+    map((data) => {
+      const {
+        deltaX,
+        deltaY,
+        latestActivePointers,
+        startTime,
+        center,
+        event,
+        deltaPointersAngle,
+      } = data
+      const events = latestActivePointers ?? []
+
+      // Calculate the change in time
+      const now = Date.now()
+      const delay = now - startTime
+
+      const { velocityX, velocityY } = calculateVelocity(delay, deltaX, deltaY)
+      const pointersAverageDistance =
+        calculateAverageDistance(latestActivePointers)
+
+      return {
+        deltaX,
+        deltaY,
+        velocityX,
+        velocityY,
+        delay,
+        center,
+        pointers: events,
+        startTime,
+        event,
+        deltaPointersAngle,
+        pointersAverageDistance,
+      } satisfies RecognizerEvent
+    }),
+  )
+}

package/src/core/rotate/RotateRecognizer.ts

@@ -0,0 +1,115 @@
+import {
+  Observable,
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  first,
+  map,
+  merge,
+  mergeMap,
+  scan,
+  switchMap,
+  takeUntil,
+} from "rxjs"
+import { Recognizer } from "../recognizer/Recognizer"
+import { PanEvent, PanRecognizer } from "../pan/PanRecognizer"
+import { RecognizerEvent } from "../recognizer/RecognizerEvent"
+
+export interface RotateEvent extends RecognizerEvent {
+  type: "rotate" | "rotateStart" | "rotateEnd"
+  /**
+   * Current rotation angle
+   */
+  angle: number
+  /**
+   * Delta angle between events
+   */
+  deltaAngle: number
+}
+
+type Options = {
+  posThreshold?: number
+}
+
+export class RotateRecognizer extends Recognizer<Options> {
+  public events$: Observable<RotateEvent>
+
+  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: "rotateStart" as const,
+            angle: 0,
+            deltaAngle: 0,
+          })),
+        )
+
+        const rotate$ = start$.pipe(
+          mergeMap(() =>
+            panRecognizer.events$.pipe(
+              scan<
+                PanEvent,
+                RotateEvent,
+                Pick<RotateEvent, "angle" | "deltaAngle">
+              >(
+                (acc, current) => {
+                  const angle = acc.angle + current.deltaPointersAngle
+
+                  return {
+                    ...acc,
+                    ...current,
+                    type: "rotate" as const,
+                    angle,
+                    deltaAngle: current.deltaPointersAngle,
+                  }
+                },
+                { angle: 0, deltaAngle: 0 },
+              ),
+              takeUntil(hasLessThanTwoFinger$),
+            ),
+          ),
+        )
+
+        const end$ = start$.pipe(
+          mergeMap(() =>
+            combineLatest([rotate$, hasLessThanTwoFinger$] as const).pipe(
+              first(),
+              map(([event]) => ({
+                ...event,
+                type: "rotateEnd" as const,
+              })),
+            ),
+          ),
+        )
+
+        return merge(start$, rotate$, end$)
+      }),
+    )
+  }
+}

package/src/core/swipe/SwipeRecognizer.test.ts

@@ -0,0 +1,160 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import { buffer, first, lastValueFrom, tap, timer } from "rxjs"
+import { SwipeRecognizer } from "./SwipeRecognizer"
+
+const waitFor = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time))
+
+describe("SwipeRecognizer", () => {
+  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,
+    })
+
+    // @ts-ignore
+    event.x = x
+    // @ts-ignore
+    event.y = y
+    
+    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)
+  }
+
+  // ~0.8 velocityX
+  const createVelocityOfOnePanMoving = async () => {
+    await waitFor(1)
+
+    sendPointerEvent({
+      container,
+      identifier: 1,
+      type: "pointerdown",
+      x: 0,
+      y: 0,
+    })
+
+    await waitFor(10)
+
+    sendPointerEvent({
+      container,
+      identifier: 1,
+      type: "pointermove",
+      x: 10,
+      y: 0,
+    })
+
+    await waitFor(10)
+
+    sendPointerEvent({
+      container,
+      identifier: 1,
+      type: "pointerup",
+      x: 20,
+      y: 0,
+    })
+  }
+
+  it("should detect a swipe if above threshold", async () => {
+    const waitLongEnough$ = timer(100)
+    const recognizer = new SwipeRecognizer({
+      escapeVelocity: 0.4,
+      posThreshold: 5
+    })
+
+    recognizer.initialize({
+      container,
+    })
+
+    const values = await lastValueFrom(
+      recognizer.events$.pipe(
+        tap({
+          subscribe: async () => {
+            await createVelocityOfOnePanMoving()
+          },
+        }),
+        buffer(waitLongEnough$),
+        first(),
+      ),
+    )
+
+    expect(values).toMatchObject([{ type: "swipe" }])
+  })
+
+  it("should not detect a swipe if below threshold", async () => {
+    const waitLongEnough$ = timer(100)
+    const recognizer = new SwipeRecognizer({
+      escapeVelocity: 10,
+      posThreshold: 5
+    })
+
+    recognizer.initialize({
+      container,
+    })
+
+    const values = await lastValueFrom(
+      recognizer.events$.pipe(
+        tap({
+          subscribe: async () => {
+            await createVelocityOfOnePanMoving()
+          },
+        }),
+        buffer(waitLongEnough$),
+        first(),
+      ),
+    )
+
+    expect(values).toMatchObject([])
+  })
+})

package/src/core/swipe/SwipeRecognizer.ts

@@ -0,0 +1,82 @@
+import {
+  Observable,
+  exhaustMap,
+  filter,
+  first,
+  map,
+  share,
+  switchMap,
+  takeUntil,
+} from "rxjs"
+import { Recognizer } from "../recognizer/Recognizer"
+import { PanRecognizer } from "../pan/PanRecognizer"
+import { RecognizerEvent } from "../recognizer/RecognizerEvent"
+import { calculateDegreeAngleBetweenPoints } from "../utils/geometry"
+import { isRecognizedAsSwipe } from "./isRecognizedAsSwipe"
+
+export interface SwipeEvent extends RecognizerEvent {
+  type: "swipe"
+  /**
+   * Angle between first pointer and last one in degree
+   *
+   *             (-90)
+   * (+/-180) <-   |   -> (+/-0)
+   *             (+90)
+   */
+  angle: number
+}
+
+type Options = {
+  /**
+   * The minimum velocity (px/ms) that the gesture has to obtain by the end event.
+   */
+  escapeVelocity?: number
+  // @todo
+  numInputs?: number
+  // @todo
+  maxRestTime?: number
+  posThreshold?: number
+}
+
+export class SwipeRecognizer extends Recognizer<Options> {
+  public events$: Observable<SwipeEvent>
+
+  constructor(protected options: Options = {}) {
+    super(options)
+
+    this.events$ = this.validConfig$.pipe(
+      switchMap((initializedWith) => {
+        const { escapeVelocity = 0.9, posThreshold } =
+          initializedWith.options ?? {}
+        const panRecognizer = new PanRecognizer({ posThreshold })
+
+        panRecognizer.initialize(initializedWith)
+
+        const hasMoreThanOneFinger$ = panRecognizer.events$.pipe(
+          filter(({ pointers }) => pointers.length > 1),
+        )
+
+        return panRecognizer.start$.pipe(
+          exhaustMap((startEvent) => {
+            return panRecognizer.end$.pipe(
+              first(),
+              isRecognizedAsSwipe(escapeVelocity),
+              map(({ type, ...rest }) => {
+                return {
+                  type: "swipe" as const,
+                  angle: calculateDegreeAngleBetweenPoints(
+                    startEvent.event,
+                    rest.event,
+                  ),
+                  ...rest,
+                }
+              }),
+              takeUntil(hasMoreThanOneFinger$),
+            )
+          }),
+          share(),
+        )
+      }),
+    )
+  }
+}

package/src/core/swipe/isRecognizedAsSwipe.ts

@@ -0,0 +1,13 @@
+import { Observable, filter } from "rxjs"
+import { PanEvent } from "../pan/PanRecognizer"
+
+export const isRecognizedAsSwipe =
+  (escapeVelocity: number) => (stream: Observable<PanEvent>) =>
+    stream.pipe(
+      filter((event) => {
+        return (
+          Math.abs(event.velocityX) >= escapeVelocity ||
+          Math.abs(event.velocityY) >= escapeVelocity
+        )
+      }),
+    )