feat: wireframe-to-code (#7334)

src/tests/helpers/api.ts

@@ -7,6 +7,8 @@ import {
   ExcalidrawImageElement,
   FileId,
   ExcalidrawFrameElement,
+  ExcalidrawElementType,
+  ExcalidrawMagicFrameElement,
 } from "../../element/types";
 import { newElement, newTextElement, newLinearElement } from "../../element";
 import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS } from "../../constants";
@@ -20,7 +22,9 @@ import {
   newEmbeddableElement,
   newFrameElement,
   newFreeDrawElement,
+  newIframeElement,
   newImageElement,
+  newMagicFrameElement,
 } from "../../element/newElement";
 import { Point } from "../../types";
 import { getSelectedElements } from "../../scene/selection";
@@ -74,7 +78,7 @@ export class API {
   };
 
   static createElement = <
-    T extends Exclude<ExcalidrawElement["type"], "selection"> = "rectangle",
+    T extends Exclude<ExcalidrawElementType, "selection"> = "rectangle",
   >({
     // @ts-ignore
     type = "rectangle",
@@ -139,6 +143,8 @@ export class API {
     ? ExcalidrawImageElement
     : T extends "frame"
     ? ExcalidrawFrameElement
+    : T extends "magicframe"
+    ? ExcalidrawMagicFrameElement
     : ExcalidrawGenericElement => {
     let element: Mutable<ExcalidrawElement> = null!;
 
@@ -202,6 +208,12 @@ export class API {
           validated: null,
         });
         break;
+      case "iframe":
+        element = newIframeElement({
+          type: "iframe",
+          ...base,
+        });
+        break;
       case "text":
         const fontSize = rest.fontSize ?? appState.currentItemFontSize;
         const fontFamily = rest.fontFamily ?? appState.currentItemFontFamily;
@@ -253,6 +265,9 @@ export class API {
       case "frame":
         element = newFrameElement({ ...base, width, height });
         break;
+      case "magicframe":
+        element = newMagicFrameElement({ ...base, width, height });
+        break;
       default:
         assertNever(
           type,

src/tests/helpers/ui.ts

@@ -1,4 +1,4 @@
-import type { Point } from "../../types";
+import type { Point, ToolType } from "../../types";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -20,15 +20,14 @@ import {
   type TransformHandleDirection,
 } from "../../element/transformHandles";
 import { KEYS } from "../../keys";
-import { type ToolName } from "../queries/toolQueries";
 import { fireEvent, GlobalTestState, screen } from "../test-utils";
 import { mutateElement } from "../../element/mutateElement";
 import { API } from "./api";
 import {
-  isFrameElement,
   isLinearElement,
   isFreeDrawElement,
   isTextElement,
+  isFrameLikeElement,
 } from "../../element/typeChecks";
 import { getCommonBounds, getElementPointsCoords } from "../../element/bounds";
 import { rotatePoint } from "../../math";
@@ -290,7 +289,7 @@ const transform = (
     ];
   } else {
     const [x1, y1, x2, y2] = getCommonBounds(elements);
-    const isFrameSelected = elements.some(isFrameElement);
+    const isFrameSelected = elements.some(isFrameLikeElement);
     const transformHandles = getTransformHandlesFromCoords(
       [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2],
       0,
@@ -345,7 +344,7 @@ const proxy = <T extends ExcalidrawElement>(
 };
 
 /** Tools that can be used to draw shapes */
-type DrawingToolName = Exclude<ToolName, "lock" | "selection" | "eraser">;
+type DrawingToolName = Exclude<ToolType, "lock" | "selection" | "eraser">;
 
 type Element<T extends DrawingToolName> = T extends "line" | "freedraw"
   ? ExcalidrawLinearElement
@@ -362,7 +361,7 @@ type Element<T extends DrawingToolName> = T extends "line" | "freedraw"
   : ExcalidrawElement;
 
 export class UI {
-  static clickTool = (toolName: ToolName) => {
+  static clickTool = (toolName: ToolType | "lock") => {
     fireEvent.click(GlobalTestState.renderResult.getByToolName(toolName));
   };
 

src/tests/queries/toolQueries.ts

@@ -1,23 +1,9 @@
 import { queries, buildQueries } from "@testing-library/react";
+import { ToolType } from "../../types";
+import { TOOL_TYPE } from "../../constants";
 
-const toolMap = {
-  lock: "lock",
-  selection: "selection",
-  rectangle: "rectangle",
-  diamond: "diamond",
-  ellipse: "ellipse",
-  arrow: "arrow",
-  line: "line",
-  freedraw: "freedraw",
-  text: "text",
-  eraser: "eraser",
-  frame: "frame",
-};
-
-export type ToolName = keyof typeof toolMap;
-
-const _getAllByToolName = (container: HTMLElement, tool: string) => {
-  const toolTitle = toolMap[tool as ToolName];
+const _getAllByToolName = (container: HTMLElement, tool: ToolType | "lock") => {
+  const toolTitle = tool === "lock" ? "lock" : TOOL_TYPE[tool];
   return queries.getAllByTestId(container, `toolbar-${toolTitle}`);
 };
 
@@ -32,7 +18,7 @@ export const [
   getByToolName,
   findAllByToolName,
   findByToolName,
-] = buildQueries<string[]>(
+] = buildQueries<(ToolType | "lock")[]>(
   _getAllByToolName,
   getMultipleError,
   getMissingError,