Fix: angle calulation bug [publish-beta] (#14)

* Fix: angle calulation bug
- Round up angle to 0 to 2 * PI
- Add prettier & auto formatting on save config

* update package version

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "jsxBracketSameLine": true
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-swipe-hook",
-  "version": "2.0.0-beta2",
+  "version": "2.0.0-beta3",
   "description": "A simple and easy to use tiny library that provides useSwipe hook to use with React that enables swipe gestures for touch screens",
   "main": "lib/umd/index.js",
   "browser": "lib/umd/index.js",
@@ -22,6 +22,7 @@
   "keywords": [
     "touch",
     "swipe",
+    "drag",
     "react",
     "hooks"
   ],
@@ -49,4 +50,4 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
-}
+}

src/helper.ts

@@ -3,5 +3,5 @@ export function square(x: number) {
 }
 
 export function radToDeg(x: number) {
-  return x * 360 / Math.PI;
-}
+  return (x * 180) / Math.PI;
+}

src/index.ts

@@ -1,3 +1,3 @@
 export { default as useSwipe, SWIPE_DIRECTION } from './useSwipe';
 export { default as useSwipePosition } from './useSwipePosition';
-export { default as useSwipeVector } from './useSwipeVector';
+export { default as useSwipeVector } from './useSwipeVector';

src/types.ts

@@ -1,9 +1,11 @@
-import { RefObject } from "react";
+import { RefObject } from 'react';
 export interface UseSwipeOptions {
   // ref of the container where you want to attach swipe event
   ref: RefObject<HTMLElement>;
-  // (optional) no of pixels to move your finger to trigger a swipe event. 
+  // (optional) no of pixels to move your finger to trigger a swipe event.
   // Larger this value means less sensitivity. Default value is 5 (5px)
   thresholdPX?: number;
-  unit?: 'rad' | 'deg';// unit of direction for useSwipeVector hook
-};
+  unit?: 'rad' | 'deg'; // unit of direction for useSwipeVector hook
+  // whether to use position units based relative to canvas rather than with respect to window
+  useRelativeUnits?: boolean;
+}

src/useSwipe.ts

@@ -4,10 +4,10 @@ import useSwipePosition from './useSwipePosition';
 
 // SWIPE_DIRECTION can be imported & used for comparison
 export enum SWIPE_DIRECTION {
-  RIGHT = "right",
-  LEFT = "left",
-  UP = "up",
-  DOWN = "down"
+  RIGHT = 'right',
+  LEFT = 'left',
+  UP = 'up',
+  DOWN = 'down',
 }
 
 const useSwipe = ({ ref, thresholdPX = 5 }: UseSwipeOptions) => {
@@ -26,4 +26,4 @@ const useSwipe = ({ ref, thresholdPX = 5 }: UseSwipeOptions) => {
   return direction;
 };
 
-export default useSwipe;
+export default useSwipe;

src/useSwipePosition.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { UseSwipeOptions } from './types';
 
-const useSwipePosition = ({ ref }: UseSwipeOptions) => {
+const useSwipePosition = ({ ref, useRelativeUnits = false }: UseSwipeOptions) => {
   const [x1, setX1] = useState(0);
   const [y1, setY1] = useState(0);
   const [x2, setX2] = useState(0);
@@ -14,8 +14,7 @@ const useSwipePosition = ({ ref }: UseSwipeOptions) => {
       if (isTouchDevice()) {
         currentElement.addEventListener('touchstart', handleTouchStart);
         currentElement.addEventListener('touchend', handleTouchEnd);
-      }
-      else {
+      } else {
         currentElement.addEventListener('mousedown', handleMouseDown);
         currentElement.addEventListener('mouseup', handleMouseUp);
       }
@@ -26,13 +25,12 @@ const useSwipePosition = ({ ref }: UseSwipeOptions) => {
         if (isTouchDevice()) {
           currentElement.removeEventListener('touchstart', handleTouchStart);
           currentElement.removeEventListener('touchend', handleTouchEnd);
-        }
-        else {
+        } else {
           currentElement.removeEventListener('mousedown', handleMouseDown);
           currentElement.removeEventListener('mouseup', handleMouseUp);
         }
       }
-    }
+    };
   }, [ref]);
 
   function handleTouchStart(event: TouchEvent) {
@@ -48,18 +46,33 @@ const useSwipePosition = ({ ref }: UseSwipeOptions) => {
   }
 
   function handleMouseDown(event: MouseEvent) {
-    setX1(event.clientX);
-    setY1(event.clientY);
+    const { x, y } = getDimensionsFromEvent(event);
+    setX1(x);
+    setY1(y);
   }
 
   function handleMouseUp(event: MouseEvent) {
-    setX2(event.clientX);
-    setY2(event.clientY);
+    const { x, y } = getDimensionsFromEvent(event);
+    setX2(x);
+    setY2(y);
+  }
+
+  function getDimensionsFromEvent(event: MouseEvent) {
+    let x = event.clientX,
+      y = event.clientY;
+
+    if (useRelativeUnits && ref.current) {
+      const { top, left } = ref.current.getBoundingClientRect();
+      x -= left;
+      y -= top;
+    }
+
+    return { x, y };
   }
 
   return { x1, y1, x2, y2 };
 };
 
-const isTouchDevice = () => ('ontouchstart' in window);
+const isTouchDevice = () => 'ontouchstart' in window;
 
-export default useSwipePosition;
+export default useSwipePosition;

src/useSwipeVector.ts

@@ -3,16 +3,17 @@ import { radToDeg, square } from './helper';
 import { UseSwipeOptions } from './types';
 import useSwipePosition from './useSwipePosition';
 
-const useSwipeVector = ({ ref, thresholdPX = 5, unit = 'rad' }: UseSwipeOptions) => {
-  const { x1, y1, x2, y2 } = useSwipePosition({ ref });
+const useSwipeVector = ({ ref, thresholdPX = 5, unit = 'rad', useRelativeUnits = false }: UseSwipeOptions) => {
+  const { x1, y1, x2, y2 } = useSwipePosition({ ref, useRelativeUnits });
   const [direction, setDirection] = useState(0);
   const [magnitude, setMagnitude] = useState(0);
 
   useEffect(() => {
     const mag = Math.sqrt(square(x2 - x1) + square(y2 - y1));
 
     if (mag > thresholdPX) {
-      const angleRad = Math.atan2(y2 - y1, x2 - x1);
+      // Rounding up to 0 to 2 * PI
+      const angleRad = (2 * Math.PI + Math.atan2(y2 - y1, x2 - x1)) % (2 * Math.PI);
 
       setMagnitude(mag);
       setDirection(unit === 'rad' ? angleRad : radToDeg(angleRad));
@@ -23,4 +24,4 @@ const useSwipeVector = ({ ref, thresholdPX = 5, unit = 'rad' }: UseSwipeOptions)
   return { direction, magnitude, origin: { x: x1, y: y1 } };
 };
 
-export default useSwipeVector;
+export default useSwipeVector;