Merge 66bb643019 into 6e5aeb112d

Fixes #7403.

.dockerignore

@@ -4,8 +4,15 @@
 !.eslintrc.json
 !.npmrc
 !.prettierrc
+!excalidraw-app/
 !package.json
 !public/
 !packages/
 !tsconfig.json
 !yarn.lock
+
+# keep (sub)sub directories at the end to exclude from explicit included
+# e.g. ./packages/excalidraw/{dist,node_modules}
+**/build
+**/dist
+**/node_modules

Dockerfile

@@ -2,16 +2,18 @@ FROM node:18 AS build
 
 WORKDIR /opt/node_app
 
-COPY package.json yarn.lock ./
+COPY . .
-RUN yarn --ignore-optional --network-timeout 600000
+
+# do not ignore optional dependencies:
+# Error: Cannot find module @rollup/rollup-linux-x64-gnu
+RUN yarn --network-timeout 600000
 
 ARG NODE_ENV=production
 
-COPY . .
 RUN yarn build:app:docker
 
-FROM nginx:1.21-alpine
+FROM nginx:1.24-alpine
 
-COPY --from=build /opt/node_app/build /usr/share/nginx/html
+COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
 
 HEALTHCHECK CMD wget -q -O /dev/null http://localhost || exit 1

package.json

@@ -60,9 +60,9 @@
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
+    "build:app:docker": "yarn --cwd ./excalidraw-app build:app:docker",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
+    "build:app": "yarn --cwd ./excalidraw-app build:app",
-    "build:version": "node ./scripts/build-version.js",
+    "build:version": "yarn --cwd ./excalidraw-app build:version",
     "build": "yarn --cwd ./excalidraw-app build",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",

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,

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 black = COLOR_PALETTE.black;
-const blue = COLOR_PALETTE.blue[1];
+const red = COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
-const yellow = COLOR_PALETTE.yellow[1];
+const blue = COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
-const violet = COLOR_PALETTE.violet[1];
+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({