Temp: wave start flicker reproducer

Author: mahozad

library/src/commonMain/kotlin/ir/mahozad/multiplatform/wavyslider/Core.kt

@@ -2,7 +2,6 @@ package ir.mahozad.multiplatform.wavyslider
 
 import androidx.compose.animation.core.*
 import androidx.compose.runtime.*
-import androidx.compose.ui.geometry.*
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.drawscope.DrawScope
@@ -142,7 +141,7 @@ internal inline fun animateWaveShift(
         val startTime = withFrameNanos { it }
         while (true /* Android itself uses true instead of isActive */) {
             val playTime = (withFrameNanos { it } - startTime) / 1_000_000_000f
-            shift.value = startShift + (amount * playTime)
+            shift.value = (startShift + (amount * playTime)).coerceAtLeast(-10.dp)
         }
     }
     return shift
@@ -183,8 +182,8 @@ internal inline fun DrawScope.createWavyPath(
     val waveShiftPx = waveShift.toPx()
     val waveLengthPx = waveLength.toPx()
     val waveHeightPx = waveHeight.toPx().absoluteValue
-    val startRadians = waveSpread * (waveShiftPx) / waveLengthPx * (2 * PI)
-    val startHeightFactor = if (incremental) 0f else 1f
+    val startRadians = waveSpread * waveShiftPx / waveLengthPx * (2 * PI) // ✅
+    val startHeightFactor = if (incremental) 0f else 1f // ✅
     val startY = (sin(startRadians) * startHeightFactor * waveHeightPx + size.height) / 2
     moveTo(startOffset.x, startY.toFloat())
     val range = startOffset.x.toInt()..valueOffset.x.toInt()
@@ -193,7 +192,9 @@ internal inline fun DrawScope.createWavyPath(
         val radians = waveSpread * (x - range.first + waveShiftPx) / waveLengthPx * (2 * PI)
         val y = (sin(radians) * heightFactor * waveHeightPx + size.height) / 2
         lineTo(x.toFloat(), y.toFloat())
+        println("${x.toFloat()}  ${y.toFloat()}")
     }
+    println("============================")
 }
 
 // Scale x1 from a1..b1 range to a2..b2 range

library/src/commonMain/kotlin/ir/mahozad/multiplatform/wavyslider/material3/WavySlider.kt

@@ -931,8 +931,8 @@ private inline fun DrawScope.drawTrackActivePart(
         } else {
             drawPath(
                 path = createWavyPath(
-                    startOffset, // Do not modify the offset x because it will break wave (the one in demo visual test)
-                    endOffset.copy(x = endOffset.x - trackInsideCornerSize.toPx() / 2),
+                    startOffset.copy(x = startOffset.x + waveThickness.toPx() / 2),
+                    endOffset.copy(x = endOffset.x - waveThickness.toPx() / 2),
                     waveLength,
                     waveHeight,
                     waveSpread,

showcase/shared/src/commonMain/kotlin/showcase/App.kt

@@ -1,89 +1,38 @@
 package showcase
 
 import androidx.compose.animation.core.*
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SliderDefaults
-import androidx.compose.material3.SliderState
 import androidx.compose.runtime.*
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import ir.mahozad.multiplatform.wavyslider.WaveAnimationSpecs
+import ir.mahozad.multiplatform.wavyslider.WaveDirection
 import ir.mahozad.multiplatform.wavyslider.WaveDirection.RIGHT
 import ir.mahozad.multiplatform.wavyslider.material3.Track
-import androidx.compose.material.Slider as Slider2
-import androidx.compose.material.SliderDefaults as SliderDefaults2
-import androidx.compose.material3.Slider as Slider3
+import ir.mahozad.multiplatform.wavyslider.material3.WaveAnimationSpecs
 import androidx.compose.material3.SliderDefaults as SliderDefaults3
-import ir.mahozad.multiplatform.wavyslider.material.WavySlider as WavySlider2
 import ir.mahozad.multiplatform.wavyslider.material3.WavySlider as WavySlider3
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun App() {
-    val state = remember { SliderState(value = 0.67f) }
-    Column {
-        Slider2(value = state.value, onValueChange = { state.value = it })
-        WavySlider2(
-            value = state.value,
-            onValueChange = { state.value = it }
-        )
-        WavySlider2(
-            value = state.value,
-            onValueChange = { state.value = it },
-            waveLength = 12.dp,
-            waveHeight = 24.dp,
-            waveVelocity = 14.dp to RIGHT,
-            waveThickness = 1.dp,
-            trackThickness = 5.dp,
-            incremental = true,
-            colors = SliderDefaults2.colors(activeTrackColor = Color.Red)
-        )
-        WavySlider2(
-            value = state.value,
-            onValueChange = { state.value = it },
-            waveHeight = 0.dp
-        )
-
-        WavyDivider()
-
-        // FIXME: Some of the sliders have broken layout because all the sliders are using the same state instance
-        //  Is it a bug at all or is it intended?
-        //  It happens because there are `state.something = ...` assignments in the material3.WavySlider
-
-        Slider3(state)
-        Slider3(
-            state = state,
-            thumb = { Box(modifier = Modifier.size(64.dp).background(Color.Yellow)) }
-        )
-        WavySlider3(
-            state = state,
-            thumb = { Box(modifier = Modifier.size(64.dp).background(Color.Red)) }
-        )
-        WavySlider3(state,
-            track = {
-                SliderDefaults3.Track(
-                    sliderState = state,
-                    waveLength = 20.dp,
-                    thumbTrackGapSize = 0.dp
+    CompositionLocalProvider(LocalDensity provides Density(1.23f)) {
+        Column {
+            var waveHeight by remember { mutableStateOf(10.dp) }
+            WavySlider3(
+                value = 0.02f,
+                onValueChange = {},
+                waveLength = 24.dp,
+                waveHeight = waveHeight,
+                waveVelocity = 4.dp to WaveDirection.HEAD,
+                animationSpecs = SliderDefaults3.WaveAnimationSpecs.copy(
+                    waveStartSpreadAnimationSpec = snap()
                 )
-            }
-        )
-        WavySlider3(
-            state = state,
-            waveLength = 12.dp,
-            waveHeight = 24.dp,
-            waveVelocity = 14.dp to RIGHT,
-            waveThickness = 1.dp,
-            trackThickness = 2.dp,
-            incremental = true,
-            colors = SliderDefaults3.colors(activeTrackColor = Color.Red)
-        )
-        WavySlider3(state = state, waveHeight = 0.dp)
+            )
+        }
     }
 }