how can i make this work on reactjs
ionutale opened this issue · 7 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'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.