Merge pull request #11 from alkem-io/export-reconcile

Export reconcile

excalidraw-app/App.tsx

@@ -26,7 +26,9 @@ import {
   LiveCollaborationTrigger,
   TTDDialog,
   TTDDialogTrigger,
-} from "../packages/excalidraw/index";
+  StoreAction,
+  reconcileElements,
+} from "../packages/excalidraw";
 import {
   AppState,
   ExcalidrawImperativeAPI,
@@ -106,10 +108,7 @@ import { OverwriteConfirmDialog } from "../packages/excalidraw/components/Overwr
 import Trans from "../packages/excalidraw/components/Trans";
 import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
 import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
-import {
-  RemoteExcalidrawElement,
-  reconcileElements,
-} from "../packages/excalidraw/data/reconcile";
+import type { RemoteExcalidrawElement } from "../packages/excalidraw/data/reconcile";
 import {
   CommandPalette,
   DEFAULT_CATEGORIES,
@@ -438,7 +437,7 @@ const ExcalidrawWrapper = () => {
             excalidrawAPI.updateScene({
               ...data.scene,
               ...restore(data.scene, null, null, { repairBindings: true }),
-              commitToStore: true,
+              storeAction: StoreAction.CAPTURE,
             });
           }
         });
@@ -469,6 +468,7 @@ const ExcalidrawWrapper = () => {
           setLangCode(langCode);
           excalidrawAPI.updateScene({
             ...localDataState,
+            storeAction: StoreAction.UPDATE,
           });
           LibraryIndexedDBAdapter.load().then((data) => {
             if (data) {
@@ -604,6 +604,7 @@ const ExcalidrawWrapper = () => {
           if (didChange) {
             excalidrawAPI.updateScene({
               elements,
+              storeAction: StoreAction.UPDATE,
             });
           }
         }

excalidraw-app/collab/Collab.tsx

@@ -13,10 +13,12 @@ import {
   OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
 import {
+  StoreAction,
   getSceneVersion,
   restoreElements,
   zoomToFitBounds,
-} from "../../packages/excalidraw/index";
+  reconcileElements,
+} from "../../packages/excalidraw";
 import { Collaborator, Gesture } from "../../packages/excalidraw/types";
 import {
   assertNever,
@@ -79,10 +81,9 @@ import { Mutable, ValueOf } from "../../packages/excalidraw/utility-types";
 import { getVisibleSceneBounds } from "../../packages/excalidraw/element/bounds";
 import { withBatchedUpdates } from "../../packages/excalidraw/reactUtils";
 import { collabErrorIndicatorAtom } from "./CollabError";
-import {
+import type {
   ReconciledExcalidrawElement,
   RemoteExcalidrawElement,
-  reconcileElements,
 } from "../../packages/excalidraw/data/reconcile";
 
 export const collabAPIAtom = atom<CollabAPI | null>(null);
@@ -356,6 +357,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
       this.excalidrawAPI.updateScene({
         elements,
+        storeAction: StoreAction.UPDATE,
       });
     }
   };
@@ -506,6 +508,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       // to database even if deleted before creating the room.
       this.excalidrawAPI.updateScene({
         elements,
+        storeAction: StoreAction.UPDATE,
       });
 
       this.saveCollabRoomToFirebase(getSyncableElements(elements));
@@ -743,6 +746,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   ) => {
     this.excalidrawAPI.updateScene({
       elements,
+      storeAction: StoreAction.UPDATE,
     });
 
     this.loadImageFiles();

excalidraw-app/collab/Portal.tsx

@@ -19,6 +19,7 @@ import throttle from "lodash.throttle";
 import { newElementWith } from "../../packages/excalidraw/element/mutateElement";
 import { encryptData } from "../../packages/excalidraw/data/encryption";
 import type { Socket } from "socket.io-client";
+import { StoreAction } from "../../packages/excalidraw";
 
 class Portal {
   collab: TCollabClass;
@@ -127,6 +128,7 @@ class Portal {
           }
           return element;
         }),
+      storeAction: StoreAction.UPDATE,
     });
   }, FILE_UPLOAD_TIMEOUT);
 

excalidraw-app/data/FileManager.ts

@@ -1,3 +1,4 @@
+import { StoreAction } from "../../packages/excalidraw";
 import { compressData } from "../../packages/excalidraw/data/encode";
 import { newElementWith } from "../../packages/excalidraw/element/mutateElement";
 import { isInitializedImageElement } from "../../packages/excalidraw/element/typeChecks";
@@ -238,5 +239,6 @@ export const updateStaleImageStatuses = (params: {
         }
         return element;
       }),
+    storeAction: StoreAction.UPDATE,
   });
 };

excalidraw-app/data/firebase.ts

@@ -1,3 +1,4 @@
+import { reconcileElements } from "../../packages/excalidraw";
 import {
   ExcalidrawElement,
   FileId,
@@ -22,10 +23,7 @@ import { MIME_TYPES } from "../../packages/excalidraw/constants";
 import { getSyncableElements, SyncableExcalidrawElement } from ".";
 import { ResolutionType } from "../../packages/excalidraw/utility-types";
 import type { Socket } from "socket.io-client";
-import {
-  RemoteExcalidrawElement,
-  reconcileElements,
-} from "../../packages/excalidraw/data/reconcile";
+import type { RemoteExcalidrawElement } from "../../packages/excalidraw/data/reconcile";
 
 // private
 // -----------------------------------------------------------------------------

excalidraw-app/data/index.ts

@@ -269,7 +269,6 @@ export const loadScene = async (
     // in the scene database/localStorage, and instead fetch them async
     // from a different database
     files: data.files,
-    commitToStore: false,
   };
 };
 

excalidraw-app/tests/collab.test.tsx

@@ -12,7 +12,7 @@ import {
   createRedoAction,
   createUndoAction,
 } from "../../packages/excalidraw/actions/actionHistory";
-import { newElementWith } from "../../packages/excalidraw";
+import { StoreAction, newElementWith } from "../../packages/excalidraw";
 
 const { h } = window;
 
@@ -90,15 +90,15 @@ describe("collaboration", () => {
 
     updateSceneData({
       elements: syncInvalidIndices([rect1, rect2]),
-      commitToStore: true,
+      storeAction: StoreAction.CAPTURE,
     });
 
     updateSceneData({
       elements: syncInvalidIndices([
         rect1,
         newElementWith(h.elements[1], { isDeleted: true }),
       ]),
-      commitToStore: true,
+      storeAction: StoreAction.CAPTURE,
     });
 
     await waitFor(() => {
@@ -145,6 +145,7 @@ describe("collaboration", () => {
     // simulate force deleting the element remotely
     updateSceneData({
       elements: syncInvalidIndices([rect1]),
+      storeAction: StoreAction.UPDATE,
     });
 
     await waitFor(() => {
@@ -182,7 +183,7 @@ describe("collaboration", () => {
         h.elements[0],
         newElementWith(h.elements[1], { x: 100 }),
       ]),
-      commitToStore: true,
+      storeAction: StoreAction.CAPTURE,
     });
 
     await waitFor(() => {
@@ -217,6 +218,7 @@ describe("collaboration", () => {
     // simulate force deleting the element remotely
     updateSceneData({
       elements: syncInvalidIndices([rect1]),
+      storeAction: StoreAction.UPDATE,
     });
 
     // snapshot was correctly updated and marked the element as deleted

packages/excalidraw/CHANGELOG.md

@@ -35,9 +35,13 @@ Please add the latest change on the top under the correct section.
 
 ### Breaking Changes
 
-- Renamed required `updatedScene` parameter from `commitToHistory` into `commitToStore` [#7348](https://github.com/excalidraw/excalidraw/pull/7348).
+- `updateScene` API has changed due to the added `Store` component as part of the multiplayer undo / redo initiative. Specifically, `sceneData` property `commitToHistory: boolean` was replaced with `storeAction: StoreActionType`. Make sure to update all instances of `updateScene` according to the _before / after_ table below. [#7898](https://github.com/excalidraw/excalidraw/pull/7898)
 
-### Breaking Changes
+|  | Before `commitToHistory` | After `storeAction` | Notes |
+| --- | --- | --- | --- |
+| _Immediately undoable_ | `true` | `"capture"` | As before, use for all updates which should be recorded by the store & history. Should be used for the most of the local updates. These updates will _immediately_ make it to the local undo / redo stacks. |
+| _Eventually undoable_ | `false` | `"none"` | Similar to before, use for all updates which should not be recorded immediately (likely exceptions which are part of some async multi-step process) or those not meant to be recorded at all (i.e. updates to `collaborators` object, parts of `AppState` which are not observed by the store & history - not `ObservedAppState`).<br/><br/>**IMPORTANT** It's likely you should switch to `"update"` in all the other cases. Otherwise, all such updates would end up being recorded with the next `"capture"` - triggered either by the next `updateScene` or internally by the editor. These updates will _eventually_ make it to the local undo / redo stacks. |
+| _Never undoable_ | n/a | `"update"` | **NEW**: previously there was no equivalent for this value. Now, it's recommended to use `"update"` for all remote updates (from the other clients), scene initialization, or those updates, which should not be locally "undoable". These updates will _never_ make it to the local undo / redo stacks. |
 
 - `ExcalidrawEmbeddableElement.validated` was removed and moved to private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)
 

packages/excalidraw/actions/actionHistory.tsx

@@ -8,7 +8,7 @@ import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
 import { SceneElementsMap } from "../element/types";
-import { IStore, StoreAction } from "../store";
+import { Store, StoreAction } from "../store";
 import { useEmitter } from "../hooks/useEmitter";
 
 const writeData = (
@@ -40,7 +40,7 @@ const writeData = (
   return { storeAction: StoreAction.NONE };
 };
 
-type ActionCreator = (history: History, store: IStore) => Action;
+type ActionCreator = (history: History, store: Store) => Action;
 
 export const createUndoAction: ActionCreator = (history, store) => ({
   name: "undo",

packages/excalidraw/actions/types.ts

@@ -8,7 +8,7 @@ import {
   UIAppState,
 } from "../types";
 import { MarkOptional } from "../utility-types";
-import { StoreAction } from "../store";
+import { StoreActionType } from "../store";
 
 export type ActionSource =
   | "ui"
@@ -26,7 +26,7 @@ export type ActionResult =
         "offsetTop" | "offsetLeft" | "width" | "height"
       > | null;
       files?: BinaryFiles | null;
-      storeAction: keyof typeof StoreAction;
+      storeAction: StoreActionType;
       replaceFiles?: boolean;
     }
   | false;