react-ui-animate 1.2.2 → 1.4.2

package/src/gestures/controllers/MouseMoveGesture.ts

@@ -0,0 +1,111 @@
+import { attachEvents } from "../eventAttacher";
+import { Vector2 } from "../types";
+import { clamp } from "../math";
+import { withDefault } from "../withDefault";
+import { Gesture } from "./Gesture";
+
+export class MouseMoveGesture extends Gesture {
+  event?: MouseEvent;
+  isActiveID?: any;
+  movement: Vector2 = withDefault(0, 0);
+  previousMovement: Vector2 = withDefault(0, 0);
+  velocity: Vector2 = withDefault(0, 0);
+  direction: Vector2 = withDefault(0, 0);
+
+  // @override
+  // initialize the events
+  _initEvents() {
+    if (this.targetElement) {
+      this._subscribe = attachEvents(
+        [this.targetElement],
+        [["mousemove", this.onMouseMove.bind(this)]]
+      );
+    } else if (this.targetElements.length > 0) {
+      this._subscribe = attachEvents(this.targetElements, [
+        ["mousemove", this.onMouseMove.bind(this)],
+      ]);
+    } else {
+      this._subscribe = attachEvents(
+        [window],
+        [["mousemove", this.onMouseMove.bind(this)]]
+      );
+    }
+  }
+
+  _handleCallback() {
+    if (this.callback) {
+      this.callback({
+        args: [this.currentIndex],
+        event: this.event,
+        isMoving: this.isActive,
+        target: this.event?.target,
+        mouseX: this.movement.x,
+        mouseY: this.movement.y,
+        velocityX: this.velocity.x,
+        velocityY: this.velocity.y,
+        directionX: this.direction.x,
+        directionY: this.direction.y,
+      });
+    }
+  }
+
+  onMouseMove(e: MouseEvent) {
+    // find current selected element
+    const currElem = this.targetElements.find((elem: any) => elem === e.target);
+
+    // set args
+    if (currElem) {
+      this.currentIndex = this.targetElements.indexOf(currElem);
+    }
+
+    this.event = e;
+
+    const now: number = Date.now();
+    const deltaTime = Math.min(now - this.lastTimeStamp, 64);
+    this.lastTimeStamp = now;
+    const t = deltaTime / 1000; // seconds
+
+    const x = e.clientX;
+    const y = e.clientY;
+
+    this.movement = { x, y };
+
+    if (this.isActiveID !== -1) {
+      this.isActive = true;
+      clearTimeout(this.isActiveID);
+    }
+
+    this.isActiveID = setTimeout(() => {
+      this.isActive = false;
+      this.direction = { x: 0, y: 0 };
+      this.velocity = { x: 0, y: 0 };
+
+      this._handleCallback();
+    }, 250); // Debounce 250 milliseconds
+
+    const diffX = this.movement.x - this.previousMovement.x;
+    const diffY = this.movement.y - this.previousMovement.y;
+
+    this.direction = {
+      x: Math.sign(diffX),
+      y: Math.sign(diffY),
+    };
+
+    this.velocity = {
+      x: clamp(
+        diffX / t / 1000,
+        -1 * Gesture._VELOCITY_LIMIT,
+        Gesture._VELOCITY_LIMIT
+      ),
+      y: clamp(
+        diffY / t / 1000,
+        -1 * Gesture._VELOCITY_LIMIT,
+        Gesture._VELOCITY_LIMIT
+      ),
+    };
+
+    this.previousMovement = { x: this.movement.x, y: this.movement.y };
+
+    this._handleCallback();
+  }
+}

package/src/gestures/controllers/ScrollGesture.ts

@@ -0,0 +1,107 @@
+import { attachEvents } from "../eventAttacher";
+import { Vector2 } from "../types";
+import { clamp } from "../math";
+import { withDefault } from "../withDefault";
+import { Gesture } from "./Gesture";
+
+export class ScrollGesture extends Gesture {
+  isActiveID?: any;
+  movement: Vector2 = withDefault(0, 0);
+  previousMovement: Vector2 = withDefault(0, 0);
+  direction: Vector2 = withDefault(0, 0);
+  velocity: Vector2 = withDefault(0, 0);
+
+  // @override
+  // initialize the events
+  _initEvents() {
+    if (this.targetElement) {
+      this._subscribe = attachEvents(
+        [this.targetElement],
+        [["scroll", this.scrollElementListener.bind(this)]]
+      );
+    } else {
+      this._subscribe = attachEvents(
+        [window],
+        [["scroll", this.scrollListener.bind(this)]]
+      );
+    }
+  }
+
+  _handleCallback() {
+    if (this.callback) {
+      this.callback({
+        isScrolling: this.isActive,
+        scrollX: this.movement.x,
+        scrollY: this.movement.y,
+        velocityX: this.velocity.x,
+        velocityY: this.velocity.y,
+        directionX: this.direction.x,
+        directionY: this.direction.y,
+      });
+    }
+  }
+
+  onScroll({ x, y }: Vector2) {
+    const now: number = Date.now();
+    const deltaTime = Math.min(now - this.lastTimeStamp, 64);
+    this.lastTimeStamp = now;
+    const t = deltaTime / 1000; // seconds
+
+    this.movement = { x, y };
+
+    // Clear if scrolling
+    if (this.isActiveID !== -1) {
+      this.isActive = true;
+      clearTimeout(this.isActiveID);
+    }
+
+    this.isActiveID = setTimeout(() => {
+      this.isActive = false;
+      this.direction = { x: 0, y: 0 };
+
+      // Reset Velocity
+      this.velocity = { x: 0, y: 0 };
+
+      this._handleCallback(); // Debounce 250milliseconds
+    }, 250);
+
+    const diffX = this.movement.x - this.previousMovement.x;
+    const diffY = this.movement.y - this.previousMovement.y;
+
+    this.direction = {
+      x: Math.sign(diffX),
+      y: Math.sign(diffY),
+    };
+
+    this.velocity = {
+      x: clamp(
+        diffX / t / 1000,
+        -1 * Gesture._VELOCITY_LIMIT,
+        Gesture._VELOCITY_LIMIT
+      ),
+      y: clamp(
+        diffY / t / 1000,
+        -1 * Gesture._VELOCITY_LIMIT,
+        Gesture._VELOCITY_LIMIT
+      ),
+    };
+
+    this.previousMovement = {
+      x: this.movement.x,
+      y: this.movement.y,
+    };
+
+    this._handleCallback();
+  }
+
+  scrollListener() {
+    const { pageYOffset: y, pageXOffset: x } = window;
+    this.onScroll({ x, y });
+  }
+
+  scrollElementListener() {
+    const x = this.targetElement?.scrollLeft || 0;
+    const y = this.targetElement?.scrollTop || 0;
+    this.onScroll({ x, y });
+  }
+}

package/src/gestures/controllers/WheelGesture.ts

@@ -0,0 +1,123 @@
+import { attachEvents } from "../eventAttacher";
+import { Vector2 } from "../types";
+import { clamp } from "../math";
+import { withDefault } from "../withDefault";
+import { Gesture } from "./Gesture";
+
+const LINE_HEIGHT = 40;
+const PAGE_HEIGHT = 800;
+
+export class WheelGesture extends Gesture {
+  isActiveID?: any;
+  movement: Vector2 = withDefault(0, 0);
+  previousMovement: Vector2 = withDefault(0, 0);
+  direction: Vector2 = withDefault(0, 0);
+  velocity: Vector2 = withDefault(0, 0);
+  delta: Vector2 = withDefault(0, 0);
+
+  // Holds offsets
+  offset: Vector2 = withDefault(0, 0);
+  translation: Vector2 = withDefault(0, 0);
+
+  // @override
+  // initialize the events
+  _initEvents() {
+    if (this.targetElement) {
+      this._subscribe = attachEvents(
+        [this.targetElement],
+        [["wheel", this.onWheel.bind(this)]]
+      );
+    }
+  }
+
+  _handleCallback() {
+    if (this.callback) {
+      this.callback({
+        target: this.targetElement,
+        isWheeling: this.isActive,
+        deltaX: this.delta.x,
+        deltaY: this.delta.y,
+        directionX: this.direction.x,
+        directionY: this.direction.y,
+        movementX: this.movement.x,
+        movementY: this.movement.y,
+        offsetX: this.offset.x,
+        offsetY: this.offset.y,
+        velocityX: this.velocity.x,
+        velocityY: this.velocity.y,
+      });
+    }
+  }
+
+  onWheel(event: WheelEvent) {
+    let { deltaX, deltaY, deltaMode } = event;
+
+    const now: number = Date.now();
+    const deltaTime = Math.min(now - this.lastTimeStamp, 64);
+    this.lastTimeStamp = now;
+    const t = deltaTime / 1000; // seconds
+
+    this.isActive = true;
+
+    if (this.isActiveID !== -1) {
+      this.isActive = true;
+      clearTimeout(this.isActiveID);
+    }
+
+    this.isActiveID = setTimeout(() => {
+      this.isActive = false;
+      this.translation = { x: this.offset.x, y: this.offset.y };
+      this._handleCallback();
+
+      this.velocity = { x: 0, y: 0 }; // Reset Velocity
+      this.movement = { x: 0, y: 0 };
+    }, 200);
+
+    // normalize wheel values, especially for Firefox
+    if (deltaMode === 1) {
+      deltaX *= LINE_HEIGHT;
+      deltaY *= LINE_HEIGHT;
+    } else if (deltaMode === 2) {
+      deltaX *= PAGE_HEIGHT;
+      deltaY *= PAGE_HEIGHT;
+    }
+
+    this.delta = { x: deltaX, y: deltaY };
+    this.movement = {
+      x: this.movement.x + deltaX,
+      y: this.movement.y + deltaY,
+    };
+    this.offset = {
+      x: this.translation.x + this.movement.x,
+      y: this.translation.y + this.movement.y,
+    };
+
+    const diffX = this.movement.x - this.previousMovement.x;
+    const diffY = this.movement.y - this.previousMovement.y;
+
+    this.direction = {
+      x: Math.sign(diffX),
+      y: Math.sign(diffY),
+    };
+
+    this.velocity = {
+      x: clamp(
+        diffX / t / 1000,
+        -1 * Gesture._VELOCITY_LIMIT,
+        Gesture._VELOCITY_LIMIT
+      ),
+      y: clamp(
+        diffY / t / 1000,
+        -1 * Gesture._VELOCITY_LIMIT,
+        Gesture._VELOCITY_LIMIT
+      ),
+    };
+
+    this.previousMovement = {
+      x: this.movement.x,
+      y: this.movement.y,
+    };
+
+    this._handleCallback();
+  }
+}

package/src/gestures/controllers/index.ts

@@ -0,0 +1,4 @@
+export * from "./DragGesture";
+export * from "./MouseMoveGesture";
+export * from "./ScrollGesture";
+export * from "./WheelGesture";

package/src/gestures/eventAttacher.ts

@@ -0,0 +1,67 @@
+type MouseEventType =
+  | "click"
+  | "dblclick"
+  | "mousedown"
+  | "mousemove"
+  | "mouseup"
+  | "touchstart"
+  | "touchmove"
+  | "touchend"
+  | "mouseenter"
+  | "mouseleave"
+  | "mouseout"
+  | "mouseover"
+  | "scroll"
+  | "wheel"
+  | "contextmenu";
+
+type DomTargetTypes = Array<Window | Document | HTMLElement>;
+
+/**
+ * Attach single document / window event / HTMLElement
+ */
+function attachEvent(
+  domTargets: DomTargetTypes,
+  event: MouseEventType,
+  callback: (e: any) => void,
+  capture: any = false
+) {
+  domTargets.forEach((target) => {
+    target.addEventListener(event, callback, capture);
+  });
+
+  return function () {
+    domTargets.forEach((target) => {
+      target.removeEventListener(event, callback, capture);
+    });
+  };
+}
+
+/**
+ * Attach multiple document / window event / HTMLElement
+ */
+export function attachEvents(
+  domTargets: DomTargetTypes,
+  events: Array<
+    [event: MouseEventType, callback: (e: any) => void, capture?: any]
+  >
+) {
+  const subscribers = new Map();
+
+  events.forEach(function ([event, callback, capture = false]) {
+    subscribers.set(event, attachEvent(domTargets, event, callback, capture));
+  });
+
+  return function (eventKeys?: Array<string>) {
+    for (const [eventKey, subscriber] of subscribers.entries()) {
+      if (!eventKeys) {
+        subscriber();
+        return;
+      }
+
+      if (eventKeys.indexOf(eventKey) !== -1) {
+        subscriber();
+      }
+    }
+  };
+}

package/src/gestures/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from "./useDrag";
+export * from "./useMouseMove";
+export * from "./useScroll";
+export * from "./useWheel";
+export * from "./useGesture";

package/src/gestures/hooks/useDrag.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+import { DragEventType, UseDragConfig } from "../types";
+import { DragGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useDrag(
+  callback: (event: DragEventType) => void,
+  config?: UseDragConfig
+) {
+  const gesture = React.useRef(new DragGesture()).current;
+
+  return useRecognizer([["drag", gesture, callback, config]]);
+}

package/src/gestures/hooks/useGesture.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import {
+  DragGesture,
+  MouseMoveGesture,
+  ScrollGesture,
+  WheelGesture,
+} from "../controllers";
+import {
+  DragEventType,
+  WheelEventType,
+  ScrollEventType,
+  MouseMoveEventType,
+} from "../types";
+import { useRecognizer } from "./useRecognizer";
+
+export function useGesture({
+  onDrag,
+  onWheel,
+  onScroll,
+  onMouseMove,
+}: {
+  onDrag?: (event: DragEventType) => void;
+  onWheel?: (event: WheelEventType) => void;
+  onScroll?: (event: ScrollEventType) => void;
+  onMouseMove?: (event: MouseMoveEventType) => void;
+}) {
+  const dragGesture = React.useRef(new DragGesture()).current;
+  const wheelGesture = React.useRef(new WheelGesture()).current;
+  const scrollGesture = React.useRef(new ScrollGesture()).current;
+  const mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
+
+  return useRecognizer([
+    ["drag", dragGesture, onDrag],
+    ["wheel", wheelGesture, onWheel],
+    ["scroll", scrollGesture, onScroll],
+    ["move", mouseMoveGesture, onMouseMove],
+  ]);
+}

package/src/gestures/hooks/useMouseMove.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import { MouseMoveEventType } from "../types";
+import { MouseMoveGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useMouseMove(callback: (event: MouseMoveEventType) => void) {
+  const gesture = React.useRef(new MouseMoveGesture()).current;
+
+  return useRecognizer([["move", gesture, callback]]);
+}

package/src/gestures/hooks/useRecognizer.ts

@@ -0,0 +1,59 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from "react";
+
+type UseRecognizerHandlerType = Array<
+  [
+    key: "drag" | "wheel" | "move" | "scroll",
+    gesture: any,
+    callback: any,
+    config?: any
+  ]
+>;
+
+export const useRecognizer = (handlers: UseRecognizerHandlerType) => {
+  const ref = React.useRef<any>();
+  const elementRefs = React.useRef<Array<any>>([]);
+  const subscribers = React.useRef<
+    Map<string, { keyIndex: number; gesture: any; unsubscribe: any }>
+  >(new Map()).current;
+
+  // re-initiate callback on change
+  React.useEffect(() => {
+    for (let [, { keyIndex, gesture }] of subscribers.entries()) {
+      const [, , callback] = handlers[keyIndex];
+      gesture.applyCallback(callback);
+    }
+  }, [handlers]);
+
+  React.useEffect(() => {
+    handlers.forEach(([key, gesture, callback, config], keyIndex) => {
+      subscribers.set(key, {
+        keyIndex,
+        gesture,
+        unsubscribe: gesture.applyGesture({
+          targetElement: ref.current,
+          targetElements: elementRefs.current,
+          callback,
+          config,
+        }),
+      });
+    });
+
+    return () => {
+      for (let [, { unsubscribe }] of subscribers.entries()) {
+        unsubscribe && unsubscribe();
+      }
+    };
+  }, []);
+
+  return (index?: number) => {
+    if (index === null || index === undefined) {
+      return { ref };
+    } else {
+      elementRefs.current[index] =
+        elementRefs.current[index] || React.createRef();
+
+      return { ref: elementRefs.current[index] };
+    }
+  };
+};

package/src/gestures/hooks/useScroll.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import { ScrollEventType } from "../types";
+import { ScrollGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useScroll(callback: (event: ScrollEventType) => void) {
+  const gesture = React.useRef(new ScrollGesture()).current;
+
+  return useRecognizer([["scroll", gesture, callback]]);
+}

package/src/gestures/hooks/useWheel.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import { WheelEventType } from "../types";
+import { WheelGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useWheel(callback: (event: WheelEventType) => void) {
+  const gesture = React.useRef(new WheelGesture()).current;
+
+  return useRecognizer([["wheel", gesture, callback]]);
+}

package/src/gestures/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export * from "./math";

package/src/{Types.ts → gestures/types.ts}

@@ -1,21 +1,3 @@
-export type MeasurementValue = number | Array<number>;
-
-export type MeasurementType = {
-  left: MeasurementValue;
-  top: MeasurementValue;
-  width: MeasurementValue;
-  height: MeasurementValue;
-  vLeft: MeasurementValue;
-  vTop: MeasurementValue;
-};
-
-export type WindowDimensionType = {
-  width: number;
-  height: number;
-  innerWidth: number;
-  innerHeight: number;
-};
-
 type GenericEventType = {
   velocityX: number;
   velocityY: number;
@@ -23,23 +5,6 @@ type GenericEventType = {
   directionY: number;
 };
 
-export type ScrollEventType = {
-  isScrolling: boolean;
-  scrollX: number;
-  scrollY: number;
-} & GenericEventType;
-
-export type WheelEventType = {
-  target: HTMLElement | undefined | null;
-  isWheeling: boolean;
-  movementX: number;
-  movementY: number;
-  offsetX: number;
-  offsetY: number;
-  deltaX: number;
-  deltaY: number;
-} & GenericEventType;
-
 export type DragEventType = {
   args: Array<number | undefined>;
   down: boolean;
@@ -53,14 +18,32 @@ export type DragEventType = {
 } & GenericEventType;
 
 export type MouseMoveEventType = {
+  args: Array<number | undefined>;
+  event: MouseEvent;
   target: EventTarget | undefined | null;
   isMoving: boolean;
   mouseX: number;
   mouseY: number;
 } & GenericEventType;
 
+export type ScrollEventType = {
+  isScrolling: boolean;
+  scrollX: number;
+  scrollY: number;
+} & GenericEventType;
+
+export type WheelEventType = {
+  target: HTMLElement | undefined | null;
+  isWheeling: boolean;
+  movementX: number;
+  movementY: number;
+  offsetX: number;
+  offsetY: number;
+  deltaX: number;
+  deltaY: number;
+} & GenericEventType;
+
 export type UseDragConfig = {
   initial?: () => { movementX: number; movementY: number };
 };
-
 export type Vector2 = { x: number; y: number };

package/src/gestures/withDefault.ts

@@ -0,0 +1,3 @@
+export const withDefault = (x: number, y: number) => {
+  return { x, y };
+};

package/src/hooks/index.ts

@@ -1,7 +1,3 @@
 export * from "./useOutsideClick";
 export * from "./useMeasure";
 export * from "./useWindowDimension";
-export * from "./useScroll";
-export * from "./useDrag";
-export * from "./useMouseMove";
-export * from "./useWheel";

package/src/hooks/useMeasure.ts

@@ -1,5 +1,15 @@
 import * as React from "react";
-import { MeasurementType } from "../Types";
+
+type MeasurementValue = number | Array<number>;
+
+type MeasurementType = {
+  left: MeasurementValue;
+  top: MeasurementValue;
+  width: MeasurementValue;
+  height: MeasurementValue;
+  vLeft: MeasurementValue;
+  vTop: MeasurementValue;
+};
 
 export function useMeasure(
   callback: (event: MeasurementType) => void,