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();