marquee.kt

/* Copyright 2023 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 */

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.MarqueeSpacing
import androidx.compose.foundation.basicMarquee
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.composed
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.graphics.StampedPathEffectStyle
import androidx.compose.ui.graphics.drawscope.ContentDrawScope
import androidx.compose.ui.graphics.drawscope.Fill
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.vector.PathParser
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.ExperimentalTextApi
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalFoundationApi::class, ExperimentalTextApi::class)
@Preview(showBackground = true, widthDp = 300)
@Composable
fun BasicMarqueeWithFadedEdgesSample() {
  val edgeWidth = 32.dp

  fun Modifier.fadedEdgeMarquee(edgeWidth: Dp): Modifier = composed {
    // In a real app this would probably be a top-level, private function.
    fun ContentDrawScope.drawFadedEdge(leftEdge: Boolean) {
      val edgeWidthPx = edgeWidth.toPx()
      drawRect(
        topLeft = Offset(if (leftEdge) 0f else size.width - edgeWidthPx, 0f),
        size = Size(edgeWidthPx, size.height),
        brush = Brush.horizontalGradient(
          colors = listOf(Color.Transparent, Color.Black),
          startX = if (leftEdge) 0f else size.width,
          endX = if (leftEdge) edgeWidthPx else size.width - edgeWidthPx
        ),
        blendMode = BlendMode.DstIn
      )
    }

    var innerWidth by remember { mutableStateOf(-1) }

    return@composed this
      // Rendering to an offscreen buffer is required to get the faded edges' alpha to be
      // applied only to the text, and not whatever is drawn below this composable (e.g. the
      // window).
      .graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
      .drawWithContent {
        drawContent()
        if (innerWidth > size.width) {
          drawFadedEdge(leftEdge = true)
          drawFadedEdge(leftEdge = false)
        }
      }
      .basicMarquee(
        // Animate forever.
        iterations = Int.MAX_VALUE, spacing = MarqueeSpacing(0.dp),
        velocity = 40.dp
      )
      .onSizeChanged { innerWidth = it.width }
      .padding(start = edgeWidth)
  }

  Box(Modifier.width(300.dp)) {
    val path = Path()
    val pathStrings = listOf(
      "M5.83337 9.425L5.10837 8.765C2.53337 6.43 0.833374 4.89 0.833374 3C0.833374 1.46 2.04337 0.25 3.58337 0.25C4.45337 0.25 5.28837 0.655 5.83337 1.295C6.37837 0.655 7.21337 0.25 8.08337 0.25C9.62337 0.25 10.8334 1.46 10.8334 3C10.8334 4.89 9.13337 6.43 6.55837 8.77L5.83337 9.425Z"
    )
    val parser = PathParser()
    pathStrings.forEach {
      path.addPath(parser.parsePathString(it).toPath(Path()))
    }

    val offset = with(LocalDensity.current) { 5.toDp() }
    val quote = "You had me at 'hello world'"
    val fontSize = 60.sp
    Text(
      quote,
      Modifier
        .fadedEdgeMarquee(edgeWidth)
        .offset(offset, offset),
      style = TextStyle.Default.copy(drawStyle = Fill),
      fontSize = fontSize,
      color = Color.Red.copy(alpha = 0.1f)
    )
    Text(
      quote,
      Modifier.fadedEdgeMarquee(edgeWidth),
      style = TextStyle.Default.copy(
        drawStyle = Stroke(
          2f, 4f,
          pathEffect = PathEffect.stampedPathEffect(
            path, 14f, 10f, StampedPathEffectStyle.Translate
          )
        )
      ),
      fontSize = fontSize,
      color = Color.Red
    )
  }
}