From 9865683052321a9da180ff1c5ddbe591d797b1fa Mon Sep 17 00:00:00 2001
From: elmarti <jerpdertin@gmail.com>
Date: Thu, 24 Nov 2022 17:50:22 +0000
Subject: [PATCH] :boom: :bug: fix ratio not working for standard joystick

---
 README.md        | 4 ----
 src/Joystick.tsx | 6 ++++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index a3bca97..1f4edd5 100644
--- a/README.md
+++ b/README.md
@@ -19,10 +19,6 @@ import { Joystick } from 'react-joystick-component';
 <Joystick size={100} sticky={true} baseColor="red" stickColor="blue" move={handleMove} stop={handleStop}></Joystick>
 ```
 
-### Migrating from V1
-The main breaking change is that the control plane is no longer square by default - if you require a square control plane on a circular joystick, you can set `controlPlaneShape='square'` which will give you the original behaviour.
-
-
 Component Props - as described by IJoystickProps - all are optional
 
 | Prop  | Type  | Description  |
diff --git a/src/Joystick.tsx b/src/Joystick.tsx
index 09456cc..818e721 100644
--- a/src/Joystick.tsx
+++ b/src/Joystick.tsx
@@ -75,6 +75,7 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
     private _radius: number;
     private _parentRect: DOMRect;
     private _pointerId: number|null = null
+    private _distanceRatio: number;
 
     constructor(props: IJoystickProps) {
         super(props);
@@ -150,8 +151,8 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
         }
         this._throttleMoveCallback({
             type: "move",
-            x: this.props.size ? ((coordinates.relativeX * 2) / this.props.size) : coordinates.relativeX,
-            y: this.props.size ? -((coordinates.relativeY*2) / this.props.size) : coordinates.relativeY,
+            x: ((coordinates.relativeX * 2) / this._baseSize),
+            y: -((coordinates.relativeY * 2) / this._baseSize),
             direction: coordinates.direction,
             distance: coordinates.distance
         });
@@ -382,6 +383,7 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
 
     render() {
         this._baseSize = this.props.size || 100;
+        this._distanceRatio = this._baseSize / 100;
         this._stickSize = this.props.stickSize;
         this._radius = this._baseSize / 2;
         const baseStyle = this._getBaseStyle();