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

packages/excalidraw/components/Stats/Angle.tsx

@@ -1,17 +1,20 @@
 import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
 
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import { getBoundTextElement } from "@excalidraw/element/textElement";
+import { isArrowElement, isElbowArrow } from "@excalidraw/element/typeChecks";
+
 import type { Degrees } from "@excalidraw/math";
 
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { angleIcon } from "../icons";
 
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type { ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/Dimension.tsx

@@ -1,19 +1,20 @@
 import { clamp, round } from "@excalidraw/math";
 
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
 import {
   MINIMAL_CROP_SIZE,
   getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
-import { resizeSingleElement } from "../../element/resizeElements";
-import { isImageElement } from "../../element/typeChecks";
+} from "@excalidraw/element/cropElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { resizeSingleElement } from "@excalidraw/element/resizeElements";
+import { isImageElement } from "@excalidraw/element/typeChecks";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type { ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/DragInput.tsx

@@ -1,12 +1,13 @@
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 
-import { deepCopyElement } from "@excalidraw/excalidraw/element/duplicate";
+import { EVENT, KEYS, cloneJSON } from "@excalidraw/common";
+
+import { deepCopyElement } from "@excalidraw/element/duplicate";
+
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
-import { EVENT } from "../../constants";
-import { KEYS } from "../../keys";
 import { CaptureUpdateAction } from "../../store";
-import { cloneJSON } from "../../utils";
 import { useApp } from "../App";
 import { InlineIcon } from "../InlineIcon";
 
@@ -15,7 +16,6 @@ import { SMALLEST_DELTA } from "./utils";
 import "./DragInput.scss";
 
 import type { StatsInputProperty } from "./utils";
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/FontSize.tsx

@@ -1,17 +1,24 @@
-import { isTextElement, redrawTextBoundingBox } from "../../element";
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
-import { hasBoundTextElement } from "../../element/typeChecks";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import {
+  getBoundTextElement,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+import {
+  hasBoundTextElement,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+} from "@excalidraw/element/types";
+
 import { fontSizeIcon } from "../icons";
 
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiAngle.tsx

@@ -1,18 +1,22 @@
 import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
 
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import { getBoundTextElement } from "@excalidraw/element/textElement";
+import { isArrowElement } from "@excalidraw/element/typeChecks";
+
+import { isInGroup } from "@excalidraw/element/groups";
+
 import type { Degrees } from "@excalidraw/math";
 
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement } from "../../element/typeChecks";
-import { isInGroup } from "../../groups";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { angleIcon } from "../icons";
 
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type { ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -1,18 +1,27 @@
 import { pointFrom, type GlobalPoint } from "@excalidraw/math";
 import { useMemo } from "react";
 
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { getCommonBounds, isTextElement } from "../../element";
-import { updateBoundElements } from "../../element/binding";
-import { mutateElement } from "../../element/mutateElement";
+import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
+import { updateBoundElements } from "@excalidraw/element/binding";
+import { mutateElement } from "@excalidraw/element/mutateElement";
 import {
   rescalePointsInElement,
   resizeSingleElement,
-} from "../../element/resizeElements";
+} from "@excalidraw/element/resizeElements";
 import {
   getBoundTextElement,
   handleBindTextResize,
-} from "../../element/textElement";
+} from "@excalidraw/element/textElement";
+
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
+import { getCommonBounds } from "@excalidraw/utils";
+
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
 
 import DragInput from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
@@ -20,11 +29,6 @@ import { getElementsInAtomicUnit } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiFontSize.tsx

@@ -1,19 +1,27 @@
-import { isTextElement, redrawTextBoundingBox } from "../../element";
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
-import { hasBoundTextElement } from "../../element/typeChecks";
-import { isInGroup } from "../../groups";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import {
+  getBoundTextElement,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+import {
+  hasBoundTextElement,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import { isInGroup } from "@excalidraw/element/groups";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
+
 import { fontSizeIcon } from "../icons";
 
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -1,7 +1,16 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 import { useMemo } from "react";
 
-import { getCommonBounds, isTextElement } from "../../element";
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
+import { getCommonBounds } from "@excalidraw/element/bounds";
+
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
 
 import StatsDragInput from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
@@ -9,12 +18,6 @@ import { getElementsInAtomicUnit, moveElement } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/Position.tsx

@@ -3,15 +3,16 @@ import { clamp, pointFrom, pointRotateRads, round } from "@excalidraw/math";
 import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
-import { isImageElement } from "../../element/typeChecks";
+} from "@excalidraw/element/cropElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { isImageElement } from "@excalidraw/element/typeChecks";
+
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/index.tsx

@@ -3,12 +3,17 @@ import clsx from "clsx";
 import throttle from "lodash.throttle";
 import { useEffect, useMemo, useState, memo } from "react";
 
-import { STATS_PANELS } from "../../constants";
-import { getCommonBounds } from "../../element/bounds";
-import { getUncroppedWidthAndHeight } from "../../element/cropElement";
-import { isElbowArrow, isImageElement } from "../../element/typeChecks";
-import { frameAndChildrenSelectedTogether } from "../../frame";
-import { elementsAreInSameGroup } from "../../groups";
+import { STATS_PANELS } from "@excalidraw/common";
+import { getCommonBounds } from "@excalidraw/element/bounds";
+import { getUncroppedWidthAndHeight } from "@excalidraw/element/cropElement";
+import { isElbowArrow, isImageElement } from "@excalidraw/element/typeChecks";
+
+import { frameAndChildrenSelectedTogether } from "@excalidraw/element/frame";
+
+import { elementsAreInSameGroup } from "@excalidraw/element/groups";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { t } from "../../i18n";
 import { isGridModeEnabled } from "../../snapping";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
@@ -29,7 +34,6 @@ import { getAtomicUnits } from "./utils";
 
 import "./Stats.scss";
 
-import type { NonDeletedExcalidrawElement } from "../../element/types";
 import type {
   AppClassProperties,
   AppState,

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

@@ -3,14 +3,23 @@ import { act, fireEvent, queryByTestId } from "@testing-library/react";
 import React from "react";
 import { vi } from "vitest";
 
+import { setDateTimeForTests, reseed } from "@excalidraw/common";
+
+import { isInGroup } from "@excalidraw/element/groups";
+
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
 import type { Degrees } from "@excalidraw/math";
 
-import { Excalidraw, mutateElement } from "../..";
+import type {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElement,
+} from "@excalidraw/element/types";
+
+import { Excalidraw, getCommonBounds, mutateElement } from "../..";
 import { actionGroup } from "../../actions";
-import { getCommonBounds, isTextElement } from "../../element";
-import { isInGroup } from "../../groups";
 import { t } from "../../i18n";
-import { reseed } from "../../random";
 import * as StaticScene from "../../renderer/staticScene";
 import { API } from "../../tests/helpers/api";
 import { Keyboard, Pointer, UI } from "../../tests/helpers/ui";
@@ -21,16 +30,9 @@ import {
   render,
   restoreOriginalGetBoundingClientRect,
 } from "../../tests/test-utils";
-import { setDateTimeForTests } from "../../utils";
 
 import { getStepSizedValue } from "./utils";
 
-import type {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
-
 const { h } = window;
 const mouse = new Pointer("mouse");
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");

packages/excalidraw/components/Stats/utils.ts

@@ -1,30 +1,32 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 
-import type { Radians } from "@excalidraw/math";
-
 import {
   bindOrUnbindLinearElements,
   updateBoundElements,
-} from "../../element/binding";
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
+} from "@excalidraw/element/binding";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { getBoundTextElement } from "@excalidraw/element/textElement";
 import {
   isFrameLikeElement,
   isLinearElement,
   isTextElement,
-} from "../../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
 import {
   getSelectedGroupIds,
   getElementsInGroup,
   isInGroup,
-} from "../../groups";
+} from "@excalidraw/element/groups";
+
+import type { Radians } from "@excalidraw/math";
 
 import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
+} from "@excalidraw/element/types";
+
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";