change cropElement to id to work with undo/redo

5 months ago · da0481683a
parent 58307a96dc
commit da0481683a
15 changed files with 287 additions and 265 deletions
--- a/packages/excalidraw/actions/actionCropEditor.tsx
+++ b/packages/excalidraw/actions/actionCropEditor.tsx
@ -32,7 +32,7 @@ export const actionToggleCropEditor = register({
  predicate: (elements, appState, _, app) => {
    const selectedElements = app.scene.getSelectedElements(appState);
    if (
-      !appState.croppingElement &&
+      !appState.croppingElementId &&
      selectedElements.length === 1 &&
      isImageElement(selectedElements[0])
    ) {
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@ -117,7 +117,7 @@ export const getDefaultAppState = (): Omit<
    userToFollow: null,
    followedBy: new Set(),
    isCropping: false,
-    croppingElement: null,
+    croppingElementId: null,
    searchMatches: [],
  };
 };
@ -240,7 +240,7 @@ const APP_STATE_STORAGE_CONF = (<
  userToFollow: { browser: false, export: false, server: false },
  followedBy: { browser: false, export: false, server: false },
  isCropping: { browser: false, export: false, server: false },
-  croppingElement: { browser: false, export: false, server: false },
+  croppingElementId: { browser: false, export: false, server: false },
  searchMatches: { browser: false, export: false, server: false },
 });

--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@ -129,7 +129,7 @@ export const SelectedShapeActions = ({
    !isElbowArrow(targetElements[0]);

  const showCropEditorAction =
-    !appState.croppingElement &&
+    !appState.croppingElementId &&
    targetElements.length === 1 &&
    isImageElement(targetElements[0]);

--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@ -3939,7 +3939,7 @@ class App extends React.Component<AppProps, AppState> {
      if (!isInputLike(event.target)) {
        if (
          (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
-          this.state.croppingElement
+          this.state.croppingElementId
        ) {
          this.finishImageCropping();
          return;
@ -5174,13 +5174,13 @@ class App extends React.Component<AppProps, AppState> {

  private startImageCropping = (image: ExcalidrawImageElement) => {
    this.setState({
-      croppingElement: image,
+      croppingElementId: image.id,
    });
  };

  private finishImageCropping = () => {
    this.setState({
-      croppingElement: null,
+      croppingElementId: null,
    });
  };

@ -6797,7 +6797,7 @@ class App extends React.Component<AppProps, AppState> {
            });
            pointerDownState.resize.handleType =
              elementWithTransformHandleType.transformHandleType;
-          } else if (this.state.croppingElement) {
+          } else if (this.state.croppingElementId) {
            pointerDownState.resize.handleType =
              elementWithTransformHandleType.transformHandleType;
          } else {
@ -6874,8 +6874,8 @@ class App extends React.Component<AppProps, AppState> {
          );

        if (
-          this.state.croppingElement &&
-          pointerDownState.hit.element !== this.state.croppingElement
+          this.state.croppingElementId &&
+          pointerDownState.hit.element?.id !== this.state.croppingElementId
        ) {
          this.finishImageCropping();
        }
@ -7921,93 +7921,101 @@ class App extends React.Component<AppProps, AppState> {
          }

          // #region move crop region
-          const croppingElement = this.state.croppingElement;
-          if (
-            croppingElement &&
-            croppingElement.crop !== null &&
-            pointerDownState.hit.element === croppingElement
-          ) {
-            const crop = croppingElement.crop;
-            const image =
-              isInitializedImageElement(croppingElement) &&
-              this.imageCache.get(croppingElement.fileId)?.image;
-
-            if (image && !(image instanceof Promise)) {
-              // scale the offset by at least a factor of 2 to improve ux
-              let instantDragOffset = vectorScale(
-                vector(
-                  pointerCoords.x - lastPointerCoords.x,
-                  pointerCoords.y - lastPointerCoords.y,
-                ),
-                Math.max(this.state.zoom.value, 2),
-              );
+          if (this.state.croppingElementId) {
+            const croppingElement = this.scene
+              .getNonDeletedElementsMap()
+              .get(this.state.croppingElementId);

-              if (croppingElement.angle !== 0) {
-                const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
-                  croppingElement,
-                  elementsMap,
-                );
-
-                const topLeft = vectorFromPoint(
-                  pointRotateRads(
-                    pointFrom(x1, y1),
-                    pointFrom(cx, cy),
-                    croppingElement.angle,
+            if (
+              croppingElement &&
+              isImageElement(croppingElement) &&
+              croppingElement.crop !== null &&
+              pointerDownState.hit.element === croppingElement
+            ) {
+              const crop = croppingElement.crop;
+              const image =
+                isInitializedImageElement(croppingElement) &&
+                this.imageCache.get(croppingElement.fileId)?.image;
+
+              if (image && !(image instanceof Promise)) {
+                // scale the offset by at least a factor of 2 to improve ux
+                let instantDragOffset = vectorScale(
+                  vector(
+                    pointerCoords.x - lastPointerCoords.x,
+                    pointerCoords.y - lastPointerCoords.y,
                  ),
+                  Math.max(this.state.zoom.value, 2),
                );
-                const topRight = vectorFromPoint(
-                  pointRotateRads(
-                    pointFrom(x2, y1),
-                    pointFrom(cx, cy),
-                    croppingElement.angle,
+
+                if (croppingElement.angle !== 0) {
+                  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
+                    croppingElement,
+                    elementsMap,
+                  );
+
+                  const topLeft = vectorFromPoint(
+                    pointRotateRads(
+                      pointFrom(x1, y1),
+                      pointFrom(cx, cy),
+                      croppingElement.angle,
+                    ),
+                  );
+                  const topRight = vectorFromPoint(
+                    pointRotateRads(
+                      pointFrom(x2, y1),
+                      pointFrom(cx, cy),
+                      croppingElement.angle,
+                    ),
+                  );
+                  const bottomLeft = vectorFromPoint(
+                    pointRotateRads(
+                      pointFrom(x1, y2),
+                      pointFrom(cx, cy),
+                      croppingElement.angle,
+                    ),
+                  );
+                  const topEdge = vectorNormalize(
+                    vectorSubtract(topRight, topLeft),
+                  );
+                  const leftEdge = vectorNormalize(
+                    vectorSubtract(bottomLeft, topLeft),
+                  );
+
+                  /**
+                   * project instantDrafOffset onto leftEdge and topEdge to decompose
+                   */
+
+                  instantDragOffset = vector(
+                    vectorDot(instantDragOffset, topEdge),
+                    vectorDot(instantDragOffset, leftEdge),
+                  );
+                }
+
+                const nextCrop = {
+                  ...crop,
+                  x: clamp(
+                    crop.x -
+                      instantDragOffset[0] *
+                        Math.sign(croppingElement.scale[0]),
+                    0,
+                    image.naturalWidth - crop.width,
                  ),
-                );
-                const bottomLeft = vectorFromPoint(
-                  pointRotateRads(
-                    pointFrom(x1, y2),
-                    pointFrom(cx, cy),
-                    croppingElement.angle,
+                  y: clamp(
+                    crop.y -
+                      instantDragOffset[1] *
+                        Math.sign(croppingElement.scale[1]),
+                    0,
+                    image.naturalHeight - crop.height,
                  ),
-                );
-                const topEdge = vectorNormalize(
-                  vectorSubtract(topRight, topLeft),
-                );
-                const leftEdge = vectorNormalize(
-                  vectorSubtract(bottomLeft, topLeft),
-                );
+                };

-                /**
-                 * project instantDrafOffset onto leftEdge and topEdge to decompose
-                 */
+                mutateElement(croppingElement, {
+                  crop: nextCrop,
+                });

-                instantDragOffset = vector(
-                  vectorDot(instantDragOffset, topEdge),
-                  vectorDot(instantDragOffset, leftEdge),
-                );
+                return;
              }
-
-              const nextCrop = {
-                ...crop,
-                x: clamp(
-                  crop.x -
-                    instantDragOffset[0] * Math.sign(croppingElement.scale[0]),
-                  0,
-                  image.naturalWidth - crop.width,
-                ),
-                y: clamp(
-                  crop.y -
-                    instantDragOffset[1] * Math.sign(croppingElement.scale[1]),
-                  0,
-                  image.naturalHeight - crop.height,
-                ),
-              };
-
-              mutateElement(croppingElement, {
-                crop: nextCrop,
-              });
            }
-
-            return;
          }

          // Snap cache *must* be synchronously popuplated before initial drag,
@ -8392,7 +8400,7 @@ class App extends React.Component<AppProps, AppState> {
      const {
        newElement,
        resizingElement,
-        croppingElement,
+        croppingElementId,
        multiElement,
        activeTool,
        isResizing,
@ -8897,16 +8905,16 @@ class App extends React.Component<AppProps, AppState> {
        }
      }

-      // click outside the cropping region to exit o0ol
+      // click outside the cropping region to exit
      if (
        // not in the cropping mode at all
-        !croppingElement ||
+        !croppingElementId ||
        // in the cropping mode
-        (croppingElement &&
+        (croppingElementId &&
          // not cropping and no hit element
          ((!hitElement && !isCropping) ||
            // hitting something else
-            (hitElement && hitElement !== croppingElement)))
+            (hitElement && hitElement.id !== croppingElementId)))
      ) {
        this.finishImageCropping();
      }
@ -10136,7 +10144,7 @@ class App extends React.Component<AppProps, AppState> {
    event: MouseEvent | KeyboardEvent,
  ): boolean => {
    // to crop, we must already be in the cropping mode, where croppingElement has been set
-    if (!this.state.croppingElement) {
+    if (!this.state.croppingElementId) {
      return false;
    }

@ -10148,18 +10156,24 @@ class App extends React.Component<AppProps, AppState> {
      this.getEffectiveGridSize(),
    );

-    const element = this.state.croppingElement;
+    const croppingElement = this.scene
+      .getNonDeletedElementsMap()
+      .get(this.state.croppingElementId);

-    if (transformHandleType) {
+    if (
+      transformHandleType &&
+      croppingElement &&
+      isImageElement(croppingElement)
+    ) {
      const image =
-        isInitializedImageElement(element) &&
-        this.imageCache.get(element.fileId)?.image;
+        isInitializedImageElement(croppingElement) &&
+        this.imageCache.get(croppingElement.fileId)?.image;

      if (image && !(image instanceof Promise)) {
        mutateElement(
-          element,
+          croppingElement,
          cropElement(
-            element,
+            croppingElement,
            transformHandleType,
            image.naturalWidth,
            image.naturalHeight,
@ -10168,9 +10182,16 @@ class App extends React.Component<AppProps, AppState> {
          ),
        );

-        updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
-          oldSize: { width: element.width, height: element.height },
-        });
+        updateBoundElements(
+          croppingElement,
+          this.scene.getNonDeletedElementsMap(),
+          {
+            oldSize: {
+              width: croppingElement.width,
+              height: croppingElement.height,
+            },
+          },
+        );

        this.setState({
          isCropping: transformHandleType && transformHandleType !== "rotation",
@ -10201,7 +10222,7 @@ class App extends React.Component<AppProps, AppState> {
      // Elbow arrows cannot be transformed (resized or rotated).
      (selectedElements.length === 1 && isElbowArrow(selectedElements[0])) ||
      // Do not resize when in crop mode
-      this.state.croppingElement
+      this.state.croppingElementId
    ) {
      return false;
    }
--- a/packages/excalidraw/components/HintViewer.tsx
+++ b/packages/excalidraw/components/HintViewer.tsx
@ -100,7 +100,7 @@ const getHints = ({
    return t("hints.text_editing");
  }

-  if (appState.croppingElement) {
+  if (appState.croppingElementId) {
    return t("hints.leaveCropEditor");
  }

--- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
+++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
@ -204,7 +204,7 @@ const getRelevantAppStateProps = (
  zenModeEnabled: appState.zenModeEnabled,
  editingTextElement: appState.editingTextElement,
  isCropping: appState.isCropping,
-  croppingElement: appState.croppingElement,
+  croppingElementId: appState.croppingElementId,
  searchMatches: appState.searchMatches,
 });

--- a/packages/excalidraw/components/canvases/StaticCanvas.tsx
+++ b/packages/excalidraw/components/canvases/StaticCanvas.tsx
@ -107,7 +107,7 @@ const getRelevantAppStateProps = (
  frameToHighlight: appState.frameToHighlight,
  editingGroupId: appState.editingGroupId,
  currentHoveredFontFamily: appState.currentHoveredFontFamily,
-  croppingElement: appState.croppingElement,
+  croppingElementId: appState.croppingElementId,
 });

 const areEqual = (
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@ -54,6 +54,7 @@ import oc from "open-color";
 import {
  isElbowArrow,
  isFrameLikeElement,
+  isImageElement,
  isLinearElement,
  isTextElement,
 } from "../element/typeChecks";
@ -949,8 +950,7 @@ const _renderInteractiveScene = ({
            activeEmbeddable:
              appState.activeEmbeddable?.element === element &&
              appState.activeEmbeddable.state === "active",
-            padding:
-              element.id === appState.croppingElement?.id ? 0 : undefined,
+            padding: element.id === appState.croppingElementId ? 0 : undefined,
          });
        }
      }
@ -1004,7 +1004,7 @@ const _renderInteractiveScene = ({
        // do not show transform handles when text is being edited
        !isTextElement(appState.editingTextElement) &&
        // do not show transform handles when image is being cropped
-        !appState.croppingElement
+        !appState.croppingElementId
      ) {
        renderTransformHandles(
          context,
@ -1015,14 +1015,18 @@ const _renderInteractiveScene = ({
        );
      }

-      if (appState.croppingElement && !appState.isCropping) {
-        renderCropHandles(
-          context,
-          renderConfig,
-          appState,
-          appState.croppingElement,
-          elementsMap,
-        );
+      if (appState.croppingElementId && !appState.isCropping) {
+        const croppingElement = elementsMap.get(appState.croppingElementId);
+
+        if (croppingElement && isImageElement(croppingElement)) {
+          renderCropHandles(
+            context,
+            renderConfig,
+            appState,
+            croppingElement,
+            elementsMap,
+          );
+        }
      }
    } else if (selectedElements.length > 1 && !appState.isRotating) {
      const dashedLinePadding =
--- a/packages/excalidraw/renderer/renderElement.ts
+++ b/packages/excalidraw/renderer/renderElement.ts
@ -440,9 +440,6 @@ const drawElementOnCanvas = (
        // TODO: check why only croppingElement has the latest update
        const { x, y, width, height } = element.crop
          ? element.crop
-          : element === appState.croppingElement &&
-            appState.croppingElement.crop
-          ? appState.croppingElement.crop
          : {
              x: 0,
              y: 0,
@ -942,7 +939,7 @@ export const renderElement = (
        }

        if (
-          element.id === appState.croppingElement?.id &&
+          element.id === appState.croppingElementId &&
          isImageElement(elementWithCanvas.element) &&
          elementWithCanvas.element.crop !== null
        ) {
--- a/packages/excalidraw/tests/snapshots/contextmenu.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/contextmenu.test.tsx.snap
@ -839,7 +839,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
    "left": 30,
    "top": 40,
  },
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1047,7 +1047,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1265,7 +1265,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1598,7 +1598,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1931,7 +1931,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2149,7 +2149,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2391,7 +2391,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2694,7 +2694,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3065,7 +3065,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3542,7 +3542,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3867,7 +3867,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4192,7 +4192,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5425,7 +5425,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
    "left": -17,
    "top": -7,
  },
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -6599,7 +6599,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
    "left": -17,
    "top": -7,
  },
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7536,7 +7536,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
    "left": -19,
    "top": -9,
  },
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8495,7 +8495,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
    "left": -17,
    "top": -7,
  },
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9436,7 +9436,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
    "left": 80,
    "top": 90,
  },
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
--- a/packages/excalidraw/tests/snapshots/history.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/history.test.tsx.snap
@ -11,7 +11,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -615,7 +615,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1123,7 +1123,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1493,7 +1493,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1864,7 +1864,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2133,7 +2133,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2575,7 +2575,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2876,7 +2876,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3162,7 +3162,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3458,7 +3458,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3746,7 +3746,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3983,7 +3983,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4244,7 +4244,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4519,7 +4519,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4752,7 +4752,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4985,7 +4985,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5216,7 +5216,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5447,7 +5447,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5708,7 +5708,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -6041,7 +6041,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -6468,7 +6468,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -6848,7 +6848,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7169,7 +7169,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7469,7 +7469,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7700,7 +7700,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8057,7 +8057,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8414,7 +8414,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8820,7 +8820,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9109,7 +9109,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9376,7 +9376,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9642,7 +9642,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9875,7 +9875,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -10178,7 +10178,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -10520,7 +10520,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -10757,7 +10757,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11212,7 +11212,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11468,7 +11468,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11709,7 +11709,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11952,7 +11952,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -12355,7 +12355,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -12604,7 +12604,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -12847,7 +12847,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -13090,7 +13090,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -13339,7 +13339,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -13673,7 +13673,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -13847,7 +13847,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -14137,7 +14137,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -14406,7 +14406,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -14683,7 +14683,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -14846,7 +14846,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -15544,7 +15544,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -16166,7 +16166,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -16788,7 +16788,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -17502,7 +17502,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -18254,7 +18254,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -18730,7 +18730,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -19254,7 +19254,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -19712,7 +19712,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
--- a/packages/excalidraw/tests/snapshots/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/regressionTests.test.tsx.snap
@ -11,7 +11,7 @@ exports[`given element A and group of elements B and given both are selected whe
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -425,7 +425,7 @@ exports[`given element A and group of elements B and given both are selected whe
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -830,7 +830,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1374,7 +1374,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1577,7 +1577,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -1951,7 +1951,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2190,7 +2190,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2369,7 +2369,7 @@ exports[`regression tests > can drag element that covers another element, while
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2688,7 +2688,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -2933,7 +2933,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3175,7 +3175,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3404,7 +3404,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3659,7 +3659,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -3969,7 +3969,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4382,7 +4382,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4664,7 +4664,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -4916,7 +4916,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5125,7 +5125,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5323,7 +5323,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5704,7 +5704,7 @@ exports[`regression tests > drags selected elements from point inside common bou
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -5993,7 +5993,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -6800,7 +6800,7 @@ exports[`regression tests > given a group of selected elements with an element t
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7129,7 +7129,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7404,7 +7404,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7637,7 +7637,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -7873,7 +7873,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8052,7 +8052,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8231,7 +8231,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8410,7 +8410,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8632,7 +8632,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -8853,7 +8853,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9046,7 +9046,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9268,7 +9268,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9447,7 +9447,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9668,7 +9668,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -9847,7 +9847,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -10040,7 +10040,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -10219,7 +10219,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -10732,7 +10732,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11008,7 +11008,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11133,7 +11133,7 @@ exports[`regression tests > shift click on selected element should deselect it o
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11331,7 +11331,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -11641,7 +11641,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -12052,7 +12052,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -12664,7 +12664,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -12792,7 +12792,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -13375,7 +13375,7 @@ exports[`regression tests > switches from group of selected elements to another
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -13712,7 +13712,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -13976,7 +13976,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -14101,7 +14101,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -14479,7 +14479,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
@ -14604,7 +14604,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",
--- a/packages/excalidraw/tests/cropElement.test.tsx
+++ b/packages/excalidraw/tests/cropElement.test.tsx
@ -75,36 +75,36 @@ const compareCrops = (cropA: ImageCrop, cropB: ImageCrop) => {
 describe("Enter and leave the crop editor", () => {
  it("enter the editor by double clicking", () => {
    const image = h.elements[0];
-    expect(h.state.croppingElement).toBe(null);
+    expect(h.state.croppingElementId).toBe(null);
    mouse.doubleClickOn(image);
-    expect(h.state.croppingElement).not.toBe(null);
-    expect(h.state.croppingElement?.id).toBe(image.id);
+    expect(h.state.croppingElementId).not.toBe(null);
+    expect(h.state.croppingElementId).toBe(image.id);
  });

  it("enter the editor by pressing enter", () => {
    const image = h.elements[0];
-    expect(h.state.croppingElement).toBe(null);
+    expect(h.state.croppingElementId).toBe(null);
    Keyboard.keyDown(KEYS.ENTER);
-    expect(h.state.croppingElement).not.toBe(null);
-    expect(h.state.croppingElement?.id).toBe(image.id);
+    expect(h.state.croppingElementId).not.toBe(null);
+    expect(h.state.croppingElementId).toBe(image.id);
  });

  it("leave the editor by clicking outside", () => {
    const image = h.elements[0];
    Keyboard.keyDown(KEYS.ENTER);
-    expect(h.state.croppingElement).not.toBe(null);
+    expect(h.state.croppingElementId).not.toBe(null);

    mouse.click(image.x - 20, image.y - 20);
-    expect(h.state.croppingElement).toBe(null);
+    expect(h.state.croppingElementId).toBe(null);
  });

  it("leave the editor by pressing escape", () => {
    const image = h.elements[0];
    mouse.doubleClickOn(image);
-    expect(h.state.croppingElement).not.toBe(null);
+    expect(h.state.croppingElementId).not.toBe(null);

    Keyboard.keyDown(KEYS.ESCAPE);
-    expect(h.state.croppingElement).toBe(null);
+    expect(h.state.croppingElementId).toBe(null);
  });
 });

@ -222,7 +222,7 @@ describe("Cropping and other features", async () => {
      generateRandomNaturalWidthAndHeight(image);

    mouse.doubleClickOn(image);
-    expect(h.state.croppingElement).not.toBe(null);
+    expect(h.state.croppingElementId).not.toBe(null);
    UI.crop(image, "nw", naturalWidth, naturalHeight, [
      initialWidth / 2,
      initialHeight / 2,
@ -249,7 +249,7 @@ describe("Cropping and other features", async () => {
      generateRandomNaturalWidthAndHeight(image);

    mouse.doubleClickOn(image);
-    expect(h.state.croppingElement).not.toBe(null);
+    expect(h.state.croppingElementId).not.toBe(null);
    UI.crop(image, "nw", naturalWidth, naturalHeight, [
      initialWidth / 2,
      initialHeight / 4,
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@ -177,7 +177,7 @@ export type StaticCanvasAppState = Readonly<
    frameRendering: AppState["frameRendering"];
    currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
    // Cropping
-    croppingElement: AppState["croppingElement"];
+    croppingElementId: AppState["croppingElementId"];
  }
 >;

@ -202,7 +202,7 @@ export type InteractiveCanvasAppState = Readonly<
    editingTextElement: AppState["editingTextElement"];
    // Cropping
    isCropping: AppState["isCropping"];
-    croppingElement: AppState["croppingElement"];
+    croppingElementId: AppState["croppingElementId"];
    // Search matches
    searchMatches: AppState["searchMatches"];
  }
@ -394,7 +394,7 @@ export interface AppState {

  /** image cropping */
  isCropping: boolean;
-  croppingElement: ExcalidrawImageElement | null;
+  croppingElementId: ExcalidrawElement["id"] | null;

  searchMatches: readonly SearchMatch[];
 }
--- a/packages/utils/snapshots/export.test.ts.snap
+++ b/packages/utils/snapshots/export.test.ts.snap
@ -11,7 +11,7 @@ exports[`exportToSvg > with default arguments 1`] = `
  },
  "collaborators": Map {},
  "contextMenu": null,
-  "croppingElement": null,
+  "croppingElementId": null,
  "currentChartType": "bar",
  "currentHoveredFontFamily": null,
  "currentItemArrowType": "round",