KnobVisualHelpers uses vbox.width to calculate centerY

[Ascalion]

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
    };
  }