add ColorMode for changing tabs

Author: SmartToolFactory

colorpicker/src/main/java/com/smarttoolfactory/colorpicker/model/ColorModel.kt

@@ -6,3 +6,10 @@ package com.smarttoolfactory.colorpicker.model
 enum class ColorModel {
     RGB, HSV, HSL
 }
+
+/**
+ * Color Modes that contain HSL, HSV, RGB, and Gradient
+ */
+enum class ColorMode {
+    HSL, HSV, RGB, Gradient
+}

colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/ColorModelChangeTabRow.kt

@@ -2,16 +2,15 @@ package com.smarttoolfactory.colorpicker.widget
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.smarttoolfactory.colorpicker.model.ColorMode
 import com.smarttoolfactory.colorpicker.model.ColorModel
 import com.smarttoolfactory.colorpicker.ui.Grey400
 import com.smarttoolfactory.colorpicker.ui.Grey600
@@ -69,4 +68,73 @@ fun ColorModelChangeTabRow(
     }
 }
 
+/**
+ * Tab Section for changing between HSL, HSV and RGB color models and Gradient color.
+ * @param colorMode current color mode.
+ * @param onColorModeChange callback that is triggered when user touches buttons.
+ */
+@Composable
+fun ColorGradientModeChangeTabRow(
+    modifier: Modifier = Modifier,
+    colorMode: ColorMode,
+    onColorModeChange: (ColorMode) -> Unit
+) {
+    var selectedIndex by remember {
+        mutableStateOf(
+            when (colorMode) {
+                ColorMode.HSL -> 0
+                ColorMode.HSV -> 1
+                ColorMode.RGB -> 2
+                ColorMode.Gradient -> 3
+            }
+        )
+    }
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 10.dp),
+        horizontalArrangement = Arrangement.SpaceEvenly,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        modeList.forEachIndexed { index, s ->
+            Box(
+                modifier = Modifier
+                    .clickable(
+                        interactionSource = MutableInteractionSource(),
+                        indication = null,
+                        onClick = {
+                            selectedIndex = index
+                            val newColorMode = when (selectedIndex) {
+                                0 -> ColorMode.HSL
+                                1 -> ColorMode.HSV
+                                2 -> ColorMode.RGB
+                                else -> ColorMode.Gradient
+                            }
+                            onColorModeChange(newColorMode)
+                        }
+                    )
+                    .padding(10.dp),
+                contentAlignment = Alignment.Center
+            ) {
+                if (index != 3) {
+                    Text(
+                        text = s,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 18.sp,
+                        color = if (index == selectedIndex) Grey400 else Grey600
+                    )
+                } else {
+                    ColorWheel(
+                        modifier = Modifier.size(18.dp),
+                        borderColor = if (index == selectedIndex) Grey400 else Grey600
+                    )
+                }
+
+            }
+        }
+    }
+}
+
 private val modelList = listOf("HSL", "HSV", "RGB")
+private val modeList = listOf("HSL", "HSV", "RGB", "Gradient")

colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/ColorWheel.kt

@@ -7,6 +7,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.unit.dp
 import com.smarttoolfactory.colorpicker.ui.gradientColorScaleRGB
@@ -16,7 +17,10 @@ import com.smarttoolfactory.colorpicker.ui.gradientColorScaleRGB
  * Simple circle with stroke to show rainbow colors as [Brush.sweepGradient]
  */
 @Composable
-fun ColorWheel(modifier: Modifier = Modifier) {
+fun ColorWheel(
+    modifier: Modifier = Modifier,
+    borderColor: Color
+) {
 
     Canvas(modifier = modifier.sizeIn(minWidth = 24.dp, minHeight = 24.dp)) {
         val canvasWidth = size.width
@@ -31,17 +35,18 @@ fun ColorWheel(modifier: Modifier = Modifier) {
         val cY = canvasHeight / 2
         val canvasRadius = canvasWidth.coerceAtMost(canvasHeight) / 2f
         val center = Offset(cX, cY)
-        val strokeWidth = canvasRadius * .3f
-        // Stroke is drawn out of the radius, so it's required to subtract stroke width from radius
-        val radius = canvasRadius - strokeWidth
 
         drawCircle(
             brush = Brush.sweepGradient(colors = gradientColorScaleRGB, center = center),
-            radius = radius,
+            radius = canvasRadius,
+            center = center
+        )
+
+        drawCircle(
+            color = borderColor,
+            radius = canvasRadius,
             center = center,
-            style = Stroke(
-                width = strokeWidth
-            )
+            style = Stroke(width = 2.dp.toPx())
         )
     }
 }