commonMain.io.github.lyxnx.compose.pine.ProgressCircle.kt Maven / Gradle / Ivy

Go to download
package io.github.lyxnx.compose.pine

import androidx.annotation.FloatRange
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.progressSemantics
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

/**
 * A Pine Theme progress circle with a fractional value
 *
 * @param fraction the fractional amount the progress circle is filled (will be coerced into 0..1)
 * @param modifier modifier to apply to the circle
 * @param trackColor the color of the progress track
 * @param barColor the color of the progress bar
 * @param circleWidth the width, in dp, of the progress circle
 */
@Composable
public fun ProgressCircle(
    @FloatRange(from = 0.0, to = 1.0) fraction: Float,
    modifier: Modifier = Modifier,
    trackColor: Color = PineTheme.colors.grey200,
    barColor: Color = PineTheme.colors.primary500,
    circleWidth: Dp = 4.dp
) {
    val stroke = with(LocalDensity.current) {
        Stroke(circleWidth.toPx(), cap = StrokeCap.Round)
    }

    Canvas(
        modifier
            .progressSemantics()
            .size(48.dp)
            .aspectRatio(1f)
    ) {
        val diamOffset = stroke.width / 2
        val arcDiam = size.width - 2 * diamOffset
        drawCircle(color = trackColor, style = stroke, radius = arcDiam / 2)

        drawArc(
            color = barColor,
            startAngle = -90f,
            sweepAngle = fraction.coerceIn(0f, 1f) * 360f,
            useCenter = false,
            topLeft = Offset(diamOffset, diamOffset),
            size = Size(arcDiam, arcDiam),
            style = stroke
        )
    }
}

/**
 * A Pine Theme progress circle with a fractional value
 *
 * @param modifier modifier to apply to the circle
 * @param trackColor the color of the progress track
 * @param barColor the color of the progress bar
 * @param circleWidth the width, in dp, of the progress circle
 */
@Composable
public fun ProgressCircle(
    modifier: Modifier = Modifier,
    trackColor: Color = PineTheme.colors.grey200,
    barColor: Color = PineTheme.colors.primary500,
    circleWidth: Dp = 4.dp
) {
    val stroke = with(LocalDensity.current) {
        Stroke(width = circleWidth.toPx(), cap = StrokeCap.Round)
    }

    val transition = rememberInfiniteTransition()
    val rotation by transition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 1250, easing = LinearEasing)
        ),
        label = "RotationAnimation"
    )

    Canvas(
        modifier = modifier
            .progressSemantics()
            .size(48.dp)
            .aspectRatio(1f)
    ) {
        val diamOffset = stroke.width / 2
        val arcDiam = size.width - 2 * diamOffset
        drawCircle(color = trackColor, style = stroke, radius = arcDiam / 2)

        rotate(rotation) {
            drawArc(
                color = barColor,
                style = stroke,
                startAngle = 0f,
                sweepAngle = 90f,
                useCenter = false,
                size = Size(arcDiam, arcDiam),
                topLeft = Offset(diamOffset, diamOffset)
            )
        }
    }
}