Skip to content

Commit 8ea482d

Browse files
SmartToolFactorySmartToolFactory
committed
update selectors
1 parent 14cce34 commit 8ea482d

File tree

7 files changed

+264
-181
lines changed

7 files changed

+264
-181
lines changed

colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerHSL.kt renamed to colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerRingDimondHSL.kt

Lines changed: 55 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
package com.smarttoolfactory.colorpicker.picker
22

3-
import androidx.compose.foundation.background
43
import androidx.compose.foundation.layout.*
5-
import androidx.compose.foundation.shape.RoundedCornerShape
64
import androidx.compose.material.Text
75
import androidx.compose.material.TextButton
86
import androidx.compose.runtime.*
@@ -12,90 +10,84 @@ import androidx.compose.ui.graphics.Color
1210
import androidx.compose.ui.text.font.FontWeight
1311
import androidx.compose.ui.unit.dp
1412
import androidx.compose.ui.unit.sp
15-
import com.smarttoolfactory.colorpicker.argbToHex
16-
import com.smarttoolfactory.colorpicker.colorToHSL
1713
import com.smarttoolfactory.colorpicker.model.ColorHSL
1814
import com.smarttoolfactory.colorpicker.model.ColorModel
1915
import com.smarttoolfactory.colorpicker.selector.HueSelectorRing
20-
import com.smarttoolfactory.colorpicker.selector.SLSelectorDiamondHSL
16+
import com.smarttoolfactory.colorpicker.selector.SaturationLightnessSelectorDiamondHSL
2117
import com.smarttoolfactory.colorpicker.slider.CompositeSliderPanel
22-
import com.smarttoolfactory.colorpicker.widget.drawChecker
18+
import com.smarttoolfactory.colorpicker.util.argbToHex
19+
import com.smarttoolfactory.colorpicker.util.colorToHSL
20+
import com.smarttoolfactory.colorpicker.widget.ColorDisplayRoundedRect
21+
import com.smarttoolfactory.colorpicker.widget.HexDisplay
2322

2423
@Composable
25-
fun ColorPickerHSL(modifier: Modifier = Modifier, initialColor: Color) {
24+
fun ColorPickerRingDiamondHSL(
25+
modifier: Modifier = Modifier,
26+
initialColor: Color,
27+
outerRadiusFraction: Float = .9f,
28+
innerRadiusFraction: Float = .6f,
29+
onColorChange: (Color) -> Unit
30+
) {
31+
32+
var inputColorModel by remember { mutableStateOf(ColorModel.HSL) }
33+
34+
val hslArray = colorToHSL(initialColor)
35+
36+
var hue by remember { mutableStateOf(hslArray[0]) }
37+
var saturation by remember { mutableStateOf(hslArray[1]) }
38+
var lightness by remember { mutableStateOf(hslArray[2]) }
39+
var alpha by remember { mutableStateOf(initialColor.alpha) }
40+
41+
val currentColor =
42+
Color.hsl(hue = hue, saturation = saturation, lightness = lightness, alpha = alpha)
43+
44+
onColorChange(currentColor)
45+
46+
var hexString by remember(currentColor) {
47+
mutableStateOf(
48+
argbToHex(
49+
currentColor.alpha,
50+
currentColor.red,
51+
currentColor.green,
52+
currentColor.blue
53+
)
54+
)
55+
}
56+
2657
Column(
2758
modifier = modifier,
28-
horizontalAlignment = Alignment.CenterHorizontally
59+
horizontalAlignment = Alignment.CenterHorizontally,
60+
verticalArrangement = Arrangement.Center
2961
) {
3062

31-
val hslArray = colorToHSL(initialColor)
32-
var hue by remember { mutableStateOf(hslArray[0]) }
33-
var saturation by remember { mutableStateOf(hslArray[1]) }
34-
var lightness by remember { mutableStateOf(hslArray[2]) }
35-
var alpha by remember { mutableStateOf(initialColor.alpha) }
36-
37-
val currentColor =
38-
Color.hsl(hue = hue, saturation = saturation, lightness = lightness, alpha = alpha)
39-
40-
var hexString by remember { mutableStateOf("") }
41-
42-
hexString = argbToHex(
43-
currentColor.alpha,
44-
currentColor.red,
45-
currentColor.green,
46-
currentColor.blue
47-
)
48-
49-
var inputColorModel by remember { mutableStateOf(ColorModel.HSL) }
50-
5163
Spacer(modifier = Modifier.height(10.dp))
5264

5365
// Initial and Current Colors
54-
Row(
66+
ColorDisplayRoundedRect(
5567
modifier = Modifier
5668
.fillMaxWidth()
57-
.padding(horizontal = 50.dp, vertical = 10.dp)
58-
) {
69+
.padding(horizontal = 50.dp, vertical = 10.dp),
70+
initialColor = initialColor,
71+
currentColor = currentColor
72+
)
5973

60-
Box(
61-
modifier = Modifier
62-
.weight(1f)
63-
.height(40.dp)
64-
.background(
65-
initialColor,
66-
shape = RoundedCornerShape(topStart = 8.dp, bottomStart = 8.dp)
67-
)
68-
)
69-
Box(
70-
modifier = Modifier
71-
.weight(1f)
72-
.height(40.dp)
73-
.drawChecker(RoundedCornerShape(topEnd = 8.dp, bottomEnd = 8.dp))
74-
.background(
75-
currentColor,
76-
shape = RoundedCornerShape(topEnd = 8.dp, bottomEnd = 8.dp)
77-
)
78-
)
79-
}
8074

81-
// ColorWheel for hue selection
82-
// SaturationDiamond for saturation and lightness selections
83-
Box(
84-
modifier = Modifier,
85-
contentAlignment = Alignment.Center
86-
) {
75+
Box(contentAlignment = Alignment.Center) {
8776

77+
// Ring Shaped Hue Selector
8878
HueSelectorRing(
89-
modifier = Modifier.size(350.dp),
79+
modifier = Modifier.fillMaxWidth(1f),
9080
hue = hue,
81+
outerRadiusFraction = outerRadiusFraction,
82+
innerRadiusFraction = innerRadiusFraction,
9183
selectionRadius = 8.dp
9284
) { hueChange ->
9385
hue = hueChange
94-
9586
}
9687

97-
SLSelectorDiamondHSL(
98-
modifier = Modifier.size(200.dp),
88+
// Diamond Shaped Saturation and Lightness Selector
89+
SaturationLightnessSelectorDiamondHSL(
90+
modifier = Modifier.fillMaxWidth(innerRadiusFraction * .9f),
9991
hue = hue,
10092
saturation = saturation,
10193
lightness = lightness,
@@ -104,9 +96,9 @@ fun ColorPickerHSL(modifier: Modifier = Modifier, initialColor: Color) {
10496
saturation = s
10597
lightness = l
10698
}
107-
10899
}
109100

101+
// HSL-HSV-RGB Color Model Change Tabs
110102
Row(
111103
modifier = Modifier.width(350.dp),
112104
horizontalArrangement = Arrangement.SpaceEvenly
@@ -132,9 +124,8 @@ fun ColorPickerHSL(modifier: Modifier = Modifier, initialColor: Color) {
132124
}
133125
}
134126

135-
127+
// HSL-HSV-RGB Sliders
136128
CompositeSliderPanel(
137-
modifier = Modifier.widthIn(340.dp),
138129
compositeColor = ColorHSL(
139130
hue = hue,
140131
saturation = saturation,
@@ -155,13 +146,5 @@ fun ColorPickerHSL(modifier: Modifier = Modifier, initialColor: Color) {
155146
inputColorModel = inputColorModel,
156147
outputColorModel = ColorModel.HSL
157148
)
158-
159-
Text(
160-
text = hexString,
161-
fontWeight = FontWeight.Bold,
162-
fontSize = 18.sp,
163-
color = currentColor
164-
)
165-
166149
}
167150
}

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/selector/HueLightnessValueSelectorRect.kt‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ import com.smarttoolfactory.colorpicker.ui.gradientColorScaleHSV
2020
import com.smarttoolfactory.gesture.pointerMotionEvents
2121

2222
/**
23-
* Rectangle Hue and Value selector for HSV color model
24-
* @param hue is in [0f..360f] of HSL color
25-
* @param value is in [0f..1f] of HSL color
23+
* Rectangle Hue and Value selector for
24+
* [HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) color model
25+
* @param hue is in [0f..360f] of HSV color
26+
* @param value is in [0f..1f] of HSV color
2627
* @param selectionRadius radius of selection circle that moves based on touch position
2728
* @param onChange callback that returns [hue] and [value]
2829
* when position of touch in this selector has changed.
@@ -63,9 +64,10 @@ fun HueValueSelectorRectHSV(
6364
}
6465

6566
/**
66-
* Rectangle Hue and Saturation selector for HSV color model
67-
* @param hue is in [0f..360f] of HSL color
68-
* @param saturation is in [0f..1f] of HSL color
67+
* Rectangle Hue and Saturation selector for
68+
* [HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) color model
69+
* @param hue is in [0f..360f] of HSV color
70+
* @param saturation is in [0f..1f] of HSV color
6971
* @param selectionRadius radius of selection circle that moves based on touch position
7072
* @param onChange callback that returns [hue] and [saturation]
7173
* when position of touch in this selector has changed.
@@ -108,7 +110,8 @@ fun HueSaturationSelectorRectHSV(
108110
}
109111

110112
/**
111-
* Rectangle Hue and Saturation selector for HSL color model
113+
* Rectangle Hue and Saturation selector for
114+
* [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) color model
112115
* @param hue is in [0f..360f] of HSL color
113116
* @param saturation is in [0f..1f] of HSL color
114117
* @param selectionRadius radius of selection circle that moves based on touch position
@@ -151,7 +154,8 @@ fun HueSaturationSelectorRectHSL(
151154
}
152155

153156
/**
154-
* Rectangle Hue and Lightness selector for HSL color model
157+
* Rectangle Hue and Lightness selector for
158+
* [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) color model
155159
* @param hue is in [0f..360f] of HSL color
156160
* @param lightness is in [0f..1f] of HSL color
157161
* @param selectionRadius radius of selection circle that moves based on touch position

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/selector/HueSaturationSelectorCircle.kt‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,20 @@ import androidx.compose.ui.graphics.Brush
1010
import androidx.compose.ui.graphics.Color
1111
import androidx.compose.ui.input.pointer.consumeDownChange
1212
import androidx.compose.ui.input.pointer.consumePositionChange
13-
import androidx.compose.ui.layout.onSizeChanged
1413
import androidx.compose.ui.platform.LocalDensity
1514
import androidx.compose.ui.unit.Dp
16-
import com.smarttoolfactory.colorpicker.calculateAngleFomLocalCoordinates
17-
import com.smarttoolfactory.colorpicker.calculateDistanceFromCenter
18-
import com.smarttoolfactory.colorpicker.calculatePositionFromAngleAndDistance
15+
import com.smarttoolfactory.colorpicker.util.calculateAngleFomLocalCoordinates
16+
import com.smarttoolfactory.colorpicker.util.calculateDistanceFromCenter
17+
import com.smarttoolfactory.colorpicker.util.calculatePositionFromAngleAndDistance
1918
import com.smarttoolfactory.colorpicker.ui.gradientColorScaleHSVReversed
2019
import com.smarttoolfactory.gesture.pointerMotionEvents
2120

2221
/**
23-
* Circle Hue and Saturation picker. Angle is between touch point and center of this
24-
* selector is returned as [hue]
25-
* and distance from center as [saturation].
26-
* @param hue is in [0f..360f] of HSL color
27-
* @param saturation is in [0f..1f] of HSL color
22+
* Circle Hue and Saturation picker for
23+
* [HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) color model. Angle is between touch point
24+
* and center of this selector is returned as [hue], distance from center as [saturation].
25+
* @param hue is in [0f..360f] of HSV color
26+
* @param saturation is in [0f..1f] of HSV color
2827
* @param selectionRadius radius of selection circle that moves based on touch position
2928
* @param onChange callback that returns [hue] and [saturation]
3029
* when position of touch in this selector has changed.
@@ -39,10 +38,6 @@ fun HueSaturationSelectorCircleHSV(
3938
) {
4039
BoxWithConstraints(modifier) {
4140

42-
require(maxWidth == maxHeight) {
43-
"Hue selector should have equal width and height"
44-
}
45-
4641
val density = LocalDensity.current.density
4742

4843
// Check if user touches between the valid area of circle

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/selector/HueSelectorRing.kt‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import androidx.compose.ui.layout.*
1616
import androidx.compose.ui.platform.LocalDensity
1717
import androidx.compose.ui.unit.Dp
1818
import androidx.compose.ui.unit.dp
19-
import com.smarttoolfactory.colorpicker.calculateAngleFomLocalCoordinates
20-
import com.smarttoolfactory.colorpicker.calculateDistanceFromCenter
19+
import com.smarttoolfactory.colorpicker.util.calculateAngleFomLocalCoordinates
20+
import com.smarttoolfactory.colorpicker.util.calculateDistanceFromCenter
2121
import com.smarttoolfactory.colorpicker.ui.gradientColorScaleRGB
2222
import com.smarttoolfactory.gesture.pointerMotionEvents
2323

@@ -26,8 +26,8 @@ import com.smarttoolfactory.gesture.pointerMotionEvents
2626
*
2727
* @param hue is in [0f..360f] of HSL color. Touching any point in ring returns angle between
2828
* touch point and center
29-
* @param outerRadiusRatio radius ratio of outer radius of ring in percent
30-
* @param innerRadiusRatio radius ratio of inner radius of ring in percent
29+
* @param outerRadiusFraction radius ratio of outer radius of ring in percent
30+
* @param innerRadiusFraction radius ratio of inner radius of ring in percent
3131
* @param borderStrokeColor color for drawing border outer and inner positions of ring
3232
* @param borderStrokeWidth width of stroke for drawing border inner and outer positions of ring
3333
* @param backgroundColor is the color of circle drawn from center to inner radius
@@ -38,8 +38,8 @@ import com.smarttoolfactory.gesture.pointerMotionEvents
3838
fun HueSelectorRing(
3939
modifier: Modifier = Modifier,
4040
@FloatRange(from = 0.1, to = 360.0) hue: Float,
41-
@FloatRange(from = 0.0, to = 1.0) outerRadiusRatio: Float = .9f,
42-
@FloatRange(from = 0.0, to = 1.0) innerRadiusRatio: Float = .6f,
41+
@FloatRange(from = 0.0, to = 1.0) outerRadiusFraction: Float = .9f,
42+
@FloatRange(from = 0.0, to = 1.0) innerRadiusFraction: Float = .6f,
4343
borderStrokeColor: Color = Color.Black,
4444
borderStrokeWidth: Dp = 4.dp,
4545
backgroundColor: Color = Color.Black,
@@ -64,8 +64,8 @@ fun HueSelectorRing(
6464
// Center Offset of selector
6565
val center = Offset(radius, radius)
6666

67-
val radiusInner: Float = (radius * innerRadiusRatio).coerceAtLeast(0f)
68-
val radiusOuter: Float = (radius * outerRadiusRatio).coerceAtLeast(radiusInner)
67+
val radiusInner: Float = (radius * innerRadiusFraction).coerceAtLeast(0f)
68+
val radiusOuter: Float = (radius * outerRadiusFraction).coerceAtLeast(radiusInner)
6969

7070
// Border stroke width for inner and outer radius positions
7171
val borderStrokeWidthPx =

0 commit comments

Comments
 (0)