Merge pull request #61 from alabsi91/Add-Rotate-Prop-to-Panel3

Add Rotate Prop to `Panel3` Component for Hue Circle Rotation
alabsi91 · Jan 19, 2024 · b888f21 · b888f21
2 parents ea964bd + 63e9b8a
commit b888f21
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 24 deletions.
diff --git a/docs/docs/API/Panel3.mdx b/docs/docs/API/Panel3.mdx
@@ -28,6 +28,12 @@ If you want to give your users more control over the color selection, you can ad
 - `type: "saturation" | "brightness"`
 - `default: "saturation"`
 
+### `rotate`
+
+- Specify a degree of rotation for the hue circle
+- `type: number`
+- `default: 0`
+
 ### `renderCenterLine`
 
 - Controls whether to render a line from the center of the panel to the thumb (handle).

diff --git a/src/components/Panels/Panel3/ExtraThumb.tsx b/src/components/Panels/Panel3/ExtraThumb.tsx
@@ -18,7 +18,7 @@ export function ExtraThumb({
   renderThumb,
   ...props
 }: ExtraThumbProps) {
-  const { width, boundedThumb, centerChannel, adaptSpectrum, ...ctx } = usePanel3Context();
+  const { width, boundedThumb, centerChannel, adaptSpectrum, rotate, ...ctx } = usePanel3Context();
   const { hueValue, saturationValue, brightnessValue, alphaValue, returnedResults } = usePickerContext();
 
   const thumbSize = props.thumbSize ?? ctx.thumbSize,
@@ -98,14 +98,14 @@ export function ExtraThumb({
 
   const handleStyle = useAnimatedStyle(() => {
     const center = width.value / 2 - (boundedThumb ? thumbSize / 2 : 0),
+      rotatedHue = (hue.value - rotate) % 360,
       distance = (channelValue.value / 100) * (width.value / 2 - (boundedThumb ? thumbSize / 2 : 0)),
-      posY =
-        width.value - (Math.sin((hue.value * Math.PI) / 180) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2),
-      posX =
-        width.value - (Math.cos((hue.value * Math.PI) / 180) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2);
+      angle = (rotatedHue * Math.PI) / 180,
+      posY = width.value - (Math.sin(angle) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2),
+      posX = width.value - (Math.cos(angle) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2);
 
     return {
-      transform: [{ translateX: posX }, { translateY: posY }, { rotate: hue.value + 90 + 'deg' }],
+      transform: [{ translateX: posX }, { translateY: posY }, { rotate: rotatedHue + 90 + 'deg' }],
     };
   }, [thumbSize, boundedThumb, width, channelValue, hue]);
 
@@ -114,8 +114,9 @@ export function ExtraThumb({
 
     const lineThickness = 1,
       center = width.value / 2 - (boundedThumb ? thumbSize / 2 : 0),
+      rotatedHue = (hue.value - rotate) % 360,
       distance = (channelValue.value / 100) * center,
-      angle = ((hue.value * Math.PI) / Math.PI + 180) % 360; // reversed angle
+      angle = ((rotatedHue * Math.PI) / Math.PI + 180) % 360; // reversed angle
 
     return {
       top: (width.value - lineThickness) / 2,

diff --git a/src/components/Panels/Panel3/Panel3.tsx b/src/components/Panels/Panel3/Panel3.tsx
@@ -19,6 +19,7 @@ export function Panel3({
   centerChannel = 'saturation',
   gestures = [],
   style = {},
+  rotate = 0,
   children,
   ...props
 }: Panel3Props) {
@@ -42,23 +43,14 @@ export function Panel3({
 
   const handleStyle = useAnimatedStyle(() => {
     const center = width.value / 2 - (boundedThumb ? thumbSize / 2 : 0),
+      rotatedHue = (hueValue.value - rotate) % 360,
       distance = (channelValue.value / 100) * (width.value / 2 - (boundedThumb ? thumbSize / 2 : 0)),
-      posY =
-        width.value -
-        (Math.sin((hueValue.value * Math.PI) / 180) * distance + center) -
-        (boundedThumb ? thumbSize : thumbSize / 2),
-      posX =
-        width.value -
-        (Math.cos((hueValue.value * Math.PI) / 180) * distance + center) -
-        (boundedThumb ? thumbSize : thumbSize / 2);
+      angle = (rotatedHue * Math.PI) / 180,
+      posY = width.value - (Math.sin(angle) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2),
+      posX = width.value - (Math.cos(angle) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2);
 
     return {
-      transform: [
-        { translateX: posX },
-        { translateY: posY },
-        { scale: handleScale.value },
-        { rotate: hueValue.value + 90 + 'deg' },
-      ],
+      transform: [{ translateX: posX }, { translateY: posY }, { scale: handleScale.value }, { rotate: rotatedHue + 90 + 'deg' }],
     };
   }, [width, channelValue, hueValue, handleScale]);
 
@@ -75,8 +67,9 @@ export function Panel3({
 
     const lineThickness = 1,
       center = width.value / 2 - (boundedThumb ? thumbSize / 2 : 0),
+      rotatedHue = (hueValue.value - rotate) % 360,
       distance = (channelValue.value / 100) * center,
-      angle = ((hueValue.value * Math.PI) / Math.PI + 180) % 360; // reversed angle
+      angle = ((rotatedHue * Math.PI) / Math.PI + 180) % 360; // reversed angle
 
     return {
       top: (width.value - lineThickness) / 2,
@@ -99,7 +92,7 @@ export function Panel3({
       theta = Math.atan2(dy, dx) * (180 / Math.PI), // [0 - 180] range
       angle = theta < 0 ? 360 + theta : theta, // [0 - 360] range
       radiusPercent = radius / center,
-      newHueValue = angle,
+      newHueValue = (angle + rotate) % 360,
       newChannelValue = radiusPercent * 100;
 
     if (hueValue.value === newHueValue && channelValue.value === newChannelValue) return;
@@ -160,6 +153,7 @@ export function Panel3({
         boundedThumb,
         renderCenterLine,
         thumbSize,
+        rotate,
       }}
     >
       <GestureDetector gesture={composed}>
@@ -171,7 +165,12 @@ export function Panel3({
             { position: 'relative', aspectRatio: 1, borderWidth: 0, padding: 0, borderRadius },
           ]}
         >
-          <ImageBackground source={require('@assets/circularHue.png')} style={styles.panel_image} resizeMode='stretch'>
+          <ImageBackground
+            source={require('@assets/circularHue.png')}
+            style={styles.panel_image}
+            imageStyle={{ transform: [{ rotate: -rotate + 'deg' }] }}
+            resizeMode='stretch'
+          >
             <ConditionalRendering if={adaptSpectrum && centerChannel === 'brightness'}>
               <Animated.View style={[{ borderRadius }, spectrumStyle, StyleSheet.absoluteFillObject]} />
             </ConditionalRendering>

diff --git a/src/types.ts b/src/types.ts
@@ -232,6 +232,7 @@ export interface Panel3Context {
   renderThumb?: RenderThumbType;
   boundedThumb: boolean;
   renderCenterLine: boolean;
+  rotate: number;
 }
 
 export interface ColorPickerProps {
@@ -414,6 +415,9 @@ export interface Panel3Props extends PanelProps {
   /** - Render a line from the center of the Panel to the thumb (handle). */
   renderCenterLine?: boolean;
 
+  /** - Rotate the hue circle, from 0 to 360 */
+  rotate?: number;
+
   children?: ReactNode;
 }