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/components/ExportDialog.tsx

@@ -9,7 +9,7 @@ import { Island } from "./Island";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { exportToCanvas } from "../scene/export";
-import { ActionsManagerInterface, UpdaterFn } from "../actions/types";
+import { ActionsManagerInterface } from "../actions/types";
 import Stack from "./Stack";
 import { t } from "../i18n";
 
@@ -30,7 +30,6 @@ function ExportModal({
   appState,
   exportPadding = 10,
   actionManager,
-  syncActionResult,
   onExportToPng,
   onExportToSvg,
   onExportToClipboard,
@@ -41,7 +40,6 @@ function ExportModal({
   elements: readonly ExcalidrawElement[];
   exportPadding?: number;
   actionManager: ActionsManagerInterface;
-  syncActionResult: UpdaterFn;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
@@ -160,12 +158,7 @@ function ExportModal({
             </Stack.Row>
           </Stack.Col>
 
-          {actionManager.renderAction(
-            "changeProjectName",
-            elements,
-            appState,
-            syncActionResult,
-          )}
+          {actionManager.renderAction("changeProjectName")}
           <Stack.Col gap={1}>
             <div className="ExportDialog__scales">
               <Stack.Row gap={2} align="baseline">
@@ -184,12 +177,7 @@ function ExportModal({
                 ))}
               </Stack.Row>
             </div>
-            {actionManager.renderAction(
-              "changeExportBackground",
-              elements,
-              appState,
-              syncActionResult,
-            )}
+            {actionManager.renderAction("changeExportBackground")}
             {someElementIsSelected && (
               <div>
                 <label>
@@ -215,7 +203,6 @@ export function ExportDialog({
   appState,
   exportPadding = 10,
   actionManager,
-  syncActionResult,
   onExportToPng,
   onExportToSvg,
   onExportToClipboard,
@@ -225,7 +212,6 @@ export function ExportDialog({
   elements: readonly ExcalidrawElement[];
   exportPadding?: number;
   actionManager: ActionsManagerInterface;
-  syncActionResult: UpdaterFn;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
@@ -260,7 +246,6 @@ export function ExportDialog({
             appState={appState}
             exportPadding={exportPadding}
             actionManager={actionManager}
-            syncActionResult={syncActionResult}
             onExportToPng={onExportToPng}
             onExportToSvg={onExportToSvg}
             onExportToClipboard={onExportToClipboard}