mahefa/feufaro
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract MeasureRow into a compos to fix layout lag on Android

Browse source
This commit is contained in:
Hasinjato 2026-06-24 12:11:51 +03:00
parent 4940608a9b
commit 96eb4dbbf0
1 changed files with 565 additions and 450 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

309
composeApp/src/commonMain/kotlin/mg/dot/feufaro/solfa/TimeUnitObject.kt
View file

@ -33,7 +33,6 @@ import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.text.*
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
@ -272,8 +271,8 @@ fun TimeUnitComposable(
val currentDensity = LocalDensity.current
val animatedColor by animateColorAsState(
targetValue = if (gridActive) MaterialTheme.colorScheme.secondary.copy(alpha = 1f) else col,
animationSpec = tween(durationMillis = 100) // Très court pour rester réactif
targetValue = if (gridActive) MaterialTheme.colorScheme.secondary.copy(alpha = 0.5f) else col,
animationSpec = tween(durationMillis = 150) // Très court pour rester réactif
)
val focusRequesters = remember { List(4) { FocusRequester() } }
@ -565,6 +564,10 @@ fun LazyVerticalGridTUO(
val tuoList = viewModel.tuoList
key(tuoList) {
var isCalculatingGrid by remember { mutableStateOf(true) }
var gridColumnCount by remember { mutableStateOf(0) }
var computedMeasures by remember { mutableStateOf<List<List<TimeUnitObject>>>(emptyList()) }
var menuPosition by remember { mutableStateOf(Offset.Zero) }
var showAddDialog by remember { mutableStateOf(false) }
var showDetailDialog by remember { mutableStateOf(false) }
@ -589,53 +592,40 @@ fun LazyVerticalGridTUO(
val editMode by sharedScreenModel.modeEditor.collectAsState()
val showFullChord by sharedScreenModel.harmonyView.collectAsState()
var toggleWithDegreeAndChord by remember { mutableStateOf (false) }
val focusManager = LocalFocusManager.current
Column(
modifier = Modifier
.fillMaxWidth()
.onSizeChanged { size ->
onGridWidthMeasured(size.width)
}
.focusRequester(focusRequester)
.focusable()
) {
LaunchedEffect(editMode) {
if (editMode) {
focusRequester.requestFocus()
}
}
val density = LocalDensity.current
val horizontalArrangementSpacing: Dp = 0.dp
val columnGroupString = regexMeasure?.groupValues?.get(1) ?: "1"
val columnGroup = columnGroupString.toInt().coerceAtLeast(1)
val itemMinBaseWidth = bestTUOWidth(tuoList)
val gridWidthDp = with(density) { gridWidthPx.toDp() }
val gridCount by sharedScreenModel.gridCount.collectAsState()
val currentStanza = viewModel.stanza
var gridColumnCount: Int = remember(gridWidthDp, itemMinBaseWidth, columnGroup) {
if (gridWidthDp == 0.dp) return@remember columnGroup
var calculatedCols =
(gridWidthDp / (itemMinBaseWidth + horizontalArrangementSpacing)).toInt()
// Calcul asynchrone nombre de colonnes
LaunchedEffect(gridWidthDp, itemMinBaseWidth, columnGroup, gridCount, tuoList) {
if (gridWidthDp == 0.dp || tuoList.isEmpty()) return@LaunchedEffect
isCalculatingGrid = true
withContext(Dispatchers.Default) {
var calculatedCols = (gridWidthDp / (itemMinBaseWidth + 0.dp)).toInt()
if (calculatedCols == 0) calculatedCols = columnGroup
if (calculatedCols % columnGroup != 0) {
calculatedCols = (calculatedCols / columnGroup) * columnGroup
if (calculatedCols == 0) calculatedCols = columnGroup
}
val actualColumnCount: Int = calculatedCols.coerceAtLeast(columnGroup)
actualColumnCount
}
gridColumnCount += gridCount
val flowRowSize: Float = 0.98f / gridColumnCount
val finalCols = calculatedCols.coerceAtLeast(columnGroup) + gridCount
val chunkedMeasures = tuoList.drop(1).chunked(finalCols)
val currentStanza = viewModel.stanza
withContext(Dispatchers.Main) {
gridColumnCount = finalCols
computedMeasures = chunkedMeasures
isCalculatingGrid = false
}
}
}
val tuoTimestamps by sharedScreenModel.tuoTimestamps.collectAsState()
val activeRowIndex by sharedScreenModel.activeIndex.collectAsState()
val measures = tuoList.drop(1).chunked(gridColumnCount)
// Avant column affichage:
val metadataList = remember(tuoList) {
tuoList.drop(1).mapIndexedNotNull { globalIndex, oneTUO ->
val markerText = oneTUO.pTemplate.markerToString()
@ -671,22 +661,121 @@ fun LazyVerticalGridTUO(
sharedScreenModel.updateAndFinalizeMidiData(metadataList)
}
}
LaunchedEffect(measures, sharedScreenModel.stanza.value) {
LaunchedEffect(computedMeasures, sharedScreenModel.stanza.value) {
sharedScreenModel.updateSyllablesFromList(
measures = measures,
measures = computedMeasures,
stanzaNumber = sharedScreenModel.stanza.value
)
val totalSyllables = sharedScreenModel.synchronizedSyllables.value.size
//println("Sync complète effectuée SUR stz: ${sharedScreenModel.stanza.value}! Total colonnes : $totalSyllables")
}
Box(
modifier = modifier
.fillMaxWidth()
.onSizeChanged { size->
onGridWidthMeasured(size.width)
}
.focusRequester(focusRequester)
.focusable(),
contentAlignment = Alignment.Center
) {
LaunchedEffect(editMode) {
if (editMode) focusRequester.requestFocus()
}
// Chargement avant affichage
if (isCalculatingGrid || computedMeasures.isEmpty() || gridColumnCount == 0) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.padding(32.dp)
.size(100.dp)
) {
CircularProgressIndicator(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.primary,
strokeWidth = 2.dp,
trackColor = MaterialTheme.colorScheme.tertiary.copy(alpha = 0.1f)
)
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "𝄞 ♫",
style = TextStyle(
fontSize = 28.sp,
color = MaterialTheme.colorScheme.primary
)
)
}
}
} else {
Column(
modifier = Modifier.fillMaxWidth()
){
measures.forEachIndexed { measureIndex, measureTUOs ->
) {
computedMeasures.forEachIndexed { measureIndex, measureTUOs ->
key(measureIndex) {
Column(modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp)) {
MeasureRowItem(
measureTUOs,
gridWidthDp,
gridColumnCount,
showFullChord,
sharedScreenModel,
toggleWithDegreeAndChord,
measureIndex,
activeRowIndex,
selectedGridIndex,
editMode,
selectedTUO,
selectedIndex,
showContextualMenu,
currentStanza,
focusRequester,
showEditDialog,
showAddDialog,
showDetailDialog
)
}
}
}
}
}
}
}
@Composable
private fun MeasureRowItem(
measureTUOs: List<TimeUnitObject>,
gridWidthDp: Dp,
gridColumnCount: Int,
showFullChord: Boolean,
sharedScreenModel: SharedScreenModel,
toggleWithDegreeAndChord: Boolean,
measureIndex: Int,
activeRowIndex: Int,
selectedGridIndex: Int,
editMode: Boolean,
selectedTUO: TimeUnitObject?,
selectedIndex: Int,
showContextualMenu: Boolean,
currentStanza: Int,
focusRequester: FocusRequester,
showEditDialog: Boolean,
showAddDialog: Boolean,
showDetailDialog: Boolean
) {
var toggleWithDegreeAndChord1 = toggleWithDegreeAndChord
var selectedGridIndex1 = selectedGridIndex
var selectedTUO1 = selectedTUO
var selectedIndex1 = selectedIndex
var showContextualMenu1 = showContextualMenu
var showEditDialog1 = showEditDialog
var showAddDialog1 = showAddDialog
var showDetailDialog1 = showDetailDialog
Column(modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp)) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start,
@ -700,17 +789,17 @@ fun LazyVerticalGridTUO(
if (TimeUnitObject._hasMarker) {
val lineHeight = 20.sp
val density = LocalDensity.current
val lineHeightDp : Dp = with(density) {
val lineHeightDp: Dp = with(density) {
lineHeight.toDp()
}
var fontStyle = FontStyle.Normal
var fontWeight = FontWeight.Normal
val hairPinSymbol = tuo.hasHairPin()
val yHeight = with(density) { lineHeightDp.toPx()}
val yHeight = with(density) { lineHeightDp.toPx() }
if (tuo.isTriolet()) {
Canvas(modifier = Modifier.fillMaxSize()) {
val arcWidth = with(density) { size.width * 0.75f}
val arcWidth = with(density) { size.width * 0.75f }
drawArc(
color = FEUFAROO_TRIOLET_COLOR,
startAngle = 200f,
@ -724,30 +813,32 @@ fun LazyVerticalGridTUO(
}
}
if ((hairPinSymbol == '=') && (TimeUnitObject.lastHairPinSymbol != null)) {
// println("LastHairpin: ${TimeUnitObject.lastHairPinSymbol} ${TimeUnitObject.lastHairPinStart}")
// println("LastHairpin: ${TimeUnitObject.lastHairPinSymbol} ${TimeUnitObject.lastHairPinStart}")
val hairPinStart = TimeUnitObject.lastHairPinStart
val lastHairPinSymbol = TimeUnitObject.lastHairPinSymbol
val hairPinStartLine: Int = (hairPinStart - 1) / gridColumnCount
val hairPinEndLine: Int = (tuo.numBlock - 1) / gridColumnCount
// if (hairPinStartLine == hairPinEndLine) {
// if (hairPinStartLine == hairPinEndLine) {
Canvas(
modifier = Modifier.fillMaxSize()
) {
val xStart = if (lastHairPinSymbol == '>') -size.width * (tuo.numBlock - hairPinStart) else size.width/2
val xEnd = if (lastHairPinSymbol == '>') size.width/2 else -size.width * (tuo.numBlock - hairPinStart)
val xStart =
if (lastHairPinSymbol == '>') -size.width * (tuo.numBlock - hairPinStart) else size.width / 2
val xEnd =
if (lastHairPinSymbol == '>') size.width / 2 else -size.width * (tuo.numBlock - hairPinStart)
drawLine(
Color.DarkGray,
start = Offset(x=xStart, y=0f),
end = Offset(xEnd, yHeight/2)
start = Offset(x = xStart, y = 0f),
end = Offset(xEnd, yHeight / 2)
)
drawLine(
Color.DarkGray,
start = Offset(xStart, yHeight),
end = Offset(xEnd, yHeight/2)
end = Offset(xEnd, yHeight / 2)
)
}
TimeUnitObject.endHairPin()
// }
// }
}
if (hairPinSymbol != null && hairPinSymbol != '=') {
@ -763,9 +854,13 @@ fun LazyVerticalGridTUO(
if (text.contains(Regex("^\\s*(ppp|pp|p|mp|mf|f|ff|fff)\\s*$"))) {
fontWeight = FontWeight.Bold
}
Text(text = text,
Text(
text = text,
modifier = Modifier
.wrapContentSize(unbounded = true, align = Alignment.CenterStart,),
.wrapContentSize(
unbounded = true,
align = Alignment.CenterStart
),
softWrap = false,
maxLines = 1,
fontStyle = fontStyle,
@ -779,7 +874,7 @@ fun LazyVerticalGridTUO(
}
}
}
if(showFullChord) {
if (showFullChord) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start,
@ -795,7 +890,10 @@ fun LazyVerticalGridTUO(
if (chordMap.isNotEmpty()) HarmonicAnalyzer.analyzeDegree(chordMap) else null
}
val chordName = remember(chordMap) {
if (chordMap.isNotEmpty()) HarmonicAnalyzer.analyzeChordName(chordMap, sharedScreenModel.songKey.value) else null
if (chordMap.isNotEmpty()) HarmonicAnalyzer.analyzeChordName(
chordMap,
sharedScreenModel.songKey.value
) else null
}
Column(
@ -807,12 +905,15 @@ fun LazyVerticalGridTUO(
var currentFontSize by remember { mutableStateOf(maxFontSize) }
TextButton(
onClick = { toggleWithDegreeAndChord = !toggleWithDegreeAndChord },
onClick = { toggleWithDegreeAndChord1 = !toggleWithDegreeAndChord1 },
contentPadding = PaddingValues(0.dp),
modifier = Modifier.height(24.dp).fillMaxWidth()
) {
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
val textToDisplay = if (toggleWithDegreeAndChord) (chordName ?: "") else (degreeName ?: "")
val textToDisplay =
if (toggleWithDegreeAndChord1) (chordName
?: "") else (degreeName
?: "")
Text(
text = textToDisplay,
@ -825,7 +926,11 @@ fun LazyVerticalGridTUO(
maxLines = 1,
overflow = TextOverflow.Visible,
style = TextStyle(
color = if (!toggleWithDegreeAndChord) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary.copy(red = MaterialTheme.colorScheme.secondary.red * 0.4f, green = MaterialTheme.colorScheme.secondary.green * 0.4f, blue = MaterialTheme.colorScheme.secondary.blue * 0.4f ),
color = if (!toggleWithDegreeAndChord1) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary.copy(
red = MaterialTheme.colorScheme.secondary.red * 0.4f,
green = MaterialTheme.colorScheme.secondary.green * 0.4f,
blue = MaterialTheme.colorScheme.secondary.blue * 0.4f
),
fontWeight = FontWeight.Bold,
fontSize = currentFontSize
)
@ -840,15 +945,17 @@ fun LazyVerticalGridTUO(
measureTUOs.forEachIndexed { indexInMeasure, oneTUO ->
val globalIndex = (measureIndex * gridColumnCount) + indexInMeasure
val isActive = (globalIndex == activeRowIndex)
val isSelectedByKeyboard = (globalIndex == selectedGridIndex)
val isSelectedByKeyboard = (globalIndex == selectedGridIndex1)
val myTimestamp = sharedScreenModel.tuoTimestamps.value.getOrElse(globalIndex) { 0L }
val myTimestamp =
sharedScreenModel.tuoTimestamps.value.getOrElse(globalIndex) { 0L }
var menuOffset by remember { mutableStateOf(Offset.Zero) }
val interactionSource = remember { MutableInteractionSource() }
val isHovered by interactionSource.collectIsHoveredAsState()
key(oneTUO.numBlock) {
Box(modifier = Modifier
Box(
modifier = Modifier
.width(gridWidthDp / gridColumnCount)
.border(
width = if (isSelectedByKeyboard && editMode) 2.dp else 0.dp,
@ -867,12 +974,12 @@ fun LazyVerticalGridTUO(
.pointerInput(globalIndex) {
detectTapGestures(
onTap = { offset ->
if(editMode) {
selectedGridIndex = globalIndex
if (editMode) {
selectedGridIndex1 = globalIndex
menuOffset = offset
selectedTUO = oneTUO
selectedIndex = globalIndex
showContextualMenu = true
selectedTUO1 = oneTUO
selectedIndex1 = globalIndex
showContextualMenu1 = true
} else {
sharedScreenModel.seekToGrid(globalIndex)
}
@ -891,43 +998,47 @@ fun LazyVerticalGridTUO(
transpositionInterval = currentInterval
)
if (showContextualMenu && selectedIndex == globalIndex) {
if (showContextualMenu1 && selectedIndex1 == globalIndex) {
Popup(
alignment = Alignment.TopStart,
offset = IntOffset(
menuOffset.x.roundToInt(),
menuOffset.y.roundToInt()
),
onDismissRequest = { showContextualMenu = false }
onDismissRequest = { showContextualMenu1 = false }
) {
ContextualMenu(onMenuItemClick = { item ->
println("Clicked in TUO $globalIndex: $item")
showContextualMenu = false
when(item) {
showContextualMenu1 = false
when (item) {
"Modifier" -> {
showEditDialog = true
showEditDialog1 = true
}
"Ajouter" -> {
showAddDialog = true
showAddDialog1 = true
}
"Liste" -> {
showDetailDialog = true
showDetailDialog1 = true
}
else -> {
showDetailDialog = false
showDetailDialog1 = false
}
}
})
}
}
val currentSelected = selectedTUO
if ((showEditDialog || showAddDialog || showDetailDialog) && currentSelected != null && selectedIndex == globalIndex) {
val canAdd = showAddDialog
val canEdit = showEditDialog || canAdd
val currentSelected = selectedTUO1
if ((showEditDialog1 || showAddDialog1 || showDetailDialog1) && currentSelected != null && selectedIndex1 == globalIndex) {
val canAdd = showAddDialog1
val canEdit = showEditDialog1 || canAdd
val template = oneTUO.pTemplate.template
val expectedTemplate = template.count { it.isLetter() } == 2 && template.contains(".")
val expectedTemplate =
template.count { it.isLetter() } == 2 && template.contains(".")
val fileC = sharedScreenModel.fileContent.value ?: ""
val lines = fileC.split("\n").toMutableList()
@ -938,20 +1049,23 @@ fun LazyVerticalGridTUO(
t0Idx != -1 -> {
lines[t0Idx]
}
u0Idx != -1 -> {
lines[u0Idx]
}
else -> ""
}
val afterU0T0 = fullLine.substringAfter("0:")
val blankPrefixRegex =Regex("""z([0-9A-Z])[:]""")
val blankPrefixRegex = Regex("""z([0-9A-Z])[:]""")
val match = blankPrefixRegex.find(afterU0T0)
val blankPrefix = match?.groups?.get(1)?.value ?: ""
val editState = TUOEditState(
tuoIndex = oneTUO.firstTuoIndex,
notesByVoice = (0..3).associate { i ->
val rawNote = oneTUO.tuNotes.getOrNull(i + 1)?.toString() ?: ""
val rawNote =
oneTUO.tuNotes.getOrNull(i + 1)?.toString() ?: ""
val fixedNote = autoFixNote(rawNote, template)
i to fixedNote
},
@ -960,7 +1074,8 @@ fun LazyVerticalGridTUO(
}.toMutableMap(),
templateFragment = oneTUO.pTemplate.template,
marker = listOfNotNull(
oneTUO.pTemplate.markerToString().takeIf { it.isNotBlank() },
oneTUO.pTemplate.markerToString()
.takeIf { it.isNotBlank() },
oneTUO.hasHairPin()?.toString()?.takeIf { it.isNotBlank() }
).joinToString(" "),
silentDuration = blankPrefix,
@ -978,26 +1093,26 @@ fun LazyVerticalGridTUO(
isEditable = canEdit,
canAdd = canAdd,
onDismiss = {
showAddDialog = false
showDetailDialog = false
showEditDialog = false
showAddDialog1 = false
showDetailDialog1 = false
showEditDialog1 = false
},
onSave = { newState ->
sharedScreenModel.openTUOEditor(newState)
showAddDialog = false
showEditDialog = false
showAddDialog1 = false
showEditDialog1 = false
},
onIndexChanged = { newIndex ->
selectedIndex = newIndex
selectedIndex1 = newIndex
val globalList = sharedScreenModel.tuoList.value
val nextTUO = globalList.getOrNull(newIndex)
if (nextTUO != null) {
selectedTUO = nextTUO
}else {
showAddDialog = false
showDetailDialog = false
showEditDialog = false
selectedTUO1 = nextTUO
} else {
showAddDialog1 = false
showDetailDialog1 = false
showEditDialog1 = false
}
}
)
@ -1049,7 +1164,12 @@ fun LazyVerticalGridTUO(
val isTooLong = textWidthDp > containerWidthDp
val spacer = makeSpaceBetweenSyllables(textMeasurer, columnWidthDp)
val (dynamicSpaceSyl, alignmentText) = spacer(syl, cleanAllTemps, syls_i, index)
val (dynamicSpaceSyl, alignmentText) = spacer(
syl,
cleanAllTemps,
syls_i,
index
)
Text(
text = dynamicSpaceSyl,
modifier = Modifier
@ -1078,11 +1198,6 @@ fun LazyVerticalGridTUO(
}
}
}
}
}
}
}
}
}
@Composable