suport iFrame

src/components/App.tsx

@@ -1038,6 +1038,10 @@ class App extends React.Component<AppProps, AppState> {
             this.state.activeEmbeddable?.element === el &&
             this.state.activeEmbeddable?.state === "hover";
 
+          // Modify the scale based on el.scale property
+          const [xScale, yScale] = el.scale ?? [1, 1];
+          const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;
+
           return (
             <div
               key={el.id}
@@ -1048,14 +1052,13 @@ class App extends React.Component<AppProps, AppState> {
                 transform: isVisible
                   ? `translate(${x - this.state.offsetLeft}px, ${
                       y - this.state.offsetTop
-                    }px) scale(${scale})`
+                    }px) ${scaledTransform}`
                   : "none",
                 display: isVisible ? "block" : "none",
                 opacity: el.opacity / 100,
-                ["--embeddable-radius" as string]: `${getCornerRadius(
-                  Math.min(el.width, el.height),
-                  el,
-                )}px`,
+                ["--embeddable-radius" as string]: `${
+                  getCornerRadius(Math.min(el.width, el.height), el) / xScale
+                }px`,
               }}
             >
               <div
@@ -1077,8 +1080,8 @@ class App extends React.Component<AppProps, AppState> {
                 }}*/
                 className="excalidraw__embeddable-container__inner"
                 style={{
-                  width: isVisible ? `${el.width}px` : 0,
-                  height: isVisible ? `${el.height}px` : 0,
+                  width: isVisible ? `${el.width / xScale}px` : 0,
+                  height: isVisible ? `${el.height / yScale}px` : 0,
                   transform: isVisible ? `rotate(${el.angle}rad)` : "none",
                   pointerEvents: isActive
                     ? POINTER_EVENTS.enabled
@@ -1093,7 +1096,7 @@ class App extends React.Component<AppProps, AppState> {
                 <div
                   className="excalidraw__embeddable__outer"
                   style={{
-                    padding: `${el.strokeWidth}px`,
+                    padding: `${el.strokeWidth / el.scale[0]}px`,
                   }}
                 >
                   {(isEmbeddableElement(el)

src/data/restore.ts

@@ -294,11 +294,15 @@ const restoreElement = (
     case "ellipse":
     case "rectangle":
     case "diamond":
-    case "iframe":
       return restoreElementWithProperties(element, {});
+    case "iframe":
+      return restoreElementWithProperties(element, {
+        scale: element.scale ?? [1, 1],
+      });
     case "embeddable":
       return restoreElementWithProperties(element, {
         validated: null,
+        scale: element.scale ?? [1, 1],
       });
     case "magicframe":
     case "frame":

src/element/embeddable.ts

@@ -21,7 +21,7 @@ import {
 const embeddedLinkCache = new Map<string, IframeData>();
 
 const RE_YOUTUBE =
-  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
+  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|.*&t=|\?start=|.*&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
 
 const RE_VIMEO =
   /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;

src/element/newElement.ts

@@ -142,6 +142,7 @@ export const newEmbeddableElement = (
   return {
     ..._newElementBase<ExcalidrawEmbeddableElement>("embeddable", opts),
     validated: opts.validated,
+    scale: [1, 1],
   };
 };
 
@@ -152,6 +153,7 @@ export const newIframeElement = (
 ): NonDeleted<ExcalidrawIframeElement> => {
   return {
     ..._newElementBase<ExcalidrawIframeElement>("iframe", opts),
+    scale: [1, 1],
   };
 };
 

src/element/resizeElements.ts

@@ -27,6 +27,7 @@ import {
 import {
   isArrowElement,
   isBoundToContainer,
+  isIframeLikeElement,
   isFrameLikeElement,
   isFreeDrawElement,
   isImageElement,
@@ -586,15 +587,31 @@ export const resizeSingleElement = (
   };
 
   if ("scale" in element && "scale" in stateAtResizeStart) {
-    mutateElement(element, {
-      scale: [
-        // defaulting because scaleX/Y can be 0/-0
-        (Math.sign(newBoundsX2 - stateAtResizeStart.x) ||
-          stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0],
-        (Math.sign(newBoundsY2 - stateAtResizeStart.y) ||
-          stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1],
-      ],
-    });
+    if (isIframeLikeElement(element)) {
+      if (shouldMaintainAspectRatio) {
+        const scale: [number, number] = [
+          Math.abs(
+            eleNewWidth /
+              (stateAtResizeStart.width / stateAtResizeStart.scale[0]),
+          ),
+          Math.abs(
+            eleNewHeight /
+              (stateAtResizeStart.height / stateAtResizeStart.scale[1]),
+          ),
+        ];
+        mutateElement(element, { scale });
+      }
+    } else {
+      mutateElement(element, {
+        scale: [
+          // defaulting because scaleX/Y can be 0/-0
+          (Math.sign(newBoundsX2 - stateAtResizeStart.x) ||
+            stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0],
+          (Math.sign(newBoundsY2 - stateAtResizeStart.y) ||
+            stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1],
+        ],
+      });
+    }
   }
 
   if (

src/element/types.ts

@@ -96,6 +96,7 @@ export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase &
      * may not have access to host-app supplied url validator during restore.
      */
     validated: boolean | null;
+    scale: [number, number];
   }>;
 
 export type ExcalidrawIframeElement = _ExcalidrawElementBase &
@@ -103,6 +104,7 @@ export type ExcalidrawIframeElement = _ExcalidrawElementBase &
     type: "iframe";
     // TODO move later to AI-specific frame
     customData?: { generationData?: MagicCacheData };
+    scale: [number, number];
   }>;
 
 export type ExcalidrawIframeLikeElement =

src/renderer/renderElement.ts

@@ -13,6 +13,7 @@ import {
   isInitializedImageElement,
   isArrowElement,
   hasBoundTextElement,
+  isIframeLikeElement,
   isMagicFrameElement,
 } from "../element/typeChecks";
 import { getElementAbsoluteCoords } from "../element/bounds";
@@ -520,7 +521,8 @@ const drawElementFromCanvas = (
 
     if (
       "scale" in elementWithCanvas.element &&
-      !isPendingImageElement(element, renderConfig)
+      !isPendingImageElement(element, renderConfig) &&
+      !isIframeLikeElement(element)
     ) {
       context.scale(
         elementWithCanvas.element.scale[0],
@@ -996,6 +998,8 @@ export const renderElementToSvg = (
         renderConfig,
       );
 
+      const scaleX = element.scale?.[0] || 1;
+      const scaleY = element.scale?.[1] || 1;
       // render embeddable element + iframe
       const embeddableNode = roughSVGDrawWithPrecision(
         rsvg,
@@ -1007,7 +1011,7 @@ export const renderElementToSvg = (
         "transform",
         `translate(${offsetX || 0} ${
           offsetY || 0
-        }) rotate(${degree} ${cx} ${cy})`,
+        }) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`,
       );
       while (embeddableNode.firstChild) {
         embeddableNode.removeChild(embeddableNode.firstChild);
@@ -1038,8 +1042,8 @@ export const renderElementToSvg = (
           SVG_NS,
           "foreignObject",
         );
-        foreignObject.style.width = `${element.width}px`;
-        foreignObject.style.height = `${element.height}px`;
+        foreignObject.style.width = `${element.width / scaleX}px`;
+        foreignObject.style.height = `${element.height / scaleY}px`;
         foreignObject.style.border = "none";
         const div = foreignObject.ownerDocument!.createElementNS(SVG_NS, "div");
         div.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");

src/tests/fixtures/elementFixture.ts

@@ -35,6 +35,7 @@ export const embeddableFixture: ExcalidrawElement = {
   ...elementBase,
   type: "embeddable",
   validated: null,
+  scale: [1, 1],
 };
 export const ellipseFixture: ExcalidrawElement = {
   ...elementBase,