react-ui-animate 3.0.0-rc.0 → 3.0.0-rc.1

package/src/gestures/controllers/Gesture.ts

@@ -1,54 +0,0 @@
-export class Gesture {
-  currentIndex?: number;
-  lastTimeStamp: number = Date.now();
-  isActive: boolean = false;
-  targetElement?: HTMLElement; // represents the bounded element
-  targetElements: Array<HTMLElement> = []; // represents the bounded elements
-  config?: any;
-  callback?: <T>(event: T) => void;
-  _subscribe?: (eventKeys?: Array<string>) => void;
-  static _VELOCITY_LIMIT: number = 20;
-
-  // it must be overridden by other child classes
-  _initEvents() {}
-
-  // cancel events
-  // we only canceled down and move events because mouse up
-  // will not be triggered
-  _cancelEvents() {
-    if (this._subscribe) {
-      this._subscribe();
-    }
-  }
-
-  // re-apply new callback
-  applyCallback(callback: <T>(event: T) => void) {
-    this.callback = callback;
-  }
-
-  // apply gesture
-  applyGesture({
-    targetElement,
-    targetElements,
-    callback,
-    config,
-  }: {
-    targetElement?: any;
-    targetElements?: any;
-    callback: <T>(event: T) => void;
-    config?: any;
-  }) {
-    this.targetElement = targetElement;
-    this.targetElements = targetElements.map(
-      (element: { current: any }) => element.current
-    );
-    this.callback = callback;
-    this.config = config;
-
-    // initialize events
-    this._initEvents();
-
-    // unbind
-    return () => this._subscribe && this._subscribe();
-  }
-}

package/src/gestures/controllers/MouseMoveGesture.ts

@@ -1,111 +0,0 @@
-import { attachEvents } from '../helpers/eventAttacher';
-import { Vector2 } from '../types';
-import { clamp } from '../helpers/math';
-import { withDefault } from '../helpers/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

@@ -1,107 +0,0 @@
-import { attachEvents } from '../helpers/eventAttacher';
-import { Vector2 } from '../types';
-import { clamp } from '../helpers/math';
-import { withDefault } from '../helpers/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

@@ -1,123 +0,0 @@
-import { attachEvents } from '../helpers/eventAttacher';
-import { Vector2 } from '../types';
-import { clamp } from '../helpers/math';
-import { withDefault } from '../helpers/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

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

package/src/gestures/helpers/eventAttacher.ts

@@ -1,67 +0,0 @@
-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/helpers/index.ts

@@ -1 +0,0 @@
-export * from './math';

package/src/gestures/helpers/math.ts

@@ -1,120 +0,0 @@
-/**
- * bin(booleanValue)
- * returns 1 if booleanValue == true and 0 if booleanValue == false
- */
-export function bin(bool: boolean) {
-  return bool ? 1 : 0;
-}
-
-/**
- * mix(progress, a, b)
- * linear interpolation between a and b
- */
-export function mix(perc: number, val1: number, val2: number) {
-  return val1 * (1 - perc) + val2 * perc;
-}
-
-/**
- * clamp(value, min, max)
- * clamps value for min and max bounds
- */
-export function clamp(value: number, lowerbound: number, upperbound: number) {
-  return Math.min(Math.max(value, lowerbound), upperbound);
-}
-
-function rubber2(distanceFromEdge: number, constant: number) {
-  return Math.pow(distanceFromEdge, constant * 5);
-}
-
-function rubber(distanceFromEdge: number, dimension: number, constant: number) {
-  if (dimension === 0 || Math.abs(dimension) === Infinity)
-    return rubber2(distanceFromEdge, constant);
-  return (
-    (distanceFromEdge * dimension * constant) /
-    (dimension + constant * distanceFromEdge)
-  );
-}
-
-/**
- * rubberClamp(value, min, max, constant?)
- * constant is optional : default 0.15
- * clamps the value for min and max value and
- * extends beyond min and max values with constant
- * factor to create elastic rubber band effect
- */
-export function rubberClamp(
-  value: number,
-  lowerbound: number,
-  upperbound: number,
-  constant: number = 0.15
-) {
-  if (constant === 0) return clamp(value, lowerbound, upperbound);
-
-  if (value < lowerbound) {
-    return (
-      -rubber(lowerbound - value, upperbound - lowerbound, constant) +
-      lowerbound
-    );
-  }
-
-  if (value > upperbound) {
-    return (
-      +rubber(value - upperbound, upperbound - lowerbound, constant) +
-      upperbound
-    );
-  }
-
-  return value;
-}
-
-/**
- * snapTo(value, velocity, snapPoints[])
- * Calculates the final snapPoint according to given current value,
- * velocity and snapPoints array
- */
-export function snapTo(
-  value: number,
-  velocity: number,
-  snapPoints: Array<number>
-): number {
-  const finalValue = value + velocity * 0.2;
-  const getDiff = (point: number) => Math.abs(point - finalValue);
-  const deltas = snapPoints.map(getDiff);
-  const minDelta = Math.min(...deltas);
-
-  return snapPoints.reduce(function (acc, point) {
-    if (getDiff(point) === minDelta) {
-      return point;
-    } else {
-      return acc;
-    }
-  });
-}
-
-/**
- * move(array, moveIndex, toIndex)
- * move array item from moveIndex to toIndex without array modification
- */
-export function move(array: Array<any>, moveIndex: number, toIndex: number) {
-  const item = array[moveIndex];
-  const length = array.length;
-  const diff = moveIndex - toIndex;
-
-  if (diff > 0) {
-    return [
-      ...array.slice(0, toIndex),
-      item,
-      ...array.slice(toIndex, moveIndex),
-      ...array.slice(moveIndex + 1, length),
-    ];
-  } else if (diff < 0) {
-    const targetIndex = toIndex + 1;
-    return [
-      ...array.slice(0, moveIndex),
-      ...array.slice(moveIndex + 1, targetIndex),
-      item,
-      ...array.slice(targetIndex, length),
-    ];
-  }
-  return array;
-}

package/src/gestures/helpers/withDefault.ts

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

package/src/gestures/hooks/index.ts

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

package/src/gestures/hooks/useDrag.ts

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

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

@@ -1,11 +0,0 @@
-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]]);
-}