Fix lint

Warn to save content
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2024-09-23 12:47:04 +02:00 · 2024-09-23 12:12:58 +02:00
106 changed files with 1158 additions and 3225 deletions
@@ -126,6 +126,8 @@ import DebugCanvas, {
  loadSavedDebugState,
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
+import type { SaveWarningRef } from "./components/SaveWarning";
+import { SaveWarning } from "./components/SaveWarning";

 polyfill();

@@ -331,6 +333,8 @@ const ExcalidrawWrapper = () => {

  const [langCode, setLangCode] = useAppLangCode();

+  const activityRef = useRef<SaveWarningRef | null>(null);
+
  // initial state
  // ---------------------------------------------------------------------------

@@ -615,6 +619,8 @@ const ExcalidrawWrapper = () => {
      collabAPI.syncElements(elements);
    }

+    activityRef.current?.activity();
+
    // this check is redundant, but since this is a hot path, it's best
    // not to evaludate the nested expression every time
    if (!LocalData.isSavePaused()) {
@@ -856,6 +862,7 @@ const ExcalidrawWrapper = () => {
          setTheme={(theme) => setAppTheme(theme)}
          refresh={() => forceRefresh((prev) => !prev)}
        />
+        <SaveWarning ref={activityRef} />
        <AppWelcomeScreen
          onCollabDialogOpen={onCollabDialogOpen}
          isCollabEnabled={!isCollabDisabled}
@@ -0,0 +1,40 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { t } from "../../packages/excalidraw/i18n";
+import { getShortcutKey } from "../../packages/excalidraw/utils";
+
+export type SaveWarningRef = {
+  activity: () => Promise<void>;
+};
+
+export const SaveWarning = forwardRef<SaveWarningRef, {}>((props, ref) => {
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    /**
+     * Call this API method via the ref to hide warning message
+     * and start an idle timer again.
+     */
+    activity: async () => {
+      if (timerRef.current != null) {
+        clearTimeout(timerRef.current);
+        dialogRef.current?.classList.remove("animate");
+      }
+
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        dialogRef.current?.classList.add("animate");
+      }, 5000);
+    },
+  }));
+
+  return (
+    <div ref={dialogRef} className="alert-save">
+      <div className="dialog">
+        {t("alerts.saveYourContent", {
+          shortcut: getShortcutKey("CtrlOrCmd + S"),
+        })}
+      </div>
+    </div>
+  );
+});
@@ -130,6 +130,15 @@
    </script>
    <% } %>

+    <!-- For Nunito only preload the latin range, which should be good enough for now -->
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
    <!-- Register Assistant as the UI font, before the scene inits -->
    <link
      rel="stylesheet"
@@ -18,6 +18,43 @@
    margin-inline-start: auto;
  }

+  .alert-save {
+    position: absolute;
+    z-index: 10;
+    left: 0;
+    right: 0;
+    bottom: 10vh;
+    margin-inline: auto;
+    width: fit-content;
+
+    opacity: 0;
+    transition: all 0s;
+
+    &.animate {
+      opacity: 1;
+      transition: all 0.2s ease-in;
+    }
+
+    .dialog {
+      margin-inline: 10px;
+      padding: 1rem;
+      padding-inline: 1.25rem;
+
+      resize: none;
+      white-space: pre-wrap;
+      box-sizing: border-box;
+
+      background-color: var(--color-warning);
+      border-radius: var(--border-radius-md);
+      border: 1px solid var(--dialog-border-color);
+
+      font-size: 0.875rem;
+      text-align: center;
+      line-height: 1.5;
+      color: var(--color-text-warning);
+    }
+  }
+
  .encrypted-icon {
    border-radius: var(--space-factor);
    color: var(--color-primary);
@@ -48,8 +48,6 @@ export default defineConfig({
      },
    },
    sourcemap: true,
-    // don't auto-inline small assets (i.e. fonts hosted on CDN)
-    assetsInlineLimit: 0,
  },
  plugins: [
    woff2BrowserPlugin(),
@@ -15,8 +15,6 @@ Please add the latest change on the top under the correct section.

 ### Features

- Prefer user defined coordinates and dimensions when creating a frame using [`convertToExcalidrawElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements) [#8517](https://github.com/excalidraw/excalidraw/pull/8517)
-
 - `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)

 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)
@@ -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)}
-      />
-    );
-  },
-});
@@ -15,7 +15,7 @@ import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import type { AppState } from "../types";
 import { resetCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { isPathALoop } from "../shapes";

 export const actionFinalize = register({
@@ -115,7 +115,7 @@ export const actionFinalize = register({
          mutateElement(multiPointElement, {
            points: linePoints.map((p, index) =>
              index === linePoints.length - 1
-                ? pointFrom(firstPoint[0], firstPoint[1])
+                ? point(firstPoint[0], firstPoint[1])
                : p,
            ),
          });
@@ -2,7 +2,7 @@ import React from "react";
 import { Excalidraw } from "../index";
 import { render } from "../tests/test-utils";
 import { API } from "../tests/helpers/api";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";

 const { h } = window;
@@ -50,11 +50,11 @@ describe("flipping re-centers selection", () => {
        startArrowhead: null,
        endArrowhead: "arrow",
        points: [
-          pointFrom(0, 0),
-          pointFrom(0, -35),
-          pointFrom(-90.9, -35),
-          pointFrom(-90.9, 204.9),
-          pointFrom(65.1, 204.9),
+          point(0, 0),
+          point(0, -35),
+          point(-90.9, -35),
+          point(-90.9, 204.9),
+          point(65.1, 204.9),
        ],
        elbowed: true,
      }),
@@ -116,7 +116,7 @@ import {
 import { mutateElbowArrow } from "../element/routing";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import type { LocalPoint } from "../../math";
-import { pointFrom, vector } from "../../math";
+import { point, vector } from "../../math";

 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;

@@ -1651,7 +1651,7 @@ export const actionChangeArrowType = register({
            elementsMap,
            [finalStartPoint, finalEndPoint].map(
              (p): LocalPoint =>
-                pointFrom(p[0] - newElement.x, p[1] - newElement.y),
+                point(p[0] - newElement.x, p[1] - newElement.y),
            ),
            vector(0, 0),
            {
@@ -88,5 +88,3 @@ export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";

 export { actionToggleSearchMenu } from "./actionToggleSearchMenu";
-
-export { actionToggleCropEditor } from "./actionCropEditor";
@@ -138,8 +138,7 @@ export type ActionName =
  | "commandPalette"
  | "autoResize"
  | "elementStats"
-  | "searchMenu"
-  | "cropEditor";
+  | "searchMenu";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@@ -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 },
 });

@@ -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<
-  ElementUpdate<Ordered<T>>,
-  "seed"
->;
+type ElementPartial = Omit<ElementUpdate<OrderedExcalidrawElement>, "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;
@@ -1,5 +1,5 @@
 import type { Radians } from "../math";
-import { pointFrom } from "../math";
+import { point } from "../math";
 import {
  COLOR_PALETTE,
  DEFAULT_CHART_COLOR_INDEX,
@@ -260,7 +260,7 @@ const chartLines = (
    x,
    y,
    width: chartWidth,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    points: [point(0, 0), point(chartWidth, 0)],
  });

  const yLine = newLinearElement({
@@ -271,7 +271,7 @@ const chartLines = (
    x,
    y,
    height: chartHeight,
-    points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
+    points: [point(0, 0), point(0, -chartHeight)],
  });

  const maxLine = newLinearElement({
@@ -284,7 +284,7 @@ const chartLines = (
    strokeStyle: "dotted",
    width: chartWidth,
    opacity: GRID_OPACITY,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    points: [point(0, 0), point(chartWidth, 0)],
  });

  return [xLine, yLine, maxLine];
@@ -441,7 +441,7 @@ const chartTypeLine = (
      height: cy,
      strokeStyle: "dotted",
      opacity: GRID_OPACITY,
-      points: [pointFrom(0, 0), pointFrom(0, cy)],
+      points: [point(0, 0), point(0, cy)],
    });
  });

@@ -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>
@@ -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 {
-  clamp,
-  pointFrom,
-  pointDistance,
-  vector,
-  pointRotateRads,
-  vectorScale,
-  vectorFromPoint,
-  vectorSubtract,
-  vectorDot,
-  vectorNormalize,
-} from "../../math";
-import { cropElement } from "../element/cropElement";
+import { point, pointDistance, vector } from "../../math";

 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,10 +4907,10 @@ 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);
+      return isPointInShape(point(x, y), selectionShape);
    }

    // take bound text element into consideration for hit collision as well
@@ -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(
@@ -5326,7 +5269,7 @@ class App extends React.Component<AppProps, AppState> {
          element,
          this.scene.getNonDeletedElementsMap(),
          this.state,
-          pointFrom(scenePointer.x, scenePointer.y),
+          point(scenePointer.x, scenePointer.y),
          this.device.editor.isMobile,
        )
      );
@@ -5338,14 +5281,11 @@ class App extends React.Component<AppProps, AppState> {
    isTouchScreen: boolean,
  ) => {
    const draggedDistance = pointDistance(
-      pointFrom(
+      point(
        this.lastPointerDownEvent!.clientX,
        this.lastPointerDownEvent!.clientY,
      ),
-      pointFrom(
-        this.lastPointerUpEvent!.clientX,
-        this.lastPointerUpEvent!.clientY,
-      ),
+      point(this.lastPointerUpEvent!.clientX, this.lastPointerUpEvent!.clientY),
    );
    if (
      !this.hitLinkElement ||
@@ -5364,7 +5304,7 @@ class App extends React.Component<AppProps, AppState> {
      this.hitLinkElement,
      elementsMap,
      this.state,
-      pointFrom(lastPointerDownCoords.x, lastPointerDownCoords.y),
+      point(lastPointerDownCoords.x, lastPointerDownCoords.y),
      this.device.editor.isMobile,
    );
    const lastPointerUpCoords = viewportCoordsToSceneCoords(
@@ -5375,7 +5315,7 @@ class App extends React.Component<AppProps, AppState> {
      this.hitLinkElement,
      elementsMap,
      this.state,
-      pointFrom(lastPointerUpCoords.x, lastPointerUpCoords.y),
+      point(lastPointerUpCoords.x, lastPointerUpCoords.y),
      this.device.editor.isMobile,
    );
    if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
@@ -5625,7 +5565,7 @@ class App extends React.Component<AppProps, AppState> {
        // threshold, add a point
        if (
          pointDistance(
-            pointFrom(scenePointerX - rx, scenePointerY - ry),
+            point(scenePointerX - rx, scenePointerY - ry),
            lastPoint,
          ) >= LINE_CONFIRM_THRESHOLD
        ) {
@@ -5634,7 +5574,7 @@ class App extends React.Component<AppProps, AppState> {
            {
              points: [
                ...points,
-                pointFrom<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
+                point<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
              ],
            },
            false,
@@ -5648,7 +5588,7 @@ class App extends React.Component<AppProps, AppState> {
        points.length > 2 &&
        lastCommittedPoint &&
        pointDistance(
-          pointFrom(scenePointerX - rx, scenePointerY - ry),
+          point(scenePointerX - rx, scenePointerY - ry),
          lastCommittedPoint,
        ) < LINE_CONFIRM_THRESHOLD
      ) {
@@ -5696,7 +5636,7 @@ class App extends React.Component<AppProps, AppState> {
            this.scene.getNonDeletedElementsMap(),
            [
              ...points.slice(0, -1),
-              pointFrom<LocalPoint>(
+              point<LocalPoint>(
                lastCommittedX + dxFromLastCommitted,
                lastCommittedY + dyFromLastCommitted,
              ),
@@ -5715,7 +5655,7 @@ class App extends React.Component<AppProps, AppState> {
            {
              points: [
                ...points.slice(0, -1),
-                pointFrom<LocalPoint>(
+                point<LocalPoint>(
                  lastCommittedX + dxFromLastCommitted,
                  lastCommittedY + dyFromLastCommitted,
                ),
@@ -5944,8 +5884,8 @@ class App extends React.Component<AppProps, AppState> {
    };

    const distance = pointDistance(
-      pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
-      pointFrom(scenePointer.x, scenePointer.y),
+      point(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
+      point(scenePointer.x, scenePointer.y),
    );
    const threshold = this.getElementHitThreshold();
    const p = { ...pointerDownState.lastCoords };
@@ -6457,7 +6397,7 @@ class App extends React.Component<AppProps, AppState> {
          this.hitLinkElement,
          this.scene.getNonDeletedElementsMap(),
          this.state,
-          pointFrom(scenePointer.x, scenePointer.y),
+          point(scenePointer.x, scenePointer.y),
        )
      ) {
        this.handleEmbeddableCenterClick(this.hitLinkElement);
@@ -6793,24 +6733,11 @@ class App extends React.Component<AppProps, AppState> {
            this.device,
          );
        if (elementWithTransformHandleType != null) {
-          if (
-            elementWithTransformHandleType.transformHandleType === "rotation"
-          ) {
-            this.setState({
-              resizingElement: elementWithTransformHandleType.element,
-            });
-            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;
-          }
+          this.setState({
+            resizingElement: elementWithTransformHandleType.element,
+          });
+          pointerDownState.resize.handleType =
+            elementWithTransformHandleType.transformHandleType;
        }
      } else if (selectedElements.length > 1) {
        pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(
@@ -6877,13 +6804,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(
@@ -7168,7 +7088,7 @@ class App extends React.Component<AppProps, AppState> {
      simulatePressure,
      locked: false,
      frameId: topLayerFrame ? topLayerFrame.id : null,
-      points: [pointFrom<LocalPoint>(0, 0)],
+      points: [point<LocalPoint>(0, 0)],
      pressures: simulatePressure ? [] : [event.pressure],
    });

@@ -7377,10 +7297,7 @@ class App extends React.Component<AppProps, AppState> {
        multiElement.points.length > 1 &&
        lastCommittedPoint &&
        pointDistance(
-          pointFrom(
-            pointerDownState.origin.x - rx,
-            pointerDownState.origin.y - ry,
-          ),
+          point(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry),
          lastCommittedPoint,
        ) < LINE_CONFIRM_THRESHOLD
      ) {
@@ -7482,7 +7399,7 @@ class App extends React.Component<AppProps, AppState> {
        };
      });
      mutateElement(element, {
-        points: [...element.points, pointFrom<LocalPoint>(0, 0)],
+        points: [...element.points, point<LocalPoint>(0, 0)],
      });
      const boundElement = getHoveredElementForBinding(
        pointerDownState.origin,
@@ -7685,11 +7602,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 +7624,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;
@@ -7738,8 +7652,8 @@ class App extends React.Component<AppProps, AppState> {
      ) {
        if (
          pointDistance(
-            pointFrom(pointerCoords.x, pointerCoords.y),
-            pointFrom(pointerDownState.origin.x, pointerDownState.origin.y),
+            point(pointerCoords.x, pointerCoords.y),
+            point(pointerDownState.origin.x, pointerDownState.origin.y),
          ) < DRAGGING_THRESHOLD
        ) {
          return;
@@ -7748,9 +7662,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 +7835,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 +7968,6 @@ class App extends React.Component<AppProps, AppState> {
            this.maybeCacheVisibleGaps(event, selectedElements, true);
            this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
          }
-
          return;
        }
      }
@@ -8182,7 +8002,7 @@ class App extends React.Component<AppProps, AppState> {
            mutateElement(
              newElement,
              {
-                points: [...points, pointFrom<LocalPoint>(dx, dy)],
+                points: [...points, point<LocalPoint>(dx, dy)],
                pressures,
              },
              false,
@@ -8211,7 +8031,7 @@ class App extends React.Component<AppProps, AppState> {
            mutateElement(
              newElement,
              {
-                points: [...points, pointFrom<LocalPoint>(dx, dy)],
+                points: [...points, point<LocalPoint>(dx, dy)],
              },
              false,
            );
@@ -8219,7 +8039,7 @@ class App extends React.Component<AppProps, AppState> {
            mutateElbowArrow(
              newElement,
              elementsMap,
-              [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
+              [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
              vector(0, 0),
              undefined,
              {
@@ -8231,7 +8051,7 @@ class App extends React.Component<AppProps, AppState> {
            mutateElement(
              newElement,
              {
-                points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
+                points: [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
              },
              false,
            );
@@ -8396,18 +8216,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 +8234,6 @@ class App extends React.Component<AppProps, AppState> {
        originSnapOffset: null,
      }));

-      this.lastPointerMoveCoords = null;
-
      SnapCache.setReferenceSnapPoints(null);
      SnapCache.setVisibleGaps(null);

@@ -8545,9 +8360,9 @@ class App extends React.Component<AppProps, AppState> {
          : [...newElement.pressures, childEvent.pressure];

        mutateElement(newElement, {
-          points: [...points, pointFrom<LocalPoint>(dx, dy)],
+          points: [...points, point<LocalPoint>(dx, dy)],
          pressures,
-          lastCommittedPoint: pointFrom<LocalPoint>(dx, dy),
+          lastCommittedPoint: point<LocalPoint>(dx, dy),
        });

        this.actionManager.executeAction(actionFinalize);
@@ -8594,7 +8409,7 @@ class App extends React.Component<AppProps, AppState> {
          mutateElement(newElement, {
            points: [
              ...newElement.points,
-              pointFrom<LocalPoint>(
+              point<LocalPoint>(
                pointerCoords.x - newElement.x,
                pointerCoords.y - newElement.y,
              ),
@@ -8901,20 +8716,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;

@@ -8922,8 +8723,8 @@ class App extends React.Component<AppProps, AppState> {
        this.eraserTrail.endPath();

        const draggedDistance = pointDistance(
-          pointFrom(pointerStart.clientX, pointerStart.clientY),
-          pointFrom(pointerEnd.clientX, pointerEnd.clientY),
+          point(pointerStart.clientX, pointerStart.clientY),
+          point(pointerEnd.clientX, pointerEnd.clientY),
        );

        if (draggedDistance === 0) {
@@ -9170,12 +8971,7 @@ class App extends React.Component<AppProps, AppState> {
        this.store.shouldCaptureIncrement();
      }

-      if (
-        pointerDownState.drag.hasOccurred ||
-        isResizing ||
-        isRotating ||
-        isCropping
-      ) {
+      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
        // We only allow binding via linear elements, specifically via dragging
        // the endpoints ("start" or "end").
        const linearElements = this.scene
@@ -9389,7 +9185,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 +9338,7 @@ class App extends React.Component<AppProps, AppState> {
    }
  };

-  initializeImageDimensions = (
+  private initializeImageDimensions = (
    imageElement: ExcalidrawImageElement,
    forceNaturalSize = false,
  ) => {
@@ -9590,13 +9386,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, {
-        x,
-        y,
-        width,
-        height,
-        crop: null,
-      });
+      mutateElement(imageElement, { x, y, width, height });
    }
  };

@@ -10135,83 +9925,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 +9941,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])) ||
-      // Do not resize when in crop mode
-      this.state.croppingElementId
+      (selectedElements.length === 1 && isElbowArrow(selectedElements[0]))
    ) {
      return false;
    }
@@ -10405,8 +10116,6 @@ class App extends React.Component<AppProps, AppState> {
      actionSelectAllElementsInFrame,
      actionRemoveAllElementsFromFrame,
      CONTEXT_MENU_SEPARATOR,
-      actionToggleCropEditor,
-      CONTEXT_MENU_SEPARATOR,
      ...options,
      CONTEXT_MENU_SEPARATOR,
      actionCopyStyles,
@@ -279,7 +279,6 @@ function CommandPaletteInner({
        actionManager.actions.increaseFontSize,
        actionManager.actions.decreaseFontSize,
        actionManager.actions.toggleLinearEditor,
-        actionManager.actions.cropEditor,
        actionLink,
      ].map((action: Action) =>
        actionToCommand(
@@ -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")}
@@ -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 &&
@@ -20,7 +20,7 @@ import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { pointFrom, type GlobalPoint } from "../../../math";
+import { point, type GlobalPoint } from "../../../math";

 interface MultiDimensionProps {
  property: "width" | "height";
@@ -182,7 +182,7 @@ const handleDimensionChange: DragInputCallbackType<
          nextHeight,
          initialHeight,
          aspectRatio,
-          pointFrom(x1, y1),
+          point(x1, y1),
          property,
          latestElements,
          originalElements,
@@ -287,7 +287,7 @@ const handleDimensionChange: DragInputCallbackType<
        nextHeight,
        initialHeight,
        aspectRatio,
-        pointFrom(x1, y1),
+        point(x1, y1),
        property,
        latestElements,
        originalElements,
@@ -13,7 +13,7 @@ import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import type { AppState } from "../../types";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";

 interface MultiPositionProps {
  property: "x" | "y";
@@ -44,8 +44,8 @@ const moveElements = (
      origElement.y + origElement.height / 2,
    ];
    const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(origElement.x, origElement.y),
-      pointFrom(cx, cy),
+      point(origElement.x, origElement.y),
+      point(cx, cy),
      origElement.angle,
    );

@@ -97,8 +97,8 @@ const moveGroupTo = (
      ];

      const [topLeftX, topLeftY] = pointRotateRads(
-        pointFrom(latestElement.x, latestElement.y),
-        pointFrom(cx, cy),
+        point(latestElement.x, latestElement.y),
+        point(cx, cy),
        latestElement.angle,
      );

@@ -171,8 +171,8 @@ const handlePositionChange: DragInputCallbackType<
            origElement.y + origElement.height / 2,
          ];
          const [topLeftX, topLeftY] = pointRotateRads(
-            pointFrom(origElement.x, origElement.y),
-            pointFrom(cx, cy),
+            point(origElement.x, origElement.y),
+            point(cx, cy),
            origElement.angle,
          );

@@ -241,8 +241,8 @@ const MultiPosition = ({
        const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];

        const [topLeftX, topLeftY] = pointRotateRads(
-          pointFrom(el.x, el.y),
-          pointFrom(cx, cy),
+          point(el.x, el.y),
+          point(cx, cy),
          el.angle,
        );

@@ -4,7 +4,7 @@ import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";

 interface PositionProps {
  property: "x" | "y";
@@ -33,8 +33,8 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
    origElement.y + origElement.height / 2,
  ];
  const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(origElement.x, origElement.y),
-    pointFrom(cx, cy),
+    point(origElement.x, origElement.y),
+    point(cx, cy),
    origElement.angle,
  );

@@ -93,8 +93,8 @@ const Position = ({
  appState,
 }: PositionProps) => {
  const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(element.x, element.y),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
+    point(element.x, element.y),
+    point(element.x + element.width / 2, element.y + element.height / 2),
    element.angle,
  );
  const value =
@@ -25,7 +25,7 @@ import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
 import type { Degrees } from "../../../math";
-import { degreesToRadians, pointFrom, pointRotateRads } from "../../../math";
+import { degreesToRadians, point, pointRotateRads } from "../../../math";

 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -264,8 +264,8 @@ describe("stats for a generic element", () => {
      rectangle.y + rectangle.height / 2,
    ];
    const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
      rectangle.angle,
    );

@@ -283,8 +283,8 @@ describe("stats for a generic element", () => {
    testInputProperty(rectangle, "angle", "A", 0, 45);

    let [newTopLeftX, newTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
      rectangle.angle,
    );

@@ -294,8 +294,8 @@ describe("stats for a generic element", () => {
    testInputProperty(rectangle, "angle", "A", 45, 66);

    [newTopLeftX, newTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
      rectangle.angle,
    );
    expect(newTopLeftX.toString()).not.toEqual(xInput.value);
@@ -311,8 +311,8 @@ describe("stats for a generic element", () => {
      rectangle.y + rectangle.height / 2,
    ];
    const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
      rectangle.angle,
    );
    testInputProperty(rectangle, "width", "W", rectangle.width, 400);
@@ -321,8 +321,8 @@ describe("stats for a generic element", () => {
      rectangle.y + rectangle.height / 2,
    ];
    let [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
      rectangle.angle,
    );
    expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
@@ -334,8 +334,8 @@ describe("stats for a generic element", () => {
      rectangle.y + rectangle.height / 2,
    ];
    [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
      rectangle.angle,
    );

@@ -1,5 +1,5 @@
 import type { Radians } from "../../../math";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 import {
  bindOrUnbindLinearElements,
  updateBoundElements,
@@ -231,8 +231,8 @@ export const moveElement = (
    originalElement.y + originalElement.height / 2,
  ];
  const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(originalElement.x, originalElement.y),
-    pointFrom(cx, cy),
+    point(originalElement.x, originalElement.y),
+    point(cx, cy),
    originalElement.angle,
  );

@@ -240,8 +240,8 @@ export const moveElement = (
  const changeInY = newTopLeftY - topLeftY;

  const [x, y] = pointRotateRads(
-    pointFrom(newTopLeftX, newTopLeftY),
-    pointFrom(cx + changeInX, cy + changeInY),
+    point(newTopLeftX, newTopLeftY),
+    point(cx + changeInX, cy + changeInY),
    -originalElement.angle as Radians,
  );

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

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

 const areEqual = (
@@ -36,7 +36,7 @@ import { trackEvent } from "../../analytics";
 import { useAppProps, useExcalidrawAppState } from "../App";
 import { isEmbeddableElement } from "../../element/typeChecks";
 import { getLinkHandleFromCoords } from "./helpers";
-import { pointFrom, type GlobalPoint } from "../../../math";
+import { point, type GlobalPoint } from "../../../math";

 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -181,7 +181,7 @@ export const Hyperlink = ({
        element,
        elementsMap,
        appState,
-        pointFrom(event.clientX, event.clientY),
+        point(event.clientX, event.clientY),
      ) as boolean;
      if (shouldHide) {
        timeoutId = window.setTimeout(() => {
@@ -1,5 +1,5 @@
 import type { GlobalPoint, Radians } from "../../../math";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 import { MIME_TYPES } from "../../constants";
 import type { Bounds } from "../../element/bounds";
 import { getElementAbsoluteCoords } from "../../element/bounds";
@@ -35,8 +35,8 @@ export const getLinkHandleFromCoords = (
  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;

  const [rotatedX, rotatedY] = pointRotateRads(
-    pointFrom(x + linkWidth / 2, y + linkHeight / 2),
-    pointFrom(centerX, centerY),
+    point(x + linkWidth / 2, y + linkHeight / 2),
+    point(centerX, centerY),
    angle,
  );
  return [
@@ -85,10 +85,5 @@ export const isPointHittingLink = (
  ) {
    return true;
  }
-  return isPointHittingLinkIcon(
-    element,
-    elementsMap,
-    appState,
-    pointFrom(x, y),
-  );
+  return isPointHittingLinkIcon(element, elementsMap, appState, point(x, y));
 };
@@ -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,
-);
@@ -6,11 +6,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "#d8f5a2",
  "boundElements": [
    {
-      "id": "id47",
+      "id": "id45",
      "type": "arrow",
    },
    {
-      "id": "id48",
+      "id": "id46",
      "type": "arrow",
    },
  ],
@@ -47,7 +47,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id48",
+      "id": "id46",
      "type": "arrow",
    },
  ],
@@ -118,7 +118,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "seed": Any<Number>,
  "startArrowhead": null,
  "startBinding": {
-    "elementId": "id49",
+    "elementId": "id47",
    "fixedPoint": null,
    "focus": -0.08139534883720931,
    "gap": 1,
@@ -200,7 +200,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id47",
+      "id": "id45",
      "type": "arrow",
    },
  ],
@@ -238,7 +238,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id50",
+      "id": "id48",
      "type": "arrow",
    },
  ],
@@ -284,7 +284,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id50",
+      "id": "id48",
      "type": "arrow",
    },
  ],
@@ -329,7 +329,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id51",
+      "id": "id49",
      "type": "text",
    },
  ],
@@ -392,7 +392,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "autoResize": true,
  "backgroundColor": "transparent",
  "boundElements": null,
-  "containerId": "id50",
+  "containerId": "id48",
  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 5,
@@ -433,7 +433,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id40",
+      "id": "id38",
      "type": "text",
    },
  ],
@@ -441,7 +441,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
-    "elementId": "id42",
+    "elementId": "id40",
    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
@@ -472,7 +472,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "seed": Any<Number>,
  "startArrowhead": null,
  "startBinding": {
-    "elementId": "id41",
+    "elementId": "id39",
    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
@@ -496,7 +496,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "autoResize": true,
  "backgroundColor": "transparent",
  "boundElements": null,
-  "containerId": "id39",
+  "containerId": "id37",
  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 5,
@@ -537,7 +537,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id39",
+      "id": "id37",
      "type": "arrow",
    },
  ],
@@ -574,7 +574,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id39",
+      "id": "id37",
      "type": "arrow",
    },
  ],
@@ -611,7 +611,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id44",
+      "id": "id42",
      "type": "text",
    },
  ],
@@ -619,7 +619,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "elbowed": false,
  "endArrowhead": "arrow",
  "endBinding": {
-    "elementId": "id46",
+    "elementId": "id44",
    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
@@ -650,7 +650,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "seed": Any<Number>,
  "startArrowhead": null,
  "startBinding": {
-    "elementId": "id45",
+    "elementId": "id43",
    "fixedPoint": null,
    "focus": 0,
    "gap": 1,
@@ -674,7 +674,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "autoResize": true,
  "backgroundColor": "transparent",
  "boundElements": null,
-  "containerId": "id43",
+  "containerId": "id41",
  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 5,
@@ -716,7 +716,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id43",
+      "id": "id41",
      "type": "arrow",
    },
  ],
@@ -762,7 +762,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id43",
+      "id": "id41",
      "type": "arrow",
    },
  ],
@@ -1303,7 +1303,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id56",
+      "id": "id54",
      "type": "text",
    },
    {
@@ -1346,7 +1346,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id57",
+      "id": "id55",
      "type": "text",
    },
  ],
@@ -1385,7 +1385,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id58",
+      "id": "id56",
      "type": "text",
    },
    {
@@ -1428,7 +1428,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id59",
+      "id": "id57",
      "type": "text",
    },
    {
@@ -1475,7 +1475,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id60",
+      "id": "id58",
      "type": "text",
    },
  ],
@@ -1540,7 +1540,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id61",
+      "id": "id59",
      "type": "text",
    },
  ],
@@ -57,7 +57,7 @@ import {
  getNormalizedZoom,
 } from "../scene";
 import type { LocalPoint, Radians } from "../../math";
-import { isFiniteNumber, pointFrom } from "../../math";
+import { isFiniteNumber, point } from "../../math";

 type RestoredAppState = Omit<
  AppState,
@@ -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
@@ -269,7 +268,7 @@ const restoreElement = (
      let y = element.y;
      let points = // migrate old arrow model to new one
        !Array.isArray(element.points) || element.points.length < 2
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
+          ? [point(0, 0), point(element.width, element.height)]
          : element.points;

      if (points[0][0] !== 0 || points[0][1] !== 0) {
@@ -297,7 +296,7 @@ const restoreElement = (
      let y: number | undefined = element.y;
      let points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
        !Array.isArray(element.points) || element.points.length < 2
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
+          ? [point(0, 0), point(element.width, element.height)]
          : element.points;

      if (points[0][0] !== 0 || points[0][1] !== 0) {
@@ -2,7 +2,7 @@ import { vi } from "vitest";
 import type { ExcalidrawElementSkeleton } from "./transform";
 import { convertToExcalidrawElements } from "./transform";
 import type { ExcalidrawArrowElement } from "../element/types";
-import { pointFrom } from "../../math";
+import { point } from "../../math";

 const opts = { regenerateIds: false };

@@ -309,32 +309,28 @@ describe("Test Transform", () => {
  });

  describe("Test Frames", () => {
-    const elements: ExcalidrawElementSkeleton[] = [
-      {
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        strokeWidth: 2,
-        id: "1",
-      },
-      {
-        type: "diamond",
-        x: 120,
-        y: 20,
-        backgroundColor: "#fff3bf",
-        strokeWidth: 2,
-        label: {
-          text: "HELLO EXCALIDRAW",
-          strokeColor: "#099268",
-          fontSize: 30,
-        },
-        id: "2",
-      },
-    ];
-
    it("should transform frames and update frame ids when regenerated", () => {
      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
        {
          type: "frame",
          children: ["1", "2"],
@@ -356,9 +352,28 @@ describe("Test Transform", () => {
      });
    });

-    it("should consider user defined frame dimensions over calculated when provided", () => {
+    it("should consider max of calculated and frame dimensions when provided", () => {
      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
        {
          type: "frame",
          children: ["1", "2"],
@@ -373,27 +388,7 @@ describe("Test Transform", () => {
      );
      const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
      expect(frame.width).toBe(800);
-      expect(frame.height).toBe(100);
-    });
-
-    it("should consider user defined frame coordinates calculated when provided", () => {
-      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
-        {
-          type: "frame",
-          children: ["1", "2"],
-          name: "My frame",
-          x: 100,
-          y: 300,
-        },
-      ];
-      const excalidrawElements = convertToExcalidrawElements(
-        elementsSkeleton,
-        opts,
-      );
-      const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
-      expect(frame.x).toBe(100);
-      expect(frame.y).toBe(300);
+      expect(frame.height).toBe(126);
    });
  });

@@ -917,7 +912,7 @@ describe("Test Transform", () => {
        x: 111.262,
        y: 57,
        strokeWidth: 2,
-        points: [pointFrom(0, 0), pointFrom(272.985, 0)],
+        points: [point(0, 0), point(272.985, 0)],
        label: {
          text: "How are you?",
          fontSize: 20,
@@ -940,7 +935,7 @@ describe("Test Transform", () => {
        x: 77.017,
        y: 79,
        strokeWidth: 2,
-        points: [pointFrom(0, 0)],
+        points: [point(0, 0)],
        label: {
          text: "Friendship",
          fontSize: 20,
@@ -46,7 +46,6 @@ import {
  assertNever,
  cloneJSON,
  getFontString,
-  isDevEnv,
  toBrandedType,
 } from "../utils";
 import { getSizeFromPoints } from "../points";
@@ -54,7 +53,7 @@ import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getLineHeight } from "../fonts";
 import { isArrowElement } from "../element/typeChecks";
-import { pointFrom, type LocalPoint } from "../../math";
+import { point, type LocalPoint } from "../../math";

 export type ValidLinearElement = {
  type: "arrow" | "line";
@@ -537,7 +536,7 @@ export const convertToExcalidrawElements = (
        excalidrawElement = newLinearElement({
          width,
          height,
-          points: [pointFrom(0, 0), pointFrom(width, height)],
+          points: [point(0, 0), point(width, height)],
          ...element,
        });

@@ -550,7 +549,7 @@ export const convertToExcalidrawElements = (
          width,
          height,
          endArrowhead: "arrow",
-          points: [pointFrom(0, 0), pointFrom(width, height)],
+          points: [point(0, 0), point(width, height)],
          ...element,
          type: "arrow",
        });
@@ -718,7 +717,7 @@ export const convertToExcalidrawElements = (
  }

  // Once all the excalidraw elements are created, we can add frames since we
-  // need to calculate coordinates and dimensions of frame which is possible after all
+  // need to calculate coordinates and dimensions of frame which is possibe after all
  // frame children are processed.
  for (const [id, element] of elementsWithIds) {
    if (element.type !== "frame" && element.type !== "magicframe") {
@@ -765,26 +764,10 @@ export const convertToExcalidrawElements = (
    maxX = maxX + PADDING;
    maxY = maxY + PADDING;

-    const frameX = frame?.x || minX;
-    const frameY = frame?.y || minY;
-    const frameWidth = frame?.width || maxX - minX;
-    const frameHeight = frame?.height || maxY - minY;
-
-    Object.assign(frame, {
-      x: frameX,
-      y: frameY,
-      width: frameWidth,
-      height: frameHeight,
-    });
-    if (
-      isDevEnv() &&
-      element.children.length &&
-      (frame?.x || frame?.y || frame?.width || frame?.height)
-    ) {
-      console.info(
-        "User provided frame attributes are being considered, if you find this inaccurate, please remove any of the attributes - x, y, width and height so frame coordinates and dimensions are calculated automatically",
-      );
-    }
+    // Take the max of calculated and provided frame dimensions, whichever is higher
+    const width = Math.max(frame?.width, maxX - minX);
+    const height = Math.max(frame?.height, maxY - minY);
+    Object.assign(frame, { x: minX, y: minY, width, height });
  }

  return elementStore.getElements();
@@ -66,7 +66,7 @@ import {
 import type { LocalPoint, Radians } from "../../math";
 import {
  lineSegment,
-  pointFrom,
+  point,
  pointRotateRads,
  type GlobalPoint,
  vectorFromPoint,
@@ -720,7 +720,7 @@ export const getHeadingForElbowArrowSnap = (
    return vectorToHeading(
      vectorFromPoint(
        p,
-        pointFrom<GlobalPoint>(
+        point<GlobalPoint>(
          bindableElement.x + bindableElement.width / 2,
          bindableElement.y + bindableElement.height / 2,
        ),
@@ -766,15 +766,15 @@ export const bindPointToSnapToElementOutline = (
    const intersections = [
      ...(intersectElementWithLine(
        bindableElement,
-        pointFrom(p[0], p[1] - 2 * bindableElement.height),
-        pointFrom(p[0], p[1] + 2 * bindableElement.height),
+        point(p[0], p[1] - 2 * bindableElement.height),
+        point(p[0], p[1] + 2 * bindableElement.height),
        FIXED_BINDING_DISTANCE,
        elementsMap,
      ) ?? []),
      ...(intersectElementWithLine(
        bindableElement,
-        pointFrom(p[0] - 2 * bindableElement.width, p[1]),
-        pointFrom(p[0] + 2 * bindableElement.width, p[1]),
+        point(p[0] - 2 * bindableElement.width, p[1]),
+        point(p[0] + 2 * bindableElement.width, p[1]),
        FIXED_BINDING_DISTANCE,
        elementsMap,
      ) ?? []),
@@ -815,25 +815,25 @@ const headingToMidBindPoint = (
  switch (true) {
    case compareHeading(heading, HEADING_UP):
      return pointRotateRads(
-        pointFrom((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
+        point((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
        center,
        bindableElement.angle,
      );
    case compareHeading(heading, HEADING_RIGHT):
      return pointRotateRads(
-        pointFrom(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
+        point(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
        center,
        bindableElement.angle,
      );
    case compareHeading(heading, HEADING_DOWN):
      return pointRotateRads(
-        pointFrom((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
+        point((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
        center,
        bindableElement.angle,
      );
    default:
      return pointRotateRads(
-        pointFrom(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
+        point(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
        center,
        bindableElement.angle,
      );
@@ -844,7 +844,7 @@ export const avoidRectangularCorner = (
  element: ExcalidrawBindableElement,
  p: GlobalPoint,
 ): GlobalPoint => {
-  const center = pointFrom<GlobalPoint>(
+  const center = point<GlobalPoint>(
    element.x + element.width / 2,
    element.y + element.height / 2,
  );
@@ -854,13 +854,13 @@ export const avoidRectangularCorner = (
    // Top left
    if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
      return pointRotateRads<GlobalPoint>(
-        pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y),
+        point(element.x - FIXED_BINDING_DISTANCE, element.y),
        center,
        element.angle,
      );
    }
    return pointRotateRads(
-      pointFrom(element.x, element.y - FIXED_BINDING_DISTANCE),
+      point(element.x, element.y - FIXED_BINDING_DISTANCE),
      center,
      element.angle,
    );
@@ -871,16 +871,13 @@ export const avoidRectangularCorner = (
    // Bottom left
    if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {
      return pointRotateRads(
-        pointFrom(
-          element.x,
-          element.y + element.height + FIXED_BINDING_DISTANCE,
-        ),
+        point(element.x, element.y + element.height + FIXED_BINDING_DISTANCE),
        center,
        element.angle,
      );
    }
    return pointRotateRads(
-      pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
+      point(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
      center,
      element.angle,
    );
@@ -894,7 +891,7 @@ export const avoidRectangularCorner = (
      element.width + FIXED_BINDING_DISTANCE
    ) {
      return pointRotateRads(
-        pointFrom(
+        point(
          element.x + element.width,
          element.y + element.height + FIXED_BINDING_DISTANCE,
        ),
@@ -903,7 +900,7 @@ export const avoidRectangularCorner = (
      );
    }
    return pointRotateRads(
-      pointFrom(
+      point(
        element.x + element.width + FIXED_BINDING_DISTANCE,
        element.y + element.height,
      ),
@@ -920,16 +917,13 @@ export const avoidRectangularCorner = (
      element.width + FIXED_BINDING_DISTANCE
    ) {
      return pointRotateRads(
-        pointFrom(
-          element.x + element.width,
-          element.y - FIXED_BINDING_DISTANCE,
-        ),
+        point(element.x + element.width, element.y - FIXED_BINDING_DISTANCE),
        center,
        element.angle,
      );
    }
    return pointRotateRads(
-      pointFrom(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
+      point(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
      center,
      element.angle,
    );
@@ -944,10 +938,7 @@ export const snapToMid = (
  tolerance: number = 0.05,
 ): GlobalPoint => {
  const { x, y, width, height, angle } = element;
-  const center = pointFrom<GlobalPoint>(
-    x + width / 2 - 0.1,
-    y + height / 2 - 0.1,
-  );
+  const center = point<GlobalPoint>(x + width / 2 - 0.1, y + height / 2 - 0.1);
  const nonRotated = pointRotateRads(p, center, -angle as Radians);

  // snap-to-center point is adaptive to element size, but we don't want to go
@@ -962,7 +953,7 @@ export const snapToMid = (
  ) {
    // LEFT
    return pointRotateRads(
-      pointFrom(x - FIXED_BINDING_DISTANCE, center[1]),
+      point(x - FIXED_BINDING_DISTANCE, center[1]),
      center,
      angle,
    );
@@ -973,7 +964,7 @@ export const snapToMid = (
  ) {
    // TOP
    return pointRotateRads(
-      pointFrom(center[0], y - FIXED_BINDING_DISTANCE),
+      point(center[0], y - FIXED_BINDING_DISTANCE),
      center,
      angle,
    );
@@ -984,7 +975,7 @@ export const snapToMid = (
  ) {
    // RIGHT
    return pointRotateRads(
-      pointFrom(x + width + FIXED_BINDING_DISTANCE, center[1]),
+      point(x + width + FIXED_BINDING_DISTANCE, center[1]),
      center,
      angle,
    );
@@ -995,7 +986,7 @@ export const snapToMid = (
  ) {
    // DOWN
    return pointRotateRads(
-      pointFrom(center[0], y + height + FIXED_BINDING_DISTANCE),
+      point(center[0], y + height + FIXED_BINDING_DISTANCE),
      center,
      angle,
    );
@@ -1032,11 +1023,11 @@ const updateBoundPoint = (
        startOrEnd === "startBinding" ? "start" : "end",
        elementsMap,
      ).fixedPoint;
-    const globalMidPoint = pointFrom<GlobalPoint>(
+    const globalMidPoint = point<GlobalPoint>(
      bindableElement.x + bindableElement.width / 2,
      bindableElement.y + bindableElement.height / 2,
    );
-    const global = pointFrom<GlobalPoint>(
+    const global = point<GlobalPoint>(
      bindableElement.x + fixedPoint[0] * bindableElement.width,
      bindableElement.y + fixedPoint[1] * bindableElement.height,
    );
@@ -1127,7 +1118,7 @@ export const calculateFixedPointForElbowArrowBinding = (
    hoveredElement,
    elementsMap,
  );
-  const globalMidPoint = pointFrom(
+  const globalMidPoint = point(
    bounds[0] + (bounds[2] - bounds[0]) / 2,
    bounds[1] + (bounds[3] - bounds[1]) / 2,
  );
@@ -1346,9 +1337,9 @@ export const bindingBorderTest = (
  const threshold = maxBindingGap(element, element.width, element.height);
  const shape = getElementShape(element, elementsMap);
  return (
-    isPointOnShape(pointFrom(x, y), shape, threshold) ||
+    isPointOnShape(point(x, y), shape, threshold) ||
    (fullShape === true &&
-      pointInsideBounds(pointFrom(x, y), aabbForElement(element)))
+      pointInsideBounds(point(x, y), aabbForElement(element)))
  );
 };

@@ -2206,11 +2197,11 @@ export const getGlobalFixedPointForBindableElement = (
  const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);

  return pointRotateRads(
-    pointFrom(
+    point(
      element.x + element.width * fixedX,
      element.y + element.height * fixedY,
    ),
-    pointFrom<GlobalPoint>(
+    point<GlobalPoint>(
      element.x + element.width / 2,
      element.y + element.height / 2,
    ),
@@ -2238,7 +2229,7 @@ const getGlobalFixedPoints = (
          arrow.startBinding.fixedPoint,
          startElement as ExcalidrawBindableElement,
        )
-      : pointFrom<GlobalPoint>(
+      : point<GlobalPoint>(
          arrow.x + arrow.points[0][0],
          arrow.y + arrow.points[0][1],
        );
@@ -2248,7 +2239,7 @@ const getGlobalFixedPoints = (
          arrow.endBinding.fixedPoint,
          endElement as ExcalidrawBindableElement,
        )
-      : pointFrom<GlobalPoint>(
+      : point<GlobalPoint>(
          arrow.x + arrow.points[arrow.points.length - 1][0],
          arrow.y + arrow.points[arrow.points.length - 1][1],
        );
@@ -1,5 +1,5 @@
 import type { LocalPoint } from "../../math";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { ROUNDNESS } from "../constants";
 import { arrayToMap } from "../utils";
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
@@ -125,9 +125,9 @@ describe("getElementBounds", () => {
        a: 0.6447741904932416,
      }),
      points: [
-        pointFrom<LocalPoint>(0, 0),
-        pointFrom<LocalPoint>(67.33984375, 92.48828125),
-        pointFrom<LocalPoint>(-102.7890625, 52.15625),
+        point<LocalPoint>(0, 0),
+        point<LocalPoint>(67.33984375, 92.48828125),
+        point<LocalPoint>(-102.7890625, 52.15625),
      ],
    } as ExcalidrawLinearElement;

@@ -34,7 +34,7 @@ import type {
 import {
  degreesToRadians,
  lineSegment,
-  pointFrom,
+  point,
  pointDistance,
  pointFromArray,
  pointRotateRads,
@@ -113,8 +113,8 @@ export class ElementBounds {
      const [minX, minY, maxX, maxY] = getBoundsFromPoints(
        element.points.map(([x, y]) =>
          pointRotateRads(
-            pointFrom(x, y),
-            pointFrom(cx - element.x, cy - element.y),
+            point(x, y),
+            point(cx - element.x, cy - element.y),
            element.angle,
          ),
        ),
@@ -130,23 +130,23 @@ export class ElementBounds {
      bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
    } else if (element.type === "diamond") {
      const [x11, y11] = pointRotateRads(
-        pointFrom(cx, y1),
-        pointFrom(cx, cy),
+        point(cx, y1),
+        point(cx, cy),
        element.angle,
      );
      const [x12, y12] = pointRotateRads(
-        pointFrom(cx, y2),
-        pointFrom(cx, cy),
+        point(cx, y2),
+        point(cx, cy),
        element.angle,
      );
      const [x22, y22] = pointRotateRads(
-        pointFrom(x1, cy),
-        pointFrom(cx, cy),
+        point(x1, cy),
+        point(cx, cy),
        element.angle,
      );
      const [x21, y21] = pointRotateRads(
-        pointFrom(x2, cy),
-        pointFrom(cx, cy),
+        point(x2, cy),
+        point(cx, cy),
        element.angle,
      );
      const minX = Math.min(x11, x12, x22, x21);
@@ -164,23 +164,23 @@ export class ElementBounds {
      bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
    } else {
      const [x11, y11] = pointRotateRads(
-        pointFrom(x1, y1),
-        pointFrom(cx, cy),
+        point(x1, y1),
+        point(cx, cy),
        element.angle,
      );
      const [x12, y12] = pointRotateRads(
-        pointFrom(x1, y2),
-        pointFrom(cx, cy),
+        point(x1, y2),
+        point(cx, cy),
        element.angle,
      );
      const [x22, y22] = pointRotateRads(
-        pointFrom(x2, y2),
-        pointFrom(cx, cy),
+        point(x2, y2),
+        point(cx, cy),
        element.angle,
      );
      const [x21, y21] = pointRotateRads(
-        pointFrom(x2, y1),
-        pointFrom(cx, cy),
+        point(x2, y1),
+        point(cx, cy),
        element.angle,
      );
      const minX = Math.min(x11, x12, x22, x21);
@@ -255,7 +255,7 @@ export const getElementLineSegments = (
    elementsMap,
  );

-  const center: GlobalPoint = pointFrom(cx, cy);
+  const center: GlobalPoint = point(cx, cy);

  if (isLinearElement(element) || isFreeDrawElement(element)) {
    const segments: LineSegment<GlobalPoint>[] = [];
@@ -266,7 +266,7 @@ export const getElementLineSegments = (
      segments.push(
        lineSegment(
          pointRotateRads(
-            pointFrom(
+            point(
              element.points[i][0] + element.x,
              element.points[i][1] + element.y,
            ),
@@ -274,7 +274,7 @@ export const getElementLineSegments = (
            element.angle,
          ),
          pointRotateRads(
-            pointFrom(
+            point(
              element.points[i + 1][0] + element.x,
              element.points[i + 1][1] + element.y,
            ),
@@ -470,7 +470,7 @@ export const getMinMaxXYFromCurvePathOps = (
  ops: Op[],
  transformXY?: (p: GlobalPoint) => GlobalPoint,
 ): Bounds => {
-  let currentP: GlobalPoint = pointFrom(0, 0);
+  let currentP: GlobalPoint = point(0, 0);

  const { minX, minY, maxX, maxY } = ops.reduce(
    (limits, { op, data }) => {
@@ -484,9 +484,9 @@ export const getMinMaxXYFromCurvePathOps = (
        // move operation does not draw anything; so, it always
        // returns false
      } else if (op === "bcurveTo") {
-        const _p1 = pointFrom<GlobalPoint>(data[0], data[1]);
-        const _p2 = pointFrom<GlobalPoint>(data[2], data[3]);
-        const _p3 = pointFrom<GlobalPoint>(data[4], data[5]);
+        const _p1 = point<GlobalPoint>(data[0], data[1]);
+        const _p2 = point<GlobalPoint>(data[2], data[3]);
+        const _p3 = point<GlobalPoint>(data[4], data[5]);

        const p1 = transformXY ? transformXY(_p1) : _p1;
        const p2 = transformXY ? transformXY(_p2) : _p2;
@@ -591,21 +591,21 @@ export const getArrowheadPoints = (

  invariant(data.length === 6, "Op data length is not 6");

-  const p3 = pointFrom(data[4], data[5]);
-  const p2 = pointFrom(data[2], data[3]);
-  const p1 = pointFrom(data[0], data[1]);
+  const p3 = point(data[4], data[5]);
+  const p2 = point(data[2], data[3]);
+  const p1 = point(data[0], data[1]);

  // We need to find p0 of the bezier curve.
  // It is typically the last point of the previous
  // curve; it can also be the position of moveTo operation.
  const prevOp = ops[index - 1];
-  let p0 = pointFrom(0, 0);
+  let p0 = point(0, 0);
  if (prevOp.op === "move") {
    const p = pointFromArray(prevOp.data);
    invariant(p != null, "Op data is not a point");
    p0 = p;
  } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom(prevOp.data[4], prevOp.data[5]);
+    p0 = point(prevOp.data[4], prevOp.data[5]);
  }

  // B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3
@@ -671,13 +671,13 @@ export const getArrowheadPoints = (

  // Return points
  const [x3, y3] = pointRotateRads(
-    pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    point(xs, ys),
+    point(x2, y2),
    ((-angle * Math.PI) / 180) as Radians,
  );
  const [x4, y4] = pointRotateRads(
-    pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    point(xs, ys),
+    point(x2, y2),
    degreesToRadians(angle),
  );

@@ -690,8 +690,8 @@ export const getArrowheadPoints = (
      const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];

      [ox, oy] = pointRotateRads(
-        pointFrom(x2 + minSize * 2, y2),
-        pointFrom(x2, y2),
+        point(x2 + minSize * 2, y2),
+        point(x2, y2),
        Math.atan2(py - y2, px - x2) as Radians,
      );
    } else {
@@ -701,8 +701,8 @@ export const getArrowheadPoints = (
          : [0, 0];

      [ox, oy] = pointRotateRads(
-        pointFrom(x2 - minSize * 2, y2),
-        pointFrom(x2, y2),
+        point(x2 - minSize * 2, y2),
+        point(x2, y2),
        Math.atan2(y2 - py, x2 - px) as Radians,
      );
    }
@@ -746,8 +746,8 @@ const getLinearElementRotatedBounds = (
  if (element.points.length < 2) {
    const [pointX, pointY] = element.points[0];
    const [x, y] = pointRotateRads(
-      pointFrom(element.x + pointX, element.y + pointY),
-      pointFrom(cx, cy),
+      point(element.x + pointX, element.y + pointY),
+      point(cx, cy),
      element.angle,
    );

@@ -775,8 +775,8 @@ const getLinearElementRotatedBounds = (
  const ops = getCurvePathOps(shape);
  const transformXY = ([x, y]: GlobalPoint) =>
    pointRotateRads<GlobalPoint>(
-      pointFrom(element.x + x, element.y + y),
-      pointFrom(cx, cy),
+      point(element.x + x, element.y + y),
+      point(cx, cy),
      element.angle,
    );
  const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@@ -931,8 +931,8 @@ export const getClosestElementBounds = (
  elements.forEach((element) => {
    const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
    const distance = pointDistance(
-      pointFrom((x1 + x2) / 2, (y1 + y2) / 2),
-      pointFrom(from.x, from.y),
+      point((x1 + x2) / 2, (y1 + y2) / 2),
+      point(from.x, from.y),
    );

    if (distance < minDistance) {
@@ -990,7 +990,7 @@ export const getVisibleSceneBounds = ({
 };

 export const getCenterForBounds = (bounds: Bounds): GlobalPoint =>
-  pointFrom(
+  point(
    bounds[0] + (bounds[2] - bounds[0]) / 2,
    bounds[1] + (bounds[3] - bounds[1]) / 2,
  );
@@ -17,7 +17,7 @@ import {
 } from "./typeChecks";
 import { getBoundTextShape, isPathALoop } from "../shapes";
 import type { GlobalPoint, LocalPoint, Polygon } from "../../math";
-import { isPointWithinBounds, pointFrom } from "../../math";
+import { isPointWithinBounds, point } from "../../math";

 export const shouldTestInside = (element: ExcalidrawElement) => {
  if (element.type === "arrow") {
@@ -61,13 +61,13 @@ export const hitElementItself = <Point extends GlobalPoint | LocalPoint>({
  let hit = shouldTestInside(element)
    ? // Since `inShape` tests STRICTLY againt the insides of a shape
      // we would need `onShape` as well to include the "borders"
-      isPointInShape(pointFrom(x, y), shape) ||
-      isPointOnShape(pointFrom(x, y), shape, threshold)
-    : isPointOnShape(pointFrom(x, y), shape, threshold);
+      isPointInShape(point(x, y), shape) ||
+      isPointOnShape(point(x, y), shape, threshold)
+    : isPointOnShape(point(x, y), shape, threshold);

  // hit test against a frame's name
  if (!hit && frameNameBound) {
-    hit = isPointInShape(pointFrom(x, y), {
+    hit = isPointInShape(point(x, y), {
      type: "polygon",
      data: getPolygonShape(frameNameBound as ExcalidrawRectangleElement)
        .data as Polygon<Point>,
@@ -89,11 +89,7 @@ export const hitElementBoundingBox = (
  y1 -= tolerance;
  x2 += tolerance;
  y2 += tolerance;
-  return isPointWithinBounds(
-    pointFrom(x1, y1),
-    pointFrom(x, y),
-    pointFrom(x2, y2),
-  );
+  return isPointWithinBounds(point(x1, y1), point(x, y), point(x2, y2));
 };

 export const hitElementBoundingBoxOnly = <
@@ -119,5 +115,5 @@ export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
  y: number,
  textShape: GeometricShape<Point> | null,
 ): boolean => {
-  return !!textShape && isPointInShape(pointFrom(x, y), textShape);
+  return !!textShape && isPointInShape(point(x, y), textShape);
 };
@@ -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,
-  };
-};
@@ -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,
    );
@@ -45,12 +45,6 @@ const RE_GENERIC_EMBED =
 const RE_GIPHY =
  /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;

-const RE_REDDIT =
-  /^(?:http(?:s)?:\/\/)?(?:www\.)?reddit\.com\/r\/([a-zA-Z0-9_]+)\/comments\/([a-zA-Z0-9_]+)\/([a-zA-Z0-9_]+)\/?(?:\?[^#\s]*)?(?:#[^\s]*)?$/;
-
-const RE_REDDIT_EMBED =
-  /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:www\.)?reddit\.com\/[^"']*)/i;
-
 const ALLOWED_DOMAINS = new Set([
  "youtube.com",
  "youtu.be",
@@ -65,7 +59,6 @@ const ALLOWED_DOMAINS = new Set([
  "stackblitz.com",
  "val.town",
  "giphy.com",
-  "reddit.com",
 ]);

 const ALLOW_SAME_ORIGIN = new Set([
@@ -78,7 +71,6 @@ const ALLOW_SAME_ORIGIN = new Set([
  "x.com",
  "*.simplepdf.eu",
  "stackblitz.com",
-  "reddit.com",
 ]);

 export const createSrcDoc = (body: string) => {
@@ -226,24 +218,6 @@ export const getEmbedLink = (
    return ret;
  }

-  if (RE_REDDIT.test(link)) {
-    const [, page, postId, title] = link.match(RE_REDDIT)!;
-    const safeURL = sanitizeHTMLAttribute(
-      `https://reddit.com/r/${page}/comments/${postId}/${title}`,
-    );
-    const ret: IframeDataWithSandbox = {
-      type: "document",
-      srcdoc: (theme: string) =>
-        createSrcDoc(
-          `<blockquote class="reddit-embed-bq" data-embed-theme="${theme}"><a href="${safeURL}"></a><br></blockquote><script async="" src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>`,
-        ),
-      intrinsicSize: { w: 480, h: 480 },
-      sandbox: { allowSameOrigin },
-    };
-    embeddedLinkCache.set(originalLink, ret);
-    return ret;
-  }
-
  if (RE_GH_GIST.test(link)) {
    const [, user, gistId] = link.match(RE_GH_GIST)!;
    const safeURL = sanitizeHTMLAttribute(
@@ -387,11 +361,6 @@ export const maybeParseEmbedSrc = (str: string): string => {
    return twitterMatch[1];
  }

-  const redditMatch = str.match(RE_REDDIT_EMBED);
-  if (redditMatch && redditMatch.length === 2) {
-    return redditMatch[1];
-  }
-
  const gistMatch = str.match(RE_GH_GIST_EMBED);
  if (gistMatch && gistMatch.length === 2) {
    return gistMatch[1];
@@ -29,7 +29,7 @@ import {
  isFlowchartNodeElement,
 } from "./typeChecks";
 import { invariant } from "../utils";
-import { pointFrom, type LocalPoint } from "../../math";
+import { point, type LocalPoint } from "../../math";
 import { aabbForElement } from "../shapes";

 type LinkDirection = "up" | "right" | "down" | "left";
@@ -421,7 +421,7 @@ const createBindingArrow = (
    strokeColor: appState.currentItemStrokeColor,
    strokeStyle: appState.currentItemStrokeStyle,
    strokeWidth: appState.currentItemStrokeWidth,
-    points: [pointFrom(0, 0), pointFrom(endX, endY)],
+    points: [point(0, 0), point(endX, endY)],
    elbowed: true,
  });

@@ -6,7 +6,7 @@ import type {
  Radians,
 } from "../../math";
 import {
-  pointFrom,
+  point,
  pointRotateRads,
  pointScaleFromOrigin,
  radiansToDegrees,
@@ -82,7 +82,7 @@ export const headingForPointFromElement = <

    const top = pointRotateRads(
      pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y),
+        point(element.x + element.width / 2, element.y),
        midPoint,
        SEARCH_CONE_MULTIPLIER,
      ),
@@ -91,7 +91,7 @@ export const headingForPointFromElement = <
    );
    const right = pointRotateRads(
      pointScaleFromOrigin(
-        pointFrom(element.x + element.width, element.y + element.height / 2),
+        point(element.x + element.width, element.y + element.height / 2),
        midPoint,
        SEARCH_CONE_MULTIPLIER,
      ),
@@ -100,7 +100,7 @@ export const headingForPointFromElement = <
    );
    const bottom = pointRotateRads(
      pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y + element.height),
+        point(element.x + element.width / 2, element.y + element.height),
        midPoint,
        SEARCH_CONE_MULTIPLIER,
      ),
@@ -109,7 +109,7 @@ export const headingForPointFromElement = <
    );
    const left = pointRotateRads(
      pointScaleFromOrigin(
-        pointFrom(element.x, element.y + element.height / 2),
+        point(element.x, element.y + element.height / 2),
        midPoint,
        SEARCH_CONE_MULTIPLIER,
      ),
@@ -133,22 +133,22 @@ export const headingForPointFromElement = <
  }

  const topLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[1]),
+    point(aabb[0], aabb[1]),
    midPoint,
    SEARCH_CONE_MULTIPLIER,
  ) as Point;
  const topRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[1]),
+    point(aabb[2], aabb[1]),
    midPoint,
    SEARCH_CONE_MULTIPLIER,
  ) as Point;
  const bottomLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[3]),
+    point(aabb[0], aabb[3]),
    midPoint,
    SEARCH_CONE_MULTIPLIER,
  ) as Point;
  const bottomRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[3]),
+    point(aabb[2], aabb[3]),
    midPoint,
    SEARCH_CONE_MULTIPLIER,
  ) as Point;
@@ -49,7 +49,7 @@ import type Scene from "../scene/Scene";
 import type { Radians } from "../../math";
 import {
  pointCenter,
-  pointFrom,
+  point,
  pointRotateRads,
  pointsEqual,
  vector,
@@ -108,7 +108,7 @@ export class LinearElementEditor {
    this.elementId = element.id as string & {
      _brand: "excalidrawLinearElementId";
    };
-    if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
+    if (!pointsEqual(element.points[0], point(0, 0))) {
      console.error("Linear element is not normalized", Error().stack);
    }

@@ -287,7 +287,7 @@ export class LinearElementEditor {
          element,
          elementsMap,
          referencePoint,
-          pointFrom(scenePointerX, scenePointerY),
+          point(scenePointerX, scenePointerY),
          event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
        );

@@ -296,7 +296,7 @@ export class LinearElementEditor {
          [
            {
              index: selectedIndex,
-              point: pointFrom(
+              point: point(
                width + referencePoint[0],
                height + referencePoint[1],
              ),
@@ -329,7 +329,7 @@ export class LinearElementEditor {
                    scenePointerY - linearElementEditor.pointerOffset.y,
                    event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
                  )
-                : pointFrom(
+                : point(
                    element.points[pointIndex][0] + deltaX,
                    element.points[pointIndex][1] + deltaY,
                  );
@@ -590,11 +590,11 @@ export class LinearElementEditor {
      linearElementEditor.segmentMidPointHoveredCoords;
    if (existingSegmentMidpointHitCoords) {
      const distance = pointDistance(
-        pointFrom(
+        point(
          existingSegmentMidpointHitCoords[0],
          existingSegmentMidpointHitCoords[1],
        ),
-        pointFrom(scenePointer.x, scenePointer.y),
+        point(scenePointer.x, scenePointer.y),
      );
      if (distance <= threshold) {
        return existingSegmentMidpointHitCoords;
@@ -606,8 +606,8 @@ export class LinearElementEditor {
    while (index < midPoints.length) {
      if (midPoints[index] !== null) {
        const distance = pointDistance(
-          pointFrom(midPoints[index]![0], midPoints[index]![1]),
-          pointFrom(scenePointer.x, scenePointer.y),
+          point(midPoints[index]![0], midPoints[index]![1]),
+          point(scenePointer.x, scenePointer.y),
        );
        if (distance <= threshold) {
          return midPoints[index];
@@ -626,8 +626,8 @@ export class LinearElementEditor {
    zoom: AppState["zoom"],
  ) {
    let distance = pointDistance(
-      pointFrom(startPoint[0], startPoint[1]),
-      pointFrom(endPoint[0], endPoint[1]),
+      point(startPoint[0], startPoint[1]),
+      point(endPoint[0], endPoint[1]),
    );
    if (element.points.length > 2 && element.roundness) {
      distance = getBezierCurveLength(element, endPoint);
@@ -829,11 +829,11 @@ export class LinearElementEditor {
    const targetPoint =
      clickedPointIndex > -1 &&
      pointRotateRads(
-        pointFrom(
+        point(
          element.x + element.points[clickedPointIndex][0],
          element.y + element.points[clickedPointIndex][1],
        ),
-        pointFrom(cx, cy),
+        point(cx, cy),
        element.angle,
      );

@@ -928,11 +928,11 @@ export class LinearElementEditor {
        element,
        elementsMap,
        lastCommittedPoint,
-        pointFrom(scenePointerX, scenePointerY),
+        point(scenePointerX, scenePointerY),
        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
      );

-      newPoint = pointFrom(
+      newPoint = point(
        width + lastCommittedPoint[0],
        height + lastCommittedPoint[1],
      );
@@ -984,8 +984,8 @@ export class LinearElementEditor {

    const { x, y } = element;
    return pointRotateRads(
-      pointFrom(x + p[0], y + p[1]),
-      pointFrom(cx, cy),
+      point(x + p[0], y + p[1]),
+      point(cx, cy),
      element.angle,
    );
  }
@@ -1001,8 +1001,8 @@ export class LinearElementEditor {
    return element.points.map((p) => {
      const { x, y } = element;
      return pointRotateRads(
-        pointFrom(x + p[0], y + p[1]),
-        pointFrom(cx, cy),
+        point(x + p[0], y + p[1]),
+        point(cx, cy),
        element.angle,
      );
    });
@@ -1025,12 +1025,8 @@ export class LinearElementEditor {
    const { x, y } = element;

    return p
-      ? pointRotateRads(
-          pointFrom(x + p[0], y + p[1]),
-          pointFrom(cx, cy),
-          element.angle,
-        )
-      : pointRotateRads(pointFrom(x, y), pointFrom(cx, cy), element.angle);
+      ? pointRotateRads(point(x + p[0], y + p[1]), point(cx, cy), element.angle)
+      : pointRotateRads(point(x, y), point(cx, cy), element.angle);
  }

  static pointFromAbsoluteCoords(
@@ -1040,7 +1036,7 @@ export class LinearElementEditor {
  ): LocalPoint {
    if (isElbowArrow(element)) {
      // No rotation for elbow arrows
-      return pointFrom(
+      return point(
        absoluteCoords[0] - element.x,
        absoluteCoords[1] - element.y,
      );
@@ -1050,11 +1046,11 @@ export class LinearElementEditor {
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
    const [x, y] = pointRotateRads(
-      pointFrom(absoluteCoords[0], absoluteCoords[1]),
-      pointFrom(cx, cy),
+      point(absoluteCoords[0], absoluteCoords[1]),
+      point(cx, cy),
      -element.angle as Radians,
    );
-    return pointFrom(x - element.x, y - element.y);
+    return point(x - element.x, y - element.y);
  }

  static getPointIndexUnderCursor(
@@ -1075,7 +1071,7 @@ export class LinearElementEditor {
    while (--idx > -1) {
      const p = pointHandles[idx];
      if (
-        pointDistance(pointFrom(x, y), pointFrom(p[0], p[1])) * zoom.value <
+        pointDistance(point(x, y), point(p[0], p[1])) * zoom.value <
        // +1px to account for outline stroke
        LinearElementEditor.POINT_HANDLE_SIZE + 1
      ) {
@@ -1097,12 +1093,12 @@ export class LinearElementEditor {
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
    const [rotatedX, rotatedY] = pointRotateRads(
-      pointFrom(pointerOnGrid[0], pointerOnGrid[1]),
-      pointFrom(cx, cy),
+      point(pointerOnGrid[0], pointerOnGrid[1]),
+      point(cx, cy),
      -element.angle as Radians,
    );

-    return pointFrom(rotatedX - element.x, rotatedY - element.y);
+    return point(rotatedX - element.x, rotatedY - element.y);
  }

  /**
@@ -1122,7 +1118,7 @@ export class LinearElementEditor {

    return {
      points: points.map((p) => {
-        return pointFrom(p[0] - offsetX, p[1] - offsetY);
+        return point(p[0] - offsetX, p[1] - offsetY);
      }),
      x: element.x + offsetX,
      y: element.y + offsetY,
@@ -1176,8 +1172,8 @@ export class LinearElementEditor {
        }
        acc.push(
          nextPoint
-            ? pointFrom((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
-            : pointFrom(p[0], p[1]),
+            ? point((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
+            : point(p[0], p[1]),
        );

        nextSelectedIndices.push(indexCursor + 1);
@@ -1198,7 +1194,7 @@ export class LinearElementEditor {
        [
          {
            index: element.points.length - 1,
-            point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
+            point: point(lastPoint[0] + 30, lastPoint[1] + 30),
          },
        ],
        elementsMap,
@@ -1239,9 +1235,7 @@ export class LinearElementEditor {
    const nextPoints = element.points.reduce((acc: LocalPoint[], p, idx) => {
      if (!pointIndices.includes(idx)) {
        acc.push(
-          !acc.length
-            ? pointFrom(0, 0)
-            : pointFrom(p[0] - offsetX, p[1] - offsetY),
+          !acc.length ? point(0, 0) : point(p[0] - offsetX, p[1] - offsetY),
        );
      }
      return acc;
@@ -1318,9 +1312,9 @@ export class LinearElementEditor {
        const deltaY =
          selectedPointData.point[1] - points[selectedPointData.index][1];

-        return pointFrom(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
+        return point(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
      }
-      return offsetX || offsetY ? pointFrom(p[0] - offsetX, p[1] - offsetY) : p;
+      return offsetX || offsetY ? point(p[0] - offsetX, p[1] - offsetY) : p;
    });

    LinearElementEditor._updatePoints(
@@ -1374,8 +1368,8 @@ export class LinearElementEditor {

    const origin = linearElementEditor.pointerDownState.origin!;
    const dist = pointDistance(
-      pointFrom(origin.x, origin.y),
-      pointFrom(pointerCoords.x, pointerCoords.y),
+      point(origin.x, origin.y),
+      point(pointerCoords.x, pointerCoords.y),
    );
    if (
      !appState.editingLinearElement &&
@@ -1499,8 +1493,8 @@ export class LinearElementEditor {
      const dX = prevCenterX - nextCenterX;
      const dY = prevCenterY - nextCenterY;
      const rotated = pointRotateRads(
-        pointFrom(offsetX, offsetY),
-        pointFrom(dX, dY),
+        point(offsetX, offsetY),
+        point(dX, dY),
        element.angle,
      );
      mutateElement(element, {
@@ -1546,8 +1540,8 @@ export class LinearElementEditor {
    );

    return pointRotateRads(
-      pointFrom(width, height),
-      pointFrom(0, 0),
+      point(width, height),
+      point(0, 0),
      -element.angle as Radians,
    );
  }
@@ -1617,36 +1611,36 @@ export class LinearElementEditor {
      );
    const boundTextX2 = boundTextX1 + boundTextElement.width;
    const boundTextY2 = boundTextY1 + boundTextElement.height;
-    const centerPoint = pointFrom(cx, cy);
+    const centerPoint = point(cx, cy);

    const topLeftRotatedPoint = pointRotateRads(
-      pointFrom(x1, y1),
+      point(x1, y1),
      centerPoint,
      element.angle,
    );
    const topRightRotatedPoint = pointRotateRads(
-      pointFrom(x2, y1),
+      point(x2, y1),
      centerPoint,
      element.angle,
    );

    const counterRotateBoundTextTopLeft = pointRotateRads(
-      pointFrom(boundTextX1, boundTextY1),
+      point(boundTextX1, boundTextY1),
      centerPoint,
      -element.angle as Radians,
    );
    const counterRotateBoundTextTopRight = pointRotateRads(
-      pointFrom(boundTextX2, boundTextY1),
+      point(boundTextX2, boundTextY1),
      centerPoint,
      -element.angle as Radians,
    );
    const counterRotateBoundTextBottomLeft = pointRotateRads(
-      pointFrom(boundTextX1, boundTextY2),
+      point(boundTextX1, boundTextY2),
      centerPoint,
      -element.angle as Radians,
    );
    const counterRotateBoundTextBottomRight = pointRotateRads(
-      pointFrom(boundTextX2, boundTextY2),
+      point(boundTextX2, boundTextY2),
      centerPoint,
      -element.angle as Radians,
    );
@@ -5,7 +5,7 @@ import { FONT_FAMILY, ROUNDNESS } from "../constants";
 import { isPrimitive } from "../utils";
 import type { ExcalidrawLinearElement } from "./types";
 import type { LocalPoint } from "../../math";
-import { pointFrom } from "../../math";
+import { point } from "../../math";

 const assertCloneObjects = (source: any, clone: any) => {
  for (const key in clone) {
@@ -38,7 +38,7 @@ describe("duplicating single elements", () => {
    element.__proto__ = { hello: "world" };

    mutateElement(element, {
-      points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
+      points: [point<LocalPoint>(1, 2), point<LocalPoint>(3, 4)],
    });

    const copy = duplicateElement(null, new Map(), element);
@@ -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,
  };
 };

@@ -58,7 +58,7 @@ import type { GlobalPoint } from "../../math";
 import {
  pointCenter,
  normalizeRadians,
-  pointFrom,
+  point,
  pointFromPair,
  pointRotateRads,
  type Radians,
@@ -240,8 +240,8 @@ const resizeSingleTextElement = (
  );
  // rotation pointer with reverse angle
  const [rotatedX, rotatedY] = pointRotateRads(
-    pointFrom(pointerX, pointerY),
-    pointFrom(cx, cy),
+    point(pointerX, pointerY),
+    point(cx, cy),
    -element.angle as Radians,
  );
  let scaleX = 0;
@@ -276,23 +276,23 @@ const resizeSingleTextElement = (
    const startBottomRight = [x2, y2];
    const startCenter = [cx, cy];

-    let newTopLeft = pointFrom<GlobalPoint>(x1, y1);
+    let newTopLeft = point<GlobalPoint>(x1, y1);
    if (["n", "w", "nw"].includes(transformHandleType)) {
-      newTopLeft = pointFrom<GlobalPoint>(
+      newTopLeft = point<GlobalPoint>(
        startBottomRight[0] - Math.abs(nextWidth),
        startBottomRight[1] - Math.abs(nextHeight),
      );
    }
    if (transformHandleType === "ne") {
      const bottomLeft = [startTopLeft[0], startBottomRight[1]];
-      newTopLeft = pointFrom<GlobalPoint>(
+      newTopLeft = point<GlobalPoint>(
        bottomLeft[0],
        bottomLeft[1] - Math.abs(nextHeight),
      );
    }
    if (transformHandleType === "sw") {
      const topRight = [startBottomRight[0], startTopLeft[1]];
-      newTopLeft = pointFrom<GlobalPoint>(
+      newTopLeft = point<GlobalPoint>(
        topRight[0] - Math.abs(nextWidth),
        topRight[1],
      );
@@ -311,20 +311,12 @@ const resizeSingleTextElement = (
    }

    const angle = element.angle;
-    const rotatedTopLeft = pointRotateRads(
-      newTopLeft,
-      pointFrom(cx, cy),
-      angle,
-    );
-    const newCenter = pointFrom<GlobalPoint>(
+    const rotatedTopLeft = pointRotateRads(newTopLeft, point(cx, cy), angle);
+    const newCenter = point<GlobalPoint>(
      newTopLeft[0] + Math.abs(nextWidth) / 2,
      newTopLeft[1] + Math.abs(nextHeight) / 2,
    );
-    const rotatedNewCenter = pointRotateRads(
-      newCenter,
-      pointFrom(cx, cy),
-      angle,
-    );
+    const rotatedNewCenter = pointRotateRads(newCenter, point(cx, cy), angle);
    newTopLeft = pointRotateRads(
      rotatedTopLeft,
      rotatedNewCenter,
@@ -349,12 +341,12 @@ const resizeSingleTextElement = (
      stateAtResizeStart.height,
      true,
    );
-    const startTopLeft = pointFrom<GlobalPoint>(x1, y1);
-    const startBottomRight = pointFrom<GlobalPoint>(x2, y2);
+    const startTopLeft = point<GlobalPoint>(x1, y1);
+    const startBottomRight = point<GlobalPoint>(x2, y2);
    const startCenter = pointCenter(startTopLeft, startBottomRight);

    const rotatedPointer = pointRotateRads(
-      pointFrom(pointerX, pointerY),
+      point(pointerX, pointerY),
      startCenter,
      -stateAtResizeStart.angle as Radians,
    );
@@ -427,7 +419,7 @@ const resizeSingleTextElement = (
      startCenter,
      angle,
    );
-    const newCenter = pointFrom(
+    const newCenter = point(
      newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
      newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
    );
@@ -469,13 +461,13 @@ export const resizeSingleElement = (
    stateAtResizeStart.height,
    true,
  );
-  const startTopLeft = pointFrom(x1, y1);
-  const startBottomRight = pointFrom(x2, y2);
+  const startTopLeft = point(x1, y1);
+  const startBottomRight = point(x2, y2);
  const startCenter = pointCenter(startTopLeft, startBottomRight);

  // Calculate new dimensions based on cursor position
  const rotatedPointer = pointRotateRads(
-    pointFrom(pointerX, pointerY),
+    point(pointerX, pointerY),
    startCenter,
    -stateAtResizeStart.angle as Radians,
  );
@@ -656,7 +648,7 @@ export const resizeSingleElement = (
    startCenter,
    angle,
  );
-  const newCenter = pointFrom(
+  const newCenter = point(
    newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
    newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
  );
@@ -825,20 +817,20 @@ export const resizeMultipleElements = (
  const direction = transformHandleType;

  const anchorsMap: Record<TransformHandleDirection, GlobalPoint> = {
-    ne: pointFrom(minX, maxY),
-    se: pointFrom(minX, minY),
-    sw: pointFrom(maxX, minY),
-    nw: pointFrom(maxX, maxY),
-    e: pointFrom(minX, minY + height / 2),
-    w: pointFrom(maxX, minY + height / 2),
-    n: pointFrom(minX + width / 2, maxY),
-    s: pointFrom(minX + width / 2, minY),
+    ne: point(minX, maxY),
+    se: point(minX, minY),
+    sw: point(maxX, minY),
+    nw: point(maxX, maxY),
+    e: point(minX, minY + height / 2),
+    w: point(maxX, minY + height / 2),
+    n: point(minX + width / 2, maxY),
+    s: point(minX + width / 2, minY),
  };

  // anchor point must be on the opposite side of the dragged selection handle
  // or be the center of the selection if shouldResizeFromCenter
  const [anchorX, anchorY] = shouldResizeFromCenter
-    ? pointFrom(midX, midY)
+    ? point(midX, midY)
    : anchorsMap[direction];

  const resizeFromCenterScale = shouldResizeFromCenter ? 2 : 1;
@@ -1052,8 +1044,8 @@ const rotateMultipleElements = (
      const origAngle =
        originalElements.get(element.id)?.angle ?? element.angle;
      const [rotatedCX, rotatedCY] = pointRotateRads(
-        pointFrom(cx, cy),
-        pointFrom(centerX, centerY),
+        point(cx, cy),
+        point(centerX, centerY),
        (centerAngle + origAngle - element.angle) as Radians,
      );

@@ -1109,44 +1101,40 @@ export const getResizeOffsetXY = (
  const angle = (
    selectedElements.length === 1 ? selectedElements[0].angle : 0
  ) as Radians;
-  [x, y] = pointRotateRads(
-    pointFrom(x, y),
-    pointFrom(cx, cy),
-    -angle as Radians,
-  );
+  [x, y] = pointRotateRads(point(x, y), point(cx, cy), -angle as Radians);
  switch (transformHandleType) {
    case "n":
      return pointRotateRads(
-        pointFrom(x - (x1 + x2) / 2, y - y1),
-        pointFrom(0, 0),
+        point(x - (x1 + x2) / 2, y - y1),
+        point(0, 0),
        angle,
      );
    case "s":
      return pointRotateRads(
-        pointFrom(x - (x1 + x2) / 2, y - y2),
-        pointFrom(0, 0),
+        point(x - (x1 + x2) / 2, y - y2),
+        point(0, 0),
        angle,
      );
    case "w":
      return pointRotateRads(
-        pointFrom(x - x1, y - (y1 + y2) / 2),
-        pointFrom(0, 0),
+        point(x - x1, y - (y1 + y2) / 2),
+        point(0, 0),
        angle,
      );
    case "e":
      return pointRotateRads(
-        pointFrom(x - x2, y - (y1 + y2) / 2),
-        pointFrom(0, 0),
+        point(x - x2, y - (y1 + y2) / 2),
+        point(0, 0),
        angle,
      );
    case "nw":
-      return pointRotateRads(pointFrom(x - x1, y - y1), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x1, y - y1), point(0, 0), angle);
    case "ne":
-      return pointRotateRads(pointFrom(x - x2, y - y1), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x2, y - y1), point(0, 0), angle);
    case "sw":
-      return pointRotateRads(pointFrom(x - x1, y - y2), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x1, y - y2), point(0, 0), angle);
    case "se":
-      return pointRotateRads(pointFrom(x - x2, y - y2), pointFrom(0, 0), angle);
+      return pointRotateRads(point(x - x2, y - y2), point(0, 0), angle);
    default:
      return [0, 0];
  }
@@ -20,10 +20,10 @@ 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,
+  point,
  pointOnLineSegment,
  pointRotateRads,
  type Radians,
@@ -90,26 +90,18 @@ 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)
-        ? 0
-        : SIDE_RESIZING_THRESHOLD / zoom.value;
-      const ZOOMED_SIDE_RESIZING_THRESHOLD =
-        SIDE_RESIZING_THRESHOLD / zoom.value;
+      const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
      const sides = getSelectionBorders(
-        pointFrom(x1 - SPACING, y1 - SPACING),
-        pointFrom(x2 + SPACING, y2 + SPACING),
-        pointFrom(cx, cy),
+        point(x1 - SPACING, y1 - SPACING),
+        point(x2 + SPACING, y2 + SPACING),
+        point(cx, cy),
        element.angle,
      );

      for (const [dir, side] of Object.entries(sides)) {
        // test to see if x, y are on the line segment
        if (
-          pointOnLineSegment(
-            pointFrom(x, y),
-            side as LineSegment<Point>,
-            ZOOMED_SIDE_RESIZING_THRESHOLD,
-          )
+          pointOnLineSegment(point(x, y), side as LineSegment<Point>, SPACING)
        ) {
          return dir as TransformHandleType;
        }
@@ -186,9 +178,9 @@ export const getTransformHandleTypeFromCoords = <
    const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;

    const sides = getSelectionBorders(
-      pointFrom(x1 - SPACING, y1 - SPACING),
-      pointFrom(x2 + SPACING, y2 + SPACING),
-      pointFrom(cx, cy),
+      point(x1 - SPACING, y1 - SPACING),
+      point(x2 + SPACING, y2 + SPACING),
+      point(cx, cy),
      0 as Radians,
    );

@@ -196,7 +188,7 @@ export const getTransformHandleTypeFromCoords = <
      // test to see if x, y are on the line segment
      if (
        pointOnLineSegment(
-          pointFrom(scenePointerX, scenePointerY),
+          point(scenePointerX, scenePointerY),
          side as LineSegment<Point>,
          SPACING,
        )
@@ -273,10 +265,10 @@ const getSelectionBorders = <Point extends LocalPoint | GlobalPoint>(
  center: Point,
  angle: Radians,
 ) => {
-  const topLeft = pointRotateRads(pointFrom(x1, y1), center, angle);
-  const topRight = pointRotateRads(pointFrom(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads(pointFrom(x1, y2), center, angle);
-  const bottomRight = pointRotateRads(pointFrom(x2, y2), center, angle);
+  const topLeft = pointRotateRads(point(x1, y1), center, angle);
+  const topRight = pointRotateRads(point(x2, y1), center, angle);
+  const bottomLeft = pointRotateRads(point(x1, y2), center, angle);
+  const bottomRight = pointRotateRads(point(x2, y2), center, angle);

  return {
    n: [topLeft, topRight],
@@ -17,7 +17,7 @@ import type {
  ExcalidrawElbowArrowElement,
 } from "./types";
 import { ARROW_TYPE } from "../constants";
-import { pointFrom } from "../../math";
+import { point } from "../../math";

 const { h } = window;

@@ -32,8 +32,8 @@ describe("elbow arrow routing", () => {
    }) as ExcalidrawElbowArrowElement;
    scene.insertElement(arrow);
    mutateElbowArrow(arrow, scene.getNonDeletedElementsMap(), [
-      pointFrom(-45 - arrow.x, -100.1 - arrow.y),
-      pointFrom(45 - arrow.x, 99.9 - arrow.y),
+      point(-45 - arrow.x, -100.1 - arrow.y),
+      point(45 - arrow.x, 99.9 - arrow.y),
    ]);
    expect(arrow.points).toEqual([
      [0, 0],
@@ -69,7 +69,7 @@ describe("elbow arrow routing", () => {
      y: -100.1,
      width: 90,
      height: 200,
-      points: [pointFrom(0, 0), pointFrom(90, 200)],
+      points: [point(0, 0), point(90, 200)],
    }) as ExcalidrawElbowArrowElement;
    scene.insertElement(rectangle1);
    scene.insertElement(rectangle2);
@@ -81,7 +81,7 @@ describe("elbow arrow routing", () => {
    expect(arrow.startBinding).not.toBe(null);
    expect(arrow.endBinding).not.toBe(null);

-    mutateElbowArrow(arrow, elementsMap, [pointFrom(0, 0), pointFrom(90, 200)]);
+    mutateElbowArrow(arrow, elementsMap, [point(0, 0), point(90, 200)]);

    expect(arrow.points).toEqual([
      [0, 0],
@@ -1,6 +1,6 @@
 import type { Radians } from "../../math";
 import {
-  pointFrom,
+  point,
  pointScaleFromOrigin,
  pointTranslate,
  vector,
@@ -743,13 +743,13 @@ const getDonglePosition = (
 ): GlobalPoint => {
  switch (heading) {
    case HEADING_UP:
-      return pointFrom(p[0], bounds[1]);
+      return point(p[0], bounds[1]);
    case HEADING_RIGHT:
-      return pointFrom(bounds[2], p[1]);
+      return point(bounds[2], p[1]);
    case HEADING_DOWN:
-      return pointFrom(p[0], bounds[3]);
+      return point(p[0], bounds[3]);
  }
-  return pointFrom(bounds[0], p[1]);
+  return point(bounds[0], p[1]);
 };

 const estimateSegmentCount = (
@@ -19,7 +19,7 @@ import type {
 import { API } from "../tests/helpers/api";
 import { getOriginalContainerHeightFromCache } from "./containerCache";
 import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
-import { pointFrom } from "../../math";
+import { point } from "../../math";

 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -42,7 +42,7 @@ describe("textWysiwyg", () => {
        type: "line",
        width: 100,
        height: 0,
-        points: [pointFrom(0, 0), pointFrom(100, 0)],
+        points: [point(0, 0), point(100, 0)],
      });
      const textSize = 20;
      const text = API.createElement({
@@ -11,7 +11,6 @@ import type { Device, InteractiveCanvasAppState, Zoom } from "../types";
 import {
  isElbowArrow,
  isFrameLikeElement,
-  isImageElement,
  isLinearElement,
 } from "./typeChecks";
 import {
@@ -20,7 +19,7 @@ import {
  isIOS,
 } from "../constants";
 import type { Radians } from "../../math";
-import { pointFrom, pointRotateRads } from "../../math";
+import { point, pointRotateRads } from "../../math";

 export type TransformHandleDirection =
  | "n"
@@ -96,8 +95,8 @@ const generateTransformHandle = (
  angle: Radians,
 ): TransformHandle => {
  const [xx, yy] = pointRotateRads(
-    pointFrom(x + width / 2, y + height / 2),
-    pointFrom(cx, cy),
+    point(x + width / 2, y + height / 2),
+    point(cx, cy),
    angle,
  );
  return [xx - width / 2, yy - height / 2, width, height];
@@ -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,
-    isImageElement(element) ? 0 : undefined,
+    dashedLineMargin,
  );
 };

@@ -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<
@@ -24,14 +24,14 @@ import Cascadia from "./assets/CascadiaCode-Regular.woff2";
 import ComicShanns from "./assets/ComicShanns-Regular.woff2";
 import LiberationSans from "./assets/LiberationSans-Regular.woff2";

-import LilitaLatin from "./assets/Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
-import LilitaLatinExt from "./assets/Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
+import LilitaLatin from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
+import LilitaLatinExt from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";

-import NunitoLatin from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
-import NunitoLatinExt from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
-import NunitoCyrilic from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
-import NunitoCyrilicExt from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
-import NunitoVietnamese from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
+import NunitoLatin from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
+import NunitoLatinExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
+import NunitoCyrilic from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
+import NunitoCyrilicExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
+import NunitoVietnamese from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";

 export class Fonts {
  // it's ok to track fonts across multiple instances only once, so let's use
@@ -29,7 +29,7 @@ import { getElementLineSegments } from "./element/bounds";
 import { doLineSegmentsIntersect, elementsOverlappingBBox } from "../utils/";
 import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
 import type { ReadonlySetLike } from "./utility-types";
-import { isPointWithinBounds, pointFrom } from "../math";
+import { isPointWithinBounds, point } from "../math";

 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (
@@ -159,9 +159,9 @@ export const isCursorInFrame = (
  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);

  return isPointWithinBounds(
-    pointFrom(fx1, fy1),
-    pointFrom(cursorCoords.x, cursorCoords.y),
-    pointFrom(fx2, fy2),
+    point(fx1, fy1),
+    point(cursorCoords.x, cursorCoords.y),
+    point(fx2, fy2),
  );
 };

@@ -230,7 +230,8 @@
    "resetLibrary": "This will clear your library. Are you sure?",
    "removeItemsFromsLibrary": "Delete {{count}} item(s) from library?",
    "invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled.",
-    "collabOfflineWarning": "No internet connection available.\nYour changes will not be saved!"
+    "collabOfflineWarning": "No internet connection available.\nYour changes will not be saved!",
+    "saveYourContent": "Don't forget to save your content ({{shortcut}})!"
  },
  "errors": {
    "unsupportedFileType": "Unsupported file type.",
@@ -328,9 +329,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",
-    "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"
+    "disableSnapping": "Hold CtrlOrCmd to disable snapping"
  },
  "canvasError": {
    "cannotShowPreview": "Cannot show preview",
@@ -401,9 +400,7 @@
    "zoomToSelection": "Zoom to selection",
    "toggleElementLock": "Lock/unlock selection",
    "movePageUpDown": "Move page up/down",
-    "movePageLeftRight": "Move page left/right",
-    "cropStart": "Crop image",
-    "cropFinish": "Finish image cropping"
+    "movePageLeftRight": "Move page left/right"
  },
  "clearCanvasDialog": {
    "title": "Clear canvas"
@@ -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,
-    y1,
-    x2,
-    y2,
+    elementX1,
+    elementY1,
+    elementX2,
+    elementY2,
    selectionColors,
    cx,
    cy,
    dashed,
    activeEmbeddable,
  } = elementProperties;
-  const elementWidth = x2 - x1;
-  const elementHeight = y2 - y1;
+  const elementWidth = elementX2 - elementX1;
+  const elementHeight = elementY2 - elementY1;

-  const padding =
-    elementProperties.padding ?? DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
+  const 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,
-      y1 - linePadding,
+      elementX1 - 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,
-      x2,
-      y1,
-      y2,
+      elementX1,
+      elementX2,
+      elementY1,
+      elementY2,
      selectionColors: ["rgb(0,118,255)"],
      dashed: false,
-      cx: x1 + (x2 - x1) / 2,
-      cy: y1 + (y2 - y1) / 2,
+      cx: elementX1 + (elementX2 - elementX1) / 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(
-            element,
-            elementsMap,
-            true,
-          );
+          const [elementX1, elementY1, elementX2, elementY2, cx, cy] =
+            getElementAbsoluteCoords(element, elementsMap, true);
          selections.push({
            angle: element.angle,
-            x1,
-            y1,
-            x2,
-            y2,
+            elementX1,
+            elementY1,
+            elementX2,
+            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,
-          x2,
-          y1,
-          y2,
+          elementX1,
+          elementX2,
+          elementY1,
+          elementY2,
          selectionColors: [oc.black],
          dashed: true,
-          cx: x1 + (x2 - x1) / 2,
-          cy: y1 + (y2 - y1) / 2,
+          cx: elementX1 + (elementX2 - elementX1) / 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) &&
-        // do not show transform handles when image is being cropped
-        !appState.croppingElementId
+        !isTextElement(appState.editingTextElement)
      ) {
        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;
@@ -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 (
-          element.id === appState.croppingElementId &&
-          isImageElement(elementWithCanvas.element) &&
-          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,
+        drawElementFromCanvas(
+          elementWithCanvas,
+          context,
          renderConfig,
          appState,
+          allElementsMap,
        );

-        if (_elementWithCanvas) {
-          drawElementFromCanvas(
-            _elementWithCanvas,
-            context,
-            renderConfig,
-            appState,
-            allElementsMap,
-          );
-        }
-
        // reset
        context.imageSmoothingEnabled = currentImageSmoothingStatus;
      }
@@ -1,4 +1,4 @@
-import { pointFrom, type GlobalPoint, type LocalPoint } from "../../math";
+import { point, type GlobalPoint, type LocalPoint } from "../../math";
 import { THEME } from "../constants";
 import type { PointSnapLine, PointerSnapLine } from "../snapping";
 import type { InteractiveCanvasAppState } from "../types";
@@ -140,31 +140,27 @@ const drawGapLine = <Point extends LocalPoint | GlobalPoint>(
    // (1)
    if (!appState.zenModeEnabled) {
      drawLine(
-        pointFrom(from[0], from[1] - FULL),
-        pointFrom(from[0], from[1] + FULL),
+        point(from[0], from[1] - FULL),
+        point(from[0], from[1] + FULL),
        context,
      );
    }

    // (3)
    drawLine(
-      pointFrom(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
-      pointFrom(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
+      point(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
+      point(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
      context,
    );
    drawLine(
-      pointFrom(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
-      pointFrom(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
+      point(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
+      point(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
      context,
    );

    if (!appState.zenModeEnabled) {
      // (4)
-      drawLine(
-        pointFrom(to[0], to[1] - FULL),
-        pointFrom(to[0], to[1] + FULL),
-        context,
-      );
+      drawLine(point(to[0], to[1] - FULL), point(to[0], to[1] + FULL), context);

      // (2)
      drawLine(from, to, context);
@@ -174,31 +170,27 @@ const drawGapLine = <Point extends LocalPoint | GlobalPoint>(
    // (1)
    if (!appState.zenModeEnabled) {
      drawLine(
-        pointFrom(from[0] - FULL, from[1]),
-        pointFrom(from[0] + FULL, from[1]),
+        point(from[0] - FULL, from[1]),
+        point(from[0] + FULL, from[1]),
        context,
      );
    }

    // (3)
    drawLine(
-      pointFrom(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
-      pointFrom(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
+      point(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
+      point(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
      context,
    );
    drawLine(
-      pointFrom(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
-      pointFrom(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
+      point(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
+      point(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
      context,
    );

    if (!appState.zenModeEnabled) {
      // (4)
-      drawLine(
-        pointFrom(to[0] - FULL, to[1]),
-        pointFrom(to[0] + FULL, to[1]),
-        context,
-      );
+      drawLine(point(to[0] - FULL, to[1]), point(to[0] + FULL, to[1]), context);

      // (2)
      drawLine(from, to, context);
@@ -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}-${cropHash}`;
+        const symbolId = `image-${fileData.id}`;
        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);
@@ -24,7 +24,7 @@ import {
 import { canChangeRoundness } from "./comparisons";
 import type { EmbedsValidationStatus } from "../types";
 import {
-  pointFrom,
+  point,
  pointDistance,
  type GlobalPoint,
  type LocalPoint,
@@ -408,7 +408,7 @@ export const _generateElementShape = (
      // initial position to it
      const points = element.points.length
        ? element.points
-        : [pointFrom<LocalPoint>(0, 0)];
+        : [point<LocalPoint>(0, 0)];

      if (isElbowArrow(element)) {
        shape = [
@@ -1,6 +1,6 @@
 import {
  isPoint,
-  pointFrom,
+  point,
  pointDistance,
  pointFromPair,
  pointRotateRads,
@@ -167,15 +167,15 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
        ? getClosedCurveShape<Point>(
            element,
            roughShape,
-            pointFrom<Point>(element.x, element.y),
+            point<Point>(element.x, element.y),
            element.angle,
-            pointFrom(cx, cy),
+            point(cx, cy),
          )
        : getCurveShape<Point>(
            roughShape,
-            pointFrom<Point>(element.x, element.y),
+            point<Point>(element.x, element.y),
            element.angle,
-            pointFrom(cx, cy),
+            point(cx, cy),
          );
    }

@@ -186,7 +186,7 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
      const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
      return getFreedrawShape(
        element,
-        pointFrom(cx, cy),
+        point(cx, cy),
        shouldTestInside(element),
      );
    }
@@ -233,7 +233,7 @@ export const getControlPointsForBezierCurve = <
  }

  const ops = getCurvePathOps(shape[0]);
-  let currentP = pointFrom<P>(0, 0);
+  let currentP = point<P>(0, 0);
  let index = 0;
  let minDistance = Infinity;
  let controlPoints: P[] | null = null;
@@ -249,9 +249,9 @@ export const getControlPointsForBezierCurve = <
    }
    if (op === "bcurveTo") {
      const p0 = currentP;
-      const p1 = pointFrom<P>(data[0], data[1]);
-      const p2 = pointFrom<P>(data[2], data[3]);
-      const p3 = pointFrom<P>(data[4], data[5]);
+      const p1 = point<P>(data[0], data[1]);
+      const p2 = point<P>(data[2], data[3]);
+      const p3 = point<P>(data[4], data[5]);
      const distance = pointDistance(p3, endPoint);
      if (distance < minDistance) {
        minDistance = distance;
@@ -279,7 +279,7 @@ export const getBezierXY = <P extends GlobalPoint | LocalPoint>(
    p0[idx] * Math.pow(t, 3);
  const tx = equation(t, 0);
  const ty = equation(t, 1);
-  return pointFrom(tx, ty);
+  return point(tx, ty);
 };

 const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
@@ -301,12 +301,12 @@ const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
      controlPoints[3],
      t,
    );
-    pointsOnCurve.push(pointFrom(p[0], p[1]));
+    pointsOnCurve.push(point(p[0], p[1]));
    t -= 0.05;
  }
  if (pointsOnCurve.length) {
    if (pointsEqual(pointsOnCurve.at(-1)!, endPoint)) {
-      pointsOnCurve.push(pointFrom(endPoint[0], endPoint[1]));
+      pointsOnCurve.push(point(endPoint[0], endPoint[1]));
    }
  }
  return pointsOnCurve;
@@ -393,24 +393,24 @@ export const aabbForElement = (
    midY: element.y + element.height / 2,
  };

-  const center = pointFrom(bbox.midX, bbox.midY);
+  const center = point(bbox.midX, bbox.midY);
  const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(bbox.minX, bbox.minY),
+    point(bbox.minX, bbox.minY),
    center,
    element.angle,
  );
  const [topRightX, topRightY] = pointRotateRads(
-    pointFrom(bbox.maxX, bbox.minY),
+    point(bbox.maxX, bbox.minY),
    center,
    element.angle,
  );
  const [bottomRightX, bottomRightY] = pointRotateRads(
-    pointFrom(bbox.maxX, bbox.maxY),
+    point(bbox.maxX, bbox.maxY),
    center,
    element.angle,
  );
  const [bottomLeftX, bottomLeftY] = pointRotateRads(
-    pointFrom(bbox.minX, bbox.maxY),
+    point(bbox.minX, bbox.maxY),
    center,
    element.angle,
  );
@@ -442,14 +442,14 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
  p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];

 export const aabbsOverlapping = (a: Bounds, b: Bounds) =>
-  pointInsideBounds(pointFrom(a[0], a[1]), b) ||
-  pointInsideBounds(pointFrom(a[2], a[1]), b) ||
-  pointInsideBounds(pointFrom(a[2], a[3]), b) ||
-  pointInsideBounds(pointFrom(a[0], a[3]), b) ||
-  pointInsideBounds(pointFrom(b[0], b[1]), a) ||
-  pointInsideBounds(pointFrom(b[2], b[1]), a) ||
-  pointInsideBounds(pointFrom(b[2], b[3]), a) ||
-  pointInsideBounds(pointFrom(b[0], b[3]), a);
+  pointInsideBounds(point(a[0], a[1]), b) ||
+  pointInsideBounds(point(a[2], a[1]), b) ||
+  pointInsideBounds(point(a[2], a[3]), b) ||
+  pointInsideBounds(point(a[0], a[3]), b) ||
+  pointInsideBounds(point(b[0], b[1]), a) ||
+  pointInsideBounds(point(b[2], b[1]), a) ||
+  pointInsideBounds(point(b[2], b[3]), a) ||
+  pointInsideBounds(point(b[0], b[3]), a);

 export const getCornerRadius = (x: number, element: ExcalidrawElement) => {
  if (
@@ -1,6 +1,6 @@
 import type { InclusiveRange } from "../math";
 import {
-  pointFrom,
+  point,
  pointRotateRads,
  rangeInclusive,
  rangeIntersection,
@@ -228,52 +228,52 @@ export const getElementsCorners = (
      !boundingBoxCorners
    ) {
      const leftMid = pointRotateRads<GlobalPoint>(
-        pointFrom(x1, y1 + halfHeight),
-        pointFrom(cx, cy),
+        point(x1, y1 + halfHeight),
+        point(cx, cy),
        element.angle,
      );
      const topMid = pointRotateRads<GlobalPoint>(
-        pointFrom(x1 + halfWidth, y1),
-        pointFrom(cx, cy),
+        point(x1 + halfWidth, y1),
+        point(cx, cy),
        element.angle,
      );
      const rightMid = pointRotateRads<GlobalPoint>(
-        pointFrom(x2, y1 + halfHeight),
-        pointFrom(cx, cy),
+        point(x2, y1 + halfHeight),
+        point(cx, cy),
        element.angle,
      );
      const bottomMid = pointRotateRads<GlobalPoint>(
-        pointFrom(x1 + halfWidth, y2),
-        pointFrom(cx, cy),
+        point(x1 + halfWidth, y2),
+        point(cx, cy),
        element.angle,
      );
-      const center = pointFrom<GlobalPoint>(cx, cy);
+      const center = point<GlobalPoint>(cx, cy);

      result = omitCenter
        ? [leftMid, topMid, rightMid, bottomMid]
        : [leftMid, topMid, rightMid, bottomMid, center];
    } else {
      const topLeft = pointRotateRads<GlobalPoint>(
-        pointFrom(x1, y1),
-        pointFrom(cx, cy),
+        point(x1, y1),
+        point(cx, cy),
        element.angle,
      );
      const topRight = pointRotateRads<GlobalPoint>(
-        pointFrom(x2, y1),
-        pointFrom(cx, cy),
+        point(x2, y1),
+        point(cx, cy),
        element.angle,
      );
      const bottomLeft = pointRotateRads<GlobalPoint>(
-        pointFrom(x1, y2),
-        pointFrom(cx, cy),
+        point(x1, y2),
+        point(cx, cy),
        element.angle,
      );
      const bottomRight = pointRotateRads<GlobalPoint>(
-        pointFrom(x2, y2),
-        pointFrom(cx, cy),
+        point(x2, y2),
+        point(cx, cy),
        element.angle,
      );
-      const center = pointFrom<GlobalPoint>(cx, cy);
+      const center = point<GlobalPoint>(cx, cy);

      result = omitCenter
        ? [topLeft, topRight, bottomLeft, bottomRight]
@@ -287,18 +287,18 @@ export const getElementsCorners = (
    const width = maxX - minX;
    const height = maxY - minY;

-    const topLeft = pointFrom<GlobalPoint>(minX, minY);
-    const topRight = pointFrom<GlobalPoint>(maxX, minY);
-    const bottomLeft = pointFrom<GlobalPoint>(minX, maxY);
-    const bottomRight = pointFrom<GlobalPoint>(maxX, maxY);
-    const center = pointFrom<GlobalPoint>(minX + width / 2, minY + height / 2);
+    const topLeft = point<GlobalPoint>(minX, minY);
+    const topRight = point<GlobalPoint>(maxX, minY);
+    const bottomLeft = point<GlobalPoint>(minX, maxY);
+    const bottomRight = point<GlobalPoint>(maxX, maxY);
+    const center = point<GlobalPoint>(minX + width / 2, minY + height / 2);

    result = omitCenter
      ? [topLeft, topRight, bottomLeft, bottomRight]
      : [topLeft, topRight, bottomLeft, bottomRight, center];
  }

-  return result.map((p) => pointFrom(round(p[0]), round(p[1])));
+  return result.map((p) => point(round(p[0]), round(p[1])));
 };

 const getReferenceElements = (
@@ -375,11 +375,8 @@ export const getVisibleGaps = (
        horizontalGaps.push({
          startBounds,
          endBounds,
-          startSide: [
-            pointFrom(startMaxX, startMinY),
-            pointFrom(startMaxX, startMaxY),
-          ],
-          endSide: [pointFrom(endMinX, endMinY), pointFrom(endMinX, endMaxY)],
+          startSide: [point(startMaxX, startMinY), point(startMaxX, startMaxY)],
+          endSide: [point(endMinX, endMinY), point(endMinX, endMaxY)],
          length: endMinX - startMaxX,
          overlap: rangeIntersection(
            rangeInclusive(startMinY, startMaxY),
@@ -418,11 +415,8 @@ export const getVisibleGaps = (
        verticalGaps.push({
          startBounds,
          endBounds,
-          startSide: [
-            pointFrom(startMinX, startMaxY),
-            pointFrom(startMaxX, startMaxY),
-          ],
-          endSide: [pointFrom(endMinX, endMinY), pointFrom(endMaxX, endMinY)],
+          startSide: [point(startMinX, startMaxY), point(startMaxX, startMaxY)],
+          endSide: [point(endMinX, endMinY), point(endMaxX, endMinY)],
          length: endMinY - startMaxY,
          overlap: rangeIntersection(
            rangeInclusive(startMinX, startMaxX),
@@ -838,7 +832,7 @@ const createPointSnapLines = (
        }
        snapsX[key].push(
          ...snap.points.map((p) =>
-            pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
+            point<GlobalPoint>(round(p[0]), round(p[1])),
          ),
        );
      }
@@ -855,7 +849,7 @@ const createPointSnapLines = (
        }
        snapsY[key].push(
          ...snap.points.map((p) =>
-            pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
+            point<GlobalPoint>(round(p[0]), round(p[1])),
          ),
        );
      }
@@ -869,7 +863,7 @@ const createPointSnapLines = (
        points: dedupePoints(
          points
            .map((p) => {
-              return pointFrom<GlobalPoint>(Number(key), p[1]);
+              return point<GlobalPoint>(Number(key), p[1]);
            })
            .sort((a, b) => a[1] - b[1]),
        ),
@@ -882,7 +876,7 @@ const createPointSnapLines = (
          points: dedupePoints(
            points
              .map((p) => {
-                return pointFrom<GlobalPoint>(p[0], Number(key));
+                return point<GlobalPoint>(p[0], Number(key));
              })
              .sort((a, b) => a[0] - b[0]),
          ),
@@ -946,16 +940,16 @@ const createGapSnapLines = (
              type: "gap",
              direction: "horizontal",
              points: [
-                pointFrom(gapSnap.gap.startSide[0][0], gapLineY),
-                pointFrom(minX, gapLineY),
+                point(gapSnap.gap.startSide[0][0], gapLineY),
+                point(minX, gapLineY),
              ],
            },
            {
              type: "gap",
              direction: "horizontal",
              points: [
-                pointFrom(maxX, gapLineY),
-                pointFrom(gapSnap.gap.endSide[0][0], gapLineY),
+                point(maxX, gapLineY),
+                point(gapSnap.gap.endSide[0][0], gapLineY),
              ],
            },
          );
@@ -972,16 +966,16 @@ const createGapSnapLines = (
              type: "gap",
              direction: "vertical",
              points: [
-                pointFrom(gapLineX, gapSnap.gap.startSide[0][1]),
-                pointFrom(gapLineX, minY),
+                point(gapLineX, gapSnap.gap.startSide[0][1]),
+                point(gapLineX, minY),
              ],
            },
            {
              type: "gap",
              direction: "vertical",
              points: [
-                pointFrom(gapLineX, maxY),
-                pointFrom(gapLineX, gapSnap.gap.endSide[0][1]),
+                point(gapLineX, maxY),
+                point(gapLineX, gapSnap.gap.endSide[0][1]),
              ],
            },
          );
@@ -997,15 +991,12 @@ const createGapSnapLines = (
            {
              type: "gap",
              direction: "horizontal",
-              points: [
-                pointFrom(startMaxX, gapLineY),
-                pointFrom(endMinX, gapLineY),
-              ],
+              points: [point(startMaxX, gapLineY), point(endMinX, gapLineY)],
            },
            {
              type: "gap",
              direction: "horizontal",
-              points: [pointFrom(endMaxX, gapLineY), pointFrom(minX, gapLineY)],
+              points: [point(endMaxX, gapLineY), point(minX, gapLineY)],
            },
          );
        }
@@ -1020,18 +1011,12 @@ const createGapSnapLines = (
            {
              type: "gap",
              direction: "horizontal",
-              points: [
-                pointFrom(maxX, gapLineY),
-                pointFrom(startMinX, gapLineY),
-              ],
+              points: [point(maxX, gapLineY), point(startMinX, gapLineY)],
            },
            {
              type: "gap",
              direction: "horizontal",
-              points: [
-                pointFrom(startMaxX, gapLineY),
-                pointFrom(endMinX, gapLineY),
-              ],
+              points: [point(startMaxX, gapLineY), point(endMinX, gapLineY)],
            },
          );
        }
@@ -1046,18 +1031,12 @@ const createGapSnapLines = (
            {
              type: "gap",
              direction: "vertical",
-              points: [
-                pointFrom(gapLineX, maxY),
-                pointFrom(gapLineX, startMinY),
-              ],
+              points: [point(gapLineX, maxY), point(gapLineX, startMinY)],
            },
            {
              type: "gap",
              direction: "vertical",
-              points: [
-                pointFrom(gapLineX, startMaxY),
-                pointFrom(gapLineX, endMinY),
-              ],
+              points: [point(gapLineX, startMaxY), point(gapLineX, endMinY)],
            },
          );
        }
@@ -1072,15 +1051,12 @@ const createGapSnapLines = (
            {
              type: "gap",
              direction: "vertical",
-              points: [
-                pointFrom(gapLineX, startMaxY),
-                pointFrom(gapLineX, endMinY),
-              ],
+              points: [point(gapLineX, startMaxY), point(gapLineX, endMinY)],
            },
            {
              type: "gap",
              direction: "vertical",
-              points: [pointFrom(gapLineX, endMaxY), pointFrom(gapLineX, minY)],
+              points: [point(gapLineX, endMaxY), point(gapLineX, minY)],
            },
          );
        }
@@ -1094,7 +1070,7 @@ const createGapSnapLines = (
      return {
        ...gapSnapLine,
        points: gapSnapLine.points.map((p) =>
-          pointFrom(round(p[0]), round(p[1])),
+          point(round(p[0]), round(p[1])),
        ) as PointPair,
      };
    }),
@@ -1144,35 +1120,35 @@ export const snapResizingElements = (
  if (transformHandle) {
    switch (transformHandle) {
      case "e": {
-        selectionSnapPoints.push(pointFrom(maxX, minY), pointFrom(maxX, maxY));
+        selectionSnapPoints.push(point(maxX, minY), point(maxX, maxY));
        break;
      }
      case "w": {
-        selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(minX, maxY));
+        selectionSnapPoints.push(point(minX, minY), point(minX, maxY));
        break;
      }
      case "n": {
-        selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(maxX, minY));
+        selectionSnapPoints.push(point(minX, minY), point(maxX, minY));
        break;
      }
      case "s": {
-        selectionSnapPoints.push(pointFrom(minX, maxY), pointFrom(maxX, maxY));
+        selectionSnapPoints.push(point(minX, maxY), point(maxX, maxY));
        break;
      }
      case "ne": {
-        selectionSnapPoints.push(pointFrom(maxX, minY));
+        selectionSnapPoints.push(point(maxX, minY));
        break;
      }
      case "nw": {
-        selectionSnapPoints.push(pointFrom(minX, minY));
+        selectionSnapPoints.push(point(minX, minY));
        break;
      }
      case "se": {
-        selectionSnapPoints.push(pointFrom(maxX, maxY));
+        selectionSnapPoints.push(point(maxX, maxY));
        break;
      }
      case "sw": {
-        selectionSnapPoints.push(pointFrom(minX, maxY));
+        selectionSnapPoints.push(point(minX, maxY));
        break;
      }
    }
@@ -1215,10 +1191,10 @@ export const snapResizingElements = (
  );

  const corners: GlobalPoint[] = [
-    pointFrom(x1, y1),
-    pointFrom(x1, y2),
-    pointFrom(x2, y1),
-    pointFrom(x2, y2),
+    point(x1, y1),
+    point(x1, y2),
+    point(x2, y1),
+    point(x2, y2),
  ];

  getPointSnaps(
@@ -1255,7 +1231,7 @@ export const snapNewElement = (
  }

  const selectionSnapPoints: GlobalPoint[] = [
-    pointFrom(origin.x + dragOffset.x, origin.y + dragOffset.y),
+    point(origin.x + dragOffset.x, origin.y + dragOffset.y),
  ];

  const snapDistance = getSnapDistance(app.state.zoom.value);
@@ -1355,7 +1331,7 @@ export const getSnapLinesAtPointer = (

        verticalSnapLines.push({
          type: "pointer",
-          points: [corner, pointFrom(corner[0], pointer.y)],
+          points: [corner, point(corner[0], pointer.y)],
          direction: "vertical",
        });

@@ -1371,7 +1347,7 @@ export const getSnapLinesAtPointer = (

        horizontalSnapLines.push({
          type: "pointer",
-          points: [corner, pointFrom(pointer.x, corner[1])],
+          points: [corner, point(pointer.x, corner[1])],
          direction: "horizontal",
        });

@@ -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, {
@@ -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,
@@ -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,
@@ -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,
@@ -7,7 +7,7 @@ import { API } from "./helpers/api";
 import { KEYS } from "../keys";
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import { arrayToMap } from "../utils";
-import { pointFrom } from "../../math";
+import { point } from "../../math";

 const { h } = window;

@@ -32,12 +32,7 @@ describe("element binding", () => {
      y: 0,
      width: 100,
      height: 1,
-      points: [
-        pointFrom(0, 0),
-        pointFrom(0, 0),
-        pointFrom(100, 0),
-        pointFrom(100, 0),
-      ],
+      points: [point(0, 0), point(0, 0), point(100, 0), point(100, 0)],
    });
    API.setElements([rect, arrow]);
    expect(arrow.startBinding).toBe(null);
@@ -315,7 +310,7 @@ describe("element binding", () => {
    const arrow1 = API.createElement({
      type: "arrow",
      id: "arrow1",
-      points: [pointFrom(0, 0), pointFrom(0, -87.45777932247563)],
+      points: [point(0, 0), point(0, -87.45777932247563)],
      startBinding: {
        elementId: "rectangle1",
        focus: 0.2,
@@ -333,7 +328,7 @@ describe("element binding", () => {
    const arrow2 = API.createElement({
      type: "arrow",
      id: "arrow2",
-      points: [pointFrom(0, 0), pointFrom(0, -87.45777932247563)],
+      points: [point(0, 0), point(0, -87.45777932247563)],
      startBinding: {
        elementId: "text1",
        focus: 0.2,
@@ -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);
-  });
-});
@@ -28,7 +28,7 @@ import { getBoundTextElementPosition } from "../element/textElement";
 import { createPasteEvent } from "../clipboard";
 import { arrayToMap, cloneJSON } from "../utils";
 import type { LocalPoint } from "../../math";
-import { pointFrom, type Radians } from "../../math";
+import { point, type Radians } from "../../math";

 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -146,9 +146,9 @@ const createLinearElementWithCurveInsideMinMaxPoints = (
    link: null,
    locked: false,
    points: [
-      pointFrom<LocalPoint>(0, 0),
-      pointFrom<LocalPoint>(-922.4761962890625, 300.3277587890625),
-      pointFrom<LocalPoint>(828.0126953125, 410.51605224609375),
+      point<LocalPoint>(0, 0),
+      point<LocalPoint>(-922.4761962890625, 300.3277587890625),
+      point<LocalPoint>(828.0126953125, 410.51605224609375),
    ],
  });
 };
@@ -38,7 +38,7 @@ import type App from "../../components/App";
 import { createTestHook } from "../../components/App";
 import type { Action } from "../../actions/types";
 import { mutateElement } from "../../element/mutateElement";
-import { pointFrom, type LocalPoint, type Radians } from "../../../math";
+import { point, type LocalPoint, type Radians } from "../../../math";

 const readFile = util.promisify(fs.readFile);
 // so that window.h is available when App.tsx is not imported as well.
@@ -307,8 +307,8 @@ export class API {
          height,
          type,
          points: rest.points ?? [
-            pointFrom<LocalPoint>(0, 0),
-            pointFrom<LocalPoint>(100, 100),
+            point<LocalPoint>(0, 0),
+            point<LocalPoint>(100, 100),
          ],
          elbowed: rest.elbowed ?? false,
        });
@@ -320,8 +320,8 @@ export class API {
          height,
          type,
          points: rest.points ?? [
-            pointFrom<LocalPoint>(0, 0),
-            pointFrom<LocalPoint>(100, 100),
+            point<LocalPoint>(0, 0),
+            point<LocalPoint>(100, 100),
          ],
        });
        break;
@@ -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 {
@@ -34,9 +34,7 @@ import { getTextEditor } from "../queries/dom";
 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";
+import { point, pointRotateRads } from "../../../math";

 // so that window.h is available when App.tsx is not imported as well.
 createTestHook();
@@ -144,7 +142,7 @@ const getElementPointForSelection = (
  element: ExcalidrawElement,
 ): GlobalPoint => {
  const { x, y, width, height, angle } = element;
-  const target = pointFrom<GlobalPoint>(
+  const target = point<GlobalPoint>(
    x +
      (isLinearElement(element) || isFreeDrawElement(element) ? 0 : width / 2),
    y,
@@ -153,12 +151,9 @@ const getElementPointForSelection = (

  if (isLinearElement(element)) {
    const bounds = getElementPointsCoords(element, element.points);
-    center = pointFrom(
-      (bounds[0] + bounds[2]) / 2,
-      (bounds[1] + bounds[3]) / 2,
-    );
+    center = point((bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2);
  } else {
-    center = pointFrom(x + width / 2, y + height / 2);
+    center = point(x + width / 2, y + height / 2);
  }

  if (isTextElement(element)) {
@@ -474,8 +469,8 @@ export class UI {
    const width = initialWidth ?? initialHeight ?? size;
    const height = initialHeight ?? size;
    const points: LocalPoint[] = initialPoints ?? [
-      pointFrom(0, 0),
-      pointFrom(width, height),
+      point(0, 0),
+      point(width, height),
    ];

    UI.clickTool(type);
@@ -563,38 +558,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],
@@ -46,7 +46,7 @@ import { HistoryEntry } from "../history";
 import { AppStateChange, ElementsChange } from "../change";
 import { Snapshot, StoreAction } from "../store";
 import type { LocalPoint, Radians } from "../../math";
-import { pointFrom } from "../../math";
+import { point } from "../../math";

 const { h } = window;

@@ -2041,9 +2041,9 @@ describe("history", () => {
            width: 178.9000000000001,
            height: 236.10000000000002,
            points: [
-              pointFrom(0, 0),
-              pointFrom(178.9000000000001, 0),
-              pointFrom(178.9000000000001, 236.10000000000002),
+              point(0, 0),
+              point(178.9000000000001, 0),
+              point(178.9000000000001, 236.10000000000002),
            ],
            startBinding: {
              elementId: "KPrBI4g_v9qUB1XxYLgSz",
@@ -2159,11 +2159,11 @@ describe("history", () => {
        elements: [
          newElementWith(h.elements[0] as ExcalidrawLinearElement, {
            points: [
-              pointFrom(0, 0),
-              pointFrom(5, 5),
-              pointFrom(10, 10),
-              pointFrom(15, 15),
-              pointFrom(20, 20),
+              point(0, 0),
+              point(5, 5),
+              point(10, 10),
+              point(15, 15),
+              point(20, 20),
            ] as LocalPoint[],
          }),
        ],
@@ -28,7 +28,7 @@ import { ROUNDNESS, VERTICAL_ALIGN } from "../constants";
 import { vi } from "vitest";
 import { arrayToMap } from "../utils";
 import type { GlobalPoint } from "../../math";
-import { pointCenter, pointFrom } from "../../math";
+import { pointCenter, point } from "../../math";

 const renderInteractiveScene = vi.spyOn(
  InteractiveCanvas,
@@ -57,8 +57,8 @@ describe("Test Linear Elements", () => {
    interactiveCanvas = container.querySelector("canvas.interactive")!;
  });

-  const p1 = pointFrom<GlobalPoint>(20, 20);
-  const p2 = pointFrom<GlobalPoint>(60, 20);
+  const p1 = point<GlobalPoint>(20, 20);
+  const p2 = point<GlobalPoint>(60, 20);
  const midpoint = pointCenter<GlobalPoint>(p1, p2);
  const delta = 50;
  const mouse = new Pointer("mouse");
@@ -75,7 +75,7 @@ describe("Test Linear Elements", () => {
      height: 0,
      type,
      roughness,
-      points: [pointFrom(0, 0), pointFrom(p2[0] - p1[0], p2[1] - p1[1])],
+      points: [point(0, 0), point(p2[0] - p1[0], p2[1] - p1[1])],
      roundness,
    });
    API.setElements([line]);
@@ -99,9 +99,9 @@ describe("Test Linear Elements", () => {
      type,
      roughness,
      points: [
-        pointFrom(0, 0),
-        pointFrom(p3[0], p3[1]),
-        pointFrom(p2[0] - p1[0], p2[1] - p1[1]),
+        point(0, 0),
+        point(p3[0], p3[1]),
+        point(p2[0] - p1[0], p2[1] - p1[1]),
      ],
      roundness,
    });
@@ -161,7 +161,7 @@ describe("Test Linear Elements", () => {
    expect(line.points.length).toEqual(2);

    mouse.clickAt(midpoint[0], midpoint[1]);
-    drag(midpoint, pointFrom(midpoint[0] + 1, midpoint[1] + 1));
+    drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));

    expect(line.points.length).toEqual(2);

@@ -169,7 +169,7 @@ describe("Test Linear Elements", () => {
    expect(line.y).toBe(originalY);
    expect(line.points.length).toEqual(2);

-    drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
+    drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
    expect(line.x).toBe(originalX);
    expect(line.y).toBe(originalY);
    expect(line.points.length).toEqual(3);
@@ -184,7 +184,7 @@ describe("Test Linear Elements", () => {
    expect((h.elements[0] as ExcalidrawLinearElement).points.length).toEqual(2);

    // drag line from midpoint
-    drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
+    drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
    expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
    expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
    expect(line.points.length).toEqual(3);
@@ -248,7 +248,7 @@ describe("Test Linear Elements", () => {
      mouse.clickAt(midpoint[0], midpoint[1]);
      expect(line.points.length).toEqual(2);

-      drag(midpoint, pointFrom(midpoint[0] + 1, midpoint[1] + 1));
+      drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));
      expect(line.x).toBe(originalX);
      expect(line.y).toBe(originalY);
      expect(line.points.length).toEqual(3);
@@ -261,7 +261,7 @@ describe("Test Linear Elements", () => {
      enterLineEditingMode(line);

      // drag line from midpoint
-      drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
+      drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
      expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
        `12`,
      );
@@ -356,7 +356,7 @@ describe("Test Linear Elements", () => {
      const startPoint = pointCenter(points[0], midPoints[0]!);
      const deltaX = 50;
      const deltaY = 20;
-      const endPoint = pointFrom<GlobalPoint>(
+      const endPoint = point<GlobalPoint>(
        startPoint[0] + deltaX,
        startPoint[1] + deltaY,
      );
@@ -399,8 +399,8 @@ describe("Test Linear Elements", () => {
      // This is the expected midpoint for line with round edge
      // hence hardcoding it so if later some bug is introduced
      // this will fail and we can fix it
-      const firstSegmentMidpoint = pointFrom<GlobalPoint>(55, 45);
-      const lastSegmentMidpoint = pointFrom<GlobalPoint>(75, 40);
+      const firstSegmentMidpoint = point<GlobalPoint>(55, 45);
+      const lastSegmentMidpoint = point<GlobalPoint>(75, 40);

      let line: ExcalidrawLinearElement;

@@ -416,7 +416,7 @@ describe("Test Linear Elements", () => {
        // drag line via first segment midpoint
        drag(
          firstSegmentMidpoint,
-          pointFrom(
+          point(
            firstSegmentMidpoint[0] + delta,
            firstSegmentMidpoint[1] + delta,
          ),
@@ -426,10 +426,7 @@ describe("Test Linear Elements", () => {
        // drag line from last segment midpoint
        drag(
          lastSegmentMidpoint,
-          pointFrom(
-            lastSegmentMidpoint[0] + delta,
-            lastSegmentMidpoint[1] + delta,
-          ),
+          point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
        );

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
@@ -478,10 +475,10 @@ describe("Test Linear Elements", () => {
          h.state,
        );

-        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);

        // Drag from first point
-        drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));
+        drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
          `12`,
@@ -519,10 +516,10 @@ describe("Test Linear Elements", () => {
          h.state,
        );

-        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);

        // Drag from first point
-        drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
+        drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
          `12`,
@@ -559,7 +556,7 @@ describe("Test Linear Elements", () => {
        // dragging line from last segment midpoint
        drag(
          lastSegmentMidpoint,
-          pointFrom(lastSegmentMidpoint[0] + 50, lastSegmentMidpoint[1] + 50),
+          point(lastSegmentMidpoint[0] + 50, lastSegmentMidpoint[1] + 50),
        );
        expect(line.points.length).toEqual(4);

@@ -592,11 +589,11 @@ describe("Test Linear Elements", () => {
      // This is the expected midpoint for line with round edge
      // hence hardcoding it so if later some bug is introduced
      // this will fail and we can fix it
-      const firstSegmentMidpoint = pointFrom<GlobalPoint>(
+      const firstSegmentMidpoint = point<GlobalPoint>(
        55.9697848965255,
        47.442326230998205,
      );
-      const lastSegmentMidpoint = pointFrom<GlobalPoint>(
+      const lastSegmentMidpoint = point<GlobalPoint>(
        76.08587175006699,
        43.294165939653226,
      );
@@ -615,7 +612,7 @@ describe("Test Linear Elements", () => {
        // drag line from first segment midpoint
        drag(
          firstSegmentMidpoint,
-          pointFrom(
+          point(
            firstSegmentMidpoint[0] + delta,
            firstSegmentMidpoint[1] + delta,
          ),
@@ -625,10 +622,7 @@ describe("Test Linear Elements", () => {
        // drag line from last segment midpoint
        drag(
          lastSegmentMidpoint,
-          pointFrom(
-            lastSegmentMidpoint[0] + delta,
-            lastSegmentMidpoint[1] + delta,
-          ),
+          point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
        );
        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
          `16`,
@@ -675,10 +669,10 @@ describe("Test Linear Elements", () => {
          h.state,
        );

-        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);

        // Drag from first point
-        drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));
+        drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));

        const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
          line,
@@ -723,10 +717,10 @@ describe("Test Linear Elements", () => {
          h.state,
        );

-        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);

        // Drag from first point
-        drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
+        drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));

        expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
          `12`,
@@ -757,10 +751,7 @@ describe("Test Linear Elements", () => {

        drag(
          lastSegmentMidpoint,
-          pointFrom(
-            lastSegmentMidpoint[0] + delta,
-            lastSegmentMidpoint[1] + delta,
-          ),
+          point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
        );
        expect(line.points.length).toEqual(4);

@@ -820,8 +811,8 @@ describe("Test Linear Elements", () => {
      API.setSelectedElements([line]);
      enterLineEditingMode(line, true);
      drag(
-        pointFrom(line.points[0][0] + line.x, line.points[0][1] + line.y),
-        pointFrom(
+        point(line.points[0][0] + line.x, line.points[0][1] + line.y),
+        point(
          dragEndPositionOffset[0] + line.x,
          dragEndPositionOffset[1] + line.y,
        ),
@@ -936,14 +927,14 @@ describe("Test Linear Elements", () => {
        // This is the expected midpoint for line with round edge
        // hence hardcoding it so if later some bug is introduced
        // this will fail and we can fix it
-        const firstSegmentMidpoint = pointFrom<GlobalPoint>(
+        const firstSegmentMidpoint = point<GlobalPoint>(
          55.9697848965255,
          47.442326230998205,
        );
        // drag line from first segment midpoint
        drag(
          firstSegmentMidpoint,
-          pointFrom(
+          point(
            firstSegmentMidpoint[0] + delta,
            firstSegmentMidpoint[1] + delta,
          ),
@@ -1160,7 +1151,7 @@ describe("Test Linear Elements", () => {
      );

      // Drag from last point
-      drag(points[1], pointFrom(points[1][0] + 300, points[1][1]));
+      drag(points[1], point(points[1][0] + 300, points[1][1]));

      expect({ width: container.width, height: container.height })
        .toMatchInlineSnapshot(`
@@ -1359,11 +1350,11 @@ describe("Test Linear Elements", () => {
          [
            {
              index: 0,
-              point: pointFrom(line.points[0][0] + 10, line.points[0][1] + 10),
+              point: point(line.points[0][0] + 10, line.points[0][1] + 10),
            },
            {
              index: line.points.length - 1,
-              point: pointFrom(
+              point: point(
                line.points[line.points.length - 1][0] - 10,
                line.points[line.points.length - 1][1] - 10,
              ),
@@ -17,7 +17,7 @@ import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { arrayToMap } from "../utils";
 import type { LocalPoint } from "../../math";
-import { pointFrom } from "../../math";
+import { point } from "../../math";

 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);

@@ -220,17 +220,12 @@ describe("generic element", () => {

 describe.each(["line", "freedraw"] as const)("%s element", (type) => {
  const points: Record<typeof type, LocalPoint[]> = {
-    line: [
-      pointFrom(0, 0),
-      pointFrom(60, -20),
-      pointFrom(20, 40),
-      pointFrom(-40, 0),
-    ],
+    line: [point(0, 0), point(60, -20), point(20, 40), point(-40, 0)],
    freedraw: [
-      pointFrom(0, 0),
-      pointFrom(-2.474600807561444, 41.021700699972),
-      pointFrom(3.6627956000014024, 47.84174560617245),
-      pointFrom(40.495224145598115, 47.15909710753482),
+      point(0, 0),
+      point(-2.474600807561444, 41.021700699972),
+      point(3.6627956000014024, 47.84174560617245),
+      point(40.495224145598115, 47.15909710753482),
    ],
  };

@@ -298,11 +293,11 @@ describe("arrow element", () => {
  it("resizes with a label", async () => {
    const arrow = UI.createElement("arrow", {
      points: [
-        pointFrom(0, 0),
-        pointFrom(40, 140),
-        pointFrom(80, 60), // label's anchor
-        pointFrom(180, 20),
-        pointFrom(200, 120),
+        point(0, 0),
+        point(40, 140),
+        point(80, 60), // label's anchor
+        point(180, 20),
+        point(200, 120),
      ],
    });
    const label = await UI.editText(arrow, "Hello");
@@ -752,24 +747,24 @@ describe("multiple selection", () => {
      x: 60,
      y: 40,
      points: [
-        pointFrom(0, 0),
-        pointFrom(-40, 40),
-        pointFrom(-60, 0),
-        pointFrom(0, -40),
-        pointFrom(40, 20),
-        pointFrom(0, 40),
+        point(0, 0),
+        point(-40, 40),
+        point(-60, 0),
+        point(0, -40),
+        point(40, 20),
+        point(0, 40),
      ],
    });
    const freedraw = UI.createElement("freedraw", {
      x: 63.56072661326618,
      y: 100,
      points: [
-        pointFrom(0, 0),
-        pointFrom(-43.56072661326618, 18.15048126846341),
-        pointFrom(-43.56072661326618, 29.041198460587566),
-        pointFrom(-38.115368017204105, 42.652452795512204),
-        pointFrom(-19.964886748740696, 66.24829266003775),
-        pointFrom(19.056612930986716, 77.1390098521619),
+        point(0, 0),
+        point(-43.56072661326618, 18.15048126846341),
+        point(-43.56072661326618, 29.041198460587566),
+        point(-38.115368017204105, 42.652452795512204),
+        point(-19.964886748740696, 66.24829266003775),
+        point(19.056612930986716, 77.1390098521619),
      ],
    });

@@ -1106,13 +1101,13 @@ describe("multiple selection", () => {
      x: 60,
      y: 0,
      points: [
-        pointFrom(0, 0),
-        pointFrom(-40, 40),
-        pointFrom(-20, 60),
-        pointFrom(20, 20),
-        pointFrom(40, 40),
-        pointFrom(-20, 100),
-        pointFrom(-60, 60),
+        point(0, 0),
+        point(-40, 40),
+        point(-20, 60),
+        point(20, 20),
+        point(40, 40),
+        point(-20, 100),
+        point(-60, 60),
      ],
    });

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

@@ -1,9 +1,4 @@
-import {
-  isLineSegment,
-  lineSegment,
-  pointFrom,
-  type GlobalPoint,
-} from "../math";
+import { isLineSegment, lineSegment, point, type GlobalPoint } from "../math";
 import type { LineSegment } from "../utils";
 import type { BoundingBox, Bounds } from "./element/bounds";
 import { isBounds } from "./element/typeChecks";
@@ -57,8 +52,8 @@ export const debugDrawPoint = (

  debugDrawLine(
    lineSegment(
-      pointFrom<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset - 10),
-      pointFrom<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset + 10),
+      point<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset - 10),
+      point<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset + 10),
    ),
    {
      color: opts?.color ?? "cyan",
@@ -67,8 +62,8 @@ export const debugDrawPoint = (
  );
  debugDrawLine(
    lineSegment(
-      pointFrom<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset + 10),
-      pointFrom<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset - 10),
+      point<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset + 10),
+      point<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset - 10),
    ),
    {
      color: opts?.color ?? "cyan",
@@ -88,20 +83,20 @@ export const debugDrawBoundingBox = (
    debugDrawLine(
      [
        lineSegment(
-          pointFrom<GlobalPoint>(bbox.minX, bbox.minY),
-          pointFrom<GlobalPoint>(bbox.maxX, bbox.minY),
+          point<GlobalPoint>(bbox.minX, bbox.minY),
+          point<GlobalPoint>(bbox.maxX, bbox.minY),
        ),
        lineSegment(
-          pointFrom<GlobalPoint>(bbox.maxX, bbox.minY),
-          pointFrom<GlobalPoint>(bbox.maxX, bbox.maxY),
+          point<GlobalPoint>(bbox.maxX, bbox.minY),
+          point<GlobalPoint>(bbox.maxX, bbox.maxY),
        ),
        lineSegment(
-          pointFrom<GlobalPoint>(bbox.maxX, bbox.maxY),
-          pointFrom<GlobalPoint>(bbox.minX, bbox.maxY),
+          point<GlobalPoint>(bbox.maxX, bbox.maxY),
+          point<GlobalPoint>(bbox.minX, bbox.maxY),
        ),
        lineSegment(
-          pointFrom<GlobalPoint>(bbox.minX, bbox.maxY),
-          pointFrom<GlobalPoint>(bbox.minX, bbox.minY),
+          point<GlobalPoint>(bbox.minX, bbox.maxY),
+          point<GlobalPoint>(bbox.minX, bbox.minY),
        ),
      ],
      {
@@ -123,20 +118,20 @@ export const debugDrawBounds = (
    debugDrawLine(
      [
        lineSegment(
-          pointFrom<GlobalPoint>(bbox[0], bbox[1]),
-          pointFrom<GlobalPoint>(bbox[2], bbox[1]),
+          point<GlobalPoint>(bbox[0], bbox[1]),
+          point<GlobalPoint>(bbox[2], bbox[1]),
        ),
        lineSegment(
-          pointFrom<GlobalPoint>(bbox[2], bbox[1]),
-          pointFrom<GlobalPoint>(bbox[2], bbox[3]),
+          point<GlobalPoint>(bbox[2], bbox[1]),
+          point<GlobalPoint>(bbox[2], bbox[3]),
        ),
        lineSegment(
-          pointFrom<GlobalPoint>(bbox[2], bbox[3]),
-          pointFrom<GlobalPoint>(bbox[0], bbox[3]),
+          point<GlobalPoint>(bbox[2], bbox[3]),
+          point<GlobalPoint>(bbox[0], bbox[3]),
        ),
        lineSegment(
-          pointFrom<GlobalPoint>(bbox[0], bbox[3]),
-          pointFrom<GlobalPoint>(bbox[0], bbox[1]),
+          point<GlobalPoint>(bbox[0], bbox[3]),
+          point<GlobalPoint>(bbox[0], bbox[1]),
        ),
      ],
      {
@@ -1,5 +1,5 @@
 import { isPointOnSymmetricArc } from "./arc";
-import { pointFrom } from "./point";
+import { point } from "./point";

 describe("point on arc", () => {
  it("should detect point on simple arc", () => {
@@ -10,7 +10,7 @@ describe("point on arc", () => {
          startAngle: -Math.PI / 4,
          endAngle: Math.PI / 4,
        },
-        pointFrom(0.92291667, 0.385),
+        point(0.92291667, 0.385),
      ),
    ).toBe(true);
  });
@@ -22,7 +22,7 @@ describe("point on arc", () => {
          startAngle: -Math.PI / 4,
          endAngle: Math.PI / 4,
        },
-        pointFrom(-0.92291667, 0.385),
+        point(-0.92291667, 0.385),
      ),
    ).toBe(false);
  });
@@ -34,7 +34,7 @@ describe("point on arc", () => {
          startAngle: -Math.PI / 4,
          endAngle: Math.PI / 4,
        },
-        pointFrom(-0.5, 0.5),
+        point(-0.5, 0.5),
      ),
    ).toBe(false);
  });
@@ -1,4 +1,4 @@
-import { pointFrom, pointRotateRads } from "./point";
+import { point, pointRotateRads } from "./point";
 import type { Curve, GlobalPoint, LocalPoint, Radians } from "./types";

 /**
@@ -43,10 +43,10 @@ export function curveToBezier<Point extends LocalPoint | GlobalPoint>(
  const out: Point[] = [];
  if (len === 3) {
    out.push(
-      pointFrom(pointsIn[0][0], pointsIn[0][1]), // Points need to be cloned
-      pointFrom(pointsIn[1][0], pointsIn[1][1]), // Points need to be cloned
-      pointFrom(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
-      pointFrom(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
+      point(pointsIn[0][0], pointsIn[0][1]), // Points need to be cloned
+      point(pointsIn[1][0], pointsIn[1][1]), // Points need to be cloned
+      point(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
+      point(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
    );
  } else {
    const points: Point[] = [];
@@ -59,19 +59,19 @@ export function curveToBezier<Point extends LocalPoint | GlobalPoint>(
    }
    const b: Point[] = [];
    const s = 1 - curveTightness;
-    out.push(pointFrom(points[0][0], points[0][1]));
+    out.push(point(points[0][0], points[0][1]));
    for (let i = 1; i + 2 < points.length; i++) {
      const cachedVertArray = points[i];
-      b[0] = pointFrom(cachedVertArray[0], cachedVertArray[1]);
-      b[1] = pointFrom(
+      b[0] = point(cachedVertArray[0], cachedVertArray[1]);
+      b[1] = point(
        cachedVertArray[0] + (s * points[i + 1][0] - s * points[i - 1][0]) / 6,
        cachedVertArray[1] + (s * points[i + 1][1] - s * points[i - 1][1]) / 6,
      );
-      b[2] = pointFrom(
+      b[2] = point(
        points[i + 1][0] + (s * points[i][0] - s * points[i + 2][0]) / 6,
        points[i + 1][1] + (s * points[i][1] - s * points[i + 2][1]) / 6,
      );
-      b[3] = pointFrom(points[i + 1][0], points[i + 1][1]);
+      b[3] = point(points[i + 1][0], points[i + 1][1]);
      out.push(b[1], b[2], b[3]);
    }
  }
@@ -102,7 +102,7 @@ export const cubicBezierPoint = <Point extends LocalPoint | GlobalPoint>(
    3 * (1 - t) * Math.pow(t, 2) * p2[1] +
    Math.pow(t, 3) * p3[1];

-  return pointFrom(x, y);
+  return point(x, y);
 };

 /**
@@ -1,4 +1,4 @@
-import { pointFrom, pointRotateRads } from "./point";
+import { point, pointRotateRads } from "./point";
 import type { Radians } from "./types";

 describe("rotate", () => {
@@ -9,14 +9,14 @@ describe("rotate", () => {
    const y2 = 30;
    const angle = (Math.PI / 2) as Radians;
    const [rotatedX, rotatedY] = pointRotateRads(
-      pointFrom(x1, y1),
-      pointFrom(x2, y2),
+      point(x1, y1),
+      point(x2, y2),
      angle,
    );
    expect([rotatedX, rotatedY]).toEqual([30, 20]);
    const res2 = pointRotateRads(
-      pointFrom(rotatedX, rotatedY),
-      pointFrom(x2, y2),
+      point(rotatedX, rotatedY),
+      point(x2, y2),
      -angle as Radians,
    );
    expect(res2).toEqual([x1, x2]);
@@ -16,7 +16,7 @@ import { vectorFromPoint, vectorScale } from "./vector";
 * @param y The Y coordinate
 * @returns The branded and created point
 */
-export function pointFrom<Point extends GlobalPoint | LocalPoint>(
+export function point<Point extends GlobalPoint | LocalPoint>(
  x: number,
  y: number,
 ): Point {
@@ -33,7 +33,7 @@ export function pointFromArray<Point extends GlobalPoint | LocalPoint>(
  numberArray: number[],
 ): Point | undefined {
  return numberArray.length === 2
-    ? pointFrom<Point>(numberArray[0], numberArray[1])
+    ? point<Point>(numberArray[0], numberArray[1])
    : undefined;
 }

@@ -107,7 +107,7 @@ export function pointRotateRads<Point extends GlobalPoint | LocalPoint>(
  [cx, cy]: Point,
  angle: Radians,
 ): Point {
-  return pointFrom(
+  return point(
    (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
    (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy,
  );
@@ -146,7 +146,7 @@ export function pointTranslate<
  From extends GlobalPoint | LocalPoint,
  To extends GlobalPoint | LocalPoint,
 >(p: From, v: Vector = [0, 0] as Vector): To {
-  return pointFrom(p[0] + v[0], p[1] + v[1]);
+  return point(p[0] + v[0], p[1] + v[1]);
 }

 /**
@@ -157,7 +157,7 @@ export function pointTranslate<
 * @returns The middle point
 */
 export function pointCenter<P extends LocalPoint | GlobalPoint>(a: P, b: P): P {
-  return pointFrom((a[0] + b[0]) / 2, (a[1] + b[1]) / 2);
+  return point((a[0] + b[0]) / 2, (a[1] + b[1]) / 2);
 }

 /**
@@ -172,7 +172,7 @@ export function pointAdd<Point extends LocalPoint | GlobalPoint>(
  a: Point,
  b: Point,
 ): Point {
-  return pointFrom(a[0] + b[0], a[1] + b[1]);
+  return point(a[0] + b[0], a[1] + b[1]);
 }

 /**
@@ -187,7 +187,7 @@ export function pointSubtract<Point extends LocalPoint | GlobalPoint>(
  a: Point,
  b: Point,
 ): Point {
-  return pointFrom(a[0] - b[0], a[1] - b[1]);
+  return point(a[0] - b[0], a[1] - b[1]);
 }

 /**
@@ -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;
@@ -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));
-};
@@ -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,
@@ -4,7 +4,7 @@ import {
  degreesToRadians,
  lineSegment,
  lineSegmentRotate,
-  pointFrom,
+  point,
  pointRotateDegs,
 } from "../math";
 import { pointOnCurve, pointOnPolyline } from "./collision";
@@ -12,21 +12,21 @@ import type { Polyline } from "./geometry/shape";

 describe("point and curve", () => {
  const c: Curve<GlobalPoint> = curve(
-    pointFrom(1.4, 1.65),
-    pointFrom(1.9, 7.9),
-    pointFrom(5.9, 1.65),
-    pointFrom(6.44, 4.84),
+    point(1.4, 1.65),
+    point(1.9, 7.9),
+    point(5.9, 1.65),
+    point(6.44, 4.84),
  );

  it("point on curve", () => {
    expect(pointOnCurve(c[0], c, 10e-5)).toBe(true);
    expect(pointOnCurve(c[3], c, 10e-5)).toBe(true);

-    expect(pointOnCurve(pointFrom(2, 4), c, 0.1)).toBe(true);
-    expect(pointOnCurve(pointFrom(4, 4.4), c, 0.1)).toBe(true);
-    expect(pointOnCurve(pointFrom(5.6, 3.85), c, 0.1)).toBe(true);
+    expect(pointOnCurve(point(2, 4), c, 0.1)).toBe(true);
+    expect(pointOnCurve(point(4, 4.4), c, 0.1)).toBe(true);
+    expect(pointOnCurve(point(5.6, 3.85), c, 0.1)).toBe(true);

-    expect(pointOnCurve(pointFrom(5.6, 4), c, 0.1)).toBe(false);
+    expect(pointOnCurve(point(5.6, 4), c, 0.1)).toBe(false);
    expect(pointOnCurve(c[1], c, 0.1)).toBe(false);
    expect(pointOnCurve(c[2], c, 0.1)).toBe(false);
  });
@@ -34,52 +34,52 @@ describe("point and curve", () => {

 describe("point and polylines", () => {
  const polyline: Polyline<GlobalPoint> = [
-    lineSegment(pointFrom(1, 0), pointFrom(1, 2)),
-    lineSegment(pointFrom(1, 2), pointFrom(2, 2)),
-    lineSegment(pointFrom(2, 2), pointFrom(2, 1)),
-    lineSegment(pointFrom(2, 1), pointFrom(3, 1)),
+    lineSegment(point(1, 0), point(1, 2)),
+    lineSegment(point(1, 2), point(2, 2)),
+    lineSegment(point(2, 2), point(2, 1)),
+    lineSegment(point(2, 1), point(3, 1)),
  ];

  it("point on the line", () => {
-    expect(pointOnPolyline(pointFrom(1, 0), polyline)).toBe(true);
-    expect(pointOnPolyline(pointFrom(1, 2), polyline)).toBe(true);
-    expect(pointOnPolyline(pointFrom(2, 2), polyline)).toBe(true);
-    expect(pointOnPolyline(pointFrom(2, 1), polyline)).toBe(true);
-    expect(pointOnPolyline(pointFrom(3, 1), polyline)).toBe(true);
+    expect(pointOnPolyline(point(1, 0), polyline)).toBe(true);
+    expect(pointOnPolyline(point(1, 2), polyline)).toBe(true);
+    expect(pointOnPolyline(point(2, 2), polyline)).toBe(true);
+    expect(pointOnPolyline(point(2, 1), polyline)).toBe(true);
+    expect(pointOnPolyline(point(3, 1), polyline)).toBe(true);

-    expect(pointOnPolyline(pointFrom(1, 1), polyline)).toBe(true);
-    expect(pointOnPolyline(pointFrom(2, 1.5), polyline)).toBe(true);
-    expect(pointOnPolyline(pointFrom(2.5, 1), polyline)).toBe(true);
+    expect(pointOnPolyline(point(1, 1), polyline)).toBe(true);
+    expect(pointOnPolyline(point(2, 1.5), polyline)).toBe(true);
+    expect(pointOnPolyline(point(2.5, 1), polyline)).toBe(true);

-    expect(pointOnPolyline(pointFrom(0, 1), polyline)).toBe(false);
-    expect(pointOnPolyline(pointFrom(2.1, 1.5), polyline)).toBe(false);
+    expect(pointOnPolyline(point(0, 1), polyline)).toBe(false);
+    expect(pointOnPolyline(point(2.1, 1.5), polyline)).toBe(false);
  });

  it("point on the line with rotation", () => {
    const truePoints = [
-      pointFrom(1, 0),
-      pointFrom(1, 2),
-      pointFrom(2, 2),
-      pointFrom(2, 1),
-      pointFrom(3, 1),
+      point(1, 0),
+      point(1, 2),
+      point(2, 2),
+      point(2, 1),
+      point(3, 1),
    ];

    truePoints.forEach((p) => {
      const rotation = (Math.random() * 360) as Degrees;
-      const rotatedPoint = pointRotateDegs(p, pointFrom(0, 0), rotation);
+      const rotatedPoint = pointRotateDegs(p, point(0, 0), rotation);
      const rotatedPolyline = polyline.map((line) =>
-        lineSegmentRotate(line, degreesToRadians(rotation), pointFrom(0, 0)),
+        lineSegmentRotate(line, degreesToRadians(rotation), point(0, 0)),
      );
      expect(pointOnPolyline(rotatedPoint, rotatedPolyline)).toBe(true);
    });

-    const falsePoints = [pointFrom(0, 1), pointFrom(2.1, 1.5)];
+    const falsePoints = [point(0, 1), point(2.1, 1.5)];

    falsePoints.forEach((p) => {
      const rotation = (Math.random() * 360) as Degrees;
-      const rotatedPoint = pointRotateDegs(p, pointFrom(0, 0), rotation);
+      const rotatedPoint = pointRotateDegs(p, point(0, 0), rotation);
      const rotatedPolyline = polyline.map((line) =>
-        lineSegmentRotate(line, degreesToRadians(rotation), pointFrom(0, 0)),
+        lineSegmentRotate(line, degreesToRadians(rotation), point(0, 0)),
      );
      expect(pointOnPolyline(rotatedPoint, rotatedPolyline)).toBe(false);
    });
@@ -7,7 +7,7 @@ import {
 import type { Curve } from "../math";
 import {
  lineSegment,
-  pointFrom,
+  point,
  polygonIncludesPoint,
  pointOnLineSegment,
  pointOnPolygon,
@@ -110,7 +110,7 @@ const polyLineFromCurve = <Point extends LocalPoint | GlobalPoint>(
  for (let i = 0; i < segments; i++) {
    t += increment;
    if (t <= 1) {
-      const nextPoint: Point = pointFrom(equation(t, 0), equation(t, 1));
+      const nextPoint: Point = point(equation(t, 0), equation(t, 1));
      lineSegments.push(lineSegment(startingPoint, nextPoint));
      startingPoint = nextPoint;
    }
@@ -1,6 +1,6 @@
 import type { GlobalPoint, LineSegment, Polygon, Radians } from "../../math";
 import {
-  pointFrom,
+  point,
  lineSegment,
  polygon,
  pointOnLineSegment,
@@ -23,127 +23,93 @@ describe("point and line", () => {
  //   expect(pointRightofLine(point(2, 1), l)).toBe(true);
  // });

-  const s: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(1, 0),
-    pointFrom(1, 2),
-  );
+  const s: LineSegment<GlobalPoint> = lineSegment(point(1, 0), point(1, 2));

  it("point on the line", () => {
-    expect(pointOnLineSegment(pointFrom(0, 1), s)).toBe(false);
-    expect(pointOnLineSegment(pointFrom(1, 1), s, 0)).toBe(true);
-    expect(pointOnLineSegment(pointFrom(2, 1), s)).toBe(false);
+    expect(pointOnLineSegment(point(0, 1), s)).toBe(false);
+    expect(pointOnLineSegment(point(1, 1), s, 0)).toBe(true);
+    expect(pointOnLineSegment(point(2, 1), s)).toBe(false);
  });
 });

 describe("point and polygon", () => {
  const poly: Polygon<GlobalPoint> = polygon(
-    pointFrom(10, 10),
-    pointFrom(50, 10),
-    pointFrom(50, 50),
-    pointFrom(10, 50),
+    point(10, 10),
+    point(50, 10),
+    point(50, 50),
+    point(10, 50),
  );

  it("point on polygon", () => {
-    expect(pointOnPolygon(pointFrom(30, 10), poly)).toBe(true);
-    expect(pointOnPolygon(pointFrom(50, 30), poly)).toBe(true);
-    expect(pointOnPolygon(pointFrom(30, 50), poly)).toBe(true);
-    expect(pointOnPolygon(pointFrom(10, 30), poly)).toBe(true);
-    expect(pointOnPolygon(pointFrom(30, 30), poly)).toBe(false);
-    expect(pointOnPolygon(pointFrom(30, 70), poly)).toBe(false);
+    expect(pointOnPolygon(point(30, 10), poly)).toBe(true);
+    expect(pointOnPolygon(point(50, 30), poly)).toBe(true);
+    expect(pointOnPolygon(point(30, 50), poly)).toBe(true);
+    expect(pointOnPolygon(point(10, 30), poly)).toBe(true);
+    expect(pointOnPolygon(point(30, 30), poly)).toBe(false);
+    expect(pointOnPolygon(point(30, 70), poly)).toBe(false);
  });

  it("point in polygon", () => {
    const poly: Polygon<GlobalPoint> = polygon(
-      pointFrom(0, 0),
-      pointFrom(2, 0),
-      pointFrom(2, 2),
-      pointFrom(0, 2),
+      point(0, 0),
+      point(2, 0),
+      point(2, 2),
+      point(0, 2),
    );
-    expect(polygonIncludesPoint(pointFrom(1, 1), poly)).toBe(true);
-    expect(polygonIncludesPoint(pointFrom(3, 3), poly)).toBe(false);
+    expect(polygonIncludesPoint(point(1, 1), poly)).toBe(true);
+    expect(polygonIncludesPoint(point(3, 3), poly)).toBe(false);
  });
 });

 describe("point and ellipse", () => {
  const ellipse: Ellipse<GlobalPoint> = {
-    center: pointFrom(0, 0),
+    center: point(0, 0),
    angle: 0 as Radians,
    halfWidth: 2,
    halfHeight: 1,
  };

  it("point on ellipse", () => {
-    [
-      pointFrom(0, 1),
-      pointFrom(0, -1),
-      pointFrom(2, 0),
-      pointFrom(-2, 0),
-    ].forEach((p) => {
+    [point(0, 1), point(0, -1), point(2, 0), point(-2, 0)].forEach((p) => {
      expect(pointOnEllipse(p, ellipse)).toBe(true);
    });
-    expect(pointOnEllipse(pointFrom(-1.4, 0.7), ellipse, 0.1)).toBe(true);
-    expect(pointOnEllipse(pointFrom(-1.4, 0.71), ellipse, 0.01)).toBe(true);
+    expect(pointOnEllipse(point(-1.4, 0.7), ellipse, 0.1)).toBe(true);
+    expect(pointOnEllipse(point(-1.4, 0.71), ellipse, 0.01)).toBe(true);

-    expect(pointOnEllipse(pointFrom(1.4, 0.7), ellipse, 0.1)).toBe(true);
-    expect(pointOnEllipse(pointFrom(1.4, 0.71), ellipse, 0.01)).toBe(true);
+    expect(pointOnEllipse(point(1.4, 0.7), ellipse, 0.1)).toBe(true);
+    expect(pointOnEllipse(point(1.4, 0.71), ellipse, 0.01)).toBe(true);

-    expect(pointOnEllipse(pointFrom(1, -0.86), ellipse, 0.1)).toBe(true);
-    expect(pointOnEllipse(pointFrom(1, -0.86), ellipse, 0.01)).toBe(true);
+    expect(pointOnEllipse(point(1, -0.86), ellipse, 0.1)).toBe(true);
+    expect(pointOnEllipse(point(1, -0.86), ellipse, 0.01)).toBe(true);

-    expect(pointOnEllipse(pointFrom(-1, -0.86), ellipse, 0.1)).toBe(true);
-    expect(pointOnEllipse(pointFrom(-1, -0.86), ellipse, 0.01)).toBe(true);
+    expect(pointOnEllipse(point(-1, -0.86), ellipse, 0.1)).toBe(true);
+    expect(pointOnEllipse(point(-1, -0.86), ellipse, 0.01)).toBe(true);

-    expect(pointOnEllipse(pointFrom(-1, 0.8), ellipse)).toBe(false);
-    expect(pointOnEllipse(pointFrom(1, -0.8), ellipse)).toBe(false);
+    expect(pointOnEllipse(point(-1, 0.8), ellipse)).toBe(false);
+    expect(pointOnEllipse(point(1, -0.8), ellipse)).toBe(false);
  });

  it("point in ellipse", () => {
-    [
-      pointFrom(0, 1),
-      pointFrom(0, -1),
-      pointFrom(2, 0),
-      pointFrom(-2, 0),
-    ].forEach((p) => {
+    [point(0, 1), point(0, -1), point(2, 0), point(-2, 0)].forEach((p) => {
      expect(pointInEllipse(p, ellipse)).toBe(true);
    });

-    expect(pointInEllipse(pointFrom(-1, 0.8), ellipse)).toBe(true);
-    expect(pointInEllipse(pointFrom(1, -0.8), ellipse)).toBe(true);
+    expect(pointInEllipse(point(-1, 0.8), ellipse)).toBe(true);
+    expect(pointInEllipse(point(1, -0.8), ellipse)).toBe(true);

-    expect(pointInEllipse(pointFrom(-1, 1), ellipse)).toBe(false);
-    expect(pointInEllipse(pointFrom(-1.4, 0.8), ellipse)).toBe(false);
+    expect(pointInEllipse(point(-1, 1), ellipse)).toBe(false);
+    expect(pointInEllipse(point(-1.4, 0.8), ellipse)).toBe(false);
  });
 });

 describe("line and line", () => {
-  const lineA: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(1, 4),
-    pointFrom(3, 4),
-  );
-  const lineB: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(2, 1),
-    pointFrom(2, 7),
-  );
-  const lineC: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(1, 8),
-    pointFrom(3, 8),
-  );
-  const lineD: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(1, 8),
-    pointFrom(3, 8),
-  );
-  const lineE: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(1, 9),
-    pointFrom(3, 9),
-  );
-  const lineF: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(1, 2),
-    pointFrom(3, 4),
-  );
-  const lineG: LineSegment<GlobalPoint> = lineSegment(
-    pointFrom(0, 1),
-    pointFrom(2, 3),
-  );
+  const lineA: LineSegment<GlobalPoint> = lineSegment(point(1, 4), point(3, 4));
+  const lineB: LineSegment<GlobalPoint> = lineSegment(point(2, 1), point(2, 7));
+  const lineC: LineSegment<GlobalPoint> = lineSegment(point(1, 8), point(3, 8));
+  const lineD: LineSegment<GlobalPoint> = lineSegment(point(1, 8), point(3, 8));
+  const lineE: LineSegment<GlobalPoint> = lineSegment(point(1, 9), point(3, 9));
+  const lineF: LineSegment<GlobalPoint> = lineSegment(point(1, 2), point(3, 4));
+  const lineG: LineSegment<GlobalPoint> = lineSegment(point(0, 1), point(2, 3));

  it("intersection", () => {
    expect(segmentsIntersectAt(lineA, lineB)).toEqual([2, 4]);
@@ -16,7 +16,7 @@ import type { Curve, LineSegment, Polygon, Radians } from "../../math";
 import {
  curve,
  lineSegment,
-  pointFrom,
+  point,
  pointDistance,
  pointFromArray,
  pointFromVector,
@@ -118,23 +118,23 @@ export const getPolygonShape = <Point extends GlobalPoint | LocalPoint>(
  const cx = x + width / 2;
  const cy = y + height / 2;

-  const center: Point = pointFrom(cx, cy);
+  const center: Point = point(cx, cy);

  let data: Polygon<Point>;

  if (element.type === "diamond") {
    data = polygon(
-      pointRotateRads(pointFrom(cx, y), center, angle),
-      pointRotateRads(pointFrom(x + width, cy), center, angle),
-      pointRotateRads(pointFrom(cx, y + height), center, angle),
-      pointRotateRads(pointFrom(x, cy), center, angle),
+      pointRotateRads(point(cx, y), center, angle),
+      pointRotateRads(point(x + width, cy), center, angle),
+      pointRotateRads(point(cx, y + height), center, angle),
+      pointRotateRads(point(x, cy), center, angle),
    );
  } else {
    data = polygon(
-      pointRotateRads(pointFrom(x, y), center, angle),
-      pointRotateRads(pointFrom(x + width, y), center, angle),
-      pointRotateRads(pointFrom(x + width, y + height), center, angle),
-      pointRotateRads(pointFrom(x, y + height), center, angle),
+      pointRotateRads(point(x, y), center, angle),
+      pointRotateRads(point(x + width, y), center, angle),
+      pointRotateRads(point(x + width, y + height), center, angle),
+      pointRotateRads(point(x, y + height), center, angle),
    );
  }

@@ -162,11 +162,11 @@ export const getSelectionBoxShape = <Point extends GlobalPoint | LocalPoint>(
  y2 += padding;

  //const angleInDegrees = angleToDegrees(element.angle);
-  const center = pointFrom(cx, cy);
-  const topLeft = pointRotateRads(pointFrom(x1, y1), center, element.angle);
-  const topRight = pointRotateRads(pointFrom(x2, y1), center, element.angle);
-  const bottomLeft = pointRotateRads(pointFrom(x1, y2), center, element.angle);
-  const bottomRight = pointRotateRads(pointFrom(x2, y2), center, element.angle);
+  const center = point(cx, cy);
+  const topLeft = pointRotateRads(point(x1, y1), center, element.angle);
+  const topRight = pointRotateRads(point(x2, y1), center, element.angle);
+  const bottomLeft = pointRotateRads(point(x1, y2), center, element.angle);
+  const bottomRight = pointRotateRads(point(x2, y2), center, element.angle);

  return {
    type: "polygon",
@@ -183,7 +183,7 @@ export const getEllipseShape = <Point extends GlobalPoint | LocalPoint>(
  return {
    type: "ellipse",
    data: {
-      center: pointFrom(x + width / 2, y + height / 2),
+      center: point(x + width / 2, y + height / 2),
      angle,
      halfWidth: width / 2,
      halfHeight: height / 2,
@@ -203,20 +203,20 @@ export const getCurvePathOps = (shape: Drawable): Op[] => {
 // linear
 export const getCurveShape = <Point extends GlobalPoint | LocalPoint>(
  roughShape: Drawable,
-  startingPoint: Point = pointFrom(0, 0),
+  startingPoint: Point = point(0, 0),
  angleInRadian: Radians,
  center: Point,
 ): GeometricShape<Point> => {
  const transform = (p: Point): Point =>
    pointRotateRads(
-      pointFrom(p[0] + startingPoint[0], p[1] + startingPoint[1]),
+      point(p[0] + startingPoint[0], p[1] + startingPoint[1]),
      center,
      angleInRadian,
    );

  const ops = getCurvePathOps(roughShape);
  const polycurve: Polycurve<Point> = [];
-  let p0 = pointFrom<Point>(0, 0);
+  let p0 = point<Point>(0, 0);

  for (const op of ops) {
    if (op.op === "move") {
@@ -225,9 +225,9 @@ export const getCurveShape = <Point extends GlobalPoint | LocalPoint>(
      p0 = transform(p);
    }
    if (op.op === "bcurveTo") {
-      const p1 = transform(pointFrom<Point>(op.data[0], op.data[1]));
-      const p2 = transform(pointFrom<Point>(op.data[2], op.data[3]));
-      const p3 = transform(pointFrom<Point>(op.data[4], op.data[5]));
+      const p1 = transform(point<Point>(op.data[0], op.data[1]));
+      const p2 = transform(point<Point>(op.data[2], op.data[3]));
+      const p3 = transform(point<Point>(op.data[4], op.data[5]));
      polycurve.push(curve<Point>(p0, p1, p2, p3));
      p0 = p3;
    }
@@ -288,13 +288,13 @@ export const getFreedrawShape = <Point extends GlobalPoint | LocalPoint>(
 export const getClosedCurveShape = <Point extends GlobalPoint | LocalPoint>(
  element: ExcalidrawLinearElement,
  roughShape: Drawable,
-  startingPoint: Point = pointFrom<Point>(0, 0),
+  startingPoint: Point = point<Point>(0, 0),
  angleInRadian: Radians,
  center: Point,
 ): GeometricShape<Point> => {
  const transform = (p: Point) =>
    pointRotateRads(
-      pointFrom(p[0] + startingPoint[0], p[1] + startingPoint[1]),
+      point(p[0] + startingPoint[0], p[1] + startingPoint[1]),
      center,
      angleInRadian,
    );
@@ -316,17 +316,17 @@ export const getClosedCurveShape = <Point extends GlobalPoint | LocalPoint>(
    if (operation.op === "move") {
      odd = !odd;
      if (odd) {
-        points.push(pointFrom(operation.data[0], operation.data[1]));
+        points.push(point(operation.data[0], operation.data[1]));
      }
    } else if (operation.op === "bcurveTo") {
      if (odd) {
-        points.push(pointFrom(operation.data[0], operation.data[1]));
-        points.push(pointFrom(operation.data[2], operation.data[3]));
-        points.push(pointFrom(operation.data[4], operation.data[5]));
+        points.push(point(operation.data[0], operation.data[1]));
+        points.push(point(operation.data[2], operation.data[3]));
+        points.push(point(operation.data[4], operation.data[5]));
      }
    } else if (operation.op === "lineTo") {
      if (odd) {
-        points.push(pointFrom(operation.data[0], operation.data[1]));
+        points.push(point(operation.data[0], operation.data[1]));
      }
    }
  }
@@ -364,27 +364,27 @@ export const segmentIntersectRectangleElement = <
    element.x + element.width + gap,
    element.y + element.height + gap,
  ];
-  const center = pointFrom(
+  const center = point(
    (bounds[0] + bounds[2]) / 2,
    (bounds[1] + bounds[3]) / 2,
  );

  return [
    lineSegment(
-      pointRotateRads(pointFrom(bounds[0], bounds[1]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[2], bounds[1]), center, element.angle),
+      pointRotateRads(point(bounds[0], bounds[1]), center, element.angle),
+      pointRotateRads(point(bounds[2], bounds[1]), center, element.angle),
    ),
    lineSegment(
-      pointRotateRads(pointFrom(bounds[2], bounds[1]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[2], bounds[3]), center, element.angle),
+      pointRotateRads(point(bounds[2], bounds[1]), center, element.angle),
+      pointRotateRads(point(bounds[2], bounds[3]), center, element.angle),
    ),
    lineSegment(
-      pointRotateRads(pointFrom(bounds[2], bounds[3]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[0], bounds[3]), center, element.angle),
+      pointRotateRads(point(bounds[2], bounds[3]), center, element.angle),
+      pointRotateRads(point(bounds[0], bounds[3]), center, element.angle),
    ),
    lineSegment(
-      pointRotateRads(pointFrom(bounds[0], bounds[3]), center, element.angle),
-      pointRotateRads(pointFrom(bounds[0], bounds[1]), center, element.angle),
+      pointRotateRads(point(bounds[0], bounds[3]), center, element.angle),
+      pointRotateRads(point(bounds[0], bounds[1]), center, element.angle),
    ),
  ]
    .map((s) => segmentsIntersectAt(segment, s))
@@ -404,7 +404,7 @@ const distanceToEllipse = <Point extends LocalPoint | GlobalPoint>(
  );
  const [rotatedPointX, rotatedPointY] = pointRotateRads(
    pointFromVector(translatedPoint),
-    pointFrom(0, 0),
+    point(0, 0),
    -angle as Radians,
  );

@@ -442,10 +442,7 @@ const distanceToEllipse = <Point extends LocalPoint | GlobalPoint>(
    b * ty * Math.sign(rotatedPointY),
  ];

-  return pointDistance(
-    pointFrom(rotatedPointX, rotatedPointY),
-    pointFrom(minX, minY),
-  );
+  return pointDistance(point(rotatedPointX, rotatedPointY), point(minX, minY));
 };

 export const pointOnEllipse = <Point extends LocalPoint | GlobalPoint>(
@@ -467,7 +464,7 @@ export const pointInEllipse = <Point extends LocalPoint | GlobalPoint>(
  );
  const [rotatedPointX, rotatedPointY] = pointRotateRads(
    pointFromVector(translatedPoint),
-    pointFrom(0, 0),
+    point(0, 0),
    -angle as Radians,
  );

@@ -68,6 +68,7 @@
    "css-loader": "6.7.1",
    "file-loader": "6.2.0",
    "fonteditor-core": "2.4.0",
+    "node-fetch": "3.3.2",
    "sass-loader": "13.0.2",
    "ts-loader": "9.3.1",
    "typescript": "4.9.4",
@@ -17,7 +17,7 @@ import { arrayToMap } from "../excalidraw/utils";
 import type { LocalPoint } from "../math";
 import {
  rangeIncludesValue,
-  pointFrom,
+  point,
  pointRotateRads,
  rangeInclusive,
 } from "../math";
@@ -41,17 +41,17 @@ const getNonLinearElementRelativePoints = (
 ] => {
  if (element.type === "diamond") {
    return [
-      pointFrom(element.width / 2, 0),
-      pointFrom(element.width, element.height / 2),
-      pointFrom(element.width / 2, element.height),
-      pointFrom(0, element.height / 2),
+      point(element.width / 2, 0),
+      point(element.width, element.height / 2),
+      point(element.width / 2, element.height),
+      point(0, element.height / 2),
    ];
  }
  return [
-    pointFrom(0, 0),
-    pointFrom(0 + element.width, 0),
-    pointFrom(0 + element.width, element.height),
-    pointFrom(0, element.height),
+    point(0, 0),
+    point(0 + element.width, 0),
+    point(0 + element.width, element.height),
+    point(0, element.height),
  ];
 };

@@ -94,7 +94,7 @@ const getRotatedBBox = (element: Element): Bounds => {
  const points = getElementRelativePoints(element);

  const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom<LocalPoint>(cx, cy);
+  const centerPoint = point<LocalPoint>(cx, cy);

  const rotatedPoints = points.map((p) =>
    pointRotateRads(p, centerPoint, element.angle),
@@ -1,6 +1,7 @@
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
 const { externalGlobalPlugin } = require("esbuild-plugin-external-global");
+const { woff2BrowserPlugin } = require("./woff2/woff2-esbuild-plugins");

 // Will be used later for treeshaking
 //const fs = require("fs");
@@ -44,15 +45,13 @@ const browserConfig = {
  format: "esm",
  plugins: [
    sassPlugin(),
+    woff2BrowserPlugin(),
    externalGlobalPlugin({
      react: "React",
      "react-dom": "ReactDOM",
    }),
  ],
  splitting: true,
-  loader: {
-    ".woff2": "file",
-  },
 };
 const createESMBrowserBuild = async () => {
  // Development unminified build with source maps
@@ -101,10 +100,9 @@ const rawConfig = {
  entryPoints: ["index.tsx"],
  bundle: true,
  format: "esm",
-  plugins: [sassPlugin()],
+  plugins: [sassPlugin(), woff2BrowserPlugin()],
  loader: {
    ".json": "copy",
-    ".woff2": "file",
  },
  packages: "external",
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Mark Tolmacs	521896cccf	Fix lint	2024-09-23 12:47:04 +02:00
Mark Tolmacs	fe318126bd	Warn to save content Signed-off-by: Mark Tolmacs <mark@lazycat.hu>	2024-09-23 12:12:58 +02:00