gesturx 1.0.0 → 1.2.0

package/src/core/swipe/SwipeRecognizer.ts

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

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

package/src/core/tap/TapRecognizer.test.ts

@@ -1,567 +0,0 @@
-import { describe, it, expect, beforeEach } from "vitest"
-import { TapRecognizer } 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,
-    })
-
-    // @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)
-  }
-
-  it("should detect a single tap", async () => {
-    const multiTapThreshold = 5
-    const waitLongEnough$ = timer(100)
-    const recognizer = new TapRecognizer({ multiTapThreshold })
-    recognizer.initialize({
-      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 = new TapRecognizer({ multiTapThreshold, maxTaps: 2 })
-    recognizer.initialize({
-      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 = new TapRecognizer({ multiTapThreshold, maxTaps: 3 })
-    recognizer.initialize({
-      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 = new TapRecognizer({ multiTapThreshold, maxTaps: 2 })
-    recognizer.initialize({
-      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, pointers: [{ pointerId: 1 }] },
-      { type: "tap", taps: 1, pointers: [{ 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 = new TapRecognizer({
-      multiTapThreshold,
-      posThreshold: 5,
-    })
-    recognizer.initialize({
-      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 = new TapRecognizer({
-      multiTapThreshold,
-      posThreshold: 5,
-      maximumPressTime,
-    })
-    recognizer.initialize({
-      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, pointers: [{ pointerId: 1 }] },
-    ])
-  })
-
-  it("should ignore taps when there are simultaneous pointers active", async () => {
-    const recognizer = new TapRecognizer({})
-    recognizer.initialize({
-      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 = new TapRecognizer({
-      multiTapThreshold: 10,
-      maxTaps: 1,
-    })
-    recognizer.initialize({
-      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 = new TapRecognizer({
-      posThreshold: 5,
-      multiTapThreshold: 10,
-      maxTaps: Infinity,
-    })
-    recognizer.initialize({
-      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)
-  })
-})