simplify crop properties

packages/excalidraw/components/App.tsx

@@ -7604,6 +7604,11 @@ 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
@@ -7626,8 +7631,6 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      const pointerCoords = viewportCoordsToSceneCoords(event, this.state);
-
       if (isEraserActive(this.state)) {
         this.handleEraser(event, pointerDownState, pointerCoords);
         return;
@@ -7852,20 +7855,23 @@ class App extends React.Component<AppProps, AppState> {
             selectedElements[0].crop !== null
           ) {
             const crop = selectedElements[0].crop;
-            const image = selectedElements[0];
+            const image =
-
+              isInitializedImageElement(selectedElements[0]) &&
-            const lastPointerCoords =
+              this.imageCache.get(selectedElements[0].fileId)?.image;
-              this.lastPointerMoveCoords ?? pointerDownState.origin;
 
+            if (image && !(image instanceof Promise)) {
               const instantDragOffset = {
                 x: pointerCoords.x - lastPointerCoords.x,
                 y: pointerCoords.y - lastPointerCoords.y,
               };
 
               // current offset is based on the element's width and height
-            const uncroppedWidth = image.widthAtCreation * image.resizedFactorX;
+              const uncroppedWidth =
+                selectedElements[0].initialWidth *
+                selectedElements[0].resizeFactors[0];
               const uncroppedHeight =
-              image.heightAtCreation * image.resizedFactorY;
+                selectedElements[0].initialHeight *
+                selectedElements[0].resizeFactors[1];
 
               const SENSITIVITY_FACTOR = 3;
 
@@ -7894,11 +7900,10 @@ class App extends React.Component<AppProps, AppState> {
                 ),
               };
 
-            mutateElement(image, {
+              mutateElement(selectedElements[0], {
                 crop: nextCrop,
               });
-
+            }
-            this.lastPointerMoveCoords = pointerCoords;
 
             return;
           }
@@ -8037,7 +8042,6 @@ class App extends React.Component<AppProps, AppState> {
             this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
           }
 
-          this.lastPointerMoveCoords = pointerCoords;
           return;
         }
       }
@@ -9478,12 +9482,14 @@ class App extends React.Component<AppProps, AppState> {
         y,
         width,
         height,
-        widthAtCreation: width,
+        initialWidth: width,
-        heightAtCreation: height,
+        initialHeight: height,
-        naturalWidth: image.naturalWidth,
+        crop: {
-        naturalHeight: image.naturalHeight,
+          x: 0,
-        resizedFactorX: 1,
+          y: 0,
-        resizedFactorY: 1,
+          width: image.naturalWidth,
+          height: image.naturalHeight,
+        },
       });
     }
   };
@@ -10053,6 +10059,7 @@ class App extends React.Component<AppProps, AppState> {
       cropElement(
         elementToCrop,
         this.scene.getNonDeletedElementsMap(),
+        this.imageCache,
         transformHandleType,
         x,
         y,

packages/excalidraw/data/restore.ts

@@ -255,13 +255,9 @@ const restoreElement = (
         fileId: element.fileId,
         scale: element.scale || [1, 1],
         crop: element.crop ?? null,
-        // TODO: restore properly
+        initialWidth: element.initialWidth ?? element.width,
-        widthAtCreation: element.widthAtCreation,
+        initialHeight: element.initialHeight ?? element.height,
-        heightAtCreation: element.heightAtCreation,
+        resizeFactors: element.resizeFactors ?? [1, 1],
-        naturalWidth: element.naturalWidth,
-        naturalHeight: element.naturalHeight,
-        resizedFactorX: element.resizedFactorX,
-        resizedFactorY: element.resizedFactorY,
       });
     case "line":
     // @ts-ignore LEGACY type

packages/excalidraw/element/cropElement.ts

@@ -26,19 +26,22 @@ import {
   getElementAbsoluteCoords,
   getResizedElementAbsoluteCoords,
 } from "./bounds";
+import { AppClassProperties } from "../types";
+import { isInitializedImageElement } from "./typeChecks";
 
-// i split out these 'internal' functions so that this functionality can be easily unit tested
+const _cropElement = (
-const cropElementInternal = (
   element: ExcalidrawImageElement,
   transformHandle: TransformHandleType,
+  naturalWidth: number,
+  naturalHeight: number,
   pointerX: number,
   pointerY: number,
 ) => {
-  const uncroppedWidth = element.widthAtCreation * element.resizedFactorX;
+  const uncroppedWidth = element.initialWidth * element.resizeFactors[0];
-  const uncroppedHeight = element.heightAtCreation * element.resizedFactorY;
+  const uncroppedHeight = element.initialHeight * element.resizeFactors[1];
 
-  const naturalWidthToUncropped = element.naturalWidth / uncroppedWidth;
+  const naturalWidthToUncropped = naturalWidth / uncroppedWidth;
-  const naturalHeightToUncropped = element.naturalHeight / uncroppedHeight;
+  const naturalHeightToUncropped = naturalHeight / uncroppedHeight;
 
   const croppedLeft = (element.crop?.x ?? 0) / naturalWidthToUncropped;
   const croppedTop = (element.crop?.y ?? 0) / naturalHeightToUncropped;
@@ -71,8 +74,8 @@ const cropElementInternal = (
   const crop = element.crop ?? {
     x: 0,
     y: 0,
-    width: element.naturalWidth,
+    width: naturalWidth,
-    height: element.naturalHeight,
+    height: naturalHeight,
   };
 
   if (transformHandle.includes("n")) {
@@ -84,9 +87,8 @@ const cropElementInternal = (
     const pointerDeltaY = pointerY - element.y;
     nextHeight = element.height - pointerDeltaY;
 
-    crop.y =
+    crop.y = ((pointerDeltaY + croppedTop) / uncroppedHeight) * naturalHeight;
-      ((pointerDeltaY + croppedTop) / uncroppedHeight) * element.naturalHeight;
+    crop.height = (nextHeight / uncroppedHeight) * naturalHeight;
-    crop.height = (nextHeight / uncroppedHeight) * element.naturalHeight;
   }
 
   if (transformHandle.includes("s")) {
@@ -96,7 +98,7 @@ const cropElementInternal = (
     pointerY = clamp(pointerY, northBound, southBound);
 
     nextHeight = pointerY - element.y;
-    crop.height = (nextHeight / uncroppedHeight) * element.naturalHeight;
+    crop.height = (nextHeight / uncroppedHeight) * naturalHeight;
   }
 
   if (transformHandle.includes("w")) {
@@ -108,9 +110,8 @@ const cropElementInternal = (
     const pointerDeltaX = pointerX - element.x;
     nextWidth = element.width - pointerDeltaX;
 
-    crop.x =
+    crop.x = ((pointerDeltaX + croppedLeft) / uncroppedWidth) * naturalWidth;
-      ((pointerDeltaX + croppedLeft) / uncroppedWidth) * element.naturalWidth;
+    crop.width = (nextWidth / uncroppedWidth) * naturalWidth;
-    crop.width = (nextWidth / uncroppedWidth) * element.naturalWidth;
   }
 
   if (transformHandle.includes("e")) {
@@ -120,7 +121,7 @@ const cropElementInternal = (
     pointerX = clamp(pointerX, westBound, eastBound);
 
     nextWidth = pointerX - element.x;
-    crop.width = (nextWidth / uncroppedWidth) * element.naturalWidth;
+    crop.width = (nextWidth / uncroppedWidth) * naturalWidth;
   }
 
   const newOrigin = recomputeOrigin(
@@ -142,13 +143,20 @@ const cropElementInternal = (
 export const cropElement = (
   element: ExcalidrawImageElement,
   elementsMap: NonDeletedSceneElementsMap,
+  imageCache: AppClassProperties["imageCache"],
   transformHandle: TransformHandleType,
   pointerX: number,
   pointerY: number,
 ) => {
-  const mutation = cropElementInternal(
+  const image =
+    isInitializedImageElement(element) && imageCache.get(element.fileId)?.image;
+
+  if (image && !(image instanceof Promise)) {
+    const mutation = _cropElement(
       element,
       transformHandle,
+      image.naturalWidth,
+      image.naturalHeight,
       pointerX,
       pointerY,
     );
@@ -158,6 +166,7 @@ export const cropElement = (
     updateBoundElements(element, elementsMap, {
       oldSize: { width: element.width, height: element.height },
     });
+  }
 };
 
 // TODO: replace with the refactored resizeSingleElement
@@ -222,29 +231,34 @@ const recomputeOrigin = (
 };
 
 export const getUncroppedImageElement = (
-  image: ExcalidrawImageElement,
+  element: ExcalidrawImageElement,
   elementsMap: ElementsMap,
+  imageCache: AppClassProperties["imageCache"],
 ) => {
-  if (image.crop) {
+  const image =
-    const width = image.widthAtCreation * image.resizedFactorX;
+    isInitializedImageElement(element) && imageCache.get(element.fileId)?.image;
-    const height = image.heightAtCreation * image.resizedFactorY;
+
+  if (image && !(image instanceof Promise)) {
+    if (element.crop) {
+      const width = element.initialWidth * element.resizeFactors[0];
+      const height = element.initialHeight * element.resizeFactors[1];
 
       const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
-      image,
+        element,
         elementsMap,
       );
 
       const topLeftVector = vectorFromPoint(
-      pointRotateRads(point(x1, y1), point(cx, cy), image.angle),
+        pointRotateRads(point(x1, y1), point(cx, cy), element.angle),
       );
       const topRightVector = vectorFromPoint(
-      pointRotateRads(point(x2, y1), point(cx, cy), image.angle),
+        pointRotateRads(point(x2, y1), point(cx, cy), element.angle),
       );
       const topEdgeNormalized = vectorNormalize(
         vectorSubtract(topRightVector, topLeftVector),
       );
       const bottomLeftVector = vectorFromPoint(
-      pointRotateRads(point(x1, y2), point(cx, cy), image.angle),
+        pointRotateRads(point(x1, y2), point(cx, cy), element.angle),
       );
       const leftEdgeVector = vectorSubtract(bottomLeftVector, topLeftVector);
       const leftEdgeNormalized = vectorNormalize(leftEdgeVector);
@@ -254,12 +268,12 @@ export const getUncroppedImageElement = (
           topLeftVector,
           vectorScale(
             topEdgeNormalized,
-          (-image.crop.x * width) / image.naturalWidth,
+            (-element.crop.x * width) / image.naturalWidth,
           ),
         ),
         vectorScale(
           leftEdgeNormalized,
-        (-image.crop.y * height) / image.naturalHeight,
+          (-element.crop.y * height) / image.naturalHeight,
         ),
       );
 
@@ -273,11 +287,11 @@ export const getUncroppedImageElement = (
       const unrotatedTopLeft = pointRotateRads(
         pointFromVector(rotatedTopLeft),
         center,
-      -image.angle as Radians,
+        -element.angle as Radians,
       );
 
       const uncroppedElement: ExcalidrawImageElement = {
-      ...image,
+        ...element,
         x: unrotatedTopLeft[0],
         y: unrotatedTopLeft[1],
         width,
@@ -287,6 +301,7 @@ export const getUncroppedImageElement = (
 
       return uncroppedElement;
     }
+  }
 
-  return image;
+  return element;
 };

packages/excalidraw/element/newElement.ts

@@ -489,13 +489,10 @@ export const newImageElement = (
     status: opts.status ?? "pending",
     fileId: opts.fileId ?? null,
     scale: opts.scale ?? [1, 1],
-    widthAtCreation: 0,
+    initialWidth: opts.width ?? 0,
-    heightAtCreation: 0,
+    initialHeight: opts.height ?? 0,
-    naturalWidth: 0,
+    resizeFactors: [1, 1],
-    naturalHeight: 0,
     crop: opts.crop ?? null,
-    resizedFactorX: 1,
-    resizedFactorY: 1,
   };
 };
 

packages/excalidraw/element/resizeElements.ts

@@ -782,8 +782,10 @@ const updateInternalScale = (
   scaleY = Math.abs(scaleY);
 
   mutateElement(element, {
-    resizedFactorX: element.resizedFactorX * scaleX,
+    resizeFactors: [
-    resizedFactorY: element.resizedFactorY * scaleY,
+      element.resizeFactors[0] * scaleX,
+      element.resizeFactors[1] * scaleY,
+    ],
   });
 };
 

packages/excalidraw/element/types.ts

@@ -141,15 +141,11 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase &
     /** X and Y scale factors <-1, 1>, used for image axis flipping */
     scale: [number, number];
 
-    /** the image's dimension after adjustment at creation */
+    /** the image's dimension after initialization */
-    widthAtCreation: number;
+    initialWidth: number;
-    heightAtCreation: number;
+    initialHeight: number;
     /** how much the image has been resized with respect the dimension at creation */
-    resizedFactorX: number;
+    resizeFactors: [number, number];
-    resizedFactorY: number;
-
-    naturalWidth: number;
-    naturalHeight: number;
 
     crop: {
       x: number;

packages/excalidraw/renderer/renderElement.ts

@@ -446,8 +446,8 @@ const drawElementOnCanvas = (
           : {
               x: 0,
               y: 0,
-              width: element.naturalWidth,
+              width: img.naturalWidth,
-              height: element.naturalHeight,
+              height: img.naturalHeight,
             };
 
         context.drawImage(
@@ -950,7 +950,11 @@ export const renderElement = (
           context.globalAlpha = 0.1;
 
           const uncroppedElementCanvas = generateElementCanvas(
-            getUncroppedImageElement(elementWithCanvas.element, elementsMap),
+            getUncroppedImageElement(
+              elementWithCanvas.element,
+              elementsMap,
+              renderConfig.imageCache,
+            ),
             allElementsMap,
             appState.zoom,
             renderConfig,