gesturx 0.0.0 → 1.1.0

package/README.md

@@ -1,3 +1,19 @@
 # gesturx
 
-Gesture recognizer using rxjs
+Modern multi touch gesture recognizer using rxjs.
+
+# Documentation
+
+Head over the [wiki](https://github.com/mbret/gesturx/wiki).
+
+# Demo
+
+[https://gesturx.vercel.app/](https://gesturx.vercel.app/)
+
+# License
+
+MIT
+
+# author
+
+[mbret](https://github.com/mbret)

package/dist/core/index.d.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/dist/core/manager.d.ts

@@ -0,0 +1,15 @@
+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 declare const createManager: ({ afterEventReceived, recognizers, }: {
+    recognizers: (TapRecognizer | PanRecognizer | SwipeRecognizer | RotateRecognizer | PinchRecognizer)[];
+    afterEventReceived?: (event: PointerEvent) => PointerEvent;
+}) => {
+    events$: import('rxjs').Observable<import('./pan/PanRecognizer').PanEvent | import('./swipe/SwipeRecognizer').SwipeEvent | import('./tap/TapRecognizer').TapEvent | import('./rotate/RotateRecognizer').RotateEvent | import('./pinch/PinchRecognizer').PinchEvent>;
+    initialize: (container: HTMLElement) => void;
+    recognizers: (PanRecognizer | SwipeRecognizer | TapRecognizer | RotateRecognizer | PinchRecognizer)[];
+};

package/dist/core/pan/PanRecognizer.d.ts

@@ -0,0 +1,19 @@
+import { Observable } from 'rxjs';
+import { Recognizer } from '../recognizer/Recognizer';
+import { RecognizerEvent } from '../recognizer/RecognizerEvent';
+
+export interface PanEvent extends RecognizerEvent {
+    type: "panStart" | "panMove" | "panEnd";
+}
+type Options = {
+    posThreshold?: number;
+};
+export declare class PanRecognizer extends Recognizer<Options> {
+    protected options: Options;
+    events$: Observable<PanEvent>;
+    start$: Observable<PanEvent>;
+    end$: Observable<PanEvent>;
+    fingers$: Observable<number>;
+    constructor(options?: Options);
+}
+export {};

package/dist/core/pinch/PinchRecognizer.d.ts

@@ -0,0 +1,29 @@
+import { Observable } from 'rxjs';
+import { RecognizerEvent } from '../recognizer/RecognizerEvent';
+import { Recognizer } from '../recognizer/Recognizer';
+
+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 declare class PinchRecognizer extends Recognizer<Options> {
+    protected options: Options;
+    events$: Observable<PinchEvent>;
+    constructor(options?: Options);
+}
+export {};

package/dist/core/recognizer/Recognizer.d.ts

@@ -0,0 +1,21 @@
+import { BehaviorSubject, Observable } 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 declare class Recognizer<Options> {
+    protected config$: BehaviorSubject<RecognizerConfig<Options>>;
+    protected validConfig$: Observable<ValidRecognizerConfig<Options>>;
+    constructor(options: Options);
+    initialize(config: RecognizerConfig<Options>): void;
+    update(options: Options): void;
+}
+export {};

package/dist/core/recognizer/RecognizerEvent.d.ts

@@ -0,0 +1,42 @@
+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/dist/core/recognizer/mapToRecognizerEvent.d.ts

@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+import { RecognizerEvent } from './RecognizerEvent';
+
+export interface RecognizerEventInput {
+    event: PointerEvent;
+    latestActivePointers: PointerEvent[];
+}
+export declare const mapToRecognizerEvent: <T extends RecognizerEventInput>(stream: Observable<T>) => Observable<RecognizerEvent>;

package/dist/core/rotate/RotateRecognizer.d.ts

@@ -0,0 +1,24 @@
+import { Observable } from 'rxjs';
+import { Recognizer } from '../recognizer/Recognizer';
+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 declare class RotateRecognizer extends Recognizer<Options> {
+    protected options: Options;
+    events$: Observable<RotateEvent>;
+    constructor(options?: Options);
+}
+export {};

package/dist/core/swipe/SwipeRecognizer.d.ts

@@ -0,0 +1,30 @@
+import { Observable } from 'rxjs';
+import { Recognizer } from '../recognizer/Recognizer';
+import { RecognizerEvent } from '../recognizer/RecognizerEvent';
+
+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;
+    numInputs?: number;
+    maxRestTime?: number;
+    posThreshold?: number;
+};
+export declare class SwipeRecognizer extends Recognizer<Options> {
+    protected options: Options;
+    events$: Observable<SwipeEvent>;
+    constructor(options?: Options);
+}
+export {};

package/dist/core/swipe/SwipeRecognizer.test.d.ts

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

package/dist/core/swipe/isRecognizedAsSwipe.d.ts

@@ -0,0 +1,4 @@
+import { Observable } from 'rxjs';
+import { PanEvent } from '../pan/PanRecognizer';
+
+export declare const isRecognizedAsSwipe: (escapeVelocity: number) => (stream: Observable<PanEvent>) => Observable<PanEvent>;

package/dist/core/tap/TapRecognizer.d.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+import { Recognizer, RecognizerOptions } from '../recognizer/Recognizer';
+import { RecognizerEvent } from '../recognizer/RecognizerEvent';
+
+export interface TapEvent extends RecognizerEvent {
+    type: "tap";
+    taps: number;
+}
+interface Options extends RecognizerOptions {
+    multiTapThreshold?: number;
+    maximumPressTime?: number;
+    maxTaps?: number;
+    posThreshold?: number;
+}
+export declare class TapRecognizer extends Recognizer<Options> {
+    protected options: Options;
+    events$: Observable<TapEvent>;
+    constructor(options: Options);
+}
+export {};

package/dist/core/tap/TapRecognizer.test.d.ts

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

package/dist/core/utils/events.d.ts

@@ -0,0 +1,40 @@
+import { Observable } from 'rxjs';
+
+export declare function matchPointer(pointer: PointerEvent): (stream: Observable<PointerEvent>) => Observable<PointerEvent>;
+export declare const getPointerEvents: ({ container, afterEventReceived, }: {
+    container: HTMLElement;
+    afterEventReceived?: (event: PointerEvent) => PointerEvent;
+}) => {
+    pointerDown$: Observable<PointerEvent>;
+    pointerCancel$: Observable<PointerEvent>;
+    pointerLeave$: Observable<PointerEvent>;
+    pointerUp$: Observable<PointerEvent>;
+    pointerMove$: Observable<PointerEvent>;
+};
+export declare const fromPointerDown: ({ container, afterEventReceived, }: {
+    container: HTMLElement;
+    afterEventReceived?: (event: PointerEvent) => PointerEvent;
+}) => Observable<PointerEvent>;
+/**
+ * @todo test the strict stability
+ * @important
+ * Stable function, will not emit if the pointers don't change
+ */
+export declare const trackActivePointers: ({ container, }: {
+    container: HTMLElement;
+}) => Observable<PointerEvent[]>;
+/**
+ * Track all pointerEvent for active fingers
+ */
+export declare const trackFingers: ({ pointerCancel$, pointerLeave$, pointerUp$, pointerMove$, trackMove, }: {
+    pointerUp$: Observable<PointerEvent>;
+    pointerLeave$: Observable<PointerEvent>;
+    pointerCancel$: Observable<PointerEvent>;
+    pointerMove$: Observable<PointerEvent>;
+    /**
+     * Setting this value to false will not update the list
+     * on pointer move. Use it if you only need to track number of active
+     * fingers.
+     */
+    trackMove: boolean;
+}) => (stream: Observable<PointerEvent>) => Observable<PointerEvent[]>;

package/dist/core/utils/geometry.d.ts

@@ -0,0 +1,17 @@
+type Point = {
+    x: number;
+    y: number;
+};
+export declare function calculateDistance(pointA: Point, pointB: Point): number;
+export declare function calculateAverageDistance(pointerEvents: Point[]): number;
+export declare function calculateRadianAngleBetweenPoints(pointerA: Point, pointerB: Point): number;
+export declare function calculateDegreeAngleBetweenPoints(pointerA: Point, pointerB: Point): number;
+export declare function calculateCentroid(points: Point[]): {
+    x: number;
+    y: number;
+};
+export declare function calculateAngleDelta(initialPoints: Point[], newPoints: Point[]): {
+    radianDelta: number;
+    degreesDelta: number;
+};
+export {};

package/dist/core/utils/utils.d.ts

@@ -0,0 +1,17 @@
+import { Observable } from 'rxjs';
+
+export declare function isDefined<T>(arg: T | null | undefined): arg is T extends null | undefined ? never : T;
+export declare const hasAtLeastOneItem: <T>(events: T[]) => events is [T, ...T[]];
+export declare const filterNotEmpty: <T>(stream: Observable<T[]>) => Observable<[T, ...T[]]>;
+export declare function isOutsidePosThreshold(startEvent: PointerEvent, endEvent: PointerEvent, posThreshold: number): boolean;
+export declare const fromFailWith: (failWith?: {
+    start$: Observable<unknown>;
+}[]) => Observable<unknown>;
+/**
+ * Avoid division by zero
+ * Calculate velocity in pixels per second
+ */
+export declare const calculateVelocity: (delay: number, deltaX: number, deltaY: number) => {
+    velocityX: number;
+    velocityY: number;
+};

package/dist/core/utils/utils.test.d.ts

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

package/dist/demo/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/demo/DebugBox.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export declare const DebugBox: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/demo/useManager.d.ts

@@ -0,0 +1,11 @@
+import { PanRecognizer, SwipeRecognizer, TapRecognizer } from '../core';
+import { RotateRecognizer } from '../core/rotate/RotateRecognizer';
+import { PinchRecognizer } from '../core/pinch/PinchRecognizer';
+
+export declare const useManager: (container?: HTMLElement) => {
+    manager: {
+        events$: import('rxjs').Observable<import('../core/pan/PanRecognizer').PanEvent | import('../core/swipe/SwipeRecognizer').SwipeEvent | import('../core/tap/TapRecognizer').TapEvent | import('../core/rotate/RotateRecognizer').RotateEvent | import('../core/pinch/PinchRecognizer').PinchEvent>;
+        initialize: (container: HTMLElement) => void;
+        recognizers: (PanRecognizer | SwipeRecognizer | TapRecognizer | RotateRecognizer | PinchRecognizer)[];
+    };
+};

package/dist/demo/useTap.d.ts

@@ -0,0 +1,5 @@
+import { Manager } from '../core/manager';
+
+export declare const useTap: (manager: Manager) => {
+    tapDebug: import("react/jsx-runtime").JSX.Element;
+};