Implement circular slider with adjustable starting point

example/.prettierrc.js

@@ -1,7 +1,8 @@
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
   bracketSpacing: true,
   bracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
-  arrowParens: 'avoid',
 };

example/src/modules/RadialVariant/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { RadialSlider } from 'react-native-radial-slider';
+import { RadialSlider } from '../../../../src';
 import { Colors } from '../../theme';
 import VariantCard from '../../components/VariantCard';
 

example/src/modules/SpeedoMeterVariant/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
-import { RadialSlider } from 'react-native-radial-slider';
+import { RadialSlider } from '../../../../src';
 import VariantCard from '../../components/VariantCard';
 import { Colors } from '../../theme';
 

src/components/RadialSlider/LineContent.tsx

@@ -80,7 +80,15 @@ const LineContent = (props: LineContentProps) => {
             ? false
             : isMarkerLine;
 
-        const radialCircleLineRotation = isRadialCircleVariant ? 86 : 90;
+        const thumbPointAdjustment = -4 - 2 * (props?.thumbPoint || 0);
+        const adjustedThumbPoint =
+          isRadialCircleVariant && props?.thumbPoint !== undefined
+            ? props?.thumbPoint + thumbPointAdjustment
+            : 86;
+
+        const radialCircleLineRotation = isRadialCircleVariant
+          ? adjustedThumbPoint
+          : 90;
 
         return (
           <G key={index.toString()}>

src/components/RadialSlider/hooks/useRadialSlider.ts

@@ -16,8 +16,9 @@ const useRadialSlider = (props: RadialSliderHookProps) => {
     thumbBorderWidth = 5,
     min = 0,
     max = 200,
-    variant,
+    variant = 'default',
     step = 1,
+    thumbPoint = 270,
   } = props;
 
   const centerValue = Math.round((max - min) / 2) as number;
@@ -72,15 +73,19 @@ const useRadialSlider = (props: RadialSliderHookProps) => {
     radius,
     sliderWidth,
     thumbRadius,
-    thumbBorderWidth
+    thumbBorderWidth,
+    thumbPoint,
+    variant
   );
 
   const endPoint = polarToCartesian(
     radianValue,
     radius,
     sliderWidth,
     thumbRadius,
-    thumbBorderWidth
+    thumbBorderWidth,
+    thumbPoint,
+    variant
   );
 
   const marks = useMemo(() => {

src/components/RadialSlider/hooks/useSilderAnimation.ts

@@ -30,6 +30,8 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
     onChange = () => {},
     max = 100,
     onComplete = () => {},
+    thumbPoint = 270,
+    variant = 'default',
   } = props;
 
   let moveStartValue: number;
@@ -78,7 +80,9 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
       radius,
       sliderWidth,
       thumbRadius,
-      thumbBorderWidth as number
+      thumbBorderWidth as number,
+      thumbPoint,
+      variant
     );
     return true;
   };
@@ -100,7 +104,9 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
       radius,
       sliderWidth,
       thumbRadius,
-      thumbBorderWidth as number
+      thumbBorderWidth as number,
+      thumbPoint,
+      variant
     );
 
     const ratio =
@@ -154,7 +160,9 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
     radius,
     sliderWidth,
     thumbRadius,
-    thumbBorderWidth as number
+    thumbBorderWidth as number,
+    thumbPoint,
+    variant
   );
 
   return {

src/components/RadialSlider/types.ts

@@ -46,6 +46,7 @@ export type LineContentProps = {
   fixedMarker?: boolean;
   value?: number;
   markerValueInterval?: number;
+  thumbPoint?: number;
 };
 
 export type TextTailProps = {
@@ -64,6 +65,7 @@ export type RadialSliderHookProps = {
   max?: number;
   variant?: 'radial-circle-slider' | string;
   step?: number;
+  thumbPoint?: number;
 };
 
 export type MarkerValueContentProps = {
@@ -90,6 +92,8 @@ export type RadialSliderAnimationHookProps = {
   onChange?: (v: number) => void;
   onComplete?: (v: number) => void;
   value: number;
+  variant?: string;
+  thumbPoint?: number;
 };
 
 export type NeedleContentProps = {
@@ -169,6 +173,10 @@ export type RadialSliderProps = {
    * Border color of thumb/knob.
    */
   thumbBorderColor?: string;
+  /**
+   * Starting position of thumb/knob
+   */
+  thumbPoint?: number;
   /**
    * Size of marker line.
    */

src/utils/commonHelpers.ts

@@ -1,3 +1,5 @@
+import Constants from '../../src/constants';
+
 const createRange = (start: any, end: number, step: number | undefined) => {
   const lists = [];
   if (step === undefined) {
@@ -35,17 +37,30 @@ const getRadianByValue = (
   );
 };
 
+const calculateRadianForCircleVariant = (thumbPoint: number) => {
+  const angleOffset = 90 + thumbPoint;
+  const offsetRadian = (angleOffset * Math.PI) / 180;
+  return offsetRadian;
+};
+
 const polarToCartesian = (
   radian: number,
   radius: number,
   sliderWidth: number,
   thumbRadius: number,
-  thumbBorderWidth: number
+  thumbBorderWidth: number,
+  thumbPoint: number,
+  variant: string
 ) => {
+  const calculatedRadian =
+    variant === Constants.radialCircleSlider
+      ? radian + calculateRadianForCircleVariant(thumbPoint)
+      : radian;
+
   const distance =
     radius + getExtraSize(sliderWidth, thumbBorderWidth, thumbRadius) / 2;
-  const x = distance + radius * Math.sin(radian);
-  const y = distance + radius * Math.cos(radian);
+  const x = distance + radius * Math.sin(calculatedRadian);
+  const y = distance + radius * Math.cos(calculatedRadian);
 
   return { x, y };
 };
@@ -56,15 +71,36 @@ const cartesianToPolar = (
   radius: number,
   sliderWidth: number,
   thumbRadius: number,
-  thumbBorderWidth: number
+  thumbBorderWidth: number,
+  thumbPoint: number,
+  variant: string
 ) => {
   const distance =
     radius + getExtraSize(sliderWidth, thumbRadius, thumbBorderWidth) / 2;
-  if (x === distance) {
-    return y > distance ? 0 : Math.PI / 2;
+
+  if (variant === Constants.radialCircleSlider) {
+    const angleFromCenter = Math.atan2(y - distance, x - distance);
+
+    let angle = (thumbPoint * Math.PI) / 180;
+    angle = (angle + 2 * Math.PI) % (2 * Math.PI);
+    angle = (2 * Math.PI - angle) % (2 * Math.PI);
+
+    let clockwiseDifference = angle - angleFromCenter;
+
+    if (clockwiseDifference < 0) {
+      clockwiseDifference += 2 * Math.PI;
+    }
+
+    clockwiseDifference %= 2 * Math.PI;
+
+    return clockwiseDifference;
+  } else {
+    if (x === distance) {
+      return y > distance ? 0 : Math.PI / 2;
+    }
+    const a = Math.atan((y - distance) / (x - distance));
+    return (x < distance ? (Math.PI * 3) / 2 : Math.PI / 2) - a;
   }
-  const a = Math.atan((y - distance) / (x - distance));
-  return (x < distance ? (Math.PI * 3) / 2 : Math.PI / 2) - a;
 };
 
 const getCurrentRadian = (