From 9231e6865301a0b583f65738f9bccce6eeaaf72e Mon Sep 17 00:00:00 2001 From: SYtor Date: Wed, 1 May 2024 13:03:04 +0300 Subject: [PATCH] Small refactoring of naming and states on writing screen --- .../presentation/common/ui/kanji/Kanji.kt | 42 +++++++------------ .../ui/WritingPracticeInputSection.kt | 40 ++++++++---------- 2 files changed, 32 insertions(+), 50 deletions(-) diff --git a/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/common/ui/kanji/Kanji.kt b/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/common/ui/kanji/Kanji.kt index 7b066b44..44ff4572 100644 --- a/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/common/ui/kanji/Kanji.kt +++ b/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/common/ui/kanji/Kanji.kt @@ -5,11 +5,9 @@ import androidx.compose.foundation.gestures.detectDragGestures import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.State -import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.neverEqualPolicy import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Path @@ -71,6 +69,8 @@ class StrokeInputState( ) { val internalShowStroke = mutableStateOf(keepLastDrawnStroke) + val internalPath = mutableStateOf(Path(), neverEqualPolicy()) + val internalDrawAreaSize = mutableStateOf(0) fun hideStroke() { internalShowStroke.value = false @@ -94,26 +94,25 @@ fun StrokeInput( stokeWidth: Float = StrokeWidth ) { - val drawPathState = remember { mutableStateOf(Path(), neverEqualPolicy()) } - var areaSize by remember { mutableStateOf(0) } - Canvas( modifier = modifier .then(ExcludeNavigationGesturesModifier) - .onGloballyPositioned { areaSize = it.size.height } + .onGloballyPositioned { state.internalDrawAreaSize.value = it.size.height } .pointerInput(Unit) { detectDragGestures( onDragStart = { - state.internalShowStroke.value = true - drawPathState.value = Path().apply { + val areaSize = state.internalDrawAreaSize.value + state.internalPath.value = Path().apply { moveTo( it.x / areaSize * KanjiSize, it.y / areaSize * KanjiSize ) } + state.internalShowStroke.value = true }, onDrag = { _, dragAmount -> - drawPathState.value = drawPathState.value.apply { + val areaSize = state.internalDrawAreaSize.value + state.internalPath.value = state.internalPath.value.apply { relativeLineTo( dragAmount.x / areaSize * KanjiSize, dragAmount.y / areaSize * KanjiSize @@ -121,7 +120,7 @@ fun StrokeInput( } }, onDragEnd = { - onUserPathDrawn(drawPathState.value) + onUserPathDrawn(state.internalPath.value) if (!state.keepLastDrawnStroke) { state.internalShowStroke.value = false } @@ -131,8 +130,11 @@ fun StrokeInput( ) { if (state.internalShowStroke.value) { clipRect { - val path = drawPathState.value - drawKanjiStroke(path, color, stokeWidth) + drawKanjiStroke( + path = state.internalPath.value, + color = color, + width = stokeWidth + ) } } } @@ -165,19 +167,3 @@ fun parseKanjiStrokes(strokes: List): List { return strokes.map { SvgCommandParser.parse(it) } .map { SvgPathCreator.convert(it) } } - -//@Preview(showBackground = true, showSystemUi = true) -//@Composable -//private fun KanjiPreview() { -// AppTheme { -// Column { -// Kanji( -// modifier = Modifier -// .size(200.dp) -// .background(MaterialTheme.colorScheme.background), -// strokes = PreviewKanji.strokes -// ) -// } -// -// } -//} diff --git a/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/screen/main/screen/writing_practice/ui/WritingPracticeInputSection.kt b/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/screen/main/screen/writing_practice/ui/WritingPracticeInputSection.kt index f566dbf1..e498d2df 100644 --- a/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/screen/main/screen/writing_practice/ui/WritingPracticeInputSection.kt +++ b/core/src/commonMain/kotlin/ua/syt0r/kanji/presentation/screen/main/screen/writing_practice/ui/WritingPracticeInputSection.kt @@ -6,7 +6,6 @@ import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.ContentTransform import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.core.Animatable -import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween import androidx.compose.animation.core.updateTransition import androidx.compose.animation.fadeIn @@ -15,11 +14,9 @@ import androidx.compose.animation.togetherWith import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable -import androidx.compose.foundation.focusable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxScope -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize @@ -52,7 +49,6 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Path -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp @@ -174,7 +170,7 @@ fun WritingPracticeInputSection( is WritingReviewState.SingleStrokeInput -> { SingleStrokeInputContent( - data = data, + reviewState = data, onStrokeDrawn = onSingleStrokeSubmit, hintClicksFlow = hintClicksSharedFlow ) @@ -307,7 +303,7 @@ private fun BoxScope.MultipleStrokeInputContent( @Composable private fun SingleStrokeInputContent( - data: WritingReviewState.SingleStrokeInput, + reviewState: WritingReviewState.SingleStrokeInput, onStrokeDrawn: (SingleStrokeInputData) -> Unit, hintClicksFlow: Flow ) { @@ -322,20 +318,20 @@ private fun SingleStrokeInputContent( derivedStateOf { max( a = 0, - b = data.drawnStrokesCount.value - if (isAnimatingCorrectStroke.value) 1 else 0 + b = reviewState.drawnStrokesCount.value - if (isAnimatingCorrectStroke.value) 1 else 0 ) } } Kanji( - strokes = data.characterDetails.strokes.take(adjustedDrawnStrokesCount.value), + strokes = reviewState.characterDetails.strokes.take(adjustedDrawnStrokesCount.value), modifier = Modifier.fillMaxSize() ) - when (data.isStudyMode) { + when (reviewState.isStudyMode) { true -> { StudyStroke( - strokes = data.characterDetails.strokes, + strokes = reviewState.characterDetails.strokes, drawnStrokesCount = adjustedDrawnStrokesCount, hintClicksFlow = hintClicksFlow ) @@ -343,28 +339,28 @@ private fun SingleStrokeInputContent( false -> { HintStroke( - inputState = data, + reviewState = reviewState, hintClicksFlow = hintClicksFlow ) } } ErrorFadeOutStroke( - data = remember { mistakeStrokeAnimations.consumeAsFlow() }, + mistakeFlow = remember { mistakeStrokeAnimations.consumeAsFlow() }, onAnimationEnd = { } ) CorrectMovingStroke( - data = remember { correctStrokeAnimations.consumeAsFlow() }, + correctFlow = remember { correctStrokeAnimations.consumeAsFlow() }, onAnimationEnd = { isAnimatingCorrectStroke.value = false } ) val shouldShowStrokeInput by remember { - derivedStateOf { data.characterDetails.strokes.size > data.drawnStrokesCount.value } + derivedStateOf { reviewState.characterDetails.strokes.size > reviewState.drawnStrokesCount.value } } LaunchedEffect(Unit) { - data.inputProcessingResults.collect { + reviewState.inputProcessingResults.collect { inputState.hideStroke() when (it) { is StrokeProcessingResult.Correct -> { @@ -385,7 +381,7 @@ private fun SingleStrokeInputContent( onStrokeDrawn( SingleStrokeInputData( userPath = drawnPath, - kanjiPath = data.characterDetails.strokes[data.drawnStrokesCount.value] + kanjiPath = reviewState.characterDetails.strokes[reviewState.drawnStrokesCount.value] ) ) @@ -539,11 +535,11 @@ private fun InputDecorations( @Composable fun HintStroke( - inputState: WritingReviewState.SingleStrokeInput, + reviewState: WritingReviewState.SingleStrokeInput, hintClicksFlow: Flow ) { - val currentState by rememberUpdatedState(inputState) + val currentState by rememberUpdatedState(reviewState) val stroke = remember { mutableStateOf(null, neverEqualPolicy()) } val strokeDrawProgress = remember { Animatable(initialValue = 0f) } @@ -581,7 +577,7 @@ fun HintStroke( @Composable fun ErrorFadeOutStroke( - data: Flow, + mistakeFlow: Flow, onAnimationEnd: () -> Unit ) { @@ -589,7 +585,7 @@ fun ErrorFadeOutStroke( val strokeAlpha = remember { Animatable(initialValue = 0f) } LaunchedEffect(Unit) { - data.collect { + mistakeFlow.collect { lastData.value = it strokeAlpha.snapTo(1f) strokeAlpha.animateTo(0f, tween(600)) @@ -611,7 +607,7 @@ fun ErrorFadeOutStroke( @Composable fun CorrectMovingStroke( - data: Flow, + correctFlow: Flow, onAnimationEnd: () -> Unit ) { @@ -619,7 +615,7 @@ fun CorrectMovingStroke( val strokeLength = remember { Animatable(initialValue = 0f) } LaunchedEffect(Unit) { - data.collect { + correctFlow.collect { lastData.value = it strokeLength.snapTo(0f) strokeLength.animateTo(1f)