applying alpha to the gradient.

Author: syslogic

library/src/main/java/io/syslogic/colorpicker/compose/ColorPickerComponent.kt

@@ -52,11 +52,11 @@ fun ColorPickerComponent(
     val rowPadding = dimensionResource(R.dimen.compose_row_padding)
     val listener: OnColorChangedListener? = onColorChanged
 
+    var currentColor: Int by remember { mutableStateOf(initialColor.hashCode()) }
     var currentAlpha: Float by remember { mutableStateOf(.5F) }
-    var currentSat: Float by remember { mutableStateOf(0.0F) }
-    var currentVal: Float by remember { mutableStateOf(0.0F) }
+    var currentSat: Float by remember { mutableStateOf(.5F) }
+    var currentVal: Float by remember { mutableStateOf(.5F) }
     var currentHue: Float by remember { mutableStateOf(180F) }
-    var currentColor: Int by remember { mutableStateOf(initialColor.hashCode()) }
 
     var offsetSatVal by remember { mutableStateOf(Offset.Zero) }
     var sizeSatVal by remember { mutableStateOf(IntSize.Zero) }
@@ -94,7 +94,7 @@ fun ColorPickerComponent(
                                 text = "Hue:",
                                 textAlign = TextAlign.End,
                                 modifier = Modifier
-                                    .defaultMinSize(minWidth = Dp(42F))
+                                    .defaultMinSize(minWidth = Dp(44F))
                                     .testTag("text_hue")
                             )
                             Text(
@@ -110,7 +110,7 @@ fun ColorPickerComponent(
                                 text = "Sat:",
                                 textAlign = TextAlign.End,
                                 modifier = Modifier
-                                    .defaultMinSize(minWidth = Dp(42F))
+                                    .defaultMinSize(minWidth = Dp(44F))
                                     .testTag("text_sat")
                             )
                             Text(
@@ -126,7 +126,7 @@ fun ColorPickerComponent(
                                 text = "Val:",
                                 textAlign = TextAlign.End,
                                 modifier = Modifier
-                                    .defaultMinSize(minWidth = Dp(42F))
+                                    .defaultMinSize(minWidth = Dp(44F))
                                     .testTag("text_val")
                             )
                             Text(
@@ -223,7 +223,9 @@ fun ColorPickerComponent(
                 contentDescription = "Sat/Val by Hue",
                 contentScale = ContentScale.FillBounds,
                 painter = SatValPainter(Size(900F, 900F)).also {
-                    it.setValue(currentSat, currentVal)
+                    it.setAlpha(currentAlpha)
+                    it.setSat(currentSat)
+                    it.setValue(currentVal)
                     it.setHue(currentHue)
                 },
                 modifier = Modifier

library/src/main/java/io/syslogic/colorpicker/compose/HuePainter.kt

@@ -59,10 +59,10 @@ class HuePainter(intrinsicSize: Size) : BasePainter(intrinsicSize) {
 
     private fun getHueValues(): List<Color> {
         var i = 0
-        val list: MutableList<Color> = MutableList(361) { Color.Black }
+        val list: MutableList<Color> = MutableList(360) { Color.Black }
         while (i < list.size) {
             val value = (list.size - i).toFloat()
-            list[i] = Color(android.graphics.Color.HSVToColor(floatArrayOf(value, 1f, 1f)))
+            list[i] = Color(android.graphics.Color.HSVToColor(255, floatArrayOf(value, 1f, 1f)))
             i++
         }
         return list

library/src/main/java/io/syslogic/colorpicker/compose/SatValPainter.kt

@@ -7,6 +7,7 @@ import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.LinearGradientShader
+import androidx.compose.ui.graphics.TileMode
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.painter.Painter
 
@@ -17,8 +18,7 @@ import androidx.compose.ui.graphics.painter.Painter
  */
 class SatValPainter(intrinsicSize: Size) : BasePainter(intrinsicSize) {
 
-    private var value: FloatArray = FloatArray(2)
-    private var hue: Float = 360F
+    private var value: FloatArray = FloatArray(4)
 
     /**
      * Implementation of drawing logic for instances of [Painter].
@@ -29,19 +29,25 @@ class SatValPainter(intrinsicSize: Size) : BasePainter(intrinsicSize) {
         setCanvas(drawContext, density)
 
         /* Saturation Shader */
-        val mSaturationShader = LinearGradientShader(
-            from     = Offset(rect.right, rect.top),
-            to       = Offset(rect.left, rect.top),
-            tileMode = androidx.compose.ui.graphics.TileMode.Clamp,
-            colors   = listOf(Color(HSVToColor(floatArrayOf(hue, 1f, 1f))), Color.White)
+        val mSaturationShader = LinearGradientShader (
+            from = Offset(rect.right, rect.top),
+            to = Offset(rect.left,  rect.top),
+            tileMode = TileMode.Clamp,
+            colors = listOf(
+                Color(color = HSVToColor(getAlpha().times(255).toInt(), floatArrayOf(getHue(), 1.0F, 1.0F))),
+                Color.White
+            )
         )
 
-        /* Contrast Shader */
+        /* Value Shader */
         val mContrastShader = LinearGradientShader(
-            from     = Offset(rect.left, rect.bottom),
-            to       = Offset(rect.left, rect.top),
-            tileMode = androidx.compose.ui.graphics.TileMode.Clamp,
-            colors   = listOf(Color.Black, Color.White)
+            from = Offset(rect.left, rect.bottom),
+            to = Offset(rect.left, rect.top),
+            tileMode = TileMode.Clamp,
+            colors = listOf(
+                Color.Black,
+                Color.White
+            )
         )
 
         /* Compose Shader */
@@ -66,16 +72,39 @@ class SatValPainter(intrinsicSize: Size) : BasePainter(intrinsicSize) {
         tracker.isAntiAlias = true
 
         /* Circular Tracker */
-        val p: Point = satValToPoint(value[0], value[1])
+        val p: Point = satValToPoint(getSat(), getValue())
         canvas.drawCircle(p.x.toFloat(), p.y.toFloat(), satValTrackerRadius, tracker)
     }
 
-    fun setValue(saturation: Float, value: Float) {
-        this.value[0] = saturation
-        this.value[1] = value
+    private fun getHue() : Float {
+        return this.value[0]
+    }
+
+    private fun getSat() : Float {
+        return this.value[1]
+    }
+
+    private fun getValue() : Float {
+        return this.value[2]
+    }
+
+    private fun getAlpha() : Float {
+        return this.value[3]
     }
 
     fun setHue(value: Float) {
-        this.hue = value
+        this.value[0] = value
+    }
+
+    fun setSat(value: Float) {
+        this.value[1] = value
+    }
+
+    fun setValue(value: Float) {
+        this.value[2] = value
+    }
+
+    fun setAlpha(value: Float) {
+        this.value[3] = value
     }
 }