Refactor WizardScreen to use ViewModel

Introduces `WizardViewModel` to manage the state and logic of the `WizardScreen`.
This change centralizes state management and improves the testability of the screen.

Author: maiatoday

app/build.gradle.kts

@@ -57,6 +57,8 @@ dependencies {
     implementation(libs.androidx.adaptive)
     implementation(libs.androidx.adaptive.layout)
     implementation(libs.androidx.adaptive.navigation)
+    implementation("androidx.lifecycle:lifecycle-runtime-compose:2.8.4")
+    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.4")
 
     // Patch annotations + processor
     implementation(project(":patch-annotations"))

app/src/main/java/de/berlindroid/zepatch/MainActivity.kt

@@ -52,16 +52,13 @@ import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaf
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.embroidermodder.punching.Histogram
 import de.berlindroid.zepatch.PatchablePreviewMode.BITMAP
 import de.berlindroid.zepatch.PatchablePreviewMode.COMPOSABLE
@@ -75,9 +72,10 @@ import de.berlindroid.zepatch.ui.theme.ZePatchTheme
 import de.berlindroid.zepatch.utils.multiLet
 import de.berlindroid.zepatch.utils.uppercaseWords
 import kotlinx.coroutines.launch
+import androidx.lifecycle.viewmodel.compose.viewModel as lifecycleViewModel
 
 
-private enum class PatchablePreviewMode {
+enum class PatchablePreviewMode {
     COMPOSABLE, BITMAP, REDUCED_BITMAP, STITCHES
 }
 
@@ -197,18 +195,15 @@ private fun PatchableDetail(
     onBackClick: () -> Unit,
     patchable: @Composable (Boolean, (ImageBitmap) -> Unit) -> Unit,
 ) {
-    var imageBitmap by remember { mutableStateOf<ImageBitmap?>(null) }
-    var reducedImageBitmap by remember { mutableStateOf<ImageBitmap?>(null) }
-    var reducedHistogram by remember { mutableStateOf<Histogram?>(null) }
-    var colorCount by remember { mutableIntStateOf(3) }
-    var embroideryData by remember { mutableStateOf<ByteArray?>(null) }
-    var embroideryPreviewImage by remember { mutableStateOf<ImageBitmap?>(null) }
-
     val context = LocalContext.current
+
+    val viewModel: WizardViewModel = lifecycleViewModel()
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
     val launcher = rememberLauncherForActivityResult(
         contract = ActivityResultContracts.StartActivityForResult()
     ) { result ->
-        savePesAfterSelection(context, result, embroideryData)
+        savePesAfterSelection(context, result, uiState.embroideryData)
     }
 
     Scaffold(
@@ -232,38 +227,35 @@ private fun PatchableDetail(
         Column(
             modifier = Modifier.padding(innerPadding),
         ) {
-            var currentMode by remember { mutableStateOf(COMPOSABLE) }
-
-            ProgressPills(imageBitmap, reducedImageBitmap, currentMode)
+            ProgressPills(uiState.imageBitmap, uiState.reducedImageBitmap, uiState.previewMode)
 
             WizardContent(
-                currentMode,
-                imageBitmap,
-                colorCount,
-                reducedImageBitmap,
-                reducedHistogram,
+                uiState.previewMode,
+                uiState.imageBitmap,
+                uiState.colorCount,
+                uiState.reducedImageBitmap,
+                uiState.reducedHistogram,
                 name,
-                onBitmapUpdated = { imageBitmap = it },
-                onColorCountUpdated = { colorCount = it },
-                onReducedUpdated = { img, histo ->
-                    reducedImageBitmap = img;reducedHistogram = histo
-                },
-                onEmbroideryUpdated = { data, preview ->
-                    embroideryData = data
-                    embroideryPreviewImage = preview
-                },
+                onBitmapUpdated = viewModel::updateBitmap,
+                onColorCountUpdated = viewModel::updateColorCount,
+                computeReducedBitmap = viewModel::computeReducedBitmap,
+                onReducedUpdated = viewModel::setReducedResult,
+                onEmbroideryUpdated = viewModel::updateEmbroidery,
                 patchable
             )
 
             WizardButtons(
-                currentMode,
-                imageBitmap,
-                reducedImageBitmap,
-                embroideryData,
+                uiState.previewMode,
+                uiState.imageBitmap,
+                uiState.reducedImageBitmap,
+                uiState.embroideryData,
                 name,
                 launcher
             ) {
-                currentMode = it
+                viewModel.setPreviewMode(it)
+                if (it == PatchablePreviewMode.REDUCED_BITMAP) {
+                    viewModel.computeReducedBitmap()
+                }
             }
         }
     }
@@ -279,6 +271,7 @@ private fun WizardContent(
     name: String,
     onBitmapUpdated: (ImageBitmap) -> Unit,
     onColorCountUpdated: (Int) -> Unit,
+    computeReducedBitmap: () -> Unit,
     onReducedUpdated: (ImageBitmap, Histogram) -> Unit,
     onEmbroideryUpdated: (ByteArray, ImageBitmap) -> Unit,
     patchable: @Composable (Boolean, (ImageBitmap) -> Unit) -> Unit,
@@ -301,7 +294,8 @@ private fun WizardContent(
                 image = imageBitmap,
                 colorCount = colorCount,
                 onColorCountChanged = onColorCountUpdated,
-                onReduced = onReducedUpdated,
+                computeReducedBitmap = computeReducedBitmap,
+                reducedImage = reducedImageBitmap,
             )
 
             STITCHES -> reducedImageBitmap?.multiLet(reducedHistogram) { img, histo ->

app/src/main/java/de/berlindroid/zepatch/WizardViewModel.kt

@@ -0,0 +1,87 @@
+package de.berlindroid.zepatch
+
+import android.graphics.Bitmap
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.asAndroidBitmap
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.core.graphics.scale
+import com.embroidermodder.punching.Histogram
+import com.embroidermodder.punching.reduceColors
+import de.berlindroid.zepatch.PatchablePreviewMode.COMPOSABLE
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+
+/**
+ * ViewModel to manage the Wizard screen state.
+ */
+class WizardViewModel : ViewModel() {
+
+    data class UIState(
+        val imageBitmap: ImageBitmap? = null,
+        val reducedImageBitmap: ImageBitmap? = null,
+        val reducedHistogram: Histogram? = null,
+        val colorCount: Int = 3,
+        val embroideryData: ByteArray? = null,
+        val embroideryPreviewImage: ImageBitmap? = null,
+        val previewMode: PatchablePreviewMode = COMPOSABLE,
+    )
+
+    private val _uiState = MutableStateFlow(UIState())
+    val uiState: StateFlow<UIState> = _uiState.asStateFlow()
+
+    fun setPreviewMode(mode: PatchablePreviewMode) {
+        _uiState.value = _uiState.value.copy(previewMode = mode)
+    }
+
+    fun updateColorCount(count: Int) {
+        _uiState.value = _uiState.value.copy(colorCount = count)
+    }
+
+    fun updateBitmap(bitmap: ImageBitmap) {
+        _uiState.value = _uiState.value.copy(
+            imageBitmap = bitmap,
+            // Reset downstream results when source bitmap changes
+            reducedImageBitmap = null,
+            reducedHistogram = null,
+            embroideryData = null,
+            embroideryPreviewImage = null,
+        )
+    }
+
+    fun computeReducedBitmap() {
+        val state = _uiState.value
+        val image = state.imageBitmap ?: return
+        val colorCount = state.colorCount
+        viewModelScope.launch(Dispatchers.IO) {
+            val aspect = image.width / image.height.toFloat()
+            val (reducedBmp, histogram) = image.asAndroidBitmap()
+                .copy(Bitmap.Config.ARGB_8888, false)
+                .scale((512 * aspect).toInt(), 512, false)
+                .reduceColors(colorCount)
+
+            _uiState.value = _uiState.value.copy(
+                reducedImageBitmap = reducedBmp.asImageBitmap(),
+                reducedHistogram = histogram,
+            )
+        }
+    }
+
+    fun updateEmbroidery(data: ByteArray, preview: ImageBitmap) {
+        _uiState.value = _uiState.value.copy(
+            embroideryData = data,
+            embroideryPreviewImage = preview,
+        )
+    }
+
+    fun setReducedResult(image: ImageBitmap, histogram: Histogram) {
+        _uiState.value = _uiState.value.copy(
+            reducedImageBitmap = image,
+            reducedHistogram = histogram,
+        )
+    }
+}

app/src/main/java/de/berlindroid/zepatch/ui/PatchableToReducedBitmap.kt

@@ -35,14 +35,10 @@ fun PatchableToReducedBitmap(
     modifier: Modifier = Modifier,
     image: ImageBitmap? = null,
     colorCount: Int = 3,
-    onReduced: (ImageBitmap, Histogram) -> Unit = { _, _ -> },
+    reducedImage: ImageBitmap? = null,
+    computeReducedBitmap: () -> Unit = {},
     onColorCountChanged: (Int) -> Unit = {}
 ) {
-
-    var reducedImage by remember { mutableStateOf<ImageBitmap?>(null) }
-    var reducedHistogram by remember { mutableStateOf<Histogram?>(null) }
-    val coroutineScope = rememberCoroutineScope()
-
     Column(modifier = modifier.fillMaxWidth()) {
         image?.let {
             Image(
@@ -51,22 +47,7 @@ fun PatchableToReducedBitmap(
                 modifier = Modifier.fillMaxWidth()
             )
         }
-        Button(onClick = {
-            // TODO: VMIZE
-            coroutineScope.launch(Dispatchers.IO) {
-                reducedImage = null
-                image?.let {
-                    val aspect = it.width / it.height.toFloat()
-                    val (bitmap, histogram) = it.asAndroidBitmap()
-                        .copy(Bitmap.Config.ARGB_8888, false)
-                        .scale((512 * aspect).toInt(), 512, false)
-                        .reduceColors(colorCount)
-
-                    reducedImage = bitmap.asImageBitmap()
-                    reducedHistogram = histogram
-                }
-            }
-        }) { Text("Do it") }
+        Button(onClick = computeReducedBitmap) { Text("Do it") }
 
         TextField(
             value = "$colorCount",
@@ -84,13 +65,12 @@ fun PatchableToReducedBitmap(
             )
         )
 
-        reducedImage?.multiLet(reducedHistogram) { image, histogram ->
+        reducedImage?.let {
             Image(
-                bitmap = image,
+                bitmap = it,
                 contentDescription = "patch bitmap",
                 modifier = Modifier.fillMaxWidth()
             )
-            onReduced(image, histogram)
         } ?: CircularProgressIndicator()
     }
 }
@@ -101,7 +81,6 @@ fun PatchableToReducedBitmapPreview() {
     PatchableToReducedBitmap(
         image = ImageBitmap(width = 100, height = 100), // Example ImageBitmap
         colorCount = 5,
-        onReduced = { _, _ -> },
         onColorCountChanged = {}
     )
 }