Fix many syncing issues (#952)

src/actions/actionCanvas.tsx

@@ -9,6 +9,7 @@ import { KEYS } from "../keys";
 import { getShortcutKey } from "../utils";
 import useIsMobile from "../is-mobile";
 import { register } from "./register";
+import { newElementWith } from "../element/mutateElement";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -33,9 +34,11 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
   name: "clearCanvas",
   commitToHistory: () => true,
-  perform: () => {
+  perform: elements => {
     return {
-      elements: [],
+      elements: elements.map(element =>
+        newElementWith(element, { isDeleted: true }),
+      ),
       appState: getDefaultAppState(),
     };
   },

src/actions/actionHistory.tsx

@@ -7,8 +7,11 @@ import { SceneHistory } from "../history";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { KEYS } from "../keys";
+import { getElementMap } from "../element";
+import { newElementWith } from "../element/mutateElement";
 
 const writeData = (
+  prevElements: readonly ExcalidrawElement[],
   appState: AppState,
   updater: () => { elements: ExcalidrawElement[]; appState: AppState } | null,
 ) => {
@@ -19,13 +22,32 @@ const writeData = (
     !appState.draggingElement
   ) {
     const data = updater();
+    if (data === null) {
+      return {};
+    }
 
-    return data === null
-      ? {}
-      : {
-          elements: data.elements,
-          appState: { ...appState, ...data.appState },
-        };
+    const prevElementMap = getElementMap(prevElements);
+    const nextElements = data.elements;
+    const nextElementMap = getElementMap(nextElements);
+    return {
+      elements: nextElements
+        .map(nextElement =>
+          newElementWith(
+            prevElementMap[nextElement.id] || nextElement,
+            nextElement,
+          ),
+        )
+        .concat(
+          prevElements
+            .filter(
+              prevElement => !nextElementMap.hasOwnProperty(prevElement.id),
+            )
+            .map(prevElement =>
+              newElementWith(prevElement, { isDeleted: true }),
+            ),
+        ),
+      appState: { ...appState, ...data.appState },
+    };
   }
   return {};
 };
@@ -37,7 +59,8 @@ type ActionCreator = (history: SceneHistory) => Action;
 
 export const createUndoAction: ActionCreator = history => ({
   name: "undo",
-  perform: (_, appState) => writeData(appState, () => history.undoOnce()),
+  perform: (elements, appState) =>
+    writeData(elements, appState, () => history.undoOnce()),
   keyTest: testUndo(false),
   PanelComponent: ({ updateData }) => (
     <ToolButton
@@ -52,7 +75,8 @@ export const createUndoAction: ActionCreator = history => ({
 
 export const createRedoAction: ActionCreator = history => ({
   name: "redo",
-  perform: (_, appState) => writeData(appState, () => history.redoOnce()),
+  perform: (elements, appState) =>
+    writeData(elements, appState, () => history.redoOnce()),
   keyTest: testUndo(true),
   PanelComponent: ({ updateData }) => (
     <ToolButton