react-rotary-knob
react-rotary-knob copied to clipboard
KnobVisualHelpers uses vbox.width to calculate centerY
KnobVisualHelpers uses vbox.width to calculate centerY and it offsets the graphic of the helper for non-square knobs.
Change from:
static getDerivedStateFromProps(props: KnobVisualHelpersProps, state: KnobVisualHelpersState) {
//Calculate position
const vbox = props.svgRef.getBoundingClientRect();
const halfWidth = vbox.width / 2;
//Calculate current angle segment end point
//Note: Not sure why we need to substract 90 here
const valueMarkerX =
props.radius * Math.cos(utils.toRadians(props.valueAngle - 90));
const valueMarkerY =
props.radius * Math.sin(utils.toRadians(props.valueAngle - 90));
return {
...state,
centerX: vbox.left + halfWidth,
centerY: vbox.top + halfWidth,
valueMarkerX,
valueMarkerY
};
}
to:
static getDerivedStateFromProps(props: KnobVisualHelpersProps, state: KnobVisualHelpersState) {
//Calculate position
const vbox = props.svgRef.getBoundingClientRect();
const halfWidth = vbox.width / 2;
const halfHeight = vbox.height / 2;
//Calculate current angle segment end point
//Note: Not sure why we need to substract 90 here
const valueMarkerX =
props.radius * Math.cos(utils.toRadians(props.valueAngle - 90));
const valueMarkerY =
props.radius * Math.sin(utils.toRadians(props.valueAngle - 90));
return {
...state,
centerX: vbox.left + halfWidth,
centerY: vbox.top + halfHeight,
valueMarkerX,
valueMarkerY
};
}