Skip to content

Commit 4901f22

Browse files
SmartToolFactorySmartToolFactory
committed
refactor selectors
1 parent 159e290 commit 4901f22

File tree

11 files changed

+249
-163
lines changed

11 files changed

+249
-163
lines changed

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/ColorPickerDemo.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import com.smarttoolfactory.colorpicker.picker.ColorPickerHSL
1818
fun ColorPickerDemo() {
1919
Column(
2020
modifier = Modifier
21-
// .background(Color.White)
2221
.fillMaxSize()
2322
.padding(8.dp)
2423
.verticalScroll(rememberScrollState())

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/SaturationSelectorDemo.kt‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ fun SaturationSelectorDemo() {
3333
Column(horizontalAlignment = Alignment.CenterHorizontally) {
3434
val selectorModifier = Modifier
3535
.size(300.dp)
36-
.padding(20.dp)
36+
.padding(8.dp)
3737
val cardModifier = Modifier
3838
.padding(8.dp)
3939
.shadow(1.dp, RoundedCornerShape(2.dp))
@@ -69,7 +69,7 @@ fun SLWithHSLDiamondExample(modifier: Modifier, selectorModifier: Modifier) {
6969
modifier = modifier,
7070
horizontalAlignment = Alignment.CenterHorizontally
7171
) {
72-
SLSelectorFromHSLDiamond(
72+
SLSelectorDiamondHSL(
7373
modifier = selectorModifier,
7474
hue = hue,
7575
saturation = saturation,
@@ -111,10 +111,10 @@ private fun SVSelectorWithHSVRectangleExample(modifier: Modifier, selectorModifi
111111
modifier = modifier,
112112
horizontalAlignment = Alignment.CenterHorizontally
113113
) {
114-
SVSelectorFromHSVRectangle(
114+
SVSelectorRectHSV(
115115
modifier = Modifier
116116
.fillMaxWidth()
117-
.height(200.dp),
117+
.aspectRatio(4/3f),
118118
hue = hue,
119119
saturation = saturation,
120120
value = value,
@@ -125,7 +125,6 @@ private fun SVSelectorWithHSVRectangleExample(modifier: Modifier, selectorModifi
125125
}
126126

127127
SliderCircleColorDisplayHueHSV(
128-
modifier = Modifier.padding(8.dp),
129128
hue = hue,
130129
saturation = saturation,
131130
value = value,
@@ -153,7 +152,7 @@ private fun HSSelectorHSVCircleExample(modifier: Modifier, selectorModifier: Mod
153152
modifier = modifier,
154153
horizontalAlignment = Alignment.CenterHorizontally
155154
) {
156-
HueSaturationSelectorCircle(
155+
HueSaturationSelectorCircleHSV(
157156
modifier = selectorModifier,
158157
hue = hue,
159158
saturation = saturation,
@@ -196,7 +195,7 @@ private fun HSSelectorWithHSVRectangleExample(modifier: Modifier, selectorModifi
196195
HueSaturationSelectorRectHSV(
197196
modifier = Modifier
198197
.fillMaxWidth()
199-
.height(200.dp),
198+
.aspectRatio(4/3f),
200199
hue = hue,
201200
saturation = saturation,
202201
onChange = { h, s ->
@@ -238,7 +237,7 @@ private fun HVSelectorWithHSVRectangleExample(modifier: Modifier, selectorModifi
238237
HueValueSelectorRectHSV(
239238
modifier = Modifier
240239
.fillMaxWidth()
241-
.height(200.dp),
240+
.aspectRatio(4/3f),
242241
hue = hue,
243242
value = value,
244243
onChange = { h, v ->
@@ -280,7 +279,7 @@ private fun HSSelectorWithHSLRectangleExample(modifier: Modifier, selectorModifi
280279
HueSaturationSelectorRectHSL(
281280
modifier = Modifier
282281
.fillMaxWidth()
283-
.height(200.dp),
282+
.aspectRatio(4/3f),
284283
hue = hue,
285284
saturation = saturation,
286285
onChange = { h, s ->
@@ -322,7 +321,7 @@ private fun HLSelectorWithHSLRectangleExample(modifier: Modifier, selectorModifi
322321
HueLightnessSelectorRectHSL(
323322
modifier = Modifier
324323
.fillMaxWidth()
325-
.height(200.dp),
324+
.aspectRatio(4/3f),
326325
hue = hue,
327326
lightness = lightness,
328327
onChange = { h, l ->

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/picker/ColorPickerHSL.kt‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import com.smarttoolfactory.colorpicker.colorToHSL
1717
import com.smarttoolfactory.colorpicker.model.ColorHSL
1818
import com.smarttoolfactory.colorpicker.model.ColorModel
1919
import com.smarttoolfactory.colorpicker.selector.HueSelectorRing
20-
import com.smarttoolfactory.colorpicker.selector.SLSelectorFromHSLDiamond
20+
import com.smarttoolfactory.colorpicker.selector.SLSelectorDiamondHSL
2121
import com.smarttoolfactory.colorpicker.slider.CompositeSliderPanel
2222
import com.smarttoolfactory.colorpicker.widget.drawChecker
2323

@@ -86,28 +86,25 @@ fun ColorPickerHSL(modifier: Modifier = Modifier, initialColor: Color) {
8686
) {
8787

8888
HueSelectorRing(
89-
modifier = Modifier
90-
.width(350.dp)
91-
.aspectRatio(1f),
89+
modifier = Modifier.size(350.dp),
9290
hue = hue,
9391
selectionRadius = 8.dp
9492
) { hueChange ->
9593
hue = hueChange
9694

9795
}
9896

99-
Column {
100-
SLSelectorFromHSLDiamond(
101-
modifier = Modifier.size(200.dp),
102-
hue = hue,
103-
saturation = saturation,
104-
lightness = lightness,
105-
selectionRadius = 8.dp
106-
) { s, l ->
107-
saturation = s
108-
lightness = l
109-
}
97+
SLSelectorDiamondHSL(
98+
modifier = Modifier.size(200.dp),
99+
hue = hue,
100+
saturation = saturation,
101+
lightness = lightness,
102+
selectionRadius = 8.dp
103+
) { s, l ->
104+
saturation = s
105+
lightness = l
110106
}
107+
111108
}
112109

113110
Row(

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ fun DrawScope.drawHueSelectionCircle(
2020
Color.White,
2121
radius = radius,
2222
center = center,
23-
style = Stroke(width = radius / 2)
23+
style = Stroke(width = radius / 4)
2424
)
2525

2626
drawCircle(
2727
Color.Black,
28-
radius = radius + radius / 4,
28+
radius = radius + radius / 8,
2929
center = center,
30-
style = Stroke(width = radius / 4)
30+
style = Stroke(width = radius / 8)
3131
)
3232
}

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

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
package com.smarttoolfactory.colorpicker.selector
22

33
import androidx.compose.foundation.Canvas
4+
import androidx.compose.foundation.background
45
import androidx.compose.foundation.layout.BoxWithConstraints
6+
import androidx.compose.foundation.layout.fillMaxSize
57
import androidx.compose.runtime.*
68
import androidx.compose.ui.Modifier
79
import androidx.compose.ui.geometry.Offset
810
import androidx.compose.ui.graphics.Brush
11+
import androidx.compose.ui.graphics.Color
912
import androidx.compose.ui.input.pointer.consumeDownChange
1013
import androidx.compose.ui.input.pointer.consumePositionChange
1114
import androidx.compose.ui.platform.LocalDensity
@@ -224,8 +227,7 @@ private fun SelectorRectangle(
224227
if (selectionRadius != Dp.Unspecified) selectionRadius.value * density
225228
else width.coerceAtMost(height) * .04f
226229

227-
228-
val colorPickerModifier = modifier
230+
val canvasModifier = Modifier
229231
.pointerMotionEvents(
230232
onDown = {
231233
val position = it.position
@@ -253,17 +255,36 @@ private fun SelectorRectangle(
253255
delayAfterDownInMillis = 20
254256
)
255257

256-
Canvas(modifier = colorPickerModifier) {
258+
SelectorRectImpl(
259+
modifier = canvasModifier,
260+
selectorPosition = currentPosition,
261+
brushHue = brushHue,
262+
brushProperty = brushProperty,
263+
selectorRadius = selectorRadius
264+
)
257265

258-
// Draw hue and saturation selection gradients
259-
drawRect(brush = brushHue)
260-
drawRect(brush = brushProperty)
266+
}
267+
}
261268

262-
drawHueSelectionCircle(
263-
center = currentPosition,
264-
radius = selectorRadius
265-
)
266-
}
269+
@Composable
270+
private fun SelectorRectImpl(
271+
modifier: Modifier,
272+
selectorPosition: Offset,
273+
brushHue: Brush,
274+
brushProperty: Brush,
275+
selectorRadius: Float
276+
) {
277+
Canvas(
278+
modifier = modifier.fillMaxSize()
279+
) {
280+
// Draw hue and saturation selection gradients
281+
drawRect(brush = brushHue)
282+
drawRect(brush = brushProperty)
283+
284+
drawHueSelectionCircle(
285+
center = selectorPosition,
286+
radius = selectorRadius
287+
)
267288
}
268289
}
269290

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

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
package com.smarttoolfactory.colorpicker.selector
22

33
import androidx.compose.foundation.Canvas
4-
import androidx.compose.foundation.background
54
import androidx.compose.foundation.layout.BoxWithConstraints
5+
import androidx.compose.foundation.layout.aspectRatio
66
import androidx.compose.runtime.*
77
import androidx.compose.ui.Modifier
88
import androidx.compose.ui.geometry.Offset
99
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
1314
import androidx.compose.ui.platform.LocalDensity
1415
import androidx.compose.ui.unit.Dp
1516
import com.smarttoolfactory.colorpicker.calculateAngleFomLocalCoordinates
@@ -29,14 +30,14 @@ import com.smarttoolfactory.gesture.pointerMotionEvents
2930
* when position of touch in this selector has changed.
3031
*/
3132
@Composable
32-
fun HueSaturationSelectorCircle(
33+
fun HueSaturationSelectorCircleHSV(
3334
modifier: Modifier = Modifier,
3435
hue: Float,
3536
saturation: Float,
3637
selectionRadius: Dp = Dp.Unspecified,
3738
onChange: (Float, Float) -> Unit
3839
) {
39-
BoxWithConstraints(modifier.background(Color.Red)) {
40+
BoxWithConstraints(modifier) {
4041

4142
require(maxWidth == maxHeight) {
4243
"Hue selector should have equal width and height"
@@ -67,15 +68,8 @@ fun HueSaturationSelectorCircle(
6768
if (selectionRadius != Dp.Unspecified) selectionRadius.value * density
6869
else width * .04f
6970

70-
val colorScaleHSVSweep = remember { Brush.sweepGradient(gradientColorScaleHSVReversed) }
71-
val whiteToTransparentRadial = remember {
72-
Brush.radialGradient(
73-
colors = listOf(Color.White, Color(0x00FFFFFF))
74-
)
75-
}
7671

77-
val colorPickerModifier = modifier
78-
.background(Color.Yellow)
72+
val canvasModifier = Modifier
7973
.pointerMotionEvents(
8074
onDown = {
8175
val position = it.position
@@ -119,11 +113,33 @@ fun HueSaturationSelectorCircle(
119113
delayAfterDownInMillis = 20
120114
)
121115

122-
Canvas(modifier = colorPickerModifier) {
123-
// Draw hue selection circle with sweep gradient
124-
drawCircle(colorScaleHSVSweep)
125-
drawCircle(whiteToTransparentRadial)
126-
drawHueSelectionCircle(center = currentPosition, radius = selectorRadius)
127-
}
116+
CircleSelectorImpl(
117+
modifier = canvasModifier,
118+
selectorPosition = currentPosition,
119+
selectorRadius = selectorRadius
120+
)
121+
}
122+
}
123+
124+
@Composable
125+
private fun CircleSelectorImpl(
126+
modifier: Modifier,
127+
selectorPosition: Offset,
128+
selectorRadius: Float
129+
) {
130+
val colorScaleHSVSweep = remember { Brush.sweepGradient(gradientColorScaleHSVReversed) }
131+
val whiteToTransparentRadial = remember {
132+
Brush.radialGradient(
133+
colors = listOf(Color.White, Color(0x00FFFFFF))
134+
)
135+
}
136+
Canvas(
137+
modifier = modifier.aspectRatio(1f)
138+
139+
) {
140+
// Draw hue selection circle with sweep gradient
141+
drawCircle(colorScaleHSVSweep)
142+
drawCircle(whiteToTransparentRadial)
143+
drawHueSelectionCircle(center = selectorPosition, radius = selectorRadius)
128144
}
129145
}

0 commit comments

Comments
 (0)