Adding undo redo capabilities.

yannchevalier · yannchevalier · commit b8b3c7bd904a · 2024-04-19T09:38:12.000+02:00
[Offscreen] Implementing undo and redo for scratch.

[Offscreen] Adding undo/redo add and remove stroke items

[Offscreen] Clearing stack on file loading.

[Offscreen] Better colors for drawable.

[Offscreen] Clearing listeners on activity sotp

[Offscreen] Renaming UndoRedo naming to EditorHistory.

[Offscreen] Remove coroutine launch from private methods.
diff --git a/samples/offscreen-interactivity/src/main/java/com/myscript/iink/demo/inksample/ui/InkViewModel.kt b/samples/offscreen-interactivity/src/main/java/com/myscript/iink/demo/inksample/ui/InkViewModel.kt
@@ -51,6 +51,21 @@ data class RecognitionFeedback(
     val words: List<Word> = emptyList()
 )
 
+enum class EditorHistoryAction {
+    ADD,
+    REMOVE
+}
+
+data class EditorHistoryItem(
+        val editorHistoryAction: EditorHistoryAction,
+        val strokes: List<InkView.Brush>
+)
+
+data class EditorHistoryState(
+        val canUndo: Boolean = false,
+        val canRedo: Boolean = false
+)
+
 /**
  * ViewModel responsible for maintaining the state of the OffScreenInteractivity demo application.
  *
@@ -72,6 +87,12 @@ class InkViewModel(
     val strokes: LiveData<List<InkView.Brush>>
         get() = _strokes
 
+    private val undoRedoStack = mutableListOf<List<EditorHistoryItem>>()
+    private var undoRedoIndex = 0
+    private val _editorHistoryState: MutableLiveData<EditorHistoryState> = MutableLiveData(EditorHistoryState())
+    val editorHistoryState: LiveData<EditorHistoryState>
+        get() = _editorHistoryState
+
     // The iinkModel and recognitionFeedback are straightforward methods for debugging and showcasing, providing visual representation for easier understanding.
     // While this is not the method your app should use to display recognition, it can provide a starting point or guide on how to accomplish this.
     private val _recognitionFeedback: MutableLiveData<RecognitionFeedback> = MutableLiveData(RecognitionFeedback())
@@ -164,10 +185,24 @@ class InkViewModel(
                 // or when tasks have side-effects that must be isolated to a single thread.
                 withContext(workDispatcher) {
                     // ItemIds may refer to partial strokes, retrieve the corresponding full strokes ids
-                    val fullStrokeIds = itemIds.map(itemIdHelper::getFullItemId) + gestureStrokeId
+                    val fullStrokeIds = itemIds.map(itemIdHelper::getFullItemId)
 
-                    // Erase the gesture stroke (gestureStrokeId) and the erased strokes (fullItemIds) in your application
+                    val strokesToRemove = mutableListOf<InkView.Brush>()
                     fullStrokeIds.forEach { strokeId ->
+                        val appStrokeId = strokeIdsMapping[strokeId]
+                        remainingStrokes.firstOrNull { it.id == appStrokeId }?.let { strokeBrush ->
+                            strokesToRemove.add(strokeBrush)
+                        }
+                    }
+
+                    removeLastFromUndoRedoStack()
+                    val newHistory = addToUndoRedoStack(EditorHistoryAction.REMOVE, strokesToRemove)
+                    withContext(uiDispatcher) {
+                        _editorHistoryState.value = newHistory
+                    }
+
+                    // Erase the gesture stroke (gestureStrokeId) and the erased strokes (fullItemIds) in your application
+                    (fullStrokeIds + gestureStrokeId).forEach { strokeId ->
                         val appStrokeId = strokeIdsMapping[strokeId]
                         strokeIdsMapping.remove(strokeId)
                         val strokeBrush = remainingStrokes.firstOrNull { it.id == appStrokeId }
@@ -222,6 +257,19 @@ class InkViewModel(
                         emptyArray()
                     }
 
+                    val strokesToRemove = mutableListOf<InkView.Brush>()
+                    fullItemIds.forEach { strokeId ->
+                        val appStrokeId = strokeIdsMapping[strokeId]
+                        remainingStrokes.firstOrNull { it.id == appStrokeId }?.let {
+                            strokesToRemove.add(it)
+                        }
+                    }
+                    removeLastFromUndoRedoStack()
+                    val newHistory = addToUndoRedoStack(EditorHistoryAction.REMOVE, strokesToRemove)
+                    withContext(uiDispatcher) {
+                        _editorHistoryState.value = newHistory
+                    }
+
                     // Erase the erased strokes and gesture strokes in your application
                     (fullItemIds + gestureStrokeId).forEach { strokeId ->
                         val appStrokeId = strokeIdsMapping[strokeId]
@@ -325,16 +373,145 @@ class InkViewModel(
         }
     }
 
+    private fun addToUndoRedoStack(action: EditorHistoryAction, strokes: List<InkView.Brush>): EditorHistoryState {
+        return addToUndoRedoStack(listOf(EditorHistoryItem(action, strokes)))
+    }
+
+    private fun addToUndoRedoStack(editorHistoryItems: List<EditorHistoryItem>): EditorHistoryState {
+        synchronized(undoRedoStack) {
+            if (undoRedoStack.isNotEmpty()) {
+                for (i in (undoRedoStack.size - 1).downTo(undoRedoIndex)) {
+                    undoRedoStack.removeAt(i)
+                }
+            }
+            undoRedoStack.add(undoRedoIndex++, editorHistoryItems)
+
+            return EditorHistoryState(
+                    canUndo = undoRedoIndex > 0,
+                    canRedo = undoRedoIndex < undoRedoStack.size
+            )
+        }
+    }
+
+    private fun addStrokesForUndoRedo(initialStrokes: List<InkView.Brush>, strokesToAdd: List<InkView.Brush>): List<InkView.Brush> {
+        val strokes = initialStrokes.toMutableList()
+        strokes.addAll(strokesToAdd)
+
+        val pointerEvents = strokesToAdd.flatMap { brush ->
+            brush.stroke.toPointerEvents().map { pointerEvent ->
+                pointerEvent.convertPointerEvent(converter)
+            }
+        }.toTypedArray()
+
+        if (pointerEvents.isNotEmpty()) {
+            val addedStrokes = offscreenEditor?.addStrokes(pointerEvents, false)
+
+            if (addedStrokes != null) {
+                strokesToAdd.forEachIndexed { index, brush ->
+                    if (index in addedStrokes.indices) {
+                        strokeIdsMapping[addedStrokes[index]] = brush.id
+                    }
+                }
+            }
+        }
+
+        return strokes
+    }
+
+    private fun removeStrokesForUndoRedo(initialStrokes: List<InkView.Brush>, strokesToRemove: List<InkView.Brush>): List<InkView.Brush> {
+        val updatedStrokes = initialStrokes.filter {
+            it.id !in strokesToRemove.map { strokeToRemove -> strokeToRemove.id }
+        }
+
+        val strokeToUndoMapping = strokeIdsMapping.filter { (_, appStrokeId) ->
+            appStrokeId in strokesToRemove.map { strokeToRemove -> strokeToRemove.id }
+        }
+        offscreenEditor?.erase(strokeToUndoMapping.keys.toTypedArray())
+        strokeToUndoMapping.forEach {
+            strokeIdsMapping.remove(it.key)
+        }
+
+        return updatedStrokes
+    }
+
+    private fun clearUndoRedoStack():  EditorHistoryState {
+        synchronized(undoRedoStack) {
+            undoRedoStack.clear()
+            undoRedoIndex = 0
+            return EditorHistoryState()
+        }
+    }
+
+    private fun removeLastFromUndoRedoStack(): EditorHistoryState {
+        synchronized(undoRedoStack) {
+            undoRedoStack.removeAt(--undoRedoIndex)
+
+            return EditorHistoryState(
+                    canUndo = undoRedoIndex > 0,
+                    canRedo = undoRedoIndex < undoRedoStack.size
+            )
+        }
+    }
+
+    fun undo() {
+        viewModelScope.launch(uiDispatcher) {
+            if (undoRedoIndex == 0 || undoRedoStack.isEmpty()) return@launch
+
+            val undoItems = synchronized(undoRedoStack){
+                undoRedoStack[--undoRedoIndex]
+            }
+            undoItems.forEach { item ->
+                val initialStrokes = strokes.value ?: emptyList()
+                _strokes.value = when (item.editorHistoryAction) {
+                    EditorHistoryAction.ADD -> removeStrokesForUndoRedo(initialStrokes, item.strokes)
+                    EditorHistoryAction.REMOVE -> addStrokesForUndoRedo(initialStrokes, item.strokes)
+                }
+            }
+
+            _editorHistoryState.value = EditorHistoryState(
+                    canUndo = undoRedoIndex > 0,
+                    canRedo = undoRedoIndex < undoRedoStack.size
+            )
+        }
+    }
+
+    fun redo() {
+        viewModelScope.launch(uiDispatcher) {
+            if (undoRedoIndex == undoRedoStack.size || undoRedoStack.isEmpty()) return@launch
+
+            val redoItems = synchronized(undoRedoStack) {
+                undoRedoStack[undoRedoIndex++]
+            }
+            redoItems.forEach { item ->
+                val initialStrokes = strokes.value ?: emptyList()
+                _strokes.value = when (item.editorHistoryAction) {
+                    EditorHistoryAction.ADD -> addStrokesForUndoRedo(initialStrokes, item.strokes)
+                    EditorHistoryAction.REMOVE -> removeStrokesForUndoRedo(initialStrokes, item.strokes)
+                }
+            }
+
+            _editorHistoryState.value = EditorHistoryState(
+                    canUndo = undoRedoIndex > 0,
+                    canRedo = undoRedoIndex < undoRedoStack.size
+            )
+        }
+    }
+
     fun clearInk() {
         viewModelScope.launch(uiDispatcher) {
             offscreenEditor?.clear()
             strokeIdsMapping.clear()
+
+            _editorHistoryState.value = addToUndoRedoStack(EditorHistoryAction.REMOVE, _strokes.value ?: emptyList())
+
             _strokes.value = emptyList()
         }
     }
 
     fun loadInk() {
         viewModelScope.launch(uiDispatcher) {
+            _editorHistoryState.value = clearUndoRedoStack()
+
             val jsonString = withContext(ioDispatcher) {
                 repository.readInkFromFile()
             }
@@ -402,6 +579,8 @@ class InkViewModel(
             offscreenEditor?.addStrokes(pointerEvents, true)?.firstNotNullOf { strokeId ->
                 strokeIdsMapping[strokeId] = brush.id
             }
+
+            _editorHistoryState.value = addToUndoRedoStack(EditorHistoryAction.ADD, listOf(brush))
         }
     }
 
diff --git a/samples/offscreen-interactivity/src/main/java/com/myscript/iink/demo/inksample/ui/MainActivity.kt b/samples/offscreen-interactivity/src/main/java/com/myscript/iink/demo/inksample/ui/MainActivity.kt
@@ -46,13 +46,16 @@ class MainActivity : AppCompatActivity() {
         }
         inkViewModel.recognitionFeedback.observe(this, ::onRecognitionUpdate)
         inkViewModel.iinkModel.observe(this, ::onIInkModelUpdate)
+        inkViewModel.editorHistoryState.observe(this, ::onUndoRedoStateUpdate)
     }
 
     override fun onStart() {
         super.onStart()
 
         with(binding) {
             inkView.strokesListener = StrokesListener()
+            undoBtn.setOnClickListener { inkViewModel.undo() }
+            redoBtn.setOnClickListener { inkViewModel.redo() }
             clearInkBtn.setOnClickListener { inkViewModel.clearInk() }
             recognitionSwitch.setOnCheckedChangeListener { _, isChecked ->
                 inkViewModel.toggleRecognition(isVisible = isChecked)
@@ -69,6 +72,8 @@ class MainActivity : AppCompatActivity() {
         }
         with(binding) {
             inkView.strokesListener = null
+            undoBtn.setOnClickListener(null)
+            redoBtn.setOnClickListener(null)
             clearInkBtn.setOnClickListener(null)
             recognitionSwitch.setOnCheckedChangeListener(null)
         }
@@ -100,6 +105,13 @@ class MainActivity : AppCompatActivity() {
         binding.iinkModelPreview.loadData(htmlExport, "text/html", Charsets.UTF_8.toString())
     }
 
+    private fun onUndoRedoStateUpdate(editorHistoryState: EditorHistoryState) {
+        with(binding) {
+            undoBtn.isEnabled = editorHistoryState.canUndo
+            redoBtn.isEnabled = editorHistoryState.canRedo
+        }
+    }
+
     /**
      * Listen for strokes from InkView.InputManager
      */
diff --git a/samples/offscreen-interactivity/src/main/res/drawable/ic_redo.xml b/samples/offscreen-interactivity/src/main/res/drawable/ic_redo.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M18.4,10.6C16.55,8.99 14.15,8 11.5,8c-4.65,0 -8.58,3.03 -9.96,7.22L3.9,16c1.05,-3.19 4.05,-5.5 7.6,-5.5 1.95,0 3.73,0.72 5.12,1.88L13,16h9V7l-3.6,3.6z" />
+</vector>
diff --git a/samples/offscreen-interactivity/src/main/res/drawable/ic_undo.xml b/samples/offscreen-interactivity/src/main/res/drawable/ic_undo.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8Z"/>
+</vector>
diff --git a/samples/offscreen-interactivity/src/main/res/layout/main_activity.xml b/samples/offscreen-interactivity/src/main/res/layout/main_activity.xml
@@ -24,6 +24,24 @@
                 android:gravity="center_vertical"
                 android:orientation="horizontal">
 
+                <ImageView
+                    android:id="@+id/undo_btn"
+                    android:layout_width="48dp"
+                    android:layout_height="48dp"
+                    android:padding="12dp"
+                    android:background="?attr/selectableItemBackgroundBorderless"
+                    android:src="@drawable/ic_undo"
+                    android:contentDescription="Undo" />
+
+                <ImageView
+                    android:id="@+id/redo_btn"
+                    android:layout_width="48dp"
+                    android:layout_height="48dp"
+                    android:padding="12dp"
+                    android:background="?attr/selectableItemBackgroundBorderless"
+                    android:src="@drawable/ic_redo"
+                    android:contentDescription="Redo" />
+
                 <ImageView
                     android:id="@+id/clear_ink_btn"
                     android:layout_width="48dp"
