Merge 8dc7282349 into 6e5aeb112d

packages/excalidraw/components/App.tsx

@@ -4166,6 +4166,11 @@ class App extends React.Component<AppProps, AppState> {
         originSnapOffset: null,
         activeEmbeddable: null,
       } as const;
+
+      if (nextActiveTool.type === "freedraw") {
+        this.store.shouldCaptureIncrement();
+      }
+
       if (nextActiveTool.type !== "selection") {
         return {
           ...prevState,
@@ -5684,9 +5689,9 @@ class App extends React.Component<AppProps, AppState> {
           selectedElementIds: makeNextSelectedElementIds(
             Object.keys(this.state.selectedElementIds)
               .filter((key) => key !== element.id)
-              .reduce((obj: { [id: string]: true }, key) => {
-                obj[key] = this.state.selectedElementIds[key];
-                return obj;
+              .reduce((object: { [id: string]: true }, key) => {
+                object[key] = this.state.selectedElementIds[key];
+                return object;
               }, {}),
             this.state,
           ),

packages/excalidraw/store.ts

@@ -22,7 +22,7 @@ export const getObservedAppState = (appState: AppState): ObservedAppState => {
     selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
   };
 
-  Object.defineProperty(observedAppState, hiddenObservedAppStateProp, {
+  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
     value: true,
     enumerable: false,
   });
@@ -33,7 +33,7 @@ export const getObservedAppState = (appState: AppState): ObservedAppState => {
 const isObservedAppState = (
   appState: AppState | ObservedAppState,
 ): appState is ObservedAppState =>
-  Object.hasOwn(appState, hiddenObservedAppStateProp);
+  !!Reflect.get(appState, hiddenObservedAppStateProp);
 
 export type StoreActionType = "capture" | "update" | "none";
 

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -6570,12 +6570,27 @@ History {
         "delta": Delta {
           "deleted": {
             "selectedElementIds": {},
-            "selectedLinearElementId": null,
           },
           "inserted": {
             "selectedElementIds": {
               "id6": true,
             },
+          },
+        },
+      },
+      "elementsChange": ElementsChange {
+        "added": Map {},
+        "removed": Map {},
+        "updated": Map {},
+      },
+    },
+    HistoryEntry {
+      "appStateChange": AppStateChange {
+        "delta": Delta {
+          "deleted": {
+            "selectedLinearElementId": null,
+          },
+          "inserted": {
             "selectedLinearElementId": "id6",
           },
         },

packages/excalidraw/tests/history.test.tsx

@@ -15,7 +15,11 @@ import { createUndoAction, createRedoAction } from "../actions/actionHistory";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
 import { AppState, ExcalidrawImperativeAPI } from "../types";
 import { arrayToMap, resolvablePromise } from "../utils";
-import { COLOR_PALETTE } from "../colors";
+import {
+  COLOR_PALETTE,
+  DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
+  DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
+} from "../colors";
 import { KEYS } from "../keys";
 import { newElementWith } from "../element/mutateElement";
 import {
@@ -67,10 +71,11 @@ const checkpoint = (name: string) => {
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 
 const transparent = COLOR_PALETTE.transparent;
-const red = COLOR_PALETTE.red[1];
-const blue = COLOR_PALETTE.blue[1];
-const yellow = COLOR_PALETTE.yellow[1];
-const violet = COLOR_PALETTE.violet[1];
+const black = COLOR_PALETTE.black;
+const red = COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
+const blue = COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
+const yellow = COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
+const violet = COLOR_PALETTE.violet[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 
 describe("history", () => {
   beforeEach(() => {
@@ -973,6 +978,69 @@ describe("history", () => {
       ]);
     });
 
+    it("should create entry when selecting freedraw", async () => {
+      await render(<Excalidraw handleKeyboardGlobally={true} />);
+
+      UI.clickTool("rectangle");
+      mouse.down(-10, -10);
+      mouse.up(10, 10);
+
+      UI.clickTool("freedraw");
+      mouse.down(40, -20);
+      mouse.up(50, 10);
+
+      const rectangle = h.elements[0];
+      const freedraw1 = h.elements[1];
+
+      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(0);
+      expect(API.getSelectedElements().length).toBe(0);
+      expect(h.elements).toEqual([
+        expect.objectContaining({ id: rectangle.id }),
+        expect.objectContaining({ id: freedraw1.id, strokeColor: black }),
+      ]);
+
+      Keyboard.undo();
+      expect(API.getUndoStack().length).toBe(2);
+      expect(API.getRedoStack().length).toBe(1);
+      expect(API.getSelectedElements().length).toBe(0);
+      expect(h.elements).toEqual([
+        expect.objectContaining({ id: rectangle.id }),
+        expect.objectContaining({
+          id: freedraw1.id,
+          strokeColor: black,
+          isDeleted: true,
+        }),
+      ]);
+
+      togglePopover("Stroke");
+      UI.clickOnTestId("color-red");
+      mouse.down(40, -20);
+      mouse.up(50, 10);
+
+      const freedraw2 = h.elements[2];
+
+      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(0);
+      expect(h.elements).toEqual([
+        expect.objectContaining({ id: rectangle.id }),
+        expect.objectContaining({
+          id: freedraw1.id,
+          strokeColor: black,
+          isDeleted: true,
+        }),
+        expect.objectContaining({
+          id: freedraw2.id,
+          strokeColor: COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+        }),
+      ]);
+
+      // ensure we don't end up with duplicated entries
+      UI.clickTool("freedraw");
+      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(0);
+    });
+
     it("should support duplication of groups, appstate group selection and editing group", async () => {
       await render(<Excalidraw handleKeyboardGlobally={true} />);
       const rect1 = API.createElement({

packages/excalidraw/utils.ts

@@ -697,7 +697,7 @@ export const wrapEvent = <T extends Event>(name: EVENT, nativeEvent: T) => {
 };
 
 export const updateObject = <T extends Record<string, any>>(
-  obj: T,
+  object: T,
   updates: Partial<T>,
 ): T => {
   let didChange = false;
@@ -705,7 +705,7 @@ export const updateObject = <T extends Record<string, any>>(
     const value = (updates as any)[key];
     if (typeof value !== "undefined") {
       if (
-        (obj as any)[key] === value &&
+        (object as any)[key] === value &&
         // if object, always update because its attrs could have changed
         (typeof value !== "object" || value === null)
       ) {
@@ -716,11 +716,11 @@ export const updateObject = <T extends Record<string, any>>(
   }
 
   if (!didChange) {
-    return obj;
+    return object;
   }
 
   return {
-    ...obj,
+    ...object,
     ...updates,
   };
 };
@@ -795,10 +795,10 @@ export const isShallowEqual = <
         ? K extends readonly (keyof T)[]
           ? K
           : {
-              _error: "keys are either missing or include keys not in compared obj";
+      _error: "keys are either missing or include keys not in compared object";
             }
         : {
-            _error: "keys are either missing or include keys not in compared obj";
+      _error: "keys are either missing or include keys not in compared object";
           }),
   debug = false,
 ) => {
@@ -951,7 +951,8 @@ export const isMemberOf = <T extends string>(
     : collection.hasOwnProperty(value);
 };
 
-export const cloneJSON = <T>(obj: T): T => JSON.parse(JSON.stringify(obj));
+export const cloneJSON = <T>(object: T): T =>
+  JSON.parse(JSON.stringify(object));
 
 export const isFiniteNumber = (value: any): value is number => {
   return typeof value === "number" && Number.isFinite(value);