Merge 987668c139 into 4a60fe3d22

package.json

@@ -84,5 +84,8 @@
   },
   "resolutions": {
     "strip-ansi": "6.0.1"
+  },
+  "dependencies": {
+    "yarn": "1.22.22"
   }
 }

packages/common/src/constants.ts

@@ -432,12 +432,12 @@ export const TOOL_TYPE = {
   freedraw: "freedraw",
   text: "text",
   image: "image",
+  regularPolygon: "regularPolygon",
   eraser: "eraser",
   hand: "hand",
+  laser: "laser",
   frame: "frame",
   magicframe: "magicframe",
-  embeddable: "embeddable",
-  laser: "laser",
 } as const;
 
 export const EDITOR_LS_KEYS = {

packages/element/src/Shape.ts

@@ -28,6 +28,7 @@ import type {
   ExcalidrawSelectionElement,
   ExcalidrawLinearElement,
   Arrowhead,
+  ExcalidrawRegularPolygonElement,
 } from "./types";
 
 import type { Drawable, Options } from "roughjs/bin/core";
@@ -108,6 +109,14 @@ export const generateRoughOptions = (
       }
       return options;
     }
+    case "regularPolygon": {
+      options.fillStyle = element.fillStyle;
+      options.fill = isTransparent(element.backgroundColor)
+        ? undefined
+        : element.backgroundColor;
+      // Add any specific options for polygons if needed, otherwise just return
+      return options;
+    }
     case "line":
     case "freedraw": {
       if (isPathALoop(element.points)) {
@@ -127,6 +136,50 @@ export const generateRoughOptions = (
   }
 };
 
+/**
+ * Returns the points for a regular polygon with the specified number of sides,
+ * centered within the element's bounds.
+ */
+export const getRegularPolygonPoints = (
+  element: ExcalidrawElement,
+  sides: number = 6
+): [number, number][] => {
+  // Minimum number of sides for a polygon is 3
+  if (sides < 3) {
+    sides = 3;
+  }
+
+  const width = element.width;
+  const height = element.height;
+  
+  // Center of the element
+  const cx = width / 2;
+  const cy = height / 2;
+  
+  // Use the smaller dimension to ensure polygon fits within the element bounds
+  const radius = Math.min(width, height) / 2;
+  
+  // Calculate points for the regular polygon
+  const points: [number, number][] = [];
+  
+  // For regular polygons, we want to start from the top (angle = -π/2)
+  // so that polygons like hexagons have a flat top
+  const startAngle = -Math.PI / 2;
+  
+  for (let i = 0; i < sides; i++) {
+    // Calculate angle for this vertex
+    const angle = startAngle + (2 * Math.PI * i) / sides;
+    
+    // Calculate x and y for this vertex
+    const x = cx + radius * Math.cos(angle);
+    const y = cy + radius * Math.sin(angle);
+    
+    points.push([x, y]);
+  }
+  
+  return points;
+};
+
 const modifyIframeLikeForRoughOptions = (
   element: NonDeletedExcalidrawElement,
   isExporting: boolean,
@@ -537,6 +590,75 @@ export const _generateElementShape = (
       // `element.canvas` on rerenders
       return shape;
     }
+    case "regularPolygon": {
+      let shape: ElementShapes[typeof element.type];
+      
+      const points = getRegularPolygonPoints(
+        element, 
+        (element as ExcalidrawRegularPolygonElement).sides
+      );
+      
+      if (element.roundness) {
+        // For rounded corners, we create a path with smooth corners
+        // using quadratic Bézier curves, similar to the diamond shape
+        const options = generateRoughOptions(element, true);
+        
+        // Calculate appropriate corner radius based on element size
+        const radius = getCornerRadius(
+          Math.min(element.width, element.height) / 4,
+          element
+        );
+        
+        const pathData: string[] = [];
+        
+        // Process each vertex to create rounded corners between edges
+        for (let i = 0; i < points.length; i++) {
+          const current = points[i];
+          const next = points[(i + 1) % points.length];
+          const prev = points[(i - 1 + points.length) % points.length];
+          
+          // Calculate vectors to previous and next points
+          const toPrev = [prev[0] - current[0], prev[1] - current[1]];
+          const toNext = [next[0] - current[0], next[1] - current[1]];
+          
+          // Normalize vectors and calculate corner points
+          const toPrevLength = Math.sqrt(toPrev[0] * toPrev[0] + toPrev[1] * toPrev[1]);
+          const toNextLength = Math.sqrt(toNext[0] * toNext[0] + toNext[1] * toNext[1]);
+          
+          // Move inward from vertex toward previous point (limited by half the distance)
+          const prevCorner = [
+            current[0] + (toPrev[0] / toPrevLength) * Math.min(radius, toPrevLength / 2),
+            current[1] + (toPrev[1] / toPrevLength) * Math.min(radius, toPrevLength / 2)
+          ];
+          
+          // Move inward from vertex toward next point (limited by half the distance)
+          const nextCorner = [
+            current[0] + (toNext[0] / toNextLength) * Math.min(radius, toNextLength / 2),
+            current[1] + (toNext[1] / toNextLength) * Math.min(radius, toNextLength / 2)
+          ];
+          
+          // First point needs a move command, others need line commands
+          if (i === 0) {
+            pathData.push(`M ${nextCorner[0]} ${nextCorner[1]}`);
+          } else {
+            // Draw line to the corner coming from previous point
+            pathData.push(`L ${prevCorner[0]} ${prevCorner[1]}`);
+            // Draw a quadratic curve around the current vertex to the corner going to next point
+            pathData.push(`Q ${current[0]} ${current[1]}, ${nextCorner[0]} ${nextCorner[1]}`);
+          }
+        }
+        
+        // Close the path to create a complete shape
+        pathData.push("Z");
+        
+        shape = generator.path(pathData.join(" "), options);
+      } else {
+        // For non-rounded corners, use the simple polygon generator
+        shape = generator.polygon(points, generateRoughOptions(element));
+      }
+      
+      return shape;
+    }
     default: {
       assertNever(
         element,

packages/element/src/bounds.ts

@@ -63,6 +63,7 @@ import type {
   ExcalidrawRectanguloidElement,
   ExcalidrawEllipseElement,
   ElementsMapOrArray,
+  ExcalidrawRegularPolygonElement,
 } from "./types";
 import type { Drawable, Op } from "roughjs/bin/core";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";

packages/element/src/comparisons.ts

@@ -7,10 +7,11 @@ export const hasBackground = (type: ElementOrToolType) =>
   type === "ellipse" ||
   type === "diamond" ||
   type === "line" ||
+  type === "regularPolygon" || // Added regularPolygon
   type === "freedraw";
 
 export const hasStrokeColor = (type: ElementOrToolType) =>
-  type !== "image" && type !== "frame" && type !== "magicframe";
+  type !== "image" && type !== "frame" && type !== "magicframe"; // regularPolygon already included by not being excluded
 
 export const hasStrokeWidth = (type: ElementOrToolType) =>
   type === "rectangle" ||
@@ -20,6 +21,7 @@ export const hasStrokeWidth = (type: ElementOrToolType) =>
   type === "diamond" ||
   type === "freedraw" ||
   type === "arrow" ||
+  type === "regularPolygon" || // Added regularPolygon
   type === "line";
 
 export const hasStrokeStyle = (type: ElementOrToolType) =>
@@ -29,6 +31,7 @@ export const hasStrokeStyle = (type: ElementOrToolType) =>
   type === "ellipse" ||
   type === "diamond" ||
   type === "arrow" ||
+  type === "regularPolygon" || // Added regularPolygon
   type === "line";
 
 export const canChangeRoundness = (type: ElementOrToolType) =>
@@ -37,6 +40,7 @@ export const canChangeRoundness = (type: ElementOrToolType) =>
   type === "embeddable" ||
   type === "line" ||
   type === "diamond" ||
+  type === "regularPolygon" || // Added regularPolygon
   type === "image";
 
 export const toolIsArrow = (type: ElementOrToolType) => type === "arrow";

packages/element/src/distance.ts

@@ -39,7 +39,11 @@ export const distanceToBindableElement = (
       return distanceToDiamondElement(element, p);
     case "ellipse":
       return distanceToEllipseElement(element, p);
+    case "regularPolygon":
+      // For regularPolygon, use the same distance calculation as rectangle
+      return distanceToRectanguloidElement(element, p);
   }
+  return Infinity;
 };
 
 /**

packages/element/src/newElement.ts

@@ -46,6 +46,7 @@ import type {
   ExcalidrawArrowElement,
   FixedSegment,
   ExcalidrawElbowArrowElement,
+  ExcalidrawRegularPolygonElement,
 } from "./types";
 
 export type ElementConstructorOpts = MarkOptional<
@@ -471,6 +472,28 @@ export const newLinearElement = (
   };
 };
 
+export const newRegularPolygonElement = (
+  opts: {
+    type: "regularPolygon";
+    sides?: number;
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawRegularPolygonElement> => {
+  // create base element
+  const base = _newElementBase<ExcalidrawRegularPolygonElement>(
+    "regularPolygon",
+    opts,
+  );
+  // set default size if none provided
+  const width = opts.width ?? 100;
+  const height = opts.height ?? 100;
+  return {
+    ...base,
+    sides: opts.sides ?? 6, // default to hexagon
+    width,
+    height,
+  };
+};
+
 export const newArrowElement = <T extends boolean>(
   opts: {
     type: ExcalidrawArrowElement["type"];

packages/element/src/renderElement.ts

@@ -394,6 +394,7 @@ const drawElementOnCanvas = (
   appState: StaticCanvasAppState,
 ) => {
   switch (element.type) {
+    case "regularPolygon":
     case "rectangle":
     case "iframe":
     case "embeddable":
@@ -806,6 +807,7 @@ export const renderElement = (
 
       break;
     }
+    case "regularPolygon":
     case "rectangle":
     case "diamond":
     case "ellipse":

packages/element/src/shapes.ts

@@ -40,6 +40,7 @@ import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   NonDeleted,
+  ExcalidrawRegularPolygonElement,
 } from "./types";
 
 /**
@@ -95,7 +96,12 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
         shouldTestInside(element),
       );
     }
-  }
+    case "regularPolygon": 
+    return getPolygonShape(element as any);
+}
+
+// Add this throw to fix the "no return statement" error
+throw new Error(`Unsupported element type: ${(element as any).type}`);
 };
 
 export const getBoundTextShape = <Point extends GlobalPoint | LocalPoint>(
@@ -282,6 +288,16 @@ export const mapIntervalToBezierT = <P extends GlobalPoint | LocalPoint>(
   );
 };
 
+/**
+ * Returns geometric shape for regular polygon
+ */
+export const getRegularPolygonShapePoints = <Point extends GlobalPoint | LocalPoint>(
+  element: ExcalidrawRegularPolygonElement,
+): GeometricShape<Point> => {
+  // We'll use the same shape calculation as other polygon-like elements
+  return getPolygonShape<Point>(element as any);
+};
+
 /**
  * Get the axis-aligned bounding box for a given element
  */

packages/element/src/typeChecks.ts

@@ -28,6 +28,8 @@ import type {
   PointBinding,
   FixedPointBinding,
   ExcalidrawFlowchartNodeElement,
+  ExcalidrawRegularPolygonElement,
+
 } from "./types";
 
 export const isInitializedImageElement = (
@@ -159,6 +161,7 @@ export const isBindableElement = (
       element.type === "embeddable" ||
       element.type === "frame" ||
       element.type === "magicframe" ||
+      element.type === "regularPolygon" ||
       (element.type === "text" && !element.containerId))
   );
 };
@@ -175,10 +178,17 @@ export const isRectanguloidElement = (
       element.type === "embeddable" ||
       element.type === "frame" ||
       element.type === "magicframe" ||
+      element.type === "regularPolygon" ||
       (element.type === "text" && !element.containerId))
   );
 };
 
+export const isRegularPolygonElement = (
+  element: unknown
+): element is ExcalidrawRegularPolygonElement => {
+  return element != null && (element as any).type === "regularPolygon";
+};
+
 // TODO: Remove this when proper distance calculation is introduced
 // @see binding.ts:distanceToBindableElement()
 export const isRectangularElement = (
@@ -231,7 +241,8 @@ export const isExcalidrawElement = (
     case "frame":
     case "magicframe":
     case "image":
-    case "selection": {
+    case "selection": 
+    case "regularPolygon": {
       return true;
     }
     default: {

packages/element/src/types.ts

@@ -165,6 +165,12 @@ export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
   name: string | null;
 };
 
+export type ExcalidrawRegularPolygonElement = _ExcalidrawElementBase & {
+  type: "regularPolygon";
+  /** Number of sides in the regular polygon */
+  sides: number;
+};
+
 export type ExcalidrawMagicFrameElement = _ExcalidrawElementBase & {
   type: "magicframe";
   name: string | null;
@@ -195,7 +201,8 @@ export type ExcalidrawRectanguloidElement =
   | ExcalidrawFreeDrawElement
   | ExcalidrawIframeLikeElement
   | ExcalidrawFrameLikeElement
-  | ExcalidrawEmbeddableElement;
+  | ExcalidrawEmbeddableElement
+  | ExcalidrawRegularPolygonElement;
 
 /**
  * ExcalidrawElement should be JSON serializable and (eventually) contain
@@ -212,7 +219,8 @@ export type ExcalidrawElement =
   | ExcalidrawFrameElement
   | ExcalidrawMagicFrameElement
   | ExcalidrawIframeElement
-  | ExcalidrawEmbeddableElement;
+  | ExcalidrawEmbeddableElement
+  | ExcalidrawRegularPolygonElement;
 
 export type ExcalidrawNonSelectionElement = Exclude<
   ExcalidrawElement,
@@ -264,7 +272,8 @@ export type ExcalidrawBindableElement =
   | ExcalidrawIframeElement
   | ExcalidrawEmbeddableElement
   | ExcalidrawFrameElement
-  | ExcalidrawMagicFrameElement;
+  | ExcalidrawMagicFrameElement
+  | ExcalidrawRegularPolygonElement;
 
 export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement

packages/excalidraw/actions/actionLinearEditor.tsx

@@ -82,3 +82,39 @@ export const actionToggleLinearEditor = register({
     );
   },
 });
+export const actionChangeRegularPolygonSides = register({
+  name: "changeRegularPolygonSides",
+  label: "labels.regularPolygonSides",
+  trackEvent: false,
+  perform: (elements, appState, value) => {
+    return {
+      elements: elements.map((el) =>
+        el.type === "regularPolygon"
+          ? { ...el, sides: value }
+          : el
+      ),
+      appState,
+      commitToHistory: true,
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+    };
+  },
+  PanelComponent: ({ elements, updateData }) => {
+    const selected = elements.find((el) => el.type === "regularPolygon");
+    if (!selected) return null;
+    // Type guard for ExcalidrawRegularPolygonElement
+    if (selected.type !== "regularPolygon") return null;
+    return (
+      <fieldset>
+        <legend>{t("labels.regularPolygonSides") /* Add this key to your translation files, e.g., "Number of sides" */}</legend>
+        <input
+          type="range"
+          min={3}
+          max={12}
+          value={selected.sides}
+          onChange={(e) => updateData(Number(e.target.value))}
+        />
+        <span>{selected.sides}</span>
+      </fieldset>
+    );
+  },
+});

packages/excalidraw/actions/types.ts

@@ -140,7 +140,8 @@ export type ActionName =
   | "linkToElement"
   | "cropEditor"
   | "wrapSelectionInFrame"
-  | "toggleLassoTool";
+  | "toggleLassoTool"
+  | "changeRegularPolygonSides";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

packages/excalidraw/components/App.tsx

@@ -136,6 +136,7 @@ import {
   newLinearElement,
   newTextElement,
   refreshTextDimensions,
+  newRegularPolygonElement,
 } from "@excalidraw/element/newElement";
 
 import {
@@ -6622,7 +6623,8 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       this.createFrameElementOnPointerDown(
         pointerDownState,
-        this.state.activeTool.type,
+        // Ensure only frame or magicframe types are passed
+        this.state.activeTool.type as "frame" | "magicframe",
       );
     } else if (this.state.activeTool.type === "laser") {
       this.laserTrails.startPath(
@@ -6630,11 +6632,12 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.lastCoords.y,
       );
     } else if (
-      this.state.activeTool.type !== "eraser" &&
+      ["selection", "rectangle", "diamond", "ellipse", "embeddable", "regularPolygon", "text", "image", "lasso"].includes(
-      this.state.activeTool.type !== "hand"
+        this.state.activeTool.type
+      )
     ) {
       this.createGenericElementOnPointerDown(
-        this.state.activeTool.type,
+        this.state.activeTool.type as "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "regularPolygon",
         pointerDownState,
       );
     }
@@ -7820,7 +7823,10 @@ class App extends React.Component<AppProps, AppState> {
       | "diamond"
       | "ellipse"
       | "iframe"
-      | "embeddable",
+      | "embeddable"
+      | "regularPolygon",
+    specificType?: string,
+    simulatePressure?: boolean
   ) {
     return this.state.currentItemRoundness === "round"
       ? {
@@ -7832,22 +7838,15 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private createGenericElementOnPointerDown = (
-    elementType: ExcalidrawGenericElement["type"] | "embeddable",
+    elementType: ExcalidrawGenericElement["type"] | "embeddable" | "regularPolygon",
     pointerDownState: PointerDownState,
   ): void => {
     const [gridX, gridY] = getGridPoint(
       pointerDownState.origin.x,
       pointerDownState.origin.y,
-      this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
+      this.getEffectiveGridSize(),
-        ? null
-        : this.getEffectiveGridSize(),
     );
 
-    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
-      x: gridX,
-      y: gridY,
-    });
-
     const baseElementAttributes = {
       x: gridX,
       y: gridY,
@@ -7858,10 +7857,13 @@ class App extends React.Component<AppProps, AppState> {
       strokeStyle: this.state.currentItemStrokeStyle,
       roughness: this.state.currentItemRoughness,
       opacity: this.state.currentItemOpacity,
-      roundness: this.getCurrentItemRoundness(elementType),
+      roundness: this.state.currentItemRoundness
+        ? {
+            type: ROUNDNESS.PROPORTIONAL_RADIUS,
+          }
+        : null,
       locked: false,
-      frameId: topLayerFrame ? topLayerFrame.id : null,
+    };
-    } as const;
 
     let element;
     if (elementType === "embeddable") {
@@ -7869,6 +7871,12 @@ class App extends React.Component<AppProps, AppState> {
         type: "embeddable",
         ...baseElementAttributes,
       });
+    } else if (elementType === "regularPolygon") {
+      element = newRegularPolygonElement({
+        type: "regularPolygon",
+        ...baseElementAttributes,
+        sides: 6, // Default to hexagon
+      });
     } else {
       element = newElement({
         type: elementType,

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -484,7 +484,7 @@ function CommandPaletteInner({
           const command: CommandPaletteItem = {
             label: t(`toolBar.${value}`),
             category: DEFAULT_CATEGORIES.tools,
-            shortcut,
+            shortcut: shortcut === null ? undefined : String(shortcut),
             icon,
             keywords: ["toolbar"],
             viewMode: false,

packages/excalidraw/components/HelpDialog.tsx

@@ -151,6 +151,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("toolBar.rectangle")}
               shortcuts={[KEYS.R, KEYS["2"]]}
             />
+          <Shortcut
+            label={t("toolBar.regularPolygon")}
+            shortcuts={["6"]}
+          />
             <Shortcut
               label={t("toolBar.diamond")}
               shortcuts={[KEYS.D, KEYS["3"]]}

packages/excalidraw/components/Stats/index.tsx

@@ -296,7 +296,9 @@ export const StatsInner = memo(
                       >
                         {appState.croppingElementId
                           ? t("labels.imageCropping")
-                          : t(`element.${singleElement.type}`)}
+                          : singleElement && singleElement.type
+                            ? singleElement.type.charAt(0).toUpperCase() + singleElement.type.slice(1)
+                            : ""}
                       </StatsRow>
 
                       <StatsRow>

packages/excalidraw/components/icons.tsx

@@ -308,6 +308,17 @@ export const DiamondIcon = createIcon(
   tablerIconProps,
 );
 
+export const RegularPolygonIcon = createIcon(
+  // Hexagon points - centered in a 24x24 viewport
+  <polygon
+    points="12,3 20.8,7.5 20.8,16.5 12,21 3.2,16.5 3.2,7.5"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    fill="none"
+  />,
+  tablerIconProps, // Use tablerIconProps for consistency
+);
+
 // tabler-icons: circle
 export const EllipseIcon = createIcon(
   <g strokeWidth="1.5">
@@ -920,7 +931,7 @@ export const shield = createIcon(
 );
 
 export const file = createIcon(
-  "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm32-48h224V288l-23.5-23.5c-4.7-4.7-12.3-4.7-17 0L176 352l-39.5-39.5c-4.7-4.7-12.3-4.7-17 0L80 352v64zm48-240c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z",
+  "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm48-48h224V288l-23.5-23.5c-4.7-4.7-12.3-4.7-17 0L176 352l-39.5-39.5c-4.7-4.7-12.3-4.7-17 0L80 352v64zm48-240c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z",
   { width: 384, height: 512 },
 );
 

packages/excalidraw/components/shapes.tsx

@@ -11,6 +11,7 @@ import {
   TextIcon,
   ImageIcon,
   EraserIcon,
+  RegularPolygonIcon,
 } from "./icons";
 
 export const SHAPES = [
@@ -77,6 +78,13 @@ export const SHAPES = [
     numericKey: KEYS["9"],
     fillable: false,
   },
+  {
+    icon: RegularPolygonIcon,
+    value: "regularPolygon",
+    key: null, // TODO: Assign a unique letter key if needed
+    numericKey: null, // Removed conflicting key
+    fillable: true,
+  },
   {
     icon: EraserIcon,
     value: "eraser",

packages/excalidraw/data/restore.ts

@@ -102,6 +102,7 @@ export const AllowedExcalidrawActiveTools: Record<
   hand: true,
   laser: false,
   magicframe: false,
+  regularPolygon: true,
 };
 
 export type RestoredDataState = {

packages/excalidraw/locales/en.json

@@ -126,6 +126,7 @@
     "increaseFontSize": "Increase font size",
     "unbindText": "Unbind text",
     "bindText": "Bind text to the container",
+    "regularPolygonSides": "Number of sides",
     "createContainerFromText": "Wrap text in a container",
     "link": {
       "edit": "Edit link",
@@ -283,6 +284,7 @@
     "ellipse": "Ellipse",
     "arrow": "Arrow",
     "line": "Line",
+    "regularPolygon": "Regular Polygon",
     "freedraw": "Draw",
     "text": "Text",
     "library": "Library",

packages/excalidraw/renderer/staticSvgScene.ts

@@ -150,6 +150,7 @@ const renderElementToSvg = (
       // this should not happen
       throw new Error("Selection rendering is not supported for SVG");
     }
+    case "regularPolygon": // <-- Add this line
     case "rectangle":
     case "diamond":
     case "ellipse": {

packages/excalidraw/scene/types.ts

@@ -156,4 +156,5 @@ export type ElementShapes = {
   image: null;
   frame: null;
   magicframe: null;
+  regularPolygon: Drawable;
 };

packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -1219,7 +1219,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -1278,7 +1278,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1437,7 +1437,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1014066025,
   "strokeColor": "#1e1e1e",
@@ -1471,7 +1471,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -1530,7 +1530,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1583,7 +1583,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1772,7 +1772,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1014066025,
   "strokeColor": "#1e1e1e",
@@ -1806,7 +1806,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -1865,7 +1865,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1918,7 +1918,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2109,7 +2109,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -2168,7 +2168,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2325,7 +2325,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -2384,7 +2384,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2571,7 +2571,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -2605,7 +2605,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1014066025,
   "strokeColor": "#1e1e1e",
@@ -2664,7 +2664,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2717,7 +2717,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2883,7 +2883,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -2919,7 +2919,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1014066025,
   "strokeColor": "#1e1e1e",
@@ -2978,7 +2978,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3031,7 +3031,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3285,7 +3285,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "opacity": 60,
   "roughness": 2,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 289600103,
   "strokeColor": "#e03131",
@@ -3344,7 +3344,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3397,7 +3397,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3572,6 +3572,9 @@ History {
               "fillStyle": "cross-hatch",
               "opacity": 60,
               "roughness": 2,
+              "roundness": {
+                "type": 3,
+              },
               "strokeColor": "#e03131",
               "strokeStyle": "dotted",
             },
@@ -3580,6 +3583,9 @@ History {
               "fillStyle": "solid",
               "opacity": 100,
               "roughness": 1,
+              "roundness": {
+                "type": 2,
+              },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
             },
@@ -3728,7 +3734,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1014066025,
   "strokeColor": "#1e1e1e",
@@ -3762,7 +3768,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -3821,7 +3827,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3874,7 +3880,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4055,7 +4061,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1014066025,
   "strokeColor": "#1e1e1e",
@@ -4089,7 +4095,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -4148,7 +4154,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4201,7 +4207,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4385,7 +4391,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -4419,7 +4425,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 238820263,
   "strokeColor": "#1e1e1e",
@@ -4478,7 +4484,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4531,7 +4537,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -5666,7 +5672,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 453191,
   "strokeColor": "#1e1e1e",
@@ -5700,7 +5706,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 400692809,
   "strokeColor": "#1e1e1e",
@@ -5759,7 +5765,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -5812,7 +5818,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -6892,7 +6898,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -6928,7 +6934,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 238820263,
   "strokeColor": "#1e1e1e",
@@ -6987,7 +6993,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -7040,7 +7046,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -9819,7 +9825,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] el
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 449462985,
   "strokeColor": "#1e1e1e",
@@ -9946,7 +9952,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",

packages/excalidraw/tests/__snapshots__/dragCreate.test.tsx.snap

@@ -193,7 +193,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",

packages/excalidraw/tests/__snapshots__/history.test.tsx.snap

@@ -6176,7 +6176,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -6208,7 +6208,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -6240,7 +6240,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -6297,7 +6297,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -6351,7 +6351,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -6426,7 +6426,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -7610,7 +7610,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -7668,7 +7668,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -8567,7 +8567,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -8599,7 +8599,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -8688,7 +8688,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -8741,7 +8741,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -9262,7 +9262,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -9351,7 +9351,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -9531,7 +9531,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -9643,7 +9643,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -9799,7 +9799,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#ffec99",
   "strokeStyle": "solid",
@@ -9856,7 +9856,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10681,7 +10681,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -10738,7 +10738,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11375,7 +11375,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -11477,7 +11477,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11663,7 +11663,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -11721,7 +11721,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11876,7 +11876,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -11908,7 +11908,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -11965,7 +11965,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -12119,7 +12119,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -12284,7 +12284,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -12809,7 +12809,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -12866,7 +12866,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13054,7 +13054,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -13111,7 +13111,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13267,7 +13267,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -13363,7 +13363,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13518,7 +13518,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -13550,7 +13550,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -13607,7 +13607,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13698,7 +13698,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -14595,7 +14595,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -14716,7 +14716,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -18437,7 +18437,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -18469,7 +18469,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -18501,7 +18501,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -18558,7 +18558,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -18611,7 +18611,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -18664,7 +18664,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -19438,7 +19438,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -19470,7 +19470,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -19502,7 +19502,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
@@ -19559,7 +19559,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -19612,7 +19612,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -19665,7 +19665,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",

packages/excalidraw/tests/__snapshots__/move.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 5`] = `
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
@@ -52,7 +52,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 6`] = `
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1604849351,
   "strokeColor": "#1e1e1e",
@@ -86,7 +86,7 @@ exports[`move element > rectangle 5`] = `
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
@@ -125,7 +125,7 @@ exports[`move element > rectangles with binding arrow 5`] = `
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
@@ -164,7 +164,7 @@ exports[`move element > rectangles with binding arrow 6`] = `
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1150084233,
   "strokeColor": "#1e1e1e",

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -162,7 +162,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -215,7 +215,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -268,7 +268,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -580,7 +580,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -633,7 +633,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -686,7 +686,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -978,7 +978,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1031,7 +1031,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1191,7 +1191,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1734,7 +1734,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1787,7 +1787,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -1840,7 +1840,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2107,7 +2107,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2160,7 +2160,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2341,7 +2341,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2524,7 +2524,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2577,7 +2577,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -2843,7 +2843,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3070,7 +3070,7 @@ exports[`regression tests > click on an element and drag it > [dragged] element
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
@@ -3129,7 +3129,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3336,7 +3336,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3567,7 +3567,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3620,7 +3620,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3825,7 +3825,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3878,7 +3878,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -3931,7 +3931,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4136,7 +4136,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4189,7 +4189,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4588,7 +4588,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -4842,7 +4842,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -5125,7 +5125,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -5506,7 +5506,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -5559,7 +5559,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -5612,7 +5612,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -5893,7 +5893,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -6178,7 +6178,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -6992,7 +6992,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -7323,7 +7323,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -8070,7 +8070,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10259,7 +10259,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10448,7 +10448,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10501,7 +10501,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10554,7 +10554,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10689,7 +10689,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10722,7 +10722,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10755,7 +10755,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10938,7 +10938,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -10991,7 +10991,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11341,7 +11341,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11545,7 +11545,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11598,7 +11598,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11859,7 +11859,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11912,7 +11912,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -11965,7 +11965,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -12276,7 +12276,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -12329,7 +12329,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -12467,7 +12467,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -12520,7 +12520,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13012,7 +13012,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13065,7 +13065,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13118,7 +13118,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13628,7 +13628,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -13966,7 +13966,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -14473,7 +14473,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",
@@ -14526,7 +14526,7 @@ History {
               "opacity": 100,
               "roughness": 1,
               "roundness": {
-                "type": 3,
+                "type": 2,
               },
               "strokeColor": "#1e1e1e",
               "strokeStyle": "solid",

packages/excalidraw/tests/__snapshots__/selection.test.tsx.snap

@@ -185,7 +185,7 @@ exports[`select single element on the scene > rectangle 1`] = `
   "opacity": 100,
   "roughness": 1,
   "roundness": {
-    "type": 3,
+    "type": 2,
   },
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",

packages/excalidraw/tests/helpers/api.ts

@@ -17,6 +17,7 @@ import {
   newLinearElement,
   newMagicFrameElement,
   newTextElement,
+  newRegularPolygonElement,
 } from "@excalidraw/element/newElement";
 
 import { isLinearElementType } from "@excalidraw/element/typeChecks";
@@ -361,10 +362,19 @@ export class API {
       case "magicframe":
         element = newMagicFrameElement({ ...base, width, height });
         break;
+      case "regularPolygon":
+        element = newRegularPolygonElement({
+          type: type as "regularPolygon",
+          ...base,
+        });
+        break;
       default:
+        // This check ensures all TOOL_TYPE values are handled.
+        // If a new tool type is added without updating this switch,
+        // TypeScript will error here.
         assertNever(
           type,
-          `API.createElement: unimplemented element type ${type}}`,
+          `API.createElement: unimplemented element type ${type as string}}`,
         );
         break;
     }

packages/excalidraw/tests/queries/toolQueries.ts

@@ -5,7 +5,7 @@ import { TOOL_TYPE } from "@excalidraw/common";
 import type { ToolType } from "@excalidraw/excalidraw/types";
 
 const _getAllByToolName = (container: HTMLElement, tool: ToolType | "lock") => {
-  const toolTitle = tool === "lock" ? "lock" : TOOL_TYPE[tool];
+  const toolTitle = tool === "lock" ? "lock" : TOOL_TYPE[tool as keyof typeof TOOL_TYPE];
   return queries.getAllByTestId(container, `toolbar-${toolTitle}`);
 };
 

packages/excalidraw/types.ts

@@ -138,6 +138,7 @@ export type ToolType =
   | "selection"
   | "lasso"
   | "rectangle"
+  | "regularPolygon"
   | "diamond"
   | "ellipse"
   | "arrow"