gesturx 1.0.0 → 1.2.0

package/src/core/pinch/PinchRecognizer.ts

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

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

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

package/src/core/recognizer/mapToRecognizerEvent.ts

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

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

@@ -1,160 +0,0 @@
-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([])
-  })
-})