Fix issues related to history (#701)

* Separate UI from Canvas

* Explicitly define history recording

* ActionManager: Set syncActionState during construction instead of in every call

* Add commit to history flag to necessary actions

* Disable undoing during multiElement

* Write custom equality function for UI component to render it only when specific props and elements change

* Remove stale comments about history skipping

* Stop undo/redoing when in resizing element mode

* wip

* correctly reset resizingElement & add undo check

* Separate selection element from the rest of the array and stop redrawing the UI when dragging the selection

* Remove selectionElement from local storage

* Remove unnecessary readonly type casting in actionFinalize

* Fix undo / redo for multi points

* Fix an issue that did not update history when elements were locked

* Disable committing to history for noops

- deleteSelected without deleting anything
- Basic selection

* Use generateEntry only inside history and pass elements and appstate to history

* Update component after every history resume

* Remove last item from the history only if in multi mode

* Resume recording when element type is not selection

* ensure we prevent hotkeys only on writable elements

* Remove selection clearing from history

* Remove one point arrows as they are invisibly small

* Remove shape of elements from local storage

* Fix removing invisible element from the array

* add missing history resuming cases & simplify slice

* fix lint

* don't regenerate elements if no elements deselected

* regenerate elements array on selection

* reset state.selectionElement unconditionally

* Use getter instead of passing appState and scene data through functions to actions

* fix import

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/history.ts

@@ -1,25 +1,31 @@
 import { AppState } from "./types";
 import { ExcalidrawElement } from "./element/types";
+import { clearAppStatePropertiesForHistory } from "./appState";
 
 class SceneHistory {
   private recording: boolean = true;
   private stateHistory: string[] = [];
   private redoStack: string[] = [];
 
-  generateCurrentEntry(
-    appState: Partial<AppState>,
+  private generateEntry(
+    appState: AppState,
     elements: readonly ExcalidrawElement[],
   ) {
     return JSON.stringify({
-      appState,
+      appState: clearAppStatePropertiesForHistory(appState),
       elements: elements.map(({ shape, ...element }) => ({
         ...element,
-        isSelected: false,
+        shape: null,
+        points:
+          appState.multiElement && appState.multiElement.id === element.id
+            ? element.points.slice(0, -1)
+            : element.points,
       })),
     });
   }
 
-  pushEntry(newEntry: string) {
+  pushEntry(appState: AppState, elements: readonly ExcalidrawElement[]) {
+    const newEntry = this.generateEntry(appState, elements);
     if (
       this.stateHistory.length > 0 &&
       this.stateHistory[this.stateHistory.length - 1] === newEntry
@@ -67,6 +73,7 @@ class SceneHistory {
     }
 
     const currentEntry = this.stateHistory.pop();
+
     const entryToRestore = this.stateHistory[this.stateHistory.length - 1];
 
     if (currentEntry !== undefined) {