Skip to content

Commit 4970531

Browse files
syslogicsyslogic
committed
detectDragGestures
1 parent d8ace59 commit 4970531

File tree

2 files changed

+57
-19
lines changed

2 files changed

+57
-19
lines changed

‎build.gradle

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ buildscript {
1111
kotlin_version = '1.7.0'
1212
compose_compiler_version = '1.2.0'
1313
compose_version = '1.2.0-rc01'
14-
version_name = '1.1.0'
15-
version_code = 10
14+
version_name = '1.1.1'
15+
version_code = 11
1616
}
1717
}
1818

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

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import android.graphics.RectF
77
import android.widget.Toast
88

99
import androidx.compose.foundation.Image
10+
import androidx.compose.foundation.gestures.detectDragGestures
1011
import androidx.compose.foundation.gestures.detectTapGestures
1112
import androidx.compose.foundation.layout.*
1213
import androidx.compose.material.Text
@@ -16,6 +17,7 @@ import androidx.compose.ui.Modifier
1617
import androidx.compose.ui.geometry.Offset
1718
import androidx.compose.ui.geometry.Size
1819
import androidx.compose.ui.graphics.Color
20+
import androidx.compose.ui.input.pointer.PointerInputChange
1921
import androidx.compose.ui.input.pointer.pointerInput
2022
import androidx.compose.ui.layout.ContentScale
2123
import androidx.compose.ui.layout.layoutId
@@ -48,30 +50,38 @@ fun ColorPickerComponent(
4850
showHex: Boolean = true
4951
) {
5052

51-
val context = LocalContext.current
52-
val listener: OnColorChangedListener? = onColorChanged
53-
val rowPadding = dimensionResource(R.dimen.compose_row_padding)
54-
val colPadding = dimensionResource(R.dimen.compose_col_padding)
53+
/* Loading dimension resources from dimens.xml */
5554
val hsvLabelMinWidth = dimensionResource(R.dimen.compose_hsv_label_min_width)
5655
val hsvLabelPaddingEnd = dimensionResource(R.dimen.compose_hsv_label_padding_end)
5756
val argbValueMinWidth = dimensionResource(R.dimen.compose_argb_value_min_width)
57+
val rowPadding = dimensionResource(R.dimen.compose_row_padding)
58+
val colPadding = dimensionResource(R.dimen.compose_col_padding)
5859

59-
/* The initial value must be `initialColor` for all of them. */
60+
/* All the values are being initialized by the `initialColor`. */
6061
var currentColor: Int by remember { mutableStateOf(initialColor.hashCode()) }
6162
var currentAlpha: Float by remember { mutableStateOf(initialColor.alpha) }
6263
var currentHue: Float by remember { mutableStateOf(getHSV(initialColor)[0]) }
6364
var currentSat: Float by remember { mutableStateOf(getHSV(initialColor)[1]) }
6465
var currentVal: Float by remember { mutableStateOf(getHSV(initialColor)[2]) }
6566

67+
/* The measured position of the SatValPainter. */
6668
var offsetSatVal by remember { mutableStateOf(Offset.Zero) }
6769
var sizeSatVal by remember { mutableStateOf(IntSize.Zero) }
6870

71+
/* The measured position of the HuePainter. */
6972
var offsetHue by remember { mutableStateOf(Offset.Zero) }
7073
var sizeHue by remember { mutableStateOf(IntSize.Zero) }
7174

75+
/* The measured position of the AlphaPainter. */
7276
var offsetAlpha by remember { mutableStateOf(Offset.Zero) }
7377
var sizeAlpha by remember { mutableStateOf(IntSize.Zero) }
7478

79+
/* Callback listener */
80+
val listener: OnColorChangedListener? = onColorChanged
81+
82+
/* Composable LocalContext */
83+
val context = LocalContext.current
84+
7585
Column(
7686
horizontalAlignment = Alignment.CenterHorizontally,
7787
modifier = Modifier.fillMaxWidth()
@@ -242,14 +252,24 @@ fun ColorPickerComponent(
242252
modifier = Modifier
243253
.layoutId(SatVal)
244254
.testTag("sat_val")
255+
.pointerInput(Unit) {
256+
detectDragGestures(
257+
onDrag = { inputChange: PointerInputChange, _: Offset ->
258+
val rect: RectF = getLayoutBounds(offsetSatVal, sizeSatVal)
259+
currentSat = pointToSat(rect, inputChange.position.x)
260+
currentVal = pointToVal(rect, inputChange.position.y)
261+
currentColor = toIntColor(currentAlpha, currentHue, currentSat, currentVal)
262+
}
263+
)
264+
}
245265
.pointerInput(Unit) {
246266
detectTapGestures(
247-
onPress = { event ->
267+
onPress = { offset: Offset ->
248268
val rect: RectF = getLayoutBounds(offsetSatVal, sizeSatVal)
249-
currentSat = pointToSat(rect, event.x)
250-
currentVal = pointToVal(rect, event.y)
269+
currentSat = pointToSat(rect, offset.x)
270+
currentVal = pointToVal(rect, offset.y)
251271
currentColor = toIntColor(currentAlpha, currentHue, currentSat, currentVal)
252-
println("Sat: $currentSat, Val: $currentVal (${event.x.toInt()} x ${event.y.toInt()})")
272+
println("Hue: $currentHue, Sat: $currentSat, Val: $currentVal (${offset.x.toInt()} x ${offset.y.toInt()})")
253273
}
254274
)
255275
}
@@ -273,13 +293,22 @@ fun ColorPickerComponent(
273293
modifier = Modifier
274294
.layoutId(Hue)
275295
.testTag("hue")
296+
.pointerInput(Unit) {
297+
detectDragGestures(
298+
onDrag = { inputChange: PointerInputChange, _: Offset ->
299+
val rect: RectF = getLayoutBounds(offsetHue, sizeHue)
300+
currentHue = pointToHue(rect, inputChange.position.y)
301+
currentColor = toIntColor(currentAlpha, currentHue, currentSat, currentVal)
302+
}
303+
)
304+
}
276305
.pointerInput(Unit) {
277306
detectTapGestures(
278-
onPress = { event ->
307+
onPress = { offset: Offset ->
279308
val rect: RectF = getLayoutBounds(offsetHue, sizeHue)
280-
currentHue = pointToHue(rect, event.y)
309+
currentHue = pointToHue(rect, offset.y)
281310
currentColor = toIntColor(currentAlpha, currentHue, currentSat, currentVal)
282-
println("Val: $currentHue (${event.y.toInt()})")
311+
println("Val: $currentHue (${offset.y.toInt()})")
283312
}
284313
)
285314
}
@@ -309,13 +338,22 @@ fun ColorPickerComponent(
309338
modifier = Modifier
310339
.layoutId(Alpha)
311340
.testTag("alpha")
341+
.pointerInput(Unit) {
342+
detectDragGestures(
343+
onDrag = { inputChange: PointerInputChange, _: Offset ->
344+
val rect: RectF = getLayoutBounds(offsetAlpha, sizeAlpha)
345+
currentAlpha = pointToAlpha(rect, inputChange.position.x)
346+
currentColor = toIntColor(currentAlpha, currentHue, currentSat, currentVal)
347+
}
348+
)
349+
}
312350
.pointerInput(Unit) {
313351
detectTapGestures(
314-
onPress = { event ->
352+
onPress = { offset: Offset ->
315353
val rect: RectF = getLayoutBounds(offsetAlpha, sizeAlpha)
316-
currentAlpha = pointToAlpha(rect, event.x)
354+
currentAlpha = pointToAlpha(rect, offset.x)
317355
currentColor = toIntColor(currentAlpha, currentHue, currentSat, currentVal)
318-
println("Alpha: $currentAlpha (${event.x.toInt()})")
356+
println("Alpha: $currentAlpha (${offset.x.toInt()})")
319357
}
320358
)
321359
}
@@ -367,7 +405,7 @@ fun ColorPickerComponent(
367405
.padding(all = rowPadding)
368406
.pointerInput(Unit) {
369407
detectTapGestures(
370-
onPress = {
408+
onPress = { _: Offset ->
371409
/* reset to the previous color */
372410
onButtonClick(context, OldColor, initialColor.hashCode(), listener)
373411
currentColor = initialColor.hashCode()
@@ -405,7 +443,7 @@ fun ColorPickerComponent(
405443
.padding(all = rowPadding)
406444
.pointerInput(Unit) {
407445
detectTapGestures(
408-
onPress = {
446+
onPress = { _: Offset ->
409447
onButtonClick(
410448
context,
411449
NewColor,

0 commit comments

Comments
 (0)