simplify properties further

packages/excalidraw/components/App.tsx

@@ -441,13 +441,7 @@ import {
   getLinkDirectionFromKey,
 } from "../element/flowchart";
 import type { LocalPoint, Radians } from "../../math";
-import {
-  clamp,
-  point,
-  pointDistance,
-  pointRotateRads,
-  vector,
-} from "../../math";
+import { clamp, point, pointDistance, vector } from "../../math";
 import { cropElement } from "../element/cropElement";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
@@ -9448,8 +9442,6 @@ class App extends React.Component<AppProps, AppState> {
         y,
         width,
         height,
-        initialWidth: width,
-        initialHeight: height,
         crop: {
           x: 0,
           y: 0,

packages/excalidraw/data/restore.ts

@@ -255,9 +255,6 @@ const restoreElement = (
         fileId: element.fileId,
         scale: element.scale || [1, 1],
         crop: element.crop ?? null,
-        initialWidth: element.initialWidth ?? element.width,
-        initialHeight: element.initialHeight ?? element.height,
-        resizeFactors: element.resizeFactors ?? [1, 1],
       });
     case "line":
     // @ts-ignore LEGACY type

packages/excalidraw/element/cropElement.ts

@@ -14,7 +14,7 @@ import {
 } from "../../math";
 import { updateBoundElements } from "./binding";
 import { mutateElement } from "./mutateElement";
-import { TransformHandleType } from "./transformHandles";
+import type { TransformHandleType } from "./transformHandles";
 import type {
   ElementsMap,
   ExcalidrawElement,
@@ -26,19 +26,24 @@ import {
   getElementAbsoluteCoords,
   getResizedElementAbsoluteCoords,
 } from "./bounds";
-import { AppClassProperties } from "../types";
+import type { AppClassProperties } from "../types";
 import { isInitializedImageElement } from "./typeChecks";
 
 const _cropElement = (
   element: ExcalidrawImageElement,
+  image: HTMLImageElement,
   transformHandle: TransformHandleType,
   naturalWidth: number,
   naturalHeight: number,
   pointerX: number,
   pointerY: number,
 ) => {
-  const uncroppedWidth = element.initialWidth * element.resizeFactors[0];
-  const uncroppedHeight = element.initialHeight * element.resizeFactors[1];
+  const uncroppedWidth =
+    element.width /
+    (element.crop ? element.crop.width / image.naturalWidth : 1);
+  const uncroppedHeight =
+    element.height /
+    (element.crop ? element.crop.height / image.naturalHeight : 1);
 
   const naturalWidthToUncropped = naturalWidth / uncroppedWidth;
   const naturalHeightToUncropped = naturalHeight / uncroppedHeight;
@@ -154,6 +159,7 @@ export const cropElement = (
   if (image && !(image instanceof Promise)) {
     const mutation = _cropElement(
       element,
+      image,
       transformHandle,
       image.naturalWidth,
       image.naturalHeight,
@@ -240,8 +246,9 @@ export const getUncroppedImageElement = (
 
   if (image && !(image instanceof Promise)) {
     if (element.crop) {
-      const width = element.initialWidth * element.resizeFactors[0];
-      const height = element.initialHeight * element.resizeFactors[1];
+      const width = element.width / (element.crop.width / image.naturalWidth);
+      const height =
+        element.height / (element.crop.height / image.naturalHeight);
 
       const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
         element,

packages/excalidraw/element/newElement.ts

@@ -489,9 +489,6 @@ export const newImageElement = (
     status: opts.status ?? "pending",
     fileId: opts.fileId ?? null,
     scale: opts.scale ?? [1, 1],
-    initialWidth: opts.width ?? 0,
-    initialHeight: opts.height ?? 0,
-    resizeFactors: [1, 1],
     crop: opts.crop ?? null,
   };
 };

packages/excalidraw/element/resizeElements.ts

@@ -696,13 +696,6 @@ export const resizeSingleElement = (
     points: rescaledPoints,
   };
 
-  // TODO: this is not the best approach
-  updateInternalScale(
-    element,
-    eleNewWidth / element.width,
-    eleNewHeight / element.height,
-  );
-
   if ("scale" in element && "scale" in stateAtResizeStart) {
     mutateElement(element, {
       scale: [
@@ -757,38 +750,6 @@ export const resizeSingleElement = (
   }
 };
 
-const updateInternalScale = (
-  element: NonDeletedExcalidrawElement,
-  scaleX: number,
-  scaleY: number,
-) => {
-  if ("type" in element && element.type === "image") {
-    element = element as ExcalidrawImageElement;
-  } else {
-    return;
-  }
-
-  // if the scales happen to be 0 (which is insanely unlikely), it will
-  // zero out the rolling multiplier and cause weird bugs with cropping.
-  // if zero is detected, just set the scales to an obnoxiously small number
-  if (scaleX === 0) {
-    scaleX = Number.EPSILON;
-  }
-  if (scaleY === 0) {
-    scaleY = Number.EPSILON;
-  }
-
-  scaleX = Math.abs(scaleX);
-  scaleY = Math.abs(scaleY);
-
-  mutateElement(element, {
-    resizeFactors: [
-      element.resizeFactors[0] * scaleX,
-      element.resizeFactors[1] * scaleY,
-    ],
-  });
-};
-
 export const resizeMultipleElements = (
   originalElements: PointerDownState["originalElements"],
   selectedElements: readonly NonDeletedExcalidrawElement[],

packages/excalidraw/element/types.ts

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