change joystick position x and y to have a range of [-1, 1] instead of based on the rendered size of the joystick

[lukedukeus]

[elmarti]

Hey @lukedukeus, what's this fixing?

[lukedukeus]

Right now, when you move the joystick, it tells you the joysticks position relative to the size of the joystick. So, if I move the joystick to the top right, and my joystick has a size of 100, its position would be [50, 50]. I think that instead, top right should be [1, 1]. The problem I have with this is that the joystick will produce different outputs based on screen size if it is being used in a responsive layout. This way, the joystick always has a fixed set of values that it uses. I chose the range [-1, 1], because it works out nicely if you are using the joystick to transform something, you can multiply by its x or y value, which will be a percentage of 1.

Feel free to close this if you think it isn't an improvement, If others have the same issue, they can just divide their output by the size of the joystick.

[elmarti]

@lukedukeus I think this is good, there is a bug if the size prop is not set, so this will need a fallback when this is not set

[lukedukeus]

I Havent tested it, but I just set it to fall back to the default behavior if size is undefined

[elmarti]

@lukedukeus Hey I dropped the ball on merging this one, but it makes sense. I'll add a gitmoji 💥 as it's a breaking change

[github-actions[bot]]

:tada: This PR is included in version 5.0.0 :tada:

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot :package::rocket: