From 3d92a3bf1fe76794dcdbe2494545032b258b5b78 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 9 Sep 2024 18:34:13 +0800
Subject: [PATCH] double click to start cropping

---
 packages/excalidraw/appState.ts        |  4 ++++
 packages/excalidraw/components/App.tsx | 19 +++++++++++++++++++
 packages/excalidraw/types.ts           |  4 ++++
 3 files changed, 27 insertions(+)

diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts
index faad34057..cdf2e2301 100644
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -116,6 +116,8 @@ export const getDefaultAppState = (): Omit<
     objectsSnapModeEnabled: false,
     userToFollow: null,
     followedBy: new Set(),
+    isCropping: false,
+    croppingElement: null,
   };
 };
 
@@ -236,6 +238,8 @@ 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 },
+  croppingElement: { browser: false, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 00c0a882a..ea86b3943 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -5073,6 +5073,20 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
+  private startImageCropping = (image: ExcalidrawImageElement) => {
+    this.setState({
+      croppingElement: image,
+      isCropping: true,
+    });
+  };
+
+  private finishImageCropping = () => {
+    this.setState({
+      isCropping: false,
+      croppingElement: null,
+    });
+  };
+
   private handleCanvasDoubleClick = (
     event: React.MouseEvent<HTMLCanvasElement>,
   ) => {
@@ -5104,6 +5118,11 @@ 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(
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 58994e86e..1fb62c9d4 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -384,6 +384,10 @@ export interface AppState {
   userToFollow: UserToFollow | null;
   /** the socket ids of the users following the current user */
   followedBy: Set<SocketId>;
+
+  /** image cropping */
+  isCropping: boolean;
+  croppingElement: ExcalidrawImageElement | null;
 }
 
 export type UIAppState = Omit<