fix(new study screen): finish current stroke before changing pen color

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/whiteboard/WhiteboardFragment.kt

@@ -41,6 +41,7 @@ import androidx.fragment.app.viewModels
 import androidx.lifecycle.lifecycleScope
 import com.google.android.material.button.MaterialButton
 import com.google.android.material.button.MaterialButtonToggleGroup
+import com.google.android.material.card.MaterialCardView
 import com.google.android.material.slider.Slider
 import com.ichi2.anki.AnkiDroidApp
 import com.ichi2.anki.R
@@ -81,19 +82,74 @@ class WhiteboardFragment :
         val whiteboardView = view.findViewById<WhiteboardView>(R.id.whiteboard_view)
         brushToolbarContainerHorizontal = view.findViewById(R.id.brush_toolbar_container_horizontal)
         brushToolbarContainerVertical = view.findViewById(R.id.brush_toolbar_container_vertical)
+        val toolbarContainer = view.findViewById<MaterialCardView>(R.id.controls_container)
 
         val isNightMode = Themes.systemIsInNightMode(requireContext())
         viewModel.loadState(isNightMode)
 
         setupUI(view)
         observeViewModel(whiteboardView)
+        setupToolbarAnimation(whiteboardView, toolbarContainer)
 
         whiteboardView.onNewPath = viewModel::addPath
         whiteboardView.onEraseGestureStart = viewModel::startPathEraseGesture
         whiteboardView.onEraseGestureMove = viewModel::erasePathsAtPoint
         whiteboardView.onEraseGestureEnd = viewModel::endPathEraseGesture
     }
 
+    private fun setupToolbarAnimation(
+        whiteboardView: WhiteboardView,
+        toolbarContainer: View,
+    ) {
+        combine(
+            whiteboardView.isDrawing,
+            viewModel.toolbarAlignment,
+        ) { isCurrentlyDrawing, alignment ->
+            isCurrentlyDrawing to alignment
+        }.onEach { (isCurrentlyDrawing, alignment) ->
+            val animator = toolbarContainer.animate().setDuration(250)
+
+            animator.withStartAction {
+                if (!isCurrentlyDrawing) {
+                    toolbarContainer.translationX = 0f
+                    toolbarContainer.translationY = 0f
+                    toolbarContainer.visibility = View.VISIBLE
+                }
+            }
+
+            animator.withEndAction {
+                if (isCurrentlyDrawing) {
+                    toolbarContainer.visibility = View.GONE
+                }
+            }
+
+            when (alignment) {
+                ToolbarAlignment.BOTTOM -> {
+                    val distance =
+                        toolbarContainer.height.toFloat() +
+                            ((toolbarContainer.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin?.toFloat() ?: 0f)
+                    val targetY = if (isCurrentlyDrawing) distance else 0f
+                    animator.translationY(targetY)
+                }
+                ToolbarAlignment.LEFT -> {
+                    val distance =
+                        -toolbarContainer.width.toFloat() -
+                            ((toolbarContainer.layoutParams as? ViewGroup.MarginLayoutParams)?.leftMargin?.toFloat() ?: 0f)
+                    val targetX = if (isCurrentlyDrawing) distance else 0f
+                    animator.translationX(targetX)
+                }
+                ToolbarAlignment.RIGHT -> {
+                    val distance =
+                        toolbarContainer.width.toFloat() +
+                            ((toolbarContainer.layoutParams as? ViewGroup.MarginLayoutParams)?.rightMargin?.toFloat() ?: 0f)
+                    val targetX = if (isCurrentlyDrawing) distance else 0f
+                    animator.translationX(targetX)
+                }
+            }
+            animator.start()
+        }.launchIn(lifecycleScope)
+    }
+
     private fun setupUI(view: View) {
         val undoButton = view.findViewById<ImageButton>(R.id.undo_button)
         val redoButton = view.findViewById<ImageButton>(R.id.redo_button)

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/whiteboard/WhiteboardView.kt

@@ -28,6 +28,8 @@ import android.view.MotionEvent
 import android.view.View
 import androidx.core.graphics.createBitmap
 import com.ichi2.anki.R
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
 
 /**
  * A custom view for the whiteboard that handles drawing and touch events.
@@ -67,6 +69,8 @@ class WhiteboardView : View {
     private val canvasPaint = Paint(Paint.DITHER_FLAG)
 
     private var hasMoved = false
+    private val _isDrawing = MutableStateFlow(false)
+    val isDrawing = _isDrawing.asStateFlow()
 
     /**
      * Recreates the drawing buffer when the view size changes.
@@ -118,6 +122,7 @@ class WhiteboardView : View {
         when (event.action) {
             MotionEvent.ACTION_DOWN -> {
                 hasMoved = false
+                _isDrawing.value = true
                 currentPath.moveTo(touchX, touchY)
                 if (isPathEraser) {
                     onEraseGestureStart?.invoke()
@@ -134,6 +139,7 @@ class WhiteboardView : View {
                 invalidate()
             }
             MotionEvent.ACTION_UP -> {
+                _isDrawing.value = false
                 if (isPathEraser) {
                     onEraseGestureEnd?.invoke()
                 } else {

AnkiDroid/src/main/res/layout/fragment_whiteboard.xml

@@ -122,4 +122,4 @@
         </LinearLayout>
 
     </com.google.android.material.card.MaterialCardView>
-</androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>