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.

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

add debugging for compose recomposing #131

Merged
merged 1 commit into from
Feb 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
83 changes: 51 additions & 32 deletions src/main/kotlin/Main.kt
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.painter.Painter
Expand Down Expand Up @@ -183,6 +184,7 @@ import com.vanniktech.emoji.ios.IosEmojiProvider
import com.vanniktech.emoji.search.SearchEmojiManager
import com.zoffcc.applications.ffmpegav.AVActivity.JAVA_AUDIO_IN_DEVICE_NAME
import com.zoffcc.applications.trifa.EmojiStrAndName
import com.zoffcc.applications.trifa.MainActivity.Companion.DEBUG_COMPOSE_UI_UPDATES

private const val TAG = "trifa.Main.kt"
var tox_running_state_wrapper = "start"
Expand Down Expand Up @@ -282,15 +284,15 @@ fun App()
MaterialTheme {
scaffoldState = rememberScaffoldState()
ScaffoldCoroutineScope = rememberCoroutineScope()
Scaffold(scaffoldState = scaffoldState) {
Row() {
Scaffold(modifier = Modifier.randomDebugBorder(), scaffoldState = scaffoldState) {
Row(modifier = Modifier.randomDebugBorder()) {
var uiMode by remember { mutableStateOf(UiMode.CONTACTS) }
var main_top_tab_height by remember { mutableStateOf(MAIN_TOP_TAB_HEIGHT) }
BriarSidebar(uiMode = uiMode, setUiMode = { uiMode = it })
VerticalDivider()
Column(Modifier.fillMaxSize()) {
Row(modifier = Modifier.fillMaxWidth().height(main_top_tab_height)) {
Column{
Column(Modifier.randomDebugBorder().fillMaxSize()) {
Row(modifier = Modifier.randomDebugBorder().fillMaxWidth().height(main_top_tab_height)) {
Column(modifier = Modifier.randomDebugBorder()) {
Row(Modifier.wrapContentHeight(), Arrangement.spacedBy(5.dp)) {
Button(modifier = Modifier.width(140.dp), onClick = { // start/stop tox button
if (tox_running_state == "running")
Expand Down Expand Up @@ -466,7 +468,7 @@ fun App()
AVState.CALL_STATUS.CALL_STATUS_CALLING,
AVState.CALL_STATUS.CALL_STATUS_ENDING ->
{
Row() {
Row(modifier = Modifier.randomDebugBorder().padding(3.dp)) {
var video_in_box_width by remember { mutableStateOf(VIDEO_IN_BOX_WIDTH_SMALL) }
var video_in_box_height by remember { mutableStateOf(VIDEO_IN_BOX_HEIGHT_SMALL) }
var video_in_box_small by remember { mutableStateOf(true) }
Expand Down Expand Up @@ -677,7 +679,7 @@ fun App()
val audio_in_sources by remember { mutableStateOf(ArrayList<AVActivity.ffmpegav_descrid>()) }
var video_in_devices by remember { mutableStateOf(ArrayList<String>()) }
val video_in_sources by remember { mutableStateOf(ArrayList<AVActivity.ffmpegav_descrid>()) }
Column(modifier = Modifier.padding(5.dp)) {
Column(modifier = Modifier.padding(5.dp).randomDebugBorder()) {
Text(text = "audio capture: " + avstatestore.state.audio_in_device_get() + " " + avstatestore.state.audio_in_source_get()
, fontSize = 12.sp, modifier = Modifier.fillMaxWidth(),
maxLines = 1)
Expand Down Expand Up @@ -981,28 +983,30 @@ fun App()
}
}
}
val audio_bar_bgcolor = MaterialTheme.colors.background
SwingPanel(
modifier = Modifier.size(200.dp,5.dp),
factory = {
JPanel(SingleComponentAspectRatioKeeperLayout(), true).apply {
add(AudioBar.audio_out_bar)
AudioBar.set_bar_bgcolor(audio_bar_bgcolor.toArgb(), audio_out_bar)
}
},
update = { }
)
Spacer(modifier = Modifier.height(5.dp))
SwingPanel(
modifier = Modifier.size(200.dp,5.dp),
factory = {
JPanel(SingleComponentAspectRatioKeeperLayout(), true).apply {
add(AudioBar.audio_in_bar)
AudioBar.set_bar_bgcolor(audio_bar_bgcolor.toArgb(), audio_in_bar)
}
},
update = { }
)
Column(modifier = Modifier.randomDebugBorder().padding(4.dp)) {
val audio_bar_bgcolor = MaterialTheme.colors.background
SwingPanel(
modifier = Modifier.size(200.dp, 5.dp),
factory = {
JPanel(SingleComponentAspectRatioKeeperLayout(), true).apply {
add(AudioBar.audio_out_bar)
AudioBar.set_bar_bgcolor(audio_bar_bgcolor.toArgb(), audio_out_bar)
}
},
update = { }
)
Spacer(modifier = Modifier.height(5.dp))
SwingPanel(
modifier = Modifier.size(200.dp, 5.dp),
factory = {
JPanel(SingleComponentAspectRatioKeeperLayout(), true).apply {
add(AudioBar.audio_in_bar)
AudioBar.set_bar_bgcolor(audio_bar_bgcolor.toArgb(), audio_in_bar)
}
},
update = { }
)
}
UIScaleItem(
label = i18n("ui.ui_scale"),
description = "${i18n("ui.current_value")}: "
Expand Down Expand Up @@ -1030,7 +1034,7 @@ fun App()
contactstore.visible(true)
groupstore.visible(false)
val focusRequester = remember { FocusRequester() }
Row(modifier = Modifier.fillMaxWidth()) {
Row(modifier = Modifier.fillMaxWidth().randomDebugBorder()) {
val contacts by contactstore.stateFlow.collectAsState()
ContactList(contactList = contacts)
VerticalDivider()
Expand All @@ -1056,7 +1060,7 @@ fun App()
val groupfocusRequester = remember { FocusRequester() }
val groups by groupstore.stateFlow.collectAsState()
val grouppeers by grouppeerstore.stateFlow.collectAsState()
Row(modifier = Modifier.fillMaxWidth()) {
Row(modifier = Modifier.fillMaxWidth().randomDebugBorder()) {
GroupList(groupList = groups)
VerticalDivider()
val groupsettings by groupsettingsstore.stateFlow.collectAsState()
Expand Down Expand Up @@ -1875,7 +1879,7 @@ fun UIScaleItem(
label: String,
description: String,
setting: @Composable (RowScope.() -> Unit),
) = Row(Modifier.fillMaxWidth().height(UISCALE_ITEM_HEIGHT)
) = Row(Modifier.randomDebugBorder().fillMaxWidth().height(UISCALE_ITEM_HEIGHT)
.padding(horizontal = 16.dp).
semantics(mergeDescendants = true) { // it would be nicer to derive the contentDescriptions from the descendants automatically
// which is currently not supported in Compose for Desktop
Expand Down Expand Up @@ -1914,6 +1918,21 @@ fun DragAndDropDescription(modifier: Modifier, color: Color) {
)
}

fun Modifier.randomDebugBorder(): Modifier =
if (DEBUG_COMPOSE_UI_UPDATES)
{
Modifier.padding(3.dp).border(width = 4.dp,
color = Color(
Random().nextInt(0, 255),
Random().nextInt(0, 255),
Random().nextInt(0, 255)),
shape = RectangleShape)
}
else
{
Modifier
}

fun Modifier.dashedBorder(strokeWidth: Dp, color: Color, cornerRadiusDp: Dp) = composed(
factory = {
val density = LocalDensity.current
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ class MainActivity
// --------- global config ---------
const val CTOXCORE_NATIVE_LOGGING = false // set "false" for release builds
const val AUDIO_PCM_DEBUG_FILES = false // set "false" for release builds
const val DEBUG_COMPOSE_UI_UPDATES = false // set "false" for release builds

// --------- global config ---------
// --------- global config ---------
Expand Down
4 changes: 2 additions & 2 deletions src/main/kotlin/com/zoffcc/applications/trifa2/ChatApp.kt
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ fun ChatApp(focusRequester: FocusRequester, displayTextField: Boolean = true, se
{
Theme {
Surface {
Box(modifier = Modifier.fillMaxSize()) {
Box(modifier = Modifier.fillMaxSize().randomDebugBorder()) {
Image(painterResource("background.jpg"), modifier = Modifier.fillMaxSize(), contentDescription = null, contentScale = ContentScale.Crop)
Column(modifier = Modifier.fillMaxSize()) {
var isDragging by remember { mutableStateOf(false) }
Expand Down Expand Up @@ -309,7 +309,7 @@ fun GroupApp(focusRequester: FocusRequester, displayTextField: Boolean = true, s
{
Theme {
Surface {
Box(modifier = Modifier.fillMaxSize()) {
Box(modifier = Modifier.fillMaxSize().randomDebugBorder()) {
Image(painterResource("background.jpg"), modifier = Modifier.fillMaxSize(),
contentDescription = null, contentScale = ContentScale.Crop)
Column(modifier = Modifier.fillMaxSize()) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,15 @@ import kotlinx.coroutines.launch
import org.briarproject.briar.desktop.ui.ListItemView
import org.briarproject.briar.desktop.ui.VerticallyScrollableArea
import org.briarproject.briar.desktop.utils.InternationalizationUtils.i18n
import randomDebugBorder

@Composable
fun ContactList(
contactList: StateContacts,
) = Column(
modifier = Modifier.fillMaxHeight().width(CONTACT_COLUMN_WIDTH).background(Color.Transparent),
) {
VerticallyScrollableArea(modifier = Modifier.fillMaxSize()) { scrollState ->
VerticallyScrollableArea(modifier = Modifier.randomDebugBorder().fillMaxSize()) { scrollState ->
LazyColumn(
state = scrollState,
modifier = Modifier
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import grouppeerstore
import org.briarproject.briar.desktop.ui.ListItemView
import org.briarproject.briar.desktop.ui.VerticallyScrollableArea
import org.briarproject.briar.desktop.utils.InternationalizationUtils.i18n
import randomDebugBorder
import kotlin.math.max
import kotlin.math.min

Expand All @@ -29,7 +30,7 @@ fun GroupPeerList(
) = Column(
modifier = Modifier.fillMaxHeight().width(GROUP_PEER_COLUMN_WIDTH).background(Color.Transparent),
) {
VerticallyScrollableArea(modifier = Modifier.fillMaxSize()) { scrollState ->
VerticallyScrollableArea(modifier = Modifier.randomDebugBorder().fillMaxSize()) { scrollState ->
LazyColumn(
state = scrollState,
modifier = Modifier
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import org.briarproject.briar.desktop.navigation.SidebarButtonState.UnreadMessag
import org.briarproject.briar.desktop.navigation.SidebarButtonState.Warning
import org.briarproject.briar.desktop.ui.UiMode
import org.briarproject.briar.desktop.utils.InternationalizationUtils.i18n
import randomDebugBorder

val SIDEBAR_WIDTH = 56.dp

Expand Down Expand Up @@ -86,7 +87,8 @@ fun BriarSidebar(
)

Column(
modifier = Modifier.width(SIDEBAR_WIDTH).fillMaxHeight().padding(vertical = 4.dp).selectableGroup(),
modifier = Modifier.randomDebugBorder().width(SIDEBAR_WIDTH)
.fillMaxHeight().padding(vertical = 4.dp).selectableGroup(),
verticalArrangement = spacedBy(4.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) { // profile button
Expand Down
Loading