Create Scaling button

ksharma-xyz · Jan 23, 2025 · 0d23013 · 0d23013
1 parent 7c8e965
commit 0d23013
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 4 deletions.
diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt
@@ -32,6 +32,7 @@ import xyz.ksharma.krail.taj.LocalTextStyle
 import xyz.ksharma.krail.taj.LocalThemeColor
 import xyz.ksharma.krail.taj.hexToComposeColor
 import xyz.ksharma.krail.taj.modifier.klickable
+import xyz.ksharma.krail.taj.modifier.scalingKlickable
 import xyz.ksharma.krail.taj.theme.KrailTheme
 import xyz.ksharma.krail.taj.theme.getForegroundColor
 import xyz.ksharma.krail.taj.theme.krailRipple
@@ -65,11 +66,8 @@ fun Button(
                         else -> Modifier
                     }
                 )
-                .clickable(
-                    role = Role.Button,
-                    interactionSource = remember { MutableInteractionSource() },
+                .scalingKlickable(
                     enabled = enabled,
-                    indication = null,
                     onClick = onClick,
                 )
                 .heightIn(dimensions.height)

diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/modifier/Indication.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/modifier/Indication.kt
@@ -0,0 +1,53 @@
+package xyz.ksharma.krail.taj.modifier
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.interaction.InteractionSource
+import androidx.compose.foundation.interaction.PressInteraction
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.drawscope.ContentDrawScope
+import androidx.compose.ui.graphics.drawscope.scale
+import androidx.compose.ui.node.DrawModifierNode
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.launch
+
+/**
+ * https://developer.android.com/develop/ui/compose/touch-input/user-interactions/migrate-indication-ripple
+ */
+ class ScaleIndicationNode(
+    private val interactionSource: InteractionSource
+) : Modifier.Node(), DrawModifierNode {
+    private var currentPressPosition: Offset = Offset.Zero
+    private val animatedScalePercent = Animatable(1f)
+
+    private suspend fun animateToPressed(pressPosition: Offset) {
+        currentPressPosition = pressPosition
+        animatedScalePercent.animateTo(0.9f, spring())
+    }
+
+    private suspend fun animateToResting() {
+        animatedScalePercent.animateTo(1f, spring())
+    }
+
+    override fun onAttach() {
+        coroutineScope.launch {
+            interactionSource.interactions.collectLatest { interaction ->
+                when (interaction) {
+                    is PressInteraction.Press -> animateToPressed(interaction.pressPosition)
+                    is PressInteraction.Release -> animateToResting()
+                    is PressInteraction.Cancel -> animateToResting()
+                }
+            }
+        }
+    }
+
+    override fun ContentDrawScope.draw() {
+        scale(
+            scale = animatedScalePercent.value,
+            pivot = currentPressPosition
+        ) {
+            this@draw.drawContent()
+        }
+    }
+}
diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/modifier/Klickable.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/modifier/Klickable.kt
@@ -1,10 +1,13 @@
 package xyz.ksharma.krail.taj.modifier
 
+import androidx.compose.foundation.IndicationNodeFactory
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.InteractionSource
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.node.DelegatableNode
 import androidx.compose.ui.semantics.Role
 import xyz.ksharma.krail.taj.theme.krailRipple
 import xyz.ksharma.krail.taj.themeColor
@@ -34,3 +37,29 @@ fun Modifier.klickable(
         onClick = onClick,
     )
 }
+
+@Composable
+fun Modifier.scalingKlickable(
+    role: Role = Role.Button,
+    enabled: Boolean = true,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    onClick: () -> Unit,
+): Modifier {
+    return this.clickable(
+        role = role,
+        interactionSource = interactionSource,
+        enabled = enabled,
+        indication = ScalingIndication,
+        onClick = onClick,
+    )
+}
+
+object ScalingIndication : IndicationNodeFactory {
+    override fun create(interactionSource: InteractionSource): DelegatableNode {
+        return ScaleIndicationNode(interactionSource)
+    }
+
+    override fun equals(other: Any?): Boolean = other === this
+
+    override fun hashCode(): Int = -1
+}