change cropElement to id to work with undo/redo

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])
     ) {

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 },
 });
 

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]);
 

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 &&
+          this.state.croppingElementId &&
-          pointerDownState.hit.element !== this.state.croppingElement
+          pointerDownState.hit.element?.id !== this.state.croppingElementId
         ) {
           this.finishImageCropping();
         }
@@ -7921,9 +7921,14 @@ class App extends React.Component<AppProps, AppState> {
           }
 
           // #region move crop region
-          const croppingElement = this.state.croppingElement;
+          if (this.state.croppingElementId) {
+            const croppingElement = this.scene
+              .getNonDeletedElementsMap()
+              .get(this.state.croppingElementId);
+
             if (
               croppingElement &&
+              isImageElement(croppingElement) &&
               croppingElement.crop !== null &&
               pointerDownState.hit.element === croppingElement
             ) {
@@ -7990,13 +7995,15 @@ class App extends React.Component<AppProps, AppState> {
                   ...crop,
                   x: clamp(
                     crop.x -
-                    instantDragOffset[0] * Math.sign(croppingElement.scale[0]),
+                      instantDragOffset[0] *
+                        Math.sign(croppingElement.scale[0]),
                     0,
                     image.naturalWidth - crop.width,
                   ),
                   y: clamp(
                     crop.y -
-                    instantDragOffset[1] * Math.sign(croppingElement.scale[1]),
+                      instantDragOffset[1] *
+                        Math.sign(croppingElement.scale[1]),
                     0,
                     image.naturalHeight - crop.height,
                   ),
@@ -8005,10 +8012,11 @@ class App extends React.Component<AppProps, AppState> {
                 mutateElement(croppingElement, {
                   crop: nextCrop,
                 });
-            }
 
                 return;
               }
+            }
+          }
 
           // Snap cache *must* be synchronously popuplated before initial drag,
           // otherwise the first drag even will not snap, causing a jump before
@@ -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) &&
+        isInitializedImageElement(croppingElement) &&
-        this.imageCache.get(element.fileId)?.image;
+        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(), {
+        updateBoundElements(
-          oldSize: { width: element.width, height: element.height },
+          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;
     }

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");
   }
 

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,
 });
 

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 = (

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:
+            padding: element.id === appState.croppingElementId ? 0 : undefined,
-              element.id === appState.croppingElement?.id ? 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,15 +1015,19 @@ const _renderInteractiveScene = ({
         );
       }
 
-      if (appState.croppingElement && !appState.isCropping) {
+      if (appState.croppingElementId && !appState.isCropping) {
+        const croppingElement = elementsMap.get(appState.croppingElementId);
+
+        if (croppingElement && isImageElement(croppingElement)) {
           renderCropHandles(
             context,
             renderConfig,
             appState,
-          appState.croppingElement,
+            croppingElement,
             elementsMap,
           );
         }
+      }
     } else if (selectedElements.length > 1 && !appState.isRotating) {
       const dashedLinePadding =
         (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;

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
         ) {

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",

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",

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",

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.croppingElementId).not.toBe(null);
-    expect(h.state.croppingElement?.id).toBe(image.id);
+    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.croppingElementId).not.toBe(null);
-    expect(h.state.croppingElement?.id).toBe(image.id);
+    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,

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[];
 }

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",