Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance: Add a unique color for each composable border and recomposition count text #2

Closed
wants to merge 2 commits into from
Closed

enhance: Add a unique color for each composable border and recomposition count text #2

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4622ad3
Added a unique color for each composable's rectangle and count text.
dombroks Nov 17, 2024
579990c
Merge branch 'qamarelsafadi:master' into master
dombroks Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions jetpackperformancescanner/src/main/java/com/qamar/composescanner/TrackerModifier.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@ import androidx.compose.ui.unit.dp
fun Modifier.trackRecompositions(): Modifier {
val recompositionCount = remember { mutableStateOf(0) }


val colorsMap = remember { mutableMapOf<String, Color>() }

val uniqueModifierId = remember { Object().hashCode() }

val assignedColor = colorsMap.getOrPut(uniqueModifierId.toString()) {
generateRandomColor()
}


// Use SideEffect to track recompositions (increments only once per recomposition)
SideEffect {
recompositionCount.value += 1
Expand All @@ -34,7 +44,7 @@ fun Modifier.trackRecompositions(): Modifier {
.Paint()
.apply {
textSize = 40f
color = android.graphics.Color.RED
color = assignedColor.toInt()
isAntiAlias = true
}
// Draw the recomposition count text below the content
Expand All @@ -47,6 +57,23 @@ fun Modifier.trackRecompositions(): Modifier {
}
}
)
.border(2.dp, Color.Red)
.border(2.dp, assignedColor)
.padding(16.dp)
}

private fun generateRandomColor(): Color {
return Color(
red = (0..255).random() / 255f,
green = (0..255).random() / 255f,
blue = (0..255).random() / 255f,
alpha = 1f
)
}

Comment on lines +64 to +72
Copy link
Owner

@qamarelsafadi qamarelsafadi Nov 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about using this instead of doing those calculations?

@Composable
fun getRandomThemeColor(): Color {
    val colors = MaterialTheme.colors
    val colorList = listOf(
        colors.primary,
        colors.primaryVariant,
        colors.secondary,
        colors.secondaryVariant,
        colors.background,
        colors.surface,
        colors.error
    )
    return colorList[Random.nextInt(colorList.size)]
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first implementation generates a random color while the one you suggested returns a random color from a predefined list of theme colors. Is there a reason for that?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have concerns that generating those random colors will add an overhead for anyone is using it. But let's proceed we can have benchmark for it later.

private fun Color.toInt(): Int {
val alpha = (alpha * 255).toInt() and 0xFF
val red = (red * 255).toInt() and 0xFF
val green = (green * 255).toInt() and 0xFF
val blue = (blue * 255).toInt() and 0xFF
return (alpha shl 24) or (red shl 16) or (green shl 8) or blue
}