From bccd2bf30da54b790ab3334b097b1dca1866fea1 Mon Sep 17 00:00:00 2001 From: Ryan Di Date: Mon, 30 Sep 2024 16:11:00 +0800 Subject: [PATCH] simplify properties further --- packages/excalidraw/components/App.tsx | 10 +---- packages/excalidraw/data/restore.ts | 3 -- packages/excalidraw/element/cropElement.ts | 19 ++++++--- packages/excalidraw/element/newElement.ts | 3 -- packages/excalidraw/element/resizeElements.ts | 39 ------------------- packages/excalidraw/element/types.ts | 6 --- 6 files changed, 14 insertions(+), 66 deletions(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index c6a9c19f9a..aed95b1680 100644 --- a/packages/excalidraw/components/App.tsx +++ b/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(null!); @@ -9448,8 +9442,6 @@ class App extends React.Component { y, width, height, - initialWidth: width, - initialHeight: height, crop: { x: 0, y: 0, diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index 1fdaf8c85f..f77dce7d70 100644 --- a/packages/excalidraw/data/restore.ts +++ b/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 diff --git a/packages/excalidraw/element/cropElement.ts b/packages/excalidraw/element/cropElement.ts index c68c02f2f4..ee60721f1c 100644 --- a/packages/excalidraw/element/cropElement.ts +++ b/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, diff --git a/packages/excalidraw/element/newElement.ts b/packages/excalidraw/element/newElement.ts index 3edb31e002..e21d36617f 100644 --- a/packages/excalidraw/element/newElement.ts +++ b/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, }; }; diff --git a/packages/excalidraw/element/resizeElements.ts b/packages/excalidraw/element/resizeElements.ts index 5f22b7c77b..3f3f8ef1e2 100644 --- a/packages/excalidraw/element/resizeElements.ts +++ b/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[], diff --git a/packages/excalidraw/element/types.ts b/packages/excalidraw/element/types.ts index 47cc2f6b7f..afd5762e9b 100644 --- a/packages/excalidraw/element/types.ts +++ b/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;