Merge pull request #59 from elmarti/xpos-ypos

Xpos ypos - Fall back to `pos` param after rendering.

README.md

@@ -40,7 +40,7 @@ Component Props - as described by IJoystickProps - all are optional
 | baseShape | JoystickShape | The shape of the joystick default = circle|
 | 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|
-
+| pos | {x: number, y: number}| Override the joystick position (doesn't work if the user is interacting. You can use `disabled` to force this)|
 ```TypeScript
 import {JoystickShape} from "./shape.enum"; 
 interface IJoystickProps {
@@ -61,6 +61,7 @@ interface IJoystickProps {
     stickShape?: JoystickShape;
     controlPlaneShape?: JoystickShape;
     minDistance?: number;
+    pos: {x: number, y: number}
 }
 ```
 

src/Joystick.stories.tsx

@@ -31,6 +31,27 @@ joystickStories.add("Yellow (custom colors) joystick",
         stickColor={"#FFD300"} move={action("Moved")}
         stop={action("Stopped")}/>);
 
+joystickStories.add("Position override",
+() => <Joystick
+    start={action("Started")}
+    pos={{x: 40, y: 40}}
+    baseColor={"#FFFF99"}
+    stickColor={"#FFD300"} move={action("Moved")}
+    stop={action("Stopped")}/>);
+
+    joystickStories.add("Position override with second joystick",
+() => {
+const [joystickPos, setJoystickPos] = useState({x:0, y:0});
+const handleMove = (event) => {
+    setJoystickPos({x: event.x, y: event.y})
+};
+return <>
+<Joystick pos={joystickPos} move={handleMove}/>
+
+<Joystick pos={joystickPos} disabled={true}/>
+
+</>;});
+
 joystickStories.add("Y Axis only",
         () => <Joystick
             controlPlaneShape={JoystickShape.AxisY}  start={action("Started")} throttle={50}

src/Joystick.test.tsx

@@ -178,5 +178,22 @@ describe('Joystick component', () => {
 
       //   expect(moveCallback).not.toHaveBeenCalled();
       // });
+
+
+  test('renders the joystick stick at the correct position when the pos prop is provided', () => {
+    const pos = { x: 0.4, y: -0.6 };
+    const size = 100;
+    const expectedStickPosition = {
+      x: (pos.x * size) / 2,
+      y: -(pos.y * size) / 2,
+    };
+
+    render(<Joystick size={size} pos={pos} />);
+    const stick = screen.getByRole('button');
+
+    expect(stick).toHaveStyle({
+      transform: `translate3d(${expectedStickPosition.x}px, ${expectedStickPosition.y}px, 0)`,
+    });
+  });
 
   });

src/Joystick.tsx

@@ -21,6 +21,7 @@ export interface IJoystickProps {
     stickShape?: JoystickShape;
     controlPlaneShape?: JoystickShape;
     minDistance?: number;
+    pos?: {x: number, y: number};
 }
 
 enum InteractionEvents {
@@ -382,6 +383,12 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
             stickStyle.background = `url(${this.props.stickImage})`;
             stickStyle.backgroundSize = '100%'
         }
+        if(this.props.pos){
+            stickStyle = Object.assign({}, stickStyle, {
+                position: 'absolute',
+                transform: `translate3d(${(this.props.pos.x * this._baseSize)/2 }px, ${-(this.props.pos.y * this._baseSize)/2}px, 0)`
+            });
+        }
 
         if (this.state.coordinates !== undefined) {
             stickStyle = Object.assign({}, stickStyle, {