Merge branch 'master' of https://github.com/elmarti/react-joystick-co…

…mponent

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 build
 .cache
-yarn-error.log
+yarn-error.log
+.DS_Store

README.md

@@ -38,7 +38,7 @@ Component Props - as described by IJoystickProps - all are optional
 | disabled | Boolean | When true, block any usage of the Joystick. This will also apply the `joystick-disabled` and `joystick-base-disabled` classNames  |
 | stickShape | JoystickShape | The shape of the joystick default = circle|
 | baseShape | JoystickShape | The shape of the joystick default = circle|
-| controlPlaneShape | JoystickShape | Override the default shape behaviour of the control plane|
+| controlPlaneShape | JoystickShape | Override the default shape behaviour of the control plane - circle, square, axisX, axisY|
 | minDistance | number | Percentage 0-100 - the minimum distance to start receive IJoystickMove events|
 
 ```TypeScript

src/Joystick.stories.tsx

@@ -31,7 +31,14 @@ joystickStories.add("Yellow (custom colors) joystick",
         stickColor={"#FFD300"} move={action("Moved")}
         stop={action("Stopped")}/>);
 
-
+joystickStories.add("Y Axis only",
+        () => <Joystick
+            controlPlaneShape={JoystickShape.AxisY}  start={action("Started")} throttle={50}
+            move={action("Moved")} stop={action("Stopped")}/>);
+joystickStories.add("X Axis only",
+        () => <Joystick
+            controlPlaneShape={JoystickShape.AxisX}  start={action("Started")} throttle={50}
+            move={action("Moved")} stop={action("Stopped")}/>);
 joystickStories.add("50ms throttled joystick", () => <Joystick start={action("Started")} throttle={50}
                                                                move={action("Moved")} stop={action("Stopped")}/>);
 

src/enums/shape.enum.ts

@@ -1,4 +1,6 @@
 export enum JoystickShape {
     Circle = 'circle',
-    Square = 'square'
+    Square = 'square',
+    AxisY = 'axisY',
+    AxisX = 'axisX',
 }

src/shapes/shape.bounds.factory.ts

@@ -15,7 +15,15 @@ export const shapeBoundsFactory = (
             relativeX = getWithinBounds(absoluteX - parentRect.left - (baseSize / 2), baseSize);
             relativeY = getWithinBounds(absoluteY - parentRect.top - (baseSize / 2), baseSize);
             return {relativeX, relativeY};
+        case JoystickShape.AxisX:
+            relativeX = getWithinBounds(absoluteX - parentRect.left - (baseSize / 2), baseSize);
+            relativeY = 0;
+        return {relativeX, relativeY};
 
+        case JoystickShape.AxisY:
+            relativeX = 0
+            relativeY = getWithinBounds(absoluteY - parentRect.top - (baseSize / 2), baseSize);
+            return {relativeX, relativeY};
         default:
             if (dist > radius) {
                 relativeX *= radius / dist;