chore: Unify math types, utils and functions (#8389)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/components/Stats/Angle.tsx

@@ -2,13 +2,14 @@ import { mutateElement } from "../../element/mutateElement";
 import { getBoundTextElement } from "../../element/textElement";
 import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
 import type { ExcalidrawElement } from "../../element/types";
-import { degreeToRadian, radianToDegree } from "../../math";
 import { angleIcon } from "../icons";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
+import type { Degrees } from "../../../math";
+import { degreesToRadians, radiansToDegrees } from "../../../math";
 
 interface AngleProps {
   element: ExcalidrawElement;
@@ -36,7 +37,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
     }
 
     if (nextValue !== undefined) {
-      const nextAngle = degreeToRadian(nextValue);
+      const nextAngle = degreesToRadians(nextValue as Degrees);
       mutateElement(latestElement, {
         angle: nextAngle,
       });
@@ -51,7 +52,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
     }
 
     const originalAngleInDegrees =
-      Math.round(radianToDegree(origElement.angle) * 100) / 100;
+      Math.round(radiansToDegrees(origElement.angle) * 100) / 100;
     const changeInDegrees = Math.round(accumulatedChange);
     let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
     if (shouldChangeByStepSize) {
@@ -61,7 +62,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
     nextAngleInDegrees =
       nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
 
-    const nextAngle = degreeToRadian(nextAngleInDegrees);
+    const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees);
 
     mutateElement(latestElement, {
       angle: nextAngle,
@@ -80,7 +81,7 @@ const Angle = ({ element, scene, appState, property }: AngleProps) => {
     <DragInput
       label="A"
       icon={angleIcon}
-      value={Math.round((radianToDegree(element.angle) % 360) * 100) / 100}
+      value={Math.round((radiansToDegrees(element.angle) % 360) * 100) / 100}
       elements={[element]}
       dragInputCallback={handleDegreeChange}
       editable={isPropertyEditable(element, "angle")}

packages/excalidraw/components/Stats/MultiAngle.tsx

@@ -3,13 +3,14 @@ import { getBoundTextElement } from "../../element/textElement";
 import { isArrowElement } from "../../element/typeChecks";
 import type { ExcalidrawElement } from "../../element/types";
 import { isInGroup } from "../../groups";
-import { degreeToRadian, radianToDegree } from "../../math";
 import type Scene from "../../scene/Scene";
 import { angleIcon } from "../icons";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
 import type { AppState } from "../../types";
+import type { Degrees } from "../../../math";
+import { degreesToRadians, radiansToDegrees } from "../../../math";
 
 interface MultiAngleProps {
   elements: readonly ExcalidrawElement[];
@@ -39,7 +40,7 @@ const handleDegreeChange: DragInputCallbackType<
   );
 
   if (nextValue !== undefined) {
-    const nextAngle = degreeToRadian(nextValue);
+    const nextAngle = degreesToRadians(nextValue as Degrees);
 
     for (const element of editableLatestIndividualElements) {
       if (!element) {
@@ -71,7 +72,7 @@ const handleDegreeChange: DragInputCallbackType<
     }
     const originalElement = editableOriginalIndividualElements[i];
     const originalAngleInDegrees =
-      Math.round(radianToDegree(originalElement.angle) * 100) / 100;
+      Math.round(radiansToDegrees(originalElement.angle) * 100) / 100;
     const changeInDegrees = Math.round(accumulatedChange);
     let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
     if (shouldChangeByStepSize) {
@@ -81,7 +82,7 @@ const handleDegreeChange: DragInputCallbackType<
     nextAngleInDegrees =
       nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
 
-    const nextAngle = degreeToRadian(nextAngleInDegrees);
+    const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees);
 
     mutateElement(
       latestElement,
@@ -109,7 +110,7 @@ const MultiAngle = ({
     (el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
   );
   const angles = editableLatestIndividualElements.map(
-    (el) => Math.round((radianToDegree(el.angle) % 360) * 100) / 100,
+    (el) => Math.round((radiansToDegrees(el.angle) % 360) * 100) / 100,
   );
   const value = new Set(angles).size === 1 ? angles[0] : "Mixed";
 

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -13,13 +13,14 @@ import type {
   NonDeletedSceneElementsMap,
 } from "../../element/types";
 import type Scene from "../../scene/Scene";
-import type { AppState, Point } from "../../types";
+import type { AppState } from "../../types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+import { point, type GlobalPoint } from "../../../math";
 
 interface MultiDimensionProps {
   property: "width" | "height";
@@ -104,7 +105,7 @@ const resizeGroup = (
   nextHeight: number,
   initialHeight: number,
   aspectRatio: number,
-  anchor: Point,
+  anchor: GlobalPoint,
   property: MultiDimensionProps["property"],
   latestElements: ExcalidrawElement[],
   originalElements: ExcalidrawElement[],
@@ -181,7 +182,7 @@ const handleDimensionChange: DragInputCallbackType<
           nextHeight,
           initialHeight,
           aspectRatio,
-          [x1, y1],
+          point(x1, y1),
           property,
           latestElements,
           originalElements,
@@ -286,7 +287,7 @@ const handleDimensionChange: DragInputCallbackType<
         nextHeight,
         initialHeight,
         aspectRatio,
-        [x1, y1],
+        point(x1, y1),
         property,
         latestElements,
         originalElements,

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -4,7 +4,6 @@ import type {
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
 } from "../../element/types";
-import { rotate } from "../../math";
 import type Scene from "../../scene/Scene";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
@@ -14,6 +13,7 @@ import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import type { AppState } from "../../types";
+import { point, pointRotateRads } from "../../../math";
 
 interface MultiPositionProps {
   property: "x" | "y";
@@ -43,11 +43,9 @@ const moveElements = (
       origElement.x + origElement.width / 2,
       origElement.y + origElement.height / 2,
     ];
-    const [topLeftX, topLeftY] = rotate(
-      origElement.x,
-      origElement.y,
-      cx,
-      cy,
+    const [topLeftX, topLeftY] = pointRotateRads(
+      point(origElement.x, origElement.y),
+      point(cx, cy),
       origElement.angle,
     );
 
@@ -98,11 +96,9 @@ const moveGroupTo = (
         latestElement.y + latestElement.height / 2,
       ];
 
-      const [topLeftX, topLeftY] = rotate(
-        latestElement.x,
-        latestElement.y,
-        cx,
-        cy,
+      const [topLeftX, topLeftY] = pointRotateRads(
+        point(latestElement.x, latestElement.y),
+        point(cx, cy),
         latestElement.angle,
       );
 
@@ -174,11 +170,9 @@ const handlePositionChange: DragInputCallbackType<
             origElement.x + origElement.width / 2,
             origElement.y + origElement.height / 2,
           ];
-          const [topLeftX, topLeftY] = rotate(
-            origElement.x,
-            origElement.y,
-            cx,
-            cy,
+          const [topLeftX, topLeftY] = pointRotateRads(
+            point(origElement.x, origElement.y),
+            point(cx, cy),
             origElement.angle,
           );
 
@@ -246,7 +240,11 @@ const MultiPosition = ({
         const [el] = elementsInUnit;
         const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
 
-        const [topLeftX, topLeftY] = rotate(el.x, el.y, cx, cy, el.angle);
+        const [topLeftX, topLeftY] = pointRotateRads(
+          point(el.x, el.y),
+          point(cx, cy),
+          el.angle,
+        );
 
         return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
       }),

packages/excalidraw/components/Stats/Position.tsx

@@ -1,10 +1,10 @@
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
-import { rotate } from "../../math";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
+import { point, pointRotateRads } from "../../../math";
 
 interface PositionProps {
   property: "x" | "y";
@@ -32,11 +32,9 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
     origElement.x + origElement.width / 2,
     origElement.y + origElement.height / 2,
   ];
-  const [topLeftX, topLeftY] = rotate(
-    origElement.x,
-    origElement.y,
-    cx,
-    cy,
+  const [topLeftX, topLeftY] = pointRotateRads(
+    point(origElement.x, origElement.y),
+    point(cx, cy),
     origElement.angle,
   );
 
@@ -94,11 +92,9 @@ const Position = ({
   scene,
   appState,
 }: PositionProps) => {
-  const [topLeftX, topLeftY] = rotate(
-    element.x,
-    element.y,
-    element.x + element.width / 2,
-    element.y + element.height / 2,
+  const [topLeftX, topLeftY] = pointRotateRads(
+    point(element.x, element.y),
+    point(element.x + element.width / 2, element.y + element.height / 2),
     element.angle,
   );
   const value =

packages/excalidraw/components/Stats/stats.test.tsx

@@ -19,12 +19,13 @@ import type {
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
 } from "../../element/types";
-import { degreeToRadian, rotate } from "../../math";
 import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
 import { getCommonBounds, isTextElement } from "../../element";
 import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
+import type { Degrees } from "../../../math";
+import { degreesToRadians, point, pointRotateRads } from "../../../math";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -46,7 +47,9 @@ const testInputProperty = (
   expect(input.value).toBe(initialValue.toString());
   UI.updateInput(input, String(nextValue));
   if (property === "angle") {
-    expect(element[property]).toBe(degreeToRadian(Number(nextValue)));
+    expect(element[property]).toBe(
+      degreesToRadians(Number(nextValue) as Degrees),
+    );
   } else if (property === "fontSize" && isTextElement(element)) {
     expect(element[property]).toBe(Number(nextValue));
   } else if (property !== "fontSize") {
@@ -260,11 +263,9 @@ describe("stats for a generic element", () => {
       rectangle.x + rectangle.width / 2,
       rectangle.y + rectangle.height / 2,
     ];
-    const [topLeftX, topLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
+    const [topLeftX, topLeftY] = pointRotateRads(
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 
@@ -281,11 +282,9 @@ describe("stats for a generic element", () => {
 
     testInputProperty(rectangle, "angle", "A", 0, 45);
 
-    let [newTopLeftX, newTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
+    let [newTopLeftX, newTopLeftY] = pointRotateRads(
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 
@@ -294,11 +293,9 @@ describe("stats for a generic element", () => {
 
     testInputProperty(rectangle, "angle", "A", 45, 66);
 
-    [newTopLeftX, newTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
+    [newTopLeftX, newTopLeftY] = pointRotateRads(
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     expect(newTopLeftX.toString()).not.toEqual(xInput.value);
@@ -313,11 +310,9 @@ describe("stats for a generic element", () => {
       rectangle.x + rectangle.width / 2,
       rectangle.y + rectangle.height / 2,
     ];
-    const [topLeftX, topLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
+    const [topLeftX, topLeftY] = pointRotateRads(
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     testInputProperty(rectangle, "width", "W", rectangle.width, 400);
@@ -325,11 +320,9 @@ describe("stats for a generic element", () => {
       rectangle.x + rectangle.width / 2,
       rectangle.y + rectangle.height / 2,
     ];
-    let [currentTopLeftX, currentTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
+    let [currentTopLeftX, currentTopLeftY] = pointRotateRads(
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
@@ -340,11 +333,9 @@ describe("stats for a generic element", () => {
       rectangle.x + rectangle.width / 2,
       rectangle.y + rectangle.height / 2,
     ];
-    [currentTopLeftX, currentTopLeftY] = rotate(
-      rectangle.x,
-      rectangle.y,
-      cx,
-      cy,
+    [currentTopLeftX, currentTopLeftY] = pointRotateRads(
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 
@@ -642,7 +633,7 @@ describe("stats for multiple elements", () => {
 
     UI.updateInput(angle, "40");
 
-    const angleInRadian = degreeToRadian(40);
+    const angleInRadian = degreesToRadians(40 as Degrees);
     expect(rectangle?.angle).toBeCloseTo(angleInRadian, 4);
     expect(text?.angle).toBeCloseTo(angleInRadian, 4);
     expect(frame.angle).toBe(0);

packages/excalidraw/components/Stats/utils.ts

@@ -1,3 +1,5 @@
+import type { Radians } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 import {
   bindOrUnbindLinearElements,
   updateBoundElements,
@@ -30,7 +32,6 @@ import {
   getElementsInGroup,
   isInGroup,
 } from "../../groups";
-import { rotate } from "../../math";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 import { getFontString } from "../../utils";
@@ -229,23 +230,19 @@ export const moveElement = (
     originalElement.x + originalElement.width / 2,
     originalElement.y + originalElement.height / 2,
   ];
-  const [topLeftX, topLeftY] = rotate(
-    originalElement.x,
-    originalElement.y,
-    cx,
-    cy,
+  const [topLeftX, topLeftY] = pointRotateRads(
+    point(originalElement.x, originalElement.y),
+    point(cx, cy),
     originalElement.angle,
   );
 
   const changeInX = newTopLeftX - topLeftX;
   const changeInY = newTopLeftY - topLeftY;
 
-  const [x, y] = rotate(
-    newTopLeftX,
-    newTopLeftY,
-    cx + changeInX,
-    cy + changeInY,
-    -originalElement.angle,
+  const [x, y] = pointRotateRads(
+    point(newTopLeftX, newTopLeftY),
+    point(cx + changeInX, cy + changeInY),
+    -originalElement.angle as Radians,
   );
 
   mutateElement(