refactor: separate elements logic into a standalone package (#9285)

packages/utils/src/bbox.ts

@@ -5,7 +5,7 @@ import {
   type LocalPoint,
 } from "@excalidraw/math";
 
-import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
+import type { Bounds } from "@excalidraw/element/bounds";
 
 export type LineSegment<P extends LocalPoint | GlobalPoint> = [P, P];
 

packages/utils/src/collision.ts

@@ -12,13 +12,9 @@ import {
 
 import type { Curve } from "@excalidraw/math";
 
-import {
-  pointInEllipse,
-  pointOnEllipse,
-  type GeometricShape,
-} from "./geometry/shape";
+import { pointInEllipse, pointOnEllipse } from "./shape";
 
-import type { Polycurve, Polyline } from "./geometry/shape";
+import type { Polycurve, Polyline, GeometricShape } from "./shape";
 
 // check if the given point is considered on the given shape's border
 export const isPointOnShape = <Point extends GlobalPoint | LocalPoint>(

packages/utils/src/export.ts

@@ -1,10 +1,10 @@
+import { MIME_TYPES } from "@excalidraw/common";
 import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
 import {
   copyBlobToClipboardAsPng,
   copyTextToSystemClipboard,
   copyToClipboard,
 } from "@excalidraw/excalidraw/clipboard";
-import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
 import { encodePngMetadata } from "@excalidraw/excalidraw/data/image";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
 import { restore } from "@excalidraw/excalidraw/data/restore";
@@ -17,7 +17,7 @@ import type {
   ExcalidrawElement,
   ExcalidrawFrameLikeElement,
   NonDeleted,
-} from "@excalidraw/excalidraw/element/types";
+} from "@excalidraw/element/types";
 import type { AppState, BinaryFiles } from "@excalidraw/excalidraw/types";
 
 export { MIME_TYPES };

packages/utils/src/index.ts

@@ -1,4 +1,4 @@
 export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
-export { getCommonBounds } from "@excalidraw/excalidraw/element/bounds";
+export { getCommonBounds } from "@excalidraw/element/bounds";

packages/utils/src/shape.ts

@@ -11,9 +11,9 @@
  * also included in this file are methods for converting an Excalidraw element or a Drawable from roughjs
  * to pure shapes
  */
+import { pointsOnBezierCurves } from "points-on-curve";
 
-import { getElementAbsoluteCoords } from "@excalidraw/excalidraw/element";
-import { invariant } from "@excalidraw/excalidraw/utils";
+import { invariant } from "@excalidraw/common";
 import {
   curve,
   lineSegment,
@@ -33,7 +33,8 @@ import {
   type GlobalPoint,
   type LocalPoint,
 } from "@excalidraw/math";
-import { pointsOnBezierCurves } from "points-on-curve";
+
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
 
 import type {
   ElementsMap,
@@ -50,7 +51,7 @@ import type {
   ExcalidrawRectangleElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
-} from "@excalidraw/excalidraw/element/types";
+} from "@excalidraw/element/types";
 import type { Curve, LineSegment, Polygon, Radians } from "@excalidraw/math";
 
 import type { Drawable, Op } from "roughjs/bin/core";

packages/utils/src/withinBounds.ts

@@ -1,12 +1,12 @@
-import { getElementBounds } from "@excalidraw/excalidraw/element/bounds";
+import { arrayToMap } from "@excalidraw/common";
+import { getElementBounds } from "@excalidraw/element/bounds";
 import {
   isArrowElement,
   isExcalidrawElement,
   isFreeDrawElement,
   isLinearElement,
   isTextElement,
-} from "@excalidraw/excalidraw/element/typeChecks";
-import { arrayToMap } from "@excalidraw/excalidraw/utils";
+} from "@excalidraw/element/typeChecks";
 import {
   rangeIncludesValue,
   pointFrom,
@@ -14,13 +14,13 @@ import {
   rangeInclusive,
 } from "@excalidraw/math";
 
-import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
+import type { Bounds } from "@excalidraw/element/bounds";
 import type {
   ExcalidrawElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
   NonDeletedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
+} from "@excalidraw/element/types";
 import type { LocalPoint } from "@excalidraw/math";
 
 type Element = NonDeletedExcalidrawElement;

packages/utils/tests/collision.test.ts

@@ -9,9 +9,9 @@ import {
 
 import type { Curve, Degrees, GlobalPoint } from "@excalidraw/math";
 
-import { pointOnCurve, pointOnPolyline } from "./collision";
+import { pointOnCurve, pointOnPolyline } from "../src/collision";
 
-import type { Polyline } from "./geometry/shape";
+import type { Polyline } from "../src/shape";
 
 describe("point and curve", () => {
   const c: Curve<GlobalPoint> = curve(

packages/utils/tests/export.test.ts

@@ -1,9 +1,9 @@
-import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
+import { MIME_TYPES } from "@excalidraw/common";
 import * as mockedSceneExportUtils from "@excalidraw/excalidraw/scene/export";
 import { diagramFactory } from "@excalidraw/excalidraw/tests/fixtures/diagramFixture";
 import { vi } from "vitest";
 
-import * as utils from ".";
+import * as utils from "../src";
 
 const exportToSvgSpy = vi.spyOn(mockedSceneExportUtils, "exportToSvg");
 

packages/utils/tests/geometry.test.ts

@@ -15,7 +15,7 @@ import type {
   Radians,
 } from "@excalidraw/math";
 
-import { pointInEllipse, pointOnEllipse, type Ellipse } from "./shape";
+import { pointInEllipse, pointOnEllipse, type Ellipse } from "../src/shape";
 
 describe("point and line", () => {
   // const l: Line<GlobalPoint> = line(point(1, 0), point(1, 2));

packages/utils/tests/utils.unmocked.test.ts

@@ -4,7 +4,7 @@ import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
 
-import * as utils from "./index";
+import * as utils from "../src";
 
 // NOTE this test file is using the actual API, unmocked. Hence splitting it
 // from the other test file, because I couldn't figure out how to test

packages/utils/tests/withinBounds.test.ts

@@ -1,12 +1,12 @@
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
-import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
+import type { Bounds } from "@excalidraw/element/bounds";
 
 import {
   elementPartiallyOverlapsWithOrContainsBBox,
   elementsOverlappingBBox,
   isElementInsideBBox,
-} from "./withinBounds";
+} from "../src/withinBounds";
 
 const makeElement = (x: number, y: number, width: number, height: number) =>
   API.createElement({

packages/utils/tsconfig.json

@@ -1,24 +1,6 @@
 {
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./dist/types",
-    "target": "ESNext",
-    "strict": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "jsx": "react-jsx",
-    "emitDeclarationOnly": true,
-    "paths": {
-      "@excalidraw/excalidraw": ["../excalidraw/index.tsx"],
-      "@excalidraw/utils": ["../utils/index.ts"],
-      "@excalidraw/math": ["../math/index.ts"],
-      "@excalidraw/excalidraw/*": ["../excalidraw/*"],
-      "@excalidraw/utils/*": ["../utils/*"],
-      "@excalidraw/math/*": ["../math/*"]
-    }
-  },
-  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
+    "outDir": "./dist/types"
+  }
 }