fix sequence of events

src/components/App.tsx

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

src/data/restore.ts

@@ -294,15 +294,11 @@ const restoreElement = (
     case "ellipse":
     case "rectangle":
     case "diamond":
-      return restoreElementWithProperties(element, {});
     case "iframe":
-      return restoreElementWithProperties(element, {
+      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/data/url.ts

@@ -1,10 +1,10 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
 
 export const normalizeLink = (link: string) => {
-  link = link.trim();
   if (!link) {
     return link;
   }
+  link = link.trim();
   return sanitizeUrl(link);
 };
 

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

src/element/resizeElements.ts

@@ -27,7 +27,6 @@ import {
 import {
   isArrowElement,
   isBoundToContainer,
-  isIframeLikeElement,
   isFrameLikeElement,
   isFreeDrawElement,
   isImageElement,
@@ -587,21 +586,6 @@ export const resizeSingleElement = (
   };
 
   if ("scale" in element && "scale" in stateAtResizeStart) {
-    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
@@ -612,7 +596,6 @@ export const resizeSingleElement = (
       ],
     });
   }
-  }
 
   if (
     isArrowElement(element) &&

src/element/types.ts

@@ -96,7 +96,6 @@ 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 &
@@ -104,7 +103,6 @@ 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,7 +13,6 @@ import {
   isInitializedImageElement,
   isArrowElement,
   hasBoundTextElement,
-  isIframeLikeElement,
   isMagicFrameElement,
 } from "../element/typeChecks";
 import { getElementAbsoluteCoords } from "../element/bounds";
@@ -521,8 +520,7 @@ const drawElementFromCanvas = (
 
     if (
       "scale" in elementWithCanvas.element &&
-      !isPendingImageElement(element, renderConfig) &&
+      !isPendingImageElement(element, renderConfig)
-      !isIframeLikeElement(element)
     ) {
       context.scale(
         elementWithCanvas.element.scale[0],
@@ -998,8 +996,6 @@ export const renderElementToSvg = (
         renderConfig,
       );
 
-      const scaleX = element.scale?.[0] || 1;
-      const scaleY = element.scale?.[1] || 1;
       // render embeddable element + iframe
       const embeddableNode = roughSVGDrawWithPrecision(
         rsvg,
@@ -1011,7 +1007,7 @@ export const renderElementToSvg = (
         "transform",
         `translate(${offsetX || 0} ${
           offsetY || 0
-        }) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`,
+        }) rotate(${degree} ${cx} ${cy})`,
       );
       while (embeddableNode.firstChild) {
         embeddableNode.removeChild(embeddableNode.firstChild);
@@ -1042,8 +1038,8 @@ export const renderElementToSvg = (
           SVG_NS,
           "foreignObject",
         );
-        foreignObject.style.width = `${element.width / scaleX}px`;
+        foreignObject.style.width = `${element.width}px`;
-        foreignObject.style.height = `${element.height / scaleY}px`;
+        foreignObject.style.height = `${element.height}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,7 +35,6 @@ export const embeddableFixture: ExcalidrawElement = {
   ...elementBase,
   type: "embeddable",
   validated: null,
-  scale: [1, 1],
 };
 export const ellipseFixture: ExcalidrawElement = {
   ...elementBase,