diff --git a/src/components/App.tsx b/src/components/App.tsx index 9dc4395c68..caa11c1026 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1039,7 +1039,7 @@ class App extends React.Component { this.state.activeEmbeddable?.state === "hover"; // Modify the scale based on el.scale property - const [xScale, yScale] = el.scale; + const [xScale, yScale] = el.scale ?? [1, 1]; const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`; return ( @@ -1056,10 +1056,9 @@ class App extends React.Component { : "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`, }} >
=> { return { ..._newElementBase("iframe", opts), + scale: [1, 1], }; }; diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts index b4e335da7d..09eee7b60e 100644 --- a/src/element/resizeElements.ts +++ b/src/element/resizeElements.ts @@ -27,6 +27,7 @@ import { import { isArrowElement, isBoundToContainer, + isIframeLikeElement, isFrameLikeElement, isFreeDrawElement, isImageElement, @@ -586,7 +587,7 @@ export const resizeSingleElement = ( }; if ("scale" in element && "scale" in stateAtResizeStart) { - if (isFrameLikeElement(element)) { + if (isIframeLikeElement(element)) { if (shouldMaintainAspectRatio) { const scale: [number, number] = [ Math.abs( diff --git a/src/element/types.ts b/src/element/types.ts index 84e43e3669..de07f3de94 100644 --- a/src/element/types.ts +++ b/src/element/types.ts @@ -104,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 = diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 00b04f290a..7b5bb2d4e9 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -13,7 +13,7 @@ import { isInitializedImageElement, isArrowElement, hasBoundTextElement, - isFrameLikeElement, + isIframeLikeElement, isMagicFrameElement, } from "../element/typeChecks"; import { getElementAbsoluteCoords } from "../element/bounds"; @@ -522,7 +522,7 @@ const drawElementFromCanvas = ( if ( "scale" in elementWithCanvas.element && !isPendingImageElement(element, renderConfig) && - !isFrameLikeElement(element) + !isIframeLikeElement(element) ) { context.scale( elementWithCanvas.element.scale[0],