From 4c4f38aa222590ee1742493d398fe8d0d5692e4e Mon Sep 17 00:00:00 2001 From: zoff99 Date: Thu, 8 Feb 2024 17:06:38 +0100 Subject: [PATCH] add debugging for compose recomposing --- src/main/kotlin/Main.kt | 83 ++++++++++++------- .../zoffcc/applications/trifa/MainActivity.kt | 1 + .../com/zoffcc/applications/trifa2/ChatApp.kt | 4 +- .../briar/desktop/contact/ContactList.kt | 3 +- .../briar/desktop/contact/GroupPeerList.kt | 3 +- .../briar/desktop/navigation/BriarSidebar.kt | 4 +- 6 files changed, 61 insertions(+), 37 deletions(-) diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt index d9fb30c8..e787f04f 100644 --- a/src/main/kotlin/Main.kt +++ b/src/main/kotlin/Main.kt @@ -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 @@ -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" @@ -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") @@ -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) } @@ -677,7 +679,7 @@ fun App() val audio_in_sources by remember { mutableStateOf(ArrayList()) } var video_in_devices by remember { mutableStateOf(ArrayList()) } val video_in_sources by remember { mutableStateOf(ArrayList()) } - 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) @@ -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")}: " @@ -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() @@ -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() @@ -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 @@ -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 diff --git a/src/main/kotlin/com/zoffcc/applications/trifa/MainActivity.kt b/src/main/kotlin/com/zoffcc/applications/trifa/MainActivity.kt index d20c344d..481b78a0 100644 --- a/src/main/kotlin/com/zoffcc/applications/trifa/MainActivity.kt +++ b/src/main/kotlin/com/zoffcc/applications/trifa/MainActivity.kt @@ -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 --------- diff --git a/src/main/kotlin/com/zoffcc/applications/trifa2/ChatApp.kt b/src/main/kotlin/com/zoffcc/applications/trifa2/ChatApp.kt index 36b27a8b..2414ae8a 100644 --- a/src/main/kotlin/com/zoffcc/applications/trifa2/ChatApp.kt +++ b/src/main/kotlin/com/zoffcc/applications/trifa2/ChatApp.kt @@ -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) } @@ -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()) { diff --git a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt index 76e90d02..6870d986 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt @@ -25,6 +25,7 @@ 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( @@ -32,7 +33,7 @@ fun ContactList( ) = 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 diff --git a/src/main/kotlin/org/briarproject/briar/desktop/contact/GroupPeerList.kt b/src/main/kotlin/org/briarproject/briar/desktop/contact/GroupPeerList.kt index bbc77bed..a82a717d 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/contact/GroupPeerList.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/GroupPeerList.kt @@ -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 @@ -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 diff --git a/src/main/kotlin/org/briarproject/briar/desktop/navigation/BriarSidebar.kt b/src/main/kotlin/org/briarproject/briar/desktop/navigation/BriarSidebar.kt index 7860f53b..70c56fff 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/navigation/BriarSidebar.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/navigation/BriarSidebar.kt @@ -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 @@ -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