add circle hsv color picker and dialog

SmartToolFactory · SmartToolFactory · commit ec91ea7682a7 · 2022-03-29T20:44:00.000+03:00
diff --git a/app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/ColorPickerDemo.kt b/app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/ColorPickerDemo.kt
@@ -12,6 +12,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import com.smarttoolfactory.colorpicker.dialog.ColorPickerCircleHSVDialog
 import com.smarttoolfactory.colorpicker.dialog.ColorPickerRingDiamondHSLDialog
 import com.smarttoolfactory.colorpicker.dialog.ColorPickerRingRectHSVDialog
 import com.smarttoolfactory.colorpicker.widget.ColorDisplayRoundedRect
@@ -91,6 +92,29 @@ fun ColorPickerDemo() {
                 color = it
             }
         }
+
+
+        var showColorDialogCircleHSV by remember { mutableStateOf(false) }
+
+        OutlinedButton(
+            modifier = buttonModifier,
+            onClick = { showColorDialogCircleHSV = !showColorDialogCircleHSV },
+            colors = ButtonDefaults.outlinedButtonColors(
+                backgroundColor = Color.Transparent
+            )
+
+        ) {
+            Text(text = "Hue Circle HSV Dialog")
+        }
+
+        if (showColorDialogCircleHSV) {
+            previousColor = color.copy()
+
+            ColorPickerCircleHSVDialog(initialColor = color) {
+                showColorDialogCircleHSV = !showColorDialogCircleHSV
+                color = it
+            }
+        }
     }
 }
 
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/dialog/ColorPickerDialog.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/dialog/ColorPickerDialog.kt
@@ -7,20 +7,28 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon
+import androidx.compose.material.Surface
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
+import com.smarttoolfactory.colorpicker.picker.ColorPickerCircleValueHSV
 import com.smarttoolfactory.colorpicker.picker.ColorPickerRingDiamondHSL
 import com.smarttoolfactory.colorpicker.picker.ColorPickerRingRectHSV
 import com.smarttoolfactory.colorpicker.ui.Blue400
 
 @Composable
-fun ColorPickerRingDiamondHSLDialog(initialColor: Color, onDismiss: (Color) -> Unit) {
+fun ColorPickerRingDiamondHSLDialog(
+    initialColor: Color,
+    selectionRadius: Dp = 8.dp,
+    onDismiss: (Color) -> Unit
+) {
 
     var color by remember { mutableStateOf(initialColor.copy()) }
     Dialog(
@@ -29,13 +37,15 @@ fun ColorPickerRingDiamondHSLDialog(initialColor: Color, onDismiss: (Color) -> U
         }
     ) {
         Column(horizontalAlignment = Alignment.CenterHorizontally) {
+
             ColorPickerRingDiamondHSL(
                 modifier = Modifier
                     .fillMaxWidth()
                     .weight(1f)
                     .background(Color(0xcc212121), shape = RoundedCornerShape(5.dp))
                     .padding(horizontal = 10.dp, vertical = 2.dp),
-                initialColor = initialColor
+                initialColor = initialColor,
+                selectionRadius = selectionRadius
             ) {
                 color = it
             }
@@ -55,7 +65,11 @@ fun ColorPickerRingDiamondHSLDialog(initialColor: Color, onDismiss: (Color) -> U
 }
 
 @Composable
-fun ColorPickerRingRectHSVDialog(initialColor: Color, onDismiss: (Color) -> Unit) {
+fun ColorPickerRingRectHSVDialog(
+    initialColor: Color,
+    selectionRadius: Dp = 8.dp,
+    onDismiss: (Color) -> Unit
+) {
 
     var color by remember { mutableStateOf(initialColor.copy()) }
     Dialog(
@@ -70,7 +84,8 @@ fun ColorPickerRingRectHSVDialog(initialColor: Color, onDismiss: (Color) -> Unit
                     .weight(1f)
                     .background(Color(0xcc212121), shape = RoundedCornerShape(5.dp))
                     .padding(horizontal = 10.dp, vertical = 2.dp),
-                initialColor = initialColor
+                initialColor = initialColor,
+                selectionRadius = selectionRadius
             ) {
                 color = it
             }
@@ -89,5 +104,41 @@ fun ColorPickerRingRectHSVDialog(initialColor: Color, onDismiss: (Color) -> Unit
     }
 }
 
+@Composable
+fun ColorPickerCircleHSVDialog(
+    modifier: Modifier = Modifier,
+    initialColor: Color,
+    selectionRadius: Dp = 8.dp,
+    dialogBackgroundColor: Color = Color.White,
+    dialogShape: Shape = RoundedCornerShape(5.dp),
+    onDismiss: (Color) -> Unit
+) {
+
+    var color by remember { mutableStateOf(initialColor.copy()) }
+
+    Dialog(
+        onDismissRequest = {
+            onDismiss(color)
+        }
+    ) {
+        Surface(
+            modifier = modifier,
+            color = dialogBackgroundColor,
+            shape = dialogShape,
+            elevation = 2.dp
+        ) {
+            ColorPickerCircleValueHSV(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 12.dp, vertical = 12.dp),
+                initialColor = initialColor,
+                selectionRadius = selectionRadius
+            ) {
+                color = it
+            }
+        }
+    }
+}
+
 
 
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerCircleValueHSV.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerCircleValueHSV.kt
@@ -0,0 +1,79 @@
+package com.smarttoolfactory.colorpicker.picker
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.smarttoolfactory.colorpicker.model.ColorModel
+import com.smarttoolfactory.colorpicker.selector.HueSaturationSelectorCircleHSV
+import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayValueHSV
+import com.smarttoolfactory.colorpicker.util.colorToHSV
+import com.smarttoolfactory.colorpicker.widget.HexDisplay
+
+/**
+ *
+ */
+@Composable
+fun ColorPickerCircleValueHSV(
+    modifier: Modifier = Modifier,
+    selectionRadius: Dp = 8.dp,
+    initialColor: Color,
+    onColorChange: (Color) -> Unit
+) {
+
+    val hsvArray = colorToHSV(initialColor)
+
+    var hue by remember { mutableStateOf(hsvArray[0]) }
+    var saturation by remember { mutableStateOf(hsvArray[1]) }
+    var value by remember { mutableStateOf(hsvArray[2]) }
+    var alpha by remember { mutableStateOf(initialColor.alpha) }
+
+    val currentColor =
+        Color.hsv(hue = hue, saturation = saturation, value = value, alpha = alpha)
+
+    var colorModel by remember { mutableStateOf(ColorModel.HSV) }
+
+    onColorChange(currentColor)
+
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        HueSaturationSelectorCircleHSV(
+            modifier = Modifier.padding(8.dp),
+            hue = hue,
+            saturation = saturation,
+            selectionRadius = selectionRadius
+        ) { h, s ->
+            hue = h
+            saturation = s
+
+        }
+
+        SliderCircleColorDisplayValueHSV(
+            modifier = Modifier.padding(8.dp),
+            hue = hue,
+            saturation = saturation,
+            value = value,
+            alpha = alpha,
+            onValueChange = {
+                value = it
+            },
+            onAlphaChange = {
+                alpha = it
+            }
+        )
+
+        HexDisplay(
+            color = currentColor,
+            colorModel = colorModel,
+            onColorModelChange = {
+                colorModel = it
+            }
+        )
+    }
+}
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRingDimondHSL.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRingDimondHSL.kt
@@ -31,6 +31,7 @@ import com.smarttoolfactory.colorpicker.widget.ColorModelChangeTabRow
  * @param ringBackgroundColor background from center to inner radius of [HueSelectorRing].
  * @param ringBorderStrokeColor stroke color for drawing borders around inner or outer radius.
  * @param ringBorderStrokeWidth stroke width of borders.
+ * @param selectionRadius radius of white and black circle selector.
  * @param onColorChange callback that is triggered when [Color] is changed using [HueSelectorRing],
  * [SaturationLightnessSelectorDiamondHSL] or [CompositeSliderPanel]
  */
@@ -43,6 +44,7 @@ fun ColorPickerRingDiamondHSL(
     ringBackgroundColor: Color = Color.Black,
     ringBorderStrokeColor: Color = Color.Black,
     ringBorderStrokeWidth: Dp = 4.dp,
+    selectionRadius: Dp = 8.dp,
     onColorChange: (Color) -> Unit
 ) {
 
@@ -88,7 +90,7 @@ fun ColorPickerRingDiamondHSL(
                 backgroundColor = ringBackgroundColor,
                 borderStrokeColor = ringBorderStrokeColor,
                 borderStrokeWidth = ringBorderStrokeWidth,
-                selectionRadius = 8.dp
+                selectionRadius = selectionRadius
             ) { hueChange ->
                 hue = hueChange
             }
@@ -99,7 +101,7 @@ fun ColorPickerRingDiamondHSL(
                 hue = hue,
                 saturation = saturation,
                 lightness = lightness,
-                selectionRadius = 8.dp
+                selectionRadius = selectionRadius
             ) { s, l ->
                 saturation = s
                 lightness = l
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRingRectHSV.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRingRectHSV.kt
@@ -10,7 +10,6 @@ import androidx.compose.ui.unit.dp
 import com.smarttoolfactory.colorpicker.model.ColorHSV
 import com.smarttoolfactory.colorpicker.model.ColorModel
 import com.smarttoolfactory.colorpicker.selector.HueSelectorRing
-import com.smarttoolfactory.colorpicker.selector.SaturationLightnessSelectorDiamondHSL
 import com.smarttoolfactory.colorpicker.selector.SaturationValueSelectorRectHSV
 import com.smarttoolfactory.colorpicker.slider.CompositeSliderPanel
 import com.smarttoolfactory.colorpicker.util.colorToHSV
@@ -31,6 +30,7 @@ import com.smarttoolfactory.colorpicker.widget.ColorModelChangeTabRow
  * @param ringBackgroundColor background from center to inner radius of [HueSelectorRing].
  * @param ringBorderStrokeColor stroke color for drawing borders around inner or outer radius.
  * @param ringBorderStrokeWidth stroke width of borders.
+ * @param selectionRadius radius of white and black circle selector.
  * @param onColorChange callback that is triggered when [Color] is changed using [HueSelectorRing],
  * [SaturationValueSelectorRectHSV] or [CompositeSliderPanel]
  */
@@ -40,9 +40,10 @@ fun ColorPickerRingRectHSV(
     initialColor: Color,
     ringOuterRadiusFraction: Float = .9f,
     ringInnerRadiusFraction: Float = .6f,
-    ringBackgroundColor:Color=Color.Transparent,
+    ringBackgroundColor: Color = Color.Transparent,
     ringBorderStrokeColor: Color = Color.Black,
     ringBorderStrokeWidth: Dp = 4.dp,
+    selectionRadius: Dp = 8.dp,
     onColorChange: (Color) -> Unit
 ) {
 
@@ -88,7 +89,7 @@ fun ColorPickerRingRectHSV(
                 backgroundColor = ringBackgroundColor,
                 borderStrokeColor = ringBorderStrokeColor,
                 borderStrokeWidth = ringBorderStrokeWidth,
-                selectionRadius = 8.dp,
+                selectionRadius = selectionRadius,
             ) { hueChange ->
                 hue = hueChange
             }
@@ -101,7 +102,7 @@ fun ColorPickerRingRectHSV(
                 hue = hue,
                 saturation = saturation,
                 value = value,
-                selectionRadius = 8.dp
+                selectionRadius = selectionRadius
             ) { s, v ->
                 saturation = s
                 value = v
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HexDisplay.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HexDisplay.kt
