feat(Slider): Add Custom Value distribution and parabolic example

Author: levinzonr

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

@@ -1,12 +1,12 @@
 package io.monstarlab.mosaic.features
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -15,23 +15,27 @@ import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.monstarlab.mosaic.slider.ParabolicValueDistribution
 import io.monstarlab.mosaic.slider.Slider
 import io.monstarlab.mosaic.slider.SliderColors
+import io.monstarlab.mosaic.slider.SliderValueDistribution
+import kotlin.math.roundToInt
+import kotlin.math.sqrt
 import androidx.compose.material3.Slider as MaterialSlider
+
 @Composable
 fun SliderDemo() = Scaffold(modifier = Modifier) {
     var materialSliderValue by remember { mutableFloatStateOf(50f) }
-    var mosaicSliderValue by remember { mutableFloatStateOf(50f) }
 
     Column(
         modifier = Modifier
             .padding(it)
             .padding(16.dp)
             .background(Color.LightGray),
+        verticalArrangement = Arrangement.spacedBy(32.dp),
     ) {
         MaterialSlider(
             value = materialSliderValue,
@@ -40,21 +44,61 @@ fun SliderDemo() = Scaffold(modifier = Modifier) {
         )
         Text(text = materialSliderValue.toString())
 
-        Spacer(modifier = Modifier.size(32.dp))
+        MosaicSliderDemo(
+            label = "Linear division strategy",
+            range = 0f..1000f,
+            valuesDistribution = SliderValueDistribution.Linear,
+        )
+        MosaicSliderDemo(
+            label = "Parabolic",
+            range = 0f..1000f,
+            valuesDistribution = SliderValueDistribution.parabolic(
+                a = (1000 - 100 * 0.1f) / (1000 * 1000),
+                b = 0.1f,
+                c = 1f
+            ),
+        )
+    }
+}
+
+@Composable
+fun MosaicSliderDemo(
+    label: String,
+    range: ClosedFloatingPointRange<Float>,
+    valuesDistribution: SliderValueDistribution,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier) {
+        Text(text = label)
 
-        Slider(
-            value = mosaicSliderValue,
-            onValueChange = { mosaicSliderValue = it },
-            colors = SliderColors(Color.Red),
-            modifier = Modifier.clip(RoundedCornerShape(2.dp)),
-            range = 0f..100f,
+        var value by remember { mutableFloatStateOf(50f) }
+        Row(
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier,
         ) {
-            Box(modifier = Modifier.background(Color.Yellow).size(32.dp))
+            Text(text = range.start.toString())
+            Slider(
+                value = value,
+                onValueChange = { value = it },
+                colors = SliderColors(Color.Black),
+                range = range,
+                valueDistribution = valuesDistribution,
+                thumb = {
+                    Box(
+                        modifier = Modifier
+                            .size(32.dp)
+                            .background(Color.Yellow),
+                    ) {
+                        Text(text = value.roundToInt().toString())
+                    }
+                },
+            )
         }
-        Text(text = mosaicSliderValue.toString())
+        Text(text = range.endInclusive.toString())
     }
 }
 
+
 @Preview
 @Composable
 private fun PreviewSliderDemo() {

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

@@ -21,11 +21,12 @@ public fun Slider(
     onValueChange: (Float) -> Unit,
     colors: SliderColors,
     modifier: Modifier = Modifier,
+    valueDistribution: SliderValueDistribution = SliderValueDistribution.Linear,
     range: ClosedFloatingPointRange<Float> = 0f..1f,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     thumb: @Composable () -> Unit = { DefaultSliderThumb(colors = colors) },
 ) {
-    val state = rememberSliderState()
+    val state = rememberSliderState(value, valueDistribution)
     val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
 
     state.value = value

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

@@ -6,45 +6,58 @@ import androidx.compose.foundation.gestures.DragScope
 import androidx.compose.foundation.gestures.DraggableState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import kotlinx.coroutines.coroutineScope
 
 public class SliderState(
+    value: Float,
     private val valueDistribution: SliderValueDistribution,
 ) : DraggableState {
 
-    private var isDragging by mutableStateOf(false)
-    private var rawOffset by mutableStateOf(0f)
+    internal var range: ClosedFloatingPointRange<Float> = 0f..1f
+    internal var onValueChange: ((Float) -> Unit)? = null
+    internal var isDragging by mutableStateOf(false)
+        private set
+
+    private var totalWidth by mutableFloatStateOf(0f)
+    private var thumbWidth by mutableFloatStateOf(0f)
+
+    private var rawOffset by mutableFloatStateOf(scaleToOffset(value))
     private val scrollMutex = MutatorMutex()
-    private var totalWidth = 0f
-    private var thumbWidth = 0f
 
-    internal var onValueChange: (Float) -> Unit = {}
-    internal var range: ClosedFloatingPointRange<Float> = 0f..1f
+    internal val valueAsFraction: Float get() {
+        return calcFraction(0f, totalWidth, rawOffset)
+    }
 
     public var value: Float
+        get() = scaleToUserValue(rawOffset)
         set(value) {
             rawOffset = scaleToOffset(value)
         }
-        get() {
-            return valueAsFraction
-        }
-
-    internal val valueAsFraction: Float get() {
-        return calcFraction(0f, totalWidth, rawOffset)
-    }
 
     private val dragScope: DragScope = object : DragScope {
         override fun dragBy(pixels: Float): Unit = dispatchRawDelta(pixels)
     }
 
     override fun dispatchRawDelta(delta: Float) {
-        rawOffset += delta
-        onValueChange(scaleToUserValue(rawOffset))
+        val newRawOffset = rawOffset + delta
+        val userValue = scaleToUserValue(newRawOffset)
+        if (userValue != value) {
+            if (onValueChange != null) {
+                onValueChange?.invoke(userValue)
+            } else {
+                rawOffset = newRawOffset
+            }
+        }
     }
 
-    override suspend fun drag(dragPriority: MutatePriority, block: suspend DragScope.() -> Unit) {
+    override suspend fun drag(
+        dragPriority: MutatePriority,
+        block: suspend DragScope.() -> Unit,
+    ): Unit = coroutineScope {
         isDragging = true
         scrollMutex.mutateWith(dragScope, dragPriority, block)
         isDragging = false
@@ -55,16 +68,25 @@ public class SliderState(
         this.thumbWidth = thumbWidth
     }
 
-    private fun scaleToUserValue(value: Float): Float {
-        return scale(0f, totalWidth, value, range.start, range.endInclusive)
+    private fun scaleToUserValue(offset: Float): Float {
+        val rangeStart = valueDistribution.interpolate(range.start)
+        val rangeEnd = valueDistribution.interpolate(range.endInclusive)
+        val scaledUserValue = scale(0f, totalWidth, offset, rangeStart, rangeEnd)
+        return valueDistribution.inverse(scaledUserValue)
     }
 
     private fun scaleToOffset(value: Float): Float {
-        return scale(range.start, range.endInclusive, value, 0f, totalWidth)
+        val rangeStart = valueDistribution.interpolate(range.start)
+        val rangeEnd = valueDistribution.interpolate(range.endInclusive)
+        val interpolated = valueDistribution.interpolate(value)
+        return scale(rangeStart, rangeEnd, interpolated, 0f, totalWidth)
     }
 }
 
 @Composable
-public fun rememberSliderState(): SliderState {
-    return remember { SliderState(SliderValueDistribution.Linear) }
+public fun rememberSliderState(
+    value: Float,
+    valueDistribution: SliderValueDistribution = SliderValueDistribution.Linear,
+): SliderState {
+    return remember { SliderState(value, valueDistribution) }
 }

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

@@ -1,12 +1,19 @@
 package io.monstarlab.mosaic.slider
 
+import kotlin.math.sqrt
+
 public interface SliderValueDistribution {
 
     public fun interpolate(value: Float): Float
 
     public fun inverse(value: Float): Float
 
     public companion object {
+
+        public fun parabolic(a: Float, b: Float, c: Float): SliderValueDistribution {
+            return ParabolicValueDistribution(a, b, c)
+        }
+
         public val Linear: SliderValueDistribution = object : SliderValueDistribution {
             override fun interpolate(value: Float): Float {
                 return value
@@ -18,3 +25,21 @@ public interface SliderValueDistribution {
         }
     }
 }
+
+public class ParabolicValueDistribution(
+    private val a: Float,
+    private val b: Float,
+    private val c: Float
+) : SliderValueDistribution {
+
+    override fun inverse(value: Float): Float {
+        return a * (value * value) + b * value + c
+    }
+
+    override fun interpolate(value: Float): Float {
+        if (value == 0f) return 0f
+
+        val d = (b * b) - 4 * a * (c - value)
+        return (-b + sqrt(d)) / (2 * a)
+    }
+}