fix: don't bundle react-dom when importing from transformHandles (#7634)

* fix: don't bundle react when importing from transfromHandles

* rename to DEFAULT_TRANSFORM_HANDLE_SPACING

packages/excalidraw/constants.ts

@@ -142,6 +142,7 @@ export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Virgil;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
+export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
 
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 

packages/excalidraw/element/transformHandles.ts

@@ -9,7 +9,7 @@ import { rotate } from "../math";
 import { InteractiveCanvasAppState, Zoom } from "../types";
 import { isTextElement } from ".";
 import { isFrameLikeElement, isLinearElement } from "./typeChecks";
-import { DEFAULT_SPACING } from "../renderer/renderScene";
+import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "../constants";
 
 export type TransformHandleDirection =
   | "n"
@@ -106,7 +106,8 @@ export const getTransformHandlesFromCoords = (
   const width = x2 - x1;
   const height = y2 - y1;
   const dashedLineMargin = margin / zoom.value;
-  const centeringOffset = (size - DEFAULT_SPACING * 2) / (2 * zoom.value);
+  const centeringOffset =
+    (size - DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / (2 * zoom.value);
 
   const transformHandles: TransformHandles = {
     nw: omitSides.nw
@@ -263,8 +264,8 @@ export const getTransformHandles = (
     };
   }
   const dashedLineMargin = isLinearElement(element)
-    ? DEFAULT_SPACING + 8
+    ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8
-    : DEFAULT_SPACING;
+    : DEFAULT_TRANSFORM_HANDLE_SPACING;
   return getTransformHandlesFromCoords(
     getElementAbsoluteCoords(element, true),
     element.angle,

packages/excalidraw/renderer/renderScene.ts

@@ -64,7 +64,11 @@ import {
 } from "../element/transformHandles";
 import { arrayToMap, throttleRAF } from "../utils";
 import { UserIdleState } from "../types";
-import { FRAME_STYLE, THEME_FILTER } from "../constants";
+import {
+  DEFAULT_TRANSFORM_HANDLE_SPACING,
+  FRAME_STYLE,
+  THEME_FILTER,
+} from "../constants";
 import {
   EXTERNAL_LINK_IMG,
   getLinkHandleFromCoords,
@@ -83,8 +87,6 @@ import {
   isElementInFrame,
 } from "../frame";
 
-export const DEFAULT_SPACING = 2;
-
 const strokeRectWithRotation = (
   context: CanvasRenderingContext2D,
   x: number,
@@ -676,7 +678,8 @@ const _renderInteractiveScene = ({
         );
       }
     } else if (selectedElements.length > 1 && !appState.isRotating) {
-      const dashedLinePadding = (DEFAULT_SPACING * 2) / appState.zoom.value;
+      const dashedLinePadding =
+        (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
       context.fillStyle = oc.white;
       const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
       const initialLineDash = context.getLineDash();
@@ -1191,7 +1194,7 @@ const renderSelectionBorder = (
     cy: number;
     activeEmbeddable: boolean;
   },
-  padding = DEFAULT_SPACING * 2,
+  padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2,
 ) => {
   const {
     angle,