feat(Slider): Add Tap functionality

Author: levinzonr

demo/src/main/java/io/monstarlab/mosaic/features/SliderDemo.kt

@@ -31,8 +31,7 @@ fun SliderDemo() = Scaffold(modifier = Modifier) {
     Column(
         modifier = Modifier
             .padding(it)
-            .padding(16.dp)
-            .background(Color.LightGray),
+            .padding(16.dp),
         verticalArrangement = Arrangement.spacedBy(32.dp),
     ) {
         MaterialSlider(
@@ -74,8 +73,12 @@ fun MosaicSliderDemo(
             horizontalArrangement = Arrangement.Start,
             modifier = Modifier,
         ) {
-            Text(text = range.start.toString())
+            Text(
+                text = range.start.toString(),
+                modifier = Modifier.weight(0.2f),
+            )
             Slider(
+                modifier = Modifier.weight(0.8f),
                 value = value,
                 onValueChange = { value = it },
                 colors = SliderColors(Color.Black),
@@ -91,8 +94,11 @@ fun MosaicSliderDemo(
                     }
                 },
             )
+            Text(
+                text = range.endInclusive.toString(),
+                modifier = Modifier.weight(0.2f),
+            )
         }
-        Text(text = range.endInclusive.toString())
     }
 }
 

slider/src/main/java/io/monstarlab/mosaic/slider/Slider.kt

@@ -1,7 +1,9 @@
 package io.monstarlab.mosaic.slider
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.focusable
 import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.gestures.draggable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
@@ -11,6 +13,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.LayoutDirection
@@ -45,17 +48,27 @@ public fun Slider(
     state.range = range
     state.onValueChange = onValueChange
 
-    val draggable = modifier.draggable(
+    val tap = Modifier.pointerInput(state, interactionSource) {
+        detectTapGestures(
+            onPress = { state.handlePress(it) },
+        )
+    }
+
+    val drag = Modifier.draggable(
         state = state,
         orientation = Orientation.Horizontal,
         enabled = true,
         interactionSource = interactionSource,
-        startDragImmediately = true,
+        startDragImmediately = state.isDragging,
         reverseDirection = isRtl,
+        onDragStopped = {},
     )
 
     SliderLayout(
-        modifier = modifier.then(draggable),
+        modifier = modifier
+            .focusable(true, interactionSource)
+            .then(tap)
+            .then(drag),
         thumb = thumb,
         track = {
             SliderTrack(

slider/src/main/java/io/monstarlab/mosaic/slider/SliderState.kt

@@ -10,6 +10,7 @@ import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.geometry.Offset
 import kotlinx.coroutines.coroutineScope
 
 /**
@@ -53,13 +54,7 @@ public class SliderState(
     override fun dispatchRawDelta(delta: Float) {
         val newRawOffset = rawOffset + delta
         val userValue = scaleToUserValue(newRawOffset)
-        if (userValue != value) {
-            if (onValueChange != null) {
-                onValueChange?.invoke(userValue)
-            } else {
-                rawOffset = newRawOffset
-            }
-        }
+        handleValueUpdate(userValue, newRawOffset)
     }
 
     override suspend fun drag(
@@ -71,11 +66,25 @@ public class SliderState(
         isDragging = false
     }
 
+    internal fun handlePress(offset: Offset) {
+        println(offset)
+        val userValue = scaleToUserValue(offset.x)
+        handleValueUpdate(userValue, offset.x)
+    }
+
     internal fun updateDimensions(totalWidth: Float, thumbWidth: Float) {
         this.totalWidth = totalWidth
         this.thumbWidth = thumbWidth
     }
 
+    private fun handleValueUpdate(value: Float, offset: Float) {
+        if (onValueChange != null) {
+            onValueChange?.invoke(value)
+        } else {
+            rawOffset = offset
+        }
+    }
+
     private fun scaleToUserValue(offset: Float): Float {
         val rangeStart = valueDistribution.interpolate(range.start)
         val rangeEnd = valueDistribution.interpolate(range.endInclusive)

slider/src/main/java/io/monstarlab/mosaic/slider/SliderValueDistribution.kt

@@ -55,7 +55,6 @@ public interface SliderValueDistribution {
     }
 }
 
-
 /**
  * Represents a parabolic distribution strategy for slider values.
  *