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/scene/data.ts

@@ -437,7 +437,12 @@ export function saveToLocalStorage(
   elements: readonly ExcalidrawElement[],
   appState: AppState,
 ) {
-  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(elements));
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY,
+    JSON.stringify(
+      elements.map(({ shape, ...element }: ExcalidrawElement) => element),
+    ),
+  );
   localStorage.setItem(
     LOCAL_STORAGE_KEY_STATE,
     JSON.stringify(clearAppStateForLocalStorage(appState)),

src/scene/export.ts

@@ -37,6 +37,7 @@ export function exportToCanvas(
 
   renderScene(
     elements,
+    null,
     rough.canvas(tempCanvas),
     tempCanvas,
     {

src/scene/selection.ts

@@ -30,13 +30,15 @@ export function getElementsWithinSelection(
 }
 
 export function clearSelection(elements: readonly ExcalidrawElement[]) {
-  const newElements = [...elements];
-
-  newElements.forEach(element => {
-    element.isSelected = false;
+  let someWasSelected = false;
+  elements.forEach(element => {
+    if (element.isSelected) {
+      someWasSelected = true;
+      element.isSelected = false;
+    }
   });
 
-  return newElements;
+  return someWasSelected ? elements.slice() : elements;
 }
 
 export function deleteSelectedElements(elements: readonly ExcalidrawElement[]) {