Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Slider doesn't accurately react to touch. #17
I was messing around with the slider code and noticed that often when you are moving it around the circle it will not properly adjust itself to the exact position it should be in.
Images below show the error being reproduced in an android emulator and i have also tried compiling to native android and running again, still the same issue.
Basically what is happening is that at 12 o'clock the button correctly follows the mouse movements but as i move around the circle it does not perfectly follow the touch position onscreen. i feel this is a maths error since it starts correctly at the 12 position and ill be diving into trying to fix the issue myself after i do some other work but i thought id run it past here in case i can get a nice point to somewhere to start, anything is appreciated.
The red lines in the images are the mouse position. All the movements in the screenshots are counter clockwise bar the 12 0'clock position image so you can tell where the onTouchEnd position is.
I have figured out that the issue is caused by the sliders initial containerWidth being called asynchronously at the same time as the rendering of the SVG elements. the setState() on line 134 of circularSlider.js (inside the setCircleCenter() function) needs to complete before the component is mounted.
i noticed that in the setCircleCenter() function the py value was what wasnt being updated properly but that px was set correctly so i made py to be a function of px as shown in my below snippet.
For my use case this works, maybe you can find something similar.
A suggestion would be to find some way to call this.setCircleCenter(); after all rendering is complete, maybe onResponderGrant, but this would be a state change and cause rendering.