Merge pull request #49 from SimformSolutionsPvtLtd/feature/UNT-T22232_format_custom_start_point_code

mukesh-simform · web-flow · commit 34ff5522fc20 · 2024-02-15T13:12:03.000+05:30
feat: UNT-T22232 format custom start point code
diff --git a/README.md b/README.md
diff --git a/assets/SpeedoMeterExample.gif b/assets/SpeedoMeterExample.gif
diff --git a/assets/SpeedoMeterMarker.gif b/assets/SpeedoMeterMarker.gif
diff --git a/example/.prettierrc.js b/example/.prettierrc.js
@@ -1,4 +1,5 @@
 module.exports = {
+  bracketSameLine: true,
   bracketSpacing: true,
   bracketSameLine: true,
   singleQuote: true,
diff --git a/src/components/RadialSlider/LineContent.tsx b/src/components/RadialSlider/LineContent.tsx
@@ -80,7 +80,20 @@ const LineContent = (props: LineContentProps) => {
             ? false
             : isMarkerLine;
 
-        const radialCircleLineRotation = isRadialCircleVariant ? 86 : 90;
+        // Calculate the slider point adjustment based on the provided start point
+        // The values -4 and -2 are used for fine-tuning the adjustment
+        // -4 accounts for a base adjustment, and -2 is a multiplier applied to the start point
+        const sliderPointAdjustment = -4 - 2 * (props?.startAngle || 0);
+
+        // Adjust the slider start point based on variant type or use a default value (86)
+        const adjustedSliderStartPoint =
+          isRadialCircleVariant && props?.startAngle != null
+            ? props.startAngle + sliderPointAdjustment
+            : 86;
+
+        const radialCircleLineRotation = isRadialCircleVariant
+          ? adjustedSliderStartPoint
+          : 90;
 
         return (
           <G key={index.toString()}>
diff --git a/src/components/RadialSlider/RadialSlider.tsx b/src/components/RadialSlider/RadialSlider.tsx
@@ -11,7 +11,7 @@ import { View, Platform, StyleSheet } from 'react-native';
 import type { RadialSliderProps } from './types';
 import { styles } from './styles';
 import { Colors } from '../../theme';
-import { useSilderAnimation, useRadialSlider } from './hooks';
+import { useSliderAnimation, useRadialSlider } from './hooks';
 import { defaultProps } from './SliderDefaultProps';
 import ButtonContent from './ButtonContent';
 import CenterContent from './CenterContent';
@@ -50,7 +50,7 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
   } = props;
 
   const { panResponder, value, setValue, curPoint, currentRadian, prevValue } =
-    useSilderAnimation(props);
+    useSliderAnimation(props);
 
   const {
     svgSize,
diff --git a/src/components/RadialSlider/SpeedoMeter.tsx b/src/components/RadialSlider/SpeedoMeter.tsx
@@ -10,7 +10,7 @@ import Svg, {
 import { View, Platform } from 'react-native';
 import type { SpeedoMeterProps } from './types';
 import { styles } from './styles';
-import { useSilderAnimation, useRadialSlider } from './hooks';
+import { useSliderAnimation, useRadialSlider } from './hooks';
 import CenterContent from './CenterContent';
 import TailText from './TailText';
 import LineContent from './LineContent';
@@ -48,7 +48,7 @@ const SpeedoMeter = (
     setValue,
     curPoint,
     currentRadian,
-  } = useSilderAnimation(props);
+  } = useSliderAnimation(props);
 
   useEffect(() => {
     if (value < min) {
diff --git a/src/components/RadialSlider/hooks/index.ts b/src/components/RadialSlider/hooks/index.ts
@@ -1,4 +1,4 @@
-import useSilderAnimation from './useSilderAnimation';
+import useSliderAnimation from './useSliderAnimation';
 import useRadialSlider from './useRadialSlider';
 
-export { useRadialSlider, useSilderAnimation };
+export { useRadialSlider, useSliderAnimation };
diff --git a/src/components/RadialSlider/hooks/useRadialSlider.ts b/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,
+    startAngle = 270,
   } = props;
 
   const centerValue = Math.round((max - min) / 2) as number;
@@ -72,15 +73,19 @@ const useRadialSlider = (props: RadialSliderHookProps) => {
     radius,
     sliderWidth,
     thumbRadius,
-    thumbBorderWidth
+    thumbBorderWidth,
+    startAngle,
+    variant
   );
 
   const endPoint = polarToCartesian(
     radianValue,
     radius,
     sliderWidth,
     thumbRadius,
-    thumbBorderWidth
+    thumbBorderWidth,
+    startAngle,
+    variant
   );
 
   const marks = useMemo(() => {
diff --git a/src/components/RadialSlider/hooks/useSliderAnimation.ts b/src/components/RadialSlider/hooks/useSliderAnimation.ts
@@ -18,7 +18,7 @@ interface StartCartesianProps {
   y: number;
 }
 
-const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
+const useSliderAnimation = (props: RadialSliderAnimationHookProps) => {
   const {
     step = 1,
     radius = 100,
@@ -30,6 +30,8 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
     onChange = () => {},
     max = 100,
     onComplete = () => {},
+    startAngle = 270,
+    variant = 'default',
   } = props;
 
   let moveStartValue: number;
@@ -78,7 +80,9 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
       radius,
       sliderWidth,
       thumbRadius,
-      thumbBorderWidth as number
+      thumbBorderWidth as number,
+      startAngle,
+      variant
     );
     return true;
   };
@@ -100,7 +104,9 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
       radius,
       sliderWidth,
       thumbRadius,
-      thumbBorderWidth as number
+      thumbBorderWidth as number,
+      startAngle,
+      variant
     );
 
     const ratio =
@@ -154,7 +160,9 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
     radius,
     sliderWidth,
     thumbRadius,
-    thumbBorderWidth as number
+    thumbBorderWidth as number,
+    startAngle,
+    variant
   );
 
   return {
@@ -167,4 +175,4 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
   };
 };
 
-export default useSilderAnimation;
+export default useSliderAnimation;
diff --git a/src/components/RadialSlider/types.ts b/src/components/RadialSlider/types.ts
@@ -1,6 +1,18 @@
 import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import type { Linecap } from 'react-native-svg';
 
+type Enumerate<
+  N extends number,
+  Acc extends number[] = []
+> = Acc['length'] extends N
+  ? Acc[number]
+  : Enumerate<N, [...Acc, Acc['length']]>;
+
+export type Range<F extends number, T extends number> = Exclude<
+  Enumerate<T>,
+  Enumerate<F>
+>;
+
 type RadialSliderExcludedProps = {
   unitValueContentStyle?: StyleProp<ViewStyle>;
   markerCircleSize?: never;
@@ -46,6 +58,7 @@ export type LineContentProps = {
   fixedMarker?: boolean;
   value?: number;
   markerValueInterval?: number;
+  startAngle?: number;
 };
 
 export type TextTailProps = {
@@ -64,6 +77,7 @@ export type RadialSliderHookProps = {
   max?: number;
   variant?: 'radial-circle-slider' | string;
   step?: number;
+  startAngle?: number;
 };
 
 export type MarkerValueContentProps = {
@@ -90,6 +104,8 @@ export type RadialSliderAnimationHookProps = {
   onChange?: (v: number) => void;
   onComplete?: (v: number) => void;
   value: number;
+  variant?: string;
+  startAngle?: number;
 };
 
 export type NeedleContentProps = {
@@ -169,6 +185,12 @@ export type RadialSliderProps = {
    * Border color of thumb/knob.
    */
   thumbBorderColor?: string;
+  /**
+   * @description Starting angle position of the thumb/knob.
+   * @default 270
+   * @static {Range<0, 360>} startAngle - The starting angle should be a value within the Range of 0 to 360 (inclusive).
+   */
+  startAngle?: Range<0, 360>;
   /**
    * Size of marker line.
    */
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './RadialSlider';
diff --git a/src/index.ts b/src/index.ts
@@ -1 +1 @@
-export * from './components/RadialSlider';
+export * from './components';
diff --git a/src/utils/commonHelpers.ts b/src/utils/commonHelpers.ts
@@ -1,3 +1,5 @@
+import Constants from '../constants';
+
 const createRange = (start: any, end: number, step: number | undefined) => {
   const lists = [];
   if (step === undefined) {
@@ -35,17 +37,30 @@ const getRadianByValue = (
   );
 };
 
+const calculateRadianForCircleVariant = (sliderStartPointValue: number) => {
+  const angleOffset = 90 + sliderStartPointValue;
+  const offsetRadian = (angleOffset * Math.PI) / 180;
+  return offsetRadian;
+};
+
 const polarToCartesian = (
   radian: number,
   radius: number,
   sliderWidth: number,
   thumbRadius: number,
-  thumbBorderWidth: number
+  thumbBorderWidth: number,
+  sliderPoint: number,
+  variant: string
 ) => {
+  const calculatedRadian =
+    variant === Constants.radialCircleSlider
+      ? radian + calculateRadianForCircleVariant(sliderPoint)
+      : 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,50 @@ const cartesianToPolar = (
   radius: number,
   sliderWidth: number,
   thumbRadius: number,
-  thumbBorderWidth: number
+  thumbBorderWidth: number,
+  sliderPoint: number,
+  variant: string
 ) => {
+  const TWO_PI = 2 * Math.PI;
+
+  // Calculate the distance from the center to the edge considering extra size
   const distance =
     radius + getExtraSize(sliderWidth, thumbRadius, thumbBorderWidth) / 2;
-  if (x === distance) {
-    return y > distance ? 0 : Math.PI / 2;
+
+  if (variant === Constants.radialCircleSlider) {
+    // Calculate the angle from the center to the given point
+    const angleFromCenter = Math.atan2(y - distance, x - distance);
+
+    // Convert slider point from degrees to radians
+    let angle = (sliderPoint * Math.PI) / 180;
+    // Normalize the angle to be between 0 and 2*PI
+    angle = (TWO_PI - angle) % TWO_PI;
+
+    // Calculate the clockwise difference between the slider point and the angle from the center
+    let clockwiseDifference = angle - angleFromCenter;
+
+    if (clockwiseDifference < 0) {
+      clockwiseDifference += TWO_PI;
+    }
+
+    // Normalize the result to be between 0 and 2*PI
+    clockwiseDifference %= TWO_PI;
+
+    return clockwiseDifference;
+  } else {
+    if (x === distance) {
+      return y > distance ? 0 : Math.PI / 2;
+    }
+    // Calculate the angle from the center to the given point
+    const angleFromCenterToGivenPoint = Math.atan(
+      (y - distance) / (x - distance)
+    );
+    // Determine the quadrant and adjust the angle accordingly
+    return (
+      (x < distance ? (Math.PI * 3) / 2 : Math.PI / 2) -
+      angleFromCenterToGivenPoint
+    );
   }
-  const a = Math.atan((y - distance) / (x - distance));
-  return (x < distance ? (Math.PI * 3) / 2 : Math.PI / 2) - a;
 };
 
 const getCurrentRadian = (

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`module.exports = {`
	`2`	`+ bracketSameLine: true,`
`2`	`3`	`bracketSpacing: true,`
`3`	`4`	`bracketSameLine: true,`
`4`	`5`	`singleQuote: true,`