Create new color picker to select two colors and generate new blended color.

Author: kavi707

kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/KvColorPickerBottomSheet.kt

@@ -146,7 +146,6 @@ fun KvColorPickerBottomSheet(
                 )
                 3 -> BlendColorPicker(
                     modifier = Modifier.padding(16.dp),
-                    lastSelectedColor = selectedColor,
                     onColorSelected = {
                         selectedColor = it
                         colorHex.value = TextFieldValue(ColorUtil.getHex(it))

kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/pickers/BlendColorPicker.kt

@@ -18,7 +18,8 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
@@ -34,24 +35,38 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.kavi.droid.color.palette.extension.hsl
+import com.kavi.droid.color.palette.util.ColorUtil
 import com.kavi.droid.color.picker.R
 import com.kavi.droid.color.picker.ui.common.SliderHue
 
 @Composable
 fun BlendColorPicker(
     modifier: Modifier = Modifier,
-    lastSelectedColor: Color = Color.White,
     onColorSelected: (selectedColor: Color) -> Unit
 ) {
-    // State variables for HSL-A values
-    val firstHue = remember { mutableFloatStateOf(lastSelectedColor.hsl.hue) }
-    val secondHue = remember { mutableFloatStateOf(lastSelectedColor.hsl.hue) }
+    // State variables for first color hue and second color hue
+    val firstHue = remember { mutableFloatStateOf(Color.White.hsl.hue) }
+    val secondHue = remember { mutableFloatStateOf(Color.White.hsl.hue) }
 
-    val firstBlendColor = remember { mutableStateOf(lastSelectedColor) }
-    val secondBlendColor = remember { mutableStateOf(lastSelectedColor) }
+    val firstBlendColor = remember { mutableStateOf(Color.White) }
+    val firstBlendColorHex = remember { mutableStateOf(ColorUtil.getHex(Color.White)) }
+    val secondBlendColor = remember { mutableStateOf(Color.White) }
+    val secondBlendColorHex = remember { mutableStateOf(ColorUtil.getHex(Color.White)) }
 
     var colorBias by remember { mutableFloatStateOf(.5f) }
 
+    // Derived state for the color based on blending selected first and second color
+    val color by remember {
+        derivedStateOf {
+            ColorUtil.blendColors(firstBlendColor.value, secondBlendColor.value, bias = colorBias)
+        }
+    }
+
+    // Launch an effect to invoke the provided callback with the selected color
+    LaunchedEffect(color) {
+        onColorSelected.invoke(color)
+    }
+
     Column (modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
         Column (
             modifier = Modifier
@@ -75,7 +90,9 @@ fun BlendColorPicker(
             )
 
             Row (
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .padding(top = 8.dp)
+                    .fillMaxWidth(),
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.Center
             ) {
@@ -87,7 +104,10 @@ fun BlendColorPicker(
                     SliderHue(Modifier.padding(top = 4.dp, bottom = 4.dp), onColorSelect = { selectedColor ->
                         firstHue.floatValue = selectedColor.hsl.hue
                         firstBlendColor.value = selectedColor
+                        firstBlendColorHex.value = ColorUtil.getHex(selectedColor)
                     })
+
+                    Text(text = firstBlendColorHex.value)
                 }
 
                 Spacer(modifier = Modifier.width(8.dp))
@@ -100,7 +120,10 @@ fun BlendColorPicker(
                     SliderHue(Modifier.padding(top = 4.dp, bottom = 4.dp), onColorSelect = { selectedColor ->
                         secondHue.floatValue = selectedColor.hsl.hue
                         secondBlendColor.value = selectedColor
+                        secondBlendColorHex.value = ColorUtil.getHex(selectedColor)
                     })
+
+                    Text(text = secondBlendColorHex.value)
                 }
             }
 

kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/pickers/GridColorPicker.kt

@@ -51,11 +51,9 @@ fun GridColorPicker(
 ) {
 
     var selectedColor by remember { mutableStateOf(lastSelectedColor) }
-    val colorHex = remember { mutableStateOf(TextFieldValue(ColorUtil.getHex(lastSelectedColor))) }
 
     val onSelectColor: (color: Color) -> Unit = {
         selectedColor = it
-        colorHex.value = TextFieldValue(ColorUtil.getHex(it))
     }
 
     // Launch an effect to invoke the provided callback with the selected color

kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/pickers/HSLAColorPicker.kt

@@ -57,9 +57,7 @@ fun HSLAColorPicker(
     val lightness = rememberSaveable { mutableFloatStateOf(lastSelectedColor.hsl.lightness) }
     val alpha = rememberSaveable { mutableFloatStateOf(lastSelectedColor.alpha) }
 
-    val colorHex = remember { mutableStateOf(TextFieldValue("")) }
-
-    // Derived state for the color based on RGBA values
+    // Derived state for the color based on HSL-A values
     val color by remember {
         derivedStateOf {
             Color.hsl(hue = hue.floatValue, saturation = saturation.floatValue, lightness = lightness.floatValue, alpha.floatValue)
@@ -68,7 +66,6 @@ fun HSLAColorPicker(
 
     // Launch an effect to invoke the provided callback with the selected color
     LaunchedEffect(color) {
-        colorHex.value = TextFieldValue(ColorUtil.getHex(color = color))
         onColorSelected.invoke(color)
     }
 

kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/ui/pickers/RGBAColorPicker.kt

@@ -54,8 +54,6 @@ fun RGBAColorPicker (
     val blue = rememberSaveable { mutableFloatStateOf(lastSelectedColor.blue) }
     val alpha = rememberSaveable { mutableFloatStateOf(lastSelectedColor.alpha) }
 
-    val colorHex = remember { mutableStateOf(TextFieldValue("")) }
-
     // Derived state for the color based on RGBA values
     val color by remember {
         derivedStateOf {
@@ -65,7 +63,6 @@ fun RGBAColorPicker (
 
     // Launch an effect to invoke the provided callback with the selected color
     LaunchedEffect(color) {
-        colorHex.value = TextFieldValue(ColorUtil.getHex(color = color))
         onColorSelected.invoke(color)
     }