split strokeWidth constants into own file

packages/common/src/constants.strokeWidth.ts

@@ -0,0 +1,63 @@
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+export type StrokeWidthKey = "thin" | "medium" | "bold";
+
+export const STROKE_WIDTH_KEYS: readonly StrokeWidthKey[] = [
+  "thin",
+  "medium",
+  "bold",
+];
+
+export const STROKE_WIDTH: Readonly<
+  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
+> = {
+  thin: 1,
+  medium: 2,
+  bold: 4,
+  extraBold: 8, // unused (may be introduced in the future)
+};
+
+// freedraw schema 2.0 uses thinner stroke, but to maintain backwards and
+// forwards compatibility, instead of changing the shape renderer, we scale
+// the stroke width by 1/2 (previous, thin was 1, medium 2 etc.)
+//
+// note that in the UI, STROKE_WIDTH.thin == FREEDRAW_STROKE_WIDTH.thin still
+export const FREEDRAW_STROKE_WIDTH: Readonly<
+  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
+> = {
+  thin: 0.5,
+  medium: 1,
+  bold: 2,
+  extraBold: 4, // legacy (may be used again in the future)
+};
+
+const STROKE_WIDTH_TO_KEY = {
+  generic: Object.fromEntries(
+    Object.entries(STROKE_WIDTH).map(([key, value]) => [value, key]),
+  ) as Record<ExcalidrawElement["strokeWidth"], StrokeWidthKey | undefined>,
+  freedraw: Object.fromEntries(
+    Object.entries(FREEDRAW_STROKE_WIDTH).map(([key, value]) => [value, key]),
+  ) as Record<ExcalidrawElement["strokeWidth"], StrokeWidthKey | undefined>,
+};
+
+export const getStrokeWidthKeyForElement = (
+  element: Pick<ExcalidrawElement, "type" | "strokeWidth">,
+): StrokeWidthKey | null => {
+  const strokeWidthToKey =
+    element.type === "freedraw"
+      ? STROKE_WIDTH_TO_KEY.freedraw
+      : STROKE_WIDTH_TO_KEY.generic;
+
+  return strokeWidthToKey[element.strokeWidth] ?? null;
+};
+
+export const getStrokeWidthByKey = (
+  elementType: ExcalidrawElement["type"],
+  strokeWidthKey: StrokeWidthKey,
+): ExcalidrawElement["strokeWidth"] => {
+  return elementType === "freedraw"
+    ? FREEDRAW_STROKE_WIDTH[strokeWidthKey]
+    : STROKE_WIDTH[strokeWidthKey];
+};
+
+export const DEFAULT_ELEMENT_STROKE_WIDTH_KEY: StrokeWidthKey = "medium";

packages/common/src/constants.ts

@@ -5,6 +5,10 @@ import type {
 import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
 
 import { COLOR_PALETTE } from "./colors";
+import {
+  STROKE_WIDTH,
+  DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
+} from "./constants.strokeWidth";
 
 export const supportsResizeObserver =
   typeof window !== "undefined" && "ResizeObserver" in window;
@@ -404,48 +408,6 @@ export const ROUGHNESS = {
   cartoonist: 2,
 } as const;
 
-export type StrokeWidthKey = "thin" | "medium" | "bold";
-
-export const STROKE_WIDTH_KEYS: readonly StrokeWidthKey[] = [
-  "thin",
-  "medium",
-  "bold",
-];
-
-export const STROKE_WIDTH: Readonly<
-  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
-> = {
-  thin: 1,
-  medium: 2,
-  bold: 4,
-  extraBold: 8, // unused (may be introduced in the future)
-};
-
-// freedraw schema 2.0 uses thinner stroke, but to maintain backwards and
-// forwards compatibility, instead of changing the shape renderer, we scale
-// the stroke width by 1/2 (previous, thin was 1, medium 2 etc.)
-//
-// note that in the UI, STROKE_WIDTH.thin == FREEDRAW_STROKE_WIDTH.thin still
-export const FREEDRAW_STROKE_WIDTH: Readonly<
-  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
-> = {
-  thin: 0.5,
-  medium: 1,
-  bold: 2,
-  extraBold: 4, // legacy (may be used again in the future)
-};
-
-export const getStrokeWidthByKey = (
-  elementType: ExcalidrawElement["type"],
-  strokeWidthKey: StrokeWidthKey,
-): ExcalidrawElement["strokeWidth"] => {
-  return elementType === "freedraw"
-    ? FREEDRAW_STROKE_WIDTH[strokeWidthKey]
-    : STROKE_WIDTH[strokeWidthKey];
-};
-
-export const DEFAULT_ELEMENT_STROKE_WIDTH_KEY: StrokeWidthKey = "medium";
-
 export const DEFAULT_ELEMENT_PROPS: {
   strokeColor: ExcalidrawElement["strokeColor"];
   backgroundColor: ExcalidrawElement["backgroundColor"];

packages/common/src/index.ts

@@ -2,6 +2,7 @@ export * from "./binary-heap";
 export * from "./bounds";
 export * from "./colors";
 export * from "./constants";
+export * from "./constants.strokeWidth";
 export * from "./font-metadata";
 export * from "./queue";
 export * from "./keys";

packages/excalidraw/actions/actionProperties.tsx

@@ -12,7 +12,6 @@ import {
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
   ROUNDNESS,
-  STROKE_WIDTH_KEYS,
   VERTICAL_ALIGN,
   KEYS,
   randomInteger,
@@ -25,6 +24,7 @@ import {
   invariant,
   FONT_SIZES,
   type StrokeWidthKey,
+  getStrokeWidthKeyForElement,
 } from "@excalidraw/common";
 
 import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
@@ -554,23 +554,6 @@ export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
   },
 });
 
-const getStrokeWidthKeyForElement = (
-  element: ExcalidrawElement,
-): StrokeWidthKey | null => {
-  return (
-    STROKE_WIDTH_KEYS.find(
-      (key) => getStrokeWidthByKey(element.type, key) === element.strokeWidth,
-    ) ?? null
-  );
-};
-
-const getStrokeWidthForElement = (
-  element: ExcalidrawElement,
-  strokeWidthKey: StrokeWidthKey,
-): ExcalidrawElement["strokeWidth"] => {
-  return getStrokeWidthByKey(element.type, strokeWidthKey);
-};
-
 export const actionChangeStrokeWidth = register<StrokeWidthKey>({
   name: "changeStrokeWidth",
   label: "labels.strokeWidth",
@@ -581,7 +564,7 @@ export const actionChangeStrokeWidth = register<StrokeWidthKey>({
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
-          strokeWidth: getStrokeWidthForElement(el, value),
+          strokeWidth: getStrokeWidthByKey(el.type, value),
         }),
       ),
       appState: { ...appState, currentItemStrokeWidthKey: value },

packages/excalidraw/data/restore.ts

@@ -19,9 +19,8 @@ import {
   getSizeFromPoints,
   normalizeLink,
   getLineHeight,
-  STROKE_WIDTH,
   STROKE_WIDTH_KEYS,
-  type StrokeWidthKey,
+  STROKE_WIDTH,
 } from "@excalidraw/common";
 import {
   calculateFixedPointForNonElbowArrowBinding,
@@ -58,6 +57,8 @@ import { getNormalizedDimensions } from "@excalidraw/element";
 
 import { isInvisiblySmallElement } from "@excalidraw/element";
 
+import type { StrokeWidthKey } from "@excalidraw/common";
+
 import type { LocalPoint, Radians } from "@excalidraw/math";
 
 import type {