how can i make this work on reactjs
ionutale opened this issue · comments
how can i make this work on reactjs ?
@jhonyourangel +1, I would love to use this library in web!
Me to pleeeease.
badly need this lib in react JS...
I've cloned this package and got it working in ReactJS. Just having some trouble with the "sliding" or "scrolling" of the start and end icons. It works, but does not follow the mouse quite as well as expected yet.
I'll play around some more with it today and then push the updates to git possibly tomorrow. It relates to calculating the new angle and length via the mouse X and Y. The old code does the calcs here, but I'm not quite sure what actual values moveX and moveY provide here. Are the relative to screen X/Y, or component X/Y etc...
onPanResponderMove: (evt, { moveX, moveY }) => {
const { circleCenterX, circleCenterY } = this.state;
const { angleLength, startAngle, onUpdate } = this.props;
const currentAngleStop = (startAngle + angleLength) % (2 * Math.PI);
let newAngle = Math.atan2(moveY - circleCenterY, moveX - circleCenterX) + Math.PI / 2;
if (newAngle < 0) {
newAngle += 2 * Math.PI;
}
let newAngleLength = currentAngleStop - newAngle;
if (newAngleLength < 0) {
newAngleLength += 2 * Math.PI;
}
onUpdate({ startAngle: newAngle, angleLength: newAngleLength % (2 * Math.PI) });
}
I've pushed a working version to https://github.com/Quentinb/react-web-circular-slider and published it on NPM https://www.npmjs.com/package/react-web-circular-slider.
Still needs a bit of work and cleanup but us currently in a functioning state.