fix: youtube embed timestamp parsing

packages/excalidraw/actions/actionCropEditor.tsx

@@ -1,55 +0,0 @@
-import { register } from "./register";
-import { cropIcon } from "../components/icons";
-import { StoreAction } from "../store";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import { isImageElement } from "../element/typeChecks";
-import type { ExcalidrawImageElement } from "../element/types";
-
-export const actionToggleCropEditor = register({
-  name: "cropEditor",
-  label: "helpDialog.cropStart",
-  icon: cropIcon,
-  viewMode: true,
-  trackEvent: { category: "menu" },
-  keywords: ["image", "crop"],
-  perform(elements, appState, _, app) {
-    const selectedElement = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-    })[0] as ExcalidrawImageElement;
-
-    return {
-      appState: {
-        ...appState,
-        isCropping: false,
-        croppingElementId: selectedElement.id,
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    if (
-      !appState.croppingElementId &&
-      selectedElements.length === 1 &&
-      isImageElement(selectedElements[0])
-    ) {
-      return true;
-    }
-    return false;
-  },
-  PanelComponent: ({ appState, updateData, app }) => {
-    const label = t("helpDialog.cropStart");
-
-    return (
-      <ToolButton
-        type="button"
-        icon={cropIcon}
-        title={label}
-        aria-label={label}
-        onClick={() => updateData(null)}
-      />
-    );
-  },
-});

packages/excalidraw/actions/index.ts

@@ -88,5 +88,3 @@ export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
 
 export { actionToggleSearchMenu } from "./actionToggleSearchMenu";
-
-export { actionToggleCropEditor } from "./actionCropEditor";

packages/excalidraw/actions/types.ts

@@ -138,8 +138,7 @@ export type ActionName =
   | "commandPalette"
   | "autoResize"
   | "elementStats"
-  | "searchMenu"
+  | "searchMenu";
-  | "cropEditor";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

packages/excalidraw/appState.ts

@@ -116,8 +116,6 @@ export const getDefaultAppState = (): Omit<
     objectsSnapModeEnabled: false,
     userToFollow: null,
     followedBy: new Set(),
-    isCropping: false,
-    croppingElementId: null,
     searchMatches: [],
   };
 };
@@ -239,8 +237,6 @@ const APP_STATE_STORAGE_CONF = (<
   objectsSnapModeEnabled: { browser: true, export: false, server: false },
   userToFollow: { browser: false, export: false, server: false },
   followedBy: { browser: false, export: false, server: false },
-  isCropping: { browser: false, export: false, server: false },
-  croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },
 });
 

packages/excalidraw/change.ts

@@ -17,16 +17,13 @@ import {
   hasBoundTextElement,
   isBindableElement,
   isBoundToContainer,
-  isImageElement,
   isTextElement,
 } from "./element/typeChecks";
 import type {
   ExcalidrawElement,
-  ExcalidrawImageElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
   NonDeleted,
-  Ordered,
   OrderedExcalidrawElement,
   SceneElementsMap,
 } from "./element/types";
@@ -629,18 +626,6 @@ export class AppStateChange implements Change<AppState> {
             );
 
             break;
-          case "croppingElementId": {
-            const croppingElementId = nextAppState[key];
-            const element =
-              croppingElementId && nextElements.get(croppingElementId);
-
-            if (element && !element.isDeleted) {
-              visibleDifferenceFlag.value = true;
-            } else {
-              nextAppState[key] = null;
-            }
-            break;
-          }
           case "editingGroupId":
             const editingGroupId = nextAppState[key];
 
@@ -771,7 +756,6 @@ export class AppStateChange implements Change<AppState> {
       selectedElementIds,
       editingLinearElementId,
       selectedLinearElementId,
-      croppingElementId,
       ...standaloneProps
     } = delta as ObservedAppState;
 
@@ -795,10 +779,7 @@ export class AppStateChange implements Change<AppState> {
   }
 }
 
-type ElementPartial<T extends ExcalidrawElement = ExcalidrawElement> = Omit<
+type ElementPartial = Omit<ElementUpdate<OrderedExcalidrawElement>, "seed">;
-  ElementUpdate<Ordered<T>>,
-  "seed"
->;
 
 /**
  * Elements change is a low level primitive to capture a change between two sets of elements.
@@ -1235,18 +1216,6 @@ export class ElementsChange implements Change<SceneElementsMap> {
       });
     }
 
-    if (isImageElement(element)) {
-      const _delta = delta as Delta<ElementPartial<ExcalidrawImageElement>>;
-      // we want to override `crop` only if modified so that we don't reset
-      // when undoing/redoing unrelated change
-      if (_delta.deleted.crop || _delta.inserted.crop) {
-        Object.assign(directlyApplicablePartial, {
-          // apply change verbatim
-          crop: _delta.inserted.crop ?? null,
-        });
-      }
-    }
-
     if (!flags.containsVisibleDifference) {
       // strip away fractional as even if it would be different, it doesn't have to result in visible change
       const { index, ...rest } = directlyApplicablePartial;

packages/excalidraw/components/Actions.tsx

@@ -26,7 +26,6 @@ import { trackEvent } from "../analytics";
 import {
   hasBoundTextElement,
   isElbowArrow,
-  isImageElement,
   isLinearElement,
   isTextElement,
 } from "../element/typeChecks";
@@ -128,11 +127,6 @@ export const SelectedShapeActions = ({
     isLinearElement(targetElements[0]) &&
     !isElbowArrow(targetElements[0]);
 
-  const showCropEditorAction =
-    !appState.croppingElementId &&
-    targetElements.length === 1 &&
-    isImageElement(targetElements[0]);
-
   return (
     <div className="panelColumn">
       <div>
@@ -251,7 +245,6 @@ export const SelectedShapeActions = ({
             {renderAction("group")}
             {renderAction("ungroup")}
             {showLinkIcon && renderAction("hyperlink")}
-            {showCropEditorAction && renderAction("cropEditor")}
             {showLineEditorAction && renderAction("toggleLinearEditor")}
           </div>
         </fieldset>

packages/excalidraw/components/App.tsx

@@ -35,7 +35,6 @@ import {
   actionToggleElementLock,
   actionToggleLinearEditor,
   actionToggleObjectsSnapMode,
-  actionToggleCropEditor,
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
@@ -446,19 +445,7 @@ import {
 } from "../element/flowchart";
 import { searchItemInFocusAtom } from "./SearchMenu";
 import type { LocalPoint, Radians } from "../../math";
-import {
+import { pointFrom, pointDistance, vector } from "../../math";
-  clamp,
-  pointFrom,
-  pointDistance,
-  vector,
-  pointRotateRads,
-  vectorScale,
-  vectorFromPoint,
-  vectorSubtract,
-  vectorDot,
-  vectorNormalize,
-} from "../../math";
-import { cropElement } from "../element/cropElement";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -602,7 +589,6 @@ class App extends React.Component<AppProps, AppState> {
   lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
     null;
   lastPointerMoveEvent: PointerEvent | null = null;
-  lastPointerMoveCoords: { x: number; y: number } | null = null;
   lastViewportPosition = { x: 0, y: 0 };
 
   animationFrameHandler = new AnimationFrameHandler();
@@ -3937,28 +3923,6 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (!isInputLike(event.target)) {
-        if (
-          (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
-          this.state.croppingElementId
-        ) {
-          this.finishImageCropping();
-          return;
-        }
-
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElementsMap(),
-          this.state,
-        );
-
-        if (
-          selectedElements.length === 1 &&
-          isImageElement(selectedElements[0]) &&
-          event.key === KEYS.ENTER
-        ) {
-          this.startImageCropping(selectedElements[0]);
-          return;
-        }
-
         if (
           event.key === KEYS.ESCAPE &&
           this.flowChartCreator.isCreatingChart
@@ -4943,7 +4907,7 @@ class App extends React.Component<AppProps, AppState> {
       const selectionShape = getSelectionBoxShape(
         element,
         this.scene.getNonDeletedElementsMap(),
-        isImageElement(element) ? 0 : this.getElementHitThreshold(),
+        this.getElementHitThreshold(),
       );
 
       return isPointInShape(pointFrom(x, y), selectionShape);
@@ -5172,22 +5136,6 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private startImageCropping = (image: ExcalidrawImageElement) => {
-    this.store.shouldCaptureIncrement();
-    this.setState({
-      croppingElementId: image.id,
-    });
-  };
-
-  private finishImageCropping = () => {
-    if (this.state.croppingElementId) {
-      this.store.shouldCaptureIncrement();
-      this.setState({
-        croppingElementId: null,
-      });
-    }
-  };
-
   private handleCanvasDoubleClick = (
     event: React.MouseEvent<HTMLCanvasElement>,
   ) => {
@@ -5219,11 +5167,6 @@ class App extends React.Component<AppProps, AppState> {
       }
     }
 
-    if (selectedElements.length === 1 && isImageElement(selectedElements[0])) {
-      this.startImageCropping(selectedElements[0]);
-      return;
-    }
-
     resetCursor(this.interactiveCanvas);
 
     let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
@@ -6793,24 +6736,11 @@ class App extends React.Component<AppProps, AppState> {
             this.device,
           );
         if (elementWithTransformHandleType != null) {
-          if (
+          this.setState({
-            elementWithTransformHandleType.transformHandleType === "rotation"
+            resizingElement: elementWithTransformHandleType.element,
-          ) {
+          });
-            this.setState({
+          pointerDownState.resize.handleType =
-              resizingElement: elementWithTransformHandleType.element,
+            elementWithTransformHandleType.transformHandleType;
-            });
-            pointerDownState.resize.handleType =
-              elementWithTransformHandleType.transformHandleType;
-          } else if (this.state.croppingElementId) {
-            pointerDownState.resize.handleType =
-              elementWithTransformHandleType.transformHandleType;
-          } else {
-            this.setState({
-              resizingElement: elementWithTransformHandleType.element,
-            });
-            pointerDownState.resize.handleType =
-              elementWithTransformHandleType.transformHandleType;
-          }
         }
       } else if (selectedElements.length > 1) {
         pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(
@@ -6877,13 +6807,6 @@ class App extends React.Component<AppProps, AppState> {
             pointerDownState.origin.y,
           );
 
-        if (
-          this.state.croppingElementId &&
-          pointerDownState.hit.element?.id !== this.state.croppingElementId
-        ) {
-          this.finishImageCropping();
-        }
-
         if (pointerDownState.hit.element) {
           // Early return if pointer is hitting link icon
           const hitLinkElement = this.getElementLinkAtPosition(
@@ -7685,11 +7608,6 @@ class App extends React.Component<AppProps, AppState> {
     pointerDownState: PointerDownState,
   ) {
     return withBatchedUpdatesThrottled((event: PointerEvent) => {
-      const pointerCoords = viewportCoordsToSceneCoords(event, this.state);
-      const lastPointerCoords =
-        this.lastPointerMoveCoords ?? pointerDownState.origin;
-      this.lastPointerMoveCoords = pointerCoords;
-
       // We need to initialize dragOffsetXY only after we've updated
       // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove
       // event handler should hopefully ensure we're already working with
@@ -7712,6 +7630,8 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
+      const pointerCoords = viewportCoordsToSceneCoords(event, this.state);
+
       if (isEraserActive(this.state)) {
         this.handleEraser(event, pointerDownState, pointerCoords);
         return;
@@ -7748,9 +7668,6 @@ class App extends React.Component<AppProps, AppState> {
       if (pointerDownState.resize.isResizing) {
         pointerDownState.lastCoords.x = pointerCoords.x;
         pointerDownState.lastCoords.y = pointerCoords.y;
-        if (this.maybeHandleCrop(pointerDownState, event)) {
-          return true;
-        }
         if (this.maybeHandleResize(pointerDownState, event)) {
           return true;
         }
@@ -7924,96 +7841,6 @@ class App extends React.Component<AppProps, AppState> {
             }
           }
 
-          // #region move crop region
-          if (this.state.croppingElementId) {
-            const croppingElement = this.scene
-              .getNonDeletedElementsMap()
-              .get(this.state.croppingElementId);
-
-            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)) {
-                const instantDragOffset = vectorScale(
-                  vector(
-                    pointerCoords.x - lastPointerCoords.x,
-                    pointerCoords.y - lastPointerCoords.y,
-                  ),
-                  Math.max(this.state.zoom.value, 2),
-                );
-
-                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
-                const offsetVector = vector(
-                  vectorDot(instantDragOffset, topEdge),
-                  vectorDot(instantDragOffset, leftEdge),
-                );
-
-                const nextCrop = {
-                  ...crop,
-                  x: clamp(
-                    crop.x -
-                      offsetVector[0] * Math.sign(croppingElement.scale[0]),
-                    0,
-                    image.naturalWidth - crop.width,
-                  ),
-                  y: clamp(
-                    crop.y -
-                      offsetVector[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,
           // otherwise the first drag even will not snap, causing a jump before
           // it snaps to its position if previously snapped already.
@@ -8147,7 +7974,6 @@ class App extends React.Component<AppProps, AppState> {
             this.maybeCacheVisibleGaps(event, selectedElements, true);
             this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
           }
-
           return;
         }
       }
@@ -8396,18 +8222,15 @@ class App extends React.Component<AppProps, AppState> {
       const {
         newElement,
         resizingElement,
-        croppingElementId,
         multiElement,
         activeTool,
         isResizing,
         isRotating,
-        isCropping,
       } = this.state;
 
       this.setState((prevState) => ({
         isResizing: false,
         isRotating: false,
-        isCropping: false,
         resizingElement: null,
         selectionElement: null,
         frameToHighlight: null,
@@ -8417,8 +8240,6 @@ class App extends React.Component<AppProps, AppState> {
         originSnapOffset: null,
       }));
 
-      this.lastPointerMoveCoords = null;
-
       SnapCache.setReferenceSnapPoints(null);
       SnapCache.setVisibleGaps(null);
 
@@ -8901,20 +8722,6 @@ class App extends React.Component<AppProps, AppState> {
         }
       }
 
-      // click outside the cropping region to exit
-      if (
-        // not in the cropping mode at all
-        !croppingElementId ||
-        // in the cropping mode
-        (croppingElementId &&
-          // not cropping and no hit element
-          ((!hitElement && !isCropping) ||
-            // hitting something else
-            (hitElement && hitElement.id !== croppingElementId)))
-      ) {
-        this.finishImageCropping();
-      }
-
       const pointerStart = this.lastPointerDownEvent;
       const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;
 
@@ -9170,12 +8977,7 @@ class App extends React.Component<AppProps, AppState> {
         this.store.shouldCaptureIncrement();
       }
 
-      if (
+      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
-        pointerDownState.drag.hasOccurred ||
-        isResizing ||
-        isRotating ||
-        isCropping
-      ) {
         // We only allow binding via linear elements, specifically via dragging
         // the endpoints ("start" or "end").
         const linearElements = this.scene
@@ -9389,7 +9191,7 @@ class App extends React.Component<AppProps, AppState> {
   /**
    * inserts image into elements array and rerenders
    */
-  insertImageElement = async (
+  private insertImageElement = async (
     imageElement: ExcalidrawImageElement,
     imageFile: File,
     showCursorImagePreview?: boolean,
@@ -9542,7 +9344,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  initializeImageDimensions = (
+  private initializeImageDimensions = (
     imageElement: ExcalidrawImageElement,
     forceNaturalSize = false,
   ) => {
@@ -9590,13 +9392,7 @@ class App extends React.Component<AppProps, AppState> {
       const x = imageElement.x + imageElement.width / 2 - width / 2;
       const y = imageElement.y + imageElement.height / 2 - height / 2;
 
-      mutateElement(imageElement, {
+      mutateElement(imageElement, { x, y, width, height });
-        x,
-        y,
-        width,
-        height,
-        crop: null,
-      });
     }
   };
 
@@ -10135,83 +9931,6 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private maybeHandleCrop = (
-    pointerDownState: PointerDownState,
-    event: MouseEvent | KeyboardEvent,
-  ): boolean => {
-    // to crop, we must already be in the cropping mode, where croppingElement has been set
-    if (!this.state.croppingElementId) {
-      return false;
-    }
-
-    const transformHandleType = pointerDownState.resize.handleType;
-    const pointerCoords = pointerDownState.lastCoords;
-    const [x, y] = getGridPoint(
-      pointerCoords.x - pointerDownState.resize.offset.x,
-      pointerCoords.y - pointerDownState.resize.offset.y,
-      this.getEffectiveGridSize(),
-    );
-
-    const croppingElement = this.scene
-      .getNonDeletedElementsMap()
-      .get(this.state.croppingElementId);
-
-    if (
-      transformHandleType &&
-      croppingElement &&
-      isImageElement(croppingElement)
-    ) {
-      const croppingAtStateStart = pointerDownState.originalElements.get(
-        croppingElement.id,
-      );
-
-      const image =
-        isInitializedImageElement(croppingElement) &&
-        this.imageCache.get(croppingElement.fileId)?.image;
-
-      if (
-        croppingAtStateStart &&
-        isImageElement(croppingAtStateStart) &&
-        image &&
-        !(image instanceof Promise)
-      ) {
-        mutateElement(
-          croppingElement,
-          cropElement(
-            croppingElement,
-            transformHandleType,
-            image.naturalWidth,
-            image.naturalHeight,
-            x,
-            y,
-            event.shiftKey
-              ? croppingAtStateStart.width / croppingAtStateStart.height
-              : undefined,
-          ),
-        );
-
-        updateBoundElements(
-          croppingElement,
-          this.scene.getNonDeletedElementsMap(),
-          {
-            oldSize: {
-              width: croppingElement.width,
-              height: croppingElement.height,
-            },
-          },
-        );
-
-        this.setState({
-          isCropping: transformHandleType && transformHandleType !== "rotation",
-        });
-      }
-
-      return true;
-    }
-
-    return false;
-  };
-
   private maybeHandleResize = (
     pointerDownState: PointerDownState,
     event: MouseEvent | KeyboardEvent,
@@ -10228,9 +9947,7 @@ class App extends React.Component<AppProps, AppState> {
       // Frames cannot be rotated.
       (selectedFrames.length > 0 && transformHandleType === "rotation") ||
       // Elbow arrows cannot be transformed (resized or rotated).
-      (selectedElements.length === 1 && isElbowArrow(selectedElements[0])) ||
+      (selectedElements.length === 1 && isElbowArrow(selectedElements[0]))
-      // Do not resize when in crop mode
-      this.state.croppingElementId
     ) {
       return false;
     }
@@ -10405,8 +10122,6 @@ class App extends React.Component<AppProps, AppState> {
       actionSelectAllElementsInFrame,
       actionRemoveAllElementsFromFrame,
       CONTEXT_MENU_SEPARATOR,
-      actionToggleCropEditor,
-      CONTEXT_MENU_SEPARATOR,
       ...options,
       CONTEXT_MENU_SEPARATOR,
       actionCopyStyles,

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -279,7 +279,6 @@ function CommandPaletteInner({
         actionManager.actions.increaseFontSize,
         actionManager.actions.decreaseFontSize,
         actionManager.actions.toggleLinearEditor,
-        actionManager.actions.cropEditor,
         actionLink,
       ].map((action: Action) =>
         actionToCommand(

packages/excalidraw/components/HelpDialog.tsx

@@ -222,16 +222,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               ]}
               isOr={false}
             />
-            <Shortcut
-              label={t("helpDialog.cropStart")}
-              shortcuts={[t("helpDialog.doubleClick"), getShortcutKey("Enter")]}
-              isOr={true}
-            />
-            <Shortcut
-              label={t("helpDialog.cropFinish")}
-              shortcuts={[getShortcutKey("Enter"), getShortcutKey("Escape")]}
-              isOr={true}
-            />
             <Shortcut label={t("toolBar.lock")} shortcuts={[KEYS.Q]} />
             <Shortcut
               label={t("helpDialog.preventBinding")}

packages/excalidraw/components/HintViewer.tsx

@@ -100,14 +100,6 @@ const getHints = ({
     return t("hints.text_editing");
   }
 
-  if (appState.croppingElementId) {
-    return t("hints.leaveCropEditor");
-  }
-
-  if (selectedElements.length === 1 && isImageElement(selectedElements[0])) {
-    return t("hints.enterCropEditor");
-  }
-
   if (activeTool.type === "selection") {
     if (
       appState.selectionElement &&

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -203,8 +203,6 @@ const getRelevantAppStateProps = (
   snapLines: appState.snapLines,
   zenModeEnabled: appState.zenModeEnabled,
   editingTextElement: appState.editingTextElement,
-  isCropping: appState.isCropping,
-  croppingElementId: appState.croppingElementId,
   searchMatches: appState.searchMatches,
 });
 

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -107,7 +107,6 @@ const getRelevantAppStateProps = (
   frameToHighlight: appState.frameToHighlight,
   editingGroupId: appState.editingGroupId,
   currentHoveredFontFamily: appState.currentHoveredFontFamily,
-  croppingElementId: appState.croppingElementId,
 });
 
 const areEqual = (

packages/excalidraw/components/icons.tsx

@@ -2147,12 +2147,3 @@ export const upIcon = createIcon(
   </g>,
   tablerIconProps,
 );
-
-export const cropIcon = createIcon(
-  <g strokeWidth="1.25">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M8 5v10a1 1 0 0 0 1 1h10" />
-    <path d="M5 8h10a1 1 0 0 1 1 1v10" />
-  </g>,
-  tablerIconProps,
-);

packages/excalidraw/data/restore.ts

@@ -258,7 +258,6 @@ const restoreElement = (
         status: element.status || "pending",
         fileId: element.fileId,
         scale: element.scale || [1, 1],
-        crop: element.crop ?? null,
       });
     case "line":
     // @ts-ignore LEGACY type

packages/excalidraw/element/cropElement.ts

@@ -1,587 +0,0 @@
-import { type Point } from "points-on-curve";
-import {
-  type Radians,
-  pointFrom,
-  pointCenter,
-  pointRotateRads,
-  vectorFromPoint,
-  vectorNormalize,
-  vectorSubtract,
-  vectorAdd,
-  vectorScale,
-  pointFromVector,
-  clamp,
-  isCloseTo,
-} from "../../math";
-import type { TransformHandleType } from "./transformHandles";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  ExcalidrawImageElement,
-  ImageCrop,
-  NonDeleted,
-} from "./types";
-import {
-  getElementAbsoluteCoords,
-  getResizedElementAbsoluteCoords,
-} from "./bounds";
-
-const MINIMAL_CROP_SIZE = 10;
-
-export const cropElement = (
-  element: ExcalidrawImageElement,
-  transformHandle: TransformHandleType,
-  naturalWidth: number,
-  naturalHeight: number,
-  pointerX: number,
-  pointerY: number,
-  widthAspectRatio?: number,
-) => {
-  const { width: uncroppedWidth, height: uncroppedHeight } =
-    getUncroppedWidthAndHeight(element);
-
-  const naturalWidthToUncropped = naturalWidth / uncroppedWidth;
-  const naturalHeightToUncropped = naturalHeight / uncroppedHeight;
-
-  const croppedLeft = (element.crop?.x ?? 0) / naturalWidthToUncropped;
-  const croppedTop = (element.crop?.y ?? 0) / naturalHeightToUncropped;
-
-  /**
-   *      uncropped width
-   * *––––––––––––––––––––––––*
-   * |     (x,y) (natural)    |
-   * |       *–––––––*        |
-   * |       |///////| height | uncropped height
-   * |       *–––––––*        |
-   * |    width (natural)     |
-   * *––––––––––––––––––––––––*
-   */
-
-  const rotatedPointer = pointRotateRads(
-    pointFrom(pointerX, pointerY),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
-    -element.angle as Radians,
-  );
-
-  pointerX = rotatedPointer[0];
-  pointerY = rotatedPointer[1];
-
-  let nextWidth = element.width;
-  let nextHeight = element.height;
-
-  let crop: ImageCrop | null = element.crop ?? {
-    x: 0,
-    y: 0,
-    width: naturalWidth,
-    height: naturalHeight,
-    naturalWidth,
-    naturalHeight,
-  };
-
-  const previousCropHeight = crop.height;
-  const previousCropWidth = crop.width;
-
-  const isFlippedByX = element.scale[0] === -1;
-  const isFlippedByY = element.scale[1] === -1;
-
-  let changeInHeight = pointerY - element.y;
-  let changeInWidth = pointerX - element.x;
-
-  if (transformHandle.includes("n")) {
-    nextHeight = clamp(
-      element.height - changeInHeight,
-      MINIMAL_CROP_SIZE,
-      isFlippedByY ? uncroppedHeight - croppedTop : element.height + croppedTop,
-    );
-  }
-
-  if (transformHandle.includes("s")) {
-    changeInHeight = pointerY - element.y - element.height;
-    nextHeight = clamp(
-      element.height + changeInHeight,
-      MINIMAL_CROP_SIZE,
-      isFlippedByY ? element.height + croppedTop : uncroppedHeight - croppedTop,
-    );
-  }
-
-  if (transformHandle.includes("e")) {
-    changeInWidth = pointerX - element.x - element.width;
-
-    nextWidth = clamp(
-      element.width + changeInWidth,
-      MINIMAL_CROP_SIZE,
-      isFlippedByX ? element.width + croppedLeft : uncroppedWidth - croppedLeft,
-    );
-  }
-
-  if (transformHandle.includes("w")) {
-    nextWidth = clamp(
-      element.width - changeInWidth,
-      MINIMAL_CROP_SIZE,
-      isFlippedByX ? uncroppedWidth - croppedLeft : element.width + croppedLeft,
-    );
-  }
-
-  const updateCropWidthAndHeight = (crop: ImageCrop) => {
-    crop.height = nextHeight * naturalHeightToUncropped;
-    crop.width = nextWidth * naturalWidthToUncropped;
-  };
-
-  updateCropWidthAndHeight(crop);
-
-  const adjustFlipForHandle = (
-    handle: TransformHandleType,
-    crop: ImageCrop,
-  ) => {
-    updateCropWidthAndHeight(crop);
-    if (handle.includes("n")) {
-      if (!isFlippedByY) {
-        crop.y += previousCropHeight - crop.height;
-      }
-    }
-    if (handle.includes("s")) {
-      if (isFlippedByY) {
-        crop.y += previousCropHeight - crop.height;
-      }
-    }
-    if (handle.includes("e")) {
-      if (isFlippedByX) {
-        crop.x += previousCropWidth - crop.width;
-      }
-    }
-    if (handle.includes("w")) {
-      if (!isFlippedByX) {
-        crop.x += previousCropWidth - crop.width;
-      }
-    }
-  };
-
-  switch (transformHandle) {
-    case "n": {
-      if (widthAspectRatio) {
-        const distanceToLeft = croppedLeft + element.width / 2;
-        const distanceToRight =
-          uncroppedWidth - croppedLeft - element.width / 2;
-
-        const MAX_WIDTH = Math.min(distanceToLeft, distanceToRight) * 2;
-
-        nextWidth = clamp(
-          nextHeight * widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_WIDTH,
-        );
-        nextHeight = nextWidth / widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.x += (previousCropWidth - crop.width) / 2;
-      }
-
-      break;
-    }
-    case "s": {
-      if (widthAspectRatio) {
-        const distanceToLeft = croppedLeft + element.width / 2;
-        const distanceToRight =
-          uncroppedWidth - croppedLeft - element.width / 2;
-
-        const MAX_WIDTH = Math.min(distanceToLeft, distanceToRight) * 2;
-
-        nextWidth = clamp(
-          nextHeight * widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_WIDTH,
-        );
-        nextHeight = nextWidth / widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.x += (previousCropWidth - crop.width) / 2;
-      }
-
-      break;
-    }
-    case "w": {
-      if (widthAspectRatio) {
-        const distanceToTop = croppedTop + element.height / 2;
-        const distanceToBottom =
-          uncroppedHeight - croppedTop - element.height / 2;
-
-        const MAX_HEIGHT = Math.min(distanceToTop, distanceToBottom) * 2;
-
-        nextHeight = clamp(
-          nextWidth / widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_HEIGHT,
-        );
-        nextWidth = nextHeight * widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.y += (previousCropHeight - crop.height) / 2;
-      }
-
-      break;
-    }
-    case "e": {
-      if (widthAspectRatio) {
-        const distanceToTop = croppedTop + element.height / 2;
-        const distanceToBottom =
-          uncroppedHeight - croppedTop - element.height / 2;
-
-        const MAX_HEIGHT = Math.min(distanceToTop, distanceToBottom) * 2;
-
-        nextHeight = clamp(
-          nextWidth / widthAspectRatio,
-          MINIMAL_CROP_SIZE,
-          MAX_HEIGHT,
-        );
-        nextWidth = nextHeight * widthAspectRatio;
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-
-      if (widthAspectRatio) {
-        crop.y += (previousCropHeight - crop.height) / 2;
-      }
-
-      break;
-    }
-    case "ne": {
-      if (widthAspectRatio) {
-        if (changeInWidth > -changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? uncroppedHeight - croppedTop
-            : croppedTop + element.height;
-
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? croppedLeft + element.width
-            : uncroppedWidth - croppedLeft;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    case "nw": {
-      if (widthAspectRatio) {
-        if (changeInWidth < changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? uncroppedHeight - croppedTop
-            : croppedTop + element.height;
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? uncroppedWidth - croppedLeft
-            : croppedLeft + element.width;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    case "se": {
-      if (widthAspectRatio) {
-        if (changeInWidth > changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? croppedTop + element.height
-            : uncroppedHeight - croppedTop;
-
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? croppedLeft + element.width
-            : uncroppedWidth - croppedLeft;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    case "sw": {
-      if (widthAspectRatio) {
-        if (-changeInWidth > changeInHeight) {
-          const MAX_HEIGHT = isFlippedByY
-            ? croppedTop + element.height
-            : uncroppedHeight - croppedTop;
-
-          nextHeight = clamp(
-            nextWidth / widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_HEIGHT,
-          );
-          nextWidth = nextHeight * widthAspectRatio;
-        } else {
-          const MAX_WIDTH = isFlippedByX
-            ? uncroppedWidth - croppedLeft
-            : croppedLeft + element.width;
-
-          nextWidth = clamp(
-            nextHeight * widthAspectRatio,
-            MINIMAL_CROP_SIZE,
-            MAX_WIDTH,
-          );
-          nextHeight = nextWidth / widthAspectRatio;
-        }
-      }
-
-      adjustFlipForHandle(transformHandle, crop);
-      break;
-    }
-    default:
-      break;
-  }
-
-  const newOrigin = recomputeOrigin(
-    element,
-    transformHandle,
-    nextWidth,
-    nextHeight,
-    !!widthAspectRatio,
-  );
-
-  // reset crop to null if we're back to orig size
-  if (
-    isCloseTo(crop.width, crop.naturalWidth) &&
-    isCloseTo(crop.height, crop.naturalHeight)
-  ) {
-    crop = null;
-  }
-
-  return {
-    x: newOrigin[0],
-    y: newOrigin[1],
-    width: nextWidth,
-    height: nextHeight,
-    crop,
-  };
-};
-
-const recomputeOrigin = (
-  stateAtCropStart: NonDeleted<ExcalidrawElement>,
-  transformHandle: TransformHandleType,
-  width: number,
-  height: number,
-  shouldMaintainAspectRatio?: boolean,
-) => {
-  const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(
-    stateAtCropStart,
-    stateAtCropStart.width,
-    stateAtCropStart.height,
-    true,
-  );
-  const startTopLeft = pointFrom(x1, y1);
-  const startBottomRight = pointFrom(x2, y2);
-  const startCenter: any = pointCenter(startTopLeft, startBottomRight);
-
-  const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] =
-    getResizedElementAbsoluteCoords(stateAtCropStart, width, height, true);
-  const newBoundsWidth = newBoundsX2 - newBoundsX1;
-  const newBoundsHeight = newBoundsY2 - newBoundsY1;
-
-  // Calculate new topLeft based on fixed corner during resize
-  let newTopLeft = [...startTopLeft] as [number, number];
-
-  if (["n", "w", "nw"].includes(transformHandle)) {
-    newTopLeft = [
-      startBottomRight[0] - Math.abs(newBoundsWidth),
-      startBottomRight[1] - Math.abs(newBoundsHeight),
-    ];
-  }
-  if (transformHandle === "ne") {
-    const bottomLeft = [startTopLeft[0], startBottomRight[1]];
-    newTopLeft = [bottomLeft[0], bottomLeft[1] - Math.abs(newBoundsHeight)];
-  }
-  if (transformHandle === "sw") {
-    const topRight = [startBottomRight[0], startTopLeft[1]];
-    newTopLeft = [topRight[0] - Math.abs(newBoundsWidth), topRight[1]];
-  }
-
-  if (shouldMaintainAspectRatio) {
-    if (["s", "n"].includes(transformHandle)) {
-      newTopLeft[0] = startCenter[0] - newBoundsWidth / 2;
-    }
-    if (["e", "w"].includes(transformHandle)) {
-      newTopLeft[1] = startCenter[1] - newBoundsHeight / 2;
-    }
-  }
-
-  // adjust topLeft to new rotation point
-  const angle = stateAtCropStart.angle;
-  const rotatedTopLeft = pointRotateRads(newTopLeft, startCenter, angle);
-  const newCenter: Point = [
-    newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
-    newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
-  ];
-  const rotatedNewCenter = pointRotateRads(newCenter, startCenter, angle);
-  newTopLeft = pointRotateRads(
-    rotatedTopLeft,
-    rotatedNewCenter,
-    -angle as Radians,
-  );
-
-  const newOrigin = [...newTopLeft];
-  newOrigin[0] += stateAtCropStart.x - newBoundsX1;
-  newOrigin[1] += stateAtCropStart.y - newBoundsY1;
-
-  return newOrigin;
-};
-
-// refer to https://link.excalidraw.com/l/6rfy1007QOo/6stx5PmRn0k
-export const getUncroppedImageElement = (
-  element: ExcalidrawImageElement,
-  elementsMap: ElementsMap,
-) => {
-  if (element.crop) {
-    const { width, height } = getUncroppedWidthAndHeight(element);
-
-    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
-      element,
-      elementsMap,
-    );
-
-    const topLeftVector = vectorFromPoint(
-      pointRotateRads(pointFrom(x1, y1), pointFrom(cx, cy), element.angle),
-    );
-    const topRightVector = vectorFromPoint(
-      pointRotateRads(pointFrom(x2, y1), pointFrom(cx, cy), element.angle),
-    );
-    const topEdgeNormalized = vectorNormalize(
-      vectorSubtract(topRightVector, topLeftVector),
-    );
-    const bottomLeftVector = vectorFromPoint(
-      pointRotateRads(pointFrom(x1, y2), pointFrom(cx, cy), element.angle),
-    );
-    const leftEdgeVector = vectorSubtract(bottomLeftVector, topLeftVector);
-    const leftEdgeNormalized = vectorNormalize(leftEdgeVector);
-
-    const { cropX, cropY } = adjustCropPosition(element.crop, element.scale);
-
-    const rotatedTopLeft = vectorAdd(
-      vectorAdd(
-        topLeftVector,
-        vectorScale(
-          topEdgeNormalized,
-          (-cropX * width) / element.crop.naturalWidth,
-        ),
-      ),
-      vectorScale(
-        leftEdgeNormalized,
-        (-cropY * height) / element.crop.naturalHeight,
-      ),
-    );
-
-    const center = pointFromVector(
-      vectorAdd(
-        vectorAdd(rotatedTopLeft, vectorScale(topEdgeNormalized, width / 2)),
-        vectorScale(leftEdgeNormalized, height / 2),
-      ),
-    );
-
-    const unrotatedTopLeft = pointRotateRads(
-      pointFromVector(rotatedTopLeft),
-      center,
-      -element.angle as Radians,
-    );
-
-    const uncroppedElement: ExcalidrawImageElement = {
-      ...element,
-      x: unrotatedTopLeft[0],
-      y: unrotatedTopLeft[1],
-      width,
-      height,
-      crop: null,
-    };
-
-    return uncroppedElement;
-  }
-
-  return element;
-};
-
-export const getUncroppedWidthAndHeight = (element: ExcalidrawImageElement) => {
-  if (element.crop) {
-    const width =
-      element.width / (element.crop.width / element.crop.naturalWidth);
-    const height =
-      element.height / (element.crop.height / element.crop.naturalHeight);
-
-    return {
-      width,
-      height,
-    };
-  }
-
-  return {
-    width: element.width,
-    height: element.height,
-  };
-};
-
-const adjustCropPosition = (
-  crop: ImageCrop,
-  scale: ExcalidrawImageElement["scale"],
-) => {
-  let cropX = crop.x;
-  let cropY = crop.y;
-
-  const flipX = scale[0] === -1;
-  const flipY = scale[1] === -1;
-
-  if (flipX) {
-    cropX = crop.naturalWidth - Math.abs(cropX) - crop.width;
-  }
-
-  if (flipY) {
-    cropY = crop.naturalHeight - Math.abs(cropY) - crop.height;
-  }
-
-  return {
-    cropX,
-    cropY,
-  };
-};

packages/excalidraw/element/dragElements.ts

@@ -16,7 +16,6 @@ import {
   isArrowElement,
   isElbowArrow,
   isFrameLikeElement,
-  isImageElement,
   isTextElement,
 } from "./typeChecks";
 import { getFontString } from "../utils";
@@ -252,14 +251,6 @@ export const dragNewElement = ({
   }
 
   if (width !== 0 && height !== 0) {
-    let imageInitialDimension = null;
-    if (isImageElement(newElement)) {
-      imageInitialDimension = {
-        initialWidth: width,
-        initialHeight: height,
-      };
-    }
-
     mutateElement(
       newElement,
       {
@@ -268,7 +259,6 @@ export const dragNewElement = ({
         width,
         height,
         ...textAutoResize,
-        ...imageInitialDimension,
       },
       informMutation,
     );

packages/excalidraw/element/embeddable.ts

@@ -20,7 +20,7 @@ type IframeDataWithSandbox = MarkRequired<IframeData, "sandbox">;
 const embeddedLinkCache = new Map<string, IframeDataWithSandbox>();
 
 const RE_YOUTUBE =
-  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
+  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(?:embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:.*?[&?](?:t=|start=)([a-zA-Z0-9_-]+))?.*$/;
 
 const RE_VIMEO =
   /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
@@ -105,22 +105,23 @@ export const getEmbedLink = (
   let type: "video" | "generic" = "generic";
   let aspectRatio = { w: 560, h: 840 };
   const ytLink = link.match(RE_YOUTUBE);
-  if (ytLink?.[2]) {
+  const id = ytLink?.[1];
-    const time = ytLink[3] ? `&start=${ytLink[3]}` : ``;
+  if (id) {
+    const time = ytLink[2] ? `&start=${ytLink[2]}` : ``;
     const isPortrait = link.includes("shorts");
     type = "video";
     switch (ytLink[1]) {
       case "embed/":
       case "watch?v=":
       case "shorts/":
-        link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;
+        link = `https://www.youtube.com/embed/${id}?enablejsapi=1${time}`;
         break;
       case "playlist?list=":
       case "embed/videoseries?list=":
-        link = `https://www.youtube.com/embed/videoseries?list=${ytLink[2]}&enablejsapi=1${time}`;
+        link = `https://www.youtube.com/embed/videoseries?list=${id}&enablejsapi=1${time}`;
         break;
       default:
-        link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;
+        link = `https://www.youtube.com/embed/${id}?enablejsapi=1${time}`;
         break;
     }
     aspectRatio = isPortrait ? { w: 315, h: 560 } : { w: 560, h: 315 };

packages/excalidraw/element/newElement.ts

@@ -477,7 +477,6 @@ export const newImageElement = (
     status?: ExcalidrawImageElement["status"];
     fileId?: ExcalidrawImageElement["fileId"];
     scale?: ExcalidrawImageElement["scale"];
-    crop?: ExcalidrawImageElement["crop"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawImageElement> => {
   return {
@@ -488,7 +487,6 @@ export const newImageElement = (
     status: opts.status ?? "pending",
     fileId: opts.fileId ?? null,
     scale: opts.scale ?? [1, 1],
-    crop: opts.crop ?? null,
   };
 };
 

packages/excalidraw/element/resizeTest.ts

@@ -20,7 +20,7 @@ import type { AppState, Device, Zoom } from "../types";
 import type { Bounds } from "./bounds";
 import { getElementAbsoluteCoords } from "./bounds";
 import { SIDE_RESIZING_THRESHOLD } from "../constants";
-import { isImageElement, isLinearElement } from "./typeChecks";
+import { isLinearElement } from "./typeChecks";
 import type { GlobalPoint, LineSegment, LocalPoint } from "../../math";
 import {
   pointFrom,
@@ -90,11 +90,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
 
     // do not resize from the sides for linear elements with only two points
     if (!(isLinearElement(element) && element.points.length <= 2)) {
-      const SPACING = isImageElement(element)
+      const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
-        ? 0
-        : SIDE_RESIZING_THRESHOLD / zoom.value;
-      const ZOOMED_SIDE_RESIZING_THRESHOLD =
-        SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
         pointFrom(x1 - SPACING, y1 - SPACING),
         pointFrom(x2 + SPACING, y2 + SPACING),
@@ -108,7 +104,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
           pointOnLineSegment(
             pointFrom(x, y),
             side as LineSegment<Point>,
-            ZOOMED_SIDE_RESIZING_THRESHOLD,
+            SPACING,
           )
         ) {
           return dir as TransformHandleType;

packages/excalidraw/element/transformHandles.ts

@@ -11,7 +11,6 @@ import type { Device, InteractiveCanvasAppState, Zoom } from "../types";
 import {
   isElbowArrow,
   isFrameLikeElement,
-  isImageElement,
   isLinearElement,
 } from "./typeChecks";
 import {
@@ -130,7 +129,6 @@ export const getTransformHandlesFromCoords = (
   pointerType: PointerType,
   omitSides: { [T in TransformHandleType]?: boolean } = {},
   margin = 4,
-  spacing = DEFAULT_TRANSFORM_HANDLE_SPACING,
 ): TransformHandles => {
   const size = transformHandleSizes[pointerType];
   const handleWidth = size / zoom.value;
@@ -142,7 +140,8 @@ export const getTransformHandlesFromCoords = (
   const width = x2 - x1;
   const height = y2 - y1;
   const dashedLineMargin = margin / zoom.value;
-  const centeringOffset = (size - spacing * 2) / (2 * zoom.value);
+  const centeringOffset =
+    (size - DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / (2 * zoom.value);
 
   const transformHandles: TransformHandles = {
     nw: omitSides.nw
@@ -302,10 +301,8 @@ export const getTransformHandles = (
       rotation: true,
     };
   }
-  const margin = isLinearElement(element)
+  const dashedLineMargin = isLinearElement(element)
     ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8
-    : isImageElement(element)
-    ? 0
     : DEFAULT_TRANSFORM_HANDLE_SPACING;
   return getTransformHandlesFromCoords(
     getElementAbsoluteCoords(element, elementsMap, true),
@@ -313,8 +310,7 @@ export const getTransformHandles = (
     zoom,
     pointerType,
     omitSides,
-    margin,
+    dashedLineMargin,
-    isImageElement(element) ? 0 : undefined,
   );
 };
 

packages/excalidraw/element/types.ts

@@ -132,15 +132,6 @@ export type IframeData =
       | { type: "document"; srcdoc: (theme: Theme) => string }
     );
 
-export type ImageCrop = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  naturalWidth: number;
-  naturalHeight: number;
-};
-
 export type ExcalidrawImageElement = _ExcalidrawElementBase &
   Readonly<{
     type: "image";
@@ -149,8 +140,6 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase &
     status: "pending" | "saved" | "error";
     /** X and Y scale factors <-1, 1>, used for image axis flipping */
     scale: [number, number];
-    /** whether an element is cropped */
-    crop: ImageCrop | null;
   }>;
 
 export type InitializedExcalidrawImageElement = MarkNonNullable<

packages/excalidraw/locales/en.json

@@ -328,9 +328,7 @@
     "deepBoxSelect": "Hold CtrlOrCmd to deep select, and to prevent dragging",
     "eraserRevert": "Hold Alt to revert the elements marked for deletion",
     "firefox_clipboard_write": "This feature can likely be enabled by setting the \"dom.events.asyncClipboard.clipboardItem\" flag to \"true\". To change the browser flags in Firefox, visit the \"about:config\" page.",
-    "disableSnapping": "Hold CtrlOrCmd to disable snapping",
+    "disableSnapping": "Hold CtrlOrCmd to disable snapping"
-    "enterCropEditor": "Double click the image or press ENTER to crop the image",
-    "leaveCropEditor": "Click outside the image or press ENTER or ESCAPE to finish cropping"
   },
   "canvasError": {
     "cannotShowPreview": "Cannot show preview",
@@ -401,9 +399,7 @@
     "zoomToSelection": "Zoom to selection",
     "toggleElementLock": "Lock/unlock selection",
     "movePageUpDown": "Move page up/down",
-    "movePageLeftRight": "Move page left/right",
+    "movePageLeftRight": "Move page left/right"
-    "cropStart": "Crop image",
-    "cropFinish": "Finish image cropping"
   },
   "clearCanvasDialog": {
     "title": "Clear canvas"

packages/excalidraw/renderer/interactiveScene.ts

@@ -54,7 +54,6 @@ import oc from "open-color";
 import {
   isElbowArrow,
   isFrameLikeElement,
-  isImageElement,
   isLinearElement,
   isTextElement,
 } from "../element/typeChecks";
@@ -63,7 +62,6 @@ import type {
   ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawFrameLikeElement,
-  ExcalidrawImageElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
   GroupId,
@@ -309,42 +307,38 @@ const renderBindingHighlightForSuggestedPointBinding = (
   });
 };
 
-type ElementSelectionBorder = {
-  angle: number;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  selectionColors: string[];
-  dashed?: boolean;
-  cx: number;
-  cy: number;
-  activeEmbeddable: boolean;
-  padding?: number;
-};
-
 const renderSelectionBorder = (
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
-  elementProperties: ElementSelectionBorder,
+  elementProperties: {
+    angle: number;
+    elementX1: number;
+    elementY1: number;
+    elementX2: number;
+    elementY2: number;
+    selectionColors: string[];
+    dashed?: boolean;
+    cx: number;
+    cy: number;
+    activeEmbeddable: boolean;
+  },
 ) => {
   const {
     angle,
-    x1,
+    elementX1,
-    y1,
+    elementY1,
-    x2,
+    elementX2,
-    y2,
+    elementY2,
     selectionColors,
     cx,
     cy,
     dashed,
     activeEmbeddable,
   } = elementProperties;
-  const elementWidth = x2 - x1;
+  const elementWidth = elementX2 - elementX1;
-  const elementHeight = y2 - y1;
+  const elementHeight = elementY2 - elementY1;
 
-  const padding =
+  const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
-    elementProperties.padding ?? DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
 
   const linePadding = padding / appState.zoom.value;
   const lineWidth = 8 / appState.zoom.value;
@@ -366,8 +360,8 @@ const renderSelectionBorder = (
     context.lineDashOffset = (lineWidth + spaceWidth) * index;
     strokeRectWithRotation(
       context,
-      x1 - linePadding,
+      elementX1 - linePadding,
-      y1 - linePadding,
+      elementY1 - linePadding,
       elementWidth + linePadding * 2,
       elementHeight + linePadding * 2,
       cx,
@@ -439,17 +433,18 @@ const renderElementsBoxHighlight = (
   );
 
   const getSelectionFromElements = (elements: ExcalidrawElement[]) => {
-    const [x1, y1, x2, y2] = getCommonBounds(elements);
+    const [elementX1, elementY1, elementX2, elementY2] =
+      getCommonBounds(elements);
     return {
       angle: 0,
-      x1,
+      elementX1,
-      x2,
+      elementX2,
-      y1,
+      elementY1,
-      y2,
+      elementY2,
       selectionColors: ["rgb(0,118,255)"],
       dashed: false,
-      cx: x1 + (x2 - x1) / 2,
+      cx: elementX1 + (elementX2 - elementX1) / 2,
-      cy: y1 + (y2 - y1) / 2,
+      cy: elementY1 + (elementY2 - elementY1) / 2,
       activeEmbeddable: false,
     };
   };
@@ -599,111 +594,6 @@ const renderTransformHandles = (
   });
 };
 
-const renderCropHandles = (
-  context: CanvasRenderingContext2D,
-  renderConfig: InteractiveCanvasRenderConfig,
-  appState: InteractiveCanvasAppState,
-  croppingElement: ExcalidrawImageElement,
-  elementsMap: ElementsMap,
-): void => {
-  const [x1, y1, , , cx, cy] = getElementAbsoluteCoords(
-    croppingElement,
-    elementsMap,
-  );
-
-  const LINE_WIDTH = 3;
-  const LINE_LENGTH = 20;
-
-  const ZOOMED_LINE_WIDTH = LINE_WIDTH / appState.zoom.value;
-  const ZOOMED_HALF_LINE_WIDTH = ZOOMED_LINE_WIDTH / 2;
-
-  const HALF_WIDTH = cx - x1 + ZOOMED_LINE_WIDTH;
-  const HALF_HEIGHT = cy - y1 + ZOOMED_LINE_WIDTH;
-
-  const HORIZONTAL_LINE_LENGTH = Math.min(
-    LINE_LENGTH / appState.zoom.value,
-    HALF_WIDTH,
-  );
-  const VERTICAL_LINE_LENGTH = Math.min(
-    LINE_LENGTH / appState.zoom.value,
-    HALF_HEIGHT,
-  );
-
-  context.save();
-  context.fillStyle = renderConfig.selectionColor;
-  context.strokeStyle = renderConfig.selectionColor;
-  context.lineWidth = ZOOMED_LINE_WIDTH;
-
-  const handles: Array<
-    [
-      [number, number],
-      [number, number],
-      [number, number],
-      [number, number],
-      [number, number],
-    ]
-  > = [
-    [
-      // x, y
-      [-HALF_WIDTH, -HALF_HEIGHT],
-      // horizontal line: first start and to
-      [0, ZOOMED_HALF_LINE_WIDTH],
-      [HORIZONTAL_LINE_LENGTH, ZOOMED_HALF_LINE_WIDTH],
-      // vertical line: second  start and to
-      [ZOOMED_HALF_LINE_WIDTH, 0],
-      [ZOOMED_HALF_LINE_WIDTH, VERTICAL_LINE_LENGTH],
-    ],
-    [
-      [HALF_WIDTH - ZOOMED_HALF_LINE_WIDTH, -HALF_HEIGHT],
-      [ZOOMED_HALF_LINE_WIDTH, ZOOMED_HALF_LINE_WIDTH],
-      [
-        -HORIZONTAL_LINE_LENGTH + ZOOMED_HALF_LINE_WIDTH,
-        ZOOMED_HALF_LINE_WIDTH,
-      ],
-      [0, 0],
-      [0, VERTICAL_LINE_LENGTH],
-    ],
-    [
-      [-HALF_WIDTH, HALF_HEIGHT],
-      [0, -ZOOMED_HALF_LINE_WIDTH],
-      [HORIZONTAL_LINE_LENGTH, -ZOOMED_HALF_LINE_WIDTH],
-      [ZOOMED_HALF_LINE_WIDTH, 0],
-      [ZOOMED_HALF_LINE_WIDTH, -VERTICAL_LINE_LENGTH],
-    ],
-    [
-      [HALF_WIDTH - ZOOMED_HALF_LINE_WIDTH, HALF_HEIGHT],
-      [ZOOMED_HALF_LINE_WIDTH, -ZOOMED_HALF_LINE_WIDTH],
-      [
-        -HORIZONTAL_LINE_LENGTH + ZOOMED_HALF_LINE_WIDTH,
-        -ZOOMED_HALF_LINE_WIDTH,
-      ],
-      [0, 0],
-      [0, -VERTICAL_LINE_LENGTH],
-    ],
-  ];
-
-  handles.forEach((handle) => {
-    const [[x, y], [x1s, y1s], [x1t, y1t], [x2s, y2s], [x2t, y2t]] = handle;
-
-    context.save();
-    context.translate(cx, cy);
-    context.rotate(croppingElement.angle);
-
-    context.beginPath();
-    context.moveTo(x + x1s, y + y1s);
-    context.lineTo(x + x1t, y + y1t);
-    context.stroke();
-
-    context.beginPath();
-    context.moveTo(x + x2s, y + y2s);
-    context.lineTo(x + x2t, y + y2t);
-    context.stroke();
-    context.restore();
-  });
-
-  context.restore();
-};
-
 const renderTextBox = (
   text: NonDeleted<ExcalidrawTextElement>,
   context: CanvasRenderingContext2D,
@@ -781,7 +671,7 @@ const _renderInteractiveScene = ({
   }
 
   // Paint selection element
-  if (appState.selectionElement && !appState.isCropping) {
+  if (appState.selectionElement) {
     try {
       renderSelectionElement(
         appState.selectionElement,
@@ -893,7 +783,18 @@ const _renderInteractiveScene = ({
       // Optimisation for finding quickly relevant element ids
       const locallySelectedIds = arrayToMap(selectedElements);
 
-      const selections: ElementSelectionBorder[] = [];
+      const selections: {
+        angle: number;
+        elementX1: number;
+        elementY1: number;
+        elementX2: number;
+        elementY2: number;
+        selectionColors: string[];
+        dashed?: boolean;
+        cx: number;
+        cy: number;
+        activeEmbeddable: boolean;
+      }[] = [];
 
       for (const element of elementsMap.values()) {
         const selectionColors = [];
@@ -932,17 +833,14 @@ const _renderInteractiveScene = ({
         }
 
         if (selectionColors.length) {
-          const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
+          const [elementX1, elementY1, elementX2, elementY2, cx, cy] =
-            element,
+            getElementAbsoluteCoords(element, elementsMap, true);
-            elementsMap,
-            true,
-          );
           selections.push({
             angle: element.angle,
-            x1,
+            elementX1,
-            y1,
+            elementY1,
-            x2,
+            elementX2,
-            y2,
+            elementY2,
             selectionColors,
             dashed: !!remoteClients,
             cx,
@@ -950,28 +848,24 @@ const _renderInteractiveScene = ({
             activeEmbeddable:
               appState.activeEmbeddable?.element === element &&
               appState.activeEmbeddable.state === "active",
-            padding:
-              element.id === appState.croppingElementId ||
-              isImageElement(element)
-                ? 0
-                : undefined,
           });
         }
       }
 
       const addSelectionForGroupId = (groupId: GroupId) => {
         const groupElements = getElementsInGroup(elementsMap, groupId);
-        const [x1, y1, x2, y2] = getCommonBounds(groupElements);
+        const [elementX1, elementY1, elementX2, elementY2] =
+          getCommonBounds(groupElements);
         selections.push({
           angle: 0,
-          x1,
+          elementX1,
-          x2,
+          elementX2,
-          y1,
+          elementY1,
-          y2,
+          elementY2,
           selectionColors: [oc.black],
           dashed: true,
-          cx: x1 + (x2 - x1) / 2,
+          cx: elementX1 + (elementX2 - elementX1) / 2,
-          cy: y1 + (y2 - y1) / 2,
+          cy: elementY1 + (elementY2 - elementY1) / 2,
           activeEmbeddable: false,
         });
       };
@@ -1006,9 +900,7 @@ const _renderInteractiveScene = ({
         !appState.viewModeEnabled &&
         showBoundingBox &&
         // do not show transform handles when text is being edited
-        !isTextElement(appState.editingTextElement) &&
+        !isTextElement(appState.editingTextElement)
-        // do not show transform handles when image is being cropped
-        !appState.croppingElementId
       ) {
         renderTransformHandles(
           context,
@@ -1018,20 +910,6 @@ const _renderInteractiveScene = ({
           selectedElements[0].angle,
         );
       }
-
-      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 =
         (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;

packages/excalidraw/renderer/renderElement.ts

@@ -17,7 +17,6 @@ import {
   isArrowElement,
   hasBoundTextElement,
   isMagicFrameElement,
-  isImageElement,
 } from "../element/typeChecks";
 import { getElementAbsoluteCoords } from "../element/bounds";
 import type { RoughCanvas } from "roughjs/bin/canvas";
@@ -62,7 +61,6 @@ import { ShapeCache } from "../scene/ShapeCache";
 import { getVerticalOffset } from "../fonts";
 import { isRightAngleRads } from "../../math";
 import { getCornerRadius } from "../shapes";
-import { getUncroppedImageElement } from "../element/cropElement";
 
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
@@ -436,22 +434,8 @@ const drawElementOnCanvas = (
           );
           context.clip();
         }
-
-        const { x, y, width, height } = element.crop
-          ? element.crop
-          : {
-              x: 0,
-              y: 0,
-              width: img.naturalWidth,
-              height: img.naturalHeight,
-            };
-
         context.drawImage(
           img,
-          x,
-          y,
-          width,
-          height,
           0 /* hardcoded for the selection box*/,
           0,
           element.width,
@@ -937,53 +921,14 @@ export const renderElement = (
           context.imageSmoothingEnabled = false;
         }
 
-        if (
+        drawElementFromCanvas(
-          element.id === appState.croppingElementId &&
+          elementWithCanvas,
-          isImageElement(elementWithCanvas.element) &&
+          context,
-          elementWithCanvas.element.crop !== null
-        ) {
-          context.save();
-          context.globalAlpha = 0.1;
-
-          const uncroppedElementCanvas = generateElementCanvas(
-            getUncroppedImageElement(elementWithCanvas.element, elementsMap),
-            allElementsMap,
-            appState.zoom,
-            renderConfig,
-            appState,
-          );
-
-          if (uncroppedElementCanvas) {
-            drawElementFromCanvas(
-              uncroppedElementCanvas,
-              context,
-              renderConfig,
-              appState,
-              allElementsMap,
-            );
-          }
-
-          context.restore();
-        }
-
-        const _elementWithCanvas = generateElementCanvas(
-          elementWithCanvas.element,
-          allElementsMap,
-          appState.zoom,
           renderConfig,
           appState,
+          allElementsMap,
         );
 
-        if (_elementWithCanvas) {
-          drawElementFromCanvas(
-            _elementWithCanvas,
-            context,
-            renderConfig,
-            appState,
-            allElementsMap,
-          );
-        }
-
         // reset
         context.imageSmoothingEnabled = currentImageSmoothingStatus;
       }

packages/excalidraw/renderer/staticSvgScene.ts

@@ -7,7 +7,7 @@ import {
   SVG_NS,
 } from "../constants";
 import { normalizeLink, toValidURL } from "../data/url";
-import { getElementAbsoluteCoords, hashString } from "../element";
+import { getElementAbsoluteCoords } from "../element";
 import {
   createPlaceholderEmbeddableLabel,
   getEmbedLink,
@@ -37,7 +37,6 @@ import { getFontFamilyString, isRTL, isTestEnv } from "../utils";
 import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "./renderElement";
 import { getVerticalOffset } from "../fonts";
 import { getCornerRadius, isPathALoop } from "../shapes";
-import { getUncroppedWidthAndHeight } from "../element/cropElement";
 
 const roughSVGDrawWithPrecision = (
   rsvg: RoughSVG,
@@ -411,36 +410,19 @@ const renderElementToSvg = (
       const fileData =
         isInitializedImageElement(element) && files[element.fileId];
       if (fileData) {
-        const cropHash = hashString(JSON.stringify(element.crop));
+        const symbolId = `image-${fileData.id}`;
-        const symbolId = `image-${fileData.id}-${cropHash}`;
         let symbol = svgRoot.querySelector(`#${symbolId}`);
         if (!symbol) {
           symbol = svgRoot.ownerDocument!.createElementNS(SVG_NS, "symbol");
           symbol.id = symbolId;
 
           const image = svgRoot.ownerDocument!.createElementNS(SVG_NS, "image");
+
+          image.setAttribute("width", "100%");
+          image.setAttribute("height", "100%");
           image.setAttribute("href", fileData.dataURL);
           image.setAttribute("preserveAspectRatio", "none");
 
-          if (element.crop) {
-            const { width: uncroppedWidth, height: uncroppedHeight } =
-              getUncroppedWidthAndHeight(element);
-
-            symbol.setAttribute(
-              "viewBox",
-              `${
-                element.crop.x / (element.crop.naturalWidth / uncroppedWidth)
-              } ${
-                element.crop.y / (element.crop.naturalHeight / uncroppedHeight)
-              } ${width} ${height}`,
-            );
-            image.setAttribute("width", `${uncroppedWidth}`);
-            image.setAttribute("height", `${uncroppedHeight}`);
-          } else {
-            image.setAttribute("width", "100%");
-            image.setAttribute("height", "100%");
-          }
-
           symbol.appendChild(image);
 
           root.prepend(symbol);

packages/excalidraw/store.ts

@@ -21,7 +21,6 @@ export const getObservedAppState = (appState: AppState): ObservedAppState => {
     selectedGroupIds: appState.selectedGroupIds,
     editingLinearElementId: appState.editingLinearElement?.elementId || null,
     selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
-    croppingElementId: appState.croppingElementId,
   };
 
   Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {

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

@@ -116,50 +116,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
         },
       },
       "separator",
-      {
-        "PanelComponent": [Function],
-        "icon": <svg
-          aria-hidden="true"
-          className=""
-          fill="none"
-          focusable="false"
-          role="img"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          viewBox="0 0 24 24"
-        >
-          <g
-            strokeWidth="1.25"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-              stroke="none"
-            />
-            <path
-              d="M8 5v10a1 1 0 0 0 1 1h10"
-            />
-            <path
-              d="M5 8h10a1 1 0 0 1 1 1v10"
-            />
-          </g>
-        </svg>,
-        "keywords": [
-          "image",
-          "crop",
-        ],
-        "label": "helpDialog.cropStart",
-        "name": "cropEditor",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "menu",
-        },
-        "viewMode": true,
-      },
-      "separator",
       {
         "icon": <svg
           aria-hidden="true"
@@ -838,7 +794,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
     "left": 30,
     "top": 40,
   },
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -881,7 +836,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1046,7 +1000,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1089,7 +1042,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1264,7 +1216,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1307,7 +1258,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1597,7 +1547,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1640,7 +1589,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1930,7 +1878,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1973,7 +1920,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2148,7 +2094,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2191,7 +2136,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2390,7 +2334,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2433,7 +2376,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2693,7 +2635,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2736,7 +2677,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3064,7 +3004,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3107,7 +3046,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3541,7 +3479,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3584,7 +3521,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3866,7 +3802,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3909,7 +3844,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4191,7 +4125,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4234,7 +4167,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4701,50 +4633,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
         },
       },
       "separator",
-      {
-        "PanelComponent": [Function],
-        "icon": <svg
-          aria-hidden="true"
-          className=""
-          fill="none"
-          focusable="false"
-          role="img"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          viewBox="0 0 24 24"
-        >
-          <g
-            strokeWidth="1.25"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-              stroke="none"
-            />
-            <path
-              d="M8 5v10a1 1 0 0 0 1 1h10"
-            />
-            <path
-              d="M5 8h10a1 1 0 0 1 1 1v10"
-            />
-          </g>
-        </svg>,
-        "keywords": [
-          "image",
-          "crop",
-        ],
-        "label": "helpDialog.cropStart",
-        "name": "cropEditor",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "menu",
-        },
-        "viewMode": true,
-      },
-      "separator",
       {
         "icon": <svg
           aria-hidden="true"
@@ -5423,7 +5311,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "left": -17,
     "top": -7,
   },
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5466,7 +5353,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5874,50 +5760,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
         },
       },
       "separator",
-      {
-        "PanelComponent": [Function],
-        "icon": <svg
-          aria-hidden="true"
-          className=""
-          fill="none"
-          focusable="false"
-          role="img"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          viewBox="0 0 24 24"
-        >
-          <g
-            strokeWidth="1.25"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-              stroke="none"
-            />
-            <path
-              d="M8 5v10a1 1 0 0 0 1 1h10"
-            />
-            <path
-              d="M5 8h10a1 1 0 0 1 1 1v10"
-            />
-          </g>
-        </svg>,
-        "keywords": [
-          "image",
-          "crop",
-        ],
-        "label": "helpDialog.cropStart",
-        "name": "cropEditor",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "menu",
-        },
-        "viewMode": true,
-      },
-      "separator",
       {
         "icon": <svg
           aria-hidden="true"
@@ -6596,7 +6438,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "left": -17,
     "top": -7,
   },
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -6639,7 +6480,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7533,7 +7373,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
     "left": -19,
     "top": -9,
   },
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7576,7 +7415,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7769,50 +7607,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
         },
       },
       "separator",
-      {
-        "PanelComponent": [Function],
-        "icon": <svg
-          aria-hidden="true"
-          className=""
-          fill="none"
-          focusable="false"
-          role="img"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          viewBox="0 0 24 24"
-        >
-          <g
-            strokeWidth="1.25"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-              stroke="none"
-            />
-            <path
-              d="M8 5v10a1 1 0 0 0 1 1h10"
-            />
-            <path
-              d="M5 8h10a1 1 0 0 1 1 1v10"
-            />
-          </g>
-        </svg>,
-        "keywords": [
-          "image",
-          "crop",
-        ],
-        "label": "helpDialog.cropStart",
-        "name": "cropEditor",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "menu",
-        },
-        "viewMode": true,
-      },
-      "separator",
       {
         "icon": <svg
           aria-hidden="true"
@@ -8491,7 +8285,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "left": -17,
     "top": -7,
   },
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8534,7 +8327,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8709,50 +8501,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
         },
       },
       "separator",
-      {
-        "PanelComponent": [Function],
-        "icon": <svg
-          aria-hidden="true"
-          className=""
-          fill="none"
-          focusable="false"
-          role="img"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          viewBox="0 0 24 24"
-        >
-          <g
-            strokeWidth="1.25"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-              stroke="none"
-            />
-            <path
-              d="M8 5v10a1 1 0 0 0 1 1h10"
-            />
-            <path
-              d="M5 8h10a1 1 0 0 1 1 1v10"
-            />
-          </g>
-        </svg>,
-        "keywords": [
-          "image",
-          "crop",
-        ],
-        "label": "helpDialog.cropStart",
-        "name": "cropEditor",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "menu",
-        },
-        "viewMode": true,
-      },
-      "separator",
       {
         "icon": <svg
           aria-hidden="true"
@@ -9431,7 +9179,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
     "left": 80,
     "top": 90,
   },
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9474,7 +9221,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "gridStep": 5,
   "height": 100,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,

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

@@ -11,7 +11,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -54,7 +53,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -615,7 +613,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -658,7 +655,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1123,7 +1119,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1166,7 +1161,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1493,7 +1487,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1536,7 +1529,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1864,7 +1856,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1907,7 +1898,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2133,7 +2123,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2176,7 +2165,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2575,7 +2563,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2618,7 +2605,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2876,7 +2862,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2919,7 +2904,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3162,7 +3146,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3205,7 +3188,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3458,7 +3440,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3501,7 +3482,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3746,7 +3726,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3789,7 +3768,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3983,7 +3961,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4026,7 +4003,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4244,7 +4220,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4287,7 +4262,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4519,7 +4493,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4562,7 +4535,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4752,7 +4724,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4795,7 +4766,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4985,7 +4955,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5028,7 +4997,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5216,7 +5184,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5259,7 +5226,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5447,7 +5413,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5490,7 +5455,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5708,7 +5672,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5751,7 +5714,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -6041,7 +6003,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -6084,7 +6045,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -6468,7 +6428,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -6511,7 +6470,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -6848,7 +6806,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -6891,7 +6848,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7169,7 +7125,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7212,7 +7167,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7469,7 +7423,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7512,7 +7465,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7700,7 +7652,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7743,7 +7694,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8057,7 +8007,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8100,7 +8049,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8414,7 +8362,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8457,7 +8404,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8820,7 +8766,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8863,7 +8808,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9109,7 +9053,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9152,7 +9095,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9376,7 +9318,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9419,7 +9360,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9642,7 +9582,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9685,7 +9624,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9875,7 +9813,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9918,7 +9855,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -10178,7 +10114,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -10221,7 +10156,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -10520,7 +10454,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -10563,7 +10496,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -10757,7 +10689,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -10800,7 +10731,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11212,7 +11142,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11255,7 +11184,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11468,7 +11396,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11511,7 +11438,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11709,7 +11635,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11752,7 +11677,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11952,7 +11876,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11995,7 +11918,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -12355,7 +12277,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -12398,7 +12319,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -12604,7 +12524,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -12647,7 +12566,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -12847,7 +12765,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -12890,7 +12807,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -13090,7 +13006,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -13133,7 +13048,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -13339,7 +13253,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -13382,7 +13295,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -13673,7 +13585,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -13716,7 +13627,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -13847,7 +13757,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -13890,7 +13799,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -14137,7 +14045,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14180,7 +14087,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -14406,7 +14312,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14449,7 +14354,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -14683,7 +14587,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14726,7 +14629,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -14846,7 +14748,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14889,7 +14790,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -15544,7 +15444,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -15587,7 +15486,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -16166,7 +16064,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -16209,7 +16106,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -16788,7 +16684,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -16831,7 +16726,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -17502,7 +17396,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -17545,7 +17438,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -18254,7 +18146,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -18297,7 +18188,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -18730,7 +18620,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -18773,7 +18662,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -19254,7 +19142,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -19297,7 +19184,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -19712,7 +19598,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -19755,7 +19640,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati
   "gridStep": 5,
   "height": 0,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,

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

@@ -11,7 +11,6 @@ exports[`given element A and group of elements B and given both are selected whe
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -54,7 +53,6 @@ exports[`given element A and group of elements B and given both are selected whe
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -425,7 +423,6 @@ exports[`given element A and group of elements B and given both are selected whe
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -468,7 +465,6 @@ exports[`given element A and group of elements B and given both are selected whe
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -830,7 +826,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -873,7 +868,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": false,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1374,7 +1368,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1417,7 +1410,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1577,7 +1569,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1620,7 +1611,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -1951,7 +1941,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -1994,7 +1983,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2190,7 +2178,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2233,7 +2220,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2369,7 +2355,6 @@ exports[`regression tests > can drag element that covers another element, while
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2412,7 +2397,6 @@ exports[`regression tests > can drag element that covers another element, while
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2688,7 +2672,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2731,7 +2714,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -2933,7 +2915,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -2976,7 +2957,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3175,7 +3155,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3218,7 +3197,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3404,7 +3382,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3447,7 +3424,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3659,7 +3635,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -3702,7 +3677,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -3969,7 +3943,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4012,7 +3985,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4382,7 +4354,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4425,7 +4396,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4664,7 +4634,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4707,7 +4676,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -4916,7 +4884,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -4959,7 +4926,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5125,7 +5091,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5168,7 +5133,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5323,7 +5287,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5366,7 +5329,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5704,7 +5666,6 @@ exports[`regression tests > drags selected elements from point inside common bou
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -5747,7 +5708,6 @@ exports[`regression tests > drags selected elements from point inside common bou
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -5993,7 +5953,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -6036,7 +5995,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -6800,7 +6758,6 @@ exports[`regression tests > given a group of selected elements with an element t
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -6843,7 +6800,6 @@ exports[`regression tests > given a group of selected elements with an element t
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7129,7 +7085,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7172,7 +7127,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7404,7 +7358,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7447,7 +7400,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7637,7 +7589,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7680,7 +7631,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -7873,7 +7823,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -7916,7 +7865,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8052,7 +8000,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8095,7 +8042,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8231,7 +8177,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8274,7 +8219,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8410,7 +8354,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8453,7 +8396,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8632,7 +8574,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8675,7 +8616,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -8853,7 +8793,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -8896,7 +8835,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9046,7 +8984,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9089,7 +9026,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9268,7 +9204,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9311,7 +9246,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9447,7 +9381,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9490,7 +9423,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9668,7 +9600,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9711,7 +9642,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -9847,7 +9777,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -9890,7 +9819,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -10040,7 +9968,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -10083,7 +10010,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -10219,7 +10145,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -10262,7 +10187,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -10732,7 +10656,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -10775,7 +10698,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11008,7 +10930,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11051,7 +10972,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11133,7 +11053,6 @@ exports[`regression tests > shift click on selected element should deselect it o
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11176,7 +11095,6 @@ exports[`regression tests > shift click on selected element should deselect it o
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11331,7 +11249,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11374,7 +11291,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -11641,7 +11557,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -11684,7 +11599,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -12052,7 +11966,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -12095,7 +12008,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -12664,7 +12576,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -12707,7 +12618,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -12792,7 +12702,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -12835,7 +12744,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -13375,7 +13283,6 @@ exports[`regression tests > switches from group of selected elements to another
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -13418,7 +13325,6 @@ exports[`regression tests > switches from group of selected elements to another
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -13712,7 +13618,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -13755,7 +13660,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -13976,7 +13880,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14019,7 +13922,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -14101,7 +14003,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14144,7 +14045,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -14479,7 +14379,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14522,7 +14421,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -14604,7 +14502,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -14647,7 +14544,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "gridStep": 5,
   "height": 768,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,

packages/excalidraw/tests/cropElement.test.tsx

@@ -1,342 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { vi } from "vitest";
-import { Keyboard, Pointer, UI } from "./helpers/ui";
-import type { ExcalidrawImageElement, ImageCrop } from "../element/types";
-import { act, GlobalTestState, render } from "./test-utils";
-import { Excalidraw, exportToCanvas, exportToSvg } from "..";
-import { API } from "./helpers/api";
-import type { NormalizedZoomValue } from "../types";
-import { KEYS } from "../keys";
-import { duplicateElement } from "../element";
-import { cloneJSON } from "../utils";
-import { actionFlipHorizontal, actionFlipVertical } from "../actions";
-
-const { h } = window;
-const mouse = new Pointer("mouse");
-
-beforeEach(async () => {
-  // Unmount ReactDOM from root
-  ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
-
-  mouse.reset();
-  localStorage.clear();
-  sessionStorage.clear();
-  vi.clearAllMocks();
-
-  Object.assign(document, {
-    elementFromPoint: () => GlobalTestState.canvas,
-  });
-  await render(<Excalidraw autoFocus={true} handleKeyboardGlobally={true} />);
-  API.setAppState({
-    zoom: {
-      value: 1 as NormalizedZoomValue,
-    },
-  });
-
-  const image = API.createElement({ type: "image", width: 200, height: 100 });
-  API.setElements([image]);
-  API.setAppState({
-    selectedElementIds: {
-      [image.id]: true,
-    },
-  });
-});
-
-const generateRandomNaturalWidthAndHeight = (image: ExcalidrawImageElement) => {
-  const initialWidth = image.width;
-  const initialHeight = image.height;
-
-  const scale = 1 + Math.random() * 5;
-
-  return {
-    naturalWidth: initialWidth * scale,
-    naturalHeight: initialHeight * scale,
-  };
-};
-
-const compareCrops = (cropA: ImageCrop, cropB: ImageCrop) => {
-  (Object.keys(cropA) as [keyof ImageCrop]).forEach((key) => {
-    const propA = cropA[key];
-    const propB = cropB[key];
-
-    expect(propA as number).toBeCloseTo(propB as number);
-  });
-};
-
-describe("Enter and leave the crop editor", () => {
-  it("enter the editor by double clicking", () => {
-    const image = h.elements[0];
-    expect(h.state.croppingElementId).toBe(null);
-    mouse.doubleClickOn(image);
-    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.croppingElementId).toBe(null);
-    Keyboard.keyDown(KEYS.ENTER);
-    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.croppingElementId).not.toBe(null);
-
-    mouse.click(image.x - 20, image.y - 20);
-    expect(h.state.croppingElementId).toBe(null);
-  });
-
-  it("leave the editor by pressing escape", () => {
-    const image = h.elements[0];
-    mouse.doubleClickOn(image);
-    expect(h.state.croppingElementId).not.toBe(null);
-
-    Keyboard.keyDown(KEYS.ESCAPE);
-    expect(h.state.croppingElementId).toBe(null);
-  });
-});
-
-describe("Crop an image", () => {
-  it("Cropping changes the dimension", async () => {
-    const image = h.elements[0] as ExcalidrawImageElement;
-
-    const initialWidth = image.width;
-    const initialHeight = image.height;
-
-    const { naturalWidth, naturalHeight } =
-      generateRandomNaturalWidthAndHeight(image);
-
-    UI.crop(image, "w", naturalWidth, naturalHeight, [initialWidth / 2, 0]);
-
-    expect(image.width).toBeLessThan(initialWidth);
-    UI.crop(image, "n", naturalWidth, naturalHeight, [0, initialHeight / 2]);
-    expect(image.height).toBeLessThan(initialHeight);
-  });
-
-  it("Cropping has minimal sizes", async () => {
-    const image = h.elements[0] as ExcalidrawImageElement;
-    const initialWidth = image.width;
-    const initialHeight = image.height;
-
-    const { naturalWidth, naturalHeight } =
-      generateRandomNaturalWidthAndHeight(image);
-
-    UI.crop(image, "w", naturalWidth, naturalHeight, [initialWidth, 0]);
-    expect(image.width).toBeLessThan(initialWidth);
-    expect(image.width).toBeGreaterThan(0);
-    UI.crop(image, "w", naturalWidth, naturalHeight, [-initialWidth, 0]);
-    UI.crop(image, "n", naturalWidth, naturalHeight, [0, initialHeight]);
-    expect(image.height).toBeLessThan(initialHeight);
-    expect(image.height).toBeGreaterThan(0);
-  });
-
-  it("Preserve aspect ratio", async () => {
-    let image = h.elements[0] as ExcalidrawImageElement;
-    const initialWidth = image.width;
-    const initialHeight = image.height;
-
-    const { naturalWidth, naturalHeight } =
-      generateRandomNaturalWidthAndHeight(image);
-
-    UI.crop(image, "w", naturalWidth, naturalHeight, [initialWidth / 3, 0]);
-
-    let resizedWidth = image.width;
-    let resizedHeight = image.height;
-
-    // max height, cropping should not change anything
-    UI.crop(
-      image,
-      "w",
-      naturalWidth,
-      naturalHeight,
-      [-initialWidth / 3, 0],
-      true,
-    );
-    expect(image.width).toBe(resizedWidth);
-    expect(image.height).toBe(resizedHeight);
-
-    // re-crop to initial state
-    UI.crop(image, "w", naturalWidth, naturalHeight, [-initialWidth / 3, 0]);
-    // change crop height and width
-    UI.crop(image, "s", naturalWidth, naturalHeight, [0, -initialHeight / 2]);
-    UI.crop(image, "e", naturalWidth, naturalHeight, [-initialWidth / 3, 0]);
-
-    resizedWidth = image.width;
-    resizedHeight = image.height;
-
-    // test corner handle aspect ratio preserving
-    UI.crop(image, "se", naturalWidth, naturalHeight, [initialWidth, 0], true);
-    expect(image.width / image.height).toBe(resizedWidth / resizedHeight);
-    expect(image.width).toBeLessThanOrEqual(initialWidth);
-    expect(image.height).toBeLessThanOrEqual(initialHeight);
-
-    // reset
-    image = API.createElement({ type: "image", width: 200, height: 100 });
-    API.setElements([image]);
-    API.setAppState({
-      selectedElementIds: {
-        [image.id]: true,
-      },
-    });
-
-    // 50 x 50 square
-    UI.crop(image, "nw", naturalWidth, naturalHeight, [150, 50]);
-    UI.crop(image, "n", naturalWidth, naturalHeight, [0, -100], true);
-    expect(image.width).toBeCloseTo(image.height);
-    // image is at the corner, not space to its right to expand, should not be able to resize
-    expect(image.height).toBeCloseTo(50);
-
-    UI.crop(image, "nw", naturalWidth, naturalHeight, [-150, -100], true);
-    expect(image.width).toBeCloseTo(image.height);
-    // max height should be reached
-    expect(image.height).toBeCloseTo(initialHeight);
-    expect(image.width).toBe(initialHeight);
-  });
-});
-
-describe("Cropping and other features", async () => {
-  it("Cropping works independently of duplication", async () => {
-    const image = h.elements[0] as ExcalidrawImageElement;
-    const initialWidth = image.width;
-    const initialHeight = image.height;
-
-    const { naturalWidth, naturalHeight } =
-      generateRandomNaturalWidthAndHeight(image);
-
-    UI.crop(image, "nw", naturalWidth, naturalHeight, [
-      initialWidth / 2,
-      initialHeight / 2,
-    ]);
-    Keyboard.keyDown(KEYS.ESCAPE);
-    const duplicatedImage = duplicateElement(null, new Map(), image, {});
-    act(() => {
-      h.app.scene.insertElement(duplicatedImage);
-    });
-
-    expect(duplicatedImage.width).toBe(image.width);
-    expect(duplicatedImage.height).toBe(image.height);
-
-    UI.crop(duplicatedImage, "nw", naturalWidth, naturalHeight, [
-      -initialWidth / 2,
-      -initialHeight / 2,
-    ]);
-    expect(duplicatedImage.width).toBe(initialWidth);
-    expect(duplicatedImage.height).toBe(initialHeight);
-    const resizedWidth = image.width;
-    const resizedHeight = image.height;
-
-    expect(image.width).not.toBe(duplicatedImage.width);
-    expect(image.height).not.toBe(duplicatedImage.height);
-    UI.crop(duplicatedImage, "se", naturalWidth, naturalHeight, [
-      -initialWidth / 1.5,
-      -initialHeight / 1.5,
-    ]);
-    expect(duplicatedImage.width).not.toBe(initialWidth);
-    expect(image.width).toBe(resizedWidth);
-    expect(duplicatedImage.height).not.toBe(initialHeight);
-    expect(image.height).toBe(resizedHeight);
-  });
-
-  it("Resizing should not affect crop", async () => {
-    const image = h.elements[0] as ExcalidrawImageElement;
-    const initialWidth = image.width;
-    const initialHeight = image.height;
-
-    const { naturalWidth, naturalHeight } =
-      generateRandomNaturalWidthAndHeight(image);
-
-    UI.crop(image, "nw", naturalWidth, naturalHeight, [
-      initialWidth / 2,
-      initialHeight / 2,
-    ]);
-    const cropBeforeResizing = image.crop;
-    const cropBeforeResizingCloned = cloneJSON(image.crop) as ImageCrop;
-    expect(cropBeforeResizing).not.toBe(null);
-
-    UI.crop(image, "e", naturalWidth, naturalHeight, [200, 0]);
-    expect(cropBeforeResizing).toBe(image.crop);
-    compareCrops(cropBeforeResizingCloned, image.crop!);
-
-    UI.resize(image, "s", [0, -100]);
-    expect(cropBeforeResizing).toBe(image.crop);
-    compareCrops(cropBeforeResizingCloned, image.crop!);
-
-    UI.resize(image, "ne", [-50, -50]);
-    expect(cropBeforeResizing).toBe(image.crop);
-    compareCrops(cropBeforeResizingCloned, image.crop!);
-  });
-
-  it("Flipping does not change crop", async () => {
-    const image = h.elements[0] as ExcalidrawImageElement;
-    const initialWidth = image.width;
-    const initialHeight = image.height;
-
-    const { naturalWidth, naturalHeight } =
-      generateRandomNaturalWidthAndHeight(image);
-
-    mouse.doubleClickOn(image);
-    expect(h.state.croppingElementId).not.toBe(null);
-    UI.crop(image, "nw", naturalWidth, naturalHeight, [
-      initialWidth / 2,
-      initialHeight / 2,
-    ]);
-    Keyboard.keyDown(KEYS.ESCAPE);
-    const cropBeforeResizing = image.crop;
-    const cropBeforeResizingCloned = cloneJSON(image.crop) as ImageCrop;
-
-    API.executeAction(actionFlipHorizontal);
-    expect(image.crop).toBe(cropBeforeResizing);
-    compareCrops(cropBeforeResizingCloned, image.crop!);
-
-    API.executeAction(actionFlipVertical);
-    expect(image.crop).toBe(cropBeforeResizing);
-    compareCrops(cropBeforeResizingCloned, image.crop!);
-  });
-
-  it("Exports should preserve crops", async () => {
-    const image = h.elements[0] as ExcalidrawImageElement;
-    const initialWidth = image.width;
-    const initialHeight = image.height;
-
-    const { naturalWidth, naturalHeight } =
-      generateRandomNaturalWidthAndHeight(image);
-
-    mouse.doubleClickOn(image);
-    expect(h.state.croppingElementId).not.toBe(null);
-    UI.crop(image, "nw", naturalWidth, naturalHeight, [
-      initialWidth / 2,
-      initialHeight / 4,
-    ]);
-    Keyboard.keyDown(KEYS.ESCAPE);
-    const widthToHeightRatio = image.width / image.height;
-
-    const canvas = await exportToCanvas({
-      elements: [image],
-      appState: h.state,
-      files: h.app.files,
-      exportPadding: 0,
-    });
-    const exportedCanvasRatio = canvas.width / canvas.height;
-
-    expect(widthToHeightRatio).toBeCloseTo(exportedCanvasRatio);
-
-    const svg = await exportToSvg({
-      elements: [image],
-      appState: h.state,
-      files: h.app.files,
-      exportPadding: 0,
-    });
-    const svgWidth = svg.getAttribute("width");
-    const svgHeight = svg.getAttribute("height");
-
-    expect(svgWidth).toBeDefined();
-    expect(svgHeight).toBeDefined();
-
-    const exportedSvgRatio = Number(svgWidth) / Number(svgHeight);
-    expect(widthToHeightRatio).toBeCloseTo(exportedSvgRatio);
-  });
-});

packages/excalidraw/tests/helpers/ui.ts

@@ -1,3 +1,4 @@
+import type { ToolType } from "../../types";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -8,7 +9,6 @@ import type {
   ExcalidrawDiamondElement,
   ExcalidrawTextContainer,
   ExcalidrawTextElementWithContainer,
-  ExcalidrawImageElement,
 } from "../../element/types";
 import type { TransformHandleType } from "../../element/transformHandles";
 import {
@@ -35,8 +35,6 @@ import { arrayToMap } from "../../utils";
 import { createTestHook } from "../../components/App";
 import type { GlobalPoint, LocalPoint, Radians } from "../../../math";
 import { pointFrom, pointRotateRads } from "../../../math";
-import { cropElement } from "../../element/cropElement";
-import type { ToolType } from "../../types";
 
 // so that window.h is available when App.tsx is not imported as well.
 createTestHook();
@@ -563,38 +561,6 @@ export class UI {
     return transform(element, handle, mouseMove, keyboardModifiers);
   }
 
-  static crop(
-    element: ExcalidrawImageElement,
-    handle: TransformHandleDirection,
-    naturalWidth: number,
-    naturalHeight: number,
-    mouseMove: [deltaX: number, deltaY: number],
-    keepAspectRatio = false,
-  ) {
-    const handleCoords = getTransformHandles(
-      element,
-      h.state.zoom,
-      arrayToMap(h.elements),
-      "mouse",
-      {},
-    )[handle]!;
-
-    const clientX = handleCoords[0] + handleCoords[2] / 2;
-    const clientY = handleCoords[1] + handleCoords[3] / 2;
-
-    const mutations = cropElement(
-      element,
-      handle,
-      naturalWidth,
-      naturalHeight,
-      clientX + mouseMove[0],
-      clientY + mouseMove[1],
-      keepAspectRatio ? element.width / element.height : undefined,
-    );
-
-    API.updateElement(element, mutations);
-  }
-
   static rotate(
     element: ExcalidrawElement | ExcalidrawElement[],
     mouseMove: [deltaX: number, deltaY: number],

packages/excalidraw/types.ts

@@ -176,8 +176,6 @@ export type StaticCanvasAppState = Readonly<
     gridStep: AppState["gridStep"];
     frameRendering: AppState["frameRendering"];
     currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
-    // Cropping
-    croppingElementId: AppState["croppingElementId"];
   }
 >;
 
@@ -200,9 +198,6 @@ export type InteractiveCanvasAppState = Readonly<
     snapLines: AppState["snapLines"];
     zenModeEnabled: AppState["zenModeEnabled"];
     editingTextElement: AppState["editingTextElement"];
-    // Cropping
-    isCropping: AppState["isCropping"];
-    croppingElementId: AppState["croppingElementId"];
     // Search matches
     searchMatches: AppState["searchMatches"];
   }
@@ -224,7 +219,6 @@ export type ObservedElementsAppState = {
   editingLinearElementId: LinearElementEditor["elementId"] | null;
   // Right now it's coupled to `editingLinearElement`, ideally it should not be really needed as we already have selectedElementIds & editingLinearElementId
   selectedLinearElementId: LinearElementEditor["elementId"] | null;
-  croppingElementId: AppState["croppingElementId"];
 };
 
 export interface AppState {
@@ -392,11 +386,6 @@ export interface AppState {
   userToFollow: UserToFollow | null;
   /** the socket ids of the users following the current user */
   followedBy: Set<SocketId>;
-
-  /** image cropping */
-  isCropping: boolean;
-  croppingElementId: ExcalidrawElement["id"] | null;
-
   searchMatches: readonly SearchMatch[];
 }
 

packages/math/utils.ts

@@ -28,6 +28,3 @@ export const average = (a: number, b: number) => (a + b) / 2;
 export const isFiniteNumber = (value: any): value is number => {
   return typeof value === "number" && Number.isFinite(value);
 };
-
-export const isCloseTo = (a: number, b: number, precision = PRECISION) =>
-  Math.abs(a - b) < precision;

packages/math/vector.ts

@@ -139,10 +139,3 @@ export const vectorNormalize = (v: Vector): Vector => {
 
   return vector(v[0] / m, v[1] / m);
 };
-
-/**
- * Project the first vector onto the second vector
- */
-export const vectorProjection = (a: Vector, b: Vector) => {
-  return vectorScale(b, vectorDot(a, b) / vectorDot(b, b));
-};

packages/utils/__snapshots__/export.test.ts.snap

@@ -11,7 +11,6 @@ exports[`exportToSvg > with default arguments 1`] = `
   },
   "collaborators": Map {},
   "contextMenu": null,
-  "croppingElementId": null,
   "currentChartType": "bar",
   "currentHoveredFontFamily": null,
   "currentItemArrowType": "round",
@@ -54,7 +53,6 @@ exports[`exportToSvg > with default arguments 1`] = `
   "gridSize": 20,
   "gridStep": 5,
   "isBindingEnabled": true,
-  "isCropping": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,

setupTests.ts

@@ -104,7 +104,7 @@ console.error = (...args) => {
   // the react's act() warning usually doesn't contain any useful stack trace
   // so we're catching the log and re-logging the message with the test name,
   // also stripping the actual component stack trace as it's not useful
-  if (args[0]?.includes?.("act(")) {
+  if (args[0]?.includes("act(")) {
     _consoleError(
       yellow(
         `<<< WARNING: test "${