feat: wireframe-to-code (#7334)

src/renderer/renderElement.ts

@@ -13,6 +13,7 @@ import {
   isInitializedImageElement,
   isArrowElement,
   hasBoundTextElement,
+  isMagicFrameElement,
 } from "../element/typeChecks";
 import { getElementAbsoluteCoords } from "../element/bounds";
 import type { RoughCanvas } from "roughjs/bin/canvas";
@@ -272,6 +273,7 @@ const drawElementOnCanvas = (
     ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
   switch (element.type) {
     case "rectangle":
+    case "iframe":
     case "embeddable":
     case "diamond":
     case "ellipse": {
@@ -594,6 +596,7 @@ export const renderElement = (
   appState: StaticCanvasAppState,
 ) => {
   switch (element.type) {
+    case "magicframe":
     case "frame": {
       if (appState.frameRendering.enabled && appState.frameRendering.outline) {
         context.save();
@@ -606,6 +609,12 @@ export const renderElement = (
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
         context.strokeStyle = FRAME_STYLE.strokeColor;
 
+        // TODO change later to only affect AI frames
+        if (isMagicFrameElement(element)) {
+          context.strokeStyle =
+            appState.theme === "light" ? "#7affd7" : "#1d8264";
+        }
+
         if (FRAME_STYLE.radius && context.roundRect) {
           context.beginPath();
           context.roundRect(
@@ -666,6 +675,7 @@ export const renderElement = (
     case "arrow":
     case "image":
     case "text":
+    case "iframe":
     case "embeddable": {
       // TODO investigate if we can do this in situ. Right now we need to call
       // beforehand because math helpers (such as getElementAbsoluteCoords)
@@ -951,6 +961,7 @@ export const renderElementToSvg = (
       addToRoot(g || node, element);
       break;
     }
+    case "iframe":
     case "embeddable": {
       // render placeholder rectangle
       const shape = ShapeCache.generateElementShape(element, true);
@@ -1252,7 +1263,8 @@ export const renderElementToSvg = (
       break;
     }
     // frames are not rendered and only acts as a container
-    case "frame": {
+    case "frame":
+    case "magicframe": {
       if (
         renderConfig.frameRendering.enabled &&
         renderConfig.frameRendering.outline