add color picker with ring and hex

SmartToolFactory · SmartToolFactory · commit b4944f7b73d0 · 2022-04-13T20:12:18.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
@@ -105,6 +105,19 @@ fun ColorPickerDemo() {
             }
         )
 
+        // Ring Hue, Rect Saturation-Value selector HexHSV Picker
+        DialogRingHexHSV(
+            modifier = buttonModifier,
+            color = color,
+            onPreviousColorChange = {
+                previousColor = it
+            },
+            onCurrentColorChange = { colorChange, hexChange ->
+                color = colorChange
+                hexString = hexChange
+            }
+        )
+
         DialogCircleHSV(
             modifier = buttonModifier,
             color = color,
@@ -284,6 +297,38 @@ private fun DialogRingRectHSV(
     }
 }
 
+@Composable
+private fun DialogRingHexHSV(
+    modifier: Modifier,
+    color: Color,
+    onPreviousColorChange: (Color) -> Unit,
+    onCurrentColorChange: (Color, String) -> Unit
+) {
+    var showDialog by remember { mutableStateOf(false) }
+
+    OutlinedButton(
+        modifier = modifier,
+        onClick = { showDialog = !showDialog },
+        colors = ButtonDefaults.outlinedButtonColors(
+            backgroundColor = Color.Transparent
+        )
+
+    ) {
+        Text(text = "Hue Ring-Hex HSV Dialog")
+    }
+
+    if (showDialog) {
+        onPreviousColorChange(color.copy())
+
+        ColorPickerRingHexHSVDialog(
+            initialColor = color
+        ) { colorChange, hexChange ->
+            showDialog = !showDialog
+            onCurrentColorChange(colorChange, hexChange)
+        }
+    }
+}
+
 @Composable
 private fun DialogCircleHSV(
     modifier: Modifier,
diff --git a/app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/HexConversionDemo.kt b/app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/HexConversionDemo.kt
@@ -7,12 +7,13 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.smarttoolfactory.colorpicker.util.colorToHex
 import com.smarttoolfactory.colorpicker.util.colorToHexAlpha
 import com.smarttoolfactory.colorpicker.widget.HexAlphaTextField
 import com.smarttoolfactory.composecolorpicker.ui.theme.backgroundColor
@@ -23,8 +24,9 @@ fun HexConversionDemo() {
         modifier = Modifier
             .background(backgroundColor)
             .fillMaxSize()
-            .padding(8.dp)
-            .verticalScroll(rememberScrollState())
+            .padding(12.dp)
+            .verticalScroll(rememberScrollState()),
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
 
         var color by remember {
@@ -39,15 +41,13 @@ fun HexConversionDemo() {
             "HEX: $hexString",
             color = color,
             fontWeight = FontWeight.Bold,
-            fontSize = 20.sp
+            fontSize = 30.sp
         )
-        Spacer(modifier = Modifier.height(10.dp))
+        Spacer(modifier = Modifier.height(16.dp))
 
         HexAlphaTextField(
-            modifier = Modifier
-                .wrapContentWidth()
-                .border(1.dp, Color.Red),
             hexString = hexString,
+
             onTextChange = {
                 hexString = it
             }, onColorChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/dialog/ColorPickerDialog.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/dialog/ColorPickerDialog.kt
@@ -188,6 +188,44 @@ fun ColorPickerRingRectHSVDialog(
     }
 }
 
+@Composable
+fun ColorPickerRingHexHSVDialog(
+    modifier: Modifier = Modifier,
+    initialColor: Color,
+    selectionRadius: Dp = 8.dp,
+    dialogBackgroundColor: Color = Color.White,
+    dialogShape: Shape = RoundedCornerShape(5.dp),
+    onDismiss: (Color, String) -> Unit
+) {
+
+    var color by remember { mutableStateOf(initialColor.copy()) }
+    var hexString by remember { mutableStateOf(colorToHex(color)) }
+
+    Dialog(
+        onDismissRequest = {
+            onDismiss(color, hexString)
+        }
+    ) {
+        Surface(
+            modifier = modifier,
+            color = dialogBackgroundColor,
+            shape = dialogShape,
+            elevation = 2.dp
+        ) {
+            ColorPickerRingRectHex(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 8.dp, vertical = 12.dp),
+                initialColor = initialColor,
+                selectionRadius = selectionRadius
+            ) { colorChange, hexChange ->
+                color = colorChange
+                hexString = hexChange
+            }
+        }
+    }
+}
+
 @Composable
 fun ColorPickerCircleHSVDialog(
     modifier: Modifier = Modifier,
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerCircleValueHSV.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerCircleValueHSV.kt
@@ -13,7 +13,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorCircleHueSaturationHSV
 import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayValueHSV
 import com.smarttoolfactory.colorpicker.util.colorToHSV
 import com.smarttoolfactory.colorpicker.util.colorToHex
-import com.smarttoolfactory.colorpicker.widget.HexDisplay
+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu
 
 /**
  *
@@ -69,7 +69,7 @@ fun ColorPickerCircleValueHSV(
                 }
             )
 
-            HexDisplay(
+            ColorDisplayExposedSelectionMenu(
                 color = currentColor,
                 colorModel = colorModel,
                 onColorModelChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueLightnessHSL.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueLightnessHSL.kt
@@ -15,7 +15,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorRectHueLightnessHSL
 import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplaySaturationHSL
 import com.smarttoolfactory.colorpicker.util.colorToHSL
 import com.smarttoolfactory.colorpicker.util.colorToHex
-import com.smarttoolfactory.colorpicker.widget.HexDisplay
+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu
 
 @Composable
 fun ColorPickerRectHueLightnessHSL(
@@ -71,7 +71,7 @@ fun ColorPickerRectHueLightnessHSL(
                 }
             )
 
-            HexDisplay(
+            ColorDisplayExposedSelectionMenu(
                 color = currentColor,
                 colorModel = colorModel,
                 onColorModelChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueSaturationHSL.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueSaturationHSL.kt
@@ -15,7 +15,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorRectHueSaturationHSL
 import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayLightnessHSL
 import com.smarttoolfactory.colorpicker.util.colorToHSL
 import com.smarttoolfactory.colorpicker.util.colorToHex
-import com.smarttoolfactory.colorpicker.widget.HexDisplay
+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu
 
 @Composable
 fun ColorPickerRectHueSaturationHSL(
@@ -70,7 +70,7 @@ fun ColorPickerRectHueSaturationHSL(
                 }
             )
 
-            HexDisplay(
+            ColorDisplayExposedSelectionMenu(
                 color = currentColor,
                 colorModel = colorModel,
                 onColorModelChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueSaturationHSV.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueSaturationHSV.kt
@@ -15,7 +15,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorRectHueSaturationHSV
 import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayValueHSV
 import com.smarttoolfactory.colorpicker.util.colorToHSV
 import com.smarttoolfactory.colorpicker.util.colorToHex
-import com.smarttoolfactory.colorpicker.widget.HexDisplay
+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu
 
 @Composable
 fun ColorPickerRectHueSaturationHSV(
@@ -70,7 +70,7 @@ fun ColorPickerRectHueSaturationHSV(
                 }
             )
 
-            HexDisplay(
+            ColorDisplayExposedSelectionMenu(
                 color = currentColor,
                 colorModel = colorModel,
                 onColorModelChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueValueHSV.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectHueValueHSV.kt
@@ -15,7 +15,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorRectHueValueHSV
 import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplaySaturationHSV
 import com.smarttoolfactory.colorpicker.util.colorToHSV
 import com.smarttoolfactory.colorpicker.util.colorToHex
-import com.smarttoolfactory.colorpicker.widget.HexDisplay
+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu
 
 @Composable
 fun ColorPickerRectHueValueHSV(
@@ -69,7 +69,7 @@ fun ColorPickerRectHueValueHSV(
                 }
             )
 
-            HexDisplay(
+            ColorDisplayExposedSelectionMenu(
                 color = currentColor,
                 colorModel = colorModel,
                 onColorModelChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectSaturationLightnessHSL.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectSaturationLightnessHSL.kt
@@ -15,7 +15,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorRectSaturationLightness
 import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayHueHSL
 import com.smarttoolfactory.colorpicker.util.colorToHSL
 import com.smarttoolfactory.colorpicker.util.colorToHex
-import com.smarttoolfactory.colorpicker.widget.HexDisplay
+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu
 
 @Composable
 fun ColorPickerRectSaturationLightnessHSL(
@@ -71,7 +71,7 @@ fun ColorPickerRectSaturationLightnessHSL(
                 }
             )
 
-            HexDisplay(
+            ColorDisplayExposedSelectionMenu(
                 color = currentColor,
                 colorModel = colorModel,
                 onColorModelChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectSaturationValueHSV.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRectSaturationValueHSV.kt
@@ -15,7 +15,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorRectSaturationValueHSV
 import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayHueHSV
 import com.smarttoolfactory.colorpicker.util.colorToHSV
 import com.smarttoolfactory.colorpicker.util.colorToHex
-import com.smarttoolfactory.colorpicker.widget.HexDisplay
+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu
 
 @Composable
 fun ColorPickerRectSaturationValueHSV(
@@ -70,7 +70,7 @@ fun ColorPickerRectSaturationValueHSV(
                 }
             )
 
-            HexDisplay(
+            ColorDisplayExposedSelectionMenu(
                 color = currentColor,
                 colorModel = colorModel,
                 onColorModelChange = {
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRingHex.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRingHex.kt
@@ -0,0 +1,110 @@
+package com.smarttoolfactory.colorpicker.picker
+
+import androidx.compose.foundation.layout.*
+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.selector.SelectorRectSaturationValueHSV
+import com.smarttoolfactory.colorpicker.selector.SelectorRingHue
+import com.smarttoolfactory.colorpicker.slider.CompositeSliderPanel
+import com.smarttoolfactory.colorpicker.util.colorToHSV
+import com.smarttoolfactory.colorpicker.util.colorToHex
+import com.smarttoolfactory.colorpicker.widget.HexTextWithCircleDisplay
+
+
+/**
+ * ColorPicker with [SelectorRingHue] hue selector and [SelectorRectSaturationValueHSV]
+ * saturation lightness Selector that uses [HSV](https://en.wikipedia.org/wiki/HSL_and_HSV)
+ * color model as base.
+ * This color picker has tabs section that can be changed between
+ * HSL, HSV and RGB color models and color can be set using [CompositeSliderPanel] which contains
+ * sliders for each color models.
+ *
+ * @param initialColor color that is passed to this picker initially.
+ * @param selectionRadius radius of white and black circle selector.
+ * @param onColorChange callback that is triggered when [Color] is changed using [SelectorRingHue],
+ * [SelectorRectSaturationValueHSV] or [CompositeSliderPanel]
+ */
+@Composable
+fun ColorPickerRingRectHex(
+    modifier: Modifier = Modifier,
+    selectionRadius: Dp = 8.dp,
+    initialColor: Color,
+    onColorChange: (Color, String) -> 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 currentColor by remember(hue, saturation, value) {
+        mutableStateOf(
+            Color.hsv(
+                hue = hue,
+                saturation = saturation,
+                value = value
+            )
+        )
+    }
+
+    var hexString by remember(currentColor) { mutableStateOf(colorToHex(currentColor)) }
+
+
+    onColorChange(currentColor, colorToHex(currentColor))
+
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+
+        Box(contentAlignment = Alignment.Center) {
+
+            // Ring Shaped Hue Selector
+            SelectorRingHue(
+                modifier = Modifier.fillMaxWidth(1f),
+                hue = hue,
+                outerRadiusFraction = .95f,
+                innerRadiusFraction = .75f,
+                backgroundColor = Color.Transparent,
+                borderStrokeColor = Color.Transparent,
+                borderStrokeWidth = 0.dp,
+                selectionRadius = selectionRadius,
+            ) { hueChange ->
+                hue = hueChange
+            }
+
+            // Rect Shaped Saturation and Lightness Selector
+            SelectorRectSaturationValueHSV(
+                modifier = Modifier
+                    .fillMaxWidth(.5f)
+                    .aspectRatio(1f),
+                hue = hue,
+                saturation = saturation,
+                value = value,
+                selectionRadius = selectionRadius
+            ) { s, v ->
+                saturation = s
+                value = v
+            }
+        }
+
+        HexTextWithCircleDisplay(
+            modifier =Modifier.padding(8.dp),
+            color = currentColor,
+            hexString = hexString,
+            onTextChange = {
+                hexString = it
+            }, onColorChange = {
+                val hsvArrayNew = colorToHSV(it)
+                hue = hsvArrayNew[0]
+                saturation = hsvArrayNew[1]
+                value = hsvArrayNew[2]
+                currentColor = it
+            }
+        )
+    }
+}
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/ColorDisplayExposedSelectionMenu.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/ColorDisplayExposedSelectionMenu.kt
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HexText.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HexText.kt
diff --git a/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HexTextWithCircleDisplay.kt b/colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HexTextWithCircleDisplay.kt

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ import com.smarttoolfactory.colorpicker.selector.SelectorCircleHueSaturationHSV`
`13`	`13`	`import com.smarttoolfactory.colorpicker.slider.SliderCircleColorDisplayValueHSV`
`14`	`14`	`import com.smarttoolfactory.colorpicker.util.colorToHSV`
`15`	`15`	`import com.smarttoolfactory.colorpicker.util.colorToHex`
`16`		`-import com.smarttoolfactory.colorpicker.widget.HexDisplay`
	`16`	`+import com.smarttoolfactory.colorpicker.widget.ColorDisplayExposedSelectionMenu`
`17`	`17`
`18`	`18`	`/**`
`19`	`19`	`*`
`@@ -69,7 +69,7 @@ fun ColorPickerCircleValueHSV(`
`69`	`69`	`}`
`70`	`70`	`)`
`71`	`71`
`72`		`- HexDisplay(`
	`72`	`+ ColorDisplayExposedSelectionMenu(`
`73`	`73`	`color = currentColor,`
`74`	`74`	`colorModel = colorModel,`
`75`	`75`	`onColorModelChange = {`