From 72da8e2e56806c55f531e1f8dda7941e75307a4c Mon Sep 17 00:00:00 2001 From: Ben Trengrove Date: Fri, 1 Dec 2023 10:08:59 +1100 Subject: [PATCH] Use custom Modifier.Node instead of background --- .../component/scrollbar/AppScrollbars.kt | 87 +++++++++++++++---- 1 file changed, 69 insertions(+), 18 deletions(-) diff --git a/core/designsystem/src/main/kotlin/com/google/samples/apps/nowinandroid/core/designsystem/component/scrollbar/AppScrollbars.kt b/core/designsystem/src/main/kotlin/com/google/samples/apps/nowinandroid/core/designsystem/component/scrollbar/AppScrollbars.kt index fa913cb27..71b673a71 100644 --- a/core/designsystem/src/main/kotlin/com/google/samples/apps/nowinandroid/core/designsystem/component/scrollbar/AppScrollbars.kt +++ b/core/designsystem/src/main/kotlin/com/google/samples/apps/nowinandroid/core/designsystem/component/scrollbar/AppScrollbars.kt @@ -16,6 +16,7 @@ package com.google.samples.apps.nowinandroid.core.designsystem.component.scrollbar +import android.annotation.SuppressLint import androidx.compose.animation.animateColorAsState import androidx.compose.animation.core.Spring import androidx.compose.animation.core.SpringSpec @@ -38,17 +39,31 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.ColorProducer +import androidx.compose.ui.graphics.Outline +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.graphics.drawOutline +import androidx.compose.ui.graphics.drawscope.ContentDrawScope +import androidx.compose.ui.node.DrawModifierNode +import androidx.compose.ui.node.ModifierNodeElement +import androidx.compose.ui.node.invalidateDraw +import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import com.google.samples.apps.nowinandroid.core.designsystem.component.scrollbar.ThumbState.Active import com.google.samples.apps.nowinandroid.core.designsystem.component.scrollbar.ThumbState.Dormant import com.google.samples.apps.nowinandroid.core.designsystem.component.scrollbar.ThumbState.Inactive +import kotlinx.coroutines.Job import kotlinx.coroutines.delay +import kotlinx.coroutines.flow.mapLatest +import kotlinx.coroutines.launch /** * The time period for showing the scrollbar thumb after interacting with it, before it fades away @@ -130,12 +145,7 @@ private fun ScrollableState.DraggableScrollbarThumb( Horizontal -> height(12.dp).fillMaxWidth() } } - .background( - color = scrollbarThumbColor( - interactionSource = interactionSource, - ), - shape = RoundedCornerShape(16.dp), - ), + .scrollThumb(this, interactionSource), ) } @@ -155,31 +165,72 @@ private fun ScrollableState.DecorativeScrollbarThumb( Horizontal -> height(2.dp).fillMaxWidth() } } - .background( - color = scrollbarThumbColor( - interactionSource = interactionSource, - ), - shape = RoundedCornerShape(16.dp), - ), + .scrollThumb(this, interactionSource), ) } +// TODO: This lint is removed in 1.6 as the recommendation has changed +// remove when project is upgraded +@SuppressLint("ComposableModifierFactory") +@Composable +private fun Modifier.scrollThumb( + scrollableState: ScrollableState, + interactionSource: InteractionSource +): Modifier { + val colorState = scrollbarThumbColor(scrollableState, interactionSource) + return this then ScrollThumbElement { colorState.value } +} + +private data class ScrollThumbElement(val colorProducer: ColorProducer) + : ModifierNodeElement() { + override fun create(): ScrollThumbNode = ScrollThumbNode(colorProducer) + override fun update(node: ScrollThumbNode) { + node.colorProducer = colorProducer + node.invalidateDraw() + } +} + +private class ScrollThumbNode(var colorProducer: ColorProducer): DrawModifierNode, Modifier.Node() { + private val shape = RoundedCornerShape(16.dp) + + // naive cache outline calculation if size is the same + private var lastSize: Size? = null + private var lastLayoutDirection: LayoutDirection? = null + private var lastOutline: Outline? = null + + override fun ContentDrawScope.draw() { + val color = colorProducer() + val outline = + if (size == lastSize && layoutDirection == lastLayoutDirection) { + lastOutline!! + } else { + shape.createOutline(size, layoutDirection, this) + } + if (color != Color.Unspecified) drawOutline(outline, color = color) + + lastOutline = outline + lastSize = size + lastLayoutDirection = layoutDirection + } +} + /** * The color of the scrollbar thumb as a function of its interaction state. * @param interactionSource source of interactions in the scrolling container */ @Composable -private fun ScrollableState.scrollbarThumbColor( - interactionSource: InteractionSource, -): Color { +private fun scrollbarThumbColor( + scrollableState: ScrollableState, + interactionSource: InteractionSource +): State { var state by remember { mutableStateOf(Dormant) } val pressed by interactionSource.collectIsPressedAsState() val hovered by interactionSource.collectIsHoveredAsState() val dragged by interactionSource.collectIsDraggedAsState() - val active = (canScrollForward || canScrollForward) && - (pressed || hovered || dragged || isScrollInProgress) + val active = (scrollableState.canScrollForward || scrollableState.canScrollForward) && + (pressed || hovered || dragged || scrollableState.isScrollInProgress) - val color by animateColorAsState( + val color = animateColorAsState( targetValue = when (state) { Active -> MaterialTheme.colorScheme.onSurface.copy(0.5f) Inactive -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f)