✨ Add sticky joystick

The joystick will now stay in place if sticky is set to true

Author: elmarti

README.md

@@ -14,7 +14,7 @@ import { Joystick } from 'react-joystick-component';
 
 
 ```React
-<Joystick size={100} baseColor="red" stickColor="blue" move={handleMove} stop={handleStop}></Joystick>
+<Joystick size={100} sticky={true} baseColor="red" stickColor="blue" move={handleMove} stop={handleStop}></Joystick>
 ```
 
 Component Props - as described by IJoystickProps
@@ -25,6 +25,7 @@ Component Props - as described by IJoystickProps
 |  baseColor |  string |  The color of the Joystick base |
 | stickColor  |  string |  The color of the Stick |
 |  throttle | number  |  The [throttling](https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf) rate of the move callback |
+| sticky | Boolean | Should the joystick stay where it is when the interaction ends |
 |  move | Function  | Callback fired on every mouse move, not throttled unless a throttling rate is provided as above  |
 |  stop | Function  | Callback fired when the user releases the joystick  |
 | start  |  Function | Callback fired when the user starts moving the Joystick  |
@@ -37,6 +38,7 @@ interface IJoystickProps {
     stickColor?: string;
     disabled?: boolean;
     throttle?: number;
+    sticky?: boolean;
     move?: (event: IJoystickUpdateEvent) => void;
     stop?: (event: IJoystickUpdateEvent) => void;
     start?: (event: IJoystickUpdateEvent) => void;

package.json

@@ -21,7 +21,7 @@
     "deploy-storybook": "storybook-to-ghpages"
   },
   "repository": "https://github.com/elmarti/react-joystick-component",
-  "author": "elmarti info@elmarti.tech",
+  "author": "elmarti elmarti.tech@gmail.com",
   "license": "MIT",
   "devDependencies": {
     "@storybook/addon-actions": "^6.4.9",

src/Joystick.stories.tsx

@@ -23,6 +23,9 @@ joystickStories.add("200ms throttled joystick", ()=> <Joystick start={action("St
 
 joystickStories.add("500ms throttled joystick", ()=> <Joystick start={action("Started")} throttle={500} move={action("Moved")} stop={action("Stopped")} />);
 
+joystickStories.add("Sticky joystick", ()=> <Joystick sticky={true} start={action("Started")} throttle={50} move={action("Moved")} stop={action("Stopped")} />);
+
+
 
 joystickStories.add("HUGE joystick", ()=> <Joystick start={action("Started")}move={action("Moved")} stop={action("Stopped")}  size={500}/>);
 joystickStories.add("Tiny joystick", ()=> <Joystick start={action("Started")}move={action("Moved")} stop={action("Stopped")}  size={50}/>);

src/Joystick.tsx

@@ -6,6 +6,7 @@ export interface IJoystickProps {
     stickColor?: string;
     throttle?: number;
     disabled?: boolean;
+    sticky?: boolean;
     move?: (event: IJoystickUpdateEvent) => void;
     stop?: (event: IJoystickUpdateEvent) => void;
     start?: (event: IJoystickUpdateEvent) => void;
@@ -219,19 +220,25 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
      * @private
      */
     private _mouseUp() {
-        this.setState({
+        const stateUpdate = {
             dragging: false,
-            coordinates: undefined
-        });
+        };
+        if(!this.props.sticky){
+            stateUpdate['coordinates'] = undefined;
+        }
+        this.setState(stateUpdate);
         window.removeEventListener("mouseup", this._boundMouseUp);
         window.removeEventListener("mousemove", this._boundMouseMove);
 
         if (this.props.stop) {
             this.props.stop({
                 type: "stop",
-                x: null,
-                y: null,
-                direction: null
+                //@ts-ignore
+                x: this.props.sticky ? this.state.coordinates.relativeX : null,
+                //@ts-ignore
+                y: this.props.sticky ? this.state.coordinates.relativeY : null,
+                //@ts-ignore
+                direction: this.props.sticky ? this.state.coordinates.direction :  null
             });
         }
 
@@ -275,7 +282,7 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
             flexShrink: 0
         };
 
-        if (this.state.dragging && this.state.coordinates !== undefined) {
+        if (this.state.coordinates !== undefined) {
             stickStyle = Object.assign({}, stickStyle, {
                 position: 'absolute',
                 transform: `translate3d(${this.state.coordinates.relativeX}px, ${this.state.coordinates.relativeY}px, 0)`