@zsviczian/excalidraw 0.17.6-4 → 0.17.6-5

package/types/excalidraw/actions/actionMenu.d.ts

@@ -191,6 +191,8 @@ export declare const actionToggleCanvasMenu: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -401,6 +403,8 @@ export declare const actionToggleEditMenu: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -609,6 +613,8 @@ export declare const actionShortcuts: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionNavigate.d.ts

@@ -193,6 +193,8 @@ export declare const actionGoToCollaborator: {
             } | null;
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -395,6 +397,8 @@ export declare const actionGoToCollaborator: {
             } | null;
             objectsSnapModeEnabled: boolean;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionProperties.d.ts

@@ -213,6 +213,8 @@ export declare const actionChangeFillStyle: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -422,6 +424,8 @@ export declare const actionChangeStrokeWidth: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -631,6 +635,8 @@ export declare const actionChangeSloppiness: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -840,6 +846,8 @@ export declare const actionChangeStrokeStyle: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -1049,6 +1057,8 @@ export declare const actionChangeOpacity: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -1259,6 +1269,8 @@ export declare const actionChangeFontSize: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -1469,6 +1481,8 @@ export declare const actionDecreaseFontSize: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -1679,6 +1693,8 @@ export declare const actionIncreaseFontSize: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -1887,6 +1903,8 @@ export declare const actionChangeFontFamily: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -2087,6 +2105,8 @@ export declare const actionChangeFontFamily: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -2296,6 +2316,8 @@ export declare const actionChangeTextAlign: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -2507,6 +2529,8 @@ export declare const actionChangeVerticalAlign: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -2716,6 +2740,8 @@ export declare const actionChangeRoundness: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -2928,6 +2954,8 @@ export declare const actionChangeArrowhead: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -3137,6 +3165,8 @@ export declare const actionChangeArrowType: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionSelectAll.d.ts

@@ -195,6 +195,8 @@ export declare const actionSelectAll: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionStyles.d.ts

@@ -191,6 +191,8 @@ export declare const actionCopyStyles: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionToggleGridMode.d.ts

@@ -196,6 +196,8 @@ export declare const actionToggleGridMode: {
             } | null;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts

@@ -194,6 +194,8 @@ export declare const actionToggleObjectsSnapMode: {
             } | null;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionToggleSearchMenu.d.ts

@@ -194,6 +194,8 @@ export declare const actionToggleSearchMenu: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;
@@ -386,6 +388,8 @@ export declare const actionToggleSearchMenu: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionToggleStats.d.ts

@@ -195,6 +195,8 @@ export declare const actionToggleStats: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionToggleViewMode.d.ts

@@ -195,6 +195,8 @@ export declare const actionToggleViewMode: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/actionToggleZenMode.d.ts

@@ -195,6 +195,8 @@ export declare const actionToggleZenMode: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/actions/index.d.ts

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

package/types/excalidraw/actions/types.d.ts

@@ -14,7 +14,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "toggleLaserPointerTool" | "commandPalette" | "autoResize" | "elementStats" | "searchMenu";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "toggleLaserPointerTool" | "commandPalette" | "autoResize" | "elementStats" | "searchMenu" | "cropEditor";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/types/excalidraw/change.d.ts

@@ -1,5 +1,5 @@
 import type { ElementUpdate } from "./element/mutateElement";
-import type { OrderedExcalidrawElement, SceneElementsMap } from "./element/types";
+import type { ExcalidrawElement, Ordered, OrderedExcalidrawElement, SceneElementsMap } from "./element/types";
 import type { AppState, ObservedAppState } from "./types";
 import type { ValueOf } from "./utility-types";
 /**
@@ -116,7 +116,7 @@ export declare class AppStateChange implements Change<AppState> {
     private static stripElementsProps;
     private static stripStandaloneProps;
 }
-type ElementPartial = Omit<ElementUpdate<OrderedExcalidrawElement>, "seed">;
+type ElementPartial<T extends ExcalidrawElement = ExcalidrawElement> = Omit<ElementUpdate<Ordered<T>>, "seed">;
 /**
  * Elements change is a low level primitive to capture a change between two sets of elements.
  * It does so by encapsulating forward and backward `Delta`s, allowing to time-travel in both directions.

package/types/excalidraw/components/App.d.ts

@@ -5,7 +5,7 @@ import type { ActionResult } from "../actions/types";
 import { type EXPORT_IMAGE_TYPES } from "../constants";
 import type { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import type { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
+import type { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted, InitializedExcalidrawImageElement, ExcalidrawImageElement, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
 import { History } from "../history";
 import Scene from "../scene/Scene";
 import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload, GenerateDiagramToCode, NullableGridSize, Offsets } from "../types";
@@ -86,6 +86,10 @@ declare class App extends React.Component<AppProps, AppState> {
     lastPointerDownEvent: React.PointerEvent<HTMLElement> | null;
     lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null;
     lastPointerMoveEvent: PointerEvent | null;
+    lastPointerMoveCoords: {
+        x: number;
+        y: number;
+    } | null;
     lastViewportPosition: {
         x: number;
         y: number;
@@ -426,6 +430,8 @@ declare class App extends React.Component<AppProps, AppState> {
     private getTextBindableContainerAtPosition;
     private startTextEditing;
     private debounceDoubleClickTimestamp;
+    private startImageCropping;
+    private finishImageCropping;
     private handleCanvasDoubleClick;
     private getElementLinkAtPosition;
     private redirectToLink;
@@ -486,10 +492,10 @@ declare class App extends React.Component<AppProps, AppState> {
     /**
      * inserts image into elements array and rerenders
      */
-    private insertImageElement;
+    insertImageElement: (imageElement: ExcalidrawImageElement, imageFile: File, showCursorImagePreview?: boolean) => Promise<NonDeleted<InitializedExcalidrawImageElement> | null | undefined>;
     private setImagePreviewCursor;
     private onImageAction;
-    private initializeImageDimensions;
+    initializeImageDimensions: (imageElement: ExcalidrawImageElement, forceNaturalSize?: boolean) => void;
     /** updates image cache, refreshing updated elements and/or setting status
         to error for images that fail during <img> element creation */
     private updateImageCache;
@@ -508,6 +514,7 @@ declare class App extends React.Component<AppProps, AppState> {
     loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
     private handleCanvasContextMenu;
     private maybeDragNewGenericElement;
+    private maybeHandleCrop;
     private maybeHandleResize;
     private getContextMenuItems;
     private handleWheel;

package/types/excalidraw/components/icons.d.ts

@@ -209,4 +209,5 @@ export declare const roundArrowIcon: JSX.Element;
 export declare const collapseDownIcon: JSX.Element;
 export declare const collapseUpIcon: JSX.Element;
 export declare const upIcon: JSX.Element;
+export declare const cropIcon: JSX.Element;
 export {};

package/types/excalidraw/element/cropElement.d.ts

@@ -0,0 +1,14 @@
+import type { TransformHandleType } from "./transformHandles";
+import type { ElementsMap, ExcalidrawImageElement, ImageCrop } from "./types";
+export declare const cropElement: (element: ExcalidrawImageElement, transformHandle: TransformHandleType, naturalWidth: number, naturalHeight: number, pointerX: number, pointerY: number, widthAspectRatio?: number) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    crop: ImageCrop | null;
+};
+export declare const getUncroppedImageElement: (element: ExcalidrawImageElement, elementsMap: ElementsMap) => ExcalidrawImageElement;
+export declare const getUncroppedWidthAndHeight: (element: ExcalidrawImageElement) => {
+    width: number;
+    height: number;
+};

package/types/excalidraw/element/embeddable.d.ts

@@ -200,6 +200,8 @@ export declare const actionSetEmbeddableAsActiveTool: {
             objectsSnapModeEnabled: boolean;
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
+            isCropping: boolean;
+            croppingElementId: string | null;
             searchMatches: readonly {
                 id: string;
                 focus: boolean;

package/types/excalidraw/element/newElement.d.ts

@@ -58,6 +58,7 @@ export declare const newImageElement: (opts: {
     status?: ExcalidrawImageElement["status"];
     fileId?: ExcalidrawImageElement["fileId"];
     scale?: ExcalidrawImageElement["scale"];
+    crop?: ExcalidrawImageElement["crop"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawImageElement>;
 /**
  * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or

package/types/excalidraw/element/transformHandles.d.ts

@@ -40,7 +40,7 @@ export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [
     sw?: boolean | undefined;
     se?: boolean | undefined;
     rotation?: boolean | undefined;
-}, margin?: number) => TransformHandles;
+}, margin?: number, spacing?: number) => TransformHandles;
 export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, elementsMap: ElementsMap, pointerType?: PointerType, omitSides?: {
     e?: boolean | undefined;
     s?: boolean | undefined;

package/types/excalidraw/element/types.d.ts

@@ -120,6 +120,14 @@ 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";
     fileId: FileId | null;
@@ -127,6 +135,8 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     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<ExcalidrawImageElement, "fileId">;
 export type ExcalidrawFrameElement = _ExcalidrawElementBase & {

package/types/excalidraw/scene/comparisons.d.ts

@@ -289,6 +289,7 @@ export declare const getElementAtPosition: (elements: readonly NonDeletedExcalid
     fileId: import("../element/types").FileId | null;
     status: "pending" | "saved" | "error";
     scale: [number, number];
+    crop: import("../element/types").ImageCrop | null;
 }> & {
     isDeleted: boolean;
 }) | (Readonly<{

package/types/excalidraw/types.d.ts

@@ -123,6 +123,7 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
     gridColor: AppState["gridColor"];
     frameColor: AppState["frameColor"];
     currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
+    croppingElementId: AppState["croppingElementId"];
 }>;
 export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     activeEmbeddable: AppState["activeEmbeddable"];
@@ -141,6 +142,8 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     editingTextElement: AppState["editingTextElement"];
     gridColor: AppState["gridColor"];
     highlightSearchResult: AppState["highlightSearchResult"];
+    isCropping: AppState["isCropping"];
+    croppingElementId: AppState["croppingElementId"];
     searchMatches: AppState["searchMatches"];
 }>;
 export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
@@ -154,6 +157,7 @@ export type ObservedElementsAppState = {
     selectedGroupIds: AppState["selectedGroupIds"];
     editingLinearElementId: LinearElementEditor["elementId"] | null;
     selectedLinearElementId: LinearElementEditor["elementId"] | null;
+    croppingElementId: AppState["croppingElementId"];
 };
 export interface AppState {
     contextMenu: {
@@ -358,6 +362,9 @@ 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[];
 }
 type SearchMatch = {

package/types/math/utils.d.ts

@@ -4,3 +4,4 @@ export declare const round: (value: number, precision: number, func?: "round" |
 export declare const roundToStep: (value: number, step: number, func?: "round" | "floor" | "ceil") => number;
 export declare const average: (a: number, b: number) => number;
 export declare const isFiniteNumber: (value: any) => value is number;
+export declare const isCloseTo: (a: number, b: number, precision?: number) => boolean;

package/types/math/vector.d.ts

@@ -86,3 +86,7 @@ export declare function vectorMagnitude(v: Vector): number;
  * @returns The new normalized vector
  */
 export declare const vectorNormalize: (v: Vector) => Vector;
+/**
+ * Project the first vector onto the second vector
+ */
+export declare const vectorProjection: (a: Vector, b: Vector) => Vector;